/*
 * auth-styles.css
 * Estilos para: pantalla de login, barra de usuario (integrada en la
 * navbar), selector de modo, marcado visual en modo Examen y layout
 * responsive de pregunta + imagen + opciones.
 * Módulo independiente del HTML legacy — no modifica clases existentes.
 */

#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #9b1c1c, #1a0a0a);
  display: flex;
  align-items: center;
  justify-content: center;
}

#login-overlay.hidden { display: none; }

#login-box {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  text-align: center;
}

#login-box h2 {
  font-family: 'Bebas Neue', sans-serif;
  color: #9b1c1c;
  font-size: 28px;
  margin-bottom: 6px;
  letter-spacing: 2px;
}

#login-box p { font-size: 13px; color: #888; margin-bottom: 20px; }

#login-box input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 2px solid #dde1e7;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
}

#login-box input:focus { outline: none; border-color: #9b1c1c; }

#login-box button {
  width: 100%;
  padding: 13px;
  background: #9b1c1c;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}

#login-box button:hover { background: #7f1717; }
#login-box button:disabled { opacity: .6; cursor: not-allowed; }

#login-error {
  color: #dc3545;
  font-size: 13px;
  margin-top: 8px;
  min-height: 18px;
}

#login-userbar {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.1);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

#login-userbar button {
  background: none;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 11px;
  cursor: pointer;
}

#login-userbar button:hover { background: rgba(255,255,255,.15); }

@media (max-width: 600px) {
  #login-userbar { font-size: 11px; padding: 3px 8px; gap: 6px; }
  #login-userbar span { display: none; }
}

#mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
}

#mode-overlay.show { display: flex; }

#mode-box {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 400px;
  width: 90%;
  text-align: center;
}

#mode-box h3 {
  font-family: 'Bebas Neue', sans-serif;
  color: #9b1c1c;
  font-size: 24px;
  margin-bottom: 16px;
}

#mode-box .modebtn {
  display: block;
  width: 100%;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 2px solid #dde1e7;
  background: #f8f9fa;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  transition: border-color .2s, background .2s;
}

#mode-box .modebtn small {
  display: block;
  font-weight: 400;
  color: #888;
  font-size: 12px;
  margin-top: 4px;
}

#mode-box .modebtn:hover { border-color: #9b1c1c; background: #fff5f5; }

#save-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a0a0a;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 300;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}

#save-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#save-toast.error { background: #9b1c1c; }

/* Modo Examen: marca la opción elegida en la pregunta actual, sin
   revelar si es correcta (color neutro, distinto de verde/rojo) */
.opt.exam-marked {
  background: #fff8e1 !important;
  border-color: #d97706 !important;
}
.opt.exam-marked .olbl {
  border-color: #d97706 !important;
  color: #d97706 !important;
}
.opt.exam-marked .oicon { color: #d97706; }

/* Modo Examen: mini-grid de navegación rápida, preguntas ya
   respondidas se ven en ámbar mientras el test está en curso. */
.mi.exam-answered {
  background: #fff3cd !important;
  border-color: #d97706 !important;
  color: #92400e !important;
}

/* ------------------------------------------------------------------
   Aprovechar el ancho de pantalla en escritorio: el HTML original
   fija #testpage y #home a max-width:860px/1100px con mucho margen
   muerto a los lados en monitores grandes. Se amplía solo a partir
   de 900px de ancho de viewport, para no tocar el comportamiento ya
   afinado en tablet/móvil (breakpoints 768/480/380 del CSS legacy).
   ------------------------------------------------------------------ */
@media (min-width: 900px) {
  #testpage { max-width: 1180px !important; }
  #home { max-width: 1180px !important; }
}

@media (min-width: 1400px) {
  #testpage { max-width: 1320px !important; }
  #home { max-width: 1320px !important; }
}

/* ------------------------------------------------------------------
   Layout responsive: pregunta arriba, imagen + opciones lado a lado.
   .qa-layout envuelve la imagen (si existe) y el bloque .opts que
   renderQ() ya genera; se inserta dinámicamente vía JS después de
   cada renderizado de pregunta.

   La columna de imagen tiene un ancho máximo (minmax con tope), y la
   columna de opciones se queda con el resto del espacio disponible
   (1fr), para que las respuestas largas tengan más ancho real y no
   se compriman en muchas líneas.
   ------------------------------------------------------------------ */
.qa-layout {
  display: block;
}

.qa-layout.has-image {
  display: grid;
  grid-template-columns: minmax(200px, 340px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.qa-layout .qa-image {
  margin: 0 !important;
  text-align: center;
}

.qa-layout .qa-image img {
  width: 100%;
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  border-radius: 8px;
}

.qa-layout.has-image > .opts {
  margin-top: 0;
}

/* Opciones: evita que el texto se comprima en columnas estrechas y
   permite que las respuestas largas usen el ancho completo disponible
   de su columna, en vez de encogerse por el flex del contenedor. */
.qa-layout .opts .opt {
  width: 100%;
}

.qa-layout .opts .otxt {
  min-width: 0;
  word-break: break-word;
}

/* Tablet: reduce un poco el alto máximo de imagen */
@media (max-width: 768px) {
  .qa-layout.has-image .qa-image img { max-height: 260px; }
}

/* Móvil: apila imagen encima de las opciones en vez de dos columnas */
@media (max-width: 600px) {
  .qa-layout.has-image {
    grid-template-columns: 1fr;
  }
  .qa-layout.has-image .qa-image img { max-height: 220px; }
}