/* =============================================================================
   servicios-layout.css
   Estilos del layout de Servicios municipales (antes: 5 bloques <style> inline).

   Debe cargarse DESPUÉS de styles.css, estilos.css y servicios-hermosillo.css,
   porque los <style> inline originales iban al final del <head>.

   Contenido:
     1. Iconos
     2. Tarjetas colapsables
     3. Modal de carga
     4. Keyframes
     5. Estilos heredados: ya no se usan en este layout, pero pueden usarlos las
        vistas hijas. Buscar cada clase en el proyecto antes de borrarla.
   ============================================================================= */


/* ---------- 1. Iconos ---------- */
i.bi {
    font-family: bootstrap-icons !important;
}


/* ---------- 1.1 Pie de página siempre al fondo (sticky footer) ----------
   Sin esto, en páginas con poco contenido (sin resultados de ningún trámite) el pie
   queda justo debajo del formulario, dejando un hueco en blanco hasta el borde de la
   ventana, en vez de quedarse pegado abajo.
   .site-body-grow envuelve todo lo que va ANTES del pie (ver _Layout.cshtml) y crece
   para llenar el alto disponible; el pie, al quedar fuera de ese div, se empuja al fondo. */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-body-grow {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.site-footer {
    flex: 0 0 auto;
}


/* ---------- 2. Tarjetas colapsables ---------- */
.card-colapsable {
    transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.4s ease, margin 0.4s ease;
    max-height: 800px;
    opacity: 1;
    overflow: hidden;
}

.card-colapsable.colapsado {
    max-height: 0;
    opacity: 0;
    transform: translateY(-15px);
    margin-bottom: 0;
    pointer-events: none;
}


/* ---------- 3. Modal de carga ("Procesando") ---------- */
.modalLoading {
    display: none;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

/* Compatibilidad: jQuery .show() deja display:block inline; lo forzamos a flex para centrar. */
.modalLoading[style*="display: block"],
.modalLoading[style*="display: flex"] {
    display: flex !important;
}

.loading-content {
    text-align: center;
    background: white;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.loading-logo {
    width: 280px;
    height: 180px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.loading-text {
    font-family: sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.loading-subtext {
    font-family: sans-serif;
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.spinner-simple {
    width: 24px;
    height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 0.5rem;
}


/* ---------- 3.1 Opción seleccionada del hero ----------
   servicios-layout.js agrega .is-active (y aria-pressed="true") al botón elegido.
   Se asume un hero teal con botones translúcidos: ajusta los colores a tu paleta. */
.btn-hero,
.hero-dropdown__item {
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Se repite con :hover/:focus y se usa !important en color y fondo: justo después de hacer clic
   el cursor sigue sobre el botón, y el :hover de servicios-hermosillo.css tapaba el efecto. */
/* Sin transform aquí a propósito: .services-hero__inner (servicios-hermosillo.css) queda
   overflow:visible para que el menú "Más servicios" se despliegue sin recortarse, y un
   transform persistente en este botón hace que Safari calcule espacio extra a la derecha
   del hero (bug conocido de WebKit). El "salto" visual queda solo en hero-pop, abajo, que
   es una animación de un solo uso y no dispara ese problema. */
.services-hero .btn-hero.is-active,
.services-hero .btn-hero.is-active:hover,
.services-hero .btn-hero.is-active:focus,
.services-hero .btn-hero.is-active:focus-visible,
.services-hero .hero-dropdown.is-active > summary.btn-hero,
.services-hero .hero-dropdown.is-active > summary.btn-hero:hover {
    background: #ffffff !important;
    color: #0d9488 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 8px 18px rgba(0, 0, 0, .2);
}

.btn-hero.is-active,
.hero-dropdown.is-active > summary.btn-hero {
    animation: hero-pop .35s ease;
}

/* Opción marcada dentro del menú "Más servicios" */
.hero-dropdown__item.is-active,
.hero-dropdown__item.is-active:hover {
    background: #ccfbf1 !important;
    color: #0f766e !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #0d9488;
}

/* El menú "Más servicios" debe quedar por encima de las tarjetas de trámite; si una tarjeta
   lo tapa, los clics caen en la tarjeta y el menú parece "no responder". */
.hero-dropdown[open] {
    z-index: 40;
}

.hero-dropdown__panel {
    z-index: 60;
}

/* Clase que agrega servicios-layout.js al hero mientras el menú está abierto.
   position:relative hace que z-index aplique aunque el hero no estuviera posicionado, y el
   valor alto lo deja por encima de las tarjetas de trámite. */
.services-hero.menu-abierto {
    position: relative;
    z-index: 1000;
}

.services-hero.menu-abierto .hero-dropdown__panel {
    z-index: 1001;
}

@media (prefers-reduced-motion: reduce) {
    .btn-hero.is-active,
    .hero-dropdown.is-active > summary.btn-hero {
        animation: none;
        transform: none;
    }
}


/* ---------- 4. Keyframes ----------
   En el original, "pulse" estaba dentro de un bloque "@@text { ... }" que generaba
   CSS inválido, así que la animación nunca corría. "spin" y "sk-bouncedelay" no
   estaban definidas en este archivo; si ya existen en otro CSS, se pueden borrar aquí. */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.03);
    }
}

@keyframes hero-pop {
    0%   { transform: scale(.95); }
    60%  { transform: scale(1.04) translateY(-2px); }
    100% { transform: scale(1) translateY(-2px); }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}


/* =============================================================================
   5. ESTILOS HEREDADOS (verificar uso antes de borrar)
   ============================================================================= */

/* --- Hero anterior (.container-city): el hero actual usa .services-hero --- */
.container-city {
    position: relative;
    isolation: isolate;
    background-color: #0d9488;
    min-height: 11rem;
}

.container-city::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: linear-gradient(180deg, rgba(13,148,136,.92) 0%, rgba(13,148,136,.72) 45%, rgba(13,148,136,.92) 100%), var(--hero-image, none);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;
}

.container-city::before {
    content: "";
    position: absolute;
    bottom: 0;
    min-height: 11rem;
    left: 0;
    right: 0;
    z-index: -1;
    background-image: url('/img/pattern-hermosillo-white.svg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 12rem;
    opacity: .25;
}

.imagen-centrada-hermosillo {
    width: 96%;
    max-width: 500px;
    margin: 1rem auto;
    display: block;
    position: relative;
}

.container-city p.text-white.text-center {
    padding-block: 1rem;
    padding-inline: 2rem;
    background: rgb(25 100 100 / 18%);
    border-radius: 1rem;
    color: #fff;
}

.site-logo {
    display: inline-block;
    vertical-align: middle;
    max-width: 240px;
}

/* --- Spinner de 3 puntos (SpinKit). Ningún elemento .spinner en este layout --- */
.spinner {
    margin: 100px auto 0;
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #ef7900;
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 { animation-delay: -0.32s; }
.spinner .bounce2 { animation-delay: -0.16s; }

/* --- Modal de carga anterior (versión con GIF) ---
   La ruta original era '../..//imgs/...' (relativa a la URL de la página, frágil).
   Se dejó absoluta; ojo: es "imgs" y no "img". Verifica que el archivo exista. */
.modalLoading2 {
    display: none;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(17, 56, 56, .8);
    background-image: url('/imgs/03-31-43-608_512.gif');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100px 100px;
}

.cargandoSpinner,
.cargandoSpinner2 {
    color: white;
    font-size: x-large;
    font-weight: bolder;
    position: absolute;
    top: calc(50% + 55px);
    left: calc(50% - 75px);
    text-align: center;
}

/* --- Botón "mostrar opciones" (el elemento #btnMostrarOpciones ya no está en este layout) --- */
#btnMostrarOpciones {
    position: absolute;
    top: 240px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: none;
}

#btnMostrarOpciones.visible {
    display: inline-flex;
}

/* --- Botones de opción (la lógica que los usaba estaba comentada) --- */
.btn-naranja {
    background-color: #14b8a6;
    color: #ffffff;
    border: 1px solid #14b8a6;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-naranja:hover {
    background-color: #f89c04;
    border-color: #f89c04;
}

.btn-naranja:active {
    background-color: #da8903;
    border-color: #da8903;
}

.btn-naranja:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
}

.btn-naranja:disabled {
    background-color: #89dbd2;
    border-color: #89dbd2;
    cursor: not-allowed;
}

.btn-opcion.seleccionado {
    background-color: #f89c04 !important;
    border-color: #f89c04 !important;
    color: #ffffff !important;
}