[hidden] { display: none !important; }

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) max(var(--space-page-gutter), env(safe-area-inset-right)) var(--space-3) max(var(--space-page-gutter), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--surface-navigation) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--action-primary);
  color: var(--text-on-action);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: var(--font-size-body); }
.brand__text small { color: var(--text-muted); font-size: var(--font-size-caption); }

.brand__mark { flex-shrink: 0; }
.brand__text { white-space: nowrap; }
.header-mode { justify-self: center; }
.app-topbar__actions { grid-column: 3; display: flex; align-items: center; gap: var(--space-2); }
.header-theme { order: 0; }
.header-options-toggle { display: none; }
.header-options { display: flex; align-items: center; gap: var(--space-2); }
.header-account { order: 1; }
.header-account__identity { display: flex; flex-direction: column; min-width: 0; }
.header-account__identity small { display: none; }
#account-logout { order: 2; }
.header-options .button { white-space: nowrap; }

/* Mobile has one identity row and a separate, contextual practice control. */
@media (max-width: 1100px) {
  .app-topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); padding-block: var(--space-2); }
  .app-topbar__actions { grid-column: 2; gap: var(--space-2); }
  .header-theme { order: 0; }
  .header-options-toggle { display: inline-grid; }
  .header-options-toggle[aria-expanded="true"] { background: var(--surface-hover); border-color: var(--border-control-hover); }
  .header-mode { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin-top: var(--space-2); }
  .header-mode button { flex: 1; min-height: 44px; }
  .header-options {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: max(var(--space-page-gutter), env(safe-area-inset-right));
    left: auto;
    width: min(20rem, calc(100% - 2 * var(--space-page-gutter)));
    max-height: min(70dvh, calc(100dvh - 9rem), 28rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2);
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
  }
  .header-options[data-open="true"] { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .header-options .button { justify-content: flex-start; min-height: 48px; width: 100%; text-align: left; }
  .header-options .sync-open { background: none; border-color: transparent; }
  .header-options .sync-open:hover { background: var(--surface-hover); }
  .header-account { order: 0; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-1); border-bottom: 1px solid var(--border-default); }
  .header-account__identity small { display: block; color: var(--text-muted); font-size: var(--font-size-small); }
  .header-account__identity #account-name { max-inline-size: none; overflow-wrap: anywhere; white-space: normal; }
  #account-logout { margin-top: var(--space-1); border-top: 1px solid var(--border-default); border-radius: 0 0 var(--radius-md) var(--radius-md); }
}

.app-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-page-gutter) var(--space-8);
}

.page-head { margin-bottom: var(--space-6); }
.page-head h1 { margin: 0 0 var(--space-2); }
.page-head p { margin: 0; color: var(--text-muted); max-width: 62ch; }

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.summary__item {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.summary__value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.summary__label { color: var(--text-muted); font-size: var(--font-size-small); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.section-head h2 { margin: 0; }

.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--space-3);
}

.test-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}

.test-tile:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.test-tile:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; }

.test-tile__num { font-family: var(--font-mono); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.test-tile__sub { color: var(--text-muted); font-size: var(--font-size-caption); }
.test-tile__score { margin-top: auto; font-size: var(--font-size-small); color: var(--text-supporting); }

.test-tile__bar { display: flex; gap: 3px; height: 5px; margin-top: var(--space-2); }
.test-tile__bar span { flex: 1; border-radius: 999px; background: var(--surface-hover); }
.test-tile__bar span[data-on="success"] { background: var(--status-success); }
.test-tile__bar span[data-on="warning"] { background: var(--status-warning); }
.test-tile__bar span[data-on="danger"] { background: var(--status-danger); }

.test-tile[data-done="true"] { border-color: color-mix(in srgb, var(--status-success) 45%, var(--border-default)); }

.runner { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: var(--space-6); align-items: start; }

.runner__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.runner__head h2 { margin: 0; }
.runner__spacer { flex: 1; }

.runner__progress {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-hover);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.runner__progress > span { display: block; height: 100%; width: 0; background: var(--action-primary); transition: width 200ms ease; }

.question {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.question__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

.question__text {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-h3);
  line-height: 1.45;
  text-wrap: balance;
}

.question__text span[title] { border-bottom: 1px dotted var(--text-muted); cursor: help; }

.question__fig { margin: 0 0 var(--space-5); }
.question__fig img { width: 100%; max-width: 520px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: #fff; }

.opciones { display: flex; flex-direction: column; gap: var(--space-3); }

.opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  text-align: left;
  background: var(--surface-default);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  color: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.opcion:hover { border-color: var(--border-control-hover); background: var(--surface-hover); }
.opcion:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; }

.opcion__letra {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-control);
  font-family: var(--font-mono);
  font-weight: 600;
}

.opcion__texto { flex: 1; line-height: 1.4; }
.opcion__marca { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }

.opcion[data-state="selected"] { border-color: var(--action-primary); background: color-mix(in srgb, var(--action-primary) 14%, var(--surface-default)); }
.opcion[data-state="selected"] .opcion__letra { border-color: var(--action-primary); background: var(--action-primary); color: var(--text-on-action); }
.opcion[data-state="correct"] { border-color: var(--status-success); background: var(--status-success-subtle); }
.opcion[data-state="correct"] .opcion__letra { border-color: var(--status-success); }
.opcion[data-state="incorrect"] { border-color: var(--status-danger); background: var(--status-danger-subtle); }
.opcion[data-state="incorrect"] .opcion__letra { border-color: var(--status-danger); }
.opcion[data-answered="true"] { cursor: default; }

.explicacion {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-left: 3px solid var(--action-primary);
  background: var(--surface-default);
  border-radius: var(--radius-md);
}

.explicacion h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-small); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.explicacion p { margin: 0 0 var(--space-2); line-height: 1.5; }

.runner__actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

.hoja {
  position: sticky;
  top: 84px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.hoja h3 { margin: 0 0 var(--space-3); font-size: var(--font-size-small); color: var(--text-muted); }

.hoja__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }

.hoja__cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-control);
  background: var(--surface-default);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  cursor: pointer;
}

.hoja__cell[data-state="answered"] { color: var(--text-default); border-color: var(--border-hover); }
.hoja__cell[data-state="correct"] { background: var(--status-success-subtle); border-color: var(--status-success); color: var(--status-success); }
.hoja__cell[data-state="incorrect"] { background: var(--status-danger-subtle); border-color: var(--status-danger); color: var(--status-danger); }
.hoja__cell[data-state="current"], .hoja__cell[aria-current="true"] { outline: 2px solid var(--action-primary); outline-offset: 1px; }

.hoja__legend { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-4); font-size: var(--font-size-caption); color: var(--text-muted); }
.hoja__legend span { display: inline-flex; align-items: center; gap: 6px; }
.hoja__dot { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--border-control); }
.hoja__dot[data-k="correct"] { background: var(--status-success-subtle); border-color: var(--status-success); }
.hoja__dot[data-k="incorrect"] { background: var(--status-danger-subtle); border-color: var(--status-danger); }
.hoja__dot[data-k="answered"] { background: var(--surface-hover); }

.hoja__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

.resultado { text-align: center; max-width: 640px; margin: 0 auto; }
.resultado__score { font-family: var(--font-mono); font-size: 4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.resultado__score small { font-size: 1.4rem; color: var(--text-muted); }
.resultado__verdict { margin: var(--space-3) 0 var(--space-5); font-size: var(--font-size-h4); }
.resultado__stats { display: flex; justify-content: center; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.resultado__actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }

.review { margin-top: var(--space-6); text-align: left; }
.review__item { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--surface-raised); }
.review__item h4 { margin: 0 0 var(--space-2); font-size: var(--font-size-body); }
.review__bad { color: var(--status-danger); }
.review__good { color: var(--status-success); }

.empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-muted); }

@media (max-width: 1023px) {
  .runner { grid-template-columns: 1fr; }
  .hoja { position: static; order: -1; }
  .hoja__grid { grid-template-columns: repeat(10, 1fr); }
  .hoja__legend, .hoja__actions { display: none; }
  .hoja .hoja__mobile-hint { display: block; }
}

@media (max-width: 560px) {
  .app-main { padding: var(--space-4) var(--space-3) var(--space-8); }
  .question { padding: var(--space-4); }
  .question__text { font-size: var(--font-size-h4); }
  .hoja__grid { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 380px) {
  .brand__text small { display: none; }
}

.sync-intro { color: var(--text-muted); font-size: var(--font-size-small); margin: 0 0 var(--space-4); max-width: 48ch; }
#sync-form .field { margin-bottom: var(--space-4); }
.sync-status { margin-top: var(--space-4); font-size: var(--font-size-small); min-height: 1.2em; }
.sync-status[data-state="running"] { color: var(--text-accent); }
.sync-status[data-state="error"] { color: var(--status-danger); }
.sync-status[data-state="ok"] { color: var(--status-success); }
.sync-summary { margin-top: var(--space-4); }
.sync-summary table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); }
.sync-summary th, .sync-summary td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-default); }
.sync-summary .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.modal { max-width: 560px; width: calc(100vw - 2rem); }

.errores-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.errores-card__text h2 { margin: 0 0 var(--space-1); }
.errores-card__text p { margin: 0; color: var(--text-muted); font-size: var(--font-size-small); max-width: 54ch; }
.errores-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.tu-respuesta {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--status-danger);
  background: var(--status-danger-subtle);
  color: var(--text-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
}

.family-bar { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-4); }
.family-bar__item { flex: none; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-control); border-radius: 999px; background: var(--surface-default); color: var(--text-muted); cursor: pointer; font-size: var(--font-size-small); white-space: nowrap; }
.family-bar__item:hover { border-color: var(--border-control-hover); color: var(--text-default); }
.family-bar__item[aria-pressed="true"] { background: var(--action-primary); border-color: var(--action-primary); color: var(--text-on-action); }
.family-bar__count { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Account gateway reuses Carnet typography, fields and action palette. */
[hidden] { display: none !important; }
.account-panel { max-width: 25rem; margin: clamp(1.5rem, 6vh, 4rem) auto; padding: 0 1rem 2rem; }
.account-panel h1 { font-size: 1.65rem; margin: 1rem 0 .6rem; }
.account-panel p { line-height: 1.5; }
.account-panel .field { margin: 1rem 0; }
.account-panel input { font-size: 1rem; }
.account-panel #account-submit { width: 100%; min-height: 44px; }
.account-panel #account-switch { margin-top: .75rem; width: 100%; }
.account-note, .account-panel small { opacity: .8; font-size: .875rem; }
#account-message { min-height: 1.5em; overflow-wrap: anywhere; }
body:not(.signed-in) .sync-open, body:not(.signed-in) .account-session { display: none; }
.account-session { display: inline-flex; align-items: center; gap: .4rem; }
#install-help { max-width: 26rem; }

.save-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; font-size:13px; color:var(--text-muted, #526076); }
.save-status button { padding:8px 12px; border:1px solid var(--border-control); border-radius:8px; background:var(--surface-default); color:var(--text-default); cursor:pointer; }

#account-name { max-inline-size:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Practice prioritises the current question; the answer map is optional on mobile. */
.runner__main { min-width: 0; }
.runner__sheet-toggle, .runner__sheet-close { display: none; }
.question__fig { position: relative; }
.question__enlarge {
  min-height: 44px; margin-left: auto;
  padding: 8px 12px; border: 1px solid var(--border-control);
  border-radius: var(--radius-sm); background: var(--surface-raised);
  color: var(--text-default); font: inherit; font-size: 0.8rem; cursor: pointer;
}
.question__enlarge:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; }
/* A photo viewer occupies the viewport, independent of the practice layout. */
.image-viewer-open { overflow: hidden; overscroll-behavior: none; }
.question__fig img { cursor: zoom-in; }
.question-image-dialog {
  box-sizing: border-box; position: fixed; inset: 0; margin: 0; padding: 0;
  width: 100%; max-width: none; height: 100dvh; max-height: none;
  border: 0; border-radius: 0; background: #111216; color: #f5f5fa;
  overflow: hidden; overscroll-behavior: contain;
}
.question-image-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.question-image-dialog::backdrop { background: #111216; }
.image-viewer__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
.image-viewer__title { font-size: .875rem; font-weight: 600; }
.image-viewer__button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 8px 12px;
  background: #ffffff0d; color: inherit; border: 1px solid #ffffff38;
  border-radius: var(--radius-md); font: inherit; font-size: .875rem; cursor: pointer;
}
.image-viewer__button:hover { background: #ffffff21; }
.image-viewer__button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.image-viewer__button:disabled { opacity: .4; cursor: default; }
.image-viewer__stage { position: relative; min-height: 0; overflow: hidden; touch-action: none; user-select: none; cursor: zoom-in; }
.image-viewer__stage[data-zoomed="true"] { cursor: grab; }
.image-viewer__stage[data-zoomed="true"]:active { cursor: grabbing; }
.image-viewer__image { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; transform-origin: center; pointer-events: none; }
.image-viewer__message { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; color: #d0d0da; }
.image-viewer__footer { padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.image-viewer__tools { display: flex; justify-content: center; align-items: center; gap: 8px; }
.image-viewer__percentage { min-width: 48px; text-align: right; font-size: .75rem; font-variant-numeric: tabular-nums; color: #c7c7d2; }
.image-viewer__hint { margin: 10px 0 0; text-align: center; font-size: .75rem; color: #b5b5c2; line-height: 1.4; }
@media (max-height: 450px) {
  .image-viewer__header { padding-block: max(4px, env(safe-area-inset-top)) 4px; }
  .image-viewer__footer { padding-block: 4px max(4px, env(safe-area-inset-bottom)); }
  .image-viewer__hint { display: none; }
}
@media (max-width: 1023px) {
  .practicing .app-main { padding: 8px 12px 12px; }
  .runner { gap: 8px; }
  .runner__head { gap: 8px; flex-wrap: nowrap; margin-bottom: 4px; }
  .runner__head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--text-muted); }
  .runner__head > .badge, .runner__count, .runner__spacer { display: none; }
  .runner__sheet-toggle { display: inline-flex; flex: none; min-height: 44px; margin-left: auto; font-size: 0.8rem; }
  .runner__sheet-close { display: flex; min-height: 44px; margin: 0 0 8px auto; }
  .runner__progress { height: 3px; margin-bottom: 8px; }
  .runner > .hoja { display: none; order: 0; }
  .runner[data-sheet-open="true"] > .hoja { display: block; }
  .hoja__grid { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
  .hoja__cell { min-height: 44px; }
  .question { padding: 12px; }
  .question__meta { gap: 4px; margin-bottom: 8px; }
  .question__text { font-size: 1rem; line-height: 1.4; margin-bottom: 12px; text-wrap: pretty; }
  .question__fig { height: var(--question-image-height, 160px); margin-bottom: 12px; padding-right: 0; }
  .question__fig img { display: block; width: 100%; max-width: none; height: 100%; object-fit: contain; }
  .question__meta { align-items: center; }
  .opciones { gap: 8px; }
  .opcion { gap: 8px; padding: 10px; min-height: 48px; font-size: 0.9375rem; align-items: center; }
  .opcion__letra { width: 26px; height: 26px; }
  .opcion__marca { width: 18px; }
  .opcion__marca:empty { display: none; }
  .runner__actions { margin-top: 12px; gap: 8px; }
  .runner__actions .button { min-height: 44px; }
}
@media (max-width: 560px) {
  /* During a test, keep mode and tools in one touch-friendly header row. */
  .practicing .app-topbar { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 6px; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .practicing .brand__text { display: none; }
  .practicing .header-mode { grid-column: 2; grid-row: 1; margin-top: 0; padding: 2px; }
  .practicing .header-mode button { min-width: 0; padding-inline: 6px; }
  .practicing .app-topbar__actions { grid-column: 3; gap: 4px; }
}

#invite-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
#invite-modal .field, #invite-modal h3 { margin-top: var(--space-4); }
#invite-link { width: 100%; min-width: 0; }
#invite-list { padding-left: 1rem; }
#invite-list li { margin-block: 1rem; }
#invite-list span { display: block; overflow-wrap: anywhere; }
#invite-modal button { min-height: 44px; }