/* =====================================================================
   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 y columnas de estilistas
     · 1024px → mostrador: tablet horizontal o computadora
   ===================================================================== */

:root {
  /* ── Marca Localiapps (página pública y pie "Hecho por Localiapps") ── */
  --marca-fondo: #0A0A0A;
  --marca-superficie: #141312;
  --marca-superficie-alta: #1F1D1B;
  --marca-texto: #FFFFFF;
  --marca-texto-suave: #B5AFAA;
  --marca-acento: #F97316;
  --marca-linea: #2A2724;

  /* ── 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-ahora: #DC2626;
  --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));
  --color-acento-medio: color-mix(in srgb, var(--color-acento) 35%, 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 de cita ──
     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-apartada: #F97316;
  --estado-apartada-fondo: #FFF7ED;
  --estado-apartada-texto: #C2410C;

  --estado-por-confirmar: #EAB308;
  --estado-por-confirmar-fondo: #FEFCE8;
  --estado-por-confirmar-texto: #A16207;

  --estado-confirmada: #0EA5E9;
  --estado-confirmada-fondo: var(--color-tarjeta);
  --estado-confirmada-texto: #0369A1;

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

  --estado-no-llego: #A8A29E;
  --estado-no-llego-fondo: #F5F5F4;
  --estado-no-llego-texto: #57534E;

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

  --estado-bloqueo: #A8A29E;
  --estado-bloqueo-fondo: #F5F5F4;
  --estado-bloqueo-raya: #E7E5E4;
  --estado-bloqueo-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 y mapa de calor ── */
  --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;
  --calor-0: var(--color-hundido);
  --calor-1: color-mix(in srgb, var(--color-acento) 20%, var(--color-tarjeta));
  --calor-2: color-mix(in srgb, var(--color-acento) 42%, var(--color-tarjeta));
  --calor-3: color-mix(in srgb, var(--color-acento) 68%, var(--color-tarjeta));
  --calor-4: var(--color-acento);

  /* ── 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;
  --borde-estado: 4px;
  --foco-ancho: 2px;
  --foco-separacion: 2px;
  --alto-barra-grafica: 9rem;
  --alto-barra-apilada: 0.75rem;
  --alto-barra-ranking: 0.375rem;
  --celda-calor: 1.75rem;
  --ancho-tarjeta-servicio: 9rem;

  /* ── Agenda ──
     15 minutos = 44 px: cada hueco es una zona tocable completa. */
  --alto-cuarto: 2.75rem;
  --alto-minuto: calc(var(--alto-cuarto) / 15);
  --ancho-hora: 3.5rem;
  --ancho-columna-min: 9.5rem;
  --raya-bloqueo: 0.5rem;
  --margen-cita: 0.1875rem;

  /* ── Acomodo ── */
  --margen-pantalla: 1rem;
  --alto-pantalla: 100dvh;
  --ancho-lateral: 15rem;
  --alto-barra-inferior: 4rem;
  --alto-encabezado: 3.75rem;
  --ancho-lectura: 40rem;
  --ancho-texto-min: 14rem;
  --ancho-ventana: 32rem;
  --alto-ventana-max: 92dvh;
  --ancho-maximo: 80rem;
  --ancho-maqueta-celular: 23.4375rem;
  --alto-maqueta: 22rem;

  /* ── Radios (12–16 px) ── */
  --radio-control: 12px;
  --radio-tarjeta: 16px;
  --radio-cita: 12px;
  --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);

  /* ── Página pública de reservas (etapa 5) ── */
  --ancho-publica: 36rem;
  --ancho-publica-doble: 64rem;
  --ancho-resumen: 22rem;
  --proporcion-portada: 16 / 9;
  --alto-portada-max: 20rem;
  /* Única excepción a "sin degradados": la sombra al pie de la portada,
     para que el logo y el nombre se lean sobre cualquier foto. */
  --portada-sombra: rgba(0, 0, 0, 0.55);
  --portada-sin-foto: var(--color-acento-tenue);
  --logo-perfil: 5.5rem;
  --borde-logo: 4px;
  --foto-servicio: 4.5rem;
  --avatar-estilista: 3.5rem;
  --ancho-resena: 17rem;
  --alto-progreso: 0.1875rem;
  --desplazamiento-paso: 1.5rem;
  --celda-calendario: 2.75rem;
  --texto-folio: 3rem;
  --letras-folio: 0.12em;
  --alto-boton-fijo: 4.5rem;
  --color-estrella: #D97706;
  --color-pocos: #CA8A04;
  --lineas-resena: 4;

  /* Iniciales sobre el color de cada persona (cuando no hay foto):
     el fondo es el color al 18 %, y el texto, el mismo color oscurecido. */
  --avatar-naranja: #F97316;  --avatar-naranja-texto: #9A3412;
  --avatar-azul: #2563EB;     --avatar-azul-texto: #1E40AF;
  --avatar-rosa: #DB2777;     --avatar-rosa-texto: #9D174D;
  --avatar-verde: #059669;    --avatar-verde-texto: #065F46;
  --avatar-morado: #7C3AED;   --avatar-morado-texto: #5B21B6;
  --avatar-amarillo: #EAB308; --avatar-amarillo-texto: #854D0E;
  --avatar-rojo: #DC2626;     --avatar-rojo-texto: #991B1B;
  --avatar-grafito: #57534E;  --avatar-grafito-texto: #292524;

  /* ── Capas ── */
  --capa-pegajosa: 5;
  --capa-esquina: 6;
  --capa-barra: 10;
  --capa-flotante: 20;
  --capa-ventana: 40;
  --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-ahora: #F87171;
  --color-peligro: #F87171;
  --color-acento-texto: #FB923C;

  --estado-apartada-fondo: color-mix(in srgb, #F97316 16%, #1C1917);
  --estado-apartada-texto: #FDBA74;
  --estado-por-confirmar-fondo: color-mix(in srgb, #EAB308 14%, #1C1917);
  --estado-por-confirmar-texto: #FDE047;
  --estado-confirmada-fondo: #1C1917;
  --estado-confirmada-texto: #7DD3FC;
  --estado-atendida-fondo: color-mix(in srgb, #16A34A 14%, #1C1917);
  --estado-atendida-texto: #86EFAC;
  --estado-no-llego-fondo: #292524;
  --estado-no-llego-texto: #D6D3D1;
  --estado-cancelada-fondo: #292524;
  --estado-cancelada-texto: #D6D3D1;
  --estado-bloqueo-fondo: #1C1917;
  --estado-bloqueo-raya: #292524;
  --estado-bloqueo-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);
}

/* ── Página pública de reservas ──
   Es la página del negocio: clara por defecto (con su color), y oscura
   (el negro de Localiapps) si el celular del cliente está en modo oscuro.
   [data-tema="publico-oscuro"] es lo mismo a la fuerza (guía de estilos).
   Las variables que dependen de otras se repiten para que se calculen con
   el fondo de cada tema. */
[data-tema="publico"], [data-tema="publico-claro"] {
  --color-fondo: #FFFFFF;
  --color-tarjeta: #FFFFFF;
  --color-hundido: #F5F5F4;
  --color-acento-tenue: color-mix(in srgb, var(--color-acento) 10%, var(--color-tarjeta));
  --color-acento-medio: color-mix(in srgb, var(--color-acento) 30%, var(--color-tarjeta));
  --portada-sin-foto: var(--color-acento-tenue);
}

@media (prefers-color-scheme: dark) {
  [data-tema="publico"] {
    --color-fondo: var(--marca-fondo);
    --color-tarjeta: var(--marca-superficie);
    --color-hundido: var(--marca-superficie-alta);
    --color-texto: var(--marca-texto);
    --color-texto-suave: var(--marca-texto-suave);
    --color-linea: var(--marca-linea);
    --color-linea-control: #6B6560;
    --color-acento-texto: #FB923C;
    --color-foco: var(--color-acento-texto);
    --color-acento-tenue: color-mix(in srgb, var(--color-acento) 16%, var(--color-tarjeta));
    --color-acento-medio: color-mix(in srgb, var(--color-acento) 35%, var(--color-tarjeta));
    --aviso-info: #7DD3FC;
    --aviso-info-fondo: color-mix(in srgb, #0EA5E9 12%, #141312);
    --aviso-atencion: #FDE047;
    --aviso-atencion-fondo: color-mix(in srgb, #EAB308 12%, #141312);
    --aviso-error: #FCA5A5;
    --aviso-error-fondo: color-mix(in srgb, #DC2626 14%, #141312);
    --aviso-exito: #86EFAC;
    --aviso-exito-fondo: color-mix(in srgb, #16A34A 12%, #141312);
    --estado-atendida-fondo: color-mix(in srgb, #16A34A 14%, #141312);
    --estado-atendida-texto: #86EFAC;
    --estado-por-confirmar-fondo: color-mix(in srgb, #EAB308 14%, #141312);
    --estado-por-confirmar-texto: #FDE047;
    --estado-no-llego-fondo: #1F1D1B;
    --estado-no-llego-texto: #D6D3D1;
    --color-estrella: #FBBF24;
    --color-pocos: #FACC15;
    --portada-sin-foto: var(--marca-superficie-alta);
    --avatar-naranja-texto: #FDBA74;
    --avatar-azul-texto: #93C5FD;
    --avatar-rosa-texto: #F9A8D4;
    --avatar-verde-texto: #6EE7B7;
    --avatar-morado-texto: #C4B5FD;
    --avatar-amarillo-texto: #FDE047;
    --avatar-rojo-texto: #FCA5A5;
    --avatar-grafito-texto: #E7E5E4;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sombra-2: 0 2px 8px rgba(0, 0, 0, 0.5);
    --sombra-3: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

[data-tema="publico-oscuro"] {
  --color-fondo: var(--marca-fondo);
  --color-tarjeta: var(--marca-superficie);
  --color-hundido: var(--marca-superficie-alta);
  --color-texto: var(--marca-texto);
  --color-texto-suave: var(--marca-texto-suave);
  --color-linea: var(--marca-linea);
  --color-linea-control: #6B6560;
  --color-acento-texto: #FB923C;
  --color-foco: var(--color-acento-texto);
  --color-acento-tenue: color-mix(in srgb, var(--color-acento) 16%, var(--color-tarjeta));
  --color-acento-medio: color-mix(in srgb, var(--color-acento) 35%, var(--color-tarjeta));
  --aviso-info: #7DD3FC;
  --aviso-info-fondo: color-mix(in srgb, #0EA5E9 12%, #141312);
  --aviso-atencion: #FDE047;
  --aviso-atencion-fondo: color-mix(in srgb, #EAB308 12%, #141312);
  --aviso-error: #FCA5A5;
  --aviso-error-fondo: color-mix(in srgb, #DC2626 14%, #141312);
  --aviso-exito: #86EFAC;
  --aviso-exito-fondo: color-mix(in srgb, #16A34A 12%, #141312);
  --estado-atendida-fondo: color-mix(in srgb, #16A34A 14%, #141312);
  --estado-atendida-texto: #86EFAC;
  --estado-por-confirmar-fondo: color-mix(in srgb, #EAB308 14%, #141312);
  --estado-por-confirmar-texto: #FDE047;
  --estado-no-llego-fondo: #1F1D1B;
  --estado-no-llego-texto: #D6D3D1;
  --color-estrella: #FBBF24;
  --color-pocos: #FACC15;
  --portada-sin-foto: var(--marca-superficie-alta);
  --avatar-naranja-texto: #FDBA74;
  --avatar-azul-texto: #93C5FD;
  --avatar-rosa-texto: #F9A8D4;
  --avatar-verde-texto: #6EE7B7;
  --avatar-morado-texto: #C4B5FD;
  --avatar-amarillo-texto: #FDE047;
  --avatar-rojo-texto: #FCA5A5;
  --avatar-grafito-texto: #E7E5E4;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, 0.5);
  --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;
    --color-acento-medio: #FDCDA9;
    --grafica-barra-suave: #F8D5BB;
    --calor-1: #FEE3D0;
    --calor-2: #FCC7A0;
    --calor-3: #FBA268;
  }
}