/* ==========================================================================
   VARIABLES — Tema del cliente (EMMAX)
   Toda la personalización visual del producto vive aquí: para activar
   otro restaurante solo se cambian estas variables y las imágenes.
   Paleta sacada del collage de fondo (postales pintadas a mano).
   ========================================================================== */

:root {
  /* ----- Colores de marca (collage EMMAX) ----- */
  --color-crema: #f2ece1; /* fondo papel */
  --color-negro: #1b1b1b; /* tinta del logo */
  --color-azul: #2b4ea2; /* corazón / mariposa */
  --color-rojo: #d2352b; /* fresa / flores */
  --color-amarillo: #e9b32a; /* girasol / limones */
  --color-rosa: #e8c9c4; /* manchas rosadas */

  /* ----- Roles (lo que usa el CSS de verdad) ----- */
  --color-primario: var(--color-negro);
  --color-acento: var(--color-azul);
  --color-error: var(--color-rojo);
  --color-texto: var(--color-negro);
  --color-texto-invertido: #ffffff;

  /* Tarjeta "liquid glass" del formulario: crema translúcido
     sobre el collage, el blur lo pone styles.css */
  --vidrio-fondo: rgba(242, 236, 225, 0.55);
  --vidrio-borde: rgba(255, 255, 255, 0.65);

  /* ----- Superficies de los controles -----
     Las caras claras que se apoyan sobre el vidrio: campos, píldoras y la
     cita del mensaje. Son tokens (y no colores sueltos en styles.css) para
     que un cliente pueda tener su app en oscuro cambiando SOLO estas líneas,
     sin tocar ni un módulo. */
  --campo-fondo: rgba(255, 255, 255, 0.75);
  --campo-borde: rgba(27, 27, 27, 0.25);
  --pildora-fondo: rgba(255, 255, 255, 0.6);
  --pildora-borde: rgba(27, 27, 27, 0.3);
  --cita-fondo: rgba(255, 255, 255, 0.6);
  --aviso-grave-fondo: rgba(210, 53, 43, 0.08);
  --boton-secundario-borde: rgba(27, 27, 27, 0.35);
  --boton-secundario-hover: rgba(255, 255, 255, 0.4);

  /* ----- Controles flotantes (píldoras de idioma y de la demo) -----
     Colores SÓLIDOS, no vidrio: sobre el collage un translúcido se leía
     grisáceo. La opción ACTIVA usa el par contrario, así siempre destaca.
     En tema oscuro se intercambian (ver demo-fondos.css). */
  --control-fondo: #ffffff;
  --control-texto: var(--color-negro);
  --control-fondo-activo: var(--color-negro);
  --control-texto-activo: #ffffff;

  /* ----- Fondo del cliente -----
     Dos encuadres de la misma escena: el VERTICAL para pantallas altas
     (móvil) y el HORIZONTAL para apaisadas (laptop). Cambiar el fondo de un
     cliente es cambiar estas dos rutas; el resto del CSS no se toca. */
  /* DECIDIDO (Manu, 26 jul 2026): el collage AZUL. Cambia la decisión del día
     anterior (era el collage a color) al ver los dos montados.

     ⚠️ VAN EN PAREJA CON DOS SITIOS MÁS, y si se cambian aquí solo, chirría:
       · manu_dev/plantilla-index.html → los <link rel="preload">, o el
         navegador se baja el fondo que ya no se usa y el bueno llega tarde.
       · images/og-emmax.jpg → la previsualización del enlace en WhatsApp.
         Estaba hecha sobre el collage a color: hasta que Manu la rehaga en
         azul, quien reciba el enlace verá una cosa y al abrir encontrará otra.
         PENDIENTE. */
  --fondo-vertical: url(../images/fondo_azul1.webp);
  --fondo-horizontal: url(../images/fondo_azul2.webp);

  /* ----- Tipografía ----- */
  --fuente-principal: "Jost", "Segoe UI", sans-serif;

  /* ----- Espaciados y formas ----- */
  /* Alto real de .barra-superior: su padding (1rem arriba y abajo) más los
     44px de las píldoras. El escenario reserva justo esto, así el contenido
     queda pegado bajo la barra sin que la barra lo pise. */
  --altura-barra: calc(44px + 2rem + 1px);
  --border-radius: 14px;
  --sombra: 0 6px 24px rgba(27, 27, 27, 0.18);
  --sombra-suave: 0 2px 8px rgba(27, 27, 27, 0.12);

  /* ----- Tiempos de animación (los usa también transiciones.css) -----
     Cortos y con propósito: 200-400 ms para cambios de vista */
  --t-rapido: 0.25s;
  --t-medio: 0.4s;
  --t-splash: 1.1s; /* entrada inicial del logo, la única "lenta" */
}