:root {
  --fondo: #0d253d; --panel: #14314f; --texto: #f2f6fa; --tenue: #9fb3c8;
  --indigo: #533afd; --verde: #12b886; --ambar: #f59f00; --rojo: #e03131;
  --borde: #24476b;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; padding: 20px;
}
.caja { max-width: 560px; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 0 0 4px; }
p.tenue { color: var(--tenue); margin: 0 0 20px; font-size: .95rem; }
label { display: block; margin: 14px 0 6px; font-size: .9rem; color: var(--tenue); }
input {
  width: 100%; padding: 14px; font-size: 1.1rem; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto);
}
input:focus { outline: 2px solid var(--indigo); }
#codigo { text-transform: uppercase; letter-spacing: .35em; text-align: center; font-size: 1.8rem; }
button {
  width: 100%; padding: 16px; margin-top: 14px; font-size: 1.05rem; font-weight: 600;
  border: 0; border-radius: 10px; background: var(--indigo); color: #fff; cursor: pointer;
}
button.fantasma { background: var(--panel); border: 1px solid var(--borde); }
.grande { padding: 30px 16px; font-size: 1.3rem; }
.verde { background: var(--verde); } .rojo { background: var(--rojo); }
.error { color: var(--rojo); margin-top: 10px; min-height: 1.2em; font-size: .92rem; }
.aviso { color: var(--ambar); margin-top: 10px; font-size: .92rem; }
.ok { color: var(--verde); }
.oculto { display: none; }
.motivos button { margin-top: 10px; }
.gh { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 34px; font-size: .9rem; }
.gh img { width: 30px; height: 30px; border-radius: 50%; }
.opcion {
  width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--borde);
  color: var(--texto); padding: 16px; margin-top: 10px; border-radius: 10px;
  font-size: 1.05rem; cursor: pointer;
}
.opcion.elegida { border-color: var(--indigo); background: #1d2f66; }
.confirmado { text-align: center; padding: 26px; color: var(--tenue); }