/* SolarGPU — tabla de nodos, mercado, calculadora, formularios y pasos.
   Aparte de style.css porque sólo hace falta donde hay datos y formulario.
   Hereda las variables de :root. Cuarta iteración (sep. 2026). */

/* ── conmutador y tabla de nodos ──────────────────────────── */
.switch{display:inline-flex; gap:2px; padding:3px; background:var(--line); border-radius:100px; margin:0 0 1.6rem}
.sw{border:0; background:none; cursor:pointer; padding:.6em 1.35em; min-height:2.75rem; border-radius:100px;
  font:600 .95rem var(--sans); color:var(--mute); transition:background .15s,color .15s}
.sw.on{background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.09)}
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad)}
table{width:100%; border-collapse:collapse; min-width:52rem}
caption{text-align:left}
thead th{font:600 .74rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
  text-align:left; padding:0 1rem .9rem 0; border-bottom:1px solid var(--line-2); white-space:nowrap}
tbody th,tbody td{padding:1.15rem 1rem 1.15rem 0; border-bottom:1px solid var(--line); text-align:left; font-weight:400; vertical-align:middle}
tbody th{font-family:var(--serif); font-weight:700; font-size:1.3rem; color:var(--green); white-space:nowrap}
.ta-r,.pay{text-align:right; padding-right:0}
.pay{font-family:var(--serif); font-weight:700; font-size:1.35rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.pay.big{color:var(--solar); font-size:1.55rem}
/* La tarifa por kWh es la cifra del argumento: va en ámbar, como lo energético. */
.rate{font-family:var(--serif); font-weight:700; color:var(--solar); font-size:1.2rem; font-variant-numeric:tabular-nums; white-space:nowrap}
tbody tr:hover{background:color-mix(in srgb,var(--green-lt) 55%,transparent)}
.nd{display:inline-flex; align-items:center; gap:.6rem}
.chips{fill:var(--line-2); flex:0 0 auto} .chips.b{fill:var(--green)} tbody tr:hover .chips{fill:var(--green)}
/* Los enlaces de la tabla y del ejemplo salían en azul de navegador: el único color fuera de paleta. */
#tb-nodos a{color:var(--green); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em}
#tb-nodos a:hover{color:var(--solar)}
/* Cuando la cuota supera la tarifa el neto es negativo: no puede ir en el verde de «lo que cobras». */
#tb-nodos .neg{color:var(--solar); font-weight:700}
/* Lo que queda con recomendaciones va bajo el neto base, no en columnas propias. */
#tb-nodos .rec-x{display:block; font:400 .78rem var(--sans); color:var(--mute); margin-top:.25rem; letter-spacing:0; white-space:nowrap}
.split[hidden]{display:none}
/* Ejemplo representativo del art. 9.2 de la Ley 16/2011: sólo con la pestaña de financiación. */
.ejrep{margin-top:1.8rem; padding:1.2rem 1.4rem; border:1px solid var(--line); border-left:4px solid var(--solar);
  background:var(--paper-2); border-radius:3px}
.ejrep[hidden]{display:none}
.ejrep p{margin:0 0 .55rem; font-size:.95rem; color:var(--body); line-height:1.55; max-width:64em}
.ejrep p:last-child{margin-bottom:0}
.ejrep-k{font:700 .74rem var(--sans)!important; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
.ejrep-n{font-size:.88rem!important; color:var(--mute)!important}
.ejrep a{color:var(--green)} .ejrep a:hover{color:var(--solar)}

/* ── el mercado ───────────────────────────────────────────── */
.mk{margin-top:clamp(1.8rem,4vw,2.6rem)}
.mk-head,.mk-row{display:grid; grid-template-columns:7rem minmax(4rem,1fr) 8rem 8rem 7rem; gap:1rem; align-items:center}
.mk-head{padding:0 0 .8rem; border-bottom:1px solid var(--line-2)}
.mk-row{padding:.9rem 0; border-bottom:1px solid var(--line)}
.mk-reg{font:700 1.2rem var(--serif); color:var(--ink)}
.mk-reg.eu{color:var(--green)} .mk-reg.es{color:var(--solar)}
.mk-track{background:var(--line); border-radius:100px; height:1.6rem; overflow:hidden}
.mk-bar{height:100%; border-radius:100px; min-width:4px}
.mk-bar.us{background:var(--ink)} .mk-bar.cn{background:var(--mute)} .mk-bar.eu{background:var(--green)} .mk-bar.es{background:var(--solar)}
.mk-z,.mk-gw{font-size:1rem; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--body)}
.mk-r{font:700 1.3rem var(--serif); color:var(--mute); text-align:right; font-variant-numeric:tabular-nums}
.mk-r.hi{color:var(--ink); font-size:var(--fs-num)}
.sep{border:0; border-top:1px solid var(--line-2); margin:clamp(3rem,7vw,5rem) 0}

/* ── calculadora ──────────────────────────────────────────── */
.calc{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:start; margin-top:clamp(1.6rem,4vw,2.4rem)}
.calc-in{min-width:0}
.fld{display:block; font:700 1.08rem var(--sans); color:var(--ink); margin-bottom:.9rem}
/* El selector de recomendados va pegado al de excedente: es el mismo gesto, dos variables. */
.fld.tight{margin-top:2rem}
.hint{display:block; font-weight:400; font-size:.92rem; color:var(--mute); margin-top:.2rem}
.rng{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap}
input[type=range]{flex:1 1 14rem; -webkit-appearance:none; appearance:none; background:none; height:2.4rem; cursor:pointer; min-width:0}
input[type=range]::-webkit-slider-runnable-track{height:.6rem; border-radius:100px; background:linear-gradient(90deg,var(--solar),var(--green))}
input[type=range]::-moz-range-track{height:.6rem; border-radius:100px; background:linear-gradient(90deg,var(--solar),var(--green))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--ink);
  border:3px solid var(--paper); box-shadow:0 1px 5px rgba(0,0,0,.3); margin-top:-.6rem}
input[type=range]::-moz-range-thumb{width:1.8rem; height:1.8rem; border-radius:50%; background:var(--ink); border:3px solid var(--paper); box-shadow:0 1px 5px rgba(0,0,0,.3)}
.rng-n{display:flex; align-items:baseline; gap:.45rem; flex:0 0 auto}
.rng-n input,.rng-n output{font:700 1.35rem var(--serif); color:var(--ink); font-variant-numeric:tabular-nums}
.rng-n input{width:7.2rem; padding:.4rem .6rem; border:1px solid var(--line-2); border-radius:6px; background:var(--paper); text-align:right}
.rng-n output{min-width:1.6rem; text-align:right; display:inline-block}
.rng-n span{font-size:.92rem; color:var(--mute)}
.rng-marks{display:flex; justify-content:space-between; font-size:.82rem; color:var(--mute); margin:-.1rem .3rem 0}
.calc-cmp{margin-top:clamp(2rem,4vw,2.8rem); display:grid; gap:1.2rem}
.cmp-row{display:grid; grid-template-columns:11rem 1fr auto; gap:1rem; align-items:center}
.cmp-lbl{font-size:.95rem; color:var(--body); font-weight:600}
/* De quién es la tarifa de vertido, bajo el rótulo de la barra. */
.cmp-lbl em{display:block; font-style:normal; font-weight:400; font-size:.8rem; color:var(--mute); margin-top:.1rem; white-space:nowrap}
.cmp-track{background:var(--line); border-radius:100px; height:1.9rem; overflow:hidden}
.cmp-bar{height:100%; border-radius:100px; transition:width .18s ease-out; min-width:4px}
.cmp-bar.mute{background:var(--line-2)} .cmp-bar.grad{background:linear-gradient(90deg,var(--solar),var(--green))}
.cmp-val{font-family:var(--serif); font-weight:700; font-size:1.3rem; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--mute)}
.cmp-val.strong{color:var(--green); font-size:var(--fs-num)}
.calc-out{background:var(--paper); border:1px solid var(--line-2); border-radius:10px; padding:clamp(1.4rem,3vw,2rem); display:flex; flex-direction:column}
.co-nodo{font-family:var(--serif); font-weight:700; line-height:1; letter-spacing:-.03em; font-size:clamp(2.6rem,1.8rem + 2.4vw,3.6rem); color:var(--green); margin-top:.5rem}
.co-desc{font-size:.95rem; color:var(--mute); margin:.5rem 0 1.3rem; min-height:2.6em; line-height:1.4}
.co-dl{margin:0; display:grid; gap:.55rem}
/* `hidden` es display:none del navegador, y una regla de autor con display lo pisa. */
.co-dl>div[hidden]{display:none}
.co-dl>div{display:flex; justify-content:space-between; align-items:baseline; gap:.9rem; padding-top:.6rem; border-top:1px solid var(--line)}
.co-dl dt{font-size:.95rem; color:var(--mute)}
.co-dl dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums; text-align:right}
/* lo que paga el nodo es la cifra de la ficha: va grande y la primera */
.co-dl>div.hi{border-top:2px solid var(--green-lt); padding-top:.9rem; padding-bottom:.4rem}
.co-dl>div.hi dt{color:var(--ink); font-weight:600}
.co-dl>div.hi dd{font:700 var(--fs-num)/1 var(--serif); color:var(--green); letter-spacing:-.03em}
.co-dl dd.mult{color:var(--solar); font-family:var(--serif); font-size:1.35rem}
/* El techo: hasta dónde llega el tejado. Referencia, no recomendación de compra. */
.alt-sg1{margin:1.4rem 0 0; padding:1rem 1.3rem; border-left:4px solid var(--solar); background:var(--paper-2);
  font-size:.95rem; color:var(--body); line-height:1.55; max-width:60em; border-radius:3px}
.alt-sg1[hidden]{display:none}

/* ── formulario ───────────────────────────────────────────── */
.lead{margin-top:clamp(2.8rem,6vw,4.5rem); padding-top:clamp(2rem,4vw,3rem); border-top:2px solid var(--line-2)}
.lead-h{font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem); margin-bottom:.3em}
.lead-p{color:var(--mute); font-size:1.02rem; margin:0 0 1.8rem; max-width:46em}
.lead-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem 1.3rem}
.f-campo{display:flex; flex-direction:column; gap:.4rem; font:600 .9rem var(--sans); color:var(--body)}
.f-campo.wide{grid-column:1/-1}
.f-campo input,.f-campo select,.f-campo textarea{font:400 1.05rem var(--sans); color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:6px; padding:.75rem .85rem; width:100%; min-height:3rem; transition:border-color .15s}
.f-campo input:focus,.f-campo select:focus,.f-campo textarea:focus{border-color:var(--solar); outline:none}
.f-campo textarea{resize:vertical; min-height:3.6rem}
/* La casilla de consentimiento es obligatoria: 1,4 rem, no los 13 px por defecto. */
.f-campo.chk{grid-column:1/-1; flex-direction:row; align-items:center; gap:.8rem; font-weight:400; font-size:.95rem; color:var(--mute)}
.f-campo.chk input{width:1.4rem; height:1.4rem; min-height:0; margin:0; accent-color:var(--solar); flex:0 0 auto}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.lead-foot{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.7rem}
.f-estado{font-size:.95rem} .f-estado.ok{color:var(--green); font-weight:600} .f-estado.err{color:#B4472B}
.f-estado a{color:inherit}

/* ── cómo funciona: cuatro pasos ──────────────────────────── */
.steps{list-style:none; counter-reset:s; margin:clamp(2rem,4vw,3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.8rem,4vw,3rem)}
.steps li{counter-increment:s; padding-top:1.3rem; border-top:3px solid var(--solar); position:relative}
.steps li::before{content:counter(s); position:absolute; top:1.2rem; right:0; width:2.2rem; height:2.2rem; border-radius:50%;
  border:2px solid var(--solar-lt); color:var(--solar); display:grid; place-items:center; font:700 1.05rem var(--serif)}
.st-ic{width:2.8rem; height:2.8rem; display:block; margin-bottom:1rem; fill:none; stroke:var(--solar); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.steps h3{padding-right:2.6rem}
.steps p{margin:0; color:var(--body); font-size:1.02rem}

/* ── estructura, no tamaño ────────────────────────────────── */
@media (max-width:64rem){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lead-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:60rem){
  .calc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:52rem){
  /* iOS Safari hace zoom al enfocar cualquier control por debajo de 16 px. */
  input,select,textarea{font-size:16px!important}

  /* El mercado, en móvil: cinco celdas no caben; el ratio baja a propósito,
     alineado bajo la barra y con su rótulo al lado. */
  .mk-head,.mk-row{grid-template-columns:5.5rem 1fr 6rem; gap:.5rem .7rem}
  .mk-gw,.mk-head span:nth-child(4),.mk-head span:nth-child(5){display:none}
  .mk-r{grid-column:2/4; text-align:left; font-size:1.15rem; color:var(--ink)} .mk-r.hi{font-size:1.5rem}
  .mk-r::after{content:" cómputo por GW"; font:400 .82rem var(--sans); color:var(--mute)}
  .mk-z{font-size:.92rem; text-align:right}
  .cmp-row{grid-template-columns:minmax(0,1fr); gap:.35rem} .cmp-track{height:1.4rem}

  /* La tabla de nodos se convierte en fichas: con 7 columnas en 390 px el
     dinero quedaba fuera de pantalla y el scroll horizontal no se descubre. */
  .tw{overflow:visible; margin-inline:0; padding-inline:0}
  #t-nodos{min-width:0; display:block}
  #t-nodos thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  #t-nodos tbody{display:grid; gap:1rem}
  /* min-width:0 es obligatorio: como item de grid, `auto` la clavaba al min-content. */
  #t-nodos tr{display:block; min-width:0; padding:1rem 1.1rem 1.15rem; background:var(--paper); border:1px solid var(--line);
    border-left:3px solid var(--green); border-radius:8px}
  #t-nodos tr:hover{background:var(--paper)}
  #t-nodos th[scope=row]{display:block; padding:0 0 .8rem; margin-bottom:.4rem; border:0; border-bottom:1px solid var(--line); font-size:1.5rem}
  #t-nodos td{display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem; padding:.6rem 0 0; border:0; text-align:right}
  #t-nodos td::before{content:attr(data-l); flex:0 1 auto; min-width:0; text-align:left; font:600 .78rem/1.35 var(--sans);
    letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
  #t-nodos td.pay{padding-top:.7rem; font-size:1.45rem} #t-nodos td.pay.big{font-size:1.6rem}
  #t-nodos .rec-x{white-space:normal}

  .steps{grid-template-columns:minmax(0,1fr)} .lead-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:34rem){
  .rng-n input{width:6rem}
  .mk-z{font-size:.85rem}
}