/* Iuris Tantum · Práctica: preguntas, flashcards, resultados, ventanas y pie */

/* ACCESIBILIDAD: FOCO VISIBLE CON TECLADO */
:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

.check-card input:focus-visible + .card-label,
.radio-card input:focus-visible + .card-label {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

/* MENÚ COMPACTO (SÓLO MÓVIL) */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-high);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu-toggle[aria-expanded="true"] {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
}

/* RENDIMIENTO DENTRO DE CADA TEMA */
.topic-stat {
  margin-top: 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-low);
}

.topic-stat.good { color: #6ee7b7; }
.topic-stat.warn { color: #fcd34d; }
.topic-stat.bad { color: #fca5a5; }

/* BOTÓN COMENZAR SIEMPRE A MANO */
#btnLaunchQuiz {
  position: sticky;
  bottom: 0.75rem;
  z-index: 20;
}

/* SEMÁFORO PLEGABLE */
details.diagnostic-panel {
  margin-top: 1.6rem;
  margin-bottom: 0;
}

details.diagnostic-panel > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

details.diagnostic-panel > summary::-webkit-details-marker { display: none; }

.diagnostic-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.diagnostic-chevron {
  color: var(--text-mid);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.diagnostic-chevron::after { content: "Ver detalle ▾"; }
details[open] .diagnostic-chevron::after { content: "Ocultar ▴"; }

.diagnostic-body {
  margin-top: 0.9rem;
}

.diagnostic-reset-row {
  display: flex;
  justify-content: flex-end;
}

/* EXPLICACIÓN VISIBLE TRAS RESPONDER */
.rationale-drawer {
  scroll-margin-top: 96px;
}

.rationale-actions {
  position: sticky;
  bottom: 0.75rem;
  z-index: 5;
}

.btn-advance {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

.kbd-hint {
  font-size: 0.7rem;
  color: var(--text-low);
  margin-top: 0.75rem;
  text-align: center;
}

.kbd-hint kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 0.3rem;
  color: var(--text-mid);
}

@media (hover: none) {
  .kbd-hint { display: none; }
}

/* ACCIONES DE RESULTADOS */
.btn-secondary-action {
  background: transparent;
  color: var(--gold-primary);
  border: 1.5px solid var(--gold-primary);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
  transition: all 0.2s ease;
}

.btn-secondary-action:hover {
  background: rgba(251, 191, 36, 0.09);
}

.quiz-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.2rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hud-tags {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.hud-actions-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.hud-tag {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

.hud-tag-topic {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: var(--gold-primary);
}

.hud-tag-diff {
  background: #1e2433;
  border: 1px solid var(--border-bright);
  color: var(--text-mid);
}

.hud-tag-diff.examen {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.timer-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
}

.timer-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold-primary);
  min-width: 32px;
  text-align: right;
}

.timer-val.critical {
  color: var(--danger);
  animation: timerPulse 0.6s infinite alternate;
}

@keyframes timerPulse {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.15); opacity: 0.7; }
}

.timer-linear-track {
  width: 100%;
  height: 5px;
  background: var(--bg-inset);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 1.4rem;
  border: 1px solid var(--border-subtle);
}

.timer-linear-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-primary));
  transition: width 0.1s linear;
}

.timer-linear-bar.danger {
  background: linear-gradient(90deg, #991b1b, #ef4444);
}

.case-narrative {
  background: linear-gradient(145deg, #10141d 0%, #0a0d13 100%);
  border-left: 3.5px solid var(--gold-primary);
  padding: 1.1rem 1.3rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 1.3rem;
  font-size: 0.92rem;
  color: #e5e7eb;
  line-height: 1.55;
}

.case-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.question-headline {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 1.35rem;
}

.options-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}

.opt-choice-btn {
  background: var(--bg-inset);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  text-align: left;
  color: var(--text-high);
  font-size: 0.92rem;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.opt-prefix {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #1c2230;
  border: 1px solid var(--border-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-mid);
  flex-shrink: 0;
}

.opt-choice-btn:active:not(:disabled) {
  background: var(--bg-card-hover);
  border-color: var(--gold-primary);
}

.opt-choice-btn.correct-choice {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: var(--success) !important;
  color: #d1fae5 !important;
}

.opt-choice-btn.correct-choice .opt-prefix {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #064e3b !important;
}

.opt-choice-btn.wrong-choice {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: var(--danger) !important;
  color: #fee2e2 !important;
}

.opt-choice-btn.wrong-choice .opt-prefix {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #450a0a !important;
}

.btn-hint {
  background: rgba(251, 191, 36, 0.1);
  border: 1px dashed var(--gold-primary);
  color: var(--gold-primary);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hint-penalty-badge {
  font-size: 0.65rem;
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 800;
}

.score-badge-live {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold-primary);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hint-toast-card {
  background: #111520;
  border: 1.5px solid var(--gold-primary);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  margin-bottom: 1.2rem;
  animation: drawerSlide 0.2s ease-out;
}

.hint-toast-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.hint-toast-text {
  font-size: 0.85rem;
  color: #e5e7eb;
  line-height: 1.45;
  background: var(--bg-inset);
  padding: 0.7rem;
  border-radius: 6px;
  border-left: 3px solid var(--gold-primary);
}

.traps-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #283042;
}

.traps-section-title {
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f87171;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

.trap-item.trap-chosen {
  border-left-color: var(--gold-primary);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fef3c7;
}

.option-notes {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #d1d5db;
}

.option-notes summary {
  cursor: pointer;
  font-weight: 800;
  color: #fca5a5;
  margin-bottom: 0.4rem;
}

.option-note {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-subtle);
  line-height: 1.45;
}

.option-note em { color: var(--text-mid); font-style: normal; }

.option-note-letter {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.trap-item {
  background: var(--bg-inset);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-left: 3.5px solid #ef4444;
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #d1d5db;
}

.points-earned-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  margin-left: 0.4rem;
}

.points-earned-pill.full {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid var(--success);
}

.points-earned-pill.half {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid var(--warning);
}

.points-earned-pill.zero {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid var(--danger);
}

.breakdown-wrapper {
  margin-top: 1.8rem;
  text-align: left;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.4rem;
}

.breakdown-header {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.review-card {
  background: var(--bg-inset);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  margin-bottom: 0.9rem;
}

.review-card.review-correct { border-left: 4px solid var(--success); }
.review-card.review-hint { border-left: 4px solid var(--warning); }
.review-card.review-wrong { border-left: 4px solid var(--danger); }

.review-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.review-q-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gold-primary);
}

.review-prompt {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.7rem;
  line-height: 1.4;
}

.review-answers-box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #11141c;
  padding: 0.7rem;
  border-radius: 6px;
  margin-bottom: 0.7rem;
  font-size: 0.82rem;
}

.review-ans-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.review-ans-label {
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  min-width: 90px;
  color: var(--text-mid);
}

.review-fundamento {
  font-size: 0.82rem;
  color: #d1d5db;
  line-height: 1.45;
  padding: 0.6rem 0.75rem;
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 6px;
}

.rationale-drawer {
  background: #0d1017;
  border: 1.5px solid var(--border-bright);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  margin-top: 1rem;
  animation: drawerSlide 0.2s ease-out;
}

@keyframes drawerSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.rationale-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.rationale-status.status-ok { color: var(--success); }
.rationale-status.status-fail { color: var(--danger); }
.rationale-status.status-timeout { color: var(--warning); }

.article-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--gold-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.6rem;
}

.rationale-text {
  color: #d1d5db;
  font-size: 0.9rem;
  line-height: 1.55;
}

.rationale-actions {
  margin-top: 1.15rem;
  display: flex;
  justify-content: flex-end;
}

.btn-advance {
  background: var(--gold-primary);
  color: #07080a;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.results-wrap {
  text-align: center;
  padding: 0.5rem 0;
}

.badge-icon-result {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bg-inset);
  border: 2px solid var(--gold-primary);
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
}

.result-score-callout {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.8rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.result-score-callout span {
  color: var(--gold-primary);
}

.result-verdict {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.45rem;
}

.result-summary-msg {
  color: var(--text-mid);
  font-size: 0.88rem;
  max-width: 520px;
  margin: 0 auto 1.5rem;
}

.stats-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  margin-bottom: 1.8rem;
}

.stat-cell {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.5rem;
  text-align: center;
}

.stat-cell-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.stat-cell-lbl {
  font-size: 0.68rem;
  color: var(--text-low);
  text-transform: uppercase;
  font-weight: 700;
}

.flashcard-stage {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.flashcard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.9rem;
}

.flashcard-box {
  background: linear-gradient(145deg, #11151f 0%, #090c12 100%);
  border: 2px solid var(--border-bright);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
}

.flashcard-box.revealed {
  border-color: var(--gold-primary);
  background: linear-gradient(145deg, #161b26 0%, #0d1017 100%);
}

.fc-prompt-lead {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-primary);
  margin-bottom: 0.9rem;
}

.fc-question-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.45;
  margin-bottom: 1.4rem;
}

.fc-answer-container {
  border-top: 1px dashed #2d3748;
  padding-top: 1.4rem;
  margin-top: 0.9rem;
  text-align: left;
}

.fc-buttons-eval {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-top: 1.35rem;
}

.fc-btn {
  padding: 0.8rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.fc-btn-hard {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.fc-btn-medium {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}

.fc-btn-easy {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.comparative-table-wrap {
  overflow-x: auto;
  margin-top: 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}

.comp-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.8rem;
  min-width: 860px;
}

.comp-table th, .comp-table td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid #1a202c;
  line-height: 1.4;
}

.comp-table th {
  background: #11151f;
  color: var(--gold-primary);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.72rem;
  position: sticky;
  top: 0;
}

.comp-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.modal-veil {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.modal-veil.open {
  display: flex;
}

.modal-window {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85);
}

.modal-top {
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-search {
  padding: 0.75rem 1.35rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-inset);
}

.search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  outline: none;
}

.search-input:focus {
  border-color: var(--gold-primary);
}

.modal-scroll {
  padding: 1.35rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 1.55;
  font-size: 0.9rem;
  color: #d1d5db;
}

.legal-item {
  padding-bottom: 1.15rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid #1f2533;
}

.legal-item-heading {
  font-family: 'JetBrains Mono', monospace;
  color: var(--gold-primary);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.tutorial-step-card {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  margin-bottom: 0.9rem;
  display: flex;
  gap: 0.9rem;
}

.tutorial-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.15);
  border: 1.5px solid var(--gold-primary);
  color: var(--gold-primary);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tutorial-step-content h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.25rem;
}

.tutorial-step-content p {
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.45;
}

/* Simulacro: la opción elegida se marca sin decir si está bien */
.opt-choice-btn.picked-choice { border-color: #60a5fa; background: rgba(59, 130, 246, 0.14); }

/* Carta del autor: fondo de espacio con estrellas y lámina holográfica que sigue al dedo o al mouse.
   js/autor.js escribe --mx/--my (posición de la luz, 0-100 %), --px/--py (-1 a 1) y --hyp (0 en el centro,
   1 en el borde) SÓLO en las capas de lámina y reflejo, y aplica la inclinación y el paralaje con transform
   directo: así cada cuadro no recalcula ni repinta la carta entera (en celulares de 120 Hz titilaba). */
#authorModal { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(2, 3, 6, 0.985); }
#authorModal .modal-window { perspective: 900px; overflow: visible; }
.author-card-inner[hidden] { display: none; }

.author-card-inner {
  --mx: 50%; --my: 50%; --px: 0; --py: 0; --hyp: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: min(340px, 86vw);
  aspect-ratio: 5 / 7;
  margin: 0 auto;
  padding: 2.4rem 1.8rem 2.2rem;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, #10204a 0%, transparent 60%),
    radial-gradient(90% 70% at 100% 100%, #2a1145 0%, transparent 55%),
    #03050b;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 30px 70px rgba(0, 0, 0, 0.9),
    0 0 50px rgba(96, 165, 250, 0.16);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-touch-callout: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.holo-stars, .holo-foil, .holo-glare {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
.holo-stars { z-index: 0; }

/* Lámina: brillitos (textura que arma js/autor.js) + arcoíris fino en diagonal + rayado.
   El arcoíris va con la luz y los brillitos al revés: eso da la profundidad. Sólo "prende" donde hay brillo (color-dodge) */
.holo-foil {
  z-index: 1;
  background:
    var(--glitter, none),
    repeating-linear-gradient(115deg,
      hsl(2, 90%, 62%) 0%, hsl(52, 95%, 60%) 3.5%, hsl(140, 80%, 58%) 7%,
      hsl(190, 95%, 60%) 10.5%, hsl(250, 90%, 70%) 14%, hsl(310, 85%, 66%) 17.5%, hsl(2, 90%, 62%) 21%),
    repeating-linear-gradient(65deg, rgba(255,255,255,0.13) 0 1px, transparent 1px 5px);
  background-size: 140px 140px, 220% 220%, 100% 100%;
  background-position:
    calc(var(--px) * -18px) calc(var(--py) * -18px),
    calc(var(--mx) * 1.2 - 10%) calc(var(--my) * 1.2 - 10%),
    center;
  background-blend-mode: screen, overlay, normal;
  mix-blend-mode: color-dodge;
  opacity: calc(0.14 + var(--hyp) * 0.4);
  filter: brightness(0.75) contrast(1.4) saturate(1.2);
  -webkit-mask-image: radial-gradient(farthest-corner circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.15) 80%);
          mask-image: radial-gradient(farthest-corner circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.15) 80%);
}

/* Reflejo de la luz donde está el dedo */
.holo-glare {
  z-index: 3;
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.1) 22%, rgba(0, 0, 0, 0.35) 90%);
  mix-blend-mode: overlay;
  opacity: calc(0.45 + var(--hyp) * 0.55);
}

.author-card-inner > :where(:not(.holo-stars, .holo-foil, .holo-glare)) { position: relative; z-index: 2; }

/* Marco interior, como el borde de una carta coleccionable */
.author-card-inner::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 12px;
  pointer-events: none;
}

#btnCloseAuthorModal, .alt-close {
  position: absolute; top: 10px; right: 12px; z-index: 4;
  width: 44px; height: 44px;
  background: none; border: none; border-radius: 50%; cursor: pointer; line-height: 1;
  font-size: 1.6rem; color: #cbd5e1;
}
.alt-close { color: #ffe08a; }
#btnCloseAuthorModal:focus-visible, .alt-close:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: -4px; }

.author-logo-wrap {
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  will-change: transform;
}

.author-logo-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 14px rgba(147, 197, 253, 0.35)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.8));
}

.author-name-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #f8fafc;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  will-change: transform;
}

.author-handle-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-primary);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.45);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  will-change: transform;
}

/* Estado .charging: la carta brilla cada vez más (js/autor.js sube --charge de 0 a 1).
   Sólo con .charging: un filter permanente sobre la carta obliga a repintarla entera en cada cuadro */
#authorCard.charging {
  --charge: 0;
  filter: brightness(calc(1 + var(--charge) * 0.6)) saturate(calc(1 + var(--charge)));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 30px 70px rgba(0, 0, 0, 0.9),
    0 0 calc(50px + var(--charge) * 90px) rgba(147, 197, 253, calc(0.16 + var(--charge) * 0.7));
}
#authorHandle { cursor: pointer; touch-action: none; -webkit-touch-callout: none; }

/* ============ Variante de la carta ============ */
.alt-card {
  justify-content: space-between;
  padding: 1.6rem 1.4rem 1.3rem;
  border: 3px solid transparent;
  background:
    radial-gradient(90% 60% at 50% 38%, rgba(16, 185, 129, 0.28) 0%, transparent 62%),
    radial-gradient(120% 90% at 50% 0%, #2a1d05 0%, transparent 60%),
    linear-gradient(#07060a, #07060a) padding-box,
    conic-gradient(from 20deg, #7a5410, #ffe8a3, #c98a12, #fff6d6, #9a6a0c, #ffd36b, #7a5410) border-box;
  box-shadow:
    0 0 0 1px rgba(255, 220, 130, 0.35) inset,
    0 30px 80px rgba(0, 0, 0, 0.95),
    0 0 80px rgba(251, 191, 36, 0.5),
    0 0 140px rgba(16, 185, 129, 0.18);
}

.alt-card::after { inset: 8px; border-color: rgba(255, 215, 120, 0.55); border-width: 1.5px; }

/* Lámina de la variante: arcoíris fino con el dorado de base, más brillitos.
   La textura del arcoíris tiene que ser MÁS GRANDE que la carta: si es más chica se repite en mosaico
   y las uniones cortan las bandas en bloques que saltan al moverse. Lo fino sale del período del degradado. */
.alt-card .holo-foil {
  background:
    var(--glitter, none),
    repeating-linear-gradient(115deg,
      hsl(45, 100%, 62%) 0%, hsl(330, 85%, 72%) 1.25%, hsl(200, 90%, 68%) 2.5%,
      hsl(140, 80%, 62%) 3.75%, hsl(45, 100%, 62%) 5%),
    repeating-linear-gradient(65deg, rgba(255,255,255,0.1) 0 1px, transparent 1px 5px);
  background-size: 90px 90px, 300% 300%, 100% 100%;
  background-position:
    calc(var(--px) * -18px) calc(var(--py) * -18px),
    calc(var(--mx) * 0.8 + 10%) calc(var(--my) * 0.8 + 10%),
    center;
  opacity: calc(0.14 + var(--hyp) * 0.32);
  filter: brightness(0.85) contrast(1.3) saturate(1.1);
}
.alt-card .holo-glare {
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my),
    rgba(255, 245, 210, 0.55) 0%, rgba(255, 215, 120, 0.18) 25%, rgba(0, 0, 0, 0.4) 90%);
}

.alt-top {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  color: #ffe08a;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
}
.alt-top span { color: #fff6d6; font-size: 0.7rem; }

.alt-art {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.6rem 0;
}
/* Rayos dorados girando detrás del logo */
.alt-rays {
  position: absolute;
  width: 135%;
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 102, 0.22) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
          mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  animation: raysSpin 24s linear infinite;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }

.alt-logo-wrap {
  position: relative;
  width: 78%;
  aspect-ratio: 792 / 698;
  will-change: transform;   /* capa propia: las sombras difusas se pintan una vez y después sólo se mueven */
  filter:
    drop-shadow(0 0 2px rgba(255, 240, 200, 0.9))
    drop-shadow(0 0 18px rgba(16, 185, 129, 0.75))
    drop-shadow(0 0 40px rgba(251, 191, 36, 0.45))
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.9));
}
/* El logo es una máscara: se pinta con oro pulido; un destello lo recorre cada tanto (se mueve con transform) */
.alt-logo {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #fff3c4 0%, #f7c948 22%, #a8700c 45%, #ffe9a6 60%, #c98a12 78%, #fff6d6 100%);
  -webkit-mask: url(../img/a2.png) center / contain no-repeat;
          mask: url(../img/a2.png) center / contain no-repeat;
}

/* Nombre en sans gruesa (en Cinzel algunos números se confunden con letras) */
.alt-logo::after {
  content: "";
  position: absolute;
  inset: 0 -60%;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, 0.95) 50%, transparent 56%);
  transform: translateX(-60%);
  animation: logoShine 5s ease-in-out infinite;
}
@keyframes logoShine { 0% { transform: translateX(-60%); } 30%, 100% { transform: translateX(60%); } }

.alt-name {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 2.3rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  background: linear-gradient(180deg, #fffbe8 0%, #ffd66b 45%, #b7790f 70%, #ffe7a0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #5a3c06) drop-shadow(0 0 14px rgba(251, 191, 36, 0.55));
  will-change: transform;
}

.alt-foot {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 224, 138, 0.75);
}

/* Efectos de la ruptura (pantalla completa dentro de la ventana) */
.alt-fx {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
}
.card-shard { position: fixed; margin: 0; z-index: 4; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .author-card-inner { transform: none; }
  .alt-rays, .alt-logo::after { animation: none; }
}

.footer-updated { font-size: 0.72rem; opacity: 0.75; }

footer {
  border-top: 1px solid var(--border-subtle);
  background: rgba(10, 12, 16, 0.92);
  padding: 1.4rem 1.25rem;
  margin-top: auto;
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.82rem;
  color: var(--text-low);
}

.signature-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-mid);
  font-weight: 600;
}

.signature-wrap .sig-highlight {
  color: var(--gold-primary);
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============ Colección de cartas (js/cartas.js) ============
   Las medidas internas van en cqw (ancho de la carta): la misma carta sirve de miniatura y en grande. */
.cards-window { max-width: 760px; }
.cards-title { margin: 0; font-size: 1.1rem; font-weight: 800; color: #fff; }
.cards-progress { margin: 0.15rem 0 0; font-size: 0.8rem; font-weight: 700; color: var(--gold-primary); }
.cards-close { width: 44px; height: 44px; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
.cards-intro { margin: 0; padding: 0.9rem 1.35rem 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-mid); }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  grid-auto-rows: max-content;   /* la ventana es flex en columna y si no achica las filas: las cartas se pisan */
  gap: 0.9rem;
  padding: 1rem 1.35rem 1.4rem;
  overflow-y: auto;
}
.cards-count { margin-left: 0.15rem; font-family: 'JetBrains Mono', monospace; font-size: 0.68em; color: var(--gold-primary); }

.tc {
  --frame: linear-gradient(145deg, #64748b, #e2e8f0, #475569, #cbd5e1);
  --accent: #cbd5e1;
  --mx: 30%; --my: 20%; --hyp: 0.4;
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  aspect-ratio: 5 / 7;
  /* borde, relleno y radio en px: los cqw de la propia carta no se miden contra ella misma */
  padding: 7px 7px 6px;
  border: 2px solid transparent;
  border-radius: 9px;
  background: linear-gradient(160deg, #141a26, #07090e) padding-box, var(--frame) border-box;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.tc:hover { transform: translateY(-3px); }
.tc-rara { --frame: linear-gradient(145deg, #1d4ed8, #67e8f9, #3b82f6, #a5f3fc); --accent: #7dd3fc; }
.tc-epica { --frame: linear-gradient(145deg, #7e22ce, #f0abfc, #a21caf, #e9d5ff); --accent: #f0abfc; }
.tc-legendaria {
  --frame: conic-gradient(from 20deg, #7a5410, #ffe8a3, #c98a12, #fff6d6, #9a6a0c, #ffd36b, #7a5410);
  --accent: #fde68a;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 22px rgba(251, 191, 36, 0.35);
}

.tc > :where(:not(.tc-foil, .tc-glare)) { position: relative; z-index: 2; }
.tc-foil, .tc-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.tc-foil { z-index: 1; display: none; }
.tc-glare {
  z-index: 3;
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 25%, rgba(0, 0, 0, 0.3) 90%);
  mix-blend-mode: overlay;
}
/* Lámina holográfica (raras para arriba). La textura es MÁS GRANDE que la carta: si no, se ve cortada en mosaico */
.tc-rara .tc-foil, .tc-epica .tc-foil, .tc-legendaria .tc-foil {
  display: block;
  background:
    repeating-linear-gradient(115deg,
      hsl(2, 90%, 62%) 0%, hsl(52, 95%, 60%) 2%, hsl(140, 80%, 58%) 4%,
      hsl(190, 95%, 60%) 6%, hsl(250, 90%, 70%) 8%, hsl(310, 85%, 66%) 10%, hsl(2, 90%, 62%) 12%),
    repeating-linear-gradient(65deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 5px);
  background-size: 300% 300%, 100% 100%;
  background-position: calc(var(--mx) * 0.8 + 10%) calc(var(--my) * 0.8 + 10%), center;
  mix-blend-mode: color-dodge;
  opacity: calc(0.12 + var(--hyp) * 0.3);
  filter: brightness(0.8) contrast(1.4);
  -webkit-mask-image: radial-gradient(farthest-corner circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.15) 85%);
          mask-image: radial-gradient(farthest-corner circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.15) 85%);
}
.tc-epica .tc-foil { opacity: calc(0.2 + var(--hyp) * 0.4); }
.tc-legendaria .tc-foil { filter: brightness(0.85) contrast(1.3) sepia(0.4); opacity: calc(0.18 + var(--hyp) * 0.35); }

.tc-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 4.4cqw;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.tc-art {
  flex: 1;
  width: 100%;
  display: grid;
  place-items: center;
  margin: 4cqw 0 3cqw;
  border-radius: 4cqw;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 50% 45%, hsla(var(--hue), 80%, 55%, 0.35), transparent 65%),
    rgba(0, 0, 0, 0.35);
}
.tc-art > * { grid-area: 1 / 1; }
.tc-rays {
  width: 150%;
  aspect-ratio: 1;
  background: repeating-conic-gradient(hsla(var(--hue), 90%, 70%, 0.16) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%);
          mask-image: radial-gradient(circle, #000 0%, transparent 60%);
}
.tc-icon {
  width: 46cqw;
  color: hsl(var(--hue), 90%, 74%);
  filter: drop-shadow(0 0 3cqw hsla(var(--hue), 90%, 60%, 0.75));
}
.tc-seal { width: 64cqw; border-radius: 50%; filter: drop-shadow(0 0 4cqw rgba(251, 191, 36, 0.6)); }
.tc-name { font-size: 7.6cqw; font-weight: 900; line-height: 1.1; }
.tc-legendaria .tc-name { font-family: 'Cinzel', serif; color: #ffe08a; }
.tc-text { margin-top: 2.5cqw; font-size: 4.8cqw; line-height: 1.35; color: rgba(255, 255, 255, 0.82); }
.tc-ref { margin-top: 2.5cqw; font-family: 'JetBrains Mono', monospace; font-size: 3.9cqw; font-weight: 700; color: var(--accent); }
.tc:not(.tc-big) .tc-text { display: none; }   /* en miniatura no se lee: va en la vista grande */

/* Bloqueada: dorso con la pista para ganarla */
.tc-locked {
  justify-content: center;
  gap: 4cqw;
  border: 1.5px dashed rgba(148, 163, 184, 0.35);
  background: repeating-linear-gradient(45deg, #0d1118 0 6px, #0a0d13 6px 12px);
  box-shadow: none;
}
.tc-back-mark { font-family: 'Cinzel', serif; font-size: 30cqw; font-weight: 900; line-height: 1; color: rgba(251, 191, 36, 0.3); }
.tc-hint { font-size: 6cqw; line-height: 1.3; color: var(--text-low); }
.tc-locked .tc-num { position: absolute; bottom: 5cqw; font-family: 'JetBrains Mono', monospace; font-size: 4.4cqw; color: var(--text-low); }

/* Vista grande */
#cardViewModal { align-items: center; justify-content: center; }
.card-view-window { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 360px; perspective: 900px; }
.card-view-title { margin: 0; font-family: 'Cinzel', serif; font-size: 1.35rem; font-weight: 900; color: var(--gold-primary); text-shadow: 0 0 14px rgba(251, 191, 36, 0.5); }
.card-view-stage { width: min(320px, 80vw); }
.tc-big { padding: 18px 18px 15px; border-width: 5px; border-radius: 18px; cursor: default; touch-action: none; transition: none; will-change: transform; }
.tc-big:hover { transform: none; }
.tc-reveal { animation: cardReveal 0.9s cubic-bezier(0.16, 0.84, 0.24, 1); }
@keyframes cardReveal {
  from { transform: rotateY(180deg) scale(0.6); opacity: 0; filter: brightness(3); }
  60% { opacity: 1; filter: brightness(1.6); }
  to { transform: none; opacity: 1; filter: none; }
}
.card-view-actions { display: flex; gap: 0.6rem; }
.card-view-btn {
  min-height: 44px;
  padding: 0 1.2rem;
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 768px) {
  .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; padding: 0.9rem 1rem 1.2rem; }
  .nav-buttons .cards-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-reveal { animation: none; }
}