/**
 * Mejoras UX compartidas en cursos (cargar después de css/styles.css del curso).
 * Incluye: progreso teoría, práctica compacta, focus sidebar, animación feedback.
 */

button.toc-it,
button.srch-row {
  width: 100%;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}
button.qd {
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.srch-row .srch-rit,
.srch-row .srch-rtl,
.srch-row .srch-rsu {
  display: block;
}

/* Chip curso en cabecera: solo móvil estrecho (coincide con CSS que oculta logo-brand/title) */
.hd-course-chip {
  display: none;
}
@media (max-width: 480px) {
  .hd-course-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(148px, 36vw);
    margin-inline: 4px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Cabecera curso: botón login solo icono alinea con .thm-btn (40×40 ≤768px en styles.css del curso) */
@media (max-width: 560px) {
  .hd .auth-login-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
    align-items: center;
  }
  .hd .auth-login-ico {
    width: 20px;
    height: 20px;
  }
}

/* Resumen temas en sidebar */
.sb-prog {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 8px 12px;
  padding: 9px 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx2);
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r);
}
.sb-prog-lbl {
  color: var(--mu);
  font-weight: 600;
}
.sb-prog-val {
  font-variant-numeric: tabular-nums;
  color: var(--dg);
}

/* Tema marcado como repasado en lista */
.ti.ti-done .tic {
  box-shadow: 0 0 0 2px var(--dg);
}
.ti.ti-done .tnm::after {
  content: ' ✓';
  color: var(--dg);
  font-weight: 800;
}

/* Focus visible: temario y docs (refuerzo sobre base.css) */
.sb .ti:focus-visible {
  outline: 2px solid var(--dg);
  outline-offset: 2px;
  z-index: 1;
}

/* Drawer móvil: cabecera propia (☰ + logo) encima de «Temas del examen» */
.sb-head {
  display: none;
}
@media (max-width: 768px) {
  .sb-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 10px 14px;
    min-height: 52px;
    background: #111827;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .sb-head .hbg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sb-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: #fff;
    padding: 2px 4px;
    border-radius: var(--rs);
  }
  .sb-logo-link:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .sb-logo-link .logo-svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
  .sb-logo-brand {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
  }
  .ly .sb {
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .ly .sb #topicList {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ly .sb .sb-foot {
    flex-shrink: 0;
  }
}

.thgr .doc-link:focus-visible,
.thc .doc-link:focus-visible {
  outline: 2px solid var(--bl);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Feedback al acertar / fallar (reduced motion en base.css) */
.qc .op {
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}
.qc .op.sok,
.qc .op.ok {
  animation: os-bump-ok 0.35s ease;
}
.qc .op.bad {
  animation: os-shake 0.4s ease;
}
@keyframes os-bump-ok {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes os-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-3px);
  }
  40%,
  80% {
    transform: translateX(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qc .op.sok,
  .qc .op.ok,
  .qc .op.bad {
    animation: none;
  }
}

/*
  Cursos: mismo patrón que la portada (.page-scroll + .page-body en grid).
  - Scroll solo en .page-scroll (no en .mn).
  - .page-body en grid 1fr + auto + min-height 100%: pie abajo si hay poco
    contenido y al final del documento si hay scroll (Práctica/Flashcards sin saltos).
 */
html {
  height: 100%;
}

body[data-require-auth] {
  height: 100vh;
  height: 100dvh;
  background: var(--bg2);
  --course-hd-h: 58px;
  --course-tabs-h: 49px;
}

/* Refuerzo del contenedor de scroll (antes .page-fill) */
body[data-require-auth] > .page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  box-sizing: border-box;
}

/* Grid (no flex): pie abajo con poco contenido; al final del scroll si hay mucho */
body[data-require-auth] .page-body {
  display: grid;
  grid-template-rows: minmax(min-content, 1fr) auto;
  min-height: 100%;
  box-sizing: border-box;
}

body[data-require-auth] .page-body > .ly {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: auto;
  height: auto;
  overflow: visible !important;
}

body[data-require-auth] .page-body > #site-footer {
  width: 100%;
}

/*
  Escritorio: columna del temario con fondo position:fixed (no depende de altura de .ly/.sb).
  Firefox deja .sb del alto del contenido; el color lo pinta ::after, no el aside.
 */
@media (min-width: 769px) {
  body[data-require-auth]::after {
    content: '';
    position: fixed;
    top: var(--course-hd-h);
    left: 0;
    width: var(--sb-w);
    bottom: 0;
    background: var(--bg);
    pointer-events: none;
    z-index: 0;
  }

  body[data-require-auth] > .hd {
    position: relative;
    z-index: 3;
  }

  body[data-require-auth] > .page-scroll {
    position: relative;
    z-index: 1;
  }

  body[data-require-auth] .page-body > .ly > .sb {
    position: sticky;
    top: 0;
    z-index: 1;
    max-height: calc(100dvh - var(--course-hd-h));
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent !important;
    border-right: none;
  }
}

body[data-require-auth] .page-body > .ly > .mn,
body[data-require-auth] .page-body > .ly > #mainArea {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Simulacro: alto útil bajo la cabecera; scroll de pregunta en .exc */
.mn:has(> .exhd) {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 58px);
}
@media (max-width: 480px) {
  .mn:has(> .exhd) {
    min-height: calc(100dvh - 52px);
  }
}
.mn:has(> .exhd) .exc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Acciones teoría (botones repasado) */
.theory-actions {
  margin-top: 8px;
}

/*
  Separación entre paneles sin líneas grises (--brd).
  El contraste sb (--bg) / main (--bg2) ya marca las zonas; aquí quitamos bordes
  estructurales y dejamos sombras o acentos solo donde aportan (tabs activas, TOC).
 */
body[data-require-auth] .page-body > .ly > .sb {
  border-right: none;
  box-shadow: none;
}
@media (max-width: 768px) {
  body[data-require-auth] .page-body > .ly > .sb,
  body[data-require-auth] .ly .sb {
    border-right: none;
  }
}

.ss {
  border-bottom: none;
}

.sb-sep {
  height: 0;
  margin: 10px 0;
  background: transparent;
}

.sb-prog {
  border: none;
  background: var(--bg2);
}

.mts {
  border-bottom: none;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}
[data-theme="dark"] .mts {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.sb .ti {
  border-color: transparent;
}
.sb .ti:hover {
  border-color: transparent;
  background: var(--bg2);
}

.thh {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 28px;
}

.thgr .thc {
  border-top: none;
  margin-top: 16px;
  padding-top: 28px;
}
.thgr .thc:first-child {
  margin-top: 0;
  padding-top: 4px;
}

.toc-lbl {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 12px;
}

.toc-it {
  border-left-color: transparent;
}
.toc-it:hover,
.toc-it.ac {
  border-left-color: var(--dg);
}

/* Teoría: más aire entre contenido (tabs/tags) y TOC derecho */
body[data-require-auth] .mn-body {
  max-width: 1000px;
}

.th-layout {
  gap: 72px;
}

@media (min-width: 861px) {
  /*
    TOC con position:fixed (Firefox falla con sticky en este layout de scroll).
    Reservamos hueco en .th-layout para que el contenido no quede debajo.
    Si cambias este bloque de layout: sube ASSET_REV en shared/js/update-notify.js.
  */
  body[data-require-auth] .th-layout {
    padding-right: calc(172px + 72px);
  }

  body[data-require-auth] .toc-nav {
    --toc-w: 172px;
    --mn-max: 1000px;
    position: fixed;
    top: calc(var(--course-hd-h) + var(--course-tabs-h) + 12px);
    left: min(
      calc(100vw - 48px - var(--toc-w)),
      calc(
        var(--sb-w) +
        max(0px, (100vw - var(--sb-w) - var(--mn-max)) / 2) +
        var(--mn-max) - 48px - var(--toc-w)
      )
    );
    width: var(--toc-w);
    padding-left: 28px;
    border-left: 1px solid var(--brd);
    box-sizing: border-box;
    z-index: 4;
    max-height: calc(100dvh - var(--course-hd-h) - var(--course-tabs-h) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 860px) {
  .th-layout {
    gap: 0;
  }
  body[data-require-auth] .th-layout {
    padding-right: 0;
  }
  .toc-nav {
    padding-left: 0;
    border-left: none;
  }
}

/* Carga inicial del curso cloud (Supabase) */
.cloud-boot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(440px, calc(100dvh - 200px));
  padding: 48px 24px;
  box-sizing: border-box;
  opacity: 0;
}
.cloud-boot--in {
  animation: cloud-boot-in 0.55s ease forwards;
}
.cloud-boot--leaving {
  animation: cloud-boot-out 0.42s ease forwards;
  pointer-events: none;
}
.cloud-boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  max-width: 300px;
}
.cloud-boot-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--brd2);
  border-top-color: var(--red);
  border-right-color: color-mix(in srgb, var(--red) 35%, transparent);
  border-radius: 50%;
  animation: cloud-boot-spin 1.15s ease-in-out infinite;
  flex-shrink: 0;
}
.cloud-boot-msg {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--mu);
  letter-spacing: 0.01em;
  transition: opacity 0.22s ease;
}
.cloud-boot-msg--fade {
  opacity: 0;
}
#mainContent.cloud-content-enter {
  animation: cloud-content-in 0.58s ease both;
}
@keyframes cloud-boot-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cloud-boot-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes cloud-content-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cloud-boot--error .cloud-boot-spinner {
  display: none;
}
.cloud-boot-err-icon {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  opacity: 0.9;
}
.cloud-boot-err-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -0.02em;
}
.cloud-boot-err-actions {
  margin: 4px 0 0;
}
@keyframes cloud-boot-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-boot,
  .cloud-boot--in,
  .cloud-boot--leaving,
  #mainContent.cloud-content-enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .cloud-boot-spinner {
    animation: none;
    border-top-color: var(--red);
    opacity: 0.85;
  }
  .cloud-boot-msg {
    transition: none;
  }
}

/* Drawer móvil abierto: bloquear scroll del body y ocultar FAB feedback */
@media (max-width: 768px) {
  body:has(.sb.open) {
    overflow: hidden;
  }
  body:has(.sb.open) .os-feedback-root {
    display: none;
  }
}

/* Pie de curso: mismos estilos que portada en shared/css/base.css (.site-footer) */


/* Táctil: los controles pequeños de práctica (filtros de dificultad, botones de
   sesión/CSV) alcanzan una altura cómoda en pantallas táctiles (WCAG 2.5.8). */
@media (pointer: coarse) {
  .dfb { min-height: 36px; padding: 6px 12px; }
  .ses-bar .btn, .ses-err-tools .btn { min-height: 32px; }
}