/* MPe Software — estilos */

@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 800; font-display: swap; src: url("fonts/jetbrains-mono-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }

:root {
  --bg: #0E0F0C;
  --bg-hi: #15170F;
  --ink: #E8E6DF;
  --ink-2: #C9C7BF;
  --mute: #9A9A92;
  --line: #1E201A;
  --line-2: #2A2C25;
  --line-3: #3A3D32;
  --acc: #C6F432;
  --acc-hi: #E4FF8A;
  --err: #FF8A6B;
  --hid: #8FA84A;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--mono);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--acc); }
a:hover { color: var(--acc-hi); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cabecera y logo */
.top { border-bottom: 1px solid var(--line); }
.top__in { max-width: 1240px; margin: 0 auto; padding: 6px 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; }
.logo { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; white-space: pre; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__typed, .logo__cursor { color: var(--acc); }
.cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.langs { display: flex; gap: 2px; }
.langs button {
  min-width: 44px; min-height: 40px; padding: 0 8px; border: 0; background: transparent; color: var(--mute);
  font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer;
}
.langs button:hover { color: var(--acc); }
.langs button[aria-pressed="true"] { background: var(--acc); color: var(--bg); }

/* Aviso de versión nueva */
.update { border-bottom: 1px solid var(--acc); background: #15170F; }
.update[hidden] { display: none; }
.update__in { max-width: 760px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; }
.update__icon { color: var(--acc); font-weight: 800; font-size: 18px; }
.update__msg { flex: 1 1 260px; }
.update__btn { min-height: 40px; padding: 0 16px; font-size: 13px; }
/* Zona principal */
main { flex-grow: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 18px; }

.prompt { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--line-3); }
.prompt:focus-within { border-color: var(--acc); }
.prompt label, .prompt input { font-family: var(--mono); font-size: clamp(22px, 3vw, 34px); font-weight: 800; }
.prompt label { letter-spacing: -0.02em; }
.prompt label { color: var(--acc); white-space: nowrap; }
.prompt input {
  flex-grow: 1; min-width: 0; min-height: 56px; padding: 0;
  background: transparent; border: 0; color: var(--ink); letter-spacing: -0.02em;
  caret-color: var(--acc);
}
.prompt input:focus { outline: none; }
.prompt input::placeholder { color: #55574E; }

/* Árbol de la raíz */
.root { margin: 0 0 6px; padding: 0 8px; font-size: 14px; font-weight: 700; color: var(--mute); }
.tree { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.node {
  display: grid; grid-template-columns: 44px 190px 110px minmax(0, 1fr); gap: 12px; align-items: baseline;
  width: 100%; min-height: 44px; padding: 9px 8px; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font-family: var(--mono); font-size: 15px; text-align: left; cursor: pointer;
}
.node:hover, .node[aria-selected="true"] { background: var(--bg-hi); }
.node[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--acc); }
.node:hover .node__nm { text-decoration: underline; text-underline-offset: 4px; }
.node__br { color: #55574E; white-space: pre; }
.node__nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node__meta { font-size: 12px; color: var(--ink-2); }
.node__hint { font-family: var(--sans); font-size: 14px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node--dir .node__nm { font-weight: 700; color: var(--acc); }
.node--file .node__meta { color: var(--mute); }
.node--hidden .node__nm { font-weight: 700; color: var(--hid); }
.node--hidden .node__meta { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--acc); }
.is-fresh { animation: found 1.2s ease-out; }
@keyframes found { from { background: #2A3310; } to { background: transparent; } }
.summary { margin: 10px 0 0; padding: 0 8px; font-size: 12px; color: var(--mute); }
.nomatch { margin: 0; padding: 14px 8px; font-size: 14px; color: var(--err); }

/* Ficha de proyecto */
.card { display: flex; flex-direction: column; gap: 18px; }
.card__head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--mute); }
.card h1 { margin: 0; font-size: clamp(40px, 6vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.card__tag { margin: 0; font-size: 15px; color: var(--acc); }
.feats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.feats li { display: flex; gap: 10px; font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.feats li::before { content: "-"; color: var(--acc); font-family: var(--mono); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  font-family: var(--mono); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid var(--line-3); background: transparent; color: var(--ink);
}
.btn:hover { border-color: var(--acc); color: var(--acc); }
.btn--acc { background: var(--acc); border-color: var(--acc); color: var(--bg); }
.btn--acc:hover { background: var(--acc-hi); border-color: var(--acc-hi); color: var(--bg); }
.btn--ghost { border-color: var(--line-2); color: var(--mute); }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.card--hidden { padding: 24px; border: 1px dashed #55574E; }
.badge { padding: 2px 8px; border: 1px solid var(--acc); color: var(--acc); font-weight: 700; letter-spacing: 0.06em; }
.mission { display: flex; flex-direction: column; gap: 6px; }
.mission .label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--mute); }
.mission p { margin: 0; font-family: var(--sans); font-size: 18px; line-height: 1.55; max-width: 560px; }
.card .dim { margin: 0; font-size: 13px; color: var(--mute); }
.card__head { flex-wrap: wrap; }

/* Vistas de texto */
.text { display: flex; flex-direction: column; gap: 10px; }
.text h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--acc); }
.text p { margin: 0; font-size: 16px; line-height: 1.6; }
.text .dim { font-size: 14px; color: var(--mute); }
.goal { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.goal__n { color: var(--acc); font-weight: 700; }
.goal__bar { grid-column: 2; height: 6px; background: #23261D; }
.goal__bar span { display: block; height: 100%; background: var(--acc); }
.goal__amt { grid-column: 2; font-size: 12px; color: var(--mute); }

/* Pie con atajos */
.keys { border-top: 1px solid var(--line); }
.keys__in { max-width: 1240px; margin: 0 auto; padding: 2px 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.fk {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; background: transparent; border: 0;
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.fk:hover, .fk:focus-visible { color: var(--acc); }
.fk svg { display: block; }
.fk kbd {
  position: absolute; top: 3px; right: 1px; padding: 0 3px;
  background: var(--acc); color: var(--bg); font-family: var(--mono); font-size: 9px; font-weight: 800; line-height: 13px;
}
.fk:hover kbd { background: var(--acc-hi); }
.fk[hidden] { display: none; }

noscript { display: block; max-width: 720px; margin: 0 auto; padding: 0 24px 40px; font-family: var(--sans); line-height: 1.6; color: var(--ink-2); }

@media (max-width: 560px) {
  .top__in, .keys__in { padding-left: 18px; padding-right: 18px; }
  main { padding: 16px 18px 32px; }
  .node { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .node__hint { display: none; }
  .prompt { gap: 10px; }
  .prompt label, .prompt input { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor, .is-fresh, .tl-granted.is-fresh, .tl-dot { animation: none; }
}

/* ---------- Sala secreta TalilaPurple v4 ----------
 * Mismas medidas que el modo normal; solo cambia el acento. Escritorio y
 * tablet: barra lateral con notas y pomodoro. Móvil (≤700 px): vista compacta
 * con barra de formato y cuatro botones que abren hojas. */
.keys__in[hidden] { display: none; }
body.talila { --acc: #B58CFF; --acc-hi: #D2B8FF; --line: #1E1B26; --line-2: #2A2438; --line-3: #3D3352; --bg-hi: #17131F; --brk: #C6F432; --dim: #7A768C; }
.node--talila .node__nm { font-weight: 700; color: #B58CFF; }
.node--talila .node__meta { font-size: 11px; color: #B58CFF; }
.top { position: relative; }
.tl-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--line); }
.tl-line span { display: block; width: 0; height: 100%; background: var(--acc); transition: width 0.6s linear; }
.tl-line.is-break span { background: var(--brk); }

body.talila main {
  max-width: 1180px; display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 36px; row-gap: 14px; align-items: start; align-content: start;
}
body.talila .prompt { grid-column: 2; padding-bottom: 8px; }
body.talila .prompt label, body.talila .prompt input { font-size: clamp(20px, 2.2vw, 24px); }
body.talila .prompt input { min-height: 44px; }
body.talila #out { grid-column: 2; min-width: 0; display: flex; flex-direction: column; }
.tl-pagev, .tl-alt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tl-pagev[hidden], .tl-alt[hidden], .tl-side[hidden] { display: none; }

/* barra lateral */
.tl-side { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 16px; padding-top: 4px; font-size: 13px; position: sticky; top: 12px; max-height: calc(100dvh - 24px); overflow: auto; scrollbar-width: thin; }
.tl-slists { display: flex; flex-direction: column; gap: 2px; }
.tl-side .root { margin: 0 0 4px; }
.tl-sh { margin: 12px 0 2px; padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--dim); }
.tl-stree { margin: 0; padding: 0; list-style: none; }
.tl-srow {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px; align-items: center; width: 100%; min-height: 38px; padding: 0 8px;
  background: transparent; border: 0; color: var(--ink); font-family: var(--mono); font-size: 13px; text-align: left; cursor: pointer;
}
.tl-srow:hover { background: var(--bg-hi); }
.tl-srow[aria-current="page"] { background: #1C1628; color: var(--acc); font-weight: 700; box-shadow: inset 2px 0 0 var(--acc); }
.tl-br { color: #4A4060; white-space: pre; }
.tl-snm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-smeta { font-size: 11px; color: var(--dim); font-weight: 400; }
.tl-sli { position: relative; }
.tl-sdel { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; display: none; align-items: center; justify-content: center; background: #1C1628; border: 1px solid var(--line-3); color: var(--mute); cursor: pointer; }
.tl-sli:hover .tl-sdel, .tl-sdel:focus-visible { display: inline-flex; }
.tl-sli:hover .tl-smeta { visibility: hidden; }
.tl-sdel:hover { border-color: var(--err); color: var(--err); }
.tl-baracts { display: inline-flex; align-items: center; gap: 8px; }
.tl-delbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; background: transparent; border: 1px solid var(--line-2); color: var(--mute); font-family: var(--mono); font-size: 12px; cursor: pointer; }
.tl-delbtn:hover, .tl-delbtn:focus-visible { border-color: var(--err); color: var(--err); }
.tl-undobar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border: 1px solid var(--line-3); background: #1C1628; font-size: 13px; color: var(--ink); }
.tl-undobtn { background: var(--acc); border-color: var(--acc); color: var(--bg); font-weight: 800; }
.tl-undobtn:hover { background: var(--acc-hi); border-color: var(--acc-hi); color: var(--bg); }
.tl-moreb.is-danger .tl-insic, .tl-moreb.is-danger .tl-morel > span:first-child { color: var(--err); }
@media (hover: none) { .tl-sdel { display: inline-flex; } .tl-sli .tl-smeta { visibility: hidden; } }
.tl-new {
  display: flex; justify-content: space-between; align-items: center; margin-top: 8px; min-height: 40px; padding: 0 8px;
  background: transparent; border: 1px dashed var(--line-3); color: var(--ink-2); font-family: var(--mono); font-size: 12px; cursor: pointer;
}
.tl-new:hover { border-color: var(--acc); color: var(--ink); }
kbd { font-family: var(--mono); }
.tl-new kbd, .tl-phead kbd, .tl-key kbd { padding: 1px 4px; background: var(--acc); color: var(--bg); font-size: 10px; font-weight: 800; line-height: 14px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 8px; }
.tl-chip, .tl-link, .tl-from {
  min-height: 30px; padding: 0 10px; border: 1px solid var(--line-3); background: transparent; color: var(--ink-2);
  font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer;
}
.tl-chip:hover, .tl-link:hover, .tl-from:hover { border-color: var(--acc); color: var(--acc); }
.tl-chip[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--bg); }
.tl-chip[aria-pressed="true"] .tl-smeta { color: var(--bg); }
.tl-link { background: #1C1628; color: #D2B8FF; }
.tl-link.is-new { border-style: dashed; background: transparent; }

/* pomodoro */
.tl-pomo { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line-2); background: #121016; }
.tl-pomo.is-run { border-color: var(--line-3); }
.tl-pomo.is-run.is-break { border-color: #3F4A1F; }
.tl-phead { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--mute); }
.tl-ptabs { display: flex; border: 1px solid var(--line-2); }
.tl-ptab { flex: 1 1 0; min-height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--mute); font-family: var(--mono); font-size: 11px; font-weight: 700; cursor: pointer; }
.tl-ptab:hover { color: var(--ink); }
.tl-ptab[aria-checked="true"] { background: var(--acc); color: var(--bg); }
.tl-pomo.is-break .tl-ptab[aria-checked="true"] { background: var(--brk); }
.tl-pring { position: relative; align-self: center; }
.tl-pring svg { display: block; }
.tl-ptrack { stroke: #221D2E; }
.tl-parc { stroke: var(--acc); transition: stroke-dashoffset 0.6s linear; }
.tl-pomo.is-break .tl-parc { stroke: var(--brk); }
.tl-pcenter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tl-pname { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--mute); }
.tl-pomo.is-run .tl-pname { color: var(--acc); }
.tl-pomo.is-run.is-break .tl-pname { color: var(--brk); }
.tl-pclock { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tl-pomo--sheet .tl-pclock { font-size: 44px; }
.tl-pround { font-size: 11px; color: var(--mute); }
.tl-pdots { display: flex; justify-content: center; gap: 8px; }
.tl-pdots span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line-3); }
.tl-pdots span.is-on { background: var(--acc); border-color: var(--acc); }
.tl-pdots span.is-next { border: 2px solid var(--acc); }
.tl-pbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tl-pmain, .tl-pbtn { min-height: 40px; padding: 0 4px; font-family: var(--mono); font-size: 12px; cursor: pointer; }
.tl-pmain { background: var(--acc); border: 0; color: var(--bg); font-weight: 800; }
.tl-pomo.is-break .tl-pmain { background: var(--brk); }
.tl-pmain:hover { background: var(--acc-hi); }
.tl-pbtn { background: transparent; border: 1px solid var(--line-3); color: var(--ink-2); }
.tl-pbtn:hover { border-color: var(--acc); color: var(--ink); }
.tl-pdim { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 0; background: transparent; border: 0; color: var(--ink-2); font-family: var(--sans); font-size: 13px; text-align: left; cursor: pointer; }
.tl-sw2 { position: relative; flex-shrink: 0; width: 38px; height: 22px; border: 1px solid var(--line-3); }
.tl-sw2 span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--mute); transition: left 0.15s; }
.tl-pdim[aria-checked="true"] .tl-sw2 { background: var(--acc); border-color: var(--acc); }
.tl-pdim[aria-checked="true"] .tl-sw2 span { left: 19px; background: var(--bg); }
.tl-ppres { display: flex; gap: 6px; }
.tl-ppre { flex: 1 1 0; min-height: 32px; padding: 0 4px; background: transparent; border: 1px solid var(--line-2); color: var(--mute); font-family: var(--mono); font-size: 11px; font-weight: 700; cursor: pointer; }
.tl-ppre[aria-pressed="true"] { background: #1C1628; border-color: var(--acc); color: var(--ink); }
.tl-pstat { margin: 0; padding-top: 10px; border-top: 1px solid #221D2E; font-size: 11px; line-height: 1.6; color: var(--mute); }
.tl-pnote { color: #D2B8FF; }

/* cabecera de la nota */
.tl-granted { margin: 0; padding: 6px 8px; font-size: 12px; color: var(--acc); }
.tl-granted.is-fresh { animation: tlgrant 1.6s ease-out; }
@keyframes tlgrant { from { background: #2A1F3D; } to { background: transparent; } }
.tl-msg { margin: 0; padding: 6px 8px; font-size: 13px; color: var(--err); }
.tl-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.tl-bar .root { margin: 0; padding: 0; font-size: 12px; font-weight: 400; color: var(--dim); }
.tl-view { display: inline-flex; border: 1px solid var(--line-3); }
.tl-vbtn { min-height: 32px; padding: 0 12px; border: 0; background: transparent; color: var(--ink-2); font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer; }
.tl-vbtn:hover { color: var(--acc); }
.tl-vbtn[aria-pressed="true"] { background: var(--acc); color: var(--bg); font-weight: 800; }
.tl-h1 { margin: 0; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.tl-h1btn { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: text; }
.tl-h1btn:hover { color: var(--acc-hi); }
.tl-h1in { width: 100%; padding: 0 0 4px; background: transparent; border: 0; border-bottom: 2px solid var(--acc); color: var(--ink); font-family: var(--mono); }
.tl-h1in:focus { outline: none; }
.tl-h1tag { color: var(--acc); }
.tl-break { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 16px; border: 1px solid #3F4A1F; background: #14160E; }
.tl-breathe { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--brk); background: #1E2410; animation: tlbreathe 8s ease-in-out infinite; }
@keyframes tlbreathe { 0%, 100% { transform: scale(0.85); opacity: 0.55; } 50% { transform: scale(1.08); opacity: 1; } }
.tl-breaktxt { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); font-size: 15px; color: #D8D6CF; }
.tl-breakh { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--brk); font-variant-numeric: tabular-nums; }
.tl-rec { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--acc); }
.tl-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--err); animation: tlrec 1s ease-in-out infinite; }
@keyframes tlrec { 50% { opacity: 0.35; } }

/* editor */
.tl-edwrap { position: relative; max-width: 740px; transition: opacity 0.3s; }
.tl-edwrap.is-break { opacity: 0.4; }
.tl-ed { position: relative; min-height: 240px; padding: 4px 0 40px; outline: none; font-family: var(--sans); font-size: 17px; line-height: 1.7; color: #D8D6CF; caret-color: var(--acc); overflow-wrap: anywhere; }
.tl-ed.is-empty::before { content: attr(data-ph); position: absolute; top: 4px; left: 0; color: var(--dim); pointer-events: none; }
.tl-ed > * { transition: opacity 0.25s; }
.tl-ed p, .tl-ro p { margin: 0 0 12px; }
.tl-ed h2, .tl-ro h2 { margin: 26px 0 6px; font-family: var(--mono); font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.tl-ed h3, .tl-ro h3 { margin: 20px 0 4px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.tl-ed > :first-child, .tl-ro > :first-child { margin-top: 0; }
.tl-ed b, .tl-ro b { color: #F2F0EA; font-weight: 700; }
.tl-ed i, .tl-ro i { color: var(--ink); }
.tl-ed code, .tl-ro code { padding: 0 4px; background: #1C1628; font-family: var(--mono); font-size: 0.88em; }
.tl-ed ul, .tl-ed ol, .tl-ro ul, .tl-ro ol { margin: 0 0 12px; padding-left: 26px; }
.tl-ed li, .tl-ro li { margin: 2px 0; }
.tl-ed ul li::marker, .tl-ro ul li::marker { color: var(--acc); }
.tl-ed ul.chk, .tl-ro ul.chk { list-style: none; padding-left: 0; }
.tl-ed ul.chk li, .tl-ro ul.chk li { position: relative; padding-left: 32px; }
.tl-ed ul.chk li::before, .tl-ro ul.chk li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 18px; height: 18px; border: 1px solid #5A4A7A; box-sizing: border-box; cursor: pointer; }
.tl-ed ul.chk li[data-done="true"], .tl-ro ul.chk li[data-done="true"] { color: var(--dim); text-decoration: line-through; }
.tl-ed ul.chk li[data-done="true"]::before, .tl-ro ul.chk li[data-done="true"]::before { background: var(--acc); border-color: var(--acc); }
.tl-ed ul.chk li[data-done="true"]::after, .tl-ro ul.chk li[data-done="true"]::after { content: "✓"; position: absolute; left: 4px; top: 0.12em; font-size: 13px; font-weight: 800; color: var(--bg); text-decoration: none; }
.tl-ed blockquote, .tl-ro blockquote { margin: 14px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--acc); color: var(--ink-2); font-style: italic; }
.tl-ed hr, .tl-ro hr { border: 0; border-top: 1px dashed var(--line-3); margin: 22px 0; }
.tl-ed figure, .tl-ro figure { margin: 10px 0 16px; }
.tl-ed figure img, .tl-ro figure img { display: block; max-width: min(100%, 560px); height: auto; max-height: 420px; object-fit: contain; border: 1px solid var(--line-2); background: #0B0A0F; }
.tl-sketch { display: block; width: 100%; max-width: 520px; height: auto; border: 1px solid var(--line-2); background: #0B0A0F; }
.tl-stroke.s-ink { stroke: var(--ink); } .tl-stroke.s-acc { stroke: #B58CFF; } .tl-stroke.s-lime { stroke: #C6F432; }
.lk { padding: 0 6px; background: #1C1628; border: 1px solid var(--line-3); font-family: var(--mono); font-size: 0.8em; font-weight: 700; font-style: normal; color: #D2B8FF; cursor: pointer; white-space: nowrap; }
.lk:hover { border-color: var(--acc); }
.tg { font-family: var(--mono); font-size: 0.85em; font-weight: 700; font-style: normal; color: var(--acc); cursor: pointer; }
.tl-ed ::selection { background: #4A3570; }
.tl-noimg { font-size: 12px; color: var(--dim); }

/* barra flotante y menú / */
.tl-tb { position: fixed; z-index: 30; display: flex; align-items: center; gap: 1px; padding: 4px; background: #16121F; border: 1px solid var(--line-3); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); white-space: nowrap; }
.tl-tb[hidden], .tl-slash[hidden] { display: none; }
.tl-tbb { min-width: 34px; height: 34px; padding: 0 8px; border: 0; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 15px; cursor: pointer; }
.tl-tbb:hover { background: #2A2240; color: var(--acc-hi); }
.tl-tb-b { font-weight: 800; } .tl-tb-i { font-style: italic; font-family: Georgia, serif; } .tl-tb-u { text-decoration: underline; } .tl-tb-s { text-decoration: line-through; } .tl-tb-sm { font-size: 12px; font-weight: 800; }
.tl-tb-plus { font-size: 20px; font-weight: 800; color: var(--acc); }
.tl-tbsep { width: 1px; height: 22px; margin: 0 4px; background: var(--line-3); }
.tl-slash { position: fixed; z-index: 31; width: 300px; max-height: 360px; overflow: auto; padding: 4px; background: #16121F; border: 1px solid var(--line-3); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.tl-slashh { margin: 0; padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--mute); }
.tl-slashi { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 12px 0 6px; border: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 14px; text-align: left; cursor: pointer; }
.tl-slashi:hover, .tl-slashi[aria-selected="true"] { background: #221B30; }
.tl-slashic { width: 28px; flex-shrink: 0; color: var(--acc); font-family: var(--mono); font-weight: 800; text-align: center; }
.tl-slashl { flex-grow: 1; }
.tl-slashk { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* pie de la nota */
.tl-bottom { display: flex; flex-direction: column; gap: 14px; max-width: 740px; }
.tl-hint { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--dim); }
.tl-sec { padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.tl-sech { margin: 0; padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--mute); }
.tl-backs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tl-backs li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.tl-snip { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tl-ro { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: #D8D6CF; }
.tl-tagl .tl-ro { width: 100%; }
.tl-empty, .tl-undo { margin: 0; padding: 14px 8px; font-size: 14px; line-height: 1.55; color: var(--mute); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn.tl-mini { min-height: 32px; padding: 0 10px; font-size: 12px; }
.tl-status { margin: 0; padding: 0; }

/* paleta: mismas filas que el árbol de ~/mpe */
.tl-gh { margin: 10px 0 2px; padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--mute); }
.tl-gh:first-child { margin-top: 0; }
.node--cmd .node__nm { color: var(--acc); font-weight: 700; }
.node--cmd .node__br { color: var(--acc); }
.node--new .node__nm { color: var(--acc-hi); }

/* lienzo */
.tl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line-2); background: #121016; }
.tl-tool { min-height: 34px; padding: 0 12px; border: 0; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer; }
.tl-tool:hover { color: var(--acc); }
.tl-tool[aria-pressed="true"] { background: var(--acc); color: var(--bg); }
.tl-tool:disabled { opacity: 0.4; cursor: default; }
.tl-sep { width: 1px; height: 26px; margin: 0 6px; background: var(--line-2); }
.tl-swatches { display: inline-flex; gap: 4px; padding: 0 4px; }
.tl-sw { width: 26px; height: 26px; padding: 0; border: 2px solid transparent; cursor: pointer; }
.tl-sw[aria-pressed="true"] { border-color: var(--ink); outline: 1px solid var(--bg); outline-offset: -4px; }
.s-bg-ink { background: #E8E6DF; } .s-bg-acc { background: #B58CFF; } .s-bg-lime { background: #C6F432; }
.tl-status2 { font-size: 12px; color: var(--mute); }
.tl-scroll { overflow: auto; max-height: min(70dvh, 680px); border: 1px solid var(--line-2); background-color: #0B0A0F; background-image: radial-gradient(#221D2E 1px, transparent 1px); background-size: 20px 20px; }
.tl-board { position: relative; touch-action: none; }
.tl-board.is-pen { cursor: crosshair; }
.tl-board.is-pen .tl-card { pointer-events: none; }
.tl-board.is-arrow .tl-card { cursor: pointer; }
.tl-ink { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.tl-arrow { fill: none; stroke: #5A4A7A; stroke-width: 1.6; }
.tl-ahead { fill: #5A4A7A; }
.tl-card { position: absolute; background: #121016; border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); user-select: none; cursor: grab; }
.tl-card:hover { border-color: #5A4A7A; }
.tl-card.is-drag { cursor: grabbing; border-color: var(--acc); z-index: 2; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
.tl-card.is-armed { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
.tl-cardh { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 28px; padding: 0 2px 0 10px; border-bottom: 1px solid #221D2E; }
.tl-cardb { padding: 10px 12px 12px; font-size: 14px; line-height: 1.5; max-height: 260px; overflow: hidden; }
.tl-cardb figure img { max-height: 150px; }
.tl-cardb .tl-sketch { max-width: 100%; }
.tl-act { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--mute); cursor: pointer; }
.tl-act:hover { color: var(--acc); }

/* diálogos: F8, boceto y hojas del móvil */
.tl-dlg {
  width: min(880px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line-3); background: var(--bg); color: var(--ink);
  font-family: var(--mono); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.tl-dlg[open] { display: flex; flex-direction: column; gap: 16px; padding: 22px; overflow: auto; }
.tl-dlg::backdrop { background: rgba(6, 5, 9, 0.75); }
.tl-dlg.is-sheet { width: min(560px, 100vw); max-width: 100vw; max-height: 82dvh; margin: auto auto 0; border-width: 1px 0 0; background: #16121F; }
.tl-dlg.is-sheet[open] { gap: 12px; padding: 6px 16px 20px; animation: tlsheet 0.22s ease-out; }
@keyframes tlsheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.tl-sheeth { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tl-grab { width: 40px; height: 4px; margin-top: 4px; background: var(--line-3); }
.tl-sheetrow { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.tl-sheetrow h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--mute); }
.tl-sheetb { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tl-sheetb .tl-slists { gap: 2px; }
.tl-sheetb .tl-srow { min-height: 46px; font-size: 14px; }
.tl-sheetb .tl-new { min-height: 48px; justify-content: center; }
.tl-sheetb .tl-pomo { border: 0; padding: 0; background: transparent; }
.tl-sheetb .tl-ptab, .tl-sheetb .tl-pmain, .tl-sheetb .tl-pbtn, .tl-sheetb .tl-ppre { min-height: 46px; font-size: 13px; }
.tl-sheetb .tl-pdim { min-height: 48px; font-size: 15px; }
.tl-sbox { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 1px solid var(--line-3); background: #121016; }
.tl-sbox:focus-within { border-color: var(--acc); }
.tl-sprompt { font-weight: 800; color: var(--acc); }
.tl-sbox .tl-in { flex-grow: 1; border: 0; padding: 0; background: transparent; }
.tl-sres .node { grid-template-columns: 30px minmax(0, 1fr) auto; }
.tl-sres .node__hint { display: none; }
.tl-insgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tl-ins { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 76px; padding: 12px; background: #121016; border: 1px solid var(--line-2); color: var(--ink); font-family: var(--sans); font-size: 15px; text-align: left; cursor: pointer; }
.tl-ins:hover { border-color: var(--acc); }
.tl-insic { font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--acc); min-width: 26px; }
.tl-insk { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.tl-moreb { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 6px; background: transparent; border: 0; border-bottom: 1px solid #221D2E; color: var(--ink); font-family: var(--sans); font-size: 16px; text-align: left; cursor: pointer; }
.tl-morel { display: flex; flex-direction: column; gap: 2px; }
.tl-tips li { display: flex; align-items: baseline; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #221D2E; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: #D8D6CF; }
.tl-dlgh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tl-dlgh h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; }
.tl-p { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.tl-small { margin: 0; font-size: 12px; line-height: 1.5; color: var(--mute); }
.tl-small:empty { display: none; }
.tl-in { width: 100%; min-height: 44px; padding: 0 12px; background: #121016; border: 1px solid var(--line-3); color: var(--ink); font-family: var(--sans); font-size: 16px; }
.tl-in:focus { outline: none; border-color: var(--acc); }
.tl-skarea { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: #0B0A0F; border: 1px solid var(--line-2); touch-action: none; cursor: crosshair; }
.tl-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.tl-opt { display: flex; flex-direction: column; gap: 6px; padding: 14px; text-align: left; background: var(--bg); border: 1px solid var(--line-2); color: var(--ink); font-family: var(--mono); cursor: pointer; }
.tl-opt:hover { border-color: #5A4A7A; }
.tl-opt[aria-checked="true"] { background: #1C1628; border-color: var(--acc); }
.tl-opttag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--acc); }
.tl-optt { font-size: 16px; font-weight: 800; }
.tl-optd { font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.tl-panel { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line-2); background: #121016; }
.tl-qr { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.tl-qrrow { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.tl-qrc { width: 260px; height: 260px; image-rendering: pixelated; background: #fff; }
.tl-qrtxt { flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; }
.tl-prog { width: 100%; height: 6px; background: #221D2E; }
.tl-prog span { display: block; width: 0; height: 100%; background: var(--acc); }
.tl-video { width: 100%; max-width: 420px; background: #000; }
.tl-row2 { display: flex; gap: 8px; width: 100%; }
.tl-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.tl-cardx { padding: 16px; border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.tl-cardxh { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--mute); }
.tl-switchrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tl-switch { position: relative; flex-shrink: 0; width: 48px; height: 28px; padding: 0; border: 1px solid var(--line-3); background: transparent; cursor: pointer; }
.tl-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--mute); transition: left 0.15s; }
.tl-switch[aria-checked="true"] { background: var(--acc); border-color: var(--acc); }
.tl-switch[aria-checked="true"] span { left: 23px; background: var(--bg); }
.tl-lockf { display: flex; flex-direction: column; gap: 8px; }
.tl-lockf[hidden] { display: none; }

/* pie: 7 teclas con nombre (escritorio) · formato + 4 botones (móvil) */
.tl-keys { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 6px 0; }
.tl-key { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 6px; background: transparent; border: 1px solid var(--line); color: var(--ink-2); font-family: var(--mono); font-size: 12px; cursor: pointer; }
.tl-key:hover, .tl-key:focus-visible { border-color: #5A4A7A; color: var(--ink); }
.tl-key--pomo { font-variant-numeric: tabular-nums; }
.tl-key--pomo.is-run { background: #1C1628; border-color: var(--acc); color: var(--ink); font-weight: 800; }
.tl-key--pomo.is-run.is-break { border-color: var(--brk); }
.tl-mfmt, .tl-mnav { display: none; }
.tl-mtop { display: none; }

@media (max-width: 900px) and (min-width: 701px) {
  body.talila main { grid-template-columns: 230px minmax(0, 1fr); column-gap: 24px; }
}
@media (max-width: 700px) {
  body.talila main { display: flex; flex-direction: column; align-items: stretch; padding-top: 8px; gap: 12px; }
  body.talila .prompt { display: none; }
  body.talila.tl-locked .prompt { display: flex; }
  body.talila .tl-side { display: none; }
  .tl-mtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -4px 0 0; }
  .tl-mnotes { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; padding: 0 8px 0 0; background: transparent; border: 0; color: var(--ink-2); font-family: var(--mono); font-size: 13px; font-weight: 700; cursor: pointer; }
  .tl-mnotes span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tl-pomochip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; background: #1C1628; border: 1px solid var(--line-3); color: var(--ink); font-family: var(--mono); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; }
  .tl-pomochip.is-run { border-color: var(--acc); color: var(--acc-hi); }
  .tl-pomochip.is-run.is-break { border-color: var(--brk); color: var(--brk); }
  .tl-pagev .tl-bar { display: none; }
  .tl-alt .tl-bar .tl-view { display: none; }
  .tl-h1 { font-size: 28px; }
  .tl-ed { min-height: 160px; font-size: 17px; }
  .tl-hint { display: none; }
  body.talila .keys { position: sticky; bottom: 0; z-index: 20; background: var(--bg); }
  body.talila #keys-tl:not([hidden]) { padding: 0; display: block; }
  body.talila .tl-keys { display: none; }
  body.talila .tl-mfmt { display: flex; gap: 2px; overflow-x: auto; padding: 4px 8px; border-bottom: 1px solid var(--line-2); background: #121016; scrollbar-width: none; }
  body.talila.tl-alt-on .tl-mfmt { display: none; }
  .tl-mfmt .tl-tbb { flex: 0 0 auto; min-width: 42px; height: 42px; font-size: 16px; }
  body.talila .tl-mnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tl-mnavb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; background: transparent; border: 0; color: var(--ink-2); font-family: var(--mono); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
  .tl-mnavb[aria-expanded="true"] { background: #1C1628; color: var(--ink); }
  .tl-mnav--pomo.is-run { color: var(--acc); }
  .tl-mnav--pomo.is-run.is-break { color: var(--brk); }
  .tl-dlg[open] { padding: 16px; }
  .tl-qrc { width: 220px; height: 220px; }
  .tl-scroll { max-height: 60dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-breathe, .tl-dot, .tl-line span, .tl-parc, .tl-dlg.is-sheet[open] { animation: none; transition: none; }
}

/* ---------- Huevo de pascua: Bitcoin en vivo ----------
 * Escritorio y tablet: precio grande, estadísticas, temporalidades y gráfico de
 * velas con volumen. Móvil (≤700 px): vista compacta con pestañas deslizables,
 * gráfico táctil y cuatro botones abajo. */
body.btc { --acc: #F7931A; --acc-hi: #FFB75A; --bt-up: #3FB68B; --bt-dn: #F05D5E; }
.node--btc .node__nm { font-weight: 700; color: #F7931A; }
.node--btc .node__meta { font-size: 12px; font-weight: 800; color: #F7931A; }
body.btc main { max-width: 1180px; }
.bt { display: flex; flex-direction: column; gap: 16px; min-width: 0; outline: none; }
.bt-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 32px; }
.bt-pricebox { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bt-src { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--mute); }
.bt-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--mute); }
.bt-dot.is-live { background: var(--bt-up); box-shadow: 0 0 0 0 rgba(63, 182, 139, 0.6); animation: bt-pulse 2s infinite; }
.bt-dot.is-loading, .bt-dot.is-reconnecting { background: var(--acc); }
.bt-dot.is-offline, .bt-dot.is-error { background: var(--bt-dn); }
@keyframes bt-pulse { 70% { box-shadow: 0 0 0 7px rgba(63, 182, 139, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 182, 139, 0); } }
.bt-big { margin: 0; font-size: clamp(40px, 6vw, 68px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bt-big.is-up { animation: bt-up 0.9s ease-out; }
.bt-big.is-dn { animation: bt-dn 0.9s ease-out; }
@keyframes bt-up { from { color: var(--bt-up); } to { color: var(--ink); } }
@keyframes bt-dn { from { color: var(--bt-dn); } to { color: var(--ink); } }
.bt-chg { margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bt-chg.is-up { color: var(--bt-up); }
.bt-chg.is-dn { color: var(--bt-dn); }
.bt-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 6px 28px; margin: 0; }
.bt-stats div { display: flex; flex-direction: column; gap: 4px; }
.bt-stats dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--mute); }
.bt-stats dd { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.bt-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.bt-bar2 { display: flex; flex-wrap: wrap; gap: 10px; }
.bt-seg { display: inline-flex; border: 1px solid var(--line-2); }
.bt-sbtn { min-width: 44px; min-height: 38px; padding: 0 12px; background: transparent; border: 0; border-right: 1px solid var(--line-2); color: var(--ink-2); font-family: var(--mono); font-size: 13px; font-weight: 700; cursor: pointer; }
.bt-sbtn:last-child { border-right: 0; }
.bt-sbtn:hover, .bt-sbtn:focus-visible { color: var(--ink); background: var(--bg-hi); outline: none; }
.bt-sbtn[aria-checked="true"] { background: var(--acc); color: var(--bg); }
.bt-chart { position: relative; min-width: 0; border: 1px solid var(--line); background: #0B0C09; }
.bt-chart.is-stale .bt-svg { opacity: 0.55; }
.bt-svg { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; user-select: none; }
.bt-grid { stroke: #1D1F18; stroke-width: 1; }
.bt-ax { fill: #8F8B80; font-family: var(--mono); font-size: 11px; }
.bt-up { fill: var(--bt-up); } .bt-dn { fill: var(--bt-dn); }
.bt-wup { stroke: var(--bt-up); stroke-width: 1; } .bt-wdn { stroke: var(--bt-dn); stroke-width: 1; }
.bt-vup { fill: var(--bt-up); opacity: 0.3; } .bt-vdn { fill: var(--bt-dn); opacity: 0.3; }
.bt-line { fill: none; stroke: #F7931A; stroke-width: 2; stroke-linejoin: round; }
.bt-area { fill: #F7931A; opacity: 0.08; }
.bt-lastl { stroke-width: 1; stroke-dasharray: 3 4; }
.bt-lastl.is-up { stroke: var(--bt-up); } .bt-lastl.is-dn { stroke: var(--bt-dn); }
.bt-lastt { fill: #0E0F0C; font-family: var(--mono); font-size: 11px; font-weight: 800; }
.bt-cross { stroke: #7A5A2A; stroke-width: 1; stroke-dasharray: 2 3; }
.bt-tip { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: rgba(14, 15, 12, 0.94); border: 1px solid var(--line-3); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); pointer-events: none; }
.bt-tip.is-left { left: auto; right: 82px; }
.bt-tip[hidden] { display: none; }
.bt-tipt { color: var(--mute); }
.bt-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-size: 14px; color: var(--mute); }
.bt-msg[hidden] { display: none; }
.bt-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--mute); }
.bt-help { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line-2); border-left: 3px solid var(--acc); background: var(--bg-hi); }
.bt-help[hidden] { display: none; }
.bt-help h2 { margin: 0 0 2px; font-size: 18px; color: var(--acc); }
.bt-help p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.bt-help button { align-self: flex-start; }
.bt-keys { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 6px 0; }
.bt-key { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 6px; background: transparent; border: 1px solid var(--line); color: var(--ink-2); font-family: var(--mono); font-size: 12px; cursor: pointer; }
.bt-key:hover, .bt-key:focus-visible { border-color: #7A5A2A; color: var(--ink); }
.bt-key kbd { padding: 1px 5px; background: var(--acc); color: var(--bg); font-family: var(--mono); font-size: 10px; font-weight: 800; }
.bt-mnav { display: none; }
@media (max-width: 900px) and (min-width: 701px) {
  .bt-stats { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 700px) {
  body.btc main { padding-top: 10px; gap: 12px; }
  body.btc .prompt label, body.btc .prompt input { font-size: 20px; }
  .bt { gap: 12px; }
  .bt-top { display: contents; }
  .bt-pricebox { order: 1; } .bt-bar { order: 2; } .bt-chart { order: 3; } .bt-help { order: 5; }
  .bt-big { font-size: 40px; }
  .bt-chg { font-size: 14px; }
  .bt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); order: 4; }
  .bt-stats div { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .bt-stats div:nth-child(odd) { border-right: 1px solid var(--line); }
  .bt-stats div:nth-last-child(-n+2) { border-bottom: 0; }
  .bt-stats dd { font-size: 15px; }
  .bt-bar { flex-direction: column; align-items: stretch; }
  .bt-tfs { overflow-x: auto; scrollbar-width: none; }
  .bt-tfs .bt-sbtn { flex: 1 0 auto; min-height: 40px; }
  .bt-bar2 { display: none; }
  .bt-tip { top: 6px; left: 6px; font-size: 11px; }
  .bt-tip.is-left { right: 6px; }
  .bt-note { display: none; }
  body.btc .keys { position: sticky; bottom: 0; z-index: 20; background: var(--bg); }
  body.btc #keys-btc:not([hidden]) { padding: 0; display: block; }
  body.btc .bt-keys { display: none; }
  body.btc .bt-mnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bt-mnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; background: transparent; border: 0; color: var(--ink-2); font-family: var(--mono); font-size: 11px; font-weight: 700; cursor: pointer; }
  .bt-mic { font-size: 18px; line-height: 1; font-weight: 800; color: var(--acc); }
}
@media (prefers-reduced-motion: reduce) {
  .bt-dot.is-live, .bt-big.is-up, .bt-big.is-dn { animation: none; }
}

/* ---------- PDF de lo que ves (solo al imprimir) ---------- */
#print { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; padding: 0 !important; display: block !important; min-height: 0 !important; }
  body > *:not(#print) { display: none !important; }
  #print { display: block; color: #111; font-family: var(--mono); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-page { padding: 19mm; font-size: 12pt; line-height: 1.5; }
  .p-page.p-land { padding: 12mm 14mm; }
  .p-top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid #6B3FC4; font-size: 10pt; font-weight: 700; }
  .p-page h1 { margin: 16px 0 2px; font-size: 26pt; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
  .p-dim { margin: 0; color: #555; font-size: 10pt; }
  .p-doc { margin-top: 14px; font-family: var(--sans); font-size: 11.5pt; line-height: 1.55; color: #111; }
  .p-doc h2 { font-family: var(--mono); font-size: 15pt; margin: 14px 0 4px; color: #111; }
  .p-doc h3 { font-size: 12.5pt; margin: 12px 0 4px; color: #111; }
  .p-doc p { margin: 0 0 8px; } .p-doc b, .p-doc i, .p-doc u, .p-doc s, .p-doc code { color: #111; background: none; }
  .p-doc blockquote { margin: 8px 0; padding-left: 12px; border-left: 2px solid #6B3FC4; color: #333; }
  .p-doc ul.chk li::before { border-color: #6B3FC4; } .p-doc ul.chk li[data-done="true"]::before { background: #6B3FC4; }
  .p-doc ul.chk li[data-done="true"] { color: #777; }
  .p-doc .lk { background: #EEE8FA; color: #4B2A99; border-color: #C9B8EE; } .p-doc .tg { color: #6B3FC4; }
  .p-doc figure img { max-width: 120mm; max-height: 90mm; border-color: #ccc; background: #fff; }
  .p-doc .tl-sketch { max-width: 110mm; background: #fff; border-color: #ccc; }
  .p-doc hr { border-top-color: #bbb; }
  .p-canvas .tl-ro, .p-canvas .tl-ro b { color: #111; }
  .p-item { display: grid; grid-template-columns: 16mm 1fr; gap: 4mm; padding: 6px 0; border-bottom: 1px solid #ddd; break-inside: avoid; font-family: var(--sans); font-size: 11.5pt; }
  .p-time { font-family: var(--mono); font-size: 9pt; color: #888; padding-top: 2px; }
  .p-body { display: flex; flex-direction: column; gap: 4px; white-space: pre-wrap; }
  .p-img { max-width: 120mm; max-height: 90mm; object-fit: contain; }
  .p-body .tl-sketch { max-width: 110mm; background: #fff; border: 1px solid #ccc; }
  #print .s-ink { stroke: #111; } #print .s-acc { stroke: #6B3FC4; } #print .s-lime { stroke: #6E8F00; }
  .p-canvas { position: relative; margin-top: 10px; overflow: hidden; }
  .p-canvas .tl-board { background: #fff; }
  .p-canvas .tl-card { background: #fff; border: 1px solid #999; box-shadow: none; color: #111; }
  .p-canvas .tl-cardh { color: #666; border-color: #ddd; }
  .p-canvas .tl-txt { color: #111; }
  .p-canvas .tl-link { background: #EEE8FA; color: #4B2A99; border-color: #C9B8EE; }
  .p-canvas .tl-tag { color: #6B3FC4; }
  .p-canvas .tl-arrow { stroke: #888; } .p-canvas .tl-ahead { fill: #888; }
  .p-canvas .tl-box { border-color: #6B3FC4; }
  .p-canvas .tl-box[aria-checked="true"] { background: #6B3FC4; }
  .p-foot { margin-top: 24px; padding-top: 8px; border-top: 1px solid #111; display: flex; justify-content: space-between; gap: 12px; font-size: 9pt; color: #555; }
}