@charset "UTF-8";
/* =====================================================================
   MAPA DE LA SEDE · ESTILOS DEL MAPA (venue-map.js)
   En el lenguaje del XXXVII Congreso: papel, tinta Azul, Oro y Rojo de sello,
   Crimson Pro. Mismas reglas que styles.css: sin degradados, sin sombras,
   sin blanco. Todo vive dentro de [data-venue-map], así que no cambia el resto
   de la página donde se inserte.

   AJUSTES: cambia estos valores para re-estilizar el panel, los botones,
   la ficha flotante y el marco. Los colores del DIBUJO (muros, salones,
   ruta, árboles) se cambian al inicio de venue-map.js (TINTA, PAPER, MURO, C)
   y por tipo de zona en venue-map-data.js ("tipos" y "tiposStand").
   ===================================================================== */
[data-venue-map] {
  /* Colores */
  --paper: #F8EFE1;                    /* Papel: fondo */
  --ink: #18355F;                      /* Azul: textos, bordes, botones */
  --deep: #102442;                     /* Azul profundo: botón al pasar el mouse */
  --gold: #EFAF21;                     /* Oro: filete del marco */
  --accent: #CB3227;                   /* Rojo: pestaña activa, selección, avisos */
  --line: rgba(24, 53, 95, .18);       /* líneas finas y separadores */
  --line-strong: rgba(24, 53, 95, .38);
  --card: #F1E5D1;                     /* fondo de tarjetas y filas al pasar el mouse */
  --muted: #465D7F;                    /* texto secundario */
  /* Tipografía */
  --display: "Crimson Pro", Georgia, "Times New Roman", serif;   /* títulos y nombres */
  --body: "Crimson Pro", Georgia, "Times New Roman", serif;      /* texto */
  /* Movimiento */
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Grosores */
  --rule: 1.5px;                       /* líneas del panel y del marco */
}

/* Contenedor */
[data-venue-map]{box-sizing:border-box;max-width:1520px;margin:0 auto;background:var(--paper);color:var(--ink);font:17px/1.5 var(--body);font-variant-numeric:lining-nums}
[data-venue-map] *,[data-venue-map] *::before,[data-venue-map] *::after{box-sizing:border-box}
[data-venue-map] button,[data-venue-map] input,[data-venue-map] select{font:inherit}
[data-venue-map] .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Rótulo, pestañas y botón, como en el sitio del Congreso */
[data-venue-map] .kicker{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;margin:0 0 6px;color:var(--accent)}
[data-venue-map] .tablist{display:flex;gap:0 26px;border-bottom:var(--rule) solid var(--ink)}
[data-venue-map] .tablist[hidden]{display:none}
[data-venue-map] .tab{appearance:none;position:relative;background:transparent;border:0;border-bottom:4px solid transparent;margin:0 0 -1.5px;padding:10px 0 8px;color:inherit;opacity:.7;cursor:pointer;text-align:left;font:700 22px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;min-width:0}
[data-venue-map] .tab:hover{opacity:1}
[data-venue-map] .tab:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
[data-venue-map] .button{display:inline-flex;justify-content:center;align-items:center;gap:12px;background:var(--ink);color:var(--paper);padding:13px 20px;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;border:var(--rule) solid var(--ink);border-radius:2px;min-height:48px;cursor:pointer}
[data-venue-map] .button.small{padding:10px 16px}
[data-venue-map] .button:hover{background:var(--accent);border-color:var(--accent)}
[data-venue-map] .button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){[data-venue-map] .button,[data-venue-map] .tab{transition:background-color .28s var(--ease),border-color .28s var(--ease),opacity .28s var(--ease)}}

/* ---------- Venue map (venue-map.js): attendee plan of the CEVP, floors 1 and 2 ---------- */

.venue-plan[hidden]{display:none}
.vm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap;margin-bottom:22px}
.vm-head-copy{max-width:640px}
.vm-title{font:700 clamp(28px,3.2vw,42px)/1.04 var(--display);letter-spacing:.015em;text-transform:uppercase;text-wrap:balance;margin:0 0 8px}
.vm-intro{margin:0;font-size:17px;color:var(--muted);font-style:italic}
/* Floor switch reuses the site's tab bar. */
.vm-floors.tablist{margin:0;gap:0 30px;flex:none}
.vm-floors .tab{font-size:22px}
.vm-floors .tab[aria-pressed=true]{opacity:1;border-bottom-color:var(--accent)}
.vm-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
/* Marco como las piezas impresas del Congreso: filete Azul y, afuera, un filete Oro. */
.vm-frame{position:relative;border:var(--rule) solid var(--ink);outline:1px solid var(--gold);outline-offset:4px;margin:5px;overflow:hidden;background:var(--paper)}
.vm-canvas{width:100%;aspect-ratio:1660/1520;max-height:min(83vh,910px);min-height:330px;touch-action:pan-y;cursor:grab;display:block;overflow:hidden}
.vm-canvas.is-dragging{cursor:grabbing}
.vm-canvas svg{width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.vm-zone{cursor:pointer;outline:none}
.vm-zone>:first-child{transition:opacity .28s var(--ease),stroke-width .28s var(--ease)}
.vm-zone:hover>:first-child{opacity:.82}
.vm-zone:focus-visible>:first-child,.vm-zone.is-selected>:first-child{stroke:var(--accent)!important;stroke-width:5!important;stroke-dasharray:none!important}
/* Rojo never sits on Azul: a solid zone is marked with a Papel rule instead (an Oro one on Oro). */
.vm-zone.vm-solid:focus-visible>:first-child,.vm-zone.vm-solid.is-selected>:first-child{stroke:var(--paper)!important}
.vm-stand.is-selected>:first-child{stroke-width:1.5!important}
.vm-ping{transform-box:fill-box;transform-origin:center}
.vm-zoom{position:absolute;right:14px;bottom:14px;display:grid;gap:8px;z-index:2}
.vm-zoom button{width:44px;height:44px;border-radius:2px;border:var(--rule) solid var(--ink);background:var(--paper);color:var(--ink);font:600 24px/1 var(--body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.vm-zoom button:focus-visible,.vm-badge-floors button:focus-visible,.vm-list button:focus-visible,.vm-search input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.vm-zoom button:hover{background:var(--ink);color:var(--paper)}
.vm-tip{position:absolute;left:14px;bottom:14px;margin:0;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);padding:5px 10px;border-radius:2px;pointer-events:none;max-width:calc(100% - 90px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vm-side{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;min-width:0}
.vm-block{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
/* Panel headings like the site's eyebrows: small tracked capitals on a double Azul rule. */
.vm-label{margin:0;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:3px double var(--ink);padding-bottom:8px}
.vm-card{border:1.5px dashed var(--line-strong);padding:16px 18px;min-height:104px;display:grid;align-content:center;gap:4px}
.vm-card.is-filled{background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);outline:1px solid var(--gold);outline-offset:-6px}
.vm-card h4{margin:0;font:700 28px/1.05 var(--display);letter-spacing:.02em;text-transform:uppercase}
.vm-card p{margin:0}
.vm-card-type{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.vm-card-detail{font-size:16.5px}
.vm-card-empty{font-size:16.5px;color:var(--muted);font-style:italic}
.vm-search{display:flex;gap:8px}
.vm-search input{flex:1;min-width:0;border:var(--rule) solid var(--line-strong);background:var(--paper);color:var(--ink);border-radius:2px;padding:10px 12px;min-height:48px;font:inherit;font-size:17px}
.vm-search .button{min-height:48px;padding-inline:14px;flex:none}
.vm-search-msg{margin:0;font-size:15px;color:var(--accent)}
.vm-search-msg:empty{display:none}
.vm-legend,.vm-stand-legend,.vm-list{list-style:none;margin:0;padding:0}
.vm-legend,.vm-stand-legend{display:grid;gap:8px}
.vm-legend li,.vm-stand-legend li{display:flex;align-items:center;gap:12px;font-size:16.5px;line-height:1.3}
.vm-stand-legend b{font:600 18px/1 var(--display);margin-right:2px}
.vm-swatch,.vm-dot{flex:none;display:block}
.vm-note,.vm-source{margin:0;font-size:15px;color:var(--muted);font-style:italic}
.vm-source{margin-top:18px}
.vm-list{display:grid;max-height:340px;overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.vm-list li{border-bottom:1px solid var(--line)}
.vm-list button{width:100%;display:grid;grid-template-columns:12px 1fr;column-gap:12px;align-items:center;text-align:left;background:none;border:0;padding:8px 8px;font:inherit;font-size:16.5px;line-height:1.25;color:var(--ink);cursor:pointer}
.vm-list button:hover{background:var(--card)}
.vm-list button.is-active{background:var(--ink);color:var(--paper)}
.vm-list-name{font-weight:600}
.vm-list-detail{grid-column:2;font-size:14.5px;opacity:.8;font-style:italic}
.venue-plan.is-floor-2 .vm-floor1-only{display:none}
@media(max-width:1000px){.vm-body{grid-template-columns:1fr}.vm-canvas{max-height:none}.vm-list{max-height:none}.vm-side{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}}
@media(max-width:760px){.vm-canvas{aspect-ratio:1/1.12}.vm-side{grid-template-columns:1fr}.vm-zoom{right:10px;bottom:10px;gap:8px}.vm-floors .tab{font-size:22px}.vm-badge{top:10px;left:10px}}
@media(prefers-reduced-motion:no-preference){.vm-ping{animation:vm-ping 1.8s var(--ease) 3}.vm-list button,.vm-card{transition:background-color .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease)}}
/* In-map floor switch: always says which floor is on screen. */
.vm-badge{position:absolute;top:14px;left:14px;z-index:2;display:grid;justify-items:start;gap:6px;pointer-events:none}
.vm-badge-floors{display:inline-flex;border:var(--rule) solid var(--ink);border-radius:2px;background:var(--paper);padding:3px;gap:3px;pointer-events:auto}
.vm-badge-floors button{appearance:none;border:0;border-radius:1px;background:transparent;color:var(--ink);font:700 15px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;min-height:38px;cursor:pointer}
.vm-badge-floors button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.vm-badge-note{display:none;margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:2px;padding:4px 9px}
.venue-plan.is-floor-2 .vm-badge-note{display:block}
.vm-full{background:var(--ink)!important;color:var(--paper)!important;box-shadow:inset 0 0 0 2px var(--gold)}
.vm-full:hover{background:var(--deep)!important}
.vm-full .vm-ico-close,.vm-frame.is-full .vm-full .vm-ico-open{display:none}
.vm-frame.is-full .vm-full .vm-ico-close{display:block}
.vm-zoom-reset svg,.vm-full svg{display:block}
.vm-tip-touch{display:none}
@media(hover:none) and (pointer:coarse){.vm-tip-mouse{display:none}.vm-tip-touch{display:inline}}
/* Selection strip on the map itself, for phones and full screen where the side card is out of sight. */
.vm-peek{display:none;position:absolute;left:14px;right:72px;bottom:14px;z-index:2;margin:0;background:var(--ink);color:var(--paper);border-radius:2px;outline:1px solid var(--gold);outline-offset:-4px;padding:10px 14px;gap:2px;pointer-events:none}
.vm-peek strong{font:700 21px/1.05 var(--display);letter-spacing:.02em;text-transform:uppercase}
.vm-peek span{font-size:15px}
.vm-peek .vm-peek-type{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
@media(max-width:1000px){.vm-peek:not([hidden]){display:grid}.vm-peek:not([hidden])~.vm-tip{display:none}}
/* Full screen: one finger moves the map, two fingers zoom; the page underneath stays still. */
html.vm-lock,html.vm-lock body{overflow:hidden}
.vm-frame.is-full{position:fixed;inset:0;z-index:400;border:0;outline:0;margin:0;border-radius:0;background:var(--paper)}
.vm-frame.is-full .vm-canvas{height:100vh;height:100dvh;max-height:none;min-height:0;aspect-ratio:auto;touch-action:none}
.vm-frame.is-full .vm-peek:not([hidden]){display:grid}
.vm-frame.is-full .vm-tip{display:none}
.vm-frame.is-full .vm-zoom{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
.vm-frame.is-full .vm-badge{top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left))}
.vm-frame.is-full .vm-peek{left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom))}
/* Zone list: collapsed by default under the key. */
.vm-zones summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.vm-zones summary::-webkit-details-marker{display:none}
.vm-zones summary::after{content:"+";font:500 18px/1 var(--body);letter-spacing:0}
.vm-zones[open] summary::after{content:"−"}
.vm-zones summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.vm-search+.vm-search-msg+.vm-note{margin-top:-2px}
/* Hover card: what a zone or stand is, beside the pointer (venue-map.js). */
.vm-lens{position:absolute;left:0;top:0;z-index:3;width:300px;pointer-events:none;background:var(--paper);border:var(--rule) solid var(--ink);border-bottom:5px solid var(--gold);border-radius:2px;overflow:hidden;opacity:0;visibility:hidden}
.vm-lens.is-on{opacity:1;visibility:visible}
.vm-lens-logo{display:none}
.vm-lens.has-logo .vm-lens-logo{display:flex;align-items:center;justify-content:center;height:120px;margin:12px 12px 0;border:1px solid var(--line);border-radius:2px;background:var(--card)}
.vm-lens.is-pending .vm-lens-logo{border-style:dashed;background:transparent}
.vm-lens-logo img{max-width:86%;max-height:96px;object-fit:contain}
.vm-lens-logo span{font:700 32px/1 var(--display);letter-spacing:2px;color:var(--ink)}
.vm-lens-body{padding:14px 16px 15px}
.vm-lens-type{margin:0 0 5px;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vm-lens-type b{font-weight:700}
.vm-lens-chip{width:10px;height:10px;border-radius:2px;background:var(--vm-tone,var(--ink));flex:none}
.vm-lens-name{margin:0 0 10px;font:700 25px/1.05 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.vm-lens.is-pending .vm-lens-name{color:var(--muted)}
.vm-lens-facts{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--line);display:grid;gap:5px;font-size:16px;line-height:1.35;color:var(--ink)}
@media(hover:none){.vm-lens{display:none}}
@media(prefers-reduced-motion:no-preference){.vm-lens{transition:opacity .2s var(--ease),visibility .2s var(--ease)}}
@keyframes vm-ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
/* Selected solid zones: a Papel rule (an Azul one on Oro, where Papel does not read). */
.vm-zone.vm-solid.vm-oro:focus-visible>:first-child,.vm-zone.vm-solid.vm-oro.is-selected>:first-child{stroke:var(--ink)!important}
.vm-canvas svg text{font-variant-numeric:lining-nums}

/* ---------- En el sitio del Congreso (mapa/index.html) ----------
   html.mapa-incrustado: dentro del diálogo del botón «Mapa» o de la página Industria.
   html.mapa-cooperativo: solo en Industria; la rueda y un dedo mueven la página. */
html:not(.mapa-cooperativo) .vm-canvas{touch-action:none}
.mapa-incrustado .vm-head{display:none}
.mapa-incrustado .venue-plan{padding:14px}
.mapa-incrustado .vm-canvas{max-height:calc(100vh - 42px);max-height:calc(100dvh - 42px)}
.mapa-cooperativo .vm-tip-touch{display:none}
@media(hover:none) and (pointer:coarse){.mapa-cooperativo .vm-tip-mouse{display:inline}}
