/* ============================================================
   STARS FADE — panel de administracion (demostración)
   Mismas fichas de color y tipografia que el sitio, pero mas
   denso: esto es una herramienta de trabajo, no una portada.
   Requisito 19; tareas 29 y 30.
   ============================================================ */

#vista-admin {
  font-size: 14px;
}

.panel {
  min-height: 100vh;
  background: var(--carbon);
}

/* ---------- aviso de demostracion ---------- */

.panel__aviso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 30px;
  background: rgba(217, 174, 69, 0.14);
  border-bottom: 1px solid rgba(217, 174, 69, 0.28);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  text-align: center;
}

.panel__aviso a {
  color: var(--hueso);
  border-bottom: 1px solid var(--linea-viva);
}

/* ---------- barra lateral ---------- */

.panel__lado {
  position: fixed;
  top: 30px;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 232px;
  display: none;
  flex-direction: column;
  padding: 24px 0;
  background: var(--negro);
  border-right: 1px solid var(--linea);
}

.panel__marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 22px 26px;
}

.panel__marca img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.panel__marca span {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.panel__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
  overflow-y: auto;
}

.panel__nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--humo);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--dur-estado) var(--curva-estandar),
    color var(--dur-estado) var(--curva-estandar);
}

.panel__nav button:hover {
  background: rgba(245, 241, 235, 0.05);
  color: var(--hueso);
}

.panel__nav button.activo {
  background: rgba(217, 174, 69, 0.12);
  color: var(--oro);
}

.panel__nav button:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: -2px;
}

.panel__icono {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-size: 14px;
  opacity: 0.85;
}

.panel__grupo {
  margin: 20px 0 8px;
  padding: 0 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tenue);
}

.panel__usuario {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding: 18px 22px 0;
  border-top: 1px solid var(--linea);
}

.panel__usuario img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--linea-viva);
}

.panel__usuario strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.panel__usuario span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
}

/* ---------- cuerpo ---------- */

.panel__cuerpo {
  padding: 30px 0 88px;
}

.panel__contenedor {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

.panel__encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.panel__titulo {
  margin: 0;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.panel__fecha {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tenue);
}

/* ---------- indicadores ---------- */

.indicadores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}

.indicador {
  padding: 16px;
  background: var(--elevado);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}

.indicador--acento {
  border-color: rgba(217, 174, 69, 0.32);
}

.indicador dt {
  margin-bottom: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tenue);
}

.indicador dd {
  margin: 0;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.01em;
}

.indicador--acento dd {
  color: var(--oro);
}

.indicador small {
  display: block;
  margin-top: 8px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--humo);
}

/* ---------- agenda del dia ---------- */

.agenda {
  overflow-x: auto;
  background: var(--elevado);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  scrollbar-width: thin;
}

.agenda__rejilla {
  display: grid;
  min-width: 720px;
}

.agenda__cabecera {
  display: contents;
}

.agenda__barbero {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 12px;
  background: var(--negro);
  border-bottom: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.agenda__barbero img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.agenda__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.agenda__esquina {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background: var(--negro);
  border-bottom: 1px solid var(--linea);
}

.agenda__hora {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 0 10px;
  background: var(--elevado);
  border-top: 1px solid var(--linea);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 4px;
}

.agenda__celda {
  position: relative;
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
  min-height: 34px;
}

/* La celda que tiene cita sube de plano: si no, las celdas posteriores se
   pintan encima y recortan las tarjetas de 60 y 90 minutos. */
.agenda__celda.con-cita {
  z-index: 2;
}

/* la media hora se marca mas tenue, para no cortar la lectura vertical */
.agenda__celda.media {
  border-top-style: dashed;
  border-top-color: rgba(245, 241, 235, 0.05);
}

.cita {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 2px;
  z-index: 1;
  overflow: hidden;
  padding: 7px 9px;
  border-radius: var(--r);
  border-left: 3px solid var(--color-barbero);
  background: color-mix(in srgb, var(--color-barbero) 16%, var(--elevado));
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--dur-press) var(--curva-resorte),
    filter var(--dur-estado) var(--curva-estandar);
}

.cita:hover {
  filter: brightness(1.25);
}

.cita:active {
  transform: scale(0.985);
}

.cita:focus-visible {
  outline: 2px solid var(--hueso);
  outline-offset: -2px;
}

.cita__hora {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
}

.cita__cliente {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--hueso);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cita__servicio {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: rgba(245, 241, 235, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tarjeta de servicio corto: todo en una linea, o no cabe nada. */
.cita--corta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px;
}

.cita--corta .cita__cliente {
  margin-top: 0;
}

.cita.atendida {
  opacity: 0.55;
}

.cita.atendida .cita__cliente {
  text-decoration: line-through;
}

/* Linea de la hora actual: sin ella no se lee de un vistazo que hay detras y
   que hay por delante. */
.agenda__ahora {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 1px;
  background: var(--oro);
  box-shadow: 0 0 8px rgba(217, 174, 69, 0.8);
  pointer-events: none;
}

.agenda__ahora::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro);
}

/* ---------- ficha de la reserva ---------- */

.ficha-cita {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(5, 5, 5, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: entra-visor var(--dur-modal) var(--curva-frena);
}

.ficha-cita[hidden] {
  display: none;
}

.ficha-cita__caja {
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  background: var(--elevado);
  border: 1px solid var(--linea-viva);
  border-radius: var(--r) var(--r) 0 0;
  animation: sube-ficha var(--dur-modal) var(--curva-frena);
}

@keyframes sube-ficha {
  from {
    transform: translateY(24px);
  }
  to {
    transform: none;
  }
}

.ficha-cita__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linea);
}

.ficha-cita__nombre {
  margin: 0;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
}

.ficha-cita__cerrar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: transparent;
  color: var(--hueso);
  font-size: 15px;
  cursor: pointer;
}

.ficha-cita__cerrar:hover {
  background: rgba(245, 241, 235, 0.07);
}

.estado-cita {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 5px 10px;
  border-radius: var(--r);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.estado-cita--confirmada {
  background: rgba(217, 174, 69, 0.14);
  color: var(--oro);
}

.estado-cita--atendida {
  background: rgba(74, 124, 89, 0.18);
  color: #7db98c;
}

.ficha-cita dl {
  margin: 0 0 22px;
}

.ficha-cita__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
}

.ficha-cita__fila:last-child {
  border-bottom: 0;
}

.ficha-cita__fila dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tenue);
}

.ficha-cita__fila dd {
  margin: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
}

.ficha-cita__total dd {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--oro);
}

.ficha-cita__nota {
  margin: 0 0 22px;
  padding: 14px;
  background: var(--negro);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--humo);
}

.ficha-cita__acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ficha-cita__acciones .boton {
  width: 100%;
}

/* ---------- barra inferior de telefono ---------- */

.panel__inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  background: rgba(10, 10, 10, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}

.panel__inferior button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  border: 0;
  background: transparent;
  color: var(--tenue);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.panel__inferior button.activo {
  color: var(--oro);
}

.panel__inferior .panel__icono {
  font-size: 17px;
  width: auto;
}

/* ---------- pantallas aun no construidas ---------- */

.panel__pendiente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 320px;
  padding: 40px 24px;
  text-align: center;
  background: var(--elevado);
  border: 1px dashed rgba(245, 241, 235, 0.14);
  border-radius: var(--r);
}

.panel__pendiente strong {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
}

.panel__pendiente p {
  margin: 0;
  max-width: 44ch;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--humo);
}

/* ---------- enlace al panel desde el pie del sitio ---------- */

.pie__panel {
  margin: 30px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pie__panel a {
  color: var(--oro);
  border-bottom: 1px solid rgba(217, 174, 69, 0.35);
}

/* ---------- escritorio ---------- */

@media (min-width: 900px) {
  #vista-admin {
    font-size: 15px;
  }
  .panel__lado {
    display: flex;
  }
  .panel__cuerpo {
    margin-left: 232px;
    padding: 44px 0 44px;
  }
  .panel__contenedor {
    padding: 0 34px;
  }
  .panel__inferior {
    display: none;
  }
  .indicadores {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
  .ficha-cita {
    align-items: center;
  }
  .ficha-cita__caja {
    border-radius: var(--r);
  }
}
/* ============================================================
   PANEL v2 — teléfono primero, y todas las secciones con contenido.
   Las reglas de más abajo pisan a las de arriba a propósito.
   ============================================================ */

/* ---------- corrección del encuadre general ---------- */

.panel__aviso {
  height: 34px;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
}

.panel__lado {
  top: 0;
}

.panel__volver {
  display: block;
  margin: 16px 12px 0;
  padding: 12px;
  border-top: 1px solid var(--linea);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
  transition: color var(--dur-estado) var(--curva-estandar);
}

.panel__volver:hover {
  color: var(--oro);
}

.panel__cuerpo {
  padding: 78px 0 96px;
}

/* ---------- barra superior de teléfono ---------- */

.panel__superior {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  background: rgba(10, 10, 10, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}

.panel__superior img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* El logo y el nombre de la sección son la salida al sitio en teléfono. Pisa a
   `.panel__volver`, pensado para el enlace suelto de la barra lateral, no para
   una marca en una cabecera. Ojo: `.panel__marca` ya es el logo de esa barra
   lateral —de ahí que esta clase se llame distinto—. */
.panel__salida {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border-top: 0;
  color: var(--hueso);
  letter-spacing: normal;
}

.panel__salida:hover {
  color: var(--hueso);
}

.panel__salida span {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.panel__mas {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: transparent;
  color: var(--hueso);
  font-size: 20px;
  cursor: pointer;
}

/* ---------- cajón con todas las secciones ---------- */

/* El cajon se apoya sobre la barra de abajo en vez de taparla: la barra sigue
   entera y con su color —Hoy, Reservas, Clientes y Cobros a la vista— y las
   demas secciones suben desde ella. El guion ajusta el `bottom` al alto real
   de la barra; lo de aca es el valor de reserva. */
.panel__cajon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  align-items: flex-end;
  /* recorta la hoja mientras sube: si no, asoma por encima de la barra */
  overflow: hidden;
  /* Velo negro y sin desenfoque. El gris de antes competia con la barra y
     hacia parecer que se abria otra cosa encima, en vez de que la barra
     misma creciera. */
  background: rgba(0, 0, 0, 0.55);
  animation: aparece-velo-panel var(--dur-modal) var(--curva-frena);
}

@keyframes aparece-velo-panel {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.panel__cajon[hidden] {
  display: none;
}

/* Mismo fondo que `.panel__inferior`, sin radio y sin borde que las separe:
   la hoja y la barra tienen que leerse como una sola superficie que crecio.
   Con el gris de `--elevado` parecia un panel distinto abriendose encima. */
.panel__cajon-caja {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 12px 10px 6px;
  background: rgba(10, 10, 10, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  /* sube desde detras de la barra, como si saliera de ella */
  animation: sale-de-la-barra var(--dur-modal) var(--curva-frena);
}

@keyframes sale-de-la-barra {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.panel__cajon-caja button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--humo);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* Con la barra crecida no hay linea entre ella y lo que subio: es una pieza. */
.panel__inferior.crecida {
  border-top-color: transparent;
}

.panel__tirador {
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(245, 241, 235, 0.18);
}

/* Rejilla de secciones: cuatro por fila y las demas debajo. En columna, diez
   secciones eran media pantalla de recorrido para llegar a la ultima. */
.panel__rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

/* Sin recuadro: los items de la barra tampoco lo tienen. Con el cuadro gris
   parecian tarjetas de otro panel; asi se leen como mas botones de la misma
   barra, que es lo que son. */
.panel__rejilla button {
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  /* 72 px de alto: objetivo tactil holgado para el pulgar */
  min-height: 72px;
  padding: 10px 4px;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
}

.panel__rejilla .panel__icono {
  font-size: 19px;
  width: auto;
}

.panel__cajon-caja button.activo {
  background: rgba(217, 174, 69, 0.12);
  color: var(--oro);
}

.panel__rejilla button:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: -2px;
}

/* ---------- agenda: lista en teléfono ---------- */

.agenda {
  display: none;
}

.agenda-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agenda-lista__ahora {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro);
}

.agenda-lista__ahora span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--oro), transparent);
  order: 1;
}

.cita-lista {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: var(--elevado);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--color-barbero);
  border-radius: var(--r);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-press) var(--curva-resorte),
    border-color var(--dur-estado) var(--curva-estandar);
}

.cita-lista:active {
  transform: scale(0.99);
}

.cita-lista.atendida {
  opacity: 0.55;
}

.cita-lista.atendida .cita-lista__cliente {
  text-decoration: line-through;
}

.cita-lista__hora {
  flex: 0 0 auto;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 17px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--hueso);
}

.cita-lista__medio {
  flex: 1;
  min-width: 0;
}

.cita-lista__cliente {
  display: block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cita-lista__detalle {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--humo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cita-lista__precio {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--oro);
}

/* ---------- tablas: tarjetas en teléfono ---------- */

.tabla-caja {
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--elevado);
}

/* En telefono la tabla se lee como una pila de tarjetas. La <table> y el
   <tbody> tienen que dejar de ser tabla, no solo las filas: mientras sigan en
   `display: table`, el algoritmo de tablas estira el ancho hasta el contenido
   —ignorando el 100 % del padre— y la pagina desborda a lo ancho. Es lo que
   pasaba en Clientes: 602 px de documento en una pantalla de 414. */
.tabla {
  display: block;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabla tbody {
  display: block;
}

.tabla thead {
  display: none;
}

.tabla tr {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linea);
}

.tabla tr:last-child {
  border-bottom: 0;
}

.tabla td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  /* sin esto, un correo o un nombre largo no encoge y vuelve a desbordar */
  min-width: 0;
  padding: 4px 0;
  text-align: right;
  overflow-wrap: anywhere;
  color: var(--hueso);
}

.tabla td::before {
  content: attr(data-etiqueta);
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tenue);
  text-align: left;
}

/* la primera celda hace de titulo de la tarjeta */
.tabla td:first-child {
  display: block;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  font-size: 16px;
}

.tabla td:first-child::before {
  display: none;
}

.marca-tabla {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.marca-tabla--ok {
  background: rgba(74, 124, 89, 0.2);
  color: #7db98c;
}

.marca-tabla--oro {
  background: rgba(217, 174, 69, 0.16);
  color: var(--oro);
}

.marca-tabla--neutro {
  background: rgba(245, 241, 235, 0.08);
  color: var(--humo);
}

.panel__pie-nota {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--tenue);
}

/* ---------- barberos ---------- */

.rejilla-barberos {
  display: grid;
  gap: 12px;
}

.tarjeta-barbero {
  padding: 18px;
  background: var(--elevado);
  border: 1px solid var(--linea);
  border-top: 2px solid var(--color-barbero);
  border-radius: var(--r);
}

.tarjeta-barbero__cabecera {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.tarjeta-barbero__cabecera img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--linea-viva);
}

.tarjeta-barbero__cabecera strong {
  display: block;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
}

.tarjeta-barbero__cabecera span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tenue);
}

.tarjeta-barbero__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.tarjeta-barbero__datos dt {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}

.tarjeta-barbero__datos dd {
  margin: 6px 0 0;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}

.tarjeta-barbero__servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.tarjeta-barbero__servicios span {
  padding: 4px 9px;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  font-size: 10px;
  font-weight: 600;
  color: var(--humo);
}

/* ---------- calendario de la semana ---------- */

.semana {
  display: grid;
  gap: 10px;
}

.semana__dia {
  padding: 16px;
  background: var(--elevado);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}

.semana__dia--hoy {
  border-color: rgba(217, 174, 69, 0.36);
}

.semana__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
}

.semana__cabecera strong {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 19px;
  text-transform: uppercase;
}

.semana__cabecera span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--tenue);
}

.semana__total {
  margin: 0 0 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
}

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

.semana__barra {
  display: grid;
  grid-template-columns: 8px 62px 1fr 34px;
  align-items: center;
  gap: 9px;
}

.semana__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.semana__nombre {
  font-size: 11px;
  font-weight: 600;
  color: var(--humo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.semana__pista,
.barras__pista {
  height: 6px;
  border-radius: 999px;
  background: rgba(245, 241, 235, 0.07);
  overflow: hidden;
}

.semana__pista i,
.barras__pista i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.semana__pct {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
  text-align: right;
}

/* ---------- bloques con barras ---------- */

.bloque {
  margin-top: 22px;
  padding: 20px 18px;
  background: var(--elevado);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}

.bloque__titulo {
  margin: 0 0 18px;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.barras {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.barras__fila {
  display: grid;
  grid-template-columns: 96px 1fr 82px;
  align-items: center;
  gap: 12px;
}

.barras__nombre {
  font-size: 12px;
  font-weight: 600;
  color: var(--humo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barras__valor {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ============================================================
   Escritorio
   ============================================================ */

@media (min-width: 900px) {
  .panel__superior,
  .panel__cajon {
    display: none !important;
  }

  .panel__cuerpo {
    margin-left: 232px;
    padding: 44px 0 44px;
  }

  /* En escritorio manda la rejilla; la lista es para el teléfono. */
  .agenda {
    display: block;
  }

  .agenda-lista {
    display: none;
  }

  .rejilla-barberos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .semana {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .barras__fila {
    grid-template-columns: 130px 1fr 96px;
  }

  /* la tabla vuelve a ser tabla */
  .tabla {
    display: table;
  }

  .tabla tbody {
    display: table-row-group;
  }

  .tabla thead {
    display: table-header-group;
  }

  .tabla thead th {
    padding: 13px 16px;
    background: var(--negro);
    border-bottom: 1px solid var(--linea);
    text-align: left;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tenue);
    white-space: nowrap;
  }

  .tabla tr {
    display: table-row;
    padding: 0;
  }

  .tabla tbody tr:hover {
    background: rgba(245, 241, 235, 0.03);
  }

  .tabla td,
  .tabla td:first-child {
    display: table-cell;
    padding: 13px 16px;
    margin: 0;
    border-bottom: 1px solid var(--linea);
    text-align: left;
    font-size: 13px;
  }

  .tabla td::before {
    display: none;
  }

  .tabla tbody tr:last-child td {
    border-bottom: 0;
  }
}

/* ============================================================
   Agenda de escritorio: menos rejilla, más aire
   ============================================================ */

.agenda {
  overflow-x: auto;
  background: var(--elevado);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}

.agenda__rejilla {
  min-width: 980px;
}

.agenda__barbero {
  gap: 10px;
  padding: 14px 14px;
  border-left: 0;
  border-bottom: 2px solid var(--color-barbero);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.agenda__barbero img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.agenda__hora {
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px 0 0;
  border-top: 1px solid var(--linea);
  font-size: 11px;
  color: var(--humo);
}

/* la media hora casi no se dibuja: la rejilla completa marea */
.agenda__hora.media {
  color: transparent;
  border-top-color: transparent;
}

.agenda__celda {
  border-left: 1px solid var(--linea);
  border-top: 1px solid var(--linea);
}

.agenda__celda.media {
  border-top-color: rgba(245, 241, 235, 0.03);
}

.cita {
  left: 4px;
  right: 4px;
  top: 3px;
  padding: 8px 10px;
  border-left-width: 3px;
  background: color-mix(in srgb, var(--color-barbero) 20%, var(--elevado));
}

.cita__cliente {
  margin-top: 0;
  font-size: 12px;
}

.cita__servicio {
  margin-top: 2px;
}
/* ============================================================
   Edición: formulario, acciones de fila e informe por barbero
   ============================================================ */

/* el botón de "nuevo" del encabezado */
.panel__encabezado .boton {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 12px 20px;
  font-size: 10px;
  letter-spacing: 0.16em;
}

/* ---------- acciones de fila ---------- */

.accion {
  padding: 7px 12px;
  border: 1px solid var(--linea-viva);
  border-radius: var(--r);
  background: transparent;
  color: var(--hueso);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-estado) var(--curva-estandar),
    border-color var(--dur-estado) var(--curva-estandar),
    color var(--dur-estado) var(--curva-estandar);
}

.accion:hover {
  border-color: var(--oro);
  color: var(--oro);
}

.accion--peligro:hover {
  border-color: #c13e3e;
  color: #e07a7a;
}

.accion:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

.tabla__acciones {
  display: flex !important;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px !important;
  margin-top: 4px;
  border-top: 1px solid var(--linea);
}

.tabla__acciones::before {
  display: none !important;
}

.tarjeta-barbero__acciones {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}

/* ---------- formulario ---------- */

.formulario {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(5, 5, 5, 0.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: entra-visor var(--dur-modal) var(--curva-frena);
}

.formulario[hidden] {
  display: none;
}

.formulario__caja {
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px 22px calc(24px + env(safe-area-inset-bottom));
  background: var(--elevado);
  border: 1px solid var(--linea-viva);
  border-radius: var(--r) var(--r) 0 0;
  animation: sube-ficha var(--dur-modal) var(--curva-frena);
}

.formulario__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linea);
}

.formulario__cabecera h2 {
  margin: 0;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.05;
  text-transform: uppercase;
}

.formulario__campos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campo-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campo-panel span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tenue);
}

.campo-panel input,
.campo-panel select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--negro);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  color: var(--hueso);
  font-family: 'Manrope', system-ui, sans-serif;
  /* 16px: por debajo de eso iOS hace acercamiento automático al enfocar */
  font-size: 16px;
  font-weight: 600;
  transition:
    border-color var(--dur-estado) var(--curva-estandar),
    box-shadow var(--dur-estado) var(--curva-estandar);
}

.campo-panel input:focus,
.campo-panel select:focus {
  outline: none;
  border-color: rgba(217, 174, 69, 0.5);
  box-shadow: 0 0 0 2px rgba(217, 174, 69, 0.3);
}

.formulario__aviso {
  margin: 20px 0 0;
  padding: 12px 14px;
  background: rgba(217, 174, 69, 0.08);
  border: 1px solid rgba(217, 174, 69, 0.24);
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--oro);
}

.formulario__acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.formulario__acciones .boton {
  width: 100%;
}

/* ---------- informe por barbero ---------- */

.bloque__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.bloque__cabecera .bloque__titulo {
  margin: 0;
}

.selector-barbero {
  min-height: 44px;
  padding: 10px 14px;
  background: var(--negro);
  border: 1px solid var(--linea-viva);
  border-radius: var(--r);
  color: var(--hueso);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.selector-barbero:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

.informe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 20px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
}

.informe__fila {
  padding: 14px;
  background: var(--elevado);
}

.informe__fila dt {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tenue);
}

.informe__fila dd {
  margin: 8px 0 0;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1;
}

.informe__fila:last-child dd {
  color: var(--oro);
}

@media (min-width: 620px) {
  .formulario {
    align-items: center;
  }
  .formulario__caja {
    border-radius: var(--r);
  }
  .formulario__acciones {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .formulario__acciones .boton {
    width: auto;
  }
}

@media (min-width: 900px) {
  .informe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tabla__acciones {
    justify-content: flex-start;
    padding-top: 13px !important;
    margin-top: 0;
    border-top: 0;
  }
}
/* ============================================================
   Filtros, orden y tarjetas de reserva
   ============================================================ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--elevado);
  color: var(--humo);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--dur-estado) var(--curva-estandar),
    color var(--dur-estado) var(--curva-estandar),
    background-color var(--dur-estado) var(--curva-estandar);
}

.filtro em {
  font-style: normal;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(245, 241, 235, 0.08);
  font-size: 10px;
}

.filtro:hover {
  border-color: var(--linea-viva);
  color: var(--hueso);
}

.filtro.activo {
  border-color: var(--oro);
  background: rgba(217, 174, 69, 0.12);
  color: var(--oro);
}

.filtro.activo em {
  background: rgba(217, 174, 69, 0.2);
}

.filtro:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

/* ---------- cabecera ordenable ---------- */

.orden {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--dur-estado) var(--curva-estandar);
}

.orden:hover {
  color: var(--hueso);
}

.orden.activo {
  color: var(--oro);
}

.orden:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

/* ---------- tarjetas de reserva ---------- */

.lista-reservas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reserva {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: var(--elevado);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--color-barbero);
  border-radius: var(--r);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-press) var(--curva-resorte),
    border-color var(--dur-estado) var(--curva-estandar);
}

.reserva:hover {
  border-color: var(--linea-viva);
  border-left-color: var(--color-barbero);
}

.reserva:active {
  transform: scale(0.995);
}

.reserva:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

.reserva.atendida {
  opacity: 0.62;
}

.reserva.atendida .reserva__cliente {
  text-decoration: line-through;
}

.reserva__hora {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 54px;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 19px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.reserva__hora em {
  font-family: 'Manrope', system-ui, sans-serif;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}

.reserva__medio {
  min-width: 0;
}

.reserva__cliente {
  display: block;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reserva__detalle {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--humo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reserva__barbero {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
}

.reserva__barbero img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.reserva__lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.reserva__precio {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--oro);
}

.vacio-panel {
  padding: 44px 24px;
  text-align: center;
  background: var(--elevado);
  border: 1px dashed rgba(245, 241, 235, 0.14);
  border-radius: var(--r);
  font-size: 13px;
  color: var(--humo);
}

@media (min-width: 900px) {
  .reserva {
    grid-template-columns: 90px 1fr 220px auto;
    padding: 16px 20px;
  }
  .reserva__barbero {
    margin-top: 0;
    justify-self: start;
  }
  .reserva__medio {
    display: flex;
    flex-direction: column;
  }
  .reserva__lado {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}

/* ---------- tope de la lista del dia ---------- */

.agenda-lista-caja {
  display: block;
}

.ver-mas {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed rgba(245, 241, 235, 0.18);
  border-radius: var(--r);
  background: transparent;
  color: var(--humo);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--dur-estado) var(--curva-estandar),
    color var(--dur-estado) var(--curva-estandar);
}

.ver-mas:hover {
  border-color: var(--oro);
  color: var(--oro);
}

/* Antes, en escritorio la lista se ocultaba siempre y mandaba la rejilla. Ahora
   el conmutador decide en los dos tamaños, asi que quien oculta es
   `.vista-hoy--*`, mas abajo, y no el ancho de la pantalla. */

/* ---------- selector de dia y conmutador de vista ---------- */

.tira-dias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
  scrollbar-width: none;
}

.tira-dias::-webkit-scrollbar {
  display: none;
}

.dia-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 62px;
  padding: 10px 0;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--elevado);
  color: var(--tenue);
  font-family: 'Manrope', system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--dur-estado) var(--curva-estandar),
    color var(--dur-estado) var(--curva-estandar);
}

.dia-chip span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dia-chip strong {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--hueso);
}

.dia-chip.activo {
  border-color: var(--oro);
  color: var(--oro);
}

.dia-chip.activo strong {
  color: var(--oro);
}

.dia-chip:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

/* ---------- selector de barbero del dia ---------- */

.selector-barbero {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.selector-barbero::-webkit-scrollbar {
  display: none;
}

.ficha-barbero {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  /* 48 px de alto: es un objetivo tactil, no un adorno */
  min-height: 48px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--elevado);
  color: var(--humo);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--dur-estado) var(--curva-estandar),
    background-color var(--dur-estado) var(--curva-estandar),
    color var(--dur-estado) var(--curva-estandar);
}

.ficha-barbero img,
.ficha-barbero__todos {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.ficha-barbero__todos {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 241, 235, 0.07);
  font-size: 12px;
  color: var(--humo);
}

.ficha-barbero.activo {
  /* el color propio del barbero es el mismo que lo identifica en la rejilla */
  border-color: var(--color-barbero, var(--oro));
  background: rgba(217, 174, 69, 0.12);
  color: var(--hueso);
}

.ficha-barbero.activo img {
  box-shadow: 0 0 0 2px var(--color-barbero, var(--oro));
}

.ficha-barbero:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

.conmutador {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 16px;
  padding: 3px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--elevado);
}

.conmutador button {
  min-height: 38px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--humo);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-estado) var(--curva-estandar),
    color var(--dur-estado) var(--curva-estandar);
}

.conmutador button.activo {
  background: rgba(217, 174, 69, 0.16);
  color: var(--oro);
}

/* En telefono se ve lo que el usuario eligio; en escritorio, siempre la rejilla. */
.vista-hoy--lista .agenda {
  display: none;
}

.vista-hoy--calendario .agenda-lista-caja {
  display: none;
}

.vista-hoy--calendario .agenda {
  display: block;
}

/* La rejilla en telefono: columnas mas angostas y desplazamiento lateral, con la
   columna de horas fija a la izquierda. */
@media (max-width: 899px) {
  .agenda__rejilla {
    min-width: 0;
  }
  .agenda__barbero {
    padding: 11px 8px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .agenda__barbero img {
    width: 22px;
    height: 22px;
  }
  .cita {
    padding: 6px 7px;
  }
  .cita__cliente {
    font-size: 11px;
  }
  .cita__servicio {
    font-size: 9px;
  }
}

/* El conmutador vale en los dos tamaños: en escritorio tambien hace falta la
   lista, que es la que se lee de corrido para saber que viene. Antes se
   ocultaba y la rejilla mandaba siempre. */
@media (min-width: 900px) {
  .agenda--uno .agenda__rejilla {
    max-width: 620px;
  }
}