/* Estilos compartidos — Trivia Bíblica */

:root {
  --fondo: #0e1a3a;
  --fondo2: #17285a;
  --superficie: #1b2f66;
  --superficie2: #25407f;
  --linea: rgba(255, 255, 255, 0.14);
  --texto: #f4f6ff;
  --suave: #b9c5e8;
  --acento: #f3c25b;
  --acento-txt: #2b1d00;
  --ok: #2fbf71;
  --mal: #ef5b5b;
  --radio: 18px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--acento); width: 1.15em; height: 1.15em; margin: 0; flex: none; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(120% 90% at 50% -10%, var(--fondo2), var(--fondo) 70%) fixed;
  color: var(--texto);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
.hidden { display: none !important; }
h1, h2, h3, p { margin: 0; }
.suave { color: var(--suave); }
.error { color: #ff9d9d; min-height: 1.4em; font-weight: 600; }

.marca {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--acento);
}

/* ---------- botones ---------- */
.btn {
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 14px;
  padding: 0.8em 1.2em;
  background: var(--superficie2);
  color: var(--texto);
  cursor: pointer;
  box-shadow: 0 0.18em 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--acento); color: var(--acento-txt); }
.btn.grande { font-size: 1.2em; padding: 0.9em 1.4em; }
.btn.mini { font-size: 0.8em; padding: 0.55em 0.9em; background: rgba(255, 255, 255, 0.1); box-shadow: none; }
.btn.peligro { background: #7b2a35; }

/* ---------- campos ---------- */
label { display: block; font-weight: 600; color: var(--suave); }
input[type="text"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
  display: block;
  width: 100%;
  margin-top: 0.35em;
  font: inherit;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--linea);
  border-radius: 12px;
  padding: 0.7em 0.85em;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); }
select option { color: #111; }

/* ---------- opciones de respuesta (A-D) ---------- */
.op0 { --col: #e5484d; --tx: #ffffff; }
.op1 { --col: #3b6cf0; --tx: #ffffff; }
.op2 { --col: #f2a516; --tx: #2b1d00; }
.op3 { --col: #2fa36b; --tx: #ffffff; }

.opcion {
  position: relative;
  overflow: hidden;
  background: var(--col);
  color: var(--tx);
  border: 0;
  border-radius: var(--radio);
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.7em 1em;
  font: inherit;
  font-weight: 700;
  text-align: left;
  box-shadow: 0 0.2em 0 rgba(0, 0, 0, 0.3);
}
.opcion .letra {
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.opcion.op2 .letra { background: rgba(0, 0, 0, 0.14); }
.opcion .texto { flex: 1; line-height: 1.2; }

/* ---------- barra de tiempo ---------- */
.barra-tiempo { height: 0.6em; background: rgba(255, 255, 255, 0.15); border-radius: 99px; overflow: hidden; }
.barra-tiempo i { display: block; height: 100%; width: 100%; background: var(--acento); border-radius: 99px; }
.barra-tiempo.urgente i { background: var(--mal); }

/* ---------- avisos ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.2em;
  transform: translateX(-50%);
  background: #2b3f7a;
  border: 1px solid var(--linea);
  color: var(--texto);
  padding: 0.8em 1.2em;
  border-radius: 14px;
  font-weight: 600;
  z-index: 50;
  max-width: 92vw;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.banner-red {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  text-align: center;
  background: #8a5a00;
  color: #fff;
  font-weight: 700;
  padding: 0.5em;
  font-size: 0.9rem;
}

@keyframes pulso { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes subir { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- selector de emoticones (celular y anfitrión) ---------- */
.emo-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 14px; background: rgba(5, 10, 25, 0.8); backdrop-filter: blur(3px); }
.emo-card { font-size: 16px; width: min(26rem, 100%); max-height: 92vh; overflow: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; padding: 16px; animation: pop 0.2s ease both; }
.emo-card h2 { font-size: 1.2rem; margin-bottom: 10px; text-align: center; }
.emo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.emo-opt { font: inherit; font-size: 1.7rem; line-height: 1; padding: 0.3em 0; border-radius: 12px; border: 2px solid transparent; background: rgba(255, 255, 255, 0.07); cursor: pointer; }
.emo-opt:hover { background: rgba(255, 255, 255, 0.16); }
.emo-opt.sel { border-color: var(--acento); background: rgba(243, 194, 91, 0.2); }
.emo-cerrar { width: 100%; margin-top: 12px; }
.emo-btn { font: inherit; font-size: 1.5rem; line-height: 1; padding: 0.25em 0.45em; border-radius: 12px; border: 2px solid var(--linea); background: rgba(255, 255, 255, 0.08); cursor: pointer; color: var(--texto); }
.emo-btn:hover { border-color: var(--acento); }