/* El visor (index.html): paneles, barra, etiquetas, recorrido y carga. Compartido por todos los edificios. */
:root {
  /* soñá en el cielo: paneles blancos como nubes, gris humo y pizarra de cielo; el naranja obra queda para la acción. */
  --fondo: #c9d3de;
  --panel: #ffffff;
  --panel-2: #f1f4f7;
  --hover: #e6ebf1;
  --activo: #24324a;
  --sobre-activo: #ffffff;
  --borde: #e3e8ee;
  --control: #c9d1db;
  --texto: #1d2533;
  --suave: #4a5566;
  --tenue: #5f6a7a;
  --acento: #ff5a1f;
  --acento-texto: #b8400f;
  --disp: #2fa36b;
  --res: #d9822b;
  --vend: #8a8a84;
  --r: 20px;
  --izq: 300px;
  --der: 350px;
  --hoja: 46vh;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fondo); color: var(--texto);
  font: 14px/1.45 "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
#lienzo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.capa { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); }

/* ---------- Columna izquierda: el proyecto ---------- */
#izq { position: fixed; left: 20px; top: 20px; bottom: 20px; width: var(--izq); padding: 24px 22px 18px;
  display: flex; flex-direction: column; gap: 18px; overflow: hidden; z-index: 10; }
.marca { display: flex; flex-direction: column; line-height: .95; letter-spacing: .12em; margin: 0; font-size: inherit; }
.marca b { font-size: 30px; font-weight: 700; }
.marca span { font-size: 17px; font-weight: 500; color: var(--suave); letter-spacing: .01em; margin-top: 4px; }
.tipos h3 { margin: 0 0 6px; font-size: 13px; color: var(--tenue); font-weight: 500; }
.tipos table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tipos th { text-align: left; font-weight: 500; padding: 5px 0; }
.tipos td { text-align: right; color: var(--suave); padding: 5px 0 5px 8px; white-space: nowrap; }
.tipos tr + tr > * { border-top: 1px solid var(--borde); }
.barrio { margin: -6px 0 0; color: var(--suave); font-size: 13px; }
.bajada { margin: 0; color: var(--texto); font-size: 14px; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.datos div { background: var(--panel-2); border-radius: 12px; padding: 9px 11px; }
.datos dt { font-size: 13px; color: var(--tenue); }
.datos dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; }
.disp h3, .ubic h3 { margin: 0 0 8px; font-size: 13px; color: var(--tenue); font-weight: 500; }
.barra { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.barra i { display: block; }
.ley { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13px; color: var(--suave); }
.pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.pt-disponible { background: var(--disp); } .pt-reservada { background: var(--res); } .pt-vendida { background: var(--vend); }
.amen { margin: 0; font-size: 13px; color: var(--suave); }
.ubic { margin-top: auto; }
.ubic svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.nota { margin: 6px 0 0; font-size: 12px; color: var(--tenue); }
.por { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tenue); text-decoration: none; margin-top: 2px; }
.por img { height: 15px; display: block; }
.por:hover { color: var(--texto); }

/* ---------- Volver y ayuda ---------- */
.volver { position: fixed; top: 20px; left: calc(var(--izq) + 40px); z-index: 11; display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px 0 16px; border-radius: 999px; background: var(--activo); color: var(--sobre-activo); font-size: 15px; font-weight: 600; }
.volver:hover { background: #34445f; }
.volver svg { flex: none; }
.volver small { font-weight: 400; color: #b8c2d0; font-size: 13px; margin-left: 4px; }
#ayuda { position: fixed; bottom: 86px; left: calc(var(--izq) + 40px); right: calc(var(--der) + 40px); text-align: center; font-size: 13px;
  color: var(--suave); pointer-events: none; z-index: 8; transition: opacity .4s; }
body.noche #ayuda { color: #c9c9c3; }

/* ---------- Controles inferiores ---------- */
#controles { position: fixed; bottom: 20px; left: calc(var(--izq) + 40px); right: calc(var(--der) + 40px); display: flex; justify-content: center; z-index: 9; pointer-events: none; }
#controles .capa { pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; }
.seg { display: flex; background: var(--panel-2); border-radius: 999px; padding: 3px; }
.seg button { padding: 7px 13px; border-radius: 999px; font-size: 13px; color: var(--suave); }
.seg button:hover { color: var(--texto); }
.seg button[aria-pressed="true"] { background: var(--activo); color: var(--sobre-activo); font-weight: 600; }
.ctl { padding: 9px 14px; border-radius: 999px; font-size: 13px; color: var(--suave); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.ctl:hover { color: var(--texto); background: var(--panel-2); }
.ctl[aria-pressed="true"] { color: var(--sobre-activo); background: var(--activo); }
.ctl:disabled { opacity: .35; cursor: default; background: none; }
.bajar { color: var(--texto); font-weight: 600; }
.sep { width: 1px; height: 24px; background: var(--borde); margin: 0 2px; }

/* ---------- Panel derecho ---------- */
#der { position: fixed; right: 20px; top: 20px; bottom: 20px; width: var(--der); z-index: 10; display: flex; flex-direction: column; overflow: hidden; }
.asa { display: none; }
#panel { padding: 22px 20px 18px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--control) transparent; }
#panel h2 { margin: 0 0 14px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.atras { color: var(--suave); font-size: 13px; margin-bottom: 14px; display: inline-flex; gap: 6px; align-items: center; }
.atras:hover { color: var(--texto); }
.filtro { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.chips { display: flex; gap: 6px; }
.chip { flex: 1; padding: 7px 0; border-radius: 999px; border: 1px solid var(--control); color: var(--suave); font-size: 13px; }
.chip:hover { color: var(--texto); border-color: var(--suave); }
.chip.on { background: var(--activo); border-color: var(--activo); color: var(--sobre-activo); font-weight: 600; }
.solo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); cursor: pointer; }
.solo input { accent-color: var(--activo); width: 15px; height: 15px; margin: 0; }
.lista { display: flex; flex-direction: column; gap: 4px; }
.fila { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid transparent; }
.fila:hover, .fila.hover { background: var(--hover); border-color: var(--acento); }
.fila.apagada { opacity: .4; }
.fila .n { font-weight: 700; font-size: 15px; min-width: 42px; }
.fila .i { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fila .i b { font-weight: 600; font-size: 14px; }
.fila .i small { color: var(--suave); font-size: 13px; }
.fila .d { text-align: right; font-size: 13px; font-weight: 600; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.fila .d small { font-weight: 400; color: var(--suave); font-size: 12px; }
.puntos { display: flex; gap: 4px; }
.puntos .pt { margin: 0; }
.vacio { padding: 18px; text-align: center; color: var(--suave); border: 1px dashed var(--control); border-radius: 14px; }
.vacio button { color: var(--acento-texto); margin-top: 6px; font-weight: 600; }
.comunes { margin-top: 16px; }
.comunes h3 { margin: 0 0 8px; font-size: 13px; color: var(--texto); font-weight: 600; }
.comunes p { margin: 0 0 8px; font-size: 13px; color: var(--suave); } .comunes p b { color: var(--texto); font-weight: 600; }

.ficha-cab { display: flex; justify-content: space-between; align-items: flex-start; }
.ficha-cab h2 { font-size: 36px !important; margin: 2px 0 0 !important; line-height: 1; font-weight: 700 !important; }
.estado { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px; display: inline-flex; align-items: center; }
.est-disponible { color: #1d6b45; background: #e2f3e9; }
.est-reservada { color: #8a4b0f; background: #fbeddb; }
.est-vendida { color: #4a5566; background: #e9edf2; }
.sub { margin: 8px 0 12px; color: var(--suave); font-size: 13px; }
.precio { font-size: 22px; font-weight: 600; margin-bottom: 12px; } .precio small { font-size: 12px; font-weight: 400; color: var(--tenue); margin-left: 6px; }
.sup { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 12px; background: var(--panel-2); border-radius: 12px; }
.sup div { padding: 8px 11px; } .sup div + div { border-left: 1px solid var(--borde); } /* taste-skill-ignore: tira de cifras dividida (regla de app) */
.sup dt { font-size: 12px; color: var(--tenue); } .sup dd { margin: 0; font-weight: 600; font-size: 14px; }
.plano { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 10px; margin-bottom: 12px; }
.plano svg { width: 100%; height: auto; display: block; max-height: 30vh; }
.plano img { width: 100%; height: auto; display: block; border-radius: 6px; }
.acciones { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.acciones > :only-child, .acciones > :nth-child(3):last-child { grid-column: 1 / -1; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px; min-height: 44px; border-radius: 999px; font-weight: 600; font-size: 13px; text-decoration: none;
  border: 1px solid var(--control); color: var(--texto); }
.btn:hover { background: var(--panel-2); }
.btn-wa { background: var(--acento); border-color: var(--acento); color: var(--texto); }
.btn-wa:hover { background: #ff7440; }
.link { color: var(--suave); font-size: 12px; margin-top: 10px; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--texto); }
.demo-nota { margin: 12px 0 0; font-size: 12px; color: var(--tenue); }

/* ---------- Etiquetas sobre la maqueta ---------- */
#etiquetas { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.et { position: absolute; left: 0; top: 0; will-change: transform; white-space: nowrap; }
.et-u { pointer-events: auto; transform-origin: 50% 100%; padding: 5px 10px 5px 8px; border-radius: 99px; background: var(--panel); border: 1px solid var(--control);
  font-size: 12px; display: flex; align-items: center; gap: 6px; margin: -30px 0 0 -40px; color: var(--texto); }
.et-u b { font-weight: 700; } .et-u .pt { margin: 0; }
.et-u:hover, .et-u.hover { border-color: var(--acento); background: #fff; }
.et-a { margin: -14px 0 0 -65px; width: 130px; text-align: center; font-size: 12px; font-weight: 600; color: var(--texto); line-height: 1.25; text-shadow: 0 0 5px #fff, 0 0 2px #fff; } /* taste-skill-ignore: rótulo sobre la maqueta */
.et-a small { display: block; font-weight: 600; color: var(--acento-texto); }
body.noche .et-a { color: #f4f3ee; text-shadow: 0 0 6px rgba(0,0,0,.9); } /* taste-skill-ignore */ body.noche .et-a small { color: #ff8a5c; }
.et-c { margin: -11px 0 0 -32px; width: 64px; text-align: center; font-size: 11px; font-weight: 700; color: var(--texto); background: var(--acento); border-radius: 6px; padding: 2px 0; }
.pin { pointer-events: auto; display: flex; align-items: center; gap: 0; margin: -13px 0 0 -13px; height: 26px; border-radius: 13px; background: #fff; color: var(--texto);
  box-shadow: 0 2px 10px rgba(0,0,0,.2); font-size: 12px; /* taste-skill-ignore: flota sobre el 3D */ font-weight: 600; overflow: hidden; }
.pin .mas { width: 26px; height: 26px; display: grid; place-items: center; background: var(--acento); border-radius: 50%; font-size: 16px; line-height: 1; }
.pin .t { max-width: 0; transition: max-width .25s, padding .25s; overflow: hidden; }
.pin:hover .t, .pin:focus-visible .t, .pin.abierto .t { max-width: 160px; padding: 0 10px 0 7px; }
#tip { position: fixed; z-index: 12; pointer-events: none; padding: 6px 11px; font-size: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.12); } /* taste-skill-ignore: tooltip */
#ficha-pin, #toast { box-shadow: 0 8px 24px rgba(0,0,0,.14); } /* taste-skill-ignore: popover */
#tip b { font-weight: 700; }
#ficha-pin { position: fixed; z-index: 13; width: 270px; padding: 14px 16px; left: 0; top: 0; }
#ficha-pin h4 { margin: 0 0 8px; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
#ficha-pin h4 button { color: var(--suave); font-size: 18px; line-height: 1; }
#ficha-pin dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; }
#ficha-pin dt { color: var(--tenue); } #ficha-pin dd { margin: 0; }
#ficha-pin p { margin: 10px 0 0; font-size: 12px; color: var(--acento-texto); }

/* ---------- Carga y avisos ---------- */
#carga { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: linear-gradient(#9fb3cc, #dde4ec); transition: opacity .6s; }
#carga.oculto { opacity: 0; pointer-events: none; }
/* Editorial (?estilo=editorial, html.ed-carga): marfil liso hasta que motor/carga-editorial.js arma la suya; esa decide
   cuándo se va (.gestion: espera su .listo para fundirse). */
html.ed-carga #carga { background: #f2e8d9; transition: opacity .7s ease; }
html.ed-carga #carga:not(.gestion) > * { visibility: hidden; }
html.ed-carga #carga.gestion.oculto:not(.listo) { opacity: 1; pointer-events: auto; }
#carga div { text-align: center; }
#carga .marca { align-items: center; }
#carga p { color: var(--suave); font-size: 13px; margin-top: 18px; display: flex; gap: 8px; align-items: center; justify-content: center; }
#carga p img { height: 14px; }
#carga .barra-c { width: 160px; height: 2px; background: rgba(255,255,255,.6); margin: 14px auto 0; overflow: hidden; border-radius: 2px; }
#carga .barra-c i { display: block; height: 100%; width: 40%; background: var(--acento); animation: ir 1.1s ease-in-out infinite; }
@keyframes ir { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
#aviso { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, 80vw); padding: 20px; z-index: 6; text-align: center; color: var(--suave); }
#toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 50; padding: 9px 16px; font-size: 13px; transition: opacity .3s; }
[hidden] { display: none !important; }
/* ---------- Embebida en la landing (?embed): sólo la maqueta, sin fondo ni interfaz ---------- */
html.embed, html.embed body { background: transparent; }
html.embed :is(#izq, #der, #controles, #barra-movil, #etiquetas, .volver, #ayuda, #tip, #ficha-pin, #carga, #toast, #aviso) { display: none !important; }
html.embed #lienzo { pointer-events: none; }
body.en-paseo :is(#izq, #der, #controles, #etiquetas, .volver, #ayuda, #barra-movil, #tip, #ficha-pin) { display: none !important; }
/* ---------- Caminar: recorrido en primera persona (caminar.js) ---------- */
#paseo { position: fixed; inset: 0; z-index: 30; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#paseo:active { cursor: grabbing; }
#paseo .cab { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px; cursor: default; white-space: nowrap; }
#paseo .cab b { padding: 0 10px; font-size: 13px; }
#paseo .pista { position: absolute; top: calc(70px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--suave); padding: 7px 14px; white-space: nowrap; transition: opacity .6s; cursor: default; }
#paseo .pista.ido { opacity: 0; }
/* Botonera del ascensor y escalera: abajo a la derecha, lejos del joystick */
#paseo .viaje { position: absolute; right: 16px; bottom: calc(28px + env(safe-area-inset-bottom)); max-width: min(330px, calc(100vw - 190px)); padding: 10px; cursor: default; }
#paseo .viaje p { margin: 0 4px 8px; font-size: 12px; color: var(--suave); }
#paseo .viaje .pisos { display: flex; flex-wrap: wrap; gap: 6px; }
#paseo .viaje .pisos button { min-width: 42px; height: 42px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--panel-2); color: var(--texto); }
#paseo .viaje .pisos button:disabled { opacity: .35; }
#paseo .viaje .pisos button.ahora { background: var(--activo); color: var(--sobre-activo); }
/* «Llamar» y «Salir del ascensor» (éste en su renglón); viajando, el piso por el que pasa la cabina */
#paseo .viaje .pisos button.ancho { padding: 0 18px; }
#paseo .viaje .pisos button[data-salir] { flex-basis: 100%; }
#paseo .viaje .pisos .en-viaje { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--activo); color: var(--sobre-activo); }
/* Con el dedo, botones de 46 px (el pulgar): siguen lejos del joystick, que está abajo a la izquierda */
@media (pointer: coarse) { #paseo .viaje .pisos :is(button, .en-viaje) { min-width: 46px; height: 46px; } }
#paseo .joy { position: absolute; left: 32px; bottom: calc(32px + env(safe-area-inset-bottom)); width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.75); box-shadow: 0 2px 14px rgba(0,0,0,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: .7; transition: opacity .2s; cursor: pointer; }
#paseo .joy.activo { opacity: 1; }
#paseo .joy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; }
/* ---------- Recorrer con el celular acostado (?horizontal, prototipo) ---------- */
/* Los bordes seguros (la isla, la barra de inicio) del lado en que quedan para la interfaz. */
#paseo { --sa-izq: env(safe-area-inset-left); --sa-der: env(safe-area-inset-right); --sa-arr: env(safe-area-inset-top); --sa-aba: env(safe-area-inset-bottom); }
/* «Girar» (giro del celular trabado): el lienzo y la capa del recorrido acostados 90°, con la parte de arriba del
   celular a la izquierda, del tamaño de la pantalla al revés (lo pone el visor en --ancho-vista y --alto-vista). Los
   toques los traduce caminar.js. */
body.girado :is(#lienzo, #paseo) { inset: auto; left: 0; top: 0; width: var(--alto-vista); height: var(--ancho-vista); transform-origin: 0 0; transform: translateX(var(--ancho-vista)) rotate(90deg); }
body.girado #paseo { --sa-izq: env(safe-area-inset-top); --sa-der: env(safe-area-inset-bottom); --sa-arr: env(safe-area-inset-right); --sa-aba: env(safe-area-inset-left); }
/* Acostado: la barra arriba contra el borde derecho, la botonera abajo a la derecha, el joystick abajo a la izquierda y
   el medio libre para mirar. */
body.en-horizontal #paseo .cab { left: auto; right: calc(10px + var(--sa-der)); top: calc(10px + var(--sa-arr)); transform: none; padding: 4px; gap: 4px; }
body.en-horizontal #paseo .cab b { padding: 0 6px 0 10px; font-size: 12px; }
body.en-horizontal #paseo .cab .ctl { padding: 8px 11px; font-size: 12px; }
body.en-horizontal #paseo .pista { left: calc(16px + var(--sa-izq)); top: calc(12px + var(--sa-arr)); transform: none; }
body.en-horizontal #paseo .viaje { right: calc(10px + var(--sa-der)); bottom: calc(10px + var(--sa-aba)); max-width: 36%; padding: 8px; }
body.en-horizontal #paseo .viaje p { margin-bottom: 6px; }
body.en-horizontal #paseo .joy { left: calc(24px + var(--sa-izq)); bottom: calc(20px + var(--sa-aba)); }
/* Pantalla limpia: el joystick (tenue hasta que se lo toca), la botonera cuando hace falta y «⋯» para volver. */
body.limpia #paseo :is(.cab > :not(#paseo-limpia), .pista) { display: none; }
body.limpia #paseo .cab { padding: 2px; }
body.limpia #paseo #paseo-limpia { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 18px; }
body.limpia #paseo .joy:not(.activo) { opacity: .3; }

/* ---------- Sin 3D ---------- */
body.sin-3d #controles, body.sin-3d #ayuda { display: none; }

/* ---------- Tablet y celular ---------- */
#barra-movil { position: fixed; top: 20px; left: 20px; width: var(--izq); height: 82px; padding: 24px 22px 0; z-index: 11;
  border-bottom: 0; border-radius: var(--r) var(--r) 0 0; display: flex; align-items: flex-start; justify-content: space-between; }
#barra-movil #btn-info { display: none; }
#izq { top: 101px; border-top: 0; border-radius: 0 0 var(--r) var(--r); padding-top: 4px; }
@media (max-width: 1100px) and (min-width: 761px) {
  :root { --izq: 0px; --der: 330px; }
  #barra-movil { width: auto; height: auto; border: 1px solid var(--borde); border-radius: var(--r); align-items: center; gap: 14px; padding: 8px 8px 8px 14px; }
  #barra-movil #btn-info { display: flex; }
  #barra-movil .marca { flex-direction: row; align-items: baseline; gap: 8px; }
  #barra-movil .marca b { font-size: 17px; } #barra-movil .marca span { font-size: 15px; margin: 0; }
  #izq { display: none; }
  body.ver-info #izq { display: flex; top: 76px; bottom: 20px; width: 300px; z-index: 20; overflow-y: auto; border: 1px solid var(--borde); border-radius: var(--r); padding-top: 22px; }
  .volver { top: 80px; left: 20px; }
  #ayuda { display: none; }
  .ctl .txt-largo { display: none; }
}
@media (max-width: 760px) {
  :root { --izq: 0px; --der: 0px; }
  #barra-movil { top: 10px; left: 10px; right: 10px; width: auto; height: auto; border: 1px solid var(--borde); border-radius: var(--r); align-items: center; padding: 8px 8px 8px 14px; }
  #barra-movil #btn-info { display: flex; }
  #barra-movil .marca { flex-direction: row; align-items: baseline; gap: 8px; }
  #barra-movil .marca b { font-size: 17px; } #barra-movil .marca span { font-size: 15px; margin: 0; }
  #izq { display: none; }
  body.ver-info #izq { display: flex; top: 64px; left: 10px; right: 10px; bottom: auto; width: auto; max-height: calc(100% - 80px); overflow-y: auto; z-index: 20; border: 1px solid var(--borde); border-radius: var(--r); padding-top: 22px; }
  body.ver-info .ubic { margin-top: 0; }
  .volver { top: 66px; left: 10px; min-height: 44px; font-size: 14px; }
  #der { left: 0; right: 0; bottom: 0; top: auto; width: auto; height: var(--hoja); border-radius: 18px 18px 0 0; border-bottom: 0; transition: height .3s; }
  body.hoja-cerrada #der { height: 40px; }
  .asa { display: block; width: 100%; padding: 14px 0 12px; flex: none; touch-action: none; cursor: grab; }
  .asa::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--control); margin: 0 auto; }
  #panel { padding: 8px 16px 16px; }
  #panel h2 { font-size: 19px; margin-bottom: 10px; }
  .ficha-cab h2 { font-size: 32px !important; }
  #controles { left: 10px; right: 10px; bottom: calc(var(--hoja) + 10px); transition: bottom .3s; }
  body.hoja-cerrada #controles { bottom: 50px; }
  #controles .capa { gap: 2px; padding: 4px; }
  .seg button { padding: 7px 9px; font-size: 12px; }
  .ctl { padding: 8px 9px; font-size: 12px; }
  .ctl .txt-largo { display: none; }
  #ayuda { display: none; }
  #ficha-pin { width: min(270px, 80vw); }
  /* En un celular angosto, la capa técnica y el clima van sólo con su ícono (si no, la barra no entra). */
  #btn-tecnica > span { display: none; }
}