/* =====================================================================
   tokens.css — SOLO variables.
   Cambiar este archivo cambia la apariencia de toda la plataforma.

   Cortes de pantalla (CSS no permite usarlos como variables; se escriben
   tal cual en componentes.css y pantallas.css):
     · 768px  → tablet: menú lateral
     · 1024px → mostrador: tablet horizontal o computadora
   ===================================================================== */

:root {
  /* ── Marca Localiapps (entrar, admin y pie "Hecho por Localiapps") ── */
  --marca-acento: #F97316;

  /* ── Sistema: tema claro (el de todos los días) ── */
  --color-fondo: #FAFAF9;
  --color-tarjeta: #FFFFFF;
  --color-hundido: #F5F5F4;
  --color-texto: #1C1917;
  --color-texto-suave: #78716C;
  --color-linea: #E7E5E4;
  --color-linea-control: #8C8680;
  --color-velo: rgba(28, 25, 23, 0.45);
  --color-peligro: #B91C1C;

  /* ── Acento del negocio ──
     js/tema.js cambia estas cuatro en tiempo de ejecución con el color de
     cada negocio y calcula el texto con buen contraste. */
  --color-acento: #F97316;
  --color-sobre-acento: #1C1917;
  --color-acento-texto: #C2410C;
  --color-foco: var(--color-acento-texto);
  --color-acento-tenue: color-mix(in srgb, var(--color-acento) 12%, var(--color-tarjeta));

  /* Colores sugeridos para el acento de cada negocio */
  --acento-naranja: #F97316;
  --acento-azul: #2563EB;
  --acento-rosa: #DB2777;
  --acento-verde: #059669;
  --acento-morado: #7C3AED;
  --acento-amarillo: #EAB308;
  --acento-rojo: #DC2626;
  --acento-grafito: #44403C;

  /* ── Estados (reparaciones, suscripción…) ──
     color: la barra y el punto · fondo: la tarjeta · texto: la etiqueta
     (oscurecido para leerse con contraste AA). Cada estado lleva además
     su etiqueta en texto; nunca solo color. */
  --estado-alerta: #F97316;
  --estado-alerta-fondo: #FFF7ED;
  --estado-alerta-texto: #C2410C;

  --estado-atencion: #EAB308;
  --estado-atencion-fondo: #FEFCE8;
  --estado-atencion-texto: #A16207;

  --estado-info: #0EA5E9;
  --estado-info-fondo: #F0F9FF;
  --estado-info-texto: #0369A1;

  --estado-bien: #16A34A;
  --estado-bien-fondo: #F0FDF4;
  --estado-bien-texto: #15803D;

  --estado-apagado: #A8A29E;
  --estado-apagado-fondo: #F5F5F4;
  --estado-apagado-texto: #57534E;

  --estado-cancelado: #A8A29E;
  --estado-cancelado-fondo: #F5F5F4;
  --estado-cancelado-texto: #57534E;

  /* ── Avisos ── */
  --aviso-info: #0369A1;
  --aviso-info-fondo: #F0F9FF;
  --aviso-exito: #15803D;
  --aviso-exito-fondo: #F0FDF4;
  --aviso-atencion: #A16207;
  --aviso-atencion-fondo: #FEFCE8;
  --aviso-error: #B91C1C;
  --aviso-error-fondo: #FEF2F2;
  --brindis-fondo: #1C1917;
  --brindis-texto: #FAFAF9;
  --brindis-accion: #FDBA74;

  /* ── Gráficas ── */
  --grafica-barra: var(--color-acento);
  --grafica-barra-suave: color-mix(in srgb, var(--color-acento) 30%, var(--color-hundido));
  --grafica-guia: var(--color-linea);
  --grafica-sube: #15803D;
  --grafica-baja: #B91C1C;

  /* ── Tipografía ── */
  --fuente-titulo: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --fuente-texto: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-cifras: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-md: 1.125rem;
  --texto-lg: 1.375rem;
  --texto-xl: 1.75rem;
  --texto-2xl: 2.25rem;
  --texto-3xl: 3rem;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;
  --peso-titulo: 700;

  --interlineado-apretado: 1.15;
  --interlineado-medio: 1.3;
  --interlineado: 1.5;
  --letras-titulo: -0.02em;
  --letras-etiqueta: 0.04em;

  /* ── Espacios (base de 4 px) ── */
  --espacio-0: 0.125rem;
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.25rem;
  --espacio-6: 1.5rem;
  --espacio-8: 2rem;
  --espacio-10: 2.5rem;
  --espacio-12: 3rem;
  --espacio-16: 4rem;

  /* ── Tamaños ── */
  --toque-min: 2.75rem;
  --alto-control: 3rem;
  --alto-control-grande: 3.5rem;
  --icono-sm: 1rem;
  --icono-md: 1.25rem;
  --icono-lg: 1.5rem;
  --icono-xl: 2.5rem;
  --icono-trazo: 2;
  --avatar-sm: 1.75rem;
  --avatar-md: 2.5rem;
  --avatar-lg: 3rem;
  --punto: 0.5rem;
  --borde-fino: 1px;
  --borde-grueso: 2px;
  --foco-ancho: 2px;
  --foco-separacion: 2px;
  --alto-barra-grafica: 9rem;
  --alto-barra-apilada: 0.75rem;
  --alto-barra-ranking: 0.375rem;
  /* La foto del ticket de un gasto y la columna de cada billete al contar la caja */
  --alto-ticket: 20rem;
  --ancho-denominacion: 5.5rem;
  --ancho-tarjeta-minimo: 9rem;
  /* Una cifra del panel ("Vendido hoy $6,180"): dos caben en un celular de 375 px */
  --ancho-dato: 9.5rem;
  /* El ticket de la impresora térmica (siempre negro sobre blanco, también
     con el tema oscuro: es papel). */
  --ticket-ancho-58: 58mm;
  --ticket-ancho-80: 80mm;
  /* Lo que de verdad imprime la cabeza térmica: 48 mm en papel de 58
     (384 puntos) y 72 mm en papel de 80 (576 puntos). Lo demás es orilla. */
  --ticket-impreso-58: 48mm;
  --ticket-impreso-80: 72mm;
  --ticket-margen: 3mm;
  --ticket-tinta: #000000;
  --ticket-papel: #FFFFFF;
  --ticket-texto: 0.75rem;
  --ticket-texto-total: 1rem;
  --ticket-logo: 2.5rem;
  --ticket-linea: 1px dashed var(--ticket-tinta);

  /* Punto de venta: el botón de cada compañía (recargas) y cada punto del
     patrón de desbloqueo (56 px: se toca bien con el dedo). */
  --ancho-compania: 6.5rem;
  --patron-punto: 3.5rem;
  /* Una hora "10:30" o un número corto */
  --ancho-hora: 3.5rem;

  /* ── Acomodo ── */
  --margen-pantalla: 1rem;
  --alto-pantalla: 100dvh;
  --ancho-lateral: 15rem;
  --alto-barra-inferior: 4rem;
  --alto-encabezado: 3.75rem;
  --ancho-lectura: 40rem;
  /* Vender en computadora: la venta a la derecha, el buscador a la izquierda */
  --ancho-venta: 26rem;
  --ancho-texto-min: 14rem;
  --ancho-ventana: 32rem;
  --alto-ventana-max: 92dvh;
  --ancho-maximo: 80rem;
  /* estilos.html: el marco de celular (375 px) y el alto del menú de muestra */
  --ancho-maqueta-celular: 23.4375rem;
  --alto-maqueta: 22rem;

  /* ── Radios (12–16 px) ── */
  --radio-control: 12px;
  --radio-tarjeta: 16px;
  --radio-celda: 6px;
  --radio-pastilla: 999px;

  /* ── Sombras: muy sutiles, nunca de color ── */
  --sombra-1: 0 1px 2px rgba(28, 25, 23, 0.06);
  --sombra-2: 0 2px 8px rgba(28, 25, 23, 0.08);
  --sombra-3: 0 12px 32px rgba(28, 25, 23, 0.14);

  /* ── Movimiento: 150 ms, nunca más ── */
  --duracion: 150ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* Barra de avance y el folio en grande (venta, reparación) */
  --alto-progreso: 0.1875rem;
  --texto-folio: 3rem;
  --letras-folio: 0.12em;

  /* ── Capas ── */
  --capa-pegajosa: 5;
  --capa-barra: 10;
  --capa-flotante: 20;
  --capa-aviso: 50;
}

/* ── Tema oscuro (opcional; el usuario lo enciende) ── */
:root[data-tema="oscuro"] {
  --color-fondo: #0C0A09;
  --color-tarjeta: #1C1917;
  --color-hundido: #292524;
  --color-texto: #FAFAF9;
  --color-texto-suave: #A8A29E;
  --color-linea: #292524;
  --color-linea-control: #78716C;
  --color-velo: rgba(0, 0, 0, 0.6);
  --color-peligro: #F87171;
  --color-acento-texto: #FB923C;

  --estado-alerta-fondo: color-mix(in srgb, #F97316 16%, #1C1917);
  --estado-alerta-texto: #FDBA74;
  --estado-atencion-fondo: color-mix(in srgb, #EAB308 14%, #1C1917);
  --estado-atencion-texto: #FDE047;
  --estado-info-fondo: color-mix(in srgb, #0EA5E9 14%, #1C1917);
  --estado-info-texto: #7DD3FC;
  --estado-bien-fondo: color-mix(in srgb, #16A34A 14%, #1C1917);
  --estado-bien-texto: #86EFAC;
  --estado-apagado-fondo: #292524;
  --estado-apagado-texto: #D6D3D1;
  --estado-cancelado-fondo: #292524;
  --estado-cancelado-texto: #D6D3D1;

  --aviso-info: #7DD3FC;
  --aviso-info-fondo: color-mix(in srgb, #0EA5E9 12%, #1C1917);
  --aviso-exito: #86EFAC;
  --aviso-exito-fondo: color-mix(in srgb, #16A34A 12%, #1C1917);
  --aviso-atencion: #FDE047;
  --aviso-atencion-fondo: color-mix(in srgb, #EAB308 12%, #1C1917);
  --aviso-error: #FCA5A5;
  --aviso-error-fondo: color-mix(in srgb, #DC2626 14%, #1C1917);
  --brindis-fondo: #FAFAF9;
  --brindis-texto: #1C1917;
  --brindis-accion: #C2410C;

  --grafica-sube: #86EFAC;
  --grafica-baja: #FCA5A5;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ── Sin animaciones para quien las desactivó ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion: 0ms;
  }
}

/* ── Navegadores viejos sin color-mix(): tonos fijos para el naranja ── */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root {
    --color-acento-tenue: #FEF1E7;
    --grafica-barra-suave: #F8D5BB;
  }
}