/* Configurador 3D de piscinas prefabricadas — tema neutro (verde #1F6F50 sobre gris oscuro) y componentes propios */
:root {
  --teal: #1F6F50; --teal-d: #17553d; --teal-bg: #e6f2ec;
  --ink: #1a171c; --ink-2: #3b3538; --grey: #6f6a6d; --line: #e6e2e0; --bg: #f5f4f1; --card: #ffffff;
  --ico-wall: #e4e0dc; --ico-open: #fbfaf8; --ico-door: #cfe6da; --ico-fixed: #efece9; --ico-line: #2f2a2c; --ico-accent: #1F6F50;
  --panel-w: 440px;
}
.topbar { border-bottom-color: var(--teal); }
.logo { height: 30px; background: #fff; border-radius: 6px; padding: 4px 8px; }
#loading .spinner { border-top-color: var(--teal); }
.btn.primary { background: var(--teal); color: #fff; } .btn.primary:hover { background: var(--teal-d); }
.price-box b { color: #fff; }
.status.ok { color: #7ed3a0; } .status.warn { color: #f2c46d; } .status.bad { color: #ff8a80; }
.seg button.active { background: var(--ink); }
.seg.envs button.active { background: var(--teal); color: #fff; }
.seg.wrap { display: flex; flex-wrap: wrap; gap: 4px; box-shadow: none; background: transparent; }
.seg.wrap button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; }
.seg.wrap button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.sys-grid.two { grid-template-columns: 1fr 1fr; }
.panel.expert .sys-grid.two { grid-template-columns: 1fr 1fr; }
.handles.three { grid-template-columns: repeat(3, 1fr); } .handles.four { grid-template-columns: repeat(4, 1fr); }
.handle .handle-ico { width: 34px; }
.handle.disabled { opacity: .35; pointer-events: none; }
/* ¿cabe? */
.cabe { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin: 10px 0; }
.cabe svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.cabe.ok { background: var(--ok-bg); color: #1d5d40; } .cabe.bad { background: var(--bad-bg); color: #7a1f18; }
.open-slider.sun { flex-direction: column; gap: 0; padding: 0 6px; } .open-slider.sun input { width: 90px; } .open-slider.sun small { font-size: 9.5px; color: var(--grey); line-height: 1; }
.tool.dim { opacity: .45; }
.plan-view .plan-stage { background: var(--bg); border-radius: 10px; padding: 10px; display: grid; place-items: center; }
.plan-view .plan-stage svg { width: 100%; height: auto; max-height: 60vh; }
.obra-grid { grid-template-columns: 1fr 1fr 1fr; }
#tblFicha td:first-child { width: 36%; }
.swatch i { background-size: cover; }
@media (max-width: 1500px) { .open-slider.sun small { display: none; } }
@media (max-width: 1280px) { .btn#btnProyecto, .btn#btnOrder { display: none; } }

/* v7 (8-oct) · móvil */
/* Escritorio (a): entre 1281 y 1400 px el título y el subtítulo de la marca (.brand-txt) se montaban sobre los
   iconos del menú (Guardadas / Profesional / Fabricante). La marca puede encoger (con puntos suspensivos), el menú
   y los bloques de la derecha no, y el subtítulo solo se enseña a partir de 1401 px. */
.brand { flex: 0 1 auto; }
.brand-txt { min-width: 0; overflow: hidden; }
.brand-txt b, .brand-txt span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menus, .topbar-mid, .topbar-right { flex: 0 0 auto; }
@media (max-width: 1400px) { .brand-txt span { display: none; } }
/* Logo de cabecera sin subtítulo (assets/logo-demo-cabecera.svg): a 36 px se lee el título. El logo completo
   (logo-demo.svg) sigue en los PDF, en embed.html y en ar.html. */
.logo { height: 36px; }
/* Escritorio (b): entre 1024 y 1280 px la ayuda («Arrastra para girar…») quedaba debajo de la insignia
   «Desarrollado por Grup3D» y se cortaba: ancho máximo que deja libre la insignia (a dos líneas si hace falta).
   Por debajo de 1180 px la píldora de estado tampoco se monta con las pestañas de vista. */
@media (max-width: 1280px) { .hint { max-width: calc(100% - 420px); text-align: center; border-radius: 12px; line-height: 1.35; } }
@media (max-width: 1180px) {
  .credit span { display: none; }
  .hint { max-width: calc(100% - 270px); }
  .top-left { max-width: calc(100% - 383px); }
  .chip-info { border-radius: 14px; }
}
/* Móvil y tableta (≤ 900 px): pestañas de vista de 36 px de alto (con desplazamiento lateral si no caben),
   píldora de estado debajo de ellas y en una sola línea, barra de herramientas con botones de 36 px y por encima
   de la insignia de Grup3D (que queda libre abajo a la derecha), precio visible en la cabecera junto al logo y al
   botón de menú, campos de 16 px (el iPhone no hace zoom) y ventanas a una columna. */
@media (max-width: 900px) {
  .top-right { max-width: calc(100% - 32px); }
  .seg.views { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg.views::-webkit-scrollbar { display: none; }
  .seg.views button { min-height: 36px; padding: 6px 10px; white-space: nowrap; }
  .top-left { display: flex; top: 66px; left: 16px; right: 16px; max-width: none; }
  .chip-info { align-self: flex-start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; }
  .overlay.bottom { bottom: 50px; }
  .tool { min-height: 36px; min-width: 40px; padding: 6px 8px; }
  .open-slider { min-height: 36px; }
  .toolbar .sep { height: 24px; }
  .chip-step { min-height: 32px; padding: 5px 10px 5px 5px; }
  .chip-step i { width: 20px; height: 20px; }
  .mode-btn { min-height: 32px; }
  .chip { min-height: 32px; padding: 7px 12px; }
  .seg.wrap button { min-height: 32px; padding: 6px 12px; }
  .price-box { display: flex; }
  .price-box b { font-size: 17px; }
  .modal input:not([type=checkbox]):not([type=radio]):not([type=range]), .modal select, .modal textarea, .panel input[type=text], .panel input[type=number], .panel select, .install #instCp, .approve-bar input { font-size: 16px; }
  .cad-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .cad-body aside { border-left: 0; border-top: 1px solid var(--line); max-height: 38%; }
  .order-row, .order-row.lead { grid-template-columns: 1fr 1fr; }
  .tariffs .form-grid { grid-template-columns: 1fr 1fr; }
  .obra-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) { #overlayIssues { display: none; } }   /* los avisos siguen en el paso «Resumen» del panel */
@media (max-width: 600px) {
  .modal-bg { padding: 10px; }
  .modal { max-height: 96vh; }
  .modal header, .modal-body, .modal footer { padding-left: 14px; padding-right: 14px; }
  .form-grid, .tariffs .form-grid { grid-template-columns: 1fr; }
  .order-summary { grid-template-columns: 1fr 1fr; }
}
/* Piscinas: etiqueta única de la parcela («Parcela … · cabe con … a lindes»), ahora junto a la casa (src/scene/site.js);
   en móvil se parte en varias líneas para que no se corte por los lados. */
.dim-label.ok { border-color: var(--teal); }
.dim-label.bad { border-color: var(--bad); color: #7a1f18; }
@media (max-width: 900px) { .dim-label.ok, .dim-label.bad { white-space: normal; max-width: min(62vw, 260px); text-align: center; line-height: 1.3; } }
@media (max-width: 600px) { .dim-label.ok, .dim-label.bad { max-width: 150px; } }