/* ============================================================================
   TAJADA · Hoja de estilos (identidad de La Cachapera, BRANDING-PROMPT.md)
   Amarillo marca #fac914 · tinta #2c2f31 · titulares Bebas Neue · cuerpo Cabin
   ============================================================================ */
:root{
  --ground:#f6f6f7;  --surface:#ffffff;  --surface-2:#f1f1ee;
  --border:#e5e5e7;  --ink:#2c2f31;      --ink-soft:#6b6f74;
  --inverse:#2c2f31; --inverse-2:#3a3d40; --inverse-border:rgba(255,255,255,.14);
  --on-inverse:#f4f5f5; --on-inverse-soft:#c7cacb;
  --brand:#fac914;   --brand-dark:#e2b30b; --accent-ink:#2c2f31;
  --warn:#945f0b; --warn-soft:#fff3e0;  --ok:#1d6a3a;  --ok-soft:#e7f7ec;
  --info:#2363b8; --info-soft:#eef3ff;  --danger:#a23029; --danger-soft:#fdecea;
  --radius:14px; --radius-pill:999px; --shadow:0 1px 3px rgba(44,47,49,.08),0 1px 2px rgba(44,47,49,.04);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#191b1c; --surface:#232627; --surface-2:#2b2e2f; --border:#3a3d40;
    --ink:#f4f5f5; --ink-soft:#a9adae; --shadow:0 1px 3px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#191b1c; --surface:#232627; --surface-2:#2b2e2f; --border:#3a3d40;
  --ink:#f4f5f5; --ink-soft:#a9adae; --shadow:0 1px 3px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Cabin",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.titular{
  font-family:"Bebas Neue",Impact,"Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  letter-spacing:.5px; font-weight:400; color:var(--ink); margin:0 0 .4em;
}
h1{font-size:2rem} h2{font-size:1.4rem} h3{font-size:1.15rem}
a{color:var(--info); text-decoration:none} a:hover{text-decoration:underline}

/* ---- Barra lateral (navegación, escritorio) ---- */
.barra-lat{position:fixed; top:0; left:0; bottom:0; width:234px; background:var(--inverse); color:var(--on-inverse); border-right:3px solid var(--brand); display:flex; flex-direction:column; gap:4px; padding:18px 14px; overflow-y:auto; z-index:40}
.marca{display:flex; align-items:center; gap:11px; text-decoration:none; padding:0 6px; margin-bottom:8px}
.marca:hover{text-decoration:none}
.marca-logo{height:40px; width:40px; flex:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.marca-txt{font-family:"Bebas Neue",Impact,sans-serif; font-size:1.6rem; letter-spacing:1px; color:var(--brand); line-height:1}
.marca-txt small{display:block; font-family:"Cabin",sans-serif; font-size:.6rem; letter-spacing:.14em; color:var(--on-inverse-soft); text-transform:uppercase}
.nav-lat{display:flex; flex-direction:column; gap:2px; margin-top:6px}
.nav-lat a{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:var(--on-inverse-soft); font-weight:600; font-size:.95rem; text-decoration:none; transition:background .15s,color .15s}
.nav-lat a:hover{background:var(--inverse-2); color:var(--on-inverse); text-decoration:none}
.nav-lat a:hover .ic{transform:translateY(-1px) scale(1.1)}
.nav-lat a.activo{background:var(--brand); color:var(--accent-ink)}
.nav-lat a.activo .ic{stroke:var(--accent-ink)}
.nav-lat a .ic{width:20px; height:20px; flex:none}
.barra-lat-pie{margin-top:auto; padding-top:14px; border-top:1px solid var(--inverse-border); display:flex; flex-direction:column; gap:10px}
.barra-lat-pie .usuario{color:var(--on-inverse-soft); font-size:.85rem; padding:0 6px}
.barra-lat-pie .fila-iconos{display:flex; gap:10px}
.icon-btn{background:transparent; border:1px solid var(--inverse-border); color:var(--on-inverse); width:36px; height:36px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.icon-btn:hover{background:var(--inverse-2)}

/* ---- Área principal (a la derecha de la barra) ---- */
.app-main{margin-left:234px; min-height:100vh; display:flex; flex-direction:column}
.app-main > .contenedor{flex:1}
.contenedor{max-width:1120px; margin:0 auto; width:100%; padding:24px 24px 40px}

@media (max-width:900px){
  .barra-lat{position:static; width:auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px 10px; border-right:0; border-bottom:3px solid var(--brand); overflow:visible; padding:10px 14px}
  .marca{order:1; margin-bottom:0}
  .barra-lat-pie{order:2; margin-top:0; margin-left:auto; padding-top:0; border-top:0; flex-direction:row; align-items:center; gap:10px}
  .nav-lat{order:3; flex:1 1 100%; flex-direction:row; flex-wrap:wrap; margin-top:0; gap:4px}
  .nav-lat a{padding:7px 11px; font-size:.9rem}
  .app-main{margin-left:0; min-height:0}
}
.fila{display:flex; flex-wrap:wrap; gap:16px}
.entre{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ---- Tarjetas ---- (tinte amarillo muy sutil + acento para diferenciar contenedores) */
.card{background:linear-gradient(0deg, rgba(250,201,20,.05), rgba(250,201,20,.05)), var(--surface); border:1px solid var(--border); border-left:3px solid rgba(250,201,20,.55); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.card + .card{margin-top:16px}
.card h2,.card h3{margin-top:0}
.card h2{display:flex; align-items:center; gap:10px}
.sub{color:var(--ink-soft); font-size:.85rem; margin:2px 0 0}
/* Icono SVG por título de sección */
.sec-ic{display:inline-flex; width:30px; height:30px; flex:none; align-items:center; justify-content:center; border-radius:9px; background:rgba(250,201,20,.18); color:var(--brand-dark)}
.sec-ic svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---- Pie de página ---- */
.pie{background:var(--inverse); border-top:3px solid var(--brand); margin-top:44px; padding:24px 20px; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; text-align:center}
.pie-logo{height:56px; width:auto}
.pie-txt{font-size:.82rem; color:var(--on-inverse-soft); line-height:1.5}
.pie-txt small{opacity:.75}

/* ---- Resumen (stat tiles) ---- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.tile .n{font-family:"Bebas Neue",Impact,sans-serif; font-size:2.4rem; line-height:1; color:var(--ink)}
.tile .lbl{color:var(--ink-soft); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; margin-top:6px}
.tile.alerta .n{color:var(--warn)} .tile.mal .n{color:var(--danger)}

/* ---- Integraciones ---- */
.integraciones{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.integra{border:1px solid var(--border); border-radius:var(--radius); padding:16px; background:var(--surface-2)}
.integra .nom{font-weight:700; display:flex; align-items:center; gap:8px}
.integra .msg{color:var(--ink-soft); font-size:.82rem; margin-top:8px; min-height:2.4em}
.integra .sync{color:var(--ink-soft); font-size:.75rem; margin-top:4px}

/* ---- Badges de estado ---- */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:.03em}
.badge .pt{width:7px; height:7px; border-radius:50%}
.b-ok{background:var(--ok-soft); color:var(--ok)} .b-ok .pt{background:var(--ok)}
.b-warn{background:var(--warn-soft); color:var(--warn)} .b-warn .pt{background:var(--warn)}
.b-danger{background:var(--danger-soft); color:var(--danger)} .b-danger .pt{background:var(--danger)}
.b-muted{background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--border)} .b-muted .pt{background:var(--ink-soft)}
.b-info{background:var(--info-soft); color:var(--info)} .b-info .pt{background:var(--info)}

/* ---- Botones ---- */
.btn{display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:700; border-radius:var(--radius-pill); padding:10px 20px; border:1px solid transparent; cursor:pointer; text-decoration:none}
.btn-primario{background:var(--brand); color:var(--accent-ink)} .btn-primario:hover{background:var(--brand-dark); text-decoration:none}
.btn-secundario{background:transparent; color:var(--ink); border-color:var(--border)} .btn-secundario:hover{background:var(--surface-2)}
.btn:disabled{opacity:.6; cursor:progress}

/* ---- Tablas ---- */
table{width:100%; border-collapse:collapse; font-size:.88rem}
thead th{background:var(--inverse); color:var(--on-inverse); text-align:left; padding:9px 12px; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em}
tbody td{padding:9px 12px; border-bottom:1px solid var(--border)}
tbody tr:nth-child(even){background:var(--surface-2)}
.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---- Login ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.login{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); overflow:hidden}
.login .top{background:var(--brand); color:var(--accent-ink); padding:26px 24px}
.login .top .marca{color:var(--accent-ink); font-size:2.4rem}
.login .cuerpo{padding:24px}

/* ---- Flash ---- */
.flash{padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:.9rem; border:1px solid}
.flash.ok{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}
.flash.error{background:var(--danger-soft); color:var(--danger); border-color:var(--danger)}
.flash.info{background:var(--info-soft); color:var(--info); border-color:var(--info)}

svg.ic{width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; vertical-align:middle; transition:transform .18s ease}
.mt{margin-top:20px} .muted{color:var(--ink-soft)}

/* ===== Navegación (v2) ===== */
.nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav a{display:inline-flex; align-items:center; gap:7px; color:var(--on-inverse-soft); text-decoration:none; padding:8px 13px; border-radius:var(--radius-pill); font-weight:600; font-size:.92rem; transition:background .15s,color .15s}
.nav a:hover{background:var(--inverse-2); color:var(--on-inverse); text-decoration:none}
.nav a:hover .ic{transform:translateY(-1px) scale(1.12)}
.nav a.activo{background:var(--brand); color:var(--accent-ink)}
.nav a.activo .ic{stroke:var(--accent-ink)}
.cabecera-fila{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:8px 20px;flex-wrap:wrap}
@keyframes girar{to{transform:rotate(360deg)}}
.spin .ic, .ic.spin{animation:girar .9s linear infinite}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.pulso{animation:latido 1.6s ease-in-out infinite}

/* ===== Gráficos ===== */
.graf-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.barras{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.barra-item{display:block; text-decoration:none; color:inherit; border-radius:8px; padding:3px 4px}
a.barra-item:hover{background:var(--surface-2)}
.barra-fila{display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:10px}
.barra-lab{font-size:.86rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barra-pista{background:var(--surface-2); border-radius:999px; height:16px; overflow:hidden}
.barra-rellena{display:block; height:100%; border-radius:999px; width:0; transition:width .7s cubic-bezier(.2,.8,.2,1)}
.barra-val{font-variant-numeric:tabular-nums; font-weight:700; font-size:.88rem; min-width:46px; text-align:right}
.donut{display:block; margin:0 auto}
.donut-seg{transition:stroke-dasharray .8s cubic-bezier(.2,.8,.2,1)}
.donut-n{font-family:"Bebas Neue",Impact,sans-serif; font-size:30px; fill:var(--ink)}
.donut-lbl{font-size:11px; fill:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em}
.leyenda{display:flex; flex-direction:column; gap:7px; margin-top:12px}
.leyenda-it{display:flex; align-items:center; gap:8px; font-size:.88rem}
.leyenda-pt{width:11px; height:11px; border-radius:3px; flex:none}
.leyenda-it strong{margin-left:auto; font-variant-numeric:tabular-nums}

/* ===== KPI tiles con color ===== */
.tile{position:relative; overflow:hidden}
.tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brand)}
.tile.c-azul::before{background:#2363b8} .tile.c-verde::before{background:#1d6a3a}
.tile.c-rojo::before{background:#a23029} .tile.c-ambar::before{background:#945f0b}
a.tile{transition:transform .15s, box-shadow .15s} a.tile:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(44,47,49,.12)}

/* ===== Avatar ===== */
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--inverse);border:2px solid var(--border);vertical-align:middle}
.avatar.lg{width:88px;height:88px}

/* ===== Filas clicables / modal ===== */
tbody tr.clic{cursor:pointer} tbody tr.clic:hover td{background:var(--surface-2)}
.modal-bg{position:fixed;inset:0;background:rgba(20,22,23,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:60;overflow:auto}
.modal-bg[hidden]{display:none}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;max-width:720px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .modal-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal .modal-cuerpo{padding:20px}
.modal-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;border-top:1px solid var(--border)}
.btn-x{padding:4px 10px;line-height:1}
/* El atributo [hidden] debe ganar siempre, aunque haya reglas de display más específicas. */
[hidden]{display:none !important}
.form-col{display:flex;flex-direction:column;gap:12px}
.form-col label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.9rem}
.form-col label .sub{font-weight:400}
.form-col input,.form-col select,.form-col textarea{padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-weight:400;width:100%}
.form-col textarea{resize:vertical;min-height:130px;line-height:1.5}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px 11px;font-size:.8rem;margin:2px}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filtros input,.filtros select{padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;min-width:0;max-width:100%}
.filtros > select{flex:1 1 160px}
/* Selects dentro de un label en columna (formularios): alto normal, no toman el flex-basis como altura. */
.form-col label select{flex:0 0 auto}
/* Bloque «Más filtros» plegable (histórico) */
.mas-filtros > summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;display:inline-flex;align-items:center;gap:8px;padding:4px 0}
.mas-filtros > summary::before{content:"▸";color:var(--muted)}
.mas-filtros[open] > summary::before{content:"▾"}
.rango-et{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;color:var(--muted)}
/* Barra de filtros única */
.barra-filtros .filtros{gap:8px}
/* Barra de acciones sobre la selección */
.sel-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;position:sticky;top:8px;z-index:20;border:2px solid var(--accent)}
.sel-bar[hidden]{display:none}
.sel-bar .sel-info a{margin-left:4px;text-decoration:none}
.sel-bar .sel-info a:hover{text-decoration:underline}
/* Selección e iconos en la tabla */
.col-sel{width:40px;text-align:center}
.col-sel input{width:18px;height:18px;cursor:pointer;accent-color:var(--brand)}
.cli-nom{display:inline-flex;align-items:center;gap:6px}
/* Chips de ciudad (Cover) bajo el nombre en el listado */
.cli-ciu{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chip-mini{display:inline-flex;align-items:center;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:1px 8px;font-size:.7rem;color:var(--muted);font-weight:600}
/* ---- Barra de filtros v2 (ordenada, con etiquetas) ---- */
.bf-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bf-buscar{flex:1 1 280px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit}
.filtros-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px 12px;align-items:end}
.ff{display:flex;flex-direction:column;gap:5px;font-size:.76rem;font-weight:700;letter-spacing:.3px;color:var(--muted);text-transform:uppercase}
.ff select,.ff input{padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-weight:400;font-size:.9rem;text-transform:none;letter-spacing:0;width:100%}
.ff .fila{display:flex}
.btn-sm{padding:5px 11px;font-size:.82rem}
.sel-cuenta{font-weight:600}
.sexo-ic{width:15px;height:15px;fill:none;stroke-width:2;vertical-align:middle;flex:none}
.sexo-ic.sexo-h{stroke:#3b82f6}
.sexo-ic.sexo-m{stroke:#ec4899}
.sexo-ic.lg{width:22px;height:22px;stroke-width:2.2}
a.leyenda-it{text-decoration:none;color:inherit;border-radius:8px;padding:2px 4px;margin:0 -4px}
a.leyenda-it:hover{background:var(--surface-2)}
.barra-lab .bandera-img{margin-right:5px}
.tel-cell{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bandera-img{width:20px;height:14px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px var(--border);vertical-align:middle;flex:none}
.chip .bandera-img{width:18px;height:12px;margin-right:2px}
/* Logos de marca por plataforma (referencia rápida del origen) */
.plat-logo{height:22px;width:auto;border-radius:5px;vertical-align:middle;box-shadow:0 0 0 1px var(--border);display:inline-block}
.plat-logo.sm{height:17px;border-radius:4px}
.plat-logo.lg{height:30px;border-radius:6px}
.plat-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.76rem;color:var(--muted);vertical-align:middle}
.plat-cell{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
/* Panel de duplicados de Square */
.dup-grupo{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-top:12px;background:var(--surface-2)}
.dup-cab{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.dup-fichas{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.dup-ficha{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.dup-id{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
/* Tablas anchas: scroll horizontal dentro de su tarjeta en vez de desbordar. */
.tabla-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-scroll table{margin-top:0}
/* Puntos por plataforma (ficha) */
.pv-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.pv-fila:last-child{border-bottom:0}
.pv-et{display:flex;align-items:center;gap:8px;min-width:0}
.pv-et .pv-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-num{font-weight:700;font-size:1.15rem;white-space:nowrap}
.pv-num small{font-weight:500;color:var(--muted);font-size:.72rem}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--inverse); color:var(--on-inverse); padding:12px 20px; border-radius:var(--radius-pill); box-shadow:var(--shadow); font-size:.88rem; z-index:50}
.toast[hidden]{display:none}

/* ---- Overlay de carga entre páginas ---- */
.cargando{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:var(--brand); opacity:0; visibility:hidden; transition:opacity .18s ease}
.cargando.on{opacity:1; visibility:visible}
.cargando-caja{display:flex; flex-direction:column; align-items:center; gap:16px}
.cargando-maiz{width:92px; height:auto; animation:maiz-pulso 1.1s ease-in-out infinite;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.22)); user-select:none}
.cargando-txt{font-family:"Bebas Neue",Impact,sans-serif; letter-spacing:3px; font-size:1.15rem; color:var(--accent-ink)}
@keyframes maiz-pulso{0%,100%{transform:scale(.82)} 50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){
  .cargando-maiz{animation:maiz-fade 1.2s ease-in-out infinite}
  @keyframes maiz-fade{0%,100%{opacity:.55} 50%{opacity:1}}
}
@media (max-width:560px){ .cabecera .usuario{display:none} .tile .n{font-size:2rem} }

/* ---------------------------------------------------------------- Altas: origen de los socios */
.apilado{display:flex;align-items:stretch;gap:4px;height:200px;margin-top:10px;padding-top:4px;border-bottom:1px solid var(--border)}
.apilado-col{flex:1 1 0;min-width:4px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative}
.apilado-barra{display:flex;flex-direction:column-reverse;border-radius:5px 5px 0 0;overflow:hidden;min-height:2px;transition:height .5s ease}
.apilado-barra span{display:block;min-height:1px}
.apilado-n{font-size:.68rem;font-weight:700;text-align:center;color:var(--ink-soft);line-height:1.4}
.apilado-x{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:.66rem;color:var(--muted);white-space:nowrap;padding-top:3px}
.apilado + .leyenda{margin-top:26px}
.enlace-alta{display:block;font-size:.78rem;word-break:break-all;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:5px 8px}
.qr-alta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border:1px dashed var(--border);border-radius:12px;padding:14px}
.qr-alta #qrAltaImg{background:#fff;padding:10px;border-radius:10px;line-height:0}
.qr-alta > div:last-child{flex:1 1 220px;min-width:0}
.leyenda.en-fila{flex-direction:row;flex-wrap:wrap;gap:6px 14px}
.barras-anchas .barra-fila{grid-template-columns:minmax(110px,200px) 1fr auto}