:root {
      --bg: #f4f3ef;
      --paper: #ffffff;
      --ink: #111111;
      --muted: #5e5e5e;
      --line: #d8d6ce;
      --black: #050505;
      --soft: #eeeeea;
      --ok: #0f6b35;
      --bad: #9d1c1c;
      --warn: #8a6500;
      --blue: #163c70;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: Inter, Helvetica, Arial, sans-serif;
      line-height: 1.45;
      scroll-behavior: smooth;
    }

    body { min-height: 100vh; overflow-y: auto; }

    .shell {
      width: min(1320px, calc(100vw - 34px));
      margin: 0 auto;
      padding: 30px 0 56px;
    }

    header {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 28px;
      align-items: end;
      padding: 24px 0 22px;
      border-bottom: 2px solid var(--ink);
      margin-bottom: 20px;
    }

    .kicker {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      margin-bottom: 10px;
      color: var(--muted);
    }

    h1 {
      margin: 0;
      font-size: clamp(38px, 5.8vw, 74px);
      line-height: 0.92;
      letter-spacing: -0.055em;
      font-weight: 850;
    }

    .header-note {
      color: var(--muted);
      font-size: 13px;
      max-width: 410px;
      justify-self: end;
    }

    .layout {
      display: grid;
      grid-template-columns: 430px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .left-col {
      position: sticky;
      top: 14px;
      max-height: calc(100vh - 28px);
      overflow-y: auto;
      padding-right: 4px;
    }

    .panel {
      background: var(--paper);
      border: 1px solid var(--line);
      padding: 16px;
      margin-bottom: 14px;
      box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    }

    .panel.black {
      background: var(--black);
      color: #fff;
      border-color: var(--black);
    }

    .panel h2 {
      margin: 0 0 14px;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    label {
      display: block;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 13px 0 6px;
    }

    input, select, textarea, button {
      font: inherit;
    }

    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      padding: 9px 10px;
      outline: none;
      border-radius: 0;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--ink);
      box-shadow: inset 0 -2px 0 var(--ink);
    }

    textarea {
      resize: vertical;
      min-height: 160px;
    }

    .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .row-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }

    .checkbox-line {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      margin-top: 10px;
      font-size: 12px;
      color: var(--muted);
    }

    .checkbox-line input { width: auto; margin-top: 2px; }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 15px;
    }

    button {
      border: 1px solid var(--black);
      background: var(--black);
      color: #fff;
      padding: 9px 12px;
      cursor: pointer;
      border-radius: 0;
      font-weight: 760;
      font-size: 13px;
    }

    button.secondary {
      background: transparent;
      color: var(--ink);
    }

    button.ghost {
      background: transparent;
      color: #fff;
      border-color: #fff;
    }

    button:disabled {
      opacity: 0.45;
      cursor: wait;
    }

    .small {
      font-size: 12px;
      color: var(--muted);
    }

    .black .small { color: #c9c9c9; }

    .status {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 9px 10px;
      background: var(--soft);
      border: 1px solid var(--line);
      font-size: 13px;
      margin-top: 12px;
      min-height: 38px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--warn);
      flex: 0 0 auto;
    }

    .dot.ok { background: var(--ok); }
    .dot.bad { background: var(--bad); }

    .output {
      white-space: pre-wrap;
      background: #fff;
      border: 1px solid var(--line);
      padding: 16px;
      min-height: 360px;
      max-height: none;
      overflow-y: auto;
      font-size: 14px;
      line-height: 1.52;
    }

    .trace {
      display: grid;
      gap: 8px;
      margin-bottom: 10px;
    }

    .trace-item {
      display: grid;
      grid-template-columns: 138px 1fr;
      border-bottom: 1px solid rgba(255,255,255,0.22);
      padding: 8px 0;
      font-size: 13px;
    }

    .trace-key {
      color: #bdbdbd;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 10px;
      font-weight: 800;
    }

    .pillbox {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .pill {
      border: 1px solid var(--line);
      background: var(--soft);
      padding: 3px 7px;
      font-size: 12px;
    }

    .black .pill {
      background: #222;
      color: #fff;
      border-color: #555;
    }

    .error-box {
      border: 1px solid var(--bad);
      color: var(--bad);
      background: #fff7f7;
      padding: 12px;
      white-space: pre-wrap;
      margin-top: 12px;
      display: none;
      font-size: 13px;
    }

    .model-tools {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: end;
    }

    #modelSelect, #compareModels {
      font-size: 12px;
    }

    #compareModels {
      min-height: 185px;
      overflow-y: auto;
    }

    .model-list-note {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 6px;
      font-size: 11px;
      color: var(--muted);
    }

    .cost-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .cost-card {
      border: 1px solid var(--line);
      background: #fff;
      padding: 10px;
      min-height: 78px;
    }

    .cost-card .label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      font-weight: 800;
    }

    .cost-card .value {
      font-size: 18px;
      font-weight: 820;
      margin-top: 5px;
      letter-spacing: -0.03em;
    }

    .cost-card .sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 3px;
    }

    .compare-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 12px;
    }

    .result-card {
      background: #fff;
      border: 1px solid var(--line);
      min-height: 220px;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
    }

    .result-head {
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }

    .result-title {
      font-weight: 820;
      letter-spacing: -0.02em;
      font-size: 14px;
    }

    .result-price {
      font-size: 11px;
      color: var(--muted);
      text-align: right;
      white-space: nowrap;
    }

    .result-meta {
      padding: 8px 14px;
      border-bottom: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 11px;
      color: var(--muted);
    }

    .result-body {
      padding: 14px;
      max-height: 460px;
      overflow-y: auto;
      white-space: pre-wrap;
      font-size: 13px;
      line-height: 1.48;
    }

    .warning {
      color: var(--warn);
      font-weight: 700;
    }

    .bad-text { color: var(--bad); }
    .ok-text { color: var(--ok); }


    .compact-textarea {
      min-height: 96px;
      max-height: 180px;
      overflow-y: auto;
      font-size: 12px;
      line-height: 1.4;
    }

    .character-summary {
      margin-top: 12px;
      border: 1px solid var(--line);
      background: #fff;
      padding: 10px;
      max-height: 220px;
      overflow-y: auto;
      font-size: 12px;
    }

    .character-name {
      font-size: 16px;
      font-weight: 840;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }

    .character-field {
      border-top: 1px solid var(--line);
      padding-top: 7px;
      margin-top: 7px;
    }

    .character-field strong {
      display: block;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 3px;
    }

    .character-privado-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
      font-size: 11px;
      color: var(--muted);
      cursor: pointer;
    }

    .character-privado-toggle input { cursor: pointer; }

    @media (max-width: 980px) {
      header, .layout, .row, .row-3 { grid-template-columns: 1fr; }
      .left-col { position: static; max-height: none; overflow: visible; padding-right: 0; }
      .header-note { justify-self: start; }
      h1 { font-size: 42px; }
      .cost-grid { grid-template-columns: 1fr 1fr; }
    }


    /* Split-screen live matrix edition */
    body { overflow: hidden; }
    .shell {
      width: min(1720px, calc(100vw - 24px));
      height: 100vh;
      padding: 14px 0 14px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 12px;
    }
    header {
      grid-template-columns: 1fr 1fr;
      margin-bottom: 0;
      padding: 14px 0 16px;
      flex-shrink: 0;
    }
    h1 { font-size: clamp(32px, 4.2vw, 58px); }
    .header-note { font-size: 12px; max-width: 560px; }
    .workbench {
      min-height: 0;
      display: grid;
      grid-template-columns: 300px minmax(680px, 1.4fr) 360px;
      gap: 14px;
      align-items: stretch;
    }
    .left-col, .matrix-col, .chat-col {
      min-height: 0;
      height: 100%;
      overflow-y: auto;
      padding-right: 4px;
    }
    .left-col { position: static; max-height: none; }
    .chat-col {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto minmax(110px, 20vh);
      gap: 10px;
      overflow: hidden;
    }
    .chat-panel {
      min-height: 0;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      overflow: hidden;
      margin-bottom: 0;
    }
    .sesiones-bar {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .sesiones-bar select { flex: 1 1 160px; min-width: 120px; }
    .sesiones-bar button { flex: 0 0 auto; padding: 4px 10px; font-size: 11px; }
    .chat-shell {
      min-height: 0;
      overflow-y: auto;
      padding: 18px;
      background: #f9f8f3;
      border: 1px solid var(--line);
    }
    .chat-empty {
      color: var(--muted);
      font-size: 14px;
      padding: 28px 8px;
      text-align: center;
    }
    .chat-checklist {
      max-width: 430px;
      margin: 0 auto;
      text-align: left;
      font-size: 13px;
    }
    .chat-checklist-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .14em;
      margin-bottom: 12px;
      text-align: center;
    }
    .chat-check {
      display: flex;
      gap: 10px;
      align-items: baseline;
      padding: 6px 0;
      border-bottom: 1px dashed var(--line);
    }
    .chat-check:last-child { border-bottom: none; }
    .chat-check .mark { font-weight: 800; }
    .chat-check.done { opacity: .55; }
    .chat-check.done .mark { color: var(--ok); }
    .bubble {
      max-width: 96%;
      margin: 0 0 14px;
      padding: 15px 16px;
      border: 1px solid var(--line);
      background: #fff;
      font-size: 14.5px;
      line-height: 1.55;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .bubble.user {
      margin-left: auto;
      background: #111;
      color: white;
      border-color: #111;
    }
    .bubble.assistant {
      margin-right: auto;
      max-width: 100%;
    }
    .bubble.system {
      max-width: 100%;
      background: #eeede7;
      color: #333;
      font-size: 12px;
    }
    .bubble-meta {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #777;
      margin-bottom: 6px;
    }
    .bubble.user .bubble-meta { color: #ccc; }

    /* Marco detectado del turno: mismo código de color que la matriz y el
       informe, para que la lectura sea consistente entre instrumentos. */
    .bubble-chip {
      display: inline-block;
      background: #0d0d0d;
      border-radius: 3px;
      padding: 1px 7px;
      margin-left: 8px;
      font-size: 9px;
      letter-spacing: .08em;
      font-weight: 700;
      vertical-align: middle;
    }
    .bubble-chip.sec { opacity: .65; margin-left: 4px; font-weight: 500; }
    .composer-panel textarea {
      min-height: 122px;
      max-height: 220px;
      resize: vertical;
    }
    .matrix-card {
      height: auto;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: var(--black);
      color: white;
      border: 0;
    }
    .matrix-card h2 { color: white; }
    .matrix-card .small { color: #b9b9b9; }
    .matrix-live-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .matrix-meter {
      border: 1px solid #333;
      padding: 10px;
      background: #111;
    }
    .matrix-meter .label {
      color: #aaa;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .matrix-meter .value {
      margin-top: 5px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.05;
    }
    .transposition-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .trans-node {
      border: 1px solid #2e2e2e;
      background: #101010;
      color: #c4c4c4;
      padding: 7px 8px;
      min-height: 44px;
      transition: all .18s ease;
    }
    .trans-node .num {
      display: inline-block;
      font-size: 9px;
      color: #555;
      width: 22px;
    }
    .trans-node .name {
      font-size: 12px;
      font-weight: 700;
    }
    .trans-node .type {
      display: block;
      margin-top: 2px;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #9a9a9a;
    }
    .trans-node.active {
      background: white;
      color: #050505;
      border-color: white;
      transform: translateX(-2px);
    }
    .trans-node.active .num,
    .trans-node.active .type { color: #555; }
    .trans-node.pulse {
      outline: 2px solid white;
      outline-offset: 2px;
    }

    /* Accesibilidad: respeta a quien pidió menos movimiento en su sistema.
       Anula transiciones y animaciones sin tocar el diseño estático. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }
    .matrix-log {
      min-height: 0;
      max-height: 200px;
      overflow-y: auto;
      border-top: 1px solid #333;
      padding-top: 10px;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 11px;
      color: #d8d8d8;
      white-space: pre-wrap;
    }
    .matrix-log-line {
      border-bottom: 1px solid #1c1c1c;
      padding: 5px 0;
    }
    .trace { max-height: 230px; overflow-y: auto; }
    .trace-item { background: #101010; border-color: #2c2c2c; }
    .pill { background: #fff; color: #111; border-color: #fff; }
    .compact-panel .panel { padding: 14px; }
    .cost-grid.compact { grid-template-columns: 1fr 1fr; gap: 8px; }
    .cost-grid.compact .cost-card { padding: 9px; }
    .cost-grid.compact .value { font-size: 17px; }
    .compare-grid { max-height: 100%; overflow-y: auto; }
    .chat-col > .panel:last-child { min-height: 0; overflow: hidden; margin-bottom: 0; }
    .chat-col > .panel:last-child .compare-grid { height: calc(100% - 34px); }
    .result-body { max-height: 210px; }
    .context-note {
      margin-top: 8px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      background: #fafafa;
      font-size: 11px;
      color: var(--muted);
    }
    @media (max-width: 1200px) {
      body { overflow-y: auto; }
      .shell { height: auto; display: block; }
      .workbench { grid-template-columns: 1fr; }
      .left-col, .matrix-col, .chat-col { height: auto; overflow: visible; }
      .chat-col { display: block; }
      .chat-panel { height: 68vh; margin-bottom: 12px; }
      .matrix-card { height: auto; }
    }


    /* Wide chat correction: real app layout, minimal header, large conversation frame */
    html, body { height: 100%; }
    body { overflow: hidden; }

    .shell {
      width: min(1760px, calc(100vw - 18px));
      height: 100vh;
      padding: 8px 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 8px;
    }

    header {
      min-height: 56px;
      grid-template-columns: minmax(260px, auto) minmax(320px, 1fr);
      gap: 18px;
      align-items: center;
      padding: 6px 0 8px;
      margin: 0;
      border-bottom: 2px solid var(--ink);
    }

    .kicker {
      margin: 0 0 2px;
      font-size: 9.5px;
      letter-spacing: 0.18em;
      line-height: 1.05;
    }

    h1 {
      font-size: clamp(25px, 2.2vw, 34px) ;
      line-height: 0.96;
      letter-spacing: -0.055em;
      white-space: nowrap;
    }

    h1 br { display: none; }

    .header-note {
      justify-self: end;
      max-width: 660px;
      font-size: 11.5px;
      line-height: 1.25;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .workbench {
      min-height: 0;
      height: 100%;
      grid-template-columns: 292px minmax(720px, 1fr) 340px;
      gap: 10px;
      align-items: stretch;
    }

    .left-col, .matrix-col, .chat-col {
      height: 100%;
      min-height: 0;
      overflow-y: auto;
    }

    .panel {
      padding: 14px;
      margin-bottom: 10px;
    }

    .panel h2 {
      margin-bottom: 10px;
      font-size: 13px;
    }

    .chat-col {
      display: block;
      overflow-y: auto;
    }

    .chat-panel {
      min-height: 0;
      height: auto;
      margin: 0 0 10px;
      display: block;
      overflow: visible;
    }

    .chat-shell.output {
      min-height: 300px;
      height: 58vh;
      max-height: 58vh;
      overflow-y: auto;
      padding: 18px 20px;
      font-size: 15px;
      line-height: 1.58;
    }

    .bubble {
      max-width: 92%;
      font-size: 15px;
      line-height: 1.58;
      padding: 15px 17px;
      margin-bottom: 15px;
    }

    .bubble.assistant { max-width: 96%; }
    .bubble.user { max-width: 82%; }

    .composer-panel {
      margin: 0;
      padding: 14px 16px;
    }

    .composer-panel textarea {
      min-height: 118px;
      max-height: 160px;
      resize: vertical;
      font-size: 14.5px;
      line-height: 1.45;
    }

    .composer-panel .button-row {
      margin-top: 10px;
    }

    .compare-panel {
      min-height: 0;
      max-height: 44px;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    .compare-panel[open] {
      max-height: min(42vh, 330px);
      overflow: hidden;
      padding: 0 14px 14px;
    }

    .compare-panel summary {
      list-style: none;
      cursor: pointer;
      padding: 12px 14px;
      font-size: 13px;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      border-bottom: 1px solid var(--line);
    }

    .compare-panel summary::-webkit-details-marker { display: none; }
    .compare-panel summary span {
      float: right;
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.08em;
      font-weight: 700;
    }

    .compare-panel .compare-grid {
      height: calc(min(42vh, 330px) - 60px);
      max-height: none;
      overflow-y: auto;
      padding-top: 12px;
    }

    .result-body { max-height: 230px; }

    /* ── Dossier de palabra ── */
    .dossier-panel { min-height: 0; max-height: 44px; overflow: hidden; margin: 0; padding: 0; }
    .dossier-panel[open] { max-height: min(52vh, 460px); overflow: hidden; padding: 0 14px 14px; }
    .dossier-panel summary {
      list-style: none; cursor: pointer; padding: 12px 14px; font-size: 13px; font-weight: 820;
      text-transform: uppercase; letter-spacing: 0.12em; border-bottom: 1px solid var(--line);
    }
    .dossier-panel summary::-webkit-details-marker { display: none; }
    .dossier-panel summary span { float: right; font-size: 10px; color: var(--muted); letter-spacing: 0.08em; font-weight: 700; }
    .dossier-search { display: flex; gap: 8px; padding: 12px 0 10px; }
    .dossier-search input {
      flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
      background: var(--paper); color: var(--ink); font-size: 13px;
    }
    .dossier-search input:focus { outline: none; border-color: var(--blue); }
    .dossier-body { height: calc(min(52vh, 460px) - 110px); overflow-y: auto; font-size: 13px; }
    .dos-sec { border-top: 1px solid var(--line); padding: 10px 0; }
    .dos-sec:first-child { border-top: none; }
    .dos-h { font-size: 10px; font-weight: 820; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; }
    .dos-word { font-size: 16px; font-weight: 820; }
    .dos-sub { font-size: 11px; color: var(--muted); }
    .dos-chip {
      display: inline-block; cursor: pointer; padding: 2px 8px; margin: 2px 4px 2px 0;
      border: 1px solid var(--line); border-radius: 999px; background: var(--soft); font-size: 12px;
    }
    .dos-chip:hover { border-color: var(--blue); background: var(--paper); }
    .dos-chip.raiz { background: #eef3fb; border-color: #c4d4ec; }
    .dos-frame { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; margin-right: 4px; }
    .dos-framedef { font-size: 11px; color: var(--muted); margin: 2px 0 8px; }
    .dos-time { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
    .dos-tick {
      min-width: 26px; text-align: center; padding: 3px 2px; border-radius: 4px;
      font-size: 9px; font-weight: 700; color: #fff;
    }
    .dos-arrow { color: var(--muted); font-size: 11px; }
    .dos-tag { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; margin-right: 5px; }
    .dos-tag.inv { background: #e3f3ea; color: var(--ok); }
    .dos-tag.hom { background: #fbe6e6; color: var(--bad); }
    .dos-tag.per { background: #f4ecd9; color: var(--warn); }
    .dos-link { cursor: pointer; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
    .dos-empty { color: var(--muted); font-style: italic; }

    .matrix-card {
      height: 100%;
      margin: 0;
      padding: 14px;
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
      gap: 10px;
    }

    .matrix-meter { padding: 8px; }
    .matrix-meter .value { font-size: 16px; }
    .trace { max-height: 132px; }
    .trace-item { grid-template-columns: 112px 1fr; padding: 6px 0; font-size: 12px; }

    .transposition-grid {
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      overflow-y: auto;
      padding-right: 2px;
      min-height: 0;
    }

    .trans-node {
      min-height: 38px;
      padding: 6px 7px;
    }

    .trans-node .name { font-size: 11.5px; }
    .trans-node .type { font-size: 8.5px; }

    .matrix-log {
      max-height: 118px;
      min-height: 80px;
      font-size: 10.5px;
    }

    .left-col .panel { padding: 13px; }
    .left-col label { margin: 9px 0 5px; }
    .left-col input, .left-col select, .left-col textarea { padding: 8px 9px; }
    #compareModels { min-height: 132px; }
    .character-summary { max-height: 150px; }
    .compact-textarea { min-height: 70px; max-height: 110px; }
    .cost-grid.compact .cost-card { min-height: 62px; }
    .cost-grid.compact .value { font-size: 14px; }

    @media (max-width: 1200px) {
      body { overflow-y: auto; }
      .shell { height: auto; display: block; }
      header { height: auto; grid-template-columns: 1fr; }
      h1 { white-space: normal; }
      .workbench { grid-template-columns: 1fr; }
      .chat-col { display: block; }
      .chat-panel { height: 70vh; margin-bottom: 10px; }
      .compare-panel { max-height: none; }
    }


    /* Matrix clean distribution v2: no hidden data, visible numbers, fixed analytical panel */
    .workbench {
      grid-template-columns: 286px minmax(640px, 1fr) 420px ;
      gap: 10px;
    }

    .matrix-col {
      overflow-y: auto;
      min-width: 0;
    }

    .matrix-card {
      display: flex;
      flex-direction: column;
      gap: 9px;
      height: auto ;
      min-height: 100%;
      overflow: visible;
      padding: 13px;
    }

    .matrix-card h2 {
      margin: 0;
      font-size: 13px;
      line-height: 1.1;
      letter-spacing: 0.14em;
    }

    .matrix-live-top {
      display: grid;
      grid-template-columns: 1.3fr 0.7fr 0.9fr ;
      gap: 7px;
      min-height: 0;
    }

    .matrix-meter {
      min-width: 0;
      padding: 8px 9px;
      min-height: 58px;
      overflow: hidden;
    }

    .matrix-meter .label {
      font-size: 9px;
      margin-bottom: 4px;
      white-space: nowrap;
    }

    .matrix-meter .value {
      font-size: 15px;
      line-height: 1.12;
      overflow-wrap: anywhere;
    }

    .trace {
      max-height: none;
      overflow: visible;
      border-top: 1px solid #202020;
      border-bottom: 1px solid #202020;
      padding: 0;
      min-height: 0;
    }

    .trace-item {
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr);
      gap: 8px;
      padding: 5px 0;
      font-size: 11.2px;
      line-height: 1.25;
      align-items: start;
      border-bottom: 1px solid #181818;
    }

    .trace-item:last-child { border-bottom: 0; }

    .trace-key {
      font-size: 9.5px;
      letter-spacing: 0.1em;
      color: #bfbfbf;
      white-space: nowrap;
    }

    .trace-value {
      color: #ffffff;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .pillbox {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      max-height: 44px;
      overflow: hidden;
    }

    .pill {
      padding: 2px 5px;
      font-size: 9.5px;
      line-height: 1.1;
      border-color: #454545;
      background: #111;
      color: #f2f2f2;
    }

    .matrix-section-label {
      color: #ffffff;
      font-size: 10px;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: 0.13em;
      border-top: 1px solid #292929;
      padding-top: 7px;
      margin-top: 0;
    }

    .transposition-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) ;
      grid-auto-rows: 35px;
      gap: 5px;
      overflow: visible;
      padding-right: 0;
      min-height: 0;
      max-height: none;
      align-content: start;
    }

    .trans-node {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      grid-template-rows: 15px 12px;
      column-gap: 4px;
      row-gap: 0;
      min-height: 35px;
      height: 35px;
      padding: 4px 5px;
      overflow: hidden;
    }

    .trans-node .num {
      grid-row: 1 / 3;
      display: block;
      color: #9a9a9a;
      font-size: 8.5px;
      line-height: 1.2;
      padding-top: 1px;
    }

    .trans-node .name {
      font-size: 10.2px;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .trans-node .type {
      font-size: 7.6px;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: 0.05em;
    }

    .trans-node.active .num { color: #161616; }

    .matrix-costs {
      border-top: 1px solid #292929;
      padding-top: 7px;
      min-height: 0;
    }

    .matrix-costs h2 { display: none; }

    .cost-grid.compact {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr)) ;
      gap: 6px;
    }

    .cost-grid.compact .cost-card {
      min-height: 56px ;
      padding: 7px 7px;
      overflow: hidden;
    }

    .cost-grid.compact .label {
      font-size: 8.6px;
      line-height: 1.1;
      letter-spacing: 0.08em;
      margin-bottom: 5px;
      white-space: nowrap;
    }

    .cost-grid.compact .value {
      display: block;
      font-size: 12px;
      line-height: 1.12;
      font-weight: 850;
      color: #111;
      min-height: 14px;
      overflow-wrap: anywhere;
    }

    .cost-grid.compact .sub {
      font-size: 8.8px;
      line-height: 1.15;
      margin-top: 4px;
      color: #666;
    }

    .matrix-log {
      max-height: none;
      min-height: 66px;
      height: auto;
      padding: 7px;
      font-size: 9.5px;
      line-height: 1.28;
      overflow: visible;
      border-top: 1px solid #292929;
      background: #040404;
    }

    .matrix-log-line { margin-bottom: 3px; }

    /* ── Módulos nuevos v2 ── */

    .modo-badge {
      display: inline-block;
      font-size: 9px;
      font-weight: 820;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 2px;
      margin-left: 6px;
      vertical-align: middle;
    }
    .modo-badge.personaje { background: #163c70; color: #fff; }
    .modo-badge.puro { background: #0f6b35; color: #fff; }

    /* Régimen visible: cuando el modo abierto está activo, la matriz lleva un
       acento verde (mismo verde del badge) para que se lea de un vistazo bajo
       qué epistemología se produjo el turno. §06 de la auditoría. */
    .matrix-card.modo-abierto { box-shadow: inset 4px 0 0 #0f6b35; }

    /* Leyenda de estratos: colapsable, para no cargar la densidad de la
       columna cuando está cerrada. Se puebla desde ESTRATOS + ESTRATO_COLOR. */
    .estrato-leyenda { font-size: 10px; color: #999; border-top: 1px solid #292929; padding-top: 6px; }
    .estrato-leyenda summary { cursor: pointer; color: #b9a14a; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 9.5px; }
    .estrato-leyenda-grid { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 6px; }
    .estrato-leyenda-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #c9c9c9; }
    .estrato-leyenda-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }

    .modo-puro-toggle {
      margin-top: 10px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      background: #fafaf8;
      font-size: 12px;
    }
    .modo-puro-toggle label { margin: 0; font-size: 11px; font-weight: 700; }

    /* Temperatura cultural */
    .temp-block {
      border-top: 1px solid #292929;
      padding-top: 8px;
      margin-top: 0;
    }
    .temp-block-title {
      color: #aaa;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.13em;
      font-weight: 820;
      margin-bottom: 6px;
    }
    .temp-bar-row {
      display: grid;
      grid-template-columns: 90px 1fr 28px;
      gap: 5px;
      align-items: center;
      margin-bottom: 4px;
    }
    .temp-bar-label {
      font-size: 9px;
      color: #ccc;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .temp-bar-track {
      height: 5px;
      background: #1e1e1e;
      border-radius: 3px;
      overflow: hidden;
    }
    .temp-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.4s ease;
    }
    .temp-bar-pct {
      font-size: 8.5px;
      color: #777;
      text-align: right;
    }

    /* Nube de sedimentación */
    .sediment-block {
      border-top: 1px solid #292929;
      padding-top: 8px;
    }
    .sediment-block-title {
      color: #aaa;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.13em;
      font-weight: 820;
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .sediment-clear-btn {
      font-size: 8px;
      background: transparent;
      color: #555;
      border: 1px solid #333;
      padding: 1px 5px;
      cursor: pointer;
      font-weight: 700;
    }
    /* button.secondary usa color:var(--ink) (#111) heredando el borde negro
       de la regla base — invisible sobre el fondo casi negro de este panel.
       Se sobreescribe solo acá, sin tocar el resto de los .secondary del
       panel claro del compositor. */
    .matrix-card button.secondary {
      color: #eee;
      border-color: #444;
    }
    .matrix-card button.secondary:hover {
      border-color: #777;
    }
    .sediment-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      max-height: none;
      overflow: visible;
    }
    .sediment-word {
      display: inline-block;
      background: #111;
      border: 1px solid #2e2e2e;
      color: #c9c9c9;
      border-radius: 2px;
      padding: 2px 6px;
      font-size: 11px;
      line-height: 1.5;
      cursor: default;
      transition: background 0.2s, color 0.2s;
    }
    .sediment-word[data-freq="2"] { background: #1a1a1a; color: #ddd; border-color: #444; font-size: 11.5px; }
    .sediment-word[data-freq="3"] { background: #222; color: #f2f2f2; border-color: #666; font-size: 12px; }
    .sediment-word[data-freq="hi"] { background: #fff; color: #050505; border-color: #fff; font-size: 13px; font-weight: 800; }

    /* Tamiz de invariantes / residuos */
    .tamiz-row { font-size: 9.5px; line-height: 1.5; margin-bottom: 4px; color: #cfcfcf; }
    .tamiz-tag { font-size: 8px; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; border-radius: 2px; font-weight: 800; }
    .tamiz-tag.inv { background: #16361f; color: #7df0a0; border: 1px solid #2c6b3f; }
    .tamiz-tag.res { background: #3a2a12; color: #f0c47d; border: 1px solid #6b4a1d; }
    .tamiz-meta { color: #888; font-size: 9px; }
    .tamiz-empty { font-size: 9px; color: #8a8a8a; }
    .incert-triage { font-size: 9.5px; color: #8a8a8a; margin-top: 6px; font-style: italic; }
    .incert-triage.ok { color: #7fd0a0; font-style: normal; }

    /* Planetario (overlay) */
    .planetario-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.78);
      z-index: 50;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .planetario-panel {
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 8px;
      width: min(680px, 94vw);
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      padding: 14px 16px 16px;
    }
    .planetario-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    #planetarioTitle { font-size: 13px; font-weight: 800; color: #eee; letter-spacing: 0.02em; }
    .planetario-close {
      font-size: 10px; background: transparent; color: #888;
      border: 1px solid #333; padding: 3px 8px; cursor: pointer; border-radius: 3px;
    }
    .planetario-close:hover { color: #fff; border-color: #555; }
    .planetario-svg { width: 100%; aspect-ratio: 1 / 1; max-height: 70vh; }
    .planetario-legend { font-size: 9.5px; color: #aaa; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; }

    /* Deriva (rumor darwiniano) */
    .deriva-row { font-size: 9.5px; line-height: 1.6; color: #cfcfcf; margin-bottom: 2px; }
    .deriva-k { font-size: 8px; text-transform: uppercase; letter-spacing: 0.04em; color: #777; }
    .deriva-hist { margin-top: 5px; display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }

    /* Intensidad continua de las 18 transposiciones */
    .trans-intensity { height: 3px; background: #1c1c1c; margin-top: 6px; border-radius: 2px; overflow: hidden; }
    .trans-intensity-fill { height: 100%; border-radius: 2px; transition: width .25s ease; }
    .trans-divider {
      grid-column: 1 / -1;
      height: auto;
      min-height: 0;
      font-size: 8px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #777;
      border-top: 1px solid #2a2a2a;
      padding-top: 4px;
      margin-top: 2px;
    }

    /* Inspector de marco (entrar a mirar) */
    .marco-inspector { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
    .marco-sub { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #777; margin-top: 6px; }
    .marco-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .marco-chip { font-size: 11px; color: #e0e0e0; background: #141414; border: 1px solid #333; border-left-width: 3px; border-radius: 3px; padding: 2px 7px; }
    .marco-chip i { color: #777; font-style: normal; font-size: 9px; }
    .marco-spark { background: #0e0e0e; border: 1px solid #242424; border-radius: 4px; padding: 4px; }
    .marco-bridges { display: flex; flex-direction: column; gap: 3px; }
    .marco-bridge { font-size: 11px; color: #d0d0d0; }

    /* Informe */
    .report-config { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
    .report-toggles { display: flex; flex-wrap: wrap; gap: 6px 14px; }
    .report-toggles label, .report-range label { font-size: 11px; color: #ccc; display: inline-flex; align-items: center; gap: 5px; }
    .report-range { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .report-hint { color: #666; }
    .report-range input[type="number"] { background: #141414; border: 1px solid #333; color: #eee; padding: 2px 4px; border-radius: 3px; }
    .report-range select { background: #141414; border: 1px solid #333; color: #eee; padding: 2px 4px; border-radius: 3px; font-size: 11px; }
    #reportGenBtn { background: #b9a14a; color: #111; border: 0; padding: 5px 14px; border-radius: 4px; font-weight: 800; cursor: pointer; font-size: 11px; }

    /* Observatorio (bitácora del campo) */
    .obs-body { padding: 4px 2px; max-height: 70vh; overflow-y: auto; }
    .obs-count { font-size: 13px; font-weight: 800; color: #e6e6e6; margin: 2px 0; }
    .obs-hint { font-size: 11px; color: #8a8a8a; margin-bottom: 6px; }
    .obs-section-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #b9a14a; font-weight: 800; margin: 16px 0 7px; }
    .obs-filtro { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #aaa; margin-bottom: 8px; cursor: pointer; }
    .obs-row { padding: 6px 9px; border-left: 2px solid #2a2a2a; margin-bottom: 5px; background: rgba(255,255,255,.015); }
    .obs-row-head { font-size: 11px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
    .obs-turno { color: #777; font-weight: 800; }
    .obs-modelo { color: #9a9a9a; }
    .obs-dom { color: #b9a14a; font-weight: 700; }
    .obs-resn { color: #c98a3a; font-weight: 700; }
    .obs-mig { color: #777; }
    .obs-frag { font-size: 12px; color: #cfcfcf; margin-top: 3px; }
    .obs-unlock { max-width: 520px; margin: 18px auto; padding: 18px; border: 1px solid #2a2a2a; border-radius: 6px; background: rgba(255,255,255,.015); }
    .obs-unlock-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 14px; }
    .obs-unlock-form label { grid-column: 1 / -1; font-size: 11px; font-weight: 800; color: #aaa; text-transform: uppercase; letter-spacing: .06em; }
    .obs-unlock-form input { min-width: 0; background: #111; border: 1px solid #3a3a3a; border-radius: 4px; color: #eee; padding: 8px 10px; }
    .obs-auth-error { margin-top: 10px; padding: 8px 10px; border-left: 2px solid #c98a3a; background: rgba(201,138,58,.08); color: #e2b77f; font-size: 12px; }

    /* Observatorio · pestañas + firma por modelo */
    .obs-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid #2a2a2a; }
    .obs-tab { background: transparent; border: 0; color: #888; font-size: 12px; font-weight: 700; padding: 6px 12px; cursor: pointer; border-bottom: 2px solid transparent; }
    .obs-tab.active { color: #e6e6e6; border-bottom-color: #b9a14a; }
    .heat-scroll { overflow-x: auto; padding-bottom: 6px; }
    .heat-table { border-collapse: collapse; font-size: 9px; }
    .heat-table th, .heat-table td { padding: 0; }
    .heat-row { text-align: right; padding: 0 8px 0 0; font-size: 9.5px; color: #aaa; white-space: nowrap; font-weight: 600; cursor: help; }
    .heat-col { color: #666; font-size: 8.5px; font-weight: 400; padding: 0 0 3px; min-width: 12px; }
    .heat-cell { width: 12px; height: 12px; border: 1px solid #0a0a0a; cursor: default; }
    .firma-grid { display: flex; flex-wrap: wrap; gap: 12px; }
    .firma-card { flex: 1 1 280px; min-width: 260px; border: 1px solid #2a2a2a; border-radius: 6px; padding: 12px; background: rgba(255,255,255,.015); }
    .firma-modelo { font-size: 12px; font-weight: 800; color: #e6e6e6; margin-bottom: 8px; word-break: break-word; }
    .firma-line { font-size: 12px; color: #cfcfcf; margin: 3px 0; }
    .firma-k { color: #888; }
    .firma-sub { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #b9a14a; font-weight: 700; margin: 10px 0 4px; }
    .firma-bar-row { display: flex; align-items: center; gap: 6px; font-size: 11px; margin: 2px 0; }
    .firma-bar-label { flex: 0 0 auto; min-width: 120px; }
    .firma-bar { flex: 1 1 auto; height: 7px; background: #222; border-radius: 3px; overflow: hidden; }
    .firma-bar-fill { display: block; height: 100%; }
    .firma-bar-pct { flex: 0 0 auto; color: #888; width: 34px; text-align: right; }
    .firma-tags { display: flex; flex-wrap: wrap; gap: 5px; }
    .firma-tag { font-size: 10px; background: #222; color: #bbb; padding: 2px 7px; border-radius: 10px; }
    .firma-tag.pal { background: #1d2a1d; color: #9ec99e; }
    .report-output { background: #0d0d0d; border: 1px solid #262626; border-radius: 5px; padding: 12px; color: #ddd; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; max-height: 56vh; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
    .report-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
    .report-visual-frame { width: 100%; height: 62vh; border: 1px solid #262626; border-radius: 5px; margin-top: 10px; background: #fdfcf9; }

    @media (max-width: 560px) {
      .obs-unlock-form { grid-template-columns: 1fr; }
    }

    @media (max-width: 1420px) {
      .workbench { grid-template-columns: 270px minmax(560px, 1fr) 390px ; }
      .matrix-live-top { grid-template-columns: 1.2fr 0.7fr 0.8fr ; }
      .transposition-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) ; }
      .cost-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)) ; }
      .cost-grid.compact .cost-card { min-height: 50px ; }
      .matrix-card { grid-template-rows: auto auto auto auto minmax(130px, 1fr) auto auto ; }
    }

    @media (max-width: 1200px) {
      .matrix-col { overflow: visible; }
      .matrix-card { height: auto ; overflow: visible; }
      .cost-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)) ; }
    }

    /* El workbench queda igual (mismo layout de 3 columnas de escritorio);
       en mobile no entra en el viewport, así que en vez de reordenarlo se
       lo hace desplazable de lado con swipe (nativo) o arrastre con mouse
       (ver script "pan del workbench" más abajo). */
    @media (max-width: 980px) {
      .workbench {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
      }
      .workbench.is-panning {
        cursor: grabbing;
        user-select: none;
      }
    }

    .back-to-blog {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--muted);
      text-decoration: none;
      margin-bottom: 10px;
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s, color 0.2s;
    }
    .back-to-blog:hover { color: var(--ink); border-color: var(--ink); }