/* public/tools/app.css · reglas de componentes de Brigada X tools (resistencias, sitios, fits, panel ESI…).
   El sistema de diseño (tokens, header, footer, botones, portada, interruptor de modo) vive en
   /tools/theme.css, que se carga DESPUÉS y re-mapea estas variables a la paleta nueva. */

:root {
  --bx-bg:        #070b10;
  --bx-bg-2:      #0c121a;
  --bx-panel:     #111924;
  --bx-panel-2:   #16202d;
  --bx-line:      #243244;
  --bx-line-2:    #2f4158;
  --bx-text:      #e7edf4;
  --bx-muted:     #8d9aab;
  --bx-amber:     #f0a830;
  --bx-amber-2:   #ffc85c;
  --bx-cyan:      #35c6e6;
  --bx-cyan-2:    #7fe3f7;
  --bx-ok:        #39d98a;
  --bx-warn:      #ff8a3d;
  --bx-err:       #ff5c5c;
  --bx-radius:    10px;
  --bx-font:      "Segoe UI", "Inter", Roboto, system-ui, -apple-system, sans-serif;
  --bx-mono:      "Cascadia Code", Consolas, "JetBrains Mono", monospace;
  color-scheme: dark;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font: 16px/1.5 var(--bx-font); color: var(--bx-text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(53,198,230,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(240,168,48,.08), transparent 60%),
    var(--bx-bg);
}
a { color: var(--bx-cyan-2); }
a:hover { color: #fff; }
code { font-family: var(--bx-mono); font-size: .9em; background: var(--bx-bg-2); padding: .1em .35em; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; letter-spacing: .01em; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1rem; }
small { font-size: .8em; }
.bx-muted, .eve-muted { color: var(--bx-muted); }
.bx-small, .eve-small { font-size: .85rem; }
.eve-ok  { color: var(--bx-ok); }
.eve-err { color: var(--bx-err); }
.eve-ok code, .eve-err code { color: inherit; background: rgba(255,255,255,.06); }

/* header, main, footer y la portada: ver /tools/theme.css */

/* ---- paneles ---- */
.bx-panel, .eve-card {
  background: var(--bx-panel); border: 1px solid var(--bx-line); border-radius: var(--bx-radius);
  padding: 1.1rem 1.3rem; margin: 1rem 0;
}
.bx-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: .9rem; }
.bx-panel__head p { margin: 0; }
.bx-tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .15rem .5rem; border-radius: 999px; background: rgba(240,168,48,.15); color: var(--bx-amber-2); border: 1px solid rgba(240,168,48,.4);
}
.bx-tag--cyan { background: rgba(53,198,230,.12); color: var(--bx-cyan-2); border-color: rgba(53,198,230,.4); }
.eve-card--cta   { border-left: 4px solid var(--bx-amber); }
.eve-card--ok    { border-left: 4px solid var(--bx-ok); }
.eve-card--error { border-left: 4px solid var(--bx-err); }
.eve-card h3 { font-size: .8rem; color: var(--bx-muted); text-transform: uppercase; letter-spacing: .1em; margin-top: 1rem; }
.eve-card__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.eve-card__head > div { flex: 1; min-width: 0; }
.eve-portrait { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--bx-amber); background: #000; flex: none; }

/* ---- formularios ---- */
.bx-form { display: grid; gap: 1rem; }
.bx-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem 1rem; }
.bx-field { display: grid; gap: .3rem; font-size: .85rem; color: var(--bx-muted); }
.bx-field > span { font-weight: 600; }
.bx-field--wide { grid-column: 1 / -1; }
.bx-field--check { grid-template-columns: auto 1fr; align-items: center; align-self: end; gap: .5rem; color: var(--bx-text); }
input[type="number"], input[type="text"], textarea, select {
  width: 100%; font: inherit; color: var(--bx-text);
  background: var(--bx-bg-2); border: 1px solid var(--bx-line-2); border-radius: 6px; padding: .5rem .65rem;
  font-variant-numeric: tabular-nums;
}
textarea { font-family: var(--bx-mono); font-size: .9rem; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--bx-cyan); outline-offset: 1px; border-color: var(--bx-cyan); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bx-amber); }
.bx-form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---- barras de resistencia ---- */
.bx-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.bx-res { padding: .7rem .8rem; border: 1px solid var(--bx-line); border-radius: 8px; background: var(--bx-bg-2); }
.bx-res.is-low { border-color: var(--bx-amber); box-shadow: 0 0 0 1px rgba(240,168,48,.35), 0 0 18px rgba(240,168,48,.12) inset; }
.bx-res__label { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.bx-bar { height: 10px; background: var(--bx-line); border-radius: 999px; overflow: hidden; }
.bx-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bx-cyan), var(--bx-cyan-2)); transition: width .25s ease; }
.bx-res[data-layer="em"]  .bx-bar__fill { background: linear-gradient(90deg, #4f8cff, #8fb5ff); }
.bx-res[data-layer="th"]  .bx-bar__fill { background: linear-gradient(90deg, #ff6a3d, #ffa07a); }
.bx-res[data-layer="kin"] .bx-bar__fill { background: linear-gradient(90deg, #a8b4c4, #e0e7ef); }
.bx-res[data-layer="ex"]  .bx-bar__fill { background: linear-gradient(90deg, #ffb13d, #ffd27a); }
.bx-res.is-low .bx-bar { box-shadow: 0 0 0 1px var(--bx-amber) inset; }
.bx-res__input { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .9rem; color: var(--bx-muted); }
.bx-res__input input { width: 6.5ch; padding: .3rem .4rem; text-align: right; }

/* ---- paso a paso ---- */
.bx-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: step; }
.bx-step {
  display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: start;
  padding: .9rem 1rem; border: 1px solid var(--bx-line); border-radius: 8px; background: var(--bx-bg-2);
  border-left-width: 4px; border-left-color: var(--bx-cyan);
}
.bx-step.is-ok   { border-left-color: var(--bx-ok); }
.bx-step.is-warn { border-left-color: var(--bx-warn); }
.bx-step__n {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  font-weight: 800; font-size: 1.1rem; color: var(--bx-bg); background: var(--bx-cyan);
}
.bx-step.is-ok .bx-step__n   { background: var(--bx-ok); }
.bx-step.is-warn .bx-step__n { background: var(--bx-warn); }
.bx-step__body h3 { font-size: .8rem; color: var(--bx-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .2rem; }
.bx-step__body p { margin: .15rem 0; }
.bx-step__value { font: 700 1.5rem/1.15 var(--bx-mono); font-variant-numeric: tabular-nums; color: var(--bx-text); }
.bx-step__value small { font: 600 .85rem/1 var(--bx-font); color: var(--bx-muted); margin-left: .25rem; }
.bx-step.is-ok .bx-step__value { color: var(--bx-ok); }
.bx-step.is-warn .bx-step__value { color: var(--bx-warn); }
.bx-vs { font-size: .9rem; color: var(--bx-muted); margin: 0 .5rem; font-weight: 500; }
.bx-formula { font-family: var(--bx-mono); font-size: .9rem; color: #c5cfdb; font-variant-numeric: tabular-nums; }

/* ---- tablas ---- */
.eve-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.eve-table th, .eve-table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--bx-line); }
.eve-table th { color: var(--bx-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.eve-table td:nth-child(n+2) { font-variant-numeric: tabular-nums; }
.eve-table tfoot td { border-bottom: 0; padding-top: .6rem; color: var(--bx-muted); }
.eve-table tfoot strong { color: var(--bx-amber-2); font-size: 1.05rem; }

/* ---- botón «Conectar con EVE» ---- */
.btn-eve {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.1rem; border-radius: 6px; cursor: pointer;
  background: linear-gradient(180deg, var(--bx-amber-2), var(--bx-amber));
  color: #1a1206; font: inherit; font-weight: 700; letter-spacing: .02em; text-decoration: none;
  border: 1px solid #c98a1f; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 14px rgba(240,168,48,.25);
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-eve:hover  { filter: brightness(1.06); color: #1a1206; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 18px rgba(240,168,48,.35); }
.btn-eve:active { transform: translateY(1px); }
.btn-eve:focus-visible { outline: 2px solid var(--bx-amber-2); outline-offset: 2px; }
.btn-eve--sm    { padding: .45rem .8rem; font-size: .9rem; }
.btn-eve--ghost { background: transparent; color: var(--bx-text); border-color: var(--bx-line-2); box-shadow: none; }
.btn-eve--ghost:hover { border-color: var(--bx-amber); color: var(--bx-amber-2); filter: none; }
.btn-eve__logo {           /* rombo-nave en CSS; no es el logo de EVE */
  width: 14px; height: 14px; flex: none; background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 50% 30%, 30% 50%, 50% 70%, 70% 50%, 50% 30%);
}

/* ---- chip del personaje (header) ---- */
.eve-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .6rem .25rem .3rem; border-radius: 999px;
  background: var(--bx-panel); border: 1px solid var(--bx-line-2); color: var(--bx-text); font-size: .9rem; line-height: 1;
}
.eve-chip__portrait { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bx-amber); background: #000; }
.eve-chip__name     { font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eve-chip__logout   { color: var(--bx-muted); text-decoration: none; font-size: .8rem; padding-left: .5rem; border-left: 1px solid var(--bx-line-2); }
.eve-chip__logout:hover { color: var(--bx-err); }

/* ---- panel ESI (skills) ---- */
.eve-stats { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .4rem 0 .2rem; }
.eve-stats dt { font-size: .75rem; color: var(--bx-muted); text-transform: uppercase; letter-spacing: .06em; }
.eve-stats dd { margin: 0; font: 700 1.3rem/1.2 var(--bx-mono); color: var(--bx-text); font-variant-numeric: tabular-nums; }
.eve-stats dd small { font-family: var(--bx-font); }
.eve-level { display: inline-flex; gap: 3px; vertical-align: middle; }
.eve-level::before, .eve-level::after { content: none; }
.eve-level i { width: 9px; height: 9px; background: var(--bx-line-2); border-radius: 1px; }
.eve-level[data-level="1"] i:nth-child(-n+1),
.eve-level[data-level="2"] i:nth-child(-n+2),
.eve-level[data-level="3"] i:nth-child(-n+3),
.eve-level[data-level="4"] i:nth-child(-n+4),
.eve-level[data-level="5"] i:nth-child(-n+5) { background: var(--bx-amber); }
.eve-queue { padding-left: 1.2rem; margin: .3rem 0; }
.eve-queue li { padding: .2rem 0; }

/* ---- sitios Sleeper: selector, lista, detalle ---- */
.bx-quick { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.bx-quick__label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bx-muted); min-width: 3.5rem; }
.bx-seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.bx-seg__btn {
  font: inherit; font-weight: 700; color: var(--bx-text); cursor: pointer;
  background: var(--bx-bg-2); border: 1px solid var(--bx-line-2); border-radius: 6px; padding: .4rem .85rem;
  transition: border-color .12s ease, background .12s ease;
}
.bx-seg__btn:hover { border-color: var(--bx-cyan); }
.bx-seg__btn.is-on { background: rgba(53,198,230,.16); border-color: var(--bx-cyan); color: var(--bx-cyan-2); box-shadow: 0 0 0 1px rgba(53,198,230,.3) inset; }
.bx-legend { margin-left: auto; display: flex; gap: .9rem; flex-wrap: wrap; font-size: .8rem; color: var(--bx-muted); }
.bx-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.bx-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; background: var(--bx-line-2); }
.bx-dot--trigger  { background: var(--bx-err); }
.bx-dot--optional { background: var(--bx-ok); }
.bx-dot--hack     { background: var(--bx-cyan); }
.bx-dot--despawn  { background: var(--bx-amber); }

.bx-site-list { display: grid; gap: .5rem; margin-top: .4rem; }
.bx-site {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--bx-text); background: var(--bx-bg-2); border: 1px solid var(--bx-line); border-radius: 8px; padding: .8rem 1rem;
  transition: border-color .12s ease, transform .08s ease;
}
.bx-site:hover { border-color: var(--bx-cyan); }
.bx-site.is-on { border-color: var(--bx-amber); box-shadow: 0 0 0 1px rgba(240,168,48,.3) inset; }
.bx-site__main { flex: 1; min-width: 0; }
.bx-site__title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.05rem; }
.bx-site__sub { color: var(--bx-muted); margin-top: .15rem; }
.bx-site__side { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.bx-site__arrow { color: var(--bx-muted); font-size: 1.1rem; }
.bx-hull { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; font-weight: 700; color: var(--bx-muted); background: var(--bx-panel); border: 1px solid var(--bx-line); border-radius: 999px; padding: .05rem .5rem .05rem .35rem; }
.bx-hull i, .bx-npc i, .bx-modal h3 i { font-style: normal; font-size: .75em; margin-right: .3rem; }
.bx-hull--frigate i, i.bx-hull--frigate       { color: var(--bx-cyan-2); }
.bx-hull--cruiser i, i.bx-hull--cruiser       { color: var(--bx-amber-2); }
.bx-hull--battleship i, i.bx-hull--battleship { color: var(--bx-err); }
.bx-hull--sentry i, i.bx-hull--sentry         { color: var(--bx-muted); }
.bx-peak { display: inline-block; font: 700 .85rem/1.3 var(--bx-mono); font-variant-numeric: tabular-nums; color: var(--bx-err); background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.45); border-radius: 4px; padding: .2rem .6rem; white-space: nowrap; }
.bx-peak--big { font-size: 1rem; padding: .35rem .9rem; }

.bx-chip { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em; border-radius: 4px; padding: .1rem .45rem; border: 1px solid var(--bx-line-2); color: var(--bx-muted); white-space: nowrap; margin: .1rem 0; }
.bx-chip--warp     { color: var(--bx-text); border-color: rgba(209,52,56,.6); background: rgba(209,52,56,.14); }
.bx-chip--web      { color: var(--bx-cyan-2); border-color: rgba(53,198,230,.5); background: rgba(53,198,230,.1); }
.bx-chip--neut     { color: var(--bx-amber-2); border-color: rgba(240,168,48,.5); background: rgba(240,168,48,.1); }
.bx-chip--rr       { color: var(--bx-ok); border-color: rgba(57,217,138,.5); background: rgba(57,217,138,.1); }
.bx-chip--trigger  { color: var(--bx-err); border-color: rgba(255,107,107,.5); background: rgba(255,107,107,.1); }
.bx-chip--optional { color: var(--bx-ok); border-color: rgba(57,217,138,.5); background: rgba(57,217,138,.1); }
.bx-chip--hack     { color: var(--bx-cyan-2); border-color: rgba(53,198,230,.5); background: rgba(53,198,230,.1); }
.bx-chip--despawn  { color: var(--bx-amber-2); border-color: rgba(240,168,48,.5); background: rgba(240,168,48,.1); }

.bx-site-detail { margin-top: .9rem; border-top: 1px solid var(--bx-line); padding-top: .9rem; }
.bx-site-detail__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.bx-site-detail__head > div { flex: 1; min-width: 0; }
.bx-site-detail__head p { margin: 0; }
.bx-wave { border: 1px solid var(--bx-line); border-radius: 8px; background: var(--bx-bg-2); margin: .6rem 0; overflow: hidden; }
.bx-wave.is-on { border-color: var(--bx-amber); }
.bx-wave__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .6rem .9rem; background: var(--bx-panel-2); border-bottom: 1px solid var(--bx-line); }
.bx-wave__head h3 { margin: 0; font-size: 1rem; }
.bx-wave__stats { display: flex; gap: .9rem; flex-wrap: wrap; flex: 1; font-size: .85rem; color: var(--bx-muted); }
.bx-wave__stats b { color: var(--bx-text); font-variant-numeric: tabular-nums; }
.bx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bx-wave-table { min-width: 760px; font-size: .9rem; }
.bx-wave-table td:nth-child(n+3):nth-child(-n+8) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bx-wave-table tr.is-trigger  td { background: rgba(255,92,92,.08); box-shadow: 3px 0 0 var(--bx-err) inset; }
.bx-wave-table tr.is-optional td { background: rgba(57,217,138,.07); box-shadow: 3px 0 0 var(--bx-ok) inset; }
.bx-wave-table tr.is-hack     td { background: rgba(53,198,230,.07); box-shadow: 3px 0 0 var(--bx-cyan) inset; }
.bx-wave-table tr.is-despawn  td { background: rgba(240,168,48,.08); box-shadow: 3px 0 0 var(--bx-amber) inset; }
.bx-wave-table tr.is-trigger td:first-child, .bx-wave-table tr.is-optional td:first-child, .bx-wave-table tr.is-hack td:first-child, .bx-wave-table tr.is-despawn td:first-child { padding-left: .8rem; }
.bx-npc { font: inherit; color: var(--bx-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted var(--bx-line-2); text-underline-offset: 3px; }
.bx-npc:hover { color: var(--bx-cyan-2); }
.bx-specials { display: flex; flex-wrap: wrap; gap: .25rem; }
.bx-notes { margin-top: .6rem; font-size: .9rem; color: var(--bx-muted); }
.bx-notes summary { cursor: pointer; color: var(--bx-cyan-2); }
.bx-notes ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.bx-sites__foot { margin-top: .8rem; }

/* plan por oleadas contra el fit */
.bx-plan { min-width: 720px; }
.bx-plan tr.is-ok  td:nth-child(4), .bx-plan tr.is-ok  td:last-child { color: var(--bx-ok); }
.bx-plan tr.is-warn td:last-child { color: var(--bx-amber-2); }
.bx-plan tr.is-bad td:nth-child(4), .bx-plan tr.is-bad td:last-child { color: var(--bx-err); }
.bx-plan tr.is-on td { background: rgba(240,168,48,.08); }

/* ficha de NPC (modal) */
.bx-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; }
.bx-modal[hidden] { display: none; }
.bx-modal__backdrop { position: absolute; inset: 0; background: rgba(3,6,10,.75); backdrop-filter: blur(3px); }
.bx-modal__card { position: relative; width: min(760px, 100%); max-height: 90vh; overflow: auto; background: var(--bx-panel); border: 1px solid var(--bx-line-2); border-radius: var(--bx-radius); padding: 1.2rem 1.3rem; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.bx-modal__close { position: absolute; top: .5rem; right: .6rem; font: inherit; font-size: 1.4rem; line-height: 1; color: var(--bx-muted); background: none; border: 0; cursor: pointer; }
.bx-modal__close:hover { color: var(--bx-text); }
.bx-modal__close { display: grid; place-items: center; }
.bx-modal__close .bx-ico { width: 20px; height: 20px; }
.bx-wave-calc { overflow-x: auto; }   /* sites.js repinta la tabla sin envoltorio */
.bx-wave-calc .eve-table { min-width: 520px; }
.bx-npc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem 1.2rem; margin-top: .6rem; }
.bx-npc-grid h4 { margin: 0 0 .3rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bx-muted); }
.bx-npc-grid dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; font-size: .9rem; }
.bx-npc-grid dt { color: var(--bx-muted); }
.bx-npc-grid dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .site-header { gap: .6rem; }
  .site-header nav { margin-left: 0; width: 100%; gap: .7rem; }
  .eve-chip__name { max-width: 9ch; }
  .eve-card__head { flex-wrap: wrap; }
  .bx-site { flex-wrap: wrap; gap: .5rem; }
  .bx-site__side { width: 100%; justify-content: flex-start; }
  .bx-legend { margin-left: 0; }
  .bx-quick__label { min-width: 0; }
  .bx-step { grid-template-columns: 36px 1fr; gap: .6rem; }
  .bx-step__n { width: 36px; height: 36px; font-size: 1rem; }
  .bx-step__value { font-size: 1.35rem; }
}

/* ---- panel Defensa (fit-panel.php) ---- */
.bx-def { margin-top: 1rem; border-top: 1px solid var(--bx-line); padding-top: .9rem; }
.bx-def__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.bx-def__head > div:first-child { flex: 1; min-width: 0; }
.bx-def__head p { margin: 0; }
.bx-def__total { display: grid; justify-items: end; line-height: 1; }
.bx-def__total-n { font: 700 2rem/1 var(--bx-mono); color: var(--bx-text); font-variant-numeric: tabular-nums; }
.bx-def__total small { color: var(--bx-muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.bx-def-table { min-width: 640px; }
.bx-def-table td:nth-child(2), .bx-def-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bx-def-table tr.is-tank td { background: rgba(240,168,48,.07); }
.bx-def-res { min-width: 5.5rem; }
.bx-def-res__n { display: block; font-weight: 700; font-family: var(--bx-mono); font-variant-numeric: tabular-nums; }
.bx-def-res__bar { display: block; height: 6px; margin-top: 3px; background: var(--bx-line); border-radius: 999px; overflow: hidden; }
.bx-def-res__bar i { display: block; height: 100%; background: var(--bx-cyan); }
.bx-def-res[data-layer="em"]  .bx-def-res__bar i { background: #6f9fff; }
.bx-def-res[data-layer="th"]  .bx-def-res__bar i { background: #ff7d55; }
.bx-def-res[data-layer="kin"] .bx-def-res__bar i { background: #c3ced9; }
.bx-def-res[data-layer="ex"]  .bx-def-res__bar i { background: #ffc252; }
.bx-def-res.is-low .bx-def-res__n { color: var(--bx-amber-2); }
.bx-def-res.is-low .bx-def-res__bar { box-shadow: 0 0 0 1px var(--bx-amber) inset; }
.bx-def__stats { margin-top: .8rem; }
select { width: 100%; font: inherit; color: var(--bx-text); background: var(--bx-bg-2); border: 1px solid var(--bx-line-2); border-radius: 6px; padding: .5rem .65rem; }

/* ---- compat: reglas del app.css anterior que siguen usando hub, minero y el formulario EFT ---- */
.lead { color: var(--bx-muted); font-size: 1.1rem; }
.small { font-size: .8rem; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.btn { display: inline-block; padding: 11px 18px; border-radius: 9px; font-weight: 700; text-decoration: none;
       border: 1px solid var(--bx-line); background: var(--bx-panel); color: var(--bx-text); cursor: pointer; font: inherit; }
.btn.yt  { background: #d13438; border-color: #d13438; color: #fff; }   /* rojo comunidad (Gestor, 2026-10-09) */
.btn.yt:hover, .btn.yt:focus-visible { background: #c8303a; border-color: #c8303a; color: #fff; }
.btn.acc { background: var(--bx-amber); border-color: var(--bx-amber); color: #111; }
.btn.acc:hover { background: var(--bx-amber-2); }
form > label, .row label { display: block; margin: 12px 0 4px; color: var(--bx-muted); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.row input { width: 100%; }
form > textarea { width: 100%; min-height: 200px; }
.note { background: #1a1609; border: 1px solid #4a3b12; border-radius: var(--bx-radius); padding: 12px 14px; color: #f0d58a; margin: 16px 0; }
.out { background: var(--bx-panel); border: 1px solid var(--bx-line); border-radius: var(--bx-radius); padding: 14px; margin: 16px 0; }
.out table { width: 100%; border-collapse: collapse; }
.out td, .out th { padding: 6px 8px; border-bottom: 1px solid var(--bx-line); text-align: left; }
.flash { background: #0f1f14; border: 1px solid #1f5a33; border-radius: var(--bx-radius); padding: 10px 14px; color: #9fe2b5; margin: 0 0 16px; }

/* ==========================================================================
   v2 (2026-10-09): modo básico/nerd, hub nuevo, veredicto y pulido general
   ========================================================================== */
html, body { overflow-x: clip; }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); letter-spacing: -.01em; }
.bx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bx-skip { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--bx-amber); color: #111; padding: .4rem .8rem; border-radius: 6px; }
.bx-skip:focus { left: .5rem; }
.bx-panel { border-radius: 14px; padding: 1.3rem 1.4rem; background: linear-gradient(180deg, rgba(22,32,45,.75), var(--bx-panel)); }
.bx-panel__head h2 { display: inline-flex; align-items: center; gap: .55rem; }
.btn-eve--lg { padding: .85rem 1.35rem; font-size: 1.05rem; border-radius: 8px; }

/* ---- modo: visibilidad ---- */
html.mode-basic .nerd-only { display: none !important; }
html.mode-nerd .basic-only { display: none !important; }

/* interruptor de modo: ver /tools/theme.css */

/* ---- número de paso (básico) ---- */
.bx-num {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: none;
  font: 800 .9rem/1 var(--bx-font); color: #1a1206; background: var(--bx-amber); box-shadow: 0 0 0 4px rgba(240,168,48,.15);
}
.bx-hint { margin: .2rem 0 .4rem; color: var(--bx-cyan-2); font-weight: 600; }
.bx-page-head { margin: .5rem 0 1.2rem; }
.bx-page-head .lead { margin: .3rem 0 0; max-width: 70ch; }

/* ---- flujo 1-2-3 (resistencias, básico) ---- */
.bx-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0 0 1.2rem; }
.bx-flow__step {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .8rem; align-items: center;
  padding: 1rem 1.1rem; border-radius: 14px; text-decoration: none; color: var(--bx-text);
  background: linear-gradient(180deg, var(--bx-panel-2), var(--bx-panel)); border: 1px solid var(--bx-line);
  transition: border-color .15s ease, transform .1s ease;
}
.bx-flow__step:hover { border-color: var(--bx-amber); color: var(--bx-text); transform: translateY(-2px); }
.bx-flow__step span { grid-row: 1 / 3; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-weight: 800; font-size: 1.1rem; color: #1a1206; background: var(--bx-amber); }
.bx-flow__step b { font-size: 1.05rem; }
.bx-flow__step small { color: var(--bx-muted); }
@media (max-width: 640px) { .bx-flow { grid-template-columns: 1fr; gap: .5rem; } .bx-flow__step { padding: .75rem .9rem; } }

/* ---- veredicto ---- */
/* panel HUD de esquinas cortadas (misma técnica que .bx-hud de theme.css; sites.js solo cambia is-ok/warn/bad) */
.bx-verdict {
  --v: var(--bx-cyan); --v-bg: rgba(209,52,56,.08); --cut: 16px;
  position: relative; isolation: isolate; margin: 1.2rem 0; padding: 1.3rem 1.4rem 1.3rem 1.6rem;
  background: var(--bx-line-2);
  background: color-mix(in srgb, var(--v) 55%, var(--bx-line-2));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  scroll-margin-top: 80px;
}
.bx-verdict::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: radial-gradient(600px 200px at 0% 0%, var(--v-bg), transparent 70%), var(--bx-panel);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.bx-verdict::after {   /* esquina + barra lateral con el color del estado */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cut) + 2px); pointer-events: none;
  background:
    linear-gradient(135deg, var(--v) 0 calc(50% - 1px), transparent calc(50% - 1px)) 0 0 / 100% calc(var(--cut) + 2px) no-repeat,
    linear-gradient(var(--v), var(--v)) 0 calc(var(--cut) + 8px) / 4px calc(100% - var(--cut) - 16px) no-repeat;
}
.bx-verdict.is-ok   { --v: var(--bx-ok);   --v-bg: rgba(60,207,142,.12); }
.bx-verdict.is-warn { --v: var(--bx-warn); --v-bg: rgba(242,177,60,.13); }
.bx-verdict.is-bad  { --v: var(--bx-err);  --v-bg: rgba(255,107,107,.12); }
.bx-verdict__kicker { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .3rem; font: 600 .7rem/1.2 var(--bx-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bx-muted); }
.bx-verdict__ex { font-family: var(--bx-font); letter-spacing: .02em; text-transform: none; font-weight: 600; font-size: .78rem; border: 1px solid; border-radius: 4px; padding: .2rem .55rem; }
.bx-verdict__ex[hidden] { display: none; }
.bx-verdict__title { margin: 0 0 .25rem; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: var(--v); letter-spacing: -.01em; }
.bx-verdict__line { margin: 0; font-size: 1.05rem; color: #cfd8e2; max-width: 75ch; }
.bx-verdict__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.1rem; }
.bx-verdict--plain .bx-verdict__nums { margin-top: 0; }
.bx-verdict__n { padding: .85rem 1rem; border-radius: 12px; background: rgba(7,11,16,.55); border: 1px solid var(--bx-line); }
.bx-verdict__n b { display: block; font: 700 clamp(1.35rem, 3vw, 1.8rem)/1.1 var(--bx-mono); color: var(--bx-text); font-variant-numeric: tabular-nums; }
.bx-verdict__n b i { font-family: var(--bx-font); }
.bx-verdict__n b i { font-style: normal; font-size: .55em; font-weight: 600; color: var(--bx-muted); }
.bx-verdict__n small { display: block; margin-top: .25rem; color: var(--bx-muted); font-size: .82rem; }
.bx-verdict__neut { margin: .9rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: rgba(240,168,48,.1); border: 1px solid rgba(240,168,48,.35); color: var(--bx-amber-2); font-weight: 600; }
.bx-verdict__neut[hidden] { display: none; }
.bx-verdict__src { margin: .8rem 0 0; font-size: .82rem; color: var(--bx-muted); }
@media (max-width: 640px) {
  .bx-verdict { padding: 1.05rem 1rem; }
  .bx-verdict__nums { grid-template-columns: 1fr; gap: .5rem; }
  .bx-verdict__n { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .65rem .85rem; }
  .bx-verdict__n small { margin: 0; text-align: right; }
}

/* ---- básico: inputs más cómodos ---- */
html.mode-basic .bx-res__input input { width: 7ch; }
html.mode-basic .bx-site { padding: 1rem 1.1rem; }

/* portada (hero, tiles, academia, comunidad): ver /tools/theme.css */
@keyframes bx-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .bx-wave__head { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .bx-wave__stats { gap: .3rem .8rem; }
}
.bx-verdict__n b { white-space: nowrap; }
.bx-verdict__copy { margin: 0; font-size: 1.1rem; color: #e1e8ef; max-width: 75ch; }
.bx-verdict__n b i.basic-only { font-size: .5em; color: var(--bx-muted); }
.bx-verdict__ex { white-space: normal; }

/* ---------- Iconos SVG de trazo (src/Icon.php · Lucide ISC / Simple Icons CC0) ----------
   Sustituyen a los emoji usados como iconos. currentColor + stroke 1.75; el tamaño lo fija el contexto. */
.bx-ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; overflow: visible; }
h1 > .bx-ico, h2 > .bx-ico { color: var(--bx-amber-2); margin-right: .1em; }
.btn-eve .bx-ico { width: 18px; height: 18px; vertical-align: middle; }
.btn-eve--sm .bx-ico { width: 16px; height: 16px; }
.flash .bx-ico { color: #5fd38a; margin-right: .2em; }
.bx-doctrine .bx-ico { width: 1em; height: 1em; vertical-align: -.12em; }
.bx-verdict__title .bx-ico { width: .95em; height: .95em; vertical-align: -.1em; }
.bx-verdict.is-ok .bx-verdict__title .bx-ico { color: #5fd38a; }
.bx-verdict.is-warn .bx-verdict__title .bx-ico { color: var(--bx-amber-2); }
.bx-verdict.is-bad .bx-verdict__title .bx-ico { color: #ff6b6b; }
.bx-verdict__neut .bx-ico, .eve-err .bx-ico { color: var(--bx-amber-2); }
.bx-seg__btn .bx-ico { width: 16px; height: 16px; vertical-align: -.2em; margin-right: .15em; }