/* OnGuard · variante «Material × bitácora»
   Material 3 para el chasis (barra superior, menú lateral, tarjetas tonales, chips, botones, campos, elevación, FAB)
   y la bitácora para la voz: papel cálido, serif en los textos narrados, mono en las etiquetas, un solo color de alarma. */

:root {
  --sans: "Roboto Flex", Roboto, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --paper: #f3eddc; --paper-2: #e7e0cb; --card: #fbf7ea; --sc-low: #f6f1e1; --sc-hi: #e9e3cf;
  --ink: #1d2a1b; --ink-2: #4d5547; --faint: #c3bba4; --rule: rgba(29,42,27,.13); --outline: #8d9285;
  --signal: #c93a16; --calm: #3f6a3a; --err-c: #fbdcd2;
  --pri: #2f5a2a; --on-pri: #fff; --pri-c: #d3e5c9; --on-pri-c: #0e2a0c; --pri-t: #2f5a2a;
  --e1: 0 1px 2px rgba(30,40,25,.16), 0 1px 3px 1px rgba(30,40,25,.08);
  --e2: 0 1px 2px rgba(30,40,25,.18), 0 2px 6px 2px rgba(30,40,25,.1);
  --e3: 0 4px 8px 3px rgba(30,40,25,.12), 0 1px 3px rgba(30,40,25,.18);
  --ease: cubic-bezier(.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-night="off"]) {
    --paper: #121510; --paper-2: #1c2018; --card: #1b1f17; --sc-low: #171b13; --sc-hi: #272c21;
    --ink: #e8e6d6; --ink-2: #b0b4a2; --faint: #444a3b; --rule: rgba(232,230,214,.14); --outline: #7d8374;
    --signal: #ff8a66; --calm: #9cc693; --err-c: #4a2012;
    --pri: #a8d19c; --on-pri: #0b2a0a; --pri-c: #2b4a28; --on-pri-c: #cbe8c0; --pri-t: #a8d19c;
  }
}
:root[data-night="on"] {
  --paper: #121510; --paper-2: #1c2018; --card: #1b1f17; --sc-low: #171b13; --sc-hi: #272c21;
  --ink: #e8e6d6; --ink-2: #b0b4a2; --faint: #444a3b; --rule: rgba(232,230,214,.14); --outline: #7d8374;
  --signal: #ff8a66; --calm: #9cc693; --err-c: #4a2012;
  --pri: #a8d19c; --on-pri: #0b2a0a; --pri-c: #2b4a28; --on-pri-c: #cbe8c0; --pri-t: #a8d19c;
}

body { font-family: var(--sans); font-size: 16px; background-image: none; }

/* la voz de la bitácora sigue siendo serif; el chasis es sans */
h1, h2, .sentence, .dial .center .t, .detail h3, .setrow h3, .route-title h3, .change h3, .word,
.logbook, .s-line, .sub, .meta, .lede, .why, .small, .outbox:not(.raw), .arch .tt, .legend { font-family: var(--serif); }
.legend, .small { font-family: var(--sans); }

/* ---------- barra superior ---------- */
.watch { position: sticky; top: 0; z-index: 30; min-height: 64px; padding-block: 8px; border-bottom: 0; background: var(--paper); box-shadow: var(--e1); }
.word { font-size: 21px; }
.word small { font-family: var(--sans); border-radius: 8px; font-size: 11px; background: var(--pri-c); color: var(--on-pri-c); border: 0; padding: 2px 8px; }
.shift { font-family: var(--sans); font-size: 14px; }
.night { font-family: var(--sans); font-size: 13px; font-weight: 500; border: 1px solid var(--outline); border-radius: 99px; padding: 6px 14px; color: var(--pri-t); transition: background .2s var(--ease); }
.night:hover { background: color-mix(in srgb, var(--pri-t) 10%, transparent); }
.keys-left .mono { font-family: var(--sans); font-size: 13px; background: var(--err-c); color: var(--signal); padding: 4px 12px; border-radius: 99px; font-weight: 600; }

/* ---------- módulos como chips ---------- */
.posts { gap: 8px; align-items: center; padding-block: 12px; border-bottom: 0; }
.post { margin: 0 !important; padding: 0 16px; height: 32px; display: inline-flex; align-items: center; border: 1px solid var(--outline); border-radius: 8px;
        font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.post.on { background: var(--pri-c); color: var(--on-pri-c); border-color: transparent; }
.post.on::after { display: none; }
.post.sealed { border-style: dashed; color: var(--ink-2); }
.post .seal { border-radius: 4px; font-family: var(--mono); }

/* ---------- menú lateral (navigation drawer) ---------- */
.views { display: grid; grid-template-columns: 264px minmax(0, 1fr); column-gap: clamp(20px, 3vw, 48px); max-width: 1600px; padding-top: 8px; }
.nav-views { grid-column: 1; grid-row: 1; flex-direction: column; gap: 2px; position: sticky; top: 84px; align-self: start; margin: 0;
             overflow: visible; white-space: normal; font-family: var(--sans); font-size: 14px; }
.view { grid-column: 2; grid-row: 1; min-width: 0; }
.view.on { animation: mdIn .32s var(--ease); }
@keyframes mdIn { from { opacity: 0; transform: translateY(10px); } }
.nav-views button { display: flex; align-items: center; gap: 14px; width: 100%; height: 52px; padding: 0 20px; border-radius: 26px; border: 0; text-align: left;
                    font-weight: 500; color: var(--ink-2); transition: background .2s var(--ease); }
.nav-views button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.nav-views button.on { background: var(--pri-c); color: var(--on-pri-c); font-weight: 700; }
.nav-views button svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-views button sup { margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; background: var(--signal); color: #fff; font-size: 11px; font-weight: 700; top: 0; }
.nav-views button .livedot { margin-left: auto; }
.nav-views .sep { width: auto; height: 1px; margin: 8px 20px; }
/* «Dar una orden» es el botón de acción principal (FAB extendido) */
.nav-views button[data-go="orden"] { order: -1; height: 56px; border-radius: 16px; margin-bottom: 14px; background: var(--pri-c); color: var(--on-pri-c); font-weight: 700; box-shadow: var(--e3); }
.nav-views button[data-go="orden"]:hover { box-shadow: var(--e3), 0 0 0 99px color-mix(in srgb, var(--ink) 6%, transparent) inset; }
.nav-views button[data-go="orden"].on { outline: 2px solid var(--pri); outline-offset: 2px; }

/* ---------- tarjetas ---------- */
.guard > *, .build > *, .live > *, .two-col > *, .setrow, .arch-wrap, .arch-notes > div, .change, .form {
  background: var(--card); border-radius: 24px; padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--e1); border: 0;
}
.guard, .build, .live, .two-col { align-items: start; }
.guard > *, .build > *, .live > *, .two-col > * { height: auto; }
.setrow, .setrow:first-of-type { border: 0; }
.set { display: grid; gap: 16px; }
.arch-notes > div { border-top: 0; }
.change { margin-top: 24px; max-width: none; }
.change h3 { border: 0; padding: 0; }
.foot { grid-column: 1 / -1; border-top: 0; font-family: var(--serif); }
.build-head { margin-bottom: 18px; }
.build-head h2, .logbook h2 { font-weight: 500; }
/* las líneas ya no son un fondo de altura fija (cortaban el texto): cada entrada trae la suya */
.log { background-image: none; border-top: 1px solid var(--rule); margin: 0; padding: 0; }
.log::before { left: 84px; }
.entry { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.entry:last-child { border-bottom: 0; }
.entry .h { padding-top: 5px; }
.logbook .sub { margin-bottom: 14px; }

.block-h { border: 0; padding: 0; margin: 0 0 14px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--pri-t); }

/* ---------- botones, chips, segmentados ---------- */
.btn { height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid var(--outline); border-radius: 99px;
       font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--pri-t); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { background: color-mix(in srgb, var(--pri-t) 10%, transparent); color: var(--pri-t); }
.btn.solid { background: var(--pri); color: var(--on-pri); border-color: transparent; box-shadow: var(--e1); }
.btn.solid:hover { background: color-mix(in srgb, var(--pri) 88%, var(--ink)); border-color: transparent; color: var(--on-pri); box-shadow: var(--e2); }
.btn.wide { width: 100%; height: 48px; }
.asks { margin-top: 24px; }
.pill { border-radius: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 5px 14px; border: 1px solid var(--outline); }
.pill:not(.s) { background: var(--pri-c); color: var(--on-pri-c); border-color: transparent; }
.toggle { border: 1px solid var(--outline); font-family: var(--sans); font-size: 13px; font-weight: 500; }
.toggle button { padding: 6px 16px; }
.toggle button.on { background: var(--pri-c); color: var(--on-pri-c); }
.addstep { margin-left: 50px; }
.addstep button { border-radius: 8px; border: 1px dashed var(--outline); font-family: var(--sans); font-size: 12px; padding: 4px 12px; }
.addstep button:hover { background: var(--pri-c); color: var(--on-pri-c); }
.linkbtn { color: var(--pri-t); }

/* ---------- la guardia ---------- */
.dial svg { filter: none; }
.legend { margin-top: 18px; font-size: 14px; }

/* ---------- dar una orden ---------- */
.sentence { max-width: none; background: var(--pri-c); color: var(--on-pri-c); border-radius: 32px; padding: clamp(22px, 3.4vw, 44px); margin: 0 0 28px; font-weight: 400; box-shadow: var(--e1); }
.sentence .lead { color: color-mix(in srgb, var(--on-pri-c) 62%, transparent); }
.slot { border: 0; border-radius: 12px; padding: 0 12px; margin: 2px 0; background: var(--card); color: var(--ink); font-style: normal; box-shadow: var(--e1); transition: box-shadow .2s var(--ease), background .2s; }
.slot:hover, .slot:focus-visible { background: var(--pri); color: var(--on-pri); box-shadow: var(--e2); }
.route-title { border: 0; padding-top: 0; margin-bottom: 4px; }
.route { background: var(--card); border-radius: 24px; padding: 28px 28px 14px; box-shadow: var(--e1); }
.route .st { fill: var(--card); }
.route .st.cur { fill: var(--pri); stroke: var(--pri); }
.score { border: 0; background: var(--card); border-radius: 20px; box-shadow: var(--e1); overflow: hidden; }
.score summary { font-family: var(--sans); font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--pri-t); padding: 16px 20px; }

/* ---------- doble llave ---------- */
.twokeys-head h2 { font-weight: 500; }
.vault { border-radius: 28px; overflow: hidden; box-shadow: var(--e2); margin: 28px 0 20px; }
.slotkey, .slotkey + .slotkey { border: 0; background: var(--card); min-height: 200px; padding: 28px; }
.slotkey h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.slotkey .who { font-family: var(--sans); font-weight: 600; }
.slotkey svg { stroke: var(--ink-2); }
.slotkey.turned, .slotkey + .slotkey.turned { background: var(--pri-c); color: var(--on-pri-c); }
.slotkey.turned h4, .slotkey.turned .mono { color: var(--on-pri-c); }
.slotkey.turned svg { stroke: var(--on-pri-c); }
.slotkey.empty, .slotkey + .slotkey.empty { background: var(--err-c); outline: 2px dashed var(--signal); outline-offset: -12px; }
.keyhole { background: var(--paper-2); }
.keyhole i { background: var(--ink-2); }
.done-note { border: 0; border-radius: 16px; background: var(--pri-c); color: var(--on-pri-c); }

/* ---------- constructor ---------- */
.route-col::before { display: none; }
.bstep { border-radius: 16px; padding: 10px 12px; transition: background .2s var(--ease); }
.bstep:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.bstep:hover b { text-decoration: none; }
.bstep.on { background: var(--pri-c); color: var(--on-pri-c); }
.bstep.on span { color: var(--on-pri-c); opacity: .75; }
.bstep.on i { background: var(--pri); border-color: var(--pri); }
.bstep i { background: var(--card); }
.bstep:not(.rescue)::after { content: ""; position: absolute; left: 23px; top: 35px; height: calc(100% - 25px); width: 3px; background: var(--ink); opacity: .35; }
.fr .k, .rw.hd, .people .pr.hd { font-family: var(--sans); font-weight: 600; letter-spacing: .04em; }
.yaml { background: var(--sc-hi); border: 0; border-radius: 16px; }
.yaml .ln.hl { background: var(--pri-c); color: var(--on-pri-c); }
.guards .g-w b, .guards .g-ok b { font-weight: 700; }
.vars .vr { border-bottom-color: var(--rule); }

/* ---------- campos ---------- */
.field label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--pri-t); margin-bottom: 4px; }
.field input, .field select { background: var(--sc-hi); border: 0; border-bottom: 2px solid var(--ink-2); border-radius: 12px 12px 0 0; padding: 12px 16px; font-family: var(--sans); font-size: 17px; }
.field input:focus { border-bottom-color: var(--pri); background: color-mix(in srgb, var(--pri) 8%, var(--sc-hi)); }
.code input { border: 1px solid var(--outline); border-radius: 12px; background: var(--sc-hi); }
.code input:focus { border: 2px solid var(--pri); }
.form { box-shadow: var(--e2); border-radius: 28px; padding: 32px; }
.login h1 { font-weight: 500; }

/* ---------- listas y tablas ---------- */
.choice label { border: 1px solid var(--rule); border-radius: 16px; padding: 14px 16px; transition: background .2s var(--ease); }
.choice label:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.choice label.on { background: var(--pri-c); border-color: transparent; color: var(--on-pri-c); }
.choice label.on small { color: var(--on-pri-c); opacity: .8; }
.choice input { accent-color: var(--pri); }
.setrow h3 { font-weight: 500; }
.glist button { border: 0; border-radius: 14px; padding: 12px 16px; font-family: var(--sans); font-size: 15px; transition: background .2s var(--ease); }
.glist button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.glist button.on { background: var(--pri-c); color: var(--on-pri-c); }
.glist button.on .mono { color: var(--on-pri-c); }
.rw, .people .pr { font-family: var(--sans); }
.rw:not(.hd), .people .pr:not(.hd) { padding-inline: 12px; border-radius: 12px; }
.rw:not(.hd):hover, .people .pr:not(.hd):hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.rw.hd, .people .pr.hd { padding-inline: 12px; border-bottom: 1px solid var(--outline); }
.inl { border-radius: 6px; border: 0; background: var(--sc-hi); padding: 2px 8px; }

/* ---------- en vivo ---------- */
.outbox { border-top: 0; border-radius: 16px; background: var(--sc-low); padding: 6px 14px; }
.outbox.raw { background: var(--sc-hi); }
.dot.chg { background: var(--pri); border-color: var(--pri); }
.rs li.done i { background: var(--pri); border-color: var(--pri); }
.rs li.cur i { border-color: var(--pri); }

/* ---------- arquitectura ---------- */
.arch .bx { rx: 14; fill: var(--sc-hi); stroke: none; }
.arch .bx.main { fill: var(--card); stroke: var(--outline); stroke-width: 1.5; }
.arch .bx.dash { fill: none; stroke: var(--outline); }
.arch .core { rx: 20; stroke: var(--pri); }
.arch .bd { fill: var(--pri); } .arch .bn { fill: var(--on-pri); }
.arch-steps li::before { background: var(--pri); color: var(--on-pri); }
.arch-steps li { border-bottom-color: var(--rule); }

/* ---------- recorrido ---------- */
.tour { font-family: var(--sans); border: 0; border-radius: 28px; box-shadow: var(--e3); padding: 22px 24px 16px; background: var(--card); }
.tour h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.tour .t-n { font-family: var(--sans); font-weight: 700; color: var(--pri-t); }
.tour p.t-why { font-family: var(--serif); }
.tour .t-b { border-radius: 99px; border: 1px solid var(--outline); padding: 8px 18px; font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--pri-t); }
.tour .t-b.go { background: var(--pri); color: var(--on-pri); border-color: transparent; }
.tour .t-dots i { border-color: var(--outline); }
.tour .t-x { font-family: var(--sans); }
.tour .t-n > span:last-child { display: flex; gap: 14px; }
.tour-hl { outline: 3px solid var(--signal); outline-offset: 4px; border-radius: 16px; }

/* ---------- móvil: el menú lateral pasa a pestañas horizontales ---------- */
@media (max-width: 920px) {
  .views { display: block; }
  .nav-views { position: static; flex-direction: row; gap: 8px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 6px; }
  .nav-views button { flex: none; width: auto; height: 40px; padding: 0 16px; border: 1px solid var(--outline); border-radius: 99px; }
  .nav-views button.on { border-color: transparent; }
  .nav-views button[data-go="orden"] { order: 0; height: 40px; margin: 0; border-radius: 99px; box-shadow: none; }
  .nav-views .sep { display: none; }
  .vault { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { .view.on { animation: none; } }

/* =====================================================================
   PANTALLAS ANCHAS: se aprovecha todo el ancho y se reparte el contenido
   en columnas para que cada pantalla quepa sin bajar (best effort: si la
   ventana es baja o hay mucho contenido, vuelve a haber scroll normal).
   ===================================================================== */
@media (min-width: 1100px) {
  .views { max-width: none; padding: 4px clamp(16px, 2vw, 36px) 28px; grid-template-columns: 232px minmax(0, 1fr); column-gap: clamp(16px, 2vw, 32px); }
  .nav-views { top: 80px; }
  .nav-views button { height: 46px; }
  .nav-views button[data-go="orden"] { height: 52px; margin-bottom: 10px; }
  .build-head { margin-bottom: 14px; }
  .build-head h2 { font-size: clamp(24px, 2.2vw, 34px); }
  .guard > *, .build > *, .live > *, .two-col > *, .setrow, .arch-wrap, .arch-notes > div, .change, .people,
  .build .detail, .build .vars, .build .guards { padding: 20px 22px; }
  .foot { margin-top: 16px; }

  /* la guardia: el reloj se ajusta a la altura de la ventana */
  .guard { grid-template-columns: minmax(300px, min(500px, 52vh)) minmax(0, 1fr); gap: 20px; }
  .legend { margin-top: 12px; gap: 4px; }

  /* dar una orden: frase a la izquierda, ruta y acciones a la derecha */
  #v-orden.on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px 24px; align-items: start; }
  #v-orden .sentence { grid-column: 1; grid-row: 1 / span 3; margin: 0; align-self: stretch; font-size: clamp(22px, 2.1vw, 34px); line-height: 1.6; }
  #v-orden .route-title { grid-column: 2; grid-row: 1; margin: 0; }
  #v-orden .route { grid-column: 2; grid-row: 2; margin: 0; }
  #v-orden .asks { grid-column: 2; grid-row: 3; margin: 0; }
  #v-orden .score { grid-column: 1 / -1; margin: 0; }

  /* doble llave: las llaves a la izquierda, lo que cambiará a la derecha */
  #v-llaves.on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
  #v-llaves .twokeys-head { grid-column: 1; grid-row: 1; max-width: none; }
  #v-llaves .vault { grid-column: 1; grid-row: 2; margin: 0; }
  #v-llaves .done-note { grid-column: 1; grid-row: 3; margin: 0; }
  #v-llaves .change { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  #v-llaves .asks { grid-column: 2; grid-row: 4; margin: 0; }
  .slotkey, .slotkey + .slotkey { min-height: 170px; padding: 22px; }

  /* usuarios: personas y reglas lado a lado */
  #v-usuarios.on { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px 24px; align-items: start; }
  #v-usuarios .build-head { grid-column: 1 / -1; }
  #v-usuarios .setrow { margin-top: 0 !important; grid-template-columns: 1fr; gap: 12px; }

  /* ajustes: tarjetas en columnas, sin una lista larguísima */
  .set { max-width: none; display: block; columns: 3 420px; column-gap: 16px; }
  .setrow { break-inside: avoid; margin-bottom: 16px; grid-template-columns: 1fr; gap: 14px; }
  .setrow:first-of-type { grid-template-columns: 1fr; }

  /* en vivo: la salida ocupa el alto que queda */
  .live { grid-template-columns: minmax(200px, .75fr) minmax(260px, .95fr) minmax(0, 1.7fr); gap: 16px; }
  .outbox { height: calc(100vh - 330px); min-height: 320px; }

  /* arquitectura: diagrama a la izquierda, recorrido y notas a la derecha */
  #v-arquitectura.on { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); gap: 16px 20px; align-items: start; }
  #v-arquitectura .build-head { grid-column: 1 / -1; }
  #v-arquitectura .arch-wrap { grid-column: 1; grid-row: 2 / span 2; overflow: visible; }
  svg.arch { min-width: 0; }
  #v-arquitectura .arch-steps { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; margin: 0; background: var(--card); border-radius: 24px; padding: 10px 22px; box-shadow: var(--e1); }
  .arch-steps li { padding-block: 8px; }
  .arch-steps li::before { top: 9px; }
  #v-arquitectura .arch-notes { grid-column: 2; grid-row: 3; grid-template-columns: 1fr; margin: 0; gap: 12px; }
  .arch-notes > div { padding: 14px 20px; }
}

/* constructor en cuatro columnas (≥1500 px): ruta | paso + guardarraíles | preguntas + acciones | partitura */
@media (min-width: 1500px) {
  .build { grid-template-columns: minmax(230px, .8fr) minmax(280px, 1fr) minmax(300px, 1.05fr) minmax(300px, 1.1fr); gap: 16px; align-items: start; }
  .build > div:nth-child(2) { display: contents; }
  .build > div:nth-child(2) { padding: 0; background: none; box-shadow: none; }
  .route-col { grid-column: 1; grid-row: 1 / span 2; }
  .build .detail { grid-column: 2; grid-row: 1; }
  .build .guards { grid-column: 2; grid-row: 2; margin-top: 0; }
  .build .vars { grid-column: 3; grid-row: 1; margin-top: 0; }
  .build .asks { grid-column: 3; grid-row: 2; margin: 0; align-self: start; }
  .build > div:nth-child(3) { grid-column: 4; grid-row: 1 / span 2; }
  .build .detail, .build .vars, .build .guards { background: var(--card); border-radius: 24px; box-shadow: var(--e1); }
  .fr { grid-template-columns: 104px 1fr; }
  .vars .vr { grid-template-columns: 62px 1fr auto; font-size: 14px; padding: 6px 0; }
  .vars .vr span .mono { display: block; }
  .guards div { font-size: 14px; }
  .yaml { max-height: none; overflow: visible; font-size: 11px; line-height: 1.6; }
  .yaml .ln { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 12px; }
}

/* ventanas bajas: más compacto para que no haga falta bajar */
@media (min-width: 1100px) and (max-height: 880px) {
  body { font-size: 15px; }
  .watch { min-height: 56px; }
  .posts { padding-block: 8px; }
  .nav-views { top: 70px; }
  .nav-views button { height: 40px; }
  .nav-views button[data-go="orden"] { height: 46px; }
  .guard > *, .build > *, .live > *, .two-col > *, .setrow, .arch-wrap, .change, .people,
  .build .detail, .build .vars, .build .guards { padding: 14px 18px; }
  .entry { padding: 8px 0; }
  .slotkey, .slotkey + .slotkey { min-height: 140px; padding: 16px 20px; }
  .block-h { margin-bottom: 8px; }
  .fr { padding: 6px 0; }
  .bstep { padding-block: 6px; }
}

/* ---- ajustes tras revisar capturas a 1860×980 ---- */
.people { background: var(--card); border-radius: 24px; box-shadow: var(--e1); }
@media (min-width: 1100px) {
  .twokeys-head h2 { font-size: clamp(26px, 2.6vw, 38px); }
  #v-llaves .change { grid-row: 1 / span 2; }
  #v-llaves .asks { grid-row: 3; align-self: start; }
  .set { columns: 4 330px; }
  .outbox { height: calc(100vh - 410px); }
  #v-arquitectura .arch-steps { padding: 6px 20px; font-size: 15px; }
  .arch-steps li { padding-block: 6px; }
  .arch-steps li::before { top: 7px; }
  #v-arquitectura .arch-notes { gap: 10px; }
  .arch-notes > div { padding: 12px 18px; }
  .arch-notes h4 { font-size: 16px; margin-bottom: 2px; }
  .arch-notes p { font-size: 14px; }
}
@media (min-width: 1100px) {
  #v-arquitectura .build-head { margin-bottom: 4px; }
  #v-arquitectura .arch-steps { font-size: 14.5px; padding: 2px 20px; }
  .arch-steps li { padding-block: 5px; }
  .arch-steps li::before { top: 6px; }
  .arch-notes > div { padding: 9px 16px; }
  .arch-notes h4 { font-size: 15px; margin-bottom: 0; }
  .arch-notes p { font-size: 13.5px; line-height: 1.4; }
}
@media (min-width: 1100px) {
  #v-llaves.on { grid-template-rows: auto auto 1fr auto; }
  #v-llaves .change { grid-row: 1 / span 3; }
  #v-llaves .asks { grid-row: 4; }
}