@font-face { font-family: 'Courier Prime'; src: url(fonts/courier-prime.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Special Elite'; src: url(fonts/special-elite.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --paper: #f7f6f2;
  --ink: #1d1d1b;
  --mut: rgba(29, 29, 27, .46);
  --faint: rgba(29, 29, 27, .22);
  --rule: rgba(29, 29, 27, .075);
  --accent: #14a8cc;
  --tagc: #0e86a4;
  --bar: #ffffff;
  --barline: rgba(0, 0, 0, .07);
  --shadow: 0 6px 28px rgba(0, 0, 0, .06);
  --fs: 17px; --lh: 30px; --shift: -5px; --ls: 0;
  --font: 'Courier Prime', ui-monospace, monospace;
  --ui: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --gut: max(8px, env(safe-area-inset-left), env(safe-area-inset-right));
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141413;
    --ink: #e8e6e0;
    --mut: rgba(232, 230, 224, .5);
    --faint: rgba(232, 230, 224, .22);
    --rule: rgba(232, 230, 224, .065);
    --accent: #3fc4e4;
    --tagc: #63cfe9;
    --bar: #1f1f1d;
    --barline: rgba(255, 255, 255, .08);
    --shadow: 0 6px 28px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }
html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs)/var(--lh) var(--font);
  letter-spacing: var(--ls);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; letter-spacing: inherit; }

/* ───────── Estructura ─────────
   La página nunca se desplaza: el body es una caja fija del tamaño de lo que
   queda visible (el teclado le resta altura). Dentro, #feed es lo único que
   se desplaza y la barra va pegada al fondo de la caja, fuera del contenido. */
html { background: var(--paper); }
html, body { overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; left: 0; right: 0;
  top: var(--vvt, 0px);
  height: var(--vvh, 100%);
}
#feed {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
}
body.kb #bar { padding-bottom: 6px; }

/* ───────── Hojas ───────── */
#feed {
  padding: calc(env(safe-area-inset-top) + 6px) 0 0;
}
.day {
  position: relative;
  padding: 0 max(var(--gut), calc((100% - 680px) / 2));
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}
.day.today { content-visibility: visible; }
html[data-bg="lines"] .day {
  background-image: linear-gradient(transparent calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px));
  background-size: 100% var(--lh);
  background-position: 0 var(--shift);
}
html[data-bg="grid"] .day {
  background-image:
    linear-gradient(transparent calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px)),
    linear-gradient(90deg, transparent calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px));
  background-size: var(--lh) var(--lh);
  background-position: 0 var(--shift), center 0;
}

/* Separador de inicio y fin de día */
.dh, .df {
  height: calc(var(--lh) * 2);
  display: flex;
  align-items: flex-end;
  gap: 12px;
  font-size: 11px;
  line-height: var(--lh);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
  user-select: none; -webkit-user-select: none;
  transition: opacity .25s;
}
.dh span:first-child { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh .st, .df span { font: 400 10px/var(--lh) ui-monospace, Menlo, monospace; letter-spacing: 0; color: var(--faint); }
.df { align-items: center; justify-content: center; }
.df::before, .df::after { content: ''; flex: 1; max-width: 72px; height: 1px; background: var(--faint); opacity: .7; }
.df:empty, .df span:empty { visibility: hidden; }
.today .df { visibility: hidden; }

.bs { min-height: var(--lh); }
/* las líneas llegan hasta abajo: el espacio final es parte de la última hoja
   y la hoja de hoy llena la pantalla */
#feed > .day:last-of-type { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
.today .bs { min-height: calc(100svh - var(--lh) * 4 - env(safe-area-inset-top) - 6px); }
#feed > .today:last-of-type .bs { min-height: calc(100svh - var(--lh) * 4 - env(safe-area-inset-top) - 6px - 140px - env(safe-area-inset-bottom)); }

/* ───────── Bloques ───────── */
.b {
  position: relative;
  display: grid;
  grid-template-columns: 1.5em 1fr auto;
  align-items: start;
  transition: opacity .25s;
}
.m {
  position: relative;
  height: var(--lh);
  display: flex;
  align-items: center;
  color: var(--faint);
  user-select: none; -webkit-user-select: none;
}
:is(.b, .r)[data-type="text"] .m::before {
  content: ''; width: .55em; height: 1.5px; border-radius: 1px; background: currentColor;
}
.b.e:not(.cur) .m::before { opacity: 0; }

:is(.b, .r)[data-type="task"] .m { color: var(--ink); margin-left: -14px; padding-left: 14px; cursor: pointer; }
:is(.b, .r)[data-type="task"] .m::before {
  content: ''; width: .8em; height: .8em; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .75;
  transition: background-color .18s, opacity .18s;
}
:is(.b, .r).done .m::before { background: currentColor; opacity: .4; }
:is(.b, .r).done .m::after {
  content: ''; position: absolute; left: calc(14px + .27em); top: 50%;
  width: .2em; height: .38em;
  border: solid var(--paper); border-width: 0 1.6px 1.6px 0;
  transform: translateY(-62%) rotate(45deg);
}
.t {
  min-height: var(--lh);
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  caret-color: var(--accent);
}
.b.done .t { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--mut); }
.h {
  font: 400 9px/var(--lh) ui-monospace, Menlo, monospace;
  letter-spacing: 0;
  color: var(--faint);
  padding-left: 10px;
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
html[data-time="off"] .h { visibility: hidden; min-width: 0; padding: 0; }
.b.ph::after {
  content: 'Escribe…';
  position: absolute; left: 1.5em; top: 0;
  color: var(--faint);
  pointer-events: none;
}
::highlight(tag) { color: var(--tagc); }
.tg { color: var(--tagc); }

/* Enfoque: lo demás se desvanece mientras escribes */
html[data-focus="on"] body.editing .b:not(.cur),
html[data-focus="on"] body.editing .dh,
html[data-focus="on"] body.editing .df { opacity: .3; }

.b.flash { animation: flash 1.2s ease; }
@keyframes flash { 0%, 40% { background: color-mix(in srgb, var(--accent) 14%, transparent); } 100% { background: transparent; } }

/* ───────── A mano ───────── */
.b.ink { grid-template-columns: 1fr auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cvw { min-width: 0; }
.cv {
  display: block; width: 100%; height: auto;
  color: var(--ink);
  border-radius: 6px;
  transition: background-color .2s, box-shadow .2s;
}
.cv path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ink.on .cv {
  touch-action: none;
  background: color-mix(in srgb, var(--ink) 2.5%, transparent);
  box-shadow: inset 0 0 0 1px var(--faint);
}
.ink.sel .cv { box-shadow: inset 0 0 0 1.5px var(--accent); }
body.erasing .ink.on .cv { cursor: crosshair; }

/* ───────── Barra ───────── */
#bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 10px calc(env(safe-area-inset-bottom) + 6px);
  pointer-events: none;
  font-family: var(--ui);
}
.pill {
  pointer-events: auto;
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; max-width: 460px;
  padding: 3px 6px;
  background: var(--bar);
  border: 1px solid var(--barline);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.i {
  flex: 0 0 auto;
  width: 44px; height: 40px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--ink);
  touch-action: manipulation;
  cursor: pointer;
}
.i svg { width: 23px; height: 23px; fill: currentColor; }
.i:active { background: var(--rule); }
.i:disabled { opacity: .22; }
.i.on { color: var(--accent); }
body.inking .pill .n, body:not(.inking) .pill .d { display: none; }
.i .k2, body:not(.editing) .i .k1 { display: none; }
body:not(.editing) .i .k2 { display: block; }

#sug {
  pointer-events: auto;
  display: flex; gap: 6px; max-width: 460px; width: 100%;
  overflow-x: auto; scrollbar-width: none;
  padding: 0 4px;
}
#sug::-webkit-scrollbar { display: none; }
#sug[hidden] { display: none; }
#sug button {
  flex: 0 0 auto;
  border: 1px solid var(--barline); border-radius: 999px;
  background: var(--bar); color: var(--tagc);
  padding: 5px 12px; font: 500 14px/1.2 var(--ui);
  box-shadow: var(--shadow);
}

/* ───────── Barra lateral ───────── */
#scrim {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0, 0, 0, .16);
  opacity: 0; pointer-events: none;
  transition: opacity .28s;
  touch-action: none;
}
#side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  width: min(86vw, 340px);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--paper);
  border-right: 1px solid var(--rule);
  transform: translate3d(-102%, 0, 0);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  font: 400 16px/1.45 var(--font);
  letter-spacing: var(--ls);
  visibility: hidden;
}
body.side #side { transform: none; visibility: visible; }
body.side #scrim { opacity: 1; pointer-events: auto; }
body.side { overflow: hidden; }
.sh { padding: 14px 8px 6px 16px; display: flex; align-items: center; gap: 4px; }
.sh #q { flex: 1; width: auto; min-width: 0; }
#q {
  width: 100%;
  border: 0; border-radius: 10px;
  padding: 9px 12px;
  background: var(--rule);
  color: var(--ink);
  font: 400 16px/1.2 var(--ui);
  outline: none;
  -webkit-appearance: none; appearance: none;
}
#q::placeholder { color: var(--mut); }
.sb { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 0 40px; }
.sb[hidden], .ls button[hidden] { display: none; }
.ls { display: flex; flex-direction: column; }
.ls button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; padding: 9px 20px;
  border: 0; background: none; text-align: left;
  cursor: pointer;
}
.ls button:active, .r:active { background: var(--rule); }
.ls i { font: normal 12px/1 ui-monospace, Menlo, monospace; color: var(--mut); }
.ls .tg::before { content: '#'; }
h6 {
  margin: 22px 20px 6px;
  font: 500 10px/1 var(--ui);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mut);
}
h6[hidden] { display: none; }
.set { padding: 0 20px; font-family: var(--ui); font-size: 14px; }
.row { display: grid; gap: 6px; padding: 8px 0; }
.row > span { font-size: 12px; color: var(--mut); }
.opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.opts button {
  border: 1px solid var(--rule); border-radius: 8px;
  background: none; padding: 5px 10px; font-size: 14px; letter-spacing: 0;
  cursor: pointer;
}
.opts button.on { border-color: var(--ink); }
.opts button.new { border-color: var(--accent); color: var(--accent); }
.opts button:disabled { opacity: .6; }
.opts b { font: 400 12px/1 ui-monospace, Menlo, monospace; min-width: 26px; text-align: center; color: var(--mut); }

.lh { display: flex; align-items: center; gap: 4px; padding: 0 10px 4px 8px; font-size: 15px; }
.lh span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g { padding: 4px 0 10px; }
.gd {
  padding: 10px 20px 2px;
  font: 500 10px/1.4 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mut);
}
.r {
  display: grid; grid-template-columns: 1.4em 1fr auto; align-items: start;
  padding: 6px 20px; cursor: pointer;
  font-size: 15px; line-height: 1.45;
}
.r .m { height: 1.45em; }
.r .rt { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.r.done .rt { text-decoration: line-through; color: var(--mut); }
.r time { font: 400 9px/1.45rem ui-monospace, Menlo, monospace; color: var(--faint); padding-left: 8px; }
.r .th { width: 100%; max-height: 90px; color: var(--ink); }
.r .th path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.r .c { font: 12px/1.45 ui-monospace, Menlo, monospace; color: var(--mut); padding-left: 8px; }
.none { padding: 24px 20px; color: var(--mut); font-size: 14px; }

@media (hover: none) { .bs, .dh, .df, .m, .ink, .b { cursor: pointer; } .t { cursor: text; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
body.side #bar { opacity: 0; pointer-events: none; }
#bar { transition: opacity .2s; }

/* ───────── selección de bloques ───────── */
.b { touch-action: pan-y; transition: opacity .25s, transform .22s cubic-bezier(.2, .8, .2, 1); isolation: isolate; }
.b.drag { transition: none; }
.b.pk::before, .b.arm::before {
  content: ''; position: absolute; z-index: -1;
  inset: 0 -4px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.b.arm::before { background: color-mix(in srgb, var(--accent) 22%, transparent); }
body.selecting .b { cursor: pointer; -webkit-user-select: none; user-select: none; }
body.selecting .b > * { pointer-events: none; }
body.selecting .pill > :not(.s), body:not(.selecting) .pill .s { display: none; }
#selc { font: 500 14px/1 var(--ui); color: var(--mut); min-width: 2ch; text-align: center; }

/* ───────── frases ───────── */
:is(.b, .r)[data-type="quote"] .m { align-self: stretch; height: auto; justify-content: center; }
:is(.b, .r)[data-type="quote"] .m::before {
  content: ''; align-self: stretch; width: 2px; margin: calc(var(--lh) * .22) 0;
  border-radius: 1px; background: var(--accent); opacity: .75;
}
.r[data-type="quote"] .m::before { margin: .2em 0; }
:is(.b[data-type="quote"] .t, .r[data-type="quote"] .rt) { font-style: italic; }
.b[data-type="quote"].e.cur::after {
  content: 'Frase o cita…';
  position: absolute; left: 1.5em; top: 0;
  color: var(--faint); font-style: italic;
  pointer-events: none;
}

/* ───────── página de ajustes ───────── */
#prefs {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--paper);
  font: 400 16px/1.45 var(--font); letter-spacing: var(--ls);
  transform: translate3d(102%, 0, 0);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s;
  visibility: hidden;
}
body.prefs #prefs { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
#prefs .lh { padding: 10px 10px 4px 8px; }
#prefs .pb { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 40px; width: 100%; max-width: 680px; margin: 0 auto; }