html, body { margin: 0; }
  body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 13px; line-height: 20px; -webkit-font-smoothing: antialiased; }
  .app { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 16px 24px 20px; min-height: 100vh; box-sizing: border-box; }

  /* header */
  .top { display: flex; align-items: center; gap: 24px; height: 48px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .brandmark { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
  .brandmark i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
  .env { font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
  .metrics { display: flex; margin-left: auto; }
  .tools { display: flex; align-items: center; gap: 16px; padding-left: 24px; border-left: 1px solid var(--line); }
  .toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); cursor: pointer; user-select: none; white-space: nowrap; }
  .sw { width: 28px; height: 16px; border-radius: var(--radius-pill); background: var(--surface-300); position: relative; transition: background .2s; }
  .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-subtle); transition: transform .2s, background .2s; }
  .toggle[aria-checked="true"] { color: var(--ink); }
  .toggle[aria-checked="true"] .sw { background: var(--brand-soft); }
  .toggle[aria-checked="true"] .sw::after { transform: translateX(12px); background: var(--brand); }
  .toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
  .clock { font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); min-width: 64px; text-align: right; }

  /* main */
  .main { display: grid; grid-template-columns: 1fr 320px; gap: 24px; min-height: 0; }
  .sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
  .sec-h h2 { margin: 0; font-size: 14px; font-weight: 500; }
  .sec-h .sm-label { margin-left: auto; }

  /* map */
  .mapwrap { position: relative; }
  svg.map { display: block; width: 100%; height: auto; }
  .col text { fill: var(--ink-subtle); font: 500 10px var(--font-mono); letter-spacing: .12em; }
  .gdot { fill: var(--grid-dot); }
  .divider { stroke: var(--line); stroke-dasharray: 2 4; }
  .edge { fill: none; stroke: var(--line-strong); stroke-width: 1.25; transition: opacity .2s, stroke .2s; }
  .edge.route { stroke: var(--threat); stroke-width: 1.75; }
  .edge.cut { stroke-dasharray: 3 4; opacity: .5; }
  .pkt { fill: var(--ink-subtle); }
  .pkt.bad { fill: var(--threat); }
  .node { cursor: pointer; transition: opacity .2s; }
  .node:focus { outline: none; }
  .node .tile { fill: var(--surface-100); stroke: var(--line-strong); stroke-width: 1; }
  .node .tint { fill: transparent; }
  .node .ico { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .node .ico .f { fill: var(--ink-muted); stroke: none; }
  .node .stat { stroke: var(--bg); stroke-width: 3; paint-order: stroke; }
  .node .name { fill: var(--ink-muted); font: 400 11px var(--font-mono); }
  .node .tag { fill: var(--threat); font: 500 10px var(--font-mono); letter-spacing: .06em; }
  .node .pulse { fill: none; stroke: var(--threat); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; }
  @keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
  .node .selr { fill: none; stroke: none; }
  .node.sel .selr, .node:focus-visible .selr { stroke: var(--brand); stroke-width: 1.5; }
  .node:hover .tile { stroke: var(--ink-subtle); }
  .st-safe .stat { fill: var(--safe); }
  .st-watch .stat { fill: var(--warn); }
  .st-watch .tile { stroke: var(--warn); }
  .st-attack .tile { stroke: var(--threat); stroke-width: 1.5; }
  .st-attack .tint { fill: var(--threat-soft); }
  .st-attack .ico { stroke: var(--threat); } .st-attack .ico .f { fill: var(--threat); }
  .st-attack .stat { fill: var(--threat); }
  .st-attack .name { fill: var(--threat); }
  .st-isolated { opacity: .55; }
  .st-isolated .tile { stroke: var(--isolated); stroke-dasharray: 3 3; }
  .st-isolated .stat { fill: var(--bg); stroke: var(--isolated); stroke-width: 1.5; }
  .st-ext .tile { fill: transparent; stroke-dasharray: 2 3; }
  .st-ext .stat { display: none; }
  .map.focus .node:not(.lit) { opacity: .25; }
  .map.focus .edge:not(.lit) { opacity: .12; }
  .map.focus .pkt:not(.lit) { opacity: 0; }

  .legend { display: flex; gap: 16px; font-size: 11px; color: var(--ink-subtle); font-family: var(--font-mono); }
  .legend span { display: inline-flex; align-items: center; gap: 6px; }

  /* detail */
  .detail { position: absolute; right: 0; top: 28px; width: 260px; background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: 14px; display: none; gap: 10px; }
  .detail.open { display: grid; }
  .detail .hd { display: flex; align-items: center; gap: 8px; }
  .detail .hd b { font: 500 13px var(--font-mono); }
  .detail .hd .sm-btn { margin-left: auto; }
  .detail dl { margin: 0; display: grid; grid-template-columns: 64px 1fr; gap: 4px 8px; font-size: 12px; }
  .detail dt { color: var(--ink-subtle); font-family: var(--font-mono); font-size: 11px; }
  .detail dd { margin: 0; font-family: var(--font-mono); font-size: 12px; }
  .route-txt { font-family: var(--font-mono); font-size: 11px; line-height: 18px; color: var(--threat); }
  .detail .acts { display: flex; gap: 6px; }

  /* queue */
  .queue { display: flex; flex-direction: column; min-height: 0; }
  .qlist { display: grid; gap: 8px; align-content: start; overflow: auto; max-height: 540px; }
  .empty { color: var(--ink-subtle); padding: 40px 0; text-align: center; font-size: 12px; display: grid; justify-items: center; gap: 10px; }
  .why { font-size: 12px; color: var(--ink-muted); }
  .why summary { cursor: pointer; color: var(--ink-subtle); font: 11px var(--font-mono); list-style: none; }
  .why summary::before { content: "+ "; }
  .why[open] summary::before { content: "− "; }
  .why ol { margin: 6px 0 0; padding-left: 18px; }

  /* feed */
  .feed { border-top: 1px solid var(--line); padding-top: 12px; }
  .rows { max-height: 120px; overflow: auto; }
  .row { display: grid; grid-template-columns: 72px 12px 120px 1fr; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; }
  .row .t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
  .row .h { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
  .row .sm-node--attack::after { display: none; }
  .row.ai .m { color: var(--brand); }
  .row .m { color: var(--ink); }

  @media (prefers-reduced-motion: reduce) { .node .pulse { animation: none; opacity: .5; } }


  /* ---- responsive ---- */
  .mapscroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .top { flex-wrap: wrap; height: auto; row-gap: 10px; }
  .rows, .qlist { scrollbar-width: thin; }
  .row .m { overflow-wrap: anywhere; }

  @media (max-width: 1100px) {
    .main { grid-template-columns: 1fr; }
    .qlist { max-height: none; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .rows { max-height: 180px; }
  }

  @media (max-width: 760px) {
    .app { padding: 12px 12px 16px; gap: 12px; }
    .top { gap: 12px; padding-bottom: 10px; }
    .env { display: none; }
    .metrics { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
    .tools { padding-left: 0; border-left: 0; margin-left: auto; }
    .sec-h { flex-wrap: wrap; }
    .legend { flex-wrap: wrap; gap: 6px 12px; margin-left: 0 !important; width: 100%; }
    svg.map { min-width: 620px; }
    .detail { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-height: 55vh; overflow: auto; z-index: 20; }
    .qlist { grid-template-columns: 1fr; }
    .row { grid-template-columns: 56px 10px 1fr; }
    .row .h { display: none; }
    .metrics .sm-metric { border-left: 0; padding: 0; }
    .sm-btn { min-height: 36px; }
  }

  @media (max-width: 420px) {
    .metrics { grid-template-columns: 1fr 1fr; }
    body { font-size: 12.5px; }
  }

  /* anti-desborde: los hijos de grid pueden encogerse y el texto largo se parte */
  html[data-theme="dark"] { color-scheme: dark; }
  html[data-theme="light"] { color-scheme: light; }
  html, body { max-width: 100%; overflow-x: hidden; }
  .app, .main > *, .queue, .qlist, .mapwrap, .feed { min-width: 0; }
  .mapscroll { max-width: 100%; }
  .sm-decision, .sm-decision * { overflow-wrap: anywhere; }
  .mapscroll, .qlist, .rows, .detail { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
  .mapscroll::-webkit-scrollbar, .qlist::-webkit-scrollbar, .rows::-webkit-scrollbar { height: 6px; width: 6px; }
  .mapscroll::-webkit-scrollbar-thumb, .qlist::-webkit-scrollbar-thumb, .rows::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

  /* respuesta al incidente por fases */
  .caso { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 8px; background: var(--surface-100); }
  .caso.open { border-color: var(--threat); }
  .caso-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
  .caso-h b { font: 500 11px var(--font-mono); overflow-wrap: anywhere; }
  .caso-h .sm-label { margin-left: auto; }
  .fases { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .fases li { display: grid; grid-template-columns: 12px auto 1fr; gap: 8px; align-items: baseline; font-size: 12px; color: var(--ink-subtle); }
  .fases li i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); align-self: center; }
  .fases li small { font: 10px var(--font-mono); color: var(--ink-subtle); overflow-wrap: anywhere; }
  .fases li.ok { color: var(--ink); } .fases li.ok i { background: var(--safe); border-color: var(--safe); }
  .fases li.bad { color: var(--threat); } .fases li.bad i { background: var(--threat); border-color: var(--threat); }
  .fases li.now { color: var(--brand); } .fases li.now i { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

  /* control */
  .ctl { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 12px; background: var(--surface-100); }
  .ctl-login { display: flex; gap: 8px; }
  .ctl-login input { flex: 1; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 6px 10px; font: 12px var(--font-mono); }
  .ctl-grid { display: grid; gap: 8px; }
  .ctl-item, .ctl-snap { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; flex-wrap: wrap; }
  .ctl-snaps { display: grid; gap: 6px; }
  .ctl-snap span:nth-child(2) { color: var(--ink-subtle); font: 11px var(--font-mono); margin-right: auto; margin-left: 8px; }
  .ctl-note { font: 11px var(--font-mono); color: var(--ink-subtle); margin-top: 8px; overflow-wrap: anywhere; min-height: 14px; }
  .ctl-note.ok { color: var(--safe); } .ctl-note.bad { color: var(--threat); }
  #ctlWho a { color: var(--brand); }

/* ================= rediseño v2 ================= */
html, body { height: 100%; }
body { overflow-x: hidden; }
.app { max-width: 1760px; margin: 0 auto; height: 100vh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 14px 24px 16px; overflow: hidden; }
.top { height: auto; }
.env { padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.brandmark .live { width: 8px; height: 8px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 0 var(--safe); animation: livepulse 2.4s ease-out infinite; }
.brandmark .live.stale { background: var(--warn); animation: none; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.45); } 100% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } }
.tools { gap: 12px; }
.fresh { font: 11px var(--font-mono); color: var(--ink-subtle); white-space: nowrap; }
.fresh.stale { color: var(--warn); }
#themeBtn { font-size: 14px; padding: 2px 8px; }

.main { grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 460px); gap: 20px; min-height: 0; }
.left { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.left .sec-h { flex: none; }
.legend { margin-left: auto; }
.mapwrap { flex: 1 1 0; min-height: 260px; position: relative; display: flex; }
.mapscroll { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-100); }
svg.map { width: 100%; height: 100%; max-height: 100%; }
.node .cap { font: 500 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-subtle); }
.st-attack .cap { fill: var(--threat); } .st-watch .cap { fill: var(--warn); } .st-isolated .cap { fill: var(--ink-muted); }
.feed { flex: none; border-top: 0; padding-top: 10px; }
.feed .rows { max-height: 132px; }

.side { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-100); overflow: hidden; }
.tabs { display: flex; flex: none; border-bottom: 1px solid var(--line); }
.tab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-subtle); padding: 11px 8px 9px; font: 500 12px var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--brand); }
.tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.tb { font: 600 10px var(--font-mono); font-style: normal; min-width: 16px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--surface-300); color: var(--ink-muted); }
.tb:empty { display: none; }
.tb.on { background: var(--brand-soft); color: var(--brand); }
.tb.hot { background: transparent; color: var(--threat); padding: 0; min-width: 0; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.pane { display: none; flex: 1; min-height: 0; overflow: auto; padding: 12px; }
.pane.on { display: block; }
.pane .sec-h { margin-bottom: 8px; }
.side .queue, .side .qlist { max-height: none; overflow: visible; }
.side .ctl { border: 0; padding: 0; background: none; margin: 0; }
.side .caso { background: var(--bg); }
.side .caso summary { list-style: none; cursor: pointer; margin: 0; }
.side .caso summary::-webkit-details-marker { display: none; }
.side details.caso[open] summary { margin-bottom: 8px; }
/* división inferior del panel lateral: bitácora */
.side-log { flex: none; display: flex; flex-direction: column; min-height: 0; height: var(--term-h); border-top: 1px solid var(--line); background: var(--bg); padding: 10px 12px 12px; box-sizing: border-box; }
.side-log .sec-h { flex: none; margin-bottom: 6px; }
.side-log .rows { flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; }
.side-log .row { grid-template-columns: 56px 10px 1fr; }
.side-log .row .h { display: none; }
.prog { height: 3px; border-radius: 2px; background: var(--surface-300); margin: -2px 0 10px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--brand); transition: width .4s; }
.caso.open .prog i { background: var(--threat); }
.sm-decision__head .sm-label { margin-left: auto; }
.empty { padding: 36px 0; line-height: 1.6; }

@media (max-width: 1100px) {
  .app { height: auto; overflow: visible; padding: 12px 16px; }
  .main { grid-template-columns: 1fr; }
  .mapwrap { flex: none; height: min(56vw, 420px); }
  .side { min-height: 320px; max-height: none; }
  .pane { overflow: visible; }
}
@media (max-width: 760px) {
  .app { padding: 10px 12px 14px; }
  .fresh { display: none; }
  .mapwrap { height: 300px; }
  svg.map { min-width: 620px; }
  .tab { padding: 10px 4px 8px; }
}

/* móvil/tableta: el panel lateral va justo debajo del mapa y la bitácora al final */
@media (max-width: 1100px) {
  .side-log { height: auto; }
  .side-log .rows { flex: none; max-height: 180px; }
  .left { display: contents; }
  .main { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .left > .sec-h { order: 1; } .mapwrap { order: 2; } .term { order: 3; } .side { order: 4; }
}

  .acts-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .acts-row .sm-btn { white-space: normal; text-align: left; }


/* ================= terminal de eventos ================= */
:root { --term-h: clamp(210px, 32vh, 340px); }
body.term-big { --term-h: 66vh; }

.term { flex: none; height: var(--term-h); display: flex; flex-direction: column; margin-top: 12px; border: 1px solid #1c2530; border-radius: var(--radius-lg); background: #05080c; color: #b7c3d0; overflow: hidden; font-family: var(--font-mono); }
.term-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #0a1017; border-bottom: 1px solid #1c2530; flex-wrap: wrap; min-height: 32px; }
.term-bar .dots { display: inline-flex; gap: 5px; }
.term-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #2a3441; }
.term-bar .dots i:nth-child(1) { background: #ff5f57; } .term-bar .dots i:nth-child(2) { background: #febc2e; } .term-bar .dots i:nth-child(3) { background: #28c840; }
.term-title { font-size: 11px; color: #7f8ea0; }
.term-chips { display: inline-flex; gap: 4px; margin-left: 4px; flex-wrap: wrap; }
.term-chips button, .term-btn { background: transparent; border: 1px solid #1f2a36; color: #7f8ea0; border-radius: 999px; padding: 1px 9px; font: 11px var(--font-mono); cursor: pointer; }
.term-chips button:hover, .term-btn:hover { color: #d7e0ea; border-color: #33465a; }
.term-chips button.on { color: #05080c; background: var(--brand); border-color: var(--brand); }
.term-btn { border-radius: 6px; padding: 1px 7px; } .term-btn.on { color: var(--warn); border-color: var(--warn); }
.term-info { margin-left: auto; font-size: 10px; color: #5c6b7d; text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; }
.term-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px; font-size: 12px; line-height: 18px; scrollbar-width: thin; scrollbar-color: #2a3441 transparent; }
.term-body:focus { outline: none; }
.ln { display: grid; grid-template-columns: 62px 74px minmax(0, 130px) minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 0 2px; border-radius: 3px; }
.ln:hover { background: #0c141d; }
.ln .t { color: #4f5d6e; } .ln .k { font-size: 10px; letter-spacing: .05em; color: #6f8296; } .ln .src { color: #6f8296; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln .m { color: #b7c3d0; overflow-wrap: anywhere; }
.ln.k-maddy .k, .ln.k-maddy .m { color: var(--brand); }
.ln.k-accion .k { color: #c792ea; } .ln.k-accion .m { color: #d8c2ee; }
.ln.k-playbook .k { color: #6ab0ff; }
.ln.k-sys .m { color: #7f8ea0; font-style: italic; white-space: pre-wrap; } .ln.k-sys .t, .ln.k-sys .k { color: #3d4956; }
.ln.s1 .m { color: #f1c66a; } .ln.s1 .k { color: #f1c66a; }
.ln.s2 .m { color: #ff9b6b; } .ln.s2 .k { color: #ff9b6b; }
.ln.s3 { background: rgba(255, 80, 80, .09); box-shadow: inset 2px 0 0 var(--threat); } .ln.s3 .m, .ln.s3 .k { color: #ff6b6b; font-weight: 600; }
.term-in { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid #1c2530; background: #0a1017; }
.term-in span { color: var(--brand); font-size: 12px; }
.term-in input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #d7e0ea; font: 12px var(--font-mono); caret-color: var(--brand); }
.term-in input::placeholder { color: #3d4956; }

@media (max-width: 1100px) { :root { --term-h: 300px; } body.term-big { --term-h: 70vh; } .term { order: 3; } }
@media (max-width: 760px) {
  .ln { grid-template-columns: 54px minmax(0, 1fr); }
  .ln .k, .ln .src { display: none; }
  .term-title { display: none; }
}


/* bitacora original (design system): recuperada junto al terminal */
.rows { max-height: 128px; overflow: auto; margin-bottom: 10px; scrollbar-width: thin; }
.row { display: grid; grid-template-columns: 62px 12px 110px 1fr; gap: 8px; align-items: center; padding: 3px 2px; font-size: 12px; border-radius: 3px; }
.row:hover { background: var(--surface-100); }
.row .t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
.row .h { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .m { color: var(--ink); overflow-wrap: anywhere; }
.row .sm-node--attack::after { display: none; }
.row.ai .m { color: var(--brand); }

@media (max-width: 760px) {
  .row { grid-template-columns: 54px 10px 1fr; }
  .row .h { display: none; }
}

/* ---- login y cuenta ---- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.login[hidden], .app[hidden] { display: none !important; }
.login-card { width: min(380px, 100%); display: grid; gap: 14px; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-100); }
.login-card .brandmark { font-size: 20px; }
.login-sub { margin: 0; color: var(--ink-subtle); font-size: 13px; }
.login-card label { display: grid; gap: 6px; font: 12px var(--font-mono); color: var(--ink-subtle); }
.login-card input, .ctl-pass input { background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 9px 10px; font: 14px var(--font-mono); min-width: 0; }
.login-msg { min-height: 16px; font: 12px var(--font-mono); color: var(--threat); overflow-wrap: anywhere; }
.ctl-pass { display: grid; gap: 8px; }
.who { font: 12px var(--font-mono); color: var(--ink-subtle); }

/* ---- página de configuración ---- */
.settings { min-height: 100vh; background: var(--bg); color: var(--ink); padding-bottom: 84px; }
.settings[hidden] { display: none !important; }
.set-top { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.set-top h1 { font-size: 18px; margin: 0; flex: 1; }
.set-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.set-tabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px; align-self: start; }
.set-tab { text-align: left; background: none; border: 0; color: var(--ink-subtle); padding: 9px 12px; border-radius: var(--radius-md); font: 13px var(--font-sans, inherit); cursor: pointer; }
.set-tab:hover { background: var(--surface-100); color: var(--ink); }
.set-tab.on { background: var(--surface-100); color: var(--ink); box-shadow: inset 2px 0 0 var(--safe, #2dd4bf); }
.set-main { min-width: 0; }
.set-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-100); padding: 18px 20px; margin-bottom: 16px; display: grid; gap: 12px; }
.set-card h3 { margin: 0; font-size: 15px; }
.set-desc { margin: 0; color: var(--ink-subtle); font-size: 13px; }
.set-field { display: grid; gap: 6px; }
.set-label { font-size: 13px; }
.set-field small, .set-list small { color: var(--ink-subtle); font-size: 12px; }
.settings input[type=text], .settings input[type=password], .settings input[type=number], .settings select {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 8px 10px; font: 13px var(--font-mono); min-width: 0; max-width: 100%; }
.set-form { display: grid; gap: 12px; max-width: 460px; }
.set-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.set-add { display: flex; gap: 8px; } .set-add input { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 4px 3px 10px; font: 12px var(--font-mono); overflow-wrap: anywhere; }
.chip button { border: 0; background: none; color: var(--ink-subtle); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 6px; }
.set-empty { color: var(--ink-subtle); font-size: 12px; }
.set-nd { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-subtle); display: grid; gap: 6px; }
.set-nd strong { color: var(--ink); }
.set-model { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.set-model button { background: var(--bg); border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--radius-md); cursor: pointer; padding: 2px 8px; }
.set-pos { color: var(--ink-subtle); font-size: 12px; }
.set-scroll { overflow-x: auto; }
.set-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.set-table th, .set-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.set-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.set-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.set-log, .set-log ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.set-log ul { gap: 4px; margin-top: 4px; padding-left: 12px; font: 12px var(--font-mono); color: var(--ink-subtle); overflow-wrap: anywhere; }
.set-log-h { font-size: 13px; } .set-log-h span { color: var(--ink-subtle); }
.set-msg { min-height: 20px; font: 13px var(--font-mono); margin-bottom: 10px; overflow-wrap: anywhere; }
.set-msg.ok { color: var(--safe, #2dd4bf); } .set-msg.bad { color: var(--threat, #f87171); }
.set-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 12px 24px; background: var(--surface-100); border-top: 1px solid var(--line); }
.set-bar[hidden] { display: none; }
.set-dirty { margin-right: auto; font-size: 13px; color: var(--ink-subtle); }
@media (max-width: 760px) {
  .set-wrap { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .set-tabs { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 6px; }
  .set-tab { white-space: nowrap; } .set-top, .set-bar { padding-left: 16px; padding-right: 16px; }
}

.set-warn { border-left: 3px solid var(--watch, #f59e0b); padding: 8px 12px; background: var(--bg); border-radius: var(--radius-md); font-size: 13px; }