/*
 * RePelis24 — ajustes sobre el CSS de DooPlay.
 * ---------------------------------------------------------------------------
 *
 * Aqui vive el CSS que antes estaba en Apariencia > Personalizar > CSS adicional,
 * mas los dos retoques que se hacian editando a mano los .min.css del tema padre.
 *
 * IMPORTANTE: una vez instalado esto, VACIA el cuadro de CSS adicional del
 * Personalizador. Si se queda ahi, sigue imprimiendose despues de este archivo y
 * gana, con lo que las correcciones de abajo no tendrian efecto.
 *
 * Este archivo se carga en todas las paginas del front, despues de front.style,
 * colors.* y front.mobile del padre, asi que sus reglas ganan sin !important.
 *
 * Sobre el orden con las plantillas: tpl-home.php, tpl-anos.php y tpl-generos.php
 * llevan su propio <style> dentro del cuerpo de la pagina. Como van despues del
 * <head>, esos estilos ganan sobre los de aqui EN ESAS TRES PAGINAS. Es el
 * comportamiento que ya tenia el sitio y se ha respetado: sirven de override por
 * pagina.
 */


/* ==========================================================================
   1. Tipografia de los bloques de texto
   ========================================================================== */

.rep-h1 {
    font-size: 2rem;
    color: #ffffff;
    text-align: center;
    font-family: sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.3);
    margin-bottom: 6px;
}

.rep-h2 {
    font-size: 1.2rem;
    color: #f0f0f0;
    text-align: center;
    /*
     * OJO: pone "bsans-serif", con una b delante. No es una familia real, asi
     * que el navegador cae en la fuente por defecto (normalmente con serifa).
     * Se deja tal cual para no cambiarte nada sin avisar. Para corregirlo, borra
     * la b: font-family: sans-serif;
     */
    font-family: bsans-serif;
    font-weight: 500;
    margin-bottom: 6px;
}

.rep-p {
    font-size: 1.0rem;
    color: #ccc;
    text-align: center;
    font-family: sans-serif;
    margin: 0 auto 10px auto;
    line-height: 1.2;
    opacity: 0.85;
}


/* ==========================================================================
   2. Caja de texto SEO
   ==========================================================================
   Es la que se ve en /peliculas/, /series/ y en las fichas. En portada, generos
   y anios manda el <style> de cada plantilla, igual que hasta ahora.
   ========================================================================== */

.repelis-seo-box {
    background-color: #000;
    color: #fff;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    margin: 3px auto;
    max-width: 100%;
    width: 100%;
}

.repelis-seo-box h1 {
    font-size: 29px;
    margin-bottom: 10px;
    font-weight: 800;
    color: #fff;
}

.repelis-seo-box h2 {
    font-size: 22px;
    margin-top: 25px;
    color: #fff;
}

.repelis-seo-box p {
    font-size: 15px;
    line-height: 1.6;
    color: #ddd;
    margin: 5px 0;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   3. Caja descriptiva de la ficha de pelicula
   ========================================================================== */

.repelis-rich-box {
    background: #111;
    color: #ccc;
    padding: 15px 20px;
    margin-top: 20px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.6;
}

.repelis-rich-box strong {
    color: #fff;
}

/*
 * El titulo «Sobre -X- la pelicula».
 *
 * Tu CSS definia .repsub-id, pero la plantilla escribe class="subsub-id".
 * Por eso esta regla no se veia nunca. Se incluyen los dos nombres para que
 * funcione sin tener que tocar la plantilla ni tu CSS de otras paginas.
 *
 * CAMBIO VISIBLE: el titulo pasa a ambar, centrado y en negrita. Si lo prefieres
 * como estaba, borra este bloque.
 */
.repsub-id,
.subsub-id {
    color: #ffbf00;
    text-align: center;
    font-weight: bold;
    font-size: 15pt;
}


/* ==========================================================================
   4. Navegador de episodios: flechas en rojo
   ==========================================================================
   Antes se conseguia editando dos archivos minificados del tema padre:
     assets/css/front.style.min.css  → se anadia  color:#ff0000
     assets/css/colors.dark.min.css  → se cambiaba color:#fff por color:#ff0000
   Comprobado en DooPlay 2.5.24: colors.dark.min.css sigue poniendo #fff aqui.
   ========================================================================== */

.pag_episodes .item a i {
    color: #ff0000;
}


/* ==========================================================================
   5. Ocultar los iconos de los generos en la ficha
   ==========================================================================
   En tu CSS del Personalizador esta regla aparecia tres veces y NINGUNA
   funcionaba: una la anulaba el separador /////// de la linea anterior, y las
   otras dos llevaban pegada la linea «Specificity: (0,2,4)» del inspector de
   Chrome, que rompe el selector.

   Aqui va una sola vez y bien escrita, asi que ahora SI se aplica.

   CAMBIO VISIBLE: desaparecen los iconos junto a los generos. Si los quieres de
   vuelta, borra este bloque.
   ========================================================================== */

.dt_mainmeta nav.genres ul li i {
    display: none;
}


/* ==========================================================================
   6. Ocultar los botones superiores
   ========================================================================== */

#top_buttons_parent #top_buttons {
    margin: 0 auto;
    display: none;
    font-size: 2em;
    background: rgba(0, 0, 0, .5);
    padding: 0 5px;
}


/* ==========================================================================
   7. Reglas de tu CSS que NO se han incluido, y por que
   ==========================================================================

   a) .genres-grid-modern / .genre-btn / .years-grid / .year-card
      La version azul (#009AFF) del Personalizador nunca llego a verse: las
      plantillas de Generos y Anios llevan su propio <style> en el cuerpo de la
      pagina, que va despues y gana, y ademas usan «border: none !important»,
      que impide cualquier borde. Decidiste conservar el aspecto actual (rojo),
      asi que esas reglas siguen viviendo SOLO en tpl-generos.php y tpl-anos.php.
      Si algun dia quieres el azul, se cambia alli y no aqui.

   b) @media (max-width: 768px) { .cuevana-seo-box ... }
      Apuntaba a .cuevana-seo-box, una clase de otra plantilla que no existe en
      tu sitio. Estaba muerta y decidiste dejarla fuera.

   c) #playeroptionsul.player-tabs li .title / .server / .loader / i / .flag / img
      Exigen que #playeroptionsul tenga ademas la clase «player-tabs». DooPlay le
      pone «ajax_mode» o «no_ajax», nunca «player-tabs», asi que nunca se
      aplicaron. Y hoy son doblemente inutiles: el reproductor premium oculta esa
      lista y pinta la suya. Los colores de la barra estan en premium-player.css.

      Se dejan aqui comentadas por si alguna vez desactivas el reproductor
      premium (hideNative en false) y quieres retocar la lista nativa — en ese
      caso hay que quitarles «.player-tabs» del selector:

      #playeroptionsul li .title {
          margin-right: 8px;
          font-weight: 500;
          color: #fff !important;
      }
      #playeroptionsul li .server,
      #playeroptionsul li .loader,
      #playeroptionsul li i,
      #playeroptionsul li .flag,
      #playeroptionsul li img {
          color: #fff !important;
          fill: #fff !important;
      }
   ========================================================================== */