/* COORDINATE · Visor de obra — hoja de estilos común.
   Pensada para teléfono en obra: contraste alto, botones grandes,
   nada que dependa de un puntero fino. Colores: paleta Acero de la
   marca v2; tipografía Inter, copiada en vendor/ para ir sin conexión. */

@font-face {
  font-family: "Inter";
  src: url("../vendor/inter/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* paleta Acero */
  --color-bg: #121826;
  --color-surface: #1c2433;
  --color-text: #e9eef5;
  --color-text-2: #c9d3e2;
  --color-accent: #62a0e8;
  --color-accent-300: #bcd6f3;
  --color-accent-400: #8ebdf0;
  --color-accent-600: #3d7cc4;
  --color-accent-700: #2d5c95;
  --color-accent-800: #22436f;
  --color-accent-900: #192a44;
  --color-section: #1b3560;
  --color-light-bg: #eef1f6;

  --fondo: var(--color-bg);
  --fondo-2: var(--color-surface);
  --fondo-3: #263147;
  --borde: #34425b;
  --texto: var(--color-text);
  --texto-tenue: #9dafc6;
  --acento: var(--color-accent);
  --acento-oscuro: var(--color-accent-600);
  --texto-sobre-acento: #0c1628;
  --seleccion: var(--color-accent-400);
  --alto-barra: 3.25rem;
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  /* tonos para velos y avisos (cambian con el tema) */
  --velo-rgb: 18, 24, 38;
  --superficie-rgb: 28, 36, 51;
  --borde-rgb: 52, 66, 91;
  --peligro-texto: #ff8a80;
  --aviso-texto: #ffb36b;
  --portada-arriba: var(--color-section);
  --portada-abajo: #0c101a;
  color-scheme: dark;
}

/* ---------- modo claro (js/tema.js) ----------
   «claro» siempre; «auto» sigue al sistema del teléfono. Fondo #eef1f6 y
   acento #3d7cc4: la línea de impresos de la marca. */
:root[data-tema="claro"] {
  --color-bg: #eef1f6;
  --color-surface: #ffffff;
  --color-text: #121826;
  --color-text-2: #3b4a60;
  --color-accent: #3d7cc4;
  --color-accent-300: #22436f;
  --color-accent-400: #3d7cc4;
  --color-accent-600: #2d5c95;
  --color-accent-800: #bcd6f3;
  --color-accent-900: #e6eef9;
  --fondo-3: #e3e9f2;
  --borde: #c9d3e2;
  --texto-tenue: #5a6678;
  --acento-oscuro: #2d5c95;
  --texto-sobre-acento: #ffffff;
  --seleccion: #3d7cc4;
  --velo-rgb: 238, 241, 246;
  --superficie-rgb: 255, 255, 255;
  --borde-rgb: 201, 211, 226;
  --peligro-texto: #b3261e;
  --aviso-texto: #a85a00;
  --portada-arriba: #d6e4f5;
  --portada-abajo: #eef1f6;
  color-scheme: only light; /* «only»: que Chrome no oscurezca la página por su cuenta */
}
@media (prefers-color-scheme: light) {
  :root[data-tema="auto"] {
    --color-bg: #eef1f6;
    --color-surface: #ffffff;
    --color-text: #121826;
    --color-text-2: #3b4a60;
    --color-accent: #3d7cc4;
    --color-accent-300: #22436f;
    --color-accent-400: #3d7cc4;
    --color-accent-600: #2d5c95;
    --color-accent-800: #bcd6f3;
    --color-accent-900: #e6eef9;
    --fondo-3: #e3e9f2;
    --borde: #c9d3e2;
    --texto-tenue: #5a6678;
    --acento-oscuro: #2d5c95;
    --texto-sobre-acento: #ffffff;
    --seleccion: #3d7cc4;
    --velo-rgb: 238, 241, 246;
    --superficie-rgb: 255, 255, 255;
    --borde-rgb: 201, 211, 226;
    --peligro-texto: #b3261e;
    --aviso-texto: #a85a00;
    color-scheme: only light; /* «only»: que Chrome no oscurezca la página por su cuenta */
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body { touch-action: none; }

/* ---------- lienzo 3D ---------- */

#lienzo-caja {
  position: fixed;
  inset: 0;
}

#lienzo {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ---------- barras ---------- */

.barra-superior {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: calc(var(--seguro-arriba) + .4rem) .6rem .4rem;
  background: linear-gradient(to bottom, rgba(var(--velo-rgb), .96), rgba(var(--velo-rgb), .75) 70%, transparent);
}

.titulo {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.acciones { display: flex; gap: .4rem; }

.barra-inferior {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 26;
  display: flex;
  justify-content: space-around;
  gap: .25rem;
  padding: .35rem .4rem calc(var(--seguro-abajo) + .35rem);
  background: rgba(var(--velo-rgb), .92);
  border-top: 1px solid var(--borde);
  backdrop-filter: blur(6px);
}

/* ---------- marca ---------- */

/* Logotipo «C◎ORDINATE»: el símbolo de nodos en anillo hace de O. */
.marca {
  display: inline-flex;
  align-items: center;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--texto);
}

.marca svg { width: .92em; height: .92em; margin: 0 .1em 0 .02em; flex: 0 0 auto; }

.titulo .marca { font-size: .9rem; }

.titulo-seccion {
  margin-left: .55rem;
  padding-left: .55rem;
  border-left: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-weight: 500;
  letter-spacing: .06em;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.lema { font-size: .8rem !important; letter-spacing: .04em; color: var(--color-accent-300) !important; }

/* ---------- botones ---------- */

.boton {
  appearance: none;
  border: 1px solid var(--borde);
  background: var(--fondo-3);
  color: var(--texto);
  font: inherit;
  font-size: .85rem;
  padding: .5rem .7rem;
  border-radius: .5rem;
  min-height: 2.4rem;
  cursor: pointer;
  white-space: nowrap;
}

a.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.boton:active { background: var(--fondo-2); }
.boton[disabled] { opacity: .4; cursor: default; }

.boton-destacado {
  background: var(--acento);
  border-color: var(--acento-oscuro);
  color: var(--texto-sobre-acento);
  font-weight: 600;
}

.boton-destacado:active { background: var(--acento-oscuro); }
.boton.grande { width: 100%; padding: .8rem; font-size: 1rem; }

.boton-icono {
  appearance: none;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  font: inherit;
  font-size: .68rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .25rem .4rem;
  min-width: 3.6rem;
  min-height: 2.9rem;
  border-radius: .5rem;
  cursor: pointer;
}

.boton-icono span { font-size: 1.15rem; line-height: 1; }
.boton-icono:active { background: var(--fondo-3); }
.boton-icono[disabled] { opacity: .35; cursor: default; }
.boton-icono.activo { color: var(--acento); }

.enlace {
  appearance: none;
  border: 0;
  background: none;
  color: var(--seleccion);
  font: inherit;
  font-size: .78rem;
  padding: .3rem .2rem;
  cursor: pointer;
}

/* ---------- panel lateral ---------- */

.panel {
  position: fixed;
  z-index: 25;
  left: 0; right: 0;
  /* Termina por encima de la barra inferior: así se puede aislar u ocultar
     sin cerrar antes los filtros. */
  bottom: calc(var(--seguro-abajo) + 3.7rem);
  top: 40%;
  display: flex;
  flex-direction: column;
  background: var(--fondo-2);
  border-top: 1px solid var(--borde);
  border-radius: .9rem .9rem 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,.5);
}

.panel[hidden] { display: none; }

.panel-pestanas {
  display: flex;
  gap: .15rem;
  padding: .35rem .35rem 0;
  border-bottom: 1px solid var(--borde);
  flex: 0 0 auto;
}

.pestana {
  appearance: none;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  font: inherit;
  font-size: .82rem;
  padding: .6rem .55rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  flex: 1;
}

.pestana.activa { color: var(--texto); border-bottom-color: var(--acento); }
.pestana-cerrar { flex: 0 0 2.6rem; font-size: 1rem; }

.hoja {
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: .7rem .8rem 1rem;
  flex: 1 1 auto;
}

.hoja.activa { display: block; }

.grupo { margin-bottom: 1.1rem; }

.grupo-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}

.grupo h2 {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.lista { display: flex; flex-direction: column; }

/* fila con casilla de visibilidad */
.fila {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .3rem;
  border-bottom: 1px solid rgba(var(--borde-rgb), .5);
  cursor: pointer;
}

.fila:last-child { border-bottom: 0; }
.fila input { width: 1.1rem; height: 1.1rem; accent-color: var(--acento); flex: 0 0 auto; }
.fila .fila-texto { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .fila-cuenta { color: var(--texto-tenue); font-size: .78rem; font-variant-numeric: tabular-nums; }
.fila.resultado:active { background: var(--fondo-3); }

.campo {
  width: 100%;
  padding: .6rem .7rem;
  margin-bottom: .6rem;
  border: 1px solid var(--borde);
  border-radius: .5rem;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
}

.deslizador { width: 100%; accent-color: var(--acento); height: 2rem; touch-action: pan-x; }

.pie { margin: .2rem 0 0; font-size: .76rem; color: var(--texto-tenue); }
.vacio { color: var(--texto-tenue); font-size: .88rem; }

/* ---------- propiedades ---------- */

.propiedades h3 {
  margin: 1rem 0 .3rem;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento);
}

.propiedades h3:first-child { margin-top: 0; }

.propiedades dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(6rem, 40%) 1fr;
  gap: .1rem .6rem;
}

.propiedades dt {
  color: var(--texto-tenue);
  font-size: .8rem;
  padding: .28rem 0;
  overflow-wrap: anywhere;
}

.propiedades dd {
  margin: 0;
  padding: .28rem 0;
  font-size: .84rem;
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(var(--borde-rgb), .45);
}

.propiedades dt { border-bottom: 1px solid rgba(var(--borde-rgb), .45); }

/* La lista de propiedades se pliega por conjuntos. */
.propiedades details { margin-bottom: .6rem; }
.propiedades summary {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento);
  cursor: pointer;
}
.propiedades-cuenta { margin-left: auto; color: var(--texto-tenue); font-weight: 500; letter-spacing: 0; }
.propiedades dd[tabindex] { cursor: copy; }

/* ---------- pestañas que no caben: se desplazan ---------- */

.panel-pestanas { overflow-x: auto; scrollbar-width: none; }
.panel-pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: 1 0 auto; }
.panel.panel-bajo { top: 58%; }

/* ---------- filtros: botón de transparencia ---------- */

.fila-tenue {
  appearance: none;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: none;
  color: var(--texto-tenue);
  font-size: .95rem;
  cursor: pointer;
}
.fila-tenue.activo { background: var(--acento); border-color: var(--acento); color: var(--texto-sobre-acento); }

/* ---------- chips (cortes) ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.chip {
  appearance: none;
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: .82rem;
  padding: .4rem .75rem;
  min-height: 2.2rem;
  border-radius: 1.1rem;
  cursor: pointer;
}
.chip.activo { background: var(--acento); border-color: var(--acento-oscuro); color: var(--texto-sobre-acento); font-weight: 600; }

.cortes-controles { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
.cortes-controles .boton { align-self: flex-start; }
.corte-control { display: block; }
.corte-etiqueta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--texto-tenue); }
.corte-valor { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ---------- vista ---------- */

.fondos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.fondo {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .25rem;
  padding: .3rem;
  border: 2px solid var(--borde);
  border-radius: .55rem;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: .74rem;
  cursor: pointer;
}
.fondo.activo { border-color: var(--acento); }
.fondo-muestra { display: block; height: 2.2rem; border-radius: .35rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

.vistas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.vistas .boton { padding: .5rem .3rem; font-size: .82rem; }

.leyenda { margin-top: .3rem; }
.leyenda-muestra { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border-radius: .25rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.leyenda .grupo-cabecera { padding: .2rem .3rem; }

/* ---------- ficha del elemento seleccionado ---------- */

.ficha-elemento {
  position: fixed;
  z-index: 24;
  left: .5rem;
  right: .5rem;
  bottom: calc(var(--seguro-abajo) + 4.1rem);
  max-width: 32rem;
  margin: 0 auto;
  padding: .55rem .7rem .65rem;
  background: rgba(var(--superficie-rgb), .96);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--seleccion);
  border-radius: .7rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.ficha-elemento[hidden] { display: none; }
/* Con el panel abierto la ficha estorba: el panel ya enseña lo mismo. */
.panel:not([hidden]) ~ .ficha-elemento { display: none; }
.ficha-cabecera { display: flex; align-items: flex-start; gap: .4rem; }
.ficha-titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ficha-clase { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--seleccion); }
.ficha-nombre { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-cerrar { min-width: 2.4rem; padding: .2rem; }
.ficha-datos { margin: .15rem 0 .5rem; font-size: .78rem; color: var(--texto-tenue); }
.ficha-datos:empty { display: none; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: .35rem; }
.ficha-acciones .boton { flex: 0 0 auto; min-height: 2.3rem; padding: .35rem .65rem; font-size: .82rem; }
.boton.activo { background: var(--acento); border-color: var(--acento-oscuro); color: var(--texto-sobre-acento); font-weight: 600; }

/* ---------- medir ---------- */

.barra-medir {
  position: fixed;
  z-index: 27;
  left: .5rem;
  right: .5rem;
  top: calc(var(--seguro-arriba) + 3.6rem);
  max-width: 32rem;
  margin: 0 auto;
  padding: .45rem .5rem;
  background: rgba(var(--superficie-rgb), .96);
  border: 1px solid var(--borde);
  border-radius: .7rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.barra-medir[hidden] { display: none; }
.barra-medir-fila { display: flex; align-items: center; gap: .3rem; overflow-x: auto; scrollbar-width: none; }
.barra-medir-fila .boton { flex: 0 0 auto; min-height: 2.2rem; padding: .3rem .6rem; font-size: .82rem; }
.barra-medir-fila .boton[hidden] { display: none; }
.barra-medir .separador { flex: 1; }
.medir-ayuda { margin: .35rem .2rem 0; font-size: .78rem; color: var(--texto-tenue); }

.capa-medidas { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.capa-medidas[hidden] { display: none; }
.medidas-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.medida-fondo { fill: none; stroke: rgba(0,0,0,.55); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.medida-linea { fill: none; stroke: #ffc94d; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.medida-area { fill: rgba(255,201,77,.22); stroke: none; }
.medida-punto { fill: #ffc94d; stroke: #121826; stroke-width: 2; }
.medida-rotulo {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .2rem .5rem;
  border-radius: .4rem;
  background: rgba(var(--velo-rgb), .9);
  border: 1px solid #ffc94d;
  white-space: nowrap;
  will-change: transform;
}
.medida-rotulo strong { font-size: .9rem; color: #ffd978; font-variant-numeric: tabular-nums; }
.medida-rotulo span { font-size: .68rem; color: var(--texto-tenue); }
.medida-rotulo span:empty { display: none; }

/* ---------- bienvenida ---------- */

.bienvenida {
  --duracion: 5000ms;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--color-section), #0c101a 72%);
  transition: opacity .45s ease, visibility .45s;
  cursor: pointer;
}
.bienvenida[hidden] { display: none; }
.bienvenida.fuera { opacity: 0; visibility: hidden; }

.bienvenida-caja { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.5rem; text-align: center; }

.bienvenida-simbolo { width: 7.5rem; height: 7.5rem; overflow: visible; margin-bottom: 1.2rem; }

/* Cada nodo gira alrededor del centro con su propio retraso: se agrupan
   y se separan como una órbita que «carga». Al principio salen del centro. */
.bienvenida .nodo {
  fill: var(--color-text);
  transform-box: view-box;
  transform-origin: 32px 32px;
  animation:
    nodo-nace .7s cubic-bezier(.2,.8,.2,1) both,
    nodo-orbita 1.8s cubic-bezier(.55,0,.3,1) .7s infinite;
  animation-delay: calc(var(--i) * 45ms), calc(.7s + var(--i) * 70ms);
}
.bienvenida .nucleo {
  fill: var(--color-accent);
  transform-box: view-box;
  transform-origin: 32px 32px;
  animation: nucleo-late 1.8s ease-in-out .7s infinite;
}

@keyframes nodo-nace { from { transform: scale(0) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes nodo-orbita { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes nucleo-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.bienvenida-marca {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .32em;
  padding-left: .32em;
  color: var(--color-text);
  animation: aparece .8s ease .6s both;
}
.bienvenida-lema { margin: 0 0 1.4rem; font-size: .82rem; color: var(--color-accent-300); animation: aparece .8s ease 1.1s both; }
@keyframes aparece { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }

.bienvenida-barra { width: 11rem; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.bienvenida-barra span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform-origin: left;
  animation: barra calc(var(--duracion) - .5s) cubic-bezier(.4,0,.2,1) both;
}
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .bienvenida .nodo, .bienvenida .nucleo { animation: none; }
}

/* ---------- portada, carga, avisos ---------- */

.portada {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(120% 90% at 50% 0%, var(--portada-arriba), var(--portada-abajo) 70%);
}

.portada[hidden] { display: none; }

.portada-caja {
  max-width: 26rem;
  width: 100%;
  text-align: center;
}

.portada-caja h2 { margin: 0 0 .2rem; font-size: 1.6rem; display: flex; justify-content: center; }
.portada-caja .subtitulo { margin: 0 0 1rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-tenue); }
.portada-caja p { color: var(--texto-tenue); font-size: .92rem; }
.portada-caja .boton { margin-top: 1rem; }

.cargando {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(var(--velo-rgb), .88);
}

.cargando[hidden] { display: none; }
.cargando-caja { width: 100%; max-width: 22rem; text-align: center; }

.barra-progreso {
  height: .45rem;
  margin: .8rem 0 .5rem;
  border-radius: .3rem;
  background: var(--fondo-3);
  overflow: hidden;
}

#progreso {
  height: 100%;
  width: 0;
  background: var(--acento);
  transition: width .2s linear;
}

.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(var(--seguro-abajo) + 4.2rem);
  transform: translateX(-50%);
  z-index: 50;
  max-width: 90vw;
  padding: .6rem .9rem;
  border-radius: .6rem;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  font-size: .85rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}

.aviso[hidden] { display: none; }
/* Con la ficha del elemento abierta, el aviso pasa arriba para no taparla. */
.ficha-elemento:not([hidden]) ~ .aviso { bottom: auto; top: calc(var(--seguro-arriba) + 4rem); }

/* ---------- capa de realidad aumentada ---------- */

.capa-ar {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  padding: calc(var(--seguro-arriba) + .6rem) .6rem calc(var(--seguro-abajo) + .6rem);
}

.capa-ar[hidden] { display: none; }
.capa-ar button { pointer-events: auto; }

.ar-superior { display: flex; align-items: flex-start; gap: .5rem; }

.ar-mensaje {
  flex: 1;
  margin: 0;
  padding: .5rem .7rem;
  border-radius: .5rem;
  background: rgba(var(--velo-rgb), .78);
  font-size: .85rem;
}

.ar-inferior { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.ar-escalas, .ar-controles { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.ar-escala.activa { background: var(--acento); border-color: var(--acento-oscuro); color: var(--texto-sobre-acento); font-weight: 600; }

.ar-ficha {
  pointer-events: auto;
  align-self: stretch;
  max-height: 40vh;
  overflow-y: auto;
  margin: .5rem 0;
  padding: .7rem .8rem;
  border-radius: .6rem;
  background: rgba(var(--velo-rgb), .9);
  border: 1px solid var(--borde);
  font-size: .85rem;
}

.ar-ficha[hidden] { display: none; }
.ar-ficha strong { color: var(--acento); }

/* ---------- pantallas anchas ---------- */

@media (min-width: 700px) {
  .panel {
    top: var(--alto-barra);
    right: auto;
    width: 22rem;
    border-radius: 0 .9rem .9rem 0;
    border-right: 1px solid var(--borde);
  }
  .titulo { font-size: 1.05rem; }
}

/* En el teléfono la cabecera no da para el logotipo entero: el símbolo ya
   está en el botón del menú, así que queda el nombre de la sección. */
@media (max-width: 520px) {
  .titulo .marca { display: none; }
  .titulo .titulo-seccion { margin-left: .1rem; padding-left: 0; border-left: 0; color: var(--texto); font-weight: 600; letter-spacing: .02em; }
}

/* ---------- menú del símbolo (js/menu.js): sirve en todas las páginas ----------
   El botón es el símbolo de la marca con algo de relieve: luz arriba,
   sombra abajo. Al tocarlo los nodos giran y el centro late. */

.boton-menu {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(160deg, var(--fondo-3), var(--fondo-2));
  color: var(--texto);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 4px rgba(0, 0, 0, .25),
    0 3px 8px rgba(0, 0, 0, .35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .2s ease;
}
:root[data-tema="claro"] .boton-menu {
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(27, 53, 96, .12), 0 3px 8px rgba(27, 53, 96, .2);
}
.boton-menu:active { transform: scale(.92); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); }
.boton-menu:focus-visible { outline: 2px solid var(--seleccion); outline-offset: 2px; }
.boton-menu.abierto { border-color: var(--acento); }

.menu-simbolo { width: 1.7rem; height: 1.7rem; overflow: visible; }
.menu-nodos {
  fill: currentColor;
  transform-origin: 32px 32px;
  transition: transform .6s cubic-bezier(.34, 1.4, .64, 1);
}
.boton-menu.abierto .menu-nodos { transform: rotate(135deg); }
.menu-centro { fill: var(--color-accent); transform-origin: 32px 32px; }
.boton-menu.toque .menu-centro { animation: menu-latido .55s ease-out; }
.boton-menu.toque .menu-nodos circle { animation: menu-nodo .5s ease-out; animation-delay: calc(var(--n, 0) * 25ms); transform-box: fill-box; transform-origin: center; }
.menu-nodos circle:nth-child(2) { --n: 1; } .menu-nodos circle:nth-child(3) { --n: 2; }
.menu-nodos circle:nth-child(4) { --n: 3; } .menu-nodos circle:nth-child(5) { --n: 4; }
.menu-nodos circle:nth-child(6) { --n: 5; } .menu-nodos circle:nth-child(7) { --n: 6; }
.menu-nodos circle:nth-child(8) { --n: 7; }
@keyframes menu-latido { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes menu-nodo { 0% { transform: scale(1); } 40% { transform: scale(.7); } 100% { transform: scale(1); } }

.menu-aviso {
  position: absolute;
  top: .05rem;
  right: .05rem;
  width: .7rem;
  height: .7rem;
  border: 2px solid var(--fondo);
  border-radius: 50%;
  background: var(--peligro-texto);
}
.menu-aviso[hidden] { display: none; }

.boton-menu-suelto { position: absolute; top: calc(var(--seguro-arriba) + .7rem); left: .8rem; z-index: 2; }

.menu-velo { position: fixed; inset: 0; z-index: 60; background: rgba(var(--velo-rgb), .45); }
.menu-velo[hidden] { display: none; }

.menu-hoja {
  position: fixed;
  z-index: 61;
  width: min(22rem, calc(100vw - 1rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: .45rem .45rem .6rem;
  border: 1px solid var(--borde);
  border-radius: 1rem;
  background: var(--fondo-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  transform-origin: 1.3rem 0;
}
.menu-hoja[hidden] { display: none; }
.menu-hoja.entra { animation: menu-baja .26s cubic-bezier(.2, .8, .2, 1); }
.menu-hoja.entra .menu-item { animation: menu-item .3s ease-out backwards; animation-delay: calc(var(--i, 0) * 22ms + 40ms); }
.menu-hoja.sale { animation: menu-sube .16s ease-in forwards; }
@keyframes menu-baja { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes menu-sube { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes menu-item { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.menu-grupo {
  margin: .55rem .55rem .25rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.menu-grupo:first-child { margin-top: .2rem; }

.menu-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .6rem;
  border-radius: .7rem;
  color: var(--texto);
  text-decoration: none;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--fondo-3); outline: none; }
.menu-item.actual { background: var(--fondo-3); box-shadow: inset 3px 0 0 var(--acento); }
.menu-icono { width: 1.6rem; font-size: 1.2rem; text-align: center; flex: 0 0 auto; }
.menu-textos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.menu-textos strong { font-size: .93rem; font-weight: 600; }
.menu-ayuda { font-size: .74rem; color: var(--texto-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-contador {
  min-width: 1.35rem;
  padding: .05rem .4rem;
  border-radius: 1rem;
  background: var(--peligro-texto);
  color: var(--color-bg);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

.menu-temas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: 0 .3rem; }
.menu-tema {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .45rem .2rem;
  border: 1px solid var(--borde);
  border-radius: .65rem;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.menu-tema span:first-child { font-size: 1.1rem; }
.menu-tema.activo { border: 2px solid var(--acento); background: var(--fondo-3); font-weight: 600; }

.menu-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .9rem;
  margin: .7rem .55rem 0;
  padding-top: .55rem;
  border-top: 1px solid var(--borde);
  font-size: .8rem;
}
.menu-enlace { color: var(--seleccion); text-decoration: none; }
.menu-marca { margin-left: auto; color: var(--texto-tenue); font-size: .72rem; }

@media (prefers-reduced-motion: reduce) {
  .menu-nodos, .boton-menu { transition: none; }
  .boton-menu.toque .menu-centro, .boton-menu.toque .menu-nodos circle,
  .menu-hoja.entra, .menu-hoja.entra .menu-item, .menu-hoja.sale { animation: none; }
}

/* aviso de versión nueva (js/tema.js) */
.aviso-version {
  position: fixed;
  left: 50%;
  bottom: calc(var(--seguro-abajo) + 1rem);
  transform: translateX(-50%);
  z-index: 90;
  max-width: calc(100vw - 2rem);
  padding: .7rem 1rem;
  border: 0;
  border-radius: 2rem;
  background: var(--acento);
  color: var(--texto-sobre-acento);
  font: 600 .9rem/1.2 inherit;
  font-family: inherit;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  cursor: pointer;
}

/* ---------- visor de planos DXF (Modelo 3D → abrir un .dxf; js/dxf.js) ---------- */

.capa-dxf {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
}
.capa-dxf[hidden] { display: none; }
.capa-dxf .plano-barra {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: calc(var(--seguro-arriba) + .4rem) .6rem .4rem;
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
}
.capa-dxf .plano-nombre { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capa-dxf .plano-ayuda { margin: 0; padding: .35rem .8rem; font-size: .8rem; color: var(--texto-tenue); background: var(--fondo-2); }
.capa-dxf .plano-herramientas {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
  padding: .45rem .7rem; background: var(--fondo-2); border-bottom: 1px solid var(--borde);
}
.capa-dxf .plano-herramientas[hidden] { display: none; }
.capa-dxf .plano-herramientas .boton { min-height: 2.2rem; padding: .35rem .6rem; }
.capa-dxf .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.dxf-marco { position: relative; flex: 1; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.dxf-lienzo { display: block; cursor: grab; touch-action: none; }
.dxf-lectura {
  position: absolute;
  left: 50%;
  bottom: calc(var(--seguro-abajo) + 1rem);
  transform: translateX(-50%);
  padding: .5rem .9rem;
  border-radius: .6rem;
  background: #ff6b2c;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.dxf-lectura[hidden] { display: none; }
.dxf-capas {
  position: absolute;
  top: .5rem;
  right: .5rem;
  max-height: calc(100% - 1rem);
  width: min(18rem, calc(100% - 1rem));
  overflow-y: auto;
  padding: .5rem .7rem;
  border: 1px solid var(--borde);
  border-radius: .6rem;
  background: rgba(var(--superficie-rgb), .97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.dxf-capas[hidden] { display: none; }
.dxf-capas .fila-botones { display: flex; gap: .8rem; margin-bottom: .3rem; }
.dxf-capa { display: flex; align-items: center; gap: .45rem; padding: .3rem 0; font-size: .86rem; border-bottom: 1px solid var(--borde); }
.dxf-muestra { width: .9rem; height: .9rem; border-radius: .2rem; border: 1px solid var(--borde); flex: 0 0 auto; }
.dxf-unidades { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--texto-tenue); }
.dxf-unidades .campo { width: auto; min-height: 2.2rem; padding: .25rem .4rem; }

/* ---------- recorridos guiados (js/guia.js) ---------- */

.guia-capa { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.guia-capa[hidden] { display: none; }
.guia-capa.sin-foco { background: rgba(8, 12, 20, .62); pointer-events: auto; }
.guia-foco {
  position: fixed;
  border-radius: .7rem;
  box-shadow: 0 0 0 3px var(--acento), 0 0 0 9999px rgba(8, 12, 20, .62);
  transition: left .2s, top .2s, width .2s, height .2s;
  pointer-events: none;
}
.guia-foco[hidden] { display: none; }
.guia-globo {
  position: fixed;
  pointer-events: auto;
  padding: .8rem .9rem .75rem;
  border: 1px solid var(--borde);
  border-radius: .8rem;
  background: var(--fondo-2);
  color: var(--texto);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.guia-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.guia-contador { font-size: .72rem; letter-spacing: .04em; color: var(--acento); font-weight: 600; }
.guia-cerrar { appearance: none; border: 0; background: none; color: var(--texto-tenue); font-size: 1rem; cursor: pointer; padding: .2rem .35rem; }
.guia-globo h3 { margin: .35rem 0 .3rem; font-size: 1.02rem; }
.guia-globo p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--texto); }
.guia-botones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }

/* Al imprimir (informes PDF), siempre papel blanco aunque la app esté en
   modo oscuro: también los márgenes de la página. */
@media print {
  :root, :root[data-tema] { color-scheme: light !important; background: #fff !important; }
  body { background: #fff !important; }
}

/* Cambio de dirección de la app (js/mudanza.js, mudanza.html) */
.aviso-mudanza {
  margin: 0 0 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  background: var(--color-surface);
}
.aviso-mudanza p { margin: 0 0 .6rem; font-size: .9rem; }
.mudanza-estado.ok { color: var(--color-accent); }
.mudanza-estado.error { color: var(--peligro-texto); }
.boton[hidden] { display: none !important; }