/* ============================================================================
   OPAMSS · SISTEMA DE DISEÑO — Componentes y pantallas del panel de Monitoreo
   ============================================================================
   Consume las fichas de opamss.css. Ninguna regla de aquí usa un color, un
   radio o una sombra escritos a mano: si algo no se puede expresar con una
   ficha, es que falta la ficha.

   Todo componente funciona en día y en noche sin reglas propias del tema. Las
   pocas excepciones llevan su porqué escrito al lado.
   ============================================================================ */

@layer componentes {

/* ════════════════════════════════════════════════════════════════════════════
   ENCABEZADO DE PÁGINA
   ════════════════════════════════════════════════════════════════════════════ */
/* El encabezado se apila por encima de lo que viene después: es donde vive el
   selector de fecha, y su calendario tiene que abrirse sobre las tarjetas. */
.page-head {
    position: relative; z-index: 5;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 20px;
}
.page-head h1 {
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
    font-weight: 800; color: var(--color-text); letter-spacing: -.02em;
}
.page-head .sub { margin-top: 4px; font-size: .86rem; color: var(--color-muted); font-weight: 500; }
.page-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════════════
   INDICADOR EN VIVO
   ════════════════════════════════════════════════════════════════════════════ */
.vivo {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px;
    background: var(--color-success-bg);
    color: var(--color-success-tx);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.vivo .punto {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
    animation: pulso 1.8s ease-out infinite;
}
@keyframes pulso {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70%  { box-shadow: 0 0 0 7px transparent; opacity: .75; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
.vivo.off {
    background: var(--color-neutral-bg);
    color: var(--color-muted);
}
.vivo.off .punto { animation: none; }

.sello { font-size: .74rem; font-weight: 600; color: var(--color-subtle); white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   TARJETAS DE INDICADOR (KPI)
   ════════════════════════════════════════════════════════════════════════════
   Rejilla fluida: las tarjetas se reparten solas sin puntos de corte. */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px; margin-bottom: 20px;
}
.kpi {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) {
    .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.kpi-ico {
    width: 48px; height: 48px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-lg);
    background: var(--primary-subtle); color: var(--primary);
}
.kpi-ico .material-symbols-outlined { font-size: 24px; }
.kpi-cuerpo { flex: 1; min-width: 0; text-align: right; }
.kpi-valor {
    font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem);
    font-weight: 800; line-height: 1; letter-spacing: -.02em;
    color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-etq {
    margin-top: 5px;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--color-muted);
}

/* Variantes semánticas: el icono y el número toman el color, la tarjeta no. */
.kpi-brand   .kpi-ico { background: var(--primary-subtle);      color: var(--primary); }
.kpi-brand   .kpi-valor { color: var(--primary); }
.kpi-ok      .kpi-ico { background: var(--color-success-bg);    color: var(--color-success); }
.kpi-ok      .kpi-valor { color: var(--color-success-tx); }
.kpi-info    .kpi-ico { background: var(--color-info-bg);       color: var(--color-info); }
.kpi-info    .kpi-valor { color: var(--color-info-tx); }
.kpi-warn    .kpi-ico { background: var(--color-warning-bg);    color: var(--color-warning); }
.kpi-warn    .kpi-valor { color: var(--color-warning-tx); }
.kpi-danger  .kpi-ico { background: var(--color-error-bg);      color: var(--color-error); }
.kpi-danger  .kpi-valor { color: var(--color-error-tx); }

/* ════════════════════════════════════════════════════════════════════════════
   TARJETAS Y PANELES
   ════════════════════════════════════════════════════════════════════════════ */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border);
}
.card-title {
    display: flex; align-items: center; gap: 9px;
    font-size: .95rem; font-weight: 700; color: var(--color-text);
}
.card-title .material-symbols-outlined { font-size: 20px; color: var(--primary); }
.card-sub { font-size: .76rem; font-weight: 500; color: var(--color-muted); }
.card-body { padding: 20px; }
.card-body.sin-pad { padding: 0; }
.card-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 13px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

/* ════════════════════════════════════════════════════════════════════════════
   TABLAS
   ════════════════════════════════════════════════════════════════════════════ */
.tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabla { width: 100%; font-size: .86rem; }
.tabla thead th {
    position: sticky; top: 0; z-index: 2;
    padding: 11px 16px;
    background: var(--primary-solid); color: #fff;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    text-align: left; white-space: nowrap;
}
.tabla thead th:first-child { border-top-left-radius: 0; }
.tabla tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text); vertical-align: middle;
}
.tabla tbody tr:nth-child(even) td { background: var(--color-surface-alt); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr { transition: background var(--t-fast) var(--ease); }
@media (hover: hover) {
    .tabla tbody tr:hover td { background: var(--primary-subtle); }
}
.tabla tfoot td {
    padding: 12px 16px;
    background: var(--primary-subtle);
    border-top: 2px solid var(--color-border-strong);
    font-weight: 800; color: var(--color-text);
}
.tabla a { color: var(--primary); font-weight: 700; }
@media (hover: hover) { .tabla a:hover { text-decoration: underline; } }
.tabla .sub { font-size: .76rem; color: var(--color-muted); }
.center { text-align: center; }

.vacio {
    padding: 44px 16px; text-align: center;
    color: var(--color-subtle); font-size: .9rem; font-weight: 500;
}
.vacio .material-symbols-outlined { display: block; margin: 0 auto 10px; font-size: 34px; opacity: .5; }

/* ── Paginador ───────────────────────────────────────────────────────────── */
.paginador {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 13px 20px;
    border-top: 1px solid var(--color-border);
    font-size: .8rem; color: var(--color-muted);
}
.pag-btns { display: flex; gap: 8px; }

/* ════════════════════════════════════════════════════════════════════════════
   BOTONES
   ════════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: .82rem; font-weight: 700; white-space: nowrap;
    transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.btn .material-symbols-outlined { font-size: 18px; }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-pri { background: var(--primary-solid); color: #fff; border-color: var(--primary-solid); }
@media (hover: hover) {
    .btn-pri:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
}
:root[data-theme="dark"] .btn-pri { background: var(--primary-light); border-color: var(--primary-light); color: #0B1120; }

.btn-ok { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
@media (hover: hover) { .btn-ok:hover:not(:disabled) { filter: brightness(1.08); } }

.btn-sec {
    background: var(--color-surface); color: var(--primary);
    border-color: var(--color-border-strong);
}
@media (hover: hover) {
    .btn-sec:hover:not(:disabled) { background: var(--primary-subtle); border-color: var(--primary); }
}

.btn-fantasma { background: transparent; color: var(--color-muted); border-color: var(--color-border); }
@media (hover: hover) {
    .btn-fantasma:hover:not(:disabled) { background: var(--primary-subtle); color: var(--primary); border-color: var(--primary); }
}

.btn-peligro { background: var(--color-error); color: #fff; border-color: var(--color-error); }
@media (hover: hover) { .btn-peligro:hover:not(:disabled) { filter: brightness(.92); } }

.btn-sm { height: 30px; padding: 0 12px; font-size: .76rem; }
.btn-ico { width: 36px; padding: 0; }
.btn-ico.btn-sm { width: 30px; }

/* Interruptor de monitoreo remoto. */
.toggle {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 12px;
    border: 1px solid transparent; border-radius: var(--r-pill);
    font-size: .72rem; font-weight: 800;
    transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.toggle .material-symbols-outlined { font-size: 15px; }
.toggle-on  { background: var(--color-success-bg); color: var(--color-success-tx); }
.toggle-off { background: var(--color-neutral-bg); color: var(--color-muted); }
@media (hover: hover) { .toggle:hover { transform: translateY(-1px); } }

/* ════════════════════════════════════════════════════════════════════════════
   INSIGNIAS Y ESTADOS
   ════════════════════════════════════════════════════════════════════════════ */
.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px;
    border-radius: var(--r-pill);
    background: var(--color-neutral-bg); color: var(--color-muted);
    font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.pill .material-symbols-outlined { font-size: 14px; }
.pill-ok    { background: var(--color-success-bg); color: var(--color-success-tx); }
.pill-no    { background: var(--color-error-bg);   color: var(--color-error-tx); }
.pill-info  { background: var(--color-info-bg);    color: var(--color-info-tx); }
.pill-warn  { background: var(--color-warning-bg); color: var(--color-warning-tx); }
.pill-brand { background: var(--primary-subtle);   color: var(--primary); }

.punto-estado {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 8px; flex-shrink: 0;
}
.punto-on  { background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-bg); }
.punto-off { background: var(--color-neutral); box-shadow: 0 0 0 3px var(--color-neutral-bg); }

/* ════════════════════════════════════════════════════════════════════════════
   CAMPOS Y FILTROS
   ════════════════════════════════════════════════════════════════════════════ */
.filtros {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.filtros .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filtros .f.crece { flex: 1; min-width: 220px; }
.filtros .f.acciones { justify-content: flex-end; }
.filtros label {
    font-size: .66rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--color-subtle);
}

.campo, .filtros input, .filtros select {
    height: 36px; padding: 0 12px;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--r-md);
    font-size: .84rem; font-weight: 600;
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.filtros input[type="search"] { width: 100%; }
.campo:focus, .filtros input:focus, .filtros select:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: var(--focus-shadow);
}
.campo:disabled { opacity: .6; }

/* Campo compacto dentro de una fila de tabla editable. */
.campo-fila {
    width: 100%; height: 30px; padding: 0 9px;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--r-sm);
    font-size: .8rem; font-weight: 600;
}
.campo-fila:focus { outline: none; border-color: var(--focus-ring); box-shadow: var(--focus-shadow); }
select.campo-fila { height: 30px; }
select.campo-fila.es-productiva  { color: var(--color-success-tx); border-color: var(--color-success); background: var(--color-success-bg); }
select.campo-fila.es-improductiva{ color: var(--color-error-tx);   border-color: var(--color-error);   background: var(--color-error-bg); }

.chk { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--color-muted); cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--primary-solid); }
input[type="checkbox"] { accent-color: var(--primary-solid); }

/* ════════════════════════════════════════════════════════════════════════════
   PESTAÑAS
   ════════════════════════════════════════════════════════════════════════════ */
.tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 12px 16px 0;
    border-bottom: 1px solid var(--color-border);
}
.tab {
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    border-radius: var(--r-md) var(--r-md) 0 0;
    font-size: .85rem; font-weight: 700; color: var(--color-muted);
    transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .tab:hover { color: var(--primary); background: var(--primary-subtle); } }
.tab.on { color: var(--primary); border-bottom-color: var(--primary); }

/* ════════════════════════════════════════════════════════════════════════════
   BARRAS DE DISTRIBUCIÓN Y DONA
   ════════════════════════════════════════════════════════════════════════════ */
.barra {
    display: flex; height: 16px; min-width: 130px; width: 100%;
    background: var(--color-neutral-bg);
    border-radius: var(--r-pill); overflow: hidden;
}
.seg { height: 100%; transition: width .5s var(--ease-spring); }
.seg-prod { background: var(--serie-productivo); }
.seg-neu  { background: var(--serie-neutral); }
.seg-no   { background: var(--serie-improductivo); }

.leyenda {
    display: flex; flex-wrap: wrap; gap: 18px;
    padding: 14px 20px 4px;
    font-size: .78rem; font-weight: 600; color: var(--color-muted);
}
.leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

.dona-wrap { display: flex; align-items: center; gap: 24px; padding: 22px 20px; flex-wrap: wrap; }
.dona {
    position: relative; flex-shrink: 0;
    width: 150px; height: 150px; border-radius: 50%;
}
.dona::after {
    content: ""; position: absolute; inset: 28px;
    background: var(--color-surface); border-radius: 50%;
}
.dona-centro {
    position: absolute; inset: 0; z-index: 1;
    display: grid; place-content: center; text-align: center;
}
.dona-centro b {
    display: block; font-size: 1.6rem; font-weight: 800;
    color: var(--color-text); letter-spacing: -.02em;
}
.dona-centro small { font-size: .68rem; font-weight: 600; color: var(--color-muted); }
.dona-leyenda { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 12px; font-size: .84rem; font-weight: 600; }
.dona-leyenda .fila { display: flex; align-items: center; gap: 10px; }
.dona-leyenda .sw { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.dona-leyenda .v { margin-left: auto; font-weight: 800; color: var(--color-text); }

/* ════════════════════════════════════════════════════════════════════════════
   ANALÍTICA — GRÁFICO Y MAPA DE CALOR
   ════════════════════════════════════════════════════════════════════════════ */
.gtendencia { width: 100%; height: auto; display: block; }
.calor-wrap { overflow-x: auto; }
.calor { border-collapse: separate; border-spacing: 3px; width: 100%; }
.calor th {
    font-size: .68rem; font-weight: 700; color: var(--color-subtle);
    padding: 2px 6px; text-align: center; white-space: nowrap;
}
.calor tbody th { text-align: right; color: var(--color-muted); }
.calor td {
    height: 18px; min-width: 32px;
    border-radius: var(--r-xs);
    transition: transform var(--t-fast) var(--ease);
}
@media (hover: hover) {
    .calor td:hover { transform: scale(1.18); box-shadow: var(--shadow-md); }
}
.calor-leyenda { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 14px; font-size: .74rem; color: var(--color-muted); }
.calor-sw { width: 26px; height: 14px; border-radius: var(--r-xs); border: 1px solid var(--color-border); }

/* ════════════════════════════════════════════════════════════════════════════
   MURO DE PANTALLAS
   ════════════════════════════════════════════════════════════════════════════ */
.muro {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.muro-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden; cursor: pointer;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) {
    .muro-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}
.muro-shot {
    position: relative; aspect-ratio: 16 / 9;
    background: #0B1120;
    display: grid; place-items: center;
}
.muro-shot img, .muro-shot video { width: 100%; height: 100%; object-fit: cover; }
.muro-shot img.sin { opacity: .22; }
.muro-live {
    position: absolute; top: 10px; right: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    background: rgba(40, 166, 35, .92); color: #fff;
    border-radius: var(--r-pill);
    font-size: .62rem; font-weight: 800; letter-spacing: .06em;
}
.muro-live .punto { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: latido 1.6s infinite; }
.muro-cap { padding: 12px 15px; }
.muro-eq { display: block; font-size: .88rem; font-weight: 700; color: var(--color-text); }
.muro-emp { display: block; font-size: .78rem; color: var(--color-muted); }
.muro-vacio { grid-column: 1 / -1; }

/* Barra de controles de la vista en vivo. */
.pantalla-barra {
    display: flex; flex-wrap: wrap; gap: 10px 16px;
    align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--color-border);
}
.pantalla-grupo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pantalla-zoom { display: inline-flex; align-items: center; gap: 4px; }
.pantalla-fluidez { display: inline-flex; align-items: center; gap: 5px; color: var(--color-muted); }
.pantalla-zoomval { min-width: 44px; text-align: center; font-size: .8rem; font-weight: 700; color: var(--color-muted); }
#grabarPantalla.activo { background: #E23; border-color: #E23; color: #fff; }

/* Pantalla en vivo dentro de la ficha de empleado: canvas con zoom/desplazamiento. */
.pantalla-vivo {
    position: relative; overflow: hidden;
    background: #0B1120; min-height: 220px;
    display: grid; place-items: center;
}
.pantalla-vivo:fullscreen { padding: 0; }
#lienzoPantalla, #lienzoVideo {
    max-width: 100%; max-height: 78vh;
    transform-origin: center center;
    transition: transform .08s linear;
    background: #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.pantalla-vivo:fullscreen #lienzoPantalla,
.pantalla-vivo:fullscreen #lienzoVideo { max-height: 100vh; }
#lienzoPantalla.sin { opacity: .25; }
.pantalla-vivo.arrastrando { cursor: grabbing; }
.pantalla-rec {
    position: absolute; top: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: rgba(226, 34, 34, .92); color: #fff;
    font-size: .72rem; font-weight: 800; letter-spacing: .05em;
}
.pantalla-rec .punto { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: latido 1.2s infinite; }

/* Barra de paginación del muro. */
.muro-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 16px;
}
.muro-pag { display: inline-flex; align-items: center; gap: 8px; }
.muro-pagtexto { font-size: .82rem; font-weight: 700; color: var(--color-muted); min-width: 180px; text-align: center; }

/* ════════════════════════════════════════════════════════════════════════════
   AVISOS EMERGENTES
   ════════════════════════════════════════════════════════════════════════════ */
.avisos {
    position: fixed; right: 20px; bottom: 20px; z-index: 600;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
.aviso {
    display: flex; align-items: center; gap: 10px;
    max-width: 380px; padding: 13px 17px;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--primary);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    font-size: .84rem; font-weight: 600;
    animation: aviso-entra .3s var(--ease-spring) both;
}
.aviso .material-symbols-outlined { font-size: 19px; flex-shrink: 0; }
.aviso-ok    { border-left-color: var(--color-success); }
.aviso-ok    .material-symbols-outlined { color: var(--color-success); }
.aviso-error { border-left-color: var(--color-error); }
.aviso-error .material-symbols-outlined { color: var(--color-error); }
.aviso-warn  { border-left-color: var(--color-warning); }
.aviso-warn  .material-symbols-outlined { color: var(--color-warning); }
.aviso.saliendo { animation: aviso-sale .4s var(--ease) forwards; }
@keyframes aviso-entra { from { opacity: 0; transform: translateX(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale  { to { opacity: 0; transform: translateX(26px); } }

/* ════════════════════════════════════════════════════════════════════════════
   SELECTOR DE APARIENCIA
   ════════════════════════════════════════════════════════════════════════════ */
.tema-wrap { position: relative; }
.tema-pop {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200;
    width: 292px; padding: 14px;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    animation: aviso-entra .2s var(--ease) both;
}
.tema-pop[hidden] { display: none; }
.tema-rot {
    margin: 0 2px 8px;
    font-size: .62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .09em; color: var(--color-muted);
}
.tema-rot:not(:first-child) { margin-top: 15px; }

/* ── Modo: tres opciones en fila ─────────────────────────────────────────── */
.tema-modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tema-btn {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 10px 4px;
    background: var(--color-surface-alt); color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    font-size: .68rem; font-weight: 700; text-align: center; line-height: 1.2;
    transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.tema-btn .material-symbols-outlined { font-size: 19px; }
@media (hover: hover) { .tema-btn:hover { border-color: var(--primary); color: var(--primary); } }
.tema-btn.sel { border-color: var(--primary); background: var(--primary-subtle); color: var(--primary); }

/* ── Color del cromo: muestras con el degradado real del menú ────────────── */
.tema-colores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tema-color {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 8px 2px 7px;
    background: var(--color-surface-alt); color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    font-size: .6rem; font-weight: 700; line-height: 1.1;
    transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.tema-color i {
    width: 22px; height: 22px; border-radius: 7px;
    background: var(--muestra);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18);
}
@media (hover: hover) { .tema-color:hover { border-color: var(--primary); color: var(--color-text); } }
.tema-color.sel { border-color: var(--primary); background: var(--primary-subtle); color: var(--primary); }

/* La muestra pinta cabecera y acento, que es justo lo que cambia. */
.tema-color[data-menu="institucional"] { --muestra: linear-gradient(135deg, #FFFFFF 48%, #00167B 52%); }
.tema-color[data-menu="indigo"]        { --muestra: linear-gradient(135deg, #0B1533 48%, #4C86F0 52%); }
.tema-color[data-menu="verde"]         { --muestra: linear-gradient(135deg, #0B1533 48%, #5BED24 52%); }
.tema-color[data-menu="ambar"]         { --muestra: linear-gradient(135deg, #0B1533 48%, #F59E0B 52%); }
.tema-color[data-menu="turquesa"]      { --muestra: linear-gradient(135deg, #0B1533 48%, #22D3EE 52%); }
.tema-color[data-menu="violeta"]       { --muestra: linear-gradient(135deg, #0B1533 48%, #A78BFA 52%); }
.tema-color[data-menu="grafito"]       { --muestra: linear-gradient(135deg, #0F172A 48%, #E2E8F0 52%); }

/* ── Estilo de la barra superior ─────────────────────────────────────────── */
.tema-barras { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tema-barra {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 10px;
    background: var(--color-surface-alt); color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    font-size: .7rem; font-weight: 700;
    transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.tema-barra i {
    width: 18px; height: 12px; border-radius: 3px; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .2);
}
.tema-barra[data-barra="color"] i { background: var(--chrome-cab); }
.tema-barra[data-barra="clara"] i { background: var(--color-surface); }
@media (hover: hover) { .tema-barra:hover { border-color: var(--primary); color: var(--color-text); } }
.tema-barra.sel { border-color: var(--primary); background: var(--primary-subtle); color: var(--primary); }

.tema-restablecer {
    display: block; width: 100%; margin-top: 13px; padding-top: 11px;
    border: 0; border-top: 1px solid var(--color-border);
    background: none; color: var(--color-muted);
    font-size: .72rem; font-weight: 600; text-align: center;
}
@media (hover: hover) { .tema-restablecer:hover { color: var(--primary); } }

@media (max-width: 560px) { .tema-pop { width: min(292px, calc(100vw - 28px)); right: -8px; } }

} /* @layer componentes */


/* ════════════════════════════════════════════════════════════════════════════
   PANTALLAS CONCRETAS
   ════════════════════════════════════════════════════════════════════════════ */
@layer paginas {

/* ── Ingreso ─────────────────────────────────────────────────────────────── */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }

/* Lado institucional: degradado de marca con una malla sutil encima. */
.acceso-arte {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 46px 52px;
    background: linear-gradient(155deg, #00167B 0%, #0A2A8C 46%, #12256E 100%);
    color: #fff;
}
.acceso-arte::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 16% 12%, rgba(255,255,255,.12) 0%, transparent 42%),
        radial-gradient(circle at 88% 88%, rgba(53,211,47,.16) 0%, transparent 40%);
}
/* Malla fina: da textura de producto sin competir con el texto. */
.acceso-arte::after {
    content: ""; position: absolute; inset: 0; opacity: .35;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 70% 60%, #000 0%, transparent 72%);
}
.acceso-arte > * { position: relative; z-index: 1; }

.acceso-logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
.acceso-arte-cuerpo { max-width: 48ch; }
.acceso-etiqueta {
    display: inline-block; margin-bottom: 16px; padding: 5px 13px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-pill);
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
}
.acceso-arte h2 {
    font-size: clamp(1.8rem, 1.1rem + 2vw, 2.6rem);
    font-weight: 800; line-height: 1.14; letter-spacing: -.02em; margin-bottom: 16px;
}
.acceso-arte p { font-size: .96rem; color: rgba(255, 255, 255, .76); line-height: 1.7; }

.acceso-rasgos { display: flex; flex-direction: column; gap: 16px; margin-top: 34px; }
.acceso-rasgos li { display: flex; align-items: center; gap: 13px; }
.acceso-rasgo-ico {
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
}
.acceso-rasgo-ico .material-symbols-outlined { font-size: 21px; color: var(--accent-light); }
.acceso-rasgos b { display: block; font-size: .9rem; font-weight: 700; color: #fff; }
.acceso-rasgos small { display: block; font-size: .78rem; color: rgba(255, 255, 255, .62); margin-top: 1px; }
.acceso-arte-pie { font-size: .74rem; color: rgba(255, 255, 255, .5); }

/* Lado del formulario */
.acceso-panel {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
    background: var(--color-bg);
}
.acceso-caja { width: 100%; max-width: 372px; }
.acceso-logo-movil { display: none; height: 34px; width: auto; margin: 0 auto 26px; }
:root[data-theme="dark"] .acceso-logo-movil { filter: brightness(0) invert(1); }

.acceso-caja h1 { font-size: 1.5rem; font-weight: 800; color: var(--color-text); letter-spacing: -.02em; }
.acceso-intro { margin: 6px 0 24px; font-size: .86rem; color: var(--color-muted); }

.acceso-ms {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 46px;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--r-md);
    font-size: .88rem; font-weight: 700;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
                transform var(--t-fast) var(--ease);
}
@media (hover: hover) {
    .acceso-ms:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
}

.acceso-o {
    position: relative; margin: 20px 0;
    text-align: center; font-size: .74rem; color: var(--color-subtle);
}
.acceso-o::before {
    content: ""; position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: var(--color-border);
}
.acceso-o span { position: relative; padding: 0 12px; background: var(--color-bg); }

.acceso-campo { margin-bottom: 16px; }
.acceso-campo label {
    display: block; margin-bottom: 7px;
    font-size: .76rem; font-weight: 700; color: var(--color-text);
}
.acceso-entrada {
    position: relative; display: flex; align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--r-md);
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.acceso-entrada:focus-within { border-color: var(--focus-ring); box-shadow: var(--focus-shadow); }
.acceso-entrada > .material-symbols-outlined {
    position: absolute; left: 13px; font-size: 19px; color: var(--color-subtle); pointer-events: none;
}
.acceso-entrada input {
    width: 100%; height: 46px; padding: 0 14px 0 42px;
    background: none; border: none; color: var(--color-text);
    font-size: .95rem;
}
.acceso-entrada input:focus { outline: none; }
.acceso-entrada input::placeholder { color: var(--color-subtle); opacity: .7; }
.acceso-ojo {
    display: grid; place-items: center;
    width: 40px; height: 44px; margin-right: 2px;
    background: none; border: none; color: var(--color-subtle);
    border-radius: var(--r-sm);
}
@media (hover: hover) { .acceso-ojo:hover { color: var(--primary); } }
.acceso-ojo .material-symbols-outlined { font-size: 19px; }

.acceso-enviar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 48px; margin-top: 22px;
    background: linear-gradient(135deg, var(--primary-solid), #1f3aa8); color: #fff;
    border: none; border-radius: var(--r-md);
    font-size: .95rem; font-weight: 700;
    box-shadow: var(--shadow-brand);
    transition: filter var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
@media (hover: hover) { .acceso-enviar:hover { filter: brightness(1.14); transform: translateY(-1px); } }
.acceso-enviar:active { transform: translateY(0); }

.acceso-error {
    display: flex; align-items: flex-start; gap: 9px;
    margin-bottom: 18px; padding: 12px 14px;
    background: var(--color-error-bg); color: var(--color-error-tx);
    border: 1px solid var(--color-error);
    border-radius: var(--r-md);
    font-size: .82rem; font-weight: 600; line-height: 1.45;
}
.acceso-error .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }

.acceso-pie { margin-top: 26px; text-align: center; font-size: .72rem; color: var(--color-subtle); line-height: 1.6; }

@media (max-width: 980px) {
    .acceso { grid-template-columns: 1fr; }
    .acceso-arte { display: none; }
    .acceso-logo-movil { display: block; }
    .acceso-caja h1, .acceso-intro { text-align: center; }
}

/* ── Reportes: membrete de impresión ─────────────────────────────────────── */
.solo-impresion { display: none; }
.rep-membrete {
    align-items: center; gap: 14px;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 2px solid var(--primary-solid);
}
.rep-membrete img { height: 42px; width: auto; }
.rep-membrete b { font-size: .92rem; color: var(--color-text); }
.rep-membrete .sub { font-size: .76rem; color: var(--color-muted); margin-top: 3px; }
.rep-pie {
    margin-top: 16px; padding-top: 10px;
    border-top: 1px solid var(--color-border);
    text-align: center; font-size: .7rem; color: var(--color-subtle);
}
.rep-pct { display: flex; align-items: center; gap: 9px; }
.rep-pct .barra { height: 9px; min-width: 64px; }
.rep-pct b { min-width: 34px; font-weight: 800; color: var(--color-text); }


/* Aviso informativo dentro de una tarjeta, con una acción a la derecha. */
.aviso-linea {
    display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--color-info-bg);
    border-bottom: 1px solid var(--color-border);
    font-size: .84rem; color: var(--color-text); line-height: 1.55;
}
.aviso-linea > .material-symbols-outlined { color: var(--color-info); flex-shrink: 0; }
.aviso-linea > div { flex: 1; min-width: 240px; }
.aviso-linea b { color: var(--color-text); }

/* ════════════════════════════════════════════════════════════════════════════
   SELECTOR DE FECHA PROPIO
   ════════════════════════════════════════════════════════════════════════════
   El <input type="date"> del navegador no se puede tematizar: llega con su
   icono, su idioma y su calendario, distintos en cada navegador y ajenos al
   modo noche. Aquí el campo es un botón y el calendario lo dibujamos nosotros.
   El <input type="date"> real sigue existiendo, oculto, para que el formulario
   envíe el mismo valor de siempre. */
.fecha { position: relative; display: inline-flex; }

.fecha-boton {
    display: inline-flex; align-items: center; gap: 9px;
    height: 36px; padding: 0 12px;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--r-md);
    font-size: .84rem; font-weight: 600; white-space: nowrap;
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.fecha-boton .material-symbols-outlined { font-size: 18px; color: var(--color-muted); }
@media (hover: hover) { .fecha-boton:hover { border-color: var(--primary); } }
.fecha-boton[aria-expanded="true"] { border-color: var(--focus-ring); box-shadow: var(--focus-shadow); }

/* Va en posición FIJA, no absoluta: dentro de una tarjeta con overflow:hidden
   —como las de filtros— un desplegable absoluto se recorta, y dentro de una
   sección con transform se apila mal. Fijo escapa de ambas trampas; el guion
   le calcula las coordenadas al abrirlo. */
.fecha-pop {
    position: fixed; z-index: 1300;
    width: 292px; padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    animation: aviso-entra .18s var(--ease) both;
}
.fecha-pop[hidden] { display: none; }

.fecha-cab {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    margin-bottom: 12px;
}
.fecha-mes {
    flex: 1; padding: 6px 8px;
    background: none; border: none; border-radius: var(--r-sm);
    font-size: .88rem; font-weight: 700; color: var(--color-text);
    text-transform: capitalize;
}
@media (hover: hover) { .fecha-mes:hover { background: var(--primary-subtle); color: var(--primary); } }
.fecha-nav {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex-shrink: 0;
    background: none; border: 1px solid var(--color-border); border-radius: var(--r-sm);
    color: var(--color-muted);
}
@media (hover: hover) { .fecha-nav:hover { background: var(--primary-subtle); color: var(--primary); border-color: var(--primary); } }
.fecha-nav .material-symbols-outlined { font-size: 18px; }

.fecha-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fecha-dia-sem {
    padding: 4px 0; text-align: center;
    font-size: .64rem; font-weight: 800; letter-spacing: .04em;
    color: var(--color-subtle); text-transform: uppercase;
}
.fecha-dia {
    aspect-ratio: 1; display: grid; place-items: center;
    background: none; border: none; border-radius: var(--r-sm);
    font-size: .82rem; font-weight: 600; color: var(--color-text);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) { .fecha-dia:hover:not(:disabled) { background: var(--primary-subtle); color: var(--primary); } }
.fecha-dia.fuera { color: var(--color-subtle); opacity: .45; }
.fecha-dia.hoy { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); font-weight: 800; }
.fecha-dia.sel {
    background: var(--primary-solid); color: #fff; font-weight: 800;
    box-shadow: var(--shadow-brand);
}
:root[data-theme="dark"] .fecha-dia.sel { background: var(--primary-light); color: #0B1120; }
.fecha-dia:disabled { opacity: .3; cursor: not-allowed; }

/* Meses y años, cuando se pulsa el título. */
.fecha-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 232px; overflow-y: auto; }
.fecha-lista button {
    padding: 9px 4px;
    background: var(--color-surface-alt); border: 1px solid var(--color-border);
    border-radius: var(--r-sm);
    font-size: .78rem; font-weight: 600; color: var(--color-text);
    text-transform: capitalize;
}
@media (hover: hover) { .fecha-lista button:hover { border-color: var(--primary); color: var(--primary); } }
.fecha-lista button.sel { background: var(--primary-subtle); border-color: var(--primary); color: var(--primary); font-weight: 800; }

.fecha-pie {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 12px; padding-top: 11px;
    border-top: 1px solid var(--color-border);
}
.fecha-atajo {
    padding: 5px 10px;
    background: none; border: 1px solid var(--color-border); border-radius: var(--r-pill);
    font-size: .72rem; font-weight: 700; color: var(--color-muted);
}
@media (hover: hover) { .fecha-atajo:hover { border-color: var(--primary); color: var(--primary); } }

@media (max-width: 560px) {
    .fecha { width: 100%; }
    .fecha-boton { width: 100%; justify-content: space-between; }
    .fecha-pop { width: min(292px, calc(100vw - 28px)); }
}

/* ── Gestión de usuarios ─────────────────────────────────────────────────── */
.persona { display: flex; align-items: center; gap: 11px; min-width: 0; }
.persona-avatar {
    width: 36px; height: 36px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--primary-subtle); color: var(--primary);
    font-size: .76rem; font-weight: 800;
}
.persona-txt { min-width: 0; line-height: 1.3; }
.persona-txt b { display: block; font-weight: 700; color: var(--color-text); }
.persona-txt small { display: block; font-size: .74rem; color: var(--color-muted); }

.lista-notas { display: flex; flex-direction: column; gap: 10px; font-size: .84rem; color: var(--color-muted); }
.lista-notas li { padding-left: 16px; position: relative; line-height: 1.6; }
.lista-notas li::before {
    content: ""; position: absolute; left: 0; top: .6em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}
.lista-notas b { color: var(--color-text); }

/* ── Diálogos ─────────────────────────────────────────────────────────────
   OJO: el reset global pone margin:0 a TODO, y eso incluye el margin:auto con
   el que el navegador centra un <dialog> modal. Sin devolvérselo aquí, el
   diálogo se pega a la esquina superior izquierda. */
.dlg {
    margin: auto;
    padding: 0; border: none; background: none;
    max-width: min(640px, calc(100vw - 32px)); width: 100%;
    max-height: calc(100vh - 48px);
    color: var(--color-text);
    overflow: visible;
}
.dlg::backdrop { background: rgba(8, 14, 32, .55); backdrop-filter: blur(3px); }
.dlg[open] { animation: dlg-entra .24s var(--ease-spring) both; }
.dlg[open]::backdrop { animation: fundido .24s var(--ease) both; }
@keyframes dlg-entra { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
.dlg.cerrando { animation: dlg-sale .16s var(--ease) both; }
@keyframes dlg-sale { to { opacity: 0; transform: translateY(8px) scale(.98); } }

.dlg-caja {
    display: flex; flex-direction: column;
    max-height: calc(100vh - 48px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
/* Estrecha la CAJA dentro de un diálogo ancho. No tocar el margen del <dialog>:
   ahí el margin:auto es lo que lo centra en la ventana. */
.dlg-angosta { max-width: 440px; margin: 0 auto; }

/* Diálogo de confirmación: es el <dialog> el que se estrecha. */
.dlg-confirmar { max-width: min(440px, calc(100vw - 32px)); }

/* Cabecera con icono: da carácter y dice de qué va sin leer. */
.dlg-cab {
    display: flex; align-items: center; gap: 13px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}
.dlg-cab-ico {
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--r-lg);
    background: var(--primary-subtle); color: var(--primary);
}
.dlg-cab-ico .material-symbols-outlined { font-size: 21px; }
.dlg-cab-txt { flex: 1; min-width: 0; }
.dlg-cab h2 { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.dlg-cab p { margin-top: 2px; font-size: .78rem; color: var(--color-muted); }
.dlg-cerrar {
    display: grid; place-items: center; flex-shrink: 0;
    width: 34px; height: 34px;
    background: none; border: none; border-radius: var(--r-md);
    color: var(--color-muted);
    transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
@media (hover: hover) { .dlg-cerrar:hover { background: var(--color-neutral-bg); color: var(--color-text); } }

/* Variantes por intención del diálogo. */
.dlg-peligro .dlg-cab-ico { background: var(--color-error-bg); color: var(--color-error); }
.dlg-aviso   .dlg-cab-ico { background: var(--color-warning-bg); color: var(--color-warning); }
.dlg-ok      .dlg-cab-ico { background: var(--color-success-bg); color: var(--color-success); }

.dlg-cuerpo { padding: 20px; overflow-y: auto; flex: 1; }
.dlg-intro { margin-bottom: 18px; font-size: .88rem; color: var(--color-muted); line-height: 1.65; }
.dlg-intro b { color: var(--color-text); }
.dlg-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.dlg-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dlg-campo label {
    display: flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: var(--color-subtle);
}
.dlg-campo.obligatorio label::after { content: "*"; color: var(--color-error); font-size: .9rem; }
.dlg-campo .campo { width: 100%; }
.dlg-pista { font-size: .72rem; color: var(--color-subtle); line-height: 1.4; }
.dlg-cuerpo .chk { margin-top: 18px; }

/* ── Campo inválido ──────────────────────────────────────────────────────
   El borde rojo solo no basta (hay gente que no distingue el color), así que
   además aparece el motivo debajo y el foco salta al primer campo con problema. */
.campo.invalido,
.campo-fila.invalido {
    border-color: var(--color-error);
    background: var(--color-error-bg);
}
.campo.invalido:focus,
.campo-fila.invalido:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 26%, transparent);
}
.campo-aviso {
    display: flex; align-items: center; gap: 5px;
    font-size: .74rem; font-weight: 600; color: var(--color-error-tx);
    animation: entra-aviso .18s var(--ease) both;
}
.campo-aviso .material-symbols-outlined { font-size: 15px; }
@keyframes entra-aviso { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.dlg-error {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 16px; padding: 11px 13px;
    background: var(--color-error-bg); color: var(--color-error-tx);
    border: 1px solid var(--color-error); border-radius: var(--r-md);
    font-size: .82rem; font-weight: 600; line-height: 1.5;
}
.dlg-error .material-symbols-outlined { font-size: 17px; flex-shrink: 0; }

.dlg-pie {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

@media (max-width: 620px) {
    .dlg-rejilla { grid-template-columns: 1fr; }
    .dlg-pie { flex-direction: column-reverse; }
    .dlg-pie .btn { width: 100%; }
}

/* ── Realce de una fila recién llegada por el canal en vivo ──────────────── */
.fila-nueva { animation: destello 1.8s var(--ease) both; }
@keyframes destello {
    0%   { background: var(--primary-subtle); }
    100% { background: transparent; }
}
.fila-guardada { animation: guardada 1.5s var(--ease) both; }
@keyframes guardada {
    0%   { background: var(--color-success-bg); }
    100% { background: transparent; }
}
.acciones-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

} /* @layer paginas */


/* ════════════════════════════════════════════════════════════════════════════
   UTILIDADES
   ════════════════════════════════════════════════════════════════════════════ */
@layer utilidades {

.sub { color: var(--color-muted); font-size: .78rem; }
.oculto { display: none !important; }
[hidden] { display: none !important; }
.solo-lectores {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

} /* @layer utilidades */


/* ════════════════════════════════════════════════════════════════════════════
   ADAPTACIÓN A PANTALLA
   ════════════════════════════════════════════════════════════════════════════ */

/* Tabletas: el lienzo aprieta y la rejilla doble se apila. */
@media (max-width: 1180px) {
    .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    :root { --gutter: 18px; }
    .sidebar { transform: translateX(-100%); width: min(82vw, 300px); z-index: 400; }
    .sidebar.abierto { transform: translateX(0); }
    .main-wrap, .sidebar-riel .main-wrap { margin-left: 0; }
    /* En pantalla táctil el menú nunca se queda en riel: o cajón completo o nada. */
    .sidebar-riel .sidebar { width: min(82vw, 300px); }
    .sidebar-riel .nav-txt,
    .sidebar-riel .nav-cuenta,
    .sidebar-riel .sidebar-logo-txt,
    .sidebar-riel .estado-canal .txt,
    .sidebar-riel .estado-canal .meta { display: block; }
    .sidebar-riel .nav-link { justify-content: flex-start; gap: 12px; padding: 10px 14px; }
    .sidebar-riel .nav-cap { font-size: .64rem; padding: 15px 22px 6px; }
    .sidebar-riel .nav-cap::after { display: none; }
    .sidebar-riel .sidebar-head { justify-content: flex-start; padding: 0 18px; }
    .sidebar-riel .estado-canal { justify-content: flex-start; padding: 9px 12px; }
}

@media (max-width: 720px) {
    :root { --gutter: 14px; }

    .topbar { padding: 0 14px; gap: 8px; }
    .topbar-usuario-meta { display: none; }
    .page-head { align-items: stretch; }
    .page-acciones { width: 100%; }
    .page-acciones .btn { flex: 1; }

    .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    .kpi { padding: 14px; gap: 11px; }
    .kpi-ico { width: 40px; height: 40px; }
    .kpi-ico .material-symbols-outlined { font-size: 21px; }

    .filtros { padding: 14px; gap: 12px; }
    .filtros .f, .filtros .f.crece { width: 100%; min-width: 0; }
    .filtros .btn { width: 100%; }

    .dona-wrap { justify-content: center; }
    .avisos { right: 12px; left: 12px; bottom: 12px; }
    .aviso { max-width: none; }

    /* Las tablas pasan a lista: cada fila es una ficha con sus etiquetas.
       El nombre de la columna viene de data-etq, que la vista ya escribe. */
    .tabla-lista thead { display: none; }
    .tabla-lista, .tabla-lista tbody, .tabla-lista tr, .tabla-lista td { display: block; width: 100%; }
    .tabla-lista tbody tr {
        margin: 0 14px 12px;
        background: var(--color-surface) !important;
        border: 1px solid var(--color-border);
        border-radius: var(--r-lg);
        overflow: hidden;
    }
    .tabla-lista tbody tr:nth-child(even) td { background: transparent; }
    .tabla-lista tbody td {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 14px;
        border-bottom: 1px solid var(--color-border);
        background: transparent !important;
    }
    .tabla-lista tbody td:last-child { border-bottom: none; }
    /* La etiqueta empuja: así todo el valor queda junto a la derecha en vez de
       repartirse cuando la celda tiene más de un elemento (un punto y un texto). */
    .tabla-lista tbody td::before {
        content: attr(data-etq);
        flex-shrink: 0; margin-right: auto;
        font-size: .66rem; font-weight: 800;
        text-transform: uppercase; letter-spacing: .07em;
        color: var(--color-subtle);
    }
    .tabla-lista tbody td[data-etq=""]::before { display: none; }
    .tabla-lista .barra { max-width: 60%; }
    .tabla-lista tfoot { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   IMPRESIÓN / PDF
   ════════════════════════════════════════════════════════════════════════════ */
@media print {
    @page { margin: 1.4cm; size: A4 landscape; }

    /* La impresión siempre va en claro, venga de donde venga el tema. */
    :root, :root[data-theme="dark"], :root[data-theme="auto"] {
        --color-bg: #fff; --color-surface: #fff; --color-surface-alt: #fff;
        --color-text: #111; --color-muted: #444; --color-subtle: #555;
        --color-border: #ccc; --color-border-strong: #999;
        --primary: #00167B; --primary-solid: #00167B; --primary-subtle: #EEF1FC;
        color-scheme: light;
    }
    html, body { background: #fff !important; }

    .sidebar, .sidebar-fondo, .topbar, .avisos, .no-imprimir,
    .paginador, .tema-wrap { display: none !important; }

    .main-wrap { margin-left: 0 !important; }
    .page-body { padding: 0 !important; }
    .page-body > * { animation: none !important; }

    .solo-impresion { display: flex !important; }
    .rep-pie { display: block !important; }

    .card { box-shadow: none !important; border: 1px solid #ccc !important; margin: 0 !important; }
    .tabla thead th { background: #00167B !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tabla tbody tr:hover td { background: transparent !important; }
    .seg, .kpi-ico, .pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    tr, .card { page-break-inside: avoid; }
}

/* Más contraste si el sistema lo pide. */
@media (prefers-contrast: more) {
    :root { --color-border: #94A3B8; --color-border-strong: #64748B; --color-muted: #475569; }
    :root[data-theme="dark"] { --color-border: #5A6E96; --color-border-strong: #7D93B9; --color-muted: #B6C4DC; }
    .card, .kpi, .muro-item { border-width: 2px; }
}

/* ── Ajustes: selector de días ─────────────────────────────────────────────── */
.dias-sem { display: flex; flex-wrap: wrap; gap: 8px; }
.dia-chip { cursor: pointer; user-select: none; }
.dia-chip input { position: absolute; opacity: 0; pointer-events: none; }
.dia-chip span {
    display: grid; place-items: center;
    width: 46px; height: 40px;
    background: var(--color-surface-alt); color: var(--color-muted);
    border: 1px solid var(--color-border); border-radius: var(--r-md);
    font-size: .8rem; font-weight: 700;
    transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .dia-chip:hover span { border-color: var(--primary); } }
.dia-chip input:checked + span {
    background: var(--primary-subtle); color: var(--primary); border-color: var(--primary);
}
.dia-chip input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
textarea.campo { width: 100%; resize: vertical; padding: 10px 12px; line-height: 1.5; font-family: inherit; }

/* ── Reposición de tiempo ──────────────────────────────────────────────────── */
/* Ranking de empleados con más tiempo pendiente. */
.ranking { display: flex; flex-direction: column; }
.ranking-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 6px; border-radius: var(--r-sm, 6px);
    color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-border);
}
.ranking-fila:last-child { border-bottom: 0; }
.ranking-fila:hover { background: var(--color-superficie-2, rgba(0,0,0,.03)); }
.ranking-nom { display: flex; flex-direction: column; line-height: 1.25; }
.ranking-val { font-weight: 700; white-space: nowrap; }

/* Botones de acción por fila (marcar repuesto / justificar). */
.fila-acciones { display: flex; gap: 6px; }

/* ── Contadores del tablero de triaje ──────────────────────────────────────
   Son botones: cada uno filtra la lista de abajo. Se marcan como tales (cursor,
   foco visible) y los que están en cero se atenúan, para que la vista dirija
   sola hacia lo que sí requiere atención. */
.kpi-filtro {
    font: inherit; text-align: left; cursor: pointer;
    width: 100%;
}
.kpi-filtro:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kpi-filtro.apagado { opacity: .5; }
.kpi-filtro.activo {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-subtle), var(--shadow-sm);
}

/* ── Arte del acceso: un reloj de actividad ────────────────────────────────
   El panel izquierdo del login dice de qué trata el sistema antes de leer una
   palabra. Todo es SVG en línea: escala a cualquier pantalla y no carga ni un
   archivo. Las animaciones son lentas a propósito — esto acompaña, no compite
   con el formulario, que es lo que la persona vino a usar. */
/* Gana en especificidad a ".acceso-arte > *", que pone todo en relative. */
.acceso-arte > .acceso-arte-svg {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: .55;
}

/* Arco que avanza y retrocede, como una jornada en curso. */
.arte-arco {
    stroke-dasharray: 1131;            /* 2πr con r=180 */
    stroke-dashoffset: 1131;
    transform-origin: 380px 300px;
    transform: rotate(-90deg);
    animation: arco-avanza 12s ease-in-out infinite;
}
@keyframes arco-avanza {
    0%   { stroke-dashoffset: 1131; }
    55%  { stroke-dashoffset: 300; }
    100% { stroke-dashoffset: 1131; }
}

/* La aguja larga gira de verdad: una vuelta por minuto. */
.arte-aguja {
    transform-origin: 380px 300px;
    animation: aguja-gira 60s linear infinite;
}
@keyframes aguja-gira { to { transform: rotate(360deg); } }

/* El pulso se dibuja de izquierda a derecha y vuelve a empezar. */
.arte-pulso {
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    animation: pulso-dibuja 6s ease-in-out infinite;
}
@keyframes pulso-dibuja {
    0%   { stroke-dashoffset: 460; opacity: 0; }
    15%  { opacity: .5; }
    70%  { stroke-dashoffset: 0; opacity: .5; }
    90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Puntos de muestreo: el sistema toma una medida cada pocos segundos. */
.arte-puntos circle { opacity: .15; animation: punto-late 3.2s ease-in-out infinite; }
.arte-puntos circle:nth-child(2) { animation-delay: .4s; }
.arte-puntos circle:nth-child(3) { animation-delay: .8s; }
.arte-puntos circle:nth-child(4) { animation-delay: 1.2s; }
@keyframes punto-late { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }

/* ── Iconos animados de los rasgos ───────────────────────────────────────── */
.acceso-rasgo-ico svg { width: 22px; height: 22px; display: block; }

.ico-pulso {
    stroke-dasharray: 60; stroke-dashoffset: 60;
    animation: pulso-dibuja-ico 3s ease-in-out infinite;
}
@keyframes pulso-dibuja-ico {
    0%   { stroke-dashoffset: 60; }
    60%  { stroke-dashoffset: 0; }
    85%, 100% { stroke-dashoffset: -60; }
}

.ico-barra { transform-origin: bottom; animation: barra-crece 2.8s ease-in-out infinite; }
.ico-barra.b2 { animation-delay: .18s; }
.ico-barra.b3 { animation-delay: .36s; }
@keyframes barra-crece {
    0%, 100% { transform: scaleY(.35); }
    45%      { transform: scaleY(1); }
}

.ico-visto {
    stroke-dasharray: 22; stroke-dashoffset: 22;
    animation: visto-dibuja 3.4s ease-in-out infinite;
}
@keyframes visto-dibuja {
    0%, 15%  { stroke-dashoffset: 22; }
    45%, 80% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 22; }
}

/* Quien pide menos movimiento recibe la misma pantalla, quieta. */
@media (prefers-reduced-motion: reduce) {
    .arte-arco, .arte-aguja, .arte-pulso, .arte-puntos circle,
    .ico-pulso, .ico-barra, .ico-visto { animation: none; }
    .arte-arco { stroke-dashoffset: 400; }
    .arte-pulso, .ico-pulso, .ico-visto { stroke-dashoffset: 0; }
    .arte-puntos circle { opacity: .5; }
}

/* Selector de filas por página: va pegado al conteo, a la izquierda del paginador. */
.pag-tam { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; }
.pag-tam > span { font-size: .78rem; color: var(--color-muted); }
.campo-sm { padding: 5px 10px; font-size: .8rem; width: auto; min-width: 72px; }

/* ── Lista de seguimiento ──────────────────────────────────────────────────── */
.col-check { width: 40px; text-align: center; }
.col-check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

/* Barra de selección: aparece solo cuando hay algo marcado. */
.barra-seleccion {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 16px; padding: 12px 18px;
    background: var(--primary-subtle);
    border: 1px solid var(--primary);
    border-radius: var(--r-xl);
    font-size: .88rem;
}

/* Reparto del día en una barra: se lee de un vistazo, sin interpretar porcentajes sueltos. */
.barra-mix {
    display: flex; height: 8px; width: 100%; max-width: 220px;
    border-radius: var(--r-pill); overflow: hidden;
    background: var(--color-neutral-bg);
}
.barra-mix .seg { height: 100%; }
.barra-mix .seg-ok     { background: var(--serie-productivo); }
.barra-mix .seg-neutro { background: var(--serie-neutral); }
.barra-mix .seg-no     { background: var(--serie-improductivo); }

.pill .material-symbols-outlined { font-size: 14px; }

/* ── Avisos del acceso ─────────────────────────────────────────────────────
   Un solo estilo de mensaje, venga del navegador o del servidor. Entra con un
   deslizamiento corto: suficiente para que la vista lo note, no tanto como para
   estorbar a quien solo quiere entrar. */
.acceso-aviso {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 18px; padding: 12px 14px;
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    border-radius: var(--r-lg);
    color: var(--color-error-tx);
    font-size: .86rem; line-height: 1.45;
}
.acceso-aviso .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
.acceso-aviso.entra { animation: aviso-entra .26s cubic-bezier(.16,1,.3,1); }
@keyframes aviso-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Campo señalado: el mensaje dice qué falta y el borde dice dónde. */
.acceso-entrada.mal {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px var(--color-error-bg);
}

/* Botón enviando: se bloquea para que nadie pulse dos veces. */
.acceso-enviar.cargando { opacity: .85; cursor: progress; }
.acceso-cargando { display: none; }
.acceso-enviar.cargando .acceso-cargando {
    display: inline-block; width: 15px; height: 15px;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    border-radius: 50%;
    animation: gira 0.7s linear infinite;
}
.acceso-enviar.cargando .material-symbols-outlined { display: none; }
@keyframes gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .acceso-aviso.entra { animation: none; }
    .acceso-enviar.cargando .acceso-cargando { animation-duration: 2s; }
}

/* ── Fichas comparadas ─────────────────────────────────────────────────────
   Todas las tarjetas traen lo mismo y en el mismo orden: es lo que permite
   comparar de un vistazo en lugar de leer cuatro tarjetas distintas. */
.rejilla-fichas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.ficha-comp { display: flex; flex-direction: column; }
.ficha-comp-cuerpo { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ficha-comp .card-title a { color: inherit; text-decoration: none; }
.ficha-comp .card-title a:hover { text-decoration: underline; }

.ficha-comp-datos {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px;
}
.ficha-comp-datos b { display: block; font-size: 1.05rem; line-height: 1.2; }
.ficha-comp-datos small { color: var(--color-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }

.ficha-comp-sub { margin: 4px 0 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted); }
.ficha-comp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ficha-comp-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; }
.ficha-comp-pie { padding: 12px 20px; border-top: 1px solid var(--color-border); text-align: right; }

/* Muro filtrado: mismo mosaico, solo con lo seleccionado. */
.muro-aviso {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-bottom: 16px; padding: 11px 18px;
    background: var(--primary-subtle); border: 1px solid var(--primary);
    border-radius: var(--r-xl); font-size: .86rem;
}

/* ── Personas en el tablero ────────────────────────────────────────────────
   Tarjetas seleccionables: la unidad de trabajo del panel es la persona, no la
   fila de una tabla. Toda la tarjeta es el área de selección salvo el botón de
   abrir, para que marcar varias sea cómodo con ratón y con dedo. */
.rejilla-personas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px; padding: 16px 20px;
}
.persona {
    position: relative;
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) { .persona:hover { border-color: var(--primary); } }
.persona.marcada { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-subtle); }
.persona input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); cursor: pointer; }

/* Punto de estado: verde vivo si reporta, gris si no. */
.persona-estado {
    width: 9px; height: 9px; margin-top: 6px; border-radius: 50%;
    background: var(--color-muted); flex-shrink: 0;
}
.persona.conectada .persona-estado { background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-bg); }

.persona-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.persona-nombre { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-sub { font-size: .74rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-ir { padding: 4px 8px; align-self: center; }
.persona .barra-mix { height: 6px; margin: 2px 0; }

/* ── Flujo de actividad en tiempo real ─────────────────────────────────────
   La ruta tenía columna propia y, como casi todas son larguísimas, dejaba la
   fila ilegible. Ahora va bajo la descripción, recortada, con la completa en el
   título emergente. */
.tabla-flujo td { vertical-align: top; }
.flujo-linea { display: flex; align-items: flex-start; gap: 10px; }
.flujo-ico {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
}
.flujo-ico .material-symbols-outlined { font-size: 16px; }
.flujo-ico.de-app     { background: var(--color-info-bg);    color: var(--color-info); }
.flujo-ico.de-archivo { background: var(--color-warning-bg); color: var(--color-warning); }
.flujo-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.flujo-ruta {
    display: block; max-width: 72ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Resumen del día en la ficha ───────────────────────────────────────────
   Va arriba del todo porque es la respuesta: cómo le fue. Las tablas que vienen
   después son el sustento, y sustentar es lo segundo que se hace, no lo primero. */
.resumen-dia {
    display: grid; grid-template-columns: minmax(220px, auto) 1fr; gap: 18px 28px;
    align-items: center; padding: 18px 22px; margin-bottom: 16px;
}
.resumen-estado { display: flex; align-items: center; gap: 12px; }
.resumen-estado .persona-estado {
    /* .vivo ya existe para el distintivo "EN VIVO" y le metía relleno: el punto salía ovalado.
       Con nombre propio y tamaño fijo no depende de que nadie más reutilice esa clase. */
    width: 11px; height: 11px; margin: 0; flex: 0 0 11px; border-radius: 50%;
}
.resumen-estado .persona-estado.en-linea { background: var(--color-success); box-shadow: 0 0 0 4px var(--color-success-bg); }

.resumen-cifras { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.resumen-cifras b { display: block; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.01em; }
.resumen-cifras small { color: var(--color-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }

.resumen-barra { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.resumen-barra .barra-mix { height: 10px; }
.resumen-leyenda { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.punto-leyenda { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.punto-leyenda.ok     { background: var(--serie-productivo); }
.punto-leyenda.neutro { background: var(--serie-neutral); }
.punto-leyenda.no     { background: var(--serie-improductivo); }

@media (max-width: 760px) {
    .resumen-dia { grid-template-columns: 1fr; }
}

/* ── Gráficos de barras de la analítica ────────────────────────────────────
   Barras en HTML y no en SVG: son proporciones, no curvas, y así heredan el tema,
   se adaptan al ancho y quedan accesibles sin trabajo extra. */
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.barras li { display: grid; grid-template-columns: minmax(120px, 1.1fr) 3fr auto; gap: 12px; align-items: center; font-size: .85rem; }
.barras-etq { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras-etq a { color: inherit; }
.barras-pista { position: relative; height: 12px; background: var(--color-surface-sunken); border-radius: var(--r-pill); overflow: hidden; }
.barras-valor { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); }
.barras-valor.barras-encima { opacity: 1; }
.barras-valor.seg-ok     { background: var(--serie-productivo); }
.barras-valor.seg-neutro { background: var(--serie-neutral); }
.barras-valor.seg-no     { background: var(--serie-improductivo); }
.barras-num { font-variant-numeric: tabular-nums; color: var(--color-muted); white-space: nowrap; }

.barra-alta { height: 14px !important; max-width: none !important; }
.reparto-cifras { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 14px; }
.reparto-cifras b { display: block; font-size: 1.05rem; line-height: 1.2; }
.reparto-cifras small { color: var(--color-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.punto-leyenda.gris { background: var(--color-muted); }
.punto-leyenda.azul { background: var(--color-info); }

@media (max-width: 720px) {
    .barras li { grid-template-columns: 1fr; gap: 4px; }
    .barras-num { justify-self: start; }
}

/* ── Páginas de error ──────────────────────────────────────────────────────
   Centradas y sobrias: quien llega aquí ya tuvo un problema, así que la pantalla
   explica y ofrece salida en vez de decorar. La ilustración anima lo que dice. */
.estado {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 40px 24px; background: var(--color-bg);
}
.estado-caja {
    width: 100%; max-width: 560px; text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    padding: 40px 36px;
}
.estado-arte { width: 132px; height: 132px; margin: 0 auto 18px; }
.estado-arte svg { width: 100%; height: 100%; display: block; }
.estado-buscar   { color: var(--color-info); }
.estado-bloqueo  { color: var(--color-warning); }
.estado-reloj    { color: var(--color-warning); }
.estado-servidor { color: var(--color-error); }
.estado-aviso    { color: var(--color-muted); }

.estado-codigo {
    display: inline-block; margin-bottom: 10px; padding: 4px 12px;
    background: var(--color-surface-sunken); border-radius: var(--r-pill);
    font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-muted);
}
.estado-caja h1 { margin: 0 0 10px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); }
.estado-mensaje { margin: 0 0 8px; color: var(--color-text); }
.estado-sugerencia { margin: 0 0 22px; color: var(--color-muted); font-size: .9rem; }

.estado-incidente {
    display: inline-flex; align-items: center; gap: 10px; text-align: left;
    margin-bottom: 22px; padding: 10px 16px;
    background: var(--color-surface-sunken); border: 1px dashed var(--color-border);
    border-radius: var(--r-lg);
}
.estado-incidente small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted); }
.estado-incidente code { font-size: .95rem; font-weight: 700; letter-spacing: .04em; }

.estado-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Animaciones: cada una hace lo que el mensaje dice. */
.arte-lupa { animation: lupa-busca 3.2s ease-in-out infinite; transform-origin: 52px 52px; }
@keyframes lupa-busca {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    30%      { transform: translate(-7px, -4px) rotate(-8deg); }
    65%      { transform: translate(6px, 3px) rotate(6deg); }
}

.arte-arco-candado { animation: candado-cierra 3s ease-in-out infinite; transform-origin: 60px 56px; }
@keyframes candado-cierra {
    0%, 55%, 100% { transform: translateY(0); }
    25%           { transform: translateY(-5px); }
}
.arte-punto-candado { animation: punto-late 3s ease-in-out infinite; }

.arte-manecilla { transform-origin: 60px 60px; animation: aguja-gira 4s linear infinite; }

.arte-led { animation: led-parpadea 1.6s ease-in-out infinite; }
.arte-led.led-2 { animation-delay: .35s; }
@keyframes led-parpadea { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.arte-chispa {
    stroke-dasharray: 46; stroke-dashoffset: 46;
    animation: chispa-dibuja 2.4s ease-in-out infinite;
}
@keyframes chispa-dibuja {
    0%       { stroke-dashoffset: 46; opacity: .2; }
    45%, 70% { stroke-dashoffset: 0; opacity: 1; }
    100%     { stroke-dashoffset: 0; opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
    .arte-lupa, .arte-arco-candado, .arte-punto-candado,
    .arte-manecilla, .arte-led, .arte-chispa { animation: none; }
    .arte-chispa { stroke-dashoffset: 0; }
}

/* ── Bandeja de incidentes ─────────────────────────────────────────────────
   El rastro técnico va plegado: hace falta al investigar, estorba al hojear. */
.detalle-tecnico { margin-top: 8px; }
.detalle-tecnico summary {
    cursor: pointer; font-size: .78rem; color: var(--color-muted);
    user-select: none; width: fit-content;
}
.detalle-tecnico summary:hover { color: var(--primary); }
.detalle-tecnico pre {
    margin: 8px 0 0; padding: 12px 14px; max-height: 320px; overflow: auto;
    background: var(--color-surface-sunken); border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    font-size: .74rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.revisado-nota { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--color-success-tx); }
.revisado-nota .material-symbols-outlined { font-size: 15px; }
.btn.disabled { pointer-events: none; opacity: .45; }

/* ── Reportes: iconos animados, gráficos y bloques ───────────────────────────
   Los iconos son SVG en línea y no una fuente de iconos: así se animan de verdad,
   heredan el color del tema y siguen viéndose en el PDF, que es donde acaba el
   reporte cuando alguien lo lleva a una reunión. */
.ico-anim { width: 24px; height: 24px; display: block; }
.ico-anim [stroke] { stroke: currentColor; }
.ico-anim [fill]:not([fill="none"]) { fill: currentColor; }

@keyframes rep-subir { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@keyframes rep-girar { to { transform: rotate(360deg); } }
@keyframes rep-latido { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes rep-caer { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes rep-recorrer { to { stroke-dashoffset: 0; } }

.ico-barra { transform-origin: center bottom; animation: rep-subir 2.4s var(--ease, ease-in-out) infinite; }
.ico-barra:nth-of-type(2) { animation-delay: .25s; }
.ico-barra:nth-of-type(3) { animation-delay: .5s; }
.ico-aguja { transform-origin: 12px 12px; animation: rep-girar 6s linear infinite; }
.ico-onda { transform-origin: center; animation: rep-latido 1.8s ease-in-out infinite; }
.ico-onda:nth-of-type(2) { animation-delay: .35s; }
.ico-grano { animation: rep-caer 1.7s ease-in infinite; }
.ico-trazo { stroke-dasharray: 120; stroke-dashoffset: 120; animation: rep-recorrer 1.6s var(--ease, ease-out) forwards; }

/* Veredicto: la frase que resume el periodo antes de cualquier tabla. */
.rep-veredicto {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px; border-radius: var(--r-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}
.rep-veredicto .ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
/* El <b> del titular es el ÚNICO que va en su propia línea. Cuando la regla se aplicaba a
   todos, cada dato resaltado dentro del párrafo rompía el texto en trozos sueltos. */
.rep-veredicto > div > b { display: block; font-size: 1rem; color: var(--color-text); line-height: 1.4; }
.rep-veredicto p { margin: 6px 0 0; font-size: .86rem; color: var(--color-muted); line-height: 1.6; }
.rep-veredicto p b { font-weight: 800; color: var(--color-text); }
.rep-veredicto.es-ok    { border-color: color-mix(in srgb, var(--color-success) 40%, transparent); }
.rep-veredicto.es-ok    .ico { background: var(--color-success-bg); color: var(--color-success); }
.rep-veredicto.es-medio .ico { background: var(--color-warning-bg); color: var(--color-warning); }
.rep-veredicto.es-medio { border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); }
.rep-veredicto.es-bajo  .ico { background: var(--color-error-bg);   color: var(--color-error); }
.rep-veredicto.es-bajo  { border-color: color-mix(in srgb, var(--color-error) 40%, transparent); }

/* Gráficos en SVG servidos ya calculados: sin librerías y sin parpadeo al cargar. */
.rep-grafico { width: 100%; height: auto; display: block; }
.rep-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.rep-donut { width: 190px; height: 190px; flex: none; }
.rep-donut .aro { transition: stroke-dasharray .6s var(--ease-spring, ease-out); }
.rep-donut-centro { text-anchor: middle; }
.rep-donut-centro .n { font-size: 30px; font-weight: 800; fill: var(--color-text); }
.rep-donut-centro .t { font-size: 9px; font-weight: 600; fill: var(--color-muted); letter-spacing: .04em; }

.rep-leyenda { display: flex; flex-direction: column; gap: 10px; min-width: 190px; }
.rep-leyenda li { display: flex; align-items: center; gap: 10px; font-size: .84rem; }
.rep-leyenda .punto { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.rep-leyenda .nom { flex: 1; color: var(--color-muted); }
.rep-leyenda .val { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Comparativa por departamento y rankings de uso. */
.rep-lista { display: flex; flex-direction: column; gap: 14px; }
.rep-lista .fila { display: grid; grid-template-columns: minmax(120px, 1.1fr) 3fr auto; gap: 12px; align-items: center; }
.rep-lista .nom { font-size: .84rem; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-lista .nom small { display: block; font-weight: 500; font-size: .74rem; color: var(--color-muted); }
.rep-lista .val { font-size: .82rem; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-lista .barra-mix { min-width: 60px; }
.rep-barra-simple { height: 10px; border-radius: 999px; background: var(--color-surface-sunken); overflow: hidden; }
.rep-barra-simple span { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--ease-spring, ease-out); }

@media (max-width: 760px) {
    .rep-lista .fila { grid-template-columns: 1fr auto; }
    .rep-lista .barra-mix, .rep-lista .rep-barra-simple { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .ico-barra, .ico-aguja, .ico-onda, .ico-grano, .ico-trazo { animation: none; }
    .ico-trazo { stroke-dashoffset: 0; }
}

@media print {
    .rep-veredicto { break-inside: avoid; }
    .rep-donut, .rep-grafico { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* La barra de activo dentro de la tabla comparte la fila con el número, igual que el %. */
.rep-pct .rep-barra-simple { min-width: 64px; }

/* ── Reportes: mapa de calor, jornada e histograma ───────────────────────── */
.rep-calor { display: grid; grid-template-columns: 42px repeat(24, 1fr); gap: 2px; min-width: 620px; }
.rep-calor .hd { font-size: .62rem; color: var(--color-muted); text-align: center; padding-bottom: 2px; }
.rep-calor .dia { font-size: .7rem; color: var(--color-muted); display: flex; align-items: center; }
.rep-calor .celda { aspect-ratio: 1; border-radius: 3px; min-height: 15px; }

.rep-jornada { display: flex; flex-direction: column; gap: 9px; }
.rep-jornada .fila { display: grid; grid-template-columns: minmax(130px, 1.1fr) 4fr auto; gap: 12px; align-items: center; }
.rep-jornada .pista {
    position: relative; height: 18px; border-radius: 6px;
    background: var(--color-surface-sunken); overflow: hidden;
}
.rep-jornada .tramo {
    position: absolute; top: 0; bottom: 0; border-radius: 6px;
    background: linear-gradient(90deg, var(--primary), var(--serie-reunion));
}
.rep-jornada .marca { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border-strong); opacity: .6; }
.rep-jornada .eje { display: grid; grid-template-columns: minmax(130px, 1.1fr) 4fr auto; gap: 12px; }
.rep-jornada .eje .horas { display: flex; justify-content: space-between; font-size: .68rem; color: var(--color-muted); }

.rep-histo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; }
.rep-histo .col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rep-histo .caja { width: 100%; height: 110px; display: flex; align-items: flex-end; }
.rep-histo .barra { width: 100%; border-radius: 8px 8px 0 0; min-height: 3px; transition: height .6s var(--ease-spring, ease-out); }
.rep-histo .n { font-size: 1.1rem; font-weight: 800; color: var(--color-text); }
.rep-histo .etq { font-size: .72rem; color: var(--color-muted); text-align: center; }

/* Conmutador de gráfico dentro de la cabecera de una tarjeta. */
.rep-conmutador { display: flex; gap: 4px; background: var(--color-surface-sunken); padding: 3px; border-radius: 999px; }
.rep-conmutador button {
    border: 0; background: transparent; cursor: pointer;
    padding: 5px 12px; border-radius: 999px;
    font-size: .76rem; font-weight: 700; color: var(--color-muted);
    font-family: inherit;
}
.rep-conmutador button.on { background: var(--color-surface); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ── Impresión del reporte ───────────────────────────────────────────────────
   El PDF es el formato en el que este reporte sale de la oficina, así que se trata
   como un documento y no como una captura de la pantalla: más contraste, colores
   que sí se imprimen y, sobre todo, nada partido entre dos páginas. Un gráfico o
   una fila cortados por la mitad convierten un anexo formal en un borrador. */
@media print {
    :root, :root[data-theme="dark"], :root[data-theme="auto"] {
        --color-muted: #333; --color-subtle: #444;
        --color-border: #9AA3B2; --color-border-strong: #5B6577;
        --color-surface-sunken: #EDF0F7;
        --serie-neutral: #6B7687;
    }

    /* Los colores de las barras, el donut y los distintivos son el contenido, no
       decoración: sin esto el navegador los quita y el reporte pierde el sentido. */
    *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    .card { border: 1px solid #8892A4 !important; }
    .card-head { border-bottom: 1px solid #8892A4 !important; }
    .sub, .card-sub, .kpi-etq { color: #333 !important; }

    /* Nada se parte: ni una tarjeta, ni un gráfico, ni una fila de tabla. */
    .card, .kpi, .kpis, .rep-veredicto, .rep-donut-wrap, .rep-grafico,
    .rep-lista .fila, .rep-jornada .fila, .rep-histo, .rep-calor,
    svg, tr, thead, tfoot { break-inside: avoid !important; page-break-inside: avoid !important; }

    /* Si una tabla larga sí debe repartirse, al menos que cada página lleve sus
       encabezados: una página de números sin títulos de columna no se puede leer. */
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }

    /* Las tarjetas grandes empiezan en página nueva si no caben enteras. */
    .grid-2 > .card, .grid-3 > .card { break-inside: avoid !important; }
    .grid-2, .grid-3 { display: block !important; }
    .grid-2 > .card, .grid-3 > .card { margin-bottom: 14px !important; }

    .kpis { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; }
    .kpi { padding: 10px !important; }
    .kpi-valor { font-size: 1.05rem !important; }

    /* El membrete se repite arriba de cada página del reporte. */
    .rep-membrete { border-bottom: 2px solid #00167B !important; }
    .rep-membrete img { height: 46px; }

    /* El mapa de calor tiene 24 columnas: en A4 apaisado cabe, pero sin scroll. */
    .rep-calor { min-width: 0 !important; }
    .tabla-wrap { overflow: visible !important; }

    /* Un enlace azul subrayado en papel no lleva a ninguna parte; se imprime como texto. */
    .tabla a { color: #111 !important; text-decoration: none !important; }
}

/* El atributo hidden de HTML no oculta elementos SVG en todos los navegadores: el conmutador
   del gráfico depende de esto, así que se declara explícitamente. */
.rep-grafico g[data-serie][hidden] { display: none; }

/* ── Ingresos: línea de tiempo de jornadas ───────────────────────────────────
   Una fila por jornada sobre una escala fija de 24 h. La escala es fija a
   propósito: si cada fila se ajustara a sus propias horas, dos días dejarían de
   ser comparables de un vistazo, que es justo para lo que sirve el gráfico. */
.ing-tiempo { display: flex; flex-direction: column; gap: 7px; }
.ing-tiempo .fila { display: grid; grid-template-columns: minmax(150px, 1.2fr) 4fr minmax(96px, auto); gap: 12px; align-items: center; }
.ing-tiempo .nom { font-size: .82rem; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ing-tiempo .nom small { display: block; font-weight: 500; font-size: .72rem; color: var(--color-muted); }
.ing-tiempo .pista {
    position: relative; height: 20px; border-radius: 6px;
    background: var(--color-surface-sunken); overflow: hidden;
}
.ing-tiempo .tramo { position: absolute; top: 0; bottom: 0; }
.ing-tiempo .tramo-activo { background: linear-gradient(180deg, var(--serie-productivo), color-mix(in srgb, var(--serie-productivo) 78%, #000)); }
.ing-tiempo .tramo-pausa { background: repeating-linear-gradient(45deg, var(--serie-inactivo) 0 5px, color-mix(in srgb, var(--serie-inactivo) 72%, #000) 5px 10px); }
.ing-tiempo .marca { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border-strong); opacity: .45; }
.ing-tiempo .val { font-size: .78rem; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ing-tiempo .val small { display: block; font-weight: 600; color: var(--color-muted); }
.ing-eje { display: grid; grid-template-columns: minmax(150px, 1.2fr) 4fr minmax(96px, auto); gap: 12px; margin-top: 2px; }
.ing-eje .horas { display: flex; justify-content: space-between; font-size: .66rem; color: var(--color-muted); }

.ing-leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: .78rem; color: var(--color-muted); }
.ing-leyenda span.m { display: inline-block; width: 22px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }

/* Bitácora: un icono por tipo de hecho, con su color. */
.ing-hito { display: flex; align-items: center; gap: 10px; }
.ing-hito .ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.ing-hito b { font-weight: 700; color: var(--color-text); font-size: .84rem; }
.ing-hito small { display: block; color: var(--color-muted); font-size: .74rem; }
.ing-ico-ok    { background: var(--color-success-bg); color: var(--color-success); }
.ing-ico-pausa { background: var(--color-warning-bg); color: var(--color-warning); }
.ing-ico-fin   { background: var(--color-error-bg);   color: var(--color-error); }
.ing-ico-info  { background: var(--primary-subtle);   color: var(--primary); }

/* Segmentado de granularidad (día / semana / mes). */
.ing-granos { display: flex; gap: 4px; background: var(--color-surface-sunken); padding: 3px; border-radius: 999px; }
.ing-granos a {
    padding: 6px 14px; border-radius: 999px; text-decoration: none;
    font-size: .78rem; font-weight: 700; color: var(--color-muted);
}
.ing-granos a.on { background: var(--color-surface); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

@media (max-width: 760px) {
    .ing-tiempo .fila, .ing-eje { grid-template-columns: 1fr auto; }
    .ing-tiempo .pista { grid-column: 1 / -1; }
    .ing-eje .horas { grid-column: 1 / -1; }
}

@media print {
    .ing-tiempo .fila, .ing-hito { break-inside: avoid !important; }
    .ing-tiempo .tramo-activo, .ing-tiempo .tramo-pausa { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Navegación asíncrona ────────────────────────────────────────────────────
   La barra de progreso sustituye al parpadeo en blanco de la recarga: cuando el
   cambio de pantalla es instantáneo casi no se ve, y cuando la consulta tarda,
   deja claro que algo está pasando en vez de parecer que el clic se perdió. */
.nav-progreso {
    position: fixed; inset: 0 auto auto 0; z-index: 9999;
    height: 3px; width: 0;
    background: linear-gradient(90deg, var(--primary), var(--color-info, #0077B6));
    opacity: 0; pointer-events: none;
    transition: width .35s var(--ease, ease-out), opacity .25s ease;
}
.nav-progreso.activa { opacity: 1; }
.nav-progreso.lleno { width: 88%; transition-duration: 1.4s; }
.nav-progreso.activa:not(.lleno) { width: 0; }
.nav-progreso:not(.activa) { width: 100%; transition-duration: .2s; }

/* Mientras se cambia de pantalla el contenido no se vacía de golpe: se atenúa un
   poco, que es bastante menos brusco que quedarse en blanco. */
#contenido { animation: nav-entrar .22s var(--ease, ease-out); }
@keyframes nav-entrar { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    #contenido { animation: none; }
    .nav-progreso { transition: opacity .2s ease; }
}

/* ── Selector de personas (modal) ────────────────────────────────────────────
   Mismo cuidado que en .dlg: el reset global pone margin:0 a TODO, y eso incluye
   el margin:auto con el que el navegador centra un <dialog> modal. Sin devolverlo
   aquí, el diálogo se pega a la esquina superior izquierda. */
.sel-modal {
    margin: auto;
    border: 0; padding: 0; background: none;
    color: var(--color-text);
    max-width: min(720px, calc(100vw - 32px)); width: 100%;
    max-height: calc(100vh - 48px);
    overflow: visible;
}
.sel-modal::backdrop { background: rgba(8, 14, 34, .55); backdrop-filter: blur(3px); }
.sel-modal[open] { animation: dlg-entra .24s var(--ease-spring) both; }
.sel-modal[open]::backdrop { animation: fundido .24s var(--ease) both; }
.sel-caja {
    display: flex; flex-direction: column; gap: 14px;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    padding: 22px; max-height: calc(100vh - 48px);
    overflow: hidden;
}
.sel-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sel-cab h2 { margin: 0; font-size: 1.12rem; font-weight: 800; }
.sel-cab .sub { margin: 4px 0 0; font-size: .82rem; color: var(--color-muted); line-height: 1.5; }

.sel-modos { display: flex; gap: 4px; background: var(--color-surface-sunken); padding: 4px; border-radius: 999px; }
.sel-modos button {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 0; background: transparent; cursor: pointer; font-family: inherit;
    padding: 9px 12px; border-radius: 999px;
    font-size: .82rem; font-weight: 700; color: var(--color-muted);
}
.sel-modos button .material-symbols-outlined { font-size: 18px; }
.sel-modos button.on { background: var(--color-surface); color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.14); }

.sel-buscador { position: relative; }
.sel-buscador .material-symbols-outlined {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 20px; color: var(--color-muted); pointer-events: none;
}
.sel-buscador input {
    width: 100%; padding: 11px 14px 11px 40px;
    background: var(--color-surface-alt); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--r-md);
    font-family: inherit; font-size: .88rem;
}
.sel-buscador input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-shadow); }

.sel-fichas {
    /* flex:1 + min-height:0 es lo que deja que la lista se encoja y tenga su propio
       desplazamiento dentro del diálogo, en vez de empujar el pie fuera de la pantalla. */
    flex: 1; min-height: 0; overflow-y: auto;
    display: grid; gap: 6px; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    padding: 2px;
}
.sel-ficha {
    display: flex; align-items: center; gap: 11px; text-align: left;
    padding: 10px 12px; cursor: pointer; font-family: inherit;
    background: var(--color-surface-alt); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--r-md);
    transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
@media (hover: hover) { .sel-ficha:hover { border-color: var(--primary); } }
.sel-ficha .ini {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--primary-subtle); color: var(--primary);
    font-size: .76rem; font-weight: 800; letter-spacing: .02em;
}
.sel-ficha .txt { flex: 1; min-width: 0; }
.sel-ficha .txt b { display: block; font-size: .84rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-ficha .txt small { display: block; font-size: .73rem; color: var(--color-muted); }
.sel-ficha .marca { font-size: 20px; color: var(--color-border-strong); opacity: .35; }
.sel-ficha.elegida { border-color: var(--primary); background: var(--primary-subtle); }
.sel-ficha.elegida .marca { color: var(--primary); opacity: 1; }
.sel-ficha.apagada { opacity: .4; cursor: not-allowed; }

.sel-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ── Ingresos: pantalla de elección ──────────────────────────────────────── */
.elegir { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.elegir-opcion {
    display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
    padding: 24px; cursor: pointer; text-align: left; font-family: inherit;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) {
    .elegir-opcion:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
}
.elegir-opcion .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.elegir-opcion b { font-size: 1rem; font-weight: 800; }
.elegir-opcion p { margin: 0; font-size: .83rem; color: var(--color-muted); line-height: 1.55; }
.elegir-opcion .paso { font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: var(--primary); text-transform: uppercase; }

.elegir-rapido { display: flex; flex-wrap: wrap; gap: 8px; }
.elegir-rapido button {
    display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit;
    padding: 7px 13px; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: var(--color-surface-alt); color: var(--color-text);
    border: 1px solid var(--color-border);
}
@media (hover: hover) { .elegir-rapido button:hover { border-color: var(--primary); color: var(--primary); } }
.elegir-rapido .ini {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--primary-subtle); color: var(--primary); font-size: .66rem; font-weight: 800;
}

/* ── Ingresos: comparación y calendario ─────────────────────────────────── */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.comp-ficha {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px; border: 1px solid var(--color-border); border-radius: var(--r-lg);
    background: var(--color-surface-alt);
}
.comp-ficha header { display: flex; align-items: center; gap: 11px; }
.comp-ficha .ini { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; }
.comp-ficha header b { display: block; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-ficha header small { display: block; font-size: .72rem; color: var(--color-muted); }
.comp-barra { height: 8px; border-radius: 999px; background: var(--color-surface-sunken); overflow: hidden; }
.comp-barra span { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--ease-spring, ease-out); }
.comp-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin: 0; }
.comp-datos div { min-width: 0; }
.comp-datos dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); font-weight: 700; }
.comp-datos dd { margin: 1px 0 0; font-size: .86rem; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }

.cal-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-bottom: 16px; font-size: .76rem; color: var(--color-muted); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-leyenda .sep { margin-left: auto; }
.cal-muestra { width: 15px; height: 15px; border-radius: 4px; display: inline-block; border: 1px solid transparent; }

.cal-meses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.cal-titulo { font-size: .84rem; font-weight: 800; color: var(--color-text); margin-bottom: 9px; text-transform: capitalize; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dn { text-align: center; font-size: .66rem; font-weight: 800; color: var(--color-muted); padding-bottom: 2px; }
.cal-dia {
    position: relative; aspect-ratio: 1; border-radius: 7px;
    border: 1px solid transparent; padding: 4px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.cal-dia .n { font-size: .68rem; font-weight: 700; color: var(--color-text); opacity: .8; }
.cal-dia .h { font-size: .6rem; font-weight: 800; color: var(--color-text); }
.cal-dia .vacio-marca { color: var(--color-muted); opacity: .5; }

/* Cinco niveles fijos en horas. Con una rampa continua relativa al máximo del rango, el mismo
   día se pintaba distinto según con qué se le comparara y el color dejaba de decir nada. */
.cal-muestra.n0, .cal-dia.n0 { background: var(--color-surface-sunken); }
.cal-muestra.n1, .cal-dia.n1 { background: color-mix(in srgb, var(--serie-productivo) 22%, var(--color-surface-sunken)); }
.cal-muestra.n2, .cal-dia.n2 { background: color-mix(in srgb, var(--serie-productivo) 45%, var(--color-surface-sunken)); }
.cal-muestra.n3, .cal-dia.n3 { background: color-mix(in srgb, var(--serie-productivo) 70%, var(--color-surface-sunken)); }
.cal-muestra.n4, .cal-dia.n4 { background: var(--serie-productivo); }
.cal-dia.n3 .n, .cal-dia.n3 .h, .cal-dia.n4 .n, .cal-dia.n4 .h { color: #fff; opacity: 1; }

.cal-muestra.hoy, .cal-dia.hoy { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cal-dia.finde:not(.n0) { }
.cal-dia.finde.n0 { background: transparent; border: 1px dashed var(--color-border); }
.cal-dia.fuera { opacity: .25; }
.cal-dia.vacia { background: transparent !important; border: 0; }

@media print {
    .comp-ficha, .cal-mes { break-inside: avoid !important; }
    .cal-dia, .comp-barra span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Seis indicadores: con el reparto automático, el sexto caía solo a una segunda fila y la
   tira quedaba coja. Se fija el número de columnas para que siempre reparta parejo:
   6, luego 3+3 y luego 2+2+2. Nunca una tarjeta suelta. */
.kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpis-6 .kpi { padding: 14px; gap: 10px; }
.kpis-6 .kpi-valor { font-size: 1.28rem; }
@media (max-width: 1480px) { .kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 840px) { .kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .kpis-6 { grid-template-columns: repeat(6, 1fr) !important; } }

/* ── Línea de tiempo de la jornada (detalle de empleado): horizontal, animada, en vivo ── */
.jornada-hero { padding: 16px 20px 18px; }
.jornada-cab { display:flex; align-items:center; gap:8px; margin-bottom:14px; font-weight:600; color:var(--color-text); }
.jornada-cab .material-symbols-outlined { color:#2563eb; }
.jornada-envivo { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; color:#1b8a5a; }
.jornada-envivo .punto { width:8px; height:8px; border-radius:50%; background:#1b8a5a; animation:jornada-pulso 1.6s infinite; }
.jornada-track { position:relative; height:24px; border-radius:12px; background:var(--color-surface-sunken, #eef1f6); overflow:visible; }
.jornada-fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:12px;
    background:linear-gradient(90deg, rgba(27,138,90,.30), rgba(37,99,235,.45)); transition:width .8s linear;
    background-size:200% 100%; animation:jornada-shimmer 3s linear infinite; }
.jornada-ahora { position:absolute; top:-3px; bottom:-3px; width:3px; background:#12245c; border-radius:2px; transition:left .8s linear; z-index:2; }
.jornada-ahora::after { content:''; position:absolute; left:50%; top:-6px; transform:translateX(-50%);
    width:13px; height:13px; border-radius:50%; background:#12245c; animation:jornada-pulso 1.6s infinite; }
.jornada-escala { display:flex; justify-content:space-between; margin-top:7px; font-size:.72rem; color:var(--color-muted); }
.jornada-hitos { display:flex; justify-content:space-between; margin-top:10px; font-size:.82rem; color:var(--color-muted); }
.jornada-hito { display:inline-flex; align-items:center; gap:5px; }
.jornada-hito .material-symbols-outlined { font-size:18px; }
.jornada-hito.fin { color:var(--color-muted); }
@keyframes jornada-pulso { 0%{box-shadow:0 0 0 3px rgba(18,36,92,.30)} 70%{box-shadow:0 0 0 10px rgba(18,36,92,0)} 100%{box-shadow:0 0 0 3px rgba(18,36,92,0)} }
@keyframes jornada-shimmer { 0%{background-position:0% 0} 100%{background-position:-200% 0} }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jornada-ahora, :root:not([data-theme="light"]) .jornada-ahora::after { background:#c7d2fe; } }
:root[data-theme="dark"] .jornada-ahora, :root[data-theme="dark"] .jornada-ahora::after { background:#c7d2fe; }

/* ── Cumplimiento de la meta laboral (reportes y analítica) ─────────────────────
   La misma regla dibujada igual en las dos pantallas: anillo con el % de personas que
   cumplen (reportes) y barra lineal con marca de umbral (analítica). Todo con tokens del
   tema para que funcione en claro y oscuro sin duplicar reglas. */
.cumpl-card .card-title .material-symbols-outlined { color: var(--serie-productivo); }

.cumpl-grid { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.cumpl-dona-wrap { flex: 0 0 auto; }
.cumpl-dona { width: 150px; height: 150px; }
.cumpl-dona .aro { transition: stroke-dasharray .9s ease; }
.cumpl-dona-centro .n { font-size: 34px; font-weight: 800; fill: var(--color-text); text-anchor: middle; }
.cumpl-dona-centro .t { font-size: 11px; font-weight: 700; letter-spacing: .12em; fill: var(--color-muted); text-anchor: middle; }

.cumpl-detalle { flex: 1 1 260px; min-width: 240px; }
.cumpl-num { font-size: 1.15rem; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.cumpl-num b { color: var(--serie-productivo); font-size: 1.55rem; }
.cumpl-exp { font-size: .9rem; color: var(--color-muted); line-height: 1.55; margin: 0 0 12px; }
.cumpl-exp a { color: var(--primary); font-weight: 600; }
.cumpl-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cumpl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: .82rem; font-weight: 700; }
.cumpl-chip .material-symbols-outlined { font-size: 17px; }
.cumpl-chip.ok { background: color-mix(in srgb, var(--serie-productivo) 16%, transparent); color: var(--serie-productivo); }
.cumpl-chip.no { background: color-mix(in srgb, var(--serie-improductivo) 16%, transparent); color: var(--serie-improductivo); }
.cumpl-barra { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--color-surface-sunken); }
.cumpl-barra .seg-ok { background: var(--serie-productivo); }
.cumpl-barra .seg-no { background: var(--serie-improductivo); }

/* Etiqueta compacta: en la columna de la tabla y en el encabezado de analítica */
.cumpl-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .8rem; white-space: nowrap; }
.cumpl-tag.ok { color: var(--serie-productivo); }
.cumpl-tag.no { color: var(--serie-improductivo); }
.cumpl-tag.grande { padding: 5px 12px; border-radius: 20px; font-size: .85rem; }
.cumpl-tag.grande.ok { background: color-mix(in srgb, var(--serie-productivo) 16%, transparent); }
.cumpl-tag.grande.no { background: color-mix(in srgb, var(--serie-improductivo) 16%, transparent); }
.cumpl-tag.grande .material-symbols-outlined { font-size: 18px; }

/* Barra lineal con marca de umbral (analítica) */
.cumpl-linea-cab { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: .92rem; color: var(--color-text); }
.cumpl-linea { position: relative; height: 22px; border-radius: 11px; background: var(--color-surface-sunken); overflow: hidden; margin-bottom: 12px; }
.cumpl-linea .fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width .9s ease; }
.cumpl-linea .umbral { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-text); opacity: .5; }
@media print { .cumpl-dona .aro, .cumpl-barra span, .cumpl-linea .fill, .cumpl-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ── Select buscable ("select2" sin dependencias) ─────────────────────────────────
   El <select> nativo queda oculto (conserva value/envío/eventos) y encima se dibuja un botón que
   abre un desplegable con buscador. El pop se ancla al body con position:fixed. */
.selb-nativo { display: none !important; }
.selb-boton { display: inline-flex; align-items: center; gap: 8px; justify-content: space-between; width: 100%;
    background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 8px 10px; font: inherit; cursor: pointer; text-align: left; min-height: 38px; }
.selb-boton:hover { border-color: var(--primary); }
.selb-boton:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.selb-boton .selb-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.selb-boton.selb-vacia .selb-txt { color: var(--color-muted); }
.selb-flecha { font-size: 20px; color: var(--color-muted); flex: 0 0 auto; }
.selb-pop { position: fixed; z-index: 1200; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 10px; box-shadow: 0 12px 34px rgba(15, 23, 42, .22); overflow: hidden; max-width: min(92vw, 440px); }
.selb-busca { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.selb-busca .material-symbols-outlined { font-size: 19px; color: var(--color-muted); }
.selb-input { flex: 1; border: 0; background: transparent; color: var(--color-text); font: inherit; outline: none; }
.selb-lista { max-height: 262px; overflow-y: auto; padding: 4px; }
.selb-op { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .92rem; color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selb-op:hover, .selb-op.activa { background: var(--color-surface-sunken); }
.selb-op.sel { font-weight: 600; color: var(--primary); }
.selb-op.dis { opacity: .5; cursor: default; }
.selb-vacio { padding: 12px; text-align: center; color: var(--color-muted); font-size: .88rem; }

/* ── Interruptor (toggle) reutilizable ── */
.sw { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw .pista { width: 40px; height: 22px; border-radius: 11px; background: var(--color-border); transition: background .18s; flex: 0 0 auto; }
.sw .bolita { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.sw input:checked + .pista { background: var(--serie-productivo, #1b8a5a); }
.sw input:checked + .pista + .bolita { left: 21px; }
.sw input:focus-visible + .pista { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Resumen de organización (KPIs + barras por área) ── */
.org-barras { display: flex; flex-direction: column; gap: 9px; }
.org-barra { display: grid; grid-template-columns: 190px 1fr 42px; align-items: center; gap: 10px; font-size: .88rem; }
.org-barra .nom { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-barra .pista { height: 12px; border-radius: 6px; background: var(--color-surface-sunken); overflow: hidden; }
.org-barra .pista span { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.org-barra .num { text-align: right; font-weight: 700; color: var(--color-text); }
@media (max-width: 640px) { .org-barra { grid-template-columns: 120px 1fr 34px; } }

.kpi-de { color: var(--color-muted); font-size: .58em; font-weight: 600; }

.sw .sw-txt { margin-left: 8px; font-weight: 600; font-size: .9rem; color: var(--color-text); }

/* ── Hitos de la jornada en la línea de tiempo (encendido/bloqueo/desbloqueo/apagado) ── */
.jornada-pin { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 3;
    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--color-surface, #fff); border: 2px solid var(--color-muted, #6b7280); color: var(--color-muted, #6b7280);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }
.jornada-pin .material-symbols-outlined { font-size: 13px; }
.jornada-pin.ini { border-color: #1b8a5a; color: #1b8a5a; }
.jornada-pin.pausa { border-color: #b7791f; color: #b7791f; }
.jornada-pin.fin { border-color: #c0392b; color: #c0392b; }

.jornada-eventos { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.jornada-evento { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--color-muted); }
.jornada-evento b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.jornada-evento .material-symbols-outlined { font-size: 17px; }
.jornada-evento.ini .material-symbols-outlined { color: #1b8a5a; }
.jornada-evento.pausa .material-symbols-outlined { color: #b7791f; }
.jornada-evento.fin .material-symbols-outlined { color: #c0392b; }
.jornada-evento.vacio { font-style: italic; }

/* ── Encabezados de sección "pro" + campos en rejilla (Ajustes y Organización) ────── */
.ajuste-cab { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ajuste-cab .tit { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ajuste-cab .tit .card-title { margin: 0; }
.ajuste-cab .tit .sub { color: var(--color-muted); font-size: .84rem; }
.ajuste-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ajuste-ico .material-symbols-outlined { font-size: 22px; }
.ajuste-ico.azul { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.ajuste-ico.verde { background: color-mix(in srgb, var(--serie-productivo) 16%, transparent); color: var(--serie-productivo); }
.ajuste-ico.ambar { background: color-mix(in srgb, #b7791f 18%, transparent); color: #b7791f; }
.ajuste-ico.morado { background: color-mix(in srgb, #7c3aed 16%, transparent); color: #7c3aed; }
.ajuste-ico.rojo { background: color-mix(in srgb, var(--serie-improductivo) 16%, transparent); color: var(--serie-improductivo); }

.ajustes-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.ajuste-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ajuste-campo > label { font-size: .76rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.ajuste-campo.crece { grid-column: 1 / -1; }
.ajuste-nota { font-size: .85rem; color: var(--color-muted); line-height: 1.55; margin: 14px 0 0; }
.ajuste-nota a { color: var(--primary); font-weight: 600; }
.ajuste-aviso { margin-top: 18px; border-radius: 10px; border: 1px solid var(--color-border); }

.ajuste-bloque { padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 16px; background: var(--color-surface-sunken, #f8fafc); }
.ajuste-bloque-tit { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .92rem; color: var(--color-text); margin-bottom: 12px; }
.ajuste-bloque-tit .material-symbols-outlined { font-size: 19px; color: var(--primary); }
.ajuste-acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.sw-fila { margin: 2px 0; }