/* ═══ Riccio · carta de color ═══
   La marca desde el 2026-09-13 (presentacion/marca-muestra.html): los tonos de una carta
   de tintura, cada uno con su código y un trabajo, letra ancha para lo que importa y
   formas apenas redondeadas. Sobria: nada de rulos dibujados.
   Claro a propósito: se usa con luz de día, en un salón.
   Regla que manda sobre todas: esto no puede parecerse nunca a una planilla. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 400 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono.woff2") format("woff2");
  font-weight: 400 600; font-display: swap;
}

:root {
  /* La carta: el código es el de la tintura, el nombre es el trabajo que hace acá. */
  --c30:  #2b1d18;   /* 3.0  castaño oscuro · la tinta, lo cerrado */
  --c55:  #7c3a36;   /* 5.5  caoba          · lo que pide atención */
  --c64:  #9c5230;   /* 6.4  cobrizo oscuro · lo que se toca */
  --c74:  #b5663a;   /* 7.4  rubio cobrizo  · lo señado, el acento */
  --c83:  #d9a864;   /* 8.3  rubio dorado   · lo que espera */
  --c91:  #c9c7bd;   /* 9.1  rubio ceniza   · las líneas */
  --c101: #e7e5de;   /* 10.1 platino ceniza · el fondo */

  --fondo:      var(--c101);
  --fondo-alto: #fbfaf8;
  --panel:      #f5f4f0;
  --panel-alto: #eeece6;
  --borde:      #d8d4ca;
  --borde-luz:  var(--c91);
  /* Las líneas que separan: continuas y un punto más oscuras que los bordes, que sobre
     claro punteadas no se veían (Jere, 2026-09-13). */
  --linea:      #c2baad;

  --texto:      var(--c30);
  --tenue:      #6b574e;
  --muy-tenue:  #84726a;

  /* Nombres heredados del tema oscuro: `neon` era el crema que resaltaba; ahora resaltar
     es escribir en la tinta. */
  --neon:       var(--c30);
  --acento:     var(--c64);
  --acento-op:  rgba(181, 102, 58, .13);
  --verde:      #5e7a4f;     /* "salió bien": no es de la carta, es una señal */
  --rojo:       var(--c55);

  --r:   16px;
  --r-s: 10px;
  --sombra: 0 10px 30px rgba(43, 29, 24, .12);

  --sans:  "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --serif: "Bricolage Grotesque", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --mono:  "Martian Mono", ui-monospace, Consolas, monospace;

  color-scheme: light;
}

* { box-sizing: border-box; }

/* Los campos condicionales usan display:flex, que le gana al [hidden] del navegador. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

h1, h2, h3 { margin: 0; font-weight: 600; }

/* ── La franja de la demo (docs/21) ──
   Arriba de todo y en la tinta: lo primero que se lee es que esto es de ejemplo. No es
   fija a propósito: en el celular, cada renglón pegado arriba es pantalla que se pierde. */
.franja-demo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 8px 32px;
  background: var(--c30);
  color: var(--fondo-alto);
  font-size: 13px;
  line-height: 1.4;
}
.franja-demo p { margin: 0; }
.franja-demo b { color: var(--c83); font-weight: 600; }
.franja-demo button {
  font: inherit;
  font-weight: 600;
  color: var(--fondo-alto);
  background: transparent;
  border: 1px solid rgba(251, 250, 248, .45);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.franja-demo button:hover { border-color: var(--fondo-alto); }
.franja-demo-botones { display: flex; gap: 8px; flex-wrap: wrap; }

/* La bienvenida de la demo. */
.demo-bienvenida > div { padding: 22px 22px 20px; display: grid; gap: 12px; }
.demo-bienvenida h2 { margin: 0; font-family: var(--serif); font-size: 21px; }
.demo-bienvenida p { margin: 0; color: var(--tenue); font-size: 14.5px; line-height: 1.5; }
.demo-bienvenida .demo-nota { font-size: 12.5px; }
.demo-bienvenida .demo-motivo { color: var(--texto); font-weight: 600; }
.demo-bienvenida .botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.demo-pasos { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.demo-pasos b { font-weight: 600; }
.chip.chip-vos { font-size: 11px; padding: 1px 8px; background: var(--c30); color: var(--fondo-alto); border-color: var(--c30); vertical-align: 2px; }
@media (max-width: 700px) {
  .franja-demo { padding: 8px 16px; }
}

/* ── Barra superior ── */
.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--borde);
  background: rgba(231, 229, 222, .94);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}

.marca h1 {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: .5px;
  color: var(--neon);
}

.marca .fecha {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--tenue);
}

.tabs { display: flex; gap: 6px; margin-left: auto; }

.tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--tenue);
  font: inherit;
  font-size: 14px;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: .16s;
}
.tab:hover { color: var(--texto); background: var(--panel); }
.tab.is-activa {
  color: var(--neon);
  background: var(--acento-op);
  border-color: rgba(181, 102, 58,.35);
}

.riccio {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--muy-tenue);
  letter-spacing: 2.5px;
  user-select: none;
}

main { padding: 26px 32px 70px; max-width: 1500px; margin: 0 auto; }

/* ── Zona de carga ── */
.carga {
  background: linear-gradient(160deg, var(--panel-alto), var(--panel));
  border: 1px solid var(--borde-luz);
  border-radius: var(--r);
  padding: 20px 24px 22px;
  box-shadow: var(--sombra);
  position: relative;
}
.carga::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, transparent, var(--acento), transparent);
  opacity: .5;
}
.carga.editando { border-color: var(--acento); }

.carga-cabecera {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.carga-cabecera h2 { font-size: 17px; }
.carga-ayuda { margin: 0; font-size: 12.5px; color: var(--muy-tenue); }

.carga-grilla {
  display: grid;
  grid-template-columns: 1.4fr 1.9fr .9fr .9fr .95fr auto;
  gap: 14px 16px;
  align-items: end;
}

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.campo > span, .campo legend {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--tenue);
  padding: 0;
}

input, select {
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: 11px 13px;
  width: 100%;
  transition: .14s;
}
input::placeholder { color: var(--muy-tenue); }
input:focus, select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-op);
}
select { cursor: pointer; }
select optgroup { background: var(--fondo-alto); color: var(--tenue); }
select option { background: var(--fondo-alto); color: var(--texto); }

.con-signo { position: relative; }
.con-signo i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muy-tenue); font-style: normal; font-size: 14px;
}
.con-signo input { padding-left: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.monto { letter-spacing: .3px; }

fieldset.segmento { border: 0; padding: 0; }
.opciones { display: flex; gap: 5px; }
.opciones label {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: 13px;
  padding: 11px 6px;
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--fondo-alto);
  color: var(--tenue);
  cursor: pointer;
  white-space: nowrap;
  transition: .14s;
}
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones label:hover { color: var(--texto); border-color: var(--borde-luz); }
.opciones label:has(input:checked) {
  background: var(--acento-op);
  border-color: var(--acento);
  color: var(--neon);
}
.opciones label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--acento-op); }

.campo-accion {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--borde);
  padding-top: 16px;
  margin-top: 2px;
}
.saldo { margin: 0; font-size: 12.5px; color: var(--tenue); min-height: 16px; }
.saldo b { color: var(--neon); font-weight: 600; }
.botones { display: flex; gap: 8px; }

.btn {
  font: inherit; font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--r-s);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: .14s;
}
.btn-guardar {
  background: var(--acento);
  color: #fff;
  font-weight: 600;
}
.btn-guardar:hover { background: var(--neon); }
.btn-guardar kbd { font: inherit; font-size: 12px; opacity: .6; margin-left: 4px; }
.btn-fantasma {
  background: transparent;
  border-color: var(--borde-luz);
  color: var(--tenue);
}
.btn-fantasma:hover { color: var(--texto); border-color: var(--acento); }

/* ── Números del día ── */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 22px 0;
}

.kpi {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 18px 20px;
}
.kpi h3 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--tenue);
  font-weight: 500;
}
.kpi-valor {
  margin: 9px 0 0;
  font-family: var(--serif);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.kpi-pie { margin: 6px 0 0; font-size: 12px; color: var(--muy-tenue); }

.kpi-doble { display: flex; align-items: stretch; gap: 18px; }
.kpi-doble > div { flex: 1; min-width: 0; }
.kpi-doble .kpi-valor { font-size: 24px; }
.kpi-doble > .kpi-sep { width: 1px; background: var(--borde); flex: 0 0 1px; }

.kpi-destacada {
  background: var(--c30);
  border-color: rgba(181, 102, 58,.45);
  box-shadow: 0 0 34px rgba(181, 102, 58,.1);
}
.kpi-destacada .kpi-valor { color: var(--neon); }
.kpi-destacada h3 { color: var(--acento); }

/* ── Movimientos ── */
.movs > h2, .hist-titulo {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--tenue);
  font-weight: 500;
  margin-bottom: 12px;
}

.mov {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: 13px 16px;
  margin-bottom: 7px;
  transition: .14s;
}
.mov:hover { border-color: var(--borde-luz); background: var(--panel-alto); }
.mov.resaltado { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-op); }

.mov-hora { font-size: 12.5px; color: var(--muy-tenue); font-variant-numeric: tabular-nums; width: 42px; flex: none; }
.mov-quien { min-width: 0; flex: 1.3; }
.mov-quien b { display: block; font-weight: 600; font-size: 14.5px; }
.mov-quien small { color: var(--tenue); font-size: 12.5px; }
.mov-plata { display: flex; gap: 7px; flex-wrap: wrap; flex: 1.5; justify-content: flex-end; }

.chip {
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--borde-luz);
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip-servicio { border-color: rgba(181, 102, 58,.4); color: var(--acento); }
.chip-producto { border-color: rgba(94, 122, 79,.45); color: var(--verde); }
.chip-sena     { border-color: var(--borde-luz); color: var(--muy-tenue); }

.mov-total {
  font-family: var(--serif);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  width: 120px;
  text-align: right;
  flex: none;
}
.mov-medio { font-size: 12px; color: var(--muy-tenue); width: 96px; text-align: right; flex: none; }
.mov-acciones { display: flex; gap: 4px; flex: none; }
.icono {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muy-tenue); font-size: 13px; padding: 6px 9px;
  border-radius: 6px; font-family: inherit;
}
.icono:hover { background: var(--panel-alto); color: var(--texto); }
.icono.peligro:hover { color: var(--rojo); }

.vacio {
  padding: 44px 20px;
  text-align: center;
  color: var(--muy-tenue);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  font-size: 14px;
}

/* ── Historial ── */
.hist-barra {
  display: flex; align-items: end; gap: 18px; flex-wrap: wrap;
  margin: 4px 0 20px;
}
.campo-periodo { width: 200px; }
.hist-barra .botones { margin-left: auto; }
#btnPdf i { font-style: normal; font-size: 10px; opacity: .6; margin-left: 2px; }

.dia {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  margin-bottom: 8px;
  overflow: hidden;
}
.dia[open] { border-color: var(--borde-luz); }
.dia > summary {
  display: flex; align-items: center; gap: 18px;
  padding: 15px 18px; cursor: pointer; list-style: none;
}
.dia > summary::-webkit-details-marker { display: none; }
.dia > summary:hover { background: var(--panel-alto); }
.dia-fecha { flex: 1.1; min-width: 0; }
.dia-fecha b { display: block; font-size: 14.5px; }
.dia-fecha small { color: var(--muy-tenue); font-size: 12.5px; }
.dia-cifras { display: flex; gap: 26px; align-items: baseline; }
.dia-cifra { text-align: right; }
.dia-cifra span {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--muy-tenue); margin-bottom: 3px;
}
.dia-cifra b { font-family: var(--serif); font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 400; }
.dia-cifra.efectivo b { color: var(--neon); }
.dia-detalle { padding: 4px 18px 16px; border-top: 1px solid var(--borde); }

/* ── Avisos ── */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--panel-alto);
  border: 1px solid var(--acento);
  color: var(--texto);
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--sombra);
  font-size: 14px;
  z-index: 60;
  animation: sube .18s ease-out;
}
@keyframes sube { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ── Pantallas chicas ── */
@media (max-width: 1200px) {
  .carga-grilla { grid-template-columns: 1fr 1fr 1fr; }
  .campo-accion { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  main, .topbar { padding-left: 16px; padding-right: 16px; }
  .carga-grilla { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .mov { flex-wrap: wrap; }
  .dia-cifras { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   Pantalla de carga en dos bloques (rediseño del 2026-09-07)
   Izquierda: el turno. Derecha: cómo entró la plata, sumando.
   ═══════════════════════════════════════════════════════════ */

.carga-cabecera { align-items: center; }
.btn-flotar { margin-left: auto; padding: 8px 16px; font-size: 13px; }

.bloques {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 18px;
  align-items: stretch;
}

.bloque {
  background: rgba(43, 29, 24, .035);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.bloque > h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--acento);
  font-weight: 600;
}

.fila-servicio { display: grid; grid-template-columns: 1fr .85fr; gap: 12px; }

.pista { margin: 0; font-size: 12px; color: var(--acento); min-height: 15px; line-height: 1.35; }
.pista-desde { margin-top: 5px; font-size: 11.5px; color: var(--muy-tenue); min-height: 0; }

/* ── Las filas de la suma ── */
.linea {
  display: grid;
  grid-template-columns: 110px 128px 1fr 30px;
  gap: 10px;
  align-items: center;
}
.linea-rotulo { font-size: 13.5px; color: var(--tenue); }
.linea-hueco { display: block; }

.linea-producto .prod-nombre {
  font-size: 13px;
  padding: 9px 10px;
  color: var(--texto);
}
.linea-producto .prod-nombre::placeholder { color: var(--tenue); }
.prod-quitar { font-size: 18px; line-height: 1; padding: 4px 8px; }

.linea .con-signo input { padding-top: 9px; padding-bottom: 9px; }

.opciones-chicas label { font-size: 12px; padding: 8px 4px; }

.btn-agregar {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--tenue);
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--r-s);
  cursor: pointer;
  transition: .14s;
}
.btn-agregar:hover { color: var(--neon); border-color: var(--acento); }
.btn-agregar span { color: var(--acento); margin-right: 4px; }

.linea-total {
  border-top: 1px solid var(--borde-luz);
  padding-top: 13px;
  margin-top: 2px;
}
.linea-total .linea-rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tenue);
}
/* Los dos números del pie del ticket: lo que valió la visita y lo que falta cobrar. El
   segundo aparece sólo cuando la seña ya había entrado, que es cuando no son lo mismo. */
.totales {
  grid-column: 2 / -1;
  display: flex;
  align-items: baseline;
  gap: 8px 26px;
  flex-wrap: wrap;
}
#totalVisita {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}
.ahora { display: flex; align-items: baseline; gap: 8px; }
.ahora-rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tenue);
}
#totalAhora {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.alerta {
  margin: 0;
  font-size: 12.5px;
  color: var(--rojo);
  background: rgba(124, 58, 54, .1);
  border: 1px solid rgba(124, 58, 54, .3);
  border-radius: var(--r-s);
  padding: 8px 12px;
}

.carga-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--borde);
  padding-top: 16px;
  margin-top: 18px;
}

.aviso-flotante {
  margin: 14px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--acento);
  border-radius: var(--r);
  color: var(--acento);
  font-size: 14px;
  text-align: center;
}

/* ── La ventana flotante ──
   Angosta: los bloques se apilan y los medios de pago pasan a su propia línea,
   porque "Transferencia" no entra al lado del monto. */
body.flotante {
  background: var(--fondo);
  padding: 12px;
  min-height: auto;
}
body.flotante .carga {
  box-shadow: none;
  border-radius: var(--r-s);
  padding: 14px 16px 16px;
}
body.flotante .bloques { grid-template-columns: 1fr; gap: 14px; }
body.flotante .fila-servicio { grid-template-columns: 1fr .9fr; }
body.flotante .carga-ayuda,
body.flotante .btn-flotar { display: none; }

body.flotante .linea {
  grid-template-columns: 96px 1fr 28px;
  row-gap: 7px;
}
body.flotante .linea .opciones { grid-column: 1 / -1; }
body.flotante .totales { grid-column: 2 / -1; gap: 4px 16px; }
body.flotante #totalVisita,
body.flotante #totalAhora { font-size: 23px; }

body.flotante .carga-pie { margin-top: 14px; padding-top: 12px; }
body.flotante .btn-guardar { width: 100%; }

/* Cuando la flotante es una ventana común (navegador sin PiP), la página entera
   se carga ahí: hay que esconder todo lo que no sea el formulario. */
body.flotante-popup .topbar,
body.flotante-popup .kpis,
body.flotante-popup .movs,
body.flotante-popup #panel-historial,
body.flotante-popup .aviso-flotante { display: none !important; }
body.flotante-popup main { padding: 0; }

@media (max-width: 1100px) {
  .bloques { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .linea { grid-template-columns: 96px 1fr 28px; row-gap: 7px; }
  .linea .opciones { grid-column: 1 / -1; }
  .carga-pie { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════
   Turnos, ayudas y el resto del rediseño del 2026-09-09
   ═══════════════════════════════════════════════════════════ */

/* ── El signo de ayuda ──
   Un "!" chiquito al lado de cada cosa que conviene explicar. No interrumpe: el que
   ya sabe no lo mira, y el que duda pasa el mouse por arriba. */
.ayuda {
  appearance: none;
  border: 1px solid rgba(181, 102, 58,.45);
  background: transparent;
  color: var(--acento);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  padding: 0;
  margin-left: 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  opacity: .55;
  transition: opacity .15s, background .15s;
}
.ayuda::after { content: '!'; }
.ayuda:hover, .ayuda:focus-visible { opacity: 1; background: var(--acento-op); outline: none; }
.ayuda:focus-visible { box-shadow: 0 0 0 3px var(--acento-op); }
.ayuda-suelta { align-self: center; }

.globo {
  position: fixed;
  z-index: 60;
  max-width: 320px;
  background: var(--panel-alto);
  border: 1px solid var(--borde-luz);
  border-radius: var(--r-s);
  box-shadow: var(--sombra);
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto);
}

/* ── Números del día: ahora son cinco ── */
.kpis-hoy { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.kpis-turnos { grid-template-columns: repeat(3, 1fr); }
.kpi-senas .kpi-valor { color: var(--verde); }

/* ── La pastilla de la pestaña Turnos ── */
.pastilla {
  display: inline-block;
  margin-left: 7px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--acento);
  color: var(--c30);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

/* ── La sugerencia de precio según el medio de pago ──
   Se sugiere y no se impone: el mismo tono que el aviso de los "Desde $X". */
.pista-ajuste {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.btn-aplicar {
  border: 1px solid rgba(181, 102, 58,.45);
  background: transparent;
  color: var(--acento);
  border-radius: 7px;
  padding: 3px 10px;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.btn-aplicar:hover { background: var(--acento-op); color: var(--neon); }

/* ── Turnos ── */
.bloques-turno { grid-template-columns: 1fr 1.15fr; }

.estado {
  display: inline-block;
  border: 1px solid var(--borde-luz);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--muy-tenue);
  white-space: nowrap;
}
.estado-senado    { border-color: rgba(94, 122, 79,.5); color: var(--verde); }
.estado-solicitado{ border-color: var(--borde-luz); color: var(--tenue); }
.estado-ausente   { border-color: rgba(124, 58, 54,.55); color: var(--rojo); }
.estado-cancelado { border-color: var(--borde); color: var(--muy-tenue); }
.estado-cerrado, .estado-atendido { border-color: rgba(181, 102, 58,.4); color: var(--acento); }

.mov-estado { flex: none; width: 96px; }
.mov.pendiente { border-color: var(--linea); }
.mov.pendiente .mov-total { color: var(--muy-tenue); }

.mov-cuando { font-size: 12.5px; color: var(--tenue); width: 118px; flex: none; }
.mov-cuando b { display: block; color: var(--texto); font-weight: 600; }

.comprobante {
  font-size: 11.5px;
  color: var(--muy-tenue);
  font-variant-numeric: tabular-nums;
}

/* ── Diálogo chico (reprogramar, cerrar el ticket) ── */
.dialogo {
  border: 1px solid var(--borde-luz);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--texto);
  box-shadow: var(--sombra);
  padding: 20px 22px;
  min-width: 300px;
}
.dialogo::backdrop { background: rgba(43,29,24,.4); }
.dialogo h3 { font-size: 15px; margin-bottom: 14px; }
.dialogo .campo { margin-bottom: 12px; }
.dialogo .botones { justify-content: flex-end; margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════
   Tickets y calendario (2026-09-09, segunda vuelta)
   ═══════════════════════════════════════════════════════════ */

/* Tres tarjetas, no cuatro (decisión del 2026-09-09): la pantalla del día responde una
   sola pregunta y cada número de más la vuelve más difícil de leer. */
.kpis-hoy { grid-template-columns: repeat(3, 1fr); }

.kpi-desglose {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--tenue);
  min-height: 18px;
}
.kpi-desglose b {
  color: var(--texto);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.titulo-alerta { color: var(--rojo) !important; }
.titulo-alerta .ayuda { border-color: rgba(124, 58, 54,.5); color: var(--rojo); }

.mov-tel {
  font-size: 12px;
  color: var(--muy-tenue);
  text-decoration: none;
  display: block;
}
.mov-tel:hover { color: var(--verde); }

/* ── Calendario ── */
.cal-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
}
.cal-barra h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .2px;
  min-width: 230px;
}
.cal-barra #calHoy { margin-left: auto; }

.cal-referencias {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--tenue);
}
.cal-referencias span { display: flex; align-items: center; gap: 6px; }

.punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.punto-senado     { background: var(--verde); }
/* El que todavía no señó va hueco: es el que falta, y un anillo se reconoce por la
   forma aunque los colores se laven. */
.punto-solicitado { background: transparent; border: 1.5px solid var(--tenue); }
.punto-cerrado    { background: var(--acento); }
.punto-ausente    { background: var(--rojo); }

/* No asistió: una cruz, no un punto. */
.punto-cruz {
  background: none;
  color: var(--rojo);
  font-size: 10px;
  line-height: 9px;
  font-style: normal;
  text-align: center;
  width: 9px; height: 9px;
  border-radius: 0;
}

.cal-encabezado,
.cal-grilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.cal-encabezado {
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--muy-tenue);
  text-align: center;
}

.cal-dia {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  min-height: 92px;
  padding: 8px 9px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-dia:hover { border-color: var(--borde-luz); background: var(--panel-alto); }
.cal-dia.fuera { opacity: .32; }
.cal-dia.cerrado { background: rgba(43,29,24,.05); cursor: default; }
.cal-dia.es-hoy { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-op); }
.cal-dia.elegido { border-color: var(--neon); }

.cal-numero {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.cal-dia.es-hoy .cal-numero { color: var(--neon); }

.cal-puntos { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-plata {
  margin-top: auto;
  font-size: 11.5px;
  color: var(--muy-tenue);
  font-variant-numeric: tabular-nums;
}
.cal-plata b { color: var(--acento); font-weight: 600; }

@media (max-width: 900px) {
  .cal-dia { min-height: 68px; }
  .cal-barra h2 { min-width: 0; font-size: 18px; }
}

/* ── Los tickets abiertos, uno al lado del otro ──
   La pestaña muestra lo que está abierto y nada más: señados a la izquierda, sin señar
   a la derecha. Los cerrados no van acá — ésos ya pasaron y viven en Hoy, en el
   calendario y en el historial. Abajo de 1150px las columnas se apilan, porque a la
   mitad de ese ancho la fila no entra. */
.tickets-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 26px;
  align-items: start;
}
@media (min-width: 1150px) {
  .tickets-columnas { grid-template-columns: 1fr 1fr; }
}

.lista-compacta .mov { gap: 10px; padding: 10px 12px; }
.lista-compacta .mov-cuando { width: 74px; font-size: 12px; }
.lista-compacta .mov-quien { flex: 1.2; }
.lista-compacta .mov-plata { flex: 1; gap: 5px; }
.lista-compacta .mov-estado { width: auto; }
.lista-compacta .mov-total { font-size: 15px; }
.lista-compacta .mov-acciones { flex-wrap: wrap; justify-content: flex-end; max-width: 132px; }
.lista-compacta .icono { padding: 3px 7px; font-size: 11.5px; }

/* ── El ticket como objeto: su ficha, sus fases y sus acciones ── */

.ticket-id {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  color: var(--muy-tenue);
}
.ticket-id b {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--acento);
  font-weight: 400;
  letter-spacing: .5px;
}

.fila-cuando { margin-top: 12px; }

.linea-comprobante input {
  flex: 1;
  padding: 9px 12px;
  font-size: 13px;
}

.acciones-ticket {
  display: flex;
  gap: 6px;
  margin-left: 18px;
}

/* ── Las filas se tocan ── */
.mov-tocable { cursor: pointer; }
.mov-tocable:hover { border-color: var(--acento); background: var(--panel-alto); }
.mov-tocable:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-op); }

.mov-hora small {
  display: block;
  font-size: 10.5px;
  color: var(--borde-luz);
  letter-spacing: .4px;
}

/* ── Cabecera de la pestaña Tickets ──
   El formulario es uno solo y vive en Hoy: acá sólo está el botón que lo abre limpio. */
.tickets-cabecera {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 4px 0 22px;
}
.tickets-cabecera p { margin: 0; color: var(--tenue); font-size: 13.5px; }
.titulo-panel { font-size: 20px; letter-spacing: .2px; }
.tickets-cabecera .btn { margin-left: auto; flex: none; }


/* ── El menú de secciones ── */
.menu { position: relative; }
.tab-menu i { font-style: normal; font-size: 10px; opacity: .6; margin-left: 2px; }

.menu-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 168px;
  background: var(--panel-alto);
  border: 1px solid var(--borde-luz);
  border-radius: var(--r-s);
  box-shadow: var(--sombra);
  padding: 5px;
  display: flex;
  flex-direction: column;
}
/* Abierto, el desplegable de "Más" vive en el `body` y no adentro de la barra: la barra
   lo recortaba en un teléfono y lo dejaba por debajo del resto. Acá arriba no hay nada
   que lo tape ni que lo corte. */
.menu-lista-suelta {
  position: fixed;
  right: auto;
  z-index: 100;
}

.menu-opcion {
  border: 0;
  background: transparent;
  color: var(--tenue);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
}
.menu-opcion:hover { background: var(--panel); color: var(--texto); }

/* ── La nota del ticket y de la clienta ── */
.campo-nota { margin-top: 12px; }
.campo-nota textarea {
  width: 100%;
  resize: vertical;
  padding: 11px 13px;
  border-radius: var(--r-s);
  border: 1px solid var(--borde);
  background: var(--fondo-alto);
  color: var(--texto);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
}
.campo-nota textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-op); }

/* ── La ficha de la clienta ── */
.ficha {
  background: var(--panel);
  border: 1px solid var(--borde-luz);
  border-radius: var(--r);
  padding: 20px 22px 22px;
  margin-bottom: 22px;
}
.ficha-cabecera { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 16px; }
.ficha-cabecera h2 { font-family: var(--serif); font-size: 23px; font-weight: 400; }
.ficha-cabecera .mov-tel { margin-top: 3px; }

.ficha-cifras { display: flex; gap: 26px; margin-left: auto; }
.ficha-cifras span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muy-tenue);
}
.ficha-cifras b {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.ficha-botones { justify-content: flex-end; margin-top: 10px; }
.ficha-titulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--tenue);
  font-weight: 500;
  margin: 22px 0 10px;
}
.campo-buscar { width: 300px; }
.tickets-cabecera #clientesResumen { margin: 0; color: var(--tenue); font-size: 13.5px; }

/* ── La pizarra ── */
.nota-fila {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: 13px 16px;
  margin-bottom: 8px;
}
.nota-quien { width: 230px; flex: none; }
.nota-quien b { display: block; font-size: 14px; }
.nota-quien small { color: var(--muy-tenue); font-size: 12px; }
.nota-texto {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto);
  white-space: pre-wrap;
}

/* Los dos tipos de nota, distintos de un vistazo: la de la clienta vale para siempre
   —la fórmula, una alergia— y la de la visita es de un día puntual. */
.ficha-cerrar {
  border: 1px solid var(--borde-luz);
  color: var(--tenue);
  padding: 7px 14px;
  font-size: 13px;
  flex: none;
  align-self: flex-start;
}
.ficha-cerrar:hover { border-color: var(--acento); color: var(--acento); background: transparent; }

.nota-tipo {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muy-tenue);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 2px 9px;
}
.nota-tipo-clienta { color: var(--acento); border-color: rgba(181, 102, 58,.4); }
.nota-de-clienta { border-left: 3px solid rgba(181, 102, 58,.45); }

/* Abierta: se le ve todo y se edita ahí mismo, sin saltar de pantalla. */
.nota-fila.nota-abierta {
  flex-direction: column;
  gap: 12px;
  border-color: var(--borde-luz);
  background: var(--panel-alto);
}
.nota-abierta .nota-quien { width: auto; }
.nota-cuerpo { width: 100%; display: flex; flex-direction: column; gap: 11px; }
.nota-datos { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12.5px; color: var(--tenue); }
.nota-datos i { color: var(--muy-tenue); font-style: normal; margin-right: 4px; }
.nota-editor {
  width: 100%;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
}
.nota-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Eliminar a la izquierda y separado del resto: no puede quedar pegado a "Guardar". */
.nota-acciones .peligro { margin-right: auto; }

@media (max-width: 700px) {
  .nota-fila { flex-direction: column; gap: 8px; }
  .nota-quien { width: auto; }
}

/* ═══════════════════════════════════════════════════════════
   El ticket en su ventana, el menú de cierre y el perfil
   (2026-09-10)
   ═══════════════════════════════════════════════════════════ */

/* ── La ventana del ticket ──
   Tocar un ticket del historial o de una clienta te empujaba a la pestaña Hoy y te
   dejaba ahí: perdías de vista dónde estabas, y un ticket de hace tres semanas se veía
   igual que uno de hoy. Ahora se abre encima, se trabaja y se cierra. */
.dlg {
  border: 1px solid var(--borde-luz);
  border-radius: var(--r);
  background: var(--fondo-alto);
  color: var(--texto);
  padding: 0;
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow: 0 24px 70px rgba(43, 29, 24, .22);
}
.dlg::backdrop {
  background: rgba(43, 29, 24, .45);
  backdrop-filter: blur(2px);
}
/* Adentro del diálogo el formulario ya no es una tarjeta suelta: la tarjeta es la
   ventana. Sin esto quedaba un borde dentro de otro borde. */
.dlg .carga {
  box-shadow: none;
  border: 0;
  border-radius: var(--r);
  margin: 0;
}
.dlg .btn-flotar { display: none; }

/* ── El menú verde del pie: qué se hace con este ticket ── */
.menu-cierre { position: relative; }
.menu-cierre .btn { display: inline-flex; align-items: center; gap: 7px; }
.menu-cierre i { font-style: normal; font-size: 11px; opacity: .8; }

/* Se abre hacia arriba: el botón vive en el pie del formulario y abajo no hay lugar. */
.menu-lista-arriba {
  bottom: calc(100% + 7px);
  top: auto;
  right: 0;
  left: auto;
  min-width: 190px;
}
.menu-peligro { color: var(--rojo); }

/* ═══ Perfil del salón ═══ */

.perfil-bloque {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 20px 22px 18px;
  margin-bottom: 20px;
}
.perfil-bloque > h2 { font-size: 16px; margin-bottom: 14px; }

.perfil-lista { display: flex; flex-direction: column; gap: 7px; }

.perfil-fila {
  display: grid;
  grid-template-columns: 130px 1fr 130px 88px 96px;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  border-radius: var(--r-s);
}
.perfil-lista-simple .perfil-fila { grid-template-columns: 1fr 130px 96px; }

/* Mientras pregunta si lo saca, la fila se marca: hay que ver cuál se está por sacar. */
/* ── El nombre del salón, que ahora es un botón ──
   Tiene que seguir viéndose como el nombre del local y no como un control: es el título
   de la pantalla, y de paso el camino al perfil. */
#btnMarca {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
#btnMarca:hover { border-bottom-color: rgba(217, 168, 100, .5); }
#btnMarca:focus-visible { outline: none; border-bottom-color: var(--neon); }

/* Eliminar no puede ser el botón más apagado de la fila: es el único que hace algo
   irreversible, y si no se lee no se encuentra el día que lo necesita. */
.pf-borrar .icono {
  border: 1px solid var(--borde-luz);
  color: var(--tenue);
  font-size: 12.5px;
  padding: 5px 11px;
}
.pf-borrar .icono.peligro:hover {
  border-color: var(--rojo);
  color: var(--rojo);
  background: rgba(124, 58, 54, .12);
}
.pf-confirmar .icono.peligro {
  border-color: var(--rojo);
  color: var(--rojo);
  background: rgba(124, 58, 54, .16);
}

.perfil-fila.por-borrar {
  background: rgba(124, 58, 54, .12);
  box-shadow: 0 0 0 1px rgba(124, 58, 54, .4);
}

.pf-borrar { display: flex; justify-content: flex-end; }
.pf-confirmar { display: flex; gap: 5px; }

.perfil-fila input[type="text"],
.perfil-fila input:not([type]) {
  width: 100%;
}
.perfil-fila .con-signo { width: 100%; }

.pf-desde-caja {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--tenue);
  cursor: pointer;
  user-select: none;
}
.pf-desde-caja input { accent-color: var(--acento); }

.perfil-pie {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.perfil-pie .btn-guardar { margin-left: auto; }

.perfil-nota {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--muy-tenue);
  line-height: 1.5;
}
.perfil-reset {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

/* ── Los horarios de cada día ── */
.perfil-dias { display: flex; flex-direction: column; gap: 10px; }

.perfil-dia {
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: 12px 14px;
  background: var(--fondo-alto);
}
.perfil-dia-cab { display: flex; align-items: baseline; gap: 10px; }
.perfil-dia-cab h3 { font-size: 14px; }
.perfil-dia-resumen { font-size: 12px; color: var(--muy-tenue); }

.perfil-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0;
  min-height: 4px;
}
.chip-hora {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.chip-quitar {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muy-tenue);
  cursor: pointer;
  padding: 0 1px;
  font-size: 13px;
  line-height: 1;
}
.chip-quitar:hover { color: var(--rojo); }

.perfil-generar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muy-tenue);
}
.perfil-generar input[type="time"],
.perfil-generar select { padding: 6px 9px; font-size: 12.5px; }
.perfil-sep {
  flex: 1;
  min-width: 12px;
  border-top: 1px solid var(--linea);
  height: 0;
}

@media (max-width: 820px) {
  .perfil-fila { grid-template-columns: 1fr 1fr; }
  .perfil-fila .pf-nombre { grid-column: 1 / -1; }
  .perfil-sep { display: none; }
}

/* ═══ La semana de horarios y el editor de un día (2026-09-10, segunda vuelta) ═══ */

.perfil-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 9px;
}

.dia-bloque {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  font: inherit;
  color: var(--texto);
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: 11px 12px 12px;
  min-height: 150px;
  cursor: pointer;
}
.dia-bloque:hover { border-color: var(--acento); background: var(--panel-alto); }
.dia-bloque:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-op); }
.dia-bloque.dia-cerrado { opacity: .55; min-height: 0; }

.dia-bloque-nombre { font-weight: 600; font-size: 13.5px; }
.dia-bloque-resumen { font-size: 11.5px; color: var(--acento); font-variant-numeric: tabular-nums; }
.dia-bloque.dia-cerrado .dia-bloque-resumen { color: var(--muy-tenue); }

.dia-bloque-horas { display: flex; flex-wrap: wrap; gap: 4px; }
.dia-bloque-horas .chip-hora { font-size: 10.5px; padding: 2px 6px; }
.dia-bloque-vacio { font-size: 11.5px; color: var(--muy-tenue); }
.dia-bloque-pie { margin-top: auto; font-size: 11px; color: var(--muy-tenue); }

/* ── El editor de un día ── */
.dlg-chico { width: min(440px, calc(100vw - 32px)); }
.dia-editor { padding: 22px 24px 20px; }
.dia-editor-cab h2 { font-size: 18px; }
.dia-editor-cab p { margin: 4px 0 16px; font-size: 12.5px; color: var(--tenue); }

.dia-editor-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 7px;
  max-height: 40vh;
  overflow: auto;
}
.dia-hora {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: 3px 4px 3px 7px;
}
.dia-hora input[type="time"] { flex: 1; min-width: 0; padding: 5px 6px; font-size: 13px; }

.dia-editor-tanda {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  font-size: 12.5px;
  color: var(--tenue);
}
.dia-editor-tanda > span { display: block; margin-bottom: 8px; }

.dia-editor-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}
.dia-editor-pie .botones { margin-left: auto; display: flex; gap: 8px; }

/* ═══ La ventana del ticket en un teléfono ═══
   A 380px de ancho una ventana centrada con márgenes es una tarjetita con dos campos
   por pantalla. Ocupa todo, y el pie con el botón verde queda pegado abajo para que se
   llegue con el pulgar sin tener que subir hasta el final del formulario. */
@media (max-width: 700px) {
  .dlg, .dlg-chico {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .dlg .carga { border-radius: 0; padding: 18px 16px 16px; }
  /* Pegado abajo, pero sin márgenes negativos: con el padding de la tarjeta se pasaban
     un pixel del ancho de la ventana y el teléfono quedaba con desplazamiento lateral. */
  .dlg .carga-pie {
    position: sticky;
    bottom: -1px;
    margin-top: 18px;
    padding: 12px 0;
    background: var(--panel);
    border-top: 1px solid var(--borde-luz);
  }
  .dlg .carga-pie .saldo { display: none; }
  .dlg .carga-pie .botones { width: 100%; display: flex; gap: 8px; }
  .dlg .carga-pie .botones > * { flex: 1; }
  .dlg .menu-cierre { flex: 1.4; }
  .dlg .menu-cierre .btn { width: 100%; justify-content: center; }

  .perfil-semana { grid-template-columns: repeat(2, 1fr); }
  .dia-editor { padding: 18px 16px; }
  .dia-editor-lista { max-height: none; }
}

@media (max-width: 980px) and (min-width: 701px) {
  .perfil-semana { grid-template-columns: repeat(4, 1fr); }
}

/* En la fila del perfil, el precio y el borrar se van abajo antes de apretarse. */
@media (max-width: 820px) {
  .perfil-lista-simple .perfil-fila { grid-template-columns: 1fr 110px; }
  .perfil-lista-simple .perfil-fila .pf-borrar { grid-column: 1 / -1; }
}

/* ═══ La barrida de señas (2026-09-10) ═══
   La pantalla que hace que cobrar las señas directo cueste cuarenta minutos al mes. Cada
   fila trae lo único que hace falta para reconocer la transferencia en el resumen del
   banco —quién y cuánto— y el botón que la confirma. */

#panel-tickets .movs > h2,
#panel-tickets .barrida-cab h2 {
  font-size: 17px;
  text-transform: none;
  letter-spacing: .2px;
  color: var(--texto);
  font-weight: 600;
  margin-bottom: 12px;
}
#panel-tickets .movs > h2.titulo-alerta { color: var(--rojo) !important; }

.barrida-cab { margin-bottom: 12px; }
.barrida-guia {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--tenue);
  line-height: 1.5;
}
.barrida-guia b { color: var(--acento); font-variant-numeric: tabular-nums; }

.barrida-fila { gap: 14px; }

.barrida-monto {
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.barrida-monto b {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--neon);
  letter-spacing: .3px;
}
.barrida-monto small { font-size: 11px; color: var(--muy-tenue); }

.barrida-acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.barrida-pedir {
  border: 1px solid var(--borde-luz);
  color: var(--tenue);
  text-decoration: none;
  padding: 6px 12px;
  white-space: nowrap;
}
.barrida-pedir:hover { border-color: var(--acento); color: var(--acento); background: transparent; }
.barrida-entro { padding: 8px 16px; font-size: 13.5px; white-space: nowrap; }

.perfil-fila-alias { grid-template-columns: minmax(0, 320px); }
.perfil-fila-datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }

@media (max-width: 700px) {
  .barrida-fila { flex-wrap: wrap; }
  .barrida-fila .mov-cuando { width: auto; }
  .barrida-fila .mov-quien { flex: 1 1 100%; order: -1; }
  .barrida-acciones { margin-left: auto; }
  .perfil-fila-alias, .perfil-fila-datos { grid-template-columns: 1fr; }
}

/* ═══ La agenda: el día como grilla de horarios (2026-09-10) ═══
   Es la pantalla que convierte a Riccio en algo que se puede comparar con la turnera. Un
   renglón por horario, y de un vistazo se ve dónde hay lugar. */

.ag-barra {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 20px;
}
/* El título no empuja: "Día siguiente" tiene que quedar pegado al día, igual que
   "Mes siguiente" en el calendario. Antes `flex: 1` lo mandaba al otro extremo de la
   barra y había que cruzar la pantalla para pasar de día (Jere, 2026-09-11). */
.ag-titulo { flex: none; min-width: 260px; }
.ag-titulo h2 { font-size: 19px; }
.ag-titulo p { margin: 3px 0 0; font-size: 12.5px; color: var(--tenue); }
.ag-barra #agHoy { margin-left: auto; }

/* Ir al mes no es moverse un día: es cambiar de distancia. Se ve distinto. */
.btn-mes {
  background: transparent;
  border: 1px solid rgba(181, 102, 58,.45);
  color: var(--acento);
}
.btn-mes:hover { background: var(--acento-op); border-color: var(--acento); }

.ag-grilla { display: flex; flex-direction: column; gap: 6px; }

.ag-fila {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--r-s);
  padding: 10px 14px;
  min-height: 56px;
  transition: .14s;
}
.ag-fila.ag-libre { background: transparent; border-color: var(--linea); }
.ag-fila.ag-libre:hover { border-color: var(--borde-luz); background: var(--fondo-alto); }
.ag-fila.ag-ocupada { border-left-color: var(--acento); }
.ag-fila.ag-cerrada { opacity: .5; border-color: var(--linea); background: transparent; }
/* Un turno en una hora que no está en la plantilla: existe, pero se ve que es la excepción */
.ag-fila.ag-extra { border-left-color: var(--borde-luz); border-left-style: dotted; }

.ag-hora {
  width: 62px;
  flex: none;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
  letter-spacing: .4px;
}
.ag-fila.ag-libre .ag-hora,
.ag-fila.ag-cerrada .ag-hora { color: var(--muy-tenue); font-family: var(--sans); font-size: 14px; }
.ag-hora small { font-size: 11px; letter-spacing: 0; }

.ag-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ag-nota { font-size: 13px; color: var(--muy-tenue); }
.ag-nota-libre { color: var(--tenue); }

.ag-turno {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0;
  border-radius: 6px;
}
.ag-quien { min-width: 0; flex: 1; }
.ag-quien b { display: block; font-weight: 600; font-size: 14.5px; }
.ag-quien small { color: var(--tenue); font-size: 12.5px; }
.ag-marcas { display: flex; align-items: center; gap: 10px; flex: none; }
.ag-falta { font-size: 12.5px; color: var(--tenue); font-variant-numeric: tabular-nums; }

.ag-acciones { display: flex; align-items: center; gap: 8px; flex: none; }

/* El botón de abrir aparece en cada hueco libre, así que no puede ser verde: una columna
   de botones verdes repetidos hasta abajo tapa lo único que importa de esta pantalla, que
   es dónde hay lugar. Queda apagado y se enciende cuando el mouse entra en la fila. */
.ag-abrir {
  padding: 7px 14px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--borde-luz);
  color: var(--tenue);
  box-shadow: none;
}
.ag-fila:hover .ag-abrir:not([disabled]),
.ag-abrir:focus-visible {
  border-color: var(--acento);
  color: var(--fondo);
  background: var(--acento);
}
.ag-abrir[disabled] { opacity: .3; cursor: not-allowed; }

.ag-pie { max-width: 640px; }

@media (max-width: 700px) {
  .ag-barra { gap: 10px; }
  .ag-titulo { order: -1; flex: 1 1 100%; }
  .campo-ag-fecha { width: 100%; }
  .ag-fila { flex-wrap: wrap; gap: 8px 12px; }
  .ag-cuerpo { flex: 1 1 auto; }
  .ag-acciones { flex: 1 1 100%; justify-content: flex-end; }
}

/* El mes contesta "¿dónde me queda lugar?" además de "¿cuánto hice?" */
.cal-libres { color: var(--verde); }
.cal-completo { color: var(--muy-tenue); }
.cal-dia { cursor: pointer; }
.cal-pie { margin-top: 14px; }

/* ═══ El buzón, adentro del perfil ═══ */

.buzon-entrar { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.buzon-entrar input { flex: 1; min-width: 180px; }
.buzon-entrar .btn { flex: none; }
.buzon-error {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--rojo);
  background: rgba(124, 58, 54, .1);
  border: 1px solid rgba(124, 58, 54, .3);
  border-radius: var(--r-s);
  padding: 8px 12px;
}

/* ── La dirección que reparte ──
   Es lo primero del panel y lo más grande, porque es lo único de acá que ella necesita
   todos los días: lo que le manda a cada clienta que le escribe. Todo lo demás de esta
   sección es plomería (Jere, 2026-09-12). */
.turnos-link {
  background: var(--panel-alto);
  border: 1px solid rgba(181, 102, 58, .35);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 11px;
}
.turnos-link-rotulo {
  margin: 0;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--acento); font-weight: 600;
}
.turnos-link-fila { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.turnos-link-dir {
  flex: 1 1 240px; min-width: 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 14px;
  color: var(--neon);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: 11px 13px;
  overflow-wrap: anywhere;
  display: flex; align-items: center;
}
.turnos-link-fila .btn { flex: none; }
.turnos-link-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.turnos-link-acciones .icono { text-decoration: none; }

/* Desconectar, lejos de todo lo demás: no le resuelve nada y apaga su página. */
.buzon-salir { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); }

.buzon-estado {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  padding: 13px 16px;
  margin-top: 14px;
}
.buzon-punto {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 4px rgba(94, 122, 79, .18);
}
.buzon-quien { flex: 1; min-width: 150px; }
.buzon-quien b, .buzon-publi b { display: block; font-size: 14px; font-weight: 600; }
.buzon-quien small, .buzon-publi small { color: var(--tenue); font-size: 12.5px; }
.buzon-estado-frio .buzon-punto {
  background: var(--muy-tenue);
  box-shadow: 0 0 0 4px rgba(107, 87, 78, .18);
}
.buzon-publi { text-align: right; flex: none; }
.buzon-publi b { color: var(--acento); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .buzon-publi { text-align: left; flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════
   El teléfono (2026-09-10)

   Las filas de las listas —que son el corazón de Hoy, Tickets, Clientes e
   Historial— nunca habían tenido una sola regla para pantallas angostas.
   Estaban armadas con anchos fijos y proporciones pensadas para una notebook,
   así que a 540px el nombre se partía en dos, los chips se montaban encima del
   servicio y el teléfono bajaba en columna, un dígito por renglón.

   Se descubrió mirando una captura del teléfono, no probando el código: las
   medidas daban bien —nada desbordaba— y aun así era ilegible. Vale como
   recordatorio de que "no desborda" y "se lee" no son la misma cosa.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

  /* ── La barra de arriba ── */
  .topbar { gap: 10px 16px; padding: 12px 16px; flex-wrap: wrap; }
  .marca h1, #btnMarca { font-size: 21px; }
  .marca .fecha { font-size: 11.5px; }
  /* La firma se va: es lo único de la barra que no sirve para trabajar. */
  .riccio { display: none; }
  .tabs {
    margin-left: auto;
    flex: 1 1 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 8px 15px; font-size: 13.5px; white-space: nowrap; flex: none; }

  main { padding: 18px 14px 60px; }

  /* ── La fila de una lista pasa a ser una tarjeta ──
     Arriba la hora y el estado, que es lo que se busca de un vistazo; después
     el nombre con su servicio; abajo la plata y las acciones. */
  .mov {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 7px 12px;
    padding: 12px 14px;
  }
  .mov-hora, .mov-cuando { width: auto; flex: none; order: 1; }
  .mov-cuando b { display: inline; margin-right: 6px; }
  .mov-hora small { display: inline; margin-left: 6px; }

  .mov-estado, .mov-total {
    order: 2;
    width: auto;
    margin-left: auto;
    text-align: right;
    flex: none;
  }

  .mov-quien { order: 3; flex: 1 1 100%; }
  /* El teléfono ya venía en su propio renglón; forzarlo a inline lo pegaba al
     nombre del servicio y quedaba "Corte11 3323 9611". */
  .mov-tel { margin-top: 3px; }

  .mov-plata { order: 4; flex: 1 1 100%; justify-content: flex-start; }
  .mov-acciones { order: 5; flex: 1 1 100%; justify-content: flex-end; }

  /* La lista compacta deja de ser compacta: a este ancho no hay nada que
     comprimir, y apretarla más era justamente el problema. */
  .lista-compacta .mov { gap: 7px 12px; padding: 12px 14px; }
  .lista-compacta .mov-cuando { width: auto; font-size: 12.5px; }
  .lista-compacta .mov-quien { flex: 1 1 100%; }
  .lista-compacta .mov-plata { flex: 1 1 100%; }
  .lista-compacta .mov-acciones { max-width: none; }
  .lista-compacta .icono { padding: 6px 12px; font-size: 12.5px; }

  /* ── La barrida ── */
  .barrida-monto { order: 2; margin-left: auto; text-align: right; }
  .barrida-acciones { order: 5; flex: 1 1 100%; justify-content: flex-end; }

  /* ── Las tarjetas del día ── */
  .kpis { grid-template-columns: 1fr; }

  /* ── La ficha de la clienta ── */
  .ficha-cabecera { flex-wrap: wrap; gap: 12px; }
  .ficha-cifras { flex: 1 1 100%; }

  /* ── El historial ── */
  .hist-barra { flex-wrap: wrap; gap: 12px; }
  .hist-barra .botones { flex: 1 1 100%; flex-wrap: wrap; }
  .dia-cifras { flex-wrap: wrap; gap: 10px 16px; }

  /* ── La cabecera de Tickets ── */
  .tickets-cabecera { flex-wrap: wrap; }
  .tickets-cabecera .btn { margin-left: 0; flex: 1 1 100%; }
}

/* ═══ Los comprobantes recibidos ═══
   La miniatura al lado del nombre: se reconoce de un vistazo si la captura sirve, y se
   toca para verla grande. Baja con su sesión — el depósito es privado y nunca hay un
   link público a un comprobante con los datos bancarios de una clienta adentro. */

/* ── Lo que hay que mandar hoy ── */
.mensaje-fila .mov-plata { flex: none; }
.mensaje-hecho { opacity: .5; }
.mensaje-listo { font-size: 12.5px; color: var(--verde); white-space: nowrap; padding: 0 8px; }

/* Un color por momento: pedir la seña traba plata, recordar evita un ausente y
   agradecer es cortesía. Se distinguen de un vistazo en la pasada. */
.chip-sena         { border-color: rgba(181, 102, 58,.45); color: var(--acento); }
.chip-recordatorio { border-color: rgba(94, 122, 79,.45); color: var(--verde); }
.chip-gracias      { border-color: var(--borde-luz); color: var(--tenue); }

/* El renglón de la que ya subió la captura. Verde y suave: marca que hay algo para
   mirar, sin gritar — el trabajo sigue siendo cruzar contra el banco. */
.barrida-con-comprobante {
  border-color: rgba(94, 122, 79, .5);
  box-shadow: inset 0 0 0 1px rgba(94, 122, 79, .16);
}

.comprobante-caja {
  flex: none;
  width: 96px; height: 68px;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--fondo-alto);
  border: 1px solid var(--borde-luz);
  display: flex; align-items: center; justify-content: center;
}
.comprobante-caja img {
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}
.comprobante-cargando { font-size: 11px; color: var(--muy-tenue); text-align: center; padding: 0 6px; }

/* El recuadro vacío de la que todavía no subió nada. Se tiene que ver que ahí falta
   algo, y a la vez no puede pesar más que la que sí mandó la captura. */
.comprobante-vacia {
  border-color: var(--linea);
  background: transparent;
}

@media (max-width: 760px) {
  .comprobante-caja { order: 2; margin-left: auto; width: 74px; height: 54px; }
}

/* ═══ Los mensajes de ella ═══ */
.mensajes { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.campo-mensaje > span { display: flex; flex-direction: column; gap: 2px; }
.campo-mensaje > span small { color: var(--muy-tenue); font-size: 11.5px; }
.campo-mensaje textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
}
.perfil-nota code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
  color: var(--acento);
  background: var(--acento-op);
  border-radius: 5px;
  padding: 2px 6px;
  margin-right: 2px;
  white-space: nowrap;
}
/* Es lo único que se hace desde la agenda además de mirar, así que se tiene que ver.
   Apagado como estaba, no se encontraba (Jere, 2026-09-11). */
.ag-recordar {
  border: 1px solid rgba(181, 102, 58,.5);
  color: var(--acento);
  text-decoration: none;
  padding: 6px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 600;
  white-space: nowrap;
}
.ag-recordar:hover { border-color: var(--acento); background: var(--acento-op); color: var(--neon); }

/* ═══ Lo que leyó el modelo ═══
   Al lado de la miniatura, nunca en lugar de ella. Son marcas para mirar rápido; la
   decisión sigue siendo de ella. */
.comprobante-marcas {
  display: flex; flex-wrap: wrap; gap: 5px;
  flex: none; max-width: 190px;
  justify-content: flex-end;
}
.marca-lectura {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--borde-luz);
  color: var(--muy-tenue);
  white-space: nowrap;
}
.marca-lectura.marca-si { color: var(--verde); border-color: rgba(94, 122, 79,.45); }
.marca-lectura.marca-no { color: var(--rojo); border-color: rgba(124, 58, 54,.45); background: rgba(124, 58, 54,.08); }
.comprobante-leyendo { font-size: 11px; color: var(--muy-tenue); font-style: italic; }

.perfil-interruptor {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--borde);
  cursor: pointer;
}
/* `input, select { width: 100% }` arriba también le pega a las casillas, y una casilla
   de 900px empuja su propio texto fuera del panel. Va acá y no sólo en el interruptor
   del buzón: la próxima casilla que agregue tiene que nacer bien. */
input[type="checkbox"], input[type="radio"] { width: auto; }

.perfil-interruptor input { accent-color: var(--acento); margin-top: 3px; flex: none; }
.perfil-interruptor-futuro { cursor: default; opacity: .75; }
.pronto {
  font-style: normal;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muy-tenue);
  border: 1px solid var(--borde-luz);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
}
.perfil-interruptor > span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.perfil-interruptor small { color: var(--muy-tenue); font-size: 12px; line-height: 1.5; }

@media (max-width: 760px) {
  .comprobante-marcas { order: 4; flex: 1 1 100%; max-width: none; justify-content: flex-start; }
}

/* ═══ La puerta de ingreso (2026-09-13) ═══
   Mientras está a la vista, Riccio no existe: ni la barra ni los paneles se asoman por
   detrás. Chica y centrada, que es lo que se reconoce como "entrar" en cualquier lado. */

body.sin-sesion > header,
body.sin-sesion > main { display: none; }

.ingreso {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px 18px;
}
.ingreso-caja {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 30px 26px 24px;
}
.ingreso-salon {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--neon);
  text-align: center;
}
.ingreso-sub { margin: -8px 0 6px; text-align: center; color: var(--tenue); font-size: 14px; }
.ingreso-caja .buzon-error { margin: 0; }
.ingreso-caja .btn-guardar { width: 100%; margin-top: 4px; }
.ingreso-caja .btn-guardar:disabled { opacity: .6; cursor: default; }
.ingreso-nota { margin: 0; text-align: center; font-size: 12.5px; color: var(--muy-tenue); line-height: 1.5; }
.ingreso-nota a { color: var(--tenue); cursor: pointer; }
.ingreso-nota a:hover { color: var(--acento); }
/* En el celular la barra esconde el "riccio"; acá no hay barra, así que se ve siempre. */
.ingreso-riccio { display: inline !important; }

/* ── Tu cuenta, en el perfil ── */
.cuenta-quien { margin: 0 0 14px; font-size: 14px; color: var(--tenue); }
.cuenta-quien b { color: var(--texto); font-weight: 600; }
.perfil-fila-clave { grid-template-columns: repeat(3, minmax(0, 220px)); gap: 14px; }
@media (max-width: 700px) {
  .perfil-fila-clave { grid-template-columns: 1fr; }
}

/* ── El ojo de las contraseñas ── */
.con-ojo { position: relative; }
.con-ojo input { padding-right: 44px; }
.ojo {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--muy-tenue);
  cursor: pointer;
  transition: .14s;
}
.ojo:hover { color: var(--texto); background: var(--panel-alto); }

/* ── Si lo anotado ya está a salvo ── */
.cuenta-sincro { margin: -8px 0 14px; font-size: 12.5px; color: var(--muy-tenue); }
.cuenta-sincro:empty { display: none; }
.cuenta-sincro.sincro-ok { color: var(--verde); }
.cuenta-sincro.sincro-alerta { color: var(--acento); }

/* ═══════════════════════════════════════════════════════════
   Celular, segunda vuelta (Jere, 2026-09-13)
   ═══════════════════════════════════════════════════════════ */

/* ── El formulario del turno: rótulos en un renglón, campos en el otro ──
   Cada `.campo` es un rótulo arriba de su campo. Con un rótulo que ocupa dos líneas
   —"TOTAL DEL SERVICIO !" en un teléfono— su campo bajaba y quedaba desfasado del de
   al lado. `display: contents` suelta el rótulo y el campo en la grilla de la fila, y
   así todos los rótulos comparten el renglón 1 y todos los campos el 2: se alinean
   solos, midan lo que midan. El <label> sigue existiendo, así que tocar el rótulo
   sigue llevando al campo. */
.fila-servicio { row-gap: 6px; }
.fila-servicio > .campo { display: contents; }
.fila-servicio > .campo > span { grid-row: 1; align-self: end; }
.fila-servicio > .campo > input,
.fila-servicio > .campo > select,
.fila-servicio > .campo > .con-signo { grid-row: 2; }
.fila-servicio > .campo > .pista { grid-row: 3; }
/* La columna, explícita: si no, la aclaración del precio ("arranca desde…") busca el
   primer lugar libre de su renglón y cae debajo del servicio en vez del precio. */
.fila-servicio > .campo:nth-of-type(1) > * { grid-column: 1; }
.fila-servicio > .campo:nth-of-type(2) > * { grid-column: 2; }

/* ── Las filas de plata: el nombre a la izquierda, el monto a la derecha ──
   Antes cada pieza caía donde le tocaba en orden, y en un teléfono el monto quedaba en
   el medio y la × del producto se iba sola al renglón de abajo. Ahora cada una tiene su
   lugar fijo: nombre · monto · ×, y los medios de pago abajo, a lo ancho. */
@media (max-width: 620px) {
  .linea,
  body.flotante .linea { grid-template-columns: minmax(0, 1fr) 150px 28px; row-gap: 8px; }
  .linea > .linea-rotulo,
  .linea > .prod-nombre       { grid-column: 1; grid-row: 1; }
  .linea > .con-signo         { grid-column: 2; grid-row: 1; }
  .linea > .linea-hueco,
  .linea > .prod-quitar       { grid-column: 3; grid-row: 1; }
  .linea > .opciones          { grid-column: 1 / -1; grid-row: 2; }
  .linea-comprobante > input  { grid-column: 2 / -1; grid-row: 1; }
  .linea-comprobante > .linea-hueco { display: none; }
  /* Los dos totales se van al renglón de abajo, a lo ancho: en la columna del monto
     "A cobrar ahora" partía el rótulo en tres líneas. */
  .linea-total > .totales,
  body.flotante .linea-total > .totales { grid-column: 1 / -1; grid-row: 2; }
  .ahora-rotulo { white-space: nowrap; }
}

@media (max-width: 760px) {
  /* ── "Más" contra el borde derecho, como cualquier menú de un teléfono ── */
  .tabs .menu { margin-left: auto; }

  /* ── La barra del calendario ──
     El título del mes no entra entre dos botones: se montaba encima de "Mes siguiente".
     Pasa a su propio renglón y los botones se reparten el de abajo. */
  .cal-barra { flex-wrap: wrap; gap: 8px; }
  .cal-barra h2 { order: -1; flex: 1 1 100%; font-size: 20px; }
  .cal-barra .btn { flex: 1 1 0; padding: 9px 8px; font-size: 13px; }
  .cal-barra #calHoy { flex: 0 0 auto; margin-left: 0; padding: 9px 16px; }

  /* Siete columnas que pueden achicarse de verdad: con `1fr` a secas, el monto de un
     día largo empujaba la grilla y el domingo quedaba cortado afuera de la pantalla. */
  .cal-encabezado,
  .cal-grilla { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
}

/* ── Tickets: lo que no tiene nada, se ve igual, pero apagado ──
   Una sección que desaparece cuando está vacía no dice "no hay nada pendiente": dice
   nada, y puede parecer que se rompió. Se queda en su lugar con el título tenue y una
   línea que lo confirma (Jere, 2026-09-13). */
/* Con el id adelante y `!important` porque el rojo de "Quedaron sin cerrar" está
   declarado así: vacía, esa sección no tiene nada de alarma. */
#panel-tickets .movs-quieto > h2,
#panel-tickets .movs-quieto > h2.titulo-alerta { color: var(--muy-tenue) !important; font-size: 15px; font-weight: 500; margin-bottom: 8px; }
#panel-tickets .movs-quieto > h2 .ayuda { opacity: .55; border-color: rgba(181, 102, 58,.45); color: var(--acento); }
.vacio-fino {
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  border-radius: var(--r-s);
}
#panel-tickets .movs-quieto { margin-top: 26px; margin-bottom: 0; }

/* ── La plata de un día del calendario, en un teléfono chico ── */
.plata-corta { display: none; }
@media (max-width: 440px) {
  .plata-larga { display: none; }
  .plata-corta { display: inline; }
  .cal-dia { padding: 7px 5px; }
  .cal-plata { font-size: 11px; }
  .cal-plata b { white-space: nowrap; }
}

/* En un teléfono chico, con la pastilla de Tickets, la última pestaña quedaba cortada
   contra el borde: se achica el aire entre pestañas para que entren las cuatro. */
@media (max-width: 400px) {
  .tabs { gap: 2px; }
  .tab { padding: 8px 10px; }
}

/* ── "buscar ahora", al lado de cuándo se consultó ── */
.buzon-ahora {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: 12.5px; color: var(--acento);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.buzon-ahora:hover { color: var(--neon); }

/* ── El reloj de "Otro horario…", en el lugar de la lista ── */
.hora-libre { color-scheme: dark; }

/* ── La captura en "Señados" ── */
#listaSenados .comprobante-caja { width: 64px; height: 46px; }

/* ── Borrar a una clienta: al fondo de la ficha, lejos de todo lo demás ── */
.ficha-borrar { display: block; margin: 22px 0 0 auto; font-size: 12.5px; }


/* ═══════════════════════════════════════════════════════════
   La carta de color, aplicada (2026-09-13)
   Lo que no alcanzaba con cambiar los tokens: lo que estaba pensado para brillar sobre
   negro y sobre claro tiene que pesar de otra forma.
   ═══════════════════════════════════════════════════════════ */

/* La letra ancha va angosta y pesada donde manda: nombres y montos. */
.marca h1, #btnMarca, .kpi-valor, #totalVisita, #totalAhora, .titulo-panel, .ficha-cabecera h2,
.cal-barra h2, .ingreso-salon {
  font-stretch: 82%;
  font-weight: 800;
  letter-spacing: -.6px;
}
.marca h1, #btnMarca { color: var(--c30); }

/* Lo que se toca: cobrizo oscuro, píldora, blanco encima. */
.btn { border-radius: 999px; }
.btn-guardar { background: var(--c64); color: #fff; font-weight: 700; }
.btn-guardar:hover { background: var(--c30); }
.btn-fantasma { color: var(--c30); }

/* La pestaña en la que está: tinta llena. */
.tab.is-activa { background: var(--c30); color: var(--fondo-alto); border-color: var(--c30); }
.pastilla { background: var(--c83); color: var(--c30); font-family: var(--mono); font-weight: 600; }
.tab.is-activa .pastilla { background: var(--c83); }

/* La cifra destacada del día: la única tarjeta oscura de la pantalla. */
.kpi-destacada { border-color: var(--c30); box-shadow: none; }
.kpi-destacada h3 { color: var(--c83); }
.kpi-destacada .kpi-valor { color: var(--fondo-alto); }
.kpi-destacada .kpi-pie, .kpi-destacada p { color: #cdbbae; }
.kpi-destacada .ayuda { border-color: rgba(217,168,100,.6); color: var(--c83); }

/* Las tarjetas se separan del fondo por el blanco, no por el borde. */
.carga, .kpi, .mov, .perfil-bloque, .ficha, .cal-dia { background: var(--fondo-alto); }

/* …salvo la cifra destacada del día, que es la única oscura. */
.kpi.kpi-destacada { background: var(--c30); }

/* Los estados, con los tonos de la carta: 8.3 espera, 7.4 señado, 3.0 cerrado, 5.5 no vino. */
.estado { font-weight: 600; border-width: 0; padding: 3px 10px; }
.estado-solicitado { background: #f3e6cf; color: #6e4a12; }
.estado-senado     { background: #f0dccd; color: #7a3d1c; }
.estado-cerrado, .estado-atendido { background: var(--c30); color: var(--fondo-alto); }
.estado-ausente, .estado-cancelado { background: #ecd6d4; color: var(--c55); }

.punto-senado     { background: var(--c74); }
.punto-solicitado { border-color: var(--c83); border-width: 2px; }
.punto-cerrado    { background: var(--c30); }
.kpi-senas .kpi-valor { color: var(--c64); }

/* Los códigos y números de ticket, en mono. */
.mov-hora small, .ticket-id, .mov-cuando b { font-family: var(--mono); font-size: .86em; letter-spacing: 0; }

/* El logo: la r con su tono. */
.riccio { display: inline-flex; align-items: center; gap: 7px; font-family: var(--serif);
  font-style: normal; font-weight: 800; font-stretch: 80%; letter-spacing: -.4px; font-size: 16px; color: var(--tenue); }
.riccio svg { width: 22px; height: 22px; flex: none; }
a.btn { text-decoration: none; }
/* En el teléfono la barra no tiene lugar para la firma: el nombre del salón alcanza. */
@media (max-width: 760px) { .topbar > .riccio { display: none; } }

/* ── Los días del calendario con lugar: verde que se note ── */
.cal-libres { color: #3f6634; font-weight: 700; }
.cal-libres::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5e7a4f; margin-right: 5px; vertical-align: 1px; }

/* ── Campos: ni blanco total ni perdidos en el fondo ── */
input, select, textarea { background: #f7f5f0; border-color: var(--borde-luz); }
input:focus, select:focus, textarea:focus { background: #fdfcfa; }

/* ── Los pedidos de cambio de turno ── */
.cambio-antes { text-decoration: line-through; text-decoration-color: var(--muy-tenue); }
.cambio-despues { color: var(--c64) !important; font-weight: 600; }

/* ═══ Elegir el salón (varios salones, docs/20) ═══ */
.salones-lista { display: grid; gap: 8px; }
.salon-opcion {
  display: grid; gap: 2px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--r-s);
  background: var(--panel); color: var(--texto); font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.salon-opcion:hover { border-color: var(--acento); background: var(--panel-alto); }
.salon-opcion:disabled { opacity: .6; cursor: default; }
.salon-opcion small { color: var(--tenue); font-size: 12px; }

/* ═══ Cambios sin guardar en el perfil (2026-09-27) ═══ */
/* Los botones de guardar del perfil: apagados mientras no hay nada que guardar, y
   encendidos —con un latido suave— en cuanto cambia algo (2026-09-27). */
.btn-guardar.vigilado:not(.pendiente) {
  background: transparent; color: var(--tenue); border-color: var(--borde);
}
.btn-guardar.vigilado:not(.pendiente):hover { color: var(--texto); border-color: var(--linea); }
.btn-guardar.vigilado.pendiente {
  background: var(--c74); color: #fff;
  animation: pendiente 1.8s ease-in-out infinite;
}
@keyframes pendiente {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 102, 58, .45); }
  50%      { box-shadow: 0 0 0 7px rgba(181, 102, 58, 0); }
}

/* Salir del perfil con cambios sin guardar. */
.sin-guardar { padding: 22px 22px 20px; display: grid; gap: 10px; }
.sin-guardar h2 { margin: 0; font-size: 18px; }
.sin-guardar p { margin: 0; color: var(--tenue); font-size: 14px; }
.sin-guardar-cuales:empty { display: none; }
.sin-guardar-cuales { color: var(--texto) !important; font-weight: 600; }
.sin-guardar .botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.sin-guardar .peligro { color: var(--rojo); }
.sin-guardar .peligro:hover { border-color: var(--rojo); }
@media (prefers-reduced-motion: reduce) {
  .btn-guardar.vigilado.pendiente { animation: none; }
}