/* ===========================================================================
   Light Construction Designer — 2D floor-plan builder for warehouses,
   factories, shopping malls, etc.
   Namespaced with .lcd to avoid clashing with the page.
   Relies on the brand CSS variables defined in construccion-liviana.html :root.
   =========================================================================== */

/* Full-bleed: the designer breaks out of the 900px page column and uses the
   whole viewport width. */
#lcd-designer {
  display: block;
  width: 100vw;
  margin-top: var(--header-height);
  margin-left: calc(50% - 50vw);
  padding: 0 24px;
  box-sizing: border-box;
}
@media (max-width: 600px) { #lcd-designer { padding: 0 10px; } }

.lcd {
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  background: var(--color-white);
  margin: 0 0 15px;
  overflow: hidden;
}

.lcd-head {
  position: relative;
  background: var(--color-primary);
  color: #fff;
  padding: 16px 20px;
}
/* Specificity bumped (.lcd .lcd-head) so the page's inline .page-content h2/p
   rules don't override the white-on-navy header colors. */
.lcd .lcd-head h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin: 0 0 4px;
  color: #fff;
}
.lcd .lcd-head p {
  font-size: .85rem;
  margin: 0;
  color: #dce3ef;
  line-height: 1.5;
}
.lcd-head .lcd-beta {
  display: inline-block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--color-accent);
  color: var(--color-primary);
  padding: 2px 7px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 8px;
}

/* ---- Layout: stage (canvas) + side panel ------------------------------- */
.lcd-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
}
@media (max-width: 860px) {
  .lcd-body { grid-template-columns: 1fr; }
}

.lcd-stage {
  position: relative;
  background: #f4f6f9;
  height: 68vh;
  min-height: 380px;
  border-right: 1px solid #e2e2e2;
}
@media (max-width: 860px) {
  .lcd-stage { height: 62vh; border-right: none; border-bottom: 1px solid #e2e2e2; }
}
.lcd-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.lcd-canvas.lcd-pan { cursor: grab; }
.lcd-canvas.lcd-panning { cursor: grabbing; }

/* ---- Floating toolbar -------------------------------------------------- */
.lcd-toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(255,255,255,.95);
  border: 1px solid #d4d9e2;
  border-radius: 6px;
  padding: 4px 5px;
  max-width: calc(100% - 20px);
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.lcd-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  min-width: 48px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 600;
  color: var(--color-gray-600);
  transition: background .15s, color .15s, border-color .15s;
}
.lcd-tool svg { width: 20px; height: 20px; }
.lcd-tool:hover { background: #eef2f9; color: var(--color-primary); }
.lcd-tool.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.lcd-tool.active svg { stroke: #fff; }
/* Estruct icon = the Two_Winged_Classic_Structure PNG applied as a MASK filled with
   currentColor, so it recolors exactly like the stroke icons (gray / hover blue / active white). */
.lcd-ico-estruct {
  width: 20px; height: 20px; flex: none; background: currentColor;
  --estruct-icon: url("data:image/png;base64,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");
  -webkit-mask: var(--estruct-icon) center / contain no-repeat;
  mask: var(--estruct-icon) center / contain no-repeat;
}
.lcd-tool.erase { color: var(--color-red); }
.lcd-tool.erase.active { color: #fff; }

.lcd-tool-sep { width: 1px; background: #d4d9e2; margin: 3px 2px; align-self: stretch; }

/* ---- Zoom controls ----------------------------------------------------- */
.lcd-zoombar {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 4;
}
.lcd-zoombar button {
  background: rgba(255,255,255,.92);
  border: 1px solid #d4d9e2;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  padding: 4px 10px;
  cursor: pointer;
  transition: background .15s;
}
.lcd-zoombar button:hover { background: #eef2f9; }

/* ---- Floor-level stack (Sims-style building planes) ------------------- */
.lcd-floor-stack {
  position: absolute; top: 50%; right: 14px; z-index: 4;
  transform: translateY(-50%);
  pointer-events: auto;
}
.lcd-floor-stack-inner {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(255,255,255,.88); border: 1px solid #d4d9e2;
  border-radius: 6px; padding: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.lcd-floor-slot {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  min-width: 158px; padding: 5px 8px; border-radius: 4px;
  background: rgba(0,70,180,.08); border: 1.5px solid rgba(0,70,180,.18);
  cursor: pointer; transition: background .15s, border-color .15s;
  font-family: var(--font-body); font-size: .72rem;
}
.lcd-floor-slot:hover { background: rgba(0,70,180,.16); border-color: rgba(0,70,180,.35); }
.lcd-floor-slot.active {
  background: rgba(0,70,180,.22); border-color: rgba(0,70,180,.55);
  box-shadow: 0 0 0 1px rgba(0,70,180,.3);
}
.lcd-floor-row1 { display: flex; align-items: center; gap: 6px; }
.lcd-floor-row2 { display: flex; align-items: center; gap: 5px; }
.lcd-floor-label { font-weight: 700; color: #002060; }
.lcd-floor-roof {
  font-size: .58rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: #2a8246; background: rgba(56,180,90,.16); padding: 1px 6px; border-radius: 9px; white-space: nowrap;
}
.lcd-floor-row2 label { font-size: .66rem; font-weight: 600; color: var(--color-gray-600); }
.lcd-floor-h {
  width: 50px; padding: 2px 4px; border: 1px solid #cdd4de; border-radius: 4px;
  background: #fff; font-family: var(--font-body); font-size: .68rem; color: #002060; cursor: text;
}
.lcd-floor-h:focus { outline: none; border-color: rgba(0,70,180,.6); box-shadow: 0 0 0 2px rgba(0,70,180,.15); }
.lcd-floor-unit { font-size: .64rem; color: var(--color-gray-600); }
.lcd-floor-base { margin-left: auto; font-size: .64rem; font-weight: 600; color: #0f7d8a; white-space: nowrap; }
.lcd-floor-del {
  margin-left: auto; width: 16px; height: 16px; padding: 0; flex: none;
  border: none; border-radius: 3px; background: transparent;
  color: var(--color-gray-300); font-size: .85rem; font-weight: 700; line-height: 1;
  cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; justify-content: center;
}
.lcd-floor-roof + .lcd-floor-del { margin-left: 0; }
.lcd-floor-del:hover { background: rgba(237,28,36,.15); color: var(--color-red); }
.lcd-floor-add {
  display: block; width: 100%; padding: 4px 0; margin-bottom: 3px; border: 1px dashed rgba(0,70,180,.3);
  border-radius: 3px; background: rgba(0,70,180,.04); color: rgba(0,70,180,.7);
  font-family: var(--font-body); font-size: .7rem; font-weight: 700; cursor: pointer; transition: all .15s;
}
.lcd-floor-add:hover { background: rgba(0,70,180,.14); color: #002060; border-color: rgba(0,70,180,.5); }
.lcd-floor-add:disabled { opacity: .3; cursor: default; }

/* ---- Hint bar ---------------------------------------------------------- */
.lcd-hint {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 120px;
  font-size: .72rem;
  color: #fff;
  background: rgba(0,32,96,.88);
  border-radius: 4px;
  padding: 5px 10px;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- Side panel -------------------------------------------------------- */
.lcd-panel {
  padding: 14px 16px 16px;
  overflow-y: auto;
  max-height: 68vh;
  background: #fafbfc;
  font-size: .82rem;
  color: var(--color-gray-600);
  position: relative;
}
@media (max-width: 860px) { .lcd-panel { max-height: none; } }
.lcd-panel h3 {
  font-family: var(--font-heading);
  font-size: .92rem;
  color: var(--color-primary);
  margin: 0 0 6px;
  font-weight: 700;
}
.lcd-panel p.lcd-help {
  font-size: .72rem;
  color: var(--color-gray-300);
  line-height: 1.5;
  margin: 4px 0 8px;
}
.lcd-group { margin-bottom: 14px; }
.lcd-field { margin-bottom: 8px; }
.lcd-field label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-gray-600);
  margin-bottom: 3px;
}
.lcd-field input, .lcd-field select {
  width: 100%;
  padding: 7px 8px;
  font-size: .85rem;
  font-family: var(--font-body);
  border: 1px solid #c4c4c4;
  border-radius: 4px;
  background: #fff;
  color: var(--color-dark);
}
.lcd-field input:focus, .lcd-field select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}
.lcd-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---- BOM table --------------------------------------------------------- */
.lcd-bom { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.lcd-bom th {
  border-bottom: 2px solid var(--color-primary);
  padding: 5px 6px;
  font-size: .7rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lcd-bom th.num { text-align: right; width: 64px; }
.lcd-bom td { padding: 6px; border-bottom: 1px solid #eee; font-size: .76rem; vertical-align: top; }
.lcd-bom td.num { text-align: right; white-space: nowrap; font-weight: 600; }
.lcd-item-name { font-weight: 700; color: var(--color-dark); }
.lcd-item-sub { font-size: .68rem; color: var(--color-gray-300); margin-top: 1px; }
.lcd-bom tr.lcd-empty td { text-align: center; color: var(--color-gray-300); font-style: italic; padding: 16px 6px; }
.lcd-quote { color: var(--color-accent); font-weight: 700; font-style: italic; }
.lcd-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 6px;
  background: var(--color-off-white);
  border-radius: 4px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.lcd-total span:last-child { font-size: 1.1rem; color: var(--color-accent); }
.lcd-total-note {
  font-size: .66rem;
  color: var(--color-gray-300);
  margin: 0 0 12px;
  line-height: 1.4;
}

/* ---- Actions ----------------------------------------------------------- */
.lcd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lcd-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  padding: 9px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s;
}
.lcd-btn-primary { background: var(--color-accent); color: #fff; }
.lcd-btn-primary:hover { background: var(--color-accent-hover); }
.lcd-btn-ghost { background: none; border: 1px solid var(--color-gray-300); color: var(--color-gray-600); }
.lcd-btn-ghost:hover { border-color: var(--color-red); color: var(--color-red); }
.lcd-btn:disabled { opacity: .6; cursor: default; }
.lcd-added { font-size: .74rem; font-weight: 600; margin-top: 4px; width: 100%; }

/* (?) help button in dark header */
.lcd-help-btn {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55); background: transparent; color: #fff;
  font-weight: 700; font-size: .85rem; line-height: 1; cursor: pointer;
}
.lcd-help-btn:hover { background: rgba(255,255,255,.15); }
.lcd-help-pop {
  position: absolute; top: 46px; right: 14px; z-index: 6; width: 290px;
  background: #fff; border: 1px solid #d4d9e2; border-radius: 6px;
  box-shadow: 0 8px 26px rgba(0,16,48,.22); padding: 12px 14px; display: none;
  font-size: .73rem; color: #3a3f47 !important; line-height: 1.5;
}
.lcd-help-pop.show { display: block; }
.lcd-help-pop p { margin: 0 0 8px; color: #3a3f47 !important; }
.lcd-help-pop p:last-child { margin: 0; }
.lcd-help-pop b { color: var(--color-primary); }

/* ---- Selzone panel ----------------------------------------------------- */
.lcd-selzone { display: none; }
.lcd-selinfo { font-size: .74rem; line-height: 1.5; }
.lcd-selinfo b { color: var(--color-primary); }

/* Estruct Pro upsell (Free tier sees this instead of profile selection/amounts) */
.lcd-struct-locked {
  margin-top: 8px; padding: 12px 14px; border-radius: 5px;
  background: #fdf6e8; border: 1px solid #f0ddaa; text-align: center;
}
.lcd-struct-locked p { font-size: .82rem; color: #7a5c17; line-height: 1.4; margin-bottom: 8px; }
.lcd-struct-locked .lcd-btn { width: 100%; }

/* ---- Modal ------------------------------------------------------------- */
.lcd-modal-ov {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9998;
}
.lcd-modal {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.lcd-modal h4 { font-family: var(--font-heading); font-size: 1rem; color: var(--color-primary); margin: 0 0 8px; }
.lcd-modal p { font-size: .82rem; color: var(--color-gray-600); margin-bottom: 16px; line-height: 1.5; }
.lcd-modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.lcd-modal-actions .lcd-btn { font-size: .78rem; padding: 7px 14px; }

/* ---- Context menu (right-click) --------------------------------------- */
.lcd-ctx-menu {
  position: fixed; z-index: 10000;
  background: #fff; border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  min-width: 180px; padding: 6px 0;
  font-family: var(--font-body); font-size: 0.82rem;
}
.lcd-ctx-item {
  padding: 8px 16px; cursor: pointer; color: var(--color-dark);
  transition: background 0.12s; white-space: nowrap;
}
.lcd-ctx-item:hover { background: var(--color-primary); color: #fff; }
.lcd-ctx-sep {
  height: 1px; background: rgba(0,0,0,.08); margin: 4px 0;
}
.lcd-3d-ctx { z-index: 10001; }

/* ---- 3D preview button (top-right of the stage) ------------------------ */
.lcd-3d-btn {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  background: var(--color-primary); color: #fff; border: none; border-radius: 6px;
  padding: 7px 11px; font-family: var(--font-body); font-weight: 800; font-size: .78rem;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.lcd-3d-btn:hover { background: var(--color-accent); color: var(--color-primary); }
.lcd-3d-btn svg { width: 18px; height: 18px; }

/* ---- 3D preview floating window ---------------------------------------- */
.lcd-3d-ov {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0,16,48,.5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lcd-3d-win {
  position: relative;
  width: min(1040px, 94vw); height: min(740px, 90vh);
  background: #fff; border-radius: 10px; box-shadow: 0 22px 64px rgba(0,0,0,.4);
  display: flex; flex-direction: column; overflow: hidden;
}
.lcd-3d-head { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--color-primary); color: #fff; }
.lcd-3d-title { font-family: var(--font-heading); font-weight: 700; font-size: .95rem; flex: 1; }
.lcd-3d-title small { font-weight: 400; opacity: .82; font-size: .76rem; }
.lcd-3d-tools { display: flex; align-items: center; gap: 10px; font-size: .8rem; }
.lcd-3d-tools label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.lcd-3d-tools button { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 4px; padding: 4px 9px; font-size: .76rem; font-weight: 700; cursor: pointer; }
.lcd-3d-tools button:hover { background: rgba(255,255,255,.15); }
.lcd-3d-close { padding: 3px 9px !important; font-size: .9rem; }
.lcd-3d-canvas { flex: 1; width: 100%; display: block; background: #eef2f6; cursor: grab; touch-action: none; }
.lcd-3d-canvas:active { cursor: grabbing; }
.lcd-3d-hint { padding: 6px 14px; font-size: .72rem; color: var(--color-gray-600); background: #f4f6f9; border-top: 1px solid #e2e6ec; }

/* ---- 3D navigation cube (CAD-style) ---------------------------------- */
.lcd-3d-nav {
  position: absolute; bottom: 42px; right: 14px; z-index: 10;
  width: 254px; height: 254px; overflow: visible;
}
.lcd-3d-nav-canvas {
  width: 254px; height: 254px; display: block;
  cursor: pointer; touch-action: none;
}
/* Fullscreen toggle (bottom-right corner of the 3D view) */
.lcd-3d-fs {
  position: absolute; bottom: 6px; right: 12px; z-index: 11;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #d4d9e2; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,16,48,.22); color: var(--color-primary, #002060); cursor: pointer;
}
.lcd-3d-fs:hover { background: #eef2f9; }
.lcd-3d-fs svg { width: 18px; height: 18px; }
.lcd-3d-win:fullscreen, .lcd-3d-win:-webkit-full-screen { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; }

/* Borrar tool hover-dropdown with "Borrar Todo" slide switch */
.lcd-erase-wrap { position: relative; display: inline-flex; align-items: center; }
.lcd-erase-drop { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #d4d9e2; border-radius: 6px; padding: 9px 12px; white-space: nowrap; z-index: 30; box-shadow: 0 6px 18px rgba(0,16,48,.20); font-size: .76rem; font-family: inherit; text-align: center; }
.lcd-erase-wrap:hover .lcd-erase-drop, .lcd-erase-drop:hover { display: block; }
.lcd-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: #c0392b; font-weight: 700; user-select: none; }
.lcd-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lcd-switch-track { position: relative; width: 36px; height: 19px; border-radius: 19px; background: #cdd3dc; transition: background .18s ease; flex: none; cursor: ew-resize; touch-action: none; }
.lcd-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transform: translateX(var(--knob, 0px)); transition: transform .18s ease; }
.lcd-switch-track.lcd-dragging::after { transition: none; }
.lcd-switch-track.lcd-armed { background: #c0392b; }
.lcd-switch-hint { display: block; margin-top: 5px; font-size: .64rem; color: #6b7785; font-weight: 400; }


/* Cubierta tool hover-dropdown (alas / wings selector) */
.lcd-cubierta-wrap { position: relative; display: inline-flex; align-items: center; }
.lcd-cubierta-drop { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #d4d9e2; border-radius: 6px; padding: 4px 0; white-space: nowrap; z-index: 30; box-shadow: 0 6px 18px rgba(0,16,48,.20); font-size: .76rem; font-family: inherit; }
.lcd-cubierta-wrap:hover .lcd-cubierta-drop, .lcd-cubierta-drop:hover { display: block; }
.lcd-cubierta-opt { display: block; width: 100%; padding: 7px 18px; border: none; background: none; cursor: pointer; text-align: left; color: var(--color-gray-600,#606060); font-family: inherit; font-size: .76rem; font-weight: 600; transition: background .12s, color .12s; }
.lcd-cubierta-opt:hover { background: #eef1f6; color: var(--color-primary,#002060); }
.lcd-cubierta-opt.active { color: var(--color-primary,#002060); background: #e8ecf5; }
.lcd-cubierta-badge { display: inline-block; font-size: .58rem; font-weight: 800; background: var(--color-primary,#002060); color: #fff; border-radius: 3px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; line-height: 1.4; }
/* Remate (finishing profiles) dropdown — two columns (Muros | Cubierta) + actions */
.lcd-remate-wrap { position: relative; display: inline-flex; align-items: center; }
.lcd-remate-drop { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #d4d9e2; border-radius: 6px; padding: 8px; z-index: 30; box-shadow: 0 6px 18px rgba(0,16,48,.20); font-family: inherit; }
.lcd-remate-wrap:hover .lcd-remate-drop, .lcd-remate-drop:hover { display: block; }
.lcd-remate-cols { display: flex; gap: 10px; }
.lcd-remate-col { min-width: 188px; }
.lcd-remate-h { font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary,#002060); padding: 2px 8px 5px; border-bottom: 1px solid #e6e9f0; margin-bottom: 3px; }
.lcd-remate-opt { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 8px; border: none; background: none; cursor: pointer; text-align: left; color: var(--color-gray-600,#606060); font-family: inherit; font-size: .74rem; font-weight: 600; border-radius: 4px; transition: background .12s, color .12s; white-space: nowrap; }
.lcd-remate-opt:hover { background: #eef1f6; color: var(--color-primary,#002060); }
.lcd-remate-opt.active { color: var(--color-primary,#002060); background: #e8ecf5; }
.lcd-remate-sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.lcd-remate-actions { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #e6e9f0; }
.lcd-remate-act { width: 100%; padding: 7px 8px; border: none; border-radius: 4px; background: #eef4ff; color: var(--color-primary,#002060); font-family: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; transition: background .12s; }
.lcd-remate-act:hover { background: #dbe7ff; }
.lcd-remate-clear { background: #f6eef0; color: #a23b3b; }
.lcd-remate-clear:hover { background: #f2dfe2; }
/* Ambient-temperature widget in the toolbar (next to Borrar), colour-coded like ColdBox */
.lcd-temp-widget { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-body, inherit); font-size: .78rem; font-weight: 700; padding: 0 4px; user-select: none; }
.lcd-temp-val { min-width: 3.2em; text-align: right; transition: color .3s; }
.lcd-temp-arrows { display: flex; flex-direction: column; line-height: 0; }
.lcd-temp-arrows button { display: block; width: 16px; height: 12px; padding: 0; border: none; background: transparent; color: var(--color-gray-600, #606060); font-size: 8px; line-height: 1; cursor: pointer; transition: color .15s; }
.lcd-temp-arrows button:hover { color: var(--color-primary, #002060); }
/* Estruct "Fichas" hover dropdown — identical to ColdBox's Carga Fichas menu */
.lcd-estruct-wrap { position: relative; display: inline-flex; align-items: center; }
.lcd-estruct-drop { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #d4d9e2; border-radius: 4px; padding: 7px 10px; white-space: nowrap; z-index: 30; box-shadow: 0 4px 14px rgba(0,16,48,.18); font-size: .76rem; font-family: inherit; }
.lcd-estruct-wrap:hover .lcd-estruct-drop, .lcd-estruct-drop:hover { display: block; }
.lcd-estruct-drop label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--color-dark, #1a1a1a); font-weight: 600; }
.lcd-estruct-drop input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--color-primary, #002060); }

/* ---- Panel take-off (despiece) detail + Optimizar --------------------- */
.lcd-panels-sum { font-size: .8rem; line-height: 1.5; color: var(--color-gray-700, #444); margin-bottom: 8px; }
.lcd-cut { width: 100%; border-collapse: collapse; font-size: .78rem; margin-bottom: 8px; }
.lcd-cut th, .lcd-cut td { padding: 3px 6px; border-bottom: 1px solid #eef0f2; text-align: left; }
.lcd-cut th.num, .lcd-cut td.num { text-align: right; }
.lcd-cut thead th { color: var(--color-gray-600, #666); font-weight: 700; }
.lcd-optbtn { width: 100%; margin-top: 2px; }
.lcd-opt-on { font-size: .8rem; color: #1a6b40; font-weight: 700; margin-top: 4px; }
.lcd-optlink { background: none; border: none; color: var(--color-primary); text-decoration: underline; cursor: pointer; font-size: .74rem; padding: 0; margin-left: 4px; }
.lcd-opt-locked { font-size: .78rem; color: #b07d1a; line-height: 1.5; background: #fdf6e7; border: 1px solid #f0e2bf; border-radius: 6px; padding: 8px 10px; margin-top: 4px; }