/* =========================================================
   CONFIGURADOR — Groundless CAD (SCOPED)
   Dominio: SOLO configurador.html
   ========================================================= */

/* CAD vars (scoped) */
body[data-page="configurador"] .wrap{
  --cad-bg: #080a08;
  --cad-grid-major: rgba(147,168,95,.15);
  --cad-grid-minor: rgba(147,168,95,.05);

  --cad-line-bright: var(--gl-sand);
  --cad-line-dim: rgba(232,221,204,.50);
  --cad-accent: var(--gl-sage);

  --cad-pot-fill: rgba(6,16,4,.80);
  --cad-pot-stroke: rgba(232,221,204,.80);
}

/* ---------- Layout General ---------- */
body[data-page="configurador"] .wrap{
  min-height: 100vh;
  background: var(--gl-bg);
  color: var(--gl-sand);
  font-family: system-ui, -apple-system, sans-serif;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  padding: 18px;
  box-sizing: border-box;
}

/* ---------- Panel de Control ---------- */
body[data-page="configurador"] .panel{
  border-radius: var(--gl-radius);
  border: 1px solid var(--gl-border);
  background: linear-gradient(135deg, var(--gl-card), var(--gl-card2));
  box-shadow: var(--gl-shadow);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}

body[data-page="configurador"] .panel .title{
  padding: 20px;
  border-bottom: 1px solid var(--gl-border2);
}

body[data-page="configurador"] .panel h1{
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--gl-sand);
  letter-spacing: 0.5px;
}

body[data-page="configurador"] .panel .tag{
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gl-sage);
  border: 1px solid var(--gl-border);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 6px;
}

body[data-page="configurador"] .card{
  padding: 20px;
  border-bottom: 1px solid var(--gl-border2);
}

body[data-page="configurador"] .card h2{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gl-sage);
  margin: 0 0 16px 0;
  font-weight: 700;
}

/* Inputs & Controls */
body[data-page="configurador"] .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

body[data-page="configurador"] .wrap label{
  display: block;
  font-size: 12px;
  color: rgba(232,221,204,.70);
  margin-bottom: 6px;
  font-weight: 500;
}

body[data-page="configurador"] .wrap input,
body[data-page="configurador"] .wrap select{
  width: 100%;
  background: rgba(0,0,0,.30);
  border: 1px solid var(--gl-border);
  color: var(--gl-sand);
  padding: 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

body[data-page="configurador"] .wrap input:focus,
body[data-page="configurador"] .wrap select:focus{
  outline: none;
  border-color: var(--gl-sage);
  background: rgba(0,0,0,.50);
}

body[data-page="configurador"] .tog{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

body[data-page="configurador"] .tog input{
  width: auto;
  margin: 0;
}

body[data-page="configurador"] .note{
  font-size: 11px;
  color: rgba(232,221,204,.50);
  margin-top: 8px;
  line-height: 1.4;
}

/* Output Area */
body[data-page="configurador"] .out{
  background: rgba(0,0,0,.40);
  border: 1px dashed var(--gl-border);
  padding: 12px;
  border-radius: 8px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gl-sand);
}

body[data-page="configurador"] .btns{
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

body[data-page="configurador"] .wrap button{
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

body[data-page="configurador"] button.primary{
  background: var(--gl-sage);
  color: var(--gl-bg);
  border: none;
}
body[data-page="configurador"] button.primary:hover{
  background: #a3b86f;
}

body[data-page="configurador"] button.ghost{
  background: transparent;
  border: 1px solid var(--gl-border);
  color: var(--gl-sand);
}
body[data-page="configurador"] button.ghost:hover{
  border-color: var(--gl-sage);
  color: var(--gl-sage);
}

/* ---------- Canvas Area (The Blueprint) ---------- */
body[data-page="configurador"] .canvas{
  background: var(--cad-bg);
  border-radius: var(--gl-radius);
  border: 1px solid var(--gl-border);
  box-shadow: inset 0 0 100px rgba(0,0,0,.80);
  position: relative;
  overflow: hidden;

  background-image:
    linear-gradient(var(--cad-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--cad-grid-minor) 1px, transparent 1px),
    linear-gradient(var(--cad-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--cad-grid-major) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: center center;
}

body[data-page="configurador"] .wrap svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================================================
   Fertilizantes + Luminarias (aislado)
   ========================================================= */
body[data-page="configurador"] #fert-card .fert-sub,
body[data-page="configurador"] #lights-card .fert-sub{
  font-size: 12px;
  line-height: 1.45;
  opacity: .9;
  margin: 6px 0 10px;
}

body[data-page="configurador"] #fert-card .fert-out,
body[data-page="configurador"] #lights-card .fert-out{
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  line-height: 1.45;
  min-height: 0;
}

body[data-page="configurador"] #fert-card .fert-grid,
body[data-page="configurador"] #lights-card .fert-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

body[data-page="configurador"] #fert-card .fert-box,
body[data-page="configurador"] #lights-card .fert-box{
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

body[data-page="configurador"] #fert-card .fert-k,
body[data-page="configurador"] #lights-card .fert-k{
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 6px;
}

body[data-page="configurador"] #fert-card .fert-note,
body[data-page="configurador"] #lights-card .fert-note{
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  opacity: .85;
}

body[data-page="configurador"] #fert-card .fert-muted,
body[data-page="configurador"] #lights-card .fert-muted{
  opacity: .85;
}
  /* ===== Luminarias overlay (aislado) ===== */
body[data-page="configurador"] .cad-lightcover{
  fill: rgba(255, 214, 102, 0.16);
  stroke: rgba(255, 214, 102, 0.36);
  stroke-width: 1.5;
}
body[data-page="configurador"] .cad-lightbox{
  fill: rgba(255, 214, 102, 0.06);
  stroke: rgba(255, 214, 102, 0.55);
  stroke-width: 2;
}
body[data-page="configurador"] .cad-lighttext{
  font-size: 12px;
  font-weight: 800;
  fill: rgba(255, 230, 140, 0.92);
  letter-spacing: .02em;
}
body[data-page="configurador"] .cad-lightfixture{
  fill: rgba(255, 214, 102, 0.08);
  stroke: rgba(255, 214, 102, 0.85);
  stroke-width: 2;
}
	body[data-page="configurador"] .cad-lightheat{
  fill: rgba(255, 214, 102, 0.0); /* se setea por JS */
  stroke: rgba(255, 214, 102, 0.0);
}
/* =========================================================
   CAD — SVG elements
   ========================================================= */

/* Pipes */
body[data-page="configurador"] .cad-pipe{
  stroke: var(--cad-line-bright);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}

body[data-page="configurador"] .cad-hose{
  stroke: rgba(147,168,95,.85);
  stroke-linecap: round;
  stroke-dasharray: 10 8;
  fill: none;
  opacity: .85;
}

/* Units */
body[data-page="configurador"] .cad-pot{
  fill: var(--cad-pot-fill);
  stroke: var(--cad-pot-stroke);
  stroke-width: 1.5px;
}

body[data-page="configurador"] .cad-netpot{
  fill: var(--cad-accent);
  stroke: none;
  opacity: .9;
}

body[data-page="configurador"] .cad-canopy{
  fill: rgba(147,168,95,.15);
  stroke: none;
  pointer-events: none;
}

body[data-page="configurador"] .cad-res{
  fill: rgba(147,168,95,.10);
  stroke: var(--cad-accent);
  stroke-width: 2px;
  stroke-dasharray: 8 4;
}

/* Dimensions */
body[data-page="configurador"] .cad-dim-line{
  stroke: var(--cad-line-dim);
  stroke-width: 1.4px;
}

body[data-page="configurador"] .cad-dim-detail{
  stroke: var(--cad-accent);
  stroke-width: 1.2px;
  stroke-dasharray: 2 2;
  opacity: .7;
}

body[data-page="configurador"] .cad-dim-text{
  fill: var(--cad-accent);
  font-family: "Courier New", monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2px;
}

body[data-page="configurador"] .cad-dim-text-small{
  fill: var(--cad-accent);
  font-family: "Courier New", monospace;
  font-size: 12px;
  opacity: .8;
  letter-spacing: .15px;
}

/* Twisted pump */
body[data-page="configurador"] .cad-pump{
  fill: rgba(232,221,204,.10);
  stroke: rgba(232,221,204,.55);
  stroke-width: 1.2;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

body[data-page="configurador"] .cad-pump-cap{
  fill: rgba(232,221,204,.06);
  stroke: rgba(232,221,204,.35);
  stroke-width: 1;
}

body[data-page="configurador"] .cad-pump-sight{
  fill: rgba(0,0,0,.35);
  stroke: rgba(147,168,95,.75);
  stroke-width: 1.2;
}

body[data-page="configurador"] .cad-pump-text{
  font-size: 12px;
  letter-spacing: .12em;
  fill: rgba(232,221,204,.80);
  font-weight: 750;
}

body[data-page="configurador"] .cad-inj{
  fill: rgba(147,168,95,.25);
  stroke: rgba(147,168,95,.85);
  stroke-width: 1.4;
}
/* =========================================================
   CONFIGURADOR — Theme bridge (DARK/LIGHT)
   Scope: body[data-page="configurador"]
   Objetivo: contraste real en light sin romper dark
   Pegar al FINAL de configurador.css
   ========================================================= */

body[data-page="configurador"] .wrap{
  /* Base (dark) */
  --cfg-bg: var(--gl-bg);
  --cfg-ink: var(--gl-fg);
  --cfg-muted: var(--gl-fg-dim);
  --cfg-soft: var(--gl-fg-soft);

  --cfg-surface: var(--gl-surface-2);
  --cfg-surface-2: var(--gl-surface-1);
  --cfg-border: var(--gl-border-2);
  --cfg-border-2: var(--gl-border-1);

  --cfg-accent: var(--gl-accent-strong);
  --cfg-accent-2: var(--gl-accent);

  /* Fields (dark) */
  --cfg-field-bg: rgba(0,0,0,.28);
  --cfg-field-bg-focus: rgba(0,0,0,.40);
  --cfg-field-border: rgba(147,168,95,.22);

  /* Tag / chips */
  --cfg-chip-bg: rgba(6,16,4,.14);

  /* Canvas */
  --cad-bg: #080a08;
  --cad-grid-major: rgba(147,168,95,.15);
  --cad-grid-minor: rgba(147,168,95,.05);
  --cad-line-bright: rgba(232,221,204,.92);
  --cad-line-dim: rgba(232,221,204,.50);
  --cad-accent: rgba(147,168,95,.92);
  --cad-pot-fill: rgba(6,16,4,.80);
  --cad-pot-stroke: rgba(232,221,204,.80);
}

/* LIGHT overrides */
html[data-theme="light"] body[data-page="configurador"] .wrap{
  /* Fondo y texto */
  --cfg-bg: var(--gl-bg);                 /* tu token light ya es claro */
  --cfg-ink: rgba(10,18,10,.92);          /* tinta real */
  --cfg-muted: rgba(10,18,10,.72);
  --cfg-soft: rgba(10,18,10,.60);

  /* Superficies y bordes */
  --cfg-surface: rgba(255,255,255,.82);
  --cfg-surface-2: rgba(255,255,255,.66);
  --cfg-border: rgba(10,18,10,.12);
  --cfg-border-2: rgba(10,18,10,.08);

  /* Acentos */
  --cfg-accent: rgba(48,86,1,.92);        /* verde legible */
  --cfg-accent-2: rgba(48,86,1,.82);

  /* Fields (light) */
  --cfg-field-bg: rgba(10,18,10,.08);
  --cfg-field-bg-focus: rgba(10,18,10,.12);
  --cfg-field-border: rgba(10,18,10,.14);

  --cfg-chip-bg: rgba(10,18,10,.06);

  /* Canvas (light): sigue “CAD oscuro” por legibilidad técnica */
  --cad-bg: #070b07;
  --cad-grid-major: rgba(48,86,1,.18);
  --cad-grid-minor: rgba(48,86,1,.08);
  --cad-line-bright: rgba(232,221,204,.92);
  --cad-line-dim: rgba(232,221,204,.50);
  --cad-accent: rgba(147,168,95,.92);
}

/* ---------- Aplicación (reemplaza hardcodes lavados) ---------- */
body[data-page="configurador"] .wrap{
  background: var(--cfg-bg);
  color: var(--cfg-ink);
}

body[data-page="configurador"] .panel{
  border: 1px solid var(--cfg-border);
  background: linear-gradient(135deg, var(--cfg-surface), var(--cfg-surface-2));
  box-shadow: var(--gl-shadow-1);
}

body[data-page="configurador"] .panel .title{
  border-bottom: 1px solid var(--cfg-border-2);
}

body[data-page="configurador"] .panel h1{
  color: var(--cfg-ink);
}

body[data-page="configurador"] .panel .tag{
  color: var(--cfg-accent);
  border: 1px solid var(--cfg-border);
  background: var(--cfg-chip-bg);
}

body[data-page="configurador"] .card{
  border-bottom: 1px solid var(--cfg-border-2);
}

body[data-page="configurador"] .card h2{
  color: var(--cfg-accent);
}

body[data-page="configurador"] .wrap label{
  color: var(--cfg-muted);
}

body[data-page="configurador"] .wrap input,
body[data-page="configurador"] .wrap select{
  background: var(--cfg-field-bg);
  border: 1px solid var(--cfg-field-border);
  color: var(--cfg-ink);
}

body[data-page="configurador"] .wrap input:focus,
body[data-page="configurador"] .wrap select:focus{
  border-color: var(--cfg-accent);
  background: var(--cfg-field-bg-focus);
}

body[data-page="configurador"] .note{
  color: var(--cfg-soft);
}

body[data-page="configurador"] .out{
  background: linear-gradient(180deg, var(--cfg-field-bg), rgba(0,0,0,0));
  border: 1px dashed var(--cfg-border);
  color: var(--cfg-ink);
}

/* Botones */
body[data-page="configurador"] button.primary{
  background: var(--cfg-accent);
  color: rgba(255,255,255,.96);
}
html[data-theme="light"] body[data-page="configurador"] button.primary{
  color: rgba(255,255,255,.96);
}

body[data-page="configurador"] button.ghost{
  border: 1px solid var(--cfg-border);
  color: var(--cfg-ink);
}
body[data-page="configurador"] button.ghost:hover{
  border-color: var(--cfg-accent);
  color: var(--cfg-accent);
}

/* Canvas: aseguramos que el fondo use las vars que tocamos */
body[data-page="configurador"] .canvas{
  background: var(--cad-bg);
}