/* ===========================================================================
   Los colores y las tipografias de la casa. UN solo archivo.
   ===========================================================================

   Lo cargan las dos areas —bodega, que es React, y compras, que es una
   plantilla de Django— desde /static/tokens.css. Que sea un archivo y no dos
   copias es el punto entero: hasta hoy cada una tenia su propio bloque de
   variables, con los mismos siete papeles bajo siete nombres distintos y
   valores parecidos pero no iguales (--ink-3 contra --muted, #D5DCE3 contra
   #E4E8EB). Nadie decidio esa diferencia: salio de que se escribieron en
   momentos distintos. Y dos copias siempre acaban separandose.

   LA REGLA DE COLOR, EN UNA LINEA
   La aplicacion es negra, gris y blanca; el COLOR es el dato.

   Nada del armazon lleva color: ni los botones, ni las pestanas, ni la franja
   de areas, ni lo seleccionado. Todo eso es tinta, gris o blanco. El color
   aparece solo donde significa algo —el verde de lo cumplido, el ambar de lo
   que se atrasa, el rojo de lo vencido, las marcas de color de las filas, el
   azul que avisa de que una columna viene del ERP y no se toca— y por eso se
   ve. En una pantalla tenida entera, ninguna senal destaca.

   Hasta ayer cada area tenia ademas su propio color: azul bodega, verde
   compras. Se quito. Para saber donde estas hay dos cosas mejores que un
   codigo de colores que hay que aprenderse: la franja de la izquierda, que
   marca el area, y el titulo de la pantalla, que se lee.

   Los nombres son los de bodega (en castellano) porque es la que lleva mas
   tiempo y mas codigo: mover la que menos pesa cuesta menos.
   =========================================================================== */

:root{
  /* --- neutros ---------------------------------------------------------- */
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --surface-3:#F1F4F7;
  --line:#D5DCE3;
  --line-fuerte:#B4C0CB;
  --ink:#101820;
  --ink-2:#4B5863;
  --ink-3:#7A8792;

  /* --- la accion -------------------------------------------------------- */
  /* Negra. Un solo color para "esto hace algo", igual en las dos areas, para
     que el boton que dispara no se confunda nunca con lo que solo senala. */
  --accion:#111A22;
  --accion-hover:#27333D;
  --accion-ink:#FFFFFF;

  /* --- que ha pasado ---------------------------------------------------- */
  --ok:#15803D;     --ok-suave:#E7F4EC;
  --alerta:#B45309; --alerta-suave:#FDF1E1;
  --grave:#B4241E;  --grave-suave:#FBEBEA;

  /* --- de donde viene el dato (lo usa la hoja de bodega) ---------------- */
  --erp:#0B5FA5; --bodega:#B45309; --bodega-suave:#FEF6EA; --auto:#6B7B8A;

  /* --- lo que senala ---------------------------------------------------- */
  /* Lo activo: la pestana abierta, el area abierta en la franja, la fila
     seleccionada, el foco del teclado. Tinta y gris, y lo mismo en las dos
     areas: el armazon de las dos pantallas es el mismo armazon. */
  --acento:var(--ink);
  --acento-2:var(--accion-hover);  /* el anillo del foco, que necesita verse */
  --acento-ink:var(--ink);
  /* El gris que rellena lo activo. No vale reusar --surface-3: ese ya es el
     fondo de la franja y de las etiquetas en reposo, asi que lo encendido y
     lo apagado quedarian del mismo color. Este es un escalon por debajo. */
  --acento-suave:#E8EDF2;

  /* --- forma ------------------------------------------------------------ */
  /* TRES radios, no uno, y cada uno con su papel. Un solo numero repetido en
     todas partes aplana la jerarquia: una tarjeta que envuelve media pantalla
     y una etiqueta de 18 px no pueden curvarse igual, porque el ojo lee la
     curva en proporcion al tamano.

     Y la tabla NO se redondea. Redondear las celdas de una rejilla densa
     rompe el ritmo vertical y se ve recargado: lo que se curva es lo que esta
     ENCIMA de la superficie —botones, tarjetas, menus—, no la superficie. */
  --radio-chico:4px;    /* etiquetas, marcas, botones diminutos */
  --radio:8px;          /* lo que se usa: botones, campos, listas */
  --radio-grande:12px;  /* tarjetas, paneles, menus flotantes */
  --pastilla:999px;     /* los chips, que son ovalos a proposito */

  --sombra:0 1px 2px rgba(16,24,32,.05), 0 10px 28px -18px rgba(16,24,32,.35);

  /* --- letra ------------------------------------------------------------ */
  /* Barlow Semi Condensed para titulos y rotulos: es estrecha, y en una tabla
     de 22 columnas eso son columnas enteras de diferencia. IBM Plex Mono para
     codigos, lotes y cantidades, donde las cifras tienen que alinearse. */
  --display:"Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --texto:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --codigo:"IBM Plex Mono", ui-monospace, "Consolas", monospace;
}

/* Las dos van siempre en blanco, sin seguir el tema del sistema. Vivia
   repetido en cada aplicacion; tambien es de la casa. */
html{color-scheme:light}

/* La plantilla de compras sigue llevando class="area-compras" en el <html>.
   Ya no cambia ningun color —ese era todo su trabajo hasta hoy— pero se deja
   puesta: es el gancho por si algun dia una de las dos necesita una excepcion
   de verdad, y cuesta menos dejarla que volver a colgarla. */