/* ==========================================================================
   Suministro+ · vista «Control» — hoja de diseño (TN-662, 28-oct-2026)
   Orden de Rodolfo en llamada, 11:11 obra: «impresionante, simétrica, muy visual»,
   SIN cambiar la funcionalidad. Esto es SÓLO piel: ningún selector toca lógica.

   Se carga DESPUÉS del <style> de index.html (gana por orden y por el alcance #vistaControl).
   Tokens de la página: --surface --surface2 --surface3 --border --text --text-muted --text-dim
   --verde --naranja --rojo --oro --azul --cyan --morado. El tema claro (body.light-theme)
   cambia esos tokens solo; aquí sólo se corrige lo que un token no resuelve (texto sobre oro).

   Contrato con el HTML (lo pone el follower):
   · #ctlKpis > .kpi-card.ctl-kpi ×8, cada una con style="--kpi-color:…". Opcional style="--pct:42"
     (número 0-100, SIN «%»): dibuja la barra de abajo; sin --pct la barra no existe.
   · .ctl-leyenda con hijos «<span class="ctl-paso on">Req</span> Comprobado» (on · dicho · «» · na).
   · .ctl-btn-subir (por fila) y .ctl-btn-reporte (barra de filtros).
   · Modal: .modal-overlay / .modal-box con la clase .ctl-modal en el overlay O en la caja;
     categorías como botones .ctl-cat (+ .on), idealmente dentro de .ctl-cats.
   · Opcional: style="--pct:72" en un .ctl-avance dibuja una barrita bajo el porcentaje de la fila.
   ========================================================================== */

/* --- Color de texto sobre oro: el oro puro sobre blanco no se lee, se oscurece en tema claro --- */
:root { --ctl-oro-txt: var(--oro); --ctl-sobre-luz: #0b1f10; }
body.light-theme { --ctl-oro-txt: #7a5d05; --ctl-sobre-luz: #0b1f10; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    body.light-theme { --ctl-oro-txt: color-mix(in srgb, var(--oro) 52%, #000); }
}

#vistaControl { min-width: 0; max-width: 100%; }

/* ==========================================================================
   1 · Línea de fuente — cada hoja del control, como etiqueta
   ========================================================================== */
#vistaControl .ctl-fuente { gap: 8px; margin-bottom: 16px; }
#vistaControl .ctl-fuente > span {
    min-width: 0; max-width: 100%; overflow-wrap: anywhere;
    padding: 5px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border);
}
#vistaControl .ctl-fuente code { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .3px; }

/* ==========================================================================
   2 · Rejilla de KPI — ocho tarjetas simétricas
       ≥1401 px: 8 × 1 · ≤1400 px: 4 × 2 · ≤700 px: 2 × 4
   ========================================================================== */
#vistaControl #ctlKpis {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
@media (max-width: 1400px) { #vistaControl #ctlKpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 700px)  { #vistaControl #ctlKpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

#vistaControl #ctlKpis .kpi-card.ctl-kpi {
    --kc: var(--kpi-color, var(--oro));
    display: flex; flex-direction: column; min-width: 0;
    min-height: 136px;
    padding: 19px 16px 32px;                 /* abajo queda el lugar de la barra */
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);              /* respaldo si no hay color-mix */
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .8);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    #vistaControl #ctlKpis .kpi-card.ctl-kpi {
        background: linear-gradient(165deg, color-mix(in srgb, var(--kc) 10%, var(--surface)) 0%, var(--surface) 64%);
    }
}
/* El filo de color pasa de la izquierda (diseño anterior) a la parte de arriba */
#vistaControl #ctlKpis .kpi-card.ctl-kpi::before {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px;
    background: var(--kc);
}
#vistaControl #ctlKpis .kpi-card.ctl-kpi:hover {
    transform: translateY(-2px);
    border-color: var(--kc);
    box-shadow: 0 14px 28px -16px var(--kc);
}

#vistaControl #ctlKpis .ctl-kpi .kpi-label {
    min-height: 2.6em;                       /* siempre dos renglones: los valores quedan alineados */
    margin: 0 0 8px; padding-right: 14px;
    font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: .5px;
    color: var(--text-muted);
}
#vistaControl #ctlKpis .ctl-kpi .kpi-value {
    font-size: clamp(26px, 1.4vw + 12px, 34px);
    font-weight: 800; line-height: 1; letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}
#vistaControl #ctlKpis .ctl-kpi .kpi-sub {
    margin-top: 8px; font-size: 11px; line-height: 1.35;
    color: var(--text-muted);
}

/* Barra de progreso — usa --pct (0-100). Sin --pct no se dibuja. */
#vistaControl #ctlKpis .kpi-card.ctl-kpi::after {
    content: '';
    position: absolute; left: 16px; right: 16px; bottom: 14px; height: 6px;
    border-radius: 999px;
    background-color: var(--surface3);       /* pista */
    box-shadow: inset 0 0 0 1px var(--border);
    background-image: linear-gradient(90deg, var(--kc), var(--kc));
    background-repeat: no-repeat;
    background-size: calc(clamp(0, var(--pct, 0), 100) * 1%) 100%;
    transition: background-size .6s cubic-bezier(.2, .8, .2, 1);
}
#vistaControl #ctlKpis .kpi-card.ctl-kpi:not([style*="--pct"])::after { display: none; }

/* Estado activo (filtro puesto): borde completo, fondo teñido, valor en su color y punto de marca */
#vistaControl #ctlKpis .kpi-card.ctl-kpi.on {
    border-color: var(--kc);
    box-shadow: 0 0 0 1px var(--kc), 0 14px 30px -14px var(--kc);
    transform: translateY(-2px);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    #vistaControl #ctlKpis .kpi-card.ctl-kpi.on {
        background: linear-gradient(165deg, color-mix(in srgb, var(--kc) 26%, var(--surface)) 0%, color-mix(in srgb, var(--kc) 9%, var(--surface)) 100%);
    }
}
#vistaControl #ctlKpis .ctl-kpi.on .kpi-value { color: var(--kc); }
#vistaControl #ctlKpis .ctl-kpi.on .kpi-label { color: var(--text); }
#vistaControl #ctlKpis .ctl-kpi.on .kpi-label::after {
    content: ''; position: absolute; top: 14px; right: 14px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--kc);
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--kc);
}
/* Con un filtro activo, las demás tarjetas bajan de tono (vuelven al pasar el ratón) */
#vistaControl #ctlKpis:has(.ctl-kpi.on) .ctl-kpi:not(.on) { opacity: .74; }
#vistaControl #ctlKpis:has(.ctl-kpi.on) .ctl-kpi:not(.on):hover { opacity: 1; }

body.light-theme #vistaControl #ctlKpis .kpi-card.ctl-kpi {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 24px -18px rgba(0, 0, 0, .4);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    body.light-theme #vistaControl #ctlKpis .ctl-kpi.on .kpi-value { color: color-mix(in srgb, var(--kc) 76%, #000); }
}

/* ==========================================================================
   3 · Leyenda de la cadena — discreta, en línea
   ========================================================================== */
#vistaControl .ctl-leyenda {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 6px; row-gap: 8px;
    width: fit-content; max-width: 100%;
    margin: 0 0 12px; padding: 7px 16px;
    font-size: 11px; line-height: 1.2; color: var(--text-muted);
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
#vistaControl .ctl-leyenda .ctl-paso { margin-left: 16px; }
#vistaControl .ctl-leyenda .ctl-paso:first-child { margin-left: 0; }

/* ==========================================================================
   4 · Luces de la cadena — Req · OC · Plan · Acopio · Fab · Prueba
       on = comprobado · dicho = por comprobar · (vacío) = sin dato · na = no aplica
       Además del color llevan marca (✓ / !) para leerse sin depender del color.
   ========================================================================== */
#vistaControl .ctl-cadena { gap: 3px; margin-bottom: 0; }
#vistaControl .ctl-paso {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    min-width: 28px; height: 22px; padding: 0 5px;
    border-radius: 6px;
    font-size: 9.5px; font-weight: 800; line-height: 1; letter-spacing: .3px;
    background: var(--surface3); color: var(--text-dim);
    box-shadow: inset 0 0 0 1px var(--border);
    white-space: nowrap;
}
#vistaControl .ctl-paso.on {
    background: var(--verde); color: var(--ctl-sobre-luz);
    box-shadow: 0 0 0 1px var(--verde), 0 0 10px -3px var(--verde);
}
#vistaControl .ctl-paso.on::after { content: '\2713'; font-size: 9px; }
#vistaControl .ctl-paso.dicho {
    background: var(--naranja); color: var(--ctl-sobre-luz);
    box-shadow: 0 0 0 1px var(--naranja), 0 0 10px -3px var(--naranja);
}
#vistaControl .ctl-paso.dicho::after { content: '!'; font-size: 10px; }
/* No aplica: gris, raya diagonal, texto tachado y tenue */
#vistaControl .ctl-paso.na {
    background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(128, 128, 128, .38) 4px 5px), var(--surface2);
    color: var(--text-dim);
    text-decoration: line-through; text-decoration-thickness: 1px;
    box-shadow: inset 0 0 0 1px var(--border);
    opacity: .75;
}

/* ==========================================================================
   5 · Barra de filtros + botón de reporte
   ========================================================================== */
#vistaControl .req-filterbar { gap: 10px; padding: 12px 16px; border-radius: 14px; margin-bottom: 14px; }
#vistaControl .req-filterbar .req-search-wrap input,
#vistaControl .req-filterbar .req-filter-select,
#vistaControl .req-filterbar .req-filter-clear { min-height: 38px; }
#vistaControl .req-count { font-weight: 600; color: var(--text-muted); }

#vistaControl .ctl-btn-reporte {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 9px 18px;
    border: 0; border-radius: var(--radius, 8px);
    background: linear-gradient(135deg, var(--oro), #a88520);
    color: #14110a;
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .2px;
    white-space: nowrap; cursor: pointer;
    box-shadow: 0 6px 16px -8px var(--oro);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#vistaControl .ctl-btn-reporte:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 20px -8px var(--oro); }
#vistaControl .ctl-btn-reporte:active { transform: translateY(0); }
#vistaControl .ctl-btn-reporte:disabled { opacity: .55; cursor: wait; transform: none; }

/* ==========================================================================
   6 · Tabla del control
   ========================================================================== */
#vistaControl .req-table-wrap {
    border-radius: 14px;
    max-height: calc(100vh - var(--topbar-h, 56px) - 120px);          /* respaldo */
    max-height: max(360px, calc(100dvh - var(--topbar-h, 56px) - 120px));
    box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .8);
}
body.light-theme #vistaControl .req-table-wrap { box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 28px -22px rgba(0, 0, 0, .35); }

/* Pista de scroll lateral (sólo se ve donde aún hay tabla por mostrar) */
#vistaControl > .req-table-wrap {
    background-color: var(--surface);
    background-image:
        linear-gradient(to right, var(--surface) 30%, transparent),
        linear-gradient(to left, var(--surface) 30%, transparent),
        radial-gradient(farthest-side at 0 50%, rgba(201, 162, 39, .32), transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(201, 162, 39, .32), transparent);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* border-collapse separado: así la cabecera fija conserva su filo al hacer scroll */
#vistaControl .ctl-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }

/* Tabla compacta: a 1366 y 1440 se ve hasta «Orden de compra» sin desplazar (medido en navegador, 28-oct-2026);
   las columnas del Excel que siguen se recorren dentro de la caja de la tabla. */
#vistaControl .ctl-table th {
    padding: 12px 9px 10px;
    font-size: 10px; letter-spacing: .7px; vertical-align: bottom;
    color: var(--text-muted); background: var(--surface2);
    border-bottom: 2px solid var(--border);
}
#vistaControl .ctl-table th .th-sub { margin-top: 3px; font-size: 9px; letter-spacing: 0; opacity: .85; }
#vistaControl .ctl-table th.r { text-align: right; }                  /* cabecera numérica alineada con su columna */

#vistaControl .ctl-table td {
    padding: 11px 9px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
#vistaControl .ctl-table td.r { font-variant-numeric: tabular-nums; }
#vistaControl .ctl-table td:first-child.r { width: 48px; color: var(--text-dim); font-weight: 600; }
#vistaControl .ctl-table td.desc { min-width: 190px; max-width: 260px; line-height: 1.4; color: var(--text); font-weight: 600; }
#vistaControl .ctl-table td.num { font-variant-numeric: tabular-nums; letter-spacing: .2px; }

/* Hover suave con filo dorado a la izquierda (no aplica a separadores ni filas vacías) */
#vistaControl .ctl-table tbody tr:not(.ctl-grupo):not(.empty-row) td { transition: background-color .12s ease; }
#vistaControl .ctl-table tbody tr:not(.ctl-grupo):not(.empty-row):hover td { background: rgba(201, 162, 39, .08); }
#vistaControl .ctl-table tbody tr:not(.ctl-grupo):not(.empty-row):hover td:first-child { box-shadow: inset 3px 0 0 var(--oro); }
#vistaControl .ctl-table tbody tr:last-child td { border-bottom: 0; }
#vistaControl .ctl-table .empty-row td { padding: 56px 20px; font-size: 13px; }

/* Fila de grupo (frente): separador de sección */
#vistaControl .ctl-table tr.ctl-grupo td {
    padding: 15px 14px 11px 20px;
    font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1.1px;
    color: var(--text);
    background: var(--surface2);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    box-shadow: inset 4px 0 0 var(--oro);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    #vistaControl .ctl-table tr.ctl-grupo td {
        background: linear-gradient(90deg, color-mix(in srgb, var(--oro) 17%, var(--surface2)) 0%, var(--surface2) 60%);
    }
}
#vistaControl .ctl-table tbody tr.ctl-grupo:first-child td { border-top: 0; }

/* Cadena de luces centrada en su columna */
#vistaControl > .req-table-wrap .ctl-table th:nth-child(4),
#vistaControl .ctl-table td:has(> .ctl-cadena) { text-align: center; }
#vistaControl .ctl-table th.c, #vistaControl .ctl-table td.c { text-align: center; }

/* Avance: la cifra a la derecha; con --pct en .ctl-avance suma una barrita */
#vistaControl .ctl-avance { font-size: 14px; font-variant-numeric: tabular-nums; }
#vistaControl .ctl-avance-sub { margin-top: 2px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
#vistaControl .ctl-avance[style*="--pct"]::after {
    content: ''; display: block; width: 64px; height: 4px; margin: 5px 0 3px auto; border-radius: 999px;
    background-color: var(--surface3);
    background-image: linear-gradient(90deg, var(--verde), var(--verde));
    background-repeat: no-repeat;
    background-size: calc(clamp(0, var(--pct, 0), 100) * 1%) 100%;
}

/* Documentos de la fila: pastillas pequeñas */
#vistaControl .ctl-docs { gap: 6px; flex-wrap: nowrap; align-items: center; }
#vistaControl .ctl-doc {
    padding: 3px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; line-height: 1.3;
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
#vistaControl .ctl-doc:hover { border-color: var(--oro); color: var(--ctl-oro-txt); background: var(--oro-dim); }

/* Subir / Capturar — DISCRETOS (Rodolfo, LeanCP - Suite 28-oct-2026 14:38: «un poco más discretos»):
   fantasma, sin relleno; no compiten con los botones de documento (Req · OC · Plan) */
#vistaControl .ctl-btn-subir {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 22px; padding: 1px 8px;
    border: 1px dashed var(--border, rgba(128,128,128,.4)); border-radius: 999px;
    background: transparent; color: var(--text-dim);
    font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2;
    white-space: nowrap; cursor: pointer; opacity: .8;
    transition: color .12s ease, border-color .12s ease, opacity .12s ease;
}
#vistaControl .ctl-btn-subir:hover { opacity: 1; color: var(--ctl-oro-txt); border-color: rgba(201, 162, 39, .6); border-style: solid; }
#vistaControl .ctl-btn-subir:active { opacity: .9; }
#vistaControl .ctl-btn-subir:disabled { opacity: .4; cursor: wait; }

/* Un botón por tipo de documento; con 2+ archivos, la cuenta (TN-684) */
#vistaControl .ctl-doc .ctl-n {
    display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 4px;
    border-radius: 999px; background: rgba(255,255,255,.22);
    font-size: 9.5px; font-weight: 800; line-height: 15px; text-align: center;
}

/* Con UN archivo: «▾» dentro del mismo botón abre la lista de la partida con «Eliminar» (TN-684 (5)) */
#vistaControl .ctl-doc .ctl-mas {
    display: inline-block; margin-left: 5px; padding: 0 2px 0 5px;
    border-left: 1px solid var(--border, rgba(128,128,128,.4));
    font-size: 9px; line-height: 15px; opacity: .65; cursor: pointer;
}
#vistaControl .ctl-doc .ctl-mas:hover { opacity: 1; color: var(--rojo); }

/* Lista de archivos de un paso (TN-684 b/c): nombre · fecha · quién · Eliminar */
.ctl-lista { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.ctl-lista-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border, rgba(128,128,128,.35)); border-radius: 10px; background: rgba(255,255,255,.03); }
.ctl-lista-nombre { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: var(--text); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl-lista-nombre:hover { color: var(--ctl-oro-txt); text-decoration: underline; }
.ctl-lista-nombre:disabled { opacity: .6; cursor: wait; }
.ctl-lista-meta { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.ctl-lista-borrar { background: none; border: 1px solid transparent; border-radius: 999px; padding: 2px 9px; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.ctl-lista-borrar:hover { color: var(--rojo); border-color: var(--rojo); }
.ctl-lista-borrar.confirmar { color: #fff; background: var(--rojo); border-color: var(--rojo); }
.ctl-lista-borrar:disabled { opacity: .5; cursor: wait; }
.ctl-lista-vacia { font-size: 12px; color: var(--text-dim); }
@media (max-width: 700px) { .ctl-lista-item { flex-wrap: wrap; } .ctl-lista-meta { white-space: normal; } }

/* ==========================================================================
   7 · Modal «Subir documento» (usa .modal-overlay / .modal-box de la página)
   ========================================================================== */
.modal-overlay.ctl-modal { background: rgba(4, 4, 6, .68); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding-top: calc(var(--topbar-h, 56px) + 24px); }
body.light-theme .modal-overlay.ctl-modal { background: rgba(30, 32, 40, .45); }
/* Si la clase .ctl-modal va en la caja y no en el overlay (reglas separadas: sin :has el overlay no cambia, nada se rompe) */
.modal-overlay:has(.ctl-modal) { background: rgba(4, 4, 6, .68); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding-top: calc(var(--topbar-h, 56px) + 24px); }
body.light-theme .modal-overlay:has(.ctl-modal) { background: rgba(30, 32, 40, .45); }

.ctl-modal .modal-box, .modal-box.ctl-modal {
    position: relative; max-width: 560px; padding: 26px 26px 22px;
    border-radius: 18px; border: 1px solid var(--border);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .75);
    overflow: hidden;
}
/* Filo dorado superior */
.ctl-modal .modal-box::before, .modal-box.ctl-modal::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--oro), transparent 85%);
}
.ctl-modal .modal-title { font-size: 18px; letter-spacing: -.2px; margin-bottom: 6px; padding-right: 28px; }
.ctl-modal .modal-sub { font-size: 12.5px; line-height: 1.5; margin-bottom: 20px; color: var(--text-muted); }
.ctl-modal .modal-close {
    top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .12s ease, color .12s ease;
}
.ctl-modal .modal-close:hover { background: var(--surface2); }
.ctl-modal .form-field label { margin-bottom: 2px; }
.ctl-modal .form-field input, .ctl-modal .form-field select, .ctl-modal .form-field textarea { min-height: 40px; }
.ctl-modal input[type=file] {
    width: 100%; padding: 14px; font-size: 12px; color: var(--text-muted);
    border: 1.5px dashed var(--border-hover, var(--border)); border-radius: 12px; background: var(--surface2);
}
.ctl-modal input[type=file]::file-selector-button {
    margin-right: 12px; padding: 7px 14px; border: 1px solid rgba(201, 162, 39, .5); border-radius: 999px;
    background: var(--oro-dim); color: var(--ctl-oro-txt);
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ctl-modal .modal-actions { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Categoría del documento — pastillas (una sola activa: .on) */
.ctl-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ctl-cat {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px; padding: 8px 16px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface2); color: var(--text-muted);
    font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; line-height: 1.2;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.ctl-cat:hover { border-color: var(--oro); color: var(--text); }
.ctl-cat.on { background: var(--oro-dim); border-color: var(--oro); color: var(--ctl-oro-txt); font-weight: 700; }
.ctl-cat.on::before { content: '\2713'; font-size: 11px; }

/* ==========================================================================
   8 · Móvil (breakpoint canónico 700 px) — mismo orden, objetivos táctiles de la Suite
   ========================================================================== */
@media (max-width: 700px) {
    #vistaControl .ctl-fuente { margin-bottom: 12px; }
    #vistaControl .ctl-fuente > span { border-radius: 14px; }
    #vistaControl #ctlKpis .kpi-card.ctl-kpi { min-height: 122px; padding: 16px 14px 30px; }
    #vistaControl #ctlKpis .ctl-kpi .kpi-label { font-size: 10px; letter-spacing: .4px; }
    #vistaControl #ctlKpis .kpi-card.ctl-kpi::after { left: 14px; right: 14px; bottom: 13px; }

    /* Leyenda: dos pares por renglón, nunca separa la luz de su texto */
    #vistaControl .ctl-leyenda {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center; column-gap: 8px; row-gap: 8px;
        width: 100%; padding: 10px 14px; border-radius: 14px;
    }
    #vistaControl .ctl-leyenda .ctl-paso, #vistaControl .ctl-leyenda .ctl-paso:first-child { margin-left: 0; }

    #vistaControl .req-filterbar { padding: 12px; }
    #vistaControl .req-filterbar .req-search-wrap { flex: 1 1 100%; }
    #vistaControl .req-filterbar .req-filter-select { flex: 1 1 140px; min-width: 0; }
    #vistaControl .ctl-btn-reporte { flex: 1 1 100%; min-height: var(--tap-movil, 56px); }
    #vistaControl .req-filterbar .req-filter-clear { min-height: var(--tap-movil, 56px); }
    #vistaControl .req-filterbar .req-filter-clear { flex: 0 0 auto; }
    #vistaControl .req-count { flex: 1 1 0; min-width: 0; margin-left: 0; text-align: right; white-space: normal; }
    #vistaControl .ctl-table td.desc { min-width: 170px; max-width: 220px; }

    #vistaControl .ctl-table th { padding: 12px 10px 10px; }
    #vistaControl .ctl-table td { padding: 11px 10px; }
    #vistaControl .ctl-table tr.ctl-grupo td { padding: 13px 10px 10px 16px; }
    #vistaControl .ctl-btn-subir { min-height: var(--tap-movil, 56px); padding: 8px 14px; font-size: 12px; }

    .modal-overlay.ctl-modal, .modal-overlay:has(.ctl-modal) { padding-top: calc(var(--topbar-h, 56px) + 16px); }
    .ctl-modal .modal-box, .modal-box.ctl-modal { padding: 22px 18px 18px; border-radius: 16px; }
    .ctl-cat { min-height: var(--tap-movil, 56px); padding: 8px 18px; flex: 1 1 calc(50% - 8px); }
    .ctl-modal .modal-actions { flex-direction: column-reverse; }
    .ctl-modal .modal-actions > button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    #vistaControl *, #vistaControl *::before, #vistaControl *::after,
    .ctl-modal, .ctl-modal *, .ctl-cat { transition: none !important; }
    #vistaControl #ctlKpis .kpi-card.ctl-kpi:hover, #vistaControl #ctlKpis .kpi-card.ctl-kpi.on { transform: none; }
}