/* ==========================================================================
   PORTAL CIUDADANO - ESTILOS CENTRALIZADOS UNIFICADOS
   ========================================================================== */

/* =========================================
   1. HEADER PROFESIONAL UNIFICADO (CORREGIDO PARA ESCRITORIO)
   ========================================= */
.header-moderno {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1000;
}

.top-bar {
    background-color: #1a2c5b;
    color: #ffffff;
    padding: 8px 0;
    font-size: 13px;
}

.top-bar-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
}

.brand-logo-blue {
    max-height: 45px;
    margin-right: 15px;
    background-color: #ffffff;
    padding: 3px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.top-bar-text {
    margin-right: 15px;
}

.btn-logout {
    background-color: #d9534f;
    color: white !important;
    padding: 4px 14px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
    margin-left: 10px;
}

    .btn-logout:hover {
        background-color: #c9302c;
        text-decoration: none;
    }

.navbar-main {
    background-color: #ffffff;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}

.main-nav-links > li > a {
    color: #334F96 !important;
    font-weight: 600;
    font-size: 14px;
    padding: 20px 15px;
    transition: all 0.3s ease;
}

    .main-nav-links > li > a:hover,
    .main-nav-links > li.open > a {
        color: #1a2c5b !important;
        background-color: #f8f9fa !important;
    }

.highlight-link {
    color: #d9534f !important;
}

.shadow-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 6px 6px;
}

/* REGLA DE FUERZA BRUTA: Esto obliga al menú a mostrarse en pantallas de PC */
@media (min-width: 768px) {
    .navbar-main .navbar-collapse.collapse,
    .navbar-main .navbar-collapse {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        clear: both;
    }

    .main-nav-links {
        display: flex !important;
        justify-content: center;
        float: none !important;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .main-nav-links > li {
            display: inline-block !important;
            float: none !important;
        }
}

/* =========================================
   2. TARJETAS DE MÓDULOS (INICIO ORIGINAL)
   ========================================= */
.isotope-item {
    padding: 15px;
}

.tarjeta-modulo {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: 30px 20px;
    text-align: center;
    border: 1px solid #eef0f3;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 250px;
}

    .tarjeta-modulo:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        border-color: #334F96;
    }

    .tarjeta-modulo img {
        width: 80px;
        height: 80px;
        object-fit: contain;
        margin-bottom: 20px;
    }

    .tarjeta-modulo h4 {
        color: #2c3e50;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.3;
    }

.btn-acceder {
    background-color: #334F96;
    color: white !important;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.3s;
    font-weight: 600;
    width: 80%;
}

    .btn-acceder:hover {
        background-color: #1a2c5b;
        text-decoration: none;
    }

/* =========================================
   2.B GRILLA HOME - TARJETAS MODERNAS V2 (FLEXBOX)
   ========================================= */
.dashboard-container {
    padding-top: 30px;
    padding-bottom: 50px;
}

.hero-welcome {
    margin-bottom: 40px;
}

.welcome-title {
    font-size: 32px;
    color: #0f2c59;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.welcome-subtitle {
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.welcome-pulse-line {
    width: 60px;
    height: 4px;
    background-color: #0f2c59;
    margin: 20px auto 0 auto;
    border-radius: 2px;
}

.grid-modulos-home {
    display: flex !important;
    flex-wrap: wrap !important;
}

.dynamic-grid-item {
    display: flex !important;
    flex-direction: column;
    padding: 15px;
}

.tarjeta-modulo-v2 {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    border: 2px solid #0f2c59;
    width: 100%;
    flex: 1 0 auto;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

    .tarjeta-modulo-v2:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 30px rgba(15, 44, 89, 0.1) !important;
    }

.modulo-icon-wrapper {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 26px;
    transition: transform 0.3s ease;
}

.tarjeta-modulo-v2:hover .modulo-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.tag-examenes .modulo-icon-wrapper {
    background-color: #fce8e6;
    color: #d9534f;
}

.tag-historial .modulo-icon-wrapper {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.tag-citas .modulo-icon-wrapper {
    background-color: #e3f2fd;
    color: #0d47a1;
}

.tag-farmacias .modulo-icon-wrapper {
    background-color: #fff3e0;
    color: #f76707;
}

.tag-recetas .modulo-icon-wrapper {
    background-color: #f3e5f5;
    color: #7048e8;
}

.tag-urgencias .modulo-icon-wrapper {
    background-color: #ffebee;
    color: #c9302c;
}

.tag-espera .modulo-icon-wrapper {
    background-color: #eceff1;
    color: #455a64;
}

.tag-interconsultas .modulo-icon-wrapper {
    background-color: #e0f7fa;
    color: #00838f;
}

.tag-ges .modulo-icon-wrapper {
    background-color: #e8eaf6;
    color: #3f51b5;
}

.tarjeta-modulo-v2 h4 {
    color: #0f2c59;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.modulo-desc-text {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 25px;
    flex-grow: 1;
}

.btn-acceder-v2 {
    background-color: #f1f5f9;
    color: #0f2c59 !important;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 85%;
    display: inline-block;
    border: 1px solid transparent;
}

    .btn-acceder-v2:hover {
        background-color: #0f2c59;
        color: #ffffff !important;
        box-shadow: 0 4px 10px rgba(15, 44, 89, 0.25);
    }

.tag-examenes:hover {
    border-color: #d9534f;
}

.tag-historial:hover {
    border-color: #2e7d32;
}

.tag-citas:hover {
    border-color: #0d47a1;
}

.tag-farmacias:hover {
    border-color: #f76707;
}

.tag-recetas:hover {
    border-color: #7048e8;
}

.tag-urgencias:hover {
    border-color: #c9302c;
}

.tag-espera:hover {
    border-color: #455a64;
}

.tag-interconsultas:hover {
    border-color: #00838f;
}

.tag-ges:hover {
    border-color: #3f51b5;
}

/* =========================================
   3. FOOTER COMPACTO
   ========================================= */
.footer-moderno {
    background-color: #253134;
    color: #cfd8dc;
    padding: 40px 0 20px 0;
    font-size: 13px;
}

.footer-col h5 {
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    border-bottom: 2px solid #334F96;
    padding-bottom: 10px;
    display: inline-block;
}

.footer-col p {
    margin-bottom: 8px;
}

.footer-col i {
    width: 20px;
    color: #78909c;
}

.footer-links {
    list-style: none;
    padding: 0;
}

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links a {
        color: #cfd8dc;
        text-decoration: none;
        transition: color 0.3s;
    }

        .footer-links a:hover {
            color: #ffffff;
            padding-left: 5px;
        }

.social-links {
    margin-bottom: 20px;
}

.social-icon {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background-color: #37474f;
    color: white;
    border-radius: 50%;
    margin: 0 5px;
    transition: all 0.3s ease;
    text-align: center;
}

    .social-icon:hover {
        background-color: #334F96;
        color: white;
        transform: scale(1.1);
    }

.copyright-box {
    border-top: 1px solid #37474f;
    padding-top: 15px;
}

    .copyright-box p {
        margin: 0;
    }

.dev-credits a {
    color: #90a4ae;
    font-weight: bold;
    text-decoration: none;
}

    .dev-credits a:hover {
        color: #ffffff;
    }

/* =========================================
   4. AJUSTES PARA CELULARES (RESPONSIVE PRINCIPAL)
   ========================================= */
@media (max-width: 767px) {
    .navbar-default .navbar-collapse {
        background-color: #ffffff !important;
        border-top: 1px solid #eef0f3 !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .main-nav-links {
        margin: 0;
        padding: 10px 0;
        display: block !important;
    }

        .main-nav-links > li {
            display: block !important;
        }

            .main-nav-links > li > a {
                padding: 12px 20px !important;
                color: #334F96 !important;
                border-bottom: 1px solid #f5f5f5;
            }

                .main-nav-links > li > a:hover, .main-nav-links > li > a:focus {
                    background-color: #f8f9fa !important;
                    color: #1a2c5b !important;
                    padding-left: 25px !important;
                }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #555555 !important;
        padding: 12px 35px !important;
        border-bottom: 1px solid #f9f9f9;
    }

        .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
            background-color: #f0f4f8 !important;
            color: #334F96 !important;
        }

    .navbar-default .navbar-toggle {
        border-color: #334F96 !important;
        background-color: transparent !important;
    }

        .navbar-default .navbar-toggle .icon-bar {
            background-color: #334F96 !important;
        }

    .top-bar-user {
        text-align: center !important;
        padding: 10px;
    }

    .btn-logout {
        display: inline-block;
        margin-top: 8px;
    }
}

/* =========================================
   5. RESUMEN HISTORIAL CLÍNICO (CARDS)
   ========================================= */
.header-seccion {
    margin-top: 30px;
    margin-bottom: 20px;
}

.icono-seccion-bg {
    background-color: #f0f4f8;
    color: #334F96;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    margin: 0 auto 15px auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.titulo-seccion {
    color: #1a2c5b;
    font-weight: 700;
    margin-bottom: 5px;
}

.divisor-suave {
    border-top: 1px solid #e1e5eb;
    margin-bottom: 30px;
}

.contenedor-resumen {
    margin-bottom: 20px;
}

.card-resumen {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid #eef0f3;
    margin-bottom: 25px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card-resumen:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    }

.card-resumen-header {
    color: #ffffff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .card-resumen-header h4 {
        margin: 0;
        font-weight: 600;
        font-size: 16px;
        margin-left: 10px;
    }

.bg-azul {
    background-color: #334F96;
}

.bg-rojo {
    background-color: #d9534f;
}

.bg-verde {
    background-color: #5cb85c;
}

.bg-naranja {
    background-color: #f0ad4e;
}

.card-resumen-body {
    padding: 25px 20px;
    text-align: center;
    background-color: #fafbfc;
}

.cantidad-badge .numero {
    display: block;
    font-size: 36px;
    font-weight: bold;
    color: #334F96;
    line-height: 1;
}

.cantidad-badge .etiqueta {
    display: block;
    font-size: 13px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

.card-resumen-footer {
    padding: 15px;
    background-color: #ffffff;
    border-top: 1px solid #f0f0f0;
}

.btn-accion-resumen {
    background-color: transparent;
    color: #334F96;
    border: 1px solid #334F96;
    border-radius: 20px;
    font-weight: 600;
    transition: all 0.3s;
}

    .btn-accion-resumen:hover {
        background-color: #334F96;
        color: #ffffff;
    }

.card-resumen-total {
    background-color: #f8f9fa;
    border: 1px dashed #b0bec5;
    border-radius: 10px;
    padding: 30px;
    margin-top: 20px;
}

    .card-resumen-total h4 {
        color: #455a64;
        margin-bottom: 20px;
    }

.btn-accion-principal {
    background-color: #1a2c5b;
    color: #ffffff;
    border-radius: 30px;
    padding: 12px 30px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    transition: background-color 0.3s;
}

    .btn-accion-principal:hover {
        background-color: #0e1a38;
        color: #ffffff;
    }

/* =========================================
   6. LISTADO HISTORIAL (TABLA GRILLA)
   ========================================= */
.breadcrumb-medico {
    margin-top: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .breadcrumb-medico .btn {
        padding: 10px 20px;
        font-weight: 600;
    }

    .breadcrumb-medico .btn-primary.active {
        background-color: #334F96;
        border-color: #334F96;
    }

.contenedor-tabla {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e1e5eb;
    overflow: hidden;
    margin-bottom: 30px;
}

.tabla-clinica {
    margin-bottom: 0;
    width: 100%;
}

    .tabla-clinica > thead > tr > th {
        background-color: #1a2c5b;
        color: #ffffff;
        border-bottom: none;
        padding: 15px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
    }

        .tabla-clinica > thead > tr > th i {
            margin-right: 5px;
            color: #8da4d0;
        }

    .tabla-clinica > tbody > tr > td {
        padding: 12px 15px;
        vertical-align: middle;
        border-top: 1px solid #eef0f3;
        color: #455a64;
        font-size: 13px;
    }

    .tabla-clinica > tbody > tr:hover {
        background-color: #f4f7fb;
        cursor: default;
    }

.badge-tipo-lista {
    background-color: #eef2f7;
    color: #334F96;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #d1dbe8;
}

@media (max-width: 767px) {
    .tabla-clinica > thead {
        display: none;
    }

    .tabla-clinica > tbody > tr {
        display: block;
        border-bottom: 3px solid #1a2c5b;
        margin-bottom: 10px;
        background-color: #fff;
    }

        .tabla-clinica > tbody > tr > td {
            display: block;
            text-align: right;
            border-top: none;
            border-bottom: 1px solid #f0f0f0;
            padding: 10px 15px;
            position: relative;
        }

            .tabla-clinica > tbody > tr > td:last-child {
                border-bottom: none;
            }

            .tabla-clinica > tbody > tr > td::before {
                content: attr(data-label);
                float: left;
                font-weight: bold;
                color: #1a2c5b;
                text-transform: uppercase;
                font-size: 11px;
            }
}

/* =========================================
   7. SUBDATOS INTERNOS PARA HISTORIAL TODO
   ========================================= */
.info-clinica-bloque {
    padding: 2px 0;
}

.subdata-lista {
    margin: 0;
    padding: 0;
}

    .subdata-lista li {
        margin-bottom: 4px;
        font-size: 13px;
        line-height: 1.4;
        color: #455a64;
    }

        .subdata-lista li:last-child {
            margin-bottom: 0;
        }

.subdata-label {
    font-weight: 600;
    color: #1a2c5b;
    display: inline-block;
    min-width: 120px;
}

.subdata-raw {
    font-size: 13px;
    color: #333333;
}

@media (max-width: 767px) {
    .subdata-label {
        display: block;
        margin-bottom: 2px;
    }

    .subdata-lista li {
        margin-bottom: 8px;
        background: #f8fafc;
        padding: 6px;
        border-radius: 4px;
        text-align: left;
    }
}

/* =========================================
   8. COMPONENTE: TARJETAS DE CITAS AGENDADAS
   ========================================= */
.header-seccion-citas {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    margin-bottom: 15px;
}

.icono-cita-bg {
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.bg-primaria {
    background-color: #334F96;
}

.bg-secundaria {
    background-color: #0288d1;
}

.titulo-citas {
    margin: 0;
    font-weight: bold;
    color: #1a2c5b;
}

.contenedor-citas {
    display: flex !important;
    flex-wrap: wrap !important;
}

    .contenedor-citas > div[class*="col-"] {
        display: flex !important;
        flex-direction: column;
        margin-bottom: 25px;
    }

.card-cita {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e1e5eb;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0 !important;
}

    .card-cita:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    }

.card-secundaria-border {
    border-left: 4px solid #0288d1;
}

.card-cita-status {
    padding: 12px 15px 0 15px;
    display: flex;
    justify-content: flex-start;
}

.badge-cita {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
}

.status-confirmada {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-pendiente {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.status-anulada {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.card-cita-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cita-fecha-hora {
    background-color: #f4f7fb;
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #1a2c5b;
}

.bg-secundaria-light {
    background-color: #e1f5fe;
    color: #01579b;
}

.c-fecha {
    font-size: 13px;
}

.c-hora {
    font-size: 14px;
}

.cita-tipo-tag {
    display: inline-block;
    font-size: 11px;
    background-color: #eceff1;
    color: #455a64;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 8px;
    font-weight: 600;
}

.card-divisor {
    border-top: 1px solid #f0f2f5;
    margin: 12px 0;
}

.cita-info {
    font-size: 13px;
    margin-bottom: 8px;
    color: #555;
    line-height: 1.4;
    margin-top: auto;
}

    .cita-info i {
        color: #78909c;
        width: 18px;
    }

    .cita-info span {
        color: #222;
    }

.card-cita-footer {
    padding: 0 15px 15px 15px;
}

.btn-round {
    border-radius: 20px;
    font-weight: bold;
    font-size: 13px;
    padding: 8px 15px;
    transition: all 0.2s;
}

/* =========================================
   9. MONITOR DE TIEMPOS DE URGENCIAS (MINIMALISTA CON BORDES DINÁMICOS)
   ========================================= */
.hospital-selector-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.hospital-card-btn {
    background-color: #ffffff;
    border: 2px solid #e1e5eb;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .hospital-card-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        border-color: #d9534f;
    }

    .hospital-card-btn input[type="image"] {
        height: 45px;
        width: auto;
        object-fit: contain;
        outline: none;
    }

.hospital-seleccionado-banner {
    background-color: #1a2c5b;
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contenedor-tabla-monitor {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 2px solid #0f2c59;
    margin-bottom: 40px;
}

.tabla-clinica-monitor {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0 8px;
    padding: 10px;
}

    .tabla-clinica-monitor > thead > tr > th {
        background-color: #1a2c5b;
        color: #ffffff;
        padding: 15px;
        font-size: 13px;
        font-weight: bold;
        text-transform: uppercase;
        border: none;
    }

.fila-categorizacion {
    background-color: transparent !important;
    transition: opacity 0.2s ease;
}

    .fila-categorizacion > td {
        padding: 16px 15px;
        font-size: 15px;
        vertical-align: middle;
        background-color: transparent !important;
        border-top: 2px solid var(--row-color) !important;
        border-bottom: 2px solid var(--row-color) !important;
    }

        .fila-categorizacion > td:first-child {
            border-left: 2px solid var(--row-color) !important;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        .fila-categorizacion > td:last-child {
            border-right: 2px solid var(--row-color) !important;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
        }

.tabla-clinica-monitor tbody:hover .fila-categorizacion:not(:hover) {
    opacity: 0.5;
}

.padding-descripcion {
    padding: 20px !important;
    border-top: 2px solid #e1e5eb;
}

@media (max-width: 767px) {
    .tabla-clinica-monitor > thead {
        display: none;
    }

    .fila-categorizacion {
        display: block;
        margin-bottom: 15px;
        background-color: transparent !important;
    }

        .fila-categorizacion > td {
            display: flex;
            justify-content: space-between;
            padding: 12px 15px;
            font-size: 14px;
            border: none !important;
            border-left: 3px solid var(--row-color) !important;
        }

            .fila-categorizacion > td::before {
                content: attr(data-label);
                font-weight: bold;
                text-transform: uppercase;
                font-size: 11px;
                opacity: 0.8;
            }

    .text-center-mobile {
        text-align: right;
    }
}

/* =========================================
   10. BITÁCORA / LÍNEA DE TIEMPO CRONOLÓGICA
   ========================================= */
.medical-stream {
    position: relative;
    padding: 10px 0;
    margin-left: 20px;
}

    .medical-stream::before {
        content: '';
        position: absolute;
        left: 7px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e9ecef;
    }

.stream-entry {
    position: relative;
    padding-left: 40px;
    margin-bottom: 50px;
}

    .stream-entry:last-child {
        margin-bottom: 0;
    }

.stream-axis {
    position: absolute;
    left: 2px;
    top: 4px;
    z-index: 10;
}

.stream-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #7048e8;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 3px #e8e5ff;
}

.stream-content {
    position: relative;
}

.stream-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.stream-date {
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
}

    .stream-date i {
        color: #7048e8;
        margin-right: 4px;
    }

.stream-id-tag {
    font-size: 12px;
    font-weight: 700;
    color: #7048e8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.stream-hospital {
    font-size: 18px;
    font-weight: 700;
    color: #1a2c5b;
    margin: 0 0 5px 0;
}

.stream-professional {
    font-size: 13px;
    color: #495057;
    margin-bottom: 15px;
}

    .stream-professional i {
        color: #adb5bd;
        margin-right: 4px;
    }

.stream-prescription-details {
    padding-left: 15px;
    border-left: 3px solid #f1f3f5;
    margin-top: 10px;
}

.prescription-headline {
    font-size: 12px;
    text-transform: uppercase;
    color: #868e96;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.prescription-text {
    font-size: 14px;
    color: #212529;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .medical-stream {
        margin-left: 10px;
    }

    .stream-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .stream-id-tag {
        font-size: 11px;
    }

    .stream-hospital {
        font-size: 16px;
    }

    .stream-entry {
        margin-bottom: 40px;
    }
}

/* =========================================
   11. COMPONENTE: CARDS FARMACIAS DE TURNO
   ========================================= */
.contenedor-farmacias {
    display: flex !important;
    flex-wrap: wrap !important;
}

    .contenedor-farmacias > div[class*="col-"] {
        display: flex !important;
        flex-direction: column;
        margin-bottom: 25px;
    }

.card-farmacia {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e1e5eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    width: 100%;
    flex: 1 0 auto;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card-farmacia:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 22px rgba(0, 0, 0, 0.12);
        border-color: #f76707;
    }

.card-farmacia-header {
    padding: 15px 15px 0 15px;
}

.badge-comuna {
    background-color: #fff4e6;
    color: #f76707;
    border: 1px solid #ffd8a8;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
}

.card-farmacia-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.farmacia-nombre {
    color: #1a2c5b;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.farmacia-info-line {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.f-icono {
    width: 25px;
    color: #a0aec0;
    font-size: 14px;
    margin-top: 2px;
}

.f-texto {
    display: flex;
    flex-direction: column;
}

    .f-texto small {
        font-size: 10px;
        text-transform: uppercase;
        color: #a0aec0;
        letter-spacing: 0.5px;
    }

    .f-texto span {
        font-size: 13.5px;
        color: #2d3748;
        margin-top: 1px;
    }

.farmacia-horario-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: auto;
    border: 1px solid #edf2f7;
}

.h-bloque small {
    display: block;
    font-size: 10px;
    color: #718096;
    text-transform: uppercase;
}

.h-bloque strong {
    font-size: 15px;
    color: #2d3748;
}

.h-divisor {
    width: 1px;
    height: 30px;
    background-color: #e2e8f0;
}

.card-farmacia-footer {
    padding: 15px;
    background-color: #fafbfc;
    border-top: 1px solid #edf2f7;
}

.btn-mapa-farmacia {
    background-color: #f76707;
    color: white !important;
    font-weight: bold;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 13px;
    border: none;
    transition: background-color 0.2s;
}

    .btn-mapa-farmacia:hover {
        background-color: #d95a04;
    }

/* =========================================
   12. PANTALLA DE INGRESO (LOGIN / INDEX)
   ========================================= */
.login-wrapper {
    background-color: #f4f7fb;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.login-card {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #e1e5eb;
    overflow: hidden;
}

.login-card-header {
    padding: 30px 20px 20px 20px;
    background-color: #ffffff;
}

.login-brand-title {
    font-size: 26px;
    font-weight: 800;
    color: #0f2c59;
    margin: 0;
}

.login-brand-subtitle {
    font-size: 13px;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-tabs-gov {
    border-bottom: 2px solid #e2e8f0;
    background-color: #f8fafc;
}

    .nav-tabs-gov > li > a {
        margin-right: 0;
        border: none;
        border-radius: 0;
        color: #64748b;
        font-weight: 600;
        padding: 15px 10px;
        font-size: 14px;
        transition: all 0.2s;
    }

    .nav-tabs-gov > li.active > a, .nav-tabs-gov > li.active > a:hover, .nav-tabs-gov > li.active > a:focus {
        border: none;
        background-color: #ffffff;
        color: #0f2c59;
        border-bottom: 3px solid #0f2c59;
    }

.form-moderno-login {
    padding: 30px;
}

.carnet-guide-row {
    margin-bottom: 25px;
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #edf2f7;
}

.carnet-img-thumb {
    height: 65px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.carnet-guide-row small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
}

.form-group-modern {
    margin-bottom: 20px;
}

.control-label-gov {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-group-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 16px;
    z-index: 10;
}

.gov-input {
    padding-left: 42px !important;
    height: 46px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    box-shadow: none;
    transition: all 0.2s ease;
}

    .gov-input:focus {
        border-color: #0f2c59;
        box-shadow: 0 0 0 3px rgba(15, 44, 89, 0.1);
    }

.btn-gov-primary {
    background-color: #0f2c59;
    color: #ffffff;
    font-weight: bold;
    height: 46px;
    border-radius: 8px;
    font-size: 15px;
    border: none;
    transition: background-color 0.2s;
}

    .btn-gov-primary:hover {
        background-color: #0b1f3f;
        color: #ffffff;
    }

.cu-branding-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e2e8f0;
}

.logo-gob-cu {
    height: 55px;
    width: auto;
}

.logo-cu-oficial {
    height: 45px;
    width: auto;
}

.btn-cu-primary {
    background-color: #0f2c59;
    border-left: 5px solid #d9534f;
    color: #ffffff;
    font-weight: bold;
    height: 46px;
    border-radius: 8px;
    font-size: 15px;
    border-top: none;
    border-right: none;
    border-bottom: none;
    transition: background-color 0.2s;
}

    .btn-cu-primary:hover:not([disabled]) {
        background-color: #0b1f3f;
        color: #ffffff;
    }

    .btn-cu-primary[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: #94a3b8;
        border-left-color: #cbd5e1;
    }

.cu-link-recovery, .cu-footer-info a {
    color: #0f2c59;
    font-size: 12px;
    text-decoration: none;
}

    .cu-link-recovery:hover, .cu-footer-info a:hover {
        text-decoration: underline;
    }

.cu-footer-info {
    margin-top: 20px;
    font-size: 13px;
    color: #64748b;
}

/* =========================================
   13. NUEVO LAYOUT INDEX (ESTILO GOV.CL)
   ========================================= */
.login-layout-body {
    background-color: #f4f7fb;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.header-index-gov {
    background-color: #ffffff;
    border-bottom: 4px solid #0f2c59;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.top-bar-gov {
    padding: 15px 0;
}

.top-bar-gov-inside {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 15px;
}

.escudo-chile-gov {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.gov-ministry {
    font-size: 13px;
    text-transform: uppercase;
    color: #64748b;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.gov-portal-name {
    font-size: 20px;
    color: #0f2c59;
    font-weight: 800;
}

.salud-responde-logo-nav {
    height: 55px;
    width: auto;
    object-fit: contain;
}

.hero-login-banner {
    margin-top: 40px;
    margin-bottom: 20px;
}

.welcome-heading {
    font-size: 28px;
    font-weight: 800;
    color: #0f2c59;
}

.welcome-subtext {
    font-size: 15px;
    margin-top: 5px;
}

.main-login-content {
    margin-bottom: 60px;
}

.text-left-important {
    text-align: left !important;
}

.display-flex-align {
    display: flex;
    align-items: center;
}

.color-gov {
    color: #0f2c59;
}

.footer-index-gov {
    background-color: #1e293b;
    color: #94a3b8;
    padding: 40px 0;
    font-size: 13.5px;
    border-top: 1px solid #334155;
}

.footer-index-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 15px;
}

    .footer-index-title i {
        color: #38bdf8;
        margin-right: 5px;
    }

.footer-index-col p {
    margin-bottom: 8px;
    line-height: 1.5;
}

.footer-index-col i {
    color: #64748b;
}

.footer-index-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-index-links li {
        margin-bottom: 8px;
        color: #94a3b8;
    }

        .footer-index-links li i {
            font-size: 11px;
            color: #38bdf8;
        }

.footer-index-socials {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-bottom: 15px;
}

    .footer-index-socials a {
        color: #94a3b8;
        font-size: 20px;
        transition: color 0.2s;
    }

        .footer-index-socials a:hover {
            color: #ffffff;
        }

.footer-index-credits {
    text-align: right;
    font-size: 12px;
}

.dev-info img {
    vertical-align: middle;
    margin-left: 3px;
    opacity: 0.7;
}

@media (max-width: 767px) {
    .top-bar-gov-inside {
        justify-content: center;
        text-align: center;
    }

    .brand-block {
        flex-direction: column;
        gap: 5px;
    }

    .escudo-chile-gov {
        height: 50px;
    }

    .gov-portal-name {
        font-size: 18px;
    }

    .welcome-heading {
        font-size: 22px;
    }

    .footer-index-gov {
        text-align: center;
    }

    .footer-index-socials {
        justify-content: center;
        margin-top: 15px;
    }

    .footer-index-credits {
        text-align: center;
    }
}
/* =========================================
   ESTILOS PARA EL MENÚ "SIN LI" (VERSIÓN DIV)
   ========================================= */
.nav-div-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.nav-item-link {
    color: #334F96 !important;
    font-weight: 600;
    font-size: 14px;
    padding: 20px 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

    .nav-item-link:hover,
    .dropdown.open .nav-item-link {
        color: #1a2c5b !important;
        background-color: #f8f9fa !important;
        text-decoration: none;
    }

.dropdown-div {
    display: inline-block;
    position: relative;
}

.div-dropdown-menu {
    padding: 5px 0;
    margin: 0;
    background-color: #ffffff !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175) !important;
    border: 1px solid #e2e8f0;
}

.dropdown-item-link {
    display: block;
    padding: 10px 20px;
    clear: both;
    font-weight: 400;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

    .dropdown-item-link:hover {
        background-color: #f5f5f5;
        color: #1a2c5b;
        text-decoration: none;
    }

@media (max-width: 767px) {
    .nav-div-container {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
    }

    .nav-item-link, .dropdown-div {
        width: 100%;
        display: block;
    }

    .nav-item-link {
        padding: 12px 20px !important;
        border-bottom: 1px solid #f5f5f5;
    }

    .dropdown-item-link {
        padding: 10px 35px;
    }
}