/* ============ tokens ============ */
:root{
  --accent:#a8833b;        /* latón P.ESPEJO (topbar e identidad) */
  --accent-dark:#8a6a2c;
  --ink:#1f1e1c;
  --muted:#70706f;         /* V9: contraste 4,5:1 sobre los fondos claros */
  --line:#ece9e4;
  --bg:#faf9f7;
  --card:#ffffff;
  --laton:linear-gradient(90deg,#8a6a2c,#e3c87e 45%,#b08d4c 70%,#e3c87e);
  --shadow:0 10px 30px rgba(48,42,25,.08);
  /* piel Curvatto (maquetas Alberto 19-ago) */
  --terra:#a85427;         /* acento terracota (oscurecido para cumplir 4,5:1) */
  --terra-suave:#f4e3d9;
  --sand:#bba28e;          /* CTA secundario arena */
  --topo:#5f5852;          /* botón enviar */
  --oro:#a79976;           /* dorado apagado: slider, cota activa */
  --oro-suave:#f6efe4;
}

@property --w  { syntax:'<length>'; inherits:true; initial-value:490px; }
@property --h  { syntax:'<length>'; inherits:true; initial-value:79px; }
@property --d  { syntax:'<length>'; inherits:true; initial-value:78px; }
@property --ov { syntax:'<length>'; inherits:true; initial-value:0px; }

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
}

/* ============ app shell: una sola pantalla con vistas ============ */
.app{
  /* P8 (José 27-sep): en TABLET el menú de arriba y la parte de abajo salían cortados.
     Causa: 100vh en los navegadores de tablet/móvil INCLUYE la barra de direcciones →
     la app queda más alta que el área visible y, con overflow:hidden, no hay scroll para
     alcanzar lo cortado. 100dvh = alto REALMENTE visible (excluye la barra) → encaja. */
  height:100vh;
  height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr;
  grid-template-columns:minmax(0,1fr);
}
.views{ min-height:0; position:relative; }
.view{ height:100%; min-height:0; }
.view[hidden]{ display:none; }
/* configurador = controles a la izquierda + VISOR GRANDE a la derecha
   (lo importante de cara al cliente es ver bien el mueble) */
#viewConfig{ display:grid; grid-template-columns:400px minmax(0,1fr); grid-template-rows:minmax(0,1fr); min-height:0; }  /* columna de opciones mas ancha (revision 19-sep) */
#viewConfig[hidden]{ display:none; }
#viewConfig .ribbon{ grid-template-columns:1fr; align-content:start; overflow:auto;
  gap:10px; padding:12px; border-bottom:0; border-right:1px solid var(--line); }
#viewConfig .ribbon .rib{ grid-column:1 / -1; }
#viewConfig .stage-wrap{ min-height:0; padding:14px; }
/* catálogo / cesta / mensaje = contenido desplazable */
#viewCatalogo, #viewCesta, #viewMensaje{ overflow:auto; padding:16px 22px 26px; }

/* ---- navegación (volver) ---- */
.topbar__l{ display:flex; align-items:center; gap:14px; min-width:0; }
.back-btn{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--accent);
  background:#fff; color:var(--accent-dark); font:inherit; font-weight:700; font-size:14.5px;
  border-radius:999px; padding:10px 22px; cursor:pointer; transition:.15s; white-space:nowrap; }
.back-btn:hover{ background:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(168,131,59,.28); }
.back-btn[hidden]{ display:none; }
.crumbs{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); }
.crumb{ white-space:nowrap; }
.crumb.is-active{ color:var(--accent-dark); font-weight:700; }
.crumb__sep{ font-style:normal; color:#cdc7b4; margin:0 1px; }

/* ---- catálogo (Pantalla 3) con vistas previas ---- */
.view__t{ margin:0; font-size:18px; font-family:Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:.3px; }
#viewCatalogo .view__t{ font-size:clamp(28px,3.4vw,40px); }
.view__s{ margin:2px 0 0; color:var(--muted); font-size:12.5px; }
.catalogo-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.vp-field{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#948e7b; display:flex; flex-direction:column; gap:4px; text-align:right; }
.vp-field span{ font-size:13px; color:var(--ink); text-transform:none; letter-spacing:0; }
/* ---- filtros del catálogo · menú elegante (ancho · instalación · extras) ---- */
.cat-filtros{ background:linear-gradient(180deg,#fffdf9,#fbf9f2); border:1px solid var(--line); border-radius:18px;
  padding:20px 24px; margin-bottom:14px; box-shadow:0 6px 22px rgba(48,42,25,.06); }
.cat-filtro{ margin-bottom:16px; }
.cat-filtro__t{ display:flex; align-items:center; gap:9px; font-size:12px; text-transform:uppercase; letter-spacing:1.6px;
  color:#6f6857; font-weight:600; margin-bottom:11px; }
/* badge numerado que pulsa para guiar; deja de pulsar cuando el grupo tiene selección */
.cat-filtro__n{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
  font-size:12px; font-weight:700; color:var(--accent-dark); background:#fff; border:1.5px solid var(--accent);
  position:relative; flex:none; transition:.2s; }
.cat-filtro:not(.is-filled) .cat-filtro__n{ animation:filtroPulse 1.7s ease-out infinite; }
.cat-filtro:not(.is-filled) .cat-filtro__n::after{ content:""; position:absolute; inset:-1.5px; border-radius:50%;
  border:1.5px solid var(--accent); animation:filtroRing 1.7s ease-out infinite; }
.cat-filtro.is-filled .cat-filtro__n{ background:var(--accent); border-color:var(--accent); color:#fff; }
.cat-filtro.is-filled .cat-filtro__n::before{ content:"✓"; }
.cat-filtro.is-filled .cat-filtro__n{ font-size:0; }
.cat-filtro.is-filled .cat-filtro__n::before{ font-size:12px; }
@keyframes filtroPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(168,131,59,.35); } 50%{ box-shadow:0 0 0 5px rgba(168,131,59,0); } }
@keyframes filtroRing{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }
.cat-filtro__row{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:34px; align-items:start;
  border-top:1px solid var(--line); padding-top:15px; }
/* respeta el atributo hidden pese al display:grid (pasos 2/3 ocultos de inicio) */
.cat-filtro__row[hidden]{ display:none !important; }
.cat-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cat-chip{ position:relative; font:inherit; font-size:13px; color:var(--ink); background:#fff; border:1px solid #e2ddce;
  border-radius:999px; padding:9px 17px; cursor:pointer; transition:.16s; white-space:nowrap; }
.cat-chip:hover{ border-color:var(--accent); color:var(--accent-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(48,42,25,.08); }
.cat-chip.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 5px 14px rgba(168,131,59,.34); }
/* mientras el grupo no está relleno, sus chips brillan suavemente para invitar a pulsar */
.cat-filtro:not(.is-filled) .cat-chip{ animation:chipGlow 2.6s ease-in-out infinite; }
.cat-filtro:not(.is-filled) .cat-chip:hover{ animation:none; }
@keyframes chipGlow{ 0%,100%{ border-color:#e2ddce; } 50%{ border-color:#d9c393; } }
.cat-status{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 4px 14px; font-size:13px; color:var(--muted); }
.cat-status b{ color:var(--accent-dark); }
.cat-status__clear{ font:inherit; font-size:12px; color:var(--accent-dark); background:none; border:0; cursor:pointer; text-decoration:underline; }

/* ---- tarjetas del catálogo (foto de ambiente + datos elegantes) ---- */
/* catálogo en CUADRÍCULA compacta: más muebles a la vista (reunión 1-ago · Alberto) */
.catalogo{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; max-width:none; margin:0; }
.cat-card{ display:flex; flex-direction:column; gap:8px;
  text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px; cursor:pointer; transition:.18s; overflow:hidden; }
.cat-card:hover{ border-color:var(--accent); box-shadow:0 12px 28px rgba(48,42,25,.15); transform:translateY(-2px); }
.cat-card__prev{ position:relative; border-radius:10px; border:1px solid var(--line); background:linear-gradient(#faf9f4,#efe9dd); padding:8px; }
.cat-card__prev svg{ width:100%; height:auto; display:block; }
.cat-card__info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cat-card__kicker{ font-size:9.5px; text-transform:uppercase; letter-spacing:2px; color:var(--accent-dark); font-weight:600; }
.cat-card__name{ font-family:Georgia,"Times New Roman",serif; font-size:19px; line-height:1; letter-spacing:.5px; }
.cat-card__meta{ font-size:11px; color:#5f5a4d; }
.cat-card__meta--dim{ color:var(--muted); }
.cat-card__chi{ color:#b15e28; }
.cat-card__price{ font-size:12.5px; color:var(--ink); margin-top:3px; }
.cat-card__price b{ color:var(--accent-dark); font-size:15px; }
.cat-card__bullets{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.cat-card__bullets li{ position:relative; padding-left:14px; font-size:11.5px; color:#5f5a4d; }
.cat-card__bullets li::before{ content:""; position:absolute; left:0; top:6px; width:4px; height:4px; border-radius:50%; background:var(--accent); }
.cat-card__tag{ align-self:flex-start; font-size:10px; color:var(--accent-dark); background:#f4ecd9; border:1px solid #e6d6ab; border-radius:999px; padding:3px 10px; margin-top:1px; }
.cat-card__tag--chi{ color:#b15e28; background:#f8e7d6; border-color:#e6c39e; }
.cat-card__disp{ font-size:10.5px; color:var(--muted); margin-top:2px; }
.cat-card__range{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.rng-lbl{ font-size:9px; text-transform:uppercase; letter-spacing:1px; color:#a59e8c; font-weight:600; }
.rng-big{ font-family:Georgia,serif; font-size:18px; color:var(--accent-dark); letter-spacing:.5px; }
.rng-track{ position:relative; height:7px; background:#ece6d6; border-radius:5px; margin-top:2px; }
.rng-fill{ position:absolute; top:0; bottom:0; background:linear-gradient(90deg,#caa75c,var(--accent)); border-radius:5px; }
.rng-std{ position:absolute; top:-3px; width:2px; height:13px; background:var(--ink); border-radius:1px; }
.rng-axis{ display:flex; justify-content:space-between; font-size:9px; color:#a59e8c; font-weight:600; letter-spacing:.3px; }
.cat-card__acc{ display:flex; gap:7px; align-items:stretch; margin-top:auto; }
.cat-card__acc button{ flex:1; }
.cat-card__cta{ font-size:12px; color:#fff; background:var(--accent); border:0; border-radius:9px; padding:8px 10px; font-weight:600; cursor:pointer; transition:.15s; white-space:nowrap; }
.cat-card__cta:hover{ filter:brightness(1.07); box-shadow:0 6px 16px rgba(168,131,59,.3); }
.cat-card__cfg{ font-size:12px; color:var(--accent-dark); background:#fff; border:1.5px solid var(--line); border-radius:9px; padding:8px 10px; font-weight:600; cursor:pointer; transition:.15s; white-space:nowrap; }
.cat-card__cfg:hover{ border-color:var(--accent); }
.cat-vacio{ text-align:center; color:var(--muted); padding:40px; background:var(--card); border:1px dashed var(--line); border-radius:14px; }

/* ---- asistente guiado del configurador ---- */
.guia{
  position:sticky; top:0; z-index:6; display:flex; align-items:flex-start; gap:10px;
  background:linear-gradient(135deg,#262218,#3a3324); color:#f2ecdd;
  border:1px solid #4c4432; border-radius:13px; padding:12px 34px 12px 13px;
  box-shadow:0 10px 26px rgba(30,24,12,.35); margin-bottom:2px;
}
.guia[hidden]{ display:none; }
.guia__ico{ flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; font-style:normal; font-size:13px; animation:guiaTwinkle 2.4s ease-in-out infinite; }
@keyframes guiaTwinkle{ 0%,100%{ box-shadow:0 0 0 0 rgba(168,131,59,.5); } 50%{ box-shadow:0 0 0 6px rgba(168,131,59,0); } }
.guia__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.guia__txt b{ font-size:12px; color:#e8c780; letter-spacing:.4px; }
.guia__txt span{ font-size:12px; line-height:1.45; color:#ddd5c2; }
.guia__foot{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; margin-left:auto; flex:none; }
.guia__dots{ display:flex; gap:4px; }
.guia__dots i{ width:7px; height:7px; border-radius:50%; background:#57503c; transition:.2s; }
.guia__dots i.done{ background:#8a7a52; }
.guia__dots i.now{ background:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.25); transform:scale(1.2); }
.guia__btn{ font:inherit; font-size:12px; font-weight:700; color:#241f14; background:linear-gradient(135deg,#e3c87e,var(--accent));
  border:0; border-radius:999px; padding:7px 14px; cursor:pointer; white-space:nowrap; }
.guia__btn:hover{ filter:brightness(1.08); }
.guia__x{ position:absolute; top:7px; right:9px; border:0; background:none; color:#8d8468; font-size:12px; cursor:pointer; padding:2px; }
.guia__x:hover{ color:#f2ecdd; }
.guia{ position:sticky; }  /* dentro del panel scrollable */
/* sección activa: halo dorado que respira */
.rib.guia-activa, .detalle-block.guia-activa{
  border-radius:12px; animation:guiaHalo 1.8s ease-in-out infinite;
}
@keyframes guiaHalo{
  0%,100%{ box-shadow:0 0 0 2px rgba(168,131,59,.55), 0 0 18px 2px rgba(168,131,59,.18); }
  50%{ box-shadow:0 0 0 4px rgba(168,131,59,.28), 0 0 26px 6px rgba(168,131,59,.30); }
}
.detalle-block.guia-activa{ padding:8px; margin:4px -8px -8px; }
/* último paso: late el botón de añadir a cesta */
.guia-pulse{ animation:guiaHalo 1.6s ease-in-out infinite; }

/* ---- color detalle (swatches, como el cuerpo) ---- */
.detalle-block{ margin-top:12px; }
.detalle-lbl{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:#948e7b; margin-bottom:7px; }
.detalle-block .cuerpo-opts{ gap:7px; }
.detalle-block .cuerpo-sw i{ width:32px; height:32px; border-radius:50%; } /* CORRECION 3.10: DETALLE = círculo */
.detalle-block .cuerpo-sw span{ font-size:9.5px; }

/* ---- cota editable sobre el 3D ---- */
.cota3d{
  position:absolute; top:3px; left:50%; transform:translateX(-50%);
  font-size:8.5px; font-weight:700; font-style:normal; color:#2b2920; line-height:1.5;
  background:rgba(255,255,255,.9); border-radius:3px; padding:0 3px; white-space:nowrap;
  cursor:pointer; z-index:3; animation:cotaBlink 1.4s ease-in-out infinite;
}
.cota3d:hover{ background:var(--accent); color:#fff; }

/* ---- cesta (Pantalla 6) ---- */
.cesta-wrap{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:auto; }
.cesta{ width:100%; border-collapse:collapse; font-size:13px; min-width:560px; }
.cesta th{ background:#f3f1e9; text-align:left; padding:9px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#7a7461; }
.cesta td{ padding:9px 12px; border-top:1px solid #f2f0e8; }
.cesta .num{ text-align:right; font-variant-numeric:tabular-nums; }
.cesta-del{ border:0; background:#efece2; border-radius:6px; cursor:pointer; padding:2px 7px; color:#9a6c12; }
.cesta-vacia{ padding:24px; text-align:center; color:var(--muted); }
.cesta-vacia[hidden]{ display:none; }
.cesta-foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; }
.cesta-total{ font-size:14px; } .cesta-total strong{ font-size:22px; color:var(--accent-dark); }
.cesta-total small{ color:var(--muted); }
.cesta-acc{ display:flex; gap:10px; flex-wrap:wrap; }

/* guardar combinación + combinaciones guardadas (borradores) */
/* ---- menú superior moderno (chip de cuenta + nav con iconos) ---- */
.catalogo-head__r{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.acc-chip{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); background:#fff;
  border-radius:999px; padding:5px 14px 5px 5px; cursor:pointer; font:inherit; transition:.15s; }
.acc-chip:hover{ border-color:var(--accent); box-shadow:0 4px 12px rgba(48,42,25,.08); }
.acc-chip__av{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),#caa75c); color:#fff; font-size:12px; font-weight:700; font-style:normal; letter-spacing:.5px; }
.acc-chip__nm{ font-size:13px; font-weight:600; color:var(--ink); }
.topmenu{ display:flex; align-items:center; gap:2px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:4px; box-shadow:0 2px 10px rgba(48,42,25,.05); }
.topmenu__item{ display:inline-flex; align-items:center; gap:7px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:#5b5648; padding:8px 13px; border-radius:9px; transition:.15s; white-space:nowrap; }
.topmenu__item[hidden]{ display:none !important; } /* respeta el atributo hidden pese al inline-flex */
.topmenu__item svg{ width:17px; height:17px; color:#a79f8b; transition:.15s; }
.topmenu__item b{ font-weight:700; color:var(--accent-dark); }
.topmenu__item:hover{ background:#f6f2e9; color:var(--accent-dark); }
.topmenu__item:hover svg{ color:var(--accent); }
.topmenu__badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--accent); color:#fff !important; font-size:10.5px; font-weight:700; }
.cesta-guardar{ display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap; }
#cestaNombre.numin--nombre{ width:min(460px, 100%); flex:0 1 460px; }
.guardadas{ display:flex; flex-direction:column; gap:10px; max-width:760px; margin-bottom:16px; }
.guardada{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.guardada__txt{ display:flex; flex-direction:column; min-width:0; }
.guardada__txt strong{ font-size:15px; }
.guardada__txt small{ color:var(--muted); font-size:12px; }
.guardada__acc{ display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; max-width:260px; }
.guardada-del{ border:0; background:#efece2; border-radius:6px; cursor:pointer; padding:4px 9px; color:#9a6c12; }

/* pantalla del valor del punto (entre acceso y modelos) */
/* pantalla Mi perfil: valor del punto + mis borradores */
.perfil{ max-width:920px; margin:5vh auto 0; }
.perfil .view__t{ font-size:24px; }
.perfil__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.perfil__card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.perfil__h{ margin:0 0 6px; font-size:15px; }
.punto-input{ display:flex; align-items:center; gap:10px; margin:6px 0 12px; }
.punto-input input{ width:130px; font-size:26px; font-weight:700; text-align:center; padding:8px 10px; }
.punto-input span{ font-size:16px; color:var(--muted); }
.perfil__fisc{ list-style:none; margin:0 0 10px; padding:0; display:flex; gap:18px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; }
.perfil__fisc b{ color:var(--ink); }
.perfil__note{ display:block; color:var(--muted); font-size:11.5px; margin-bottom:14px; }
.perfil__note a{ color:var(--accent-dark); }
/* input.numin--buscar (más específico que .numin) para que el buscador sea grande y ancho */
input.numin--buscar{ width:100%; margin-bottom:10px; font-weight:500; font-size:15px; padding:13px 16px;
  border-radius:11px; letter-spacing:.01em; }
.guardadas--perfil{ max-height:300px; overflow:auto; }
@media (max-width:760px){ .perfil__grid{ grid-template-columns:1fr; } }

/* ---- observaciones + guía del robot (Pantalla 4) ---- */
.obs-txt{ width:100%; resize:vertical; min-height:46px; border:1px solid var(--line); border-radius:9px;
  padding:8px 10px; font:inherit; font-size:12.5px; background:#fbfaf6; }
.obs-txt:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.14); }
/* ★ t17 (José 22-oct · regla 14 «Campos de observaciones»: «más grandes; en PC altura mínima 150 px; que se lea bien el placeholder, el
   texto y las instrucciones»): los campos de OBSERVACIONES (configurador, línea de la cesta, pedido, montaje) en pantallas de PC */
@media (min-width:1024px){
  #otrasModif, #observaciones, .cesta-linea-obs, #pedidoObs, #inObs{ min-height:150px; font-size:13.5px; line-height:1.5; padding:10px 12px; }
  #otrasModif::placeholder, #observaciones::placeholder, .cesta-linea-obs::placeholder, #pedidoObs::placeholder, #inObs::placeholder{ color:#8a8478; opacity:1; }
}
/* ★ t17 (regla 13): el «3D ↓» de las tarjetas, oculto mientras la descarga del GLB esté desactivada (app.js · descargaGlbActiva) */
.cat-card__cta[hidden]{ display:none !important; }
.rib__guide{ margin-top:8px; font-size:11.5px; color:#8a6a2c; background:#fbf4e4; border:1px solid #ecdcb6;
  border-radius:8px; padding:7px 10px; line-height:1.35; }

/* ---- marca ✓ del LED sobre los huecos donde se instala ---- */
.led-mark{ position:absolute; top:6px; right:6px; z-index:4; width:17px; height:17px; border-radius:50%;
  background:#ffd984; color:#5a4310; font-size:11px; font-weight:800; font-style:normal;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 10px 2px rgba(255,214,130,.8); }

/* ---- referencia del pedido + montaje/obs en la cesta ---- */
.cesta-ref{ margin:6px 0 14px; }
.cesta-ref label{ display:flex; flex-direction:column; gap:4px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#948e7b; max-width:460px; }
.cesta-ref input{ width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font:inherit; }
.cesta-ref input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.14); }
.cesta-meta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; font-size:11px; }
.cesta-montaje{ color:var(--accent-dark); font-weight:600; }
.cesta-obs{ color:var(--muted); }
.cesta-cant{ width:58px; text-align:center; border:1px solid var(--line); border-radius:7px; padding:5px 4px; font:inherit; }
.cesta-cant:focus{ outline:none; border-color:var(--accent); }
.mensaje-ref{ font-size:14px; margin:6px 0 14px; }
.mensaje-ref strong{ color:var(--accent-dark); font-size:17px; letter-spacing:.5px; }

/* ---- revisiones 28-jun ---- */
/* color: cuadrado para el cuerpo, círculo para el detalle */
#colorCuerpo .cuerpo-sw i{ border-radius:4px; } /* CORRECION 3.10: CUERPO = cuadrado */
/* CORRECION 3.6: botón "Volver a tarifa" destacado en el configurador */
.btn--tarifa{ border-color:var(--accent); color:var(--accent-dark); font-weight:700; }
.detalle-block .cuerpo-sw i{ border-radius:50%; }
/* cesta: familia + acciones (lápiz editar / quitar) */
.cesta-familia{ color:#8a6a2c; font-weight:600; }
.cesta-acc-td{ white-space:nowrap; }
.cesta-edit,.cesta-del{ border:1px solid var(--line); background:#faf9f4; border-radius:7px; width:26px; height:26px; cursor:pointer; font-size:13px; line-height:1; }
.cesta-edit{ color:var(--accent-dark); margin-right:5px; }
.cesta-edit:hover,.cesta-del:hover{ border-color:var(--accent); }
/* mensaje: notas + términos */
.mensaje-notas{ margin:14px auto 6px; max-width:560px; text-align:left; font-size:12.5px; color:var(--muted); }
.mensaje-notas p{ margin:5px 0; }
.mensaje-notas .tyc summary{ cursor:pointer; color:var(--accent-dark); font-weight:600; }
.mensaje-notas .tyc p{ margin-top:6px; font-size:11.5px; line-height:1.5; }
/* perfil: fecha + coste (uso interno, oculto por defecto) */
.perfil__fecha{ font-size:11.5px; color:var(--muted); margin:2px 0 8px; }
.perfil__coste{ margin:0 0 10px; }
.perfil__coste summary{ cursor:pointer; font-size:11.5px; color:var(--accent-dark); }
.perfil__coste-b{ font-size:12px; color:var(--ink); margin-top:5px; }
/* opción de puerta: aspecto del frente montado en el 3D */
.puerta-moldura .mod--puerta{ box-shadow:inset 0 0 0 4px rgba(255,255,255,.28), inset 0 0 0 5px rgba(0,0,0,.12); }
.puerta-bronce .mod--puerta{ background-image:linear-gradient(120deg, rgba(120,80,30,.38), rgba(80,55,20,.22)); }
.puerta-flutex .mod--puerta{ background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 3px, rgba(150,150,150,.10) 3px 6px); }
.puerta-rejilla .mod--puerta{ background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 2px, transparent 2px 6px), repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 6px); }

/* ---- familia de productos · visor 3D real (GLB) ---- */
.prod3d{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:1100px; margin:0 auto 16px; }
.prod3d__card{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.prod3d__mv{ width:100%; height:440px; background:radial-gradient(circle at 50% 38%, #fdfcf8, #ece6da); }
.prod3d__info{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-top:1px solid var(--line); }
.prod3d__info strong{ display:block; font-size:16px; }
.prod3d__info small{ color:var(--muted); font-size:11.5px; }
.prod3d__cta{ font-size:13px; color:#fff; background:var(--accent); border-radius:999px; padding:8px 16px; font-weight:600; cursor:pointer; }
@media (max-width:860px){ .prod3d{ grid-template-columns:1fr; } .prod3d__mv{ height:340px; } }
.prod3d__real{ margin:0 18px 16px; }

/* ---- escenario realista GLB (demo de calidad: .glb real de fábrica) ---- */
.glbdemo{ position:fixed; inset:0; z-index:80;
  background:#14110b url('img/ambientes/fondo-config.jpg') center bottom/cover no-repeat; }
.glbdemo[hidden]{ display:none; }
body.glbdemo-open{ overflow:hidden; }
.glbdemo__scene{ position:absolute; inset:0; }
.glbdemo__mv{ position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(1240px,97vw); height:88%; background:transparent; --poster-color:transparent; }
.glbdemo__night{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s;
  background:linear-gradient(180deg, rgba(10,9,14,.72), rgba(14,11,6,.5) 55%, rgba(22,15,5,.68)); }
.glbdemo--noche .glbdemo__night{ opacity:1; }
.glbdemo__back{ position:absolute; top:16px; left:16px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  border:1.5px solid var(--accent); background:rgba(255,255,255,.92); color:var(--accent-dark);
  font:inherit; font-weight:700; font-size:14.5px; border-radius:999px; padding:10px 22px; cursor:pointer; transition:.15s; }
.glbdemo__back:hover{ background:var(--accent); color:#fff; }
.glbdemo__tools{ position:absolute; top:16px; right:16px; z-index:3; display:flex; gap:7px; }
.glbdemo__panel{ position:absolute; left:18px; bottom:18px; z-index:3;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  max-width:min(380px,92vw); padding:16px 20px; border-radius:18px;
  background:rgba(24,21,15,.66); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px); color:#efe9d8; }
.glbdemo__head strong{ font-family:"Cormorant Garamond", Georgia, serif; font-size:24px; display:block; line-height:1.1; }
.glbdemo__head small{ color:#c9c0a8; font-size:11.5px; letter-spacing:.04em; }
.glbdemo__sw{ display:flex; gap:8px; flex-wrap:wrap; }
.glbsw{ display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08); color:#efe9d8; font:inherit; font-size:12px;
  border-radius:999px; padding:7px 13px 7px 8px; cursor:pointer; transition:.15s; }
.glbsw i{ width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,.4); flex:none; }
.glbsw__orig{ background:conic-gradient(#e0c39e 0 50%, #b48b57 50% 100%); }
.glbsw:hover{ border-color:var(--accent); }
.glbsw.is-on{ border-color:var(--accent); background:rgba(168,131,59,.28); box-shadow:0 0 0 1px var(--accent); }
.glbdemo__sinlaca{ color:#c9c0a8; font-size:12px; font-style:italic; }
.glbdemo__nota{ margin:0; font-size:11.5px; color:#c9c0a8; line-height:1.5; }
@media (max-width:700px){
  .glbdemo__panel{ left:10px; right:10px; bottom:10px; max-width:none; padding:10px 14px; gap:8px; }
  .glbdemo__head strong{ font-size:19px; }
  .glbdemo__nota{ display:none; }
  .glbdemo__mv{ height:78%; }
}

/* ---- login del cliente (modal) ---- */
.cmodal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(38,33,22,.5); backdrop-filter:blur(3px); padding:20px; }
.cmodal[hidden]{ display:none; }
.cmodal__card{ width:min(360px,94vw); background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:26px 26px 20px; box-shadow:0 24px 60px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:10px; text-align:center; }
.cmodal__logo{ width:120px; height:auto; margin:0 auto 2px; }
.cmodal__sub{ margin:0 0 6px; color:var(--muted); font-size:12.5px; }
.cmodal__field{ display:flex; flex-direction:column; gap:4px; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#948e7b; }
.cmodal__field input{ border:1px solid var(--line); border-radius:9px; padding:10px 11px; font:inherit; text-transform:none; letter-spacing:0; color:var(--ink); }
.cmodal__field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.14); }
.cmodal__chk{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); text-align:left; }
.cmodal__err{ color:#b5432f; font-size:12px; margin:0; }
.cmodal__acc{ display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
.cmodal__note{ color:var(--muted); font-size:10.5px; margin-top:6px; }
.cmodal__note a{ color:var(--accent-dark); }
.cmodal__olvide{ border:0; background:none; padding:0; font:inherit; color:var(--accent-dark); text-decoration:underline; cursor:pointer; }
/* selector de régimen fiscal (IVA / IVA+recargo) */
.perfil__fisc label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.perfil__fisc input[type="radio"]{ accent-color:var(--accent); margin:0; }

/* ---- indicador de sesión + Mi cuenta ---- */
.sesion-info{ font-size:12.5px; color:var(--accent-dark); font-weight:600; align-self:center; margin-right:4px; }
.cuenta-id{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 18px; margin:10px 0 6px; }
.cuenta-id strong{ font-size:16px; }
.cuenta-id small{ color:var(--muted); }
.cuenta-id__r{ display:flex; align-items:center; gap:12px; }
.cuenta-tarifa{ font-size:12px; color:#8a6a2c; font-weight:600; }
/* cambiar contraseña (Mi cuenta) */
.cuenta-pass{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:0 0 8px; }
.cuenta-pass input{ border:1px solid var(--line); border-radius:9px; padding:9px 11px; font:inherit; flex:1 1 180px; min-width:0; }
.cuenta-pass input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.14); }
/* presupuesto interno a coste en la cesta */
.cesta-coste{ margin-top:4px; font-size:11.5px; color:var(--muted); }
.cesta-coste summary{ cursor:pointer; color:var(--accent-dark); }
.cesta-coste span{ font-weight:700; color:var(--ink); }
/* ★ 8-oct (Alberto): opciones de envío/embalaje de la cesta */
.cesta-envio{ margin:8px 0 2px; font-size:13px; border:1px solid var(--line); border-radius:10px; padding:4px 10px; }
.cesta-envio>summary{ cursor:pointer; color:var(--accent-dark); font-weight:600; padding:4px 0; }
.cesta-envio__op{ display:flex; align-items:center; gap:8px; padding:5px 0; color:var(--ink); }
.cesta-envio__op input[type=checkbox]{ width:16px; height:16px; }
.cesta-envio__op--num input[type=number]{ width:64px; padding:3px 6px; border:1px solid var(--line); border-radius:6px; text-align:right; }
.cesta-envio__pct{ color:var(--accent-dark); }
.cesta-envio__pct--dto{ color:#2e7d4f; }
.cesta-envio__nota{ display:block; color:var(--muted); font-size:11px; margin:2px 0 4px; }
.cesta-envio__ayuda{ display:block; color:var(--muted); font-size:11px; line-height:1.4; margin:-2px 0 6px 24px; }   /* ★ 19-oct: textos de Alberto (G5-039) */
#cestaEnvioRow b{ color:var(--accent-dark); }
/* ★ 8-oct (Alberto): vista de activación de cuenta (mail de claves) */
.activar{ display:flex; justify-content:center; padding:32px 16px; }
.activar__card{ width:min(520px,100%); background:var(--card,#fff); border:1px solid var(--line); border-radius:16px; padding:26px 28px; box-shadow:0 8px 30px rgba(0,0,0,.06); }
.activar__title{ margin:0 0 6px; font-size:22px; }
.activar__lead{ margin:0 0 18px; color:var(--muted); }
.activar__datos{ border:1px solid var(--line); border-radius:12px; padding:6px 14px; margin-bottom:18px; }
.activar__row{ display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.activar__row:last-child{ border-bottom:none; } .activar__row span{ color:var(--muted); } .activar__row b{ text-align:right; }
.activar__cond{ margin-bottom:16px; } .activar__cond a{ color:var(--accent-dark); font-weight:600; display:inline-block; margin-bottom:8px; }
.activar__chk{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.activar__pass{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.activar__lbl{ font-size:13px; color:var(--muted); margin-top:6px; }
.activar__pass input{ padding:10px 12px; border:1px solid var(--line); border-radius:9px; font-size:15px; }
.activar__pass input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.14); }
.activar__btn{ width:100%; justify-content:center; }
.activar__btn:disabled{ opacity:.5; cursor:not-allowed; }
.activar__nota{ color:var(--muted); font-size:11.5px; margin:12px 0 0; text-align:center; }
/* ★ 8-oct (Alberto): mis vendedores (Mi perfil) */
.perf-vend{ margin:20px 0; background:var(--card,#fff); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.perf-vend__head h4{ margin:0 0 4px; } .perf-vend__head small{ color:var(--muted); }
.perf-vend__lista{ margin:12px 0; display:flex; flex-direction:column; gap:8px; }
.perf-vend__it{ display:flex; align-items:center; gap:12px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; }
.perf-vend__it.is-pend{ background:rgba(168,131,59,.06); }
.perf-vend__nm{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.perf-vend__nm small{ color:var(--muted); }
.perf-vend__est{ font-size:12px; color:var(--muted); white-space:nowrap; }
.perf-vend__re, .perf-vend__del{ border:none; background:none; cursor:pointer; font-size:15px; padding:4px 6px; border-radius:6px; }
.perf-vend__re:hover{ background:rgba(168,131,59,.12); }
.perf-vend__vacio{ color:var(--muted); font-size:13px; margin:8px 0; }
.perf-vend__add{ display:flex; gap:8px; flex-wrap:wrap; }
/* ★ 10-oct: sección propia «Mis vendedores» (ya no va en la portada de Mi espacio) */
.perf-vend--vista{ max-width:760px; }
.perf-vend__head--lista{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.perf-vend__nopuede{ color:var(--muted); max-width:760px; }
/* ★ 10-oct (Fran): quién tiene la sesión abierta, siempre visible en la barra negra */
.navbar__quien{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; letter-spacing:.03em; color:#e6dfd2; white-space:nowrap;
  max-width:320px; overflow:hidden; text-overflow:ellipsis; margin-right:6px; padding:5px 12px 5px 10px;
  border:1px solid rgba(255,255,255,.26); border-radius:999px; background:rgba(255,255,255,.07); line-height:1; }
.navbar__quien svg{ flex:none; opacity:.85; }
.navbar__quien b{ color:#fff; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.navbar__quien-sub{ color:#cfc5b2; }
.navbar__quien-sub::before{ content:"·"; margin:0 6px 0 0; color:#8f866f; }
/* vendedor: pastilla en tono dorado para distinguirla de la cuenta principal */
.navbar__quien--vend{ border-color:rgba(201,169,110,.65); background:rgba(201,169,110,.14); color:#f1e7d2; }
@media (max-width:700px){ .navbar__quien{ max-width:160px; font-size:11px; padding:4px 9px; } .navbar__quien-sub{ display:none; } }
/* ★ 10-oct (recorrido completo · Fran): la miniatura de cada línea cabe ENTERA en su marco. Con display:grid y
   place-items:center la imagen crecía a su alto natural (una cómoda de 560×679 salía a 104 px en un marco de 66)
   y overflow:hidden la recortaba por arriba y por abajo. */
#viewCesta .cesta-thumb{ position:relative; display:block; }
#viewCesta .cesta-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:2px; box-sizing:border-box; }
/* ★ 10-oct (Fran): mantenimiento de modalidades PVP (Admin › Tarifas) */
.admin__tab--mod .adm-mod-id{ width:88px; text-transform:uppercase; }
.admin__tab--mod .adm-mod-nom{ min-width:190px; text-align:left; }   /* ★ 15-oct: nombres del Excel alineados a la izquierda (más ancho sacaba «Clientes» de la vista a 1366) */
.admin__tab--mod .adm-mod-s, .admin__tab--mod .adm-mod-d{ width:72px; text-align:right; }
.admin__tab--mod .adm-mod-formula{ font-size:12px; color:#4a443a; line-height:1.35; min-width:260px; }
.adm-mod-f{ display:block; }
.adm-mod-ej{ display:block; color:var(--muted); }
.adm-mod-ej b{ color:var(--ink); }
.adm-mod--punto .adm-mod-formula{ color:var(--muted); }
.adm-mod-lock{ opacity:.6; cursor:help; }
/* ★ 15-oct: propuesta «Cargar perfiles del Excel» (sin guardar): filas nuevas / que cambian / fuera del Excel */
#adminPerfilesExcel[hidden]{ display:none !important; }   /* el .btn lleva display propio: forzar el oculto */
.adm-mod-mk{ display:block; font-size:10.5px; font-weight:700; margin-top:2px; white-space:nowrap; }
.adm-mod--nueva{ background:#eef6ef; } .adm-mod--nueva .adm-mod-mk{ color:#216b2e; }
.adm-mod--cambia{ background:#fbf3e3; } .adm-mod--cambia .adm-mod-mk{ color:#8a5a12; }
.adm-mod--fuera{ background:#f3f1ee; } .adm-mod--fuera .adm-mod-mk{ color:#7a736a; }
.adm-mod-aviso{ background:#fbf7ee; border:1px solid #e9e0c9; border-radius:7px; padding:8px 11px; margin:8px 0; font-size:12.5px; line-height:1.45; }
.adm-mod-aviso b{ color:var(--ink); }
.admin__mod-desc{ display:block; color:#8a8a8a; font-weight:400; font-size:11.5px; line-height:1.35; margin-top:3px; }
.admin__mod-desc:empty{ display:none; }
/* ★ 10-oct: estado del correo automático del pedido (pantalla «pedido enviado») */
.pedido__mail-estado{ margin:0 0 10px; padding:9px 12px; border-radius:9px; font-size:13px; background:#f4f1ea; color:#4a443a; border:1px solid var(--line); }
.pedido__mail-estado.is-ok{ background:#edf5ec; border-color:#bfd9bc; color:#27502a; }
.pedido__mail-estado.is-ko{ background:#fbf0ec; border-color:#e6c2b5; color:#7a3a28; }
/* ★ 10-oct: proyecto de un vendedor de la tienda (la cuenta principal lo ve, no lo edita) */
.guardada__vend{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:11px; background:rgba(168,131,59,.12); color:#6b5422; vertical-align:middle; }
.perf-vend__add input{ flex:1 1 180px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; font-size:14px; }
.perf-vend__add input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.14); }
.admin-tar__acc{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

/* ---- panel de administración ---- */
.admin{ display:grid; grid-template-columns:1fr 1.3fr; gap:18px; max-width:1080px; margin:0 auto 16px; }
.admin__card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.admin__tab{ width:100%; border-collapse:collapse; margin-bottom:12px; }
.admin__tab th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#948e7b; padding:5px 8px; border-bottom:1px solid var(--line); }
.admin__tab td{ padding:6px 8px; border-bottom:1px solid #efeadf; font-size:13px; }
.admin__tab .num{ text-align:right; }
.admin-in{ width:90px; text-align:right; border:1px solid var(--line); border-radius:7px; padding:5px 7px; font:inherit; }
/* (reglas antiguas del formulario admin retiradas 05-ago: el display:flex y el
   flex-basis 130px de los inputs deformaban el alta de cliente — ver bloque nuevo al final) */
@media (max-width:820px){ .admin{ grid-template-columns:1fr; } }

/* ---- INICIO: recorrido por la casa (estancias) ---- */
.view--inicio{ padding:0 !important; overflow:hidden; }
.hroad{ position:relative; height:100%; }
.hroad__scroll{ height:100%; overflow-y:auto; scroll-snap-type:y mandatory; scroll-behavior:smooth; }
.hroad__scroll::-webkit-scrollbar{ width:0; }
.hroom{ height:100%; min-height:540px; scroll-snap-align:start; display:flex; align-items:center; position:relative; overflow:hidden; }
.hroom::before{ content:""; position:absolute; inset:0; z-index:0; }
.hroom::after{ content:""; position:absolute; right:-8%; bottom:-12%; width:60%; height:78%; z-index:1;
  border-radius:50% 46% 44% 50%; opacity:.5; filter:blur(2px);
  background:radial-gradient(120% 120% at 70% 30%, rgba(255,255,255,.55), transparent 60%); }
.hroom__inner{ position:relative; z-index:2; max-width:620px; margin-left:min(9vw,130px); padding:24px; color:#2b2920; }
.hroom__k{ display:inline-block; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent-dark); margin-bottom:14px; }
.hroom__h1{ font-family:Georgia,"Times New Roman",serif; font-size:clamp(38px,6vw,68px); line-height:1.02; margin:0 0 18px; font-weight:600; }
.hroom__h2{ font-family:Georgia,"Times New Roman",serif; font-size:clamp(34px,5vw,58px); line-height:1.05; margin:0 0 14px; font-weight:600; }
.hroom__lead{ font-size:clamp(15px,1.4vw,18px); line-height:1.6; color:#5b564a; max-width:520px; margin:0 0 24px; }
.hroom__logo{ width:118px; height:auto; margin-bottom:24px; } /* PNG transparente: sin mix-blend-mode */
.hroom__scrolldown{ border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:999px; padding:12px 26px; font:inherit; font-size:15px; cursor:pointer; }
.hroom__scrolldown:hover{ filter:brightness(1.06); }
.hroom__cta{ font-size:15px; padding:12px 26px; }
.hroom__soon-tag{ display:inline-block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#8a6a2c; border:1px dashed #d9c79a; border-radius:999px; padding:9px 18px; }
/* muebles disponibles dentro de la estancia */
.hroom__muebles{ display:flex; gap:12px; flex-wrap:wrap; margin:2px 0 22px; }
.hmueble{ display:flex; flex-direction:column; gap:2px; width:158px; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.72); border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:8px 8px 10px; transition:.15s; }
.hmueble:hover{ background:#fff; border-color:var(--accent); box-shadow:0 8px 20px rgba(48,42,25,.14); transform:translateY(-2px); }
.hmueble__prev{ display:block; background:#fbf9f4; border:1px solid rgba(0,0,0,.06); border-radius:8px; padding:6px; margin-bottom:5px; }
.hmueble__prev svg{ width:100%; height:auto; display:block; }
.hmueble b{ font-size:13px; }
.hmueble small{ font-size:10.5px; color:var(--muted); }
/* hotspots "shop the look": puntos que laten sobre los muebles de la foto */
.hotspots{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hotspot{ position:absolute; transform:translate(-50%,-50%); width:30px; height:30px; border:0; background:none; cursor:pointer; pointer-events:auto; }
.hotspot i{ position:absolute; inset:0; margin:auto; width:15px; height:15px; border-radius:50%;
  background:rgba(255,255,255,.96); box-shadow:0 0 0 2px rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.4); transition:transform .15s; }
.hotspot::before{ content:""; position:absolute; inset:0; margin:auto; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.9); animation:hotspulse 2s ease-out infinite; }
@keyframes hotspulse{ 0%{ transform:scale(1); opacity:.85; } 100%{ transform:scale(2.7); opacity:0; } }
.hotspot span{ position:absolute; left:50%; top:-10px; transform:translate(-50%,-100%); white-space:nowrap;
  background:#211e17; color:#fff; font-size:11px; font-weight:600; padding:6px 10px; border-radius:7px; opacity:0; transition:.18s; pointer-events:none; box-shadow:0 6px 16px rgba(0,0,0,.28); }
.hotspot span::after{ content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); border:5px solid transparent; border-top-color:#211e17; }
.hotspot:hover span{ opacity:1; }
.hotspot:hover i{ transform:scale(1.18); }
/* fondos de ambiente por estancia (degradados de lujo; sustituibles por foto real) */
.hroom--intro::before{ background:linear-gradient(100deg, rgba(245,240,231,.97) 0%, rgba(245,240,231,.86) 30%, rgba(245,240,231,.38) 60%, rgba(245,240,231,0) 100%); z-index:1; }
.hroom--salon::before{ background:linear-gradient(100deg, rgba(245,240,231,.92) 0%, rgba(245,240,231,.5) 50%, rgba(245,240,231,.06) 100%), url('img/ambientes/salon-chimenea.jpg') center/cover no-repeat; }
.hroom--comedor::before{ background:linear-gradient(100deg, rgba(245,240,231,.93) 0%, rgba(245,240,231,.55) 50%, rgba(245,240,231,.08) 100%), url('img/ambientes/comedor.jpg') center/cover no-repeat; }
.hroom--dormitorio::before{ background:linear-gradient(100deg, rgba(245,240,231,.93) 0%, rgba(245,240,231,.55) 50%, rgba(245,240,231,.08) 100%), url('img/ambientes/dormitorio.jpg') center/cover no-repeat; }
.hroom--bano::before{ background:linear-gradient(115deg, #eaeee9 0%, #d9e0d6 55%, #c9d3c6 100%); }
.hroom--puertas::before{ background:linear-gradient(115deg, #efe6d6 0%, #d8c1a0 60%, #c2a678 100%); }

/* ===== experiencia animada del recorrido ===== */
/* slideshow del hero: fundido + Ken Burns */
.hero-slides{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slides i{ position:absolute; inset:-2%; background:center/cover no-repeat; opacity:0; transition:opacity 1.8s ease; will-change:opacity,transform; }
.hero-slides i.is-on{ opacity:1; animation:kenburns 9s ease-out forwards; }
@keyframes kenburns{ 0%{ transform:scale(1.02) translate(0,0); } 100%{ transform:scale(1.12) translate(-1.4%,1%); } }
/* Ken Burns suave del fondo de cada estancia mientras está a la vista */
.hroom--gen::before{ transform-origin:60% 40%; }
.hroom--gen.is-inview::before{ animation:kbRoom 16s ease-out forwards; }
@keyframes kbRoom{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
/* reveal escalonado del contenido al entrar en la estancia */
.hroom .hroom__logo, .hroom .hroom__k, .hroom .hroom__h1, .hroom .hroom__h2, .hroom .hroom__lead,
.hroom .hroom__muebles, .hroom .hroom__cta, .hroom .hroom__soon-tag, .hroom .hroom__scrolldown{
  opacity:0; transform:translateY(30px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.hroom.is-inview :is(.hroom__logo,.hroom__k,.hroom__h1,.hroom__h2,.hroom__lead,.hroom__muebles,.hroom__cta,.hroom__soon-tag,.hroom__scrolldown){ opacity:1; transform:none; }
.hroom.is-inview .hroom__logo{ transition-delay:.05s; }
.hroom.is-inview .hroom__k{ transition-delay:.08s; }
.hroom.is-inview :is(.hroom__h1,.hroom__h2){ transition-delay:.18s; }
.hroom.is-inview .hroom__lead{ transition-delay:.3s; }
.hroom.is-inview .hroom__muebles{ transition-delay:.42s; }
.hroom.is-inview :is(.hroom__cta,.hroom__soon-tag,.hroom__scrolldown){ transition-delay:.54s; }
/* línea dorada que crece bajo el claim */
.hroom__k::after{ content:""; display:block; width:0; height:2px; margin-top:7px; background:var(--accent); transition:width .9s cubic-bezier(.2,.7,.2,1) .5s; }
.hroom.is-inview .hroom__k::after{ width:52px; }
/* los muebles de la estancia entran en cascada */
.hroom__muebles .hmueble{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), border-color .15s, box-shadow .15s; }
.hroom.is-inview .hroom__muebles .hmueble{ opacity:1; transform:none; }
.hroom.is-inview .hroom__muebles .hmueble:nth-child(1){ transition-delay:.45s; }
.hroom.is-inview .hroom__muebles .hmueble:nth-child(2){ transition-delay:.55s; }
.hroom.is-inview .hroom__muebles .hmueble:nth-child(3){ transition-delay:.65s; }
.hroom.is-inview .hroom__muebles .hmueble:nth-child(4){ transition-delay:.75s; }
/* collage de fotos flotantes a la derecha */
.hcollage{ position:absolute; right:clamp(96px,13vw,210px); top:50%; transform:translateY(-50%); z-index:2;
  display:flex; flex-direction:column; gap:20px; width:min(23vw,300px); pointer-events:none; }
.hcollage figure{ margin:0; border-radius:16px; overflow:hidden; border:5px solid rgba(255,255,255,.92);
  box-shadow:0 28px 60px rgba(40,32,18,.38); opacity:0; transform:translateY(46px) rotate(2.5deg);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.hcollage figure img{ width:100%; display:block; }
.hcollage figure:nth-child(2){ width:70%; align-self:flex-end; transform:translateY(46px) rotate(-2deg); }
.hroom.is-inview .hcollage figure{ opacity:1; transform:translateY(0) rotate(-1.2deg); }
.hroom.is-inview .hcollage figure:nth-child(1){ transition-delay:.35s; }
.hroom.is-inview .hcollage figure:nth-child(2){ transition-delay:.55s; transform:translateY(0) rotate(1.6deg); }
/* flotación suave continua una vez colocadas */
.hroom.is-inview .hcollage figure{ animation:floaty 7s ease-in-out 1.6s infinite; }
.hroom.is-inview .hcollage figure:nth-child(2){ animation-duration:8.5s; animation-delay:2s; }
@keyframes floaty{ 0%,100%{ margin-top:0; } 50%{ margin-top:-11px; } }
/* indicador de scroll del hero */
.hero-cue{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3;
  width:26px; height:42px; border:2px solid rgba(74,69,58,.5); border-radius:14px; }
.hero-cue::after{ content:""; position:absolute; left:50%; top:7px; width:4px; height:9px; margin-left:-2px;
  border-radius:2px; background:var(--accent); animation:cueDrop 1.9s ease-in-out infinite; }
@keyframes cueDrop{ 0%{ transform:translateY(0); opacity:1; } 72%{ transform:translateY(13px); opacity:0; } 100%{ opacity:0; } }
@media (max-width:1100px){ .hcollage{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .hero-slides i.is-on, .hroom--gen.is-inview::before, .hcollage figure, .hero-cue::after{ animation:none !important; }
}
/* navegación lateral (roadmap) */
.hroad__nav{ position:absolute; right:min(5vw,64px); top:50%; transform:translateY(-50%); z-index:5;
  display:flex; flex-direction:column; gap:30px; align-items:flex-end; }
/* línea vertical que une los puntos del recorrido */
.hroad__nav::before{ content:""; position:absolute; right:8px; top:8px; bottom:8px; width:1.5px; background:rgba(90,80,55,.22); }
.hroad__dot{ position:relative; display:flex; align-items:center; gap:16px; background:none; border:0; cursor:pointer; font:inherit; padding:0; }
.hroad__dot span{ font-family:Georgia,"Times New Roman",serif; font-size:17px; letter-spacing:.4px; color:#4a453a; opacity:.7;
  white-space:nowrap; transition:.2s; text-shadow:0 1px 4px rgba(255,255,255,.65); }
.hroad__dot i{ width:15px; height:15px; border-radius:50%; border:2px solid #a89d80; background:#fff; transition:.2s; flex:none; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.hroad__dot:hover span{ opacity:1; color:var(--accent-dark); }
.hroad__dot:hover i{ border-color:var(--accent); }
.hroad__dot.is-active span{ opacity:1; color:var(--accent-dark); font-weight:700; font-size:19px; }
.hroad__dot.is-active i{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px rgba(168,131,59,.2); }
@media (max-width:720px){ .hroad__nav{ right:14px; gap:20px; } .hroad__dot span{ font-size:14px; } .hroom__inner{ margin-left:22px; } }

/* ---- mensaje del comercial (Pantalla 7) ---- */
.mensaje{ max-width:560px; margin:24px auto; text-align:center; }
.mensaje__ico{ width:54px; height:54px; margin:0 auto 12px; border-radius:50%; background:var(--accent); color:#fff; font-size:28px; display:grid; place-items:center; }
.mensaje p{ color:var(--muted); }
.mensaje-box{ text-align:left; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin:16px 0; }
.mensaje-lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#948e7b; margin-bottom:6px; }
.mensaje-txt{ color:var(--ink); font-size:14px; }

/* el color detalle tiñe los costados del frente 3D */
.mod--costado{ background-color:var(--detail, var(--finish)) !important; }

/* ============ MODO TIENDA: simple e intuitivo ============ */
/* ocultar lo técnico del configurador (combinaciones, cliente/valoración, valor punto) */
.rib--tech{ display:none !important; }
/* ocultar el acabado técnico (pestañas laca/madera + swatches + gloss): el color
   cuerpo se elige con los 5 botones simples */
#acabadoTipos[hidden], .rib__row[hidden]{ display:none !important; }

/* el modelo se elige en el catálogo: en el configurador no se repiten los 10 */
#modelos[hidden]{ display:none !important; }

/* sin tecnicismos en el visor: nada de despiece ni plano técnico para el cliente */
#piecesPanel{ display:none !important; }
.tool[hidden]{ display:none !important; }
.modelo-sel{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modelo-sel__txt{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.modelo-sel__txt strong{ font-size:18px; }
.modelo-sel__txt small{ color:var(--muted); font-size:11px; }

/* color cuerpo: 5 opciones grandes y claras */
.cuerpo-opts{ display:flex; flex-wrap:wrap; gap:9px; }
.cuerpo-sw{ display:flex; flex-direction:column; align-items:center; gap:4px; border:0; background:none; padding:0; cursor:pointer; }
.cuerpo-sw i{ display:block; width:40px; height:40px; border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.12); transition:.15s; }
.cuerpo-sw span{ font-size:10.5px; color:var(--muted); }
.cuerpo-sw:hover i{ transform:scale(1.06); }
.cuerpo-sw.is-active i{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--accent); }
.cuerpo-sw.is-active span{ color:var(--accent-dark); font-weight:700; }

/* precio grande (lo que mira el cliente en tienda) */
.topbar .price__num strong{ font-size:30px; }
.topbar .price__num small{ font-weight:600; }

/* controles más grandes (pantalla táctil de tienda) */
#viewConfig .chip{ padding:9px 14px; font-size:13px; }
#viewConfig .seg{ padding:9px 7px; font-size:12.5px; }
#viewConfig .tool{ padding:9px 14px; font-size:13px; }
.cat-card{ min-height:0; }
.cat-card:active{ transform:translateY(0); }

/* pantallas estrechas: controles arriba, visor abajo (no la columna lateral) */
@media (max-width:920px){
  #viewConfig{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(300px,1fr); }
  #viewConfig .ribbon{ grid-template-columns:repeat(2,1fr); border-right:0; border-bottom:1px solid var(--line); }
  #viewConfig .ribbon .rib{ grid-column:span 1; }
  .cat-card{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
  .cat-card__prev{ max-width:300px; }
  .cat-card__cta{ align-self:start; }
}

/* ============ header + precio ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 22px; background:#211e17; border-bottom:1px solid #000;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand__txt strong{ display:block; font-family:Georgia,"Times New Roman",serif; font-size:18px; letter-spacing:1.5px; color:#f4f0e7; }
.brand__txt small{ color:#b7ae9a; font-size:12px; }
/* topbar oscuro: textos y botones en claro (paleta elegante del catálogo) */
.topbar .price__num small{ color:#b7ae9a; }
.topbar .price__num strong{ color:#fff; }
.topbar .btn--ghost{ color:#e7e1d4; background:transparent; border-color:#4a4436; }
.topbar .btn--ghost:hover{ background:#2f2a20; border-color:var(--accent); color:#fff; }

.price{ display:flex; align-items:center; gap:12px; }
.price__num{ text-align:right; line-height:1.05; }
.price__num small{ display:block; color:var(--muted); font-size:11px; }
.price__num strong{ font-size:24px; font-variant-numeric:tabular-nums; }
.price__pop{ position:relative; }
.popover{
  position:absolute; right:0; top:calc(100% + 8px); z-index:30;
  width:330px; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 40px rgba(48,42,25,.18); padding:10px 14px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s;
}
.popover.open{ opacity:1; visibility:visible; transform:translateY(0); }
.popover ul{ list-style:none; margin:0; padding:0; }
.popover li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:13px; border-bottom:1px dashed var(--line); }
.popover li:last-child{ border-bottom:0; }
.popover li span:last-child{ font-variant-numeric:tabular-nums; white-space:nowrap; }

.btn{ border:0; border-radius:9px; padding:9px 14px; font-size:13px; cursor:pointer; transition:.15s; white-space:nowrap; }
.btn--ghost{ background:#efece2; color:var(--ink); }
.btn--ghost:hover{ background:#e5e1d3; }
.btn--ghost:disabled{ opacity:.45; cursor:default; }
.btn--primary{ background:var(--accent); color:#fff; font-weight:600; box-shadow:0 6px 16px rgba(168,131,59,.35); }
.btn--primary:hover{ background:var(--accent-dark); }

/* ============ ribbon de opciones (encima) ============ */
.ribbon{
  display:grid; grid-template-columns:repeat(12,1fr); gap:10px; padding:12px 18px;
  background:var(--card); border-bottom:1px solid var(--line);
}
.rib{
  grid-column:span 3; min-width:0;
  display:flex; flex-direction:column; gap:8px;
  background:#faf9f4; border:1px solid var(--line); border-radius:12px; padding:9px 12px 11px;
}
.rib--wide{ grid-column:span 6; }
.rib--8{ grid-column:span 8; }
.rib--4{ grid-column:span 4; }
.rib__head{
  font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#948e7b;
  display:flex; gap:6px; align-items:baseline; min-height:14px;
}
.rib__head span{ color:var(--ink); font-weight:600; text-transform:none; letter-spacing:0; }
.rib__hint{ color:var(--muted); font-size:10px; text-transform:none; letter-spacing:0; font-weight:400; }
.rib__note{ color:var(--muted); font-size:10px; line-height:1.3; }
.rib__row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* catálogo de modelos */
.chips--models{ gap:14px; }
.models-group{ display:flex; flex-direction:column; gap:5px; }
.models-group__t{ font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; color:#b0a890; }
.models-group__chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chips--models .chip{ font-variant-numeric:tabular-nums; }
.chips--models .chip b{ display:block; font-weight:600; opacity:.7; margin:1px 0 0; font-size:10px; }

/* nivel de brillo del acabado */
.gloss-tag{ font-size:11px; color:var(--muted); white-space:nowrap; }

/* color por RAL/NCS */
.rib__row--ral{ gap:8px; }
.numin--ral{ width:108px; font-weight:600; letter-spacing:.3px; }
.ralcolor{
  width:34px; height:30px; padding:0; cursor:pointer; background:#fff;
  border:1px solid var(--line); border-radius:7px;
}
.ralcolor::-webkit-color-swatch-wrapper{ padding:3px; }
.ralcolor::-webkit-color-swatch{ border:0; border-radius:4px; }

/* cliente y valoración */
.valr{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.valr__lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:#948e7b; }
#cliente, #valoracion{ flex:0 1 auto; }

/* selector RAL/NCS */
.select--ral{ padding:4px 6px; font-size:11px; }

/* paleta de colores RAL reales */
.ral-palette{
  display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;
  max-height:76px; overflow:auto; padding:2px;
}
.ral-palette[hidden]{ display:none; }
.ral-sw{
  width:20px; height:20px; padding:0; border:0; border-radius:5px; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); transition:transform .1s;
}
.ral-sw:hover{ transform:scale(1.15); }
.ral-sw.is-active{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px var(--accent); }

/* valor del punto editable */
.combi--vp{ gap:6px; align-items:baseline; }
.numin--vp{ width:66px; font-size:18px; color:var(--accent-dark); }
.vp-eur{ font-size:13px; color:var(--muted); }

/* opción 5 (a valorar) y etiqueta de muestra */
.chip--esp.is-active{ background:#9a6c12; border-color:#9a6c12; color:#fff; }
.chip--etq{ margin-top:7px; align-self:flex-start; }
.especial{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.especial[hidden]{ display:none; }
.especial__txt{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:6px 8px;
  font-size:12px; font-family:inherit; resize:vertical; background:#fff; color:var(--ink);
}
.especial__txt:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.14); }
.especial__file{ font-size:11px; color:var(--muted); display:flex; flex-direction:column; gap:3px; }
.especial__file input{ font-size:11px; }

/* combinaciones posibles */
.combi{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.combi strong{ font-size:21px; color:var(--accent-dark); font-variant-numeric:tabular-nums; }
.combi small{ color:var(--muted); font-size:11px; max-width:200px; line-height:1.25; }
.chip.chip--link{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.chip.chip--link:hover{ background:var(--accent-dark); }

/* swatches */
.swatches{ display:flex; gap:9px; flex-wrap:wrap; }
.swatch{ border:0; background:none; padding:0; cursor:pointer; line-height:0; }
.swatch i{
  /* CORRECION 3.10: acabado del CUERPO = cuadrado */
  display:block; width:28px; height:28px; border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.12); transition:.15s;
}
.swatch.is-active i{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--accent); }
.swatches--mat i{ width:34px; height:34px; }

/* swatch "color muestra cliente" */
.sw-custom{
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.10) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.10) 75%),
    linear-gradient(45deg, rgba(0,0,0,.10) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.10) 75%) !important;
  background-size:8px 8px, 8px 8px;
  background-position:0 0, 4px 4px;
}

/* swatch metalizado */
.sw-metal{
  background-image:linear-gradient(125deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 35%,
    rgba(0,0,0,.12) 70%, rgba(255,255,255,.4) 100%) !important;
}

/* chips */
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line); background:#f8f7f1; border-radius:999px;
  padding:6px 12px; font-size:12px; cursor:pointer; transition:.15s; white-space:nowrap;
}
.chip:hover{ border-color:#cdc7b4; }
.chip.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chip b{ font-weight:600; opacity:.75; margin-left:3px; }

/* range */
.range{ width:100%; accent-color:var(--accent); height:5px; margin-top:2px; }

/* entrada numérica del frente */
.rib__head--frente{ align-items:center; gap:6px; }
.numin{
  width:76px; border:1px solid var(--line); border-radius:7px; padding:3px 4px 3px 8px;
  font-size:12.5px; font-weight:700; color:var(--ink); background:#fff;
  font-variant-numeric:tabular-nums;
}
.numin:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.14); }
/* cualquier desplegable con .numin se ajusta a su texto (no al ancho fijo de 76px de los inputs) · revisión 19-sep */
select.numin{ width:auto; min-width:76px; max-width:100%; padding-right:26px; }

/* select (desplegables) */
.select{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:9px; padding:7px 9px; font-size:12px; max-width:100%;
}

/* segmented */
.segmented{ display:flex; gap:6px; }
.seg{
  flex:1 1 0; min-width:0; border:1px solid var(--line); background:#f8f7f1; border-radius:9px;
  padding:7px 6px; cursor:pointer; transition:.15s; font-size:12px; text-align:center; line-height:1.15;
}
.seg:hover{ border-color:#cdc7b4; }
.seg.is-active{ border-color:var(--accent); background:#fff; box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent); font-weight:600; }
.seg small{ display:block; color:var(--muted); font-weight:400; font-size:10px; margin-top:1px; }
.seg.is-active small{ color:var(--accent); }
.segmented--mini .seg{ padding:5px 6px; }

/* ============ visor 3D grande ============ */
.stage-wrap{ min-height:0; padding:16px 18px 18px; }
.stage{
  position:relative; height:100%; border-radius:16px; overflow:hidden;
  display:grid; place-items:center; perspective:1350px;
  background:radial-gradient(120% 85% at 50% 16%, #fcfbf7 0%, #f0ede3 55%, #e0dccd 100%);
  border:1px solid var(--line); box-shadow:var(--shadow);
  cursor:grab; touch-action:none; user-select:none;
  transition:background .5s ease;
}
.stage.is-grabbing{ cursor:grabbing; }

/* pared con retícula (como la foto del catálogo) + suelo */
.stage::before{
  content:""; position:absolute; inset:0 0 26% 0; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(70,60,40,.05) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(-45deg, rgba(70,60,40,.05) 0 1px, transparent 1px 52px);
  transition:opacity .5s;
}
.stage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:26%; pointer-events:none;
  background:linear-gradient(rgba(60,50,30,.07), rgba(60,50,30,0) 45%);
}

/* modo noche */
.stage.is-night{
  background:radial-gradient(120% 85% at 50% 14%, #444033 0%, #2b2820 55%, #181610 100%);
  border-color:#37332a;
}
.stage.is-night::before{
  background:
    repeating-linear-gradient(45deg, rgba(255,244,214,.05) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(-45deg, rgba(255,244,214,.05) 0 1px, transparent 1px 52px);
}
.stage.is-night .drag-hint{ background:rgba(40,37,28,.7); color:#cfc8b4; border-color:#4a463a; }

.scene{
  position:relative; width:1px; height:1px; transform-style:preserve-3d;
  transform:scale(var(--zoom,1)) rotateX(var(--rx,-11deg)) rotateY(var(--ry,16deg));
}
.scene.is-animated{ transition:transform .45s cubic-bezier(.2,.7,.25,1); }

.mueble{
  position:absolute; top:0; left:0; transform-style:preserve-3d;
  --finish:#f2f0e9; --w:490px; --h:79px; --d:78px; --ov:0px; --th:6px;
  transition:--w .4s ease,--h .4s ease,--d .4s ease,--ov .3s ease, transform .45s ease;
}
.mueble.is-vuelo{ --ov:4px; }

/* ---- ambiente montado: FOTO real de habitación como fondo del visor ----
   (fondo fabricado desde la fotografía del catálogo: pared texturizada + suelo)
   por defecto ON; el botón "Solo mueble" (clase sin-ambiente) vuelve al fondo neutro */
.stage:not(.sin-ambiente){
  background:url('img/ambientes/salon-cliente3.jpg') center bottom / cover no-repeat;
}
.stage:not(.sin-ambiente)::before{ opacity:0; }                    /* fuera la retícula */
.stage:not(.sin-ambiente)::after{                                   /* contacto con el suelo */
  background:linear-gradient(rgba(35,28,16,0) 0%, rgba(35,28,16,.16) 100%);
}
/* el mueble baja hasta la franja de suelo de la foto */
.stage:not(.sin-ambiente) .scene{
  transform:translateY(72px) scale(var(--zoom,1)) rotateX(var(--rx,-11deg)) rotateY(var(--ry,16deg));
}
/* sombra más presente sobre la foto (ancla el mueble al suelo real) */
.stage:not(.sin-ambiente) .shadow{ opacity:.92; filter:blur(10px) saturate(.9); }
/* #9 (José 30-sep · PRUEBA) · vista neutra de estudio: fondo gris muy claro, sin retícula ni sombra de contacto */
#stage.estudio{ background:#f2f3f1 !important; }
#stage.estudio::before, #stage.estudio::after{ opacity:0 !important; }
#stage.estudio .shadow{ opacity:0 !important; }
/* modo noche sobre la foto: se atenúa con un velo cálido oscuro */
.stage.is-night:not(.sin-ambiente){
  background:linear-gradient(rgba(24,20,12,.68), rgba(24,20,12,.8)),
    url('img/ambientes/salon-cliente3.jpg') center bottom / cover no-repeat;
}

/* ---- caras del cuerpo ---- */
.bface{
  position:absolute; top:50%; left:50%;
  background:var(--finish);
  background-image:linear-gradient(var(--tint,transparent),var(--tint,transparent));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); overflow:hidden;
  transition:transform .55s cubic-bezier(.45,.05,.2,1);
}
.bface--front,.bface--back{ width:var(--w); height:var(--h); }
.bface--left,.bface--right{ width:var(--d); height:var(--h); }
.bface--bottom{ width:var(--w); height:var(--d); }
.bface--front { transform:translate(-50%,-50%) translateZ(calc(var(--d)/2)); }
.bface--back  { transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--d)/2)); --tint:rgba(0,0,0,.30); }
.bface--right { transform:translate(-50%,-50%) rotateY(90deg)  translateZ(calc(var(--w)/2)); --tint:rgba(0,0,0,.14); }
.bface--left  { transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w)/2)); --tint:rgba(0,0,0,.22); }
.bface--bottom{ transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h)/2)); --tint:rgba(0,0,0,.5); }

/* veta de madera sobre el acabado */
.is-wood .bface,
.is-wood .mod--puerta, .is-wood .mod--costado,
.is-wood .dr{
  background-image:
    repeating-linear-gradient(90deg, rgba(92,61,26,.10) 0 2px, transparent 2px 7px,
      rgba(92,61,26,.05) 7px 9px, transparent 9px 14px);
}

/* reflejo según brillo del lacado */
.is-glossy .mod--puerta, .is-glossy .mod--costado, .is-glossy .dr{
  background-image:linear-gradient(112deg, transparent 40%, rgba(255,255,255,.26) 50%, transparent 60%);
}
.is-glossy-hi .mod--puerta, .is-glossy-hi .mod--costado, .is-glossy-hi .dr{
  background-image:linear-gradient(112deg, transparent 34%, rgba(255,255,255,.46) 50%, transparent 66%);
}
.is-glossy .tface--front, .is-glossy-hi .tface--front{ filter:saturate(1.04); }

/* acabado metalizado: ligero brillo metálico en los frentes */
.is-metal .mod--puerta, .is-metal .mod--costado, .is-metal .mod--cajon .dr{
  background-image:linear-gradient(120deg, rgba(255,255,255,.38) 0%, transparent 32%, transparent 68%, rgba(0,0,0,.10) 100%);
}

/* ---- frente: módulos parametrizados (interior visible al abrir) ---- */
.bface--front{
  background:linear-gradient(#3b382f, #2e2b24);
  overflow:visible; transform-style:preserve-3d;
}
.bface--front::before{ /* balda interior insinuada */
  content:""; position:absolute; left:2%; right:2%; top:49%; height:2px;
  background:rgba(255,255,255,.10);
}
.mods{
  position:absolute; inset:0 0 5% 0;
  display:flex; gap:2px; padding:2px;
  transform-style:preserve-3d;
}
.mod{
  position:relative; flex:1 1 0; min-width:0;
  background-color:var(--finish);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07), inset 0 -6px 12px rgba(0,0,0,.05);
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.3,.8,.3,1);
  backface-visibility:visible;
}
.mod--costado::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,.20) 0 2px, rgba(255,255,255,.14) 2px 3px, transparent 3px 8px);
}
.mod--puerta .gola{
  position:absolute; left:8%; right:8%; top:7px; height:3px;
  background:rgba(0,0,0,.30); border-radius:2px;
}
.mod--cajon{
  display:flex; flex-direction:column; gap:2px;
  background:transparent; box-shadow:none; padding:0;
  transform-style:preserve-3d;
}
.mod--cajon .dr{
  position:relative; flex:1 1 0;
  background-color:var(--finish);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07), inset 0 -5px 9px rgba(0,0,0,.06);
  transition:transform .7s cubic-bezier(.3,.8,.3,1), box-shadow .7s;
}
.mod--cajon .dr::after{
  content:""; position:absolute; left:30%; right:30%; top:6px; height:3px;
  background:rgba(0,0,0,.28); border-radius:2px;
}
.mod--esp .dr:first-child{
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(180,148,84,.4) 39.5%, transparent 41%),
    linear-gradient(0deg, rgba(255,255,255,.5), rgba(255,255,255,.5));
}
.usb{
  position:absolute; right:6px; bottom:5px; z-index:1;
  font-size:7px; font-weight:700; letter-spacing:.5px; color:#fff;
  background:#3a382f; border-radius:3px; padding:1px 4px;
}

/* compensador / faja ciega (sobrante junto a chimenea) */
.mod--comp{
  background:repeating-linear-gradient(45deg, #4c483d 0 4px, #3a372f 4px 8px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}

/* tiradores */
.h-laton .mod--puerta .gola{
  left:30%; right:30%; top:9px; height:4px; border-radius:2px;
  background:var(--laton);
}
.h-laton .mod--cajon .dr::after{
  left:36%; right:36%; height:4px; background:var(--laton);
}
.h-unero .mod--puerta .gola{
  left:0; right:0; top:0; height:6px; border-radius:0;
  background:linear-gradient(rgba(0,0,0,.32), transparent);
}
.h-unero .mod--cajon .dr::after{
  left:0; right:0; top:0; height:6px; border-radius:0;
  background:linear-gradient(rgba(0,0,0,.32), transparent);
}

/* apertura de frentes */
.is-open .mod.open-l{ transform:rotateY(-76deg); transform-origin:left center; }
.is-open .mod.open-r{ transform:rotateY(76deg); transform-origin:right center; }
.is-open .mod--cajon{ transform:none; }
.is-open .mod--cajon .dr:first-child{ transform:translateZ(34px); transition-delay:.05s; }
.is-open .mod--cajon .dr:last-child{ transform:translateZ(20px); }
.is-open .mod--cajon .dr{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07), inset 0 -5px 9px rgba(0,0,0,.06),
    0 16px 18px -8px rgba(0,0,0,.35);
}

/* chimenea: hueco con fuego */
.mod--chimenea{
  background:radial-gradient(120% 90% at 50% 20%, #2c2722 0%, #17130f 70%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.5), inset 0 6px 14px rgba(0,0,0,.8);
  overflow:hidden;
}
.chim-tag{
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  font-size:7px; letter-spacing:1px; color:#9b948a; white-space:nowrap;
}
.brasa{
  position:absolute; left:12%; right:12%; bottom:10%; height:18%;
  background:linear-gradient(#4a3526,#241a12); border-radius:3px;
}
.flame{
  position:absolute; left:22%; right:22%; top:30%; bottom:18%;
  border-radius:50% 50% 42% 42%;
  background:radial-gradient(ellipse at 50% 80%, #ffd98a 0%, #ff8c2e 38%, rgba(255,80,10,.55) 65%, transparent 80%);
  filter:blur(3px); opacity:0; transform-origin:50% 100%;
  transition:opacity .3s ease;
}
.is-fire .flame{ opacity:1; animation:flick 1.5s ease-in-out infinite; }
.is-fire .mod--chimenea{
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.5), inset 0 6px 14px rgba(0,0,0,.8),
    inset 0 -10px 28px rgba(255,120,30,.45);
}
@keyframes flick{
  0%,100%{ transform:scaleY(1) scaleX(1); opacity:.85; }
  50%{ transform:scaleY(1.12) scaleX(1.05); opacity:1; }
}

/* zócalo y tira LED */
.zocalo{
  position:absolute; left:0; right:0; bottom:0; height:5%;
  background:#2c2922;
}
.base-patas .zocalo, .base-susp .zocalo, .base-colgado .zocalo{ display:none; }
/* patas metálicas (representación en el visor 3D) */
.base-patas .bface--front::after{
  content:""; position:absolute; bottom:-12%; left:8%; right:8%; height:12%; pointer-events:none;
  background:
    linear-gradient(#4b4638,#221d14) left/3.2% 100% no-repeat,
    linear-gradient(#4b4638,#221d14) right/3.2% 100% no-repeat;
}
.ledbar{
  position:absolute; top:0; left:3%; right:3%; height:2px; opacity:0; transition:opacity .3s;
  background:linear-gradient(90deg, transparent, #ffe9b8 18%, #ffe9b8 82%, transparent);
  box-shadow:0 2px 14px 3px rgba(255,214,130,.85);
}
.has-led .ledbar{ opacity:1; }

/* patas de latón */
.legs i{
  position:absolute; top:50%; left:50%; width:5px; height:26px; display:none;
  background:linear-gradient(#caa75c,#8a6a2c); border-radius:0 0 2px 2px;
}
.base-patas .legs i{ display:block; }
.legs i:nth-child(1){ transform:translate(-50%,0) translateY(calc(var(--h)/2 - 2px)) translateX(calc(var(--w)/-2 + 18px)) translateZ(calc(var(--d)/2 - 12px)); }
.legs i:nth-child(2){ transform:translate(-50%,0) translateY(calc(var(--h)/2 - 2px)) translateX(calc(var(--w)/2 - 18px))  translateZ(calc(var(--d)/2 - 12px)); }
.legs i:nth-child(3){ transform:translate(-50%,0) translateY(calc(var(--h)/2 - 2px)) translateX(calc(var(--w)/-2 + 18px)) translateZ(calc(var(--d)/-2 + 12px)); filter:brightness(.55); }
.legs i:nth-child(4){ transform:translate(-50%,0) translateY(calc(var(--h)/2 - 2px)) translateX(calc(var(--w)/2 - 18px))  translateZ(calc(var(--d)/-2 + 12px)); filter:brightness(.55); }

/* ---- tapa (encimera): material + volado ---- */
.tface{
  position:absolute; top:50%; left:50%;
  background-color:var(--finish, #f4f1e8);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  transition:transform .55s cubic-bezier(.45,.05,.2,1), width .4s ease, height .4s ease;
}
.tface--top{
  width:calc(var(--w) + var(--ov)*2); height:calc(var(--d) + var(--ov)*2);
  transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--h)/2 + var(--th)));
}
.tface--front,.tface--back{
  width:calc(var(--w) + var(--ov)*2); height:var(--th);
}
.tface--left,.tface--right{
  width:calc(var(--d) + var(--ov)*2); height:var(--th);
}
.tface--front{ transform:translate(-50%,-50%) translateY(calc(-1*(var(--h) + var(--th))/2)) translateZ(calc(var(--d)/2 + var(--ov))); }
.tface--back { transform:translate(-50%,-50%) translateY(calc(-1*(var(--h) + var(--th))/2)) rotateY(180deg) translateZ(calc(var(--d)/2 + var(--ov))); filter:brightness(.7); }
.tface--right{ transform:translate(-50%,-50%) translateY(calc(-1*(var(--h) + var(--th))/2)) rotateY(90deg)  translateZ(calc(var(--w)/2 + var(--ov))); filter:brightness(.86); }
.tface--left { transform:translate(-50%,-50%) translateY(calc(-1*(var(--h) + var(--th))/2)) rotateY(-90deg) translateZ(calc(var(--w)/2 + var(--ov))); filter:brightness(.78); }

/* perfil de latón bajo la tapa */
.tface--front::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--laton);
}

/* tapa: por defecto sigue el acabado del cuerpo; con acabado elegido usa su color
   de variante (--tapa) y una TEXTURA según la familia (CORRECION: textura real) */
.is-porcelanico .tface{ background-color:var(--tapa, #f4f1e8) !important; }
/* porcelánico: vetas de mármol */
.tex-porcelanico .tface{
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(180,148,84,.30) 39%, transparent 41%),
    linear-gradient(95deg, transparent 60%, rgba(160,134,74,.22) 61.5%, transparent 63%),
    linear-gradient(118deg, transparent 76%, rgba(140,140,148,.18) 77%, transparent 79%);
}
/* madera: veta longitudinal */
.tex-madera .tface{
  background-image:
    repeating-linear-gradient(92deg, rgba(94,62,28,.14) 0 2px, transparent 2px 11px, rgba(94,62,28,.08) 11px 13px, transparent 13px 26px),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 30%);
}
/* laca: superficie lisa con brillo */
.tex-laca .tface{
  background-image:linear-gradient(115deg, rgba(255,255,255,.35) 0%, transparent 32%, rgba(255,255,255,.12) 58%, transparent 75%);
}
/* símil piedra: moteado */
.tex-piedra .tface{
  background-image:
    radial-gradient(circle at 18% 32%, rgba(90,84,70,.16) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 62% 58%, rgba(90,84,70,.13) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 84% 22%, rgba(255,255,255,.20) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 38% 78%, rgba(60,56,46,.12) 0 1.3px, transparent 2.3px);
  background-size:46px 46px, 34px 34px, 52px 52px, 40px 40px;
}
/* selector de variantes del acabado de tapa */
.tapa-vars{ display:flex; gap:7px; width:100%; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.tapa-var{ display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:none; padding:0; cursor:pointer; font:inherit; }
.tapa-var i{ display:block; width:26px; height:26px; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transition:.15s; }
.tapa-var span{ font-size:9.5px; color:var(--muted); }
.tapa-var:hover i{ transform:scale(1.08); }
.tapa-var.is-active i{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--accent); }
.tapa-var.is-active span{ color:var(--accent-dark); font-weight:700; }

/* ---- decoración sobre la tapa ---- */
.deco{ pointer-events:none; transition:opacity .3s; }
.deco i{ position:absolute; top:50%; left:50%; }
.is-exploded .deco, .is-open .deco{ opacity:0; }
.deco__vase{
  width:18px; height:30px;
  transform:translate(-50%,-100%) translateY(calc(var(--h)/-2 - var(--th))) translateX(calc(var(--w)*0.18));
  background:radial-gradient(circle at 35% 25%, #d9d7c4, #a9a78d);
  border-radius:50% 50% 46% 46% / 70% 70% 30% 30%;
}
.deco__books{
  width:32px; height:15px;
  transform:translate(-50%,-100%) translateY(calc(var(--h)/-2 - var(--th))) translateX(calc(var(--w)*0.30));
  background:linear-gradient(#a8623e 0 5px, #5c6e5a 5px 10px, #3c3a35 10px 15px);
  border-radius:1px;
}
.deco__lamp{
  width:3px; height:32px;
  transform:translate(-50%,-100%) translateY(calc(var(--h)/-2 - var(--th))) translateX(calc(var(--w)*-0.28));
  background:linear-gradient(#9d8c6a,#6f6248);
}
.deco__lamp::before{
  content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  width:24px; height:15px; border-radius:6px 6px 8px 8px;
  background:linear-gradient(#f2e6c8,#e3cf9f);
  transition:box-shadow .4s, background .4s;
}
.deco__lamp::after{
  content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:14px; height:3px; border-radius:2px; background:#6f6248;
}
.is-night .deco__lamp::before{
  background:linear-gradient(#ffe9b8,#f3d489);
  box-shadow:0 8px 30px 8px rgba(255,216,140,.55);
}

/* ---- despiece: cada cara se aleja por su normal; la tapa sube ---- */
.is-exploded .bface--front { transform:translate(-50%,-50%) translateZ(calc(var(--d)/2 + 64px)); }
.is-exploded .bface--back  { transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--d)/2 + 64px)); }
.is-exploded .bface--right { transform:translate(-50%,-50%) rotateY(90deg)  translateZ(calc(var(--w)/2 + 64px)); }
.is-exploded .bface--left  { transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w)/2 + 64px)); }
.is-exploded .bface--bottom{ transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h)/2 + 64px)); }
.is-exploded .tface--top   { transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--h)/2 + var(--th) + 80px)); }
.is-exploded .tface--front { transform:translate(-50%,-50%) translateY(calc(-1*(var(--h) + var(--th))/2 - 80px)) translateZ(calc(var(--d)/2 + var(--ov))); }
.is-exploded .tface--back  { transform:translate(-50%,-50%) translateY(calc(-1*(var(--h) + var(--th))/2 - 80px)) rotateY(180deg) translateZ(calc(var(--d)/2 + var(--ov))); }
.is-exploded .tface--right { transform:translate(-50%,-50%) translateY(calc(-1*(var(--h) + var(--th))/2 - 80px)) rotateY(90deg)  translateZ(calc(var(--w)/2 + var(--ov))); }
.is-exploded .tface--left  { transform:translate(-50%,-50%) translateY(calc(-1*(var(--h) + var(--th))/2 - 80px)) rotateY(-90deg) translateZ(calc(var(--w)/2 + var(--ov))); }

.shadow{
  position:absolute; top:50%; left:50%;
  width:calc(var(--w) * 1.3); height:calc(var(--d) * 1.2);
  background:radial-gradient(ellipse at center,rgba(40,32,16,.30),rgba(40,32,16,0) 70%);
  transform:translate(-50%,-50%) translateY(calc(var(--h)/2 + 10px)) rotateX(90deg); filter:blur(3px);
  transition:transform .45s ease, opacity .45s ease;
}
.base-patas .shadow{ transform:translate(-50%,-50%) translateY(calc(var(--h)/2 + 34px)) rotateX(90deg); opacity:.8; }
.base-colgado .shadow{ transform:translate(-50%,-50%) translateY(calc(var(--h)/2 + 46px)) rotateX(90deg) scale(.9); opacity:.5; }
.base-susp .shadow{ transform:translate(-50%,-50%) translateY(calc(var(--h)/2 + 44px)) rotateX(90deg) scale(.92); opacity:.55; }
.is-night .shadow{ opacity:.85; }

/* ---- plano técnico 2D ---- */
.plano{ display:none; width:min(92%, 920px); max-height:82%; }
.stage.is-plano{ cursor:default; }
.stage.is-plano .scene, .stage.is-plano .drag-hint{ display:none; }
.stage.is-plano .plano{ display:block; }
.stage.is-night.is-plano .plano rect, .stage.is-night.is-plano .plano line{ stroke:#d8d2c0; }
.stage.is-night.is-plano .plano text{ fill:#d8d2c0; }
.plano text{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

/* cotas editables y parpadeantes (PASO 3-6: cambiar cotas / parpadea cada cota) */
.plano .cota{ cursor:pointer; animation:cotaBlink 1.5s ease-in-out infinite; }
.plano .cota:hover{ fill:var(--accent) !important; text-decoration:underline; }
@keyframes cotaBlink{ 0%,100%{ opacity:1; } 55%{ opacity:.4; } }

.cota-input{
  position:absolute; z-index:8; width:60px; padding:3px 5px;
  border:1px solid var(--accent); border-radius:6px; font-size:13px; font-weight:700;
  text-align:center; background:#fff; color:var(--ink); box-shadow:0 4px 12px rgba(0,0,0,.2);
  font-variant-numeric:tabular-nums;
}
.cota-input[hidden]{ display:none; }
/* pista de rango permitido al editar una cota */
.cota-minmax{ position:absolute; z-index:9; transform:translate(-50%,-100%); white-space:nowrap;
  background:#211e17; color:#ffe9b8; font-size:11.5px; font-weight:700; letter-spacing:.4px;
  padding:5px 11px; border-radius:7px; box-shadow:0 6px 16px rgba(0,0,0,.3); pointer-events:none; }
.cota-minmax[hidden]{ display:none; }

.plano-hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--muted); background:rgba(255,255,255,.8);
  padding:5px 12px; border-radius:999px; border:1px solid var(--line);
  pointer-events:none; display:none;
}
.stage.is-plano .plano-hint{ display:block; }
.stage.is-night.is-plano .plano-hint{ background:rgba(40,37,28,.7); color:#cfc8b4; border-color:#4a463a; }

/* ---- visor 3D real: GLB de fábrica en el stage (LAC 192.01 · 24-jul) ---- */
/* escenario de estudio generado = fondo NEUTRO premium del 3D real;
   "Ver en ambiente" cambia a la foto real (momento de presentar) */
.stage.is-glb{
  background:url('img/ambientes/estudio-glb.jpg') center bottom / cover no-repeat;
}
.stage.is-glb::before{ opacity:0; } /* sin retícula sobre el estudio */
/* reunión 1-ago: fondo de presentación ÚNICO (el 2), sin selector */
.stage.is-glb:not(.sin-ambiente){
  background:url('img/ambientes/salon-cliente2.jpg') center bottom / cover no-repeat;
}
.stage.is-glb.fondo-1:not(.sin-ambiente){ background:url('img/ambientes/salon-cliente1.jpg') center bottom / cover no-repeat; }
.stage.is-glb.fondo-2:not(.sin-ambiente){ background:url('img/ambientes/salon-cliente2.jpg') center bottom / cover no-repeat; }
.stage.is-glb.fondo-3:not(.sin-ambiente){ background:url('img/ambientes/salon-cliente3.jpg') center bottom / cover no-repeat; }
/* ★ t17 (José 22-oct · regla 6): el mueble va CENTRADO en el visor y es la FOTO del ambiente la que se coloca, con su línea pared/suelo
   bajo el pie del mueble (glb3d.js · fondoAlSuelo escribe --fondo-tam y --fondo-pos en el escenario; sin ellas, como antes) */
.stage.is-glb.fondo-1:not(.sin-ambiente), .stage.is-glb.fondo-2:not(.sin-ambiente), .stage.is-glb.fondo-3:not(.sin-ambiente), .stage.is-glb.sin-ambiente{
  background-size:var(--fondo-tam, cover); background-position:var(--fondo-pos, center bottom); }
@property --fondo-tam { syntax:'*'; inherits:false; }   /* sin herencia: al hacer zoom solo se recalcula el escenario, no todo lo que lleva dentro */
@property --fondo-pos { syntax:'*'; inherits:false; }
.stage.is-night.is-glb{
  background:linear-gradient(rgba(24,20,12,.62), rgba(24,20,12,.74)),
    url('img/ambientes/estudio-glb.jpg') center bottom / cover no-repeat;
}
.stage.is-night.is-glb:not(.sin-ambiente),
.stage.is-night.is-glb.fondo-3:not(.sin-ambiente){
  background:linear-gradient(rgba(24,20,12,.68), rgba(24,20,12,.8)),
    url('img/ambientes/salon-cliente3.jpg') center bottom / cover no-repeat;
}
.stage.is-night.is-glb.fondo-1:not(.sin-ambiente){
  background:linear-gradient(rgba(24,20,12,.68), rgba(24,20,12,.8)),
    url('img/ambientes/salon-cliente1.jpg') center bottom / cover no-repeat;
}
.stage.is-night.is-glb.fondo-2:not(.sin-ambiente){
  background:linear-gradient(rgba(24,20,12,.68), rgba(24,20,12,.8)),
    url('img/ambientes/salon-cliente2.jpg') center bottom / cover no-repeat;
}
.fondo-sel{ position:absolute; top:56px; right:14px; z-index:4;
  display:flex; align-items:center; gap:5px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(6px); border:1px solid var(--line);
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.fondo-sel[hidden]{ display:none; }
.fondo-sel button{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  background:#fff; font:inherit; font-size:12px; font-weight:700; color:#4a4436; cursor:pointer; transition:.15s; }
.fondo-sel button:hover{ border-color:var(--accent); }
.fondo-sel button.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.stage-glb{ display:none; }
/* reunión 1-ago: el dibujo CSS antiguo NO debe verse ni un instante al abrir el
   3D real (daba un "flash de la versión antigua"). Se retira EN CUANTO se entra en
   modo GLB; mientras baja el .glb se ve solo el ambiente + la nota "Cargando 3D…". */
.stage.is-glb .scene,
.stage.is-glb .plano,
.stage.is-glb .drag-hint,
.stage.is-glb .plano-hint,
.stage.is-glb .pieces{ display:none !important; }
/* mientras carga el GLB, el ambiente se ve algo atenuado para que la nota destaque */
.stage.is-glb:not(.is-glb-listo){ filter:saturate(.92) brightness(.97); }
.stage-glb__nota.is-cargando{ animation:notaPulso 1.4s ease-in-out infinite;
  bottom:auto; top:50%; left:50%; transform:translate(-50%,-50%); font-size:14px; padding:11px 18px; }
@keyframes notaPulso{ 0%,100%{ opacity:1 } 50%{ opacity:.62 } }
/* herramientas del 3D CSS que no aplican al GLB (girar/zoom van en el propio visor) */
.stage.is-glb #openToggle, .stage.is-glb #spinToggle, .stage.is-glb #viewReset,
.stage.is-glb #explodeBtn, .stage.is-glb #planoBtn, .stage.is-glb #fireToggle{ display:none; }
.stage.is-glb .stage-glb{ display:block; position:absolute; inset:0; z-index:2; }
/* barra de cotas editables del 3D real (arriba, centrada, sin tapar el mueble) */
.stage.is-glb .dims{ display:none; }  /* la barra sustituye a las cápsulas informativas */
.glb-cotas{ position:absolute; top:14px; left:14px; z-index:4;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; max-width:92%;
  padding:11px 18px; border-radius:12px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px); border:1px solid var(--line); }
.glb-cotas[hidden]{ display:none; }
.gc-m{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 4px;
  font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.gc-m input{ width:78px; text-align:center; font:inherit; font-size:19px; font-weight:700;
  color:var(--ink, #262215); border:1px solid var(--line); border-radius:8px; padding:6px 2px; background:#fff; }
.gc-m input:focus{ outline:2px solid var(--accent); border-color:var(--accent); }
.glb-cotas__mods{ display:flex; gap:16px; padding:0 14px; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.glb-cotas__cm{ color:var(--muted); font-size:11px; }
.gc-r{ font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.02em; text-transform:none; }
@media (max-width:1100px){ .glb-cotas{ max-width:94%; } }
.stage-glb__lienzo{ position:absolute; inset:0; }
.stage-glb__lienzo canvas{ display:block; width:100%; height:100%; cursor:grab; }
.stage-glb__lienzo canvas:active{ cursor:grabbing; }
.stage-glb__nota{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3;
  padding:6px 16px; border-radius:999px; white-space:nowrap; font-size:12px;
  background:rgba(24,21,15,.55); color:#efe9d8; backdrop-filter:blur(4px); }
/* aviso: la medida elegida no es la del 3D estándar (clic → Ver dibujo) */
.stage-glb__nota--aviso{ background:rgba(112,74,22,.82); border:1px solid var(--accent);
  color:#ffe9c4; white-space:normal; max-width:84%; text-align:center; cursor:pointer; }
.stage-glb__nota--aviso:hover{ background:rgba(140,94,30,.9); }
.tool--glb[aria-pressed="true"]{ background:#fff; border-color:var(--accent); color:var(--accent); }

/* ---- visor foto real: renders de fábrica (correos 09-jul) ---- */
.photo-stage{ display:none; }
.stage.is-foto{ cursor:default; }
.stage.is-foto .scene,
.stage.is-foto .plano,
.stage.is-foto .drag-hint,
.stage.is-foto .plano-hint,
.stage.is-foto .pieces{ display:none !important; }
.stage.is-foto .photo-stage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:absolute; inset:0; padding:16px 16px 64px; gap:12px; z-index:2;
}
/* en modo foto solo aplica "Ver 3D": ocultar herramientas del visor 3D */
.stage.is-foto .stage__tools .tool:not(.tool--foto){ display:none; }
.photo-base{
  max-width:94%; max-height:78%; object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.16));
}
.photo-layers{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.photo-layer{ margin:0; width:96px; text-align:center; font-size:10px; color:#6b6552; }
.photo-layer img{
  width:96px; height:70px; object-fit:contain; background:#fff;
  border:1px solid #e6e2d5; border-radius:9px; padding:3px;
}
.photo-layer figcaption{ margin-top:3px; line-height:1.2; }
.photo-caption{ font-size:12px; color:#7a745f; letter-spacing:.02em; text-align:center; }
.stage.is-night.is-foto .photo-caption{ color:#cfc8b4; }
.tool--foto[aria-pressed="true"]{ background:#fff; border-color:var(--accent); color:var(--accent); }
/* render de escena completa: llena el visor (render ejemplo SMEG010) */
.stage.is-foto .photo-stage.photo-full{ padding:0; }
.photo-stage.photo-full .photo-base{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; max-height:none; object-fit:cover; filter:none;
}
.photo-stage.photo-full .photo-caption{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  padding:6px 16px; border-radius:999px; white-space:nowrap;
  background:rgba(24,21,15,.55); color:#efe9d8; backdrop-filter:blur(4px);
}
/* render aún no recibido de fábrica: aviso elegante en vez de imagen rota */
.photo-stage.photo-missing .photo-base,
.photo-stage.photo-missing .photo-layers{ display:none !important; }
.photo-stage.photo-missing::before{
  content:"Render fotográfico en preparación en fábrica — muy pronto disponible";
  font-family:"Cormorant Garamond", Georgia, serif; font-size:20px; font-style:italic;
  color:#7a745f; text-align:center; max-width:420px; line-height:1.5;
  padding:26px 34px; border:1px solid #e0dbca; border-radius:14px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(3px);
}

/* ---- panel de despiece (siempre visible, fijo a la izquierda) ---- */
.pieces{
  position:absolute; left:14px; top:76px; z-index:5;
  width:264px; max-height:calc(100% - 96px);
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.93); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:12px; padding:8px 12px 9px;
}
.pieces__head{
  display:flex; align-items:baseline; gap:8px; width:100%;
  border:0; background:none; padding:2px 0; cursor:pointer; text-align:left;
  font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#948e7b;
}
.pieces__head span:last-of-type{ color:var(--accent-dark); font-weight:700; text-transform:none; letter-spacing:0; }
.pieces__chev{ margin-left:auto; font-style:normal; color:var(--muted); transition:transform .2s; }
.pieces.is-collapsed .pieces__chev{ transform:rotate(-90deg); }
.pieces.is-collapsed .pieces__body{ display:none; }
.pieces__body{ overflow:auto; margin-top:5px; }
.pieces__table{ width:100%; border-collapse:collapse; font-size:11.5px; }
.pieces__table td{ padding:3px 0; border-bottom:1px dashed #eceadf; vertical-align:top; }
.pieces__table tr:last-child td{ border-bottom:0; }
.pieces__table td:first-child{ width:26px; font-weight:700; color:var(--accent-dark); }
.pieces__table td:last-child{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pieces__table small{ color:var(--muted); }
.pieces__note{ display:block; margin-top:7px; color:var(--muted); font-size:10px; line-height:1.35; }
.pieces__warns{
  margin-top:7px; padding:5px 8px; font-size:10.5px; line-height:1.4; color:#9a6c12;
  background:#fdf3e2; border:1px solid #f0ddb4; border-radius:8px;
}
.pieces__warns:empty{ display:none; }

/* dims overlay */
.dims{ position:absolute; top:14px; left:14px; display:flex; gap:8px; z-index:3; }
.dim{ background:rgba(255,255,255,.85); backdrop-filter:blur(6px); border:1px solid var(--line);
  border-radius:10px; padding:7px 11px; text-align:center; min-width:58px; }
.dim span{ display:block; font-size:16px; font-weight:700; line-height:1.1; }
.dim small{ color:var(--muted); font-size:10px; }
.dim--ref span{ font-size:12px; padding-top:3px; }
.dim--ref small{ color:var(--accent); font-weight:700; }
.dim--warn{ background:#fdf3e2; border-color:#e7c98e; cursor:help; }
.dim--warn span{ color:#b07816; font-size:15px; }
.dim--warn small{ color:#9a6c12; font-weight:700; }

/* tools + hint */
.stage__tools{
  position:absolute; top:14px; right:14px; display:flex; gap:7px;
  flex-wrap:wrap; justify-content:flex-end; max-width:56%; z-index:3;
}
.tool{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.88);
  backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:999px;
  padding:7px 12px; font-size:12.5px; color:var(--ink); cursor:pointer; transition:.15s; }
.tool:hover{ border-color:#cdc7b4; }
.tool.is-busy{ pointer-events:none; opacity:.55; }
.tool:disabled{ opacity:.45; cursor:not-allowed; }
.tool .dot{ width:9px; height:9px; border-radius:50%; background:#c4bda9; transition:.2s; }
.tool[aria-pressed="true"]{ background:#fff; border-color:var(--accent); color:var(--accent); }
.tool[aria-pressed="true"] .dot{ background:#ff8c2e; box-shadow:0 0 8px #ff8c2e; }

.drag-hint{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--muted); background:rgba(255,255,255,.75);
  padding:5px 12px; border-radius:999px; pointer-events:none; transition:opacity .4s, background .4s; border:1px solid var(--line); }
.drag-hint.hide{ opacity:0; }

/* ============ modal tarifa de combinaciones ============ */
.modal{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px;
  background:rgba(28,25,18,.45); backdrop-filter:blur(3px);
}
.modal[hidden]{ display:none; }
.modal__card{
  width:min(1100px,96vw); height:min(700px,92vh);
  background:#fff; border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.modal__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:14px 18px 12px; border-bottom:1px solid var(--line);
}
.modal__head strong{ font-size:16px; }
.modal__head small{ display:block; color:var(--muted); font-size:11.5px; margin-top:4px; max-width:640px; line-height:1.4; }
.modal__actions{ display:flex; gap:8px; flex-shrink:0; }
.modal__filters{
  display:flex; gap:12px; align-items:end; flex-wrap:wrap;
  padding:10px 18px; border-bottom:1px solid var(--line); background:#faf9f4;
}
.modal__filters label{
  display:flex; flex-direction:column; gap:4px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#948e7b;
}
.modal__count{ margin-left:auto; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.modal__tablewrap{ flex:1; overflow:auto; }
.ttable{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:880px; }
.ttable thead th{
  position:sticky; top:0; z-index:1; background:#f3f1e9;
  padding:9px 12px; text-align:left; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:#7a7461; cursor:pointer; user-select:none; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.ttable thead th:hover{ color:var(--accent-dark); }
.ttable thead th.sorted-asc::after{ content:" ▲"; color:var(--accent); }
.ttable thead th.sorted-desc::after{ content:" ▼"; color:var(--accent); }
.ttable th.num, .ttable td.num{ text-align:right; }
.ttable tbody td{ padding:6px 12px; border-bottom:1px solid #f2f0e8; white-space:nowrap; }
.ttable tbody tr:hover{ background:#faf8ef; }
.ttable td.precio{ font-weight:700; color:var(--accent-dark); font-variant-numeric:tabular-nums; }
/* columna de precio siempre visible aunque haya scroll horizontal */
.ttable th:last-child, .ttable td:last-child{
  position:sticky; right:0; background:#f3f1e9;
  box-shadow:inset 3px 0 4px -3px rgba(48,42,25,.25);
}
.ttable tbody td:last-child{ background:#fff; }
.ttable tbody tr:hover td:last-child{ background:#faf8ef; }
.ttable thead th:last-child{ z-index:2; }
.modal__foot{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:10px; border-top:1px solid var(--line); background:#faf9f4;
}
.modal__foot span{ font-size:13px; color:var(--muted); min-width:140px; text-align:center; font-variant-numeric:tabular-nums; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:14px 20px; border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:.3s; max-width:90vw; font-size:14px; z-index:95; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============ acceso (login demo) ============ */
.login{
  /* 26-sep (José): en MÓVIL el formulario de alta es largo y no se podía bajar.
     `place-items:center` sin overflow recortaba arriba/abajo. Ahora `display:flex` +
     `overflow-y:auto` + `margin:auto` en la tarjeta: centra cuando cabe y SCROLLEA cuando
     es más alta que la pantalla. */
  position:fixed; inset:0; z-index:100; display:flex; overflow-y:auto; padding:20px;
  background:radial-gradient(circle at 50% -10%, #f8f6ef, #e6e2d3);
}
.login.hide{ display:none; }
/* 27-sep (José): el atributo `hidden` del #login NO funcionaba porque `.login{display:flex}`
   lo pisaba → en el 1er pintado (antes de que el JS añada .hide) el login se veía a pantalla
   completa y PARPADEABA en cada carga del SPA (p.ej. al volver de una página estática).
   Con esto el `hidden` manda y el login nace oculto; el JS lo muestra solo si hace falta. */
.login[hidden]{ display:none !important; }
.login__card{
  width:min(360px,92vw); margin:auto; background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:26px 24px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.login__card .brand{ margin-bottom:4px; }
.login__field{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.login__field input{
  border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:14px;
  color:var(--ink); background:#f8f7f1; outline:none; transition:.15s;
}
.login__field input:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(168,131,59,.14); }
.login__error{ margin:0; font-size:12.5px; color:#b3142a; font-weight:600; }
.login__card .btn{ margin-top:4px; }

/* ============ ficha técnica imprimible ============ */
.ficha{ display:none; }
@media print{
  html, body{ height:auto; overflow:visible; background:#fff; }
  .app, .login, .toast, .modal, .cmodal, .glbdemo{ display:none !important; }
  .ficha{
    display:block; color:#222; font-size:12px; line-height:1.45;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  .ficha header{
    display:flex; justify-content:space-between; align-items:flex-end;
    border-bottom:2px solid #222; padding-bottom:8px; margin-bottom:14px;
  }
  .ficha h1{ margin:0; font-size:20px; letter-spacing:.5px; }
  .ficha header p{ margin:2px 0 0; color:#666; }
  .ficha__meta{ text-align:right; color:#444; }
  .ficha h2{ margin:0 0 10px; font-size:16px; }
  .ficha h3{ margin:16px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:#8a6a2c; }
  .ficha table{ width:100%; border-collapse:collapse; }
  .ficha th, .ficha td{ border:1px solid #ccc; padding:5px 9px; text-align:left; font-size:11.5px; }
  .ficha th{ background:#f3f1e9; width:180px; font-weight:600; }
  .ficha td.num{ text-align:right; white-space:nowrap; }
  .ficha tr.tot td{ font-size:14px; font-weight:700; background:#f3f1e9; }
  .ficha__plano svg{ width:100%; height:auto; max-height:280px; display:block; }
  .ficha__warn{
    margin:10px 0 0; padding:7px 10px; border:1px solid #e7c98e;
    background:#fdf3e2; color:#9a6c12; border-radius:6px;
  }
  .ficha footer{
    margin-top:18px; padding-top:8px; border-top:1px solid #ccc;
    color:#888; font-size:10px; word-break:break-all;
  }
}

/* pantallas de poca altura (ventana baja en escritorio): permitir scroll */
@media (max-height:640px){
  html,body{ height:auto; overflow:visible; }
  .app{ height:auto; min-height:100vh; min-height:100dvh; }
  .stage-wrap{ height:62vh; height:62dvh; min-height:300px; }
}

/* tablet / pantallas medianas */
@media (max-width:1100px){
  .ribbon{ grid-template-columns:repeat(8,1fr); }
  .rib{ grid-column:span 4; }
  .rib--wide{ grid-column:span 8; }
  .rib--8{ grid-column:span 8; }
  .rib--4{ grid-column:span 4; }
  .stage__tools{ top:auto; bottom:12px; left:50%; right:auto; transform:translateX(-50%); justify-content:center; max-width:94%; }
  .drag-hint{ display:none; }
  .stage-glb__nota{ bottom:58px; } /* la botonera baja y no debe pisar la nota */
}

/* ============ móvil ============ */
@media (max-width:760px){
  html,body{ height:auto; overflow:visible; }
  .app{ height:auto; min-height:100vh; min-height:100dvh; }

  .topbar{ flex-wrap:wrap; gap:10px 12px; padding:10px 14px; }
  .brand{ flex:1 1 100%; }
  .price{ width:100%; flex-wrap:wrap; justify-content:flex-start; gap:8px; }
  .price__num{ flex:1 1 auto; text-align:left; }
  .price__num strong{ font-size:20px; }
  .price .btn{ padding:8px 12px; font-size:12px; }
  .popover{ width:min(300px,88vw); }

  .ribbon{ grid-template-columns:repeat(2,1fr); gap:9px; padding:12px 14px; }
  .rib{ grid-column:span 1; padding:9px 10px 11px; }
  .rib--wide{ grid-column:span 2; }
  .rib--8{ grid-column:span 2; }
  .rib--4{ grid-column:span 2; }

  .seg{ padding:7px 4px; font-size:11.5px; }
  .seg small{ font-size:9px; }

  .stage-wrap{ height:56vh; min-height:330px; padding:12px 14px 14px; }
  .scene{ transform:scale(calc(.55 * var(--zoom,1))) rotateX(var(--rx,-11deg)) rotateY(var(--ry,16deg)); }
  .stage:not(.sin-ambiente) .scene{ transform:translateY(40px) scale(calc(.55 * var(--zoom,1))) rotateX(var(--rx,-11deg)) rotateY(var(--ry,16deg)); }

  .dims{ top:10px; left:10px; right:auto; gap:6px; flex-wrap:wrap; max-width:58%; }
  .pieces{ top:auto; bottom:96px; left:10px; width:min(228px,62%); max-height:42%; }
  .dim{ min-width:46px; padding:5px 8px; }
  .dim span{ font-size:14px; }
  .dim--ref span{ font-size:10.5px; }
  .tool{ padding:6px 10px; font-size:11.5px; }

  .modal{ padding:8px; }
  .modal__card{ width:100%; height:94vh; }
  .modal__head{ flex-wrap:wrap; }
}

/* ============================================================================
   Cambios reunión 1-ago-2026 (fases A–E)
   ========================================================================== */

/* Frente de solo lectura: resultado de la suma de módulos (audio) */
.numin--lock{ background:#efece3; color:#7c7768; cursor:not-allowed;
  border-color:#e2ddce; box-shadow:none; }
.numin--lock:focus{ outline:none; }
.rib__hint--frente{ display:block; font-size:10px; color:var(--muted); margin-top:2px; }
.gc-m--lock input{ background:#efece3; color:#7c7768; cursor:not-allowed; }
/* ★ t15 (José 20-oct, P16 · A): en los cabeceros la ALTURA se calcula de los paneles (solo lectura) → mismo aspecto que el FRENTE bloqueado */
body:not(.sin-tapizados) #gcAlto[readonly], #cabAltoIn[readonly]{ background:#efece3; color:#7c7768; cursor:not-allowed; }

/* "Borrar opciones" (reunión 1-ago #42) */
.rib__reset{ margin-left:auto; border:0; background:none; color:var(--accent-dark);
  font-size:11px; font-weight:700; cursor:pointer; padding:0; letter-spacing:.02em; }
.rib__reset:hover{ text-decoration:underline; }
.rib__reset[hidden]{ display:none; }

/* botón CESTA flotante sobre el visor (reunión 1-ago #62) */
.stage-cesta{ position:absolute; right:14px; bottom:56px; z-index:5;
  background:var(--accent); color:#fff; border:0; border-radius:999px;
  padding:11px 18px; font-size:13.5px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 18px rgba(122,95,40,.34); transition:.15s; letter-spacing:.01em; }
.stage-cesta:hover{ transform:translateY(-1px); box-shadow:0 9px 22px rgba(122,95,40,.4); }
.stage-cesta[hidden]{ display:none; }
@media (max-width:900px){ .stage-cesta{ bottom:66px; right:10px; padding:9px 14px; font-size:12.5px; } }

/* mueble destacado/favorito del catálogo (reunión 1-ago #21) */
.cat-card__fav{ position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(33,30,23,.82); color:#f4e9cf; font-size:11px; font-weight:700;
  letter-spacing:.04em; padding:4px 9px; border-radius:999px; backdrop-filter:blur(4px); }
.cat-card--fav{ box-shadow:0 0 0 1.5px var(--accent), 0 10px 26px rgba(0,0,0,.10); }
.cat-card__prev{ position:relative; }

/* solapa plegable del coste + tabla margen (reunión 1-ago #9/#10/#13) */
.solapa{ position:relative; margin-top:14px; border-top:1px dashed var(--line); padding-top:12px;
  display:flex; flex-direction:column; align-items:flex-end; } /* la solapa del coste va abajo-derecha */
.solapa__panel{ width:100%; text-align:left; }
.solapa__tab{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--line); background:linear-gradient(135deg,#faf7ef,#efe9da);
  border-radius:8px 8px 8px 2px; padding:7px 13px; font-size:12px; font-weight:700;
  color:var(--accent-dark); position:relative; box-shadow:2px 2px 0 rgba(0,0,0,.05); transition:.15s; }
.solapa__tab::after{ content:""; position:absolute; top:0; right:0; width:12px; height:12px;
  background:linear-gradient(225deg, #dcd3bf 50%, transparent 50%); border-radius:0 8px 0 0; }
.solapa__tab:hover{ transform:translateY(-1px); }
.solapa__hint{ text-transform:uppercase; letter-spacing:.08em; }
.solapa__panel{ overflow:hidden; max-height:0; opacity:0; transition:max-height .32s ease, opacity .25s ease; }
.solapa.is-open .solapa__panel{ max-height:340px; opacity:1; margin-top:12px; }
.solapa.is-open .solapa__tab{ border-radius:8px 8px 0 0; }
.solapa__h{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-dark); margin:0 0 8px; }
.preciotab{ width:100%; border-collapse:collapse; font-size:13px; }
.preciotab th{ text-align:left; font-weight:600; color:var(--muted); padding:5px 8px 5px 0; }
.preciotab td{ text-align:right; padding:5px 0; }
.preciotab .numin--sm{ width:72px; text-align:right; }
/* el desplegable de tarifa se ajusta a su texto para que se vea entero (revisión 19-sep) */
.preciotab #tarifaSel{ width:auto; min-width:120px; max-width:260px; text-align:left; padding-right:26px; }
.preciotab__res th{ color:var(--ink); font-weight:700; border-top:1px solid var(--line); padding-top:8px; }
.preciotab__res td{ color:var(--accent-dark); font-weight:800; font-size:15px; border-top:1px solid var(--line); padding-top:8px; }
.numin--sm{ padding:5px 7px; border:1px solid var(--line); border-radius:7px; font:inherit; }

/* cesta: miniatura, desglose por bloques, familia editable, total con IVA aparte */
.cesta-n{ color:var(--muted); font-weight:700; }
.cesta-desc{ display:flex; gap:11px; align-items:flex-start; }
.cesta-thumb{ width:66px; height:50px; object-fit:cover; border-radius:7px;
  border:1px solid var(--line); background:#f4f1ea; flex:none; }
.cesta-desc__b{ min-width:0; }
.cesta-desc__t{ font-weight:600; }
.cesta-desglose{ margin-top:5px; font-size:12px; }
.cesta-desglose summary{ cursor:pointer; color:var(--accent-dark); font-weight:600; }
.cesta-desglose ul{ list-style:none; margin:6px 0 0; padding:8px 10px; background:#f7f4ec; border-radius:7px; }
.cesta-desglose li{ display:flex; justify-content:space-between; gap:10px; padding:2px 0; color:#4a4436; }
.cesta-desglose li b{ white-space:nowrap; }
.cesta-familia-sel{ padding:5px 7px; border:1px solid var(--line); border-radius:7px; font:inherit; background:#fff; max-width:150px; }
.cesta-linetot{ display:block; font-size:11px; color:var(--muted); }
.cesta-total__row{ display:flex; justify-content:space-between; gap:24px; align-items:baseline; padding:3px 0; }
.cesta-total__row span{ color:var(--muted); }
.cesta-total__row--big{ border-top:1px solid var(--line); margin-top:5px; padding-top:8px; }
.cesta-total__row--big span{ color:var(--ink); font-weight:700; font-size:15px; }
.cesta-total__row--big strong{ font-size:20px; color:var(--accent-dark); }

/* aviso de cambio de precio en borradores (reunión 1-ago audio) */
.guardada__aviso{ display:inline-block; margin-top:4px; font-size:11.5px; font-weight:700;
  color:#a15a2a; background:#f6ead9; border-radius:6px; padding:2px 8px; }

/* botones de la pantalla de mensaje (reunión 1-ago #74) */
.mensaje-acc{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

/* rango mín/máx de cada medida: SIEMPRE fijo y visible (no parpadea) */
.gc-r{ white-space:nowrap; }

/* textura sutil en swatches de madera/piedra (reunión 1-ago #35, aprox. hasta muestrario real) */
.tex-madera-sw{ background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px); }
.tex-piedra-sw{ background-image:radial-gradient(rgba(255,255,255,.35) 20%, transparent 21%), radial-gradient(rgba(0,0,0,.06) 18%, transparent 19%); background-size:7px 7px, 10px 10px; }

/* ribs internos (cliente/valoración/valor del punto): datos de uso profesional que
   NO deben verse en la vista de cliente (reunión 1-ago: máxima simplicidad, ocultar
   datos internos). Se muestran solo en modo admin (#admin en la dirección). */
.rib--interno{ display:none; }
body.pro-tools .rib--interno{ display:flex !important; } /* admin: revela pro/valoración pese a rib--tech */

/* el coste interno de la cesta (presupuesto de compra) no se muestra al cliente;
   solo en modo admin (reunión 1-ago: el coste vive en la solapa de Mi cuenta) */
.cesta-coste{ display:none; }
body.pro-tools .cesta-coste{ display:block; }

/* ============================================================================
   Cesta premium — acabado editorial (referencia de diseño del cliente, 2-ago)
   Solo estética; la funcionalidad no cambia.
   ========================================================================== */
#viewCesta{ }  /* el menu lateral va pegado a la izquierda como en catalogo (revision 19-sep) */
#viewCesta .side-main{ max-width:1000px; margin:0 auto; }  /* contenido centrado, menu a la izquierda (revision 19-sep) */
.cesta-hero{ display:grid; grid-template-columns:1fr minmax(220px,340px); gap:26px; align-items:center; margin-bottom:22px; }
.cesta-title{ font-family:Georgia,"Times New Roman",serif; font-size:44px; line-height:1; letter-spacing:.5px; color:var(--ink); margin:0; }
.cesta-title::after{ content:""; display:block; width:64px; height:3px; background:var(--accent); margin-top:14px; border-radius:2px; }
.cesta-sub{ margin:16px 0 0; color:var(--muted); font-size:15px; max-width:42ch; line-height:1.55; }
.cesta-hero__img{ height:158px; border-radius:16px; border:1px solid var(--line); overflow:hidden;
  background:#efe9dd; box-shadow:0 16px 36px rgba(48,42,25,.14); }
.cesta-hero__img svg{ width:100%; height:100%; display:block; }

.cesta-refcard{ display:flex; gap:16px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:16px; }
.cesta-refcard__ico{ flex:none; width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; background:#f4ecd9; color:var(--accent-dark); }
.cesta-refcard__ico svg{ width:22px; height:22px; }
.cesta-refcard__b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.cesta-refcard__b label{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#948e7b; font-weight:700; }
.cesta-refcard__b label small{ text-transform:none; letter-spacing:0; color:var(--muted); font-weight:400; }
.cesta-refcard__b input{ width:100%; max-width:540px; border:1px solid var(--line); border-radius:10px; padding:11px 13px; font:inherit; background:#fdfcf9; }
.cesta-refcard__b input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.14); }
.cesta-refcard__hint{ font-size:11.5px; color:var(--muted); }

.cesta-wrap{ border-radius:16px; box-shadow:0 10px 30px rgba(48,42,25,.07); }
.cesta{ font-size:14px; }
.cesta thead th{ background:transparent; border-bottom:1px solid var(--line); padding:14px 16px; font-size:10.5px; letter-spacing:1px; color:#8f8974; }
.cesta td{ padding:16px; border-top:1px solid #f0ede4; vertical-align:middle; }
.cesta tbody tr{ transition:.15s; }
.cesta tbody tr:hover{ background:#fbfaf5; }

/* miniatura GRANDE del mueble en su ambiente (captura 3D ampliada · petición usuario):
   el ambiente va de fondo y la captura del mueble (fondo transparente) encima */
.cesta-thumb{ width:154px; height:114px; border-radius:12px; overflow:hidden; flex:none;
  border:1px solid var(--line); box-shadow:0 8px 18px rgba(48,42,25,.16);
  background:url('img/ambientes/salon-cliente2.jpg') center 62% / cover no-repeat, #efe9dd;
  display:grid; place-items:center; }
/* contain: el mueble entero (formato apaisado) sobre el ambiente, nunca solo la pared */
.cesta-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.cesta-thumb[data-empty]{ background:#f4f1ea; }
.cesta-desc{ gap:16px; align-items:center; }
.cesta-desc__t{ font-size:15px; font-weight:600; color:var(--ink); }
.cesta-familia-sel{ max-width:170px; }

.cesta-foot{ align-items:flex-start; margin-top:24px; }
.cesta-totalcard{ background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:20px 22px; min-width:344px; box-shadow:0 12px 30px rgba(48,42,25,.10); }
.cesta-total__row--big span small{ font-size:12px; color:var(--muted); font-weight:400; }
.cesta-total__row--big strong{ font-size:26px; }
.btn--send{ display:flex; align-items:center; gap:12px; width:100%; margin-top:16px;
  background:var(--ink); color:#f5efe0; border:0; border-radius:12px; padding:15px 20px;
  font-size:14px; font-weight:600; cursor:pointer; transition:.16s; text-align:left; line-height:1.25; }
.btn--send svg{ width:20px; height:20px; flex:none; color:var(--accent); }
.btn--send span{ flex:1; }
.btn--send .cesta-send__arr{ font-size:18px; transition:.16s; }
.btn--send:hover{ background:#332e22; box-shadow:0 12px 28px rgba(38,35,27,.34); }
.btn--send:hover .cesta-send__arr{ transform:translateX(3px); }
.btn--send:disabled{ opacity:.45; cursor:not-allowed; }

.cesta-note{ display:flex; align-items:center; justify-content:center; gap:9px;
  margin:26px 0 6px; color:var(--muted); font-size:12.5px; text-align:center; }
.cesta-note svg{ width:16px; height:16px; color:var(--accent); flex:none; }

@media (max-width:820px){
  .cesta-hero{ grid-template-columns:1fr; }
  .cesta-hero__img{ display:none; }
  .cesta-title{ font-size:34px; }
  .cesta-totalcard{ min-width:0; width:100%; }
  .cesta-foot{ flex-direction:column-reverse; }
  .cesta-acc{ width:100%; }
  .cesta-thumb{ width:104px; height:78px; }
}

/* botón "Más filtros" del catálogo (oculta pasos 2/3 de inicio para ganar espacio) */
.cat-masfiltros{ align-self:flex-start; margin:2px 0 0; border:1px dashed var(--line);
  background:#faf9f4; color:var(--accent-dark); font-size:12px; font-weight:600;
  border-radius:999px; padding:6px 14px; cursor:pointer; transition:.15s; }
.cat-masfiltros:hover{ border-color:var(--accent); background:#f4ecd9; }

/* ============================================================================
   Pantalla de pedido / confirmación — acabado premium (2-ago)
   ========================================================================== */
.pedido{ max-width:660px; margin:10px auto 30px; text-align:center; }
.pedido__badge{ width:66px; height:66px; margin:0 auto 18px; border-radius:50%;
  background:linear-gradient(135deg,#b79a52,#8a6a2c); color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 30px rgba(138,106,44,.4); }
.pedido__badge svg{ width:32px; height:32px; }
.pedido__title{ font-family:Georgia,"Times New Roman",serif; font-size:32px; color:var(--ink); margin:0 0 8px; letter-spacing:.3px; }
.pedido__lead{ color:var(--muted); font-size:14.5px; line-height:1.55; max-width:48ch; margin:0 auto; }
.pedido__ref{ display:inline-flex; flex-direction:column; gap:3px; align-items:center;
  margin:22px auto; padding:12px 28px; background:#f4ecd9; border:1px solid #e6d6ab; border-radius:12px; }
.pedido__ref span{ font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--accent-dark); font-weight:700; }
.pedido__ref strong{ font-size:21px; color:var(--ink); letter-spacing:.5px; }
.pedido__card{ text-align:left; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; margin:18px 0; box-shadow:0 10px 30px rgba(48,42,25,.07); }
.pedido__card-h{ font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:#948e7b; font-weight:700; margin-bottom:10px; }
.pedido__txt{ color:var(--ink); font-size:13.5px; line-height:1.6; }
.pedido__notas{ display:grid; gap:10px; text-align:left; margin:16px 0; }
.pedido__nota{ display:flex; gap:12px; align-items:flex-start; background:#faf8f2; border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; }
.pedido__nota-ico{ font-size:19px; line-height:1.2; flex:none; }
.pedido__nota p{ margin:0; font-size:12.5px; color:#4a4436; line-height:1.5; }
.pedido__tyc{ text-align:left; font-size:12px; color:var(--muted); margin:6px 2px 20px; }
.pedido__tyc summary{ cursor:pointer; color:var(--accent-dark); font-weight:600; }
.pedido__tyc p{ margin-top:8px; line-height:1.55; }
.pedido__acc{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.pedido__acc .btn{ padding:12px 22px; font-size:13.5px; }
/* resumen del pedido en LÍNEAS estructuradas (no un churro de texto) */
.pedido__txt{ font-size:14px; }
.ped-lineas{ list-style:none; margin:0; padding:0; }
.ped-linea{ display:flex; align-items:flex-start; gap:14px; padding:11px 0; border-top:1px solid #f0ede4; }
.ped-linea:first-child{ border-top:0; padding-top:2px; }
.ped-linea__n{ flex:none; width:24px; height:24px; border-radius:50%; background:#f4ecd9; color:var(--accent-dark);
  font-size:12px; font-weight:700; display:grid; place-items:center; margin-top:1px; }
.ped-linea__b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ped-linea__t{ font-size:13.5px; color:var(--ink); line-height:1.4; }
.ped-linea__m{ font-size:11.5px; color:var(--muted); }
.ped-linea__p{ flex:none; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ped-tot{ margin-top:14px; padding-top:14px; border-top:1.5px solid var(--line); }
.ped-tot__r{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:3px 0; }
.ped-tot__r span{ color:var(--muted); }
.ped-tot__r b{ font-variant-numeric:tabular-nums; }
.ped-tot__r--big{ border-top:1px solid var(--line); margin-top:6px; padding-top:10px; }
.ped-tot__r--big span{ color:var(--ink); font-weight:700; font-size:15px; }
.ped-tot__r--big span small{ font-weight:400; color:var(--muted); font-size:12px; }
.ped-tot__r--big strong{ font-size:21px; color:var(--accent-dark); }
.ped-gracias{ margin:16px 0 0; font-size:12.5px; color:var(--muted); line-height:1.55; }

/* ============ Configurador: acabado premium (2-ago) ============ */
.topbar .btn{ display:inline-flex; align-items:center; gap:7px; }
.topbar .btn[hidden]{ display:none !important; } /* respeta hidden pese al inline-flex */
.topbar .btn svg{ width:15px; height:15px; flex:none; }
/* el precio/puntos del visor es dato interno; el precio ya está en la barra
   superior. Se oculta al cliente y solo aparece en modo admin (reunión 1-ago) */
#dimPrice{ display:none; }
body.pro-tools #dimPrice{ display:inline; }
.rib{ background:linear-gradient(180deg,#fdfcf8,#f9f7f0); box-shadow:0 2px 10px rgba(48,42,25,.045); }
.rib:hover{ border-color:#ddd7c7; }
.chip.is-active{ box-shadow:0 4px 12px rgba(168,131,59,.26); }
.cuerpo-sw.is-active i, .tapa-var.is-active i{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--accent), 0 5px 12px rgba(168,131,59,.28); }

/* ============ Mi cuenta — acabado premium (2-ago) ============ */
.perfil{ max-width:960px; }
.perfil__hero{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:4px; }
.perfil__hero-txt{ min-width:0; }
.perfil__continuar{ font-size:15px; padding:14px 28px; border-radius:12px; white-space:nowrap;
  box-shadow:0 8px 22px rgba(168,131,59,.35); }
.perfil__continuar:hover{ transform:translateY(-1px); }
@media (max-width:640px){ .perfil__continuar{ width:100%; } }
.perfil__title{ font-family:Georgia,"Times New Roman",serif; font-size:38px; line-height:1; color:var(--ink); margin:0; letter-spacing:.4px; }
.perfil__title::after{ content:""; display:block; width:58px; height:3px; background:var(--accent); margin-top:12px; border-radius:2px; }
.perfil__sub{ margin:14px 0 0; color:var(--muted); font-size:14px; }
.cuenta-id{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px 20px; margin-top:18px; box-shadow:0 8px 24px rgba(48,42,25,.06); }
.cuenta-id__who{ display:flex; align-items:center; gap:14px; min-width:0; }
.cuenta-id__av{ width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,#b79a52,#8a6a2c); color:#fff; font-weight:700; font-size:16px; letter-spacing:.5px; }
.cuenta-id__nm strong{ font-size:17px; display:block; }
.cuenta-id__nm small{ color:var(--muted); }
.cuenta-tarifa{ background:#f4ecd9; border:1px solid #e6d6ab; color:var(--accent-dark); font-size:12px; font-weight:700; border-radius:999px; padding:6px 13px; white-space:nowrap; }
.cuenta-id__nota{ color:var(--muted); font-size:11.5px; }
.cuenta-id__r{ flex-wrap:wrap; justify-content:flex-end; }
.perfil__grid{ gap:20px; margin-top:20px; }
.perfil__card{ box-shadow:0 12px 30px rgba(48,42,25,.06); padding:22px 24px; }
.perfil__h{ font-family:Georgia,"Times New Roman",serif; font-size:18px; letter-spacing:.2px; }

.view__t-sub{ font-size:.5em; color:var(--muted); font-weight:400; letter-spacing:0; }

/* ============ Panel de administración (rol admin · 2-ago) ============ */
.admin-wrap{ max-width:1100px; margin:0 auto; padding:24px 22px 48px; display:flex; flex-direction:column; gap:18px; }
.admin-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.admin-head .perfil__title{ font-size:34px; }
.admin__card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:0 10px 30px rgba(48,42,25,.06); }
.admin__hint{ color:var(--muted); font-size:12px; margin:0 0 10px; }
.admin-cli-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.admin-cli-head .perfil__h{ margin:0; white-space:nowrap; }
.admin-cli-head input.numin--buscar{ margin:0; max-width:420px; }
.admin-count{ color:var(--muted); font-weight:400; font-size:13px; }
.admin-tabwrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.admin__tab{ width:100%; border-collapse:collapse; font-size:13px; }
.admin__tab th{ background:#f6f3ec; text-align:left; padding:10px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#8a8471; white-space:nowrap; }
.admin__tab td{ padding:9px 12px; border-top:1px solid #f1eee6; vertical-align:middle; }
.admin__tab--cli td{ white-space:nowrap; }
.admin__tab .num{ text-align:right; }
/* la tabla de clientes cabe SIN scroll horizontal: ancho fijo al 100 %, columnas
   proporcionales, el select/importe no la ensanchan y los textos largos se
   recortan con puntos suspensivos (Fran 9-sep) */
.admin__tab--cli{ table-layout:fixed; width:100%; }
.admin__tab--cli th, .admin__tab--cli td{ padding-left:8px; padding-right:8px; overflow:hidden; text-overflow:ellipsis; }
.admin__tab--cli col{ } /* no cols: los anchos van por columna */
.admin__tab--cli th:nth-child(1), .admin__tab--cli td:nth-child(1){ width:7%; }
.admin__tab--cli th:nth-child(2), .admin__tab--cli td:nth-child(2){ width:18%; }
.admin__tab--cli th:nth-child(3), .admin__tab--cli td:nth-child(3){ width:11%; }
.admin__tab--cli th:nth-child(4), .admin__tab--cli td:nth-child(4){ width:19%; }
.admin__tab--cli th:nth-child(5), .admin__tab--cli td:nth-child(5){ width:20%; }
.admin__tab--cli th:nth-child(6), .admin__tab--cli td:nth-child(6){ width:10%; }
.admin__tab--cli th:nth-child(7), .admin__tab--cli td:nth-child(7){ width:8%; }
.admin__tab--cli th:nth-child(8), .admin__tab--cli td:nth-child(8){ width:7%; overflow:visible; }
.admin__tab--cli .adm-cli-tarifa{ width:100%; box-sizing:border-box; font-size:12px; padding:5px 6px; }
.admin__tab--cli .adm-cli-venta{ width:100%; box-sizing:border-box; }
/* las cabeceras se leen enteras (envuelven en 2 líneas) en vez de recortarse */
.admin__tab--cli th{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.2; vertical-align:bottom; }
.admin-in{ width:76px; border:1px solid var(--line); border-radius:7px; padding:5px 6px; font:inherit; text-align:right; background:#fff; }
.adm-cli-tarifa{ border:1px solid var(--line); border-radius:7px; padding:5px 6px; font:inherit; background:#fff; }
.adm-cli-venta{ width:84px; }
.adm-estado{ border:1px solid var(--line); border-radius:999px; padding:4px 12px; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; }
.adm-estado.is-on{ background:#eaf3e2; border-color:#c3ddaa; color:#4f7a33; }
.adm-estado.is-off{ background:#f6e7e4; border-color:#e5b8b0; color:#a5493c; }
.admin-acc{ white-space:nowrap; }
.adm-edit{ border:1px solid var(--line); background:#faf9f4; border-radius:7px; width:28px; height:28px; cursor:pointer; color:var(--accent-dark); margin-right:5px; }
.adm-edit:hover{ border-color:var(--accent); }
.adm-off td{ opacity:.55; }
.admin-vacio{ text-align:center; color:var(--muted); padding:20px; }
.admin__form{ margin-top:16px; border-top:1px solid var(--line); padding-top:16px; }
.admin__form-title{ font-family:Georgia,"Times New Roman",serif; font-size:16px; margin-bottom:12px; color:var(--ink); }
.admin__form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px 16px; }
.admin__form-grid label{ display:flex; flex-direction:column; gap:4px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#948e7b; font-weight:700; }
.admin__form-grid label input, .admin__form-grid label select{ border:1px solid var(--line); border-radius:8px; padding:9px 11px; font:inherit; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink); background:#fff; }
.admin__form-grid label input:focus, .admin__form-grid label select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,131,59,.14); }
.admin__chk{ flex-direction:row !important; align-items:center; gap:8px !important; text-transform:none !important; letter-spacing:0 !important; color:var(--ink) !important; font-weight:600 !important; align-self:end; }
.admin__chk input{ accent-color:var(--accent); width:17px; height:17px; }
.admin__form-acc{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.admin__form-nota{ color:var(--muted); font-size:11.5px; }
/* modo administrador: se oculta todo el flujo de cliente, solo el panel */
body.is-admin .topmenu, body.is-admin .price, body.is-admin #backBtn, body.is-admin #sesionInfo, body.is-admin .catalogo-head__r{ display:none !important; }

/* página de borradores / guardadas — mismo aire que Mi cuenta (2-ago) */
.guardadas-wrap{ max-width:820px; margin:0 auto; padding:26px 22px 44px; display:flex; flex-direction:column; gap:16px; }
.guardadas-wrap .perfil__title{ font-size:32px; }
.guardadas-wrap .perfil__sub{ margin-top:10px; }
.guardadas-wrap #guardadasBuscar{ margin-bottom:0; }
.guardadas-wrap .guardadas{ display:flex; flex-direction:column; gap:10px; }

/* ============ scroll de PÁGINA en pantallas tipo documento (2-ago) ============
   cesta / pedido / Mi cuenta / catálogo: baja la web entera con la barra superior
   fija (sticky), en vez de un scroll interno raro. Config e inicio siguen a pantalla. */
html:has(body.page-scroll){ overflow:auto; }
body.page-scroll{ overflow:visible; height:auto; }   /* #1 (20-sep): body SIN scroller propio → el sticky del navbar/topbar ancla al viewport */
/* rows auto 1fr: la barra conserva su altura natural y la fila de contenido
   (1fr) absorbe el espacio libre; así no se estira la barra con poco contenido */
body.page-scroll .app{ height:auto; min-height:100vh; grid-template-rows:auto 1fr; }
body.page-scroll .topbar{ position:sticky; top:0; z-index:50; }
body.page-scroll .navbar{ position:sticky; top:0; z-index:60; }   /* Excel 20-sep: el menú negro horizontal SIEMPRE visible al hacer scroll */
body.page-scroll .view{ height:auto; min-height:0; }
body.page-scroll #viewCatalogo,
body.page-scroll #viewCesta,
body.page-scroll #viewMensaje,
body.page-scroll #viewGuardadas,
body.page-scroll #viewPunto{ overflow:visible; }

/* ============ circuito de pedido completo (Excel 4/5-ago) ============ */
/* observaciones generales del pedido */
.cesta-refcard--obs .obs-txt{ width:100%; margin-top:4px; }

/* aceptación de condiciones de venta (PDF obligado abrir y aceptar) */
.cesta-cond{ display:flex; flex-direction:column; gap:7px; margin:2px 0 10px; padding:11px 13px;
  background:#faf7f0; border:1px solid #e6ddca; border-radius:10px; }
.cesta-cond a{ color:var(--accent); font-weight:600; text-decoration:none; font-size:13px; }
.cesta-cond a:hover{ text-decoration:underline; }
.cesta-cond__chk{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#4a443a; cursor:pointer; }
.cesta-cond__chk input{ width:16px; height:16px; accent-color:var(--accent); }
.cesta-cond__chk input:disabled + span{ opacity:.55; }

/* estado del pedido en la pantalla de confirmación */
.pedido__estado{ display:inline-flex; align-items:center; gap:8px; margin:10px auto 0;
  padding:6px 14px; border-radius:999px; background:#eef3f8; color:#2d4a63;
  font-size:12.5px; border:1px solid #cddbe8; }
.pedido__estado i{ width:8px; height:8px; border-radius:50%; background:#4a7bd0; box-shadow:0 0 0 3px #4a7bd022; }

/* badges de estado (borradores + admin) */
.guardada__estado{ display:inline-block; align-self:flex-start; width:auto; font-size:10.5px; font-weight:700; letter-spacing:.4px;
  padding:2px 9px; border-radius:999px; border:1px solid transparent; margin:2px 0; }
.est--borrador{   background:#f2efe7; color:#6b6353; border-color:#e0d9c8; }
.est--enviado{    background:#eef3f8; color:#2d4a63; border-color:#cddbe8; }
.est--confirmado{ background:#e8f3ea; color:#2e6b3e; border-color:#cfe4d4; }
.est--encurso{    background:#f3ecdd; color:#8a6d1a; border-color:#e6d9b8; }
.est--expedido{   background:#eaf0f6; color:#2d4a63; border-color:#cdd9e6; }
.est--albaranado{ background:#f0ecf6; color:#4b3a72; border-color:#ddd3ec; }
.est--facturado{  background:#e8f3ea; color:#2e6b3e; border-color:#cfe4d4; }

/* «Seguimiento del pedido» (Alberto 21-sep): 6 pasos con chip de estado */
.seguimiento{ margin:10px 0 4px; }
.seg__cab{ font-weight:800; font-size:14px; color:var(--ink); margin-bottom:8px; }
.seg__list{ list-style:none; margin:0; padding:0; position:relative; }
.seg__step{ display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:12px; padding:8px 8px; border-radius:9px; }
.seg__step + .seg__step{ margin-top:2px; }
.seg__step.is-cur{ background:#faf6ec; box-shadow:inset 0 0 0 1px #ecdfc2; }
.seg__n{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; font-variant-numeric:tabular-nums; }
.seg__step.is-done .seg__n{ background:var(--accent); color:#fff; border-color:var(--accent); }
.seg__tx{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.seg__tx b{ font-size:13px; letter-spacing:.02em; color:var(--ink); }
.seg__tx small{ font-size:11.5px; color:var(--muted); }
.seg__chip{ font-size:11px; font-weight:800; letter-spacing:.03em; padding:6px 13px; border-radius:999px; white-space:nowrap; text-align:center; }
.seg__chip--ok{ background:#3f9d57; color:#fff; }
.seg__chip--cur{ background:#e8e2d4; color:#5a5040; }
.seg__chip--no{ background:#efece6; color:#a49a89; }
@media (max-width:560px){ .seg__step{ grid-template-columns:28px 1fr; } .seg__chip{ grid-column:2; justify-self:start; margin-top:2px; } .seg__n{ width:28px; height:28px; } }
.est--anulado{    background:#f6eaea; color:#8a3232; border-color:#e8cccc; }
.guardada--anulada{ opacity:.62; }
.guardada--anulada .guardada__txt strong{ text-decoration:line-through; }

/* pedidos en el panel de administración (fábrica) */
.admin__tab--ped td{ vertical-align:middle; }
.admin-acc--ped{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.adm-ped--anulado{ opacity:.55; }
.adm-ped--anulado td:first-child b{ text-decoration:line-through; }

/* muestras gratis */
.muestras{ margin-top:8px; }
.muestras__row{ display:flex; gap:12px; flex-wrap:wrap; }
.muestras__row label{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:#6b6353; }
.muestras__aca{ display:block; margin:8px 0 2px; color:#6b6353; font-size:11.5px; }
.muestras__acc{ display:flex; gap:8px; align-items:center; margin:8px 0 4px; flex-wrap:wrap; }
.muestras__nota{ display:block; color:#8d8577; font-size:10.8px; line-height:1.45; }

/* efectos del acabado (según colección · a valorar) */
.efectos-block{ margin-top:10px; }
.efectos-block .chips{ margin-top:6px; }

/* modal de consulta a fábrica (medida superior al máximo) */
.modal__card--cf{ width:min(560px,94vw); height:auto; max-height:88vh; }
.cf__body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.cf__lead{ font-size:13px; line-height:1.55; color:#3d372e; margin:0; }
.cf__dato{ background:#faf7f0; border:1px solid #e6ddca; border-radius:8px; padding:8px 12px;
  font-size:12.5px; color:#4a443a; }
.cf__body .obs-txt{ width:100%; }
.cf__acc{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* observaciones generales en el resumen del pedido */
.ped-obs{ background:#faf7f0; border-left:3px solid var(--accent); padding:8px 12px;
  border-radius:0 8px 8px 0; font-size:12.5px; color:#4a443a; margin:10px 0; }

/* campos de solo lectura del punto (coste de fábrica · venta calculada) */
#costePuntoIn[readonly], #valorPuntoCat[readonly]{ background:#f4f1e9; color:#6b6353; cursor:not-allowed; }

/* ============ panel de administración en 3 páginas (05-ago) ============ */
.admin-tabs{ display:flex; gap:8px; margin:2px 0 16px; border-bottom:2px solid #e6ddca; padding-bottom:0; }
.admin-tabbtn{ appearance:none; border:1px solid #e6ddca; border-bottom:none; background:#f4f1e9; color:#6b6353;
  font:inherit; font-size:14px; font-weight:600; padding:11px 22px; border-radius:12px 12px 0 0; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; position:relative; top:2px; }
.admin-tabbtn:hover{ background:#efeadf; }
.admin-tabbtn.is-active{ background:#fff; color:#1e1a14; border-color:#e6ddca; border-bottom:2px solid #fff;
  box-shadow:0 -6px 14px rgba(60,48,22,.06); }
.admin-tabbtn .admin-count{ font-size:11.5px; color:var(--accent); }
.admin-page{ animation:admfade .18s ease; }
.admin-page[hidden]{ display:none!important; }
@keyframes admfade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }

/* filtros de pedidos */
.admin-filtros{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:10px 0 12px; }
.admin-filtros .numin--buscar{ flex:1 1 260px; }
.admin-estfiltro{ display:flex; gap:6px; flex-wrap:wrap; }
.admin-estfiltro .chip{ font-size:12px; padding:7px 14px; }
.admin-estfiltro .chip.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* formulario de alta/edición de cliente, arreglado y compacto */
.admin__form-grid{ grid-template-columns:repeat(4,1fr); }
.admin__form-grid label input, .admin__form-grid label select{ height:40px; width:100%; }
@media (max-width:1100px){ .admin__form-grid{ grid-template-columns:repeat(2,1fr); } }
.admin__card > .perfil__h{ margin-bottom:2px; }
.admin__tab--tar td{ font-size:14px; }

/* ============ solapa del coste como esquina doblada de la página (05-ago) ============ */
/* la esquina vive fija abajo-derecha SOLO en Mi cuenta; al pulsarla se levanta el panel ahí mismo */
.solapa--esquina{ position:fixed; right:0; bottom:0; z-index:60; margin:0; border:none; padding:0;
  display:block; }
/* triángulo de página doblada: degradado diagonal + sombra, con "coste" en diagonal */
.solapa__tab--esquina{ display:block; width:92px; height:92px; padding:0; border:none; border-radius:0;
  background:linear-gradient(315deg, #cbb98a 0 49.5%, transparent 50%); box-shadow:none; cursor:pointer;
  position:relative; transition:.18s; }
.solapa__tab--esquina::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(315deg, transparent 49.5%, rgba(60,48,22,.16) 50%, transparent 62%); }
.solapa__tab--esquina::after{ content:none; }
.solapa__tab--esquina .solapa__hint{ position:absolute; right:8px; bottom:26px; transform:rotate(-45deg);
  font-size:10px; font-weight:700; letter-spacing:.14em; color:#5f4d24; text-transform:uppercase; }
.solapa__tab--esquina:hover{ transform:none; width:104px; height:104px; }
.solapa--esquina.is-open .solapa__tab--esquina{ background:linear-gradient(315deg, var(--accent) 0 49.5%, transparent 50%); }
.solapa--esquina.is-open .solapa__tab--esquina .solapa__hint{ color:#fff; }
/* el panel se despliega pegado a la esquina */
.solapa--esquina .solapa__panel{ position:absolute; right:14px; bottom:98px; width:320px; max-height:none;
  opacity:0; transform:translateY(10px) scale(.98); transform-origin:bottom right; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease; overflow:visible;
  background:#fff; border:1px solid #e2dac8; border-radius:14px 14px 4px 14px; padding:16px 18px 14px;
  box-shadow:0 18px 44px rgba(60,48,22,.22); text-align:left; }
.solapa--esquina.is-open .solapa__panel{ opacity:1; transform:none; pointer-events:auto; margin-top:0; }
.solapa--esquina .solapa__panel small{ display:block; margin-top:9px; color:var(--muted); font-size:10.8px; line-height:1.45; }
/* (la esquina vive dentro de #viewPunto: se oculta sola con la vista) */

/* ============ muestrario real de tapas (Ainoha 06-ago) ============ */
/* pastillas de variante con la FOTO real del material + nombre */
.tapa-var__foto{ display:block; width:44px; height:33px; border-radius:7px;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14), 0 1px 4px rgba(60,48,22,.18); transition:.15s; }
.tapa-var:hover .tapa-var__foto{ transform:scale(1.06); }
.tapa-var.is-active .tapa-var__foto{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.14), 0 0 0 3px var(--accent); }
.tapa-var span{ max-width:64px; text-align:center; line-height:1.2; }

/* ============ Excel 9-ago: bloques desplegables, pulso, solicitud y proyecto ============ */
/* sin asistente de pasos: lo sustituye el pulso de los bloques pendientes */
#guia{ display:none !important; }
.rib--plegable .rib__head--toggle{ cursor:pointer; display:flex; align-items:center; gap:9px; user-select:none; }
.rib__num{ color:var(--accent); font-weight:800; font-size:14px; }
.rib__chev{ margin-left:auto; font-style:normal; color:var(--muted); transition:transform .2s; }
.rib--plegable.is-abierto .rib__chev{ transform:rotate(180deg); }
.rib--plegable .rib__body{ display:none; padding-top:9px; }
.rib--plegable.is-abierto .rib__body{ display:block; }
.rib--pulso .rib__head--toggle::before{ content:""; width:9px; height:9px; border-radius:50%;
  background:var(--accent); animation:pulsoRib 1.4s ease-in-out infinite; flex:none; }
@keyframes pulsoRib{ 0%,100%{ opacity:.35; transform:scale(.85);} 50%{ opacity:1; transform:scale(1.2);} }
.rib--plegable .rib__reset{ margin-left:8px; }

/* solicitud: bloque "valoramos el resto de su proyecto" */
.cesta-refcard--proyecto .proyecto__txt{ font-size:12px; color:#6b6353; line-height:1.5; margin:4px 0 9px; }
.proyecto__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 14px; }
.proyecto__grid label{ display:flex; flex-direction:column; gap:4px; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.4px; color:#948e7b; font-weight:700; }
.proyecto__grid input{ height:38px; border:1px solid var(--line); border-radius:8px; padding:8px 11px;
  font:inherit; font-weight:400; text-transform:none; letter-spacing:0; }
@media (max-width:900px){ .proyecto__grid{ grid-template-columns:1fr; } }
.proyecto__adj{ display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.proyecto__btn{ cursor:pointer; }
.proyecto__lista{ font-size:11.5px; color:#4a443a; }
.proyecto__priv{ display:block; margin-top:7px; color:#b3aa97; font-size:10.5px; }

/* archivos y observaciones por línea */
.cesta-linea-arch{ margin-top:6px; font-size:12px; }
.cesta-linea-arch summary{ cursor:pointer; color:var(--accent-dark); font-weight:600; }
.cesta-linea-arch .obs-txt{ width:100%; margin:7px 0; }
.cesta-linea-adj{ cursor:pointer; font-size:12px; padding:6px 12px; }
.cesta-linea-lista{ display:block; margin-top:5px; color:#6b6353; }

/* nota de las condiciones para el estudio */
.cesta-cond__nota{ color:#8d8577; font-size:10.8px; }

/* botón "valorar el resto del proyecto" en Mi cuenta */
.cuenta-id__proy{ font-size:12.5px; padding:8px 14px; }
.cuenta-id__r{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

/* muestras: fila de datos de entrega */
.muestras__row--datos label{ flex:1 1 220px; }
.muestras__row--datos input{ width:100%; }

/* ============ PIEL CURVATTO (maquetas Alberto 19-ago) ============
   Cuerpo claro y aireado: tarjetas blancas flotantes, pills, acento terracota.
   La topbar negra P.ESPEJO se conserva (collage del propio Alberto en el Excel). */

/* pills en todos los selectores */
.chip, .seg, .btn, .cat-masfiltros, .tarifa-chip{ border-radius:999px; }
.chip{ border-color:var(--line); }
.chip.is-active{ background:var(--oro-suave); border-color:var(--oro); color:var(--ink); }

/* panel del configurador: tarjetas blancas sobre fondo claro */
#viewConfig .ribbon{ background:var(--bg); border-right:0; padding:14px; gap:12px; }
#viewConfig .rib{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 4px 18px rgba(60,50,30,.05); padding:12px 14px 13px;
}
.rib__t, .detalle-lbl{ letter-spacing:.14em; text-transform:uppercase; font-size:10px; color:var(--muted); }

/* bloques plegables: sin números, chevron fino, pulso terracota */
.rib__num{ display:none; }
.rib__chev{ color:var(--muted); font-style:normal; }
.rib--pulso .rib__head--toggle::before{ background:var(--terra); }
.rib__head--toggle{ font-size:11px; letter-spacing:.16em; }

/* catálogo: tarjetas y CTAs de la maqueta (Ver 3D en línea · Configurar arena) */
.cat-card{ border-radius:16px; border:1px solid var(--line); box-shadow:0 4px 18px rgba(60,50,30,.05); }
.cat-card__kicker{ color:var(--terra); letter-spacing:.16em; }
.cat-card__price b{ color:var(--terra); }
.cat-card__cta{ background:#fff; border:1px solid #d8d2c6; color:var(--ink); border-radius:10px; }
.cat-card__cta:hover{ border-color:var(--sand); }
.cat-card__cfg{ background:var(--sand); border:1px solid var(--sand); color:#fff; border-radius:10px; }
.cat-card__cfg:hover{ background:#a98f7a; }

/* filtros del catálogo en tarjeta */
.cat-filtros, .cat-paso{ background:var(--card); border:1px solid var(--line); border-radius:16px; }

/* acentos terracota: adjuntos, badges y enlaces de línea */
.cesta-linea-arch > summary, .cesta-desglose summary{ color:var(--terra); }
.cesta-montaje, .badge-desmontado{ color:var(--terra); }
.cesta-cond__link, #condLink{ color:var(--terra); }

/* botón enviar a fábrica: topo de la maqueta */
#enviarBtn{ background:var(--topo); border-color:var(--topo); border-radius:12px; }
#enviarBtn:not(:disabled):hover{ background:#4e4741; }

/* FAB del visor: negro como el CTA de la maqueta */
.stage-cesta{ background:#141414; border-color:#141414; color:#fff; border-radius:999px; }
.stage-cesta:hover{ background:#2b2b2b; }

/* cotas: activa en dorado apagado */
.cotas__in.is-activa, .cotas input:focus{ background:var(--oro-suave); border-color:var(--oro); }

/* deslizador de frente (tarjeta modelo) */
.frente-slider{ width:100%; accent-color:var(--oro); }

/* stepper de cantidad de la solicitud */
.cant-step{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:10px; padding:4px 10px; background:#fff; }
.cant-step button{ border:0; background:none; font-size:15px; cursor:pointer; color:var(--ink);
  width:22px; height:22px; line-height:1; border-radius:50%; }
.cant-step button:hover{ background:var(--oro-suave); }
.cant-step b{ min-width:18px; text-align:center; font-size:13.5px; }

/* tabla de la solicitud */
.cesta-tabla__head{
  display:grid; grid-template-columns:70px minmax(0,1fr) 110px 120px 120px 70px;
  gap:10px; padding:9px 14px; background:#f9f5f2; border:1px solid var(--line); border-radius:10px;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.cesta-fila{ display:grid; grid-template-columns:70px minmax(0,1fr) 110px 120px 120px 70px;
  gap:10px; align-items:start; }
.cesta-fila__ref{ font-size:11.5px; color:var(--muted); padding-top:6px; }
.cesta-fila__pu, .cesta-fila__pt{ font-size:14px; padding-top:6px; white-space:nowrap; }
.cesta-fila__pt{ font-weight:700; }
.cesta-incluye{ font-size:11.5px; color:var(--muted); margin-top:3px; }
.lin-btn{ border:1px solid var(--terra-suave); background:#fff; color:var(--terra); width:28px; height:28px;
  border-radius:8px; cursor:pointer; font-size:13px; }
.lin-btn:hover{ background:var(--terra-suave); }

/* perfil del cliente (pantalla 2 tras el login) */
#viewPerfil{ overflow:auto; padding:0 22px 26px; }
.perf-nav{ display:flex; gap:26px; justify-content:center; padding:14px 0 12px; border-bottom:1px solid var(--line);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; }
.perf-nav a{ color:var(--ink); text-decoration:none; cursor:pointer; }
.perf-nav a:hover{ color:var(--terra); }
.perf-wrap{ max-width:1060px; margin:26px auto 0; }
.perf-hola{ font-family:Georgia,'Times New Roman',serif; font-size:34px; }
.perf-sub{ color:var(--muted); margin:4px 0 20px; }
.perf-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
.perf-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px;
  box-shadow:0 4px 18px rgba(60,50,30,.05); }
.perf-card h4{ margin:0 0 12px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.perf-dato{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; font-size:13.5px; }
.perf-dato small{ display:block; color:var(--muted); font-size:10.5px; letter-spacing:.08em; }
.perf-res{ display:flex; flex-direction:column; gap:9px; font-size:13.5px; }
.perf-res b{ float:right; }
.perf-logo{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.perf-logo__img{ width:64px; height:64px; border-radius:12px; border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; }
.perf-logo__img img{ max-width:100%; max-height:100%; }
.perf-proy{ margin-top:16px; }
.perf-proy__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:10px; }
.perf-proy__card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  font-size:12.5px; cursor:pointer; }
.perf-proy__card:hover{ border-color:var(--oro); }
.perf-proy__card small{ display:block; color:var(--muted); margin-top:3px; }
.perf-cta{ margin-top:22px; text-align:right; }
.perf-hist{ margin-top:10px; font-size:12.5px; }
.perf-hist li{ margin-bottom:5px; color:#4a443a; }
.perf-hist li small{ color:var(--muted); }

/* aviso de muestra repetida */
.muestra-aviso{ background:#fdf3ec; border:1px solid #eccdb4; border-left:3px solid var(--terra);
  border-radius:8px; padding:7px 10px; font-size:11.5px; color:#7a4a26; margin-top:8px; }

/* ---- perfil con menú lateral (maqueta "Hola, Ana" · corrección 19-ago noche) ---- */
.perf-layout{ display:grid; grid-template-columns:225px minmax(0,1fr); gap:20px; max-width:1150px; margin:0 auto; padding:0 4px; }
.perf-side{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:10px 8px 14px;
  margin-top:26px; align-self:start; display:flex; flex-direction:column; gap:2px;
  box-shadow:0 4px 18px rgba(60,50,30,.05); position:sticky; top:12px; }
.perf-side__it{ display:block; padding:9px 12px; border-radius:10px; font-size:12.5px; color:#3c362b;
  cursor:pointer; text-decoration:none; }
.perf-side__it:hover{ background:var(--bg); }
.perf-side__it.is-active{ background:#f1ede4; font-weight:600; }
.perf-side__it--salir{ margin-top:10px; border-top:1px solid var(--line); border-radius:0 0 10px 10px; color:var(--muted); }
.perf-side__logo{ margin:14px auto 2px; width:86px; opacity:.85; }
.perf-side__logo img{ width:100%; display:block; }
.perf-layout .perf-wrap{ margin:26px 0 0; max-width:none; }
@media (max-width:900px){ .perf-layout{ grid-template-columns:1fr; } .perf-side{ position:static; flex-direction:row; flex-wrap:wrap; } .perf-side__logo{ display:none; } }

/* ---- pantalla COLECCIONES: los 2 catálogos (Curvatto · Organic) ---- */
#viewColecciones{ overflow:auto; }
.colecc{ max-width:980px; margin:34px auto 40px; padding:0 22px; }
.colecc__h{ font-family:Georgia,'Times New Roman',serif; font-size:34px; }
.colecc__sub{ color:var(--muted); margin:4px 0 22px; }
.colecc__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.colecc__card{ display:flex; flex-direction:column; text-align:left; gap:0; padding:0; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 6px 22px rgba(60,50,30,.07); transition:transform .15s, box-shadow .15s; }
.colecc__card:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(60,50,30,.12); }
.colecc__img{ display:block; height:225px; background-size:cover; background-position:center; }
.colecc__nm{ font-family:Georgia,serif; font-size:21px; letter-spacing:.14em; padding:14px 18px 2px; }
.colecc__tx{ font-size:12px; color:var(--muted); padding:0 18px 16px; }
.colecc__card--off .colecc__img{ filter:grayscale(.5) brightness(1.06); }
.colecc__card--off .colecc__nm::after{ content:"PRÓXIMAMENTE"; font-size:9px; letter-spacing:.2em; color:var(--terra);
  background:var(--terra-suave); border-radius:99px; padding:3px 9px; margin-left:10px; vertical-align:2px; }
.colecc__nota{ margin-top:18px; font-size:11.5px; color:var(--muted); }

/* ---- tarjetas del catálogo con foto de ejemplo (petición Fran 19-ago) ---- */
.cat-card__prev--foto{ position:relative; background-size:cover; background-position:center;
  min-height:150px; border-radius:12px 12px 0 0; overflow:hidden; }
.cat-card__prev--foto svg{ display:block; width:100%; height:100%; }
.cat-card__mini{ position:absolute; left:8px; right:8px; bottom:8px; height:36px;
  background:rgba(255,255,255,.88); border-radius:8px; padding:2px 6px;
  box-shadow:0 2px 8px rgba(40,32,16,.18); }
.cat-card__ej{ position:absolute; top:8px; right:8px; font-size:8px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:rgba(35,32,26,.55); border-radius:99px; padding:3px 8px; }
.cat-card__prev--foto .cat-card__fav{ position:absolute; top:8px; left:8px; z-index:2; }
/* tarjetas de familia: nombre superpuesto sobre la foto (mockup 20-ago) */
.colecc__grid--fam{ grid-template-columns:repeat(4,1fr); gap:18px; }
.colecc__card--fam{ position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  border:0; padding:0; cursor:pointer; background:#111; box-shadow:0 6px 22px rgba(60,50,30,.09);
  transition:transform .15s, box-shadow .15s; }
.colecc__card--fam:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(60,50,30,.16); }
.colecc__grid--fam .colecc__img{ position:absolute; inset:0; height:auto; border-radius:0;
  background-size:cover; background-position:center; filter:brightness(.86); }
.colecc__card--fam::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(transparent, rgba(20,16,10,.78)); }
.colecc__card--fam{ display:flex; flex-direction:column; justify-content:flex-end; padding:0 0 14px; }
.colecc__nm2{ position:relative; z-index:2; color:#fff; margin:0 15px 3px;
  font-size:16.5px; font-weight:600; line-height:1.15; text-shadow:0 2px 8px rgba(0,0,0,.55); }
.colecc__card--fam .colecc__tx{ position:relative; z-index:2; margin:0 15px;
  color:rgba(255,255,255,.85); font-size:11px; text-shadow:0 1px 6px rgba(0,0,0,.55); }
.colecc__card--off .colecc__img{ filter:brightness(.72) saturate(.55); }
@media (max-width:1100px){ .colecc__grid--fam{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .colecc__grid--fam{ grid-template-columns:1fr 1fr; } }
.colecc__volver{ display:inline-block; margin-bottom:10px; font-size:12px; color:var(--terra); cursor:pointer; }
.colecc__volver:hover{ text-decoration:underline; }

/* ---- menú lateral de familias (maquetas 19-ago): colecciones · catálogo · solicitud ---- */
#viewColecciones, #viewCatalogo, #viewCesta{ display:grid; grid-template-columns:212px minmax(0,1fr); gap:0; align-content:start; }
/* OJO: display en el ID pisa a .view[hidden] — hay que re-ocultarlas explícitamente */
#viewColecciones[hidden], #viewCatalogo[hidden], #viewCesta[hidden]{ display:none; }
.cat-side{ background:var(--card); border-right:1px solid var(--line); padding:14px 10px 16px;
  display:flex; flex-direction:column; gap:1px; align-self:stretch; min-height:100%; }
.cat-side__it{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:10px;
  font-size:12.3px; color:#3c362b; cursor:pointer; }
.cat-side__it i{ font-style:normal; width:17px; text-align:center; opacity:.75; font-size:12px; }
.cat-side__it:hover{ background:var(--bg); }
.cat-side__it.is-active{ background:#f1ede4; font-weight:600; }
.cat-side__logo{ margin:auto auto 8px; padding-top:16px; width:82px; opacity:.85; }
.cat-side__logo img{ width:100%; display:block; }
.cat-side__cuenta{ border-top:1px solid var(--line); border-radius:0 0 10px 10px; }
.side-main{ min-width:0; padding:16px 22px 26px; }
/* los paddings de la sección pasan al contenido para no duplicarse */
#viewCatalogo.view, #viewCesta.view, #viewColecciones.view{ padding:0; }
@media (max-width:980px){
  /* minmax(0,1fr): con 1fr a secas el mínimo de la pista es el min-content
     (la tabla del proyecto, 560px) y en móvil ensanchaba la página entera */
  #viewColecciones, #viewCatalogo, #viewCesta{ grid-template-columns:minmax(0,1fr); }
  /* el margin:0 auto del centrado (19-sep) impide el stretch del item apilado:
     el contenido quedaba a su ancho máximo (la tabla) y desbordaba en móvil */
  #viewCesta .side-main{ margin:0; max-width:none; }
  .cat-side{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line); }
  .cat-side__logo, .cat-side__cuenta{ display:none; }
}

/* ---- vistas Muestras y Direcciones + sidebar en TODAS las pantallas (19-ago noche) ---- */
#viewGuardadas, #viewPunto, #viewMensaje, #viewMuestras, #viewDirecciones, #viewVendedores{
  display:grid; grid-template-columns:212px minmax(0,1fr); gap:0; align-content:start; overflow:auto;
}
#viewGuardadas[hidden], #viewPunto[hidden], #viewMensaje[hidden], #viewMuestras[hidden], #viewDirecciones[hidden], #viewVendedores[hidden]{ display:none; }
#viewGuardadas.view, #viewPunto.view, #viewMensaje.view, #viewMuestras.view, #viewDirecciones.view, #viewVendedores.view{ padding:0; }
.muform{ max-width:1000px; margin:30px auto 40px; padding:0 22px; width:100%; }
.muform__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:start; }
.muform__lbl{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:10px 0 0; }
.muform__lbl .numin, .muform__lbl select{ display:block; width:100%; margin-top:5px; text-transform:none; letter-spacing:0; font-size:13px; }
.muform__lbl select.numin{ height:38px; }
.muform__row{ display:grid; grid-template-columns:1.4fr .6fr; gap:12px; }
.muform__acc{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; align-items:center; }
.muform__nota{ display:block; margin-top:10px; font-size:10.5px; color:var(--muted); }
.muform__nota a{ color:var(--terra); }
.dir-lista{ display:flex; flex-direction:column; gap:10px; }
.dir-card{ position:relative; border:1px solid var(--line); border-radius:10px; padding:9px 34px 10px 12px; font-size:12.5px; }
.dir-card b{ display:block; }
.dir-card span{ color:#4a443a; }
.dir-card small{ display:block; color:var(--muted); }
.dir-del{ position:absolute; top:8px; right:8px; width:22px; height:22px; border:1px solid var(--terra-suave);
  background:#fff; color:var(--terra); border-radius:6px; cursor:pointer; font-size:11px; }
.dir-del:hover{ background:var(--terra-suave); }
@media (max-width:980px){
  #viewGuardadas, #viewPunto, #viewMensaje, #viewMuestras, #viewDirecciones, #viewVendedores{ grid-template-columns:1fr; }
  .muform__grid{ grid-template-columns:1fr; }
}

/* vista previa del mueble en "Últimos proyectos" del perfil (20-ago) */
.perf-proy__foto{ display:block; height:88px; border-radius:8px; margin-bottom:7px;
  border:1px solid var(--line);
  background-color:#efe9dd;
  background-size:contain, cover; background-position:center, center 62%; background-repeat:no-repeat; }
.perf-proy__foto--ph{ background:#f4f1ea url('img/ambientes/salon-cliente2.jpg') center 62%/cover no-repeat; opacity:.55; }

/* ---- perfil: menú personal a toda la izquierda, como el de estancias (20-ago) ---- */
#viewPerfil.view{ padding:0; }
.perf-layout{ grid-template-columns:225px minmax(0,1fr); gap:0; max-width:none; margin:0; padding:0; }
.perf-side{ border:0; border-right:1px solid var(--line); border-radius:0; margin-top:0;
  box-shadow:none; position:static; min-height:100%; padding:16px 10px 16px; align-self:stretch; }
.perf-layout .perf-wrap{ margin:26px auto 30px; max-width:1000px; padding:0 26px; width:100%; }
.perf-datosop{ margin:12px 0 4px; border-radius:10px; }

/* ventana estrecha: la marca cede el sitio al precio (se pisaban en el
   configurador, que lleva muchos botones, por debajo de ~1300px) */
@media (max-width:1300px){
  .topbar .brand{ display:none; }
}
/* 8-oct (Alberto, «que se vea el título en tablet»): en el CONFIGURADOR el comercial necesita ver qué
   colección está configurando. De 768 a 1300px re-mostramos la marca y compactamos los botones a icono
   (misma receta que 901-1500) para que haya sitio y no se cruce con el precio. En teléfono (<768) sigue oculta. */
@media (max-width:1300px) and (min-width:768px){
  body.cfg-mode .topbar .brand{ display:flex; }
  body.cfg-mode #brandTxt.brand--serif{ font-size:26px; }
  body.cfg-mode .topbar__l{ gap:10px; }
  body.cfg-mode #resetBtn, body.cfg-mode #fichaBtn, body.cfg-mode #guardarBorradorBtn{
    font-size:0; gap:0; padding-left:11px; padding-right:11px; }
  body.cfg-mode #resetBtn svg, body.cfg-mode #fichaBtn svg, body.cfg-mode #guardarBorradorBtn svg{
    width:18px; height:18px; flex:none; }
}

/* ---- tabla de la solicitud: la DESCRIPCIÓN se lleva el ancho sobrante (20-ago) ----
   el autoreparto de la tabla estrangulaba la descripción en una columna estrecha */
#viewCesta .cesta-tabla, #viewCesta table{ table-layout:fixed; width:100%; }
#viewCesta thead th:nth-child(1){ width:64px; }
#viewCesta thead th:nth-child(3){ width:96px; }
#viewCesta thead th:nth-child(4){ width:104px; }
#viewCesta thead th:nth-child(5){ width:104px; }
#viewCesta thead th:nth-child(6){ width:74px; }
.cesta-desc__b{ flex:1 1 auto; min-width:0; }
.cesta-desc__t{ font-size:12.5px; line-height:1.5; }
.cesta-desglose ul li{ display:flex; justify-content:space-between; gap:12px; }
.cesta-desglose ul li span{ min-width:0; }
.cesta-desglose ul li b{ white-space:nowrap; }
/* miniatura algo más compacta en la tabla: más aire para la descripción */
#viewCesta .cesta-thumb{ width:128px; height:96px; }
/* inputs de los formularios Muestras/Direcciones: altura cómoda (estaban a 23px) */
.muform__lbl .numin{ height:38px; padding:8px 12px; }
/* la cabecera REFERENCIA necesita su sitio (se pegaba a DESCRIPCIÓN) */
#viewCesta thead th:nth-child(1){ width:84px; padding-right:10px; }

/* la marca de la topbar no se parte en dos líneas (se veía "P.ESPEJO ·" / "CURVATTO") */
#brandTxt{ white-space:nowrap; }
.topbar__l{ min-width:0; }

/* ============ LLAMADA 20-AGO: calcar los mockups ============ */

/* --- filas expandibles "botón que se agranda" (bocetos de Alberto) --- */
.exps{ display:flex; flex-direction:column; gap:8px; width:100%; }
.exp{ background:#fff; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .15s; }
.exp__head{ display:flex; align-items:center; gap:9px; width:100%; padding:11px 13px; border:0;
  background:none; cursor:pointer; font-size:12.8px; color:var(--ink); text-align:left; }
.exp__nm{ flex:1; font-weight:600; }
.exp__precio{ font-weight:400; font-size:11px; color:var(--muted); white-space:nowrap; }
.exp__chev{ font-style:normal; color:var(--muted); font-size:11px; transition:transform .15s; }
.exp.is-open{ border-color:var(--oro); box-shadow:0 4px 16px rgba(60,50,30,.08); }
.exp.is-open > .exp__head .exp__chev{ transform:rotate(180deg); }
.exp.is-open > .exp__head .exp__nm{ color:var(--accent-dark); }
.exp__body{ display:none; padding:0 13px 13px; }
.exp.is-open > .exp__body{ display:block; }
/* variantes GRANDES (mín. 4× las pastillas antiguas): cuadrícula 2×N con foto */
.exp__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.expvar{ border:2px solid var(--line); border-radius:10px; background:#fff; padding:0 0 6px; cursor:pointer;
  display:flex; flex-direction:column; gap:5px; overflow:hidden; }
.expvar i{ display:block; height:88px; background-size:cover; background-position:center; }
/* Alberto 24-sep · iPad Safari no pinta background-image dentro del cajón transformado
   de tablet → las miniaturas de tapa se sirven como <img> real (iOS siempre lo pinta) */
.tapacard i img, .expvar i img{ display:block; width:100%; height:100%; object-fit:cover; }
.expvar span{ font-size:11px; line-height:1.25; padding:0 7px; color:#3c362b; }
.expvar.is-active{ border-color:var(--accent); box-shadow:0 3px 10px rgba(168,131,59,.22); }
.expvar.is-active span{ font-weight:700; color:var(--accent-dark); }
/* foto grande de plafones / opciones */
.exp__foto{ display:block; width:100%; height:150px; border-radius:9px; background-size:cover; background-position:center;
  border:1px solid var(--line); }
.exp__foto--op{ background-color:#f4f1ea; }
.exp__foto--op.is-ph{ background-image:none !important; position:relative; }
.exp__foto--op.is-ph::after{ content:"📷 foto de fábrica en camino"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px; }
.exp__txt{ margin:8px 0 0; font-size:11.5px; color:var(--muted); line-height:1.45; }
.exp__phnota{ color:#b8b8b8; }
/* multiselección (opciones del elemento): tick + resaltado */
.exp--check .exp__tick{ width:19px; height:19px; flex:none; border:1.5px solid var(--line); border-radius:6px;
  font-style:normal; font-size:12px; line-height:17px; text-align:center; color:#fff; background:#fff; }
.exp--check.is-sel{ border-color:var(--accent); }
.exp--check.is-sel .exp__tick{ background:var(--accent); border-color:var(--accent); }
.exp--check.is-sel .exp__nm{ color:var(--accent-dark); }

/* --- iconos oficiales PARAMETRIX en el menú lateral + estancias fantasma --- */
.cat-side__ico{ width:19px; height:19px; flex:none; display:inline-flex; align-items:center; justify-content:center; color:#111; }
.cat-side__ico svg{ width:19px; height:19px; display:block; }
.cat-side__it.is-off .cat-side__ico{ color:#b8b8b8; }
.cat-side__it.is-off{ color:#b8b8b8; }
.cat-side__it.is-off:hover{ background:#faf9f6; }
/* 5-oct (José 2.2): etiqueta «Próximamente» en menú lateral y rejilla de categorías */
.cat-side__soon{ margin-left:auto; font-size:8.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:#b8933f; white-space:nowrap; }
.colecc__card--off{ cursor:default; }
.colecc__card--off .colecc__img{ filter:grayscale(1); opacity:.55; }
.colecc__card--off:hover{ transform:none; box-shadow:none; }
.colecc__prox{ display:inline-block; font-style:normal; font-size:.6em; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#a08a5a; background:#f3ecdd; border-radius:10px; padding:1px 7px; margin-left:6px; vertical-align:middle; }

/* --- cotas del visor más compactas (llamada: "ocupa mucho espacio") --- */
.glb-cotas{ gap:8px; padding:7px 12px; }
.glb-cotas .gc-m{ font-size:8.5px; letter-spacing:.1em; gap:2px; }
.glb-cotas input{ height:30px; font-size:13.5px; padding:2px 6px; }
.glb-cotas .gc-r{ font-size:8px; letter-spacing:.02em; }

/* --- Colecciones: 4 tarjetas verticales del mockup --- */
.colv__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.colv{ position:relative; border:0; padding:0; cursor:pointer; border-radius:14px; overflow:hidden;
  background:#111; aspect-ratio:10/13; box-shadow:0 6px 22px rgba(60,50,30,.10);
  transition:transform .15s, box-shadow .15s; text-align:left; }
.colv:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(60,50,30,.18); }
.colv__img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.82); }
.colv__nm{ position:absolute; left:16px; right:12px; bottom:14px; color:#fff; font-size:21px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:500;
  text-shadow:0 2px 10px rgba(0,0,0,.55); }
.colv__nm .colv__prox{ display:block; font-style:normal; font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; opacity:.85; margin-top:3px; }
.colv--off .colv__img{ filter:brightness(.72) saturate(.55); }
.datosop-fab{ position:fixed; right:0; bottom:0; z-index:40; background:#141414; color:#fff;
  border:0; border-radius:26px 0 0 0; padding:18px 24px 16px 26px; font-size:12px; cursor:pointer; }
.datosop-fab:hover{ background:#2b2b2b; }

/* --- Datos operativos (página simplificada) --- */
.perfil--datos{ max-width:640px; margin:34px auto; padding:0 22px; }
.datosop{ margin-top:16px; }
.datosop__id{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:12px; font-size:14px; }
.datosop__id small{ color:var(--muted); }
.datosop .preciotab{ width:100%; }
.datosop .preciotab th{ text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:7px 0; }
.datosop .preciotab td{ text-align:right; padding:7px 0; }
.datosop .preciotab__res b{ font-size:19px; color:var(--accent-dark); }

/* --- aviso de más muebles abajo (catálogo) --- */
.cat-cue{ position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:35;
  background:rgba(35,32,26,.82); color:#f4f0e7; font-size:11.5px; letter-spacing:.06em;
  border-radius:99px; padding:8px 18px; pointer-events:none; animation:cueFlota 1.6s ease-in-out infinite; }
.cat-cue.is-out{ opacity:0; transition:opacity .4s; }
@keyframes cueFlota{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,5px); } }

/* ============ NAVBAR de navegación (mockups 20-ago) ============ */
.navbar{ grid-row:1; display:flex; align-items:center; gap:20px; height:66px;
  padding:0 26px; background:var(--card); border-bottom:1px solid var(--line); }
.navbar[hidden]{ display:none; }
.navbar__logo{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:none; }
.navbar__logo img{ height:38px; width:auto; display:block; }
.navbar__logo-tx{ font-size:8px; letter-spacing:.16em; line-height:1.35; color:var(--muted); text-transform:uppercase; }
.navbar__menu{ flex:1; display:flex; justify-content:center; gap:34px; }
.navbar__menu a{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; cursor:pointer; padding:6px 0; border-bottom:2px solid transparent; }
.navbar__menu a:hover{ color:var(--accent-dark); }
.navbar__menu a.is-active{ border-bottom-color:var(--accent); }
.navbar__icons{ display:flex; align-items:center; gap:16px; flex:none; }
.navbar__ico{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink); background:none; border:0; cursor:pointer; text-decoration:none; }
.navbar__ico svg{ width:20px; height:20px; }
.navbar__ico:hover{ color:var(--accent-dark); }
/* con la navbar visible, la app la sitúa como fila 1 y oculta la topbar de acción */
body.nav-mode:not(.cfg-mode) .topbar{ display:none; }   /* Excel 16-sep: en el configurador el menú y la barra de acción conviven */
body.nav-mode .app{ grid-template-rows:auto 1fr; }
@media (max-width:900px){
  .navbar{ flex-wrap:wrap; height:auto; padding:10px 16px; gap:10px 16px; }
  .navbar__menu{ order:3; flex-basis:100%; justify-content:flex-start; gap:18px; flex-wrap:wrap; }
  .navbar__logo-tx{ display:none; }
}

/* ============ FAMILIAS: footer de garantías (mockup) ============ */
.fam-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin:28px 0 8px; padding:22px 26px; background:var(--card);
  border:1px solid var(--line); border-radius:16px; }
.fam-feat{ display:flex; align-items:center; gap:13px; }
.fam-feat__ico{ width:34px; height:34px; flex:none; color:var(--accent-dark); }
.fam-feat__ico svg{ width:34px; height:34px; }
.fam-feat__t{ font-size:13.5px; font-weight:600; color:var(--ink); }
.fam-feat__s{ font-size:11.5px; color:var(--muted); }
@media (max-width:900px){ .fam-features{ grid-template-columns:1fr 1fr; } }

/* ============ topbar CLARA del configurador (mockup 20-ago) ============ */
body.cfg-mode .topbar{ background:#faf8f4; border-bottom:1px solid var(--line); }
body.cfg-mode .brand__txt strong{ color:#23201a; }
/* "Curvatto" en serif, tal como el mockup */
#brandTxt.brand--serif{ font-family:Georgia,"Times New Roman",serif; font-size:24px;
  font-weight:400; letter-spacing:.5px; color:#23201a; }
body.cfg-mode .price__num small{ color:var(--muted); }
body.cfg-mode .price__num strong{ color:#23201a; }
body.cfg-mode .topbar .btn--ghost{ color:#4a443a; background:transparent; border-color:var(--line); }
body.cfg-mode .topbar .btn--ghost:hover{ background:#f0ece2; border-color:var(--accent); color:#23201a; }
body.cfg-mode .back-btn{ color:#4a443a; background:#fff; border:1px solid var(--line); }
body.cfg-mode .back-btn:hover{ border-color:var(--accent); color:#23201a; }
/* el botón "Añadir a la solicitud" sigue en su dorado/negro sobre la barra clara */

/* orden del catálogo (mockup 20-ago) */
.cat-status__r{ display:flex; align-items:center; gap:16px; }
.cat-orden{ font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.cat-orden select{ border:0; background:none; font-size:12px; color:var(--accent-dark); font-weight:600;
  cursor:pointer; font-family:inherit; }

/* ============ mockup 20-ago: cesta + botones del configurador ============ */
/* botón "Añadir a cesta" NEGRO en la topbar clara, como el mockup */
body.cfg-mode .topbar .btn--primary{ background:#16130e; border-color:#16130e; color:#fff; }
body.cfg-mode .topbar .btn--primary:hover{ background:#2b261d; border-color:#2b261d; }
body.cfg-mode .topbar .btn--primary svg{ stroke:#fff; }
/* iconos sociales de la topbar del configurador */
.topbar__soc{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; color:#4a443a; }
.topbar__soc svg{ width:19px; height:19px; }
.topbar__soc:hover{ background:#f0ece2; color:#23201a; }
body:not(.cfg-mode) .topbar__soc{ color:#b7ae9a; }
/* Descarga 3D: pastilla blanca abajo a la derecha del visor (mockup) */
.stage-desc3d{ background:#fff !important; color:#23201a !important; border:1px solid var(--line) !important;
  font-weight:600; }
.stage-desc3d:hover{ border-color:var(--accent) !important; background:#faf8f4 !important; }

/* filtros del catálogo sin números, con el lápiz de la maqueta */
.cat-filtro__ico{ width:17px; height:17px; vertical-align:-3px; margin-right:4px; color:var(--accent-dark); }

/* iconos de línea monocromos en el menú del perfil (maqueta "Hola, Ana") */
.perf-side__it svg{ width:16px; height:16px; flex:0 0 auto; vertical-align:-3px; margin-right:9px; color:#6f675c; }
.perf-side__it.is-active svg, .perf-side__it:hover svg{ color:#23201a; }

/* ---- cesta: la CANT. se pegaba al precio y los botones al borde (27-ago) ---- */
#viewCesta thead th:nth-child(3){ width:122px; }
#viewCesta thead th:nth-child(4){ width:112px; }
#viewCesta thead th:nth-child(5){ width:116px; }
#viewCesta thead th:nth-child(6){ width:92px; }
#viewCesta .cant-step{ gap:6px; padding:3px 7px; }
#viewCesta td{ padding-left:6px; padding-right:6px; }
#viewCesta .cesta-acc-td{ white-space:nowrap; text-align:center; padding-right:10px; }

/* ============ FIDELIDAD MAQUETAS 27-ago (revisión final) ============ */
/* fondo cálido tipo papel en las pantallas de navegación */
body.nav-mode{ background:#f6f3ec; }

/* --- navbar NEGRA en Colecciones/Familias (maquetas) --- */
body.nav-dark .navbar{ background:#131210; border-bottom-color:#000; }
body.nav-dark .navbar__logo img:not(.no-invert){ filter:invert(1); height:44px; }
body.nav-dark .navbar__logo--custom img{ filter:none !important; }
body.nav-dark .navbar__logo-tx{ color:#b9b2a4; }
body.nav-dark .navbar__menu a{ color:#f1ede4; }
body.nav-dark .navbar__menu a:hover{ color:#fff; }
body.nav-dark .navbar__ico{ color:#e7e1d4; }
body.nav-dark .navbar__ico:hover{ color:#fff; }
.navbar__mico{ width:14px; height:14px; vertical-align:-2px; margin-right:5px; }
.navbar__logo-tx{ font-size:9px; color:#8d8578; }

/* --- colecciones: 4 paneles verticales grandes (maqueta) --- */
.colv__grid{ gap:22px; }
.colv{ aspect-ratio:10/16; border-radius:10px; }
.colv__nm{ font-size:26px; left:20px; bottom:20px; }

/* 8-oct (Alberto, «la rejilla se descuadra en móvil»): la rejilla de Colecciones no tenía NINGÚN breakpoint
   → en teléfono/tablet seguían 4 columnas apretadas. Reflujo: ≤1100 → 3 col, ≤760 → 2 col; y si el recuento
   es impar, la última tarjeta ocupa la fila entera (banner) para que no quede coja. */
@media (max-width:1100px){ .colv__grid{ grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (max-width:760px){
  .colv__grid{ grid-template-columns:repeat(2,1fr); gap:13px; }
  .colv__grid > .colv:last-child:nth-child(odd){ grid-column:1 / -1; aspect-ratio:16/7; }
}

/* títulos serif con el peso fino de la maqueta */
.colecc__h, .cesta-title, .perf-hola{ font-weight:400; }

/* --- familias: volver discreto, etiquetas más ligeras, franja de garantías --- */
.colecc__volver{ color:var(--muted); }
.colecc__volver:hover{ color:var(--ink); }
.colecc__nm2{ font-weight:500; }
.colecc__tx{ font-weight:400; }
.fam-features{ border:1px solid var(--line); box-shadow:none; border-radius:12px; }
.fam-feat{ padding:2px 18px; }
.fam-feat + .fam-feat{ border-left:1px solid var(--line); }

/* --- catálogo: acento bronce, filtros como enlace, orden con chevron --- */
.cat-card__cfg{ background:#b3833f; border-color:#b3833f; color:#fff; }
.cat-card__cfg:hover{ background:#9c7134; border-color:#9c7134; }
/* sin GLB de fábrica (Fran 23-sep): Configurar y descargar-3D deshabilitados hasta
   que llegue el 3D real; el clic cae en la tarjeta (avisa «en preparación») */
.cat-card__cfg:disabled, .cat-card__cta:disabled{ opacity:.4; cursor:not-allowed; filter:grayscale(.45); box-shadow:none; pointer-events:none; }
.cat-card__mm{ font-size:11px; color:var(--muted); margin:4px 0 2px; }
.cta-cubo{ width:14px; height:14px; vertical-align:-2px; margin-left:4px; }
.cat-more{ background:none !important; border:0 !important; color:var(--accent-dark) !important; font-weight:600; }
.cat-more::after{ content:" ∨"; font-size:10px; }
.cat-orden{ color:var(--muted); }
.cat-orden select{ color:var(--accent-dark); }
.cat-orden::after{ content:"▾"; color:var(--accent-dark); font-size:10px; margin-left:2px; }

/* --- configurador: radio en las píldoras de instalación (maqueta) --- */
#bases .chip::before{ content:""; display:inline-block; width:11px; height:11px; border:1.5px solid #b6af9f;
  border-radius:50%; margin-right:7px; vertical-align:-1px; background:#fff; }
#bases .chip.is-active::before{ border-color:var(--accent-dark);
  background:radial-gradient(circle, var(--accent-dark) 0 3px, #fff 3.5px); }

/* --- cesta: banda de cabecera, separadores, títulos y botones (maqueta) --- */
.cesta-hero__img{ display:none; }
.cesta-title::after{ display:none; }
#viewCesta thead th{ background:#f5f2ec; padding-top:10px; padding-bottom:10px; white-space:nowrap; }
#viewCesta thead th:first-child{ border-radius:8px 0 0 8px; }
#viewCesta thead th:last-child{ border-radius:0 8px 8px 0; }
#viewCesta tbody td:nth-child(n+3){ border-left:1px solid #f1ede4; }
#viewCesta thead th:nth-child(1){ width:150px; }
.cesta-fila__ref{ text-align:center; }
.cesta-refcode{ display:block; margin-top:5px; font-size:10.5px; color:var(--muted); }
.cesta-desc__tt{ display:block; font-family:Georgia,"Times New Roman",serif; font-size:16px; margin-bottom:2px; }
.cesta-linea-arch > summary{ text-transform:uppercase; letter-spacing:.08em; font-size:10px; white-space:nowrap; }
.cesta-linea-arch > summary::after{ content:" ∨"; font-size:9px; }
.cesta-edit,.cesta-del{ width:30px; height:30px; border-color:var(--terra-suave); color:var(--terra); background:#fff; }
.cesta-edit{ color:var(--terra); }
.cesta-edit:hover,.cesta-del:hover{ background:var(--terra-suave); border-color:var(--terra); }

/* --- perfil: títulos en frase, filas con separador, enlaces Ver todo (maqueta) --- */
.perf-hola{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:700; font-size:31px; }
.perf-card h4{ font-size:15px; letter-spacing:0; text-transform:none; color:var(--ink); font-weight:700; }
.perf-res span{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); }
.perf-res span:last-child{ border-bottom:0; }
.perf-vertodo{ display:block; text-align:center; font-size:12px; color:var(--accent-dark); cursor:pointer; padding:8px 0 0; }
.perf-vertodo:hover, .perf-vertodos:hover{ text-decoration:underline; }
.perf-proy__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.perf-proy__head h4{ margin:0; font-size:15px; font-weight:700; color:var(--ink); }
.perf-vertodos{ font-size:12px; color:var(--accent-dark); cursor:pointer; }
.perf-datosop{ width:100%; text-align:center; justify-content:center; }
/* tarjetas de proyecto planas como la maqueta: imagen con borde y texto sobre el fondo */
.perf-proy__card{ background:none; border:0; box-shadow:none; padding:0; }
.perf-proy__card .perf-proy__foto, .perf-proy__card i{ border:1px solid var(--line); border-radius:4px; }
/* la cabecera PRECIO UNITARIO no se corta */
#viewCesta thead th{ letter-spacing:.09em; overflow:visible; }
#viewCesta thead th:nth-child(4){ width:118px; }

/* ============ cabecera de acción CLARA en TODAS las pantallas (27-ago) ============
   las maquetas solo usan barra negra en Colecciones/Familias (navbar); la topbar
   de acción (configurador, panel de fábrica) es siempre clara */
.topbar{ background:#faf8f4; border-bottom:1px solid var(--line); }
.brand__txt strong{ color:#23201a; }
.brand__txt small{ color:var(--muted); }
.topbar .price__num small{ color:var(--muted); }
.topbar .price__num strong{ color:#23201a; }
.topbar .btn--ghost{ color:#4a443a; background:transparent; border-color:var(--line); }
.topbar .btn--ghost:hover{ background:#f0ece2; border-color:var(--accent); color:#23201a; }
.back-btn{ color:#4a443a; background:#fff; border:1px solid var(--line); }
.back-btn:hover{ border-color:var(--accent); color:#23201a; }

/* ============ REVISIÓN ALBERTO 30-AGO (20 puntos) ============ */
/* P2/P3 · caja de logo punteada: solo para el logo del cliente */
.logo-caja{ position:relative; width:96px; min-height:72px; margin:16px auto 10px; border:1.5px dashed #c9c2b2;
  border-radius:6px; display:flex; align-items:center; justify-content:center; padding:6px; }
.logo-caja img{ max-width:100%; max-height:64px; display:block; }
.logo-caja__ph{ display:flex; flex-direction:column; align-items:center; gap:2px; color:#b3ac9c;
  font-size:9px; letter-spacing:.18em; }
.logo-caja__ph b{ font-weight:600; }
.logo-caja--con{ border-style:solid; border-color:var(--line); }
.logo-caja--con .logo-caja__ph{ display:none; }

/* P6 · cerrar sesión discreto en la página del perfil */
.perf-salir{ display:inline-block; margin-top:12px; font-size:12px; color:var(--muted);
  cursor:pointer; text-decoration:underline; }
.perf-salir:hover{ color:var(--terra); }

/* P8 · botón flotante de tarifa + desplegable */
.tarifa-fab-wrap{ position:fixed; right:0; bottom:0; z-index:40; }
.tarifa-fab-wrap .datosop-fab{ position:static; }
.tarifa-menu{ position:absolute; right:10px; bottom:100%; margin-bottom:8px; background:#fff;
  border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(40,32,16,.18);
  display:flex; flex-direction:column; min-width:230px; overflow:hidden; }
.tarifa-menu__op{ border:0; background:none; text-align:left; padding:11px 16px; font-size:13px;
  cursor:pointer; color:var(--ink); }
.tarifa-menu__op:hover{ background:var(--oro-suave); }
.tarifa-menu__op.is-active{ font-weight:700; color:var(--accent-dark); }
.tarifa-menu__op.is-active::after{ content:" ✓"; }
.tarifa-menu__op--datos{ border-top:1px solid var(--line); color:var(--muted); font-size:12px; }

/* P11 · garantías también en Colecciones */
.colecc__garantias{ margin-top:26px; }

/* P14 · el deslizador del frente es un indicador */
.range--indicador{ pointer-events:none; opacity:1; }

/* P15 · TIPO DE INSTALACIÓN con la misma letra que los títulos de bloques */
.rib__head{ letter-spacing:.16em; }

/* P17 · filtro compacto: mismas opciones en menos alto */
.cat-filtros{ padding:12px 18px 10px; border-radius:14px; box-shadow:none; margin-bottom:10px; }
.cat-filtro{ margin-bottom:8px; }
.cat-filtro__t{ margin-bottom:6px; }
.cat-chips{ gap:6px; }
.cat-chip{ padding:6px 12px; font-size:12px; }

/* P18 · dos líneas de 6 productos en una pantalla */
@media (min-width:1100px){
  .catalogo{ grid-template-columns:repeat(6, 1fr); gap:10px; }
  .cat-card{ padding:8px; border-radius:11px; gap:6px; }
  .cat-card__prev{ height:108px; }
  .cat-card__name{ font-size:16.5px; }
  .cat-card__kicker{ font-size:8.5px; }
  .cat-card__meta{ font-size:10px; }
  .cat-card__mm{ font-size:10px; margin:2px 0 0; }
  .cat-card__price{ font-size:11px; }
  .cat-card__acc{ gap:5px; }
  .cat-card__cta, .cat-card__cfg{ padding:6px 6px; font-size:10.5px; }
  .cat-card__mini{ transform:scale(.82); transform-origin:bottom center; }
}
.cat-vacio{ grid-column:1/-1; background:var(--card); border:1px dashed var(--line); border-radius:12px;
  padding:26px; text-align:center; color:var(--muted); font-size:13.5px; }

/* P19 · cesta: la DESCRIPCIÓN se lleva el ancho */
#viewCesta thead th{ font-size:9px; letter-spacing:.07em; }
#viewCesta thead th:nth-child(1){ width:112px; }
#viewCesta thead th:nth-child(3){ width:104px; }
#viewCesta thead th:nth-child(4){ width:100px; }
#viewCesta thead th:nth-child(5){ width:104px; }
#viewCesta thead th:nth-child(6){ width:80px; }
#viewCesta .cesta-thumb{ width:96px; height:72px; }
#viewCesta .cant-step{ gap:4px; padding:2px 6px; }
.cesta-desc__t{ font-size:12.5px; }

/* P20 · botón guardar borrador en la cesta */
.cesta-borr{ width:100%; justify-content:center; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.cesta-borr svg{ width:15px; height:15px; }
/* alineación del selector Orden con su etiqueta */
.cat-orden{ display:inline-flex; align-items:center; gap:5px; }

/* ---- fixes 31-ago (captura de Fran) ---- */
/* el popup de tarifa se cierra de verdad (display:flex pisaba el atributo hidden) */
.tarifa-menu[hidden]{ display:none; }
/* la caja de logo sin logo no enseña una imagen rota */
.logo-caja img[hidden]{ display:none; }
/* los ítems del lateral en fantasma no reaccionan al ratón */
.cat-side__it.is-off{ cursor:default; }

/* casilla de observaciones del pedido junto al total (captura Alberto 31-ago) */
.cesta-obs__lbl{ display:block; margin:12px 0 5px; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600; }
.cesta-obs__txt{ width:100%; }

/* ============ RESPUESTAS ROSA de Alberto (31-ago tarde) ============ */
/* R1 · "SIEMPRE NEGRA": la barra de acción (configurador y fábrica) también en negro */
.topbar, body.cfg-mode .topbar{ background:#131210; border-bottom:1px solid #000; }
.brand__txt strong, body.cfg-mode .brand__txt strong{ color:#f4f0e7; }
#brandTxt.brand--serif{ color:#f4f0e7; }
.topbar .price__num small, body.cfg-mode .price__num small{ color:#b7ae9a; }
.topbar .price__num strong, body.cfg-mode .price__num strong{ color:#fff; }
.topbar .btn--ghost, body.cfg-mode .topbar .btn--ghost{ color:#e7e1d4; background:transparent; border-color:#4a4436; }
.topbar .btn--ghost:hover, body.cfg-mode .topbar .btn--ghost:hover{ background:#2f2a20; border-color:var(--accent); color:#fff; }
.back-btn, body.cfg-mode .back-btn{ color:#e7e1d4; background:#26221b; border:1px solid #4a4436; }
.back-btn:hover, body.cfg-mode .back-btn:hover{ border-color:var(--accent); color:#fff; }
/* el botón principal, dorado sobre negro */
body.cfg-mode .topbar .btn--primary{ background:var(--accent); border-color:var(--accent); color:#1d1a13; }
body.cfg-mode .topbar .btn--primary:hover{ background:#c8a94e; border-color:#c8a94e; }
body.cfg-mode .topbar .btn--primary svg{ stroke:#1d1a13; }
.topbar__soc, body:not(.cfg-mode) .topbar__soc{ color:#b7ae9a; }
.topbar__soc:hover{ background:#2f2a20; color:#fff; }

/* R2 · logo del cliente arriba (fuera de Mi perfil): sin invertir, sobre placa blanca */
body.nav-dark .navbar__logo--custom img{ filter:none !important; background:#fff; border-radius:6px;
  padding:3px 6px; height:40px; width:auto; }

/* R3 · icono de cesta en la navbar con contador */
.navbar__ico--cesta{ position:relative; }
.navbar__badge{ position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; border-radius:99px;
  background:var(--accent); color:#1d1a13; font-size:10px; font-weight:700; line-height:16px;
  text-align:center; padding:0 4px; font-style:normal; }
.navbar__badge[hidden]{ display:none; }


/* ===== REUNIÓN 2-sep · precios (REGLAS del configurador, Excel 1-SEP) ===== */
/* aviso de largo máximo de fabricación de una tapa: el frente configurado supera
   el largo de la pieza y la tapa tendría que servirse en 2 trozos */
.exp__ko{ font-style:normal; font-size:11px; font-weight:600; color:#a8452f;
  background:#f7e7e2; border:1px solid #eccfc6; border-radius:99px;
  padding:1px 7px; margin-left:6px; white-space:nowrap; vertical-align:middle; }
.exp__ko[hidden]{ display:none; }


/* ===== REUNIÓN 2-sep · configurador-a (columna lateral) ===== */
/* W18 · tarjetas ocultas de verdad (.rib{display:flex} pisaba el atributo hidden) */
.rib[hidden], .rib--oculta{ display:none !important; }

/* W18 · cabecera: nombre del mueble + acabado debajo + Mín/Máx + línea indicadora */
.rib--modelo .modelo-sel{ align-items:flex-start; }
.rib--modelo .modelo-sel__txt strong{ font-size:19px; font-weight:600; letter-spacing:.01em; }
.rib--modelo .modelo-sel__txt small{ color:var(--muted); font-size:11px; }
.chips--mm{ flex:none; gap:6px; }
#viewConfig .chips--mm .chip{ padding:5px 10px; font-size:10.5px; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; }
.rib--modelo .range--indicador{ margin-top:2px; }

/* W18 · TIPO DE INSTALACIÓN con radios (maqueta 2-sep) */
.rib__head--radio::before{ content:""; width:10px; height:10px; border-radius:50%;
  border:1.5px solid var(--line); background:#fff; display:inline-block;
  margin-right:5px; align-self:center; flex:none; }
.chip--radio{ display:inline-flex; align-items:center; gap:7px; }
.radio-dot{ width:12px; height:12px; border-radius:50%; border:1.5px solid #cfc8b8;
  background:#fff; display:inline-block; flex:none; font-style:normal; }
.chip--radio.is-active .radio-dot{ border-color:#fff; box-shadow:inset 0 0 0 3px var(--accent);
  background:#fff; }

/* W18/X4/X7 · cabecera del bloque COLOR CUERPO */
.cuerpo-top{ display:flex; align-items:stretch; gap:7px; flex-wrap:wrap; }
.seg-ral{ display:inline-flex; align-items:stretch; border:1px solid var(--line);
  border-radius:999px; overflow:hidden; background:#fff; }
.seg-ral.is-off{ opacity:.55; }
.seg-ral__sys{ border:0; background:var(--oro-suave); font:inherit; font-size:11.5px;
  font-weight:600; letter-spacing:.06em; padding:6px 13px; cursor:pointer; color:var(--ink); }
.seg-ral__sys:hover{ background:#efe4d2; }
.seg-ral__code{ border:0; border-left:1px solid var(--line); background:#fff; width:66px;
  font:inherit; font-size:12px; font-weight:600; text-align:center; padding:6px 4px; color:var(--ink); }
.seg-ral__code:focus{ outline:none; box-shadow:inset 0 0 0 2px rgba(168,131,59,.25); }
#viewConfig .chip--pill2{ line-height:1.1; text-align:center; font-size:9.5px; letter-spacing:.07em;
  text-transform:uppercase; padding:5px 12px; }
.panel-desp{ margin-top:9px; padding:10px; border:1px dashed var(--line); border-radius:12px;
  background:#fbf9f4; }
.panel-desp[hidden]{ display:none; }
.panel-desp__nota{ display:block; margin-top:8px; font-size:10px; color:var(--muted); line-height:1.35; }
.desp-op{ display:block; width:100%; text-align:left; border:1px solid var(--line);
  background:#fff; border-radius:10px; padding:9px 12px; font:inherit; font-size:12.5px;
  cursor:pointer; margin-bottom:7px; color:var(--ink); }
.desp-op:last-child{ margin-bottom:0; }
.desp-op:hover{ border-color:var(--accent); }
.desp-op small{ display:block; color:var(--muted); font-size:10.5px; margin-top:2px; line-height:1.3; }

/* W18 · muestras del cuerpo con su nombre (ROBLE PURE / ROBLE NATURAL) */
#colorCuerpo .cuerpo-sw i{ width:46px; height:46px; }
#colorCuerpo .cuerpo-sw span{ font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  max-width:62px; text-align:center; line-height:1.2; }
#colorCuerpo .cuerpo-sw .sw-wood{ background-size:cover !important; }

/* X7 · cuadrante de 4 efectos del acabado */
.efectos-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.efecto{ border:1.5px solid var(--line); border-radius:11px; background:#fff; padding:0 0 7px;
  cursor:pointer; font:inherit; overflow:hidden; text-align:center; }
.efecto__foto{ display:block; height:62px; background-size:cover; background-position:center;
  background-color:#f1ede4; }
.efecto__foto.is-ph{ background-image:none !important; position:relative; }
.efecto__foto.is-ph::after{ content:"\1F4F7"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:15px; opacity:.45; }
.efecto span{ display:block; font-size:10.5px; padding:6px 5px 0; line-height:1.2; color:var(--ink); }
.efecto b{ display:block; font-size:9.5px; font-weight:400; color:var(--muted); margin-top:2px; }
.efecto:hover{ border-color:#cdc7b4; }
.efecto.is-active{ border-color:var(--accent); box-shadow:0 3px 10px rgba(168,131,59,.22); }
.efecto.is-active span{ font-weight:700; color:var(--accent-dark); }
.efecto.is-off{ opacity:.38; cursor:not-allowed; filter:grayscale(1); }

/* X11 · marca P / C en las opciones del elemento */
.pc-mark{ font-style:normal; font-size:9px; font-weight:700; letter-spacing:.04em;
  border:1px solid var(--oro); color:var(--accent-dark); background:var(--oro-suave);
  border-radius:5px; padding:1px 4px; flex:none; }
.exp__phnota{ margin:6px 0 0; font-size:10.5px; color:var(--terra); line-height:1.35; }

/* X6 · baldas de melamina de serie (texto, no seleccionable) */
.nota-serie{ margin:10px 0 0; font-size:11.5px; color:var(--muted); }
.nota-serie::before{ content:"\B7"; margin-right:6px; color:var(--oro); font-weight:700; }

/* W18 · el asistente y las cápsulas de medida señalan la barra de cotas */
#glbCotas.guia-activa{ border-radius:12px; animation:guiaHalo 1.8s ease-in-out infinite; }

/* ===== REUNIÓN 2-sep · configurador-b (tapa, puertas y cajón) ===== */
/* los tres bloques dejan de ser tiras de chips: llevan rejillas y listas propias */
#tapas, #puertas, #cajones{ display:block; width:100%; }
/* un display: en CSS pisa el atributo hidden: se protege explícitamente */
#tapas[hidden], #puertas[hidden], #cajones[hidden]{ display:none; }

/* X8 · cabecera del boceto: [RAL + código] y el rótulo OTROS ACABADOS */
.tapa-cab{ display:flex; align-items:center; gap:14px; margin-bottom:11px; }
.tapa-cab .seg-ral__code{ width:60px; }
.tapa-cab .seg-ral:not(.is-on) .seg-ral__sys{ background:#fff; color:var(--muted); font-weight:500; }
.tapa-cab .seg-ral.is-on{ border-color:var(--oro); box-shadow:0 3px 10px rgba(168,131,59,.18); }
.tapa-cab__t{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  line-height:1.25; max-width:88px; }

/* X8 · dos filas de tres familias */
.tapa-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px; }
.tapacard{ border:1.5px solid var(--line); border-radius:11px; background:#fff; padding:0 0 7px;
  cursor:pointer; font:inherit; overflow:hidden; text-align:center; color:var(--ink); }
.tapacard i{ display:block; height:54px; background-size:cover; background-position:center;
  background-color:#f1ede4; }
.tapacard span{ display:block; font-size:10px; line-height:1.2; padding:6px 4px 0;
  text-transform:uppercase; letter-spacing:.03em; }
.tapacard em{ display:block; font-size:8.5px; font-style:normal; color:var(--terra); padding:2px 4px 0; line-height:1.2; }
.tapacard:hover{ border-color:#cdc7b4; }
.tapacard.is-active{ border-color:var(--accent); box-shadow:0 3px 10px rgba(168,131,59,.22); }
.tapacard.is-active span{ font-weight:700; color:var(--accent-dark); }
.tapacard.is-off{ opacity:.32; cursor:not-allowed; filter:grayscale(1); }

/* X8 · panel de la familia elegida */
.tapa-panel{ border-top:1px dashed var(--line); margin-top:4px; padding-top:10px; }
.tapa-sel{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.tapa-sel span{ flex:1; font-size:12.5px; font-weight:600; color:var(--accent-dark); line-height:1.25; }
.tapa-sel b{ font-size:11px; font-weight:400; color:var(--muted); white-space:nowrap; }
.tapa-largo{ margin:0 0 9px; font-size:10.5px; color:var(--muted); line-height:1.35; }
.tapa-largo.is-ko{ color:#a8452f; font-weight:600; }
.tapa-igual, .tapa-filo{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:9px; }
.tapa-igual .chip, .tapa-filo .chip{ font-size:11.5px; }
.tapa-filo .detalle-lbl{ width:100%; margin-bottom:2px; }
.tapa-nota{ display:block; width:100%; margin:6px 0 0; font-size:10.5px; color:var(--muted); line-height:1.4; }
.tapa-nota .chip{ margin-left:6px; font-size:11px; }
.expvar__lg{ display:block; font-style:normal; font-size:9.5px; color:var(--muted); margin-top:2px; }
.tapa-otros{ display:block; font-size:10.5px; color:var(--muted); margin-top:9px; line-height:1.35; }
.tapa-otros .numin{ display:block; width:100%; margin-top:4px; }
.tapa-otros--mold{ border-top:1px dashed var(--line); padding-top:9px; }

/* X9/X10 · desplegables CON MOLDURA / SIN MOLDURA */
.exp--grupo.is-off{ opacity:.5; }
.exp--grupo.is-off .exp__head{ cursor:not-allowed; }
.plafon{ display:flex; align-items:center; gap:10px; width:100%; border:1px solid var(--line);
  background:#fff; border-radius:10px; padding:6px 8px; margin-bottom:7px; cursor:pointer;
  font:inherit; text-align:left; color:var(--ink); }
.plafon:last-child{ margin-bottom:0; }
.plafon i{ width:52px; height:38px; border-radius:7px; flex:none; background-size:cover;
  background-position:center; background-color:#f0ece2; }
.plafon__liso{ background:linear-gradient(135deg,#f4f1e9,#e6e1d5); }
.plafon span{ flex:1; font-size:12.5px; line-height:1.25; }
.plafon span small{ display:block; font-size:10px; color:var(--muted); line-height:1.3; margin-top:1px; }
.plafon b{ font-size:10.5px; font-weight:400; color:var(--muted); white-space:nowrap; }
.plafon:hover{ border-color:#cdc7b4; }
.plafon.is-active{ border-color:var(--accent); background:var(--oro-suave); }
.plafon.is-active span{ font-weight:600; color:var(--accent-dark); }
.plafon__ral{ display:block; font-size:10.5px; color:var(--muted); margin:-2px 0 8px; padding:0 2px;
  line-height:1.35; }
.plafon__ral .numin{ display:block; width:100%; margin-top:3px; }
/* ★ t17 (José 22-oct · regla 10): CON MOLDURA | SIN MOLDURA en la MISMA línea (las cabeceras de los dos grupos, una junto a la otra) y
   debajo SOLO los frentes de la elegida. Mismo DOM de siempre (.exp--grupo con su cabecera y su cuerpo): solo cambia la colocación. */
.exps--moldura{ flex-direction:row; flex-wrap:wrap; gap:8px; }
.exps--moldura > .exp--grupo{ display:contents; }
.exps--moldura > .exp--grupo > .exp__head{ order:1; flex:1 1 0; min-width:0; justify-content:center; gap:6px; padding:10px 8px;
  border:1.5px solid var(--color-border, var(--line)); border-radius:var(--radius-control, 12px); background:var(--color-control, #fff); }
.exps--moldura > .exp--grupo > .exp__head .exp__nm{ flex:none; }
.exps--moldura > .exp--grupo > .exp__head .exp__chev,
.exps--moldura > .exp--grupo > .exp__head .exp__precio{ display:none; }
.exps--moldura > .exp--grupo.is-off > .exp__head .exp__precio{ display:inline; }
.exps--moldura > .exp--grupo.is-sel > .exp__head{ border-color:var(--accent); background:var(--oro-suave); }
.exps--moldura > .exp--grupo.is-sel > .exp__head .exp__nm{ color:var(--accent-dark); }
.exps--moldura > .exp--grupo.is-off > .exp__head{ opacity:.5; filter:grayscale(.55); cursor:not-allowed; }
.exps--moldura > .exp--grupo > .exp__body{ order:2; flex:0 0 100%; width:100%; display:none; padding:0; }
.exps--moldura > .exp--grupo.is-open > .exp__body{ display:block; }
/* ★ t17 (reglas 8 y 9): acabado del zócalo (a todo el ancho, como el color de las patas) y opción no elegible en gris */
#bases .zocalo-block{ grid-column:1 / -1; margin-top:6px; }
.cuerpo-sw.is-off{ opacity:.45; cursor:not-allowed; }


/* ===== REUNIÓN 2-sep · barra (logo, menú y cesta · W4 · W5 · W7) ===== */
/* W7 · logo P.ESPEJO nuevo: bloque completo (árbol + P.ESPEJO + PROJECT & FURNITURE
   + SINCE 1967) en BLANCO con alfa real. Ya no se invierte (lleva .no-invert) y,
   al traer el texto dentro, sustituye al <span class="navbar__logo-tx"> retirado.
   El logo del CLIENTE (.navbar__logo--custom) conserva su placa blanca de R2. */
.navbar__logo:not(.navbar__logo--custom) img{ height:48px; }
body.nav-dark .navbar__logo:not(.navbar__logo--custom) img{ filter:none; height:48px; }
.navbar__logo img.no-invert{ filter:none; }
/* W7 · logo, menú e iconos centrados verticalmente en la barra */
.navbar{ align-items:center; }
.navbar__logo{ align-self:center; gap:0; }
.navbar__menu{ align-items:center; }
.navbar__icons{ align-self:center; }

/* W5 · icono de cesta nuevo (carrito de rejilla de trazo fino con dos ruedas):
   pide algo más de tamaño que el carrito anterior para que la rejilla se lea.
   Pisa a `.topbar .btn svg{ width:15px }` por especificidad (0,3,0) > (0,2,1). */
.ico-cesta{ width:20px; height:20px; flex:none; }
.navbar__ico .ico-cesta{ width:21px; height:21px; }
.topbar .btn .ico-cesta{ width:17px; height:17px; }
.ico-cesta[hidden]{ display:none; }

/* ===== REUNIÓN 2-sep · tipografia ===== */
/* W3 · Inter en TODA la web (tambien los titulos que iban en Georgia/Cormorant)
   + W2 · tamanos y pesos de la maqueta doc1 en la pantalla "Mi perfil".
   Esta capa va la ULTIMA del fichero a proposito: repite las mismas selectoras
   que las reglas anteriores, con la misma especificidad, y gana por orden.
   Si otra zona necesita pisar alguna de estas propiedades, su bloque debe ir
   DESPUES de este. */

/* ---- W3 · token tipografico unico ---- */
:root{
  --ff:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body{ font-family:var(--ff); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* los controles de formulario NO heredan la fuente por defecto: .btn, .select,
   .seg y varios input/textarea se quedaban en la fuente del sistema */
button, input, select, textarea, optgroup{ font-family:inherit; }

/* ---- W3 · las 19 reglas que llevaban fuente propia (serif o sans a mano) ---- */
.view__t,
.cat-card__name,
.rng-big,
.glbdemo__head strong,
.hroom__h1,
.hroom__h2,
.hroad__dot span,
.brand__txt strong,
.cesta-title,
.pedido__title,
.perfil__title,
.perfil__h,
.admin__form-title,
.perf-hola,
.colecc__h,
.colecc__nm,
.cesta-desc__tt,
.colv__nm,
.plano text,
.ficha{ font-family:var(--ff); }
/* selector con ID (1-1-0): hay que repetirlo tal cual para poder pisarlo */
#brandTxt.brand--serif{ font-family:var(--ff); }
/* aviso de render pendiente: iba en Cormorant cursiva */
.photo-stage.photo-missing::before{ font-family:var(--ff); font-style:normal; }

/* ---- W2 · menu superior: SemiBold 600 / 14px ---- */
/* el letter-spacing baja de .14em a .08em: a 14px en mayusculas los items
   crecen ~30 % y con .14em se comen el hueco central de la barra */
.navbar__menu a{ font-size:14px; font-weight:600; letter-spacing:.08em; }

/* ---- W2 · menu lateral del perfil: Medium 500 / 14px (activo 600) ---- */
.perf-side__it{ padding:10px 12px; font-size:14px; font-weight:500; }
.perf-side__it.is-active{ font-weight:600; }

/* ---- W2 · cuerpo de "Mi perfil" (doc1) ---- */
/* "Hola, {nombre}" SemiBold 32px */
.perf-hola{ font-weight:600; font-size:32px; letter-spacing:-.015em; margin:0; }
/* texto de bienvenida Regular 16px. Se usa p.perf-sub a proposito: la misma
   clase se reutiliza dentro de <small> (bloque del logo) y en el vacio de
   proyectos que pinta app.js; ahi debe seguir siendo texto pequeno */
p.perf-sub{ font-size:16px; font-weight:400; margin:6px 0 26px; }
/* titulos de panel (Informacion personal · Resumen de actividad · Mis muestras) */
.perf-card h4{ font-size:18px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--ink); margin:0 0 16px; }
/* rejilla de datos: valores Regular 14px */
.perf-dato{ gap:18px 30px; font-size:14px; }
/* etiquetas Nombre / Profesion / Email / Telefono: SemiBold 13px en tinta */
.perf-dato small{ display:block; color:var(--ink); font-size:13px; font-weight:600;
  letter-spacing:0; margin-bottom:6px; }
/* el dato va en Regular, no en negrita (doc1) */
.perf-dato b{ font-size:14px; font-weight:400; color:#4a443a; }
/* cada dato con su filete inferior, como la maqueta */
.perf-dato > span{ padding-bottom:9px; border-bottom:1px solid var(--line); }
/* resumen de actividad 14px / 500, la cifra 600 */
.perf-res{ font-size:14px; font-weight:500; }
.perf-res b{ font-weight:600; }
/* boton "Datos operativos" SemiBold 15px */
.perf-datosop{ font-size:15px; font-weight:600; padding:14px 16px; }
/* "Ver todo" y "Ver todos >" SemiBold 13,5px */
.perf-vertodo{ font-size:13.5px; font-weight:600; padding:12px 0 0; }
.perf-vertodos{ font-size:13.5px; font-weight:600; }
/* "Ultimos proyectos" SemiBold 18px */
.perf-proy__head h4{ font-size:18px; font-weight:600; }
/* tarjetas de proyecto: nombre SemiBold 14px, fecha Regular 12px */
.perf-proy__card b{ display:block; font-size:14px; font-weight:600; color:var(--ink); line-height:1.25; }
.perf-proy__card small{ display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:3px; }
/* un display: en CSS pisa el atributo hidden: lo que se oculte por atributo en
   cualquiera de las selectoras de arriba tiene que seguir oculto */
.perf-dato small[hidden],
.perf-dato > span[hidden],
.perf-res span[hidden],
.perf-vertodo[hidden],
.perf-proy__card b[hidden],
.perf-proy__card small[hidden]{ display:none; }

/* ===== REUNIÓN 2-sep · perfil (W6 · W9 · W16) ===== */
/* W6 · la caja del logo del cliente, ABAJO DEL TODO de la columna lateral.
   (.logo-caja de ~2648 pisaba el margin:auto de .cat-side__logo: por eso esta capa
   tiene que ir la ultima del fichero) */
.perf-side__bottom, .cat-side__bottom{ margin-top:auto; padding-top:18px; width:100%; }
.perf-side .logo-caja, .cat-side .logo-caja{ margin:0 auto 8px; padding:6px; cursor:pointer; }
.perf-side .logo-caja:hover, .cat-side .logo-caja:hover{ border-color:var(--accent); }
/* W16 · sello bajo la caja del logo (doc10) */
.side-distri{ display:block; text-align:center; color:#8d8578; font-size:8px;
  letter-spacing:.1em; line-height:1.7; text-transform:uppercase; }
.side-distri b{ display:block; font-weight:700; font-size:9px; letter-spacing:.34em; color:#5f594e; }
/* en movil el lateral se vuelve una fila: el pie del lateral no pinta nada */
@media (max-width:900px){ .perf-side__bottom{ display:none; } }
@media (max-width:980px){ .cat-side__bottom{ display:none; } }
/* un display: en CSS pisa el atributo hidden */
.perf-side__bottom[hidden], .cat-side__bottom[hidden], .side-distri[hidden]{ display:none; }

/* ===== REUNIÓN 2-sep · acceso (W17 · X1 · X2) ===== */
/* --- W17 · pantalla de acceso: olvido, invitado y particular --- */
.login__olvide{ border:0; background:none; padding:0; font:inherit; font-size:12.5px;
  color:var(--accent-dark); text-decoration:underline; cursor:pointer; align-self:center; }
.login__ayuda{ color:var(--muted); font-size:11.5px; text-align:center; margin-top:-10px; }
.login__sep{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px;
  text-transform:uppercase; letter-spacing:.14em; }
.login__sep::before, .login__sep::after{ content:""; flex:1; height:1px; background:var(--line); }
.login__invitado{ width:100%; justify-content:center; text-align:center; }
.login__invitado small{ font-weight:400; opacity:.75; margin-left:5px; }
.login__part{ margin:2px 0 0; font-size:12px; line-height:1.45; color:var(--muted); text-align:center; }
.login__part a{ color:var(--accent-dark); font-weight:600; }
.login__rol{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-dark); border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:-4px; }
.login__rol--part{ margin-top:2px; }
/* --- X1 · entrada de invitado desde el modal --- */
.cmodal__invitado{ border:0; background:none; padding:0; margin-top:2px; font:inherit; font-size:12px;
  font-weight:600; color:var(--accent-dark); text-decoration:underline; cursor:pointer; }
/* --- X2 · diálogo tras identificarse --- */
.traslogin{ gap:12px; text-align:center; }
.traslogin__h{ font-size:20px; }
.traslogin__acc{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:2px; }
.traslogin__nota{ color:var(--muted); font-size:12px; line-height:1.45; }
/* --- X1 · botón de acceso en la barra (solo invitado) --- */
.navbar__login{ border:1px solid #4a4436; background:transparent; color:#e7e1d4; border-radius:99px;
  padding:6px 14px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.navbar__login:hover{ border-color:var(--accent); color:#fff; }
.navbar__login[hidden]{ display:none; }
/* --- X1 · PRECIOS OCULTOS en modo invitado --- */
body.is-invitado .price__num strong,
body.is-invitado .topbar .price__num strong{ font-size:13px; font-weight:600; line-height:1.25;
  max-width:190px; display:inline-block; white-space:normal; }
body.is-invitado .price__num small,
body.is-invitado .topbar .price__num small{ visibility:hidden; }
body.is-invitado .exp__precio{ visibility:hidden; }
body.is-invitado .dim--ref small{ font-size:9.5px; }
body.is-invitado .tarifa-fab-wrap, body.is-invitado #tarifaFabMenu, body.is-invitado #navCesta,
body.is-invitado #guardadasBtn, body.is-invitado #sesionInfo, body.is-invitado #puntoBtn{ display:none !important; }
.cat-card__login{ border:0; background:none; padding:0; font:inherit; font-size:12px; font-weight:600;
  color:var(--accent-dark); text-decoration:underline; cursor:pointer; text-align:left; }
/* un display: en CSS pisa el atributo hidden */
.login__olvide[hidden], .login__invitado[hidden], .login__sep[hidden],
.cmodal__invitado[hidden], .traslogin__nota[hidden], .login__rol[hidden]{ display:none; }
/* ===== REUNIÓN 2-sep · muestras (W10 · W11 · X12) ===== */
.mv-colores{ display:flex; flex-direction:column; gap:8px; margin:6px 0 10px; }
.mv-color{ display:grid; grid-template-columns:minmax(0,1fr) 92px 34px; gap:8px; align-items:center; }
.mv-color--ral{ grid-template-columns:minmax(0,1fr) 132px 92px 34px; }
.mv-color .numin{ width:100%; height:38px; padding:8px 12px; font-size:13px; font-weight:500; }
/* Muestras (revisión 19-sep): los desplegables de pedido/presupuesto y de envío
   se ajustan a su texto para que se lea entero, no al ancho base de .numin (76px) */
#mvRef{ width:auto; min-width:240px; max-width:100%; height:38px; padding:8px 30px 8px 12px; font-size:13px; font-weight:500; }
#mvModo{ width:auto; min-width:210px; max-width:100%; height:38px; padding:8px 30px 8px 12px; font-size:13px; font-weight:500; }
#mvCto{ width:100%; height:38px; padding:8px 12px; font-size:13px; font-weight:500; }   /* Contacto rellena su columna (revisión 19-sep) */
.mv-color .mv-color__ral[hidden]{ display:none; }
.mv-color__del{ width:34px; height:34px; border:1px solid var(--terra-suave); background:#fff;
  color:var(--terra); border-radius:8px; cursor:pointer; font-size:12px; line-height:1; }
.mv-color__del:hover{ background:var(--terra-suave); }
.mv-color__del[hidden]{ display:none; }
#mvAddColor{ align-self:flex-start; }
#mvAddColor[disabled]{ opacity:.45; cursor:not-allowed; }
.muform__lbl--head{ display:block; margin-top:14px; }
.muform__hint{ text-transform:none; letter-spacing:0; font-size:10.5px; color:var(--muted); margin-left:6px; }
.muform__req{ color:var(--terra); }
/* dirección completa a mano: el textarea no puede quedar aplastado a 38px */
.muform__lbl textarea.numin, .mv-dir{ height:auto; min-height:82px; padding:9px 12px; line-height:1.45;
  font-weight:500; resize:vertical; width:100%; }
@media (max-width:640px){ .mv-color, .mv-color--ral{ grid-template-columns:1fr; } }

/* ===== REUNIÓN 2-sep · pedidos ===== */
/* W12/W13 · correo real del pedido en la pantalla de confirmación */
.pedido__mail{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:18px 0 8px; }
.pedido__mail-btn{ padding:12px 22px; font-size:13.5px; }
.pedido__mail-nota{ color:var(--muted); font-size:11.5px; line-height:1.5; text-align:center; max-width:560px; }
.pedido__mailprev{ width:100%; max-width:640px; }
.pedido__mailprev summary{ cursor:pointer; font-size:12px; color:var(--muted); text-align:center; }
.pedido__mailtxt{ width:100%; margin-top:8px;
  font-size:11.5px; line-height:1.5; background:var(--bg); }
.pedido__mailcopy{ margin-top:6px; font-size:12px; padding:8px 16px; }

/* W14 · chips de estado en «Mis borradores / Mis proyectos» */
.guardadas-estfiltro{ margin:0 0 10px; }
.guardadas-estfiltro .chip__n{ font-size:10.5px; font-weight:700; opacity:.6; font-style:normal; }
.guardadas-estfiltro .chip.is-active .chip__n{ opacity:.95; }
.guardadas-estfiltro .chip__n:empty{ display:none; }

/* W15 · envío por correo de «Valoramos el resto de su proyecto» */
.proyecto__msg{ display:block; margin-top:10px; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); }
.proyecto__msg .obs-txt{ width:100%; margin-top:5px; text-transform:none; letter-spacing:0;
  font-size:13px; color:var(--ink); }
.proyecto__envio{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.proyecto__envio .btn{ align-self:flex-start; }
.proyecto__envio-nota{ color:var(--muted); font-size:11px; line-height:1.5; }
@media (max-width:640px){ .proyecto__envio .btn{ align-self:stretch; text-align:center; } }

/* ===== REUNIÓN 2-sep · visual (guía técnica de interfaz) =====================
   Word "PARAMETRIX · Guía técnica de interfaz · Configurador de producto" v1.0.
   Donde la guía choca con la reunión manda la reunión: la barra sigue NEGRA (W1),
   la tipografía de interfaz sigue siendo Inter (W3) y el icono de cesta sigue
   siendo el de Alberto (W5). Esta capa va la ÚLTIMA del fichero a propósito:
   necesita pisar la capa de tipografía (que había forzado Inter en #brandTxt). */

/* ---------- V4 · tokens de la guía ----------
   Los tokens históricos (--bg, --line, --accent, --oro…) NO se tocan: sus valores
   están en el mismo rango que los de la guía y los usan el resto de pantallas y
   la barra negra. Los nuevos se aplican dentro del configurador. */
:root{
  --color-app:#f4f1ed;             /* fondo general */
  --color-surface:#faf8f7;         /* paneles y tarjetas */
  --color-control:#fffdfc;         /* inputs y píldoras */
  --color-selected:#ede6db;        /* control seleccionado */
  --color-text:#242421;
  --color-text-strong:#121212;
  --color-text-secondary:#555452;
  --color-muted:#70706f;
  --color-accent:#8b6e3d;          /* selección y datos activos */
  --color-border:#e8e2dd;
  --color-action:#242421;          /* CTA principal */
  --radius-control:10px;
  --radius-card:12px;
  --radius-pill:999px;
  --shadow-card:0 2px 12px rgba(40,30,20,.06);
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --font-brand:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
}

/* ---------- V1 · tipografía ----------
   Serif editorial SOLO para la marca "Curvatto" de la cabecera del configurador.
   El color lo sigue poniendo la capa de la barra negra (no se redeclara). */
#brandTxt.brand--serif{
  font-family:var(--font-brand); font-size:36px; line-height:1.1;
  font-weight:400; letter-spacing:.01em;
}
@media (max-width:900px){ #brandTxt.brand--serif{ font-size:26px; } }

/* precio principal 22/26/700 (en modo invitado el hueco lleva la invitación a
   identificarse y conserva su tamaño pequeño) */
body.cfg-mode:not(.is-invitado) .topbar .price__num strong{
  font-size:22px; line-height:26px; font-weight:700;
}
body.cfg-mode .topbar .price__num small{ font-size:12px; line-height:16px; }
/* "Por medidas" 16/20/500 · CTA "Añadir a cesta" 14/20/600 */
#porMedidasBtn{ font-size:16px; line-height:20px; font-weight:500; }
body.cfg-mode .topbar .btn--primary{ font-size:14px; line-height:20px; font-weight:600; }
/* cabeceras de acordeón y títulos de sección 14/20/500-600 */
body.cfg-mode .rib__head{
  font-size:14px; line-height:20px; font-weight:600; letter-spacing:.06em;
  color:var(--color-text-secondary); min-height:20px;
}
body.cfg-mode .rib__head--toggle{ font-size:14px; line-height:20px; font-weight:600; letter-spacing:.06em; }
body.cfg-mode .rib__head, body.cfg-mode .rib__head--toggle{ overflow-wrap:anywhere; }
body.cfg-mode .rib__head span{ font-weight:600; }
/* nombre del mueble 15/20/600 · su acabado, texto secundario 12 */
body.cfg-mode .rib--modelo .modelo-sel__txt strong{ font-size:15px; line-height:20px; font-weight:600; }
body.cfg-mode .rib--modelo .modelo-sel__txt small{ font-size:12px; line-height:16px; color:var(--color-text-secondary); }
/* etiquetas de medidas 12/600 · valores 16/700 · límites 11/500 */
.glb-cotas .gc-m{ font-size:12px; line-height:16px; font-weight:600; letter-spacing:.04em; }
.glb-cotas .gc-r{ font-size:11px; line-height:16px; font-weight:500; letter-spacing:0; }
.glb-cotas input, .glb-cotas .gc-m input{ font-size:16px; line-height:20px; font-weight:700; height:34px; }
.glb-cotas{ border-radius:var(--radius-card); }
/* pt (José 28-sep): en pantallas ≤1400 el bloque de cotas (FRENTE·MÓDULOS·FONDO·ALTO·PRECIO) iba muy
   apretado y los campos se veían «montados». Se reduce un punto para que TODA la info quepa holgada.
   Va DESPUÉS del override base de arriba para ganarle (el @media anterior de ≤1300 quedaba pisado). */
@media (max-width:1300px){
  .glb-cotas{ gap:11px; padding:9px 14px; }
  .glb-cotas .gc-m{ font-size:10.5px; letter-spacing:.02em; }
  .glb-cotas .gc-r{ font-size:10px; line-height:14px; }
  .glb-cotas input, .glb-cotas .gc-m input{ font-size:14px; line-height:18px; height:30px; width:62px; }
  .glb-cotas__mods{ gap:11px; padding:0 11px; }
}

/* ---------- V1 · ningún microtexto por debajo de 11 px en el configurador ---------- */
body.cfg-mode .rib__hint,
body.cfg-mode .rib__note,
body.cfg-mode .rib__hint--frente,
body.cfg-mode .rib__t,
body.cfg-mode .detalle-lbl,
body.cfg-mode .models-group__t,
body.cfg-mode .chips--models .chip b,
body.cfg-mode .valr__lbl,
body.cfg-mode .seg small,
body.cfg-mode .cuerpo-sw span,
body.cfg-mode .detalle-block .cuerpo-sw span,
body.cfg-mode .panel-desp__nota,
body.cfg-mode .desp-op small,
body.cfg-mode .efecto span,
body.cfg-mode .efecto b,
body.cfg-mode .pc-mark,
body.cfg-mode .exp__phnota,
body.cfg-mode .exp__precio,
body.cfg-mode .expvar span,
body.cfg-mode .expvar__lg,
body.cfg-mode .tapa-cab__t,
body.cfg-mode .tapacard span,
body.cfg-mode .tapacard em,
body.cfg-mode .tapa-largo,
body.cfg-mode .tapa-nota,
body.cfg-mode .tapa-otros,
body.cfg-mode .tapa-var span,
body.cfg-mode .plafon span small,
body.cfg-mode .plafon b,
body.cfg-mode .plafon__ral,
body.cfg-mode .nota-serie,
body.cfg-mode .pieces__note,
body.cfg-mode .pieces__warns,
body.cfg-mode .photo-layer,
body.cfg-mode .fondo-sel,
body.cfg-mode .dim small,
body.cfg-mode .vp-field,
body.cfg-mode .modal__filters label{ font-size:11px; }
body.cfg-mode #viewConfig .chip--pill2{ font-size:11px; letter-spacing:.04em; padding:5px 10px; }
body.cfg-mode #viewConfig .chips--mm .chip{ font-size:11px; }
body.cfg-mode #colorCuerpo .cuerpo-sw span{ font-size:11px; }
body.cfg-mode.is-invitado .dim--ref small{ font-size:11px; }

/* ---------- V2 · retícula de escritorio ---------- */
@media (min-width:921px){
  #viewConfig{ grid-template-columns:400px minmax(0,1fr); }
  #viewConfig .ribbon{
    padding:16px 8px; gap:6px; border-right:0;
    overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable both-edges;   /* mismo espacio izq/der y bloques mas anchos (revision 19-sep) */
  }
  /* el visor pega al borde de la columna: hueco bloques→visor = hueco izquierdo */
  #viewConfig .stage-wrap{ padding:12px 12px 12px 0; }
}
/* 921-1439: la columna se estrechaba con la pantalla (clamp 288-321 px), pero
   todo el panel está medido para 321: a 1366 px quedaban 288 y se cortaban «OTROS
   ACABADOS», «Suspendido» y la rejilla de colores. A esos anchos el visor tiene
   sitio de sobra (más de 1.000 px), y por debajo de 1099 ya manda el cajón
   lateral, así que la columna se queda fija en 321. */
@media (min-width:921px) and (max-width:1439px){
  #viewConfig{ grid-template-columns:400px minmax(0,1fr); }
}
/* el visor: radio 12, recorte propio y 620 px de alto de referencia (solo cuando
   la ventana da de sí: en pantallas bajas manda el alto disponible) */
.stage{ border-radius:var(--radius-card); overflow:hidden; }
@media (min-width:1100px) and (min-height:780px){ .stage{ min-height:620px; } }

/* nunca scroll horizontal (desde 320 px) */
#viewConfig, #viewConfig .ribbon, #viewConfig .stage-wrap{ max-width:100%; overflow-x:hidden; }

/* por debajo de 921 px se conserva el orden actual (controles arriba, visor
   abajo) pero el panel pasa a tener scroll propio: así el precio y «Añadir a
   cesta» de la barra superior no se van nunca de la pantalla */
@media (max-width:920px){
  /* P8 (José 27-sep): en 761-920 px el panel es un CAJÓN lateral (regla ≤1099, position:fixed → fuera
     de flujo), así que la 2ª fila «minmax(0,46dvh)» quedaba VACÍA y dejaba un enorme hueco bajo el visor.
     Con una sola fila el visor llena toda la altura disponible (como en 921-1099 px). */
  body.cfg-mode #viewConfig{ grid-template-rows:minmax(0,1fr); }
  body.cfg-mode #viewConfig .ribbon{ overflow-y:auto; overflow-x:hidden; }
  body.cfg-mode #viewConfig .stage-wrap{ height:auto; min-height:0; }
  /* P8 (José 27-sep): en tablet vertical (≤920) la barra superior no cabía en UNA línea y los botones
     se solapaban («Por medidas» sobre «Guardar configuración»). Se deja envolver: el bloque de precio +
     acciones baja a una 2ª línea (hay altura de sobra en vertical). En horizontal (≥1024) cabe en una
     línea y esta regla NO aplica. */
  body.cfg-mode .topbar{ flex-wrap:wrap; row-gap:8px; }
  body.cfg-mode .topbar .price{ width:100%; justify-content:flex-end; }
}
@media (max-width:760px){
  /* el configurador conserva el lienzo a pantalla (el resto de vistas siguen
     con scroll de página): la barra de precio y cesta queda siempre visible */
  html:has(body.cfg-mode){ height:100%; overflow:hidden; }
  body.cfg-mode{ height:100%; overflow:hidden; }
  body.cfg-mode .app{ height:100vh; height:100dvh; min-height:0; }
  body.cfg-mode .topbar{ position:sticky; top:0; z-index:60; }
  body.cfg-mode #viewConfig .stage-wrap{ padding:10px; }
}
@media (max-width:520px){
  body.cfg-mode #viewConfig .ribbon{ grid-template-columns:minmax(0,1fr); }
  body.cfg-mode #viewConfig .ribbon .rib{ grid-column:1 / -1; }
}

/* ---------- V4 · la columna lateral con los tokens de la guía ---------- */
body.cfg-mode #viewConfig .ribbon{ background:var(--color-app); }
body.cfg-mode #viewConfig .rib{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  color:var(--color-text);
  padding:var(--space-3) var(--space-4) 13px;
}
body.cfg-mode #viewConfig .numin:not(.numin--lock),
body.cfg-mode #viewConfig .select,
body.cfg-mode #viewConfig .seg,
body.cfg-mode #viewConfig .desp-op,
body.cfg-mode #viewConfig .plafon,
body.cfg-mode #viewConfig .tapacard,
body.cfg-mode #viewConfig .efecto,
body.cfg-mode #viewConfig .exp,
body.cfg-mode #viewConfig .panel-desp,
body.cfg-mode #viewConfig textarea{
  border-radius:var(--radius-control);
  background:var(--color-control);
  border-color:var(--color-border);
}
body.cfg-mode #viewConfig .chip{
  border-radius:var(--radius-pill);
  background:var(--color-control);
  border-color:var(--color-border);
  color:var(--color-text);
}
/* seleccionado = fondo + borde (+ punto): NUNCA solo el dorado */
body.cfg-mode #viewConfig .chip.is-active{
  background:var(--color-selected); border-color:var(--color-accent);
  color:var(--color-text-strong); font-weight:600;
}
body.cfg-mode #viewConfig .chip.is-active:not(.chip--radio):not(.chip--link):not(.chip--pill2)::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--color-accent); margin-right:6px; vertical-align:1px;
}
body.cfg-mode #viewConfig .tapacard.is-active,
body.cfg-mode #viewConfig .efecto.is-active,
body.cfg-mode #viewConfig .plafon.is-active{
  background:var(--color-selected); border-color:var(--color-accent);
}
body.cfg-mode #viewConfig .seg.is-active{
  background:var(--color-selected); border-color:var(--color-accent);
}

/* ---------- V5 · iconografía ---------- */
.rib__chev, .exp__chev{ display:inline-flex; align-items:center; }
.rib__chev svg, .exp__chev svg{ display:block; width:20px; height:20px; }
/* iconos de la barra del configurador a 20 px (el carrito de Alberto conserva su
   tamaño: `.topbar .btn .ico-cesta` tiene más especificidad que esta regla) */
.topbar .btn svg{ width:20px; height:20px; }
/* caja interactiva mínima de 44×44 en los botones de solo icono */
.topbar__soc{ width:44px; height:44px; }
.topbar__soc svg{ width:20px; height:20px; }

/* ---------- V7 · estados ---------- */
/* una opción incompatible NO desaparece: se queda visible, atenuada y con el
   motivo (title + texto) */
body.cfg-mode .is-incompatible{ cursor:not-allowed; }
body.cfg-mode .efecto.is-incompatible,
body.cfg-mode .tapacard.is-incompatible,
body.cfg-mode .exp--grupo.is-incompatible{ opacity:.55; filter:grayscale(.55); }
.ko-motivo{ display:block; font-size:11px; line-height:1.3; font-weight:600;
  color:#a8452f; padding:3px 5px 0; }
.ko-motivo[hidden]{ display:none; }
/* cota fuera de su mínimo/máximo */
.glb-cotas input.is-invalid, .numin.is-invalid{ border-color:#c0553c; background:#fdf1ee; color:#8f3a26; }
.gc-ko{ display:block; margin-top:2px; font-size:11px; line-height:1.3; font-weight:600;
  letter-spacing:0; text-transform:none; color:#a8452f; }
.gc-ko[hidden]{ display:none; }
/* ★ 19-oct (José · «Carta RAL sin código»): código RAL OBLIGATORIO — aviso junto al campo y, tras un intento
   bloqueado de «Añadir al proyecto», el campo vacío se marca en rojo */
.ral-oblig{ margin-top:4px; }
input.is-ral-falta{ background:#fdf1ee !important; box-shadow:inset 0 0 0 2px #c0553c !important; }
/* ★ 19-oct (José): con el robot aspirador el zócalo se queda atenuado y el motivo debajo de las 3 instalaciones */
body.cfg-mode #bases .chip--radio.is-incompatible{ opacity:.55; filter:grayscale(.55); }
#bases .bases-robot{ grid-column:1 / -1; padding:2px 2px 0; }
/* ★ 19-oct (José G4-014/016): telas — nota «referencia visual» y proveedor/referencia (por zona en los cabeceros) */
.tela-nota{ display:block; margin:8px 0 6px; line-height:1.4; }
.tela-prov{ margin-top:6px; }
.tela-prov .especial__lbl{ display:block; font-size:11px; color:var(--muted); margin:6px 0 3px; }
.tela-prov .obs-txt{ min-height:0; }
.tap-ztela{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
.tap-ztela .numin{ width:100%; min-width:0; box-sizing:border-box; font-size:12px; }
@media (max-width:420px){ .tap-ztela{ grid-template-columns:1fr; } }
/* «Añadir a cesta» bloqueado mientras haya una medida fuera de rango */
#quoteBtn.is-bloqueado{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* ---------- V9 · accesibilidad ---------- */
body.cfg-mode #viewConfig :focus-visible,
body.cfg-mode .topbar :focus-visible,
.glb-cotas :focus-visible,
.stage__tools :focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== REUNIÓN 2-sep · visual (correcciones sobre la maqueta) =====
   Revisión de la captura contra la maqueta de Alberto: un solo punto de radio,
   nombre del mueble en una línea, deslizador-indicador visible y cotas legibles. */

/* 1 · el punto del radio lo pinta .radio-dot: fuera el ::before de la capa visual */
#bases .chip--radio::before { content:none !important; }
.rib__head--radio::before { content:none !important; }

/* 2 · tarjeta del modelo: el nombre manda, los chips mín/máx se achican */
.rib--modelo .modelo-sel { align-items:flex-start; gap:8px; }
.rib--modelo .modelo-sel__txt { flex:1 1 auto; min-width:0; }
.rib--modelo #modeloName { display:block; font-size:17px; line-height:1.15; font-weight:600; white-space:nowrap; }
.rib--modelo #modeloSelAca { display:block; font-size:12px; line-height:1.35; color:var(--color-text-secondary,#555452); margin-top:2px; }
.rib--modelo #presets { flex:0 0 auto; display:flex; gap:5px; }
.rib--modelo #presets .chip { padding:5px 9px; font-size:10.5px; letter-spacing:.02em; white-space:nowrap; }

/* 3 · deslizador-indicador del frente: la línea dorada de la maqueta */
.rib--modelo .range--indicador { width:100%; margin:10px 0 2px; height:14px; opacity:1; appearance:none; background:transparent; }
.rib--modelo .range--indicador::-webkit-slider-runnable-track { height:2px; border-radius:2px; background:var(--color-border,#e8e2dd); }
.rib--modelo .range--indicador::-webkit-slider-thumb { appearance:none; width:11px; height:11px; border-radius:50%; background:var(--color-accent,#8b6e3d); margin-top:-4.5px; border:0; }
.rib--modelo .range--indicador::-moz-range-track { height:2px; border-radius:2px; background:var(--color-border,#e8e2dd); }
.rib--modelo .range--indicador::-moz-range-thumb { width:11px; height:11px; border:0; border-radius:50%; background:var(--color-accent,#8b6e3d); }
/* ★ t17 (José 22-oct · regla 16): la barra mín/máx SE ARRASTRA (app.js · frenteSliderSync le pone .range--activo donde la medida se puede cambiar) */
.rib--modelo .range--indicador.range--activo { pointer-events:auto; cursor:pointer; height:22px; }
.rib--modelo .range--indicador.range--activo::-webkit-slider-runnable-track { height:4px; border-radius:3px; }
.rib--modelo .range--indicador.range--activo::-webkit-slider-thumb { width:18px; height:18px; margin-top:-7px; border:2px solid #fff; box-shadow:0 0 0 1px var(--color-accent,#8b6e3d), 0 2px 6px rgba(0,0,0,.18); cursor:grab; }
.rib--modelo .range--indicador.range--activo:active::-webkit-slider-thumb { cursor:grabbing; }
.rib--modelo .range--indicador.range--activo::-moz-range-track { height:4px; border-radius:3px; }
.rib--modelo .range--indicador.range--activo::-moz-range-thumb { width:16px; height:16px; border:2px solid #fff; box-shadow:0 0 0 1px var(--color-accent,#8b6e3d); cursor:grab; }
.rib--modelo .range--indicador.range--activo:focus-visible { outline:2px solid var(--color-accent,#8b6e3d); outline-offset:3px; }

/* 4 · barra de cotas del visor: que quepa la línea de mín/máx (V2: 660x85) */
.glb-cotas { padding-bottom:10px; }
.glb-cotas .gc-r { display:block; margin-top:3px; font-size:11px; line-height:1.35; white-space:nowrap; }
.glb-cotas .gc-m { min-width:0; }
.glb-cotas .gc-num { text-align:center; font-variant-numeric:tabular-nums; }

/* ajuste fino de la tarjeta del modelo (revisión visual 3-sep) */
.ribbon .rib { padding:16px; }
.rib--modelo #modeloName { font-size:16px; }
.rib--modelo #presets .chip { padding:4px 7px; font-size:10px; }
.rib--modelo .modelo-sel__txt { flex:1 1 120px; }
.rib--modelo #modeloSelAca { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* nombre a ancho completo y límites del frente debajo (cabe sin cortarse) */
.rib--modelo .modelo-sel { flex-wrap:wrap; }
.rib--modelo .modelo-sel__txt { flex:1 1 100%; }
.rib--modelo #presets { margin-top:8px; }
.rib--modelo #modeloName { font-size:17px; }
.rib--modelo #modeloSelAca { -webkit-line-clamp:1; }

/* acceso: la marca en oscuro (la capa de barra negra la dejaba en claro) */
.login .brand__txt strong { color:var(--ink,#23201a); }
.login .brand__txt small { color:var(--muted,#756c5e); }

/* muestras: color · efecto · unidades (Excel 4-sep) */
.mv-color { grid-template-columns:1fr 128px 92px 34px; }
.mv-color--ral { grid-template-columns:1fr 132px 128px 92px 34px; }
.mv-color .mv-color__ef { width:100%; }
@media (max-width:900px){ .mv-color, .mv-color--ral { grid-template-columns:1fr 1fr; } }

/* densidad de la columna: que ningún rótulo se corte (revisión 3-sep) */
.ribbon .rib { padding:12px 13px 13px; }
.tapa-cab { flex-wrap:wrap; gap:6px; }
.tapa-cab .seg-ral { flex:0 0 auto; }
.tapacard { font-size:11px; line-height:1.25; }
.tapacard b, .tapacard strong { font-size:11px; }
.tapacard small, .tapacard em { font-size:11px; line-height:1.3; }
.tapa-otros, .tapa-nota, .tapa-largo { font-size:11px; }
.plafon { font-size:12px; }
.plafon span { font-size:12px; line-height:1.3; }
.plafon small { display:block; font-size:10.5px; line-height:1.32; margin-top:2px; }
.plafon b { font-size:10.5px; white-space:nowrap; }
.exp--grupo > .exp__head, .exp--grupo summary { font-size:12.5px; }

/* tapa: que quepan el conmutador, los nombres largos y el campo del RAL */
.tapa-cab .seg-ral { min-width:0; flex:0 1 auto; }
.tapa-cab .seg-ral__code { width:54px; min-width:0; font-size:11px; }
.tapa-cab .seg-ral__sys { font-size:11px; padding:4px 8px; }
.tapacard span, .tapacard strong { overflow-wrap:anywhere; hyphens:auto; }
.tapacard { font-size:10.5px; }
.tapa-panel input[type="text"], .tapa-otros input[type="text"], .tapa-igual + * input[type="text"] { width:100%; box-sizing:border-box; }
.tapa-panel, .tapa-otros { overflow:visible; }

/* remates finales de la columna (3-sep) */
.tapacard span, .tapacard strong { overflow-wrap:normal; word-break:normal; hyphens:none; }
.tapa-cab .seg-ral { width:100%; }
.tapa-cab .seg-ral__code { width:62px; }
.tapa-cab__otros, .tapa-cab > span { font-size:10.5px; letter-spacing:.06em; }
.rib__body { padding-bottom:6px; }
.tapa-otros { padding-bottom:4px; }

/* selector de efecto: que quepa el nombre */
.mv-color { grid-template-columns:1fr 150px 92px 34px; }
.mv-color--ral { grid-template-columns:minmax(0,1fr) 110px 150px 78px 34px; }

/* ===== REUNIÓN 2-sep · responsive (V8 de la guía de interfaz) =====
   ≥1440 completo · 1100-1439 columna 288-321 · 768-1099 cajón lateral ·
   480-767 panel inferior con la escena a media pantalla · <480 barra fija. */
.cfg-abrir, .cfg-cerrar, .cfg-fondo, .cfg-barra { display:none; }
.cfg-barra[hidden], .cfg-fondo[hidden] { display:none !important; }

@media (min-width:1100px) and (max-width:1439px) {
  /* (revisión 6-sep) la columna NO se estrecha: el panel está medido para 321 px */
  body.cfg-mode #viewConfig { grid-template-columns:400px minmax(0,1fr); }
}

@media (max-width:1099px) {
  /* la escena ocupa todo; la configuración se abre en un cajón lateral */
  body.cfg-mode #viewConfig { grid-template-columns:minmax(0,1fr); }
  body.cfg-mode .ribbon {
    position:fixed; z-index:60; inset:0 auto 0 0; width:min(400px,88vw);
    max-width:100vw; overflow-y:auto; box-shadow:0 0 40px rgba(20,15,8,.28);
    transform:translateX(-102%); transition:transform .22s ease;
  }
  body.cfg-panel-on.cfg-mode .ribbon { transform:none; }
  body.cfg-mode .cfg-abrir {
    display:block; position:fixed; z-index:55; left:14px; bottom:78px;
    background:var(--color-action,#242421); color:#f4f1ed; border:0; border-radius:999px;
    padding:13px 20px; font:600 14px/1 var(--ff,inherit); cursor:pointer; min-height:44px;
    box-shadow:0 6px 20px rgba(20,15,8,.28);
  }
  body.cfg-panel-on.cfg-mode .cfg-abrir { display:none; }
  body.cfg-mode .cfg-cerrar {
    display:block; position:sticky; top:0; margin-left:auto; z-index:2;
    width:44px; height:44px; border:0; border-radius:50%; background:var(--color-control,#fffdfc);
    color:var(--color-text,#242421); font-size:16px; cursor:pointer; box-shadow:0 2px 10px rgba(20,15,8,.14);
  }
  body.cfg-panel-on.cfg-mode .cfg-fondo { display:block; position:fixed; inset:0; z-index:59; background:rgba(20,15,8,.36); }
  html, body { overflow-x:hidden; }
}

@media (max-width:767px) {
  /* móvil: panel inferior y escena a media pantalla */
  body.cfg-mode .ribbon {
    inset:auto 0 0 0; width:100%; max-height:78dvh; border-radius:16px 16px 0 0;
    transform:translateY(102%);
  }
  body.cfg-panel-on.cfg-mode .ribbon { transform:none; }
  body.cfg-mode .stage, body.cfg-mode .stage-wrap { min-height:52dvh; }
  body.cfg-mode .cfg-abrir { left:12px; right:auto; bottom:82px; }
  /* precio y cesta SIEMPRE visibles (criterio de aceptación de la guía) */
  body.cfg-mode .cfg-barra {
    display:flex; position:fixed; z-index:58; inset:auto 0 0 0; align-items:center; gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:#161410; color:#f4f1ed;
    border-top:1px solid #000;
  }
  .cfg-barra__precio { display:flex; flex-direction:column; line-height:1.1; flex:1; min-width:0; }
  .cfg-barra__precio small { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#b5ac99; }
  .cfg-barra__precio b { font-size:17px; font-weight:700; }
  .cfg-barra .btn { min-height:44px; white-space:nowrap; }
  body.cfg-mode .topbar .price { display:none; }
}

@media (max-width:479px) {
  body.cfg-mode .ribbon { max-height:82dvh; }
  body.cfg-mode .stage, body.cfg-mode .stage-wrap { min-height:48dvh; }
}

/* móvil: la escena llena el hueco y las cotas caben en una fila deslizable */
@media (max-width:767px) {
  body.cfg-mode #viewConfig .stage-wrap { height:calc(100dvh - 63px - 66px); min-height:0; overflow:hidden; padding:8px 8px 6px; }
  body.cfg-mode #viewConfig .stage { height:100%; min-height:0; }
  body.cfg-mode .glb-cotas {
    top:8px; left:8px; right:8px; width:auto; max-width:none;
    display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; overflow-y:hidden;
    padding:8px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  }
  body.cfg-mode .glb-cotas .gc-m { flex:0 0 auto; min-width:78px; }
  body.cfg-mode .glb-cotas .gc-r { font-size:9.5px; }
  body.cfg-mode .glb-cotas__mods { display:flex; gap:8px; flex:0 0 auto; }
  body.cfg-mode .glb-cotas__cm { align-self:center; }
  body.cfg-mode .stage-cesta, body.cfg-mode #descarga3dBtn { bottom:78px; }
}

/* móvil: que los botones flotantes no se pisen */
@media (max-width:767px) {
  body.cfg-mode .cfg-abrir { left:50%; transform:translateX(-50%); bottom:74px; }
  body.cfg-mode #descarga3dBtn { bottom:126px; right:10px; }
  body.cfg-mode #openToggle, body.cfg-mode .stage__toggle { top:auto; bottom:126px; left:10px; }
  body.cfg-mode .stage-cesta { bottom:126px; }
}

/* perfil: la tarjeta de información no deja hueco muerto al final */
.perf-card { align-content:start; }
.perf-card .perf-datosop { margin-top:auto; }

/* ===== REPASO 3-sep · remates de pantallas ===== */
/* B · la regla de 44x44 no debe agrandar casillas ni interruptores */
input[type="checkbox"], input[type="radio"] { width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important; }
.admin-page input[type="checkbox"] { width:18px !important; height:18px !important; accent-color:var(--color-accent,#8b6e3d); }

/* C · catálogo: las dos chapas de la ficha, cada una en su esquina */
.cat-card__prev { position:relative; }
.cat-card__fav { position:absolute; top:8px; left:8px; right:auto; z-index:3; }
/* la chapa «foto de ejemplo» baja a la esquina inferior: en las fichas destacadas
   no cabía junto a «★ Destacado» y se montaban */
.cat-card__ej { position:absolute; top:auto; bottom:8px; right:8px; left:auto; z-index:2; }
/* microtextos legibles (mínimo de la guía: 11 px) */
.cat-card__ej, .cat-card__fav { font-size:9.5px; letter-spacing:.1em; padding:3px 7px; }
.cat-card__kicker { font-size:11px; }
.cat-card__meta, .cat-card__rango { font-size:11.5px; }
.cat-orden, .cat-orden select { font-size:12px; }

/* D · bloque de tapa: cabecera en una línea y nombres completos */
.tapa-cab { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.tapa-cab .seg-ral { width:auto; flex:0 0 auto; }
.tapa-cab .seg-ral__code { width:56px; }
.tapa-cab__otros, .tapa-cab > span:last-child { flex:1 1 auto; text-align:right; font-size:10px; line-height:1.15; }
.tapacard { font-size:10px; }
.tapacard span, .tapacard strong { display:block; overflow-wrap:normal; word-break:keep-all; hyphens:none; }

/* E · plafones: descripción compacta y sin repetir el precio */
.plafon small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* el «· incluido» duplicado se quitó del texto: el precio de la derecha se queda */

/* F · el aviso flotante no tapa los botones del visor */
.stage-cesta, .toast--stage { bottom:64px; }

/* rótulos de los dos filtros del catálogo */
.cat-filtro__sub { display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-muted,#70706f); margin:6px 0 4px; }

/* ===== REPASO 3-sep · tanda 2 ===== */
/* B · el mensaje de la consulta a fábrica se ajusta al cuadro */
#cfTxt, .cf__body textarea { width:100%; box-sizing:border-box; white-space:pre-wrap; overflow-wrap:anywhere; resize:vertical; }
.cf__dato { overflow-wrap:anywhere; }

/* E · sin numeración delante de «Archivos y observaciones de esta línea» */
.cesta-refcard ol, .cesta-linea ol { list-style:none; }
.cesta-refcard ol > li::marker, .cesta-linea ol > li::marker { content:""; }

/* F · muestras: el color siempre legible aunque se pida el código RAL */
.mv-color--ral { grid-template-columns:minmax(150px,1fr) 96px 140px 72px 34px; }
@media (max-width:1200px){ .mv-color--ral { grid-template-columns:minmax(120px,1fr) 84px 120px 64px 30px; } }

/* selector de orden y lateral de la cesta */
.cat-orden { display:inline-flex; align-items:center; gap:4px; }
.cat-orden select { width:auto; min-width:0; }
/* el menú lateral de la cesta arranca pegado como en el resto de pantallas */
#viewCesta .cat-side, #viewCesta .perf-side { margin-left:0; }
#viewCesta { padding-left:0; }

/* W18 · pie de la columna del configurador */
.rib--pie { display:flex !important; flex-direction:row; gap:8px; align-items:stretch; background:transparent; border:0; box-shadow:none; padding:4px 0 10px; }
.rib--pie .cfg-pie__it { min-width:0; }
.cfg-pie__it { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px;
  background:var(--color-control,#fffdfc); border:1px solid var(--color-border,#e8e2dd); border-radius:var(--radius-control,10px);
  font:600 12px/1.1 var(--ff,inherit); color:var(--color-text,#242421); cursor:pointer; }
.cfg-pie__it:hover { border-color:var(--color-accent,#8b6e3d); }
.cfg-pie__it svg { width:16px; height:16px; flex:none; }
.cfg-pie__n { background:var(--color-selected,#ede6db); border-radius:999px; padding:1px 6px; font-size:11px; }
.cfg-pie__n[hidden] { display:none; }

/* ===== REPASO 3-sep · tanda 3 (incidencias de la revisión) ===== */
/* D · cota fuera de su mín/máx: se ve y se explica */
.glb-cotas .gc-num.is-invalid, .glb-cotas input.is-invalid { border-color:#c0392b; background:#fdf2f0; color:#8e2b1f; }
.glb-cotas .gc-m--ko .gc-r, .glb-cotas .gc-r--ko { color:#c0392b; font-weight:600; }
/* E · microtextos del catálogo al mínimo de la guía */
.cat-card__ej, .cat-card__fav { font-size:11px; letter-spacing:.08em; padding:4px 8px; }
.cat-card__meta, .cat-card__rango, .cat-card__kicker { font-size:11.5px; }
/* H · TIPO DE INSTALACIÓN: los tres radios en una fila */
#bases { display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; }   /* Excel 16-sep: las 3 instalaciones en una fila */
#bases .chip--radio{ justify-content:center; gap:6px; padding:9px 8px; font-size:12.5px; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bases .chip--radio .radio-dot{ width:11px; height:11px; flex:none; }
#bases .chip--radio b{ display:none; }   /* sin precio en las pastillas de instalación (como la maqueta) */
/* Con patas: el panel «Color de las patas» se inyecta DENTRO de #bases como cuarto
   hijo; con nowrap aplastaba las tres pastillas hasta dejarlas en astillas. Baja a
   una segunda fila a todo el ancho; las pastillas siguen en una sola línea porque
   con min-width:0 encogen antes de saltar. */
#bases .patas-block { grid-column:1 / -1; margin-top:6px; }
/* min-width:max-content: la pastilla nunca encoge por debajo de su texto («Suspendido»
   perdía la última letra bajo el punto de la vecina); si no cupieran, #bases envuelve. */
#bases .chip--radio { min-width:0; padding:9px 8px; font-size:12.5px; justify-content:center; }
/* medido a 321 px: la fila útil son 240 px y las tres pastillas a su tamaño natural
   suman 287. En vez de aplastar el texto (antes «Suspendido» perdía la última letra)
   envuelven en dos filas SIN estirarse, como una lista normal de pastillas. */
#bases .chip--radio .radio-dot { flex:none; }
/* I · COLOR CUERPO: conmutador y las dos píldoras en una fila */
.cuerpo-top { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; }
.cuerpo-top .chip--pill2 { flex:1 1 0; min-width:0; font-size:9px; letter-spacing:.02em; line-height:1.12; padding:6px 5px; text-align:center; }
.cuerpo-top .seg-ral { flex:0 0 auto; }
.cuerpo-top .seg-ral__sys { padding:5px 7px; font-size:10.5px; }
.cuerpo-top .seg-ral__code { width:52px; font-size:10px; padding:5px 3px; text-align:center; }
.cuerpo-top .chip--pill2 { font-size:8.5px; padding:6px 4px; }
/* J · muestras del cuerpo más cerca de la maqueta (90×47) */
#colorCuerpo .cuerpo-sw i { width:60px; height:44px; border-radius:6px; }
#colorCuerpo .cuerpo-sw span { font-size:9.5px; max-width:70px; }
/* L · las cuatro fotos del cuadrante de efectos, a la misma altura */
.efectos-grid { align-items:stretch; }
.efecto { display:flex; flex-direction:column; }
.efecto__foto { height:52px; flex:none; }
/* N · plafones legibles */
.plafon span { font-size:12px; }
.plafon small { font-size:11px; line-height:1.35; }
/* O · el aviso flotante no tapa la etiqueta de la escena */
.toast, .toast--stage { bottom:78px; }
/* P/R · perfil: la tarjeta cierra tras el botón y el lateral llega abajo */
.perf-card { align-self:start; }
.perf-side { min-height:100%; }
.perf-layout { align-items:stretch; }
/* Q · ítem del lateral a dos líneas, alineado con el texto */
.perf-side__it { display:grid; grid-template-columns:20px 1fr; align-items:start; gap:9px; }
.perf-side__it svg { margin-top:1px; }

/* iconos de la cabecera del configurador (V5) */
.back-btn { display:inline-flex; align-items:center; gap:7px; }
.btn-ico { width:18px; height:18px; flex:none; }

/* ===== REPASO 3-sep · tanda 4 (pegas de los 18 puntos) ===== */
/* P6 · el logo del cliente y su leyenda NO desaparecen en pantallas medianas */
@media (max-width:980px) {
  .cat-side__bottom, .perf-side__bottom { display:block !important; }
  .cat-side .logo-caja, .perf-side .logo-caja { max-width:120px; }
}
/* P9 · nombre comercial de la tarifa en Datos operativos */
.datosop__tarifa { display:block; margin-top:4px; font-size:12px; color:var(--color-accent,#8b6e3d); font-weight:600; }
.datosop__tarifa[hidden] { display:none; }
/* P5 · el icono de la barra fija de móvil, a su tamaño */
.cfg-barra .ico-cesta { width:18px; height:18px; margin-right:6px; }

/* ===== REPASO 4-sep · tanda 5 ===== */
/* P16 · la leyenda del distribuidor, legible y con contraste */
.side-distri { font-size:10px !important; color:#5f584c !important; letter-spacing:.08em; line-height:1.6; }
.side-distri b { font-size:11px !important; letter-spacing:.18em; color:#3f3a32; }
/* P18 · los cuatro bloques plegados, a la misma altura */
.rib--plegable > .rib__head--toggle { min-height:26px; display:flex; align-items:center; gap:8px; }
.rib--plegable > .rib__head--toggle { white-space:nowrap; }
.rib--plegable > .rib__head--toggle .rib__num { flex:none; }
.rib--plegable > .rib__head--toggle .rib__chev { margin-left:auto; flex:none; }
/* P11 · los desplegables de muestras enseñan su texto completo */
.mv-color__sel, .mv-color__ef { min-width:0; text-overflow:ellipsis; }
.mv-color { grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) 88px 34px; }
.mv-color--ral { grid-template-columns:minmax(0,1.2fr) 92px minmax(0,1.1fr) 76px 34px; }

/* P13 · detalle del pedido en el panel de fábrica */
.adm-ped-ver { border:0; background:transparent; cursor:pointer; font-size:13px; color:var(--color-accent,#8b6e3d); padding:0 4px; }
.adm-ped-det[hidden] { display:none; }
.adm-det { background:var(--color-app,#f4f1ed); border-radius:10px; padding:12px 16px; margin:2px 0 8px; }
.adm-det__cab { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-muted,#70706f); margin-bottom:8px; }
.adm-det__lin { margin:0; padding-left:20px; }
.adm-det__lin li { margin:0 0 8px; font-size:12.5px; line-height:1.45; }
.adm-det__lin small { display:block; color:var(--color-text-secondary,#555452); font-size:11.5px; }
.adm-det__obs { margin-top:6px; font-size:11.5px; color:var(--color-text-secondary,#555452); }

/* muestras: que quepan los rótulos completos */
.mv-color { grid-template-columns:minmax(0,1.5fr) minmax(0,1.4fr) 76px 32px; gap:8px; }
.mv-color--ral { grid-template-columns:minmax(0,1.1fr) 84px minmax(0,1.3fr) 66px 32px; }
.mv-color select, .mv-color input { min-width:0; }
@media (min-width:1200px){ .muform { max-width:none; } }

/* INFORME 5-sep · el logo del cliente debe poder verse y subirse también en móvil */
/* la regla de 900 px ocultaba .perf-side__logo (que ES la caja de subida del
   logo del cliente): en el móvil quedaba la leyenda de distribuidor sola y no
   había forma de subir el logotipo desde Mi perfil. La capa anterior rescataba
   el contenedor .perf-side__bottom, pero no la caja de dentro. */
@media (max-width:980px) {
  .perf-side__logo, .cat-side__logo { display:block !important; }
  .perf-side__logo, .cat-side__logo { margin-left:auto; margin-right:auto; }
}
@media (max-width:900px) {
  /* en móvil el lateral es una fila de botones: la caja del logo y su leyenda
     pasan a ocupar el ancho completo, debajo de esos botones */
  .perf-side__bottom { flex-basis:100%; order:99; text-align:center; }
  .perf-side__logo { width:96px; }
}

/* ===== PUNTO 18 · acercamiento a la maqueta de Alberto (2-sep) ===== */
/* 18-g · franja de aviso al pie del visor, como en el boceto */
.stage-aviso {
  position:absolute; left:14px; right:14px; bottom:12px; z-index:6;
  background:rgba(246,243,236,.94); border:1px solid rgba(0,0,0,.06);
  border-radius:8px; padding:9px 14px; text-align:center;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; line-height:1.5;
  color:#6b6255; pointer-events:none;
}
@media (max-width:700px) { .stage-aviso { font-size:8.5px; letter-spacing:.06em; padding:7px 10px; } }
/* el rótulo del mueble («LAC 192.01 · 3D real…») vivía a bottom:14px, justo donde
   ahora va la franja de aviso: se pisaban al 100 %. Sube por encima de la franja
   (mismo 58px que ya usa la versión móvil cuando baja la botonera). */
#stage .stage-glb__nota:not(.is-cargando) { bottom:58px; }

/* ---- vista «como la maqueta» (?maqueta=18): NO se borra nada, solo se oculta
   para que Alberto compare. 18-b, 18-c, 18-e y los precios de instalación. --- */
body.maq18 #resetBtn,
body.maq18 #fichaBtn { display:none !important; }                 /* 18-b */
body.maq18 [data-maq18="fuera"],
body.maq18 [data-maq18="fuera"] + .rib__body { display:none !important; }  /* 18-c y 18-e */
/* 18-f' · el precio va en un <b> suelto dentro del propio chip de instalación
   («Con zócalo +30»); en la maqueta los tres van sin importe */
body.maq18 #bases .chip--radio b { display:none !important; }

/* B2 · el bloque de cajón no se ofrece en muebles que no llevan cajón */
body.sin-cajon [aria-controls="ribBody4"],
body.sin-cajon #ribBody4 { display:none !important; }

/* Task 3 · José 05-oct · DISPONIBILIDAD: si la tarifa del modelo no ofrece ningún
   extra (todas las celdas S-Y en gris), el bloque EXTRAS no se muestra */
body.sin-extras [aria-controls="ribBody5"],
body.sin-extras #ribBody5 { display:none !important; }

/* ===== PUNTO 7 · el logo de la barra, partido en dos ===== */
/* la pieza A (árbol + P.ESPEJO) manda la altura; la B va a su derecha, más
   pequeña, y las dos centradas verticalmente en la barra negra */
.navbar__logo { align-items:center; gap:10px; }
/* hay una regla anterior «body.nav-dark .navbar__logo:not(--custom) img{height:48px}»
   que pesa más que un selector de clase suelto: hay que igualarla o no se aplica */
body.nav-dark .navbar__logo:not(.navbar__logo--custom) img.navbar__logo-a,
.navbar__logo:not(.navbar__logo--custom) img.navbar__logo-a { height:46px; width:auto; }
body.nav-dark .navbar__logo:not(.navbar__logo--custom) img.navbar__logo-b,
.navbar__logo:not(.navbar__logo--custom) img.navbar__logo-b {
  height:17px; width:auto; display:block; opacity:.92; }
.navbar__logo-b[hidden] { display:none !important; }
/* con el logo del cliente la pieza B no pinta nada y la placa manda */
.navbar__logo--custom .navbar__logo-b { display:none !important; }
/* en pantallas estrechas se queda solo el árbol: la coletilla no cabe */
@media (max-width:900px) { .navbar__logo-b { display:none !important; } }

/* ===== logo de P.ESPEJO en la barra del panel de fábrica ===== */
.topbar__logo { display:none; align-items:center; gap:10px; text-decoration:none; flex:none; }
body.is-admin .topbar__logo { display:flex; }
body.is-admin .topbar__logo img.topbar__logo-a { height:30px; width:auto; display:block; }
body.is-admin .topbar__logo img.topbar__logo-b { height:14px; width:auto; display:block; opacity:.92; }
/* con el logo delante, la marca de texto sobra en el panel */
body.is-admin .topbar__l .brand { display:none; }
@media (max-width:900px) { body.is-admin .topbar__logo img.topbar__logo-b { display:none; } }

/* ===== «Mis borradores» · detalle de solo lectura de un pedido enviado ===== */
.guardada__det { margin-top:10px; background:var(--color-app,#f4f1ed); border-radius:9px; padding:11px 14px; }
.guardada__det[hidden] { display:none; }
.guardada__det-cab { font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-muted,#70706f); margin-bottom:7px; }
.guardada__lin { margin:0; padding-left:18px; }
.guardada__lin li { margin:0 0 7px; font-size:12.5px; line-height:1.45; }
.guardada__lin small { display:block; color:var(--color-text-secondary,#555452); font-size:11.5px; }
.guardada__obs { margin-top:5px; font-size:11.5px; color:var(--color-text-secondary,#555452); }

/* ===== barra del configurador en portátil (901–1500 px) ===== */
/* A 1366 px la barra lleva ocho botones y la marca a 36 px: «Curvatto» se cruzaba
   con «Precio · PVP + IVA». Por debajo de 1500 px la marca baja a 28 px y los tres
   botones fantasma se quedan en su icono (el texto sigue en el title). */
@media (max-width:1500px) and (min-width:901px){
  body.cfg-mode #brandTxt.brand--serif{ font-size:28px; }
  body.cfg-mode .topbar__l{ gap:10px; }
  body.cfg-mode #resetBtn, body.cfg-mode #fichaBtn, body.cfg-mode #guardarBorradorBtn{
    font-size:0; gap:0; padding-left:11px; padding-right:11px; }
  body.cfg-mode #resetBtn svg, body.cfg-mode #fichaBtn svg, body.cfg-mode #guardarBorradorBtn svg{
    width:18px; height:18px; flex:none; }
}

/* «Quitar puertas» bajo la barra de cotas en portátil */
/* Entre 1100 y 1439 px el visor mide ~1.020 px y la barra de cotas (881 px) roza el
   botón de puertas por 8 px; el botón pasa a la línea de abajo de la barra. */
@media (min-width:1100px) and (max-width:1439px){
  /* el botón va dentro de .stage__tools, que es quien se posiciona en absoluto */
  #stage .stage__tools{ top:200px; }
}

/* ===== base compartida (Supabase): acceso «comprobando», contraseña nueva, adjuntos ===== */
.login__comprobando { display:none; color:var(--color-muted,#70706f); }
.login.is-comprobando .login__comprobando { display:block; }
.login.is-comprobando button[type="submit"] { opacity:.55; pointer-events:none; }
#loginForm[hidden], #recuperarPass[hidden] { display:none !important; }
.guardada__refcli { color:var(--color-muted,#70706f); font-weight:400; font-size:11.5px; }
.adj-dl { border:1px solid #d6d2cc; background:#fff; border-radius:6px; padding:0 6px; font-size:11px; line-height:18px; cursor:pointer; vertical-align:middle; }
.adj-dl:hover { border-color:#111; }

/* ===== visor 3D fluido: sin backdrop-filter sobre el canvas (Fran 6-sep: «a tirones») ===== */
/* Con el canvas WebGL cambiando en cada frame, cada elemento con desenfoque de
   fondo obliga al compositor a re-desenfocar su zona en cada frame. En 3D se
   sustituye por fondos un poco más opacos; en 2D el canvas no cambia al girar. */
.stage.is-glb .tool, .stage.is-glb .dim, .stage.is-glb .stage-glb__nota,
.stage.is-glb .glb-cotas, .stage.is-glb .pieces, .stage.is-glb .fondo-sel {
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.stage.is-glb .tool { background:rgba(255,255,255,.96); }
.stage.is-glb .dim { background:rgba(255,255,255,.94); }
.stage.is-glb .stage-glb__nota { background:rgba(24,21,15,.72); }
/* el canvas en su propia capa del compositor: girar no vuelve a rasterizar la foto de fondo */
.stage.is-glb canvas { will-change:transform; }

/* ===== bloque 4º (cajón): sin cajón o en maqueta se oculta el bloque ENTERO, no solo su cabecera ===== */
body.sin-cajon .rib[data-bloque="4"], body.maq18 .rib[data-bloque="4"] { display:none !important; }

/* ===== 8-oct (José · Configuración_Web): cada familia muestra SOLO sus bloques.
   Mesas/sillas/cabeceros ocultan los que no aplican (instalación, color cuerpo, tapa, puertas). ===== */
body.sin-inst    .rib[data-bloque="inst"],
body.sin-color   .rib[data-bloque="color"],
body.sin-tapa    .rib[data-bloque="2"],
body.sin-puerta  .rib[data-bloque="3"],
body.sin-extras  .rib[data-bloque="5"],
body.sin-asiento .rib[data-bloque="asiento"],
body.sin-cajonmesa .rib[data-bloque="cajonmesa"],
body.sin-cajonmesa .rib[data-bloque="m40"],
body.sin-tapizados .rib[data-bloque="tapizados"],
body.sin-tapizados .rib[data-bloque="cabcanto"],
body.sin-tapizados .rib[data-bloque="cabmoldura"],
body.sin-tapizados .rib[data-bloque="cabmedidas"] { display:none !important; }
/* 8-oct (José · cabeceros): tapizados por zona */
.tap-switch{ display:flex; align-items:center; gap:8px; font-size:12px; margin:2px 0 8px; cursor:pointer; }
.tap-switch[hidden]{ display:none; }   /* ★ 12-oct (#62): cabeceros con canto ocultan el conmutador «por zona» (hidden lo pisaba display:flex) */
.tap-switch input{ width:16px; height:16px; }
.tap-zona{ margin:9px 0; }
.tap-zona .detalle-lbl{ display:block; margin-bottom:4px; }

/* ===== fila «RAL · Otros acabados · Color muestra»: el texto no se sale de la pastilla (Fran 7-sep) ===== */
/* La regla del modo configurador ponía las pastillas a 11 px pero otra las dejaba
   encoger (flex:1 1 0; min-width:0): con 321 px de columna «ACABADOS» se salía del
   borde. Ahora la pastilla mide lo que mide su texto y, si la fila no cabe, salta
   a una segunda línea. */
body.cfg-mode #viewConfig .cuerpo-top { flex-wrap:wrap; align-items:center; gap:6px; }
body.cfg-mode #viewConfig .cuerpo-top .chip--pill2 {
  flex:0 0 auto; min-width:max-content; font-size:9.5px; letter-spacing:.02em;
  padding:5px 7px; line-height:1.15; overflow:visible;
}
body.cfg-mode #viewConfig .cuerpo-top .seg-ral { flex:0 0 auto; }
body.cfg-mode #viewConfig .cuerpo-top .seg-ral__code { width:46px; font-size:10px; padding:5px 2px; }
body.cfg-mode #viewConfig .cuerpo-top .seg-ral__sys { padding:5px 7px; font-size:10.5px; }

/* ============ REBRAND PARAMETRIC (Alberto 11-sep) ============ */
/* La marca de la barra negra = emblema del árbol (blanco) + wordmark PARAMETRIC.
   Especificidad (0,2,0) para ganar a «.navbar__logo img{height:38px}» (0,1,1).
   El logo del CLIENTE (modo --custom) conserva su tamaño base, no se encoge. */
/* el árbol a 32px: hay que igualar la especificidad de styles.css:3804 (que lo fijaba a 46px) y ganar por orden */
body.nav-dark .navbar__logo:not(.navbar__logo--custom) img.navbar__logo-a,
.navbar__logo:not(.navbar__logo--custom) img.navbar__logo-a{ height:32px; width:auto; }
.navbar__logo img.navbar__logo-b{ height:15px; width:auto; }

/* ---- Posiciones FIJAS de la barra (Fran 11-sep): el menú no debe moverse
   al cambiar de logo (PARAMETRIC en Mi perfil vs logo del cliente en el resto,
   sea cual sea su tamaño). El menú se centra respecto a la BARRA completa, no
   al hueco que deja el logo; los iconos quedan siempre a la derecha; el logo
   del cliente se acota para que no empuje. Solo escritorio (>900px): en móvil
   la barra sigue reflow por filas. ---- */
.navbar__logo{ flex:0 0 auto; }
.navbar__logo--custom img{ max-width:170px; max-height:40px; object-fit:contain; }
@media (min-width:901px){
  .navbar{ position:relative; }
  .navbar__menu{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); flex:none; margin:0; }
  .navbar__icons{ margin-left:auto; }
}

/* pt 18 (Fran 11-sep): la barra del configurador se queda NEGRA como el resto
   (la "siempre negra" del pt 1 aplica también aquí). El header claro del mockup
   se descartó. Se conservan todos los botones (Reiniciar, Ficha PDF, Compartir). */

/* pt 18: barra de scroll del panel izquierdo (.ribbon) fina y sutil, como el mockup */
.ribbon{ scrollbar-width:thin; scrollbar-color:#d8d2c4 transparent; }
.ribbon::-webkit-scrollbar{ width:6px; }
.ribbon::-webkit-scrollbar-thumb{ background:#d8d2c4; border-radius:3px; }
.ribbon::-webkit-scrollbar-track{ background:transparent; }

/* ============ FLUJO DE ENTRADA (gate PDF 11-sep): chooser + formularios particular/profesional ============ */
/* con el gate visible, el fondo (recorrido/hero) no debe hacer scroll ni mostrar barra:
   así la capa fija del acceso queda limpia y la tarjeta perfectamente centrada */
html:has(#login:not([hidden])), body:has(#login:not([hidden])){ overflow:hidden; }
/* .login__card lleva display:flex, que pisa al [hidden] del navegador: hay que forzar el ocultado */
.login__card[hidden]{ display:none !important; }
.gate-card{ width:min(460px,94vw); text-align:left; gap:12px; }
.gate-card--wide{ width:min(640px,94vw); }
/* el chooser y los dos formularios van a DOS columnas: mismo ancho (600px) para que
   encajen sin hueco ni desborde y la tarjeta no cambie de tamaño al navegar el flujo */
#gateChooser, #gateParticular, #gateProfesional{ width:min(600px,94vw); }
.gate-mark{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin-bottom:4px; }
.gate-mark__word{ height:16px; width:auto; filter:invert(1); }
.gate-mark__by{ font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); padding-left:1px; }
.gate-eyebrow{ margin:0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-dark); font-weight:600; }
.gate-h{ margin:2px 0 0; font-size:26px; line-height:1.12; color:var(--ink); font-weight:600; }
.gate-sub{ margin:0; font-size:14px; line-height:1.5; color:var(--muted); }
.gate-opts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:4px; }
.gate-opt{ min-width:0; border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; background:#faf8f2; }
.gate-opt .btn{ width:100%; }
.gate-opt h3{ margin:0; font-size:17px; color:var(--ink); }
.gate-opt p{ margin:0; font-size:12.5px; line-height:1.45; color:var(--muted); flex:1; }
.gate-opt .btn{ margin-top:4px; }
.gate-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gate-field{ min-width:0; display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); }
.gate-field input{ width:100%; min-width:0; box-sizing:border-box; border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:14px; color:var(--ink); background:#f8f7f1; outline:none; transition:.15s; }
.gate-field input:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(168,131,59,.14); }
.gate-check{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--muted); line-height:1.4; }
.gate-check input{ margin-top:2px; flex:none; }
.gate-acc{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:2px; }
.gate-acc .btn{ margin-top:0; }
.gate-link{ border:0; background:none; padding:0; font:inherit; font-size:13px; color:var(--accent-dark); cursor:pointer; text-decoration:underline; align-self:flex-start; }
.gate-link:hover{ color:var(--ink); }
.gate-foot{ margin:2px 0 0; font-size:11.5px; color:var(--muted); }
@media (max-width:520px){
  .gate-opts{ grid-template-columns:1fr; }
  .gate-grid2{ grid-template-columns:1fr; }
  .gate-h{ font-size:22px; }
}

/* Rebrand: logos PARAMETRIC (wordmark blanco → oscuro con invert) en el hero de inicio
   y en el modal de login del cliente, sustituyendo el logo P.ESPEJO antiguo */
.hroom__logo--word{ width:220px; filter:invert(1); }
.cmodal__logo--word{ width:180px; filter:invert(1); }

/* ============ Catálogo como el mockup del Excel BOR CONFIG (4-sep), "diseño pantalla productos
   por medidas" (Alberto 12-sep, "ver línea 638"): tarjeta con el DIBUJO esquemático del mueble
   (no foto de ejemplo), nombre + "Ver 3D" pequeño en la misma fila, "Configurar" a todo el ancho,
   sin la línea "grupo · alto"; filtro solo por ancho (las familias van en la barra lateral);
   6 por fila desde 1100px ============ */
.cat-card__prev--dibujo{ background:#faf9f4; border:1px solid var(--line); border-radius:10px; padding:10px 12px; height:104px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cat-card__prev--dibujo svg{ width:100%; height:100%; display:block; }
/* punto 10 (José 27-sep): miniatura REAL del GLB dentro del mismo marco --dibujo */
.cat-card__prev--dibujo .cat-card__thumb{ width:100%; height:100%; object-fit:contain; display:block; }
.cat-card__prev--dibujo .cat-card__fav{ position:absolute; top:8px; left:8px; z-index:2; }
.cat-card__namerow{ display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; }
.cat-card__namerow .cat-card__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-card__cta--mini{ flex:none; font-size:9.5px; padding:4px 7px; border-radius:7px; line-height:1.1; }
.cat-card__cta--mini .cta-cubo{ width:11px; height:11px; vertical-align:-2px; }
.cat-card__acc{ display:block; }
.cat-card__acc .cat-card__cfg{ width:100%; }
#filtroFamilia[hidden], .cat-filtro__sub[hidden]{ display:none !important; }
/* en 6 columnas el nombre no debe cortarse con "…": fuente del nombre y píldora "Ver 3D" más compactas */
@media (min-width:1100px){
  .cat-card__namerow .cat-card__name{ font-size:14px; letter-spacing:.3px; flex:1 1 auto; }
  .cat-card__cta--mini{ font-size:8.5px; padding:3px 5px; }
  .cat-card__cta--mini .cta-cubo{ width:10px; height:10px; }
}
/* por debajo de 1100px (tablet/móvil, 2-5 columnas) el nombre y la píldora también van compactos
   para que el nombre nunca se corte con "…" */
@media (max-width:1099px){
  .cat-card__namerow .cat-card__name{ font-size:15px; letter-spacing:.3px; flex:1 1 auto; }
  .cat-card__cta--mini{ font-size:9px; padding:3px 5px; }
  .cat-card__cta--mini .cta-cubo{ width:10px; height:10px; }
}

/* ============ Filtros por colección (Excel Alberto 12-sep): fila bajo los anchos, con Curvatto ●,
   Organic ○, Two ○ marcables varios a la vez; "Más filtros" queda a la derecha de esa fila ============ */
.cat-filtro--col{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; margin-bottom:0; padding-top:4px; }
.cat-filtro--col .cat-filtro__t{ margin:0; text-transform:none; letter-spacing:.2px; font-size:13px; }
.cat-filtro--col .cat-masfiltros{ margin:0 0 0 auto; align-self:center; }
.cat-chip--col{ display:inline-flex; align-items:center; gap:7px; background:transparent; border-color:transparent; box-shadow:none; padding:5px 6px; font-size:13.5px; animation:none !important; }
.cat-chip--col:hover{ background:#f4ecd9; border-color:transparent; }
.cat-chip__dot{ width:13px; height:13px; border-radius:50%; border:1.6px solid var(--ink); background:transparent; display:inline-block; flex:none; }
.cat-chip--col.is-active{ background:transparent; border-color:transparent; color:var(--ink); box-shadow:none; font-weight:600; }
.cat-chip--col.is-active .cat-chip__dot{ background:var(--ink); }
@media (max-width:700px){ .cat-filtro--col .cat-masfiltros{ margin-left:0; } }

/* Excel Alberto (13-sep): el catálogo empieza directamente en "¿Qué ancho necesitas?" — fuera la cabecera
   (título de colección, descripción y fila cliente / Mi cuenta / Guardadas; todo sigue en la barra
   PARAMETRIC: MI PERFIL, BORRADORES, cesta). Oculto por CSS para poder recuperarlo si hiciera falta. */
#viewCatalogo .catalogo-head{ display:none !important; }
#viewCatalogo .cat-filtros{ margin-top:4px; }

/* ===================== Excel Alberto 13-sep (hoja «adicionales») ===================== */
/* 5 · color cuerpo: los dos robles con foto real y el recuadro SÍMIL PIEDRA */
#colorCuerpo .cuerpo-sw i.sw-wood{ background-size:cover !important; background-position:center; }
#colorCuerpo .cuerpo-sw i.sw-wood--nat{ filter:brightness(.78) saturate(1.25) sepia(.18); }
#colorCuerpo .cuerpo-sw--piedra i{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
#colorCuerpo .cuerpo-sw--piedra[aria-expanded="true"] i{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px var(--accent); }
#piedraPanel .expvar i{ background-size:cover; background-position:center; }
/* 7 · «Subir foto del color»: la etiqueta se ve como las otras dos opciones */
label.desp-op{ cursor:pointer; }
/* 8 · «Otras» en piedras y porcelánicos */
.expvar--otras i{ display:flex; align-items:center; justify-content:center; background:#fff;
  border:1px dashed var(--accent); color:var(--accent-dark); font-style:normal; font-weight:700; font-size:18px; }
.tapa-foto input[type=file]{ display:block; margin-top:6px; font-size:11px; max-width:100%; }
/* 10 · «Guardar configuración» conserva su texto en la barra del configurador */
@media (max-width:1500px) and (min-width:901px){
  body.cfg-mode #guardarBorradorBtn{ font-size:12px; gap:6px; padding-left:12px; padding-right:12px; }
}
body.cfg-mode #guardarBorradorBtn{ border-color:var(--accent); }
/* 13 · muestras en una sola pantalla: los datos de envío a todo el ancho */
.muform__envio{ grid-column:1 / -1; }
.muform__envio-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px; align-items:start; }
.muform__envio-grid .muform__lbl{ margin-top:0; }
@media (max-width:900px){ .muform__envio-grid{ grid-template-columns:1fr; } }
/* 14 · fecha estimada de carga */
.guardada__carga{ display:block; margin-top:4px; font-size:12px; color:var(--accent-dark); }
.adm-fecha{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }
.adm-fecha input{ height:30px; padding:2px 6px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:12px; }

/* ===================== Excel Alberto 16-sep + revisión 19-sep ===================== */
/* Cesta: Descripción lo MÁS ancha posible; Cant./P.unitario/P.total lo más estrechas;
   títulos centrados sobre su columna (Descripción a la izquierda). */
#viewCesta .cesta thead th{ text-align:center; }
/* revisión 19-sep: todos los títulos centrados, incluida Descripción */
/* datos numéricos centrados bajo su título */
#viewCesta .cesta tbody td:nth-child(3),
#viewCesta .cesta tbody td:nth-child(4),
#viewCesta .cesta tbody td:nth-child(5){ text-align:center; }
#viewCesta .cesta-fila__pu, #viewCesta .cesta-fila__pt{ font-size:13px; white-space:nowrap; }
/* miniatura y columnas contenidas para dejar TODO el ancho a Descripción (col 2, sin width) */
#viewCesta .cesta-thumb{ width:88px; height:66px; }
#viewCesta .cesta thead th:nth-child(1){ width:100px; }   /* referencia + miniatura */
#viewCesta .cesta thead th:nth-child(3){ width:54px; }    /* cantidad (stepper vertical) */
#viewCesta .cesta thead th:nth-child(4){ width:86px; }    /* p. unitario */
#viewCesta .cesta thead th:nth-child(5){ width:86px; }    /* p. total */
#viewCesta .cesta thead th:nth-child(6){ width:46px; }    /* acciones (verticales: lápiz / eliminar) */
#viewCesta .cant-step{ gap:5px; padding:3px 6px; }
/* Configurador: el precio de la barra, arriba y más grande (Excel 16-sep / audio 01:05) */
body.cfg-mode:not(.is-invitado) .topbar .price__num strong{ font-size:32px !important; line-height:1.05; }
/* Muestras: checkbox «muestra gratis» */
.muform__check{ display:flex; align-items:center; gap:8px; margin:6px 0 10px; font-size:13px; cursor:pointer; }
.muform__check input{ width:17px; height:17px; accent-color:var(--accent); }
.muform__check small{ color:var(--muted); }
.muform__lbl[hidden]{ display:none; }
/* Extras: recuadro de foto guía de la posición */
.extra-foto-guia{ margin:6px 0; padding:14px; border:1px dashed var(--line); border-radius:10px;
  color:var(--muted); font-size:12px; text-align:center; background:#faf8f2; }

/* Formulario de instalación y transporte (Excel 16-sep · Inma) */
.cesta-instal{ display:block; margin-top:14px; padding:16px 18px; }
.cesta-instal > summary{ cursor:pointer; font-size:14px; list-style:none; }
.cesta-instal > summary::-webkit-details-marker{ display:none; }
.cesta-instal > summary small{ color:var(--muted); font-weight:400; }
.cesta-instal[open] > summary{ margin-bottom:10px; }
.instal__sec{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-dark); margin:14px 0 6px; font-weight:700; }
.instal__grid label{ font-size:12px; }
.instal__grid .instal__wide{ grid-column:1 / -1; }

/* Forma de pago (ficha de cliente) y casillas de pago del panel de fábrica (Excel 16-sep) */
/* ★ 12-oct (#108): hasta 3 zonas por cliente (nombre + tarifa) */
.admin__tar3{ font-size:12px; }
.ac-tar3-row{ display:flex; gap:6px; margin-top:4px; }
.ac-tar3-row .ac-tar-nom{ flex:0 0 42%; min-width:0; }
.ac-tar3-row .select{ flex:1 1 auto; min-width:0; }
.admin__pago{ font-size:12px; }
.admin__pago-row{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.admin__pago-row input{ width:56px; }
.admin__pago-row small{ color:var(--muted); }
.admin__pago-sum.is-ok{ color:#2f7d4f; font-weight:700; }
.admin__pago-sum.is-mal{ color:#c0553c; font-weight:700; }
.adm-pagos{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.adm-pago{ display:inline-flex; align-items:center; gap:3px; font-size:12px; }
.adm-pago-tot{ font-size:11px; color:var(--accent-dark); }
.guardada__pago{ display:block; margin-top:3px; font-size:12px; color:var(--accent-dark); }

/* Cesta → «Proyecto» (Excel 16-sep · evitar el icono de carrito) */
.ico-proy{ width:20px; height:20px; }
#quoteBtn .ico-proy, #cfgBarraCesta .ico-proy{ width:18px; height:18px; }
/* Símil piedra: cuadrante compacto, en una sola ventana (audio 01:06) */
#piedraPanel{ margin-top:8px; padding:8px 10px; }
#piedraPanel .detalle-lbl{ margin-bottom:6px; }
#piedraPanel .exp__grid{ grid-template-columns:repeat(4, 1fr); gap:6px; }
#piedraPanel .expvar i{ height:40px; border-radius:7px; }
#piedraPanel .expvar span{ font-size:9.5px; line-height:1.15; }

/* Mi espacio: en Mis muestras / Pedidos / Direcciones el lateral es el menú de Mi espacio (Excel 16-sep) */
.cat-side--miesp .cat-side__it{ font-size:12.3px; }

/* Configurador: el menú superior no desaparece — navbar + barra de acción apiladas (Excel 16-sep) */
body.cfg-mode.nav-mode .app{ grid-template-rows:auto auto 1fr; }
body.cfg-mode .navbar{ position:relative; z-index:6; }

/* Muestras · asistente en una sola pantalla, sin scroll (Excel 16-sep) */
.muwiz{ max-width:1080px; margin:0 auto; padding:14px 16px 8px; }
.muwiz .colecc__h{ margin:0 0 10px; }
.muwiz__grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.muwiz__main{ display:flex; flex-direction:column; gap:12px; }
.muwiz__step{ display:flex; gap:12px; }
.muwiz__step[hidden]{ display:none; }
.muwiz__n{ flex:0 0 26px; height:26px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.muwiz__b{ flex:1 1 auto; min-width:0; }
.muwiz__t{ font-size:14px; font-weight:600; margin-bottom:7px; }
.muwiz__t small{ color:var(--muted); font-weight:400; }
.muwiz__chips{ display:flex; gap:8px; flex-wrap:wrap; }
.muwiz__chip{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 15px;
  font-size:13px; cursor:pointer; }
.muwiz__chip:hover{ border-color:var(--accent); }
.muwiz__chip.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.muwiz__envio{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.muwiz__envio .mv-dir{ grid-column:1 / -1; min-height:54px; }
.muwiz__acc{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px; }
.muwiz__hist{ align-self:start; }
@media (max-width:820px){ .muwiz__grid{ grid-template-columns:1fr; } .muwiz__envio{ grid-template-columns:1fr; } }

/* Precio en la barra de cotas, tras las medidas y más grande (Excel 16-sep · audio 01:05) */
.gc-precio{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 6px 0 12px;
  border-left:1px solid var(--line); margin-left:2px; }
.gc-precio__lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.gc-precio strong{ font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }
/* José 28-sep: «+ a valorar» en su propia línea bajo el importe, más pequeño y suave */
.gc-precio__av{ display:block; font-size:12px; font-weight:600; color:var(--muted); line-height:1.2; margin-top:2px; white-space:nowrap; }
/* ★ t15 (José N13): PRECIO NETO + IVA = TOTAL — encima del total, en pequeño y en dos líneas, el neto y el IVA desglosado */
.gc-precio__des{ display:flex; flex-direction:column; align-items:center; font-size:11px; font-weight:600; color:var(--muted); line-height:1.25; white-space:nowrap; margin-bottom:3px; letter-spacing:0; font-variant-numeric:tabular-nums; }
.gc-precio__des i{ font-style:normal; font-weight:500; }
#gcPrecio{ text-align:center; }
/* ★ t15 (José N10): altura de cada tipo de instalación, en una segunda línea dentro de la pastilla («Con zócalo» / «8 cm») */
#bases .base-txt{ display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.15; min-width:0; }
#bases .base-alto{ font-size:10.5px; font-weight:500; opacity:.75; }
/* con la barra de cotas visible, el precio de la barra superior desaparece */
body.cotas-precio.cfg-mode .price__num{ display:none !important; }

/* Precio SIEMPRE en la misma fila de la barra de cotas (mockup Excel 16-sep · «tras la medida»):
   en anchos de portátil se compactan las casillas para que no baje a una segunda línea */
@media (max-width:1560px){
  body.cotas-precio .glb-cotas{ flex-wrap:nowrap; gap:8px; max-width:96%; }
  body.cotas-precio .glb-cotas .gc-m{ padding:0 2px; }
  body.cotas-precio .glb-cotas .gc-m input{ width:64px; font-size:15px; }
  body.cotas-precio .glb-cotas .gc-r{ font-size:9.5px; white-space:normal; max-width:94px; text-align:center; line-height:1.25; }
  body.cotas-precio .gc-precio{ margin-left:auto; padding-left:10px; }
  body.cotas-precio .gc-precio__lbl{ font-size:9px; white-space:nowrap; }
  body.cotas-precio .gc-precio strong{ font-size:21px; }
}
/* iPad/tablet (auditoría 22-sep): por debajo de 900px el precio no cabe en la fila de
   cotas → la barra vuelve a envolver y el precio baja a su propia fila, a la derecha */
@media (max-width:900px){
  body.cotas-precio .glb-cotas{ flex-wrap:wrap; }
  body.cotas-precio .gc-precio{ flex-basis:100%; flex-direction:row; justify-content:flex-end; align-items:baseline; gap:8px; padding:2px 2px 0 0; margin-left:0; }
}

/* ventanita de «correo listo» (revisión 19-sep): abre Outlook/Gmail web sin depender del mailto del PC */
.modal__card--compose{ width:min(560px,96vw); height:auto; max-height:92vh; }
.compose__body{ padding:16px 18px 18px; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.compose__lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#948e7b; margin-top:8px; }
.compose__subject{ width:100%; }
.compose__txt{ width:100%; resize:vertical; font-size:13px; line-height:1.5; }
.compose__acc{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.compose__nota{ color:var(--muted); font-size:11px; margin-top:10px; line-height:1.4; }

/* muestra gratis: los 4 materiales como checkboxes, sin unidades (Excel · revisión 19-sep) */
.mv-gratis{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 4px; }
/* el atributo hidden debe ganar al display de estos contenedores (revisión 19-sep) */
#mvColores[hidden], #mvGratisSel[hidden], #mvAddColor[hidden]{ display:none !important; }
.mv-gratis label{ display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--line);
  border-radius:9px; font-size:13px; font-weight:500; cursor:pointer; background:#fff; }
.mv-gratis label:hover{ border-color:var(--accent); }
.mv-gratis input{ width:17px; height:17px; accent-color:var(--accent); flex:none; }
.mv-gratis label.is-on{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
@media (max-width:560px){ .mv-gratis{ grid-template-columns:1fr; } }

/* columna de 400px: los elementos de COLOR CUERPO y DETALLE llenan el bloque (revision 19-sep) */
body.cfg-mode #colorCuerpo{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
body.cfg-mode #colorCuerpo .cuerpo-sw{ width:auto; }
body.cfg-mode #colorCuerpo .cuerpo-sw i{ width:100%; height:74px; border-radius:9px; }
body.cfg-mode #colorCuerpo .cuerpo-sw span{ font-size:11px; max-width:none; }
body.cfg-mode .detalle-block .cuerpo-opts{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; }
body.cfg-mode .detalle-block .cuerpo-sw i{ width:40px; height:40px; }
body.cfg-mode .detalle-block .cuerpo-sw span{ font-size:10.5px; }

/* columna 400px: controles del configurador más grandes para aprovechar el ancho (revisión 19-sep) */
body.cfg-mode #viewConfig .chips--mm{ gap:8px; }
body.cfg-mode #viewConfig .chips--mm .chip{ font-size:12.5px; padding:8px 16px; }
body.cfg-mode #viewConfig .cuerpo-top{ gap:8px; }
body.cfg-mode #viewConfig .cuerpo-top .seg-ral__sys{ font-size:13px; padding:9px 13px; }
body.cfg-mode #viewConfig .cuerpo-top .seg-ral__code{ width:66px; font-size:13px; padding:9px 6px; }
body.cfg-mode #viewConfig .chip--pill2{ font-size:11.5px; padding:9px 13px; }
body.cfg-mode #viewConfig .detalle-block .cuerpo-sw i{ width:44px; height:44px; }
body.cfg-mode #viewConfig .detalle-block .cuerpo-sw span{ font-size:11px; }
/* cabeceras de los bloques plegables, algo más grandes */
body.cfg-mode #viewConfig .rib--plegable > .rib__head--toggle{ font-size:14px; padding-top:4px; padding-bottom:4px; }

/* Cesta: sin scroll horizontal y sin solape de campos (revisión 19-sep) */
#viewCesta .cesta-wrap{ overflow-x:hidden; }
#viewCesta .cesta{ table-layout:fixed; width:100%; }
#viewCesta .cesta td, #viewCesta .cesta th{ overflow:hidden; }
#viewCesta .cesta td:nth-child(2){ overflow-wrap:anywhere; word-break:break-word; overflow:visible; }
#viewCesta .cesta-fila__pu, #viewCesta .cesta-fila__pt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Cantidad en vertical: + arriba, número, − abajo (revisión 19-sep) */
#viewCesta .cant-step{ flex-direction:column; gap:1px; padding:3px 6px; border-radius:10px; line-height:1; }
#viewCesta .cant-step .cesta-mas{ order:0; }
#viewCesta .cant-step b{ order:1; min-width:0; font-size:14px; padding:1px 0; }
#viewCesta .cant-step .cesta-menos{ order:2; }
#viewCesta .cant-step button{ padding:0 4px; font-size:16px; line-height:1.1; }

/* Acciones en vertical (✎ arriba, ✕ abajo) para dar más ancho a Descripción (revisión 19-sep) */
#viewCesta .cesta-acc-td{ text-align:center; padding-left:4px; padding-right:6px; white-space:normal; }
#viewCesta .cesta-acc-td .cesta-edit{ display:block; margin:0 auto 4px; width:28px; height:28px; }
#viewCesta .cesta-acc-td .cesta-del{ display:block; margin:0 auto; width:28px; height:28px; }

/* posición por extra: campo obligatorio dentro de cada tarjeta de extra (Excel 20-sep) */
.extra-pos{ margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.extra-pos__lbl{ font-size:11px; color:var(--muted); }
.extra-pos__lbl .muform__req{ color:#c0553c; }
.extra-pos__in{ width:100%; }

/* fila de color (RAL/código · Otros acabados · Color muestra) llena el ancho, en UNA fila (revisión 20-sep) */
body.cfg-mode #viewConfig .cuerpo-top{ display:flex; gap:8px; align-items:stretch; flex-wrap:nowrap; }
body.cfg-mode #viewConfig .cuerpo-top .seg-ral{ flex:0 0 auto; }
body.cfg-mode #viewConfig .cuerpo-top .seg-ral__code{ width:54px; flex:0 0 auto; }
body.cfg-mode #viewConfig .cuerpo-top .chip--pill2{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; }

/* COLOR DETALLE del cuerpo: oculto (el cliente no quiere verlo · 20-sep). El de PATAS se mantiene. */
#viewConfig .detalle-block[data-maq18="fuera"]{ display:none !important; }

/* mensaje «pedido en estudio + pago 50%» al consultar un pedido enviado (Excel 20-sep) */
.guardada__estudio{ display:block; margin:8px 0 4px; padding:9px 12px; border-radius:9px;
  background:var(--oro-suave,#f3ece0); color:var(--ink); font-size:12.5px; line-height:1.45; }
/* Alberto 21-sep: aviso «solo lacados» en el color del cuerpo cuando hay moldura */
.cuerpo-solo-laca{ flex-basis:100%; grid-column:1/-1; width:100%; box-sizing:border-box; margin-top:4px; font-size:11px; color:var(--muted);
  background:#faf6ec; border:1px solid #ecdfc2; border-radius:8px; padding:6px 10px; }
/* Alberto 21-sep: botón «Aceptar» de los desplegables (puerta/cajón) — cierran solo al pulsarlo */
.exp__aceptar{ display:block; width:100%; margin:8px 0 2px; padding:9px 14px; border:0; border-radius:9px;
  background:var(--accent-dark, #6f5426); color:#fff; font-weight:700; font-size:12px; letter-spacing:.03em;
  cursor:pointer; transition:.15s; }
.exp__aceptar:hover{ filter:brightness(1.08); }
/* Enlaces legales al pie del menú lateral (correo José 21-sep) */
.side-legal{ display:flex; flex-direction:column; gap:3px; margin-top:10px; padding-top:9px; border-top:1px solid var(--line); }
.side-legal a{ font-size:10.5px; color:var(--muted); text-decoration:none; line-height:1.35; }
.side-legal a:hover{ color:var(--accent-dark); text-decoration:underline; }
/* móvil (enlaces de feria, 23-sep): en pantallas estrechas la tabla del proyecto
   (min-width 560) vuelve a deslizar dentro de su marco — el overflow-x:hidden del
   rediseño 19-sep era para escritorio, donde las columnas caben sin scroll */
@media (max-width:600px){
  #viewCesta .cesta-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width:600px){
  /* el botón de enviar («Generar propuesta o Solicitar presupuesto →») no cabe
     en una línea a 390px: se permite el salto y la flecha deja de asomar */
  .btn--send{ white-space:normal; height:auto; min-height:46px; padding:10px 16px; }
}
@media (max-width:600px){
  /* formulario de instalación/transporte y proyecto: a una columna en teléfono */
  .proyecto__grid, .instal__grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px){
  /* «Enviar por correo a comercial@…» iba nowrap (314px) y ensanchaba la página */
  #proyMailto{ white-space:normal; text-align:center; height:auto; min-height:40px; padding-top:8px; padding-bottom:8px; }
}
/* botón «Aceptar» del valor del punto (José 23-sep, duda 19) */
.btn-mini{ font:inherit; cursor:pointer; border:1px solid var(--line); background:#fff; border-radius:8px; padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--ink); }
.btn-mini--gold{ background:var(--accent, #a8833b); border-color:var(--accent, #a8833b); color:#fff; }
.btn-mini--gold:hover{ filter:brightness(1.06); }
.combi--vp{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.combi--vp #valorPuntoNote{ flex-basis:100%; }
/* Solicitudes de alta en admin (José 23-sep, duda 26) */
.admin-count--alerta:not(:empty){ background:#c0392b; color:#fff; border-radius:10px; padding:0 6px; font-size:11px; margin-left:2px; }
.admin-solfiltro{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px; }
.admin-sol-lista{ display:flex; flex-direction:column; gap:12px; }
.adm-sol{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card); }
.adm-sol--pendiente{ border-left:4px solid var(--accent, #a8833b); }
.adm-sol--aprobada{ border-left:4px solid #2e6b33; opacity:.9; }
.adm-sol--denegada{ border-left:4px solid #8f2b2b; opacity:.7; }
.adm-sol__cab{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.adm-sol__tipo{ font-size:12px; color:var(--muted); }
.adm-sol__nom{ font-size:15px; }
.adm-sol__fecha{ color:var(--muted); margin-left:auto; }
.adm-sol__datos{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:#4a453b; margin-bottom:8px; }
.adm-sol__cuenta{ flex-basis:100%; color:#2e6b33; }
.adm-sol__acc{ display:flex; gap:8px; }
@media (max-width:600px){
  /* la barra de pestañas del admin (Pedidos/Tarifas/Clientes/Solicitudes) desliza
     en horizontal en móvil en vez de ensanchar la página */
  .admin-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
  .admin-tabbtn{ flex:none; white-space:nowrap; }
}

/* modal de texto propio (25-sep · agente QA): sustituye al prompt() nativo que congelaba la pestaña */
.txt-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  background:rgba(20,16,10,.5); backdrop-filter:blur(2px); }
.txt-modal__card{ background:var(--card,#fff); color:var(--ink,#2a2620); border:1px solid var(--line,#e6e0d4);
  border-radius:14px; padding:20px; width:min(460px,92vw); box-shadow:0 24px 64px rgba(0,0,0,.32); }
.txt-modal__t{ font-size:13.5px; line-height:1.45; margin-bottom:12px; }
.txt-modal__in{ width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--line,#ddd);
  border-radius:9px; font-size:14px; background:var(--bg,#fff); color:var(--ink,#2a2620); }
.txt-modal__in:focus{ outline:2px solid var(--accent-dark,#6f5426); outline-offset:1px; }
.txt-modal__acc{ display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.txt-modal__acc button{ padding:9px 16px; border-radius:9px; border:0; font-weight:700; font-size:13px; cursor:pointer; }
.txt-modal__cancel{ background:var(--line,#eee); color:var(--ink,#333); }
.txt-modal__ok{ background:var(--accent-dark,#6f5426); color:#fff; }

/* ★ 9-oct C6 (José): muebles de medidas LIBRES (mesas/sillas/cabeceros/mesitas) → la fila de cotas no muestra columna de módulo */
body.libre-cotas #gcMods { display: none; }
/* ★ 12-oct: frente fijo (cómodas) → sin columna de módulo (la cota de módulo no aplica; el frente es fijo) */
body.cotas-fijas #gcMods { display: none; }

/* ★ 9-oct (Alberto · REGLAS DE COMERCIALIZACION): modalidad PVP, ficha Golden, categorías por cliente, tapa inferior */
body.modo-pvp .datosop .preciotab:not(.preciotab--pvp), body.modo-pvp #tarifaSelRow { display: none; }
.pvp-badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border: 1.5px solid #c99a3b; border-radius: 999px; color: #a97b1f; font-size: .72rem; font-weight: 700; letter-spacing: .04em; vertical-align: middle; }
.pvp-badge[hidden] { display: none; }   /* ★ 15-oct: el inline-block pisaba el hidden → en puntos salía una pastilla «—» (#125) */
#dtoFichaRow[hidden] { display: none; }
.pvp-box { margin: 10px 0 6px; }
.pvp-nota { color: #8a8a8a; font-weight: 400; margin-left: 6px; }
.pvp-ejemplo { background: #faf6ee; border: 1px solid #efe3c8; border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.pvp-ejemplo__t { font-size: .72rem; letter-spacing: .06em; color: #a97b1f; font-weight: 700; margin-bottom: 6px; }
.pvp-ejemplo__row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: .92rem; }
.pvp-ejemplo__res { border-top: 1px solid #efe3c8; margin-top: 4px; padding-top: 6px; font-weight: 700; color: #a97b1f; font-size: 1rem; }
.pvp-ejemplo small { color: #8a8a8a; }
.punto-pago { margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid #e6e2d8; display: flex; flex-direction: column; gap: 2px; }
.punto-pago__lbl { font-size: .72rem; letter-spacing: .06em; color: #777; font-weight: 700; }
.admin__est { grid-column: 1 / -1; }
.admin__est-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 2px; }
.admin__est-it { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 400; }
.admin__est-it.is-prox { color: #9a9a9a; }
.admin__est small { display: block; color: #8a8a8a; font-weight: 400; }
.admin-import { margin-left: auto; white-space: nowrap; }
.admin-import__tpl { font-size: .8rem; color: #a97b1f; margin-left: 8px; white-space: nowrap; }
.tapainf { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e0dbd0; }
.tapainf__lbl { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #555; margin-bottom: 6px; }
.tapainf small { display: block; color: #8a8a8a; margin-top: 6px; font-size: .74rem; }
.tapainf .chip i.sw-tone { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
/* ★ 17-oct (José 08-oct · G3-025): las píldoras «Otros acabados» y «Color muestra» se ocultan en las sillas (el display de .chip anulaba [hidden]) */
#viewConfig .chip--pill2[hidden]{ display:none !important; }

/* ★ 17-oct (José · G3-017/018/023): acabados de cada mesa del 40.01 con los componentes del 192.01 */
.m40-acab .cuerpo-top{ margin-bottom:9px; }
.m40-piedra .exp__grid{ grid-template-columns:repeat(4, 1fr); gap:6px; }
.m40-piedra .expvar i{ height:40px; border-radius:7px; background-size:cover; background-position:center; }
.m40-piedra .expvar span{ font-size:9.5px; line-height:1.15; }

/* ★ 17-oct (José 5-oct · G5-013): variante de tapa en gris (no disponible en el modelo) */
.expvar.is-off{ opacity:.4; cursor:not-allowed; filter:grayscale(1); }
.expvar.is-off .expvar__lg{ color:var(--terra); }

/* ★ 17-oct (Fran): Admin › Revisión 3D (capturas de combinaciones al azar con marca correcta/error). Sin pestaña: se abre a
   PÁGINA COMPLETA (#/revision3d, body.admin-completa) desde el botón de la cabecera del Admin. */
.rev3d-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px 18px; flex-wrap:wrap; margin-bottom:12px; }
.rev3d-cab .perfil__h{ margin:0 0 4px; }
.rev3d-cab .admin__hint{ margin:0; max-width:62ch; }
.rev3d-acc{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rev3d-sel{ font:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); max-width:100%; }
.rev3d-cuenta{ display:flex; gap:6px 16px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin:2px 0 12px; font-variant-numeric:tabular-nums; }
.rev3d-cuenta span:first-child{ color:var(--ink); font-weight:600; }
.rev3d-cuenta .ok{ color:#2e6b33; }
.rev3d-cuenta .ko{ color:#a3301f; }
.rev3d-filtros{ display:flex; gap:8px 10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.rev3d-revisor{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin-left:auto; }
.rev3d-revisor input{ font:inherit; font-size:13px; padding:6px 9px; border:1px solid var(--line); border-radius:8px; width:140px; }
.rev3d-rejilla{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; max-width:1960px; }
.rev3d-ficha{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.rev3d-ficha[data-estado="ok"]{ border-color:#9cc59f; box-shadow:inset 0 3px 0 #2e6b33; }
.rev3d-ficha[data-estado="mal"]{ border-color:#e3a497; box-shadow:inset 0 3px 0 #a3301f; }
.rev3d-ficha img{ display:block; width:100%; height:auto; background:#fff; cursor:zoom-in; border-bottom:1px solid #f1eee6; }
.rev3d-cuerpo{ display:flex; flex-direction:column; gap:7px; padding:10px 12px 12px; flex:1; }
.rev3d-cuerpo b{ font-size:13.5px; }
.rev3d-eleg{ margin:0; font-size:12px; line-height:1.4; color:#5d574a; }
.rev3d-acciones{ display:flex; gap:8px; margin-top:auto; }
.rev3d-acciones .btn{ flex:1; justify-content:center; padding:7px 10px; font-size:13px; }
.rev3d-ok[aria-pressed="true"]{ background:#2e6b33; border-color:#2e6b33; color:#fff; }
.rev3d-mal[aria-pressed="true"]{ background:#a3301f; border-color:#a3301f; color:#fff; }
.rev3d-nota{ font:inherit; font-size:12.5px; width:100%; box-sizing:border-box; resize:vertical; padding:7px 9px; border:1px solid var(--line); border-radius:8px; }
.rev3d-nota:focus, .rev3d-revisor input:focus, .rev3d-sel:focus{ outline:2px solid var(--accent, #a8833b); outline-offset:1px; }
/* ★ t16: «Con error» pide el comentario antes de guardarse */
.rev3d-ficha.pide-nota .rev3d-nota{ border-color:#b23a22; outline:2px solid #b23a22; outline-offset:1px; background:#fdf3f0; }
.rev3d-ficha.pide-nota .rev3d-nota::placeholder{ color:#b23a22; }
.rev3d-quien{ color:var(--muted); font-size:11.5px; min-height:1em; }
.rev3d-mas{ display:flex; justify-content:center; margin-top:16px; }
.rev3d-zoom{ border:none; padding:0; background:transparent; max-width:96vw; max-height:94vh; }
.rev3d-zoom::backdrop{ background:rgba(20,16,10,.78); }
.rev3d-zoom img{ display:block; max-width:96vw; max-height:94vh; width:auto; height:auto; border-radius:8px; cursor:zoom-out; }
@media (max-width:600px){
    .rev3d-revisor{ margin-left:0; }
}
.rev3d-solo-completa{ display:none; }
body.admin-completa .rev3d-solo-completa{ display:inline-flex; }
body.admin-completa .admin-head, body.admin-completa .admin-tabs{ display:none; }
body.admin-completa .admin-wrap{ max-width:none; padding:18px 24px 40px; }
body.admin-completa #adminPageRevision > .admin__card{ border:none; box-shadow:none; background:transparent; padding:0; }
body.admin-completa .rev3d-cab .perfil__h{ font-size:26px; }
@media (max-width:600px){ body.admin-completa .admin-wrap{ padding:14px 16px 32px; } }
/* una captura por fila (Fran 17-oct: «en 1 columna para que se vean las imágenes más grandes»): imagen a todo el ancho y
   las marcas a su derecha; en pantallas estrechas, debajo */
.rev3d-ficha{ display:grid; grid-template-columns:minmax(0,1fr) 330px; }
.rev3d-ficha img{ border-bottom:none; border-right:1px solid #f1eee6; align-self:start; }
.rev3d-cuerpo{ padding:14px 16px; gap:10px; }
.rev3d-cuerpo b{ font-size:15px; }
.rev3d-acciones{ margin-top:4px; }
.rev3d-nota{ min-height:90px; }
@media (max-width:1000px){ .rev3d-ficha{ grid-template-columns:minmax(0,1fr); } .rev3d-ficha img{ border-right:none; border-bottom:1px solid #f1eee6; } .rev3d-nota{ min-height:0; } }
/* ★ 19-oct (José N11): la combinación de cada captura por APARTADOS (cuerpo, puertas, cajones, parte inferior, tapa, extras…):
   etiqueta a la izquierda, valores debajo uno de otro; el punto de color marca lo que cambia en esa combinación */
.rev3d-aps{ margin:0; display:grid; border-top:1px solid #efeadf; }
.rev3d-ap{ display:grid; grid-template-columns:98px minmax(0,1fr); gap:2px 10px; padding:5px 0; border-bottom:1px solid #efeadf; }
.rev3d-ap dt{ position:relative; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#857c6b; line-height:1.55; }
.rev3d-ap dt i{ position:absolute; left:-11px; top:5px; width:6px; height:6px; border-radius:50%; background:var(--accent, #a8833b); }
.rev3d-ap.is-cambio dt{ color:#7a5b1c; }
.rev3d-ap[data-otros] dt{ color:#a3301f; }
.rev3d-ap dd{ margin:0; display:flex; flex-direction:column; gap:1px; min-width:0; font-size:12.5px; line-height:1.4; color:var(--ink); overflow-wrap:anywhere; }
.rev3d-ap dd small{ font-size:11.5px; color:var(--muted); }
/* ★ 23-oct: columna PRECIO de la Revisión 3D (lotes con precio desglosado): importe de cada apartado a la derecha y total al pie */
.rev3d-aps--pr .rev3d-ap{ grid-template-columns:98px minmax(0,1fr) auto; }
.rev3d-ap dd.rev3d-pr{ align-items:flex-end; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rev3d-ap--cab{ padding:3px 0; }
.rev3d-ap--cab dd.rev3d-pr{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#857c6b; }
.rev3d-ap--tot dt, .rev3d-ap--tot dd.rev3d-pr{ font-weight:700; color:var(--ink); }
/* ★ 17-oct (Fran): NOTA POR MUEBLE en la Revisión 3D — cabecera de cada bloque (nota automática + vuestra 1-10) y ranking */
.rev3d-bloque{ display:grid; gap:12px; padding:16px 18px; border-radius:12px; background:#f4f1e9; border:1px solid #e6ddca; margin-top:10px; scroll-margin-top:80px; }
.rev3d-bloque__cab{ display:flex; align-items:baseline; gap:6px 16px; flex-wrap:wrap; }
.rev3d-bloque__cab h4{ margin:0; font-size:20px; letter-spacing:.2px; }
.rev3d-bloque__cab > span{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.rev3d-bloque__cab .ok{ color:#2e6b33; } .rev3d-bloque__cab .ko{ color:#a3301f; }
.rev3d-bloque__notas{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.rev3d-bloque__notas.solo{ grid-template-columns:minmax(0,1fr); }
.rev3d-bloque__ia, .rev3d-bloque__vuestra{ background:#fff; border:1px solid #ebe4d4; border-radius:10px; padding:12px 14px; }
.rev3d-bloque__ia{ display:flex; gap:14px; align-items:flex-start; }
.rev3d-bloque__ia p{ margin:4px 0 0; font-size:13px; line-height:1.45; color:#4a453b; }
.rev3d-bloque__vuestra{ display:flex; flex-direction:column; gap:8px; }
.rev3d-num{ flex:none; min-width:58px; text-align:center; font-size:28px; font-weight:700; line-height:1; padding:10px 8px; border-radius:10px; background:#efeadf; color:var(--ink); font-variant-numeric:tabular-nums; }
.rev3d-num[data-sem="bien"]{ background:#e3f0e3; color:#2e6b33; }
.rev3d-num[data-sem="regular"]{ background:#f8ecd2; color:#8a5a12; }
.rev3d-num[data-sem="mal"]{ background:#f6e0db; color:#a3301f; }
.rev3d-escala{ display:flex; gap:4px; flex-wrap:wrap; }
.rev3d-escala button{ font:inherit; font-size:13px; font-weight:600; width:34px; height:32px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; font-variant-numeric:tabular-nums; }
.rev3d-escala button:hover{ border-color:#cdc7b4; }
.rev3d-escala button[aria-pressed="true"][data-sem="bien"]{ background:#2e6b33; border-color:#2e6b33; color:#fff; }
.rev3d-escala button[aria-pressed="true"][data-sem="regular"]{ background:#b7791f; border-color:#b7791f; color:#fff; }
.rev3d-escala button[aria-pressed="true"][data-sem="mal"]{ background:#a3301f; border-color:#a3301f; color:#fff; }
.rev3d-escala button:focus-visible, .rev3d-rk:focus-visible{ outline:2px solid var(--accent, #a8833b); outline-offset:1px; }
.rev3d-bcom{ font:inherit; font-size:12.5px; width:100%; box-sizing:border-box; resize:vertical; padding:7px 9px; border:1px solid var(--line); border-radius:8px; }
.rev3d-ficha[data-ia="1"]{ border-color:#e9c98a; }
.rev3d-ia{ margin:0; font-size:12.5px; line-height:1.4; color:#8a5a12; background:#fbf2df; border-radius:8px; padding:7px 9px; }
.rev3d-ranking{ margin:4px 0 14px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:10px 14px; }
.rev3d-ranking summary{ cursor:pointer; font-weight:600; font-size:14px; }
.rev3d-ranking summary small{ font-weight:400; color:var(--muted); }
.rev3d-rank{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.rev3d-rk{ font:inherit; display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:6px 10px; border-radius:9px; border:1px solid var(--line); border-left-width:4px; background:#fff; cursor:pointer; text-align:left; }
.rev3d-rk b{ font-size:12.5px; } .rev3d-rk span{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.rev3d-rk[data-sem="bien"]{ border-left-color:#2e6b33; } .rev3d-rk[data-sem="regular"]{ border-left-color:#b7791f; } .rev3d-rk[data-sem="mal"]{ border-left-color:#a3301f; }
.rev3d-rk.is-active{ background:#f4f1e9; border-color:var(--accent, #a8833b); }
@media (max-width:800px){ .rev3d-bloque__notas{ grid-template-columns:minmax(0,1fr); } }

/* ★ 18-oct (G5-044 · José «mismo formato que el 192.01»): el CUERPO de cada mesa del 40.01 con las mismas TARJETAS que el
   «Color cuerpo» del 192.01 (antes salían fichas pequeñas redondeadas) */
.m40-acab .cuerpo-opts .cuerpo-sw i{ border-radius:4px; }
.m40-acab .cuerpo-opts .cuerpo-sw span{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; text-align:center; line-height:1.2; }
.m40-acab .cuerpo-opts .cuerpo-sw i.sw-wood{ background-size:cover !important; background-position:center; }
.m40-acab .cuerpo-opts .cuerpo-sw--piedra i{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
body.cfg-mode .m40-acab .cuerpo-opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
body.cfg-mode .m40-acab .cuerpo-opts .cuerpo-sw{ width:auto; }
body.cfg-mode .m40-acab .cuerpo-opts .cuerpo-sw i{ width:100%; height:74px; border-radius:9px; }
body.cfg-mode .m40-acab .cuerpo-opts .cuerpo-sw span{ font-size:11px; max-width:none; }