/* Tokens de diseño de TeleMarket. Ningún color fuera de esta lista
   (CLAUDE.md sección 11). */
/* Un solo tema, y es claro.
   Va aquí y también como <meta> en cada cascarón: el meta lo lee el
   navegador antes de bajar el CSS —así no hay un parpadeo oscuro al abrir—
   y esta regla es la que respetan los motores nuevos. Sin las dos, el modo
   oscuro forzado del teléfono invierte los fondos y apaga el rojo de la
   marca, que es lo último que uno quiere en la tienda.

   **`only light` y no `light` a secas.** Decir «light» solo describe cómo se
   ve la página; el oscurecido automático de Chrome en Android lo ignora y la
   invierte igual —le pasó a clientes del dueño que abrieron la tienda y la
   vieron oscura y fea—. La palabra `only` es la que Chrome documenta como la
   manera de quedarse fuera de ese oscurecido, y también evita el parpadeo
   oscuro mientras carga. */
:root {
  color-scheme: only light;
}

:root {
  --papel: #f6f6f9;
  --papel-alto: #ffffff;
  --papel-hondo: #f2f0ee;
  --tinta: #1f1f1f;
  --tinta-suave: #767676;
  --tinta-tenue: #9a9a9a;
  --linea: rgba(0, 0, 0, 0.06);
  --marca: #d62020;
  --marca-hondo: #b91616;

  /* El amarillo de la etiqueta de precio.
   *
   * Es un color NUEVO en esta lista, y la lista dice que no se use ninguno
   * fuera de ella (CLAUDE.md sección 11). Se agrega, no se cuela: el dueño
   * eligió el icono de sus aplicaciones mirando cinco versiones, y el que
   * escogió es el rojo con la franja amarilla —su etiqueta de precio, que
   * es de donde sale la identidad de todo el sistema—. Ese amarillo tenía
   * que existir en alguna parte.
   *
   * Vive con los de marca y no con los de estado porque eso es: marca de la
   * TIENDA, como el rojo. No significa nada por sí solo —no es «cuidado» ni
   * «pendiente»— y no debe usarse para eso: para avisar ya está --alerta.
   */
  --oro-etiqueta: #f5b301;

  /* El rojo del contorno, más oscuro que los dos de marca.
   *
   * Existe por una razón concreta y no por gusto: el nombre de la cortina
   * va en amarillo SOBRE rojo, y sin un borde más oscuro las dos cosas se
   * confunden en la orilla. Es el mismo recurso del letrero pintado de una
   * tienda — la letra clara siempre lleva su filo oscuro.
   *
   * No se usa para nada más. Para peligro está --peligro.
   */
  --marca-tinta: #7e0d0d;
  --accion: #1b4de4;
  --accion-tenue: rgba(27, 77, 228, 0.12); /* --accion diluido, para fondos "activo" */
  --accion-pastel: rgba(27, 77, 228, 0.05); /* --accion aún más diluido, para el fondo de la columna de navegación */
  --ok: #1f7a43;
  --ok-fondo: #e4f5e8;
  --alerta: #b45309;
  --peligro: #a13636;
  --alerta-fondo: #fdf0dc; /* ámbar diluido: esperando algo, se tardó */
  --peligro-fondo: #f4e4e4;

  --fuente-interfaz: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  /* Solo para títulos de bienvenida. Nunca para datos ni para botones: en una
     caja lo que importa es distinguir el 0 de la O, y de eso se encarga Sans. */
  --fuente-titulo: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  /* El verde de WhatsApp. Es el único color del archivo que NO sale de la
     paleta del proyecto, y está aquí a propósito: no decora nada, identifica
     un servicio de fuera. Se usa exclusivamente en su icono — si aparece
     pintando cualquier otra cosa, está mal puesto. */
  --whatsapp: #25d366;

  --sombra-suave: 0 6px 18px rgba(0, 0, 0, 0.04);

  /* Los botones, estilo Stripe (escogido por el dueño el 2026-10-09 entre
     cinco maquetas): borde fino y nítido, sombra cortita, y se hunden un
     pixel al apretarlos. Antes el borde era --linea (6 % de negro) y sobre
     una tarjeta blanca no se veía: «parecen lisos».
     TODO botón nuevo sale de aquí —.tm-boton y sus variantes, o estos
     tokens si es un botón propio—. Nunca un botón con borde --linea. */
  --boton-radio: 10px;
  --boton-borde: rgba(0, 0, 0, 0.16);
  --boton-sombra: 0 1px 2px rgba(0, 0, 0, 0.06);
  --boton-sombra-accion: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 6px color-mix(in srgb, var(--accion) 30%, transparent);
  --boton-sombra-color: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.12);
  --boton-hundir: 1px;
  --radio-panel: 22px;
  --radio-tarjeta: 18px;

  /* ---------- El color de cada puesto ----------
   *
   * Los eligió el dueño: «Admin verde, cajero café, repartidor azul,
   * encargado amarillo». Tres ya vivían en la paleta —el verde de
   * disponible, el ámbar de alerta, el azul de acción— y aquí se les da
   * nombre propio para que se usen por lo que SIGNIFICAN y no por
   * parecido. El amarillo es nuevo: no había ninguno.
   *
   * Van en pares fondo/tinta y no como un color suelto, porque un puesto se
   * lee en una pastilla: el fondo tiñe y la tinta tiene que seguir
   * legible encima. Todas las tintas son oscuras a propósito.
   *
   * El café y el amarillo son vecinos y podrían confundirse; los separa el
   * fondo —beige contra amarillo claro— y, sobre todo, el icono. */
  --rol-admin: #1F7A43;
  --rol-admin-fondo: #E4F5E8;

  --rol-encargado: #8A6100;
  --rol-encargado-fondo: #FBF0CC;

  --rol-cajero: #7A4A22;
  --rol-cajero-fondo: #F0E6DC;

  --rol-repartidor: #1B4DE4;
  --rol-repartidor-fondo: #E3E9FD;
}