/* Visor · © 2026 Proaxdata · Joaquín Ricardo Montaño Badilla */
:root {
    --texto: #0f172a; --suave: #64748b; --linea: #e2e8f0; --panel: #ffffff;
    --alerta: #b45309; --error: #b91c1c;
    --sombra: 0 2px 6px rgba(15, 23, 42, .08), 0 10px 30px rgba(15, 23, 42, .12);
    --radio: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; color: var(--texto); background: #eef0ec; }
#map { position: fixed; inset: 0; }

/* Leyenda */
.leyenda {
    position: fixed; left: 12px; bottom: 24px; z-index: 2; min-width: 170px;
    background: var(--panel); border-radius: var(--radio); padding: 10px 12px; box-shadow: var(--sombra); font-size: 13px;
}
.leyenda h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--suave); }
.leyenda ul { list-style: none; margin: 0; padding: 0; }
.leyenda li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.leyenda li b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--suave); }
.punto { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(15, 23, 42, .25); }
.punto.casa, .punto.vacio { background: none; box-shadow: none; display: grid; place-items: center; color: var(--texto); }
.punto.casa svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leyenda-nota { margin: 6px 0 0; font-size: 11.5px; color: var(--suave); }
.leyenda.alerta .leyenda-nota { color: var(--alerta); }

/* Selectores de vegetación y luz */
.selectores { position: fixed; top: 12px; left: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.selector {
    display: flex; align-items: center; gap: 2px; padding: 3px;
    background: rgba(255, 255, 255, .94); border-radius: 999px; box-shadow: 0 1px 4px rgba(15, 23, 42, .14);
}
.selector-icono { display: grid; place-items: center; width: 24px; height: 24px; color: var(--suave); }
.selector button {
    display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 7px; border: 0; border-radius: 999px;
    background: transparent; color: var(--suave); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700;
}
.selector button:hover { color: var(--texto); }
.selector button[aria-pressed="true"] { background: var(--texto); color: #fff; }
.selector svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Matiz de la luz sobre el mapa */
.tinte { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; transition: background-color .6s; }

/* Ficha */
.ficha {
    position: fixed; top: 12px; right: 56px; z-index: 3; width: 320px; max-height: calc(100% - 24px); overflow: auto;
    background: var(--panel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 16px 12px;
}
.ficha[hidden] { display: none; }
.ficha-cerrar {
    position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: #f1f5f9; color: var(--suave); font-size: 20px; line-height: 1; cursor: pointer;
}
.ficha-cerrar:hover { background: #e2e8f0; color: var(--texto); }
.ficha-cab { padding-right: 32px; margin-bottom: 10px; }
.ficha-cab h2 { margin: 6px 0 2px; font-size: 18px; }
.ficha-id { font-size: 11.5px; color: var(--suave); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 999px;
    color: var(--texto); background: #f1f5f9; border: 1px solid var(--linea);
}
.chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(15, 23, 42, .25); }
.campos { margin: 0; }
.campos div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.campos dt { color: var(--suave); }
.campos dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cargando, .vacio { color: var(--suave); font-size: 14px; }
.error { color: var(--error); font-size: 14px; }
.nota { font-size: 12px; margin: 10px 0 0; }
.nota.alerta { color: var(--alerta); }

.aviso {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4; max-width: 420px; text-align: center;
    background: #fff7ed; color: var(--alerta); border: 1px solid #fed7aa; border-radius: 10px; padding: 8px 12px; font-size: 13px;
}
.aviso[hidden], .leyenda[hidden] { display: none; }

/* Móvil */
@media (max-width: 640px) {
    .ficha { top: auto; right: 0; left: 0; bottom: 0; width: auto; max-height: 60%; border-radius: var(--radio) var(--radio) 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    .leyenda { bottom: 12px; min-width: 0; padding: 8px 10px; font-size: 12px; }
    .aviso { top: 48px; left: 12px; right: 56px; transform: none; }
}

/* Pin de la casa muestra y recorrido por dentro */
.pin-casa {
    position: relative; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 6px 12px 6px 8px;
    background: var(--texto); color: #fff; font: inherit; font-size: 12px; font-weight: 700; box-shadow: var(--sombra); cursor: pointer; white-space: nowrap;
    animation: pin-latido 2.2s ease-in-out infinite;
}
.pin-casa::after { content: ""; position: absolute; left: calc(50% - 1px); bottom: -10px; width: 2px; height: 10px; background: var(--texto); }
.pin-casa-icono { display: grid; place-items: center; width: 20px; height: 20px; }
.pin-casa-icono svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pin-latido { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ficha-boton { display: block; width: 100%; margin-top: 12px; border: 0; border-radius: 10px; padding: 10px; background: var(--texto); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.recorrido { position: fixed; inset: 0; z-index: 20; background: #000; }
.recorrido-lienzo { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.recorrido.capturado .recorrido-lienzo { cursor: none; }
.recorrido-cerrar {
    position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--texto); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--sombra);
}
.recorrido-ayuda {
    position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; gap: 2px; max-width: calc(100% - 90px);
    background: rgba(255, 255, 255, .92); border-radius: 12px; padding: 8px 12px; font-size: 12px; color: var(--suave); box-shadow: var(--sombra);
}
.recorrido-ayuda b { color: var(--texto); font-size: 13px; }
.recorrido-ayuda-tel { display: none; }
.recorrido-mira { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; }
.recorrido-nivel { position: absolute; bottom: 14px; right: 14px; z-index: 2; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--texto); }
.recorrido-palanca { position: absolute; left: 24px; bottom: 24px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .5); display: none; pointer-events: none; }
.recorrido-palanca-pomo { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
@media (pointer: coarse) { .recorrido-palanca { display: block; } .recorrido-ayuda-pc { display: none; } .recorrido-ayuda-tel { display: inline; } .recorrido-mira { display: none; } }

/* Torre de departamentos: panel de pisos */
.torre-panel { position: fixed; left: 12px; top: 64px; z-index: 3; width: 236px; background: var(--panel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 12px 10px; }
.torre-panel[hidden] { display: none; }
.torre-panel h3 { margin: 0 28px 8px 0; font-size: 13px; }
.torre-panel .ficha-cerrar { top: 6px; right: 6px; }
.torre-pisos { display: flex; flex-direction: column; gap: 6px; }
.torre-piso {
    display: flex; align-items: center; gap: 8px; border: 1px solid var(--linea); border-radius: 10px; padding: 7px 10px;
    background: #fff; color: var(--texto); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.torre-piso:hover { border-color: var(--suave); }
.torre-piso[aria-pressed="true"] { background: var(--texto); color: #fff; border-color: var(--texto); }
.torre-piso .puntos { margin-left: auto; display: flex; gap: 3px; }
.torre-piso .puntos i { display: block; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15, 23, 42, .25); }
.torre-nota { margin: 8px 0 0; font-size: 11.5px; color: var(--suave); }
@media (max-width: 640px) { .torre-panel { width: 190px; padding: 10px 10px 8px; } .torre-nota { display: none; } }
.pin-elevado { position: absolute; left: 0; top: 0; z-index: 2; will-change: transform; }
.pin-elevado .pin-casa { animation: none; }
.recorrido-nivel:empty { display: none; }
.recorrido-carga { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--texto); pointer-events: none; }
.recorrido-credito { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; font-size: 11px; color: rgba(255, 255, 255, .75); text-decoration: none; background: rgba(0, 0, 0, .3); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.recorrido-credito:hover { color: #fff; }
@media (max-width: 760px), (pointer: coarse) { .recorrido-credito { left: auto; right: 14px; bottom: 46px; transform: none; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; } }

/* Tour de fotos 360 en un depa de la torre */
.tour360 { position: fixed; inset: 0; z-index: 20; background: #000; }
.tour360-lienzo { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.tour360-lienzo:active { cursor: grabbing; }
.tour360-cerrar { position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--texto); font-size: 26px; line-height: 44px; cursor: pointer; box-shadow: var(--sombra); }
.tour360-ayuda { position: absolute; top: 14px; left: 14px; z-index: 2; max-width: min(380px, calc(100% - 90px)); background: rgba(255, 255, 255, .92); border-radius: var(--radio); padding: 10px 14px; font-size: 12px; color: var(--texto-suave); box-shadow: var(--sombra); display: grid; gap: 4px; }
.tour360-ayuda b { color: var(--texto); font-size: 13px; }
.tour360-carga { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--texto); pointer-events: none; }
.tour360-escenas { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; max-width: calc(100% - 28px); overflow-x: auto; padding: 4px; scrollbar-width: none; }
.tour360-escenas button { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(255, 255, 255, .85); color: var(--texto); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tour360-escenas button.activo { background: var(--texto); color: #fff; }
.tour360-enlace { position: absolute; z-index: 2; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 4px; color: #fff; font: inherit; font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.tour360-enlace-flecha { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); position: relative; animation: tour360-latido 1.8s ease-in-out infinite; }
.tour360-enlace-flecha::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -9px -6px; border-right: 3px solid var(--texto); border-bottom: 3px solid var(--texto); transform: rotate(45deg); }
.tour360-enlace:hover .tour360-enlace-flecha { background: #fff; }
@keyframes tour360-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Punto que late sobre la casa muestra (abre el recorrido) */
.pin-punto { position: relative; display: block; width: 34px; height: 34px; border: 0; background: none; padding: 0; cursor: pointer; }   /* el envoltorio ya lo ancla por su centro inferior */
.pin-punto-onda { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; background: rgba(15, 23, 42, .28); opacity: 0; animation: pin-onda 2.4s ease-out infinite; }
.pin-punto-onda.tarde { animation-delay: 1.2s; }
.pin-punto-centro { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--texto); border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.pin-punto:hover .pin-punto-centro { transform: scale(1.25); }
@keyframes pin-onda { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }

/* Fotos 360: botón en la barra y pines con altura */
.selector button.conmutador { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.selector button .selector-texto { font-size: 12px; font-weight: 700; }
.selector button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pin-oculto { visibility: hidden; pointer-events: none; }
.foto-sombra { z-index: 1; pointer-events: none; }
.foto-linea { position: absolute; left: 0; top: 0; height: 0; border-top: 2px dotted rgba(255, 255, 255, .95); transform-origin: 0 0; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .75)); will-change: transform; }
.foto-sombra-mancha { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(15, 23, 42, .7) 0%, rgba(15, 23, 42, .45) 40%, rgba(15, 23, 42, .12) 65%, rgba(15, 23, 42, 0) 78%); animation: foto-sombra-flota 3.2s ease-in-out infinite; }
.foto-burbuja { position: relative; display: block; width: 28px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer; animation: foto-flota 3.2s ease-in-out infinite; }
.foto-burbuja-img { position: absolute; inset: 0; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); transition: transform .2s; }
.foto-burbuja-halo { position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .9); animation: foto-halo 2.4s ease-out infinite; pointer-events: none; }
.foto-burbuja:hover .foto-burbuja-img { transform: scale(1.1); }
@keyframes foto-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes foto-halo { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes foto-sombra-flota { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .75; } }

/* Panel de rendimiento (tecla I) */
.rendimiento { position: fixed; right: 12px; bottom: 40px; z-index: 6; width: min(420px, calc(100vw - 24px)); background: rgba(15, 23, 42, .9); color: #e5e7eb; border-radius: var(--radio); padding: 10px 12px; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: var(--sombra); }
.rendimiento b { font-size: 13px; color: #fff; }
.rendimiento-nota { float: right; color: #9ca3af; font-size: 11px; }
.rendimiento div { display: grid; grid-template-columns: 86px 1fr; gap: 8px; margin-top: 5px; }
.rendimiento dt { color: #9ca3af; }
.rendimiento dd { margin: 0; word-break: break-word; }

/* Modo Expo: rótulo de capítulo y pantalla limpia */
.expo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; pointer-events: none; display: grid; justify-items: start; gap: 8px; padding: 0 0 28px 28px; opacity: 0; transform: translateY(16px); }
.expo.expo-visible { animation: expo-entra .7s ease-out forwards; }
.expo-caja { background: rgba(15, 23, 42, .82); color: #fff; border-radius: 14px; padding: 16px 22px 14px; max-width: min(560px, calc(100vw - 56px)); backdrop-filter: blur(6px); }
.expo-num { font-size: 11px; letter-spacing: 1px; color: #cbd5e1; margin-bottom: 4px; }
.expo-caja h2 { margin: 0; font-size: 26px; line-height: 1.15; }
.expo-caja p { margin: 6px 0 12px; font-size: 15px; color: #e2e8f0; }
.expo-barra { height: 3px; background: rgba(255, 255, 255, .2); border-radius: 2px; overflow: hidden; }
.expo-barra i { display: block; height: 100%; width: 0; background: #fff; animation: expo-barra linear forwards; }
.expo-salir { font-size: 11px; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); padding-left: 4px; }
@keyframes expo-entra { to { opacity: 1; transform: translateY(0); } }
@keyframes expo-barra { from { width: 0; } to { width: 100%; } }
body.expo-activo .selectores, body.expo-activo .leyenda, body.expo-activo .maplibregl-ctrl-top-right, body.expo-activo .torre-panel, body.expo-activo #ficha, body.expo-activo .pin-elevado, body.expo-activo .foto-linea, body.expo-activo .rendimiento { display: none !important; }
@media (max-width: 640px) { .expo { padding: 0 0 20px 14px; } .expo-caja h2 { font-size: 20px; } .expo-caja p { font-size: 13px; } }