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

   Estilo "Libreta": papel cálido, títulos con serifa (Young Serif), texto y
   cifras en Figtree con números tabulares, renglones con línea en vez de
   tarjetas, pastillas redondas y un solo botón en el color del negocio.

   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 (pie "Hecho por Localiapps" y administración) ── */
  --marca-fondo: #0A0A0A;
  --marca-superficie: #141312;
  --marca-superficie-alta: #1F1D1B;
  --marca-texto: #FFFFFF;
  --marca-texto-suave: #B5AFAA;
  --marca-acento: #F97316;
  --marca-acento-texto: #C2410C;
  --marca-linea: #2A2724;

  /* Colores para distinguir servicios en la agenda (Configuración → Servicios) */
  --acento-naranja: #F97316;
  --acento-azul: #2563EB;
  --acento-rosa: #DB2777;
  --acento-verde: #059669;
  --acento-morado: #7C3AED;
  --acento-amarillo: #EAB308;
  --acento-rojo: #DC2626;
  --acento-grafito: #44403C;
  /* Ajustes → Su página: el dibujo de Clásico y de Vidrio */
  --alto-muestra-estilo: 8.5rem;
  --ancho-opcion-estilo: 14rem;
  --muestra-papel: #F7F6F2;
  --muestra-tinta: #141210;
  --muestra-noche: #0A0A0B;
  --muestra-velo: rgba(10, 10, 11, 0.55);
  --muestra-blanco: #FFFFFF;
}

/* ── Las 8 paletas, de día (--dia-…) y de noche (--noche-…) ──
   Salen de js/tema.js (variablesDePaleta) y una prueba revisa que coincidan:
   si se cambia una paleta allá, se vuelven a escribir aquí con
   `node pruebas/paletas.mjs`. js/tema.js pone data-paleta="…" con el color
   del negocio; un color propio (data-paleta="propia") trae sus --dia-… y
   --noche-… puestos por js/tema.js.
   · papel: el fondo · hoja: un plano más claro · tinta: el texto
   · detalle: solo adorno (estrellas, filetes, anillos), nunca texto chico
   · detalle-texto: el detalle oscurecido para leerse como texto (4.5:1) */
/* paletas:inicio */
[data-paleta="ciruela"] {
  /* Ciruela · giro estetica · detalle oro viejo */
  --dia-papel: #F8F3EF; --dia-hoja: #FFFCFA; --dia-tinta: #2A1D23; --dia-suave: #73616A;
  --dia-linea: #E8DDD6; --dia-linea-control: #918784; --dia-hundido: #EEE8E5; --dia-acento: #8A3A57;
  --dia-sobre-acento: #FFFFFF; --dia-acento-texto: #8A3A57; --dia-detalle: #A07A4E; --dia-detalle-texto: #7D603D;
  --dia-brindis-accion: #CCB79F;
  --noche-papel: #1B1317; --noche-hoja: #282024; --noche-tinta: #F8F3EF; --noche-suave: #B1ABAA;
  --noche-linea: #3E373A; --noche-linea-control: #766F70; --noche-hundido: #31292D; --noche-acento: #C7A0AB;
  --noche-sobre-acento: #1C1917; --noche-acento-texto: #C7A0AB; --noche-detalle: #B2926E; --noche-detalle-texto: #BB9F7F;
  --noche-brindis-accion: #8A3A57;
}
[data-paleta="salvia"] {
  /* Salvia · giro spa · detalle arena */
  --dia-papel: #F0F2EE; --dia-hoja: #FAFBF8; --dia-tinta: #1E2925; --dia-suave: #5A6760;
  --dia-linea: #D8DFD6; --dia-linea-control: #858B85; --dia-hundido: #E6E8E4; --dia-acento: #4A6656;
  --dia-sobre-acento: #FFFFFF; --dia-acento-texto: #4A6656; --dia-detalle: #9C8259; --dia-detalle-texto: #736042;
  --dia-brindis-accion: #C6BAA4;
  --noche-papel: #141B18; --noche-hoja: #212825; --noche-tinta: #F0F2EE; --noche-suave: #AAADAA;
  --noche-linea: #373D3A; --noche-linea-control: #6E7370; --noche-hundido: #2A312D; --noche-acento: #A5B3AA;
  --noche-sobre-acento: #1C1917; --noche-acento-texto: #A5B3AA; --noche-detalle: #AD9877; --noche-detalle-texto: #B7A487;
  --noche-brindis-accion: #4A6656;
}
[data-paleta="berenjena"] {
  /* Berenjena · giro unas · detalle rosa empolvado */
  --dia-papel: #F4F1F6; --dia-hoja: #FCFBFD; --dia-tinta: #282233; --dia-suave: #675F73;
  --dia-linea: #E0D9E7; --dia-linea-control: #8B8592; --dia-hundido: #EAE7EC; --dia-acento: #5E4A7E;
  --dia-sobre-acento: #FFFFFF; --dia-acento-texto: #5E4A7E; --dia-detalle: #B07A6E; --dia-detalle-texto: #815A51;
  --dia-brindis-accion: #D2B6B2;
  --noche-papel: #1A1621; --noche-hoja: #27232E; --noche-tinta: #F4F1F6; --noche-suave: #AEABB2;
  --noche-linea: #3D3943; --noche-linea-control: #747079; --noche-hundido: #302C36; --noche-acento: #B1A6C0;
  --noche-sobre-acento: #1C1917; --noche-acento-texto: #B1A6C0; --noche-detalle: #BE9289; --noche-detalle-texto: #C69F97;
  --noche-brindis-accion: #5E4A7E;
}
[data-paleta="nude"] {
  /* Nude · giro cejas · detalle caramelo */
  --dia-papel: #F5EEE8; --dia-hoja: #FDFAF7; --dia-tinta: #1D1917; --dia-suave: #6C6059;
  --dia-linea: #E6D9CE; --dia-linea-control: #8C847D; --dia-hundido: #EAE3DE; --dia-acento: #2A2421;
  --dia-sobre-acento: #FFFFFF; --dia-acento-texto: #2A2421; --dia-detalle: #A0694F; --dia-detalle-texto: #855742;
  --dia-brindis-accion: #CBAC9C;
  --noche-papel: #13100F; --noche-hoja: #211D1C; --noche-tinta: #F5EEE8; --noche-suave: #ADA7A3;
  --noche-linea: #373432; --noche-linea-control: #706C6A; --noche-hundido: #2A2625; --noche-acento: #9A938E;
  --noche-sobre-acento: #1C1917; --noche-acento-texto: #A09995; --noche-detalle: #B1846E; --noche-detalle-texto: #BA927F;
  --noche-brindis-accion: #2A2421;
}
[data-paleta="tabaco"] {
  /* Tabaco · giro barberia · detalle latón */
  --dia-papel: #F0EDE8; --dia-hoja: #FAF8F5; --dia-tinta: #1F1A16; --dia-suave: #655B52;
  --dia-linea: #DED7CD; --dia-linea-control: #88847C; --dia-hundido: #E6E2DE; --dia-acento: #6E4429;
  --dia-sobre-acento: #FFFFFF; --dia-acento-texto: #6E4429; --dia-detalle: #9A7840; --dia-detalle-texto: #785E32;
  --dia-brindis-accion: #C5B394;
  --noche-papel: #14110E; --noche-hoja: #211E1B; --noche-tinta: #F0EDE8; --noche-suave: #AAA7A2;
  --noche-linea: #373431; --noche-linea-control: #6E6B69; --noche-hundido: #2A2724; --noche-acento: #B6A192;
  --noche-sobre-acento: #1C1917; --noche-acento-texto: #B6A192; --noche-detalle: #AB8F62; --noche-detalle-texto: #B59C74;
  --noche-brindis-accion: #6E4429;
}
:where(:root), [data-paleta="petroleo"] {
  /* Petróleo · giro dental · detalle eucalipto */
  --dia-papel: #EFF3F2; --dia-hoja: #FAFCFB; --dia-tinta: #142529; --dia-suave: #55676B;
  --dia-linea: #D8E1E0; --dia-linea-control: #838B8B; --dia-hundido: #E4E9E8; --dia-acento: #1F5F6B;
  --dia-sobre-acento: #FFFFFF; --dia-acento-texto: #1F5F6B; --dia-detalle: #5E8A80; --dia-detalle-texto: #496C64;
  --dia-brindis-accion: #A7BFB9;
  --noche-papel: #0D181B; --noche-hoja: #1B2528; --noche-tinta: #EFF3F2; --noche-suave: #A7ADAD;
  --noche-linea: #313B3D; --noche-linea-control: #6A7273; --noche-hundido: #242E31; --noche-acento: #91B0B5;
  --noche-sobre-acento: #1C1917; --noche-acento-texto: #91B0B5; --noche-detalle: #7B9F97; --noche-detalle-texto: #8AAAA3;
  --noche-brindis-accion: #1F5F6B;
}
[data-paleta="mezclilla"] {
  /* Mezclilla · giro taller · detalle cobre */
  --dia-papel: #EEF0F2; --dia-hoja: #FAFBFC; --dia-tinta: #1A1F28; --dia-suave: #575F6B;
  --dia-linea: #D7DCE2; --dia-linea-control: #84878C; --dia-hundido: #E3E6E8; --dia-acento: #34506F;
  --dia-sobre-acento: #FFFFFF; --dia-acento-texto: #34506F; --dia-detalle: #A86A30; --dia-detalle-texto: #8C5827;
  --dia-brindis-accion: #CBAD91;
  --noche-papel: #11141A; --noche-hoja: #1E2127; --noche-tinta: #EEF0F2; --noche-suave: #A7AAAD;
  --noche-linea: #34373D; --noche-linea-control: #6C6E73; --noche-hundido: #272A30; --noche-acento: #9AA8B7;
  --noche-sobre-acento: #1C1917; --noche-acento-texto: #9AA8B7; --noche-detalle: #B68557; --noche-detalle-texto: #C29973;
  --noche-brindis-accion: #34506F;
}
[data-paleta="grafito"] {
  /* Grafito · sin giro · detalle bronce */
  --dia-papel: #F2F2EF; --dia-hoja: #FBFBF9; --dia-tinta: #1C1C1A; --dia-suave: #60605A;
  --dia-linea: #DEDED8; --dia-linea-control: #888884; --dia-hundido: #E7E7E4; --dia-acento: #33383D;
  --dia-sobre-acento: #FFFFFF; --dia-acento-texto: #33383D; --dia-detalle: #857356; --dia-detalle-texto: #6F6047;
  --dia-brindis-accion: #BCB3A3;
  --noche-papel: #121211; --noche-hoja: #1F1F1E; --noche-tinta: #F2F2EF; --noche-suave: #AAAAA8;
  --noche-linea: #363635; --noche-linea-control: #6E6E6D; --noche-hundido: #282827; --noche-acento: #9C9E9F;
  --noche-sobre-acento: #1C1917; --noche-acento-texto: #A2A4A5; --noche-detalle: #9B8C75; --noche-detalle-texto: #A79985;
  --noche-brindis-accion: #33383D;
}
/* paletas:fin */

/* ── Colores del sistema (de día) ──
   Todo lo que depende de la paleta se declara aquí, en cada elemento que
   trae su propia paleta o tema, para que se calcule con sus colores (la guía
   de estilos y la vista previa de Configuración muestran varias a la vez). */
:root, [data-paleta], [data-tema] {
  --color-fondo: var(--dia-papel);
  --color-tarjeta: var(--dia-hoja);
  --color-hundido: var(--dia-hundido);
  --color-texto: var(--dia-tinta);
  --color-texto-suave: var(--dia-suave);
  --color-linea: var(--dia-linea);
  --color-linea-control: var(--dia-linea-control);

  /* Acento del negocio: el botón principal y lo escogido */
  --color-acento: var(--dia-acento);
  --color-sobre-acento: var(--dia-sobre-acento);
  --color-acento-texto: var(--dia-acento-texto);

  /* Detalle: el segundo color, solo de adorno (3:1 o más) */
  --color-detalle: var(--dia-detalle);
  --color-detalle-texto: var(--dia-detalle-texto);

  /* Estados en tonos de la casa: musgo, miel y ladrillo */
  --color-ok: #3E6A45;
  --color-espera: #735414;
  --color-error: #9E3A2E;
  --tinte: 12%;
  --tinte-fuerte: 35%;

  --color-velo: color-mix(in srgb, var(--color-texto) 45%, transparent);
  --color-ahora: var(--color-error);
  --color-peligro: var(--color-error);
  --color-foco: var(--color-acento-texto);
  --color-acento-tenue: color-mix(in srgb, var(--color-acento) var(--tinte), var(--color-tarjeta));
  --color-acento-medio: color-mix(in srgb, var(--color-acento) var(--tinte-fuerte), var(--color-tarjeta));
  --color-detalle-tenue: color-mix(in srgb, var(--color-detalle) var(--tinte), var(--color-tarjeta));

  /* ── Estados de cita ──
     color: el punto y los bordes · fondo: la pastilla del estado · texto:
     la etiqueta (con contraste AA sobre su pastilla). Cada estado lleva
     además su etiqueta en texto; nunca solo color. */
  --estado-apartada: var(--color-detalle);
  --estado-apartada-fondo: var(--color-detalle-tenue);
  --estado-apartada-texto: var(--color-detalle-texto);

  --estado-por-confirmar: var(--color-espera);
  --estado-por-confirmar-fondo: color-mix(in srgb, var(--color-espera) var(--tinte), var(--color-tarjeta));
  --estado-por-confirmar-texto: var(--color-espera);

  --estado-confirmada: var(--color-acento);
  --estado-confirmada-fondo: var(--color-tarjeta);
  --estado-confirmada-texto: var(--color-acento-texto);

  --estado-atendida: var(--color-ok);
  --estado-atendida-fondo: color-mix(in srgb, var(--color-ok) var(--tinte), var(--color-tarjeta));
  --estado-atendida-texto: var(--color-ok);

  --estado-no-llego: var(--color-linea-control);
  --estado-no-llego-fondo: var(--color-hundido);
  --estado-no-llego-texto: var(--color-texto-suave);

  --estado-cancelada: var(--color-linea-control);
  --estado-cancelada-fondo: var(--color-hundido);
  --estado-cancelada-texto: var(--color-texto-suave);

  --estado-bloqueo: var(--color-linea-control);
  --estado-bloqueo-fondo: var(--color-hundido);
  --estado-bloqueo-raya: var(--color-linea);
  --estado-bloqueo-texto: var(--color-texto-suave);

  /* La cita en la agenda (Libreta): en hoja, con su línea; la ya atendida
     se queda en el papel para que lo que falta resalte. */
  --cita-fondo: var(--color-tarjeta);
  --cita-hecha-fondo: var(--color-fondo);

  /* ── Campanita: citas nuevas que llegaron por la página ──
     El número va en ladrillo con texto blanco (6.9:1 en los dos temas). */
  --color-nuevo: #9E3A2E;
  --color-sobre-nuevo: #FFFFFF;
  --color-nuevo-texto: var(--color-error);

  /* ── Avisos ── */
  --aviso-info: var(--color-acento-texto);
  --aviso-info-fondo: var(--color-acento-tenue);
  --aviso-exito: var(--color-ok);
  --aviso-exito-fondo: color-mix(in srgb, var(--color-ok) var(--tinte), var(--color-tarjeta));
  --aviso-atencion: var(--color-espera);
  --aviso-atencion-fondo: color-mix(in srgb, var(--color-espera) var(--tinte), var(--color-tarjeta));
  --aviso-error: var(--color-error);
  --aviso-error-fondo: color-mix(in srgb, var(--color-error) var(--tinte), var(--color-tarjeta));
  /* El brindis "Deshacer" va en un plano invertido: papel sobre tinta. */
  --brindis-fondo: var(--color-texto);
  --brindis-texto: var(--color-fondo);
  --brindis-accion: var(--dia-brindis-accion);

  /* ── 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: var(--color-ok);
  --grafica-baja: var(--color-error);
  --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);
  /* La dona: el segundo tramo y lo que falta */
  --dona-segundo: var(--grafica-barra-suave);
  --dona-resto: var(--color-hundido);

  /* ── Página pública ── */
  --portada-sin-foto: var(--color-acento-tenue);
  --color-estrella: var(--color-detalle);
  --color-pocos: var(--color-espera);
  /* Fidelidad (etapa 5h): las estrellas de un cliente; en la meta, verdes. */
  --fidelidad-meta: var(--aviso-exito);
  --fidelidad-meta-fondo: var(--aviso-exito-fondo);
}

:root {
  /* ── Tipografía ── */
  /* Títulos con serifa (Young Serif, un solo grueso); texto y cifras en
     Figtree. Las cifras usan números tabulares para alinearse en columna. */
  --fuente-titulo: 'Young Serif', Georgia, 'Times New Roman', serif;
  --fuente-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-cifras: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --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;
  /* El número grande del resumen ("Vendido hoy"): uno por pantalla. */
  --texto-cifra-grande: clamp(2.5rem, 2rem + 2.5vw, 3rem);

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;
  --peso-titulo: 400;
  --peso-cifra-grande: 600;

  --interlineado-apretado: 1.15;
  --interlineado-medio: 1.3;
  --interlineado: 1.5;
  --letras-titulo: -0.01em;
  --letras-cifra-grande: -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;
  --avatar-ficha: 3.5rem;
  --circulo-fidelidad: 1.125rem;
  --punto: 0.5rem;
  --borde-fino: 1px;
  --borde-grueso: 2px;
  --borde-estado: 4px;
  /* Libreta: el filete corto bajo los títulos, en el color del detalle */
  --filete-ancho: 2rem;
  --filete-alto: 2px;
  --anillo-detalle: 1.5px;
  --foco-ancho: 2px;
  --foco-separacion: 2px;
  --alto-barra-grafica: 9rem;
  --alto-barra-apilada: 0.75rem;
  --alto-barra-ranking: 0.375rem;
  /* Etapa 6c: la foto del ticket de un gasto y la columna de cada billete al contar la caja */
  --alto-ticket: 20rem;
  --ancho-denominacion: 5.5rem;
  --celda-calor: 1.75rem;
  --ancho-tarjeta-servicio: 9rem;
  /* Libreta: el selector de paletas (Configuración → Página) */
  --ancho-opcion-paleta: 8.5rem;
  --muestra-paleta: 1.5rem;
  /* Etapa 6m: el ticket de la impresora térmica (siempre negro sobre
     blanco, también con el tema oscuro: es papel) y el checador. */
  --ticket-ancho-58: 58mm;
  --ticket-ancho-80: 80mm;
  --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);
  --checador-respuesta: 1.5rem;

  /* ── 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;
  --ancho-columna-min-tablet: 6.25rem;  /* etapa 6n: 8 personas caben a 1024 px */
  --alto-cabeza-rejilla: var(--alto-control-grande);
  --ancho-columna-semana-min: 5.5rem;   /* 7 días caben a 1024 px con el menú */
  /* Vista "Mes" (8 oct 2026): el alto de cada día (celular y tablet) y el
     punto de color de quien atiende. */
  --alto-dia-mes: 3.5rem;
  --alto-dia-mes-tablet: 7.25rem;
  --punto-mes: 0.375rem;
  --numero-hoy-mes: 1.75rem;
  --raya-bloqueo: 0.5rem;
  --margen-cita: 0.1875rem;

  /* ── Acomodo ── */
  --margen-pantalla: 1rem;
  --alto-pantalla: 100dvh;
  --ancho-lateral: 15rem;
  --ancho-lateral-compacto: 4.5rem;   /* menú de solo íconos */
  --ancho-menu-flotante: 13rem;       /* la lista de un grupo, a un lado */
  --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: casi nada (Libreta separa con líneas); nunca de color ── */
  --sombra-1: 0 1px 2px rgba(28, 25, 23, 0.04);
  --sombra-2: 0 2px 8px rgba(28, 25, 23, 0.06);
  --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);
  --logo-perfil: 5.5rem;
  --borde-logo: 4px;
  --foto-servicio: 4.5rem;
  --avatar-estilista: 3.5rem;
  --ancho-resena: 17rem;
  --alto-progreso: 0.1875rem;
  /* Etapa 9, la bienvenida: el ancho del asistente, la zona para soltar
     los archivos, las columnas de precio y minutos de los servicios, el
     sello de "¡Listo!", la barra de importar, lo más alto que crece
     "Primeros pasos" abierta (la agenda sigue a la vista) y el recorrido
     (su globo y el aire alrededor de lo que ilumina). */
  --ancho-bienvenida: 40rem;
  --alto-soltar: 10.5rem;
  --columna-precio: 7rem;
  --columna-minutos: 7rem;
  --sello-listo: 4.5rem;
  --alto-barra-importar: 0.375rem;
  --alto-primeros-abierta: 60dvh;
  --ancho-grupo-primeros: 15rem;
  --ancho-globo-recorrido: min(20rem, calc(100% - var(--margen-pantalla) * 2));
  --margen-recorrido: 0.375rem;
  --alcance-velo-recorrido: 100vmax;
  --velo-recorrido: rgba(0, 0, 0, 0.72);
  /* Etapa 6d: la barra de la meta del mes, el ancho de los campos de precio
     y duración de cada quien, y el de un escalón de la comisión. */
  --alto-meta: 0.5rem;
  --ancho-quien-precios: 16rem;
  --ancho-escalon: 5.5rem;
  --desplazamiento-paso: 1.5rem;
  --celda-calendario: 2.75rem;
  --texto-folio: 3rem;
  --letras-folio: 0.12em;
  --alto-boton-fijo: 4.5rem;
  --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-recorrido: 45;
  --capa-aviso: 50;
}

/* ── De noche ──
   Tema oscuro del sistema (el usuario lo enciende) y página pública cuando
   el celular del cliente está en modo oscuro ([data-tema="publico-oscuro"]
   es lo mismo a la fuerza, para la guía de estilos). La noche sale de la
   misma paleta: fondo de tinta, texto de papel. */
:root[data-tema="oscuro"], [data-tema="oscuro"] [data-paleta]:not([data-tema^="publico"]), [data-tema="publico-oscuro"] {
  --color-fondo: var(--noche-papel);
  --color-tarjeta: var(--noche-hoja);
  --color-hundido: var(--noche-hundido);
  --color-texto: var(--noche-tinta);
  --color-texto-suave: var(--noche-suave);
  --color-linea: var(--noche-linea);
  --color-linea-control: var(--noche-linea-control);
  --color-acento: var(--noche-acento);
  --color-sobre-acento: var(--noche-sobre-acento);
  --color-acento-texto: var(--noche-acento-texto);
  --color-detalle: var(--noche-detalle);
  --color-detalle-texto: var(--noche-detalle-texto);
  --color-ok: #A8CBA4;
  --color-espera: #E3C77E;
  --color-error: #E9A79C;
  --tinte: 18%;
  --brindis-accion: var(--noche-brindis-accion);
  --color-velo: rgba(0, 0, 0, 0.6);
  --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; --avatar-grafito: #A8A29E;
  --marca-acento-texto: #FB923C;
  --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);
}

@media (prefers-color-scheme: dark) {
  [data-tema="publico"] {
    --color-fondo: var(--noche-papel);
    --color-tarjeta: var(--noche-hoja);
    --color-hundido: var(--noche-hundido);
    --color-texto: var(--noche-tinta);
    --color-texto-suave: var(--noche-suave);
    --color-linea: var(--noche-linea);
    --color-linea-control: var(--noche-linea-control);
    --color-acento: var(--noche-acento);
    --color-sobre-acento: var(--noche-sobre-acento);
    --color-acento-texto: var(--noche-acento-texto);
    --color-detalle: var(--noche-detalle);
    --color-detalle-texto: var(--noche-detalle-texto);
    --color-ok: #A8CBA4;
    --color-espera: #E3C77E;
    --color-error: #E9A79C;
    --tinte: 18%;
    --brindis-accion: var(--noche-brindis-accion);
    --color-velo: rgba(0, 0, 0, 0.6);
    --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; --avatar-grafito: #A8A29E;
    --marca-acento-texto: #FB923C;
    --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);
  }
}

/* ── Estilo Tablero (8 oct 2026, a prueba) ──
   El sistema por dentro y la página pública (reservar.html y cita.html, en
   su <html>; el aviso de privacidad sigue en Libreta): tarjetas
   claras con sombra suave, títulos en Figtree gruesa, botones redondos, la
   primera cifra del resumen rellena del color del negocio y movimiento
   cuando algo cambia (las tarjetas entran, las barras crecen y las cifras
   cuentan). tema-inicial.js pone data-estilo="tablero" en <html>; con
   localStorage "localiapps.estilo" = "libreta" se regresa a Libreta.
   Las 8 paletas siguen igual: el acento del negocio tiñe todo. */
[data-estilo~="tablero"] {
  --fuente-titulo: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --peso-titulo: 700;
  --letras-titulo: -0.02em;
  --texto-cifra-tablero: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);

  /* La hoja casi blanca sobre el papel, para que la tarjeta se despegue. */
  --tablero-tarjeta: color-mix(in srgb, var(--dia-hoja) 40%, #FFFFFF);
  --color-tarjeta: var(--tablero-tarjeta);
  --tablero-borde: transparent;
  --radio-tarjeta: 20px;
  --sombra-tarjeta: 0 1px 2px rgba(20, 24, 20, 0.04), 0 6px 20px rgba(20, 24, 20, 0.05);
  --sombra-tarjeta-alta: 0 2px 4px rgba(20, 24, 20, 0.05), 0 14px 32px rgba(20, 24, 20, 0.09);

  /* La tarjeta destacada (la primera cifra) y lo que va encima */
  --tarjeta-destacada: var(--color-acento);
  --sobre-destacada: var(--color-sobre-acento);
  --sobre-destacada-suave: color-mix(in srgb, var(--color-sobre-acento) 80%, transparent);
  --sobre-destacada-fondo: color-mix(in srgb, var(--color-sobre-acento) 16%, transparent);

  /* Gráficas en tres tonos del acento: fuerte (el mejor día), media (hoy y
     la que se señala) y tenue (los demás); rayado solo lo que falta. */
  --raya-ancho: 3px;
  --barra-rayada: repeating-linear-gradient(-45deg, var(--grafica-barra-suave) 0 var(--raya-ancho), var(--color-hundido) var(--raya-ancho) calc(var(--raya-ancho) * 2.4));
  --barra-fuerte: var(--grafica-barra);
  --barra-media: color-mix(in srgb, var(--color-acento) 55%, var(--color-tarjeta));
  --barra-tenue: color-mix(in srgb, var(--color-acento) 28%, var(--color-tarjeta));
  --ancho-dato-min: 12rem;
  --ancho-barra-max: 3rem;
  --ancho-dona: 11rem;
  --grueso-dona: 0.875rem;
  --dona-segundo: var(--barra-media);
  --dona-resto: var(--barra-rayada);

  /* El menú lateral flota sobre el papel, despegado de las orillas. */
  --margen-lateral: 0.75rem;
  --marca-actual-alto: 1.5rem;

  /* Movimiento: lo de siempre en 150 ms; las cifras y las gráficas, más
     lento para que se vea el cambio (nunca más de 700 ms). */
  --duracion-cifra: 700ms;
  --duracion-crecer: 650ms;
  --duracion-entrar: 420ms;
  --escalon: 45ms;
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --desplazamiento-entrada: 0.75rem;
  --escala-ventana: 0.96;
  --escala-presion: 0.97;

  /* Lo de los videos de referencia (Fernly y Rivet, 8 oct): renglones que
     se acomodan, aviso que sube con rebote, ventanas con el fondo borroso,
     la ficha de lado, la línea que se dibuja y el color que se derrama. */
  --duracion-mover: 520ms;
  --duracion-salir: 220ms;
  --duracion-traza: 700ms;
  --duracion-tinta: 650ms;
  --duracion-nuevo: 1600ms;
  --curva-resorte: cubic-bezier(0.34, 1.45, 0.64, 1);
  --velo-tablero: color-mix(in srgb, var(--color-texto) 22%, transparent);
  --desenfoque-velo: 6px;
  --ancho-ventana-lateral: 30rem;
  --alto-linea-grafica: 11rem;
  --alto-mini-grafica: 2rem;
  --grueso-linea-grafica: 2.5px;
  --grueso-linea-mini: 2px;
  --guion-promedio: 4 4;
  --punto-grafica: 0.75rem;
  --relleno-linea: color-mix(in srgb, var(--grafica-barra) 22%, transparent);
  --texto-reloj: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  --radio-tinta: 150vmax;

  /* Tercera vuelta (8 oct): la tarjeta oscura con curvas de nivel (la
     siguiente cita, el reloj, instalar la app), la flecha de cada cifra, la
     dona completa y el acomodo en bento. */
  --tarjeta-oscura: color-mix(in srgb, var(--dia-acento) 42%, #0B0D0C);
  --sobre-oscura: #F5F7F4;
  --sobre-oscura-suave: color-mix(in srgb, var(--sobre-oscura) 72%, transparent);
  --sobre-oscura-fondo: color-mix(in srgb, var(--sobre-oscura) 14%, transparent);
  --curvas-oscuras: repeating-radial-gradient(ellipse 170% 120% at 115% 135%, transparent 0 21px, color-mix(in srgb, var(--sobre-oscura) 10%, transparent) 21px 22.5px);
  --boton-ir: 2rem;
  --texto-cuenta: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  --alto-lista-tablero: 34rem;
  --alto-barra-grafica: 12rem;
  --ancho-anillo: 10.5rem;
  --ancho-dona-grande: 15rem;
  --ancho-secciones: 13rem;
  --ancho-tarjeta-persona: 13rem;
  --avatar-tarjeta: 4rem;
  --ancho-personalizacion: 64rem;
  --anillo-1: var(--grafica-barra);
  --anillo-2: var(--barra-media);
  --anillo-3: color-mix(in srgb, var(--color-acento) 28%, var(--color-tarjeta));
  --anillo-4: var(--color-detalle);
  --anillo-5: var(--color-linea-control);
  --regla-grafica: color-mix(in srgb, var(--color-linea) 70%, transparent);

  /* Etapa 7: el perfil del negocio en la página pública (fotos en mosaico,
     equipo, opiniones con sus barras, la hoja de una foto y la página de
     cada estilista). */
  --alto-foto-mosaico: 6.75rem;
  --radio-foto: 16px;
  --avatar-perfil: 4.25rem;
  --avatar-perfil-grande: 6.25rem;
  --avatar-mini: 1.875rem;
  --bolita-iniciales: 2.375rem;
  --anillo-perfil: 3px;
  --alto-barra-estrellas: 0.5625rem;
  --ancho-columna-destacada: 8.25rem;
  --ancho-persona-perfil: 8.5rem;
  --texto-cifra-destacada: 2.875rem;
  --alto-hoja-foto: min(62vh, 30rem);
  --velo-foto: rgba(15, 10, 7, 0.5);
  --etiqueta-foto: color-mix(in srgb, #FFFFFF 94%, transparent);
  --texto-etiqueta-foto: #1F1A16;
  --boton-circulo: 2.25rem;
  --latido: 2s;
  --google-azul: #4285F4;
}
/* De día, los colores del video (Fernly, 8 oct): fondo gris casi neutro,
   tarjetas blanco puro y el acento del negocio con más vida, oscuro lo
   necesario para que el texto blanco encima pase AA (6.9:1 o más en las 8
   paletas; Nude y Grafito casi no tienen color y se quedan neutros). La
   tarjeta oscura, teñida del acento. La página pública, solo si el celular
   del cliente está en modo claro. Sin color relativo se queda lo de arriba. */
@supports (color: oklch(from red l c h)) {
  :root[data-estilo~="tablero"]:not([data-tema]), :root[data-estilo~="tablero"]:not([data-tema]) [data-paleta] {
    --color-fondo: oklch(from var(--dia-acento) 0.958 0.004 h);
    --tablero-tarjeta: #FFFFFF;
    --color-tarjeta: var(--tablero-tarjeta);
    --color-hundido: oklch(from var(--dia-acento) 0.94 0.006 h);
    --color-linea: oklch(from var(--dia-acento) 0.9 0.008 h);
    --color-acento: oklch(from var(--dia-acento) min(l, 0.46) min(calc(c * 1.5), 0.13) h);
    --color-acento-texto: var(--color-acento);
    --color-sobre-acento: #FFFFFF;
    --barra-fuerte: oklch(from var(--dia-acento) calc(min(l, 0.46) * 0.7) min(calc(c * 1.2), 0.09) h);
    --barra-media: oklch(from var(--dia-acento) 0.58 min(calc(c * 1.5), 0.12) h);
    --barra-tenue: oklch(from var(--dia-acento) 0.8 min(calc(c * 1.3), 0.085) h);
    --grafica-barra-suave: var(--barra-tenue);
    --tarjeta-oscura: oklch(from var(--dia-acento) 0.26 min(c, 0.07) h);
  }
  @media (prefers-color-scheme: light) {
    [data-tema="publico"][data-estilo~="tablero"] {
      --color-fondo: oklch(from var(--dia-acento) 0.958 0.004 h);
      --tablero-tarjeta: #FFFFFF;
      --color-tarjeta: var(--tablero-tarjeta);
      --color-hundido: oklch(from var(--dia-acento) 0.94 0.006 h);
      --color-linea: oklch(from var(--dia-acento) 0.9 0.008 h);
      --color-acento: oklch(from var(--dia-acento) min(l, 0.46) min(calc(c * 1.5), 0.13) h);
      --color-acento-texto: var(--color-acento);
      --color-sobre-acento: #FFFFFF;
      --barra-fuerte: oklch(from var(--dia-acento) calc(min(l, 0.46) * 0.7) min(calc(c * 1.2), 0.09) h);
      --barra-media: oklch(from var(--dia-acento) 0.58 min(calc(c * 1.5), 0.12) h);
      --barra-tenue: oklch(from var(--dia-acento) 0.8 min(calc(c * 1.3), 0.085) h);
      --grafica-barra-suave: var(--barra-tenue);
      --tarjeta-oscura: oklch(from var(--dia-acento) 0.26 min(c, 0.07) h);
    }
  }
}
:root[data-tema="oscuro"][data-estilo~="tablero"] {
  --tablero-borde: var(--noche-linea);
  --sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sombra-tarjeta-alta: 0 12px 32px rgba(0, 0, 0, 0.55);
  --velo-tablero: rgba(0, 0, 0, 0.5);
}
/* De noche, estilo neón (Rivet): papel casi negro con un toque del tono del
   negocio, tarjetas un poco más claras y el acento encendido, del mismo tono
   pero con más color. Sin color relativo se queda la noche de la paleta. */
@supports (color: oklch(from red l c h)) {
  :root[data-tema="oscuro"][data-estilo~="tablero"] {
    --color-fondo: oklch(from var(--dia-acento) 0.15 0.012 h);
    --color-tarjeta: oklch(from var(--dia-acento) 0.2 0.014 h);
    --color-hundido: oklch(from var(--dia-acento) 0.25 0.016 h);
    --color-linea: oklch(from var(--dia-acento) 0.3 0.016 h);
    --color-linea-control: oklch(from var(--dia-acento) 0.5 0.016 h);
    --color-acento: oklch(from var(--dia-acento) 0.86 max(0.14, calc(c * 1.5)) h);
    --color-acento-texto: oklch(from var(--dia-acento) 0.88 max(0.12, calc(c * 1.4)) h);
    --color-sobre-acento: oklch(from var(--dia-acento) 0.18 0.03 h);
    --barra-fuerte: var(--color-acento);
    --barra-media: oklch(from var(--dia-acento) 0.64 min(max(0.1, calc(c * 1.2)), 0.13) h);
    --barra-tenue: oklch(from var(--dia-acento) 0.4 min(max(0.05, c), 0.08) h);
    --grafica-barra-suave: var(--barra-tenue);
    --tablero-borde: var(--color-linea);
  }
}

/* Página pública en estilo Tablero (reservar.html y cita.html): de noche,
   cuando el celular del cliente está en modo oscuro, la misma noche neón. */
[data-tema="publico-oscuro"][data-estilo~="tablero"] {
  --color-tarjeta: var(--noche-hoja);
  --tablero-borde: var(--noche-linea);
  --sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sombra-tarjeta-alta: 0 12px 32px rgba(0, 0, 0, 0.55);
  --velo-tablero: rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  [data-tema="publico"][data-estilo~="tablero"] {
    --color-tarjeta: var(--noche-hoja);
    --tablero-borde: var(--noche-linea);
    --sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sombra-tarjeta-alta: 0 12px 32px rgba(0, 0, 0, 0.55);
    --velo-tablero: rgba(0, 0, 0, 0.5);
  }
}
@supports (color: oklch(from red l c h)) {
  [data-tema="publico-oscuro"][data-estilo~="tablero"] {
    --color-fondo: oklch(from var(--dia-acento) 0.15 0.012 h);
    --color-tarjeta: oklch(from var(--dia-acento) 0.2 0.014 h);
    --color-hundido: oklch(from var(--dia-acento) 0.25 0.016 h);
    --color-linea: oklch(from var(--dia-acento) 0.3 0.016 h);
    --color-linea-control: oklch(from var(--dia-acento) 0.5 0.016 h);
    --color-acento: oklch(from var(--dia-acento) 0.86 max(0.14, calc(c * 1.5)) h);
    --color-acento-texto: oklch(from var(--dia-acento) 0.88 max(0.12, calc(c * 1.4)) h);
    --color-sobre-acento: oklch(from var(--dia-acento) 0.18 0.03 h);
    --barra-fuerte: var(--color-acento);
    --barra-media: oklch(from var(--dia-acento) 0.64 min(max(0.1, calc(c * 1.2)), 0.13) h);
    --barra-tenue: oklch(from var(--dia-acento) 0.4 min(max(0.05, c), 0.08) h);
    --grafica-barra-suave: var(--barra-tenue);
    --tablero-borde: var(--color-linea);
  }
  @media (prefers-color-scheme: dark) {
    [data-tema="publico"][data-estilo~="tablero"] {
      --color-fondo: oklch(from var(--dia-acento) 0.15 0.012 h);
      --color-tarjeta: oklch(from var(--dia-acento) 0.2 0.014 h);
      --color-hundido: oklch(from var(--dia-acento) 0.25 0.016 h);
      --color-linea: oklch(from var(--dia-acento) 0.3 0.016 h);
      --color-linea-control: oklch(from var(--dia-acento) 0.5 0.016 h);
      --color-acento: oklch(from var(--dia-acento) 0.86 max(0.14, calc(c * 1.5)) h);
      --color-acento-texto: oklch(from var(--dia-acento) 0.88 max(0.12, calc(c * 1.4)) h);
      --color-sobre-acento: oklch(from var(--dia-acento) 0.18 0.03 h);
      --barra-fuerte: var(--color-acento);
      --barra-media: oklch(from var(--dia-acento) 0.64 min(max(0.1, calc(c * 1.2)), 0.13) h);
      --barra-tenue: oklch(from var(--dia-acento) 0.4 min(max(0.05, c), 0.08) h);
      --grafica-barra-suave: var(--barra-tenue);
      --tablero-borde: var(--color-linea);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Estilo Cobre (rediseño de imagen, aprobado el 11 oct 2026)
   El sistema por dentro: <html data-estilo="tablero cobre">. Va encima de
   Tablero (que va encima de Libreta): aquí solo cambian valores, y lo que
   cambia de forma está al final de componentes.css.
   · Negro por defecto (data-tema="oscuro"); blanco sin data-tema o con
     data-tema="claro". Un pedazo de la página puede llevar el otro tema
     (la guía enseña los dos lado a lado).
   · Siempre con el naranja de Localiapps: las 8 paletas quedan solo para
     la página pública.
   · acento: el relleno de lo principal y lo escogido (blanco en negro,
     casi negro en blanco). marca: el naranja, solo en detalles (la luz,
     el punto de las etiquetas, el foco, los enlaces, las gráficas y la
     cita confirmada).
   ═══════════════════════════════════════════════════════════════════════ */
[data-estilo~="cobre"] {
  /* Letra: Figtree en todo; Instrument Serif cursiva solo en la palabra
     clave del saludo y de las pantallas de entrar ("Buenos días, Alejandro"). */
  --fuente-titulo: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-cursiva: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --peso-titulo: 600;
  --letras-titulo: -0.02em;
  --letras-titulo-grande: -0.035em;
  --tamano-cursiva: 1.12em;
  --tamano-cursiva-saludo: 1.22em;
  /* 14 px es lo más chico que se escribe */
  --texto-xs: 0.875rem;
  --texto-renglon: 0.9375rem;
  --texto-saludo: clamp(1.375rem, 1.1rem + 0.8vw, 1.625rem);
  --texto-acceso: clamp(2rem, 1.5rem + 2.4vw, 2.5rem);
  --texto-guia: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  --texto-cifra-tablero: clamp(1.625rem, 1.4rem + 0.6vw, 1.875rem);
  --interlineado-titulo: 1.08;

  /* Formas */
  --radio-tarjeta: 20px;
  --radio-ventana: 24px;
  --radio-control: 12px;
  --radio-campo: 16px;
  --radio-cita: 10px;
  --radio-celda: 8px;
  --radio-cuadrito: 12px;
  --alto-control: 2.75rem;
  --alto-control-grande: 3.375rem;
  --alto-campo: 3.375rem;
  --cuadrito-flecha: 2.5rem;
  --cuadrito-flecha-chico: 1.75rem;
  --separacion-flecha: 0.4375rem;
  --punto-etiqueta: 0.375rem;
  --anillo-punto: 3px;
  --barra-cita: 4px;
  --alto-barra-dividida: 2.5rem;
  --hueco-barra-dividida: 3px;
  --anillo-campo: 4px;
  --anillo-aviso: 4px;
  --anillo-escogido: 3px;
  --alto-chip: 1.75rem;
  --icono-chip: 0.875rem;
  --icono-tarjeta: 1.125rem;
  --alto-mas-datos: 4rem;
  --alto-persona: 3.75rem;
  --alto-ficha-estilista: 4.5rem;
  --ancho-ficha-acceso: 6.25rem;
  --alto-ficha-acceso: 7.5rem;
  --alto-raya: 0.25rem;
  --ancho-luna-sol: 2.75rem;
  --ancho-ajustes-lista: 13.5rem;
  --alto-pastilla-vidrio: 2.25rem;
  --alto-barra-flotante: 3.25rem;
  --boton-redondo: 3.75rem;
  --separacion-hora: 1.5rem;
  --interruptor-boton: #FFFFFF;
  /* La cifra grande de una tarjeta ("Lo que entró hoy", "Ganancia del mes") */
  --texto-cifra-tarjeta: clamp(1.875rem, 1.6rem + 0.8vw, 2.25rem);
  /* Panel: el desglose de la ganancia, a un lado de la línea */
  --ancho-desglose: 20rem;
  /* Entrar, registro y unirse: el ancho del formulario */
  --ancho-acceso: 26.5rem;
  /* "Revise su correo": el cuadro del sobre */
  --sobre-acceso: 4rem;
  /* Ajustes: el logo grande del negocio */
  --logo-grande: 3.5rem;
  /* estilos.html: la caja de la luz, la maqueta con foto y la del menú */
  --alto-muestra-luz: 15rem;
  --alto-maqueta-foto: 22rem;
  --alto-maqueta-menu: 46rem;

  /* Marco: menú lateral pegado a la orilla, barra de arriba alta y la
     píldora de abajo (celular) que flota. */
  --ancho-lateral: 16.5rem;
  --margen-lateral: 0px;
  --alto-encabezado: 4.75rem;
  --alto-barra-inferior: 4.25rem;
  --margen-pildora: 0.75rem;
  --ancho-pildora-max: 27.5rem;
  --sombra-tarjeta: none;

  /* La luz de arriba: cobre y naranja, un toque azul y la cuadrícula */
  --alto-luz: 32.5rem;
  --paso-reja: 3.5rem;
  --mancha: 46vw;
  --mancha-max: 38.75rem;
  --mancha-arriba: -32vw;
  --mancha-ida: -12%;
  --mancha-vuelta: 14%;
  --mancha-baja: 6%;
  --halo-difuso: 28px;
  --halo-abre: 2px;

  /* Movimiento del video: las piezas entran desenfocadas y se enfocan al
     subir; las manchas de luz se mueven despacio; el halo respira y el
     botón principal brilla de vez en cuando. */
  --duracion-entrar: 700ms;
  --escalon: 70ms;
  --desenfoque-entrada: 12px;
  --desplazamiento-entrada: 1.125rem;
  --curva-salida: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duracion-mancha: 22s;
  --duracion-mancha-2: 28s;
  --duracion-resplandor: 18s;
  --duracion-halo: 3.2s;
  --duracion-brillo: 5s;
  --espera-brillo: 1.5s;
  --duracion-gira: 700ms;
  --duracion-sacudida: 380ms;
  --sacudida: 6px;
  --levanta: -2px;
  --desenfoque-vidrio: 16px;
  --desenfoque-barra: 18px;
}

/* Cobre en negro */
:root[data-estilo~="cobre"][data-tema$="oscuro"], [data-estilo~="cobre"] [data-tema$="oscuro"] {
  --color-fondo: #0A0908;
  --color-menu: #0E0D0C;
  --color-tarjeta: #131211;
  --color-hundido: #191716;
  --color-hundido-fuerte: #221F1D;
  --color-campo: #141210;
  --color-texto: #FFFFFF;
  --color-texto-suave: #B3ACA6;
  --color-texto-tenue: #948D87;
  --color-linea: rgba(255, 255, 255, 0.08);
  --color-linea-control: rgba(255, 255, 255, 0.15);
  --tablero-borde: var(--color-linea);

  --color-acento: #FFFFFF;
  --color-sobre-acento: #0A0908;
  --color-acento-texto: #FB923C;
  --color-acento-tenue: rgba(255, 255, 255, 0.08);
  --color-acento-medio: rgba(255, 255, 255, 0.16);
  --color-marca: #F97316;
  --color-marca-texto: #FB923C;
  --color-sobre-marca: #1A0D02;
  --color-marca-tenue: rgba(249, 115, 22, 0.14);
  --color-marca-anillo: rgba(249, 115, 22, 0.22);
  --color-detalle: #F97316;
  --color-detalle-texto: #FB923C;
  --color-detalle-tenue: rgba(249, 115, 22, 0.14);
  --color-foco: #F97316;

  --color-ok: #4ADE80;
  --color-espera: #FBBF24;
  --color-error: #F87171;
  --color-peligro: #F87171;
  --color-ahora: #F97316;
  --color-nuevo: #F97316;
  --color-sobre-nuevo: #1A0D02;
  --color-nuevo-texto: #FB923C;
  --color-velo: rgba(0, 0, 0, 0.55);
  --velo-tablero: rgba(0, 0, 0, 0.55);

  --estado-apartada: rgba(255, 255, 255, 0.32);
  --estado-apartada-fondo: rgba(255, 255, 255, 0.03);
  --estado-apartada-texto: #B3ACA6;
  --estado-por-confirmar: #FBBF24;
  --estado-por-confirmar-fondo: rgba(251, 191, 36, 0.12);
  --estado-por-confirmar-texto: #FBBF24;
  --estado-confirmada: #F97316;
  --estado-confirmada-fondo: rgba(249, 115, 22, 0.14);
  --estado-confirmada-texto: #FB923C;
  --estado-confirmo: #4ADE80;
  --estado-confirmo-fondo: rgba(74, 222, 128, 0.12);
  --estado-atendida: #948D87;
  --estado-atendida-fondo: #1C1A18;
  --estado-atendida-texto: #B3ACA6;
  --estado-no-llego: #F87171;
  --estado-no-llego-fondo: transparent;
  --estado-no-llego-texto: #948D87;
  --estado-cancelada: #948D87;
  --estado-cancelada-fondo: #191716;
  --estado-cancelada-texto: #B3ACA6;
  --estado-bloqueo: rgba(255, 255, 255, 0.15);
  --estado-bloqueo-fondo: rgba(255, 255, 255, 0.03);
  --estado-bloqueo-raya: rgba(255, 255, 255, 0.07);
  --estado-bloqueo-texto: #948D87;
  --cita-fondo: var(--estado-confirmada-fondo);
  --cita-hecha-fondo: #1C1A18;

  --aviso-info: #FB923C;
  --aviso-info-fondo: rgba(249, 115, 22, 0.12);
  --aviso-exito: #4ADE80;
  --aviso-exito-fondo: rgba(74, 222, 128, 0.12);
  --aviso-atencion: #FBBF24;
  --aviso-atencion-fondo: rgba(251, 191, 36, 0.12);
  --aviso-error: #F87171;
  --aviso-error-fondo: rgba(248, 113, 113, 0.12);
  --brindis-fondo: #221F1D;
  --brindis-texto: #FFFFFF;
  --brindis-accion: #FB923C;

  /* Gráficas: naranja, ámbar y crema (las formas de pago); la línea del
     mes pasado, punteada y gris. */
  --parte-1: #F97316;
  --parte-2: #E9B23A;
  --parte-3: #EFDCAA;
  --grafica-barra: #F97316;
  --grafica-barra-suave: rgba(249, 115, 22, 0.28);
  --grafica-guia: rgba(255, 255, 255, 0.06);
  --grafica-sube: #4ADE80;
  --grafica-baja: #F87171;
  --barra-fuerte: #F97316;
  --barra-media: rgba(249, 115, 22, 0.6);
  --barra-tenue: rgba(249, 115, 22, 0.24);
  --linea-comparar: rgba(255, 255, 255, 0.3);
  --relleno-linea: rgba(249, 115, 22, 0.22);
  --calor-0: #191716;
  --calor-1: rgba(249, 115, 22, 0.2);
  --calor-2: rgba(249, 115, 22, 0.42);
  --calor-3: rgba(249, 115, 22, 0.7);
  --calor-4: #F97316;
  --dona-segundo: #E9B23A;
  --dona-resto: #221F1D;
  --anillo-1: #F97316;
  --anillo-2: #E9B23A;
  --anillo-3: #EFDCAA;
  --anillo-4: rgba(255, 255, 255, 0.3);
  --anillo-5: #221F1D;
  --regla-grafica: rgba(255, 255, 255, 0.06);
  --color-estrella: #E9B23A;
  --color-pocos: #FBBF24;

  /* Las cifras van todas iguales: sin tarjeta rellena */
  --tarjeta-destacada: var(--color-tarjeta);
  --sobre-destacada: var(--color-texto);
  --sobre-destacada-suave: var(--color-texto-suave);
  --sobre-destacada-fondo: var(--color-hundido);
  --tarjeta-oscura: #191716;
  --sobre-oscura: #FFFFFF;

  /* Luz, halo y manchas */
  --luz-cobre: rgba(154, 52, 18, 0.55);
  --luz-naranja: rgba(249, 115, 22, 0.3);
  --luz-azul: rgba(59, 130, 246, 0.16);
  --luz-reja: rgba(255, 255, 255, 0.03);
  --luz-halo: rgba(249, 115, 22, 0.45);
  --luz-resplandor: rgba(194, 65, 12, 0.3);
  --luz-borde: rgba(249, 115, 22, 0.7);

  /* Botones */
  --boton-flecha-fondo: #0A0908;
  --boton-flecha-texto: #FFFFFF;
  --boton-brillo: rgba(249, 115, 22, 0.32);
  --boton-suave: rgba(255, 255, 255, 0.05);
  --boton-suave-toca: rgba(255, 255, 255, 0.09);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 12px 30px -16px rgba(0, 0, 0, 0.8);
  --sombra-3: 0 24px 48px -28px rgba(0, 0, 0, 0.9);
  --sombra-tarjeta-alta: 0 24px 48px -28px rgba(0, 0, 0, 0.9);
  --pildora-fondo: rgba(24, 22, 21, 0.86);

  --marca-acento-texto: #FB923C;
  --avatar-naranja-texto: #FDBA74;
  --avatar-azul-texto: #93C5FD;
  --avatar-rosa-texto: #F9A8D4;
  --avatar-verde-texto: #86EFAC;
  --avatar-morado-texto: #D8B4FE;
  --avatar-amarillo-texto: #FDE047;
  --avatar-rojo-texto: #FCA5A5;
  --avatar-grafito-texto: #E7E5E4;
  --avatar-grafito: #A8A29E;
}

/* Cobre en blanco */
:root[data-estilo~="cobre"]:not([data-tema$="oscuro"]), [data-estilo~="cobre"] [data-tema$="claro"] {
  --color-fondo: #F4F2EF;
  --color-menu: #FFFFFF;
  --color-tarjeta: #FFFFFF;
  --color-hundido: #F7F5F2;
  --color-hundido-fuerte: #EFEBE6;
  --color-campo: #FFFFFF;
  --color-texto: #17130F;
  --color-texto-suave: #5C544D;
  --color-texto-tenue: #6B635C;
  --color-linea: rgba(28, 20, 12, 0.08);
  --color-linea-control: rgba(28, 20, 12, 0.16);
  --tablero-borde: var(--color-linea);

  --color-acento: #17130F;
  --color-sobre-acento: #FFFFFF;
  --color-acento-texto: #C2410C;
  --color-acento-tenue: #F1EEEA;
  --color-acento-medio: #E6E1DB;
  --color-marca: #F97316;
  --color-marca-texto: #C2410C;
  --color-sobre-marca: #1A0D02;
  --color-marca-tenue: #FFF1E5;
  --color-marca-anillo: rgba(249, 115, 22, 0.2);
  --color-detalle: #F97316;
  --color-detalle-texto: #C2410C;
  --color-detalle-tenue: #FFF1E5;
  --color-foco: #EA580C;

  --color-ok: #15803D;
  --color-espera: #B45309;
  --color-error: #B91C1C;
  --color-peligro: #B91C1C;
  --color-ahora: #F97316;
  --color-nuevo: #F97316;
  --color-sobre-nuevo: #1A0D02;
  --color-nuevo-texto: #C2410C;
  --color-velo: rgba(23, 19, 15, 0.35);
  --velo-tablero: rgba(23, 19, 15, 0.35);
  /* Etapa 9: el velo del recorrido en la versión blanca. */
  --velo-recorrido: rgba(23, 19, 15, 0.5);

  --estado-apartada: rgba(28, 20, 12, 0.32);
  --estado-apartada-fondo: rgba(28, 20, 12, 0.025);
  --estado-apartada-texto: #5C544D;
  --estado-por-confirmar: #D97706;
  --estado-por-confirmar-fondo: #FEF3C7;
  --estado-por-confirmar-texto: #92400E;
  --estado-confirmada: #F97316;
  --estado-confirmada-fondo: #FFF1E5;
  --estado-confirmada-texto: #C2410C;
  --estado-confirmo: #15803D;
  --estado-confirmo-fondo: #E9F7EE;
  --estado-atendida: #A8A29E;
  --estado-atendida-fondo: #F4F2EF;
  --estado-atendida-texto: #5C544D;
  --estado-no-llego: #B91C1C;
  --estado-no-llego-fondo: transparent;
  --estado-no-llego-texto: #6B635C;
  --estado-cancelada: #A8A29E;
  --estado-cancelada-fondo: #F4F2EF;
  --estado-cancelada-texto: #5C544D;
  --estado-bloqueo: rgba(28, 20, 12, 0.16);
  --estado-bloqueo-fondo: #F7F5F2;
  --estado-bloqueo-raya: rgba(28, 20, 12, 0.05);
  --estado-bloqueo-texto: #6B635C;
  --cita-fondo: var(--estado-confirmada-fondo);
  --cita-hecha-fondo: #F4F2EF;

  --aviso-info: #C2410C;
  --aviso-info-fondo: #FFF1E5;
  --aviso-exito: #15803D;
  --aviso-exito-fondo: #E7F6EC;
  --aviso-atencion: #92400E;
  --aviso-atencion-fondo: #FEF3C7;
  --aviso-error: #B91C1C;
  --aviso-error-fondo: #FDECEC;
  --brindis-fondo: #17130F;
  --brindis-texto: #FFFFFF;
  --brindis-accion: #FDBA74;

  --parte-1: #F97316;
  --parte-2: #E9B23A;
  --parte-3: #E3C77F;
  --grafica-barra: #F97316;
  --grafica-barra-suave: rgba(249, 115, 22, 0.25);
  --grafica-guia: rgba(28, 20, 12, 0.07);
  --grafica-sube: #15803D;
  --grafica-baja: #B91C1C;
  --barra-fuerte: #F97316;
  --barra-media: rgba(249, 115, 22, 0.55);
  --barra-tenue: rgba(249, 115, 22, 0.2);
  --linea-comparar: rgba(28, 20, 12, 0.25);
  --relleno-linea: rgba(249, 115, 22, 0.14);
  --calor-0: #F1EEEA;
  --calor-1: #FFE7D1;
  --calor-2: #FDBA74;
  --calor-3: #FB923C;
  --calor-4: #F97316;
  --dona-segundo: #E9B23A;
  --dona-resto: #EFEBE6;
  --anillo-1: #F97316;
  --anillo-2: #E9B23A;
  --anillo-3: #E3C77F;
  --anillo-4: rgba(28, 20, 12, 0.25);
  --anillo-5: #EFEBE6;
  --regla-grafica: rgba(28, 20, 12, 0.07);
  --color-estrella: #D69A1F;
  --color-pocos: #B45309;

  --tarjeta-destacada: var(--color-tarjeta);
  --sobre-destacada: var(--color-texto);
  --sobre-destacada-suave: var(--color-texto-suave);
  --sobre-destacada-fondo: var(--color-hundido);
  --tarjeta-oscura: #17130F;
  --sobre-oscura: #FFFFFF;

  --luz-cobre: rgba(251, 146, 60, 0.26);
  --luz-naranja: rgba(249, 115, 22, 0.16);
  --luz-azul: rgba(59, 130, 246, 0.08);
  --luz-reja: rgba(28, 20, 12, 0.045);
  --luz-halo: rgba(249, 115, 22, 0.3);
  --luz-resplandor: rgba(251, 146, 60, 0.18);
  --luz-borde: rgba(249, 115, 22, 0.55);

  --boton-flecha-fondo: #FFFFFF;
  --boton-flecha-texto: #17130F;
  --boton-brillo: rgba(255, 255, 255, 0.3);
  --boton-suave: rgba(255, 255, 255, 0.7);
  --boton-suave-toca: #FFFFFF;

  --sombra-1: 0 1px 2px rgba(60, 40, 20, 0.06);
  --sombra-2: 0 10px 28px -18px rgba(60, 40, 20, 0.3);
  --sombra-3: 0 24px 48px -30px rgba(60, 40, 20, 0.3);
  --sombra-tarjeta-alta: 0 24px 48px -30px rgba(60, 40, 20, 0.3);
  --pildora-fondo: rgba(255, 255, 255, 0.92);

  --marca-acento-texto: #C2410C;
  --avatar-naranja-texto: #9A3412;
  --avatar-azul-texto: #1E40AF;
  --avatar-rosa-texto: #9D174D;
  --avatar-verde-texto: #166534;
  --avatar-morado-texto: #6B21A8;
  --avatar-amarillo-texto: #854D0E;
  --avatar-rojo-texto: #991B1B;
  --avatar-grafito-texto: #292524;
  --avatar-grafito: #57534E;
}

/* ── Estilo Vidrio: la página de los clientes (fase 4 del rediseño) ──
   <html data-estilo="tablero cobre vidrio" data-tema="publico-oscuro"> (o
   "publico-claro"): el dueño escoge negro o blanco y así lo ven todos.
   Es Cobre con el color del negocio en lugar del naranja: el color solo
   pinta la luz de arriba y el anillo de lo escogido; los botones siguen en
   negro o blanco. Vidrio solo sobre la foto y en la barra de abajo.
   13 oct (la ficha en computadora): el vidrio es más transparente; las
   tarjetas son de cristal; el fondo lleva la foto del local muy borrosa,
   manchas de color que se mueven despacio y la cuadrícula; en computadora,
   la foto de orilla a orilla y dos columnas.
   data-luz-negocio hace lo mismo dentro del sistema ("Unirse": la luz y el
   campo que se ilumina, del color del negocio que invita).
   Los colores van con la misma fuerza que los de Cobre (y después), para
   ganarles. */
[data-estilo~="vidrio"] {
  --peso-titulo: 500;
  --letras-titulo: -0.025em;
  --radio-tarjeta: 24px;
  /* Vidrio sobre la foto: transparente, esmerilado y con brillo arriba */
  --vidrio: rgba(255, 255, 255, 0.13);
  --vidrio-borde: rgba(255, 255, 255, 0.28);
  --vidrio-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  --vidrio-texto: #FFFFFF;
  --vidrio-toca: rgba(255, 255, 255, 0.22);
  /* Sobre fotos chicas (pueden ser claras), el vidrio va más oscuro */
  --vidrio-sobre-foto-chica: rgba(16, 12, 16, 0.42);
  --sobre-foto-boton: #0A0A0B;
  --portada-oscura: rgba(0, 0, 0, 0.66);
  --portada-media: rgba(0, 0, 0, 0.3);
  --portada-arriba: rgba(0, 0, 0, 0.5);
  --alto-portada-vidrio: min(78svh, 37.5rem);
  --alto-portada-vidrio-ancha: clamp(38.75rem, 86vh, 55rem);
  --acercamiento-foto: 1.06;
  --duracion-foto: 18s;
  --circulo-vidrio: 2.75rem;
  --circulo-vidrio-grande: 3.25rem;
  --dia-mes: 2.75rem;
  --texto-portada-ancha: clamp(4.25rem, 6.6vw, 7rem);
  --letras-portada-ancha: -0.035em;
  --interlineado-portada-ancha: 0.98;
  --ancho-texto-portada: 51.25rem;
  /* Computadora: el ancho de la página y la tarjeta de la derecha */
  --ancho-publica-vidrio: 77.5rem;
  --ancho-lado-vidrio: 23.75rem;
  --separacion-columnas-vidrio: 3.5rem;
  --orilla-vidrio: max(var(--espacio-8), calc((100vw - var(--ancho-publica-vidrio)) / 2));
  --alto-barra-arriba: 4rem;
  --logo-barra-arriba: 2.5rem;
  --punto-seccion: 5px;
  --alto-foto-mosaico-ancha: 12.5rem;
  --proporcion-persona: 4 / 5;
  --proporcion-servicio: 4 / 3;
  /* Las tarjetas de cristal y el fondo */
  --desenfoque-cristal: 26px;
  --desenfoque-fondo: 70px;
  --mancha-fondo: 62vmax;
  --duracion-fondo-1: 26s;
  --duracion-fondo-2: 32s;
  --duracion-fondo-3: 38s;
  --paso-cuadricula: 56px;
  --ancho-boton-portada: 13.75rem;
  /* Dónde empiezan las manchas del fondo y hasta dónde se mueven */
  --mancha-1-arriba: 18vh;
  --mancha-2-arriba: 40vh;
  --mancha-1-mueve: translate(18vw, -12vh) scale(1.15);
  --mancha-2-mueve: translate(-16vw, 14vh) scale(0.9);
  --mancha-3-mueve: translate(-12vw, -18vh) scale(1.1);
  /* Movimiento de la ficha: la foto entra desenfocada y luego respira; lo
     de la portada entra una pieza tras otra; el punto de "Abierto" late;
     las fotos se acercan al pasar el mouse (el recorte las deja en su lugar). */
  --escala-foto-entra: 1.14;
  --desenfoque-foto-entra: 6px;
  --duracion-foto-entra: 1.8s;
  --escala-foto-respira: 1.04;
  --mueve-foto-respira: scale(1.12) translateY(-1.5%);
  --duracion-foto-respira: 22s;
  --retraso-portada: 250ms;
  --escalon-portada: 120ms;
  --duracion-pulso: 2s;
  --alcance-pulso: 9px;
  --pulso-ok: color-mix(in srgb, var(--color-ok) 55%, transparent);
  --pulso-ok-fin: color-mix(in srgb, var(--color-ok) 0%, transparent);
  --acerca-foto: 1.05;
  --recorte-foto: 2.4%;
  --duracion-acerca: 600ms;
}
:root[data-estilo~="vidrio"][data-tema$="oscuro"], [data-estilo~="vidrio"][data-tema$="oscuro"] {
  --color-fondo: #0A0A0B;
  --color-tarjeta: #151517;
  --color-hundido: #1D1D20;
  --color-hundido-fuerte: #26262A;
  --color-campo: #151517;
  --color-texto: #F4F4F2;
  --color-texto-suave: #A6A29D;
  --color-texto-tenue: #95918C;
  --color-acento: #FFFFFF;
  --color-sobre-acento: #0A0A0B;
  --barra-vidrio: rgba(24, 22, 26, 0.5);
  --barra-vidrio-borde: rgba(255, 255, 255, 0.16);
  --portada-fin: #0A0A0B;
  --cristal: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035) 60%);
  --cristal-solido: rgba(28, 24, 28, 0.55);
  --cristal-borde: rgba(255, 255, 255, 0.13);
  --cristal-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --cristal-sombra: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  --cristal-hundido: rgba(255, 255, 255, 0.06);
  --fondo-foto-filtro: blur(var(--desenfoque-fondo)) saturate(1.5) brightness(0.42);
  --fondo-velo: linear-gradient(180deg, rgba(10, 10, 11, 0.2), rgba(10, 10, 11, 0.62) 70%);
  --fondo-cuadricula: rgba(255, 255, 255, 0.035);
  --mancha-fondo-2: rgba(249, 115, 22, 0.22);
  --mancha-fondo-3: rgba(70, 100, 220, 0.26);
  --dia-lleno: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 5px, transparent 5px 10px);
  --boton-brillo: rgba(255, 255, 255, 0.28);
}
:root[data-estilo~="vidrio"]:not([data-tema$="oscuro"]), [data-estilo~="vidrio"][data-tema$="claro"] {
  --color-fondo: #F1F0EC;
  --color-tarjeta: #FFFFFF;
  --color-hundido: #F6F5F2;
  --color-hundido-fuerte: #ECEAE5;
  --color-campo: #FFFFFF;
  --color-texto: #141210;
  --color-texto-suave: #5C5751;
  --color-texto-tenue: #66615B;
  --color-acento: #141210;
  --color-sobre-acento: #FFFFFF;
  --barra-vidrio: rgba(255, 255, 255, 0.6);
  --barra-vidrio-borde: rgba(255, 255, 255, 0.9);
  --portada-fin: #121110;
  --cristal: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5) 60%);
  --cristal-solido: rgba(255, 255, 255, 0.7);
  --cristal-borde: rgba(255, 255, 255, 0.9);
  --cristal-brillo: inset 0 1px 0 rgba(255, 255, 255, 1);
  --cristal-sombra: 0 24px 48px -30px rgba(90, 40, 60, 0.35);
  --cristal-hundido: rgba(255, 255, 255, 0.6);
  --fondo-foto-filtro: blur(var(--desenfoque-fondo)) saturate(1.4) brightness(1.25);
  --fondo-velo: linear-gradient(180deg, rgba(241, 240, 236, 0.55), rgba(241, 240, 236, 0.8) 70%);
  --fondo-cuadricula: rgba(20, 16, 12, 0.04);
  --mancha-fondo-2: rgba(249, 160, 90, 0.32);
  --mancha-fondo-3: rgba(120, 150, 240, 0.3);
  --dia-lleno: repeating-linear-gradient(-45deg, rgba(20, 16, 12, 0.07) 0 5px, transparent 5px 10px);
  --boton-brillo: rgba(255, 255, 255, 0.35);
}
/* El color del negocio: de noche, el tono de la paleta con más luz; de
   día, oscurecido lo necesario para leerse como texto. */
:root[data-estilo~="vidrio"][data-tema$="oscuro"], [data-estilo~="vidrio"][data-tema$="oscuro"], :root[data-luz-negocio][data-tema$="oscuro"], [data-luz-negocio][data-tema$="oscuro"] {
  --color-marca: var(--noche-acento);
  --color-marca-texto: var(--noche-acento-texto);
}
:root[data-estilo~="vidrio"]:not([data-tema$="oscuro"]), [data-estilo~="vidrio"][data-tema$="claro"], :root[data-luz-negocio]:not([data-tema$="oscuro"]), [data-luz-negocio][data-tema$="claro"] {
  --color-marca: var(--dia-acento);
  --color-marca-texto: var(--dia-acento-texto);
}
@supports (color: oklch(from red l c h)) {
  :root[data-estilo~="vidrio"][data-tema$="oscuro"], [data-estilo~="vidrio"][data-tema$="oscuro"], :root[data-luz-negocio][data-tema$="oscuro"], [data-luz-negocio][data-tema$="oscuro"] {
    --color-marca: oklch(from var(--dia-acento) 0.68 max(c, 0.1) h);
    --color-marca-texto: oklch(from var(--dia-acento) 0.8 max(c, 0.08) h);
  }
  :root[data-estilo~="vidrio"]:not([data-tema$="oscuro"]), [data-estilo~="vidrio"][data-tema$="claro"], :root[data-luz-negocio]:not([data-tema$="oscuro"]), [data-luz-negocio][data-tema$="claro"] {
    --color-marca: oklch(from var(--dia-acento) 0.62 max(c, 0.1) h);
    --color-marca-texto: oklch(from var(--dia-acento) min(l, 0.45) c h);
  }
}
/* La luz, el halo, el anillo y el foco salen del color del negocio */
:root[data-estilo~="vidrio"][data-tema], [data-estilo~="vidrio"][data-tema], :root[data-luz-negocio][data-tema], [data-luz-negocio][data-tema] {
  --color-acento-texto: var(--color-marca-texto);
  --color-foco: var(--color-marca);
  --color-marca-tenue: color-mix(in srgb, var(--color-marca) 14%, transparent);
  --color-marca-anillo: color-mix(in srgb, var(--color-marca) 55%, transparent);
  --luz-naranja: color-mix(in srgb, var(--color-marca) 34%, transparent);
  --luz-cobre: color-mix(in srgb, var(--color-marca) 20%, transparent);
  --luz-azul: transparent;
  --luz-halo: color-mix(in srgb, var(--color-marca) 45%, transparent);
  --luz-borde: color-mix(in srgb, var(--color-marca) 70%, transparent);
  --luz-resplandor: color-mix(in srgb, var(--color-marca) 24%, transparent);
  --mancha-fondo-1: color-mix(in srgb, var(--color-marca) 50%, transparent);
}

/* ── Sin animaciones para quien las desactivó ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion: 0ms;
  }
  :root[data-estilo~="vidrio"] {
    --duracion-fondo-1: 0s;
    --duracion-fondo-2: 0s;
    --duracion-fondo-3: 0s;
  }
  :root[data-estilo~="cobre"] {
    --duracion-mancha: 0s;
    --duracion-mancha-2: 0s;
    --duracion-resplandor: 0s;
    --duracion-halo: 0s;
    --duracion-brillo: 0s;
    --duracion-sacudida: 0ms;
    --desenfoque-entrada: 0px;
  }
  :root[data-estilo~="tablero"] {
    --duracion-cifra: 0ms;
    --duracion-crecer: 0ms;
    --duracion-entrar: 0ms;
    --escalon: 0ms;
    --duracion-mover: 0ms;
    --duracion-salir: 0ms;
    --duracion-traza: 0ms;
    --duracion-tinta: 0ms;
    --duracion-nuevo: 0ms;
  }
}

/* ── Navegadores viejos sin color-mix(): tonos fijos de la paleta ── */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root, [data-paleta], [data-tema] {
    --color-velo: rgba(28, 25, 23, 0.45);
    --color-acento-tenue: var(--color-hundido);
    --color-acento-medio: var(--color-linea);
    --color-detalle-tenue: var(--color-hundido);
    --estado-por-confirmar-fondo: var(--color-hundido);
    --estado-atendida-fondo: var(--color-hundido);
    --aviso-exito-fondo: var(--color-hundido);
    --aviso-atencion-fondo: var(--color-hundido);
    --aviso-error-fondo: var(--color-hundido);
    --grafica-barra-suave: var(--color-linea);
    --calor-1: var(--color-linea);
    --calor-2: var(--color-linea-control);
    --calor-3: var(--color-acento-texto);
    --mancha-fondo-1: transparent;
  }
  [data-estilo~="tablero"] {
    --tablero-tarjeta: var(--dia-hoja);
    --sobre-destacada-suave: var(--color-sobre-acento);
    --sobre-destacada-fondo: transparent;
    --barra-media: var(--color-acento-texto);
    --barra-tenue: var(--color-linea-control);
  }
}