/* ==========================================================================
   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;
}

/* Los enlaces de menú/pestañas no se subrayan al pasar el mouse. */
.nav-link:hover, .sidebar a:hover, .dt-tab:hover, .tab:hover, .tabs-topbar .tab:hover {
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   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;
}

/* --------------------------------------------------------------------------
   PCKD — encabezado de reportes (descripción + switch de moneda)
   -------------------------------------------------------------------------- */
.pckd-rep-head .pckd-rep-desc {
    max-width: 62ch;
}

.pckd-rep-head .pckd-rep-desc h2 {
    color: var(--c4p-primary, #004882);
}

.pckd-cur {
    flex: 0 0 auto;
    min-width: 12rem;
}

.pckd-cur .btn-group .btn {
    min-width: 3.25rem;
}

/* --------------------------------------------------------------------------
   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,
    .card-fill-table > .table-responsive {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow: auto;   /* scroll vertical y horizontal dentro de la tarjeta */
    }

    .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;
}

/* Dealtrack: submenú con dropdowns (Advisory/Valuation). overflow visible para que el menú no
   se recorte (el overflow-x:auto del tabs-topbar lo cortaría). */
.tabs-topbar.dt-tabs-wrap { overflow: visible; }
.tabs-topbar .dt-dropdown { position: relative; display: flex; align-items: stretch; }
.tabs-topbar .dt-caret { font-size: .7rem; margin-left: .2rem; }
.tabs-topbar .dt-dd-menu {
    display: none;
    /* fixed (no absolute): el header tiene overflow y recortaría un menú absoluto.
       Un pequeño script (dtmenu.js) fija left/top bajo la pestaña al pasar el cursor. */
    position: fixed;
    min-width: 170px;
    background: #10233a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    padding: .25rem 0;
    z-index: 1200;
}
.tabs-topbar .dt-dropdown:hover .dt-dd-menu,
.tabs-topbar .dt-dropdown:focus-within .dt-dd-menu { display: block; }
.tabs-topbar .dt-dd-menu a {
    display: block;
    padding: .5rem .9rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: .85rem;
    white-space: nowrap;
    border-bottom: 0;
}
.tabs-topbar .dt-dd-menu a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* --------------------------------------------------------------------------
   Time Allocation — modal bloqueante (los jueves, hasta repartir 100%)
   -------------------------------------------------------------------------- */
.dt-alloc-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 25, 45, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.dt-alloc-card {
    background: #fff;
    border-radius: 12px;
    width: 560px;
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.dt-alloc-head { padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8ee; }
.dt-alloc-head h3 { color: #004882; }
.dt-alloc-body { padding: .5rem 1.25rem; overflow-y: auto; }
.dt-alloc-section {
    font-size: .72rem; font-weight: 700; color: #004882;
    text-transform: uppercase; letter-spacing: .04em;
    margin: .5rem 0 .25rem;
}
.dt-alloc-group { margin: .25rem 0 .7rem; }
.dt-alloc-grouphead {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: .9rem; font-weight: 600; color: #34495e;
    border-bottom: 1px solid #eef2f6; padding-bottom: .2rem; margin-bottom: .25rem;
}
.dt-alloc-sub { font-size: .8rem; font-weight: 700; color: #5a6b7b; }
.dt-alloc-row { display: flex; align-items: center; gap: .6rem; padding: .18rem 0 .18rem .5rem; }
.dt-alloc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.dt-alloc-pct { flex: 0 0 90px; width: 90px; }
.dt-alloc-foot { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.25rem; border-top: 1px solid #e2e8ee; }
.dt-alloc-total { font-weight: 700; }
.dt-alloc-total.ok { color: #1b7a3d; }
.dt-alloc-total.bad { color: #b3401f; }

/* Time Allocation con el acomodo del modal original de CKDS (Default.aspx):
   Advisory + Valuation lado a lado, Non-deal Activities abajo, total global. */
.dt-alloc-card.dt-ta-card { width: 1080px; }
.dt-ta-section {
    width: 100%; overflow: hidden;
    border: 1px solid #d9dee7; border-radius: 8px; background: #fff;
}
.dt-ta-head {
    padding: 11px 15px; background: #24364b; color: #fff;
    font-size: .88rem; font-weight: 700;
}
.dt-ta-body { min-height: 90px; padding: 15px; }
.dt-ta-total {
    padding: 9px 15px; border-top: 1px solid #d9dee7; background: #f4f6f9;
    color: #44566c; font-size: .78rem; text-align: right;
}
.dt-ta-total strong { color: #24364b; }
.dt-ta-empty {
    padding: 18px; border: 1px dashed #c8d0da; border-radius: 6px;
    background: #f8f9fb; color: #758294; font-size: .8rem; text-align: center;
}
.dt-ta-name {
    display: block; overflow-wrap: anywhere; color: #273444; font-size: .82rem;
}
.dt-ta-global {
    display: flex; justify-content: space-between; align-items: center; gap: 15px;
    margin-top: 18px; padding: 14px 18px; border: 1px solid #bac8d8; border-radius: 8px;
    background: #e8eef7; color: #24364b; font-size: .9rem;
}
.dt-ta-global strong { font-size: .95rem; text-align: right; }
.dt-ta-global strong.ok { color: #1b7a3d; }
.dt-ta-global strong.bad { color: #b3401f; }
@media (max-width: 767.98px) {
    .dt-ta-global { display: block; }
    .dt-ta-global strong { display: block; margin-top: 5px; text-align: left; }
}

/* Vista admin de Time Allocation (TimeAllocation.aspx): grid de tarjetas por miembro. */
.dt-tau-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch; gap: 18px; width: 100%;
}
.dt-tau-card {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    border: 1px solid #d9dee7; border-radius: 10px; background: #fff;
    box-shadow: 0 3px 12px rgba(36,54,75,.08);
}
.dt-tau-head { padding: 11px 15px; background: #24364b; color: #fff; }
.dt-tau-name { font-size: .95rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.dt-tau-sub { color: #cbd7e3; font-size: .74rem; margin-top: 2px; }
.dt-tau-meta {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 8px 15px; background: #eef2f7; border-bottom: 1px solid #e0e6ee;
    color: #52657a; font-size: .72rem; font-weight: 600;
}
.dt-tau-body { flex: 1 1 auto; padding: 10px 15px 14px; }
.dt-tau-rowhead {
    display: grid; grid-template-columns: minmax(0,1fr) 64px; gap: 8px;
    padding: 4px 0; border-bottom: 1px solid #d9dee7;
    color: #667689; font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px;
}
.dt-tau-rowhead span:last-child { text-align: right; }
.dt-tau-row {
    display: grid; grid-template-columns: minmax(0,1fr) 64px; gap: 8px;
    align-items: center; padding: 6px 0; border-bottom: 1px solid #edf0f3;
}
.dt-tau-row:last-child { border-bottom: none; }
.dt-tau-deal { min-width: 0; overflow-wrap: anywhere; color: #273444; font-size: .78rem; line-height: 1.25; }
.dt-tau-badge {
    justify-self: end; min-width: 50px; padding: 3px 7px; border-radius: 12px;
    background: #e8eef7; color: #36577c; font-size: .74rem; font-weight: 700; text-align: center;
}
.dt-tau-badge.adv { background: #e4eefb; color: #1f5fa6; }
.dt-tau-badge.val { background: #e8f3ec; color: #1b7a3d; }
.dt-tau-badge.ext { background: #f1eef7; color: #65518f; }
.dt-tau-norec { padding: 14px 4px; color: #8a97a6; font-size: .78rem; text-align: center; }
.dt-tau-empty {
    padding: 30px; border: 1px solid #d9dee7; border-radius: 8px;
    background: #fff; color: #617083; text-align: center;
}
@media (max-width: 1199.98px) { .dt-tau-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767.98px) { .dt-tau-grid { grid-template-columns: 1fr; } }

/* Desglose semanal por miembro (expandible dentro de la tarjeta). */
.dt-tau-toggle {
    width: 100%; padding: 7px 15px; border: none; border-top: 1px solid #e0e6ee;
    background: #f4f6f9; color: #36577c; font-size: .74rem; font-weight: 700; cursor: pointer;
}
.dt-tau-toggle:hover { background: #e8eef7; }
.dt-tau-weeks { padding: 4px 15px 12px; background: #fbfcfe; }
.dt-tau-wk { padding-top: 8px; }
.dt-tau-wkhead {
    display: flex; justify-content: space-between; align-items: center;
    margin: 6px 0 2px; padding: 4px 8px; border-left: 3px solid #36577c;
    background: #eef2f7; border-radius: 3px;
}
.dt-tau-wkhead span { color: #445d78; font-size: .7rem; font-weight: 700; }
.dt-tau-wkhead strong { font-size: .74rem; }
.dt-tau-wkhead strong.ok { color: #1b7a3d; }
.dt-tau-wkhead strong.bad { color: #b3401f; }

/* Pitch Ranking — tabla de ranking por miembro. */
.dt-rank-table th { color: #667689; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.dt-rank-table td { font-size: .85rem; }
.dt-rank-table .num { text-align: right; }
.dt-rank-table th.num { text-align: right; }
.dt-rank-badge {
    display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 12px;
    background: #e8eef7; color: #24364b; font-size: .78rem; font-weight: 700; text-align: center;
}

/* Autocompletar (AutoCompleteInput): lista de sugerencias bajo la caja. */
.ac-wrap { position: relative; }
.ac-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 1050;
    margin: 0; padding: 4px 0; list-style: none; background: #fff;
    border: 1px solid #ccd3dc; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    max-height: 260px; overflow-y: auto;
}
.ac-item { padding: 6px 12px; cursor: pointer; font-size: .9rem; color: #24364b; }
.ac-item strong { color: #004882; }
.ac-item.active { background: #e4eefb; }

/* Valtrack — valuación a todo lo ancho, como el Valuacion.aspx del sistema anterior. */
.vt-strip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.vt-strip-item { min-width: 150px; }
.vt-strip-item .form-select { min-width: 150px; }
.vt-strip-btn .btn { height: calc(1.5em + .5rem + 2px); white-space: nowrap; }
.vt-strip-sep { margin-left: auto; padding-left: 1rem; border-left: 1px solid #e3e8ef; }
.vt-data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.vt-data-col { display: flex; flex-direction: column; margin: 0; }
.vt-data-foot { margin-top: auto; padding-top: .6rem; display: flex; justify-content: flex-end; }
.vt-data-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem;
    font-size: .78rem; font-weight: 700; color: #002B4A; text-transform: uppercase; letter-spacing: .04em; }
.vt-panel-title { color: #002B4A; font-weight: 700; padding-bottom: .5rem; border-bottom: 2px solid #002B4A; margin-bottom: .75rem; }
/* Pasos uno por renglón: etiqueta a la izquierda y botón a la derecha. */
.vt-steps.vt-steps-v { display: block; }
.vt-steps-v .vt-step-cell { display: flex; align-items: center; justify-content: space-between;
    padding: .45rem .25rem; border-bottom: 1px solid #eef1f5; text-align: left; }
.vt-steps-v .vt-step-cell:last-child { border-bottom: 0; }
.vt-steps-v .vt-step-cell > .small { font-size: .85rem !important; color: #3a4a58 !important; font-weight: 600; }
.vt-steps-v .vt-step { min-width: 70px; padding: .3rem .6rem; font-size: .8rem; }

/* Valtrack — Report settings: tres campos y el botón en una fila, alineados al pie. */
.vt-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    gap: .5rem .75rem;
    align-items: end;
}
.vt-switch {
    display: flex; align-items: center; gap: .4rem; margin: 0; cursor: pointer;
    height: calc(1.5em + .5rem + 2px); padding: 0 .6rem;
    border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .25rem; background: #fff;
}
.vt-switch .form-check-input { float: none; margin: 0; cursor: pointer; }
.vt-switch.form-switch { padding-left: .6rem; }
.vt-settings-save .btn { height: calc(1.5em + .5rem + 2px); white-space: nowrap; }
@media (max-width: 575.98px) {
    .vt-settings-grid { grid-template-columns: 1fr 1fr; }
    .vt-settings-save { grid-column: 1 / -1; }
    .vt-settings-save .btn { width: 100%; }
}

/* CRM — Meeting Log (notas de reuniones). */
.dt-meet-row { cursor: pointer; }
.dt-meet-row:hover td { background: #f4f7fb; }
.dt-meet-table td.small.text-secondary { max-width: 420px; }
.dt-meet-priv { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: .74rem; font-weight: 700; }
.dt-meet-priv.yes { background: #fbe9e7; color: #b3401f; }
.dt-meet-priv.no { background: #e8f3ec; color: #1b7a3d; }
.dt-meet-note { border: 1px solid #e3e8ef; border-radius: 6px; padding: 14px 16px; background: #fff; }
.dt-meet-note p:last-child { margin-bottom: 0; }

/* Pitch Ranking: filas que se arrastran para reacomodar. */
.dt-rank-drag { cursor: grab; }
.dt-rank-drag:active { cursor: grabbing; }
.dt-rank-dragging td { background: #e4eefb !important; opacity: .75; }
.dt-rank-grip { color: #a0abb8; font-weight: 700; letter-spacing: -2px; margin-right: 6px; user-select: none; }
.dt-rank-arrow {
    border: 0; background: transparent; color: #004882; font-size: .7rem; padding: 0 3px; line-height: 1;
}
.dt-rank-arrow:disabled { color: #ccd3dc; }
.dt-rank-pos {
    display: inline-block; padding: 1px 8px; border-radius: 10px; background: #f0f2f5;
    color: #4a5a6c; font-size: .74rem; font-weight: 600;
}

/* CRM — buyer lists: colorear el selector de estatus. */
.dt-buyer-sel { font-weight: 600; }
.dt-buyer-sel.won { background: #e8f3ec; color: #1b7a3d; }
.dt-buyer-sel.passed { background: #fbe9e7; color: #b3401f; }
.dt-buyer-sel.adv { background: #e4eefb; color: #1f5fa6; }
.dt-buyer-sel.mid { background: #fff5e0; color: #9a6a00; }

/* Etiqueta "Shared" de los contactos (directorio de todo el equipo). */
.bl-shared {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; vertical-align: middle;
    background: #e8f3ec; color: #1b7a3d; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* CRM — Buyer Lists: embudo por etapa, prioridad, próximo paso y el panel de edición. */
.bl-funnel { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 14px;
    background: #f0f2f5; color: #4a5a6c; font-size: .78rem; cursor: pointer; border: 1px solid transparent;
}
.bl-chip b { color: #24364b; }
.bl-chip.mid { background: #fff5e0; color: #9a6a00; }
.bl-chip.adv { background: #e4eefb; color: #1f5fa6; }
.bl-chip.won { background: #e8f3ec; color: #1b7a3d; }
.bl-chip.passed { background: #fbe9e7; color: #b3401f; }
.bl-chip.on { border-color: #004882; box-shadow: 0 0 0 1px #004882 inset; }
.bl-table .dt-buyer-sel { min-width: 150px; }
.bl-prio { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .74rem; font-weight: 700; }
.bl-prio.t1 { background: #004882; color: #fff; }
.bl-prio.t2 { background: #e4eefb; color: #1f5fa6; }
.bl-prio.t3 { background: #f0f2f5; color: #4a5a6c; }
.bl-prio.hold { background: #fff5e0; color: #9a6a00; }
.bl-due { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: #f0f2f5; color: #4a5a6c; font-size: .72rem; }
.bl-due.late { background: #fbe9e7; color: #b3401f; font-weight: 700; }
.bl-modal { width: min(820px, 96vw); max-height: 92vh; overflow-y: auto; }
.bl-sec {
    margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #e3e8ef;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #004882;
}
.bl-modal .dt-tam-body > .bl-sec:first-child { margin-top: 0; }
.bl-log { list-style: none; margin: 0; padding: 0; font-size: .8rem; max-height: 200px; overflow-y: auto; }
.bl-log li { padding: 3px 0; border-bottom: 1px dashed #e3e8ef; }
.bl-com { font-size: .82rem; padding: 6px 0; border-bottom: 1px solid #eef1f5; }
.bl-com-meta { font-size: .72rem; color: #667689; margin-bottom: 2px; }

/* CRM — interacciones (bitácora). */
.dt-int-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; background: #eef2f7; color: #44566c; }
.dt-int-badge.meet { background: #e4eefb; color: #1f5fa6; }
.dt-int-badge.call { background: #e8f3ec; color: #1b7a3d; }
.dt-int-badge.mail { background: #f1eef7; color: #65518f; }
.dt-int-badge.note { background: #fff5e0; color: #9a6a00; }
.dt-int-item { padding: 8px 0; border-bottom: 1px solid #eef2f6; }
.dt-int-item:last-child { border-bottom: none; }
.dt-int-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dt-int-fecha { font-size: .74rem; font-weight: 700; color: #344454; }
.dt-int-meta { font-size: .74rem; color: #52657a; }
.dt-int-autor { margin-left: auto; font-size: .7rem; font-weight: 700; color: #36577c; }
.dt-int-asunto { font-size: .82rem; font-weight: 600; color: #273444; margin-top: 3px; }
.dt-int-notas { font-size: .78rem; color: #475666; margin-top: 2px; white-space: pre-wrap; }
.dt-int-next { font-size: .76rem; color: #1b5e34; margin-top: 3px; }
.dt-int-next strong { color: #14502b; }

/* CRM — empresas y contactos. */
.dt-firm-tipo { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: .7rem; font-weight: 700; background: #e8eef7; color: #36577c; }
.dt-firm-ref { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid #eef2f6; }
.dt-firm-ref:last-child { border-bottom: none; }
.dt-firm-ref a { font-size: .84rem; overflow-wrap: anywhere; }
.dt-firm-refmeta { flex-shrink: 0; font-size: .7rem; color: #758294; }

/* Origination Pipeline — tablero Kanban de pitches. */
.dt-pipe-kpis { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.dt-pipe-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid #d9dee7; border-radius: 10px; background: #fff; }
.dt-pipe-kn { font-size: 1.4rem; font-weight: 700; color: #24364b; line-height: 1; }
.dt-pipe-kl { font-size: .72rem; color: #667689; font-weight: 600; }
.dt-pipe-board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; align-items: start; }
.dt-pipe-col { border: 1px solid #d9dee7; border-radius: 10px; background: #f7f9fc; overflow: hidden; display: flex; flex-direction: column; }
.dt-pipe-colhead { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; color: #fff; font-size: .8rem; font-weight: 700; background: #24364b; }
.dt-pipe-colhead.act { background: #1f5fa6; }
.dt-pipe-colhead.hold { background: #9a6a00; }
.dt-pipe-colhead.won { background: #1b7a3d; }
.dt-pipe-colhead.lost { background: #b3401f; }
.dt-pipe-count { background: rgba(255,255,255,.22); border-radius: 10px; padding: 1px 8px; font-size: .74rem; }
.dt-pipe-collist { padding: 8px; display: flex; flex-direction: column; gap: 8px; max-height: 65vh; overflow-y: auto; }
.dt-pipe-empty { color: #9aa7b4; font-size: .8rem; text-align: center; padding: 10px 0; }
.dt-pipe-pitch { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e2e8ee; border-left: 3px solid #36577c; border-radius: 7px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(36,54,75,.06); }
.dt-pipe-pitch:hover { border-color: #b8c6d8; box-shadow: 0 3px 8px rgba(36,54,75,.12); }
.dt-pipe-pname { font-size: .82rem; font-weight: 700; color: #273444; overflow-wrap: anywhere; }
.dt-pipe-pcli { font-size: .74rem; color: #52657a; margin-top: 1px; }
.dt-pipe-pmeta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; }
.dt-pipe-pdiv { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #36577c; background: #e8eef7; border-radius: 10px; padding: 1px 7px; }
.dt-pipe-pteam { font-size: .68rem; color: #758294; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.dt-pipe-pdate { font-size: .66rem; color: #96a2b0; margin-top: 4px; }
@media (max-width: 991.98px) { .dt-pipe-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); } .dt-pipe-board { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 575.98px) { .dt-pipe-board { grid-template-columns: 1fr; } }

/* Time Allocation — modal del desglose semanal por miembro. */
.dt-tam-overlay {
    position: fixed; inset: 0; z-index: 2000; background: rgba(10,25,45,.55);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.dt-tam-card {
    background: #fff; border-radius: 12px; width: 560px; max-width: 100%; max-height: 85vh;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.dt-tam-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 14px 18px; background: #24364b; color: #fff;
}
.dt-tam-name { font-size: 1.05rem; font-weight: 700; }
.dt-tam-sub { color: #cbd7e3; font-size: .76rem; margin-top: 2px; }
.dt-tam-close { background: none; border: none; color: #cbd7e3; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.dt-tam-close:hover { color: #fff; }
.dt-tam-body { padding: 10px 18px 16px; overflow-y: auto; }

/* Reports — KPI tiles + barras horizontales. */
.dt-rep-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.dt-rep-kpi {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
    border: 1px solid #d9dee7; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(36,54,75,.06);
}
.dt-rep-kpin { font-size: 1.6rem; font-weight: 700; color: #24364b; line-height: 1; }
.dt-rep-kpil { font-size: .74rem; color: #667689; font-weight: 600; }
.dt-rep-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.dt-rep-card { border: 1px solid #d9dee7; border-radius: 10px; background: #fff; overflow: hidden; }
.dt-rep-head { padding: 10px 15px; background: #24364b; color: #fff; font-size: .82rem; font-weight: 700; }
.dt-rep-body { padding: 12px 15px; }
/* Encabezado de tarjeta de Reports con selector a la derecha (fecha / año), como Reports.aspx. */
.dt-rep-head-sel { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 6px; padding-bottom: 6px; }
.dt-rep-head-sel .form-select { width: auto; min-width: 7.5rem; }
.dt-rep-row { display: grid; grid-template-columns: 180px 1fr 36px; align-items: center; gap: 10px; padding: 3px 0; }
.dt-rep-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: #344454; }
.dt-rep-bar { height: 14px; background: #eef2f7; border-radius: 7px; overflow: hidden; }
.dt-rep-fill { display: block; height: 100%; background: linear-gradient(90deg,#36577c,#5b83b0); border-radius: 7px; }
.dt-rep-val { font-size: .8rem; font-weight: 700; color: #24364b; text-align: right; }
@media (max-width: 991.98px) { .dt-rep-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } .dt-rep-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .dt-rep-row { grid-template-columns: 110px 1fr 32px; } }

/* Historical Prospects — badge de estatus. */
.dt-hist-badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: .72rem; font-weight: 700; background: #eef2f7; color: #44566c; }
.dt-hist-badge.won { background: #e8f3ec; color: #1b7a3d; }
.dt-hist-badge.lost { background: #fbe9e7; color: #b3401f; }
.dt-hist-badge.cancel { background: #f1eef7; color: #65518f; }
.dt-hist-badge.hold { background: #fff5e0; color: #9a6a00; }

/* Time Allocation — detalle por deal/semana (Deal detail by week del viejo). */
.dt-tad-week { width: 100%; margin-bottom: 26px; }
.dt-tad-weekhead {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-bottom: 14px; padding: 11px 16px; border-left: 4px solid #36577c;
    border-radius: 5px; background: #e8eef7;
}
.dt-tad-weekhead span { color: #607083; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.dt-tad-weekhead strong { color: #24364b; font-size: .9rem; }
.dt-tad-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); align-items: stretch; gap: 18px; }
.dt-tad-card {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    border: 1px solid #d9dee7; border-radius: 9px; background: #fff; box-shadow: 0 3px 10px rgba(36,54,75,.08);
}
.dt-tad-head { min-height: 62px; padding: 12px 15px; background: #24364b; color: #fff; }
.dt-tad-deal { font-size: .92rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.dt-tad-dir { color: #cbd7e3; font-size: .73rem; margin-top: 3px; overflow-wrap: anywhere; }
.dt-tad-dir strong { color: #fff; }
.dt-tad-body { flex: 1 1 auto; padding: 10px 15px; }
.dt-tad-rowhead {
    display: grid; grid-template-columns: minmax(0,1fr) 56px; gap: 8px; padding: 4px 0;
    border-bottom: 1px solid #d9dee7; color: #667689; font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px;
}
.dt-tad-rowhead span:last-child { text-align: right; }
.dt-tad-row {
    display: grid; grid-template-columns: minmax(0,1fr) 56px; gap: 8px; align-items: center;
    padding: 6px 0; border-bottom: 1px solid #edf0f3;
}
.dt-tad-row:last-child { border-bottom: none; }
.dt-tad-name { min-width: 0; overflow-wrap: anywhere; color: #344454; font-size: .78rem; }
.dt-tad-pct { color: #36577c; font-size: .8rem; font-weight: 700; text-align: right; }
.dt-tad-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 15px; border-top: 1px solid #ccd6e2; background: #e8eef7; color: #445d78; font-size: .78rem;
}
.dt-tad-foot strong { color: #24364b; font-size: .9rem; }
@media (max-width: 1199.98px) { .dt-tad-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767.98px) { .dt-tad-grid { grid-template-columns: 1fr; } }

/* Banner de impersonación (admin viendo como otro usuario) */
.impersonation-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #b3401f;
    color: #fff;
    padding: .4rem 1rem;
    font-size: .88rem;
}
.impersonation-bar form { margin: 0; }
.impersonation-bar .btn-light { font-weight: 600; }

/* 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; }

/* Pulse check: comentarios anónimos por trimestre al final de la tabla de cada puesto. */
.pulse-comments { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e3e8ef; }
.pulse-comments h4 { font-size: 1rem; font-weight: 700; color: #004882; margin-bottom: .75rem; }
.pulse-comments-q { margin-bottom: 1rem; break-inside: avoid; }
.pulse-comments-qh { font-weight: 700; font-size: .85rem; margin-bottom: .35rem; }
.pulse-comments-q ul { margin: 0; padding-left: 1.2rem; }
.pulse-comments-q li { font-size: .85rem; margin-bottom: .35rem; white-space: pre-line; }

/* 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: #1f2b38; font-family: Roboto, Arial, Helvetica, sans-serif; }

/* Encabezado con el formato del reporte de campañas (CampaignReportDoc): logo a la
   izquierda, tipo de documento y fecha a la derecha, línea azul de la marca. */
.card-print-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 10px;
    border-bottom: 2.5px solid #0d3557;
    margin-bottom: 14px;
}
.card-print-logo { height: 40px; width: auto; display: block; }
.card-print-head-r { text-align: right; }
.card-print-kicker { color: #1b4f7a; font-size: 9pt; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.card-print-printed { color: #6b7884; font-size: 7.5pt; margin-top: 4px; }

.card-print-h1 { margin: 0 0 2px; font-size: 16pt; font-weight: 700; color: #0d3557; }
.card-print-subt { margin: 0 0 10px; font-size: 9pt; font-style: italic; color: #6b7884; }

/* Datos clave en renglón: etiqueta chica arriba, valor abajo. */
.card-print-meta {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid #d9e0e7;
    border-bottom: 1px solid #d9e0e7;
    margin-bottom: 14px;
}
.card-print-meta .k { display: block; font-size: 6.5pt; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #3a4a58; }
.card-print-meta .v { display: block; font-size: 10pt; font-weight: 700; margin-top: 2px; color: #1f2b38; }
.card-print-meta .v.strong { color: #0d3557; }

/* Tablas sin bordes negros: encabezado gris azulado con la línea de la marca y
   renglones separados por una línea tenue, como en el reporte de campañas. */
.card-print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.card-print-table th,
.card-print-table td {
    padding: 5px 8px;
    border: none;
    border-bottom: 0.75px solid #d9e0e7;
    text-align: left;
    vertical-align: top;
}

.card-print-table thead th {
    background: #eef3f8;
    color: #3a4a58;
    border-bottom: 1.5px solid #0d3557;
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.card-print-table tfoot th {
    border-top: 1px solid #d9e0e7;
    border-bottom: none;
    font-weight: 700;
    color: #0d3557;
}

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

.card-print-agr p { margin: 0 0 2px; }
.card-print-agr p:last-child { margin-bottom: 0; }
.card-print-agreements { margin-bottom: 0.6rem; }

.card-print h4 {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 6px;
    color: #0d3557;
}

/* 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. */
    /* Colores y fondos de la marca en el papel aunque el diálogo de impresión no
       tenga marcado "gráficos de fondo". */
    .card-print,
    .card-print * {
        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;
}

/* ===== AI Agent: chat con iconos, al estilo de los chats que ya usa la gente ===== */

.ai-wrap {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 1rem;
    align-items: start;
}

.ai-ico { width: 1rem; height: 1rem; fill: currentColor; flex: 0 0 auto; }
.ai-ico-xs { width: 0.8rem; height: 0.8rem; fill: currentColor; flex: 0 0 auto; }

/* ---- lado ---- */

.ai-side { position: sticky; top: 0; }

.ai-nuevo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.9rem;
    border: 1px solid var(--c4p-primary, #004882);
    border-radius: 0.4rem;
    background-color: var(--c4p-primary, #004882);
    color: #fff;
    font-size: 0.88rem;
    cursor: pointer;
}

.ai-nuevo:hover:not(:disabled) { background-color: var(--c4p-primary-dark, #00365F); }
.ai-nuevo:disabled { opacity: 0.55; cursor: default; }

.ai-etiqueta {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c7a89;
    margin-bottom: 0.2rem;
}

/* El icono va dentro del marco del desplegable, no al lado. */
.ai-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0.5rem;
    border: 1px solid var(--c4p-border, #dde3e8);
    border-radius: 0.4rem;
    background: #fff;
    color: #6c7a89;
}

.ai-selector select {
    border: none;
    box-shadow: none;
    background: transparent;
    padding-left: 0;
}

.ai-selector select:focus { box-shadow: none; }

.ai-nota { font-size: 0.72rem; color: #6c7a89; margin-top: 0.25rem; }

.ai-lista {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 1rem;
    max-height: calc(100vh - 20rem);
    overflow-y: auto;
}

/* Cada renglon lleva su propio boton de borrar, que solo aparece al pasar el raton:
   asi no hay una fila de botes de basura compitiendo con los titulos. */
.ai-item {
    display: flex;
    align-items: stretch;
    border: 1px solid transparent;
    border-radius: 0.35rem;
}

.ai-item:hover { background-color: rgba(2, 136, 209, 0.08); }

.ai-item.activo {
    background-color: rgba(2, 136, 209, 0.14);
    border-color: rgba(2, 136, 209, 0.35);
}

.ai-item-btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
}

.ai-item-t {
    display: block;
    font-size: 0.84rem;
    color: #22313f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-item-s { display: block; font-size: 0.7rem; color: #6c7a89; }

.ai-item-x {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0 0.45rem;
    color: #98a6b3;
    cursor: pointer;
    visibility: hidden;
}

.ai-item:hover .ai-item-x, .ai-item.activo .ai-item-x { visibility: visible; }
.ai-item-x:hover { color: #9B2C2C; }

/* ---- centro ---- */

.ai-main {
    display: flex;
    flex-direction: column;
    /* Alto fijo: la caja de escribir se queda abajo y solo rueda la conversacion. */
    height: calc(100vh - 7.5rem);
    min-height: 26rem;
    padding-top: 0.75rem;
}

.ai-cabeza {
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--c4p-border, #dde3e8);
}

.ai-cabeza-t { display: flex; align-items: center; gap: 0.6rem; }
.ai-cabeza-n { font-weight: 600; font-size: 0.95rem; }

.ai-cabeza-m {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #6c7a89;
}

.ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.7rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ai-chip.local { background-color: #E8F1E8; color: #2F6B34; }
.ai-chip.paga { background-color: #FDF3E2; color: #8A5A00; }

.ai-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
}

.ai-avatar.bot { background-color: #E8EEF4; color: var(--c4p-primary, #004882); }
.ai-avatar.yo { background-color: var(--c4p-primary, #004882); color: #fff; }
.ai-avatar.chico { width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }
.ai-avatar.grande { width: 3rem; height: 3rem; }
.ai-avatar.grande .ai-ico { width: 1.6rem; height: 1.6rem; }

.ai-turnos {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ai-vacio {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.15rem;
}

.ai-vacio-t { font-weight: 600; margin: 0.5rem 0 0; }

.ai-turno { display: flex; gap: 0.5rem; align-items: flex-start; }
.ai-turno.mio { justify-content: flex-end; }

.ai-bloque { min-width: 0; max-width: 44rem; }

.ai-burbuja {
    padding: 0.6rem 0.85rem;
    border-radius: 0.75rem;
    /* Respeta los saltos de renglon que escribio la persona o el modelo. */
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ai-turno.mio .ai-burbuja {
    background-color: var(--c4p-primary, #004882);
    color: #fff;
    border-bottom-right-radius: 0.2rem;
}

.ai-turno.suyo .ai-burbuja {
    background-color: #F5F7FA;
    border: 1px solid var(--c4p-border, #dde3e8);
    border-bottom-left-radius: 0.2rem;
}

.ai-error {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #9B2C2C;
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

/* Los botones del pie de cada respuesta aparecen al pasar el raton: en reposo la
   conversacion se lee sin adornos. */
.ai-pie {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
    opacity: 0;
    transition: opacity 0.12s;
}

.ai-turno:hover .ai-pie { opacity: 1; }

.ai-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0.1rem 0.2rem;
    font-size: 0.72rem;
    color: #6c7a89;
    cursor: pointer;
}

.ai-mini:hover { color: var(--c4p-primary, #004882); }

.ai-tokens { font-size: 0.7rem; color: #98a6b3; }

/* Los tres puntos de "esta escribiendo", mientras no llega el primer trozo. */
.ai-puntos { display: inline-flex; gap: 0.2rem; align-items: center; }

.ai-puntos i {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background-color: #98a6b3;
    animation: ai-late 1.1s infinite ease-in-out;
}

.ai-puntos i:nth-child(2) { animation-delay: 0.15s; }
.ai-puntos i:nth-child(3) { animation-delay: 0.3s; }

@keyframes ai-late {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

.ai-aviso {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background-color: #FDF3E2;
    border: 1px solid #F0DFC0;
    border-radius: 0.4rem;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    color: #8A5A00;
}

/* ---- caja de escribir ---- */

.ai-caja {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    border: 1px solid var(--c4p-border, #dde3e8);
    border-radius: 1.25rem;
    /* Simétrico: a la izquierda ahora vive el clip y a la derecha el botón de enviar, los
       dos redondos del mismo tamaño. Antes la izquierda llevaba sangría porque ahí
       empezaba el texto. */
    padding: 0.4rem;
    background: #fff;
}

.ai-caja:focus-within { border-color: var(--c4p-secondary, #0288D1); }

.ai-texto {
    flex: 1 1 auto;
    border: none;
    outline: none;
    resize: none;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    /* Crece con el texto hasta un tope, como cualquier chat. */
    max-height: 8rem;
    field-sizing: content;
}

.ai-enviar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: none;
    border-radius: 50%;
    background-color: var(--c4p-primary, #004882);
    color: #fff;
    cursor: pointer;
}

.ai-enviar:hover:not(:disabled) { background-color: var(--c4p-primary-dark, #00365F); }
.ai-enviar:disabled { background-color: #C7D0D8; cursor: default; }
.ai-enviar.parar { background-color: #9B2C2C; }

.ai-pista {
    text-align: center;
    font-size: 0.7rem;
    color: #98a6b3;
    padding-top: 0.35rem;
}

@media (max-width: 900px) {
    .ai-wrap { grid-template-columns: 1fr; }
    .ai-side { position: static; }
    .ai-lista { max-height: 14rem; }
    .ai-main { height: auto; min-height: 32rem; }
    /* En pantalla chica no hay raton: los botones del pie se quedan visibles. */
    .ai-pie { opacity: 1; }
}

/* ---- Markdown dentro de la burbuja del modelo ----
   La burbuja del usuario conserva pre-wrap (lo que escribio, tal cual). La del modelo
   viene ya como HTML, asi que el pre-wrap sobra y estorba: duplicaria los saltos de
   renglon que los parrafos ya traen. */

.ai-burbuja.md { white-space: normal; }

.ai-burbuja.md > :first-child { margin-top: 0; }
.ai-burbuja.md > :last-child { margin-bottom: 0; }

.ai-burbuja.md p { margin: 0 0 0.6rem; }

.ai-burbuja.md ul,
.ai-burbuja.md ol {
    margin: 0 0 0.6rem;
    padding-left: 1.25rem;
}

.ai-burbuja.md li { margin-bottom: 0.2rem; }

.ai-burbuja.md h1,
.ai-burbuja.md h2,
.ai-burbuja.md h3,
.ai-burbuja.md h4 {
    /* Los encabezados que devuelve un modelo no son titulos de pagina: si se dejan del
       tamano de fabrica, un "## Resumen" queda mas grande que el nombre del agente. */
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.9rem 0 0.4rem;
    color: var(--c4p-primary, #004882);
}

.ai-burbuja.md code {
    background-color: #EAEFF4;
    border-radius: 0.2rem;
    padding: 0.05rem 0.3rem;
    font-size: 0.85em;
}

.ai-burbuja.md pre {
    background-color: #EAEFF4;
    border-radius: 0.4rem;
    padding: 0.6rem 0.75rem;
    margin: 0 0 0.6rem;
    /* Un bloque de codigo largo rueda de lado en vez de estirar la burbuja. */
    overflow-x: auto;
}

.ai-burbuja.md pre code {
    background: none;
    padding: 0;
    font-size: 0.82rem;
}

.ai-burbuja.md table {
    border-collapse: collapse;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.ai-burbuja.md th,
.ai-burbuja.md td {
    border: 1px solid var(--c4p-border, #dde3e8);
    padding: 0.25rem 0.5rem;
    text-align: left;
}

.ai-burbuja.md th { background-color: #EAEFF4; font-weight: 600; }

.ai-burbuja.md blockquote {
    margin: 0 0 0.6rem;
    padding-left: 0.7rem;
    border-left: 3px solid var(--c4p-border, #dde3e8);
    color: #6c7a89;
}

.ai-burbuja.md hr {
    border: none;
    border-top: 1px solid var(--c4p-border, #dde3e8);
    margin: 0.8rem 0;
}

.ai-burbuja.md a { color: var(--c4p-secondary, #0288D1); }

/* ---- Verificación en dos pasos ----
   Las medidas salen de la pantalla equivalente de Monitor (login-verify): candado azul,
   título, una línea de ayuda y la casilla ancha con los dígitos separados. Van aquí y no
   en un <style> de la página —como en Monitor— porque el portal ya tiene sus variables
   de color y no hay razón para repetir los hexadecimales. */

.verif-candado {
    text-align: center;
    margin-bottom: 0.5rem;
    /* Las tres medidas de Monitor, tal cual. El color solo se ve en los sistemas que
       rinden el candado en un solo tono; donde es emoji de color, manda la fuente —y así
       es como se ve en Monitor. */
    font-size: 44px;
    line-height: 1;
    color: var(--c4p-primary, #004882);
}

.verif-titulo {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    margin: 0 0 0.5rem;
}

.verif-ayuda {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 1.25rem;
}

.verif .form-label {
    font-size: 0.85rem;
    color: #555;
}

/* Cuatro dígitos separados y grandes: se leen del correo de un vistazo y se ve al teclear
   cuántos faltan sin contarlos. El padding de la derecha compensa el letter-spacing, que
   deja un hueco después del último dígito y descentraría el número. */
.codigo-2p {
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: 8px;
    padding: 0.6rem 0.75rem;
    padding-right: calc(0.75rem + 8px);
}

/* ---- adjuntos del chat ----
   Un chip por archivo, tanto en la caja de escribir (con su tamaño y su tache) como
   dentro del turno ya mandado (solo nombre: el tamaño ahí ya no sirve de nada). */

.ai-adjuntar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    color: #6c7a89;
    cursor: pointer;
    /* La etiqueta envuelve al input de archivos, que está escondido: el margen inferior
       la alinea con el botón de enviar, que se pega al fondo de la caja. */
    margin-bottom: 0;
}

.ai-adjuntar:hover { background-color: #EAEFF4; color: var(--c4p-primary, #004882); }

.ai-adjuntar.off { opacity: 0.45; cursor: default; }
.ai-adjuntar.off:hover { background: none; color: #6c7a89; }

/* El input de archivos de verdad. No se puede dar estilo a uno, así que se esconde y lo
   dispara la etiqueta que lo envuelve; display:none lo dejaría fuera del clic en algunos
   navegadores, de ahí el tamaño cero en vez de ocultarlo. */
.ai-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ai-clips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ai-clips.por-mandar { margin-bottom: 0.5rem; }

/* Dentro de una burbuja, los chips van arriba del texto y separados de él. */
.ai-burbuja .ai-clips { margin-bottom: 0.4rem; }

.ai-clip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 18rem;
    background-color: #EAEFF4;
    border: 1px solid var(--c4p-border, #dde3e8);
    border-radius: 0.4rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.78rem;
    color: #45535f;
}

/* El que se cortó se marca: el chip es el único lugar donde se puede ver que el modelo
   no recibió el documento completo. */
.ai-clip.cortado {
    background-color: #FDF3E2;
    border-color: #F0DFC0;
    color: #8A5A00;
}

.ai-clip-n {
    /* El nombre largo se recorta con puntos en vez de estirar el chip. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-clip-s { color: #8a97a3; flex: 0 0 auto; }

.ai-clip-x {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    padding: 0;
    color: #8a97a3;
    cursor: pointer;
}

.ai-clip-x:hover { color: #9B2C2C; }
.ai-clip-x:disabled { color: #c7d0d8; cursor: default; }

/* Los puntitos de "leyendo el archivo" caben en el botón del clip. */
.ai-puntos.chico i { width: 0.25rem; height: 0.25rem; }

/* Los puntitos dentro del botón azul de enviar, mientras comprueba el agente. */
.ai-puntos.claro i { background-color: #fff; }

/* ---- Botón de inicio con Microsoft, en la pantalla de login ---- */

/* Separador "or" entre el login normal y el de Microsoft: una línea a cada lado. */
.login-o {
    display: flex;
    align-items: center;
    text-align: center;
    color: #98a6b3;
    font-size: 0.8rem;
    margin: 1rem 0;
}

.login-o::before,
.login-o::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--c4p-border, #dde3e8);
}

.login-o span { padding: 0 0.7rem; }

/* Botón blanco con borde, como lo pide la guía de marca de Microsoft: su logo a color
   sobre fondo claro, no reteñido al azul del portal. */
.btn-microsoft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid #8c8c8c;
    color: #3c4043;
    font-weight: 600;
}

.btn-microsoft:hover { background: #f5f5f5; border-color: #6b6b6b; color: #3c4043; }

/* ---- Camino secundario de contraseña, plegado bajo el de Microsoft ---- */

.login-otro { margin-top: 1.25rem; }

/* El "enlace" que abre el formulario. Se le quita el triangulito de details y se centra,
   para que se lea como una opción discreta y no como un encabezado. */
.login-otro > summary {
    list-style: none;
    text-align: center;
    color: var(--c4p-secondary, #0288D1);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.35rem;
    border-top: 1px solid var(--c4p-border, #dde3e8);
    padding-top: 0.9rem;
}

.login-otro > summary::-webkit-details-marker { display: none; }
.login-otro > summary::marker { content: ""; }
.login-otro > summary:hover { text-decoration: underline; }

/* Aire entre el enlace y el formulario cuando se abre. */
.login-otro-cuerpo { margin-top: 1rem; }

/* Segundo remitente de una campaña: desplegable discreto, se abre solo si ya hay uno. */
.camp-2buzon > summary {
    cursor: pointer;
    color: var(--c4p-secondary, #0288D1);
    font-size: 0.9rem;
    padding: 0.25rem 0;
    width: fit-content;
}
.camp-2buzon > summary:hover { text-decoration: underline; }

/* ---- Reporte de campaña imprimible / PDF ----
   El botón "Print / PDF" abre el diálogo del navegador; eligiendo "Guardar como PDF"
   sale el reporte en PDF. Aquí se limpia la hoja: fuera el menú, la barra y todo lo
   marcado .no-print (controles y la tabla larga de destinatarios). */

.print-only { display: none; }

@media print {
    /* Fuera el armazón de la app y lo que no va en papel. */
    .sidebar,
    .top-row,
    .no-print { display: none !important; }

    /* El contenido ocupa toda la hoja, sin recortes ni scroll. */
    .page,
    .content {
        display: block !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body { background: #ffffff !important; }

    /* Solo visible al imprimir: el encabezado que identifica la hoja. */
    .print-only { display: block !important; }

    .report-generado {
        font-size: 11px;
        color: #555;
        margin: 0 0 12px;
    }

    /* Las tarjetas no se parten a la mitad entre páginas, y sin sombra en papel. */
    .card-c4p {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #cccccc !important;
        margin-bottom: 12px !important;
    }

    /* Enlaces en negro: en papel el azul subrayado estorba y no se puede clicar. */
    .card-c4p a { color: #000000 !important; text-decoration: none !important; }

    /* La rejilla de dos columnas (tiempos / geografía) se apila para que quepa. */
    .kpi-grid { break-inside: avoid; }

    @page { margin: 1.5cm; }
}

/* Desplegable de historial de una campaña: el resumen se lee como encabezado. */
.camp-hist-sum {
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c4p-primary, #004882);
}
.camp-hist-sum:hover { text-decoration: underline; }

/* ---- Medidor de consumo de Atlas (barra lateral del chat, solo admin) ----
   Reglas del documento de Optima: normal < 70%, amarillo 70-89%, rojo desde 90% o en
   límite; gris = "sin actualizar" (llamada fallida o dato de más de 5 min). */

.atl-uso {
    margin-top: 0.9rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--c4p-border, #dde3e8);
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.75rem;
}

.atl-uso-t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--c4p-primary, #004882);
    margin-bottom: 0.5rem;
}

.atl-stale {
    font-weight: 500;
    color: #8a97a3;
    background: #eef1f4;
    border-radius: 999px;
    padding: 0 0.45rem;
}

.atl-uso-vacio { color: #8a97a3; }

.atl-cta + .atl-cta { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid #eef1f4; }

.atl-cta-t { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: baseline; margin-bottom: 0.3rem; }
.atl-cta-t span { color: #7a8894; }
.atl-edad { margin-left: auto; font-size: 0.68rem; }

.atl-fila {
    display: grid;
    grid-template-columns: 4.6rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.atl-lbl { color: #55636e; grid-row: 1 / span 2; align-self: center; }

.atl-barra {
    display: block;
    height: 0.45rem;
    border-radius: 999px;
    background: #eef1f4;
    overflow: hidden;
    align-self: end;
}

.atl-barra i { display: block; height: 100%; border-radius: 999px; background: var(--c4p-primary, #004882); }
.atl-barra i.normal { background: var(--c4p-primary, #004882); }
.atl-barra i.amarillo { background: #E0A100; }
.atl-barra i.rojo { background: #C0392B; }
.atl-barra i.gris { background: #b8c1ca; }

.atl-txt { color: #55636e; font-size: 0.7rem; }

/* Una cuenta sin actualizar se apaga entera, no solo la barra. */
.atl-cta.gris .atl-cta-t strong,
.atl-cta.gris .atl-txt { color: #9aa5af; }

/* ---- Dealtrack ---- */
.dt-row { cursor: pointer; }
.dt-row:hover td { background: #f2f6fa; }
.dt-row.dt-inactivo td { opacity: .55; }

.dt-div {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: #eef2f6;
    color: #55636e;
    white-space: nowrap;
}
.dt-div.banking { background: #E7EEF6; color: #004882; }
.dt-div.valuation { background: #E1F0E4; color: #256B33; }
.dt-div.consulting { background: #FBEEDA; color: #8A5A0B; }
.dt-div.housekeeping { background: #EDEDED; color: #6B6B6B; }

.dt-hijo {
    display: flex;
    gap: .6rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--c4p-border, #dde3e8);
    font-size: .85rem;
}
.dt-hijo:last-child { border-bottom: none; }
.dt-hijo-k { flex: 0 0 8rem; color: #8a97a3; }

/* ---- Dealtrack: submenú (como el sistema viejo) ---- */
.dt-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    border-bottom: 2px solid var(--c4p-border, #dde3e8);
    margin-bottom: 1rem;
}
.dt-tab {
    padding: .5rem .9rem;
    border-radius: 6px 6px 0 0;
    font-size: .9rem;
    font-weight: 600;
    color: #55636e;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.dt-tab:hover { background: #f2f6fa; color: var(--c4p-primary, #004882); }
.dt-tab.activo { color: var(--c4p-primary, #004882); border-bottom-color: var(--c4p-primary, #004882); }
.dt-tabs-sp { flex: 1 1 auto; }

.dt-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.dt-metric { width: 100%; }
.dt-metric .num { text-align: right; }
/* Header claro (las tarjetas del dashboard no llevan el header azul oscuro). */
.dt-metric thead th {
    background: transparent;
    color: #8a97a3;
    font-weight: 500;
    padding: .2rem .3rem;
    border-bottom: 1px solid #e2e8ee;
}
.dt-metric tbody td { padding: .2rem .3rem; }

/* Listas de deals/pitches con muchas columnas: recorta texto largo. */
.dt-list td, .dt-list th { white-space: nowrap; }
.dt-list .dt-clip { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
/* Name y Client angostos; Comments ancho y en varias líneas (hasta 4) para leer más texto. */
.dt-list .dt-clip-n { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
/* Stage progress de Banking: "n/5" con flecha (avanzó esta semana) o guion, en azul. */
.dt-stage { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: #1f2b38; }
.dt-stage-ico { color: var(--c4p-secondary); flex: 0 0 auto; }
.dt-list td.dt-com { white-space: normal; min-width: 22rem; max-width: 26rem; }
.dt-list td.dt-com > div { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }

/* Pestaña Team: la tarjeta llena el alto disponible y la tabla se estira dentro de ella
   (sin el tope de 60vh de .table-c4p-wrapper); el scroll queda dentro de la tabla. */
.dt-team-card { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 360px; }
.dt-team-card .table-c4p-wrapper { flex: 1 1 auto; max-height: none; min-height: 0; }

/* Alta/edición de deal o pitch: columna centrada y amplia, como NewDeal.aspx viejo. */
.dt-edit-wrap { max-width: 1200px; margin: 0 auto; }

/* Encabezado de la lista de deals/pitches: conteos por estatus + acciones, y abajo los
   filtros con etiqueta, en una rejilla pareja (como la fila de filtros de Deals.aspx). */
.dt-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: .5rem; margin-bottom: .75rem; }
.dt-head-estatus { display: flex; flex-wrap: wrap; gap: .35rem; }
.dt-estatus { display: inline-block; padding: .35em .65em; border-radius: .375rem; font-size: .8rem;
    font-weight: 700; line-height: 1; background: #c7c7c7; color: #000; }
.dt-estatus.active { background: #496287; color: #fff; }
.dt-estatus.standby, .dt-estatus.hold { background: #6d9bc5; color: #fff; }
.dt-estatus.closed { background: #D5E3EF; color: #000; }
.dt-estatus.won { background: #C6EFCE; color: #000; }
.dt-estatus.canceled, .dt-estatus.lost { background: #c7c7c7; color: #000; }

.dt-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .5rem .75rem; align-items: end; padding: .75rem; margin-bottom: .75rem;
    background: var(--c4p-row-alt); border: 1px solid var(--c4p-border); border-radius: 8px; }
.dt-filtro { min-width: 0; }
.dt-filtro .form-label { margin-bottom: .2rem; font-size: .75rem; font-weight: 600; color: var(--c4p-text-muted); }
.dt-filtro-busca { grid-column: span 2; }
.dt-filtro-fin { display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem;
    min-height: 31px; }
@media (max-width: 575.98px) { .dt-filtro-busca { grid-column: 1 / -1; } }

/* Discuss y Workload en la lista de deals: mismos badges que el sistema anterior
   (ClasePrincipal.vb: CrearYes/CrearNo y CrearLibre/CrearIntermedio/CrearOcupado). */
.dt-discuss, .dt-workload { display: inline-block; padding: .35em .65em; border-radius: .375rem;
    font-size: .75em; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; }
.dt-discuss.si { background: #C6EFCE; color: #000; }
.dt-discuss.no { background: #FFC7CE; color: #000; }
.dt-workload.libre { background: #D5E3EF; color: #000; }      /* 0–1 */
.dt-workload.intermedio { background: #6d9bc5; color: #fff; } /* 2–3 */
.dt-workload.ocupado { background: #496287; color: #fff; }    /* 4–5 */

/* ---- My profile (perfil del usuario, estilo Member.aspx) ---- */
.prof-avatar { position: relative; flex: 0 0 auto; width: 6rem; height: 6rem; border-radius: 10px; padding: 3px; background: #cbd5e0; }
.prof-avatar.sw0 { background: #2e9e5b; }
.prof-avatar.sw1 { background: #d9a406; }
.prof-avatar.sw2 { background: #e07b1a; }
.prof-avatar.sw3 { background: #c0392b; }
.prof-avatar.uniform { background: #004882; }
.prof-img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; background: #eef2f6; display: block; }
.prof-ini { width: 100%; height: 100%; border-radius: 8px; background: #eef2f6; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; color: #34495e; }
/* flex: 0 0 auto y aspect-ratio: dentro de una fila flexible el navegador lo angostaba y salía ovalado. */
.prof-dot { display: inline-block; flex: 0 0 auto; width: .9rem; height: .9rem; min-width: .9rem; aspect-ratio: 1; border-radius: 50%; background: #cbd5e0; }
.prof-dot.sw0 { background: #2e9e5b; }
.prof-dot.sw1 { background: #d9a406; }
.prof-dot.sw2 { background: #e07b1a; }
.prof-dot.sw3 { background: #c0392b; }
.prof-num { font-size: 1.5rem; font-weight: 700; color: #34495e; line-height: 1; }

/* ---- My profile: pestañas Advisory/Valuation/Notes + tarjetas por estatus (como Member.aspx) ---- */
.dt-prof-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #5a6b7b;
    padding: .4rem .9rem;
    font-weight: 600;
}
.dt-prof-tabs .nav-link:hover { color: #004882; text-decoration: none; }
.dt-prof-tabs .nav-link.active { color: #004882; border-bottom-color: #004882; background: none; }

.dt-prof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 900px) { .dt-prof-grid { grid-template-columns: 1fr; } }
.dt-prof-card h3 { font-size: 1rem; }
.dt-prof-scroll { max-height: 320px; overflow-y: auto; }

/* ---- Detalle de Deal/Pitch: ficha a dos columnas (ata pidió una vista más limpia) ---- */
.dt-det-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 820px) { .dt-det-grid { grid-template-columns: 1fr; } }
.dt-dl { margin: 0; }
.dt-dl > div {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid #eef2f6;
}
.dt-dl > div:last-child { border-bottom: 0; }
.dt-dl dt { margin: 0; color: #6b7a89; font-weight: 500; font-size: .82rem; }
.dt-dl dd { margin: 0; color: #263442; font-weight: 600; }
.dt-tagblock { margin-bottom: .8rem; }
.dt-tagblock:last-child { margin-bottom: 0; }
.dt-tagblock .lbl { margin-bottom: .3rem; }
.dt-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.dt-chip {
    display: inline-block;
    background: #eef3f8;
    border: 1px solid #d8e2ec;
    color: #34506b;
    border-radius: 999px;
    padding: .12rem .6rem;
    font-size: .8rem;
    font-weight: 600;
}

/* Header sólido en las tablas del perfil: el dt-metric del dashboard es transparente y aquí,
   con scroll y encabezado sticky, se veía el contenido por detrás. */
.dt-prof-card .dt-metric thead th,
.dt-detalle .dt-metric thead th {
    background: #eef2f6;
    color: #45566a;
    font-weight: 600;
    border-bottom: 1px solid #d7dee6;
}
.dt-prof-name { color: #004882; text-decoration: none; font-weight: 600; }
.dt-prof-name:hover { text-decoration: underline; }

/* Cards de My profile: encabezado con título, contador y botón de alta; cuerpo aparte. */
.dt-prof-card.card-c4p { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dt-prof-head {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .7rem 1rem; background: #f7f9fc; border-bottom: 1px solid var(--c4p-border);
}
.dt-prof-titulo { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.dt-prof-titulo h3 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--c4p-primary); }
.dt-prof-body { padding: .75rem 1rem 1rem; flex: 1 1 auto; }
/* Encabezado ordenable (Workload) de estos cards: el realce general de las tablas lo
   pinta de azul oscuro y aquí las letras son oscuras, así que se vuelven ilegibles. Aquí
   solo se aclara un poco el fondo y el texto se queda igual. */
.dt-prof-card .table-c4p thead th.sortable:hover { background: #e2e9f1; color: #45566a; }
.dt-prof-new {
    display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto;
    padding: .28rem .7rem; border-radius: 999px; border: 1px solid var(--c4p-primary);
    background: #fff; color: var(--c4p-primary); font-size: .78rem; font-weight: 600;
    text-decoration: none; white-space: nowrap; transition: background .15s, color .15s;
}
.dt-prof-new:hover { background: var(--c4p-primary); color: #fff; }

/* Discuss: Yes en verde y No en rojo con letra negra, como en la lista de Deals. En el
   propio perfil es un botón (borde, cursor y realce al pasar el mouse). */
.dt-disc {
    display: inline-block; min-width: 2.8rem; padding: .18rem .55rem; border-radius: 999px;
    border: 1px solid transparent; font-size: .74rem; font-weight: 700; line-height: 1.2;
    background: #FFC7CE; color: #000; cursor: default; text-align: center;
}
.dt-disc.on { background: #C6EFCE; color: #000; }
button.dt-disc {
    cursor: pointer; border-color: rgba(0, 0, 0, .18); box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    transition: filter .15s, box-shadow .15s;
}
button.dt-disc:hover { filter: brightness(.94); box-shadow: 0 0 0 2px rgba(0, 72, 130, .18); }
button.dt-disc:focus-visible { outline: 2px solid var(--c4p-primary); outline-offset: 1px; }

/* Personal Notes */
.dt-note-form { background: #f6f9fc; border: 1px solid #e2e8ee; border-radius: 10px; padding: .75rem; }
.dt-note-list { display: flex; flex-direction: column; gap: .6rem; }
.dt-note { border: 1px solid #e2e8ee; border-left: 3px solid #6d9bc5; border-radius: 8px; padding: .55rem .7rem; }
.dt-note-body { white-space: pre-wrap; font-size: .85rem; color: #34495e; margin-top: .2rem; }
.dt-note-actions { flex: 0 0 auto; white-space: nowrap; }
.dt-note-actions .btn { padding: .05rem .4rem; }

/* ---- calendario de asistencia (día-por-día, ancho completo, hoy al centro) ---- */
.dt-att-scroll { width: 100%; overflow-x: auto; padding-bottom: .25rem; }
.dt-att { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .72rem; }
.dt-att th, .dt-att td {
    height: 1.7rem;
    text-align: center; border: 1px solid #eff2f5; color: #8a97a3; font-weight: 500;
}
.dt-att thead th { color: #9aa7b2; font-weight: 500; }
.dt-att .dt-att-nm {
    width: 3.4rem; text-align: left; padding-left: .4rem;
    position: sticky; left: 0; background: #fff; color: #34495e; z-index: 1;
}
.dt-att th.wknd, .dt-att td.wknd { background: #f7f9fb; }
.dt-att th.fest, .dt-att td.fest { background: #e2e0e0; }
.dt-att th.hoy { background: #D5E3EF; color: #1b3a5b; font-weight: 700; }
.dt-att td.hoycol { background: #eef4fb; }
.dt-att td.v { background: #ACC6DE; }
.dt-att td.s { background: #496287; }
.dt-att-key { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; vertical-align: -2px; margin-right: 3px; border: 1px solid rgba(0,0,0,.06); }
.dt-att-key.v { background: #ACC6DE; }
.dt-att-key.s { background: #496287; }
.dt-att-key.fest { background: #e2e0e0; }

/* ---- métricas Advisory/Valuation como barras agrupadas ---- */
.dt-bar-legend { font-size: .72rem; color: #8a97a3; }
.dt-bar-legend .k { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: -1px; margin-right: 3px; }
.dt-bar-legend .k.m, .dt-chip-key.m, .dt-chipnum.m { background: #496287; }
.dt-bar-legend .k.p { background: #ACC6DE; }

.dt-barrow { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .5rem; padding: .18rem 0; }
.dt-barrow.tot { border-top: 1px solid #e2e8ee; margin-top: .2rem; padding-top: .35rem; font-weight: 600; }
.dt-barcat { font-size: .8rem; color: #4a5a68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-barrow.tot .dt-barcat { color: #2c3e50; }
.dt-bars { display: flex; flex-direction: column; gap: 3px; }
.dt-barbtn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0; cursor: pointer; width: 100%; text-align: left;
}
.dt-barbtn:disabled { cursor: default; opacity: .55; }
.dt-bar { height: 9px; border-radius: 3px; min-width: 2px; transition: width .2s; }
.dt-bar.m { background: #496287; }
.dt-bar.p { background: #ACC6DE; }
.dt-barval { font-size: .72rem; color: #607080; min-width: 1.4rem; }
.dt-barbtn:hover:not(:disabled) .dt-bar { filter: brightness(1.08); }

/* ---- Industries como chips clicables, compacto y con scroll ---- */
.dt-chip-key { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; margin-right: 3px; }
.dt-chip-key.p { background: #ACC6DE; }
.dt-ind-scroll { max-height: 300px; overflow-y: auto; }
.dt-indrow {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .2rem .1rem; border-bottom: 1px solid #f1f4f7; font-size: .82rem;
}
.dt-indcat { color: #4a5a68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-indchips { display: flex; gap: 5px; flex: 0 0 auto; }
.dt-chipnum {
    min-width: 2rem; padding: .05rem .45rem; border: none; border-radius: 6px;
    font-size: .74rem; font-weight: 600; cursor: pointer; text-align: center;
}
.dt-chipnum.p { background: #D5E3EF; color: #1b3a5b; }
.dt-chipnum.m { color: #fff; }
.dt-chipnum:disabled { background: #eef2f6; color: #aab4bd; cursor: default; }

/* Panel de drill-down inline (fuera de tabla). */
.dt-drill-inline { background: #f6f9fc; border-radius: 6px; padding: .4rem .5rem; margin: .1rem 0 .3rem; }
.dt-metric tr.dt-total td { font-weight: 700; border-top: 2px solid #dbe2e9; }

/* Números clicables (drill-down) */
.dt-num {
    background: none; border: none; padding: 0;
    color: #1f6fb2; font: inherit; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.dt-num:hover:not(:disabled) { color: #14507f; }
.dt-num:disabled { color: #9aa7b2; text-decoration: none; cursor: default; }

.dt-drill td { background: #f6f9fc; padding: .5rem .7rem; }
.dt-drill-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.dt-drill-item {
    display: inline-block;
    padding: .2rem .55rem;
    border: 1px solid #dbe6f0;
    border-radius: 6px;
    background: #fff;
    font-size: .82rem;
    text-decoration: none;
    color: #2c3e50;
}
.dt-drill-item:hover { background: #eef4fb; }

/* ---- tarjetas de workload del equipo (mosaico vertical) ---- */
.dt-wl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}

.dt-wl-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .15rem;
    padding: .9rem .6rem 1rem;
    border: 1px solid #e2e8ee;
    border-top: 3px solid #cbd5e0;
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .12s ease, transform .12s ease;
}

/* La tarjeta es un enlace al perfil del miembro: afinación de hover, sin subrayado. */
a.dt-wl-tile:hover {
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 14px rgba(0, 54, 95, 0.12);
    transform: translateY(-1px);
}

/* Orilla del card según el nivel de carga (mismos colores azules del badge del Dealtrack viejo). */
.dt-wl-tile.lvl-free { border-color: #D5E3EF; border-top-color: #6d9bc5; }
.dt-wl-tile.lvl-medium { border-color: #6d9bc5; border-top-color: #6d9bc5; }
.dt-wl-tile.lvl-busy { border-color: #496287; border-top-color: #496287; }
/* Sin colores de estado (quien no es Administrator): el mismo azul para todos. */
.dt-wl-tile.lvl-uniform { border-color: #6d9bc5; border-top-color: #6d9bc5; }

.dt-wl-avatar { position: relative; flex: 0 0 auto; width: 5.2rem; height: 5.2rem; margin-bottom: .4rem; }

.dt-wl-img {
    width: 5.2rem; height: 5.2rem;
    border-radius: 8px;
    object-fit: cover;
    background: #eef2f6;
}

.dt-wl-ini {
    width: 5.2rem; height: 5.2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: #eef2f6;
    font-weight: 700; font-size: 1rem; color: #34495e;
}

/* Dot de self-workload sobre la foto. */
.dt-wl-dot {
    position: absolute; right: 0; bottom: 0;
    width: .9rem; height: .9rem; min-width: .9rem; aspect-ratio: 1; box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #cbd5e0;
}
.sw0 .dt-wl-dot { background: #2e9e5b; }
.sw1 .dt-wl-dot { background: #d9a406; }
.sw2 .dt-wl-dot { background: #e07b1a; }
.sw3 .dt-wl-dot { background: #c0392b; }

.dt-wl-body { min-width: 0; flex: 1; }
.dt-wl-name { font-weight: 600; font-size: .72rem; line-height: 1.15; }
.dt-wl-title { font-size: .72rem; color: #8a97a3; margin-bottom: .2rem; }
.dt-wl-nums { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .72rem; color: #607080; }

.dt-wl-badge {
    display: inline-block;
    margin-top: .1rem;
    padding: .08rem .45rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .68rem;
    line-height: 1.4;
    background: #eef2f6; color: #34495e;
}
/* Colores exactos del Dealtrack viejo (escala azul corporativa). */
.dt-wl-badge.free { background: #D5E3EF; color: #1b3a5b; }
.dt-wl-badge.medium { background: #6d9bc5; color: #ffffff; }
.dt-wl-badge.busy { background: #496287; color: #ffffff; }
.dt-wl-badge.uniform { background: #6d9bc5; color: #ffffff; }

/* ---- administración de ítems (colecciones hijas) ---- */
.dt-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.dt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    min-height: 1.5rem;
}

.dt-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: #eef2f6;
    border: 1px solid #dbe2e9;
    font-size: .85rem;
    line-height: 1.2;
}

.dt-chip.hist {
    background: #f6f1e9;
    border-color: #e6dcc8;
    color: #7a6a4a;
}

.dt-chip .dt-x {
    border: none;
    background: transparent;
    color: #94a3b0;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .1rem;
    cursor: pointer;
}

.dt-chip .dt-x:hover { color: #c0392b; }

/* Tarjetas Team / Types / Industries: título con contador en pastilla, chips arriba y la
   fila de "agregar" compacta al pie (select y botón unidos en un input-group). */
.dt-item-card { display: flex; flex-direction: column; }
.dt-item-title { display: flex; align-items: center; gap: .5rem; }
.dt-item-count { display: inline-block; min-width: 1.6rem; padding: .1rem .45rem; border-radius: 999px;
    background: #D5E3EF; color: #1b3a5b; font-size: .75rem; font-weight: 700; text-align: center; }
.dt-item-card .dt-chips { flex: 1 1 auto; align-content: flex-start; }
.dt-item-add { margin-top: .9rem; padding-top: .75rem; border-top: 1px dashed var(--c4p-border); }
.dt-item-add .input-group { max-width: 320px; }
.dt-item-add .btn { flex: 0 0 auto; padding-left: .7rem; padding-right: .7rem; }

/* Comentarios del deal: caja amplia al capturar y saltos de línea respetados al mostrar. */
.dt-com-texto { min-height: 120px; resize: vertical; }
.dt-com-celda { white-space: pre-line; }

/* Comments (ancha) + imagen de Credentials (angosta) lado a lado; en pantalla chica se apilan. */
.dt-com-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; align-items: start; }
.dt-com-grid > .card-c4p { margin-top: 0; }
.dt-img-card .dt-deal-img, .dt-img-card .dt-deal-img-empty { width: 100%; height: 180px; }
@media (max-width: 767.98px) { .dt-com-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   REFUNDS — diseno portado del sistema anterior (CKDS Reembolsos).
   Paleta azul #6783ad / #526f99, tarjetas con sombra, grid con cabecera
   mayuscula y filas zebra, badges tipo pildora, preview de archivos.
   ========================================================================== */

.refund-section-title { font-size: 1.2rem; font-weight: 600; color: #343a40; margin-bottom: .75rem; }

/* ---- Tarjetas (form, upload, grid) ---- */
.refund-upload-card,
.refund-form-card {
    width: 100%;
    padding: 22px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #e2e6ea;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.refund-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8ebee;
}

.refund-section-header h4 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: #343a40; }
.refund-section-header p { margin: 0; font-size: 12px; color: #6c757d; }

/* ---- Formulario ---- */
.refund-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.refund-field { min-width: 0; }
.refund-field-full { grid-column: 1 / -1; }
.refund-field .form-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #495057; }

.refund-field .form-control,
.refund-field .form-select {
    width: 100%; min-height: 38px; font-size: 13px;
    border: 1px solid #ced4da; border-radius: 6px; box-shadow: none;
}
.refund-field .form-control:focus,
.refund-field .form-select:focus {
    border-color: #6783ad; box-shadow: 0 0 0 3px rgba(103, 131, 173, 0.15);
}

.refund-amount-row { display: flex; align-items: stretch; gap: 10px; width: 100%; }
.refund-amount-input { flex: 1 1 auto; min-width: 0; }
.refund-currency-input { flex: 0 0 110px; }
textarea.refund-editor { height: 120px; resize: vertical; }

/* ---- Toolbar (filtros + boton) ---- */
.refund-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
    padding: 16px 18px; background-color: #ffffff;
    border: 1px solid #e5e8eb; border-bottom: 0;
    border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.refund-toolbar .form-label { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #495057; }
.refund-toolbar .form-select,
.refund-toolbar .form-control { min-height: 38px; font-size: 13px; border-radius: 6px; }
.refund-toolbar-spacer { margin-left: auto; }

/* ---- Grid ---- */
.refund-grid-wrapper {
    width: 100%; overflow-x: auto; background-color: #ffffff;
    border: 1px solid #e1e5e9; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    scrollbar-width: thin; scrollbar-color: #b7c0cb transparent;
}
.refund-grid-wrapper.has-toolbar { border-top-left-radius: 0; border-top-right-radius: 0; }
.refund-grid-wrapper::-webkit-scrollbar { height: 8px; }
.refund-grid-wrapper::-webkit-scrollbar-thumb { background-color: #b7c0cb; border-radius: 10px; }

.refund-grid {
    width: 100%; margin: 0; border-collapse: separate; border-spacing: 0;
    color: #343a40; background-color: #ffffff;
}
.refund-grid thead th {
    padding: 13px 14px; font-size: 11px; font-weight: 700; line-height: 1.25;
    color: #526f99; text-align: left; text-transform: uppercase; letter-spacing: 0.035em;
    white-space: nowrap; vertical-align: middle; background-color: #f3f6f9;
    border: 0; border-bottom: 1px solid #dce2e8;
}
.refund-grid tbody td {
    padding: 13px 14px; font-size: 12px; line-height: 1.4; color: #3f454b;
    vertical-align: middle; background-color: #ffffff; border: 0; border-bottom: 1px solid #edf0f2;
}
.refund-grid tbody tr:nth-child(even) td { background-color: #fafbfc; }
.refund-grid tbody tr { transition: background-color 0.18s ease; }
.refund-grid tbody tr:hover td { background-color: #f1f5f9; }
.refund-grid tbody tr:last-child td { border-bottom: 0; }

.refund-cell-number, .refund-header-number { text-align: right !important; white-space: nowrap; }
.refund-cell-tax, .refund-header-tax { text-align: center !important; white-space: nowrap; }
.refund-cell-date { white-space: nowrap; }
.refund-cell-vendor { min-width: 170px; max-width: 250px; font-weight: 600; color: #3d506c !important; word-break: break-word; }
.refund-cell-category { min-width: 130px; max-width: 180px; word-break: break-word; }
.refund-cell-status { min-width: 120px; white-space: nowrap; }
.refund-cell-comment { min-width: 180px; max-width: 280px; white-space: normal; word-break: break-word; color: #6c757d; }
.refund-cell-files { min-width: 145px; }

.refund-grid-empty {
    padding: 45px 20px !important; font-size: 13px !important; font-weight: 600;
    color: #7a838c !important; text-align: center !important; background-color: #ffffff !important;
}

/* ---- Badges (pildora) ---- */
.refund-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 25px; padding: 5px 11px; font-size: 10px; font-weight: 700;
    line-height: 1; white-space: nowrap; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em;
}
.refund-badge-approved { color: #2e7d52; background-color: #e6f4ec; }
.refund-badge-standby  { color: #8a6d3b; background-color: #fcf3e2; }
.refund-badge-denied   { color: #a33b3b; background-color: #fde8e8; }
.refund-badge-paid     { color: #456486; background-color: #eaf1f8; }
.refund-badge-reviewed { color: #526f99; background-color: #eef2f7; }

/* ---- Revisión del admin, como el sistema anterior (AdminPanel / Refundreview / Ch-Cl review) ---- */
.rf-page-head { margin-bottom: 12px; }
.rf-page-head h1 { margin: 0 0 2px; font-size: 18px; font-weight: 700; color: #34445c; }
.rf-page-head p { margin: 0; font-size: 12px; color: #7b858f; }
.rf-back { margin-bottom: 10px; font-size: 12px; }
.rf-back a { color: #526f99; text-decoration: none; font-weight: 600; }
.rf-btn-primary, .rf-btn-dark { color: #fff; background-color: #6783ad; border-color: #6783ad; font-size: 13px; font-weight: 600; }
.rf-btn-dark { background-color: #526f99; border-color: #526f99; }
.rf-btn-primary:hover, .rf-btn-dark:hover { color: #fff; background-color: #526f99; border-color: #526f99; }
.rf-pencil { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px;
    color: #6783ad; border: 1px solid #6783ad; border-radius: 6px; text-decoration: none; }
.rf-pencil:hover { color: #fff; background-color: #6783ad; }

.rf-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 10px; font-size: 10px;
    font-weight: 700; line-height: 1; white-space: nowrap; border-radius: 20px; }
.rf-libre { background-color: #D5E3EF; color: #000; }
.rf-yes { background-color: #C6EFCE; color: #000; }
.rf-no { background-color: #FFC7CE; color: #000; }
.rf-ocupado { background-color: #496287; color: #fff; }
.rf-intermedio { background-color: #6d9bc5; color: #fff; }

.rf-card { background: #fff; border: 1px solid #e1e5e9; border-radius: 12px; box-shadow: 0 3px 12px rgba(0,0,0,.05);
    padding: 18px 20px; margin-bottom: 18px; }
.rf-card-head { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e8ebee; }
.rf-card-head h2 { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: #34445c; }
.rf-card-head p { margin: 0; font-size: 11px; color: #7b858f; }
.rf-card-foot { margin: 16px -20px -18px; padding: 12px 20px; background: #fafbfc; border-top: 1px solid #e8ebee;
    border-radius: 0 0 12px 12px; display: flex; justify-content: flex-end; }
.rf-hint { margin-top: 4px; font-size: 11px; color: #7b858f; }

.rf-review-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; max-width: 1700px; align-items: start; }
.rf-sticky { position: sticky; top: 10px; }
.rf-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.rf-detail { min-width: 0; font-size: 13px; color: #343a40; word-break: break-word; }
.rf-detail-full { grid-column: 1 / -1; }
.rf-detail-label { margin-bottom: 3px; font-size: 10px; font-weight: 700; color: #6b7888; text-transform: uppercase; letter-spacing: .04em; }
.rf-html { padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.rf-html p:last-child { margin-bottom: 0; }
.rf-pre { white-space: pre-wrap; }

.rf-docs-items { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.rf-docs-label { width: 100%; font-size: 11px; font-weight: 700; color: #6b7888; text-transform: uppercase; letter-spacing: .04em; }
.rf-docs .file-view-button.active { color: #fff; background-color: #6783ad; }
.rf-docs-lista .rf-docs-items { flex-direction: column; align-items: stretch; }
.rf-doc-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; text-align: left;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 12px; color: #34445c; }
.rf-doc-item:hover { background: #f8fafc; }
.rf-doc-item.active { background: #eaf0f6; border-color: #9fb1c6; }
.rf-doc-ico { flex: 0 0 auto; padding: 2px 5px; font-size: 9px; font-weight: 700; color: #526f99; background: #eef2f7; border-radius: 4px; }
.rf-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.rf-docs-empty, .rf-preview-msg { padding: 24px 12px; font-size: 13px; color: #7a838c; text-align: center; }
.rf-preview { border: 1px solid #dbe3ec; border-radius: 8px; overflow: hidden; }
.rf-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
    background: #f8fafc; border-bottom: 1px solid #dbe3ec; }
.rf-preview-name { font-size: 12px; font-weight: 600; color: #34445c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-preview-body { min-height: 548px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; }
.rf-preview-body iframe { width: 100%; height: 700px; border: 0; background: #fff; }
.rf-preview-body img { max-width: 100%; max-height: 700px; }

.rf-tx-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; padding: 12px 14px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 16px; }
.rf-tx-section { min-width: 0; margin-bottom: 16px; }
.rf-tx-section-head { padding: 8px 12px; margin-bottom: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.rf-tx-section-head h3 { margin: 0; font-size: 13px; font-weight: 700; color: #34445c; }
.rf-tx-section-head p { margin: 2px 0 0; font-size: 11px; color: #7b858f; }
.rf-tx-submitted { display: grid; grid-template-columns: .4fr 1.6fr; gap: 12px 18px; padding: 0 4px; }
.rf-tx-content { display: grid; grid-template-columns: 2fr minmax(320px, 1fr); gap: 18px; align-items: start; }
.rf-tx-review { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 1200px) {
    .rf-tx-content, .rf-tx-summary, .rf-tx-submitted { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
    .rf-review-grid, .rf-detail-grid { grid-template-columns: 1fr; }
    .rf-sticky { position: static; }
}

/* ---- Botones de archivo (pildora outline azul) ---- */
.files-buttons-container { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.file-view-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-width: 78px; height: 30px; padding: 5px 10px;
    color: #526f99; background-color: #ffffff; border: 1px solid #6783ad; border-radius: 6px;
    font-size: 11px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.file-view-button:hover, .file-view-button:focus { color: #ffffff; background-color: #6783ad; border-color: #6783ad; text-decoration: none; }
.file-view-button.remove { color: #b44141; border-color: #c75b5b; }
.file-view-button.remove:hover { color: #ffffff; background-color: #c75b5b; border-color: #c75b5b; }

/* ---- Preview de archivos seleccionados ---- */
.preview-container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; width: 100%; }
.preview-item {
    display: flex; flex-direction: column; width: 160px; padding: 10px;
    font-size: 12px; text-align: center; background-color: #ffffff;
    border: 1px solid #dddddd; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.preview-icon {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 70px;
    margin-bottom: 8px; font-size: 28px; color: #6783ad; background-color: #f4f6f8; border-radius: 6px;
}
.preview-name { min-height: 32px; margin-bottom: 4px; font-weight: 600; color: #343a40; word-break: break-word; }
.preview-size { margin-bottom: 8px; color: #6c757d; }

/* ---- Estado de lectura del XML (CFDI) ---- */
.xml-status { width: 100%; margin-top: 12px; padding: 10px 12px; font-size: 12px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; border-radius: 6px; }
.xml-status-success { color: #456486; background-color: #f0f4f8; border-color: #9cacc1; }
.xml-status-error { color: #a33b3b; background-color: #fff4f4; border-color: #d99a9a; }

/* ---- Modal New Refund (reusa overlay dt-tam) ---- */
.refund-modal-card { width: min(980px, 94vw); max-height: 92vh; overflow-y: auto; }
.refund-modal-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: start; }
@media (max-width: 991.98px) {
    .refund-form-grid { grid-template-columns: 1fr; }
    .refund-modal-grid { grid-template-columns: 1fr; }
    .refund-amount-row { flex-direction: column; }
    .refund-currency-input { flex: 1 1 auto; width: 100%; }
}

/* Imagen del deal (Credentials / edición) */
.dt-deal-img { width: 160px; height: 160px; object-fit: contain; background: #fff; border: 1px solid var(--c4p-border); border-radius: 8px; }
.dt-deal-img-empty { width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; color: var(--c4p-text-muted); font-size: .85rem; background: #fff; border: 1px dashed var(--c4p-border); border-radius: 8px; }
.dt-cred-thumb { width: 56px; height: 40px; object-fit: contain; background: #fff; border: 1px solid var(--c4p-border); border-radius: 4px; }
.dt-cred-missing { color: #c0392b; font-weight: 600; font-size: .75rem; }
.dt-cred-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dt-cred-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; text-decoration: none; color: var(--c4p-text); background: #fff; border: 1px solid var(--c4p-border); border-radius: 8px; }
.dt-cred-tile:hover { border-color: #6783AD; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.dt-cred-tile img { width: 100%; height: 100px; object-fit: contain; }
.dt-cred-tile span { font-size: .78rem; text-align: center; font-weight: 600; word-break: break-word; }

/* Reportes históricos de Dealtrack */
.dt-rep-bar:has(.dt-rep-fill2) { display: flex; }
.dt-rep-bar .dt-rep-fill { border-radius: 0; }
.dt-rep-fill2 { background: linear-gradient(90deg,#6D9BC5,#8DB8DF); }
.dt-rep-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: #36577c; vertical-align: middle; }
.dt-rep-key.dt-rep-key2 { background: #6D9BC5; }
.dt-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dt-sortable:hover { text-decoration: underline; }

/* ---- Valtrack: selector de instrumentos para abrir un periodo ---- */
.vt-instr-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .15rem .75rem; max-height: 320px; overflow: auto; border: 1px solid var(--c4p-border, #dee2e6); border-radius: .5rem; padding: .6rem; }
.vt-instr-item { display: flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; }

/* ---- Valtrack: rejilla de valuaciones y botones del flujo ---- */
.vt-grid td, .vt-grid th { vertical-align: middle; }
.vt-c { text-align: center; }
.vt-band { background: rgba(0, 72, 130, .04); }
.vt-step { min-width: 2.6rem; padding: .15rem .45rem; font-size: .75rem; line-height: 1.2; border: 1px solid var(--c4p-border, #ced4da); background: transparent; color: var(--bs-secondary-color, #6c757d); border-radius: .4rem; cursor: pointer; }
.vt-step:hover:not(:disabled) { border-color: #004882; color: #004882; }
.vt-step.on { background: #004882; border-color: #004882; color: #fff; font-weight: 600; }
.vt-step:disabled { opacity: .55; cursor: not-allowed; }
.vt-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .6rem; }
.vt-step-cell { text-align: center; }
.vt-mailbox { border: 1px solid var(--c4p-border, #dee2e6); border-radius: .5rem; padding: .6rem; }

/* ---- Valtrack: dashboard (réplica del Default.aspx viejo) ---- */
.vt-dash-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .vt-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt-kpi { background: var(--bs-body-bg, #fff); border: 1px solid var(--c4p-border, #e3e6ee); border-left: .25rem solid #4e73df; border-radius: .5rem; padding: .7rem .9rem; }
.vt-kpi-primary { border-left-color: #4e73df; } .vt-kpi-danger { border-left-color: #e74a3b; }
.vt-kpi-info { border-left-color: #36b9cc; } .vt-kpi-warning { border-left-color: #f6c23e; }
/* Non-extensions y Extensions: el azul más fuerte de la paleta, el de la barra superior. */
.vt-kpi-navy { border-left-color: #002B4A; }
.vt-kpi-navy .vt-kpi-t { color: #002B4A; }
.vt-bar-navy { background-color: #002B4A !important; }
/* Equity Research: marcas Lead / Rev A / Rev B con el azul de la barra superior. */
.vt-eq-btn { min-width: 50px; font-weight: 600; border: 1px solid #002B4A; }
.vt-eq-btn.on { background: #002B4A; color: #fff; }
.vt-eq-btn.na { background: #fff; color: #002B4A; }
.vt-eq-btn:not(:disabled):hover { background: #00365F; border-color: #00365F; color: #fff; }
.vt-eq-btn:disabled { opacity: 1; }
.vt-eq-btn.na:disabled { color: #8a97a6; border-color: #cfd6de; }
.vt-kpi-t { font-size: .72rem; font-weight: 700; color: #4e73df; letter-spacing: .03em; margin-bottom: .3rem; }
.vt-kpi-danger .vt-kpi-t { color: #e74a3b; } .vt-kpi-info .vt-kpi-t { color: #36b9cc; }
.vt-kpi-v { font-size: 1.15rem; font-weight: 700; }
.vt-kpi-big { font-size: 1.5rem; font-weight: 700; }
.vt-pend { background: #f2f2f2; border-radius: .3rem; padding: .15rem .5rem; font-size: .7rem; display: flex; justify-content: space-between; gap: .5rem; color: #555; }
.vt-tiles { display: flex; flex-wrap: wrap; }
.vt-tile { width: 90px; margin: 3px; padding: 4px 2px; font-size: x-small; font-weight: bold; text-align: center; border-radius: .25rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-t-prorroga { background: #D5E3EF; color: #000; } .vt-t-enviado { background: #496287; color: #fff; }
.vt-t-autorizado { background: #6d9bc5; color: #000; } .vt-t-revisado { background: #909090; color: #000; }
.vt-t-hecho { background: #c7c7c7; color: #000; } .vt-t-pendiente { background: whitesmoke; color: silver; }
.vt-t-periodicity { background: #B0BED4; color: #000; }
.vt-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; border: 1px solid #ddd; }
.vt-donut { width: 190px; height: 190px; flex: none; }
.vt-legend { font-size: .9rem; display: grid; gap: .25rem; }
.vt-metric { display: grid; grid-template-columns: 3.6rem 1fr 6.6rem; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .8rem; }
.vt-metric-bar { position: relative; height: 1rem; background: #eaecf4; border-radius: .2rem; }
.vt-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #17a2b8; border-radius: .2rem; }
.vt-marker { position: absolute; left: 0; top: 0; bottom: 0; border-right: 2.5px dotted #909090; z-index: 2; }
.vt-meta { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #e74a3b; z-index: 3; }
.vt-metric-r { text-align: right; white-space: nowrap; }
.vt-lead { display: block; border: 1px solid whitesmoke; border-radius: .4rem; padding: .5rem; color: inherit; text-decoration: none; }
.vt-lead:hover { background: rgba(0, 72, 130, .04); }
.vt-bars { width: 100%; height: auto; }

/* ======================================================================
   Pantalla de login — diseño copiado de projects.414red.com/login
   (Real Estate Tracker). Los iconos Font Awesome se cambiaron por SVG.
   ====================================================================== */
.login-layout { min-height: 100vh; }
.legacy-login-page { background: radial-gradient(circle at 20% 10%, rgb(137, 153, 168) 0px, transparent 35%), linear-gradient(135deg, rgb(89, 105, 121) 0px, rgb(139, 148, 156) 48%, rgb(89, 103, 117) 100%); min-height: 100vh; position: relative; overflow: hidden; }
.legacy-login-page::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 40%), repeating-linear-gradient(90deg, transparent 0px, transparent 79px, rgba(255, 255, 255, 0.024) 80px); }
.login-background-mark { position: absolute; right: -25px; bottom: -120px; color: rgba(255, 255, 255, 0.043); font-size: 380px; font-weight: 700; line-height: 1; letter-spacing: -35px; user-select: none; }
.legacy-login-panel { background: rgb(0, 37, 69); color: rgb(255, 255, 255); width: min(820px, 100% - 40px); min-height: 430px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); border-radius: 22px; display: grid; grid-template-columns: 42% 58%; overflow: hidden; box-shadow: rgba(0, 19, 36, 0.38) 0px 28px 65px; border: 1px solid rgba(255, 255, 255, 0.13); }
.legacy-login-logo { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px; background: linear-gradient(145deg, rgb(0, 37, 69), rgb(7, 56, 95)); position: relative; }
.legacy-login-logo::after { content: ""; position: absolute; right: 0px; top: 12%; height: 76%; width: 1px; background: rgba(255, 255, 255, 0.15); }
.legacy-login-logo img { width: 100%; max-width: 235px; }
.legacy-login-logo p { margin: 28px 0px 0px; text-transform: uppercase; letter-spacing: 2.5px; font-size: 0.7rem; color: rgb(191, 208, 223); }
.legacy-login-form { padding: 55px 62px; color: rgb(255, 255, 255); font-size: 0.84rem; display: flex; align-items: center; }
.legacy-login-native-form { width: 100%; }
.login-kicker { display: block; color: rgb(169, 190, 208); text-transform: uppercase; letter-spacing: 1.8px; font-size: 0.66rem; font-weight: 600; margin-bottom: 4px; }
.login-title { display: block; font-size: 1.75rem; font-weight: 600; margin-bottom: 25px; }
.login-input-wrap { position: relative; margin-bottom: 18px; }
.login-input-wrap > .login-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 2; color: rgb(111, 131, 148); }
.login-control { width: 100%; max-width: none; height: 44px; margin: 0px; padding-left: 41px; border: 1px solid transparent; border-radius: 8px; color: rgb(23, 41, 56) !important; background: rgb(248, 250, 252) !important; font-size: 0.9rem !important; }
.login-control:focus { border-color: rgb(142, 172, 195); box-shadow: rgba(142, 172, 195, 0.2) 0px 0px 0px 3px; }
.login-button { width: 100%; height: 44px; margin-top: 5px; border-radius: 8px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0px !important; background: rgb(103, 131, 173) !important; font-size: 0.87rem !important; color: #fff; }
.login-button:hover { background: rgb(118, 145, 183) !important; }
.legacy-login-footer { color: rgb(238, 244, 248); text-align: center; font-size: 0.78rem; width: 100%; position: absolute; bottom: 38px; left: 0px; }
.legacy-login-footer span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 20px; background: rgba(0, 29, 53, 0.2); }
@media (max-width: 768px) {
  .legacy-login-panel { width: calc(100% - 32px); height: auto; min-height: 0px; padding: 0px; top: 50%; left: 50%; margin: 0px; transform: translate(-50%, -53%); display: grid; grid-template-columns: 1fr; }
  .legacy-login-logo { width: 100%; height: 145px; padding: 25px; }
  .legacy-login-logo::after { display: none; }
  .legacy-login-logo img { height: auto; width: 180px; }
  .legacy-login-logo p { margin-top: 14px; }
  .legacy-login-form { width: 100%; height: auto; padding: 30px 28px 34px; align-items: center; }
  .legacy-login-native-form { width: 100%; }
  .login-title { text-align: left; font-size: 1.45rem; margin-bottom: 20px; }
  .login-control { width: 100%; max-width: none; margin: 0px; }
  .login-button { width: 100%; height: 44px; margin: 5px 0px 0px; }
  .legacy-login-footer { width: 100%; height: auto; top: auto; left: 0px; bottom: 16px; margin: 0px; }
}
.microsoft-login-button { width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 0.75rem; border-radius: 8px; font-weight: 600; border: 1px solid rgb(201, 211, 220) !important; background: rgb(255, 255, 255) !important; color: rgb(31, 46, 58) !important; font-size: 0.86rem !important; }
.microsoft-login-button:hover { border-color: rgb(137, 160, 178) !important; background: rgb(246, 249, 251) !important; color: rgb(0, 37, 69) !important; }
.microsoft-login-mark { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; }
.microsoft-login-mark i:nth-child(1) { background: rgb(243, 83, 37); }
.microsoft-login-mark i:nth-child(2) { background: rgb(129, 188, 6); }
.microsoft-login-mark i:nth-child(3) { background: rgb(5, 166, 240); }
.microsoft-login-mark i:nth-child(4) { background: rgb(255, 186, 8); }
.microsoft-login-help { margin: 0.65rem 0px 0px; color: rgb(174, 191, 205); font-size: 0.65rem; text-align: center; line-height: 1.5; }
.login-method-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.15rem 0px 0.8rem; color: rgb(158, 177, 192); font-size: 0.61rem; text-transform: uppercase; letter-spacing: 0.09em; }
.login-method-divider::before, .login-method-divider::after { content: ""; height: 1px; flex: 1 1 0%; background: rgba(255, 255, 255, 0.16); }
.legacy-login-fallback { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(0, 18, 34, 0.22); }
.legacy-login-fallback summary { padding: 0.72rem 0.85rem; color: rgb(212, 224, 233); cursor: pointer; font-size: 0.7rem; list-style: none; }
.legacy-login-fallback summary::-webkit-details-marker { display: none; }
.legacy-login-fallback summary::after { content: "+"; float: right; color: rgb(159, 178, 193); font-size: 0.9rem; }
.legacy-login-fallback[open] summary::after { content: "−"; }
.legacy-login-fallback form { padding: 0.4rem 0.85rem 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.legacy-login-fallback form > label { display: block; margin: 0.65rem 0px 0.35rem; color: rgb(215, 226, 235); font-size: 0.7rem; font-weight: 500; }
.legacy-login-fallback .login-input-wrap { margin-bottom: 0.7rem; }
.legacy-login-fallback .login-button { margin-top: 0.9rem; }
/* Extras de Portal414 (no existen en el original): sin Microsoft el formulario va directo, mensajes y "Remember me". */
.legacy-login-plain { background: none; border: 0; }
.legacy-login-plain form { border-top: 0; padding: 0; }
.legacy-login-plain form > label { font-size: 0.8rem; }
.login-error { display: block; margin: -0.4rem 0 0.7rem; color: #ffb3b3; font-size: 0.7rem; }
.legacy-login-fallback form > label.login-remember { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0; cursor: pointer; }
.legacy-login-native-form .alert { font-size: 0.75rem; padding: 0.55rem 0.75rem; margin-bottom: 1rem; }
.login-layout ~ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: lightyellow; color: #000; padding: 0.6rem 1.25rem; z-index: 1000; box-shadow: 0 -1px 2px rgba(0,0,0,.2); }
.login-layout ~ #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.login-volver { margin: 1rem 0 0; text-align: center; font-size: 0.72rem; }
.login-volver a { color: rgb(174, 191, 205); text-decoration: none; }
.login-volver a:hover { color: #fff; text-decoration: underline; }
/* Pestañas de grupo (CKD & CERPI / Private Funds): son botones, no enlaces, para que un clic antes de que cargue la página no navegue a Home. */
.vt-grupo-btn { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; }
.vt-grupo-btn.activo { border-bottom-color: var(--c4p-primary, #004882); }

/* ==========================================================================
   Announcements — tablero de anuncios y número de no leídos en el menú
   ========================================================================== */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    margin-left: auto; padding: 0 6px; font-size: 11px; font-weight: 700; line-height: 1; color: #fff;
    background: #d9534f; border-radius: 10px; }
.sidebar:has(.nav-collapse-state:checked) .nav-badge { position: absolute; top: 2px; right: 6px; min-width: 16px;
    height: 16px; padding: 0 4px; font-size: 9px; }
.nav-item .nav-link:has(.nav-badge) { position: relative; }
/* Con el número el renglón no debe crecer: el texto se recorta y el número no se encoge, para
   que el menú lateral no tenga scroll horizontal. */
.nav-item .nav-link { min-width: 0; box-sizing: border-box; }
.nav-item .nav-link .nav-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .nav-link .nav-badge { flex: 0 0 auto; margin-right: 2px; }
.nav-scrollable { overflow-x: hidden; }
.nav-scrollable .nav-item { min-width: 0; max-width: 100%; }

.ann-wrap { width: 100%; }
.ann-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ann-head h1 { margin: 0 0 2px; font-size: 20px; font-weight: 700; color: #002B4A; }
.ann-head p { margin: 0; font-size: 12px; color: #6c7a89; }
.ann-empty { color: #6c7a89; text-align: center; padding: 32px 16px; }
.ann-card { margin-bottom: 14px; border-left: 4px solid transparent; }
.ann-card.ann-new { border-left-color: #004882; }
.ann-card-head { display: flex; align-items: center; gap: 8px; }
.ann-card-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: #002B4A; }
.ann-tag { padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #fff;
    background: #004882; border-radius: 10px; }
.ann-card-actions { margin-left: auto; display: flex; gap: 12px; }
.ann-meta { margin: 2px 0 10px; font-size: 12px; color: #6c7a89; }
.ann-body { font-size: 14px; color: #333; word-break: break-word; }
.ann-body img { max-width: 100%; height: auto; }
.ann-body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Home — tablero personal (pendientes, anuncios recientes, reservas)
   ========================================================================== */
.home-card { margin: 0; }
.home-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.home-card-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #002B4A; }
.home-card-link { margin-left: auto; font-size: 12px; font-weight: 600; color: #004882; text-decoration: none; }
.home-count { margin-left: 0; }
.home-total { min-width: 22px; padding: 2px 8px; font-size: 11px; font-weight: 700; text-align: center;
    color: #004882; background: #e7eef6; border-radius: 10px; }
.home-empty { padding: 18px 8px; font-size: 13px; color: #6c7a89; text-align: center; }
.home-group { margin-bottom: 14px; }
.home-group:last-child { margin-bottom: 0; }
.home-group-title { margin-bottom: 6px; font-size: 11px; font-weight: 700; color: #6c7a89; text-transform: uppercase; letter-spacing: .04em; }
.home-group-title span { margin-left: 4px; color: #004882; }
.home-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px;
    margin-bottom: 4px; font-size: 13px; color: #24364a; text-decoration: none; background: #f7f9fc;
    border: 1px solid #e6ebf1; border-left: 3px solid #6783ad; border-radius: 6px; }
.home-item:hover { background: #eef3f9; color: #002B4A; }
.home-item.urgent { border-left-color: #d9534f; }
.home-item-text { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.home-item-detail { flex: 0 0 auto; max-width: 55%; font-size: 11px; color: #6c7a89; text-align: right; }
.home-ann { padding: 10px 0 10px 10px; border-left: 3px solid transparent; border-bottom: 1px solid #eef1f5; }
.home-ann:last-of-type { border-bottom: 0; }
.home-ann.ann-new { border-left-color: #004882; }
.home-ann-head { display: flex; align-items: center; gap: 8px; }
.home-ann-title { font-size: 14px; font-weight: 700; color: #002B4A; text-decoration: none; }
.home-ann-text { font-size: 13px; color: #3a4a58; white-space: pre-line; }
.home-booking { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 0;
    font-size: 13px; border-bottom: 1px solid #eef1f5; }
.home-booking:last-child { border-bottom: 0; }
.home-booking.mine { padding-left: 8px; background: #f3f7fb; border-left: 3px solid #004882; }
.home-booking-time { min-width: 96px; color: #004882; font-weight: 600; }
.home-booking-room { font-weight: 700; color: #002B4A; }
.home-booking-who { margin-left: auto; font-size: 12px; color: #6c7a89; }
.home-booking-title { width: 100%; padding-left: 106px; font-size: 12px; color: #6c7a89; }
.home-vt-top { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.home-vt-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.home-vt-kpi { padding: 10px 12px; background: #f3f6fa; border-radius: 8px; }
.home-vt-kpi-t { font-size: 11px; font-weight: 700; color: #6c7a89; text-transform: uppercase; letter-spacing: .04em; }
.home-vt-kpi-v { font-size: 24px; font-weight: 700; color: #002B4A; }
.home-vt-kpi-c { font-size: 11px; color: #6c7a89; }
.home-vt .vt-donut { width: 260px; height: 260px; }
@media (max-width: 992px) { .home-vt-top { grid-template-columns: 1fr; justify-items: center; } }
@media (max-width: 576px) {
    .home-item { flex-direction: column; }
    .home-item-detail { max-width: 100%; text-align: left; }
    .home-booking-title { padding-left: 0; }
}
.home-note { display: block; padding: 8px 0; color: inherit; text-decoration: none; border-bottom: 1px solid #eef1f5; }
.home-note:hover .home-note-company { text-decoration: underline; }
.home-note-head { display: flex; align-items: center; gap: 8px; }
.home-note-company { font-size: 14px; font-weight: 700; color: #002B4A; }
.home-note-date { margin-left: auto; font-size: 12px; color: #6c7a89; white-space: nowrap; }
.home-note-pitch { font-size: 12px; color: #004882; }
.home-note-text { font-size: 13px; color: #3a4a58; }

/* Valtrack — aviso de lo que falta para marcar Lead (Reports y Valuation). */
.vt-missing { margin-top: 3px; max-width: 260px; font-size: 11px; line-height: 1.3; color: #8a5a00;
    background: #fff6e0; border: 1px solid #f1d99a; border-radius: 4px; padding: 2px 6px; }
.vt-steps-v + .vt-missing, p.vt-missing { max-width: none; font-size: 12px; }

/* Settings → Roles: módulos y sus submenús. */
.table-c4p tr.role-mod td:first-child { font-weight: 700; color: #002B4A; }
.table-c4p tr.role-sub td:first-child { padding-left: 28px; color: #3a4a58; }
.role-sub-mark { margin-right: 6px; color: #9aa7b4; }
.roles-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.roles-head-actions { display: flex; align-items: center; gap: 8px; }
.roles-head-actions .form-select { width: 200px; }
.roles-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; font-weight: 700; color: #002B4A;
    background: none; border: 0; cursor: pointer; text-align: left; }
.roles-toggle:hover { color: #004882; }
.roles-caret { display: inline-block; width: 12px; color: #6783ad; transition: transform .15s; }
.roles-caret.open { transform: rotate(90deg); }
.roles-count { margin-left: 6px; font-size: 11px; font-weight: 400; color: #6c7a89; }
.roles-label { padding-left: 18px; font-weight: 700; color: #002B4A; }
.roles-table tr.role-sub td { background: #f8fafc; }
.roles-table tr.role-sub td:first-child { padding-left: 42px; }

/* Settings → Sign-in logs: recuadros de conteo arriba de la tabla. */
.login-log-kpi { min-width: 150px; padding: 12px 16px; margin: 0; }
.login-log-kpi span { display: block; font-size: .8rem; color: var(--bs-secondary-color); }
.login-log-kpi strong { font-size: 1.4rem; }

/* Review → Card: la hoja impresa va sin marco. La regla de impresión del reporte de campañas
   le pone borde a toda .card-c4p (y la mantiene entera en una hoja); a la tarjeta que envuelve
   la hoja de la evaluación eso le dibujaba un recuadro alrededor de todo el contenido. */
@media print {
    .card-c4p.card-q-hoja {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        break-inside: auto !important;
    }
}

/* FileAudit: cambios, descargas y borrados en un renglón discreto, solo cuando el rango
   los trae (la auditoría diaria hoy solo pide accesos). */
.fa-otras {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.4rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--c4p-border);
    border-radius: 8px;
    background: var(--c4p-surface);
    font-size: 0.9rem;
}
.fa-otras-t {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}