/* Hesperia Productions — official palette from Basic Guidelines.pdf p.2 (BRAND.md):
   Azul Hesperia #022144 (primary background), Rojo Vivo #CB472D (complementary), Arena Claro #EEE8CA (secondary background).
   Everything else is a neutral or a functional status color used only for legibility/state, never as brand identity.
   Typeface: no official font is defined by the guide; a legible system sans stack is used (not an official brand font). */
:root{
  --azul:#022144;--rojo:#CB472D;--arena:#EEE8CA;
  --azul-2:#0b2d55;               /* neutral step of azul for hover/raised areas on dark */
  --paper:#ffffff;--ink:#022144;--muted:#4b5563;--line:#d6d0b1;--line-2:#c4bd98;
  --on-dark:#ffffff;--on-dark-muted:#d9d4bb;
  --ok:#1d6b43;--ok-bg:#e3f2e9;--warn:#8a5300;--warn-bg:#fdf1d8;--bad:#8f1d1d;--bad-bg:#fbe5e5;
  --seat-free:#ffffff;--seat-sel:#CB472D;--seat-na:#b9b4a0;--seat-block:#4b5563;--seat-promo:#6b4fa0;--seat-cort:#2f7d5b;
  --r:10px;
  --iso-h:34px;--iso-x:calc(var(--iso-h) * .6004);   /* X = red semicircle height (iso: 0.6004 × height) */
  --logo-x-ratio:.2976;                               /* full logo: X = 0.2976 × height */
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--arena);color:var(--ink);font:15px/1.5 "Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif}
a{color:var(--azul);text-underline-offset:2px}
h1,h2,h3{font-weight:700;letter-spacing:.01em;margin:.2em 0 .5em;color:var(--azul)}
h1{font-size:1.75rem}h2{font-size:1.3rem}h3{font-size:1.08rem}

/* ---- official artwork: logo images are never recolored/filtered; .logo-box padding = X clearspace on all 4 sides */
.logo-box{display:inline-flex;flex:none;line-height:0}
.brand-logo{display:block;width:auto;max-width:none;filter:none}
.logo-box.iso{padding:var(--iso-x)}
.logo-box.iso .brand-logo{height:var(--iso-h)}
.logo-box.full{--h:120px;padding:calc(var(--h) * var(--logo-x-ratio))}
.logo-box.full .brand-logo{height:var(--h)}
.logo-box.full.l-hero{--h:150px}
.logo-box.full.l-foot{--h:112px}
.logo-box.full.l-ticket{--h:100px}

.demo-banner{background:var(--arena);color:var(--azul);font-size:.82rem;padding:.45rem 1rem;text-align:center;border-bottom:3px dashed var(--rojo);font-weight:700}
.top{display:flex;align-items:center;column-gap:1rem;flex-wrap:wrap;padding:0 1.4rem 0 0;background:var(--azul);color:var(--on-dark)}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--on-dark)}
.brand-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-muted);font-weight:600}
nav{display:flex;gap:.2rem;flex-wrap:wrap;flex:1}
nav a{color:var(--on-dark);text-decoration:none;padding:.35rem .7rem;border-radius:20px;font-size:.88rem;border:1px solid transparent}
nav a:hover{border-color:var(--on-dark-muted)}
nav a.on{color:var(--azul);background:var(--arena);font-weight:700}
.role{font-size:.78rem;color:var(--on-dark-muted);display:flex;gap:.4rem;align-items:center}
.role select{background:var(--azul-2);color:var(--on-dark);border-color:#3a5577}
main{max-width:1240px;margin:0 auto;padding:1.4rem}
.foot{background:var(--azul);color:var(--on-dark-muted);font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:1rem;padding:0 1rem 1rem}
.foot p{max-width:46rem;margin:0;text-align:center}
.foot .brand-note{font-size:.72rem;opacity:1}

/* customer portal hero */
.hero{background:var(--azul);color:var(--on-dark);border-radius:var(--r);display:flex;align-items:center;flex-wrap:wrap;column-gap:1rem;margin-bottom:1rem;border-bottom:4px solid var(--rojo)}
.hero .hero-text{flex:1;min-width:220px;padding:1rem 1.4rem 1rem 0}
.hero h1{color:var(--on-dark);margin:0 0 .3rem}
.hero p{margin:0;color:var(--on-dark-muted)}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;margin-bottom:1rem}
.grid{display:grid;gap:1rem}.g2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;margin-bottom:1rem}
.kpi{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--azul);border-radius:8px;padding:.7rem .9rem}
.kpi b{display:block;font-size:1.35rem;color:var(--azul)}.kpi span{color:var(--muted);font-size:.8rem}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}
form.f{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:.6rem .9rem;align-items:end}
label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--muted)}
label.chk{flex-direction:row;align-items:center;gap:.4rem}
input,select,textarea{background:var(--paper);border:1px solid var(--line-2);color:var(--ink);border-radius:6px;padding:.5rem .6rem;font:inherit;min-width:0}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,[role=button]:focus-visible,svg .u:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:var(--azul)}
button,.btn{background:var(--azul);color:#fff;border:1px solid var(--azul);border-radius:6px;padding:.55rem 1rem;cursor:pointer;font:inherit;font-weight:700;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:var(--azul-2)}
button.ghost,.btn.ghost{background:transparent;color:var(--azul);border:1px solid var(--azul)}
button.danger{background:var(--bad);border-color:var(--bad);color:#fff}
button.demo{background:repeating-linear-gradient(135deg,#022144,#022144 10px,#0b2d55 10px,#0b2d55 20px);border:2px dashed var(--arena);color:#fff}
button:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pill{display:inline-block;border-radius:20px;padding:.08rem .6rem;font-size:.75rem;font-weight:700;border:1px solid var(--line-2);background:#f6f3e4;color:var(--azul);white-space:nowrap;vertical-align:middle}
.pill.pagado,.pill.valido,.pill.admitido,.pill.hecha,.pill.comprometido,.pill.a_la_venta,.pill.confirmado{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.pill.pendiente_verificacion,.pill.reservado,.pill.reportado,.pill.en_curso,.pill.planificacion{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)}
.pill.expirado,.pill.cancelado,.pill.revocado,.pill.reembolsado,.pill.bloqueada,.pill.excepcion_reembolso,.pill.requiere_reembolso,.pill.usado{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.pill.no_conectado{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.muted{color:var(--muted)}.small{font-size:.8rem}
.notice{border:1px dashed var(--azul);background:#f7f4e6;color:var(--azul);padding:.6rem .8rem;border-radius:8px;font-size:.85rem;margin:.6rem 0}
/* errors: distinct maroon + explicit icon/word, never the decorative brand red alone */
.err{background:var(--bad-bg);border:1px solid var(--bad);border-left-width:6px;color:var(--bad);padding:.6rem .8rem;border-radius:8px;margin:.5rem 0;font-weight:600}
.err::before{content:"⚠ Error: "}
.okmsg{background:var(--ok-bg);border:1px solid var(--ok);border-left-width:6px;color:var(--ok);padding:.6rem .8rem;border-radius:8px;margin:.5rem 0;font-weight:600}
.okmsg::before{content:"✓ "}
.evcard{display:flex;flex-direction:column;gap:.4rem;background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--rojo);border-radius:var(--r);padding:1.1rem}
.evcard h2{margin:.1em 0}
.map-wrap{background:#faf8ee;border:1px solid var(--line);border-radius:var(--r);padding:.5rem;overflow:auto}
svg.map{width:100%;min-width:560px;height:auto;display:block}
svg .stage{fill:var(--azul);stroke:var(--azul)}
svg text{fill:var(--muted);font-size:12px;font-family:inherit}
svg .stage + text{fill:#fff;font-weight:700;letter-spacing:.12em}
svg .u{cursor:pointer;stroke-width:1.5}
svg .u.disponible{fill:var(--seat-free);stroke:var(--azul)}
svg .u.sel{fill:var(--seat-sel);stroke:var(--azul);stroke-width:3}
svg .u.na,svg .u.vendido,svg .u.reservado,svg .u.parcial,svg .u.no_disponible,svg .u.agotado{fill:var(--seat-na);stroke:var(--seat-na);cursor:not-allowed}
svg .u.bloqueado{fill:var(--seat-block);stroke:#1f2937}
svg .u.promotor{fill:var(--seat-promo);stroke:#3f2d66}
svg .u.cortesia{fill:var(--seat-cort);stroke:#1b4d37}
svg .u.ns{fill:#f3f0e0;stroke:#cfc9a8;cursor:default}
svg .zone.disponible{fill:rgba(2,33,68,.08);stroke:var(--azul)}
svg .zone.sel{fill:rgba(203,71,45,.45)}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin:.4rem 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.3rem;vertical-align:-1px;border:1px solid var(--azul)}
.totals td{border:0;padding:.2rem .5rem}.totals tr.t td{font-weight:800;color:var(--azul);font-size:1.05rem;border-top:2px solid var(--azul)}

/* tickets: logo and QR are distinct images with their own sizing rules */
.tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:1rem}
.ticket{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.8rem;text-align:center;border-top:6px solid var(--azul);display:flex;flex-direction:column;align-items:center}
.ticket .logo-box{margin:0 auto}
.ticket img.qr{display:block;width:180px;height:180px;background:#fff;margin:.4rem auto}
.ticket code{font-size:.6rem;word-break:break-all;display:block;color:var(--muted)}
.scan-result{font-size:1.4rem;font-weight:800;padding:1rem;border-radius:10px;text-align:center}
.scan-result.ok{background:var(--ok-bg);color:var(--ok);border:2px solid var(--ok)}.scan-result.bad{background:var(--bad-bg);color:var(--bad);border:2px solid var(--bad)}
details summary{cursor:pointer;color:var(--azul);font-weight:600}
.countdown{font-variant-numeric:tabular-nums;font-weight:800;color:var(--warn)}
@media (max-width:700px){
  :root{--iso-h:30px}
  main{padding:.8rem}.top{padding:0 .8rem .6rem 0}h1{font-size:1.45rem}
  .role{width:100%;padding-left:.8rem}.role select{flex:1}nav{order:3;width:100%;padding-left:.8rem}
  th,td{padding:.35rem .3rem}.hide-m{display:none}
  .logo-box.full.l-hero{--h:104px}.logo-box.full.l-foot{--h:96px}
  .hero .hero-text{padding:0 1rem 1rem}
}
/* operating pilot */
.demo-banner.live{background:var(--azul,#022144);color:#EEE8CA}
.userbox{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
form.inline{display:inline;margin:0}
.payrow{border-top:1px solid var(--line,#ddd);padding:8px 0}
.userbox{padding:4px 12px;color:var(--on-dark,#fff)}
.userbox a{color:var(--arena,#EEE8CA);text-decoration:underline}
.userbox .ghost{color:var(--arena,#EEE8CA);border:1px solid var(--arena,#EEE8CA);background:transparent;padding:4px 12px}