/* Tipografía propia, alojada con el visor (no se pide a Google Fonts: ninguna IP sale a terceros por la fuente).
   Geist y Geist Mono · © Vercel y basement.studio · SIL Open Font License 1.1 (fuentes/LICENCIA-Geist-OFL.txt) */
@font-face { font-family: "Geist"; src: url("../fuentes/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fuentes/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Visor Arquitectónico — estilos
   Secciones: 1 variables · 2 base · 3 paneles · 4 controles · 5 listas y explorador · 6 cortes
              7 barra superior y acciones · 8 inicio · 9 diálogos y administrador · 10 avisos · 11 adaptación */

/* ---------- 1. Variables (un solo tema: claro y cálido) ---------- */
/* Paleta: piedra y papel de dibujo como base, en tonos pastel y poco saturados. Un único acento, el grafito cálido, que en
   superficies va en versión pastel con texto oscuro y en texto o íconos en versión apagada. Nada de azules ni de morados;
   todos los neutros son cálidos. */
:root {
  color-scheme: light;
  --fondo: #f6f3ec;
  --panel: rgba(255, 254, 251, 0.9);
  --panel-solido: #fffdf9;
  --texto: #2c2b28;
  --texto-suave: #605c56;
  --borde: rgba(44, 43, 40, 0.5113);
  --borde-fuerte: rgba(44, 43, 40, 0.5112);
  --acento: #45433e;
  --acento-suave: rgba(69, 67, 62, 0.09);
  --acento-fondo: #e9e2d1;
  --acento-hover: #ddd4bf;
  --acento-tinta: #2c2b28;
  --salvia: #b9b2a0;
  --peligro: #a8473d;
  --sombra: 0 0 0 0.5px rgba(40, 36, 30, 0.07), 0 2px 6px rgba(40, 36, 30, 0.05), 0 12px 32px rgba(40, 36, 30, 0.1);   /* capas: contacto, cercana y lejana */
  --radio: 22px;                                   /* esquinas generosas: nada de cajas duras */
  --radio-control: 12px;

  /* Curvas de movimiento (las integradas de CSS son demasiado flojas). Lo que entra o sale usa --salida;
     lo que se mueve por la pantalla usa --transicion; los cambios de color usan ease. */
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
  --transicion: cubic-bezier(0.77, 0, 0.175, 1);
  --resorte: var(--salida);                        /* nombre antiguo: ya no hay rebote */
  --suave: var(--salida);
  --rapido: 160ms;                                 /* pulsaciones */
  --medio: 220ms;                                  /* paneles, ventanas, avisos */
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo);
  color: var(--texto);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .lema { text-wrap: balance; }
p, .nota { text-wrap: pretty; }
::selection { background: rgba(69, 67, 62, 0.2); }
input, textarea { caret-color: var(--acento); }
.n, .cantidades, .ficha td, .modelo .detalle { font-variant-numeric: tabular-nums; }
.contenido, .lista, .tabla-scroll { scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent; }

#lienzo { position: fixed; inset: 0; }
#lienzo canvas { display: block; outline: none; }

kbd {
  padding: 1px 6px;
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel-solido);
  font: 12px ui-monospace, Menlo, monospace;
}
code { font: 12px ui-monospace, Menlo, monospace; background: var(--acento-suave); padding: 0 4px; border-radius: 4px; }
.nota { margin: 6px 0; color: var(--texto-suave); font-size: 12px; }
.error { color: var(--peligro); min-height: 1.2em; margin: 4px 0; }
small { color: var(--texto-suave); font-weight: 400; }
.logo { width: 60px; height: 60px; overflow: visible; color: var(--acento); }
/* El logo se dibuja trazo a trazo y después flota sin parar */
.logo path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 1.1s var(--salida) 0.1s forwards; }
.logo path:nth-of-type(2) { animation-delay: 0.45s; }
@keyframes trazar { to { stroke-dashoffset: 0; } }

/* Con el visor cerrado (pantalla de inicio) se ocultan los controles del visor */
body.en-inicio #barra-superior,
body.en-inicio .panel,
body.en-inicio #barra-acciones,
body.en-inicio #herramientas,
body.en-inicio #tira-vistas,
body.en-inicio #vacio,
body.en-inicio #pie { display: none; }

/* ---------- 3. Paneles ---------- */
.panel {
  position: fixed;
  top: 58px;
  width: 262px;
  max-height: calc(100% - 74px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  animation: entrar-izq 0.32s var(--salida) both;
}
#panel-izquierdo { left: 12px; }
#panel-derecho { right: 12px; width: 284px; max-height: calc(100% - 140px); animation-name: entrar-der; animation-delay: 0.04s; }

.panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
}
.panel h1 { margin: 0; font-size: 14px; }
.panel .contenido {
  overflow-x: hidden; overflow-y: auto; padding: 4px 12px 12px;
  /* Al plegar, el contenido se desvanece y después deja de ocupar sitio (display con allow-discrete). */
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida), display var(--medio) allow-discrete;
}
.panel.plegado .contenido { display: none; opacity: 0; transform: translateY(-6px); transition-duration: 140ms; }
@starting-style { .panel:not(.plegado) .contenido { opacity: 0; transform: translateY(-6px); } }
.panel.plegado > header { border-bottom: 0; }
.panel section { padding: 10px 0; border-bottom: 1px solid var(--borde); }
.panel section:last-child { border-bottom: 0; }
.panel h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
.panel h3 { margin: 12px 0 6px; font-size: 12px; color: var(--texto-suave); }

/* Secciones plegables del panel izquierdo */
.seccion { border-bottom: 1px solid var(--borde); padding: 8px 0; }
.seccion:last-child { border-bottom: 0; }
.seccion > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  padding: 2px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.seccion > summary::-webkit-details-marker { display: none; }
.seccion > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--texto-suave); border-bottom: 1.5px solid var(--texto-suave); transform: rotate(-45deg); margin: 0 2px 1px 2px; transition: transform var(--medio) var(--salida); }
.seccion[open] > summary::before { transform: rotate(45deg); }
.seccion > summary { transition: color var(--rapido) ease; }
.seccion[open] > summary { color: var(--texto); }

/* Las secciones se abren y cierran con un desvanecido corto. No se anima la altura: es una propiedad de layout y se usa decenas de veces al día. */
@supports selector(::details-content) {
  .seccion::details-content { opacity: 0; transition: opacity var(--rapido) var(--salida), content-visibility var(--rapido) allow-discrete; }
  .seccion[open]::details-content { opacity: 1; }
}

/* ---------- 4. Botones y controles ---------- */
button {
  font: inherit;
  padding: 6px 11px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--panel-solido);
  color: var(--texto);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Solo se animan las propiedades que cambian (nunca «all») */
  transition: transform var(--rapido) var(--salida), background-color var(--rapido) ease, border-color var(--rapido) ease,
    color var(--rapido) ease, box-shadow var(--medio) var(--salida), filter var(--rapido) ease, opacity var(--rapido) ease;
}
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) { background: var(--acento-suave); }
}
button:active:not(:disabled) { transform: scale(0.97); transition-duration: 90ms; }   /* se hunde un poco al pulsar */
button:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
button:disabled { opacity: 0.4; cursor: default; }
button.principal {
  background: var(--acento-fondo); border-color: rgba(69, 67, 62, 0.35); color: var(--acento-tinta); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(40, 36, 30, 0.12);
}
@media (hover: hover) and (pointer: fine) {
  button.principal:hover:not(:disabled) { background: var(--acento-hover); border-color: rgba(69, 67, 62, 0.5); }
}
button.ancho { width: 100%; margin-top: 6px; }
button.mini { padding: 2px 8px; font-size: 12px; }
button.peligro { color: var(--peligro); }
button.activo { background: var(--acento-fondo); border-color: rgba(69, 67, 62, 0.35); color: var(--acento-tinta); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
button.plegar { padding: 0 8px; line-height: 20px; }
button.icono { display: inline-grid; place-items: center; padding: 4px; border: 0; background: none; color: var(--texto-suave); }
button.icono.apagado .onda { display: none; }
.ic { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; flex: none; }
.desplegar .ic { transition: transform var(--rapido) var(--salida); }
.desplegar.abierto .ic { transform: rotate(90deg); }
button.icono:not(.apagado) .tacha { display: none; }

#btn-agregar { width: 100%; margin-top: 8px; }
.fila-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fila-botones.tres { grid-template-columns: repeat(3, 1fr); }
.fila-botones.tres button { padding: 6px 4px; font-size: 12px; }
.cuadricula-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.control { display: block; margin-bottom: 10px; }
.control span { display: block; margin-bottom: 4px; }
/* Deslizador: pista fina y pulgar blanco que crece un poco al arrastrarlo */
input[type=range] { width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--borde-fuerte); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--borde-fuerte); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: transform var(--rapido) var(--salida);
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.28);
}
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 5px var(--acento-suave), 0 2px 8px rgba(40, 36, 30, 0.25); }
input[type=range]:disabled { opacity: 0.4; cursor: default; }

.interruptor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.interruptor small { flex-basis: 100%; margin-left: 42px; margin-top: -4px; }
.interruptor.consentimiento { flex-wrap: nowrap; align-items: flex-start; }   /* texto largo: al lado del interruptor, no debajo */
.interruptor.consentimiento > input { margin-top: 2px; }
input[type=checkbox] { accent-color: var(--acento); width: 15px; height: 15px; }

/* Los interruptores sueltos tienen forma de píldora; el óvalo se estira un poco al pulsarlo (scaleX, no width), como en macOS */
.interruptor > input[type=checkbox] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0;
  border-radius: 999px; background: rgba(44, 43, 40, 0.2); cursor: pointer;
  transition: background-color var(--medio) var(--salida);
}
.interruptor > input[type=checkbox]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(34, 32, 28, 0.38);
  transform-origin: left center;
  transition: transform var(--medio) var(--salida);
}
.interruptor > input[type=checkbox]:checked { background: var(--acento); }   /* encendido: grafito; apagado: gris claro */
.interruptor > input[type=checkbox]:checked::after { transform: translateX(14px); transform-origin: right center; }
.interruptor > input[type=checkbox]:active::after { transform: scaleX(1.25); }
.interruptor > input[type=checkbox]:checked:active::after { transform: translateX(14px) scaleX(1.25); }
.interruptor > input[type=checkbox]:disabled { opacity: 0.4; cursor: default; }

input[type=search], input[type=text], input[type=password], input[type=email], textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--panel-solido);
  color: var(--texto);
  font: inherit;
  transition: border-color var(--rapido) ease, box-shadow var(--rapido) ease;
}
input[type=search]:focus, input[type=password]:focus, input:focus, textarea:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }

/* ---------- 5. Modelos, explorador y ficha ---------- */
.modelo { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 6px; padding: 6px 0; }
.modelo + .modelo { border-top: 1px solid var(--borde); }
.modelo .nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modelo .detalle { grid-column: 2 / -1; margin-top: -4px; color: var(--texto-suave); font-size: 12px; }
.modelo .detalle.error { color: var(--peligro); }

#filtros { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#filtros:empty { display: none; }
.ficha-filtro {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 8px; border-radius: 999px;
  background: var(--acento-suave); color: var(--acento); font-size: 12px;
}
.ficha-filtro button { border: 0; background: none; padding: 0 4px; color: inherit; }

.pestanas { display: flex; gap: 4px; margin: 8px 0 4px; padding: 3px; border-radius: 14px; background: var(--acento-suave); }
.pestanas[hidden] { display: none; }
.pestanas button { flex: 1; border: 0; background: none; padding: 4px; }
.pestanas button { transition: background-color var(--medio) var(--salida), box-shadow var(--medio) var(--salida); }
.pestanas button.activa { background: var(--panel-solido); color: var(--acento); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }

.lista { max-height: 300px; overflow-y: auto; margin: 4px -4px 0; padding: 0 4px; }
.fila { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px; padding: 3px 0; }
.fila label { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.fila .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .n, .enlace .n { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.fila label.oculta .nombre { color: var(--texto-suave); text-decoration: line-through; }
.nivel .fila { grid-template-columns: auto 1fr auto auto; }
.desplegar { border: 0; background: none; padding: 0 4px; color: var(--texto-suave); }
.detalle-nivel { margin: 0 0 6px 22px; border-left: 2px solid var(--borde); padding-left: 8px; }
.enlace { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; padding: 2px 4px; text-align: left; border-radius: 6px; }

.barra-resultados { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 6px; }
.barra-resultados .mini + .mini { margin-left: 4px; }
.resultado { display: block; width: 100%; text-align: left; border: 0; border-radius: 8px; background: none; padding: 5px 6px; }
.resultado { transition: background-color 120ms ease; }
@media (hover: hover) and (pointer: fine) { .resultado:hover { background: var(--acento-suave); } }
.resultado strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado small { color: var(--texto-suave); }

#pesadas { margin-top: 10px; }
#pesadas summary { cursor: pointer; color: var(--texto-suave); }

.ficha.vacia { color: var(--texto-suave); }
.ficha .titulo { font-weight: 700; font-size: 14px; word-break: break-word; }
.ficha .subtitulo { color: var(--texto-suave); margin-bottom: 6px; }
.ficha .id { font: 11px ui-monospace, Menlo, monospace; color: var(--texto-suave); word-break: break-all; margin-bottom: 8px; }
.ficha details { border-top: 1px solid var(--borde); padding: 4px 0; }
.ficha summary { cursor: pointer; font-weight: 600; padding: 3px 0; overflow-wrap: anywhere; }
.ficha table { width: 100%; border-collapse: collapse; margin: 2px 0 6px; }
.ficha td { padding: 2px 0; vertical-align: top; word-break: break-word; }
.ficha td:first-child { width: 48%; padding-right: 8px; color: var(--texto-suave); }

/* ---------- 6. Cortes ---------- */
#cortes h3 { margin: 12px 0 6px; font-size: 12px; color: var(--texto-suave); }
#cortes .par { margin: 6px 0 10px; padding-left: 4px; }
#cortes .par span { display: block; font-size: 12px; color: var(--texto-suave); }
#cortes .par input { margin: 0; }
.corte { margin: 8px 0; padding: 8px; border: 1px solid var(--borde); border-radius: 14px; }
.corte-titulo { margin-bottom: 4px; }
.corte-botones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- 7. Barra superior, acciones, estado ---------- */
#barra-superior {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  max-width: calc(100% - 24px);
  background: var(--panel);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--borde);
  border-radius: 999px;
  box-shadow: var(--sombra);
  animation: bajar 0.32s var(--salida) both;
  z-index: 3;
}
#barra-superior button { border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
#titulo-proyecto { padding: 0 10px; font-weight: 600; max-width: 24vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#barra-acciones {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--panel);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  animation: subir 0.32s var(--salida) 0.06s both;
}

#pie { position: fixed; right: 14px; bottom: 6px; display: flex; align-items: center; gap: 2px; }
#pie button { border: 0; background: none; padding: 2px 6px; font-size: 11px; color: var(--texto-suave); }

#estado {   /* al centro sobre la barra de herramientas: el panel izquierdo lo tapaba y se cortaba */
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; max-width: min(560px, calc(100vw - 32px)); text-align: center;
  padding: 4px 10px; border-radius: 8px;
  background: var(--panel); color: var(--texto-suave); font-size: 12px;
}
#estado:empty { display: none; }
#estado.ocupado::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px;
  border: 2px solid var(--acento); border-right-color: transparent; border-radius: 50%;
  animation: girar 0.8s linear infinite; vertical-align: -1px;
}

#vacio {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 310px; pointer-events: none; color: var(--texto-suave);
}
#vacio h2 { margin: 0 0 6px; font-size: 20px; color: var(--texto); }
#vacio p { margin: 0; max-width: 380px; }
#vacio[hidden] { display: none; }

#soltar {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(233, 226, 209, 0.94); color: var(--acento-tinta); font-size: 22px; z-index: 20;
}
#soltar.activo { display: flex; }

/* ---------- 8. Pantalla de inicio ---------- */
/* Acceso: título a la izquierda sobre el departamento que se construye, y los proyectos agrupados por tipo en tarjetas lisas. */
#inicio {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  /* velo claro y liso: transparente arriba, donde se ve el departamento construyéndose, y casi opaco donde empiezan los proyectos */
  background: linear-gradient(180deg, rgba(246, 243, 236, 0) 0%, rgba(246, 243, 236, 0.1) 22%, rgba(246, 243, 236, 0.95) 58%);
  transition: opacity 0.3s var(--salida), transform 0.3s var(--salida);
}
body:not(.en-inicio) #inicio { opacity: 0; transform: scale(1.03); pointer-events: none; visibility: hidden; transition-property: opacity, transform, visibility; transition-duration: 0.2s, 0.2s, 0s; transition-delay: 0s, 0s, 0.2s; }

.inicio-contenido { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 44px 32px 36px; }
.inicio-cabecera { display: grid; justify-items: start; gap: 4px; text-align: left; }
/* Entran uno tras otro, con pasos de 40 ms, y nunca bloquean la interacción */
.inicio-cabecera > :not(.logo), .inicio-grupo, .inicio-acciones, .inicio-pie, .obra, .inicio-buscar, .continuar { animation: subir 0.32s var(--salida) both; }
.inicio-cabecera > :nth-child(3) { animation-delay: 40ms; } .inicio-cabecera > :nth-child(4) { animation-delay: 80ms; }
.obra { animation-delay: 120ms; } .inicio-buscar { animation-delay: 150ms; }
.inicio-cabecera h1 { margin: 10px 0 2px; font-size: 44px; font-weight: 680; letter-spacing: -0.035em; line-height: 1.05; }
.lema { margin: 0 0 6px; font-size: 16px; color: var(--texto-suave); max-width: 46ch; }
.autoria { margin: 0; font-size: 13px; color: var(--texto-suave); }
.autoria strong { color: var(--texto); }
.autoria small { display: none; }

/* Línea de obra: las etapas son botones y debajo corre una línea que se arrastra (la maqueta del fondo la sigue) */
.obra { margin: 22px 0 0; max-width: 520px; }
.fases { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 18px; margin: 0; padding: 0; list-style: none; counter-reset: fase; }
.fases li { counter-increment: fase; }
.fases button {
  padding: 3px 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--texto-suave); font-size: 13px;
  transition: color var(--medio) var(--salida);
}
.fases button::before { content: counter(fase) "  "; font-variant-numeric: tabular-nums; opacity: 0.55; }
@media (hover: hover) and (pointer: fine) { .fases button:hover { color: var(--texto); background: none; } }
.fases li.hecha button { color: var(--texto); }
.fases li.actual button { color: var(--texto); font-weight: 600; }
.obra-pista { margin-top: 8px; }
#linea-obra { --avance: 0%; height: 20px; }
#linea-obra::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--texto) var(--avance), var(--borde-fuerte) var(--avance)); }
#linea-obra::-moz-range-track { height: 3px; background: linear-gradient(90deg, var(--texto) var(--avance), var(--borde-fuerte) var(--avance)); }
#linea-obra::-webkit-slider-thumb { transition: transform var(--rapido) var(--salida); }
#linea-obra:active::-webkit-slider-thumb { transform: scale(1.25); }
.obra-ayuda { margin: 2px 0 0; font-size: 11.5px; color: var(--texto-suave); }

/* Buscar y filtrar proyectos */
.inicio-buscar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; }
#buscar-proyecto { flex: 1 1 240px; max-width: 340px; border-radius: 999px; padding-inline: 16px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtros button { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; background: transparent; }
.filtros button[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--panel-solido); }
.sin-resultados { margin-top: 24px; }
.sin-resultados button { margin-left: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; }

/* Continuar donde te quedaste */
.continuar {
  display: flex; align-items: center; gap: 14px; width: 100%; max-width: 520px; margin-top: 22px; padding: 8px 16px 8px 8px; text-align: left;
  border-radius: 18px; background: var(--panel-solido); border: 1px solid var(--borde); animation-delay: 170ms;
  transition: transform var(--medio) var(--salida), box-shadow var(--medio) var(--salida);
}
.continuar img { width: 84px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 11px; flex: none; }
.continuar span { display: grid; flex: 1; min-width: 0; }
.continuar small { font-size: 11.5px; color: var(--texto-suave); }
.continuar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .continuar:hover { transform: translateY(-2px); box-shadow: var(--sombra); background: var(--panel-solido); } }
.continuar:active { transform: scale(0.985); }

.inicio-grupo { margin-top: 34px; animation-delay: 160ms; }
.inicio-grupo h2 { margin: 0 0 12px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.inicio-grupo h2 small { margin-left: 8px; font-weight: 400; color: var(--texto-suave); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tarjeta {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px; text-align: left;
  border-radius: 20px; background: var(--panel-solido); border: 1px solid var(--borde);
  box-shadow: 0 1px 2px rgba(40, 36, 30, 0.04);
  animation: subir 0.32s var(--salida) both;
  animation-delay: calc(180ms + var(--n, 0) * 40ms);
  transition: transform var(--medio) var(--salida), box-shadow var(--medio) var(--salida), border-color var(--rapido) ease;
}
.tarjeta:nth-child(2) { --n: 1; } .tarjeta:nth-child(3) { --n: 2; } .tarjeta:nth-child(4) { --n: 3; }
.tarjeta:nth-child(n+5) { --n: 4; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { transform: translateY(-2px); border-color: var(--borde-fuerte); box-shadow: var(--sombra); background: var(--panel-solido); }
  .tarjeta:hover .meta .ic { transform: translateX(3px); }
}
.tarjeta:active:not(:disabled) { transform: scale(0.985); }
.tarjeta strong { font-size: 15px; letter-spacing: -0.01em; }
.tarjeta .descripcion { color: var(--texto-suave); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.tarjeta .meta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--texto); font-weight: 600; font-size: 12px; }
.tarjeta .meta .ic { transition: transform var(--rapido) var(--salida); }
.tarjeta .meta small { font-weight: 400; margin-right: auto; color: var(--texto-suave); }

.inicio-acciones { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin-top: 34px; }
.inicio-acciones .principal { padding: 9px 18px; border-radius: 999px; }
.inicio-acciones #btn-admin { border: 0; background: none; color: var(--texto-suave); }
.inicio-pie { text-align: left; color: var(--texto-suave); font-size: 12px; margin-top: 14px; animation-delay: 280ms; }
.logo { width: 38px; height: 38px; }
.etiqueta { display: none; }

/* ---------- 9. Diálogos y administrador ---------- */
dialog {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  padding: 24px 26px;
  border: 1px solid var(--borde);
  border-radius: 28px;
  background: var(--panel-solido);
  color: var(--texto);
  box-shadow: 0 20px 60px rgba(34, 32, 28, 0.38);
}
/* Los diálogos son modales: se quedan centrados. Entran un poco más despacio de lo que salen (la salida responde al sistema). */
dialog {
  opacity: 0; transform: scale(0.96) translateY(6px);
  transition: opacity 140ms var(--salida), transform 140ms var(--salida), overlay 140ms allow-discrete, display 140ms allow-discrete;
}
dialog[open] { opacity: 1; transform: none; transition-duration: var(--medio); }
@starting-style { dialog[open] { opacity: 0; transform: scale(0.96) translateY(6px); } }
dialog::backdrop {
  background: rgba(34, 32, 28, 0.38); backdrop-filter: blur(4px); opacity: 0;     /* se desvanece con opacity: animar backdrop-filter es caro */
  transition: opacity 140ms var(--salida), overlay 140ms allow-discrete, display 140ms allow-discrete;
}
dialog[open]::backdrop { opacity: 1; transition-duration: var(--medio); }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
dialog h2 { margin: 0 0 8px; font-size: 20px; }
dialog h3 { margin: 16px 0 6px; font-size: 13px; }
dialog .logo { display: block; margin: 0 auto 6px; }
#dialogo-acerca { text-align: center; }
.acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
#dialogo-acerca .acciones { justify-content: center; }

.pasos { padding-left: 20px; margin: 8px 0; }
.pasos li { margin: 4px 0; }
.gestos { padding-left: 18px; margin: 4px 0; }
.atajos { width: 100%; border-collapse: collapse; }
.atajos td { padding: 3px 6px 3px 0; }

#dialogo-admin { width: min(620px, calc(100% - 32px)); }
dialog.chico { width: min(380px, calc(100% - 32px)); }
dialog.ancho { width: min(900px, calc(100% - 32px)); }

/* Exportar plano */
.barra-plano { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 8px 0; }
.barra-plano label { display: flex; align-items: center; gap: 8px; }
select { padding: 5px 8px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel-solido); color: var(--texto); font: inherit; max-width: 100%; }
.vista-plano { display: grid; place-items: center; min-height: 160px; max-height: 50vh; overflow: auto; padding: 10px; border: 1px solid var(--borde); border-radius: 14px; background: #ebe8df; }
.vista-plano svg { max-width: 100%; max-height: 46vh; width: auto; height: auto; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
#dialogo-plano .acciones { justify-content: flex-end; }

/* Cantidades */
.barra-cantidades { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 10px; }
.barra-cantidades .espacio { flex: 1; }
.barra-cantidades .interruptor { padding: 0; }
.segmentado { display: inline-flex; padding: 3px; gap: 3px; border-radius: 14px; background: var(--acento-suave); }
.segmentado button { border: 0; background: none; padding: 3px 12px; }
.segmentado button.activo { background: var(--panel-solido); color: var(--texto); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.tabla-scroll { max-height: 52vh; overflow: auto; border: 1px solid var(--borde); border-radius: 14px; }
.cantidades { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cantidades th, .cantidades td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--borde); }
.cantidades th { position: sticky; top: 0; background: var(--panel-solido); font-size: 12px; color: var(--texto-suave); }
.cantidades .num { text-align: right; white-space: nowrap; }
.cantidades tr.grupo td { font-weight: 600; background: var(--acento-suave); }
.cantidades tr.hijo .nom { padding-left: 34px; }
.cantidades tr.total td { font-weight: 700; border-top: 2px solid var(--borde); position: sticky; bottom: 0; background: var(--panel-solido); }
.cantidades .ver { width: 1%; }
#form-pin { display: grid; gap: 8px; max-width: 320px; }
.lista-admin { margin: 10px 0; }
.fila-admin { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.fila-admin small { display: block; }
.acciones-admin { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.formulario { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--borde); border-radius: 16px; }
.formulario label { display: grid; gap: 4px; font-weight: 600; }

/* ---------- 10. Avisos y animaciones ---------- */
#avisos { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; z-index: 30; pointer-events: none; }
.aviso {
  padding: 8px 16px; border-radius: 999px; background: var(--panel-solido); color: var(--texto);
  box-shadow: var(--sombra); border: 1px solid var(--borde);
  opacity: 0; transform: translateY(-8px) scale(0.96);
  transition: opacity 180ms var(--salida), transform var(--medio) var(--salida);
}
.aviso.visible { opacity: 1; transform: none; }
.aviso.exito { border-color: #c9a35a; }
.aviso.error { border-color: var(--peligro); color: var(--peligro); }

/* Entradas: nunca desde cero; siempre con un poco de opacidad y de escala previas */
@keyframes entrar { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes entrar-izq { from { opacity: 0; transform: translateX(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes entrar-der { from { opacity: 0; transform: translateX(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes bajar { from { opacity: 0; transform: translate(var(--x, 0), -10px); } to { opacity: 1; transform: translate(var(--x, 0), 0); } }
@keyframes subir { from { opacity: 0; transform: translate(var(--x, 0), 10px); } to { opacity: 1; transform: translate(var(--x, 0), 0); } }
@keyframes girar { to { transform: rotate(360deg); } }
#barra-acciones, #herramientas, #tira-vistas { --x: -50%; }
#barra-superior { --x: 0px; }

/* Quien prefiere menos movimiento no ve animaciones */
@media (prefers-reduced-motion: reduce) {
  /* «Menos movimiento» no es «ninguno»: se conservan los desvanecidos y los cambios de color; se quita todo desplazamiento y escala. */
  @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
  *, *::before, *::after { animation-name: aparecer !important; animation-delay: 0ms !important; animation-duration: 0.2s !important; transition-property: opacity, background-color, color, border-color, overlay, display !important; }
  #estado.ocupado::before { animation-name: girar !important; animation-duration: 0.8s !important; }
  .logo path { animation: none !important; stroke-dashoffset: 0; }
  dialog, .aviso, .panel .contenido { transform: none !important; }
}

/* ---------- 11. Pantallas pequeñas ---------- */
@media (max-width: 900px) {
  .panel { width: 220px; }
  #panel-derecho { width: 240px; }
  #vacio { padding: 24px 12px 140px; justify-content: flex-end; }
  #titulo-proyecto { display: none; }
}

/* Teléfono: los dos paneles no caben uno junto al otro. El izquierdo queda arriba y el derecho abajo, ambos casi a todo el ancho y
   plegados al abrir (los pliega la interfaz); se abren con su botón y el visor sigue visible entre ellos. */
@media (max-width: 700px) {
  .panel, #panel-derecho { left: 12px; right: 12px; width: auto; }
  #panel-izquierdo { top: 70px; max-height: 42%; }
  #panel-derecho { top: auto; bottom: 96px; max-height: 32%; animation-name: entrar-izq; }
  #barra-acciones { bottom: 34px; max-width: calc(100% - 24px); }
  #barra-acciones button { padding-inline: 8px; white-space: nowrap; }
  #barra-superior { max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
  .inicio-contenido { padding: 28px 16px 24px; }
  .inicio-cabecera h1 { font-size: 32px; }
  .rejilla { grid-template-columns: 1fr; }
}

/* Pantallas táctiles: objetivos de al menos 44 px (los de ratón se quedan compactos) */
@media (pointer: coarse) {
  button, select, summary, .interruptor { min-height: 44px; }
  button.mini, button.icono { min-width: 44px; }
  input[type=checkbox] { min-width: 20px; }
}

/* ---------- Recorrido en primera persona ---------- */
body.recorriendo #panel-izquierdo, body.recorriendo #panel-derecho, body.recorriendo #barra-acciones, body.recorriendo #barra-superior, body.recorriendo #pie {
  animation: none !important; opacity: 0 !important; pointer-events: none !important; transform: translateY(-6px) !important;   /* las animaciones de entrada dejan opacity: 1 fijo */
}
.panel, #barra-acciones, #barra-superior, #pie { transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida); }
#aviso-recorrido {
  position: fixed; left: 50%; bottom: 22px; z-index: 6; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
  max-width: calc(100% - 24px); padding: 9px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--borde);
  box-shadow: var(--sombra); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--texto-suave); font-size: 12px;
  opacity: 0; pointer-events: none; transform: translate(-50%, 10px);
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida);
}
#aviso-recorrido kbd { margin-right: 2px; }
#aviso-recorrido .opcion-camara-estable { display: none; align-items: center; gap: 6px; cursor: pointer; }
body.recorriendo #aviso-recorrido .opcion-camara-estable { display: flex; pointer-events: auto; }
body.recorriendo #aviso-recorrido { opacity: 1; transform: translate(-50%, 0); }
body.recorriendo #lienzo canvas { cursor: crosshair; }

/* Controles del recorrido: botón para salir (también con el ratón) y joystick para pantallas táctiles */
#salir-recorrido {
  position: fixed; top: 14px; right: 14px; z-index: 7; padding: 7px 16px; border-radius: 999px; background: var(--panel); backdrop-filter: blur(20px);
  opacity: 0; pointer-events: none; transform: translateY(-6px); box-shadow: var(--sombra);
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida);
}
body.recorriendo #salir-recorrido { opacity: 1; pointer-events: auto; transform: none; }
#joystick {
  position: fixed; left: 24px; bottom: 76px; z-index: 7; width: 120px; height: 120px; border-radius: 50%; display: none; touch-action: none;
  background: rgba(255, 253, 249, 0.55); border: 1px solid var(--borde-fuerte); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#joystick-pomo {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: var(--panel-solido); box-shadow: var(--sombra); transition: transform 120ms var(--salida); pointer-events: none;
}
@media (pointer: coarse) { body.recorriendo #joystick { display: block; } }
body.recorriendo #lienzo canvas { touch-action: none; }

/* ---------- Medición ---------- */
.medida {
  position: fixed; left: 0; top: 0; z-index: 8; padding: 3px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  background: var(--panel-solido); border: 1px solid var(--borde-fuerte); box-shadow: var(--sombra);
  font: 600 12px/1.4 inherit; font-variant-numeric: tabular-nums; color: var(--texto);
  animation: medida-entra 0.22s var(--salida) both;
}
@keyframes medida-entra { from { opacity: 0; } to { opacity: 1; } }
body.midiendo #lienzo canvas { cursor: crosshair; }

/* ---------- Microanimaciones ---------- */
/* Las secciones plegables se despliegan con suavidad (navegadores que admiten ::details-content; en los demás se abren de golpe) */
:root { interpolate-size: allow-keywords; }
.seccion::details-content { block-size: 0; overflow: clip; transition: block-size var(--medio) var(--salida), content-visibility var(--medio) allow-discrete; }
.seccion[open]::details-content { block-size: auto; }

/* Las filas de modelos y de pisos entran con un leve desvanecido al aparecer */
.modelo, .fila-piso, .resultado { transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida), background-color var(--rapido) ease; }
@starting-style { .modelo, .fila-piso { opacity: 0; transform: translateY(6px); } }

/* Casillas: un pequeño resorte al marcar */
input[type=checkbox]:not(:disabled):active { transform: scale(0.88); }
input[type=checkbox] { transition: transform 140ms var(--salida), background-color var(--rapido) ease, border-color var(--rapido) ease; }

/* Pestañas y segmentos: el cambio de fondo y de color se funde en lugar de saltar */
.pestanas button, .segmentado button { transition: background-color var(--rapido) ease, color var(--rapido) ease, box-shadow var(--medio) var(--salida), transform var(--rapido) var(--salida); }

@media (prefers-reduced-motion: reduce) {
  .seccion::details-content { transition: none; }
  @starting-style { .modelo, .fila-piso { transform: none; } }
}

/* ---------- Cubo de orientación ---------- */
#cubo-orientacion {
  --lado-cubo: 42px; --medio-cubo: 21px;
  position: fixed; right: 18px; bottom: 44px; z-index: 5; width: var(--lado-cubo); height: var(--lado-cubo);   /* esquina inferior derecha, sobre el pie (girado sobresale de su caja) */
  perspective: none; transition: opacity var(--medio) var(--salida);
}
#cubo-orientacion .cubo { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
#cubo-orientacion .cara {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border-radius: 6px;
  background: rgba(255, 253, 249, 0.92); border: 1px solid var(--borde-fuerte); color: var(--texto-suave);
  font-size: 7px; font-weight: 600; letter-spacing: 0.01em; backface-visibility: hidden;
}
@media (hover: hover) and (pointer: fine) { #cubo-orientacion .cara:not(:disabled):hover { background: var(--acento-fondo); color: var(--texto); } }
#cubo-orientacion .cara:disabled { opacity: 1; cursor: default; }
body.en-inicio #cubo-orientacion, body.recorriendo #cubo-orientacion { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { #cubo-orientacion { display: none; } }   /* en el teléfono no cabe junto a los paneles; se usan los botones de Vistas */

/* ---------- Vistas guardadas ---------- */
.vistas-guardadas { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.vistas-guardadas li { display: flex; align-items: center; gap: 4px; }
.vistas-guardadas .ir-vista { flex: 1; text-align: left; }
.vistas-guardadas .nota { margin: 0; }

/* Aviso cuando el catálogo de Drive no se pudo leer (con reintento) */
.aviso-catalogo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 0; padding: 12px 16px;
  border: 1px solid var(--borde-fuerte); border-radius: 16px; background: var(--panel-solido); color: var(--texto);
}

/* ---------- Disposición de trabajo: barra de navegación, herramientas abajo al centro y dos modos ---------- */
/* Como en los visores de coordinación (Speckle, Autodesk): el modelo manda; la navegación va arriba a los lados y las
   herramientas en una sola barra abajo al centro. Modo Presentación: sin paneles. Modo Revisión: con paneles. */
#barra-superior {
  left: 12px; right: 12px; top: 10px; transform: none; justify-content: space-between; gap: 12px;
  padding: 0; max-width: none; background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none;
}
#barra-superior .grupo-barra {
  display: flex; align-items: center; gap: 4px; padding: 4px; pointer-events: auto; min-width: 0;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 999px; box-shadow: var(--sombra);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
#barra-superior .segmentado { border-radius: 999px; background: var(--acento-suave); }
#barra-superior .segmentado button { border: 0; background: none; padding: 4px 12px; }
#barra-superior .segmentado button[aria-checked="true"] { background: var(--panel-solido); color: var(--texto); font-weight: 600; box-shadow: 0 1px 3px rgba(40, 36, 30, 0.12); }
#barra-superior .icono { padding: 4px 8px; }
#titulo-proyecto { max-width: 34vw; }

#herramientas {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 2px; padding: 5px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  animation: subir 0.32s var(--salida) 0.04s both;
}
.herramienta {
  display: grid; justify-items: center; gap: 3px; min-width: 66px; padding: 7px 8px 6px; border: 0; border-radius: 13px;
  background: none; color: var(--texto-suave); font-size: 11px;
}
.herramienta .ic { width: 19px; height: 19px; color: var(--texto); }
@media (hover: hover) and (pointer: fine) { .herramienta:hover:not(:disabled) { background: var(--acento-suave); color: var(--texto); } }
.herramienta.activo { background: var(--acento-fondo); color: var(--texto); font-weight: 600; box-shadow: none; }

/* Acciones sobre el elemento elegido: solo aparecen cuando hay selección, encima de las herramientas */
#barra-acciones { bottom: 92px; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); animation: none;
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida); }
body.con-seleccion #barra-acciones, body.con-ocultos #barra-acciones { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

/* Tira de vistas */
#tira-vistas {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 4; width: min(860px, calc(100% - 24px));
  display: grid; gap: 10px; padding: 12px; background: var(--panel-solido); border: 1px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra);
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida), display var(--medio) allow-discrete;
}
#tira-vistas[hidden] { display: none; opacity: 0; transform: translate(-50%, 10px); }
@starting-style { #tira-vistas:not([hidden]) { opacity: 0; transform: translate(-50%, 10px); } }
.tira-lista { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.tira-lista .nota { margin: 6px 4px; }
.vista-tarjeta {
  position: relative; flex: none; width: 168px; padding: 0; overflow: hidden; border-radius: 14px; text-align: left; background: var(--fondo);
}
.vista-tarjeta img, .vista-tarjeta .sin-imagen { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #ebe9e4; }
.vista-tarjeta span { display: block; padding: 6px 10px 8px; font-size: 12px; font-weight: 600; }
.vista-tarjeta .quitar { position: absolute; top: 6px; right: 6px; padding: 2px; border-radius: 999px; background: rgba(255, 253, 249, 0.9); opacity: 0; transition: opacity var(--rapido) ease; }
@media (hover: hover) and (pointer: fine) { .vista-tarjeta:hover .quitar { opacity: 1; } }
.vista-tarjeta.actual { outline: 2px solid var(--acento); outline-offset: 2px; }
.tira-acciones { display: flex; justify-content: space-between; gap: 8px; }

/* Modo Presentación: sin paneles, el modelo a pantalla completa */
body.modo-presentacion .panel { opacity: 0; pointer-events: none; transform: translateY(-6px); animation: none; }
body.modo-presentacion #vacio { padding-inline: 24px; }

body.recorriendo #herramientas, body.recorriendo #tira-vistas, body.presentando #herramientas { opacity: 0 !important; pointer-events: none !important; }
#herramientas, #tira-vistas { transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida); }

@media (max-width: 700px) {
  #barra-superior .segmentado button { padding: 4px 8px; }
  #titulo-proyecto { display: none; }
  .herramienta { min-width: 52px; padding: 6px 4px; }
  .herramienta span { font-size: 11px; }
  #herramientas { bottom: 10px; }
  #barra-acciones, #tira-vistas { bottom: 80px; }
  /* Con algo seleccionado, el panel sube para que la barra de acciones no lo tape */
  #panel-derecho { transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida), translate var(--medio) var(--salida); }
  body.con-seleccion #panel-derecho, body.con-ocultos #panel-derecho { translate: 0 -66px; }
  #barra-acciones { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }   /* «Mostrar todo» se alcanza deslizando */
  #barra-acciones::-webkit-scrollbar { display: none; }
}

/* Tarjetas de proyecto con la imagen de la última visita */
.tarjeta.con-imagen { padding-top: 0; overflow: hidden; }
.tarjeta-imagen { display: block; width: calc(100% + 2 * var(--relleno-tarjeta, 18px)); margin: 0 calc(-1 * var(--relleno-tarjeta, 18px)) 12px; aspect-ratio: 16 / 9; object-fit: cover; background: #ebe9e4; transition: transform var(--medio) var(--salida); }
@media (hover: hover) and (pointer: fine) { .tarjeta.con-imagen:hover .tarjeta-imagen { transform: scale(1.02); } }
@media (hover: none) { .vista-tarjeta .quitar { opacity: 1; } }
.vista-tarjeta:active { transform: scale(0.98); }

/* Durante la presentación, la tira se reduce a un solo botón para dejar ver el modelo */
body.presentando .tira-lista, body.presentando #btn-tira-guardar { display: none; }
/* Vistas: en Revisión se prepara la presentación (guardar vistas, recorrido automático); en Presentación sólo se presenta */
#btn-tira-preparar { display: none; }
body.modo-presentacion #btn-tira-preparar { display: inline-flex; }
body.presentando #btn-tira-preparar { display: none; }
body.modo-presentacion #btn-tira-guardar, body.presentando .recorrido-espera { display: none; }
body.modo-presentacion .vista-solo-revision, body:not(.modo-presentacion) .vista-solo-presentacion { display: none; }
body.modo-presentacion .panel-analizar, body.modo-presentacion .panel-render { display: none; }
body.modo-presentacion #btn-nota-editar, body.modo-presentacion #btn-nota-borrar { display: none; }   /* en Presentación las notas se leen */   /* respaldo: herramientas técnicas sólo en Revisión */
body.presentando #tira-vistas { width: auto; bottom: 18px; padding: 6px; border-radius: 999px; }
body.presentando .tira-acciones button { border-radius: 999px; }
@media (max-height: 560px) { .vista-tarjeta { width: 128px; } }
.tarjeta-imagen.vacia { display: grid; place-items: center; color: var(--texto-suave);
  background: linear-gradient(160deg, #f1f0ec, #e6e4df); }
.tarjeta-imagen.vacia .ic { width: 22px; height: 22px; opacity: 0.45; }
@media (max-width: 480px) {
  #btn-ayuda { display: none; }              /* los atajos de teclado no aplican en el teléfono; queda «Acerca» */
  #barra-superior .grupo-barra { gap: 4px; }
  #btn-inicio { padding-inline: 10px; }
}

/* Ajustes finos del contexto (se activan cuando hay un contexto puesto) */
.ajustes-contexto { display: grid; gap: 6px; margin: 2px 0 6px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 14px; }
.ajustes-contexto legend { padding: 0 4px; font-size: 11px; color: var(--texto-suave); }
.ajustes-contexto[disabled] { opacity: 0.5; }
.ajustes-contexto output { float: right; font-variant-numeric: tabular-nums; color: var(--texto-suave); }

/* ============ Lámina 2D (planos) ============ */
#lamina {
  position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto 1fr;
  background: var(--fondo);
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida), display var(--medio) allow-discrete;
}
#lamina[hidden] { display: none; opacity: 0; transform: scale(0.99); }
@starting-style { #lamina:not([hidden]) { opacity: 0; transform: scale(0.99); } }
.lamina-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px;
  background: var(--panel-solido); border-bottom: 1px solid var(--borde);
}
.lamina-titulos { display: grid; min-width: 0; flex: 1 1 220px; }
.lamina-titulos strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lamina-titulos small { color: var(--texto-suave); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lamina-elegir { max-width: 280px; }
.lamina-zoom { display: flex; align-items: center; gap: 4px; }
.lamina-zoom span { min-width: 52px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.lamina-acciones { display: flex; gap: 6px; }
.lamina-lienzo {
  position: relative; overflow: hidden; cursor: grab; touch-action: none;
  background-color: #f3f2ef;
  background-image: radial-gradient(circle, rgba(60, 58, 52, 0.09) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.lamina-lienzo.arrastrando { cursor: grabbing; }
.lamina-contenido { position: absolute; top: 0; left: 0; transform-origin: 0 0; display: grid; gap: 24px; }
.lamina-contenido > * { display: block; background: #fefefd; box-shadow: 0 1px 2px rgba(40, 38, 34, 0.08), 0 8px 30px rgba(40, 38, 34, 0.08); }
.lamina-contenido img, .lamina-contenido canvas { max-width: none; user-select: none; -webkit-user-drag: none; }
.dibujo-dxf path[stroke] { vector-effect: non-scaling-stroke; stroke-width: var(--trazo, 1px); }
body.con-lamina #herramientas, body.con-lamina #barra-superior, body.con-lamina .panel, body.con-lamina #tira-vistas { visibility: hidden; }
@media (max-width: 700px) {
  .lamina-barra { gap: 6px; padding: 8px 10px; }
  #lamina-elegir { max-width: 100%; flex: 1 1 100%; order: 3; }
  .lamina-acciones button { padding-inline: 10px; }
}

/* Compartir */
.compartir-enlace { display: flex; gap: 6px; margin: 10px 0; }
.compartir-enlace input { flex: 1; min-width: 0; font-size: 12.5px; }
.compartir-botones { display: flex; flex-wrap: wrap; gap: 6px; }
a.boton {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--panel-solido); color: var(--texto); font-size: 13px; text-decoration: none;
  transition: transform var(--rapido) var(--salida), border-color var(--rapido) ease;
}
@media (hover: hover) and (pointer: fine) { a.boton:hover { border-color: var(--borde-fuerte); } }
a.boton:active { transform: scale(0.97); }
.compartir-qr { display: grid; place-items: center; margin: 14px auto 4px; width: 168px; min-height: 60px; }
.compartir-qr svg { width: 168px; height: 168px; border-radius: 12px; background: #fff; }
body.en-inicio #btn-compartir { display: none; }
@media (max-width: 480px) { #btn-compartir .texto-boton { display: none; } }

/* Rótulo de la vista en la presentación: abajo a la izquierda, grande y sobrio, como un cartel de lámina */
.rotulo-vista {
  position: fixed; left: 28px; bottom: 28px; z-index: 5; display: grid; gap: 2px; padding: 12px 18px 14px;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida), display var(--medio) allow-discrete;
}
.rotulo-vista[hidden] { display: none; opacity: 0; transform: translateY(8px); }
@starting-style { .rotulo-vista:not([hidden]) { opacity: 0; transform: translateY(8px); } }
.rotulo-vista small { font-size: 11px; color: var(--texto-suave); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.rotulo-vista strong { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
@media (max-width: 700px) { .rotulo-vista { left: 12px; right: 12px; bottom: 76px; } .rotulo-vista strong { font-size: 17px; } }
body.presentando #barra-superior { opacity: 0; pointer-events: none; transition: opacity var(--medio) var(--salida); }

/* =====================================================================================================================
   Rediseño 3 · homologado de referentes (Figma UI3, Spline, Apple, Linear/Vercel, Speckle, Sketchfab)
   - Tipografía Geist (Vercel) con números tabulares en Geist Mono.
   - «Cromo» oscuro y flotante para las herramientas: contrasta con la escena clara y no compite con el modelo
     (crítica a UI3: una barra del mismo tono que el lienzo se pierde).
   - Pistas con el atajo al pasar el cursor (Linear): instantáneas después de la primera.
   - Paneles claros de vidrio, con jerarquía por peso y tamaño, no por cajas.
   ===================================================================================================================== */
:root {
  --cromo: rgba(30, 29, 26, 0.86);
  --cromo-solido: #23221f;
  --cromo-texto: #f2eee6;
  --cromo-suave: rgba(242, 238, 230, 0.7754);
  --cromo-borde: rgba(255, 252, 245, 0.3835);
  --cromo-activo: rgba(255, 252, 245, 0.14);
  --familia: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --familia-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
html, body { font-family: var(--familia); font-size: 13px; letter-spacing: -0.005em; }
button, input, select, textarea { font-family: inherit; }
kbd, code { font-family: var(--familia-mono); }
.n, .cantidades, .ficha td, #lamina-zoom, .rotulo-vista small { font-family: var(--familia-mono); font-size: 0.95em; }
h1, h2, .inicio-cabecera h1 { font-family: var(--familia); }
.inicio-cabecera h1 { font-weight: 650; letter-spacing: -0.045em; font-size: clamp(40px, 6vw, 64px); }

/* --- Barra de herramientas: cromo oscuro --- */
#herramientas {
  padding: 6px; gap: 2px; border-radius: 20px;
  background: var(--cromo); border: 1px solid var(--cromo-borde);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px rgba(20, 18, 14, 0.28), 0 2px 6px rgba(20, 18, 14, 0.2);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.herramienta { position: relative; color: var(--cromo-suave); min-width: 64px; padding: 8px 8px 6px; border-radius: 14px; font-weight: 500; }
.herramienta .ic { color: var(--cromo-texto); width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .herramienta:hover:not(:disabled) { background: var(--cromo-activo); color: var(--cromo-texto); } }
.herramienta.activo { background: var(--cromo-texto); color: var(--cromo-solido); }
.herramienta.activo .ic { color: var(--cromo-solido); }
.herramienta:active { transform: scale(0.95); }
/* Pista con el atajo, arriba del botón */
.herramienta[data-atajo]::after {
  content: attr(data-atajo); position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 4px;
  min-width: 22px; padding: 3px 7px; border-radius: 7px; background: var(--cromo-solido); color: var(--cromo-texto);
  font: 500 11px/1.2 var(--familia-mono); text-align: center; pointer-events: none; opacity: 0;
  transition: opacity 140ms ease, translate 140ms var(--salida);
}
@media (hover: hover) and (pointer: fine) {
  .herramienta[data-atajo]:hover::after { opacity: 1; translate: -50% 0; transition-delay: 380ms; }
  #herramientas:hover .herramienta[data-atajo]:hover::after { transition-delay: 0ms; }
}

/* --- Barra superior: píldoras finas; el selector de modo en cromo --- */
#barra-superior .grupo-barra { gap: 4px; padding: 4px; border-radius: 999px; }
#barra-superior button { font-weight: 500; }
#barra-superior .segmentado { background: var(--cromo); padding: 3px; }
#barra-superior .segmentado button { color: var(--cromo-suave); }
#barra-superior .segmentado button[aria-checked="true"] { background: var(--cromo-texto); color: var(--cromo-solido); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { #barra-superior .segmentado button[aria-checked="false"]:hover { color: var(--cromo-texto); background: none; } }
#titulo-proyecto { font-weight: 600; letter-spacing: -0.01em; }

/* --- Acciones sobre la selección: también en cromo --- */
#barra-acciones { background: var(--cromo); border-color: var(--cromo-borde); }
#barra-acciones button { background: none; border-color: transparent; color: var(--cromo-texto); }
@media (hover: hover) and (pointer: fine) { #barra-acciones button:hover:not(:disabled) { background: var(--cromo-activo); } }

/* --- Paneles: vidrio claro con jerarquía tipográfica --- */
.panel { border-radius: 20px; background: rgba(253, 252, 249, 0.82); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); }
.panel > header { border-bottom: 0; padding: 14px 14px 6px; }
.panel h1 { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
/* «Explorador» es un h2 (un solo h1 por pantalla) con el aspecto del título del panel; los subtítulos, h2 con aspecto menor */
.panel h2.titulo-panel { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.02em; text-transform: none; color: var(--texto); }
.panel h2.subtitulo-panel { margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--texto-suave); }
.seccion > summary { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }

/* --- Rótulo y tira de vistas a juego --- */
.rotulo-vista { background: var(--cromo); border-color: var(--cromo-borde); color: var(--cromo-texto); }
.rotulo-vista small { color: var(--cromo-suave); }
#tira-vistas { border-radius: 22px; }

/* --- Avisos (toasts) en cromo, como en los productos de referencia --- */
#avisos > *, .aviso { background: var(--cromo-solido); color: var(--cromo-texto); border-color: var(--cromo-borde); }

@media (max-width: 700px) {
  .herramienta { min-width: 50px; padding: 7px 4px 5px; }
  .herramienta[data-atajo]::after { display: none; }
}

/* --- Botón de búsqueda (⌘K) en la barra superior --- */
.boton-paleta { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; color: var(--texto-suave); }
.boton-paleta kbd { padding: 0 6px; border-width: 1px; font-size: 10.5px; color: var(--texto-suave); background: transparent; }
body.en-inicio .boton-paleta { display: none; }

/* --- Paleta de comandos: cromo oscuro, arriba al centro --- */
dialog.paleta {
  width: min(620px, calc(100% - 24px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--cromo-borde); border-radius: 18px;
  background: var(--cromo-solido); color: var(--cromo-texto); box-shadow: 0 30px 80px rgba(15, 14, 12, 0.45);
  transition: none; /* ⌘K es una acción frecuente: respuesta inmediata. */
}
dialog.paleta:not([open]) { opacity: 0; transform: scale(0.97) translateY(-6px); }
@starting-style { dialog.paleta[open] { opacity: 0; transform: scale(0.97) translateY(-6px); } }
dialog.paleta::backdrop { background: rgba(30, 28, 24, 0.28); backdrop-filter: blur(2px); }
.paleta-caja { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cromo-borde); }
.paleta-caja .ic { width: 17px; height: 17px; color: var(--cromo-suave); }
#paleta-buscar { flex: 1; border: 0; background: none; color: var(--cromo-texto); font-size: 15px; padding: 2px 0; outline: none; box-shadow: none; }
#paleta-buscar::placeholder { color: var(--cromo-suave); }
.paleta-caja kbd, .paleta-lista kbd { background: transparent; border-color: var(--cromo-borde); color: var(--cromo-suave); font-size: 10.5px; }
.paleta-lista { max-height: min(56vh, 420px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; scrollbar-width: thin; }
.paleta-lista li[role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.paleta-lista li[aria-selected="true"] { background: var(--cromo-activo); }
.paleta-grupo { padding: 10px 12px 4px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cromo-suave); }
.paleta-vacia { padding: 18px 12px; color: var(--cromo-suave); }

/* --- Analizar: cromo, sobre la barra de herramientas --- */
.panel-analizar {
  position: fixed; left: 50%; bottom: 92px; translate: -50% 0; z-index: 4; width: min(380px, calc(100% - 24px));
  display: grid; gap: 12px; padding: 14px 16px; border-radius: 18px;
  background: var(--cromo-solido); color: var(--cromo-texto); border: 1px solid var(--cromo-borde); box-shadow: 0 20px 50px rgba(15, 14, 12, 0.35);
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida), display var(--medio) allow-discrete;
}
.panel-analizar[hidden] { display: none; opacity: 0; transform: translateY(8px); }
@starting-style { .panel-analizar:not([hidden]) { opacity: 0; transform: translateY(8px); } }
.panel-analizar .control > span { color: var(--cromo-suave); font-size: 11.5px; }
.panel-analizar output { float: right; font-family: var(--familia-mono); }
.panel-analizar .segmentado { display: flex; background: rgba(255, 255, 255, 0.08); border-radius: 12px; }
.panel-analizar .segmentado button { flex: 1; color: var(--cromo-suave); border-radius: 9px; }
.panel-analizar .segmentado button[aria-checked="true"] { background: var(--cromo-texto); color: var(--cromo-solido); }
.panel-analizar input[type=range]::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.18); }
.leyenda { display: grid; gap: 2px; max-height: 210px; overflow-y: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: thin; }
.leyenda:empty { display: none; }
.leyenda button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 9px; background: none; color: var(--cromo-texto); font-size: 12.5px; text-align: left; }
.leyenda button[aria-pressed="true"] { background: var(--cromo-activo); }
@media (hover: hover) and (pointer: fine) { .leyenda button:hover { background: var(--cromo-activo); } }
.leyenda i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.leyenda small { margin-left: auto; color: var(--cromo-suave); font-family: var(--familia-mono); }

/* --- Notas: pines numerados y tarjeta --- */
.pines-notas { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.pin-nota {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; pointer-events: auto;
  border-radius: 50%; border: 2px solid #fffdf8; background: var(--cromo-solido); color: var(--cromo-texto);
  font: 600 12px/1 var(--familia-mono); box-shadow: 0 4px 14px rgba(20, 18, 14, 0.35);
  transition: background var(--rapido) ease, scale var(--rapido) var(--salida);
}
.pin-nota::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(35, 34, 31, 0.35); animation: pulso-pin 2.4s var(--salida) infinite; }
@keyframes pulso-pin { from { opacity: 0.9; scale: 0.8; } to { opacity: 0; scale: 1.5; } }
.pin-nota.abierta { background: #fffdf8; color: var(--cromo-solido); border-color: var(--cromo-solido); scale: 1.12; }
@media (hover: hover) and (pointer: fine) { .pin-nota:hover { scale: 1.12; } }
@media (prefers-reduced-motion: reduce) { .pin-nota::before { animation: none; } }
body.recorriendo .pines-notas, body.en-inicio .pines-notas, body.con-lamina .pines-notas { display: none; }
body.poniendo-nota #lienzo { cursor: crosshair; }
.tarjeta-nota {
  position: fixed; right: 18px; bottom: 96px; z-index: 5; width: min(320px, calc(100% - 24px)); padding: 12px 14px 14px; border-radius: 18px;
  background: var(--cromo-solido); color: var(--cromo-texto); border: 1px solid var(--cromo-borde); box-shadow: 0 20px 50px rgba(15, 14, 12, 0.35);
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida), display var(--medio) allow-discrete;
}
.tarjeta-nota[hidden] { display: none; opacity: 0; transform: translateY(8px); }
@starting-style { .tarjeta-nota:not([hidden]) { opacity: 0; transform: translateY(8px); } }
.tarjeta-nota header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tarjeta-nota header small { color: var(--cromo-suave); font-family: var(--familia-mono); }
.tarjeta-nota .icono { color: var(--cromo-texto); font-size: 18px; padding: 2px 8px; }
.tarjeta-nota strong { display: block; font-size: 16px; letter-spacing: -0.015em; }
.tarjeta-nota p { margin: 4px 0 10px; color: var(--cromo-suave); white-space: pre-wrap; }
.tarjeta-nota .mini { background: var(--cromo-activo); color: var(--cromo-texto); border-color: transparent; }
.tarjeta-nota .nota-editar { display: none; gap: 8px; }
.tarjeta-nota.editando .nota-editar { display: grid; }
.tarjeta-nota.editando .nota-ver { display: none; }
.tarjeta-nota input, .tarjeta-nota textarea { background: rgba(255, 255, 255, 0.08); border-color: var(--cromo-borde); color: var(--cromo-texto); }
.tarjeta-nota .acciones { display: flex; justify-content: space-between; }
.tarjeta-nota .peligro { background: none; border-color: transparent; color: #e5a49a; }

@media (max-width: 700px) {
  #herramientas { max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
  .boton-paleta .texto-boton, .boton-paleta kbd { display: none; }
  .tarjeta-nota { right: 12px; bottom: 84px; }
}
/* Analizar a la derecha, como la leyenda de Speckle: el modelo queda libre al centro */
.panel-analizar { left: auto; right: 18px; bottom: 96px; translate: none; width: min(300px, calc(100% - 24px)); max-height: calc(100% - 170px); overflow-y: auto; gap: 10px; padding: 12px 14px; }
.leyenda { max-height: min(30vh, 210px); }
.panel-analizar .segmentado button { padding: 4px 6px; font-size: 12px; }
@media (max-width: 700px) { .panel-analizar { right: 12px; left: 12px; width: auto; bottom: 84px; max-height: 45vh; } }

/* Inicio: velo detrás del texto (izquierda) para que se lea sobre la ciudad en movimiento; la ciudad queda a la derecha */
@media (min-width: 901px) {
  #inicio {
    background:
      linear-gradient(90deg, rgba(246, 243, 236, 0.97) 0%, rgba(246, 243, 236, 0.9) 34%, rgba(246, 243, 236, 0.35) 56%, rgba(246, 243, 236, 0) 72%),
      linear-gradient(180deg, rgba(246, 243, 236, 0) 0%, rgba(246, 243, 236, 0) 46%, rgba(246, 243, 236, 0.96) 70%);
  }
}
@media (max-width: 900px) {
  #inicio { background: linear-gradient(180deg, rgba(246, 243, 236, 0.15) 0%, rgba(246, 243, 236, 0.55) 26%, rgba(246, 243, 236, 0.96) 52%); }
}
.lema, .autoria, .obra-ayuda, .fases button { color: #55524b; }   /* más contraste sobre la escena */

/* --- Información legal y accesibilidad --- */
.saltar { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 10px; background: var(--cromo-solido); color: var(--cromo-texto); text-decoration: none; }
.saltar:focus { top: 12px; }
.enlaces-legales { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0; }
.enlaces-legales button, button.enlace { padding: 0; border: 0; background: none; box-shadow: none; color: var(--texto); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borde-fuerte); }
@media (hover: hover) and (pointer: fine) { .enlaces-legales button:hover, button.enlace:hover { background: none; text-decoration-color: currentColor; } }
.inicio-pie .nota { max-width: 70ch; }
.legal-contenido { max-height: min(70vh, 640px); overflow-y: auto; padding-right: 8px; font-size: 14px; line-height: 1.6; scrollbar-width: thin; }
.legal-contenido h1 { font-size: 24px; margin: 0 0 4px; }
.legal-contenido h2 { font-size: 17px; margin: 28px 0 6px; padding-top: 12px; border-top: 1px solid var(--borde); scroll-margin-top: 8px; }
.legal-contenido h3 { font-size: 14px; margin: 16px 0 4px; }
.legal-contenido table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legal-contenido th, .legal-contenido td { text-align: left; padding: 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.legal-contenido nav ul { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0; list-style: none; }
.legal-contenido .pendiente { background: #f1e3b8; padding: 0 4px; border-radius: 4px; }
.legal-contenido .suave { color: var(--texto-suave); }
.consentimiento { align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--texto-suave); }
.consentimiento input { margin-top: 2px; flex: none; }

/* --- Ficha del proyecto (BIG): tipografía grande, datos en dos columnas, sin caja pesada --- */
.ficha-proyecto {
  position: fixed; left: 28px; bottom: 104px; z-index: 3; width: min(460px, calc(100% - 40px)); padding: 22px 24px 18px;
  border-radius: 22px; background: rgba(253, 252, 249, 0.86); border: 1px solid var(--borde); box-shadow: var(--sombra);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  transition: opacity 320ms var(--salida), transform 320ms var(--salida), display 320ms allow-discrete;
}
.ficha-proyecto[hidden] { display: none; opacity: 0; transform: translateY(10px); }
@starting-style { .ficha-proyecto:not([hidden]) { opacity: 0; transform: translateY(14px); } }
.ficha-tipo { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); }
.ficha-proyecto h2 { margin: 4px 0 2px; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 650; }
.ficha-lugar { margin: 0 0 10px; color: var(--texto-suave); }
.ficha-lugar:empty, .ficha-datos:empty, .ficha-descripcion:empty { display: none; }
.ficha-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 10px 0; }
.ficha-datos dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); }
.ficha-datos dd { margin: 0; font-size: 13.5px; }
.ficha-descripcion { margin: 8px 0 0; font-size: 14px; line-height: 1.5; max-width: 52ch; }
.ficha-pista { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--borde); font-size: 11.5px; color: var(--texto-suave); }
body.modo-revision .ficha-proyecto, body:not(.modo-presentacion) .ficha-proyecto { left: 290px; }
body.presentando .ficha-proyecto, body.recorriendo .ficha-proyecto, body.con-lamina .ficha-proyecto { display: none; }
@media (max-width: 700px) { .ficha-proyecto { left: 12px; right: 12px; width: auto; bottom: 84px; padding: 16px; } body:not(.modo-presentacion) .ficha-proyecto { left: 12px; } }

/* Controles explícitos del movimiento, sin competir con el proyecto. */
.obra-controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#btn-pausa-ciudad { min-height: 44px; white-space: nowrap; }
.obra-controles .obra-ayuda { flex: 1 1 240px; max-width: 48ch; }
.recorrido-espera { display: flex; gap: 8px; align-items: center; font-size: 13px; }
#paleta-buscar { min-width: 0; font-size: 16px; }

/* Siete etapas: envolvente flexible, sin recortar títulos en teléfonos. */
#fases-bim { flex-wrap: wrap; row-gap: 8px; }
#fases-bim button { min-height: 36px; }

body.obra-detalle #inicio { background: none; pointer-events: none; }
body.obra-detalle .inicio-contenido > :not(.obra) { display: none; }
body.obra-detalle .obra { position: fixed; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 680px; padding: 16px; background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; pointer-events: auto; }
#fases-bim { display: flex; flex-wrap: wrap; }
#fases-bim button { min-height: 44px; }

/* =================== Revisión 1 de David =================== */
/* Acciones sobre el elemento: solo con algo seleccionado (antes se quedaban fijas con cualquier oculto); en Presentación nunca */
#barra-acciones { opacity: 0 !important; pointer-events: none !important; transform: translate(-50%, 8px) !important; }
body.con-seleccion:not(.modo-presentacion) #barra-acciones { opacity: 1 !important; pointer-events: auto !important; transform: translate(-50%, 0) !important; }
/* Sin selección pero con cosas ocultas: solo un botón «Mostrar todo», discreto, junto a la barra de herramientas */
body.con-ocultos:not(.con-seleccion):not(.presentando):not(.recorriendo):not(.en-inicio) #btn-mostrar-flotante { display: inline-flex; }
#btn-mostrar-flotante { display: none; position: fixed; left: 50%; bottom: 92px; translate: -50% 0; z-index: 3; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; background: var(--cromo); color: var(--cromo-texto); border: 1px solid var(--cromo-borde); font-size: 12.5px; }

/* Opciones de la herramienta activa y pista del modo puntería */
.opciones-herramienta { position: fixed; left: 50%; bottom: 92px; translate: -50% 0; z-index: 4; display: flex; gap: 10px; align-items: center;
  padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--cromo); color: var(--cromo-texto); border: 1px solid var(--cromo-borde); font-size: 12.5px; }
.opciones-herramienta select { background: rgba(255, 255, 255, 0.1); color: var(--cromo-texto); border-color: var(--cromo-borde); border-radius: 999px; padding: 3px 10px; }
.pista-punteria { display: none; position: fixed; left: 50%; top: 64px; translate: -50% 0; z-index: 4; margin: 0; padding: 6px 14px; border-radius: 999px;
  background: var(--cromo); color: var(--cromo-texto); font-size: 12px; pointer-events: none; }
body.punteria .pista-punteria { display: block; }
body.punteria #lienzo { cursor: crosshair; }
.leyenda li { display: flex; align-items: center; gap: 2px; }
.leyenda li > button[data-valor] { flex: 1; min-width: 0; }
.leyenda .ojo { flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 9px; }
.leyenda .ojo .ic { width: 15px; height: 15px; color: var(--cromo-texto); }
.leyenda li.oculta > button[data-valor] { opacity: 0.45; text-decoration: line-through; text-decoration-color: rgba(242, 238, 230, 0.4); }
.opciones-herramienta[hidden] { display: none; }
/* La ficha del proyecto es de Presentación: en Revisión estorba a los paneles */
body:not(.modo-presentacion) .ficha-proyecto { display: none; }
.etiqueta-beta { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--cromo); color: var(--cromo-texto); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; vertical-align: 1px; }
@media (max-width: 700px) { #btn-sugerencias { display: none; } }

/* --- Guía paso a paso --- */
.guia { position: fixed; inset: 0; z-index: 40; }
.guia[hidden] { display: none; }
.guia-foco { position: fixed; border-radius: 14px; box-shadow: 0 0 0 2px #f2eee6, 0 0 0 9999px rgba(28, 27, 25, 0.55); pointer-events: none;
  transition: left 260ms var(--salida), top 260ms var(--salida), width 260ms var(--salida), height 260ms var(--salida), border-radius 260ms var(--salida); }
.guia-tarjeta { position: fixed; width: min(340px, calc(100% - 24px)); padding: 16px 18px 14px; border-radius: 18px; background: var(--cromo-solido); color: var(--cromo-texto);
  border: 1px solid var(--cromo-borde); box-shadow: 0 24px 60px rgba(15, 14, 12, 0.45); transition: left 260ms var(--salida), top 260ms var(--salida); }
.guia-tarjeta small { color: var(--cromo-suave); font-family: var(--familia-mono); font-size: 11px; }
.guia-tarjeta h2 { margin: 4px 0 6px; font-size: 17px; letter-spacing: -0.015em; }
.guia-tarjeta p { margin: 0 0 14px; color: rgba(242, 238, 230, 0.82); line-height: 1.5; }
.guia-tarjeta .acciones { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.guia-tarjeta .acciones span { display: flex; gap: 6px; }
.guia-tarjeta button { background: rgba(255, 255, 255, 0.08); color: var(--cromo-texto); border-color: var(--cromo-borde); }
.guia-tarjeta button.principal { background: var(--cromo-texto); color: var(--cromo-solido); }
.guia-tarjeta #guia-cerrar { background: none; border-color: transparent; color: var(--cromo-suave); }
@media (prefers-reduced-motion: reduce) { .guia-foco, .guia-tarjeta { transition: none; } }
/* Pista corta para moverse al abrir un proyecto en Presentación: sobre la cápsula, se va al primer gesto */
.pista-gestos {
  position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 6; margin: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 999px; text-align: center;
  background: var(--cromo-solido); color: var(--cromo-texto); font-size: 13px; box-shadow: 0 10px 30px rgba(15, 14, 12, 0.25);
  transition: opacity 200ms var(--salida), transform 200ms var(--salida);
  @starting-style { opacity: 0; transform: translate(-50%, 6px); }
}
.pista-gestos[hidden] { display: none; }
body:not(.modo-presentacion) .pista-gestos, body.recorriendo .pista-gestos, body.con-guia .pista-gestos { display: none; }
/* Barra superior en pantallas medianas: solo íconos en las acciones secundarias */
@media (max-width: 1180px) {
  #btn-compartir .texto-boton, #btn-sugerencias .texto-boton, #btn-ayuda .texto-boton, .boton-paleta .texto-boton { display: none; }
  #barra-superior button { padding-inline: 9px; }
}
@media (max-width: 700px) { #btn-sugerencias { display: inline-flex; } #btn-sugerencias .etiqueta-beta { display: none; } }
.interpretar { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); }
.interpretar #btn-interpretar { justify-self: start; }
.interpretacion { padding: 10px 14px; border-radius: 12px; background: var(--acento-suave); font-size: 13px; }
.interpretacion ul { margin: 6px 0 0; padding-left: 18px; }

/* --- Lámina: llave de niveles, minimapa y ayuda de movimiento --- */
.lamina-niveles { position: absolute; left: 16px; top: 50%; translate: 0 -50%; z-index: 2; display: grid; gap: 4px; width: 190px; padding: 10px;
  border-radius: 16px; background: var(--cromo-solido); color: var(--cromo-texto); box-shadow: 0 12px 30px rgba(20, 18, 14, 0.25); }
.lamina-niveles[hidden] { display: none; }
.lamina-niveles > small { padding: 0 6px 4px; color: var(--cromo-suave); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.lamina-niveles button { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, 0.05); color: var(--cromo-texto); text-align: left; font-size: 12.5px; border-left: 3px solid transparent; }
.lamina-niveles button small { color: var(--cromo-suave); font-family: var(--familia-mono); font-size: 11px; }
.lamina-niveles button[aria-current="true"] { background: var(--cromo-texto); color: var(--cromo-solido); font-weight: 600; }
.lamina-niveles button[aria-current="true"] small { color: rgba(35, 34, 31, 0.7); }
@media (hover: hover) and (pointer: fine) { .lamina-niveles button:hover:not([aria-current="true"]) { background: rgba(255, 255, 255, 0.12); } }
.lamina-mapa { position: absolute; right: 16px; bottom: 16px; z-index: 2; padding: 8px; border-radius: 12px; background: rgba(253, 252, 249, 0.92);
  border: 1px solid var(--borde); box-shadow: var(--sombra); cursor: grab; }
.lamina-mapa.todo-visible { opacity: 0.55; }
.lamina-mapa-hoja { position: relative; background: #fff; outline: 1px solid var(--borde); overflow: hidden; }
.lamina-mapa-vista { position: absolute; border: 2px solid var(--cromo-solido); background: rgba(35, 34, 31, 0.08); border-radius: 3px; }
.lamina-ayuda-mov { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 2; margin: 0; padding: 6px 14px; border-radius: 999px;
  background: var(--cromo); color: var(--cromo-texto); font-size: 11.5px; pointer-events: none; white-space: nowrap; }
@media (max-width: 700px) { .lamina-niveles { left: 8px; top: auto; bottom: 64px; translate: none; width: 150px; max-height: 40vh; overflow-y: auto; } .lamina-mapa { display: none; } .lamina-ayuda-mov { display: none; } }
.fila-control { display: flex; gap: 6px; }
.fila-control input { flex: 1; min-width: 0; }
.contexto-real .nota { margin: 2px 0; }
.contexto-real button + button { margin-top: 6px; }
/* Créditos obligatorios de la ciudad 3D de Google, sobre el lienzo y sin estorbar */
.credito-ciudad {
  position: fixed; left: 16px; bottom: 8px; z-index: 5; margin: 0; max-width: min(60vw, 520px);
  font-size: 11px; line-height: 1.3; color: var(--texto-suave); pointer-events: none;
  background: color-mix(in srgb, var(--fondo) 80%, transparent); padding: 2px 8px; border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.credito-ciudad[hidden] { display: none; }
.pin-nota::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }   /* área táctil más grande */

/* =================== Producto para todos: abrir, Mis proyectos, galería =================== */
.inicio-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 8px; }
button.grande { padding: 12px 22px; border-radius: 14px; font-size: 15px; font-weight: 600; }
.mis-proyectos h2 small, .titulo-galeria small { margin-left: 8px; font-weight: 400; color: var(--texto-suave); }
.titulo-galeria { margin: 40px 0 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.tarjeta-local { position: relative; }
.tarjeta-local .acciones-tarjeta { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--rapido) ease; }
@media (hover: hover) and (pointer: fine) { .tarjeta-local:hover .acciones-tarjeta, .tarjeta-local:focus-within .acciones-tarjeta { opacity: 1; } }
@media (hover: none) { .tarjeta-local .acciones-tarjeta { opacity: 1; } }
.acciones-tarjeta button { padding: 4px 10px; border-radius: 999px; font-size: 12px; background: rgba(253, 252, 249, 0.92); }
.soltar-aqui { display: grid; place-items: center; gap: 6px; min-height: 160px; padding: 20px; text-align: center; border: 1.5px dashed var(--borde-fuerte);
  border-radius: 20px; background: rgba(253, 252, 249, 0.6); color: var(--texto-suave); cursor: pointer; }
.soltar-aqui strong { color: var(--texto); font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .soltar-aqui:hover { border-color: var(--texto); color: var(--texto); } }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
#dialogo-conexiones h3 { margin: 16px 0 2px; font-size: 14px; }
#dialogo-conexiones .acciones { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
body.con-ia #btn-conexiones { background: var(--cromo); color: var(--cromo-texto); border-color: var(--cromo-borde); }
@media (max-width: 1180px) { #btn-conexiones .texto-boton { display: none; } }
.texto-ia { white-space: pre-wrap; margin-top: 6px; line-height: 1.55; }
.panel-render .nota-cromo { display: block; margin-top: 4px; color: var(--cromo-suave); font-size: 11px; line-height: 1.4; }
.panel-render .fila-control button { flex: 1; }
.panel-render .principal { background: var(--cromo-texto); color: var(--cromo-solido); border-color: transparent; }
.render-progreso { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.render-progreso[hidden] { display: none; }
#render-barra { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--cromo-texto); transition: transform 200ms linear; }
.enlace-cromo { padding: 0; border: 0; background: none; color: var(--cromo-suave); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; text-align: left; }

/* Protección del buzón: fuera del flujo y del recorrido de teclado. */
.campo-trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tarjeta-imagen { height: auto; }
@media (pointer: coarse) {
  #dialogo-sugerencias button { min-height: 44px; min-width: 44px; }
  #dialogo-sugerencias input, #dialogo-sugerencias textarea { font-size: 16px; }
}

/* Recorrido en primera persona: mira al centro, como en un videojuego */
.mira-recorrido { display: none; position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; z-index: 6;
  border-radius: 50%; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1.5px rgba(30, 28, 24, 0.55); pointer-events: none; }
body.recorriendo .mira-recorrido { display: block; }
body.cursor-capturado #lienzo { cursor: none; }
/* Modo dron: botón para alternar y segundo joystick (stick derecho, como un radio control en modo 2) */
#btn-dron {
  position: fixed; top: 14px; right: 92px; z-index: 7; padding: 7px 16px; border-radius: 999px; background: var(--panel); backdrop-filter: blur(20px);
  opacity: 0; pointer-events: none; transform: translateY(-6px); box-shadow: var(--sombra);
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida);
}
body.recorriendo #btn-dron { opacity: 1; pointer-events: auto; transform: none; }
#btn-dron[aria-pressed="true"] { background: var(--texto); color: var(--panel-solido); }
#joystick2 {
  position: fixed; right: 24px; bottom: 76px; z-index: 7; width: 120px; height: 120px; border-radius: 50%; display: none; touch-action: none;
  background: rgba(255, 253, 249, 0.55); border: 1px solid var(--borde-fuerte); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#joystick2-pomo {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: var(--panel-solido); box-shadow: var(--sombra); transition: transform 120ms var(--salida); pointer-events: none;
}
@media (pointer: coarse) { body.recorriendo.volando #joystick2 { display: block; } }
#aviso-recorrido .solo-dron { display: none; }
body.volando #aviso-recorrido .solo-dron { display: inline; }
body.volando #aviso-recorrido .solo-persona { display: none; }
/* Aviso de unidades detectadas: se queda unos segundos y deja cambiarlas con un toque */
.aviso-unidades { pointer-events: auto; max-width: min(92vw, 520px); border-radius: 16px; padding: 12px 14px; }
@starting-style { .aviso-unidades.visible { opacity: 0; transform: translateY(-8px) scale(0.96); } }
.aviso-unidades p { margin: 0 0 8px; }
.opciones-unidad { display: flex; flex-wrap: wrap; gap: 6px; }
.opciones-unidad button { min-height: 36px; padding: 6px 12px; border-radius: 10px; }
/* Pregunta por la ubicación del predio: tarjeta discreta abajo al centro */
.pregunta-ubicacion { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 8; width: min(560px, calc(100vw - 32px));
  padding: 14px 16px; border-radius: 16px; background: var(--panel-solido); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.pregunta-ubicacion { transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida); }
@starting-style { .pregunta-ubicacion { opacity: 0; transform: translate(-50%, 8px); } }
.pregunta-ubicacion[hidden] { display: none; }
.pregunta-ubicacion p { margin: 0 0 8px; }
.pregunta-ubicacion .nota { margin: 8px 0 0; }
body.recorriendo .pregunta-ubicacion, body.en-inicio .pregunta-ubicacion { display: none; }
.avanzado-conexiones { margin-top: 12px; }
.avanzado-conexiones summary { cursor: pointer; font-weight: 600; }

/* ---------- Presentación: el proyecto al frente, la herramienta atrás ---------- */
.capsula-presentacion {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  display: none; align-items: center; gap: 2px; padding: 6px; border-radius: 20px;
  background: var(--cromo); border: 1px solid var(--cromo-borde);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px rgba(20, 18, 14, 0.28), 0 2px 6px rgba(20, 18, 14, 0.2);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida);
}
.capsula-presentacion .herramienta span { font-size: 12px; }
.capsula-separador { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--cromo-borde); }
.capsula-herramientas { min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: none; color: var(--cromo-suave); font-size: 12.5px; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .capsula-herramientas:hover { background: var(--cromo-activo); color: var(--cromo-texto); } }
body.modo-presentacion:not(.en-inicio):not(.recorriendo):not(.presentando) .capsula-presentacion { display: flex; }
@starting-style { body.modo-presentacion .capsula-presentacion { opacity: 0; transform: translate(-50%, 8px); } }
/* Lo técnico y lo que es del dueño se va en Presentación */
body.modo-presentacion #herramientas, body.modo-presentacion #barra-acciones, body.modo-presentacion #pregunta-ubicacion,
body.modo-presentacion #btn-sugerencias, body.modo-presentacion #btn-conexiones, body.modo-presentacion #btn-compartir,
body.modo-presentacion #btn-paleta { display: none !important; }
.ficha-autor { margin: 2px 0 6px; font-size: 14px; color: var(--texto-suave); }
@media (max-width: 560px) {
  .capsula-presentacion { bottom: max(14px, env(safe-area-inset-bottom)); }
  .capsula-presentacion .herramienta { min-width: 58px; }
  .capsula-presentacion [data-capsula="pantalla"] span { font-size: 0; }
  .capsula-presentacion [data-capsula="pantalla"] span::after { content: "Pantalla"; font-size: 12px; }
}
.capsula-presentacion .herramienta span { white-space: nowrap; }

/* Ficha del elemento: resumen humano primero, datos técnicos plegados */
.resumen-elemento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 10px 0 12px; }
.resumen-elemento div { min-width: 0; }
.resumen-elemento dt { font-size: 11.5px; color: var(--texto-suave); }
.resumen-elemento dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.datos-tecnicos > summary { font-weight: 600; }
.datos-tecnicos details { margin-left: 4px; }

/* ---------- Celular: barra superior con «⋯», herramientas esenciales + «Más», sin pie con modelo abierto ---------- */
#btn-mas, #btn-dock-mas { display: none; }
.menu-mas { margin: 0; inset: auto; position: fixed; top: 64px; right: 12px; left: auto; min-width: 210px; padding: 6px;
  border-radius: 16px; border: 1px solid var(--borde); background: var(--panel-solido); box-shadow: var(--sombra);
  transition: opacity 180ms var(--salida), transform 180ms var(--salida), display 180ms allow-discrete, overlay 180ms allow-discrete; transform-origin: top right; }
.menu-mas:not(:popover-open) { opacity: 0; transform: scale(0.96); }
@starting-style { .menu-mas:popover-open { opacity: 0; transform: scale(0.96); } }
.menu-mas button { display: flex; width: 100%; min-height: 44px; align-items: center; padding: 0 14px; border: 0; border-radius: 11px; background: none; text-align: left; font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .menu-mas button:hover { background: var(--acento-suave); } }
@media (pointer: coarse) { .solo-raton { display: none; } }
@media (max-width: 700px) {
  #btn-mas { display: inline-flex; }
  #btn-conexiones, #btn-compartir, #btn-acerca, #btn-sugerencias, #btn-paleta { display: none !important; }
  #btn-dock-mas { display: grid; }
  #herramientas { flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100vw - 24px); }
  body:not(.dock-completo) #herramientas > .herramienta:is(#btn-plano, #btn-notas, #btn-analizar, #btn-render, #btn-cantidades) { display: none; }
  body.dock-completo #btn-dock-mas { order: 99; }
  body:not(.en-inicio) #pie { display: none; }
}

/* Mis proyectos: cabecera con buscador y «Ver todos» cuando hay muchos */
.cabecera-mis-proyectos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cabecera-mis-proyectos input[type=search] { flex: 0 1 260px; min-height: 40px; }
.cabecera-mis-proyectos input[hidden] { display: none; }
.ver-todos { margin-top: 12px; min-height: 44px; }
.ver-todos[hidden] { display: none; }

/* Opacidad del entorno en la tira de Vistas (también al presentar) */
.tira-ambientacion { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--texto-suave); }
.tira-ambientacion input { flex: 1; max-width: 220px; }
body.presentando .tira-ambientacion { display: none; }

/* «Más» de la cápsula de Presentación: menú sobre la cápsula */
.capsula-mas { position: fixed; inset: auto auto 92px 50%; translate: -50% 0; margin: 0; min-width: 240px; padding: 8px; border: 1px solid var(--cromo-borde);
  border-radius: 18px; background: var(--cromo-solido); color: var(--cromo-texto); box-shadow: 0 18px 48px rgba(15, 14, 12, 0.4); }
.capsula-mas:popover-open { display: grid; gap: 2px; }
.capsula-mas button { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px;
  background: none; color: inherit; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.capsula-mas button:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .capsula-mas button:hover { background: var(--cromo-activo); } }
.capsula-mas button[aria-checked]::after { content: ""; width: 26px; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.18);
  box-shadow: inset -10px 0 0 2px rgba(255, 255, 255, 0.0); transition: background-color var(--medio) var(--salida); }
.capsula-mas button[aria-checked="true"]::after { background: var(--cromo-texto); }
.capsula-mas kbd { font-size: 11px; color: var(--cromo-suave); background: none; border: 0; box-shadow: none; padding: 0; }
.capsula-mas-entorno { display: grid; gap: 6px; padding: 8px 12px 10px; font-size: 12px; color: var(--cromo-suave); border-bottom: 1px solid var(--cromo-borde); margin-bottom: 4px; }
@starting-style { .capsula-mas:popover-open { opacity: 0; translate: -50% 6px; } }
.capsula-mas { transition: opacity 160ms var(--salida), translate 160ms var(--salida), display 160ms allow-discrete, overlay 160ms allow-discrete; }

/* Entorno para presentar: lo esencial a la vista y el resto en «Más ajustes del entorno» */
.entorno-simple > .control output { float: right; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.entorno-simple #real-ubicacion { margin: 0 0 4px; font-weight: 600; color: var(--texto); }
.mas-ajustes { margin-top: 8px; border-top: 1px solid var(--borde); padding-top: 6px; }
.mas-ajustes > summary { min-height: 36px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; color: var(--texto-suave); list-style: none; }
.mas-ajustes > summary::-webkit-details-marker { display: none; }
.mas-ajustes > summary::before { content: "›"; display: inline-block; transition: transform 160ms var(--salida); }
.mas-ajustes[open] > summary::before { transform: rotate(90deg); }
.mas-ajustes[open] { display: grid; gap: 6px; }

/* Video, render por vista y luz rápida para la presentación. */
.indicador-video { position: fixed; top: max(76px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 110; padding: 10px 16px; max-width: calc(100vw - 32px); border-radius: 12px; background: var(--cromo-fondo, #292724); color: var(--cromo-texto, #fff); font-size: 13px; pointer-events: none; }
.indicador-video[hidden] { display: none; }
.capsula-luz-rapida { padding: 8px 12px; color: var(--cromo-suave); font-size: 12px; }
.opciones-luz-rapida { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.capsula-mas .opciones-luz-rapida button { justify-content: center; min-height: 44px; }
.capsula-mas .opciones-luz-rapida button[aria-pressed="true"] { background: var(--cromo-activo); box-shadow: inset 0 0 0 1px var(--cromo-texto); }
.vista-tarjeta .render-vista { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; min-height: 32px; padding: 4px 10px; border-radius: 8px; background: #fffdf9; color: #292724; cursor: pointer; }
.vista-tarjeta .render-vista:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (pointer: coarse) { .vista-tarjeta .render-vista { min-height: 44px; } }
.capsula-mas { max-height: calc(100dvh - 112px); overflow-y: auto; max-width: calc(100vw - 24px); }

/* Comentarios del cliente: pines con forma de globo (los recibidos en el tono de acento) y un panel sobre la cápsula */
.pin-comentario {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; pointer-events: auto;
  border-radius: 50% 50% 50% 4px; border: 2px solid #fffdf8; background: #fffdf8; color: var(--cromo-solido);
  font: 600 12px/1 var(--familia-mono); box-shadow: 0 4px 14px rgba(20, 18, 14, 0.35); transition: scale var(--rapido) var(--salida);
}
.pin-comentario.recibido { background: var(--acento); color: #fffdf8; }
.pin-comentario::after { content: ""; position: absolute; inset: -10px; }
@media (hover: hover) and (pointer: fine) { .pin-comentario:hover { scale: 1.12; } }
body.recorriendo .pines-comentarios, body.en-inicio .pines-comentarios, body.con-lamina .pines-comentarios { display: none; }
body.poniendo-comentario #lienzo { cursor: crosshair; }
.panel-comentarios {
  position: fixed; left: 18px; bottom: 96px; z-index: 6; width: min(340px, calc(100% - 24px)); max-height: calc(100dvh - 180px); overflow-y: auto;
  padding: 12px 14px 14px; border-radius: 18px; background: var(--cromo-solido); color: var(--cromo-texto);
  border: 1px solid var(--cromo-borde); box-shadow: 0 20px 50px rgba(15, 14, 12, 0.35);
}
.panel-comentarios[hidden], body.en-inicio .panel-comentarios { display: none; }
.panel-comentarios header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panel-comentarios h2 { margin: 0; font-size: 15px; }
.panel-comentarios .nota { color: var(--cromo-suave); font-size: 12px; margin: 8px 0 0; }
.lista-comentarios { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.lista-comentarios li { display: flex; gap: 6px; align-items: start; }
.lista-comentarios li > button:first-child { flex: 1; text-align: left; background: rgba(255, 253, 248, 0.06); color: inherit; border: 1px solid var(--cromo-borde); border-radius: 10px; padding: 8px 10px; line-height: 1.4; }
.lista-comentarios li.recibido > button:first-child { border-color: var(--acento); }
.lista-comentarios li.actual > button:first-child { background: rgba(255, 253, 248, 0.14); }
.lista-comentarios b { font-family: var(--familia-mono); margin-right: 4px; }
.form-comentario { display: grid; gap: 8px; margin: 8px 0; }
.form-comentario[hidden] { display: none; }
.form-comentario label { display: grid; gap: 4px; font-size: 13px; }
.form-comentario textarea, .form-comentario input { font: inherit; border-radius: 10px; padding: 8px; border: 1px solid var(--cromo-borde); background: #fffdf8; color: #23221f; }
.panel-comentarios .acciones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .panel-comentarios { left: 12px; right: 12px; width: auto; bottom: 88px; } }

/* «Ubicar proyecto»: círculo con asa sobre el proyecto y barra flotante; el resto de la interfaz se aparta */
.ubicar[hidden] { display: none; }
.ubicar-circulo { position: fixed; left: 0; top: 0; z-index: 7; overflow: visible; pointer-events: none; }
.ubicar-circulo .anillo { fill: none; stroke: #ffd27a; stroke-width: 2.5; stroke-dasharray: 6 5; pointer-events: stroke; cursor: grab; filter: drop-shadow(0 0 4px rgba(0,0,0,.45)); }
.ubicar-circulo .centro { fill: #ffd27a; }
.ubicar-circulo .asa { cursor: grab; pointer-events: auto; }
.ubicar-circulo .asa circle { fill: #23221f; stroke: #ffd27a; stroke-width: 2.5; }
.ubicar-circulo .asa path { stroke: #ffd27a; stroke-width: 1.8; stroke-linecap: round; }
body.ubicando-girar, body.ubicando-girar * { cursor: grabbing !important; }
body.ubicando #lienzo canvas { cursor: move; }
body.ubicando-arrastre #lienzo canvas { cursor: grabbing; }
.ubicar-barra {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 8; width: max-content; max-width: calc(100% - 24px);
  padding: 8px 10px; border-radius: 16px; background: var(--cromo-solido); color: var(--cromo-texto);
  border: 1px solid var(--cromo-borde); box-shadow: 0 14px 40px rgba(15, 14, 12, 0.32);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  transition: opacity 180ms var(--salida), transform 180ms var(--salida);
}
.ubicar-barra h2 { margin: 0 4px 0 2px; font-size: 14px; cursor: help; }
.ubicar-barra button { padding: 6px 10px; }
.ubicar-ir { display: flex; gap: 6px; }
.ubicar-ir input { width: 220px; }
.ubicar-barra input { font: inherit; font-size: 13px; border-radius: 9px; padding: 6px 8px; border: 1px solid var(--cromo-borde); background: #fffdf8; color: #23221f; }
.ubicar-giro { display: inline-flex; align-items: center; gap: 4px; }
.ubicar-giro input { width: 64px; text-align: right; }
#ubicar-espejo[aria-pressed="true"] { background: #ffd27a; color: #23221f; }
#ubicar-ocultar { color: var(--cromo-texto); background: rgba(255, 253, 248, 0.12); border: 1px solid var(--cromo-borde); border-radius: 9px; min-width: 32px; font-size: 14px; }
.ubicar-lugar, .ubicar-ayuda { flex-basis: 100%; margin: 0; font-size: 11px; color: var(--cromo-suave); text-align: center; }
.ubicar-ayuda:empty, .ubicar-lugar:empty { display: none; }
/* Mientras se arrastra o gira, la barra se aparta; oculta, queda una pastilla */
body.ubicando-arrastre .ubicar-barra, body.ubicando-girar .ubicar-barra { opacity: 0.12; pointer-events: none; }
.ubicar-mini { display: none; position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 8; gap: 6px; padding: 6px; border-radius: 999px;
  background: var(--cromo-solido); border: 1px solid var(--cromo-borde); box-shadow: 0 10px 30px rgba(15, 14, 12, 0.3); }
.ubicar-mini button { border-radius: 999px; padding: 6px 12px; }
.ubicar.barra-oculta .ubicar-barra { display: none; }
.ubicar.barra-oculta .ubicar-mini { display: flex; }
@media (max-width: 700px) { .ubicar-ir input { width: 150px; } #ubicar-restablecer { display: none; } }
body.ubicando #capsula-presentacion, body.ubicando #herramientas, body.ubicando #barra-acciones, body.ubicando #barra-superior, body.ubicando #panel-izquierdo, body.ubicando #panel-derecho,
body.ubicando #cubo-orientacion, body.ubicando .pines-notas, body.ubicando #tira-vistas { display: none !important; }

/* Rueda presionada: mirar alrededor desde donde está la cámara */
body.mirando-aqui, body.mirando-aqui #lienzo canvas { cursor: move !important; }

/* Cámara de arquitectura: lente y verticales rectas en el menú «Más» */
.opciones-lente { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.capsula-mas .opcion-verticales { width: 100%; justify-content: center; min-height: 44px; margin-top: 4px; }
.capsula-mas .opcion-verticales[aria-pressed="true"], .capsula-mas .opciones-lente button[aria-pressed="true"] { background: var(--cromo-activo); box-shadow: inset 0 0 0 1px var(--cromo-texto); }

/* Barra superior que se compacta sola cuando no cabe (ver js/ui/barra-adaptable.js) */
#barra-superior.compacta-1 .texto-boton, #barra-superior.compacta-1 .etiqueta-beta, #barra-superior.compacta-1 .boton-paleta kbd { display: none; }
#barra-superior.compacta-1 button { padding-inline: 9px; }
#barra-superior.compacta-2 #btn-sugerencias, #barra-superior.compacta-2 #btn-acerca, #barra-superior.compacta-2 #btn-conexiones { display: none; }
#barra-superior.compacta-2 #btn-mas { display: inline-flex; }
/* Teléfonos angostos (360 px) en Revisión: «Proyectos» sólo con su ícono y el selector de modo más justo */
#barra-superior.compacta-3 .texto-inicio { display: none; }
#barra-superior.compacta-3 .segmentado button { padding-inline: 7px; }
#barra-superior.compacta-3 .grupo-barra { gap: 4px; }

/* Render con IA: en el panel de Render y como «IA» en cada vista guardada (junto a «Render») */
.render-ia-bloque { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cromo-borde); }
.render-ia-bloque button { width: 100%; justify-content: center; min-height: 40px; }
.vista-tarjeta .render-ia-vista { left: 76px; background: #292724; color: #fffdf9; }

/* Cuenta de DRB Studio */
#btn-cuenta.con-sesion { background: var(--acento-suave); }
.cuenta-google { display: flex; justify-content: center; min-height: 44px; margin: 10px 0 4px; }
.separador-cuenta { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--texto-suave, #6b675f); font-size: 13px; }
.separador-cuenta::before, .separador-cuenta::after { content: ""; flex: 1; border-top: 1px solid var(--borde); }
.form-cuenta { display: grid; gap: 10px; }
.form-cuenta .principal { min-height: 44px; }
.error-cuenta { color: #a33a2a; min-height: 1em; margin: 0; }
.inicio-cuenta { margin: 4px 0 0; }
.inicio-cta .nota-cta { flex-basis: 100%; }
/* Pasos de «Ubicación y entorno» */
.paso-entorno { margin: 12px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--texto-suave, #6b675f); }
.inicio-cuenta .nota { margin: 0; max-width: 34em; }
/* «Crear cuenta gratis»: contorno marcado del mismo tamaño que «Abrir mi proyecto» (segunda acción, bien visible) */
button.boton-cuenta-inicio { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-solido); border: 1.5px solid var(--texto); color: var(--texto); }
@media (hover: hover) and (pointer: fine) { button.boton-cuenta-inicio:hover { background: var(--texto); color: var(--panel-solido); } }
/* «Entrar» en la barra: píldora oscura que resalta mientras no hay sesión; con sesión vuelve a ser discreta */
#btn-cuenta:not(.con-sesion) { background: var(--texto); color: var(--panel-solido); border-color: transparent; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { #btn-cuenta:not(.con-sesion):hover { opacity: 0.88; } }
#barra-superior.compacta-2 #btn-cuenta .texto-boton { display: none; }
#dialogo-cuenta [hidden] { display: none; }
.cuenta-google:empty { display: none; }

/* Tarjeta de vista: el botón «ir» ocupa la tarjeta y Render, IA y Borrar son botones hermanos encima */
.vista-tarjeta .ir-tarjeta { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; border-radius: 0; }
.vista-tarjeta .ir-tarjeta:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.vista-tarjeta button.render-vista { border: 0; font: inherit; font-size: 12px; font-weight: 600; }
.vista-tarjeta button.quitar { border: 0; }

/* Recuperar acceso: conserva la tipografía y los controles del diálogo de cuenta. */
#cuenta-recuperacion-mensaje { overflow-wrap: anywhere; }
#cuenta-recuperacion .enlace { white-space: normal; }

/* Mis proyectos en la nube (js/ui/nube-ui.js) */
.tarjeta-local.a-medias { opacity: 0.72; cursor: default; }
.tarjeta-local.a-medias .acciones-tarjeta { opacity: 1; }
#nube-estado:empty { display: none; }
.compartir-nube-crear { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lista-enlaces-nube { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.lista-enlaces-nube li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.lista-enlaces-nube:empty::after { content: "Ninguno por ahora."; color: var(--texto-suave, #6b675f); font-size: 13px; }