/* GENERADO por tools/fsv/build.php desde html/assets/fsv/src/ — no editar a mano.
   Fuentes: tokens.css + components.css */

/* --- tokens.css --- */
/*
 * Tokens del sistema de diseno de la consola (spec sistema-diseno, RF-01).
 *
 * LA UNICA FUENTE DE VALORES. Componentes (components.css) y re-mapeo de Metronic (base.css)
 * leen de aca; ningun otro archivo de la capa fsv escribe un color, un tamaño o un radio literal.
 * Cambiar un token cambia todo lo que lo usa (CA-01).
 *
 * NOMBRES: --fsv-<grupo>-<nombre>, con grupo en color|font|space|radius|shadow|z. El prefijo
 * --fsv- ya lo usa el Sprint 2 de UI/UX: --fsv-scale (include/density_head.php) y --fsv-menu-*
 * (utils/conf/css_override.php). Por eso todo token lleva grupo, y aca NO se declara --fsv-scale
 * ni ningun token de densidad: la densidad es la del Sprint 2. Lo que este en rem la sigue solo;
 * una medida que tenga que quedar en px se escribe calc(Npx * var(--fsv-scale, 1)).
 * html/tests/test_fsv_bundle.php falla si aparece --fsv-scale o una medida en px.
 *
 * Esto no se sirve directo: tools/fsv/build.php lo arma en html/assets/fsv/fsv.css y
 * fsv-ola0.css. Despues de editarlo, regenerar (ver ese archivo).
 *
 * Solo tema claro: el modo oscuro esta fuera de alcance de la spec.
 */
:root {
    /* --- Color: marca ------------------------------------------------------------------- */
    --fsv-color-primary: #1d3352;          /* = --bs-primary del bundle; P-03: no se unifica con #223350 */
    --fsv-color-primary-contrast: #ffffff;
    --fsv-color-accent: #CC9E37;           /* dorado de la marca = --fsv-menu-acento */

    /* --- Color: superficies y bordes ----------------------------------------------------- */
    --fsv-color-surface: #ffffff;
    --fsv-color-surface-subtle: #F9F9F9;   /* = --bs-gray-100 */
    --fsv-color-surface-muted: #F1F1F4;    /* = --bs-gray-200 */
    --fsv-color-border: #F1F1F4;           /* = --bs-border-color */
    --fsv-color-border-strong: #DBDFE9;    /* = --bs-gray-300 */

    /* --- Color: grises de texto (los 9 de Metronic, mismos hex) --------------------------- */
    --fsv-color-gray-100: #F9F9F9;
    --fsv-color-gray-200: #F1F1F4;
    --fsv-color-gray-300: #DBDFE9;
    --fsv-color-gray-400: #C4CADA;
    --fsv-color-gray-500: #99A1B7;
    --fsv-color-gray-600: #78829D;
    --fsv-color-gray-700: #4B5675;
    --fsv-color-gray-800: #252F4A;
    --fsv-color-gray-900: #071437;
    --fsv-color-text: #071437;             /* = --bs-body-color */
    --fsv-color-text-muted: #4B5675;

    /* --- Color: semanticos, cada uno con su par texto/fondo AA ----------------------------
       Los MISMOS hex que .fsv-lvl-* y .fsv-st-* de utils/conf/css_override.php: no se inventa
       una paleta. El contraste medido va al lado. */
    --fsv-color-ok-text: #15803d;    --fsv-color-ok-bg: #dcfce7;     /* 4.57:1 = .fsv-lvl-low */
    --fsv-color-warn-text: #a16207;  --fsv-color-warn-bg: #fef9c3;   /* 4.58:1 = .fsv-lvl-mid / .fsv-st-warn */
    --fsv-color-hi-text: #c2410c;    --fsv-color-hi-bg: #ffedd5;     /* 4.52:1 = .fsv-lvl-high */
    --fsv-color-bad-text: #b91c1c;   --fsv-color-bad-bg: #fee2e2;    /* 5.30:1 = .fsv-lvl-crit / .fsv-st-danger */
    --fsv-color-info-text: #0369a1;  --fsv-color-info-bg: #e0f2fe;   /* 5.17:1 = .fsv-st-info */
    --fsv-color-mute-text: #5e6278;  --fsv-color-mute-bg: #eef0f3;   /* 5.26:1 = .fsv-st-quiet / .fsv-st-none */

    /* --- Tipografia ------------------------------------------------------------------------
       En rem: con la raiz de 13 px equivale a 11-28 px, y sigue a la densidad del Sprint 2. */
    --fsv-font-family: Inter, Helvetica, "sans-serif";
    --fsv-font-family-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --fsv-font-size-xs: 0.75rem;
    --fsv-font-size-sm: 0.85rem;
    --fsv-font-size-md: 1rem;
    --fsv-font-size-lg: 1.15rem;
    --fsv-font-size-xl: 1.35rem;
    --fsv-font-size-2xl: 1.75rem;
    --fsv-font-size-3xl: 2.15rem;
    --fsv-font-weight-regular: 400;
    --fsv-font-weight-medium: 500;
    --fsv-font-weight-semibold: 600;
    --fsv-font-weight-bold: 700;
    --fsv-font-line-height: 1.5;
    --fsv-font-line-height-tight: 1.2;
    --fsv-font-numeric: tabular-nums;

    /* --- Espaciado (multiplos de 0.25rem) --------------------------------------------------- */
    --fsv-space-0: 0;
    --fsv-space-1: 0.25rem;
    --fsv-space-2: 0.5rem;
    --fsv-space-3: 0.75rem;
    --fsv-space-4: 1rem;
    --fsv-space-5: 1.25rem;
    --fsv-space-6: 1.5rem;
    --fsv-space-8: 2rem;
    --fsv-space-10: 2.5rem;
    --fsv-space-12: 3rem;

    /* --- Radios (los de Bootstrap/Metronic) ----------------------------------------------- */
    --fsv-radius-sm: 0.425rem;
    --fsv-radius-md: 0.475rem;
    --fsv-radius-lg: 0.625rem;
    --fsv-radius-xl: 1rem;
    --fsv-radius-pill: 50rem;

    /* --- Sombras (las de Metronic) -------------------------------------------------------- */
    --fsv-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --fsv-shadow-md: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --fsv-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);

    /* --- z-index (la escala de Bootstrap, para convivir con sus modales y dropdowns) --------- */
    --fsv-z-base: 1;
    --fsv-z-dropdown: 1000;
    --fsv-z-sticky: 1020;
    --fsv-z-overlay: 1050;
    --fsv-z-toast: 1090;
}

/* --- components.css --- */
/*
 * Componentes del sistema de diseno para el 360 (spec sistema-diseno, RF-03, task T-03).
 *
 * REGLAS DE ESTE ARCHIVO (las fija html/tests/test_fsv_ui.php):
 *   - solo clases .fsv-*: ningun selector de elemento suelto, :root ni clase de Metronic, para
 *     que cargar el bundle no cambie ninguna pantalla que no use estos componentes;
 *   - .fsv-chip, .fsv-lvl-* y .fsv-st-* NO se redefinen: viven en utils/conf/css_override.php,
 *     que se carga siempre (los usan pantallas sin flag). Se mudan aca al retirar los flags (D-04).
 *     Aca van solo las variantes que faltaban: veredictos .fsv-vd-*, marca manual y el ≠;
 *   - ningun color, tamaño o radio literal: todo sale de tokens.css. Un px que tenga que seguir
 *     a la densidad del Sprint 2 se escribe calc(Npx * var(--fsv-scale, 1));
 *   - todo par texto/fondo cumple 4.5:1 (WCAG AA), calculado por el test desde los tokens.
 *
 * El markup lo arman html/assets/fsv/ui.js (cliente) y html/utils/fsv_ui.php (servidor), con la
 * misma salida: no escribir el HTML a mano.
 */

/* --- Veredictos: los mismos pares que .badge.rule-verdict-* (rules-engine.php) ------------- */
.fsv-vd-accept { background-color: var(--fsv-color-ok-bg);   color: var(--fsv-color-ok-text); }
.fsv-vd-reject { background-color: var(--fsv-color-bad-bg);  color: var(--fsv-color-bad-text); }
.fsv-vd-review { background-color: var(--fsv-color-warn-bg); color: var(--fsv-color-warn-text); }
.fsv-vd-tag    { background-color: var(--fsv-color-info-bg); color: var(--fsv-color-info-text); }

/* Decidido por un analista: el borde en el color del texto lo distingue sin otro tono. */
.fsv-vd-manual { box-shadow: inset 0 0 0 calc(1px * var(--fsv-scale, 1)) currentColor; }
.fsv-vd__manual { font-weight: var(--fsv-font-weight-medium); }

/* --- Celda de decision: Forsvar + resultado del cliente + ≠ ------------------------------- */
.fsv-decision {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fsv-space-1);
}
.fsv-decision__client {
    display: inline-flex;
    align-items: center;
    gap: var(--fsv-space-1);
    padding: 0.1rem var(--fsv-space-2);
    border-radius: var(--fsv-radius-pill);
    font-size: var(--fsv-font-size-xs);
    font-weight: var(--fsv-font-weight-bold);
    white-space: nowrap;
}
.fsv-decision__client--ok   { background-color: var(--fsv-color-ok-bg);   color: var(--fsv-color-ok-text); }
.fsv-decision__client--bad  { background-color: var(--fsv-color-bad-bg);  color: var(--fsv-color-bad-text); }
.fsv-decision__client--none { background-color: var(--fsv-color-mute-bg); color: var(--fsv-color-mute-text); }
.fsv-decision__neq {
    display: inline-grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--fsv-radius-pill);
    background-color: var(--fsv-color-bad-text);
    color: var(--fsv-color-surface);
    font-size: var(--fsv-font-size-sm);
    font-weight: var(--fsv-font-weight-bold);
    line-height: 1;
}

/* --- Header de entidad (+ comprimido) ----------------------------------------------------- */
.fsv-entity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--fsv-space-4);
    align-items: start;
    padding: var(--fsv-space-4) var(--fsv-space-5);
    background-color: var(--fsv-color-surface);
    color: var(--fsv-color-text);
    border: calc(1px * var(--fsv-scale, 1)) solid var(--fsv-color-border);
    border-radius: var(--fsv-radius-lg);
}
.fsv-entity__avatar {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--fsv-radius-xl);
    background-color: var(--fsv-color-primary);
    color: var(--fsv-color-primary-contrast);
    font-size: var(--fsv-font-size-2xl);
    font-weight: var(--fsv-font-weight-bold);
}
.fsv-entity__main { min-width: 0; display: flex; flex-direction: column; gap: var(--fsv-space-2); }
.fsv-entity__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fsv-space-2); }
.fsv-entity__title {
    margin: 0;
    font-size: var(--fsv-font-size-xl);
    font-weight: var(--fsv-font-weight-bold);
    line-height: var(--fsv-font-line-height-tight);
    overflow-wrap: anywhere;
}
.fsv-entity__title--mono { font-family: var(--fsv-font-family-mono); }
.fsv-entity__subtitle { margin: 0; color: var(--fsv-color-text-muted); font-size: var(--fsv-font-size-sm); }
.fsv-entity__meta { display: flex; flex-wrap: wrap; gap: var(--fsv-space-2); margin: 0; }
.fsv-entity__stat {
    min-width: 6rem;
    padding: var(--fsv-space-1) var(--fsv-space-3);
    border: calc(1px * var(--fsv-scale, 1)) dashed var(--fsv-color-border-strong);
    border-radius: var(--fsv-radius-md);
}
.fsv-entity__stat dt {
    color: var(--fsv-color-text-muted);
    font-size: var(--fsv-font-size-xs);
    font-weight: var(--fsv-font-weight-semibold);
}
.fsv-entity__stat dd {
    margin: 0;
    font-size: var(--fsv-font-size-md);
    font-weight: var(--fsv-font-weight-bold);
    font-variant-numeric: var(--fsv-font-numeric);
}
.fsv-entity__aside { display: flex; flex-wrap: wrap; gap: var(--fsv-space-2); justify-content: flex-end; }

/* Comprimido: una fila, para la barra sticky del panel. */
.fsv-entity--compact {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--fsv-space-2);
    padding: var(--fsv-space-1) 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}
.fsv-entity--compact .fsv-entity__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--fsv-radius-md);
    font-size: var(--fsv-font-size-xs);
}
.fsv-entity--compact .fsv-entity__title { font-size: var(--fsv-font-size-md); }
.fsv-entity--compact .fsv-entity__subtitle,
.fsv-entity--compact .fsv-entity__meta { display: none; }

@media (max-width: 767.98px) {
    .fsv-entity { grid-template-columns: auto minmax(0, 1fr); }
    .fsv-entity__aside { grid-column: 1 / -1; justify-content: flex-start; }
    .fsv-entity__avatar { width: 3rem; height: 3rem; font-size: var(--fsv-font-size-lg); }
}

/* --- Bloque con titulo y estrategia de carga (data-fsv-load: now|view|ask) ----------------- */
.fsv-block {
    min-width: 0;
    background-color: var(--fsv-color-surface);
    color: var(--fsv-color-text);
    border: calc(1px * var(--fsv-scale, 1)) solid var(--fsv-color-border);
    border-radius: var(--fsv-radius-lg);
    box-shadow: var(--fsv-shadow-sm);
}
.fsv-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fsv-space-2);
    padding: var(--fsv-space-4) var(--fsv-space-5) 0;
}
.fsv-block__title { margin: 0; font-size: var(--fsv-font-size-lg); font-weight: var(--fsv-font-weight-bold); }
.fsv-block__count {
    padding: 0 var(--fsv-space-2);
    border-radius: var(--fsv-radius-sm);
    background-color: var(--fsv-color-mute-bg);
    color: var(--fsv-color-mute-text);
    font-size: var(--fsv-font-size-xs);
    font-weight: var(--fsv-font-weight-bold);
    font-variant-numeric: var(--fsv-font-numeric);
}
.fsv-block__body {
    display: flex;
    flex-direction: column;
    gap: var(--fsv-space-3);
    min-width: 0;
    padding: var(--fsv-space-3) var(--fsv-space-5) var(--fsv-space-4);
}

/* --- Lista clave/valor ------------------------------------------------------------------- */
.fsv-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 0 var(--fsv-space-6);
    margin: 0;
}
.fsv-kv__row {
    display: flex;
    justify-content: space-between;
    gap: var(--fsv-space-3);
    min-width: 0;
    padding: var(--fsv-space-2) 0;
    border-bottom: calc(1px * var(--fsv-scale, 1)) dashed var(--fsv-color-border);
}
.fsv-kv__row dt { color: var(--fsv-color-text-muted); font-weight: var(--fsv-font-weight-regular); }
.fsv-kv__row dd {
    margin: 0;
    color: var(--fsv-color-text);
    font-weight: var(--fsv-font-weight-semibold);
    text-align: right;
    overflow-wrap: anywhere;
}

/* --- Tabla densa ------------------------------------------------------------------------- */
.fsv-table__wrap { overflow-x: auto; max-width: 100%; }
.fsv-table { width: 100%; border-collapse: collapse; color: var(--fsv-color-text); }
.fsv-table__th {
    padding: var(--fsv-space-2) var(--fsv-space-3);
    border-bottom: calc(1px * var(--fsv-scale, 1)) solid var(--fsv-color-border);
    color: var(--fsv-color-text-muted);
    font-size: var(--fsv-font-size-xs);
    font-weight: var(--fsv-font-weight-bold);
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.fsv-table__cell {
    padding: var(--fsv-space-2) var(--fsv-space-3);
    border-bottom: calc(1px * var(--fsv-scale, 1)) dashed var(--fsv-color-border);
    vertical-align: top;
}
.fsv-table__row:last-child .fsv-table__cell { border-bottom: 0; }
.fsv-table__end { text-align: right; font-variant-numeric: var(--fsv-font-numeric); }
.fsv-table__mono { font-family: var(--fsv-font-family-mono); }
.fsv-table__row--action { cursor: pointer; }
.fsv-table__row--action:hover .fsv-table__cell { background-color: var(--fsv-color-surface-subtle); }
.fsv-table__row--action:focus-visible {
    outline: calc(2px * var(--fsv-scale, 1)) solid var(--fsv-color-primary);
    outline-offset: calc(-2px * var(--fsv-scale, 1));
}

/* --- Loader con altura fija: N lineas de alto fijo, el bloque no salta al llegar el dato --- */
.fsv-skeleton {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--fsv-space-3);
    padding: var(--fsv-space-1) 0;
}
.fsv-skeleton__line {
    display: block;
    height: var(--fsv-space-3);
    border-radius: var(--fsv-radius-sm);
    background-color: var(--fsv-color-surface-muted);
    animation: fsv-skeleton-pulse 1.1s ease-in-out infinite;
}
.fsv-skeleton__label {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--fsv-z-base);
    transform: translate(-50%, -50%);
    padding: var(--fsv-space-1) var(--fsv-space-3);
    border: calc(1px * var(--fsv-scale, 1)) solid var(--fsv-color-border-strong);
    border-radius: var(--fsv-radius-pill);
    background-color: var(--fsv-color-surface);
    color: var(--fsv-color-text-muted);
    font-size: var(--fsv-font-size-xs);
    font-weight: var(--fsv-font-weight-semibold);
    box-shadow: var(--fsv-shadow-sm);
}
@keyframes fsv-skeleton-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
    .fsv-skeleton__line { animation: none; }
}

/* --- Tarjeta anclada (peek): la posicion (top/left) la pone quien la abre ----------------- */
.fsv-peek {
    position: fixed;
    z-index: var(--fsv-z-overlay);
    display: flex;
    flex-direction: column;
    width: 26rem;
    max-width: calc(100vw - 2rem);
    max-height: min(36rem, calc(100vh - 2rem));
    background-color: var(--fsv-color-surface);
    color: var(--fsv-color-text);
    border: calc(1px * var(--fsv-scale, 1)) solid var(--fsv-color-border-strong);
    border-radius: var(--fsv-radius-lg);
    box-shadow: var(--fsv-shadow-lg);
}
.fsv-peek__head { padding: var(--fsv-space-3) var(--fsv-space-4) var(--fsv-space-2); }
.fsv-peek__title { margin: 0; font-size: var(--fsv-font-size-md); font-weight: var(--fsv-font-weight-bold); }
.fsv-peek__subtitle { margin: 0; color: var(--fsv-color-text-muted); font-size: var(--fsv-font-size-sm); }
.fsv-peek__body {
    display: flex;
    flex-direction: column;
    gap: var(--fsv-space-2);
    padding: 0 var(--fsv-space-4) var(--fsv-space-3);
    overflow-y: auto;
}
@media (max-width: 599.98px) {
    .fsv-peek {
        top: auto !important;
        right: 0;
        bottom: 0;
        left: 0 !important;
        width: 100%;
        max-width: 100%;
        border-radius: var(--fsv-radius-xl) var(--fsv-radius-xl) 0 0;
    }
}

/* --- Empty state ------------------------------------------------------------------------- */
.fsv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fsv-space-1);
    padding: var(--fsv-space-4);
    border: calc(1px * var(--fsv-scale, 1)) dashed var(--fsv-color-border-strong);
    border-radius: var(--fsv-radius-md);
    color: var(--fsv-color-text-muted);
    text-align: center;
}
.fsv-empty__title { color: var(--fsv-color-text); font-weight: var(--fsv-font-weight-semibold); }
.fsv-empty__text { margin: 0; }