/* Turnos · capa visual «agua y vidrio».
   Idea: todo parece sumergido en agua clara y quieta. Fondos de agua con luz que entra desde arriba (causticas lentas),
   tarjetas de vidrio con brillo en el borde superior, profundidad por capas y movimientos lentos que transmiten calma.
   Se carga después de estilos.css y solo cambia la apariencia. */

@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/css/fuentes/plus-jakarta-sans.woff2') format('woff2');
}

/* ------------------------------------------------------------ tokens: agua clara (día) */
:root {
  --marca: #0c4a59; --marca-2: #15807d; --marca-3: #2fa9a3; --acento: #e8a54b; --acento-suave: #f6d7a7;
  --texto: #10303a; --suave: #4f6d75; --ok: #1f7a4d; --alerta: #a8730d; --peligro: #b3322f;
  --radio: 20px;
  /* superficies de vidrio */
  --tarjeta: rgba(255, 255, 255, .58);
  --tarjeta-fuerte: rgba(255, 255, 255, .78);
  --fondo: rgba(255, 255, 255, .38);
  --borde: rgba(12, 74, 89, .13);
  --filo: rgba(255, 255, 255, .85);            /* luz en el borde superior del vidrio */
  --sombra: 0 1px 1px rgba(12, 74, 89, .05), 0 8px 24px -10px rgba(12, 74, 89, .28), 0 24px 60px -30px rgba(12, 74, 89, .35);
  --sombra-alta: 0 2px 4px rgba(12, 74, 89, .06), 0 18px 40px -14px rgba(12, 74, 89, .38), 0 40px 90px -40px rgba(8, 52, 66, .45);
  --desenfoque: blur(18px) saturate(150%);
  /* el agua del fondo */
  --agua-1: #eaf6f5; --agua-2: #cfeaea; --agua-3: #a9d6da; --agua-4: #7fbcc4;
  --luz: rgba(255, 255, 255, .55);
  color-scheme: light;
}

/* ------------------------------------------------------------ tokens: agua profunda (noche) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marca: #7fd6cf; --marca-2: #5cc6bf; --marca-3: #3aa9a2; --acento: #f0b462; --acento-suave: #5a4321;
    --texto: #e2f2f2; --suave: #9dbcc0; --ok: #6fd39b; --alerta: #f0c060; --peligro: #ff8a80;
    --tarjeta: rgba(14, 46, 56, .52);
    --tarjeta-fuerte: rgba(14, 46, 56, .82);
    --fondo: rgba(255, 255, 255, .05);
    --borde: rgba(150, 220, 225, .14);
    --filo: rgba(190, 245, 245, .22);
    --sombra: 0 1px 1px rgba(0, 0, 0, .2), 0 10px 28px -12px rgba(0, 0, 0, .6), 0 30px 70px -36px rgba(0, 0, 0, .7);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, .3), 0 20px 46px -16px rgba(0, 0, 0, .7), 0 46px 100px -44px rgba(0, 0, 0, .8);
    --agua-1: #0b3440; --agua-2: #082834; --agua-3: #051d27; --agua-4: #03131b;
    --luz: rgba(120, 220, 220, .16);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------ el agua: fondo, luz que entra y causticas */
html { background: var(--agua-3); }
body {
  font-family: 'Jakarta', system-ui, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'tnum' 0;
  letter-spacing: -.005em;
  color: var(--texto);
  min-height: 100vh;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--luz), transparent 60%),
    linear-gradient(180deg, var(--agua-1) 0%, var(--agua-2) 38%, var(--agua-3) 78%, var(--agua-4) 100%) fixed;
  -webkit-font-smoothing: antialiased;
}
/* Cáusticas: manchas de luz que se mueven muy despacio, como el sol a través del agua. */
body::before, body::after {
  content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
}
body::before {
  background:
    radial-gradient(28% 18% at 22% 30%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(22% 14% at 72% 22%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(30% 20% at 60% 68%, rgba(255, 255, 255, .30), transparent 70%),
    radial-gradient(18% 12% at 30% 78%, rgba(255, 255, 255, .28), transparent 70%);
  filter: blur(28px);
  opacity: .55;
  animation: causticas 38s ease-in-out infinite alternate;
}
/* Rayos de luz suaves desde la superficie. */
body::after {
  inset: 0;
  background:
    linear-gradient(100deg, transparent 0 18%, rgba(255, 255, 255, .16) 22%, transparent 30% 46%, rgba(255, 255, 255, .10) 52%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 45%);
  mix-blend-mode: soft-light;
  animation: rayos 24s ease-in-out infinite alternate;
}
@keyframes causticas {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(3%, -2%, 0) scale(1.06) rotate(2deg); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.02) rotate(-1.5deg); }
}
@keyframes rayos { from { opacity: .7; transform: translateX(-2%); } to { opacity: 1; transform: translateX(2%); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { opacity: .22; }
  :root:not([data-theme="light"]) body::after { opacity: .5; mix-blend-mode: screen; }
}

::selection { background: color-mix(in srgb, var(--marca-3) 35%, transparent); }
a { color: var(--marca-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { letter-spacing: -.02em; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--marca-3) 70%, transparent); outline-offset: 3px; border-radius: 8px; }

/* ------------------------------------------------------------ vidrio */
.tarjeta, .cifras div, .dialogo, .pestanas-panel, .toast {
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
}
.tarjeta {
  position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tarjeta-fuerte) 70%, transparent), var(--tarjeta) 55%);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: inset 0 1px 0 var(--filo), inset 0 -1px 0 rgba(12, 74, 89, .04), var(--sombra);
  padding: 20px;
  margin: 16px 0;
  isolation: isolate;
}
/* Reflejo del vidrio: una franja de luz diagonal muy tenue. */
.tarjeta::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .06) 28%, transparent 46%);
  opacity: .8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tarjeta::before { background: linear-gradient(115deg, rgba(160, 240, 240, .10) 0%, transparent 40%); }
}
.tarjeta h2 { font-size: 1.12rem; font-weight: 750; color: var(--marca); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tarjeta h2 { color: var(--texto); } }
.ayuda { color: var(--suave); }

/* Entrada serena (solo en lo que aparece una vez: bienvenida, diálogos y avisos; las vistas que se refrescan no parpadean). */
@keyframes emerger { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.bv-tarjeta { animation: emerger .8s cubic-bezier(.2, .7, .2, 1) both; }

/* ------------------------------------------------------------ botones: gotas pulidas */
.btn {
  position: relative; overflow: hidden;
  border-radius: 14px; padding: 13px 20px; font-weight: 700; letter-spacing: .005em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .06) 48%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #1f8f8a 0%, var(--marca-2) 35%, var(--marca) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 6px rgba(0, 30, 40, .25), 0 8px 20px -8px rgba(12, 74, 89, .55);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, filter .25s;
}
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 6px rgba(0, 30, 40, .25), 0 14px 28px -10px rgba(12, 74, 89, .6); }
.btn:active { transform: translateY(1px) scale(.99); filter: brightness(.97); }
.btn-sec {
  background: color-mix(in srgb, var(--tarjeta-fuerte) 70%, transparent); color: var(--marca);
  border: 1px solid color-mix(in srgb, var(--marca-2) 40%, transparent);
  box-shadow: inset 0 1px 0 var(--filo), 0 6px 16px -10px rgba(12, 74, 89, .4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #34b3ab 0%, #1d8f89 40%, #12686a 100%); }
  :root:not([data-theme="light"]) .btn-sec { background: rgba(20, 60, 70, .55); }
  :root:not([data-theme="light"]) .btn-sec { color: var(--marca); }
}
.btn-peligro { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 45%, transparent); }
.btn-grande { padding: 16px 20px; font-size: 1.08rem; border-radius: 16px; }
.btn-mini { padding: 8px 13px; border-radius: 11px; }
.btn:disabled { opacity: .45; transform: none; filter: grayscale(.4); }
.btn-avisar {
  background: linear-gradient(180deg, #f7c77d, var(--acento)); color: #3b2500; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 14px -8px rgba(168, 115, 13, .7);
}
.btn-icono { background: var(--tarjeta); border-color: var(--borde); border-radius: 12px; box-shadow: inset 0 1px 0 var(--filo); transition: transform .2s; }
.btn-icono:hover { transform: translateY(-1px); }

/* ------------------------------------------------------------ campos: vidrio esmerilado */
.form input, .form select, .form textarea, .fila-form input, .srv-fila input:not([type=checkbox]), .pst-fila input:not([type=checkbox]),
.periodo input, .calificar textarea, .prefijo, textarea {
  background: color-mix(in srgb, var(--tarjeta-fuerte) 85%, transparent);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(12, 74, 89, .08);
  color: var(--texto);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form textarea { font: inherit; padding: 10px 12px; }
.form input:focus, .form select:focus, .form textarea:focus, .fila-form input:focus, .srv-fila input:focus, .pst-fila input:focus, .periodo input:focus, textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--marca-3) 70%, transparent);
  box-shadow: inset 0 1px 2px rgba(12, 74, 89, .08), 0 0 0 4px color-mix(in srgb, var(--marca-3) 18%, transparent);
  background: var(--tarjeta-fuerte);
}
.form label { color: var(--texto); }
.check input, .opcion input { accent-color: var(--marca-2); }
.opcion { border: 1px solid var(--borde); border-radius: 16px; background: var(--fondo); transition: border-color .2s, background .2s, box-shadow .2s; }
.opcion:has(input:checked) {
  border-color: color-mix(in srgb, var(--marca-2) 60%, transparent);
  background: color-mix(in srgb, var(--marca-3) 12%, var(--tarjeta));
  box-shadow: inset 0 1px 0 var(--filo), 0 0 0 3px color-mix(in srgb, var(--marca-3) 14%, transparent);
}
.interruptor span { background: color-mix(in srgb, var(--suave) 40%, transparent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15); }
.interruptor span::after { box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.interruptor input:checked + span { background: linear-gradient(180deg, var(--marca-3), var(--marca-2)); }

/* ------------------------------------------------------------ chips, notas y estados: tonos de agua */
.chip { background: var(--fondo); border: 1px solid var(--borde); }
.chip-activo, .estado { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.chip-gracia, .estado-pausa { background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--alerta); border-color: color-mix(in srgb, var(--acento) 30%, transparent); }
.chip-prueba { background: color-mix(in srgb, #2b7bb0 14%, transparent); color: #1d5f8a; }
.chip-suspendido { background: color-mix(in srgb, var(--peligro) 12%, transparent); color: var(--peligro); }
.nota { background: color-mix(in srgb, var(--marca-3) 12%, transparent); border: 1px solid color-mix(in srgb, var(--marca-3) 20%, transparent); border-radius: 14px; }
.reglas, .cuenta-cobro, .premio { background: color-mix(in srgb, var(--acento) 11%, transparent); border: 1px solid color-mix(in srgb, var(--acento) 22%, transparent); border-radius: 16px; }
.nota-cliente { background: color-mix(in srgb, var(--acento) 16%, transparent); color: inherit; }
.error { color: var(--peligro); }
.banner-practica { background: color-mix(in srgb, var(--acento) 22%, transparent); color: inherit; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ------------------------------------------------------------ números: se ven como bajo el agua, nítidos y profundos */
.num-grande {
  font-weight: 800; letter-spacing: -.04em;
  background: linear-gradient(180deg, var(--marca-3) 0%, var(--marca-2) 40%, var(--marca) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--marca-2) 35%, transparent));
}
.num-medio, .num-mini, .cifras b, .espera b, .promedio b { color: var(--marca); font-weight: 800; }
.cifras div { background: var(--tarjeta); border-color: var(--borde); border-radius: 18px; box-shadow: inset 0 1px 0 var(--filo), var(--sombra); }
.cuenta b { color: var(--alerta); }

/* ------------------------------------------------------------ cliente */
.cab-negocio { padding: 16px 4px 4px; }
.cab-negocio h1 { font-weight: 800; color: var(--marca); }
.logo-negocio, .logo-mini, .logo-vista, .bv-logo {
  background: rgba(255, 255, 255, .9); border: 1px solid var(--filo);
  box-shadow: 0 8px 20px -10px rgba(12, 74, 89, .45), inset 0 1px 0 #fff;
}
.servicios li, .fila-puesto, .lista-opiniones li, .lista-gastos li, .cuenta-turno .total { border-color: var(--borde); }
.turno-tarjeta { padding: 28px 20px; }
.estado-en_atencion { border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); box-shadow: inset 0 1px 0 var(--filo), 0 0 0 4px color-mix(in srgb, var(--ok) 16%, transparent), var(--sombra-alta); }
.mi-turno-enlace { border: 1px solid color-mix(in srgb, var(--marca-2) 45%, transparent); }
.mi-turno-enlace.cupo-libre { background: color-mix(in srgb, var(--acento) 14%, var(--tarjeta)); border-color: color-mix(in srgb, var(--acento) 50%, transparent); }
.espera div { background: var(--fondo); border-color: var(--borde); border-radius: 16px; }
.pago { border: 1px dashed color-mix(in srgb, var(--marca-2) 35%, transparent); border-radius: 16px; background: var(--fondo); }
.red { background: var(--tarjeta); border-color: var(--borde); box-shadow: inset 0 1px 0 var(--filo); transition: transform .2s, border-color .2s; }
.red:hover { transform: translateY(-1px); }
.opinion { background: var(--fondo); border-left-color: var(--acento); color: var(--texto); border-radius: 12px; }
.toma, .par-mini img, .par-mini .sin, .lista-visitas img, .sin-foto { background: var(--fondo); }
.trabajo img { box-shadow: var(--sombra); }

/* Bienvenida: la tarjeta flota suavemente, como suspendida en el agua. */
.bv-tarjeta { padding: 34px 22px; box-shadow: inset 0 1px 0 var(--filo), var(--sombra-alta); }
.bv-tarjeta h1 { font-weight: 800; letter-spacing: -.03em; }
.bv-logo, .bv-icono { animation: flotar 7s ease-in-out infinite; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bv-sistema { color: var(--marca-2); }
.hero h1 { font-weight: 800; letter-spacing: -.04em; background: linear-gradient(180deg, var(--marca-3), var(--marca)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------------------------------------ panel */
.pestanas-panel {
  background: color-mix(in srgb, var(--tarjeta) 60%, transparent);
  border: 1px solid var(--borde); border-radius: 18px; padding: 6px; margin: 6px 0 4px;
  box-shadow: inset 0 1px 0 var(--filo), var(--sombra);
  top: 8px; scrollbar-width: none;
}
.pestanas-panel::-webkit-scrollbar { display: none; }
.pestanas-panel button { background: transparent; border: 1px solid transparent; border-radius: 13px; color: var(--suave); transition: background .25s, color .25s, box-shadow .25s; }
.pestanas-panel button:hover { color: var(--texto); background: var(--fondo); }
.pestanas-panel button.activa {
  background: linear-gradient(180deg, #1f8f8a, var(--marca)); color: #fff; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px rgba(12, 74, 89, .6);
}
.lista-espera li, .lista-abonos li, .lista-pantallas li, .lista-clientes a, .trabajo-panel {
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; box-shadow: inset 0 1px 0 var(--filo);
}
.lista-clientes a { transition: transform .2s, box-shadow .2s; }
.lista-clientes a:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--filo), var(--sombra); }
.en-atencion { border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 9%, transparent); border-radius: 16px; }
.lista-espera .le-avisado, .espera-panel { border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.globo { background: linear-gradient(180deg, #e2604f, var(--peligro)); box-shadow: 0 2px 6px rgba(179, 50, 47, .45); }

/* Diálogos: una burbuja de vidrio sobre el agua desenfocada. */
.dialogo {
  background: linear-gradient(160deg, var(--tarjeta-fuerte), var(--tarjeta));
  border: 1px solid var(--filo); border-radius: 24px; box-shadow: var(--sombra-alta);
  animation: emerger .45s cubic-bezier(.2, .7, .2, 1);
}
.dialogo::backdrop { background: rgba(6, 40, 50, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.toast {
  background: rgba(10, 46, 56, .82); border: 1px solid rgba(255, 255, 255, .15); border-radius: 16px;
  box-shadow: var(--sombra-alta); animation: emerger .35s cubic-bezier(.2, .7, .2, 1);
}
.toast-error { background: rgba(150, 36, 33, .88); }

/* Gráficas de cuentas en tonos de agua */
.barras .ing, .leyenda.ing { background: linear-gradient(90deg, var(--marca-3), var(--marca-2)); }
.barras .gas, .leyenda.gas { background: linear-gradient(90deg, #f0bb6c, #d98a35); }

/* ------------------------------------------------------------ recibo y cartel: papel con agua */
.recibo { box-shadow: inset 0 1px 0 var(--filo), var(--sombra-alta); }
.cartel {
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(180deg, #f2fbfa 0%, #dcf0f0 55%, #c3e3e6 100%);
  border: 1px solid rgba(12, 74, 89, .18); box-shadow: inset 0 1px 0 #fff, var(--sombra-alta);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cartel h1 { font-weight: 800; letter-spacing: -.03em; color: #0c4a59; }
.cartel-qr { box-shadow: 0 10px 30px -14px rgba(12, 74, 89, .5); border-radius: 18px; }

/* ------------------------------------------------------------ televisor: agua profunda (sin desenfoques: los televisores son lentos) */
body.tv {
  font-family: 'Jakarta', system-ui, sans-serif;
  background: radial-gradient(120% 80% at 50% -20%, #0f4a57 0%, transparent 60%), linear-gradient(180deg, #072631, #041821 60%, #020f15);
}
body.tv::before { opacity: .12; }
body.tv::after { opacity: .35; mix-blend-mode: screen; }
.tv-puesto {
  background: linear-gradient(170deg, rgba(40, 130, 140, .28), rgba(10, 50, 62, .55) 45%, rgba(6, 30, 40, .7));
  border: 1px solid rgba(140, 220, 225, .18);
  box-shadow: inset 0 1px 0 rgba(200, 250, 250, .18), 0 2vh 5vh -2vh rgba(0, 0, 0, .6);
}
.tv-num { background: linear-gradient(180deg, #ffffff, #bfeeee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv-puesto-nom { color: #f3be72; }
.tv-cintillo { background: rgba(20, 80, 92, .5); border: 1px solid rgba(140, 220, 225, .15); }
.tv-estado { background: linear-gradient(180deg, #2fa9a3, #15807d); }
.tv-llamado { background: radial-gradient(80% 70% at 50% 40%, rgba(15, 74, 87, .92), rgba(3, 18, 24, .96)); }
.tv-llamado b { color: #f3be72; text-shadow: 0 0 6vh rgba(243, 190, 114, .35); }

/* ------------------------------------------------------------ cámara: siempre negra */
.camara { font-family: 'Jakarta', system-ui, sans-serif; }

/* ------------------------------------------------------------ respeto por quien prefiere menos movimiento y por equipos sin vidrio */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .bv-logo, .bv-icono { animation: none; }
  .bv-tarjeta, .dialogo, .toast { animation: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --tarjeta: rgba(255, 255, 255, .9); }
}
@media print {
  body { background: #fff !important; }
  body::before, body::after { display: none; }
  .tarjeta { box-shadow: none; background: #fff; }
  .tarjeta::before { display: none; }
}

/* ============================================================ NÚMEROS EN ALTO RELIEVE
   Celular: cara de vidrio pulido (degradado con brillo en la mitad superior) + canto extruido con sombras apiladas
   de 1 px (cada drop-shadow repite la forma anterior, así se forma el espesor) + sombra ambiental que lo despega.
   Televisor: canto escalonado con text-shadow (más liviano para equipos lentos) y más profundidad. */
.num-grande {
  font-weight: 800; letter-spacing: -.035em;
  background: linear-gradient(180deg, #b4f3ed 0%, #63cfc7 44%, #1f958f 52%, #157d7d 78%, #0f6872 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, .95))
    drop-shadow(0 1px 0 #0e5d69) drop-shadow(0 1px 0 #0d5663) drop-shadow(0 1px 0 #0c4f5c)
    drop-shadow(0 1px 0 #0b4855) drop-shadow(0 1px 0 #0a414e) drop-shadow(0 1px 0 #093a46)
    drop-shadow(0 8px 6px rgba(8, 52, 66, .30)) drop-shadow(0 18px 22px rgba(8, 52, 66, .28));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .num-grande {
    background: linear-gradient(180deg, #ffffff 0%, #c9f6f1 44%, #6fd6ce 52%, #48b9b2 80%, #36a19c 100%);
    -webkit-background-clip: text; background-clip: text;
    filter:
      drop-shadow(0 -1px 0 rgba(255, 255, 255, .5))
      drop-shadow(0 1px 0 #2a8784) drop-shadow(0 1px 0 #247a78) drop-shadow(0 1px 0 #1f6d6c)
      drop-shadow(0 1px 0 #1a6060) drop-shadow(0 1px 0 #155354) drop-shadow(0 1px 0 #104648)
      drop-shadow(0 10px 8px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(111, 214, 206, .22));
  }
}
/* Números medianos (cifras, personas adelante, hora, promedio, turno en la lista): relieve más bajo. */
.num-medio, .num-mini, .cifras b, .espera b, .promedio b, .codigo-acceso, .codigo-demo {
  color: var(--marca-2);
  text-shadow: 0 -1px 0 rgba(255, 255, 255, .9), 0 1px 0 #0e5f6a, 0 2px 0 #0b4c58, 0 3px 0 #093d48, 0 6px 8px rgba(8, 52, 66, .28);
}
.cuenta b {
  color: #f0b45e;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, .9), 0 1px 0 #c98a2c, 0 2px 0 #a86f1c, 0 3px 0 #8a5912, 0 6px 8px rgba(90, 55, 8, .3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .num-medio, :root:not([data-theme="light"]) .num-mini, :root:not([data-theme="light"]) .cifras b,
  :root:not([data-theme="light"]) .espera b, :root:not([data-theme="light"]) .promedio b,
  :root:not([data-theme="light"]) .codigo-acceso, :root:not([data-theme="light"]) .codigo-demo {
    color: #c9f6f1; text-shadow: 0 -1px 0 rgba(255, 255, 255, .35), 0 1px 0 #3aa19c, 0 2px 0 #24807d, 0 3px 0 #155f60, 0 6px 10px rgba(0, 0, 0, .55);
  }
}

/* ------------------------------------------------------------ televisor: más relieve */
.tv-num, .tv-sig {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #f4fffe;
}
.tv-num {
  text-shadow:
    0 -.12vh 0 #ffffff,
    0 .15vh 0 #cdeeee, 0 .3vh 0 #b6e3e4, 0 .45vh 0 #9ed5d8, 0 .6vh 0 #86c5ca, 0 .75vh 0 #6db3ba,
    0 .9vh 0 #569fa8, 0 1.05vh 0 #418a95, 0 1.2vh 0 #2f7581, 0 1.35vh 0 #22626e,
    0 2vh 2vh rgba(0, 0, 0, .55), 0 3.5vh 6vh rgba(0, 0, 0, .45), 0 0 7vh rgba(120, 230, 230, .22);
}
.tv-sig {
  text-shadow:
    0 -.08vh 0 #ffffff, 0 .12vh 0 #b6e3e4, 0 .24vh 0 #8fcbd0, 0 .36vh 0 #6aafb7, 0 .48vh 0 #4a929d,
    0 .6vh 0 #307683, 0 1.2vh 1.4vh rgba(0, 0, 0, .55);
}
.tv-llamado b {
  color: #ffd99a;
  text-shadow:
    0 -.3vh 0 #fff4dc,
    0 .3vh 0 #f6c578, 0 .6vh 0 #ebb35f, 0 .9vh 0 #dd9f4b, 0 1.2vh 0 #cc8b3b, 0 1.5vh 0 #b8782e,
    0 1.8vh 0 #a26623, 0 2.1vh 0 #8b551a, 0 2.4vh 0 #744513, 0 2.7vh 0 #5e380f,
    0 4vh 4vh rgba(0, 0, 0, .6), 0 7vh 12vh rgba(0, 0, 0, .5), 0 0 14vh rgba(243, 190, 114, .35);
}
.tv-v-cod {
  color: #ffd99a;
  text-shadow:
    0 -.2vh 0 #fff4dc, 0 .2vh 0 #f6c578, 0 .4vh 0 #ebb35f, 0 .6vh 0 #dd9f4b, 0 .8vh 0 #cc8b3b,
    0 1vh 0 #b8782e, 0 1.2vh 0 #a26623, 0 1.4vh 0 #8b551a, 0 2.4vh 3vh rgba(0, 0, 0, .55);
}
.tv-puesto-nom { text-shadow: 0 .12vh 0 #c98a2c, 0 .24vh 0 #8a5912, 0 .8vh 1vh rgba(0, 0, 0, .5); }
.tv-reloj { text-shadow: 0 .12vh 0 #2f7581, 0 .6vh 1vh rgba(0, 0, 0, .5); }
.tv-sig small { text-shadow: 0 .4vh .8vh rgba(0, 0, 0, .5); }