/* =============================================================================
   MonkeyCams — 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;
    /* «Con carrete» no es un estado de la cámara, es un eje aparte: puede
       estar cargada y a la vez funcional, con detalles o en taller. Hasta el
       2026-07-29 reutilizaba el amarillo de `warning`, así que en la franja de
       resumen «con detalles» y «con carrete» salían con el MISMO color y no
       había forma de distinguirlas de un vistazo — que es justo lo que
       reportó el usuario.
       Lila y no otro tono libre porque lo pidió él. Es el color más difícil
       de encajar en esta paleta (`--repair-color` ya es morado, #bf5af2 a
       280°), así que se elige lo más lejos que se puede sin dejar de ser
       lila: 249°, o sea 31° de separación, y además notablemente más claro y
       menos saturado que el morado de taller. Contraste 7,2:1 sobre
       --bg-surface, por encima de la mitad de los tokens de estado. */
    --loaded-color: #ab9cff;
    --loaded-rgb: 171, 156, 255;
    /* «Novedad» del catálogo de Cámaras (2026-08-08): naranja porque es el
       único tono cálido que queda libre — verde ya es «lo tienes», ámbar ya
       es aviso/pendiente, rojo es error, morado es taller, lila es carrete
       cargado — y porque no lleva ninguna connotación de estado previa que
       pudiera confundirse con esto, que no es un estado sino una fecha. */
    --new-color: #ff9f0a;
    --new-rgb: 255, 159, 10;
    /* Chips «Foto / Vídeo / Foto y vídeo» del catálogo de Cámaras
       (2026-08-16, dos vueltas). Verde/ámbar/rojo/morado/lila/naranja ya
       tienen dueño. Primera vuelta: «Vídeo» en teal —el único hueco de
       matiz libre entre el verde de «lo tienes» (142°) y el azul-cian de
       «por revelar» (198°)— y «Ambas» reutilizando `--info` (=`--accent`,
       ya definida y sin usar hasta entonces); «Foto», al ser la mayoría
       (38 de 73), se dejó en gris neutro. Segunda vuelta, el mismo día: el
       usuario pidió que «Foto» también se distinguiera —«es gris básico»—,
       así que suma su propio matiz: rosa/magenta a 336°, el hueco que queda
       entre el morado de taller (280°) y el rojo de error (4°/364°), la
       única franja de la rueda que aún no tenía dueño. */
    --video-color: #26d9c7;
    --video-rgb: 38, 217, 199;
    --foto-color: #ff5fa8;
    --foto-rgb: 255, 95, 168;
    /* «A la venta» del catálogo de Cámaras (2026-08-16): antes «Se sigue
       fabricando» solo en analógicas, ahora en TODA cámara que se compra
       nueva hoy. No podía ser el verde de `--ok` («Ya la tienes» ya lo usa
       para un hecho distinto, y las dos pueden salir en la misma tarjeta —
       una digital que tienes y que además se sigue vendiendo nueva—, así
       que compartir color las confundiría). El hueco libre más grande de
       toda la rueda está entre el ámbar de aviso (50°) y el verde de «lo
       tienes» (142°): verde lima a 100°, a 42° de cada uno de sus vecinos. */
    --buy-color: #5cd61f;
    --buy-rgb: 92, 214, 31;

    --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);
    --loaded-bg: rgba(171, 156, 255, 0.14);
    --loaded-tx: #c9bfff;
    --loaded-bd: rgba(171, 156, 255, 0.32);
    --new-bg: rgba(255, 159, 10, 0.14);
    --new-tx: #ffbb60;
    --new-bd: rgba(255, 159, 10, 0.32);
    --video-bg: rgba(38, 217, 199, 0.14);
    --video-tx: #7deee0;
    --video-bd: rgba(38, 217, 199, 0.32);
    --foto-bg: rgba(255, 95, 168, 0.14);
    --foto-tx: #ffa8cf;
    --foto-bd: rgba(255, 95, 168, 0.32);
    --buy-bg: rgba(92, 214, 31, 0.14);
    --buy-tx: #9ce278;
    --buy-bd: rgba(92, 214, 31, 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
       (--radius-pill/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 */
    /* Forma píldora. No es un cuarto nivel de la escala de arriba: es «todo lo
       redondeado que haga falta». Existía escrito de cuatro maneras distintas
       (99px, 980px, 999px, 9999px) que hacen exactamente lo mismo. Los
       círculos siguen con 50%, que sí es otra cosa. */
    --radius-pill: 9999px;

    /* Ancho de la columna de contenido. Estaba escrito a mano como 1024px en
       15 sitios de 5 hojas —hero, KPIs, gráfico, toolbar, listas, tabla,
       recetas, noticias, styleguide—, todos queriendo decir lo mismo pero
       sin decirlo: cambiarlo obligaba a encontrar los quince y acertar.

       Son dos anchos, no uno, porque son dos tipos de contenido:

       · --content-max        Columna de LECTURA (noticias, recetas,
         styleguide). 1024px es una medida de línea cómoda; ensancharla
         empeora la lectura, así que se queda donde estaba.

       · --content-max-table  El INVENTARIO, que es una tabla de datos. Ahí
         el ancho no es una cuestión de comodidad de lectura sino de cuántas
         columnas caben sin apilarse: medido a 1920, pasar de 1024 a 1280
         hace que las etiquetas de Observaciones quepan en una línea y las
         filas «altas» bajen de 9 a 2 (la tabla mide 164px menos). Por
         debajo de 1366px de ventana no cambia nada: el marco de la app
         (.container, 1500px) manda antes que este token. */
    --content-max: 1024px;
    --content-max-table: 1280px;

    /* 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-actions-bar: 50;     /* barra de acciones del modo edición */
    /* Menú ⋮ de cuenta: por encima de esa barra (si no, la píldora de guardar
       le pasaría por delante en cuanto se solaparan) y por debajo del scrim,
       para que el cajón móvil lo siga tapando como a todo lo demás. */
    --z-account-menu: 55;
    --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;
    /* Los cuatro niveles de diálogo, de abajo arriba. Todos comparten la
       clase .editor-modal-backdrop, así que sin un token propio se apilaban
       por orden en el DOM — y los que se crean al vuelo (repaso, confirmar)
       van siempre después que el login, que es estático. Eso dejó el login
       escondido detrás del repaso al caducar la sesión.
         · modal   — repaso de cambios pendientes
         · login   — desbloquea todo lo demás, así que manda sobre el repaso
         · confirm — destructivo y bloqueante: por encima de cualquier diálogo
         · toast   — informativo: se lee por encima de todo lo anterior */
    --z-modal: 10000;
    --z-modal-login: 10001;
    --z-modal-confirm: 10002;
    --z-editor-toast: 10003;
    --z-skip-link: 10004;    /* siempre alcanzable por encima de todo */
    /* Cortina de arranque: por encima incluso del enlace de saltar al
       contenido. Mientras no hay colección no hay contenido al que saltar, y
       un enlace alcanzable sobre una pantalla vacía no lleva a ninguna parte. */
    --z-boot: 10005;
    /* Salto rápido (Ctrl+K): por encima de todo, cortina de arranque
       incluida — se puede invocar desde cualquier pantalla, con cualquier
       otro diálogo abierto o no, y tiene que quedar siempre arriba. */
    --z-quick-jump: 10006;
}


/* 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: var(--radius-pill);
}

*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
    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);
}