/* ═══ Riccio ═══
   Estética del local: oscuro, cálido, con aire. Neón tibio sobre pared negra.
   Regla que manda sobre todas: esto no puede parecerse nunca a una planilla. */

:root {
  --fondo:      #151010;
  --fondo-alto: #1d1716;
  --panel:      #241d1b;
  --panel-alto: #2d2422;
  --borde:      #3a2e2b;
  --borde-luz:  #4d3e39;

  --texto:      #f4ebe4;
  --tenue:      #a8968c;
  --muy-tenue:  #7a6a62;

  --neon:       #ffd9a8;
  --acento:     #e9a95c;
  --acento-op:  rgba(233, 169, 92, .14);
  --verde:      #86a184;
  --rojo:       #c9705f;

  --r:   14px;
  --r-s: 9px;
  --sombra: 0 10px 30px rgba(0,0,0,.45);

  --sans: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { 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 {
  background-image:
    radial-gradient(900px 400px at 78% -12%, rgba(255,217,168,.09), transparent 65%),
    radial-gradient(600px 300px at 5% 105%, rgba(134,161,132,.06), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

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

/* ── Barra superior ── */
.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, rgba(29,23,22,.95), rgba(21,16,16,.7));
  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);
  text-shadow: 0 0 18px rgba(255,217,168,.32);
}

.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(233,169,92,.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: #24160b;
  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: linear-gradient(155deg, rgba(233,169,92,.16), rgba(36,29,27,.9));
  border-color: rgba(233,169,92,.45);
  box-shadow: 0 0 34px rgba(233,169,92,.1);
}
.kpi-destacada .kpi-valor { color: var(--neon); text-shadow: 0 0 20px rgba(255,217,168,.28); }
.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(233,169,92,.4); color: var(--acento); }
.chip-producto { border-color: rgba(134,161,132,.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 dashed var(--borde);
  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; }

.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; }
}

/* ── Impresión: el resumen para la contadora ── */
.solo-impresion { display: none; }

@media print {
  body > *:not(#areaImpresion) { display: none !important; }
  .solo-impresion { display: block !important; }
  html, body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11pt;
  }
  #areaImpresion { padding: 0; }
  .p-cab { border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 18px; }
  .p-cab h1 { font-family: Georgia, serif; font-size: 20pt; margin: 0; }
  .p-cab p { margin: 4px 0 0; font-size: 10pt; color: #444; }
  .p-tot { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 20px; }
  .p-tot div { border: 1px solid #bbb; padding: 8px 14px; }
  .p-tot span { display: block; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .5px; color: #555; }
  .p-tot b { font-family: Georgia, serif; font-size: 14pt; font-weight: 400; }
  table.p-tabla { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  table.p-tabla th { text-align: right; border-bottom: 1.5px solid #111; padding: 6px 8px; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .4px; }
  table.p-tabla th:first-child, table.p-tabla td:first-child { text-align: left; }
  table.p-tabla td { text-align: right; border-bottom: 1px solid #ddd; padding: 6px 8px; font-variant-numeric: tabular-nums; }
  table.p-tabla tr.p-total td { border-top: 1.5px solid #111; border-bottom: 0; font-weight: 700; }

  /* Las cuatro secciones del resumen para la contadora. Cada una es una tabla de tres
     columnas: qué, cuánto y para qué le sirve — esa tercera columna es lo que hace que
     no haya que explicarle el informe por teléfono. */
  table.p-seccion { width: 100%; border-collapse: collapse; margin-bottom: 16px; page-break-inside: avoid; }
  table.p-seccion th { text-align: left; border-bottom: 1.5px solid #111; padding: 6px 8px; font-size: 9.5pt; }
  table.p-seccion th.p-objetivo { text-align: right; font-weight: 400; font-size: 8.5pt; color: #555; font-style: italic; }
  table.p-seccion td { border-bottom: 1px solid #e2e2e2; padding: 5px 8px; font-size: 10pt; }
  table.p-seccion td.p-rotulo { width: 42%; }
  table.p-seccion td.p-valor { width: 22%; text-align: right; font-family: Georgia, serif; font-size: 12pt; font-variant-numeric: tabular-nums; white-space: nowrap; }
  table.p-seccion td.p-para { color: #666; font-size: 8.5pt; }
  /* El desglose por medio de pago cuelga del total de arriba: se lee como parte de él. */
  table.p-seccion tr.p-sub td.p-rotulo { padding-left: 24px; color: #555; font-size: 9pt; }
  table.p-seccion tr.p-sub td.p-valor { font-family: inherit; font-size: 10pt; color: #555; }
  .p-titulo { font-family: Georgia, serif; font-size: 12pt; font-weight: 400; margin: 22px 0 8px; }
  .p-pie { margin-top: 22px; font-size: 8.5pt; color: #666; border-top: 1px solid #ccc; padding-top: 8px; }
  @page { margin: 1.6cm; }
}

/* ═══════════════════════════════════════════════════════════
   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(0, 0, 0, .2);
  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 dashed var(--borde-luz);
  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);
}
#totalVisita {
  grid-column: 2 / -1;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255, 217, 168, .22);
}

.alerta {
  margin: 0;
  font-size: 12.5px;
  color: var(--rojo);
  background: rgba(201, 112, 95, .1);
  border: 1px solid rgba(201, 112, 95, .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 dashed 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 #totalVisita { grid-column: 2 / -1; 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(233,169,92,.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: #241d1b;
  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(233,169,92,.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(134,161,132,.5); color: var(--verde); }
.estado-solicitado{ border-color: var(--borde-luz); color: var(--tenue); }
.estado-ausente   { border-color: rgba(201,112,95,.55); color: var(--rojo); }
.estado-cancelado { border-color: var(--borde); color: var(--muy-tenue); }
.estado-cerrado, .estado-atendido { border-color: rgba(233,169,92,.4); color: var(--acento); }

.mov-estado { flex: none; width: 96px; }
.mov.pendiente { border-style: dashed; }
.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(0,0,0,.6); }
.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(201,112,95,.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(0,0,0,.18); 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(233,169,92,.4); }
.nota-de-clienta { border-left: 3px solid rgba(233,169,92,.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(0, 0, 0, .6);
}
.dlg::backdrop {
  background: rgba(12, 8, 8, .72);
  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(255, 217, 168, .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(201, 112, 95, .12);
}
.pf-confirmar .icono.peligro {
  border-color: var(--rojo);
  color: var(--rojo);
  background: rgba(201, 112, 95, .16);
}

.perfil-fila.por-borrar {
  background: rgba(201, 112, 95, .12);
  box-shadow: 0 0 0 1px rgba(201, 112, 95, .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 dashed var(--borde);
  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(233,169,92,.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-style: dashed; }
.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-style: dashed; 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(201, 112, 95, .1);
  border: 1px solid rgba(201, 112, 95, .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(233, 169, 92, .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(134, 161, 132, .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(122, 106, 98, .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(233,169,92,.45); color: var(--acento); }
.chip-recordatorio { border-color: rgba(134,161,132,.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(134, 161, 132, .5);
  box-shadow: inset 0 0 0 1px rgba(134, 161, 132, .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-style: dashed;
  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(233,169,92,.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(134,161,132,.45); }
.marca-lectura.marca-no { color: var(--rojo); border-color: rgba(201,112,95,.45); background: rgba(201,112,95,.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; }
}