/*
   Archivo: style.css
   Descripción: Estilos personalizados para el sitio público de PMUTS
                Paleta formal en escala de grises con acentos "sarape" de Saltillo
                (rosa, verde, dorado) usados con moderación como detalle de identidad.
   Autor: Luis Angel Camacho Maldonado
   Fecha: 2026-08-02
   Notas:
   - Base gris/negra para dar formalidad institucional.
   - Acentos de color (rosa #E62474, verde #0A9B54, dorado #C39541) reservados a
     detalles puntuales: badges, bordes, iconos, hover — nunca como fondo dominante.
   - Diseño serio, institucional, gubernamental.
*/

/* ═══════════════════════════════════════════
   PALETA DE COLORES — GRIS FORMAL + ACENTOS SARAPE
   ═══════════════════════════════════════════ */
:root {
    /* ── Base gris/negra (formalidad) ── */
    --gob-negro:        #091E29;   /* Negro institucional (marca) */
    --gob-gris-oscuro:  #22282C;   /* Gris carbón */
    --gob-gris-medio:   #4B545B;   /* Gris medio */
    --gob-gris-texto:   #5D666D;   /* Gris para textos secundarios */
    --gob-gris-claro:   #99A1A6;   /* Gris ligero */

    /* ── Acentos "sarape" (uso puntual, no dominante) ── */
    --gob-verde:        #0A9B54;   /* Verde sarape */
    --gob-verde-hover:  #087E44;   /* Verde más profundo (hover) */
    --gob-verde-subtle: #E4F5EC;   /* Fondo verde sutil */

    --gob-dorado:       #C39541;   /* Dorado sarape */
    --gob-dorado-hover: #A87E36;   /* Dorado más profundo */
    --gob-dorado-subtle:#F7F0E1;   /* Fondo dorado sutil */

    --gob-rosa:         #E62474;   /* Rosa sarape */
    --gob-rosa-hover:   #C41D63;   /* Rosa más profundo */
    --gob-rosa-subtle:  #FCE6EF;   /* Fondo rosa sutil */

    /* ── Alias de compatibilidad (el "azul" institucional pasa a gris medio) ── */
    --gob-azul:         #4B545B;
    --gob-azul-hover:   #3A4247;
    --gob-azul-subtle:  #EAEDEF;

    /* ── Fondos ── */
    --gob-fondo:        #F6F7F8;   /* Fondo principal (gris muy claro) */
    --gob-fondo-alt:    #ECEEF0;   /* Fondo alternativo */
    --gob-fondo-card:   #ffffff;   /* Fondo tarjetas */
    --gob-borde:        #D9DCDE;   /* Bordes suaves */
    --gob-borde-suave:  #E7E9EB;   /* Bordes muy suaves */

    /* ── Bootstrap overrides ── */
    --bs-primary:       #4B545B;
    --bs-primary-rgb:   75, 84, 91;
    --bs-secondary:     #6B747B;
    --bs-secondary-rgb: 107, 116, 123;
    --bs-success:       #0A9B54;
    --bs-success-rgb:   10, 155, 84;
    --bs-info:          #4B545B;
    --bs-info-rgb:      75, 84, 91;
    --bs-warning:       #C39541;
    --bs-warning-rgb:   195, 149, 65;
    --bs-danger:        #B3283F;   /* Rojo formal (no el rosa de acento) */
    --bs-danger-rgb:    179, 40, 63;

    /* ── Utilidades ── */
    --card-shadow:      0 2px 8px rgba(9,30,41,0.06);
    --card-shadow-hover:0 8px 24px rgba(9,30,41,0.10);
    --transition-base:  all 0.25s ease;
}

/* ═══════════════════════════════════════════
   BASE Y TIPOGRAFÍA
   ═══════════════════════════════════════════ */
body {
    font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', Roboto, sans-serif;
    background-color: var(--gob-fondo);
    color: var(--gob-negro);
    letter-spacing: -0.1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════
   NAVBAR PRINCIPAL
   ═══════════════════════════════════════════ */
.navbar {
    padding: 0;
    box-shadow: none;
    background: #ffffff !important;
    border-bottom: 1px solid var(--gob-borde);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.navbar.navbar-scrolled {
    background: var(--gob-gris-medio) !important;
    border-bottom: 1px solid var(--gob-gris-oscuro);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0.8rem 0;
}

.navbar .navbar-brand img {
    height: 40px;
    margin-right: 10px;
    filter: none;
    transition: filter 0.25s ease;
}

.navbar.navbar-scrolled .navbar-brand img {
    filter: brightness(0) invert(1);
}

.navbar .nav-link {
    color: var(--gob-gris-medio) !important;
    font-weight: 500;
    padding: 1rem 1.1rem !important;
    font-size: 0.9rem;
    letter-spacing: 0.2px;
    border-bottom: 3px solid transparent;
    transition: var(--transition-base);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--gob-negro) !important;
    border-bottom-color: var(--gob-rosa);
    background: var(--gob-fondo-alt);
}

.navbar.navbar-scrolled .nav-link {
    color: rgba(255,255,255,0.8) !important;
}

.navbar.navbar-scrolled .nav-link:hover,
.navbar.navbar-scrolled .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,0.06);
}

.navbar .btn-outline-light {
    border-color: var(--gob-borde);
    color: var(--gob-gris-medio);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 1.1rem;
    border-radius: 6px;
    transition: var(--transition-base);
}

.navbar .btn-outline-light:hover {
    background: var(--gob-fondo-alt);
    border-color: var(--gob-gris-claro);
    color: var(--gob-negro);
}

.navbar.navbar-scrolled .btn-outline-light {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
}

.navbar.navbar-scrolled .btn-outline-light:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

.navbar .navbar-toggler {
    border-color: var(--gob-borde);
}

.navbar .navbar-toggler-icon {
    filter: brightness(0) saturate(100%);
}

.navbar.navbar-scrolled .navbar-toggler {
    border-color: rgba(255,255,255,0.3);
}

.navbar.navbar-scrolled .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

/* ── Barra superior de contacto (gris claro, discreta) ── */
.topbar-institucional {
    background: var(--gob-fondo-alt) !important;
    border-bottom: 1px solid var(--gob-borde);
    color: var(--gob-gris-texto) !important;
}
.topbar-institucional span { color: var(--gob-gris-texto) !important; }

/* ═══════════════════════════════════════════
   HERO SECTION (PÁGINA PRINCIPAL)
   ═══════════════════════════════════════════ */
.hero-section {
    background: var(--gob-negro);
    padding: 160px 0 170px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gob-rosa), var(--gob-dorado), var(--gob-verde));
    z-index: 3;
}

.hero-section .hero-title,
.hero-section .hero-subtitle {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 4px 18px rgba(0,0,0,0.4);
}

.hero-section .hero-subtitle {
    color: rgba(255,255,255,0.92);
}

/* ── Carousel de fondo del hero ── */
.hero-bg-carousel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
}

.hero-bg-carousel .carousel-inner,
.hero-bg-carousel .carousel-item {
    height: 100%;
}

.hero-bg-carousel .carousel-item {
    background-size: cover;
    background-position: center;
    transition: opacity 1.2s ease;
}

.hero-bg-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(9,30,41,0.55) 0%, rgba(9,30,41,0.45) 55%, rgba(9,30,41,0.65) 100%);
}

.hero-title {
    font-weight: 800;
    font-size: 2.8rem;
    margin-bottom: 1.2rem;
    letter-spacing: -0.8px;
    line-height: 1.15;
    color: var(--gob-negro);
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--gob-gris-texto);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.65;
    font-weight: 400;
}

/* ── Buscador Hero ── */
.search-container {
    max-width: 720px;
    margin: 45px auto 0;
    padding: 0 15px;
}

.search-input {
    border-radius: 50px 0 0 50px !important;
    padding: 18px 28px;
    border: 1px solid var(--gob-borde-suave);
    border-right: none;
    background: #ffffff;
    color: var(--gob-negro);
    font-size: 1.05rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: var(--transition-base);
}

.search-input::placeholder {
    color: var(--gob-gris-claro);
    font-weight: 400;
}

.search-input:focus {
    background: #ffffff;
    border-color: var(--gob-rosa);
    border-right: none;
    box-shadow: 0 10px 30px rgba(230, 36, 116, 0.15);
    color: var(--gob-negro);
    z-index: 3;
}

.search-btn {
    border-radius: 0 50px 50px 0 !important;
    padding: 0 38px 0 28px;
    font-weight: 700;
    background: var(--gob-rosa);
    border: 1px solid var(--gob-rosa);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: var(--transition-base);
    z-index: 4;
}

.search-btn:hover {
    background: var(--gob-rosa-hover);
    border-color: var(--gob-rosa-hover);
}

/* ═══════════════════════════════════════════
   TARJETAS DE ACCESOS DIRECTOS
   ═══════════════════════════════════════════ */
.card-tramite {
    border: 1px solid var(--gob-borde);
    border-radius: 10px;
    transition: var(--transition-base);
    background: var(--gob-fondo-card);
    cursor: pointer;
}

.card-tramite:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--gob-rosa);
}

.icon-box {
    width: 68px;
    height: 68px;
    background-color: var(--gob-fondo-alt);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 28px;
    color: var(--gob-azul);
    transition: var(--transition-base);
}

.card-tramite:hover .icon-box {
    background-color: var(--gob-rosa);
    color: white;
}

/* ── Variantes de fondo sutil para accesos directos ── */
.bg-gob-verde-subtle { background-color: var(--gob-verde-subtle) !important; }
.bg-gob-dorado-subtle { background-color: var(--gob-dorado-subtle) !important; }
.bg-gob-rosa-subtle { background-color: var(--gob-rosa-subtle) !important; }
.bg-gob-azul-subtle { background-color: var(--gob-azul-subtle) !important; }
.bg-gob-gris-subtle { background-color: var(--gob-fondo-alt) !important; }

/* ═══════════════════════════════════════════
   SECCIONES DE CONTENIDO
   ═══════════════════════════════════════════ */
.page-header-subtle {
    background: linear-gradient(135deg, var(--gob-fondo-alt) 0%, #e4e7ef 100%);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    border-left: 4px solid var(--bs-primary);
}

.page-header-subtle h2 {
    font-weight: 700;
    color: var(--gob-negro);
    margin-bottom: 0.25rem;
    font-size: 1.35rem;
}

.page-header-subtle p {
    color: var(--gob-gris-texto);
    font-size: 0.9rem;
}

section.bg-white {
    background-color: #fff !important;
}

section.bg-light-subtle,
section.bg-gob-alt {
    background-color: var(--gob-fondo) !important;
}

/* ═══════════════════════════════════════════
   FICHA DEL TRÁMITE
   ═══════════════════════════════════════════ */
.ficha-header {
    background-color: white;
    border-left: 5px solid var(--gob-rosa);
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: var(--card-shadow);
}

/* Tabs Estilo gubernamental sobrio */
.nav-pills-custom .nav-link {
    color: var(--gob-gris-medio);
    background: transparent;
    margin-right: 6px;
    margin-bottom: 6px;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.88rem;
    transition: var(--transition-base);
    border: 1px solid var(--gob-borde);
}

.nav-pills-custom .nav-link:hover {
    background: var(--gob-fondo-alt);
    color: var(--gob-azul);
    border-color: var(--gob-azul);
}

.nav-pills-custom .nav-link.active {
    background-color: var(--gob-azul) !important;
    color: white !important;
    border-color: var(--gob-azul);
    box-shadow: 0 3px 10px rgba(27,73,101,0.18);
}

/* ── Sidebar Info Recuadro ── */
.info-box-highlight {
    background: var(--gob-gris-medio);
    color: white;
    border-radius: 10px;
    padding: 1.8rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(9,30,41,0.10);
    border-bottom: 3px solid var(--gob-dorado);
}

.info-box-highlight .amount {
    font-size: 2.5rem;
    font-weight: 800;
    display: block;
    margin-bottom: 0.3rem;
    color: var(--gob-dorado);
}

/* ═══════════════════════════════════════════
   UTILIDADES DE COLOR Y BADGE
   ═══════════════════════════════════════════ */
.bg-primary-subtle { background-color: var(--gob-azul-subtle) !important; }
.bg-secondary-subtle { background-color: var(--gob-fondo-alt) !important; }
.bg-success-subtle { background-color: var(--gob-verde-subtle) !important; }
.bg-danger-subtle { background-color: #F7E4E7 !important; }
.bg-warning-subtle { background-color: var(--gob-dorado-subtle) !important; }
.bg-info-subtle { background-color: var(--gob-azul-subtle) !important; }
.bg-gob-rosa-subtle { background-color: var(--gob-rosa-subtle) !important; }

.text-primary { color: var(--gob-azul) !important; }
.text-secondary { color: var(--gob-gris-medio) !important; }
.text-success { color: var(--gob-verde) !important; }
.text-danger { color: var(--bs-danger) !important; }
.text-warning { color: var(--gob-dorado) !important; }
.text-gob-rosa { color: var(--gob-rosa) !important; }

.badge-light-primary { background-color: var(--gob-azul-subtle); color: var(--gob-azul); }
.badge-light-secondary { background-color: var(--gob-fondo-alt); color: var(--gob-gris-medio); }
.badge-light-success { background-color: var(--gob-verde-subtle); color: var(--gob-verde); }
.badge-light-danger { background-color: #F7E4E7; color: var(--bs-danger); }
.badge-light-warning { background-color: var(--gob-dorado-subtle); color: var(--gob-dorado); }
.badge-light-gob-rosa { background-color: var(--gob-rosa-subtle); color: var(--gob-rosa); }

/* ═══════════════════════════════════════════
   TIPOGRAFÍA (Escala Spike)
   ═══════════════════════════════════════════ */
.fs-1 { font-size: 0.75rem !important; }
.fs-2 { font-size: 0.875rem !important; }
.fs-3 { font-size: 0.9375rem !important; }
.fs-4 { font-size: 1rem !important; }
.fs-5 { font-size: 1.125rem !important; }
.fs-6 { font-size: 1.3125rem !important; }
.fs-7 { font-size: 1.5rem !important; }
.fs-8 { font-size: 1.875rem !important; }
.fs-9 { font-size: 2.25rem !important; }
.fs-10 { font-size: 3rem !important; }

/* ═══════════════════════════════════════════
   FOOTER INSTITUCIONAL
   ═══════════════════════════════════════════ */
footer {
    background: var(--gob-gris-medio);
    color: #E4E7E9;
    padding: 50px 0 0;
    border-top: 3px solid var(--gob-rosa);
}

footer h5 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

footer a {
    color: var(--gob-gris-claro);
    text-decoration: none;
    transition: var(--transition-base);
    font-size: 0.88rem;
}

footer a:hover {
    color: var(--gob-dorado);
}

footer .footer-bottom {
    background: rgba(0,0,0,0.15);
    margin-top: 2rem;
}

/* ═══════════════════════════════════════════
   TABLAS PERSONALIZADAS
   ═══════════════════════════════════════════ */
.customize-table thead th {
    white-space: nowrap;
    border-bottom: 2px solid var(--gob-borde);
    padding: 12px 18px;
    background-color: var(--gob-fondo-alt);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--gob-gris-medio);
    font-weight: 700;
}

.customize-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--gob-borde-suave);
    font-size: 0.9rem;
}

.customize-table tr:last-child td {
    border-bottom: 0;
}

/* ═══════════════════════════════════════════
   TRANSICIONES Y ESTADOS
   ═══════════════════════════════════════════ */
.card-tramite, .btn, .nav-link {
    transition: var(--transition-base);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    line-clamp: 2;
    overflow: hidden;
}

/* ═══════════════════════════════════════════
   BOTONES GUBERNAMENTALES
   ═══════════════════════════════════════════ */
.btn-primary,
a.btn-primary {
    background-color: var(--gob-rosa) !important;
    border-color: var(--gob-rosa) !important;
}

.btn-primary:hover {
    background-color: var(--gob-rosa-hover) !important;
    border-color: var(--gob-rosa-hover) !important;
}

.btn-outline-primary {
    color: var(--gob-rosa) !important;
    border-color: var(--gob-rosa) !important;
}

.btn-outline-primary:hover {
    background-color: var(--gob-rosa) !important;
    border-color: var(--gob-rosa) !important;
    color: #fff !important;
}

.btn-success,
a.btn-success {
    background-color: var(--gob-verde) !important;
    border-color: var(--gob-verde) !important;
}

.btn-success:hover {
    background-color: var(--gob-verde-hover) !important;
    border-color: var(--gob-verde-hover) !important;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.8rem;
    }
    .hero-subtitle {
        font-size: 0.95rem;
    }
    .hero-section {
        padding: 60px 0 70px;
    }
    .search-input {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    .search-btn {
        padding: 0 20px;
    }
    .page-header-subtle {
        padding: 1.2rem 1.5rem;
    }
    .ficha-header {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.5rem;
    }
    .icon-box {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }
}