h1,h2{font-family:"Archivo",system-ui,sans-serif;text-wrap:balance;line-height:1.15}
h1{font-size:clamp(1.9rem,5vw,2.8rem);font-weight:900;margin:.3em 0 .2em}
h2{font-size:1.35rem;font-weight:700;margin:0 0 .5em}
p{max-width:62ch}
.eyebrow{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-top:40px}
.lead{font-size:1.12rem;color:var(--muted)}
.lead strong{color:var(--fg)}
section{margin-top:44px}
.step{display:flex;gap:10px;align-items:baseline}
.step .num{font-family:"JetBrains Mono",monospace;color:var(--accent);font-weight:700}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;margin-top:14px}
.controls{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-bottom:14px}
.controls label{font-weight:600;font-size:.92rem}
.controls #th{width:min(180px,40vw)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{
  font-family:"JetBrains Mono",monospace;font-size:.9rem;padding:7px 13px;border:0;cursor:pointer;
  background:transparent;color:var(--muted);
}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--bg);font-weight:700}
input[type=range]{accent-color:var(--accent);width:min(260px,60vw)}
.mono{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.chip{
  display:inline-flex;min-width:1.7em;height:1.7em;align-items:center;justify-content:center;
  border-radius:6px;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.9rem;
}
.chip.b1{background:var(--bit1-bg);color:var(--bit1)}
.chip.b0{background:var(--bit0-bg);color:var(--bit0)}
/* ---- demo 1: eje ---- */
.axis-wrap{overflow:visible}
.readout{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.readout .card{border:1px solid var(--line);border-radius:8px;padding:10px 14px;flex:1 1 180px;min-width:0}
.readout .card .k{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.readout .card .v{font-size:1.25rem;font-weight:700;margin-top:2px}
/* ---- demo 2: tabla ---- */
.tbl-scroll{overflow-x:auto}
#tbl tr[data-idx]{cursor:pointer}
#tbl tr.sel td{background:var(--accent-soft)}
@media (prefers-reduced-motion:no-preference){ #neuron .out{animation:pop .25s ease} }
@keyframes pop{from{opacity:.25}to{opacity:1}}
table{border-collapse:collapse;width:100%;min-width:560px}
th,td{padding:7px 8px;text-align:center;border-bottom:1px solid var(--line);font-size:.92rem}
th{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
td:first-child,th:first-child{text-align:left}
.cls{font-weight:600}
.cls.benigna{color:var(--benigna)} .cls.maligna{color:var(--maligna)}
.sum{font-family:"JetBrains Mono",monospace;font-weight:700}
.pred{border-radius:6px;padding:2px 8px;font-size:.85rem;font-weight:700;display:inline-block}
.pred.ok{background:var(--ok-bg);color:var(--ok)} .pred.bad{background:var(--bad-bg);color:var(--bad)}
.scorebar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.acc{
  font-family:"Archivo",sans-serif;font-weight:900;font-size:2rem;
  padding:4px 16px;border-radius:10px;background:var(--accent-soft);color:var(--accent);
}
.verdict{flex:1 1 260px;min-width:0;font-size:.98rem}
.callout{border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0;padding:14px 16px;margin-top:18px}
.callout strong{color:var(--accent)}
/* ---- cierre ---- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:14px}
.grid2 .panel{margin-top:0}
.grid2 h3{font-family:"Archivo",sans-serif;font-size:1.02rem;margin:0 0 6px}
.grid2 p{font-size:.95rem;margin:.3em 0;color:var(--muted)}
.grid2 p b{color:var(--fg)}
footer{margin-top:52px;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
@media (prefers-reduced-motion:no-preference){
  .marker{transition:transform .12s ease-out}
}

:root{color-scheme:light;--fg:#163858;--muted:#526984;--line:#cbd9ea;--bg:#f3f7fc;--panel:#fff;--accent:#245fae;--accent-soft:#e3edf9;--bit1:#245fae;--bit1-bg:#d1e8ff;--bit0:#9a570e;--bit0-bg:#fdeeda;--ok:#166534;--ok-bg:#e3f4e8;--bad:#a42323;--bad-bg:#fdeaea;--benigna:#245fae;--maligna:#ad471d}
body.theme-learning{padding:0;margin:0;background:#f3f7fc;color:#163858;font:17px/1.6 Arial,system-ui,sans-serif}
.bin-page{max-width:1040px;margin:auto;padding:28px 24px 64px;box-sizing:border-box}
.bin-page *{box-sizing:border-box}.bin-page h1,.bin-page h2,.bin-page h3{font-family:Georgia,serif;color:var(--fg)}
.bin-page h1{font-size:clamp(36px,5vw,60px);font-weight:400;line-height:1.07;max-width:800px;margin:16px 0}.bin-page h2{font-size:27px;font-weight:400}
.bin-page p{max-width:72ch}.bin-page .eyebrow{margin-top:28px;font:700 12px Arial,sans-serif;letter-spacing:.13em}.bin-page .breadcrumb{font-size:13px;color:var(--muted)}
.bin-page .lead{font-size:19px}.bin-page .panel{border-radius:16px;padding:24px}.bin-page section{margin-top:44px}.bin-page .step .num{background:var(--accent);color:white;border-radius:50%;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.bin-page .mono,.bin-page .chip{font-family:ui-monospace,Consolas,monospace}.bin-page button{min-height:44px}.bin-page button:focus-visible,.bin-page input:focus-visible,.bin-page a:focus-visible,.bin-page .tbl-scroll:focus-visible{outline:3px solid #245fae;outline-offset:3px}
.bin-page .seg button[aria-pressed=true]{color:#fff}.bin-page input[type=range]{min-height:40px}.bin-page .tbl-scroll{max-width:100%}.bin-page table{min-width:850px}.bin-page table button{background:none;border:0;color:var(--accent);font:inherit;font-weight:bold;text-decoration:underline;cursor:pointer}
.bin-page .diagram-scroll{overflow-x:auto}.bin-page #neuron{display:block;min-width:620px}.bin-page svg{height:auto}.bin-page .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.bin-page .acc{font-family:Georgia,serif}.bin-page .resource-meta{font-size:13px;color:var(--muted)}
@media(max-width:600px){.bin-page{padding:22px 16px 48px}.bin-page .panel{padding:16px}.bin-page .grid2{grid-template-columns:1fr}.bin-page .controls{gap:10px}.bin-page h2{font-size:23px}.bin-page .lead{font-size:17px}}

.bin-page { max-width: 1440px; }
.bin-page .bin-intro { padding: 18px 0 16px; }
.bin-page .bin-intro .eyebrow { margin: 0 0 12px; }
.bin-page .bin-intro h1 {
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -.025em;
  margin: 0 0 14px;
}
.bin-intro h1 em { color: var(--accent); }
.bin-page .bin-intro .lead { font-size: 17px; margin: 0; }
.bin-page .bin-intro .resource-meta { margin: 8px 0 0; }

.bin-lab [hidden] { display: none; }
.bin-board-launch,
.bin-step-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.bin-board-launch { margin-bottom: 12px; }
.bin-board-launch span { color: var(--muted); font-size: 13px; }
.bin-step-nav {
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.bin-lab-label { color: var(--accent); font-size: 13px; font-weight: 700; }
.bin-step-count {
  margin-right: auto;
  padding: 4px 9px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.bin-board-launch button,
.bin-step-nav button {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--accent);
  cursor: pointer;
  font: 600 14px/1.3 Arial, sans-serif;
}
.bin-step-nav [data-bin-next]:enabled {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}
.bin-step-nav button:disabled { color: var(--muted); cursor: default; }
.bin-progress {
  display: block;
  width: 100%;
  height: 4px;
  margin: 12px 0 16px;
  border: 0;
  border-radius: 4px;
  background: var(--accent-soft);
  accent-color: var(--accent);
}
.bin-progress::-webkit-progress-bar { background: var(--accent-soft); }
.bin-progress::-webkit-progress-value { background: var(--accent); }

.bin-page .bin-board-content { margin-top: 16px; }
.bin-board-content h2 { scroll-margin-top: 175px; }
.bin-page .bin-board-guide {
  max-width: none;
  padding: 10px 14px;
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--accent-soft);
}
.bin-reading { margin-top: 14px; color: var(--muted); }
.bin-reading summary { cursor: pointer; color: var(--accent); }
.bin-lab #axis { display: block; max-height: 120px; }

html.bin-board-open { overflow: hidden; }
.bin-page .bin-board {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: var(--bg);
  color: var(--fg);
  overflow: auto;
}
.bin-board::backdrop { background: var(--bg); }
.bin-board .bin-lab { max-width: 1440px; margin: 0 auto; }
.bin-board .bin-lab-head {
  position: sticky;
  top: -16px;
  z-index: 1;
  padding: 10px 0 1px;
  background: var(--bg);
}
@media (min-width: 1000px) {
  .bin-lab #bin-board-content-2 > .panel {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
    gap: 12px 24px;
  }

  .bin-lab #bin-board-content-2 .controls,
  .bin-lab #bin-board-content-2 .scorebar {
    grid-column: 1 / -1;
    margin: 0;
  }

  .bin-lab #bin-board-content-2 .scorebar {
    grid-row: 2;
  }

  .bin-lab #bin-board-content-2 > .panel > p:first-of-type {
    grid-column: 1;
    grid-row: 3;
  }

  .bin-lab #bin-board-content-2 .diagram-scroll {
    grid-column: 1;
    grid-row: 4;
  }

  .bin-lab #bin-board-content-2 > .panel > .note {
    grid-column: 1;
    grid-row: 5;
    margin: 0;
  }

  .bin-lab #bin-board-content-2 .tbl-scroll {
    grid-column: 2;
    grid-row: 3 / 6;
  }

  .bin-lab #bin-board-content-2 #neuron {
    min-width: 0;
  }

  .bin-lab #bin-board-content-2 #tbl {
    min-width: 660px;
  }

  .bin-lab #bin-board-content-2 th,
  .bin-lab #bin-board-content-2 td {
    padding: 5px;
    font-size: 13px;
  }

  .bin-lab #bin-board-content-2 table button {
    min-height: 34px;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .bin-step-nav button {
    padding-inline: 8px;
    font-size: .9rem;
  }

  .bin-lab #axis text {
    font-size: 23px;
  }

  .bin-lab .readout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bin-lab .readout .card:first-child {
    grid-column: 1 / -1;
  }

  .bin-lab #bin-board-content-2 .controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .bin-lab #bin-board-content-2 .controls > :first-child,
  .bin-lab #bin-board-content-2 .controls > :last-child,
  .bin-lab #bin-board-content-2 .seg {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .bin-lab .controls #th {
    width: 100%;
  }
}