/* ===========================
   Notas de Reservas – styles
   =========================== */

:root {
  --bg:            var(--app-bg, #0f1216);
  --surface:       var(--card-bg, #12161c);
  --surface-2:     var(--card-alt, #161b22);
  --border:        var(--card-border, #222834);
  --muted:         var(--text-muted, #8b93a7);
  --text:          var(--text-color, #e6e8ef);
  --primary:       var(--brand, #5b8cff);
  --primary-700:   color-mix(in oklab, var(--primary) 80%, black);
  --accent:        var(--brand-2, #22d3ee);
  --success:       #22c55e;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --ring:          color-mix(in oklab, var(--primary) 30%, transparent);
  --radius-lg:     16px;
  --radius-md:     12px;
  --radius-sm:     10px;
  --shadow-1:      0 6px 30px rgba(0,0,0,.24);
  --shadow-2:      0 10px 40px rgba(0,0,0,.28);
  --gap:           16px;
  --gap-lg:        24px;
  --gap-xl:        32px;
  --trans:         180ms cubic-bezier(.2,.6,.2,1);
}

.notes-page {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* ----- Page header ----- */
.section { padding: clamp(24px, 5vw, 40px) 0; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header {
  margin-bottom: var(--gap-xl);
}

.page-header .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 18%, transparent), transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--border));
  color: var(--primary);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
}

.page-title {
  margin: 10px 0 6px;
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.2;
  font-weight: 800;
  color: var(--text);
}

.page-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
}

/* ----- Toolbar ----- */
.notes-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-1);
  position: sticky;
  top: 12px;
  z-index: 5;
  backdrop-filter: blur(6px);
}

.notes-toolbar .toolbar-left,
.notes-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
}

/* Search */
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  min-width: min(460px, 100%);
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}

.search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 6px var(--ring);
  transform: translateY(-1px);
}

.search-box i { color: var(--muted); font-size: 14px; }

.search-input {
  background: transparent;
  border: 0;
  outline: none;
  width: 100%;
  color: var(--text);
  font-size: 14px;
}

.search-input::placeholder { color: color-mix(in oklab, var(--muted) 80%, var(--text)); }

/* Selects */
.select-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  min-width: 220px;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}

.select-box i { color: var(--muted); font-size: 14px; }

.form-select {
  appearance: none;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: #000;
  font-size: 14px;
  width: 100%;
  padding: 8px 10px;
  outline: none;
}

.form-select option {
  background: #fff;
  color: #000;
}

.select-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 6px var(--ring);
  transform: translateY(-1px);
}

/* Counter */
.counter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34,197,94,.08), rgba(34,197,94,.02));
  border: 1px solid color-mix(in oklab, var(--success) 28%, var(--border));
  color: #9be8b3;
  font-weight: 700;
  font-size: 13px;
}

/* ----- Grid ----- */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  margin-top: var(--gap-lg);
}

@media (max-width: 1280px) {
  .notes-grid { grid-template-columns: repeat(9, 1fr); }
}
@media (max-width: 920px) {
  .notes-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 640px) {
  .notes-grid { grid-template-columns: repeat(1, 1fr); }
}

/* ----- Cards ----- */
.note-card {
  grid-column: span 4;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-1);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  position: relative;
  overflow: clip;
}

@media (max-width: 920px) { .note-card { grid-column: span 6; } }
@media (max-width: 640px) { .note-card { grid-column: span 1; } }

.note-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px 160px at 0% 0%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 65%);
  opacity: .0;
  transition: opacity var(--trans);
}

.note-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--primary) 26%, var(--border));
  box-shadow: var(--shadow-2);
}

.note-card:hover::after { opacity: .9; }

/* Header */
.note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.meta { display: flex; gap: 8px; flex-wrap: wrap; }

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: var(--text);
  background: linear-gradient(180deg, rgba(91,140,255,.14), rgba(91,140,255,.05));
  border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--border));
  font-weight: 600;
}

.meta-chip i { color: var(--primary); }

.participants {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}

.pill i { color: var(--muted); }

.arrow-sep {
  color: var(--muted);
  font-size: 14px;
  opacity: .8;
}

/* Content */
.note-content {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.6;
  padding: 10px 0 6px;
}

/* Footer */
.note-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px dashed color-mix(in oklab, var(--border) 80%, transparent);
  padding-top: 10px;
  margin-top: 8px;
}

.hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

/* Empty state */
.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  box-shadow: var(--shadow-1);
  margin-top: var(--gap-lg);
}

.empty-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  margin: 0 auto 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
}

.empty-icon i { font-size: 22px; color: var(--primary); }

.empty-state h3 {
  margin: 8px 0 6px;
  font-size: 18px;
  color: var(--text);
}

.empty-state p { margin: 0; }

/* Focus styles for a11y */
.search-input:focus,
.form-select:focus {
  outline: none;
}

.note-card:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 6px var(--ring), var(--shadow-2);
}

/* Small helpers (only for this page) */
.notes-page .fa-solid,
.notes-page .fa-regular {
  line-height: 1;
}

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Light mode support */
.light .notes-page,
:root.light .notes-page {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --border: #e6e8f0;
  --text: #0f172a;
  --muted: #5b647a;
  --shadow-1: 0 6px 24px rgba(15,23,42,.06);
  --shadow-2: 0 12px 36px rgba(15,23,42,.08);
}

.light .counter-pill {
  color: #176135;
  background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.04));
  border-color: color-mix(in oklab, var(--success) 22%, var(--border));
}

/* --- modal alumnos --- */
.no-scroll { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}

.modal-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 92vw);
  max-height: 80vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}

.modal-header, .modal-footer {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-footer {
  border-top: 1px solid var(--border);
  border-bottom: none;
}
.modal-body {
  padding: 12px 16px;
  max-height: 60vh;
  overflow: auto;
}
.close-btn {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--text);
  cursor: pointer;
}
.btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

.students-list .student-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.students-list .student-row:last-child { border-bottom: 0; }
.students-list .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: white;
  font-weight: 700;
}
.students-list .info .name { font-weight: 600; }
.students-list .info .email { color: var(--muted); font-size: 0.9rem; }
.students-list .empty, .students-list .error { color: var(--muted); }

/* chip clicable */
.pill-link {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
}
.pill-link:hover { outline: 2px solid var(--ring); }