/* ============ HORARIO SEMANAL (vista de escritorio) ============ */
/* Ver src/client/components/ScheduleView.tsx. Petición del usuario: "esto
   debe de aparecer en el ordenador" — a diferencia de "Mis clases de hoy"
   (today-view.css), pensada para móvil, esta vista no tiene tratamiento
   especial de pantalla estrecha más allá de scroll horizontal: la
   cuadrícula semanal necesita espacio para verse bien. */
.schedule-view {
  grid-column: 2 / 4;
  background: transparent;
  overflow-y: auto;
  padding: 28px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.schedule-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.schedule-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
}
.schedule-sub {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 4px;
}
.schedule-add-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.schedule-loading {
  padding: 40px 0;
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
}

.schedule-grid-wrap {
  overflow-x: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.schedule-grid {
  display: grid;
  min-width: 760px;
  gap: 0;
}

.schedule-grid-corner { grid-row: 1; }

.schedule-day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 12px;
  border-bottom: 2px solid var(--line-strong);
  color: var(--fg);
  transition: color 0.15s;
}
.schedule-day-head:hover { color: var(--accent); }
.schedule-day-head-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.schedule-day-head-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: 999px;
  padding: 1px 6px;
}

.schedule-hours-col {
  position: relative;
  grid-row: 2;
}
.schedule-hour-mark {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-muted);
  white-space: nowrap;
}

.schedule-day-col {
  position: relative;
  grid-row: 2;
  border-left: 1px solid var(--line);
  cursor: pointer;
}
.schedule-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--line);
}

.schedule-slot-block {
  position: absolute;
  left: 3px;
  right: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: filter 0.15s;
}
.schedule-slot-block:hover { filter: brightness(1.08); }
.schedule-slot-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  opacity: 0.9;
}
.schedule-slot-group {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---- Modal de detalle de un día (reutiliza .settings-*/.groups-modal-*) ---- */
.schedule-day-modal { max-width: 380px; }
.schedule-day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  list-style: none;
}
.schedule-day-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.schedule-day-list-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  white-space: nowrap;
}
.schedule-day-list-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.schedule-day-list-group { font-size: 13.5px; font-weight: 700; color: var(--fg); }
.schedule-day-list-meta { font-size: 11px; color: var(--fg-muted); }

.schedule-form-modal { max-width: 420px; }
.schedule-confirm-text { font-size: 12.5px; color: var(--fg-muted); margin-right: auto; }
/* Fila de confirmación de borrado: reemplaza por completo a la fila de
 * Cancelar/Guardar del formulario mientras se pregunta, para no mezclar
 * dos botones "Cancelar" con significado distinto en el mismo espacio. */
.schedule-confirm-row { flex-wrap: wrap; align-items: center; }

/* -------- Responsive: solo escritorio (petición explícita del usuario) -------- */
@media (max-width: 1279px) {
  .schedule-view { grid-column: 2; }
}
@media (max-width: 767px) {
  .schedule-view { display: none; }
}