/* =============================================================================
   Tema de identidad — convivencia de logos ATY / Gobierno de Yucatan
   =============================================================================
   Dos propuestas aprobadas para el HEADER y el FOOTER de la landing:

     v1  Renacimiento Maya   verde ATY  #59AF31
     v2  Gobierno del Estado guinda     #980E49  +  carbon #2D292A

   Solo cambia el color. La estructura, los textos, los logos y la app movil
   se quedan como estan.

   El tema activo se marca con `data-tema` en <html>:
     - por defecto lo pone config('aty.tema')  (variable de entorno ATY_TEMA)
     - se puede forzar en caliente con  #v1 / #v2  o  ?tema=v1|v2  en la URL

   Este archivo se carga DESPUES del resto: sus reglas ganan por orden y por
   especificidad a los colores incrustados en interna.css, nav-bar.css y en los
   estilos en linea de los blades.
   ========================================================================== */

:root {
    --aty-verde: #59AF31;
    --aty-guinda: #980E49;
    --aty-carbon: #2D292A;
}

/* --- v1: Renacimiento Maya (verde ATY) — es tambien el estado por defecto --- */
:root,
html[data-tema="v1"] {
    --aty-acento: var(--aty-verde);
    --aty-barra-app: var(--aty-verde);
    --aty-barra-legal: var(--aty-verde);
    --aty-redes-filtro: none;

    --aty-app-icono: url("/img/avisos/Dowload-app.svg");
    --aty-app-fondo-movil: url("/img/avisos/fondo-mobil.png");
    --aty-app-fondo-tablet: url("/img/avisos/fondo-tablet.png");
    --aty-app-fondo-pc: url("/img/avisos/fondo-pc.png");
    --aty-franja-arriba: url("/img/index/iconos/arriba_footer.svg");
    --aty-franja-abajo: url("/img/index/iconos/homepage_footer.svg");

    /* Logo institucional del bloque de logos. El ratio es ancho/alto del
       archivo: con el se calcula el ancho de la caja a partir del alto. */
    --aty-logo-gob: url("/img/logos/renacimiento-maya.png");
    --aty-logo-gob-ratio: 5.3295;
    /* 938/176 */
}

/* --- v2: Gobierno del Estado (guinda + carbon) --- */
html[data-tema="v2"] {
    --aty-acento: var(--aty-guinda);
    --aty-barra-app: var(--aty-carbon);
    --aty-barra-legal: var(--aty-guinda);
    /* En la propuesta v2 los iconos de redes van en monocromo. Solo
       `grayscale`: al bajarles ademas el brillo se emborronaban unos con otros
       —el icono y su sombra quedaban del mismo gris— y se perdia la silueta. */
    --aty-redes-filtro: grayscale(1);

    --aty-app-icono: url("/img/avisos/Dowload-app-v2.svg");
    --aty-app-fondo-movil: url("/img/avisos/fondo-mobil-v2.png");
    --aty-app-fondo-tablet: url("/img/avisos/fondo-tablet-v2.png");
    --aty-app-fondo-pc: url("/img/avisos/fondo-pc-v2.png");
    --aty-franja-arriba: url("/img/index/iconos/arriba_footer-v2.svg");
    --aty-franja-abajo: url("/img/index/iconos/homepage_footer-v2.svg");
}

/* En el footer, v2 cambia el logo institucional por el escudo del Gobierno del
   Estado. En el header las dos propuestas llevan Renacimiento Maya, tal como
   estan dibujadas en el mockup — por eso esto va acotado a <footer>. */
html[data-tema="v2"] footer {
    --aty-logo-gob: url("/img/logos/gobierno-yucatan.png");
    --aty-logo-gob-ratio: 2.0588;
    /* 140/68 */
}


/* =============================================================================
   Bloque de logos institucional  (header y footer)
   =============================================================================
   Composicion del mockup:  [logo del Gobierno] | [ATY + Agencia de Transporte]
   El primero se intercambia por tema; el de ATY (Logo-oficial-ATY.svg) ya trae
   su propio filete y el texto, y no cambia.

   El alto lo fija quien lo usa con --aty-lockup-alto; el ancho del logo del
   Gobierno sale de multiplicarlo por su ratio, para no depender de
   `aspect-ratio` ni de que el navegador lea las medidas del archivo. */

.aty-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    vertical-align: middle;
    max-width: 100%;
}

.aty-lockup__gob {
    display: block;
    flex: none;
    height: var(--aty-lockup-alto);
    width: calc(var(--aty-lockup-alto) * var(--aty-logo-gob-ratio));
    background: var(--aty-logo-gob) center / contain no-repeat;
}

.aty-lockup__filete {
    display: block;
    flex: none;
    width: 1px;
    height: calc(var(--aty-lockup-alto) * 1.1);
    background: #C2995C;
    /* el oro del manual de identidad */
}

.aty-lockup__aty {
    display: block;
    flex: none;
    height: var(--aty-lockup-alto);
    width: auto;
}

/* Alturas por contexto */
.navbar .aty-lockup {
    --aty-lockup-alto: 17px;
}

@media (min-width: 400px) {
    .navbar .aty-lockup {
        --aty-lockup-alto: 20px;
    }
}

@media (min-width: 576px) {
    .navbar .aty-lockup {
        --aty-lockup-alto: 24px;
    }
}

@media (min-width: 992px) {
    .navbar .aty-lockup {
        --aty-lockup-alto: 30px;
    }
}

@media (min-width: 1200px) {
    .navbar .aty-lockup {
        --aty-lockup-alto: 34px;
    }
}

/* En el footer el bloque va grande: en el mockup mide 5.4 veces la altura del
   texto "MEDIOS DE CONTACTO" que tiene debajo, y con 32/40 px se quedaba en
   3.9. De ahi el factor 1.4 hasta los 56 px de escritorio.

   Los valores de movil y tableta no son ese factor, sino el alto maximo que
   cabe a lo ancho, porque el bloque no encoge: mide  alto x (ratio del logo
   del Gobierno + 6.24 del de ATY) + 23 px de filete y huecos. El que manda es
   Renacimiento Maya, el mas ancho de los dos, con 11.57 de ancho por cada
   alto. Contra el ancho util del contenedor (la pantalla menos 24 px, o 540 /
   720 / 960 fijos a partir de sm) el techo sale en 23 px a 320, 30 a 390, 42 a
   576 y 58 a 768. De ahi estos cuatro escalones. */
footer .aty-lockup {
    --aty-lockup-alto: 22px;
}

@media (min-width: 400px) {
    footer .aty-lockup {
        --aty-lockup-alto: 28px;
    }
}

@media (min-width: 576px) {
    footer .aty-lockup {
        --aty-lockup-alto: 40px;
    }
}

@media (min-width: 768px) {
    footer .aty-lockup {
        --aty-lockup-alto: 56px;
    }
}


/* =============================================================================
   HEADER
   ========================================================================== */

/* Banner "NUEVA APP VA-Y-VEN": patron de fondo por breakpoint.
   Mismos cortes que interna.css para que el arte encaje igual. */
@media (max-width: 767px) {
    .background-avisoapp {
        background-image: var(--aty-app-fondo-movil);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .background-avisoapp {
        background-image: var(--aty-app-fondo-tablet);
    }
}

@media (min-width: 1200px) {
    .background-avisoapp {
        background-image: var(--aty-app-fondo-pc);
    }
}

/* Reemplaza al <img> del icono de la app: mismo alto maximo (9vh) y misma
   proporcion que Dowload-app.svg (887x229), pero intercambiable por CSS.
   El relleno con padding reproduce el `height:auto` de la imagen sin depender
   de `aspect-ratio`. */
.aty-app-icono {
    width: 34.86vh;
    /* 9vh * 887/229 */
    max-width: 100%;
    background: var(--aty-app-icono) center / 100% 100% no-repeat;
}

.aty-app-icono::before {
    content: "";
    display: block;
    padding-top: 25.8174%;
    /* 229/887 */
}

/* Barra "DESCARGA O ACTUALIZA" bajo el banner */
.bottom-bar,
.download-button {
    background-color: var(--aty-barra-app);
}

/* Titular de la portada ("ATY TE CONECTA"). En v1 se queda gris, como en el
   mockup; en v2 va entero en guinda.
   El `!important` es para el <span class="text-secondary"> de dentro: esa
   utilidad de bootstrap ya trae el suyo, y sin esto solo cambiaria de color la
   palabra "ATY". Va acotado al tema v2 y a esta clase. */
html[data-tema="v2"] .aty-titular,
html[data-tema="v2"] .aty-titular .text-secondary {
    color: var(--aty-guinda) !important;
}

/* Menu hamburguesa abierto */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar.bar1,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar.bar3 {
    background: var(--aty-acento);
}


/* =============================================================================
   FOOTER
   ========================================================================== */

/* Franjas ilustradas de arriba y de abajo. Sustituyen a los <img class="w-100">
   para poder cambiarlas de color sin descargar las dos versiones. */
.aty-franja {
    width: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.aty-franja::before {
    content: "";
    display: block;
}

.aty-franja--arriba {
    background-image: var(--aty-franja-arriba);
}

.aty-franja--arriba::before {
    padding-top: 4.3814%;
    /* 47.34/1080.474 */
}

.aty-franja--abajo {
    background-image: var(--aty-franja-abajo);
}

.aty-franja--abajo::before {
    padding-top: 12.7650%;
    /* 138.5/1085 */
}

/* Subrayado de los titulos de seccion. El sitio repite estos ids por pagina
   —invalido, pero es lo que hay— y les clava el verde en varias media queries:
   los `bar-*` en nav-bar.css y los `P-*` en interna.css. Estan los siete
   porque conviven en la misma pagina: dejar fuera `P-title` hacia que en
   /rutas el titulo saliera verde y "Transbordos", justo debajo, guinda.
   El selector lleva `html` delante para ganar por especificidad, sin depender
   del orden de carga.

   Antes esto estaba acotado a <footer>. El mockup pinta de guinda tambien los
   de la landing ("Recarga tu tarjeta", "Tramites en linea"), asi que va a todo
   el sitio: es el color de acento, y en v1 sigue resolviendo al verde de
   siempre. */
html #bar-title,
html #bar-title2,
html #bar-title3,
html #bar-title4,
html #bar-menu,
html #P-title,
html #P-title2 {
    background: var(--aty-acento);
}

/* Pastilla del correo de contacto */
.aty-correo {
    color: var(--aty-acento);
    border-color: var(--aty-acento);
}

/* Iconos de redes sociales */
.aty-red-icono {
    filter: var(--aty-redes-filtro);
}

/* Barra legal / copyright */
.aty-barra-legal {
    background-color: var(--aty-barra-legal);
}
