/* Constructor de ductos · mismo lenguaje visual del simulador */
:root {
  --ink-0: #0d1114; --ink-1: #141a1e; --ink-2: #1b2328; --ink-3: #222c32;
  --line: #2a363d; --fg: #ecebe5; --mute: #8f9ca2; --accent: #e8b04a; --steel: #8fc1e3;
  --ok: #57d68d; --p1: #e5484d; --p2: #f0a43a;
  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--ink-0); color: var(--fg); font: 15px/1.45 var(--f-body); }
a { color: var(--steel); }
button, input, select, textarea { font: inherit; color: inherit; }
.b-shell { min-height: 100%; display: flex; flex-direction: column; }

/* barra superior */
.b-top { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--ink-1); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1000; }

.b-brand-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.b-brand-link img { width: 36px; height: 36px; flex: none; }
.b-brand-txt { display: flex; flex-direction: column; line-height: 1.05; }

.b-brand { display: flex; flex-direction: column; line-height: 1.05; }
.b-brand-name { font: 700 22px var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; }
.b-brand-sub { font: 11px var(--f-mono); color: var(--mute); }
.b-topnav { display: flex; gap: 4px; }
.b-tlink { font: 600 15px var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.b-tlink:hover { color: var(--fg); background: var(--ink-2); }
.b-top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.b-saved { font: 12px var(--f-mono); color: var(--mute); }
.b-saved.dirty { color: var(--p2); }

.b-btn { font: 600 15px var(--f-display); letter-spacing: 0.05em; text-transform: uppercase; background: var(--ink-2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.b-btn:hover { border-color: #3a4a53; }
.b-btn:disabled { opacity: 0.45; cursor: default; }
.b-btn-hot { background: var(--accent); color: var(--ink-0); border-color: var(--accent); }
.b-btn-sm { font-size: 13px; padding: 5px 10px; }
.b-btn-danger { color: #ffb4b6; }
.b-btn:focus-visible, .b-tlink:focus-visible, .b-step:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
.b-file { position: relative; overflow: hidden; display: inline-block; }
.b-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* biblioteca */
.b-lib { padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); max-width: 1180px; width: 100%; margin: 0 auto; display: grid; gap: 28px; }
.b-lib-hero h1 { font: 700 clamp(30px, 5vw, 46px)/1.05 var(--f-display); text-transform: uppercase; margin: 8px 0 10px; letter-spacing: 0.01em; }
.b-lib-hero p { color: #c9d1d5; max-width: 760px; margin: 0 0 16px; }
.b-lib-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.b-h2 { font: 700 22px var(--f-display); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 12px; }
.b-h2 span { font: 400 13px var(--f-body); text-transform: none; color: var(--mute); letter-spacing: 0; margin-left: 6px; }
.b-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.b-card { background: var(--ink-1); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.b-card h3 { margin: 0; font: 700 20px var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; }
.b-card .b-meta { font: 12px var(--f-mono); color: var(--mute); }
.b-card .b-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b-card .b-kv div { background: var(--ink-0); border-radius: 6px; padding: 6px 8px; }
.b-card .b-kv span { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.b-card .b-kv b { font: 500 14px var(--f-mono); }
.b-card .b-row { display: flex; gap: 6px; flex-wrap: wrap; }
.b-empty { color: var(--mute); background: var(--ink-1); border: 1px dashed var(--line); border-radius: 12px; padding: 22px; }

/* editor */
.b-ed { flex: 1; display: grid; grid-template-columns: 220px 1fr; min-height: 0; }
.b-steps { background: var(--ink-1); border-right: 1px solid var(--line); padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(57px + var(--vm-bar, 34px)); align-self: start; max-height: calc(100vh - 57px - var(--vm-bar, 34px)); overflow: auto; }
.b-step { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px; cursor: pointer; color: var(--mute); }
.b-step i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--f-mono); font-style: normal; background: var(--ink-0); border: 1px solid var(--line); }
.b-step b { font: 600 16px var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }
.b-step em { grid-column: 2; font: 11px var(--f-mono); font-style: normal; color: var(--mute); margin-top: -4px; }
.b-step:hover { background: var(--ink-2); color: var(--fg); }
.b-step.on { background: var(--ink-2); color: var(--fg); box-shadow: inset 3px 0 0 var(--accent); }
.b-step.done i { background: var(--ok); color: var(--ink-0); border-color: var(--ok); }
.b-step.warn i { background: var(--p2); color: var(--ink-0); border-color: var(--p2); }
.b-pane { padding: 18px max(16px, env(safe-area-inset-right, 0px)) 60px 20px; min-width: 0; display: grid; gap: 16px; align-content: start; }
.b-pane h2 { font: 700 28px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.b-lead { color: #c9d1d5; margin: -6px 0 0; max-width: 860px; }
.b-box { background: var(--ink-1); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 12px; min-width: 0; }
.b-box h3 { margin: 0; font: 700 17px var(--f-display); letter-spacing: 0.05em; text-transform: uppercase; color: #d9dcd6; }
.b-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.b-f { display: grid; gap: 4px; font-size: 12px; color: var(--mute); letter-spacing: 0.02em; }
.b-f input, .b-f select, .b-f textarea { background: var(--ink-0); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; color: var(--fg); font: 14px var(--f-body); min-width: 0; width: 100%; }
.b-f input[type="checkbox"] { width: auto; }
.b-f input:focus, .b-f select:focus, .b-f textarea:focus { outline: 2px solid var(--steel); outline-offset: 0; border-color: transparent; }
.b-f small { color: var(--mute); font-size: 11px; }
.b-chk { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--fg); cursor: pointer; }
.b-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.b-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.b-out div { background: var(--ink-0); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.b-out span { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.b-out b { font: 500 17px var(--f-mono); font-variant-numeric: tabular-nums; }
.b-out .hot b { color: var(--accent); }
.b-out .bad b { color: var(--p1); }
.b-note { font-size: 13px; color: var(--mute); margin: 0; }
.b-warns { display: grid; gap: 6px; }
.b-warn { background: rgba(240, 164, 58, 0.1); border: 1px solid rgba(240, 164, 58, 0.4); color: #f7cf91; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.b-warn.bad { background: rgba(229, 72, 77, 0.1); border-color: rgba(229, 72, 77, 0.5); color: #ffb4b6; }
.b-warn.ok { background: rgba(87, 214, 141, 0.08); border-color: rgba(87, 214, 141, 0.4); color: #b6efcc; }

/* mapa */
.b-mapwrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #1a2126; }
.b-map { height: min(62vh, 620px); min-height: 340px; }
.b-map-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--mute); }
.b-maptools { position: absolute; z-index: 600; top: 10px; left: 54px; right: 64px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.b-maptools > * { pointer-events: auto; }
.b-maptools .b-btn { background: rgba(13, 17, 20, 0.86); backdrop-filter: blur(6px); }
.b-maptools .b-btn.on { background: var(--accent); color: var(--ink-0); }
.b-search { display: flex; gap: 0; background: rgba(13, 17, 20, 0.86); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.b-search input { background: none; border: 0; padding: 6px 10px; width: 210px; color: var(--fg); }
.b-search button { border: 0; border-left: 1px solid var(--line); background: none; padding: 6px 10px; cursor: pointer; font: 600 13px var(--f-display); text-transform: uppercase; }
.leaflet-container { background: #1a2126; font: 13px var(--f-body); }
.b-vtx { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 0 0 2px rgba(0,0,0,0.4); }
.b-vtx.first { border-color: var(--ok); }
.b-vtx.last { border-color: var(--p1); }
.b-stmk { font: 600 12px var(--f-display); letter-spacing: 0.04em; background: var(--ink-0); color: var(--fg); border: 2px solid var(--accent); border-radius: 6px; padding: 1px 5px; white-space: nowrap; transform: translate(-50%, -130%); display: inline-block; }
.b-stmk.k-reductora { border-color: var(--steel); }
.b-stmk.k-inyeccion { border-color: #c48df0; }
.b-stmk.k-terminal, .b-stmk.k-cabecera { border-color: var(--ok); }
.b-vbmk { width: 9px; height: 9px; background: #e7e3da; border: 2px solid #1b2328; transform: rotate(45deg); }

/* progreso */
.b-prog { height: 8px; background: var(--ink-0); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.b-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }

/* perfil */
.b-prof { width: 100%; height: auto; display: block; background: var(--ink-0); border-radius: 8px; border: 1px solid var(--line); }
.b-prof .t { font: 11px var(--f-mono); fill: var(--mute); }
.b-prof .tl { font: 600 12px var(--f-display); fill: var(--fg); letter-spacing: 0.04em; }
.b-legend { display: flex; gap: 14px; flex-wrap: wrap; font: 12px var(--f-mono); color: var(--mute); }
.b-legend i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 6px; border-radius: 2px; }

/* estaciones */
.b-sts { display: grid; gap: 10px; }
.b-st { background: var(--ink-1); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.b-st-h { display: flex; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; flex-wrap: wrap; }
.b-st-h b { font: 700 18px var(--f-display); text-transform: uppercase; letter-spacing: 0.03em; }
.b-st-h .b-tag { font: 11px var(--f-mono); background: var(--ink-0); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; color: var(--mute); }
.b-st-h .b-tag.k-cabecera, .b-st-h .b-tag.k-terminal { color: var(--ok); border-color: rgba(87, 214, 141, 0.4); }
.b-st-h .b-tag.k-bombeo { color: var(--accent); border-color: rgba(232, 176, 74, 0.45); }
.b-st-h .b-tag.k-reductora { color: var(--steel); }
.b-st-h .b-tag.k-inyeccion { color: #d4b0f5; }
.b-st-h .b-sum { margin-left: auto; font: 12px var(--f-mono); color: var(--mute); }
.b-st-b { border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 12px; background: #11171b; }
.b-sub { font: 600 13px var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin: 0; }

/* tablas */
.b-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.b-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.b-table th { text-align: left; font: 600 12px var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--ink-1); position: sticky; top: 0; }
.b-table td { padding: 6px 10px; border-bottom: 1px solid #1e272c; font-variant-numeric: tabular-nums; }
.b-table td.r, .b-table th.r { text-align: right; }
.b-table td.mono { font-family: var(--f-mono); }
.b-table td.bad { color: var(--p1); }
.b-table td.warn { color: var(--p2); }
.b-table input { background: var(--ink-0); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; width: 100%; color: var(--fg); }

.b-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); background: var(--ink-2); border: 1px solid var(--line); color: var(--fg); padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: 0.25s; z-index: 2000; max-width: calc(100% - 32px); }
.b-toast.show { opacity: 1; transform: translate(-50%, 0); }
.b-navbtns { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

@media (max-width: 820px) {
  .b-ed { grid-template-columns: 1fr; }
  .b-steps { position: sticky; top: 0; flex-direction: row; overflow-x: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; z-index: 900; }
  .b-step { grid-template-columns: 24px auto; white-space: nowrap; }
  .b-step em { display: none; }
  .b-pane { padding: 14px 16px 60px; }
  .b-top-actions { margin-left: 0; width: 100%; }
  .b-search input { width: 150px; }
}
@media (max-width: 820px) { .b-top { position: static; } }
/* v17 planes y licencias */
.lic-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--accent, #e8b04a); background: transparent; color: var(--fg, #ecebe5); cursor: pointer; font: 500 11px var(--f-mono, monospace); line-height: 1.25; }
.lic-chip b { font: 700 13px var(--f-display, sans-serif); letter-spacing: .05em; text-transform: uppercase; color: var(--accent, #e8b04a); }
.lic-chip span { color: var(--mute, #8f9ca2); }
.lic-chip[data-plan="gratis"] { background: var(--accent, #e8b04a); }
.lic-chip[data-plan="gratis"] b, .lic-chip[data-plan="gratis"] span { color: #0d1114; }
.lic-modal { position: fixed; inset: 0; z-index: 200; background: rgba(5, 8, 10, .78); overflow-y: auto; padding: 24px 16px; }
.lic-modal[hidden] { display: none; }
.lic-card { position: relative; max-width: 1320px; margin: 0 auto; background: #141a1e; color: #ecebe5; border: 1px solid #2a363d; border-radius: 14px; padding: 24px; font: 15px/1.45 var(--f-body, system-ui, sans-serif); }
.lic-card h2 { font: 700 34px/1 var(--f-display, sans-serif); text-transform: uppercase; margin: 0 0 4px; }
.lic-sub { color: #8f9ca2; margin: 0 0 14px; }
.lic-x { position: absolute; top: 12px; right: 12px; background: none; border: 1px solid #2a363d; color: #ecebe5; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; }
.lic-cur { background: #10251a; border: 1px solid #2f6b45; border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; font-size: 14px; }
.lic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.lic-col { border: 1px solid #2a363d; border-radius: 12px; padding: 16px; background: #1b2328; display: flex; flex-direction: column; gap: 8px; }
.lic-col.hot { border-color: #e8b04a; }
.lic-col.cur { box-shadow: inset 0 0 0 2px #57d68d; }
.lic-col ul { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.lic-pn { font: 700 22px var(--f-display, sans-serif); text-transform: uppercase; margin: 0; }
.lic-pp { font: 600 20px var(--f-mono, monospace); color: #e8b04a; }
.lic-badge { align-self: flex-start; margin: 0; font: 600 11px var(--f-mono, monospace); text-transform: uppercase; background: #e8b04a; color: #0d1114; padding: 2px 8px; border-radius: 999px; }
.lic-tag { margin: auto 0 0; color: #57d68d; font-weight: 600; }
.lic-m { color: #8f9ca2; font-size: 13px; margin: 0; }
.lic-m a, .lic-cmp a { color: #8fc1e3; }
.lic-plist { display: grid; gap: 6px; }
.lic-pl { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: baseline; border: 1px solid #2a363d; border-radius: 8px; padding: 6px 10px; background: #141a1e; }
.lic-pl .lic-pp { font-size: 16px; }
.lic-pl small { grid-column: 1 / -1; color: #8f9ca2; font-size: 12px; }
.lic-pl.best { border-color: #57d68d; }
.lic-pay { grid-column: 1 / -1; justify-self: start; color: #8fc1e3; font-size: 13px; }
.lic-btn { margin-top: auto; }
.lic-cmp { margin: 16px 0 10px; }
.lic-cmp summary, .lic-act summary { cursor: pointer; color: #8fc1e3; font-weight: 600; }
.lic-cmp table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.lic-cmp th, .lic-cmp td { border-bottom: 1px solid #2a363d; padding: 6px 8px; text-align: center; }
.lic-cmp td:first-child, .lic-cmp th:first-child { text-align: left; }
.lic-act { margin-top: 12px; }
.lic-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.lic-row textarea { flex: 1 1 300px; min-height: 52px; background: #0d1114; color: #ecebe5; border: 1px solid #2a363d; border-radius: 8px; padding: 8px; font: 12px var(--f-mono, monospace); }
.lic-msg { min-height: 1em; font-size: 13px; }
.lic-msg.bad { color: #e5484d; }
.lic-lock { max-width: 620px; margin: 40px auto; text-align: center; background: #1b2328; color: #ecebe5; border: 1px solid #2a363d; border-radius: 12px; padding: 26px 22px; font: 15px/1.45 var(--f-body, system-ui, sans-serif); }
.lic-lock h3 { font: 700 22px var(--f-display, sans-serif); text-transform: uppercase; margin: 6px 0; }
.lic-lock p { color: #8f9ca2; }
.lic-lock-i { font-size: 30px; }
.lic-lk { font-style: normal; font-size: 10px; }
.lic-gate { position: fixed; inset: 0; z-index: 150; background: rgba(5, 8, 10, .9); overflow-y: auto; padding: 40px 16px; }
.lic-gate .lic-card { max-width: 680px; text-align: center; }
.lic-gate .lic-lock { border: 0; margin: 0 auto; background: none; }
/* v18 plantas */
.b-stmk.k-planta { border-color: #4fd1c5; }
.b-st-h .b-tag.k-planta { color: #7fe3d9; border-color: rgba(79, 209, 197, 0.45); }

/* Barra para volver al sitio. En el flujo, arriba de la vista: no tapa el canvas ni los controles. */
:root{--vm-bar:34px}
.vm-back{position:relative;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;height:calc(var(--vm-bar) + env(safe-area-inset-top, 0px));padding:env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));background:#10161c;border-bottom:1px solid var(--line);flex:none}
.vm-back a,.vm-back a:visited{display:inline-flex;align-items:center;gap:6px;color:#ecebe5;text-decoration:none;font-weight:700;font-size:13px;line-height:1;white-space:nowrap;min-height:32px;font-family:var(--f-body)}
.vm-back svg{width:22px;height:22px;flex:none;display:block}
.vm-back .vm-home{min-width:0}
.vm-back .vm-home span{overflow:hidden;text-overflow:ellipsis}
.vm-back .vm-sims,.vm-back .vm-sims:visited{color:#ffd400;font-size:12px;font-weight:700;border:1px solid #5c4a16;border-radius:999px;padding:4px 8px;background:#241c0a;flex:none}
.b-top>.vm-back{flex:1 0 100%;z-index:1}