/* Mobile-first: estilos base para móvil, ampliaciones con min-width. */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1c2430;
  --muted: #5b6676;
  --border: #dde2e8;
  --primary: #1f5fbf;
  --primary-text: #ffffff;
  --ok: #1b7f3b;
  --ok-bg: #e8f6ec;
  --ko: #b42318;
  --radius: 12px;
  --tap: 44px; /* tamaño mínimo táctil */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c;
    --surface: #1b212a;
    --text: #e6eaf0;
    --muted: #9aa5b4;
    --border: #2c3440;
    --primary: #6fa3ff;
    --primary-text: #0b1420;
    --ok: #4cc27a;
    --ok-bg: #16301f;
    --ko: #ff7a6e;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--primary); }
h1, h2, h3 { line-height: 1.25; font-family: "Josefin Sans", "Open Sans", sans-serif; }
h1 { font-size: 1.6rem; margin: 0 0 .75rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
img, iframe, video { max-width: 100%; }

/* Colores de marca (hache2.es) para el menú: siempre claros, también en modo oscuro */
.sidebar, .mobilebar {
  --navy: #1d374e;
  --sand: #cfc893;
  --sand-soft: rgba(207, 200, 147, .35);
  --cream: #fbfaf3;
  --cream-2: #f1efdd;
  --cream-line: #e6e2c8;
  color-scheme: light;
  color: var(--navy);
}
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barra superior: solo en móvil (y en registro / recuperar contraseña) */
.mobilebar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  padding: .35rem .5rem .35rem 1rem;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-line);
}
.brand img { display: block; width: 8.5rem; height: auto; }
.menu-toggle {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--navy);
  cursor: pointer;
}
.menu-toggle svg.i { width: 24px; height: 24px; }

/* Lateral crema: cajón deslizante en móvil, fijo desde tablet */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  width: min(17rem, 85vw);
  padding: 1.25rem 1rem 1rem;
  overflow-y: auto;
  background: linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 100%);
  border-right: 1px solid #ebe7cf;
  transform: translateX(-100%);
  transition: transform .2s ease;
}
.nav-open .sidebar { transform: none; }
.backdrop { display: none; }
.nav-open .backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgb(0 0 0 / .4);
}
.sidebar form { margin: 0; }
.sidebar-logo img { display: block; width: 10.5rem; height: auto; margin: 0 .3rem .2rem; }

.sidebar .search { position: relative; }
.sidebar .search svg.i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: .7; }
.sidebar .search input, .sidebar .catfilter select {
  width: 100%;
  min-height: 2.6rem;
  padding: .45rem .7rem;
  border: 1px solid var(--cream-line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: .9rem;
}
.sidebar .search input { padding-left: 2.2rem; }
.sidebar .search input:focus, .sidebar .catfilter select:focus { outline: 2px solid var(--sand); border-color: #b9b276; }

.sidenav { display: flex; flex-direction: column; gap: .1rem; }
.sidenav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 2.6rem;
  padding: 0 .75rem;
  border-radius: 8px;
  color: var(--navy);
  font-size: .95rem;
  text-decoration: none;
}
.sidenav a:hover { background: var(--sand-soft); }
.sidenav a[aria-current="page"] { background: var(--sand); font-weight: 600; }
.sidenav a.sidenav-sub { min-height: 2.1rem; padding-left: 2.6rem; font-size: .85rem; }
.sidenav-group { margin: 1rem .75rem .3rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.count {
  margin-left: auto;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--sand);
  font-size: .72rem;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}

/* Usuario y salir, al pie del lateral */
.me { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--cream-line); display: flex; align-items: center; gap: .65rem; }
.avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--sand); font: 700 .85rem "Josefin Sans", sans-serif; }
.me-text { min-width: 0; display: grid; font-size: .85rem; line-height: 1.3; }
.me-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text small { opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-badge { justify-self: start; margin-top: .25rem; padding: .05rem .45rem; border-radius: 4px; background: var(--navy); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.me .logout { margin-left: auto; }
.me .logout button { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 8px; background: none; color: var(--navy); cursor: pointer; }
.me .logout button:hover { background: var(--sand-soft); }

/* Desde tablet: lateral fijo y siempre visible */
@media (min-width: 48rem) {
  .has-sidebar .mobilebar, .has-sidebar .backdrop { display: none; }
  .has-sidebar { padding-left: 16rem; }
  .sidebar { width: 16rem; transform: none; transition: none; }
  /* Contenido pegado a la barra lateral, sin centrar. */
  .has-sidebar .container { margin-left: 0; padding: 1.5rem 2rem; }
}

/* Título + botón redondo "+" a su derecha */
.title-row { display: flex; align-items: center; gap: .6rem; margin: 1.5rem 0 .75rem; }
.title-row:first-child { margin-top: 0; }
.title-row h1, .title-row h2 { margin: 0; }
.round-add {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--primary);
  border-radius: 50%;
  color: var(--primary);
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
}
.round-add:hover, .round-add:focus-visible { background: var(--primary); color: var(--primary-text); }

.container { max-width: 64rem; margin: 0 auto; padding: 1rem; }

/* Tarjetas y rejilla */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.card {
  display: block;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
a.card:hover, a.card:focus-visible { border-color: var(--primary); }
.card p { margin: .25rem 0 0; color: var(--muted); }

/* Curso aprobado por el alumno */
.card.done { background: var(--ok-bg); border-color: var(--ok); }
.done-mark {
  float: right;
  margin: 0 0 .25rem .5rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--ok);
  color: var(--surface);
  font-size: .8rem;
  font-weight: 700;
}

.badge {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--border);
  color: var(--text);
  font-size: .8rem;
}
.muted { color: var(--muted); }
.breadcrumb { margin-bottom: .5rem; font-size: .95rem; }

/* Listas de enlaces grandes (lecciones, notas) */
.list { list-style: none; margin: 0; padding: 0; }
.list li + li { margin-top: .5rem; }
.list a, .list .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap);
  padding: .75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

/* Botones */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap);
  padding: .6rem 1.2rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button[disabled] { opacity: .5; cursor: not-allowed; }
.button.small { width: auto; min-height: 2.5rem; padding: .3rem .9rem; font-size: .95rem; }
.button.secondary { background: var(--surface); color: var(--primary); border: 1px solid var(--border); }

.pager { display: flex; gap: .75rem; margin-top: 1.5rem; }
.pager .button { flex: 1; }

/* Formularios */
form div { margin-bottom: 1rem; }
label { display: block; font-weight: 600; margin-bottom: .25rem; }
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  min-height: var(--tap);
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.helptext, form ul { font-size: .85rem; color: var(--muted); }
.errorlist { color: var(--ko); padding-left: 1.1rem; }

/* Examen */
fieldset.question {
  margin: 0 0 1rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
fieldset.question legend { padding: 0 .25rem; font-weight: 600; }
.choice {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--tap);
  margin: .4rem 0 0;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 400;
  cursor: pointer;
}
.choice input { width: 1.25rem; height: 1.25rem; flex: none; }
.choice:has(input:checked) { border-color: var(--primary); outline: 1px solid var(--primary); }

.score { font-size: 3rem; font-weight: 700; margin: .5rem 0; }
.ok, .card .ok { color: var(--ok); }
.ko, .card .ko { color: var(--ko); }

.notice {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 1rem;
}

/* Tablet en adelante */
@media (min-width: 40rem) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .button { width: auto; }
  .pager .button { flex: 0 1 auto; }
  .pager .next { margin-left: auto; }
}

/* Escritorio */
@media (min-width: 64rem) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .container { padding: 1.5rem 1rem; }
}

/* Calendario (vista mensual a todo el ancho) */
.cal-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cal-head h1 { margin: 0; min-width: 11ch; text-align: center; }
.cal-arrow {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap);
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface);
  color: var(--primary); font-size: 1.6rem; line-height: 1; text-decoration: none;
}
.cal-arrow:hover { border-color: var(--primary); }
.cal-arrow[aria-disabled="true"] { opacity: .35; }
.cal-head .round-add { margin-left: auto; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--border); gap: 1px; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.cal-dow { background: var(--surface); color: var(--muted); font-size: .8rem; font-weight: 600; text-align: center; padding: .5rem 0; }
.cal-day { background: var(--surface); min-height: 4rem; padding: .3rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cal-day.out { background: var(--bg); color: var(--muted); }
/* Día pulsable (profesores): enlace que cubre la celda; los eventos quedan por encima para su título. */
.cal-day { position: relative; }
.cal-add { position: absolute; inset: 0; border-radius: inherit; }
.cal-add::after { content: "+"; position: absolute; top: .25rem; right: .4rem; font-weight: 700; color: var(--primary); opacity: 0; }
.cal-add:hover, .cal-add:focus-visible { background: rgba(207, 200, 147, .2); }
.cal-add:hover::after, .cal-add:focus-visible::after { opacity: 1; }
.cal-num { font-size: .85rem; font-weight: 600; align-self: flex-start; min-width: 1.6rem; text-align: center; border-radius: 999px; }
.cal-day.today .cal-num { background: var(--ok); color: #fff; }
.cal-event {
  background: var(--primary); color: var(--primary-text); border-radius: 4px;
  font-size: .75rem; padding: .1rem .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Móvil: el evento es un punto; el detalle va en la lista de abajo. */
@media (max-width: 40rem) {
  .cal-event { font-size: 0; padding: 0; width: .5rem; height: .5rem; border-radius: 50%; align-self: center; }
}
@media (min-width: 48rem) { .cal-day { min-height: 7rem; } }
.events { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.events li { display: grid; gap: .1rem; position: relative; padding: .75rem 2rem .75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.event-date { color: var(--primary); font-size: .8rem; font-weight: 600; }
.event-edit { position: absolute; top: .75rem; right: .9rem; text-decoration: none; }

/* Entrada: bloque estrecho centrado en la pantalla, con el logotipo arriba */
.auth {
  max-width: 31rem; /* la mitad del ancho del contenido */
  margin: 0 auto;
  min-height: calc(100dvh - 7rem); /* pantalla menos barra superior y márgenes: sin desplazamiento */
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
.auth form { text-align: left; }
.auth h1 { margin: 1rem 0 .75rem; }
.auth p { margin: .75rem 0 0; }
.auth-logo { display: block; width: 100%; height: auto; } /* PNG/WebP transparente: se integra con el fondo */
/* En modo oscuro el azul del logo no se vería sobre fondo oscuro: placa clara detrás. */
@media (prefers-color-scheme: dark) {
  .auth-logo { background: #fff; border-radius: var(--radius); padding: .5rem; }
}

/* Lección: vídeo 16:9 a todo el ancho y material descargable */
.video { aspect-ratio: 16 / 9; margin: 1rem 0; border-radius: var(--radius); overflow: hidden; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.attachments h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }

/* Lección: PDF incrustado (static/js/pdf-viewer.js). Páginas apiladas en una caja con su propio scroll. */
.pdf { margin: 1rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.pdf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.pdf-name { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.pdf-count { font-size: .9rem; white-space: nowrap; }
.pdf-pages { height: min(80vh, 56rem); overflow-y: auto; overscroll-behavior: contain; padding: .75rem; background: #e9ecf0; }
.pdf-page { width: 100%; max-width: 60rem; margin: 0 auto; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.pdf-page + .pdf-page { margin-top: .75rem; }
.pdf-page canvas { display: block; width: 100%; height: 100%; }
.pdf-status { margin: 2rem 0; text-align: center; }
@media (prefers-color-scheme: dark) {
  .pdf-pages { background: #0d1117; }
}