/* Falcon check-in: misma marca que la web (Rojo sol, Tinta, Papel; Shojumaru + Archivo) */
:root{
  --rojo:#D9241A; --rojo-hondo:#C02119; --naranja:#EA6E22; --tinta:#0B0E14; --carbon:#202637;
  --pizarra:#525B6C; --niebla:#D7DBE3; --papel:#F4F6F9; --blanco:#fff; --ok:#1F7A3D;
  --f-display:'Shojumaru','Archivo',system-ui,sans-serif;
  --f:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:10.5px; --r-lg:17px;
}
*{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; font-family:var(--f); font-size:17px; line-height:1.5; color:var(--tinta); background:var(--papel) }
h1,h2,h3,p{ margin:0 }
button,input,select{ font:inherit; color:inherit }
:focus-visible{ outline:3px solid var(--rojo); outline-offset:2px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

.top{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--blanco); border-bottom:4px solid var(--rojo) }
.top img{ height:48px; width:auto }
.top b{ font-family:var(--f-display); font-weight:400; font-size:20px; letter-spacing:.02em }
.top .sp{ flex:1 }

.wrap{ width:min(100% - 32px, 520px); margin:24px auto 48px; display:grid; gap:17px }
.wide{ width:min(100% - 32px, 1100px) }
.card{ background:var(--blanco); border-radius:var(--r-lg); padding:22px; box-shadow:0 18px 40px -26px rgba(11,14,20,.35) }
.title{ font-family:var(--f-display); font-weight:400; font-size:28px; line-height:1.15; text-transform:uppercase }
.muted{ color:var(--pizarra) }
.small{ font-size:14px }
.label{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pizarra) }

.field{ display:grid; gap:6px; margin-top:14px }
.input{ min-height:48px; padding:10px 12px; border:1.5px solid var(--pizarra); border-radius:6.5px; background:var(--blanco); width:100% }
.seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.seg label{ display:grid; place-items:center; min-height:48px; border:1.5px solid var(--pizarra); border-radius:6.5px; cursor:pointer; font-weight:700 }
.seg input{ position:absolute; opacity:0 }
.seg input:checked + span{ color:var(--blanco) }
.seg label:has(input:checked){ background:var(--tinta); border-color:var(--tinta); color:var(--blanco) }
.seg label:has(input:focus-visible){ outline:3px solid var(--rojo); outline-offset:2px }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px;
  border:1.5px solid transparent; border-radius:6.5px; font-weight:700; cursor:pointer; text-decoration:none; background:none }
.btn-red{ background:var(--rojo); border-color:var(--rojo); color:var(--blanco) }
.btn-red:hover{ background:var(--rojo-hondo) }
.btn-dark{ background:var(--tinta); border-color:var(--tinta); color:var(--blanco) }
.btn-line{ border-color:var(--tinta); color:var(--tinta) }
.btn-sm{ min-height:38px; padding:0 12px; font-size:15px }
.btn-block{ width:100% }
.btn[disabled]{ opacity:.55; cursor:progress }
.link{ background:none; border:0; padding:0; color:var(--tinta); font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer }

.kid{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--niebla) }
.kid:first-of-type{ border-top:0 }
.kid h3{ font-size:19px }
.done{ display:inline-flex; align-items:center; gap:6px; color:var(--ok); font-weight:700 }
.msg{ padding:12px 14px; border-radius:6.5px; background:var(--papel); font-weight:600 }
.msg.err{ background:#FDECEA; color:var(--rojo-hondo) }
.msg.ok{ background:#E7F4EC; color:var(--ok) }
.msg:empty{ display:none }

.big-ok{ display:grid; justify-items:center; gap:8px; text-align:center; padding:12px 0 }
.big-ok .tick{ width:84px; height:84px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; font-size:46px; line-height:1 }

/* admin */
.tabs{ display:flex; gap:8px; flex-wrap:wrap }
.tabs button[aria-selected="true"]{ background:var(--tinta); color:var(--blanco); border-color:var(--tinta) }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px }
.stat{ background:var(--blanco); border-radius:var(--r); padding:14px 16px }
.stat b{ display:block; font-size:34px; line-height:1.1 }
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.table-wrap{ overflow-x:auto }
table{ width:100%; border-collapse:collapse; font-size:15px }
th,td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--niebla); vertical-align:middle }
th{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--pizarra) }
tr.off td{ color:var(--pizarra) }
.pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:13px; font-weight:700; background:var(--papel) }
.pill.paid{ background:#E7F4EC; color:var(--ok) }
.pill.due{ background:#FDECEA; color:var(--rojo-hondo) }
.pill.here{ background:var(--tinta); color:#fff }
.live{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--pizarra) }
.live::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--ok); animation:pulse 1.6s infinite }
@keyframes pulse{ 50%{ opacity:.3 } }
@media (prefers-reduced-motion:reduce){ .live::before{ animation:none } }
dialog{ border:0; border-radius:var(--r-lg); padding:22px; width:min(440px, calc(100vw - 24px)) }
dialog::backdrop{ background:rgba(11,14,20,.6) }
.qr-box{ display:grid; justify-items:center; gap:10px; text-align:center }
.qr-box canvas, .qr-box img{ width:240px !important; height:240px !important }
@media print{
  .top, .no-print{ display:none !important }
  body{ background:#fff }
}

/* v2: selfie, cinturon, ficha */
.selfie{ display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center }
.selfie-prev{ width:96px; height:128px; border-radius:var(--r); background:var(--papel); border:1.5px dashed var(--pizarra); display:grid; place-items:center; overflow:hidden; font-size:30px }
.selfie-prev img{ width:100%; height:100%; object-fit:cover }
.selfie-prev.has{ border-style:solid; border-color:var(--tinta) }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.kid .face{ width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--papel) }
.belt{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px }
.belt::before{ content:""; width:22px; height:9px; border-radius:2px; background:var(--bc, #fff); box-shadow:inset 0 0 0 1px rgba(11,14,20,.35) }
.belt[data-b="White"]{ --bc:#fff } .belt[data-b="Yellow"]{ --bc:#F5D90A } .belt[data-b="Orange"]{ --bc:#F28C28 }
.belt[data-b="Green"]{ --bc:#2E9E4F } .belt[data-b="Blue"]{ --bc:#1F5FD1 } .belt[data-b="Purple"]{ --bc:#7A3FB8 }
.belt[data-b="Brown"]{ --bc:#7A4A21 } .belt[data-b="Black"]{ --bc:#0B0E14 }

/* v3: inscripcion en 4 pasos + waiver con firma */
.steps{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--rojo); margin-top:10px }
.step{ border:0; padding:0; margin:0; min-width:0 }
.h3{ font-size:20px; font-weight:700; padding:0; margin-top:6px }
.bare{ border:0; padding:0; margin-inline:0 }
.bare legend{ padding:0; margin-bottom:6px }
.seg-2{ grid-template-columns:1fr 1fr }
.three{ display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:12px }
textarea.input{ min-height:0; resize:vertical }
.yes-notes{ margin-top:8px }
.waiver-text{ max-height:46vh; overflow:auto; margin-top:10px; padding:14px; border:1.5px solid var(--niebla); border-radius:var(--r); background:var(--papel); font-family:Georgia, 'Times New Roman', serif; font-size:15px; line-height:1.45 }
.waiver-text h3{ font-family:var(--f); font-size:15px; text-align:center; margin:0 0 4px }
.waiver-text ol{ padding-left:20px; margin:10px 0 }
.waiver-text li{ margin-bottom:8px }
.waiver-text .box{ border:2px solid var(--tinta); padding:8px; font-weight:700; font-size:13px; margin:10px 0 }
.check{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-weight:600 }
.check input{ width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--rojo) }
.sig{ width:100%; height:150px; border:1.5px solid var(--pizarra); border-radius:6.5px; background:#fff; touch-action:none; cursor:crosshair }
.row-sb{ display:flex; justify-content:space-between; align-items:center; margin-top:6px }
.nav-steps{ display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:16px }
.nav-steps [hidden]{ display:none !important }
.nav-steps .btn-red:only-child{ grid-column:1 / -1 }
@media (max-width:420px){ .three{ grid-template-columns:1fr 1fr } .three .field:first-child{ grid-column:1 / -1 } }
.nav-steps:has(#step-back[hidden]) > :not([hidden]){ grid-column:1 / -1 }