/* Scanova360 · LA VISTA 3D (20-oct, fase 1): el visor (visor3d.js), sus botones, la cinta de medir (cinta3d.js) y la hoja de
   compartir (vista3d.js). Lo usan la app (index.html) y la página del enlace (t/index.html). Botones con esquinas, de 44 px en el
   teléfono, en vidrio sobre el lienzo; nada fixed ni sticky (todo absoluto dentro del cuadro del 3D). */
.v3{ position:relative; overflow:hidden; background:#eef3f9; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.pl-lienzo.pl-3d{ padding:0 !important; background:#eef3f9; overflow:hidden; min-height:320px; }
.v3-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; cursor:grab; }
.v3-canvas:active{ cursor:grabbing; }
.v3-midiendo .v3-canvas{ cursor:crosshair; }
.v3-etq{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.v3-etq > *{ position:absolute; left:0; top:0; will-change:transform; }
.v3-etq > [hidden]{ display:none !important; }
.v3-nombre{ translate:-50% -50%; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#1f2a3d; background:rgba(255,255,255,.93); border:1px solid #d3dce8; border-radius:6px; padding:3px 7px; white-space:nowrap; box-shadow:0 2px 6px rgba(16,40,80,.08); }
.v3-pin{ translate:-50% -100%; width:26px; height:26px; border-radius:8px; background:var(--c, #2563eb); border:2px solid #fff; box-shadow:0 3px 8px rgba(16,40,80,.25); display:grid; place-items:center; }
.v3-pin svg{ width:14px; height:14px; fill:#fff; }
.v3-chip{ translate:-50% -50%; display:inline-flex; align-items:baseline; gap:5px; padding:5px 9px; border-radius:9px; background:var(--c, #2563eb); color:var(--t, #fff); font-size:14px; font-weight:800; white-space:nowrap; box-shadow:0 4px 12px rgba(16,40,80,.22); }
.v3-chip small{ font-size:11px; font-weight:600; opacity:.85; }
/* los botones sobre el lienzo */
.v3-ui{ position:absolute; inset:0; pointer-events:none; }
.v3-ui > *, .v3-arriba > *, .v3-abajo > *{ pointer-events:auto; }
.v3-ui [hidden]{ display:none !important; }
.v3-arriba{ position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; pointer-events:none; }
.v3-izq, .v3-der{ display:flex; gap:8px; align-items:flex-start; position:relative; }
.v3-b{ font:inherit; min-height:44px; padding:0 12px; border-radius:10px; border:1px solid rgba(15,26,46,.08); background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(16,40,80,.12); color:#0f1a2e; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; }
.v3-b .ic{ width:18px; height:18px; }
.v3-b.on{ background:#2563eb; color:#fff; border-color:#2563eb; }
.v3-menu{ position:absolute; top:50px; left:0; z-index:3; width:230px; background:#fff; border:1px solid #e5ebf3; border-radius:12px; box-shadow:0 10px 30px rgba(16,40,80,.16); padding:6px 12px 10px; }
.v3-menu p{ margin:6px 0 0; font-size:11.5px; color:#8b98ac; line-height:1.35; }
.v3-chk{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; font-size:14px; font-weight:600; color:#0f1a2e; cursor:pointer; }
.v3-chk input{ -webkit-appearance:none; appearance:none; width:38px; height:22px; border-radius:11px; background:#d3dce8; position:relative; cursor:pointer; flex:0 0 auto; order:2; margin:0; transition:background .15s; }
.v3-chk input::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .15s; }
.v3-chk input:checked{ background:#2563eb; }
.v3-chk input:checked::after{ left:18px; }
.v3-abajo{ position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; }
.v3-seg2{ display:flex; gap:6px; }
.v3-seg2 button, .v3-zoom button, .v3-casa{ font:inherit; min-height:44px; min-width:44px; padding:0 12px; border-radius:10px; border:1px solid rgba(15,26,46,.08); background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(16,40,80,.12); color:#0f1a2e; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; }
.v3-seg2 button.on{ background:#2563eb; color:#fff; border-color:#2563eb; }
.v3-seg2 .ic, .v3-zoom .ic, .v3-casa .ic{ width:18px; height:18px; }
.v3-zoom{ display:flex; flex-direction:column; border-radius:10px; box-shadow:0 4px 14px rgba(16,40,80,.12); }
.v3-zoom button{ box-shadow:none; padding:0; width:44px; }
.v3-zoom button:first-child{ border-radius:10px 10px 0 0; border-bottom:1px solid #e5ebf3; }
.v3-zoom button:last-child{ border-radius:0 0 10px 10px; }
.v3-casa{ padding:0; width:44px; }
/* el panel de la cinta: a la derecha en la computadora, abajo en el teléfono */
.v3-panel{ position:absolute; top:64px; right:10px; max-height:calc(100% - 74px); width:310px; max-width:calc(100% - 20px); z-index:2; display:flex; flex-direction:column; background:#fff; border:1px solid #e5ebf3; border-radius:14px; box-shadow:0 12px 34px rgba(16,40,80,.16); overflow:auto; -webkit-overflow-scrolling:touch; pointer-events:auto; }
.v3-ui.con-panel .v3-abajo{ right:330px; }
.v3-panel-cab{ display:flex; align-items:center; gap:8px; padding:10px 10px 8px 14px; border-bottom:1px solid #eef2f8; }
.v3-panel-cab > b{ font-size:15px; margin-right:auto; }
.v3-seg{ display:inline-flex; background:#f2f6fb; border-radius:9px; padding:3px; }
.v3-seg button{ font:inherit; font-size:13px; font-weight:700; border:0; background:none; color:#56657c; min-height:44px; padding:0 12px; border-radius:7px; cursor:pointer; }
.v3-seg button.on{ background:#fff; color:#2563eb; box-shadow:0 1px 3px rgba(16,40,80,.12); }
.v3-seg button[disabled]{ opacity:.5; cursor:default; }
.v3-x{ width:40px; height:40px; border:0; border-radius:10px; background:#f2f6fb; color:#56657c; display:grid; place-items:center; cursor:pointer; }
.v3-x .ic{ width:16px; height:16px; }
.v3-meds{ flex:1 1 auto; overflow:auto; min-height:56px; }
.v3-med{ width:100%; display:grid; grid-template-columns:12px minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:54px; padding:8px 14px; border:0; border-bottom:1px solid #eef2f8; background:#fff; font:inherit; text-align:left; cursor:pointer; color:#0f1a2e; }
.v3-med.on{ background:#fff8e1; }
.v3-med > i{ width:12px; height:12px; border-radius:3px; background:var(--c); }
.v3-med-t{ min-width:0; display:flex; flex-direction:column; }
.v3-med-t b{ font-size:14px; }
.v3-med-t small{ font-size:12px; color:#56657c; overflow-wrap:anywhere; }
.v3-med-v{ font-size:15px; font-weight:800; white-space:nowrap; }
.v3-med-ok{ width:18px; height:18px; color:#16a34a; }
.v3-pista{ margin:0; padding:14px; font-size:13.5px; color:#56657c; line-height:1.45; }
.v3-panel-acc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:10px 12px 4px; }
.v3-panel-acc .btn{ min-height:44px; padding:0 10px; font-size:14px; }
.v3-panel-acc .btn-accent{ grid-column:1 / -1; }
.v3-nota{ margin:0; padding:6px 14px 10px; font-size:11.5px; color:#8b98ac; line-height:1.4; }
.v3-form{ padding:10px 14px 4px; display:flex; flex-direction:column; gap:10px; flex:0 0 auto; }
.v3-form label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:700; color:#56657c; }
.v3-form select{ font:inherit; font-size:15px; min-height:44px; border:1px solid #d3dce8; border-radius:10px; padding:0 10px; background:#fff; color:#0f1a2e; }
.v3-resumen{ margin:0; font-size:14px; font-weight:700; color:#0f1a2e; line-height:1.4; }
/* aviso de vidrio que se va solo */
.v3-aviso{ position:absolute; top:64px; left:50%; translate:-50% 0; z-index:3; max-width:min(440px, calc(100% - 24px)); margin:0; padding:10px 14px; border-radius:12px; background:rgba(15,26,46,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:13.5px; font-weight:600; line-height:1.4; text-align:center; pointer-events:none; }
.v3-aviso.v3-va{ animation:v3-va 3.2s ease forwards; }
@keyframes v3-va{ 0%{ opacity:0; } 8%{ opacity:1; } 85%{ opacity:1; } 100%{ opacity:0; } }
.v3-estado{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; text-align:center; color:#56657c; font-size:14.5px; }
.v3-estado p{ max-width:420px; margin:0; line-height:1.5; }
/* angosto (teléfono, o un cuadro chico): el panel abajo, los botones con solo el icono */
.v3-host.v3-angosto .v3-panel, .v3.v3-angosto .v3-panel{ top:auto; left:0; right:0; bottom:0; width:auto; max-width:none; max-height:58%; border-radius:16px 16px 0 0; border-left:0; border-right:0; border-bottom:0; }
.v3-angosto .v3-ui.con-panel .v3-abajo{ display:none; }
.v3-angosto .v3-b span, .v3-angosto .v3-seg2 span{ display:none; }
.v3-angosto .v3-b, .v3-angosto .v3-seg2 button{ padding:0; width:44px; justify-content:center; }
.v3-angosto .v3-b.on span{ display:inline; }
.v3-angosto .v3-b.on{ width:auto; padding:0 12px; }
.v3-angosto .v3-panel-acc{ padding-bottom:2px; }
/* la pestaña Floor Plan en 3D: sin lo que es del 2D (cuadrícula, %, pantalla completa, marca de girado) */
#panel-plano.pl-en-3d .pl-visor-cab .pl-rej, #panel-plano.pl-en-3d .pl-visor-cab .pl-zoomer, #panel-plano.pl-en-3d .pl-visor-cab .pl-grande-btn,
#panel-plano.pl-en-3d .pl-visor-cab .pv-sitio, #panel-plano.pl-en-3d .pl-tel-grande{ display:none !important; }

/* ---------- la hoja de compartir (app) ---------- */
.hoja.hoja-3d{ z-index:80; }
.hoja.hoja-3d .hoja-caja{ max-height:92%; max-width:560px; }
@media (min-width:900px){ .hoja.hoja-3d{ align-items:center; } .hoja.hoja-3d .hoja-caja{ border-radius:18px; } }
.e3-sub{ margin:0 0 12px; color:#56657c; font-size:14px; }
.e3-para{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 6px; font-weight:700; }
.e3-seg{ display:flex; flex:1 1 auto; max-width:360px; }
.e3-seg button{ flex:1 1 0; min-height:40px; }
.e3-h{ margin:16px 0 4px; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8b98ac; }
.e3-fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:6px 0; border-bottom:1px solid #eef2f8; }
.e3-fila > span:first-child{ display:flex; flex-direction:column; min-width:0; }
.e3-fila b{ font-size:15px; font-weight:600; }
.e3-fila small{ font-size:12.5px; color:#56657c; }
.e3-fijo, .e3-nunca{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; white-space:nowrap; }
.e3-fijo{ color:#16a34a; } .e3-nunca{ color:#b51b2e; }
.e3-fijo .ic, .e3-nunca .ic{ width:16px; height:16px; }
.e3-dias{ color:#2563eb; }
.e3-sw{ position:relative; display:inline-block; width:50px; height:30px; flex:0 0 auto; }
.e3-sw input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.e3-sw i{ position:absolute; inset:0; border-radius:15px; background:#d3dce8; transition:background .15s; }
.e3-sw i::after{ content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .15s; }
.e3-sw input:checked + i{ background:#2563eb; } .e3-sw input:checked + i::after{ left:23px; }
.e3-sw input:disabled + i{ opacity:.5; }
.e3-listo{ margin:14px 0 8px; font-size:13.5px; color:#0f1a2e; font-weight:600; }
.e3-url{ display:flex; align-items:center; gap:8px; min-height:50px; padding:0 12px; border-radius:12px; background:#f2f6fb; color:#2563eb; }
.e3-url input{ flex:1 1 auto; min-width:0; border:0; background:none; font:inherit; font-size:14.5px; font-weight:700; color:#0f1a2e; }
.e3-acc{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 4px; }
.e3-acc .btn-block{ grid-column:1 / -1; }
.e3-lista{ display:flex; flex-direction:column; }
.e3-enlace{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:1px solid #eef2f8; }
.e3-enlace > div:first-child{ display:flex; flex-direction:column; min-width:0; flex:1 1 220px; }
.e3-enlace b{ font-size:14px; font-weight:600; }
.e3-enlace small{ font-size:12.5px; color:#56657c; }
.e3-enlace.muerto b, .e3-enlace.muerto small{ color:#8b98ac; }
.e3-enlace-acc{ display:flex; gap:8px; }
.e3-enlace-acc .btn{ min-height:40px; font-size:13.5px; padding:0 12px; }
.e3-rojo{ color:#b51b2e; border-color:#f0c6cd; }
.e3-ok{ margin:0 0 10px; padding:10px 12px; border-radius:10px; background:#e4f6ea; color:#14532d; font-size:13.5px; font-weight:600; }
.e3-pie{ margin:16px 0 4px; }
/* angosto: los botones de la cinta en UN renglón (el 3D se sigue viendo arriba) */
.v3-angosto .v3-panel-acc{ padding:8px 10px 2px; }
.v3-angosto .v3-pista{ padding:10px 14px; }
.v3-angosto .v3-med{ min-height:48px; }
.v3-angosto .v3-nota{ padding:4px 12px 8px; font-size:11px; }
.v3-angosto .v3-panel-cab{ padding:6px 8px 6px 14px; }
/* (revisión del diseñador, 20-oct) la salida abajo del panel; nombres de cuartos más suaves al medir; el enlace corto */
.v3-panel-pie{ padding:0 12px 12px; }
.v3-panel-pie .btn{ width:100%; min-height:44px; }
.v3-midiendo .v3-nombre{ opacity:.5; }
.v3-angosto .v3-panel-pie{ padding:0 10px 10px; }
.e3-url-t{ flex:1 1 auto; min-width:0; font-size:15px; font-weight:700; color:#0f1a2e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.e3-url input.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.e3-dias{ color:#0f1a2e; }
/* la lista de medidas nunca se encoge (el panel entero se desplaza si no cabe); en el teléfono, sin botones apagados ni Listo
   (la ✕ de arriba cierra la cinta): el 3D se sigue viendo arriba */
.v3-meds{ flex:0 0 auto; overflow:visible; }
.v3-angosto .v3-panel-acc .btn[disabled]{ display:none; }
.v3-angosto .v3-panel-pie{ display:none; }
/* teléfono: Save, la basura y Clear all en UN renglón (el 3D se queda con más pantalla) */
.v3-quitar .ic{ width:18px; height:18px; }
.v3-panel-acc .v3-quitar .ic{ display:none; }
.v3-angosto .v3-panel-acc{ grid-template-columns:minmax(0,1fr) 44px auto; }
.v3-angosto .v3-panel-acc .btn-accent{ grid-column:auto; font-size:14px; }
.v3-angosto .v3-panel-acc .v3-quitar{ padding:0; width:44px; }
.v3-angosto .v3-panel-acc .v3-quitar .ic{ display:block; }
.v3-angosto .v3-panel-acc .v3-quitar span{ display:none; }
.v3-angosto .v3-panel-acc .btn-outline:not(.v3-quitar){ padding:0 12px; }