/* ════════════════════════════════════════════════════════════
   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;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 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) ──────────────────────────────────────────── */
.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; }
.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); }
.patas-btn.active,
.tipo-frente-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.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); }
.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);
}

/* 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; }
/* 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; }
/* 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; }

/* 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; }
}
.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);
}
/* iPad: +2pt adicionales sobre la base. */
@media (hover: none) and (pointer: coarse) {
  .measure-label      { font-size: 16px; }
  .measure-label-axis { font-size: 14px; }
}
.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); }
.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 ──────────────────────────────────────────────── */
.ed-left {
  width: 230px; min-width: 200px;
  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 {
  width: 180px; min-width: 160px;
  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; }
.ep-right-title {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-faint); padding: 14px 12px 6px;
}

/* ── 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;
}
.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 */
/* v411: subido a 116 para no chocar con bg-switcher (66+42=108) y
   floor-switcher (14+42=56) que están abajo. */
.ed-fit-btn {
  position: absolute; bottom: 116px; right: 12px; 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. Justo encima del botón de centrar. */
.ed-top-btn {
  position: absolute; bottom: 158px; right: 12px; 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); }
.ed-top-btn.active { border-color: var(--gold); background: rgba(184,153,104,0.12); }
.ed-top-btn.active svg { stroke: var(--gold); }

/* 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" — esquina inferior izquierda del viewport */
.ed-entorno-btn {
  position: absolute; bottom: 14px; left: 14px; 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. */
.ed-lighting-btn {
  position: absolute; bottom: 14px; left: 60px; 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; }

.lighting-popup {
  /* v459.195: popup pegado al borde izquierdo y más compacto — antes
     left:60px + min-width 260px se metía mucho en la zona del 3D. */
  position: absolute; bottom: 60px; left: 12px; 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); }

.ent-popup {
  position: absolute; bottom: 60px; left: 14px; 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; }
.ent-fondo-row.on { display: flex; }
.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;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  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); }
.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; }
.tipo-icon svg { width: 100%; max-width: 60px; height: auto; stroke: currentColor; fill: none; }
.tipo-btn span { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; }

/* 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;
}

/* 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 sobre el visor 3D. Esquina inferior izquierda,
   al lado de los botones de Entorno (left:14px) y Bombilla (left:60px). */
.ed-brand {
  position: absolute; bottom: 14px; left: 108px; z-index: 20;
  height: 36px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.ed-brand img {
  width: 26px; height: 26px;
  border-radius: 5px;
  object-fit: contain;
}
.ed-brand 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;
}
.ep-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 72px; padding: 7px 4px 6px;
  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; }
.ep-chip span {
  font-family: var(--sans); font-size: 9.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); }
.ep-chip-clickinsert { cursor: pointer; touch-action: auto; }
/* 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);
  border-radius: 999px;
  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; }

/* 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); }
.ed-elem-bar-name { font-family: var(--serif); font-size: 15px; color: var(--paper); }
.ed-elem-bar-pos { font-family: var(--sans); font-size: 11px; color: rgba(251,246,233,0.55); }
/* 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); }
.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; }
.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); }

.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); }
.ed-eb-btn.danger { color: #ff8a80; }
.ed-eb-btn.danger:hover { background: rgba(255,100,80,0.2); }
.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;
  }
  .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;
  width: 280px;
  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;
  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; }
.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); }
.fp-body {
  padding: 8px 10px 12px;
  overflow-y: auto;
}
.fp-section { margin-top: 10px; }
.fp-section:first-child { margin-top: 4px; }
.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;
}
.fp-row { display: flex; flex-wrap: wrap; gap: 4px; }
.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; }
.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.row-focused { border-color: #FFCC00; box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25); }
.maestro-row.swap-active { border-color: #6BB37C; background: #F2FAF4; }
.maestro-row.swap-active.row-focused { box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25); }
/* 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; }
.maestro-row-grid select,
.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); }

/* ── 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; }

/* 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 */
.ed-fit-btn {
  background: rgba(14,12,9,0.75);
  border: 1px solid rgba(184,153,104,0.25);
  color: rgba(184,153,104,0.7);
  backdrop-filter: blur(8px);
}
.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); }
.ed-panel-tab-left  { left: 230px; border-radius: 0 6px 6px 0; border-left: none; }
.ed-panel-tab-right { right: 180px; 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.open .ep-toggle-btn   { color: rgba(184,153,104,0.7); }

/* ── 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; }
/* 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); }
#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;
}

/* 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;
}
.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; }

/* ==========================================================================
   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; }
  .ed-right { width: 150px; min-width: 138px; padding-bottom: 34px; }
  .ep-right-title { padding: 8px 10px 4px; }
}