@font-face { font-family: 'Archivo'; src: url('../fuentes/Archivo.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fuentes/PlexMono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fuentes/PlexMono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fuentes/InstrumentSerif.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fuentes/InstrumentSerif-Italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  /* La mesa del estudio */
  --mesa: #d9d3c7;
  --plancha: #36584a;
  --papel: #f8f4eb;
  --papel-hondo: #efe8da;
  --papel-raya: #e2d9c7;
  --kraft: #c7a679;
  --kraft-hondo: #b08e60;
  --grafito: #2a2b2e;
  --grafito-2: #55565b;
  --grafito-3: #7d7c78;
  --cota: #c23f2b;
  --cota-suave: #c23f2b1f;
  --tinta-clara: #fbf8f1;

  --f-titulo: 'Instrument Serif', 'Times New Roman', serif;
  --f-texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-dato: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --t-micro: 0.6875rem;   /* 11 */
  --t-pequeno: 0.8125rem; /* 13 */
  --t-base: 0.9375rem;    /* 15 */
  --t-medio: 1.25rem;     /* 20 */
  --t-grande: 1.875rem;   /* 30 */
  --t-titulo: 2.25rem;    /* 36 */

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px;
  --radio: 2px;
  --linea: 1px solid var(--grafito);
  --linea-fina: 1px solid #2a2b2e33;
  --sombra-papel: 0 1px 0 #00000010, 0 14px 28px -16px #3a2c1a73, 0 3px 8px -4px #3a2c1a2e;
  --sombra-alzada: 0 2px 0 #00000012, 0 18px 30px -14px #3a2c1a8c;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ficha-w: 328px;
  --lamina-h: 196px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--mesa);
  color: var(--grafito);
  font: 400 var(--t-base)/1.5 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
::selection { background: var(--cota); color: var(--tinta-clara); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.38; }
:focus-visible { outline: 2px solid var(--cota); outline-offset: 2px; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="range"] { accent-color: var(--cota); }

.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: var(--e-4); top: -60px; z-index: 50; background: var(--grafito); color: var(--tinta-clara); padding: var(--e-2) var(--e-3); font: 500 var(--t-pequeno) var(--f-dato); text-decoration: none; }
.saltar:focus { top: var(--e-4); }

/* ---------- lienzo ---------- */
.mesa { position: fixed; inset: 0; touch-action: none; }
.mesa canvas { display: block; outline: none; }
body.arrastrando, body.arrastrando * { cursor: grabbing !important; user-select: none; }
body:not(.lista) .izquierda, body:not(.lista) .herramientas, body:not(.lista) .ficha, body:not(.lista) .lamina, body:not(.lista) .sol { opacity: 0; }
.izquierda, .herramientas, .ficha, .lamina, .sol { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }

/* ---------- rótulos y cotas sobre el 3D ---------- */
.rotulos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rotulos > * { position: absolute; left: 0; top: 0; will-change: transform; }
.cota {
  font: 500 var(--t-micro)/1 var(--f-dato);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--grafito);
  background: var(--papel);
  border: var(--linea-fina);
  padding: 3px 5px 2px;
  white-space: nowrap;
}
.cota--viva { color: var(--cota); border-color: var(--cota); }
.vertice {
  pointer-events: auto;
  width: 22px; height: 22px;
  padding: 0;
  border: 2px solid var(--cota);
  background: var(--papel);
  cursor: move;
  touch-action: none;
}
.vertice::after { content: ''; position: absolute; inset: 6px; background: var(--cota); }
.vertice:hover { background: var(--cota); }
.mitad {
  pointer-events: auto;
  width: 24px; height: 24px; padding: 0;
  border: 1px dashed var(--cota);
  border-radius: 50%;
  background: #f8f4ebd9;
  color: var(--cota);
  font: 500 15px/1 var(--f-dato);
}
.mitad:hover { background: var(--cota); color: var(--tinta-clara); border-style: solid; }
.sin-rotulos .rotulos { display: none; }

/* ---------- columna izquierda: cajetín y avisos ---------- */
.izquierda { position: fixed; left: var(--e-4); top: var(--e-4); width: 360px; display: grid; gap: var(--e-3); z-index: 5; }
.cajetin {
  background: var(--papel);
  border: 1.5px solid var(--grafito);
  box-shadow: var(--sombra-papel);
}
.cajetin__marca {
  display: flex; align-items: baseline; gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-bottom: var(--linea);
}
.marca { font: 400 1.375rem/1 var(--f-titulo); letter-spacing: -0.01em; }
.marca em { font-style: italic; }
.marca__sub { font: 400 var(--t-micro)/1 var(--f-dato); text-transform: uppercase; letter-spacing: 0.12em; color: var(--grafito-2); }
.cajetin__abrir { display: none; }
.cajetin__proyecto { display: block; padding: var(--e-2) var(--e-3) var(--e-2); border-bottom: var(--linea); }
.etq, .cajetin dt, .ficha h3, .campo label, .muestrario__etq {
  display: block;
  font: 500 0.625rem/1.2 var(--f-dato);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grafito-2);
}
.cajetin__proyecto input {
  display: block; width: 100%;
  margin-top: 2px;
  border: 0; padding: 0;
  background: transparent;
  font: 400 var(--t-grande)/1.1 var(--f-titulo);
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
}
.cajetin__proyecto input:focus { outline: none; box-shadow: inset 0 -1px 0 var(--cota); }
.cajetin__datos { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.cajetin__datos > div { padding: var(--e-2) var(--e-3); border-bottom: var(--linea); }
.cajetin__datos > div + div { border-left: var(--linea); }
.cajetin__datos dd { margin: 2px 0 0; font: 500 1.0625rem/1.2 var(--f-dato); font-variant-numeric: tabular-nums; }
.cajetin__datos .ocupacion { grid-column: 1 / -1; border-left: 0; display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: var(--e-3); }
.cajetin__datos .ocupacion dt { grid-column: 1; }
.cajetin__datos .ocupacion dd { grid-column: 2; margin: 0; }
.medidor {
  grid-column: 3; align-self: center;
  height: 10px;
  border: var(--linea);
  background:
    repeating-linear-gradient(-45deg, var(--grafito) 0 1px, transparent 1px 5px) left / var(--v, 0%) 100% no-repeat,
    var(--papel);
  transition: background-size 300ms var(--ease);
}
.medidor[data-nivel="alto"] { background: repeating-linear-gradient(-45deg, var(--cota) 0 1.5px, transparent 1.5px 4px) left / var(--v, 0%) 100% no-repeat, var(--papel); border-color: var(--cota); }
.nota-ocupacion { grid-column: 1 / -1; font-size: var(--t-micro); color: var(--grafito-2); margin-top: 2px; }
.cajetin__pie { display: grid; grid-template-columns: auto auto 1fr; border-bottom: var(--linea); }
.cajetin__pie span { padding: 5px var(--e-3); font: 400 var(--t-micro)/1.3 var(--f-dato); color: var(--grafito-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cajetin__pie span + span { border-left: var(--linea); }
.cajetin__menu { display: grid; grid-template-columns: repeat(3, 1fr); }
.cajetin__menu button {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-direction: row-reverse;
  min-height: 40px;
  border: 0; background: transparent;
  font: 500 var(--t-micro)/1 var(--f-dato); text-transform: uppercase; letter-spacing: 0.08em;
}
.cajetin__menu button:not(:nth-child(3n + 1)) { border-left: var(--linea); }
.cajetin__menu button:nth-child(n + 4) { border-top: var(--linea); }
.cajetin__menu button[hidden] { display: none; }
body[data-nube="no"] .cajetin__menu { grid-template-columns: repeat(5, 1fr); }
body[data-nube="no"] .cajetin__menu button { border-top: 0; border-left: var(--linea); padding: 0 4px; font-size: 0.625rem; letter-spacing: 0.04em; }
body[data-nube="no"] .cajetin__menu button:first-child { border-left: 0; }
body[data-nube="no"] .cajetin__menu .ico { display: none; }
@media (hover: hover) { .cajetin__menu button:hover { background: var(--papel-hondo); } }
.ico { display: inline-grid; place-items: center; flex: none; }

.avisos {
  background: var(--papel);
  border-left: 3px solid var(--cota);
  box-shadow: var(--sombra-papel);
  padding: var(--e-2) var(--e-3) var(--e-2);
  transform-origin: top left;
  animation: entra-nota 320ms var(--ease);
}
.avisos[hidden] { display: none; }
.avisos__titulo { margin: 0 0 var(--e-1); font: 500 var(--t-micro)/1.3 var(--f-dato); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cota); }
.avisos ul { list-style: none; margin: 0; padding: 0; }
.avisos li button {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; padding: 4px 0;
  font-size: var(--t-pequeno);
  text-decoration: underline; text-decoration-color: #c23f2b55; text-underline-offset: 3px;
}
@media (hover: hover) { .avisos li button:hover { color: var(--cota); } }
@keyframes entra-nota { from { opacity: 0; transform: translateY(-6px) rotate(-0.6deg); } }

/* ---------- herramientas ---------- */
.herramientas {
  position: fixed; top: var(--e-4); right: calc(var(--ficha-w) + var(--e-4) * 2);
  display: flex; gap: var(--e-3); align-items: stretch;
  z-index: 6;
}
.vistas { display: flex; background: var(--papel); border: 1.5px solid var(--grafito); box-shadow: var(--sombra-papel); }
.vistas button {
  border: 0; background: transparent;
  min-height: 40px; padding: 0 var(--e-4);
  font: 500 var(--t-micro)/1 var(--f-dato); text-transform: uppercase; letter-spacing: 0.12em;
}
.vistas button + button { border-left: var(--linea); }
.vistas button[aria-pressed="true"] { background: var(--grafito); color: var(--tinta-clara); }
@media (hover: hover) { .vistas button[aria-pressed="false"]:hover { background: var(--papel-hondo); } }
.acciones { display: flex; background: var(--papel); border: 1.5px solid var(--grafito); box-shadow: var(--sombra-papel); }
.boton-ico { display: grid; place-items: center; width: 42px; min-height: 40px; border: 0; background: transparent; }
.boton-ico + .boton-ico { border-left: var(--linea); }
.boton-ico[aria-pressed="true"] { color: var(--cota); background: var(--cota-suave); }
.boton-ico[data-modo="bajas"] { color: var(--cota); }
.boton-ico[data-modo="completas"] { color: var(--grafito-3); }
@media (hover: hover) { .boton-ico:not(:disabled):hover { background: var(--papel-hondo); } }
.boton-habitacion { display: none; }

.pista {
  position: fixed; left: 50%; bottom: calc(var(--lamina-h) + var(--e-4) * 2.5);
  transform: translateX(calc(-50% - var(--ficha-w) / 2));
  margin: 0; padding: 6px var(--e-3);
  background: var(--grafito); color: var(--tinta-clara);
  font: 400 var(--t-micro)/1.4 var(--f-dato); letter-spacing: 0.02em;
  max-width: min(560px, 90vw); text-align: center;
  z-index: 4;
}
body[data-vista="pie"] .pista { bottom: 96px; transform: translateX(-50%); }

/* ---------- transportador solar ---------- */
.sol {
  position: fixed; left: var(--e-4); bottom: calc(var(--lamina-h) + var(--e-4) * 2);
  width: 228px;
  z-index: 4;
  user-select: none;
}
.sol svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; cursor: grab; }
.sol-placa { fill: #f8f4ebe6; stroke: var(--grafito); stroke-width: 1.2; }
.sol:focus-within .sol-placa { stroke: var(--cota); stroke-width: 2; }
.sol-arco { fill: none; stroke: var(--grafito-3); stroke-width: 1; stroke-dasharray: 2 3; }
.sol-base { stroke: var(--grafito); stroke-width: 1; }
.marcas line { stroke: var(--grafito); stroke-width: 1; }
.marcas text { font: 500 8px var(--f-dato); fill: var(--grafito-2); text-anchor: middle; }
.sol-halo { fill: #e8a33a40; transition: fill 300ms; }
.sol-disco { fill: #e39a2d; stroke: var(--grafito); stroke-width: 1; transition: fill 300ms; }
body[data-noche="true"] .sol-disco { fill: var(--papel); }
body[data-noche="true"] .sol-halo { fill: #6d7a9940; }
.sol__lectura { position: absolute; left: 0; right: 0; bottom: 14px; display: grid; justify-items: center; pointer-events: none; }
.sol__lectura output { font: 500 1.375rem/1 var(--f-dato); font-variant-numeric: tabular-nums; }
.sol__lectura span { font: 400 var(--t-micro)/1.4 var(--f-dato); text-transform: uppercase; letter-spacing: 0.12em; color: var(--grafito-2); }

/* ---------- ficha técnica ---------- */
.ficha {
  position: fixed; top: var(--e-4); right: var(--e-4); bottom: var(--e-4);
  width: var(--ficha-w);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--papel);
  border: 1.5px solid var(--grafito);
  box-shadow: var(--sombra-papel);
  z-index: 5;
  scrollbar-width: thin; scrollbar-color: var(--grafito-3) transparent;
}
.ficha:focus { outline: none; }
.ficha__cab { position: relative; padding: var(--e-4) var(--e-4) var(--e-3); border-bottom: var(--linea); background: var(--papel); }
.ficha__ref { margin: 0; font: 500 0.625rem/1.3 var(--f-dato); text-transform: uppercase; letter-spacing: 0.14em; color: var(--cota); }
.ficha__titulo { margin: 4px 0 0; font: 400 var(--t-titulo)/1 var(--f-titulo); letter-spacing: -0.02em; text-wrap: balance; padding-right: var(--e-5); }
.ficha__sub { margin: var(--e-2) 0 0; font: 400 var(--t-pequeno)/1.3 var(--f-dato); color: var(--grafito-2); font-variant-numeric: tabular-nums; }
.ficha__cerrar--movil { display: none; }
.ficha__cerrar { position: absolute; top: var(--e-2); right: var(--e-2); width: 36px; height: 36px; border: 0; background: none; font: 300 1.5rem/1 var(--f-texto); color: var(--grafito-2); }
@media (hover: hover) { .ficha__cerrar:hover { color: var(--cota); } }
.ficha__avisos { list-style: none; margin: 0; padding: var(--e-2) var(--e-4); border-bottom: var(--linea); background: var(--cota-suave); }
.ficha__avisos li { font-size: var(--t-pequeno); color: var(--cota); padding: 2px 0 2px 14px; position: relative; }
.ficha__avisos li::before { content: '!'; position: absolute; left: 0; font: 500 var(--t-pequeno) var(--f-dato); }
.ficha__sec { padding: var(--e-3) var(--e-4) var(--e-4); border-bottom: var(--linea-fina); }
.ficha__sec h3 { margin: 0 0 var(--e-3); }
.nota { margin: var(--e-3) 0 0; font-size: var(--t-micro); line-height: 1.5; color: var(--grafito-2); text-wrap: pretty; }
.nota--suelta { padding: 0 var(--e-4); }
.ficha__acciones { display: flex; gap: var(--e-2); padding: var(--e-4); flex-wrap: wrap; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3) var(--e-4); }
.campo { display: grid; gap: 2px; min-width: 0; }
.campo__valor { display: flex; align-items: baseline; gap: 4px; border-bottom: 1px solid var(--grafito); }
.campo__valor:focus-within { border-bottom-color: var(--cota); box-shadow: 0 1px 0 var(--cota); }
.campo input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 4px 0 3px; font: 500 1.125rem/1.2 var(--f-dato); font-variant-numeric: tabular-nums; }
.campo input:focus { outline: none; }
.campo input:disabled { color: var(--grafito-3); }
.campo__unidad { font: 400 var(--t-micro) var(--f-dato); color: var(--grafito-2); }
.campo__rango { font: 400 0.625rem var(--f-dato); color: var(--grafito-3); }

.giro { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--e-2); align-items: end; }
.giro .campo { grid-column: 2; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 var(--e-3);
  border: 1px solid var(--grafito); border-radius: var(--radio);
  background: var(--papel);
  font: 500 var(--t-pequeno)/1.1 var(--f-texto);
  transition: background-color 150ms var(--ease), transform 120ms var(--ease);
}
.boton:active { transform: translateY(1px); }
@media (hover: hover) { .boton:hover { background: var(--papel-hondo); } }
.boton[aria-pressed="true"] { background: var(--grafito); color: var(--tinta-clara); }
.boton--ico { width: 38px; padding: 0; }
.boton--quitar { color: var(--cota); border-color: var(--cota); }
@media (hover: hover) { .boton--quitar:hover { background: var(--cota); color: var(--tinta-clara); } }
.boton--linea { margin-top: var(--e-3); width: 100%; }
.boton--mini { min-height: 30px; white-space: nowrap; font-size: var(--t-micro); position: relative; overflow: hidden; }
.boton--mini input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.boton--tono { padding-left: 34px; position: relative; }
.boton--tono::before { content: ''; position: absolute; left: 10px; width: 16px; height: 16px; background: var(--c); border: 1px solid #0003; }
.botonera { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* muestrario de telas y acabados */
.muestrario + .muestrario { margin-top: var(--e-4); }
.muestrario__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); margin-bottom: var(--e-2); }
.muestrario__nombre { font: 400 var(--t-pequeno) var(--f-texto); color: var(--grafito); text-align: right; }
.muestrario__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 6px; }
.chip {
  aspect-ratio: 1; min-width: 0; padding: 0;
  background: var(--c);
  border: 1px solid #0000002e;
  box-shadow: inset 0 0 0 1px #ffffff26;
  position: relative;
}
.chip[aria-pressed="true"] { outline: 2px solid var(--grafito); outline-offset: 2px; }
.chip--otro { display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--papel) 0 4px, var(--papel-hondo) 4px 8px); font: 500 var(--t-base) var(--f-dato); cursor: pointer; overflow: hidden; }
.chip--otro input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip--otro:focus-within { outline: 2px solid var(--cota); outline-offset: 2px; }

/* carta de pintura: tiras como las de una droguería */
.carta__tiras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tira { display: grid; grid-template-rows: repeat(4, 34px) auto; background: var(--tinta-clara); border: var(--linea-fina); padding: 3px 3px 0; box-shadow: 0 1px 0 #0000000d; }
.tira__tono { border: 0; padding: 0; background: var(--c); position: relative; }
.tira__tono + .tira__tono { border-top: 2px solid var(--tinta-clara); }
.tira__tono[aria-pressed="true"]::after { content: ''; position: absolute; inset: 7px 9px; border: 2px solid var(--tinta-clara); outline: 1.5px solid var(--grafito); }
.tira__fam { font: 500 0.5rem/1 var(--f-dato); text-transform: uppercase; letter-spacing: 0; color: var(--grafito-2); padding: 5px 0 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.carta__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); margin-top: var(--e-3); }
.carta__nombre { font: 400 var(--t-pequeno)/1.3 var(--f-dato); }

.suelos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-2); }
.suelo { display: grid; gap: 4px; padding: 0; border: 0; background: none; text-align: left; font: 400 0.625rem/1.25 var(--f-dato); color: var(--grafito-2); }
.suelo img { width: 100%; height: auto; aspect-ratio: 1; display: block; border: 1px solid #0003; }
.suelo[aria-pressed="true"] img { outline: 2px solid var(--grafito); outline-offset: 2px; }
.suelo[aria-pressed="true"] { color: var(--grafito); }

.formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin-bottom: var(--e-4); }
.forma { display: grid; justify-items: center; gap: 2px; padding: var(--e-2) 0; border: 1px solid var(--grafito); border-radius: var(--radio); background: var(--papel); font: 500 var(--t-micro) var(--f-dato); }
@media (hover: hover) { .forma:hover { background: var(--papel-hondo); } }

.norte { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 2px var(--e-3); }
.norte label { font-size: var(--t-pequeno); }
.norte input { grid-column: 2; width: 100%; }
.rosa { grid-row: span 2; display: block; transform: rotate(var(--g)); transition: transform 120ms; }

/* ---------- lámina de piezas troqueladas ---------- */
.lamina {
  position: fixed; left: var(--e-4); right: calc(var(--ficha-w) + var(--e-4) * 2); bottom: var(--e-4);
  height: var(--lamina-h);
  display: grid; grid-template-rows: auto 1fr;
  background:
    radial-gradient(circle at 20% 30%, #ffffff14 0 1px, transparent 1.5px) 0 0 / 7px 9px,
    radial-gradient(circle at 70% 60%, #0000000f 0 1px, transparent 1.5px) 0 0 / 11px 8px,
    var(--kraft);
  border: 1.5px solid var(--grafito);
  box-shadow: var(--sombra-papel);
  z-index: 4;
  transition: transform 420ms var(--ease), opacity 300ms;
}
.lamina__cab { display: flex; align-items: center; gap: var(--e-4); padding: 0 var(--e-3); border-bottom: 1px solid #2a2b2e66; min-height: 36px; }
.lamina__cab h2 { margin: 0; font: 400 var(--t-medio)/1 var(--f-titulo); white-space: nowrap; }
.lamina__indice { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.lamina__indice button {
  display: flex; align-items: baseline; gap: 5px;
  border: 0; background: none; padding: 9px 8px 7px;
  font: 500 var(--t-micro)/1 var(--f-dato); text-transform: uppercase; letter-spacing: 0.1em;
  color: #2a2b2ebf; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.lamina__indice .letra { font-size: 0.625rem; color: #2a2b2e80; }
.lamina__indice button[aria-selected="true"] { color: var(--grafito); border-bottom-color: var(--cota); }
@media (hover: hover) { .lamina__indice button:hover { color: var(--grafito); } }
.lamina__plegar { border: 0; background: none; font: 500 var(--t-micro) var(--f-dato); text-transform: uppercase; letter-spacing: 0.1em; padding: var(--e-2); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.lamina__piezas { display: flex; gap: var(--e-3); padding: var(--e-3); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--kraft-hondo) transparent; touch-action: pan-x; }
.pieza {
  flex: none; width: 140px;
  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: start;
  padding: 6px 8px 8px;
  background: var(--papel);
  border: 1px dashed #2a2b2e8c;
  border-radius: var(--radio);
  text-align: left;
  cursor: grab;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
  touch-action: pan-x;
}
.pieza img { width: 104px; height: 76px; justify-self: center; object-fit: contain; pointer-events: none; user-select: none; }
.pieza__ref { font: 500 0.5625rem/1 var(--f-dato); letter-spacing: 0.1em; color: var(--cota); }
.pieza__nombre { font: 500 var(--t-pequeno)/1.15 var(--f-texto); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pieza__medida { font: 400 0.625rem/1.3 var(--f-dato); color: var(--grafito-2); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .pieza:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--sombra-alzada); border-style: solid; } }
.pieza:active { cursor: grabbing; transform: translateY(-2px); }
.lamina.plegada { transform: translateY(calc(100% - 38px)); }
.lamina.plegada .lamina__piezas { visibility: hidden; }

/* ---------- vista a pie ---------- */
.andar { display: none; }
body[data-vista="pie"] .andar {
  position: fixed; left: 50%; bottom: var(--e-5); transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, 52px); gap: 0;
  background: var(--papel); border: 1.5px solid var(--grafito); box-shadow: var(--sombra-papel);
  z-index: 6;
}
.andar button { height: 52px; border: 0; background: none; font: 500 1.25rem var(--f-dato); touch-action: none; }
.andar button + button { border-left: var(--linea); }
.andar button:active { background: var(--grafito); color: var(--tinta-clara); }
body[data-vista="pie"] .lamina, body[data-vista="pie"] .ficha, body[data-vista="pie"] .izquierda { opacity: 0; pointer-events: none; transform: translateY(16px); }
body[data-vista="pie"] .herramientas { right: var(--e-4); }
body[data-vista="pie"] .sol { bottom: var(--e-4); }

/* ---------- avisos breves ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--lamina-h) + var(--e-4) * 2.5);
  transform: translate(calc(-50% - var(--ficha-w) / 2), 12px);
  padding: var(--e-2) var(--e-3);
  background: var(--grafito); color: var(--tinta-clara);
  font: 400 var(--t-pequeno)/1.4 var(--f-dato);
  max-width: min(480px, 88vw);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease), transform 260ms var(--ease);
  z-index: 20;
}
.toast.visible { opacity: 1; transform: translate(calc(-50% - var(--ficha-w) / 2), 0); }

/* ---------- diálogo de maquetas ---------- */
.dlg {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1.5px solid var(--grafito);
  background: var(--papel);
  color: var(--grafito);
  box-shadow: var(--sombra-alzada);
}
.dlg::backdrop { background: #2a2b2e66; }
.dlg[open] { animation: entra-nota 280ms var(--ease); }
.dlg__cab { display: flex; justify-content: space-between; align-items: center; padding: var(--e-3) var(--e-4); border-bottom: var(--linea); margin: 0; }
.dlg__cab h2 { margin: 0; font: 400 var(--t-titulo)/1 var(--f-titulo); letter-spacing: -0.02em; }
.dlg__cerrar { width: 40px; height: 40px; border: 0; background: none; font: 300 1.75rem/1 var(--f-texto); }
.dlg__bloque { padding: var(--e-4); }
.dlg__bloque + .dlg__bloque { border-top: var(--linea-fina); }
.dlg__bloque h3 { margin: 0 0 var(--e-3); font: 500 0.625rem/1.2 var(--f-dato); text-transform: uppercase; letter-spacing: 0.12em; color: var(--grafito-2); }
.plantillas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e-2); }
.plantilla { width: 100%; height: 100%; display: grid; gap: 4px; align-content: start; text-align: left; padding: var(--e-3); border: 1px dashed #2a2b2e8c; border-radius: var(--radio); background: var(--tinta-clara); }
.plantilla strong { font: 400 var(--t-medio)/1.1 var(--f-titulo); }
.plantilla span { font: 400 var(--t-micro)/1.4 var(--f-dato); color: var(--grafito-2); }
@media (hover: hover) { .plantilla:hover { border-style: solid; background: var(--papel-hondo); } }
.guardadas { list-style: none; margin: 0; padding: 0; }
.guardadas li { display: flex; align-items: center; gap: var(--e-2); border-bottom: var(--linea-fina); }
.guardada { flex: 1; display: grid; gap: 2px; text-align: left; padding: var(--e-3) 0; border: 0; background: none; }
.guardada:disabled { opacity: 1; cursor: default; }
.guardada strong { font: 400 var(--t-medio)/1.1 var(--f-titulo); }
.guardada span { font: 400 var(--t-micro)/1.4 var(--f-dato); color: var(--grafito-2); }
.guardadas .actual strong::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; background: var(--cota); vertical-align: middle; }
.quitar { border: 0; background: none; color: var(--cota); font: 500 var(--t-micro) var(--f-dato); text-transform: uppercase; letter-spacing: 0.08em; padding: var(--e-2); white-space: nowrap; }
.vacio { margin: 0; color: var(--grafito-2); font-size: var(--t-pequeno); }

.fallo { position: fixed; inset: 0; display: grid; place-content: center; padding: var(--e-5); background: var(--mesa); text-align: center; z-index: 60; }
.fallo[hidden] { display: none; }
.fallo h2 { font: 400 var(--t-titulo)/1.1 var(--f-titulo); margin: 0 0 var(--e-3); }
.fallo p { max-width: 48ch; margin: 0 auto; }

/* ---------- pantallas medianas ---------- */
@media (max-width: 1180px) and (min-width: 900px) {
  :root { --ficha-w: 300px; }
  .izquierda { width: 320px; }
  .cajetin__proyecto input { font-size: var(--t-medio); }
  .herramientas { top: auto; bottom: calc(var(--lamina-h) + var(--e-4) * 2); }
  .sol { width: 190px; }
}

/* ---------- móvil y tableta vertical ---------- */
@media (max-width: 899px) {
  :root { --lamina-h: 162px; }
  .izquierda { left: var(--e-2); right: var(--e-2); top: var(--e-2); width: auto; }
  .cajetin__marca { padding: 6px var(--e-3); }
  .marca__sub { display: none; }
  .cajetin__abrir {
    display: block; margin-left: auto;
    border: var(--linea); background: none; border-radius: var(--radio);
    font: 500 0.625rem/1 var(--f-dato); text-transform: uppercase; letter-spacing: 0.1em;
    padding: 6px 10px; min-height: 30px;
  }
  .cajetin__abrir[aria-expanded="true"] { background: var(--grafito); color: var(--tinta-clara); }
  .cajetin__proyecto { padding: 4px var(--e-3) 6px; border-bottom: 0; }
  .cajetin__proyecto .etq { display: none; }
  .cajetin__proyecto input { font-size: var(--t-medio); }
  .cajetin__mas { display: none; border-top: var(--linea); }
  .cajetin.abierto .cajetin__mas { display: block; }
  .avisos { max-height: 30vh; overflow: auto; }
  .herramientas { top: auto; bottom: calc(var(--lamina-h) + var(--e-2) * 2); right: var(--e-2); left: var(--e-2); justify-content: space-between; }
  .ficha__cerrar--movil { display: block; }
  .vistas { flex: 1; }
  .vistas button { flex: 1; padding: 0 6px; letter-spacing: 0.06em; white-space: nowrap; }
  .boton-ico { width: 40px; }
  .acciones #btnImanes, .acciones #btnCinta { display: none; }
  .cajetin__menu button { font-size: 0.625rem; letter-spacing: 0.04em; }
  .boton-habitacion { display: grid; width: auto; padding: 0 var(--e-3); font: 500 var(--t-micro)/1 var(--f-dato); text-transform: uppercase; letter-spacing: 0.1em; }
  .acciones #btnParedes { display: none; }
  .sol { width: 150px; left: auto; right: var(--e-2); bottom: calc(var(--lamina-h) + var(--e-2) * 3 + 44px); }
  .sol__lectura { bottom: 8px; }
  .sol__lectura output { font-size: 1rem; }
  .sol__lectura span { display: none; }
  .marcas text { display: none; }
  .lamina { left: 0; right: 0; bottom: 0; border-width: 1.5px 0 0; }
  .lamina__cab h2 { display: none; }
  .lamina__piezas { padding: var(--e-2) var(--e-2); gap: var(--e-2); }
  .pieza { width: 116px; padding: 4px 6px 6px; }
  .pieza img { width: 88px; height: 62px; }
  .ficha {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 62dvh;
    border-width: 1.5px 0 0;
    transform: translateY(105%);
    transition: transform 380ms var(--ease);
    z-index: 8;
  }
  body.ver-ficha .ficha, body[data-seleccion="mueble"] .ficha, body[data-seleccion="pared"] .ficha, body[data-seleccion="abertura"] .ficha, body[data-seleccion="suelo"] .ficha { transform: none; }
  .ficha__cab { position: sticky; top: 0; z-index: 1; padding-top: var(--e-3); }
  .ficha__titulo { font-size: var(--t-grande); }
  .carta__tiras { gap: 4px; }
  .pista, .toast { transform: translateX(-50%); bottom: calc(var(--lamina-h) + 64px); }
  .toast { transform: translate(-50%, -12px); bottom: auto; top: 104px; }
  .toast.visible { transform: translate(-50%, 0); }
  body[data-vista="pie"] .herramientas { bottom: auto; top: 64px; }
}

/* ---------- v2: vivienda, selección múltiple, organización ---------- */
#estadoGuardado[data-estado="nube"] { color: var(--grafito); }
#estadoGuardado[data-estado="error"] { color: var(--cota); }
.avisos__mas { margin: 2px 0 0; font: 400 var(--t-micro) var(--f-dato); color: var(--grafito-2); }

.recuadro { position: absolute; border: 1px dashed var(--cota); background: #c23f2b14; pointer-events: none; z-index: 3; }
.recuadro[hidden] { display: none; }
body[data-herramienta="medir"] .mesa canvas { cursor: crosshair; }
.cota--libre { color: var(--cota); border-color: #c23f2b66; background: #f8f4ebe6; }
.cota--cinta { background: var(--grafito); color: var(--tinta-clara); border-color: var(--grafito); font-size: 0.75rem; padding: 4px 7px 3px; }
.sala {
  pointer-events: auto; cursor: move; touch-action: none;
  padding: 5px 9px 4px;
  border: 1px solid var(--grafito);
  background: #f8f4ebe6;
  font: 400 1.0625rem/1 var(--f-titulo);
  white-space: nowrap;
}
.sala--activa { background: var(--grafito); color: var(--tinta-clara); }
@media (hover: hover) { .sala:not(.sala--activa):hover { background: var(--papel); border-color: var(--cota); } }

.ficha__titulo--input { width: 100%; border: 0; padding: 0; background: transparent; color: inherit; }
.ficha__titulo--input:focus { outline: none; box-shadow: inset 0 -1px 0 var(--cota); }
.ficha__grupo { margin: 0; padding: var(--e-2) var(--e-4); border-bottom: var(--linea-fina); font-size: var(--t-micro); color: var(--grafito-2); display: flex; justify-content: space-between; gap: var(--e-2); align-items: baseline; }
.enlace { border: 0; background: none; padding: 4px 0; font: 500 var(--t-micro) var(--f-dato); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: underline; text-underline-offset: 3px; color: var(--grafito); }
@media (hover: hover) { .enlace:hover { color: var(--cota); } }
.nota--mal { color: var(--cota); }
.boton--primario { background: var(--grafito); color: var(--tinta-clara); }
@media (hover: hover) { .boton--primario:hover { background: #3a3b3f; } }
.boton--mini[aria-pressed="true"] { background: var(--grafito); color: var(--tinta-clara); }
.botonera--sola { margin-top: var(--e-3); }

.alinear { display: grid; grid-template-columns: repeat(4, 38px); gap: var(--e-2); }

.revest { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-2); }
.campos--zocalo { grid-template-columns: 1fr 1fr; margin: var(--e-3) 0; }
.carta--compacta .tira { grid-template-rows: repeat(4, 20px); padding-bottom: 3px; }

.estilos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.estilo { display: grid; gap: 3px; padding: var(--e-2); text-align: left; border: 1px solid #2a2b2e59; border-radius: var(--radio); background: var(--tinta-clara); }
.estilo__tiras { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr 1fr 0.6fr; height: 16px; margin-bottom: 4px; border: 1px solid #0000001f; }
.estilo__tiras span { background: var(--c); }
.estilo strong { font: 400 var(--t-medio)/1 var(--f-titulo); }
.estilo > span:last-child { font: 400 0.625rem/1.3 var(--f-dato); color: var(--grafito-2); }
@media (hover: hover) { .estilo:hover { border-color: var(--grafito); background: var(--papel-hondo); } }

.estancias { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.estancia { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); padding: 7px var(--e-2); border: 1px solid #2a2b2e40; border-radius: var(--radio); background: var(--tinta-clara); font: 400 var(--t-base)/1.1 var(--f-titulo); text-align: left; }
.estancia__m2 { font: 400 var(--t-micro) var(--f-dato); color: var(--grafito-2); }
.estancia[aria-pressed="true"] { background: var(--grafito); color: var(--tinta-clara); border-color: var(--grafito); }
.estancia[aria-pressed="true"] .estancia__m2 { color: #fbf8f1bf; }
@media (hover: hover) { .estancia[aria-pressed="false"]:hover { border-color: var(--grafito); } }

.pieza__montaje { color: var(--grafito-2); letter-spacing: 0.04em; }

.dlg--estrecho { width: min(440px, calc(100vw - 32px)); }
.cuenta { display: grid; gap: var(--e-4); }
.campo--ancho input { font: 500 1rem/1.2 var(--f-dato); }
.cuenta__error { margin: 0; padding: var(--e-2) var(--e-3); border-left: 3px solid var(--cota); background: var(--cota-suave); color: var(--cota); font-size: var(--t-pequeno); }
.cuenta__error[hidden] { display: none; }
.cuenta__hola { margin: 0 0 var(--e-2); font: 400 var(--t-medio)/1.3 var(--f-titulo); }
.nota--intro { margin: 0 0 var(--e-4); font-size: var(--t-pequeno); }

.baja summary { cursor: pointer; font: 500 var(--t-micro) var(--f-dato); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cota); }
.baja[open] summary { margin-bottom: var(--e-3); }
.cuenta__privacidad { padding: 0 var(--e-4) var(--e-4); }
.dlg a { color: inherit; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}