/* Feria WispMX — estilos compartidos (público + admin). Tema claro aprobado en el mockup. */
:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --surface2:#F3F6FA; --raise:#E9EEF5;
  --line:#D9E0E9; --line-soft:#E6EBF2;
  --text:#1B2A41; --muted:#5A6B80; --faint:#8794A6;
  --accent:#D97E06; --accent-ink:#FFFFFF;
  --ok:#178A54; --ok-dim:#DFF2E8; --ok-line:#A7D9C0;
  --warn:#A8760A; --warn-dim:#FBF0D6;
  --sold:#C2334F; --sold-dim:#FADFE6; --sold-line:#F0B9C4;
  --blue:#2C6FBE;
  /* Estado "reservado": azul de la paleta. El rojo (--sold) queda solo para
     lo que sí es negativo: comprobantes rechazados y liberar un stand. */
  /* Stand que alguien está apartando en este momento */
  --proc:#A8760A; --proc-dim:#FBF0D6; --proc-line:#E5CC85; --proc-ink:#6B4A05;
  --res:#2C6FBE; --res-dim:#DCE8F7; --res-line:#9CC0E8; --res-ink:#1B4E86;
  --font-d:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --font-m:ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg); color:var(--text); font-family:var(--font-d)}
body.app{display:flex; flex-direction:column; overflow:hidden}
a{color:var(--blue)}
/* ---------- header ---------- */
header.top{
  display:flex; align-items:center; gap:16px; padding:10px 18px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.94);
  flex-wrap:wrap; z-index:30;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand .logo{width:38px;height:38px;border-radius:10px;background:#F2F6FB;border:1px solid var(--line);display:grid;place-items:center;font-size:19px}
.brand .logo-img{height:38px;width:auto;display:block;flex:none}
.brand h1{font-size:16.5px; font-weight:750; line-height:1.15; white-space:nowrap}
.brand h1 em{font-style:normal;color:var(--accent)}
.brand small{display:block; color:var(--muted); font-weight:500; font-size:11px; letter-spacing:.5px; text-transform:uppercase; margin-top:2px}
.stat{background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:5px 12px; text-align:center; min-width:80px}
.stat b{display:block; font-size:15px; font-family:var(--font-m); font-weight:600}
.stat span{font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--muted)}
.stat.-libre b{color:var(--ok)} .stat.-res b{color:var(--res)}
.hdr-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-left:auto}
.socio-chip{display:flex;align-items:center;gap:7px;background:var(--ok-dim);border:1px solid var(--ok-line);color:var(--ok);font-size:12px;font-weight:700;border-radius:10px;padding:7px 12px;max-width:230px}
.socio-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- botones / inputs ---------- */
.btn{font:600 12.5px var(--font-d); letter-spacing:.3px; cursor:pointer; border-radius:10px;
  border:1px solid var(--line); background:var(--surface2); color:var(--text); padding:9px 14px; transition:.18s; text-decoration:none; display:inline-block}
.btn:hover{border-color:var(--faint); background:var(--raise)}
.btn.-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700}
.btn.-primary:hover{filter:brightness(1.08)}
.btn.-ok{color:var(--ok); border-color:rgba(23,138,84,.4)}
.btn.-danger{color:var(--sold); border-color:rgba(194,51,79,.4)}
.btn.-sm{padding:6px 10px; font-size:11.5px; border-radius:8px}
.btn:disabled{opacity:.45; cursor:not-allowed}
.field label{display:block; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:5px; font-weight:600}
.field input,.field textarea,.field select{width:100%; background:var(--surface2); border:1px solid var(--line); border-radius:10px;
  color:var(--text); font:500 13.5px var(--font-d); padding:10px 12px; transition:border-color .15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent)}
.field textarea{resize:vertical; min-height:56px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.search{position:relative}
.search input{background:var(--surface2); border:1px solid var(--line); color:var(--text);
  font:500 12.5px var(--font-m); border-radius:10px; padding:9px 12px; width:130px; transition:.2s}
.search input:focus{outline:none; border-color:var(--accent); width:160px}
/* ---------- layout plano ---------- */
main.plano{flex:1; display:flex; min-height:0}
#mapCol{flex:1; display:flex; flex-direction:column; min-width:0; position:relative}
.map-tools{display:flex; align-items:center; gap:12px; padding:8px 14px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.map-hint{margin-left:auto; font:400 11px var(--font-m); color:var(--faint); display:flex; gap:14px}
#viewport{flex:1; position:relative; overflow:hidden; cursor:grab; touch-action:none;
  background:
    linear-gradient(rgba(27,64,124,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,64,124,.05) 1px, transparent 1px),
    linear-gradient(rgba(27,64,124,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,64,124,.024) 1px, transparent 1px),
    #EDF1F7;
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
}
#viewport.dragging{cursor:grabbing}
#viewport svg{width:100%; height:100%; display:block}
.zoomctl{position:absolute; right:14px; bottom:14px; display:flex; flex-direction:column; gap:6px; z-index:5}
.zoomctl button{width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
  background:rgba(255,255,255,.95); color:var(--text); font:600 16px var(--font-m); cursor:pointer; transition:.15s}
.zoomctl button:hover{border-color:var(--accent); color:var(--accent)}
#tip{position:fixed; z-index:60; pointer-events:none; opacity:0; transition:opacity .12s;
  background:#fff; border:1px solid var(--line); border-radius:11px; padding:10px 12px;
  box-shadow:0 10px 30px rgba(27,42,65,.16); min-width:180px; transform:translate(14px,14px)}
#tip.on{opacity:1}
#tip .t-id{font:600 14px var(--font-m); display:flex; align-items:center; gap:8px}
#tip .t-cat{font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-top:3px}
#tip .t-row{font-size:11.5px; color:var(--muted); margin-top:6px; display:flex; justify-content:space-between; gap:16px}
#tip .t-row b{color:var(--text); font-family:var(--font-m)}
#tip .t-status{margin-top:8px; font-size:11px; font-weight:700; letter-spacing:.4px; padding:4px 8px; border-radius:6px; display:inline-block}
.dot{width:9px; height:9px; border-radius:3px; display:inline-block; flex:none}
aside.panel{width:340px; flex:none; border-left:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; min-height:0}
.panel-scroll{overflow-y:auto; padding:18px; flex:1}
.ph-empty{text-align:center; padding:24px 6px}
.ph-empty h2{font-size:16px; font-weight:700; margin-bottom:6px}
.ph-empty p{font-size:12.5px; color:var(--muted); line-height:1.55}
.steps{margin-top:18px; text-align:left; display:grid; gap:9px}
.step{display:flex; gap:11px; align-items:flex-start; background:var(--surface2); border:1px solid var(--line-soft); padding:10px 12px; border-radius:12px}
.step b{font:600 11px var(--font-m); color:var(--accent); border:1px solid rgba(217,126,6,.35);
  width:22px; height:22px; border-radius:8px; display:grid; place-items:center; flex:none}
.step div{font-size:12px; color:var(--muted); line-height:1.5}
.step div strong{color:var(--text); display:block; font-size:12.5px}
.sc-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.sc-num{font:600 28px var(--font-m); background:var(--surface2); border:1px solid var(--line); padding:9px 15px; border-radius:13px}
.sc-head .cat{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:600}
.sc-status{border-radius:12px; padding:11px 14px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:9px; margin-bottom:14px}
.sc-status small{display:block; font-weight:500; font-size:11px; opacity:.85}
.sc-status.-libre{background:var(--ok-dim); color:var(--ok); border:1px solid var(--ok-line)}
.sc-status.-reservado{background:var(--res-dim); color:var(--res-ink); border:1px solid var(--res-line)}
.sc-status.-en_proceso{background:var(--proc-dim); color:var(--proc-ink); border:1px solid var(--proc-line)}
.sc-status.-bloqueado{background:var(--raise); color:var(--muted); border:1px solid var(--line)}
.spec{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px}
.spec div{background:var(--surface2); border:1px solid var(--line-soft); border-radius:11px; padding:9px 11px}
.spec span{display:block; font-size:9.5px; letter-spacing:1.1px; text-transform:uppercase; color:var(--faint); margin-bottom:3px}
.spec b{font:600 13px var(--font-m)}
.spec .price b{color:var(--accent)}
.sc-note{font-size:10.5px; color:var(--faint); line-height:1.5; margin:8px 2px 12px}
.sc-cta{width:100%; padding:13px; font-size:14px; border-radius:12px; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:8px}
.sc-cta .ico{width:16px; height:16px; vertical-align:0}
.legend{border-top:1px solid var(--line); padding:12px 18px; background:var(--surface)}
.legend h3{font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.estados{display:flex; gap:12px; flex-wrap:wrap}
.est{display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted)}
.est i{width:14px; height:11px; border-radius:3px; display:inline-block}
/* ---------- modales / toast ---------- */
dialog{
  /* centrado explícito: el reset *{margin:0} anula el margin:auto por defecto del <dialog> */
  position:fixed; inset:0; margin:auto;
  border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--text);
  width:min(430px, calc(100vw - 32px));
  max-height:92vh; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:0; box-shadow:0 30px 80px rgba(27,42,65,.22);
}
dialog::backdrop{background:rgba(27,42,65,.35)}
@media (max-width:480px){
  /* max-width: el UA limita el dialog a calc(100% - 6px - 2em); lo liberamos */
  dialog{width:calc(100vw - 20px); max-width:calc(100vw - 20px); border-radius:14px}
  .dlg-head{padding:16px 16px 0}
  .dlg-body{padding:14px 16px 18px}
  /* inputs a 16px dentro de modales: evita que iOS haga zoom al enfocar */
  dialog .field input, dialog .field select, dialog .field textarea{font-size:16px}
}
.dlg-head{padding:20px 22px 0; display:flex; justify-content:space-between; align-items:flex-start}
.dlg-head h2{font-size:18px; font-weight:750}
.dlg-head p{color:var(--muted); font-size:12.5px; margin-top:4px; line-height:1.5}
.dlg-head .x{background:none; border:none; color:var(--faint); font-size:22px; cursor:pointer; line-height:1; padding:4px}
.dlg-body{padding:18px 22px 22px; display:grid; gap:12px}
.dlg-foot{display:flex; gap:10px; margin-top:6px}
.dlg-foot .btn{flex:1; padding:12px}
.dlg-resumen{font:500 11.5px var(--font-m); background:var(--surface2); border:1px dashed var(--line);
  color:var(--muted); border-radius:10px; padding:9px 12px; display:flex; justify-content:space-between}
.dlg-resumen b{color:var(--accent)}
#toast{position:fixed; left:50%; bottom:26px; translate:-50% 0; z-index:80;
  background:#EAF7F0; border:1px solid var(--ok-line); color:#14743F;
  font:600 13px var(--font-d); border-radius:12px; padding:12px 18px;
  box-shadow:0 14px 40px rgba(27,42,65,.18); opacity:0; pointer-events:none; transition:.25s; max-width:min(520px, 90vw); text-align:center}
#toast.on{opacity:1; translate:-50% -6px}
#toast.err{background:#FBE9EE; border-color:var(--sold-line); color:var(--sold)}
/* ---------- svg ---------- */
svg text{user-select:none}
/* Los trazos se miden en píxeles de pantalla, no en unidades del plano: así el
   mismo motor sirve para planos en metros o en puntos y no engordan al alejar. */
.wall,.area-shape,.st rect.body{vector-effect:non-scaling-stroke}
.wall{stroke-linecap:square}
.area-label{fill:#5C6F8A; font-family:var(--font-m); letter-spacing:.14em; text-transform:uppercase}
.st{cursor:pointer}
.st rect.body{transition:filter .12s}
.st:hover rect.body{filter:brightness(.94) saturate(1.15)}
.st.sel rect.body{stroke:#1B2A41 !important; stroke-width:2.5}
/* El stand del socio que está viendo el plano */
.st.mio rect.body{stroke:var(--accent) !important; stroke-width:3}
.sc-status.-mio{background:var(--warn-dim); color:#8A6207; border:1px solid #E5CC85}
.st .id{font-family:var(--font-m); font-weight:600; pointer-events:none}
.st .emp{font-family:var(--font-d); pointer-events:none; opacity:.9}
.st .vt{font-family:var(--font-m); pointer-events:none; opacity:.75}
@keyframes pulse{0%,100%{stroke-width:2.5; stroke-opacity:1}50%{stroke-width:7; stroke-opacity:.35}}
.st.pulse rect.body{stroke:#1B2A41 !important; animation:pulse 1s ease 3}
/* ---------- páginas documento (reserva / admin) ---------- */
.page{max-width:980px; margin:0 auto; padding:26px 18px 60px}
.page.-narrow{max-width:640px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:16px; box-shadow:0 1px 4px rgba(27,42,65,.05)}
.card h2{font-size:16px; margin-bottom:12px}
.badge{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.4px; padding:5px 10px; border-radius:8px}
.badge.-apartado{background:var(--warn-dim); color:var(--warn)}
.badge.-formalizado{background:#E3EDFB; color:var(--blue)}
.badge.-pagado{background:var(--ok-dim); color:var(--ok)}
.badge.-liberado,.badge.-cancelado{background:var(--raise); color:var(--muted)}
.badge.-pendiente{background:var(--warn-dim); color:var(--warn)}
.badge.-validado{background:var(--ok-dim); color:var(--ok)}
.badge.-rechazado{background:var(--sold-dim); color:var(--sold)}
.flash{border-radius:12px; padding:12px 16px; margin-bottom:14px; font-size:13px; font-weight:600}
.flash.-ok{background:var(--ok-dim); color:var(--ok); border:1px solid var(--ok-line)}
.flash.-error{background:var(--sold-dim); color:var(--sold); border:1px solid var(--sold-line)}
.flash.-alerta{background:var(--warn-dim); color:#8A6207; border:1px solid #E5CC85}
table.list{width:100%; border-collapse:collapse; font-size:12.5px}
table.list th{text-align:left; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); padding:8px 10px; border-bottom:1px solid var(--line)}
table.list td{padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
table.list tr:hover td{background:var(--surface2)}
.mono{font-family:var(--font-m)}
.muted{color:var(--muted)} .small{font-size:11.5px}
.timeline{display:flex; gap:0; margin:14px 0 6px}
.tl-step{flex:1; text-align:center; position:relative; font-size:11px; color:var(--faint); padding-top:22px}
.tl-step:before{content:""; position:absolute; top:6px; left:50%; translate:-50% 0; width:13px; height:13px; border-radius:50%; background:var(--raise); border:2px solid var(--line)}
.tl-step:after{content:""; position:absolute; top:12px; left:calc(50% + 10px); right:calc(-50% + 10px); height:2px; background:var(--line)}
.tl-step:last-child:after{display:none}
.tl-step.on{color:var(--ok); font-weight:700}
.tl-step.on:before{background:var(--ok); border-color:var(--ok)}
.statgrid{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.statgrid .stat{min-width:110px; padding:10px 14px}
/* ---------- navegación del admin ---------- */
.adminnav{display:flex; gap:4px; flex-wrap:wrap; margin-left:6px}
.adminnav a{
  font:600 12.5px var(--font-d); color:var(--muted); text-decoration:none;
  padding:8px 13px; border-radius:10px; border:1px solid transparent; transition:.15s;
}
.adminnav a:hover{color:var(--text); background:var(--surface2)}
.adminnav a.on{color:var(--accent); background:#FDEBC8; border-color:#EDD9A6}
/* ============================================================
   MÓVIL — el plano ocupa toda la pantalla y el detalle del stand
   sube desde abajo en una hoja que no la tapa entera.
   ============================================================ */
/* piezas que solo existen en móvil: ocultas de salida */
.hoja-agarre, .hoja-x, .velo, .barra-movil{display:none}

@media (max-width: 880px){
  .grid2{grid-template-columns:1fr}
  .adminnav{order:3; width:100%}

  /* la app mide exactamente la pantalla; nada de scroll de página.
     Solo body.app: el panel admin y la página de reserva sí deben desplazarse. */
  body.app{height:100dvh; overflow:hidden; overscroll-behavior:none}

  /* ---- cabecera compacta: marca + buscador. Los CTA bajan al pulgar ---- */
  body.app header.top{padding:8px 12px; gap:8px; row-gap:7px}
  body.app .brand small{display:none}
  body.app .brand h1{font-size:15px; white-space:normal}
  body.app .brand .logo-img{height:30px}
  body.app .hdr-actions{width:100%; margin-left:0; gap:8px; flex-wrap:nowrap}
  body.app .hdr-actions .search{flex:1; min-width:0}
  body.app .hdr-actions .search input,
  body.app .hdr-actions .search input:focus{width:100%; font-size:16px; padding:9px 12px}
  body.app .hdr-actions .btn.-primary{display:none}
  body.app .socio-chip{flex:none; max-width:44vw}

  /* ---- el plano se lleva todo el alto que sobra ---- */
  main.plano{flex-direction:column; min-height:0}
  #mapCol{flex:1; min-height:0}
  #viewport{flex:1; min-height:0}
  .map-hint, .mt-texto{display:none}
  #tip{display:none}                      /* en táctil el detalle va en la hoja */

  /* la leyenda sube a la franja del plano, en una línea */
  .map-tools{padding:7px 12px; gap:0; min-height:34px}
  .map-tools .legend{border:none; background:none; padding:0; width:100%}
  .map-tools .legend h3{display:none}
  .map-tools .estados{gap:13px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .map-tools .estados::-webkit-scrollbar{display:none}
  .map-tools .est{white-space:nowrap; font-size:10.5px}

  /* los controles de zoom se apartan de la barra inferior */
  .zoomctl{right:10px; bottom:calc(82px + env(safe-area-inset-bottom, 0px)); transition:opacity .2s}
  .zoomctl button{width:42px; height:42px}
  body.-hoja .zoomctl{opacity:0; pointer-events:none}

  /* ---- la hoja inferior ---- */
  aside.panel{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    width:auto; border:1px solid var(--line); border-bottom:none;
    border-radius:20px 20px 0 0;
    max-height:min(76vh, 76dvh);
    box-shadow:0 -14px 44px rgba(27,42,65,.26);
    transform:translateY(101%); visibility:hidden;
    transition:transform .28s cubic-bezier(.32,.72,0,1), visibility 0s linear .28s;
  }
  body.-hoja aside.panel{
    transform:translateY(0); visibility:visible;
    transition:transform .28s cubic-bezier(.32,.72,0,1), visibility 0s;
  }
  aside.panel.-arrastrando{transition:none}
  .panel-scroll{padding:2px 18px calc(20px + env(safe-area-inset-bottom, 0px)); overscroll-behavior:contain}
  aside.panel > .legend{display:none}     /* en móvil vive arriba, sobre el plano */
  .ph-empty{padding:6px 2px 10px}
  .ph-empty .steps{gap:8px}

  /* agarradera: se puede arrastrar hacia abajo para cerrar */
  .hoja-agarre{display:block; padding:11px 0 5px; touch-action:none; cursor:grab}
  .hoja-agarre span{display:block; width:44px; height:4px; border-radius:99px; background:var(--line); margin:0 auto}
  .hoja-x{
    display:grid; place-items:center; position:absolute; top:8px; right:10px; z-index:2;
    width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
    background:var(--surface2); color:var(--muted); cursor:pointer;
  }
  .hoja-x .ico{width:17px; height:17px; vertical-align:0}

  /* tocar el plano visible por encima de la hoja también la cierra */
  .velo{
    display:block; position:fixed; inset:0; z-index:65; background:rgba(27,42,65,.34);
    opacity:0; pointer-events:none; transition:opacity .26s;
  }
  body.-hoja .velo{opacity:1; pointer-events:auto}

  /* ---- barra fija con la acción principal ---- */
  .barra-movil{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:10px; align-items:center;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--surface); border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(27,42,65,.10); transition:opacity .18s;
  }
  .barra-movil:empty{display:none}
  .barra-movil .btn{
    flex:1; padding:14px; font-size:14.5px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  }
  .barra-movil .btn .ico{width:16px; height:16px; vertical-align:0}
  .barra-movil .pista{flex:1; text-align:center; font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.4}
  body.-hoja .barra-movil{opacity:0; pointer-events:none}

  /* iOS hace zoom al enfocar cualquier campo de menos de 16px: al salir del
     zoom la página queda descuadrada. Con 16px no se dispara. */
  .field input, .field select, .field textarea{font-size:16px}

  /* objetivos táctiles cómodos dentro de la hoja */
  .sc-cta{padding:15px; font-size:15px}
  /* el botón se queda pegado abajo aunque el detalle lleve scroll */
  .panel-scroll .sc-cta{position:sticky; bottom:0; z-index:1; margin-bottom:0}
  .panel-scroll .sc-note{margin-bottom:10px}
  dialog .dlg-foot .btn{padding:14px}
}

/* pantallas muy estrechas */
@media (max-width: 380px){
  body.app .brand h1{font-size:13.5px}
  body.app .brand .logo-img{height:26px}
  .sc-num{font-size:24px; padding:7px 12px}
}

/* móvil apaisado: hay ancho de sobra y muy poco alto */
@media (max-width: 880px) and (max-height: 520px){
  /* la cabecera vuelve a una sola fila: recupera ~40px de plano */
  body.app header.top{padding:6px 12px; flex-wrap:nowrap}
  body.app .hdr-actions{width:auto; margin-left:auto; flex:0 1 auto}
  body.app .hdr-actions .search{flex:0 1 190px}
  .map-tools{display:none}                 /* la leyenda cede su franja al plano */
  aside.panel{max-height:min(80vh, 80dvh)}
  .hoja-agarre{padding:8px 0 4px}
  .barra-movil{padding:7px 12px calc(7px + env(safe-area-inset-bottom, 0px))}
  .barra-movil .btn{padding:11px}
  .zoomctl{bottom:calc(66px + env(safe-area-inset-bottom, 0px))}
}

/* ---------- cuadro de pago: elegir tipo y medio ---------- */
/* minmax(0,1fr) y no 1fr: 1fr respeta el min-content, y «Transferencia»
   es una palabra que no parte, asi que ensanchaba su columna. */
/* El primero de cada par es el camino que WispMX quiere: mas ancho, mas aire
   y mas cuerpo de letra. El segundo queda disponible pero discreto. */
.segmentado{position:relative; display:grid; grid-template-columns:1.55fr 1fr; gap:10px; align-items:start}
.segmentado input{position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none}
.segmentado label{display:block; cursor:pointer; padding:12px 14px; border-radius:12px;
  background:var(--surface2); border:1px solid var(--line); transition:.15s}
.segmentado label:hover{border-color:var(--faint)}
.segmentado input:checked + label{border-color:var(--accent); background:#FFF8EC}
/* El foco del teclado tiene que verse: el radio de verdad esta escondido */
.segmentado input:focus-visible + label{outline:2px solid var(--accent); outline-offset:2px}
.segmentado label b{display:block; font-size:14px}
.segmentado label i{display:block; font-style:normal; font-family:var(--font-m); font-size:16.5px;
  color:var(--accent); font-weight:600; margin:2px 0 3px}
.segmentado label small{display:block; color:var(--muted); font-size:12px; line-height:1.45}

/* La opcion secundaria: mas chica en todo. Se le baja el cuerpo de letra y el
   aire, pero no por debajo de lo legible: sigue siendo una opcion valida, no
   una advertencia. */
.segmentado input:nth-of-type(2) + label{padding:9px 11px}
.segmentado input:nth-of-type(2) + label b{font-size:12px}
.segmentado input:nth-of-type(2) + label i{font-size:13px; margin:1px 0 2px}
.segmentado input:nth-of-type(2) + label small{font-size:10.5px; line-height:1.4}
/* Y la principal, un punto mas grande */
.segmentado input:nth-of-type(1) + label{padding:14px 16px}
.segmentado input:nth-of-type(1) + label i{font-size:19px}
/* El medio de pago no lleva importes: icono y nombre en la MISMA linea, para
   que la pastilla sea lo mas baja posible. La diferencia entre el principal y
   el secundario la marca el aire vertical, no el numero de lineas. */
.segmentado.-medio label{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px; text-align:center; font:600 13px var(--font-d);
}
.segmentado.-medio label > .ico{width:20px; height:20px; color:var(--muted); flex:none}

/* Transferencia: el mismo renglon, pero con mucho aire arriba y abajo y todo
   centrado. Es el selector que WispMX quiere que se pulse.
   Un solo valor para todas las anchuras: no merece la pena repetirlo dentro del
   media query por ahorrar 8px de alto, y tener la misma propiedad peleada en
   dos sitios con la misma especificidad es una fuente de sorpresas. */
.segmentado.-medio input:nth-of-type(1) + label{padding:26px 14px; min-height:96px; gap:10px}
/* Tarjeta: lo justo. */
.segmentado.-medio input:nth-of-type(2) + label{padding:9px 11px; min-height:0}
/* El del medio elegido toma el color de acento, para que se vea cuál está activo */
.segmentado.-medio input:checked + label > .ico{color:var(--accent)}
.segmentado.-medio input#medio-transferencia:checked + label > .ico{color:var(--ok)}

/* Cuando solo queda un importe posible, se ensena en vez de hacerle elegir */
.pago-unico{background:#FFF8EC; border:1px solid var(--accent); border-radius:12px; padding:12px 14px}
.pago-unico b{display:block; font-size:14px}
.pago-unico i{display:block; font-style:normal; font-family:var(--font-m); font-size:16.5px;
  color:var(--accent); font-weight:600; margin:2px 0 3px}
.pago-unico small{display:block; color:var(--muted); font-size:12px; line-height:1.45}
/* ---------- contador del bloqueo temporal (estilo boletera) ---------- */
.cuenta-hold{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--proc-dim); border:1px solid var(--proc-line); color:var(--proc-ink);
  border-radius:10px; padding:9px 12px; font-size:13px; font-weight:600; margin-bottom:4px;
}
.cuenta-hold b{font-family:var(--font-m); font-size:17px; font-variant-numeric:tabular-nums; letter-spacing:.5px}
.cuenta-hold.-poco{background:var(--sold-dim); border-color:var(--sold-line); color:var(--sold)}
/* ---------- recuadro con la liga para volver a la reserva ---------- */
.liga-guardar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.liga-guardar input{
  flex:1; min-width:220px; background:var(--surface2); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; font:500 12.5px var(--font-m); color:var(--text);
}
/* Iconos Lucide (sprite en icons.svg) */
.ico{width:15px;height:15px;flex:0 0 auto;display:inline-block;vertical-align:-3px}

/* ---------- paquetes de patrocinio en el formulario de reserva ---------- */
/* El ancho extra para comparar dos paquetes se define más abajo, junto al
   asistente: solo aplica mientras el paso 1 está a la vista. */

.pq-titulo{
  font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:6px 0 8px;
}
.pq-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pq-grid.-uno{grid-template-columns:1fr}

.pq{display:block; cursor:pointer}
.pq.-solo{cursor:default}
.pq-caja{
  display:block; height:100%; background:var(--surface2);
  border:1.5px solid var(--line); border-radius:12px; overflow:hidden; transition:.15s;
}
.pq:hover .pq-caja{border-color:var(--faint)}
.pq input:checked + .pq-caja{border-color:var(--accent); background:#FFF8EC}
.pq input:focus-visible + .pq-caja{outline:2px solid var(--accent); outline-offset:2px}
.pq input{position:absolute; opacity:0; width:0; height:0}

.pq-cab{
  display:block; padding:7px 12px; color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
}
.pq-precio{
  display:block; padding:10px 12px 0; font:600 19px var(--font-m); color:var(--text);
}
.pq-quedan{
  display:inline-block; margin:6px 12px 0; padding:2px 8px; border-radius:20px;
  background:var(--sold-dim); color:var(--sold); font-size:10.5px; font-weight:700;
}
.pq-lista{list-style:none; margin:0; padding:10px 12px 12px}
.pq-lista li{
  position:relative; padding-left:15px; margin-bottom:5px;
  font-size:11.5px; line-height:1.45; color:var(--muted);
}
.pq-lista li:before{
  content:""; position:absolute; left:0; top:5px; width:6px; height:6px;
  border-radius:50%; background:var(--accent); opacity:.5;
}
.pq input:checked + .pq-caja .pq-lista li{color:var(--text)}

@media (max-width: 620px){
  /* En un teléfono no caben lado a lado: se apilan y la lista se recorta
     para que el botón de confirmar no quede a un scroll de distancia. */
  .pq-grid{grid-template-columns:1fr}
  .pq-lista{max-height:132px; overflow-y:auto}
  .pq-precio{font-size:17px}
}
/* Separador entre los paquetes que admite un stand: «Plata · Oro» */
.cat-sep{margin:0 7px 0 5px; color:var(--faint); font-weight:400}

@media (max-width: 620px){
  /* Con la comparativa de paquetes el formulario se alarga y «Confirmar
     apartado» queda por debajo del pliegue. Se ancla al pie del diálogo para
     que no haya que buscarlo con el dedo. */
  dialog:has(.pq) .dlg-foot{
    position:sticky; bottom:0; z-index:2;
    background:var(--surface); padding:12px 0 2px; margin-top:2px;
    box-shadow:0 -10px 14px -4px var(--surface);
  }
  .pq-lista{max-height:108px}
}

/* Los cuadritos de color del tooltip: uno por paquete, juntos */
#tip .t-dots{display:inline-flex; gap:3px; margin-right:2px}

/* ---------- asistente de dos pasos del apartado ---------- */
.pasos{
  display:flex; gap:8px; list-style:none; margin:0;
  padding:14px 22px 0; border-bottom:1px solid var(--line-soft);
}
.paso{
  display:flex; align-items:center; gap:8px; padding:0 0 12px;
  font:600 12px var(--font-d); color:var(--faint); flex:1; position:relative;
}
.paso b{
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--raise); color:var(--faint); font:600 11px var(--font-m);
  border:1px solid var(--line); transition:.15s;
}
.paso.-on{color:var(--text)}
.paso.-on b{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
/* El paso ya cumplido se puede pulsar para volver */
.paso.-hecho{color:var(--muted); cursor:pointer}
.paso.-hecho b{background:var(--ok-dim); color:var(--ok); border-color:var(--ok-line)}
.paso.-on:after{
  content:""; position:absolute; left:0; right:8px; bottom:-1px;
  height:2px; background:var(--accent); border-radius:2px;
}
#btnVolver .ico{transform:rotate(180deg); width:14px; height:14px; vertical-align:-2px; margin-right:4px}

/* El diálogo se ensancha solo mientras se comparan dos paquetes; en el paso 2
   vuelve al ancho de un formulario normal, que se lee mejor. */
/* Ancho extra mientras se comparan dos paquetes. La clase la pone el JS al
   cambiar de paso: con :has() Chrome no siempre recalcula el estilo cuando
   se oculta el paso 1, y el diálogo se quedaba ancho en el paso 2. */
dialog.-comparando{width:min(720px, calc(100vw - 32px))}

@media (max-width: 620px){
  .pasos{padding:12px 16px 0}
  .paso{font-size:11.5px}
}

/* Lo que incluye el paquete, en la página de la reserva */
.incluye{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.incluye li{position:relative; padding-left:20px; font-size:13px; line-height:1.5; color:var(--muted)}
.incluye li:before{
  content:""; position:absolute; left:2px; top:6px; width:7px; height:7px;
  border-radius:50%; background:var(--accent); opacity:.55;
}
@media (min-width: 700px){
  .incluye{grid-template-columns:1fr 1fr; gap:7px 22px}
}

/* ---------- tarjeta del paquete contratado ---------- */
/* Se viste con el color de su nivel, igual que la tarjeta del asistente:
   franja sólida arriba y un fondo apenas teñido. --tier lo pone el Blade. */
.card.-paquete{
  padding:0; overflow:hidden; border-color:var(--tier, var(--line));
  background:var(--surface);
}
.card.-paquete h2{
  margin:0; padding:12px 20px;
  background:var(--tier, var(--accent)); color:var(--tinta, #fff);
  font-size:14px; font-weight:750; letter-spacing:.4px;
}
.paquete-cuerpo{
  padding:18px 20px 20px;
  /* Tinte muy leve del color del nivel; si el navegador no entiende
     color-mix se queda con el fondo normal de la tarjeta, que también vale. */
  background:color-mix(in srgb, var(--tier, transparent) 7%, var(--surface));
}
.card.-paquete .incluye li:before{background:var(--tier, var(--accent)); opacity:.75}

/* Enlace discreto: ni color de enlace ni subrayado, para que el crédito del
   pie no compita con el contenido. Se delata al pasar el cursor. */
a.sutil{color:inherit; text-decoration:none}
a.sutil:hover{text-decoration:underline}

/* Campo que se muestra pero no se edita (el correo de la membresía) */
.field input.-fijo{
  background:var(--raise); color:var(--muted); cursor:default;
  border-style:dashed;
}
.field input.-fijo:focus{border-color:var(--line)}
.campo-nota{display:block; margin-top:6px; font-size:11px; line-height:1.5; color:var(--faint)}

/* ---------- páginas de error (404, 403, 500) ---------- */
.error-body{
  min-height:100vh; min-height:100dvh; display:grid; place-items:center;
  padding:24px 18px; background:var(--bg);
}
.error-caja{
  width:100%; max-width:520px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:36px 32px 28px; box-shadow:0 12px 40px rgba(27,42,65,.08);
}
.error-logo{height:38px; width:auto; margin:0 auto 22px; display:block}
.error-codigo{
  font:600 13px var(--font-m); letter-spacing:.22em; color:var(--accent);
  margin-bottom:6px;
}
.error-titulo{font-size:23px; font-weight:750; line-height:1.25; margin-bottom:16px}
.error-texto{display:grid; gap:11px; margin-bottom:26px}
.error-texto p{font-size:14px; line-height:1.6; color:var(--muted); text-align:left}
.error-texto b{color:var(--text)}
.error-acciones .btn{padding:13px 26px; font-size:14px; border-radius:12px}
.error-pie{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--faint);
}

@media (max-width: 480px){
  .error-caja{padding:28px 20px 22px; border-radius:14px}
  .error-titulo{font-size:20px}
  .error-acciones .btn{display:block; width:100%}
}

/* ---------- cuadro de pago: la rama que toca ---------- */
.pago-caja > .field{margin-bottom:16px}
.pago-caja .rama{display:grid; gap:13px; padding-top:16px; border-top:1px solid var(--line)}
.pago-caja .pago-form{display:grid; gap:13px}
.pago-caja .btn.-ancho{width:100%; padding:13px; font-size:13.5px; border-radius:11px}
/* La rama de tarjeta entera va un punto por debajo: boton sin relleno, mas
   estrecho y con letra menor que el de transferencia. La flecha indica que ese
   boton te saca de la pagina, que es lo que pasa: va a Pagoralia. */
.pago-caja .rama.-tarjeta .btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; font-size:12px; max-width:100%; margin:0 auto;
  white-space:nowrap;              /* que no parta en dos lineas */
}
.pago-caja .rama.-tarjeta .btn .ico{width:14px; height:14px; flex:none}
.pago-caja .rama.-tarjeta{gap:9px; max-width:420px; margin:0 auto; width:100%}

/* Los datos bancarios, tal como los escribe el staff en el panel */
/* Una tabla que no quepa se desplaza dentro de su tarjeta; lo que no puede
   es empujar la pagina entera a lo ancho. */
.card:has(> .list){overflow-x:auto}

/* Los datos bancarios. Es lo que el socio va a copiar al banco, asi que pesan
   mas que cualquier otra cosa del cuadro: fondo propio, borde de acento y el
   VALOR grande, no el rotulo. */
.pago-datos{
  margin:0; padding:16px 18px; border-radius:13px;
  background:#FFFDF7; border:1.5px solid var(--accent);
  box-shadow:0 1px 6px rgba(217,126,6,.10);
}
.pago-datos .pd-titulo{
  margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid #F0E2C6;
  font:700 13px var(--font-d); letter-spacing:.2px; color:var(--accent);
  text-transform:uppercase;
}
.pd-fila{display:grid; grid-template-columns:82px 1fr; gap:4px 12px; align-items:baseline; padding:5px 0}
.pd-fila + .pd-fila{border-top:1px solid #F5EAD6}
.pd-etiqueta{font:600 10.5px var(--font-d); letter-spacing:.9px; text-transform:uppercase; color:var(--muted)}
.pd-valor{font-size:15px; line-height:1.4; color:var(--text); font-weight:700; word-break:break-word}
/* Cuenta y CLABE se leen digito a digito: monoespaciada y mas grandes */
.pd-valor.-numero{font-family:var(--font-m); font-size:17.5px; letter-spacing:.5px; color:var(--accent)}

@media (max-width: 480px){
  .pago-datos{padding:14px}
  .pd-fila{grid-template-columns:1fr; gap:1px; padding:7px 0}
  .pd-valor{font-size:15.5px}
  .pd-valor.-numero{font-size:18px}
}

/* Que rama se ve.
   La transferencia es el camino por defecto y solo se aparta cuando el socio
   pide tarjeta Y esta pagando el anticipo, que es lo unico que la tarjeta
   cubre. Escrito asi a proposito: si alguien marca tarjeta y luego cambia a
   «Total», la segunda regla deja de aplicar y vuelve a verse la transferencia,
   en vez de quedarse con las dos ramas ocultas y un cuadro vacio.

   Va con :has y sin JavaScript: si un navegador no lo soportara se verian las
   dos ramas enteras, que es feo pero se puede pagar. Y lo que de verdad impide
   pagar el total con tarjeta esta en el controlador, no aqui. */
.pago-caja .rama.-tarjeta{display:none}
.pago-caja:has(#medio-tarjeta:checked):has(#tipo-anticipo:checked) .rama.-tarjeta{display:grid}
.pago-caja:has(#medio-tarjeta:checked):has(#tipo-anticipo:checked) .rama.-transferencia{display:none}

/* El aviso del anticipo: fuera de su cuadro y solo cuando esta elegido. */
.pago-nota-tipo{display:none}
.pago-caja:has(#tipo-anticipo:checked) .pago-nota-tipo{
  display:flex; gap:8px; align-items:flex-start;
  margin:10px 0 0; padding:10px 12px; border-radius:11px;
  background:var(--warn-dim); border:1px solid #E5CC85; color:#8A6207;
  font-size:12px; line-height:1.5;
}
.pago-nota-tipo .ico{flex:none; width:15px; height:15px; margin-top:1px}

/* La pastilla de tarjeta se apaga mientras este elegido el pago total, y sale
   el motivo: un boton muerto sin explicacion genera una llamada. */
.pago-nota-medio{display:none}
.pago-caja:has(#tipo-total:checked):has(#medio-tarjeta:checked) .pago-nota-medio{display:block}
.pago-caja:has(#tipo-total:checked) label[for="medio-tarjeta"]{opacity:.45; cursor:not-allowed}
.segmentado.-medio input:disabled + label{cursor:not-allowed}
.segmentado.-medio input:disabled + label:hover{border-color:var(--line)}

/* Sellos de «Recomendado» */
.sello{
  display:inline-flex; align-items:center; gap:4px;
  margin-bottom:5px; padding:3px 8px; border-radius:99px;
  background:var(--accent); color:var(--accent-ink);
  font:700 9.5px var(--font-d); letter-spacing:.6px; text-transform:uppercase;
}
.sello.-ok{background:var(--ok); color:#fff; margin:0}
/* El salto va en un elemento aparte, no en el sello: poniendo flex-basis:100%
   al sello, el fondo verde se estiraba a todo el ancho de la pastilla. Asi
   salta de renglon y conserva su ancho de contenido. */
.salto-flex{flex-basis:100%; height:0; margin:0; padding:0}
.sello .ico{width:10px; height:10px; flex:none}
.pista-medio{font:500 10.5px var(--font-d); color:var(--muted); margin:0}
.segmentado.-medio label b{display:block; font-size:13px}

/* El argumento a favor de la transferencia, arriba de sus datos */
.pago-ventaja{
  display:flex; gap:9px; align-items:flex-start; margin:0;
  padding:11px 13px; border-radius:11px;
  background:var(--ok-dim); border:1px solid var(--ok-line);
  font-size:12.5px; line-height:1.55; color:#14603E;
}
.pago-ventaja .ico{flex:none; width:16px; height:16px; margin-top:1px; color:var(--ok)}

/* Y lo que hay que saber antes de pagar con tarjeta */
/* El aviso de la tarjeta va un punto por debajo del resto del cuadro: es
   informacion que hay que leer, pero no es el camino que se promueve. */
.pago-tarjeta-aviso{
  margin:0; padding:10px 12px; border-radius:11px;
  background:var(--warn-dim); border:1px solid #E5CC85; color:#8A6207;
  font-size:11.5px; line-height:1.5;
}
.pago-nota-medio{
  margin:8px 0 0; font-size:11.5px; line-height:1.5; color:#8A6207;
}

/* La nota del cobro con tarjeta: centrada y con candado, que es donde el socio
   busca la señal de que el pago es seguro. */
.pago-tarjeta-nota{
  display:flex; align-items:center; justify-content:center; gap:7px;
  text-align:center; font-size:11.5px; line-height:1.55; color:var(--muted); margin:0;
}
.pago-tarjeta-nota .ico{flex:none; width:15px; height:15px; opacity:.75}

/* El recordatorio de subir el comprobante, pegado al formulario */
.pago-aviso{
  margin:0; padding:10px 13px; border-radius:10px;
  background:var(--warn-dim); color:#8A6207; border:1px solid #E5CC85;
  font-size:12.5px; line-height:1.5;
}

/* En pantallas estrechas se apilan los dos selectores. El del medio tambien:
   con el sello de «Recomendado» al lado, «Transferencia» ya no cabe en media
   columna a 375px, y es una palabra que no se puede partir. */
@media (max-width: 430px){
  .segmentado{grid-template-columns:minmax(0, 1fr)}
  .segmentado.-medio label > .ico{width:18px; height:18px}
  /* A 375px el texto va justo: se aprieta lo que se puede para que quepa en una
     linea. Si aun asi parte, parte: dos lineas se leen bien y es preferible a
     recortar el texto del boton. */
  .pago-caja .rama.-tarjeta .btn{font-size:11px; padding:10px 8px; gap:6px; letter-spacing:0}
  .pago-caja .rama.-tarjeta .btn .ico{width:13px; height:13px}
  .segmentado.-medio label b{display:inline}
  .pista-medio{display:inline; margin:0}
}

/* ---------- aviso de que la venta todavia no abre ----------
   Sale entre la invitacion y la apertura: el socio ya entro pero aun no puede
   apartar. Ocupa el ancho para que no se lea como un detalle. */
.aviso-apertura{
  margin:0 0 14px; padding:13px 16px; border-radius:12px;
  background:var(--warn-dim); color:#8A6207; border:1px solid #E5CC85;
  font-size:13.5px; line-height:1.55;
}
.aviso-apertura b{color:#6E4E05}
/* En movil el aviso le come alto al plano, y el plano es lo que el socio vino a
   ver. Se aprieta lo justo: el aviso desaparece solo en cuanto abre la venta. */
@media (max-width: 720px){
  .aviso-apertura{margin:0 0 8px; padding:9px 12px; font-size:12.5px; line-height:1.4; border-radius:10px}
}

/* ===================================================================
   Registro publico de visitantes
   Publico distinto al del plano —gente que viene a mirar, no a vender—
   asi que la pagina respira mas: una sola columna, tipografia grande y
   el formulario partido en tres bloques con su titulo.
   =================================================================== */
.vis{max-width:660px}
.vis-cab{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:26px}
.vis-logo{height:32px; width:auto}
.vis-gratis{
  font:700 10.5px var(--font-d); letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ok); background:var(--ok-dim); border:1px solid var(--ok-line);
  border-radius:999px; padding:5px 12px;
}

.vis-hero{margin-bottom:24px}
.vis-hero h1{
  font:800 clamp(26px,5.2vw,36px)/1.12 var(--font-d); letter-spacing:-.6px;
  color:var(--text); margin:0 0 10px; text-wrap:balance;
}
.vis-cuando{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  font:600 14px var(--font-d); color:var(--accent); margin:0;
}
.vis-cuando .vis-sede{color:var(--muted); font-weight:500}

.vis-intro{margin-bottom:16px}
.vis-intro p{font-size:15px; line-height:1.6; color:var(--muted); margin:0}
.vis-lugares{
  margin-top:10px !important; font:600 13px var(--font-d); color:var(--muted);
}
.vis-lugares b{font-size:17px; color:var(--text); font-family:var(--font-m)}

/* ---- el formulario ---- */
.vis-form{padding:0; overflow:hidden}
.vis-bloque{padding:22px 22px 24px; border-bottom:1px solid var(--line-soft)}
.vis-bloque:last-child{border-bottom:0}
.vis-bloque h2{
  font:700 13px var(--font-d); letter-spacing:.8px; text-transform:uppercase;
  color:var(--faint); margin:0 0 16px;
}
.vis-bloque .field{margin-bottom:14px}
.vis-bloque .field:last-of-type{margin-bottom:0}
.vis-dos{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.vis-opc{
  font-weight:500; letter-spacing:0; text-transform:none;
  color:var(--faint); font-size:10.5px;
}
.vis-ayuda{font-size:13px; line-height:1.55; color:var(--muted); margin:-8px 0 16px}

/* ---- acompanantes ---- */
.vis-acomp{
  position:relative; border:1px solid var(--line); border-radius:12px;
  padding:16px 16px 14px; margin-bottom:12px; background:var(--surface2);
}
.vis-acomp legend{
  font:700 10.5px var(--font-d); letter-spacing:1px; text-transform:uppercase;
  color:var(--accent); padding:0 8px; margin-left:-4px;
}
.vis-quitar{
  position:absolute; top:12px; right:12px; background:none; border:0; cursor:pointer;
  font:600 11px var(--font-d); color:var(--faint); padding:4px 6px; border-radius:6px;
}
.vis-quitar:hover{color:var(--sold); background:var(--sold-dim)}
.vis-mas{width:100%; border-style:dashed; color:var(--accent); border-color:var(--accent)}
.vis-mas:hover{background:var(--warn-dim); border-color:var(--accent)}
.vis-mas span{font-size:15px; line-height:1; margin-right:2px}

/* ---- consentimiento y envio ---- */
.vis-bloque.-legal{background:var(--surface2)}
.vis-check{display:flex; gap:11px; align-items:flex-start; cursor:pointer; margin-bottom:18px}
.vis-check input{width:19px; height:19px; flex:0 0 19px; margin-top:1px; accent-color:var(--accent); cursor:pointer}
.vis-check span{font-size:13.5px; line-height:1.55; color:var(--text)}
.vis-check b{font-weight:700}
.vis-enviar{width:100%; padding:14px; font-size:14.5px; border-radius:12px}
.cf-turnstile{margin-bottom:16px}

/* ---- pantalla de gracias y registro cerrado ---- */
.vis-listo{text-align:center; padding:32px 24px}
.vis-palomita{color:var(--ok); margin-bottom:14px}
.vis-palomita svg{width:52px; height:52px}
.vis-listo h2{font:800 20px var(--font-d); color:var(--text); margin:0 0 10px; letter-spacing:-.3px}
.vis-listo p{font-size:14.5px; line-height:1.6; color:var(--muted); margin:0 auto; max-width:44ch}
.vis-siguiente{
  margin-top:16px !important; padding-top:16px; border-top:1px solid var(--line-soft);
  font-size:13px !important;
}
.vis-cerrado h2{font:700 16px var(--font-d); color:var(--text); margin-bottom:8px}
.vis-cerrado p{font-size:14px; line-height:1.6; color:var(--muted); margin:0}

.vis-pie{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:28px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--faint);
}

@media (max-width:560px){
  .vis-dos{grid-template-columns:1fr}
  .vis-bloque{padding:18px 16px 20px}
  .vis-listo{padding:26px 18px}
}

/* ---- Cena de gala ----
   La casilla de socio solo aparece cuando se compra el pase. Se hace con :has()
   y no con JavaScript: sin el, las dos quedan visibles y el formulario sigue
   funcionando, que es peor de ver pero no de usar. */
/* El precio va pegado a su casilla, no arriba del formulario: es lo que se
   necesita saber justo en el momento de decidir si se marca. Sangrado como la
   casilla de socio, para que se lea como parte de ese bloque. */
/* Pago de la cena en el registro: aparece solo si alguna casilla de cena
   esta marcada. Con :has() y no con JavaScript, como el resto del sitio:
   si algo fallara se ve el bloque entero, que no estorba, en vez de un
   formulario que no deja pagar. */
/* ===== Interruptor Si/No =====
   Una casilla de siempre, vestida de palanca: la casilla de verdad sigue ahi
   debajo (solo tapada), asi que tabula, se marca con la barra y el formulario
   la manda como cualquier checkbox. El color dice el estado para quien no
   distingue la posicion de la palanca. */
.interruptor{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  padding:14px; border:1px solid var(--line); border-radius:12px; background:#FBFCFD;
}
.interruptor:hover{border-color:#C9D4E0}
.interruptor input{position:absolute; opacity:0; width:0; height:0}
.interruptor-palanca{
  flex:0 0 auto; position:relative; width:46px; height:26px; margin-top:1px;
  border-radius:999px; background:#CBD5E1; transition:background .18s ease;
}
.interruptor-palanca::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(16,24,34,.3);
  transition:transform .18s ease;
}
.interruptor input:checked ~ .interruptor-palanca{background:var(--ok)}
.interruptor input:checked ~ .interruptor-palanca::after{transform:translateX(20px)}
/* El foco se ve en la palanca, que es lo que se esta mirando: la casilla de
   verdad esta tapada y su anillo no se veria. */
.interruptor input:focus-visible ~ .interruptor-palanca{outline:2px solid var(--accent); outline-offset:2px}
.interruptor-txt{display:block; line-height:1.5}
.interruptor-txt b{display:block; font-size:14px}
.interruptor-txt em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:3px}

/* ===== Tablero de asistencia (panel de WispMX y panel del expositor) =====
   Mismas cifras y mismas gráficas en los dos sitios: cambia lo que cada uno
   tiene derecho a ver, no la manera de leerlo. */
.tablero{
  --g-linea:#E4E9F0; --g-tenue:#8794A6; --g-barra:#FF901D; --g-tinta:#1B2A41;
  display:grid; gap:18px;
}
/* Tantas columnas como cifras haya, hasta cuatro: con tres, un hueco vacío
   a la derecha parecería que falta algo. */
.tablero .cifras{display:grid; grid-template-columns:repeat(var(--cifras, 4), 1fr); gap:10px}
.tablero .cifra{
  background:var(--surface2, #F4F6F9); border:1px solid var(--line, #E4E9F0);
  border-radius:12px; padding:14px 14px 12px;
}
.tablero .cifra b{display:block; font:700 26px/1.05 var(--font-m, monospace); color:var(--text, #1B2A41)}
.tablero .cifra span{display:block; font-size:12.5px; color:var(--muted, #5C6F8A); margin-top:4px}
.tablero .cifra em{display:block; font-style:normal; font-size:11.5px; color:var(--faint, #8794A6); margin-top:5px; line-height:1.4}
.tablero .cifra.-entro b{color:var(--ok, #0F6B44)}
.tablero .cifra.-cena b{color:var(--warn, #D97E06)}
.tablero .cifra.-mio b{color:var(--accent, #FF901D)}

.tablero .grafico-tit{
  font:700 12px var(--font-d); letter-spacing:.3px; text-transform:uppercase;
  color:var(--faint, #8794A6); margin:0 0 10px;
}

/* ---- ingresos por día: barras horizontales ---- */
.tablero .dias{display:grid; gap:8px}
.tablero .dia{
  display:grid; grid-template-columns:104px 1fr 56px; align-items:center; gap:12px;
  padding:9px 12px; border:1px solid var(--line, #E4E9F0); border-radius:11px;
  background:var(--surface, #fff); text-decoration:none; color:inherit;
}
a.dia:hover{border-color:var(--accent, #FF901D)}
.tablero .dia.-activo{border-color:var(--accent, #FF901D); background:#FFF8EC}
.tablero .dia-fecha{font-size:13px; font-weight:600; text-transform:capitalize}
.tablero .dia-barra{display:block; height:10px; border-radius:99px; background:var(--surface2, #F4F6F9); overflow:hidden}
.tablero .dia-barra i{display:block; height:100%; border-radius:99px; background:var(--g-barra)}
.tablero .dia-n{font:700 16px var(--font-m, monospace); text-align:right}
.tablero .dia-nota{
  grid-column:1 / -1; font-size:11.5px; color:var(--faint, #8794A6);
}
.tablero .dia.-mas .dia-barra i{background:linear-gradient(90deg, #FF901D, #FF6A00)}

/* ---- llegadas por hora ---- */
.tablero svg{display:block; width:100%; height:auto}

/* ---- últimos movimientos ---- */
.tablero .ultimos{display:grid}
.tablero .ultimo{
  display:flex; align-items:center; gap:12px; padding:9px 2px;
  border-bottom:1px solid var(--line-soft, #EEF1F6);
}
.tablero .ultimo:last-child{border-bottom:0}
.tablero .ultimo .hora{font:600 13px var(--font-m, monospace); color:var(--accent, #FF901D); flex:none}
.tablero .ultimo .quien{display:block; font-size:13.5px; font-weight:600; flex:1; min-width:0}
.tablero .ultimo .quien em{display:block; font-style:normal; font-size:12px; font-weight:400; color:var(--muted, #5C6F8A)}
.tablero .ultimo .quien em.-sin{color:var(--faint, #8794A6)}
.tablero .ultimo .marca-re{
  flex:none; font-size:11px; font-weight:600; color:var(--blue, #2C6FBE);
  background:#EAF1FA; border-radius:99px; padding:3px 9px;
}
.tablero .ultimo .marca-re.-salida{color:var(--muted, #5C6F8A); background:var(--surface2, #F4F6F9)}
.tablero-vacio{font-size:13px; color:var(--muted, #5C6F8A); text-align:center; padding:18px 0; margin:0}

@media (max-width:720px){
  .tablero .cifras{grid-template-columns:repeat(2, 1fr)}
  .tablero .dia{grid-template-columns:86px 1fr 46px; gap:9px}
  .tablero .cifra b{font-size:22px}
}

/* ===== Tour del panel del expositor =====
   El hueco se hace con una sombra enorme alrededor del recuadro: así lo que
   se señala queda iluminado y el resto oscurecido, sin recortes ni SVG. */
.tour-hueco{
  position:fixed; z-index:60; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(11,18,26,.74), 0 0 0 3px var(--brand, #FF901D);
  transition:top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
.tour-card{
  position:fixed; z-index:61; width:min(330px, calc(100vw - 28px));
  background:var(--surface, #fff); color:var(--text, #1B2A41);
  border-radius:14px; padding:16px 16px 14px; box-shadow:0 18px 40px rgba(11,18,26,.35);
}
.tour-card h3{font:700 15px var(--font-d); margin:0 0 6px}
.tour-card p{font-size:13.5px; line-height:1.55; color:var(--muted, #5C6F8A); margin:0}
.tour-pie{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px}
.tour-pasos{font-size:12px; color:var(--faint, #8794A6)}
.tour-botones{display:flex; gap:8px}
@media (max-width:480px){ .tour-card{width:calc(100vw - 24px)} }

.vis-cena-pago{display:none; margin:18px 0 4px; padding-top:16px; border-top:1px solid var(--line-soft)}
.vis-form:has(.cena-check:checked) .vis-cena-pago{display:block}
.vis-cena-pago h3{font:700 13px var(--font-d); letter-spacing:.4px; margin:0 0 10px; color:var(--text)}
.vis-cena-pago .segmentado{grid-template-columns:1fr 1fr; align-items:stretch}
.vis-cena-pago .segmentado.-medio input + label{padding:13px 12px; min-height:0}
/* El texto del boton: uno u otro, nunca los dos */
.vis-enviar .con-cena{display:none}
.vis-form:has(.cena-check:checked) .vis-enviar .sin-cena{display:none}
.vis-form:has(.cena-check:checked) .vis-enviar .con-cena{display:inline}
.vis-cena-aviso{
  margin:0 0 0 30px; padding:9px 12px; border-radius:9px;
  background:var(--warn-dim); border:1px solid #E5CC85;
  font-size:12.5px; line-height:1.5; color:var(--text);
}
.vis-cena-aviso b{font-family:var(--font-m); font-weight:600; color:#8A6207}

/* Telefono con codigo de pais: el selector estrecho y el numero manda. En
   pantalla chica se apilan, que un combo de 190 paises no cabe al lado. */
.tel{display:grid; grid-template-columns:minmax(96px, 34%) 1fr; gap:8px}
.tel-lada{
  min-width:0; padding:11px 8px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--text); font-size:13px;
}
.tel-numero{min-width:0}
@media (max-width:420px){ .tel{grid-template-columns:1fr} }

.vis-cena{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  display:grid; gap:10px;
}
.vis-check.-cena span,.vis-check.-socio span{font-size:13px}
.vis-check.-socio{margin-bottom:0; padding-left:30px}
.vis-cena .vis-check{margin-bottom:0}
/* La clase de socio: un desplegable que solo aparece si se compra el pase */
.vis-socio-tipo{margin:12px 0 0}
.vis-socio-tipo label{font-size:12.5px; font-weight:600; color:var(--muted); display:block; margin-bottom:5px}
.vis-cena:not(:has(.cena-check:checked)) .vis-socio-tipo{display:none}

/* Lo que va a pagar, renglon por renglon y con su total */
.vis-cuenta{
  margin:0 0 16px; padding:14px 16px; border-radius:11px;
  background:var(--surface2); border:1px solid var(--line-soft);
}
.vis-cuenta ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.vis-cuenta li{display:flex; justify-content:space-between; gap:14px; font-size:13.5px; color:var(--text)}
.vis-cuenta li span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vis-cuenta li b{font-family:var(--font-m); font-weight:600; flex:none}
.vis-cuenta-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line);
}
.vis-cuenta-total span{font-size:12.5px; color:var(--muted)}
.vis-cuenta-total b{font-family:var(--font-m); font-size:19px; font-weight:700; color:var(--text)}

/* El codigo de pais, buscable: la caja encima y la lista colgando */
.tel-buscable{position:relative; min-width:0}
.tel-buscable .tel-lada{width:100%}
.tel-opciones{
  position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; max-height:240px; overflow-y:auto;
  margin:0; padding:5px; list-style:none; border-radius:10px;
  background:var(--surface); border:1px solid var(--line); box-shadow:0 10px 28px rgba(16,24,34,.16);
}
.tel-opciones li{padding:8px 10px; border-radius:7px; font-size:13px; cursor:pointer; white-space:nowrap}
.tel-opciones li.-sobre,.tel-opciones li:hover{background:var(--raise)}
.tel-opciones li.-puesta{font-weight:700}
.tel-opciones li.-vacio{color:var(--faint); cursor:default}
.tel-opciones li.-vacio:hover{background:none}

/* ---- Aviso de privacidad y listado de participantes ----
   Texto largo para leerse de corrido: renglon corto, aire entre parrafos y
   numeracion visible, que es como se cita un aviso legal. */
.legal .vis-cab{border-bottom:0}
.legal-volver{font:600 12.5px var(--font-d); color:var(--muted)}
.legal-volver:hover{color:var(--accent)}
.legal-tipo{
  font:700 11px var(--font-d); letter-spacing:1.4px; text-transform:uppercase;
  color:var(--accent); margin:0 0 8px;
}
.legal-fecha{font:500 13px var(--font-d); color:var(--faint); margin:8px 0 0}
.legal-intro p{font-size:14.5px; line-height:1.65; color:var(--muted); margin:0 0 10px}
.legal-vivo{
  font-size:12.5px !important; color:var(--faint) !important;
  padding:10px 14px; background:var(--surface2); border-radius:10px;
  border:1px solid var(--line-soft);
}

.legal-doc{padding:26px 26px 30px; font-size:14.5px; line-height:1.7; color:var(--text)}
.legal-doc p{margin:0 0 14px; max-width:68ch}
.legal-doc h2{
  font:700 16px var(--font-d); color:var(--text); letter-spacing:-.2px;
  margin:30px 0 12px; padding-top:20px; border-top:1px solid var(--line-soft);
}
.legal-doc h2:first-of-type{margin-top:24px}
.legal-doc h3{font:700 14px var(--font-d); color:var(--text); margin:20px 0 10px}
.legal-doc ul,.legal-doc ol{margin:0 0 16px; padding-left:24px; max-width:68ch}
.legal-doc li{margin-bottom:7px}
.legal-doc ol{list-style:decimal}
.legal-doc ul{list-style:disc}
.legal-liga{
  padding:12px 14px; background:var(--surface2); border:1px solid var(--line);
  border-radius:10px; word-break:break-all; font-family:var(--font-m); font-size:13px;
}
.legal-contacto{
  padding:14px 16px; background:var(--surface2); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; line-height:1.8;
}
.legal-arco{margin:0 0 16px; max-width:68ch}
.legal-arco dt{font-weight:700; color:var(--accent); margin-top:12px}
.legal-arco dd{margin:2px 0 0}

.legal-lista{margin:0; padding-left:26px; columns:2; column-gap:32px}
.legal-lista li{margin-bottom:9px; break-inside:avoid; padding-left:4px}

@media (max-width:560px){
  .legal-doc{padding:20px 18px 24px; font-size:14px}
  .legal-lista{columns:1}
}
@media print{
  .vis-cab,.vis-pie,.legal-volver{display:none}
  .legal-doc{border:0; box-shadow:none; padding:0}
}

/* ===================================================================
   TALLERES (público)
   Se apoya en lo del registro de visitantes (.vis) y solo añade lo suyo:
   la ficha del taller y la página de folio donde se paga.
   =================================================================== */
.vis-gratis.-pago{color:var(--accent); background:var(--warn-dim); border-color:#E5CC85}
.tal-folio{
  font:600 12px var(--font-m); letter-spacing:.5px; color:var(--muted);
  background:var(--surface2); border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}
.tal-portada{
  width:100%; height:auto; max-height:280px; object-fit:cover;
  border-radius:14px; border:1px solid var(--line); margin-bottom:20px; display:block;
}
.tal-expositor{font:500 14.5px var(--font-d); color:var(--muted); margin:0}
.tal-expositor b{color:var(--text); font-weight:700}

/* Los datos duros en rejilla: se leen de un vistazo y no como párrafo */
.tal-datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; padding:20px 22px}
.tal-dato span{
  display:block; font:700 10px var(--font-d); letter-spacing:1.1px;
  text-transform:uppercase; color:var(--faint); margin-bottom:5px;
}
.tal-dato b{display:block; font:700 15.5px var(--font-d); color:var(--text); line-height:1.35}
.tal-dato b.-gratis{color:var(--ok)}
.tal-dato b.-lleno{color:var(--sold)}
.tal-dato em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:3px}
/* El domicilio ocupa el ancho entero de la tarjeta: en una columna de 150px
   una direccion con calle, colonia y CP se parte en seis lineas. */
.tal-dato.-donde{grid-column:1 / -1}
.tal-dato.-donde b{font-weight:600; line-height:1.5}

.tal-desc{font-size:14.5px; line-height:1.65; color:var(--muted)}
.tal-desc h2{font:700 13px var(--font-d); letter-spacing:.8px; text-transform:uppercase; color:var(--faint); margin:0 0 12px}

.tal-socio{margin-top:4px; padding-top:0; border-top:0}
.tal-pago-externo{
  padding:12px 14px; border-radius:10px; background:var(--surface2);
  border-left:3px solid var(--accent); font-size:13.5px; line-height:1.6; color:var(--text); margin:0 0 10px;
}

/* ---- página de la inscripción ---- */
.tal-estado-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.tal-monto{font:700 20px var(--font-m); color:var(--text)}
.tal-quien{font-size:14px; line-height:1.6; color:var(--text); margin:0}
.tal-nota{
  margin:14px 0 0; padding:12px 14px; border-radius:10px;
  background:var(--surface2); border:1px solid var(--line-soft);
  font-size:13.5px; line-height:1.6; color:var(--muted);
}
.tal-nota b{color:var(--text)}
.tal-nota.-ok{background:var(--ok-dim); border-color:var(--ok-line); color:#0F6B41}
.tal-nota.-error{background:var(--sold-dim); border-color:var(--sold-line); color:var(--sold)}
.tal-nota + form{margin-top:12px}
.tal-tarjeta{margin-bottom:6px; display:grid; gap:10px; justify-items:center}
/* El de la tarjeta es la unica accion de su rama: a todo el ancho y con el
   texto centrado, como en la reserva de un stand (alla lo hace .pago-caja, que
   aqui no existe, y el boton se quedaba pegado a la izquierda). */
.tal-rama.-tarjeta .btn{width:100%; justify-content:center; padding:13px; border-radius:11px; font-size:13.5px}

/* Estados propios de las inscripciones a talleres */
.badge.-comprobante,.badge.-tarjeta{background:#E3EDFB; color:var(--blue)}
.badge.-externo{background:var(--warn-dim); color:var(--warn)}

@media (max-width:560px){
  .tal-datos{grid-template-columns:1fr 1fr; padding:16px}
  .tal-portada{max-height:190px}
}

/* ---- ficha del taller: encabezado, precio y ramas de pago ---- */
/* El salto al formulario, suave y solo en las paginas de taller */
@media (prefers-reduced-motion: no-preference){
  html:has(.tal){scroll-behavior:smooth}
  /* Lo mismo en los pases del stand: el boton «Pagar» de cada renglon lleva
     al cobro, que esta debajo de una tabla que puede ser larga. Si el salto
     fuera seco, no se nota que la pagina se movio. */
  html:has(.tal-pago){scroll-behavior:smooth}
}
/* Y el destino no queda pegado al borde de arriba */
.tal-pago{scroll-margin-top:16px}
.tal-hero{display:flex; justify-content:space-between; align-items:flex-start; gap:16px 20px; flex-wrap:wrap}
.tal-hero > div{min-width:0; flex:1 1 300px}
.tal-cta{flex:none; padding:12px 22px; border-radius:11px; font-size:14px; font-weight:700; text-decoration:none}
/* El precio de socio es la ventaja: se pinta con el color de acento */
.tal-dato em.-socio{color:var(--accent); font-weight:600}

/* Que rama de pago se ve. La de transferencia es la de a diario y se queda
   puesta; la de tarjeta solo aparece al pedirla. Las reglas cuelgan de
   «-elige», que solo se pone cuando de verdad hay dos medios: con uno solo no
   hay nada que ocultar y su rama tiene que verse sin depender de :has(). */
/* Las dos pastillas, iguales: aqui no hay una via principal y otra de
   respaldo como en la reserva de un stand, son dos formas de pagar lo mismo.
   (La regla general hace la primera mucho mas alta; se deshace solo aqui.) */
.tal-pago .segmentado{grid-template-columns:1fr 1fr; align-items:stretch}
.tal-pago .segmentado.-medio input + label{padding:14px 12px; min-height:0}

/* Fuera del cuadro de la reserva, el formulario del comprobante necesita su
   propia rejilla y aire: antes se lo daba el parrafo que iba en medio. */
.tal-rama .pago-form{display:grid; gap:13px; margin-top:16px}

/* Que rama se ve, por el VALOR del radio y no por su id: el mismo bloque de
   pago se usa en la ficha del taller y en el pase, y atado a «#tal-tarjeta»
   la pastilla de la cena no hacia nada al pulsarla. */
.tal-pago.-elige .tal-rama.-tarjeta{display:none}
/* Por el valor del radio y no por su id: el mismo bloque de pago lo usan la
   inscripcion al taller, el formulario del taller y la cena del pase, y cada
   uno nombra sus radios a su manera. Atado a #tal-tarjeta, la pastilla de
   tarjeta de la cena no hacia nada. */
.tal-pago.-elige:has(input[value="tarjeta"]:checked) .tal-rama.-tarjeta{display:block}
.tal-pago.-elige:has(input[value="tarjeta"]:checked) .tal-rama.-transferencia{display:none}

@media (max-width:560px){
  .tal-cta{width:100%; justify-content:center}
}
/* La transferencia, en verde tambien aqui (la regla original va por id) */
.segmentado.-medio input#tal-transferencia:checked + label > .ico{color:var(--ok)}

/* ===================================================================
   PASE DEL VISITANTE
   Se ensenia en la puerta desde el telefono: el QR grande y el folio
   legible mandan sobre todo lo demas.
   =================================================================== */
.pase{padding:0; overflow:hidden; text-align:center}
.pase-cab{
  padding:16px 20px; background:var(--surface2); border-bottom:1px solid var(--line-soft);
}
.pase-cab b{display:block; font:700 15px var(--font-d); color:var(--text); line-height:1.35}
.pase-cab span{display:block; font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5}

.pase-datos{display:grid; gap:14px; padding:22px 20px 6px; text-align:left}
.pase-datos > div span{
  display:block; font:700 9.5px var(--font-d); letter-spacing:1.1px;
  text-transform:uppercase; color:var(--faint); margin-bottom:3px;
}
.pase-datos > div b{font:700 18px var(--font-d); color:var(--text); line-height:1.3}
.pase-folio{font-family:var(--font-m) !important; letter-spacing:1px; color:var(--accent) !important}

/* «Stand Staff» encima del QR: el pase de quien atiende un stand es igual que
   el de un visitante y en la puerta hay que distinguirlos de un vistazo. */
.pase-tipo{
  margin:14px 20px 0; padding:7px 0; text-align:center;
  font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); background:#EAF2FB; border:1px solid #C6DCF4; border-radius:9px;
}
.pase-qr{padding:18px 20px 6px}
.pase-qr img{
  display:block; margin:0 auto; width:230px; height:230px; max-width:100%;
  image-rendering:pixelated; border:1px solid var(--line-soft); border-radius:10px; padding:8px;
  background:#fff;
}

.pase-sellos{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:14px 20px 22px}
.pase-sello{
  font:700 10px var(--font-d); letter-spacing:1px; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:var(--raise); color:var(--muted);
}
.pase-sello.-ok{background:var(--ok-dim); color:var(--ok); border:1px solid var(--ok-line)}
.pase-nota{
  margin:0; padding:12px 20px 18px; font-size:13px; line-height:1.55; color:var(--muted);
  border-top:1px solid var(--line-soft);
}
.pase-nota.-ok{color:var(--ok)}

.pase-acciones{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 22px}
.pase-acciones .btn{flex:1 1 200px; justify-content:center; padding:13px; border-radius:11px}
.pase-acciones form{display:contents}

@media print{
  .vis-cab,.vis-pie,.pase-acciones,.card:not(.pase){display:none !important}
  .pase{border:1px solid #999}
}

/* ---- Zona del expositor ---- */
.exp-yo{display:flex; align-items:center; gap:12px}
.exp-yo b{font:700 14px var(--font-d); color:var(--text)}
.exp-cifras{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px; margin-bottom:20px;
}
.exp-cifra{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
}
.exp-cifra b{display:block; font:700 27px var(--font-d); line-height:1.1; color:var(--text)}
.exp-cifra span{display:block; font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.4}
.exp-cifra.-mio{border-color:var(--accent); background:#FFF8EC}
.exp-cifra.-mio b{color:var(--accent)}

/* ---- «ese correo ya tiene su pase», con el reenvio a la mano ---- */
.vis-yaesta{border-left:4px solid var(--accent)}
.vis-yaesta h2{margin:0 0 8px; font-size:17px}
.vis-yaesta p{margin:0 0 14px; font-size:13.5px; line-height:1.65; color:var(--muted)}
.vis-yaesta form{margin:0}
.vis-yaesta .btn{width:100%; justify-content:center; padding:13px}
@media (min-width:560px){ .vis-yaesta .btn{width:auto; min-width:260px} }