/* =====================================================================
   Kuan Yin Estética — Sistema de turnos
   Línea de casa de lujo: negro profundo, dorado antiguo, toques de
   marrón cognac y azul lapislázuli. Letras estoicas en mayúsculas
   espaciadas (como Zara o YSL), títulos en serif Didone (Bodoni),
   formas rectas y filetes finos; un meandro griego, apenas, como firma.
   Tema "noche" por defecto (en :root) y tema "día" (papel marfil).
   Colores de los turnos: anotado = naranja · llegó = verde
                          ausente = rosa · canceló = rojo
   Para cambiar colores, tocá solo las variables.
   ===================================================================== */

:root {
  /* ---------- MEDIANOCHE · negro azulado profundo, oro Versace y mar de lapislázuli ---------- */
  color-scheme: dark;
  --bg: #03050A;
  --bg-alto: #060912;
  --superficie: #0A0E18;
  --superficie-2: #0F1522;
  --superficie-3: #172033;
  --elevada: #0C111C;              /* menús y ventanas que flotan */
  --vidrio: rgba(3, 5, 10, .86);   /* barras fijas (con desenfoque) */
  --tinta: #F5F2EB;
  --tinta-suave: #B9BDC9;
  --tinta-tenue: #8189A0;
  --linea: rgba(196, 210, 255, .09);
  --linea-fuerte: rgba(196, 210, 255, .2);

  --oro: #D4AF55;
  --oro-claro: #EED493;
  --oro-hondo: #9C7A2E;
  --oro-suave: rgba(212, 175, 85, .13);
  --linea-oro: rgba(212, 175, 85, .42);
  --sobre-oro: #0A0805;
  /* oro en lámina (degradé de joya): para filetes, sellos y botones principales */
  --oro-foil: linear-gradient(135deg, #8C6A22 0%, #C9A24A 24%, #F3DC9B 48%, #E2C477 56%, #B8902F 76%, #8C6A22 100%);
  --oro-filete: linear-gradient(90deg, transparent, #9C7A2E 12%, #F3DC9B 50%, #9C7A2E 88%, transparent);
  --marron: #9C7A2E;
  --marron-claro: #C9B27A;
  --lapis: #2F64C0;
  --lapis-hondo: #0A1E4C;
  --lapis-claro: #8FB0E6;
  --sobre-lapis: #F3DC9B;
  /* "el mar": azul marino europeo que se abre en lapislázuli (sin motas) */
  --mar: linear-gradient(125deg, #030A1C 0%, #071A44 30%, #0F3279 62%, #1D56B0 100%);
  --mar-vivo: linear-gradient(125deg, #04102B 0%, #0A2563 38%, #1749A0 72%, #2A6BD0 100%);
  --sobre-mar: #F1DFA9;
  --sobre-mar-tenue: rgba(241, 223, 169, .74);
  --azul-cab: #0A1E4C;
  --sobre-azul: #F1DFA9;
  --sobre-azul-tenue: rgba(241, 223, 169, .74);
  --linea-azul: rgba(90, 140, 230, .22);

  /* Estados de los turnos: bien marcados, como colores primarios (amarillo · verde · fucsia · rojo) */
  --naranja: #FFB21A;
  --verde: #22C55E;
  --rosa: #FF2E9A;
  --rojo: #FF3B30;
  --gris: #8E887E;
  --sobre-estado: #0A0805;
  --f-naranja: color-mix(in srgb, var(--naranja) 17%, var(--superficie));
  --f-verde: color-mix(in srgb, var(--verde) 17%, var(--superficie));
  --f-rosa: color-mix(in srgb, var(--rosa) 17%, var(--superficie));
  --f-rojo: color-mix(in srgb, var(--rojo) 18%, var(--superficie));
  --f-gris: var(--superficie);

  /* Avisos */
  --ok-suave: color-mix(in srgb, var(--verde) 12%, var(--superficie));
  --mal-suave: color-mix(in srgb, var(--rojo) 12%, var(--superficie));
  --alerta: #E6B85C;
  --alerta-suave: color-mix(in srgb, #E6B85C 11%, var(--superficie));

  --sombra: 0 40px 100px rgba(0, 0, 0, .7), 0 0 0 1px rgba(196, 210, 255, .04);
  --sombra-chica: 0 14px 34px rgba(0, 0, 0, .45);
  /* formas redondeadas, como el iPhone */
  --r: 12px;          /* botones, campos */
  --r-caja: 24px;     /* tarjetas y ventanas */
  --r-widget: 28px;   /* widgets */
  --ease: cubic-bezier(.22, .61, .36, 1);

  --f-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Bodoni MT', 'Times New Roman', serif;
  --f-marca: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --f-texto: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --px-min: 1.4px; /* altura de un minuto en la grilla de la agenda */
  --alto-barra-cel: 0px;
  /* orla barroca (filete con volutas), esquinero y meandro griego, en oro */
  --orla: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' viewBox='0 0 160 16'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.1'%3E%3Cpath d='M0 8H58M102 8H160'/%3E%3Cpath d='M80 2.5 85.5 8 80 13.5 74.5 8Z'/%3E%3Cpath d='M74.5 8C70 8 66 5 62.5 5.5 60 6 59.5 9 61.5 10 63.5 11 65 9 64 8'/%3E%3Cpath d='M85.5 8C90 8 94 5 97.5 5.5 100 6 100.5 9 98.5 10 96.5 11 95 9 96 8'/%3E%3C/g%3E%3Ccircle cx='80' cy='8' r='1.3' fill='%23C9A24A'/%3E%3C/svg%3E");
  --esquinero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-width='1.1'%3E%3Cpath d='M1 25V9C1 4.5 4.5 1 9 1H25'/%3E%3Cpath d='M5 17C5 10 10 5 17 5'/%3E%3Cpath d='M5 17C7.5 17 8.5 15 7.5 13.8 6.5 12.8 5 13.6 5.4 14.8'/%3E%3C/g%3E%3Ccircle cx='17' cy='5' r='1.3' fill='%23C9A24A'/%3E%3C/svg%3E");
  --meandro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 9.5H20M14 9.5V1.5H6V6.5H11V4' fill='none' stroke='%23C9A24A' stroke-width='1.1'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  /* ---------- DÍA · blanco hueso, lapislázuli de mar y oro ---------- */
  color-scheme: light;
  --bg: #F6F2EA;
  --bg-alto: #FBF8F2;
  --superficie: #FFFDF8;
  --superficie-2: #F0EBE1;
  --superficie-3: #E4DDD0;
  --elevada: #FFFFFF;
  --vidrio: rgba(246, 242, 234, .9);
  --tinta: #0E1726;
  --tinta-suave: #36425A;
  --tinta-tenue: #5F687A;
  --linea: rgba(14, 23, 38, .11);
  --linea-fuerte: rgba(14, 23, 38, .25);
  --oro: #80601A;
  --oro-claro: #5E4510;
  --oro-hondo: #C9A24A;
  --oro-suave: rgba(176, 136, 52, .11);
  --linea-oro: rgba(160, 122, 40, .5);
  --sobre-oro: #0A0805;
  --oro-foil: linear-gradient(135deg, #7E5B17 0%, #B8902F 22%, #E9CE84 46%, #F6E3A8 53%, #C59B3C 72%, #8C6A22 100%);
  --oro-filete: linear-gradient(90deg, transparent, #B8902F 12%, #E9CE84 50%, #B8902F 88%, transparent);
  --marron: #173E8C;
  --marron-claro: #1F4A94;
  --lapis: #173E8C;
  --lapis-hondo: #0A1E4C;
  --lapis-claro: #2F6DB5;
  --sobre-lapis: #F1DFA9;
  /* el mar: del azul abisal al lapislázuli, como la piedra */
  --mar: linear-gradient(125deg, #030A1C 0%, #071A44 30%, #0F3279 62%, #1D56B0 100%);
  --mar-vivo: linear-gradient(125deg, #04102B 0%, #0A2563 38%, #1749A0 72%, #2A6BD0 100%);
  --sobre-mar: #F1DFA9;
  --sobre-mar-tenue: rgba(241, 223, 169, .74);
  --azul-cab: #0A1E4C;
  --sobre-azul: #F1DFA9;
  --sobre-azul-tenue: rgba(241, 223, 169, .74);
  --linea-azul: rgba(23, 62, 140, .24);
  --naranja: #A86A00;
  --verde: #0F7A37;
  --rosa: #D0157A;
  --rojo: #D4241B;
  --gris: #6B7385;
  --sobre-estado: #FFFFFF;
  --alerta: #8A5A0E;
  --alerta-suave: #F4E6C8;
  --sombra: 0 40px 90px rgba(10, 30, 76, .16);
  --sombra-chica: 0 10px 30px rgba(10, 30, 76, .09);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
html { scroll-padding-top: 130px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  font: 450 15.5px/1.55 var(--f-texto);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--oro-hondo) transparent; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; flex: none; }
:focus-visible { outline: 1px solid var(--oro); outline-offset: 3px; }
::selection { background: var(--oro); color: var(--sobre-oro); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contenedor { max-width: 1240px; margin: 0 auto; padding-inline: 16px; padding-block: 36px 130px; }
.contenedor-form { max-width: 1080px; }
.contenedor-nuevo { max-width: 1240px; }
.contenedor-ancho { max-width: 1760px; }
@media (min-width: 720px) { .contenedor { padding-inline: 40px; padding-block: 56px 80px; } }
@media (min-width: 720px) and (max-width: 899px) { .contenedor { padding-bottom: 130px; } }
.solo-cel, .txt-corto { display: none; }
@media (max-width: 719px) {
  .solo-compu { display: none !important; }
  .solo-cel { display: inline; }
  .txt-largo { display: none; }
  .txt-corto { display: inline; }
}

/* ---------- Tipografía ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 14px;
  font: 600 12px/1.3 var(--f-texto); letter-spacing: .32em; text-transform: uppercase;
  color: var(--oro); font-variant-numeric: tabular-nums;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; flex: none; }
.titulo, .titulo-fecha {
  margin: 0;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(40px, 5.6vw, 76px); line-height: .98; letter-spacing: -.015em;
  text-wrap: balance;
}
.titulo { margin-bottom: 40px; }
.titulo-fecha::first-letter { text-transform: uppercase; }
.texto { max-width: 70ch; color: var(--tinta-suave); margin: 0; }
.ayuda { font-size: 13px; color: var(--tinta-suave); margin: 0; }
.resumen { margin: 0; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.error-texto {
  margin: 0; padding: 11px 14px; border-left: 2px solid var(--rojo);
  background: var(--mal-suave); color: var(--rojo); font-weight: 500; font-size: 14px;
}
.aviso-texto { background: var(--alerta-suave); color: var(--alerta); border-left-color: var(--alerta); }
.ok-texto { color: var(--verde); font-weight: 600; }
.alerta-texto { color: var(--rojo); }
.alerta-texto b { font-weight: 600; letter-spacing: .04em; }
.enlace {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--oro); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.enlace:hover { color: var(--oro-claro); }
.enlace-chico { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.cuenta-num { font-family: var(--f-texto); font-size: 14px; color: var(--tinta-tenue); letter-spacing: .1em; }
.opcional { font-style: normal; font-weight: 400; color: var(--tinta-tenue); text-transform: none; letter-spacing: 0; }
.meandro { display: block; height: 10px; background: var(--meandro) repeat-x center / 20px 10px; opacity: .6; }

/* ---------- Marca ---------- */
.marca { display: inline-grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; color: var(--tinta); text-decoration: none; }
.loto { width: 26px; height: 18px; grid-row: span 2; fill: var(--oro); stroke: none; }
.loto path:nth-child(2), .loto path:nth-child(3) { opacity: .55; }
.marca-nombre { font: 500 15px/1 var(--f-marca); letter-spacing: .34em; text-transform: uppercase; color: var(--tinta); white-space: nowrap; }
.marca-sub { font: 400 9px/1.7 var(--f-texto); letter-spacing: .5em; text-transform: uppercase; color: var(--oro); white-space: nowrap; }
.marca-grande { justify-items: center; grid-template-columns: 1fr; row-gap: 10px; }
.marca-grande .loto { width: 52px; height: 34px; grid-row: auto; }
.marca-grande .marca-nombre { font-size: 28px; letter-spacing: .38em; margin-right: -.38em; }
.marca-grande .marca-sub { font-size: 10px; margin-right: -.5em; }

/* ---------- Botones (rectos, en mayúsculas) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 0 24px; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font: 600 12.5px/1.2 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.boton:disabled { opacity: .4; cursor: default; }
.boton-principal { background: var(--oro); color: var(--sobre-oro); border-color: var(--oro); }
.boton-principal:hover:not(:disabled) { background: var(--oro-claro); border-color: var(--oro-claro); }
:root[data-theme="light"] .boton-principal { background: var(--tinta); border-color: var(--tinta); color: #F4EFE6; }
:root[data-theme="light"] .boton-principal:hover:not(:disabled) { background: var(--oro); border-color: var(--oro); }
.boton-suave { background: transparent; border-color: var(--linea-oro); color: var(--oro-claro); }
.boton-suave:hover:not(:disabled) { border-color: var(--oro); background: var(--oro-suave); }
.boton-peligro { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.boton-peligro:hover:not(:disabled) { filter: brightness(1.08); }
.boton-no { color: var(--tinta-suave); border-color: var(--linea-fuerte); }
.boton-ancho { width: 100%; }
@media (max-width: 560px) {
  .boton { white-space: normal; text-align: center; padding-block: 10px; line-height: 1.35; }
  .form-acciones-izq .boton { flex: 1 1 100%; }
}
.boton-grande { min-height: 52px; padding: 0 34px; font-size: 12px; }
.boton-icono {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r);
  background: transparent; border: 1px solid transparent; color: var(--tinta-suave); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.boton-icono:hover { color: var(--oro-claro); border-color: var(--linea-oro); }
.boton-icono.chico { width: 32px; height: 32px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 12px; border-radius: var(--r); cursor: pointer;
  background: transparent; border: 1px solid var(--linea-fuerte); color: var(--tinta);
  font-size: 12.5px; font-weight: 400; letter-spacing: .04em; white-space: nowrap; text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--oro); color: var(--oro-claro); }
.chip:disabled { opacity: .5; cursor: progress; }
.chip[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--sobre-oro); font-weight: 500; }
.chip-ok { color: var(--verde); }
.chip-mal { color: var(--rojo); }
.chip-anulado, .chip-sin { color: var(--tinta-suave); border-style: dashed; }

/* Botones de estado: Anotado (naranja) · Llegó (verde) · Ausente (rosa) · Canceló (rojo) */
.botones-estado { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.eb {
  --c: var(--oro);
  display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 0 10px;
  border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  background: transparent; color: var(--c); cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: .04em; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.eb:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
.eb[aria-pressed="true"], .eb[aria-expanded="true"] { background: var(--c); border-color: var(--c); color: var(--sobre-estado); font-weight: 600; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
.eb:disabled { opacity: .5; cursor: progress; }
.eb-anotado, .eb-reactivar { --c: var(--naranja); }
.eb-llego { --c: var(--verde); }
.eb-ausente { --c: var(--rosa); }
.eb-cancelo { --c: var(--rojo); }
.eb-anular { --c: var(--gris); }
.estado-txt { font-size: 12px; font-weight: 500; color: var(--rojo); white-space: nowrap; }
.fila-error .estado-txt { color: var(--gris); }

/* ---------- Aviso de versión, toast ---------- */
.aviso-demo {
  padding: 7px 16px; text-wrap: balance; text-align: center; font: 600 11.5px/1.5 var(--f-texto); letter-spacing: .26em; text-transform: uppercase;
  background: var(--superficie); color: var(--oro); border-bottom: 1px solid var(--linea);
}
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 70;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - 32px); padding: 14px 24px; border-radius: var(--r);
  background: var(--azul-cab); color: var(--sobre-azul); border: 1px solid var(--linea-oro); border-left: 2px solid var(--oro);
  font: 500 12px/1.45 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--sombra);
  animation: aparecer .3s var(--ease);
}
@media (min-width: 900px) { .toast { bottom: 36px; } }
@keyframes aparecer { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- La barrita de mensajes (arriba de todo, lapislázuli y oro) ---------- */
.cartelera {
  position: relative; z-index: 35; display: flex; align-items: stretch; height: 32px;
  background: var(--lapis-hondo); color: var(--sobre-lapis); border-bottom: 1px solid rgba(194, 160, 98, .28);
}
.cartelera-pista {
  flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.cart-cinta { display: flex; width: max-content; animation: cinta var(--dur, 40s) linear infinite; }
.cartelera:hover .cart-cinta, .cartelera:focus-within .cart-cinta { animation-play-state: paused; }
.cart-tira { display: inline-flex; align-items: center; white-space: nowrap; }
.cart-item { font: 600 12px/1 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; padding-inline: 4px; }
.cart-item i { font-style: normal; opacity: .62; margin-left: 10px; letter-spacing: .18em; }
.cart-item i::before { content: '— '; }
.cart-sep { color: var(--oro); padding-inline: 26px; font-size: 9px; }
.cart-vacio { padding-inline: 18px; font: 600 11.5px/1 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cartelera-boton {
  flex: none; border: 0; border-left: 1px solid rgba(194, 160, 98, .3); background: transparent; color: inherit; cursor: pointer;
  padding: 0 16px; font: 600 11.5px/1 var(--f-texto); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}
.cartelera-boton:hover, .cartelera-boton[aria-expanded="true"] { background: rgba(194, 160, 98, .14); }
.cartelera-panel {
  position: absolute; right: 12px; top: calc(100% + 8px); z-index: 60; width: min(460px, calc(100vw - 24px));
  display: grid; gap: 12px; padding: 18px; background: var(--elevada); color: var(--tinta);
  border: 1px solid var(--linea-oro); box-shadow: var(--sombra);
}
.cartelera-form { display: flex; gap: 8px; }
.cartelera-form input {
  flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--linea-fuerte); background: var(--superficie-2);
}
.cartelera-form input:focus { outline: none; border-color: var(--oro); }
.cartelera-lista { list-style: none; margin: 0; padding: 0; display: grid; max-height: 260px; overflow: auto; }
.cartelera-lista li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.cartelera-lista li > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cartelera-lista small { color: var(--tinta-tenue); font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { .cart-cinta { animation-duration: 240s !important; } }
@media (max-width: 480px) {
  .cartelera-form { flex-wrap: wrap; } .cartelera-form .boton { width: 100%; }
  .aviso-demo { font-size: 9px; letter-spacing: .14em; padding-block: 6px; }
}

/* ---------- Login y página pública ---------- */
.login, .pedir {
  min-height: 100vh; display: grid; place-items: center; padding-inline: 16px; padding-block: 40px;
  background: radial-gradient(70% 45% at 50% 0%, color-mix(in srgb, var(--lapis) 26%, transparent), transparent 70%), var(--bg);
}
:root[data-theme="light"] .login, :root[data-theme="light"] .pedir { background: radial-gradient(70% 45% at 50% 0%, rgba(31, 59, 112, .08), transparent 70%), var(--bg); }
.login-caja {
  position: relative; width: 100%; max-width: 420px; display: grid; gap: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--azul-cab) 55%, var(--superficie)), var(--superficie) 210px);
  border: 1px solid var(--linea-oro); border-top: 2px solid var(--oro); border-radius: var(--r);
  padding: 58px 36px 36px; box-shadow: var(--sombra);
}
.login-caja::before { content: ''; position: absolute; left: 24px; right: 24px; top: 20px; height: 10px; background: var(--meandro) repeat-x center / 20px 10px; opacity: .5; }
@media (max-width: 420px) { .login-caja { padding-inline: 22px; } }
.login-titulo { margin: 4px 0 12px; text-align: center; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 24px; color: var(--tinta-suave); }

/* ---------- Barra superior: la marca en el medio, como en las casas de moda ---------- */
.barra {
  position: sticky; top: 0; z-index: 30;
  background: var(--vidrio);
  backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid var(--linea-oro);
}
/* debajo de todo, un filete de mar: el lapislázuli */
.barra::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 3px; background: var(--mar); pointer-events: none; }
.barra-in {
  max-width: 1760px; margin: 0 auto; padding: 12px 40px 6px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px;
}
.barra-lado { display: flex; align-items: center; min-width: 0; }
.barra-izq { justify-self: start; gap: 16px; }
.barra-der { justify-self: end; gap: 2px; }
.barra-saludo { display: grid; gap: 4px; min-width: 0; }
.usuario-nombre { display: flex; align-items: center; min-width: 0; font: 600 11.5px/1.2 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.usuario-rol { flex: none; font-style: normal; margin-left: 10px; padding: 3px 7px 2px; border: 1px solid var(--linea-oro); color: var(--oro); font-size: 10px; letter-spacing: .18em; }
.barra-fecha { font: italic 500 15.5px/1.2 var(--f-display); color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-botones { display: flex; gap: 2px; padding-left: 12px; border-left: 1px solid var(--linea); }

.marca-centro { justify-self: center; grid-template-columns: auto; justify-items: center; row-gap: 6px; padding: 2px 8px; }
.marca-centro .loto { grid-row: auto; width: 30px; height: 20px; }
.marca-centro .marca-nombre { font: 500 23px/1 var(--f-marca); letter-spacing: .42em; margin-right: -.42em; }
.marca-centro .marca-sub { font: 600 10px/1.3 var(--f-texto); letter-spacing: .5em; margin-right: -.5em; }
/* la palabra de la marca: lapislázuli de día, oro de noche */
.marca-centro .marca-nombre, .marca-grande .marca-nombre { background: var(--oro-foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .marca-centro .marca-nombre, :root[data-theme="light"] .marca-grande .marca-nombre { background: linear-gradient(100deg, #050F27, #0A1E4C 40%, #1F57A3 100%); -webkit-background-clip: text; background-clip: text; }

/* herramientas: chat, calculadora y juegos */
.boton-herr {
  position: relative; width: auto; height: auto; min-width: 58px; padding: 7px 8px 6px;
  display: inline-grid; justify-items: center; gap: 5px; color: var(--tinta-suave);
}
.boton-herr svg { width: 21px; height: 21px; color: var(--lapis); stroke-width: 1.35; }
:root:not([data-theme="light"]) .boton-herr svg { color: var(--oro); }
.herr-nombre { font: 600 10.5px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; }
.boton-herr:hover, .boton-herr[aria-expanded="true"] { color: var(--tinta); border-color: var(--linea-oro); background: var(--oro-suave); }
.boton-herr[aria-expanded="true"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--oro-foil); }
.boton-herr .badge { position: absolute; top: -3px; right: 6px; }
.boton-herr .chat-punto { right: 14px; bottom: auto; top: 6px; }

/* las secciones, centradas abajo de la marca, con un rombito de oro entre una y otra */
.pestanas { display: flex; justify-content: center; flex-wrap: nowrap; gap: 2px; max-width: 1760px; margin: 0 auto; padding: 0 40px; }
.pestana {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 14px 13px; border: 0; background: transparent; cursor: pointer;
  color: var(--tinta-suave); font: 600 11.5px/1 var(--f-texto); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  transition: color .2s var(--ease);
}
.pestana svg { display: none; }
.pestana:hover { color: var(--tinta); }
.pestana[aria-current="page"] { color: var(--tinta); }
.pestana[aria-current="page"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--oro-foil); }
.pestana + .pestana::before { content: ''; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; background: var(--oro-hondo); transform: translateY(-50%) rotate(45deg); opacity: .65; }
.pestana-gestion { color: var(--oro); }
.pestana-gestion[aria-current="page"] { color: var(--oro); }
.pestana-mas { display: none; }
@media (min-width: 900px) and (max-width: 1320px) {
  .pestana { letter-spacing: .16em; padding-inline: 10px; }
  .pestana[aria-current="page"]::after { left: 10px; right: 10px; }
  .pestana .txt-largo { display: none; }
  .pestana .txt-corto { display: inline; }
  .barra-fecha { display: none; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .barra-in { padding-inline: 24px; gap: 14px; }
  .pestanas { padding-inline: 16px; }
  .pestana { letter-spacing: .12em; padding-inline: 8px; font-size: 11px; }
  .herr-nombre { display: none; }
  .boton-herr { min-width: 40px; padding: 8px; }
  .usuario-nombre { max-width: 16ch; }
  .usuario-rol { display: none; }
  .marca-centro .marca-nombre { font-size: 20px; letter-spacing: .34em; margin-right: -.34em; }
}

/* Tablet y celular: la barra de arriba no se queda pegada; las secciones van abajo, como una app */
@media (max-width: 899px) {
  :root { --alto-barra-cel: 70px; }
  .barra { position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .barra-in { padding: 14px 12px 8px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marca marca" "izq der"; gap: 10px 8px; }
  .marca-centro { grid-area: marca; }
  .marca-centro .marca-nombre { font-size: 20px; letter-spacing: .36em; margin-right: -.36em; }
  .barra-izq { grid-area: izq; gap: 8px; }
  .barra-der { grid-area: der; gap: 0; }
  .barra-saludo { display: none; }
  .barra-botones { padding-left: 0; border-left: 0; }
  .boton-herr { min-width: 48px; padding: 6px 4px 5px; gap: 4px; }
  .boton-herr svg { width: 20px; height: 20px; }
  .herr-nombre { font-size: 10px; letter-spacing: .08em; }
  .pestanas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; max-width: none;
    flex-wrap: wrap; justify-content: space-around; gap: 0;
    padding: 6px 2px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--mar); background-color: var(--azul-cab);
    border-top: 1px solid var(--oro-hondo);
  }
  .pestana + .pestana::before { display: none; }
  .pestana { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 5px; padding: 6px 1px; font-size: 10px; letter-spacing: .08em; color: var(--sobre-mar-tenue); }
  .pestana:hover { color: var(--sobre-mar); }
  .pestana[aria-current="page"], .pestana-gestion[aria-current="page"] { color: #FFF6DE; }
  .pestana svg { display: block; width: 22px; height: 22px; }
  .pestana[aria-current="page"]::after { top: -7px; bottom: auto; left: 28%; right: 28%; }
  .pestana > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pestana .txt-largo { display: none; }
  .pestana .txt-corto { display: inline; }
  .pestana.secundaria { display: none; }
  .pestana-mas { display: inline-flex; }
  .pestanas:has(.secundaria[aria-current="page"]) .pestana-mas { color: #FFF6DE; }
  /* "Más": las secciones que no entran suben como una hoja sobre la barra */
  .pestanas.mas-abierto { padding-top: 0; box-shadow: 0 0 0 100vmax rgba(5, 15, 39, .55); }
  .pestanas.mas-abierto .pestana.secundaria:not([hidden]) {
    display: flex; order: -1; flex: 1 1 100%; flex-direction: row; justify-content: flex-start; gap: 16px;
    min-height: 56px; padding: 0 24px; font-size: 12px; letter-spacing: .22em;
    border-bottom: 1px solid rgba(241, 223, 169, .16);
  }
  .pestanas.mas-abierto .pestana.secundaria svg { width: 19px; height: 19px; color: var(--sobre-mar); }
  .pestanas.mas-abierto .pestana.secundaria[aria-current="page"]::after { top: 50%; bottom: auto; left: 0; right: auto; width: 2px; height: 22px; transform: translateY(-50%); }
  .pestanas.mas-abierto .pestana-mas { color: #FFF6DE; }
  .pestanas.mas-abierto .pestana:not(.secundaria) { padding-top: 12px; }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Selector de fecha y hora ---------- */
.selector-fecha { position: relative; display: inline-flex; align-items: center; }
.input-fecha {
  width: 158px; min-height: 40px; padding: 0 42px 0 14px; border-radius: var(--r);
  border: 1px solid var(--linea-fuerte); background: transparent;
  font-variant-numeric: tabular-nums; letter-spacing: .08em;
}
.campo .selector-fecha { display: flex; }
.campo .input-fecha { width: 100%; min-height: 46px; background: var(--superficie-2); }
.input-fecha[aria-invalid="true"] { border-color: var(--rojo); }
.boton-cal {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 32px; border-radius: var(--r);
  border: 0; background: transparent; color: var(--oro); cursor: pointer;
}
.boton-cal:hover { background: var(--oro-suave); }
.pop-cal {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 45;
  width: 316px; max-width: calc(100vw - 32px); padding: 16px;
  background: var(--elevada); border: 1px solid var(--linea-oro); border-radius: var(--r); box-shadow: var(--sombra);
}
.campo .pop-cal { left: 0; right: auto; }
.pc-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pc-cab strong { font-family: var(--f-display); font-weight: 500; font-size: 22px; text-transform: capitalize; }
.pc-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.pc-sem { text-align: center; font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sobre-azul); background: var(--azul-cab); padding-block: 7px; }
.pc-grilla .dia {
  display: grid; justify-items: center; align-content: center; gap: 0; min-height: 38px; padding: 2px 0;
  border: 1px solid transparent; border-radius: var(--r); background: transparent; cursor: pointer;
  font-variant-numeric: tabular-nums; font-size: 14px;
}
.pc-grilla .dia small { font-size: 9.5px; line-height: 1; color: var(--oro); font-weight: 600; min-height: 10px; }
.pc-grilla .dia:hover { border-color: var(--linea-oro); }
.pc-grilla .dia.es-hoy { border-color: var(--lapis-claro); }
.pc-grilla .dia.elegido { background: var(--oro); color: var(--sobre-oro); }
.pc-grilla .dia.elegido small { color: var(--sobre-oro); }
.pc-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.pc-pie .ayuda { font-size: 11px; text-align: right; }

.selector-hora { display: flex; align-items: center; gap: 4px; }
.selector-hora select {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 8px; border-radius: var(--r);
  border: 1px solid var(--linea-fuerte); background: var(--superficie-2); font-variant-numeric: tabular-nums; text-align: center;
}
.selector-hora select option { background: var(--elevada); }
.selector-hora select[aria-invalid="true"] { border-color: var(--rojo); }
.selector-hora span { color: var(--oro); }

/* ---------- Control segmentado ---------- */
.segmentado {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r);
}
.segmentado label { position: relative; min-width: 0; }
.segmentado label + label { border-left: 1px solid var(--linea-fuerte); }
.segmentado input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentado span {
  display: grid; place-items: center; min-height: 38px; padding-inline: 16px;
  font: 600 12px/1.2 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); white-space: nowrap; text-align: center;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.segmentado label:hover span { color: var(--tinta); }
.segmentado input:checked + span { background: var(--oro); color: var(--sobre-oro); }
:root[data-theme="light"] .segmentado input:checked + span { background: var(--tinta); color: #F4EFE6; }
.segmentado input:focus-visible + span { outline: 1px solid var(--oro); outline-offset: 2px; }
.segmentado-chico span { min-height: 32px; font-size: 10px; padding-inline: 13px; letter-spacing: .16em; }
.segmentado-ancho { margin-bottom: 22px; max-width: 520px; }
.segmentado-canal { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmentado-canal span { padding-inline: 8px; letter-spacing: .14em; }
@media (max-width: 520px) {
  .segmentado-canal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segmentado-canal label:nth-child(3) { border-left: 0; }
  .segmentado-canal label:nth-child(n+3) { border-top: 1px solid var(--linea-fuerte); }
}
@media (max-width: 400px) { .segmentado span { padding-inline: 10px; letter-spacing: .12em; } }

/* ---------- Agenda ---------- */
.agenda-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 28px; margin-bottom: 30px; }
.agenda-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.navegador { display: flex; align-items: center; gap: 4px; }
.cargando { opacity: .6; transition: opacity .2s; }

/* avisos arriba de la agenda: pedidos (lapislázuli) y cumpleaños (oro) */
.avisos-agenda { display: grid; gap: 8px; margin-bottom: 18px; }
.avisos-agenda:not(:has(> :not([hidden]))) { display: none; }
.aviso-linea {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 13px 18px; border-radius: var(--r);
  font-size: 14px; text-align: left; width: 100%;
}
.aviso-pedidos {
  border: 1px solid color-mix(in srgb, var(--oro) 35%, transparent); background: var(--lapis-hondo); color: var(--sobre-lapis); cursor: pointer;
  font: 600 12px/1.4 var(--f-texto); letter-spacing: .2em; text-transform: uppercase;
}
.aviso-pedidos b { font: 500 22px/1 var(--f-display); letter-spacing: 0; color: #fff; }
:root[data-theme="light"] .aviso-pedidos b { color: #fff; }
.aviso-pedidos:hover { border-color: var(--oro); }
.aviso-cumples { border: 1px solid var(--linea-oro); background: var(--oro-suave); }
.aviso-icono { color: var(--oro); }

.tablero { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 24px; border: 1px solid var(--linea); }
.tile {
  --c: var(--oro);
  display: grid; align-content: start; gap: 6px; min-width: 0; text-align: left;
  padding: 20px 22px; cursor: pointer; border: 0; border-left: 1px solid var(--linea); border-radius: 0;
  background: var(--superficie); position: relative;
  transition: background-color .25s var(--ease);
}
.tile:first-child { border-left: 0; }
.tile::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.tile:hover { background: var(--superficie-2); }
.tile[aria-pressed="true"]::after { transform: scaleX(1); }
.tile-l { display: flex; align-items: center; gap: 8px; font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-suave); }
.tile-l::before { content: ''; width: 6px; height: 6px; background: var(--c); transform: rotate(45deg); flex: none; }
.tile-n { font-family: var(--f-display); font-weight: 500; font-size: 54px; line-height: 1; color: var(--c); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.tile small { font-size: 12px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-total { --c: var(--oro-claro); background: linear-gradient(155deg, var(--azul-cab), color-mix(in srgb, var(--azul-cab) 55%, var(--superficie)) 85%); }
.tile-total .tile-l, .tile-total small { color: var(--sobre-azul-tenue); }
.tile-total:hover { background: linear-gradient(155deg, color-mix(in srgb, var(--azul-cab) 85%, var(--oro) 15%), color-mix(in srgb, var(--azul-cab) 55%, var(--superficie)) 85%); }
:root[data-theme="light"] .tile-total { --c: #F1DDAE; background: linear-gradient(155deg, #1F3B70, #2B4C8A); }
:root[data-theme="light"] .tile-total:hover { background: linear-gradient(155deg, #253F75, #34558F); }
.tile-reservado { --c: var(--naranja); }
.tile-asistio { --c: var(--verde); }
.tile-no_vino { --c: var(--rosa); }
.tile-cancelado { --c: var(--rojo); }
.tablero .chip-anulado { grid-column: 1 / -1; justify-self: start; margin: 10px 22px 14px; }
@media (max-width: 719px) {
  .tablero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile { padding: 12px 10px; border-top: 1px solid var(--linea); }
  .tile-n { font-size: 34px; }
  .tile-l { font-size: 8px; letter-spacing: .12em; gap: 5px; }
  .tile-l::before { width: 5px; height: 5px; }
  .tile small { white-space: normal; font-size: 10.5px; }
  .tile-total { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; border-left: 0; border-top: 0; }
  .tile-reservado { border-left: 0; }
}

.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtros:empty { display: none; }
.filtros-derecha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.mini-campo { display: inline-flex; align-items: center; gap: 10px; font: 600 11.5px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); }
.mini-etiqueta { font: 600 11.5px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); }
.mini-campo select, .input-mini, .select-mini {
  min-height: 36px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tinta);
  font: 400 13.5px var(--f-texto); letter-spacing: .02em; text-transform: none;
}
.mini-campo select option, .select-mini option { background: var(--elevada); }
.input-mini { width: 220px; }
.mini-campo select:focus, .input-mini:focus, .select-mini:focus { outline: none; border-color: var(--oro); }

.vacio {
  display: grid; justify-items: center; gap: 16px; text-align: center;
  padding: 70px 16px; margin-bottom: 16px; background: var(--superficie); border: 1px solid var(--linea);
}
.vacio-titulo { margin: 0; font-family: var(--f-display); font-style: italic; font-size: 26px; max-width: 32ch; }

/* Leyenda de colores */
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 14px; font: 600 11.5px var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.ley { width: 14px; height: 9px; display: inline-block; }
.ley-libre { border: 1px dashed var(--linea-oro); }
.ley-reservado { background: var(--naranja); }
.ley-asistio { background: var(--verde); }
.ley-no_vino { background: var(--rosa); }
.ley-nuevo { border: 1.5px dashed var(--verde); background: color-mix(in srgb, var(--verde) 18%, transparent); }

/* ---------- Semáforo de la clienta ---------- */
.semaforo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; flex: none; }
.semaforo-verde { background: var(--verde); }
.semaforo-amarillo { background: var(--alerta); }
.semaforo-rojo { background: var(--rojo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo) 25%, transparent); }
.semaforo-nueva { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lapis-claro); }
.semaforo-chip {
  display: inline-flex; align-items: center; padding: 3px 10px 3px 8px; border: 1px solid var(--linea-fuerte); border-radius: var(--r);
  font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px;
}
.semaforo-chip .semaforo { margin-right: 7px; }
.semaforo-chip.semaforo-verde, .semaforo-chip.semaforo-amarillo, .semaforo-chip.semaforo-rojo, .semaforo-chip.semaforo-nueva { background: transparent; box-shadow: none; }
.semaforo-chip.semaforo-verde { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.semaforo-chip.semaforo-amarillo { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 45%, transparent); }
.semaforo-chip.semaforo-rojo { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 50%, transparent); }
.semaforo-chip.semaforo-nueva { color: var(--lapis-claro); border-color: color-mix(in srgb, var(--lapis-claro) 45%, transparent); }
.alerta-mini {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 7px; vertical-align: 1px;
  background: var(--rojo); color: #fff; font: 700 10px/1 var(--f-texto); font-style: normal;
}
.cumple-mini { color: var(--oro); margin-right: 6px; font-size: 11px; font-style: normal; }

/* ---------- Planilla del día (vista principal, tipo Excel) ---------- */
.tabla-marco {
  position: relative; overflow: auto; min-width: 0; max-width: 100%;
  border: 1px solid var(--linea); background: var(--superficie);
}
.planilla-marco { max-height: calc(100vh - 160px); min-height: 240px; }
.planilla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.planilla th {
  position: sticky; top: 0; z-index: 3;
  text-align: left; padding: 0; white-space: nowrap;
  background: var(--azul-cab); color: var(--sobre-azul-tenue);
  font: 600 11px/1 var(--f-texto); letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 1px solid var(--oro); border-right: 1px solid var(--linea-azul);
}
.planilla th:not(:has(button)) { padding: 14px 12px; }
.th-orden {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 14px 12px; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left;
}
.th-orden:hover, .th-orden[aria-sort], .planilla th[aria-sort] .th-orden { color: var(--sobre-azul); }
.th-orden i { font-style: normal; font-size: 8px; color: var(--oro); }
.planilla td {
  padding: 9px 12px; white-space: nowrap; vertical-align: middle;
  border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea);
  background: var(--fila, var(--superficie));
}
.planilla th:last-child, .planilla td:last-child { border-right: 0; }
.planilla tbody tr { cursor: pointer; }
.planilla tbody tr.fila:hover td { background: color-mix(in srgb, var(--tinta) 5%, var(--fila, var(--superficie))); }

/* color de cada renglón según el estado */
.fila-reservado { --fila: var(--f-naranja); --c: var(--naranja); }
.fila-asistio { --fila: var(--f-verde); --c: var(--verde); }
.fila-no_vino { --fila: var(--f-rosa); --c: var(--rosa); }
.fila-cancelado { --fila: var(--f-rojo); --c: var(--rojo); }
.fila-error { --fila: var(--f-gris); --c: var(--gris); }
.planilla .fila td:first-child { box-shadow: inset 4px 0 0 var(--c); }
.planilla .fila .c-hora { color: var(--c); }
.planilla .fila-reservado .c-hora { color: var(--tinta); }
.planilla .fila-cancelado .c-clienta, .planilla .fila-error .c-clienta { text-decoration: line-through; text-decoration-thickness: 1px; }
.planilla .fila-error td { color: var(--tinta-tenue); }

/* columnas fijas a la izquierda cuando la planilla se desliza de costado */
.planilla .c-n { position: sticky; left: 0; z-index: 1; width: 44px; min-width: 44px; text-align: right; color: var(--tinta-tenue); font-size: 12px; }
.planilla .c-hora { position: sticky; left: 44px; z-index: 1; width: 120px; min-width: 120px; max-width: 120px; font-weight: 500; letter-spacing: .04em; }
.planilla .c-hora span { font-weight: 400; color: var(--tinta-suave); }
.planilla .c-clienta { position: sticky; left: 164px; z-index: 1; font-weight: 500; min-width: 190px; box-shadow: 1px 0 0 var(--linea-fuerte); }
.planilla th.c-n, .planilla th.c-hora, .planilla th.c-clienta { z-index: 4; }
.planilla th.c-n { text-align: right; }
.planilla td.c-dni, .planilla td.c-celular { color: var(--tinta-suave); font-size: 13px; }
.planilla .c-sena { text-align: right; }
.planilla td.c-sena { color: var(--oro-claro); }
.planilla td.c-servicio { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.planilla td.c-notas { max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--tinta-suave); }
.planilla td.c-rec { font-size: 12.5px; color: var(--naranja); }
.planilla td.c-rec.rec-enviado { color: var(--verde); }
.planilla td.c-rec.rec-error { color: var(--rojo); }
.planilla td.c-rec.rec-nada { color: var(--tinta-tenue); }
.planilla td.c-anoto { color: var(--marron-claro); font-size: 13px; min-width: 120px; }
.planilla .c-estado { min-width: 236px; }
.planilla .c-prof { cursor: pointer; min-width: 150px; }
.planilla .c-prof:hover { box-shadow: inset 0 0 0 1px var(--linea-oro); }
.planilla .c-prof.sin { color: var(--tinta-tenue); font-style: italic; }
.planilla .c-prof.editando { padding: 3px; }
.celda-input {
  width: 100%; min-width: 170px; min-height: 32px; padding: 0 8px; border-radius: var(--r);
  border: 1px solid var(--oro); background: var(--superficie-2); color: var(--tinta);
}
.celda-input:focus { outline: none; }
.fila-panel td { padding: 12px 12px 14px 58px; cursor: default; }
.panel-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-fila-titulo { font: 600 11.5px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--rojo); margin-right: 6px; }
.panel-fila .input-mini { width: 220px; }

/* ---------- Grilla: una columna por profesional o por servicio ---------- */
.grilla-marco {
  overflow: auto; max-height: calc(100vh - 160px); min-height: 360px;
  border: 1px solid var(--linea); background: var(--superficie);
}
.grilla { display: grid; position: relative; min-width: 100%; }
.grilla-cab {
  position: sticky; top: 0; z-index: 3;
  padding: 12px 12px 10px; border-bottom: 1px solid var(--oro); border-left: 1px solid var(--linea-azul);
  background: var(--azul-cab); color: var(--sobre-azul);
  display: grid; gap: 3px; min-width: 0;
}
.gc-nombre { font: 600 12px/1.3 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 18px; }
.gc-sub small { font-size: 11.5px; color: var(--sobre-azul-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-sub b { margin-left: auto; font: 500 16px/1 var(--f-display); color: var(--sobre-azul); }
.grilla-cab.cab-sin .gc-nombre { font-style: italic; color: var(--sobre-azul-tenue); }
.grilla-cab.cab-elegida { background: color-mix(in srgb, var(--oro) 22%, var(--azul-cab)); box-shadow: inset 0 -3px 0 var(--oro); }
.grilla-cab.cab-elegida .gc-nombre { color: #FFF3D6; }
.grilla-cab-horas { border-left: 0; left: 0; z-index: 5; }
.col-horas { position: sticky; left: 0; z-index: 2; background: var(--superficie); border-right: 1px solid var(--linea); }
.hora-marca {
  position: absolute; right: 8px; transform: translateY(-50%);
  font-size: 11px; letter-spacing: .06em; color: var(--tinta-tenue); font-variant-numeric: tabular-nums;
}
.col {
  position: relative; border-left: 1px solid var(--linea); cursor: copy;
  background-image: repeating-linear-gradient(to bottom, var(--linea) 0 1px, transparent 1px calc(var(--px-col, var(--px-min)) * 60));
  background-position: 0 -0.5px;
}
.col-sin { background-color: color-mix(in srgb, var(--tinta) 2%, transparent); cursor: default; }
.col-elegida { background-color: color-mix(in srgb, var(--oro) 5%, transparent); }
.col-ahora { position: absolute; left: 0; right: 0; height: 1px; background: var(--lapis-claro); z-index: 4; pointer-events: none; }
.col-ahora::before { content: ''; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--lapis-claro); }

/* espacio libre: se toca para anotar un turno ahí */
.libre {
  position: absolute; z-index: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px;
  padding: 5px 8px; border-radius: var(--r); cursor: pointer; text-align: left; overflow: hidden;
  border: 1px dashed var(--linea-oro); background: transparent; color: var(--oro);
  font-size: 11px; line-height: 1.25;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.libre span { font-weight: 500; letter-spacing: .2em; text-transform: uppercase; font-size: 9.5px; }
.libre small { color: var(--tinta-tenue); font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap; }
.libre.corto { flex-direction: row; align-items: center; gap: 6px; padding-block: 1px; }
.libre:hover { background: var(--oro-suave); border-style: solid; border-color: var(--oro); }
.libre:hover small { color: var(--oro-claro); }

.bloque-turno {
  position: absolute; z-index: 1;
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
  padding: 5px 8px 5px 10px; border-radius: var(--r); cursor: pointer; text-align: left;
  border: 0; box-shadow: inset 4px 0 0 var(--c, var(--oro));
  background: color-mix(in srgb, var(--c, var(--oro)) 24%, var(--superficie)); color: var(--tinta);
  font-size: 12.5px; line-height: 1.3;
  transition: box-shadow .2s var(--ease);
}
.bloque-turno:hover { z-index: 2; box-shadow: inset 4px 0 0 var(--c), 0 0 0 1px var(--c), var(--sombra-chica); }
.bloque-turno .bt-hora { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c); letter-spacing: .04em; }
.bloque-turno .bt-nombre { font-weight: 500; font-size: 13px; }
.bloque-turno .bt-serv { color: var(--tinta-suave); }
.bloque-turno .bt-nombre, .bloque-turno .bt-serv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-linea { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bloque-turno .bt-anoto { color: var(--marron-claro); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloque-turno.medio .bt-serv, .bloque-turno.medio .bt-anoto, .bloque-turno.corto .bt-anoto { display: none; }
.bloque-turno.corto { flex-direction: row; align-items: center; gap: 8px; padding-block: 1px; }
.bloque-turno.corto .bt-serv { display: none; }
.bloque-turno.fila-cancelado .bt-nombre, .bloque-turno.fila-error .bt-nombre { text-decoration: line-through; }

/* el turno que se está cargando, sobre el panorama */
.bloque-nuevo {
  position: absolute; left: 3px; right: 3px; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; gap: 0; padding: 4px 8px; border-radius: var(--r);
  border: 1.5px dashed var(--verde); background: color-mix(in srgb, var(--verde) 18%, transparent);
  color: var(--verde); font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .16em; text-transform: uppercase;
}
.bloque-nuevo small { font-size: 11px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.bloque-nuevo.corto { flex-direction: row; align-items: center; gap: 8px; padding-block: 0; }
.bloque-nuevo.choca { border-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 18%, transparent); color: var(--rojo); }

/* Etiquetas */
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 3px 9px; border-radius: var(--r); font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .16em; text-transform: uppercase;
  background: transparent; color: var(--tinta); border: 1px solid var(--linea-fuerte);
  font-variant-numeric: tabular-nums;
}
.etiqueta-sena { color: var(--oro-claro); border-color: var(--linea-oro); }
.etiqueta-reservado { color: var(--naranja); border-color: color-mix(in srgb, var(--naranja) 50%, transparent); }
.etiqueta-asistio { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 50%, transparent); }
.etiqueta-no_vino { color: var(--rosa); border-color: color-mix(in srgb, var(--rosa) 50%, transparent); }
.etiqueta-cancelado { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 50%, transparent); }
.etiqueta-error { color: var(--gris); border-style: dashed; }
.etiqueta-pedido { background: var(--lapis-hondo); color: var(--sobre-lapis); border-color: color-mix(in srgb, var(--oro) 35%, transparent); }

/* Tarjetas (celular) e ítems de búsqueda */
.lista-dia { list-style: none; margin: 0; padding: 0; display: none; gap: 10px; }
.tarjeta {
  display: grid; gap: 12px; padding: 16px; border-radius: var(--r);
  background: var(--fila, var(--superficie)); border: 1px solid var(--linea); box-shadow: inset 4px 0 0 var(--c, var(--oro));
}
.tarjeta-cuerpo, .item-turno {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit;
}
.item-turno {
  padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--linea);
  background: var(--fila, var(--superficie)); box-shadow: inset 4px 0 0 var(--c, var(--oro));
  transition: border-color .2s var(--ease);
}
.item-turno:hover { border-color: var(--linea-oro); }
.tarjeta .botones-estado { flex-wrap: wrap; }
.tarjeta .botones-estado .eb { flex: 1 1 auto; min-height: 38px; }
.tarjeta .panel-fila .eb { flex: 1 1 auto; min-height: 38px; }
.tarjeta .panel-fila .input-mini { width: 100%; }
.it-hora { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 15px; line-height: 1.25; color: var(--c, var(--tinta)); }
.it-hora small { display: block; font-weight: 400; color: var(--tinta-suave); font-size: 12.5px; }
.it-hora .it-fecha { color: var(--oro); margin-bottom: 2px; }
.it-cuerpo { display: grid; gap: 3px; min-width: 0; }
.it-nombre { font-weight: 500; font-size: 15.5px; }
.fila-cancelado .it-nombre, .fila-error .it-nombre { text-decoration: line-through; }
.it-serv { color: var(--tinta-suave); font-size: 14px; }
.it-anoto { color: var(--marron-claro); font-size: 12.5px; }
.it-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.agenda-ayuda { margin-top: 14px; }

@media (max-width: 719px) {
  #grilla-marco, #tabla-marco, #grilla-leyenda { display: none !important; }
  .lista-dia { display: grid; }
  .agenda-ayuda { display: none; }
  .agenda-controles { width: 100%; justify-content: space-between; }
  .navegador { gap: 2px; }
  .navegador .input-fecha { width: 150px; padding-left: 12px; padding-right: 40px; }
  .filtros-derecha { width: 100%; margin-left: 0; }
  .filtros-derecha .input-mini { flex: 1; width: auto; }
}

/* ---------- Vista MES ---------- */
.mes-leyenda { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 14px; font: 600 11.5px var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.mes-leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.pto { width: 7px; height: 7px; transform: rotate(45deg); display: inline-block; }
.pto-asistio, .seg-asistio { background: var(--verde); }
.pto-no_vino, .seg-no_vino { background: var(--rosa); }
.pto-cancelado, .seg-cancelado { background: var(--rojo); }
.pto-reservado, .seg-reservado { background: var(--naranja); }
.t-verde { color: var(--verde); font-style: normal; }
.t-rosa { color: var(--rosa); font-style: normal; }
.t-rojo { color: var(--rojo); font-style: normal; }
.t-naranja { color: var(--naranja); font-style: normal; }
.mes-marco { border: 1px solid var(--linea); overflow: hidden; background: var(--linea); margin-bottom: 14px; }
.mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.mes-sem { padding: 12px; background: var(--azul-cab); font: 600 11px var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--sobre-azul); border-bottom: 1px solid var(--oro); }
.mes-vacio { background: var(--bg); }
.mes-dia {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 116px; min-width: 0;
  padding: 12px 14px; border: 0; background: var(--superficie); cursor: pointer; text-align: left;
  transition: background-color .2s var(--ease);
}
.mes-dia:hover { background: var(--superficie-2); }
.mes-dia.pasado { background: color-mix(in srgb, var(--superficie) 55%, var(--bg)); }
.md-num { font-family: var(--f-display); font-weight: 500; font-size: 26px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.mes-dia.es-hoy .md-num { display: inline-grid; place-items: center; align-self: flex-start; width: 36px; height: 36px; background: var(--lapis); color: var(--sobre-lapis); font-size: 20px; }
.mes-dia.elegido { box-shadow: inset 0 0 0 1px var(--oro); }
.md-total { font-size: 12.5px; color: var(--tinta-suave); }
.md-total b { color: var(--tinta); font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; }
.md-barra { display: flex; height: 3px; overflow: hidden; gap: 1px; background: var(--superficie-3); }
.md-barra i { display: block; min-width: 2px; }
.md-detalle { font-size: 12px; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
@media (max-width: 719px) {
  .mes-sem { padding: 7px 2px; text-align: center; letter-spacing: .08em; }
  .mes-dia { min-height: 66px; padding: 6px 4px; gap: 4px; align-items: center; }
  .md-num { font-size: 18px; }
  .mes-dia.es-hoy .md-num { align-self: center; width: 26px; height: 26px; font-size: 15px; }
  .md-total b { font-size: 13px; }
  .md-barra { width: 100%; }
}

/* ---------- Tarjetas de contenido ---------- */
.bloque {
  margin: 0; min-width: 0; display: grid; gap: 18px;
  padding: 30px; border-radius: var(--r); border: 1px solid var(--linea); background: var(--superficie);
}
:root[data-theme="light"] .bloque { box-shadow: var(--sombra-chica); }
@media (max-width: 560px) { .bloque { padding: 22px 18px; } }
.bloque > * { min-width: 0; }
.vista > .bloque + .bloque, .vista > .bloque + details, .vista > section + section { margin-top: 22px; }
#vista-ajustes .bloque { margin-bottom: 22px; }
.bloque legend {
  float: left; width: 100%; padding: 0 0 14px; margin-bottom: 2px; border-bottom: 1px solid var(--linea);
  background: linear-gradient(var(--oro), var(--oro)) left bottom / 56px 1px no-repeat;
  font-family: var(--f-display); font-weight: 500; font-size: 28px; letter-spacing: -.005em; line-height: 1.1;
}
.bloque legend .num, .pedir-paso h2 > span {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; margin-right: 14px;
  font: 600 12.5px/1 var(--f-marca); letter-spacing: .08em; color: var(--sobre-azul);
  background: var(--azul-cab); border: 1px solid var(--linea-oro); vertical-align: 5px;
}
.bloque legend + * { clear: both; }
.bloque-titulo { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 30px; letter-spacing: -.005em; line-height: 1.1; }
.bloque-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.sub-titulo { margin: 12px 0 0; font: 600 11.5px var(--f-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--oro); }

/* ---------- Formularios ---------- */
.form-columnas { display: grid; gap: 22px; }
@media (min-width: 900px) { .form-columnas { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.form-col { display: grid; gap: 22px; align-content: start; min-width: 0; }
.campo { display: grid; gap: 8px; min-width: 0; }
.campo > span, .campo-cab { font: 600 11.5px/1.4 var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); }
.campo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.campo-cab label { cursor: pointer; }
.campo > span .opcional, .campo-cab .opcional { font-size: 11px; }
.req { color: var(--oro); }
.campo input, .campo select, .campo textarea, .buscador input, .tabla-ajustes input, .alta-rapida input {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--r);
  border: 1px solid var(--linea-fuerte); background: var(--superficie-2);
  transition: border-color .2s var(--ease);
}
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%), linear-gradient(135deg, var(--oro) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.campo select option { background: var(--elevada); }
.campo input::placeholder, .campo textarea::placeholder, .buscador input::placeholder, .input-mini::placeholder, .alta-rapida input::placeholder, .cartelera-form input::placeholder { color: var(--tinta-tenue); }
.campo textarea { resize: vertical; min-height: 88px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .buscador input:focus, .tabla-ajustes input:focus, .selector-hora select:focus, .input-fecha:focus, .alta-rapida input:focus {
  outline: none; border-color: var(--oro);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"], .alta-rapida input[aria-invalid="true"] { border-color: var(--rojo); }
.campo-alerta input { border-left: 2px solid color-mix(in srgb, var(--rojo) 70%, transparent); }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 420px) { .fila-2 { grid-template-columns: 1fr; } }
.con-prefijo { position: relative; }
.con-prefijo i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--oro); }
.con-prefijo input { padding-left: 28px; }
.check { display: flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--oro); flex: none; }

.nota-cliente {
  margin: -4px 0 0; padding: 14px 16px; font-size: 13.5px; line-height: 1.75;
  background: var(--oro-suave); color: var(--tinta); border-left: 2px solid var(--oro);
}
.nota-cliente.con-alerta { border-left-color: var(--rojo); }
.bloque-pago { display: grid; gap: 14px; }
.duraciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 11.5px var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.duraciones .chip { letter-spacing: .04em; text-transform: none; font-size: 12px; }
#hasta-ayuda { margin-top: -6px; }

/* Buscador con lista (servicio) */
.combo { position: relative; }
.combo-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 44;
  list-style: none; margin: 0; padding: 6px; max-height: 330px; overflow: auto;
  background: var(--elevada); border: 1px solid var(--linea-oro); box-shadow: var(--sombra);
}
.combo-op {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 12px; cursor: pointer; border-bottom: 1px solid var(--linea);
}
.combo-op:last-child { border-bottom: 0; }
.combo-op.activa, .combo-op:hover { background: var(--oro-suave); }
.combo-texto { font-weight: 500; font-size: 14.5px; }
.combo-detalle { font-size: 12px; color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.combo-crear { color: var(--oro); font: 600 12px var(--f-texto); letter-spacing: .16em; text-transform: uppercase; }
.combo-vacio { padding: 10px 12px; font-size: 13.5px; color: var(--tinta-suave); }

/* Ficha del servicio elegido */
.servicio-info { margin-top: -4px; padding: 16px 18px; background: var(--superficie-2); border-left: 2px solid var(--marron-claro); display: grid; gap: 10px; font-size: 14px; }
.servicio-info dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 16px; }
.servicio-info dt { font: 600 11px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 3px; }
.servicio-info dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.servicio-info p { margin: 0; }
.si-desc { color: var(--tinta-suave); font-size: 13.5px; }
.si-desc b { color: var(--tinta); font-weight: 500; }
.si-ajuste { font-size: 13.5px; color: var(--alerta); }
.servicio-info-nuevo { background: var(--oro-suave); border-left-color: var(--oro); }
.servicio-info-viejo { border-left-color: var(--gris); }
.alta-rapida { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.alta-rapida > input { flex: 1 1 200px; }
.alta-rapida .campo { flex: 1 1 120px; }
.alta-rapida .campo input { min-height: 42px; }

/* Barra de guardar: queda pegada abajo mientras se completa el turno */
.barra-guardar {
  position: sticky; bottom: calc(12px + var(--alto-barra-cel) + env(safe-area-inset-bottom, 0px)); z-index: 20;
  margin-top: 22px; padding: 12px 12px 12px 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  background: var(--vidrio); border: 1px solid var(--linea-oro);
  backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px);
  box-shadow: var(--sombra-chica);
}
.barra-guardar .error-texto { flex: 1 1 100%; }
.resumen-turno { margin: 0; flex: 1 1 260px; font-size: 14px; color: var(--tinta-suave); }
.resumen-turno b { color: var(--tinta); font-weight: 500; }
.form-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.form-acciones-izq { justify-content: flex-start; }
.form-acciones .boton-principal { min-width: 190px; }
@media (max-width: 719px) {
  .barra-guardar { padding: 10px; }
  .resumen-turno { display: none; }
  .barra-guardar .form-acciones { width: 100%; }
  .barra-guardar .boton { flex: 1; }
  .form-acciones .boton-principal { min-width: 0; }
}

/* Disponibilidad */
.disponibilidad { display: grid; gap: 14px; }
.disponibilidad:empty { display: none; }
.disp-seccion { display: grid; gap: 8px; }
.disp-seccion + .disp-seccion { padding-top: 14px; border-top: 1px solid var(--linea); }
.disp-seccion h3 { margin: 0; font: 600 11.5px var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
.veredicto { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; font-size: 14px; border-left: 2px solid currentColor; }
.veredicto strong { display: block; font-weight: 500; }
.veredicto span { display: block; }
.veredicto-libre { background: var(--ok-suave); color: var(--verde); }
.veredicto-ocupado { background: var(--mal-suave); color: var(--rojo); }
.veredicto-alerta { background: var(--alerta-suave); color: var(--alerta); }
.veredicto-info { background: var(--superficie-2); color: var(--tinta-suave); }
.veredicto svg { margin-top: 2px; }
.ocupados { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.ocupados li { display: flex; gap: 10px; }
.ocupados b { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 104px; white-space: nowrap; }
.ocupados .choca { color: var(--rojo); }

/* Panorama del día */
.panorama { margin-top: 22px; }
.panorama-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.panorama-cab .ayuda { margin-top: 6px; }
.panorama .leyenda { margin: 0; }
.grilla-panorama { min-height: 300px; max-height: 620px; --px-col: 1px; }
.grilla-una { --px-col: 1.1px; min-height: 280px; max-height: 720px; }

/* ---------- Buscar ---------- */
.buscador { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; align-items: center; }
.buscador input { flex: 1 1 220px; background: transparent; }
.buscador .combo { flex: 1 1 220px; }
.buscador .combo input { width: 100%; }
.buscador .input-fecha { flex: none; width: 158px; }
.resultados { display: grid; gap: 10px; }
.res-titulo { margin: 18px 0 0; font-family: var(--f-display); font-weight: 500; font-size: 28px; }
.ficha { display: grid; gap: 16px; padding: 26px; background: var(--superficie); border: 1px solid var(--linea); }
.ficha-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ficha-cab h2 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 36px; line-height: 1.05; }
.ficha-cab p { margin: 6px 0 0; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.ficha-numeros { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--linea); }
.ficha-numeros span {
  display: grid; flex: 1 1 96px; padding: 14px 16px; border-left: 1px solid var(--linea);
  font: 600 11px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave);
}
.ficha-numeros span:first-child { border-left: 0; }
.ficha-numeros b { font-family: var(--f-display); font-weight: 500; font-size: 34px; letter-spacing: 0; color: var(--oro-claro); line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.ficha-numeros .n-asistio b { color: var(--verde); }
.ficha-numeros .n-no_vino b { color: var(--rosa); }
.ficha-numeros .n-cancelado b { color: var(--rojo); }
.ficha-linea { margin: 0; font-size: 14px; }
.ficha-frec { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.ficha-frec li::marker { color: var(--oro); }

/* ---------- Recordatorios ---------- */
.rec-panel { gap: 22px; }
.rec-rango { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.rec-rango .campo { width: 190px; }
.rec-rapidos { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.rec-envio {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px;
  padding: 22px 24px; background: linear-gradient(100deg, color-mix(in srgb, var(--azul-cab) 55%, var(--superficie-2)), var(--superficie-2) 70%); border-left: 2px solid var(--oro);
}
.rec-numero { margin: 0 0 4px; font-family: var(--f-display); font-size: 32px; line-height: 1.05; }
.rec-numero b { color: var(--oro-claro); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
.rec-modo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#rec-ayuda { max-width: 82ch; }
.rec-ejemplo { margin: 22px 0 6px; }
.rec-ejemplo summary { cursor: pointer; font: 600 12px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.burbuja {
  max-width: 520px; margin: 12px 0 0; padding: 13px 16px; border-radius: 0 12px 12px 12px;
  background: color-mix(in srgb, var(--verde) 14%, var(--superficie)); color: var(--tinta); font-size: 14.5px;
}
.rec-dias { display: grid; gap: 24px; margin-top: 20px; }
.rec-dia-titulo { margin: 0 0 12px; font-family: var(--f-display); font-weight: 500; font-size: 26px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rec-dia-titulo span { font: 600 11.5px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); }
.rec-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; background: var(--superficie); border: 1px solid var(--linea); }
.rec-lista:empty { border: 0; }
.rec-item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
  padding: 14px 18px; border-top: 1px solid var(--linea);
}
.rec-item:first-child { border-top: 0; }
.rec-hora { font-variant-numeric: tabular-nums; color: var(--oro-claro); font-weight: 500; }
.rec-cuerpo { display: grid; min-width: 0; }
.rec-cuerpo strong { font-weight: 500; }
.rec-cuerpo span { font-size: 13.5px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; }
.rec-estado { font: 600 11.5px var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--naranja); text-align: right; }
.rec-estado small { letter-spacing: .04em; text-transform: none; color: var(--tinta-tenue); font-size: 11.5px; }
.rec-enviado .rec-estado { color: var(--verde); }
.rec-enviando .rec-estado { color: var(--alerta); }
.rec-error .rec-estado { color: var(--rojo); }
.rec-nada .rec-estado { color: var(--tinta-tenue); }
.rec-error { background: var(--f-rojo); }
.boton-wa { min-height: 36px; padding-inline: 16px; }
.rec-cumples { margin-top: 30px; }
@media (max-width: 619px) {
  .rec-item { grid-template-columns: 52px minmax(0, 1fr); }
  .rec-estado { grid-column: 2; text-align: left; }
  .rec-accion { grid-column: 1 / -1; }
  .rec-accion .boton { width: 100%; }
  .rec-envio .boton { width: 100%; }
  .rec-rango .campo { width: calc(50% - 8px); }
}

/* Envío en tanda: barra flotante */
.tanda {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50;
  bottom: calc(16px + var(--alto-barra-cel) + env(safe-area-inset-bottom, 0px));
  width: min(800px, calc(100% - 24px)); overflow: hidden;
  background: var(--vidrio); border: 1px solid var(--linea-oro);
  backdrop-filter: saturate(140%) blur(20px); -webkit-backdrop-filter: saturate(140%) blur(20px);
  box-shadow: var(--sombra);
  animation: subir .35s var(--ease);
}
#tanda:not([hidden]) + .toast { bottom: calc(150px + var(--alto-barra-cel) + env(safe-area-inset-bottom, 0px)); }
#vista-recordatorios { padding-bottom: calc(190px + var(--alto-barra-cel)); }
@keyframes subir { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tanda-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 18px 20px 20px 24px; position: relative; }
.tanda-info { display: grid; gap: 2px; min-width: 0; }
.tanda-paso { font: 600 11.5px var(--f-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--oro); }
.tanda-info strong { font-family: var(--f-display); font-weight: 500; font-size: 22px; }
.tanda-info span:last-child { font-size: 13.5px; color: var(--tinta-suave); }
.tanda-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tanda-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--linea); }
.tanda-barra i { display: block; height: 100%; background: var(--oro); transition: width .35s var(--ease); }
@media (max-width: 619px) { .tanda-acciones { width: 100%; } .tanda-acciones .boton-wa { flex: 1; } }

/* ---------- Pedidos por link ---------- */
.bloque-link { border-left: 2px solid var(--lapis-claro); }
.pedidos-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 16px; }
.pedidos-lista { display: grid; gap: 16px; }
.pedido {
  display: grid; gap: 14px; padding: 24px 26px; background: var(--superficie); border: 1px solid var(--linea);
  border-top: 2px solid var(--lapis-claro);
}
@media (max-width: 560px) { .pedido { padding: 20px 18px; } }
.pedido-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pedido-cab h3 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 500; font-size: 28px; line-height: 1.1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pedido-turno { margin: 0; display: grid; gap: 2px; }
.pedido-turno b { font: 600 12px var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--oro-claro); }
.pedido-turno span { font-family: var(--f-display); font-size: 21px; }
.pedido-pref { margin: 0; color: var(--tinta-suave); font-size: 14px; }
.pedido-pref b { color: var(--tinta); font-weight: 500; }
.pedido-datos { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; padding: 14px 0; border-block: 1px solid var(--linea); }
.pedido-datos dt { font: 600 11px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 2px; }
.pedido-datos dd { margin: 0; overflow-wrap: anywhere; }
.pedido-datos .pd-notas { grid-column: 1 / -1; }
.pedido-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pedido-acciones .mini-campo { margin-right: 6px; }
.pedido-rechazo .input-mini { width: 240px; max-width: 100%; }
.pedido-ok {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  padding: 20px 24px; background: var(--ok-suave); border-left: 2px solid var(--verde);
}
.pedido-ok p { margin: 0; }
.pedido-ok .eyebrow { margin-bottom: 6px; color: var(--verde); }
.pedido-resuelto .rec-hora { color: var(--tinta-suave); }
@media (max-width: 560px) {
  .pedido-acciones .boton, .pedido-acciones .mini-campo { flex: 1 1 100%; }
  .pedido-acciones .mini-campo select { flex: 1; }
}

/* ---------- Pedí tu turno (lo que ve la clienta) ---------- */
.pedir { place-items: start center; }
.pedir-caja { width: 100%; max-width: 760px; display: grid; gap: 28px; }
.pedir-cab { display: grid; justify-items: center; gap: 18px; text-align: center; padding-top: 10px; }
.pedir-cab .meandro { width: 180px; }
.pedir-titulo { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(42px, 8vw, 72px); line-height: .98; letter-spacing: -.015em; }
.pedir-bajada { margin: 0; color: var(--tinta-suave); max-width: 46ch; }
.pedir-form { display: grid; gap: 22px; }
.pedir-paso { display: grid; gap: 14px; padding: 26px; background: var(--superficie); border: 1px solid var(--linea); }
.pedir-paso h2 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 26px; display: flex; align-items: baseline; flex-wrap: wrap; }
.pedir-paso h2 .opcional { font-family: var(--f-texto); font-size: 13px; margin-left: 10px; }
.pedir-nota { margin: 0; font-size: 13.5px; color: var(--tinta-suave); padding-left: 14px; border-left: 2px solid var(--lapis-claro); }
.pedir-servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.pd-servicio, .pd-dia, .pd-hora { position: relative; cursor: pointer; display: block; }
.pd-servicio input, .pd-dia input, .pd-hora input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pd-servicio span { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--linea-fuerte); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.pd-servicio strong { font-weight: 500; }
.pd-servicio small { color: var(--tinta-suave); font-size: 12.5px; }
.pd-servicio:hover span, .pd-dia:hover span, .pd-hora:hover span { border-color: var(--oro); }
.pd-servicio input:checked + span, .pd-dia input:checked + span, .pd-hora input:checked + span { border-color: var(--oro); background: var(--oro-suave); box-shadow: inset 0 0 0 1px var(--oro); }
.pd-servicio input:focus-visible + span, .pd-dia input:focus-visible + span, .pd-hora input:focus-visible + span { outline: 1px solid var(--oro); outline-offset: 2px; }
.pd-dia input:disabled + span { opacity: .35; text-decoration: line-through; cursor: default; }
.pedir-dias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.pd-dia { flex: none; scroll-snap-align: start; }
.pd-dia span { display: grid; justify-items: center; gap: 2px; width: 66px; padding: 10px 4px; border: 1px solid var(--linea-fuerte); transition: border-color .2s var(--ease); }
.pd-dia small { font: 600 10.5px var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.pd-dia b { font: 500 26px/1 var(--f-display); }
.pd-grupo { display: grid; gap: 8px; }
.pd-grupo + .pd-grupo { margin-top: 12px; }
.pd-grupo-titulo { font: 600 11.5px var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
.pd-horas-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-hora span { display: block; min-width: 74px; padding: 10px 12px; text-align: center; border: 1px solid var(--linea-fuerte); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.pedir-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pedir-datos .pd-ancho { grid-column: 1 / -1; }
@media (max-width: 560px) { .pedir-datos { grid-template-columns: 1fr; } .pedir-paso { padding: 20px 18px; } }
.pedir-resumen { display: grid; gap: 4px; padding: 20px 24px; background: var(--superficie-2); border-left: 2px solid var(--oro); }
.pedir-resumen p { margin: 0; }
.pedir-resumen .eyebrow { margin-bottom: 4px; }
.pedir-resumen b { font-family: var(--f-display); font-weight: 500; font-size: 24px; }
.pedir-listo { display: grid; gap: 16px; justify-items: start; padding: 34px; background: var(--superficie); border: 1px solid var(--linea-oro); }
.pedir-pie { margin: 0; text-align: center; font: 600 11px/1.9 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-tenue); }

/* ---------- Servicios y profesionales ---------- */
.alta-servicio { display: grid; grid-template-columns: 2fr 1fr 1fr .8fr; gap: 14px; align-items: end; }
.alta-servicio .cs-desc { grid-column: 1 / 4; }
.alta-servicio .boton { min-height: 46px; }
.alta-prof { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.alta-prof .campo { flex: 1 1 280px; }
.alta-prof .boton { min-height: 46px; }
@media (max-width: 719px) {
  .alta-servicio { grid-template-columns: 1fr 1fr; }
  .alta-servicio .cs-nombre, .alta-servicio .cs-desc { grid-column: 1 / -1; }
  .alta-servicio .boton { grid-column: 1 / -1; }
}
.lista-cat { display: grid; gap: 12px; }
.cat-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.cat-fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 16px 4px; border-bottom: 1px solid var(--linea);
}
.cat-principal { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px; }
.cat-principal strong { font-family: var(--f-display); font-weight: 500; font-size: 21px; }
.cat-meta { font-size: 12.5px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.cat-desc { font-size: 13px; color: var(--tinta-tenue); }
.cat-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.cat-baja { opacity: .7; }
.cat-fila.editando { background: var(--oro-suave); align-items: flex-end; padding-inline: 14px; }
.cat-editar { flex: 1 1 100%; display: grid; grid-template-columns: 2fr 1fr 1fr .8fr; gap: 10px; }
.cat-editar .cs-desc { grid-column: 1 / -1; }
.cat-fila.editando .cat-acciones { flex: 1 1 100%; justify-content: flex-start; }
@media (max-width: 719px) { .cat-editar { grid-template-columns: 1fr 1fr; } .cat-editar .cs-nombre { grid-column: 1 / -1; } }

.rango-chico { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-suave); }
.tabla-recuento { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabla-recuento caption { padding: 18px; color: var(--tinta-suave); font-size: 14px; text-align: left; caption-side: top; }
.tabla-recuento th, .tabla-recuento td { padding: 12px 14px; border-bottom: 1px solid var(--linea); text-align: right; white-space: nowrap; }
.tabla-recuento thead th { background: var(--azul-cab); font: 600 11px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--sobre-azul); border-bottom: 1px solid var(--oro); }
.tabla-recuento th:first-child { text-align: left; }
.tabla-recuento tbody th { font-weight: 500; white-space: normal; min-width: 160px; }
.tabla-recuento tfoot th, .tabla-recuento tfoot td { font-weight: 600; border-bottom: 0; background: var(--superficie-2); }
.tabla-recuento tbody tr:hover td, .tabla-recuento tbody tr:hover th { background: color-mix(in srgb, var(--tinta) 3%, transparent); }

.cp-dia-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp-dia { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 16px; align-items: start; }
.cp-dia-lista { display: grid; gap: 8px; }
@media (max-width: 860px) { .cp-dia { grid-template-columns: 1fr; } }

/* ---------- Ajustes ---------- */
.horario-dias { display: flex; flex-wrap: wrap; gap: 6px; }
.dia-check { position: relative; cursor: pointer; }
.dia-check input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dia-check span { display: block; padding: 9px 14px; border: 1px solid var(--linea-fuerte); font: 600 11.5px var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.dia-check input:checked + span { background: var(--oro); border-color: var(--oro); color: var(--sobre-oro); }
.dia-check input:focus-visible + span { outline: 1px solid var(--oro); outline-offset: 2px; }
.horario-horas { max-width: 460px; }

.tabla-ajustes { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-ajustes th {
  text-align: left; padding: 12px 10px; white-space: nowrap; background: var(--azul-cab); color: var(--sobre-azul);
  font: 600 11px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid var(--oro);
}
.tabla-ajustes td { padding: 8px; border-bottom: 1px solid var(--linea); }
.tabla-ajustes tbody tr:last-child td { border-bottom: 0; background: var(--superficie-2); }
.tabla-ajustes .t-min, .tabla-ajustes .t-max { width: 84px; }
.tabla-ajustes .t-nombre { min-width: 130px; }
.tabla-ajustes input { min-height: 40px; }
.tabla-ajustes .td-acciones { text-align: left; white-space: nowrap; }
.tabla-ajustes .td-acciones .chip + .chip { margin-left: 6px; }
@media (max-width: 560px) {
  .tabla-ajustes thead { display: none; }
  .tabla-ajustes tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-bottom: 1px solid var(--linea); }
  .tabla-ajustes td { display: grid; gap: 4px; padding: 0; border: 0; }
  .tabla-ajustes td[data-etiqueta]::before { content: attr(data-etiqueta); font: 600 11px var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
  .tabla-ajustes td:first-child, .tabla-ajustes .td-acciones { grid-column: 1 / -1; }
  .tabla-ajustes .td-acciones { display: flex; gap: 6px; }
  .tabla-ajustes .t-min, .tabla-ajustes .t-max, .tabla-ajustes .t-nombre { width: 100%; min-width: 0; }
  .tabla-ajustes tbody tr:last-child td { background: transparent; }
  .tabla-ajustes tbody tr:last-child { background: var(--superficie-2); }
}

/* ---------- Detalle ---------- */
.detalle {
  width: min(680px, calc(100% - 24px)); max-height: calc(100% - 40px);
  padding: 0; border: 1px solid var(--linea-oro); border-top: 2px solid var(--oro); border-radius: var(--r);
  background: linear-gradient(180deg, color-mix(in srgb, var(--azul-cab) 70%, var(--elevada)), var(--elevada) 170px); color: var(--tinta); box-shadow: var(--sombra);
}
.detalle[open] { animation: crecer .28s var(--ease); }
@keyframes crecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.detalle::backdrop { background: rgba(4, 4, 4, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.detalle-in { padding: 30px; display: grid; gap: 20px; }
@media (max-width: 480px) { .detalle-in { padding: 22px 18px; } }
.det-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.det-cab h2 { margin: 12px 0 0; font-family: var(--f-display); font-weight: 500; font-size: 38px; line-height: 1.02; }
.det-horario { margin: 8px 0 0; color: var(--oro-claro); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.det-datos { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 0; }
.det-datos dt { font: 600 11px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); padding-top: 4px; }
.det-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.det-datos a { color: var(--oro); }
.det-estados { flex-wrap: wrap; }
.det-estados .eb { min-height: 36px; padding-inline: 16px; font-size: 13px; }
.det-pie { font-size: 12.5px; color: var(--tinta-suave); margin: 0; border-top: 1px solid var(--linea); padding-top: 14px; }
.det-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.panel-cancelar {
  display: grid; gap: 10px; margin: 0; padding: 18px;
  border: 0; border-left: 2px solid var(--rojo); background: var(--f-rojo);
}
.panel-cancelar legend { float: left; width: 100%; font-weight: 500; color: var(--rojo); margin-bottom: 4px; }
.panel-cancelar legend + * { clear: both; }
.opcion { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--superficie); cursor: pointer; border: 1px solid var(--linea); }
.opcion input { margin-top: 3px; accent-color: var(--rojo); width: 17px; height: 17px; }
.opcion span { display: grid; }
.opcion strong { font-weight: 500; }
.opcion small { color: var(--tinta-suave); font-size: 12.5px; }
.panel-cancelar .campo input { background: var(--superficie); }
@media (max-width: 480px) {
  .det-datos { grid-template-columns: 1fr; gap: 2px; }
  .det-datos dd { margin-bottom: 8px; }
  .det-acciones .boton { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .toast, .tanda, .detalle[open] { animation: none !important; }
}

/* ---------- Cuentas: entrar, crear cuenta, recuperar ---------- */
.login-pestanas { margin-bottom: 4px; }
.login-panel { display: grid; gap: 16px; }
.ok-caja { margin: 0; padding: 11px 14px; font-size: 14px; background: var(--ok-suave); color: var(--verde); border-left: 2px solid var(--verde); }
.enlace-centro { justify-self: center; font-size: 13px; }
.ayuda-centro { text-align: center; }
.espera-titulo { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 27px; text-align: center; }

/* aviso de cuentas o pedidos pendientes en las pestañas */
.badge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px;
  background: var(--lapis); color: var(--sobre-lapis); font: 600 10px/1 var(--f-texto); letter-spacing: 0;
  border: 1px solid color-mix(in srgb, var(--oro) 50%, transparent);
}
.pestana .badge { position: static; margin-left: 4px; }
@media (max-width: 899px) { .pestana .badge { position: absolute; top: 0; right: 18%; margin: 0; } }
@media (max-width: 899px) { .pestanas.mas-abierto .pestana.secundaria .badge { position: static; margin-left: auto; } }
.badge-en-linea { position: static; vertical-align: middle; margin-left: 8px; }

/* ---------- Ajustes → Equipo ---------- */
.link-equipo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13.5px; color: var(--tinta-suave); }
.link-equipo code {
  padding: 8px 12px; background: var(--superficie-2); border: 1px solid var(--linea);
  color: var(--oro-claro); font-size: 13px; overflow-wrap: anywhere; letter-spacing: .02em;
}
.cuentas { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linea); }
.cuenta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 14px;
  padding: 14px 4px; border-bottom: 1px solid var(--linea);
}
.cuenta-pendiente { background: var(--f-naranja); box-shadow: inset 2px 0 0 var(--naranja); grid-template-columns: minmax(0, 1fr) auto; padding-inline: 14px; }
.cuenta-baja { opacity: .7; grid-template-columns: 1fr; }
.cuenta-datos { display: grid; min-width: 0; }
.cuenta-datos strong { font-weight: 500; }
.cuenta-datos span { font-size: 13px; color: var(--tinta-suave); overflow-wrap: anywhere; }
.cuenta-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.confirmar-baja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--rojo); max-width: 560px; }
.bajas summary { cursor: pointer; color: var(--tinta-suave); font: 600 11.5px var(--f-texto); letter-spacing: .22em; text-transform: uppercase; margin: 10px 0; }
@media (max-width: 640px) {
  .cuenta { grid-template-columns: minmax(0, 1fr) auto; }
  .cuenta-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Chat del equipo (panel a la derecha; en el celu, pantalla completa) ---------- */
.boton-chat { position: relative; color: var(--oro); }
.boton-chat[aria-expanded="true"] { border-color: var(--oro); background: var(--oro-suave); }
.boton-chat .badge { position: absolute; top: -5px; right: -7px; }
.chat-punto { position: absolute; right: 5px; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 2px var(--bg); }
.chat {
  position: fixed; z-index: 55; top: var(--chat-top, 0px); right: 0; bottom: 0; width: min(410px, 100vw);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--elevada); border-left: 1px solid var(--linea-oro); box-shadow: -30px 0 80px rgba(0, 0, 0, .45);
  animation: chat-entra .32s var(--ease);
}
:root[data-theme="light"] .chat { box-shadow: -24px 0 60px rgba(31, 40, 70, .14); }
:root[data-theme="light"] .chat-lista { background: var(--elevada); }
@keyframes chat-entra { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.chat-cab {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 12px;
  padding: 24px 18px 26px 24px; color: var(--sobre-azul);
  background: linear-gradient(160deg, var(--lapis), var(--azul-cab) 75%);
  border-bottom: 1px solid var(--oro);
}
.chat-cab::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 7px; height: 10px; background: var(--meandro) repeat-x center / 20px 10px; opacity: .5; }
.chat-eyebrow { margin: 0 0 6px; display: flex; align-items: center; gap: 12px; font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .3em; text-transform: uppercase; color: #D2B06E; }
.chat-eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.chat-titulo { margin: 0; font: 500 38px/1 var(--f-display); letter-spacing: -.01em; color: #F6EFE2; }
.chat-cab .boton-icono { color: var(--sobre-azul); }
.chat-cab .boton-icono:hover { border-color: var(--oro); color: #fff; }
.chat-linea { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 28px; margin-top: 10px; font-size: 12.5px; color: var(--sobre-azul-tenue); }
.chat-caras { display: flex; padding-left: 6px; }
.chat-cara {
  display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 50%;
  background: var(--azul-cab); border: 1px solid var(--oro); color: var(--oro-claro); font: 600 10px/1 var(--f-texto); letter-spacing: .04em;
}
:root[data-theme="light"] .chat-cara { color: #F1DDAE; }
.chat-cara-yo { background: var(--oro); color: var(--sobre-oro); }
:root[data-theme="light"] .chat-cara-yo { color: #fff; }
.chat-linea-texto { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.chat-verde { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex: none; }
.chat-lista {
  list-style: none; margin: 0; padding: 14px 18px 18px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--azul-cab) 30%, transparent), transparent 60%), var(--elevada);
}
.chat-dia {
  align-self: stretch; display: flex; align-items: center; gap: 12px; margin: 16px 0 4px;
  font: 600 11px/1 var(--f-texto); letter-spacing: .28em; text-transform: uppercase; color: var(--oro);
}
.chat-dia::before, .chat-dia::after { content: ''; flex: 1; height: 1px; background: var(--linea-oro); }
.chat-msg { display: grid; justify-items: start; max-width: 86%; margin-top: 12px; }
.chat-msg.chat-sigue { margin-top: 3px; }
.chat-mio { align-self: flex-end; justify-items: end; }
.chat-autor { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 11.5px/1 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.chat-ini {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 600 10px/1 var(--f-texto); font-style: normal; letter-spacing: 0;
  background: var(--azul-cab); color: var(--sobre-azul); border: 1px solid var(--linea-oro);
}
.chat-burbuja {
  position: relative; padding: 9px 14px 7px; min-width: 76px;
  background: color-mix(in srgb, var(--azul-cab) 38%, var(--superficie-2)); border: 1px solid var(--linea-azul); border-left: 2px solid var(--lapis-claro);
}
.chat-mio .chat-burbuja { background: var(--oro-suave); border-color: var(--linea-oro); border-left-width: 1px; border-right: 2px solid var(--oro); }
:root[data-theme="light"] .chat-burbuja { background: #E9EEF7; }
:root[data-theme="light"] .chat-mio .chat-burbuja { background: #F3E9D4; }
.chat-burbuja p { margin: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-burbuja time { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: .08em; color: var(--tinta-tenue); text-align: right; font-variant-numeric: tabular-nums; }
.chat-borrar {
  position: absolute; top: 50%; transform: translateY(-50%); left: -34px; width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--tinta-tenue); cursor: pointer; opacity: 0; transition: opacity .2s var(--ease), color .2s var(--ease);
}
.chat-borrar svg { width: 14px; height: 14px; }
.chat-msg:not(.chat-mio) .chat-borrar { left: auto; right: -34px; }
.chat-msg:hover .chat-borrar, .chat-borrar:focus-visible { opacity: 1; }
.chat-borrar:hover { color: var(--rojo); }
@media (hover: none) { .chat-borrar { opacity: .45; } }
.chat-vacio { margin: auto; padding: 30px 10px; text-align: center; color: var(--tinta-suave); font: italic 500 19px/1.45 var(--f-display); }
.chat-vacio-orla { display: block; margin-bottom: 10px; color: var(--oro); font-style: normal; font-size: 14px; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--linea-oro); background: var(--superficie); }
.chat-form textarea {
  flex: 1; min-width: 0; resize: none; min-height: 46px; max-height: 132px; padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--linea-fuerte); background: var(--superficie-2); line-height: 1.4;
}
.chat-form textarea:focus { outline: none; border-color: var(--oro); }
.chat-form textarea::placeholder { color: var(--tinta-tenue); }
.chat-enviar {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--oro); border-radius: var(--r);
  background: var(--oro); color: var(--sobre-oro); cursor: pointer; transition: background-color .2s var(--ease);
}
.chat-enviar:hover:not(:disabled) { background: var(--oro-claro); }
.chat-enviar:disabled { opacity: .5; cursor: progress; }
.chat-enviar svg { width: 20px; height: 20px; stroke-width: 1.6; }
.chat-nota { margin: 0; padding: 0 16px 12px; font-size: 11.5px; line-height: 1.5; color: var(--tinta-tenue); background: var(--superficie); }
@media (max-width: 899px) {
  .chat { top: 0; width: 100vw; border-left: 0; z-index: 60; }
  body.chat-abierto { overflow: hidden; }
  .chat-cab { padding: 18px 14px 22px 18px; }
  .chat-titulo { font-size: 32px; }
  .chat-form { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .chat-msg { max-width: 82%; }
}
@media (max-width: 899px) { .chat-nota { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .chat { animation: none; } }

/* =====================================================================
   VERSIÓN 8: widgets de hoy, zonas, número de clienta y detalles finos
   ===================================================================== */

/* ---------- Detalles finos (barroco y griego, en dorado, apenas) ---------- */
.agenda-titulos { position: relative; }
.agenda-titulos::after {
  content: ''; display: block; width: 160px; height: 16px; margin-top: 14px;
  background: var(--orla) no-repeat left center / 160px 16px; opacity: .75;
}
.titulo { position: relative; }
.titulo::after {
  content: ''; display: block; width: 160px; height: 16px; margin-top: 16px;
  background: var(--orla) no-repeat left center / 160px 16px; opacity: .7;
}
.boton-suave:hover:not(:disabled) { background: color-mix(in srgb, var(--azul-cab) 55%, transparent); border-color: var(--oro); }
.vacio { background: linear-gradient(180deg, color-mix(in srgb, var(--azul-cab) 35%, var(--superficie)), var(--superficie) 70%); border-color: var(--linea-azul); }
.ficha { border-top: 2px solid var(--oro); background: linear-gradient(180deg, color-mix(in srgb, var(--azul-cab) 30%, var(--superficie)), var(--superficie) 160px); }
.ficha-cab .eyebrow { margin-bottom: 8px; }

/* ---------- Agenda con widgets ---------- */
.agenda-cuerpo { display: grid; gap: 24px; }
.agenda-principal { min-width: 0; }
@media (min-width: 1400px) {
  .agenda-cuerpo { grid-template-columns: minmax(0, 1fr) 312px; grid-template-areas: "principal widgets"; align-items: start; gap: 28px; }
  .agenda-principal { grid-area: principal; }
  .widgets { grid-area: widgets; position: sticky; top: 86px; max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 14px 2px; }
}

.widgets { display: grid; gap: 14px; align-content: start; }
@media (max-width: 1399px) {
  .widgets {
    grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; padding: 4px 2px 14px; margin-inline: -2px;
  }
  .widgets > .widget { scroll-snap-align: start; }
}
@media (max-width: 719px) {
  .widgets { grid-auto-columns: 78%; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}

.widget {
  position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; padding: 18px 20px 18px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--azul-cab) 62%, var(--superficie)), var(--superficie) 82%);
  border: 1px solid var(--linea-azul); border-top: 1px solid var(--linea-oro);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .03) inset;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  animation: widget-flota .6s var(--ease) both;
}
.widget:nth-child(2) { animation-delay: .06s; } .widget:nth-child(3) { animation-delay: .12s; }
.widget:nth-child(4) { animation-delay: .18s; } .widget:nth-child(5) { animation-delay: .24s; }
.widget:nth-child(6) { animation-delay: .30s; } .widget:nth-child(7) { animation-delay: .36s; }
.widgets[data-listo] .widget { animation: none; }
@keyframes widget-flota { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.widget:hover { transform: translateY(-3px); border-color: var(--linea-oro); box-shadow: 0 26px 52px rgba(0, 0, 0, .45); }
:root[data-theme="light"] .widget {
  background: linear-gradient(170deg, #FFFFFF, #F7F2E9 85%);
  border-color: rgba(31, 59, 112, .16); border-top-color: var(--linea-oro);
  box-shadow: 0 16px 36px rgba(31, 40, 70, .10);
}
:root[data-theme="light"] .widget:hover { box-shadow: 0 24px 46px rgba(31, 40, 70, .14); }
/* esquineros barrocos */
.widget::before, .widget::after {
  content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
  background: var(--esquinero) no-repeat center / 22px 22px; opacity: .55;
}
.widget::before { top: 6px; left: 6px; }
.widget::after { bottom: 6px; right: 6px; transform: rotate(180deg); }
.w-cuerpo { display: grid; gap: 6px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.w-cuerpo:hover .w-grande, .w-cuerpo:hover b { color: var(--oro-claro); }
.w-eyebrow, .w-titulo {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .28em; text-transform: uppercase; color: var(--oro);
}
.w-cuenta { margin-left: auto; font: 500 20px/1 var(--f-display); letter-spacing: 0; color: var(--tinta); }
.w-hora { margin: 2px 0 0; font: 500 58px/1 var(--f-display); letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.w-dos { color: var(--oro); animation: titila 2s steps(1) infinite; }
@keyframes titila { 50% { opacity: .25; } }
.w-fecha { margin: 0; font: italic 500 19px/1.2 var(--f-display); color: var(--tinta-suave); }
.w-orla { display: block; height: 16px; background: var(--orla) no-repeat left center / 160px 16px; opacity: .7; margin: 2px 0; }
.w-sub { margin: 0; font-size: 12.5px; color: var(--tinta-suave); line-height: 1.45; }
.w-vacio { margin: 0; font: italic 500 17px/1.4 var(--f-display); color: var(--tinta-suave); }
.w-grande { display: flex; align-items: baseline; gap: 10px; font: 500 40px/1 var(--f-display); color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.w-grande small { font: 600 11.5px/1.2 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.w-linea { font-size: 15px; }
.w-linea small, .w-lista small { color: var(--oro); font-size: 11px; letter-spacing: .08em; margin-left: 6px; }
.w-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.w-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linea); }
.w-lista li:first-child { border-top: 0; }
.w-lista li > button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.w-lista li span { display: grid; gap: 1px; min-width: 0; }
.w-lista li b { font-weight: 500; font-size: 14px; }
.w-lista li small { margin-left: 0; color: var(--tinta-suave); letter-spacing: .02em; }
.w-punto { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; flex: none; background: var(--c, var(--oro)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--oro)) 28%, transparent); }
.w-punto-reservado { --c: var(--naranja); } .w-punto-asistio { --c: var(--verde); }
.w-punto-no_vino { --c: var(--rosa); } .w-punto-cancelado { --c: var(--rojo); }
.w-barra { display: flex; height: 8px; gap: 2px; background: var(--superficie-3); overflow: hidden; }
.w-seg { display: block; min-width: 4px; }
.w-seg-asistio { background: var(--verde); } .w-seg-reservado { background: var(--naranja); }
.w-seg-no_vino { background: var(--rosa); } .w-seg-cancelado { background: var(--rojo); }
.w-numeros { margin: 4px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.w-numeros div { display: grid; gap: 2px; }
.w-numeros dt { font: 600 10px/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.w-numeros dd { margin: 0; font: 500 26px/1 var(--f-display); color: var(--c); font-variant-numeric: lining-nums tabular-nums; }
.wn-asistio { --c: var(--verde); } .wn-reservado { --c: var(--naranja); } .wn-no_vino { --c: var(--rosa); } .wn-cancelado { --c: var(--rojo); }
.widget-pedidos.con-algo { border-color: var(--oro); box-shadow: 0 18px 44px rgba(0, 0, 0, .4), 0 0 0 1px var(--linea-oro); }
.widget-pedidos.con-algo .w-grande { color: var(--oro-claro); }
.w-caras { display: flex; padding-left: 6px; min-height: 30px; }
.w-caras .chat-cara { font-style: normal; }
.widget-reloj { text-align: left; }

/* ---------- Número de clienta ---------- */
.fila-cliente { grid-template-columns: minmax(92px, .55fr) 1fr 1fr; }
@media (max-width: 560px) { .fila-cliente { grid-template-columns: 1fr 1fr; } .fila-cliente > :last-child { grid-column: 1 / -1; } }
.campo-numero input { font-family: var(--f-display); font-size: 20px; letter-spacing: .04em; color: var(--oro-claro); text-align: center; }
.campo-numero input::placeholder { font-family: var(--f-texto); font-size: 13px; letter-spacing: .06em; }
.planilla td.c-numcli { color: var(--oro-claro); font-family: var(--f-display); font-size: 16px; text-align: center; min-width: 76px; }
.planilla th.c-numcli { text-align: center; }
.c-zonas { color: var(--oro-claro); font-size: 12.5px; }
.it-num { color: var(--oro); font-size: 11px; letter-spacing: .1em; font-weight: 500; margin-left: 4px; }
.det-num { font: 500 24px/1 var(--f-display); color: var(--oro-claro); }

/* ---------- Zonas: en el turno ---------- */
.zonas-campo { margin-top: -4px; }
.zonas-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zona-chip {
  display: grid; gap: 2px; min-width: 104px; padding: 10px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r); background: transparent; color: var(--tinta);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.zona-chip b { font: 500 18px/1.1 var(--f-display); }
.zona-chip small { font-size: 11.5px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.zona-chip:hover { border-color: var(--oro); transform: translateY(-1px); }
.zona-chip[aria-pressed="true"] { background: var(--azul-cab); border-color: var(--oro); box-shadow: inset 0 -2px 0 var(--oro); color: var(--sobre-azul); }
.zona-chip[aria-pressed="true"] small { color: var(--sobre-azul-tenue); }

/* ---------- Zonas: en la lista de servicios ---------- */
.alta-servicio .cs-zonas, .cat-editar .cs-zonas { grid-column: 1 / -1; }
.zonas-editor { display: grid; gap: 8px; }
.zonas-filas { display: grid; gap: 6px; }
.zonas-filas:empty { display: none; }
.zona-fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(90px, .8fr) minmax(110px, 1fr) 32px; gap: 8px; align-items: center; }
.zona-fila input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--linea-fuerte); border-radius: var(--r); background: var(--superficie-2); }
.zona-fila input:focus { outline: none; border-color: var(--oro); }
.zona-fila input[aria-invalid="true"] { border-color: var(--rojo); }
.zf-min, .zf-precio { position: relative; display: flex; align-items: center; }
.zf-min span { position: absolute; right: 10px; font-size: 11px; letter-spacing: .1em; color: var(--tinta-tenue); pointer-events: none; }
.zf-min input { padding-right: 38px; }
.zf-precio span { position: absolute; left: 10px; color: var(--oro); pointer-events: none; }
.zf-precio input { padding-left: 24px; }
.zona-agregar { justify-self: start; }
@media (max-width: 560px) { .zona-fila { grid-template-columns: 1fr 1fr 32px; } .zona-fila .zf-nombre { grid-column: 1 / -1; } }
.cat-zonas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cat-zona { padding: 3px 10px; border: 1px solid var(--linea-azul); background: color-mix(in srgb, var(--azul-cab) 40%, transparent); font-size: 12px; color: var(--tinta-suave); }
.cat-zona b { font-weight: 500; color: var(--tinta); }

/* ---------- Zonas: en el link de la clienta ---------- */
.pd-zonas { display: grid; gap: 8px; margin-top: 6px; }
.pd-zonas-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-zona span { min-width: 0; }
.pd-zona span b { font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .widget { animation: none; } .w-dos { animation: none; } }
@media (max-width: 719px) {
  .w-hora { font-size: 44px; }
  .widget { padding: 16px 18px; }
  .w-grande { font-size: 34px; }
}

/* =====================================================================
   VERSIÓN 9 · Blanco hueso, lapislázuli de mar y oro Versace
   Moda de Wall Street: mucho aire, filetes finos de oro, el azul de la
   piedra en degradé (del abismo al lapislázuli) y letras bien presentes.
   La noche queda en negro laca y oro (sin marrones).
   ===================================================================== */

/* ---------- Letras: más presentes, sin perder la finura ---------- */
.eyebrow { font: 600 12px/1.3 var(--f-texto); letter-spacing: .3em; }
.eyebrow::before { width: 34px; background: linear-gradient(90deg, transparent, currentColor); }
.titulo, .titulo-fecha { font-weight: 500; }
:root[data-theme="light"] .titulo, :root[data-theme="light"] .titulo-fecha {
  background: linear-gradient(100deg, #050F27 0%, #0A1E4C 45%, #173E8C 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.texto, .ayuda { color: var(--tinta-suave); }
.ayuda { font-size: 13.5px; }
.enlace { font-weight: 600; }
.enlace-chico { font-size: 11.5px; }
.marca-grande .marca-sub { font-size: 11px; }
.pc-sem { font-size: 11px; font-weight: 600; }
.pc-grilla .dia small { font-size: 10.5px; }
.segmentado-chico span { font-size: 11px; }
.libre span { font-size: 10.5px; font-weight: 600; }
.chat-burbuja time { font-size: 11px; }
.th-orden i { font-size: 9px; }
.cart-sep { font-size: 10px; }
.chip { font-size: 13px; font-weight: 500; }
.etiqueta { font-weight: 600; }
@media (max-width: 719px) {
  .tile-l { font-size: 10px; letter-spacing: .1em; }
  .tile small { font-size: 11.5px; }
}
@media (max-width: 480px) { .aviso-demo { font-size: 10.5px; } }

/* ---------- Botones: lapislázuli con letras de oro; al pasar, oro en lámina ---------- */
.boton { min-height: 44px; font: 600 12px/1.2 var(--f-texto); letter-spacing: .18em; }
.boton-principal { background: var(--oro-foil); border-color: #B8902F; color: var(--sobre-oro); }
.boton-principal:hover:not(:disabled) { background: var(--oro-foil); border-color: #E2C477; filter: brightness(1.08); }
:root[data-theme="light"] .boton-principal {
  background: var(--mar); border-color: #0A1E4C; color: var(--sobre-mar);
  box-shadow: inset 0 0 0 1px rgba(241, 223, 169, .22), 0 8px 22px rgba(10, 30, 76, .18);
}
:root[data-theme="light"] .boton-principal:hover:not(:disabled) { background: var(--oro-foil); border-color: #B8902F; color: #0A0805; filter: none; }
.boton-suave { color: var(--oro-claro); border-color: var(--linea-oro); }
:root[data-theme="light"] .boton-suave { color: var(--tinta); }
.boton-suave:hover:not(:disabled) { background: var(--oro-suave); border-color: var(--oro); }
:root[data-theme="light"] .boton-suave:hover:not(:disabled) { background: var(--oro-suave); color: var(--tinta); }
.segmentado input:checked + span { background: var(--oro-foil); color: var(--sobre-oro); }
:root[data-theme="light"] .segmentado input:checked + span { background: var(--mar); color: var(--sobre-mar); }
.chip[aria-pressed="true"] { background: var(--oro-foil); border-color: #B8902F; color: var(--sobre-oro); }
:root[data-theme="light"] .chip[aria-pressed="true"] { background: var(--mar); border-color: #0A1E4C; color: var(--sobre-mar); }
.dia-check input:checked + span { background: var(--oro-foil); border-color: #B8902F; color: var(--sobre-oro); }
:root[data-theme="light"] .dia-check input:checked + span { background: var(--mar); border-color: #0A1E4C; color: var(--sobre-mar); }
.chat-enviar { background: var(--oro-foil); border-color: #B8902F; }
:root[data-theme="light"] .chat-enviar { background: var(--mar); border-color: #0A1E4C; color: var(--sobre-mar); }
.badge { background: var(--azul-cab); color: var(--sobre-mar); border-color: var(--oro-hondo); }
:root:not([data-theme="light"]) .badge { background: var(--oro-foil); color: var(--sobre-oro); }

/* ---------- Las cajas: papel hueso, filete de oro arriba y un esquinero barroco ---------- */
.bloque, .ficha, .pedido, .pedir-paso, .gs-tarjeta {
  position: relative; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-chica);
}
.bloque::before, .ficha::before, .pedido::before, .pedir-paso::before, .gs-tarjeta::before, .gs-kpis::before, .tablero::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--oro-filete); pointer-events: none; z-index: 1;
}
.bloque::after, .gs-tarjeta::after {
  content: ''; position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; pointer-events: none;
  background: var(--esquinero) no-repeat center / 22px 22px; transform: scaleX(-1); opacity: .5;
}
.bloque legend .num, .pedir-paso h2 > span { background: var(--mar); color: var(--sobre-mar); border-color: var(--oro-hondo); }
.bloque legend { background: linear-gradient(90deg, var(--oro-hondo), var(--oro)) left bottom / 64px 2px no-repeat; }
.ficha { border-top: 1px solid var(--linea); background: var(--superficie); }
:root[data-theme="light"] .ficha { background: linear-gradient(180deg, rgba(23, 62, 140, .06), var(--superficie) 150px); }
.pedido { border-top: 1px solid var(--linea); }
.vacio { background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-chica); }
:root[data-theme="light"] .vacio { background: linear-gradient(180deg, rgba(23, 62, 140, .07), var(--superficie) 75%); border-color: var(--linea-azul); }
.rec-envio { background: linear-gradient(100deg, color-mix(in srgb, var(--oro) 12%, var(--superficie-2)), var(--superficie-2) 70%); }
:root[data-theme="light"] .rec-envio { background: linear-gradient(100deg, rgba(23, 62, 140, .1), var(--superficie) 72%); border: 1px solid var(--linea); border-left: 2px solid var(--oro); }
.cat-zona { background: var(--superficie-2); border-color: var(--linea); }
:root[data-theme="light"] .cat-zona { background: rgba(23, 62, 140, .06); border-color: var(--linea-azul); }
.servicio-info { border-left-color: var(--lapis); }
:root:not([data-theme="light"]) .servicio-info { border-left-color: var(--oro); }

/* ---------- Encabezados de tablas, grillas y calendarios: azul de mar con oro ---------- */
.planilla th, .grilla-cab, .mes-sem, .pc-sem, .tabla-recuento thead th, .tabla-ajustes th {
  background-color: var(--azul-cab); color: var(--sobre-mar);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 70%);
  border-bottom-color: var(--oro-hondo);
}
.planilla th { font: 600 11px/1 var(--f-texto); color: var(--sobre-mar-tenue); }
.th-orden:hover, .th-orden[aria-sort], .planilla th[aria-sort] .th-orden { color: var(--sobre-mar); }
.gc-sub small { color: var(--sobre-mar-tenue); }
.gc-sub b { color: var(--sobre-mar); }

/* ---------- Tablero del día ---------- */
.tablero { position: relative; border: 1px solid var(--linea); box-shadow: var(--sombra-chica); }
.tile { background: var(--superficie); }
.tile-n { font-weight: 500; }
.tile-total, :root[data-theme="light"] .tile-total {
  --c: #F6E3A8; background-color: var(--azul-cab);
  background-image: var(--mar); background-size: 100% 100%;
}
.tile-total:hover, :root[data-theme="light"] .tile-total:hover { background-image: var(--mar); filter: brightness(1.08); }
.tile-total .tile-l, .tile-total small { color: var(--sobre-mar-tenue); }

/* ---------- La barrita de mensajes: una veta de lapislázuli ---------- */
.cartelera {
  height: 34px; background-color: var(--azul-cab); color: var(--sobre-mar);
  background-image: var(--mar); background-size: 100% 100%;
  border-bottom: 1px solid var(--oro-hondo);
}
.cartelera-boton { border-left-color: rgba(241, 223, 169, .3); }
.cartelera-boton:hover, .cartelera-boton[aria-expanded="true"] { background: rgba(241, 223, 169, .14); }
.cart-item { font-size: 11.5px; }

/* ---------- Widgets: tarjetas de papel con marco interior de oro; el reloj, de piedra ---------- */
.widget {
  outline: 1px solid color-mix(in srgb, var(--oro-hondo) 34%, transparent); outline-offset: -7px;
  border: 1px solid var(--linea);
  background: linear-gradient(170deg, var(--superficie-2), var(--superficie) 80%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}
:root[data-theme="light"] .widget {
  background: var(--mar) top / 100% 3px no-repeat, linear-gradient(175deg, #FFFFFF, #FBF8F2 85%);
  border-color: rgba(10, 30, 76, .12); border-top-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 38px rgba(10, 30, 76, .10);
}
:root[data-theme="light"] .widget:hover { box-shadow: 0 24px 48px rgba(10, 30, 76, .15); }
.widget::before, .widget::after { opacity: .75; }
.w-eyebrow, .w-titulo { font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .26em; }
.w-numeros dt { font-size: 10px; letter-spacing: .12em; }
.w-sub, .w-lista li small { font-size: 13px; }
.widget-reloj, :root[data-theme="light"] .widget-reloj {
  color: var(--sobre-mar); border-color: transparent;
  background-color: var(--azul-cab);
  background-image: var(--mar); background-size: 100% 100%;
  outline-color: color-mix(in srgb, #F3DC9B 40%, transparent);
}
.widget-reloj .w-eyebrow { color: var(--sobre-mar); }
.widget-reloj .w-hora { color: #FFF8E8; }
.widget-reloj .w-dos { color: #F3DC9B; }
.widget-reloj .w-fecha, .widget-reloj .w-sub { color: var(--sobre-mar-tenue); }
.widget-pedidos.con-algo { outline-color: var(--oro); }

/* ---------- Ventana del turno: banda de mar arriba ---------- */
.detalle, :root[data-theme="light"] .detalle {
  border: 1px solid var(--linea-oro); border-top: 0;
  background: var(--mar) top / 100% 6px no-repeat, var(--elevada);
}
.detalle::backdrop { background: rgba(5, 15, 39, .55); }
.detalle-in { padding-top: 36px; }
.det-cab h2 { font-weight: 500; }
.det-horario { color: var(--oro); font-weight: 500; }
.det-importe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.det-importe .con-prefijo input { width: 150px; min-height: 40px; padding: 0 12px 0 28px; border: 1px solid var(--oro); border-radius: var(--r); background: var(--superficie-2); font-variant-numeric: tabular-nums; }
.det-importe .con-prefijo input:focus { outline: none; box-shadow: 0 0 0 3px var(--oro-suave); }
.det-cambios { border-top: 1px solid var(--linea); padding-top: 14px; }
.det-cambios summary { cursor: pointer; font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.det-cambios-ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.det-cambios-ol > li { padding-left: 14px; border-left: 2px solid var(--linea-oro); }
.det-cambios-ol ul { margin: 4px 0 0; padding-left: 18px; color: var(--tinta-suave); }
.det-cambios-ol s { color: var(--tinta-tenue); text-decoration-thickness: 1px; }

/* ---------- Entrar: la piedra entera de fondo y la tarjeta de papel ---------- */
.login, :root[data-theme="light"] .login {
  background-color: var(--azul-cab);
  background-image: var(--mar); background-size: 100% 100%;
}
.login-caja {
  background: var(--elevada); border: 1px solid color-mix(in srgb, #F3DC9B 55%, transparent); border-top: 0;
  outline: 1px solid var(--linea-oro); outline-offset: -9px;
  box-shadow: 0 50px 110px rgba(0, 0, 0, .45);
}
.login-caja::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--oro-foil); }
.login-titulo { font-weight: 500; font-size: 26px; }

/* ---------- Chat: cabecera de piedra ---------- */
.chat-cab {
  background-color: var(--azul-cab);
  background-image: var(--mar); background-size: 100% 100%;
  border-bottom-color: var(--oro-hondo);
}
.chat-eyebrow { color: var(--sobre-mar); }
.chat-titulo { color: #FFF8E8; font-weight: 500; }
:root[data-theme="light"] .chat-burbuja { background: #EDF1F8; border-color: rgba(23, 62, 140, .14); border-left-color: var(--lapis); }
:root[data-theme="light"] .chat-mio .chat-burbuja { background: #F6EDD8; border-color: var(--linea-oro); }

/* ---------- Cuentas del equipo ---------- */
.cuenta-principal { background: linear-gradient(90deg, var(--oro-suave), transparent 70%); box-shadow: inset 2px 0 0 var(--oro); padding-inline: 14px; }
.etiqueta-principal { background: var(--oro-foil); color: var(--sobre-oro); border-color: #B8902F; }
.chip-gestion { border-color: var(--linea-oro); }

/* ---------- Herramientas: calculadora y juegos ---------- */
.herramienta { position: fixed; inset: 0; z-index: 56; pointer-events: none; outline: none; }
.herr-fondo { position: absolute; inset: 0; background: rgba(5, 15, 39, .46); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: auto; animation: herr-entra .25s var(--ease); }
.herr-caja {
  position: absolute; pointer-events: auto; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--elevada); border: 1px solid var(--linea-oro); box-shadow: var(--sombra); overflow: hidden;
  animation: herr-entra .3s var(--ease);
}
@keyframes herr-entra { from { opacity: 0; } }
.herramienta[data-tam="grande"] .herr-caja {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1000px, calc(100vw - 48px)); height: min(730px, calc(100vh - 40px));
}
.herramienta[data-tam="chica"] .herr-fondo { display: none; }
.herramienta[data-tam="chica"] .herr-caja { top: var(--chat-top, 0px); right: 0; bottom: 0; width: min(390px, 100vw); border-top: 0; border-right: 0; box-shadow: -30px 0 80px rgba(0, 0, 0, .3); }
.herr-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 13px 22px;
  color: var(--sobre-mar); background-color: var(--azul-cab);
  background-image: var(--mar); background-size: 100% 100%;
  border-bottom: 1px solid var(--oro-hondo);
}
.herr-eyebrow { margin: 0 0 5px; font: 600 11px/1.3 var(--f-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--sobre-mar-tenue); }
.herr-titulo { margin: 0; font: 500 28px/1 var(--f-display); color: #FFF8E8; }
.herr-cab .boton-icono { color: var(--sobre-mar); }
.herr-cab .boton-icono:hover { border-color: #F3DC9B; color: #fff; }
.herr-cuerpo { position: relative; min-height: 0; overflow: hidden; }
.herr-panel { height: 100%; min-height: 0; }
@media (max-width: 899px) {
  .herramienta .herr-caja, .herramienta[data-tam] .herr-caja { inset: 0; width: auto; height: auto; transform: none; border: 0; box-shadow: none; }
  .herr-fondo { display: none; }
  .herr-cab { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  body.herr-abierta { overflow: hidden; }
}

/* ---------- Gestión y finanzas ---------- */
:root { --gs-serie: #D4AF55; --gs-celda: #181818; }
:root[data-theme="light"] { --gs-serie: #173E8C; --gs-celda: #ECEFF5; }
.gs-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: 28px; }
.gs-cabecera .titulo { margin-bottom: 0; }
.gs-cabecera .titulo::after { margin-top: 12px; }
.gs-periodo { margin: 10px 0 0; font: italic 500 19px/1.3 var(--f-display); color: var(--tinta-suave); }
.gs-filtros { display: grid; gap: 10px; justify-items: end; }
.gs-presets span { padding-inline: 12px; }
.gs-rango { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gs-a { color: var(--tinta-suave); font-style: italic; }
.gs-cuerpo { transition: opacity .2s var(--ease); }
.gs-cuerpo.cargando { opacity: .55; }
.gs-kpis {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--linea); border: 1px solid var(--linea); box-shadow: var(--sombra-chica); margin-bottom: 24px;
}
.gs-kpi { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 22px 24px 20px; background: var(--superficie); }
.gs-kpi-l { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-suave); }
.gs-kpi-l::before { content: ''; width: 6px; height: 6px; background: var(--oro); transform: rotate(45deg); flex: none; }
.gs-kpi-n { margin: 0; font: 500 40px/1.05 var(--f-display); color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.gs-kpi-s { margin: 0; font-size: 13px; line-height: 1.4; color: var(--tinta-suave); }
.gs-delta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; color: var(--tinta-suave); }
.gs-delta i { font-style: normal; font-size: 11px; }
.gs-delta b { font-weight: 600; color: var(--tinta); }
.gs-bien i { color: var(--verde); }
.gs-mal i { color: var(--rojo); }
.gs-igual i { color: var(--tinta-tenue); }
.gs-kpi-principal { background-color: var(--azul-cab); background-image: var(--mar); background-size: 100% 100%; }
.gs-kpi-principal .gs-kpi-l, .gs-kpi-principal .gs-kpi-s, .gs-kpi-principal .gs-delta { color: var(--sobre-mar-tenue); }
.gs-kpi-principal .gs-kpi-l::before { background: #F3DC9B; }
.gs-kpi-principal .gs-kpi-n, .gs-kpi-principal .gs-delta b { color: #FFF8E8; }
.gs-kpi-principal .gs-bien i { color: #86EFAC; }
.gs-kpi-principal .gs-mal i { color: #FDA4AF; }
@media (max-width: 1180px) { .gs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gs-kpi { padding: 16px 14px; } .gs-kpi-n { font-size: 30px; } .gs-kpi-l { letter-spacing: .14em; font-size: 10.5px; } }
.gs-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.gs-ancho { grid-column: 1 / -1; }
@media (max-width: 960px) { .gs-grilla { grid-template-columns: minmax(0, 1fr); } }
.gs-tarjeta { display: grid; gap: 18px; align-content: start; min-width: 0; padding: 26px 28px 24px; }
@media (max-width: 560px) { .gs-tarjeta { padding: 22px 16px 18px; } }
.gs-t-cab { display: grid; gap: 5px; padding-right: 28px; }
.gs-t-titulo { margin: 0; font: 500 27px/1.1 var(--f-display); }
.gs-t-sub { margin: 0; font-size: 13.5px; color: var(--tinta-suave); }
/* columnas: facturación por día */
.gs-columnas { display: grid; grid-template-columns: 74px minmax(0, 1fr); height: 230px; margin-bottom: 28px; }
.gs-eje-y { position: relative; }
.gs-eje-y span { position: absolute; right: 12px; transform: translateY(50%); font-size: 11.5px; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-area { position: relative; border-bottom: 1px solid var(--linea-fuerte); }
.gs-guia { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--linea); }
.gs-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding-inline: 4px; }
.gs-col { position: relative; flex: 1 1 0; max-width: 24px; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.gs-col i { display: block; width: 100%; background: var(--gs-serie); border-radius: 4px 4px 0 0; transition: filter .15s var(--ease); }
.gs-col:hover i { filter: brightness(1.2); }
.gs-col small { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--tinta-tenue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gs-col-hoy small { color: var(--oro); font-weight: 600; }
.gs-oculta { visibility: hidden; }
@media (max-width: 560px) { .gs-columnas { grid-template-columns: 58px minmax(0, 1fr); height: 190px; } .gs-eje-y span { font-size: 10.5px; right: 8px; } }
/* barras horizontales */
.gs-barras { list-style: none; margin: 0; padding: 0; display: grid; }
.gs-fila { display: grid; grid-template-columns: minmax(110px, 36%) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--linea); }
.gs-fila:first-child { border-top: 0; }
.gs-fila-n { display: grid; gap: 2px; min-width: 0; font-weight: 500; font-size: 14.5px; }
.gs-fila-n, .gs-fila-n small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-fila-n small { font-size: 12px; font-weight: 400; color: var(--tinta-suave); }
.gs-pista { height: 12px; background: var(--gs-celda); border-radius: 0 4px 4px 0; overflow: hidden; }
.gs-pista i { display: block; height: 100%; background: var(--gs-serie); border-radius: 0 4px 4px 0; transition: filter .15s var(--ease); }
.gs-fila:hover .gs-pista i { filter: brightness(1.2); }
.gs-fila-v { min-width: 66px; text-align: right; font: 500 19px/1 var(--f-display); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 560px) { .gs-fila { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; } .gs-pista { grid-column: 1 / -1; grid-row: 2; } }
/* asistencia */
.gs-pila { display: flex; gap: 2px; height: 20px; border-radius: 4px; overflow: hidden; }
.gs-pila i { display: block; min-width: 4px; }
.gs-leyenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.gs-leyenda li { display: flex; align-items: center; gap: 9px; font-size: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.gs-leyenda .w-punto { margin-top: 0; }
.gs-leyenda b { margin-left: auto; font: 500 24px/1 var(--f-display); font-variant-numeric: lining-nums tabular-nums; }
.gs-leyenda small { min-width: 44px; text-align: right; font-size: 12.5px; color: var(--tinta-suave); }
/* días y horarios pico */
.gs-calor { display: grid; grid-template-columns: 46px repeat(var(--h), minmax(0, 1fr)); gap: 3px; align-items: center; }
.gs-calor small { text-align: center; font-size: 11px; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.gs-calor b { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.gs-calor i { display: block; height: 30px; border-radius: 3px; }
.gs-calor i:hover { outline: 2px solid var(--oro); outline-offset: 1px; }
@media (max-width: 560px) { .gs-calor { grid-template-columns: 34px repeat(var(--h), minmax(0, 1fr)); gap: 2px; } .gs-calor i { height: 24px; } .gs-calor small { font-size: 9.5px; } .gs-calor b { font-size: 10px; letter-spacing: .04em; } }
.gs-escala { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; font-size: 12px; color: var(--tinta-suave); }
.gs-escala i { display: inline-block; width: 24px; height: 12px; border-radius: 2px; }
/* clientas */
.gs-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--linea); border: 1px solid var(--linea); }
.gs-mini div { display: grid; gap: 5px; padding: 14px 18px; background: var(--superficie); }
.gs-mini dt { font: 600 11px/1.3 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.gs-mini dd { margin: 0; font: 500 32px/1 var(--f-display); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 560px) { .gs-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gs-frase { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave); max-width: 90ch; }
.gs-frase b { color: var(--tinta); font-weight: 600; }
.gs-top caption { padding: 6px 0 10px; font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); text-align: left; }
.gs-tabla summary { cursor: pointer; width: max-content; font: 600 11px/1.3 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.gs-tabla .tabla-marco { margin-top: 10px; max-height: 340px; }
.gs-nota { margin-top: 24px; max-width: 120ch; }
.gs-tip {
  position: fixed; z-index: 80; pointer-events: none; max-width: 270px; padding: 10px 13px;
  background: var(--elevada); color: var(--tinta); border: 1px solid var(--linea-oro); border-top: 2px solid var(--oro);
  box-shadow: var(--sombra-chica); font-size: 13px; line-height: 1.5;
}
.gs-tip b { font-weight: 600; }
@media (max-width: 719px) { .gs-filtros { justify-items: stretch; width: 100%; } .gs-presets { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } .gs-presets label:nth-child(4) { border-left: 0; } .gs-presets label:nth-child(n+4) { border-top: 1px solid var(--linea-fuerte); } }

/* ajustes finos para el celular */
@media (max-width: 719px) { .tile-l::before { display: none; } .tile-l { letter-spacing: .06em; } }
.gs-top th, .gs-top td { white-space: normal; }
.gs-top tbody th { min-width: 0; }
.gs-ancho .gs-barras { column-gap: 40px; }
@media (min-width: 961px) { .gs-ancho .gs-barras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gs-ancho .gs-fila:nth-child(2) { border-top: 0; } }
.aviso-pedidos { background-color: var(--azul-cab); background-image: var(--mar); background-size: 100% 100%; border-color: var(--oro-hondo); color: var(--sobre-mar); }
.aviso-pedidos b { color: #FFF8E8; }
@media (max-width: 899px) {
  .pestanas.mas-abierto .pestana.secundaria .txt-largo { display: inline; }
  .pestanas.mas-abierto .pestana.secundaria .txt-corto { display: none; }
}
.input-fecha { letter-spacing: .03em; }
@media (max-width: 719px) { .navegador .input-fecha { width: 162px; padding-right: 38px; } }

.usuario-nombre { max-width: none; overflow: visible; }
.usuario-txt { min-width: 0; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1100px) { .usuario-txt { max-width: 14ch; } }
/* números del widget "El día": de a dos, para que las palabras no se pisen */
.w-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.w-numeros div { grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
.w-numeros dt { font-size: 10.5px; letter-spacing: .1em; order: 2; }
.w-numeros dd { order: 1; font-size: 24px; }

/* =====================================================================
   VERSIÓN 10 · MEDIANOCHE
   Negro azulado profundo, oro Versace y el mar: azul marino europeo que
   se abre en lapislázuli. Formas redondeadas y suaves, como el iPhone;
   widgets con vida (entran, respiran, cuentan). Sin motas ni esquineros.
   ===================================================================== */

/* el filo de las cajas: oro arriba que se apaga hacia el mar */
:root { --filo: linear-gradient(155deg, rgba(243, 220, 155, .55), rgba(212, 175, 85, .10) 30%, rgba(90, 140, 230, .10) 70%, rgba(42, 107, 208, .38)); }
:root[data-theme="light"] { --filo: linear-gradient(155deg, rgba(184, 144, 47, .65), rgba(184, 144, 47, .14) 30%, rgba(23, 62, 140, .10) 70%, rgba(23, 62, 140, .4)); }

/* ---------- El fondo: noche con un resplandor de mar arriba ---------- */
body {
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(29, 86, 176, .20), transparent 70%),
    radial-gradient(900px 600px at 110% 10%, rgba(212, 175, 85, .045), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="light"] body {
  background: radial-gradient(1100px 520px at 50% -180px, rgba(29, 86, 176, .10), transparent 70%), var(--bg);
  background-attachment: fixed;
}

/* ---------- La barra de arriba: vidrio oscuro ---------- */
.barra { background: var(--vidrio); border-bottom: 1px solid rgba(212, 175, 85, .22); }
.barra::after { height: 2px; background: var(--mar-vivo); box-shadow: 0 2px 14px rgba(42, 107, 208, .45); }
.usuario-rol { border-radius: 999px; padding: 3px 9px 2px; background: var(--oro-suave); }
.barra-botones { border-left: 0; }
.boton-icono { border-radius: 12px; }
.boton-herr { border-radius: 16px; transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
.boton-herr:hover { transform: translateY(-2px); }
.boton-herr:active { transform: scale(.94); }
.boton-herr[aria-expanded="true"]::after { left: 18px; right: 18px; bottom: 2px; border-radius: 2px; }

/* las secciones: pastillas suaves (la elegida, con un brillo de oro) */
@media (min-width: 900px) {
  .pestanas { gap: 4px; padding-bottom: 8px; }
  .pestana { border-radius: 999px; padding: 10px 16px; transition: color .2s var(--ease), background-color .25s var(--ease); }
  .pestana + .pestana::before { display: none; }
  .pestana:hover { background: rgba(196, 210, 255, .06); }
  .pestana[aria-current="page"] { color: var(--oro-claro); background: linear-gradient(180deg, rgba(212, 175, 85, .18), rgba(212, 175, 85, .07)); box-shadow: inset 0 0 0 1px rgba(212, 175, 85, .32); }
  .pestana[aria-current="page"]::after { display: none; }
  :root[data-theme="light"] .pestana:hover { background: rgba(10, 30, 76, .05); }
  :root[data-theme="light"] .pestana[aria-current="page"] { color: #fff; background: var(--mar); box-shadow: 0 6px 18px rgba(10, 30, 76, .22); }
}
@media (min-width: 900px) and (max-width: 1320px) { .pestana { padding-inline: 12px; } }
@media (min-width: 900px) and (max-width: 1100px) { .pestana { padding-inline: 9px; } }
@media (max-width: 899px) {
  .pestanas { background: var(--mar); border-top: 1px solid rgba(212, 175, 85, .35); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); }
  .pestana { border-radius: 14px; }
  .pestana[aria-current="page"] { background: rgba(241, 223, 169, .12); }
  .pestana[aria-current="page"]::after { display: none; }
  .pestana[aria-current="page"] svg { color: #F3DC9B; transform: translateY(-1px) scale(1.08); }
  .pestana svg { transition: transform .3s var(--ease); }
}

/* ---------- La barrita de mensajes: una veta de mar (anónima) ---------- */
.cartelera { background-color: var(--azul-cab); background-image: var(--mar-vivo); border-bottom: 1px solid rgba(212, 175, 85, .35); }
.cartelera::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .09) 45%, transparent 60%) no-repeat;
  background-size: 260% 100%; animation: brillo-mar 9s linear infinite;
}
@keyframes brillo-mar { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.cart-sub { margin-left: 16px; font-weight: 500; letter-spacing: .16em; opacity: .72; }
.cart-sep { display: inline-grid; place-items: center; padding-inline: 24px; }
.cart-sep i { display: block; width: 5px; height: 5px; background: #F3DC9B; transform: rotate(45deg); box-shadow: 0 0 8px rgba(243, 220, 155, .8); }
.cartelera-panel { border-radius: var(--r-caja); }

/* ---------- Formas: todo redondeado ---------- */
.chip, .eb, .etiqueta, .badge, .semaforo-chip, .usuario-rol { border-radius: 999px; }
.campo input, .campo select, .campo textarea, .buscador input, .tabla-ajustes input, .alta-rapida input,
.input-fecha, .selector-hora select, .celda-input, .cartelera-form input, .chat-form textarea, .input-mini, .select-mini { border-radius: 14px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .buscador input:focus, .tabla-ajustes input:focus,
.selector-hora select:focus, .input-fecha:focus, .alta-rapida input:focus, .cartelera-form input:focus, .chat-form textarea:focus {
  box-shadow: 0 0 0 4px rgba(212, 175, 85, .16);
}
.pop-cal { border-radius: 22px; }
.pc-grilla { gap: 3px; }
.pc-sem { border-radius: 8px; }
.pc-grilla .dia { border-radius: 12px; }
.pc-grilla .dia.elegido { background: var(--oro-foil); box-shadow: 0 6px 16px rgba(212, 175, 85, .35); }
.aviso-linea, .toast, .error-texto { border-radius: 16px; }
.error-texto { border-left-width: 3px; }

/* botones: suaves al tocar */
.boton { border-radius: 14px; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); }
.boton:active:not(:disabled), .chip:active:not(:disabled), .eb:active:not(:disabled), .tile:active { transform: scale(.97); }
.boton-principal { position: relative; overflow: hidden; box-shadow: 0 10px 26px rgba(212, 175, 85, .22), inset 0 1px 0 rgba(255, 255, 255, .35); }
.boton-principal::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.boton-principal:hover:not(:disabled)::after { transform: translateX(120%); }
.boton-principal:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(212, 175, 85, .32), inset 0 1px 0 rgba(255, 255, 255, .35); }
:root[data-theme="light"] .boton-principal { box-shadow: 0 10px 24px rgba(10, 30, 76, .24), inset 0 1px 0 rgba(255, 255, 255, .2); }
.boton-suave { background: rgba(196, 210, 255, .04); }
:root[data-theme="light"] .boton-suave { background: #fff; }

/* control segmentado, como el de iOS */
.segmentado { gap: 3px; padding: 3px; border-radius: 16px; background: var(--superficie-2); border-color: var(--linea); }
.segmentado label + label { border-left: 0; }
.segmentado span { border-radius: 12px; }
.segmentado input:checked + span { box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
@media (max-width: 520px) { .segmentado-canal label:nth-child(n+3) { border-top: 0; } }

/* ---------- Las cajas: redondeadas, con un filo de oro que se apaga hacia el mar ---------- */
.bloque, .ficha, .pedido, .pedir-paso, .gs-tarjeta, .vacio, .tabla-marco, .grilla-marco, .tablero-cuenta, .rec-envio, .cat-zona, .gs-kpis {
  border-radius: var(--r-caja);
}
.bloque, .ficha, .pedido, .pedir-paso, .gs-tarjeta, .vacio {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(196, 210, 255, .035), transparent 140px), var(--superficie);
  border: 1px solid transparent; box-shadow: var(--sombra-chica);
}
.bloque::before, .ficha::before, .pedido::before, .pedir-paso::before, .gs-tarjeta::before, .vacio::before {
  content: ''; position: absolute; inset: -1px; height: auto; z-index: -1;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--filo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.bloque::after, .gs-tarjeta::after { display: none; }
:root[data-theme="light"] .bloque, :root[data-theme="light"] .ficha, :root[data-theme="light"] .pedido,
:root[data-theme="light"] .pedir-paso, :root[data-theme="light"] .gs-tarjeta, :root[data-theme="light"] .vacio {
  background: linear-gradient(180deg, rgba(23, 62, 140, .035), transparent 140px), var(--superficie);
}
.bloque legend { background: none; }
.bloque legend::after { content: ''; display: block; width: 64px; height: 2px; margin-top: 12px; border-radius: 2px; background: var(--oro-foil); }
.bloque legend { border-bottom: 0; padding-bottom: 6px; }
.bloque legend .num, .pedir-paso h2 > span { border-radius: 10px; background: var(--mar); }
.tabla-marco, .grilla-marco { border-color: var(--linea); box-shadow: var(--sombra-chica); }
.cuenta-principal { border-radius: 16px; }

/* ---------- Tablero del día: fichas sueltas que cuentan ---------- */
.tablero { gap: 12px; border: 0; box-shadow: none; background: none; }
.tablero::before { display: none; }
.tile {
  border: 1px solid var(--linea); border-radius: 22px; padding: 20px 22px 18px;
  background: linear-gradient(180deg, rgba(196, 210, 255, .04), transparent 70%), var(--superficie);
  box-shadow: var(--sombra-chica); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
  animation: pop-in .55s cubic-bezier(.2, .9, .3, 1.25) both;
}
.tile:first-child { border-left: 1px solid var(--linea); }
.tile:nth-child(2) { animation-delay: .05s; } .tile:nth-child(3) { animation-delay: .1s; }
.tile:nth-child(4) { animation-delay: .15s; } .tile:nth-child(5) { animation-delay: .2s; }
.tablero[data-listo] .tile { animation: none; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0, 0, 0, .5); border-color: color-mix(in srgb, var(--c) 45%, transparent); background-color: var(--superficie); }
.tile::after { left: 22px; right: 22px; bottom: 10px; height: 3px; border-radius: 3px; }
.tile[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 18px 40px color-mix(in srgb, var(--c) 22%, transparent); }
.tile-l::before { border-radius: 2px; }
.tile-total, :root[data-theme="light"] .tile-total { background-color: var(--azul-cab); background-image: var(--mar-vivo); border-color: rgba(243, 220, 155, .3); }
.tile-total:hover, :root[data-theme="light"] .tile-total:hover { background-image: var(--mar-vivo); filter: brightness(1.1); }
:root[data-theme="light"] .tile:not(.tile-total) { background: #fff; }
@media (max-width: 899px) { .tablero { gap: 8px; } .tile { border-radius: 18px; padding: 14px 14px 12px; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Encabezados de tablas y grillas: el mar ---------- */
.planilla th, .grilla-cab, .mes-sem, .tabla-recuento thead th, .tabla-ajustes th { background-color: var(--azul-cab); background-image: var(--mar); background-size: 100vw 100%; background-attachment: fixed; }
.planilla td { transition: background-color .2s var(--ease); }

/* ---------- Ventanas: el detalle del turno, entrar, pedir ---------- */
.detalle, :root[data-theme="light"] .detalle {
  border-radius: 30px; border: 1px solid rgba(212, 175, 85, .4);
  background: var(--mar-vivo) top / 100% 7px no-repeat, linear-gradient(180deg, rgba(42, 107, 208, .10), transparent 220px), var(--elevada);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .65);
}
.detalle[open] { animation: hoja-entra .42s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes hoja-entra { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
.detalle::backdrop { background: rgba(2, 6, 18, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.det-importe .con-prefijo input { border-radius: 14px; }
.login, :root[data-theme="light"] .login { background-color: #030A1C; background-image: radial-gradient(800px 500px at 20% 0%, rgba(42, 107, 208, .45), transparent 70%), var(--mar); background-size: 100% 100%; }
.login-caja {
  border-radius: 32px; border: 1px solid rgba(243, 220, 155, .35); outline: 0;
  background: linear-gradient(180deg, rgba(12, 17, 28, .82), rgba(12, 17, 28, .94)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 60px 140px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: hoja-entra .6s cubic-bezier(.2, .9, .3, 1.15) both;
}
:root[data-theme="light"] .login-caja { background: rgba(255, 253, 248, .94); }
.login-caja::after { left: 40px; right: 40px; border-radius: 0 0 4px 4px; }
.login-caja::before { display: none; }

/* ---------- Paneles a pantalla completa: chat, calculadora y juegos (no hay que bajar para verlos) ---------- */
.chat {
  top: 12px; right: 12px; bottom: 12px; height: auto; width: min(420px, calc(100vw - 24px)); z-index: 80;
  border: 1px solid rgba(212, 175, 85, .35); border-radius: 30px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .65);
  animation: panel-entra .42s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes panel-entra { from { opacity: 0; transform: translateX(40px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-cab { background-color: var(--azul-cab); background-image: var(--mar-vivo); border-bottom: 1px solid rgba(243, 220, 155, .35); }
.chat-cab::after { display: none; }
.chat-burbuja { border-radius: 18px 18px 18px 6px; border-left-width: 1px; }
.chat-mio .chat-burbuja { border-radius: 18px 18px 6px 18px; border-right-width: 1px; background: linear-gradient(135deg, rgba(212, 175, 85, .22), rgba(212, 175, 85, .1)); }
.chat-msg { animation: msg-entra .35s var(--ease) both; }
@keyframes msg-entra { from { opacity: 0; transform: translateY(8px); } }
.chat-enviar { border-radius: 50%; box-shadow: 0 8px 20px rgba(212, 175, 85, .3); }
.chat-form { background: var(--elevada); }
.chat-nota { background: var(--elevada); }
.herramienta { z-index: 80; }
.herr-fondo { background: rgba(2, 6, 18, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.herr-caja { border-radius: 30px; border: 1px solid rgba(212, 175, 85, .35); box-shadow: 0 50px 130px rgba(0, 0, 0, .65); animation: hoja-entra .42s cubic-bezier(.2, .9, .3, 1.1); }
.herramienta[data-tam="grande"] .herr-caja { top: 12px; bottom: 12px; left: 50%; transform: translateX(-50%); width: min(1120px, calc(100vw - 24px)); height: auto; animation: herr-grande .42s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes herr-grande { from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(.97); } to { opacity: 1; transform: translateX(-50%); } }
.herramienta[data-tam="chica"] .herr-caja { top: 12px; right: 12px; bottom: 12px; width: min(400px, calc(100vw - 24px)); border: 1px solid rgba(212, 175, 85, .35); animation: panel-entra .42s cubic-bezier(.2, .9, .3, 1.1); }
.herr-cab { background-color: var(--azul-cab); background-image: var(--mar-vivo); border-bottom: 1px solid rgba(243, 220, 155, .35); }
@media (max-width: 899px) {
  .chat, .herramienta .herr-caja, .herramienta[data-tam] .herr-caja { inset: 0; width: auto; height: auto; transform: none; border: 0; border-radius: 0; animation-name: hoja-sube; }
  .chat { top: 0; }
  @keyframes hoja-sube { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  .chat-cab { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
}

/* ---------- Gestión: fichas sueltas ---------- */
.gs-kpis { gap: 12px; background: none; border: 0; box-shadow: none; }
.gs-kpis::before { display: none; }
.gs-kpi { border-radius: 22px; border: 1px solid var(--linea); box-shadow: var(--sombra-chica); animation: pop-in .55s cubic-bezier(.2, .9, .3, 1.2) both; }
.gs-kpi:nth-child(2) { animation-delay: .06s; } .gs-kpi:nth-child(3) { animation-delay: .12s; } .gs-kpi:nth-child(4) { animation-delay: .18s; }
.gs-kpi-l::before { border-radius: 2px; }
.gs-kpi-principal { background-image: var(--mar-vivo); border-color: rgba(243, 220, 155, .3); }
.gs-tarjeta { animation: sube .5s var(--ease) both; }

/* ---------- Al cambiar de sección, la pantalla entra suave ---------- */
.vista:not([hidden]) { animation: sube .45s var(--ease) both; }
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Widgets como los del iPhone: redondos, con íconos, que entran y cuentan ---------- */
.widgets { gap: 14px; }
@media (min-width: 1400px) {
  .agenda-cuerpo { grid-template-columns: minmax(0, 1fr) 340px; }
  .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 6px 8px 18px 4px; top: 156px; max-height: calc(100vh - 168px); }
  .widgets .w-ancho { grid-column: 1 / -1; }
}
@media (max-width: 1399px) {
  .widgets { grid-auto-columns: minmax(260px, 1fr); gap: 14px; }
  .widgets > .widget:not(.w-ancho) { min-width: 200px; }
}
.widget, :root[data-theme="light"] .widget {
  border-radius: var(--r-widget); outline: 0; padding: 18px 18px 18px; gap: 10px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(196, 210, 255, .10);
  background: linear-gradient(160deg, rgba(42, 107, 208, .14), transparent 55%), linear-gradient(180deg, #111829, #0B101C);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: widget-pop .65s cubic-bezier(.2, .9, .3, 1.25) both;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
:root[data-theme="light"] .widget {
  border-color: rgba(10, 30, 76, .10);
  background: linear-gradient(160deg, rgba(42, 107, 208, .07), transparent 55%), #FFFFFF;
  box-shadow: 0 18px 40px rgba(10, 30, 76, .12), inset 0 1px 0 #fff;
}
@keyframes widget-pop { from { opacity: 0; transform: translateY(22px) scale(.9); } to { opacity: 1; transform: none; } }
.widget::before, .widget::after { display: none; }
.widget:hover { transform: translateY(-4px) scale(1.015); border-color: rgba(212, 175, 85, .38); box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 175, 85, .12); }
:root[data-theme="light"] .widget:hover { box-shadow: 0 26px 52px rgba(10, 30, 76, .18); }
.widget:active { transform: scale(.98); }

.w-eyebrow, .w-titulo { gap: 9px; letter-spacing: .2em; font-size: 11px; color: var(--tinta-suave); }
.w-ico {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: var(--g, var(--mar-vivo)); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.w-ico svg { width: 15px; height: 15px; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w-ico-reloj { --g: linear-gradient(145deg, #F3DC9B, #B8902F); color: #2A1E05; }
.w-ico-dia { --g: linear-gradient(145deg, #3B7BE0, #0F3279); }
.w-ico-proximo { --g: linear-gradient(145deg, #F3DC9B, #B8902F); color: #2A1E05; }
.w-ico-link { --g: linear-gradient(145deg, #2A6BD0, #071A44); }
.w-ico-cumple { --g: linear-gradient(145deg, #FF6FB5, #C3176E); }
.w-ico-cabina { --g: linear-gradient(145deg, #39D27A, #13803D); }
.w-ico-equipo { --g: linear-gradient(145deg, #8FB0E6, #2F64C0); }
.w-cuenta { font-family: var(--f-texto); font-weight: 600; font-size: 13px; min-width: 26px; height: 22px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: 999px; background: rgba(196, 210, 255, .08); color: var(--tinta); }

/* el reloj: el mar entero, con un brillo que pasa */
.widget-reloj, :root[data-theme="light"] .widget-reloj {
  background-color: #071A44; background-image: var(--mar-vivo); border-color: rgba(243, 220, 155, .28);
  box-shadow: 0 26px 60px rgba(7, 26, 68, .55), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.widget-reloj::after {
  display: block; content: ''; position: absolute; inset: 0; width: auto; height: auto; transform: none; opacity: 1; z-index: -1; pointer-events: none;
  background: radial-gradient(260px 160px at 85% 0%, rgba(243, 220, 155, .28), transparent 70%),
              linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%) no-repeat;
  background-size: 100% 100%, 250% 100%; animation: brillo-reloj 7s ease-in-out infinite;
}
@keyframes brillo-reloj { 0%, 30% { background-position: 0 0, 140% 0; } 70%, 100% { background-position: 0 0, -140% 0; } }
.widget-reloj .w-eyebrow { color: rgba(241, 223, 169, .85); }
.widget-reloj .w-hora { font-size: 66px; font-weight: 500; letter-spacing: -.03em; color: #FFF8E8; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.widget-reloj .w-fecha { color: rgba(255, 248, 232, .82); }
.widget-reloj .w-sub { color: rgba(241, 223, 169, .78); }

/* el día: un anillo como el de actividad */
.w-dia { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 14px; }
.w-anillo { position: relative; width: 100px; height: 100px; }
.w-anillo svg { width: 100px; height: 100px; transform: rotate(-90deg); overflow: visible; }
.w-anillo circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.w-arco-fondo { stroke: rgba(196, 210, 255, .08); }
:root[data-theme="light"] .w-arco-fondo { stroke: rgba(10, 30, 76, .07); }
.w-arco { animation: anillo 1.2s cubic-bezier(.2, .8, .2, 1) both; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 45%, transparent)); stroke: var(--c); }
.widgets[data-listo] .w-arco { animation: none; }
@keyframes anillo { from { stroke-dasharray: 0 var(--C); } }
.w-arco-asistio { --c: var(--verde); } .w-arco-reservado { --c: var(--naranja); }
.w-arco-no_vino { --c: var(--rosa); } .w-arco-cancelado { --c: var(--rojo); }
.w-anillo-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.w-anillo-n b { font: 500 30px/1 var(--f-display); color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.w-anillo-n small { font: 600 9.5px/1.4 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.widget .w-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin: 0; }
.widget .w-numeros div { display: grid; grid-template-columns: 1fr; gap: 3px; min-width: 0; }
.widget .w-numeros dd { order: 1; font-size: 28px; line-height: 1; }
.widget .w-numeros dt { order: 2; display: flex; align-items: center; gap: 5px; font-size: 9.5px; letter-spacing: .05em; white-space: nowrap; }
.widget .w-numeros dt::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }

/* próximo turno, link y cumples */
.w-grande { font-size: 44px; }
.w-pildora { padding: 5px 10px 4px; border-radius: 999px; background: rgba(212, 175, 85, .14); color: var(--oro-claro) !important; letter-spacing: .14em !important; }
.w-despues { padding-top: 8px; border-top: 1px solid var(--linea); }
.w-cuadro { font-size: 54px; line-height: .95; }
.w-cuadro b { font-weight: 500; }
.widget-pedidos.con-algo { border-color: rgba(212, 175, 85, .55); }
.widget-pedidos.con-algo .w-ico { animation: latido 1.8s ease-in-out infinite; }
.widget-pedidos.con-algo .w-cuadro { color: var(--oro-claro); }
@keyframes latido { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 175, 85, .55); } 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(212, 175, 85, 0); } }
.widget-cumples .w-cuadro b { background: linear-gradient(145deg, #FF8CC6, #E0338A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.w-lista-chica li { padding: 5px 0; }
.w-lista-chica li b { font-size: 13.5px; }
.w-lista li > button { border-radius: 12px; }
.w-punto { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--oro)) 25%, transparent); animation: respira 2.4s ease-in-out infinite; }
@keyframes respira { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c, var(--oro)) 6%, transparent); } }
.widget-equipo .chat-cara { width: 34px; height: 34px; margin-left: -8px; border: 2px solid #0B101C; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); background: var(--mar-vivo); color: #F3DC9B; font-size: 11px; }
:root[data-theme="light"] .widget-equipo .chat-cara { border-color: #fff; }
.widget-equipo .chat-cara-yo { background: var(--oro-foil); color: #2A1E05; }
.w-caras { padding-left: 8px; min-height: 36px; }

/* el puntito verde de "en línea" respira */
.chat-punto, .chat-verde { animation: en-linea 2s ease-in-out infinite; }
@keyframes en-linea { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 25%, transparent); } }

/* ---------- Íconos chiquitos (sin estrellas) ---------- */
.cumple-mini { display: inline-grid; place-items: center; vertical-align: -2px; }
.cumple-mini svg { width: 14px; height: 14px; color: #FF6FB5; stroke-width: 1.7; }
.aviso-icono svg { width: 18px; height: 18px; color: var(--oro); }
.chat-vacio-orla { display: block; width: 8px; height: 8px; margin: 0 auto 14px; background: var(--oro); transform: rotate(45deg); box-shadow: 0 0 12px rgba(212, 175, 85, .7); }

/* ---------- Por profesional / por servicio: columnas simples ---------- */
.columnas-dia { margin-bottom: 8px; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.cs-col {
  position: relative; display: grid; gap: 10px; min-width: 0; padding: 16px 14px 14px;
  border-radius: 24px; border: 1px solid var(--linea);
  background: linear-gradient(180deg, rgba(196, 210, 255, .04), transparent 120px), var(--superficie);
  box-shadow: var(--sombra-chica); animation: pop-in .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
:root[data-theme="light"] .cs-col { background: #fff; }
.cs-col:nth-child(2) { animation-delay: .04s; } .cs-col:nth-child(3) { animation-delay: .08s; } .cs-col:nth-child(4) { animation-delay: .12s; }
.cs-col:nth-child(5) { animation-delay: .16s; } .cs-col:nth-child(n+6) { animation-delay: .2s; }
.cs-grid[data-listo] .cs-col { animation: none; }
.cs-cab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 4px; }
.cs-ini {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px;
  background: var(--mar-vivo); color: #F3DC9B; font: 600 12px/1 var(--f-texto); letter-spacing: .04em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.cs-nombre { flex: 1; min-width: 0; font: 500 20px/1.15 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-cant { flex: none; min-width: 30px; height: 26px; display: inline-grid; place-items: center; padding: 0 9px; border-radius: 999px; background: var(--oro-foil); color: #2A1E05; font: 700 13px/1 var(--f-texto); }
.cs-resumen { margin: -4px 0 0; padding: 0 4px; font-size: 12.5px; color: var(--tinta-suave); }
.cs-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cs-turno {
  --c: var(--naranja);
  display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px 9px 10px; border-radius: 14px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  background: color-mix(in srgb, var(--c) 10%, var(--superficie-2));
  box-shadow: inset 3px 0 0 var(--c);
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.cs-turno:hover { transform: translateX(3px); background: color-mix(in srgb, var(--c) 18%, var(--superficie-2)); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.cs-e-asistio { --c: var(--verde); } .cs-e-no_vino { --c: var(--rosa); } .cs-e-cancelado { --c: var(--rojo); } .cs-e-error { --c: var(--gris); }
.cs-hora { display: grid; gap: 1px; font: 600 15px/1.1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--tinta); }
.cs-hora small { font-weight: 500; font-size: 11.5px; color: var(--tinta-tenue); }
.cs-datos { display: grid; gap: 2px; min-width: 0; }
.cs-datos b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-datos small { font-size: 12px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-datos i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--c); }
.cs-e-cancelado .cs-datos b { text-decoration: line-through; text-decoration-thickness: 1px; }
.cs-libre { margin: 0; padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--linea-oro); font-size: 12.5px; color: var(--tinta-suave); }
.cs-libre b { color: var(--oro-claro); font-weight: 600; }
.cs-anotar {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--linea-oro); background: transparent; color: var(--oro-claro); cursor: pointer;
  font: 600 11px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.cs-anotar:hover { background: var(--oro-suave); }
.cs-anotar:active { transform: scale(.96); }
:root[data-theme="light"] .cs-anotar { color: var(--oro); }
.cs-vacias { background: transparent; box-shadow: none; border-style: dashed; }
.cs-vacias .cs-nombre { font-size: 17px; color: var(--tinta-suave); }
.cs-vacias .cs-cant { background: var(--superficie-3); color: var(--tinta); }
.cs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 560px) { .cs-grid { grid-template-columns: 1fr; } }

/* ---------- Menos movimiento si la compu lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  .widget, .tile, .cs-col, .gs-kpi, .gs-tarjeta, .vista:not([hidden]), .detalle[open], .chat, .herr-caja, .login-caja, .chat-msg, .w-arco { animation: none !important; }
  .cartelera::after, .widget-reloj::after, .w-punto, .chat-punto, .chat-verde, .widget-pedidos.con-algo .w-ico { animation: none !important; }
  .boton-principal::after { display: none; }
}