.chip{display:inline-block;background:var(--brand-bg);color:var(--brand);border-radius:20px;padding:2px 9px;font-size:12px;font-weight:600;margin-left:6px}
/* Estos tres bloques ocupan TODO el ancho, texto incluido, y no llevan límite de lectura.
   Hubo dos intentos antes de esto y los dos se veían mal:
     1) max-width en el elemento: como tienen fondo, borde y esquinas redondeadas, la caja
        terminaba a mitad de pantalla mientras las tarjetas de al lado iban al 100% — parecía una
        tarjeta cortada al medio (700px de caja contra 1385 de contenedor, a 1440).
     2) caja completa y el texto acotado con padding derecho: la caja quedaba bien pero el texto
        ocupaba la mitad y el resto vacío, así que ahora parecía cortado el texto.
   La medición resolvió el empate: son 13 bloques en toda la app, el más largo de 379 caracteres y
   la mayoría entre 48 y 67. A ancho completo eso es UNA o DOS líneas. El límite de 100ch no estaba
   protegiendo prosa: estaba dejando media caja vacía para textos de un renglón.
   Si algún día uno de estos crece a cinco renglones, el arreglo es acortar el texto o mandarlo al
   "?", no volver a angostar la caja. */
.insight{background:var(--brand-bg);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:14px}
.insight b{color:var(--brand)}
.note{background:var(--warn-bg);border:1px solid #f0dcae;border-radius:10px;padding:12px 14px;font-size:13px;color:var(--warn);margin-bottom:14px}
.legend{font-size:12px;color:var(--muted);margin-top:8px;max-width:110ch}
.foot{color:var(--muted);font-size:12px;text-align:center;margin-top:26px}
code{background:var(--brand-bg);border-radius:4px;padding:1px 5px;font-size:13px}
.semgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px;margin:6px 0 14px}
.semgrid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.semgrid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.semgrid.g4{grid-template-columns:1fr}}
.sem .sd a{color:var(--brand2);font-weight:600;text-decoration:none;white-space:nowrap}
.sem{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow);border-left:5px solid var(--muted)}
.sem.g{border-left-color:var(--pos)} .sem.y{border-left-color:var(--warn-bright)} .sem.r{border-left-color:var(--neg)}
.sem .sl{font-size:12px;color:var(--muted);font-weight:600;line-height:1.35}
.sem .sv{font-size:21px;font-weight:650;margin-top:4px;letter-spacing:-.012em}
.sem.g .sv{color:var(--pos)} .sem.y .sv{color:var(--warn)} .sem.r .sv{color:var(--neg)}
.sem .sd{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35}
.alerts{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--neg);border-radius:var(--r);padding:12px 16px;margin:0 0 16px;box-shadow:var(--shadow);font-size:14px}
.alerts.ok{border-left-color:var(--pos)}
.alerts ul{margin:6px 0 0;padding-left:18px} .alerts li{margin:4px 0}
.verdict{display:flex;align-items:flex-start;gap:14px;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--muted);border-radius:var(--r);padding:16px 20px;margin:4px 0 8px;box-shadow:var(--shadow)}
.verdict.g{border-left-color:var(--pos)} .verdict.y{border-left-color:var(--warn-bright)} .verdict.r{border-left-color:var(--neg)}
.verdict .vem{font-size:30px;line-height:1}
.verdict .vtx{font-size:16px;line-height:1.5}
.verdict .vtx b{font-size:16px}
.vleg{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:0 0 16px 2px}
.vleg span{display:inline-flex;align-items:center;gap:5px}
.vleg i{width:11px;height:11px;border-radius:50%;display:inline-block}
.acc{border:1px solid var(--line);border-radius:var(--r);margin:10px 0;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.acc-h{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;font-size:16px;font-weight:650;color:var(--brand);user-select:none}
.acc-h:hover{background:var(--bg)}
.acc-ar{display:inline-block;width:14px;color:var(--brand2);transition:transform .15s}
.acc-sub{font-weight:400;font-size:13px;color:var(--muted)}
.acc.closed .acc-b{display:none} .acc.closed .acc-ar{transform:rotate(-90deg)}
.acc-b{padding:2px 16px 14px}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:stretch;margin:6px 0}
.g2>.card{margin:0;display:flex;flex-direction:column}
.spk{width:100%;height:26px;display:block;margin-top:7px;opacity:.85}
.news{display:flex;flex-direction:column;gap:10px}
.newsitem{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.newshd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.newstag{color:#fff;font-size:11px;font-weight:700;border-radius:20px;padding:2px 9px;text-transform:uppercase;letter-spacing:.4px}
.newsfecha{font-size:12px;color:var(--muted)}
.newsdet{font-size:14px;color:var(--ink);margin-top:5px;line-height:1.5}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:11px 26px;margin:4px 0 6px}
@media(max-width:700px){.bars{grid-template-columns:1fr}}
.barrow{font-size:13px}
.barrow .top{display:flex;justify-content:space-between;margin-bottom:3px}
.barrow .tr{font-weight:600}
.bartrack{height:9px;background:var(--line-soft);border-radius:6px;overflow:hidden}
.barfill{height:100%;border-radius:6px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 12px}
.btn.sm{padding:6px 11px;font-size:13px}
.smchip,.svchip,.cchip{display:inline-block;padding:5px 12px;font-size:13px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;font-weight:600}
.smchip:hover,.svchip:hover,.cchip:hover{border-color:var(--brand2);color:var(--brand2)}
.smchip.on,.svchip.on,.cchip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.muted{color:var(--muted);font-size:13px}
.err{color:var(--neg);background:var(--neg-bg);border:1px solid #f2c6bf;border-radius:10px;padding:14px;font-size:14px;margin:10px 0}
.loading{color:var(--muted);padding:40px;text-align:center;font-size:14px}
#login{max-width:380px;margin:9vh auto;padding:0 18px}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--shadow)}
.lcard h2{margin:0 0 4px;color:var(--brand);font-size:18px}
.lcard p{margin:0 0 18px;color:var(--muted);font-size:13px}
.lcard label{display:block;font-size:13px;color:var(--muted);font-weight:600;margin:12px 0 4px}
.lcard input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px}
.lcard .btn{width:100%;margin-top:18px;padding:11px}
.lerr{color:var(--neg);font-size:13px;margin-top:12px;min-height:16px}
.brandmark{width:46px;height:46px;border-radius:50%;background:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:11px;line-height:1.05;letter-spacing:.02em;color:#fff;flex:0 0 auto}

/* ── EL SIMULADOR DE EQUILIBRIO ──────────────────────────────────────────────────────────────────
   Las primeras perillas del tablero. Todo lo demás acá se lee; esto se toca, y por eso es lo único
   que necesita estados de foco y de arrastre propios.

   La grilla es auto-fit y no un número fijo de columnas: son cinco perillas en un bloque y seis en
   el otro, y con columnas fijas uno de los dos siempre quedaba con un hueco al final. */
.eqsim-g{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:12px}
.eqsim-p{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--card)}
.eqsim-n{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.eqsim-n b{font-size:13px}
.eqsim-n .v{font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;color:var(--brand);
  white-space:nowrap}
.eqsim-w{font-size:11.5px;color:var(--muted);margin:1px 0 8px;line-height:1.45}
.eqsim-l{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);
  margin-top:4px;font-variant-numeric:tabular-nums}
/* La perilla apagada —agua y energía en cantidad— existe para que se vea que la decisión de dejarla
   afuera es nuestra y no un olvido. Sin ella, alguien la busca y no la encuentra. */
.eqsim-p.off{opacity:.55;background:var(--bg)}

/* EL SLIDER. `accent-color` alcanza en todos los navegadores que el tablero soporta y evita las tres
   pilas de vendor prefixes que haría falta para pintar riel y pulgar a mano. El alto mínimo es para
   que el área de toque llegue a los 24px en el celular, donde el pulgar nativo mide 16. */
.eqsim-p input[type=range]{width:100%;margin:0;accent-color:var(--accent);min-height:24px;cursor:pointer}
.eqsim-p input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-pill)}

/* La franja de «el total no se mueve». Va en ámbar y no en verde a propósito: no es una buena
   noticia, es una advertencia sobre cómo leer lo que las seis perillas de arriba acaban de hacer. */
.eqsim-fijo{background:var(--warn-bg);border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px;
  margin-top:12px;color:var(--ink)}

.eqsim-det{margin-top:10px;font-size:13px}
.eqsim-det>summary{cursor:pointer;color:var(--muted);font-size:12.5px;font-weight:600;
  padding:6px 0;list-style:none}
.eqsim-det>summary::-webkit-details-marker{display:none}
.eqsim-det>summary::before{content:'▸ ';color:var(--accent)}
.eqsim-det[open]>summary::before{content:'▾ '}
.eqsim-det>summary:hover{color:var(--brand)}