@charset "UTF-8";
/* ============================================================================
   PANEL DEL BARBERO
   ----------------------------------------------------------------------------
   Hereda las variables, el material .vidrio y los botones de estilo.css: aqui
   solo esta lo que el sitio publico no tiene.

   Esto se usa DE PIE, en la caja, con una mano y con el cliente delante. De
   ahi cada decision: botones de 56px, el celular con teclado numerico, la
   accion mas frecuente -poner un sello- a un solo toque, y cero tablas anchas
   o menus desplegables. La atmosfera va mas apagada que en el sitio: aqui se
   viene a trabajar, no a mirar.
   ========================================================================== */

/* OJO AL LEER ESTA HOJA: de aqui hasta el ultimo bloque los colores estan
   escritos como si el panel siguiera siendo negro, porque asi nacio. Ya no lo
   es. El bloque del final -EL PANEL, EN BLANCO- vuelve a declarar la paleta
   entera sobre .panel-body y pisa lo que haga falta, asi que ningun valor
   oscuro de por aqui llega vivo a la pantalla. */
.panel-body { background: var(--tinta); }

/* Mucho mas discreta que en el sitio publico. */
.atmosfera--panel .aurora { opacity: .17; }

.pantalla#pantalla-entrar {
  min-height: calc(var(--vh, 1vh) * 100);
  display: grid;
  place-items: center;
  padding: var(--e4) var(--margen);
}

/* ── Entrar ────────────────────────────────────────────────────────────── */
.entrar {
  width: min(100%, 400px);
  text-align: center;
  padding: var(--e4) var(--e3);
  border-radius: var(--r-l);
}
.entrar > * { position: relative; z-index: 2; }
.entrar__logo { width: 160px; margin: 0 auto var(--e3); }
.entrar form { text-align: left; margin-top: var(--e3); }
.entrar__pie { margin-top: var(--e3); font-size: .8rem; color: var(--gris-hondo); line-height: 1.5; }
.entrar__pie a { color: var(--gris); box-shadow: inset 0 -1px 0 var(--filo); }

/* ── Barra del panel ───────────────────────────────────────────────────── */
.panel-barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 5, 7, .8);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.panel-barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem var(--margen);
  /* La misma anchura que el cuerpo. Estaba clavada en 820px y en una laptop la
     marca y el boton de Salir quedaban encogidos en el centro mientras el
     tablero, debajo, ocupaba el ancho entero. */
  max-width: var(--panel-ancho, 820px);
  margin-inline: auto;
}
.panel-barra__marca { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.panel-barra__marca img { width: 34px; flex: none; }
.panel-barra__marca strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--hueso);
  line-height: 1.1;
}
.panel-barra__marca span {
  display: block;
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 46vw;
}

/* El ancho del panel.
   -------------------------------------------------------------------------
   Estaba clavado en 820px, que es una columna de celular estirada. En una
   laptop eso dejaba el tablero encajonado en un tercio de la pantalla y con
   barra de scroll de lado teniendo mil pixeles libres a los costados.

   Ahora crece por tramos: celular, tablet, laptop. Los tramos estan en las
   media queries del final del bloque del tablero, no aqui, para que se lean
   juntos con lo que de verdad ensanchan. */
.panel-cuerpo {
  max-width: var(--panel-ancho, 820px);
  margin-inline: auto;
  padding: var(--e3) var(--margen) calc(var(--e5) + env(safe-area-inset-bottom, 0px));
}

.panel-titulo {
  font-family: var(--texto);
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris);
  margin: var(--e4) 0 var(--e2);
}
.panel-nota { font-size: .82rem; color: var(--gris-hondo); margin-bottom: var(--e2); }

/* ── Cifras del dia ────────────────────────────────────────────────────── */
.chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: var(--e3); }
.chips > div { padding: .9rem .85rem; border-radius: var(--r-s); }
.chips > div > * { position: relative; z-index: 2; }
.chips b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.55rem;
  color: var(--hueso);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chips span {
  display: block;
  margin-top: .35rem;
  font-size: .54rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
}
/* Lo que hay que atender se marca en ambar: premios o gift cards esperando. */
.chips > div[data-ojo='true'] b { color: var(--alerta); }

/* Visitas de la pagina, solo el dueño. */
.visitas {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 var(--e3); padding: 1rem 1.2rem;
  border-radius: var(--r-s);
  border: 1px solid #6ee7b7;
  background: linear-gradient(135deg, #d1fae5, #ecfdf5 70%);
  box-shadow: 0 12px 32px -16px rgba(5, 150, 105, .55);
  color: #065f46;
}
.visitas::after {
  content: ''; position: absolute; right: -50px; top: -70px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .28), transparent 70%);
  pointer-events: none;
}
.visitas[hidden] { display: none; }
.visitas > * { position: relative; z-index: 1; }
.visitas__ojo {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
  background: #10b981 no-repeat center / 24px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  box-shadow: 0 6px 18px -6px rgba(16, 185, 129, .8);
}
.visitas__mes { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.visitas__rotulo { font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: #047857; }
.visitas__num {
  font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1.05;
  color: #059669; font-variant-numeric: tabular-nums;
}
.visitas__nota { font-size: .72rem; color: #047857; opacity: .8; }
.visitas__total {
  flex-shrink: 0; text-align: right; padding-left: 1rem;
  border-left: 1px solid #a7f3d0; display: flex; flex-direction: column;
}
.visitas__total b {
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  color: #065f46; font-variant-numeric: tabular-nums;
}

/* ── Pestañas ────────────────────────────────────────────────────────────
   Son ocho y en un celular no caben en una rejilla sin quedar ilegibles, asi
   que se desplazan de lado. La barra de scroll se esconde porque el gesto ya
   lo insinua el ultimo boton cortado en el borde. */
.pestanias {
  display: flex;
  gap: .35rem;
  margin-bottom: var(--e3);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}
.pestanias::-webkit-scrollbar { display: none; }
.pestania {
  flex: 0 0 auto;
  padding-inline: 1.05rem;
  scroll-snap-align: start;
  min-height: 46px;
  border-radius: var(--r-pill);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: color .3s var(--curva), background-color .3s var(--curva), box-shadow .3s var(--curva);
}
.pestania[aria-pressed='true'] {
  color: var(--tinta);
  background: var(--hueso);
  box-shadow: 0 10px 26px -12px rgba(244,241,234,.5);
}

.filtros-citas { display: flex; gap: .4rem; margin-bottom: var(--e2); flex-wrap: wrap; }

/* ── Citas ─────────────────────────────────────────────────────────────── */
.citas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.cita { padding: 1rem 1.05rem; border-radius: var(--r-m); display: grid; gap: .5rem; }
.cita > * { position: relative; z-index: 2; }

.cita__alto { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.cita__cuando {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--hueso);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cita__cuando small {
  display: block;
  font-family: var(--texto);
  font-size: .54rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: .2rem;
}
.cita__total { font-family: var(--display); font-size: 1.2rem; color: var(--hueso); white-space: nowrap; }

.cita__quien { font-size: .95rem; color: var(--hueso); }
.cita__linea { font-size: .82rem; color: var(--gris); margin: 0; }

.cita__marcas { display: flex; flex-wrap: wrap; gap: .35rem; }
.marca-estado {
  font-size: .52rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .24rem .6rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--filo);
  color: var(--gris);
  white-space: nowrap;
}
.marca-estado[data-v='pendiente']  { color: var(--alerta); box-shadow: inset 0 0 0 1px rgba(229,174,98,.4); }
.marca-estado[data-v='pagado']     { color: var(--exito);  box-shadow: inset 0 0 0 1px rgba(111,203,139,.4); }
.marca-estado[data-v='confirmada'] { color: var(--exito);  box-shadow: inset 0 0 0 1px rgba(111,203,139,.4); }
.marca-estado[data-v='cancelada']  { color: var(--error);  box-shadow: inset 0 0 0 1px rgba(236,108,108,.4); }
.marca-estado[data-v='completada'] { color: var(--exito);  box-shadow: inset 0 0 0 1px rgba(111,203,139,.4); }
.marca-estado[data-v='no_asistio'] { color: var(--alerta); box-shadow: inset 0 0 0 1px rgba(229,174,98,.4); }
.marca-estado[data-v='rechazado']  { color: var(--error);  box-shadow: inset 0 0 0 1px rgba(236,108,108,.4); }

.cita__acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.cita__acciones button, .cita__acciones a {
  min-height: 40px;
  padding: 0 .9rem;
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--plata);
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: color .3s var(--curva), box-shadow .3s var(--curva);
}
.cita__acciones button[data-tono='bien'] { color: var(--exito); }
.cita__acciones button[data-tono='mal']  { color: var(--error); }

/* ── Cobrar y terminar (pestaña Por confirmar) ─────────────────────────────
   Se despliega dentro de la ficha, debajo de los botones, y no en una hoja
   aparte: la respuesta -efectivo, terminal, transferencia- se da mirando la
   misma cita, y una hoja modal por cobro serían quince aperturas al día. */
.cobro {
  display: grid;
  gap: .45rem;
  margin-top: .55rem;
  padding-top: .7rem;
  box-shadow: inset 0 1px 0 var(--filo);
}
.cobro__titulo {
  margin: 0;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hueso);
}
.cobro__nota { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--gris-hondo); }
.cobro__botones { margin-top: .15rem; }

/* ── Ficha del cliente (Barbas Club) ───────────────────────────────────── */
.ficha { margin-top: var(--e3); padding: var(--e3) var(--e2); border-radius: var(--r-l); }
.ficha > * { position: relative; z-index: 2; }

.ficha__alto { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: var(--e3); }
.ficha__nombre { font-family: var(--display); font-size: 1.5rem; color: var(--hueso); margin: 0; line-height: 1.1; }
.ficha__tel { font-size: .8rem; color: var(--gris); margin: .2rem 0 0; font-variant-numeric: tabular-nums; }
.ficha__contador {
  font-family: var(--display); font-size: 1.7rem; color: var(--hueso);
  margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums;
}

.ficha__premio {
  margin: 0 0 var(--e2);
  padding: .7rem .9rem;
  border-radius: var(--r-s);
  background: rgba(224, 34, 58, .12);
  box-shadow: inset 0 0 0 1px rgba(224, 34, 58, .4);
  color: var(--hueso);
  font-size: .9rem;
}

.ficha__acciones { display: grid; gap: .6rem; margin-top: var(--e3); }
.ficha__acciones .boton { min-height: 56px; }

.ficha__historial { margin-top: var(--e3); }
.ficha__historial summary {
  cursor: pointer;
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gris); padding: .5rem 0;
}
.ficha__historial ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.ficha__historial li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0;
  box-shadow: inset 0 -1px 0 var(--filo-suave);
  font-size: .82rem; color: var(--plata);
}
.ficha__historial li span:last-child { color: var(--gris-hondo); white-space: nowrap; }

/* ── Listas ────────────────────────────────────────────────────────────── */
.movimientos, .clientes, .gifts { list-style: none; margin: 0; padding: 0; }

.movimientos li {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .7rem 0;
  box-shadow: inset 0 -1px 0 var(--filo-suave);
  font-size: .88rem;
}
.movimientos li b { color: var(--hueso); font-weight: 400; }
.movimientos li time { margin-left: auto; color: var(--gris-hondo); font-size: .72rem; white-space: nowrap; }
.movimientos__tipo {
  font-size: .52rem; letter-spacing: .18em; text-transform: uppercase;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--filo);
  padding: .18rem .55rem;
  color: var(--gris);
  flex: none;
}
.movimientos__tipo[data-tipo='premio'],
.movimientos__tipo[data-tipo='canje'] { color: var(--alerta); box-shadow: inset 0 0 0 1px rgba(229,174,98,.4); }

.clientes li, .gifts li { padding: .85rem 0; box-shadow: inset 0 -1px 0 var(--filo-suave); }

.cliente__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cliente__nombre { color: var(--hueso); }
.cliente__tel { font-size: .78rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.cliente__sellos { font-family: var(--display); color: var(--hueso); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cliente__premio { color: var(--alerta); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }

.gift__folio { font-family: var(--display); font-size: 1.15rem; color: var(--hueso); letter-spacing: .04em; }
.gift__linea { font-size: .84rem; color: var(--gris); margin: .25rem 0 0; }
.gift__estado {
  font-size: .52rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--filo);
  color: var(--gris); white-space: nowrap;
}
.gift__estado[data-estado='apartada']  { color: var(--alerta); box-shadow: inset 0 0 0 1px rgba(229,174,98,.4); }
.gift__estado[data-estado='pagada']    { color: var(--exito);  box-shadow: inset 0 0 0 1px rgba(111,203,139,.4); }
.gift__estado[data-estado='entregada'] { color: var(--gris-hondo); }
.gift__estado[data-estado='cancelada'] { color: var(--error);  box-shadow: inset 0 0 0 1px rgba(236,108,108,.4); }

.gift__acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.gift__acciones button, .gift__acciones a {
  min-height: 40px;
  padding: 0 .9rem;
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--plata);
  box-shadow: inset 0 0 0 1px var(--filo);
}

.vacio { padding: var(--e3) 0; color: var(--gris-hondo); font-size: .88rem; }

/* ── Pantallas grandes ─────────────────────────────────────────────────── */
@media (min-width: 620px) {
  .chips { grid-template-columns: repeat(4, 1fr); }
  .ficha__acciones { grid-auto-flow: column; }
  .panel-barra__marca span { max-width: none; }
  .citas { grid-template-columns: repeat(2, 1fr); }
}

@media (hover: hover) and (pointer: fine) {
  .pestania:hover:not([aria-pressed='true']) { color: var(--hueso); box-shadow: inset 0 0 0 1px var(--filo-fuerte); }
  .gift__acciones button:hover, .cita__acciones button:hover, .cita__acciones a:hover {
    color: var(--hueso); box-shadow: inset 0 0 0 1px var(--filo-fuerte);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LAS DOS PUERTAS  ·  lo que se agrego el 01/09/2026
   --------------------------------------------------------------------------
   Un correo y dos contraseñas: una abre la administracion entera y la otra
   solo el tablero del dia. Lo unico que cambia aqui es que en modo agenda no
   hay ni cifras ni pestañas; el permiso lo comprueba el servidor.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Las dos llaves, explicadas en la pantalla de entrar ───────────────── */
.entrar__llaves {
  margin-top: var(--e3);
  padding: .95rem 1.05rem;
  border-radius: var(--r-s);
  text-align: left;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--cristal-filo);
}
.entrar__llaves p { margin: 0 0 .6rem; font-size: .82rem; line-height: 1.55; color: var(--gris); }
.entrar__llaves b { color: var(--hueso); font-weight: 400; }
.entrar__llaves-pie {
  margin-bottom: 0 !important;
  font-size: .58rem !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-hondo) !important;
}

/* En modo agenda el cuerpo respira mas: no hay cifras ni pestañas encima. */
body[data-modo='agenda'] .panel-cuerpo { padding-top: var(--e2); }

/* ══ EL TABLERO DEL DIA ═══════════════════════════════════════════════════
   Una columna por barbero y una fila por hora, como el cuaderno de la caja.
   Las columnas NO se encogen: con cinco barberos en un celular quedarian a
   40px y no cabria un nombre. Se desplaza de lado, que es lo que la gente ya
   espera de una agenda.
   ═══════════════════════════════════════════════════════════════════════ */
.agenda-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.agenda-cab__mes {
  margin: 0;
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris);
}
.agenda-cab__dia {
  margin: .15rem 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--hueso);
}
.agenda-cab__nav { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.cal-flecha {
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--plata);
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: color .3s var(--curva), box-shadow .3s var(--curva);
}

/* ── La tira de la semana ──────────────────────────────────────────────── */
.cal-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
  margin-bottom: var(--e2);
}
.cal-dia {
  display: grid;
  gap: .1rem;
  justify-items: center;
  padding: .55rem .2rem .45rem;
  border-radius: var(--r-s);
  box-shadow: inset 0 0 0 1px var(--filo);
  color: var(--gris);
  transition: color .3s var(--curva), background-color .3s var(--curva),
              box-shadow .3s var(--curva);
}
.cal-dia__sem { font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; }
.cal-dia__num {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--plata);
  font-variant-numeric: tabular-nums;
}
/* El punto lleva el numero de citas dentro; vacio, ocupa el mismo alto para
   que la tira no salte cuando un dia se queda sin nada. */
.cal-dia__punto {
  min-height: 14px;
  min-width: 14px;
  font-size: .52rem;
  line-height: 14px;
  border-radius: var(--r-pill);
  color: var(--gris-hondo);
  font-variant-numeric: tabular-nums;
}
.cal-dia[data-hoy="true"] { box-shadow: inset 0 0 0 1px var(--rojo); }
.cal-dia[aria-pressed="true"] {
  background: var(--hueso);
  box-shadow: 0 10px 26px -14px rgba(244, 241, 234, .55);
}
.cal-dia[aria-pressed="true"] .cal-dia__sem,
.cal-dia[aria-pressed="true"] .cal-dia__num,
.cal-dia[aria-pressed="true"] .cal-dia__punto { color: var(--tinta); }

/* ══ EL TABLERO DEL DIA  (rehecho el 01/09/2026) ══════════════════════════
   Rejilla de 15 minutos, una columna por barbero, y cada cita ocupando el alto
   de lo que de verdad dura. El cliente lo pidio con la foto de su AgendaPro
   delante: "con muchisimo orden".

   El orden aqui lo hacen tres cosas, y ninguna es decoracion:
     1. LA REJILLA de cuartos de hora, pintada con un degradado que se repite
        -no con cientos de divs-: una linea suave cada 15 min y una marcada en
        cada hora en punto. Eso es lo que deja "leer" un hueco de un vistazo.
     2. LA REGLA de la izquierda, pegada al borde mientras se arrastra de lado.
        Con cinco barberos, sin ella se pierde a que hora se esta mirando.
     3. LA RAYA DEL AHORA, en rojo y con su hora dentro. Es la que contesta de
        reojo la unica pregunta urgente: voy tarde o no.

   Los bloques van colocados a mano (top y height en pixeles) y no en celdas,
   porque un corte de 40 minutos no cabe en una celda de una hora sin mentir
   sobre cuando termina.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Que el dia QUEPA ──────────────────────────────────────────────────────
   Dos medidas mandan aqui, y las dos se pueden cambiar desde fuera:

     --col-min   lo minimo que puede medir la columna de un barbero. Mientras
                 quepan, las columnas se reparten el ancho (1fr) y no hay
                 scroll de lado; cuando no caben, la rejilla crece y se
                 arrastra, que es lo que pasa en un celular con cinco barberos.
     --paso      lo que mide un cuarto de hora. Lo pone panel.js: al abrir
                 calcula el que hace que el dia entero entre en la caja, y con
                 los botones de zoom se sube o se baja a mano.

   La caja usa dvh y no vh a proposito: en un celular, vh cuenta la ventana SIN
   la barra del navegador, asi que el tablero quedaba cortado por abajo justo
   en las horas de la tarde. */
.cal-tablero {
  position: relative;
  max-height: var(--tablero-alto, min(68dvh, 620px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-m);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  background: rgba(255, 255, 255, .015);
  overscroll-behavior: contain;
}

.cal2 {
  position: relative;
  display: grid;
  grid-template-columns: var(--regla, 54px) repeat(var(--cols, 1), minmax(var(--col-min, 150px), 1fr));
  grid-template-rows: auto var(--alto, 400px);
  /* Nunca mas estrecho que la caja -si no, con un solo barbero la columna se
     quedaba flotando a la izquierda- ni mas estrecho que sus minimos. */
  min-width: max-content;
  width: 100%;
  /* Sitio para la ULTIMA marca de la regla. Va centrada sobre su linea, asi que
     la de la hora de cierre asoma media etiqueta por debajo de la rejilla. Sin
     este hueco, esos siete pixeles bastaban para que el navegador sacara una
     barra de scroll vertical en un tablero que, por lo demas, cabia entero. */
  padding-bottom: 10px;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cal2__esquina {
  position: sticky;
  top: 0; left: 0;
  z-index: 5;
  background: var(--fondo);
  box-shadow: inset 0 -1px 0 var(--filo);
}
.cal2__barbero {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 42px;
  padding: .45rem .55rem;
  background: var(--fondo);
  box-shadow: inset 0 -1px 0 var(--filo), inset 1px 0 0 var(--filo-suave);
}
.cal2__disco {
  width: 24px; height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  overflow: hidden;
  font-family: var(--display);
  font-size: .8rem;
  color: var(--hueso);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--filo);
}
.cal2__disco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal2__nombre {
  flex: 1;
  min-width: 0;
  font-size: .56rem;
  /* Menos espaciado que el resto de rotulos del panel: es lo que hace que
     "Jonathan" quepa de una pieza en la columna. */
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plata);
  /* Y si aun asi no cabe -un barbero con nombre y apellido- parte en dos
     lineas. Nunca se corta con puntos suspensivos: el nombre es la unica
     etiqueta que tiene la columna, y media etiqueta no identifica a nadie. */
  overflow-wrap: anywhere;
  line-height: 1.15;
}
/* Cuantas citas lleva ese dia. Es lo primero que pregunta un barbero. */
.cal2__cuenta {
  flex: none;
  min-width: 18px;
  text-align: center;
  font-size: .58rem;
  color: var(--gris-hondo);
  font-variant-numeric: tabular-nums;
}

/* ── La regla de horas ────────────────────────────────────────────────── */
.cal2__regla {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--fondo);
  box-shadow: inset -1px 0 0 var(--filo-suave);
}
.cal2__marca {
  position: absolute;
  right: .4rem;
  transform: translateY(-50%);
  font-size: .56rem;
  color: var(--gris-hondo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Los cuartos se leen mas apagados que las horas en punto: sin esa jerarquia
   la columna es una lista de numeros y deja de servir de regla. */
.cal2__marca[data-punta='false'] { font-size: .5rem; opacity: .38; }
.cal2__marca[data-punta='true']  { color: var(--plata); }

/* ── Las pistas ───────────────────────────────────────────────────────── */
.cal2__pista {
  position: relative;
  box-shadow: inset 1px 0 0 var(--filo-suave);
  /* La rejilla, con dos degradados que se repiten en vez de cientos de nodos:
     uno fino cada cuarto y otro marcado en cada hora. */
  background-image:
    repeating-linear-gradient(to bottom,
      var(--filo-suave) 0 1px, transparent 1px var(--paso, 21px)),
    repeating-linear-gradient(to bottom,
      var(--filo) 0 1px, transparent 1px calc(var(--paso, 21px) * 4));
}

/* Los huecos que la barberia SI ofrece. Se ven un punto mas claros que el
   resto: la diferencia entre "aqui se puede agendar" y "aqui esta cerrado" es
   lo que se viene a mirar. */
.cal2__hueco {
  position: absolute;
  left: 0; right: 0;
  background: rgba(255, 255, 255, .022);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .25s var(--curva);
}

.cal2__cerrado {
  position: absolute;
  left: 0; right: 3px;
  z-index: 2;
  padding: .2rem .4rem;
  border-radius: 7px;
  text-align: left;
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-hondo);
  overflow: hidden;
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,.055) 0 5px, transparent 5px 10px);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
}

/* ── Las citas ────────────────────────────────────────────────────────── */
/* El color dice de que va la cita SIN leerla, que es lo que se pidio para el
   mostrador. Un solo tono por cita, en el filete de la izquierda y en un baño
   del fondo: dos senales de lo mismo, para que se distinga tambien de reojo y
   para quien no separa bien el verde del ambar.

     ambar  esperando: agendada por la pagina y sin cobrar
     verde  confirmada o pagada
     azul   la dio de alta recepcion, para alguien que llego sin cita

   El tono viaja en --filete y el resto se deriva de el con color-mix, asi que
   añadir un estado nuevo es una linea, no cuatro. */
.cal2__cita {
  --filete: var(--gris);
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: .28rem .45rem;
  border-radius: 7px;
  text-align: left;
  overflow: hidden;
  color: var(--hueso);
  /* Respaldo para un navegador sin color-mix; la linea de abajo lo pisa. */
  background: linear-gradient(150deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--filete) 26%, transparent),
    color-mix(in srgb, var(--filete) 8%, transparent));
  box-shadow: inset 0 0 0 1px var(--cristal-filo), inset 3px 0 0 var(--filete);
  transition: box-shadow .25s var(--curva), transform .25s var(--curva);
}
.cal2__quien {
  font-size: .74rem;
  line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal2__que, .cal2__rango {
  font-size: .58rem;
  color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal2__rango { color: var(--gris-hondo); font-variant-numeric: tabular-nums; margin-top: auto; }
/* En un bloque de media hora no caben tres lineas; se queda el nombre, que es
   lo unico que no se puede deducir mirando la rejilla. */
.cal2__cita[data-corta='true'] { flex-direction: row; align-items: center; gap: .35rem; }
.cal2__cita[data-corta='true'] .cal2__que,
.cal2__cita[data-corta='true'] .cal2__rango { display: none; }

/* El orden importa: la ultima regla que encaje es la que manda, y lo que mas
   dice de una cita es de donde salio. */
.cal2__cita[data-pago='pendiente']     { --filete: var(--alerta); }
.cal2__cita[data-pago='pagado']        { --filete: var(--exito); }
.cal2__cita[data-estado='confirmada']  { --filete: var(--exito); }
.cal2__cita[data-fuente='mostrador']   { --filete: var(--mostrador); }

/* ── La raya del ahora ────────────────────────────────────────────────── */
.cal2__ahora {
  position: absolute;
  left: var(--regla, 54px); right: 0;
  z-index: 6;
  height: 0;
  border-top: 1px solid var(--rojo);
  pointer-events: none;
}
.cal2__ahora span {
  position: absolute;
  left: calc(var(--regla, 54px) * -1 + 2px);
  top: -8px;
  width: calc(var(--regla, 54px) - 8px);
  text-align: center;
  padding: .1rem 0;
  border-radius: var(--r-pill);
  background: var(--rojo);
  color: var(--hueso);
  font-size: .53rem;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .cal2__hueco:hover { background: rgba(255, 255, 255, .07); }
  /* Se resalta el borde, NO el filete: antes el hover lo pintaba de
     currentColor y la cita perdia su color justo cuando se la estaba mirando. */
  .cal2__cita:hover {
    box-shadow: inset 0 0 0 1px var(--filo-fuerte), inset 3px 0 0 var(--filete);
  }
}

/* ══ INGRESOS POR BARBERO ════════════════════════════════════════════════ */
.barberos-dinero { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.dinero { padding: .95rem 1.05rem; border-radius: var(--r-m); }
.dinero > * { position: relative; z-index: 2; }
.dinero__alto { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.dinero__nombre { font-size: 1rem; color: var(--hueso); }
.dinero__total {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--hueso);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dinero__barra {
  height: 4px;
  margin: .6rem 0 .5rem;
  border-radius: var(--r-pill);
  background: var(--filo-suave);
  overflow: hidden;
}
.dinero__barra i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--azul), var(--rojo));
}
.dinero__linea { margin: 0; font-size: .78rem; color: var(--gris); }

/* ══ FORMULARIOS DE CURSO Y PRODUCTO ═════════════════════════════════════ */
.ficha-form { padding: var(--e3) var(--e2); border-radius: var(--r-l); margin-bottom: var(--e4); }
.ficha-form > * { position: relative; z-index: 2; }
.ficha-form__titulo {
  margin: 0 0 var(--e2);
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--hueso);
}
.ficha-form__acciones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: var(--e2); }
.ficha-form__acciones .boton--solido { flex: 1 1 200px; }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.dos-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
/* Tres opciones que se excluyen -las formas de cobro del mostrador-. Se
   reparten la fila mientras quepan a 96px; por debajo de eso "Transferencia"
   se parte en dos lineas y la fila se convierte en rejilla. */
.tres-botones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: .4rem;
  margin-top: .4rem;
  transition: opacity .25s var(--curva);
}
/* Cuando la cita se va a quedar a deber, la forma de cobro no dice nada. Se
   apaga en vez de esconderse: esconderla haria saltar el formulario entero
   cada vez que se toca el interruptor. */
.tres-botones[aria-disabled='true'] { opacity: .35; pointer-events: none; }
.opcion-chica {
  min-height: 46px;
  border-radius: var(--r-s);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: color .3s var(--curva), background-color .3s var(--curva), box-shadow .3s var(--curva);
}
.opcion-chica[aria-pressed="true"] { color: var(--tinta); background: var(--hueso); }

.interruptor {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: var(--e2) 0;
  font-size: .9rem;
  color: var(--plata);
  cursor: pointer;
}
.interruptor input { width: 22px; height: 22px; accent-color: var(--hueso); flex: none; }

/* ══ COBROS  ·  conectar Mercado Pago ════════════════════════════════════
   Las instrucciones van EN LA PAGINA y no en un PDF aparte: quien las necesita
   las tiene delante mientras pega los datos. Por eso los pasos estan
   numerados, con el numero fuera del texto: se puede ir y volver de Mercado
   Pago sin perder por donde iba.
   ═══════════════════════════════════════════════════════════════════════ */
.cobros-estado {
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-m);
  margin-bottom: var(--e3);
}
.cobros-estado > * { position: relative; z-index: 2; }
.cobros-estado__titulo { margin: 0; font-size: 1rem; color: var(--hueso); }
.cobros-estado__texto { margin: .4rem 0 0; font-size: .86rem; color: var(--gris); line-height: 1.55; }
/* El estado se lee por el color del filete, no por el texto: es lo que se mira
   al abrir la pestaña para saber si hay algo que hacer. */
.cobros-estado[data-estado='falta']  { box-shadow: inset 0 0 0 1px rgba(229,174,98,.35), inset 3px 0 0 var(--alerta); }
.cobros-estado[data-estado='falta']  .cobros-estado__titulo { color: var(--alerta); }
.cobros-estado[data-estado='prueba'] { box-shadow: inset 0 0 0 1px rgba(229,174,98,.35), inset 3px 0 0 var(--alerta); }
.cobros-estado[data-estado='prueba'] .cobros-estado__titulo { color: var(--alerta); }
.cobros-estado[data-estado='listo']  { box-shadow: inset 0 0 0 1px rgba(111,203,139,.35), inset 3px 0 0 var(--exito); }
.cobros-estado[data-estado='listo']  .cobros-estado__titulo { color: var(--exito); }

.pasos-mp { list-style: none; counter-reset: paso; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e3); }
.pasos-mp > li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.4rem;
  font-size: .86rem;
  color: var(--gris);
  line-height: 1.6;
}
.pasos-mp > li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-size: .82rem;
  color: var(--hueso);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--filo);
}
.pasos-mp p { margin: 0 0 .45rem; }
.pasos-mp b { color: var(--plata); font-weight: 400; }
.pasos-mp a { color: var(--hueso); box-shadow: inset 0 -1px 0 var(--filo-fuerte); overflow-wrap: anywhere; }
.pasos-mp ul { margin: 0 0 .45rem; padding-left: 1.1rem; display: grid; gap: .25rem; }

.pasos-mp__titulo {
  color: var(--hueso);
  font-size: .95rem;
  margin-bottom: .3rem !important;
  padding-top: .15rem;
}
.pasos-mp__ojo { color: var(--alerta) !important; }
.pasos-mp__tenue { color: var(--gris-hondo) !important; font-size: .8rem; }

.tarjeta-prueba {
  margin: 0 0 .5rem;
  padding: .7rem .85rem;
  border-radius: var(--r-s);
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  font-variant-numeric: tabular-nums;
}
.tarjeta-prueba p { margin: 0; font-size: .82rem; color: var(--plata); }

.copiable { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.copiable code {
  flex: 1;
  min-width: 0;
  padding: .55rem .7rem;
  border-radius: var(--r-s);
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
  font-size: .72rem;
  color: var(--plata);
  overflow-wrap: anywhere;
}
.copiable .boton { flex: none; }

/* ══ FICHAS DE CURSO Y PRODUCTO ══════════════════════════════════════════ */
.fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ficha-card { padding: .95rem 1.05rem; border-radius: var(--r-m); display: grid; gap: .7rem; }
.ficha-card > * { position: relative; z-index: 2; }
/* Lo que esta oculto en la pagina se ve apagado tambien aqui: asi no hay que
   leer la etiqueta para darse cuenta. */
.ficha-card[data-apagada="true"] { opacity: .6; }

.ficha-card__alto { display: grid; grid-template-columns: 72px 1fr; gap: .9rem; align-items: start; }
.ficha-card__foto {
  width: 72px; height: 72px;
  border-radius: var(--r-s);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--filo);
}
.ficha-card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-card__foto span {
  font-size: .5rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-hondo);
}
.ficha-card__nombre { font-size: 1rem; color: var(--hueso); }
.ficha-card__precio { font-family: var(--display); font-size: 1.15rem; color: var(--hueso); }
.ficha-card__linea { margin: .2rem 0 0; font-size: .78rem; color: var(--gris); }
.ficha-card__oculto {
  margin: .35rem 0 0;
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--alerta);
}

.ficha-card__gente summary {
  cursor: pointer;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris); padding: .4rem 0;
}
.ficha-card__gente ul { list-style: none; margin: .3rem 0 0; padding: 0; }
.ficha-card__gente li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .45rem 0;
  box-shadow: inset 0 -1px 0 var(--filo-suave);
  font-size: .82rem; color: var(--plata);
}

.ficha-card__acciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.ficha-card__acciones button {
  min-height: 40px;
  padding: 0 .9rem;
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--plata);
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: color .3s var(--curva), box-shadow .3s var(--curva);
}
.ficha-card__acciones button[data-tono="mal"],
.ficha-card__gente button[data-tono="mal"] { color: var(--error); }
.ficha-card__gente button {
  min-height: 34px; padding: 0 .7rem;
  border-radius: var(--r-pill);
  font-size: .55rem; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--filo);
  flex: none;
}

/* ══ LA HOJA DE DETALLE ══════════════════════════════════════════════════
   Sube desde abajo en vez de abrir otra pantalla: en un celular, ir y volver
   pierde el sitio del tablero.
   ═══════════════════════════════════════════════════════════════════════ */
.hoja { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; }
.hoja__telon { position: absolute; inset: 0; background: rgba(5, 5, 7, .72); }
.hoja__panel {
  position: relative;
  width: min(100%, 520px);
  margin-inline: auto;
  padding: var(--e3) var(--e3) calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-l) var(--r-l) 0 0;
  max-height: 88vh;
  overflow-y: auto;
  animation: hoja-sube .38s var(--curva) both;
}
.hoja__panel > * { position: relative; z-index: 2; }
@keyframes hoja-sube { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.hoja__cerrar {
  position: absolute;
  top: .7rem; right: .9rem;
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  font-size: 1.4rem; line-height: 1;
  color: var(--gris);
  box-shadow: inset 0 0 0 1px var(--filo);
}
.hoja__hora {
  margin: 0;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
}
.hoja__cuando {
  margin: .3rem 0 var(--e2);
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
}
.hoja__quien { margin: 0; font-size: 1.1rem; color: var(--hueso); }
.hoja__total {
  margin: var(--e2) 0 .6rem;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--hueso);
}

@media (min-width: 620px) {
  .fichas { grid-template-columns: repeat(2, 1fr); }
  .barberos-dinero { grid-template-columns: repeat(2, 1fr); }
}

@media (hover: hover) and (pointer: fine) {
  .cal-flecha:hover, .hoja__cerrar:hover { color: var(--hueso); box-shadow: inset 0 0 0 1px var(--filo-fuerte); }
  .cal-dia:hover:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--filo-fuerte); }
  .ficha-card__acciones button:hover, .ficha-card__gente button:hover {
    color: var(--hueso); box-shadow: inset 0 0 0 1px var(--filo-fuerte);
  }
  .opcion-chica:hover:not([aria-pressed="true"]) { color: var(--hueso); box-shadow: inset 0 0 0 1px var(--filo-fuerte); }
}

@media (prefers-reduced-motion: reduce) {
  .hoja__panel { animation: none; }
}

/* ══ EL PASE  ·  escanear y sellar ═══════════════════════════════════════
   El camino corto del mostrador: el cliente enseña su QR y el sello se pone
   solo. La cámara ocupa lo que ocupa a propósito -un visor pequeño obliga a
   acercarse y a acertar- y el visor lleva una mira, que es lo que le dice al
   barbero dónde poner el teléfono del cliente.
   ═══════════════════════════════════════════════════════════════════════ */
.pase-caja { padding: var(--e3) var(--e2); border-radius: var(--r-l); margin-bottom: var(--e4); }
.pase-caja > * { position: relative; z-index: 2; }
.pase-caja[hidden] { display: none; }

/* El QR del sello que se le enseña al cliente tras guardar la cita rapida.
   Negro sobre blanco y grande: lo lee la camara de otro telefono a un brazo
   de distancia. */
.qr-sello { margin-top: var(--e3); text-align: center; }
.qr-sello__marco {
  width: min(280px, 78%);
  margin: var(--e2) auto;
  padding: 10px;
  border-radius: var(--r-s);
  background: #fff;
}

.pase-video {
  position: relative;
  margin: var(--e2) 0;
  border-radius: var(--r-m);
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 3;
}
.pase-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pase-video__mira {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: var(--r-s);
  box-shadow: 0 0 0 100vmax rgba(5, 5, 7, .5), inset 0 0 0 2px var(--hueso);
}

.pase-mano { margin-top: var(--e2); }
.pase-mano summary {
  cursor: pointer;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris); padding: .6rem 0;
}
.pase-mano .campo input {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
}

/* ── El aviso de modo prueba ───────────────────────────────────────────────
   Va en ambar y ocupa el ancho entero, encima de las cifras del dia. Es feo a
   proposito: con credenciales TEST la tarjeta SE VE en la pagina y la de un
   cliente real se rechaza, y ese fallo no da la cara -nadie llama para avisar
   de que no pudo pagar-. Se quita solo en cuanto entren las credenciales
   reales, asi que no hay forma de que se quede molestando de balde. */
.aviso-prueba {
  display: block;
  width: 100%;
  text-align: left;
  padding: .9rem 1.05rem;
  margin-bottom: var(--e2);
  border-radius: var(--r-s);
  background: rgba(229, 174, 98, .1);
  box-shadow: inset 0 0 0 1px rgba(229, 174, 98, .35), inset 3px 0 0 var(--alerta);
  cursor: pointer;
  transition: background-color .3s var(--curva);
}
.aviso-prueba__titulo {
  display: block;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--alerta);
}
.aviso-prueba__texto {
  display: block;
  margin-top: .35rem;
  font-size: .84rem;
  color: var(--plata);
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .aviso-prueba:hover { background: rgba(229, 174, 98, .16); }
}


/* ══════════════════════════════════════════════════════════════════════════
   AVISOS AL CELULAR
   --------------------------------------------------------------------------
   Va arriba de la agenda y tiene que poder IGNORARSE: una vez encendido, el
   barbero no vuelve a tocarlo en meses. Por eso la caja es baja, el estado se
   lee de un vistazo por su color, y la lista de los demas celulares -que es
   lo que casi nunca interesa- vive dentro de un <details> cerrado.
   ══════════════════════════════════════════════════════════════════════════ */
.avisos {
  padding: 1rem 1.1rem;
  margin-bottom: var(--e3);
  border-radius: var(--r-s);
}

.avisos__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .5rem;
}

.avisos__titulo {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-hondo);
}

/* El estado se dice DOS veces: con la palabra y con el color. El panel se
   mira de reojo entre corte y corte, y tambien lo usa quien no distingue
   bien los colores. */
.avisos__estado {
  font-size: .82rem;
  color: var(--plata);
}
.avisos__estado::before {
  content: '';
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--gris-hondo);
  vertical-align: middle;
}
.avisos__estado[data-tono='bien']::before { background: var(--exito); }
.avisos__estado[data-tono='ojo']::before  { background: var(--alerta); }
.avisos__estado[data-tono='mal']::before  { background: var(--error); }

.avisos__mando { margin-top: .9rem; }
.avisos__mando .campo { margin-bottom: .75rem; }

.avisos__botones {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
/* En un celular el boton principal ocupa la fila entera: es el unico que se
   toca de verdad, y a media pantalla se falla. */
.avisos__botones .boton--solido { flex: 1 1 100%; }

.avisos #avisos-mensaje { margin-top: .85rem; }

.avisos__otros {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--cristal-filo);
}
.avisos__otros summary {
  font-size: .8rem;
  color: var(--gris-hondo);
  cursor: pointer;
}

.avisos-lista { margin-top: .7rem; }
.avisos-lista__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  border-top: 1px solid var(--cristal-filo);
}
.avisos-lista__fila:first-child { border-top: 0; }
.avisos-lista__fila b {
  display: block;
  font-size: .88rem;
  color: var(--plata);
}
/* En bloque, no en linea: una fila puede llevar DOS notas -a quien sigue y
   que esta apagado- y como spans en linea se pegaban una a otra sin ni
   siquiera un espacio en medio. */
.avisos-lista__fila .panel-nota {
  display: block;
  margin-bottom: 0;
}
.avisos-lista__fila .panel-nota + .panel-nota { color: var(--alerta); }

/* ══════════════════════════════════════════════════════════════════════════
   LO QUE SE AGREGO EL 05/09/2026
   --------------------------------------------------------------------------
   Cuatro cosas, y todas nacen del mismo sitio: el panel se hizo para un
   celular en la mano del barbero, y ahora tambien vive en la tablet del
   mostrador y en la laptop de la oficina.

     1  El mando de la agenda: filtrar por barbero, cerrar el dia entero y
        decidir cuanto mide una hora en pantalla.
     2  Tres tramos de ancho -celular, tablet, laptop- en vez de una columna
        de 820px para todo.
     3  El mostrador: dar de alta a quien llega sin cita.
     4  La caja: lo vendido y la comision del dueño, por dia, semana y mes.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* El azul del logo es demasiado oscuro sobre negro para marcar una cita.
     Este es el mismo tono subido de luz hasta que se lee de reojo. */
  --mostrador: #6FA8FF;
}

/* El ancho del panel se declara en el BODY y no en .panel-cuerpo, porque lo
   usan dos hermanos que no se contienen: la barra de arriba y el cuerpo. Si
   solo viviera en el cuerpo, la barra no podria heredarlo. */
body.panel-body { --panel-ancho: 820px; }

/* ══ 1 · EL MANDO DE LA AGENDA ═══════════════════════════════════════════ */
.agenda-mando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--e2);
}

/* Filtrar por barbero. Cada barbero ve el tablero entero, pero lo primero que
   quiere es el suyo: con cinco columnas en un celular, la propia se busca. */
.filtro-barberos {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  flex: 1 1 260px;
  min-width: 0;
}
.filtro-barberos::-webkit-scrollbar { display: none; }

.filtro-barbero {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 38px;
  padding: 0 .85rem;
  border-radius: var(--r-pill);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: color .3s var(--curva), background-color .3s var(--curva),
              box-shadow .3s var(--curva);
}
.filtro-barbero__disco {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  overflow: hidden;
  font-family: var(--display);
  font-size: .7rem;
  color: var(--hueso);
  background: rgba(255, 255, 255, .07);
}
.filtro-barbero__disco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.filtro-barbero[aria-pressed='true'] {
  color: var(--tinta);
  background: var(--hueso);
  box-shadow: 0 10px 26px -14px rgba(244, 241, 234, .5);
}
.filtro-barbero[aria-pressed='true'] .filtro-barbero__disco {
  background: rgba(5, 5, 7, .12);
  color: var(--tinta);
}

/* El zoom del tablero. Tres botones y no un deslizador: con guantes de tinte
   o con prisa, un deslizador de un pixel de ancho no se acierta. */
.cal-zoom {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .2rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--filo);
  margin-left: auto;
}
.cal-zoom button {
  min-width: 34px;
  height: 32px;
  padding-inline: .55rem;
  border-radius: var(--r-pill);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color .25s var(--curva), background-color .25s var(--curva);
}
.cal-zoom button[aria-pressed='true'] { color: var(--tinta); background: var(--hueso); }
.cal-zoom button[disabled] { opacity: .35; }

/* El resumen del día y la leyenda, en la misma fila. */
.cal-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1.2rem;
  margin-bottom: .55rem;
}

/* Qué significa cada color. Sin esto, los colores son decoracion. */
.cal-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .62rem;
  color: var(--gris);
}
.cal-leyenda li { display: inline-flex; align-items: center; gap: .4rem; }
.cal-leyenda i {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--leyenda, var(--gris));
}
.cal-leyenda li[data-color='espera']    { --leyenda: var(--alerta); }
.cal-leyenda li[data-color='confirmada'] { --leyenda: var(--exito); }
.cal-leyenda li[data-color='mostrador']  { --leyenda: var(--mostrador); }

/* ══ 2 · TRES TRAMOS DE ANCHO ════════════════════════════════════════════
   No es solo "que quepa mas": en cada tramo cambia lo que se puede leer sin
   arrastrar, y por eso cambian tambien los minimos de las columnas y el alto
   util del tablero. */

/* Tablet en vertical y celulares grandes. */
@media (min-width: 620px) {
  body.panel-body { --panel-ancho: 940px; }
  .cal2 { --col-min: 138px; }
  .cal-tablero { --tablero-alto: min(70dvh, 700px); }
  .fichas { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet en horizontal. Aqui ya caben cinco barberos sin arrastrar. */
@media (min-width: 900px) {
  body.panel-body { --panel-ancho: 1120px; }
  .cal2 { --col-min: 124px; --regla: 58px; }
  .cal-tablero { --tablero-alto: min(74dvh, 800px); }
}

/* Laptop y monitor. */
@media (min-width: 1200px) {
  body.panel-body { --panel-ancho: 1360px; }
  .cal2 { --col-min: 132px; }
  .cal-tablero { --tablero-alto: min(78dvh, 940px); }
  .citas { grid-template-columns: repeat(3, 1fr); }
  .fichas { grid-template-columns: repeat(3, 1fr); }
  .chips { grid-template-columns: repeat(4, 1fr); }
}

/* En una pantalla ancha el formulario de un producto o de una cita no tiene
   por que medir 1360px: un campo de texto de metro y medio no se lee mejor. */
@media (min-width: 900px) {
  .ficha-form, .pase-caja, .avisos { max-width: 720px; }
  .agenda-cab__dia { font-size: 2.1rem; }
}

/* ── Pantallas BAJAS ───────────────────────────────────────────────────────
   Una laptop de 768px de alto, o una tablet en horizontal, tienen ancho de
   sobra y les falta alto. Ahi lo que estorba no son las columnas: son los seis
   renglones de cabecera que hay por encima del tablero.

   Se aprieta todo lo de arriba -ni un elemento desaparece, solo respiran
   menos- y con eso el dia entero vuelve a caber sin arrastrar. Se dispara por
   ALTO y no por ancho a proposito: un monitor 1920x1080 no necesita esto. */
@media (max-height: 820px) {
  .panel-cuerpo { padding-top: var(--e2); }
  .panel-barra__fila { padding-block: .5rem; }
  .pestania { min-height: 40px; }
  .pestanias { margin-bottom: var(--e2); }
  .agenda-cab { margin-bottom: .5rem; }
  .agenda-cab__dia { font-size: 1.35rem; }
  .cal-semana { gap: .25rem; margin-bottom: .5rem; }
  .cal-dia { padding: .35rem .2rem .3rem; }
  .cal-dia__num { font-size: 1rem; }
  .agenda-mando { margin-bottom: .45rem; }
  .cal-pie { margin-bottom: .4rem; }
}

/* ══ 3 · EL MOSTRADOR  ·  quien llega sin cita ═══════════════════════════ */
.mostrador-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .4rem;
  margin-top: .4rem;
}
.mostrador-hora {
  min-height: 42px;
  border-radius: var(--r-s);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--plata);
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: color .25s var(--curva), background-color .25s var(--curva),
              box-shadow .25s var(--curva);
}
.mostrador-hora[aria-pressed='true'] { color: var(--tinta); background: var(--hueso); }
/* Ocupada no es lo mismo que prohibida: recepcion tiene que VER que esa hora
   ya tiene a alguien, y aun asi poder tocarla si el barbero dice que cabe. */
.mostrador-hora[data-ocupada='true'] { color: var(--gris-hondo); text-decoration: line-through; }

/* Clientes frecuentes: una fila por cliente, se toca y rellena la cita. */
.mo-frecuentes {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  display: grid;
  gap: .3rem;
  max-height: 260px;
  overflow-y: auto;
}
.mo-frecuentes .vacio { font-size: .8rem; color: var(--gris); padding: .3rem 0; }
.frecuente {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .55rem .7rem;
  border-radius: var(--r-s);
  text-align: left;
  color: var(--plata);
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: color .25s var(--curva), background-color .25s var(--curva);
}
.frecuente b { font-weight: 400; font-size: .86rem; color: var(--hueso); }
.frecuente small { display: block; font-size: .7rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.frecuente span { font-size: .68rem; color: var(--gris); white-space: nowrap; }
.frecuente[aria-pressed='true'] { background: var(--hueso); }
.frecuente[aria-pressed='true'] b,
.frecuente[aria-pressed='true'] small,
.frecuente[aria-pressed='true'] span { color: var(--tinta); }

.servicios-elegir {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .4rem;
  margin-top: .4rem;
}
.servicio-op {
  display: grid;
  gap: .1rem;
  padding: .6rem .7rem;
  border-radius: var(--r-s);
  text-align: left;
  color: var(--plata);
  box-shadow: inset 0 0 0 1px var(--filo);
  transition: color .25s var(--curva), background-color .25s var(--curva),
              box-shadow .25s var(--curva);
}
.servicio-op b { font-weight: 400; font-size: .82rem; }
.servicio-op span { font-size: .68rem; color: var(--gris-hondo); font-variant-numeric: tabular-nums; }
.servicio-op[aria-pressed='true'] { color: var(--tinta); background: var(--hueso); }
.servicio-op[aria-pressed='true'] span { color: rgba(5, 5, 7, .62); }

.mostrador-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: var(--e2) 0 0;
  padding-top: .8rem;
  box-shadow: inset 0 1px 0 var(--filo);
}
.mostrador-total b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
}

/* ══ 4 · LA CAJA  ·  lo vendido y la comision ════════════════════════════ */
.caja-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  margin-bottom: var(--e3);
}
.caja-cifra { padding: 1rem 1.05rem; border-radius: var(--r-m); }
.caja-cifra > * { position: relative; z-index: 2; }
.caja-cifra__rotulo {
  margin: 0;
  font-size: .54rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
}
.caja-cifra__importe {
  margin: .45rem 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
}
.caja-cifra__pie { margin: .4rem 0 0; font-size: .72rem; color: var(--gris-hondo); }
/* La comision del dueño se lee en su propio color: es la unica cifra de esta
   pantalla que no es dinero del negocio, sino de una persona. */
.caja-cifra__comision { color: var(--alerta); }

.caja-barras {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 74px;
  margin-bottom: var(--e3);
  padding: 0 .1rem;
}
.caja-barra {
  flex: 1 1 0;
  min-width: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, rgba(111, 203, 139, .25), rgba(111, 203, 139, .7));
}
.caja-barra[data-hoy='true'] {
  background: linear-gradient(to top, rgba(224, 34, 58, .3), var(--rojo));
}

.ventas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.venta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .7rem .95rem;
  border-radius: var(--r-s);
  box-shadow: inset 0 0 0 1px var(--filo-suave);
}
.venta__que { font-size: .88rem; color: var(--hueso); }
.venta__quien { display: block; font-size: .68rem; color: var(--gris-hondo); margin-top: .15rem; }
.venta__importe { font-variant-numeric: tabular-nums; color: var(--plata); white-space: nowrap; }
.venta__importe small { display: block; font-size: .62rem; color: var(--alerta); }

/* ── Lo que se le paga a un barbero ────────────────────────────────────────
   La cifra grande de su ficha ya no es lo que genero: es lo que hay que
   ponerle en la mano. Lo que genero sigue estando, debajo y en pequeño, porque
   es de donde sale la otra, pero no es la que se viene a buscar el dia de
   pagar. */
.dinero__pago {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: .55rem 0 0;
  padding-top: .5rem;
  box-shadow: inset 0 1px 0 var(--filo-suave);
}
.dinero__pago span {
  font-size: .54rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
}
.dinero__pago b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--exito);
  font-variant-numeric: tabular-nums;
}
/* Lo que aun no ha entrado a caja se dice en ambar y con todas las letras: es
   dinero que se le debe al barbero y que el negocio todavia no tiene. */
.dinero__debe { color: var(--alerta) !important; }

/* ══ 5 · LA FICHA DE UN PRODUCTO, AHORA CON INVENTARIO ═══════════════════ */
.ficha-card__stock {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .3rem 0 0;
  padding: .15rem .5rem;
  border-radius: var(--r-pill);
  font-size: .62rem;
  color: var(--plata);
  box-shadow: inset 0 0 0 1px var(--filo);
}
.ficha-card__stock[data-agotado='true'] { color: var(--error); box-shadow: inset 0 0 0 1px rgba(236,108,108,.35); }
.ficha-card__stock[data-poco='true']    { color: var(--alerta); box-shadow: inset 0 0 0 1px rgba(229,174,98,.35); }

.ficha-card__duenio {
  display: inline-block;
  margin: .3rem 0 0 .35rem;
  padding: .15rem .5rem;
  border-radius: var(--r-pill);
  font-size: .62rem;
  color: var(--mostrador);
  box-shadow: inset 0 0 0 1px rgba(111, 168, 255, .32);
}

/* ══ 6 · LAS TRES LLAVES, EXPLICADAS AL ENTRAR ═══════════════════════════ */
.entrar__llaves p b { color: var(--hueso); font-weight: 400; }

/* En modo barbero o recepcion el cuerpo sigue respirando igual. */
body[data-modo='barbero'] .panel-cuerpo { padding-top: var(--e2); }

/* ══ 7 · LA AGENDA DEL DUEÑO, MAS ARRIBA Y MAS GRANDE ════════════════════
   El dueño es el unico que lleva encima del tablero las cifras, las visitas
   y las catorce pestañas, y ademas la tarjeta de avisos: el tablero le
   empezaba a media pantalla y se quedaba con el alto que sobrase.

   Nada desaparece. Lo de arriba respira menos, y la tarjeta de avisos -que se
   enciende una vez y no se vuelve a tocar en meses- baja debajo del tablero.
   Va con order y no moviendo el HTML porque en la puerta del barbero esa
   tarjeta si tiene que seguir arriba: ahi no hay nada mas que le estorbe. */
body[data-modo='dueno'] .panel-cuerpo { padding-top: var(--e2); }
body[data-modo='dueno'] .chips { gap: .4rem; margin-bottom: .6rem; }
body[data-modo='dueno'] .chips > div { padding: .55rem .75rem; }
body[data-modo='dueno'] .chips b { font-size: 1.3rem; }
body[data-modo='dueno'] .visitas { margin-bottom: .6rem; padding: .5rem .9rem; gap: .75rem; }
body[data-modo='dueno'] .visitas__ojo { width: 34px; height: 34px; border-radius: 11px; background-size: 19px; }
body[data-modo='dueno'] .visitas__num { font-size: 1.45rem; }
body[data-modo='dueno'] .pestanias { margin-bottom: .75rem; }
body[data-modo='dueno'] .pestania { min-height: 40px; }

/* :not([hidden]) porque un display escrito aqui le ganaria al atributo hidden
   y la agenda se quedaria pintada debajo de las demas pestañas. */
body[data-modo='dueno'] .tab[data-panel='agenda']:not([hidden]) { display: flex; flex-direction: column; }
body[data-modo='dueno'] .tab[data-panel='agenda'] .avisos { order: 9; margin: var(--e3) 0 0; }
body[data-modo='dueno'] .agenda-cab { margin-bottom: .6rem; }
body[data-modo='dueno'] .cal-semana { margin-bottom: .6rem; }
body[data-modo='dueno'] .agenda-mando { margin-bottom: .5rem; }

/* El techo del tablero, un escalon por encima del de las otras puertas. El
   suelo -que no baje de algo mas de media pantalla- lo pone panel.js. */
body[data-modo='dueno'] .cal-tablero { --tablero-alto: min(80dvh, 720px); }
@media (min-width: 620px)  { body[data-modo='dueno'] .cal-tablero { --tablero-alto: min(82dvh, 800px); } }
@media (min-width: 900px)  { body[data-modo='dueno'] .cal-tablero { --tablero-alto: min(86dvh, 900px); } }
@media (min-width: 1200px) { body[data-modo='dueno'] .cal-tablero { --tablero-alto: min(88dvh, 1040px); } }

/* ══════════════════════════════════════════════════════════════════════════
   EL PANEL, EN BLANCO  ·  09/09/2026
   --------------------------------------------------------------------------
   Todo el panel se lee en claro: la agenda del barbero, el mostrador de
   recepcion y la administracion del dueño. Tambien la pantalla de entrar.

   Nacio oscuro, copiando la atmosfera del sitio publico, y ahi estaba el
   error: el sitio es un escaparate que se mira de noche desde el sofa, y esto
   es una herramienta que se usa de dia, con prisa y con el cliente delante.
   Un negro a pantalla completa bajo la luz de la barberia refleja la sala
   entera, obliga al brillo al maximo -- y en el celular del barbero, a
   contraluz de la ventana, es justo cuando peor se lee --, y no case con el
   papel de al lado: la lista escrita a mano, el ticket, la nota del cliente.
   En blanco, lo que hay en la pantalla y lo que hay en el mostrador son la
   misma cosa. Ademas es lo que cualquiera espera de un panel de
   administracion, y aqui no hay nada que ganar sorprendiendo.

   No es un tema aparte: es LA MISMA hoja. Aqui abajo casi no hay selectores
   nuevos, solo se vuelven a declarar los colores del bloque 01 de estilo.css
   con los papeles cambiados.

     --tinta   deja de ser el fondo negro y pasa a ser el papel casi blanco
     --hueso   deja de ser la tinta clara y pasa a ser la tinta oscura

   Ese cambio de papeles hace solo, sin tocar una regla, lo mas trabajoso: lo
   que estaba en blanco sobre negro -la pestaña activa, el dia elegido, la hora
   elegida, .boton--solido- queda en negro sobre blanco, que es exactamente lo
   que tenia que pasar.

   Lo que SI hay que escribir a mano es lo que en su dia se escribio con un
   color literal en vez de con una variable: los rellenos rgba(255,255,255,…)
   -que sobre papel blanco desaparecen- y los verdes y ambares del bloque 01,
   calibrados para brillar sobre negro y que sobre blanco se leen lavados. De
   ahi la longitud de este bloque; no hay nada mas.

   Se cuelga de .panel-body, la clase del <body> de panel.html, y no de un
   data-modo: el color ya no depende de quien entre, asi que no hay que
   esperar a saberlo. Por eso la pantalla de entrar tambien nace en blanco y
   no hay ese parpadeo de negro a blanco al abrir sesion.
   ══════════════════════════════════════════════════════════════════════════ */
body.panel-body {
  /* --- El papel ---------------------------------------------------------- */
  --tinta:      #F7F8FA;   /* el fondo de la pagina */
  --fondo:      #FFFFFF;   /* las cabeceras pegajosas del tablero */
  --carbon:     #F1F2F5;
  --humo:       #E8EAEF;

  /* --- La tinta sobre el papel -------------------------------------------
     La rampa entera al reves: --hueso es ahora lo mas oscuro y --gris-hondo
     lo mas claro. Ninguno baja de 4.5:1 sobre el papel salvo --gris-hondo,
     que solo se usa en apoyos que nunca llevan un dato. */
  --hueso:      #16181D;
  --plata:      #333941;
  --gris:       #5C636E;
  --gris-hondo: #868D98;

  /* --- El cristal, que aqui ya no es cristal ------------------------------
     Un panel translucido sobre blanco no es nada: no hay nada detras que
     refractar. Se vuelve tarjeta de papel -blanco opaco, filo fino y una
     sombra corta- y el desenfoque baja porque ya casi no trabaja. */
  --cristal-alto: rgba(255, 255, 255, .98);
  --cristal-bajo: rgba(255, 255, 255, .92);
  --cristal-luz:  rgba(22, 24, 29, .14);
  --cristal-filo: rgba(22, 24, 29, .13);
  --desenfoque:   12px;

  --filo:        rgba(22, 24, 29, .14);
  --filo-suave:  rgba(22, 24, 29, .075);
  --filo-fuerte: rgba(22, 24, 29, .38);

  /* --- Estados, bajados de luz -------------------------------------------
     Los del bloque 01 estan pensados para brillar sobre negro; sobre blanco
     el verde #6FCB8B se lee gris. Estos son los mismos tonos, oscurecidos
     hasta pasar el contraste sobre papel. */
  --exito:  #1B7A45;
  --alerta: #A4690F;
  --error:  #BF332D;

  /* El azul de las citas de mostrador, por lo mismo. */
  --mostrador: #2C6FD1;
}

/* La atmosfera se queda, pero en un susurro: sobre blanco, las dos auroras al
   17% dejaban la pagina rosa por arriba y azul por abajo. Al 5% solo se nota
   que el blanco no es un blanco plano de impresora. */
body.panel-body .atmosfera--panel .aurora { opacity: .05; }

/* El poste de barbero conserva sus franjas BLANCAS. Se pintaban con --hueso,
   que aqui es negro, y el poste salia rojo-negro-azul-negro. */
body.panel-body .poste::before {
  background: repeating-linear-gradient(90deg,
    var(--rojo) 0    9px,
    #FFFFFF     9px  18px,
    var(--azul) 18px 27px,
    #FFFFFF     27px 36px);
}

/* ── La tarjeta ──────────────────────────────────────────────────────────
   El degradado del cristal acababa en un rgba(255,255,255,.045) que sobre
   papel no existe, y llevaba una sombra de 60px casi negra que sobre blanco
   parecia un moraton. Aqui es papel sobre papel: filo fino y sombra corta. */
body.panel-body .vidrio {
  background: #FFFFFF;
  box-shadow:
    inset 0 0 0 1px var(--cristal-filo),
    0 1px 2px rgba(22, 24, 29, .04),
    0 10px 24px -18px rgba(22, 24, 29, .30);
}
/* El filo de luz -que entraba por arriba a la izquierda, como en el cristal de
   verdad- no tiene sentido en papel: el borde es igual por los cuatro lados y
   ya lo pinta el box-shadow de arriba. */
body.panel-body .vidrio::before { display: none; }
/* Y el brillo que sigue al raton, tampoco: sobre blanco solo ensucia. */
body.panel-body .vidrio[data-brillo='true']::after { opacity: 0; }

/* Las dos variantes traian valores blancos escritos a mano. */
body.panel-body .vidrio--suave {
  --cristal-alto: rgba(255, 255, 255, .98);
  --cristal-luz:  rgba(22, 24, 29, .10);
}
body.panel-body .vidrio--fuerte { --cristal-alto: #FFFFFF; }

/* ── Botones, campos y avisos de estilo.css ─────────────────────────────── */
/* El solido ya es negro sobre blanco por el cambio de papeles; lo que faltaba
   era la sombra, que era un halo blanco e invisible sobre papel. */
body.panel-body .boton--solido {
  box-shadow: 0 12px 26px -14px rgba(22, 24, 29, .55);
}
body.panel-body .boton--cristal {
  color: var(--hueso);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--cristal-filo);
}

body.panel-body .campo input,
body.panel-body .campo select,
body.panel-body .campo textarea {
  background: #FFFFFF;
  border-color: var(--cristal-filo);
}
body.panel-body .campo input:focus,
body.panel-body .campo select:focus,
body.panel-body .campo textarea:focus {
  border-color: var(--hueso);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(22, 24, 29, .08);
}

body.panel-body .aviso {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--cristal-filo), inset 3px 0 0 var(--gris);
}
body.panel-body .aviso--bien { box-shadow: inset 0 0 0 1px rgba(27, 122, 69, .30), inset 3px 0 0 var(--exito); }
body.panel-body .aviso--ojo  { box-shadow: inset 0 0 0 1px rgba(164, 105, 15, .30), inset 3px 0 0 var(--alerta); }
body.panel-body .aviso--mal  { box-shadow: inset 0 0 0 1px rgba(191, 51, 45, .30), inset 3px 0 0 var(--error); }

/* ── La barra de arriba ─────────────────────────────────────────────────── */
body.panel-body .panel-barra { background: rgba(255, 255, 255, .86); }

/* ── Pestañas, dias y filtros: la sombra del elegido ────────────────────── */
body.panel-body .pestania[aria-pressed='true'],
body.panel-body .cal-dia[aria-pressed='true'],
body.panel-body .filtro-barbero[aria-pressed='true'] {
  box-shadow: 0 8px 20px -12px rgba(22, 24, 29, .55);
}
body.panel-body .filtro-barbero__disco { background: rgba(22, 24, 29, .07); }
body.panel-body .filtro-barbero[aria-pressed='true'] .filtro-barbero__disco {
  background: rgba(255, 255, 255, .18);
  color: var(--tinta);
}

/* ── Las marcas de estado ───────────────────────────────────────────────── */
body.panel-body .marca-estado[data-v='pendiente'],
body.panel-body .marca-estado[data-v='no_asistio'],
body.panel-body .movimientos__tipo[data-tipo='premio'],
body.panel-body .movimientos__tipo[data-tipo='canje'],
body.panel-body .gift__estado[data-estado='apartada'],
body.panel-body .ficha-card__stock[data-poco='true'] {
  box-shadow: inset 0 0 0 1px rgba(164, 105, 15, .38);
}
body.panel-body .marca-estado[data-v='pagado'],
body.panel-body .marca-estado[data-v='confirmada'],
body.panel-body .marca-estado[data-v='completada'],
body.panel-body .gift__estado[data-estado='pagada'] {
  box-shadow: inset 0 0 0 1px rgba(27, 122, 69, .38);
}
body.panel-body .marca-estado[data-v='cancelada'],
body.panel-body .marca-estado[data-v='rechazado'],
body.panel-body .gift__estado[data-estado='cancelada'],
body.panel-body .ficha-card__stock[data-agotado='true'] {
  box-shadow: inset 0 0 0 1px rgba(191, 51, 45, .38);
}
body.panel-body .ficha-card__duenio {
  box-shadow: inset 0 0 0 1px rgba(44, 111, 209, .35);
}
body.panel-body .ficha__premio {
  background: rgba(224, 34, 58, .07);
  box-shadow: inset 0 0 0 1px rgba(224, 34, 58, .35);
}
body.panel-body .cobros-estado[data-estado='falta'],
body.panel-body .cobros-estado[data-estado='prueba'] {
  box-shadow: inset 0 0 0 1px rgba(164, 105, 15, .35), inset 3px 0 0 var(--alerta);
}
body.panel-body .cobros-estado[data-estado='listo'] {
  box-shadow: inset 0 0 0 1px rgba(27, 122, 69, .35), inset 3px 0 0 var(--exito);
}
body.panel-body .aviso-prueba {
  background: rgba(164, 105, 15, .09);
  box-shadow: inset 0 0 0 1px rgba(164, 105, 15, .35), inset 3px 0 0 var(--alerta);
}

/* ── El tablero del dia ─────────────────────────────────────────────────── */
body.panel-body .cal-tablero { background: #FFFFFF; }
body.panel-body .cal2__disco { background: rgba(22, 24, 29, .07); }
/* El hueco que la barberia SI ofrece: sobre negro se aclaraba, sobre papel se
   ensombrece. Es la misma senal, del otro lado. */
body.panel-body .cal2__hueco { background: rgba(22, 24, 29, .045); }
body.panel-body .cal2__cerrado {
  background: repeating-linear-gradient(135deg,
    rgba(22, 24, 29, .07) 0 5px, transparent 5px 10px);
}
/* La hora de la raya del ahora va DENTRO de una pildora roja: ahi la tinta
   tiene que seguir siendo clara aunque --hueso ya no lo sea. */
body.panel-body .cal2__ahora span { color: #FFFFFF; }

/* ── El mostrador ───────────────────────────────────────────────────────── */
/* El precio dentro de un servicio ELEGIDO. El boton pasa a fondo oscuro, asi
   que el precio, que era oscuro sobre claro, tiene que invertirse tambien. */
body.panel-body .servicio-op[aria-pressed='true'] span {
  color: rgba(255, 255, 255, .68);
}

/* ── La caja ────────────────────────────────────────────────────────────── */
body.panel-body .caja-barra {
  background: linear-gradient(to top, rgba(27, 122, 69, .28), rgba(27, 122, 69, .78));
}

/* ── La hoja de detalle y el visor del QR ───────────────────────────────── */
body.panel-body .hoja__telon { background: rgba(22, 24, 29, .38); }
body.panel-body .pase-video__mira {
  box-shadow: 0 0 0 100vmax rgba(22, 24, 29, .45), inset 0 0 0 2px #FFFFFF;
}

/* ── Rellenos blancos sueltos que sobre papel desaparecian ──────────────── */
body.panel-body .pasos-mp > li::before { background: rgba(22, 24, 29, .06); }
body.panel-body .tarjeta-prueba,
body.panel-body .copiable code { background: rgba(22, 24, 29, .045); }
body.panel-body .ficha-card__foto { background: rgba(22, 24, 29, .05); }
body.panel-body .entrar__llaves { background: rgba(22, 24, 29, .035); }

/* ── Donde hay raton de verdad ──────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body.panel-body .cal2__hueco:hover { background: rgba(22, 24, 29, .09); }
  body.panel-body .aviso-prueba:hover { background: rgba(164, 105, 15, .15); }
  body.panel-body .boton--solido:hover { box-shadow: 0 16px 34px -14px rgba(22, 24, 29, .6); }
  body.panel-body .boton--cristal:hover { background: #F2F3F6; }
}

/* Sin backdrop-filter la tarjeta caia a un solido oscuro; aqui, a papel. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  body.panel-body .vidrio { background: #FFFFFF; }
}

/* ── Descuentos ─────────────────────────────────────────────────────────────
   El precio de lista, tachado, delante de lo que de verdad se cobra. */
.precio-antes {
  margin-right: .5rem;
  font-size: .72em;
  color: var(--gris);
  text-decoration: line-through;
}

/* ══ NO VINO ══════════════════════════════════════════════════════════════
   La cita a la que nadie llego. Se queda a la vista -para saber quien falla-
   pero en rojo y tachada, y no le suma a nadie. */
.marca-estado[data-v='no_asistio'],
body.panel-body .marca-estado[data-v='no_asistio'] {
  color: var(--error);
  box-shadow: inset 0 0 0 1px rgba(191, 51, 45, .38);
}
.cal2__cita[data-estado='no_asistio'] {
  --filete: var(--error);
  opacity: .78;
}
.cal2__cita[data-estado='no_asistio'] .cal2__quien { text-decoration: line-through; }
.cal-leyenda li[data-color='no-vino'] { --leyenda: var(--error); }
.cita[data-no-vino='true'] {
  box-shadow: inset 0 0 0 1px rgba(191, 51, 45, .35), inset 3px 0 0 var(--error);
  background: rgba(191, 51, 45, .045);
}
.cita[data-no-vino='true'] .cita__quien { text-decoration: line-through; color: var(--error); }

/* ══ HOJA O TABLERO ═══════════════════════════════════════════════════════ */
.cal-forma {
  display: inline-flex;
  gap: .15rem;
  padding: .2rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--filo);
}
.cal-forma button {
  height: 32px;
  padding-inline: .9rem;
  border-radius: var(--r-pill);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.cal-forma button[aria-pressed='true'] { color: var(--tinta); background: var(--hueso); }
.cal-forma + .cal-zoom { margin-left: 0; }
.cal-zoom[hidden] { display: none; }

/* ══ LA HOJA DEL DIA ══════════════════════════════════════════════════════
   La libreta de la recepcion: una fila por hora, una columna por barbero, el
   nombre escrito dentro. Letra grande, casillas grandes y nada que medir. En
   un celular con seis barberos se arrastra de lado, con la hora fija a la
   izquierda para no perder el renglon. */
.hoja-dia-caja {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-m);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--cristal-filo);
}
.hoja-dia {
  width: 100%;
  min-width: calc(64px + var(--cols, 4) * 128px);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: .82rem;
}
.hoja-dia th, .hoja-dia td {
  border-bottom: 1px solid var(--cristal-filo);
  border-right: 1px solid var(--cristal-filo);
  vertical-align: top;
  text-align: left;
}
.hoja-dia tr > :last-child { border-right: 0; }
.hoja-dia tbody tr:last-child > * { border-bottom: 0; }

.hoja-dia thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #F6F7F9;
  padding: .55rem .6rem;
}
.hoja-dia__esquina { width: 64px; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.hoja-dia__barbero span { display: block; font-size: .9rem; font-weight: 600; color: var(--hueso); }
.hoja-dia__barbero small { font-size: .62rem; color: var(--gris); }

.hoja-dia__hora {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 64px;
  padding: .6rem .5rem;
  background: #F6F7F9;
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hueso);
}
/* La hora de ahora, para saber de un vistazo por donde va el dia. */
.hoja-dia tr[data-ahora='true'] > .hoja-dia__hora { background: var(--rojo); color: #FFFFFF; }
.hoja-dia tr[data-ahora='true'] > td { background: rgba(224, 34, 58, .035); }

.hoja-dia__casilla {
  padding: .3rem;
  min-height: 56px;
  display: table-cell;
}
.hoja-dia__casilla > * + * { margin-top: .3rem; }

/* Cada persona apuntada. El color dice como va su cobro. */
.hoja-cita {
  --tono: var(--exito);
  display: block;
  width: 100%;
  text-align: left;
  padding: .45rem .55rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tono) 9%, #FFFFFF);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 35%, transparent), inset 4px 0 0 var(--tono);
  color: var(--hueso);
}
.hoja-cita[data-cobro='debe']    { --tono: var(--alerta); }
.hoja-cita[data-cobro='no-vino'] { --tono: var(--error); }
.hoja-cita__nombre {
  display: block;
  font-size: .86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.hoja-cita__nombre b { font-variant-numeric: tabular-nums; margin-right: .15rem; }
.hoja-cita__pie { display: block; margin-top: .15rem; font-size: .66rem; color: var(--gris); }
.hoja-cita[data-cobro='no-vino'] .hoja-cita__nombre { text-decoration: line-through; color: var(--error); }

/* La casilla vacia es el boton. */
.hoja-dia__anotar {
  display: block;
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
  font-size: .72rem;
  color: var(--gris);
  border: 1px dashed rgba(22, 24, 29, .18);
  background: transparent;
}
.hoja-cita + .hoja-dia__anotar { min-height: 30px; }
.hoja-dia__cerrado {
  display: block;
  width: 100%;
  padding: .45rem .55rem;
  border-radius: 8px;
  font-size: .7rem;
  text-align: left;
  color: var(--gris);
  background: repeating-linear-gradient(135deg, rgba(22, 24, 29, .07) 0 5px, transparent 5px 10px);
}
@media (hover: hover) and (pointer: fine) {
  .hoja-dia__anotar:hover { color: var(--hueso); border-color: rgba(22, 24, 29, .45); background: rgba(22, 24, 29, .03); }
  .hoja-cita:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 70%, transparent), inset 4px 0 0 var(--tono); }
}

/* La hoja de "Anotar". */
.anotar__rotulo {
  margin: .3rem 0 .4rem;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}
.anotar__cobros { grid-template-columns: 1fr 1fr; margin-bottom: .4rem; }
.anotar__qr { margin-top: .8rem; text-align: center; }
.anotar__qr svg { width: min(220px, 70vw); height: auto; }