/* ===== FOUNDATION & SHELL ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   1) TOKENS
--------------------------------------------------------------------------- */
:root {
  /* Brand */
  --color-primary:        #4F46E5;
  --color-primary-hover:  #4338CA;
  --color-secondary:      #7C3AED;

  /* Surfaces */
  --color-canvas:         #F8FAFC;
  --color-surface:        #FFFFFF;

  /* Text */
  --color-text:           #111827;
  --color-body:           #374151;
  --color-muted:          #6B7280;

  /* Lines */
  --color-border:         #E5E7EB;
  --color-divider:        #F1F5F9;

  /* Status (fg / bg) */
  --color-success:        #059669;
  --color-success-bg:     #ECFDF5;
  --color-warning:        #D97706;
  --color-warning-bg:     #FFFBEB;
  --color-danger:         #DC2626;
  --color-danger-bg:      #FEF2F2;
  --color-neutral:        #6B7280;
  --color-neutral-bg:     #F3F4F6;

  /* Accuracy thresholds (reuse for all % badges/bars) */
  --color-acc-high:       var(--color-success);   /* >=70%  */
  --color-acc-mid:        var(--color-warning);    /* 50–69% */
  --color-acc-low:        var(--color-danger);     /* <50%   */
  --color-acc-none:       var(--color-neutral);    /* Sin datos */

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Radius */
  --radius-input:  8px;
  --radius-card:   12px;
  --radius-pill:   9999px;

  /* Shadows (soft, never glossy) */
  --shadow-card:   0 1px 2px rgba(16, 24, 40, .05);
  --shadow-pop:    0 4px 12px rgba(16, 24, 40, .08);

  /* Spacing — 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Shell */
  --sidebar-width: 240px;
  --sidebar-rail-width: 68px;
  --content-max:   1180px;

  /* Focus ring */
  --ring: 0 0 0 3px rgba(79, 70, 229, .35);

  /* ---- Short-name aliases ----------------------------------------------
     Existing inline styles + JS across the app use short token names.
     Map them onto the foundation tokens so nothing references an
     undefined variable. Prefer the --color-* names in new code. */
  --primary:        var(--color-primary);
  --primary-hover:  var(--color-primary-hover);
  --secondary:      var(--color-secondary);
  --bg:             var(--color-canvas);
  --surface:        var(--color-surface);
  --text:           var(--color-text);
  --body:           var(--color-body);
  --muted:          var(--color-muted);
  --border:         var(--color-border);
  --border-color:   var(--color-border);
  --divider:        var(--color-divider);
  --success:        var(--color-success);
  --warning:        var(--color-warning);
  --danger:         var(--color-danger);
}

/* ---------------------------------------------------------------------------
   2) RESET & BASE
--------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

/* The hidden attribute must always win, even over a class that sets display
   (flex/grid). JS across the app toggles visibility via [hidden]. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--color-body);
  background: var(--color-canvas);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }

p { color: var(--color-body); }

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { color: var(--color-primary-hover); }

img,
svg { display: block; max-width: 100%; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-input);
}

/* ---------------------------------------------------------------------------
   3) APP SHELL — SIDEBAR  (hooks from header.php)
--------------------------------------------------------------------------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;               /* top:0 right:auto bottom:0 left:0 */
  width: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-4);
  z-index: 50;
  transition: width .2s ease;
}

/* Logo (anchor) */
.sidebar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: var(--color-text);
}
.sidebar__logo:hover { color: var(--color-text); }
.sidebar__logo-name {
  height: 36px;
  width: auto;
  object-fit: contain;
}

/* User strip */
.sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3);
  background: var(--color-divider);
  border-radius: var(--radius-card);
}
.sidebar__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: .8125rem;
  flex: 0 0 auto;
}
.sidebar__userinfo {
  display: flex;
  flex-direction: column;
  min-width: 0;            /* allow children to truncate */
}
.sidebar__username {
  font-weight: 600;
  font-size: .875rem;
  color: var(--color-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__userrole {
  font-size: .75rem;
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav lists */
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-6);
}
.sidebar__bottom {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Links */
.sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  color: var(--color-body);
  font-weight: 500;
  font-size: .9375rem;
  transition: background-color .12s ease, color .12s ease;
}
.sidebar__link:hover {
  background: var(--color-divider);
  color: var(--color-text);
}
.sidebar__link.is-active {
  background: rgba(79, 70, 229, .08);
  color: var(--color-primary);
}
.sidebar__link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.sidebar__link-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: currentColor;
}
.sidebar__link-icon svg { width: 18px; height: 18px; }

/* Collapse/expand toggle — hidden by default; only the desktop rail uses it
   (shown via the min-width:1025px block below). */
.sidebar__toggle { display: none; }
.sidebar__toggle-icon { display: inline-grid; place-items: center; }

/* ---------------------------------------------------------------------------
   3b) APP SHELL — MAIN CONTENT
--------------------------------------------------------------------------- */
.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background: var(--color-canvas);
  padding: var(--space-8) var(--space-6);
  transition: margin-left .2s ease;
}
.main-content > * {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   3c) APP SHELL — MOBILE (hamburger + overlay), under 1024px
   Icon swap (.icon-open/.icon-close) is driven by inline styles in header.php
   JS; CSS only sets the resting state.
--------------------------------------------------------------------------- */
.hamburger {
  display: none;
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 60;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
}
.hamburger .icon-open  { display: inline-flex; }
.hamburger .icon-close { display: none; }   /* JS overrides via inline style */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .4);
  z-index: 45;
}
.sidebar-overlay.is-open { display: block; }

@media (max-width: 1024px) {
  .hamburger { display: inline-flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-pop);
  }
  .sidebar.is-open { transform: translateX(0); }

  .main-content {
    margin-left: 0;
    padding-top: calc(var(--space-8) + 40px);
  }
}

/* ---------------------------------------------------------------------------
   3d) APP SHELL — ICON-RAIL MODE (ROADMAP #6)
   When body.is-nav-rail is set (study.php toggles it on node focus), the global
   sidebar collapses to an icon-only rail: labels/logo/userinfo hidden, icons
   centered, and .main-content reclaims the freed width. Scoped to desktop only
   (min-width:1025px) so it never fights the mobile drawer (≤1024px), which uses
   transform/translateX with margin-left:0.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* The manual collapse/expand button lives only on desktop. */
  .sidebar__toggle {
    align-self: flex-end;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
  }
  .sidebar__toggle:hover {
    background: var(--color-divider);
    color: var(--color-text);
  }
  body.is-nav-rail .sidebar__toggle { align-self: center; }

  body.is-nav-rail .sidebar {
    width: var(--sidebar-rail-width);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  body.is-nav-rail .sidebar__logo-name,
  body.is-nav-rail .sidebar__userinfo,
  body.is-nav-rail .sidebar__link-label {
    display: none;
  }
  /* Center the remaining glyphs in the narrow rail. */
  body.is-nav-rail .sidebar__user {
    justify-content: center;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  body.is-nav-rail .sidebar__link {
    justify-content: center;
    gap: 0;
  }
  body.is-nav-rail .main-content {
    margin-left: var(--sidebar-rail-width);
  }

  /* ROADMAP #7 — reclaim the freed width. The .main-content > * cap
     (--content-max, centered) otherwise leaves the rail's reclaimed space as an
     empty gutter. Drop the cap ONLY inside an open subject (tree + reader); the
     two-level asignaturas grid keeps its comfortable max-width. */
  body.is-nav-rail .study-wrap:has(> .subject-view:not([hidden])) {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   4) SHARED COMPONENTS
--------------------------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; }

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-secondary:hover { background: var(--color-divider); }

.btn-ghost { background: transparent; color: var(--color-body); }
.btn-ghost:hover { background: var(--color-divider); color: var(--color-text); }

.btn-sm { padding: var(--space-1) var(--space-3); font-size: .8125rem; }
.btn-block { display: flex; width: 100%; }

/* Card + subcomponents (card-header / card-title / card-body used across pages) */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
}
.card-body { color: var(--color-body); }

/* Badges (soft tinted pills) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}
.badge-success { color: var(--color-success); background: var(--color-success-bg); }
.badge-warning { color: var(--color-warning); background: var(--color-warning-bg); }
.badge-danger  { color: var(--color-danger);  background: var(--color-danger-bg);  }
.badge-neutral { color: var(--color-neutral); background: var(--color-neutral-bg); }

/* Status dots (status-dot--{status}; status set by study.php JS) */
.status-dot {
  display: inline-grid;
  place-items: center;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral);
  color: #fff;
  flex: 0 0 auto;
  transition: width .12s ease, height .12s ease, background-color .12s ease;
}
.status-dot--pending     { background: var(--color-neutral); }
.status-dot--in_progress { background: var(--color-primary); }
/* Done: a filled green check (set inline by study.php's dotHtml). */
.status-dot--done {
  width: 17px;
  height: 17px;
  background: var(--color-success);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.status-dot--done svg { display: block; }

/* Dopamine pop when a tema is freshly marked done (class added by study.php JS,
   removed after it runs). Springy scale + a radiating ring + the check springing
   in. Disabled under reduced-motion. */
@keyframes dotPop {
  0%   { transform: scale(.35); }
  45%  { transform: scale(1.45); }
  70%  { transform: scale(.88); }
  100% { transform: scale(1); }
}
@keyframes dotRing {
  0%   { box-shadow: 0 0 0 0 rgba(5,150,105,.55); }
  100% { box-shadow: 0 0 0 14px rgba(5,150,105,0); }
}
@keyframes checkSpring {
  0%   { opacity: 0; transform: scale(.2) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.status-dot--pop {
  animation: dotPop .55s cubic-bezier(.34,1.56,.64,1) both,
             dotRing .6s ease-out both;
}
.status-dot--pop svg { animation: checkSpring .5s cubic-bezier(.34,1.56,.64,1) both; }
@media (prefers-reduced-motion: reduce) {
  .status-dot--pop,
  .status-dot--pop svg { animation: none; }
}

/* Utility */
.text-muted { color: var(--color-muted); }

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  color: var(--color-text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input::placeholder,
textarea::placeholder { color: var(--color-muted); }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ring);
}

/* Toast — built by app.js: #toast-container > .toast.<type> with
   .toast__icon / .toast__body (.toast__title + .toast__message) / .toast__close.
   Exit state adds .removing. Types: success | error | warning | info. */
#toast-container {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-neutral);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-pop);
  color: var(--color-text);
  animation: toast-in .2s ease;
}
.toast.removing { animation: toast-out .2s ease forwards; }

.toast__icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.toast__body { flex: 1 1 auto; min-width: 0; }
.toast__title { font-size: .875rem; font-weight: 600; color: var(--color-text); }
.toast__message { font-size: .8125rem; color: var(--color-body); }
.toast__close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-muted);
  padding: 0 var(--space-1);
}
.toast__close:hover { color: var(--color-text); }

.toast.success { border-left-color: var(--color-success); }
.toast.success .toast__icon { color: var(--color-success); }
.toast.error   { border-left-color: var(--color-danger); }
.toast.error   .toast__icon { color: var(--color-danger); }
.toast.warning { border-left-color: var(--color-warning); }
.toast.warning .toast__icon { color: var(--color-warning); }
.toast.info    { border-left-color: var(--color-primary); }
.toast.info    .toast__icon { color: var(--color-primary); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(12px); }
}

/* ---------------------------------------------------------------------------
   5) SHARED SYLLABUS TREE (used by Estudiar AND Tests — built by JS)
   Hooks: .tree(.tree--root) .tree__item .tree__children .tree__row(.is-selected
   .is-done) .tree__chevron(.tree__chevron--leaf) .tree__status(button)
   .tree__check(tests) .tree__name .tree__src .tree__prov + .tree-wrap.
   JS sets row padding-left inline for depth — do NOT override it.
--------------------------------------------------------------------------- */
.tree-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  overflow: auto;
}

.tree,
.tree__children { display: flex; flex-direction: column; }
.tree__item { display: flex; flex-direction: column; }

/* Row */
.tree__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  padding-right: var(--space-3);          /* left padding set inline by JS */
  border-radius: var(--radius-input);
  color: var(--color-body);
  cursor: pointer;
  transition: background-color .1s ease;
}
.tree__row:hover { background: var(--color-divider); }
.tree__row.is-selected {
  background: rgba(79, 70, 229, .08);
  color: var(--color-primary);
}
.tree__row.is-done .tree__name { color: var(--color-muted); }
.tree__row:focus-visible { outline: none; box-shadow: var(--ring); }

/* Chevron (button-like toggle) */
.tree__chevron {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--color-muted);
  border-radius: var(--radius-input);
  cursor: pointer;
}
.tree__chevron svg { display: block; }
.tree__chevron:hover { background: var(--color-border); color: var(--color-text); }
.tree__chevron--leaf { visibility: hidden; cursor: default; }  /* keep alignment */

/* Expand / collapse — driven by aria-expanded on the .tree__item.
   The caret SVG points right; rotating the button 90° makes it point down. */
.tree__chevron { transition: transform .18s cubic-bezier(.4,0,.2,1), background-color .1s ease, color .1s ease; }
.tree__item[aria-expanded="true"]  > .tree__row .tree__chevron { transform: rotate(90deg); }
.tree__item[aria-expanded="false"] > .tree__children { display: none; }

/* Status toggle button (Estudiar) — cycles pending/in_progress/done */
.tree__status {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.tree__status:hover { background: var(--color-divider); }

/* Check toggle (Tests) — square selector */
.tree__check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  cursor: pointer;
}
.tree__check.is-checked,
.tree__check[aria-checked="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Labels */
.tree__name { font-size: .9375rem; font-weight: 500; color: inherit; }
.tree__src  { font-size: .75rem; color: var(--color-muted); font-weight: 400; margin-left: var(--space-1); }
.tree__prov { font-size: .75rem; color: var(--color-warning); font-weight: 500; margin-left: auto; }

/* ===== DASHBOARD ===== */
/* Scoped to .dash-page so this block never collides with other pages. */

.dash-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* --- Page head: eyebrow (oposición, caps) · h1 · meta line --------------- */
.dash-head { display: flex; flex-direction: column; gap: var(--space-1); }
.dash-head__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.dash-head h1 { font-size: 1.75rem; line-height: 1.2; }
.dash-head__meta {
  font-size: .9375rem;
  color: var(--color-muted);
  max-width: 70ch;
}

/* Loading / empty states */
.dash-state {
  color: var(--color-muted);
  font-size: .9375rem;
  padding: var(--space-4) var(--space-1);
}

/* --- Oposición rollup: one card, 4-up stat grid + sub line -------------- */
.dash-page .rollup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.dash-page .rollup-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.dash-page .rollup-stat .num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.dash-page .rollup-stat .lbl {
  font-size: .8125rem;
  color: var(--color-muted);
}
.dash-page .rollup-sub {
  margin-top: calc(-1 * var(--space-6));   /* tighten under the stat grid */
  font-size: .8125rem;
  color: var(--color-muted);
}

/* --- Rollup stat cards (icon + big number + caption) -------------------- */
.dash-page .stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform .14s ease, box-shadow .14s ease;
}
/* Read-only summary cards: lift gently on hover (not clickable). */
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.stat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.stat-card__label { font-size: .8125rem; color: var(--color-muted); }
.stat-card__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-input);
  flex: 0 0 auto;
}
.stat-card__icon--indigo { background: rgba(79, 70, 229, .1);  color: var(--color-primary); }
.stat-card__icon--green  { background: var(--color-success-bg); color: var(--color-success); }
.stat-card__icon--amber  { background: var(--color-warning-bg); color: var(--color-warning); }
.stat-card__icon--violet { background: rgba(124, 58, 237, .1); color: var(--color-secondary); }
.stat-card__num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.stat-card__sub { font-size: .8125rem; color: var(--color-muted); }
/* Skeleton placeholder shown before stats load */
.dash-page .skeleton-num {
  display: inline-block;
  width: 2.5ch;
  height: 1.5rem;
  border-radius: var(--radius-input);
  background: var(--color-divider);
  animation: dash-skeleton 1.2s ease-in-out infinite;
}
@keyframes dash-skeleton {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* --- Section title above the subject cards ------------------------------ */
.dash-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: calc(-1 * var(--space-4));  /* tighten to the grid below */
}

/* --- Subject cards (responsive grid) ----------------------------------- */
.subj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}
.subj-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
/* Clickable subject cards (link to study.php): scale up on hover. */
.subj-card:hover { transform: scale(1.02); box-shadow: var(--shadow-pop); }
.subj-card:hover .subj-card__title { color: var(--color-primary); }
.subj-card:focus-visible { outline: none; box-shadow: var(--ring); }

.subj-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.subj-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subj-card__prov { flex: 0 0 auto; }   /* provisional badge (uses .badge) */

/* Last-studied label, pinned to the top-right of the card head. */
.subj-card__last {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  font-size: .75rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.subj-card__last--none { font-style: italic; opacity: .8; }

/* Progress (Estudiado) */
.subj-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.subj-progress__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--color-muted);
}
.subj-progress__pct {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.subj-progress__bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-divider);
  overflow: hidden;
}
.subj-progress__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);   /* default before threshold modifier */
  transition: width .3s ease;
}
/* Fill color follows the accuracy threshold (set by dashboard.php JS) */
.subj-progress__fill--high { background: var(--color-acc-high); }
.subj-progress__fill--mid  { background: var(--color-acc-mid); }
.subj-progress__fill--low  { background: var(--color-acc-low); }
.subj-progress__fill--none { background: var(--color-acc-none); }

/* Stats row: N en banco · acierto pill · N por repasar */
.subj-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: .8125rem;
  color: var(--color-body);
}
.subj-stat-num strong {
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.subj-stat-sep { color: var(--color-border); }

/* CTAs */
.subj-cta {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
}
.subj-cta .btn { flex: 1 1 0; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .dash-page .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dash-page .rollup-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
  .subj-grid { grid-template-columns: 1fr; }
}

/* ===== PERFIL ===== */
/* The account page: a read-only overview (identity + stat cards + Ajustes
   summary) followed by the editable oposición / account forms. Reuses the
   global .stat-card / .badge / foundation tokens; all rules are pf-* scoped. */

.pf-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 880px;
  margin-inline: 0;            /* left-align the settings column */
}

/* --- Page head: eyebrow (caps) · h1 ------------------------------------- */
.pf-header { display: flex; flex-direction: column; gap: var(--space-1); }
.pf-header__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.pf-header__title { font-size: 1.75rem; line-height: 1.2; }

/* --- Identity card (avatar + name/email/role) -------------------------- */
.pf-identity {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.pf-identity__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(79, 70, 229, .1);
}
.pf-identity__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.pf-identity__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
}
.pf-identity__email {
  font-size: .875rem;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-identity__role {
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(79, 70, 229, .1);
}

/* --- Overview stat cards (2×2 grid; reuses global .stat-card) ----------- */
.pf-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

/* --- Ajustes summary (read-only rows) ---------------------------------- */
.pf-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-6) var(--space-2);
}
.pf-summary__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.pf-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-divider);
}
.pf-summary__label { font-size: .875rem; color: var(--color-muted); }
.pf-summary__value {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
}

/* --- Section divider before the editable forms ------------------------- */
.pf-edit-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* --- Editable sections (oposición + account) --------------------------- */
.pf-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.pf-section__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.pf-section__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-input);
  display: grid;
  place-items: center;
  font-size: 1.0625rem;
}
.pf-section__icon--indigo { background: rgba(79, 70, 229, .1);  color: var(--color-primary); }
.pf-section__icon--slate  { background: var(--color-neutral-bg); color: var(--color-body); }
.pf-section__icon--rose   { background: var(--color-danger-bg);  color: var(--color-danger); }
.pf-section__title { font-size: 1.0625rem; font-weight: 600; }
.pf-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
}

/* --- Rows, labels, inputs ---------------------------------------------- */
.pf-row { display: flex; flex-direction: column; gap: var(--space-2); }
.pf-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-body);
}
.pf-input {
  width: 100%;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.pf-input::placeholder { color: var(--color-muted); }
.pf-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ring);
}
.pf-hint { font-size: .8125rem; color: var(--color-muted); }

/* --- Oposición search + dropdown --------------------------------------- */
.pf-search-wrap { position: relative; }
.pf-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-pop);
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.pf-dropdown.is-open { display: block; }
.pf-dropdown__item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--color-divider);
}
.pf-dropdown__item:last-child { border-bottom: none; }
.pf-dropdown__item:hover,
.pf-dropdown__item:focus {
  background: var(--color-divider);
  outline: none;
}
.pf-dropdown__name { font-size: .9375rem; font-weight: 600; color: var(--color-text); }
.pf-dropdown__meta { font-size: .8125rem; color: var(--color-muted); }
.pf-dropdown__empty { padding: var(--space-4); font-size: .875rem; color: var(--color-muted); }

/* --- Selected-oposición badge (shown after pick) ----------------------- */
.pf-badge {
  display: none;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(79, 70, 229, .1);
}
.pf-badge.is-visible { display: inline-flex; }
.pf-badge__clear {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-primary);
  background: rgba(79, 70, 229, .14);
}
.pf-badge__clear:hover { background: rgba(79, 70, 229, .24); }

/* --- Days-until-exam pill ---------------------------------------------- */
.pf-days-pill {
  display: none;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-secondary);
  background: rgba(124, 58, 237, .1);
}
.pf-days-pill.is-visible { display: inline-flex; }

/* --- Save row, button, spinner, error ---------------------------------- */
.pf-save-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.pf-save-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: background .14s ease;
}
.pf-save-btn:hover { background: var(--color-primary-hover); }
.pf-save-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.pf-save-btn:disabled { opacity: .65; cursor: default; }
.pf-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: var(--radius-pill);
  animation: pf-spin .7s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-error {
  font-size: .875rem;
  color: var(--color-danger);
  display: none;
}
.pf-error.is-visible { display: inline; }

/* --- Danger zone (account deletion) ------------------------------------- */
.pf-section--danger {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}
.pf-section--danger .pf-section__title { color: var(--color-danger); }
.pf-danger-note {
  font-size: .875rem;
  color: var(--color-body);
  margin-bottom: var(--space-4);
}
.pf-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--color-danger);
  border: none;
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: background .14s ease;
}
.pf-delete-btn:hover { background: #B91C1C; }
.pf-delete-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-danger-bg), 0 0 0 4px var(--color-danger); }
.pf-delete-btn:disabled { opacity: .65; cursor: default; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
  .pf-stats { grid-template-columns: 1fr; }
  .pf-identity { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ===== ESTUDIAR ===== */
/* Scoped to .study-wrap. Reuses foundation tokens, .btn, .badge and the shared
   .tree widget; only adds Estudiar-specific rules. */

.study-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* --- Header ------------------------------------------------------------- */
.study-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.study-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.study-title { font-size: 1.75rem; line-height: 1.2; margin-top: 2px; }
.study-subtitle { font-size: .9375rem; color: var(--color-muted); margin-top: var(--space-1); }

/* --- Two-column board: tree (main) + reader (side) ---------------------- */
/* ROADMAP #7 — three grid tracks: tree | drag-splitter | reader. The middle
   track replaces the old gap (24px) so the default spacing is unchanged; it
   carries the resize handle. Once the user drags, JS adds .is-resized and sets
   --study-tree-w (px): the tree becomes that fixed width and the reader absorbs
   the rest (1fr). */
.study-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--study-resizer-w, 24px) 340px;
  align-items: start;
}
.study-board.is-resized {
  grid-template-columns: var(--study-tree-w, 1fr) var(--study-resizer-w, 24px) minmax(320px, 1fr);
}
/* When the reader is closed, reclaim its column (and hide the splitter). The
   :has() rule outranks .is-resized, so a closed reader always collapses to one
   column even after a manual resize. */
.study-board:has(.reader-card.is-closed) { grid-template-columns: 1fr; }
.study-board:has(.reader-card.is-closed)   .study-board__resizer,
.study-board:has(.reader-card.is-modal)    .study-board__resizer,
.study-board:has(.reader-card.is-fullscreen) .study-board__resizer { display: none; }

.study-board__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  /* Establish an inline-size container so the tree text can scale with the
     box width (clamp + cqi below) — covers both drag-resize and full-width. */
  container-type: inline-size;
  container-name: studytree;
}
.study-board__side { position: sticky; top: var(--space-6); }

/* Drag handle between tree and reader. Full-height grab strip with a centered
   hairline that thickens/colours on hover, focus and during a drag. */
.study-board__resizer {
  align-self: stretch;
  position: relative;
  min-height: 60px;
  cursor: col-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.study-board__resizer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--color-border);
  border-radius: 2px;
  transition: width .1s ease, background-color .1s ease;
}
.study-board__resizer:hover::before,
.study-board__resizer:focus-visible::before,
.study-board__resizer.is-dragging::before {
  width: 3px;
  background: var(--color-primary);
}
.study-board__resizer:focus-visible { outline: none; }

/* Tree text scales with the tree box width (ROADMAP #7). cqi = 1% of the
   .study-board__main inline size, so narrowing the box (drag) shrinks the font
   and widening it (full-width rail) grows it, bounded by the clamp. */
.study-board__main .tree__name { font-size: clamp(.8125rem, .69rem + .92cqi, 1rem); }
.study-board__main .tree__src  { font-size: clamp(.6875rem, .60rem + .55cqi, .8125rem); }

/* --- Subjects container (no card chrome; each subject is its own card) -- */
.subjects-card { display: flex; flex-direction: column; gap: var(--space-3); }
.subjects-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.subjects-card__title { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.subjects-card__hint  { font-size: .8125rem; color: var(--color-muted); }

/* Inline create row */
.subject-create { display: flex; gap: var(--space-2); align-items: center; }
.subject-create__input { flex: 1 1 auto; }

/* Neutralise the shared tree-wrap card look on this page only. */
.study-board .tree-wrap {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}
.study-board .tree--root { gap: var(--space-3); }

/* Each top-level subject = a white card that expands to hold its sub-tree. */
.study-board .tree--root > .tree__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.study-board .tree--root > .tree__item:hover { box-shadow: var(--shadow-pop); }
.study-board .tree--root > .tree__item > .tree__children { padding: 0 var(--space-2) var(--space-2); }

/* Big subject row */
.tree__row--subject {
  gap: var(--space-3);
  min-height: 64px;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  padding-right: var(--space-5);
  border-radius: 0;
}
.tree__row--subject:hover { background: transparent; }   /* the card hovers, not the row */
.tree__row--subject.is-selected { background: rgba(79, 70, 229, .06); }
.tree__row--subject .tree__status { display: none; }     /* status dot hidden on subjects */
.tree__row--subject .tree__chevron { order: 9; color: var(--color-muted); }
.tree__row--subject .tree__name { font-size: 1rem; font-weight: 600; color: var(--color-text); }

.subject-row__icon {
  order: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-input);
  background: var(--color-divider);
  color: var(--color-muted);
}
.subject-row__main {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.subject-row__bar {
  height: 6px;
  width: 100%;
  max-width: 560px;
  border-radius: var(--radius-pill);
  background: var(--color-divider);
  overflow: hidden;
}
.subject-row__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: width .3s ease;
}
.subject-row__count {
  order: 7;
  flex: 0 0 auto;
  font-size: .8125rem;
  color: var(--color-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* "Estudiar" play control — hidden until the node is in the in-progress
   (review) state. Sits on the right of the row. */
.study-board .tree__play {
  display: none;
  order: 8;
  margin-left: auto;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
}
.study-board .tree__play svg { display: block; }
.study-board .tree__play:hover { background: var(--color-primary-hover); }

/* Show ▶ where it's actionable: hover, the selected row, an in-progress node,
   or the row of the running session (where it becomes ⏹). */
.study-board .tree__row:hover .tree__play,
.study-board .tree__row.is-selected .tree__play,
.study-board .tree__item[data-status="in_progress"] > .tree__row .tree__play,
.study-board .tree__row.is-studying .tree__play { display: inline-flex; }

/* Faint tint for the in-progress (review) state. */
.study-board .tree__item[data-status="in_progress"] > .tree__row { background: rgba(79, 70, 229, .045); }

/* Active session row → pause/resume control (indigo, stronger tint). */
.study-board .tree__row.is-studying { background: rgba(79, 70, 229, .09); }

/* Edit (pencil) control on mother nodes — calm, revealed on hover/focus like the
   play control. Sits at the far right, after the ▶ button. Opens edit mode. */
.study-board .tree__actions {
  order: 9;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.study-board .tree__row:hover .tree__actions,
.study-board .tree__row.is-selected .tree__actions,
.study-board .tree__row:focus-within .tree__actions {
  opacity: 1;
  pointer-events: auto;
}
.study-board .tree__action {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 0;
  background: none;
  border-radius: var(--radius-input);
  color: var(--color-muted);
  cursor: pointer;
}
.study-board .tree__action svg { display: block; }
.study-board .tree__action:hover { background: var(--color-divider); color: var(--color-text); }

/* Temario edit mode — builder-style editable forest (reuses .proposal-* rows). */
.study-board .tree-editor { display: flex; flex-direction: column; gap: var(--space-3); }
.study-board .tree-editor__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.study-board .tree-editor__addbar { display: flex; }
.study-board .tree-editor__roothead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.study-board .tree-editor__roothead .proposal-name-input { flex: 1 1 12rem; }
.study-board .tree-editor__topactions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Timer panel finish button spans the panel width. */
.mini-timer__finish { width: 100%; }

/* Empty / no-oposición states */
.subjects-state { color: var(--color-muted); font-size: .9375rem; padding: var(--space-4) var(--space-1); }
.subjects-state__title { font-weight: 600; color: var(--color-text); margin-bottom: var(--space-1); }
.subjects-state__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* --- Functional PDF dropzone ------------------------------------------- */
.pdf-dropzone {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.pdf-dropzone:hover,
.pdf-dropzone:focus-visible { border-color: var(--color-primary); background: rgba(79, 70, 229, .03); outline: none; }
.pdf-dropzone.is-dragover { border-color: var(--color-primary); background: rgba(79, 70, 229, .07); }
.pdf-dropzone.is-busy { opacity: .6; pointer-events: none; }
.pdf-dropzone.is-disabled { opacity: .5; pointer-events: none; }
.pdf-dropzone__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-divider);
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
}
.pdf-dropzone__text { display: flex; flex-direction: column; gap: 2px; }
.pdf-dropzone__title { font-weight: 600; color: var(--color-text); }
.pdf-dropzone__hint  { font-size: .8125rem; color: var(--color-muted); }

/* --- Reader: docked panel ⇄ floating modal ----------------------------- */
.reader-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-height: calc(100vh - var(--space-8) * 2);
  overflow: hidden;
}
.reader-card.is-closed { display: none; }

.reader-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.reader-card__title { font-size: .875rem; font-weight: 600; color: var(--color-text); }
.reader-card__node  { font-size: .75rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-card__actions { margin-left: auto; display: flex; gap: var(--space-1); flex: 0 0 auto; }
.reader-card__btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  border-radius: var(--radius-input);
  color: var(--color-muted);
  font-size: .9375rem;
}
.reader-card__btn:hover { background: var(--color-divider); color: var(--color-text); }
.reader-card__body { padding: var(--space-4); overflow: auto; display: flex; flex-direction: column; min-height: 0; }

/* Floating window + full-screen + backdrop.
   The reader lives inside .study-board__side, which is position:sticky and so
   creates a stacking context that would trap the card *below* the fixed
   backdrop. While floating, drop the side out of sticky so the fixed card
   escapes to the root stacking context and sits above the backdrop. */
.study-board:has(.reader-card.is-modal) .study-board__side,
.study-board:has(.reader-card.is-fullscreen) .study-board__side {
  position: static;
}

.reader-card.is-modal,
.reader-card.is-fullscreen {
  position: fixed;
  z-index: 200;          /* above the backdrop (150) */
  box-shadow: var(--shadow-pop);
}
.reader-card.is-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 92vw);
  max-height: 86vh;
}
.reader-card.is-fullscreen {
  inset: var(--space-4);
  width: auto;
  max-height: none;
  transform: none;
}

.reader-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .35);   /* dims what's behind, a bit */
  z-index: 150;                         /* below the floating reader (200) */
}

/* Reader tools / state / body / children (moved from inline <style>) */
.reader-tools { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.reader-tools__btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-input);
  padding: 2px var(--space-2);
  font-size: .85rem;
  line-height: 1.45;
}
.reader-tools__btn:hover:not(:disabled) { background: rgba(79, 70, 229, .08); }
.reader-tools__btn[aria-pressed="true"] { background: rgba(79, 70, 229, .12); border-color: var(--color-primary); }
.reader-tools__btn:disabled { opacity: .45; cursor: default; }
.reader-tools__sep { width: 1px; height: 1.1rem; background: var(--color-border); margin: 0 var(--space-1); }

.reader-state { color: var(--color-muted); font-size: .92rem; padding: var(--space-1) 0; }

.reader-children { margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.reader-children__item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: .9rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-input);
  padding: var(--space-2) var(--space-3);
}
.reader-children__item:hover { background: rgba(79, 70, 229, .06); }

.reader-body {
  flex: 1 1 auto;
  overflow: auto;
  margin: 0 auto;
  padding: var(--space-1);
  font-size: var(--reader-fs, 1rem);
  line-height: 1.75;
  color: var(--color-text);
}
.reader-body.is-narrow { max-width: 42rem; }
.reader-body p { margin: 0 0 1rem; white-space: pre-wrap; }
.reader-body p:last-child { margin-bottom: 0; }

/* Real-PDF mode (ROADMAP #2): bodyEl holds a single <iframe> running the browser's
   native PDF viewer (scroll / zoom / select / search), opened at the node's page.
   No is-narrow cap; the iframe scrolls internally so the body itself never scrolls. */
.reader-body.is-pdf {
  max-width: none;
  /* The reader body is a flex item with `margin: 0 auto`; in a flex COLUMN those auto
     side-margins make it shrink to its content and center, which collapses the iframe to
     its 300px default and leaves it floating thin in the panel. In PDF mode force it to
     stretch full-width instead (no auto centering) so the iframe truly fills the box. */
  width: 100%;
  align-self: stretch;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.reader-pdf__frame {
  display: block;
  width: 100%;
  height: 60vh;                 /* docked default — definite height so the iframe shows */
  border: 0;
  background: #fff;
  border-radius: var(--radius-input);
}
.reader-card.is-modal     .reader-pdf__frame { height: 74vh; }
.reader-card.is-fullscreen .reader-pdf__frame { height: calc(100vh - var(--space-8) * 3); }
.reader-pdf__loading {
  margin: var(--space-6) auto;
  font-size: .8125rem;
  color: var(--color-muted);
}

/* --- PDF / tree-builder cards ------------------------------------------ */
.pdf-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.pdf-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.pdf-card__title { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.pdf-card__node  { margin-left: auto; font-size: .8125rem; color: var(--color-muted); }
.pdf-card__body  { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

.pdf-drop { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.pdf-drop__label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-weight: 600;
  font-size: .875rem;
  color: var(--color-text);
  cursor: pointer;
}
.pdf-drop__label:hover { background: var(--color-divider); }
.pdf-drop__hint { font-size: .8125rem; color: var(--color-muted); }
.pdf-file { font-size: .8125rem; color: var(--color-muted); }

.pdf-status, .build-status, .sa-progress, .sa-status, .inbox-q__sug {
  font-size: .875rem;
  color: var(--color-body);
}
.pdf-disclaimer {
  font-size: .8125rem;
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border-radius: var(--radius-input);
  padding: var(--space-2) var(--space-3);
}
.pdf-staged { font-size: .8125rem; color: var(--color-muted); }
.pdf-build { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pdf-build__hint { flex-basis: 100%; font-size: .8125rem; color: var(--color-muted); }

/* Extracted chunk preview */
.chunk-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 280px; overflow: auto; }
.chunk-card { border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: var(--space-3); }
.chunk-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.chunk-card__title { font-weight: 600; font-size: .875rem; color: var(--color-text); }
.chunk-card__meta { font-size: .75rem; color: var(--color-muted); }
.chunk-card__preview { margin-top: var(--space-1); font-size: .8125rem; color: var(--color-muted); white-space: pre-wrap; max-height: 4.5em; overflow: hidden; }

/* Editable proposed tree */
.tree-proposal { display: flex; flex-direction: column; gap: var(--space-2); }
.proposal-head { font-weight: 600; color: var(--color-text); }
.proposal-meta { font-size: .8125rem; color: var(--color-muted); }
.proposal-warning {
  font-size: .8125rem;
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border-radius: var(--radius-input);
  padding: var(--space-2) var(--space-3);
}
.proposal-note { font-size: .8125rem; color: var(--color-muted); }
.proposal-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
}
.proposal-row--edit { border-color: var(--color-primary); box-shadow: var(--ring); }
.proposal-name { flex: 1 1 auto; min-width: 0; font-size: .9375rem; color: var(--color-text); }
.proposal-name-input { flex: 1 1 auto; }
.proposal-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-body);
  border-radius: var(--radius-input);
  padding: 2px var(--space-2);
  font-size: .8125rem;
}
.proposal-btn:hover { background: var(--color-divider); }
.proposal-btn--danger { color: var(--color-danger); border-color: var(--color-danger); }
.proposal-btn--danger:hover { background: var(--color-danger-bg); }
/* Icon-only proposal button (e.g. the trash delete) — center the inline SVG. */
.proposal-btn--icon {
  display: inline-grid;
  place-items: center;
  padding: 4px;
  line-height: 0;
}
.proposal-btn--icon svg { display: block; }
.proposal-save { font-size: .8125rem; color: var(--color-success); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.proposal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* ROADMAP #10: PDF import → editable tree loading state (calm skeleton + spinner). */
.proposal-loading { display: flex; flex-direction: column; gap: var(--space-3); }
.proposal-loading__head {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: .875rem; color: var(--color-body);
}
.proposal-loading__msg { min-width: 0; }
.proposal-spinner {
  flex: none;
  width: 18px; height: 18px;
  border: 2px solid var(--color-divider);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-pill);
  animation: proposalSpin .7s linear infinite;
}
.proposal-skel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.proposal-skel__row {
  height: 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-divider) 0%, var(--color-border) 50%, var(--color-divider) 100%);
  background-size: 200% 100%;
  animation: proposalShimmer 1.4s ease-in-out infinite;
}
.proposal-skel__row--in { margin-left: var(--space-6); }
@keyframes proposalSpin { to { transform: rotate(360deg); } }
@keyframes proposalShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .proposal-spinner, .proposal-skel__row { animation: none; }
}

/* --- Subject actions (bank / exam) ------------------------------------- */
.sa-provisional {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: .8125rem;
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border-radius: var(--radius-input);
  padding: var(--space-3);
}
.sa-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* «Generar más preguntas» inside the «Banco de la selección» card */
.bank-gen {
  margin-top: var(--space-4);
}
.bank-gen__status {
  margin-top: var(--space-2);
  font-size: .8125rem;
  color: var(--color-muted);
}

/* --- Inbox (sin clasificar) -------------------------------------------- */
.inbox-review { display: flex; flex-direction: column; gap: var(--space-3); }
.inbox-review__head { font-size: .85rem; color: var(--color-muted); }
.inbox-review__foot { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.inbox-q {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
}
.inbox-q__chk,
.inbox-q__keep {
  font-size: .8rem;
  white-space: nowrap;
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--color-muted);
}
.inbox-q__body { flex: 1; min-width: 0; }
.inbox-q__text { font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-1); }
.inbox-q__opts { margin: 0 0 var(--space-2) 1.1rem; padding: 0; font-size: .85rem; color: var(--color-muted); }
.inbox-q__sug { color: var(--color-primary); margin: 0 0 var(--space-1); }
.inbox-q__sel { font-size: .85rem; display: block; }
.inbox-q__node { max-width: 100%; }

/* --- Docked timer ------------------------------------------------------- */
/* Bottom-right dock. column-reverse keeps the clock circle at the bottom and
   opens the panel upward above it. */
.mini-timer {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 120;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--space-3);
}
/* Collapsed = a small circular clock button. */
.mini-timer__toggle {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-pop);
  color: var(--color-primary);
}
.mini-timer__toggle:hover { background: var(--color-divider); }
.mini-timer__toggle[aria-expanded="true"] { color: var(--color-primary); }
.mini-timer__toggle-label { display: none; }

/* Centered round play / pause control. */
.mini-timer__primary {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-card);
  transition: background-color .12s ease, transform .06s ease;
}
.mini-timer__primary:hover { background: var(--color-primary-hover); }
.mini-timer__primary:active { transform: scale(.94); }
.mini-timer__subcontrols { display: flex; justify-content: center; gap: var(--space-2); }
.mini-timer__panel {
  width: 280px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mini-timer__tabs { display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--color-divider); border-radius: var(--radius-input); }
.mini-timer__tab {
  flex: 1 1 0;
  border: 0;
  background: none;
  border-radius: calc(var(--radius-input) - 2px);
  padding: var(--space-1) var(--space-2);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-muted);
}
.mini-timer__tab.is-active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-card); }
.mini-timer__subject { font-size: .8125rem; color: var(--color-muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-timer__phase {
  align-self: center;
  font-size: .75rem;
  font-weight: 600;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
}
.mini-timer__phase.pom-work  { color: var(--color-primary); background: rgba(79, 70, 229, .1); }
.mini-timer__phase.pom-break { color: var(--color-success); background: var(--color-success-bg); }
.mini-timer__display { font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); text-align: center; }
.mini-timer__cycle { font-size: .75rem; color: var(--color-muted); text-align: center; }
.mini-timer__controls { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* Pause prompt dialog */
.study-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: rgba(17, 24, 39, .35);
  padding: var(--space-4);
}
.study-dialog {
  position: relative;
  width: min(340px, 92vw);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  padding: var(--space-6);
  text-align: center;
}
.study-dialog__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  border-radius: var(--radius-input);
  color: var(--color-muted);
  font-size: .9375rem;
  line-height: 1;
}
.study-dialog__close:hover { background: var(--color-divider); color: var(--color-text); }
/* Destructive action: hover red. */
.study-dialog__danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.study-dialog__title { font-size: 1.0625rem; font-weight: 600; color: var(--color-text); }
.study-dialog__text { font-size: .875rem; color: var(--color-muted); margin-top: var(--space-1); }
.study-dialog__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.study-dialog__actions .btn { width: 100%; }
.mini-timer__steppers { display: flex; flex-direction: column; gap: var(--space-2); }
.mini-timer__note { font-size: .75rem; color: var(--color-muted); text-align: center; }

/* Stepper */
.stepper { display: flex; align-items: center; gap: var(--space-2); }
.stepper__label { flex: 1 1 auto; font-size: .8125rem; color: var(--color-body); }
.stepper__btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-input);
  color: var(--color-text);
  font-size: .75rem;
}
.stepper__btn:hover { background: var(--color-divider); }
.stepper__val { min-width: 2ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper__unit { font-size: .75rem; color: var(--color-muted); }

/* --- Subjects grid landing (Estudiar level 1) --------------------------- */
/* The Estudiar landing is a responsive grid of subject boxes — richer than the
   dashboard .subj-card. Clicking a box opens that subject's workspace below
   (level 2) and resumes at the node last studied. View switching is done with
   the `hidden` attribute on #studyGrid / #subjectView — never a forced display.
   Boxes reuse .card + .subj-card (chrome, hover-scale, .subj-progress);
   .asig-* adds the meta line, the ⋮ options menu and the workspace bar. */
.study-grid { display: flex; flex-direction: column; gap: var(--space-5); }
.study-grid .subject-create { margin-bottom: var(--space-1); }

/* The clickable box. Behaves like a link (role="link" + JS); the shared
   .subj-card:hover gives it the scale-up affordance. position:relative anchors
   the ⋮ options menu. */
.asig-card { gap: var(--space-3); cursor: pointer; position: relative; text-align: center; }
.asig-card:focus-visible { outline: none; box-shadow: var(--ring); }
/* Keep the card steady (don't scale) while its options menu is open. */
.asig-card.is-menu-open:hover { transform: none; box-shadow: var(--shadow-card); }

/* The "+ Nueva asignatura" box: same footprint as a subject card, but a dashed,
   muted placeholder with a big plus. It's a <button>, so reset its chrome and
   center its contents. Sits as the last item in the grid. */
.asig-card--add {
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 100%;
  font: inherit;
  background: none;
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
  transition: transform .14s ease, box-shadow .14s ease,
              border-color .14s ease, color .14s ease;
}
.asig-card--add:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-pop);
}
.asig-card--add:focus-visible { outline: none; box-shadow: var(--ring); }

/* Big, clean circular plus badge. */
.asig-card__add-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-divider);
  color: var(--color-muted);
  transition: background .14s ease, color .14s ease;
}
.asig-card__add-icon svg { display: block; }
.asig-card--add:hover .asig-card__add-icon {
  background: var(--color-primary);
  color: #fff;
}
.asig-card__add-label { font-size: .9375rem; font-weight: 600; letter-spacing: .01em; }

/* Centered, minimal box. The title centers (capped so it clears the corner ⋮),
   while the ⋮ button sits absolutely in the top-right. */
.asig-card .subj-card__head { justify-content: center; }
.asig-card .subj-card__title { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 56px); }
.asig-menu__btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  border-radius: var(--radius-input);
  color: var(--color-muted);
  cursor: pointer;
}
.asig-menu__btn:hover { background: var(--color-divider); color: var(--color-text); }
.asig-menu__btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Dropdown menu: rename / delete. */
.asig-menu {
  position: absolute;
  top: 52px;
  right: var(--space-5);
  z-index: 20;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
}
.asig-menu__item {
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  border-radius: var(--radius-input);
  font-size: .875rem;
  color: var(--color-text);
  cursor: pointer;
}
.asig-menu__item:hover { background: var(--color-divider); }
.asig-menu__item:focus-visible { outline: none; box-shadow: var(--ring); }
.asig-menu__item--danger { color: var(--color-danger); }
.asig-menu__item--danger:hover { background: var(--color-danger-bg); }

/* Meta line: X/Y temas · tiempo estudiado · último estudio + source chip. */
.asig-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: .8125rem;
  color: var(--color-muted);
}
.asig-meta__item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.asig-meta__item strong { color: var(--color-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.asig-meta__sep { color: var(--color-border); }
.asig-meta__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-divider);
  color: var(--color-body);
  font-size: .75rem;
  font-weight: 600;
}

/* Centered meta line, pinned to the card foot so uneven boxes align. */
.asig-card .asig-meta { margin-top: auto; justify-content: center; }

/* --- Subject workspace (Estudiar level 2): back bar -------------------- */
/* #subjectView wraps the existing board + PDF/bank/inbox cards so the whole
   workspace toggles as one. Restore the study-wrap inter-card spacing inside. */
.subject-view { display: flex; flex-direction: column; gap: var(--space-6); }
.subject-view__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.study-back { flex: 0 0 auto; }
.subject-view__name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .study-board,
  .study-board.is-resized { grid-template-columns: 1fr; }
  .study-board:has(.reader-card.is-closed) { grid-template-columns: 1fr; }
  .study-board__resizer { display: none; }          /* no split on the stacked mobile layout */
  .study-board__side { position: static; }
  .reader-card { max-height: 70vh; }
}
@media (max-width: 540px) {
  .mini-timer { right: var(--space-3); bottom: var(--space-3); }
  .mini-timer__panel { width: calc(100vw - var(--space-6)); }
}

/* ===== TESTS ===== */
/* Scoped to .tests-page. Reuses foundation tokens + shared components
   (.card / .btn / .badge / .tree). Only adds Tests-specific rules.
   Hooks mirror tests.php (S22) exactly — never rename. */

.tests-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* --- Page head: h1 + lead paragraph ------------------------------------- */
.tests-head { display: flex; flex-direction: column; gap: var(--space-2); }
.tests-head h1 { font-size: 1.75rem; line-height: 1.2; }
.tests-head p {
  font-size: .9375rem;
  color: var(--color-muted);
  max-width: 70ch;
}

/* --- Page layout: picker (left) + bank/config column (right) ------------- */
/* The right column sets its own inline flex/gap in tests.php — keep it. */
.tests-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* --- Loading / empty states -------------------------------------------- */
.tests-page .tests-state,
.tests-page .tests-empty {
  color: var(--color-muted);
  font-size: .9375rem;
}
.tests-page .tests-state { padding: var(--space-4) var(--space-2); }

/* --- Branch picker ------------------------------------------------------ */
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}
.picker-clear {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: none;
  border-radius: var(--radius-input);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
}
.picker-clear:hover:not(:disabled) { background: var(--color-divider); color: var(--color-primary-hover); }
.picker-clear:disabled { color: var(--color-muted); cursor: not-allowed; }

.picker-hint {
  font-size: .8125rem;
  color: var(--color-muted);
  line-height: 1.5;
}

/* Keep a tall syllabus tree scrollable inside the card. */
.tests-page #treeWrap { max-height: 60vh; overflow: auto; }

/* Selection highlight — tests.php toggles .is-checked on the ROW
   (foundation only ships .is-selected). Page-scoped so the shared tree
   is untouched on other pages. */
.tests-page .tree__row.is-checked {
  background: rgba(79, 70, 229, .08);
  color: var(--color-primary);
}
.tests-page .tree__row.is-checked .tree__name { font-weight: 600; }

/* The checkbox here is a NATIVE <input type=checkbox> (not the div-toggle the
   foundation .tree__check assumes). Revert the box styling and use the native
   control with an indigo accent so the checked state actually shows. */
.tests-page .tree__check {
  display: inline-block;
  place-items: initial;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* --- Bank-depth panel --------------------------------------------------- */
.tests-page .bank-total {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.tests-page .bank-total .num {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.tests-page .bank-total .lbl { font-size: .875rem; color: var(--color-muted); }

.tests-page .bank-line {
  margin-top: var(--space-3);
  font-size: .875rem;
  color: var(--color-body);
}
.tests-page .bank-line + div { margin-top: var(--space-3); }

/* Difficulty mix = a row of soft badge pills (not a bar). */
.bank-diffmix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Per-branch breakdown list. */
.bank-rows {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  overflow: hidden;
}
.bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: .875rem;
}
.bank-row + .bank-row { border-top: 1px solid var(--color-divider); }
.bank-row__name {
  min-width: 0;
  color: var(--color-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bank-row__stats {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.bank-note {
  margin-top: var(--space-3);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* --- Exam / review config ---------------------------------------------- */
.tests-page .form-group { margin-bottom: var(--space-4); }
.tests-page .form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-body);
}
.cfg-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.cfg-notice {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  font-size: .8125rem;
  line-height: 1.5;
  background: var(--color-neutral-bg);
  color: var(--color-body);
  border: 1px solid var(--color-border);
}
.cfg-notice.is-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Segmented test-mode selector (Montar examen → Normal / Estudio). The .is-selected
   class is toggled in JS so we don't depend on :has(). Selectors are scoped with
   .tests-page and an extra class to outrank `.tests-page .form-group label` (the
   option chips are <label>s and would otherwise inherit display:block + margins). */
.tests-page .mode-seg { display: flex; gap: var(--space-2); }
.tests-page .mode-seg .mode-seg__opt {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.tests-page .mode-seg .mode-seg__opt:hover { border-color: var(--color-primary); }
.tests-page .mode-seg .mode-seg__opt.is-selected {
  border-color: var(--color-primary);
  background: rgba(79, 70, 229, .06);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.tests-page .mode-seg .mode-seg__opt:focus-within { box-shadow: var(--ring); }
.mode-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode-seg__txt { font-size: .875rem; font-weight: 500; color: var(--color-text); }
.mode-seg__hint {
  margin-top: var(--space-2);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--color-muted);
}

/* Inline spinner shown on the CTAs while assembling. */
.inline-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  opacity: .9;
  animation: tests-spin .6s linear infinite;
}
@keyframes tests-spin { to { transform: rotate(360deg); } }

/* --- Attempt history ---------------------------------------------------- */
.hist-list { display: flex; flex-direction: column; }

.hist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-input);
  color: inherit;
  text-decoration: none;
  transition: background-color .1s ease;
}
.hist-row + .hist-row { border-top: 1px solid var(--color-divider); }
.hist-row:hover { background: var(--color-divider); }
.hist-row:focus-visible { outline: none; box-shadow: var(--ring); }

.hist-row__main { min-width: 0; }
.hist-row__title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hist-row__meta {
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: .8125rem;
  color: var(--color-muted);
}

/* Score = a neutral correct/total pill (the JS prints "N / M" or "—"). */
.hist-row__score {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-bg);
  color: var(--color-body);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hist-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: .8125rem;
  color: var(--color-muted);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .tests-grid { grid-template-columns: 1fr; }
}

/* ===== HACER TEST (test-taking) ===== */
/* Scoped to .test-take. Reuses foundation tokens + .card / .btn. Hooks mirror
   test_take.php (tt-*) exactly — never rename. A centered reading column with
   one card per question and selectable option rows. */

.test-take {
  max-width: 720px;
  margin: 0 auto;
}
.test-take #takeStatus {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Head: title + question count. */
.tt-header { display: flex; flex-direction: column; gap: var(--space-1); }
.tt-header h1 { font-size: 1.625rem; line-height: 1.2; color: var(--color-text); }
.tt-meta { font-size: .875rem; color: var(--color-muted); }

/* Simulacro countdown (exam_sim). Sticks to the top of the viewport so it stays
   visible while the user scrolls through the questions. Turns red in the last minute. */
.tt-timer {
  position: sticky;
  top: var(--space-3);
  align-self: flex-start;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-pill);
  background: var(--color-warning-bg);
  box-shadow: var(--shadow-card);
}
.tt-timer__label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-warning);
}
.tt-timer__clock {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-warning);
}
.tt-timer--low {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}
.tt-timer--low .tt-timer__label,
.tt-timer--low .tt-timer__clock { color: var(--color-danger); }

/* The form is a flex column of question cards. */
#takeForm { display: flex; flex-direction: column; gap: var(--space-4); }

/* Question card (already .card → chrome). */
.tt-question { display: flex; flex-direction: column; gap: var(--space-3); }
.tt-question__num {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
}
.tt-question__text {
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-text);
}

/* Selectable option rows with a custom indigo radio dot. */
.tt-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.tt-option:hover { border-color: var(--color-primary); background: rgba(79, 70, 229, .03); }
.tt-option--selected {
  border-color: var(--color-primary);
  background: rgba(79, 70, 229, .06);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.tt-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color .12s ease;
}
.tt-option input[type="radio"]:checked { border-color: var(--color-primary); }
.tt-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.tt-option input[type="radio"]:focus-visible { outline: none; box-shadow: var(--ring); }
.tt-option__text { font-size: .9375rem; line-height: 1.45; color: var(--color-body); }
.tt-option--selected .tt-option__text { color: var(--color-text); font-weight: 500; }

/* Submit row. */
.tt-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-1);
}
.tt-actions .btn { flex: 0 0 auto; min-width: 220px; }
.tt-unanswered { font-size: .875rem; font-weight: 600; color: var(--color-warning); }

/* ===== Modo estudio (test_take.php) ===== */
/* Two columns: scrollable question list (left) + a sticky panel (right) showing the
   source PDF of the ACTIVE question. Reuses the browser's native PDF viewer in an
   iframe (same-origin → CSP unchanged). Falls back to the single column when no
   question has a stored PDF. The wider container is opt-in via .test-take--study. */
.test-take--study { max-width: 1180px; }
.tt-study {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-5);
  align-items: start;
}
.tt-study__questions { min-width: 0; }
.tt-study__questions #takeForm { display: flex; flex-direction: column; gap: var(--space-4); }

.tt-study__pdf {
  position: sticky;
  top: var(--space-5);
  height: calc(100vh - var(--space-8) * 2);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.tt-study__pdf-head {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.tt-study__pdf-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
}
.tt-study__pdf-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.tt-study__pdf-empty {
  margin: auto;
  padding: var(--space-6);
  font-size: .875rem;
  color: var(--color-muted);
  text-align: center;
}
.tt-study__frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}

/* Active question = the one whose PDF is shown. */
.tt-study .tt-question { cursor: pointer; scroll-margin-top: var(--space-5); }
.tt-study .tt-question--active {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.tt-study .tt-question:focus-visible { outline: none; box-shadow: var(--ring); }

@media (max-width: 900px) {
  .test-take--study { max-width: 720px; }
  .tt-study { grid-template-columns: 1fr; }
  .tt-study__pdf { position: static; height: auto; order: -1; }
  .tt-study__frame { height: 50vh; }
}

/* ===== REVISIÓN DEL TEST (solution sheet) ===== */
/* Scoped to .test-results. Reuses foundation tokens + .card / .btn and the
   accuracy palette (acc-high/mid/low). Hooks mirror test_results.php (tr-*)
   exactly — never rename. Per-question right/wrong highlighting + explanation. */

.test-results {
  max-width: 720px;
  margin: 0 auto;
}
.test-results #resultsStatus {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Score band. */
.tr-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.tr-header h1 { font-size: 1.375rem; line-height: 1.25; color: var(--color-text); }
.tr-score {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.tr-score__pct { font-size: 1rem; font-weight: 600; color: var(--color-muted); }
.tr-header__meta { margin-top: var(--space-1); font-size: .8125rem; color: var(--color-muted); }
/* Tint the score by performance (>=70 green, 50–69 amber, <50 red). */
.tr-header--high .tr-score, .tr-header--high .tr-score__pct { color: var(--color-acc-high); }
.tr-header--mid  .tr-score, .tr-header--mid  .tr-score__pct { color: var(--color-acc-mid); }
.tr-header--low  .tr-score, .tr-header--low  .tr-score__pct { color: var(--color-acc-low); }

/* Simulacro breakdown chips: correct / wrong / blank counts under the net score. */
.tr-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.tr-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: .8125rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
}
.tr-chip--ok    { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-bg); }
.tr-chip--bad   { color: var(--color-danger);  background: var(--color-danger-bg);  border-color: var(--color-danger-bg); }
.tr-chip--blank { color: var(--color-muted);   background: var(--color-surface); }

/* Question card. */
.tr-question { display: flex; flex-direction: column; gap: var(--space-3); }
.tr-question__num {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
}
.tr-question__num--ok  { color: var(--color-success); }
.tr-question__num--bad { color: var(--color-danger); }
.tr-question__text {
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-text);
}
.tr-unanswered { font-size: .875rem; font-weight: 500; color: var(--color-warning); }

/* Option rows: neutral, with correct/wrong highlighting + a tag. */
.tr-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-size: .9375rem;
  color: var(--color-body);
}
.tr-option__text { min-width: 0; line-height: 1.45; }
.tr-option--correct {
  border-color: var(--color-acc-high);
  background: var(--color-success-bg);
  color: var(--color-text);
}
.tr-option--wrong {
  border-color: var(--color-acc-low);
  background: var(--color-danger-bg);
  color: var(--color-text);
}
.tr-tag {
  flex: 0 0 auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.tr-tag--correct { background: var(--color-success); color: #fff; }
.tr-tag--wrong   { background: var(--color-danger);  color: #fff; }

/* Explanation block. */
.tr-expl {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  border-left: 3px solid var(--color-border);
  background: var(--color-neutral-bg);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--color-body);
}
.tr-expl__label { font-weight: 600; color: var(--color-text); }
.tr-expl u { text-decoration-color: var(--color-primary); text-underline-offset: 2px; }

/* Per-question 👍/👎 — faint until chosen, no color fills. */
.tr-qvote {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-1);
}
.tr-qvote__hint { font-size: .8125rem; color: var(--color-muted); }
.tr-qvote__btn {
  border: 0;
  background: none;
  padding: 2px var(--space-1);
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius-input);
  cursor: pointer;
  opacity: .4;
  filter: grayscale(1);
  transition: opacity .12s ease, filter .12s ease, background-color .12s ease;
}
.tr-qvote__btn:hover { opacity: .85; filter: grayscale(.3); background: var(--color-divider); }
.tr-qvote__btn.is-active { opacity: 1; filter: none; }
.tr-qvote__btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Per-test rating gate (the page's "continue"). */
.tr-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.tr-rate__prompt { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.tr-rate__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.tr-rate__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-body);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.tr-rate__btn:hover { border-color: var(--color-primary); color: var(--color-text); }
.tr-rate__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.tr-rate__btn:disabled { cursor: default; opacity: .7; }
.tr-rate__emoji { font-size: 1.05rem; line-height: 1; }
.tr-rate__btn--up.is-active   { border-color: var(--color-acc-high); background: var(--color-success-bg); color: var(--color-text); }
.tr-rate__btn--down.is-active { border-color: var(--color-acc-low);  background: var(--color-danger-bg);  color: var(--color-text); }
.tr-rate__note { max-width: 48ch; font-size: .8125rem; color: var(--color-muted); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 540px) {
  .tt-actions .btn { flex: 1 1 auto; min-width: 0; width: 100%; }
  .tr-option { flex-wrap: wrap; }
}

/* ===== GENERAR TEST (modal desde el lector) ===== */
/* The reader's "Generar test" button + a node-picker modal: a simplified,
   pre-checked tree of the selected tema's subtree. Reuses tokens + .btn.
   Hooks mirror study.php (reader-gen / genmodal-*) exactly — never rename. */

/* Button at the top of the reader pane. */
.reader-gen { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }

/* Backdrop + centered dialog (above the docked timer). */
.genmodal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(17, 24, 39, .4);
}
.genmodal {
  display: flex;
  flex-direction: column;
  width: min(540px, 96vw);
  max-height: 88vh;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

/* Head */
.genmodal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.genmodal__eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.genmodal__title {
  margin-top: 2px;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--color-text);
}
.genmodal__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  border-radius: var(--radius-input);
  color: var(--color-muted);
  font-size: 1rem;
  cursor: pointer;
}
.genmodal__close:hover { background: var(--color-divider); color: var(--color-text); }

/* Body (scrolls) */
.genmodal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  overflow: auto;
}

/* Config: questions + difficulty */
.genmodal__config {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.genmodal__field { display: flex; flex-direction: column; gap: var(--space-2); }
.genmodal__field-label { font-size: .8125rem; font-weight: 600; color: var(--color-body); }
.genmodal__field input,
.genmodal__field select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  font-size: .9375rem;
  color: var(--color-text);
}
.genmodal__field input:focus,
.genmodal__field select:focus { outline: none; box-shadow: var(--ring); border-color: var(--color-primary); }

/* Temas picker */
.genmodal__temas { display: flex; flex-direction: column; gap: var(--space-2); }
.genmodal__temas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.genmodal__temas-title { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.genmodal__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .8125rem;
  color: var(--color-body);
  cursor: pointer;
}
.genmodal__all input { accent-color: var(--color-primary); width: 16px; height: 16px; cursor: pointer; }

.genmodal__tree {
  max-height: 320px;
  overflow: auto;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
}
.genmodal__loading { font-size: .875rem; color: var(--color-muted); padding: var(--space-3); }
.genmodal__list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.genmodal__list .genmodal__list { padding-left: var(--space-5); }
.genmodal__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-input);
  cursor: pointer;
}
.genmodal__row:hover { background: var(--color-divider); }
.genmodal__row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.genmodal__name { font-size: .875rem; line-height: 1.4; color: var(--color-text); }
.genmodal__row--root .genmodal__name { font-weight: 600; }

/* Foot */
.genmodal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.genmodal__note { font-size: .8125rem; color: var(--color-muted); min-width: 0; }
.genmodal__note.is-error { color: var(--color-danger); }
.genmodal__actions { display: flex; gap: var(--space-2); margin-left: auto; }

@media (max-width: 480px) {
  .genmodal__config { grid-template-columns: 1fr; }
}

/* ===== TEMARIO: asignatura sin "mother node" + añadir contenido ===== */
/* Inside an asignatura its own row is hidden and its temas are promoted to the
   top level (we're already on that asignatura's page). A persistent "add
   content" card — same height as a collapsed tema — lets the user drop a PDF or
   create temas manually. Hooks mirror study.php — never rename. */

/* Hide the asignatura's own row; promote its temas up one indent level. */
.study-board .tree__item.is-temario-root > .tree__row { display: none; }
.study-board .tree__item.is-temario-root > .tree__children {
  margin-left: -1.15rem;       /* cancel one depth level of indentation */
  padding-top: var(--space-2);
}

/* In a subject the subject's own item is just a container (its row is hidden via
   is-temario-root); drop its card chrome so each top-level child stands alone as
   its own box rather than being grouped inside one big card. */
.study-board .tree--root > .tree__item.is-temario-root {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.study-board .tree--root > .tree__item.is-temario-root:hover { box-shadow: none; }

/* Temario blocks: every top-level node renders as its own boxed card (a manually
   created tema or a PDF imported as a block). */
.study-board .tree__item--block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  margin: var(--space-3) 0;
  padding: var(--space-1) var(--space-2) var(--space-2);
}
.study-board .tree__item--block > .tree__row {
  padding-left: var(--space-2) !important;   /* header hugs the box edge */
}
.study-board .tree__item--block > .tree__row .tree__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.study-board .tree__item--block > .tree__children {
  margin-left: 0;                            /* indent children from the box, not the tree */
  padding-top: var(--space-1);
}
/* Hover / selected highlight fills the whole box, not just the inner header row. */
.study-board .tree__item--block { transition: background .12s ease, box-shadow .12s ease, border-color .12s ease; }
.study-board .tree__item--block:hover { background: var(--color-divider); }
.study-board .tree__item--block:has(> .tree__row.is-selected) { background: rgba(79, 70, 229, .08); }
.study-board .tree__item--block > .tree__row:hover,
.study-board .tree__item--block > .tree__row.is-selected { background: transparent; }

/* Add-content card: a collapsed-tema-sized dashed dropzone + manual link. */
.temario-add { display: flex; flex-direction: column; gap: var(--space-2); }
.temario-add__zone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.temario-add__zone:hover,
.temario-add__zone:focus-visible { border-color: var(--color-primary); background: rgba(79, 70, 229, .03); outline: none; }
.temario-add__zone.is-dragover { border-color: var(--color-primary); background: rgba(79, 70, 229, .07); }
.temario-add__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-divider);
  color: var(--color-primary);
  font-size: 1.1rem;
  line-height: 1;
}
.temario-add__text { font-size: .875rem; color: var(--color-body); line-height: 1.4; }
.temario-add__link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}
.temario-add__link:hover { color: var(--color-primary-hover); }
.temario-create {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}
/* PDF→árbol engine output, stacked under the dropzone. Empty (all children
   hidden) it collapses to nothing; it fills in as the PDF is processed. */
.temario-add__process { display: flex; flex-direction: column; gap: var(--space-3); }

/* No-index choice: surfaced when a dropped PDF has no navigable index. */
.pdf-noindex { display: flex; flex-direction: column; gap: var(--space-2); flex-basis: 100%; }
.pdf-noindex__msg { font-size: .8125rem; line-height: 1.5; color: var(--color-muted); }
.pdf-noindex__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ===== BANCO DE PREGUNTAS (browser) ===== */
/* Collapsible tree of the asignatura's banked questions; expand a node to its
   table. Hooks mirror study.php (bank-*, bankq*) exactly — never rename. */
.bank-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.bank-tree { display: flex; flex-direction: column; gap: 2px; }

/* Merged bank box: #subjectActions (acciones, ámbito tema) + #bankBrowser
   (árbol, ámbito asignatura) now share one .pdf-card body. Each region used to
   inherit column spacing from .pdf-card__body — restore it here, and draw a
   hairline divider between them only when the actions region is visible. */
.bank-actions,
.bank-browser { display: flex; flex-direction: column; gap: var(--space-4); }
.bank-actions__node { font-size: .8125rem; color: var(--color-muted); }
.bank-actions__node:empty { display: none; }
.bank-actions:not([hidden]) + .bank-browser {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.bank-node { display: flex; flex-direction: column; }
.bank-node__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  cursor: pointer;
}
.bank-node__row:hover { background: var(--color-divider); }
.bank-node__row:focus-visible { outline: none; box-shadow: var(--ring); }
.bank-node__chev { flex: 0 0 auto; font-size: .75rem; color: var(--color-muted); transition: transform .12s ease; }
.bank-node.is-open > .bank-node__row > .bank-node__chev { transform: rotate(90deg); }
.bank-node__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bank-node__count { flex: 0 0 auto; font-size: .8125rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.bank-node__wrong { flex: 0 0 auto; font-size: .75rem; font-weight: 600; color: var(--color-danger); }
.bank-node__review {
  flex: 0 0 auto;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  font-size: .75rem;
  color: var(--color-body);
  cursor: pointer;
}
.bank-node__review:hover { border-color: var(--color-danger); color: var(--color-danger); }
.bank-node__body { display: flex; flex-direction: column; gap: 2px; padding-left: var(--space-4); }
/* Inbox mother node: roomier body (status + actions + review list, not a Q table). */
.bank-node--inbox .bank-node__body { gap: var(--space-3); padding: var(--space-2) 0 var(--space-3) var(--space-4); }
.bank-node__table { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }

/* One banked question */
.bankq {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
}
.bankq__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.bankq__q { font-size: .875rem; line-height: 1.45; color: var(--color-text); }
.bankq__a { font-size: .8125rem; color: var(--color-body); }
.bankq__a-label { color: var(--color-success); font-weight: 600; }
.bankq__meta { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); }
.bankq__stat {
  white-space: nowrap;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.bankq__stat--wrong   { background: var(--color-danger-bg);  color: var(--color-danger); }
.bankq__stat--correct { background: var(--color-success-bg); color: var(--color-success); }
.bankq__stat--unseen  { background: var(--color-neutral-bg); color: var(--color-muted); }
.bankq__del {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  border-radius: var(--radius-input);
  color: var(--color-muted);
  cursor: pointer;
}
.bankq__del:hover { background: var(--color-danger-bg); color: var(--color-danger); }

/* ===== AUTH (LOGIN & REGISTER) ===== */
/* Requires: <body class="auth-page"> on login.php and register.php */

body.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: var(--space-8) var(--space-4);
}

.login-shell,
.reg-shell {
  width: 100%;
  padding: var(--space-6);
}
.login-shell { max-width: 26.25rem; }  /* 420px */
.reg-shell   { max-width: 27.5rem;  }  /* 440px */

/* ---------------------------------------------------------------------
   Brand
------------------------------------------------------------------------ */
.login-brand,
.reg-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;                        /* 10px */
  margin-bottom: var(--space-8);
  text-decoration: none;
}

.login-brand__name,
.reg-brand__name {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------------
   Card
------------------------------------------------------------------------ */
.login-card,
.reg-card {
  background: var(--surface);
  border: 0.0625rem solid var(--border);              /* 1px */
  border-radius: calc(var(--radius-card) + 0.25rem);  /* +4px */
  padding: var(--space-8);
  box-shadow: var(--shadow-pop);
}

.login-card__heading,
.reg-card__heading {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.login-card__sub,
.reg-card__sub {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

/* ---------------------------------------------------------------------
   Alerts (general error banner)
------------------------------------------------------------------------ */
.login-alert,
.reg-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  background: var(--color-danger-bg);
  border: 0.0625rem solid rgba(220, 38, 38, .25);   /* 1px */
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 0.875rem;
  color: var(--danger);
}
.login-alert svg,
.reg-alert svg {
  flex-shrink: 0;
  margin-top: 0.0625rem;                /* 1px */
}

/* ---------------------------------------------------------------------
   Form fields
------------------------------------------------------------------------ */
.login-field + .login-field,
.reg-field + .reg-field {
  margin-top: var(--space-4);
}

.login-label,
.reg-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.375rem;
  letter-spacing: 0.01em;
}

/* Password label + "forgot?" link on one row (login.php) */
.login-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.login-label-row .login-label {
  margin-bottom: 0.375rem;
}
.login-forgot {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.login-forgot:hover {
  text-decoration: underline;
}

/* Neutral confirmation note (forgot_password.php success state) */
.login-note {
  background: var(--color-success-bg);
  border: 0.0625rem solid rgba(5, 150, 105, .25);   /* 1px, success tint */
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
}

.login-input,
.reg-input {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 0.09375rem solid var(--border);  /* 1.5px */
  border-radius: var(--radius-input);
  outline: none;
  -webkit-appearance: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.login-input::placeholder,
.reg-input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.login-input:focus,
.reg-input:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}

/* Per-field error state (register only) */
.reg-input--error {
  border-color: var(--danger);
}
.reg-input--error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 0.1875rem rgba(220, 38, 38, .25);  /* 3px spread */
}

.reg-field-error {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: var(--danger);
}

.reg-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------------
   Submit button
------------------------------------------------------------------------ */
.login-submit,
.reg-submit {
  display: block;
  width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-input);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 140ms ease, transform 80ms ease;
}
.login-submit:hover,
.reg-submit:hover { background: var(--primary-hover); }
.login-submit:active,
.reg-submit:active { transform: translateY(0.0625rem); }   /* 1px */
.login-submit:focus-visible,
.reg-submit:focus-visible {
  outline: 0.125rem solid var(--primary-hover);   /* 2px */
  outline-offset: 0.1875rem;                      /* 3px */
  box-shadow: var(--ring);
}

/* ---------------------------------------------------------------------
   Footer link
------------------------------------------------------------------------ */
.login-footer,
.reg-footer {
  text-align: center;
  margin-top: var(--space-5);
  font-size: 0.8125rem;
  color: var(--muted);
}
.login-footer a,
.reg-footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.login-footer a:hover,
.reg-footer a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Responsive — tighten card on very small screens
------------------------------------------------------------------------ */
@media (max-width: 25em) {   /* ~400px, em used intentionally in media queries */
  .login-shell,
  .reg-shell { padding: var(--space-4); }
  .login-card,
  .reg-card  { padding: var(--space-6); }
}

/* ===== ONBOARDING (2-STEP WIZARD) ===== */
/* Requires: <body class="onboarding">. Standalone page (no app shell). A single
   centered card with a 2-step progress bar. Reuses foundation tokens; matches
   the AUTH visual language. */

body.onboarding {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-canvas);
  padding: var(--space-8) var(--space-4);
}

/* --- Brand (top-left, like the auth brand but lockup at the page head) --- */
.ob-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: var(--space-8);
  text-decoration: none;
}
.ob-brand__name {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* --- Shell: constrains the card width --------------------------------- */
.ob-shell {
  width: 100%;
  max-width: 34rem;   /* ~544px */
}

/* --- Progress bar + step labels --------------------------------------- */
.ob-progress { margin-bottom: var(--space-5); }
.ob-progress__labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.ob-progress__step {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
  transition: color 140ms ease;
}
.ob-progress__step.is-active { color: var(--color-primary); }
.ob-progress__step.is-done   { color: var(--color-success); }
.ob-progress__bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-divider);
  overflow: hidden;
}
.ob-progress__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: width 280ms ease;
}

/* --- Card -------------------------------------------------------------- */
.ob-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-card) + 0.25rem);
  box-shadow: var(--shadow-pop);
  padding: var(--space-8);
}

/* Steps: only the active step is shown. */
.ob-step { display: none; }
.ob-step.is-active {
  display: block;
  animation: ob-fade 240ms ease;
}
@keyframes ob-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ob-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.ob-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.ob-card__sub {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin-bottom: var(--space-6);
}

/* --- Field ------------------------------------------------------------- */
.ob-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ob-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.ob-search-input,
.ob-date-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-canvas);
  border: 0.09375rem solid var(--color-border);   /* 1.5px */
  border-radius: var(--radius-input);
  outline: none;
  -webkit-appearance: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ob-search-input::placeholder { color: var(--color-muted); opacity: 1; }
.ob-search-input:focus,
.ob-date-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--ring);
}
.ob-date-input { max-width: 16rem; }

/* --- Search dropdown --------------------------------------------------- */
.ob-search-wrap { position: relative; }
.ob-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-pop);
  max-height: 17.5rem;
  overflow-y: auto;
  display: none;
}
.ob-dropdown.is-open { display: block; }
.ob-dropdown__item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--color-divider);
}
.ob-dropdown__item:last-child { border-bottom: none; }
.ob-dropdown__item:hover,
.ob-dropdown__item:focus {
  background: var(--color-divider);
  outline: none;
}
.ob-dropdown__name { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); }
.ob-dropdown__meta { font-size: 0.8125rem; color: var(--color-muted); }
.ob-dropdown__empty { padding: var(--space-4); font-size: 0.875rem; color: var(--color-muted); }
.ob-dropdown__item--custom { border-top: 1px solid var(--color-divider); }
.ob-dropdown__item--custom .ob-dropdown__name { color: var(--color-primary); }

/* --- Selected-oposición badge ----------------------------------------- */
.ob-selected-badge {
  display: none;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(79, 70, 229, .1);
}
.ob-selected-badge.is-visible { display: inline-flex; }
.ob-selected-badge__clear {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-primary);
  background: rgba(79, 70, 229, .14);
}
.ob-selected-badge__clear:hover { background: rgba(79, 70, 229, .24); }

/* --- Days-until-exam pill --------------------------------------------- */
.ob-days-pill {
  display: none;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-secondary);
  background: rgba(124, 58, 237, .1);
}
.ob-days-pill.is-visible { display: inline-flex; }

.ob-hint { font-size: 0.8125rem; color: var(--color-muted); }

/* --- Error ------------------------------------------------------------- */
.ob-error {
  display: none;
  margin-top: var(--space-4);
  font-size: 0.875rem;
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border: 1px solid rgba(220, 38, 38, .25);
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
}
.ob-error.is-visible { display: block; }

/* --- Actions + buttons ------------------------------------------------- */
.ob-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.ob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition: background 140ms ease, transform 80ms ease, opacity 140ms ease;
}
.ob-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ob-btn:active { transform: translateY(0.0625rem); }
.ob-btn--primary { color: #fff; background: var(--color-primary); }
.ob-btn--primary:hover { background: var(--color-primary-hover); }
.ob-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ob-btn--ghost { color: var(--color-body); background: transparent; }
.ob-btn--ghost:hover { background: var(--color-divider); color: var(--color-text); }

/* --- Button spinner (injected by setLoading) -------------------------- */
.spinner {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: var(--radius-pill);
  animation: ob-spin 0.7s linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 32em) {
  .ob-card { padding: var(--space-6); }
  .ob-card__title { font-size: 1.3125rem; }
  .ob-actions { flex-direction: column-reverse; }
  .ob-btn { width: 100%; }
}

/* ============================================================================
   TESTS — course-first landing (global actions + asignatura grid)
   ============================================================================ */
#testsLanding { display: flex; flex-direction: column; gap: var(--space-5); }

.tests-globals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.tests-global {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tests-global:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); border-color: var(--color-primary); }
.tests-global:focus-visible { outline: none; box-shadow: var(--ring); }
.tests-global__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-input);
  color: var(--color-primary);
  background: rgba(79, 70, 229, .10);
}
.tests-global__icon svg { width: 20px; height: 20px; }
.tests-global__icon--fallos    { color: var(--color-primary);   background: rgba(79, 70, 229, .10); }
.tests-global__icon--combinado { color: var(--color-secondary); background: rgba(124, 58, 237, .10); }
body.dark .tests-global__icon--fallos    { background: rgba(79, 70, 229, .20); }
body.dark .tests-global__icon--combinado { background: rgba(124, 58, 237, .20); }
.tests-global__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Inline test icon used inside flowing text (e.g. empty-state hints). */
.test-ico-inline { vertical-align: -2px; }
.tests-global__title { font-weight: 600; color: var(--color-text); }
.tests-global__sub { font-size: .8125rem; color: var(--color-muted); }

/* Asignatura cards reuse .card + .subj-grid layout. */
.tests-course {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.tests-course:hover { transform: scale(1.02); box-shadow: var(--shadow-pop); }
.tests-course:hover .tests-course__name { color: var(--color-primary); }
.tests-course:focus-visible { outline: none; box-shadow: var(--ring); }
.tests-course__name { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.tests-course__stats { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: auto; }
.tests-course__loading { color: var(--color-muted); }


/* =============================================================================
   PLANIFICADOR (Module 2)  — added in step P1
   Countdown header + weekly-availability setup. Reuses :root tokens and the
   shared .card / .btn / .badge components. Later steps (P2+) append below.
   ============================================================================= */

.planner-page {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── Header: title + countdown ─────────────────────────────────────────── */
.planner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.planner-head__text h1 { margin: 0 0 var(--space-1); }
.planner-head__text p { margin: 0; color: var(--color-muted); }

.planner-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.planner-countdown__days {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}
.planner-countdown__label {
  font-size: .85rem;
  color: var(--color-body);
  margin-top: var(--space-1);
}
.planner-countdown__weeks {
  font-size: .8rem;
  color: var(--color-muted);
  margin-top: var(--space-1);
}

/* ── No-exam-date notice ───────────────────────────────────────────────── */
.planner-notice {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-card);
}
.planner-notice__icon { font-size: 1.5rem; }
.planner-notice__body { flex: 1; }
.planner-notice__body strong { color: var(--color-text); }
.planner-notice__body p { margin: var(--space-1) 0 0; color: var(--color-body); font-size: .9rem; }

/* ── Setup card: weekly availability ───────────────────────────────────── */
.planner-setup__hint { margin: 0 0 var(--space-4); color: var(--color-body); }

.planner-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-3);
}
.planner-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.planner-day__label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-body);
}
.planner-day__input {
  width: 100%;
  max-width: 84px;
  padding: var(--space-2);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.planner-day__input:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--color-primary);
}
.planner-day__unit { font-size: .7rem; color: var(--color-muted); }

/* ── Toggles + actions ─────────────────────────────────────────────────── */
.planner-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.planner-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .92rem;
  color: var(--color-body);
  cursor: pointer;
}
.planner-toggle input { accent-color: var(--color-primary); width: 16px; height: 16px; }

.planner-setup__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.planner-setup__total { font-size: .88rem; color: var(--color-muted); }

/* ── Collapsible availability (moved below the daily plan to declutter) ─────── */
.planner-setup > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
}
.planner-setup > summary::-webkit-details-marker { display: none; }
.planner-setup > summary::after {
  content: '';
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-right: 4px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.planner-setup[open] > summary::after { transform: rotate(-135deg); }
.planner-setup[open] > summary { margin-bottom: var(--space-5); }
.planner-setup__sub { font-size: .82rem; font-weight: 400; color: var(--color-muted); }

/* ── Responsive: stack the week on narrow screens ──────────────────────── */
@media (max-width: 640px) {
  .planner-week { grid-template-columns: repeat(4, 1fr); }
  .planner-head { flex-direction: column; align-items: flex-start; }
}

/* ── Dark mode: surfaces already follow tokens; only the warning notice
      needs a tuned background so text stays legible. ───────────────────── */
body.dark .planner-notice { background: rgba(217, 119, 6, .12); }

/* =============================================================================
   PLANIFICADOR — P2: deterministic plan (action bar + "Hoy" + week calendar)
   ============================================================================= */

.planner-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Action bar: meta + Generar / Recalcular ───────────────────────────── */
.planner-plan__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.planner-plan__meta { margin: 0; color: var(--color-muted); font-size: .9rem; }
.planner-plan__actions { display: flex; gap: var(--space-2); }

.planner-empty .card-body { color: var(--color-body); }
.planner-empty p { margin: 0; }

/* ── Hoy: today's checklist (the page's focal card) ─────────────────────── */
.planner-today {
  border-top: 3px solid var(--color-primary);
}
.planner-today .card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.planner-today__target { font-size: .85rem; color: var(--color-muted); white-space: nowrap; }

.planner-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.planner-tasks__empty { color: var(--color-muted); padding: var(--space-2) 0; }

.planner-task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
}
.planner-task__mark { color: var(--color-primary); font-weight: 700; width: 1em; text-align: center; }
.planner-task__name { flex: 1; color: var(--color-text); font-weight: 500; }
.planner-task__min  { font-size: .82rem; color: var(--color-muted); white-space: nowrap; }
.planner-task__go   { white-space: nowrap; }
.planner-task.is-done .planner-task__name { text-decoration: line-through; color: var(--color-muted); font-weight: 400; }
.planner-task.is-done .planner-task__mark { color: var(--color-acc-high); }

/* ── Week calendar ─────────────────────────────────────────────────────── */
.planner-cal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.planner-cal__title { margin: 0; font-size: 1.05rem; }
.planner-cal__range { font-size: .85rem; color: var(--color-muted); }

.planner-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
}
.planner-cal__day {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 120px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
}
.planner-cal__day.is-today { border-color: var(--color-primary); box-shadow: var(--ring); }
.planner-cal__day.is-past  { opacity: .6; }

/* Day cells (week/month) hint they're clickable to focus into the single-day view. */
.planner-cal__grid:not(.is-day) .planner-cal__day:not(.is-outside) { cursor: pointer; }
.planner-cal__grid:not(.is-day) .planner-cal__day:not(.is-outside):hover {
  border-color: var(--color-primary);
}
/* Interactive controls inside a cell keep their own affordance. */
.planner-cal__day .planner-cal__task,
.planner-cal__day button,
.planner-cal__day a { cursor: auto; }
.planner-cal__day .planner-cal__task[draggable] { cursor: grab; }

/* Single-day view: one prominent, blue-outlined focused card. */
.planner-cal__grid.is-day { grid-template-columns: 1fr; }
.planner-cal__grid.is-day .planner-cal__day { min-height: 200px; cursor: default; }
.planner-cal__day.is-focused { border-color: var(--color-primary); box-shadow: var(--ring); }

.planner-cal__day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.planner-cal__dow { font-size: .72rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; }
.planner-cal__dom { font-size: .95rem; font-weight: 700; color: var(--color-text); }

.planner-cal__tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.planner-cal__task {
  font-size: .74rem;
  line-height: 1.3;
  color: var(--color-body);
  padding: 2px var(--space-1);
  border-left: 3px solid var(--color-primary);
  background: var(--color-warning-bg);
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(79, 70, 229, .08);
}
.planner-cal__task.is-done { color: var(--color-muted); text-decoration: line-through; border-left-color: var(--color-acc-high); }
.planner-cal__more { font-size: .72rem; color: var(--color-muted); padding: 0 var(--space-1); }
.planner-cal__sum  { margin-top: auto; font-size: .74rem; color: var(--color-muted); }
.planner-cal__rest { color: var(--color-muted); font-size: .85rem; }

/* ── Responsive: stack the calendar on narrow screens ──────────────────── */
@media (max-width: 640px) {
  .planner-cal__grid { grid-template-columns: repeat(2, 1fr); }
  .planner-cal__day  { min-height: auto; }
  .planner-plan__bar { flex-direction: column; align-items: stretch; }
  .planner-plan__actions { justify-content: flex-end; }
}

/* ── Dark mode tweaks ──────────────────────────────────────────────────── */
body.dark .planner-cal__task { background: rgba(79, 70, 229, .18); }

/* =============================================================================
   PLANIFICADOR — Phase 2: editable calendar (drag / add / delete / rest)
   Week-view today/future cells (.is-editable) become hand-editable. A hand-edited
   day (.is-locked) is protected from the scheduler and shows a 🔒.
   ============================================================================= */

.planner-cal__day.is-editable { transition: box-shadow .12s ease, border-color .12s ease; }
.planner-cal__day.is-drop {
  border-color: var(--color-primary);
  box-shadow: var(--ring);
  background: rgba(79, 70, 229, .05);
}
.planner-cal__lock { font-size: .8rem; line-height: 1; margin-left: var(--space-1); }

/* Editable task rows: label + inline action buttons (override the base nowrap chip). */
.planner-cal__day.is-editable .planner-cal__task {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  white-space: normal;
  cursor: grab;
}
.planner-cal__day.is-editable .planner-cal__task:active { cursor: grabbing; }
.planner-cal__task.is-dragging { opacity: .45; }
.planner-cal__task-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-cal__task-acts { flex: 0 0 auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .1s ease; }
.planner-cal__task:hover .planner-cal__task-acts,
.planner-cal__task:focus-within .planner-cal__task-acts { opacity: 1; }
.planner-cal__taskbtn {
  border: 0;
  background: none;
  padding: 0 3px;
  font-size: .8rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  border-radius: 3px;
}
.planner-cal__taskbtn:hover { color: var(--color-primary); background: rgba(79, 70, 229, .12); }
.planner-cal__taskbtn[data-act="del"]:hover { color: var(--color-danger); background: var(--color-danger-bg); }

/* Per-day footer: add / rest toggle. */
.planner-cal__dayfoot {
  margin-top: auto;
  display: flex;
  gap: var(--space-1);
  padding-top: var(--space-1);
}
.planner-cal__dayact {
  flex: 1 1 auto;
  border: 1px dashed var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-input);
  padding: 2px var(--space-1);
  font-size: .68rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planner-cal__dayact:hover { border-color: var(--color-primary); color: var(--color-primary); }
.planner-cal__dayact--rest:hover { border-color: var(--color-warning); color: var(--color-warning); }
.planner-cal__day.is-locked { border-style: dashed; }
.planner-cal__day.is-locked.is-today { border-style: solid; }

/* Move-to-day popover (drag fallback). */
.planner-movemenu {
  position: absolute;
  z-index: 1200;
  min-width: 180px;
  max-width: 240px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.planner-movemenu__title { margin: 0 0 var(--space-1); font-size: .72rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; }
.planner-movemenu__opt {
  text-align: left;
  border: 0;
  background: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-input);
  font-size: .82rem;
  color: var(--color-text);
  cursor: pointer;
}
.planner-movemenu__opt:hover { background: rgba(79, 70, 229, .1); color: var(--color-primary); }
.planner-movemenu__empty { margin: 0; padding: var(--space-1) var(--space-2); font-size: .8rem; color: var(--color-muted); }

/* "Añadir tarea" modal (mirrors the onboarding wizard chrome). */
.planner-addt {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.planner-addt__backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .45); }
.planner-addt__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  padding: var(--space-6);
}
.planner-addt__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  border-radius: var(--radius-pill);
}
.planner-addt__close:hover { background: var(--color-border); color: var(--color-text); }
.planner-addt__title { margin: 0; font-size: 1.15rem; }
.planner-addt__when { margin: var(--space-1) 0 var(--space-4); color: var(--color-muted); font-size: .9rem; text-transform: capitalize; }
.planner-addt__kinds { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.planner-addt__kind {
  flex: 1 1 auto;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-input);
  padding: var(--space-2);
  font-size: .85rem;
  color: var(--color-body);
  cursor: pointer;
}
.planner-addt__kind:hover { border-color: var(--color-primary); }
.planner-addt__kind.is-active { border-color: var(--color-primary); background: rgba(79, 70, 229, .08); color: var(--color-primary); font-weight: 600; }
.planner-addt__label { display: block; margin-bottom: var(--space-1); font-size: .82rem; font-weight: 600; color: var(--color-body); }
.planner-addt__select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.planner-addt__hint { margin: var(--space-3) 0 0; font-size: .85rem; color: var(--color-muted); }
.planner-addt__foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }

@media (max-width: 640px) {
  .planner-cal__task-acts { opacity: 1; }   /* no hover on touch: always show controls */
}

/* =============================================================================
   PLANIFICADOR — P3: progress tracking (on-track badge, checkboxes, day status)
   ============================================================================= */

/* ── On-track badge (header) ───────────────────────────────────────────── */
.planner-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: .9rem;
  font-weight: 600;
  background: var(--color-surface);
}
.planner-badge__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--color-acc-none); }
.planner-badge.is-high { border-color: var(--color-acc-high); color: var(--color-acc-high); }
.planner-badge.is-mid  { border-color: var(--color-acc-mid);  color: var(--color-acc-mid); }
.planner-badge.is-low  { border-color: var(--color-acc-low);  color: var(--color-acc-low); }
.planner-badge.is-high .planner-badge__dot { background: var(--color-acc-high); }
.planner-badge.is-mid  .planner-badge__dot { background: var(--color-acc-mid); }
.planner-badge.is-low  .planner-badge__dot { background: var(--color-acc-low); }
.planner-badge__label { color: var(--color-text); }

/* ── Task checkbox + overdue tag ───────────────────────────────────────── */
.planner-task__check {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.planner-task__check:disabled { cursor: default; accent-color: var(--color-acc-high); }
.planner-task__check:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
.planner-task__when {
  font-size: .74rem;
  color: var(--color-warning);
  white-space: nowrap;
  font-weight: 600;
}

/* ── Overdue ("Pendiente de días anteriores") ──────────────────────────── */
.planner-overdue {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-input);
  background: var(--color-warning-bg);
}
.planner-overdue__title {
  margin: 0 0 var(--space-2);
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-warning);
}
body.dark .planner-overdue { background: rgba(217, 119, 6, .12); }

/* ── Calendar day status colors ────────────────────────────────────────── */
.planner-cal__day.is-done    { border-color: var(--color-acc-high); }
.planner-cal__day.is-partial { border-color: var(--color-acc-mid); }
.planner-cal__day.is-missed  { border-color: var(--color-acc-low); }
.planner-cal__day.is-done    .planner-cal__dom { color: var(--color-acc-high); }
.planner-cal__day.is-missed  .planner-cal__dom { color: var(--color-acc-low); }
/* Today keeps its primary ring even when it also carries a status class. */
.planner-cal__day.is-today { border-color: var(--color-primary); }

/* =============================================================================
   PLANIFICADOR — P4: spaced review + mock exams (task icons + accent colors)
   ============================================================================= */

/* Per-kind icon in the Hoy checklist. */
.planner-task__icon { flex: 0 0 auto; width: 1.3em; text-align: center; font-size: .95rem; }

/* Accent the left edge of review / mock tasks so they read apart from study. */
.planner-task.is-review { border-left: 3px solid var(--color-secondary); }
.planner-task.is-mock   { border-left: 3px solid var(--color-warning); }

/* Calendar chips: review (violet) / mock (amber). */
.planner-cal__task.is-review {
  border-left-color: var(--color-secondary);
  background: rgba(124, 58, 237, .08);
}
.planner-cal__task.is-mock {
  border-left-color: var(--color-warning);
  background: rgba(217, 119, 6, .10);
}
body.dark .planner-cal__task.is-review { background: rgba(124, 58, 237, .20); }
body.dark .planner-cal__task.is-mock   { background: rgba(217, 119, 6, .20); }

/* =============================================================================
   PLANIFICADOR — P5: AI strategy overlay ("Estrategia" card)
   ============================================================================= */

.planner-strategy__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* Title + ritmo meta stacked on the left of the Estrategia header. */
.planner-strategy__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.planner-strategy__heading .planner-plan__meta { font-size: .82rem; }
.planner-strategy__head .planner-plan__actions { flex-wrap: wrap; justify-content: flex-end; }

/* "IA" tag next to the title. */
.planner-strategy__tag {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 1px 8px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

.planner-strategy__summary {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  line-height: 1.5;
}

/* Phases as a vertical list with a left accent rail. */
.planner-strategy__phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.planner-strategy__phase {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: rgba(79, 70, 229, .05);
  border-radius: var(--radius-input);
}
body.dark .planner-strategy__phase { background: rgba(79, 70, 229, .15); }

.planner-strategy__phase-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.planner-strategy__phase-name { font-weight: 600; color: var(--color-text); }
.planner-strategy__phase-when { font-size: .8rem; color: var(--color-muted); white-space: nowrap; }
.planner-strategy__phase-focus  { margin: var(--space-1) 0 0; color: var(--color-text); }
.planner-strategy__phase-advice { margin: var(--space-1) 0 0; font-size: .9rem; color: var(--color-muted); }

.planner-strategy__rhythm {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: .9rem;
  color: var(--color-muted);
}

/* ── Calendar export (P3): ICS download + auto-updating subscribe link ───── */
.planner-export__hint {
  margin: 0 0 var(--space-3);
  font-size: .9rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.planner-export__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
/* The download/subscribe links are inert until the feed token has loaded. */
.planner-export__actions a[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}
.planner-export__urllabel {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}
.planner-export__urlrow {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.planner-export__url {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-size: .85rem;
  font-family: var(--font-mono, monospace);
  color: var(--color-text);
  background: var(--color-bg-subtle, var(--color-divider));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
}
.planner-export__url:focus { outline: none; box-shadow: var(--ring); }
.planner-export__status {
  margin: var(--space-3) 0 0;
  font-size: .85rem;
  color: var(--color-muted);
}
.planner-export__status.is-error { color: var(--color-danger); }

@media (max-width: 560px) {
  .planner-export__urlrow { flex-wrap: wrap; }
  .planner-export__url { flex-basis: 100%; }
}

/* =============================================================================
   PLANIFICADOR — P6: polish (month view, edge-case states, skeleton, a11y)
   ============================================================================= */

/* ── Loading skeleton (shown until the first get_plan resolves) ─────────── */
.planner-skeleton .sk-line {
  height: 14px;
  border-radius: var(--radius-input);
  background: var(--color-divider);
  animation: dash-skeleton 1.2s ease-in-out infinite; /* reuse dashboard keyframes */
  margin-bottom: var(--space-3);
}
.planner-skeleton .sk-line:last-child { margin-bottom: 0; }
.planner-skeleton .sk-line--lg { width: 60%; height: 20px; }
.planner-skeleton .sk-line--sm { width: 35%; }

/* ── Edge-case notices: danger variant + "all done" info banner ────────── */
.planner-notice--danger {
  background: rgba(220, 38, 38, .08);
  border-color: var(--color-danger);
}
.planner-notice--danger .planner-notice__body strong { color: var(--color-danger); }
body.dark .planner-notice--danger { background: rgba(220, 38, 38, .14); }

.planner-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-acc-high);
  border-radius: var(--radius-card);
  background: rgba(5, 150, 105, .08);
  color: var(--color-text);
  font-size: .92rem;
}
body.dark .planner-info { background: rgba(5, 150, 105, .16); }

/* ── "No hay tiempo suficiente" warning card + actions ─────────────────── */
.planner-warn { border-color: var(--color-warning); }
.planner-warn__title { margin: 0 0 var(--space-2); font-weight: 600; color: var(--color-warning); }
.planner-warn__text  { margin: 0 0 var(--space-3); color: var(--color-body); font-size: .92rem; }
.planner-warn__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
body.dark .planner-warn { background: rgba(217, 119, 6, .10); }

/* ══════════════════════════════════════════════════════════════════════
   PLANIFICADOR — first-run guided tour (onboarding coach-marks)
   A dismissible step-by-step tour: a spotlight cutout over the relevant
   element + a tooltip card (Atrás / Siguiente / Saltar). State-aware copy is
   driven by planner.php; "seen" is remembered in localStorage. Built with the
   existing tokens so it inherits the calm light/dark look of the rest of the page.
   ════════════════════════════════════════════════════════════════════════ */

/* "Ver tutorial" replay affordance, sits under the page title */
.planner-tutorial-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
}
.planner-tutorial-btn:hover { color: var(--color-primary-hover); text-decoration: underline; }
.planner-tutorial-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-input);
}
.planner-tutorial-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Header button row (onboarding + tutorial sit side by side under the title). */
.planner-head__btns { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════
   PLANIFICADOR — onboarding wizard (Phase 1) + study-pace profile badge
   Modal flow: availability + a short pace quiz → a profile (intenso /
   equilibrado / lento). Built from the existing tokens; toggled with [hidden].
   ════════════════════════════════════════════════════════════════════════ */

/* Profile badge inside the Estrategia card. */
.planner-strategy__profile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0 0 var(--space-3);
}
.planner-strategy__profile-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  white-space: nowrap;
}
.planner-strategy__profile-badge.is-intenso     { background: var(--color-secondary); }
.planner-strategy__profile-badge.is-equilibrado { background: var(--color-primary); }
.planner-strategy__profile-badge.is-lento        { background: var(--color-success); }
.planner-strategy__profile-text { font-size: .9rem; color: var(--color-muted); }

/* Overlay + backdrop. */
.planner-ob[hidden] { display: none !important; }
.planner-ob {
  position: fixed;
  inset: 0;
  z-index: 1100;                 /* above the tour layer (1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.planner-ob__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, .45);
}

/* Card. */
.planner-ob__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  padding: var(--space-6);
}
.planner-ob__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  border-radius: var(--radius-pill);
}
.planner-ob__close:hover { background: var(--color-divider); color: var(--color-text); }

/* Progress dots. */
.planner-ob__progress { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); }
.planner-ob__progress i {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}
.planner-ob__progress i.is-active { background: var(--color-primary); }
.planner-ob__progress i.is-done   { background: var(--color-secondary); }

/* Step body. */
.planner-ob__step[hidden] { display: none !important; }
.planner-ob__title { margin: 0 0 var(--space-2); font-size: 1.2rem; color: var(--color-text); }
.planner-ob__lead  { margin: 0 0 var(--space-4); color: var(--color-body); line-height: 1.5; }
.planner-ob__field { margin-bottom: var(--space-4); }
.planner-ob__label { display: block; margin-bottom: var(--space-2); font-weight: 600; color: var(--color-text); font-size: .9rem; }

.planner-ob__minutes { display: inline-flex; align-items: center; gap: var(--space-2); }
.planner-ob__minutes input {
  width: 96px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
}
.planner-ob__minutes input:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--color-primary); }
.planner-ob__unit { color: var(--color-muted); font-size: .9rem; }

/* Day toggles. */
.planner-ob__days { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.planner-ob__day {
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
}
.planner-ob__day:hover { border-color: var(--color-primary); }
.planner-ob__day.is-on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.planner-ob__day:focus-visible { outline: none; box-shadow: var(--ring); }
.planner-ob__total { margin: var(--space-3) 0 0; font-size: .88rem; color: var(--color-muted); }

/* Exam-date check. */
.planner-ob__exam {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-acc-high);
  border-radius: var(--radius-card);
  background: rgba(5, 150, 105, .08);
  color: var(--color-text);
}
.planner-ob__exam--warn { border-color: var(--color-warning); background: rgba(217, 119, 6, .10); }
.planner-ob__exam p { margin: 0 0 var(--space-2); line-height: 1.45; }
.planner-ob__exam p:last-child { margin-bottom: 0; }
.planner-ob__exam-icon { font-size: 1.2rem; line-height: 1.4; }

/* Pace quiz. */
.planner-ob__quiz { display: flex; flex-direction: column; gap: var(--space-4); }
.planner-ob__q-title { margin: 0 0 var(--space-2); font-weight: 600; color: var(--color-text); font-size: .95rem; }
.planner-ob__opt {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  font: inherit;
  font-size: .9rem;
  color: var(--color-body);
  cursor: pointer;
}
.planner-ob__opt:last-child { margin-bottom: 0; }
.planner-ob__opt:hover { border-color: var(--color-primary); }
.planner-ob__opt.is-sel {
  border-color: var(--color-primary);
  background: rgba(79, 70, 229, .08);
  color: var(--color-text);
  font-weight: 500;
}
.planner-ob__opt:focus-visible { outline: none; box-shadow: var(--ring); }

/* Result. */
.planner-ob__profile { text-align: center; margin-bottom: var(--space-4); }
.planner-ob__profile-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
}
.planner-ob__profile-badge.is-intenso     { background: var(--color-secondary); }
.planner-ob__profile-badge.is-equilibrado { background: var(--color-primary); }
.planner-ob__profile-badge.is-lento        { background: var(--color-success); }
.planner-ob__profile-blurb { margin: var(--space-3) 0 0; color: var(--color-body); line-height: 1.5; }

/* Footer nav. */
.planner-ob__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.planner-ob__skip {
  border: 0;
  background: none;
  font: inherit;
  font-size: .88rem;
  color: var(--color-muted);
  cursor: pointer;
}
.planner-ob__skip:hover { color: var(--color-text); text-decoration: underline; }
.planner-ob__nav { display: flex; gap: var(--space-2); }

body.dark .planner-ob__exam      { background: rgba(5, 150, 105, .16); }
body.dark .planner-ob__exam--warn { background: rgba(217, 119, 6, .18); }
body.dark .planner-ob__opt.is-sel { background: rgba(79, 70, 229, .18); }

/* Tour layer (created once by planner.php, appended to <body>) */
.tour-root[hidden] { display: none !important; }
.tour-root { position: fixed; inset: 0; z-index: 1000; }

/* Full-screen click shield — forces navigation via the tooltip buttons.
   Transparent for spotlight steps; dimmed for centered (welcome) steps. */
.tour-blocker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: transparent;
}
.tour-blocker.is-dim { background: rgba(15, 23, 42, .55); }

/* Spotlight: a transparent box whose huge box-shadow dims everything else.
   Position + size are set inline (px) by the controller from the target rect. */
.tour-spot {
  position: fixed;
  z-index: 1001;
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55),
              0 0 0 2px var(--color-primary) inset;
  pointer-events: none;
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.tour-spot[hidden] { display: none; }

/* Tooltip card */
.tour-tip {
  position: fixed;
  z-index: 1002;
  width: min(340px, calc(100vw - 2 * var(--space-4)));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  animation: tour-pop .18s ease;
}
.tour-tip__step {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.tour-tip__title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--color-text); }
.tour-tip__body  { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--color-body); }
.tour-tip__note  { margin: var(--space-1) 0 0; font-size: .82rem; color: var(--color-muted); font-style: italic; }
.tour-tip__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.tour-tip__skip {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .82rem;
  color: var(--color-muted);
  cursor: pointer;
}
.tour-tip__skip:hover { color: var(--color-text); text-decoration: underline; }
.tour-tip__nav { display: flex; gap: var(--space-2); }
.tour-tip__dots { display: flex; gap: 5px; align-items: center; }
.tour-tip__dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  display: inline-block;
}
.tour-tip__dots i.is-active { background: var(--color-primary); }

@keyframes tour-pop {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Dark mode — match the existing planner convention (per-element tints) */
body.dark .tour-blocker.is-dim { background: rgba(2, 6, 23, .66); }
body.dark .tour-spot {
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, .66),
              0 0 0 2px var(--color-secondary) inset;
}

@media (max-width: 640px) {
  .tour-tip { width: calc(100vw - 2 * var(--space-3)); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spot { transition: none; }
  .tour-tip  { animation: none; }
}

/* ── Calendar controls: period nav + week/month toggle ─────────────────── */
.planner-cal__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.planner-cal__nav { display: flex; align-items: center; gap: var(--space-2); }
.planner-cal__navbtn { padding: var(--space-1) var(--space-2); line-height: 1; font-size: 1.1rem; }
.planner-cal__views { display: inline-flex; gap: 2px; }
.planner-view-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-body);
}
.planner-view-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.planner-view-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ── Month grid: weekday header row + compact day cells ────────────────── */
.planner-cal__grid.is-month {
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}
.planner-cal__dowhead {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-1) 0;
}
.planner-cal__day--mini { min-height: 64px; gap: var(--space-1); }
.planner-cal__day--mini .planner-cal__day-head { justify-content: flex-end; }
.planner-cal__day.is-outside { opacity: .4; background: transparent; }
.planner-cal__count {
  margin-top: auto;
  font-size: .68rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* ── Responsive: stack the calendar head; tighten the month grid ───────── */
@media (max-width: 640px) {
  .planner-cal__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .planner-cal__controls { width: 100%; justify-content: space-between; }
  .planner-cal__grid.is-month { gap: 2px; }
  .planner-cal__day--mini { min-height: 48px; padding: 2px; }
  .planner-cal__day--mini .planner-cal__count { font-size: .6rem; }
  .planner-cal__dowhead { font-size: .6rem; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Admin dashboard (Monetization Phase 0) — plans, limits & per-user usage.
   Reuses :root tokens; scoped under .admin-page + .admin-* to avoid collisions.
   ──────────────────────────────────────────────────────────────────────────── */
.admin-page__head { margin-bottom: var(--space-5); }
.admin-page__title { font-size: 1.5rem; font-weight: 600; color: var(--color-text); margin: 0; }
.admin-page__sub { color: var(--color-muted); margin: var(--space-1) 0 0; }

.admin-page .card { margin-bottom: var(--space-5); }
.admin-hint { color: var(--color-muted); font-size: .85rem; margin: 0 0 var(--space-4); }
.admin-loading { color: var(--color-muted); padding: var(--space-3) 0; }
.admin-muted { color: var(--color-muted); }
.admin-center { text-align: center; }

.admin-tablewrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th,
.admin-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.admin-table th { color: var(--color-muted); font-weight: 600; font-size: .8rem; white-space: nowrap; }
.admin-table tbody tr:last-child td { border-bottom: 0; }

.admin-input {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-1) var(--space-2);
  max-width: 100%;
}
.admin-input:focus { outline: none; box-shadow: var(--ring); border-color: var(--color-primary); }
.admin-input--num { width: 6rem; }

/* Global-setting row (e.g. simulacro negative marking): label + input + save. */
.admin-setting-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.admin-setting-row label { font-size: .9rem; font-weight: 500; color: var(--color-text); }
.admin-setting-row .admin-input { width: 6rem; }

.admin-usage-cell { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.admin-usage { color: var(--color-muted); font-size: .8rem; white-space: nowrap; }
.admin-usage strong { color: var(--color-text); }
.admin-usage--near strong { color: var(--color-warning); }
.admin-usage--over strong { color: var(--color-danger); }
.admin-usage--off { opacity: .55; }

.admin-plan { margin-bottom: var(--space-5); }
.admin-plan:last-child { margin-bottom: 0; }
.admin-plan__title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-2); }

/* Plantillas de asignatura */
.admin-tpl-opo { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.admin-tpl-opo:last-child { border-bottom: 0; }
.admin-tpl-opo__title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-2); }
.admin-tpl-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.admin-tpl-list li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-1) 0; }
.admin-tpl-name { font-weight: 500; color: var(--color-text); }
.admin-tpl-publish { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.admin-tpl-empty { margin: var(--space-1) 0 0; font-size: .85rem; }

/* Plantillas — three-block layout (catálogo / publicar / publicadas) */
.admin-tpl-block { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); }
.admin-tpl-block:first-child { padding-top: 0; }
.admin-tpl-block:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-tpl-h { font-size: 1.05rem; font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-3); }

/* Catálogo de oposiciones — add/edit form */
.admin-opo-form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-3); }
.admin-opo-form .admin-input { flex: 1 1 12rem; min-width: 10rem; }
.admin-opo-form__actions { display: flex; gap: var(--space-2); align-items: center; }
.admin-opo-table td { vertical-align: middle; }
.admin-opo-actions { white-space: nowrap; text-align: right; }
.admin-opo-actions .btn { margin-left: var(--space-1); }

/* Publicar — subject picker + target-oposición checkboxes */
.admin-tpl-block .js-pub-subject { width: 100%; margin-bottom: var(--space-3); }
.admin-opo-checks__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.admin-opo-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-1) var(--space-3);
  max-height: 16rem;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-input);
  margin-bottom: var(--space-3);
}
.admin-opo-check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: .9rem; cursor: pointer; padding: var(--space-1) 0; }
.admin-opo-check input { margin-top: 2px; flex: 0 0 auto; }

/* ===== LEGAL PAGES (privacidad.php / terminos.php) ===== */
/* Requires: <body class="legal-page"> */

body.legal-page {
  min-height: 100vh;
  background: var(--bg);
  padding: var(--space-8) var(--space-4);
}

.legal {
  width: 100%;
  max-width: 48rem;            /* 768px */
  margin: 0 auto;
}

.legal__brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
  text-decoration: none;
}
.legal__brand-name {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.legal__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-card) + 0.25rem);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  color: var(--body);
  line-height: 1.65;
}

.legal__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-2);
}
.legal__meta {
  color: var(--muted);
  font-size: .875rem;
  margin: 0 0 var(--space-6);
}

.legal__card h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin: var(--space-6) 0 var(--space-2);
}
.legal__card p { margin: 0 0 var(--space-4); }
.legal__card ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}
.legal__card li { margin-bottom: var(--space-2); }
.legal__card a {
  color: var(--color-primary);
  text-decoration: none;
}
.legal__card a:hover { text-decoration: underline; }

.legal__back {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider);
}

.legal__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-size: .875rem;
  color: var(--muted);
}
.legal__footer a {
  color: var(--muted);
  text-decoration: none;
}
.legal__footer a:hover { text-decoration: underline; }

/* ===== LEGAL LINK ROWS (login / register / profile footers) ===== */
.login-legal,
.pf-legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: .8125rem;
  color: var(--muted);
}
.login-legal a,
.pf-legal a {
  color: var(--muted);
  text-decoration: none;
}
.login-legal a:hover,
.pf-legal a:hover { text-decoration: underline; }
.pf-legal { margin-top: var(--space-6); }

/* ===== REGISTER CONSENT CHECKBOX (register.php) ===== */
.reg-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  font-size: .875rem;
  color: var(--body);
  line-height: 1.5;
}
.reg-consent__box {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.reg-consent__text a {
  color: var(--color-primary);
  text-decoration: none;
}
.reg-consent__text a:hover { text-decoration: underline; }