/* ===========================================================================
   Onix — sistema de color, tipografía y espacio (dirección A)
   Estilo Linear desde el 2026-09-23 (tarde): en claro, pagina BLANCA con tarjetas
   blancas separadas por borde fino, sin sombra, y la tinta en gris oscuro, no negro; el crema con tarjeta blanca eran dos blancos
   peleando (el dueno). El crema queda solo en la landing (landing.css).
   Antes, paleta Bosque: el verde de la marca es el ambiente, no
   solo el color del botón. En claro, fondo crema salvia y tinta verde bosque;
   en oscuro, gris carbon NEUTRO con texto casi blanco. Ni verde de fondo (parecia
   un pantano) ni tinte calido (con texto crema se veia amarillo, "como con
   hepatitis"): las dos cosas las dijo el dueno el 2026-09-23. El crema es del claro. --onix-invert-* es el bloque que
   manda (la venta del mes, el pedido confirmado) y es oscuro en los dos temas.
   ---------------------------------------------------------------------------
   Un solo conjunto de tokens, dos temas. NADA en el resto del CSS debe usar
   un hex literal: todo pasa por var(--onix-*). Así light y dark no son dos
   diseños, son el mismo diseño con otro valor de token.

   Cómo se resuelve el tema:
     - sin atributo  -> sigue al sistema operativo (prefers-color-scheme)
     - <html data-theme="light">  -> fuerza claro
     - <html data-theme="dark">   -> fuerza oscuro
   El selector :root:not([data-theme="light"]) dentro del media query evita
   que el sistema le gane a la elección explícita del usuario.
   =========================================================================== */

:root {
  /* --- Tipografía --------------------------------------------------------- */
  --onix-font-sans: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* Familia de titulares. El panel no la usa: nace para la landing, donde una
     sola familia dejaba a un h2 sin mas diferencia que el tamano. */
  --onix-font-display: 'Space Grotesk', 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --onix-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Las cifras (2026-09-23): la letra del texto con numeros de ancho fijo, y las grandes en la de los
     titulos. En monoespaciada se veian negras y pesadas, como de maquina de escribir. La mono queda
     para lo que es codigo. */
  --onix-font-num: var(--onix-font-mono);
  --onix-font-cifra: var(--onix-font-display);

  /* Escala tipográfica: tamaño / peso / tracking */
  --onix-text-title: 600 25px/1.2 var(--onix-font-sans);
  --onix-text-h2: 600 19px/1.25 var(--onix-font-sans);
  --onix-text-row: 550 13.5px/1.4 var(--onix-font-sans);
  --onix-text-body: 400 13px/1.5 var(--onix-font-sans);
  --onix-text-meta: 400 12px/1.45 var(--onix-font-sans);
  --onix-text-caps: 600 11px/1.3 var(--onix-font-sans);
  --onix-tracking-title: -0.025em;
  --onix-tracking-caps: 0.1em;

  /* --- Radios (mas redondos desde el 2026-09-23: el panel se sentia de 2015) --- */
  --onix-radius-chip: 6px;   /* chips, badges, celdas de tabla */
  --onix-radius-control: 8px; /* botones, campos, pestañas */
  --onix-radius-card: 10px;  /* filas, tarjetas */
  --onix-radius-panel: 12px; /* paneles y secciones */

  /* --- Alturas de control (mínimo táctil 44px en móvil) -------------------- */
  --onix-h-btn: 34px;
  --onix-h-btn-sm: 28px;
  --onix-h-field: 38px;
  --onix-h-field-lg: 46px; /* login */
  --onix-h-row: 52px;

  /* --- Espacio ------------------------------------------------------------ */
  --onix-gap-xs: 6px;
  --onix-gap-sm: 10px;
  --onix-gap-md: 14px;
  --onix-gap-lg: 18px;
  --onix-gap-xl: 26px;

  /* --- Ancho de la barra lateral ------------------------------------------ */
  --onix-sidebar-w: 248px;

  /* =========================================================================
     TEMA CLARO (por defecto)
     ========================================================================= */

  /* Superficies */
  --onix-bg: #FFFFFF;
  --onix-surface: #FFFFFF;
  --onix-surface-nav: #FAFAFA;
  --onix-surface-2: #F4F5F5;     /* hover / fila seleccionada */
  --onix-surface-field: #FFFFFF;
  --onix-surface-mute: #F4F5F5;  /* deshabilitado */

  /* Bordes */
  --onix-border: #E6E8E8;
  --onix-border-strong: #D6D9D9;
  --onix-border-soft: #EFF0F0;

  /* Texto — todos ≥ 4.3:1 sobre --onix-surface */
  --onix-ink: #23272B;      /* 17.8:1 */
  --onix-ink-2: #3E4348;    /* 11.7:1 */
  --onix-ink-3: #50565B;    /*  8.0:1 */
  --onix-muted: #656B70;    /*  5.6:1 */
  --onix-dim: #747A7F;      /*  4.3:1 — metadatos, nunca texto esencial */
  --onix-faint: #A3A8AC;    /* decorativo: separadores, iconos vacíos */

  /* Acento */
  --onix-accent: #3B6EC6;        /* azul de marca, 4.9:1 sobre blanco */
  --onix-accent-hover: #0A3A60;
  --onix-accent-ink: #FFFFFF;    /* texto sobre el botón de acento */
  --onix-accent-soft: #E6EEFA;
  --onix-accent-line: rgba(59, 110, 198, 0.22);
  --onix-accent-ring: rgba(59, 110, 198, 0.14);

  /* Estado */
  --onix-danger: #B03A26;        /* 6.0:1 */
  --onix-danger-ink: #FFFFFF;
  --onix-danger-soft: #FDF2EF;
  --onix-danger-line: #F0D4CC;
  --onix-warn: #9A650A;          /* 5.0:1 */
  --onix-warn-soft: #FBF1DC;
  --onix-info: #2F55B8;
  --onix-info-soft: #E8EDFA;
  --onix-stage-negotiating: #A8501C;
  --onix-stage-negotiating-soft: #FBEDE4;

  /* Series de gráficos — validadas para daltonismo sobre --onix-surface */
  --onix-series-clients: #3D6BD6;
  --onix-series-bot: #0E7C5A;
  --onix-series-lost: #B03A26;
  --onix-series-open: #9AA8A2;
  /* Fase 9: mismo ámbar que --onix-warn (no es "en curso" ni un rechazo, es una conversación que se
     enfrió sola) - reusa el valor ya validado en vez de sumar un tono nuevo sin auditar. */
  --onix-series-abandoned: #9A650A;

  /* Burbujas de conversación */
  --onix-bubble-in: #F4F5F5;
  --onix-bubble-in-ink: #373B3F;
  --onix-bubble-out: #DCE7F8;
  --onix-bubble-out-ink: #0A3A60;

  /* Bloques oscuros a propósito (mock de conversación, banda del CTA).
     No siguen al tema: son un contraste deliberado. En oscuro se elevan
     un punto para no fundirse con el fondo de la página. */
  --onix-invert: #072A47;
  --onix-invert-surface: #0A3A60;
  --onix-invert-border: #1B4E78;
  --onix-invert-muted: #9FB6D3;
  --onix-invert-ink: #EEF3FA;
  --onix-invert-accent: #A9C3EE; /* cifras y enlaces sobre el bloque invertido, en los dos temas */
  /* El boton principal de la landing: azul marino en claro, azul claro en oscuro. */
  /* El botón principal, en el azul de la marca nueva (29 sep 2026): la landing y el panel son una marca. */
  --onix-cta: #0A3A60;
  --onix-cta-hover: #072A47;
  --onix-cta-ink: #FFFFFF;

  /* Marca. Los dos verdes del emblema: el logo se dibuja inline en cada pagina y toma estos tokens,
     asi que cada tema le da sus verdes y el emblema va directo sobre el fondo, sin pastilla.
     La pastilla blanca que tuvo hasta el 2026-09-23 se quito: el dueno quiere el logo transparente. */
  --onix-logo-disc: #3B6EC6;
  --onix-logo-leaf: #FFFFFF;
  --onix-logo-leaf-dark: #0A3A60;
  --onix-logo-leaf-light: #3B6EC6;

  /* Sombra: en claro hay elevación, en oscuro el borde hace ese trabajo */
  --onix-shadow-sm: 0 1px 2px rgba(16, 20, 22, 0.04);
  --onix-shadow-md: 0 4px 14px rgba(16, 20, 22, 0.06);
  --onix-shadow-lg: 0 24px 64px rgba(7, 42, 71, 0.28);
  /* Tarjetas de la landing: elevacion apenas perceptible en reposo y un paso
     mas al pasar el mouse. En oscuro la elevacion no se lee, asi que ahi el
     realce lo hace el borde y la sombra casi desaparece. */
  --onix-shadow-card: none;
  --onix-shadow-card-hover: none;

  /* Velo del modal y aro del punto de color: no son "un gris", cambian de
     tema como todo lo demás. */
  --onix-scrim: rgba(7, 42, 71, 0.45);
  --onix-swatch-ring: rgba(7, 42, 71, 0.14);

  /* Buscador dentro del hilo: coincidencia normal y la que esta seleccionada.
     Son dos niveles a proposito - con uno solo no se sabe cual de las 12 se
     esta mirando. */
  --onix-mark: #FBE9A8;
  --onix-mark-ink: #3A2E05;
  --onix-mark-active: #F2B705;
  --onix-mark-active-ink: #2A2100;
}

/* =========================================================================
   TEMA OSCURO
   Se redefinen SOLO los tokens de color. Tipografía, radios, alturas y
   espacios no cambian entre temas — si cambian, es un bug.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --onix-bg: #101111;
    --onix-surface: #191A1A;
    --onix-surface-nav: #141515;
    --onix-surface-2: #212323;
    --onix-surface-field: #151616;
    --onix-surface-mute: #1C1D1D;

    --onix-border: #2A2C2C;
    --onix-border-strong: #383A3A;
    --onix-border-soft: #202222;

    --onix-ink: #EEEFEE;
    --onix-ink-2: #CFD1D0;
    --onix-ink-3: #B8BBBA;
    --onix-muted: #999C9B;
    --onix-dim: #858887;
    --onix-faint: #555857;

    --onix-accent: #A9C3EE;
    --onix-accent-hover: #C7D8F4;
    --onix-accent-ink: #072A47;
    --onix-accent-soft: rgba(169, 195, 238, 0.12);
    --onix-accent-line: rgba(169, 195, 238, 0.24);
    --onix-accent-ring: rgba(169, 195, 238, 0.10);

    --onix-danger: #F08A6E;
    --onix-danger-ink: #1F0E09;
    --onix-danger-soft: #2A1814;
    --onix-danger-line: #4A2A20;
    --onix-warn: #E3B45C;
    --onix-warn-soft: rgba(227, 180, 92, 0.14);
    --onix-info: #8FAEF0;
    --onix-info-soft: rgba(92, 131, 224, 0.16);
    --onix-stage-negotiating: #E0783C;
    --onix-stage-negotiating-soft: rgba(224, 120, 60, 0.16);

    --onix-series-clients: #5C83E0;
    --onix-series-bot: #1EA162;
    --onix-series-lost: #C9503A;
    --onix-series-open: #4A4C4C;
    --onix-series-abandoned: #E0A33C;

    --onix-bubble-in: #212323;
    --onix-bubble-in-ink: #CFD1D0;
    --onix-bubble-out: #1B3A5E;
    --onix-bubble-out-ink: #E6EEFA;

    --onix-invert: #0B1B2A;
    --onix-invert-surface: #12283C;
    --onix-invert-border: #1B3A55;
    --onix-invert-muted: #A9C3EE;
    --onix-invert-ink: #EEEFEE;
    --onix-invert-accent: #A9C3EE; /* cifras y enlaces sobre el bloque invertido, en los dos temas */
    /* El boton principal de la landing: azul marino en claro, azul claro en oscuro. */
    --onix-cta: #A9C3EE;
    --onix-cta-hover: #C7D8F4;
    --onix-cta-ink: #072A47;

    --onix-logo-disc: #A9C3EE;
    --onix-logo-leaf: #101111;
    /* Sobre fondo oscuro se invierte la jerarquia: el verde que era el mas oscuro pasa a ser el mas
       claro, porque es el que tiene que leerse primero. */
    --onix-logo-leaf-dark: #E6EEFA;
    --onix-logo-leaf-light: #7FA3DD;

    --onix-shadow-sm: none;
    --onix-shadow-md: none;
    --onix-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
    --onix-shadow-card: none;
    --onix-shadow-card-hover: 0 18px 40px -26px rgba(0, 0, 0, 0.75);
    --onix-scrim: rgba(0, 0, 0, 0.66);
    --onix-swatch-ring: rgba(238, 239, 238, 0.18);

    --onix-mark: rgba(224, 163, 60, 0.28);
    --onix-mark-ink: #F0DCAE;
    --onix-mark-active: #E0A33C;
    --onix-mark-active-ink: #1A1305;
  }
}

/* La elección explícita del usuario gana en las dos direcciones. */
:root[data-theme="dark"] {
  --onix-bg: #101111;
  --onix-surface: #191A1A;
  --onix-surface-nav: #141515;
  --onix-surface-2: #212323;
  --onix-surface-field: #151616;
  --onix-surface-mute: #1C1D1D;

  --onix-border: #2A2C2C;
  --onix-border-strong: #383A3A;
  --onix-border-soft: #202222;

  --onix-ink: #EEEFEE;
  --onix-ink-2: #CFD1D0;
  --onix-ink-3: #B8BBBA;
  --onix-muted: #999C9B;
  --onix-dim: #858887;
  --onix-faint: #555857;

  --onix-accent: #A9C3EE;
  --onix-accent-hover: #C7D8F4;
  --onix-accent-ink: #072A47;
  --onix-accent-soft: rgba(169, 195, 238, 0.12);
  --onix-accent-line: rgba(169, 195, 238, 0.24);
  --onix-accent-ring: rgba(169, 195, 238, 0.10);

  --onix-danger: #F08A6E;
  --onix-danger-ink: #1F0E09;
  --onix-danger-soft: #2A1814;
  --onix-danger-line: #4A2A20;
  --onix-warn: #E3B45C;
  --onix-warn-soft: rgba(227, 180, 92, 0.14);
  --onix-info: #8FAEF0;
  --onix-info-soft: rgba(92, 131, 224, 0.16);
  --onix-stage-negotiating: #E0783C;
  --onix-stage-negotiating-soft: rgba(224, 120, 60, 0.16);

  --onix-series-clients: #5C83E0;
  --onix-series-bot: #1EA162;
  --onix-series-lost: #C9503A;
  --onix-series-open: #4A4C4C;
  --onix-series-abandoned: #E0A33C;

  --onix-bubble-in: #212323;
  --onix-bubble-in-ink: #CFD1D0;
  --onix-bubble-out: #1B3A5E;
  --onix-bubble-out-ink: #E6EEFA;

  --onix-invert: #0B1B2A;
  --onix-invert-surface: #12283C;
  --onix-invert-border: #1B3A55;
  --onix-invert-muted: #A9C3EE;
  --onix-invert-ink: #EEEFEE;
  --onix-invert-accent: #A9C3EE; /* cifras y enlaces sobre el bloque invertido, en los dos temas */
  /* El boton principal de la landing: azul marino en claro, azul claro en oscuro. */
  --onix-cta: #A9C3EE;
  --onix-cta-hover: #C7D8F4;
  --onix-cta-ink: #072A47;

  --onix-logo-disc: #A9C3EE;
  --onix-logo-leaf: #101111;
  --onix-logo-leaf-dark: #E6EEFA;
  --onix-logo-leaf-light: #7FA3DD;

  --onix-shadow-sm: none;
  --onix-shadow-md: none;
  --onix-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --onix-shadow-card: none;
  --onix-shadow-card-hover: 0 18px 40px -26px rgba(0, 0, 0, 0.75);
  --onix-scrim: rgba(0, 0, 0, 0.66);
  --onix-swatch-ring: rgba(238, 239, 238, 0.18);

  --onix-mark: rgba(224, 163, 60, 0.28);
  --onix-mark-ink: #F0DCAE;
  --onix-mark-active: #E0A33C;
  --onix-mark-active-ink: #1A1305;
}

/* =========================================================================
   Base
   ========================================================================= */

/* Los controles nativos (casillas, selects, barras de scroll) se pintan segun
   color-scheme, no segun nuestros tokens. Sin las dos lineas de abajo seguian al
   sistema operativo: con Windows en oscuro y el panel en claro, una casilla sin
   marcar salia como un cuadro negro. El atributo manda; sin atributo, el SO. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

html, body {
  background: var(--onix-bg);
  color: var(--onix-ink);
  font-family: var(--onix-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Números: cifras de ancho fijo, para que las columnas de precios y conteos
   no bailen al actualizarse. En la letra del texto, no en mono. */
.onix-num {
  font-family: var(--onix-font-num);
  font-variant-numeric: tabular-nums;
}

/* El cambio de tema no debe animarse elemento por elemento: una sola
   transición corta en las superficies evita el parpadeo al alternar. */
@media (prefers-reduced-motion: no-preference) {
  body, .onix-surface, .onix-panel {
    transition: background-color 120ms ease, border-color 120ms ease;
  }
}

/* ===========================================================================
   El conmutador de tema
   ---------------------------------------------------------------------------
   Único componente que vive en este archivo, y por una razón: tiene que
   funcionar DESDE LA FASE 0, cuando admin.css todavía es el viejo. Cuando el
   rediseño esté completo puede mudarse a admin.css sin cambiar una línea.
   =========================================================================== */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-control);
  background: transparent;
  color: var(--onix-muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.theme-toggle:hover {
  color: var(--onix-ink);
  border-color: var(--onix-border-strong);
  background: var(--onix-surface-2);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--onix-accent);
  outline-offset: 2px;
}

/* En móvil el botón crece al mínimo táctil sin mover el resto de la barra. */
@media (max-width: 640px) {
  .theme-toggle { width: 44px; height: 44px; }
}