:root {
  --ink: #1c1c1e;
  --paper: #fff;
  --line: #e4e4e6;
  --tab: #f7f7f8;
  --tab-ink: #1c1c1e;
  --muted: #8e8e93;
  --header-btn: #fff;
  --blue: #2f6bff;
  --today: #e34848;
  --fs: 13px;
  --lh: 18px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --kb: 0px;
  --focus-shift: 0px;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
html {
  position: fixed;
  inset: 0;
}
body {
  position: fixed;
  inset: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: #d8d8de;
  color: #1c1c1e;
  -webkit-user-select: none;
  user-select: none;
}
/* Permitir seleccionar/escribir solo en editores e inputs */
.write, .note-body, input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
#app {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  touch-action: manipulation;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 860px) {
  body { display: grid; place-items: center; min-height: 100dvh; }
  #app {
    width: 390px;
    height: 844px;
    min-height: 0;
    border-radius: 36px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  }
}

.theme-pradera,
#app.theme-pradera {
  background-color: #e8f0c8;
  background-image:
    radial-gradient(ellipse 120% 40% at 50% -5%, rgba(255,255,255,.55), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 860'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23f7f9ea'/><stop offset='.38' stop-color='%23e5f0c6'/><stop offset='1' stop-color='%23f3e0b8'/></linearGradient></defs><rect width='400' height='860' fill='url(%23g)'/><g fill='%23fff' opacity='.85'><ellipse cx='70' cy='54' rx='36' ry='14'/><ellipse cx='98' cy='48' rx='22' ry='12'/><ellipse cx='290' cy='88' rx='44' ry='16'/><ellipse cx='324' cy='80' rx='24' ry='12'/><ellipse cx='190' cy='34' rx='28' ry='11'/></g><g fill='none' stroke='%237a5a38' stroke-width='1.6' stroke-linecap='round' opacity='.85'><path d='M40 40c8-8 14-8 20 0'/><path d='M120 80c7-7 12-7 17 0'/><path d='M240 44c8-8 14-8 20 0'/><path d='M310 130c7-6 12-6 16 0'/><path d='M168 26c6-6 10-6 14 0'/><path d='M90 120c5-5 9-5 13 0'/></g><path d='M0 748c55-40 95-20 138 6s92 20 152-14 88-6 110 20v100H0z' fill='%23d2e49a'/><path d='M0 792c72-28 115 10 175-10s105 6 155-16 58 10 70 20v64H0z' fill='%23b8d07e'/><g transform='translate(8 670)'><path d='M34 98c-28-40-10-86 12-108 7 28 26 38 30 18-28 14-12 50-2 66z' fill='%23e07a32'/><path d='M56 104c12-34 36-48 42-20-20 7-27 24-20 40z' fill='%23f0a24c'/><rect x='40' y='102' width='6' height='34' rx='1.5' fill='%237a4a28'/></g><g transform='translate(318 682)'><path d='M40 86c24-44 8-80-8-98-9 26-28 34-30 14 24 9 14 44 8 58z' fill='%23e07a32'/><path d='M16 94c-9-28-30-42-36-16 18 7 24 20 20 36z' fill='%23f2b15c'/><rect x='28' y='90' width='6' height='36' rx='1.5' fill='%237a4a28'/></g></svg>");
  background-size: cover;
  background-position: center top;
}
.theme-cielo,
#app.theme-cielo { background: linear-gradient(#d9f1ff, #eef8ff 40%, #f7fbff); }
.theme-papel,
#app.theme-papel { background: #f3efe6; }
.theme-madera,
#app.theme-madera {
  background-color: #d7b48a;
  background-image: repeating-linear-gradient(90deg, rgba(120, 72, 32, .08) 0 2px, transparent 2px 14px), linear-gradient(#e6c79a, #c8956a);
}
.theme-rosa,
#app.theme-rosa { background: radial-gradient(circle at 20% 10%, #fff, transparent 40%), linear-gradient(#fde7ef, #f8c9d8 50%, #f3d5e4); }
.theme-oceano,
#app.theme-oceano { background: linear-gradient(#c7f3ff, #7fd4e8 45%, #e8fff8); }
.theme-noche,
#app.theme-noche { --paper: #1b1c22; --ink: #f2f2f4; --line: #32343c; --tab: #2c2e36; --tab-ink: #f2f2f4; --muted: #a0a0aa; background: #0e1016; color-scheme: dark; }
.theme-aurora,
#app.theme-aurora { background: linear-gradient(160deg, #b9f3d0, #c9d4ff 40%, #f7c8ef); }
.theme-atardecer,
#app.theme-atardecer { background: linear-gradient(#ffd6a8, #ff9ec4 45%, #b9a0ff); }
.theme-lino,
#app.theme-lino { background-color: #f7f1e6; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 4px); }
.theme-kraft,
#app.theme-kraft { background-color: #e7d3ad; background-image: radial-gradient(rgba(90, 60, 20, .08) 1px, transparent 1.2px); background-size: 7px 7px; }
.theme-formas,
#app.theme-formas { background: radial-gradient(circle at 12% 18%, #9ad7ff 0 70px, transparent 72px), radial-gradient(circle at 88% 30%, #ffd0e6 0 90px, transparent 92px), radial-gradient(circle at 70% 88%, #ffe08a 0 80px, transparent 82px), linear-gradient(#f4f7ff, #e7f6ef); }
.theme-botanica,
#app.theme-botanica { background-color: #fbf8f1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23c3b39a' stroke-width='1'><path d='M20 180c20-40 10-70 30-90'/><path d='M40 140c20-10 30 10 40-20'/><path d='M160 40c-10 30-30 20-20 50'/><circle cx='150' cy='150' r='16'/></g></svg>"); }
.theme-navidad,
#app.theme-navidad { background: linear-gradient(#12324f, #1d4d3a 70%, #0e2a22); }
.theme-nuevo,
#app.theme-nuevo { background: radial-gradient(circle at 50% 0, #3a3120, #121212 55%); }
.theme-halloween,
#app.theme-halloween { background: linear-gradient(#2a1240, #f27a1d 140%); }
.theme-primavera,
#app.theme-primavera { background: linear-gradient(#fff, #fde2ee 40%, #e7f8d8); }
.theme-verano,
#app.theme-verano { background: linear-gradient(#fff6d8, #9adcf5 55%, #ffe08a); }
.theme-navidad, #app.theme-navidad,
.theme-nuevo, #app.theme-nuevo,
.theme-halloween, #app.theme-halloween { --paper: rgba(255,255,255,.94); }

.transparent { --paper: rgba(255,255,255,.72); }
.theme-noche.transparent,
#app.theme-noche.transparent { --paper: rgba(20,22,28,.72); }
.snow::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -20% 0 auto;
  height: 140%;
  background-image: radial-gradient(circle, #fff 1px, transparent 1.4px);
  background-size: 28px 28px;
  opacity: .75;
  animation: fall 10s linear infinite;
  z-index: 5;
}
@keyframes fall { to { transform: translateY(80px); } }

.shell { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; z-index: 1; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 6px;
  transition: transform .32s cubic-bezier(.22,.8,.25,1);
  will-change: transform;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.topbar-left .month-pill { min-width: 0; }
.jump-today {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  border: 0;
  border-radius: 10px;
  padding: 4px 8px 4px 4px;
  background: var(--today);
  color: #fff;
  box-shadow: 0 2px 8px rgba(227, 72, 72, .35);
  line-height: 1;
}
.jump-today-chev {
  font-size: 18px;
  font-weight: 700;
  opacity: .95;
  padding: 0 2px;
}
.jump-today-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.jump-today-txt b {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: .95;
}
.jump-today-txt em {
  font-style: normal;
  font-size: 15px;
  font-weight: 750;
  margin-top: 1px;
}
.is-editing .topbar {
  transform: translateY(calc(-1 * var(--focus-shift)));
}
.focus-snap .topbar,
.focus-snap .stage {
  transition: none !important;
}
/* Al abrir día/nota: ocultar el cuaderno de detrás para que no se vea a través */
.has-sheet .shell {
  visibility: hidden;
  pointer-events: none;
}
.month-pill, .icon-btn, .back-btn {
  background: var(--header-btn);
  color: #1c1c1e;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.month-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 14px;
  padding: 6px 12px 6px 8px;
  text-align: left;
}
.month-pill svg, .icon-btn svg, .back-btn svg { width: 20px; height: 20px; }
.month-pill b { display: block; font-size: 15px; line-height: 1.1; font-weight: 700; }
.month-pill small { display: block; color: #8e8e93; font-size: 12px; font-weight: 500; }
.tools { display: flex; gap: 8px; }
.icon-btn, .back-btn {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
}

.stage {
  flex: 1;
  min-height: 0;
  padding: 2px 0 0;
  display: flex;
  position: relative;
  overflow: hidden;
  transition: transform .32s cubic-bezier(.22,.8,.25,1);
  will-change: transform;
}
.is-editing .stage {
  transform: translateY(calc(-1 * var(--focus-shift)));
}
.planner-wrap {
  --flip: 0;
  --curl: 0;
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 8px;
  touch-action: pan-y;
  perspective: 1600px;
  overflow: hidden;
}
.spread {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  gap: 0;
  padding: 4px 0 6px;
  transform-style: preserve-3d;
  will-change: transform;
}
.spread.single { grid-template-columns: 1fr; }
.spread.turn-next { animation: turnInNext .38s cubic-bezier(.2,.8,.2,1); }
.spread.turn-prev { animation: turnInPrev .38s cubic-bezier(.2,.8,.2,1); }
@keyframes turnInNext {
  from { transform: perspective(1400px) rotateY(-18deg) translateX(12%); opacity: .2; }
  to { transform: none; opacity: 1; }
}
@keyframes turnInPrev {
  from { transform: perspective(1400px) rotateY(18deg) translateX(-12%); opacity: .2; }
  to { transform: none; opacity: 1; }
}
.page {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
/* Vista semanal: 3 filas iguales → LU=JU, MA=VI, MI=SA+DO */
.week-spread .page.left,
.week-spread .page.right {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.page.left { padding-left: 26px; padding-right: 2px; z-index: 1; }
.page.right { padding-right: 26px; padding-left: 2px; z-index: 1; }
.page.full { padding: 0 16px; }
.spiral {
  position: relative;
  z-index: 6;
  margin: 2px 0;
  border-radius: 9px;
  overflow: hidden;
  background-color: rgba(20, 18, 16, .12);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17'><defs><linearGradient id='r' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23555'/><stop offset='.45' stop-color='%23111113'/><stop offset='1' stop-color='%23666'/></linearGradient></defs><ellipse cx='9' cy='8.5' rx='6.2' ry='5.4' fill='url(%23r)' stroke='%23fff' stroke-opacity='.35' stroke-width='.7'/><ellipse cx='9' cy='8.5' rx='2.2' ry='1.9' fill='%230c0c0e'/></svg>");
  background-size: 18px 17px;
  background-repeat: repeat-y;
  background-position: center top;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.page-curl {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 12;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 42%, rgba(0,0,0,.08) 48%, rgba(0,0,0,.22) 52%, rgba(255,255,255,.35) 56%, transparent 68%);
  mix-blend-mode: multiply;
}
.planner-wrap.dragging {
  touch-action: none;
  cursor: grabbing;
}
.planner-wrap.dragging .page-curl,
.planner-wrap.flip-out-next .page-curl,
.planner-wrap.flip-out-prev .page-curl {
  opacity: calc(var(--curl) * .85);
}
.planner-wrap.dragging .spread,
.planner-wrap.flip-out-next .spread,
.planner-wrap.flip-out-prev .spread {
  transition: none;
}
.planner-wrap.flip-cancel .page.left,
.planner-wrap.flip-cancel .page.right,
.planner-wrap.flip-cancel .page-curl {
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease, opacity .22s ease;
}
/* Atrás: girar página izquierda hacia la derecha */
.planner-wrap.drag-prev .page.left,
.planner-wrap.flip-out-prev .page.left {
  transform-origin: right center;
  transform: perspective(1400px) rotateY(calc(var(--flip) * 95deg));
  filter: brightness(calc(1 - var(--curl) * .12));
  box-shadow: calc(var(--curl) * 18px) 0 28px rgba(0,0,0,.22);
  z-index: 8;
}
/* Adelante: girar página derecha hacia la izquierda */
.planner-wrap.drag-next .page.right,
.planner-wrap.flip-out-next .page.right {
  transform-origin: left center;
  transform: perspective(1400px) rotateY(calc(var(--flip) * 95deg));
  filter: brightness(calc(1 - var(--curl) * .12));
  box-shadow: calc(var(--curl) * -18px) 0 28px rgba(0,0,0,.22);
  z-index: 8;
}
.planner-wrap.flip-out-next .spread,
.planner-wrap.flip-out-prev .spread {
  transition: none;
}
.save-btn.saved { color: #1f9d57; }
.save-btn.saving { color: #8e8e93; }
.weekend {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
  height: 100%;
}
.day {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
}
.week-spread .day { flex: none; }
.day.right { flex-direction: row-reverse; }
.tab {
  position: absolute;
  top: 0;
  width: 32px;
  border: 0;
  background: rgba(255,255,255,.94);
  color: var(--tab-ink);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  z-index: 2;
  padding: 4px 0 3px;
  line-height: 1;
}
.day.left .tab { left: -28px; border-radius: 10px 3px 3px 10px; }
.day.right .tab { right: -28px; border-radius: 3px 10px 10px 3px; }
.tab b { display: block; font-size: 9px; font-weight: 800; letter-spacing: .04em; opacity: .9; }
.tab em { display: block; font-style: normal; font-size: 15px; font-weight: 750; margin-top: 1px; }
.tab .mini {
  width: 16px; height: 14px; margin: 2px auto 0; padding: 0; border: 0;
  background: transparent; color: inherit; opacity: .5; display: grid; place-items: center;
}
.tab .mini svg { width: 11px; height: 11px; }
.tab.today {
  background: var(--today);
  color: #fff;
  box-shadow: 0 2px 8px rgba(227,72,72,.35);
}
.pos-top .tab {
  position: relative; top: auto; left: auto !important; right: auto !important;
  width: auto; border-radius: 8px 8px 0 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px;
}
.pos-top .day { flex-direction: column; }
.pos-top .tab b, .pos-top .tab em { display: inline; font-size: 13px; }
.pos-top .page.left, .pos-top .page.right { padding-left: 4px; padding-right: 4px; }
.paper {
  flex: 1; min-width: 0; min-height: 0; background: var(--paper);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 6px 16px rgba(40, 50, 30, .08),
    inset 0 0 0 1px rgba(255,255,255,.55);
}
.page.left .paper {
  border-radius: 10px 4px 4px 10px;
  box-shadow:
    1px 3px 10px rgba(0,0,0,.05),
    inset -6px 0 10px -8px rgba(0,0,0,.1);
}
.page.right .paper {
  border-radius: 4px 10px 10px 4px;
  box-shadow:
    -1px 3px 10px rgba(0,0,0,.05),
    inset 6px 0 10px -8px rgba(0,0,0,.1);
}
.page.full .paper { border-radius: 12px; }
.write, .note-body {
  flex: 1; min-height: 0; overflow: auto; padding: 2px 8px 12px;
  font-family: var(--font); font-size: var(--fs); line-height: var(--lh);
  color: var(--ink); outline: none; white-space: pre-wrap; word-break: break-word;
  background-attachment: local;
  caret-color: var(--blue);
}
.write:focus, .note-body:focus {
  background-color: rgba(255,255,255,.04);
}
.paper-lines .write, .paper-lines .note-body {
  background-image: linear-gradient(to bottom, transparent calc(var(--lh) - 1px), var(--line) calc(var(--lh) - 1px));
  background-size: 100% var(--lh);
  background-position: 0 1px;
}
.paper-dots .write, .paper-dots .note-body {
  background-image: radial-gradient(circle, #c5c5c8 1px, transparent 1.2px);
  background-size: var(--lh) var(--lh);
  background-position: 4px calc(var(--lh) - 5px);
}
.paper-grid .write, .paper-grid .note-body {
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 18px 18px;
}
.paper-boxes .write, .paper-boxes .note-body {
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 22px var(--lh);
}
.write ul, .write ol, .note-body ul, .note-body ol { margin: 0; padding-left: 1.15em; }
.write mark, .note-body mark { color: inherit; border-radius: 2px; }
.chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 5px 2px;
  flex: none;
  flex-shrink: 0;
  max-height: 36%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.15));
}
.week-spread .chips { max-height: 34%; }
/* Al escribir: dejar sitio al texto y que el focus-shift pueda centrar el día */
.is-editing .day:focus-within .chips {
  max-height: 22px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.is-editing .day:focus-within .write {
  padding-bottom: 28px;
}
.chip, .task {
  border: 0; background: transparent; text-align: left; font-size: 11px; line-height: 1.2;
  display: flex; gap: 5px; align-items: flex-start; color: var(--ink); padding: 0;
  min-width: 0;
}
.chip span, .task span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip i { width: 7px; height: 7px; border-radius: 50%; margin-top: 3px; flex: none; }
.tab-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  width: 18px;
  margin: 3px auto 0;
}
.tab-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
.tab.today .tab-dots i { box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.task .box {
  width: 13px; height: 13px; border: 1.5px solid #8e8e93; border-radius: 3px; flex: none; margin-top: 1px;
}
.task.on { color: var(--muted); text-decoration: line-through; }
.task.on .box { background: #34c759; border-color: #34c759; }
.chip.task.on i { opacity: .45; }
.readbar {
  margin: 0 10px 6px; background: rgba(255,255,255,.92); color: #6d28d9; border: 0;
  border-radius: 10px; font-size: 12px; font-weight: 650; padding: 6px 10px;
}
.premium-bar {
  margin: 2px 10px 8px; height: 42px; border: 0; border-radius: 13px; color: #fff;
  display: flex; align-items: center; gap: 8px; padding: 0 12px; font-weight: 750; font-size: 16px;
  position: relative; overflow: hidden;
  background: linear-gradient(100deg, #6d28d9 0%, #7c3aed 42%, #4f46e5 68%, #22d3ee 100%);
  box-shadow: 0 6px 16px rgba(109, 40, 217, .28);
}
.premium-bar span { position: relative; z-index: 1; flex: 1; text-align: left; }
.premium-bar svg { position: relative; z-index: 1; width: 18px; height: 18px; }
.premium-bar::after {
  content: ""; position: absolute; right: -10px; top: -20px; bottom: -20px; width: 55%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.18), #67e8f9 45%, #c084fc 70%, #fb7185);
  opacity: .9;
}
.tabbar {
  display: grid; grid-template-columns: repeat(4, 1fr); background: #0c0c0e; color: #7d7d82;
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); z-index: 4;
  transition: transform .2s ease, opacity .2s ease;
}
.tabbar button {
  border: 0; background: transparent; color: inherit; display: flex; flex-direction: column;
  align-items: center; gap: 2px; min-width: 0; padding: 2px 0;
}
.tabbar svg { width: 23px; height: 23px; }
.tabbar span { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar button.on { color: #fff; }
.fmt {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--kb, 0px);
  z-index: 60;
  background: rgba(247, 247, 248, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-radius: 0;
  box-shadow: none;
  padding: 3px 4px;
  gap: 3px;
  flex-direction: column;
  align-items: stretch;
  touch-action: manipulation;
}
.is-editing .fmt { display: flex; }
.is-editing .tabbar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(110%);
}
.fmt-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  width: 100%;
  min-height: 32px;
}
.fmt button {
  border: 0;
  background: transparent;
  border-radius: 7px;
  min-width: 28px;
  height: 30px;
  padding: 0 5px;
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.fmt button:active { background: rgba(0, 0, 0, .06); }
.fmt .ok {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  margin-left: auto;
  min-width: 40px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}
.hilites { display: none; width: 100%; gap: 5px; padding: 2px 2px 1px; justify-content: center; }
.hilites.show { display: flex; }
.hilites button { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); padding: 0; }
.overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(20, 20, 24, .35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Empuja la hoja por encima del teclado */
  padding-bottom: var(--kb, 0px);
  box-sizing: border-box;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.card {
  background: #fff;
  color: #1c1c1e;
  width: 100%;
  border-radius: 22px 22px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: min(92%, calc(100% - 8px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* Tarea / evento: hoja alta ya sin teclado */
.card.sheet-tall {
  min-height: min(70vh, calc(100% - 12px));
  max-height: min(92%, calc(100% - 8px));
}
.card h2, .menu h2 { margin: 0; font-size: 13px; letter-spacing: .06em; color: #8e8e93; font-weight: 700; text-transform: uppercase; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #efeff1; color: #444; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; }
.cal-nav button { border: 0; background: transparent; color: var(--blue); font-size: 26px; width: 36px; }
.cal-nav b { font-size: 22px; }
.heads, .grid7 { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.heads span { color: #8e8e93; font-size: 12px; font-weight: 650; padding: 6px 0; }
.grid7 button { border: 0; background: transparent; height: 44px; border-radius: 10px; font-size: 18px; position: relative; color: #1c1c1e; }
.grid7 button.on { color: var(--blue); font-weight: 750; }
.grid7 button.today:not(.on) { color: var(--today); font-weight: 700; }
.grid7 button.out { color: #c7c7cc; }
.grid7 button .dot { position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); transform: translateX(-50%); }
.months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.months button, .choice { border: 0; background: #f4f4f6; border-radius: 12px; padding: 12px 8px; }
.choice.on, .months button.on { outline: 2px solid var(--blue); background: #eef3ff; }
.sheet {
  position: absolute; inset: 0; z-index: 28; background: #f2f2f7; color: #1c1c1e;
  display: flex; flex-direction: column; min-height: 0;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
.sheet-head .back-btn,
.sheet-head .icon-btn {
  flex: 0 0 40px;
}
.sheet-head .sheet-title,
.sheet-head .month-pill {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  overflow: hidden;
}
.sheet-head .sheet-title span,
.sheet-head .month-pill span {
  min-width: 0;
  overflow: hidden;
  text-align: center;
}
.sheet-head .sheet-title b,
.sheet-head .month-pill b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.sheet-head .sheet-title small,
.sheet-head .month-pill small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day-sheet .sheet-head,
.note-sheet .sheet-head {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, .04);
}
.sheet .body, .menu, .search-page, .write, .note-body, .card, .month-block, .swatches, .quick, .chat {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sheet .body, .menu, .search-page { flex: 1; overflow: auto; min-height: 0; }
.sheet.day-sheet,
.sheet.note-sheet {
  background: transparent;
}
.big-paper {
  margin: 8px 16px 80px; background: var(--paper); border-radius: 14px; min-height: 0; flex: 1;
  display: flex; flex-direction: column; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.has-sheet .big-paper {
  margin-bottom: calc(16px + env(safe-area-inset-bottom));
}
.is-editing.has-sheet .big-paper {
  margin-bottom: calc(56px + var(--kb) + env(safe-area-inset-bottom));
  padding-bottom: 24px;
}
.menu { padding: 8px 16px 24px; }
.menu h2 { margin: 16px 4px 8px; }
.group { background: #fff; border-radius: 14px; overflow: hidden; }
.row {
  width: 100%; border: 0; background: #fff; display: flex; justify-content: space-between; gap: 10px;
  align-items: center; padding: 13px 14px; border-bottom: 1px solid #eee; text-align: left; font-size: 16px;
}
.group .row:last-child { border-bottom: 0; }
.row em { color: #8e8e93; font-style: normal; font-size: 15px; }
.swatches { display: flex; gap: 8px; overflow: auto; padding-bottom: 6px; }
.swatch {
  width: 74px; height: 96px; flex: none; padding: 6px; position: relative; background: #fff;
  border: 0; border-radius: 12px; text-align: left;
}
.swatch i { display: block; height: 58px; border-radius: 6px; border: 1px solid rgba(0,0,0,.06); }
.swatch b { display: block; font-size: 10px; margin-top: 4px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch.on { outline: 2px solid var(--blue); }
.swatch .lock { position: absolute; top: 8px; right: 8px; font-size: 11px; }
.game-card {
  width: 100%; border: 0; border-radius: 16px; padding: 14px; text-align: left; color: #3b2410;
  background: linear-gradient(#fff7e8, #f3e0bf); display: flex; justify-content: space-between; align-items: center;
}
.game-card strong { font-size: 18px; color: #7c3aed; display: block; }
.play { background: #7c3aed; color: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 800; }
.hint { background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; }
.hint button { border: 0; background: transparent; color: var(--blue); font-weight: 700; padding: 0; }
.search-page { background: #111; color: #fff; }
.search-page .sheet-head { background: #111; }
.search-bar { display: flex; gap: 8px; align-items: center; padding: 0 12px 10px; }
.search-bar input { flex: 1; border: 0; background: #2a2a2e; color: #fff; border-radius: 12px; padding: 10px 12px; outline: none; }
.search-bar button { border: 0; background: transparent; color: #ff453a; font-weight: 650; }
.result {
  margin: 8px 12px; background: #fff; color: #111; border-radius: 12px; padding: 10px 12px;
  border: 0; display: block; width: calc(100% - 24px); text-align: left;
}
.result small { color: #8e8e93; display: block; margin-bottom: 4px; }
.result mark { background: #ffe14a; color: inherit; }
.form { display: flex; flex-direction: column; gap: 8px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #666; }
.form input, .form select, .form textarea { border: 0; background: #f4f4f6; border-radius: 10px; padding: 10px 12px; color: #111; font-size: 16px; }
.form textarea { min-height: 70px; }
.colors { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.colors button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; padding: 0; }
.colors button.on { box-shadow: 0 0 0 2px var(--blue); }
.colors-lg { gap: 10px; }
.colors-lg button { width: 36px; height: 36px; }
.colors .color-clear {
  background: #fff;
  color: #8e8e93;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
}
.cal-export {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.cal-export-label {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}
.cal-export-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #666;
}
.cal-export .ghost { width: 100%; }
.primary, .danger, .ghost { border: 0; border-radius: 12px; padding: 12px; font-weight: 700; }
.primary { background: var(--blue); color: #fff; }
.danger { background: #ffecec; color: #d64545; }
.ghost { background: #f4f4f6; color: #111; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { border: 0; background: #f4f4f6; border-radius: 999px; padding: 8px 10px; color: #111; }
.seg button.on { background: #111; color: #fff; }
.plans { display: grid; gap: 8px; margin: 10px 0; }
.plan { border: 0; text-align: left; background: #f6f6f8; border-radius: 14px; padding: 12px; color: #111; }
.plan.on { outline: 2px solid var(--blue); }
.plan b { display: block; font-size: 16px; }
.plan small { color: #666; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0 12px; }
table.cmp th, table.cmp td { border-bottom: 1px solid #eee; padding: 6px 4px; text-align: center; }
table.cmp td:first-child, table.cmp th:first-child { text-align: left; }
.lock {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: #0e0e12; color: #fff; padding: 24px;
}
.dots { display: flex; gap: 10px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #fff; display: block; }
.dots i.on { background: #fff; }
.pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; }
.pad button { height: 72px; border-radius: 50%; border: 0; background: #2a2a30; color: #fff; font-size: 28px; }
.lock.bad { animation: shake .35s linear; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.popover {
  position: absolute; z-index: 55; background: #fff; color: #111; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2); min-width: 190px; overflow: hidden;
}
.popover button { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 11px 14px; border-bottom: 1px solid #f1f1f1; color: #111; }
#toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(12px);
  background: rgba(20,20,24,.92); color: #fff; padding: 10px 14px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: .2s ease; z-index: 80; font-size: 14px;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.game-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; color: var(--ink); }
.game-top div { display: flex; flex-direction: column; }
.game-top small { color: var(--muted); }
.game-top button { border: 0; background: #111; color: #fff; border-radius: 10px; padding: 8px 12px; }
.game-help { color: var(--muted); font-size: 13px; margin: 0 16px; }
.board { margin: 8px auto; width: min(340px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.egg { aspect-ratio: 1; border: 0; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 35% 30%, #fff, var(--egg)); }
.egg.empty { background: rgba(255,255,255,.35); }
.egg.sel { outline: 3px solid #111; }
.widget { margin: 12px 16px; background: #fff; border-radius: 18px; padding: 12px 14px; color: #111; }
.widget header { display: flex; justify-content: space-between; color: #666; font-size: 13px; }
.today-list { padding: 0 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.cat h3 { margin: 12px 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #888; }
.note-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}
.note-card, .item { width: 100%; text-align: left; background: #fff; border-radius: 14px; border: 0; padding: 12px; color: #111; }
.note-row .note-card { flex: 1; min-width: 0; margin: 0; }
.note-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.note-card small {
  display: block;
  margin-top: 4px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-del, .task-del {
  flex: 0 0 44px;
  width: 44px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #c0392b;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.note-del svg, .task-del svg { width: 20px; height: 20px; }
.note-del:active, .task-del:active { background: #fdecea; }
.task-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.task-row .chip,
.task-row .item {
  flex: 1;
  min-width: 0;
}
.chips-large {
  gap: 6px;
  padding: 10px 12px 6px;
  max-height: none;
  background: transparent;
}
.chips-large .chip {
  font-size: 15px;
  line-height: 1.35;
  padding: 4px 0;
}
.chips-large .chip i {
  width: 9px;
  height: 9px;
  margin-top: 5px;
}
.chips-large .task-row { gap: 8px; }
.chips-large .task-del {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  color: #c0392b;
  opacity: 1;
}
.chips-large .task-del svg { width: 18px; height: 18px; }
.today-task { margin-bottom: 6px; }
.today-task .item { margin: 0; }
.empty { color: #8e8e93; padding: 24px 16px; }
#print-root { display: none; }
@media print {
  body { background: #fff; }
  #app, #toast { display: none !important; }
  #print-root { display: block; color: #111; padding: 16px; }
  .print-day { break-inside: avoid; margin-bottom: 14px; }
  .print-day h3 { margin: 0 0 4px; font-size: 14px; }
  .print-day p { margin: 0; white-space: pre-wrap; }
}
.chat { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.bubble { background: #fff; border-radius: 14px; padding: 10px 12px; max-width: 92%; color: #111; }
.bubble.me { align-self: flex-end; background: #2f6bff; color: #fff; }
.ask { display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
.ask input { flex: 1; border: 0; background: #fff; border-radius: 12px; padding: 10px 12px; color: #111; }
.ask button { border: 0; background: #111; color: #fff; border-radius: 12px; padding: 0 12px; }
.quick { display: flex; gap: 6px; overflow: auto; padding: 0 12px 8px; }
.quick button { border: 0; background: #fff; border-radius: 999px; padding: 8px 10px; white-space: nowrap; color: #111; }
.about { color: #8e8e93; font-size: 12px; text-align: center; margin: 18px 8px; }
.field-row { display: flex; gap: 8px; }
.field-row label { flex: 1; }
.font-system { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; }
.font-serif { --font: Palatino, "Palatino Linotype", Georgia, serif; }
.font-hand { --font: "Marker Felt", "Segoe Print", "Comic Sans MS", cursive; }
.font-round { --font: "Avenir Next Rounded", ui-rounded, "Segoe UI", sans-serif; }
.font-mono { --font: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.size-sm { --fs: 12px; --lh: 16px; }
.size-md { --fs: 13px; --lh: 18px; }
.size-lg { --fs: 16px; --lh: 22px; }
.size-xl { --fs: 18px; --lh: 24px; }
.month-block { min-height: 0; overflow: auto; padding: 4px; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mcell {
  background: var(--paper); color: var(--ink); border: 0; border-radius: 8px; min-height: 68px;
  text-align: left; padding: 4px; font-size: 11px; overflow: hidden;
}
.mcell b { display: block; font-size: 12px; }
.mcell.today { outline: 2px solid var(--today); }
.mcell small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.mdots { display: flex; gap: 3px; margin: 3px 0 2px; }
.mdots i { width: 6px; height: 6px; border-radius: 50%; flex: none; }