/* ============================================================
   MedPrep — Hoja de estilos
   Look "simulador de examen": denso, sobrio, institucional.
   Bordes rectos, líneas finas, sin degradados ni sombras.
   Modo oscuro por defecto; el claro se activa con data-theme.
   ============================================================ */

:root {
  /* ---- MODO CLARO (institucional, papel blanco) — ES EL PREDETERMINADO ---- */
  color-scheme: light;
  /* Blanco apenas cálido (papel) de fondo; las tarjetas van en blanco puro
     para que se despeguen. Sigue siendo blanco, pero no de quirófano. */
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface2: #f2f0ec;
  --border: #e3dfd8;
  --border2: #cbc5ba;
  --text: #15181b;
  /* Grises más oscuros que antes (#59616a / #838c95): se leían lavados,
     pero siguen bien separados del negro de los títulos. */
  --text2: #4a525b;
  --text3: #666f79;

  /* Verde-azul petróleo: el color de la marca */
  --accent: #1a5a5e;        /* textos y bordes interactivos */
  --accent-fill: #1a5a5e;   /* fondo del botón primario y del logo */
  --accent-on: #ffffff;     /* texto sobre el botón primario */
  --accent2: #524d80;       /* avatar de admin */
  --hero: #1a5a5e;          /* panel de arriba de la materia */
  --hero-bar: #e9b95c;      /* la barra de avance adentro del panel */
  --star: #d39a2a;          /* estrellitas del cuestionario de opinión */

  --green: #2f7d52;
  --red: #a83a35;
  --amber: #8a6520;
  --yellow: #8a6520;        /* alias heredado */
  --teal: #2c6f6a;

  --row-hover: rgba(120,95,55,.05);
  --tint-green: rgba(47,125,82,.08);
  --tint-red: rgba(168,58,53,.08);

  /* Color de cada módulo (la columna modules.color de la base guarda el nombre).
     Tonos apagados, tipo lámina de anatomía: nada de neón. */
  --m-orange: #c06a2e;
  --m-bordo:  #9a3a48;
  --m-blue:   #2f6f9e;
  --m-red:    #b0463d;
  --m-green:  #47804f;
  --m-yellow: #a8862a;
  --m-purple: #6a5a99;
  --m-teal:   #2c6f6a;

  --radius: 3px;
  --radius-sm: 2px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

:root[data-theme="dark"] {
  /* ---- MODO OSCURO (se elige desde la ruedita) ---- */
  color-scheme: dark;
  --bg: #111315;
  --surface: #191c1f;
  --surface2: #22262a;
  --border: #2d3339;
  --border2: #3b4249;
  --text: #e6e8ea;
  --text2: #99a0a7;
  --text3: #6b737b;

  --accent: #6fa8ab;
  --accent-fill: #235e62;
  --accent-on: #ffffff;
  --accent2: #6f6a9c;
  --hero: #17474a;
  --hero-bar: #d9ab52;
  --star: #e0b356;

  --green: #4f9b6f;
  --red: #c05f59;
  --amber: #b58a3c;
  --yellow: #b58a3c;
  --teal: #4a8d88;

  --row-hover: rgba(255,255,255,.035);
  --tint-green: rgba(79,155,111,.10);
  --tint-red: rgba(192,95,89,.10);

  /* Los mismos colores de módulo, aclarados para que se vean sobre negro */
  --m-orange: #d68f5a;
  --m-bordo:  #c2666f;
  --m-blue:   #68a0c8;
  --m-red:    #cd7268;
  --m-green:  #71a67a;
  --m-yellow: #c9a552;
  --m-purple: #8e80bb;
  --m-teal:   #4a8d88;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.screen { display: none; }
/* La pantalla activa estira para empujar el pie abajo del todo */
.screen.active { display: flex; flex: 1 0 auto; }

/* Marca: placa color petróleo con la vara de Esculapio y la palabra en blanco.
   El dibujo del símbolo está una sola vez arriba del <body> (#ico-vara). */
.mark {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-fill); color: #fff;
  border-radius: var(--radius); padding: 5px 12px 5px 8px;
}
.mark-sq {
  width: 22px; height: 22px; min-width: 22px; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
}
.mark-sq svg { display: block; width: 12.5px; height: 16.5px; color: #fff; }
.mark-text {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 600;
  letter-spacing: -.005em; color: #fff;
}
/* Rótulo "Panel admin": va al lado de la placa, no adentro */
.mark-tag {
  font-size: 11px; color: var(--text3); letter-spacing: .09em;
  text-transform: uppercase; white-space: nowrap;
}
.brand-row { display: flex; align-items: center; gap: 11px; min-width: 0; }

/* ---------- Login / Acceso ---------- */
#screen-login, .access-wrap {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg);
}
.access-wrap { display: flex; min-height: 100vh; }
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 40px 36px; width: 100%; max-width: 420px;
}
.logo { margin-bottom: 34px; padding: 10px 17px 10px 13px; }
.logo .mark-sq { width: 34px; height: 34px; min-width: 34px; }
.logo .mark-sq svg { width: 19px; height: 25px; }
.logo .mark-text { font-size: 21px; }
.login-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; margin-bottom: 6px; letter-spacing: -.01em; }
.login-sub { color: var(--text2); font-size: 13.5px; line-height: 1.6; margin-bottom: 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text3); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 14.5px;
  font-family: var(--font); transition: border-color .15s; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.field select option { background: var(--surface); }
.btn {
  width: 100%; padding: 12px; background: var(--accent-fill); color: var(--accent-on);
  border: 1px solid var(--accent-fill); border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: var(--font);
  transition: opacity .15s;
}
.btn:hover { opacity: .88; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.secondary { background: transparent; color: var(--text2); border-color: var(--border2); }
.btn.secondary:hover { color: var(--text); border-color: var(--text3); opacity: 1; }
/* Link discreto debajo del botón de ingresar */
.link-btn {
  display: block; margin: 14px auto 0; border: none; background: none;
  font-family: var(--font); font-size: 13px; color: var(--text2);
  cursor: pointer; padding: 4px; text-decoration: underline;
  text-underline-offset: 3px; transition: color .15s;
}
.link-btn:hover { color: var(--accent); }
/* Página del link de acceso: "Crear cuenta" / "Iniciar sesión" */
.acc-modos {
  display: flex; margin: -12px 0 26px; padding: 3px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
}
.acc-modos button {
  flex: 1; min-width: 0; padding: 9px 4px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; font-family: var(--font); font-size: 13px; font-weight: 500;
  color: var(--text2); cursor: pointer; transition: color .15s, background .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acc-modos button:hover { color: var(--text); }
.acc-modos button.activo { background: var(--surface); border-color: var(--border); color: var(--text); }
.error-msg { color: var(--red); font-size: 13px; margin-top: 8px; display: none; line-height: 1.5; }
.ok-msg { color: var(--green); font-size: 13px; margin-top: 8px; display: none; line-height: 1.5; }

/* ---------- Barra superior ---------- */
.topbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 54px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 40;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn-sq {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text2); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.icon-btn-sq:hover, .icon-btn-sq.open { color: var(--text); border-color: var(--border2); background: var(--surface2); }
.icon-btn-sq svg { width: 17px; height: 17px; }
.user-pill {
  display: flex; align-items: center; gap: 8px; background: transparent;
  border: 1px solid var(--border); padding: 5px 11px 5px 5px; border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font); color: var(--text2); cursor: pointer;
  transition: border-color .15s, color .15s; max-width: 220px;
}
.user-pill:hover { border-color: var(--border2); color: var(--text); }
.user-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 22px; height: 22px; min-width: 22px; border-radius: var(--radius-sm);
  background: var(--accent-fill); color: var(--accent-on);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.logout-btn {
  border: 1px solid var(--border); background: transparent; color: var(--text2);
  font-family: var(--font); font-size: 13px; padding: 7px 13px;
  border-radius: var(--radius-sm); cursor: pointer; transition: all .15s; white-space: nowrap;
}
.logout-btn:hover { color: var(--text); border-color: var(--border2); background: var(--surface2); }

/* ---------- Menú de configuración ---------- */
.settings-wrap { position: relative; }
.menu {
  display: none; position: absolute; top: calc(100% + 7px); right: 0; min-width: 216px;
  background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 5px; z-index: 60;
}
.menu.open { display: block; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--radius-sm);
  padding: 9px 10px; font-family: var(--font); font-size: 13.5px; color: var(--text);
  cursor: pointer; transition: background .12s;
}
.menu-item:hover { background: var(--surface2); }
.menu-item svg { width: 15px; height: 15px; min-width: 15px; color: var(--text3); }
.menu-item .menu-check { margin-left: auto; color: var(--accent); opacity: 0; }
.menu-item.active .menu-check { opacity: 1; }
.menu-item.active { color: var(--text); }
.menu-sep { height: 1px; background: var(--border); margin: 5px 0; }
.menu-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text3); padding: 6px 10px 4px;
}

/* ---------- Modales ---------- */
.modal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100;
  align-items: center; justify-content: center; padding: 20px;
}
.modal.open { display: flex; }
.modal-box {
  background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 26px; width: 100%; max-width: 400px;
}
.modal-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.modal-text { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin-bottom: 22px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }
.mbtn {
  padding: 9px 20px; border-radius: var(--radius-sm); font-family: var(--font);
  font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border2);
  background: transparent; color: var(--text2); transition: all .15s; min-width: 72px;
}
.mbtn:hover { color: var(--text); background: var(--surface2); }
.mbtn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); }
.mbtn.primary:hover { opacity: .88; background: var(--accent-fill); color: var(--accent-on); }
.mbtn:disabled { opacity: .45; cursor: default; }

/* Popup de perfil */
.profile-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
.profile-box { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); padding: 26px; width: 100%; max-width: 360px; }
.profile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.profile-avatar { width: 38px; height: 38px; min-width: 38px; font-size: 15px; }
.profile-name { font-size: 17px; font-weight: 600; color: var(--text); }
.profile-fields { margin-bottom: 22px; display: flex; flex-direction: column; }
.profile-field { display: flex; flex-direction: column; gap: 4px; padding: 11px 0; border-top: 1px solid var(--border); }
.profile-label { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--text3); font-weight: 600; }
.profile-field span:last-child { font-size: 14px; color: var(--text); word-break: break-word; }

/* ---------- Pantallas de listado ---------- */
#screen-home, #screen-courses, #screen-examlist { flex-direction: column; }
.main-content { flex: 1; padding: 36px 24px 48px; max-width: 860px; margin: 0 auto; width: 100%; }
.subject-tag { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--text3); text-transform: uppercase; margin-bottom: 10px; }

/* ---------- Panel de arriba de la materia (color de la marca) ---------- */
.hero {
  background: var(--hero); color: #fff; border-radius: var(--radius);
  padding: 28px 28px 26px; margin-bottom: 4px;
}
.hero-greet { font-size: 23px; font-weight: 500; color: rgba(255,255,255,.86); letter-spacing: -.01em; }
.hero-title {
  font-family: var(--font-display); font-size: 38px; font-weight: 500;
  letter-spacing: -.015em; color: #fff; margin-top: 2px;
}
.hero-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.09); color: #fff;
  font-family: var(--font); font-size: 13.5px; font-weight: 500;
  padding: 9px 15px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hero-btn:hover, .hero-btn.open { background: rgba(255,255,255,.19); border-color: rgba(255,255,255,.62); }
.hero-btn svg { width: 15px; height: 15px; min-width: 15px; }
.study-wrap { position: relative; }
.study-chev { transition: transform .25s; }
.study-btn.open .study-chev { transform: rotate(180deg); }
/* Este menú se abre hacia la derecha (el de la ruedita, hacia la izquierda) */
.study-menu { left: 0; right: auto; min-width: 210px; }

/* Preguntas practicadas */
.hero-progress { margin-top: 24px; }
.hp-top { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; flex-wrap: wrap; }
.hp-num { font-size: 31px; font-weight: 700; color: #fff; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.hp-of { font-size: 13.5px; color: rgba(255,255,255,.78); }
.hp-bar { height: 9px; background: rgba(255,255,255,.18); border-radius: 5px; overflow: hidden; }
.hp-bar i { display: block; height: 100%; width: 0; background: var(--hero-bar); border-radius: 5px; transition: width .7s ease; }
.section-title { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: -.015em; margin-bottom: 4px; }
.block-header { display: flex; align-items: center; gap: 14px; margin: 34px 0 0; }
.block-header h2 { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--text2); }
.block-header .line { flex: 1; height: 1px; background: var(--border); }
.block-header .count { font-size: 11px; color: var(--text3); }
/* Ocupa su propia línea (si fuera inline, el rótulo de abajo se le pegaría al lado) */
.back-link {
  display: flex; width: fit-content; align-items: center; gap: 6px; color: var(--text2); cursor: pointer;
  font-size: 13px; border: none; background: none; font-family: var(--font);
  margin-bottom: 20px; padding: 0; transition: color .15s;
}
.back-link:hover { color: var(--text); }
.back-link svg { width: 13px; height: 13px; }
.empty-note { color: var(--text3); font-size: 13.5px; padding: 20px 2px; }

/* ---------- Tabla densa (módulos, categorías, exámenes) ---------- */
.data-table { --cols: 1fr 96px 164px 16px; margin-top: 14px; }
.data-head {
  display: grid; grid-template-columns: var(--cols); gap: 0 18px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;  /* alinea con la raya de las filas */
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text3);
}
.data-row {
  display: grid; grid-template-columns: var(--cols); gap: 0 18px; align-items: center;
  width: 100%; text-align: left; background: none; color: var(--text);
  border: 0; border-bottom: 1px solid var(--border); border-left: 2px solid transparent;
  padding: 18px 14px; font-family: var(--font); cursor: pointer;
  transition: background .12s, border-left-color .12s;
}
.data-row:hover { background: var(--row-hover); border-left-color: var(--border2); }
.data-table.static .data-row { cursor: default; }
.data-table.static .data-row:hover { background: none; border-left-color: transparent; }
.cell-name { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
/* Sin adornos a la izquierda: el peso lo lleva el nombre */
.cell-title { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }
.cell-sub { display: block; font-size: 13px; color: var(--text3); line-height: 1.5; margin-top: 4px; }
.cell-num { font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums; }
.cell-num .unit { display: none; }  /* la unidad solo se muestra en celular, donde no hay encabezado */

/* Estado: una barrita de avance con el rótulo debajo */
.cell-status {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-size: 12.5px; color: var(--text3); font-variant-numeric: tabular-nums;
}
.cell-status.en-curso, .cell-status.hecho { color: var(--green); }
.mini-bar {
  display: block; width: 64px; height: 5px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 1px; overflow: hidden;
}
.mini-bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .4s; }
.st-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.st-label svg { width: 12px; height: 12px; }

/* Raya de color al costado de cada módulo (el color viene de modules.color) */
.data-table.modules .data-head, .data-table.cats .data-head { border-left-width: 4px; }
.data-table.modules .data-row {
  border-left-width: 4px; border-left-color: var(--stripe, var(--border2));
}
.data-table.modules .data-row:hover {
  border-left-color: var(--stripe, var(--border2));
  box-shadow: inset 2px 0 0 var(--stripe, var(--border2));  /* engorda sin correr el texto */
}
/* Las categorías de examen llevan todas la misma raya, en el color de acento */
.data-table.cats .data-row { border-left-width: 4px; border-left-color: var(--accent); }
.data-table.cats .data-row:hover { border-left-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
/* ---------- Temas adentro de un módulo (desplegable) ---------- */
/* La flecha del módulo que se despliega apunta hacia abajo cuando está abierto */
.data-row.expandible .row-chev { transition: transform .18s; }
.data-row.expandible.open .row-chev { transform: rotate(90deg); }
.data-row.expandible.open { background: var(--row-hover); }

.sub-list {
  border-left: 4px solid var(--stripe, var(--border2));
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.sub-row {
  display: grid; grid-template-columns: 26px 1fr 96px 164px 16px; gap: 0 18px; align-items: center;
  width: 100%; text-align: left; background: none; color: var(--text);
  border: 0; border-bottom: 1px solid var(--border);
  padding: 13px 14px 13px 26px; font-family: var(--font); font-size: 14px; cursor: pointer;
  transition: background .12s;
}
.sub-row:last-child { border-bottom: 0; }
.sub-row:hover { background: var(--row-hover); }
.sub-row.vacio { cursor: default; color: var(--text3); }
.sub-row.vacio .sub-num { font-size: 11.5px; white-space: nowrap; }
.sub-row.vacio:hover { background: none; }
.sub-row.todas { border-bottom: 1px solid var(--border2); }
.sub-n {
  font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums;
  text-align: right;
}
.sub-text { line-height: 1.4; min-width: 0; }
.sub-num { font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.sub-num .unit { display: none; }
.sub-row .row-chev { width: 13px; height: 13px; }

.row-chev { width: 14px; height: 14px; color: var(--text3); }
.data-row:hover .row-chev { color: var(--text2); }
.data-table.exams { --cols: 1fr 96px 164px auto; }
.cell-actions { display: flex; gap: 8px; }
.exam-btn {
  padding: 7px 14px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500;
  font-family: var(--font); border: 1px solid var(--border); background: transparent;
  color: var(--text); cursor: pointer; white-space: nowrap; transition: all .15s;
}
.exam-btn:hover { border-color: var(--accent); color: var(--accent); }
.exam-btn.sim { color: var(--amber); }
.exam-btn.sim:hover { border-color: var(--amber); color: var(--amber); }

/* ---------- Temario ("Tu progreso") ---------- */
#screen-temario { flex-direction: column; }
.temario-intro { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin-top: 6px; }
.temario-total {
  margin-top: 18px; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.tt-num { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-num .tt-of { font-weight: 400; color: var(--text2); }
.tt-bar { flex: 1; min-width: 120px; height: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.tt-bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .5s; }

.tem-sec { margin-top: 26px; border-left: 4px solid var(--stripe, var(--border2)); }
.tem-head {
  display: flex; align-items: baseline; gap: 10px; padding: 0 0 8px 14px;
  border-bottom: 1px solid var(--border);
}
.tem-head-name { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--text2); }
.tem-head-n { font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; margin-left: auto; }
.tem-item {
  display: grid; grid-template-columns: 17px 20px 1fr; gap: 12px; align-items: start;
  width: 100%; text-align: left; background: none; color: var(--text);
  border: 0; border-bottom: 1px solid var(--border);
  padding: 12px 10px 12px 14px; font-family: var(--font); font-size: 14px;
  line-height: 1.5; cursor: pointer; transition: background .12s;
}
.tem-item:hover { background: var(--row-hover); }
.tem-box {
  width: 17px; height: 17px; border: 1.5px solid var(--border2); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.tem-box svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.tem-item.done .tem-box { background: var(--green); border-color: var(--green); }
.tem-item.done .tem-box svg { opacity: 1; }
.tem-n { font-size: 12.5px; color: var(--text3); font-variant-numeric: tabular-nums; margin-top: 2px; }
/* Tachado: la raya la pide ella para ver de un vistazo lo que ya cayó */
.tem-item.done .tem-text { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--text3); }

/* ---------- Quiz ---------- */
#screen-quiz { flex-direction: column; }
.quiz-topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 0 22px; height: 52px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
/* Un poco más grande y con área para tocar en el celular; el margen negativo
   compensa el padding para que no se corra del borde. */
.quiz-back {
  display: inline-flex; align-items: center; gap: 7px; color: var(--text2); cursor: pointer;
  font-size: 14.5px; border: none; background: none; font-family: var(--font);
  padding: 7px 10px; margin-left: -10px; border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.quiz-back:hover { color: var(--text); background: var(--surface2); }
.quiz-back svg { width: 16px; height: 16px; }
.quiz-center { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.quiz-module-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-mode-badge { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); white-space: nowrap; }
.quiz-mode-badge.sim { color: var(--amber); }
.quiz-right { display: flex; align-items: center; gap: 16px; }
.quiz-counter { font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timer-display {
  display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--text2);
}
.timer-display svg { width: 14px; height: 14px; }
.timer-display.warning { color: var(--amber); }
.timer-display.danger { color: var(--red); }
/* Línea de progreso pegada al borde inferior de la barra */
.quiz-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s; }

.quiz-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 34px 20px 56px; }
.q-panel {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  max-width: 760px; width: 100%;
}
.q-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 12px 7px 22px; border-bottom: 1px solid var(--border); background: var(--surface2);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text3); border-radius: var(--radius) var(--radius) 0 0;
}
/* Volver a la pregunta anterior: se muestra siempre menos en la primera.
   Va como pastilla con borde para que se despegue del encabezado gris. */
.q-prev {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 999px;
  padding: 6px 14px 6px 11px; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: .01em; color: var(--accent);
  transition: border-color .15s, color .15s, background .15s;
}
.q-prev:hover { border-color: var(--accent); background: var(--surface2); }
.q-prev svg { width: 15px; height: 15px; }
.q-prev[hidden] { display: none; }
.q-body { padding: 26px 22px 24px; }
.q-text { font-size: 17px; font-weight: 400; line-height: 1.62; margin-bottom: 22px; }
.options-list { margin-bottom: 22px; border-top: 1px solid var(--border); }

.opt {
  display: grid; grid-template-columns: 15px 16px 1fr; gap: 12px; align-items: start;
  width: 100%; text-align: left; background: none; color: var(--text);
  border: 0; border-bottom: 1px solid var(--border); border-left: 3px solid transparent;
  padding: 13px 14px; font-family: var(--font); font-size: 14.5px; line-height: 1.55;
  cursor: pointer; transition: background .12s;
}
.opt:hover:not(:disabled) { background: var(--row-hover); }
.opt:disabled { cursor: default; }
.opt-radio { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--text3); margin-top: 3px; position: relative; }
.opt-letter { font-size: 12.5px; font-weight: 600; color: var(--text3); margin-top: 2px; letter-spacing: .03em; }
.opt.selected .opt-radio { border-color: var(--accent); }
.opt.selected .opt-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.opt.selected .opt-letter { color: var(--accent); }
.opt.correct { border-left-color: var(--green); background: var(--tint-green); }
.opt.correct .opt-radio { border-color: var(--green); }
.opt.correct .opt-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--green); }
.opt.correct .opt-letter { color: var(--green); }
.opt.incorrect { border-left-color: var(--red); background: var(--tint-red); }
.opt.incorrect .opt-radio { border-color: var(--red); }
.opt.incorrect .opt-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--red); }
.opt.incorrect .opt-letter { color: var(--red); }

.action-row { display: flex; gap: 10px; }
.btn-confirm, .btn-next {
  flex: 1; padding: 11px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: var(--font); border: 1px solid var(--accent-fill);
  background: var(--accent-fill); color: var(--accent-on); transition: opacity .15s;
}
.btn-confirm:hover, .btn-next:hover { opacity: .88; }
.btn-confirm:disabled { opacity: .35; cursor: default; }
.btn-next { display: none; }

.feedback-box { display: none; margin-bottom: 24px; padding-top: 4px; }
.feedback-box.visible { display: block; }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fb-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); }
.feedback-header { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.feedback-header svg { width: 14px; height: 14px; }
.feedback-header.correct-fb { color: var(--green); }
.feedback-header.incorrect-fb { color: var(--red); }
.feedback-text { font-size: 14px; color: var(--text2); line-height: 1.7; }
.feedback-source { margin-top: 12px; font-size: 12px; color: var(--text3); }
.book-quote { font-size: 14.5px; line-height: 1.72; color: var(--text); border-left: 2px solid var(--border2); padding: 2px 0 2px 16px; margin-bottom: 14px; }
.extra-note { font-size: 13.5px; line-height: 1.65; color: var(--text2); }
.extra-note strong { color: var(--text); font-weight: 600; }
.just-img { max-width: 100%; border-radius: var(--radius-sm); margin: 4px 0 14px; border: 1px solid var(--border); display: block; }
/* Gráfico dentro del enunciado (se ve antes de contestar) */
.q-img { max-width: 100%; display: block; margin: 0 0 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: zoom-in; }
.q-img[hidden] { display: none; }

/* Visor a pantalla completa del gráfico */
.visor { position: fixed; inset: 0; z-index: 200; background: rgba(20, 22, 24, .92); display: flex; align-items: center; justify-content: center; padding: 56px 12px 12px; overflow: auto; cursor: zoom-out; }
.visor[hidden] { display: none; }
/* A tamaño real: en el celular se arrastra para recorrerlo, que es de lo que se trata */
.visor img { max-width: none; margin: auto; background: #fff; border-radius: var(--radius-sm); }
.visor-cerrar { position: absolute; top: 12px; right: 12px; background: #fff; color: var(--text); border: 0; border-radius: var(--radius-sm); padding: 9px 16px; font-family: var(--font); font-size: 14px; cursor: pointer; }

/* ---------- Resultados ---------- */
#screen-results { flex-direction: column; align-items: center; padding: 44px 20px 56px; background: var(--bg); }
.results-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-width: 620px; width: 100%; padding: 32px 30px; }
.results-title { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 6px; }
.results-sub { color: var(--text2); font-size: 13.5px; line-height: 1.6; margin-bottom: 26px; }
.score-block { margin-bottom: 26px; }
.score-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.score-number { font-size: 42px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.score-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); }
.score-bar { height: 4px; background: var(--surface2); border: 1px solid var(--border); }
.score-bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .5s; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); margin-bottom: 26px; }
.stat-box { padding: 14px 12px; text-align: center; border-left: 1px solid var(--border); }
.stat-box:first-child { border-left: none; }
.stat-num { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-num.green { color: var(--green); }
.stat-num.red { color: var(--red); }
.stat-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--text3); margin-top: 4px; }
.results-btns { display: flex; gap: 10px; }
.results-btns .btn { flex: 1; }
/* Revisión: el botón va debajo de "Volver al inicio" y "Repetir", y la lista
   se despliega abajo. Sin caja con scroll propio: se lee bajando la página. */
.review-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.review-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.review-toggle.open svg { transform: rotate(180deg); }
.review-box { margin-top: 26px; }
.review-box[hidden] { display: none; }
.review-filtro { display: flex; border: 1px solid var(--border); margin-bottom: 6px; }
.review-tab {
  flex: 1; padding: 9px 10px; background: transparent; border: 0; border-left: 1px solid var(--border);
  font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--text2); cursor: pointer;
  transition: color .15s, background .15s;
}
.review-tab:first-child { border-left: 0; }
.review-tab:hover { color: var(--text); }
.review-tab.active { background: var(--surface2); color: var(--text); font-weight: 600; }
.review-list { border-top: 1px solid var(--border); }
.review-list .empty-note { padding: 22px 0; }
.review-item { padding: 20px 0; border-bottom: 1px solid var(--border); }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rv-n { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); }
.rv-estado { font-size: 11.5px; font-weight: 600; }
.rv-estado.ok { color: var(--green); }
.rv-estado.mal { color: var(--red); }
.rv-estado.sin { color: var(--text3); }
.review-q { font-size: 14.5px; font-weight: 500; margin-bottom: 12px; line-height: 1.55; }
.review-item .just-img { cursor: zoom-in; margin-bottom: 12px; }
.rv-opts { border-top: 1px solid var(--border); }
.rv-opt {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: start;
  padding: 9px 12px; font-size: 13.5px; line-height: 1.5; color: var(--text2);
  border-bottom: 1px solid var(--border); border-left: 3px solid transparent;
}
.rv-letra { font-size: 12px; font-weight: 600; color: var(--text3); margin-top: 1px; }
.rv-opt.correct { background: var(--tint-green); border-left-color: var(--green); color: var(--text); }
.rv-opt.correct .rv-letra { color: var(--green); }
.rv-opt.incorrect { background: var(--tint-red); border-left-color: var(--red); color: var(--text); }
.rv-opt.incorrect .rv-letra { color: var(--red); }
.rv-tuya { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); white-space: nowrap; margin-top: 3px; }
.rv-opt.correct .rv-tuya { color: var(--green); }
.rv-opt.incorrect .rv-tuya { color: var(--red); }
.review-just { font-size: 13px; color: var(--text2); line-height: 1.65; margin-top: 14px; }
.review-source { font-size: 11.5px; color: var(--text3); margin-top: 8px; }

/* ---------- Admin ---------- */
#screen-admin { flex-direction: column; }
.admin-body { flex: 1; padding: 32px 24px 48px; max-width: 900px; margin: 0 auto; width: 100%; }
.admin-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 4px; }
.admin-sub { color: var(--text2); font-size: 13.5px; margin-bottom: 30px; }
.admin-tabs { display: flex; gap: 2px; margin-bottom: 26px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.admin-tab {
  padding: 10px 15px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text2);
  border: none; background: none; font-family: var(--font);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.admin-panel { display: none; } .admin-panel.active { display: block; }
.users-table { width: 100%; border-collapse: collapse; }
.users-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); padding: 9px 12px; border-bottom: 1px solid var(--border); }
.users-table td { padding: 12px; font-size: 13.5px; border-bottom: 1px solid var(--border); vertical-align: top; }
.status-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm); white-space: nowrap; border: 1px solid transparent; }
.status-badge.active { border-color: var(--green); color: var(--green); }
.status-badge.inactive { border-color: var(--border); color: var(--text3); }
.icon-btn { background: none; border: 1px solid transparent; cursor: pointer; color: var(--text3); padding: 5px; border-radius: var(--radius-sm); transition: color .15s, border-color .15s; display: inline-flex; }
.icon-btn:hover { color: var(--text); border-color: var(--border2); }
.icon-btn svg { width: 15px; height: 15px; }
.question-form { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 22px; margin-bottom: 24px; }
.question-form h3 { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--text2); margin-bottom: 16px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row .field { flex: 1; min-width: 160px; }
.btn-small { padding: 9px 18px; background: var(--accent-fill); color: var(--accent-on); border: 1px solid var(--accent-fill); border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: var(--font); transition: opacity .15s; }
.btn-small:hover { opacity: .88; }
.btn-small:disabled { opacity: .45; cursor: default; }
.btn-small.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn-small.ghost { background: transparent; border-color: var(--border2); color: var(--text2); }
.btn-small.ghost:hover { color: var(--red); border-color: var(--red); opacity: 1; }
.hint { color: var(--text2); font-size: 13px; line-height: 1.65; margin-bottom: 16px; }
.pending-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 20px; margin-bottom: 12px; }
.pending-target { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--text3); margin-bottom: 10px; }
.pending-text { font-weight: 500; margin-bottom: 12px; line-height: 1.55; font-size: 14.5px; }
.pending-opt { font-size: 13px; padding: 7px 10px; margin-bottom: 3px; color: var(--text2); border-left: 3px solid transparent; }
.pending-opt.correct { background: var(--tint-green); border-left-color: var(--green); color: var(--text); }
.pending-meta { font-size: 12px; color: var(--text3); margin-top: 10px; }
.pending-actions { display: flex; gap: 8px; margin-top: 14px; }
.link-cell { font-size: 12px; color: var(--accent); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Flechita de los desplegables (cuestionario de opinión) */
.about-chevron { width: 14px; height: 14px; min-width: 14px; transition: transform .3s ease; color: var(--text3); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 22px; right: 22px; background: var(--surface);
  border: 1px solid var(--border2); border-left: 3px solid var(--green);
  color: var(--text); padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: 13.5px; transform: translateY(80px); opacity: 0; transition: all .28s;
  z-index: 120; max-width: 340px; line-height: 1.45;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.err { border-left-color: var(--red); }

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  .topbar { padding: 0 14px; }
  /* Se oculta el nombre, pero NO el avatar (que también es un span) */
  .user-pill span:not(.avatar) { display: none; }
  .user-pill { padding: 5px; }
  .login-card { padding: 30px 22px; }
  .section-title { font-size: 29px; }
  .main-content { padding: 28px 16px 42px; }

  .hero { padding: 22px 18px 20px; }
  .hero-greet { font-size: 20px; }
  .hero-title { font-size: 30px; }
  .hero-row { gap: 8px; }
  .hero-btn { flex: 1 1 auto; justify-content: center; }
  .study-wrap { flex: 1 1 100%; }
  .study-wrap .hero-btn { width: 100%; }
  .study-menu { left: 0; right: 0; min-width: 0; }
  .hp-num { font-size: 27px; }

  .tem-item { grid-template-columns: 17px 18px 1fr; gap: 10px; padding: 12px 6px 12px 12px; font-size: 13.5px; }

  /* La tabla se convierte en filas de dos líneas */
  .data-head { display: none; }
  .data-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; position: relative; padding: 17px 30px 17px 14px; }
  .cell-name { flex: 1 1 100%; }
  .cell-sub { display: none; }
  /* En celular la barrita y el rótulo van en la misma línea, para no estirar la fila */
  .cell-status { flex-direction: row; align-items: center; gap: 8px; }
  .cell-num .unit { display: inline; }
  .row-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
  .data-table.exams .cell-actions { flex: 1 1 100%; margin-top: 8px; }
  .data-table.exams .exam-btn { flex: 1; }
  .data-table.exams .data-row { padding-right: 14px; }

  /* El módulo que se despliega sí muestra su ayuda ("Elegí un tema...") */
  .data-row.expandible .cell-sub { display: block; }
  /* En celular la flecha está centrada con transform: hay que rehacer el giro */
  .data-row.expandible.open .row-chev { transform: translateY(-50%) rotate(90deg); }
  .sub-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    position: relative; padding: 14px 30px 14px 14px;
  }
  .sub-n { text-align: left; }
  .sub-text { flex: 1 1 calc(100% - 40px); }
  .sub-num .unit { display: inline; }

  .quiz-topbar { padding: 0 14px; gap: 10px; }
  .quiz-center { flex-direction: column; align-items: flex-start; gap: 0; }
  .quiz-counter { display: none; }
  .q-body { padding: 20px 16px; }
  .q-head { padding: 9px 16px; }
  .q-text { font-size: 16px; }
  .opt { padding: 12px 12px; gap: 10px; }

  .results-card { padding: 24px 18px; }
  .modal-box, .profile-box { padding: 22px 18px; }
}

/* ---------- Panel de admin: las materias de cada estudiante ---------- */
.mat-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mat-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 4px 3px 10px; border: 1px solid var(--border2); border-radius: 999px;
  font-size: 12.5px; color: var(--text2); white-space: nowrap;
}
.mat-x {
  background: none; border: none; cursor: pointer; color: var(--text3);
  font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px;
  transition: color .15s;
}
.mat-x:hover { color: var(--red); }
.mat-add { display: inline-flex; align-items: center; gap: 5px; }
.mat-sel {
  padding: 5px 7px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font); font-size: 12.5px;
}
.mat-sel:focus { border-color: var(--accent); }
.mat-add .btn-small { padding: 5px 12px; font-size: 12.5px; }

/* ---------- Panel de admin: de dónde sale la respuesta ---------- */
.senal-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.senal {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.senal::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.senal.ok   { color: var(--green); border-color: var(--green); }
.senal.mal  { color: var(--red);   border-color: var(--red); }
.senal.gris { color: var(--text3); border-color: var(--border2); }
.senal-detalle { font-size: 12px; color: var(--text3); }
.senal.biblio { color: var(--accent); border-color: var(--accent); }

/* ---------- Panel de admin: filtros de las pendientes ---------- */
.filtro-sel {
  padding: 5px 9px; background: var(--bg); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font); font-size: 12.5px; cursor: pointer; max-width: 260px;
}
.filtro-sel:focus { border-color: var(--accent); outline: none; }
.filtro-sel.chico { font-size: 12px; padding: 4px 8px; color: var(--text2); }
.filtro-fila { margin: 10px 0 0; }

/* ---------- Panel de admin: bibliografía de una pregunta verificada ---------- */
.biblio-caja {
  margin: 8px 0 0; padding: 9px 12px;
  border-left: 2px solid var(--border2); background: var(--surface2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px; color: var(--text2); line-height: 1.55;
}
.biblio-nombre { font-weight: 600; color: var(--text); }
.biblio-link { color: var(--accent); text-decoration: none; word-break: break-all; }
.biblio-link:hover { text-decoration: underline; }
.biblio-cita { margin-top: 5px; color: var(--text3); font-style: italic; }
.fb-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fb-link:hover { opacity: .75; }

/* ---------- Panel de admin: editar la justificación a mano ---------- */
.just-form {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--bg);
}
.just-titulo {
  font-family: var(--font-display);
  font-size: 15.5px;
  color: var(--text);
  margin-bottom: 4px;
}
/* Fuente, capítulo y página van en una sola línea mientras entren. */
.just-fila { display: flex; flex-wrap: wrap; gap: 14px; }
.just-fila .field { flex: 1; min-width: 190px; }
.just-form .pending-actions { margin-top: 4px; }

/* ---------- Panel de admin: de qué módulo es cada pendiente ---------- */
.pend-cab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: -20px -20px 16px; padding: 11px 20px 11px 17px;
  border-left: 3px solid var(--stripe, var(--border2));
  border-bottom: 1px solid var(--border); background: var(--surface2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.pend-modulo { font-size: 14px; font-weight: 600; color: var(--text); }
.pend-num {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text3); margin-right: 8px;
}
.pend-curso { font-size: 12px; color: var(--text3); }

/* ---------- Aviso de la admin mirando la app como estudiante ---------- */
.vista-banner {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px;
  background: var(--accent-fill); color: var(--accent-on);
  font-size: 13px; line-height: 1.4; text-align: center;
}
.vista-banner[hidden] { display: none; }
.vista-banner button {
  background: transparent; color: var(--accent-on); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-sm); padding: 4px 12px; font-family: var(--font);
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.vista-banner button:hover { background: rgba(255,255,255,.14); }
/* El botón va al lado del título del panel (en la barra no entra en el celular) */
.admin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 14px 20px; margin-bottom: 30px;
}
.admin-head .admin-sub { margin-bottom: 0; }
.vista-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; }
.vista-btn svg { width: 16px; height: 16px; }
.btn-small.ghost.vista-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Panel de admin: links abiertos para testers ---------- */
.link-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.link-acciones .btn-small { padding: 5px 11px; font-size: 12.5px; white-space: nowrap; }
.mat-tester {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); margin-left: 6px;
}
.link-materia-movil { display: none; color: var(--text3); font-size: 12px; }
@media (max-width: 620px) {
  /* En el celular los botones van uno abajo del otro y la materia debajo del nombre */
  #open-links-list .users-table th:nth-child(2),
  #open-links-list .users-table td:nth-child(2) { display: none; }
  #open-links-list .users-table td, #open-links-list .users-table th { padding: 10px 6px; }
  .link-acciones { flex-direction: column; align-items: stretch; }
  .link-acciones .icon-btn { align-self: flex-end; }
  .link-acciones .btn-small { white-space: normal; }
  .link-materia-movil { display: block; }
}

/* ---------- Panel de admin: la cruz para eliminar una opción ---------- */
.pending-opt { display: flex; align-items: flex-start; gap: 8px; }
.opt-txt { flex: 1; min-width: 0; }
.opt-x {
  flex: none; background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--text3); font-size: 16px; line-height: 1; padding: 1px 6px 3px;
  border-radius: var(--radius-sm); font-family: var(--font); transition: color .15s, border-color .15s;
}
.opt-x:hover { color: var(--red); border-color: var(--red); }

/* ---------- Módulos: Continuar / Volver a intentar / Ver revisión ---------- */
/* Una fila ya empezada lleva sus botones y deja de ser un botón entera. */
.data-row.con-acciones, .sub-row.con-acciones { cursor: default; }
.data-row.con-acciones:hover, .sub-row.con-acciones:hover { background: none; }
.data-table.modules .data-row.con-acciones:hover { box-shadow: none; }
.row-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 11px; }
.fila-btn {
  padding: 6px 13px; border-radius: var(--radius-sm); font-family: var(--font);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border2); background: var(--surface); color: var(--text);
  transition: border-color .15s, color .15s, opacity .15s;
}
.fila-btn:hover { border-color: var(--accent); color: var(--accent); }
.fila-btn.principal { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); }
.fila-btn.principal:hover { opacity: .88; color: var(--accent-on); }
.fila-link {
  background: none; border: 0; padding: 6px 4px; cursor: pointer; font-family: var(--font);
  font-size: 12.5px; color: var(--text3); text-decoration: underline; text-underline-offset: 3px;
  transition: color .15s;
}
.fila-link:hover { color: var(--text); }

/* ---------- Preguntas creadas por Claude ---------- */
/* Estrellita en la cabecera de la tarjeta; el cartel sale al pasar el mouse,
   al enfocarla con el teclado o al tocarla en el celular (.abierta). */
.estrella-claude {
  position: relative; margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; background: none;
  color: var(--amber); cursor: pointer; border-radius: 50%;
}
.estrella-claude svg { width: 16px; height: 16px; fill: currentColor; }
.estrella-claude:hover, .estrella-claude:focus-visible { background: var(--row-hover); outline: none; }
.estrella-tip {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: var(--text); color: var(--bg);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .12s;
  pointer-events: none;
}
.estrella-claude:hover .estrella-tip,
.estrella-claude:focus-visible .estrella-tip,
.estrella-claude.abierta .estrella-tip { opacity: 1; visibility: visible; }
.senal.claude { color: var(--amber); border-color: var(--amber); }
.senal.claude::before { display: none; }
.senal.claude svg { width: 12px; height: 12px; fill: currentColor; flex: none; }

/* ---------- Revisión de Claude en las pendientes ---------- */
/* Tilde verde (verificada o corregida) o marca roja (dudosa) en la cabecera de
   la tarjeta, con el mismo cartel que la estrellita. */
.rev-marca {
  position: relative; margin-left: auto; align-self: center; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  color: var(--surface); cursor: pointer;
}
.rev-marca.ok  { background: var(--green); }
.rev-marca.mal { background: var(--red); }
.rev-marca svg { width: 14px; height: 14px; }
.rev-marca:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rev-marca:hover .estrella-tip,
.rev-marca:focus-visible .estrella-tip,
.rev-marca.abierta .estrella-tip { opacity: 1; visibility: visible; }
.rev-marca + .estrella-claude { margin-left: 0; }
.rev-marca.estatica { margin: 0 8px 0 0; cursor: default; width: 18px; height: 18px; }
.rev-marca.estatica svg { width: 12px; height: 12px; }
.rev-nota {
  margin-top: 12px; padding: 9px 12px; border-left: 3px solid var(--green);
  background: var(--surface2); font-size: 13px; line-height: 1.55; color: var(--text2);
}
.rev-nota strong { color: var(--green); font-weight: 600; margin-right: 2px; }
.rev-nota.dudosa { border-left-color: var(--red); }
.rev-nota.dudosa strong { color: var(--red); }
.pending-card.dudosa { border-color: var(--red); }
/* Botones sueltos (no pegados como en Reportes) para que en el celular bajen
   de renglón sin que queden bordes cortados. */
.rep-filtro.rev-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; border: 0; }
.rep-filtro.rev-filtro button,
.rep-filtro.rev-filtro button:first-child { border: 1px solid var(--border); }
.rep-filtro.rev-filtro button.active { border-color: var(--border2); }
.rev-n-mal { color: var(--red); }
.pend-aparte { margin: 30px 0 14px; padding-top: 18px; border-top: 1px solid var(--border2); }
.pend-aparte-titulo { display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--text); }
.pend-aparte-n { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--red); font-variant-numeric: tabular-nums; }
.pend-aparte p { margin: 6px 0 0; font-size: 13px; color: var(--text3); }

/* ---------- Reportar pregunta ---------- */
/* Va donde antes estaba el apunte y la página: chico, al pie de la justificación. */
.reporte-slot { margin-top: 12px; }
.review-item .reporte-slot { margin-top: 10px; }
.reportar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--font); font-size: 12px; color: var(--text3);
  transition: color .15s;
}
.reportar-btn svg { width: 13px; height: 13px; flex: none; }
.reportar-btn:hover, .reportar-btn[aria-expanded="true"] { color: var(--red); }
.reportar-btn:disabled { cursor: default; color: var(--green); }
.reportar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.reporte-caja {
  margin-top: 8px; max-width: 460px;
  border: 1px solid var(--border2); border-radius: var(--radius);
  background: var(--surface); padding: 16px 16px 12px;
}
.reporte-caja[hidden] { display: none; }
.reporte-titulo { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.reporte-opciones { border-top: 1px solid var(--border); }
.reporte-op {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 2px; border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--text2);
}
.reporte-op:hover { color: var(--text); }
.reporte-op input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex: none; }
.reporte-op input:checked + span { color: var(--text); font-weight: 500; }
.op-texto {
  display: block; width: 100%; margin-top: 10px; padding: 9px 11px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font); font-size: 13.5px; line-height: 1.5;
  resize: vertical; min-height: 64px; outline: none;
}
.op-texto:focus { border-color: var(--accent); }
.op-texto[hidden] { display: none; }
.reporte-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.reporte-acciones { display: flex; gap: 8px; }
.reporte-acciones .mbtn { padding: 7px 16px; font-size: 13px; min-width: 0; }
.reporte-nc {
  background: none; border: 0; padding: 6px 2px; cursor: pointer; margin-left: auto;
  font-family: var(--font); font-size: 12.5px; color: var(--text3);
  text-decoration: underline; text-underline-offset: 3px; transition: color .15s;
}
.reporte-nc:hover { color: var(--text); }
.reporte-nc:disabled { opacity: .45; cursor: default; }

/* ---------- "¿Qué te pareció MedPrep?" (abajo de la pantalla de la materia) ---------- */
.opinion { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; }
.opinion-toggle {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-family: var(--font); font-size: 13.5px;
  font-weight: 500; padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .15s;
}
.opinion-toggle:hover { border-color: var(--border2); }
.opinion-toggle.open .about-chevron { transform: rotate(180deg); }
.opinion-caja {
  width: 100%; max-width: 480px; margin-top: 14px;
  border: 1px solid var(--border2); border-radius: var(--radius); background: var(--surface);
  padding: 20px 20px 16px;
}
.opinion-caja[hidden] { display: none; }
.op-preg { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); margin: 18px 0 8px; }
.op-preg:first-child { margin-top: 0; }
.opinion-caja .op-texto { margin-top: 0; }
.estrellas { display: flex; gap: 4px; }
.estrella {
  width: 34px; height: 34px; padding: 3px; border: 0; background: none; cursor: pointer;
  color: var(--border2); border-radius: var(--radius-sm); transition: color .1s, transform .1s;
}
.estrella svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.estrella.on { color: var(--star); }
.estrella:hover { transform: scale(1.08); }
.estrella:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.op-sino { display: flex; gap: 8px; }
.op-sino-btn {
  min-width: 72px; padding: 8px 18px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--border2); background: transparent; color: var(--text2); transition: all .15s;
}
.op-sino-btn:hover { color: var(--text); background: var(--surface2); }
.op-sino-btn[aria-checked="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); }
.op-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.op-gracias { margin-top: 12px; font-size: 13.5px; color: var(--green); }
.op-gracias[hidden] { display: none; }

/* ---------- Panel: reportes y opiniones ---------- */
.tab-n { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--red); font-variant-numeric: tabular-nums; }
.tab-n:empty { display: none; }
.tab-n.gris { color: var(--text3); }
.rep-filtro { display: inline-flex; border: 1px solid var(--border); margin-bottom: 18px; }
.rep-filtro button {
  padding: 8px 14px; background: transparent; border: 0; border-left: 1px solid var(--border);
  font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--text2); cursor: pointer;
}
.rep-filtro button:first-child { border-left: 0; }
.rep-filtro button.active { background: var(--surface2); color: var(--text); font-weight: 600; }
.rep-lista { margin-top: 14px; border-top: 1px solid var(--border); }
.rep-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text2); line-height: 1.55; }
.rep-motivo { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--red); color: var(--red); margin-right: 8px; }
.rep-motivo.gris { border-color: var(--border2); color: var(--text3); }
.rep-quien { font-size: 12px; color: var(--text3); }
.rep-comentario { margin-top: 5px; color: var(--text); }
.pending-card.resaltada { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.op-resumen { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 22px; }
.op-dato .n { font-size: 24px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.op-dato .l { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--text3); margin-top: 2px; }
.op-estrellas-txt { color: var(--star); letter-spacing: 1px; white-space: nowrap; }
.op-estrellas-txt .vacias { color: var(--border2); }

/* ---------- Panel: estudiantes (resumen, buscador, último ingreso) ---------- */
.users-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.users-resumen { font-size: 13px; color: var(--text2); }
.users-resumen strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.users-buscar {
  width: 240px; max-width: 100%; padding: 7px 10px;
  background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font); font-size: 13px; outline: none;
}
.users-buscar:focus { border-color: var(--accent); }
.user-email { word-break: break-all; }

/* ---------- Panel: materia que se está mirando ---------- */
/* Arriba de las pestañas; todo el panel se limita a la materia elegida. */
.materia-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -8px 0 22px; }
.materia-rotulo { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); }
.materia-filtro { display: inline-flex; border: 1px solid var(--border2); border-radius: var(--radius-sm); overflow: hidden; }
.materia-filtro button {
  padding: 8px 16px; background: var(--surface); border: 0; border-left: 1px solid var(--border2);
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--text2); cursor: pointer;
  transition: background .15s, color .15s;
}
.materia-filtro button:first-child { border-left: 0; }
.materia-filtro button:hover { color: var(--text); background: var(--surface2); }
.materia-filtro button.active { background: var(--accent-fill); color: var(--accent-on); font-weight: 600; }
.materia-filtro button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Tachito para borrar un estudiante, al lado del nombre */
.user-nombre { display: flex; align-items: center; gap: 4px; }
.borrar-user { padding: 3px; margin: -3px 0; }
.borrar-user svg { width: 15px; height: 15px; display: block; }
.borrar-user:hover { color: var(--red); border-color: var(--red); }

/* ---------- Formato pago: visitantes, crear cuenta y pagar ---------- */
/* "Crear cuenta" en la barra de arriba (visitantes): el botón principal */
.cta-btn {
  border: 1px solid var(--accent-fill); background: var(--accent-fill); color: var(--accent-on);
  font-family: var(--font); font-size: 13px; font-weight: 600; padding: 7px 13px;
  border-radius: var(--radius-sm); cursor: pointer; transition: opacity .15s; white-space: nowrap;
}
.cta-btn:hover { opacity: .88; }

/* "Continuar con Google": blanco con la G, como pide Google */
.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 12px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-google:hover { background: var(--surface2); border-color: var(--text3); }
.btn-google svg { width: 18px; height: 18px; min-width: 18px; }
.btn-google:disabled { opacity: .5; cursor: default; }
/* Botón oficial de Google (lo dibuja Google); si carga, reemplaza al propio */
.g-boton { width: 100%; min-height: 44px; display: flex; justify-content: center; }
.g-boton[hidden], .btn-google[hidden] { display: none; }

/* Separador "o con tu email" */
.separador {
  display: flex; align-items: center; gap: 12px; margin: 20px 0 18px;
  font-size: 12px; color: var(--text3);
}
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.cuenta-box { max-width: 420px; max-height: calc(100vh - 40px); overflow-y: auto; }

/* Cartel de pago */
.pago-detalle { list-style: none; margin: -8px 0 4px; padding: 0; border-top: 1px solid var(--border); }
.pago-detalle li {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text2);
}
.pago-detalle li strong { color: var(--text); font-weight: 600; text-align: right; }
.pago-detalle li.precio strong { font-family: var(--font-display); font-size: 20px; font-weight: 500; }

/* Botón "Desbloquear todo" en el panel de la materia: se destaca del resto */
.hero-btn.hero-pago { background: #fff; color: var(--hero); border-color: #fff; font-weight: 600; }
.hero-btn.hero-pago:hover { background: rgba(255,255,255,.88); }

/* Estado de los módulos sin la materia completa: "5 gratis", con candado */
.cell-status.gratis { color: var(--text2); }
.cell-status.gratis.hecho { color: var(--amber); }
.cell-status.bloqueado { color: var(--text3); }

/* Al terminar las gratis de un módulo, arriba de los resultados */
.results-pago {
  border: 1px solid var(--border2); background: var(--surface2); border-radius: var(--radius);
  padding: 18px; margin: 0 0 18px;
}
.rp-texto { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 14px; }
/* En celular no entran los dos botones del visitante: "Iniciar sesión" queda
   adentro del cartel de crear cuenta ("Ya tengo cuenta") */
@media (max-width: 620px) {
  #btn-iniciar { display: none; }
}

/* Panel: pestaña Ventas */
.question-form.venta h3 { display: flex; align-items: center; gap: 10px; }
.venta-abierta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; margin-bottom: 14px; }
.venta-abierta input { width: 16px; height: 16px; accent-color: var(--accent-fill); }
.venta-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Páginas de privacidad y términos */
.legal { max-width: 720px; line-height: 1.7; color: var(--text); }
.legal h1 { font-family: var(--font-display); font-weight: 500; font-size: 32px; margin: 18px 0 4px; }
.legal h2 { font-size: 16px; font-weight: 600; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 14.5px; color: var(--text2); }
.legal ul { padding-left: 20px; }
.legal a { color: var(--accent); }
.legal-fecha { font-size: 12.5px !important; color: var(--text3) !important; margin-bottom: 22px; }

/* Pie con términos, privacidad y botón de arrepentimiento */
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 28px; font-size: 12px; }
.pie-legal a { color: var(--text3); text-decoration: underline; text-underline-offset: 3px; }
.pie-legal a:hover { color: var(--accent); }
.aviso-legal { font-size: 12px; color: var(--text3); text-align: center; margin-top: 14px; line-height: 1.5; }
.aviso-legal a { color: var(--text2); }

/* Botones que se muestran u ocultan según el tipo de cuenta (visitante,
   cuenta con contraseña o de Google, materia completa o no) */
.link-btn[hidden], .cta-btn[hidden], .logout-btn[hidden], .hero-btn[hidden],
.menu-item[hidden], .mbtn[hidden], .results-pago[hidden] { display: none; }