/* NeuroRun 5K 2026 — estilos del sitio público (y base del panel).
   Primero el teléfono (360–414 px); en pantallas grandes el contenido se centra.
   Colores tomados del afiche. Fuentes del sistema: no se descarga ninguna. */

:root {
  --azul: #1D3FA8;
  --azul-osc: #0F2167;
  --verde: #6CC24A;
  --verde-osc: #2F7A16;      /* verde para texto sobre fondo claro (contraste AA) */
  --fucsia: #DB2777;
  --fucsia-osc: #BE185D;
  --adulto: #1D4ED8;
  --nino: #DB2777;
  --amarillo: #FFD21F;
  --rojo: #B91C1C;
  --fondo: #F2F5FB;
  --tarjeta: #FFFFFF;
  --texto: #14213D;
  --suave: #4A5672;
  --borde: #D5DCEA;
  --radio: 14px;
  --sombra: 0 2px 10px rgba(15, 33, 103, .08);
  --ancho: 520px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
}
img { max-width: 100%; display: block; }
a { color: var(--azul); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; text-align: left; }
h2 { font-size: 1.35rem; font-weight: 900; font-style: italic; color: var(--azul-osc); }
h3 { font-size: 1.1rem; font-weight: 800; }
p { margin: 0 0 .8em; }

/* Párrafos de texto corrido: justificados y con guiones (lang="es"). */
.corrido { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; box-shadow: 0 0 0 5px var(--azul-osc); }

.oculto { display: none !important; }
.margen-arriba { margin-top: 12px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.con-barra { padding-bottom: 110px; } /* espacio para el botón fijo de abajo */

/* ── Cabecera con el estilo del afiche ─────────────────────────────── */
.cabecera {
  background: linear-gradient(160deg, var(--azul-osc) 0%, var(--azul) 100%);
  color: #fff;
  padding: 18px 0 34px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
}
.cabecera .org { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; margin: 0 0 6px; }
.logo {
  font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em;
  font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: .95; margin: 0;
}
.logo .run { color: var(--verde); }
.logo .km { display: inline-block; color: var(--azul-osc); background: var(--amarillo); font-size: .45em; padding: .1em .35em; border-radius: 6px; vertical-align: middle; transform: skew(-8deg); margin-left: .15em; }
.lema { font-weight: 800; font-style: italic; text-transform: uppercase; margin: 8px 0 0; font-size: 1rem; }
.lema b { color: var(--verde); }
.cabecera-chica { padding: 12px 0 24px; }
.cabecera-chica .logo { font-size: 1.9rem; }
.volver {
  color: #fff; text-decoration: none; font-weight: 800; font-size: .98rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 8px 13px; border: 2px solid #fff; border-radius: 12px;
  background: rgba(255, 255, 255, .10); -webkit-tap-highlight-color: transparent;
}
.volver:active { background: #fff; color: var(--azul-osc); }

/* ── Tarjetas y bloques ────────────────────────────────────────────── */
.tarjeta {
  background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 18px 16px; margin: 16px 0;
}
.hero { margin-top: -14px; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 1 / 1; background: #cfd8ea; }
.hero img { width: 100%; height: 100%; object-fit: cover; }

.datos-evento { list-style: none; padding: 0; margin: 0; }
.datos-evento li { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-weight: 700; }
.datos-evento li + li { border-top: 1px solid var(--borde); }
.datos-evento svg { flex: none; width: 28px; height: 28px; color: var(--azul); }
.datos-evento small { display: block; font-weight: 500; color: var(--suave); }

.precios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.precio { border-radius: var(--radio); color: #fff; padding: 14px 12px; box-shadow: var(--sombra); }
.precio.adulto { background: var(--adulto); }
.precio.nino { background: var(--fucsia-osc); }
.precio .cat { font-weight: 800; text-transform: uppercase; font-size: .9rem; }
.precio .usd { font-size: 2.4rem; font-weight: 900; font-style: italic; line-height: 1; margin: 4px 0; }
.precio .bs { font-size: .95rem; font-weight: 600; }

.premio { background: var(--amarillo); color: var(--azul-osc); }
.premio h2 { color: var(--azul-osc); text-transform: uppercase; }
.premio .moto { font-size: 1.6rem; font-weight: 900; font-style: italic; text-transform: uppercase; margin: 0 0 6px; }

.barra-avance { height: 16px; border-radius: 99px; background: #E3E8F3; overflow: hidden; margin: 8px 0 6px; }
.barra-avance > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--verde-osc), var(--verde)); border-radius: 99px; transition: width .6s; }
.cifra { font-size: 1.6rem; font-weight: 900; font-style: italic; color: var(--azul-osc); }

.afiche img { border-radius: 10px; margin: 0 auto; }
.contactos { list-style: none; padding: 0; margin: 0; }
.contactos a { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 700; text-decoration: none; word-break: break-all; }
.contactos svg { width: 24px; height: 24px; flex: none; }

.aviso {
  border-radius: 12px; padding: 12px 14px; margin: 12px 0; font-weight: 600;
  background: #FFF6CC; border: 2px solid #E6B800; color: #5C4600;
}
.aviso.rojo { background: #FDECEC; border-color: #E5A3A3; color: var(--rojo); }
.aviso.verde { background: #EAF7E4; border-color: #A8D998; color: #1F5410; }
.aviso.azul { background: #E8EEFC; border-color: #A9BDF0; color: var(--azul-osc); }

.pie { text-align: center; color: var(--suave); font-size: .9rem; padding: 24px 16px; }
.pie a { font-weight: 700; }

/* ── Botones ───────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 20px; border-radius: 12px; border: 0;
  font: inherit; font-weight: 800; font-size: 1.05rem; text-decoration: none; text-align: center;
  cursor: pointer; background: var(--azul); color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.boton.ancho { width: 100%; }
.boton.verde { background: var(--verde-osc); }
.boton.rojo { background: var(--rojo); }
.boton.claro { background: #fff; color: var(--azul); border: 2px solid var(--azul); }
.boton.chico { min-height: 44px; padding: 8px 14px; font-size: .95rem; }
.boton.texto { background: none; color: var(--azul); text-decoration: underline; min-height: 48px; }
.boton.atras { margin-bottom: 10px; }
.boton.wa { background: #128C4B; }

.barra-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(255, 255, 255, .97); box-shadow: 0 -4px 18px rgba(15, 33, 103, .14);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.barra-fija .dentro { max-width: var(--ancho); margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.barra-fija .boton { flex: 1; min-height: 56px; font-size: 1.15rem; }
.barra-fija .resumen-total { flex: none; font-weight: 800; line-height: 1.1; }
.barra-fija .resumen-total small { display: block; font-weight: 600; color: var(--suave); font-size: .8rem; }

/* ── Formularios ───────────────────────────────────────────────────── */
.campo { margin: 0 0 16px; }
.campo > label, .campo > .etiqueta { display: block; font-weight: 700; margin-bottom: 6px; }
.campo .ayuda { display: block; font-size: .88rem; color: var(--suave); font-weight: 500; margin-top: 4px; }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--borde); border-radius: 12px;
  font: inherit; font-size: 1.05rem; background: #fff; color: var(--texto);
}
textarea { min-height: 90px; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(29, 63, 168, .25); }
[aria-invalid=true] { border-color: var(--rojo) !important; background: #FFF8F8; }
.error { color: var(--rojo); font-weight: 700; font-size: .92rem; margin: 6px 0 0; }
.error::before { content: "⚠ "; }
.fila-cedula { display: grid; grid-template-columns: 84px 1fr; gap: 8px; }
.casilla { display: flex; align-items: center; gap: 12px; min-height: 52px; font-weight: 700; cursor: pointer; }
.casilla input { width: 26px; height: 26px; accent-color: var(--azul); flex: none; }

/* ── Inscripción: pasos ───────────────────────────────────────────── */
.progreso { margin: 16px 0 4px; }
.progreso .texto { font-weight: 800; color: var(--azul-osc); font-size: .95rem; }
.progreso .pista { height: 8px; background: #DCE3F2; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.progreso .pista span { display: block; height: 100%; background: var(--verde-osc); width: 33%; transition: width .3s; }

.contador { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); margin: 12px 0; border-left: 8px solid var(--adulto); }
.contador.nino { border-left-color: var(--fucsia); }
.contador .nombre { font-weight: 900; font-size: 1.2rem; }
.contador .nombre small { display: block; font-weight: 600; font-size: .88rem; color: var(--suave); }
.contador .mandos { display: flex; align-items: center; gap: 6px; }
.contador button { width: 56px; height: 56px; border-radius: 50%; border: 0; font-size: 1.8rem; font-weight: 900; background: var(--adulto); color: #fff; cursor: pointer; line-height: 1; }
.contador.nino button { background: var(--fucsia-osc); }
.contador button[disabled] { background: #C5CCDB; }
.contador output { min-width: 44px; text-align: center; font-size: 1.9rem; font-weight: 900; }

.bloque-corredor { border-left: 8px solid var(--adulto); }
.bloque-corredor.nino { border-left-color: var(--fucsia); }
.etiqueta-cat { display: inline-block; padding: 2px 10px; border-radius: 99px; color: #fff; font-size: .8rem; font-weight: 800; text-transform: uppercase; background: var(--adulto); vertical-align: middle; }
.etiqueta-cat.nino { background: var(--fucsia-osc); }

.monto-grande { text-align: center; padding: 6px 0 2px; }
.monto-grande .bs { font-size: 2.3rem; font-weight: 900; font-style: italic; color: var(--azul-osc); line-height: 1.05; }
.monto-grande .usd { font-size: 1.1rem; font-weight: 700; color: var(--suave); }
.monto-grande .tasa { font-size: .85rem; color: var(--suave); }

.pestanas { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 12px; padding-bottom: 2px; }
.pestanas button { flex: 1 0 auto; min-height: 48px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--borde); background: #fff; font: inherit; font-weight: 800; color: var(--azul-osc); cursor: pointer; }
.pestanas button[aria-selected=true] { background: var(--azul); border-color: var(--azul); color: #fff; }

.dato-pago { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.dato-pago .etq { font-size: .85rem; color: var(--suave); font-weight: 600; }
.dato-pago .val { font-weight: 800; font-size: 1.08rem; overflow-wrap: anywhere; }
.pp-titulo { margin-top: 16px; }
.dato-pago .boton { flex: none; }

.foto-vista { margin-top: 10px; border-radius: 10px; max-height: 260px; object-fit: contain; background: #EEF1F7; width: 100%; }
.subir-foto { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border: 2px dashed var(--azul); border-radius: 12px; background: #F3F6FD; color: var(--azul); font-weight: 800; cursor: pointer; text-align: center; padding: 8px; }
.subir-foto input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* ── Mi inscripción ───────────────────────────────────────────────── */
.codigo-grande { font-size: 2.2rem; font-weight: 900; letter-spacing: .06em; color: var(--azul-osc); font-style: italic; }
.estado { display: inline-block; padding: 6px 14px; border-radius: 99px; font-weight: 800; font-size: .95rem; }
.estado.esperando_pago { background: #FFF1C2; color: #6B4E00; }
.estado.en_revision { background: #E1E9FD; color: var(--azul-osc); }
.estado.aprobada { background: #DDF3D3; color: #1F5410; }
.estado.rechazada { background: #FBE0E0; color: var(--rojo); }
.estado.anulada { background: #E5E7EB; color: #374151; }

.carnet { text-align: center; }
.carnet img { width: 100%; max-width: 360px; margin: 0 auto 12px; border-radius: 12px; box-shadow: var(--sombra); }
.botones { display: grid; gap: 10px; }
.lista-corredores { list-style: none; padding: 0; margin: 0; }
.lista-corredores li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.punto { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--adulto); }
.punto.nino { background: var(--fucsia); }

.cargando { text-align: center; padding: 40px 0; color: var(--suave); font-weight: 700; }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 50;
  background: var(--azul-osc); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); max-width: calc(100% - 32px); text-align: center;
}

@media (min-width: 720px) {
  body { font-size: 18px; }
  .cabecera { padding: 28px 0 44px; }
  .hero { aspect-ratio: 16 / 9; }
  .contenedor.ancho { max-width: 760px; }
}

.h2-como { font-size: 1.5rem; font-weight: 900; font-style: italic; color: var(--azul-osc); margin-top: 20px; }
.ayuda-precios, .ayuda { font-size: .9rem; color: var(--suave); }