/* La maqueta navegable · mismo mundo que la web: cristal blanco, tinta ciruela, pastel y curvas suaves */
:root {
  --ink: #2B2440; --ink-2: #4F4866; --ink-3: #7A7392;
  --coral: #FF7A59; --lila: #8E6CFF; --menta: #2FC595; --sol: #FFC543; --azul: #3A63FF;
  --lila-osc: #6F4FE6; --menta-osc: #1E9A72; --sol-osc: #A87400; --coral-osc: #D9512F;
  --vidrio: rgba(255, 255, 255, .84); --borde: rgba(255, 255, 255, .95);
  --sombra: 0 24px 50px -24px rgba(43, 36, 64, .45), 0 2px 6px rgba(43, 36, 64, .06);
  --sombra-chip: 0 10px 22px -12px rgba(43, 36, 64, .55);
  --curva: cubic-bezier(.23, 1, .32, 1);
  --curva-io: cubic-bezier(.65, 0, .35, 1);
  --display: "M PLUS Rounded 1c", system-ui, sans-serif; --body: Onest, system-ui, sans-serif; --mono: "Fragment Mono", ui-monospace, monospace;
  --margen: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #F6E9F0; color: var(--ink); font: 400 15px/1.45 var(--body); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2.5px solid var(--lila); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.maqueta { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#taller { position: fixed; left: -3000px; top: 0; width: 160px; }
.maqueta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 60%, rgba(60, 40, 100, .16)); }
code { font: .86em var(--mono); padding: 1px 6px; border-radius: 6px; background: rgba(142, 108, 255, .14); color: #5B3FD6; }
.vidrio, .mq-marca, .mq-panel, .mq-guia, .mq-ficha, .mq-vistas { background: var(--vidrio); border: 1px solid var(--borde); box-shadow: var(--sombra); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }

/* cabecera: marca, etiqueta de simulación y pantalla completa */
.mq-cabecera { position: absolute; left: var(--margen); top: 16px; right: calc(340px + var(--margen) * 2); z-index: 6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.mq-cabecera > * { pointer-events: auto; }
.mq-marca { display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; border-radius: 999px; }
.mq-marca img { display: block; }
.mq-marca span { font: 800 1.15rem/1 var(--display); letter-spacing: -0.03em; }
.mq-marca b { font-weight: 500; color: var(--lila-osc); margin-left: .04em; }
.mq-marca em { font-style: normal; font: 600 .78rem/1 var(--body); color: var(--ink-3); padding-left: 9px; border-left: 1px solid rgba(43, 36, 64, .12); }
body.embebida .mq-marca em { display: none; }
.mq-simulada { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border-radius: 999px; background: rgba(43, 36, 64, .86); color: #fff; font: 600 .78rem/1.25 var(--body); box-shadow: var(--sombra-chip); max-width: 100%; }
.mq-simulada i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sol); box-shadow: 0 0 0 3px rgba(255, 197, 67, .25); }
.mq-pantalla { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--borde); background: var(--vidrio); box-shadow: var(--sombra-chip); display: grid; place-items: center; cursor: pointer; transition: transform 160ms var(--curva); }
.mq-pantalla[hidden] { display: none; }
.mq-pantalla svg { width: 18px; height: 18px; }
.mq-pantalla:active { transform: scale(.94); }
@keyframes gira { to { transform: rotate(360deg); } }

/* panel: reunión, acta y registro */
.mq-panel { position: absolute; right: var(--margen); top: 16px; bottom: 84px; z-index: 6; width: min(340px, calc(100% - 32px)); display: flex; flex-direction: column; border-radius: 26px; transition: transform 600ms var(--curva), bottom 500ms var(--curva); }
body.en-visita .mq-panel { bottom: 16px; }
.mq-panel-cuerpo { display: flex; flex-direction: column; gap: 11px; padding: 20px 20px 16px; min-height: 0; flex: 1; overflow: hidden; }
.mq-plegar { position: absolute; left: -14px; top: 22px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--borde); background: #fff; box-shadow: 0 6px 14px -6px rgba(43, 36, 64, .4); cursor: pointer; display: grid; place-items: center; z-index: 1; transition: left 500ms var(--curva), background-color 300ms ease; }
.mq-plegar i { width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); rotate: -45deg; translate: -1px 0; transition: rotate 400ms var(--curva); }
.mq-panel.plegado { transform: translateX(calc(100% + 16px)); }
.mq-panel.plegado .mq-plegar { left: -46px; }
.mq-panel.plegado .mq-plegar i { rotate: 135deg; translate: 1px 0; }
.mq-panel.plegado.aviso .mq-plegar { background: var(--sol); animation: late 1.2s ease-in-out infinite; }
.mq-panel.recibe { animation: recibe 700ms var(--curva); }
.mq-panel.plegado.recibe { animation: none; }
.mq-panel.plegado.recibe .mq-plegar { animation: recibe 700ms var(--curva); }
@keyframes recibe { 40% { box-shadow: 0 0 0 5px rgba(142, 108, 255, .35), var(--sombra); } }
@keyframes late { 50% { box-shadow: 0 0 0 10px rgba(255, 197, 67, 0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 197, 67, .6); } }
.mq-etiqueta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 .74rem/1 var(--body); letter-spacing: .02em; }
.punto-vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--menta); }
.mq-panel.reunido .punto-vivo { background: #FF6B6B; box-shadow: 0 0 0 0 rgba(255, 107, 107, .7); animation: vivo 1.6s ease-out infinite; }
@keyframes vivo { to { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); } }
.mq-tema { margin: 0; font: 800 1.2rem/1.2 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.mq-asistentes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mq-asistentes:empty { display: none; }
.mq-asistentes li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, #fff); font: 600 .8rem/1 var(--body); animation: entra 500ms var(--curva) both; }
.mq-asistentes li:nth-child(2) { animation-delay: 60ms; } .mq-asistentes li:nth-child(3) { animation-delay: 120ms; } .mq-asistentes li:nth-child(4) { animation-delay: 180ms; }
.mq-asistentes li i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.mq-asistentes small { font-weight: 500; color: var(--ink-3); }
.mq-presu { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-size: .8rem; color: var(--ink-3); }
.mq-presu[hidden] { display: none; }
.mq-presu b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mq-medidor { position: relative; grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(43, 36, 64, .08); overflow: hidden; }
.mq-medidor i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--menta), var(--sol) 70%, var(--coral)); transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--curva); }
.mq-medidor u { position: absolute; left: 80%; top: 0; bottom: 0; width: 2px; background: rgba(43, 36, 64, .35); }
.mq-presu.alerta b { color: var(--coral-osc); }
.mq-pestanas { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(43, 36, 64, .06); align-self: flex-start; }
.mq-pestanas button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font: 600 .8rem/1 var(--body); color: var(--ink-3); cursor: pointer; transition: background-color 250ms ease, color 250ms ease; }
.mq-pestanas button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -2px rgba(43, 36, 64, .25); }
.mq-pestanas small { display: inline-block; min-width: 18px; margin-left: 3px; padding: 2px 5px; border-radius: 99px; background: rgba(142, 108, 255, .16); color: var(--lila-osc); font: 600 .68rem/1 var(--mono); }
.mq-acta, .mq-registro { list-style: none; margin: 0; padding: 12px 14px; border-radius: 18px; background: #fff; flex: 1; min-height: 110px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; box-shadow: inset 0 0 0 1px rgba(43, 36, 64, .05); }
.mq-acta[hidden], .mq-registro[hidden] { display: none; }
.mq-acta { font-size: .84rem; color: var(--ink-2); }
.mq-acta li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; animation: entra 500ms var(--curva) both; }
.mq-acta time, .mq-registro time { font: .72rem/1.9 var(--mono); color: var(--ink-3); }
.mq-acta b { color: var(--ink); font-weight: 700; margin-right: 4px; }
.mq-acta .preg span { color: var(--sol-osc); } .mq-acta .resp span { color: var(--menta-osc); } .mq-acta .acta span { color: var(--lila-osc); }
.mq-acta li:not(:last-child), .mq-registro li:not(:last-child) { opacity: .72; }
.mq-registro { gap: 5px; font: .74rem/1.45 var(--mono); color: var(--ink-2); }
.mq-registro li { animation: entra 450ms var(--curva) both; overflow-wrap: anywhere; }
.mq-registro time { margin-right: 6px; }
.mq-registro b { font-weight: 400; color: var(--lila-osc); }
.mq-registro .mal b { color: var(--coral-osc); } .mq-registro .bien b { color: var(--menta-osc); } .mq-registro .preg b, .mq-registro .resp b { color: var(--sol-osc); } .mq-registro .acta b { color: var(--ink); font-weight: 700; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.mq-pregunta { position: relative; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--sol) 30%, #fff); box-shadow: 0 0 0 2px var(--sol); overflow: hidden; animation: entra 500ms var(--curva) both; }
.mq-pregunta[hidden] { display: none; }
.mq-pregunta p { margin: 0 0 10px; font-weight: 600; }
.mq-opciones, .mq-guia-extra.opciones { display: grid; gap: 6px; }
.mq-opciones button, .mq-guia-extra.opciones button { border: 0; border-radius: 14px; padding: 10px 14px; background: var(--ink); color: #fff; font: 600 .88rem/1.2 var(--body); text-align: left; cursor: pointer; transition: transform 160ms var(--curva), background-color 200ms ease; }
.mq-opciones button:nth-child(2), .mq-guia-extra.opciones button:nth-child(2) { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(43, 36, 64, .18); }
.mq-opciones button:active, .mq-guia-extra.opciones button:active { transform: scale(.97); }
@media (hover: hover) { .mq-opciones button:hover, .mq-guia-extra.opciones button:hover { transform: translateY(-1px); } }
.mq-cuenta { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--ink); transform-origin: left; animation: cuenta 9s linear both; }
.mq-cuenta[hidden] { display: none; }
@keyframes cuenta { to { transform: scaleX(0); } }
.mq-nota { margin: 0; font-size: .74rem; color: var(--ink-3); }

/* la guía «Cómo funciona» */
.mq-guia { position: absolute; left: var(--margen); bottom: var(--margen); z-index: 7; width: min(400px, calc(100% - var(--margen) * 2)); padding: 14px 18px 14px; border-radius: 26px; display: flex; flex-direction: column; gap: 10px; transition: opacity 420ms ease, transform 620ms var(--curva), visibility 0s; }
.mq-guia.oculta { opacity: 0; transform: translateY(18px) scale(.98); pointer-events: none; visibility: hidden; transition: opacity 300ms ease, transform 420ms var(--curva), visibility 0s 420ms; }
.mq-guia-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mq-guia-titulo-visita { font: 600 .78rem/1 var(--body); color: var(--ink-3); letter-spacing: .02em; }
.mq-guia-titulo-visita b { color: var(--ink); font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; }
.mq-saltar { border: 0; background: transparent; padding: 6px 10px; margin: -6px -8px -6px 0; border-radius: 999px; font: 600 .8rem/1 var(--body); color: var(--ink-3); cursor: pointer; transition: color 200ms ease, background-color 200ms ease; }
@media (hover: hover) { .mq-saltar:hover { color: var(--ink); background: rgba(43, 36, 64, .06); } }
.mq-guia-progreso { display: flex; gap: 4px; }
.mq-guia-progreso button { flex: 1; height: 14px; padding: 5px 0; border: 0; background: transparent; cursor: pointer; }
.mq-guia-progreso i { display: block; height: 4px; border-radius: 99px; background: rgba(43, 36, 64, .12); position: relative; overflow: hidden; transition: background-color 300ms ease; }
.mq-guia-progreso .hecho i { background: var(--ink); }
.mq-guia-progreso .actual i { background: rgba(43, 36, 64, .12); }
.mq-guia-progreso .actual i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--lila)); transform-origin: left; animation: llena 700ms var(--curva) both; }
@keyframes llena { from { transform: scaleX(0); } }
.mq-guia-cuerpo { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mq-guia-cuerpo.entra > * { animation: guia-entra 520ms var(--curva) both; }
.mq-guia-cuerpo.entra > :nth-child(2) { animation-delay: 50ms; } .mq-guia-cuerpo.entra > :nth-child(3) { animation-delay: 100ms; } .mq-guia-cuerpo.entra > :nth-child(4) { animation-delay: 150ms; }
@keyframes guia-entra { from { opacity: 0; transform: translateY(8px); } }
.mq-guia-pieza { font-size: .74rem; padding: 3px 8px; }
.mq-guia h2 { margin: 2px 0 0; font: 800 1.32rem/1.15 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.mq-guia p { margin: 0; font-size: .92rem; color: var(--ink-2); text-wrap: pretty; }
.mq-guia-extra { width: 100%; }
.mq-guia-extra:empty { display: none; }
.mq-guia-archivos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px !important; }
.mq-guia-archivos code { font-size: .74rem; }
.mq-guia-pie { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.mq-guia-pie button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 10px 16px; font: 600 .9rem/1 var(--body); cursor: pointer; transition: transform 160ms var(--curva), opacity 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.mq-guia-pie svg { width: 16px; height: 16px; }
.mq-ant { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px rgba(43, 36, 64, .16); padding-left: 11px !important; }
.mq-ant:disabled { opacity: .35; cursor: default; }
.mq-sig { background: var(--ink); color: #fff; padding-right: 12px !important; }
.mq-sig.final { background: linear-gradient(135deg, var(--coral), var(--lila)); box-shadow: 0 10px 22px -10px rgba(142, 108, 255, .8); }
.mq-guia-pie button:not(:disabled):active { transform: scale(.96); }
@media (hover: hover) { .mq-sig:hover { box-shadow: 0 8px 18px -8px rgba(43, 36, 64, .7); } .mq-sig:hover svg { transform: translateX(2px); } .mq-sig svg { transition: transform 200ms var(--curva); } }

/* ficha de un agente */
.mq-ficha { position: absolute; left: var(--margen); top: 74px; z-index: 6; width: 330px; max-height: calc(100% - 74px - 290px); min-height: 0; overflow: auto; padding: 16px 16px 14px; border-radius: 24px; display: flex; flex-direction: column; gap: 9px; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: 20% 0; transition: opacity 280ms ease, transform 480ms var(--curva); scrollbar-width: thin; }
body:not(.en-visita) .mq-ficha { max-height: calc(100% - 74px - 96px); }
.mq-ficha[hidden] { display: none; }
.mq-ficha.visible { opacity: 1; transform: none; }
.mq-ficha::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--c); border-radius: 24px 24px 0 0; opacity: .8; }
.mq-ficha header { display: flex; align-items: center; gap: 12px; padding-right: 26px; }
.mq-ficha canvas { flex: none; width: 36px; height: 59px; }
.mq-ficha h3 { margin: 0; font: 800 1.2rem/1.1 var(--display); }
.mq-ficha header p { margin: 2px 0 0; font-size: .8rem; color: var(--ink-3); }
.mq-ficha-cerrar { position: absolute; right: 10px; top: 12px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(43, 36, 64, .06); cursor: pointer; display: grid; place-items: center; transition: background-color 200ms ease; }
.mq-ficha-cerrar i { position: relative; width: 12px; height: 12px; }
.mq-ficha-cerrar i::before, .mq-ficha-cerrar i::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 12px; border-radius: 2px; background: var(--ink); rotate: 45deg; translate: -50% 0; }
.mq-ficha-cerrar i::after { rotate: -45deg; }
@media (hover: hover) { .mq-ficha-cerrar:hover { background: rgba(43, 36, 64, .12); } }
.mq-ficha p { margin: 0; }
.mq-ficha-modelo { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-2); }
.mq-ficha-ahora { display: grid; gap: 2px; padding: 9px 11px; border-radius: 14px; background: color-mix(in srgb, var(--c) 12%, #fff); font-size: .86rem; }
.mq-ficha-ahora b { font: 700 .7rem/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.mq-ficha-ahora.cambia span { animation: guia-entra 450ms var(--curva) both; }
.mq-ficha-ruta { align-self: flex-start; font-size: .74rem; }
.mq-ficha-archivos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; font-size: .8rem; }
.mq-ficha-archivos dt { font: 600 .74rem/1.6 var(--mono); color: var(--ink); }
.mq-ficha-archivos dd { margin: 0; color: var(--ink-2); }
.mq-ficha-herr { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: .76rem; }
.mq-ficha-herr .tit { width: 100%; font: 700 .7rem/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 2px; }
.mq-ficha-herr .si, .mq-ficha-herr .no { padding: 4px 9px; border-radius: 999px; font-weight: 600; }
.mq-ficha-herr .si { background: rgba(47, 197, 149, .16); color: var(--menta-osc); }
.mq-ficha-herr .no { background: rgba(255, 122, 89, .12); color: var(--coral-osc); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mq-ficha-rutina { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-3); }
.mq-ficha-rutina code { font-size: .72rem; background: rgba(255, 197, 67, .22); color: var(--sol-osc); }

/* local / nube */
.mod { display: inline-block; padding: 3px 8px; border-radius: 999px; font: 700 .66rem/1 var(--body); font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.mod.local { background: rgba(47, 197, 149, .18); color: var(--menta-osc); }
.mod.nube { background: rgba(142, 108, 255, .18); color: var(--lila-osc); }
.mod.puente { background: rgba(255, 197, 67, .25); color: var(--sol-osc); }

/* vistas */
.mq-vistas { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 5; display: flex; gap: 4px; padding: 5px; border-radius: 999px; max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; transition: opacity 400ms ease, transform 500ms var(--curva), visibility 0s; }
body.en-visita .mq-vistas { opacity: 0; transform: translateY(14px); pointer-events: none; visibility: hidden; transition: opacity 250ms ease, transform 400ms var(--curva), visibility 0s 400ms; }
.mq-vistas button { border: 0; background: transparent; padding: 10px 16px; border-radius: 999px; font: 600 .88rem/1 var(--body); color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background-color 250ms ease, color 250ms ease, transform 160ms var(--curva); }
.mq-vistas button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mq-vistas button:active { transform: scale(.96); }
.mq-vistas .mq-recorrido { color: var(--lila-osc); }
.mq-vistas .mq-recorrido[aria-pressed="true"] { background: linear-gradient(135deg, var(--coral), var(--lila)); color: #fff; }
.mq-vistas .mq-como { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--coral), var(--lila)); color: #fff; box-shadow: 0 8px 18px -10px rgba(142, 108, 255, .9); }
.mq-vistas .mq-como svg { width: 14px; height: 14px; }
.mq-vistas .mq-como.llama { animation: llama 2.4s ease-in-out 3; }
@keyframes llama { 50% { box-shadow: 0 0 0 7px rgba(255, 122, 89, .18), 0 8px 18px -10px rgba(142, 108, 255, .9); } }
.mq-pista, .mq-aviso { position: absolute; left: 50%; bottom: 74px; translate: -50% 0; z-index: 4; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(43, 36, 64, .82); color: #fff; font-size: .8rem; white-space: nowrap; transition: opacity 600ms ease, transform 600ms var(--curva); }
.mq-pista.oculta, body.en-visita .mq-pista { opacity: 0; transform: translateY(8px); pointer-events: none; }
.mq-aviso { bottom: auto; top: 70px; opacity: 0; transform: translateY(-8px); pointer-events: none; background: var(--ink); white-space: normal; text-align: center; max-width: min(460px, calc(100% - 32px)); width: max-content; }
.mq-aviso.visible { opacity: 1; transform: none; }

/* globos de diálogo sobre la cabeza */
.globos, .anclas, .etiquetas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.globos { z-index: 4; } .anclas { z-index: 3; } .etiquetas { z-index: 2; }
.globo { position: absolute; left: 0; top: 0; max-width: 250px; width: max-content; margin: 0; padding: 9px 13px; border-radius: 16px; background: #fff; color: var(--ink); font: 500 .86rem/1.35 var(--body); box-shadow: 0 10px 24px -12px rgba(43, 36, 64, .5), 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, transparent); translate: -50% calc(-100% - 12px); opacity: 0; scale: .9; transform-origin: 50% 100%; transition: opacity 260ms ease, scale 360ms var(--curva); will-change: transform; }
.globo::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: #fff; rotate: 45deg; translate: -50% 0; border-radius: 0 0 4px 0; box-shadow: 1.5px 1.5px 0 color-mix(in srgb, var(--c) 40%, transparent); }
.globo.visible { opacity: 1; scale: 1; }
.globo.fuera { opacity: 0 !important; }
.globo .quien { display: block; font: 800 .95rem/1.2 var(--display); }
.globo.pide { background: #FFF6DC; box-shadow: 0 10px 24px -12px rgba(43, 36, 64, .5), 0 0 0 2px var(--sol); }
.globo.pide::after { background: #FFF6DC; box-shadow: 2px 2px 0 var(--sol); }

/* etiquetas sobre cada mesa */
.etq { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 7px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: var(--sombra-chip), 0 0 0 1.5px color-mix(in srgb, var(--c) 35%, transparent); font: 600 .76rem/1 var(--body); white-space: nowrap; translate: -50% -100%; opacity: 0; scale: .85; transform-origin: 50% 100%; transition: opacity 320ms ease, scale 460ms var(--curva); will-change: transform; }
.etq-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.etq b { font: 800 .82rem/1 var(--display); }
.etq-dep { color: var(--ink-3); font-weight: 500; max-width: 0; overflow: hidden; transition: max-width 500ms var(--curva); }
.etq .mod { font-size: .58rem; padding: 3px 6px; }
.etiquetas[data-modo="completas"] .etq, .etiquetas[data-modo="compactas"] .etq { opacity: 1; scale: 1; }
.etiquetas[data-modo="completas"] .etq { transition-delay: calc(var(--i) * 140ms); padding: 7px 10px 7px 9px; }
.etiquetas[data-modo="completas"] .etq-dep { max-width: 180px; }
.etiquetas[data-modo="compactas"] .etq { opacity: .9; }
.etq.tapada, .etq.fuera { opacity: 0 !important; transition-delay: 0ms !important; }

/* chips anclados a la escena (lo que pasa en 3D, con su nombre real) */
.chip3d { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 .76rem/1.15 var(--body); white-space: nowrap; box-shadow: var(--sombra-chip); translate: -50% -100%; opacity: 0; scale: .8; transform-origin: 50% 100%; transition: opacity 260ms ease, scale 420ms var(--curva); will-change: transform; }
.chip3d.visible { opacity: 1; scale: 1; }
.chip3d.fuera { opacity: 0 !important; }
.chip3d code { background: rgba(255, 255, 255, .16); color: inherit; font-size: .72rem; padding: 2px 6px; }
.chip3d b { font-weight: 800; }
.chip3d.sobre { background: #fff; color: var(--ink); box-shadow: var(--sombra-chip), 0 0 0 1.5px rgba(255, 122, 89, .45); }
.chip3d.sobre code { background: rgba(255, 122, 89, .14); color: var(--coral-osc); }
.chip3d.papel { background: #fff; color: var(--ink); box-shadow: var(--sombra-chip), 0 0 0 1.5px rgba(142, 108, 255, .4); }
.chip3d.sub { background: var(--lila); flex-wrap: wrap; justify-content: center; max-width: 220px; white-space: normal; text-align: center; border-radius: 16px; }
.chip3d .barra { display: block; width: 100%; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.chip3d .barra i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.chip3d.mal { background: var(--coral); }
.chip3d.mal::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #fff; -webkit-mask: radial-gradient(circle at 50% 40%, transparent 2px, #000 2.5px); mask: radial-gradient(circle at 50% 40%, transparent 2px, #000 2.5px); }
.chip3d.bien { background: var(--menta); }
.chip3d.rutina { background: #fff; color: var(--ink); box-shadow: var(--sombra-chip), 0 0 0 2px var(--sol); flex-direction: column; gap: 4px; border-radius: 14px; padding: 7px 11px; }
.chip3d.rutina .hora { font: 800 .9rem/1 var(--display); font-variant-numeric: tabular-nums; }
.chip3d.rutina code { background: rgba(255, 197, 67, .25); color: var(--sol-osc); }
.chip3d.rutina.llega { animation: golpe 500ms var(--curva); }
.chip3d.tu { background: var(--sol); color: var(--ink); }
.chip3d.movil { background: var(--ink); }
@keyframes golpe { 40% { scale: 1.08; } }

/* medidor del presupuesto sobre la mesa */
.medidor3d { position: absolute; left: 0; top: 0; width: 214px; display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: baseline; padding: 10px 13px 11px; border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: var(--sombra-chip), 0 0 0 1.5px rgba(43, 36, 64, .06); translate: -50% -100%; opacity: 0; scale: .85; transform-origin: 50% 100%; transition: opacity 300ms ease, scale 460ms var(--curva), box-shadow 400ms ease; will-change: transform; }
.medidor3d.visible { opacity: 1; scale: 1; }
.medidor3d.fuera { opacity: 0 !important; }
.m-tit { grid-column: 1 / -1; font: 700 .68rem/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.m-cifra { font: 800 1rem/1 var(--display); font-variant-numeric: tabular-nums; }
.m-pct { font: 700 .8rem/1 var(--mono); font-style: normal; color: var(--ink-2); }
.m-barra { position: relative; grid-column: 1 / -1; height: 9px; border-radius: 99px; background: rgba(43, 36, 64, .08); overflow: hidden; }
.m-barra i { position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, var(--menta), var(--sol) 70%, var(--coral)); transform-origin: left; transform: scaleX(0); transition: transform 800ms var(--curva); }
.m-barra u { position: absolute; left: 80%; top: 0; bottom: 0; width: 2px; background: rgba(43, 36, 64, .4); }
.m-pausa { grid-column: 1 / -1; max-height: 0; overflow: hidden; font: 600 .74rem/1.3 var(--body); color: var(--sol-osc); transition: max-height 400ms var(--curva); }
.medidor3d.alerta { box-shadow: var(--sombra-chip), 0 0 0 2.5px var(--sol); }
.medidor3d.alerta .m-pct { color: var(--coral-osc); }
.medidor3d.pausa .m-pausa { max-height: 2.6em; }
.medidor3d.pausa { animation: late 1.4s ease-in-out infinite; }
.medidor3d.golpe .m-cifra { animation: golpe 420ms var(--curva); }

/* el acta que vuela al panel */
.papel-vuela { position: fixed; left: 0; top: 0; z-index: 20; display: grid; gap: 2px; padding: 12px 14px 22px; width: 120px; border-radius: 12px; background: #fff; box-shadow: 0 18px 34px -14px rgba(43, 36, 64, .55), inset 0 4px 0 var(--lila); font-size: .74rem; color: var(--ink-3); pointer-events: none; }
.papel-vuela b { font: 800 .95rem/1.1 var(--display); color: var(--ink); }
.papel-vuela::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 5px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(43, 36, 64, .15) 0 60%, transparent 60% 100%); }

/* carga */
.mq-carga { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 14px; background: linear-gradient(180deg, #E6DEFF, #FFE6EE); color: var(--ink-2); font: 600 1rem var(--body); transition: opacity 700ms ease, visibility 0s 700ms; }
.mq-carga img { animation: gira 6s linear infinite; }
.mq-carga.fuera { opacity: 0; visibility: hidden; }

/* pantallas medianas: el panel estrecha */
@media (max-width: 1100px) and (min-width: 721px) {
  .mq-panel { width: 300px; }
  .mq-cabecera { right: calc(300px + var(--margen) * 2); }
  .mq-guia { width: min(370px, calc(100% - 300px - var(--margen) * 3)); }
}
@media (max-height: 760px) and (min-width: 721px) {
  .mq-guia { padding: 12px 16px 12px; gap: 8px; }
  .mq-guia h2 { font-size: 1.18rem; }
  .mq-guia p { font-size: .86rem; }
  .mq-ficha { top: 66px; max-height: calc(100% - 66px - 270px); padding: 13px 14px 12px; gap: 7px; }
  .mq-ficha-archivos { font-size: .76rem; }
  .mq-panel-cuerpo { padding: 16px 16px 14px; gap: 9px; }
}

/* pantallas estrechas y la maqueta pequeña dentro de la web */
@media (max-width: 720px) {
  :root { --margen: 10px; }
  .mq-cabecera { left: 10px; top: 10px; right: 10px; gap: 6px; flex-wrap: nowrap; align-items: flex-start; }
  .mq-marca { padding: 5px; flex: none; } .mq-marca span, .mq-marca em { display: none; } .mq-marca img { width: 26px; height: 26px; }
  .mq-simulada { font-size: .66rem; padding: 6px 10px 6px 8px; line-height: 1.25; flex: 1; border-radius: 14px; }
  .mq-pantalla { flex: none; width: 36px; height: 36px; }
  .mq-panel { top: auto; right: 10px; left: 10px; width: auto; bottom: 76px; max-height: 58%; z-index: 8; }
  body.en-visita .mq-panel { bottom: 10px; }
  .mq-panel.plegado { transform: translateY(calc(100% + 90px)); }
  .mq-plegar { left: auto; right: 14px; top: -14px; }
  .mq-plegar i { rotate: 45deg; } .mq-panel.plegado .mq-plegar i { rotate: -135deg; }
  .mq-panel.plegado .mq-plegar { left: auto; top: -50px; right: 0; width: 40px; height: 40px; }
  body.en-visita .mq-panel.plegado .mq-plegar { opacity: 0; pointer-events: none; }
  body.en-visita .mq-panel.plegado.aviso .mq-plegar { opacity: 1; pointer-events: auto; }
  .mq-panel-cuerpo { padding: 16px 14px 12px; gap: 9px; }
  .mq-vistas { bottom: 12px; left: 10px; translate: none; max-width: calc(100% - 66px); } .mq-vistas button { padding: 9px 12px; font-size: .82rem; }
  .mq-pista { bottom: 66px; font-size: .74rem; white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 24px); }
  .mq-aviso { top: 64px; font-size: .76rem; }
  .globo { max-width: 180px; font-size: .76rem; padding: 7px 10px; }
  .mq-guia { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 11px 14px 11px; gap: 7px; border-radius: 22px; }
  .mq-guia h2 { font-size: 1.08rem; }
  .mq-guia p { font-size: .82rem; line-height: 1.4; }
  .mq-guia-pieza { font-size: .68rem; }
  .mq-guia-pie button { padding: 9px 14px; font-size: .84rem; }
  .mq-guia-extra.opciones button { padding: 9px 12px; font-size: .82rem; }
  .mq-ficha { left: 10px; right: 10px; top: 58px; width: auto; max-height: 46%; padding: 12px 13px 11px; gap: 7px; border-radius: 20px; }
  body:not(.en-visita) .mq-ficha { max-height: calc(100% - 58px - 140px); }
  .mq-ficha.mini .mq-ficha-archivos, .mq-ficha.mini .mq-ficha-rutina, .mq-ficha.mini .mq-ficha-herr, .mq-ficha.mini .mq-ficha-ahora { display: none; }
  .etq { font-size: .7rem; padding: 4px 7px 4px 6px; }
  .etq b { font-size: .74rem; }
  .etiquetas[data-modo="completas"] .etq { padding: 5px 8px; }
  .etiquetas[data-modo="completas"] .etq-dep { max-width: 0; }
  .chip3d { font-size: .68rem; padding: 5px 9px; }
  .chip3d.sub { max-width: 170px; }
  .medidor3d { width: 178px; padding: 8px 11px 9px; }
  .m-cifra { font-size: .9rem; }
}
/* la maqueta pequeña dentro de la web (≈ 340 × 425) */
@media (max-width: 420px) and (max-height: 520px) {
  .mq-simulada { font-size: .6rem; }
  .mq-guia { padding: 9px 12px 9px; gap: 5px; }
  .mq-guia-cab { font-size: .7rem; }
  .mq-guia-pieza { display: none; }
  .mq-guia h2 { font-size: .98rem; }
  .mq-guia p { font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .mq-guia-progreso button { height: 10px; padding: 3px 0; }
  .mq-guia-pie button { padding: 7px 12px; font-size: .78rem; }
  .mq-ficha { max-height: 34%; }
  .mq-ficha.mini .mq-ficha-ruta { display: none; }
  .globo { max-width: 150px; font-size: .7rem; }
  .medidor3d { width: 150px; }
  .m-tit { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } }