/* =====================================================================
   TEMA VISUAL — el ÚNICO lugar con colores, letras, tamaños y esquinas.
   Lo usan las dos apps: la de la COCINA (estilos.css) y la del CLIENTE (cliente.css).
   Para cambiar la apariencia, cambie solo este archivo (no toque la lógica).
   Los íconos de la app del cliente y el color de la barra del celular también
   leen --color-principal y --color-fondo de aquí.

   REGLA FIJA (daltonismo): nada se comunica solo con color. Cada estado
   lleva SIEMPRE ícono + palabra; los colores solo acompañan.
   ===================================================================== */
:root {
  /* ---------- Colores de la marca ---------- */
  --color-fondo: #FFF8EC;            /* crema: fondo de pantalla */
  --color-fondo-2: #FBEEDB;          /* crema más oscuro: encabezados de tabla, zonas */
  --color-superficie: #FFFFFF;       /* tarjetas */
  --color-texto: #1F2328;
  --color-texto-suave: #4B5563;
  --color-borde: #E7D8C0;
  --color-borde-suave: #F1E6D4;
  --color-principal: #D74616;        /* terracota: botones principales */
  --color-principal-oscuro: #AD320D;
  --color-principal-claro: #FFF1E8;
  --color-sobre-principal: #FFFFFF;  /* texto encima de terracota */
  --color-secundario: #153D2E;       /* navy */
  --color-secundario-claro: #EEF4FB;
  --color-sobre-secundario: #FFFFFF;
  --color-apagado: #6B7280;          /* interruptores apagados */
  --color-apagado-claro: #F3F4F6;
  --color-apagado-borde: #9CA3AF;
  --color-sombra: rgba(31, 35, 40, .10);
  --color-velo: rgba(31, 35, 40, .55);   /* detrás de las ventanas */
  --color-chat: #EFE7DA;
  --color-burbuja-cliente: #DCF8C6;

  /* ---------- Estados (siempre con ícono + texto) ---------- */
  --color-nuevo: #F59E0B;        --color-nuevo-claro: #FFF4DB;     --color-nuevo-texto: #7A4A00;      /* reloj */
  --color-apartado: #7C3AED;     --color-apartado-claro: #F1EBFE;  --color-apartado-texto: #4C1D95;   /* candado */
  --color-entregado: #15803D;    --color-entregado-claro: #E7F6EC; --color-entregado-texto: #14532D;  /* palomita */
  --color-agotado: #B91C1C;      --color-agotado-claro: #FDECEC;   --color-agotado-texto: #7F1D1D;    /* equis */
  --color-camino: #153D2E;       --color-camino-claro: #EEF4FB;    --color-camino-texto: #153D2E;     /* moto / bolsa */
  --color-ojo: #F59E0B;          --color-ojo-claro: #FFF7E6;       /* "OJO:" detalles del pedido */

  /* ---------- Letras ---------- */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-fija: ui-monospace, Menlo, Consolas, monospace;
  --texto-base: 18px;          /* nunca menos de 18 px */
  --texto-mediano: 20px;
  --texto-grande: 22px;
  --texto-enorme: 28px;
  --titulo-1: 28px;
  --titulo-2: 24px;
  --titulo-3: 21px;
  --numero-grande: 36px;
  --peso-normal: 400;
  --peso-fuerte: 700;
  --peso-extra: 800;
  --peso-negro: 900;
  --interlineado: 1.45;

  /* ---------- Tamaños (botones ≥ 56 px) ---------- */
  --boton-alto: 56px;
  --boton-alto-grande: 72px;
  --boton-alto-gigante: 150px;   /* los 3 botones de inicio de la cocina */
  --boton-alto-chico: 56px;
  --icono-gigante: 64px;
  --radio: 16px;
  --radio-boton: 14px;
  --radio-campo: 12px;
  --radio-ventana: 20px;
  --radio-pildora: 999px;
  --espacio: 16px;
  --espacio-chico: 8px;
  --espacio-grande: 24px;
  --borde-grueso: 3px;
  --sombra: 0 2px 8px var(--color-sombra);
  --sombra-fuerte: 0 10px 40px rgba(0, 0, 0, .3);
  --ancho-max: 1400px;
  --ancho-cliente: 640px;        /* app del cliente: columna cómoda en tableta */
  --ancho-landing: 1120px;       /* página pública */
  --titulo-portada: clamp(36px, 8vw, 60px);
  --fuente-titulos: var(--fuente); /* la diseñadora puede poner otra letra para títulos y logo */
}