/* =============================================================================
   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 oscuro */
    --aty-redes-filtro: grayscale(1) brightness(0.7);

    --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;
}

.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;
    }
}

footer .aty-lockup {
    --aty-lockup-alto: 32px;
}

/* En celulares angostos el bloque de logos medía más que la pantalla y la página
   se podía desplazar de lado (y las ventanas emergentes se veían descentradas). */
@media (max-width: 419px) {
    footer .aty-lockup {
        --aty-lockup-alto: 24px;
        max-width: 100%;
    }
}

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


/* =============================================================================
   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);
}

/* 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 del titulo del footer. Acotado a <footer> a proposito: el mismo
   id #bar-title se usa en el contenido de varias paginas y ahi no se toca. */
footer #bar-title {
    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);
}