/* =========================================================
   REACH - DEMO
   Estilos exclusivos para el recorrido de demostración
   ========================================================= */

:root {
    --reach-blue: #1473ea;
    --reach-blue-dark: #0d63d3;
    --sidebar: #191d2b;
    --sidebar-hover: #252a3a;
    --sidebar-text: #c8ccd5;
    --background: #f6f8fa;
    --white: #ffffff;
    --border: #e1e5e9;
    --text: #20242a;
    --muted: #6d7580;
    --green: #13a64a;
    --purple: #9554c7;
    --yellow: #edb000;
    --orange: #ff7417;
    --red: #e5323d;
    --shadow: 0 2px 8px rgba(0, 0, 0, .07);
}


/* =========================================================
   GENERAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background: var(--background);
    color: var(--text);
    font-size: 14px;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.demo-container {
    min-height: 100vh;
    display: flex;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.demo-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 190px;
    background: var(--sidebar);
    color: white;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}


/* =========================================================
   LOGO
   ========================================================= */

.demo-logo {
    height: 129px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid #343846;
    color: white;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
}

.demo-logo {
    height: 129px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .demo-logo img {
        width: 165px;
        max-width: 100%;
        height: auto;
        max-height: 105px;
        object-fit: contain;
    }

/* =========================================================
   MENU
   ========================================================= */

.demo-sidebar nav {
    padding-top: 8px;
    flex: 1;
}

.demo-menu-item {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 20px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 14px;
    transition: background-color .2s ease, color .2s ease;
}

    .demo-menu-item i {
        width: 18px;
        font-size: 17px;
        text-align: center;
    }

    .demo-menu-item:hover {
        background: var(--sidebar-hover);
        color: white;
    }

    .demo-menu-item.active {
        background: var(--reach-blue);
        color: white;
    }


/* =========================================================
   USUARIO SIDEBAR
   ========================================================= */

.demo-user {
    min-height: 63px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-top: 1px solid #3d414d;
}

    .demo-user > i {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--reach-blue);
        font-size: 20px;
    }

    .demo-user div {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .demo-user strong {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .demo-user small {
        margin-top: 1px;
        color: #7c818c;
        font-size: 9px;
    }


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.demo-main {
    margin-left: 190px;
    width: calc(100% - 190px);
    min-height: 100vh;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.demo-topbar {
    height: 35px;
    background: var(--sidebar);
    border-bottom: 5px solid var(--reach-blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    color: white;
    font-size: 13px;
}

    .demo-topbar i {
        font-size: 8px;
        color: var(--reach-blue);
    }


/* =========================================================
   CONTENIDO
   ========================================================= */

.demo-content {
    padding: 22px 15px 40px;
}


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

.demo-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.demo-dashboard-title h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #17202a;
}

.demo-dashboard-title p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}


/* =========================================================
   FILTROS
   ========================================================= */

.demo-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .demo-filters select,
    .demo-filters input {
        height: 36px;
        border: 1px solid #d6dce2;
        border-radius: 6px;
        background: white;
        padding: 0 10px;
        color: #333;
        font-size: 13px;
        outline: none;
    }

    .demo-filters select {
        width: 168px;
    }

    .demo-filters input {
        width: 140px;
    }

        .demo-filters select:focus,
        .demo-filters input:focus {
            border-color: var(--reach-blue);
            box-shadow: 0 0 0 2px rgba(20, 115, 234, .1);
        }

.demo-filter-button {
    width: 38px;
    height: 36px;
    border: 1px solid #cfd5db;
    background: white;
    border-radius: 7px;
    cursor: pointer;
    transition: .2s;
}

    .demo-filter-button:hover {
        background: #f1f5f9;
        border-color: var(--reach-blue);
    }


/* =========================================================
   SISTEMAS
   ========================================================= */

.demo-systems {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 0;
}

.demo-system-card {
    height: 158px;
    text-align: center;
    padding-top: 12px;
    border-radius: 11px;
    background: transparent;
    transition: .2s;
}

    .demo-system-card.active {
        background: white;
        border: 1px solid #9bbbcf;
        box-shadow: var(--shadow);
    }

    .demo-system-card h3 {
        margin: 0 0 10px;
        font-size: 15px;
        font-weight: 700;
    }

.demo-progress-circle {
    width: 67px;
    height: 67px;
    margin: auto;
    border: 9px solid #dedede;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d5d5d5;
    font-size: 15px;
}

.demo-system-card small {
    display: block;
    margin-top: 12px;
    color: #ddd;
    font-size: 11px;
}


/* =========================================================
   INDICADORES - DASHBOARD REACH
   ========================================================= */


/* Círculos de los indicadores */
.metric-icon {
    width: 48px;
    height: 48px;
    margin: 8px auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff !important;
    font-size: 22px;
}

/* Azul: Requisitos evaluados y Activos evaluados */
.metric-card.blue .metric-icon {
    background-color: #1674ed !important;
}

/* Morado: Subrequisitos cubiertos */
.metric-card.purple .metric-icon {
    background-color: #852ED1 !important;
}

/* Verde: Requisitos cumplidos */
.metric-card.green .metric-icon {
    background-color: #156132 !important;
}

/* Amarillo: Requisitos en incumplimiento */
.metric-card.yellow .metric-icon {
    background-color: #f0b400 !important;
}

/* Rojo: Hallazgos */
.metric-card.red .metric-icon {
    background-color: #e6374b !important;
}

/* Forzar los iconos a ser blancos */
.metric-icon i {
    color: #ffffff !important;
    line-height: 1;
}


/* Texto inferior de los indicadores */
.metrics .metric-card span {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.5;
    color: #64748b;
}

/* Texto de variación de hallazgos */
.metrics .metric-card .danger-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #e6374b !important;
}



/* =========================================================
   DISEÑO RESPONSIVO
   ========================================================= */

@media (max-width: 1200px) {
    .demo-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .demo-metrics-wrapper {
        padding: 9px;
    }

    .demo-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .demo-metric-card {
        min-height: 150px;
        padding: 12px 7px;
    }

        .demo-metric-card h3 {
            font-size: 12px;
        }

        .demo-metric-card strong {
            font-size: 22px;
        }
}

@media (max-width: 360px) {
    .demo-metrics {
        grid-template-columns: 1fr;
    }
}




/* =========================================================
   TARJETAS DE SECCIONES
   ========================================================= */

.demo-section {
    background: white;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 14px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}

.demo-section-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #252a30;
}


/* =========================================================
   GRÁFICA DE CUMPLIMIENTO POR REQUISITO
   ========================================================= */

.requirement-chart-container {
    position: relative;
    height: 320px;
    padding-top: 10px;
}

.requirement-chart-container {
    position: relative;
    width: 100%;
    height: 280px;
    min-height: 280px;
}

.demo-chart,
.demo-chart-small {
    position: relative;
    width: 100%;
    min-height: 245px;
}


/* =========================================================
   CLASIFICACIÓN DE CUMPLIMIENTO - TAMAÑO CORREGIDO
   ========================================================= */

.classification {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    padding: 18px 14px;
    text-align: center;
}

.classification-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 125px;
}

/* Círculos de colores más grandes */
.classification-dot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.classification-item strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.classification-item span {
    font-size: 14px;
    color: #68717c;
}

.classification-item b {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

.classification-item small {
    font-size: 14px;
    color: #68717c;
}

.classification-description {
    grid-column: 1 / -1;
    margin: 10px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e8edf2;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    color: #68717c;
}

    .classification-description i {
        font-size: 16px;
        margin-right: 5px;
    }

/* Adaptación para celulares */
@media (max-width: 650px) {
    .classification {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 10px;
    }

    .classification-description {
        grid-column: 1 / -1;
    }
}



/* =========================================================
   HALLAZGOS
   ========================================================= */

.demo-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

    .demo-section-header h2 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
    }

.demo-badge {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--red);
    color: white;
    text-align: center;
    font-size: 10px;
}


/* =========================================================
   TABLA
   ========================================================= */

.demo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .demo-table thead th {
        padding: 9px 7px;
        border-bottom: 1px solid #ddd;
        color: #5f6873;
        font-weight: 500;
        text-align: left;
    }

    .demo-table tbody td {
        padding: 10px 7px;
        border-bottom: 1px solid #eee;
        color: #3e444b;
    }

    .demo-table tbody tr:hover {
        background: #fafbfd;
    }


/* =========================================================
   SEVERIDADES
   ========================================================= */

.demo-severity {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

.demo-severity-high {
    background: #ffe1e1;
    color: #c62828;
}

.demo-severity-medium {
    background: #fff0c5;
    color: #936900;
}

.demo-severity-low {
    background: #ddf3e5;
    color: #19733b;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1400px) {

    .demo-metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .demo-systems {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 1000px) {

    .demo-dashboard-header {
        flex-direction: column;
    }

    .demo-filters {
        width: 100%;
        flex-wrap: wrap;
    }

    .demo-charts-row {
        grid-template-columns: 1fr;
    }

    .demo-classification {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width: 700px) {

    .demo-sidebar {
        width: 65px;
    }

    .demo-logo {
        justify-content: center;
        padding: 0;
    }

        .demo-logo span,
        .demo-menu-item span,
        .demo-user div {
            display: none;
        }

    .demo-menu-item {
        justify-content: center;
        padding: 0;
    }

    .demo-main {
        margin-left: 65px;
        width: calc(100% - 65px);
    }

    .demo-metrics {
        grid-template-columns: 1fr;
    }

    .demo-systems {
        grid-template-columns: 1fr;
    }

    .demo-classification {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
   COMPATIBILIDAD CON EL DASHBOARD
   ========================================================= */

/* Encabezado */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

    .dashboard-header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #17202a;
    }

    .dashboard-header p {
        margin: 3px 0 0;
        color: #6d7580;
        font-size: 13px;
    }


/* Filtros */
.filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .filters select,
    .filters input {
        height: 36px;
        border: 1px solid #d6dce2;
        border-radius: 6px;
        background: white;
        padding: 0 10px;
        color: #333;
        font-size: 13px;
    }

    .filters select {
        width: 168px;
    }

    .filters input {
        width: 140px;
    }

.filter-button {
    width: 38px;
    height: 36px;
    border: 1px solid #cfd5db;
    background: white;
    border-radius: 7px;
    cursor: pointer;
}


/* Sistemas */
.systems {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 10px;
}

.system-card {
    height: 158px;
    text-align: center;
    padding-top: 12px;
    border-radius: 11px;
}

    .system-card.active {
        background: white;
        border: 1px solid #9bbbcf;
        box-shadow: 0 2px 8px rgba(0,0,0,.07);
    }

    .system-card h3 {
        margin: 0 0 10px;
        font-size: 15px;
        font-weight: 700;
    }

.progress-circle {
    width: 67px;
    height: 67px;
    margin: auto;
    border: 9px solid #dedede;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d5d5d5;
    font-size: 15px;
}

.system-card small {
    display: block;
    margin-top: 12px;
    color: #ddd;
    font-size: 11px;
}


/* Indicadores */
.metrics {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    background: white;
    border: 1px solid #a5c0d0;
    border-radius: 4px;
    padding: 13px;
}

.metric-card {
    min-height: 155px;
    background: white;
    border-radius: 8px;
    text-align: center;
    padding: 12px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border-top: 4px solid;
}

    .metric-card h3 {
        min-height: 38px;
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
    }

.metric-icon {
    width: 36px;
    height: 36px;
    margin: 7px auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 17px;
}

.metric-card strong {
    display: block;
    font-size: 23px;
    line-height: 1;
    margin-top: 4px;
}

.metric-card span {
    display: block;
    margin-top: 10px;
    font-size: 12px;
}


/* Colores */
.metric-card.blue {
    border-color: #1473ea;
}

    .metric-card.blue .metric-icon {
        background: #1473ea;
    }

.metric-card.purple {
    border-color: #9554c7;
}

    .metric-card.purple .metric-icon {
        background: #9554c7;
    }

.metric-card.green {
    border-color: #13a64a;
}

    .metric-card.green .metric-icon {
        background: #13a64a;
    }

.metric-card.yellow {
    border-color: #edb000;
}

    .metric-card.yellow .metric-icon {
        background: #edb000;
    }

.metric-card.red {
    border-color: #e5323d;
}

    .metric-card.red .metric-icon {
        background: #e5323d;
    }

.danger-text {
    color: #e5323d !important;
}


/* Secciones */
.section-card {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 7px;
    padding: 14px;
    margin-top: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}

    .section-card h2 {
        margin: 0 0 12px;
        font-size: 14px;
        font-weight: 600;
    }


/* Gráficos */
.chart-container {
    position: relative;
    height: 245px;
}

.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}


/* Clasificación */
.classification {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    text-align: center;
}

.classification-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.classification-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.optimum {
    background: #0eaa4b;
}

.acceptable {
    background: #76c900;
}

.risk {
    background: #e9ad00;
}

.critical {
    background: #ff7415;
}

.deficient {
    background: #e52e32;
}

.classification-item span,
.classification-item small {
    color: #68717c;
}

.classification-description {
    grid-column: 1 / -1;
    margin: 20px 0 0;
    text-align: left;
    color: #68717c;
    font-size: 12px;
}


/* Tabla */
.demo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .demo-table th {
        padding: 9px 7px;
        border-bottom: 1px solid #ddd;
        color: #5f6873;
        font-weight: 500;
        text-align: left;
    }

    .demo-table td {
        padding: 10px 7px;
        border-bottom: 1px solid #eee;
    }


/* Responsive */
@media (max-width: 1400px) {
    /* En escritorio, mantener los cuatro sistemas en una sola fila. */
    .systems {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Los indicadores se reducen a tres columnas en pantallas medianas. */
    .metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   MENU USUARIO - BIENVENIDO/A
   ========================================================= */

.welcome-menu {
    position: relative;
}


/* Botón */

.welcome-button {
    border: none;
    background: transparent;
    color: white;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .welcome-button:hover {
        background: rgba(255, 255, 255, .05);
    }

    .welcome-button i {
        color: #1473ea;
        font-size: 8px;
    }


/* Dropdown */

.welcome-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background: #24282d;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
    overflow: hidden;
    display: none;
    z-index: 2000;
}


    /* Mostrar */

    .welcome-dropdown.show {
        display: block;
    }


    /* Opciones */

    .welcome-dropdown a {
        height: 64px;
        display: flex;
        align-items: center;
        padding: 0 28px;
        color: #f1f1f1;
        text-decoration: none;
        font-size: 13px;
        border-bottom: 1px solid #34383d;
        transition: background .2s;
    }

        .welcome-dropdown a:last-child {
            border-bottom: none;
        }

        .welcome-dropdown a:hover {
            background: #30353a;
        }

        .welcome-dropdown a i {
            display: none;
        }

.demo-logout {
    margin-left: auto;
    color: #e5323d;
    font-size: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}

    .demo-logout:hover {
        color: #ff4b55;
    }
/* =========================================================
   AJUSTES DASHBOARD REACH SPEI - REQ 2, 5 Y 34
   ========================================================= */
.dashboard-shell {
    display: grid;
    grid-template-columns: minmax(0,1fr) 365px;
    gap: 14px;
    align-items: start;
    width: 100%;
}

.dashboard-main {
    min-width: 0;
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

    .dashboard-header h1 {
        font-size: 23px;
        margin: 0 0 4px;
        font-weight: 700;
    }

    .dashboard-header p {
        margin: 0;
        color: #707987;
        font-size: 13px;
    }

.filters {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

    .filters select {
        min-width: 165px;
    }

    .filters input[type=date] {
        width: 140px;
    }

.date-separator {
    color: #687080;
}

.filter-button {
    height: 38px;
    width: 40px;
    border: 1px solid #bfc5cd;
    border-radius: 6px;
    background: #fff;
    color: #343b46;
}

    .filter-button:hover, .filter-button.filter-applied {
        background: #eaf3ff;
        border-color: #1473ea;
        color: #1473ea;
    }

.systems {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.system-card {
    font: inherit;
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 12px 8px;
    cursor: pointer;
    min-width: 0;
}

    .system-card:hover, .system-card.active {
        background: #fff;
        border-color: #c9d4e2;
        box-shadow: 0 2px 9px rgba(0,0,0,.06);
    }

    .system-card h3 {
        font-size: 14px;
        font-weight: 750;
        margin: 0 0 8px;
    }

.progress-circle {
    width: 72px;
    height: 72px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    background: conic-gradient(#c8102e 0 52.5%,#e8e9ec 52.5% 100%);
}

    .progress-circle:before {
        content: "";
        position: absolute;
        inset: 8px;
        background: #fff;
        border-radius: 50%;
    }

    .progress-circle span {
        position: relative;
        font-size: 12px;
        font-weight: 700;
    }

.progress-spid {
    background: conic-gradient(#c8102e 0 41.58%,#e8e9ec 41.58% 100%);
}

.progress-indeval {
    background: conic-gradient(#c8102e 0 54.13%,#e8e9ec 54.13% 100%);
}

.progress-sibuc {
    background: conic-gradient(#ddd 0 2%,#e8e9ec 2% 100%);
}

.system-card small {
    font-size: 11px;
    color: #77808c;
}

.system-card .status-bad {
    color: #c8102e;
    font-weight: 650;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.metric-card {
    position: relative;
    min-width: 0;
    text-align: center;
    background: #fff;
    border: 1px solid #edf0f3;
    border-top: 3px solid #1473ea;
    border-radius: 8px;
    padding: 13px 8px 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.035);
}

    .metric-card h3 {
        font-size: 12px;
        line-height: 1.35;
        min-height: 32px;
        margin: 0 0 7px;
        font-weight: 650;
    }

.metric-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 7px;
    background: #eaf2ff;
    color: #1473ea;
    font-size: 17px;
}

.metric-card strong {
    display: block;
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 5px;
}

.metric-card span {
    font-size: 11px;
    color: #707987;
}

.metric-card.purple {
    border-top-color: #9554c7
}

    .metric-card.purple .metric-icon {
        background: #f3e9fc;
        color: #9554c7
    }

.metric-card.green {
    border-top-color: #13a64a
}

    .metric-card.green .metric-icon {
        background: #e6f7ed;
        color: #13a64a
    }

.metric-card.yellow {
    border-top-color: #e3b000
}

    .metric-card.yellow .metric-icon {
        background: #fff6d8;
        color: #bd8c00
    }

.metric-card.red {
    border-top-color: #c8102e
}

    .metric-card.red .metric-icon {
        background: #fde8ec;
        color: #c8102e
    }

.danger-text {
    color: #c8102e !important;
}

.section-card {
    background: #fff;
    border: 1px solid #e3e7ec;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
    min-width: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.025);
}

    .section-card h2 {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 12px;
    }

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .section-heading h2 {
        margin-bottom: 5px;
    }

.section-subtitle {
    font-size: 12px;
    color: #7b8490;
    margin: 0 0 8px;
}

.demo-tag {
    font-size: 10px;
    font-weight: 700;
    color: #a10d27;
    background: #fff0f2;
    padding: 5px 8px;
    border-radius: 20px;
}

.chart-container {
    position: relative;
    width: 100%;
    height: 220px;
}

.requirement-chart-container {
    height: 190px;
}

.classification {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px;
    text-align: center;
}

.classification-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

    .classification-item strong {
        font-size: 11px;
    }

    .classification-item span, .classification-item small {
        font-size: 10px;
        color: #727b87;
    }

    .classification-item b {
        font-size: 15px;
    }

.classification-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.optimum {
    background: #18aa58
}

.acceptable {
    background: #8ac926
}

.risk {
    background: #e1b500
}

.critical {
    background: #f07824
}

.deficient {
    background: #c8102e
}

.classification-description {
    grid-column: 1/-1;
    border-top: 1px solid #eef0f3;
    padding-top: 10px;
    margin: 5px 0 0;
    color: #707987;
    font-size: 11px;
}

.charts-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

    .charts-row .section-card {
        margin-bottom: 14px;
    }

.badge-danger {
    background: #c8102e;
    color: #fff;
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 11px;
}

.demo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    white-space: normal;
}

    .demo-table th {
        font-weight: 700;
        background: #f8f9fb;
        color: #4b5563;
        text-align: left;
        padding: 10px 8px;
        border-bottom: 1px solid #e3e7ec;
    }

    .demo-table td {
        padding: 10px 8px;
        border-bottom: 1px solid #edf0f3;
        vertical-align: top;
    }

.severity {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

    .severity.high {
        background: #fde8ec;
        color: #b42338
    }

    .severity.medium {
        background: #fff4d6;
        color: #946800
    }

    .severity.low {
        background: #e8f6ed;
        color: #16783a
    }

.mock-data-note {
    font-size: 11px;
    color: #7b8490;
    margin: 12px 0 0;
}

.detail-panel {
    position: sticky;
    top: 14px;
    min-width: 0;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    padding: 17px;
    box-shadow: 0 2px 9px rgba(0,0,0,.06);
    min-height: 570px;
    display: flex;
    flex-direction: column;
}

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #e8ebef;
    padding-bottom: 15px;
}

.detail-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #818997;
    font-weight: 700;
}

.detail-header h2 {
    font-size: 17px;
    margin: 4px 0 2px;
    font-weight: 750;
}

.detail-header p {
    font-size: 12px;
    color: #6e7785;
    margin: 0;
}

.detail-close {
    border: 0;
    background: transparent;
    color: #667080;
    padding: 2px 5px;
    font-size: 15px;
}

.detail-progress {
    padding: 16px 0;
    border-bottom: 1px solid #e8ebef;
}

.detail-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 8px;
}

    .detail-progress-label strong {
        font-size: 14px;
        color: #c8102e;
    }

.detail-progress-track {
    height: 8px;
    border-radius: 20px;
    background: #eceff3;
    overflow: hidden;
}

    .detail-progress-track span {
        display: block;
        height: 100%;
        background: #c8102e;
        border-radius: 20px;
        transition: width .2s;
    }

.detail-counts {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 5px;
    padding: 15px 0;
    border-bottom: 1px solid #e8ebef;
    text-align: center;
}

    .detail-counts div {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .detail-counts strong {
        font-size: 14px;
        color: #343b46;
    }

    .detail-counts span {
        font-size: 9px;
        line-height: 1.3;
        color: #78818e;
    }

.detail-subrequirements {
    padding: 15px 0;
    flex: 1;
}

    .detail-subrequirements h3 {
        font-size: 13px;
        font-weight: 700;
        margin: 0 0 10px;
    }


.subrequirement-row {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) 38px;
    align-items: start;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f3;
}

.subrequirement-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .subrequirement-content strong {
        font-size: 12px;
    }

.subrequirement-description {
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.subrequirement-percent {
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
}

.subrequirement-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
}


.evidence-button {
    width: 100%;
    background: #fff;
    border: 1px solid #aeb6c1;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #333b47;
}

    .evidence-button:hover {
        background: #f6f8fa;
    }

.evidence-message {
    font-size: 11px;
    line-height: 1.5;
    background: #fff7df;
    border: 1px solid #f3df9d;
    color: #765a00;
    padding: 10px;
    border-radius: 6px;
    margin-top: 10px;
}

.detail-collapsed {
    display: none;
}

@media(max-width:1450px) {
    .dashboard-shell {
        grid-template-columns: minmax(0,1fr) 320px
    }

    .metrics {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .filters input[type=date] {
        width: 125px
    }
}

@media(max-width:1050px) {
    .dashboard-shell {
        grid-template-columns: 1fr
    }

    .detail-panel {
        position: relative;
        top: auto;
        min-height: 0
    }

    .systems {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }
}

@media(max-width:700px) {
    .dashboard-header {
        align-items: flex-start;
        flex-direction: column
    }

    .filters {
        width: 100%
    }

        .filters select {
            flex: 1;
            min-width: 130px
        }

        .filters input[type=date] {
            flex: 1;
            min-width: 110px;
            width: auto
        }

    .systems {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .metrics {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .charts-row {
        grid-template-columns: 1fr
    }

    .classification {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .classification-description {
        grid-column: 1/-1
    }

    .detail-counts {
        grid-template-columns: repeat(5,minmax(0,1fr))
    }

    .section-card {
        padding: 12px
    }

    .demo-table {
        min-width: 700px
    }
}

/* El panel no debe mostrarse mientras tenga el atributo hidden */
#requirementDetail[hidden] {
    display: none !important;
}


/* =========================================================
   AJUSTE FINAL: DASHBOARD A ANCHO COMPLETO CUANDO EL DETALLE
   DEL REQUISITO ESTA OCULTO
   ========================================================= */

/* El panel lateral oculto no debe reservar una columna vacía. */
.dashboard-shell:has(#requirementDetail[hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* Cuando el detalle está visible, el dashboard usa dos columnas. */
.dashboard-shell:has(#requirementDetail:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 365px;
}

/* Evita límites de ancho heredados y permite que el contenido se expanda. */
.dashboard-shell,
.dashboard-main {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

    .dashboard-main > *,
    .dashboard-header,
    .systems,
    .metrics,
    .section-card,
    .charts-row {
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
    }

/* Mantener los gráficos al ancho del contenedor disponible. */
.chart-container {
    width: 100%;
    min-width: 0;
}

@media (max-width: 1450px) {
    .dashboard-shell:has(#requirementDetail[hidden]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dashboard-shell:has(#requirementDetail:not([hidden])) {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 1050px) {
    .dashboard-shell,
    .dashboard-shell:has(#requirementDetail[hidden]),
    .dashboard-shell:has(#requirementDetail:not([hidden])) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Ocultar de verdad el panel al iniciar, incluso si hay reglas display:flex. */
#requirementDetail[hidden] {
    display: none !important;
}



/* =========================================================
   AJUSTE DEFINITIVO DE TARJETAS DE SISTEMAS
   Compatible con Index.cshtml: .systems / .system-card
   ========================================================= */

.systems {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin: 0 0 10px;
}

.system-card {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: 182px;
    padding: 14px 8px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-align: center;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .system-card:hover {
        background: #fff;
        border-color: #d6e0e8;
    }

    .system-card.active {
        background: #fff;
        border: 1px solid #91b5c8;
        box-shadow: 0 2px 9px rgba(0, 0, 0, .07);
    }

    .system-card:focus-visible {
        outline: 3px solid rgba(20, 115, 234, .3);
        outline-offset: 2px;
    }

    .system-card h3 {
        margin: 0 0 8px;
        font-size: 14px;
        line-height: 1.25;
        font-weight: 750;
        color: #20242a;
    }

.progress-circle {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    margin: 0 auto 8px;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(#c8102e 0 48.76%, #dedede 48.76% 100%);
}

    .progress-circle::before {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 50%;
        background: #fff;
    }

    .progress-circle span {
        position: relative;
        z-index: 1;
        color: #c8102e;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    .progress-circle.progress-spei {
        background: conic-gradient(#c8102e 0 48.76%, #dedede 48.76% 100%);
    }

    .progress-circle.progress-spid {
        background: conic-gradient(#c8102e 0 43.36%, #dedede 43.36% 100%);
    }

    .progress-circle.progress-indeval {
        background: conic-gradient(#c8102e 0 53%, #dedede 53% 100%);
    }

    .progress-circle.progress-sibuc {
        background: conic-gradient(#dedede 0 100%);
    }

        .progress-circle.progress-sibuc span {
            color: #c8cbd0;
        }

.system-card small {
    display: block;
    margin-top: 8px;
    color: #a0a6af;
    font-size: 10px;
    line-height: 1.3;
}

.system-card .status-bad {
    color: #c8102e;
    font-weight: 650;
}

/* Cuatro sistemas en escritorio y tablet horizontal */
@media (min-width: 1051px) {
    .systems {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* En tablet vertical, mostrar dos sistemas por fila */
@media (max-width: 1050px) {
    .systems {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* En móvil, conservar dos tarjetas por fila */
@media (max-width: 600px) {
    .systems {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .system-card {
        min-height: 160px;
        padding: 10px 5px;
    }

    .progress-circle {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
    }
}


/* Diseño de la tabla de hallazgos */
.findings-section .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.findings-section .demo-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

    .findings-section .demo-table th {
        padding: 12px 10px;
        text-align: left;
        white-space: nowrap;
        font-weight: 500;
        color: #667085;
        border-bottom: 1px solid #dce1e7;
    }

    .findings-section .demo-table td {
        padding: 14px 10px;
        vertical-align: middle;
        border-bottom: 1px solid #e1e5e9;
        color: #253244;
    }

/* Activo */
.findings-section .finding-asset {
    min-width: 145px;
}

    .findings-section .finding-asset .finding-computer {
        font-size: 21px;
        margin-right: 9px;
        vertical-align: middle;
    }

.findings-section .finding-asset-info {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    gap: 3px;
    max-width: 145px;
}

    .findings-section .finding-asset-info strong {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .findings-section .finding-asset-info small {
        font-size: 12px;
        color: #7b8490;
    }

/* Requisito amarillo */
.findings-section .finding-requirement {
    display: inline-block;
    min-width: 68px;
    padding: 7px 12px;
    text-align: center;
    border-radius: 18px;
    background: #fff1c7;
    color: #a65c00;
    font-weight: 600;
}



    /* Colores por requisito */
    .findings-section .finding-requirement[data-requisito="02"],
    .findings-section .finding-requirement[data-requisito="2"] {
        background: #fff1c7;
        color: #a65c00;
    }

    .findings-section .finding-requirement[data-requisito="05"],
    .findings-section .finding-requirement[data-requisito="5"] {
        background: #d1fae5;
        color: #047857;
    }

    .findings-section .finding-requirement[data-requisito="34"] {
        background: #dbeafe;
        color: #1d4ed8;
    }



/* Subrequisito y hallazgo */
.findings-section .finding-subrequirement {
    min-width: 190px;
    overflow-wrap: anywhere;
}

.findings-section .finding-description {
    min-width: 280px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Etiquetas de severidad */
.findings-section .severity {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 18px;
    white-space: nowrap;
    font-weight: 600;
}

    .findings-section .severity.acceptable {
        background: #DEC104;
        color: #0A0A0A;
    }

    .findings-section .severity.critical,
    .findings-section .severity.high {
        background: #F53B3B;
        color: #0A0A0A;
    }

    .findings-section .severity.medium {
        background: #fff0c2;
        color: #875900;
    }

    .findings-section .severity.low {
        background: #d8f3e3;
        color: #176b3a;
    }

/* Fecha en varias líneas si es necesario */
.findings-section .finding-date {
    min-width: 125px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Separación entre filas */
.findings-section .demo-table tbody tr:hover {
    background: #f7f8fa;
}