:root{
  --ground:#F3EEE3; --paper:#FFFDF8; --ink:#2A2A22; --muted:#6A6656; --line:#DDD4C2;
  --green:#2F4A2C; --green-ink:#FFFFFF; --green-soft:#E3EADB;
  --wood:#6E4B2F; --wood-soft:#EFE3D3;
  --warn:#9A5B00; --warn-soft:#FBEFD9; --err:#A3322A; --err-soft:#F8E1DE; --focus:#C98A2E;
  --display:"Bitter", Georgia, "Times New Roman", serif;
  --body:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --script:"Caveat", "Segoe Script", cursive;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#1A1D17; --paper:#23271F; --ink:#ECE7DB; --muted:#ABA591; --line:#3A3F33;
    --green:#8DB27F; --green-ink:#132010; --green-soft:#2C3A27; --wood:#D2A77E; --wood-soft:#33291F;
    --warn:#E7B45C; --warn-soft:#3A2F1A; --err:#F08A80; --err-soft:#3B2220; --focus:#E7B45C;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;padding:0 16px}
[hidden]{display:none!important}
.wrap{max-width:680px;margin:0 auto;padding-block:28px 64px;display:flex;flex-direction:column;gap:22px}
.wrap.wide{max-width:1180px}

header.top{display:flex;flex-direction:column;gap:10px}
.brand{font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--wood)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,7vw,44px);line-height:1.05;margin:0;color:var(--green);text-wrap:balance}
.tag{font-family:var(--script);font-size:24px;color:var(--wood);margin:0}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.facts span{background:var(--wood-soft);color:var(--wood);border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:700}
.lead{color:var(--muted);margin:0;max-width:62ch}
.banner{border-radius:12px;padding:12px 16px;font-weight:700}
.banner.ok{background:var(--green-soft);color:var(--green)}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.banner.closed{background:var(--err-soft);color:var(--err)}

form{display:flex;flex-direction:column;gap:18px}
fieldset{border:1px solid var(--line);background:var(--paper);border-radius:14px;margin:0;padding:20px 18px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
legend{font-family:var(--display);font-weight:700;font-size:19px;color:var(--green);padding:0 6px;margin-left:-6px}
.hint{font-size:13.5px;color:var(--muted);margin:-6px 0 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.full{grid-column:1/-1}
label.lb{font-weight:700;font-size:14px}
.opt{font-weight:400;color:var(--muted)}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=password],input[type=number],input[type=search],select,textarea{
  font:inherit;font-size:16px;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;
}
textarea{min-height:64px;resize:vertical}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.invalid{border-color:var(--err)!important}
.err{color:var(--err);font-size:13px;font-weight:600}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.choices{display:grid;gap:10px}
.choice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--ground)}
.choice:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.choice input{margin-top:4px;accent-color:var(--green);width:18px;height:18px;flex:none}
.choice .txt{flex:1}
.choice b{display:block}
.choice small{color:var(--muted);font-size:13.5px}
.choice .row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.price{font-family:var(--display);font-weight:700;color:var(--green);white-space:nowrap}

.kid{border:1px dashed var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--ground)}
.kid-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.kid-head h3{margin:0;font-family:var(--display);font-size:16px;color:var(--wood)}
.kid-head .right{display:flex;gap:6px;align-items:center}
.age{font-size:13px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--green-soft);color:var(--green)}
.age.out{background:var(--warn-soft);color:var(--warn)}
.kid input,.kid select,.kid textarea{background:var(--paper)!important}
.stack{display:flex;flex-direction:column;gap:12px}
.adult-row{display:flex;gap:8px;align-items:center}
.adult-row input{flex:1}

button,.btn{font:inherit;cursor:pointer;border-radius:10px;text-decoration:none}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);padding:8px 12px;font-size:14px;font-weight:700}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-x{background:transparent;border:0;color:var(--muted);font-size:13.5px;font-weight:700;padding:6px 8px}
.btn-x:hover{color:var(--err)}
.btn-main{background:var(--green);color:var(--green-ink);border:0;padding:15px 18px;font-size:17px;font-weight:800;width:100%;display:flex;justify-content:center;align-items:center;gap:10px}
.btn-main:hover{filter:brightness(1.08)}
.btn-main[disabled]{opacity:.6;cursor:progress}
.btn-main svg{width:22px;height:22px;flex:none}

.terms{border:1px solid var(--line);border-radius:12px;background:var(--ground);max-height:340px;overflow-y:auto;padding:4px 16px 14px;font-size:14.5px}
.terms h4{font-family:var(--display);font-size:15px;margin:16px 0 4px;color:var(--wood)}
.terms p,.terms ul{margin:0 0 6px}
.terms ul{padding-left:20px}
.terms .ver{font-size:12.5px;color:var(--muted);margin-top:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--green);margin-top:2px;flex:none}

.formerr{background:var(--err-soft);color:var(--err);border-radius:10px;padding:12px 16px;font-weight:700;font-size:14.5px}
.formerr ul{margin:6px 0 0;padding-left:20px;font-weight:600}

.summary-box{background:var(--paper);border:2px solid var(--green);border-radius:14px;padding:22px 18px;display:flex;flex-direction:column;gap:12px}
.summary-box h2{font-family:var(--display);color:var(--green);margin:0;font-size:24px}
.code{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.06em;color:var(--wood)}
.foot{font-size:13px;color:var(--muted);text-align:center}

/* ---------- Login ---------- */
.login{max-width:380px;margin:12vh auto 0;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 22px;display:flex;flex-direction:column;gap:14px}
.login h1{font-size:28px}

/* ---------- Panel ---------- */
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.bar h1{font-size:clamp(26px,5vw,34px)}
.bar .actions{display:flex;gap:8px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat .k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.stat .v{font-family:var(--display);font-size:26px;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
.stat .s{font-size:13px;color:var(--muted)}
.meter{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:var(--green)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filters input[type=search]{flex:1 1 240px;width:auto}
.filters select{width:auto}
.tabla-wrap{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
tr.fila{cursor:pointer}
tr.fila:hover td{background:var(--ground)}
tr.abierta td{background:var(--ground)}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:800;white-space:nowrap}
.pill.Pendiente{background:var(--warn-soft);color:var(--warn)}
.pill.Pagado{background:var(--green-soft);color:var(--green)}
.pill.Cancelado{background:var(--err-soft);color:var(--err)}
.pill.Regalia{background:var(--wood-soft,#efe6d9);color:var(--wood)}
.flag{display:inline-block;margin:2px 4px 0 0;border-radius:6px;padding:1px 7px;font-size:12px;font-weight:700;background:var(--err-soft);color:var(--err)}
.detalle{padding:16px 12px 20px;display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media (max-width:820px){.detalle{grid-template-columns:1fr}}
.detalle h4{margin:0 0 6px;font-family:var(--display);color:var(--wood);font-size:15px}
.detalle dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;font-size:14px}
.detalle dt{color:var(--muted)}
.detalle dd{margin:0;overflow-wrap:anywhere}
.nino{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px;background:var(--paper)}
.nino b{font-family:var(--display)}
.edit{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px}
.edit .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.muted{color:var(--muted)}
.empty{padding:30px;text-align:center;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-weight:700;font-size:14px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Actividades para adultos: casillas en rejilla, se adaptan al ancho */
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.act{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;
     padding:9px 11px;cursor:pointer;background:var(--paper);font-size:14.5px;line-height:1.3}
.act:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.act input{margin:2px 0 0;accent-color:var(--green);width:17px;height:17px;flex:none}
.act.sola{grid-column:1/-1}
.kid .acts .act{background:var(--ground)}
@media (max-width:560px){.acts{grid-template-columns:1fr}}

/* Aviso destacado en el panel (la regla de los términos) */
.aviso{border:1px solid var(--wood);background:var(--wood-soft);color:var(--ink);
       border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.5}
.aviso b{color:var(--wood)}
#editor textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.55}
#editor .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
#preview{max-height:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--ground);
     border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:13px}

/* =====================================================================
   Temas por evento
   ---------------------------------------------------------------------
   Un evento no necesita su propia hoja de estilos: cambia los colores y
   ya. Se activa con data-tema en <html>, y lo único que hace es redefinir
   las variables. Todo lo de arriba sigue igual.

   El tema vive en la página del formulario porque es parte de su diseño,
   no de la fila del evento: si mañana hay otro Cowgirl Day, reusa la
   misma página y el mismo tema.
   ===================================================================== */
[data-tema="rosa"]{
  --ground:#FBF3F1; --paper:#FFFBFA; --ink:#33242A; --muted:#7D6670; --line:#EAD6D6;
  --green:#8E3B4E; --green-ink:#FFFFFF; --green-soft:#F7E4E6;
  --wood:#B2707E; --wood-soft:#F6E7E6;
  --focus:#B2707E;
}
@media (prefers-color-scheme: dark){
  [data-tema="rosa"]:not([data-tema-claro]){
    --ground:#1E1619; --paper:#271C21; --ink:#F2E4E7; --muted:#B79AA3; --line:#423036;
    --green:#E9A0B0; --green-ink:#2A1119; --green-soft:#3C2128;
    --wood:#E3ADB6; --wood-soft:#38252B;
    --focus:#E9A0B0;
  }
}

/* Una participante del formulario: misma caja que .kid, nombre propio */
.persona{border:1px dashed var(--line);border-radius:12px;padding:14px;display:flex;
         flex-direction:column;gap:12px;background:var(--ground)}
.persona input,.persona select,.persona textarea{background:var(--paper)!important}
.persona-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.persona-head h3{margin:0;font-family:var(--display);font-size:16px;color:var(--wood)}

/* Total que se va actualizando mientras se agregan participantes */
.total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
       background:var(--green-soft);border-radius:12px;padding:12px 16px;font-weight:700}
.total .v{font-family:var(--display);font-size:24px;font-weight:800;color:var(--green);
          font-variant-numeric:tabular-nums}
.total small{display:block;font-weight:600;color:var(--muted);font-size:13px}

/* Portada con la lista de eventos */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1px solid var(--line);
      border-radius:14px;padding:18px;text-decoration:none;color:inherit}
.card:hover{border-color:var(--green)}
.card h2{font-family:var(--display);color:var(--green);margin:0;font-size:21px}
.card .cerrado{color:var(--muted);font-weight:700;font-size:13.5px}