/* ============================================================
   Módulos: Cursos, Estudiantes, Informes y Agenda
   ============================================================ */

/* ---------- Barra de filtros ---------- */
.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px;
}
.filtro-select, .filtro-buscar {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: .5rem 1rem;
  box-shadow: var(--shadow-1); min-height: 42px;
}
.filtro-select select {
  border: none; background: none; box-shadow: none; padding: 0 18px 0 0; width: auto;
  font-weight: 700; font-size: .84rem; color: var(--text); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%23948CA6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}
.filtro-select select:focus { outline: none; }
.filtro-buscar { flex: 1; min-width: 200px; max-width: 340px; color: var(--text-muted); }
.filtro-buscar svg { width: 16px; height: 16px; flex-shrink: 0; }
.filtro-buscar input {
  border: none; background: none; box-shadow: none; padding: 0;
  font-size: .86rem; font-weight: 600;
}
.filtro-buscar input:focus { outline: none; box-shadow: none; }
.filtros .btn { margin-left: auto; }
.filtros-info { font-size: .8rem; color: var(--text-muted); font-weight: 700; }

/* ---------- Avatar de estudiante ---------- */
.avatar {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; color: #fff; flex-shrink: 0;
  width: 76px; height: 76px; font-size: 1.7rem;
  box-shadow: inset 0 -6px 14px rgba(0,0,0,.08);
}
.avatar-sm { width: 42px; height: 42px; font-size: 1rem; }
.avatar-lg { width: 118px; height: 118px; font-size: 2.6rem; }
.avatar-ring { padding: 4px; border-radius: 50%; background: var(--surface-2); display: inline-flex; }
.av-purple { background: linear-gradient(140deg,#9B84F0,#6C4BE0); }
.av-pink   { background: linear-gradient(140deg,#F79CC0,#E85C97); }
.av-blue   { background: linear-gradient(140deg,#86C4F5,#3E8FDD); }
.av-green  { background: linear-gradient(140deg,#8FD9AC,#43A96F); }
.av-yellow { background: linear-gradient(140deg,#F8D07A,#E0A126); }
.av-coral  { background: linear-gradient(140deg,#F9A98D,#E86A44); }
.av-teal   { background: linear-gradient(140deg,#7ED2CD,#2F9E98); }

/* ---------- Grilla de estudiantes ---------- */
.alumnos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px;
}
.alumno-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 16px 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.alumno-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.alumno-card h3 { font-size: 1.02rem; margin: 10px 0 0; color: var(--text); }
.alumno-card .meta { font-size: .78rem; color: var(--text-soft); font-weight: 600; }
.alumno-card .curso { font-size: .78rem; color: var(--purple); font-weight: 800; }
.alumno-card .pill {
  margin-top: 10px; width: 100%; border-radius: var(--radius-pill);
  padding: .38rem .7rem; font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.alumno-card .pill svg { width: 13px; height: 13px; }
.pill-purple { background: var(--purple-soft); color: var(--purple-dark); }
.pill-pink   { background: var(--pink-soft);   color: var(--pink-ink); }
.pill-blue   { background: var(--blue-soft);   color: var(--blue-ink); }
.pill-green  { background: var(--green-soft);  color: var(--green-ink); }
.pill-yellow { background: var(--yellow-soft); color: var(--yellow-ink); }
.pill-coral  { background: var(--coral-soft);  color: var(--coral-ink); }
.pill-teal   { background: var(--teal-soft);   color: #1F7A75; }

/* ---------- Modal grande (ficha / informe) ---------- */
.modal-xl {
  width: min(1000px, 96vw); max-height: 92vh; background: var(--surface);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-hover);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-xl-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.modal-xl-head h2 { font-size: 1.25rem; color: var(--text); }
.modal-close {
  background: var(--surface-2); border: 1px solid var(--line); width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.modal-close svg { width: 15px; height: 15px; }
.modal-close:hover { background: var(--pink-soft); color: var(--pink-ink); }
.modal-xl-body { display: grid; grid-template-columns: 264px 1fr; flex: 1; min-height: 0; }
.modal-xl-side {
  padding: 22px 20px; border-right: 1px solid var(--line);
  background: var(--surface-2); overflow-y: auto;
}
.modal-xl-main { padding: 22px 26px; overflow-y: auto; }
.modal-xl-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 24px; border-top: 1px solid var(--line); flex-shrink: 0; background: var(--surface);
}
.modal-xl-foot .izq { margin-right: auto; font-size: .78rem; color: var(--text-muted); font-weight: 700; }

/* ---------- Ficha del estudiante ---------- */
.ficha-side { text-align: center; }
.ficha-side h3 { font-size: 1.2rem; margin: 12px 0 2px; }
.ficha-side .sub { font-size: .82rem; color: var(--text-soft); font-weight: 600; }
.ficha-estado {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  background: var(--green-soft); color: var(--green-ink);
  border-radius: var(--radius-pill); padding: .35rem .8rem; font-size: .74rem; font-weight: 800;
}
.ficha-estado svg { width: 13px; height: 13px; }
.ficha-tabs { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; text-align: left; }
.ficha-tab {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: none; background: none; border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 700; font-size: .84rem; color: var(--text-soft);
  cursor: pointer; width: 100%; text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ficha-tab svg { width: 17px; height: 17px; color: var(--purple); flex-shrink: 0; }
.ficha-tab:hover { background: var(--purple-tint); }
.ficha-tab.active { background: var(--purple-soft); color: var(--purple-dark); }

.ficha-frase {
  background: linear-gradient(120deg, #FDE7F1, #EDE6FD);
  border-radius: var(--radius-lg); padding: 16px 20px; text-align: center; margin-bottom: 20px;
}
.ficha-frase p { font-family: var(--font-hand); font-size: 1.35rem; color: var(--pink-ink); font-weight: 700; margin: 0; }

.datos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dato-box {
  background: var(--blue-soft); border-radius: var(--radius-md); padding: 12px 14px; text-align: center;
}
.dato-box .k { font-size: .7rem; color: var(--text-muted); font-weight: 700; display: block; }
.dato-box .v { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); display: block; margin-top: 2px; }
.dato-box.warm { background: var(--yellow-soft); }
.dato-box.soft { background: var(--purple-soft); }

.bloque-titulo { font-family: var(--font-head); font-size: 1.05rem; margin: 0 0 10px; color: var(--text); }
.bloque-texto {
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px;
  font-size: .88rem; line-height: 1.65; color: var(--text-soft); background: var(--surface);
  white-space: pre-wrap;
}
.bloque + .bloque { margin-top: 20px; }

.lista-registros { display: flex; flex-direction: column; gap: 9px; }
.registro-row {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px 14px;
  font-size: .86rem; line-height: 1.5;
}
.registro-fecha { font-weight: 800; color: var(--text-muted); font-size: .76rem; white-space: nowrap; min-width: 62px; }

.area-chip {
  display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-pill);
  padding: .32rem .8rem; font-size: .74rem; font-weight: 800; color: #fff;
}
.area-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ---------- Informes ---------- */
.informes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.informe-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.informe-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.informe-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.informe-card-head h3 { font-size: 1rem; margin: 0; }
.informe-card-head .sub { font-size: .76rem; color: var(--text-muted); font-weight: 700; }
.informe-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mini-chip {
  border-radius: var(--radius-pill); padding: .28rem .7rem;
  font-size: .7rem; font-weight: 800; background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--line);
}
.mini-chip.ok { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.mini-chip.warn { background: var(--yellow-soft); color: var(--yellow-ink); border-color: transparent; }
.progreso { height: 6px; border-radius: 99px; background: var(--surface-sunk); overflow: hidden; margin-top: 12px; }
.progreso i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--purple), var(--pink)); }

.editor-area { margin-bottom: 20px; }
.editor-area-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.editor-area-head h4 { font-size: .95rem; margin: 0; }
.editor-area-head .cuenta { margin-left: auto; font-size: .72rem; color: var(--text-muted); font-weight: 700; }
.editor-area textarea {
  min-height: 132px; resize: vertical; font-size: .87rem; line-height: 1.6;
  font-family: var(--font-body); border-radius: var(--radius-md);
}

/* ---------- Agenda semanal ---------- */
.agenda-tabla-wrap { overflow-x: auto; border-radius: var(--radius-xl); }
.agenda-tabla {
  width: 100%; border-collapse: separate; border-spacing: 8px; min-width: 760px;
}
.agenda-tabla th {
  font-family: var(--font-head); font-size: .86rem; font-weight: 700; color: var(--text-soft);
  padding: 8px; text-align: center;
}
.agenda-tabla th:first-child { width: 96px; }
.agenda-tabla td {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 10px; vertical-align: middle; min-height: 54px;
}
.agenda-tabla td.hora {
  background: transparent; border: none; font-family: var(--font-head); font-weight: 700;
  font-size: .8rem; color: var(--text-muted); text-align: right; padding-right: 12px; white-space: nowrap;
}
.agenda-tabla td.vacio { background: var(--surface-2); border-style: dashed; }
.agenda-tabla td.full { text-align: center; }
.agenda-item { display: flex; align-items: center; gap: 9px; font-size: .83rem; font-weight: 700; }
.agenda-tabla td.full .agenda-item { justify-content: center; }
.agenda-item .ico {
  width: 25px; height: 25px; min-width: 25px; border-radius: 8px; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.agenda-item .ico svg { width: 14px; height: 14px; }
.bg-purple { background: var(--purple); } .bg-pink { background: var(--pink); }
.bg-blue { background: var(--blue); }     .bg-green { background: var(--green); }
.bg-yellow { background: var(--yellow); } .bg-coral { background: var(--coral); }
.bg-teal { background: var(--teal); }

/* ---------- Estados vacíos y carga ---------- */
.vacio {
  text-align: center; padding: 46px 24px; color: var(--text-muted);
  font-weight: 600; font-size: .9rem;
}
.vacio strong { display: block; font-family: var(--font-head); font-size: 1.1rem; color: var(--text); margin-bottom: 6px; }
.cargando { display: grid; gap: 12px; }
.cargando .skeleton { height: 78px; }

@media (max-width: 860px) {
  .modal-xl-body { grid-template-columns: 1fr; }
  .modal-xl-side { border-right: none; border-bottom: 1px solid var(--line); }
  .ficha-tabs { flex-direction: row; overflow-x: auto; gap: 6px; }
  .ficha-tab { white-space: nowrap; }
  .filtros .btn { margin-left: 0; width: 100%; }
}

/* ---------- Alternar leer / editar ---------- */
.modo-switch {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 3px; gap: 2px;
}
.modo-switch button {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 800; font-size: .78rem;
  color: var(--text-muted); padding: .35rem .9rem; border-radius: var(--radius-pill);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.modo-switch button:hover { color: var(--purple-dark); }
.modo-switch button.activo { background: var(--purple); color: #fff; }

/* ---------- Informe en modo lectura ---------- */
.lectura { max-width: 66ch; }
.lectura-enc {
  border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 20px;
  font-size: .82rem; color: var(--text-muted); font-weight: 700; line-height: 1.7;
}
.lectura-enc strong { color: var(--text); }
.lectura h3 {
  font-family: var(--font-head); font-size: 1.02rem; margin: 24px 0 7px;
  display: flex; align-items: center; gap: 9px; color: var(--text);
}
.lectura h3:first-of-type { margin-top: 0; }
.lectura p {
  font-size: .93rem; line-height: 1.75; color: var(--text-soft); margin-bottom: 10px;
  white-space: pre-wrap;
}
.lectura .sin-texto { color: var(--text-muted); font-style: italic; }
.lectura-firma {
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 20px;
  font-size: .8rem; color: var(--text-muted); font-weight: 700;
}

/* ---------- Grabador de audio ---------- */
.grabador { text-align: center; padding: 6px 0 4px; }
.grabador-boton {
  width: 84px; height: 84px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #F2699F, #D9457F); color: #fff;
  font-size: 1.9rem; line-height: 1;
  box-shadow: 0 8px 22px rgba(217,69,127,.32);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.grabador-boton:hover { transform: scale(1.05); }
.grabador-boton.grabando {
  background: linear-gradient(135deg, #E34948, #B32E2D);
  animation: latido 1.4s ease-in-out infinite;
}
@keyframes latido {
  0%,100% { box-shadow: 0 8px 22px rgba(179,46,45,.35); }
  50%     { box-shadow: 0 8px 34px rgba(179,46,45,.65); }
}
.grabador-tiempo {
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 700;
  color: var(--text); margin-top: 12px;
}
.grabador-ayuda { font-size: .82rem; color: var(--text-muted); font-weight: 600; margin-top: 4px; }
.grabador audio { width: 100%; margin-top: 14px; }

.registro-audio { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.registro-audio audio { width: 100%; height: 36px; }
.registro-audio .cabecera { display: flex; align-items: center; gap: 8px; }
.registro-audio .cabecera b { font-size: .86rem; }
.registro-borrar {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: .74rem; font-weight: 800;
}
.registro-borrar:hover { color: var(--pink-ink); }
.tag-audio {
  background: var(--pink-soft); color: var(--pink-ink); border-radius: var(--radius-pill);
  padding: .18rem .6rem; font-size: .66rem; font-weight: 800;
}

/* ---------- Visor de archivos ---------- */
.visor-cuerpo { flex: 1; min-height: 0; overflow: auto; background: var(--surface-2); }
.visor-cuerpo iframe { width: 100%; height: 74vh; border: none; display: block; background: #fff; }
.visor-cuerpo video, .visor-cuerpo img { display: block; max-width: 100%; margin: 20px auto; }
.visor-doc {
  background: #fff; margin: 22px auto; padding: 40px 46px; max-width: 860px;
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  font-size: .93rem; line-height: 1.7; color: var(--text);
}
.visor-doc p { margin-bottom: 11px; }
.visor-doc h2, .visor-doc h3, .visor-doc h4 { font-family: var(--font-head); margin: 22px 0 8px; }
.visor-doc img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.visor-doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .86rem; }
.visor-doc td, .visor-doc th { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.visor-doc td p:last-child { margin-bottom: 0; }
.visor-doc .slide { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; }
.visor-doc .slide h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: 0; }
.visor-msg { padding: 60px 24px; text-align: center; color: var(--text-muted); font-weight: 600; }