/* ============================================================
   BUENO — tu centro de estudio del español
   "Le cahier Seyès": the ruled paper every French schoolchild
   writes on — a violet horizontal rule, a red margin, blue ink —
   with the tricolore used as structure rather than decoration.
   Cormorant Garamond for display (Claude Garamond cut his types in
   Paris in the 1530s and the language has looked like that ever
   since), Archivo for the interface, Source Serif for anything you
   actually read.
   ============================================================ */

:root {
  --papel: #f6f3ec;
  --papel-2: #eae5d9;
  --hoja: #fffdf8;
  --tinta: #1b2b4b;
  --tinta-soft: #565f78;
  --trazo: #d9d2c2;
  --trazo-soft: #e9e3d5;

  /* The rojigualda, pulled towards legibility. The flag's #AA151B and
     #F1BF00 are correct on cloth — the gualda far too bright behind body
     text — so both are darkened until they hold their own contrast ratio. */
  --rojo: #a3131d;
  --rojo-soft: #f9e4e4;
  --gualda: #8a6a0a;
  --gualda-soft: #f7edcf;
  --azul: #0b4f9e;
  --azul-soft: #e2ecf9;
  --miel: #b07d16;
  --miel-soft: #faf0d6;
  --teja: #a9532f;
  --teja-soft: #f7e7de;
  --lavanda: #6459a8;
  --lavanda-soft: #eceafa;
  --pizarra: #46566b;
  --pizarra-soft: #e6eaef;
  --azur: #1f5f9e;
  /* The cuadrícula of a Spanish school notebook: the pale blue grid
     every hispanophone learner has written on, with its warm margin rule. */
  --cuadricula: rgba(70, 110, 165, 0.14);
  --cuadricula-margen: rgba(163, 19, 29, 0.14);

  --sombra: 0 1px 2px rgba(27, 43, 75, 0.06), 0 8px 24px -12px rgba(27, 43, 75, 0.22);
  --sombra-alta: 0 2px 4px rgba(27, 43, 75, 0.08), 0 18px 40px -18px rgba(27, 43, 75, 0.34);

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --display: "Cormorant Garamond", "Garamond", Georgia, serif;
  --ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --texto: "Source Serif 4", Georgia, serif;

  --r: 12px;
  --r-lg: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--texto);
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--tinta);
  background-color: var(--papel);
  /* The cahier Seyès: a strong violet rule every 26px with three
     faint ones between it, the way the real paper is ruled, plus two
     washes so the page does not read as graph paper in a spreadsheet.
     The horizontal rule dominates — Seyès is ruled for handwriting,
     not for arithmetic, and that is the whole difference from the
     Italian tenant's quaderno a quadretti. */
  background-image:
    linear-gradient(var(--cuadricula) 1px, transparent 1px),
    linear-gradient(rgba(105, 95, 165, 0.06) 1px, transparent 1px),
    radial-gradient(900px 460px at 92% -140px, rgba(11, 79, 158, 0.09), transparent 62%),
    radial-gradient(760px 420px at -140px 108%, rgba(200, 16, 46, 0.06), transparent 58%);
  background-size: 100% 26px, 100% 6.5px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

/* Cormorant sets small for its nominal size — a Garamond always does —
   so display type is nudged up rather than left looking timid next to
   Archivo. */
h1, h2 {
  font-family: var(--display); font-weight: 700;
  letter-spacing: 0; line-height: 1.12; font-size-adjust: 0.47;
}
h3, h4 { font-family: var(--ui); font-weight: 700; line-height: 1.25; }

a { color: var(--azur); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teja); }
img { max-width: 100%; }

.container { width: min(1140px, 92vw); margin: 0 auto; }
.narrow { width: min(860px, 92vw); margin: 0 auto; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: var(--papel); padding: 0.6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }

/* ---------- Tricolore rule ---------- */

.tricolore {
  height: 4px; border-radius: 99px; overflow: hidden;
  background: linear-gradient(90deg,
    var(--rojo) 0 25%, #e8b90a 25% 75%, var(--rojo) 75%);
}
/* Mirrored under RTL, so the blue still leads the reading direction. */
[dir="rtl"] .tricolore {
  background: linear-gradient(270deg,
    var(--rojo) 0 25%, #e8b90a 25% 75%, var(--rojo) 75%);
}
.tricolore-thin { height: 3px; }

/* ---------- Kicker / section heads ---------- */

.kicker {
  font-family: var(--ui); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-soft);
  display: flex; align-items: center; gap: 0.6rem;
}
.kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--azul); flex: none; }
.kicker.center { justify-content: center; }

.section { padding: 4rem 0; }
.section-head { margin-bottom: 2rem; max-width: 62ch; }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top: 0.6rem; }
.section-head p { color: var(--tinta-soft); margin-top: 0.6rem; }

.page-head { padding: 2.6rem 0 0.4rem; }
.page-head h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin-top: 0.6rem; }
.page-head .lede { color: var(--tinta-soft); margin-top: 0.6rem; max-width: 66ch; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--ui); font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  color: var(--papel); background: var(--tinta);
  border: 1.5px solid var(--tinta); border-radius: 10px;
  padding: 0.68rem 1.3rem; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: var(--sombra);
}
.btn:hover { color: var(--papel); transform: translateY(-1px); box-shadow: var(--sombra-alta); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled] { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost { background: transparent; color: var(--tinta); box-shadow: none; }
.btn-ghost:hover { color: var(--tinta); background: var(--papel-2); }
.btn-primario { background: var(--azul); border-color: var(--azul); }
.btn-primario:hover { color: #fff; }
.btn-danger { background: var(--rojo); border-color: var(--rojo); }
.btn-danger:hover { color: #fff; }
.btn-oro { background: var(--miel); border-color: var(--miel); color: var(--tinta); }
.btn-oro:hover { color: var(--tinta); }
.btn-big { font-size: 0.98rem; padding: 0.9rem 1.8rem; }
.btn-sm { font-size: 0.76rem; padding: 0.42rem 0.85rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */

/* The bar is full-bleed — the tint and the rule under it should run edge to
   edge — but its *contents* sit on the same grid as the page. Before this the
   header was padded to the window instead, so the wordmark sat 35px from the
   left edge while the content column started 326px in on a 1512px screen and
   850px in on a 2560px one. Two grids on one page: the logo orphaned against
   the window, the nav pinned to the far right, and an empty corridor down
   each side of everything else.

   `min(1140px, 92vw)` is the same expression `.container` uses, so the
   wordmark now lines up exactly with the content on `.container` pages, and
   is concentric with the narrower reading column on `.narrow` pages. The 92vw
   half is not arbitrary either: (100 - 92) / 2 = 4, so at narrow widths the
   gutter is exactly the 4vw the mobile nav already pads itself by. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 0.7rem 0;
  background: rgba(247, 242, 232, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trazo);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(1140px, 92vw); margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand-mark { display: flex; height: 26px; width: 9px; border-radius: 2px; overflow: hidden; flex-direction: column; }
.brand-mark span { flex: 1; }
.brand-mark span:nth-child(1) { background: var(--rojo); }
.brand-mark span:nth-child(2) { background: #e8b90a; }
.brand-mark span:nth-child(3) { background: var(--rojo); }
.brand-name {
  font-family: var(--ui); font-weight: 800; font-size: 1.12rem;
  letter-spacing: 0.22em; color: var(--tinta);
}

.site-nav { display: flex; align-items: center; gap: 1.15rem; }
.site-nav > a {
  font-family: var(--ui); font-weight: 600; font-size: 0.83rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta); text-decoration: none;
}
.site-nav > a:hover { color: var(--azul); }
.site-nav .btn-nav { padding: 0.44rem 0.95rem; font-size: 0.76rem; color: var(--papel); }
.site-nav .btn-nav:hover { color: var(--papel); }
.site-nav .nav-muted { color: var(--tinta-soft); }
.site-nav .nav-admin { color: var(--teja); }
.site-nav .nav-admin::before { content: "⚙ "; }

.lang-switcher { display: flex; gap: 0.22rem; margin-left: 0.3rem; }
.lang-btn {
  font-family: var(--ui); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.06em;
  text-decoration: none; color: var(--tinta-soft);
  border: 1px solid var(--trazo); border-radius: 5px; padding: 0.2rem 0.38rem;
}
.lang-btn:hover { color: var(--tinta); border-color: var(--tinta); }
.lang-btn.active { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--tinta); margin: 5px 0; border-radius: 2px; transition: 0.2s; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Flash ---------- */

.flash-stack { position: fixed; top: 72px; right: 1rem; z-index: 60; display: grid; gap: 0.5rem; max-width: 380px; }
.flash {
  font-family: var(--ui); font-weight: 600; font-size: 0.9rem;
  background: var(--hoja); border: 1px solid var(--trazo); border-left: 4px solid var(--tinta);
  border-radius: 8px; box-shadow: var(--sombra-alta); padding: 0.72rem 1rem;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.flash-error { border-left-color: var(--rojo); color: var(--rojo); }
.flash-ok { border-left-color: var(--azul); color: var(--azul); }
.flash.gone { opacity: 0; transform: translateX(16px); pointer-events: none; }

/* ---------- Study index: disclosures and progress ---------- */

details.level-block > summary { cursor: pointer; list-style: none; }
details.level-block > summary::-webkit-details-marker { display: none; }
details.level-block > summary::after {
  content: "▾"; font-size: 0.7rem; color: var(--tinta-soft);
  transition: transform 0.2s ease; flex: 0 0 auto;
}
details.level-block[open] > summary::after { transform: rotate(180deg); }
details.level-block > summary:hover h2 { color: var(--azul); }
details.level-block > summary .level-bar-track { max-width: 160px; }

.unit-card.is-seen { border-color: var(--azul); }
.seen-pip { color: var(--azul); font-weight: 700; margin-left: 0.3rem; }

.resume-strip {
  display: flex; align-items: center; gap: 0.7rem; text-decoration: none;
  background: var(--hoja); border: 1px solid var(--trazo);
  border-left: 4px solid var(--azul); border-radius: 10px;
  padding: 0.75rem 1rem; margin: 1.4rem 0; color: var(--tinta);
}
.resume-strip:hover { border-color: var(--azul); }
.resume-label { font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.14em;
                text-transform: uppercase; color: var(--tinta-soft); }
.resume-go { margin-left: auto; color: var(--azul); }

/* ---------- Next step, course bars, shelves ---------- */

.next-step {
  display: flex; align-items: stretch; justify-content: space-between; gap: 1.5rem;
  background: var(--tinta); color: var(--papel);
  border-radius: var(--r); padding: 1.6rem 1.8rem; margin-top: 1.5rem;
  border-left: 6px solid var(--lv, var(--azul)); box-shadow: var(--sombra-alta);
}
.next-kicker { font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.2em;
               text-transform: uppercase; color: #9fb0c8; margin: 0 0 0.35rem; }
.next-step h2 { font-family: var(--display); font-size: clamp(1.5rem, 4vw, 2.1rem);
                margin: 0 0 0.4rem; color: var(--papel); }
.next-step p { margin: 0; color: #c3cbdb; max-width: 54ch; }
.next-badge {
  align-self: flex-start; flex: 0 0 auto; font-family: var(--ui); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #9fb0c8;
  border: 1px solid #3c4a60; border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap;
}

.level-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.level-bar { display: flex; align-items: center; gap: 0.8rem; text-decoration: none;
             padding: 0.35rem 0.4rem; border-radius: 8px; color: inherit; }
.level-bar:hover { background: var(--papel); }
.level-bar.current { background: var(--papel); }
.level-bar.locked { opacity: 0.6; }
.level-bar-track { flex: 1 1 auto; height: 8px; border-radius: 999px;
                   background: var(--trazo); overflow: hidden; }
.level-bar-track i { display: block; height: 100%; background: var(--azul); }
.level-bar-count { flex: 0 0 auto; font-family: var(--ui); font-size: 0.78rem;
                   color: var(--tinta-soft); min-width: 3rem; text-align: right; }

.shelf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.shelf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  padding: 0.7rem 0.85rem; border: 1px solid var(--trazo); border-radius: 10px;
  background: var(--hoja); text-decoration: none; color: var(--tinta);
}
.shelf:hover { border-color: var(--azul); }
.shelf.locked { opacity: 0.65; }
.shelf-name { font-family: var(--ui); font-size: 0.83rem; font-weight: 600; }
.shelf-count { font-family: var(--display); font-size: 1.05rem; color: var(--tinta-soft); }

@media (max-width: 720px) {
  .next-step { flex-direction: column; gap: 0.9rem; padding: 1.3rem; }
}

/* ---------- Account menu ---------- */

.account-menu { position: relative; }
.account-trigger {
  display: flex; align-items: center; gap: 0.45rem;
  background: none; border: 1.5px solid transparent; border-radius: 999px;
  padding: 0.25rem 0.6rem 0.25rem 0.28rem; cursor: pointer;
  font-family: var(--ui); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta);
}
.account-trigger:hover, .account-trigger.open { border-color: var(--trazo); background: var(--hoja); }
.account-trigger:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.account-avatar {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--tinta); color: var(--papel); font-size: 0.8rem; letter-spacing: 0;
}
.account-caret { font-size: 0.6rem; color: var(--tinta-soft); }
.account-trigger.open .account-caret { transform: rotate(180deg); }

.account-dropdown {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60;
  min-width: 15rem; background: var(--hoja);
  border: 1px solid var(--trazo); border-radius: 12px; box-shadow: var(--sombra-alta);
  padding: 0.4rem; display: flex; flex-direction: column;
}
.account-dropdown[hidden] { display: none; }
.account-head {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.6rem 0.7rem 0.7rem; border-bottom: 1px solid var(--trazo); margin-bottom: 0.35rem;
}
.account-head strong { font-family: var(--ui); font-size: 0.9rem; }
/* Targeted rather than a blanket `span`: that selector out-specified
   .badge-pro and repainted the badge's white text muted grey on green, which
   is how the plan badge ended up unreadable in the menu. */
.account-email { display: block; font-size: 0.78rem; color: var(--tinta-soft);
                 word-break: break-all; }
.account-plan { margin-top: 0.35rem; }
.account-dropdown a {
  padding: 0.5rem 0.7rem; border-radius: 8px; text-decoration: none;
  font-family: var(--ui); font-size: 0.85rem; font-weight: 600; color: var(--tinta);
  letter-spacing: 0; text-transform: none;
}
.account-dropdown a:hover { background: var(--papel); }
.account-dropdown hr { border: 0; border-top: 1px solid var(--trazo); margin: 0.35rem 0; }
.account-unlock { color: var(--azul) !important; }
.account-admin { color: var(--teja) !important; }
.account-logout { color: var(--tinta-soft) !important; }

/* On the mobile sheet the nav is a stacked column, so the dropdown becomes
   part of the flow rather than an overlay anchored to a trigger. */
@media (max-width: 900px) {
  .account-menu { width: 100%; }
  .account-trigger { width: 100%; justify-content: flex-start; }
  .account-dropdown { position: static; box-shadow: none; border: 0; padding: 0 0 0 0.4rem; min-width: 0; }
}

/* ---------- Entitlement: locks, price, feature lists ---------- */

.badge-pro {
  background: var(--azul); color: #fff; border-color: var(--azul);
  letter-spacing: 0.06em;
}
.nav-unlock { color: var(--azul); font-weight: 700; }

/* A locked unit card stays legible — it is an advert, not a redaction. */
.unit-card.is-locked { opacity: 0.72; }
.unit-card.is-locked:hover { opacity: 1; }
.lock-pip { font-size: 0.78em; margin-left: 0.3rem; }

.locked-plate { border-left: 4px solid var(--azul); }

.price-plate { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.price-tag { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; }
.price-amount { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--tinta); }
.price-note { font-family: var(--ui); font-size: 0.8rem; letter-spacing: 0.08em;
              text-transform: uppercase; color: var(--tinta-soft); }

.price-blocked { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; max-width: 22rem; }
.price-blocked .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.price-blocked p { text-align: right; margin: 0; }
@media (max-width: 640px) {
  .price-blocked { align-items: flex-start; }
  .price-blocked p { text-align: left; }
}

.feedback { border-left: 4px solid var(--azul); background: var(--papel);
             border-radius: 10px; padding: 1rem 1.1rem; margin-top: 0.9rem; }
.fb-head { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.12em;
           text-transform: uppercase; color: var(--tinta-soft); margin: 0 0 0.4rem; }
.correction-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.correction-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem;
                      font-size: 0.93rem; }
.fix-before { text-decoration: line-through; color: var(--rojo); }
.fix-arrow { color: var(--tinta-soft); }
.fix-after { font-weight: 600; color: var(--azul); }
.fix-why { flex-basis: 100%; font-size: 0.83rem; color: var(--tinta-soft); }

.pattern { border-left: 3px solid var(--trazo); padding: 0.1rem 0 0.1rem 0.8rem; margin-bottom: 0.7rem; }
.pattern strong { font-family: var(--ui); font-size: 0.92rem; }
.pattern p { margin: 0.2rem 0 0; }
.kind-ai { border-style: dashed; }
.kind-cost { display: block; margin-top: 0.5rem; font-family: var(--ui); font-size: 0.72rem;
             letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul); }

.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.pkg-card { display: flex; flex-direction: column; gap: 0.4rem; }
.pkg-card h3 { margin: 0; font-family: var(--ui); font-size: 1rem; letter-spacing: 0.04em; }
.pkg-credits { font-family: var(--display); font-size: 2rem; line-height: 1; margin: 0; }
.pkg-credits span { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.1em;
                    text-transform: uppercase; color: var(--tinta-soft); }
.pkg-price { font-family: var(--ui); font-weight: 700; margin: 0.2rem 0 0; }
.pkg-card .btn { margin-top: auto; }
td.pos { color: var(--azul); }
td.neg { color: var(--tinta-soft); }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.feature-list li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.95rem; }
.feature-list .tick { color: var(--azul); font-weight: 700; flex: 0 0 auto; }
.muted-list li { color: var(--tinta-soft); }
.muted-list .tick { color: var(--tinta-soft); }

.card-element {
  padding: 0.7rem 0.75rem; border: 1.5px solid var(--trazo); border-radius: 9px; background: #fff;
}
#pay-message.error { color: var(--rojo); }

@media (max-width: 640px) {
  .price-plate { flex-direction: column; align-items: flex-start; }
}

/* ---------- Exam task types ---------- */

.cloze { line-height: 2.6; font-size: 1.05rem; }
.gap {
  display: inline-block; width: 9rem; padding: 0.25rem 0.5rem; margin: 0 0.15rem;
  border: 0; border-bottom: 2px solid var(--trazo); background: transparent;
  font-family: var(--texto); font-size: 1rem; color: var(--tinta);
}
.gap:focus { outline: none; border-bottom-color: var(--azul); background: var(--hoja); }
.gap-ok { border-bottom-color: var(--azul); color: var(--azul); }
.gap-bad { border-bottom-color: var(--rojo); color: var(--rojo); }

.word-bank { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
.bank-word {
  font-family: var(--ui); font-size: 0.82rem; padding: 0.25rem 0.7rem;
  border: 1px dashed var(--trazo); border-radius: 999px; color: var(--tinta-soft);
}

.match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.match-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
             padding: 0.6rem 0.8rem; border: 1px solid var(--trazo); border-radius: 10px;
             background: var(--hoja); }
.match-row.gap-ok { border-color: var(--azul); }
.match-row.gap-bad { border-color: var(--rojo); }
.match-text { flex: 1 1 14rem; }
.match-row select { flex: 0 0 auto; max-width: 15rem; padding: 0.4rem 0.5rem;
                    border: 1.5px solid var(--trazo); border-radius: 8px; background: #fff; }
.match-correct { flex-basis: 100%; font-size: 0.83rem; color: var(--azul); }

@media (max-width: 640px) {
  .gap { width: 6.5rem; }
  .match-row select { max-width: none; flex-basis: 100%; }
}

.tf-list, .reorder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.tf-row, .reorder-row {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.7rem 0.9rem; border: 1px solid var(--trazo); border-radius: 10px;
  background: var(--hoja);
}
.tf-row.gap-ok, .reorder-row.gap-ok { border-color: var(--azul); }
.tf-row.gap-bad, .reorder-row.gap-bad { border-color: var(--rojo); }
.tf-text { flex: 1 1 16rem; }
.tf-options { display: flex; gap: 0.8rem; flex: 0 0 auto; flex-wrap: wrap; }
.tf-option { display: flex; align-items: center; gap: 0.3rem; font-size: 0.86rem; cursor: pointer; }
.tf-option input { accent-color: var(--azul); }

.reorder-slot {
  flex: 0 0 auto; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 50%; background: var(--tinta); color: var(--papel);
  font-family: var(--ui); font-size: 0.8rem;
}
.reorder-row select { flex: 1 1 auto; padding: 0.4rem 0.5rem; border: 1.5px solid var(--trazo);
                      border-radius: 8px; background: #fff; max-width: 100%; }

@media (max-width: 640px) {
  .tf-options { flex-basis: 100%; }
}

.section-chip { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.1em;
                text-transform: uppercase; color: var(--tinta-soft); margin: 0 0 0.9rem; }
.section-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: sec; }
.section-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
               padding: 0.6rem 0.85rem; border: 1px solid var(--trazo); border-radius: 10px; }
.section-row.is-next { border-color: var(--azul); background: var(--hoja); }
.section-row.is-done { opacity: 0.6; }
.section-name { flex: 1 1 8rem; font-family: var(--ui); font-weight: 600; font-size: 0.9rem; }
.section-state { margin-left: auto; }
.section-go { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
              flex-wrap: wrap; margin-top: 1.2rem; padding-top: 1.2rem;
              border-top: 1px solid var(--trazo); }
.section-go p { margin: 0; color: var(--tinta-soft); }

/* ---------- Item calibration ---------- */
.table.calib { width: 100%; }
.table.calib th, .table.calib td { padding: 0.55rem 0.8rem; vertical-align: top; }
.table.calib th.num, .table.calib td.num { text-align: right; white-space: nowrap; }
.table.calib td:last-child, .table.calib th:last-child { width: 1%; }
.table.calib .badge { white-space: nowrap; }

/* ---------- Onboarding, placement, plan ---------- */
.onboard .field { border: 0; padding: 0; margin: 0 0 1.6rem; }
.onboard legend { font-family: var(--ui); font-weight: 700; font-size: 0.95rem;
                  margin-bottom: 0.6rem; padding: 0; }
/* Scoped to .onboard throughout: `.choice` is already the exam renderer's
   class for an answer option, and an unscoped rule here would hide the radio
   button on every question in the app. */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem; }
.onboard .choice { display: block; cursor: pointer; }
/* .field label uppercases and letter-spaces, which is right for "Email" and
   wrong for a card carrying a sentence. */
.onboard .field label.choice,
.onboard .field label.pill { text-transform: none; letter-spacing: normal;
                             font-size: 1rem; color: inherit; margin-bottom: 0; }
.onboard .choice input { position: absolute; opacity: 0; }
.onboard .choice-body { display: block; padding: 0.75rem 0.9rem; border: 1px solid var(--trazo);
               border-radius: 10px; background: var(--papel); transition: border-color .12s, background .12s; }
.onboard .choice-body strong { display: block; font-family: var(--ui); font-size: 0.92rem; }
.onboard .choice-body .small { display: block; margin-top: 0.15rem; }
.onboard .choice input:checked + .choice-body { border-color: var(--azul); background: var(--hoja); }
.onboard .choice input:focus-visible + .choice-body { outline: 2px solid var(--azul); outline-offset: 2px; }
.onboard .choice.is-soon .choice-body { opacity: 0.75; }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pill input { position: absolute; opacity: 0; }
.pill > span, .pill-btn { display: inline-block; padding: 0.4rem 0.8rem; border: 1px solid var(--trazo);
                        border-radius: 999px; font-family: var(--ui); font-size: 0.85rem;
                        background: var(--papel); cursor: pointer; }
.pill input:checked + span { border-color: var(--azul); background: var(--azul); color: #fff; }
.pill input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.pill-btn:hover { border-color: var(--azul); }
.center { text-align: center; }
.btn-quiet { background: transparent; border: 0; color: var(--tinta-soft);
             text-decoration: underline; cursor: pointer; font-family: var(--ui); font-size: 0.85rem; }

.exam-shell.single { display: block; }
.exam-shell.single > div { max-width: 720px; margin: 0 auto; }
.row.spread { justify-content: space-between; }

.level-verdict { text-align: center; }
.level-big { font-size: 3.4rem; line-height: 1; margin: 0.2rem 0 0; }
.skill-levels { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.skill-levels li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
                   padding-bottom: 0.7rem; border-bottom: 1px solid var(--trazo); }
.skill-levels li:last-child { border-bottom: 0; padding-bottom: 0; }
.sl-name { font-family: var(--ui); font-weight: 600; min-width: 7rem; }
.sl-evidence { flex: 1 1 auto; }
.sl-ladder { display: flex; gap: 0.2rem; }
.rung { font-family: var(--ui); font-size: 0.65rem; letter-spacing: 0.04em; padding: 0.15rem 0.35rem;
        border-radius: 4px; background: var(--hoja); color: var(--tinta-soft); }
.rung.held { background: var(--azul); color: #fff; }

.plan-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }
.plate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
              flex-wrap: wrap; }
.task-list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: task; }
.task { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem;
        border: 1px solid var(--trazo); border-radius: 10px; }
.task-mins { font-family: var(--ui); font-size: 0.75rem; font-weight: 700; color: var(--tinta-soft);
             min-width: 2.4rem; }
.task-body { flex: 1 1 auto; }
.task-body strong { display: block; font-family: var(--ui); font-size: 0.92rem; }
.task-mock { border-color: var(--rojo); background: var(--rojo-soft); }
.task-review { border-color: var(--azul); }
.focus-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.focus-list li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.milestones { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.milestones li { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.85rem;
                 border: 1px solid var(--trazo); border-radius: 10px; }
.milestones li.is-done { opacity: 0.6; }
.milestones li.is-next { border-color: var(--azul); }
.milestones li.is-due { border-color: var(--rojo); background: var(--rojo-soft); }
.ms-date { font-family: var(--ui); font-weight: 700; font-size: 0.85rem; min-width: 3.2rem; }
.ms-body { flex: 1 1 auto; }
.ms-body strong { display: block; font-family: var(--ui); font-size: 0.9rem; }
.ms-state { margin-left: auto; }
.stack { display: grid; gap: 0.35rem; }
.stack label { font-family: var(--ui); font-size: 0.8rem; font-weight: 600; margin-top: 0.5rem; }
.kv { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.kv li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.kv span { color: var(--tinta-soft); }
.plan-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
              flex-wrap: wrap; padding: 0.9rem 1.1rem; border: 1px solid var(--trazo);
              border-radius: 12px; background: var(--papel); }
.plan-strip-line { margin: 0.2rem 0 0; font-family: var(--ui); font-size: 0.95rem; }
/* ---------- Plan: the form and the calendar it drives ---------- */
.plan-shape { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.35fr);
              gap: 1.6rem; align-items: start; }
@media (max-width: 860px) { .plan-shape { grid-template-columns: 1fr; } }
.plan-shape-form { position: relative; }
/* A rule between the control and its output, so the pairing reads as one
   panel with two halves rather than two panels that happen to touch. */
@media (min-width: 861px) {
  .plan-shape-cal { padding-left: 1.6rem; border-left: 1px solid var(--trazo); }
}
.plan-dirty { margin: 0.6rem 0 0; color: var(--miel); font-weight: 600; }
.plan-shape .cal-day { transition: background .12s ease, border-color .12s ease, opacity .12s ease; }

.tool-sub { color: var(--tinta-soft); font-weight: 400; }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
         flex-wrap: wrap; margin-top: 1.6rem; padding-top: 1.1rem;
         border-top: 1px solid var(--trazo); }
.pager-count { font-family: var(--ui); font-size: 0.78rem; color: var(--tinta-soft); }
.pager-links { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.pager-num, .pager-step, .pager-gap {
  font-family: var(--ui); font-size: 0.82rem; line-height: 1;
  padding: 0.45rem 0.6rem; border-radius: 8px; text-decoration: none;
  color: var(--tinta); border: 1px solid transparent; }
.pager-num { min-width: 2rem; text-align: center; }
.pager-num:hover, .pager-step:hover { border-color: var(--trazo); background: var(--papel); }
.pager-num.is-current { background: var(--tinta); color: var(--papel); font-weight: 700; }
.pager-step { font-weight: 600; }
.pager-step.is-off { color: var(--trazo); pointer-events: none; }
.pager-gap { color: var(--tinta-soft); padding-left: 0.2rem; padding-right: 0.2rem; }

/* ---------- Payment result dialog ---------- */
body.has-modal { overflow: hidden; }
.pay-modal { position: fixed; inset: 0; z-index: 90; display: flex;
             align-items: center; justify-content: center; padding: 1.2rem; }
.pay-modal[hidden] { display: none; }
.pay-modal-backdrop { position: absolute; inset: 0; background: rgba(16, 27, 42, 0.55); }
.pay-modal-card { position: relative; width: min(480px, 100%); background: var(--papel);
                  border-radius: 14px; padding: 1.8rem 1.6rem 1.4rem; text-align: center;
                  box-shadow: 0 24px 60px rgba(16, 27, 42, 0.28); }
.pay-modal-mark { width: 3rem; height: 3rem; border-radius: 50%; margin: 0 auto 0.9rem;
                  display: flex; align-items: center; justify-content: center;
                  font-size: 1.5rem; line-height: 1; color: #fff; }
.pay-modal.is-ok .pay-modal-mark { background: var(--azul); }
.pay-modal.is-pending .pay-modal-mark { background: var(--miel); }
.pay-modal.is-error .pay-modal-mark { background: var(--rojo); }
.pay-modal-card h2 { margin: 0 0 0.4rem; font-size: 1.5rem; }
.pay-modal-lede { margin: 0 0 1.1rem; color: var(--tinta-soft); font-size: 0.95rem; }
.pay-modal-rows { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem;
                  text-align: left; margin: 0 0 1rem; padding: 0.9rem 1rem;
                  background: var(--hoja); border-radius: 10px; }
.pay-modal-rows:empty { display: none; }
.pay-modal-rows dt { font-family: var(--ui); font-size: 0.78rem; color: var(--tinta-soft); }
.pay-modal-rows dd { margin: 0; font-family: var(--ui); font-size: 0.85rem; font-weight: 600;
                     text-align: right; }
.pay-modal-ref { margin: 0 0 0.8rem; font-family: var(--mono);
                 font-size: 0.72rem; word-break: break-all; }
.pay-modal .row { justify-content: center; flex-wrap: wrap; gap: 0.5rem; }

.account-credits { display: grid; grid-template-columns: 1fr auto; gap: 0 0.6rem;
                   align-items: baseline; padding: 0.55rem 0.9rem !important;
                   border-bottom: 1px solid var(--trazo); }
.account-credits .ac-label { font-family: var(--ui); font-size: 0.8rem; font-weight: 600; }
.account-credits .ac-balance { font-family: var(--display); font-size: 1.35rem; line-height: 1;
                               justify-self: end; }
.account-credits .ac-balance.is-low { color: var(--rojo); }
.account-credits .ac-note { grid-column: 1 / -1; font-size: 0.7rem; color: var(--tinta-soft); }

.prob-big { font-family: var(--display); font-size: 2.6rem; line-height: 1; margin: 0.3rem 0 0.4rem; }

/* ---------- The plan calendar ---------- */
.cal { margin-top: 0.8rem; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head span { font-family: var(--ui); font-size: 0.65rem; letter-spacing: 0.08em;
                 text-transform: uppercase; color: var(--tinta-soft); text-align: center;
                 padding-bottom: 0.3rem; }
.cal-pad { visibility: hidden; }
.cal-day { position: relative; aspect-ratio: 1 / 1; border-radius: 7px; border: 1px solid var(--trazo);
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 1px; background: var(--papel); }
.cal-day b { font-family: var(--ui); font-size: 0.78rem; font-weight: 600; line-height: 1; }
.cal-day .cal-mins { font-size: 0.58rem; font-style: normal; color: var(--tinta-soft); line-height: 1; }
.cal-day .cal-flag { font-size: 0.6rem; font-style: normal; line-height: 1; }
.cal-day.is-study { background: var(--hoja); border-color: var(--azul); }
.cal-day.is-rest { opacity: 0.5; }
.cal-day.is-mock { background: var(--miel-soft); border-color: var(--miel); opacity: 1; }
.cal-day.is-mock .cal-flag { color: var(--miel); }
.cal-day.is-exam { background: var(--rojo); border-color: var(--rojo); color: #fff; opacity: 1; }
.cal-day.is-exam .cal-flag { color: #fff; }
.cal-day.is-today { outline: 2px solid var(--tinta); outline-offset: 1px; }
.cal-legend { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }
.cal-legend .key { width: 0.7rem; height: 0.7rem; border-radius: 3px; border: 1px solid var(--trazo);
                   display: inline-block; margin-left: 0.6rem; }
.cal-legend .key:first-child { margin-left: 0; }
.cal-legend .key.is-study { background: var(--hoja); border-color: var(--azul); }
.cal-legend .key.is-rest { background: var(--papel); opacity: 0.5; }
.cal-legend .key.is-mock { background: var(--miel-soft); border-color: var(--miel); }
.cal-legend .key.is-exam { background: var(--rojo); border-color: var(--rojo); }
.pill.pill-sm > span { padding: 0.28rem 0.5rem; font-size: 0.75rem; }

/* ---------- Bulk authoring ---------- */
.admin-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .admin-cols { grid-template-columns: 1fr; } }
.admin-cols textarea { width: 100%; font-family: var(--mono);
                       font-size: 0.82rem; line-height: 1.5; }
.import-report { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.import-report li { padding: 0.55rem 0.8rem; border-radius: 8px; border-left: 3px solid var(--trazo);
                    background: var(--hoja); font-size: 0.88rem; }
.import-report li.ok { border-left-color: var(--azul); }
.import-report li.warn { border-left-color: var(--miel); }
.import-report li.bad { border-left-color: var(--rojo); }
.import-report .line { display: block; font-size: 0.82rem; color: var(--rojo); }
.import-report .line.muted { color: var(--tinta-soft); }
.code-sample { background: var(--tinta); color: var(--papel); padding: 0.9rem 1rem;
               border-radius: 8px; overflow-x: auto; font-size: 0.75rem; line-height: 1.55; margin: 0; }
.gap-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.gap-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; align-items: center; }
.gap-name { font-family: var(--ui); font-weight: 600; font-size: 0.85rem; }
.gap-count { font-family: var(--ui); font-size: 0.8rem; text-align: right; }
.gap-count.thin { color: var(--rojo); font-weight: 700; }
.gap-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--trazo); overflow: hidden; }
.gap-bar i { display: block; height: 100%; background: var(--azul); }
.gap-note { grid-column: 1 / -1; font-size: 0.75rem; color: var(--tinta-soft); }
.table.calib .q-line { display: block; font-weight: 600; }
.table.calib .num { text-align: right; white-space: nowrap; }
.table.calib td.neg { color: var(--rojo); font-weight: 700; }
.table.calib tr.is-retired { opacity: 0.55; }
.table.calib tr.is-retired .q-line { text-decoration: line-through; }

/* ---------- Receipts ---------- */

.receipt {
  background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r);
  box-shadow: var(--sombra); padding: clamp(1.4rem, 4vw, 2.4rem);
}
.receipt-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
                padding-bottom: 1.2rem; border-bottom: 2px solid var(--tinta); }
.receipt-kicker { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.2em;
                  text-transform: uppercase; color: var(--tinta-soft); margin: 0; }
.receipt-number { font-family: var(--display); font-size: 1.7rem; margin: 0.1rem 0 0; }
.receipt-seller { display: flex; flex-direction: column; text-align: right; font-size: 0.8rem;
                  color: var(--tinta-soft); gap: 0.1rem; }
.receipt-seller strong { font-family: var(--ui); color: var(--tinta); font-size: 0.9rem; }

.receipt-void { font-family: var(--ui); font-weight: 700; letter-spacing: 0.2em; color: var(--rojo);
                border: 2px solid var(--rojo); border-radius: 6px; padding: 0.3rem 0.8rem;
                display: inline-block; margin: 1.2rem 0 0; }

.receipt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                gap: 1rem; padding: 1.3rem 0; }
.receipt-meta .k { display: block; font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.12em;
                   text-transform: uppercase; color: var(--tinta-soft); margin-bottom: 0.25rem; }
.receipt-meta .v { display: block; }

.receipt-lines { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.receipt-lines th { font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.12em;
                    text-transform: uppercase; color: var(--tinta-soft);
                    text-align: left; padding: 0.5rem 0; border-bottom: 1px solid var(--trazo); }
.receipt-lines td { padding: 0.85rem 0; border-bottom: 1px solid var(--trazo); vertical-align: top; }
.receipt-lines .right { text-align: right; }
.receipt-lines tfoot td { border-bottom: 0; padding-top: 1rem; }
.total-label { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.total-value { font-family: var(--display); font-size: 1.5rem; }
.receipt-paid { font-family: var(--ui); font-size: 0.8rem; color: var(--azul); margin: 0.6rem 0 0; }
.receipt-note { font-size: 0.7rem; color: var(--tinta-soft); margin: 1.6rem 0 0;
                padding-top: 0.9rem; border-top: 1px solid var(--trazo); }

@media print {
  .receipt { box-shadow: none; border: 0; padding: 0; }
  .receipt-void { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Certificates ---------- */

.cert-row .req-row { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.22rem 0; font-size: 0.93rem; }
.req-mark { font-weight: 700; width: 1rem; flex: 0 0 auto; text-align: center; }
.req-mark.ok { color: var(--azul); }
.req-mark.todo { color: var(--tinta-soft); }
.req-label { flex: 1 1 auto; }
.ml { margin-left: 0.5rem; }

.doc-actions { display: flex; gap: 0.6rem; justify-content: space-between; margin-bottom: 1.2rem; }

/* The document. Fixed proportions so the screen version and the printed one
   are recognisably the same object. */
.certificate {
  background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r);
  box-shadow: var(--sombra-alta); padding: clamp(1.5rem, 5vw, 3rem);
  border-top: 6px solid var(--lv, var(--azul)); text-align: center;
}
.cert-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.cert-issuer { display: flex; align-items: center; gap: 0.55rem; font-family: var(--ui);
               font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; }
.cert-unofficial {
  font-family: var(--ui); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rojo); border: 1.5px solid var(--rojo); border-radius: 999px;
  padding: 0.18rem 0.6rem; white-space: nowrap;
}
.cert-kicker { font-family: var(--ui); font-size: 0.75rem; letter-spacing: 0.2em;
               text-transform: uppercase; color: var(--tinta-soft); margin: 0; }
.cert-level { font-family: var(--display); font-size: clamp(3.5rem, 12vw, 6rem); line-height: 1; margin: 0.2rem 0 0; }
.cert-level-name { font-style: italic; color: var(--tinta-soft); margin: 0 0 2rem; }
.cert-holder-label { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.18em;
                     text-transform: uppercase; color: var(--tinta-soft); margin: 0; }
.cert-holder { font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.4rem); margin: 0.2rem 0 1.5rem; }
.cert-attests { max-width: 46ch; margin: 0 auto 2rem; font-size: 0.95rem; color: var(--tinta-soft); }

.cert-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
              border-top: 1px solid var(--trazo); border-bottom: 1px solid var(--trazo);
              padding: 1.1rem 0; margin-bottom: 1.6rem; }
.cert-facts div { display: flex; flex-direction: column; gap: 0.2rem; }
.cert-facts .k { font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.1em;
                 text-transform: uppercase; color: var(--tinta-soft); }
.cert-facts .v { font-family: var(--display); font-size: 1.35rem; }

.cert-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; text-align: left; }
.cert-code { font-family: var(--ui); font-weight: 700; letter-spacing: 0.1em; font-size: 1rem; margin: 0; }
.cert-meta { font-size: 0.76rem; color: var(--tinta-soft); margin: 0.15rem 0 0; }
.cert-hash { font-family: ui-monospace, monospace; font-size: 0.62rem; color: var(--tinta-soft);
             margin: 0.2rem 0 0; word-break: break-all; max-width: 42ch; }
.cert-qr { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.cert-qr span { font-size: 0.66rem; color: var(--tinta-soft); }
.cert-disclaimer { font-size: 0.7rem; color: var(--tinta-soft); text-align: left;
                   margin: 1.8rem 0 0; padding-top: 1rem; border-top: 1px solid var(--trazo); }

.inline-form { display: flex; gap: 0.4rem; align-items: center; }
.inline-form input { width: 11rem; font-size: 0.82rem; padding: 0.35rem 0.5rem;
                     border: 1.5px solid var(--trazo); border-radius: 7px; }

.verdict { border-left: 5px solid var(--trazo); }
.verdict-good { border-left-color: var(--azul); }
.verdict-bad { border-left-color: var(--rojo); }
.verdict-title { font-family: var(--ui); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.3rem; }
.verdict-good .verdict-title { color: var(--azul); }
.verdict-bad .verdict-title { color: var(--rojo); }
.mono-break { font-family: ui-monospace, monospace; font-size: 0.74rem; word-break: break-all; }
.seal-badge { max-width: 220px; height: auto; }
.statement { font-family: ui-monospace, monospace; font-size: 0.72rem; line-height: 1.6;
             white-space: pre-wrap; word-break: break-word; background: var(--papel);
             border: 1px solid var(--trazo); border-radius: 8px; padding: 0.9rem; margin-top: 0.8rem; }

@media (max-width: 640px) {
  .cert-facts { grid-template-columns: repeat(2, 1fr); }
  .cert-foot { flex-direction: column-reverse; align-items: flex-start; }
}

.cert-seal { display: flex; align-items: flex-end; gap: 1rem; flex: 0 0 auto; }
/* Bounded on both axes with object-fit: the badge comes from another service,
   and a surprise aspect ratio must not be able to stretch across the page. */
.cert-badge { max-height: 76px; max-width: 150px; width: auto; object-fit: contain; }
.cert-qr img { object-fit: contain; }

/* Printing a certificate should yield the certificate, on one page, not the
   website. Chrome drops backgrounds and colour by default when printing, which
   would silently turn the red NON UFFICIALE badge into grey text — the one
   element that must never be quiet. */
@page {
  size: A4 portrait;
  margin: 12mm;
}

@media print {
  .site-header, .site-footer, .flash-stack, .no-print, .skip-link { display: none !important; }
  html, body { background: #fff; margin: 0; padding: 0; }
  main, .narrow { max-width: none; margin: 0; padding: 0; }

  .certificate {
    box-shadow: none; border: 1px solid #999; border-top-width: 5px;
    padding: 10mm 12mm; page-break-inside: avoid; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .cert-unofficial {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    color: #b3372b !important; border-color: #b3372b !important;
  }
  /* Tightened so the whole document clears one A4 page: at the screen scale
     the facts row and the footer pushed onto a second sheet. */
  .cert-head { margin-bottom: 1.2rem; }
  .cert-level { font-size: 4.2rem; }
  .cert-level-name { margin-bottom: 1.1rem; }
  .cert-holder { font-size: 1.9rem; margin-bottom: 0.9rem; }
  .cert-attests { margin-bottom: 1.1rem; font-size: 0.85rem; }
  .cert-facts { padding: 0.7rem 0; margin-bottom: 1rem; }
  .cert-facts .v { font-size: 1.15rem; }
  .cert-disclaimer { margin-top: 1.1rem; padding-top: 0.7rem; font-size: 0.62rem; }
  .cert-badge { max-height: 62px; max-width: 120px; }
  .cert-qr img { width: 92px; height: 92px; }
  img { break-inside: avoid; }
}

/* ---------- Footer ---------- */

.site-footer { margin-top: 4rem; }
.footer-inner { background: var(--tinta); color: #c3cbdb; padding: 2.2rem clamp(1rem, 4vw, 2.2rem) 2.4rem; }
.footer-inner strong { font-family: var(--ui); color: var(--papel); letter-spacing: 0.18em; }
.footer-fine { font-size: 0.84rem; margin-top: 0.5rem; opacity: 0.72; max-width: 74ch; }
.footer-link { color: #9ccdb4; }
.footer-link:hover { color: #c7e6d6; }

/* ---------- Cards ---------- */

.plate {
  background: var(--hoja); border: 1px solid var(--trazo);
  border-radius: var(--r); box-shadow: var(--sombra); padding: 1.5rem;
}
.plate-tight { padding: 1.1rem 1.2rem; }

.card-link {
  display: block; text-decoration: none; color: inherit;
  background: var(--hoja); border: 1px solid var(--trazo);
  border-radius: var(--r); box-shadow: var(--sombra); padding: 1.3rem 1.4rem;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.card-link:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--tinta-soft); }

/* ---------- Level accents ---------- */

.lv { --lv-color: var(--azul); --lv-soft: var(--azul-soft); }
.lv-a1 { --lv-color: var(--azul); --lv-soft: var(--azul-soft); }
.lv-a2 { --lv-color: var(--miel); --lv-soft: var(--miel-soft); }
.lv-b1 { --lv-color: var(--teja); --lv-soft: var(--teja-soft); }
.lv-b2 { --lv-color: var(--rojo); --lv-soft: var(--rojo-soft); }
.lv-c1 { --lv-color: var(--tinta); --lv-soft: #e4e8ef; }
/* C2 is this tenant's own: the Italian ladder stops at C1, so without this
   rule a C2 unit fell through to .lv and came out the same blue as A1. */
.lv-c2 { --lv-color: var(--lavanda); --lv-soft: var(--lavanda-soft); }

.lv-badge {
  display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.55rem;
  font-family: var(--ui); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em;
  border-radius: 6px; background: var(--lv-color, var(--azul)); color: #fff; padding: 0 0.45rem;
}
.lv-rule { height: 3px; background: var(--lv-color, var(--azul)); border-radius: 3px; }

/* ---------- Hero ---------- */

.hero { padding: 4.2rem 0 2.4rem; }
.hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.hero-title { font-size: clamp(2.4rem, 5.6vw, 4.2rem); margin: 0.9rem 0 1rem; }
.hero-title em { font-style: italic; color: var(--teja); }
.hero-sub { font-size: 1.12rem; color: var(--tinta-soft); max-width: 54ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; }
.hero-note { margin-top: 1rem; font-size: 0.9rem; color: var(--tinta-soft); font-style: italic; }

/* The hero "card": a mock conjugation sheet, so the landing page shows
   the actual product instead of a stock photo. */
.hero-sheet {
  background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta); overflow: hidden; transform: rotate(-1.2deg);
}
.hero-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.2rem; background: var(--tinta); color: var(--papel);
  font-family: var(--ui); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-sheet-body { padding: 1.1rem 1.3rem 1.4rem; }
.hero-sheet-body table { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: 0.95rem; }
.hero-sheet-body td { padding: 0.34rem 0; border-bottom: 1px dashed var(--trazo-soft); }
.hero-sheet-body td:first-child { color: var(--tinta-soft); width: 36%; font-size: 0.85rem; }
.hero-sheet-body td:last-child { font-weight: 700; }
.hero-sheet-foot { padding: 0.7rem 1.3rem 1rem; font-size: 0.78rem; color: var(--tinta-soft); font-family: var(--ui); }

/* ---------- Stat tiles ---------- */

.stat-band { padding: 1.6rem 0 0.4rem; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 1rem; }
.tile {
  background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r);
  box-shadow: var(--sombra); padding: 1.1rem 1rem; text-align: center; position: relative; overflow: hidden;
}
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--lv-color, var(--azul)); }
.tile .num { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1; display: block; }
.tile .num small { font-size: 0.5em; }
.tile .lbl { font-family: var(--ui); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-soft); display: block; margin-top: 0.45rem; }

/* ---------- Feature grid ---------- */

.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }
.grid-auto-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.2rem; }

.feature { background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r); box-shadow: var(--sombra); padding: 1.5rem; }
.feature h3 { margin: 0.9rem 0 0.45rem; font-size: 1.08rem; }
.feature p { color: var(--tinta-soft); font-size: 0.95rem; }
.feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: var(--lv-soft, var(--azul-soft)); font-size: 1.25rem; }

/* ---------- Level path (landing) ---------- */

.path { display: grid; gap: 0; position: relative; margin-top: 1rem; }
.path-step { display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; padding: 1.1rem 0; position: relative; }
.path-step:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 66px; bottom: -4px; border-left: 2px dashed var(--trazo); }
.path-num {
  width: 54px; height: 54px; flex: none; border-radius: 14px;
  background: var(--lv-soft); border: 1.5px solid var(--lv-color);
  display: grid; place-items: center; color: var(--lv-color);
  font-family: var(--ui); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.06em;
}
.path-step h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.path-step p { color: var(--tinta-soft); max-width: 64ch; font-size: 0.97rem; }

/* ---------- Auth ---------- */

.auth-wrap { display: grid; place-items: center; padding: 3.4rem 1rem; }
.auth-card { width: min(440px, 100%); background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r-lg); box-shadow: var(--sombra-alta); padding: 2.2rem; }
.auth-card h1 { font-size: 1.7rem; margin: 0.5rem 0 1.3rem; }
.auth-alt { margin-top: 1.1rem; font-size: 0.93rem; color: var(--tinta-soft); }

.field { margin-bottom: 1rem; }
.field label {
  display: block; font-family: var(--ui); font-weight: 600;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.35rem;
  color: var(--tinta-soft);
}
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field select, .field textarea {
  width: 100%; font-family: var(--texto); font-size: 1rem;
  padding: 0.62rem 0.75rem; border: 1.5px solid var(--trazo); border-radius: 9px;
  background: #fff; color: var(--tinta);
}
.field textarea { font-family: var(--texto); line-height: 1.7; resize: vertical; min-height: 220px; }

/* Selects. The browser's own control ignores every other decision on this
   page — its own font, its own chevron, its own focus ring — so it is drawn
   here instead. `appearance: none` removes the native widget; the chevron is
   an inline SVG in the background so there is no extra element and nothing to
   load, and the right padding keeps the longest option clear of it. */
.field select, .stack select, select.select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  font-family: var(--ui); font-size: 0.92rem; font-weight: 500;
  padding: 0.62rem 2.4rem 0.62rem 0.85rem;
  border: 1.5px solid var(--trazo); border-radius: 9px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231d2b3e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.72rem auto;
  color: var(--tinta); cursor: pointer; width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field select:hover, .stack select:hover, select.select:hover { border-color: var(--tinta-soft); }
.field select:focus, .stack select:focus, select.select:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-soft);
}
.field select:disabled, .stack select:disabled { opacity: 0.55; cursor: not-allowed; background-color: var(--hoja); }
/* Firefox keeps a dotted focus ring on the text inside the control. */
.field select:-moz-focusring, .stack select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--tinta); }
.field select option, .stack select option { font-family: var(--ui); color: var(--tinta); }

/* Date inputs sit next to those selects and were the only control still
   wearing the browser's default. The picker indicator stays — it is the
   affordance — but the box around it matches. */
.field input[type="date"], .stack input[type="date"] {
  width: 100%; font-family: var(--ui); font-size: 0.92rem; font-weight: 500;
  padding: 0.6rem 0.85rem; border: 1.5px solid var(--trazo); border-radius: 9px;
  background: #fff; color: var(--tinta);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input[type="date"]:hover, .stack input[type="date"]:hover { border-color: var(--tinta-soft); }
.field input[type="date"]:focus, .stack input[type="date"]:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-soft);
}
.stack input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.stack input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
/* Show/hide password. The wrapper is inserted by js/password.js, so the
   padding that keeps text clear of the eye is scoped to it — a plain password
   field with no toggle keeps the normal padding. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input[type="password"], .pw-wrap input[type="text"] { padding-right: 2.9rem; }
.pw-toggle {
  position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--tinta-soft);
}
.pw-toggle:hover { color: var(--tinta); background: rgba(0, 0, 0, 0.04); }
.pw-toggle:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

.field-hint { font-size: 0.82rem; color: var(--tinta-soft); margin-top: 0.3rem; }
.turnstile-box { margin-bottom: 1rem; min-height: 65px; }

.check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; cursor: pointer; }
.check input[type="checkbox"], .check input[type="radio"] { width: 1.05rem; height: 1.05rem; accent-color: var(--azul); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.4rem 1.1rem; }
.count-muted { color: var(--tinta-soft); font-size: 0.83rem; }

/* ---------- Dashboard ---------- */

.quick-cards { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1.1rem; margin-top: 1.5rem; }
.action-card {
  background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r);
  box-shadow: var(--sombra); padding: 1.3rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.action-card.primary { background: var(--tinta); color: #e6ebf5; border-color: var(--tinta); }
.action-card.primary h3 { color: #fff; }
.action-card.primary p { color: #aab5cb; }
.action-card h3 { font-size: 1.05rem; }
.action-card p { font-size: 0.93rem; color: var(--tinta-soft); flex: 1; }
.action-card form, .action-card .btn { margin-top: auto; }

.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.3rem; margin-top: 1.5rem; align-items: start; }
.stack { display: grid; gap: 1.3rem; }

.panel-title {
  font-family: var(--ui); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-soft);
  margin-bottom: 0.9rem;
}

/* Bars */
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.6rem; align-items: center; margin-bottom: 0.85rem; }
.bar-label { font-family: var(--ui); font-weight: 600; font-size: 0.85rem; }
.bar { grid-column: 1 / -1; height: 9px; background: var(--papel-2); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--azul); border-radius: 99px; transition: width 0.4s ease; }
.bar-fill.low { background: var(--rojo); }
.bar-fill.mid { background: var(--miel); }
.bar-fill.high { background: var(--azul); }
.bar-pct { font-family: var(--ui); font-weight: 700; font-size: 0.85rem; }

/* Readiness dial */
.ready { display: flex; align-items: center; gap: 1.2rem; }
.dial { --pct: 0; width: 92px; height: 92px; flex: none; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--azul) calc(var(--pct) * 1%), var(--papel-2) 0); }
.dial::after { content: ""; position: absolute; inset: 9px; background: var(--hoja); border-radius: 50%; }
.dial span { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.ready-copy h3 { font-size: 1.02rem; margin-bottom: 0.2rem; }
.ready-copy p { font-size: 0.88rem; color: var(--tinta-soft); }
.ready-parts { display: grid; gap: 0.5rem; margin-top: 1rem; }

/* Streak heatmap */
.streak-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.9rem; }
.streak-num { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; }
.streak-lbl { font-family: var(--ui); font-size: 0.8rem; color: var(--tinta-soft); }
.heatmap { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.heat-col { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.heat-cell { width: 11px; height: 11px; border-radius: 3px; background: var(--papel-2); }
.heat-cell[data-level="1"] { background: #bfe0cd; }
.heat-cell[data-level="2"] { background: #85c8a6; }
.heat-cell[data-level="3"] { background: #47a97b; }
.heat-cell[data-level="4"] { background: var(--azul); }
.heat-cell.future { background: transparent; box-shadow: inset 0 0 0 1px var(--trazo-soft); }
.heat-legend { display: flex; align-items: center; gap: 5px; margin-top: 0.7rem; font-size: 0.75rem; color: var(--tinta-soft); font-family: var(--ui); }

/* Forecast */
.forecast { display: flex; align-items: flex-end; gap: 4px; height: 68px; margin-top: 0.4rem; }
.forecast-bar { flex: 1; background: var(--papel-2); border-radius: 3px 3px 0 0; position: relative; min-height: 3px; }
.forecast-bar i { position: absolute; inset: auto 0 0 0; background: var(--teja); border-radius: 3px 3px 0 0; display: block; }
.forecast-axis { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--tinta-soft); font-family: var(--ui); margin-top: 0.3rem; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r); overflow: hidden; }
table.list th {
  font-family: var(--ui); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: left;
  background: var(--papel-2); color: var(--tinta-soft); padding: 0.65rem 0.95rem;
}
table.list td { padding: 0.7rem 0.95rem; border-top: 1px solid var(--trazo-soft); font-size: 0.95rem; }
table.list tr:hover td { background: var(--papel); }

.badge {
  display: inline-block; font-family: var(--ui); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 99px;
}
.badge-pass { background: var(--azul); color: #fff; }
.badge-fail { background: var(--rojo); color: #fff; }
.badge-progress { background: var(--miel-soft); color: var(--miel); }
.badge-muted { background: var(--hoja); color: var(--tinta-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--ui); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.03em;
  background: var(--papel-2); border-radius: 99px; padding: 0.26rem 0.72rem; color: var(--tinta-soft);
}
.chip-strong { background: var(--tinta); color: var(--papel); }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* ---------- Study index ---------- */

.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.4rem 0 2.4rem; }
.tool {
  display: block; text-decoration: none; color: var(--tinta);
  background: var(--hoja); border: 1px solid var(--trazo); border-left: 4px solid var(--lv-color, var(--azul));
  border-radius: var(--r); box-shadow: var(--sombra); padding: 1.05rem 1.15rem;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.tool:hover { color: var(--tinta); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.tool h3 { font-size: 0.98rem; }
.tool p { font-size: 0.85rem; color: var(--tinta-soft); margin-top: 0.25rem; }
.tool .tool-meta { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lv-color); margin-top: 0.5rem; display: block; }

.level-block { margin-bottom: 2.6rem; }
.level-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.level-head h2 { font-size: 1.35rem; }
.level-head .rule { flex: 1; height: 1px; background: var(--trazo); }

.unit-card { border-top: 3px solid var(--lv-color); }
.unit-card .unit-num { font-family: var(--ui); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lv-color); }
.unit-card h3 { font-size: 1.06rem; margin: 0.45rem 0 0.4rem; }
.unit-card p { font-size: 0.9rem; color: var(--tinta-soft); }
.unit-card .unit-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }

/* ---------- Unit (theory) page ---------- */

.unit { width: min(820px, 92vw); margin: 0 auto; padding: 2.6rem 0 1rem; }
.unit-header h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0.55rem 0; }
.unit-blurb { font-size: 1.08rem; color: var(--tinta-soft); font-style: italic; }

.block-p { margin: 0 0 1rem; }
.block-h { font-family: var(--ui); font-weight: 700; font-size: 1.12rem; margin: 2rem 0 0.7rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--lv-color, var(--azul)); display: inline-block; }
.block-list { margin: 0.3rem 0 1.2rem 1.2rem; }
.block-list li { margin-bottom: 0.4rem; }

.block-table { width: 100%; border-collapse: collapse; margin: 0.9rem 0 1.4rem; font-size: 0.94rem; background: var(--hoja); border-radius: 10px; overflow: hidden; box-shadow: var(--sombra); }
.block-table th {
  font-family: var(--ui); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: left; background: var(--tinta); color: var(--papel); padding: 0.55rem 0.8rem;
}
.block-table td { padding: 0.55rem 0.8rem; border-top: 1px solid var(--trazo-soft); vertical-align: top; }
.block-table tr:nth-child(even) td { background: var(--papel); }
/* Key columns are marked in the data, not assumed to be the first one: a
   table like the alphabet is two key/value pairs side by side. */
.block-table td.k { font-family: var(--ui); font-weight: 600; }

.callout { border-radius: 11px; padding: 0.95rem 1.15rem; margin: 1.2rem 0; font-size: 0.97rem; border: 1px solid transparent; }
.callout strong { font-weight: 700; }
.callout-key { background: var(--azul-soft); border-color: #bfe0cd; border-left: 4px solid var(--azul); }
.callout-warn { background: var(--rojo-soft); border-color: #f0cccd; border-left: 4px solid var(--rojo); }
.callout-tip { background: var(--miel-soft); border-color: #eedcb4; border-left: 4px solid var(--miel); }
.callout-falso { background: var(--teja-soft); border-color: #eccdbb; border-left: 4px solid var(--teja); }
.callout-label {
  display: block; font-family: var(--ui); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.35rem; opacity: 0.8;
}

.examples { margin: 1rem 0 1.4rem; display: grid; gap: 0.55rem; }
.example {
  background: var(--hoja); border: 1px solid var(--trazo-soft); border-radius: 10px;
  padding: 0.7rem 0.95rem;
}
.example .es { font-weight: 600; }
.example .tr { font-size: 0.88rem; color: var(--tinta-soft); margin-top: 0.15rem; }

.conj {
  background: var(--hoja); border: 1px solid var(--trazo); border-radius: 12px;
  box-shadow: var(--sombra); margin: 1.2rem 0 1.5rem; overflow: hidden;
}
.conj-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.7rem 1.1rem; background: var(--papel-2);
  font-family: var(--ui); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-soft);
}
.conj-head b { font-size: 0.95rem; letter-spacing: 0.02em; text-transform: none; color: var(--tinta); }
.conj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; padding: 0.9rem 1.1rem 1.1rem; }
.conj-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--trazo-soft); }
.conj-row .p { font-size: 0.85rem; color: var(--tinta-soft); font-family: var(--ui); }
.conj-row .f { font-weight: 700; font-family: var(--ui); }

.pairs { width: 100%; border-collapse: collapse; margin: 0.9rem 0 1.4rem; font-size: 0.95rem; }
.pairs th { font-family: var(--ui); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: var(--tinta-soft); padding: 0.4rem 0.7rem; }
.pairs td { padding: 0.42rem 0.7rem; border-top: 1px solid var(--trazo-soft); }
.pairs td:first-child { font-weight: 600; }
.pairs td:last-child { color: var(--tinta-soft); }

.unit-pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2.4rem 0 1rem; flex-wrap: wrap; }

/* ---------- Inline exercises ---------- */
/* Visually distinct from the surrounding theory: practice should look like a
   different activity, not like another paragraph you can skim past. */

.exercise {
  background: var(--papel-2); border: 1px solid var(--trazo);
  border-left: 4px solid var(--lv-color, var(--azul));
  border-radius: 12px; padding: 1.2rem 1.4rem 1.3rem; margin: 1.6rem 0 1.8rem;
}
.exercise-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.exercise-label {
  font-family: var(--ui); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff; background: var(--lv-color, var(--azul));
  border-radius: 4px; padding: 0.18rem 0.42rem;
}
.exercise-head h3 { font-size: 1rem; flex: 1; }
.exercise-score {
  font-family: var(--ui); font-weight: 700; font-size: 0.8rem;
  color: var(--rojo); background: var(--rojo-soft); border-radius: 99px; padding: 0.16rem 0.6rem;
}
.exercise-score.all-right { color: var(--azul); background: var(--azul-soft); }
.exercise-intro { font-size: 0.93rem; color: var(--tinta-soft); margin-bottom: 0.9rem; }

.exercise-items { list-style: none; counter-reset: ex; display: grid; gap: 0.85rem; }
.ex-item { counter-increment: ex; padding-left: 2rem; position: relative; }
.ex-item::before {
  content: counter(ex) "."; position: absolute; left: 0; top: 0.08rem;
  font-family: var(--ui); font-weight: 700; font-size: 0.82rem; color: var(--tinta-soft);
}
.ex-item.ok::before { content: "✓"; color: var(--azul); }
.ex-item.ko::before { content: "✗"; color: var(--rojo); }
.ex-q { font-size: 1rem; margin-bottom: 0.4rem; }

.ex-input {
  font-family: var(--texto); font-size: 0.98rem; width: min(320px, 100%);
  padding: 0.42rem 0.7rem; border: 1.5px solid var(--trazo); border-radius: 8px; background: #fff;
}
.ex-input-long { width: 100%; }
.ex-input:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.ex-item.ok .ex-input { border-color: var(--azul); background: var(--azul-soft); }
.ex-item.ko .ex-input { border-color: var(--rojo); background: var(--rojo-soft); }
.ex-input:disabled { opacity: 1; }

.ex-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ex-option {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  border: 1.5px solid var(--trazo); border-radius: 8px; background: #fff;
  padding: 0.34rem 0.7rem; font-size: 0.95rem;
}
.ex-option:hover { background: var(--papel); }
.ex-option:has(input:checked) { border-color: var(--tinta); background: var(--hoja); font-weight: 600; }
.ex-item.ok .ex-option:has(input:checked) { border-color: var(--azul); background: var(--azul-soft); }
.ex-item.ko .ex-option:has(input:checked) { border-color: var(--rojo); background: var(--rojo-soft); }
.ex-option input { accent-color: var(--tinta); }

.ex-note { font-size: 0.88rem; color: var(--tinta-soft); margin-top: 0.35rem; }
.ex-note b { font-family: var(--ui); font-weight: 700; color: var(--tinta); }
.exercise-actions { display: flex; gap: 0.5rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* ---------- Vocabulary reviewer ---------- */

.rev-shell { width: min(720px, 94vw); margin: 2rem auto; }
.rev-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.rev-progress { height: 6px; background: var(--papel-2); border-radius: 99px; overflow: hidden; margin-bottom: 1.4rem; }
.rev-progress i { display: block; height: 100%; background: var(--azul); border-radius: 99px; transition: width 0.3s ease; }

.rev-card {
  background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta); padding: 2.6rem 2rem; text-align: center; min-height: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  cursor: pointer; position: relative; overflow: hidden;
}
.rev-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--lv-color, var(--azul)); }
.rev-card:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.rev-word { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.2; }
.rev-meaning { font-size: 1.25rem; color: var(--azul); font-weight: 600; }
.rev-example { font-style: italic; color: var(--tinta-soft); font-size: 1rem; max-width: 46ch; }
.rev-hint { font-family: var(--ui); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-soft); }
.rev-new { position: absolute; top: 0.9rem; right: 0.9rem; }

.grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 1.1rem; }
.grade {
  font-family: var(--ui); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1.5px solid var(--trazo); background: var(--hoja); color: var(--tinta);
  border-radius: 10px; padding: 0.7rem 0.4rem; cursor: pointer; display: grid; gap: 0.15rem;
  transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease;
}
.grade small { font-family: var(--ui); font-weight: 500; font-size: 0.68rem; text-transform: none; letter-spacing: 0; color: var(--tinta-soft); }
.grade:hover { transform: translateY(-1px); }
.grade-again:hover { border-color: var(--rojo); background: var(--rojo-soft); }
.grade-hard:hover { border-color: var(--teja); background: var(--teja-soft); }
.grade-good:hover { border-color: var(--azul); background: var(--azul-soft); }
.grade-easy:hover { border-color: var(--azur); background: #e4eef7; }
.keys-hint { text-align: center; font-size: 0.8rem; color: var(--tinta-soft); margin-top: 0.9rem; font-family: var(--ui); }

.rev-done { text-align: center; padding: 2.6rem 2rem; }
.rev-done .big { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 0.5rem 0; }

/* ---------- Vocabulary browse ---------- */

.vocab-list { display: grid; gap: 0.5rem; }
.vocab-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: baseline;
  background: var(--hoja); border: 1px solid var(--trazo-soft); border-radius: 10px; padding: 0.65rem 0.9rem;
}
.vocab-row .es { font-weight: 700; }
.vocab-row .tr { color: var(--tinta-soft); font-size: 0.94rem; }
.vocab-row .ex { grid-column: 1 / -1; font-style: italic; font-size: 0.88rem; color: var(--tinta-soft); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1.2rem 0 1.6rem; }
.filter-bar input[type="search"] { font-family: var(--texto); font-size: 0.95rem; padding: 0.5rem 0.8rem; border: 1.5px solid var(--trazo); border-radius: 9px; background: #fff; min-width: 220px; }

/* ---------- Readings ---------- */

.reading { width: min(760px, 92vw); margin: 0 auto; padding: 2.4rem 0 1rem; }
.reading-body { font-size: 1.12rem; line-height: 1.85; }
.reading-body p { margin-bottom: 1.1rem; }
.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.4rem 1.2rem; }
.glossary div { font-size: 0.92rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--trazo-soft); }
.glossary b { font-weight: 600; }
.glossary span { color: var(--tinta-soft); }

.quiz-item { border-top: 1px solid var(--trazo-soft); padding: 1.2rem 0; }
.quiz-item:first-child { border-top: none; }
.quiz-q { font-weight: 600; margin-bottom: 0.7rem; }
.quiz-choices { display: grid; gap: 0.4rem; }
.quiz-choice {
  display: flex; gap: 0.7rem; align-items: baseline; cursor: pointer;
  border: 1.5px solid var(--trazo); border-radius: 9px; background: #fff; padding: 0.55rem 0.8rem; font-size: 0.97rem;
}
.quiz-choice input { position: absolute; opacity: 0; }
.quiz-choice .letter { font-family: var(--ui); font-weight: 700; font-size: 0.78rem; color: var(--tinta-soft); }
.quiz-choice:hover { background: var(--papel); }
.quiz-choice.correct { background: var(--azul-soft); border-color: var(--azul); }
.quiz-choice.wrong { background: var(--rojo-soft); border-color: var(--rojo); }
.quiz-expl { font-size: 0.9rem; color: var(--tinta-soft); margin-top: 0.6rem; font-style: italic; }

/* ---------- Phrases / false friends / verbs ---------- */

.phrase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px dashed var(--trazo-soft); align-items: baseline; }
.phrase-row .es { font-weight: 600; }
.phrase-row .tr { color: var(--tinta-soft); font-size: 0.94rem; }
.phrase-row .reg { font-family: var(--ui); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-soft); }

.fa-card { background: var(--hoja); border: 1px solid var(--trazo); border-left: 4px solid var(--teja); border-radius: var(--r); box-shadow: var(--sombra); padding: 1.1rem 1.2rem; }
.fa-card.fon { border-left-color: var(--azur); }
.fa-word { font-family: var(--display); font-weight: 700; font-size: 1.35rem; }
.fa-line { font-size: 0.92rem; margin-top: 0.4rem; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; }
.fa-line b { font-family: var(--ui); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-soft); white-space: nowrap; padding-top: 0.18rem; }
.fa-ex { font-style: italic; color: var(--tinta-soft); font-size: 0.9rem; margin-top: 0.6rem; }

.verb-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.4rem; align-items: start; }
.verb-list { max-height: 70vh; overflow-y: auto; display: grid; gap: 0.2rem; }
.verb-list a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 7px; text-decoration: none; color: var(--tinta); font-size: 0.92rem; }
.verb-list a:hover { background: var(--papel-2); color: var(--tinta); }
.verb-list a.active { background: var(--tinta); color: var(--papel); }
.verb-list a span { color: var(--tinta-soft); font-size: 0.8rem; }
.verb-list a.active span { color: #a8b4cb; }
.verb-group-title { font-family: var(--ui); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-soft); margin: 0.9rem 0 0.3rem; }
.tense-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

/* ---------- Immigration track ---------- */

.letter-body {
  background: var(--hoja); border: 1px solid var(--trazo); border-radius: 10px;
  padding: 1.2rem 1.4rem; font-family: var(--texto); font-size: 0.95rem; line-height: 1.8;
  white-space: pre-wrap;
}
.dialogue { display: grid; gap: 0.6rem; }
.dl-line { display: grid; grid-template-columns: 96px 1fr; gap: 0.9rem; align-items: baseline; }
.dl-who { font-family: var(--ui); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-soft); }
.dl-fr { font-weight: 600; }
.dl-tr { font-size: 0.88rem; color: var(--tinta-soft); }

/* ---------- Drills ---------- */

.drill-shell { width: min(680px, 94vw); margin: 2rem auto; }
.drill-card {
  background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta); padding: 2.2rem 1.8rem; text-align: center;
}
.drill-meta { font-family: var(--ui); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-soft); }
.drill-verb { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5.4vw, 2.9rem); margin: 0.5rem 0 0.2rem; }
.drill-tr { color: var(--tinta-soft); font-size: 0.98rem; }
.drill-person { font-family: var(--ui); font-weight: 700; font-size: 1.3rem; margin: 1.2rem 0 0.8rem; color: var(--teja); }
.drill-input {
  width: 100%; font-family: var(--texto); font-size: 1.35rem; text-align: center;
  padding: 0.75rem 1rem; border: 1.5px solid var(--trazo); border-radius: 11px; background: #fff;
}
.drill-input:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.drill-input.ok { border-color: var(--azul); background: var(--azul-soft); }
.drill-input.ko { border-color: var(--rojo); background: var(--rojo-soft); }
.drill-feedback { margin-top: 1rem; font-size: 1rem; min-height: 2.6rem; }
.drill-feedback .right { color: var(--azul); font-weight: 700; }
.drill-feedback .wrong { color: var(--rojo); font-weight: 700; }
.drill-feedback .answer { font-family: var(--ui); font-weight: 700; font-size: 1.15rem; }
.drill-actions { display: flex; justify-content: center; gap: 0.7rem; margin-top: 1.2rem; }

.dict-sentence { font-family: var(--texto); font-size: 1.2rem; line-height: 1.8; }
.dict-diff .ok { color: var(--azul); }
.dict-diff .ko { color: var(--rojo); text-decoration: underline wavy var(--rojo); }
.speak-card { background: var(--hoja); border: 1px solid var(--trazo); border-left: 4px solid var(--lv-color); border-radius: var(--r); box-shadow: var(--sombra); padding: 1.3rem 1.4rem; }
.timer-big { font-family: var(--display); font-weight: 700; font-size: 3.2rem; line-height: 1; }

.word-count { font-family: var(--ui); font-weight: 600; font-size: 0.82rem; color: var(--tinta-soft); }
.word-count.ok { color: var(--azul); }
.word-count.over { color: var(--rojo); }
.attempt { background: var(--papel); border: 1px solid var(--trazo-soft); border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 0.7rem; }
.attempt-meta { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-soft); margin-bottom: 0.4rem; }
.attempt-text { white-space: pre-wrap; font-size: 0.95rem; }

/* ---------- Exams ---------- */

.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.3rem 0; }
.kind-card {
  position: relative; display: block; cursor: pointer;
  background: var(--hoja); border: 1.5px solid var(--trazo); border-radius: var(--r);
  box-shadow: var(--sombra); padding: 1.2rem 1.3rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.kind-card input { position: absolute; opacity: 0; }
.kind-card h3 { font-size: 1.04rem; margin-bottom: 0.3rem; }
.kind-card p { font-size: 0.9rem; color: var(--tinta-soft); }
.kind-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.kind-card.selected { border-color: var(--tinta); background: var(--tinta); }
.kind-card.selected h3 { color: #fff; }
.kind-card.selected p { color: #aab5cb; }

.options-panel { margin: 0.8rem 0 1.6rem; }
.options-panel .plate { display: grid; gap: 1rem; }
.options-row { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-start; }

.exam-shell { display: grid; grid-template-columns: 1fr 240px; gap: 1.5rem; width: min(1080px, 94vw); margin: 2rem auto; align-items: start; }
.exam-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.exam-count { font-family: var(--ui); font-weight: 700; font-size: 0.95rem; }
#exam-timer {
  font-family: var(--ui); font-weight: 800; font-size: 1.02rem;
  background: var(--tinta); color: var(--papel); border-radius: 8px; padding: 0.3rem 0.8rem;
  min-width: 78px; text-align: center;
}
#exam-timer.timer-low { background: var(--rojo); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.62; } }

.exam-progress { height: 6px; background: var(--papel-2); border-radius: 99px; overflow: hidden; margin-bottom: 1.3rem; }
.exam-progress i { display: block; height: 100%; background: var(--azul); border-radius: 99px; }

.q-plate { background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r-lg); box-shadow: var(--sombra-alta); padding: 1.9rem; }
.q-passage {
  background: var(--papel); border: 1px solid var(--trazo-soft); border-radius: 10px;
  padding: 1rem 1.2rem; margin-bottom: 1.3rem; font-size: 1rem; line-height: 1.75; white-space: pre-wrap;
}
.q-audio { display: flex; align-items: center; gap: 0.8rem; background: var(--papel); border: 1px dashed var(--trazo); border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 1.3rem; }
.q-audio p { font-size: 0.88rem; color: var(--tinta-soft); }
.q-text { font-size: 1.2rem; font-weight: 600; line-height: 1.55; margin-bottom: 1.2rem; }

.choices { display: grid; gap: 0.6rem; }
.choice {
  position: relative; display: flex; gap: 0.8rem; align-items: baseline;
  border: 1.5px solid var(--trazo); border-radius: 10px; background: #fff;
  padding: 0.78rem 1rem; cursor: pointer; font-size: 1.02rem;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.choice:hover { background: var(--papel); }
.choice input { position: absolute; opacity: 0; }
.choice-letter {
  font-family: var(--ui); font-weight: 700; font-size: 0.78rem;
  width: 1.55rem; height: 1.55rem; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--trazo); border-radius: 6px; background: var(--papel); align-self: center;
}
.choice:has(input:checked) { border-color: var(--tinta); background: var(--papel-2); }
.choice:has(input:checked) .choice-letter { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.choice:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.choice.locked { pointer-events: none; }
.choice.reveal-correct { background: var(--azul-soft); border-color: var(--azul); }
.choice.reveal-correct .choice-letter { background: var(--azul); color: #fff; border-color: var(--azul); }
.choice.reveal-wrong { background: var(--rojo-soft); border-color: var(--rojo); }
.choice.reveal-wrong .choice-letter { background: var(--rojo); color: #fff; border-color: var(--rojo); }

.answer-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }
.feedback { border-radius: 10px; padding: 1rem 1.2rem; margin-top: 1.3rem; }
.feedback.ok { background: var(--azul-soft); border-left: 4px solid var(--azul); }
.feedback.bad { background: var(--rojo-soft); border-left: 4px solid var(--rojo); }
.feedback h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.feedback.ok h3 { color: var(--azul); }
.feedback.bad h3 { color: var(--rojo); }
.feedback p { font-size: 0.95rem; }

.exam-side { position: sticky; top: 84px; display: grid; gap: 1rem; }
.qnav { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 0.35rem; }
.qnav a {
  display: grid; place-items: center; height: 32px;
  font-family: var(--ui); font-weight: 600; font-size: 0.78rem;
  border: 1px solid var(--trazo); border-radius: 7px; text-decoration: none; color: var(--tinta); background: #fff;
}
.qnav a.answered { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.qnav a.current { background: var(--miel); color: var(--tinta); border-color: var(--miel); }
.qnav a:hover { border-color: var(--tinta); }

/* ---------- Results ---------- */

.result-banner {
  border-radius: var(--r-lg); padding: 2.2rem 2rem; text-align: center; color: #fff;
  margin: 2rem 0 1.4rem; box-shadow: var(--sombra-alta);
}
.result-banner.pass { background: var(--azul); }
.result-banner.fail { background: var(--rojo); }
.result-verdict { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.result-score { font-family: var(--ui); font-weight: 800; font-size: clamp(1.2rem, 3vw, 1.7rem); margin-top: 0.4rem; }
.result-sub { margin-top: 0.5rem; opacity: 0.92; font-size: 0.98rem; }

.review-item { background: var(--hoja); border: 1px solid var(--trazo); border-left: 4px solid var(--azul); border-radius: var(--r); box-shadow: var(--sombra); padding: 1.3rem 1.5rem; margin-bottom: 1rem; }
.review-item.missed { border-left-color: var(--rojo); }
.review-q { font-weight: 600; font-size: 1.03rem; margin-bottom: 0.8rem; }
.review-num { font-family: var(--ui); font-weight: 700; color: var(--tinta-soft); margin-right: 0.4rem; }
.review-choices { list-style: none; display: grid; gap: 0.32rem; margin-bottom: 0.7rem; }
.review-choices li { padding: 0.4rem 0.75rem; border: 1px solid var(--trazo-soft); border-radius: 8px; font-size: 0.95rem; }
.review-choices li.is-correct { background: var(--azul-soft); border-color: var(--azul); font-weight: 600; }
.review-choices li.is-wrong { background: var(--rojo-soft); border-color: var(--rojo); }
.review-expl { font-size: 0.92rem; color: var(--tinta-soft); font-style: italic; }
.review-ref { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-soft); margin-top: 0.5rem; }

/* ---------- Profile ---------- */

.profile-grid { display: grid; gap: 1.2rem; margin: 1.5rem 0 2rem; }
.switch { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .slider { width: 46px; height: 26px; flex: none; border-radius: 99px; background: var(--papel-2); border: 1.5px solid var(--trazo); position: relative; transition: background 0.15s ease; }
.switch .slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.15s ease; }
.switch input:checked + .slider { background: var(--azul); border-color: var(--azul); }
.switch input:checked + .slider::after { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--azul); outline-offset: 2px; }
.switch-label { font-family: var(--ui); font-weight: 600; font-size: 0.92rem; }

/* ---------- Admin ---------- */
/* Deliberately the same visual language as the rest of the app: an admin
   plane that looks like a different product is one nobody checks. */

.admin .admin-nav { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 1.6rem;
             border-bottom: 1px solid var(--trazo); padding-bottom: 0.6rem; }
.admin-nav a { font-family: var(--ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
               text-decoration: none; color: var(--tinta-soft);
               padding: 0.4rem 0.75rem; border-radius: 8px; }
.admin-nav a:hover { background: var(--hoja); color: var(--tinta); }
.admin-nav a.on { background: var(--tinta); color: var(--papel); }

.admin-section {
  font-family: var(--ui); font-weight: 800; font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-soft);
  margin: 2.6rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--trazo);
}
.admin .page-head .kicker a { color: var(--tinta-soft); text-decoration: none; }
.admin .page-head .kicker a:hover { color: var(--azul); }

.badge-admin { background: var(--teja); color: #fff; }
.chip-warn { background: var(--rojo-soft); color: var(--rojo); }
.chip-bad { background: var(--rojo); color: #fff; }

/* The destructive corner earns its own colour; nothing else in the app is
   outlined in red, so it cannot be mistaken for an ordinary panel. */
.plate.danger { border-color: var(--rojo); border-left: 4px solid var(--rojo); background: #fffbfb; }
.plate.danger .panel-title { color: var(--rojo); }

/* ---------- Utilities ---------- */

.muted { color: var(--tinta-soft); }
.small { font-size: 0.88rem; }
.center { text-align: center; }
.mt { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb { margin-bottom: 1rem; }
.row { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.divider { border: none; border-top: 1px dashed var(--trazo); margin: 1.2rem 0; }

/* Scoped to .js: the class is set by an inline script in <head>, so with
   scripting off — or in a print/PDF render, where the IntersectionObserver
   never fires — the content is simply visible instead of permanently
   transparent. An animation must never be able to hide the page. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.07s; }
.reveal.d2 { transition-delay: 0.14s; }
.reveal.d3 { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .js .reveal { opacity: 1; transform: none; }
  .site-header, .site-nav, .flash-stack, .btn { display: none !important; }
  body { background: #fff; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-sheet { transform: none; }
  .quick-cards { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .exam-shell { grid-template-columns: 1fr; }
  .exam-side { position: static; }
  .verb-layout { grid-template-columns: 1fr; }
  .verb-list { max-height: none; }
  .conj-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0.9rem;
    background: var(--papel); border-bottom: 1px solid var(--trazo);
    padding: 1.2rem clamp(1rem, 4vw, 2.2rem);
  }
  .site-nav.open { display: flex; }
  .q-plate { padding: 1.2rem 1.1rem; }
  .grade-row { grid-template-columns: repeat(2, 1fr); }
  .phrase-row, .vocab-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .dl-line { grid-template-columns: 1fr; gap: 0.1rem; }
}


/* ============================================================
   Right-to-left (Arabic interface)
   ============================================================

   The interface mirrors; the French does not. A conjugation table,
   an example sentence and an exam stem are the content being taught,
   and flipping them would make them unreadable — so anything holding
   French carries dir="ltr" of its own and is exempted here.

   Logical properties would make most of this unnecessary, but the
   stylesheet predates the decision to ship Arabic and rewriting 1,600
   lines of margin-left is a worse risk than thirty lines of override.
   New rules should use margin-inline-start and friends. */

[dir="rtl"] body {
  background-image:
    linear-gradient(var(--cuadricula) 1px, transparent 1px),
    linear-gradient(rgba(105, 95, 165, 0.06) 1px, transparent 1px),
    radial-gradient(900px 460px at 8% -140px, rgba(11, 79, 158, 0.09), transparent 62%),
    radial-gradient(760px 420px at 140% 108%, rgba(200, 16, 46, 0.06), transparent 58%);
}

[dir="rtl"] .kicker::before { order: 2; }
[dir="rtl"] .site-nav { flex-direction: row-reverse; }
[dir="rtl"] .account-dropdown { left: 0; right: auto; }
[dir="rtl"] .skip-link:focus { right: 0; left: auto; }
[dir="rtl"] .flash-stack { left: 1rem; right: auto; }

/* Progress and meter fills grow from the reading edge. */
[dir="rtl"] .bar > span,
[dir="rtl"] .meter-fill,
[dir="rtl"] .progress > span { float: right; }

/* Anything that is French stays French, whatever the chrome is doing. */
[dir="rtl"] [lang="fr"],
[dir="rtl"] .conj-table,
[dir="rtl"] .verb-table,
[dir="rtl"] .exam-stem,
[dir="rtl"] .card-front,
[dir="rtl"] code,
[dir="rtl"] pre { direction: ltr; text-align: left; unicode-bidi: isolate; }

/* Arabic in Archivo falls back to a system face with different
   metrics; give it room rather than letting diacritics collide. */
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: "Noto Naskh Arabic", var(--ui), sans-serif;
  letter-spacing: 0;
}


/* ---------- Filter pills (the false-friends shelf) ---------- */

.pill-btn.is-on {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--hoja);
}
.fa-word .chip { margin-inline-start: 0.4rem; vertical-align: middle; }

/* ---------- Immigration tracks ---------- */

.track-grid { display: grid; gap: 1.2rem; }
.track-card.is-active {
  border-color: var(--azul);
  box-shadow: var(--sombra-alta);
}
.track-card .path { margin-top: 0.8rem; padding-inline-start: 0; list-style: none; }