/* ════════════════════════════════════════════════════════════
   ARMARIOS VIFREN — CONFIGURADOR INTERNO
   Edición lujo editorial · Champán cálido + tipografía editorial
   ════════════════════════════════════════════════════════════ */

:root {
  /* Paleta champán cálido (alineada con la web Vifren) */
  --bg:           #F4ECD7;
  --bg-soft:      #ECE2C8;
  --bg-warm:      #E5DABE;
  --paper:        #FBF6E9;
  --paper-soft:   #F8F1DE;
  --ink:          #1A1611;
  --ink-soft:     #574B3D;
  --ink-mute:     #8C7F6C;
  --ink-faint:    #B8AB94;
  --line:         rgba(26,22,17,0.10);
  --line-soft:    rgba(26,22,17,0.06);
  --line-strong:  rgba(26,22,17,0.20);
  --gold:         #B89968;
  --gold-deep:    #8E7340;
  --terra:        #8C3A28;
  --olive:        #6E6A3F;
  --sage:         #7A8068;
  --green-ok:     #4F6B45;
  --warn:         #B07530;
  --error:        #8C3A28;

  /* Tipografía */
  --serif: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
  /* v465.190 — ARIAL (decisión de Juan, 23/09: «la tipografía lo hacemos en
     Arial, quedará más legible»). Es de SISTEMA: aparece al instante y no
     depende de que el iPad tenga cobertura para bajarla — con Inter, sin
     conexión, se caía a la fuente del sistema igualmente y el texto cambiaba
     de aspecto entre una sesión y otra. */
  --sans:  Arial, Helvetica, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Geometría */
  --radius:      14px;
  --radius-sm:   8px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* Sombras suaves tipo papel */
  --shadow-1: 0 1px 0 rgba(26,22,17,0.03), 0 2px 6px rgba(26,22,17,0.04);
  --shadow-2: 0 1px 0 rgba(26,22,17,0.04), 0 6px 18px rgba(26,22,17,0.07);
  --shadow-3: 0 2px 0 rgba(26,22,17,0.05), 0 12px 40px rgba(26,22,17,0.10);
  --shadow-modal: 0 -2px 0 rgba(26,22,17,0.06), 0 -20px 60px rgba(26,22,17,0.18);

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
  /* v456.95: en iPhone landscape la Dynamic Island/notch ocupa el lateral
     izquierdo o derecho según orientación. Estas variables permiten que
     los elementos pegados al borde (tabs, modales) la esquiven. */
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Textura sutil de papel sobre el fondo (entelado champán) */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.18) 0%, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(184,153,104,0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── SCREENS ────────────────────────────────────────────────── */
.screen {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  z-index: 1;
}
.screen.active { display: flex; }

/* ── TOP BAR ────────────────────────────────────────────────── */
/* v410: status-bar-style = "default" → iOS dibuja la barra de
   fecha/hora en SU PROPIA franja, separada de la app. El top-bar
   empieza justo debajo, sin necesidad de padding extra. */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 18px;
  background: #F4ECD7;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.top-bar-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}
.back-btn {
  background: none; border: none;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 10px 6px 10px 0;
  min-width: 80px;
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: left;
}
.back-btn:active { color: var(--ink); }

.icon-btn {
  background: none; border: none;
  color: var(--ink-soft);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.icon-btn:active { background: rgba(26,22,17,0.06); }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ── SCROLL AREA ───────────────────────────────────────────── */
.scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 18px;
  padding-bottom: calc(28px + var(--safe-bottom));
}

/* ════════════════════════════════════════════════════════════
   LOGIN
═════════════════════════════════════════════════════════════ */
.login-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 40px 24px calc(40px + var(--safe-bottom));
  background:
    radial-gradient(ellipse at 50% 20%, rgba(184,153,104,0.10) 0%, transparent 60%),
    var(--bg);
  /* v301: en portátiles cortos el contenido se cortaba; permitir scroll. */
  min-height: 100vh;
  overflow-y: auto;
}
.login-logo { text-align: center; }
.logo-mark {
  width: 88px; height: 88px;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--ink) 0%, #2A211A 60%, var(--gold-deep) 100%);
  color: var(--bg);
  font-family: var(--serif);
  font-style: italic;
  font-size: 50px;
  font-weight: 400;
  margin: 0 auto 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 8px 36px rgba(26,22,17,0.20),
    0 2px 8px rgba(26,22,17,0.10);
  letter-spacing: -0.05em;
}
.login-logo h1 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.login-logo h1 span {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-deep);
}
.login-logo p {
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

.login-pin {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 24px;
}
.pin-dots {
  display: flex;
  gap: 16px;
  padding: 8px 0;
}
.pin-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  background: transparent;
  transition: all 0.18s ease;
}
.pin-dot.filled {
  background: var(--ink);
  border-color: var(--ink);
  transform: scale(1.15);
}
.pin-hint {
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  min-height: 18px;
  transition: color 0.2s;
}
.pin-hint.error { color: var(--error); }

/* v456: input numérico invisible para login. Debe seguir siendo focuseable
   (NO usar display:none / visibility:hidden) para que iOS muestre el teclado
   flotante. Lo dejamos a 1×1 con opacidad 0 dentro del flujo del .login-pin. */
.pin-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;          /* el usuario no lo toca directamente */
  -webkit-user-select: none;
  user-select: none;
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 14px;
}
.pin-btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1);
  transition: transform 0.08s, background 0.12s;
  cursor: pointer;        /* v301: indicar clicable en escritorio */
}
.pin-btn:active { background: var(--bg-soft); transform: scale(0.94); }
.pin-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; pointer-events: none; }
.pin-btn.del { color: var(--ink-mute); }
.pin-btn.del svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.pin-btn.ok {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.pin-btn.ok:active { background: var(--ink-soft); }
.pin-btn.ok svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-7px); }
  40%,80% { transform: translateX(7px); }
}
.shake { animation: shake 0.4s ease; }

/* ════════════════════════════════════════════════════════════
   HOME
═════════════════════════════════════════════════════════════ */
.search-row {
  padding: 14px 18px;
  background: rgba(244,236,215,0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
  /* v458: el buscador convive con el botón de papelera. */
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-input {
  flex: 1 1 auto;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
  padding: 11px 18px;
  font-size: 14.5px;
  font-family: var(--sans);
  transition: border-color 0.2s, background 0.2s;
  box-shadow: var(--shadow-1);
}
.search-input::placeholder { color: var(--ink-faint); }
.search-input:focus { outline: none; border-color: var(--gold); }

/* ── PAPELERA (v458) ──────────────────────────────────────────── */
/* v465.141 — alcance de la lista de armarios (sólo maestros). Va pegado al
   buscador, con el mismo aire que la papelera. Cuando NO estás en los tuyos se
   pinta en terracota, para que se vea de un vistazo que la lista no es la tuya. */
.ver-owner-btn {
  flex-shrink: 0;
  height: 44px;
  padding: 0 14px;
  max-width: 42vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.ver-owner-btn:active { background: var(--bg-soft); }
.ver-owner-btn.viendo-otro {
  color: var(--terra);
  border-color: rgba(140,58,40,0.30);
  background: rgba(140,58,40,0.06);
}
.vo-lista {
  margin-top: 10px;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.vo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  color: var(--ink);
  text-align: left;
}
.vo-item:last-child { border-bottom: 0; }
.vo-item:active { background: var(--bg-soft); }
.vo-item.actual { font-weight: 700; color: var(--terra); }
.vo-item .vo-sub { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
.vo-nota { margin-top: 10px; font-size: 12px; color: var(--ink-soft); }

/* v465.143 — chip de «importados» y su lista. Comparte el aspecto del de arriba;
   va en terracota siempre, porque si está es que hay algo esperando. */
.imp-btn { color: var(--terra); border-color: rgba(140,58,40,0.30); padding: 0 12px; }
.imp-cab {
  padding: 10px 14px 6px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line-soft);
}
.imp-cab-1 { font-size: 13px; font-weight: 700; color: var(--ink); }
.imp-cab-2 { font-size: 11px; color: var(--ink-soft); margin-top: 2px; word-break: break-all; }
.imp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  color: var(--ink);
  text-align: left;
}
.imp-item:last-child { border-bottom: 0; }
.imp-item:active { background: var(--bg-soft); }
.imp-item[disabled] { color: var(--ink-soft); opacity: 0.6; }
.imp-item .imp-sub { font-size: 12px; color: var(--ink-soft); flex-shrink: 0; }
.vo-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px 16px; }

.papelera-btn {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  box-shadow: var(--shadow-1);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.papelera-btn svg { width: 20px; height: 20px; }
.papelera-btn:active { background: var(--bg-soft); }
.papelera-btn.has-items { color: var(--terra); border-color: rgba(140,58,40,0.30); }
.papelera-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--terra);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-family: var(--sans);
}

.papelera-list { display: flex; flex-direction: column; gap: 8px; }
.papelera-empty {
  text-align: center;
  color: var(--ink-faint);
  padding: 32px 12px;
  font-size: 14px;
}
.papelera-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.papelera-row-icon { font-size: 22px; flex-shrink: 0; }
.papelera-row-info { flex: 1 1 auto; min-width: 0; }
.papelera-row-name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.papelera-row-meta {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.papelera-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-restore {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  font-family: var(--sans);
  white-space: nowrap;
  min-height: 38px;
}
.btn-restore:active { opacity: 0.9; }
.btn-harddel {
  background: rgba(140,58,40,0.06);
  border: 1px solid rgba(140,58,40,0.30);
  border-radius: var(--radius-sm);
  color: var(--terra);
  font-size: 15px;
  padding: 8px 11px;
  min-height: 38px;
}
.btn-harddel:active { background: rgba(140,58,40,0.14); }

.papelera-foot {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.btn-danger-outline {
  background: transparent;
  border: 1px solid rgba(140,58,40,0.40);
  border-radius: var(--radius-sm);
  color: var(--terra);
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 18px;
  font-family: var(--sans);
  min-height: 42px;
}
.btn-danger-outline:active { background: rgba(140,58,40,0.10); }

/* ── BUSCADOR UNIVERSAL (v459) ────────────────────────────────── */
.search-results-head {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--ink-faint);
  padding: 4px 2px 10px;
}
.search-results {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}
.search-result:active { background: var(--bg-soft); }
.search-result.is-trash { opacity: 0.72; border-style: dashed; }
.sr-icon { font-size: 22px; flex-shrink: 0; }
.sr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sr-name {
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-go { font-size: 22px; color: var(--ink-faint); flex-shrink: 0; line-height: 1; }
.sr-trash { font-size: 11.5px; color: var(--terra); flex-shrink: 0; white-space: nowrap; }
.search-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-faint);
  padding: 40px 16px;
  font-size: 14.5px;
}
.search-empty span { font-size: 12.5px; opacity: 0.8; }

/* Parpadeo de localización al "llevarte" a un resultado en el árbol. */
@keyframes searchFlash {
  0%, 100% { background: transparent; }
  20%, 60% { background: rgba(184,153,104,0.35); }
}
.search-flash { animation: searchFlash 1.6s ease-in-out; border-radius: var(--radius-sm); }

.projects-grid {
  display: grid;
  /* v303: ancho FIJO de cada card (no 1fr). Esto da columnas estrechas
     consistentes y deja "huecos" al final si sobran píxeles, en lugar de
     estirar cada card. */
  grid-template-columns: repeat(auto-fill, 150px);
  justify-content: start;
  gap: 8px;
}

/* ── CARPETAS DE USUARIO (nivel superior, solo si hay varios owners) ── */
.owner-section { grid-column: 1 / -1; margin-bottom: 22px; }
.owner-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; margin-bottom: 12px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer; user-select: none;
  box-shadow: var(--shadow-1);
}
.owner-section.mine .owner-header { background: var(--gold-deep, #8a6f3f); border-color: var(--gold-deep, #8a6f3f); }
.owner-header:hover { filter: brightness(1.08); }
.owner-caret { transition: transform 0.2s; flex-shrink: 0; opacity: 0.85; transform: rotate(-90deg); }
.owner-caret.open { transform: rotate(0deg); }
.owner-icon { font-size: 18px; flex-shrink: 0; }
.owner-name {
  font: 500 17px var(--serif); flex: 1;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
.owner-count {
  font: 600 12px var(--sans);
  background: rgba(255,255,255,0.18);
  padding: 2px 10px; border-radius: 999px; flex-shrink: 0;
}
.owner-body { padding-left: 16px; border-left: 2px solid rgba(184,153,104,0.20); margin-left: 8px; }
.owner-body.collapsed { display: none; }
@media (pointer: coarse) {
  .owner-header { padding: 14px 18px; }
  .owner-name { font-size: 19px; }
}

/* ── VIVIENDAS (carpetas de proyectos) ───────────────────────── */
.vivienda-section { grid-column: 1 / -1; }   /* ocupa toda la fila del grid */
.vivienda-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
  user-select: none;
}
.vivienda-header:hover { background: rgba(184,153,104,0.06); border-color: var(--gold); }
.vivienda-caret { transition: transform 0.2s; flex-shrink: 0; opacity: 0.6; }
.vivienda-caret.open { transform: rotate(0deg); }
.vivienda-caret { transform: rotate(-90deg); }
.vivienda-caret.open { transform: rotate(0deg); }
.vivienda-icon { font-size: 18px; flex-shrink: 0; }
.vivienda-name { font: 600 16px var(--serif); color: var(--ink); flex: 1; }
.vivienda-count {
  font: 600 12px var(--sans); color: var(--ink-mute);
  background: rgba(184,153,104,0.12); padding: 2px 10px;
  border-radius: 999px; flex-shrink: 0;
}
.vivienda-rename, .vivienda-delete, .vivienda-add {
  background: transparent; border: 1px solid transparent;
  width: 32px; height: 32px; border-radius: 6px;
  cursor: pointer; font-size: 14px; color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.vivienda-add { font-size: 20px; font-weight: 300; line-height: 1; }
.vivienda-add:hover { background: rgba(184,153,104,0.12); color: var(--gold-deep); }
.vivienda-rename:hover { background: rgba(184,153,104,0.12); color: var(--gold-deep); }
.vivienda-delete:hover { background: rgba(255,100,80,0.12); color: #d44; }
.vivienda-grid {
  display: grid;
  /* v305: ancho FIJO 140 px (auto-fill, no 1fr). Garantiza ≥5 cards por fila
     en iPad portrait (820 px) y muchas más en escritorio. v303/v304 ajustaban
     `.projects-grid` por error — pero las cards viven dentro de `.vivienda-grid`. */
  grid-template-columns: repeat(auto-fill, 170px);
  justify-content: start;
  gap: 8px; margin-bottom: 14px;
  padding-left: 10px;
  border-left: 2px solid rgba(184,153,104,0.15);
  margin-left: 12px;
}
.vivienda-grid.collapsed { display: none; }
.vivienda-body.collapsed { display: none; }
.vivienda-sueltos .sueltos-header { cursor: default; opacity: 0.85; }
.vivienda-sueltos .sueltos-header:hover { background: var(--paper); border-color: var(--line); }
@media (pointer: coarse) {
  .vivienda-header { padding: 14px 16px; }
  .vivienda-name { font-size: 18px; }
  .vivienda-rename, .vivienda-delete, .vivienda-add { width: 40px; height: 40px; font-size: 18px; }
  .vivienda-add { font-size: 24px; }
  /* v426: cards más anchas en iPad — los 5 botones (delete/share/rename/
     move/copy) no cabían en 140 px y el icono más a la izquierda quedaba
     fuera del card. 200 px deja margen para botones 32×32 con espaciado
     cómodo para el lápiz. */
  .vivienda-grid { grid-template-columns: repeat(auto-fill, 260px); }
  .habitacion-grid { grid-template-columns: repeat(auto-fill, 260px); }
}

/* v416: CLIENTES (carpeta padre) + HABITACIONES (sub-carpeta dentro de vivienda).
   Heredan el look-and-feel de .vivienda-* pero con tonos distintos para
   distinguir el nivel jerárquico. */
.cliente-section { grid-column: 1 / -1; }
.cliente-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(184,153,104,0.10), rgba(184,153,104,0.04));
  border: 1px solid rgba(184,153,104,0.30);
  border-radius: var(--radius); cursor: pointer;
  user-select: none;
}
.cliente-header:hover { background: rgba(184,153,104,0.12); }
.cliente-caret { transform: rotate(-90deg); transition: transform 0.2s; flex-shrink: 0; opacity: 0.7; }
.cliente-caret.open { transform: rotate(0deg); }
.cliente-icon { font-size: 18px; flex-shrink: 0; }
.cliente-name { font: 700 17px var(--serif); color: var(--ink); flex: 1; }
.cliente-count {
  font: 600 12px var(--sans); color: var(--gold-deep, var(--gold));
  background: rgba(184,153,104,0.20); padding: 2px 10px;
  border-radius: 999px; flex-shrink: 0;
}
.cliente-rename {
  background: transparent; border: 1px solid transparent;
  width: 32px; height: 32px; border-radius: 6px;
  cursor: pointer; font-size: 14px; color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
}
.cliente-rename:hover { background: rgba(184,153,104,0.16); color: var(--gold-deep); }
.cliente-body { padding-left: 18px; border-left: 2px solid rgba(184,153,104,0.20); margin-left: 14px; }
.cliente-body.collapsed { display: none; }
.cliente-sueltos .sueltos-header { cursor: default; opacity: 0.75; }

.habitacion-section { margin-left: 12px; }

/* v465.147 — FAVORITOS: chip ★ de la habitación y su panel. */
.habitacion-header button.habitacion-fav {
  width: 24px; height: 24px; font-size: 15px; line-height: 1;
  color: #9A7A15; background: #FBF3DF;
  border: 1px solid var(--gold); border-radius: 5px;
}
.habitacion-header button.habitacion-fav:hover { color: #fff; background: var(--gold); }

.fav-ovl { position: fixed; inset: 0; z-index: 1450; display: flex; align-items: center; justify-content: center; }
.fav-ovl.hidden { display: none; }
.fav-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.fav-card {
  /* v465.156: más ancho a petición de Juan — con dos por fila y la foto
     grande, 680 se quedaba corto y las imágenes no se distinguían. */
  position: relative; width: min(1040px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--panel, #FBF9F4); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.3); overflow: hidden;
}
.fav-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.fav-title { font: 700 16px var(--sans); color: var(--ink); }
.fav-sub { font: 500 13px var(--sans); color: var(--ink-mute); margin-top: 2px; }
.fav-x { width: 30px; height: 30px; border: none; background: none; font-size: 22px; line-height: 1; color: var(--ink-faint); cursor: pointer; border-radius: 6px; }
.fav-x:hover { color: var(--terra); }
/* Aquí está el deslizador que pidió Juan: hasta 20 armarios, se baja y se ven.
   v465.156: y en REJILLA DE DOS, con la foto arriba y grande. */
.fav-lista {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 18px 14px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  align-content: start;
}
/* El aviso de «no tienes ninguno» ocupa las dos columnas, que si no se queda
   pegado a la izquierda con media rejilla vacía al lado. */
.fav-lista .fav-vacio { grid-column: 1 / -1; }
.fav-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.fav-item:hover { border-color: var(--gold); background: #FFFDF7; }
.fav-thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden;
  background: #F0EBDF; display: flex; align-items: center; justify-content: center;
}
.fav-thumb img { width: 100%; height: 100%; object-fit: contain; }
.fav-thumb span { font: 500 12px var(--sans); color: var(--ink-faint); }
.fav-info { flex: 1 1 auto; min-width: 0; }
/* Los botones, en una fila bajo el texto. En la tarjeta ya no hay sitio a la
   derecha, y en el iPad conviene que sean grandes de tocar. */
.fav-acc { display: flex; justify-content: flex-end; gap: 6px; }
.fav-mini {
  width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; cursor: pointer; color: var(--ink-mute); font-size: 15px; line-height: 1;
}
.fav-mini:hover { border-color: var(--gold); color: var(--ink); background: #FFFDF7; }
@media (max-width: 720px) {
  .fav-lista { grid-template-columns: minmax(0, 1fr); }
}
.fav-nombre { font: 600 14px var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-med { font: 500 12.5px var(--sans); color: var(--ink-mute); margin-top: 3px; }
.fav-tipo { font: 500 11.5px var(--sans); color: var(--ink-faint); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
.fav-del:hover { color: var(--terra); border-color: var(--terra); background: #FDF4F1; }
.fav-vacio { padding: 26px 8px; text-align: center; font: 500 14px var(--sans); color: var(--ink-mute); }
.fav-vacio span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-faint); line-height: 1.5; }
.fav-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.fav-foot span { font: 500 12px var(--sans); color: var(--ink-faint); line-height: 1.4; }
.fav-btn { padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 600 13px var(--sans); color: var(--ink); cursor: pointer; }
.fav-btn:hover { border-color: var(--gold); }

/* v465.146 — ARRASTRAR TARJETAS de una habitación a otra. */
.habitacion-section.is-drop-target {
  outline: 2px dashed var(--gold);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
  background: rgba(200, 169, 97, 0.07);
}
.project-card.is-dragging { opacity: .35; }
.card-drag-ghost {
  position: fixed; z-index: 1600; pointer-events: none;
  margin: 0; opacity: .92;
  transform: rotate(-1.5deg) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  cursor: grabbing;
}
/* Mientras se arrastra no se selecciona texto ni se desplaza la lista sin querer. */
body.cards-dragging { user-select: none; -webkit-user-select: none; }
body.cards-dragging .project-card { cursor: grabbing; }
.habitacion-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 8px;
  background: rgba(0,0,0,0.02);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
}
.habitacion-header:hover { background: rgba(184,153,104,0.06); border-style: solid; border-color: var(--gold); }
.habitacion-caret { transform: rotate(-90deg); transition: transform 0.2s; flex-shrink: 0; opacity: 0.55; }
.habitacion-caret.open { transform: rotate(0deg); }
.habitacion-icon { font-size: 16px; flex-shrink: 0; }
.habitacion-name { font: 500 14px var(--sans); color: var(--ink); flex: 1; }
.habitacion-count {
  font: 600 11px var(--sans); color: var(--ink-mute);
  background: rgba(0,0,0,0.05); padding: 2px 8px;
  border-radius: 999px; flex-shrink: 0;
}
/* v422: ✎/🗑 pasados de emoji 12px (28×28) a SVG inline en botones 36×30
   (44×38 en táctil), igual que los nuevos botones 📐/✏. */
.habitacion-rename, .habitacion-delete {
  background: transparent; border: 1px solid transparent;
  width: 36px; height: 30px; border-radius: 6px;
  cursor: pointer; color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
}
.habitacion-rename:hover { background: rgba(184,153,104,0.12); color: var(--gold-deep); }
.habitacion-delete:hover { background: rgba(255,100,80,0.10); color: #d44; }
@media (pointer: coarse) {
  .habitacion-rename, .habitacion-delete { width: 44px; height: 38px; }
}
.habitacion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 170px);
  justify-content: start;
  gap: 8px; margin-bottom: 12px;
  padding-left: 10px;
  border-left: 1px dashed rgba(0,0,0,0.08);
  margin-left: 10px;
}
.habitacion-grid.collapsed { display: none; }
@media (pointer: coarse) {
  .cliente-header { padding: 16px 18px; }
  .cliente-name { font-size: 20px; }
  .habitacion-header { padding: 12px 14px; }
  .habitacion-name { font-size: 16px; }
  /* v430: el override de .habitacion-grid en línea 414-415 lo declaré
     ANTES de la regla base (línea 485), así que la base ganaba el cascade
     y las cards de las habitaciones se quedaban a 140 px en el iPad. Aquí
     lo redeclaro DESPUÉS de la base — ahora sí ganan los 260 px. */
  .habitacion-grid { grid-template-columns: repeat(auto-fill, 260px); }
}

/* v417: TIENDAS — nivel SUPERIOR (cliente recurrente). Tono más fuerte que
   Cliente para marcar la jerarquía: Tienda → Cliente → Vivienda → Habitación. */
.tienda-section { grid-column: 1 / -1; margin-bottom: 14px; }
.tienda-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(120,90,55,0.16), rgba(120,90,55,0.06));
  border: 1px solid rgba(120,90,55,0.40);
  border-radius: var(--radius); cursor: pointer;
  user-select: none;
}
.tienda-header:hover { background: rgba(120,90,55,0.18); }
.tienda-caret { transform: rotate(-90deg); transition: transform 0.2s; flex-shrink: 0; opacity: 0.8; }
.tienda-caret.open { transform: rotate(0deg); }
.tienda-icon { font-size: 20px; flex-shrink: 0; }
.tienda-name { font: 700 19px var(--serif); color: var(--ink); flex: 1; letter-spacing: 0.2px; }
.tienda-count {
  font: 700 12px var(--sans); color: #fff;
  background: var(--gold-deep, var(--gold)); padding: 3px 12px;
  border-radius: 999px; flex-shrink: 0;
}
.tienda-rename, .tienda-delete, .tienda-share, .tienda-transfer {
  background: transparent; border: 1px solid transparent;
  width: 34px; height: 34px; border-radius: 6px;
  cursor: pointer; font-size: 14px; color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
}
.tienda-rename:hover  { background: rgba(120,90,55,0.18); color: var(--gold-deep); }
.tienda-share:hover   { background: rgba(60,123,199,0.18); color: #1e7adb; }
.tienda-transfer:hover{ background: rgba(120,90,55,0.18); color: var(--gold-deep); }
.tienda-delete:hover  { background: rgba(255,100,80,0.12); color: #d44; }
.tienda-body { padding-left: 12px; }
.tienda-body.collapsed { display: none; }
.tienda-sueltos .sueltos-header { cursor: default; opacity: 0.75; }
.tienda-sueltos .sueltos-header:hover { background: var(--paper); border-color: var(--line); }
@media (pointer: coarse) {
  .tienda-header { padding: 18px 20px; }
  .tienda-name { font-size: 22px; }
  .tienda-rename, .tienda-delete, .tienda-share, .tienda-transfer { width: 42px; height: 42px; font-size: 18px; }
}

/* v418: botones "+" en cada cabecera del árbol y en estado vacío. */
.owner-add-tienda, .tienda-add-viv, .vivienda-add-hab {
  background: var(--gold-deep, var(--gold)); color: #fff;
  border: 1px solid var(--gold-deep, var(--gold));
  padding: 6px 12px; border-radius: 999px;
  font: 600 12px var(--sans); cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  letter-spacing: 0.2px;
}
.owner-add-tienda:hover, .tienda-add-viv:hover, .vivienda-add-hab:hover {
  filter: brightness(1.1);
}
.tienda-empty-add, .vivienda-empty-add, .habitacion-empty-add {
  display: inline-block; margin: 8px 0 8px 10px;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: rgba(184,153,104,0.10); color: var(--gold-deep, var(--gold));
  border: 1px dashed var(--gold);
  font: 600 13px var(--sans); cursor: pointer;
}
.tienda-empty-add:hover, .vivienda-empty-add:hover, .habitacion-empty-add:hover {
  background: rgba(184,153,104,0.18);
}
.vivienda-edit {
  background: transparent; border: 1px solid transparent;
  width: 32px; height: 32px; border-radius: 6px;
  cursor: pointer; font-size: 14px; color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
}
.vivienda-edit:hover { background: rgba(184,153,104,0.16); color: var(--gold-deep); }
.habitacion-add-med,
.habitacion-add-draw {
  background: rgba(184,153,104,0.16); color: var(--gold-deep);
  border: 1px solid rgba(184,153,104,0.40);
  width: 36px; height: 30px; border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  /* v423: emojis a color (📐/✏️). Forzamos fuente de emoji color por
     SO + tamaño grande para que se vean idénticos en iPad/Edge/Chrome. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  font-size: 18px;
  line-height: 1;
}
/* SVG inline en los botones de admin (✎ ✏) — heredan el color del tema. */
.habitacion-rename svg,
.habitacion-delete svg { display: block; }
.habitacion-add-med:hover,
.habitacion-add-draw:hover { background: rgba(184,153,104,0.26); }
/* v420: el dibujo directo usa un tono ligeramente distinto al del lápiz
   de medición para que se distingan rápido de un vistazo. */
.habitacion-add-draw {
  background: rgba(64,120,140,0.10);
  color: #2c6076;
  border-color: rgba(64,120,140,0.32);
}
.habitacion-add-draw:hover { background: rgba(64,120,140,0.18); }

/* v420: contenedor doble cuando la habitación está vacía — un botón por
   ruta (📐 medición · ✏ dibujo). */
.habitacion-empty-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 8px 10px;
}
.habitacion-empty-med, .habitacion-empty-draw {
  padding: 10px 16px; border-radius: var(--radius-sm);
  font: 600 13px var(--sans); cursor: pointer;
  border: 1px dashed;
  display: inline-flex; align-items: center; gap: 8px;
}
.habitacion-empty-med svg, .habitacion-empty-draw svg { display: block; }
/* v423: emoji (📐/✏️) en su propio span con fuente emoji color para que
   no se vea afectado por la fuente del botón. */
.hab-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  font-size: 18px;
  line-height: 1;
}
.habitacion-empty-med {
  background: rgba(184,153,104,0.10);
  color: var(--gold-deep, var(--gold));
  border-color: var(--gold);
}
.habitacion-empty-med:hover { background: rgba(184,153,104,0.18); }
.habitacion-empty-draw {
  background: rgba(64,120,140,0.08);
  color: #2c6076;
  border-color: rgba(64,120,140,0.45);
}
.habitacion-empty-draw:hover { background: rgba(64,120,140,0.16); }
.vivienda-sub {
  font: 500 12px var(--sans); color: var(--ink-mute);
  margin-left: 4px;
}
@media (pointer: coarse) {
  .owner-add-tienda, .tienda-add-viv, .vivienda-add-hab {
    padding: 8px 14px; font-size: 14px;
  }
  .habitacion-add-med,
  .habitacion-add-draw { width: 44px; height: 38px; font-size: 22px; }
  .vivienda-edit { width: 40px; height: 40px; font-size: 16px; }
}

/* v418: contexto del Domicilio/Habitación que aparece arriba de Medición. */
.med-context-card {
  margin: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(184,153,104,0.10), rgba(184,153,104,0.04));
  border: 1px solid rgba(184,153,104,0.35);
  border-radius: var(--radius);
}
.med-context-card.hidden { display: none; }
.med-ctx-line {
  font: 500 14px var(--sans); color: var(--ink);
  margin-bottom: 4px;
}
.med-ctx-line strong { color: var(--gold-deep); font-weight: 700; margin-right: 6px; }

.project-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.project-card:active { transform: translateY(1px); box-shadow: var(--shadow-1); border-color: var(--gold); }
/* v301: borde dorado en la card del proyecto editado más recientemente. */
.project-card.last-edited {
  border-color: var(--gold-deep, #8a6f3f);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--gold-deep, #8a6f3f), var(--shadow-1);
}
.project-card-thumb {
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-warm) 100%);
  height: 65px;                                /* v301: -50% (era 130px) */
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
.project-card-thumb svg { width: 60%; height: 60%; }
.thumb-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
}
/* v301: padding reducido y tamaños de texto compactos.
   v306: padding-top reservado para los 3 iconos absolutos (delete/share/rename)
   que solapaban el nombre en cards de 140 px. */
.project-card-info { padding: 36px 8px 10px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.card-tipo-badge {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gold-deep); background: rgba(184,153,104,0.12);
  border-radius: var(--radius-pill); padding: 2px 8px;
  display: inline-block; margin-bottom: 3px;
}
/* v459.667: el DISEÑO junto a RECTO — más grande y en negrita fuerte para que
   se vea bien de un vistazo. */
.card-diseno-em { font-weight: 800; color: var(--ink); }
@media (pointer: coarse) {
  .card-tipo-badge { font-size: 13px; padding: 3px 10px; }
}
.project-card-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  /* v301: nombre completo en varias líneas, no truncar. */
  white-space: normal;
  word-break: break-word;
}
.project-card-address {
  font-size: 10.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v459.664: línea-resumen de acabados (interior · puerta · hojas). */
.card-mat-line {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 3px;
  line-height: 1.32;
}
/* v459.666: en iPad la letra era muy pequeña — se agranda. */
@media (pointer: coarse) {
  .card-mat-line { font-size: 14px; line-height: 1.35; }
}
.project-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.project-card-meta span {
  font-size: 10.5px;
  color: var(--ink-soft);
  background: var(--bg-warm);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.asana-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--terra);
  background: rgba(140,58,40,0.08);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  width: fit-content;
}
.asana-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--terra);
}
/* v459.34: contenedor flex de las acciones de la card. Ancla la fila de
   botones arriba-derecha y los reparte de derecha a izquierda con `gap`,
   con `flex-wrap` como red de seguridad: si la card fuese más estrecha de
   lo previsto NUNCA recorta el botón de la izquierda (cae a una 2ª fila).
   Esto sustituye el posicionamiento absoluto por-botón con offsets `right`
   fijos, que dependía de que la card midiese exactamente lo calculado y
   recortaba el icono de "copiar" contra la esquina redondeada.
   v459.35: en desktop (card 140 px) los botones eran de 26 con gap 6 →
   no cabían en una fila y flex-wrap los partía en dos al hacer hover.
   Bajo a 22 px y gap 4 en desktop; coarse mantiene 32 px y gap 6. */
.card-actions {
  position: absolute;
  top: 6px; left: 4px; right: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  z-index: 2;
  pointer-events: none;   /* el hueco vacío deja pasar el tap a la card */
}
.card-actions > button {
  position: static;        /* anula el position:absolute de cada botón */
  top: auto; right: auto; left: auto;
  margin: 0;
  flex: 0 0 auto;
  pointer-events: auto;
  width: 22px; height: 22px;   /* desktop — coarse lo sube a 32 más abajo */
}

.card-delete-btn {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(251,246,233,0.95);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.project-card:hover .card-delete-btn,
.project-card.show-delete .card-delete-btn { opacity: 1; }
.card-delete-btn:active { color: var(--error); }

.card-share-btn {
  position: absolute;
  top: 6px; right: 38px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(251,246,233,0.95);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.project-card:hover .card-share-btn,
.project-card.show-delete .card-share-btn { opacity: 1; }
.card-share-btn:active { color: var(--ink); }
.card-share-btn svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { .card-share-btn { opacity: 1; } }

.card-rename-btn {
  position: absolute;
  top: 6px; right: 70px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(251,246,233,0.95);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.project-card:hover .card-rename-btn,
.project-card.show-delete .card-rename-btn { opacity: 1; }
.card-rename-btn:active { color: var(--gold-deep); }
@media (pointer: coarse) { .card-rename-btn { opacity: 1; } }

.card-owner-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  padding: 2px 8px;
  background: rgba(184,153,104,0.10);
  border-radius: 4px;
}
.card-shared-badge {
  display: inline-block;
  margin-top: 6px;
  margin-left: 4px;
  font-size: 10px;
  letter-spacing: 0.10em;
  font-weight: 600;
  color: var(--ink-mute);
  padding: 2px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* Card en uso por otro usuario */
.project-card.is-locked { opacity: 0.62; }
.project-card.is-locked:hover { opacity: 0.80; }
.card-lock-badge {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(180,60,40,0.10);
  border: 1px solid rgba(180,60,40,0.35);
  color: #c84438;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.card-lock-badge svg { stroke: currentColor; fill: none; stroke-width: 2; }

/* Modal Lock — icono grande */
.lock-icon-wrap {
  display: flex; justify-content: center;
  margin: 4px 0 8px;
}
.lock-big {
  width: 48px; height: 48px;
  stroke: var(--ink-soft);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-state {
  text-align: center;
  padding: 80px 24px;
  color: var(--ink-soft);
  grid-column: 1 / -1;
}
.empty-state .empty-mark {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.empty-state .empty-mark svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.empty-state h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 6px;
  color: var(--ink);
}
.empty-state p {
  font-size: 13.5px;
  color: var(--ink-mute);
}

.fab {
  position: fixed;
  bottom: calc(28px + var(--safe-bottom));
  right: 28px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 8px 28px rgba(26,22,17,0.30),
    0 2px 6px rgba(26,22,17,0.15);
  transition: transform 0.15s;
  z-index: 10;
}
.fab svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.fab:active { transform: scale(0.92); }

/* v414: segundo FAB (medición) — apilado a la izquierda del principal. */
.fab-secondary {
  right: calc(28px + 60px + 18px);  /* 18px de gap respecto al FAB principal */
  background: var(--gold, #B89968);
  color: #fff;
  border-color: var(--gold, #B89968);
}

/* v414: Medición — form helpers compartidos. */
.form-section-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.form-group-row {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}
.form-group-row .form-group { flex: 1; margin-bottom: 0; }
.med-estructura-row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
  padding: 10px;
  background: var(--bg-soft, rgba(0,0,0,0.03));
  border-radius: var(--radius-sm);
}
.med-estructura-row label { font-size: 11px; color: var(--ink-mute); }
.med-estructura-row .ed-eb-w, .med-estructura-row input, .med-estructura-row select { width: 100%; }
.med-estructura-row .btn-del {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════════════════
   FORMS
═════════════════════════════════════════════════════════════ */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-1);
}
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.form-group:last-child { margin-bottom: 0; }
.form-group label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.form-input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 13px 14px;
  font-size: 15px;
  font-family: var(--sans);
  width: 100%;
  transition: border-color 0.2s, background 0.2s;
  font-weight: 400;
}
.form-input:focus { outline: none; border-color: var(--gold); background: var(--paper); }
.form-input::placeholder { color: var(--ink-faint); }
textarea.form-input { resize: vertical; min-height: 70px; }
.form-hint {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 4px;
  line-height: 1.5;
  font-style: italic;
}
.form-row { display: flex; gap: 12px; }
.form-group.half { flex: 1; }
.form-group.third { flex: 1; }
.form-group.quarter { flex: 1; }
.btn-row { justify-content: flex-end; gap: 10px; margin-top: 4px; }

.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.opt-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 500;
  padding: 13px 10px;
  font-family: var(--sans);
  transition: all 0.15s;
  letter-spacing: 0.005em;
}
.opt-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  font-weight: 500;
}
.opt-btn:active { transform: scale(0.97); }

/* Botones rápidos de patas (Holguras) */
.patas-btn,
.tipo-frente-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  min-width: 38px;
  font-family: var(--sans);
  transition: all 0.15s;
  cursor: pointer;
}
.patas-btn:hover,
.tipo-frente-btn:hover { border-color: var(--ink-soft); }
.tipo-frente-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
/* v465.14: el botón de patas ACTIVO va al revés que el resto de chips —
   fondo BLANCO y texto negro (petición de Adrián). Sobre el crema de los
   inactivos, el blanco puro + el borde oscuro y la negrita lo destacan. */
.patas-btn.active {
  background: #FFFFFF;
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--ink) inset;
}
.patas-btn:active,
.tipo-frente-btn:active { transform: scale(0.97); }

.asana-link-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  padding: 13px 14px;
  font-size: 14.5px;
  width: 100%;
  font-family: var(--sans);
  transition: all 0.2s;
}
.asana-link-btn.linked {
  background: rgba(140,58,40,0.05);
  border-color: rgba(140,58,40,0.3);
  color: var(--terra);
}
.asana-link-btn:active { background: var(--bg-soft); }
.asana-link-btn .chev { margin-left: auto; color: var(--ink-faint); }

.asana-logo {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, #f5614e, #fc9455);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(245,97,78,0.3);
}
.asana-logo.sm { width: 18px; height: 18px; font-size: 10px; border-radius: 4px; }

/* ── SCREEN FOOTER ─────────────────────────────────────────── */
.screen-footer {
  padding: 16px 18px;
  padding-bottom: calc(16px + var(--safe-bottom));
  background: rgba(244,236,215,0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.screen-footer.two-btn { display: flex; gap: 12px; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--bg);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 14px 22px;
  font-family: var(--sans);
  transition: opacity 0.15s, transform 0.1s;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 4px 14px rgba(26,22,17,0.18);
}
.btn-primary:active { opacity: 0.92; transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary.full { width: 100%; }
.btn-primary.gold {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  border-color: var(--gold-deep);
}

.btn-secondary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  padding: 13px 18px;
  font-family: var(--sans);
  transition: background 0.15s;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-1);
}
.btn-secondary.full { width: 100%; }
.btn-secondary:active { background: var(--bg-soft); }
.btn-secondary.active,
.obs-var-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn-danger {
  background: rgba(140,58,40,0.06);
  border: 1px solid rgba(140,58,40,0.30);
  border-radius: var(--radius-sm);
  color: var(--terra);
  font-size: 14.5px;
  font-weight: 500;
  padding: 13px 18px;
  font-family: var(--sans);
  min-height: 50px;
  width: 100%;
}
.btn-danger:active { background: rgba(140,58,40,0.12); }

.btn-small {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  font-family: var(--sans);
  white-space: nowrap;
  min-height: 36px;
}
.btn-small:active { background: var(--bg-soft); }
.btn-small.accent { color: var(--bg); background: var(--ink); border-color: var(--ink); }

.btn-icon-danger {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 14px;
  padding: 8px;
  border-radius: 6px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.btn-icon-danger:active { color: var(--terra); background: rgba(140,58,40,0.08); }
.btn-icon-danger svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ════════════════════════════════════════════════════════════
   MEDICIONES
═════════════════════════════════════════════════════════════ */
.meas-step {
  display: none;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 26px 20px 20px;
  flex-direction: column;
  gap: 20px;
}
.meas-step.active { display: flex; }
.meas-header {
  text-align: center;
  margin-bottom: 4px;
}
.meas-header .eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 8px;
}
.meas-header h3 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 8px;
}
.meas-header p {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
}

.steps-row { display: flex; gap: 5px; align-items: center; }
.step-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: all 0.25s;
}
.step-dot.active {
  background: var(--ink);
  width: 22px;
  border-radius: 4px;
}
.step-dot.done { background: var(--gold-deep); }

/* SVG diagram for measurements */
.meas-diagram {
  display: flex;
  justify-content: center;
  margin: 6px 0 6px;
}
.meas-diagram svg { width: 100%; max-width: 320px; height: auto; }

.triple-input {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tri-field {
  display: flex; flex-direction: column; gap: 7px;
}
.tri-field label {
  font-size: 10.5px;
  color: var(--ink-mute);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mm-field {
  display: flex;
  align-items: baseline;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s;
  box-shadow: var(--shadow-1);
}
.mm-field:focus-within {
  border-color: var(--gold);
  box-shadow: var(--shadow-1), 0 0 0 3px rgba(184,153,104,0.12);
}
.mm-field.lg { max-width: 220px; }
.mm-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  padding: 14px 6px 12px;
  text-align: center;
  min-width: 0;
  letter-spacing: -0.01em;
}
.mm-input:focus { outline: none; }
.mm-input::placeholder { color: var(--ink-faint); font-weight: 300; }
.mm-field span {
  font-size: 11px;
  color: var(--ink-mute);
  padding-right: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.level-warn {
  background: rgba(176,117,48,0.08);
  border: 1px solid rgba(176,117,48,0.30);
  border-radius: var(--radius-sm);
  color: var(--warn);
  padding: 12px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.level-warn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }
.level-warn.hidden { display: none; }
.level-warn strong { font-weight: 600; }

.clearance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cl-field { display: flex; flex-direction: column; gap: 7px; }
.cl-field label {
  font-size: 10.5px; color: var(--ink-mute); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}

.effective-dims-box {
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 20px;
  position: relative;
  box-shadow: var(--shadow-1);
}
.effective-dims-box::before {
  content: 'COTAS EFECTIVAS';
  position: absolute;
  top: -8px; left: 18px;
  background: var(--bg);
  padding: 0 8px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  font-weight: 700;
}
.eff-dims { display: flex; gap: 22px; flex-wrap: wrap; justify-content: space-around; }
.eff-dim { text-align: center; }
.eff-dim .lbl {
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 600;
}
.eff-dim .val {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.eff-dim .val .unit { font-size: 14px; color: var(--ink-mute); margin-left: 3px; }

/* Obstacles */
.obstacles-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.obstacle-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: var(--shadow-1);
}
.obs-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.obs-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.obs-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.obs-type { font-size: 14px; font-weight: 500; color: var(--ink); }
.obs-dims { font-size: 12px; color: var(--ink-soft); }
.obs-notes { font-size: 12px; color: var(--ink-mute); font-style: italic; font-family: var(--serif); }
.obs-delete { background: none; border: none; color: var(--ink-faint); padding: 6px 8px; flex-shrink: 0; }
.obs-delete:active { color: var(--terra); }
.obs-delete svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.empty-msg {
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
  padding: 16px;
  font-family: var(--serif);
  font-style: italic;
}

.obstacle-form {
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 12px;
  box-shadow: var(--shadow-2);
}
.obstacle-form.hidden { display: none; }

/* ════════════════════════════════════════════════════════════
   DISEÑO
═════════════════════════════════════════════════════════════ */
.preview-strip {
  background: linear-gradient(180deg, var(--paper) 0%, var(--bg-soft) 100%);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  flex-shrink: 0;
  position: relative;
}
.preview-strip canvas {
  width: 100%;
  height: 180px;
  display: block;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.design-tabs {
  display: flex;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 0 14px;
  flex-shrink: 0;
}
.dtab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 14px 8px;
  font-family: var(--sans);
  transition: color 0.2s, border-color 0.2s;
  text-transform: uppercase;
}
.dtab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

.design-body { flex: 1; overflow: hidden; }
.dpanel {
  display: none;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
  flex-direction: column;
  gap: 14px;
}
.dpanel.active { display: flex; }

/* Section header */
.sect-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.sect-head h4 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
}
.sect-head .sub { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.05em; }

/* Module templates rail */
.templates-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px;
  margin: 0 -18px;
  padding-left: 18px; padding-right: 18px;
  scroll-snap-type: x mandatory;
}
.templates-row::-webkit-scrollbar { display: none; }
.tpl-card {
  flex: 0 0 130px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: var(--shadow-1);
  transition: border-color 0.2s, transform 0.12s;
}
.tpl-card:active { transform: scale(0.97); border-color: var(--gold); }
.tpl-card .tpl-vis {
  height: 70px;
  background: var(--bg);
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tpl-card .tpl-vis svg { width: 90%; height: 90%; }
.tpl-card .tpl-name {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
}
.tpl-card .tpl-desc { font-size: 10.5px; color: var(--ink-mute); line-height: 1.2; }

/* Modules list */
.modules-list { display: flex; flex-direction: column; gap: 10px; }
.module-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-1);
}
.module-card.selected {
  border-color: var(--gold);
  box-shadow: var(--shadow-1), 0 0 0 3px rgba(184,153,104,0.12);
  background: var(--paper-soft);
}
.module-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.module-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mod-width-wrap {
  display: flex; align-items: baseline; gap: 4px;
}
.module-width-input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  padding: 6px 10px;
  width: 86px;
  text-align: center;
  font-feature-settings: 'tnum';
}
.module-width-input:focus { outline: none; border-color: var(--gold); }
.module-mm { font-size: 11px; color: var(--ink-mute); font-weight: 500; letter-spacing: 0.05em; }
.module-elems-tag {
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--bg-soft);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-left: auto;
}
.module-name-display {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.module-card-actions { display: flex; gap: 8px; align-items: center; }
.module-elem-summary { font-size: 11px; color: var(--ink-mute); margin-left: 8px; flex: 1; font-style: italic; font-family: var(--serif); }

.modules-total {
  font-size: 12.5px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  text-align: center;
  border: 1px solid var(--line);
  background: var(--paper);
  letter-spacing: 0.02em;
}
.modules-total.ok { color: var(--green-ok); border-color: rgba(79,107,69,0.3); background: rgba(79,107,69,0.05); }
.modules-total.under { color: var(--warn); border-color: rgba(176,117,48,0.3); background: rgba(176,117,48,0.05); }
.modules-total.over { color: var(--error); border-color: rgba(140,58,40,0.3); background: rgba(140,58,40,0.05); }
.modules-total strong { font-family: var(--serif); font-size: 16px; font-weight: 500; }

.module-elements-panel {
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 4px;
  box-shadow: var(--shadow-2);
}
.module-elements-panel.hidden { display: none; }
.mel-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.mel-header h4 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}

.elements-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.element-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.elem-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.elem-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.elem-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.elem-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.elem-pos { font-size: 11.5px; color: var(--ink-soft); font-feature-settings: 'tnum'; }
.elem-notes { font-size: 11.5px; color: var(--ink-mute); font-style: italic; font-family: var(--serif); }

.elem-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.elem-quick-btn {
  flex: 1;
  min-width: 100px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.elem-quick-btn:active { background: var(--bg-soft); border-color: var(--gold); }
.elem-quick-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4; color: var(--ink); }

/* Counter */
.counter {
  display: flex; align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: fit-content;
}
.ctr-btn {
  background: none; border: none;
  color: var(--ink);
  font-size: 22px;
  padding: 6px 16px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 300;
  font-family: var(--serif);
}
.ctr-btn:active { background: var(--bg-soft); }
.ctr-val {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  min-width: 48px;
  text-align: center;
  padding: 0 6px;
  color: var(--ink);
}

/* Materials */
.mat-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 10px;
  padding: 4px 0;
}
.mat-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1.5px solid rgba(26,22,17,0.15);
  cursor: pointer;
  position: relative;
  transition: transform 0.12s, box-shadow 0.18s;
  box-shadow: var(--shadow-1);
  background-clip: padding-box;
}
.mat-btn::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -1px 0 rgba(0,0,0,0.08) inset;
}
.mat-btn.selected {
  border-color: var(--ink);
  transform: scale(1.08);
  box-shadow: var(--shadow-2), 0 0 0 3px var(--gold);
}
.mat-btn:active { transform: scale(0.96); }
.mat-label {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--gold-deep);
  text-align: center;
  width: 100%;
}

/* ════════════════════════════════════════════════════════════
   PREVIEW
═════════════════════════════════════════════════════════════ */
.view-toggle {
  display: flex;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 0;
}
.vtog {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  transition: background 0.15s, color 0.15s;
}
.vtog.active {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 1px 4px rgba(26,22,17,0.2);
}

.preview-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper) 0%, var(--bg-warm) 100%);
}
.view-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: none;
}
.view-canvas.active { display: block; }

.preview-controls {
  position: absolute;
  bottom: 18px; left: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(251,246,233,0.94);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 12px 8px 18px;
  box-shadow: var(--shadow-2);
  z-index: 4;
}
.preview-controls .ctrl-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.open-slider {
  width: 130px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-warm);
  border-radius: 2px;
  outline: none;
}
.open-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  border: 2px solid var(--paper);
  box-shadow: var(--shadow-1);
}
.open-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  border: 2px solid var(--paper);
}

.zoom-fit-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(251,246,233,0.94);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  box-shadow: var(--shadow-2);
}
.zoom-fit-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.preview-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  padding-bottom: calc(14px + var(--safe-bottom));
  background: rgba(244,236,215,0.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.proj-summary {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.proj-summary strong {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
}

/* ════════════════════════════════════════════════════════════
   AJUSTES
═════════════════════════════════════════════════════════════ */
.settings-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  display: flex; flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-1);
}
.settings-section h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.test-result { font-size: 13px; padding: 4px 0; min-height: 20px; font-style: italic; font-family: var(--serif); }
.test-result .ok { color: var(--green-ok); }
.test-result .err { color: var(--terra); }
/* v465.207 — EN AJUSTES, LA LETRA MÁS GRANDE. Adrián, viendo el informe del peso de
   las fotos en el iPad: «estos textos ponlo algo más grande porque se leen muy mal,
   estos y el resto de ellos en esta pantalla».
   ⚠️ Va ACOTADO a `#screen-settings` a propósito. `.form-hint` y `.test-result` se
   usan por toda la app —modales, panel de medidas, ficha de medición— y subirlas en
   global recolocaría pantallas que nadie ha mirado. Aquí el sitio sobra.
   ⚠️ Y hubo que quitar los `style="…font-size:13px"` que llevaban a pelo los párrafos
   de esta pantalla: un estilo en línea gana a la hoja, así que con ellos puestos esto
   no habría hecho nada.
   v465.208 — SEGUNDA SUBIDA. Con 14,5 px Adrián seguía diciendo «hazla más grande,
   sigue muy baja». Se va a 16/17, que en el iPad ya se lee de un vistazo y sin
   acercarse. El sitio está: estas tarjetas tienen 22 px de margen y sobra ancho. */
#screen-settings .form-hint { font-size: 16px; line-height: 1.6; }
#screen-settings .test-result { font-size: 17px; line-height: 1.6; }
#screen-settings .test-result .form-hint { font-size: 15.5px; }
#screen-settings .form-label { font-size: 15.5px; }
#screen-settings .settings-section > p { font-size: 16px; line-height: 1.6; }
#screen-settings .settings-section h3 { font-size: 25px; }
#screen-settings .form-input,
#screen-settings .btn-primary,
#screen-settings .btn-secondary { font-size: 16px; }
.app-version {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding: 24px 0 8px;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   MODALES
═════════════════════════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
}
.modal.hidden { display: none; }

/* v456.3: modal centrado (en lugar de bottom-sheet) para confirm SI/NO. */
.modal.modal-centered {
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-box.modal-confirm-card {
  width: min(440px, 100%);
  max-height: none;
  border-radius: 16px;
  padding: 0;
  animation: fadeInScale 0.2s ease;
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.modal-confirm-head { padding: 18px 22px 6px; }
.modal-confirm-head h3 {
  font-family: var(--serif);
  font-size: 19px;
  margin: 0;
}
.modal-confirm-body { padding: 4px 22px 14px; }
.modal-confirm-body p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-mute);
  line-height: 1.45;
  white-space: pre-line;
}
.modal-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line-soft);
}

/* v465.272: esquema de la columna para elegir el TRAMO de la puerta */
.tramo-card { max-width: 380px; }
.tramo-col {
  display: flex; flex-direction: column;
  margin: 4px 22px 8px;
  border-left: 3px solid var(--ink-soft);
  border-right: 3px solid var(--ink-soft);
  padding: 0;
}
.tramo-corte {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink-soft); color: var(--paper);
  font-size: 12.5px; font-weight: 600;
  padding: 3px 10px; min-height: 22px;
}
.tramo-corte.es-borde { background: var(--ink); }
.tramo-corte-y { font-weight: 400; opacity: 0.85; font-variant-numeric: tabular-nums; }
.tramo-hueco {
  border: none; margin: 0; width: 100%;
  background: var(--bg-warm); color: var(--ink-soft);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tramo-hueco.es-caj:not(.on):not(.ocupada) {
  background: repeating-linear-gradient(0deg, #D9CBB3 0 3px, #EDE3D2 3px 26px);
  color: var(--ink); font-weight: 600;
}
.tramo-hueco:hover:not(:disabled) { filter: brightness(0.96); }
.tramo-hueco.on {
  background: #A8703E; color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: inset 3px 0 0 #7A4E28, inset -3px 0 0 #7A4E28;
}
.tramo-hueco.ocupada {
  cursor: not-allowed; color: var(--ink-mute);
  background: repeating-linear-gradient(45deg, #E4DCCD 0 6px, #F2ECE2 6px 12px);
}
.tramo-res {
  margin: 4px 22px 10px; font-size: 14px; font-weight: 600;
  color: var(--ink); text-align: center;
}
#tramo-ok:disabled { opacity: 0.45; cursor: not-allowed; }
/* v465.296: «Entera» de un toque, encima del esquema (Juan) */
.tramo-entera {
  display: flex; align-items: center; gap: 10px;
  margin: 0 22px 10px; padding: 11px 14px;
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.tramo-entera input { width: 22px; height: 22px; margin: 0; accent-color: #A8703E; cursor: pointer; flex: 0 0 auto; }
.tramo-entera em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--ink-mute); }
.tramo-entera.on { border-color: #A8703E; background: #F6EBDD; }
.tramo-entera.no { opacity: 0.5; cursor: not-allowed; }
/* v465.296 — el esquema del tramo sale A LA DERECHA, sobre la columna derecha, y SIN velo
   ni desenfoque: el 3D se ve nítido detrás, con el tramo elegido marcado (Juan). El fondo
   deja pasar el dedo: se puede girar el 3D para mirar dónde cae la puerta. */
#modal-tramo.tramo-lateral.modal.modal-centered {
  justify-content: flex-end; align-items: flex-start;
  padding: calc(var(--safe-top) + 62px) max(8px, var(--safe-right)) 8px 8px;
  pointer-events: none;
}
#modal-tramo.tramo-lateral .modal-bg { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
#modal-tramo.tramo-lateral .modal-box {
  pointer-events: auto;
  margin: 0 0 0 auto;             /* la regla general `.modal-box { margin: auto }` la centraba */
  max-height: calc(100vh - 80px); overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  animation: none;
}

/* v459.533: chip partido Sí/No — pregunta de la abatible (solo hueco / columna) */
.aba-split {
  display: flex;
  margin: 6px 22px 20px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.aba-split button {
  flex: 1;
  border: none;
  padding: 18px 14px;
  cursor: pointer;
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.aba-split button:active { transform: scale(0.97); }
.aba-split .aba-si { background: var(--green-ok); color: #fff; }
.aba-split .aba-si.aba-danger { background: var(--terra); color: #fff; }
.aba-split .aba-no { background: var(--bg-warm); color: var(--ink-soft); }
.aba-split .aba-si:hover { filter: brightness(1.06); }
.aba-split .aba-no:hover { filter: brightness(0.97); }
.aba-split .aba-big { font-size: 19px; font-weight: 600; letter-spacing: 0.2px; }
.aba-split .aba-sub { font-size: 11.5px; font-weight: 500; opacity: 0.85; }
/* v465.241 — chips cuyo rótulo es una FRASE, no un «Sí/No» (Juan: «tienen que ser
   más explícitos, como: Quiero girar vetas / Quiero editar puertas»). A 19 px se
   parten en dos líneas y los dos chips dejan de casar entre sí. */
.aba-split.aba-split-txt .aba-big { font-size: 15px; line-height: 1.25; }
/* v463.88: dibujo opcional dentro del chip (p. ej. de qué lado queda el hueco del
   Kit Extra). Sin SVG dentro no ocupa nada, así que no afecta a los chips de siempre. */
.aba-split .aba-ico { display: block; line-height: 0; }
.aba-split .aba-ico:not(:empty) { margin-bottom: 4px; }
.aba-split .aba-ico svg { display: block; }

/* ──────────────────────────────────────────────────────────────
   v456.4: Modo solo lectura del editor 3D (Montse + cualquier
   usuario viendo un proyecto ajeno). Banner amarillo arriba y
   palette / element-bar dimmed para que sea obvio.
   ────────────────────────────────────────────────────────────── */
.ed-readonly-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: linear-gradient(to right, #FEF6E4, #FEEAB4);
  border-bottom: 1px solid #E0BE6E;
  font-size: 13.5px;
  color: #6B4F1F;
  flex-shrink: 0;
  z-index: 50;
}
.ed-readonly-banner.hidden { display: none; }
.ed-readonly-icon { font-size: 16px; }
.ed-readonly-msg { flex: 1; line-height: 1.35; }
.ed-readonly-msg em { font-style: normal; font-weight: 600; }
/* v457.7: variante "colaboración" — maestro editando proyecto ajeno.
   Verde-azulado en vez de ámbar para distinguir de solo-lectura. */
.ed-readonly-banner.ed-collab-banner {
  background: linear-gradient(to right, #E8F3EC, #CDE8D6);
  border-bottom-color: #9BC9AC;
  color: #1F5733;
}

#screen-editor[data-readonly="1"] #ed-right,
#screen-editor[data-readonly="1"] #ed-elem-bar {
  opacity: 0.42;
  pointer-events: none;
  filter: grayscale(35%);
}
/* En táctil, el botón "Hacer copia" sigue clicable a pesar del banner. */
#screen-editor[data-readonly="1"] #btn-ed-saveas {
  outline: 2px solid #C8A961;
  outline-offset: 2px;
}
.modal-bg {
  position: absolute; inset: 0;
  background: rgba(26,22,17,0.45);
  backdrop-filter: blur(6px);
}
.modal-box {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-height: 85vh;
  display: flex; flex-direction: column;
  animation: slideUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  padding-bottom: var(--safe-bottom);
  box-shadow: var(--shadow-modal);
}
.modal-box.modal-sm { max-height: 70vh; }
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.modal-head::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--ink-faint);
  opacity: 0.4;
}
.modal-head h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
}
.modal-close {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.modal-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 24px 24px;
  display: flex; flex-direction: column;
  gap: 14px;
}
/* v463.28: en los modales de Pilar/Viga/Jácena y Cajonera hacemos VISIBLE la barra
   de desplazamiento lateral (más ancha y con color) para que se note que hay más
   contenido debajo — incluido el botón de confirmar — y se pueda bajar con el dedo.
   (El sticky de v463.27 dejaba el «Aceptar» muy acentuado y tapaba las medidas.) */
#modal-obs-variant .modal-body,
#modal-cajonera .modal-body {
  scrollbar-width: auto;                         /* Firefox */
  scrollbar-color: #B4772A #EADFCB;
}
#modal-obs-variant .modal-body::-webkit-scrollbar,
#modal-cajonera .modal-body::-webkit-scrollbar { width: 12px; }
#modal-obs-variant .modal-body::-webkit-scrollbar-track,
#modal-cajonera .modal-body::-webkit-scrollbar-track { background: #EADFCB; border-radius: 8px; }
#modal-obs-variant .modal-body::-webkit-scrollbar-thumb,
#modal-cajonera .modal-body::-webkit-scrollbar-thumb { background: #B4772A; border-radius: 8px; border: 2px solid #EADFCB; }
/* ⚠️ v465.211 — LA REGLA DE ARRIBA NO HACE NADA EN EL IPAD, y por eso Adrián veía
   la barra «muy fina» o directamente no la veía. `::-webkit-scrollbar` es de la
   Safari de ESCRITORIO; en iOS la barra es un indicador del sistema que se pinta
   por encima, sólo mientras se arrastra, y no se puede estilar. O sea que la
   v463.28 arregló el PC y en el iPad —que es donde se usa— siguió igual.
   Se deja puesta (en PC sí vale) y se añade un indicador DIBUJADO POR NOSOTROS,
   que es lo único que se ve igual en los dos sitios. Lo mueve `_modalScrollInd`.
   Va con `pointer-events:none` para no robarle el dedo al contenido. */
.modal-sind {
  position: absolute; right: 5px; width: 7px;
  border-radius: 99px; background: #EADFCB;
  pointer-events: none; z-index: 4;
  opacity: 0; transition: opacity .18s ease;
}
.modal-sind.on { opacity: 1; }
.modal-sind > i {
  position: absolute; left: 0; width: 100%; display: block;
  border-radius: 99px; background: #B4772A;
}
/* El contenido deja sitio al indicador para que no se le monte encima el texto. */
.modal-sind-on .modal-body { padding-right: 20px; }

/* Botones de variante del pilar un poco más compactos → cabe todo con menos scroll. */
#modal-obs-variant .obs-var-btn { padding: 8px 10px !important; margin-bottom: 4px !important; }
.modal-section-label {
  font-size: 10px;
  color: var(--ink-mute);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 6px;
  padding-top: 6px;
}

/* Asana list */
.asana-list { display: flex; flex-direction: column; gap: 6px; }
.asana-project-item, .asana-task-item {
  display: flex; align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: background 0.15s, border-color 0.15s;
  font-weight: 400;
}
.asana-project-item:active, .asana-task-item:active { background: var(--bg-soft); border-color: var(--gold); }
.asana-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--terra);
  flex-shrink: 0;
}
.asana-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.asana-task-dot.pending { background: var(--ink); }
.asana-task-dot.done { background: var(--green-ok); }
.asana-arrow { margin-left: auto; color: var(--ink-faint); }
.asana-loading {
  text-align: center;
  color: var(--ink-mute);
  padding: 28px;
  font-size: 14px;
  font-family: var(--serif);
  font-style: italic;
}
.done-task { opacity: 0.55; }
.back-link {
  background: none; border: none;
  color: var(--gold-deep);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
  margin-bottom: 8px;
  font-family: var(--sans);
  text-align: left;
  display: flex; align-items: center; gap: 4px;
}

/* Element type grid (modal) */
.elem-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.etype-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 12.5px;
  padding: 14px 8px;
  font-family: var(--sans);
  text-align: center;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.etype-btn svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.etype-btn.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  font-weight: 500;
}

/* ── TOAST ──────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(34px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  z-index: 200;
  white-space: nowrap;
  box-shadow: var(--shadow-3);
  animation: fadeIn 0.25s ease;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.success { background: var(--green-ok); }
.toast.error { background: var(--terra); }
.toast.hidden { display: none; }
@keyframes fadeIn { from { opacity:0; transform: translateX(-50%) translateY(12px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }

/* ── UTILITIES ──────────────────────────────────────────────── */
.hidden { display: none !important; }
.full { width: 100%; }

/* ── LANDSCAPE / iPad ────────────────────────────────────────── */
@media (min-width: 768px) {
  .modal-box { width: min(640px, 100%); margin: auto; border-radius: var(--radius-lg); }
  .modal { align-items: center; justify-content: center; }
  .opt-grid { grid-template-columns: repeat(4, 1fr); }
  .clearance-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (orientation: landscape) and (min-width: 900px) {
  .meas-step { padding: 32px 40px 20px; }
  .meas-header h3 { font-size: 36px; }
  .login-wrap { gap: 56px; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

/* ════════════════════════════════════════════════════════════
   ADICIONES v2.0
════════════════════════════════════════════════════════════ */

/* ── SHAPE SELECTOR ─────────────────────────────────────────── */
.shape-selector { display: flex; gap: 10px; }
.shape-btn {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 7px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 8px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-soft); font-family: var(--sans);
  transition: all 0.15s;
}
.shape-btn.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.shape-btn:active { transform: scale(0.97); }
.shape-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 30px; }
.shape-icon svg { width: 100%; height: 100%; }

/* ── TEMPLATES SECTION ──────────────────────────────────────── */
.templates-section { flex-shrink: 0; margin-bottom: 4px; }
.templates-label {
  font-size: 10px; font-weight: 700; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.20em; margin-bottom: 8px;
}
.tpl-icon {
  display: flex; align-items: center; justify-content: center;
  height: 56px;
  background: var(--bg); border-radius: 6px;
  border: 1px solid var(--line-soft);
  margin-bottom: 4px; color: var(--ink-soft);
}
.tpl-icon svg { width: 36px; height: 36px; }
.tpl-card .tpl-name { font-family: var(--serif); font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.15; }
.tpl-card:active .tpl-icon { background: var(--bg-soft); }

/* ── MODULES SUMMARY ────────────────────────────────────────── */
.modules-summary {
  font-size: 12.5px; padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--paper); letter-spacing: 0.01em;
  color: var(--ink-soft); margin-bottom: 4px; flex-shrink: 0;
}
.modules-summary.ok { color: var(--green-ok); border-color: rgba(79,107,69,0.3); background: rgba(79,107,69,0.05); }
.modules-summary.under { color: var(--warn); border-color: rgba(176,117,48,0.3); background: rgba(176,117,48,0.05); }
.modules-summary.over { color: var(--error); border-color: rgba(140,58,40,0.3); background: rgba(140,58,40,0.05); }
.modules-summary strong { font-family: var(--serif); font-size: 15px; font-weight: 500; }

/* ── MODULE CARD (v2) ───────────────────────────────────────── */
.module-badge {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  font-family: var(--serif); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.module-width-wrap { display: flex; align-items: baseline; gap: 4px; }
.module-width-input {
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); font-family: var(--serif); font-size: 18px; font-weight: 400;
  padding: 5px 8px; width: 76px; text-align: center; font-feature-settings: 'tnum';
}
.module-width-input:focus { outline: none; border-color: var(--gold); }
.module-mm-label { font-size: 10.5px; color: var(--ink-mute); font-weight: 600; letter-spacing: 0.06em; }
.module-name-tag { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--gold-deep); margin-left: 2px; }
.module-header-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.module-move-btn {
  background: none; border: none; color: var(--ink-faint);
  font-size: 18px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-family: var(--serif);
}
.module-move-btn:active { color: var(--ink); background: var(--bg-soft); }
.module-move-btn:disabled { opacity: 0.25; pointer-events: none; }
.module-delete-btn {
  background: none; border: none; color: var(--ink-faint);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.module-delete-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.module-delete-btn:active { color: var(--terra); background: rgba(140,58,40,0.08); }

/* ── INLINE ELEMENTS LIST ───────────────────────────────────── */
.module-elements-list {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 8px; border-top: 1px solid var(--line-soft); padding-top: 8px;
}
.element-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 6px; border-radius: var(--radius-sm); transition: background 0.12s;
}
.element-row:active { background: var(--bg-soft); }
.elem-order-btns { display: flex; flex-direction: column; gap: 0; flex-shrink: 0; }
.order-btn {
  background: none; border: none; color: var(--ink-faint);
  font-size: 9px; width: 20px; height: 16px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.order-btn:active { color: var(--ink); }
.elem-type-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ink-faint);
}
.elem-type-dot[data-etype="shelf"]       { background: #8A9060; }
.elem-type-dot[data-etype="rail"]        { background: #A09060; }
.elem-type-dot[data-etype="rail-doble"]  { background: #B0A070; }
.elem-type-dot[data-etype="drawer"]      { background: #8A6040; }
.elem-type-dot[data-etype="shoe-rack"]   { background: #607090; }
.elem-type-dot[data-etype="pull-out"]    { background: #5080A0; }
.elem-type-dot[data-etype="pantalonero"] { background: #805090; }
.elem-type-dot[data-etype="corbatero"]   { background: #907050; }
.elem-type-dot[data-etype="espejo"]      { background: #7090A8; }
.elem-type-dot[data-etype="divider"]     { background: #909090; }
.elem-info-inline { flex: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.elem-name-inline { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elem-pos-inline { font-size: 11px; color: var(--ink-mute); font-feature-settings: 'tnum'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elem-actions { display: flex; gap: 2px; flex-shrink: 0; }
.elem-edit-btn, .elem-delete-btn {
  background: none; border: none; width: 28px; height: 28px;
  border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--ink-faint);
}
.elem-edit-btn svg, .elem-delete-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.elem-edit-btn:active { color: var(--ink); background: var(--bg-soft); }
.elem-delete-btn:active { color: var(--terra); background: rgba(140,58,40,0.08); }
.elem-empty-hint { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-faint); padding: 8px 4px; text-align: center; }
.add-elem-inline-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px dashed var(--line);
  border-radius: var(--radius-sm); color: var(--ink-mute);
  font-size: 12.5px; font-weight: 500; padding: 8px 12px;
  width: 100%; font-family: var(--sans); transition: border-color 0.15s, color 0.15s;
}
.add-elem-inline-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.add-elem-inline-btn:active { border-color: var(--gold); color: var(--ink); background: var(--paper-soft); }

/* ── ADD MODULE CUSTOM BTN ──────────────────────────────────── */
.btn-add-module-custom {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--paper); border: 1.5px dashed var(--line);
  border-radius: var(--radius); color: var(--ink-soft);
  font-size: 14px; font-weight: 500; padding: 16px;
  width: 100%; font-family: var(--sans); transition: all 0.15s; margin-top: 2px;
}
.btn-add-module-custom svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-add-module-custom:active { background: var(--bg-soft); border-color: var(--gold); color: var(--ink); }

/* ── ELEMENT TYPE GRID (modal) ──────────────────────────────── */
.etype-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.etype-grid .etype-btn { font-size: 12px; padding: 10px 8px; gap: 5px; }
.etype-grid .etype-btn svg { width: 32px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4; }
@media (min-width: 480px) { .etype-grid { grid-template-columns: repeat(5, 1fr); } }

/* ── PREVIEW CONTROLS (bar between area and footer) ─────────── */
.preview-controls {
  position: relative; left: auto; bottom: auto;
  background: rgba(244,236,215,0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 12px 20px; flex-shrink: 0; z-index: 3;
}
.open-ctrl-row {
  display: flex; align-items: center; gap: 12px;
  max-width: 500px; margin: 0 auto;
}
.open-label { font-size: 11px; color: var(--ink-mute); font-weight: 500; white-space: nowrap; letter-spacing: 0.06em; flex-shrink: 0; }
.open-slider { flex: 1; }

/* ── PREVIEW INTERACTIVE EDITOR ─────────────────────────────── */
.preview-editor {
  display: none;
  background: rgba(244,236,215,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(190,175,140,0.35);
  padding: 10px 0 6px;
}
.preview-editor.visible { display: block; }

.preview-mod-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.preview-mod-tabs::-webkit-scrollbar { display: none; }
.preview-mod-tab {
  flex-shrink: 0;
  padding: 5px 16px;
  border-radius: 20px;
  background: rgba(26,22,17,0.08);
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  font-family: inherit;
}
.preview-mod-tab.active {
  background: var(--ink);
  color: var(--paper);
}
.preview-mod-tab.applied {
  background: #2C8A4A;
  color: #fff;
}

.preview-tpl-scroll {
  overflow-x: auto;
  scrollbar-width: none;
}
.preview-tpl-scroll::-webkit-scrollbar { display: none; }
.preview-tpl-row {
  display: flex;
  gap: 8px;
  padding: 2px 16px 4px;
  width: max-content;
}
.preview-tpl-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 10px 6px;
  background: var(--paper);
  border: 1.5px solid rgba(190,175,140,0.4);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 60px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: inherit;
}
.preview-tpl-chip:active { background: var(--ink); color: var(--paper); transform: scale(0.96); }
.preview-tpl-chip svg { width: 22px; height: 22px; }
.tpl-chip-icon { display: flex; }
.preview-tpl-chip span:last-child { font-size: 10px; font-weight: 500; white-space: nowrap; color: var(--ink-mute); }
.preview-tpl-chip:active span:last-child { color: var(--paper); }

/* Drag ghost */
.tpl-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(26,22,17,0.35);
  white-space: nowrap;
  opacity: 0.92;
  transform: scale(1.05);
}
.tpl-drag-ghost.on-canvas {
  background: #3B7BF5;
  box-shadow: 0 8px 24px rgba(59,123,245,0.4);
}

/* ── ASANA INLINE SVG ───────────────────────────────────────── */
.asana-logo-svg { color: #f5614e; flex-shrink: 0; }
.asana-link-btn .asana-logo-svg { width: 20px; height: 20px; }
.asana-badge::before { display: none; }
.asana-badge { display: inline-flex; align-items: center; gap: 4px; }
.asana-export-btn { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }

/* ── ASANA ITEMS ────────────────────────────────────────────── */
.asana-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.asana-item:active { background: var(--bg-soft); border-color: var(--gold); }
.asana-item svg { color: var(--terra); flex-shrink: 0; }

/* ── EMPTY STATES ───────────────────────────────────────────── */
.empty-hint { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-faint); text-align: center; padding: 16px; }
.empty-obstacles { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink-faint); padding: 12px 0; }
.empty-state .empty-icon { display: flex; justify-content: center; margin-bottom: 16px; color: var(--ink-faint); }
.empty-state .empty-icon svg { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 1.4; }

/* ── EFF DIMS ───────────────────────────────────────────────── */
.eff-label { display: block; font-size: 10px; font-weight: 700; color: var(--gold-deep); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 10px; }
.eff-dims { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-around; font-family: var(--serif); font-size: 20px; color: var(--ink); }
.eff-dims span em { font-style: normal; color: var(--ink-mute); font-size: 16px; margin-right: 4px; }

/* ── TEST RESULT COLORS ─────────────────────────────────────── */
.test-result.ok  { color: var(--green-ok); font-style: italic; font-family: var(--serif); }
.test-result.error { color: var(--terra); font-style: italic; font-family: var(--serif); }

/* Always show delete btn on touch devices */
@media (pointer: coarse) { .card-delete-btn { opacity: 1; } }

/* Wider tablet adjustments */
@media (min-width: 768px) {
  .etype-grid { grid-template-columns: repeat(5, 1fr); }
  .shape-btn { padding: 14px 12px 12px; font-size: 13px; }
}


/* ════════════════════════════════════════════════════════════
   EDITOR v3.0 — Layout, panels, canvas, palette
   ════════════════════════════════════════════════════════════ */

/* ── EDITOR TOP BAR ─────────────────────────────────────────── */
.ed-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 52px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 8px rgba(26,22,17,0.06);
}
.ed-back-btn {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); background: none; border: none;
  padding: 6px 10px; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.ed-back-btn:hover { background: var(--bg-soft); color: var(--ink); }
.ed-project-name {
  flex: 1; font-family: var(--serif); font-size: 17px;
  font-weight: 400; color: var(--ink); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: transparent; border: 1px solid transparent;
  border-radius: 8px; padding: 4px 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.ed-project-name:hover { background: rgba(0,0,0,0.04); border-color: var(--line); }
.ed-project-name.open { background: rgba(0,0,0,0.06); border-color: var(--line); }
.ed-project-name-chev { opacity: 0.55; transition: transform 0.2s; flex-shrink: 0; }
.ed-project-name.open .ed-project-name-chev { transform: rotate(180deg); }
.ed-project-switcher {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  padding: 6px; z-index: 90;
  -webkit-overflow-scrolling: touch;
}
.ed-project-switcher.hidden { display: none; }
.ed-project-switcher-group {
  margin-top: 6px;
}
.ed-project-switcher-group:first-child { margin-top: 0; }
.ed-project-switcher-group-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute); padding: 8px 10px 4px; font-weight: 600;
}
.ed-project-switcher-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px;
  cursor: pointer; user-select: none;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  transition: background 0.12s;
}
.ed-project-switcher-item:hover { background: rgba(184,153,104,0.10); }
.ed-project-switcher-item.active { background: rgba(184,153,104,0.16); color: var(--gold-deep); font-weight: 600; cursor: default; }
.ed-project-switcher-item .pn-tipo {
  font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase;
  background: rgba(184,153,104,0.14); color: var(--ink-mute);
  padding: 2px 7px; border-radius: 999px; flex-shrink: 0; font-weight: 600;
}
.ed-project-switcher-item .pn-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-project-switcher-item .pn-lock {
  font-size: 10px; color: var(--error); flex-shrink: 0;
}
.ed-project-switcher-empty {
  padding: 14px 12px; font-size: 13px; color: var(--ink-mute); text-align: center;
}
/* Caja de búsqueda sticky en la parte superior del desplegable */
.ed-switcher-search-wrap {
  position: sticky; top: 0; z-index: 2;
  background: var(--paper);
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--line);
  margin: -6px -6px 4px;
}
.ed-switcher-search-wrap input {
  width: 100%; box-sizing: border-box;
  font-family: var(--sans); font-size: 14px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--ink); outline: none;
}
.ed-switcher-search-wrap input:focus {
  border-color: var(--gold);
  background: var(--paper);
}
/* Carpeta de owner (master ve varias) */
.ed-sw-owner { margin-top: 4px; }
.ed-sw-owner:first-of-type { margin-top: 0; }
.ed-sw-owner-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; cursor: pointer;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  user-select: none;
  transition: background 0.12s;
}
.ed-sw-owner-header:hover { background: rgba(184,153,104,0.10); }
.ed-sw-owner.mine .ed-sw-owner-header {
  background: rgba(184,153,104,0.14);
  border-color: rgba(184,153,104,0.30);
}
.ed-sw-owner.mine .ed-sw-owner-header:hover { background: rgba(184,153,104,0.20); }
.ed-sw-caret {
  transition: transform 0.18s; opacity: 0.55; flex-shrink: 0;
  transform: rotate(-90deg);
}
.ed-sw-caret.open { transform: rotate(0deg); }
.ed-sw-owner-icon { font-size: 14px; flex-shrink: 0; }
.ed-sw-owner-name { flex: 1; font: 600 13px var(--sans); color: var(--ink); }
.ed-sw-owner-count {
  font: 600 11px var(--sans); color: var(--ink-mute);
  background: rgba(184,153,104,0.14);
  padding: 1px 8px; border-radius: 999px;
}
.ed-sw-owner-body {
  margin-top: 4px;
  padding-left: 14px;
  border-left: 2px solid rgba(184,153,104,0.15);
  margin-left: 12px;
  padding-bottom: 2px;
}
.ed-sw-owner.collapsed .ed-sw-owner-body { display: none; }
/* Sub-grupo por vivienda */
.ed-sw-viv { margin-top: 4px; }
.ed-sw-viv:first-child { margin-top: 0; }
.ed-sw-viv-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer;
  border-radius: 6px;
  user-select: none;
  transition: background 0.12s;
}
.ed-sw-viv-header:hover { background: rgba(184,153,104,0.08); }
.ed-sw-viv-icon { font-size: 13px; flex-shrink: 0; }
.ed-sw-viv-name { flex: 1; font: 500 12px var(--sans); color: var(--ink); }
.ed-sw-viv-count {
  font: 600 10px var(--sans); color: var(--ink-mute);
  background: rgba(184,153,104,0.10);
  padding: 1px 7px; border-radius: 999px;
}
.ed-sw-viv-body { padding-left: 4px; padding-top: 2px; }
.ed-sw-viv.collapsed .ed-sw-viv-body { display: none; }
/* v465.341 — nivel TIENDA (como en Proyectos): tienda → domicilio → armarios */
.ed-sw-tie { margin-top: 4px; }
.ed-sw-tie:first-child { margin-top: 0; }
.ed-sw-tie-header {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer;
  border-radius: 7px; user-select: none;
  background: rgba(184,153,104,0.07);
  transition: background 0.12s;
}
.ed-sw-tie-header:hover { background: rgba(184,153,104,0.14); }
.ed-sw-tie-icon { font-size: 13px; flex-shrink: 0; }
.ed-sw-tie-name { flex: 1; font: 600 12.5px var(--sans); color: var(--ink); }
.ed-sw-tie-count {
  font: 600 10px var(--sans); color: var(--ink-mute);
  background: rgba(184,153,104,0.14);
  padding: 1px 7px; border-radius: 999px;
}
.ed-sw-tie-body { padding-left: 12px; margin-left: 8px; border-left: 2px solid rgba(184,153,104,0.12); padding-top: 2px; }
.ed-sw-tie.collapsed .ed-sw-tie-body { display: none; }
/* v465.341 (Juan): con el desplegable de armarios abierto, las cotas de Medir y las notas del Postit
   (van pegadas al body por encima de todo) se esconden; al cerrarlo vuelven. */
body:has(#ed-project-switcher:not(.hidden)) .measure-label,
body:has(#ed-project-switcher:not(.hidden)) .measure-pin,
body:has(#ed-project-switcher:not(.hidden)) .com-pin,
body:has(#ed-project-switcher:not(.hidden)) .com-bubble { visibility: hidden !important; }
/* v465.377 (Juan, captura del «Exportar plano técnico» abierto desde Acciones): lo mismo con
   CUALQUIER modal abierto — las cotas van a z-index 950 y los modales a 100, así que se pintaban
   encima. MAESTRO no: deja girar el armario con él abierto (v465.328). */
body:has(.modal:not(.hidden):not(#modal-maestro)) .measure-label,
body:has(.modal:not(.hidden):not(#modal-maestro)) .measure-pin,
body:has(.modal:not(.hidden):not(#modal-maestro)) .com-pin,
body:has(.modal:not(.hidden):not(#modal-maestro)) .com-bubble { visibility: hidden !important; }

/* Tooltip flotante con preview 2D del armario en hover */
.project-preview-tooltip {
  position: fixed;
  z-index: 10000;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.20), 0 3px 10px rgba(0,0,0,0.08);
  padding: 6px 6px 4px;
  pointer-events: none;     /* el cursor pasa a través, no interfiere */
  transition: opacity 0.12s;
  opacity: 1;
}
.project-preview-tooltip.hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.project-preview-tooltip canvas {
  display: block; border-radius: 6px;
  background: #FBF6E9;
  /* v304: tamaño reducido a la mitad (era 360×260 → 180×130) */
  width: 180px; height: 130px;
}
.project-preview-tooltip .project-preview-name {
  font: 600 12px/1.2 var(--serif);
  color: var(--ink);
  text-align: center;
  margin-top: 4px;
  padding: 0 4px;
  max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* v304: ya NO se oculta en pointer:coarse — la queremos en iPad con Apple
   Pencil hover. La JS controla la visibilidad con .hidden. */

/* v427: tooltip pequeño con el title del icono cuando el lápiz hover sobre
   un botón de acción de la card (delete/share/rename/move/copy). Safari
   iPad no renderiza el title nativo con Apple Pencil hover, así que lo
   construimos a mano desde JS (`showIconHoverTip`). */
.icon-hover-tip {
  position: fixed;
  z-index: 10001;
  background: #2A2826;
  color: #FBF6E9;
  font: 500 12px/1.3 var(--sans);
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  pointer-events: none;
  max-width: 240px;
  white-space: normal;
  text-align: center;
  transition: opacity 0.10s;
  opacity: 0.96;
}
.icon-hover-tip.hidden { opacity: 0; visibility: hidden; }
.ed-tools { display: flex; align-items: center; gap: 4px; }
.ed-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
/* v459.335/336: en el iPhone la barra superior no cabía y había que
   desplazarla. Ocultamos Ropa, el indicador "Guardado" y el botón MAESTRO para
   que quepa sin scroll horizontal.
   El corte es por el LADO CORTO de la pantalla: el iPhone tiene el lado corto
   <=430px (vertical: ancho pequeño; horizontal: alto pequeño), mientras que el
   iPad lo tiene >=768px. Así cubrimos el iPhone en las dos orientaciones sin
   tocar el iPad. (Antes solo miraba max-width y en horizontal el iPhone es
   >768px, por eso seguía viéndose "Guardado".) */
@media (max-width: 767px), (max-height: 500px) {
  #btn-ed-ropa,
  .conn-indicator-ed,
  #btn-ed-maestro { display: none !important; }
}
/* ── v465.212: SI LA BARRA NO CABE, LOS CHIPS SE QUEDAN CON EL ICONO ──────
   MEDIDO, no estimado: con los rótulos puestos la barra acaba en 1280 px (un
   maestro, que además ve «Medir» cara-a-cara), así que en un iPad de 11" o de
   10,9" (1180 px CSS) el último chip —«Acciones»— quedaba FUERA de la pantalla.
   Y la barra es `position:fixed` con `nowrap`: no hay scroll horizontal (medido,
   0 px), o sea que lo que sobra NO se alcanza por ningún sitio. Sin rótulos la
   barra baja a ~1050 px y entra con holgura.
   Esto es seguro AHORA y no lo era antes: desde la v465.202/211 cada icono tiene
   su tarjeta explicando lo que hace, y con el lápiz del iPad sale flotando. Sin
   esas tarjetas, iconos pelados serían adivinar.
   ⚠️ POR ENCIMA DE 1280 px NO CAMBIA NADA — el iPad Pro de 12,9" (1366), que es
   donde hoy sí cabe, se queda exactamente como está. Toca sólo las pantallas
   donde hoy está roto. */
@media (max-width: 1280px) {
  .ed-topbar .ed-tools .ed-tool { font-size: 0; gap: 0; }
  /* ⚠️ EL CHIP «MODO» SE QUEDA CON SU RÓTULO MIENTRAS HAY UN MODO PUESTO, y no es
     un capricho: es el único cuyo texto no es un nombre fijo sino un ESTADO
     («Veta», «Medir pieza»). Sin él se vería que hay algo activo pero no QUÉ, que
     es la mitad del aviso. Cuesta ~50 px y sólo mientras dura el modo. */
  .ed-topbar .ed-tools #btn-ed-modo.active { font-size: 12px; gap: 5px; }
  /* Y la LLAVE DEL OJO se queda con su rótulo: «Ver» / «Ocultar» es lo que dice qué
     va a pasar al pulsarla, y con el ojo pelado habría que adivinar si el icono
     enseña el estado o la acción. Cuesta ~45 px (v465.223). */
  .ed-topbar .ed-tools #btn-ed-ojo { font-size: 12px; gap: 5px; }
  .ed-topbar .ed-tema-txt { display: none; }
}
.ed-tool {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--ink-mute); background: transparent; border: none;
  padding: 5px 9px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.ed-tool svg { flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-tool:hover { background: var(--bg-soft); color: var(--ink); }
/* v454.2: trazo fino blanco bajo el botón activo (inset box-shadow, no
   afecta al layout). Ayuda a distinguir de un vistazo qué herramientas
   están activas (Medir pieza, Cotas, Solid-Color, Puertas, Ropa…). */
.ed-tool.active {
  color: var(--gold-deep);
  background: rgba(184,153,104,0.12);
  box-shadow: inset 0 -2px 0 #FFFFFF;
}

/* v452/v453: etiqueta flotante de cota de medición. Se posiciona en
   pantalla sobre el canvas 3D (coordenadas fixed). v453: fondo blanco
   con borde ámbar — más legible sobre cualquier color del armario. */
.measure-label {
  position: fixed; pointer-events: none; z-index: 950;
  background: #FFFFFF; color: #1A1A1A;
  font: 700 14px/1 var(--sans);
  padding: 4px 8px; border-radius: 4px;
  border: 1.5px solid #FFC107;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  white-space: nowrap;
}
/* Variante para etiquetas Ancho/Alto/Fondo de pieza. */
.measure-label-axis {
  font: 600 12px/1 var(--sans);
  color: #444;
  padding: 2px 5px;
  border-color: rgba(255,193,7,0.7);
  background: rgba(255,255,255,0.92);
}
/* v465.119 — etiqueta ÚNICA de «Medir pieza», pegada al centro del tablero.
   Sustituye a las tres sueltas de Ancho/Alto/Fondo, que con la trasera partida se
   agolpaban con las de la pieza de al lado (Juan). Va algo más marcada que las de
   eje porque ahora es la única que hay. */
/* v465.120 — marca del punto elegido al medir una pieza. ROMBO (no círculo) y en
   el ámbar de las cotas, para no confundirla con la chincheta de COMENTARIO, que
   es un círculo dorado con número. */
.measure-pin {
  position: fixed; pointer-events: none; z-index: 953;
  width: 11px; height: 11px;
  background: #FFC107; border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  transform: translate(-50%, -50%) rotate(45deg);
}
.measure-label-pieza {
  font: 700 13px/1 var(--sans);
  color: #1A1A1A;
  padding: 4px 8px;
  border-color: #FFC107;
  background: rgba(255,255,255,0.96);
  /* v465.121 — la etiqueta va ENCIMA del rombo, no sobre él. Con el
     `translate(-50%,-50%)` de `.measure-label` las dos caían en el MISMO punto y
     la etiqueta (blanca, y por delante) se tragaba el rombo entero: por eso no se
     veía. Ahora se levanta su propio alto + 12 px, como la burbuja de un
     comentario sobre su chincheta. */
  transform: translate(-50%, calc(-100% - 12px));
}
/* iPad: +2pt adicionales sobre la base. */
@media (hover: none) and (pointer: coarse) {
  .measure-label       { font-size: 16px; }
  .measure-label-axis  { font-size: 14px; }
  .measure-label-pieza { font-size: 15px; }
}
.canvas-measure-mode { cursor: crosshair !important; }

/* v455.16: zona peligrosa — acordeón colapsado por defecto que contiene
   acciones irreversibles (borrar todo). Sólo el usuario juan la ve. */
.danger-zone {
  margin-top: 16px;
  border: 1px solid #C00;
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(204,0,0,0.04);
}
.danger-zone summary {
  font-weight: 600; color: #C00;
  cursor: pointer; padding: 4px 0;
  list-style: none;
  user-select: none;
}
.danger-zone summary::-webkit-details-marker { display: none; }
.danger-zone summary::before { content: '▸ '; display: inline-block; transition: transform 0.15s; }
.danger-zone[open] summary::before { transform: rotate(90deg); }
.danger-zone[open] summary { margin-bottom: 8px; }
.danger-zone-body { padding-top: 8px; }
.danger-zone-warn { font-size: 13px; color: #555; margin: 0 0 12px; line-height: 1.4; }

/* v455: flechas de edición de frente correderas. Posicionadas en
   pantalla sobre el canvas 3D mediante proyección de los midpoints
   de los bordes en mundo. Tap → extiende el borde al siguiente snap. */
.frente-edge-arrow {
  position: fixed; z-index: 940;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #FFC107; color: #1A1A1A;
  border: 2px solid #1A1A1A; border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: transform 0.12s ease-out, background 0.12s;
  padding: 0;
}
.frente-edge-arrow:hover, .frente-edge-arrow:active {
  background: #FFB300;
  transform: translate(-50%, -50%) scale(1.1);
}
/* v455.2: las inward son más pequeñas y azules para distinguirlas de
   las outward (amarillas) en el mismo lado. */
.frente-edge-arrow-in {
  background: #3B82F6; color: #FFFFFF;
  width: 32px; height: 32px;
  border-color: #1E3A8A;
}
.frente-edge-arrow-in svg { width: 16px; height: 16px; }
.frente-edge-arrow-in:hover, .frente-edge-arrow-in:active {
  background: #2563EB;
}
.ed-tool-accent {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--paper); background: var(--ink);
  border: none; padding: 6px 12px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.15s;
}
.ed-tool-accent svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ed-tool-accent:hover { background: var(--ink-soft); }
/* v465.61: contador del tope de exportaciones de la prueba, debajo de los
   botones que gastan (despiece y las tres de 3D). */
.ed-exp-left {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  color: var(--ink-mute); padding: 2px 4px 4px; line-height: 1.35;
}
.ed-exp-left.agotado { color: #B4552E; }
/* v465.61: chips de sector en Ajustes ("A qué me dedico"). */
.sector-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sector-chip {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); padding: 8px 14px;
  border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.sector-chip:hover { background: var(--ink-soft); color: var(--paper); }
.sector-chip.sel { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* v465.68: chips de MODO de hoja en el modal del plano técnico. Mismo aspecto
   que los de sector; van aparte porque aquí el estado activo se llama .active
   (lo pone el handler del modal) y allí .sel. */
.pdf-modo {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); padding: 8px 14px;
  border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.pdf-modo:hover { background: var(--ink-soft); color: var(--paper); }
.pdf-modo.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ed-tool-asana {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: #fff; background: #f06a35;
  border: none; padding: 6px 10px; border-radius: var(--radius-sm);
  cursor: pointer; transition: opacity 0.15s;
}
.ed-tool-asana:hover { opacity: 0.88; }

/* ── MAIN LAYOUT ─────────────────────────────────────────────── */
#screen-editor {
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
.ed-layout {
  display: flex; flex: 1;
  margin-top: 52px;
  overflow: hidden;
  height: calc(100vh - 52px);
}

/* ── LEFT PANEL ──────────────────────────────────────────────── */
/* ⚠️ EL ANCHO DE LOS PANELES, EN UN SOLO SITIO (v465.190).
   `.ed-panel-tab-left/right` —la pestaña de plegar, que flota en el canto— se
   coloca con este MISMO número. Estaban escritos por separado, y al pasar el
   panel izquierdo de 230 a 268 la pestaña se quedó en 230: o sea, 38 px DENTRO
   del panel, encima del icono del módulo. Con la variable no puede volver a
   pasar: se cambia el ancho y la pestaña va detrás. */
/* v465.192 — el panel de elementos, 1 cm más ancho (Juan: «se ve muy pequeño
   todo»). Los chips crecen con él: de 72 a 92 px, y su dibujo de 48 a 60. El 3D
   pierde esos 38 px — en apaisado se queda en 694 de 1180. */
/* v465.223 — la columna DERECHA pasa a medir lo MISMO que la izquierda (218 → 268).
   Adrián (26/09): «la barra derecha tiene que tener 1 cm más ancha, se hizo más
   ancha hace dos días pero hay que hacerla como la de la izquierda de ancha, con
   todo lo que nace de ahí, tanto el modal de edición de puertas como el modal que
   hay ahora». O sea que la referencia es la izquierda, no el centímetro: por eso el
   valor se copia de `--ed-left-w` en vez de escribir otro número que se despegue.
   El modal de edición va ANCLADO dentro de la columna, así que crece con ella sola;
   el flotante (`.floating-panel`) se iguala a mano más abajo. */
#screen-editor { --ed-left-w: 268px; --ed-right-w: var(--ed-left-w); }
.ed-left {
  /* v465.190 — 230 → 268 (Juan, 23/09): con 230 la línea de resumen de las
     holguras se partía en dos renglones. El 3D pierde 38 px, un 3 % en apaisado. */
  width: var(--ed-left-w); min-width: 236px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.ed-left::-webkit-scrollbar { width: 4px; }
.ed-left::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

/* ── RIGHT PANEL ─────────────────────────────────────────────── */
.ed-right {
  /* v465.223: mismo mínimo que la izquierda — si no, al estrecharse la ventana la
     derecha se encogería antes y volvería a quedar más angosta que ella. */
  width: var(--ed-right-w); min-width: 236px;
  background: var(--paper);
  border-left: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  flex-shrink: 0;
  /* v459.658: hueco extra abajo para que el badge de versión (esquina inf-dcha)
     no tape la última pieza (Chaflán) al final del scroll. */
  padding-bottom: 54px;
}
.ed-right::-webkit-scrollbar { width: 4px; }
.ed-right::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
/* v465.223: el rótulo «ELEMENTOS» se retiró del HTML — su hueco lo ocupa el chip
   «Editar puertas colocadas» (Adrián: «ya se entiende perfectamente los chips de
   abajo y ganamos ese espacio»). La regla se va con él: un selector que no casa con
   nada es una trampa para quien venga a leerlo. */

/* ── CANVAS WRAP ─────────────────────────────────────────────── */
.ed-canvas-wrap {
  flex: 1; position: relative;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; min-width: 0;
}
.ed-canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
  /* v459.42: long-press en iPad NO debe abrir el menú nativo de iOS
     (Copiar / Consultar / Traducir) sobre el visor 3D — rompe el popup
     de "Dirección de la veta" y otros menús de la app. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
          user-select: none;
  /* v465.168: TODO gesto sobre el 3D es nuestro o de los OrbitControls, nunca
     del navegador. Los OrbitControls ya hacían `preventDefault()` en su
     `touchstart`, pero SÓLO mientras están habilitados — y el editor los
     deshabilita en cuanto el dedo toca una pieza (v463.92, para que los
     primeros píxeles no giren la cámara). En esa ventana no lo impedía nadie:
     el navegador se quedaba el gesto, mandaba `pointercancel` a media faena y
     el segundo dedo de una pinza ya no llegaba como `pointerdown`. Medido en
     el banco de la pinza, que sin esto no podía ni reproducir el caso. */
  touch-action: none;
}
.ed-overlay { pointer-events: none; z-index: 10; }

/* placeholder */
.ed-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; color: var(--ink-faint);
  font-family: var(--serif); font-size: 16px; text-align: center;
  pointer-events: none; z-index: 5;
}
.ed-placeholder svg { opacity: 0.3; }
.ed-placeholder p { opacity: 0.55; line-height: 1.6; }
.ed-placeholder.hidden { display: none; }

/* fit button */
/* ⚠️ v465.246 — TODOS LOS ICONOS DEL LIENZO VAN EN UNA FILA ABAJO A LA DERECHA.
   Lo mandó JUAN el 27/09 sobre su propio 3D: la marca Confiwood se va al extremo
   IZQUIERDO (left:14) y «los dos iconos que había los pasamos a la derecha».
   Antes, «centrar» y «planta» flotaban a media altura del canto derecho
   (bottom 116 y 158) y «tabiques» y «luz» estaban abajo a la IZQUIERDA, con la
   marca detrás de ellos.

   EL REPARTO, de derecha a izquierda y con 10 px de aire — si añades otro icono,
   el siguiente hueco es `right: 354`:
     suelo 14 · fondo 66 · sombras 118   (círculos de 42, con su `right` INLINE
                                          en `app.js`: no se tocan desde aquí)
     luz 170 · tabiques 216 · centrar 262 · planta 308   (cuadrados de 36)
   Los cuadrados van a `bottom: 17` para que su centro case con el de los
   círculos, que son 6 px más altos. */
.ed-fit-btn {
  position: absolute; bottom: 17px; right: 262px; z-index: 20;
  width: 36px; height: 36px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-2);
  transition: background 0.15s;
}
.ed-fit-btn svg { stroke: var(--ink-mute); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.ed-fit-btn:hover { background: var(--bg-soft); }

/* v459.5: botón vista superior. v465.246: a la fila de abajo, junto a «centrar». */
.ed-top-btn {
  position: absolute; bottom: 17px; right: 308px; z-index: 20;
  width: 36px; height: 36px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-2);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ed-top-btn svg { stroke: var(--ink-mute); fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.ed-top-btn:hover { background: var(--bg-soft); }
/* ⚠️ v465.275 — ACTIVO en oro MACIZO con icono blanco, como «luz» y «tabiques».
   Juan (28/09): «no se ve el icono». Iba con fondo TRANSLÚCIDO (oro al 12 %) y
   trazo oro: flota sobre el 3D, y en la vista de planta lo que queda debajo es
   el suelo de madera, del mismo tono — el botón desaparecía entero, borde e
   icono. No lo vuelvas a un fondo translúcido. */
.ed-top-btn.active { border-color: var(--gold, #b89968); background: var(--gold, #b89968); }
.ed-top-btn.active svg { stroke: #fff; }

/* v459.6: tabs A/B/C en el panel de Holguras (solo L/U). */
.hol-mod-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
  padding: 2px; background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.hol-mod-tab {
  flex: 1; font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--ink-mute); background: transparent;
  border: none; border-radius: 4px;
  padding: 5px 0; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hol-mod-tab:hover { color: var(--ink); }
.hol-mod-tab.active { background: var(--paper); color: var(--gold); box-shadow: var(--shadow-1); }

/* v459.7: modo de junta del lateral (con/sin costado). */
.junta-mode-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding: 6px 8px;
  background: var(--bg-soft); border-radius: var(--radius-sm);
}
.junta-mode-label {
  font-family: var(--sans); font-size: 11px; color: var(--ink-mute); flex: 1;
}
.junta-mode-tabs { display: flex; gap: 3px; }
.junta-mode-tab {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  color: var(--ink-mute); background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 9px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.junta-mode-tab:hover { color: var(--ink); }
.junta-mode-tab.active { background: var(--gold); color: var(--paper); border-color: var(--gold); }

/* v456.72: botón "Entorno del armario". v465.246: a la fila de abajo a la DERECHA
   (antes left:14). La esquina izquierda se deja libre para la marca Confiwood. */
.ed-entorno-btn {
  position: absolute; bottom: 17px; right: 216px; z-index: 20;
  width: 36px; height: 36px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-2);
  transition: background 0.15s, border-color 0.15s;
}
.ed-entorno-btn svg { stroke: var(--ink-mute); fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.ed-entorno-btn:hover { background: var(--bg-soft); }
.ed-entorno-btn.active { background: var(--gold, #b89968); border-color: var(--gold, #b89968); }
.ed-entorno-btn.active svg { stroke: #fff; }

/* v456.92: botón de luminosidad — al lado del de entorno. Mismo estilo.
   v465.246: a la fila de abajo a la DERECHA (antes left:60). */
.ed-lighting-btn {
  position: absolute; bottom: 17px; right: 170px; z-index: 20;
  width: 36px; height: 36px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-2);
  transition: background 0.15s, border-color 0.15s;
}
.ed-lighting-btn svg { stroke: var(--ink-mute); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-lighting-btn:hover { background: var(--bg-soft); }
.ed-lighting-btn.active { background: var(--gold, #b89968); border-color: var(--gold, #b89968); }
.ed-lighting-btn.active svg { stroke: #fff; }

/* ⚠️ v465.246 — CON LA BARRA DE ELEMENTOS PUESTA, LA FILA DE LA DERECHA SE
   ESCONDE. Juan: «cuando salga dicha barra, se ocultarán los iconos de la
   derecha menos Confiwood» — la marca se queda porque está al otro extremo.
   La clase la pone un observer sobre la barra (`initBarraIconos` en `app.js`),
   no cada sitio que la enseña.
   ⚠️ EL `!important` HACE FALTA: sombras, fondo y suelo se crean desde JS con
   `display:flex` EN LÍNEA, y un estilo en línea gana a la hoja (la trampa de la
   v465.207). Los otros cuatro no lo necesitan, pero van juntos para que no haya
   dos criterios. */
#ed-canvas-wrap.barra-puesta #ed-top-btn,
#ed-canvas-wrap.barra-puesta #ed-fit-btn,
#ed-canvas-wrap.barra-puesta #ed-entorno-btn,
#ed-canvas-wrap.barra-puesta #ed-lighting-btn,
#ed-canvas-wrap.barra-puesta #sombras-switcher,
#ed-canvas-wrap.barra-puesta #bg-switcher,
#ed-canvas-wrap.barra-puesta #floor-switcher { display: none !important; }

.lighting-popup {
  /* v459.195: popup pegado al borde y más compacto — antes left:60px +
     min-width 260px se metía mucho en la zona del 3D.
     ⚠️ v465.246: al irse su botón a la fila de la DERECHA, el popup se va con
     él. Si se quedara a la izquierda se abriría en la otra punta del lienzo.
     El `dock-left` del iPad no cambia: lleva `left:0 !important` + `width`, que
     en LTR gana sobre este `right`. */
  position: absolute; bottom: 60px; right: 12px; left: auto; z-index: 30;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  padding: 10px 10px 9px; min-width: 200px; max-width: 220px;
  font-family: var(--sans); font-size: 12px;
}
.lighting-popup.hidden { display: none; }
.lighting-popup-head {
  /* v459.196: cabecera arrastrable — cursor move y agarre visual. */
  font-size: 12px; font-weight: 600; color: var(--ink);
  margin-bottom: 8px; cursor: move; user-select: none;
  display: flex; align-items: center; gap: 6px;
}
.lighting-popup-head::before {
  content: '⠿'; font-size: 14px; color: var(--gold-deep, #8a6e3f);
  opacity: 0.75;
}
.lighting-popup-body {
  display: flex; flex-direction: column; gap: 8px;
}
.lighting-row {
  display: flex; align-items: center; gap: 10px;
}
.lighting-row input[type="range"] {
  flex: 1; accent-color: var(--gold, #b89968); cursor: pointer;
}
.lighting-icon-sun {
  font-size: 18px; line-height: 1; color: var(--gold-deep, #8a6e3f);
  width: 20px; text-align: center;
}
.lighting-value {
  font: 600 12px var(--sans); color: var(--ink);
  min-width: 44px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.lighting-row-tip {
  font-size: 11px; color: var(--ink-faint); line-height: 1.4;
  font-style: italic;
}
.lighting-reset-btn {
  margin-top: 6px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; cursor: pointer;
  align-self: flex-end;
}
.lighting-reset-btn:hover { background: rgba(184,153,104,0.08); }

/* v459.976: variante ANCLADA al banner izquierdo (iPad). Entorno y Luminosidad, al
   abrirse, ocupan el banner izquierdo como panel fijo — igual que la barra de puertas —
   en vez de flotar. El !important anula la posición flotante/arrastrada (inline styles
   del drag de Luminosidad). El banner de configuración se colapsa vía #ed-left.collapsed. */
.ent-popup.dock-left,
.lighting-popup.dock-left {
  position: fixed !important; top: 0 !important; left: 0 !important; bottom: auto !important;
  height: 100% !important; max-height: 100% !important;
  width: 320px !important; max-width: 86vw !important; min-width: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 52px 18px 22px !important;
  overflow-y: auto; z-index: 320;
  box-shadow: 6px 0 26px rgba(0,0,0,0.30);
}
.ent-popup.dock-left .ent-popup-head,
.lighting-popup.dock-left .lighting-popup-head {
  font-size: 15px; margin-bottom: 14px; cursor: default;
}
/* En modo anclado la cabecera de Luminosidad ya no se arrastra → sin el asa ⠿. */
.lighting-popup.dock-left .lighting-popup-head::before { content: none; }
/* Chips y controles más grandes y aireados en el panel ancho (como el de puertas). */
.ent-popup.dock-left .ent-row { gap: 4px; margin-bottom: 4px; }
.ent-popup.dock-left .ent-btn { min-height: 46px; font-size: 12px; }
.ent-popup.dock-left .ent-row-label,
.lighting-popup.dock-left .lighting-row-tip { font-size: 11px; }
.lighting-popup.dock-left .lighting-popup-body { gap: 14px; }

/* Botón ✕ de cierre: solo visible cuando el panel está anclado (el botón flotante
   que lo abre queda tapado por el panel). */
.pop-dock-close { display: none; }
.ent-popup.dock-left .pop-dock-close,
.lighting-popup.dock-left .pop-dock-close {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px; font-size: 16px; line-height: 1;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 9px; color: var(--ink); cursor: pointer;
}
.ent-popup.dock-left .pop-dock-close:hover,
.lighting-popup.dock-left .pop-dock-close:hover { background: rgba(184,153,104,0.10); }

/* ── v465.289: TIRAS LED en el panel de Luminosidad y el SOL en su botón ─────── */
.led-sec {
  margin-top: 10px; border-top: 1px solid rgba(184,153,104,0.25); padding-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.led-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.led-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 30px; padding: 0 12px; border-radius: 15px;
  font: 700 12px var(--sans); letter-spacing: .06em; color: #1c1c1c;
  background: #FFFFFF; border: 1px solid var(--line);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18), 0 1px 4px rgba(0,0,0,0.18);
  cursor: grab; user-select: none; touch-action: none;
}
.led-chip:active { cursor: grabbing; }
.led-chip-ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  transform: translate(-50%, -130%) scale(1.1); opacity: .95; white-space: nowrap;
}
/* v465.290: encima de una pieza, el chip dice cuál y se pone en oro. */
.led-chip-ghost.sobre { background: #FFE27A; border-color: #B89968; }
.led-lista { display: flex; flex-direction: column; gap: 4px; }
.led-vacio { font-size: 11px; opacity: .6; }
.led-cuerpo { font-size: 11px; font-weight: 600; opacity: .7; margin-top: 4px; }
.led-fila {
  border: 1px solid transparent; border-radius: 8px; padding: 4px 6px;
  font-size: 12px;
}
.led-fila.on { border-color: var(--line); background: var(--bg-soft); }
.led-fila.late { animation: dimFaltaLatido 1.3s ease-out 2; border-color: var(--gold); }
.led-fila-t { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.led-fila-t span:first-of-type { flex: 1; }
.led-largo { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
.led-campos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px;
}
.led-campos label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; opacity: .85; }
.led-campos input {
  width: 100%; min-width: 0; box-sizing: border-box; font: 600 12px var(--sans);
  padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums;
}
.led-nota { grid-column: 1 / -1; font-size: 10.5px; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .led-fila.late { animation: none; } }
.sol-pop {
  position: absolute; z-index: 60; min-width: 220px; max-width: 250px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18); padding: 10px;
  font-family: var(--sans); font-size: 12px;
  display: flex; flex-direction: column;
}
.sol-pop.hidden { display: none; }
#ed-canvas-wrap.barra-puesta #sol-pop { display: none !important; }

/* v465.246: a la derecha, con su botón (ver la nota de `.lighting-popup`). */
.ent-popup {
  position: absolute; bottom: 60px; right: 14px; left: auto; z-index: 30;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  padding: 10px; min-width: 220px; max-width: 240px;
  font-family: var(--sans);
}
.ent-popup.hidden { display: none; }
.ent-popup-head {
  font-size: 11.5px; font-weight: 600; color: var(--ink);
  margin-bottom: 6px;
}
.ent-popup-body { display: flex; flex-direction: column; gap: 6px; }
.ent-row { display: flex; flex-direction: column; gap: 2px; }
.ent-row-label {
  font-size: 9.5px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ent-row-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; }
.ent-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 4px 2px; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-align: center; line-height: 1.1;
}
.ent-btn:hover { background: rgba(184,153,104,0.08); }
.ent-btn.active { background: var(--gold, #b89968); color: #fff; border-color: var(--gold, #b89968); }
.ent-btn-icon {
  width: 24px; height: 16px;
  color: var(--ink-mute);
  pointer-events: none;
}
.ent-btn.active .ent-btn-icon { color: #fff; }
.ent-help {
  font-size: 9.5px; color: var(--ink-faint);
  margin-top: 2px; font-style: italic; line-height: 1.35;
}
/* v459.413: modal del chaflán de esquina — secciones por esquina izq/der */
.ce-corner { border: 1px solid var(--line, rgba(0,0,0,.14)); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.ce-corner-head { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; margin-bottom: 8px; }
.ce-corner-head input { width: 18px; height: 18px; margin: 0; cursor: pointer; flex: 0 0 auto; }
.ce-corner-head svg { flex: 0 0 auto; }
.ce-corner.off .form-row { opacity: .35; pointer-events: none; }

/* v459.410: toggle "ocultar tabiques y paredes" */
.ent-row-toggle { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line, rgba(0,0,0,.12)); }
.ent-toggle-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; cursor: pointer; user-select: none;
}
.ent-toggle-label input { width: 16px; height: 16px; cursor: pointer; margin: 0; }

/* v463.85: el chip «Pared» se retira de la UI — su papel lo hace ahora un TABIQUE con
   más fondo que el armario (fila «Fondo del tabique»). Se esconde en vez de borrarlo
   del HTML para que los proyectos antiguos guardados con 'pared' sigan funcionando
   mientras se migran. Las dos opciones que quedan reparten el ancho a medias. */
.ent-row-btns .ent-btn[data-tipo="pared"] { display: none; }
.ent-row-btns { grid-template-columns: 1fr 1fr; }

/* Fila de fondo del tabique (una por lado). Solo se muestra con «Tabique» elegido:
   el JS le pone/quita la clase .on en refreshActive. */
.ent-fondo-row { display: none; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }


/* v465.1: fila de PUERTA DE PASO en el modal del entorno. */
.ent-pta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ent-pta-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2, #3f382e); cursor: pointer; }
.ent-pta-hoja { font: 600 12.5px var(--sans, sans-serif); padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line, #E9DFCE); background: #fff; }
.ent-pta-lbl, .ent-pta-mm { font-size: 12px; color: var(--muted, #6E6355); }
.ent-pta-inp { width: 64px; font: 600 12.5px var(--sans, sans-serif); padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line, #E9DFCE); text-align: right; }
.ent-pta-mano { font: 700 12px var(--sans, sans-serif); padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line, #E9DFCE); background: #fff; cursor: pointer; }
.ent-pta-mano:hover { border-color: var(--gold, #B4772A); color: var(--gold-d, #8A5A1E); }
/* v465.5: segunda fila de la puerta (color, modelo y nº de ranuras). */
.ent-pta-row2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px 24px; }
.ent-pta-sel { font: 600 12.5px var(--sans, sans-serif); padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line, #E9DFCE); background: #fff; }
.ent-pta-row2 .ent-pta-inp { width: 52px; }
.ent-pta-row2 .ent-pta-inp:disabled { opacity: 0.45; }
.ent-fondo-row.on { display: flex; }
/* v465.355: costado visto con / sin molduras + grueso (sólo con «Costado visto» elegido). */
.ent-cv-row { display: none; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ent-cv-row.on { display: flex; }
.ent-cv-chip { font: 600 12px var(--sans, sans-serif); padding: 4px 10px; border-radius: 14px; border: 1px solid var(--line, #E9DFCE); background: var(--paper, #fff); color: var(--ink, #2b251d); cursor: pointer; }
.ent-cv-chip.on { background: var(--gold, #b89968); border-color: var(--gold, #b89968); color: #fff; }
.ent-cv-chip.pilar { opacity: .45; cursor: not-allowed; }   /* v465.403: lado con pilar delantero */
.ent-fondo-lbl { font-size: 10.5px; color: var(--ink-mute); }
.ent-fondo-inp {
  width: 66px; padding: 3px 6px; font-family: var(--sans); font-size: 12px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 5px; text-align: right;
}
.ent-fondo-inp:disabled { opacity: .45; }
.ent-fondo-mm { font-size: 10.5px; color: var(--ink-faint); margin-left: -2px; }
.ent-fondo-chk {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--ink-mute); cursor: pointer; user-select: none;
}
.ent-fondo-chk input { width: 15px; height: 15px; margin: 0; cursor: pointer; }

/* v463.67: selector de color de paredes/techo del entorno (paleta + color libre) */
/* v463.83: sección COMPACTADA. En el panel anclado (320px − 36 de padding = 284 útiles)
   los 10 chips de 22 + el color libre de 26 + 10 huecos de 6 sumaban 306 → el color
   libre se iba a una SEGUNDA línea y cada fila ocupaba el doble. Con 20 / 24 / 4 la
   fila entra completa (20·10 + 24 + 4·10 = 264 ≤ 284) y, junto con el título más
   pegado a sus colores, se recuperan ~80px: el check «Mostrar tapetas / molduras»
   queda a la vista sin bajar la lista (Adrián). */
.ent-col-row { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.ent-col-row .ent-row-label { flex: 0 0 54px; font-size: 12px; }
.ent-col-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ent-col-chip {
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.18); cursor: pointer; box-sizing: border-box;
}
.ent-col-chip.active { border-color: var(--accent, #2c6cff); box-shadow: 0 0 0 2px rgba(44,108,255,.30); }
.ent-col-free {
  width: 24px; height: 24px; padding: 0; cursor: pointer;
  border: 1px solid var(--line, rgba(0,0,0,.2)); border-radius: 6px; background: none;
  box-sizing: border-box;
}

/* v459.683: sección de tapetas/molduras + selector de material del costado visto */
.ent-sec-title {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line, rgba(0,0,0,.12));
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* v456.75: mini-diagrama en planta del armario y su entorno */
.ent-diagram {
  width: 100%; height: 90px;
  background: linear-gradient(to bottom, var(--bg-soft) 0%, var(--paper) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: block;
  margin-bottom: 4px;
}
.ent-diag-armario {
  fill: #E8DFCB; stroke: #8B7355; stroke-width: 1.2;
}
.ent-diag-wall {
  stroke: #3F3D3A; stroke-width: 4; stroke-linecap: round;
}
.ent-diag-trasera { stroke-width: 4; }
.ent-diag-molding {
  stroke: var(--gold, #b89968); stroke-width: 2.8;
  stroke-dasharray: 3 2; stroke-linecap: round;
}
.ent-diag-side, .ent-diag-tras, .ent-diag-frente {
  font-family: var(--sans); font-size: 8px;
  fill: var(--ink-mute); letter-spacing: 0.5px;
  text-anchor: middle;
  pointer-events: none;
}
.ent-diag-frente { letter-spacing: 1.5px; }
.ent-diag-tras { font-size: 7px; }

/* door control */
.ed-door-ctrl {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px; box-shadow: var(--shadow-2); z-index: 20;
}
.ed-door-ctrl.hidden { display: none; }
.ed-door-label { font-family: var(--sans); font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.ed-door-range { width: 120px; accent-color: var(--gold-deep); cursor: pointer; }
.ed-door-reset {
  background: transparent; border: 1px solid var(--line);
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; line-height: 1; color: var(--ink-mute);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ed-door-reset:hover {
  background: rgba(184,153,104,0.16); color: var(--gold-deep); border-color: var(--gold);
}
#screen-editor .ed-door-reset {
  border-color: rgba(184,153,104,0.30);
  color: rgba(184,153,104,0.70);
}
#screen-editor .ed-door-reset:hover {
  background: rgba(184,153,104,0.18); color: var(--gold);
}

/* snap svg */
.ed-snap-svg {
  position: absolute; inset: 0; pointer-events: none; z-index: 15;
  width: 100%; height: 100%;
}

/* ── PANEL BLOCKS ───────────────────────────────────────────── */
.ep-block {
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.ep-block:last-child { border-bottom: none; }
.ep-label {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-faint); margin-bottom: 8px; display: block;
}
.ep-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ep-label-row .ep-label { margin-bottom: 0; }
.ep-btn-sm {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  color: var(--gold-deep); background: rgba(184,153,104,0.12);
  border: none; padding: 4px 9px; border-radius: 999px;
  cursor: pointer; transition: background 0.15s;
}
.ep-btn-sm:hover { background: rgba(184,153,104,0.22); }

/* ── COLLAPSIBLE SECTIONS ──────────────────────────────────── */
.ep-collapsible .ep-toggle-btn {
  display: flex; align-items: center; gap: 6px;
  width: 100%; background: none; border: none; padding: 0;
  /* v465.190 — el título deja de ser versalita diminuta (10 px en MAYÚSCULAS con
     0,18em de espaciado, que es lo que costaba leer) y pasa a 13,5 en negrita
     normal. Petición de Juan. */
  font-family: var(--sans); font-size: 13.5px; font-weight: 700;
  text-transform: none; letter-spacing: 0.005em;
  color: var(--ink-faint); cursor: pointer; margin-bottom: 0;
}
.ep-collapsible .ep-toggle-btn span:first-child { flex: 1; text-align: left; }
.ep-collapsible .ep-toggle-btn:hover { color: var(--ink-mute); }
.ep-collapsible.open .ep-toggle-btn { margin-bottom: 6px; }
.ep-caret {
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; margin-left: auto;
  transition: transform 0.22s ease;
}
.ep-collapsible.open .ep-caret { transform: rotate(180deg); }
/* v465.190 — RESUMEN del bloque cerrado. Lo escribe `_epRefrescaResumenes`.
   Abierto desaparece: manda el contenido, que ya dice lo mismo con sus campos. */
.ep-block-val {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.35;
  color: var(--ink-mute); padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ep-collapsible.open > .ep-block-val { display: none; }
.ep-collapse-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.22s ease;
}
.ep-collapsible.open .ep-collapse-body {
  max-height: 900px;
  opacity: 1;
}
/* inline add-division btn inside module toggle header */
.ep-mod-add-inline {
  font-size: 10px; padding: 3px 7px; border-radius: 4px;
  flex-shrink: 0; margin-left: 4px;
}

/* tipo grid */
/* v459.516: iconos de tipo de armario más pequeños → sección más compacta y más
   espacio hacia abajo (Adrián). Se limita el tamaño del icono y se aprieta el botón. */
.tipo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.tipo-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 4px 4px;
  background: var(--bg-soft); border: 1.5px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s; color: var(--ink-mute);
}
.tipo-btn:hover { border-color: var(--line-strong); color: var(--ink); background: var(--bg); }
.tipo-btn.sel { border-color: var(--gold); background: rgba(184,153,104,0.1); color: var(--gold-deep); }
.tipo-icon { width: 100%; display: flex; align-items: center; justify-content: center; }
/* v465.190 — un poco más grandes (Juan) y con los CUERPOS nombrados dentro. */
.tipo-icon svg { width: 100%; max-width: 74px; height: auto; stroke: currentColor; fill: none; }
.tipo-icon svg text { stroke: none; fill: currentColor; font-family: var(--sans);
  font-size: 9px; font-weight: 700; }
.tipo-btn span { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }

/* field grid */
.ep-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ep-field { display: flex; flex-direction: column; gap: 3px; }
.ep-field label { font-family: var(--sans); font-size: 10px; color: var(--ink-mute); font-weight: 500; }
.ep-input-wrap { display: flex; align-items: center; gap: 3px; }
.ep-num {
  width: 100%; min-width: 0;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 6px; text-align: right;
}
.ep-num:focus { outline: none; border-color: var(--gold); }
.ep-input-wrap span { font-family: var(--sans); font-size: 10px; color: var(--ink-faint); flex-shrink: 0; }

/* v307: lista de ajuste individual por balda inclinada */
.incl-offsets-list { display: flex; flex-direction: column; gap: 5px; max-height: 220px; overflow-y: auto; padding: 4px 0; }
.incl-offset-row { display: flex; align-items: center; gap: 6px; }
.incl-offset-row .label { font-family: var(--sans); font-size: 11px; color: var(--ink-mute); width: 70px; flex-shrink: 0; }
.incl-offset-row .btn-step {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--ink); font-size: 16px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  user-select: none; flex-shrink: 0;
}
.incl-offset-row .btn-step:active { background: rgba(184,153,104,0.15); }
.incl-offset-row .ep-num { text-align: center; }

/* v308: selector de lado izq/centro/der para divisiones */
.side-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.side-btn {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 4px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.side-btn.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.side-btn:not(.active):hover { background: rgba(184,153,104,0.08); }

/* v311: popup "Cambiar lado de sub-división" anclado a la barra inferior */
.cl-popup {
  position: fixed; z-index: 9999;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #ccc); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  padding: 10px 12px; min-width: 240px;
  font-family: var(--sans);
}
.cl-popup-head { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.cl-popup-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.cl-btn {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 4px; cursor: pointer;
}
.cl-btn:hover, .cl-btn:active { background: var(--gold); color: #fff; border-color: var(--gold); }
.cl-popup-warn { color: #c00; font-size: 12px; margin-top: 8px; min-height: 1em; }

/* v308: menú flotante para elementos (Centrar / Holgura sobre divisor) */
.elem-action-menu {
  position: fixed; z-index: 9999;
  background: var(--bg, #fff); border: 1px solid var(--line, #ccc); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
  min-width: 160px;
}
.elem-action-menu button {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink); background: transparent; border: none; border-radius: 6px;
  padding: 8px 10px; text-align: left; cursor: pointer;
}
.elem-action-menu button:hover, .elem-action-menu button:active { background: rgba(184,153,104,0.15); }

/* dim rows */
.dim-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 7px;
}
.dim-row label { font-family: var(--sans); font-size: 11px; color: var(--ink-mute); flex: 1; }
.dim-row input {
  width: 72px; font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 6px; text-align: right;
}
.dim-row input:focus { outline: none; border-color: var(--gold); }
.dim-row span { font-family: var(--sans); font-size: 10px; color: var(--ink-faint); }
.dim-row .dim-hint {
  flex-basis: 100%; font-family: var(--sans); font-size: 10px;
  color: var(--gold); margin-top: 2px; text-align: right;
}
/* ── v465.243 — LO QUE FALTA POR MEDIR, LATIENDO (Juan, 27/09) ──────────────────
   «Podemos hacer algo parecido como en Girar veta, pero el latente más amplio.»
   Allí late un punto de 7 px; aquí late el CAMPO entero con un anillo que se abre
   hasta 9 px, que es lo «más amplio» — es lo que tiene que encontrarse de un
   vistazo en un panel largo, no un detalle que se ve de reojo.
   El oro es el color de «esto es lo que hay que mirar» en este panel; el oliva del
   chip de la veta es de otro sitio (allí hacía falta porque caía bajo una barra
   negra). El latido PARA SOLO en cuanto el campo tiene medida: `renderDimInputs`
   vuelve a repartir la clase en cada repintado. */
.dim-row.dim-falta label { color: var(--gold); font-weight: 600; }
.dim-row.dim-falta input {
  border-color: var(--gold);
  animation: dimFaltaLatido 1.6s ease-out infinite;
}
/* ⚠️ v465.244 — EL ANILLO VA CASI BLANCO, NO EN ORO. Juan: «no se aprecia el latido
   con ese color; tendría que ser algo más amarillo o mejor aún, más blanco». El oro
   (#B89968) sobre el fondo oscuro del panel apenas se separa, y un anillo que se
   desvanece tiene un instante útil muy corto: si además el color casa con el fondo,
   no queda nada que ver. El blanco cálido es lo que más contrasta ahí. */
@keyframes dimFaltaLatido {
  0%   { box-shadow: 0 0 0 0 rgba(255,246,226,0.90); }
  70%  { box-shadow: 0 0 0 9px rgba(255,246,226,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,246,226,0); }
}
/* Quien pide menos movimiento se queda con el filete y el rótulo en oro, que ya
   distinguen de sobra cuál es el campo. */
@media (prefers-reduced-motion: reduce) {
  .dim-row.dim-falta input { animation: none; }
}
.dim-aviso {
  font-family: var(--sans); font-size: 11px; line-height: 1.35;
  color: var(--gold); background: rgba(184,153,104,0.10);
  border-left: 2px solid var(--gold); border-radius: 0 6px 6px 0;
  padding: 6px 8px; margin: 0 0 9px;
}

/* door buttons */
.ep-door-tipos { display: flex; flex-wrap: wrap; gap: 5px; }
.ep-door-btn {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  color: var(--ink-mute); background: var(--bg-soft);
  border: 1.5px solid transparent; border-radius: 999px;
  padding: 4px 9px; cursor: pointer; transition: all 0.15s;
}
.ep-door-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.ep-door-btn.sel { color: var(--gold-deep); background: rgba(184,153,104,0.12); border-color: var(--gold); }

/* counter */
.ep-counter { display: flex; align-items: center; gap: 8px; }
.ep-ctr {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 16px; line-height: 1; color: var(--ink-soft);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ep-ctr:hover { background: var(--bg-warm); }
#ep-door-hojas-val {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--ink); min-width: 20px; text-align: center;
}

/* module list */
.ep-mod-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0; border-bottom: 1px solid var(--line-soft);
}
.ep-mod-item:last-child { border-bottom: none; }
.ep-mod-label { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); flex: 1; }
.ep-mod-w {
  width: 58px; font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 4px 5px; text-align: right;
}
.ep-mod-w:focus { outline: none; border-color: var(--gold); }
.ep-mod-del {
  width: 22px; height: 22px; border: none; background: none;
  color: var(--ink-faint); font-size: 16px; cursor: pointer;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.ep-mod-del:hover { color: var(--terra); background: rgba(140,58,40,0.08); }
.ep-dims-summary {
  font-family: var(--serif); font-size: 12px;
  font-style: italic; color: var(--ink-mute);
  margin-top: 6px; line-height: 1.5;
}

/* material */
.ep-mat-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.ep-mat-group { display: flex; flex-direction: column; gap: 3px; }
.ep-mat-group-label { font: 600 9px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mute); opacity: 0.7; }
.ep-mat-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-mat-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid transparent; cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.ep-mat-swatch:hover { transform: scale(1.12); }
.ep-mat-swatch.sel { border-color: var(--gold-deep); }
.ep-mat-swatch.dragging { opacity: 0.55; transform: scale(0.92); }
/* v459.25: especiales (Espejo y Vidrio). Borde fino para distinguirlos del
   resto y un brillo sutil para indicar que son "diferentes". */
.ep-mat-swatch-special {
  border: 2.5px solid rgba(255,255,255,0.4);
  box-shadow: inset 0 0 4px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.3);
}

/* v459.27: marca de la app. Vivió sobre el visor 3D (esquina inferior izquierda)
   hasta la v465.246, que la llevó al canto.
   ⚠️ v465.249 — AHORA ES EL PIE DEL PANEL IZQUIERDO, y NO se mueve. Lo propuso
   JUAN: «pasar Confiwood a la barra de la izda, inamovible». Con eso el lienzo
   queda libre de arriba abajo y la barra de la división cabe en dos filas.
   - `margin-top: auto` la manda al fondo cuando el panel NO llega a desbordar;
   - `position: sticky; bottom: 0` la deja a la vista cuando SÍ desborda, que es
     el caso normal. Hacen falta las DOS: cada una cubre un caso.
   - el FONDO OPACO es imprescindible — es un pie sobre un contenedor que se
     desplaza, y sin él se le ve pasar el contenido por debajo. */
.ed-brand {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: auto;
  display: flex; align-items: center;
  padding: 10px 12px;
  /* ⚠️ EL FONDO LO PONE EL PROPIO PANEL (`--bg`), no `--paper`: `.ed-left` deja
     su fondo transparente y el color lo pinta `#screen-editor`. Con `--paper`
     saldría una banda CREMA de lado a lado en un panel oscuro. */
  /* ⚠️ EL COLOR DEL PIE LO DA EL TEMA DEL EDITOR, no una variable: `.ed-left`
     deja su fondo TRANSPARENTE y el oscuro lo pinta `#screen-editor` con un
     valor literal (#0C0A08). Con `var(--bg)` o `var(--paper)` salía una banda
     CREMA de lado a lado sobre un panel negro — medido. Se fija abajo, en el
     bloque del tema oscuro y en el de `body.tema-claro`. */
  border-top: 1px solid var(--line-soft);
  pointer-events: none;
}
/* La CHAPA es la misma pastilla que flotaba sobre el 3D hasta la v465.248: se
   conserva tal cual para que la marca no cambie de aspecto al mudarse. */
.ed-brand-plate {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
}
.ed-brand img {
  width: 24px; height: 24px;
  border-radius: 5px;
  object-fit: contain;
}
.ed-brand-plate > span {
  font-family: var(--serif);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.ep-mat-name { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--paper); margin-top: 8px; line-height: 1.35; }

/* v459.651: selector de materiales GRANDE inline en el panel lateral (bloque 3).
   Muestras con la veta/textura real + nombre visible + grupos desplegables. */
.mm-group { margin-bottom: 12px; }
.mm-group-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; padding: 4px 0; margin-bottom: 8px;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: #d8b866;
}
.mm-caret { transition: transform 0.18s; opacity: 0.85; }
.mm-group.collapsed .mm-caret { transform: rotate(-90deg); }
.mm-group.collapsed .mm-grid { display: none; }
.mm-group.collapsed .mm-group-head { margin-bottom: 0; }
.mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 9px; }
.mm-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mm-swatch {
  width: 48px; height: 48px; border-radius: 9px;
  border: 2.5px solid transparent; cursor: grab;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.06);
  transition: transform 0.12s, border-color 0.12s;
  /* v459.657 (iPad): el gesto sobre la muestra es SIEMPRE arrastre nuestro
     (por punteros), no scroll ni el drag nativo de Safari (que levantaba
     varias muestras juntas). El scroll de la lista se hace tocando los huecos
     o los nombres. touch-action:none evita que el scroll robe el gesto;
     user-select/callout evitan la selección y el menú de "copiar imagen". */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.mm-swatch:hover { transform: scale(1.06); }
.mm-swatch.sel { border-color: #d8b866; }
.mm-swatch.dragging { opacity: 0.55; transform: scale(0.92); }
.mm-name {
  font-family: var(--sans); font-size: 9.5px; font-weight: 600; line-height: 1.18;
  text-align: center; color: rgba(251,246,233,0.78); word-break: break-word;
}

/* inline add */
.ep-add-inline {
  display: flex; align-items: center; gap: 5px; margin-top: 6px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  color: var(--gold-deep); background: none; border: none; padding: 3px 0;
  cursor: pointer; transition: opacity 0.15s;
}
.ep-add-inline:hover { opacity: 0.75; }
.ep-add-inline svg { stroke: currentColor; fill: none; stroke-width: 1.8; }

/* obs list */
.ep-obs-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 0;
  font-family: var(--sans); font-size: 11px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.ep-obs-item:last-child { border-bottom: none; }
.ep-obs-label { flex: 1; }
.ep-obs-del {
  width: 20px; height: 20px; border: none; background: none;
  color: var(--ink-faint); cursor: pointer; border-radius: 3px;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.ep-obs-del:hover { color: var(--terra); }

/* check row */
.ep-check-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
  cursor: pointer;
}
.ep-check-row input { accent-color: var(--gold-deep); }

/* ── RIGHT PALETTE ─────────────────────────────────────────── */
.ep-group { padding: 10px 10px 6px; border-bottom: 1px solid var(--line-soft); }
.ep-group:last-child { border-bottom: none; }
.ep-group-label {
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-faint); margin-bottom: 7px;
}
/* v465.256 — el ancho del chip y su separación salen de aquí para que el botón
   de «Vaciar interior» pueda casar con la fila de iconos sin repetir el número.
   El panel mide 268 px, así que en esta columna caben SIEMPRE dos por fila
   (tres serían 282 y no entran): por eso el botón se calcula a dos chips. */
.ep-group { --ep-chip-w: 92px; --ep-chip-gap: 6px; }
.ep-palette { display: flex; flex-wrap: wrap; gap: var(--ep-chip-gap); }
/* v465.250 — «Vaciar interior», al final del grupo de Interior en el panel
   derecho (antes vivía abajo del panel izquierdo). Ancho completo para que se
   lea como el cierre de la lista y no como un chip más. */
.ep-vaciar {
  /* ⚠️ v465.256 — AL ANCHO DE LA FILA DE ICONOS, no al del panel. Juan: «centra
     el vaciar con respecto a los iconos, queda más grande y se sale a la
     derecha». Medido: los iconos ocupaban 190 px y el botón 247 — se salía 57 px
     por la derecha. Con el mismo ancho y el mismo canto izquierdo que la fila,
     sus centros coinciden, que es lo que se lee como «centrado con los iconos».
     Sale de las variables de `.ep-group` para que no puedan separarse el día que
     cambie el tamaño del chip. */
  display: block;
  width: calc(var(--ep-chip-w) * 2 + var(--ep-chip-gap));
  margin-top: 10px; padding: 9px 12px;
  background: transparent;
  border: 1px solid #c0392b; border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: #e57368; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ep-vaciar:hover { background: rgba(192,57,43,0.12); color: #f08b80; }
/* v465.276 — interruptor de MOLDURAS al pie de Frentes: mismo ancho que la fila de
   iconos (como «Vaciar interior»), en el color de «esto es lo elegido». */
.ep-molduras {
  display: block;
  width: calc(var(--ep-chip-w) * 2 + var(--ep-chip-gap));
  margin-top: 10px; padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--gold); border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--gold); cursor: pointer;
}
.ep-molduras:hover { background: rgba(184,153,104,0.12); }
.ep-molduras.off { border-style: dashed; opacity: .75; }
/* v465.397 — ancho de las molduras verticales (pie de Frentes) */
.ep-mold-anchos { margin: 6px 0 2px; padding: 8px 10px; border: 1px solid rgba(184,153,104,0.35); border-radius: 8px; font-family: var(--sans); font-size: 12px; line-height: 1.35; color: rgba(220,210,190,0.9); }
.ep-mold-anchos .ema-tit, .ep-mold-anchos .ema-cab b, .ep-mold-anchos .ema-auto b { color: var(--gold); }
body.tema-claro .ep-mold-anchos { color: var(--ink); }
.ep-mold-anchos[hidden] { display: none; }
.ep-mold-anchos .ema-tit { font-weight: 600; margin-bottom: 6px; }
.ep-mold-anchos .ema-lado + .ema-lado { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(184,153,104,0.35); }
.ep-mold-anchos .ema-cab { margin-bottom: 4px; }
.ep-mold-anchos .ema-auto span, .ep-mold-anchos .ema-nota { opacity: .75; font-size: 11px; }
.ep-mold-anchos .ema-nota { margin-top: 4px; }
.ep-mold-anchos .ema-nota.ema-poco { color: #b4542b; opacity: 1; }
.ep-mold-anchos .ema-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ep-mold-anchos .ema-chip { min-width: 36px; padding: 4px 6px; border: 1px solid rgba(184,153,104,0.55); border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ep-mold-anchos .ema-chip.on { background: var(--gold); color: #1A1611; border-color: var(--gold); font-weight: 600; }
.ep-mold-anchos .ema-inp { width: 52px; padding: 3px 4px; border: 1px solid rgba(184,153,104,0.55); border-radius: 6px; background: transparent; color: inherit; font: inherit; }
.ep-mold-anchos .ema-mm { opacity: .7; font-size: 11px; }
.ep-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: var(--ep-chip-w, 92px); padding: 8px 4px 7px;
  background: var(--bg-soft); border: 1.5px solid transparent;
  border-radius: var(--radius-sm); cursor: grab;
  transition: all 0.15s; color: var(--ink-mute);
  user-select: none;
  touch-action: none;
}
.ep-chip:hover { background: var(--bg); border-color: var(--line); color: var(--ink); }
.ep-chip.dragging { opacity: 0.4; cursor: grabbing; }
.ep-chip svg { stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* v465.191 — TODOS los iconos del panel van al MISMO lienzo (32×24) y al mismo
   tamaño. Antes cada uno traía su viewBox (14, 18, 20, 28 de alto) y la rejilla
   quedaba desigual: unos chips altos, otros bajos, y el ojo no encontraba nada.
   Fijar el ancho aquí es lo que los alinea. */
.ep-chip svg { width: 60px; height: auto; display: block; }
.ep-chip span {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  text-align: center; line-height: 1.2; color: inherit;
}
.ep-chip-special {
  cursor: pointer;
  border-color: rgba(184,153,104,0.3);
  background: rgba(184,153,104,0.06);
}
.ep-chip-special:hover { background: rgba(184,153,104,0.14); border-color: var(--gold); color: var(--gold-deep); }
/* v463.98: Pilar / Viga / Jácena. Llevaban `touch-action: auto`, y en iPad eso
   hace que Safari se quede el gesto en cuanto el dedo se mueve (lo interpreta
   como scroll) y dispare `pointercancel` → el arrastre moría siempre y el chip
   solo se podía TOCAR. El resto de chips ya usan `none` (por eso sí se
   arrastran). El tap sigue funcionando igual: `touch-action` no afecta al
   evento `click`. */
.ep-chip-clickinsert { cursor: pointer; touch-action: none; }
/* v451: chip deshabilitado — visible pero sin acción (abatibles/plegables
   futuros). */
.ep-chip-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.ep-chip-clickinsert.active {
  border-color: var(--gold);
  background: rgba(184,153,104,0.12);
  color: var(--gold-deep);
}
.ep-chip-group {
  cursor: pointer;
  touch-action: auto;
}
.ep-chip-group.open {
  border-color: var(--line);
  background: var(--bg);
  color: var(--ink);
}
.ep-chip-subpanel {
  flex-basis: 100%;
  width: 100%;
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
}
.ep-chip-subpanel.open { display: flex; }

/* ── ELEMENT BAR ─────────────────────────────────────────────── */
.ed-elem-bar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 300;
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  /* v465.246: RECTANGULAR. Juan: «la vamos a hacer como estaba antes, pero
     rectangular». Antes era una pastilla (999px). Lo único que cambia es el
     canto — sigue flotando y ciñéndose a su contenido, como siempre. */
  border-radius: 12px;
  padding: 9px 16px;
  box-shadow: 0 4px 20px rgba(26,22,17,0.3);
  /* v455.9: en PC ancho el elem-bar ya no cabe con los botones nuevos
     (Redimensionar / Ocultar marco / Ocultar puertas) → permitir scroll
     horizontal cuando exceda el viewport. max-width 95vw + flex-wrap
     evita desbordes. */
  max-width: 95vw;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
}
.ed-elem-bar.hidden { display: none; }
/* v459.963: PANEL DE PUERTA anclado a la IZQUIERDA (iPad). Vertical, a todo el
   alto, con la ✕ arriba. Oculta el banner izquierdo (lo hace el JS) para dejar el
   3D limpio. */
.ed-elem-bar.dock-left {
  bottom: auto; top: 0; left: 0; transform: none;
  height: 100%; max-height: 100%;
  width: 320px; max-width: 86vw;
  border-radius: 0 14px 14px 0;
  flex-direction: column; flex-wrap: nowrap;
  align-items: stretch; justify-content: flex-start;
  padding: 54px 18px 20px; gap: 14px; row-gap: 14px;
  overflow-y: auto;
}
.ed-elem-bar.dock-left .ed-elem-bar-info { width: 100%; gap: 10px; }
/* v459.972: en el panel izquierdo los chips (bisagra/tirador/avance) van sueltos y
   grandes — hay sitio de sobra en vertical, no tiene sentido apretarlos. Cada grupo
   respira con line-height alto y los chips son táctiles (min 38px). */
.ed-elem-bar.dock-left .ed-elem-bar-pos {
  display: flex; flex-direction: column; align-items: stretch; width: 100%;
  gap: 4px;
  font-size: 14px; line-height: 1.3; white-space: normal;
  color: var(--paper);
}
.ed-elem-bar.dock-left .ed-elem-bar-pos .ep-btn-mini {
  padding: 9px 16px !important; font-size: 14px !important;
  margin: 0; border-radius: 9px; min-height: 38px; line-height: 1.1;
}
.ed-elem-bar.dock-left .ed-elem-bar-pos .ed-eb-w {
  font-size: 14px; padding: 7px 8px; min-height: 38px; width: 74px; margin: 0;
}
/* v459.974: cada grupo (frase + sus chips) es una FILA completa del panel izquierdo:
   la etiqueta arriba, los chips debajo en su misma línea, sin apretujarse. */
.ed-elem-bar.dock-left .ed-eb-grp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  width: 100%; margin: 0;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  white-space: normal; line-height: 1.3;
}
.ed-elem-bar.dock-left .ed-elem-bar-actions {
  flex-direction: column; align-items: stretch; width: 100%; gap: 10px;
}
.ed-elem-bar.dock-left .ed-elem-bar-actions .ed-eb-btn {
  padding: 13px 16px; font-size: 15px; min-height: 46px; border-radius: 10px;
}
.ed-elem-bar.dock-left .ed-eb-close {
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px; font-size: 17px;
}
.ed-elem-bar-info { display: flex; flex-direction: column; gap: 1px; }
/* v465.247 — LA BARRA EN DOS FILAS (hoy sólo la división, ver `selectElement`).
   El nombre pasa a ir EN LÍNEA con los datos y cada bloque se lleva el ancho
   entero, así que quedan «datos» arriba y «acciones» abajo en vez de las tres
   líneas de antes. Sin esto, el nombre se come una fila él solo. */
/* ⚠️ COLUMNA, no `flex: 1 1 100%` en los hijos (v465.247, 2ª vuelta). Con el
   basis al 100% y `flex-grow: 1` los dos bloques CRECEN, y como la barra es de
   ancho automático acababa ocupando todo el hueco disponible en vez de ceñirse a
   su contenido: medido, **748 px en vez de los ~630 que ocupa el texto**, y se
   metía 260 px por encima del panel de la derecha. Lo cazó Juan («se pasa»).
   En columna, cada fila se ciñe a lo suyo y la barra al más ancho de los dos. */
.ed-elem-bar.eb-filas { flex-direction: column; align-items: flex-start; row-gap: 8px; }
.ed-elem-bar.eb-filas .ed-elem-bar-info {
  flex-direction: row; flex-wrap: nowrap;
  align-items: flex-start; gap: 4px 10px;
}
.ed-elem-bar.eb-filas #ed-eb-name { flex: 0 0 auto; white-space: nowrap; }
/* ⚠️ v465.248 — los DATOS se dejan encoger y envolverse por DENTRO. Sin esto,
   `#ed-eb-pos` es un hijo de flex que no baja de su min-content: en el iPad de
   11" no cabía junto al nombre y saltaba ENTERO a la línea de abajo, dejando
   «División» solo arriba. Encogiendo, la primera línea lleva el nombre y las
   medidas y sólo bajan los chips de corte, que es el orden de su boceto. */
.ed-elem-bar.eb-filas .ed-elem-bar-pos {
  flex: 0 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
}
.ed-elem-bar.eb-filas .ed-elem-bar-actions { flex-wrap: wrap; align-items: center; }
/* v465.248 — el «Grosor» en la FILA DE LOS BOTONES, delante de «Centrar». Juan:
   «¿no puedes meter el grosor a la izda? […] también puedes hacer el chip más
   pequeño donde va el 19 y acortamos». Las dos cosas: se muda de fila (lo hace
   `selectElement`) y el campo baja de 56 a 40 px, que es lo que necesita un
   número de dos cifras. Acotado a `.ed-eb-grs` para no estrechar los otros
   nueve campos de la barra, donde van medidas de cuatro cifras. */
.ed-elem-bar.eb-filas .ed-eb-grs {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; font-size: 11px;
  color: rgba(251,246,233,0.72);
}
.ed-elem-bar.eb-filas .ed-eb-grs .ed-eb-w { width: 40px; margin: 0; }

/* v465.255 — LA BARRA FIJA, EN UNA SOLA LÍNEA. Juan: «la barra, que se vea en
   una línea ajustada al centro». Su contenido es corto (alto, fondo y los dos
   acabados), así que el nombre va EN LÍNEA con los datos en vez de encima —que
   es lo que partía la barra en dos— y todo queda a la misma altura.
   `nowrap` a propósito: si un día no cupiera, es preferible que la barra crezca
   a lo ancho (el tope de `_barraDentroDelLienzo` la ciñe al lienzo) a que se
   parta en dos, que es justo lo que él vino a quitar. */
.ed-elem-bar.eb-1fila .ed-elem-bar-info {
  flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 10px;
}
.ed-elem-bar.eb-1fila #ed-eb-name { flex: 0 0 auto; white-space: nowrap; }
.ed-elem-bar.eb-1fila .ed-elem-bar-pos { flex-wrap: nowrap; }

/* v459.973: BURBUJAS DE AYUDA (tooltips) globales — salen al pasar ratón/lápiz por
   encima de cualquier botón con title/data-tip. No bloquean el puntero. */
.app-tip {
  position: fixed; z-index: 100000; pointer-events: none;
  max-width: 260px;
  background: rgba(20,17,12,0.96); color: #F6F1E6;
  border: 1px solid rgba(184,153,104,0.38);
  border-radius: 9px; padding: 7px 11px;
  font-family: var(--sans, system-ui, -apple-system, sans-serif);
  font-size: 13px; font-weight: 500; line-height: 1.35;
  box-shadow: 0 6px 22px rgba(0,0,0,0.38);
  opacity: 0; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
  white-space: normal;
}
.app-tip.below { transform: translateY(-3px); }
.app-tip.show  { opacity: 1; transform: translateY(0); }
.app-tip.izq { transform: translateX(3px); }   /* v465.506: a la izquierda del menú de Acciones */
.app-tip.izq.show { transform: translateX(0); }
.ed-elem-bar-name { font-family: var(--serif); font-size: 15px; color: var(--paper); }
/* ⚠️ v465.255 — LOS CHIPS Y LOS TEXTOS, ALINEADOS. Juan: «Balda, alinear los
   chips y textos». Esta fila mezcla texto suelto («Alt», «· holg», «mm»),
   `<input>` y chips desplegables, y cada uno tiene su alto: en flujo normal se
   alinean por la LÍNEA BASE, así que el chip del LED —que es más alto— empujaba
   la fila y los rótulos quedaban montados respecto a las casillas.
   En flex con `align-items: center` se alinean por su CENTRO, que es lo que se
   lee como «a la misma altura». Los separadores « · » son nodos de texto y el
   flex los trata como un hijo más, así que siguen donde estaban.
   Va en la regla GENERAL a propósito: la desalineación es la misma en todas las
   barras, y arreglarla sólo en la balda dejaría el resto descuadrado. */
.ed-elem-bar-pos {
  font-family: var(--sans); font-size: 11px; color: rgba(251,246,233,0.55);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px;
}
/* Fuera de la media táctil (ratón) van igual: el chip pierde la pastilla y las
   dos cosas se fuerzan al MISMO alto. Se fija con `min-height` y no ajustando
   el `padding` porque el relleno de un `<input>` y el de un `<button>` no dan
   la misma caja con la misma cifra —el input suma su borde— y bastaba un píxel
   para que la fila volviera a bailar. */
.ed-elem-bar-pos .ed-eb-btn { padding: 2px 9px; border-radius: 4px; }
.ed-elem-bar-pos .ed-eb-w,
.ed-elem-bar-pos .ed-eb-btn,
.ed-elem-bar-pos .ed-eb-sel { min-height: 20px; }
/* v465.257 — el desplegable de la barra (hoy el modelo de tirador de la
   cajonera). Iba con `ep-btn-mini`, que es de los PANELES CLAROS: sobre la barra
   oscura salía blanco y con otro alto que las casillas de al lado. Se le da el
   mismo idioma que a `.ed-eb-w` — misma letra, mismo canto y mismo alto — para
   que la fila se lea de un tirón. */
.ed-elem-bar-pos .ed-eb-sel {
  font: inherit; font-size: 11px;
  padding: 1px 4px; margin: 0 1px;
  background: rgba(255,255,255,0.06);
  color: rgba(251,246,233,0.95);
  border: 1px solid rgba(184,153,104,0.30);
  border-radius: 4px;
  cursor: pointer;
}
.ed-elem-bar-pos .ed-eb-sel:focus { border-color: var(--gold); background: rgba(255,255,255,0.10); }
/* v465.257 — un rótulo y SUS chips no se separan al envolver la fila. */
.ed-elem-bar-pos .ed-eb-par { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* v459.974: en la barra INFERIOR normal cada grupo se mantiene en línea con los
   siguientes, con una separación clara (sustituye a los antiguos &nbsp;). */
.ed-eb-grp { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 0 0; white-space: nowrap; }
.ed-cotas-wrap { position: relative; display: inline-flex; }
.ed-cotas-chev { margin-left: 4px; opacity: 0.7; }
.ed-cotas-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 100;
  background: rgba(14,12,9,0.97);
  border: 1px solid rgba(184,153,104,0.30);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.ed-cotas-popover.hidden { display: none; }
.ed-cotas-popover label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 12px var(--sans);
  color: var(--paper);
  cursor: pointer;
  user-select: none;
}
.ed-cotas-popover input[type="checkbox"] { accent-color: var(--gold); }
.ed-cotas-master { font-weight: 600; color: var(--gold); }
/* v465.38: recuperar las cotas que se han escondido tocando su número. */
.ed-cotas-restore {
  font: 12px var(--sans); color: var(--gold);
  background: rgba(184,153,104,0.14);
  border: 1px solid rgba(184,153,104,0.35);
  border-radius: 5px; padding: 6px 8px; cursor: pointer; text-align: left;
}
.ed-cotas-restore:hover { background: rgba(184,153,104,0.26); }
.ed-cotas-restore.hidden { display: none; }
/* El botón de cotas avisa de que faltan números: se aclara y le sale un punto.
   Si no, quien esconda una cota y se olvide no sabe por qué no la ve. */
#btn-ed-cotas.cotas-ocultas { position: relative; opacity: 0.62; }
#btn-ed-cotas.cotas-ocultas::after {
  content: ""; position: absolute; top: 3px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 1.5px var(--paper);
}
.ed-cotas-sep {
  height: 1px;
  background: rgba(184,153,104,0.20);
  margin: 2px -4px;
}

/* v459.310: desplegable "Vista" (Realista / Solid-Color / Líneas) */
.ed-view-wrap { position: relative; display: inline-flex; }
.ed-view-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 100;
  background: rgba(14,12,9,0.97);
  border: 1px solid rgba(184,153,104,0.30);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 168px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.ed-view-popover.hidden { display: none; }
.ed-view-opt {
  display: block;
  width: 100%;
  text-align: left;
  font: 12px var(--sans);
  color: var(--paper);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 8px 10px;
}
.ed-view-opt:hover { background: rgba(184,153,104,0.15); }
.ed-view-opt.sel { background: rgba(184,153,104,0.25); color: var(--gold); font-weight: 600; }
/* v465.212 — El desplegable de MODO lleva la explicación de cada opción debajo
   de su nombre (patrón de la v465.124). `.active` marca el modo puesto; se pinta
   igual que `.sel` porque es lo mismo, sólo que a estas filas el `.active` se lo
   pone `setMeasureMode`, que ya existía. */
/* ⚠️ OPACO DEL TODO. `.ed-view-popover` va a `rgba(14,12,9,0.97)`, y ese 3 % se
   nota: este desplegable es alto y cae sobre el 3D, así que se transparentaban
   los chevrones de los chips de detrás y el menú se leía sucio. Es exactamente lo
   que ya aprendió el TEMA CLARO (ver `body.tema-claro .ed-view-popover`, que lo
   puso a blanco puro por lo mismo); aquí se acota al desplegable nuevo para no
   tocar los de Vista, Cotas y Comentarios, validados en producción. */
.ed-modo-popover { min-width: 268px; background: #0E0C09; }
.ed-view-opt.active { background: rgba(184,153,104,0.25); color: var(--gold); font-weight: 600; }
.ed-view-opt em {
  display: block; font-style: normal; font-weight: 400;
  font-size: 11px; line-height: 1.35; margin-top: 2px;
  color: rgba(251,246,233,0.58);
}
.ed-view-opt.active em { color: rgba(184,153,104,0.75); }
body.tema-claro .ed-view-opt em { color: rgba(0,0,0,0.52); }
/* v465.212 — Los DOS DIBUJOS de veta del desplegable «Puertas». Son SÓLO
   INFORMATIVOS: no se pulsan (`pointer-events:none`) y no hacen nada; están para
   que se vea de un vistazo qué es la veta vertical y qué la horizontal. Van dentro
   de un CÍRCULO para que se distingan bien — decisión de Adrián.
   Las rayas se hacen con un degradado repetido en vez de un SVG: menos marcado,
   y a 90° las bandas salen verticales (veta vertical) y a 0°, horizontales. */
/* Una fila que hoy no puede hacer nada (esconder frentes en un armario que no
   tiene ninguno) se apaga, en vez de dejar un botón que al pulsarlo no responde. */
.ed-view-opt.ed-opt-off { opacity: 0.42; }
.ed-veta-ejs {
  display: flex; gap: 14px; justify-content: center;
  padding: 2px 10px 8px; pointer-events: none; user-select: none;
}
.ed-veta-ej {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 11px var(--sans); color: rgba(251,246,233,0.55);
}
.ed-veta-ej i {
  display: block; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(184,153,104,0.45);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.45);
}
.ed-veta-v { background: repeating-linear-gradient(90deg, #9A6238 0 4px, #6E4123 4px 6px); }
.ed-veta-h { background: repeating-linear-gradient(0deg,  #9A6238 0 4px, #6E4123 4px 6px); }
/* v465.223: los dos dibujos viven ahora DENTRO del modal de Editar puertas, que es
   oscuro en los dos temas — así que NO lleva override de tema claro: le pondría
   letra negra sobre fondo oscuro. */
.ed-view-sep { height: 1px; background: rgba(184,153,104,0.20); margin: 3px 2px; }
.ed-view-check {
  display: flex; align-items: center; gap: 8px;
  font: 12px var(--sans); color: var(--paper); cursor: pointer;
  padding: 6px 10px; user-select: none;
}
.ed-view-check input[type="checkbox"] { accent-color: var(--gold); }
.ed-view-range { display: flex; align-items: center; gap: 8px; padding: 4px 10px 8px; }
.ed-view-range.hidden { display: none; }
.ed-view-range span { font: 11px var(--sans); color: var(--paper); opacity: 0.8; white-space: nowrap; }
.ed-view-range input[type="range"] { flex: 1; accent-color: var(--gold); min-width: 90px; }

/* v459.658: desplegable "Acciones" — agrupa los botones dorados (Hacer copia,
   Lámina, PDF, JSON, Compartir 3D, STEP, Fabricación, MAESTRO) en un menú para
   no amontonar la barra superior. */
.ed-actions-wrap { position: relative; display: inline-flex; }
.ed-actions-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 120;
  background: rgba(14,12,9,0.97);
  border: 1px solid rgba(184,153,104,0.30);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.ed-actions-popover.hidden { display: none; }
/* Botones dorados dentro del desplegable: a lo ancho y alineados a la izquierda. */
.ed-actions-popover .ed-tool-accent,
.ed-actions-popover .ed-tool-asana {
  width: 100%;
  justify-content: flex-start;
  margin: 0;
}
.ed-actions-popover .ed-tool-accent:hover { background: rgba(184,153,104,0.15); }

/* v465.100: sub-desplegables dentro de "Acciones" — «Enviar dibujo» (líneas /
   color) y «Exportación» (3ds Max / SketchUp / Otros). Petición de Juan para
   dejar de amontonar botones sueltos. La cabecera abre y cierra su grupo; no
   cierra el menú de Acciones (eso lo gobierna el JS, que excluye .ed-act-grp-btn). */
.ed-act-group { display: flex; flex-direction: column; gap: 4px; }
.ed-act-grp-btn .ed-act-grp-chev {
  margin-left: auto;
  transition: transform .15s ease;
}
.ed-act-group.abierto .ed-act-grp-chev { transform: rotate(180deg); }
.ed-act-sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Sangrado + filete: se ve de un vistazo que cuelgan de la cabecera. */
  margin-left: 10px;
  padding-left: 8px;
  border-left: 1px solid rgba(184,153,104,0.28);
}
.ed-act-sub.hidden { display: none; }

.ed-eb-w {
  width: 56px;
  padding: 2px 4px;
  margin: 0 1px;
  font: inherit;
  font-size: 11px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  color: rgba(251,246,233,0.95);
  border: 1px solid rgba(184,153,104,0.30);
  border-radius: 4px;
  outline: none;
}
.ed-eb-w:focus { border-color: var(--gold); background: rgba(255,255,255,0.10); }
.ed-eb-w::-webkit-inner-spin-button,
.ed-eb-w::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ed-elem-bar-actions { display: flex; gap: 6px; }
.ed-eb-btn {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--paper); background: rgba(255,255,255,0.12);
  border: none; padding: 5px 11px; border-radius: 999px;
  cursor: pointer; transition: background 0.15s;
}
.ed-eb-btn:hover { background: rgba(255,255,255,0.22); }
/* v465.118 — chip del grupo elegido en la barra inferior (p.ej. cómo parte el
   maletero la trasera: Entera / Lineal / Omegas). */
.ed-eb-btn.on { background: var(--gold); color: #14120A; }
.ed-eb-btn.on:hover { background: var(--gold); }
.ed-eb-btn.danger { color: #ff8a80; }
.ed-eb-btn.danger:hover { background: rgba(255,100,80,0.2); }
/* v465.124 — CHIP DESPLEGABLE de la barra inferior. Juan, viendo la división con
   LED + Corta suelo + Corta techo todo abierto: «hay tanto que no lo van a
   entender». El chip resume («Corta suelo: No ▾») y el desplegable lleva las
   opciones con su explicación. */
.ed-eb-grp-btn b { font-weight: 600; }
/* v465.266 — el chip NO se parte ni se encoge. Al alinearlo debajo de su fuente
   (`_ebAlineaBajoFuente`) se queda con el hueco justo al final de la fila, y basta
   una fracción de píxel para que el flex lo encoja y el «▾» baje de renglón. */
.ed-eb-grp-btn { white-space: nowrap; flex: 0 0 auto; }
.ed-eb-caret { opacity: 0.55; font-size: 10px; margin-left: 1px; }
.ed-eb-pop {
  position: fixed; z-index: 400;
  background: var(--ink); color: var(--paper);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 8px 28px rgba(26,22,17,0.45);
  max-width: min(340px, 92vw);
  font-family: var(--sans);
}
/* v465.268 — el piquito que enlaza el desplegable con su pestaña. Lo dibujó Juan a
   mano en sus capturas. `--pico-x` lo pone `_ebPopAbrir` con la X REAL del chip: con
   el desplegable acotado al lienzo, el centro de uno y otro no coinciden. */
.ed-eb-pop.con-pico::after {
  content: ''; position: absolute;
  left: var(--pico-x, 50%); bottom: -7px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--ink);
}
.ed-eb-pop-t {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(251,246,233,0.65);
  margin-bottom: 7px;
}
/* v465.303 — los pilares en el desplegable «Corta costados» del maletero: cada uno
   con su raya, para que no se lea como parte de la fila de arriba. */
.ed-eb-pop-t.ed-eb-cp-t {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ed-eb-pop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ed-eb-pop-row + .ed-eb-pop-row { margin-top: 7px; }
.ed-eb-pop-lbl { font-size: 12px; color: rgba(251,246,233,0.75); }
.ed-eb-pop-chk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; cursor: pointer;
  background: rgba(255,255,255,0.08);
  padding: 5px 10px; border-radius: 999px;
}
.ed-eb-pop-n {
  font-size: 11px; line-height: 1.45;
  color: rgba(251,246,233,0.55);
  margin-top: 8px;
}
.ed-eb-pop-n b { color: rgba(251,246,233,0.8); font-weight: 600; }
/* v465.223 — AQUÍ VIVÍA `.ed-pq-*`, el estilo de la burbuja anclada a un punto: la
   de «ABRIR / EDITAR» (v465.205, retirada por Adrián) y luego la de «BORRAR /
   EDITAR» (v465.222, retirada también: el borrado va en el modal de edición).
   Se borra con su helper `_ebPopEnPunto`, que es lo que manda la lección de la
   v465.179: al cambiar una regla, borrar lo que implementaba la anterior — si no,
   queda una pieza suelta que alguien vuelve a enchufar creyendo que repone algo. */
.ed-eb-close {
  font-size: 16px !important;
  font-weight: 700 !important;
  width: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (pointer: coarse) {
  .ed-eb-close { width: 44px; font-size: 22px !important; }
}

/* ── BARRA INFERIOR EN IPAD: compacta pero táctil (v459.46) ───────
   Antes ocupaba ~25 % vertical de la pantalla; reducido para que el
   visor 3D respire. Tamaño táctil cómodo (~32 px alto, mínimo
   recomendado por Apple ~44 con padding interno suficiente para tap).
   Botones pasan de píldora completa (radius 999px) a píldora
   suave (radius 12px) y labels en una sola línea. */
@media (pointer: coarse) {
  .ed-elem-bar {
    bottom: 14px;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 18px;
  }
  .ed-elem-bar-name { font-size: 14px; }
  .ed-elem-bar-pos  { font-size: 12px; }
  .ed-eb-w {
    width: 60px;
    font-size: 14px;
    padding: 5px 6px;
    border-radius: 6px;
    min-height: 30px;
  }
  .ed-elem-bar-actions { gap: 6px; }
  .ed-eb-btn {
    font-size: 13px;
    padding: 6px 12px;
    min-height: 32px;
    min-width: 0;
    border-radius: 12px;
    white-space: nowrap;
    line-height: 1.15;
  }
  /* ⚠️ v465.255 — LOS CHIPS DE LA FILA DE DATOS, A LA ALTURA DE LAS CASILLAS.
     Juan: «Balda, alinear los chips y textos». Medido sobre su barra: la casilla
     («Alt», «holg», «Grosor») va a 30 px de alto y radio 6, y el chip del LED a
     32 y radio 12 — o sea una pastilla más alta y mucho más redonda en medio de
     una fila de rectángulos. Igualados, la fila se lee de un tirón.
     ⚠️ ACOTADO A `.ed-elem-bar-pos`: los botones de ACCIÓN («Centrar», «Cambiar
     lado», «Eliminar») siguen siendo pastillas, que es lo que los distingue de
     un dato editable. */
  .ed-elem-bar-pos .ed-eb-btn { min-height: 30px; border-radius: 6px; }
  /* v465.257 — y el desplegable con ellos. ⚠️ Esta media es `(pointer: coarse)`:
     el banco corre con RATÓN y NO la aplica, así que todo lo que se iguale aquí
     hay que igualarlo TAMBIÉN en la regla de arriba, o se arregla sólo donde no
     se mira (lección de la v465.255). */
  .ed-elem-bar-pos .ed-eb-sel { min-height: 30px; border-radius: 6px; font-size: 13px; }
  .ed-eb-close { width: 36px !important; font-size: 18px !important; }
  .ed-eb-divy {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; color: rgba(251,246,233,0.95);
    white-space: nowrap;
  }
  .ed-eb-divy .ed-eb-w { width: 56px; min-height: 30px; font-size: 13px; }
  .ed-eb-mini { padding: 4px 9px !important; font-size: 12px !important; min-height: 28px !important; }
}

/* ── MODALS EXTRA ────────────────────────────────────────────── */
.modal-sm .modal-box { max-width: 400px; }
.modal-lg .modal-box { max-width: 760px; }

/* ── v459.43: modal "Diseño del frente" ─────────────────────────
   Carpetas por estilo decorativo + tarjetas con preview SVG. */
.diseno-folder { margin-bottom: 18px; }
.diseno-folder-title {
  font: 600 12px/1.4 var(--sans, Inter, system-ui, sans-serif);
  color: var(--ink-faint, #666);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 8px;
}
.diseno-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.diseno-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .04s;
}
.diseno-card:hover { border-color: rgba(0,0,0,0.25); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.diseno-card:active { transform: scale(0.99); }
.diseno-card.selected { border-color: #B89968; box-shadow: 0 0 0 2px rgba(184,153,104,0.25); }
.diseno-card-svg {
  width: 100%; aspect-ratio: 3 / 4;
  display: block; border-radius: 6px;
  background: #F7F4EE;
}
.diseno-card-label {
  font: 600 13px/1.2 var(--sans, Inter, system-ui, sans-serif);
  color: #1A1A1A;
}
.diseno-card-desc {
  font: 400 11px/1.3 var(--sans, Inter, system-ui, sans-serif);
  color: #666;
}
.ed-eb-mini {
  padding: 3px 8px !important;
  font-size: 11px !important;
}

/* ── v459.47: panel flotante "Frente correderas" ─────────────────
   Estrecho, movible por la cabecera, no tapa el visor 3D. */
.floating-panel {
  position: fixed;
  /* v459.49: pegado totalmente al borde derecho — encima del catálogo
     de elementos (.ed-right), que no se usa mientras se está editando
     el frente. El drag del head lo puede mover a donde quiera el usuario. */
  top: 90px; right: 4px; left: auto;
  /* v465.223: 280 → 268, el ancho de las dos columnas. Flotando o anclado el modal
     mide lo mismo, que es lo que pidió Adrián («con todo lo que nace de ahí»).
     El número va a pelo porque el panel cuelga del BODY, fuera de `#screen-editor`,
     así que `--ed-right-w` no se resuelve aquí. */
  width: 268px;
  max-height: calc(100vh - 110px);
  background: #1F1B17;
  color: #FBF6E9;
  border: 1px solid rgba(184,153,104,0.30);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  z-index: 9000;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: var(--sans, Inter, system-ui, sans-serif);
}
.floating-panel.hidden { display: none; }
.fp-head {
  display: flex; align-items: center; justify-content: space-between;
  /* ⚠️ v465.241 — SE ENVUELVE, y hace falta. Con el título a 16 px y el chip de
     veta + sus dos dibujos al lado, en la columna de 268 px no caben los dos: sin
     esto el título se partía en «Frente / correderas», que es justo lo contrario de
     «más legible». Envolviendo, el título se queda entero en su línea y los
     controles bajan a la siguiente — y con un título corto siguen a su lado. */
  flex-wrap: wrap; row-gap: 6px;
  padding: 8px 12px;
  background: rgba(184,153,104,0.18);
  border-bottom: 1px solid rgba(184,153,104,0.25);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.fp-head:active { cursor: grabbing; }
.fp-title { font-weight: 600; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; }
.fp-close {
  background: transparent; border: none; color: inherit;
  cursor: pointer; padding: 4px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fp-close:hover { background: rgba(255,255,255,0.10); }
/* ⚠️ v465.223 — LA ✕ ERA INVISIBLE, y lo era desde siempre: su `<svg>` son dos `<line>`
   sin atributos de trazo, así que caía en el `fill: currentColor` por defecto (un
   relleno NEGRO sobre el panel oscuro) con `stroke: none`. Medido: el botón estaba en
   su sitio, con sus 24×24, y no se veía nada.
   Adrián lo pidió expresamente: «una x arriba visible siempre para cerrar la edición»
   — y ANCLADO es la única salida que se ve, así que no es un detalle. */
.fp-close svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* ── v465.241 — «GIRAR VETA» EN LA CABECERA, al lado del título (Juan, 27/09) ──
   El rótulo es SIEMPRE «Girar veta»: lo que dice si está puesto es el color y el
   punto que late, no el texto (así el chip no cambia de ancho en cada toque).
   Los dos dibujos van SIN rótulo debajo.
   ⚠️ 2ª vuelta (Juan): el chip va ENCIMA de los dos dibujos, no a su lado — «de esta
   manera se verá mejor y tiene más protagonismo». Apilado, el chip ocupa toda la
   anchura de la fila y los dibujos quedan de pie de foto. */
.fp-head-veta {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  margin-left: auto;
}
.fp-veta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(184,153,104,0.45);
  background: transparent; color: inherit;
  font: 700 12.5px var(--sans); letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
}
.fp-veta-chip:hover { background: rgba(184,153,104,0.16); }
/* ⚠️ EL PUNTO ES LO QUE LATE, NO EL CHIP ENTERO. Un botón parpadeando a pantalla
   completa en el iPad cansa y tira de la mirada justo donde no estás trabajando;
   un punto de 7 px se ve de reojo y no molesta.
   ⚠️ EL COLOR ES **VERDE OLIVA**, y no es un gusto: en tinta se fundía con la barra
   negra que tiene justo encima («si se pone negro se funde casi con el color de
   arriba que es negro también», Juan). El oliva es el único color de la paleta que
   no está ya cogido — el oro es «elegido» y el terracota es «borrar». */
.fp-veta-chip.on {
  background: var(--olive, #6E6A3F); border-color: var(--olive, #6E6A3F);
  color: #FFFFFF;
}
.fp-veta-chip.on:hover { background: #7D7947; }
.fp-veta-led {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(184,153,104,0.45);
}
.fp-veta-chip.on .fp-veta-led {
  background: #F4ECD7;
  box-shadow: 0 0 0 0 rgba(244,236,215,0.85);
  animation: fpVetaLatido 1.35s ease-out infinite;
}
@keyframes fpVetaLatido {
  0%   { box-shadow: 0 0 0 0 rgba(244,236,215,0.85); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(244,236,215,0); opacity: .6; }
  100% { box-shadow: 0 0 0 0 rgba(244,236,215,0); opacity: 1; }
}
/* Quien pide menos movimiento se queda con el color, que ya distingue de sobra. */
@media (prefers-reduced-motion: reduce) {
  .fp-veta-chip.on .fp-veta-led { animation: none; }
}
.fp-veta-ejs { display: inline-flex; align-items: center; gap: 6px; pointer-events: none; }
.fp-veta-ej {
  display: block; width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid rgba(184,153,104,0.45);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.40);
}
.fp-body {
  padding: 8px 10px 12px;
  overflow-y: auto;
}
.fp-section { margin-top: 10px; }
.fp-section:first-child { margin-top: 4px; }
/* v465.233 — carpeta de dibujos ANIDADA dentro de «Diseño» (Lacados, F-M, Fresados).
   Se sangra y se le quita el filete de sección de primer nivel para que se lea como
   lo que es: una carpeta de dentro, no otra sección del panel. */
.fp-section.fp-sec-anidada { margin-top: 6px; padding-left: 8px; border-left: 2px solid rgba(0,0,0,.10); }
.fp-section.fp-sec-anidada > .fp-section-title { font-size: 10px; opacity: .92; }
.fp-section-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(251,246,233,0.55);
  margin-bottom: 5px;
  font-weight: 600;
}
/* ── v465.222 · las secciones del panel son DESPLEGABLES ─────────────────
   Pedido por Adrián: «con desplegables en esa barra de cada cosa». La cabecera
   es un <button> a todo el ancho (se pulsa con el dedo sin apuntar) y el cuerpo
   se esconde con `display:none`, no con alto 0: así no deja hueco. */
.fp-sec-plegable > .fp-sec-h {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 7px 0; margin: 0 0 2px;
  background: none; border: 0; cursor: pointer;
  text-align: left; min-height: 34px;
  border-bottom: 1px solid rgba(251,246,233,0.10);
}
.fp-sec-caret { font-size: 11px; opacity: .8; transition: transform .15s ease; }
.fp-sec-plegable.cerrado .fp-sec-caret { transform: rotate(-90deg); }
.fp-sec-plegable.cerrado > .fp-sec-body { display: none; }
.fp-sec-body { padding-top: 5px; }
.fp-sec-lbl { font-size: 12px; color: rgba(251,246,233,0.7); min-width: 74px; }
.fp-chip.fp-chip-danger {
  color: #E8776B; border-color: rgba(232,119,107,0.45);
}
.fp-chip.fp-chip-danger:hover { background: rgba(232,119,107,0.14); }
.fp-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fp-chip {
  font-size: 12px;
  padding: 5px 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(184,153,104,0.25);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.fp-chip:hover { background: rgba(255,255,255,0.13); }
.fp-chip.selected {
  background: rgba(184,153,104,0.28);
  border-color: rgba(184,153,104,0.7);
  color: #FBF6E9;
}
.fp-chip.disabled {
  opacity: 0.4; pointer-events: none;
}
.fp-chip.fp-folder-open {
  background: rgba(184,153,104,0.16);
  border-color: rgba(184,153,104,0.45);
}
/* v459.56: cards expandidas dentro de una carpeta abierta (p.ej. Japonesa). */
.fp-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 6px;
  /* v459.57: cuando crezca el catálogo, scroll vertical interno.
     Mantenemos el panel del frente con tamaño acotado. */
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}
.fp-cards::-webkit-scrollbar { width: 5px; }
.fp-cards::-webkit-scrollbar-thumb { background: rgba(184,153,104,0.30); border-radius: 3px; }
.fp-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(184,153,104,0.25);
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background .12s, border-color .12s, transform .04s;
}
.fp-card:hover { background: rgba(255,255,255,0.13); border-color: rgba(184,153,104,0.55); }
.fp-card:active { transform: scale(0.99); }
.fp-card.selected {
  background: rgba(184,153,104,0.28);
  border-color: rgba(184,153,104,0.75);
}
.fp-card-svg {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  border-radius: 6px;
  background: #FBF6E9;
  overflow: hidden;
}
.fp-card-svg svg { display: block; width: 100%; height: 100%; }
.fp-card-label {
  font: 600 12px/1.2 var(--sans, Inter, system-ui, sans-serif);
}
.fp-card-desc {
  font: 400 10px/1.3 var(--sans, Inter, system-ui, sans-serif);
  color: rgba(251,246,233,0.55);
}
.fp-subfolder { margin-top: 6px; }
.fp-subfolder-title {
  font-size: 10px;
  color: rgba(251,246,233,0.45);
  margin-bottom: 3px;
  padding-left: 2px;
}
.fp-input-row {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px;
}
.fp-input-row input {
  width: 56px; padding: 4px 6px;
  background: rgba(255,255,255,0.06);
  color: inherit;
  border: 1px solid rgba(184,153,104,0.30);
  border-radius: 4px;
  font: inherit; text-align: center;
  outline: none;
}
.fp-input-row input:focus { border-color: var(--gold); }
.fp-reset {
  font-size: 11px; padding: 3px 7px;
  background: transparent;
  border: 1px solid rgba(184,153,104,0.30);
  border-radius: 6px; color: inherit;
  cursor: pointer; font-family: inherit;
  margin-left: 4px;
}
.fp-reset:hover { background: rgba(255,255,255,0.08); }

/* ── Modal MAESTRO (Fase 3 + hotfix v257/v259) ────────────────
   Panel lateral pegado a la derecha (no oscurece la escena 3D).
   Click en una fila resalta la balda en la escena para identificarla.
   v259: anulamos backdrop-filter del .modal-bg general (que dejaba la
   escena borrosa) y reducimos el panel a 360px para que no tape tanto. */
#modal-maestro #modal-maestro-bg {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}
.modal-maestro-box {
  position: fixed !important;
  top: 64px !important;
  right: 10px !important;
  bottom: 60px !important;
  margin: 0 !important;
  width: 360px !important;
  max-width: 360px !important;
  height: auto !important;
  max-height: calc(100vh - 130px) !important;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.modal-maestro-box .modal-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
}
.maestro-summary {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; padding: 8px 10px; margin-bottom: 10px;
  background: var(--bg-soft); border-radius: var(--radius-md);
  font-size: 12px; color: var(--ink);
}
.maestro-counter-extra { font-size: 11px; opacity: 0.7; }
/* v465.328: «Ver herrajes en el 3D». El modal deja pasar el dedo fuera del panel para GIRAR el
   armario con MAESTRO abierto (el fondo ya era transparente, pero la capa del modal tapaba el 3D). */
#modal-maestro { pointer-events: none; }
/* v465.406 — con MAESTRO abierto la barra de la pieza tocada no sale: desde ella se movía (Alt, posición)
   o se borraba. Juan (08/10): «no se puedan mover mientras tanto, hasta que no salga del modo Maestro». */
body:has(#modal-maestro:not(.hidden)) #ed-elem-bar { display: none !important; }
#modal-maestro .modal-maestro-box { pointer-events: auto; }
.maestro-herrajes {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 12px; color: var(--ink);
}
.maestro-herrajes-chk { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.maestro-herrajes-ley { display: none; gap: 12px; font-size: 11px; }
.maestro-ver-herrajes .maestro-herrajes-ley { display: flex; }
.maestro-herrajes-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.maestro-list { display: flex; flex-direction: column; gap: 6px; }
.maestro-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.maestro-row:hover  { border-color: #888; }
.maestro-row.swap-active { border-color: #6BB37C; background: #F2FAF4; }
/* v465.456: la fila de la pieza tocada (en el 3D o aquí), bien a la vista: el mismo amarillo que la pieza en el 3D */
.maestro-row.row-focused, .maestro-row.swap-active.row-focused {
  border-color: #E0A800; background: #FFF4C2; box-shadow: 0 0 0 2px #FFCC00, inset 5px 0 0 #FFAA00;
}
/* v265: grupo con libraryRef ya aplicado (persistido) — borde verde
   más intenso a la izquierda. La marca .swap-active es para la decisión
   en sesión actual; .applied es para el estado real del proyecto. */
.maestro-row.applied { border-left: 3px solid #22AA44; }
.maestro-applied-tick {
  display: inline-block; color: #22AA44; font-weight: 700;
  margin-right: 5px; font-size: 14px; line-height: 1;
}
.maestro-row-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.maestro-row-id { font-weight: 600; color: var(--ink); font-size: 12px; }
.maestro-row-meta { font-size: 10px; color: var(--ink-soft); }
.maestro-row-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  font-size: 11px;
}
.maestro-row-grid label { display: block; font-size: 10px; opacity: 0.75; margin-bottom: 2px; }
/* v465.323: las casillas de texto (Trasera/Frontal) se salían por la derecha en el iPad — también
   aquí, y las columnas pueden encoger (`min-width: 0`). */
.maestro-row-grid > * { min-width: 0; }
.maestro-row-grid select,
.maestro-row-grid input[type="text"],
.maestro-row-grid input[type="number"] {
  width: 100%; box-sizing: border-box;
  padding: 4px 6px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 11px;
  background: var(--bg);
}
.maestro-row-grid .full-row { grid-column: 1 / -1; }
.maestro-row-extras-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.maestro-row.no-compatible { opacity: 0.55; cursor: default; }
.maestro-row.no-compatible .maestro-row-meta { color: #C0563E; }
.mm-field { display: flex; align-items: center; gap: 6px; }
.mm-input {
  flex: 1; font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; text-align: right;
}
.mm-input:focus { outline: none; border-color: var(--gold); }
.mm-field span { font-family: var(--sans); font-size: 13px; color: var(--ink-mute); }
.opt-grid { display: grid; gap: 6px; margin-top: 4px; }
.opt-btn {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--ink-mute); background: var(--bg-soft);
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: 7px 4px; cursor: pointer; text-align: center;
  transition: all 0.15s;
}
.opt-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.opt-btn.active { border-color: var(--gold); background: rgba(184,153,104,0.1); color: var(--gold-deep); }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }
.btn-row { align-items: center; margin-top: 4px; }

/* cajonera rows */
.caj-cajon-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0; border-bottom: 1px solid var(--line-soft);
}
.caj-cajon-row:last-child { border-bottom: none; }
.caj-cajon-row select {
  flex: 1; font-family: var(--sans); font-size: 12px;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 6px;
}
.caj-cajon-row select:focus { outline: none; border-color: var(--gold); }
.caj-cajon-row button {
  width: 22px; height: 22px; border: none; background: none;
  color: var(--ink-faint); font-size: 16px; cursor: pointer;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.caj-cajon-row button:hover { color: var(--terra); }

/* v465.144 — chip de fila DOBLE (dos cajones iguales en el mismo hueco). */
.caj-cajon-row button.caj-dob-btn {
  width: 34px; height: 24px; flex: 0 0 auto;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--ink-faint); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 6px;
}
.caj-cajon-row button.caj-dob-btn.on {
  color: #fff; background: var(--ink); border-color: var(--ink);
}
.caj-cajon-row button.caj-dob-btn:hover { color: var(--terra); }
.caj-cajon-row button.caj-dob-btn.on:hover { color: #fff; opacity: .85; }

/* ── HELPERS ─────────────────────────────────────────────────── */
.full { width: 100%; }
.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════
   EDITOR — DARK LUXURY THEME
   Paneles oscuros con acento dorado para máximo contraste
   con el 3D
   ════════════════════════════════════════════════════════════ */

/* Editor background */
#screen-editor { background: #0C0A08; }
.ed-layout { background: #0C0A08; }
/* v465.249 — el pie del panel izquierdo (marca Confiwood) es OPACO y del color
   del panel: va `sticky`, así que sin fondo se le vería pasar el contenido. */
#screen-editor .ed-brand { background: #0C0A08; }

/* Top bar */
#screen-editor .ed-topbar {
  background: rgba(16,13,10,0.97);
  border-bottom-color: rgba(184,153,104,0.18);
  box-shadow: 0 1px 0 rgba(184,153,104,0.08), 0 2px 16px rgba(0,0,0,0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
#screen-editor .ed-back-btn { color: rgba(184,153,104,0.6); }
#screen-editor .ed-back-btn:hover { background: rgba(184,153,104,0.1); color: var(--gold); }
#screen-editor .ed-project-name {
  color: rgba(251,246,233,0.92);
  font-size: 16px; letter-spacing: 0.02em;
}
#screen-editor .ed-tool { color: rgba(184,153,104,0.8); }
#screen-editor .ed-tool:hover { background: rgba(184,153,104,0.09); color: var(--gold); }
#screen-editor .ed-tool.active { color: var(--gold); background: rgba(184,153,104,0.14); }
#screen-editor .ed-sep { background: rgba(184,153,104,0.14); }
#screen-editor .ed-tool-accent {
  background: linear-gradient(135deg, rgba(184,153,104,0.22) 0%, rgba(142,115,64,0.28) 100%);
  color: var(--gold);
  border: 1px solid rgba(184,153,104,0.35);
}
#screen-editor .ed-tool-accent:hover { background: rgba(184,153,104,0.28); }

/* Left panel */
#screen-editor .ed-left {
  background: linear-gradient(180deg, #141210 0%, #120F0D 100%);
  border-right-color: rgba(184,153,104,0.12);
}
#screen-editor .ed-left::-webkit-scrollbar { width: 3px; }
#screen-editor .ed-left::-webkit-scrollbar-thumb { background: rgba(184,153,104,0.18); border-radius: 2px; }

/* Right panel */
#screen-editor .ed-right {
  background: linear-gradient(180deg, #141210 0%, #120F0D 100%);
  border-left-color: rgba(184,153,104,0.12);
}
#screen-editor .ed-right::-webkit-scrollbar { width: 3px; }
#screen-editor .ed-right::-webkit-scrollbar-thumb { background: rgba(184,153,104,0.18); border-radius: 2px; }

/* Section headers */
#screen-editor .ed-section {
  border-bottom-color: rgba(184,153,104,0.08);
}
#screen-editor .ed-section-hd {
  color: rgba(184,153,104,0.5);
  letter-spacing: 0.08em;
}
#screen-editor .ep-sec-title {
  color: rgba(184,153,104,0.45);
  letter-spacing: 0.07em;
}

/* Row labels and inputs */
#screen-editor .ed-row-label { color: rgba(220,210,190,0.45); }
#screen-editor .ed-row input,
#screen-editor .ed-row select {
  background: rgba(255,255,255,0.05);
  border-color: rgba(184,153,104,0.18);
  color: rgba(240,230,210,0.9);
}
#screen-editor .ed-row input:focus,
#screen-editor .ed-row select:focus {
  border-color: rgba(184,153,104,0.6);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 2px rgba(184,153,104,0.12);
}
#screen-editor .ed-row input::placeholder { color: rgba(184,153,104,0.3); }

/* Form hints */
#screen-editor .form-hint { color: rgba(184,153,104,0.35); }

/* Buttons dark */
#screen-editor .btn-outline {
  border-color: rgba(184,153,104,0.25);
  color: rgba(184,153,104,0.7);
  background: transparent;
}
#screen-editor .btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(184,153,104,0.08);
}
#screen-editor .btn-sm {
  background: rgba(255,255,255,0.05);
  border-color: rgba(184,153,104,0.2);
  color: rgba(220,210,190,0.7);
}
#screen-editor .btn-sm:hover {
  background: rgba(184,153,104,0.1);
  color: var(--gold);
}
#screen-editor .icon-btn { color: rgba(184,153,104,0.5); }
#screen-editor .icon-btn:hover { color: var(--gold); background: rgba(184,153,104,0.1); }

/* Palette chips */
#screen-editor .ep-chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(184,153,104,0.14);
  color: rgba(220,210,190,0.75);
}
#screen-editor .ep-chip:hover {
  background: rgba(184,153,104,0.1);
  border-color: rgba(184,153,104,0.4);
  color: var(--gold);
}
#screen-editor .ep-chip.dragging { opacity: 0.5; }

/* Module cards */
#screen-editor .mod-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(184,153,104,0.14);
}
#screen-editor .mod-card-label { color: rgba(184,153,104,0.6); }
#screen-editor .mod-card input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(184,153,104,0.2);
  color: rgba(240,230,210,0.9);
}
#screen-editor .mod-card-del { color: rgba(184,153,104,0.3); }
#screen-editor .mod-card-del:hover { color: #ff6b5a; }

/* Obstacle items */
#screen-editor .obs-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(184,153,104,0.14);
  color: rgba(220,210,190,0.8);
}
#screen-editor .obs-item-edit { color: rgba(184,153,104,0.5); }
#screen-editor .obs-item-del { color: rgba(184,153,104,0.3); }

/* Material swatches label */
#screen-editor .mat-option {
  border-color: rgba(184,153,104,0.15);
}
#screen-editor .mat-option.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184,153,104,0.25); }
#screen-editor .mat-label { color: rgba(220,210,190,0.55); }

/* Door / puerta controls */
.ed-door-ctrl {
  background: rgba(14,12,9,0.9);
  border-top-color: rgba(184,153,104,0.14);
}
.ed-door-ctrl label { color: rgba(184,153,104,0.55); }
input[type=range].door-slider {
  accent-color: var(--gold);
}

/* Element bar (bottom) */
.ed-elem-bar {
  background: rgba(14,12,9,0.94);
  border-top-color: rgba(184,153,104,0.18);
  backdrop-filter: blur(12px);
}

/* Fit button */
/* ⚠️ v465.246 — RETIRADO el fondo OSCURO que este botón llevaba sólo en el
   editor. Cuando flotaba solo a media altura del canto derecho no se notaba;
   ahora va en FILA con «planta», «tabiques» y «luz», que son claros, y salía un
   cuadrado negro en medio de los seis. Se queda con el estilo común de
   `.ed-fit-btn` de arriba, que es el mismo de sus vecinos. */
.ed-fit-btn:hover { background: rgba(184,153,104,0.12); color: var(--gold); }

/* Canvas placeholder */
#ed-placeholder {
  background: transparent;
  color: rgba(184,153,104,0.35);
}
#ed-placeholder svg { stroke: rgba(184,153,104,0.2); }
#ed-placeholder p { color: rgba(184,153,104,0.35); }

/* ── PANEL COLLAPSE TABS ────────────────────────────────────── */
.ed-left, .ed-right {
  transition: width 0.26s ease, min-width 0.26s ease, opacity 0.22s ease;
}
.ed-left.collapsed  { width: 0 !important; min-width: 0 !important; opacity: 0; overflow: hidden; }
.ed-right.collapsed { width: 0 !important; min-width: 0 !important; opacity: 0; overflow: hidden; }

/* Tab buttons — float over canvas edge */
.ed-layout { position: relative; }
.ed-panel-tab {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 60;
  width: 18px; height: 52px;
  background: rgba(20,18,14,0.88);
  border: 1px solid rgba(184,153,104,0.22);
  color: rgba(184,153,104,0.65);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, left 0.26s ease, right 0.26s ease;
  backdrop-filter: blur(8px);
}
.ed-panel-tab svg { transition: transform 0.26s ease; }
.ed-panel-tab:hover { background: rgba(184,153,104,0.15); color: var(--gold); }
/* Pegadas al canto de su panel — el ancho sale de la MISMA variable que el
   panel (ver «EL ANCHO DE LOS PANELES, EN UN SOLO SITIO»), no de un número
   repetido: así la pestaña no se puede quedar dentro al cambiar el ancho. */
.ed-panel-tab-left  { left: var(--ed-left-w); border-radius: 0 6px 6px 0; border-left: none; }
.ed-panel-tab-right { right: var(--ed-right-w); border-radius: 6px 0 0 6px; border-right: none; }

/* Collapsed state — tabs slide to screen edge. v456.95: respetar la
   safe-area lateral para que la Dynamic Island del iPhone no tape el
   botón cuando el panel está cerrado. En iPad / desktop --safe-left
   y --safe-right son 0, así que no afecta. */
#screen-editor.left-collapsed  .ed-panel-tab-left  { left: var(--safe-left); }
#screen-editor.right-collapsed .ed-panel-tab-right { right: var(--safe-right); }
#screen-editor.left-collapsed  .ed-panel-tab-left  svg { transform: rotate(180deg); }
#screen-editor.right-collapsed .ed-panel-tab-right svg { transform: rotate(180deg); }

/* Dark-theme overrides for toggle-btn inside editor */
#screen-editor .ep-collapsible .ep-toggle-btn {
  color: rgba(184,153,104,0.5);
}
#screen-editor .ep-collapsible .ep-toggle-btn:hover { color: var(--gold); }
#screen-editor .ep-collapsible .ep-toggle-btn { color: rgba(226,214,190,0.86); }
#screen-editor .ep-collapsible.open .ep-toggle-btn   { color: rgba(184,153,104,0.92); }
/* El resumen, en el panel oscuro del editor: gris claro legible, no dorado
   apagado — es un dato que hay que poder leer de un vistazo. */
#screen-editor .ep-block-val { color: rgba(222,212,192,0.60); }

/* ── PERFORMANCE TÁCTIL EN IPAD ────────────────────────────── */
/* touch-action: manipulation elimina el delay de 300ms que iOS aplica
   en cada toque para detectar doble-tap-zoom. Sin esto, los botones
   "tardan" en responder y dan sensación de lentitud. */
button,
.ed-tool, .ed-tool-accent, .ed-tool-asana,
.ed-eb-btn, .icon-btn, .fab,
.btn-secondary, .btn-primary, .btn-danger,
.ed-door-btn, .tipo-frente-btn, .patas-btn,
.project-card, .vivienda-header,
.modal-close, .back-btn, .card-delete-btn,
.vivienda-rename, .vivienda-delete,
.update-banner-btn, .ep-toggle-btn, .ep-add-inline,
.ep-btn-sm, .ep-ctr, input[type="checkbox"],
input[type="number"], select {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── BADGE DE VERSIÓN ───────────────────────────────────────── */
.version-badge {
  position: fixed;
  bottom: 8px;
  right: 8px;
  /* v459.658: por DEBAJO de los paneles flotantes (frente = 9000) para que no
     tape el botón Reset de las variables del frente. Se ve cuando no hay panel
     abierto; si el panel del frente está abierto, queda detrás (correcto). */
  z-index: 8000;
  font: 600 11px var(--sans);
  color: rgba(184,153,104,0.85);
  background: rgba(14,12,9,0.85);
  border: 1px solid rgba(184,153,104,0.3);
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: background 0.15s, border-color 0.15s;
}
.version-badge:hover {
  background: rgba(20,16,12,0.95);
  border-color: rgba(184,153,104,0.6);
}
/* v463.97: canal ESTABLE (vifren-estable.pages.dev) — verde, para distinguirlo
   de un vistazo del canal de producción, que mantiene el dorado de siempre. */
.version-badge.is-estable {
  color: rgba(150,214,160,0.95);
  border-color: rgba(150,214,160,0.45);
}
.version-badge.is-estable:hover {
  border-color: rgba(150,214,160,0.8);
}
@media (pointer: coarse) {
  .version-badge { font-size: 13px; padding: 6px 12px; }
}

/* ── BANNER DE ACTUALIZACIÓN ────────────────────────────────── */
.update-banner {
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font: 600 14px var(--sans);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  animation: bannerSlide 0.4s cubic-bezier(0.2, 0.9, 0.4, 1);
}
.update-banner.hidden { display: none; }
.update-banner-text { white-space: nowrap; }
.update-banner-btn {
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font: 600 13px var(--sans);
  cursor: pointer;
  transition: background 0.15s;
}
.update-banner-btn:hover { background: rgba(255,255,255,0.4); }
@keyframes bannerSlide {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (pointer: coarse) {
  .update-banner { padding: 14px 22px; font-size: 16px; }
  .update-banner-btn { padding: 8px 18px; font-size: 15px; min-height: 36px; }
}

/* ── MODAL NOTAS DE VERSIÓN ─────────────────────────────────── */
.release-notes-modal {
  position: fixed; inset: 0;
  z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.release-notes-modal.hidden { display: none; }
.release-notes-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.release-notes-content {
  position: relative;
  background: #161310;
  border: 1px solid rgba(184,153,104,0.35);
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  overflow: hidden;
}
.release-notes-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(184,153,104,0.2);
  background: linear-gradient(135deg, rgba(184,153,104,0.15), transparent);
}
.release-notes-header h2 {
  margin: 0;
  font: 600 18px var(--sans);
  color: rgba(184,153,104,0.95);
  letter-spacing: 0.3px;
}
.release-notes-close {
  background: transparent;
  border: none;
  color: rgba(184,153,104,0.85);
  font-size: 28px;
  line-height: 1;
  width: 36px; height: 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.release-notes-close:hover { background: rgba(184,153,104,0.15); }
.release-notes-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #e8e3da;
  font: 14px/1.55 var(--sans);
}
.release-notes-loading {
  text-align: center;
  color: rgba(184,153,104,0.7);
  padding: 30px 0;
}
.rn-release {
  margin-bottom: 22px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(184,153,104,0.15);
  border-radius: 10px;
}
.rn-release.rn-current {
  border-color: rgba(184,153,104,0.5);
  background: rgba(184,153,104,0.08);
}
.rn-release.rn-focus {
  box-shadow: 0 0 0 2px rgba(184,153,104,0.5);
}
.rn-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.rn-version {
  margin: 0;
  font: 700 16px var(--sans);
  color: rgba(184,153,104,0.95);
}
.rn-current-tag {
  display: inline-block;
  margin-left: 6px;
  font: 600 10px var(--sans);
  background: rgba(184,153,104,0.25);
  color: rgba(184,153,104,1);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.rn-date {
  font: 500 12px var(--sans);
  color: rgba(232,227,218,0.55);
}
.rn-title {
  margin: 4px 0 6px;
  font: 600 14px var(--sans);
  color: #f5efe2;
}
.rn-summary {
  margin: 0 0 10px;
  font: 13px/1.5 var(--sans);
  color: rgba(232,227,218,0.78);
}
.rn-changes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.rn-item {
  font: 13px/1.45 var(--sans);
  color: #e8e3da;
  padding: 4px 0 4px 0;
}
.rn-tag {
  display: inline-block;
  font: 600 11px var(--sans);
  margin-right: 6px;
  letter-spacing: 0.2px;
}
.rn-added .rn-tag    { color: #8fcf8f; }
.rn-fixed .rn-tag    { color: #e3b25b; }
.rn-changed .rn-tag  { color: #6fb6e3; }
.rn-removed .rn-tag  { color: #d97f7f; }
.rn-security .rn-tag { color: #d18bd1; }
@media (pointer: coarse) {
  .release-notes-header h2 { font-size: 20px; }
  .release-notes-body { font-size: 15px; padding: 18px 20px 22px; }
  .rn-version { font-size: 17px; }
  .rn-title { font-size: 15px; }
  .rn-item { font-size: 14px; padding: 6px 0; }
}
@media (max-width: 480px) {
  .release-notes-modal { padding: 8px; }
  .release-notes-content { max-height: 92vh; border-radius: 10px; }
  .release-notes-header { padding: 12px 16px; }
  .release-notes-body { padding: 12px 16px 16px; }
}

/* ─── Login: campo usuario ──────────────────────────────────── */
.login-user-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.login-user-input {
  width: 240px;
  text-align: center;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.04em;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-user-input:focus {
  outline: none;
  border-color: var(--ink-soft);
}
.login-user-input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
/* v462.0: acceso por email (clientes) */
/* .login-pin/.login-email tienen display:flex → el atributo [hidden] no basta; forzamos. */
.login-pin[hidden], .login-email[hidden] { display: none !important; }
.login-email { display: flex; flex-direction: column; align-items: center; gap: 0; }
.login-email .login-user-input { width: 280px; }
.login-email .btn-primary { width: 280px; max-width: 280px; }
.login-switch {
  display: inline-block; margin-top: 18px; font-size: 14px; color: var(--accent, #b89968);
  text-decoration: none; cursor: pointer; font-family: var(--sans);
}
.login-switch:hover { text-decoration: underline; }
/* v465.62: tras confundirse dos veces con la contraseña, el enlace para pedir
   una nueva se destaca — es la salida, no un enlace más del pie. */
.login-switch.destacado {
  font-weight: 700; text-decoration: underline;
  padding: 7px 16px; border: 1.5px solid currentColor; border-radius: 999px;
}
/* v462.9: acceso de cliente destacado (chip) bajo el subtítulo. */
.login-client-cta {
  display: inline-block; margin: 4px auto 22px; padding: 11px 22px;
  border: 1.5px solid var(--accent, #b89968); border-radius: 999px;
  color: var(--accent2, #8A5A1E); background: transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.login-client-cta:hover { background: var(--accent, #b89968); color: #fff; }
.login-client-cta[hidden] { display: none !important; }
#login-email-hint { min-height: 18px; margin: 10px 0 2px; }

/* v462.2: CLICKWRAP — bloqueo de Condiciones de uso (clientes). */
.terms-overlay {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(24, 18, 12, 0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.terms-overlay.hidden { display: none !important; }
body.terms-locked { overflow: hidden; }
.terms-card {
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  background: var(--paper, #fff); color: var(--ink, #1c1712);
  border-radius: 18px; padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); font-family: var(--sans);
}
.terms-head { text-align: center; margin-bottom: 12px; }
.terms-logo { font-weight: 800; font-size: 20px; color: var(--ink, #1c1712); }
.terms-logo b { color: var(--accent, #b89968); }
.terms-head h3 { margin: 6px 0 0; font-size: 22px; }
.terms-intro { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft, #4a4034); margin: 4px 0 14px; }
.terms-link-row { margin: 0 0 16px; text-align: center; }
.terms-link-row a { color: var(--accent, #b89968); font-weight: 700; text-decoration: none; font-size: 15px; }
.terms-link-row a:hover { text-decoration: underline; }
.terms-checkrow {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  background: var(--paper-2, #f6f1e7); border: 1px solid var(--line, #e6ddcc);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
  font-size: 14.5px; line-height: 1.45;
}
.terms-checkrow input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--accent, #b89968); }
.terms-checkrow input:disabled { opacity: 0.4; }
/* v462.7: recuadro con scroll del texto de las Condiciones (gate tipo Apple). */
.terms-scroll {
  max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line, #e6ddcc); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; background: var(--paper-2, #f6f1e7);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-soft, #4a4034);
}
.terms-scroll p { margin: 0 0 10px; }
.terms-scroll b { color: var(--ink, #1c1712); }
/* v465.9: la cláusula 4 de las Condiciones es una lista de cinco puntos. */
.terms-scroll ul { margin: 6px 0 10px; padding-left: 18px; }
.terms-scroll li { margin: 0 0 5px; }
#terms-end { height: 1px; }
.terms-scrollhint { font-size: 12.5px; color: var(--accent, #b89968); text-align: center; margin: 0 0 12px; font-weight: 600; }
.terms-scrollhint.done { display: none; }
.terms-btn {
  width: 100%; padding: 13px; border: none; border-radius: 12px;
  background: var(--accent, #b89968); color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; font-family: var(--sans); transition: opacity 0.15s, filter 0.15s;
}
.terms-btn:hover:not(:disabled) { filter: brightness(1.05); }
.terms-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.terms-foot { font-size: 12.5px; color: var(--ink-faint, #8a7d6a); margin: 14px 0 0; text-align: center; line-height: 1.5; }

/* v462.3: accesos por usuario en el panel de juan */
.au-accesos { margin-top: 4px; font-size: 12px; color: var(--ink-faint, #8a7d6a); }
.au-accesos summary { cursor: pointer; color: var(--accent, #b89968); font-weight: 600; }
.au-accesos > div { padding: 2px 0 0 8px; }
.au-warn { color: #c0392b; font-weight: 700; }

/* ─── Top bar: usuario + acciones ──────────────────────────── */
.top-bar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.top-bar-title { display: flex; flex-direction: column; align-items: center; line-height: 1; }
/* v459.979: marca Confiwood™ (misma tipografía que el logo) encima de "Mis Proyectos". */
.brand-word {
  font-family: var(--serif); font-size: 14px; font-weight: 300;
  color: var(--ink); line-height: 1; letter-spacing: 0.01em; margin-bottom: 2px;
}
.brand-word .brand-wood { font-style: italic; font-weight: 400; color: var(--gold-deep, #8E7340); }
.brand-word .brand-tm { font-size: 0.55em; vertical-align: super; opacity: 0.85; }
.top-bar-heading { font-family: var(--serif); font-size: 20px; font-weight: 400; }
.top-bar-user {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}
.top-bar-user.master { color: var(--accent, #b89968); }

.icon-btn.spinning svg { animation: spin 0.8s linear; transform-origin: center; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Modales: hint + secciones ────────────────────────────── */
.modal-hint {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin: -4px 0 6px;
}

/* ─── Compartir: lista de usuarios con checkbox ───────────── */
.share-list {
  display: flex; flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.share-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.share-row:hover, .share-row.checked {
  background: var(--paper);
  border-color: var(--ink-soft);
}
.share-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--ink);
}
.share-row-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.share-row-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-weight: 600;
}

/* ─── Admin: lista de usuarios + form nuevo ────────────────── */
.admin-users {
  display: flex; flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 8px;
}
.admin-diag-output {
  margin-top: 10px;
  padding: 12px;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.admin-user-row.master { border-color: var(--ink-soft); }
.admin-user-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 2px;
}
.admin-user-name .role-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-weight: 600;
}
.admin-user-name .role-badge.master { color: var(--accent, #b89968); }
/* v461.5: fila superior (nombre + insignias) y línea de info de prueba */
.admin-user-name .au-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-user-name .role-badge.plan-pro     { color: #2f8f57; }
.admin-user-name .role-badge.plan-basico  { color: var(--ink-mute); }
.admin-user-name .role-badge.plan-prueba  { color: #b4772a; }
.admin-user-meta { font-size: 11px; font-weight: 500; color: var(--ink-mute); letter-spacing: 0; text-transform: none; }
.admin-user-actions {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.admin-mini-btn {
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-mini-btn:hover { background: var(--bg); color: var(--ink); }
.admin-mini-btn.danger { color: var(--error); border-color: rgba(180,60,40,0.25); }
.admin-mini-btn.danger:hover { background: rgba(180,60,40,0.08); }
.admin-new-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
}
@media (max-width: 540px) {
  .admin-new-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   v419 — Permisos endurecidos, Copia, Habitación con fecha,
   última edición, indicador online/offline
   ════════════════════════════════════════════════════════════ */

/* Card en modo solo lectura (proyecto de otro propietario). */
.project-card.is-readonly { opacity: 0.78; }
.project-card.is-readonly:hover { opacity: 0.92; }
.project-card.is-readonly::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 14px,
      rgba(120,100,80,0.04) 14px,
      rgba(120,100,80,0.04) 15px
    );
}

/* Botón "Hacer una copia". Igual estilo que los otros, posición a la
   izquierda de delete/share/rename. Siempre visible (también para
   proyectos propios, para que el usuario pueda clonar plantillas). */
.card-copy-btn {
  position: absolute;
  top: 6px; right: 102px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(251,246,233,0.95);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.project-card:hover .card-copy-btn,
.project-card.show-delete .card-copy-btn { opacity: 1; }
.card-copy-btn:active { color: var(--gold-deep); }
@media (pointer: coarse) { .card-copy-btn { opacity: 1; } }
/* Para readonly cards, la copia es el ÚNICO botón visible → la pegamos a la
   derecha (donde normalmente está delete) en lugar de offset 102px. */
.project-card.is-readonly .card-copy-btn { opacity: 1; }   /* la fila flex ya lo pega a la derecha */

/* v425: botón "Mover" entre rename y copy.
   Layout actual: delete(6) · share(38) · rename(70) · move(102) · copy(134) */
.card-copy-btn { right: 134px; }
.card-move-btn {
  position: absolute;
  top: 6px; right: 102px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(251,246,233,0.95);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.project-card:hover .card-move-btn,
.project-card.show-delete .card-move-btn { opacity: 1; }
.card-move-btn:active { color: var(--gold-deep); }
.card-move-btn svg { stroke: currentColor; fill: none; }
@media (pointer: coarse) { .card-move-btn { opacity: 1; } }

/* v426: en iPad/táctil los 5 botones de acción crecen a 32×32 con más
   espaciado y la card-info abre más padding-top para no solaparse.
   v459.35: tras el refactor a fila flex (.card-actions), basta con cambiar
   width/height en el contenedor — los `right:Xpx` por botón ya estaban
   neutralizados por `position:static` y se han quitado. */
@media (pointer: coarse) {
  .card-actions { gap: 6px; }
  .card-actions > button { width: 32px; height: 32px; font-size: 15px; }
  .card-delete-btn svg,
  .card-share-btn svg,
  .card-rename-btn svg,
  .card-move-btn svg { width: 17px; height: 17px; }
  .project-card-info { padding: 48px 10px 12px; }
  .project-card-thumb { height: 78px; }
  .project-card-name { font-size: 15px; }
  .project-card-address { font-size: 12px; }
  .card-last-edit { font-size: 12px; }
}

/* Última edición visible en la card. */
.card-last-edit {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--ink-mute);
  font-variant: tabular-nums;
}

/* v428: badge "📐 Lámina" — solo se renderiza si el proyecto tiene
   croquis de medición. Clicable, reabre la pantalla de medición con la
   lámina cargada. Diferencia visualmente cards medidas vs no medidas. */
.card-med-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 9px;
  background: rgba(45,110,160,0.10);
  border: 1px solid rgba(45,110,160,0.30);
  color: #2d6ea0;
  border-radius: var(--radius-pill);
  font: 600 11px var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  width: fit-content;
  transition: background 0.15s, color 0.15s;
}
.card-med-badge:hover { background: rgba(45,110,160,0.18); }
.card-med-badge:active { color: #1a4d75; }
/* v459.620: variante "crear" (armario sin lámina) — borde punteado y tono
   apagado para que se lea como acción de crear, no como lámina existente. */
.card-med-badge.is-empty {
  background: transparent;
  border-style: dashed;
  border-color: rgba(120,120,120,0.45);
  color: var(--ink-mute);
}
.card-med-badge.is-empty:hover {
  background: rgba(45,110,160,0.10);
  border-color: rgba(45,110,160,0.30);
  color: #2d6ea0;
}
.card-med-badge .hab-emoji { font-size: 13px; line-height: 1; }
@media (pointer: coarse) {
  .card-med-badge { padding: 5px 11px; font-size: 12.5px; }
  .card-med-badge .hab-emoji { font-size: 15px; }
}

/* Fase 3: badge tipoProyecto (trabajo / presupuesto). Siempre visible.
   Clicable como toggle para el owner del proyecto, informativo para el
   resto. */
.card-tipoproy-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font: 600 11px var(--sans);
  letter-spacing: 0.02em;
  width: fit-content;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.04);
  color: var(--ink-mute);
}
.card-tipoproy-badge.is-presup {
  background: rgba(196,140,55,0.13);
  border-color: rgba(196,140,55,0.40);
  color: #8a5a18;
}
.card-tipoproy-badge.is-toggle {
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.card-tipoproy-badge.is-toggle:hover {
  background: rgba(0,0,0,0.08);
}
.card-tipoproy-badge.is-presup.is-toggle:hover {
  background: rgba(196,140,55,0.22);
}
@media (pointer: coarse) {
  .card-tipoproy-badge { padding: 5px 11px; font-size: 12.5px; }
}

/* v457.7: badge "✅ Medición vN" — medición finalizada/confirmada.
   Verde, informativo (no clicable). Señala que la medición está
   congelada y protegida frente a borrado accidental. */
.card-medfin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font: 600 11px var(--sans);
  letter-spacing: 0.02em;
  width: fit-content;
  background: rgba(46,160,90,0.13);
  border: 1px solid rgba(46,160,90,0.40);
  color: #1f7a45;
}
@media (pointer: coarse) {
  .card-medfin-badge { padding: 5px 11px; font-size: 12.5px; }
}

/* Subtítulo de la habitación (fecha de medición · última edición).
   v420.1: tamaño aumentado de 11.5px → 14px y peso 500 — el 11.5px se
   leía mal en iPad y la fecha pasaba desapercibida. En táctil sube otro
   pelín para que el dedo gordo pueda leer sin acercarse. */
.habitacion-sub {
  margin-left: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
}
@media (pointer: coarse) {
  .habitacion-sub { font-size: 15.5px; }
}

/* Indicador de conectividad (en la topbar, izquierda del refresh). */
.conn-indicator {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--bg);
  color: var(--ink-mute);
  margin-right: 6px;
  user-select: none;
  cursor: default;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.conn-indicator.ok   { color: #2d7a4b; background: rgba(45,122,75,0.10);  border-color: rgba(45,122,75,0.25); }
.conn-indicator.warn { color: #a8780a; background: rgba(168,120,10,0.10); border-color: rgba(168,120,10,0.30); }
.conn-indicator.off  { color: #7a6a55; background: rgba(120,100,80,0.10); border-color: rgba(120,100,80,0.30); }
.conn-indicator.err  { color: #b03a30; background: rgba(176,58,48,0.10);  border-color: rgba(176,58,48,0.35); animation: connPulse 2s ease-in-out infinite; }
@keyframes connPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* En topbars muy estrechas, el texto del indicador puede ser molesto;
   en pantallas <540px solo mostramos el emoji. */
@media (max-width: 540px) {
  .conn-indicator { font-size: 0; padding: 4px 8px; }
  .conn-indicator::first-letter { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════
   v424 — Pantalla Medición (lienzo SVG + toolbar + modal datos)
   ════════════════════════════════════════════════════════════ */

/* Layout vertical full-screen — el lienzo ocupa el espacio disponible
   entre topbar y footer. `.screen` ya es flex column / inset 0. */
.med-topbar { flex: 0 0 auto; }
.med-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 14px var(--sans);
  color: var(--ink);
}
.med-title strong { color: var(--gold-deep); font-weight: 700; }
.med-datos-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
}


/* Banda de cotas fija arriba del lienzo. */
/* Fase 4: barra de autores de lámina (visible solo si hay multi-láminas). */
.med-autores-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(45,110,160,0.06);
  border-bottom: 1px solid rgba(45,110,160,0.18);
  font: 500 12px var(--sans);
  flex-wrap: wrap;
}
.med-autores-bar.hidden { display: none; }
.med-autores-label {
  color: var(--ink-mute);
  font-weight: 600;
  margin-right: 4px;
}
.med-autor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.6);
  color: var(--ink-soft);
  font: 500 12px var(--sans);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.med-autor-chip small { font-weight: 400; color: var(--ink-mute); }
.med-autor-chip:hover { background: rgba(255,255,255,0.95); }
.med-autor-chip.is-active {
  background: #2d6ea0;
  color: #fff;
  border-color: #1a4d75;
}
.med-autor-chip.is-active small { color: rgba(255,255,255,0.8); }
.med-autor-chip.is-create {
  background: rgba(196,140,55,0.13);
  border-color: rgba(196,140,55,0.40);
  color: #8a5a18;
}
.med-autor-chip.is-create:hover { background: rgba(196,140,55,0.22); }
@media (pointer: coarse) {
  .med-autores-bar { padding: 8px 14px; gap: 10px; }
  .med-autor-chip { padding: 6px 12px; font-size: 13px; }
}

.med-cotas-band {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(184,153,104,0.10), rgba(184,153,104,0.04));
  border-bottom: 1px solid rgba(184,153,104,0.30);
  font: 600 13px var(--sans);
  color: var(--ink);
  display: flex; align-items: center; gap: 14px;
  font-variant-numeric: tabular-nums;
  min-height: 36px;
  position: relative;     /* v456.60: ancla del popover de cambios */
}
.med-cotas-info { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.med-cotas-snapshot {
  font-size: 11px;
  color: var(--ink-mute);
  padding: 2px 8px;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
}
.med-cotas-snapshot.hidden { display: none; }

/* v456.60: triángulo de aviso en la banda de cotas + popover desplegable
   (sustituye al banner horizontal que ocupaba toda una fila). */
.med-changes-btn {
  flex: 0 0 auto;
  background: rgba(220,150,30,0.18);
  border: 1px solid rgba(220,150,30,0.55);
  border-radius: 6px;
  width: 30px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
  animation: changesPulse 2s ease-in-out infinite;
}
.med-changes-btn:hover { background: rgba(220,150,30,0.32); }
.med-changes-btn.hidden { display: none; }
.med-changes-btn svg { display: block; }
@keyframes changesPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,150,30,0.0); }
  50% { box-shadow: 0 0 0 4px rgba(220,150,30,0.18); }
}
.med-changes-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 14px;
  z-index: 20;
  max-width: 480px;
  min-width: 280px;
  background: #fef8ec;
  border: 1px solid rgba(220,150,30,0.55);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  padding: 10px 14px;
  color: #6a4400;
  font: 500 12.5px var(--sans);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.med-changes-popover.hidden { display: none; }
.med-changes-popover strong { font-weight: 700; }

/* v456.55 → v456.60: barra de láminas. Antes horizontal arriba; ahora
   sidebar VERTICAL en el lateral izquierdo del workspace para ganar altura
   de lienzo. */
.med-pages-band {
  flex: 0 0 64px;
  padding: 10px 6px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 0;
  overflow: hidden;
}
.med-pages-label {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  font: 700 9px var(--sans);
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
  margin-bottom: 2px;
}
.med-pages-label > span { line-height: 1; }
.med-pages-label svg { display: block; opacity: 0.6; }
.med-pages-tabs {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  flex: 1 1 auto;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.med-page-tab {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font: 600 12px var(--sans);
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
  flex: 0 0 auto;
  min-height: 32px;
  width: 100%;
  word-break: break-word;
  text-align: center;
  line-height: 1.15;
}
.med-page-tab:hover { background: rgba(184,153,104,0.10); border-color: var(--gold); }
.med-page-tab.active {
  background: rgba(184,153,104,0.20);
  border-color: var(--gold-deep);
  color: var(--gold-deep);
  font-weight: 700;
}
.med-pages-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex: 0 0 auto;
}
.med-pages-btn:hover {
  background: rgba(184,153,104,0.10);
  color: var(--gold-deep);
  border-color: var(--gold);
}
.med-pages-btn svg { display: block; }

/* Grid de miniaturas para el modal de vista general. */
.med-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 8px 4px;
}
.med-overview-item {
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  user-select: none;
}
.med-overview-thumb {
  width: 100%;
  aspect-ratio: 297 / 210;
  background: #fdfcf8;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.med-overview-thumb svg { width: 100%; height: 100%; display: block; }
.med-overview-item:hover .med-overview-thumb {
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(184,153,104,0.25);
}
.med-overview-item.active .med-overview-thumb {
  border-color: var(--gold-deep);
  box-shadow: 0 2px 10px rgba(184,153,104,0.35);
}
.med-overview-label {
  font: 600 12px var(--sans);
  color: var(--ink-mute);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.med-overview-item.active .med-overview-label { color: var(--gold-deep); }

/* Workspace = toolbar lateral + lienzo.
   v434.1: toolbar a la DERECHA (flex-direction: row-reverse) para no
   cruzar la mano con el Apple Pencil cuando se elige una herramienta. */
.med-workspace {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row-reverse;
  min-height: 0;          /* permite que el SVG se contraiga */
  background: #efe9d8;
}
.med-toolbar {
  flex: 0 0 56px;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 10px 6px;
  background: var(--paper);
  border-left: 1px solid var(--line);   /* v434.1: borde al lado del lienzo */
  /* v434: overflow visible para que los paneles pop-out (position:absolute
     con right:100%) no queden recortados por el contenedor de la toolbar. */
  overflow: visible;
  position: relative;        /* ancla pop-out panels */
}
/* v434: toolbar reorganizada — más ancho para grupos 44×44 cómodos. */
.med-toolbar-grouped { flex: 0 0 64px; gap: 10px; padding: 14px 8px; }
@media (pointer: coarse) { .med-toolbar-grouped { flex: 0 0 72px; } }
/* Botón de grupo: grande, con chevron-derecha para indicar pop-out. */
.med-group-btn {
  width: 48px; height: 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  position: relative;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
@media (pointer: coarse) { .med-group-btn { width: 56px; height: 56px; } }
.med-group-btn:hover { background: rgba(184,153,104,0.10); color: var(--gold-deep); border-color: rgba(184,153,104,0.30); }
.med-group-btn.active {
  background: rgba(184,153,104,0.22);
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}
/* v434.1: chevron apunta a la IZQUIERDA porque la toolbar está a la
   derecha y los paneles se despliegan hacia el lienzo. */
.med-group-btn::after {
  content: '';
  position: absolute;
  left: -3px; top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: rgba(184,153,104,0.50);
  opacity: 0.55;
}
.med-group-btn.active::after { border-right-color: var(--gold-deep); opacity: 1; }
.med-group-btn svg { display: block; }

/* Pop-out panel — anclado a la IZQUIERDA de la toolbar (v434.1: la
   toolbar pasa a la derecha del lienzo, así que los paneles se abren
   hacia el centro). JS posiciona el `top` para alinearlo con el botón
   de grupo activo. */
.med-panel {
  position: absolute;
  right: 100%; top: 8px;
  margin-right: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  box-shadow: -8px 8px 24px rgba(0,0,0,0.12), -2px 2px 6px rgba(0,0,0,0.06);
  display: none;
  z-index: 50;
  min-width: 80px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}
.med-panel.open { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.med-panel-title {
  font: 600 11px var(--sans);
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: stretch;
  text-align: center;
  margin-bottom: 2px;
}
.med-panel-sub { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.med-panel-label {
  font: 600 10px var(--sans);
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.med-panel .med-tool-btn { width: 44px; height: 44px; }
@media (pointer: coarse) { .med-panel .med-tool-btn { width: 52px; height: 52px; } }
.med-toolbar.readonly { opacity: 0.4; pointer-events: none; }
.med-tool-btn {
  width: 44px; height: 40px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.med-tool-btn:hover { background: rgba(184,153,104,0.10); color: var(--gold-deep); }
.med-tool-btn.active {
  background: rgba(184,153,104,0.22);
  border-color: rgba(184,153,104,0.50);
  color: var(--gold-deep);
}
.med-tool-btn svg { display: block; }
.med-clear-btn:hover { background: rgba(220,80,60,0.10); color: #c43; border-color: rgba(220,80,60,0.30); }

.med-tool-sep {
  width: 32px; margin: 4px 0;
  border: none;
  border-top: 1px solid var(--line);
}

.med-tool-sub {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 4px 0;
}
.med-thickness {
  display: flex; flex-direction: column; gap: 4px;
}
.med-thick-btn {
  width: 32px; height: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.med-thick-btn.active { border-color: var(--gold); background: rgba(184,153,104,0.16); }
.med-thick-btn i {
  display: block;
  background: var(--ink);
  border-radius: 50%;
}

.med-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
  justify-content: center;
}
.med-color-btn {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  outline: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
}
.med-color-btn.active {
  outline: 2px solid var(--gold-deep);
  transform: scale(1.15);
}
/* v436: botón "Sin relleno" — fondo papel + tachado diagonal en SVG. */
.med-color-btn.med-fill-none {
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.med-color-btn.med-fill-none svg { display: block; }
/* v443: botón blanco — necesita un borde más marcado para ser visible
   sobre el fondo del panel (que también es claro). */
.med-color-btn.med-color-white {
  outline: 1px solid var(--ink-mute);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.med-color-btn.med-color-white.active {
  outline: 2px solid var(--gold-deep);
}

.med-zoom-label {
  font: 600 10px var(--sans);
  color: var(--ink-mute);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Lienzo. */
.med-canvas-wrap {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background: #efe9d8;
  padding: 12px;
  min-height: 0;
}
.med-canvas {
  width: 100%; height: 100%;
  background: #fdfcf8;
  box-shadow: 0 4px 18px rgba(40,30,10,0.12), 0 1px 3px rgba(40,30,10,0.08);
  border-radius: 4px;
  display: block;
  touch-action: none;
  cursor: crosshair;
  /* v456.68: bloquear la selección de texto SVG. Sin esto, en Edge,
     tras cerrar el prompt nativo de la cota el navegador podía dejar
     seleccionados todos los <text> del canvas — aparecía el highlight
     azul sólido sobre cada etiqueta de cota y la siguiente flecha no
     se podía dibujar hasta clicar fuera para deseleccionar. */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.med-canvas text { user-select: none; -webkit-user-select: none; }
.med-screen[data-tool="pan"] .med-canvas { cursor: grab; }
.med-screen[data-tool="eraser"] .med-canvas { cursor: cell; }
.med-screen[data-tool="select"] .med-canvas { cursor: default; }
.med-grid line { pointer-events: none; }

/* v459.54: la rejilla NUNCA se imprime — guía solo de pantalla, ahorra
   tinta en impresiones directas con Cmd/Ctrl+P del navegador. */
@media print {
  .med-grid, #med-grid { display: none !important; }
}
.med-paper      { pointer-events: none; }
.med-a4-border  { pointer-events: none; }
#med-current-stroke { pointer-events: none; }

/* v431: foto + handles ──────────────────────────────────────── */
/* Inputs ocultos — solo se disparan vía .click() desde la toolbar. */
.med-file-hidden {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Botón "Borrar selección" — aparece cuando hay una imagen / shape /
   grupo marcados (.hidden lo controla JS).
   v439: más visible — fondo rojo, blanco, círculo grande, pulso suave
   para que el usuario sepa que está ahí cuando hay algo seleccionado. */
.med-del-sel-btn {
  background: #c84438;
  color: #fff;
  border: 1px solid #a02f25;
  border-radius: 50%;
  width: 48px; height: 48px;
  box-shadow: 0 2px 8px rgba(200,68,56,0.40);
  animation: medDelPulse 1.6s ease-in-out infinite;
}
@media (pointer: coarse) { .med-del-sel-btn { width: 56px; height: 56px; } }
.med-del-sel-btn svg { width: 24px; height: 24px; }
.med-del-sel-btn:hover { background: #a02f25; color: #fff; }
.med-del-sel-btn:active { transform: scale(0.96); }
@keyframes medDelPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(200,68,56,0.40); }
  50%      { box-shadow: 0 0 0 6px rgba(200,68,56,0.18), 0 2px 8px rgba(200,68,56,0.40); }
}
/* Imágenes insertadas: cursor "move" cuando hay select activo. */
#med-images image {
  cursor: pointer;
  user-select: none;
}
.med-screen[data-tool="select"] #med-images image { cursor: move; }
/* v433: shapes — pickable en modo select; cursor crosshair cuando se está
   dibujando una nueva. */
.med-screen[data-tool="select"] #med-shapes > * { cursor: move; }
.med-screen[data-tool="line"]   .med-canvas,
.med-screen[data-tool="rect"]   .med-canvas,
.med-screen[data-tool="circle"] .med-canvas,
.med-screen[data-tool="arrow"]  .med-canvas,
.med-screen[data-tool="dim"]    .med-canvas { cursor: crosshair; }
.med-screen[data-tool="text"]   .med-canvas { cursor: text; }
.med-screen[data-tool="marker"] .med-canvas { cursor: crosshair; }
#med-current-shape { pointer-events: none; }

/* v434: cursor de la goma de arrastre — círculo discontinuo que sigue
   al puntero mientras se borra. JS lo mueve y ajusta el radio.
   v434.2: más pequeño (28 px en pantalla; antes 44). */
.med-eraser-cursor {
  fill: rgba(200,68,56,0.10);
  stroke: #c84438;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  pointer-events: none;
}
.med-eraser-cursor.hidden { display: none; }

/* v435: lazo en curso — polígono freehand mientras se arrastra. */
.med-lasso-path { pointer-events: none; }
.med-lasso-path.hidden { display: none; }
/* Outlines individuales de los elementos en la multi-selección. */
.med-multi-outline {
  fill: none;
  stroke: #b89968;
  stroke-width: 3;
  stroke-dasharray: 8 5;
  pointer-events: none;
}
.med-screen[data-tool="lasso"] .med-canvas { cursor: crosshair; }
.med-screen[data-tool="lasso-rect"] .med-canvas { cursor: crosshair; }

/* v434.2: Deshacer / Rehacer como botones rápidos siempre visibles,
   no metidos en el panel de Acciones. Estilo ligeramente distinto al
   botón de grupo: más pequeños, sin chevron. */
.med-quick-btn {
  width: 40px; height: 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
@media (pointer: coarse) { .med-quick-btn { width: 48px; height: 48px; } }
.med-quick-btn:hover { background: rgba(184,153,104,0.10); color: var(--gold-deep); }
.med-quick-btn:active { background: rgba(184,153,104,0.22); }
/* Selección: borde discontinuo dorado alrededor de la imagen. */
.med-img-selected-outline {
  fill: none;
  stroke: #b89968;
  stroke-width: 4;
  stroke-dasharray: 16 10;
  pointer-events: none;
}
/* Handles de esquina (resize manteniendo aspecto). v434: más grandes en
   táctil para facilitar el agarre con el Apple Pencil. */
.med-handle {
  fill: #fdfcf8;
  stroke: #b89968;
  stroke-width: 3;
  cursor: nwse-resize;
}
.med-handle[data-handle="ne"], .med-handle[data-handle="sw"] { cursor: nesw-resize; }
.med-handle[data-handle="n"], .med-handle[data-handle="s"]   { cursor: ns-resize; }
.med-handle[data-handle="e"], .med-handle[data-handle="w"]   { cursor: ew-resize; }
.med-handle[data-handle="rot"] {
  fill: #b89968;
  stroke: #fdfcf8;
  stroke-width: 3;
  cursor: grab;
}
.med-handle[data-handle="rot"]:active { cursor: grabbing; }
/* Endpoint handles para líneas (P1, P2) — cursor de movimiento simple. */
.med-handle[data-handle^="p"] { cursor: move; }

.med-readonly-overlay {
  position: absolute; inset: 12px;
  background: rgba(245,238,220,0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 24px;
  pointer-events: none;
  font: 600 13px var(--sans);
  color: var(--ink-mute);
  border-radius: 4px;
}
.med-readonly-overlay > div {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.med-readonly-overlay.hidden { display: none; }

/* Footer con dos botones (borrador / aplicar). */
.med-footer {
  flex: 0 0 auto;
  display: flex; gap: 10px;
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.med-footer .btn-primary,
.med-footer .btn-secondary { flex: 1 1 0; }
.med-footer .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* v465.21: el botón Guardar de la lámina se pone en ÁMBAR cuando hay cambios sin
   guardar, para que se vea de un vistazo desde el otro lado de la habitación.
   En reposo es un secundario normal («✓ Guardado»).
   v465.22: vive en la BARRA DE ARRIBA, pegado a la flecha de Volver. */
#med-btn-guardar { flex: 0 0 auto; min-width: 128px; font-weight: 600; }
.med-topbar .med-guardar-btn { margin-left: 8px; padding: 7px 12px; white-space: nowrap; }
@media (max-width: 700px) { .med-topbar .med-guardar-btn { min-width: 0; padding: 7px 10px; } }
#med-btn-guardar.med-guardar-pend {
  background: #C8781F;
  border-color: #C8781F;
  color: #FFF;
}

/* Modal datos: usar tarjetas internas más compactas (form-card común). */
/* v449/v450: modal Datos del armario compacto — cabe ENTERO sin
   scroll en iPad apaisado. Cada iteración aprieta más para no
   tener que hacer scroll dentro del modal cuando se rellenan las
   cotas. */
.med-modal-card {
  margin-bottom: 6px;
  padding: 8px 10px;
}
.med-modal-card:last-child { margin-bottom: 0; }
.med-modal-card .form-section-title {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
  text-transform: uppercase;
  color: var(--gold-deep, #8a6f3f);
}
.med-modal-card .form-group { margin-bottom: 4px; }
.med-modal-card .form-group:last-child { margin-bottom: 0; }
.med-modal-card .form-group label {
  font-size: 10.5px;
  margin-bottom: 1px;
  color: var(--ink-mute);
}
.med-modal-card .form-input { font-size: 13px; padding: 5px 7px; }
.med-modal-card textarea.form-input { min-height: 40px; }
.med-modal-card .form-group-row { gap: 6px; margin-bottom: 4px; }
.med-modal-card .form-hint { font-size: 10.5px; margin-top: 4px; }
#modal-datos-armario .modal-body { padding: 10px 14px; }
#modal-datos-armario .modal-body > .form-hint {
  font-size: 11px; margin-bottom: 6px; color: var(--ink-mute);
}
#modal-datos-armario .modal-box { max-width: 540px; }
#modal-datos-armario .btn-row { margin-top: 8px; }
#modal-datos-armario .modal-head { padding: 10px 14px; }
#modal-datos-armario .modal-head h3 { font-size: 15px; margin: 0; }

/* v459.513: modal «Configurar cajonera» más compacto y menos alto (Adrián: para
   no tener que hacer tanto scroll). Reduce ancho, tipografía y espaciados ~1/3. */
#modal-cajonera .modal-box { max-height: 64vh; }
#modal-cajonera .modal-head { padding: 11px 15px 9px; }
#modal-cajonera .modal-head h3 { font-size: 15px; margin: 0; }
#modal-cajonera .modal-body { padding: 9px 13px 11px; gap: 6px; font-size: 12.5px; }
#modal-cajonera .modal-body label { margin-bottom: 3px; font-size: 11.5px; }
#modal-cajonera .modal-body .form-group { margin-bottom: 8px; }
#modal-cajonera .modal-body input,
#modal-cajonera .modal-body select { font-size: 12.5px; padding: 6px 8px; }
#modal-cajonera .modal-body .opt-btn,
#modal-cajonera .modal-body .opt-grid > * { font-size: 12px; }

/* v459.598: modal Chaflán más compacto y más ALTO, para que todos los controles
   quepan sin scroll (Adrián: ganar vista de todos los elementos de una). Sube la
   altura máxima y reduce paddings / tipografía / espaciados. */
#modal-chaflan .modal-box.modal-sm { max-height: 94vh; }
#modal-chaflan .modal-head { padding: 11px 16px 9px; }
#modal-chaflan .modal-head h3 { font-size: 16px; }
#modal-chaflan .modal-body { padding: 10px 16px 14px; gap: 9px; }
#modal-chaflan .modal-body label { font-size: 11.5px; margin-bottom: 3px; }
#modal-chaflan .modal-body .mm-input,
#modal-chaflan .modal-body input { font-size: 13px; padding: 6px 8px; }
#modal-chaflan #chaflan-mode-tabs { margin-bottom: 9px !important; }
#modal-chaflan #chaflan-hint,
#modal-chaflan #chaflan-panel-esq > p { font-size: 11px; margin: 2px 0 6px !important; line-height: 1.3; }
#modal-chaflan .chaflan-eje-btn { padding: 6px 6px !important; }
#modal-chaflan .chaflan-eje-btn svg { width: 40px; height: 34px; }
#modal-chaflan .chaflan-eje-btn span { font-size: 10.5px !important; }
#modal-chaflan .ce-corner { margin-bottom: 8px; }
#modal-chaflan .btn-primary.full,
#modal-chaflan .btn-secondary.full { padding: 9px 12px; }
#modal-chaflan #btn-confirm-chaflan,
#modal-chaflan #btn-confirm-chaflan-esq { margin-top: 2px; }

/* v456.42: modal Datos del armario flotante y arrastrable — permite ver
   la lámina detrás mientras se editan las cotas. Backdrop casi transparente
   sin desenfoque para que las cotas se lean con claridad. */
#modal-datos-armario.modal {
  align-items: flex-start;
  justify-content: flex-start;
}
#modal-datos-armario .modal-bg {
  background: rgba(26,22,17,0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#modal-datos-armario .modal-box {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: min(500px, 92%);
  max-height: calc(100vh - 90px);
  border-radius: 14px;
  animation: fadeInScale 0.2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
}
#modal-datos-armario .modal-head {
  cursor: move;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: var(--paper);
  border-radius: 14px 14px 0 0;
}
#modal-datos-armario .modal-head .modal-close { cursor: pointer; }
@media (min-width: 900px) and (hover: hover) {
  #modal-datos-armario .modal-box {
    width: min(333px, 80%);
    max-height: calc(100vh - 120px);
  }
  /* Compactar todo para que quepa sin scroll en PC */
  #modal-datos-armario .modal-head { padding: 7px 12px; }
  #modal-datos-armario .modal-head h3 { font-size: 13px; }
  #modal-datos-armario .modal-body { padding: 7px 10px; }
  #modal-datos-armario .modal-body > .form-hint { display: none; }
  #modal-datos-armario .med-modal-card { padding: 6px 8px; margin-bottom: 4px; }
  #modal-datos-armario .med-modal-card .form-section-title { font-size: 9.5px; margin: 0 0 3px; }
  #modal-datos-armario .med-modal-card .form-group { margin-bottom: 3px; }
  #modal-datos-armario .med-modal-card .form-group label { font-size: 9.5px; }
  #modal-datos-armario .med-modal-card .form-input { font-size: 12px; padding: 4px 6px; }
  #modal-datos-armario .med-modal-card .form-group-row { gap: 4px; margin-bottom: 3px; }
  #modal-datos-armario .med-modal-card textarea.form-input { min-height: 28px; rows: 1; }
  #modal-datos-armario .btn-row { margin-top: 5px; gap: 6px; }
  #modal-datos-armario .btn-row .btn-secondary,
  #modal-datos-armario .btn-row .btn-primary { padding: 7px 12px; font-size: 12px; }
}

/* Topbar de medición: empaquetar mejor en pantallas estrechas. */
@media (max-width: 720px) {
  .med-title { font-size: 12.5px; }
  .med-datos-btn { padding: 6px 10px; }
  .med-datos-btn > span:not(.hab-emoji) { display: none; }
  .med-toolbar { flex-basis: 50px; }
  .med-tool-btn { width: 40px; height: 36px; }
  .med-pages-band { flex-basis: 52px; }
  .med-library-panel { flex: 0 0 220px; }
}
@media (pointer: coarse) {
  .med-tool-btn { width: 48px; height: 44px; }
  .med-thick-btn { width: 36px; height: 26px; }
  .med-color-btn { width: 22px; height: 22px; }
  .med-toolbar { flex-basis: 64px; }
}

/* ── v456.59: Panel lateral librería de dibujos ──────────────────── */
.med-library-panel {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  background: #2a2320;
  border-right: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  z-index: 10;
}
.med-library-panel.hidden { display: none; }

.lib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #1e1b18;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.lib-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #d9cfc5;
  text-transform: uppercase;
}
.lib-close-btn {
  background: none;
  border: none;
  color: #a09585;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
.lib-close-btn:hover { color: #fff; }

.lib-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}
.lib-loading, .lib-empty {
  padding: 20px 14px;
  color: #8a7f74;
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
}
.lib-empty p { margin: 6px 0; }
.lib-empty b { color: #c2b8ae; }

.lib-folder { margin-bottom: 6px; }
.lib-folder-name {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a7f74;
}
.lib-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px;
}
.lib-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  background: rgba(255,255,255,0.03);
  transition: background 0.12s;
}
.lib-item:hover { background: rgba(255,255,255,0.09); }
.lib-item:active { background: rgba(255,255,255,0.14); }

.lib-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 52px;
  background: #fdfcf8;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.lib-thumb svg,
.lib-thumb-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
/* v456.65: subcarpetas anidadas dentro de una carpeta. */
.lib-subfolder {
  margin: 4px 0 8px 10px;
  padding-left: 8px;
  border-left: 1.5px solid rgba(184,153,104,0.35);
}
.lib-subfolder-name {
  font-size: 11px;
  font-weight: 500;
  color: #b89968;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 4px;
}
.lib-thumb-empty { background: #3a342e; }

.lib-item-name {
  flex: 1 1 auto;
  font-size: 11.5px;
  color: #d9cfc5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib-del-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #6a5f56;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.12s;
}
.lib-item:hover .lib-del-btn { opacity: 1; }
.lib-del-btn:hover { color: #e05555; }

/* ── Menú contextual láminas ──────────────────────────────── */
#med-ctx-menu {
  position: fixed;
  z-index: 9900;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  min-width: 180px;
  padding: 4px 0;
  font-family: Inter, sans-serif;
  /* v459.602: con muchas opciones el menú puede pasar de alto de pantalla; se
     limita la altura y se hace scrollable para que NO se pierdan opciones. */
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#med-ctx-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 16px;
  border: none;
  background: none;
  font-size: 13px;
  color: #1a1a1a;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
#med-ctx-menu button:hover {
  background: rgba(184,153,104,0.12);
  color: #3d3937;
}
#med-ctx-menu button.med-ctx-danger {
  color: #c0392b;
}
#med-ctx-menu button.med-ctx-danger:hover {
  background: rgba(192,57,43,0.08);
}
.med-ctx-sep {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 4px 0;
}

/* v456.81: fila de botones de tamaño de texto en el modal de edición. */
.med-text-size-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
}
.med-text-size-btn {
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.med-text-size-btn:hover { background: rgba(184,153,104,0.08); }
.med-text-size-btn.active {
  background: var(--gold, #b89968);
  color: #fff;
  border-color: var(--gold, #b89968);
}

/* v456.83: popup para elegir color de relleno desde el menú contextual. */
#med-fill-popup, #med-stroke-popup, #med-opacity-popup, #med-width-popup {
  position: fixed;
  z-index: 10001;
  background: var(--paper, #FBF6E9);
  border: 1px solid var(--line, rgba(0,0,0,0.12));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  padding: 10px 12px;
  font-family: var(--sans, Inter, sans-serif);
}
#med-fill-popup.hidden, #med-stroke-popup.hidden, #med-opacity-popup.hidden, #med-width-popup.hidden { display: none; }
/* v459.604: popup de grosor de línea — slider VERTICAL (bajar = más grueso). */
.med-width-slider-row { display: flex; align-items: center; gap: 14px; padding: 6px 6px 2px; }
#med-width-range {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 30px; height: 150px; margin: 0; cursor: pointer;
}
.med-width-preview-wrap {
  width: 46px; height: 150px;
  display: flex; align-items: center; justify-content: center;
  background: #faf8f3; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px;
}
.med-width-preview { display: block; width: 40px; height: 3px; background: #1a1a1a; border-radius: 20px; }
#med-width-val { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink, #1a1a1a); }

/* v459.606/607: barra rápida de herramientas arriba de la lámina. v459.607: se hace
   más ESTRECHA y se reserva una franja arriba (padding-top del lienzo) para que NO
   invada la zona de dibujo — antes flotaba encima de la lámina. */
.med-canvas-wrap { padding-top: 50px; }
#med-quickbar.med-quickbar {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  display: flex; gap: 2px; z-index: 58;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 11px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.14);
  padding: 3px 5px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.med-quick-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 50px; padding: 3px 3px; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: #2a2723;
}
.med-quick-tool svg { width: 19px; height: 19px; }
.med-quick-tool span { font-size: 9.5px; line-height: 1; color: #6b6760; }
.med-quick-tool:active { background: rgba(184,153,104,0.14); }
.med-quick-tool.active { background: rgba(30,122,219,0.12); border-color: rgba(30,122,219,0.5); color: #1e5fa8; }
.med-quick-tool.active span { color: #1e5fa8; }
.med-quick-grip {
  display: flex; align-items: center; justify-content: center;
  color: #b8ac98; cursor: grab; padding: 0 3px; touch-action: none; align-self: stretch;
}
.med-quick-grip:active { cursor: grabbing; color: #8a7f6a; }

/* v459.608: edición de texto EN LÍNEA sobre la lámina. */
.med-inline-text {
  position: absolute; z-index: 62;
  min-width: 120px; min-height: 1.2em;
  margin: 0; padding: 2px 6px;
  border: 1.5px dashed #1e7adb; border-radius: 6px;
  font-family: Inter, sans-serif; font-weight: 500; line-height: 1.15;
  resize: none; overflow: hidden; white-space: pre;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  outline: none;
}
.med-inline-text.hidden { display: none; }
.med-textbar {
  position: absolute; z-index: 63;
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.10); border-radius: 11px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.20);
  padding: 5px 7px;
}
.med-textbar.hidden { display: none; }
.med-textbar-sep { width: 1px; height: 22px; background: rgba(0,0,0,0.12); }
.med-textbar-btn {
  width: 32px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; background: #fff; color: #2a2723; cursor: pointer; padding: 0;
}
.med-textbar-btn.active { background: rgba(30,122,219,0.14); border-color: rgba(30,122,219,0.5); color: #1e5fa8; }
.med-textbar-btn.med-textbar-done { background: #2d7a4b; border-color: #2d7a4b; color: #fff; }
.med-textbar-color {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.18); cursor: pointer; padding: 0;
}
.med-textbar-color.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e7adb; }
.med-textbar-color.med-color-white { border-color: rgba(0,0,0,0.32); }
.med-textbar-size {
  min-width: 28px; height: 30px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
  background: #fff; color: #2a2723; cursor: pointer; font-size: 12px; font-weight: 600; padding: 0 4px;
}
.med-textbar-size.active { background: rgba(30,122,219,0.14); border-color: rgba(30,122,219,0.5); color: #1e5fa8; }

/* v459.605: barra de edición rápida al seleccionar una figura. */
#med-selbar.med-selbar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.20);
  padding: 7px 10px; z-index: 60;
  max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#med-selbar.hidden { display: none; }
.med-selbar-colors { display: flex; gap: 5px; }
.med-selbar-color {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18); cursor: pointer; padding: 0;
  transition: transform 0.1s;
}
.med-selbar-color.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e7adb; }
.med-selbar-color.med-color-white { border-color: rgba(0,0,0,0.32); }
.med-selbar-color:active { transform: scale(0.9); }
.med-selbar-sep { width: 1px; height: 24px; background: rgba(0,0,0,0.12); }
.med-selbar-width-wrap { display: flex; align-items: center; gap: 6px; color: #6b6760; }
#med-selbar-width { width: 108px; cursor: pointer; }
.med-selbar-btn {
  width: 36px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 9px; background: #fff;
  color: #2a2723; cursor: pointer; padding: 0;
}
.med-selbar-btn:active { background: rgba(184,153,104,0.15); }
.med-selbar-btn.med-selbar-danger { color: #c0392b; }
/* v459.612: swatches de RELLENO (cuadrados) en la barra de selección. */
.med-selbar-filllabel { display: flex; align-items: center; color: #8a7f6a; }
.med-selbar-fill {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.18); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.med-selbar-fill.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2d7a4b; }
.med-selbar-fill.med-color-white { border-color: rgba(0,0,0,0.32); }
.med-selbar-fill.med-selbar-fill-none { background: #fff; }
/* v459.600: fila del slider de transparencia del popup por-figura. */
.med-opacity-popup-row { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.med-opacity-popup-row input[type="range"] { flex: 1; }
.med-opacity-popup-row #med-opacity-val { font-size: 12px; min-width: 40px; text-align: right; color: var(--ink-mute, #6b6760); }
/* v459.600: modo elegir destino de la flecha guía. */
#screen-medicion.med-picking-leader, #screen-medicion.med-picking-leader svg { cursor: crosshair; }
.med-fill-popup-title {
  font-size: 12px; font-weight: 600;
  color: var(--ink-mute, #6b6760);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 8px;
}
.med-fill-popup-colors {
  display: grid;
  grid-template-columns: repeat(8, 28px);
  gap: 6px;
}
.med-fill-popup-btn {
  width: 28px; height: 28px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, box-shadow 0.1s;
}
.med-fill-popup-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}
.med-fill-popup-btn.med-color-white { border-color: rgba(0,0,0,0.35); }
.med-fill-popup-btn.med-fill-popup-none { background: #fff; }

/* v456.82: nombre del domicilio y nombre del cliente siempre se muestran
   en MAYÚSCULAS en el modal de "Editar domicilio" (text-transform es
   solo visual — el dato persistido en R2 conserva las may/min que
   escribió el usuario). Convención de hoja de taller. */
#dom-name,
#dom-cliente {
  text-transform: uppercase;
}
#dom-name::placeholder,
#dom-cliente::placeholder {
  text-transform: none;     /* el placeholder no se fuerza para que se vea natural */
}

/* v456.84: extiende mayúsculas a los LISTADOS (no solo al modal de
   edición). Adrián vio que el dato real seguía en mixed case en "Mis
   proyectos" y en la card enviada a vifren-tareas. Ahora:
   - Los datos NUEVOS se guardan ya en uppercase (saveDomicilioModal).
   - Los datos VIEJOS (anteriores a v456.84) se visualizan en uppercase
     gracias a este CSS y se mandan en uppercase a vifren-tareas
     gracias al .toUpperCase() del bridge v2.9. */
.vivienda-name,
.vivienda-sub,
.project-card-address {
  text-transform: uppercase;
}

/* ── Group resize handles ─────────────────────────────────── */
.med-group-handle {
  fill: #b89968;
  stroke: #fff;
  stroke-width: 2;
  cursor: nwse-resize;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

/* ── Modal guardar en librería ────────────────────────────── */
#med-lib-save-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#med-lib-save-modal.hidden { display: none; }
.med-lib-save-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.med-lib-save-dialog {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 24px 24px 20px;
  width: min(360px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
}
.med-lib-save-title {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.med-lib-save-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #555;
}
.med-lib-save-label input[type="text"] {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: Inter, sans-serif;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.15s;
}
.med-lib-save-label input[type="text"]:focus { border-color: #b89968; }
.med-lib-folder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lib-folder-chip {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid #ddd;
  background: #f7f5f2;
  font-size: 13px;
  font-family: Inter, sans-serif;
  color: #444;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lib-folder-chip:hover { border-color: #b89968; color: #3d3937; }
.lib-folder-chip.active {
  background: #b89968;
  border-color: #b89968;
  color: #fff;
  font-weight: 500;
}
.lib-folder-chip.lib-folder-chip-new { border-style: dashed; }
.lib-folder-chip-new.active { background: #7a6a5a; border-color: #7a6a5a; border-style: solid; }
.med-lib-save-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.med-lib-btn-cancel {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1.5px solid #ddd;
  background: #f7f5f2;
  font-size: 14px;
  font-family: Inter, sans-serif;
  color: #444;
  cursor: pointer;
}
.med-lib-btn-ok {
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  background: #b89968;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.12s;
}
.med-lib-btn-ok:hover { background: #a0814f; }

/* ──────────────────────────────────────────────────────────────
   v456.95: iPhone horizontal — modales como panel lateral izquierdo
   ──────────────────────────────────────────────────────────────
   En landscape con altura ≤ 500px (iPhone SE/14/15 horizontal:
   ~375-430px), el bottom-sheet original tapaba la mayor parte de
   la pantalla y dejaba el 3D oculto. Cambio de comportamiento: el
   modal se transforma en un panel lateral pegado a la izquierda
   (~420px de ancho, altura completa) — el editor 3D sigue visible
   a la derecha mientras el cliente o tú configuras valores.

   Además respeta var(--safe-left) para no quedar tapado por la
   Dynamic Island/notch del iPhone (que en landscape ocupa el
   lateral). Los modal-centered (confirm SI/NO) siguen centrados
   pero compactados. */
@media (max-height: 500px) and (orientation: landscape) {
  .modal                     {
    align-items: stretch;
    justify-content: flex-start;
    padding-left: var(--safe-left);
  }
  .modal-box                 {
    width: min(420px, 95vw);
    height: 100vh;
    max-height: 100vh;
    border-radius: 0 16px 16px 0;
    padding-bottom: 0;
    animation: slideRight 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .modal-box.modal-sm        { max-height: 100vh; }
  .modal-head                { padding: 10px 18px 8px; }
  .modal-head::before        { display: none; }
  .modal-head h3             { font-size: 17px; }
  .modal-close               { width: 28px; height: 28px; }
  .modal-close svg           { width: 12px; height: 12px; }
  .modal-body                { padding: 10px 18px 14px; gap: 8px; }
  .modal-section-label       { font-size: 9px; margin-bottom: 3px; padding-top: 3px; letter-spacing: 0.18em; }

  .modal.modal-centered      {
    align-items: center;
    justify-content: center;
    padding: 8px;
    padding-left: max(8px, var(--safe-left));
  }
  .modal.modal-centered .modal-box {
    width: auto;
    height: auto;
    max-height: 95vh;
    border-radius: 16px;
    animation: none;
  }
  .modal-box.modal-confirm-card { max-width: 480px; }
  .modal-confirm-head        { padding: 12px 16px 4px; }
  .modal-confirm-head h3     { font-size: 17px; }
  .modal-confirm-body        { padding: 2px 16px 8px; }
  .modal-confirm-actions     { padding: 6px 12px 12px; gap: 8px; }
}

@keyframes slideRight {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* v459.246: calculadora flotante en la lámina ────────────────────── */
.med-calc {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 220px;
  background: #1c1c1e;
  color: #f5f5f7;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  z-index: 50;
  user-select: none;
  font-family: -apple-system, system-ui, sans-serif;
  overflow: hidden;
}
.med-calc.hidden { display: none; }
.med-calc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: #2a2a2c;
  cursor: grab;
  touch-action: none;
}
.med-calc-head:active { cursor: grabbing; }
.med-calc-title { font-size: 12px; opacity: .75; }
.med-calc-close {
  background: transparent; border: 0; color: #f5f5f7;
  font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.med-calc-close:hover { background: rgba(255,255,255,.1); }
.med-calc-display {
  padding: 10px 12px;
  text-align: right;
  font-size: 28px;
  font-weight: 300;
  min-height: 38px;
  word-break: break-all;
  line-height: 1.2;
}
.med-calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 6px 10px 10px;
}
.med-calc-keys .ck {
  border: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  font-size: 18px;
  font-weight: 500;
  background: #333334;
  color: #f5f5f7;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .08s;
}
.med-calc-keys .ck:active { background: #555; }
.med-calc-keys .ck-fn { background: #a5a5a7; color: #1c1c1e; }
.med-calc-keys .ck-fn:active { background: #d4d4d6; }
.med-calc-keys .ck-op { background: #ff9f0a; color: #fff; }
.med-calc-keys .ck-op.active { background: #fff; color: #ff9f0a; }
.med-calc-keys .ck-op:active { background: #ffb84d; }
.med-calc-keys .ck-eq { background: #ff9f0a; color: #fff; }
.med-calc-keys .ck-eq:active { background: #ffb84d; }
.med-calc-keys .ck-zero { grid-column: span 2; aspect-ratio: auto; border-radius: 999px; }

/* v459.266: modal Backups (master-only). */
/* v459.267: variante del botón papelera con contenido emoji (no SVG)
   — el emoji 💾 necesita su propio font-size porque heredaba el del
   <button> y salía minúsculo (~10 px); con 17px casa con el SVG de
   la papelera. */
.papelera-btn.btn-emoji {
  font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.bk-actions { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.bk-tier-tabs { display: flex; gap: 4px; margin: 14px 0 8px; border-bottom: 1px solid #e5e5e5; }
.bk-tier-tab {
  background: transparent; border: 0;
  padding: 8px 14px; cursor: pointer; font-size: 14px;
  border-bottom: 2px solid transparent; color: #666;
}
.bk-tier-tab.active { color: #0a84ff; border-bottom-color: #0a84ff; font-weight: 600; }
.bk-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin-top: 4px; }
.bk-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
  border: 1px solid #eee; border-radius: 6px;
  background: #fafafa;
}
/* v465.198: la lista va por COPIA. La cabecera de cada una destaca y los ficheros
   de dentro quedan indentados y en gris — se despliegan sólo si hacen falta. */
.bk-copia { display: flex; flex-direction: column; gap: 4px; }
.bk-row-copia { background: #fff; border-color: #ddd; }
.bk-row-copia .bk-row-main strong { font-size: 14px; }
.bk-copia-files { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 6px 14px; }
.bk-row-file { padding: 7px 10px; background: #f4f4f4; }
.bk-row-file .bk-row-main strong { font-size: 12px; font-weight: 500; color: #555; }
.bk-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bk-row-main strong { font-size: 13px; word-break: break-all; }
.bk-row-main .muted { color: #888; font-size: 11px; }
.bk-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bk-row-actions .link-btn {
  background: transparent; border: 1px solid #d0d0d0; border-radius: 4px;
  padding: 4px 10px; cursor: pointer; font-size: 12px; color: #444;
}
.bk-row-actions .link-btn:hover { background: #f0f0f0; }
.bk-row-actions .link-btn.danger { color: #c84438; border-color: #e0a7a3; }
.bk-row-actions .link-btn.danger:hover { background: #fbecea; }
.bk-empty { color: #888; font-size: 13px; padding: 16px; text-align: center; }
/* v465.201: el aviso de que la copia automática lleva días sin hacerse. Tiene que
   verse: es lo que separa tener red de seguridad de creer que la tienes. */
.bk-alerta {
  background: #FDF3E3; border: 1px solid #E4C68A; border-radius: 6px;
  padding: 9px 12px; color: #7A5A12;
}

/* ==========================================================================
   v459.522: Recorte de fotos en las Láminas (medición).
   Modal aislado del motor de pointers del lienzo SVG: la foto se muestra
   como <img> HTML con un rectángulo de recorte manipulable (esquinas +
   arrastre del marco). Al confirmar, el recorte se hornea en la src.
   ========================================================================== */
.med-crop-box {
  width: min(560px, 96vw);
  max-width: 96vw;
  max-height: 92vh;
  border-radius: 18px;
  padding: 14px 14px 12px;
  gap: 10px;
}
.med-crop-head {
  font-size: 16px; font-weight: 700; color: var(--ink, #1a1a1a);
  text-align: center;
}
.med-crop-hint {
  font-size: 12px; color: #7a7367; text-align: center; line-height: 1.35;
  margin-top: -4px;
}
.med-crop-stage {
  position: relative;
  align-self: center;
  max-width: 100%;
  line-height: 0;
  touch-action: none;             /* el gesto lo maneja el JS del recorte */
  user-select: none;
  -webkit-user-select: none;
  background: #2a2620;
  border-radius: 8px;
  overflow: hidden;
}
#med-crop-img {
  display: block;
  max-width: min(520px, 90vw);
  max-height: 62vh;
  width: auto; height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* Sombra fuera del recorte: se dibuja con un box-shadow gigante hacia dentro
   del stage desde el propio rectángulo de recorte (así el interior queda
   claro y el exterior oscurecido sin necesidad de 4 divs). */
.med-crop-shade { display: none; }
.med-crop-rect {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 100vmax rgba(20,17,12,0.55);
  cursor: move;
  touch-action: none;
}
/* Rejilla de tercios dentro del marco (guía de composición). */
.med-crop-rect::before,
.med-crop-rect::after {
  content: ""; position: absolute; pointer-events: none;
  border-color: rgba(255,255,255,0.4); border-style: solid; border-width: 0;
}
.med-crop-rect::before {
  left: 33.33%; right: 33.33%; top: 0; bottom: 0;
  border-left-width: 1px; border-right-width: 1px;
}
.med-crop-rect::after {
  top: 33.33%; bottom: 33.33%; left: 0; right: 0;
  border-top-width: 1px; border-bottom-width: 1px;
}
.med-crop-handle {
  position: absolute;
  width: 30px; height: 30px;
  touch-action: none;
  z-index: 2;
}
/* Marca visual (esquina en L) centrada en la zona táctil de 30px. */
.med-crop-handle::after {
  content: ""; position: absolute;
  width: 16px; height: 16px;
  border: 3px solid #fff;
}
.med-crop-handle[data-h="nw"] { left: -15px; top: -15px; cursor: nwse-resize; }
.med-crop-handle[data-h="ne"] { right: -15px; top: -15px; cursor: nesw-resize; }
.med-crop-handle[data-h="sw"] { left: -15px; bottom: -15px; cursor: nesw-resize; }
.med-crop-handle[data-h="se"] { right: -15px; bottom: -15px; cursor: nwse-resize; }
.med-crop-handle[data-h="nw"]::after { right: 3px;  bottom: 3px; border-right: 0; border-bottom: 0; }
.med-crop-handle[data-h="ne"]::after { left: 3px;   bottom: 3px; border-left: 0;  border-bottom: 0; }
.med-crop-handle[data-h="sw"]::after { right: 3px;  top: 3px;    border-right: 0; border-top: 0; }
.med-crop-handle[data-h="se"]::after { left: 3px;   top: 3px;    border-left: 0;  border-top: 0; }
.med-crop-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 2px;
}
.med-crop-actions .btn-primary,
.med-crop-actions .btn-secondary { min-width: 108px; }

/* ── v463.46: aviso de orientación en MÓVILES (portrait) ──────────
   Confiwood se aprovecha en tablet/iPad; en móvil vertical la interfaz
   queda apretada. Se muestra un aviso amable para girar a horizontal o
   usar tablet. Se auto-oculta en landscape y en tablet/escritorio; el
   botón «Continuar» lo descarta hasta que vuelvan a girar. */
.rotate-hint {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center; padding: 26px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(20,15,9,.93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rotate-hint.show { display: flex; }
/* margin:auto + overflow en el contenedor → si la tarjeta es más alta que la
   pantalla (móvil en horizontal), se puede hacer scroll y los botones se
   alcanzan siempre, en vertical y en horizontal. */
.rotate-hint-card { max-width: 340px; margin: auto; text-align: center; color: #F4ECD7; font-family: Inter, sans-serif; }
.rotate-hint-ic { width: 76px; height: 76px; margin: 0 auto 18px; color: #C88A34; }
.rotate-hint-ic svg { width: 100%; height: 100%; }
.rotate-hint-card h2 { font-family: Cormorant, serif; font-size: 30px; font-weight: 500; margin: 0 0 12px; color: #fff; }
.rotate-hint-card p { font-size: 15px; line-height: 1.55; margin: 0 0 10px; color: #E8DCC8; }
.rotate-hint-sub { font-size: 13.5px; color: #B8AB92; }
.rotate-hint-btn {
  margin-top: 16px; border: 1.5px solid #6b5836; background: transparent; color: #F4ECD7;
  font-size: 14px; font-weight: 600; padding: 11px 22px; border-radius: 11px; cursor: pointer; font-family: inherit;
}
.rotate-hint-btn:hover { background: rgba(255,255,255,.08); }
/* v463.48: pasos de la guía de instalación en móvil */
.mh-steps { text-align: left; margin: 4px auto 6px; padding: 0 0 0 20px; max-width: 290px;
  font-size: 14px; line-height: 1.55; color: #E8DCC8; }
.mh-steps li { margin-bottom: 6px; }
.mh-steps b { color: #fff; }
.mh-share { width: 15px; height: 15px; vertical-align: -3px; color: #C88A34; }
/* v463.52: pantalla de vídeo demostrativo para iPhone */
.ipd-card { max-width: 560px; }
.ipd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C88A34; margin-bottom: 6px; }
.ipd-intro { font-size: 14px; line-height: 1.55; color: #E8DCC8; margin: 0 0 12px; }
.ipd-video { border-radius: 12px; overflow: hidden; background: #000; margin: 0 0 10px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.ipd-video video { width: 100%; max-height: 40vh; display: block; background: #000; }
.ipd-note { font-size: 13.5px; color: #F0C98A; margin: 0 0 10px; }
.ipd-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ipd-close { background: linear-gradient(180deg,#C88A34,#8A5A1E); border-color: transparent; color: #fff; }
/* v463.56: en móvil horizontal (poca altura) compactar la tarjeta del vídeo
   para que los botones se vean sin apenas scroll. */
@media (max-height: 500px) and (orientation: landscape) {
  .ipd-video video { max-height: 42vh; }
  .ipd-card h2 { font-size: 23px; margin-bottom: 6px; }
  .ipd-eyebrow { margin-bottom: 3px; }
  .ipd-intro { font-size: 13px; margin-bottom: 8px; }
  .rotate-hint { padding: 14px; }
}

/* ── v463.47: DEMO en MÓVIL HORIZONTAL — compactar para que entre ──────
   Solo móvil en landscape con alto ≤ 500px (iPhone ~375-430px). El iPad
   (alto ≥ 768) y el escritorio NO entran aquí → quedan intactos.
   - 100dvh en vez de 100vh: en iOS 100vh NO descuenta las barras de
     Safari y el layout se salía por abajo (se veía cortado). 100dvh usa
     el alto REAL visible. (Se deja 100vh de fallback antes.)
   - Barra superior más fina y paneles laterales más estrechos → el 3D
     se ve completo. */
@media (max-height: 500px) and (orientation: landscape) {
  .ed-topbar { height: 42px; padding: 0 8px; gap: 4px; }
  .ed-back-btn { font-size: 12px; padding: 4px 7px; }
  .ed-project-name { font-size: 14px; padding: 3px 8px; }
  .ed-tool { font-size: 11px; padding: 4px 6px; gap: 3px; }
  .ed-tool svg { width: 15px; height: 15px; }
  .ed-layout {
    margin-top: 42px;
    height: calc(100vh - 42px);
    height: calc(100dvh - 42px);
  }
  .ed-left  { width: 188px; min-width: 168px; }
  /* v465.223: aquí también van iguales (antes 150/138 frente a los 188 de la
     izquierda). Es la misma regla, en pantalla pequeña. */
  .ed-right { width: 188px; min-width: 168px; padding-bottom: 34px; }
  .ep-edit-chip { margin: 6px 6px 2px; padding: 7px 8px; font-size: 10.5px; }
}

/* ════════════════════════════════════════════════════════════════
   v465.3 — COMENTARIOS (chinchetas)
   Chincheta pegada a una pieza del 3D con una nota escrita. La chincheta
   NO es geometría: es un div posicionado cada frame proyectando su punto
   3D (mismo patrón que las etiquetas de cota), así sobrevive a cualquier
   reconstrucción del armario.
   ════════════════════════════════════════════════════════════════ */
.ed-com-wrap { position: relative; display: inline-flex; }
.ed-com-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 100;
  background: rgba(14,12,9,0.97);
  border: 1px solid rgba(184,153,104,0.30);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 230px;
  max-width: 300px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.ed-com-popover.hidden { display: none; }
.ed-com-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.ed-com-empty { font: 11px var(--sans); color: rgba(240,236,228,0.45); padding: 6px 10px; }
.ed-com-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 5px; cursor: pointer;
}
.ed-com-item:hover { background: rgba(184,153,104,0.15); }
.ed-com-num {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: #14120A;
  font: 700 10px/18px var(--sans); text-align: center;
}
.ed-com-txt {
  flex: 1 1 auto; min-width: 0;
  font: 12px var(--sans); color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-com-del {
  flex: 0 0 auto; background: transparent; border: none; cursor: pointer;
  color: rgba(240,236,228,0.5); font: 14px/1 var(--sans); padding: 2px 4px;
}
.ed-com-del:hover { color: #E06B5A; }

/* ── v465.271 · Filtro de FAMILIA (Todo · Interior · Frentes) ─────────────── */
.ed-com-fams { display: flex; gap: 3px; padding: 2px 2px 0; }
.ed-com-fam {
  flex: 1 1 0; min-width: 0;
  background: rgba(240,236,228,0.06);
  border: 1px solid rgba(184,153,104,0.28);
  border-radius: 5px; cursor: pointer;
  color: rgba(240,236,228,0.72);
  font: 11px/1 var(--sans); padding: 6px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-com-fam:hover { background: rgba(184,153,104,0.16); }
/* El oro es «esto es lo elegido», como en el resto de la app. */
.ed-com-fam.sel {
  background: var(--gold); border-color: var(--gold);
  color: #14120A; font-weight: 700;
}
/* Distintivo de familia en cada fila de la lista: dice cuál es Y la cambia. */
.ed-com-fam-tag {
  flex: 0 0 auto; cursor: pointer;
  background: rgba(240,236,228,0.10);
  border: 1px solid rgba(240,236,228,0.20);
  border-radius: 4px; padding: 2px 5px;
  color: rgba(240,236,228,0.66);
  font: 700 9px/1.2 var(--sans); letter-spacing: 0.02em;
}
.ed-com-fam-tag.es-frente {
  background: rgba(184,153,104,0.22);
  border-color: rgba(184,153,104,0.45);
  color: var(--gold);
}
.ed-com-fam-tag:hover { border-color: var(--gold); color: var(--gold); }

/* Chincheta sobre el 3D. */
.com-pin {
  position: fixed; z-index: 951;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #14120A;
  font: 700 12px/26px var(--sans); text-align: center;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  transform: translate(-50%, -50%);
  cursor: pointer; user-select: none;
  /* v465.119: el DEDO MANTENIDO abre Editar/Borrar, así que hay que quitarle a
     iOS su menú de copiar/pegar y su selección de texto, o el gesto se lo come
     Safari antes de llegar a nosotros. */
  -webkit-touch-callout: none;
}
.com-pin.on { background: #FFFFFF; color: #14120A; border-color: var(--gold); }
/* Burbuja con el texto del comentario. Sale por encima de la chincheta. */
.com-bubble {
  position: fixed; z-index: 952;
  transform: translate(-50%, -100%);
  max-width: 260px; min-width: 130px;
  background: #FFFFFF; color: #1A1A1A;
  border: 1.5px solid var(--gold); border-radius: 8px;
  padding: 9px 11px 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.32);
  font: 13px/1.35 var(--sans);
  white-space: pre-wrap; word-break: break-word;
  /* v465.119: igual que la chincheta — el dedo mantenido sobre la etiqueta abre
     Editar/Borrar, así que no puede salir el menú de iOS ni seleccionarse texto. */
  user-select: none; -webkit-touch-callout: none;
}
.com-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -7px;
  width: 10px; height: 10px; background: #FFFFFF;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: translateX(-50%) rotate(45deg);
}
/* v465.6: burbujas del modo «ver todos». Más compactas (sin botones), con el
   número delante y sin pico cuando el reparto anti-solape las ha desplazado. */
.com-bubble-multi { max-width: 220px; padding: 7px 10px 6px; font-size: 12.5px; }
.com-bubble-num {
  display: inline-block; min-width: 16px; height: 16px; margin-right: 6px;
  border-radius: 50%; background: var(--gold); color: #14120A;
  font: 700 10px/16px var(--sans); text-align: center; vertical-align: 1px;
}
.com-bubble-suelta::after { display: none; }
.com-bubble-acts { display: flex; gap: 6px; margin-top: 8px; }
.com-bubble-acts button {
  flex: 1 1 0; border: 1px solid rgba(0,0,0,0.15); background: #F5F2EC;
  border-radius: 5px; padding: 5px 0; cursor: pointer;
  font: 600 11px var(--sans); color: #3A3428;
}
.com-bubble-acts button:hover { background: #EAE4D8; }
.com-bubble-acts .com-bubble-del { color: #B4483A; }
.canvas-com-mode { cursor: crosshair !important; }

/* Editor del texto de la chincheta. */
.com-edit-ovl { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; }
.com-edit-ovl.hidden { display: none; }
.com-edit-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.com-edit-card {
  position: relative; width: min(440px, calc(100vw - 40px));
  background: #14120A; border: 1px solid rgba(184,153,104,0.35);
  border-radius: 10px; padding: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.com-edit-title { font: 600 15px var(--sans); color: var(--gold); margin-bottom: 10px; }
.com-edit-ta {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: rgba(255,255,255,0.06); color: var(--paper);
  border: 1px solid rgba(184,153,104,0.30); border-radius: 6px;
  padding: 10px; font: 15px/1.4 var(--sans);
}
.com-edit-ta:focus { outline: none; border-color: var(--gold); }
.com-edit-btns { display: flex; gap: 8px; margin-top: 12px; }
.com-edit-btn {
  flex: 1 1 0; padding: 11px 0; border-radius: 6px; cursor: pointer;
  font: 600 14px var(--sans);
  background: transparent; color: var(--paper);
  border: 1px solid rgba(184,153,104,0.35);
}
.com-edit-btn.com-edit-ok { background: var(--gold); color: #14120A; border-color: var(--gold); }

@media (hover: none) and (pointer: coarse) {
  .com-pin { width: 30px; height: 30px; font-size: 13px; line-height: 30px; }
  .com-bubble { font-size: 15px; max-width: 300px; }
}

/* v465.8 — CATÁLOGO VISUAL: los botones son ENLACES (<a>), no <button>, para que
   el PDF se abra en el visor propio de Safari. Solo hay que quitarles el subrayado
   que traen los enlaces por defecto; el resto del aspecto lo dan .ed-tool y
   .med-tool-btn, que son selectores de clase y valen igual para un <a>. */
a.ed-tool, a.med-tool-btn { text-decoration: none; }

/* ── Gruesos de tablero (v465.40) ─────────────────────────────────────────
   Van dentro del bloque «Holguras y gruesos» del panel izquierdo, por
   decisión de Juan. Los chips ponen los dos números de golpe a un grueso
   de catálogo; los campos siguen editables uno a uno. */
.ep-sub-title {
  margin: 16px 0 8px;
  font: 600 11px var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ep-grosor-chips {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-top: 8px;
}
.ep-grosor-lbl { font: 12px var(--sans); color: var(--ink-mute); margin-right: 2px; }
.grosor-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font: 500 13px var(--sans);
  padding: 6px 10px; min-width: 38px;
  transition: all 0.15s; cursor: pointer;
}
.grosor-btn:hover { border-color: var(--ink-soft); }
.grosor-btn.active { background: #fff; border-color: var(--ink); color: var(--ink); font-weight: 600; }
.ep-hint { margin-top: 8px; font: 11.5px var(--sans); color: var(--ink-mute); line-height: 1.4; }

/* ── Sistema de montaje (v465.41) ────────────────────────────────────────
   Dos tarjetas, no un select: la diferencia entre los dos sistemas hay que
   poder leerla de un vistazo, porque decide cómo se fabrica el armario. */
.sis-grid { display: flex; flex-direction: column; gap: 8px; }
.sis-btn {
  display: block; width: 100%; text-align: left;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px;
  cursor: pointer; transition: all 0.15s; font-family: var(--sans);
}
.sis-btn:hover { border-color: var(--ink-soft); }
.sis-btn b { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.sis-btn span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--ink-mute); margin-top: 3px; }
.sis-btn em { display: block; font-size: 11px; font-style: normal; color: var(--gold); margin-top: 5px; }
.sis-btn.sel { background: #fff; border-color: var(--ink); }
.sis-btn.sel b { color: var(--ink); }
/* v465.41: «sin costado» no existe por módulos — el botón se ve, pero apagado. */
.junta-mode-tab.off { opacity: .38; cursor: not-allowed; }

/* ── Montar módulos (v465.43) ─────────────────────────────────────────────
   El modal donde se dicen cuántos módulos hay, el ancho EXTERIOR de cada uno
   y si lleva maletero propio. Es lo único que crea módulos en la app. */
.mods-head { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; flex-wrap: wrap; }
.mods-head > label { font-size: 13px; font-weight: 600; }
.mods-btn {
  width: 30px; height: 30px; border-radius: 8px; font-size: 18px; line-height: 1;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer;
}
.mods-btn:active { transform: translateY(1px); }
#mods-n { min-width: 22px; text-align: center; font-weight: 700; font-size: 15px; }
.mods-list { display: flex; flex-direction: column; gap: 8px; }
.mods-row {
  display: grid; grid-template-columns: 74px 92px 1fr; gap: 10px;
  align-items: center; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.mods-row.mods-vacio { opacity: 0.62; border-style: dashed; }
.mods-vac { grid-column: 1 / -1; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.mods-vac input[type="checkbox"] { margin: 0; }
.mods-row > label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.mods-row input[type="text"] { width: 100%; }
.mods-libre { font-size: 11px; color: var(--ink-faint); }
.mods-head > label input[type="checkbox"] { margin-right: 6px; }
.mods-alto { width: 84px; }
/* Alzado de las dos filas, para ver de un vistazo qué va encima de qué. */
.mods-esquema {
  margin: 14px 0 4px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink-soft);
}
.mods-esquema svg { display: block; }
.mods-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 560px) {
  .mods-row { grid-template-columns: 70px 1fr; }
  .mods-libre { grid-column: 1 / -1; }
}

/* Los tres dibujos de «Gruesos de tablero» (.ep-gr-mapa, v465.47) se retiraron
   en v465.190 a petición de Juan: lo explican ya las tarjetas de «Sistema de
   montaje». Con ellos se va su CSS. */

/* Lado del reparto de la fila alta (v465.49). */
.mods-lado-btn {
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft); cursor: pointer;
  transition: all 0.15s;
}
.mods-lado-btn:hover { border-color: var(--ink-soft); }
/* Igual que los chips de grueso: el elegido va en blanco, no en var(--surface),
   que en este tema es oscuro y dejaba el texto invisible. */
.mods-lado-btn.sel { background: #fff; border-color: var(--ink); color: var(--ink); font-weight: 600; }

/* Cuerpo que se está montando (v465.54): A, B o C. Mismos chips que el lado. */
.mods-cuerpo-btn {
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft); cursor: pointer;
  transition: all 0.15s;
}
.mods-cuerpo-btn:hover { border-color: var(--ink-soft); }
.mods-cuerpo-btn.sel { background: #fff; border-color: var(--ink); color: var(--ink); font-weight: 600; }
.mods-cuerpo-btn.hidden { display: none; }

/* ══════════════════════════════════════════════════════════════
   Cajonera · ancho y medidas de FÁBRICA (v465.129)
   ──────────────────────────────────────────────────────────────
   El renglón dice lo que CABE de cajonera con las orejas puestas, y al lado
   un chip que abre las medidas de fábrica (de 50 en 50). Mandan las orejas:
   el chip sólo actúa si se pincha una medida.
   El desplegable cuelga del BODY, no del modal: el cuerpo del modal tiene
   scroll propio y un hijo absoluto se recortaría contra su borde. Por eso hay
   que cerrarlo a mano al cerrar el modal — esconder el modal no lo esconde.
   ══════════════════════════════════════════════════════════════ */
.caj-fab-row { display: flex; align-items: center; gap: 8px; }
.caj-fab-cabe {
  flex: 1 1 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink-soft);
}
.caj-fab-cabe strong { color: var(--ink); font-size: 16px; font-weight: 700; }
.caj-fab-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.caj-fab-btn:hover { border-color: var(--ink-soft); }
.caj-fab-btn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
/* v465.266 — MARCADO. `.sel` se le ponía desde la v465.129 al botón «De fábrica»
   y NO ESTABA ESCRITO EN NINGUNA PARTE: se marcaba y no se veía. Con «Orejas
   iguales» hacía falta de verdad (Juan: «un chip que MARCÁNDOLO salga repartidas
   las orejas»), así que se escribe aquí y de paso el de fábrica también se ve.
   Es el oro de «esto es lo elegido», el mismo de `.opt-btn.active` del panel. */
.caj-fab-btn.sel {
  border-color: var(--gold);
  background: rgba(184,153,104,0.16);
  color: var(--gold-deep);
}

/* v465.285 — «Ocultar oreja» bajo su campo en el modal de la cajonera. */
.caj-oreja-oc { margin-top: 8px; }

.caj-fab-pop {
  position: fixed;
  z-index: 9000;
  min-width: 190px;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(26,22,17,0.18);
  padding: 5px;
}
.caj-fab-pop button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%;
  background: none; border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  text-align: left; cursor: pointer;
}
.caj-fab-pop button:hover { background: var(--line-soft); }
.caj-fab-pop button.sel { background: var(--ink); color: #fff; }
.caj-fab-pop button small { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.caj-fab-pop button.sel small { color: rgba(255,255,255,0.75); }
/* Por encima de 1000 no es medida de fábrica: se ofrece, pero marcada. */
.caj-fab-pop button.xl small { color: #A2571A; }
.caj-fab-pop .caj-fab-sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* ══════════════════════════════════════════════════════════════
   Sistema de montaje · tarjeta con su ⓘ y su botón (v465.131)
   ──────────────────────────────────────────────────────────────
   Maqueta aprobada por Juan, variante A: «Montaje por módulos» va a LO PRIMERO
   de la tarjeta, y la ⓘ al lado del nombre — no encima del chip, que era lo que
   marcó («lo tapa el chip»).
   ══════════════════════════════════════════════════════════════ */
.sis-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2, #F6F2E9);
  overflow: hidden;
}
/* Con la tarjeta puesta, el botón de dentro deja de pintar su propio marco: si no,
   se ven dos bordes concéntricos. El estado `sel` lo lleva ahora la tarjeta. */
.sis-card .sis-btn { border: 0; border-radius: 0; background: none; width: 100%; }
.sis-card:has(.sis-btn.sel) { background: #fff; border-color: var(--ink); }

.sis-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px; vertical-align: -2px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font: italic 700 10px/1 Georgia, serif;
  color: var(--ink-soft);
  cursor: pointer;
  flex: 0 0 auto;
}
.sis-i:hover { border-color: var(--ink); color: var(--ink); background: var(--line-soft); }
/* `.sis-btn span { display:block }` alcanza a cualquier span de dentro, y con él
   la ⓘ se caía a su propio renglón. Ya pasó en la maqueta. */
.sis-btn b .sis-i { display: inline-flex; }

.sis-mods {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 20px); margin: 10px 10px 0;
  padding: 9px 12px;
  background: var(--gold-soft, #E6D5B0);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.sis-mods:hover { background: var(--gold); color: #fff; }
.sis-mods svg { width: 20px; height: 18px; flex: 0 0 auto; }
.sis-mods.hidden { display: none; }

/* ── La ficha ─────────────────────────────────────────────────── */
.sisficha .modal-head { align-items: flex-start; }
.sisficha-kick {
  margin: 2px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold);
}
.sisficha-dib { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px 12px; }
.sisficha-cap { margin: 0 0 8px; text-align: center; font-size: 11px; color: var(--ink-mute); }
#sisficha-svg { display: block; width: 100%; height: auto; }
#sisficha-svg .d-box  { fill: none; stroke: var(--ink-soft); stroke-width: 1.4; }
#sisficha-svg .d-vert { fill: #E0A03C; }
#sisficha-svg .d-tras { stroke: #5E86E8; stroke-width: 6; fill: none; }
.sisficha-leg { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.sisficha-leg span { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-mute); }
.sisficha-leg i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.sisficha-txt { margin-top: 14px; }
.sisficha-txt p { margin: 0 0 9px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.sisficha-txt p:last-child { margin-bottom: 0; }
.sisficha-txt b { color: var(--ink); }
.sisficha-key {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.sisficha-key div { font-size: 12px; color: var(--ink-mute); }
.sisficha-key b { display: block; font-size: 12px; color: var(--ink); margin-bottom: 2px; }

/* ── v465.154 · VISOR DEL CATÁLOGO ─────────────────────────────────────────
   Página a página, dentro de Confiwood. La barra —y con ella la ✕— va SIEMPRE
   por delante y fuera de la zona de la imagen: todo este visor nació de un
   catálogo que se quedaba encima de la app sin forma de cerrarlo (ver el
   bloque v465.154 de app.js). Si se toca algo aquí, que la ✕ no se mueva. */
#cat-visor {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; flex-direction: column;
  background: #1A1410;
  /* El iPad tiene barra de estado y zona del gesto de inicio. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.cat-barra {
  flex: 0 0 auto; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: #2B2118; color: #F4ECD7;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.cat-tit { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-cont { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: .85; min-width: 62px; text-align: center; }
.cat-nav {
  flex: 0 0 auto; width: 38px; height: 38px;
  background: rgba(244,236,215,.10); color: #F4ECD7; border: 0; border-radius: 9px;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.cat-nav:hover:not(:disabled) { background: rgba(244,236,215,.20); }
.cat-nav:disabled { opacity: .3; cursor: default; }
.cat-btn {
  flex: 0 0 auto; background: #6B4F2A; color: #F4ECD7; border: 0;
  font: inherit; padding: 9px 14px; border-radius: 9px; cursor: pointer;
}
.cat-btn:hover { background: #7E5E33; }
.cat-lupa { background: #4A3A28; }
.cat-lupa:hover { background: #5A4733; }
.cat-vista {
  flex: 1 1 auto; position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 10px;
  touch-action: pan-y;          /* deja el gesto lateral para pasar página */
}
.cat-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 4px;
  background: #fff; box-shadow: 0 6px 26px rgba(0,0,0,.5);
  user-select: none; -webkit-user-drag: none;
}
/* Ampliado: la imagen crece y la vista pasa a poder arrastrarse. */
#cat-visor.cat-zoom .cat-vista { overflow: auto; align-items: flex-start; justify-content: flex-start; touch-action: pan-x pan-y; }
#cat-visor.cat-zoom .cat-img { max-width: none; max-height: none; width: 200%; }
.cat-estado {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #C9BCA4; font-family: var(--sans); font-size: 14px; text-align: center;
  padding: 0 24px; max-width: 420px;
}
@media (max-width: 620px) {
  .cat-tit { display: none; }
  .cat-btn { padding: 9px 11px; }
}

/* v465.166 · deslizador de páginas del catálogo. Va DEBAJO de la imagen, a
   todo el ancho: en el iPad es donde cae el pulgar y no tapa el catálogo.
   Grueso a propósito — con 94 páginas se usa con el dedo, no con el ratón. */
.cat-slider {
  flex: 0 0 auto; position: relative; z-index: 2;
  padding: 10px 16px 14px;
  background: #241C15;
  box-shadow: 0 -2px 10px rgba(0,0,0,.35);
}
.cat-range {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 26px;
  background: transparent; cursor: pointer;
}
.cat-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: rgba(244,236,215,.22);
}
.cat-range::-moz-range-track {
  height: 6px; border-radius: 3px; background: rgba(244,236,215,.22);
}
.cat-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px;
  border-radius: 50%; border: 2px solid #241C15; background: #C8A961;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.cat-range::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%; border: 2px solid #241C15; background: #C8A961;
}
/* El número en grande mientras se arrastra: al soltar se cambia la página. */
.cat-vivo {
  position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 9px;
  background: #2B2118; color: #F4ECD7;
  font: 700 17px var(--sans); font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); pointer-events: none;
}
.cat-vivo[hidden] { display: none; }

/* ── PUENTE (v465.189): los tres alzados de la composición ───────────────────
   Tres dibujos en vez de tres palabras: el montaje se entiende de un vistazo y
   no hay que explicar qué es «Izquierdo». El elegido se marca con el color de
   acento, igual que el resto de chips del panel. */
.pte-dispos { display: flex; gap: 6px; margin: 6px 0 8px; }
.pte-dispo {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px 5px; border: 1px solid var(--line, #E0DFDC); border-radius: 8px;
  background: transparent; color: var(--ink-mute, #5F5F5F); cursor: pointer;
  font: 600 9.5px var(--sans); letter-spacing: .02em; text-transform: uppercase;
}
.pte-dispo svg { display: block; width: 100%; }
.pte-dispo:hover { border-color: var(--ink-mute, #5F5F5F); }
.pte-dispo.on { border-color: var(--accent, #B89968); color: var(--accent, #B89968); }

/* ── Iconos EN PLANTA del módulo lateral y del puente (v465.190) ────────────
   Juan: «un icono por cada lateral… que se vea y se entienda que el lateral
   tiene menos fondo que el resto». En planta el fondo se LEE; en alzado no. */
.ico-planta { width: 100%; max-width: 92px; height: auto; display: block;
  stroke: currentColor; fill: none; }
.ico-planta text { stroke: none; fill: currentColor; font-family: var(--sans);
  font-size: 10px; font-weight: 700; }

/* El dibujo GRANDE arriba y el texto debajo (v465.190, petición de Juan): igual
   que los tres chips de la composición del puente. */
.ml-lado { margin-top: 8px; }
.ml-cab { display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; padding: 9px 8px 7px; border-radius: 9px;
  border: 1px solid var(--line); color: var(--ink-mute); }
.ml-cab-txt { display: flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; }
.ml-cab .ico-planta { max-width: 128px; }
.ml-lado.on .ml-cab { border-color: var(--gold); color: var(--gold-deep);
  background: rgba(184,153,104,.10); }
#screen-editor .ml-cab { border-color: rgba(184,153,104,.22); color: rgba(226,214,190,.70); }
#screen-editor .ml-lado.on .ml-cab { border-color: var(--gold); color: var(--gold);
  background: rgba(184,153,104,.14); }

/* Los tres de la composición del PUENTE, más grandes que antes */
.pte-dispo .ico-planta { max-width: 78px; }

/* ════════════════════════════════════════════════════════════
   MODO CLARO DEL EDITOR (v465.190)
   ════════════════════════════════════════════════════════════
   Petición de Adrián y Juan (23/09): «tendremos que hacer los dos temas, modo
   oscuro o modo claro, porque el cliente, si trabaja de día o de noche, le
   gustará más una manera u otra de trabajar».

   ⚠️ SE AÑADE UNA CAPA, NO SE TOCA LA OSCURA. El editor tiene desde siempre un
   bloque «EDITOR — DARK LUXURY THEME» montado ENCIMA de la paleta clara de la
   app. Gatear ese bloque habría obligado a repasar sus 60 y pico reglas —
   algunas mezclan color y ESTRUCTURA (`.ed-panel-tab`, `.ed-left.collapsed`) y
   se habría roto la colocación en claro. Así, quien no toque el interruptor ve
   EXACTAMENTE lo de siempre: es la propiedad que más vale aquí.

   La especificidad basta y no hace falta ni un `!important`: `body.tema-claro
   #screen-editor .ed-left` (1 id + 2 clases) gana a `#screen-editor .ed-left`
   (1 id + 1 clase), y `body.tema-claro .ed-elem-bar` gana a `.ed-elem-bar`.
   Si algún día se añade una regla oscura con MÁS peso, aquí hay que igualarlo.

   Paleta: la misma de la web pública (aprobada el 15/09) — fondo gris claro,
   tarjetas blancas, negro y grises, y el dorado sólo de acento. */

/* LOS COLORES DEL MODO CLARO, en un solo sitio (v465.190).
   Es el GRIS NEUTRO del boceto, elegido por Juan («prefiero el gris del boceto,
   se ve mejor») frente a la crema del resto de la app. Son tokens PROPIOS
   (`--cl-*`) a propósito: redefinir aquí `--bg` o `--paper`, que son los del
   tema de toda la app, pintaría también el Inicio y Proyectos. Van en `body`
   —no en `#screen-editor`— porque las pestañas, los desplegables de la barra y
   el botón de encuadre viven FUERA del editor en el árbol. */
body.tema-claro {
  --cl-bg:     #F4F3F1;   /* fondo de los paneles */
  --cl-panel:  #FFFFFF;   /* la tarjeta de cada desplegable */
  --cl-field:  #F7F6F4;   /* dentro de un campo */
  --cl-line:   #E4E3E0;
  --cl-line-2: #DDDCD8;
  --cl-ink:    #111111;
  --cl-ink-2:  #2E2E2E;
  --cl-mute:   #5F5F5F;
  --cl-faint:  #8C8C8C;
  --cl-acc:    #111111;   /* el acento, en NEGRO (Juan, 23/09) */
}
/* ⚠️ EL ACENTO DEL EDITOR EN CLARO ES NEGRO, Y SE HACE REDEFINIENDO EL TOKEN.
   Juan: «los acentos en negro también». Hay decenas de reglas de base que tiran
   de `--gold` / `--accent` (el chip activo, el foco de un campo, el borde del
   material elegido, los rótulos del panel derecho…): contestarlas una a una se
   habría quedado a medias a la primera que alguien añada. Redefinir el token
   AQUÍ, y sólo dentro de `#screen-editor`, las alcanza todas y deja el dorado
   intacto en el Inicio, en Proyectos y en el modo oscuro. */
body.tema-claro #screen-editor {
  --gold: var(--cl-acc);
  --gold-deep: #000000;
  --accent: var(--cl-acc);
}

/* ── Fondo y barra de arriba ─────────────────────────────────── */
body.tema-claro #screen-editor { background: var(--cl-bg); }
body.tema-claro .ed-layout { background: var(--cl-bg); }
body.tema-claro #screen-editor .ed-brand { background: var(--cl-bg); }
body.tema-claro #screen-editor .ed-topbar {
  background: rgba(255,255,255,0.94);
  border-bottom-color: var(--cl-line);
  box-shadow: 0 1px 8px rgba(26,22,17,0.06);
}
body.tema-claro #screen-editor .ed-back-btn { color: var(--cl-ink-2); }
body.tema-claro #screen-editor .ed-back-btn:hover { background: rgba(0,0,0,0.05); color: var(--cl-ink); }
body.tema-claro #screen-editor .ed-project-name { color: var(--cl-ink); }
body.tema-claro #screen-editor .ed-tool { color: var(--cl-ink-2); }
body.tema-claro #screen-editor .ed-tool:hover { background: rgba(0,0,0,0.05); color: var(--cl-ink); }
body.tema-claro #screen-editor .ed-tool.active { color: var(--cl-acc); background: rgba(0,0,0,0.14); }
body.tema-claro #screen-editor .ed-sep { background: var(--cl-line); }
/* «Acciones» y los botones de dentro llevan un degradado dorado escrito a pelo
   en el tema oscuro: en claro, negro sobre blanco como el resto de acentos. */
body.tema-claro #screen-editor .ed-tool-accent {
  background: var(--cl-acc); color: #FFFFFF; border-color: var(--cl-acc);
}
body.tema-claro #screen-editor .ed-tool-accent:hover { background: var(--cl-ink-2); }
/* ⚠️ Con `#screen-editor` delante: sin él, la regla de arriba (que SÍ lo lleva)
   gana por el id y los botones de dentro del menú salían todos en negro macizo,
   que es una pared. Dentro del desplegable van en texto, no en pastilla. */
body.tema-claro #screen-editor .ed-actions-popover .ed-tool-accent,
body.tema-claro #screen-editor .ed-act-sub .ed-tool-accent {
  background: transparent; color: var(--cl-ink); border-color: transparent;
}
body.tema-claro #screen-editor .ed-actions-popover .ed-tool-accent:hover,
body.tema-claro #screen-editor .ed-act-sub .ed-tool-accent:hover { background: rgba(0,0,0,0.06); }

/* ── Paneles laterales ───────────────────────────────────────── */
body.tema-claro #screen-editor .ed-left,
body.tema-claro #screen-editor .ed-right {
  background: var(--cl-bg);
}
body.tema-claro #screen-editor .ed-left { border-right-color: var(--cl-line); }
body.tema-claro #screen-editor .ed-right { border-left-color: var(--cl-line); }
body.tema-claro #screen-editor .ed-left::-webkit-scrollbar-thumb,
body.tema-claro #screen-editor .ed-right::-webkit-scrollbar-thumb { background: var(--cl-line-2); }

/* Cada desplegable, una tarjeta blanca sobre el gris del panel: así se ve
   dónde empieza y acaba cada uno con todos plegados. */
body.tema-claro #screen-editor .ed-left > .ep-block {
  background: var(--cl-panel);
  border: 1px solid var(--cl-line);
  border-radius: 10px;
  margin: 0 8px 7px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.035);
}
body.tema-claro #screen-editor .ed-section { border-bottom-color: var(--cl-line); }
body.tema-claro #screen-editor .ed-section-hd,
body.tema-claro #screen-editor .ep-sec-title,
/* Los rótulos del panel derecho («Elementos», «Interior», «Cajonera»…) van por
   `--ink-faint`, que es un beige: sobre el gris se leían como un dorado
   apagado. En claro, gris neutro como el resto. */
body.tema-claro #screen-editor .ep-group-label { color: var(--cl-faint); }
body.tema-claro #screen-editor .ep-collapsible .ep-toggle-btn { color: var(--cl-ink); }
body.tema-claro #screen-editor .ep-collapsible.open .ep-toggle-btn { color: var(--cl-ink); }
body.tema-claro #screen-editor .ep-collapsible .ep-toggle-btn:hover { color: var(--cl-acc); }
body.tema-claro #screen-editor .ep-block-val { color: var(--cl-mute); }
/* ⚠️ v465.225 — EL RESUMEN DE «MATERIAL» ERA INVISIBLE EN CLARO. Juan: «se sigue
   viendo mal el texto debajo de Material en modo claro, en modo oscuro bien». Es
   `.ep-mat-name` («Interior: … · Puertas: … · Diseño: …»), que va en `var(--paper)`
   —crema— porque nació para el panel OSCURO: sobre el blanco del tema claro se queda
   en ~1,1:1, o sea que está escrito y no se lee. No se toca la regla base: el tema
   oscuro está bien y él lo dice. */
body.tema-claro #screen-editor .ep-mat-name { color: var(--cl-ink); }
/* Y en el MISMO bloque hay otros dos textos que se habían quedado con los colores
   del tema oscuro — medidos, no supuestos, sobre el blanco del panel claro:
     · los rótulos de grupo (LISOS / INTERIOR / PUERTAS / VIDRIOS) iban en #d8b866,
       luminancia 184 sobre 255 → ~1,9:1, que es lo que se ve apagado en su captura;
     · los NOMBRES de cada material (.mm-name) iban en crema al 78 %, luminancia 246
       → prácticamente invisibles al desplegar cualquiera de los cuatro grupos.
   El tema oscuro no se toca: ahí los dos están bien y él lo dice. */
body.tema-claro #screen-editor .mm-group-head { color: var(--cl-ink-2); }
body.tema-claro #screen-editor .mm-name { color: var(--cl-ink-2); }
body.tema-claro #screen-editor .mm-swatch.sel { border-color: var(--cl-acc); }

/* ── Campos ──────────────────────────────────────────────────── */
body.tema-claro #screen-editor .ed-row-label { color: var(--cl-mute); }
body.tema-claro #screen-editor .ed-row input,
body.tema-claro #screen-editor .ed-row select {
  background: var(--cl-field); border-color: var(--cl-line-2); color: var(--cl-ink);
}
body.tema-claro #screen-editor .ed-row input:focus,
body.tema-claro #screen-editor .ed-row select:focus {
  border-color: var(--cl-acc); background: var(--cl-panel);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.14);
}
body.tema-claro #screen-editor .ed-row input::placeholder { color: var(--cl-faint); }
/* Los campos del panel de medidas van por su cuenta (`.ep-num` / `.dim-row
   input`), no por `.ed-row`: sin esto se quedaban en la crema de la app y
   cantaban sobre el gris. */
body.tema-claro #screen-editor .ep-num,
body.tema-claro #screen-editor .dim-row input,
body.tema-claro #screen-editor .ep-field input {
  background: var(--cl-field); border-color: var(--cl-line-2); color: var(--cl-ink);
}
body.tema-claro #screen-editor .ep-input-wrap span,
body.tema-claro #screen-editor .dim-row span { color: var(--cl-faint); }
/* ⚠️ v465.244 — EN CLARO EL ANILLO VA MÁS OSCURO. Juan: «en modo claro se ve mejor,
   pero tendría que ir un poco más oscuro». El blanco cálido del tema oscuro
   desaparece del todo sobre el papel; aquí manda el pardo del oro profundo.
   El rótulo y el filete también bajan a `--gold-deep`: el oro claro sobre crema se
   queda en nada (es el mismo fallo que la carpeta marcada de la v465.237). */
body.tema-claro #screen-editor .dim-row.dim-falta input {
  border-color: var(--gold-deep);
  animation-name: dimFaltaLatidoClaro;
}
body.tema-claro #screen-editor .dim-row.dim-falta label { color: var(--gold-deep); }
@keyframes dimFaltaLatidoClaro {
  0%   { box-shadow: 0 0 0 0 rgba(110,86,36,0.85); }
  70%  { box-shadow: 0 0 0 9px rgba(110,86,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(110,86,36,0); }
}
body.tema-claro #screen-editor .dim-aviso {
  color: var(--gold-deep); background: rgba(142,115,64,0.10);
  border-left-color: var(--gold-deep);
}
body.tema-claro #screen-editor .dim-row label,
body.tema-claro #screen-editor .ep-field label { color: var(--cl-mute); }
body.tema-claro #screen-editor .dim-hint,
body.tema-claro #screen-editor .ep-hint,
body.tema-claro #screen-editor .ep-sub-title { color: var(--cl-faint); }
body.tema-claro #screen-editor .form-hint { color: var(--cl-faint); }

/* ── Botones y chips ─────────────────────────────────────────── */
body.tema-claro #screen-editor .btn-outline {
  border-color: var(--cl-line-2); color: var(--cl-ink-2); background: transparent;
}
body.tema-claro #screen-editor .btn-outline:hover {
  border-color: var(--cl-acc); color: var(--cl-acc); background: rgba(0,0,0,0.08);
}
body.tema-claro #screen-editor .btn-sm {
  background: var(--cl-panel); border-color: var(--cl-line-2); color: var(--cl-ink-2);
}
body.tema-claro #screen-editor .btn-sm:hover { background: rgba(0,0,0,0.10); color: var(--cl-acc); }
body.tema-claro #screen-editor .icon-btn { color: var(--cl-mute); }
body.tema-claro #screen-editor .icon-btn:hover { color: var(--cl-acc); background: rgba(0,0,0,0.10); }
body.tema-claro #screen-editor .ep-chip {
  background: var(--cl-panel); border-color: var(--cl-line-2); color: var(--cl-ink-2);
}
body.tema-claro #screen-editor .ep-chip:hover {
  background: rgba(0,0,0,0.10); border-color: var(--cl-acc); color: var(--cl-acc);
}
body.tema-claro #screen-editor .mod-card { background: var(--cl-panel); border-color: var(--cl-line); }
body.tema-claro #screen-editor .mod-card-label { color: var(--cl-mute); }
body.tema-claro #screen-editor .mod-card input {
  background: var(--cl-panel); border-color: var(--cl-line-2); color: var(--cl-ink);
}
body.tema-claro #screen-editor .mod-card-del { color: var(--cl-faint); }
body.tema-claro #screen-editor .obs-item { background: var(--cl-panel); border-color: var(--cl-line); }
body.tema-claro #screen-editor .obs-item-edit,
body.tema-claro #screen-editor .obs-item-del { color: var(--cl-mute); }
body.tema-claro #screen-editor .mat-option { border-color: var(--cl-line); }
body.tema-claro #screen-editor .mat-label { color: var(--cl-mute); }
body.tema-claro #screen-editor .ml-cab { border-color: var(--cl-line-2); color: var(--cl-ink-2); }
body.tema-claro #screen-editor .ml-lado.on .ml-cab {
  border-color: var(--cl-acc); color: var(--cl-acc); background: rgba(0,0,0,0.10);
}

/* ── Lo que flota sobre el 3D ────────────────────────────────── */
body.tema-claro .ed-panel-tab {
  background: rgba(255,255,255,0.92); border-color: var(--cl-line-2); color: var(--cl-mute);
}
body.tema-claro .ed-panel-tab:hover { background: rgba(0,0,0,0.14); color: var(--cl-acc); }
body.tema-claro .ed-fit-btn {
  background: rgba(255,255,255,0.86); border-color: var(--cl-line-2); color: var(--cl-ink-2);
}
body.tema-claro .ed-fit-btn:hover { background: rgba(0,0,0,0.12); color: var(--cl-acc); }
body.tema-claro .ed-door-ctrl {
  background: rgba(255,255,255,0.92); border-top-color: var(--cl-line);
}
body.tema-claro .ed-door-ctrl label { color: var(--cl-mute); }
body.tema-claro #ed-placeholder,
body.tema-claro #ed-placeholder p { color: var(--cl-faint); }
body.tema-claro #ed-placeholder svg { stroke: var(--cl-line-2); }

/* Los desplegables de la barra de arriba. */
body.tema-claro .ed-cotas-popover,
body.tema-claro .ed-view-popover,
body.tema-claro .ed-actions-popover,
body.tema-claro .ed-com-popover {
  /* OPACO del todo: a 0.98 se transparentaban los chips del panel de detrás y
     el menú se leía sucio. Sobre el 3D no hay motivo para dejar pasar nada. */
  background: #FFFFFF;
  border-color: var(--cl-line-2);
  color: var(--cl-ink);
  box-shadow: 0 8px 24px rgba(26,22,17,0.16);
}
body.tema-claro .ed-view-opt,
body.tema-claro .ed-view-check,
body.tema-claro .ed-cotas-popover label { color: var(--cl-ink-2); }
body.tema-claro .ed-view-opt:hover { background: rgba(0,0,0,0.12); color: var(--cl-acc); }
/* v465.271: los chips de familia y el distintivo nacen escritos para el
   desplegable OSCURO (letra crema al 72 %), que sobre el blanco del tema claro
   no se lee. El chip ELEGIDO no se toca: va en oro con letra oscura y vale en
   los dos temas. (La misma lección de los tres textos del bloque «Material»,
   v465.237: lo que nace para panel oscuro hay que contestarlo aquí.) */
body.tema-claro .ed-com-fam {
  background: rgba(0,0,0,0.05); border-color: var(--cl-line-2); color: var(--cl-ink-2);
}
body.tema-claro .ed-com-fam:hover { background: rgba(0,0,0,0.11); }
/* ⚠️ EL CHIP ELEGIDO HAY QUE CONTESTARLO OTRA VEZ AQUÍ, y por poco se queda sin
   hacer. `body.tema-claro .ed-com-fam` (dos clases + un elemento) GANA a
   `.ed-com-fam.sel` (dos clases), así que la regla de arriba se llevaba por
   delante el marcado y los tres chips salían iguales — medido en el render, no
   deducido. En claro el acento es NEGRO (`--gold: var(--cl-acc)` dentro de
   `#screen-editor`, decisión de Juan), o sea chip negro con letra blanca. */
body.tema-claro .ed-com-fam.sel {
  background: var(--gold); border-color: var(--gold); color: #FFFFFF;
}
body.tema-claro .ed-com-fam-tag {
  background: rgba(0,0,0,0.05); border-color: var(--cl-line-2); color: var(--cl-ink-2);
}
/* El de FRENTES tiene que seguir distinguiéndose del de INTERIOR: en oscuro lo
   hace el dorado, y aquí el filete y la letra en tinta llena. */
body.tema-claro .ed-com-fam-tag.es-frente {
  background: rgba(0,0,0,0.10); border-color: var(--cl-ink); color: var(--cl-ink);
}
body.tema-claro .ed-com-empty { color: var(--cl-faint); }
body.tema-claro .ed-com-txt { color: var(--cl-ink); }
body.tema-claro .ed-com-del { color: var(--cl-faint); }
/* El número de la nota: en claro su círculo es NEGRO (el acento), así que la
   cifra va en blanco — con el `#14120A` de la regla base salía negro sobre negro. */
body.tema-claro .ed-com-num { color: #FFFFFF; }
body.tema-claro .ed-act-sub { border-left-color: var(--cl-line-2); }
body.tema-claro .ed-actions-popover .ed-tool-accent:hover { background: rgba(0,0,0,0.14); }

/* La barra de la pieza seleccionada y sus desplegables se quedan OSCUROS a
   propósito: son una pastilla flotando sobre el 3D, y ahí el contraste con el
   armario es lo que la hace legible en los dos modos. */

/* ── El interruptor de la barra de arriba ────────────────────── */
.ed-tema {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px; border-radius: var(--radius-sm);
  cursor: pointer; user-select: none; white-space: nowrap;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: rgba(184,153,104,0.8);
}
.ed-tema:hover { background: rgba(184,153,104,0.09); }
body.tema-claro .ed-tema { color: var(--ink-soft); }
body.tema-claro .ed-tema:hover { background: rgba(0,0,0,0.05); }
.ed-tema input { position: absolute; opacity: 0; width: 0; height: 0; }
.ed-tema-sw {
  position: relative; width: 34px; height: 18px; flex-shrink: 0;
  border-radius: 999px; background: rgba(184,153,104,0.28);
  border: 1px solid rgba(184,153,104,0.35);
  transition: background .16s ease, border-color .16s ease;
}
.ed-tema-sw::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #FBF6E9; transition: transform .16s ease;
}
.ed-tema input:checked + .ed-tema-sw { background: var(--gold); border-color: var(--gold); }
.ed-tema input:checked + .ed-tema-sw::after { transform: translateX(16px); }
.ed-tema input:focus-visible + .ed-tema-sw { box-shadow: 0 0 0 2px rgba(184,153,104,0.35); }
/* En claro el propio interruptor va neutro: lo apagado en gris y lo encendido
   en negro, como el resto de los acentos. */
body.tema-claro .ed-tema-sw { background: rgba(0,0,0,0.16); border-color: rgba(0,0,0,0.22); }
body.tema-claro .ed-tema-sw::after { background: #FFFFFF; }
body.tema-claro .ed-tema input:focus-visible + .ed-tema-sw { box-shadow: 0 0 0 2px rgba(0,0,0,0.22); }
.ed-tema-ico { flex-shrink: 0; }

/* ── PESTAÑAS del panel de elementos (v465.191) ──────────────────────────────
   Medido en iPad 10.9 apaisado antes de tocar nada: de los 20 chips se veían
   12, y los 8 que caían bajo el scroll eran justo las PUERTAS y la ESTRUCTURA
   — o sea, lo que más se usa después de las baldas, escondido y encima con el
   incordio de tener que bajar y LUEGO arrastrar. Con tres pestañas no hay
   scroll en ninguna. Es la misma idea que los desplegables de la izquierda:
   un sitio a la vez. */
/* v465.202: las pestañas se quedan arriba al hacer scroll (`sticky`) pero NO tenían
   fondo, así que los iconos pasaban POR DEBAJO y se veían a través — lo reportó Juan:
   «cuando hay que hacer scroll se meten los iconos en los chip de arriba».
   Fondo OPACO del color del panel + un filete abajo para que se vea dónde acaba la
   cabecera. El `padding-top` evita que el primer icono asome pegado al borde. */
.ep-tabs {
  display: flex; gap: 3px; padding: 6px 8px 8px;
  position: sticky; top: 0; z-index: 3;
  background: var(--paper);
  box-shadow: 0 6px 10px -8px rgba(0,0,0,0.55);
}
.ep-tab {
  flex: 1; padding: 6px 2px; border-radius: 7px;
  border: 1px solid var(--line); background: transparent;
  font: 600 10.5px var(--sans); letter-spacing: .01em;
  color: var(--ink-mute); cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.ep-tab.on { background: var(--gold); border-color: var(--gold); color: #fff; }
/* v465.202: el panel del editor NO usa `--paper` (es un degradado oscuro, o
   `--cl-bg` en claro), así que la banda de las pestañas tiene que ir a juego aquí
   también — si no, en el editor quedaría una franja crema sobre fondo negro. */
#screen-editor .ep-tabs { background: #141210; }
body.tema-claro #screen-editor .ep-tabs {
  background: var(--cl-bg);
  box-shadow: 0 6px 10px -8px rgba(0,0,0,0.22);
}
#screen-editor .ep-tab { border-color: rgba(184,153,104,0.22); color: rgba(226,214,190,0.70); }
#screen-editor .ep-tab.on { background: var(--gold); border-color: var(--gold); color: #17140F; }
body.tema-claro #screen-editor .ep-tab { border-color: var(--cl-line-2); color: var(--cl-mute); }
body.tema-claro #screen-editor .ep-tab.on {
  background: var(--cl-acc); border-color: var(--cl-acc); color: #FFFFFF;
}
.ep-group[hidden] { display: none; }

/* ── EDITAR PUERTAS COLOCADAS — el modal FIJO de la columna derecha (v465.223) ──
   Adrián (26/09): el chip va en el hueco del rótulo «Elementos» y el modal nace por
   debajo de las pestañas, TAPANDO el catálogo mientras dura. */
/* v465.241 (Juan): la ✕ de cerrar la edición va JUNTO al chip, no en la cabecera
   del panel. La fila los pone en línea; la ✕ sólo se pinta mientras se edita. */
.ep-edit-row { display: flex; align-items: stretch; gap: 6px; margin: 10px 8px 2px; }
.ep-edit-x {
  display: none; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink-mute); cursor: pointer;
}
#ed-right.editando-puertas .ep-edit-x { display: inline-flex; }
.ep-edit-chip {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; cursor: pointer; text-align: left;
  font: 600 11px var(--sans); letter-spacing: .01em;
  color: var(--ink-mute);
}
.ep-edit-chip svg { flex: 0 0 auto; }
.ep-edit-chip.on { background: var(--gold); border-color: var(--gold); color: #17140F; }
#screen-editor .ep-edit-x { border-color: rgba(184,153,104,0.22); color: rgba(226,214,190,0.75); }
#screen-editor .ep-edit-x:hover { background: rgba(184,153,104,0.14); }
body.tema-claro #screen-editor .ep-edit-x { border-color: var(--cl-line-2); color: var(--cl-mute); }
#screen-editor .ep-edit-chip { border-color: rgba(184,153,104,0.22); color: rgba(226,214,190,0.75); }
#screen-editor .ep-edit-chip.on { background: var(--gold); border-color: var(--gold); color: #17140F; }
body.tema-claro #screen-editor .ep-edit-chip { border-color: var(--cl-line-2); color: var(--cl-mute); }
body.tema-claro #screen-editor .ep-edit-chip.on {
  background: var(--cl-acc); border-color: var(--cl-acc); color: #FFFFFF;
}
/* El hueco donde se muda el panel. `min-height: 0` es lo que deja que su cuerpo
   tenga scroll propio dentro de una columna flex — sin eso crece hasta desbordar. */
.ep-edit-host { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ep-edit-host.hidden { display: none; }
#ed-right.editando-puertas .ep-group { display: none; }
/* ⚠️ ANCLADO deja de ser flotante: fuera la posición fija, el redondeo y la sombra
   — es una columna más. El FONDO OSCURO se queda (el panel no tiene variante clara,
   y su texto es crema: dejarlo transparente lo haría ilegible en el tema claro). */
#panel-frente.fp-dock {
  /* v465.378 (Juan, captura): anclado es un hijo FLEX y el z-index 9000 del flotante sí
     cuenta en un hijo flex → tapaba el desplegable de Acciones (barra a 200). Anclado no lo necesita. */
  z-index: auto;
  position: static; top: auto; right: auto; left: auto; bottom: auto;
  width: auto; max-height: none;
  border: 0; border-top: 1px solid rgba(184,153,104,0.22);
  border-radius: 0; box-shadow: none;
  flex: 1 1 auto; min-height: 0;
}
#panel-frente.fp-dock .fp-head { cursor: default; position: sticky; top: 0; z-index: 2; }
/* v465.241 (Juan): «tiene que tener una altura más grande, más legible». Antes se
   BAJABA a 12 px al anclarlo; ahora el anclado es el caso normal, así que manda el
   tamaño del panel (15 px en serif) y esta regla sólo lo remata.
   ⚠️ 2ª vuelta del mismo día: con 16 px el título le comía el protagonismo al chip
   («se ve más Frente correderas que el chip de Girar veta») → **14 px**. Sube desde
   los 12 de antes, así que sigue siendo «más legible», pero por debajo del chip. */
#panel-frente.fp-dock .fp-title { font-size: 14px; line-height: 1.2; }
#panel-frente.fp-dock .fp-body { flex: 1 1 auto; }
/* ⚠️ ANCLADO, la ✕ de la cabecera SE ESCONDE: su sitio es arriba, junto a «Editar
   puertas colocadas» (v465.241). La de la cabecera **se queda en el DOM** porque es
   la única salida del panel FLOTANTE legacy — no la borres del HTML. */
#panel-frente.fp-dock .fp-close { display: none; }
/* ⚠️ v465.225 — LA PISTA CUELGA DEL CHIP Y SE TIENE QUE LEER. Juan: «no se ve apenas
   qué tiene que hacer el usuario cuando clica Editar puertas». Antes era un gris al
   62 % dos bloques más abajo. Ahora va pegada al chip, con el filete del acento a la
   izquierda y el texto al contraste del cuerpo — no es decoración: es la única
   instrucción que hay en la columna mientras no eliges puerta. */
.ep-edit-pista {
  margin: 6px 8px 2px; padding: 9px 10px;
  border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0;
  background: rgba(184,153,104,0.10);
  font: 500 12px var(--sans); line-height: 1.45;
  color: var(--paper);
}
#screen-editor .ep-edit-pista { color: rgba(240,232,214,0.95); }
body.tema-claro #screen-editor .ep-edit-pista {
  border-left-color: var(--cl-acc); background: rgba(17,17,17,0.05); color: var(--cl-ink-2);
}
/* La llave del ojo: el icono dice el estado, y sólo se ve uno de los dos. */
#btn-ed-ojo .ojo-cerrado { display: none; }
#btn-ed-ojo.ojo-off .ojo-abierto { display: none; }
#btn-ed-ojo.ojo-off .ojo-cerrado { display: inline-block; }
/* v465.224 — «Ver / Ocultar» a secas no decía DE QUÉ. Juan: «tiene que llevar el
   texto de Puertas para que se vea lo que es, aunque se vea en dos líneas». Por eso
   el rótulo se parte en dos renglones en vez de estrechar la barra. */
#btn-ed-ojo #ed-ojo-txt {
  display: inline-block; white-space: normal; text-align: left;
  line-height: 1.05; max-width: 52px;
}

/* ══ EL MODAL DE EDITAR PUERTAS, CON LOS COLORES DEL MODAL DE CAJONERAS (v465.224)
   Juan: «el modal que salga con los colores del modal de cajoneras, con cualquier
   modo oscuro/claro». O sea papel crema y tinta oscura SIEMPRE, como `.modal-box` —
   que no cambia con el tema del editor. Las reglas base de `.fp-*` están escritas
   para un panel oscuro (fondos `rgba(255,255,255,…)`, letra crema), así que se
   contestan aquí en bloque en vez de reescribirlas: el panel es uno solo. */
#panel-frente {
  background: var(--paper);
  color: var(--ink);
  border-top-color: var(--line);
}
#panel-frente .fp-head {
  background: var(--bg);
  border-bottom-color: var(--line-soft);
  color: var(--ink);
}
#panel-frente .fp-title {
  font-family: var(--serif); font-weight: 400; font-size: 15px;
  letter-spacing: 0; color: var(--ink);
}
#panel-frente .fp-close {
  background: var(--bg); border: 1px solid var(--line);
  color: var(--ink-soft); width: 30px; height: 30px; border-radius: 50%;
}
#panel-frente .fp-close:hover { background: rgba(26,22,17,0.07); }
#panel-frente .fp-section-title { color: var(--ink-soft); }
#panel-frente .fp-sec-plegable > .fp-sec-h { border-bottom-color: var(--line); }
#panel-frente .fp-sec-lbl { color: var(--ink-soft); }
#panel-frente .fp-chip {
  background: var(--bg); border-color: var(--line-strong); color: var(--ink);
}
#panel-frente .fp-chip:hover { background: rgba(26,22,17,0.06); }
#panel-frente .fp-chip.selected {
  background: var(--gold); border-color: var(--gold); color: #FFFFFF;
}
/* ⚠️ v465.237 — EL `:not(.selected)` NO ES COSMÉTICO, ES EL ARREGLO.
   El botón de carpeta se pinta con DOS clases a la vez (`renderFrentePanel`):
   `selected` cuando el diseño puesto vive en esa carpeta, y `fp-folder-open`
   cuando está desplegada — o sea, casi siempre las dos. Esta regla va DESPUÉS
   de la de `.selected`, así que le pisaba el FONDO (oro sólido → oro al 18 %)
   pero **no el `color: #FFFFFF`**: blanco sobre un crema casi blanco. Medido
   sobre el papel del panel: el fondo compuesto queda en luminancia ~230 y la
   letra en 255 — 25 de diferencia, o sea ilegible, que es lo que fotografió
   Juan («el texto no se ve apenas»).
   Con el `:not` el chip elegido conserva su oro sólido con letra blanca (como
   «Lite» o «Blanco», que se leen bien) y la flecha ▴ sigue diciendo que está
   abierta. La carpeta abierta SIN ser la elegida se queda con el oro suave y
   la tinta oscura de `.fp-chip`, que ya iba bien.
   El panel OSCURO (~L4934) tiene el mismo cruce y ahí NO molesta: su letra es
   crema sobre un oro al 16 % encima de fondo oscuro (Δ ~200). No se toca. */
#panel-frente .fp-chip.fp-folder-open:not(.selected) {
  background: rgba(184,153,104,0.18); border-color: var(--gold);
}
#panel-frente .fp-chip.fp-chip-danger {
  color: #8C2A1C; border-color: rgba(140,42,28,0.45); background: rgba(140,42,28,0.06);
}
#panel-frente .fp-chip.fp-chip-danger:hover { background: rgba(140,42,28,0.14); }
#panel-frente .fp-card {
  background: var(--bg); border-color: var(--line-strong); color: var(--ink);
}
#panel-frente .fp-card:hover { background: rgba(26,22,17,0.05); border-color: var(--gold); }
#panel-frente .fp-card.selected { border-color: var(--gold); background: rgba(184,153,104,0.16); }
#panel-frente .fp-card-desc, #panel-frente .fp-subfolder-title { color: var(--ink-soft); }
#panel-frente .fp-input-row input {
  background: var(--paper); border-color: var(--line-strong); color: var(--ink);
}
#panel-frente .fp-cards::-webkit-scrollbar-thumb { background: var(--line-strong); }
/* Los dos dibujos de la veta viven aquí dentro: su rótulo iba en crema. */
#panel-frente .ed-veta-ej { color: var(--ink-soft); }
/* v465.241 — el chip «Girar veta» de la CABECERA, sobre el papel crema del panel.
   Apagado: filete OLIVA suave, para que el color lo identifique también apagado.
   Puesto: OLIVA macizo con letra blanca (ver el porqué en el bloque de arriba —
   en tinta se fundía con la barra negra de encima). */
#panel-frente .fp-veta-chip { border-color: rgba(110,106,63,0.55); color: var(--olive); }
#panel-frente .fp-veta-chip:hover { background: rgba(110,106,63,0.12); }
#panel-frente .fp-veta-chip.on { background: var(--olive); border-color: var(--olive); color: #FFFFFF; }
#panel-frente .fp-veta-chip.on:hover { background: #7D7947; }
#panel-frente .fp-veta-led { background: rgba(110,106,63,0.45); }
#panel-frente .fp-veta-ej { border-color: var(--line-strong); }
/* ══ v465.239 — LA BANDA CON EL TIPO PUESTO (Juan: «tiene que salir el tipo de puerta
   que está colocada»). NO es una sección plegable a propósito, así que no lleva ni
   cabecera ni flecha: se lee sin tocar nada. El nombre va en el serif del panel y a
   15 px —el título de la cabecera se queda en 12 y eso fue justo el problema— y la
   línea de abajo explica que es de sólo lectura. */
/* ⚠️ v465.241 — LA BANDA DEL TIPO SE QUEDA FIJA (Juan: «el texto de la descripción
   del conjunto de puertas que está colocado se queda fijo»). Se pega al tope del
   cuerpo, que es el que desplaza, así que sigue a la vista con veinte secciones por
   delante. El `top` NEGATIVO compensa el `padding-top: 8px` de `.fp-body`: con
   `top: 0` quedaría ese hueco por el que se vería pasar el contenido de debajo. */
#panel-frente .fp-tipo {
  position: sticky; top: -8px; z-index: 1;
  margin: 0 0 8px; padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
}
#panel-frente .fp-tipo-nom {
  font-family: var(--serif); font-size: 15px; line-height: 1.25;
  color: var(--ink);
}
#panel-frente .fp-tipo-nota {
  margin-top: 3px; font-size: 11.5px; line-height: 1.35;
  color: var(--ink-soft);
}
/* ⚠️ v465.225 — AQUÍ HABÍA DOS REGLAS DE `.ep-edit-pista` y ya no valen: la pista
   dejó de vivir dentro del panel crema (ahora cuelga del chip, en la columna), así
   que pintarla del color del papel la volvía a dejar sin contraste. Su color vive
   arriba, junto a `.ep-edit-chip`. NO las repongas aquí. */

/* ══ CONTRASTE EN LOS MODALES (v465.224) ═════════════════════════════════════
   Juan: «en modo claro no se ve bien el texto que remarco en naranja». Los
   rótulos y las notas de los modales iban en `--ink-mute` (#8C7F6C), un pardo
   anaranjado que sobre el papel crema (#FBF6E9) se queda en ~3,3:1 — por debajo
   del mínimo legible para letra pequeña. Pasan a `--ink-soft` (#574B3D), ~7:1.
   Se acota a los MODALES para no recolocar pantallas que nadie ha mirado. */
.modal-body .form-group label,
.modal-body .form-hint,
.modal-body .caj-fab-cabe { color: var(--ink-soft); }
#caj-height-preview { color: var(--ink-soft); }

/* ── Tarjeta «qué es esto» al tocar un icono (v465.191) ──────────────────────
   Cuelga del BODY, no del panel: el panel tiene scroll propio y `overflow`, así
   que un hijo absoluto se recortaría contra su borde. Misma razón que los
   desplegables de la barra de abajo (`.ed-eb-pop`). */
.ep-ayuda {
  position: fixed; z-index: 400; width: 236px;
  padding: 11px 13px 12px; border-radius: 11px;
  background: rgba(20,17,13,0.98); border: 1px solid rgba(184,153,104,0.30);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  font-family: var(--sans);
}
.ep-ayuda-t { font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 5px; }
.ep-ayuda-d { font-size: 11.5px; line-height: 1.45; color: rgba(236,228,212,0.88); }
.ep-ayuda-r { font-size: 11px; line-height: 1.4; margin-top: 7px;
  color: rgba(226,214,190,0.62); border-top: 1px solid rgba(184,153,104,0.16); padding-top: 7px; }
.ep-ayuda-como { font-size: 10.5px; margin-top: 9px; color: rgba(184,153,104,0.75);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ep-ayuda-btn {
  margin-top: 10px; width: 100%; padding: 7px 10px; border-radius: 8px;
  border: none; background: var(--gold); color: #17140F;
  font: 700 12px var(--sans); cursor: pointer;
}
.ep-ayuda-btn:hover { filter: brightness(1.08); }
/* En claro, la misma tarjeta sobre blanco */
body.tema-claro .ep-ayuda {
  background: #FFFFFF; border-color: var(--cl-line-2);
  box-shadow: 0 10px 30px rgba(26,22,17,0.18);
}
body.tema-claro .ep-ayuda-t { color: var(--cl-ink); }
body.tema-claro .ep-ayuda-d { color: var(--cl-ink-2); }
body.tema-claro .ep-ayuda-r { color: var(--cl-mute); border-top-color: var(--cl-line); }
body.tema-claro .ep-ayuda-como { color: var(--cl-mute); }
body.tema-claro .ep-ayuda-btn { background: var(--cl-acc); color: #FFFFFF; }
/* El chip cuyo «qué es esto» está abierto (v465.191). En iPad no hay :hover. */
.ep-chip.ep-ayuda-on { border-color: var(--gold); color: var(--ink); }
#screen-editor .ep-chip.ep-ayuda-on { border-color: var(--gold); color: var(--gold); background: rgba(184,153,104,0.12); }
body.tema-claro #screen-editor .ep-chip.ep-ayuda-on {
  border-color: var(--cl-acc); color: var(--cl-ink); background: rgba(0,0,0,0.05);
}

/* ── El icono, MÁS GRANDE al sacarlo del panel (v465.191) ────────────────────
   Juan: «cuando salga de su icono, se vuelva más grande para colocarlo en el
   interior». En el panel mide 72 px porque ahí caben dos por fila; una vez en
   el 3D es LO QUE ESTÁS COLOCANDO, y a ese tamaño no se ve dónde cae.
   La usan los dos caminos: el fantasma táctil y la imagen de arrastre del
   ratón — si no, cada aparato enseñaría una cosa distinta. */
.ep-chip.ep-ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 176px; padding: 14px 12px 12px; gap: 8px;
  transform: translate(-50%, -50%);
  background: rgba(22,19,15,0.94);
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  color: var(--gold);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  opacity: .96;
}
.ep-chip.ep-ghost svg { width: 120px; }
.ep-chip.ep-ghost span { font-size: 14px; }
body.tema-claro .ep-chip.ep-ghost {
  background: rgba(255,255,255,0.96); border-color: var(--cl-acc); color: var(--cl-ink);
  box-shadow: 0 12px 30px rgba(26,22,17,0.22);
}
/* La burbuja, mientras arrastras: al canto izquierdo del 3D y un poco mayor. */
.ep-ayuda.ep-ayuda-drag { width: 258px; }

/* ══ AVISO GRANDE (v465.217) ══════════════════════════════════════════════
   Petición de Adrián: «si insiste en soltarlas en el hueco equivocado, un
   mensaje grande de que ya hay puertas ahí». El `.toast` de siempre es una
   pastilla pequeña abajo, y soltando una puerta estás mirando el armario: no se
   ve. Éste va centrado sobre el 3D y con letra de leerse de un vistazo.
   ⚠️ `pointer-events: none` — es un aviso, no un diálogo: no se pulsa, no hay
   que cerrarlo y no se come el siguiente toque. */
.aviso-grande {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(620px, 86vw);
  background: var(--ink);
  color: var(--bg);
  padding: 26px 32px;
  border-radius: 18px;
  z-index: 400;
  text-align: center;
  box-shadow: var(--shadow-3);
  /* ⚠️ EL CARTEL NO RECIBE TOQUES: tapa el centro del armario, y si se los quedara
     se comería el gesto siguiente. Lo único que sí los recibe es el botón OK. */
  pointer-events: none;
  animation: fadeIn 0.18s ease;
}
.aviso-grande .ag-ok {
  pointer-events: auto;
  margin-top: 16px;
  padding: 10px 34px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.aviso-grande .ag-t {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}
.aviso-grande .ag-m {
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.9;
}
@media (max-width: 700px) {
  .aviso-grande { padding: 20px 22px; }
  .aviso-grande .ag-t { font-size: 19px; }
  .aviso-grande .ag-m { font-size: 14px; }
}

/* ══ LA BARRA DEL ELEMENTO, ANCLADA A LA DERECHA (v465.222) ═══════════════
   Pedido por Adrián (25/09), viendo el panel de la izquierda: «esto de la izda,
   que antes aparecía abajo y se quitó […] es lo que hay que meter en la barra
   derecha, con un desplegable […] barra fija mientras se edita, una ✕ arriba
   visible siempre para cerrar la edición […] la barra con el color del modal como
   las cajoneras». Y en los DOS aparatos: «los dos a la derecha».
   ⚠️ Va en CLARO (`--paper`), no en la tinta de la barra de abajo: es el color del
   modal de la cajonera, que es lo que él pidió. Por eso hay que repintar también
   el texto y los chips, que estaban pensados para fondo oscuro. */

/* ══ v465.295 — AVISO FIJO (`avisoFijo`): arriba del lienzo, por encima de los modales,
   sólo se cierra con su ✕. Tarjeta clara con franja ámbar: destaca sobre el editor
   oscuro y se lee igual en el tema claro. Juan: «algo más visible que lo que sale ahora». */
#aviso-fijo-pila {
  position: fixed;
  top: calc(var(--safe-top) + 72px);
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 10px;
  z-index: 100003;
  pointer-events: none;
}
.aviso-fijo {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 14px;
  background: #FFF7E6;
  color: #1A1611;
  border: 2px solid #B07530;
  border-left-width: 8px;
  border-radius: 14px;
  padding: 14px 12px 14px 16px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.45), 0 2px 0 rgba(0,0,0,0.08);
  font-family: var(--sans);
}
.aviso-fijo-ico {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: #B07530; color: #FFFFFF;
  font-size: 22px; font-weight: 800; line-height: 34px; text-align: center;
  margin-top: 1px;
}
.aviso-fijo-txt { flex: 1 1 auto; min-width: 0; }
.aviso-fijo-t { font-size: 17px; font-weight: 700; line-height: 1.3; }
.aviso-fijo-d { font-size: 14.5px; line-height: 1.45; color: #574B3D; margin-top: 4px; }
.aviso-fijo-d:empty { display: none; }
/* v465.297: el check que hace el cambio recomendado (p. ej. «Poner 3 puertas correderas») */
.aviso-fijo-acc {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 9px 14px;
  border: 1.5px solid #B07530; border-radius: 10px;
  background: #FFFFFF; color: #1A1611;
  font-size: 15px; font-weight: 700; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.aviso-fijo-acc input { width: 22px; height: 22px; margin: 0; accent-color: #B07530; cursor: pointer; }
.aviso-fijo-x {
  flex: 0 0 auto;
  width: 44px; height: 44px;                /* dedo de iPad */
  border-radius: 50%;
  border: 1.5px solid rgba(26,22,17,0.25);
  background: #FFFFFF; color: #1A1611;
  font-size: 20px; font-weight: 700; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.aviso-fijo-x:active { transform: scale(0.94); background: #F1E6CF; }
.aviso-fijo-late { animation: avisoFijoLate 0.9s ease 1; }
@keyframes avisoFijoLate {
  0%   { transform: translateY(-12px); opacity: 0; }
  30%  { transform: translateY(0);     opacity: 1; }
  55%  { box-shadow: 0 0 0 6px rgba(176,117,48,0.35), 0 14px 44px rgba(0,0,0,0.45); }
  100% { box-shadow: 0 14px 44px rgba(0,0,0,0.45), 0 2px 0 rgba(0,0,0,0.08); }
}

/* v465.298 — piezas del STEP más largas que el tablero */
.step-largas-card { max-width: 480px; }
.step-largas-lista { margin: 0 22px 12px; max-height: 46vh; overflow-y: auto; }
.step-largas-g { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin: 10px 0 2px; }
.step-largas-n { font-size: 13px; color: var(--ink-mute); margin-bottom: 6px; }
.step-largas-f { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--line-soft);
  font-size: 14px; background: var(--paper-soft); }
.step-largas-nom { font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.step-largas-med { font-variant-numeric: tabular-nums; color: #B3261E; font-weight: 600; text-align: right; }

/* v465.316 — Ventana de la JÁCENA más estrecha y con iconos en sus variantes (Juan, 02/10). */
#modal-obs-variant.obs-jac .modal-box { max-width: 470px; width: 470px; }
#modal-obs-variant .obs-var-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 40px; border-radius: 8px; background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); }
#modal-obs-variant .obs-var-ico svg { display: block; }

/* ══ v465.331 — ARMARIO CONGELADO PARA FABRICAR ══════════════════════════════════════
   Lo que edita el armario no responde; mirar, girar, abrir puertas, notas y cotas, sí. */
body.armario-congelado #ed-left > *,
body.armario-congelado #ed-right > *,
body.armario-congelado #ed-right,
body.armario-congelado #ed-elem-bar,
body.armario-congelado #panel-frente,
body.armario-congelado #btn-ed-undo,
body.armario-congelado #maestro-list,
body.armario-congelado #btn-maestro-apply,
body.armario-congelado #btn-maestro-revert,
body.armario-congelado #btn-maestro-next-pending {
  opacity: 0.42;
  pointer-events: none;
  filter: grayscale(35%);
}
body.armario-congelado #ed-left::before {
  content: attr(data-congelado);
  display: block; margin: 8px 10px 4px; padding: 7px 10px;
  border-radius: 8px; background: #3A3326; color: #F3E7C9;
  font-size: 12px; font-weight: 600;
}
.maestro-congelar:empty { display: none; }
.maestro-cong-t { font-weight: 700; }
.cong-step-ov { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; }
.cong-step-box { background: var(--bg, #fff); color: var(--ink, #222); border-radius: 14px; padding: 18px 20px;
  width: 400px; max-width: 92vw; box-shadow: 0 14px 44px rgba(0,0,0,.4); }
.cong-step-t { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.cong-step-chk { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.cong-step-chk input { width: 20px; height: 20px; }
.cong-step-d { font-size: 12px; opacity: .75; margin: 8px 0 14px 28px; line-height: 1.4; }
.cong-step-btns { display: flex; justify-content: flex-end; gap: 10px; }

/* ── v465.333: «ARRÁSTRALO AL ARMARIO», que se vea sin leer (Juan: «la gente no lee apenas») ── */
.led-arrastre {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: #FFF4D2; border: 2px dashed #C9A24A; color: #6B5320;
}
.led-arrastre .led-chip { flex: 0 0 auto; height: 36px; min-width: 70px; font-size: 13px; gap: 6px;
  background: #FFE27A; border-color: #B89968; animation: ledChipLlama 2.4s ease-in-out infinite; }
.led-arrastre.ya-usado .led-chip { animation: none; }
.led-chip-asa { width: 8px; height: 14px; opacity: .55;
  background: radial-gradient(circle, #1c1c1c 1.3px, transparent 1.6px) 0 0 / 4px 4.6px; }
.led-arr-flecha { flex: 0 0 auto; display: inline-flex; color: #B07A12; animation: ledFlechaVa 1.2s ease-in-out infinite; }
.led-arr-txt { font-size: 13px; line-height: 1.25; }
.led-arr-txt b { font-weight: 800; }
/* Si el panel va a la DERECHA del armario, la flecha apunta a la izquierda. */
.lighting-popup:not(.dock-left) .led-arr-flecha svg { transform: scaleX(-1); }
.lighting-popup:not(.dock-left) .led-arr-flecha { animation-name: ledFlechaViene; }
@keyframes ledFlechaVa { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@keyframes ledFlechaViene { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
@keyframes ledChipLlama { 0%, 70%, 100% { transform: translateX(0) scale(1); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
  80% { transform: translateX(5px) scale(1.06); box-shadow: 0 0 0 5px rgba(255,210,63,.35), 0 2px 8px rgba(0,0,0,.2); }
  90% { transform: translateX(-2px) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .led-arr-flecha, .led-arrastre .led-chip { animation: none; } }

/* ── v465.357 — PAREDES / COSTADOS VISTOS (Juan, 04/10) ─────────────────────────
   El botón del entorno sale del lienzo y pasa a una ficha GRANDE al final de Frentes
   (dos fichas de ancho y fila y media de alto, opción A). El elemento del lienzo se
   queda escondido porque `initEntornoPopup` lo usa de ancla. */
#ed-entorno-btn { display: none !important; }
/* Las PUERTAS DE PASO se esconden de momento (Juan); el código y lo guardado siguen. */
.ent-pta-row, .ent-pta-row2 { display: none !important; }
.ep-entorno-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: calc(var(--ep-chip-w) * 2 + var(--ep-chip-gap));
  min-height: 118px; margin-top: 10px; padding: 10px 8px;
  background: var(--bg-soft); border: 1.5px solid var(--gold); border-radius: var(--radius-sm);
  color: var(--ink-mute); cursor: pointer; font-family: var(--sans);
  transition: background 0.15s, color 0.15s;
}
.ep-entorno-tile svg { width: 92px; height: auto; display: block; }
.ep-entorno-tile b { font-size: 14px; font-weight: 700; color: var(--ink); }
.ep-entorno-tile small { font-size: 10.5px; color: var(--ink-mute); }
.ep-entorno-tile:hover { background: var(--bg); color: var(--ink); }
.ep-entorno-tile.active { background: rgba(184,153,104,0.16); }

.ent-tabs { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 6px 0 8px; }
.ent-tab {
  flex: 1; padding: 9px 4px; border: 0; background: transparent; cursor: pointer;
  font: 700 12.5px var(--sans); color: var(--ink);
}
.ent-tab.on { background: var(--gold, #b89968); color: #fff; }
.ent-pane { display: flex; flex-direction: column; gap: 6px; }
.ent-pane.hidden { display: none; }
.ent-cv-link {
  display: none; margin-top: 4px; padding: 6px 8px; border-radius: 8px; border: 1px dashed var(--gold, #b89968);
  background: transparent; text-align: left; font: 600 11.5px var(--sans); color: var(--gold-deep, #8a5a1e); cursor: pointer;
}
.ent-cv-link.on { display: block; }

.entcv-lbl { font: 700 10.5px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin: 10px 0 5px; }
.entcv-lbl i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
.entcv-sides { display: flex; flex-wrap: wrap; gap: 6px; }
.entcv-nota { font-size: 11px; color: var(--ink-mute); line-height: 1.35; }
.entcv-card { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 8px 10px 10px; margin-top: 8px; }
.entcv-card-t { font: 700 13px var(--sans); color: var(--ink); }
.entcv-var { display: flex; gap: 6px; }
.entcv-vc {
  flex: 1; min-width: 0; text-align: left; border: 1.5px solid var(--line); border-radius: 9px; padding: 5px 6px 7px;
  background: #fff; cursor: pointer; font-family: var(--sans); color: var(--ink);
}
.entcv-vc.on { border-color: var(--gold, #b89968); box-shadow: 0 0 0 2px rgba(184,153,104,.35); }
.entcv-vc svg { width: 100%; height: auto; display: block; }
.entcv-vc b { display: block; font-size: 12px; margin-top: 2px; }
.entcv-vc span { display: block; font-size: 10.5px; color: var(--ink-mute); line-height: 1.3; margin-top: 2px; }
.entcv-gr { display: flex; align-items: center; gap: 6px; }
/* La ficha en el panel oscuro del editor, como las otras fichas (y en el tema claro). */
#screen-editor .ep-entorno-tile { background: rgba(184,153,104,0.08); border-color: var(--gold); color: rgba(220,210,190,0.8); }
#screen-editor .ep-entorno-tile b { color: var(--gold); }
#screen-editor .ep-entorno-tile small { color: rgba(220,210,190,0.6); }
#screen-editor .ep-entorno-tile:hover, #screen-editor .ep-entorno-tile.active { background: rgba(184,153,104,0.18); color: var(--gold); }
body.tema-claro #screen-editor .ep-entorno-tile { background: var(--cl-panel); border-color: var(--cl-acc); color: var(--cl-ink-2); }
body.tema-claro #screen-editor .ep-entorno-tile b { color: var(--cl-acc); }
body.tema-claro #screen-editor .ep-entorno-tile small { color: var(--cl-mute); }
/* Colores de paredes y techo: el rótulo encima y las muestras en su línea (el
   `flex: 0 0 54px` del rótulo, en columna, se volvía 54 px de ALTO). */
.ent-pane .ent-col-row { flex-direction: column; align-items: flex-start; gap: 4px; }
.ent-pane .ent-col-row .ent-row-label { flex: none; }

/* ── v465.359 — EDITAR PUERTAS POR SECCIONES (Juan, 04/10) ──────────────────────
   Arriba, fijo, «Eliminar el frente» (sin su título «Quitar»); debajo la lista de
   grupos o, dentro de uno, «‹ Volver» + sus secciones. La banda del tipo deja de ir
   pegada arriba: ahora lo pegado es el eliminar. */
#panel-frente .fp-quitar-top {
  position: sticky; top: -8px; z-index: 2; margin: 0 0 8px; padding: 6px 0;
  background: var(--bg);
}
#panel-frente .fp-quitar-top > .fp-sec-h { display: none; }
#panel-frente .fp-quitar-top .fp-sec-body { padding-top: 0; }
#panel-frente .fp-quitar-top .fp-chip-danger { width: 100%; padding: 9px 12px; font-weight: 700; }
#panel-frente .fp-tipo { position: relative; top: 0; }
.fp-grupos { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.fp-grupo-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px;
  background: var(--paper, #fff); border: 1px solid var(--line-strong, #e3d8c3);
  font-family: var(--sans); color: var(--ink);
}
.fp-grupo-row:hover { border-color: var(--gold); }
.fp-grupo-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-grupo-tx b { font-size: 14px; font-weight: 700; }
.fp-grupo-tx small { font-size: 11.5px; line-height: 1.35; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fp-grupo-ar { font-size: 22px; line-height: 1; color: var(--gold); flex: none; }
.fp-grupo-cab { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
.fp-grupo-volver {
  border: 1px solid var(--line-strong, #e3d8c3); background: var(--paper, #fff); border-radius: 8px;
  padding: 6px 10px; font: 700 12.5px var(--sans); color: var(--gold-deep, #8a5a1e); cursor: pointer;
}
.fp-grupo-h { font-family: var(--serif); font-size: 17px; color: var(--ink); }
/* La altura de la bisagra que se está tocando, en rojo (como la del 3D). */
#panel-frente input.fp-bis-roja { border: 2px solid #d62a1e !important; color: #b0241a; font-weight: 700; }
/* v465.382: «Color y maderas» (y su botón «Ir a los colores» con el latido) retirado — Juan. */
/* v465.360 — «Puertas iguales»: dibujo con las medidas de ahora + qué hace cada opción. */
.fp-iguales { margin: 4px 0 8px; padding: 8px; border: 1px solid var(--line-strong, #e3d8c3); border-radius: 10px; background: var(--paper, #fff); }
.fp-iguales-t { font: 700 11px var(--sans); color: var(--ink-soft); margin-bottom: 2px; }
.fp-iguales-n { font: 600 12px var(--sans); color: var(--ink); margin-top: 2px; }
.fp-iguales-x { font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); margin-top: 6px; }
.fp-iguales-x b { color: var(--ink); }
.fp-una-aviso { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: #fdf1ef; border: 1px solid #e6b3ad; color: #9a2b1f; font: 600 12px var(--sans); }
/* v465.360 — «Material» abierto SIN el tope de 900 px: con Lisos + Puertas desplegados las
   últimas maderas quedaban cortadas (se veían a medias y no se podían tocar ni arrastrar). */
#ep-material-block.open .ep-collapse-body { max-height: none; }
/* v465.360 — anclados a la izquierda, por DEBAJO de la barra de arriba (Juan). */
.ent-popup.dock-left,
.lighting-popup.dock-left {
  top: var(--ed-top-h, 52px) !important;
  height: calc(100% - var(--ed-top-h, 52px)) !important;
  max-height: calc(100% - var(--ed-top-h, 52px)) !important;
  border-radius: 0 0 14px 0 !important;
}

/* v465.374 — LAS FICHAS DEL PANEL DERECHO LLENAN SU ANCHO (Juan, 05/10, captura del iPad: «los iconos en
   pareja algo más anchos para que ocupen el espacio de la barra lateral; el de Paredes y costados vistos
   también»). Dos por fila a partes iguales del panel (antes 92 px fijos y sobraba una franja a la derecha),
   en Interior, Frentes y Estructura (también las de Complementos). Los botones de ancho completo
   (Vaciar interior, Ocultar molduras, Paredes / Costados vistos) van al ancho entero. */
.ep-group .ep-palette > .ep-chip,
.ep-group .ep-chip-subpanel > .ep-chip { width: calc((100% - var(--ep-chip-gap)) / 2); box-sizing: border-box; }
.ep-group .ep-chip svg { width: 64px; }
.ep-group .ep-vaciar, .ep-group .ep-molduras, .ep-group .ep-entorno-tile { width: 100%; box-sizing: border-box; }

/* v465.380 — acabado de la laca (Mate / Brillo) arriba del grupo «Lacado» de Material. */
.mm-laca-btn {
  flex: 1 1 0; padding: 6px 10px; border-radius: 999px; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: .02em;
  background: transparent; color: #C9A86A; border: 1px solid rgba(184,153,104,0.55);
}
.mm-laca-btn.on { background: #B89968; color: #1A1611; border-color: #B89968; }


/* ══ v465.403 — MODAL DE FORRADOS CON DIBUJO (pilar y viga; Juan, boceto mock3) ══════════════════════════════════
   Iconos grandes del tipo, dibujo con los números sobre sus cotas y filas MEDIDAS / HOLGURA FORRO / HOLGURA ARMARIO.
   Lo de antes (casillas de ancho/fondo/distancia/posición) sigue en el DOM — es lo que lee el «Añadir» — pero no se ve. */
#modal-obs-variant.obs-fz-on .modal-box { max-width: 760px; width: 760px; max-height: 92vh; }
#modal-obs-variant.obs-fz-on .modal-body > .form-row,
#modal-obs-variant.obs-fz-on #obs-var-dist-row,
#modal-obs-variant.obs-fz-on #obs-var-central-pos { display: none !important; }
#modal-obs-variant .fz-tipos { display: grid; gap: 8px; }
#modal-obs-variant .fz-tipos.fz-n5 { grid-template-columns: repeat(5, 1fr); }
#modal-obs-variant .fz-tipos.fz-n2 { grid-template-columns: repeat(2, 1fr); }
#modal-obs-variant .fz-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 !important;
  padding: 8px 4px !important; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink); text-align: center; }
#modal-obs-variant .fz-tile svg { width: 100%; height: 78px; display: block; }
#modal-obs-variant .fz-tipos.fz-n2 .fz-tile svg { height: 96px; }
#modal-obs-variant .fz-tile.active { border-color: #b5813a; background: #F6E7CF; box-shadow: 0 0 0 2px rgba(181,129,58,.25); }
.obs-fz { margin: 4px 0 12px; }
.obs-fz .fz-dib { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.obs-fz .fz-dib svg { display: block; width: 100%; height: auto; max-height: 46vh; }
.obs-fz .fz-dib .fz-k { cursor: pointer; }
.obs-fz .fz-vacio { padding: 40px 10px; text-align: center; color: var(--ink-mute); }
.obs-fz .fz-filas { margin-top: 10px; display: grid; gap: 8px; }
.obs-fz .fz-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.obs-fz .fz-n { width: 132px; font: 700 11px sans-serif; letter-spacing: .08em; color: var(--ink-mute); text-transform: uppercase; }
.obs-fz .fz-c { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; background: #fff;
  border: 2px solid; font-size: 14px; cursor: pointer; color: var(--ink); }
.obs-fz .fz-c b { font-size: 15px; }
.obs-fz .fz-c.med { border-color: #b5813a; } .obs-fz .fz-c.hf { border-color: #C0572B; } .obs-fz .fz-c.hp { border-color: #2F6FB5; }
.obs-fz .fz-c.info { border-color: var(--line); color: var(--ink-mute); cursor: default; background: #F1ECE3; }
.obs-fz .fz-c.ref { border: 1px dashed var(--line); color: var(--ink-mute); font-size: 13px; }
.obs-fz .fz-c.sel { box-shadow: 0 0 0 3px rgba(181,129,58,.35); }
.obs-fz .fz-res { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: #EEF4EA; border: 1px solid #CFE0C6; font-size: 13px; line-height: 1.45; }
.obs-fz .fz-res.w { background: #FBEBDD; border-color: #EBC9A8; }
.fz-ed { position: fixed; z-index: 10050; display: flex; align-items: center; background: #fff; border: 2px solid #b5813a;
  border-radius: 12px; padding: 6px 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.fz-ed.hidden { display: none; }
.fz-ed input { width: 90px; font: 600 18px sans-serif; border: none; outline: none; text-align: right; background: transparent; }
.fz-ed span { color: var(--ink-mute); margin-left: 4px; }
@media (max-width: 800px) {
  #modal-obs-variant.obs-fz-on .modal-box { width: 100%; }
  #modal-obs-variant .fz-tipos.fz-n5 { grid-template-columns: repeat(3, 1fr); }
  .obs-fz .fz-n { width: 100%; }
}
.obs-fz .fz-c.gr { border-color: #6E5B3E; }
/* v465.410 — opciones (remate del pilar / moldura superior hasta el techo) */
.obs-fz .fz-c.opt { border-color: #9C8A6E; cursor: pointer; }
.obs-fz .fz-c.opt.on { background: #B98C5A; border-color: #7A5A34; color: #fff; font-weight: 600; }
/* La jácena con sus iconos de siempre (v465.316/317), en grande dentro de su ficha. */
#modal-obs-variant .fz-tile .fz-ico { width: 100%; height: 78px; border: none; background: none; border-radius: 0; }
#modal-obs-variant .fz-tile .fz-ico svg { width: 100%; height: 66px; }

/* v465.412 — Taladros del suelo (patas), desde MAESTRO. */
:is(#modal-suelo-tal, #modal-clock-mano) .st-box { width: min(960px, 96vw); max-height: 92vh; border-radius: 16px; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-body { overflow-y: auto; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-dib { background: #fff; border: 1px solid var(--line); border-radius: 14px; touch-action: none; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-dib svg { display: block; width: 100%; height: auto; max-height: 52vh; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-suelo { fill: #F4EFE6; stroke: #8A7F70; stroke-width: 1.2; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-pilar { fill: #D9D4CC; stroke: #8A7F70; stroke-width: 1; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-tabla { fill: none; stroke: #5B5348; stroke-width: 1.2; stroke-dasharray: 6 4; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-sup { fill: rgba(47,111,181,.08); stroke: #2F6FB5; stroke-width: 1.2; stroke-dasharray: 5 4; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-c { stroke: #6B6358; stroke-width: 1; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-t { font: 600 12px sans-serif; fill: #3A342C; text-anchor: middle; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-tc { font-size: 12px; fill: #6B4A1E; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-tm { font-size: 11px; fill: #8A7F70; letter-spacing: .08em; text-transform: uppercase; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-tp { fill: #6B6358; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-tn { font-size: 11px; fill: #5B5348; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-h { cursor: grab; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-toque { fill: transparent; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-tal { fill: #fff; stroke: #1F1B16; stroke-width: 2.4; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-h.st-on .st-tal { fill: #b5813a; stroke: #6B4A1E; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-h.st-mal .st-tal { stroke: #C0392B; fill: #FBEBDD; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-sel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 8px 12px;
  border: 2px solid #b5813a; border-radius: 12px; font-size: 14px; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-sel.hidden { display: none; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-sel input, :is(#modal-suelo-tal, #modal-clock-mano) .st-r input { width: 70px; font: 600 15px sans-serif; text-align: right; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: 8px; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-aviso { color: #C0392B; font-size: 12px; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-reglas { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-r { display: flex; align-items: center; gap: 6px; font-size: 13px; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-r em { font-size: 11px; color: var(--ink-mute); font-style: normal; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-r input:disabled, :is(#modal-suelo-tal, #modal-clock-mano) .st-chip:disabled { opacity: .45; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-divs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-div > span { width: 92px; font-weight: 600; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-chip { padding: 5px 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-size: 13px; cursor: pointer; color: var(--ink); }
:is(#modal-suelo-tal, #modal-clock-mano) .st-chip.on { border-color: #b5813a; box-shadow: 0 0 0 3px rgba(181,129,58,.25); }
:is(#modal-suelo-tal, #modal-clock-mano) .st-nota { margin: 10px 0 0; font-size: 12px; color: var(--ink-mute); line-height: 1.45; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-vacio { padding: 30px 10px; text-align: center; color: var(--ink-mute); }
:is(#modal-suelo-tal, #modal-clock-mano) .st-te { text-anchor: end; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-fila { stroke: #b5813a; stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-h.st-fijo { cursor: grab; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-h.st-movido .st-tal { stroke: #b5813a; stroke-width: 3; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-h.st-fijo .st-tal { fill: #1F1B16; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-pal { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-ficha { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 2px solid #b5813a;
  background: #fff; font: 600 14px sans-serif; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-ficha i { width: 14px; height: 14px; border-radius: 50%; border: 2.4px solid #1F1B16; background: #fff; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-ficha.off { opacity: .45; pointer-events: none; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-pal-t { font-size: 12px; color: var(--ink-mute); flex: 1; min-width: 200px; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-filas { display: inline-flex; gap: 6px; }
.st-fant { position: fixed; z-index: 10060; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #b5813a;
  background: rgba(255,255,255,.8); pointer-events: none; }
.st-fant.dentro { border-color: #1F1B16; }
:is(#modal-suelo-tal, #modal-clock-mano) .st-pil { color: #6B4A1E; font-size: 12px; }
/* v465.442: clock a mano en divisiones (misma ventana que los taladros del suelo) */
#modal-clock-mano .cm-piezas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#modal-clock-mano .cm-serie { fill: #E6E2DB; stroke: #8A7F70; stroke-width: 1.6; }
#modal-clock-mano .st-h .st-tn { font-weight: 700; pointer-events: none; }
/* v465.443: la cara tumbada (abajo a la izquierda, el frente al sur), la otra cara a trazos y la ficha del 3D */
#modal-clock-mano .cm-caras { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
#modal-clock-mano .cm-ley { font-size: 11px; color: var(--ink-mute); }
#modal-clock-mano .cm-otra .st-tal, #modal-clock-mano circle.cm-otra { stroke-dasharray: 3 3; fill-opacity: .35; }
#modal-clock-mano .cm-nada { fill: #C0392B; }
.cm-chip-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cm-chip3d { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 2px solid #b5813a;
  background: #fff; font-weight: 600; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.cm-chip3d i { width: 14px; height: 14px; border-radius: 50%; border: 2.4px solid #1F1B16; background: #fff; }
.cm-chip-txt { font-size: 12px; color: var(--ink-mute); }
.cm-chip-ghost { position: fixed; z-index: 10070; pointer-events: none; transform: translate(-50%, -130%); padding: 6px 12px; border-radius: 12px;
  background: #fff; border: 2px solid #b5813a; font: 600 13px sans-serif; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.cm-chip-ghost.sobre { background: #FFD23F; border-color: #1F1B16; }

/* v465.417 — Nesting Felder. */
#modal-felder .fn-box { width: min(1000px, 96vw); max-height: 92vh; border-radius: 16px; }
#modal-felder .fn-body { overflow-y: auto; }
#modal-felder .fn-ajustes { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
#modal-felder .fn-r { display: flex; align-items: center; gap: 6px; font-size: 13px; }
#modal-felder .fn-r input { width: 64px; font: 600 14px sans-serif; text-align: right; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; }
#modal-felder .fn-gr { color: var(--ink-mute); }
#modal-felder .fn-res { margin: 10px 0 6px; font-size: 14px; }
#modal-felder .fn-avisos { font-size: 12px; color: #8a4b12; background: #FBEBDD; border: 1px solid #EBC9A8; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.5; }
#modal-felder .fn-tableros { display: flex; flex-direction: column; gap: 12px; }
/* v465.491 — tamaño de los tableros (columnas) y volteos en rejilla */
#modal-felder .fn-zoom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; font-size: 13px; color: #6b6255; }
#modal-felder .fn-tableros.fn-cols-2, #modal-felder .fn-tableros.fn-cols-3 { display: grid; gap: 10px; }
#modal-felder .fn-tableros.fn-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modal-felder .fn-tableros.fn-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#modal-felder .fn-tableros.fn-cols-2 .fn-th, #modal-felder .fn-tableros.fn-cols-3 .fn-th { font-size: 12px; flex-wrap: wrap; }
#modal-felder .fn-tableros.fn-vols { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
/* v465.515: la cara delantera de las puertas con uñero, una por una */
#modal-felder .fn-upu { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
#modal-felder .fn-upu-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid #e3ddd2; border-radius: 8px; background: #fbf9f5; font-size: 13px; }
#modal-felder .fn-upu-f .btn-secondary { padding: 4px 10px; min-height: 0; }
#modal-felder .fn-upu-err { color: #b3261e; }
#modal-felder .fn-vols .fn-th { font-size: 12px; flex-wrap: wrap; }
#modal-felder .fn-tableros.fn-cols-2 .fn-th .btn-secondary, #modal-felder .fn-tableros.fn-cols-3 .fn-th .btn-secondary, #modal-felder .fn-vols .fn-th .btn-secondary { padding: 3px 9px; min-height: 0; height: auto; font-size: 12px; border-radius: 8px; }
#modal-felder .fn-tableros.fn-cols-3 .fn-tiempo { font-size: 11px; }
#modal-felder .fn-tablero { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
#modal-felder .fn-th { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; }
#modal-felder .fn-uno { margin-left: auto; padding: 4px 10px; font-size: 12px; }
#modal-felder svg { display: block; width: 100%; height: auto; }
#modal-felder .fn-tab { fill: #EFE7D8; stroke: #8A7F70; stroke-width: 1; }
#modal-felder .fn-util { fill: none; stroke: #b0a493; stroke-width: .8; stroke-dasharray: 4 3; }
#modal-felder .fn-pieza { fill: #FFF6A8; stroke: #5B5348; stroke-width: 1.2; }
#modal-felder .fn-pieza.fn-2p { stroke: #C0572B; stroke-width: 2; }
#modal-felder .fn-ran { stroke: #2F6FB5; stroke-width: 2.5; }
#modal-felder .fn-led { stroke: #E0A100; stroke-width: 2.5; }   /* v465.428: ranura del LED (fresa 1602) */
#modal-felder .fn-hueco { fill: #EFE7D8; stroke: #5B5348; stroke-width: 1.2; }   /* v465.467: agujero de un cajeado */
#modal-felder .fn-cajera { fill: #E8D06A; stroke: #5B5348; stroke-width: 1; stroke-dasharray: 3 2; }   /* v465.467: cajera (1600) */
#modal-felder .fn-tal { fill: #fff; stroke: #1F1B16; stroke-width: 1; }
#modal-felder .fn-tal.fn-punta { fill: #1F1B16; }
#modal-felder .fn-t { font-family: sans-serif; font-weight: 700; fill: #3A342C; text-anchor: middle; }
#modal-felder .fn-tm { font-weight: 500; fill: #6B6358; }
#modal-felder .fn-nota { margin: 10px 0 0; font-size: 12px; color: var(--ink-mute); }
#modal-felder .fn-aviso { color: #C0392B; }
/* v465.418: arrastrar piezas, volteo */
#modal-felder .fn-g { cursor: grab; }
#modal-felder .fn-g.fn-mueve { cursor: grabbing; }
#modal-felder .fn-g.fn-mueve .fn-pieza { fill: #FFE98A; stroke: #2F6FB5; stroke-width: 2; }
#modal-felder .fn-g.fn-mal .fn-pieza { fill: #F6C9C0; stroke: #C0392B; stroke-width: 2; }
#modal-felder .fn-svg svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#modal-felder .fn-h { margin: 16px 0 4px; font-size: 15px; }
#modal-felder .fn-arriba { font-family: sans-serif; font-weight: 800; fill: #C0572B; }
#modal-felder .fn-auto { margin-left: 8px; padding: 3px 10px; font-size: 12px; }
/* v465.419: pasar a otro tablero */
#modal-felder .fn-svg { position: relative; }
#modal-felder .fn-prev { fill: rgba(47, 111, 181, .18); stroke: #2F6FB5; stroke-width: 2; stroke-dasharray: 6 3; pointer-events: none; }
#modal-felder .fn-prev.fn-prev-mal { fill: rgba(192, 57, 43, .18); stroke: #C0392B; }
#modal-felder .fn-menu { position: absolute; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
#modal-felder .fn-menu-t { width: 100%; font-size: 12px; font-weight: 600; }
#modal-felder .fn-menu button { min-width: 40px; padding: 5px 10px; font-size: 13px; }
#modal-felder .fn-menu .fn-gira { width: 100%; font-weight: 600; }   /* v465.421 */
/* v465.423: tiempo, contorneado y simulación */
#modal-felder .fn-tiempo { margin-left: 8px; color: var(--ink-mute); font-size: 12px; }
/* v465.481: medio tablero (2440 × 610) */
#modal-felder .fn-baja { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #FBF7EF; font-size: 14px; }
#modal-felder .fn-baja input { width: 24px; height: 24px; flex: none; }
#modal-felder .fn-baja code { font-size: 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
/* v465.483 — retales del almacén */
#modal-felder .fn-retlista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin: 6px 0 10px; }
#modal-felder .fn-retrow { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 14px; }
#modal-felder .fn-retrow input { width: 26px; height: 26px; flex: none; }
#modal-felder .fn-retrow small { display: block; color: #7a7266; font-size: 12px; }
#modal-felder .fn-retrow.on { border-color: #2E7D32; background: #F1F8EE; }
#modal-felder .fn-retrow.off { opacity: .6; }
#modal-felder .fn-retsob { margin: 8px 0; }
#modal-felder .fn-retsob .fn-retrow { display: inline-flex; margin: 0 6px 6px 0; }
#modal-felder .fn-retpz { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 2px 2px; }
#modal-felder .fn-retorig { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #EFEAE0; color: #6b6255; margin-left: 4px; }
#modal-felder .fn-retorig-manual { background: #EAF2FB; color: #2c5a8a; }
#modal-felder .fn-retorig-confiwood, #modal-felder .fn-retorig-nesting { background: #F1F8EE; color: #2E7D32; }
#modal-felder .fn-retmq { font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
#modal-felder .fn-mq-felder { background: #FFF1E0; border-color: #E0A060; }
#modal-felder .fn-mq-vitap { background: #EAF2FB; border-color: #8FB3DA; }
#modal-felder .fn-medio { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 11.5px; font-weight: 700; }
#modal-felder .fn-medio.fn-retgr { background: #2e7d32; }   /* v465.509: el retal grande del nesting */
#modal-felder .fn-retnest { margin-left: 8px; padding: 2px 10px; font-size: 12px; min-height: 0; }   /* v465.513 */
#modal-felder .fn-retnest.on { background: #2e7d32; color: #fff; border-color: #2e7d32; }
#modal-felder .fn-tab-retal { outline: 2px solid #2e7d32; outline-offset: 2px; border-radius: 6px; }
/* v465.489 — lo que sobra: verde = retal nuevo, gris = no llega / no se guarda */
#modal-felder .fn-sobg { pointer-events: none; }
#modal-felder .fn-sob { fill: rgba(46,125,50,.13); stroke: #2E7D32; stroke-width: 1.6; stroke-dasharray: 7 4; }
#modal-felder .fn-sob-off { fill: rgba(120,120,120,.08); stroke: #999; }
#modal-felder .fn-sob-no { fill: rgba(120,120,120,.06); stroke: #b5b0a6; stroke-dasharray: 3 4; }
#modal-felder .fn-sobt { fill: #2E7D32; font-weight: 700; }
#modal-felder .fn-sobt-no { fill: #9a948a; font-weight: 600; }
#modal-felder .fn-sobra { fill: rgba(192,57,43,.07); stroke: none; }
#modal-felder .fn-corte { stroke: #c0392b; stroke-width: 2; stroke-dasharray: 9 5; }
#modal-felder .fn-sobrat { fill: #a8392b; font-weight: 700; }
#modal-felder .fn-antes { opacity: .75; }
#modal-felder .fn-sim { margin-left: auto; padding: 4px 10px; font-size: 12px; }
#modal-felder .fn-sim + .fn-uno { margin-left: 6px; }
#modal-felder .fn-cont { gap: 6px; }
#modal-felder .fn-chip, #fn-sim .fn-chip { padding: 4px 10px; font: 600 12px sans-serif; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
#modal-felder .fn-chip.on, #fn-sim .fn-chip.on { background: #2F6FB5; border-color: #2F6FB5; color: #fff; }
#fn-sim { position: fixed; inset: 0; z-index: 10050; background: rgba(20, 18, 15, .55); display: flex; align-items: center; justify-content: center; }
#fn-sim .fs-box { width: min(1180px, 96vw); height: min(820px, 92vh); background: var(--bg, #faf6ef); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
#fn-sim .fs-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--line); }
#fn-sim .fs-met { color: var(--ink-mute); font-size: 12px; }
#fn-sim .fs-head .modal-close { margin-left: auto; }
#fn-sim .fs-lienzo { position: relative; flex: 1; min-height: 0; }
#fn-sim .fs-lienzo canvas { width: 100%; height: 100%; display: block; touch-action: none; }
#fn-sim .fs-info { position: absolute; left: 12px; top: 10px; font: 600 12px sans-serif; color: #3A342C; background: rgba(255,255,255,.8); padding: 4px 8px; border-radius: 8px; }
#fn-sim .fs-ctl { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
#fn-sim .fs-play { min-width: 52px; }
#fn-sim .fs-barra { flex: 1; }
#fn-sim .fs-reloj { font: 600 13px monospace; min-width: 110px; text-align: right; }
.fn-fantasma { position: fixed; z-index: 100000; pointer-events: none; box-sizing: border-box; background: rgba(255, 233, 138, .85); border: 2px solid #2F6FB5; border-radius: 2px; display: flex; align-items: center; justify-content: center; font: 700 11px sans-serif; color: #3A342C; overflow: hidden; }
.fn-fantasma.fn-fantasma-oculto { opacity: 0; }
/* v465.430 — nesting con varios armarios */
#modal-felder .fn-arm { margin: 12px 0 4px; }
#modal-felder .fn-armfila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#modal-felder .fn-armt { font-weight: 600; margin-right: 4px; }
#modal-felder .fn-armchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; }
#modal-felder .fn-armchip b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; background: var(--c); border: 1px solid #8a8070; font-size: 13px; }
#modal-felder .fn-armchip small { color: #7a7266; font-size: 11px; }
#modal-felder .fn-armx { border: 0; background: none; font-size: 14px; cursor: pointer; color: #8a3b2b; padding: 2px 4px; }
#modal-felder .fn-armpanel { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
#modal-felder .fn-armbusca { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
#modal-felder .fn-armlista { max-height: 260px; overflow: auto; margin-top: 6px; }
#modal-felder .fn-armgr { font: 600 11px sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #7a7266; margin: 8px 0 4px; }
#modal-felder .fn-armrow { display: flex; gap: 8px; align-items: center; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
#modal-felder .fn-armrow input { width: 18px; height: 18px; }
#modal-felder .fn-armrow small { color: #7a7266; }
#modal-felder .fn-armrow.fn-armno { opacity: .55; cursor: default; }
/* v465.460: los del mismo domicilio, con casilla GRANDE (para el dedo en el iPad) */
#modal-felder .fn-armmismo { margin-top: 10px; }
#modal-felder .fn-armgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
#modal-felder .fn-armgrande { display: flex; gap: 12px; align-items: center; min-height: 60px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 16px; }
#modal-felder .fn-armgrande input { width: 30px; height: 30px; flex: none; accent-color: #2f6fb3; cursor: pointer; }
#modal-felder .fn-armgrande span { display: flex; flex-direction: column; gap: 2px; }
#modal-felder .fn-armgrande small { color: #7a7266; font-size: 13px; }
#modal-felder .fn-armgrande.on { border-color: #2f6fb3; background: #EEF4FB; }
#modal-felder .fn-armgrande.fn-armno { opacity: .55; cursor: default; }
#modal-felder .fn-armgrande .fn-matmu { width: 26px; height: 26px; flex: none; }
#modal-felder .fn-armvacio { color: #7a7266; font-size: 12px; padding: 4px; }
/* v465.431 — nesting hecho */
.card-nest-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 9px; width: fit-content;
  background: rgba(46,125,50,0.12); border: 1px solid rgba(46,125,50,0.40); color: #2e7d32; border-radius: var(--radius-pill); font: 700 11px var(--sans); letter-spacing: 0.02em; }
@media (pointer: coarse) { .card-nest-badge { padding: 5px 11px; font-size: 12.5px; } }
.ed-project-switcher-item .pn-nest { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #2e7d32;
  background: rgba(46,125,50,0.12); border: 1px solid rgba(46,125,50,0.35); padding: 1px 6px; border-radius: 999px; flex-shrink: 0; }
#modal-felder .fn-hecho { margin: 12px 0 0; padding: 10px 12px; border: 1px solid rgba(46,125,50,0.45); background: rgba(46,125,50,0.10); color: #24572a; border-radius: 10px; font-size: 13px; }
#modal-felder .fn-hecho .fn-desmarca { margin-left: 8px; padding: 4px 10px; font-size: 12px; }
/* v465.492: nesting hecho = bloqueado, aviso grande abajo */
#modal-felder .fn-bloqueo { margin: 16px 0 8px; padding: 16px 18px; border: 2px solid #2e7d32; background: #e8f3e9; color: #1d4a21; border-radius: 14px; }
#modal-felder .fn-bl-t { font-size: 22px; font-weight: 800; letter-spacing: .2px; }
#modal-felder .fn-bl-d { font-size: 15px; margin-top: 6px; }
#modal-felder .fn-bl-alm { font-size: 16px; margin-top: 8px; }
#modal-felder .fn-bl-alm code { font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
#modal-felder .fn-bl-dev, #modal-felder .fn-bl-sin { color: #6b5a2a; }
#modal-felder .fn-bl-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(46,125,50,0.3); font-size: 13px; }
#modal-felder .fn-bl-btn { font-size: 15px; padding: 10px 18px; border-color: #b23b2a; color: #b23b2a; font-weight: 700; }
#modal-felder .fn-matmu { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); flex-shrink: 0; }
/* v465.432 — número del armario */
.card-num-badge { display: inline-flex; align-items: center; margin-top: 6px; margin-right: 6px; padding: 3px 10px; width: fit-content;
  background: #2b2620; color: #fff; border-radius: var(--radius-pill); font: 800 13px var(--sans); letter-spacing: .02em; }
@media (pointer: coarse) { .card-num-badge { padding: 5px 12px; font-size: 15px; } }
.ed-project-switcher-item .pn-num { font-size: 10px; font-weight: 800; color: #fff; background: #2b2620; padding: 1px 7px; border-radius: 999px; flex-shrink: 0; }
.ed-num-badge { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: #2b2620; color: #fff; font-weight: 800; font-size: 13px; }
.ed-num-badge.hidden { display: none; }
#modal-felder .fn-numlinea { margin: 12px 0 0; font-size: 13px; color: #5b5348; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#modal-felder .fn-numgrande { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #2b2620; color: #fff; font: 800 16px var(--sans); }
#modal-felder .fn-numgrande.fn-sinnum { background: transparent; color: #8a8070; border: 1px dashed #8a8070; font-size: 14px; }
#modal-felder .fn-armchip.fn-sinnum b { font-style: italic; }


/* v465.451 — clocks de la viga y del pilar delantero en MAESTRO: casillas con recuadro (Juan: «no veo dónde se cambia»). */
.maestro-clk { margin: 6px 0 10px; padding: 8px; border: 1px solid rgba(26,22,17,0.14); border-radius: 8px; background: rgba(255,255,255,0.55); }
.maestro-clk > label { display: block; font-size: 11px; font-weight: 600; opacity: 0.9; margin-bottom: 4px; }
.maestro-clk-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.maestro-clk-campo { min-width: 0; }
.maestro-clk-campo label em { font-style: normal; color: #8a7a5c; }
.maestro-row-grid .maestro-clk select,
.maestro-row-grid .maestro-clk input.maestro-clk-in {
  border: 1px solid #b9a37a; background: #fff; border-radius: 6px; padding: 6px 8px; font-size: 13px; color: var(--ink);
}
.maestro-row-grid .maestro-clk input.maestro-clk-in:focus,
.maestro-row-grid .maestro-clk select:focus { outline: none; border-color: #d62a1e; box-shadow: 0 0 0 2px rgba(214,42,30,0.18); }
.maestro-clk-nota { font-size: 10px; color: #8a7a5c; margin-top: 4px; }

/* v465.453 → v465.454 — «Clocks · pieza»: panel PEQUEÑO a la izquierda, sin velo (Juan: «el modal más pequeño para ver
   detrás el interior»); la barra izquierda se cierra mientras está abierto y el 3D sigue libre para tocar otra pieza. */
#modal-clk-pieza.cp-panel {
  position: fixed; left: 10px; top: calc(var(--ed-top-h, 64px) + 8px); max-height: calc(100vh - var(--ed-top-h, 64px) - 18px); width: min(380px, calc(100vw - 20px));
  z-index: 10050; display: flex; flex-direction: column; background: #FBF8F2; color: var(--ink);
  border: 1px solid rgba(26,22,17,0.14); border-radius: 14px; box-shadow: 0 10px 30px rgba(20,16,10,0.22);
}
#modal-clk-pieza.cp-panel.hidden { display: none; }
#modal-clk-pieza .cp-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 8px 14px; border-bottom: 1px solid rgba(26,22,17,0.1); }
#modal-clk-pieza .cp-cab h3 { margin: 0; font-size: 17px; font-weight: 500; }
#modal-clk-pieza .cp-x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(26,22,17,0.15); background: #fff; display: grid; place-items: center; cursor: pointer; }
#modal-clk-pieza .cp-x line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#modal-clk-pieza .cp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 14px; -webkit-overflow-scrolling: touch; }
#modal-clk-pieza .cp-dib { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
#modal-clk-pieza .cp-dib svg { display: block; width: 100%; height: auto; }
#modal-clk-pieza .st-suelo { fill: #F4EFE6; stroke: #8A7F70; stroke-width: 1.2; }
#modal-clk-pieza .cp-corte { fill: #fff; stroke: #8A7F70; stroke-width: 1; stroke-dasharray: 4 3; }
#modal-clk-pieza .st-pilar { fill: #D9D4CC; stroke: #8A7F70; stroke-width: 1; }
#modal-clk-pieza .st-c { stroke: #b3471d; stroke-width: 1; }
#modal-clk-pieza .st-t { font: 600 11px sans-serif; fill: #3A342C; text-anchor: middle; }
#modal-clk-pieza .st-tm { fill: #8A7F70; font-weight: 500; font-size: 10px; }
#modal-clk-pieza .st-tc { font-size: 11px; fill: #b3471d; }
#modal-clk-pieza .cp-tal { cursor: pointer; }
#modal-clk-pieza .cp-clock { fill: #E8C78C; stroke: #6b4a12; stroke-width: 1.4; }
#modal-clk-pieza .cp-torn { fill: #fff; stroke: #6b4a12; stroke-width: 1.2; }
#modal-clk-pieza .cp-tal.cp-roja { fill: #d62a1e; stroke: #8f1a12; }
#modal-clk-pieza .cp-ayuda { margin: 6px 2px; font-size: 11px; color: var(--ink-mute); line-height: 1.4; }
#modal-clk-pieza .cp-chk { display: flex; gap: 6px; align-items: flex-start; margin: 6px 2px; font-size: 12px; }
#modal-clk-pieza .cp-uniones { display: grid; gap: 6px; margin: 8px 0; }
#modal-clk-pieza .cp-union { padding: 7px 9px; border: 1px solid rgba(26,22,17,0.14); border-radius: 9px; background: rgba(255,255,255,0.7); cursor: pointer; }
#modal-clk-pieza .cp-union.on { border-color: #d62a1e; box-shadow: 0 0 0 2px rgba(214,42,30,0.15); background: #fff; }
#modal-clk-pieza .cp-union-t { font-size: 12px; } #modal-clk-pieza .cp-union-t span { display: block; font-size: 10px; color: #8a7a5c; }
#modal-clk-pieza .cp-n { display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; color: #8a7a5c; }
#modal-clk-pieza .cp-nb, #modal-clk-pieza .cp-serie { padding: 3px 10px; border-radius: 10px; border: 1px solid #b9a37a; background: #fff; font-size: 12px; cursor: pointer; color: var(--ink); }
#modal-clk-pieza .cp-nb.on { background: #3A342C; border-color: #3A342C; color: #fff; }
#modal-clk-pieza .cp-serie { margin-left: auto; }
#modal-clk-pieza .cp-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 5px; }
#modal-clk-pieza .cp-campo { display: block; font-size: 10.5px; } #modal-clk-pieza .cp-campo em { font-style: normal; color: #8a7a5c; }
#modal-clk-pieza .cp-campo input, #modal-clk-pieza .cp-sel { display: block; width: 100%; box-sizing: border-box; margin-top: 2px; border: 1px solid #b9a37a; background: #fff; border-radius: 6px; padding: 5px 7px; font-size: 13px; color: var(--ink); }
#modal-clk-pieza .cp-campo input:focus, #modal-clk-pieza .cp-sel:focus { outline: none; border-color: #d62a1e; box-shadow: 0 0 0 2px rgba(214,42,30,0.18); }
#modal-clk-pieza .cp-campo em.cp-corrido, #modal-clk-pieza em.cp-corrido { color: #b3471d; font-style: normal; }
#modal-clk-pieza .st-vacio { padding: 20px 8px; text-align: center; color: var(--ink-mute); font-size: 12px; }
.maestro-toca b { color: var(--ink); }
/* v465.461 — Uñeros con la fresa Ø50 (como el nesting; la simulación usa #fn-sim) */
#modal-unero .un-box { width: min(900px, 96vw); max-height: 92vh; border-radius: 16px; }
#modal-unero .un-ajustes, #modal-unero .un-suelta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
#modal-unero .un-r { display: flex; align-items: center; gap: 6px; font-size: 13px; }
#modal-unero .un-r input { width: 70px; font: 600 14px sans-serif; text-align: right; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; }
#modal-unero .un-gr { font-size: 12px; color: var(--ink-mute); flex: 1 1 260px; }
#modal-unero .un-h { margin: 14px 0 6px; font-size: 15px; }
#modal-unero .un-fila { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; }
#modal-unero .un-txt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
#modal-unero .un-txt span { color: var(--ink-mute); }
#modal-unero .un-txt .un-maq { display: block; font-size: 12px; }
#modal-unero .un-txt .un-err { display: block; color: #a1281a; font-size: 12px; }
#modal-unero .un-nota { margin: 10px 0 0; font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
#modal-unero .fn-chip, #fn-sim .un-vistas .fn-chip { padding: 4px 10px; font: 600 12px sans-serif; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
#modal-unero .fn-chip.on { background: #2F6FB5; border-color: #2F6FB5; color: #fff; }
#modal-unero .fn-avisos { font-size: 12px; color: #8a4b12; background: #FBEBDD; border: 1px solid #EBC9A8; border-radius: 10px; padding: 8px 12px; margin: 6px 0 10px; line-height: 1.5; }
#fn-sim .un-vistas { flex-wrap: wrap; border-top: 0; padding-top: 0; }
#fn-sim .un-corte { display: flex; align-items: center; gap: 6px; font-size: 12px; }
#fn-sim .un-corte[hidden] { display: none; }
#fn-sim .un-corte input { width: 160px; }

/* v465.462 — Offset de piezas: pestañas de la ventana de la pieza y la vista «Medidas» */
#modal-clk-pieza .of-tabs { display: flex; gap: 6px; margin: 0 0 8px; }
#modal-clk-pieza .of-tabs button { flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 12px sans-serif; color: var(--ink); cursor: pointer; }
#modal-clk-pieza .of-tabs button.on { background: #2F6FB5; border-color: #2F6FB5; color: #fff; }
#modal-clk-pieza .of-trozos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
#modal-clk-pieza .of-trozos .fn-chip { padding: 4px 10px; font: 600 12px sans-serif; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
#modal-clk-pieza .of-trozos .fn-chip.on { background: #2F6FB5; border-color: #2F6FB5; color: #fff; }
#modal-clk-pieza .of-pieza { fill: #E9D9B6; stroke: #7a6646; stroke-width: 1.2; }
#modal-clk-pieza .of-nueva { fill: none; stroke: #c0392b; stroke-width: 1.6; stroke-dasharray: 6 4; }
#modal-clk-pieza .of-t { font: 600 11px sans-serif; fill: #5b5246; text-anchor: middle; }
#modal-clk-pieza .of-med { font-size: 12px; fill: #3a342c; }
#modal-clk-pieza .of-in { display: flex; align-items: center; background: #fff; border: 1px solid #c9bfae; border-radius: 8px; height: 28px; box-sizing: border-box; padding: 0 6px; }
#modal-clk-pieza .of-in input { width: 100%; border: 0; font: 600 13px sans-serif; text-align: center; background: transparent; outline: none; color: #3a342c; }
#modal-clk-pieza .of-in.of-on { border-color: #c0392b; background: #fff4f2; }
#modal-clk-pieza .of-in.of-on input { color: #c0392b; }
#modal-clk-pieza .of-res { font-size: 13px; margin: 6px 0 4px; }
#modal-clk-pieza .of-res b { font-variant-numeric: tabular-nums; }
#modal-clk-pieza .of-res span { color: var(--ink-mute); }
#modal-clk-pieza .of-av { font-size: 12px; color: #8a4b12; background: #FBEBDD; border: 1px solid #EBC9A8; border-radius: 10px; padding: 7px 10px; margin: 6px 0; line-height: 1.45; }
#modal-clk-pieza .of-bot { display: flex; gap: 8px; margin-top: 8px; }
#modal-clk-pieza .of-rec { fill: #fff; stroke: #7a6646; stroke-width: 1; stroke-dasharray: 3 3; }

/* v465.467 — Cajeados y cajeras: pestaña «Cajeados» de la ventana de la pieza */
#modal-clk-pieza .cj-fig { stroke-width: 1.3; }
#modal-clk-pieza .cj-cala { fill: #fff; stroke: #7a6646; }
#modal-clk-pieza .cj-cajera { fill: #CDB892; stroke: #7a6646; stroke-dasharray: 4 3; }
#modal-clk-pieza .cj-nueva { stroke: #c0392b; stroke-width: 2; }
#modal-clk-pieza .cj-mal { stroke: #c0392b; }
#modal-clk-pieza .cj-cota { stroke: #c0392b; stroke-width: 1; stroke-dasharray: 2 2; }
#modal-clk-pieza .cj-tc { fill: #c0392b; font-size: 10.5px; }
#modal-clk-pieza .cj-lista { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
#modal-clk-pieza .cj-fila { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12.5px; cursor: pointer; }
#modal-clk-pieza .cj-fila.on { border-color: #c0392b; background: #fff4f2; }
#modal-clk-pieza .cj-txt { flex: 1; }
#modal-clk-pieza .cj-err { color: #c0392b; font-style: normal; }
#modal-clk-pieza .cj-dot { width: 12px; height: 12px; border-radius: 3px; border: 1.3px solid #7a6646; flex: none; }
#modal-clk-pieza .cj-dot.cj-cajera { border-style: dashed; }
#modal-clk-pieza .cj-x { border: 0; background: none; font-size: 15px; color: #8a4b12; cursor: pointer; padding: 2px 6px; }
#modal-clk-pieza .cj-form { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 8px 0; background: #FBF7EF; }
#modal-clk-pieza .cj-tit { font: 700 12.5px sans-serif; margin-bottom: 6px; }
#modal-clk-pieza .cj-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 6px; }
#modal-clk-pieza .cj-chips > span { font-size: 11px; color: var(--ink-mute); min-width: 62px; }
#modal-clk-pieza .cj-chips .fn-chip { padding: 4px 10px; font: 600 12px sans-serif; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
#modal-clk-pieza .cj-chips .fn-chip.on { background: #2F6FB5; border-color: #2F6FB5; color: #fff; }
#modal-clk-pieza .cj-form > .cp-campo { margin: 0 0 6px; }
/* v465.479 — cajeados: cotas como chips (como la ventana de la viga) */
#modal-clk-pieza .cj-k { cursor: pointer; }
#modal-clk-pieza .cj-k rect { fill: #fff; stroke: #c0392b; stroke-width: 1.6; }
#modal-clk-pieza .cj-k text { font: 700 12px sans-serif; fill: #2b251d; text-anchor: middle; }
#modal-clk-pieza .cj-k.on rect { fill: #FFF3DF; stroke-width: 3; }
#modal-clk-pieza .cj-cint { stroke-dasharray: none; opacity: .55; }
#modal-clk-pieza .cj-nums { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; }
#modal-clk-pieza .cj-n { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1.5px solid #c0392b; border-radius: 12px; background: #fff; font-size: 12px; cursor: pointer; }
#modal-clk-pieza .cj-n b { font-size: 14px; }
#modal-clk-pieza .cj-n.sel { background: #FFF3DF; box-shadow: 0 0 0 3px rgba(192,57,43,.25); }
#modal-clk-pieza .cj-av[hidden] { display: none; }
#cj-ed { z-index: 10060; border-color: #c0392b; }

/* v465.470 — Fresados especiales de puerta (MAESTRO, juan y adrian) */
#modal-fresesp .fe-box { width: min(760px, 96vw); max-height: 92vh; border-radius: 16px; }
#modal-fresesp .fe-modelos, #modal-fresesp .fe-ajustes { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
#modal-fresesp .fe-r { display: flex; align-items: center; gap: 6px; font-size: 13px; }
#modal-fresesp .fe-r input { width: 70px; font: 600 14px sans-serif; text-align: right; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; }
#modal-fresesp .fe-gr { font-size: 12px; color: var(--ink-mute); flex: 1 1 240px; }
#modal-fresesp .fe-nota { margin: 6px 0; font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
#modal-fresesp .fe-svg { width: 100%; height: auto; display: block; margin: 6px 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
#modal-fresesp .fe-det { font-size: 12px; line-height: 1.5; margin: 6px 0 10px; }
#modal-fresesp .fe-det summary { cursor: pointer; font-weight: 600; }
#modal-fresesp .fn-chip { padding: 4px 10px; font: 600 12px sans-serif; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); }
#modal-fresesp .fn-chip.on { background: #2F6FB5; border-color: #2F6FB5; color: #fff; }
#modal-fresesp .fn-avisos { font-size: 12px; color: #8a4b12; background: #FBEBDD; border: 1px solid #EBC9A8; border-radius: 10px; padding: 8px 12px; margin: 6px 0 10px; line-height: 1.5; }
#maestro-fresesp[hidden] { display: none !important; }
#modal-fresesp .fe-def { padding: 5px 12px; font-size: 13px; min-height: 0; }
#modal-fresesp .fe-svg { max-height: none !important; width: 100% !important; }
#modal-fresesp .fe-svg, #modal-fresesp .fe-body > * { flex-shrink: 0; }
#modal-unero .fe-tabs, #modal-fresesp .fe-tabs { display: flex; gap: 6px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
#modal-unero .fe-tab, #modal-fresesp .fe-tab { padding: 8px 14px; font: 600 13px sans-serif; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--ink-mute); cursor: pointer; }
#modal-unero .fe-tab.on, #modal-fresesp .fe-tab.on { color: var(--ink); border-bottom-color: #2F6FB5; }

/* v465.476 — el desplegable PDF con un dibujo por opción (Juan: «pon algún dibujo para identificarlos mejor») */
#ed-sub-pdf .ed-tool-accent { display: flex; align-items: center; gap: 10px; text-align: left; padding-top: 6px; padding-bottom: 6px; }
#ed-sub-pdf .ed-tool-accent[style*="display:none"], #ed-sub-pdf .ed-tool-accent[style*="display: none"] { display: none; }
#ed-sub-pdf .pdf-ico { width: 40px; height: 30px; flex: none; }
#ed-sub-pdf .pdf-txt { display: flex; flex-direction: column; line-height: 1.2; }
#ed-sub-pdf .pdf-txt small { font-size: 10.5px; font-weight: 400; opacity: .72; margin-top: 2px; white-space: normal; }

/* v465.476 — dibujos en la ventana del PDF (Juan: «pon algún dibujo para identificarlos mejor») */
#modal-pdf .pdf-modo { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; padding-bottom: 8px; }
#modal-pdf .pdf-mico { width: 46px; height: 34px; }
#modal-pdf .pdf-bico { width: 34px; height: 26px; vertical-align: middle; margin-right: 8px; }

/* v465.495: nesting de puertas lacadas */
#modal-felder .fn-modo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
#modal-felder .fn-modo .fn-chip { font-size: 15px; padding: 8px 16px; }
#modal-felder .fn-modo-t { font-size: 13px; color: var(--muted, #6b6457); }
#modal-felder .fn-cuadro { fill: none; stroke: #7a4fb3; stroke-width: 1.4; }
#modal-felder .fn-psel { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #FBF7EF; }
#modal-felder .fn-psel-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#modal-felder .fn-psel-t { font-weight: 700; min-width: 70px; }
#modal-felder .fn-psel .fn-chip { font-size: 14px; padding: 7px 14px; }
#modal-felder .fn-psel .fn-chip[disabled] { opacity: .4; cursor: not-allowed; }
#modal-felder .fn-psel-no { font-size: 12px; color: #8a5a2a; }

/* v465.497 — mueble por huecos: bloque en «Tipo de armario» y su ventana */
.conj-tipo { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.conj-tipo.hidden { display: none; }
.conj-t { font-size: 12px; color: #bdb5a4; margin-bottom: 8px; }
.conj-t b { color: #f1ead9; font-weight: 600; }
.conj-bs { display: flex; gap: 6px; flex-wrap: wrap; }
.conj-btn { flex: 1; border: 1px solid #5b5446; background: #2a2620; color: #f1ead9; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 38px; }
.conj-btn:active { background: #3a342b; }
.conj-quita { width: 100%; margin-top: 6px; background: transparent; border-color: #7a3b33; color: #e6a197; }
.conj-nota { font-size: 11.5px; color: #9d9586; margin: 6px 0 0; line-height: 1.35; }
.conj-box { max-width: 520px; }
.conj-lados { display: flex; gap: 8px; }
.conj-lado { flex: 1; min-height: 44px; border: 1.5px solid #c9c3b6; background: #fff; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.conj-lado.on { border-color: #2b2b2b; background: #2b2b2b; color: #fff; }
.conj-fila { display: flex; gap: 10px; }
.conj-fila .form-group { flex: 1; min-width: 0; }
.conj-sub { font-size: 13px; font-weight: 700; margin: 12px 0 6px; color: #3b3830; }
.conj-err { color: #b3261e; min-height: 1em; }
.conj-box #conj-body > .form-hint:first-child { margin-bottom: 14px; }

/* v465.498 — chinchetas de los huecos del mueble (encima de cada uno, a la altura del techo) */
.conj-pins { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.conj-pin { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; display: flex; flex-direction: column; align-items: center;
  gap: 1px; min-width: 96px; padding: 6px 12px 7px; border-radius: 12px; border: 1.5px solid #2b2b2b; background: #fff; color: #2b2b2b;
  font: 600 13px/1.15 system-ui, -apple-system, sans-serif; box-shadow: 0 3px 10px rgba(0,0,0,.18); cursor: pointer; white-space: nowrap; }
.conj-pin::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-bottom: 0; border-top-color: #2b2b2b; }
.conj-pin-e { font-size: 11px; font-weight: 500; color: #8a6d3b; }
.conj-pin-yo { background: #2b2b2b; color: #fff; cursor: default; }
/* v465.507: «✎ nombre» en cada chincheta (también en la del abierto) */
.conj-pin-nom { margin-top: 4px; padding: 3px 9px; border-radius: 9px; border: 1px solid #b5813a; background: #fbf4e6; color: #6b4e1e;
  font: 600 11px/1.2 system-ui, -apple-system, sans-serif; cursor: pointer; pointer-events: auto; }
.conj-pin-yo .conj-pin-nom { background: #3a3a3a; color: #f2e3c0; border-color: #d9c49a; }
.conj-pin-yo .conj-pin-e { color: #d9c49a; }
body:has(.modal:not(.hidden):not(#modal-maestro)) .conj-pins { display: none; }
.conj-elige { width: 100%; margin-bottom: 6px; }
.conj-elige.on { background: #b89968; border-color: #b89968; color: #1d1a15; }

/* v465.501 — ficha de la Inicio del mueble por huecos */
.card-conj-n { font-size: 12px; color: #8a6d3b; font-weight: 600; margin: 2px 0 4px; }
/* v465.504: «2 clocks» (dos aros) y la cara de la trasera en el dibujo del clock a mano */
:is(#modal-suelo-tal, #modal-clock-mano) .st-ficha i + i, .cm-chip3d i + i { margin-left: -14px; }
#modal-clock-mano .cm-trasera { stroke: #8A6A3A; stroke-width: 1.4; stroke-dasharray: 6 4; }
#modal-clock-mano .cm-trasera-t { fill: #8A6A3A; font-size: 11px; }