/* ==========================================================================
   414 Capital — Sistema de diseño
   Colores, tipografía, KPIs, tablas y paleta de gráficas.
   ========================================================================== */

:root {
    /* Marca */
    --c4p-primary: #004882;      /* Primario / barras */
    --c4p-secondary: #0288D1;    /* Secundario / acentos */
    --c4p-primary-dark: #00365F; /* Hover oscuro */
    --c4p-bg: #F0F4F8;           /* Fondo claro */
    --c4p-on-primary: #ffffff;   /* Texto sobre primario */

    /* Encabezados de datos (thead, rejilla de Rooms, titulo de modales).
       Gris azulado: es el segundo color de la paleta, así que baja el peso
       del azul primario sin salirse de la marca. 6.2:1 con texto blanco. */
    --c4p-header: #496287;
    --c4p-header-dark: #3A4F6C;

    /* Superficies / tablas */
    --c4p-surface: #ffffff;
    --c4p-border: #DBE3EC;       /* Bordes de tabla / tarjetas */
    --c4p-row-alt: #F3F6FA;      /* Filas alternas */
    --c4p-text: #1f2b38;
    --c4p-text-muted: #6c7a89;   /* Etiquetas gris (KPI) */

    /* Paleta de gráficas (azules -> grises). #004882 siempre primero. */
    --chart-1:  #004882;
    --chart-2:  #496287;
    --chart-3:  #6783AD;
    --chart-4:  #6D9BC5;
    --chart-5:  #8DB8DF;
    --chart-6:  #ACC6DE;
    --chart-7:  #C3D6E7;
    --chart-8:  #D5E3EF;
    --chart-9:  #808080;
    --chart-10: #909090;
    --chart-11: #A5A5A5;
    --chart-12: #B2B2B2;
    --chart-13: #C7C7C7;
    --chart-14: #D5D5D5;
    --chart-15: #F2F2F2;

    /* Puente con las variables de Bootstrap */
    --bs-primary: #004882;
    --bs-primary-rgb: 0, 72, 130;
    --bs-link-color: #0288D1;
    --bs-link-hover-color: #00365F;
}

html, body {
    font-family: Roboto, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--c4p-bg);
    color: var(--c4p-text);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: var(--c4p-primary);
}

/* Títulos más compactos en todo el sitio. */
h1 { font-size: 1.4rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: 0.92rem; }
h5 { font-size: 0.85rem; }

a, .btn-link {
    color: var(--c4p-secondary);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--c4p-primary-dark);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn-primary {
    color: #fff;
    background-color: var(--c4p-primary);
    border-color: var(--c4p-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff;
    background-color: var(--c4p-primary-dark);
    border-color: var(--c4p-primary-dark);
}

/* Los outline de Bootstrap son transparentes, y sobre el fondo de la página
   (--c4p-bg) se leen como recuadros vacíos en vez de botones. Se les pone la
   superficie blanca para que se vean igual sobre tarjeta, tabla o fondo. */
.btn-outline-primary {
    color: var(--c4p-primary);
    background-color: var(--c4p-surface);
    border-color: var(--c4p-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff;
    background-color: var(--c4p-primary);
    border-color: var(--c4p-primary);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--c4p-text-muted);
    background-color: var(--c4p-surface);
    border-color: var(--c4p-border);
}

/* Bootstrap no traía variante de marca para este: usaba su rojo #dc3545, que
   no combina con el rojo apagado de los badges. */
.btn-outline-danger {
    color: #9B2C2C;
    background-color: var(--c4p-surface);
    border-color: #D9A5A5;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    color: #fff;
    background-color: #9B2C2C;
    border-color: #9B2C2C;
}

.btn-danger {
    color: #fff;
    background-color: #9B2C2C;
    border-color: #9B2C2C;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    color: #fff;
    background-color: #7F2222;
    border-color: #7F2222;
}

.btn-secondary {
    color: #fff;
    background-color: var(--c4p-secondary);
    border-color: var(--c4p-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: #fff;
    background-color: var(--c4p-primary-dark);
    border-color: var(--c4p-primary-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--c4p-secondary);
    border-color: var(--c4p-secondary);
}

.form-check-input:checked {
    background-color: var(--c4p-primary);
    border-color: var(--c4p-primary);
}

.content {
    padding-top: 1.1rem;
    font-size: 0.9rem;
}

h1:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   KPIs — etiqueta gris arriba, valor grande en primario
   -------------------------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
}

.kpi-card {
    background: var(--c4p-surface);
    border: 1px solid var(--c4p-border);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 54, 95, 0.06);
}

.kpi-card .kpi-label {
    display: block;
    color: var(--c4p-text-muted);
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.kpi-card .kpi-value {
    display: block;
    color: var(--c4p-primary);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
}

.kpi-card .kpi-trend {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--c4p-text-muted);
}

.kpi-card .kpi-trend.up { color: #2e7d32; }
.kpi-card .kpi-trend.down { color: #c62828; }

/* --------------------------------------------------------------------------
   Tablas — ancho completo, encabezados fijos, bordes y filas alternas
   -------------------------------------------------------------------------- */
.table-c4p {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--c4p-surface);
    border: 1px solid var(--c4p-border);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.92rem;
}

/* Contenedor con scroll para poder fijar el encabezado */
.table-c4p-wrapper {
    width: 100%;
    max-height: 60vh;
    overflow: auto;
    border-radius: 8px;
    border: 1px solid var(--c4p-border);
}

.table-c4p-wrapper .table-c4p {
    border: 0;
    border-radius: 0;
    /* El wrapper recorta y redondea; la tabla debe quedar en overflow visible
       para que el encabezado sticky se fije al contenedor scrolleable. */
    overflow: visible;
}

.table-c4p thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--c4p-header);
    color: var(--c4p-on-primary);
    font-weight: 500;
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--c4p-primary-dark);
    white-space: nowrap;
}

/* Editor de texto enriquecido (cuerpo de campañas) */
.html-editor {
    border: 1px solid var(--c4p-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--c4p-surface);
}

.html-editor-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: 0.35rem 0.4rem;
    background: #eef2f7;
    border-bottom: 1px solid var(--c4p-border);
}

.html-editor-bar button {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 4px;
    min-width: 30px;
    height: 28px;
    padding: 0 0.45rem;
    font-size: 0.82rem;
    color: var(--c4p-text);
    cursor: pointer;
}

.html-editor-bar button:hover { background: #fff; border-color: var(--c4p-border); }
.html-editor-bar button.on { background: var(--c4p-primary); color: #fff; }
.html-editor-bar .sep { width: 1px; height: 18px; background: var(--c4p-border); margin: 0 0.25rem; }

/* El botón de imagen es una etiqueta con el selector de archivo escondido dentro:
   se pinta igual que los demás para que no se note la diferencia. */
.html-editor-file {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    min-width: 30px;
    height: 28px;
    padding: 0 0.45rem;
    font-size: 0.82rem;
    color: var(--c4p-text);
    cursor: pointer;
    margin: 0;
}

.html-editor-file:hover { background: #fff; border-color: var(--c4p-border); }

.html-editor-error {
    border-top: 1px solid var(--c4p-border);
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    color: #9B2C2C;
}

.html-editor-area {
    padding: 0.75rem 0.9rem;
    outline: none;
    overflow-y: auto;
    font-size: 0.92rem;
    line-height: 1.55;
}

.html-editor-area:focus { box-shadow: inset 0 0 0 2px #E7EEF6; }
.html-editor-area img { max-width: 100%; height: auto; }
.html-editor-area a { color: var(--c4p-secondary); }

.html-editor-source {
    width: 100%;
    border: 0;
    outline: none;
    padding: 0.75rem 0.9rem;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.8rem;
    resize: vertical;
}

/* Etiquetas de estado en tablas */
.badge-c4p {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.badge-c4p.ok      { background: #E1F0E4; color: #256B33; }
.badge-c4p.off     { background: #EDEDED; color: #6B6B6B; }
.badge-c4p.warn    { background: #FBEEDA; color: #8A5A0B; }
.badge-c4p.info    { background: #E7EEF6; color: var(--c4p-primary); }
.badge-c4p.danger  { background: #F8E3E3; color: #9B2C2C; }

/* Secciones dentro de modales grandes */
.modal-section {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c4p-text-muted);
    border-bottom: 1px solid var(--c4p-border);
    padding-bottom: 0.3rem;
    margin: 0 0 0.75rem;
}

/* Rejilla de checkboxes (accesos a módulos) */
.modal-flags {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.35rem 1rem;
}

.width-100 { width: 100px; }

/* Encabezados ordenables */
.table-c4p thead th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.table-c4p thead th.sortable:hover {
    background: var(--c4p-header-dark);
}

.table-c4p thead th .sort-arrow {
    margin-left: 0.35rem;
    font-size: 0.7em;
    opacity: 0.45;
}

.table-c4p thead th.sorted .sort-arrow {
    opacity: 1;
}

.table-c4p tbody td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--c4p-border);
    color: var(--c4p-text);
}

.table-c4p tbody tr:nth-child(even) td {
    background: var(--c4p-row-alt);
}

.table-c4p tbody tr:hover td {
    background: #E7EEF6;
}

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

.table-c4p .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* En móvil: menos padding en el contenido y tablas más compactas. */
@media (max-width: 640.98px) {
    article.content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .card-c4p {
        padding: 0.9rem;
    }

    .table-c4p {
        font-size: 0.78rem;
    }

    .table-c4p thead th {
        padding: 0.5rem 0.5rem;
    }

    .table-c4p tbody td {
        padding: 0.45rem 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   Gráfica de barras (demo del panel) — un color por barra
   -------------------------------------------------------------------------- */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    height: 220px;
    padding-top: 0.5rem;
}

.bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.bar-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bar-fill {
    width: 70%;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
}

.bar-label {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--c4p-text-muted);
    text-align: center;
}

/* Histograma corto, para cuando la gráfica acompaña y no protagoniza. */
.bar-chart.compact {
    height: 130px;
    gap: 0.35rem;
}

.bar-chart.compact .bar-label {
    font-size: 0.68rem;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Embudo (entregados -> aperturas -> clics -> fallos -> bajas)
   -------------------------------------------------------------------------- */
.funnel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.funnel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.funnel-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c4p-text-muted);
}

.funnel-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c4p-text);
}

.funnel-track {
    height: 9px;
    background: var(--c4p-row-alt);
    border: 1px solid var(--c4p-border);
    border-radius: 5px;
    overflow: hidden;
}

.funnel-fill {
    height: 100%;
    border-radius: 5px 0 0 5px;
    transition: width 0.3s ease;
}

/* --------------------------------------------------------------------------
   Pestañas / submenús (parte superior de un módulo)
   -------------------------------------------------------------------------- */
.tabs-c4p {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--c4p-border);
    margin-bottom: 1.25rem;
}

.tabs-c4p .tab {
    padding: 0.6rem 1.1rem;
    color: var(--c4p-text-muted);
    text-decoration: none;
    font-weight: 500;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: none;
    cursor: pointer;
}

.tabs-c4p .tab:hover {
    color: var(--c4p-primary);
    text-decoration: none;
}

.tabs-c4p .tab.active {
    color: var(--c4p-primary);
    border-bottom-color: var(--c4p-primary);
}

/* --------------------------------------------------------------------------
   Tarjetas / paneles genéricos
   -------------------------------------------------------------------------- */
.card-c4p {
    background: var(--c4p-surface);
    border: 1px solid var(--c4p-border);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 54, 95, 0.06);
}

.card-c4p > h2,
.card-c4p > h3 {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   PTO — calendario anual
   -------------------------------------------------------------------------- */
.pto-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pto-year {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pto-year-label {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--c4p-primary);
    min-width: 4ch;
    text-align: center;
}

.pto-types {
    display: flex;
    gap: 0.4rem;
}

.pto-type {
    border: 1px solid var(--c4p-border);
    background: #fff;
    border-radius: 6px;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.pto-type.v.active {
    background: #6D9BC5;
    color: #fff;
    border-color: #6D9BC5;
}

.pto-type.s.active {
    background: #D9D9D9;
    color: #333;
    border-color: #c4c4c4;
}

.pto-legend {
    display: flex;
    gap: 1rem;
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--c4p-text-muted);
    align-items: center;
    flex-wrap: wrap;
}

.pto-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pto-legend .sw {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

.sw.v { background: #6D9BC5; }
.sw.s { background: #D9D9D9; }
.sw.off { background: #C7C7C7; }

/* Reporte del año: matriz de días V/S por usuario (arriba del calendario). */
.pto-summary {
    margin-bottom: 1rem;
}

.pto-summary-wrap {
    overflow-x: auto;
    border: 1px solid var(--c4p-border);
    border-radius: 6px;
}

.pto-summary-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.78rem;
    background: var(--c4p-surface);
}

.pto-summary-table th,
.pto-summary-table td {
    padding: 0.3rem 0.45rem;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--c4p-border);
}

.pto-summary-table thead th {
    background: #eef2f7;
    color: var(--c4p-primary);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.pto-summary-table .type-col {
    position: sticky;
    left: 0;
    background: #eef2f7;
    font-weight: 700;
    color: var(--c4p-primary);
    text-align: left;
    min-width: 46px;
    z-index: 1;
}

.pto-summary-table tbody tr:last-child td {
    border-bottom: 0;
}

.pto-summary-table .row-v td:not(.type-col) { color: var(--c4p-secondary); font-weight: 600; }
.pto-summary-table .row-s td:not(.type-col) { color: var(--c4p-text-muted); font-weight: 600; }

/* Columna del usuario mostrado, resaltada. */
.pto-summary-table th.me,
.pto-summary-table td.me {
    background: #E7EEF6;
}

.pto-summary-total {
    text-align: center;
    font-size: 0.8rem;
    color: var(--c4p-text-muted);
    margin: 0.4rem 0 0;
}

.pto-months {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.pto-month {
    background: var(--c4p-surface);
    border: 1px solid var(--c4p-border);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

/* Nombre del mes con banda azul claro (como el encabezado de Rooms). */
.pto-month h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--c4p-primary);
    text-align: center;
    background: #E7EEF6;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--c4p-border);
}

.pto-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0.75rem;
}

/* Encabezado de días con el mismo tinte estructural que Rooms. */
.pto-wd {
    background: #eef2f7;
    border-radius: 3px;
}

.pto-wd {
    text-align: center;
    font-size: 0.7rem;
    color: var(--c4p-text-muted);
    font-weight: 500;
    padding: 2px 0;
}

.pd {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    font-size: 0.78rem;
    border-radius: 4px;
    color: var(--c4p-text);
    user-select: none;
}

.pd.empty { visibility: hidden; }
.pd.clickable { cursor: pointer; }
.pd.clickable:hover { outline: 1px solid #6D9BC5; }
.pd.off { background: #C7C7C7; color: #949494; }
.pd.past { color: #c2c2c2; }
.pd.v { background: #6D9BC5; color: #fff; }
.pd.s { background: #D9D9D9; color: #333; }
.pd.today { outline: 2px solid var(--c4p-secondary); font-weight: 700; }

/* --------------------------------------------------------------------------
   Rooms — reserva semanal (días x horas)
   -------------------------------------------------------------------------- */
.rooms-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.rooms-week {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rooms-week-label {
    font-weight: 600;
    color: var(--c4p-primary);
    min-width: 15ch;
    text-align: center;
}

.rooms-grid-wrap {
    overflow: auto;
    max-height: 66vh;
    border: 1px solid var(--c4p-border);
    border-radius: 8px;
}

/* Dentro del card no repetimos el borde. */
.rooms-card .rooms-grid-wrap {
    border: none;
    border-radius: 0;
}

.rooms-grid {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.85rem;
    background: #fff;
}

.rooms-grid th {
    position: sticky;
    top: 0;
    background: var(--c4p-header);
    color: #fff;
    z-index: 2;
    padding: 0.35rem 0.4rem;
    text-align: center;
    font-weight: 500;
}

.rooms-grid th.today {
    background: var(--c4p-secondary);
}

.rooms-grid .dow { font-size: 0.72rem; opacity: 0.9; }
.rooms-grid .dom { font-weight: 700; font-size: 1rem; }

.rooms-grid th {
    min-width: 68px;
}

.rooms-grid td.hour-col,
.rooms-grid th.hour-col {
    position: sticky;
    left: 0;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    background: #eef2f7;
    color: var(--c4p-text-muted);
    text-align: right;
    padding: 0 0.4rem;
    white-space: nowrap;
    border-right: 1px solid var(--c4p-border);
    font-size: 0.75rem;
}

.rooms-grid th.hour-col {
    z-index: 3;
    background: var(--c4p-header);
    min-width: 52px;
}

.slot {
    border-bottom: 1px solid var(--c4p-border);
    border-right: 1px solid var(--c4p-border);
    height: 1.95rem;
    padding: 0 0.25rem;
    vertical-align: top;
    overflow: hidden;
}

.slot.free { cursor: pointer; }
.slot.free:hover { background: #E7EEF6; }

.slot.busy {
    background: #6D9BC5;
    color: #fff;
    cursor: pointer;
}

.slot.busy.mine { background: #0288D1; }

.bk-title {
    display: block;
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-user {
    display: block;
    font-size: 0.66rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Celdas de la vista semanal con chips (alias + iniciales) */
.rooms-grid.week .slot.cell {
    padding: 2px 3px;
    vertical-align: top;
    cursor: pointer;
}

.rooms-grid.week .slot.cell.hourline {
    border-top: 1px solid #d3dbe4;
}

.rooms-grid.week .slot.cell:hover {
    background: #F0F5FA;
}

.bk-chip {
    display: inline-block;
    background: #6D9BC5;
    color: #fff;
    border-radius: 4px;
    font-size: 0.72rem;
    line-height: 1.4;
    padding: 2px 6px;
    margin: 0 2px 2px 0;
    white-space: nowrap;
    cursor: pointer;
}

/* La reserva propia se marca con un anillo (visible sobre cualquier color de sala). */
.bk-chip.mine { box-shadow: 0 0 0 2px var(--c4p-secondary); }
.bk-chip b { font-weight: 700; }

/* En escritorio la tarjeta de Rooms ocupa todo el alto disponible y la rejilla
   crece para llenar el espacio (scroll interno). */
@media (min-width: 641px) {
    /* El contenedor central ocupa todo el alto disponible en todas las páginas. */
    article.content {
        display: flex;
        flex-direction: column;
        padding-bottom: 1rem;
    }

    /* El último bloque de contenido crece para llenar el espacio restante. */
    article.content > :last-child {
        flex-grow: 1;
    }

    /* Tarjeta cuya tabla debe ocupar todo el alto disponible (scroll interno).
       La clave son las dos cosas juntas: se deja que el flex la encoja (para que
       se acote al espacio libre en vez de estirarse con las filas), pero con un
       piso explícito en min-height. Con min-height: 0 se encogía hasta desaparecer
       cuando había varias tarjetas arriba; con flex-shrink: 0 crecía con el número
       de filas y el scroll se iba a la página. */
    .card-fill-table {
        display: flex;
        flex-direction: column;
        min-height: 20rem;
        overflow: hidden;
    }

    .card-fill-table > .table-c4p-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    .rooms-card {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .rooms-card .rooms-toolbar {
        flex-shrink: 0;
    }

    .rooms-card .rooms-grid-wrap {
        flex: 1;
        min-height: 0;
        max-height: none;
    }
}

/* --------------------------------------------------------------------------
   PCKD — ficha de instrumento (lista de definiciones)
   -------------------------------------------------------------------------- */
.pckd-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin: 0;
}

.pckd-facts dt {
    color: var(--c4p-text-muted);
    font-weight: 500;
}

.pckd-facts dd {
    margin: 0;
    color: var(--c4p-text);
    font-weight: 600;
}

/* Encabezado del instrumento: selector + ficha en línea (aprovecha el ancho). */
.instr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.instr-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.5rem;
    font-size: 0.9rem;
    align-items: center;
}

.instr-facts > span {
    white-space: nowrap;
    font-weight: 600;
    color: var(--c4p-text);
}

/* Para datos largos (un asunto de correo) que sí deben poder partirse. */
.instr-facts > span.wrap {
    white-space: normal;
}

.instr-facts .lbl {
    color: var(--c4p-text-muted);
    font-weight: 400;
    margin-right: 0.3rem;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

.table-c4p tfoot th {
    background: #eef2f7;
    padding: 0.6rem 0.9rem;
    border-top: 2px solid var(--c4p-border);
    color: var(--c4p-primary);
}

.table-c4p tfoot .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.row-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 460px));
    justify-content: start;
    gap: 1rem;
}

/* Tres gráficas en un renglón (se apilan en pantallas angostas). */
.row-charts.three {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991.98px) {
    .row-charts.three {
        grid-template-columns: 1fr;
    }
}

/* Títulos de gráficas: mismo tamaño que el resto, con margen compacto. */
.row-charts h3,
.card-c4p.chart-card h3 {
    margin-bottom: 0.5rem;
}

/* Gráficas SVG (J-curve, NAV, waterfall) */
.c4p-chart {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.c4p-chart-zero {
    stroke: #b7c2cf;
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.c4p-grid {
    stroke: #e3e9f0;
    stroke-width: 1;
}

.c4p-axis-y {
    font-size: 11px;
    fill: var(--c4p-text-muted);
    text-anchor: end;
}

.c4p-axis-x {
    font-size: 11px;
    fill: var(--c4p-text-muted);
    text-anchor: middle;
}

.c4p-chart-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--c4p-text-muted);
    margin-top: 0.25rem;
}

.c4p-chart-legend .c4p-chart-last {
    font-weight: 700;
    color: var(--c4p-primary);
}

.c4p-chart-series {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.72rem;
    color: var(--c4p-text-muted);
    margin-top: 0.35rem;
}

.c4p-chart-series span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.c4p-chart-series .sw {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

.c4p-chart-series .sw.line,
.c4p-chart-series .sw.dash {
    height: 3px;
    border-radius: 2px;
}

/* Rejilla de gráficas: 2 por fila en escritorio, 1 en móvil. */
.charts-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 641px) {
    .charts-2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.c4p-bar-value {
    font-size: 9px;
    fill: var(--c4p-text);
    text-anchor: middle;
    font-weight: 600;
}

.c4p-bar-label {
    font-size: 9px;
    fill: var(--c4p-text-muted);
    text-anchor: middle;
}

/* --------------------------------------------------------------------------
   Pestañas de módulo dentro de la barra superior azul
   -------------------------------------------------------------------------- */
.topbar-title {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    padding-right: 1.25rem;
    margin-right: 0.25rem;
}

/* Separador cuando el título va seguido de pestañas */
.topbar-title:not(:only-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.tabs-topbar {
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    height: 100%;
    /* Con muchas pestañas, como en Review, se desplazan en vez de cortarse. */
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs-topbar::-webkit-scrollbar { display: none; }

.tabs-topbar .tab {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.tabs-topbar .tab:hover {
    color: #fff;
    text-decoration: none;
}

.tabs-topbar .tab.active {
    color: #fff;
    border-bottom-color: #fff;
}

/* En móvil el submenú NO va en la barra superior (se muestra anidado en el
   menú lateral). Ocultamos toda la zona de submenús de la barra. */
@media (max-width: 640.98px) {
    .top-row .topbar-tabs {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Menú lateral colapsable (solo escritorio)
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
    .nav-collapse-btn {
        display: inline-flex !important;
    }

    .sidebar:has(.nav-collapse-state:checked) {
        width: 64px !important;
    }

    .sidebar:has(.nav-collapse-state:checked) .nav-txt {
        display: none;
    }

    .sidebar:has(.nav-collapse-state:checked) .navbar-brand {
        display: none;
    }

    .sidebar:has(.nav-collapse-state:checked) .nav-collapse-btn {
        position: static;
        transform: none;
    }

    .sidebar:has(.nav-collapse-state:checked) .collapse-ico {
        transform: rotate(180deg);
    }

    .sidebar:has(.nav-collapse-state:checked) .nav-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sidebar:has(.nav-collapse-state:checked) .nav-link {
        justify-content: center;
    }

    .sidebar:has(.nav-collapse-state:checked) .nav-ico {
        margin-right: 0;
    }
}

/* --------------------------------------------------------------------------
   Modal reutilizable (crear / editar)
   -------------------------------------------------------------------------- */
.modal-c4p-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 30, 54, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1050;
    padding: 2.5rem 1rem;
    overflow-y: auto;
}

/* Columna con tope de alto: el encabezado se queda fijo y el cuerpo es el que
   hace scroll. Sin esto, un formulario largo se corta contra el borde. */
.modal-c4p {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: modalIn 0.12s ease-out;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 5rem);
}

@keyframes modalIn {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-c4p-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--c4p-header);
    color: #fff;
    padding: 0.8rem 1.1rem;
}

.modal-c4p-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
}

.modal-c4p-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.45rem;
    border-radius: 6px;
}

.modal-c4p-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modal-c4p-header,
.modal-c4p-footer {
    flex: 0 0 auto;
}

.modal-c4p-body {
    padding: 1.25rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.modal-c4p-footer {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--c4p-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Modal que ocupa todo el alto disponible en lugar de ajustarse a su contenido: lo pide
   una vista previa, que se lee mejor alta. El cuerpo se vuelve columna para que el
   contenido pueda estirarse; lo que scrollea es el panel de adentro, no el cuerpo. */
.modal-c4p.tall {
    height: calc(100vh - 5rem);
}

.modal-c4p.tall > .modal-c4p-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- elegir plantilla: lista a la izquierda, vista previa a la derecha ----

   Sin la retícula de Bootstrap a propósito: sus columnas reparten el ancho en
   porcentajes y aquí lo que importa es que la vista previa quepa completa. Las
   plantillas son tablas de correo de 600 px fijos, así que la lista se queda con un
   ancho fijo y la previa se lleva todo lo que sobra. Y su fila envuelve (flex-wrap:
   wrap), lo que hacía que las columnas crecieran al alto de su contenido en vez de
   ceñirse al de la fila. */

.tpl-pick {
    display: flex;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

.tpl-side {
    flex: 0 0 17rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tpl-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* Sin esto el correo de 600 px empuja la columna y se come a la lista. */
    min-width: 0;
    min-height: 0;
}

.tpl-list {
    overflow-y: auto;
    min-height: 0;
}

.tpl-preview {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #F2F2F2;
    border: 1px solid var(--c4p-border);
    border-radius: 4px;
}

/* Apilado en móvil no hay alto que repartir: la vista previa toma una medida propia. */
@media (max-width: 767.98px) {
    .modal-c4p.tall { height: auto; }
    .modal-c4p.tall > .modal-c4p-body { display: block; overflow-y: auto; }
    .tpl-pick { display: block; }
    .tpl-side { margin-bottom: 1rem; }
    .tpl-preview { height: 50vh; }
}

/* Pestañas dentro de un modal, para partir formularios largos en grupos. */
.modal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--c4p-border);
    margin-bottom: 1rem;
}

.modal-tabs button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--c4p-text-muted);
    font-size: 0.85rem;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
}

.modal-tabs button:hover {
    color: var(--c4p-primary);
}

.modal-tabs button.on {
    color: var(--c4p-primary);
    border-bottom-color: var(--c4p-primary);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Autenticación (login / registro) — layout centrado
   -------------------------------------------------------------------------- */
.auth-shell {
    min-height: 100vh;
    background: linear-gradient(160deg, #7C858C 0%, #626A71 55%, #4E555B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    /* relative + hidden sostienen la marca de agua: los ::before/::after van
       absolutos (así no entran al flex y no mueven la tarjeta) y el hidden
       evita que el texto gigante genere scroll. */
    position: relative;
    overflow: hidden;
}

/* Marca de agua "414" deliberadamente más grande que la pantalla: no se lee el
   número completo, solo se intuyen los trazos. El tamaño va en vh para que
   siempre desborde por arriba y abajo, sea cual sea la resolución, y el
   nowrap evita que el texto se parta en varias líneas al no caber. */
.auth-shell::before {
    content: "414";
    position: absolute;
    /* Centrado óptico en los dos ejes; al ser más alto y más ancho que la
       ventana, se recorta por los cuatro lados. */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Century Gothic", CenturyGothic, "Apple Gothic", "URW Gothic", "Futura", "Trebuchet MS", sans-serif;
    font-weight: 700;
    font-size: 200vh;
    line-height: 0.78;
    letter-spacing: -0.04em;
    white-space: nowrap;
    /* Más tenue que antes: a esta escala los trazos son superficies grandes y
       con más opacidad competirían con el formulario. */
    color: rgba(255, 255, 255, 0.07);
    pointer-events: none;
    user-select: none;
}

/* En móvil la tarjeta ocupa casi todo: la marca de agua solo estorba. */
@media (max-width: 640px) {
    .auth-shell::before {
        display: none;
    }
}

.auth-card {
    background: var(--c4p-surface);
    border: 1px solid var(--c4p-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 30, 54, 0.28);
    width: 100%;
    max-width: 460px;
    padding: 2.25rem 2rem;
    /* Por encima de la marca de agua. */
    position: relative;
    z-index: 1;
}

/* Marca en texto (Century Gothic) */
.brand-text {
    font-family: "Century Gothic", CenturyGothic, "Apple Gothic", "URW Gothic", "Futura", "Trebuchet MS", sans-serif;
    letter-spacing: 0.02em;
}

/* Logo blanco sobre una caja azul (para que resalte en la tarjeta blanca del login). */
.auth-logo {
    display: block;
    text-align: center;
    margin: 0 auto 1.5rem auto;
    background: var(--c4p-primary);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.auth-logo img {
    display: block;
    margin: 0 auto;
    max-width: 210px;
    width: 100%;
    height: auto;
}

.auth-card h1 {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}

.auth-card h2 {
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    color: var(--c4p-text-muted);
    margin-bottom: 1.25rem;
}

/* Validación */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ha ocurrido un error."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Sigla bajo el nombre largo de una columna, como TA o GB en la matriz de roles. */
.th-sub {
    font-weight: 400;
    opacity: 0.75;
    font-size: 0.75rem;
}

/* ---------- Pulse check ----------
   Cada pregunta es un renglón con su escala del 5 al 1 a la derecha. El radio real
   queda oculto pero sigue ahí, para que funcione el teclado y el lector de pantalla. */

.pulse-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--c4p-border);
}

.pulse-row:last-child { border-bottom: none; }

.pulse-text {
    font-size: 0.92rem;
    line-height: 1.35;
}

.pulse-num {
    display: inline-block;
    min-width: 1.6rem;
    color: var(--c4p-text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
}

.pulse-scale {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.pulse-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--c4p-border);
    border-radius: 0.35rem;
    background: var(--c4p-surface);
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
}

.pulse-opt input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.pulse-opt:hover { border-color: var(--c4p-header); }

.pulse-opt.on {
    background: var(--c4p-header);
    border-color: var(--c4p-header);
    color: #fff;
    font-weight: 600;
}

.pulse-opt input:focus-visible + * ,
.pulse-opt:focus-within {
    outline: 2px solid var(--c4p-header);
    outline-offset: 2px;
}

.pulse-opt input:disabled { cursor: default; }
.pulse-opt:has(input:disabled) { cursor: default; opacity: 0.75; }

@media (max-width: 640px) {
    .pulse-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* Tabla sin scroll: crece con su contenido. Conserva el borde y el redondeo del
   contenedor normal, pero no recorta a lo alto. Solo permite desplazarse a lo ancho,
   para que en una pantalla angosta la tabla no rompa el ancho de la página. */
.table-c4p-plain {
    width: 100%;
    border: 1px solid var(--c4p-border);
    border-radius: 8px;
    overflow-x: auto;
}

.table-c4p-plain .table-c4p {
    border: 0;
    border-radius: 0;
}

/* Sin scroll vertical el encabezado no tiene por qué fijarse. */
.table-c4p-plain .table-c4p thead th {
    position: static;
}

/* ---------- Card Q ----------
   La tabla del reporte trae dos columnas de texto largo (lo esperado del puesto
   actual y del siguiente), así que las celdas alinean arriba y el texto va más
   chico. El wrapper ya permite scroll horizontal cuando no cabe. */

.table-c4p.card-q td,
.table-c4p.card-q th {
    vertical-align: top;
    padding: 0.5rem 0.6rem;
}

.table-c4p.card-q { font-size: 0.85rem; }

/* Las expectativas son texto de referencia, no el dato principal de la fila: van
   mas chicas y en gris, y el puesto siguiente todavia mas apagado, porque es
   aspiracional. Asi el ojo cae primero en la calificacion y el comentario. */
.table-c4p.card-q .matrix-list {
    padding-left: 0.8rem;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--c4p-text-muted);
}

.table-c4p.card-q .expect-next .matrix-list {
    font-size: 0.7rem;
    opacity: 0.85;
}

.card-q-comment { font-size: 0.82rem; line-height: 1.4; }

.card-q-comment p {
    margin: 0 0 0.35rem;
}

.card-q-comment p:last-child { margin-bottom: 0; }

@media print {
    /* En papel el texto largo se aprieta para que la tabla entre en la hoja. */
    .table-c4p.card-q { font-size: 7.5pt; }
    .table-c4p.card-q .matrix-list { font-size: 7pt; padding-left: 0.8rem; }
}

/* ---------- Role Matrix: expectativas por puesto ----------
   El original era una tabla de diez columnas que obligaba a desplazarse a lo ancho.
   Aquí las cuatro categorías van en rejilla, con el peso pegado al nombre. */

.matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.matrix-cat {
    border: 1px solid var(--c4p-border);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
    background: var(--c4p-surface);
}

.matrix-cat-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 0.45rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--c4p-border);
}

.matrix-cat-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c4p-primary);
    line-height: 1.25;
}

.matrix-cat-weight {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--c4p-header);
    white-space: nowrap;
}

.matrix-list {
    margin: 0;
    padding-left: 1.05rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.matrix-list li { margin-bottom: 0.3rem; }
.matrix-list li:last-child { margin-bottom: 0; }

/* En papel cada puesto se mantiene junto en vez de partirse entre hojas. */
@media print {
    .matrix-role { break-inside: avoid; }
    .matrix-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Captura de la evaluacion: un bloque por categoria ----------
   El nombre y la calificacion comparten renglon y el comentario va debajo a todo lo
   ancho: el numero no necesita mas de 5rem y el editor si necesita ancho para que su
   barra de herramientas entre en un solo renglon. */

.cap-dim {
    border: 1px solid var(--c4p-border);
    border-radius: 8px;
    padding: 0.55rem 0.8rem 0.7rem;
    margin-bottom: 0.6rem;
    background: var(--c4p-surface);
}

.cap-dim:last-of-type { margin-bottom: 1rem; }

.cap-dim.falta { border-color: #D9A5A5; }

.cap-dim-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.4rem;
}

.cap-dim-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--c4p-primary);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

/* La calificacion es una de cinco cajitas del 1 al 5. Mismo lenguaje visual que el
   pulse check, y sin campo de texto: el 99.45% de lo capturado son enteros y las
   calificaciones ya no aceptan decimales. */
.cap-dim-score {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.score-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid var(--c4p-border);
    border-radius: 0.35rem;
    background: var(--c4p-surface);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--c4p-text);
    cursor: pointer;
    user-select: none;
}

/* El radio real sigue ahi, invisible: da el teclado y una sola parada de tabulador. */
.score-opt input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.score-opt:hover { border-color: var(--c4p-header); }

.score-opt.on {
    background: var(--c4p-header);
    border-color: var(--c4p-header);
    color: #fff;
}

.score-opt:focus-within {
    outline: 2px solid var(--c4p-secondary);
    outline-offset: 2px;
}

.score-opt:has(input:disabled) { cursor: default; opacity: 0.7; }

/* Quitar la calificacion: dejarla en blanco significa "no puedo juzgarla". */
.score-clear {
    border: none;
    background: none;
    color: var(--c4p-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.2rem;
    cursor: pointer;
}

.score-clear:hover { color: #9B2C2C; }

/* La flecha que pasa el comentario de un evaluador al comentario consolidado. */
.pasa-btn {
    border: 1px solid var(--c4p-border);
    background: #FFFFFF;
    color: var(--c4p-primary);
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    cursor: pointer;
}

.pasa-btn:hover {
    background: var(--c4p-primary);
    border-color: var(--c4p-primary);
    color: #FFFFFF;
}

/* Ya se pasó: se marca, pero sigue sirviendo por si se quiere de nuevo. */
.pasa-btn.on {
    background: #E8EDF3;
    color: var(--c4p-text-muted);
}

/* Cuando falta el comentario obligatorio, la cajita elegida lo avisa. */
.cap-dim.falta .score-opt.on {
    background: #9B2C2C;
    border-color: #9B2C2C;
}

/* El aviso conserva su lugar aunque no diga nada: si se quitara del flujo, el bloque
   se recorreria en cuanto la calificacion deja de ser 3. */
.cap-dim-flag {
    flex: 0 0 auto;
    min-width: 9.5rem;
    text-align: right;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cap-dim-flag.vacio { visibility: hidden; }

/* Estado del pie: siempre presente, para que el alto del modal no cambie. */
.cap-estado {
    font-size: 0.8rem;
    color: var(--c4p-text-muted);
    min-height: 1.2rem;
}

.cap-estado.falta { color: #9B2C2C; }

/* La barra del editor se aprieta un poco para que quepa completa en un renglon. */
.cap-dim .html-editor-bar { flex-wrap: nowrap; }

@media (max-width: 640px) {
    .cap-dim-head { flex-wrap: wrap; }
    .cap-dim .html-editor-bar { flex-wrap: wrap; }
}

/* ---------- Comentarios con editor HTML en la evaluacion ----------
   El editor no tiene modo de solo lectura, asi que un trimestre cerrado muestra el
   contenido ya formateado en una caja con el mismo aspecto que el area de edicion. */

.html-editor-readonly {
    border: 1px solid var(--c4p-border);
    border-radius: 6px;
    background: var(--c4p-row-alt);
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.45;
}

.html-editor-readonly > :last-child { margin-bottom: 0; }

/* Marca el editor cuando falta el comentario obligatorio: is-invalid de Bootstrap
   pinta un input, no un contenedor con barra de herramientas. */
.html-editor-invalid .html-editor {
    border-color: #9B2C2C;
    box-shadow: 0 0 0 0.15rem rgba(155, 44, 44, 0.15);
}

/* ---------- Rejilla de captura de calificaciones ----------
   Una fila por dimensión con su peso y su aportación, y el comentario en una fila
   pegada abajo: sin borde arriba, para que se lea como parte de la misma dimensión. */

.score-grid td,
.score-grid th {
    padding: 0.35rem 0.6rem;
    vertical-align: middle;
}

.score-grid .score-comment td {
    padding-top: 0;
    padding-bottom: 0.7rem;
    border-top: none;
}

.score-grid input[type="number"] {
    font-variant-numeric: tabular-nums;
}

.score-grid tfoot th {
    font-weight: 600;
}

/* ---------- Mapa de calor del pulse check ----------
   Los 20 pasos de 0.25 y sus colores son los del reporte anterior.

   Van con selector largo a propósito: `.table-c4p tbody td` fija el color de texto y
   `tr:hover td` y `tr:nth-child(even) td` fijan el fondo, y con menos especificidad
   se comían el color de la celda. Por eso también se repite la regla en :hover: el
   color es un dato, no un estado, y no debe moverse al pasar el ratón.

   El color de letra no se elige por rango sino por contraste real (WCAG) contra el
   fondo, que es lo que faltaba: había azules oscuros con letra negra ilegible.

   print-color-adjust obliga a la impresora a respetar el fondo. */

.table-c4p tbody tr td.heat-01,
.table-c4p tbody tr:hover td.heat-01 {
    background-color: #020D29;
    color: #fff;
}

.table-c4p tbody tr td.heat-02,
.table-c4p tbody tr:hover td.heat-02 {
    background-color: #0A183B;
    color: #fff;
}

.table-c4p tbody tr td.heat-03,
.table-c4p tbody tr:hover td.heat-03 {
    background-color: #14234E;
    color: #fff;
}

.table-c4p tbody tr td.heat-04,
.table-c4p tbody tr:hover td.heat-04 {
    background-color: #1B2D5F;
    color: #fff;
}

.table-c4p tbody tr td.heat-05,
.table-c4p tbody tr:hover td.heat-05 {
    background-color: #23385F;
    color: #fff;
}

.table-c4p tbody tr td.heat-06,
.table-c4p tbody tr:hover td.heat-06 {
    background-color: #2E4383;
    color: #fff;
}

.table-c4p tbody tr td.heat-07,
.table-c4p tbody tr:hover td.heat-07 {
    background-color: #334E95;
    color: #fff;
}

.table-c4p tbody tr td.heat-08,
.table-c4p tbody tr:hover td.heat-08 {
    background-color: #4458A7;
    color: #fff;
}

.table-c4p tbody tr td.heat-09,
.table-c4p tbody tr:hover td.heat-09 {
    background-color: #4462b8;
    color: #fff;
}

.table-c4p tbody tr td.heat-10,
.table-c4p tbody tr:hover td.heat-10 {
    background-color: #4C6FCB;
    color: #fff;
}

.table-c4p tbody tr td.heat-11,
.table-c4p tbody tr:hover td.heat-11 {
    background-color: #5573CD;
    color: #111;
}

.table-c4p tbody tr td.heat-12,
.table-c4p tbody tr:hover td.heat-12 {
    background-color: #5e7dd0;
    color: #111;
}

.table-c4p tbody tr td.heat-13,
.table-c4p tbody tr:hover td.heat-13 {
    background-color: #6f89d4;
    color: #111;
}

.table-c4p tbody tr td.heat-14,
.table-c4p tbody tr:hover td.heat-14 {
    background-color: #8196d9;
    color: #111;
}

.table-c4p tbody tr td.heat-15,
.table-c4p tbody tr:hover td.heat-15 {
    background-color: #90a3dd;
    color: #111;
}

.table-c4p tbody tr td.heat-16,
.table-c4p tbody tr:hover td.heat-16 {
    background-color: #a2b0df;
    color: #111;
}

.table-c4p tbody tr td.heat-17,
.table-c4p tbody tr:hover td.heat-17 {
    background-color: #b2bee4;
    color: #111;
}

.table-c4p tbody tr td.heat-18,
.table-c4p tbody tr:hover td.heat-18 {
    background-color: #c4cbe8;
    color: #111;
}

.table-c4p tbody tr td.heat-19,
.table-c4p tbody tr:hover td.heat-19 {
    background-color: #d5d7ec;
    color: #111;
}

.table-c4p tbody tr td.heat-20,
.table-c4p tbody tr:hover td.heat-20 {
    background-color: #e7e5f0;
    color: #111;
}

.table-c4p tbody td[class*="heat-"] {
    font-weight: 600;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* Leyenda de la escala, del 5 al 1. */
.heat-legend {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
}
.heat-legend .swatch {
    width: 1.6rem;
    height: 1rem;
    border-radius: 0.15rem;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.heat-legend .swatch.heat-01 { background-color: #020D29; }
.heat-legend .swatch.heat-02 { background-color: #0A183B; }
.heat-legend .swatch.heat-03 { background-color: #14234E; }
.heat-legend .swatch.heat-04 { background-color: #1B2D5F; }
.heat-legend .swatch.heat-05 { background-color: #23385F; }
.heat-legend .swatch.heat-06 { background-color: #2E4383; }
.heat-legend .swatch.heat-07 { background-color: #334E95; }
.heat-legend .swatch.heat-08 { background-color: #4458A7; }
.heat-legend .swatch.heat-09 { background-color: #4462b8; }
.heat-legend .swatch.heat-10 { background-color: #4C6FCB; }
.heat-legend .swatch.heat-11 { background-color: #5573CD; }
.heat-legend .swatch.heat-12 { background-color: #5e7dd0; }
.heat-legend .swatch.heat-13 { background-color: #6f89d4; }
.heat-legend .swatch.heat-14 { background-color: #8196d9; }
.heat-legend .swatch.heat-15 { background-color: #90a3dd; }
.heat-legend .swatch.heat-16 { background-color: #a2b0df; }
.heat-legend .swatch.heat-17 { background-color: #b2bee4; }
.heat-legend .swatch.heat-18 { background-color: #c4cbe8; }
.heat-legend .swatch.heat-19 { background-color: #d5d7ec; }
.heat-legend .swatch.heat-20 { background-color: #e7e5f0; }

/* ===== FileAudit ===== */

/* Sin salto de renglón: la fecha y el tipo de cliente son cortos y partirlos hace que
   cada renglón de la tabla mida el triple. */
.table-c4p td.nowrap { white-space: nowrap; }

/* La ruta se lleva el ancho que sobra y se corta con puntos suspensivos en vez de
   ensanchar la tabla; el completo está en el título. */
/* Matriz de personas por acción: muchas columnas de números angostas. Los encabezados
   van chicos y en mayúsculas para que quepan, y el total se separa con una línea. */
.table-c4p.audit-matriz th.num,
.table-c4p.audit-matriz td.num {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.table-c4p.audit-matriz thead th.num {
    font-size: 0.68rem;
    text-transform: uppercase;
    vertical-align: bottom;
    white-space: nowrap;
}

.table-c4p.audit-matriz .total {
    border-left: 1px solid var(--c4p-border);
    font-weight: 600;
}

.table-c4p.audit-matriz tfoot td {
    border-top: 1px solid var(--c4p-border);
    font-weight: 600;
}

/* El nombre del archivo se queda con lo que sobre y se corta con puntos suspensivos.
   El min-width es el piso: antes de dejarlo en tres letras, que la tabla ruede de lado. */
.table-c4p td.audit-ruta {
    max-width: 0;
    min-width: 15rem;
}

.table-c4p td.audit-ruta > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Pulse Check R: pestañas por grupo y matriz de preguntas ===== */

.pulse-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--c4p-border);
}

.pulse-tab {
    padding: 0.6rem 1.2rem;
    border: 1px solid transparent;
    border-bottom: none;
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c4p-text-muted);
    cursor: pointer;
}

.pulse-tab:hover {
    color: var(--c4p-header);
    background-color: #F6F8FA;
}

.pulse-tab.active {
    color: var(--c4p-header);
    background-color: var(--c4p-surface);
    border-color: var(--c4p-border);
    border-bottom: 1px solid var(--c4p-surface);
    margin-bottom: -1px;
}

/* El encabezado se queda a la vista al recorrer la matriz, como en el original. */
.pulse-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.pulse-matrix td:first-child { text-align: left; }

/* Renglón de bloque y global: en negritas y separados de lo anterior. */
.table-c4p.pulse-matrix tbody tr.pulse-cat td {
    font-weight: 700;
    border-top: 2px solid #C0C0C0;
}

/* El promedio del bloque va en cursiva, para no competir con las preguntas. */
.table-c4p.pulse-matrix tbody tr.pulse-avg td:first-child { font-style: italic; }

.table-c4p.pulse-matrix tbody tr.pulse-count td { font-weight: 700; }

/* Comentarios de Card Q en pantalla: fuera de la tabla, a lo ancho de la tarjeta. */
.card-q-comments {
    margin-top: 1rem;
    border-top: 1px solid var(--c4p-border);
    padding-top: 0.8rem;
}

.card-q-comments h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c4p-text-muted);
    margin-bottom: 0.6rem;
}

.card-q-comment-block {
    margin-bottom: 0.9rem;
}

.card-q-comment-block:last-child { margin-bottom: 0; }

.card-q-comment-cat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--c4p-primary);
    border-bottom: 1px solid var(--c4p-border);
    padding-bottom: 0.2rem;
    margin-bottom: 0.35rem;
}

.card-q-comment-block p {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    line-height: 1.45;
}

.card-q-comment-block p:last-child { margin-bottom: 0; }

/* ---------- Card Q: hoja impresa ----------
   Una hoja por persona y trimestre, con lo que llevaba el reporte de Crystal. Vive
   oculta en pantalla (.print-only) y solo aparece al imprimir, para que la pantalla
   pueda ser ancha y el papel compacto sin mantener dos paginas. */

.card-print { font-size: 9pt; color: #000; }

.card-print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1.5pt solid var(--c4p-primary);
    margin-bottom: 0.55rem;
}

/* Century Gothic es la tipografia de la marca. Las alternativas cubren equipos que
   no la tengan: URW Gothic en Linux, Questrial y Futura como parientes cercanos. */
.card-print-title {
    font-family: "Century Gothic", "URW Gothic", Questrial, Futura, "Trebuchet MS", sans-serif;
    font-size: 13pt;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--c4p-primary);
}

.card-print-sub {
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Encabezado en rejilla de etiqueta y valor: cuatro columnas reales, para que el
   valor no se pegue a la etiqueta cuando el texto es largo (Admin_Support). */
.card-print-meta {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 0.15rem 0.5rem;
    font-size: 8.5pt;
    align-items: baseline;
}

.card-print-meta > div {
    display: contents;
}

.card-print-meta span {
    text-transform: uppercase;
    font-size: 7pt;
    letter-spacing: 0.06em;
    color: #444;
    text-align: right;
    padding-right: 0.15rem;
}

.card-print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.55rem;
}

.card-print-table th,
.card-print-table td {
    padding: 0.2rem 0.4rem;
    border-bottom: 0.5pt solid #999;
    text-align: left;
}

.card-print-table thead th {
    border-bottom: 1pt solid #000;
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-print-table tfoot th {
    border-top: 1pt solid #000;
    border-bottom: none;
    font-weight: 700;
}

.card-print-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    width: 4.5rem;
}

.card-print h4 {
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.35rem;
    color: #000;
}

/* Los comentarios corren a una sola columna y la hoja crece a las paginas que haga
   falta: la retroalimentacion de un trimestre puede ser larga y apretarla para que
   quepa en una hoja la volvia ilegible. */
.card-print-comment { margin-bottom: 0.55rem; }

.card-print-cat {
    display: block;
    font-weight: 700;
    font-size: 8pt;
    break-after: avoid;
    color: var(--c4p-primary);
}

/* Sin pre-wrap: los parrafos ya vienen separados, y pre-wrap reproducia los
   saltos triples del origen como huecos en la hoja. */
/* Sin la presion de caber en una hoja, el comentario vuelve a un cuerpo comodo. */
.card-print-comment p {
    margin: 0.1rem 0 0.3rem;
    font-size: 8.5pt;
    line-height: 1.4;
    text-align: justify;
    hyphens: auto;
}

.card-print-history { break-inside: avoid; margin-bottom: 0.6rem; }
.card-print-comments { margin-bottom: 0.6rem; }

.card-print-avgs {
    display: flex;
    gap: 1.5rem;
    font-size: 8.5pt;
}

.card-print-avgs > span > span {
    display: block;
    text-transform: uppercase;
    font-size: 7pt;
    letter-spacing: 0.06em;
    color: #444;
}

.card-print-foot {
    margin-top: 0.6rem;
    padding-top: 0.4rem;
    border-top: 0.5pt solid #999;
    font-size: 7pt;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #333;
}

@media print {
    /* Nota: reservar espacio con padding-bottom en el contenedor NO sirve, porque ese
       relleno solo aparece al final del bloque completo, no al pie de cada hoja. El
       pie se repite en todas, asi que hay que sacarlo del area de contenido y
       bajarlo al margen inferior de la pagina; de ahi el desplazamiento negativo. */

    /* El azul de la marca en el titulo, la linea del encabezado y los titulos de
       categoria. Se fuerza el ajuste de color para que no dependa de la casilla
       de "graficos de fondo" del dialogo de impresion. */
    .card-print-title,
    .card-print-cat {
        color: var(--c4p-primary) !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .card-print-head {
        border-bottom-color: var(--c4p-primary) !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* position: fixed se repite en cada hoja impresa: asi la nota de
       confidencialidad y el nombre aparecen tambien en la segunda pagina. */
    .card-print-foot {
        position: fixed;
        /* Negativo: lo coloca dentro del margen inferior de @page, debajo del area
           donde fluye el texto, para que nunca se encimen. */
        bottom: -11mm;
        left: 0;
        right: 0;
        margin-top: 0;
        padding-top: 1.5mm;
        background: #fff;
    }
}

/* ---------- Impresión ----------
   Los reportes se imprimen desde la misma página del sistema: se esconde el
   cascarón de la aplicación y queda solo el contenido, en negro sobre blanco.
   Esto sustituye a los reportes de Crystal del sistema anterior. */

/* Texto que solo aparece en el papel, como la fecha en que se imprimió. */
.print-only { display: none; }

@media print {
    .sidebar,
    .top-row,
    .no-print,
    .btn {
        display: none !important;
    }

    .print-only { display: block; }

    /* El layout es un grid con la barra lateral; en papel no hay columnas. */
    .page { display: block; }
    article.content { padding: 0 !important; }

    body {
        background: #fff;
        color: #000;
    }

    /* Sin break-inside: avoid. Una tarjeta que mide casi una pagina no puede
       empezar a media hoja con esa regla, asi que el navegador la empuja entera a
       la siguiente y deja la primera en blanco. Lo que si conviene mantener juntos
       son los bloques chicos, y esos traen su propia regla. */
    .card-c4p {
        border: none;
        box-shadow: none;
        padding: 0;
        margin-bottom: 0.8rem;
    }

    /* Los contenedores con scroll cortarían la tabla a la altura de la pantalla. */
    .table-c4p-wrapper,
    .card-fill-table {
        overflow: visible !important;
        max-height: none !important;
        min-height: 0 !important;
        display: block !important;
    }

    .table-c4p { font-size: 9pt; }

    /* Las impresoras no imprimen fondos por omisión: el encabezado se marca con línea. */
    .table-c4p thead th,
    .table-c4p tfoot th,
    .table-c4p tfoot td {
        background: #fff !important;
        color: #000 !important;
    }
    .table-c4p thead th { border-bottom: 1.5pt solid #000; }
    .table-c4p tfoot th,
    .table-c4p tfoot td { border-top: 1pt solid #000; }

    .kpi-card { border: 1pt solid #999; }
    .badge-c4p { border: 1pt solid #999; color: #000 !important; background: #fff !important; }

    a { text-decoration: none; color: #000; }
    h1 { font-size: 16pt; }
    h3 { font-size: 12pt; }

    tr, .kpi-grid, .charts-2col > * { break-inside: avoid; }
    thead { display: table-header-group; }
}

@page {
    /* El margen inferior aloja el pie repetido, que vive fuera del area de texto. */
    margin: 12mm 12mm 18mm;
}