/* ═══════════════════════════════════════════════════════════════════
   schedule.css — Módulo de Horario · PlataformaED
   Estética tipo calendario semanal profesional (Google Calendar /
   Outlook), construida sobre los design tokens existentes de la
   plataforma (tokens.css). No introduce colores nuevos fuera de la
   paleta de acentos por asignatura, que sigue el mismo criterio ya
   usado en users-admin.js (USR_AVATAR_COLORS).
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   BARRA SUPERIOR — notificaciones / badge admin
   ───────────────────────────────────────────── */
.sched-notif-wrap { position: relative; display: inline-flex; }
.sched-notif-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--g0);
}
.sched-notif-badge:empty,
.sched-notif-badge[data-empty="true"] { display: none; }

.sched-admin-badge {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--info-bg);
  border: 1px solid var(--primary-mid);
  border-radius: var(--r-lg);
  color: var(--info-txt);
  font-size: 12.5px;
  font-weight: 600;
}
.sched-admin-badge i { font-size: 17px; margin-top: 1px; color: var(--primary); flex-shrink: 0; }
.sched-admin-titulo { color: var(--info-txt); }
.sched-admin-info { font-size: 11.5px; font-weight: 500; color: var(--g500); margin-top: 2px; }

/* Candado de "desbloquear para editar" — quien tiene permiso real de
   edición arranca cada sesión en modo bloqueado; debe tocar este botón
   para habilitar los controles de edición/generación. Evita cambios
   accidentales, sobre todo en roles que recibieron el permiso a nivel
   de rol completo (ver page-visibility.js → rolesEdicion). */
.sched-lock-toggle {
  border: 1px solid var(--g200); background: var(--g50); color: var(--g600);
}
.sched-lock-toggle:hover { border-color: var(--primary-mid); color: var(--primary); }
.sched-lock-toggle.sched-lock--abierto {
  background: var(--ok-bg, #ecfdf5); border-color: var(--ok, #059669); color: var(--ok, #059669);
}
.sched-lock-toggle.sched-lock--abierto:hover { opacity: .85; }

/* ─────────────────────────────────────────────
   [F6] PESTAÑAS DE VISTA — Mi horario / Horario general
   (admin_general / director / coordinador)
   ───────────────────────────────────────────── */
.sched-view-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--g50);
  border: 1px solid var(--g150);
  border-radius: var(--r-lg);
  width: fit-content;
}
.sched-view-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  border-radius: calc(var(--r-lg) - 4px);
  border: none;
  background: transparent;
  color: var(--g500);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
  font-family: inherit;
}
.sched-view-tab i { font-size: 14px; opacity: .8; }
.sched-view-tab:hover:not(.active) { color: var(--g700); background: var(--g100); }
.sched-view-tab.active {
  background: var(--g0);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.sched-general-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sched-general-controls label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--g500);
}
.sched-general-controls select {
  min-width: 240px;
  max-width: 100%;
}

/* ─────────────────────────────────────────────
   PESTAÑAS DE AÑO ESCOLAR
   ───────────────────────────────────────────── */
.sched-historial-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sched-year-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--g150);
  background: var(--g0);
  color: var(--g500);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
  font-family: inherit;
}
.sched-year-tab i { font-size: 14px; opacity: .8; }
.sched-year-tab:hover { border-color: var(--g300); color: var(--g700); background: var(--g50); }
.sched-year-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(27,79,216,.28);
}

/* ─────────────────────────────────────────────
   CONTENEDOR / SCROLL
   ───────────────────────────────────────────── */
.sched-scroll {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--g150);
}

.sched-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  background: var(--g0);
}

/* Cabecera pegajosa */
.sched-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--g50);
  color: var(--g500);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 11px 8px;
  text-align: center;
  border-bottom: 1px solid var(--g150);
  white-space: nowrap;
}

/* Columna de horas — fija a la izquierda */
.sched-th-hora, .sched-td-hora {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--g50);
  width: 76px;
  min-width: 76px;
  border-right: 1px solid var(--g150);
}
.sched-th-hora { z-index: 3; }
.sched-td-hora {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--g400);
  text-align: center;
  padding: 4px 6px;
  vertical-align: middle;
  white-space: nowrap;
  letter-spacing: -.01em;
}

/* Resalta el día actual */
.sched-table th.is-today {
  color: var(--primary);
  background: var(--primary-light);
}
.sched-table th.is-today::after {
  content: '';
  display: block;
  width: 18px; height: 2.5px;
  border-radius: 2px;
  background: var(--primary);
  margin: 5px auto 0;
}
.sched-td-bloque.is-today,
.sched-td-vacio.is-today {
  background: rgba(27,79,216,.025);
}

/* ─────────────────────────────────────────────
   FILAS NORMALES / CELDAS
   ───────────────────────────────────────────── */
.sched-table tbody tr:not(.sched-row-receso):not(.sched-row-almuerzo):not(.sched-row-especial) {
  border-bottom: 1px solid var(--g100);
}
.sched-table tbody tr:last-child { border-bottom: none; }

.sched-td-bloque, .sched-td-vacio {
  padding: 4px;
  vertical-align: middle;
  height: 58px;
  border-left: 1px solid var(--g100);
}
.sched-td-bloque:first-of-type, .sched-td-vacio:first-of-type { border-left: none; }

/* ─────────────────────────────────────────────
   BLOQUE DE CLASE — tarjeta tipo Google Calendar
   (barra de color a la izquierda, no fondo sólido)
   ───────────────────────────────────────────── */
.sched-block {
  height: 100%;
  min-height: 50px;
  padding: 6px 9px 6px 10px;
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  background: var(--primary-light);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.sched-block:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
  filter: brightness(0.98);
}
.sched-block:active { transform: translateY(0) scale(.99); }

.sched-block-asig {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--g800);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sched-block-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sched-block-sec, .sched-block-aula {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600;
  color: var(--g600);
  background: rgba(255,255,255,.55);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.sched-block-aula i { font-size: 10px; }

/* Paleta de acentos por asignatura — barra izquierda + fondo suave.
   Mismo criterio de USR_AVATAR_COLORS (users-admin.js): colores
   propios distinguibles, armonizados con la identidad azul/verde
   MINERD de la plataforma. */
.sched-color-blue    { border-left-color: var(--primary);  background: var(--primary-light); }
.sched-color-green    { border-left-color: var(--ok);       background: var(--ok-bg); }
.sched-color-teal    { border-left-color: var(--accent);    background: var(--accent-light); }
.sched-color-amber    { border-left-color: var(--warn);     background: var(--warn-bg); }
.sched-color-purple  { border-left-color: #8B5CF6;         background: #F3EEFF; }
.sched-color-pink    { border-left-color: #EC4899;         background: #FDF0F7; }
.sched-color-orange  { border-left-color: #F97316;         background: #FFF1E7; }
.sched-color-indigo  { border-left-color: #6366F1;         background: #EEF0FE; }
.sched-color-cyan    { border-left-color: #06B6D4;         background: #E6FBFD; }
.sched-color-violet  { border-left-color: #A855F7;         background: #F8EFFE; }
.sched-color-slate    { border-left-color: var(--g500);     background: var(--g100); }
.sched-color-gray    { border-left-color: var(--g300);     background: var(--g50); }

/* ─────────────────────────────────────────────
   CELDA VACÍA — botón "+" fantasma
   ───────────────────────────────────────────── */
.sched-td-vacio { text-align: center; }
.sched-add-btn {
  width: 100%;
  height: 50px;
  border: 1.5px dashed var(--g200);
  border-radius: 8px;
  background: transparent;
  color: var(--g300);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t);
}
.sched-add-btn:hover {
  border-color: var(--primary-mid);
  border-style: solid;
  background: var(--primary-light);
  color: var(--primary);
}
.sched-vacio-label { color: var(--g200); font-size: 12px; }

/* ─────────────────────────────────────────────
   FILAS ESPECIALES — recreo / almuerzo / acto cívico
   Banda de ancho completo, discreta, como "all-day event"
   ───────────────────────────────────────────── */
.sched-td-especial { padding: 0; }
.sched-cell-especial {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.sched-cell-especial i { font-size: 14px; }

.sched-row-receso .sched-td-hora   { background: var(--accent-light); border-right-color: var(--accent-light); }
.sched-row-receso .sched-cell-especial { background: var(--accent-light); color: var(--accent-dark); }

.sched-row-almuerzo .sched-td-hora { background: var(--warn-bg); border-right-color: var(--warn-bg); }
.sched-row-almuerzo .sched-cell-especial { background: var(--warn-bg); color: var(--warn-txt); }

.sched-row-especial .sched-td-hora { background: var(--primary-light); border-right-color: var(--primary-light); }
.sched-row-especial .sched-cell-especial { background: var(--primary-light); color: var(--primary-dark); }

/* ─────────────────────────────────────────────
   LEYENDA (secciones usadas)
   ───────────────────────────────────────────── */
.sched-legend {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  padding: 12px 4px 2px;
  border-top: 1px solid var(--g100);
  margin-top: 12px;
}
.sched-legend-title {
  font-size: 11px; font-weight: 700; color: var(--g400);
  text-transform: uppercase; letter-spacing: .06em;
  margin-right: 2px;
}

/* ─────────────────────────────────────────────
   PANEL DE NOTIFICACIONES DEL HORARIO
   ───────────────────────────────────────────── */
.sched-notif-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--g100);
}
.sched-notif-item:last-child { border-bottom: none; }
.sched-notif-item.leida { opacity: .6; }
.sched-notif-msg {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--g700);
  line-height: 1.4;
}
.sched-notif-msg i { font-size: 14px; color: var(--primary); margin-top: 1px; flex-shrink: 0; }
.sched-notif-item.leida .sched-notif-msg i { color: var(--g300); }
.sched-notif-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; color: var(--g400);
  padding-left: 21px;
}

/* ─────────────────────────────────────────────
   GENERADOR AUTOMÁTICO — modal
   ───────────────────────────────────────────── */
.sched-gen-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--g600);
  padding: 10px 12px;
  background: var(--g50);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  cursor: pointer;
}
.sched-gen-check input { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }

.sched-gen-row {
  display: grid;
  grid-template-columns: 1fr 84px 104px 96px 32px;
  gap: 8px;
  align-items: end;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--g100);
}
.sched-gen-row:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sched-gen-row label {
  display: block;
  font-size: 10px; font-weight: 700; color: var(--g400);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 4px;
}

.sched-gen-remove {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--g150);
  background: var(--g0);
  color: var(--bad);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--t);
}
.sched-gen-remove:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

.sched-gen-add {
  width: 100%;
  padding: 10px;
  border: 1.5px dashed var(--g200);
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--g500);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all var(--t);
  font-family: inherit;
}
.sched-gen-add:hover { border-color: var(--primary-mid); border-style: solid; color: var(--primary); background: var(--primary-light); }

.sched-gen-summary {
  display: none;
  font-size: 11.5px; font-weight: 500;
  color: var(--info-txt);
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--info-bg);
  border-radius: var(--r-lg);
  line-height: 1.5;
}
.sched-gen-summary.show { display: block; }
.sched-gen-summary.warn { background: var(--warn-bg); color: var(--warn-txt); }

/* ─────────────────────────────────────────────
   CARGA HORARIA — lista y modal de asignación
   ───────────────────────────────────────────── */
.ch-item-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--g100);
  border-radius: var(--r-lg);
  margin-bottom: 8px;
  background: var(--g0);
}
.ch-item-info { flex: 1; min-width: 0; }
.ch-item-nombre { font-size: 13.5px; font-weight: 600; color: var(--g700); }
.ch-item-horas {
  font-size: 11.5px; color: var(--g400);
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
}

.ch-row {
  display: grid;
  grid-template-columns: 1fr 104px 84px 120px 32px;
  gap: 8px;
  align-items: end;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--g100);
}
.ch-row:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ch-row label {
  display: block;
  font-size: 10px; font-weight: 700; color: var(--g400);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 4px;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — móvil
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .sched-table { min-width: 620px; font-size: 11.5px; }
  .sched-th-hora, .sched-td-hora { width: 60px; min-width: 60px; }
  .sched-block-asig { font-size: 11px; }
  .sched-block-sec, .sched-block-aula { font-size: 9.5px; }
}

@media (max-width: 560px) {
  .sched-gen-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "asig asig" "veces seccion" "aula remove";
  }
  .sched-gen-row > div:nth-child(1) { grid-area: asig; }
  .sched-gen-row > div:nth-child(2) { grid-area: veces; }
  .sched-gen-row > div:nth-child(3) { grid-area: seccion; }
  .sched-gen-row > div:nth-child(4) { grid-area: aula; }
  .sched-gen-row > .sched-gen-remove { grid-area: remove; justify-self: end; }

  .ch-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "asig asig" "seccion horas" "tipo remove";
  }
  .ch-row > div:nth-child(1) { grid-area: asig; }
  .ch-row > div:nth-child(2) { grid-area: seccion; }
  .ch-row > div:nth-child(3) { grid-area: horas; }
  .ch-row > div:nth-child(4) { grid-area: tipo; }
  .ch-row > .sched-gen-remove { grid-area: remove; justify-self: end; }

  .ch-item-row { flex-wrap: wrap; }
}