/* =============================================================================
   AnalogCams — Tokens, fuentes, reset y scrollbars
   Cargar antes de forms.css y components.css.
   ============================================================================= */

/* ============================================
           FUENTES (autohospedadas)
        ============================================ */
@font-face {
    font-family: "DM Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/dm-mono-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/dm-mono-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
           VARIABLES
        ============================================ */
/* Apple Oscuro */
:root {
    --bg-body: #000000;
    --bg-surface: #1d1d1f;
    --bg-hover: #202022;
    --bg-raised: #161617;
    --sidenav-bg: #161617;
    --border: #3a3a3c;
    --border-subtle: #2a2a2c;
    --text-main: #f5f5f7;
    --text-muted: #98989d;
    --text-faint: #86868b;
    --accent: #2997ff;
    --accent-rgb: 41, 151, 255;
    --focus-ring: #ffd60a;
    /* Azul de relleno para botones sólidos con texto blanco: --accent
       (#2997ff) da solo ~3:1 de contraste con blanco (no cumple WCAG AA
       4.5:1 para texto normal). --accent-fill es el mismo azul oscurecido
       lo justo (~4.7:1 con blanco) para que --on-accent: blanco cumpla
       accesibilidad. --accent en sí no se toca: como texto/borde sobre
       fondos oscuros ya tenía buen contraste. */
    --accent-fill: #0071e3;
    --on-accent: #ffffff;
    --on-danger: #240000;
    --accent-dim: rgba(41, 151, 255, 0.14);
    --accent-glow: rgba(41, 151, 255, 0.06);

    --ok-color: #30d158;
    --ok-rgb: 48, 209, 88;
    --warn-color: #ffd60a;
    --warn-rgb: 255, 214, 10;
    --err-color: #ff453a;
    --err-rgb: 255, 69, 58;
    --pend-color: #64d2ff;
    --repair-color: #bf5af2;

    --ok-bg: rgba(48, 209, 88, 0.14);
    --ok-tx: #7adb95;
    --ok-bd: rgba(48, 209, 88, 0.32);
    --warn-bg: rgba(255, 214, 10, 0.14);
    --warn-tx: #ffd97a;
    --warn-bd: rgba(255, 214, 10, 0.32);
    --err-bg: rgba(255, 69, 58, 0.14);
    --err-tx: #ff8579;
    --err-tx-rgb: 255, 133, 121;
    --err-bd: rgba(255, 69, 58, 0.32);
    --pend-bg: rgba(100, 210, 255, 0.14);
    --pend-tx: #9be3ff;
    --pend-bd: rgba(100, 210, 255, 0.32);
    --repair-bg: rgba(191, 90, 242, 0.14);
    --repair-tx: #d693f5;
    --repair-bd: rgba(191, 90, 242, 0.32);
    --info-color: #2997ff;
    --info-bg: rgba(41, 151, 255, 0.14);
    --info-tx: #5cb2ff;
    --info-bd: rgba(41, 151, 255, 0.32);
    color-scheme: dark;

    /* RGB tripletas para overlays oscuros (lightbox, recetas) — usadas en components.css */
    --ac-overlay-white: 255, 255, 255;
    --ac-overlay-black: 0, 0, 0;
    --ac-overlay-surface-1: 28, 28, 30;
    --ac-overlay-surface-2: 60, 60, 64;

    /* Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

    /* Radios: escala de 3 niveles. Las formas píldora/circulares
       (99px/999px/50%) son una categoría aparte y no usan esta escala. */
    --radius-sm: 10px;   /* controles: botones, inputs, banners pequeños */
    --radius-md: 12px;   /* modales, menús, confirmaciones, toasts */
    --radius-lg: 14px;   /* tarjetas y paneles: KPIs, gráfico, tabla, brand-group, news-card */

    /* Z-index: escala real de capas fijas, en orden ascendente.
       Todo position:fixed/overlay usa un token de aquí — nunca un número. */
    --z-sticky: 30;          /* sidenav */
    --z-scrim: 60;           /* scrim del drawer de cámara */
    --z-drawer: 70;          /* drawer de cámara */
    --z-overlay: 9000;       /* panel editor, bandeja comparar */
    --z-compare-modal: 9100;
    --z-lightbox: 9200;      /* por encima del modal comparar */
    --z-contact-sheet: 9300;
    --z-loupe: 9400;         /* lupa del lightbox */
    --z-toast: 9999;
    --z-modal: 10000;        /* backdrops de ajustes / PIN */
    --z-editor-toast: 10001;
    --z-skip-link: 10004;    /* siempre alcanzable por encima de todo */
}


/* Grain overlay — rompe la planitud digital sin cambiar la paleta */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-skip-link);
    opacity: 0.035;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
    body::after { display: none; }
}

/* ============================================
           RESET & BASE
        ============================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Reserva siempre el hueco del scrollbar para que la barra lateral y el
   contenido no salten al cambiar entre paneles más altos/bajos que la
   pantalla (aparición/desaparición del scrollbar vertical). */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    background: var(--bg-body);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
        "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    min-height: 100vh;
    font-optical-sizing: auto;
    font-kerning: normal;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 28px);
}

/* Barras de desplazamiento (Firefox) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-body);
}

/* Barras de desplazamiento (Chromium, Safari, Edge) */
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-body);
    border-radius: 99px;
}

*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 99px;
    border: 2px solid var(--bg-body);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--text-faint);
    border-color: var(--bg-body);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--accent);
    border-color: var(--bg-body);
}

*::-webkit-scrollbar-corner {
    background: var(--bg-body);
}

/* Riel alineado con superficies elevadas (tabla, noticias) */
.news-sidebar-scroll,
.table-wrapper {
    scrollbar-color: var(--border) var(--bg-surface);
}

.news-sidebar-scroll::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track {
    background: var(--bg-surface);
}

.news-sidebar-scroll::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb {
    border-color: var(--bg-surface);
}

.news-sidebar-scroll::-webkit-scrollbar-thumb:hover,
.table-wrapper::-webkit-scrollbar-thumb:hover {
    border-color: var(--bg-surface);
}

.news-sidebar-scroll::-webkit-scrollbar-thumb:active,
.table-wrapper::-webkit-scrollbar-thumb:active {
    border-color: var(--bg-surface);
}

.news-sidebar-scroll::-webkit-scrollbar-corner,
.table-wrapper::-webkit-scrollbar-corner {
    background: var(--bg-surface);
}