/* ==========================================================================
   Agenda — el mes en grilla y, al lado, el día abierto
   ========================================================================== */
.agenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: var(--size);
}
@media (max-width: 860px) {
  .agenda { grid-template-columns: minmax(0, 1fr); }
}

.agenda-mes {
  min-width: 150px;
  text-align: center;
}

.agenda-semana,
.agenda-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--size-xxs);
}
.agenda-semana span {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.agenda-celda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 72px;
  padding: var(--size-xxs) var(--size-xs);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius);
  background: var(--color-bg-container);
  color: var(--color-text);
  text-align: left;
}
.agenda-celda:hover,
.agenda-celda:active {
  border-color: var(--color-primary);
  background: var(--color-bg-container);
  color: var(--color-text);
}
.agenda-celda.pasado { color: var(--color-text-quaternary); background: var(--color-bg-layout); }
.agenda-celda.hoy .agenda-num { color: var(--color-primary); font-weight: 600; }
/* El día abierto se marca por dentro, como la fila activa de la espera: un borde
   más grueso correría la grilla. */
.agenda-celda.elegido {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.agenda-total,
.agenda-monto {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agenda-total { font-size: var(--font-size-sm); }
.agenda-cantidad {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

.agenda-cita-datos {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.agenda-cita .pend-nota { flex: none; }
/* El estado va del ancho de su texto, no estirado a lo largo de la columna. */
.agenda-cita-datos .etiqueta { align-self: flex-start; }

.agenda-pases {
  display: grid;
  gap: var(--size-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.agenda-pase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-xs);
}
.agenda-pase .campo-mini { flex: none; width: 96px; }
.agenda-pase .drop { flex: 1; min-width: 0; }
.agenda-vouchers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-xs);
}

/* En el celular la celda no alcanza para la cifra: queda el número y un punto
   que dice «hay algo», y el total se lee en el día abierto. */
@media (max-width: 620px) {
  .agenda-celda {
    align-items: center;
    min-height: 44px;
    padding: var(--size-xxs);
  }
  .agenda-total,
  .agenda-cantidad { display: none; }
  .agenda-celda.con-citas::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-warning);
  }
}

/* La cita de hoy en la fila de espera de Efectivizar. */
.pend-agendado { flex: none; }

/* El día abierto es angosto: el nombre va solo en su renglón y las etiquetas y
   el DNI debajo. En una fila, el nombre se aplastaba y quedaba bajo el chip. */
#agenda-clientes > li.cliente { flex-wrap: wrap; row-gap: 0; }
#agenda-clientes > li.cliente > .cliente-nombre { flex-basis: 100%; }

/* Las cuatro operaciones reparten el ancho del día abierto en dos filas: es lo
   primero que se decide, y en 360px cuatro en fila no se leen. */
#agenda-tipos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-self: stretch;
}
#agenda-tipos .segmento:nth-child(2n) { border-right: none; }
#agenda-tipos .segmento:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); }
#form-agenda .enlace { justify-self: start; }