/* La fuente se pide desde app.html con preconnect: con @import aquí se
   encadenaba DETRÁS de esta hoja (primero bajaba esta y hasta entonces
   empezaba a pedir la de Google), y retrasaba la primera pintada. */

/* ══════════════════════════════════════════════════════════════════════════
   Piel del panel: "la línea del día".

   Dirección OPUESTA a la anterior en todos los ejes, a propósito:

     antes                        ahora
     ─────────────────────────    ─────────────────────────────────────────
     bloques apilados por tipo    un solo hilo, ordenado por tiempo
     pelos de 1 px que separan    relleno suave; nada de bordes
     radio 0                      radio grande (18-22 px)
     blanco papel / negro plano   hueso cálido / carbón con temperatura
     etiquetas en CAJA ALTA       frases en caja normal, y grandes
     un amarillo fijo             el COLOR DEL NEGOCIO, modulado por tiempo
     todo plano                   lo de ahora flota, lo demás está pegado
     buscar arriba, fijo          buscar abajo, al alcance del pulgar

   El cambio de fondo: aquí el color ya NO se sobreescribe. El panel vuelve a
   usar el acento del negocio (applyBrandColor), así que la barbería se ve
   dorada y el restaurante terracota. El color deja de ser decoración y pasa a
   significar UNA cosa: qué tan cerca está en el tiempo.

   Nació en el laboratorio (/lab) y pasó tal cual al panel el 2026-09-14. Va
   DESPUÉS de design.css: re-tematiza por tokens. La cinta "LAB" y lo propio del
   laboratorio viven aparte, en /lab/lab.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens: oscuro (el default de design.css) ──────────────────────────── */
:root {
  --font: 'Figtree', system-ui, -apple-system, sans-serif !important;

  /* Carbón con temperatura, no negro plano. */
  --bg:   #101014 !important;
  --bg-2: #131318 !important;
  --bg-3: #17171D !important;
  --sheet:#1A1A21 !important;

  /* La separación la hace el relleno, no la línea. */
  --glass-bg:       rgba(255,255,255,.045) !important;
  --glass-bg-2:     rgba(255,255,255,.08) !important;
  --glass-border:   rgba(255,255,255,.06) !important;
  --glass-border-2: rgba(255,255,255,.12) !important;
  --glass-blur:     0px !important;
  --glass-hl:       none !important;

  --text:   #F7F7FA !important;
  --text-2: rgba(247,247,250,.78) !important;
  --text-3: rgba(247,247,250,.52) !important;
  --text-4: rgba(247,247,250,.30) !important;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.5) !important;
  --shadow-md: 0 8px 28px rgba(0,0,0,.45) !important;
  --shadow-lg: 0 18px 48px rgba(0,0,0,.55) !important;
  --card-glow: none !important;

  /* Curvas generosas. */
  --r-sm: 10px !important;
  --r-md: 14px !important;
  --r-lg: 18px !important;
  --r-xl: 24px !important;

  --ld-carril: rgba(247,247,250,.13);
}

/* ── Tokens: claro (hueso cálido, no blanco papel) ─────────────────────── */
[data-theme="light"] {
  --bg:   #F7F6F3 !important;
  --bg-2: #FFFFFF !important;
  --bg-3: #FFFFFF !important;
  --sheet:#FFFFFF !important;

  --glass-bg:       #FFFFFF !important;
  --glass-bg-2:     #EFEEEA !important;
  --glass-border:   rgba(24,22,18,.07) !important;
  --glass-border-2: rgba(24,22,18,.14) !important;

  --text:   #181613 !important;
  --text-2: rgba(24,22,19,.72) !important;
  --text-3: rgba(24,22,19,.50) !important;
  --text-4: rgba(24,22,19,.28) !important;

  --shadow-sm: 0 1px 2px rgba(24,22,18,.06) !important;
  --shadow-md: 0 6px 22px rgba(24,22,18,.09) !important;
  --shadow-lg: 0 16px 44px rgba(24,22,18,.12) !important;

  --ld-carril: rgba(24,22,19,.14);
}

/* ── Estructura del panel ──────────────────────────────────────────────── */
.bg-dots { display: none !important; }
body { background: var(--bg); }

.card, .stat-card {
  background: var(--glass-bg) !important;
  border: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.sidebar, .bottom-nav {
  background: var(--bg) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: var(--glass-border) !important;
}
.btn { border-radius: var(--r-xl) !important; }

/* ══ La línea del día (la pinta panel.js) ══════════════════════════════════ */

/* El muelle de buscar (54 px) y la barra inferior (62 px) flotan encima: sin
   este colchón el último renglón del hilo quedaba tapado a medias. */
.ld { max-width: 620px; padding-bottom: 136px; }
@media (min-width: 1280px) { .ld { padding-bottom: 104px; } }

.ld-fecha {
  font-size: 15px; color: var(--text-3); margin-bottom: 18px;
}
.ld-fecha b { color: var(--text); font-weight: 600; }

/* ── Lo que está pasando ahora: la única cosa que flota ─────────────────── */
.ld-ahora {
  position: relative; border-radius: var(--r-xl); padding: 20px 20px 18px;
  background: var(--glass-bg); box-shadow: var(--shadow-md);
  margin-bottom: 6px; overflow: hidden;
}
/* Un lavado del color del negocio, no un borde. */
.ld-ahora::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, var(--accent-dim), transparent 62%);
}
.ld-ahora > * { position: relative; }

.ld-etiqueta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--accent-ink); margin-bottom: 12px;
}
.ld-pulso {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-dim); animation: ld-late 2.4s ease-out infinite;
}
@keyframes ld-late {
  0%   { box-shadow: 0 0 0 0 var(--accent-dim); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .ld-pulso { animation: none; } }

.ld-titulo {
  font-size: 25px; font-weight: 600; letter-spacing: -.024em; line-height: 1.15;
  overflow-wrap: anywhere;
}
.ld-detalle { font-size: 15px; color: var(--text-3); margin-top: 5px; line-height: 1.35; }

.ld-crono {
  font-size: 15px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ld-crono.tarde { color: var(--warning); }

/* Se dejan envolver. Un domicilio puede pedir cuatro acciones a la vez (mandarlo
   al repartidor, avisarle al cliente, seguir con la cola y cerrar), y en una
   sola tira se apretaban hasta partir "Ver el pedido" en dos renglones. Dos y
   dos se lee mejor que cuatro columnas de 70 px. */
.ld-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ld-btn {
  flex: 1 1 120px; min-height: 50px; border: 0; border-radius: var(--r-lg); cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  background: var(--accent); color: var(--accent-text);
  transition: transform .12s var(--ease, ease);
}
.ld-btn.suave { background: var(--glass-bg-2); color: var(--text); }
.ld-btn.angosto { flex: 0 0 auto; padding: 0 18px; }
.ld-btn:active { transform: scale(.97); }

/* overflow visible: en calma la tarjeta pierde el relleno y el título queda a
   4 px de arriba y 0 de la izquierda, DENTRO de la esquina redondeada de 24 px.
   Con el hidden de arriba (que solo recorta el lavado, aquí apagado) la curva
   le comía el palo izquierdo a la "N" de "Nada pendiente": medido, 5 px arriba. */
.ld-ahora.calma { box-shadow: none; background: transparent; padding: 4px 0 14px; overflow: visible; }
.ld-ahora.calma::before { display: none; }
/* En blanco y no en gris: ahora dice cómo está el día ("Hoy no abres", "Ya
   cerraste por hoy"), y en gris se leía como un texto apagado de relleno. */
.ld-ahora.calma .ld-titulo { font-size: 22px; color: var(--text); font-weight: 600; }

/* ── El hilo: todo lo demás, colgado de una hora ────────────────────────── */
/* 90 y no 74: con 74 la columna de la hora terminaba EXACTO donde empieza el
   punto y "9:42 pm" quedaba pegado al círculo. Ahora hay 12 px de aire, el
   mismo que separa la hoja del buscador de su campo. */
.ld-hilo { position: relative; padding-left: 90px; }

/* El carril se dibuja POR FILA, no como una línea suelta del contenedor. Así
   arranca exacto en el primer punto y termina en el último, en vez de asomar
   por arriba y por abajo con un "más o menos" que había que calibrar a mano
   cada vez que cambiaba el alto de un renglón.
   Medido: el centro del carril y el del punto caen los dos en el mismo eje. */
.ld-fila::before {
  content: ""; position: absolute; left: -11px; top: 0; bottom: 0;
  width: 2px; background: var(--ld-carril);
}
.ld-fila:first-child::before { top: 25px; }                       /* nace en el 1er punto */
.ld-fila:not(:has(~ .ld-fila))::before { bottom: auto; height: 25px; }  /* muere en el último */

.ld-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 15px 4px 15px 0; width: 100%; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer; font: inherit;
}
/* La raya separa los renglones, no el carril: si va en la fila entera, cruza
   por encima de la línea del tiempo y la corta en cada paso. */
.ld-fila + .ld-fila > .ld-pista { box-shadow: inset 0 1px 0 var(--glass-border); }

.ld-hora {
  position: absolute; left: -90px; top: 16px; width: 62px; text-align: right; z-index: 2;
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ld-hora small { display: block; font-size: 11px; font-weight: 500; color: var(--text-4); }

/* El punto sobre el carril. Lleno = lo siguiente; hueco = después. */
/* left/top salen de medir en pantalla: el punto queda centrado en el carril y
   a la altura de la primera línea del nombre, no tres píxeles abajo. */
.ld-punto {
  position: absolute; left: -16px; top: 20px; z-index: 2;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 2px var(--ld-carril);
}
.ld-fila.proximo .ld-punto { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.ld-fila.tenue { opacity: .55; }

/* display:block explícito. Son <span>, y sin esto el nombre y el servicio
   caían en el MISMO renglón, compitiendo por el ancho: "Diego Ramírez Corte
   clásico · ~15 min más" de corrido. Con dos renglones el nombre manda y el
   detalle acompaña, que es la jerarquía que el diseño quería. */
.ld-item .n1 {
  display: block;
  font-size: 17px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
}
.ld-item .n2 {
  display: block;
  font-size: 13.5px; color: var(--text-3); margin-top: 3px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-crece { flex: 1; min-width: 0; }
.ld-monto { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ld-flecha { color: var(--text-4); font-size: 20px; line-height: 1; flex: 0 0 auto; }

.ld-nada { color: var(--text-3); font-size: 15px; padding: 6px 0 18px; }
/* Sin nada colgando no hay carril ni horas a las que dejarles sitio: con los
   90 px puestos, "2 atendidos hoy" flotaba solo a media pantalla. */
.ld-hilo.vacio { padding-left: 0; }

/* Lo ya despachado, en una sola línea plegable. `font: inherit` va PRIMERO:
   al final pisaba el font-size y la línea salía al tamaño del texto normal. */
.ld-hechas {
  font: inherit; margin-top: 4px; font-size: 14px; color: var(--text-3);
  background: none; border: 0; padding: 12px 0; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}

/* ── El dinero: al pie, del dueño ───────────────────────────────────────── */
.ld-dinero {
  margin-top: 26px; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--glass-bg); display: flex; align-items: center; gap: 16px;
}
.ld-dinero .cifra { font-size: 27px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.ld-dinero .pie { font-size: 13px; color: var(--text-3); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ld-dinero button {
  margin-left: auto; flex: 0 0 auto; border: 0; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600; padding: 11px 16px; border-radius: var(--r-md);
  background: var(--glass-bg-2); color: var(--text);
}

/* ── Buscar: abajo, donde llega el pulgar ───────────────────────────────── */
/* Cuánto se corre el contenido por el menú lateral. NO se puede usar
   --sidebar-w a secas: en teléfono vale 240 px aunque la barra esté fuera de
   pantalla y .main-content no se corra nada, así que el muelle se iba 240 px a
   la derecha. Medido en los tres anchos. */
:root { --ld-off: 0px; }
@media (min-width: 641px)  { :root { --ld-off: 108px; } }
@media (min-width: 1280px) { :root { --ld-off: 240px; } }

.ld-muelle {
  position: fixed; left: var(--ld-off); right: 0; z-index: 40;
  bottom: calc(env(safe-area-inset-bottom) + 62px);
  padding: 10px 16px 12px;
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  display: flex; gap: 10px; justify-content: center;
  pointer-events: none;
}
.ld-muelle > * { pointer-events: auto; }
/* Desde 641 la barra inferior ya no existe (el menú pasa a riel lateral), así
   que reservarle 62 px dejaba el buscador flotando a media altura. */
@media (min-width: 641px) {
  .ld-muelle { bottom: 0; padding-bottom: 18px; }
}
/* La píldora "Actualizar app" (design.css) va a 84 px del borde, pensada para
   librar la barra de abajo. En Inicio caía ENCIMA del buscador, que ahí vive
   entre la barra y la pantalla: sube por arriba de él. El muelle mide 76 px y
   arranca a 64 px + el área segura (vidrio.css). */
@media (max-width: 640px) {
  body:has(.ld-muelle) .lc-update-pill { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 150px); }
}
@media (min-width: 641px) {
  body:has(.ld-muelle) .lc-update-pill { bottom: 94px; }
}
.ld-campo {
  flex: 1; max-width: 620px; display: flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 8px 0 18px; border-radius: var(--r-xl);
  background: var(--sheet); box-shadow: var(--shadow-md);
}
.ld-campo input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  color: var(--text); font: inherit; font-size: 16px;
}
.ld-campo input::placeholder { color: var(--text-4); }
.ld-campo button {
  width: 42px; height: 42px; flex: 0 0 auto; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; cursor: pointer;
}

/* Resultados de la búsqueda: hoja que sube desde el muelle */
/* Medido: con 128 el borde de la hoja tocaba EXACTO el del campo y se veía
   pegada, como si fueran una sola pieza. 140 deja 12 px de aire, que es lo que
   hace que se lea como una tarjeta flotando sobre el buscador. */
.ld-hoja {
  position: fixed; left: var(--ld-off); right: 0; z-index: 39;
  bottom: calc(env(safe-area-inset-bottom) + 140px);
  max-height: 54vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* Centrada en el área del CONTENIDO (de --ld-off al borde), igual que el
     campo: con el ancho de la ventana se salía del lado en tableta. */
  margin: 0 auto; width: min(620px, calc(100vw - var(--ld-off) - 32px));
  padding: 8px; border-radius: var(--r-xl);
  background: var(--sheet); box-shadow: var(--shadow-lg);
}
@media (min-width: 641px) { .ld-hoja { bottom: 92px; } }
.ld-hoja .customer-item { border-radius: var(--r-md); }
.ld-hoja-nada { padding: 16px 12px; color: var(--text-3); font-size: 15px; }

/* ══ Mejoras del segundo pase ════════════════════════════════════════════ */

/* 1 · El tiempo tiñe el hilo, no solo la tarjeta de arriba.
      Los umbrales viven en panel.js (UMBRAL), porque son regla de negocio y
      cada rubro los quiere distintos, no un detalle de pintado. */
.ld-fila.tarde   .ld-hora { color: var(--warning); }
.ld-fila.tarde   .ld-punto { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-dim); }
.ld-fila.critico .ld-hora { color: var(--danger); }
.ld-fila.critico .ld-punto { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-dim); }
/* La urgencia le gana a "el que sigue": si algo va tarde, el acento de marca
   no puede taparlo. */
.ld-fila.proximo.tarde   .ld-punto { background: var(--warning); }
.ld-fila.proximo.critico .ld-punto { background: var(--danger); }
.ld-fila.critico .n1 { color: var(--danger); }

/* 2 · La cadena: lo que aparece DESPUÉS de una acción. No flota como la
      tarjeta viva (ya no hay urgencia), pero tampoco desaparece: es un acuse
      con lo que sigue. */
.ld-ahora.cadena { box-shadow: none; background: var(--glass-bg-2); }
.ld-ahora.cadena::before { display: none; }
.ld-ahora.cadena .ld-etiqueta { color: var(--text-3); }
.ld-ahora.cadena .ld-titulo { font-size: 21px; }

/* 3 · Resultados del buscador con el sello a un toque. La fila abre la ficha;
      el botón de la derecha sella sin abrir nada. */
.ld-res { display: flex; align-items: center; gap: 10px; padding: 4px; }
.ld-res + .ld-res { box-shadow: inset 0 1px 0 var(--glass-border); }
.ld-res-abrir {
  flex: 1; min-width: 0; text-align: left; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; padding: 10px 8px;
}
.ld-res-abrir .n1 {
  display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-res-abrir .n2 {
  display: block; font-size: 13px; color: var(--text-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-res-btn {
  flex: 0 0 auto; min-width: 62px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--r-md); cursor: pointer; font: inherit;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  background: var(--accent); color: var(--accent-text);
}
.ld-res-btn.suave { background: var(--glass-bg-2); color: var(--text-2); font-weight: 600; }
/* El ">" dice que el renglón abre la ficha completa, además del sello. */
.ld-res-ver {
  flex: 0 0 auto; width: 34px; min-height: 44px; margin-left: -4px;
  border: 0; background: none; color: var(--text-3); cursor: pointer;
  display: grid; place-items: center;
}
/* La X del buscador: chica y callada, no un botón de color como el de escanear. */
.ld-campo .ld-limpiar {
  width: 30px; height: 30px; background: var(--glass-bg-2); color: var(--text-2);
  font-size: 13px; line-height: 1;
}
.ld-res-btn.premio { background: var(--success); color: #06210f; }
.ld-res-btn:disabled { opacity: .7; }

/* Esqueleto de carga con la forma de lo que viene (design.css trae .skeleton) */
.ld-ahora .skeleton, .ld-hilo .skeleton { border-radius: 6px; }

/* ══ Tercer pase ═════════════════════════════════════════════════════════ */

/* Marcas de lealtad: lo que Zentek vende, dicho en el renglón de la persona.
   Van pegadas al nombre y no en una columna aparte, porque la pregunta que
   contestan es "¿quién es este?", no "¿cuántos premios hay?". */
.ld-marca {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--accent-dim); color: var(--accent-ink);
}
.ld-marca.debe { background: var(--success-dim); color: var(--success); }
.ld-titulo + .ld-marca { margin: 8px 0 0; display: inline-block; vertical-align: 0; }
.ld-item .n1 { white-space: normal; }   /* el nombre y su marca caben juntos */

/* Deslizar para despachar. La acción vive DEBAJO de la fila y se descubre al
   arrastrar; la fila se mueve, no el fondo. */
.ld-fila { position: relative; }
/* La pista es la que recorta. La fila NO puede hacerlo: la hora y el punto
   viven en el margen izquierdo, fuera de su caja, y un overflow:hidden ahí se
   los come. Aprendido a golpes. */
.ld-pista { position: relative; overflow: hidden; }
.ld-tras {
  position: absolute; inset: 0; display: flex; justify-content: flex-end;
  align-items: stretch; padding: 4px 0;
}
.ld-tras-btn {
  width: 108px; border: 0; border-radius: var(--r-md); cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  background: var(--accent); color: var(--accent-text);
}
.ld-item {
  /* pan-y deja el scroll vertical al navegador y el horizontal a nosotros: sin
     esto la lista se siente pegajosa al desplazarse con el dedo torcido. */
  touch-action: pan-y;
  transition: transform .2s var(--ease, ease);
}
/* En reposo el renglón es TRANSPARENTE, para que se vea el degradado de marca
   que pinta body::before. Antes llevaba un fondo sólido siempre (para tapar el
   botón de deslizar) y se leía como un cuadro negro recortado detrás de cada
   nombre. El fondo y el botón solo existen mientras el dedo está encima. */
.ld-tras { opacity: 0; pointer-events: none; }
.ld-pista.activa .ld-tras { opacity: 1; pointer-events: auto; }
.ld-pista.activa .ld-item { background: var(--bg); will-change: transform; }
.ld-item.abierto { box-shadow: -8px 0 14px -10px rgba(0,0,0,.55); }

/* ══ Vidrio esmerilado detrás de lo que se abre encima ═══════════════════ */
/* Estilo Apple: el fondo no se apaga con una cortina negra, se DIFUMINA. La
   saturación de más es lo que evita que el desenfoque se vea gris y muerto, y
   es la mitad del truco: sin ella parece un cristal sucio.
   Cubre los modales del panel (ficha del cliente, registrar, confirmar) y las
   dos hojas propias que no usan .modal-overlay. */
/* El material de Apple no BORRA lo de atrás, lo suaviza: se siguen adivinando
   las formas. 24 px con 170 % de saturación lo convertía en niebla de color.
   14 px y 112 % dejan cristal: lo justo para que el fondo deje de competir. */
.modal-overlay,
#welcomeModal, #whatsNewModal {
  background: rgba(8, 8, 11, .30) !important;
  backdrop-filter: blur(10px) saturate(112%);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
}
[data-theme="light"] .modal-overlay,
[data-theme="light"] #welcomeModal, [data-theme="light"] #whatsNewModal {
  background: rgba(250, 249, 246, .34) !important;
}
/* El modal en sí deja de ser una caja plana sobre la cortina: con el fondo ya
   difuminado, lo que lo separa es su propia sombra. */
.modal-overlay .modal {
  box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.24);
}

/* La hoja de resultados del buscador es del mismo material: flota sobre el
   hilo y tiene que dejarlo entrever. */
.ld-hoja {
  background: color-mix(in srgb, var(--sheet) 76%, transparent);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}
.ld-campo {
  background: color-mix(in srgb, var(--sheet) 82%, transparent);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}
/* Sin color-mix (navegador viejo) las dos superficies caen al sólido de antes
   en vez de quedar transparentes y volverse ilegibles. */
@supports not (color-mix(in srgb, red 50%, transparent)) {
  .ld-hoja, .ld-campo { background: var(--sheet); }
}

/* El velo del buscador: mismo material que los modales del panel. */
.ld-velo {
  position: fixed; inset: 0; z-index: 38;
  background: rgba(8, 8, 11, .30);
  backdrop-filter: blur(10px) saturate(112%);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  animation: ldVelo .22s ease;
}
[data-theme="light"] .ld-velo { background: rgba(250, 249, 246, .34); }
@keyframes ldVelo { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ld-velo { animation: none; } }

/* Con el velo ya difuminando lo de atrás, la hoja se vuelve casi sólida: dos
   desenfoques apilados enturbian el texto en vez de darle más profundidad. Lo
   que la separa ahora es su sombra, no su transparencia. */
.ld-hoja {
  background: var(--sheet);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 18px 48px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.2);
  animation: ldHoja .22s var(--ease, ease);
}
@keyframes ldHoja { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .ld-hoja { animation: none; } }
/* El campo se queda por encima del velo: es el que tiene el foco. */
.ld-muelle { z-index: 41; }

/* ══ Nueva cita: los clientes que ya existen, bajo el teléfono ═══════════ */
/* margin-top negativo: el formulario separa sus campos con 14 px y la lista
   es parte del teléfono, no un campo más. */
.cita-sug { display: flex; flex-direction: column; gap: 4px; margin-top: -8px; }
.cita-sug-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-md);
  background: var(--glass-bg-2); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.cita-sug-item .n { font-size: 15px; font-weight: 600; }
.cita-sug-item .p { font-size: 13px; color: var(--text-3); }
.cita-sug-nada { font-size: 13.5px; color: var(--text-3); }
.cita-sug-ok { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--success); }

/* ══ Escritorio ══════════════════════════════════════════════════════════ */
/* Una sola columna de 620 px pegada a la izquierda con 1200 px de vacío al
   lado no es "centrado en el contenido", es una pantalla sin terminar. A
   partir del ancho en que el panel abre su menú lateral (1280), el ancho se
   reparte: lo que pasa AHORA y el dinero a la izquierda, fijos a la vista, y
   el hilo del día a la derecha, que es lo único que crece. */
@media (min-width: 1280px) {
  .ld {
    max-width: 1120px; margin: 0 auto;
    display: grid; grid-template-columns: 400px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr; gap: 8px 44px; align-items: start;
  }
  .ld-fecha { grid-column: 1 / -1; grid-row: 1; margin-bottom: 10px; }
  #ldAhora  { grid-column: 1; grid-row: 2; }
  #ldDinero { grid-column: 1; grid-row: 3; }
  #ldHilo   { grid-column: 2; grid-row: 2 / 4; }

  /* Con más aire, el renglón puede respirar y el nombre deja de competir con
     el servicio por el mismo espacio. */
  .ld-item { padding: 17px 8px 17px 0; }
  .ld-item .n1 { font-size: 17.5px; }
  .ld-ahora { padding: 24px 24px 22px; }
  .ld-dinero { margin-top: 14px; }

  /* El muelle se centra sobre la columna del contenido, no sobre la ventana. */
  .ld-muelle { justify-content: center; }
  .ld-campo { max-width: 620px; }
  /* La hoja NO se centra aquí contra la ventana (left 50 % + translateX): el
     campo se centra en el contenido, que empieza después de la barra lateral,
     y la hoja salía corrida 120 px a la izquierda del buscador. La regla base
     ya la centra en el mismo lugar que el campo. */
}
/* La columna se centra en TODOS los anchos. En el teléfono no se nota (el
   máximo es más ancho que la pantalla), y en tableta era justo lo que faltaba:
   el contenido se quedaba pegado al riel con medio palmo de vacío a la derecha. */
.ld { margin-left: auto; margin-right: auto; }

/* ══ Con el teclado abierto ══════════════════════════════════════════════ */
/* La barra de secciones estorba cuando estás escribiendo un nombre: ocupa el
   único renglón que separa el campo del teclado y no se va a tocar en ese
   momento. Se va, y el muelle baja a ocupar su lugar. */
body.ld-buscando .bottom-nav { display: none !important; }
body.ld-buscando .ld-muelle { bottom: calc(env(safe-area-inset-bottom) + 6px); }
body.ld-buscando .ld-hoja  { bottom: calc(env(safe-area-inset-bottom) + 84px); }
@media (min-width: 641px) {
  body.ld-buscando .ld-muelle { bottom: 0; }
  body.ld-buscando .ld-hoja { bottom: 92px; }
}

/* ══ Ficha del cliente: sellar primero ═══════════════════════════════════ */
/* El orden lo reacomoda panel.js; aquí solo se le baja el ruido a lo que ya no
   compite. El monto de la venta se queda ARRIBA del botón (si va debajo, se
   sella antes de anotarlo y el dato se pierde), pero en un solo renglón. */
.modal-body .lab-monto { padding: 10px 14px !important; }
.modal-body .lab-monto label { font-size: 11px !important; margin-bottom: 5px !important; }
.modal-body .lab-monto label span { display: none; }
.modal-body .lab-monto .input { min-height: 42px; font-size: 15px; }
.modal-body .lab-tarjeta { border: 1px solid var(--accent-border); }
/* Lo de abajo es consulta, no operación: se apaga para que el ojo caiga en el
   botón de sellar y no en "Eliminar cliente". */
.modal-body > .card:not(.lab-monto):not(.lab-tarjeta) { opacity: .82; }
.modal-body > .card:not(.lab-monto):not(.lab-tarjeta):hover { opacity: 1; }

/* ══ Modo claro: el escalón lo da la sombra, no el relleno ═══════════════ */
/* En oscuro, una superficie más clara que el fondo YA se lee como tarjeta. En
   claro no funciona igual: un relleno gris sobre fondo claro no se lee como
   algo que sobresale, se lee como algo APAGADO. Encima yo había apagado
   --card-glow para todos los temas, así que en claro las tarjetas quedaban sin
   relleno propio y sin sombra: dos grises pegados.
   La regla: en claro, lo que es tarjeta va BLANCO y elevado; el gris se queda
   solo para los controles (campos, botones suaves), donde sí tiene que hundirse
   respecto al blanco de la tarjeta que los contiene. */
[data-theme="light"] {
  --bg:   #F4F2ED !important;      /* un punto más de tinte para que el blanco suba */
  --bg-2: #FFFFFF !important;
  --glass-bg:   #FFFFFF !important;
  --glass-bg-2: #F0EEE9 !important;   /* CONTROLES, no tarjetas */
  --glass-border: rgba(28,25,20,.055) !important;

  --card-glow: 0 1px 2px rgba(28,25,20,.05), 0 6px 16px rgba(28,25,20,.062) !important;
  --shadow-sm: 0 1px 3px  rgba(28,25,20,.07) !important;
  --shadow-md: 0 6px 20px rgba(28,25,20,.09) !important;
  --shadow-lg: 0 16px 44px rgba(28,25,20,.13) !important;
}

/* Lo que ES tarjeta: blanco y elevado. Va con [data-theme="light"] delante para
   ganarle por especificidad a la regla plana de más arriba, que es la que
   quiere el modo oscuro. */
[data-theme="light"] .card,
[data-theme="light"] .stat-card,
[data-theme="light"] .customer-item,
[data-theme="light"] .ld-dinero,
[data-theme="light"] .ed-sec,
[data-theme="light"] .lab-tarjeta,
[data-theme="light"] .lab-monto {
  background: #FFFFFF !important;
  box-shadow: var(--card-glow) !important;
}
/* Al pasar el dedo o el ratón, sube un escalón más. En oscuro esto lo hacía el
   borde; en claro lo hace la sombra. */
@media (hover: hover) {
  [data-theme="light"] .card:hover,
  [data-theme="light"] .customer-item:hover {
    box-shadow: 0 2px 4px rgba(28,25,20,.06), 0 10px 26px rgba(28,25,20,.10) !important;
  }
}

/* El wash de marca en claro venía al 24 % arriba: con un acento saturado teñía
   la mitad superior de la pantalla y volvía beige todo lo que tocaba, que es
   parte de por qué las tarjetas se veían sucias. Se baja a la mitad: sigue
   tiñendo, deja de manchar. */
[data-theme="light"] body::before {
  background: linear-gradient(180deg,
    rgba(var(--accent-rgb), 0.15),
    rgba(var(--accent-rgb), 0.06) 22%,
    transparent 50%) !important;
}

/* La barra lateral y la superior se despegan del contenido con un pelo, que en
   claro es lo único que las separa (en oscuro las separaba el propio contraste). */
[data-theme="light"] .sidebar { border-right: 1px solid rgba(28,25,20,.08) !important; }
[data-theme="light"] .bottom-nav { border-top: 1px solid rgba(28,25,20,.08) !important; }

/* El hilo del día: en claro el carril y los puntos huecos casi no se veían. */
[data-theme="light"] { --ld-carril: rgba(28,25,20,.16); }
[data-theme="light"] .ld-punto { box-shadow: 0 0 0 2px var(--ld-carril); }

/* ══ "Aprovecha el rato" ═════════════════════════════════════════════════ */
/* Aparece solo cuando el hilo se quedó sin nada. No compite con la tarjeta de
   AHORA (esa está reservada para lo que está pasando): va más callada, con el
   rótulo chico y sin sombra propia. */
.ld-rato { margin-top: 26px; }
.ld-rato-rot {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.ld-rato-item {
  display: flex; align-items: center; gap: 14px; padding: 15px 16px;
  border-radius: var(--r-lg); background: var(--glass-bg);
}
.ld-rato-item + .ld-rato-item { margin-top: 8px; }
.ld-rato-item.tenue { background: none; padding-left: 0; padding-right: 0; }
.ld-rato-item .t { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.ld-rato-item .s { font-size: 13px; color: var(--text-3); margin-top: 3px; line-height: 1.3; }
.ld-rato-btn {
  flex: 0 0 auto; min-height: 42px; padding: 0 18px; border: 0; cursor: pointer;
  border-radius: var(--r-md); font: inherit; font-size: 14px; font-weight: 600;
  letter-spacing: -.01em; background: var(--accent); color: var(--accent-text);
  display: inline-grid; place-items: center; text-decoration: none; white-space: nowrap;
}
.ld-rato-item.tenue .ld-rato-btn,
.ld-rato-item.suave .ld-rato-btn { background: var(--glass-bg-2); color: var(--text-2); }
[data-theme="light"] .ld-rato-item:not(.tenue) { background: #FFFFFF !important; box-shadow: var(--card-glow) !important; }

/* Primeros pasos: la misma pieza que "Aprovecha el rato", arriba de todo. */
.ld-pasos { margin-bottom: 26px; }
.ld-pasos-ocultar {
  border: 0; background: none; cursor: pointer; font: inherit; color: var(--text-3);
  text-transform: none; letter-spacing: 0; padding: 0;
}
.ld-rato-item.hecho .t { color: var(--text-3); font-weight: 500; }

/* ══ Recorrido (recorrido.js) ═════════════════════════════════════════════ */
/* Una hoja fija abajo, encima de la barra: no señala ningún botón, así que un
   rediseño de la sección no la mueve ni la rompe. La pantalla de atrás se ve y
   se puede mirar; lo único que tapa es la barra de abajo mientras dura. */
.rc-hoja {
  position: fixed; z-index: 1500; left: 12px; right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  max-width: 460px; margin: 0 auto; max-height: 70vh;
  display: flex; flex-direction: column;   /* la lista se enrolla, los botones no */
  background: var(--sheet); border: 1px solid var(--glass-border-2);
  border-radius: 20px; padding: 18px 18px 14px; box-shadow: var(--shadow-lg);
  animation: rc-entra .25s var(--ease-out);
}
@keyframes rc-entra { from { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rc-hoja { animation: none; } }
.rc-cuenta { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.rc-hoja h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.rc-hoja p { font-size: 15px; color: var(--text-2); line-height: 1.5; }
.rc-lista { list-style: none; margin: 12px 0 0; padding: 0; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.rc-lista li { font-size: 14px; color: var(--text-2); line-height: 1.4; padding: 7px 0; border-top: 1px solid var(--glass-border); }
.rc-lista b { color: var(--text); font-weight: 600; }
.rc-botones { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex: 0 0 auto; }
.rc-botones button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 44px;
  padding: 0 18px; border-radius: var(--r-full); border: 0;
  background: var(--glass-bg-2); color: var(--text);
}
.rc-botones .rc-salir { background: none; color: var(--text-3); padding: 0 6px; }
.rc-botones .rc-sig { background: var(--accent); color: var(--accent-text); }
.rc-cargando { color: var(--text-3); letter-spacing: .3em; padding: 10px 0; }
@media (min-width: 1280px) { .rc-hoja { left: auto; right: 24px; bottom: 24px; margin: 0; width: 400px; } }

/* Cuando el día ya se acabó, el corte deja de ser un dato al pie y pasa a ser
   la tarea que sigue: el botón se llena de color. */
.ld-dinero.cerrado button { background: var(--accent); color: var(--accent-text); }

/* ══ Mostrador: el Inicio del panel de solo tarjeta ═══════════════════════ */
/* El escáner es lo de todos los días: un botón grande, del color del negocio,
   que se toca con el pulgar sin mirar. Registrar a alguien va debajo, callado. */
.ms-hero { display: flex; flex-direction: column; gap: 8px; }
.ms-scan {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: 26px 16px 22px; border: 0; cursor: pointer; font: inherit;
  border-radius: var(--r-xl); background: var(--accent); color: var(--accent-text);
  box-shadow: var(--shadow-md);
}
.ms-scan .t { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.ms-scan .s { font-size: 13.5px; opacity: .82; }
.ms-alta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px; border: 0; cursor: pointer; font: inherit;
  font-size: 15px; font-weight: 600; border-radius: var(--r-lg);
  background: var(--glass-bg); color: var(--text);
}
/* Lo de hoy: la hora al margen como en el hilo, pero sin carril. Aquí no hay
   nada que "siga": es lo que ya pasó, y un carril prometía un después. */
.ms-fila { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--glass-border); }
.ms-fila:last-child { border-bottom: 0; }
.ms-item {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.ms-hora { flex: 0 0 62px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ms-item .t { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.ms-item .s { display: block; font-size: 13.5px; color: var(--text-3); margin-top: 2px; line-height: 1.3; }
.ms-deshacer {
  flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 0; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600; border-radius: var(--r-md);
  background: var(--glass-bg-2); color: var(--text-2);
}
.ms-vacio { font-size: 15px; color: var(--text-3); padding: 4px 0; }
.ms-resumen { font-size: 14px; color: var(--text-3); padding-top: 12px; }
.ms-qr { text-align: center; padding: 4px 0 8px; }
/* design.css pone las imágenes como bloque: text-align ya no las centra. */
.ms-qr img { display: block; margin: 0 auto; width: min(260px, 70vw); height: auto; border-radius: 12px; background: #FFFFFF; padding: 10px; }
.ms-qr p { font-size: 14.5px; color: var(--text-2); margin: 12px auto 0; max-width: 300px; line-height: 1.45; }
/* En claro un relleno gris se lee como botón apagado: el escalón es la sombra. */
[data-theme="light"] .ms-alta { background: #FFFFFF; box-shadow: var(--card-glow); }
/* Sin el botón de escanear en el buscador: el mostrador ya tiene uno grande
   arriba, y dos botones para lo mismo es uno de más. */
.ld-campo.sin-qr { padding-right: 18px; }

/* Lo del mes: para que un día sin movimiento no se lea como pantalla vacía. */
.ms-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-kpi {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border-radius: var(--r-lg); background: var(--glass-bg);
}
.ms-kpi b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ms-kpi span { font-size: 13.5px; color: var(--text-2); line-height: 1.3; }
.ms-kpi .d { font-size: 12.5px; color: var(--text-3); }
[data-theme="light"] .ms-kpi { background: #FFFFFF; box-shadow: var(--card-glow); }

/* Clientes agrupados por la tarjeta: el rótulo de cada grupo y, en "No
   vienen", cuántos días lleva cada quien. */
.ct-rot {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); padding: 20px 4px 8px;
}
.ct-rot:first-child { padding-top: 2px; }
/* En escritorio la lista es una rejilla de columnas: sin esto cada rótulo
   ocupaba una celda como si fuera un cliente más. */
#customerList > .ct-rot { grid-column: 1 / -1; }
.ct-rot span { color: var(--text-4); margin-left: 4px; }
.ct-dias { font-size: var(--fs-sm); color: var(--warning); margin-top: 2px; }

/* En escritorio la columna de la izquierda es escáner, lo que se debe y el mes;
   "Hoy" ocupa la derecha. La última fila es la elástica: si lo fuera la de "Por
   entregar", el mes quedaría empujado hasta abajo. */
/* Escritorio sin pendientes: la columna derecha es la del hilo, y vacía era
   casi toda la pantalla. Ahí va "Este mes"; lo de mañana y el corte bajan a la
   izquierda, debajo del estado del día. */
@media (min-width: 1280px) {
  .ld:not(.ms):has(> #ldHilo.vacio) { grid-template-rows: auto auto auto auto auto 1fr; }
  .ld:not(.ms):has(> #ldHilo.vacio) #ldHilo   { grid-column: 1; grid-row: 3; }
  .ld:not(.ms):has(> #ldHilo.vacio) #ldRato   { grid-column: 1; grid-row: 4; }
  .ld:not(.ms):has(> #ldHilo.vacio) #ldDinero { grid-column: 1; grid-row: 5; }
  .ld:not(.ms):has(> #ldHilo.vacio) #ldMes    { grid-column: 2; grid-row: 2 / 7; margin-top: 0; }
}

@media (min-width: 1280px) {
  .ld.ms { grid-template-rows: auto auto auto 1fr; }
  .ld.ms .ms-hero { grid-column: 1; grid-row: 2; }
  .ld.ms #msDebe  { grid-column: 1; grid-row: 3; }
  .ld.ms #msMes   { grid-column: 1; grid-row: 4; }
  .ld.ms #msHoy   { grid-column: 2; grid-row: 2 / 5; margin-top: 0; }
}

/* ══ Mi negocio: tarjetas por tema ═══════════════════════════════════════ */
/* Una tarjeta por tema, con su resumen real arriba. La portada deja de decir
   solo "dónde ir" y dice "cómo estás", que es a lo que uno entra. */
.pn { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 620px; padding-bottom: 40px; }
@media (min-width: 900px)  { .pn { grid-template-columns: repeat(2, 1fr); max-width: 900px; gap: 18px; } }
@media (min-width: 1280px) { .pn { grid-template-columns: repeat(3, 1fr); max-width: 1180px; } }

.pn-card {
  border-radius: var(--r-xl); background: var(--glass-bg); overflow: hidden;
  display: flex; flex-direction: column;
}
[data-theme="light"] .pn-card { background: #FFFFFF !important; box-shadow: var(--card-glow) !important; }

.pn-head { display: flex; align-items: flex-start; gap: 13px; padding: 18px 18px 14px; }
.pn-ic {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-dim);
}
.pn-head .t { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
/* El resumen puede ser largo (una dirección, un premio): dos renglones y ya. */
.pn-head .s {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 13px; color: var(--text-3); margin-top: 3px; line-height: 1.35;
}
/* Lo que falta por configurar se dice, no se esconde: es la mitad del valor de
   una portada que enseña estado. */
.pn-head .s.falta { color: var(--warning); }

.pn-rows { margin-top: auto; }
.pn-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 13px 18px; border: 0; background: none;
  color: inherit; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-border);
}
@media (hover: hover) { .pn-row:hover { background: var(--glass-bg-2); } }
.pn-row:active { background: var(--glass-bg-2); }
.pn-fl { color: var(--text-4); font-size: 19px; line-height: 1; flex: 0 0 auto; }

/* Cabecera de cada ajuste: la salida siempre a la vista, arriba a la izquierda. */
.pn-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.pn-atras {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 10px;
  border: 0; border-radius: var(--r-xl); cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600; background: var(--glass-bg-2); color: var(--text-2);
}
@media (hover: hover) { .pn-atras:hover { color: var(--text); } }
.pn-titulo { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }

/* Servicios e Insumos dejan de ocupar ranura propia en la barra: ahora viven
   dentro de la portada, en "Lo que vendes". Se esconden por CSS y no tocando
   applyFeatureGating, que es código de producción. */
.sidebar .nav-item[data-section="servicios"],
.sidebar .nav-item[data-section="insumos"],
.bn-item[data-bn="servicios"],
.bn-item[data-bn="insumos"] { display: none !important; }


/* ══ Centrar TODO el panel, no solo Inicio ═══════════════════════════════ */
/* design.css le pone max-width:1200px a .content-inner pero NO le pone
   margin auto, así que en un monitor ancho el panel entero (Clientes, Agenda,
   Caja, Mi negocio) se queda pegado al menú lateral con un palmo de vacío a la
   derecha. Una línea lo arregla para todas las secciones de una vez, incluidas
   las que este laboratorio no rediseñó.
   En teléfono no hace nada: la pantalla es más angosta que el máximo. */
.content-inner { margin-left: auto; margin-right: auto; }


/* ══ La barra de arriba ══════════════════════════════════════════════════ */
/* Los dos lados con flex:1 y el título en medio: así el título queda centrado
   contra la pantalla y no contra lo que sobra después de los botones, que es lo
   que lo desplazaba cada vez que aparecía el candado de la caja. */
/* Padding por lado y NO con el atajo `padding: 0 14px`: el atajo pone el
   padding-top en 0 y le gana (misma especificidad, va después) a la regla de
   modo instalado de design.css, que baja la barra lo que mide el reloj con
   env(safe-area-inset-top). En el iPhone el título quedaba DEBAJO de la hora. */
.topbar { padding-left: 14px; padding-right: 14px; gap: 10px; }

/* Vidrio esmerilado, como la barra de navegación de iOS: arriba del todo es
   transparente y se funde con el color del negocio; en cuanto algo pasa por
   debajo, se esmerila. El material vive en ::before y lo único que se anima es
   su OPACIDAD, que es lo que iOS compone bien en capas fijas: animar transform
   o el propio desenfoque es lo que dejaba capas congeladas o en blanco.
   Desenfoque y saturación son los del muelle del buscador: un solo material. */
.topbar,
.topbar.topbar-scrolled {   /* el vidrio de producción se apaga: aquí va otro */
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
.topbar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 -1px 0 var(--glass-border);   /* el pelo de abajo, solo con vidrio */
  opacity: 0; transition: opacity .2s ease;
}
.topbar.vidrio::before { opacity: 1; }
[data-theme="light"] .topbar::before { box-shadow: inset 0 -1px 0 rgba(28,25,20,.08); }
/* Sin color-mix (navegador viejo) cae al fondo sólido en vez de quedar
   transparente con el texto encima del contenido. */
@supports not (color-mix(in srgb, red 50%, transparent)) {
  .topbar::before { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) { .topbar::before { transition: none; } }

/* En teléfono producción la deja EN FLUJO (position:absolute) para que se vaya
   con el scroll: sin vidrio, una barra fija y transparente dejaba el contenido
   chocando con el título. Con vidrio es al revés: si se va con el scroll nada
   pasa nunca por debajo, y el esmerilado no llega a verse. */
@media (max-width: 640px) { .topbar { position: fixed; } }

/* Con el buscador abierto el velo difumina TODO lo de atrás, barra incluida:
   fija y con z-index 99 quedaba nítida por encima del velo (38). */
/* A 0 y no a 37: el velo vive DENTRO de .main-content, que es su propia capa
   con z-index 1, así que su 38 solo cuenta ahí adentro y para las barras vale
   1. Con 37 la barra lateral (y la de arriba) seguían nítidas sobre el velo. */
body:has(.ld-velo:not([hidden])) .topbar,
body:has(.ld-velo:not([hidden])) .sidebar { z-index: 0; }
.topbar-lado { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-lado.der { justify-content: flex-end; }
.topbar-title {
  font-size: 25px; letter-spacing: -.02em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* La campana vive dentro del menú de la cuenta. Sigue en el DOM a propósito
   (ver el comentario de panel.html); initPushUI le pone display:flex y eso se
   lee desde el menú como "sí hay push", pero verse no se ve. */
#pushBell { display: none !important; }

/* ══ Rendimiento ═════════════════════════════════════════════════════════ */
/* Cambio de tema por el camino viejo (iOS, o sin View Transitions): sin
   transición de sombras ni de bordes. Animar la sombra repinta cada tarjeta en
   cada cuadro, y con el vidrio cada tarjeta lleva tres. El fondo y el texto se
   funden igual; las sombras y los pelos cambian de golpe y no se nota. */
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 0.28s ease-out, color 0.18s ease-out !important;
}

/* La entrada escalonada de las listas animaba TODOS los renglones (en Clientes,
   hasta 200 a la vez, cada uno en su propia capa). Se ven los primeros doce;
   los de abajo aparecen ya puestos. */
@supports (transition-behavior: allow-discrete) {
  .customer-list > .customer-item:nth-child(n+13) { transition: border-color var(--transition), box-shadow var(--transition); }
  @starting-style {
    .customer-list > .customer-item:nth-child(n+13) { opacity: 1; transform: none; }
  }
}