/* Layout: camiseta blanca cruzada por la banda roja del escudo. Web pública arriba, panel con barra lateral por rol. */
:root{
  --rojo:#D9202E; --rojo-osc:#A8131F; --rojo-suave:#FBE9EA;
  --tinta:#18151A; --tinta-2:#4A4448; --tinta-3:#7B7377;
  --papel:#F7F5F5; --sup:#FFFFFF; --sup-2:#F1EDED; --linea:#E5DEDF;
  --sobre-rojo:#FFFFFF;
  --ok:#1C7C47; --ok-suave:#E3F3EA; --warn:#9A6100; --warn-suave:#FDF1DC; --mal:#B3261E; --mal-suave:#FBE6E4; --info:#2B5AA8; --info-suave:#E6EDF8;
  --f-disp:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,sans-serif;
  --f-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --r:10px; --sombra:0 1px 2px rgba(24,21,26,.06),0 8px 24px rgba(24,21,26,.06);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --rojo:#EE3A47; --rojo-osc:#C9202D; --rojo-suave:#3A1A1E;
  --tinta:#F3EEEF; --tinta-2:#C9C0C3; --tinta-3:#988E92;
  --papel:#131113; --sup:#1D1A1C; --sup-2:#262225; --linea:#363033;
  --ok:#5BC98A; --ok-suave:#173123; --warn:#F0B24B; --warn-suave:#33280F; --mal:#FF7B71; --mal-suave:#3A1A18; --info:#86A9EC; --info-suave:#1A2438;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark}}
:root[data-theme="dark"]{
  --rojo:#EE3A47; --rojo-osc:#C9202D; --rojo-suave:#3A1A1E;
  --tinta:#F3EEEF; --tinta-2:#C9C0C3; --tinta-3:#988E92;
  --papel:#131113; --sup:#1D1A1C; --sup-2:#262225; --linea:#363033;
  --ok:#5BC98A; --ok-suave:#173123; --warn:#F0B24B; --warn-suave:#33280F; --mal:#FF7B71; --mal-suave:#3A1A18; --info:#86A9EC; --info-suave:#1A2438;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--papel);color:var(--tinta);font:16px/1.5 var(--f-body)}
h1,h2,h3{font-family:var(--f-disp);font-weight:400;letter-spacing:.01em;text-transform:uppercase;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(2.3rem,6vw,4.2rem)} h2{font-size:clamp(1.6rem,3.2vw,2.2rem)} h3{font-size:1.2rem}
p{margin:0} a{color:var(--rojo)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--rojo)}
.muted{color:var(--tinta-3)} .small{font-size:.86rem}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

/* barra de demostración */
.demo{background:var(--tinta);color:var(--papel);font-size:.82rem}
.demo .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-block:6px}
.demo select{background:transparent;border:1px solid color-mix(in srgb,var(--papel) 35%,transparent);border-radius:6px;padding:2px 6px;color:var(--papel);max-width:100%}
.demo select option{color:#18151A;background:#fff}
.demo b{font-family:var(--f-cond);letter-spacing:.08em;text-transform:uppercase}

/* cabecera */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--sup);border-bottom:1px solid var(--linea)}
header.top .wrap{display:flex;align-items:center;gap:14px;min-height:64px;flex-wrap:wrap;padding-block:6px}
.marca{display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:0;padding:0}
.marca img{width:42px;height:42px;object-fit:contain}
.marca span{font-family:var(--f-disp);font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em}
nav.pub{display:flex;gap:2px;flex-wrap:wrap;flex:1;min-width:0}
nav.pub button{background:none;border:0;padding:8px 10px;border-radius:6px;font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.92rem;color:var(--tinta-2);cursor:pointer}
nav.pub button:hover{color:var(--tinta);background:var(--sup-2)}
nav.pub button.on{color:var(--rojo)}
.acc{display:flex;gap:8px;align-items:center;margin-left:auto}
.campana{position:relative}
.campana .pto{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--rojo);color:#fff;font-size:.7rem;display:grid;place-items:center;padding:0 4px}
.btn.menu-btn{display:none}
@media (max-width:1060px){nav.pub{display:none;order:9;flex-basis:100%}nav.pub.abierto{display:flex}.btn.menu-btn{display:inline-flex}}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--linea);background:var(--sup);color:var(--tinta);padding:8px 14px;border-radius:8px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;font-size:.95rem}
.btn:hover{border-color:var(--tinta-3)}
.btn.pri{background:var(--rojo);border-color:var(--rojo);color:var(--sobre-rojo)}
.btn.pri:hover{background:var(--rojo-osc)}
.btn.osc{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.btn.sm{padding:5px 10px;font-size:.85rem}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--sup-2)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* HERO con banda */
.hero{position:relative;overflow:hidden;background:var(--sup);border-bottom:1px solid var(--linea)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;padding-block:44px 80px}
.hero .banda{position:absolute;left:-10%;right:-10%;bottom:-30px;height:96px;background:var(--rojo);transform:rotate(-6deg);transform-origin:center;z-index:0;opacity:.95}
.hero > .wrap{position:relative;z-index:1}
.hero h1 span{display:block;color:var(--rojo)}
.hero p.lead{font-size:1.12rem;color:var(--tinta-2);max-width:48ch;margin-top:14px}
.hero .foto{border-radius:14px;overflow:hidden;box-shadow:var(--sombra);aspect-ratio:16/10;max-width:100%;background:var(--sup-2);border:4px solid var(--sup)}
.hero .foto img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero .banda{height:70px}}

section.blk{padding-block:40px}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.sec-h h2{position:relative;padding-left:22px}
.sec-h h2::before{content:"";position:absolute;left:0;top:.08em;bottom:.08em;width:10px;background:var(--rojo);transform:skewX(-18deg)}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.card{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);padding:16px;min-width:0}
.card h3{margin-bottom:8px}
.card.click{cursor:pointer;transition:border-color .15s}
.card.click:hover{border-color:var(--rojo)}

/* partidos */
.match{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.match .eq{font-family:var(--f-cond);font-weight:700;font-size:1rem;line-height:1.15;overflow-wrap:break-word;text-transform:uppercase;letter-spacing:.02em;min-width:0}
.match .eq.v{text-align:right}
.match .eq.club{color:var(--rojo)}
.marcador{font-family:var(--f-disp);font-size:1.6rem;min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
.marcador.vs{font-size:1rem;font-family:var(--f-cond);color:var(--tinta-3)}
.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.84rem;color:var(--tinta-3);margin-top:8px}

/* tablas */
.tbl-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r);background:var(--sup)}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:middle}
th{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;color:var(--tinta-3);font-weight:700;background:var(--sup-2);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right} td.c,th.c{text-align:center}
tr.club td{background:var(--rojo-suave);font-weight:600}
tr.click{cursor:pointer} tr.click:hover td{background:var(--sup-2)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap;border:1px solid transparent}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.ok{background:var(--ok-suave);color:var(--ok)} .chip.warn{background:var(--warn-suave);color:var(--warn)}
.chip.mal{background:var(--mal-suave);color:var(--mal)} .chip.info{background:var(--info-suave);color:var(--info)}
.chip.neu{background:var(--sup-2);color:var(--tinta-2)}
.chip.plain::before{display:none}
.tag{display:inline-block;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;padding:2px 7px;border-radius:4px;background:var(--tinta);color:var(--papel)}
.tag.rojo{background:var(--rojo);color:var(--sobre-rojo)}

/* tabs */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{border:1px solid var(--linea);background:var(--sup);padding:6px 12px;border-radius:999px;cursor:pointer;font-family:var(--f-cond);font-weight:600;letter-spacing:.04em;font-size:.95rem}
.tabs button.on{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}

/* panel */
.panel{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding-block:24px}
aside.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);align-self:start;display:flex;flex-direction:column;gap:14px}
.side .grp b{display:block;font-family:var(--f-cond);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 4px 10px}
.side button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;text-align:left;border:0;background:none;padding:7px 10px;border-radius:7px;cursor:pointer;font-weight:500;color:var(--tinta-2)}
.side button:hover{background:var(--sup-2);color:var(--tinta)}
.side button.on{background:var(--rojo);color:var(--sobre-rojo)}
.side .cnt{font-size:.74rem;background:var(--rojo-suave);color:var(--rojo);border-radius:9px;padding:0 7px;font-weight:700}
.side button.on .cnt{background:rgba(255,255,255,.25);color:#fff}
@media (max-width:860px){.panel{grid-template-columns:1fr}aside.side{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px}
 .side .grp{display:flex;gap:4px;align-items:center;flex-shrink:0}.side .grp b{margin:0 2px 0 6px}.side button{white-space:nowrap;width:auto}}
.main-h{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.main-h h2{font-size:clamp(1.5rem,3vw,2rem)}

/* KPI */
.kpi{padding:14px 16px}
.kpi .v{font-family:var(--f-disp);font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .l{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--tinta-3);font-weight:700}
.kpi .s{font-size:.82rem;color:var(--tinta-3)}

/* formularios */
.form{display:grid;gap:12px}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
label.f{display:grid;gap:4px;font-size:.86rem;font-weight:600;color:var(--tinta-2)}
input.in,select.in,textarea.in{border:1px solid var(--linea);background:var(--sup);border-radius:8px;padding:8px 10px;width:100%;font-weight:400;color:var(--tinta)}
textarea.in{min-height:90px;resize:vertical}
.check{display:flex;gap:8px;align-items:flex-start;font-size:.92rem}
.check input{margin-top:4px;accent-color:var(--rojo)}
.drop{border:1.5px dashed var(--linea);border-radius:8px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem}
.drop.ok{border-color:var(--ok);background:var(--ok-suave)}

/* avatar */
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-cond);font-weight:700;background:var(--sup-2);color:var(--tinta-2);flex-shrink:0;font-size:.95rem}
.av.rojo{background:var(--rojo);color:var(--sobre-rojo)}
.av.lg{width:72px;height:72px;font-size:1.5rem}
.persona{display:flex;align-items:center;gap:10px;min-width:0}
.persona .t{min-width:0}
.persona .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* camiseta */
.cami{position:relative;width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;font-family:var(--f-disp);font-size:1.15rem;color:var(--tinta);background:#fff;border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.cami::before{content:"";position:absolute;inset:-10px;background:linear-gradient(135deg,transparent 42%,var(--rojo) 42%,var(--rojo) 58%,transparent 58%);opacity:.9}
.cami span{position:relative;color:#18151A;text-shadow:0 0 3px #fff,0 0 3px #fff}

/* lista */
.lista{display:flex;flex-direction:column}
.lista > *{padding:11px 0;border-bottom:1px solid var(--linea)}
.lista > *:last-child{border-bottom:0}
.li{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* aviso */
.aviso{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);border:1px solid var(--linea);background:var(--sup)}
.aviso.mal{border-color:color-mix(in srgb,var(--mal) 35%,transparent);background:var(--mal-suave)}
.aviso.warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:var(--warn-suave)}
.aviso.info{border-color:color-mix(in srgb,var(--info) 30%,transparent);background:var(--info-suave)}
.aviso .ic{font-family:var(--f-disp);font-size:1.2rem;line-height:1;width:22px;text-align:center}

/* cantina */
.prod{display:flex;flex-direction:column;gap:8px}
.prod .img{aspect-ratio:4/3;border-radius:8px;background:var(--sup-2);display:grid;place-items:center;overflow:hidden;font-family:var(--f-disp);font-size:1.8rem;color:var(--tinta-3);position:relative;max-width:100%}
.prod .img img{width:100%;height:100%;object-fit:cover}
.prod .img.Bebidas{background:linear-gradient(160deg,var(--info-suave),var(--sup-2))}
.prod .img.Comidas{background:linear-gradient(160deg,var(--warn-suave),var(--sup-2))}
.prod .img.Golosinas{background:linear-gradient(160deg,var(--rojo-suave),var(--sup-2))}
.prod .img.Helados{background:linear-gradient(160deg,var(--ok-suave),var(--sup-2))}
.prod .precio{font-family:var(--f-disp);font-size:1.25rem}
.carrito{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.qty button{border:0;background:var(--sup-2);width:28px;height:28px;cursor:pointer;font-weight:700}
.qty span{min-width:28px;text-align:center}
.qrbox{background:#fff;padding:14px;border-radius:10px;display:inline-block;border:1px solid var(--linea)}
.qrbox img,.qrbox canvas{display:block}

/* galería */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.gal figure{margin:0;border-radius:10px;overflow:hidden;background:var(--sup);border:1px solid var(--linea)}
.gal img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.gal figcaption{padding:10px 12px;font-size:.88rem;color:var(--tinta-2)}

/* gráfico */
.chart svg{width:100%;height:auto;display:block}
.chart .bar{fill:var(--rojo)} .chart .bar:hover{fill:var(--rojo-osc)}
.chart text{fill:var(--tinta-3);font-size:11px;font-family:var(--f-body)}
.chart .grid line{stroke:var(--linea)}
.chart .val{fill:var(--tinta);font-weight:600}

/* modal y toast */
.modal-bg{position:fixed;inset:0;background:rgba(10,8,10,.55);z-index:50;display:grid;place-items:center;padding:16px;overflow:auto}
.modal{background:var(--sup);border-radius:14px;max-width:640px;width:100%;max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal.wide{max-width:900px}
.modal .mh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--linea);position:sticky;top:0;background:var(--sup);z-index:1}
.modal .mb{padding:18px}
.modal .mf{padding:14px 18px;border-top:1px solid var(--linea);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(92vw,460px);pointer-events:none}
#toast div{background:var(--tinta);color:var(--papel);padding:10px 16px;border-radius:10px;box-shadow:var(--sombra);font-size:.92rem;animation:sube .25s ease}
@keyframes sube{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#toast div{animation:none}}

/* ficha */
.ficha-h{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 14px;font-size:.93rem}
.kv dt{color:var(--tinta-3)} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.sensible{border:1px solid color-mix(in srgb,var(--mal) 35%,transparent);background:var(--mal-suave);border-radius:var(--r);padding:12px 14px}
.asis{display:flex;gap:3px;flex-wrap:wrap}
.asis i{width:14px;height:14px;border-radius:3px;background:var(--ok)}
.asis i.no{background:var(--linea)}
.asis i.sus{background:repeating-linear-gradient(45deg,var(--linea) 0 3px,transparent 3px 6px)}

footer.pie{background:var(--tinta);color:var(--papel);margin-top:40px}
footer.pie .wrap{padding-block:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px;font-size:.92rem}
footer.pie h3{font-size:1rem;margin-bottom:6px;color:var(--papel)}
footer.pie .muted{color:color-mix(in srgb,var(--papel) 60%,transparent)}
.empty{padding:28px;text-align:center;color:var(--tinta-3);border:1.5px dashed var(--linea);border-radius:var(--r)}
.sponsor{display:grid;place-items:center;min-height:110px;text-align:center}
.sponsor b{font-family:var(--f-disp);font-size:1.5rem;text-transform:uppercase}
hr.sep{border:0;border-top:1px solid var(--linea);margin:16px 0}

/* ===== Base del sitio (fuera del prototipo) ===== */
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
body > main.contenido{flex:1}
img{max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.flash{margin:14px auto 0}
.flash .aviso{align-items:center}
a.btn{text-decoration:none}
.link{background:none;border:0;padding:0;color:var(--rojo);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
form.inline{display:inline}
.cabecera-cuenta{display:flex;align-items:center;gap:8px}
.campana{position:relative}
.cami{flex-shrink:0}

/* Menú del sitio en celulares */
@media (max-width:1060px){
  header.top .wrap{gap:8px}
  nav.pub{flex-direction:column;align-items:stretch;padding:4px 0 8px;border-top:1px solid var(--linea)}
  nav.pub a{padding:12px 6px;font-size:1rem}
}
nav.pub a{display:block;text-decoration:none;padding:8px 10px;border-radius:6px;font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.92rem;color:var(--tinta-2)}
nav.pub a:hover{color:var(--tinta);background:var(--sup-2)}
nav.pub a.on{color:var(--rojo)}
@media (max-width:520px){
  .marca span{font-size:1.1rem}
  .marca img{width:36px;height:36px}
  .acc .btn{padding:6px 9px;font-size:.84rem}
  .ocultar-movil{display:none!important}
  h1{font-size:2.1rem}
}

/* Panel en celulares: las secciones se abren en un cajón lateral */
.barra-panel{display:none}
@media (max-width:860px){
  .panel{padding-top:12px}
  .barra-panel{display:flex;position:sticky;top:calc(env(safe-area-inset-top,0px) + 0px);z-index:15;background:var(--papel);padding:10px 0;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--linea);margin-bottom:12px}
  .barra-panel .actual{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  aside.side{position:fixed!important;inset:0 auto 0 0;width:min(86vw,320px);background:var(--sup);z-index:40;padding:calc(env(safe-area-inset-top,0px) + 16px) 12px calc(env(safe-area-inset-bottom,0px) + 16px);overflow-y:auto;flex-direction:column!important;transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.25);gap:14px!important}
  aside.side.abierto{transform:none}
  .side .grp{display:block!important}
  .side .grp b{margin:0 0 4px 10px!important}
  .side button,.side a{white-space:normal!important;width:100%!important}
  .velo{position:fixed;inset:0;background:rgba(10,8,10,.45);z-index:35}
  .main-h{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){aside.side{transition:none}}
.side a{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;text-align:left;padding:9px 10px;border-radius:7px;font-weight:500;color:var(--tinta-2);text-decoration:none}
.side a:hover{background:var(--sup-2);color:var(--tinta)}
.side a.on{background:var(--rojo);color:var(--sobre-rojo)}
.side a.on .cnt{background:rgba(255,255,255,.25);color:#fff}
.side .cerrar-side{display:none}
@media (max-width:860px){.side .cerrar-side{display:flex;justify-content:space-between;align-items:center;padding:0 6px 6px}}

/* Tablas que se convierten en tarjetas en el celular */
@media (max-width:640px){
  .tbl-wrap.tarjetas{border:0;background:transparent;overflow:visible}
  .tarjetas table,.tarjetas tbody,.tarjetas tr,.tarjetas td{display:block;width:100%}
  .tarjetas thead{display:none}
  .tarjetas tr{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);padding:8px 12px;margin-bottom:10px}
  .tarjetas td{border:0;padding:5px 0;display:flex;justify-content:space-between;gap:12px;text-align:right!important;align-items:center}
  .tarjetas td::before{content:attr(data-l);font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.74rem;color:var(--tinta-3);text-align:left;flex-shrink:0}
  .tarjetas td[data-l=""]::before{display:none}
  .tarjetas td.principal{font-size:1.02rem;border-bottom:1px solid var(--linea);padding-bottom:8px;margin-bottom:4px;justify-content:flex-start;text-align:left!important}
  .tarjetas td.principal::before{display:none}
  .tarjetas tr.club td{background:transparent}
}

/* Formularios */
.form .ayuda{font-size:.82rem;color:var(--tinta-3);font-weight:400}
input.in:focus,select.in:focus,textarea.in:focus{outline:2px solid var(--rojo);outline-offset:1px}
input.in,select.in,textarea.in{min-height:42px;font-size:16px}
.check input{width:18px;height:18px;flex-shrink:0}
.drop input[type=file]{max-width:100%;font-size:.86rem}
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filtros .in{width:auto;min-width:0;flex:1 1 160px;max-width:260px}
.paginas{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;align-items:center}
.cuenta-demo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tabs a{display:inline-block;text-decoration:none;color:inherit;border:1px solid var(--linea);background:var(--sup);padding:6px 12px;border-radius:999px;font-family:var(--f-cond);font-weight:600;letter-spacing:.04em;font-size:.95rem}
.tabs a.on{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:thin}
.tabs > *{flex-shrink:0}
@media (min-width:861px){.tabs{flex-wrap:wrap;overflow:visible}}
.qty a,.qty button{border:0;background:var(--sup-2);width:34px;height:34px;cursor:pointer;font-weight:700;display:grid;place-items:center;text-decoration:none;color:inherit}
.pie-carrito{display:none}
@media (max-width:860px){
  .tienda{grid-template-columns:1fr!important}
  .carrito{position:static}
  .pie-carrito{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--tinta);color:var(--papel);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));justify-content:space-between;align-items:center;gap:10px}
  .pie-carrito .btn{background:var(--rojo);border-color:var(--rojo);color:#fff}
  body.con-carrito{padding-bottom:72px}
}
.grafico svg{width:100%;height:auto;display:block}
.grafico .barra{fill:var(--rojo)} .grafico .barra:hover{fill:var(--rojo-osc)}
.grafico text{fill:var(--tinta-3);font-size:11px;font-family:var(--f-body)}
.grafico .grid line{stroke:var(--linea)}
.grafico .val{fill:var(--tinta);font-weight:600}
.leida{opacity:.7}
.foto-doc{max-width:240px;border-radius:8px;border:1px solid var(--linea)}
.tienda > *{min-width:0}
a.marca{text-decoration:none;color:var(--tinta)}
.cerrar-side .eyebrow{white-space:nowrap}
@media (max-width:520px){header.top .wrap{min-height:56px}.acc{gap:4px}}
.campana{padding-right:24px!important}
.campana .pto{top:-2px;right:0}
@media (max-width:1060px){header.top .wrap{flex-wrap:wrap}header.top .acc{margin-left:auto}nav.pub{order:9}}
@media (max-width:480px){header.top.con-sesion .marca span{display:none}}
@media (max-width:480px){.marca{gap:6px}.marca span{font-size:1rem}header.top .wrap{gap:6px}.btn.menu-btn{padding-inline:8px}}
@media (max-width:1060px){
  header.top .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
  header.top .marca{grid-row:1;grid-column:1;min-width:0}
  header.top .marca span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header.top .acc{grid-row:1;grid-column:2}
  header.top .menu-btn{grid-row:1;grid-column:3}
  header.top nav.pub{grid-row:2;grid-column:1 / -1}
}