/* Tokens del Design System de Edison.
   Fuente: administracion-edison, frontend/src/style.css y layout.css, commit f4ccd8e (2026-10-23).
   Copiar este archivo al arrancar una app. Si el valor cambia en el repo, se cambia acá primero.
   Guía: Knowledge/Programacion/Design System/Guia - Design System Edison.md */


:root {
  font-family: var(--font-sans);
  color: #1b2430;
  background: #f2f3ef;
  font-size: 14px;

  /* Superficie y texto */
  --paper: #f2f3ef; /* fondo de la página, hover de filas y de botones */
  --ink: #1b2430; /* texto principal y barra lateral */
  --muted: #5b6472; /* texto secundario */
  --line: #dfe2dc; /* bordes y separadores */

  /* Barra lateral: superficie oscura con su propia escala de texto */
  --sidebar-text: #c4c9d2;
  --sidebar-strong: #e7e9ec;
  --sidebar-muted: #9aa1ac;

  /* Marca */
  --teal: #0f6b5c; /* primario, encabezado de tabla, enlaces, foco */
  --teal-dark: #0c5a4e; /* hover del primario */
  --teal-soft: #e4f0ec; /* selección y acento suave */

  /* Estados: lo que se reemplaza, lo nuevo o en curso, y lo que espera una decisión */
  --err: #b3261e;
  --err-soft: #f8e4e2;
  --err-soft-claro: #fdf1f0;
  --ok: #3d7651;
  --ok-soft: #e5efe8;
  --ok-soft-claro: #e6f1e9;
  --warn: #9a5b12;
  --warn-soft: #f6ecdc;
  --atencion: #977029;
  --atencion-soft: #fbf0dd;
  --sello-ambar: #b07a1f;

  /* Forma */
  --radius-panel: 14px; /* tarjetas, paneles, cajas de confirmación */
  --radius-control: 8px; /* botones, campos, menús */

  /* Espacios: separación entre tarjetas (m), grupos y columnas (l), ajustes chicos (s) */
  --espacio-s: 8px;
  --espacio-m: 14px;
  --espacio-l: 22px;

  /* Margen lateral de la página */
  --margen-main: 32px;

  /* Nombres nuevos para valores que en el repo están escritos a mano. Los valores son los reales. */
  --borde-hover: #7db8aa; /* borde de botón al pasar el mouse */
  --danger: #b4483a; /* botón y texto destructivo */
  --sombra-menu: 0 10px 30px #1b243022; /* menús y listas que flotan */
  --sombra-filtro: 0 12px 34px #1b243022;
  --sombra-menu-columna: 0 16px 40px #1b243026;
  --sombra-toast: 0 8px 35px #0002;
  --sombra-cajon: -12px 0 40px #14271922;
  --sombra-confirmacion: 0 15px 55px #0003;
  --velo: #1b243055; /* fondo detrás de cajones y confirmaciones */
  --contador-nav: #e8a317; /* insignia de pendientes en la barra lateral */
}

@media (max-width: 1100px) {
  :root {
    --espacio-s: 6px;
    --espacio-m: 12px;
    --espacio-l: 16px;
    --margen-main: 20px;
  }
}
@media (max-width: 800px) {
  :root {
    --espacio-s: 6px;
    --espacio-m: 10px;
    --espacio-l: 12px;
    --margen-main: 15px;
  }
}
@media (min-width: 1600px) {
  :root {
    --margen-main: 50px;
  }
}

/* Foco: contorno fino de la paleta, visible con teclado en todo lo interactivo. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--teal) 60%, transparent);
  outline-offset: 2px;
}
/* El contenido principal recibe el foco al saltar el menú, sin recuadro alrededor de la página. */
main#contenido:focus {
  outline: none;
}

/* Tamaño del texto (apariencia.tamano): `zoom` sobre la raíz agranda también menús y paneles.
   Toda medida de pantalla se corrige con la escala: ver Design System - Accesibilidad. */
html[data-tamano="grande"] {
  zoom: 1.15;
}
html[data-tamano="muy_grande"] {
  zoom: 1.3;
}

/* Modo daltónico (apariencia.daltonico): paleta Okabe-Ito. Azul para bien, naranja para atención,
   bermellón oscuro para error. El color nunca es lo único: los estados llevan forma o texto. */
html[data-daltonico] {
  --ok: #0068a8;
  --ok-soft: #e0edf7;
  --ok-soft-claro: #e8f2fa;
  --warn: #a35a00;
  --warn-soft: #fbecd9;
  --atencion: #a35a00;
  --atencion-soft: #fbecd9;
  --sello-ambar: #c26200;
  --err: #8f2d00;
  --err-soft: #f9e2d8;
  --err-soft-claro: #fcefe9;
}