:root{
  color-scheme:dark;
  --pc-browser-bg:#160e19;
  --pc-input-bg:#211725;
  --pc-surface-fallback:#332438;
}
html{
  background-color:var(--pc-browser-bg);
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  background-color:var(--pc-browser-bg);
  color-scheme:dark;
}
button,input,textarea,select{
  color-scheme:dark;
  accent-color:var(--gold);
  -webkit-tap-highlight-color:transparent;
}
.input,textarea,select{
  background-color:var(--pc-input-bg);
  color:var(--text);
}
select option{
  background:var(--pc-input-bg);
  color:var(--text);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--pc-input-bg) inset;
  transition:background-color 9999s ease-out 0s;
}
.card,.hero,.modal,.bottom-nav{
  -webkit-backdrop-filter:blur(17px);
  backdrop-filter:blur(17px);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .card,.hero,.modal{background:var(--pc-surface-fallback)}
  .bottom-nav{background:#251729}
}

/* Evita que los cambios entre la vista base y la experiencia guiada se pinten en frames distintos. */
#app{
  contain:layout style;
}
#app>[data-guided-root],
#app>[data-guide-detail-toolbar]{
  animation:pc-guide-in .12s ease-out both;
}
@keyframes pc-guide-in{
  from{opacity:.92;transform:translateY(1px)}
  to{opacity:1;transform:none}
}

/* Trivia guiada: una pregunta por pantalla */
.trivia-stepper{
  position:relative;
}
.trivia-stepper [data-trivia-progress]{display:none}
.trivia-stepper .trivia-question{
  display:none;
  margin:0;
  min-height:290px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px 16px;
  background:rgba(255,255,255,.055);
}
.trivia-stepper .trivia-question.is-current{display:block}
.trivia-stepper-head{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,212,120,.09);
  border:1px solid rgba(255,212,120,.18);
}
.trivia-stepper-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:900;
}
.trivia-stepper-head-row strong{color:var(--gold)}
.trivia-stepper-head .progress{margin:9px 0 0}
.trivia-stepper-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:14px;
}
.trivia-stepper-nav .btn[disabled],
.trivia-stepper-nav .btn-secondary[disabled]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}
.trivia-stepper [data-trivia-submit]{margin-top:10px}
.trivia-stepper [data-trivia-submit].step-hidden{display:none}
@media(max-width:520px){
  .trivia-stepper .trivia-question{min-height:0;padding:16px 13px}
  .trivia-stepper-nav{grid-template-columns:1fr}
}

/* Modo TV: QR compacto en el encabezado */
.tv-top-layout{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.tv-top-layout .tv-hero{min-width:0}
.tv-join-card{
  text-align:center;
  display:grid;
  justify-items:center;
  align-content:start;
}
.tv-join-card-compact{
  padding:14px 12px 13px;
  align-self:start;
}
.tv-join-card-compact .eyebrow{margin-bottom:7px}
.tv-join-card-compact b{font-size:14px;margin-top:4px}
.tv-join-card-compact small{
  display:block;
  max-width:155px;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}
.tv-qr-canvas{
  width:150px!important;
  height:auto!important;
  margin:3px auto 5px;
  background:#fff;
  border-radius:15px;
  padding:7px;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}
@media(max-width:900px){
  .tv-top-layout{grid-template-columns:150px minmax(0,1fr);gap:16px}
  .tv-qr-canvas{width:122px!important}
  .tv-join-card-compact small{display:none}
}
@media(max-width:680px){
  .tv-top-layout{grid-template-columns:1fr}
  .tv-top-layout .tv-hero{order:1}
  .tv-join-card-compact{order:2;grid-template-columns:auto 1fr;justify-items:start;align-items:center;text-align:left;gap:4px 10px}
  .tv-join-card-compact .eyebrow{grid-column:2;margin:0}
  .tv-join-card-compact .tv-qr-canvas{grid-row:1/4;width:92px!important;margin:0}
  .tv-join-card-compact b{grid-column:2;margin:0}
  .tv-join-card-compact small{grid-column:2;display:block;margin:0;max-width:none}
}

/* Recuerdo descargable */
.recap-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:16px;
}
.recap-actions .btn,.recap-actions .btn-secondary{width:auto}
.recap-pdf-status{
  margin-top:8px;
  font-size:11px;
  color:var(--muted);
}
@media(max-width:520px){
  .recap-actions .btn,.recap-actions .btn-secondary{width:100%}
}
@media print{
  .recap-actions,.recap-pdf-status{display:none!important}
  body{background:#fff!important;color:#111!important}
}