/* ===========================================================================
   BASE — paleta y piezas compartidas por juego.html y admin.html
   Paleta institucional UAEH: carmesí #C10230 · vino #A21A19 · naranja #FF8300
   ---------------------------------------------------------------------------
   Estas dos páginas viven en Hostinger y se abren desde el CELULAR de cada
   participante, así que aquí manda el táctil: áreas grandes, nada que dependa
   de pasar el cursor por encima y todo legible con una mano.
   =========================================================================== */

:root {
  --carmesi:   #C10230;
  --carmesi-2: #E63455;
  --vino:      #A21A19;
  --naranja:   #FF8300;
  --naranja-2: #FFAB4D;

  --fondo:   #120709;
  --fondo-2: #1B0D11;
  --panel:   #241216;
  --linea:   rgba(255, 190, 170, .14);
  --linea-2: rgba(255, 190, 170, .3);

  --crema:   #F8EFE9;
  --crema-2: #D9C6BE;
  --crema-3: #A08C86;

  --verde:  #35D07F;
  --rojo:   #FF5F56;

  --display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --texto: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --radio: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  min-height: 100vh;
  background: var(--fondo);
  color: var(--crema);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fondo vivo, más discreto que el de la expo: aquí hay que leer y responder */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .38; }
.aurora span:nth-child(1) {
  width: 70vw; height: 70vw; left: -20vw; top: -25vw; background: var(--vino);
  animation: flota1 30s ease-in-out infinite;
}
.aurora span:nth-child(2) {
  width: 55vw; height: 55vw; right: -18vw; bottom: -20vw; background: var(--carmesi);
  animation: flota2 38s ease-in-out infinite;
}
@keyframes flota1 { 50% { transform: translate(7vw, 8vh) scale(1.18); } }
@keyframes flota2 { 50% { transform: translate(-8vw, -6vh) scale(1.14); } }

.envoltura { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 22px 18px 40px; }
.envoltura.ancha { max-width: 1080px; }

/* --- Encabezado ---------------------------------------------------------- */

.cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.cabecera .escudo {
  width: 46px; height: 46px; flex: none; border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
  border: 1.5px dashed var(--linea-2); background: rgba(255,255,255,.04);
  font-size: 8px; letter-spacing: .1em; color: var(--crema-3); text-align: center;
}
.cabecera .escudo img { width: 100%; height: 100%; object-fit: contain; }
.cabecera .escudo.lleno { border-style: solid; border-color: transparent; background: none; }
.cabecera h1 { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.15; }
.cabecera p { font-size: 11.5px; color: var(--crema-3); font-family: var(--mono); letter-spacing: .06em; }

/* --- Tarjeta ------------------------------------------------------------- */

.tarjeta {
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 22px;
  backdrop-filter: blur(8px);
}
.tarjeta + .tarjeta { margin-top: 14px; }

/* --- Botones ------------------------------------------------------------- */

.btn {
  display: block; width: 100%; border: none; cursor: pointer;
  padding: 15px 20px; border-radius: 13px;
  font: inherit; font-size: 16px; font-weight: 600;
  background: linear-gradient(150deg, var(--carmesi), var(--vino));
  color: #fff;
  transition: transform .22s var(--curva), filter .22s, opacity .22s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.fantasma {
  background: rgba(255,255,255,.06); border: 1px solid var(--linea-2); color: var(--crema);
}
.btn.naranja { background: linear-gradient(150deg, var(--naranja), #E06A00); }
.btn.fantasma.peligro { border-color: rgba(255,95,86,.4); color: #FFB3AE; }
.btn.fantasma.peligro:hover:not(:disabled) { background: rgba(255,95,86,.12); }

/* --- Campos -------------------------------------------------------------- */

.campo { margin-bottom: 15px; }
.campo label {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--crema-3); margin-bottom: 7px;
}
.campo input {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--linea-2); background: rgba(0,0,0,.28);
  color: var(--crema); font: inherit; font-size: 16px;   /* 16px evita el zoom de iOS */
  transition: border-color .25s, background .25s;
}
.campo input:focus {
  outline: none; border-color: var(--naranja); background: rgba(0,0,0,.42);
}
.campo input::placeholder { color: var(--crema-3); }
.campo.codigo input {
  font-family: var(--mono); letter-spacing: .3em; text-transform: uppercase;
  text-align: center; font-size: 22px;
}

/* --- Avisos -------------------------------------------------------------- */

.aviso {
  margin-top: 14px; padding: 12px 16px; border-radius: 12px;
  font-size: 14px; display: none; animation: entra .3s var(--curva);
}
.aviso.visible { display: block; }
.aviso.error { background: rgba(255,95,86,.13); border: 1px solid rgba(255,95,86,.4); color: #FFB3AE; }
.aviso.ok    { background: rgba(53,208,127,.12); border: 1px solid rgba(53,208,127,.4); color: #9CE9C0; }
.aviso.nota  { background: rgba(255,131,0,.1); border: 1px solid rgba(255,131,0,.35); color: var(--naranja-2); }

@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }

.pie {
  margin-top: 26px; text-align: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--crema-3); line-height: 1.9;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}