/* Botonera tipo Preguntados */
.option-grid{
  display:grid;
  gap:14px;
  /* antes: grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); */
  grid-template-columns: 1fr;        /* una columna fija */
  margin-top:14px;

  /* opcional: centrar y limitar ancho para que se vea prolijo */
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}



.option-btn{
  position:relative;
  width:100%;
  border:2px solid #0d6efd20;
  background:#fff;
  padding:18px 16px 18px 56px;
  border-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  font-size:1.05rem;
  text-align:left;
  transition:transform .05s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  cursor:pointer;
}
.option-btn:hover{ box-shadow:0 6px 16px rgba(13,110,253,.2); border-color:#0d6efd60; }
.option-btn:active{ transform:translateY(1px); }

.option-btn .letter{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#e9ecef; color:#212529; font-weight:700;
}

.option-btn.selected{
  background:#0d6efd; color:#fff; border-color:#0b5ed7;
  box-shadow:0 6px 18px rgba(13,110,253,.35);
}
.option-btn.selected .letter{ background:#fff; color:#0d6efd; }

.option-btn.locked{ cursor:not-allowed; opacity:.75; }
.option-btn.locked:hover{ box-shadow:0 2px 8px rgba(0,0,0,.06); border-color:#0d6efd20; }

/* Accesibilidad foco teclado */
.option-btn:focus-visible{
  outline:3px solid #6610f2; outline-offset:2px;
}

/* Leyenda imagen */
.leyenda{ font-size:.9rem; color:#666; margin-top:5px; text-align:center; }

/* ================================
   Optimización móvil Clarita la Cuenta
   ================================ */
:root{
  --clc-bg: #111315;
  --clc-card: #1f1f1f;
  --clc-card-2: #252525;
  --clc-border: #34383d;
  --clc-text: #eeeeee;
  --clc-muted: #b7b7b7;
}

.public-mobile-page,
.student-tournaments-page,
.game-page{
  background: var(--clc-bg) !important;
  color: var(--clc-text);
  min-height: 100vh;
}

.public-mobile-page .text-muted,
.student-tournaments-page .text-muted,
.game-page .text-muted{
  color: var(--clc-muted) !important;
}

.public-shell,
.student-shell,
.juego-container{
  max-width: 760px;
}

.mobile-card,
.juego-card{
  background: var(--clc-card);
  color: var(--clc-text);
  border: 1px solid var(--clc-border);
  border-radius: 14px;
}

.mobile-card-body,
.juego-card-body{
  padding: 1.25rem;
}

.public-mobile-page .form-control,
.public-mobile-page .form-select{
  background: #2a2a2a;
  color: var(--clc-text);
  border-color: #555;
  min-height: 48px;
  font-size: 1rem;
}

.public-mobile-page .form-control:focus,
.public-mobile-page .form-select:focus{
  background: #2a2a2a;
  color: var(--clc-text);
}

.public-mobile-page .form-control[readonly]{
  background: #303030;
  color: #dcdcdc;
}

.public-mobile-page .form-label{
  font-weight: 700;
}

.signup-warning{
  font-size: .98rem !important;
  line-height: 1.45;
}

.signup-actions{
  padding-top: .4rem;
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
}

.torneo-public-card,
.torneo-student-card{
  background: var(--clc-card-2);
  border: 1px solid var(--clc-border);
  border-radius: 14px;
  padding: 1rem;
}

.torneos-lista-mobile{
  display: grid;
  gap: .85rem;
}

.torneo-student-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.7rem;
}

.torneo-student-meta{
  display:grid;
  gap:.25rem;
  font-size:.95rem;
  color: var(--clc-muted);
  margin-bottom:.85rem;
}

.torneo-student-action .btn,
.action-zone .btn{
  min-height: 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.wait-card .lead{
  font-size: 1.35rem;
}

/* Juego en celular */
.game-page .navbar{
  min-height: 42px;
  border-bottom: 1px solid #20242a;
}

.game-page .navbar-brand{
  font-size: .95rem;
}

.torneo-titulo{
  font-size: 1.35rem;
  line-height: 1.25;
}

.timer-bar{
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: 10px;
  background: #043b45;
  border-color: #0a6a78;
  color: #d8fbff;
  padding: .75rem;
}

.pregunta-nav-wrap{
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: .25rem;
  -webkit-overflow-scrolling: touch;
}

.pregunta-nav-wrap .pregunta-nav{
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  font-weight: 700;
}

.problema-bloque h5{
  font-size: 1.08rem;
  font-weight: 800;
}

.problema-bloque p{
  font-size: .98rem;
  line-height: 1.45;
}

.game-page .img-container{
  margin-top: .5rem;
}

.game-page .img-problema{
  max-width: 100%;
  width: auto;
  max-height: min(34vh, 280px);
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.game-page .leyenda{
  color: var(--clc-muted);
  font-size: .8rem;
}

.game-page .option-grid{
  gap: .7rem;
  max-width: none;
}

.game-page .option-btn{
  background: #4b4b4b;
  color: #f1f1f1;
  border-color: #5c6470;
  border-radius: 14px;
  padding: .95rem .9rem .95rem 3.15rem;
  min-height: 56px;
  font-size: .98rem;
  box-shadow: none;
}

.game-page .option-btn .letter{
  background:#20252c;
  color:#fff;
  width:30px;
  height:30px;
  left: .75rem;
  font-size:.9rem;
}

.game-page .option-btn.selected{
  background:#0d6efd;
  color:#fff;
  border-color:#5aa0ff;
}

.game-page .option-btn.locked{
  opacity:.82;
}

.pregunta-actions{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap:.55rem;
  align-items:center;
  position: sticky;
  bottom: 0;
  z-index: 8;
  background: linear-gradient(to top, var(--clc-card) 80%, rgba(31,31,31,.88));
  border-top: 1px solid var(--clc-border);
  padding: .75rem 0 calc(.4rem + env(safe-area-inset-bottom));
}

.pregunta-actions .btn{
  min-height: 46px;
  font-size: .9rem;
  font-weight: 700;
}

.pregunta-actions .btn-enviar{
  grid-column: 1 / -1;
}

.modal-content.bg-dark{
  background:#111 !important;
}

#imagenAmpliada{
  max-height: 88vh;
  width: auto;
}

@media (max-width: 800px){
  .public-shell,
  .student-shell,
  .juego-container{
    width: 100%;
    max-width: 100%;
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .public-shell,
  .student-shell{
    padding-top: 1rem !important;
  }

  .juego-container{
    margin-top: .7rem !important;
  }

  .mobile-card-body,
  .juego-card-body{
    padding: .85rem;
  }

  .hero-mobile h1{
    font-size: 1.55rem;
  }

  .hero-mobile .lead{
    font-size: 1rem;
  }

  .quick-signup-page h1{
    font-size: 1.8rem;
  }

  .quick-signup-page .form-label{
    margin-bottom: .3rem;
  }

  .quick-signup-page .row.g-3{
    --bs-gutter-y: .85rem;
  }

  .wait-card .card-body{
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .wait-card h1{
    font-size: 1.75rem;
  }

  .wait-card .lead{
    font-size: 1.2rem;
  }

  .wait-card .alert{
    font-size: 1rem;
    line-height: 1.55;
  }

  .torneo-titulo{
    font-size: 1.25rem;
    margin-bottom:.8rem !important;
  }

  .timer-bar{
    margin-left: -.15rem;
    margin-right: -.15rem;
  }

  .game-page .img-problema{
    max-height: 31vh;
  }
}

@media (max-width: 430px){
  .mobile-card-body,
  .juego-card-body{
    padding: .7rem;
  }

  .game-page .option-btn{
    padding-top: .82rem;
    padding-bottom: .82rem;
    min-height: 52px;
  }

  .pregunta-actions{
    grid-template-columns: 1fr 1.35fr 1fr;
    gap:.4rem;
  }

  .pregunta-actions .btn{
    font-size: .82rem;
    padding-left: .45rem;
    padding-right: .45rem;
  }

  .pregunta-actions .btn-confirmar{
    font-size: .78rem;
  }

  .torneo-student-head{
    flex-direction: column;
  }

  .torneo-student-head .badge{
    align-self:flex-start;
  }
}
.clc-logo {
  max-width: 240px;
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto 0.75rem auto;
}

@media (max-width: 576px) {
  .clc-logo {
    max-width: 200px;
    width: 75%;
  }
}