:root {
  color-scheme: light;
  --ink: #211a37;
  --ink-soft: #625b70;
  --paper: #fffdf9;
  --background: #f5f0ff;
  --violet: #6546df;
  --violet-dark: #4426a4;
  --lavender: #eee8ff;
  --gold: #ffc857;
  --mint: #2f9f79;
  --mint-soft: #e2f8f0;
  --red: #b4233b;
  --red-soft: #fff0f3;
  --line: #ddd5ea;
  --shadow: 0 24px 70px rgba(47, 31, 77, .13);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(239, 93, 168, .10), transparent 26rem),
    radial-gradient(circle at 93% 12%, rgba(101, 70, 223, .14), transparent 32rem),
    var(--background);
  font: 16px/1.55 ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: -6rem;
  left: 1rem;
  z-index: 100;
  padding: .8rem 1rem;
  border-radius: 12px;
  color: white;
  background: var(--ink);
}
.skip-link:focus { top: 1rem; }

.account-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding: max(12px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 12px max(22px, env(safe-area-inset-left));
  background: rgba(255, 253, 249, .88);
  border-bottom: 1px solid rgba(221, 213, 234, .85);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.account-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: 0 0 auto;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 750;
}
.account-brand img { border-radius: 13px; box-shadow: 0 7px 20px rgba(57, 28, 89, .18); }
.account-brand strong { color: var(--violet); }
.account-nav { display: flex; align-items: center; gap: .25rem; overflow-x: auto; }
.account-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .65rem .85rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 750;
}
.account-nav a:hover { background: var(--lavender); }

main {
  width: min(1180px, calc(100% - 32px));
  min-height: calc(100vh - 74px);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) 0 max(5rem, env(safe-area-inset-bottom));
}

.loading-view { display: grid; place-items: center; align-content: center; min-height: 55vh; color: var(--ink-soft); }
.loading-mark { color: var(--gold); font-size: 4rem; filter: drop-shadow(0 8px 18px rgba(101, 70, 223, .22)); }

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  min-height: 68vh;
}
.auth-intro h1, .page-title h1 {
  margin: .45rem 0 1rem;
  max-width: 760px;
  font-size: clamp(2.7rem, 7vw, 5.7rem);
  line-height: .96;
  letter-spacing: -.06em;
}
.auth-intro p { max-width: 560px; color: var(--ink-soft); font-size: 1.15rem; }
.eyebrow {
  color: var(--violet);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.auth-card, .surface {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.auth-card { padding: clamp(1.5rem, 5vw, 2.7rem); }
.auth-card h2 { margin: 0 0 .35rem; font-size: 1.75rem; }
.auth-card > p { margin: 0 0 1.5rem; color: var(--ink-soft); }

.field { margin: 0 0 1rem; }
.field label { display: block; margin-bottom: .4rem; font-weight: 800; }
.field-hint { display: block; margin-top: .35rem; color: var(--ink-soft); font-size: .875rem; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: .8rem .9rem;
  color: var(--ink);
  background: white;
  border: 2px solid var(--line);
  border-radius: 14px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(101, 70, 223, .11); outline: none; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 5rem; }
.password-toggle {
  position: absolute;
  right: .4rem;
  top: .25rem;
  min-width: 64px;
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  color: var(--violet-dark);
  background: transparent;
  font-weight: 800;
}
.check-row { display: flex; align-items: flex-start; gap: .65rem; margin: .9rem 0; }
.check-row input { width: 28px; height: 28px; margin: .05rem 0 0; accent-color: var(--violet); flex: none; }
.check-row { min-height: 44px; }
.check-row a { display: inline-block; padding: .45rem 0; font-weight: 700; }
.check-row label { flex: 1; }

.button, button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 50px;
  padding: .75rem 1.1rem;
  border: 0;
  border-radius: 14px;
  color: white;
  background: var(--ink);
  box-shadow: 0 10px 24px rgba(33, 26, 55, .16);
  text-decoration: none;
  cursor: pointer;
  font-weight: 850;
}
.button:hover { background: var(--violet-dark); }
.button:disabled { opacity: .52; cursor: not-allowed; }
.button.secondary { color: var(--violet-dark); background: var(--lavender); box-shadow: none; }
.button.ghost { color: var(--ink); background: transparent; border: 1px solid var(--line); box-shadow: none; }
.button.danger { color: var(--red); background: var(--red-soft); box-shadow: none; }
.button.full { width: 100%; }
.text-link { color: var(--violet-dark); font-weight: 800; }
.auth-footer { margin-top: 1.2rem; text-align: center; color: var(--ink-soft); }
.form-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }

.notice {
  margin: 1rem 0;
  padding: .9rem 1rem;
  border-radius: 14px;
  color: #5f4700;
  background: #fff5cf;
  border: 1px solid #efd77c;
}
.notice.error { color: #8f2236; background: var(--red-soft); border-color: #f3b7c1; }
.notice.success { color: #176b52; background: var(--mint-soft); border-color: #a5dfcb; }
.notice[hidden] { display: none; }

.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.sidebar {
  position: sticky;
  top: 96px;
  padding: 1rem;
  background: rgba(255, 253, 249, .82);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.sidebar-user { padding: .65rem .7rem 1rem; border-bottom: 1px solid var(--line); }
.sidebar-user strong, .sidebar-user span { display: block; }
.sidebar-user span { color: var(--ink-soft); font-size: .84rem; overflow-wrap: anywhere; }
.sidebar nav { display: grid; gap: .25rem; margin-top: .8rem; }
.sidebar button, .sidebar a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: .7rem .8rem;
  border: 0;
  border-radius: 13px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-weight: 750;
}
.sidebar button:hover, .sidebar a:hover, .sidebar [aria-current="page"] { background: var(--lavender); }
.dashboard-content { min-width: 0; }
.page-title { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-title h1 { margin: .25rem 0 0; font-size: clamp(2.3rem, 5vw, 4.3rem); }
.page-title p { margin: .45rem 0 0; color: var(--ink-soft); }

.hero-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.7rem, 5vw, 3rem);
  color: white;
  background: linear-gradient(135deg, #201631, #4c2f91 58%, #7954e8);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.hero-panel::after { content: "★"; position: absolute; right: 6%; top: 50%; translate: 0 -50%; color: rgba(255, 200, 87, .35); font-size: clamp(7rem, 18vw, 13rem); }
.hero-panel > * { position: relative; z-index: 1; }
.hero-panel h1 { max-width: 690px; margin: .35rem 0 .7rem; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.hero-panel p { max-width: 650px; color: #e8e0fa; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-panel .button { color: var(--ink); background: var(--gold); }
.hero-panel .button.secondary { color: var(--violet-dark); background: white; }

.section { margin-top: 1.5rem; }
.surface { padding: clamp(1.25rem, 4vw, 2rem); }
.surface h2 { margin: 0 0 .35rem; font-size: 1.45rem; }
.surface > p { margin-top: 0; color: var(--ink-soft); }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.learner-card, .course-card, .metric-card {
  padding: 1.2rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 19px;
}
.learner-head { display: flex; align-items: center; gap: .8rem; }
.avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 17px; background: var(--lavender); font-size: 1.6rem; }
.learner-head h3, .course-card h3 { margin: 0; }
.learner-head p, .course-card p { margin: .2rem 0 0; color: var(--ink-soft); }
.learner-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.learner-actions .button { min-height: 44px; padding: .55rem .75rem; font-size: .9rem; }

.activation-code {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 17px;
  color: white;
  background: var(--ink);
  text-align: center;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 900;
  letter-spacing: .1em;
  user-select: all;
}

/* «Tu información y tu plan» vive dentro de «Mi panel», plegada: no tapa lo que la gente viene a hacer.
   Ojo: `aurora.css` convierte `.hero-panel` en una tarjeta CLARA, así que esto va en oscuro sobre claro;
   un resumen en blanco quedaría invisible. Se usa `html body` para ganarle a la especificidad de aurora. */
.hero-account { margin-top: 1.3rem; }
html body .hero-account > summary { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .95rem; border-radius: 999px; color: var(--violet-dark); background: var(--lavender); cursor: pointer; font-weight: 800; }
.hero-account > summary::-webkit-details-marker { display: none; }
.hero-account > summary::before { content: "▸"; margin-right: .5rem; }
.hero-account[open] > summary::before { content: "▾"; }
html body .hero-account-body { margin-top: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 20px; }

/* Campo y botón en la misma línea (editar el nombre de la cuenta); apilados en teléfono. */
.form-inline { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; margin: 1rem 0 .3rem; }
.form-inline .field { flex: 1 1 260px; margin: 0; }

/* `.metric-grid` lo usaban la pestaña de IA y el expediente sin estar definido: las tarjetas salían apiladas a lo ancho. */
.metrics, .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.metric-grid { margin: 1rem 0 1.5rem; }
.metric-card strong { display: block; font-size: 2rem; }
.metric-card span { color: var(--ink-soft); }

.table-wrap { overflow: auto; margin-top: 1rem; border: 1px solid var(--line); border-radius: 16px; background: white; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--ink-soft); background: #faf8fc; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
td small { color: var(--ink-soft); }
.status-chip { display: inline-flex; padding: .25rem .55rem; border-radius: 999px; color: #176b52; background: var(--mint-soft); font-size: .875rem; font-weight: 850; }
.status-chip.muted { color: var(--ink-soft); background: #f1edf5; }
.admin-tabs { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-tabs button { min-height: 44px; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: white; cursor: pointer; font-weight: 800; }
.admin-tabs button[aria-selected="true"] { color: white; background: var(--ink); border-color: var(--ink); }

.analytics-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(170px, 1fr) minmax(170px, 1fr);
  gap: .8rem;
  align-items: end;
  margin-bottom: 1rem;
}
.analytics-toolbar .field { margin: 0; }
.analytics-layout {
  display: grid;
  grid-template-columns: minmax(285px, .82fr) minmax(0, 1.35fr);
  gap: 1rem;
  min-height: 540px;
}
.account-list-panel, .account-detail {
  min-width: 0;
  overflow: hidden;
  background: #faf8fc;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.account-list {
  display: grid;
  gap: .55rem;
  max-height: 72vh;
  padding: .7rem;
  overflow: auto;
}
.account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem .75rem;
  width: 100%;
  min-height: 92px;
  padding: .85rem;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
}
.account-row:hover { border-color: #b8a9dd; box-shadow: 0 8px 22px rgba(47, 31, 77, .08); }
.account-row[aria-pressed="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(101, 70, 223, .12); }
.account-row-main, .account-row-main strong, .account-row-main small { display: block; min-width: 0; }
.account-row-main strong, .account-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-row-main small, .account-last { color: var(--ink-soft); }
.account-row-meta { display: grid; justify-items: end; font-size: .8rem; }
.account-row-meta b { color: var(--violet-dark); font-size: 1rem; }
.mini-progress { grid-column: 1 / -1; height: 7px; overflow: hidden; background: #e8e2ef; border-radius: 99px; }
.mini-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), #e95ba4); border-radius: inherit; }
.account-last { grid-column: 1 / -1; font-size: .76rem; }
.account-detail { padding: clamp(1rem, 3vw, 1.6rem); background: white; }
.empty-detail { display: grid; place-items: center; align-content: center; min-height: 460px; padding: 2rem; color: var(--ink-soft); text-align: center; }
.empty-detail span { color: var(--violet); font-size: 3rem; }
.empty-detail h2 { margin: .5rem 0 .1rem; color: var(--ink); }
.empty-detail p, .detail-loading { color: var(--ink-soft); }
.account-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.account-detail-head h2 { margin: .25rem 0 0; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.account-detail-head p { margin: .15rem 0 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.detail-status { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .4rem; }
.detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1.2rem 0; }
.detail-facts > div { padding: .85rem; background: var(--background); border-radius: 14px; }
.detail-facts span, .detail-facts strong { display: block; }
.detail-facts span { color: var(--ink-soft); font-size: .78rem; }
.detail-facts strong { margin-top: .2rem; font-size: .92rem; }
.detail-learners { display: grid; gap: .9rem; }
.learner-progress-card { padding: 1rem; border: 1px solid var(--line); border-radius: 18px; }
.learner-progress-head { display: flex; align-items: center; gap: .75rem; }
.learner-progress-head > div { min-width: 0; flex: 1; }
.learner-progress-head h3, .learner-progress-head p { margin: 0; }
.learner-progress-head p { color: var(--ink-soft); font-size: .82rem; }
.device-count { padding: .35rem .55rem; color: var(--violet-dark); background: var(--lavender); border-radius: 999px; font-size: .75rem; font-weight: 800; }
.course-progress-list { display: grid; gap: .7rem; margin-top: .9rem; }
.course-progress-row { padding: .85rem; background: #faf8fc; border-radius: 15px; }
.course-progress-title { display: flex; justify-content: space-between; gap: .7rem; }
.course-progress-title strong, .course-progress-title span { display: block; }
.course-progress-title span { color: var(--ink-soft); font-size: .78rem; }
.course-progress-title b { color: var(--violet-dark); }
.course-progress-row .progress-track { margin-top: .65rem; }
.progress-stats { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .6rem; color: var(--ink-soft); font-size: .78rem; }

.invitation-layout { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); gap: clamp(1.2rem, 4vw, 2.5rem); }
.invitation-layout h2 { margin: .25rem 0; }
.invitation-layout > section:first-child { padding: 1rem; background: var(--background); border-radius: 18px; }
.email-delivery-note { display: flex; align-items: flex-start; gap: .65rem; margin: 1rem 0; padding: .85rem; color: #176b52; background: var(--mint-soft); border: 1px solid #a5dfcb; border-radius: 14px; }
.email-delivery-note > span:first-child { font-size: 1.25rem; line-height: 1.35; }
.section-heading-inline { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.invitation-list { display: grid; gap: .7rem; margin-top: .9rem; }
.invitation-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem; background: white; border: 1px solid var(--line); border-radius: 16px; }
.invitation-row strong, .invitation-row p { display: block; margin: 0; overflow-wrap: anywhere; }
.invitation-row p { color: var(--ink-soft); font-size: .8rem; }
.invitation-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .4rem; }
.invitation-actions .button { min-height: 44px; padding: .5rem .7rem; font-size: .82rem; }

.student-shell { width: min(900px, 100%); margin: 0 auto; }
.student-greeting { text-align: center; margin-bottom: 1.5rem; }
.student-greeting .avatar { margin: 0 auto .8rem; width: 78px; height: 78px; font-size: 2.5rem; border-radius: 24px; }
.student-greeting h1 { margin: 0; font-size: clamp(2.7rem, 8vw, 5rem); line-height: 1; letter-spacing: -.05em; }
.student-greeting p { color: var(--ink-soft); font-size: 1.08rem; }
.student-course { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.progress-track { height: 12px; margin-top: .8rem; overflow: hidden; border-radius: 999px; background: #e8e2ef; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), #e95ba4); }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 100;
  max-width: min(520px, calc(100% - 30px));
  padding: .8rem 1rem;
  color: white;
  background: var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow);
  translate: -50% 120px;
  opacity: 0;
  transition: translate .22s ease, opacity .22s ease;
}
.toast.show { translate: -50% 0; opacity: 1; }

.legal-page {
  width: min(760px, calc(100% - 32px));
  margin: clamp(2rem, 7vw, 5rem) auto;
  padding: clamp(1.4rem, 5vw, 3.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.legal-page h1 { margin: .45rem 0 0; font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 1; letter-spacing: -.05em; }
.legal-page section { padding-top: 1rem; }
.legal-page section + section { margin-top: 1rem; border-top: 1px solid var(--line); }
.legal-page h2 { margin-bottom: .25rem; }
.legal-page p { color: var(--ink-soft); }
.legal-updated { margin-top: .75rem; }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; max-width: 680px; margin: auto; }
  .auth-intro { text-align: center; }
  .auth-intro p { margin-inline: auto; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; overflow-x: auto; }
  .sidebar-user { display: none; }
  .sidebar nav { display: flex; width: max-content; margin: 0; }
  .sidebar button, .sidebar a { width: auto; white-space: nowrap; }
  .metrics, .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-layout, .invitation-layout { grid-template-columns: 1fr; }
  .account-list { max-height: 390px; }
}

@media (max-width: 620px) {
  .account-header { align-items: flex-start; flex-direction: column; }
  .account-nav { width: 100%; }
  main { width: min(100% - 24px, 560px); padding-top: 2rem; }
  .auth-intro h1 { font-size: clamp(2.7rem, 15vw, 4.4rem); }
  .card-grid, .metrics, .metric-grid { grid-template-columns: 1fr; }
  .page-title { display: block; }
  .page-title > .button { width: 100%; margin-top: 1rem; }
  .student-course { grid-template-columns: 1fr; }
  .student-course .button { width: 100%; }
  .analytics-toolbar, .detail-facts { grid-template-columns: 1fr; }
  .account-detail-head, .invitation-row { align-items: stretch; flex-direction: column; }
  .detail-status, .invitation-actions { justify-content: flex-start; }
  .learner-progress-head { align-items: flex-start; flex-wrap: wrap; }
}

@media (prefers-reduced-transparency: reduce) {
  .account-header, .sidebar { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (prefers-contrast: more) {
  :root { --line: #877f94; --ink-soft: #463f50; }
  .auth-card, .surface, .learner-card, .course-card, .metric-card { border-width: 2px; }
}

/* Sistema visual 2026: claridad inspirada en Apple, con calidez infantil. */
:root {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --paper: #ffffff;
  --background: #f5f5f7;
  --violet: #6d4aff;
  --violet-dark: #4b2fc7;
  --lavender: #eee9ff;
  --gold: #ffbd2e;
  --mint: #179b79;
  --mint-soft: #dcf8ef;
  --red: #c9344d;
  --red-soft: #fff0f3;
  --line: rgba(29, 29, 31, .10);
  --shadow: 0 22px 60px rgba(29, 29, 31, .09);
  --radius: 30px;
}

html, body { background: var(--background); }
body {
  background:
    radial-gradient(circle at 6% 8%, rgba(109,74,255,.09), transparent 28rem),
    radial-gradient(circle at 96% 10%, rgba(10,132,255,.10), transparent 31rem),
    var(--background);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  line-height: 1.48;
  text-rendering: optimizeLegibility;
}
.account-header {
  min-height: 64px;
  padding: max(10px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 10px max(22px, env(safe-area-inset-left));
  background: rgba(245,245,247,.78);
  border-bottom-color: rgba(0,0,0,.06);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
}
.account-brand { font-size: 1.02rem; font-weight: 650; letter-spacing: -.015em; }
.account-brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 5px 14px rgba(67,40,128,.16); }
.account-brand strong { color: var(--violet-dark); }
.account-nav a { font-size: .9rem; font-weight: 650; }
.account-nav a:hover { background: rgba(0,0,0,.055); }
main { width: min(1200px, calc(100% - 40px)); padding-top: clamp(2.5rem, 6vw, 5.5rem); }
.auth-layout { gap: clamp(2.5rem, 7vw, 7rem); }
.auth-intro h1, .page-title h1 { font-size: clamp(3.1rem, 7vw, 6.5rem); line-height: .91; letter-spacing: -.075em; }
.auth-intro h1, .page-title h1, .hero-panel h1, .student-greeting h1 { text-wrap: balance; }
.auth-intro p { color: var(--ink-soft); font-size: 1.2rem; }
.eyebrow { color: var(--violet-dark); letter-spacing: .12em; }
.auth-card, .surface, .learner-card, .course-card, .metric-card, .account-list-panel, .account-detail {
  background: rgba(255,255,255,.94);
  border-color: rgba(29,29,31,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.auth-card { padding: clamp(1.6rem, 5vw, 3rem); }
.auth-card h2 { font-size: 2rem; letter-spacing: -.04em; }
.field label { font-size: .91rem; font-weight: 700; }
.field input, .field select, .field textarea {
  min-height: 54px;
  padding: .85rem 1rem;
  color: var(--ink);
  background: #f5f5f7;
  border: 2px solid transparent;
  border-radius: 15px;
}
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; border-color: #0a84ff; box-shadow: 0 0 0 5px rgba(10,132,255,.12); }
.button {
  min-height: 48px;
  padding: .75rem 1.08rem;
  border-radius: 999px;
  background: var(--violet);
  box-shadow: none;
  font-weight: 750;
}
.button:hover { background: var(--violet-dark); transform: translateY(-1px); }
.button.secondary { color: var(--ink); background: #e8e8ed; }
.button.secondary:hover { background: #dcdce1; }
.button.ghost { color: #075fbe; background: transparent; border-color: rgba(10,132,255,.35); }
.notice { border-radius: 17px; }
.dashboard-layout { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
.sidebar { top: 84px; padding: 12px; background: rgba(255,255,255,.78); border-color: rgba(29,29,31,.08); border-radius: 25px; box-shadow: 0 12px 38px rgba(29,29,31,.07); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sidebar button, .sidebar a { min-height: 48px; border-radius: 14px; }
.sidebar button.active, .sidebar a.active { color: #fff; background: var(--violet); }
.hero-panel { position: relative; overflow: hidden; min-height: 280px; padding: clamp(2rem,5vw,4rem); color: #fff; background: linear-gradient(135deg,#1d1d1f 0%,#29223d 52%,#5632bd 100%); border: 0; border-radius: 34px; box-shadow: var(--shadow); }
.hero-panel::after { content: ""; position: absolute; width: 330px; height: 330px; right: -100px; top: -150px; border-radius: 50%; background: radial-gradient(circle,rgba(99,195,255,.55),transparent 68%); pointer-events: none; }
.hero-panel .eyebrow { color: #badfff; }
.hero-panel p { color: rgba(255,255,255,.75); }
.metrics, .metric-grid { gap: 1rem; }
.metric-card { min-height: 150px; padding: 1.35rem; }
.metric-card strong { font-size: clamp(2rem,4vw,3.3rem); letter-spacing: -.055em; }
.admin-tabs { display: flex; flex-wrap: nowrap; gap: .4rem; overflow-x: auto; padding: .35rem; background: #e8e8ed; border-radius: 999px; }
.admin-tabs button { flex: 0 0 auto; min-height: 44px; border-radius: 999px; }
.admin-tabs button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 9px rgba(0,0,0,.09); }
.table-wrap { overflow: auto; border-radius: 20px; }
.account-row, .invitation-row { border-radius: 18px; }
.progress-track { background: #e8e8ed; }
.progress-fill { background: linear-gradient(90deg,#6d4aff,#0a84ff,#31c7a1); }
.avatar { box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.legal-page { background: #fff; border-color: rgba(29,29,31,.08); border-radius: 34px; box-shadow: var(--shadow); }
.legal-page h1 { font-size: clamp(3rem,8vw,5.7rem); line-height: .92; letter-spacing: -.07em; }
.legal-page h2 { margin: 0 0 .6rem; font-size: clamp(1.45rem,3vw,2rem); letter-spacing: -.035em; }
.legal-page h3 { margin: 0 0 .35rem; font-size: 1.08rem; }
.legal-page p, .legal-page li { color: var(--ink-soft); }
.legal-page p { line-height: 1.7; }
.legal-page ul { display: grid; gap: .65rem; padding-left: 1.35rem; }
.legal-page li::marker { color: var(--violet); font-weight: 800; }
.legal-summary, .legal-ai-disclosure {
  margin: 2rem 0;
  padding: clamp(1.2rem,4vw,1.75rem);
  border: 1px solid rgba(109,74,255,.2);
  border-radius: 22px;
  background: linear-gradient(135deg,#f3efff,#fbfaff);
}
.legal-summary h2, .legal-ai-disclosure h3 { color: var(--violet-dark); }
.legal-summary p:last-child, .legal-ai-disclosure p:last-child { margin-bottom: 0; }
.legal-index {
  margin: 1.5rem 0 2.5rem;
  padding: 1.2rem 1.35rem;
  border-radius: 20px;
  background: #f5f5f7;
}
.legal-index strong { display: block; margin-bottom: .55rem; }
.legal-index ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem 1.5rem; margin: 0; padding-left: 1.25rem; }
.legal-index a { color: #075fbe; text-decoration-thickness: .08em; text-underline-offset: .16em; }
.legal-page section { scroll-margin-top: 92px; }
.legal-page section + section { margin-top: 1.5rem; padding-top: 1.5rem; }
.legal-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.legal-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.legal-actions .button { text-decoration: none; }

.learner-start { flex: 1 1 190px; }
.device-tools { margin-top: .85rem; border-top: 1px solid var(--line); }
.device-tools summary {
  min-height: 44px;
  padding: .8rem 0;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: .875rem;
  font-weight: 700;
}
.profile-picker { display: grid; gap: .75rem; width: min(680px,100%); margin: 0 auto; }
.learner-profile-form { display: grid; gap: 1.25rem; margin: 1.25rem 0 1.75rem; padding: clamp(1.1rem,3vw,1.75rem); scroll-margin-top: 88px; }
.profile-form-heading h3 { margin: .25rem 0 0; font-size: clamp(1.55rem,4vw,2.25rem); letter-spacing: -.035em; }
.profile-form-section,.birth-date-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.profile-form-section { display: grid; gap: 1rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.profile-form-section > legend { padding: 0 .55rem 0 0; color: var(--violet-dark); font-size: 1.05rem; font-weight: 750; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.birth-date-group { padding: .9rem 1rem 1rem; background: #f8f8fa; border-radius: 18px; }
.birth-date-group > legend { padding: 0 .35rem; font-weight: 750; }
.birth-date-group > legend span { color: var(--ink-soft); font-size: .875rem; font-weight: 500; }
.birth-date-fields { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr); gap: .7rem; margin-top: .65rem; }
.learner-profile-form .field { min-width: 0; }
.learner-profile-form .field input,.learner-profile-form .field select { width: 100%; }
.optional { color: var(--ink-soft); font-size: .86em; font-weight: 500; }
.preference-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.preference-checks > legend { grid-column: 1/-1; margin-bottom: .15rem; padding: 0; font-weight: 750; }
.preference-checks .check-row { min-width: 0; padding: .75rem .85rem; background: #f8f8fa; border-radius: 15px; }
.creator-hero { max-width: 900px; margin: 0 auto 1.5rem; text-align: center; }
.creator-hero h1,.creator-empty h1 { margin: .35rem 0 .75rem; font-size: clamp(2.6rem,7vw,5.6rem); line-height: .94; letter-spacing: -.065em; text-wrap: balance; }
.creator-hero p,.creator-empty p { max-width: 760px; margin-inline: auto; color: var(--ink-soft); font-size: 1.08rem; }
.creator-workspace { max-width: 920px; margin-inline: auto; }
.profile-context-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .9rem 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid rgba(109,74,255,.2); border-radius: 18px; background: linear-gradient(135deg,rgba(109,74,255,.08),rgba(10,132,255,.045)); }
.profile-context-card > div { min-width: 0; }
.profile-context-card h2 { margin: .2rem 0 .35rem; font-size: 1.2rem; }
.profile-context-card p { margin: .25rem 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.profile-context-card .profile-context-support { color: var(--ink); font-weight: 500; }
.profile-context-card .button { flex: 0 0 auto; }
.creator-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; margin: 0 0 1.5rem; padding: .35rem; list-style: none; background: #e8e8ed; border-radius: 18px; }
.creator-steps li { display: grid; place-items: center; min-height: 46px; padding: .55rem .65rem; border-radius: 14px; color: var(--ink-soft); text-align: center; font-size: .8rem; font-weight: 750; }
.creator-steps li.active { color: var(--ink); background: #fff; box-shadow: 0 2px 9px rgba(0,0,0,.08); }
.creator-step { min-height: 390px; }
.creator-step h2 { margin: .3rem 0 1.2rem; font-size: clamp(1.8rem,4vw,2.8rem); letter-spacing: -.045em; }
.praxis-type-group { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; min-width: 0; margin: 1.2rem 0 0; padding: 0; border: 0; }
.praxis-type-group > legend { margin-bottom: .5rem; font-size: 1rem; font-weight: 750; }
.praxis-type-card { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; padding: 1rem; background: #f8f8fa; border: 2px solid transparent; border-radius: 18px; cursor: pointer; }
.praxis-type-card:has(input:checked) { background: var(--lavender); border-color: var(--violet); }
.praxis-type-card input { width: 21px; height: 21px; flex: 0 0 auto; margin: .15rem 0 0; accent-color: var(--violet); }
.praxis-type-card strong,.praxis-type-card small { display: block; }
.praxis-type-card small { margin-top: .35rem; color: var(--ink-soft); line-height: 1.4; }
.creator-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.creator-options .check-row { padding: .8rem; background: #f8f8fa; border-radius: 16px; }
.creator-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.praxis-review { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.praxis-review > div { min-width: 0; padding: .85rem; background: #f8f8fa; border-radius: 15px; }
.praxis-review strong,.praxis-review span { display: block; }
.praxis-review span { margin-top: .2rem; color: var(--ink-soft); overflow-wrap: anywhere; white-space: pre-wrap; }
.praxis-brief-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin-top: 1rem; }
.praxis-brief-card { min-width: 0; padding: 1rem; background: #f8f8fa; border: 1px solid var(--line); border-radius: 18px; }
.praxis-brief-card h3 { margin: .7rem 0 .15rem; font-size: 1.2rem; }
.praxis-brief-card p { margin: .25rem 0 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.brief-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1rem 0; }
.brief-actions .button { min-height: 44px; }
.brief-next-step { margin-block: 1.5rem; padding: 1.2rem; border-radius: var(--aurora-radius-card,22px); background: var(--lavender); }
.brief-next-step h3 { margin-top: 0; }
.brief-next-step p { color: var(--ink-soft); }
.brief-details summary { cursor: pointer; min-height: 44px; padding-block: .65rem; font-weight: 500; }
.brief-details .praxis-review { margin-top: .8rem; }
.brief-confirmation { color: var(--ink-soft); }
.brief-delete-dialog { width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); box-sizing: border-box; overflow: auto; padding: clamp(1rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: var(--aurora-radius-card,22px); color: var(--ink); background: var(--surface, #fff); box-shadow: var(--aurora-shadow-modal, 0 24px 70px -20px #211a3766); }
.brief-delete-dialog::backdrop { background: rgb(29 29 35 / 45%); }
.brief-delete-dialog h2 { margin-top: 0; font-size: 1.5rem; }
.brief-delete-dialog p { overflow-wrap: anywhere; }
.brief-delete-dialog .brief-actions { margin-bottom: 0; }
#praxis-detail,#saved-designs,.creator-step h2 { scroll-margin-top: 7rem; }
#praxis-detail h2 { overflow-wrap: anywhere; }
#saved-designs > .field { max-width: 320px; }
#creator-notice .button { margin-top: .65rem; }
.creator-empty { max-width: 820px; margin-inline: auto; text-align: center; }
.profile-choice {
  display: grid;
  grid-template-columns: 60px minmax(0,1fr) auto;
  gap: .85rem;
  align-items: center;
  width: 100%;
  min-height: 88px;
  padding: .8rem 1rem;
  color: var(--ink);
  background: #f5f5f7;
  border: 2px solid transparent;
  border-radius: 21px;
  text-align: left;
  cursor: pointer;
}
.profile-choice:hover { background: #eee9ff; border-color: rgba(109,74,255,.25); }
.profile-choice:disabled { opacity: .68; cursor: wait; }
.profile-choice strong,.profile-choice small { display: block; }
.profile-choice strong { font-size: 1.13rem; }
.profile-choice small { color: var(--ink-soft); }
.profile-choice > span:last-child { color: var(--violet); font-size: 1.45rem; font-weight: 900; }
.student-shell { width: min(1120px,100%); }
.student-catalog { margin-top: 1.2rem; }
.student-catalog-head { margin-bottom: 1.1rem; }
.student-catalog-head h2 { margin-top: .25rem; font-size: clamp(1.8rem,4vw,3rem); letter-spacing: -.045em; }
.student-catalog-head p { max-width: 760px; color: var(--ink-soft); }
.student-route-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.student-route-card { display: flex; flex-direction: column; min-height: 310px; padding: 1.2rem; background: #f8f8fa; border: 1px solid var(--line); border-radius: 22px; }
.student-route-top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; color: var(--ink-soft); font-size: .82rem; font-weight: 750; }
.course-number { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--lavender); font-size: 1.35rem; }
.student-route-card h3 { margin: 1rem 0 .35rem; font-size: 1.25rem; }
.student-route-card p { flex: 1; margin: 0 0 1rem; color: var(--ink-soft); }
.student-route-card .button { align-self: flex-start; margin-top: 1rem; }

@media (max-width: 900px) {
  main { width: min(100% - 28px, 760px); }
  .auth-intro h1 { max-width: 680px; margin-inline: auto; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .sidebar { top: auto; }
}
@media (max-width: 620px) {
  .account-header { align-items: center; flex-direction: row; overflow: hidden; }
  .account-brand span { display: none; }
  .account-nav { width: auto; flex: 1; justify-content: flex-end; }
  .account-nav a { padding-inline: .65rem; }
  .auth-intro h1 { font-size: clamp(3.2rem,16vw,5rem); }
  .hero-panel { border-radius: 28px; }
  .admin-tabs { border-radius: 18px; }
  .student-route-grid { grid-template-columns: 1fr; }
  .student-route-card { min-height: 270px; }
  .student-route-card .button { width: 100%; }
  .legal-page { width: min(100% - 20px,760px); margin: 1rem auto 2rem; padding: 1.25rem; border-radius: 24px; }
  .legal-page h1 { font-size: clamp(2.75rem,14vw,4.6rem); }
  .legal-index ol { grid-template-columns: 1fr; }
  .legal-actions .button { width: 100%; }
  .profile-form-grid { grid-template-columns: 1fr; }
  .preference-checks { grid-template-columns: 1fr; }
  .birth-date-fields { grid-template-columns: minmax(0,1.35fr) minmax(0,.75fr) minmax(0,1fr); gap: .45rem; }
  .birth-date-group { padding-inline: .7rem; }
  .learner-profile-form .form-actions .button { width: 100%; }
  .creator-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .praxis-type-group,.creator-options,.praxis-review,.praxis-brief-list { grid-template-columns: 1fr; }
  .creator-step { min-height: 0; }
  .profile-context-card { align-items: stretch; flex-direction: column; }
  .profile-context-card .button { width: 100%; }
  .creator-actions { flex-wrap: wrap; }
  .creator-actions .button { flex: 1 1 100%; }
  .brief-actions .button { flex: 1 1 100%; }
  #saved-designs .section-heading-inline { flex-direction: column; align-items: stretch; }
}

@media print {
  body { background: #fff; font-size: 10.5pt; }
  .account-header, .skip-link, .legal-index, .legal-actions { display: none !important; }
  main.legal-page { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .legal-page h1 { font-size: 30pt; }
  .legal-page h2 { break-after: avoid; }
  .legal-page section { break-inside: avoid-page; }
  .legal-summary, .legal-ai-disclosure { background: #fff; border-color: #888; }
  a { color: inherit; text-decoration: none; }
}

/* Search stays outside the live result region so typing never loses focus. */
.aurora .library-search{padding:24px;margin:20px 0}
.library-filters{display:flex;align-items:end;flex-wrap:wrap;gap:16px;margin:16px 0}
.library-filters .field{flex:1 1 230px;min-width:0;margin:0}
.library-filters input,.library-filters select{width:100%;min-width:0;font-size:1rem;min-height:48px}
.library-filters>.button{min-height:48px}
.student-library-filters .field{flex-basis:190px}
.student-library-filters .student-text-search{flex-grow:1.6;flex-basis:260px}
.student-results-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-bottom:20px}
.student-results-head h2,.student-results-head p{margin:0}
.student-library-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;min-height:0}
.student-library-card h3,.student-library-card p{margin:0;overflow-wrap:anywhere;flex:0 1 auto}
.student-library-card .student-route-top{width:100%;flex-wrap:wrap;gap:8px}
.student-library-card .student-item-date,.student-library-card .student-item-source{font-size:.9rem;color:var(--aurora-text-secondary,#62616d)}
.student-item-progress{width:100%;margin-top:4px}
.student-item-progress .progress-track{margin:8px 0}
.student-library-card>.button{margin-top:8px}
.student-library-empty{padding:16px 0;max-width:52ch}
#student-search-count,#brief-search-count{color:#62616d;line-height:1.6}
.aurora .student-greeting{padding:24px 16px}
.aurora .student-shell .student-greeting{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 16px;text-align:left;padding:18px 8px;margin:0;min-height:0}
.aurora .student-shell .student-greeting .avatar{grid-row:1/4;width:52px;height:52px;margin:0;font-size:1.4rem}
.aurora .student-shell .student-greeting h1{font-size:clamp(1.6rem,4vw,2.4rem);margin:0;line-height:1.2}
.aurora .student-shell .student-greeting p{margin:0;font-size:1rem;line-height:1.5}
.aurora .student-shell .student-greeting>:not(.avatar){grid-column:2}
@media(max-width:600px){.library-filters>.button{width:100%}.aurora .library-search{padding:20px}}

/* Auditoría de navegación 2026-09-16: un solo menú, cuenta visible, espacio del estudiante con contenido primero */
.account-nav .account-signout { display: inline-flex; align-items: center; min-height: 44px; padding: .65rem .85rem; border: 0; border-radius: 999px; background: var(--lavender); color: #4b2fc7; font: inherit; font-weight: 750; white-space: nowrap; cursor: pointer; }
.account-nav .account-signout:hover { background: #e6dcff; }
.account-nav a[aria-current="page"] { background: var(--lavender); }
.account-meta { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .88rem; overflow-wrap: anywhere; }
.continue-card { text-align: center; margin-bottom: 1.5rem; }
.continue-card h2 { margin: .3rem 0 .2rem; }
.continue-card p { margin: 0 0 1rem; color: var(--ink-soft); }
.library-filters-box { margin-top: 1.5rem; }
.library-filters-box > summary { cursor: pointer; font-weight: 750; padding: .4rem 0; }
.library-filters-box[open] > summary { margin-bottom: .8rem; }
.student-library-empty-note { color: var(--ink-soft); margin: 0; }
@media (max-width: 720px) { .account-nav { gap: .15rem; } .account-nav a, .account-nav .account-signout { padding: .6rem .7rem; font-size: .9rem; } }
@media (max-width: 480px) { .account-nav [data-students-link] { display: none; } }
@media (max-width: 767px) { body.has-student-tabbar .account-nav [data-student-signout] { display: none; } }
.hero-meta { margin: .6rem 0 0; color: #e8e0fa; font-size: 1rem; }
.student-resting .student-tabbar { display: none !important; }

/* Mejoras UX 16 de septiembre de 2026: puertas, validación, texto grande, agrupación por materia */
.door-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0 0 1.2rem; }
.door { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-height: 96px; padding: .9rem 1rem; border: 2px solid var(--lavender); border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; }
.door:hover, .door:focus-visible { border-color: var(--violet); background: var(--lavender); }
.door .door-icon { font-size: 1.6rem; line-height: 1; }
.door strong { font-size: 1.05rem; }
.door span:last-child { color: var(--ink-soft); font-size: .9rem; }
.field-error { margin: .4rem 0 0; padding: .55rem .75rem; border-radius: 12px; background: #fdecef; color: #8f1d2c; font-size: .95rem; font-weight: 600; }
[aria-invalid="true"] { border-color: #c8323f !important; }
.password-meter { height: 6px; margin: .5rem 0 .3rem; border-radius: 999px; background: #eeeaf7; overflow: hidden; }
.password-meter span { display: block; width: 0; height: 100%; border-radius: 999px; background: #c8323f; transition: width .2s; }
.password-meter span[data-level="2"] { background: #c98a00; }
.password-meter span[data-level="3"] { background: #1f8a4c; }
.listen-button { margin: 0 0 1rem; }
.listen-button[aria-pressed="true"] { background: var(--lavender); }
.learner-note { margin: .5rem 0 0; padding: .6rem .8rem; border-radius: 12px; background: #fff7e0; color: #5d4300; font-size: .95rem; }
.more-actions > summary, .device-tools > summary { cursor: pointer; padding: .55rem 0; font-weight: 700; color: var(--violet); min-height: 44px; display: flex; align-items: center; }
.subject-group + .subject-group { margin-top: 1.4rem; }
.subject-group-title { margin: 0 0 .7rem; font-size: 1.25rem; }
.subject-group [data-show-more] { margin-top: .8rem; }
.student-library-empty-note .button { margin-top: .6rem; }
@media (max-width: 480px) { .door-grid { grid-template-columns: 1fr; } }

/* Perfil en dos niveles, fichas de maestra y notas reales (fase 1 del plan, 18 de septiembre de 2026) */
.profile-more-intro { margin: 1rem 0 .25rem; }
details.profile-level { border: 1px solid var(--line); border-radius: 18px; padding: .25rem 1rem; margin-top: .75rem; background: #fff; }
details.profile-level > summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
details.profile-level[open] { padding-bottom: 1rem; }
.field-warning { margin: .4rem 0 0; padding: .6rem .8rem; border-radius: 12px; background: #fff7d9; border: 1px solid #f0d375; color: #5d4300; font-size: .9375rem; }
.teacher-card { border: 1px dashed var(--line); border-radius: 16px; padding: .9rem; margin: .75rem 0; }
.teacher-card legend { font-weight: 600; padding: 0 .4rem; }
.legacy-data { margin-top: 1rem; }
.nickname-invite { background: #fff7d9; border: 1px solid #f0d375; border-radius: 12px; padding: .6rem .8rem; color: #5d4300; }
.nickname-invite .text-link { border: 0; background: none; padding: 0; min-height: 44px; cursor: pointer; font: inherit; color: #4b2fc7; font-weight: 700; text-decoration: underline; }
.grades-tools > summary, .grades-tools { margin-top: .5rem; }
.grades-tools > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.grades-list { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .4rem; }
.grade-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.grades-form label { display: grid; gap: .3rem; font-weight: 600; }
.grades-form input { min-height: 48px; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: 12px; font: inherit; }

/* Mapa de objetivos (plan, fase 2) */
.objective-map { margin-top: 1.25rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.objective-map-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.objective-map h3 { margin: 0; } .objective-map h4 { margin: 1.25rem 0 .4rem; font-size: 1.05rem; }
.objective-map textarea { width: 100%; min-height: 96px; padding: .8rem; border: 2px solid var(--line); border-radius: 14px; font: inherit; }
.map-objectives { margin: 0 0 .75rem; padding-left: 1.4rem; display: grid; gap: .75rem; }
.map-objective { padding: .9rem; border: 1px solid var(--line); border-radius: 16px; background: var(--background); }
.map-objective label { display: grid; gap: .3rem; font-weight: 600; }
.map-objective input { min-height: 48px; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: 12px; font: inherit; width: 100%; }
.map-objective-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.map-out { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.map-out li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .75rem; border: 1px dashed var(--line); border-radius: 12px; }

/* Generación por lección y aprobación (plan, fase 2) */
.generation-box { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.generation-steps { margin: .5rem 0 1rem; padding-left: 1.4rem; display: grid; gap: .5rem; }
.generation-steps li { padding: .2rem 0; }
.generation-steps li > span:first-child { margin-right: .5rem; }
.approval-box p { margin: .5rem 0 1rem; }

/* Ciclo aprender → medir → reforzar (plan, fase 5) */
.cycle-box { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.cycle-box h4 { margin: 0 0 .3rem; }
.cycle-status { margin: .6rem 0 0; color: var(--ink-soft); }

/* Material de la familia (plan, fase 2) */
.materials-box .materials-list { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .4rem; }
.material-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.material-name { overflow-wrap: anywhere; }
.material-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.materials-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.materials-pick { cursor: pointer; }
.materials-status { margin: .6rem 0 0; color: var(--ink-soft); }

/* Resumen semanal (plan, fase 5) */
.weekly-grid { display: grid; gap: .75rem; }
@media (min-width: 720px) { .weekly-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.weekly-card { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.weekly-card h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.weekly-headline { margin: 0 0 .4rem; font-weight: 600; }
.weekly-suggestion { margin: 0 0 .6rem; color: var(--ink-soft); }
.weekly-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; color: var(--ink-soft); font-size: .9375rem; }
.weekly-optin { margin-top: 1rem; }

/* Área del adulto (plan, fase A) */
.overview-metrics { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.overview-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.overview-list li { display: grid; gap: .2rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.overview-list li > span { font-weight: 600; overflow-wrap: anywhere; }
.overview-list li > small { color: var(--ink-soft); }
.overview-list li > .button { justify-self: start; margin-top: .3rem; }
/* Filtros de «Mi espacio» arriba y a la vista (titular, 29 de septiembre de 2026): tipo de Praxi, semana de creación y clase. */
.student-filter-bar { margin-top: 1rem; }
.student-filter-bar .filters-title { margin: 0 0 .7rem; font-size: 1.1rem; }
.student-filter-bar #student-search-count { margin: .6rem 0 0; color: var(--muted, #5b536f); font-size: .95rem; }
@media (max-width: 560px) { .student-filter-bar .student-library-filters .field { flex-basis: 100%; } }
/* Barra compacta: en teléfono, tipo y clase lado a lado; semana y búsqueda a lo ancho. */
.student-filter-bar { padding: 1rem 1.1rem; }
.student-filter-bar .student-library-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem .8rem; align-items: end; }
.student-filter-bar .student-library-filters .field { margin: 0; min-width: 0; }
.student-filter-bar .student-library-filters label { font-size: .9rem; margin-bottom: .25rem; }
.student-filter-bar .student-library-filters :is(select, input) { min-height: 44px; padding-block: .45rem; font-size: 1rem; }
.student-filter-bar #student-clear { min-height: 44px; }
@media (max-width: 560px) {
  .student-filter-bar .student-library-filters { grid-template-columns: 1fr 1fr; }
  .student-filter-bar .student-library-filters .field { flex-basis: auto; }
  .student-filter-bar .student-library-filters .field:has(#student-week), .student-filter-bar .student-library-filters .student-text-search { grid-column: 1 / -1; }
  .student-filter-bar .filters-title { font-size: 1rem; margin-bottom: .5rem; }
}
/* Filtro con Luna (titular, 29 de septiembre de 2026): «apto para el estudiante; usa a Luna». Luna pregunta y contesta; las
   opciones son botones grandes que se encienden. */
.luna-filter { background: linear-gradient(160deg, #f6f1ff 0%, #fff 55%); }
.luna-filter-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .8rem; }
.luna-filter-pic { flex: 0 0 auto; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(109, 74, 255, .18)); }
.luna-filter-bubble { position: relative; flex: 1; padding: .8rem 1rem; border: 2px solid #ddd6f6; border-radius: 20px; background: #fff; }
.luna-filter-pic:not([hidden]) + .luna-filter-bubble::before { content: ""; position: absolute; left: -10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: #fff; border-left: 2px solid #ddd6f6; border-bottom: 2px solid #ddd6f6; transform: rotate(45deg); }
.luna-filter-bubble .filters-title { margin: 0; font-size: 1.25rem; }
.luna-filter-bubble p { margin: .25rem 0 0; color: #5b3fd6; font-weight: 650; }
.luna-filter .chip-label { margin: .8rem 0 .4rem; font-weight: 800; color: #2c2545; }
.luna-filter .chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.luna-filter .filter-chip { min-height: 44px; padding: .5rem 1rem; border: 2px solid #ddd6f6; border-radius: 999px; background: #fff; color: #2c2545; font: inherit; font-weight: 750; cursor: pointer; box-shadow: 0 3px 0 #ddd6f6; touch-action: manipulation; transition: transform .08s ease; }
.luna-filter .filter-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 #ddd6f6; }
.luna-filter .filter-chip[aria-pressed="true"] { border-color: #6d4aff; background: #6d4aff; color: #fff; box-shadow: 0 3px 0 #4a2fc2; }
.luna-filter .filter-chip:focus-visible { outline: 3px solid #ffb347; outline-offset: 2px; }
.luna-filter .student-library-filters { margin-top: 1rem; }
.luna-filter .chip-selects[hidden] { display: none; }
.luna-filter #student-search-count.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  .luna-filter-pic { width: 72px; height: 72px; }
  .luna-filter-bubble .filters-title { font-size: 1.1rem; }
  .luna-filter .student-library-filters { grid-template-columns: 1fr; }
}
@media (forced-colors: active) { .luna-filter .filter-chip[aria-pressed="true"] { outline: 3px solid Highlight; } }
/* Teléfono: cada fila de botones es una tira que se desliza de lado, con botones algo menores. */
@media (max-width: 560px) {
  .luna-filter .chip-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin-inline: -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .luna-filter .chip-row::-webkit-scrollbar { display: none; }
  .luna-filter .filter-chip { flex: 0 0 auto; min-height: 42px; padding: .35rem .85rem; font-size: 1rem; scroll-snap-align: start; white-space: nowrap; }
  .luna-filter .chip-label { margin: .6rem 0 .3rem; font-size: .95rem; }
}
/* Conversaciones con Luna (tutora, 29 sept. 2026) en el área del adulto. */
.tutor-day{margin:8px 0;padding:8px 12px;border:1px solid #e8e5f3;border-radius:12px;background:#fff}
.tutor-day summary{cursor:pointer;font-weight:600}
.tutor-transcript li{display:block;white-space:pre-line}
.tutor-transcript li.is-student strong{color:#4529c9}
.tutor-transcript li.is-luna strong{color:#7a4b00}
.tutor-transcript li.is-flagged{background:#fff4e5;border-radius:10px;padding:6px 8px}
.tutor-transcript li small{display:block;color:#9a5b00}