/* =========================================================
   Mi Centro — estilo
   Cada sección tiene su propio color (data-section en <body>).
   ========================================================= */
/* Paleta: lavanda clara + rosa / magenta / morado, toque azul cielo, filos dorados y plateados */
:root {
  --blush: #fbf2fa;
  --sky: #b3d6f6;
  --pink: #fa78a9;
  --magenta: #d3196e;
  --plum: #9b0c88;
  --rose: #c2185b;
  --gold-1: #fbecb5;
  --gold-2: #d4ad3c;
  --gold-3: #a8841f;
  --silver-1: #ffffff;
  --silver-2: #c9cdd8;
  --silver-3: #9aa1b3;
  --gold: var(--gold-2);
  --gold-edge: linear-gradient(135deg, var(--gold-1), var(--gold-2) 30%, var(--gold-3) 55%, var(--gold-2) 75%, var(--gold-1));
  --silver-edge: linear-gradient(135deg, var(--silver-1), var(--silver-2) 35%, var(--silver-3) 60%, var(--silver-2) 80%, var(--silver-1));

  --hue: var(--magenta);
  --bg: var(--blush);
  --surface: #ffffff;
  --surface-2: #f8ecf6;
  --line: #efdcec;
  --text: #3b0f3a;
  --muted: #8d6a89;
  --accent: var(--hue);
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--hue) 11%, #ffffff);
  --accent-line: color-mix(in srgb, var(--hue) 35%, #ffffff);
  --danger: #c8283f;
  --danger-soft: #fde4e8;
  --warn: #a2620e;
  --warn-soft: #fdf1dc;
  --pos: #2a8a63;
  --pos-soft: #e0f4ea;
  --flame: #e5602b;
  --shadow: 0 1px 2px rgba(120, 20, 100, .05), 0 10px 26px -14px rgba(150, 20, 110, .28);
  --shadow-lg: 0 20px 40px -18px rgba(150, 20, 110, .4);
  --r: 22px;
  --serif: "Iowan Old Style", "Palatino Linotype", "Noto Serif", Georgia, ui-serif, serif;
  --sat: max(env(safe-area-inset-top), var(--safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px));
  color-scheme: light;
}
body[data-section="hoy"]     { --hue: #d3196e; }
body[data-section="rutinas"] { --hue: #e0457f; }
body[data-section="ingles"]  { --hue: #9b0c88; }
body[data-section="dinero"]  { --hue: #c2185b; }
body[data-section="cerebro"] { --hue: #8a1fa0; }
body[data-section="biblio"]  { --hue: #d3196e; }
body[data-section="ajustes"] { --hue: #6c7fa8; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
html { background: linear-gradient(180deg, #f4e6f6 0%, var(--blush) 35%, #fdf7fc 100%) fixed, var(--blush); }
body { background: transparent !important; }
body {
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  overscroll-behavior-y: none;
  transition: background-color .4s;
}
/* resplandor de color de la sección en la parte de arriba */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 340px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--pink) 30%, transparent), transparent 62%),
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--sky) 55%, transparent), transparent 60%);
  transition: background .5s;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { display: inline-flex; width: 20px; height: 20px; flex: none; }
.ic svg, .icon-btn svg { width: 100%; height: 100%; }
.splash { display: grid; place-items: center; height: 100vh; color: var(--muted); font: 600 26px var(--serif); }
.muted { color: var(--muted); }
.danger { color: var(--danger); }
.warn { color: var(--warn); }
.pos { color: var(--pos); }
.neg { color: var(--text); }
.small-pad { padding: 4px 2px; margin: 6px 0; font-size: 14px; }

/* ---------- estructura ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--sat) + 12px) 16px 8px;
  max-width: 672px; margin: 0 auto;
}
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .2s;
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  margin: 0 calc(50% - 50vw);
}
body.scrolled .topbar::before { opacity: 1; }
.top-title { font: 600 27px/1.15 var(--serif); margin: 0; letter-spacing: -.01em; }
.top-actions { display: flex; gap: 2px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; color: var(--muted); transition: background .15s, color .15s; }
.icon-btn > svg { width: 22px; height: 22px; }
.icon-btn:active { background: var(--surface-2); }
.sync-btn.syncing svg { animation: spin 1s linear infinite; color: var(--accent); }
.sync-btn.error { color: var(--danger); }
.sync-btn.off { color: var(--warn); }
@keyframes spin { to { transform: rotate(360deg); } }

main { padding: 6px 16px calc(var(--sab) + 170px); max-width: 672px; margin: 0 auto; }
.view { display: flex; flex-direction: column; gap: 16px; }

/* entrada suave al cambiar de sección */
main.enter .view > * { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
main.enter .view > *:nth-child(2) { animation-delay: .04s; }
main.enter .view > *:nth-child(3) { animation-delay: .08s; }
main.enter .view > *:nth-child(4) { animation-delay: .12s; }
main.enter .view > *:nth-child(5) { animation-delay: .16s; }
main.enter .view > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* barra de pestañas flotante */
.tabbar {
  position: fixed; left: 50%; bottom: calc(var(--sab) + 10px); z-index: 20;
  transform: translateX(-50%); width: calc(100% - 20px); max-width: 560px;
  display: grid; grid-template-columns: repeat(6, 1fr);
  padding: 6px; border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: var(--shadow-lg);
}
.tabbar button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 6px; color: var(--muted); font-size: 10.5px; font-weight: 600; border-radius: 20px;
  transition: color .2s;
}
.tabbar button .ic { width: 22px; height: 22px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.tabbar button.on { color: var(--accent); background: var(--accent-soft); }
.tabbar button.on .ic { transform: translateY(-1px) scale(1.08); }
.tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; }
.tab-badge {
  position: absolute; top: 3px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 99px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface);
}

.fab {
  position: fixed; right: max(18px, calc(50% - 318px)); bottom: calc(var(--sab) + 96px); z-index: 21;
  width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 80%, #000));
  color: var(--accent-ink);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.fab svg { width: 26px; height: 26px; }
.fab:active { transform: scale(.92) rotate(90deg); }

/* ---------- tarjetas ---------- */
.card {
  background: var(--surface); border-radius: var(--r); padding: 16px;
  box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.card-head h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.card-head h3 .ic { vertical-align: -4px; margin-right: 4px; color: var(--accent); }
.count { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.link-btn { color: var(--accent); font-weight: 700; font-size: 14px; padding: 6px 2px; }
.link-btn.center { align-self: center; }
.banner {
  display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px;
  background: var(--warn-soft); color: var(--warn); font-size: 14px; font-weight: 550; width: 100%;
}

/* saludo y anillo de progreso (Hoy) */
.hero {
  position: relative; overflow: hidden; border-radius: 28px; padding: 20px 20px 18px; color: #fff;
  border: 1.5px solid transparent;
  background:
    radial-gradient(90% 110% at 100% 0%, color-mix(in srgb, var(--sky) 75%, transparent) 0%, transparent 55%) padding-box,
    linear-gradient(150deg, var(--pink) 0%, var(--magenta) 50%, var(--plum) 100%) padding-box,
    var(--gold-edge) border-box;
  box-shadow: 0 24px 46px -24px color-mix(in srgb, var(--hue) 85%, transparent);
}
.hero::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
  pointer-events: none;
}
.hero-top { display: flex; align-items: center; gap: 16px; }
.hero-text { flex: 1; min-width: 0; }
.hero-date { font-size: 12px; font-weight: 700; color: #fff4c9; text-transform: uppercase; letter-spacing: .08em; }
.hero h1 { font: 600 28px/1.12 var(--serif); margin: 4px 0 0; letter-spacing: -.01em; }
.hero-quote { margin: 14px 0 0; font: italic 15px/1.45 var(--serif); opacity: .92; max-width: 460px; }
.hero-stats { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 99px;
  background: rgba(255, 255, 255, .18); font-size: 13px; font-weight: 650; backdrop-filter: blur(6px);
}
.hero-pill .ic { width: 16px; height: 16px; }
.ring { position: relative; width: 86px; height: 86px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring .ring-bg { stroke: rgba(255, 255, 255, .25); }
.ring .ring-fg { stroke: url(#ringGold); transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.ring-num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.ring-num b { font-size: 22px; font-weight: 800; display: block; }
.ring-num small { font-size: 10.5px; font-weight: 650; opacity: .85; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tiles.inset { margin-bottom: 12px; }
.tile {
  background: var(--surface); border-radius: 18px; padding: 12px 13px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--shadow); min-width: 0; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.tiles.inset .tile { background: var(--surface-2); box-shadow: none; border: 0; }
.tile.wide { grid-column: span 2; }
.tile-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.tile-value { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.tile-value.warn { color: var(--danger); }

/* ---------- listas ---------- */
.list { display: flex; flex-direction: column; }
.list-item, .check-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 2px; border-bottom: 1px solid var(--line); min-height: 54px;
}
.list > :last-child { border-bottom: 0; }
.list-item:active, .check-item:active { opacity: .7; }
.li-emoji { width: 40px; height: 40px; border-radius: 13px; background: var(--accent-soft); display: grid; place-items: center; font-size: 19px; flex: none; }
.li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.li-main.plain { text-align: left; }
.li-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.li-sub { font-size: 13px; color: var(--muted); }
.li-sub.danger { color: var(--danger); } .li-sub.warn { color: var(--warn); }
.li-snippet { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.li-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.li-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.list-item > .ic { color: var(--muted); }
.day-group + .day-group { margin-top: 8px; }
.day-label { font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 2px 0; letter-spacing: .02em; }
.day-label::first-letter { text-transform: uppercase; }
.badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.clip-count { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); }
.clip-count .ic { width: 14px; height: 14px; }

/* checks */
.check-box {
  width: 28px; height: 28px; border-radius: 10px; border: 2px solid var(--line); display: grid; place-items: center; flex: none;
  color: var(--accent-ink); transition: background .2s, border-color .2s, transform .2s cubic-bezier(.3, 1.8, .5, 1);
}
.check-box svg { width: 18px; height: 18px; }
.check-item.done .check-box { background: var(--accent); border-color: var(--accent); }
.check-item.pop .check-box { animation: pop .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.check-item.done .li-title { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.task .check-box { border-radius: 50%; }
.prio { color: var(--danger); font-weight: 800; margin-right: 6px; }
.done-list { margin-top: 6px; opacity: .8; }
.progress { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 2px 0 8px; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); border-radius: 99px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.celebrate { margin: 6px 0 2px; font-weight: 700; color: var(--accent); }
.streak { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.streak .ic { width: 17px; height: 17px; }
.streak.hot { color: var(--flame); }
.quick-input { width: 100%; border: 1.5px dashed var(--line); background: transparent; border-radius: 14px; padding: 11px 13px; margin-bottom: 4px; }
.quick-input:focus { outline: none; border-color: var(--accent); border-style: solid; }
.inline-empty { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.inline-empty p { margin: 0; }

/* rutinas */
.habit-head { display: flex; align-items: center; gap: 12px; width: 100%; }
.habit-emoji { width: 46px; height: 46px; border-radius: 15px; background: var(--accent-soft); display: grid; place-items: center; font-size: 22px; flex: none; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 10px; }
.day-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dd-l { font-size: 11px; color: var(--muted); font-weight: 700; }
.dd-c { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: var(--accent-ink); transition: background .2s, border-color .2s; }
.dd-c svg { width: 18px; height: 18px; }
.day-dot.today .dd-l { color: var(--accent); }
.day-dot.today .dd-c { border-color: var(--accent); }
.day-dot.done .dd-c { background: var(--accent); border-color: var(--accent); }
.day-dot.off .dd-c { border-style: dashed; opacity: .45; }
.habit-stats { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 550; }
details.inactive summary { cursor: pointer; color: var(--muted); font-weight: 650; }

/* dinero */
.month-nav { display: flex; align-items: center; justify-content: space-between; }
.month-label { font: 600 19px var(--serif); text-transform: capitalize; }
.bars { display: flex; flex-direction: column; gap: 4px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 36%) 1fr auto; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 12px; }
.bar-row.on { background: var(--accent-soft); }
.bar-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 9px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, #fff), var(--accent)); border-radius: 99px; }
.bar-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.amount-row { display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--accent); padding-bottom: 4px; }
.amount-sign { font-size: 28px; color: var(--muted); font-weight: 600; }
.amount-input { border: 0 !important; background: transparent !important; font-size: 36px !important; font-weight: 800; padding: 0 !important; width: 100%; font-variant-numeric: tabular-nums; }
.amount-input:focus { outline: none; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.cat-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--surface-2); font-size: 12px; font-weight: 600; border: 2px solid transparent; text-align: center; }
.cat-chip.on { border-color: var(--accent); background: var(--accent-soft); }
.cat-emoji { font-size: 21px; }
.mini-title { font-size: 13px; color: var(--muted); margin: 10px 0 2px; font-weight: 600; }

/* cerebro */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-2); padding: 4px; border-radius: 15px; }
.seg button { padding: 9px; border-radius: 11px; font-weight: 650; font-size: 14px; color: var(--muted); text-align: center; transition: background .2s, color .2s; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.search { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 16px; padding: 0 14px; box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.search .ic { color: var(--muted); }
.search input { flex: 1; border: 0; background: transparent; padding: 13px 0; min-width: 0; }
.search input:focus { outline: none; }
.chips-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll .chips { flex-wrap: nowrap; }
.results .list, .results .notes-grid { background: var(--surface); border-radius: var(--r); padding: 2px 16px; box-shadow: var(--shadow); }
.results .notes-grid { background: none; padding: 0; box-shadow: none; }
.notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.note-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); min-height: 96px; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.note-card-title { font-weight: 700; padding-right: 16px; }
.note-card-body { font-size: 13px; color: var(--muted); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.note-tags { font-size: 11px; color: var(--accent); font-weight: 700; }
.note-pin { position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; color: var(--accent); }
.note-title { font: 600 21px var(--serif) !important; border: 0 !important; padding: 4px 0 !important; background: transparent !important; }
.note-body { border: 0 !important; padding: 4px 0 !important; background: transparent !important; min-height: 180px; }
.note-title:focus, .note-body:focus { outline: none; }
.attach-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.attach-list:empty { display: none; }
.thumb-wrap { position: relative; }
.thumb { width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-file { font-size: 12px; font-weight: 700; color: var(--muted); }
.thumb-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; padding: 4px; }

/* biblioteca */
.stars { display: flex; gap: 4px; }
.star { width: 34px; height: 34px; color: var(--line); padding: 2px; transition: transform .15s; }
.star:active { transform: scale(1.2); }
.star.on { color: var(--gold); }
.mini-stars { color: var(--gold); font-size: 12px; letter-spacing: -1px; }

/* ---------- botones ---------- */
.btn-row { display: flex; gap: 8px; }
.btn-row > .btn { flex: 1; }
.btn-row.left > .btn { flex: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 16px; border-radius: 16px;
  font-weight: 700; font-size: 15px; text-decoration: none; text-align: center; transition: transform .15s, filter .15s;
}
.btn.small { padding: 8px 12px; font-size: 14px; border-radius: 13px; }
.btn.block { width: 100%; }
.btn.primary {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent) 60%);
  color: var(--accent-ink);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn.soft { background: var(--accent-soft); color: var(--accent); }
.btn.ghost { background: var(--surface-2); color: var(--text); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger-text { color: var(--danger); }
.btn:active { transform: scale(.97); }
.btn .ic { width: 18px; height: 18px; }

/* ---------- formularios ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field[hidden] { display: none; }
.field-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.field-hint { font-size: 12.5px; color: var(--muted); }
.field input:not([type=checkbox]), .field select, .field textarea, .emoji-input {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); min-height: 46px;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .emoji-input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.emoji-input { text-align: center; font-size: 20px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 8px 13px; border-radius: 999px; background: var(--surface-2); font-size: 14px; font-weight: 600; white-space: nowrap; border: 1.5px solid transparent; transition: background .15s, color .15s; }
.chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.emoji-picks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -6px; }
.emoji-pick { width: 38px; height: 38px; border-radius: 11px; font-size: 19px; display: grid; place-items: center; }
.emoji-pick:active { background: var(--surface-2); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.switch-row input { appearance: none; width: 48px; height: 29px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .2s; }
.switch-row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch-row input:checked { background: var(--accent); }
.switch-row input:checked::after { transform: translateX(19px); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv span:first-child { color: var(--muted); }
.kv span:last-child { text-align: right; word-break: break-all; }
.ok-text { color: var(--pos); font-weight: 700; margin: 4px 0; }
.version { text-align: center; color: var(--muted); font-size: 12px; }

/* ---------- hoja modal ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(15, 10, 5, 0); display: flex; align-items: flex-end; justify-content: center; transition: background .25s; }
.sheet-wrap.open { background: rgba(15, 10, 5, .45); backdrop-filter: blur(2px); }
.sheet {
  width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 28px 28px 0 0;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .9, .25, 1);
}
.sheet-wrap.open .sheet { transform: none; }
.sheet-grip { width: 40px; height: 5px; border-radius: 9px; background: var(--line); margin: 9px auto 0; flex: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px 20px; flex: none; }
.sheet-head h2 { font: 600 21px var(--serif); margin: 0; }
.sheet-body { padding: 8px 20px 20px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.sheet-actions { display: flex; gap: 8px; padding: 12px 20px calc(var(--sab) + 14px); border-top: 1px solid var(--line); flex: none; }
.sheet-actions .btn { flex: 1; }
.confirm-msg { margin: 4px 0 8px; font-size: 16px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-bottom: 6px; }
.quick-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; border-radius: 18px; background: var(--surface-2); font-size: 13px; font-weight: 650; transition: transform .15s; }
.quick-opt:active { transform: scale(.95); }
.quick-emoji { font-size: 26px; }

.empty { text-align: center; color: var(--muted); padding: 30px 16px; }
.empty-icon { font-size: 40px; margin-bottom: 8px; }
.empty p { margin: 0 auto; max-width: 300px; }
.results > .empty { background: var(--surface); border-radius: var(--r); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--sab) + 168px); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 16px; font-weight: 650; font-size: 14px;
  transition: opacity .25s, transform .25s cubic-bezier(.3, 1.5, .5, 1); max-width: calc(100% - 32px); text-align: center;
  box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* confeti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti i {
  position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px;
  animation: fall var(--d, 1.6s) cubic-bezier(.25, .6, .4, 1) forwards;
}
@keyframes fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x, 0), 105vh) rotate(var(--r, 540deg)); opacity: .9; }
}

@media (min-width: 700px) {
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: 28px; max-height: 86vh; transform: translateY(30px) scale(.98); opacity: 0; transition: transform .25s, opacity .25s; }
  .sheet-wrap.open .sheet { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =========================================================
   Inglés (AID)
   ========================================================= */
.aid-hero { color: #fff; }
.aid-hero .hero-top { align-items: flex-start; }
.aid-big {
  width: 84px; height: 84px; flex: none; border-radius: 24px; display: grid; place-items: center;
  font: 700 50px/1 var(--serif); background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.aid-big.done { background: #fff; color: var(--hue); }
.aid-hero .btn { margin-top: 16px; position: relative; z-index: 1; }
.btn.on-hero { background: #fff; color: var(--hue); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .45); }

.aid-new { width: 100%; justify-content: center; margin-bottom: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.aid-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.aid-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 66px; height: 74px; padding: 8px 10px; border-radius: 18px;
  background: var(--surface-2); border: 1.5px solid var(--line); transition: transform .15s;
}
.aid-chip:active { transform: scale(.94); }
.aid-chip b { font: 700 30px/1 var(--serif); }
.aid-chip small { font-size: 11px; color: var(--muted); font-weight: 650; }
.aid-chip.first { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.aid-chip.late { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.aid-chip.late small { color: var(--danger); }
.aid-chip.done { background: var(--pos-soft); border-color: transparent; color: var(--pos); }
.aid-chip.done small { color: var(--pos); }
.aid-chip.wait { opacity: .7; border-style: dashed; }
.aid-letter { font: 700 20px var(--serif); background: var(--accent-soft); color: var(--accent); }
.aid-dots { display: flex; gap: 4px; flex: none; }
.aid-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.aid-dots i.on { background: var(--pos); }

/* Calendario como la tabla: MAYÚSCULA arriba, repasos abajo */
.cal { margin: 0 -4px; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head span { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); padding-bottom: 6px; letter-spacing: .02em; }
.cal-grid { border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); gap: 1.5px; }
.cal-cell { background: var(--surface); display: flex; flex-direction: column; min-width: 0; position: relative; }
.cal-cell.past { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.cal-cell.today { background: var(--accent-soft); }
.cal-cell.today::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--accent); pointer-events: none; }
.cal-day { position: absolute; top: 3px; left: 5px; font-size: 9.5px; color: var(--muted); font-weight: 700; }
.cal-cell.today .cal-day { color: var(--accent); }
.cal-big {
  height: 50px; display: grid; place-items: center; font: 700 30px/1 var(--serif); color: var(--text);
}
.cal-big.empty-big { color: transparent; }
.cal-big.done { color: var(--pos); }
.cal-big.late { color: var(--danger); }
.cal-small {
  border-top: 1.5px solid var(--line); min-height: 24px; padding: 3px 2px; display: flex; flex-wrap: wrap;
  justify-content: center; align-content: center; gap: 0 2px;
}
.cal-l { font-size: 12.5px; font-weight: 700; line-height: 1.25; padding: 0 1px; border-radius: 4px; color: var(--text); letter-spacing: .02em; }
.cal-l.done { color: var(--pos); }
.cal-l.late { color: #fff; background: var(--danger); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Repaso con tarjetas */
.flash-top { display: flex; align-items: center; gap: 10px; }
.flash-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.flash-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .35s; }
.flash-count { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.flash { perspective: 1200px; height: 230px; margin: 4px 0; }
.flash-inner {
  position: relative; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.3, .9, .3, 1); transform-style: preserve-3d; cursor: pointer;
}
.flash.flipped .flash-inner { transform: rotateY(180deg); }
.flash-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center;
}
.flash-front { background: linear-gradient(155deg, color-mix(in srgb, var(--hue) 88%, #fff), var(--hue) 55%, color-mix(in srgb, var(--hue) 75%, #000)); color: #fff; box-shadow: 0 18px 34px -18px var(--hue); }
.flash-back { background: var(--surface-2); transform: rotateY(180deg); border: 1.5px solid var(--accent-line); }
.flash-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.flash-word { font: 600 32px/1.15 var(--serif); word-break: break-word; }
.flash-hint { font-size: 12.5px; opacity: .75; }
.say-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); color: inherit; }
.flash-back .say-btn { background: var(--accent-soft); color: var(--accent); }
.say-btn svg { width: 22px; height: 22px; }
.flash-done { text-align: center; padding: 18px 6px 6px; }
.flash-done .big-emoji { font-size: 54px; }
.flash-done h3 { font: 600 24px var(--serif); margin: 6px 0 4px; }
.aid-words { gap: 6px; }
.aid-word {
  display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 15px;
  background: var(--surface-2); border: 0 !important; min-height: 0; width: 100%;
}
.aid-word .say-btn { width: 32px; height: 32px; background: var(--surface); color: var(--accent); }
.aid-word .say-btn svg { width: 17px; height: 17px; }
.aid-en { font-weight: 700; }
.aid-es { color: var(--muted); }
.aid-word.open { background: var(--accent-soft); }
.word-count { font-size: 12.5px; color: var(--accent); font-weight: 700; }
.letter-preview {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; flex: none;
  font: 700 38px/1 var(--serif); background: var(--accent-soft); color: var(--accent);
}
.group-head { display: flex; align-items: center; gap: 14px; }


/* =========================================================
   Filos dorados y plateados
   ========================================================= */
.card, .search, .note-card, .results .list {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-edge) border-box;
}
.results .notes-grid { background: none; }
.tile {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--silver-edge) border-box;
}
.tiles.inset .tile { border: 1px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--silver-edge) border-box; }
.tabbar {
  border: 1px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)) padding-box, var(--gold-edge) border-box;
}
.tabbar button.on { background: linear-gradient(160deg, var(--pink), var(--magenta) 60%, var(--plum)); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-2) 55%, transparent); }
.tabbar button.on .ic { color: #fff; }
.fab { border: 1.5px solid transparent; background: linear-gradient(150deg, var(--pink), var(--magenta) 55%, var(--plum)) padding-box, var(--gold-edge) border-box; color: #fff; }
.btn.primary { border: 1px solid transparent; background: linear-gradient(160deg, var(--pink), var(--magenta) 60%, var(--plum)) padding-box, var(--gold-edge) border-box; color: #fff; }
.btn.soft { border: 1px solid transparent; background: linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box, var(--silver-edge) border-box; color: var(--magenta); }
.btn.ghost { border: 1px solid color-mix(in srgb, var(--silver-2) 35%, transparent); }
.btn.on-hero { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gold-edge) border-box; color: var(--magenta); }
.sheet { border-top: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-edge) border-box; }
.sheet-grip { background: var(--gold-edge); }
.top-title { background: linear-gradient(120deg, var(--magenta), var(--plum)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-head h3 { color: var(--text); }
.link-btn { color: var(--magenta); }
.li-emoji, .habit-emoji, .aid-letter, .letter-preview {
  border: 1px solid transparent;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box, var(--silver-edge) border-box;
}
.aid-letter, .letter-preview { color: var(--plum); }
.aid-big { border: 1.5px solid transparent; background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)) padding-box, var(--gold-edge) border-box; color: #fff; }
.aid-big.done { background: linear-gradient(var(--gold-1), var(--gold-2)) padding-box, var(--gold-edge) border-box; color: var(--plum); }
.aid-chip { border: 1px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--silver-edge) border-box; }
.aid-chip.first { background: linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box, var(--gold-edge) border-box; color: var(--plum); }
.aid-chip.late { background: linear-gradient(var(--danger-soft), var(--danger-soft)) padding-box, linear-gradient(var(--danger), var(--danger)) border-box; }
.aid-chip.done { background: linear-gradient(var(--pos-soft), var(--pos-soft)) padding-box, linear-gradient(var(--pos), var(--pos)) border-box; }
.cal-grid { border: 1.5px solid transparent; background: linear-gradient(color-mix(in srgb, var(--gold-2) 35%, var(--line)), color-mix(in srgb, var(--gold-2) 35%, var(--line))) padding-box, var(--gold-edge) border-box; }
.cal-small { border-top-color: color-mix(in srgb, var(--silver-2) 30%, transparent); }
.cal-big { color: var(--plum); }
.cal-cell.today::after { border-color: var(--magenta); }
.cal-cell.today .cal-day { color: var(--magenta); }
.check-item.done .check-box, .day-dot.done .dd-c { background: linear-gradient(150deg, var(--pink), var(--magenta)); border-color: var(--gold-2); color: #fff; }
.dd-c, .check-box { border-color: color-mix(in srgb, var(--silver-2) 45%, transparent); }
.chip.on, .cat-chip.on { border-color: var(--gold-2); color: var(--magenta); }
.seg { border: 1px solid color-mix(in srgb, var(--silver-2) 30%, transparent); }
.seg button.on { background: #fff; color: var(--magenta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-2) 60%, transparent); }
.flash-front { border: 1.5px solid transparent; background: linear-gradient(155deg, var(--pink), var(--magenta) 50%, var(--plum)) padding-box, var(--gold-edge) border-box; }
.flash-back { border: 1.5px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--silver-edge) border-box; }
.flash-tag { opacity: .85; }
.progress span, .flash-bar span, .bar-fill { background: linear-gradient(90deg, var(--sky), var(--pink) 35%, var(--magenta) 70%, var(--plum)); }
.field input:not([type=checkbox]), .field select, .field textarea, .emoji-input { background: #fff; border-color: var(--line); }
.field input:focus, .field select:focus, .field textarea:focus, .emoji-input:focus { border-color: var(--gold-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-2) 18%, transparent); }
.toast { border: 1px solid transparent; background: linear-gradient(var(--plum), var(--plum)) padding-box, var(--gold-edge) border-box; color: #fff; }
.banner { border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.aid-new { border: 1px solid transparent; background: linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box, var(--gold-edge) border-box; color: var(--plum); }
.quick-opt { border: 1px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--silver-edge) border-box; }
.switch-row input:checked { background: linear-gradient(90deg, var(--pink), var(--magenta)); }
.results > .empty, .card .empty { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-edge) border-box; }
.card .empty { border: 0; background: none; }

.check-box { border-color: var(--line); }
.cal-l.done { color: var(--pos); }
.hero-pill { background: rgba(255, 255, 255, .22); }


/* =========================================================
   Paleta "Nude": rosa empolvado, durazno y canela, filos oro rosa
   ========================================================= */
html[data-theme="nude"] {
  --blush: #f8ece7;
  --sky: #f4d6c2;
  --pink: #e3a597;
  --magenta: #c47c6a;
  --plum: #9a5c41;
  --rose: #b06d55;
  --gold-1: #f9e2d0;
  --gold-2: #cf9d7f;
  --gold-3: #a06d52;
  --silver-1: #ffffff;
  --silver-2: #e2cfc7;
  --silver-3: #b8a097;
  --bg: var(--blush);
  --surface: #fffaf8;
  --surface-2: #f8ebe5;
  --line: #efdcd3;
  --text: #4a2b22;
  --muted: #977168;
  --danger: #b8432f;
  --danger-soft: #fbe4dd;
  --pos: #5e8a5a;
  --pos-soft: #e7f0e2;
  --flame: #d0703c;
  --shadow: 0 1px 2px rgba(120, 70, 50, .05), 0 10px 26px -14px rgba(140, 80, 55, .3);
  --shadow-lg: 0 20px 40px -18px rgba(140, 80, 55, .4);
  background: linear-gradient(180deg, #f6e1d9 0%, var(--blush) 35%, #fdf8f5 100%) fixed, var(--blush);
}
html[data-theme="nude"] body[data-section="hoy"]     { --hue: #c47c6a; }
html[data-theme="nude"] body[data-section="rutinas"] { --hue: #d08f6c; }
html[data-theme="nude"] body[data-section="ingles"]  { --hue: #9a5c41; }
html[data-theme="nude"] body[data-section="dinero"]  { --hue: #b8775c; }
html[data-theme="nude"] body[data-section="cerebro"] { --hue: #a9665a; }
html[data-theme="nude"] body[data-section="biblio"]  { --hue: #c47c6a; }
html[data-theme="nude"] body[data-section="ajustes"] { --hue: #9b8378; }
html[data-theme="nude"] .hero {
  background:
    radial-gradient(90% 110% at 100% 0%, rgba(255, 236, 220, .55) 0%, transparent 55%) padding-box,
    linear-gradient(150deg, #e7ae9e 0%, #c98270 50%, #a8674a 100%) padding-box,
    var(--gold-edge) border-box;
}

/* selector de paleta */
.theme-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-opt { border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--line); background: var(--surface); }
.theme-opt.on { border-color: var(--gold-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-2) 25%, transparent); }
.theme-sw { display: flex; height: 38px; border-radius: 11px; overflow: hidden; }
.theme-sw i { flex: 1; }
.theme-name { font-weight: 700; font-size: 14px; text-align: center; }

/* comida */
.meal-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.meal-slot {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px; border-radius: 15px; text-align: center;
  border: 1px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--silver-edge) border-box;
}
.meal-slot small { font-size: 13px; font-weight: 650; color: var(--muted); line-height: 1.15; }
.meal-emoji { font-size: 22px; line-height: 1.1; }
.meal-slot.on { background: linear-gradient(var(--pos-soft), var(--pos-soft)) padding-box, var(--gold-edge) border-box; }
.meal-slot.on .meal-emoji { color: var(--pos); font-weight: 800; }
.meal-text { white-space: pre-line; font-weight: 550; line-height: 1.45; }
.meal-item { align-items: flex-start; }
.month-label { padding: 4px 8px; border-radius: 10px; }
.meal-card.empty-meal { padding: 10px 16px; }
.meal-card.empty-meal .card-head { margin: 0; }
.meal-card.empty-meal h3 { font-weight: 600; color: var(--muted); }