/* ==========================================================================
   Santiago Fundas · tokens
   --------------------------------------------------------------------------
   Valores extraidos del design system Nocturne
   (docs/design/source/_ds/nocturne-eada67c5-bfa6-4819-8a28-2278195bf39d/styles.css)
   y de los fondos reales usados por las pantallas de alta fidelidad
   (docs/design/source/*.dc.html).

   No inventar colores aca: cada valor tiene origen en el diseno.
   Namespace --sf-* para no colisionar con el CSS legado de backoffice/app.css.
   ========================================================================== */

:root {
    /* --- Acento: blurple del producto --- */
    --sf-accent: #9184d9;
    --sf-accent-100: #f5f4ff;
    --sf-accent-200: #e7e5fe;
    --sf-accent-300: #d2cefd;
    --sf-accent-400: #b5abfc;
    --sf-accent-500: #968ae0;
    --sf-accent-600: #796cbf;
    --sf-accent-700: #5d5294;
    --sf-accent-800: #423a6a;
    --sf-accent-900: #2b2741;

    /* --- Rampa neutra --- */
    --sf-n-100: #f3f5fe;
    --sf-n-200: #e4e7f5;
    --sf-n-300: #cfd3e5;
    --sf-n-400: #b2b6ca;
    --sf-n-500: #9397ab;
    --sf-n-600: #75798c;
    --sf-n-700: #595d6c;
    --sf-n-800: #3f424d;
    --sf-n-900: #292b31;

    /* --- Fondos por contexto (de los .dc.html) --- */
    --sf-bg-app: #0f1017;      /* gestion */
    --sf-bg-auth: #0b0b11;     /* login */
    --sf-header: #131420;      /* header 56px */
    --sf-nav: #12131e;         /* sidebar 186px */
    --sf-panel: #12131e;       /* paneles y tablas */
    --sf-panel-alt: #171826;   /* cabecera de tabla */
    --sf-surface: #232532;     /* --color-surface de Nocturne */
    --sf-input: #15161f;       /* inputs */
    --sf-card: #0e0e17;        /* tarjeta de login */
    --sf-card-foot: #0c0c14;   /* franjas al pie */

    /* --- Texto --- */
    --sf-text: #e9e9ed;
    --sf-text-muted: var(--sf-n-400);
    --sf-text-faint: var(--sf-n-500);
    --sf-text-ghost: var(--sf-n-600);

    /* --- Lineas --- */
    --sf-line: var(--sf-n-800);
    --sf-line-soft: var(--sf-n-900);

    /* --- Semanticos (tomados de los estados del diseno) --- */
    --sf-warn: #e0b062;
    --sf-warn-text: #d9c08a;
    --sf-warn-line: #4a3a17;
    --sf-warn-bg: #1c1810;

    --sf-danger: #e595a0;
    --sf-danger-text: #f0dfe2;
    --sf-danger-sub: #c9a9ae;
    --sf-danger-line: #55272e;
    --sf-danger-bg: #231318;

    /* --- Tipografia --- */
    --sf-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sf-fs-title: 22px;      /* titulo de pantalla */
    --sf-fs-sub: 12.5px;      /* subtitulo de pantalla */
    --sf-fs-kicker: 10.5px;   /* versalitas de seccion */
    --sf-fs-body: 13.5px;
    --sf-fs-cell: 14px;
    --sf-fs-meta: 11.5px;
    --sf-ls-kicker: 0.16em;
    --sf-ls-thead: 0.14em;

    /* --- Espaciado (densidad 0.7x de Nocturne, redondeada a la grilla real) --- */
    --sf-sp-1: 3px;
    --sf-sp-2: 6px;
    --sf-sp-3: 9px;
    --sf-sp-4: 12px;
    --sf-sp-5: 14px;
    --sf-sp-6: 16px;
    --sf-sp-8: 22px;

    /* --- Radios --- */
    --sf-r-sm: 4px;
    --sf-r-md: 8px;
    --sf-r-lg: 14px;
    --sf-r-pill: 14px;

    /* --- Sombras (borde hairline + oscuridad ambiental) --- */
    --sf-shadow-sm: 0 0 0 1px var(--sf-n-800);
    --sf-shadow-md: 0 0 0 1px var(--sf-n-700), 0 6px 18px rgba(0, 0, 0, .55);
    --sf-shadow-lg: 0 0 0 1px var(--sf-n-500), 0 16px 40px rgba(0, 0, 0, .65);
    --sf-glow: 0 0 0 4px rgba(145, 132, 217, .10);

    /* --- Medidas del chrome --- */
    --sf-header-h: 56px;
    --sf-nav-w: 186px;
    /* Punto en el que la navegacion lateral pasa a ser una barra horizontal.
       Ya no existe un ancho minimo de lienzo: el backoffice no se recorta. */
    --sf-nav-break: 1200px;
}

/* --------------------------------------------------------------------------
   Base tipografica y de fondo.
   Se aplica sobre body.sf-app / body.sf-guest para ganarle por especificidad
   al CSS legado sin recurrir a !important.
   -------------------------------------------------------------------------- */

body.sf-app,
body.sf-guest,
body.sf-store {
    font-family: var(--sf-font);
    font-size: var(--sf-fs-body);
    line-height: 1.55;
    font-weight: 400;
    color: var(--sf-text);
    -webkit-font-smoothing: antialiased;
}

body.sf-app {
    background: var(--sf-bg-app);
}

body.sf-guest {
    background: var(--sf-bg-auth);
}

/* Nocturne: la jerarquia es tamano y espacio, nunca peso. Los titulos no
   pasan de 500. */
body.sf-app h1,
body.sf-app h2,
body.sf-app h3,
body.sf-guest h1,
body.sf-guest h2,
body.sf-guest h3,
body.sf-store h1,
body.sf-store h2,
body.sf-store h3 {
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Foco visible: siempre el anillo de acento, nunca el azul del navegador.
   -------------------------------------------------------------------------- */

body.sf-app :focus-visible,
body.sf-guest :focus-visible,
body.sf-store :focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: 2px;
    border-radius: var(--sf-r-sm);
}

body.sf-app ::selection,
body.sf-guest ::selection,
body.sf-store ::selection {
    background: var(--sf-accent-800);
    color: var(--sf-accent-100);
}

/* --------------------------------------------------------------------------
   Numeros tabulares: obligatorio en importes, stock y contadores para que las
   columnas se lean alineadas. Es constante en los 17 archivos de diseno.
   -------------------------------------------------------------------------- */

.sf-money,
.sf-num,
body.sf-app td,
body.sf-app th {
    font-variant-numeric: tabular-nums;
}

.sf-money {
    text-align: right;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Utilidades minimas
   -------------------------------------------------------------------------- */

.sf-kicker {
    font-size: var(--sf-fs-kicker);
    letter-spacing: var(--sf-ls-kicker);
    text-transform: uppercase;
    color: var(--sf-text-faint);
}

.sf-muted {
    color: var(--sf-text-muted);
}

.sf-faint {
    color: var(--sf-text-faint);
}

.sf-ghost {
    color: var(--sf-text-ghost);
}

.sf-spacer {
    flex: 1;
}

/* Texto solo para lectores de pantalla: conserva literales necesarios
   (accesibilidad y tests) sin ocupar lugar en pantalla. */
.sf-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}