/* ═══════════════════════════════════════════════════════════════
   NIDO · sistema de diseño
   Papelería fina: papel cálido, tinta ciruela, acento como cinta.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────── TOKENS ───────────────────────────── */
:root{
  /* superficies y tinta — modo claro */
  --paper:#FDF7F5;
  --card:#FFFFFF;
  --card-2:#FCF2F4;
  --ink:#3B2430;
  --ink-soft:#7A5C68;
  --ink-faint:#A98D98;
  --rule:#F0DDE2;
  --rule-strong:#E4CBD3;
  --danger:#C0446B;

  /* acento (la "cinta marcapáginas") — sobreescrito por [data-accent] */
  --rose:#D9557E;
  --rose-tint:#FBE6EC;
  --rose-tint-2:#F6D6DF;
  --on-rose:#FFFFFF;

  --shadow:0 1px 2px rgba(59,36,48,.05), 0 8px 24px -12px rgba(59,36,48,.14);
  --shadow-lift:0 2px 6px rgba(59,36,48,.07), 0 18px 40px -18px rgba(59,36,48,.22);
  --shadow-sheet:0 -8px 40px -12px rgba(59,36,48,.28);
  --scrim:rgba(59,36,48,.32);

  --font-display:ui-serif,"New York","Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --font-num:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.9,.3,1);
  --tap:rgba(217,85,126,.12);
}

/* ───────────────────────── MODO OSCURO ─────────────────────────
   No es una inversión: es una lámpara de escritorio de noche. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#191115;
    --card:#251920;
    --card-2:#2E2028;
    --ink:#F6E8EC;
    --ink-soft:#BC9DA9;
    --ink-faint:#8A6C79;
    --rule:#382530;
    --rule-strong:#4A3340;
    --danger:#FF8AA6;
    --rose:#FF8FAE;
    --rose-tint:#3A2029;
    --rose-tint-2:#4A2933;
    --on-rose:#241820;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.8);
    --shadow-sheet:0 -8px 40px -12px rgba(0,0,0,.75);
    --scrim:rgba(9,5,7,.55);
    --tap:rgba(255,143,174,.14);
  }
}
:root[data-theme="dark"]{
  --paper:#191115;
  --card:#251920;
  --card-2:#2E2028;
  --ink:#F6E8EC;
  --ink-soft:#BC9DA9;
  --ink-faint:#8A6C79;
  --rule:#382530;
  --rule-strong:#4A3340;
  --danger:#FF8AA6;
  --rose:#FF8FAE;
  --rose-tint:#3A2029;
  --rose-tint-2:#4A2933;
  --on-rose:#241820;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.8);
  --shadow-sheet:0 -8px 40px -12px rgba(0,0,0,.75);
  --scrim:rgba(9,5,7,.55);
  --tap:rgba(255,143,174,.14);
}

/* ─────────────────── ACENTO CONFIGURABLE ───────────────────
   El rosa es la identidad por defecto; ella puede cambiarlo. */
:root[data-accent="lavanda"]{--rose:#9B87D4;--rose-tint:#EDE8F8;--rose-tint-2:#DED5F2;--tap:rgba(155,135,212,.14)}
:root[data-accent="coral"]  {--rose:#EE7F6B;--rose-tint:#FCE9E4;--rose-tint-2:#F8D8CF;--tap:rgba(238,127,107,.14)}
:root[data-accent="verde"]  {--rose:#5E9781;--rose-tint:#E4F0EA;--rose-tint-2:#D0E5DA;--tap:rgba(94,151,129,.14)}
:root[data-accent="ambar"]  {--rose:#C9843F;--rose-tint:#FAEDDC;--rose-tint-2:#F3DFC3;--tap:rgba(201,132,63,.14)}
:root[data-accent="azul"]   {--rose:#6E93C4;--rose-tint:#E4ECF7;--rose-tint-2:#D2E0F1;--tap:rgba(110,147,196,.14)}
:root[data-accent="ciruela"]{--rose:#8A5B7A;--rose-tint:#F3E6EF;--rose-tint-2:#E8D3E1;--tap:rgba(138,91,122,.14)}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-accent="lavanda"]{--rose:#B9A6EC;--rose-tint:#2E2540;--rose-tint-2:#3B3054;--tap:rgba(185,166,236,.16)}
  :root:not([data-theme="light"])[data-accent="coral"]  {--rose:#FF9E8B;--rose-tint:#3F2620;--rose-tint-2:#52332B;--tap:rgba(255,158,139,.16)}
  :root:not([data-theme="light"])[data-accent="verde"]  {--rose:#8CC7AB;--rose-tint:#1F3229;--rose-tint-2:#2A4437;--tap:rgba(140,199,171,.16)}
  :root:not([data-theme="light"])[data-accent="ambar"]  {--rose:#F0BC80;--rose-tint:#3A2A1B;--rose-tint-2:#4C3925;--tap:rgba(240,188,128,.16)}
  :root:not([data-theme="light"])[data-accent="azul"]   {--rose:#96B7E4;--rose-tint:#1E2A3C;--rose-tint-2:#2A3A51;--tap:rgba(150,183,228,.16)}
  :root:not([data-theme="light"])[data-accent="ciruela"]{--rose:#C08FB2;--rose-tint:#33202E;--rose-tint-2:#442C3E;--tap:rgba(192,143,178,.16)}
}
:root[data-theme="dark"][data-accent="lavanda"]{--rose:#B9A6EC;--rose-tint:#2E2540;--rose-tint-2:#3B3054}
:root[data-theme="dark"][data-accent="coral"]  {--rose:#FF9E8B;--rose-tint:#3F2620;--rose-tint-2:#52332B}
:root[data-theme="dark"][data-accent="verde"]  {--rose:#8CC7AB;--rose-tint:#1F3229;--rose-tint-2:#2A4437}
:root[data-theme="dark"][data-accent="ambar"] {--rose:#F0BC80;--rose-tint:#3A2A1B;--rose-tint-2:#4C3925}
:root[data-theme="dark"][data-accent="azul"]   {--rose:#96B7E4;--rose-tint:#1E2A3C;--rose-tint-2:#2A3A51}
:root[data-theme="dark"][data-accent="ciruela"]{--rose:#C08FB2;--rose-tint:#33202E;--rose-tint-2:#442C3E}

/* ───────────────────────────── BASE ───────────────────────────── */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:8px}
::selection{background:var(--rose-tint-2)}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ─────────────── TACTO DE APLICACIÓN, NO DE PÁGINA ───────────────
   Sin menús de selección ni zoom por doble toque en los controles;
   el texto que ella escribe sí se puede seleccionar y copiar. */
body{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
input, textarea, .seleccionable{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
button, a, .tab, .cell, .chip, .mood, .dia, .swatch, .icon-opt, .switch{
  touch-action:manipulation;
}

/* ─────────────── PANTALLA DE CARGA ───────────────
   Cubre el instante entre abrir la app y tener los datos en pantalla. */
.arranque{
  position:fixed;inset:0;z-index:120;
  background:var(--paper);
  display:grid;place-items:center;
  transition:opacity .35s ease;
}
.arranque .marca{
  width:74px;height:74px;border-radius:22px;
  background:var(--rose);display:grid;place-items:center;
  box-shadow:var(--shadow-lift);
  animation:respirar 1.7s ease-in-out infinite;
}
.arranque .marca span{
  font-family:var(--font-display);font-style:italic;font-size:40px;
  color:var(--on-rose);line-height:1;margin-top:-2px;
}
.arranque.fuera{opacity:0;pointer-events:none}
@keyframes respirar{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ─────────────── AVISO PARA INSTALARLA ───────────────
   Sólo aparece en el navegador, nunca dentro de la app instalada. */
.instalar{
  position:fixed;left:12px;right:12px;
  bottom:calc(env(safe-area-inset-bottom) + 88px);
  z-index:50;
  display:flex;align-items:center;gap:11px;
  background:var(--card);border:1px solid var(--rule);
  border-radius:18px;padding:12px 14px;
  box-shadow:var(--shadow-lift);
  animation:rise .45s .6s backwards var(--ease);
  max-width:520px;margin:0 auto;
}
.instalar svg{width:19px;height:19px;color:var(--rose);flex:none}
.instalar p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft);flex:1}
.instalar b{color:var(--ink);font-weight:650}
.instalar button{
  width:28px;height:28px;flex:none;border-radius:50%;border:none;
  background:var(--card-2);color:var(--ink-soft);display:grid;place-items:center;
}
.instalar button svg{width:13px;height:13px;color:currentColor}
@media (min-width:900px){.instalar{bottom:calc(env(safe-area-inset-bottom) + 20px);left:130px;right:20px}}

/* ───────────────────────── ARMAZÓN DE LA APP ───────────────────────── */
.app{
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.viewport{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:calc(env(safe-area-inset-top) + 16px) 20px 28px;
  scroll-padding-top:20px;
}
.viewport::-webkit-scrollbar{display:none}
.shell{width:100%;max-width:640px;margin:0 auto}

.view{display:none;flex-direction:column;gap:18px}
.view.active{display:flex;animation:rise .38s var(--ease)}

.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:6px}
.view-title{font-family:var(--font-display);font-size:32px;font-weight:500;letter-spacing:-.02em;margin:0;line-height:1.1;text-wrap:balance}
.view-sub{font-size:13.5px;color:var(--ink-soft);margin:5px 0 0}
.head-actions{display:flex;gap:8px;align-items:center;flex:none}

.icon-btn{
  width:38px;height:38px;flex:none;border-radius:50%;
  border:1px solid var(--rule);background:var(--card);color:var(--rose);
  display:grid;place-items:center;
  transition:transform .18s var(--ease), background .18s;
}
.icon-btn:hover{background:var(--rose-tint)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:19px;height:19px}
.icon-btn.plain{border-color:transparent;background:transparent;color:var(--ink-soft)}
.icon-btn.plain:hover{background:var(--card-2);color:var(--rose)}

/* ───────────────────────────── TABBAR ───────────────────────────── */
.tabbar{
  flex:none;display:flex;
  border-top:1px solid var(--rule);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  padding:9px 8px calc(env(safe-area-inset-bottom) + 10px);
  z-index:30;
}
.tab{
  flex:1;background:none;border:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--ink-faint);
  font-size:10.5px;font-weight:600;letter-spacing:.01em;
  padding:4px 0;transition:color .22s;
}
.tab svg{width:24px;height:24px;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.tab[aria-selected="true"]{color:var(--rose)}
.tab[aria-selected="true"] svg{transform:translateY(-2px) scale(1.06)}
.tab:hover{color:var(--rose)}

/* ─────────────────────── ESCRITORIO: RAÍL LATERAL ─────────────────────── */
@media (min-width:900px){
  .app{flex-direction:row}
  .tabbar{
    order:-1;
    flex-direction:column;justify-content:flex-start;gap:6px;
    width:104px;flex:none;
    border-top:none;border-right:1px solid var(--rule);
    padding:26px 10px 20px;
  }
  .tab{flex:none;padding:12px 0;border-radius:16px}
  .tab[aria-selected="true"]{background:var(--rose-tint)}
  .viewport{padding-top:34px}
  .shell{max-width:840px}
}

/* ───────────────────────────── WIDGETS ───────────────────────────── */
.widget-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}

.w{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:22px;
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:11px;
  position:relative;overflow:hidden;
  animation:rise .5s backwards var(--ease);
  min-width:0;
}
.w.span{grid-column:1 / -1}
.w-label{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:650;color:var(--ink-faint);
}
.w-label svg{width:13px;height:13px;color:var(--rose);flex:none}
.w-label .grow{flex:1}
.w-link{
  background:none;border:none;padding:0;color:var(--rose);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:650;
}

/* widget: hoy */
.agenda-row{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-top:1px solid var(--rule);text-align:left;width:100%;background:none;border-left:none;border-right:none;border-bottom:none}
.agenda-row:first-of-type{border-top:none;padding-top:2px}
.a-time{font-family:var(--font-num);font-size:11.5px;font-weight:600;color:var(--ink-soft);width:44px;flex:none;padding-top:2px;font-variant-numeric:tabular-nums}
.a-body{flex:1;min-width:0}
.a-title{font-size:14.5px;font-weight:550;line-height:1.35}
.a-meta{font-size:12px;color:var(--ink-soft);margin-top:2px;display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;flex:none}

/* widget: cuenta atrás */
.count-num{font-family:var(--font-display);font-size:52px;line-height:.9;font-weight:500;color:var(--rose);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.count-cap{font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.count-cap strong{color:var(--ink);font-weight:600}

/* widget: álbum */
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;border-radius:13px;overflow:hidden;aspect-ratio:1}
.mosaic > *{width:100%;height:100%;object-fit:cover;background:var(--card-2);transition:transform .5s var(--ease)}
.w:hover .mosaic > *{transform:scale(1.04)}

/* widget: nota rápida */
.note-mini{background:var(--rose-tint);border-radius:13px;padding:11px 13px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.note-mini em{font-style:normal;color:var(--rose);font-weight:600}

/* widget: ánimo */
.mood-row{display:flex;gap:7px;justify-content:space-between}
.mood{flex:1;aspect-ratio:1;border-radius:12px;border:1px solid var(--rule);background:var(--card-2);display:grid;place-items:center;transition:transform .18s var(--ease), border-color .18s, background .18s}
.mood:hover{transform:translateY(-3px)}
.mood[aria-pressed="true"]{background:var(--rose-tint-2);border-color:var(--rose)}
.mood span{font-size:19px;line-height:1}

/* editor de widgets */
.wedit{display:flex;flex-direction:column;gap:8px}
.wedit-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--rule);border-radius:15px;background:var(--card)}
.wedit-row .name{flex:1;font-size:14.5px;font-weight:550}
.wedit-row.off .name{color:var(--ink-faint)}
.mini-b{width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);display:grid;place-items:center;flex:none}
.mini-b svg{width:15px;height:15px}
.mini-b:disabled{opacity:.3}

/* ───────────────────────────── CALENDARIO ───────────────────────────── */
.cal-chips{display:flex;gap:7px;overflow-x:auto;padding:0 20px 3px;margin:0 -20px;scrollbar-width:none}
.cal-chips::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:7px 13px;border-radius:999px;
  font-size:13px;font-weight:550;
  border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);
  transition:opacity .2s, border-color .2s, color .2s;
}
.chip[aria-pressed="true"]{color:var(--ink);border-color:currentColor}
.chip[aria-pressed="false"]{opacity:.45}
.chip .dot{width:8px;height:8px}
.chip svg{width:14px;height:14px}
.chip.add{color:var(--rose);border-style:dashed;border-color:var(--rose);opacity:1}
.chip.add svg{width:13px;height:13px}

.cal-card{background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:16px 14px;box-shadow:var(--shadow)}
.cal-nav{display:flex;align-items:center;justify-content:space-between;padding:0 4px 12px}
.cal-month{font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-.01em;background:none;border:none;padding:0}
.cal-nav-btns{display:flex;gap:4px}
.nav-b{width:29px;height:29px;border-radius:50%;border:none;background:transparent;color:var(--ink-soft);display:grid;place-items:center;transition:background .18s}
.nav-b:hover{background:var(--rose-tint);color:var(--rose)}
.nav-b svg{width:15px;height:15px}

.dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:650;text-align:center;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cell{
  aspect-ratio:1/1.06;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:3px;padding-top:6px;position:relative;
  border:none;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:transparent;transition:background .16s;
}
.grid .cell:nth-child(7n){border-right:none}
.grid .cell:nth-last-child(-n+7){border-bottom:none}
.cell:hover{background:var(--card-2)}
.cell.out{opacity:.28}
.d-num{font-family:var(--font-num);font-size:13px;font-weight:550;font-variant-numeric:tabular-nums;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;transition:background .2s, color .2s}
.cell.today .d-num{color:var(--rose);font-weight:750}
.cell.sel .d-num{background:var(--rose);color:var(--on-rose);font-weight:650}
.pips{display:flex;gap:2.5px;height:5px;align-items:center}
.pip{width:4.5px;height:4.5px;border-radius:50%}

.agenda-day{display:flex;flex-direction:column;gap:9px}
.ev{
  display:flex;gap:12px;align-items:stretch;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--rule);
  border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);
  animation:rise .34s backwards var(--ease);
}
.ev:active{background:var(--card-2)}
.ev-bar{width:3px;border-radius:2px;flex:none}
.ev-main{flex:1;min-width:0}
.ev-t{font-size:14.5px;font-weight:600;line-height:1.3}
.ev-m{font-size:12.5px;color:var(--ink-soft);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ev-time{font-family:var(--font-num);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:600;white-space:nowrap;padding-top:1px;text-align:right}

/* ───────────────────────────── FOTOS ───────────────────────────── */
.album-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (min-width:700px){.album-grid{grid-template-columns:repeat(3,1fr)}}
.album{background:none;border:none;padding:0;display:flex;flex-direction:column;gap:9px;text-align:left;animation:rise .45s backwards var(--ease)}
.album-cover{
  aspect-ratio:1;border-radius:19px;overflow:hidden;position:relative;
  box-shadow:var(--shadow);background:var(--card-2);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.album:hover .album-cover{transform:translateY(-4px) scale(1.015);box-shadow:var(--shadow-lift)}
.album-cover > img{width:100%;height:100%;object-fit:cover;background:var(--card-2)}
.album-cover.solo{display:block}
.album-cover.empty-cover{display:grid;place-items:center;border:1px dashed var(--rule-strong)}
.album-cover.empty-cover svg{width:30px;height:30px;color:var(--ink-faint)}
.fav{position:absolute;top:9px;right:9px;z-index:2;width:25px;height:25px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);display:grid;place-items:center}
.fav svg{width:13px;height:13px;color:#D9557E}
.album-name{font-size:14.5px;font-weight:600;line-height:1.25}
.album-meta{font-size:12px;color:var(--ink-soft);margin-top:2px;font-variant-numeric:tabular-nums}

.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
@media (min-width:700px){.photo-grid{grid-template-columns:repeat(4,1fr);gap:8px}}
.photo-cell{aspect-ratio:1;border-radius:9px;overflow:hidden;border:none;padding:0;background:var(--card-2);transition:transform .25s var(--ease)}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cell:hover{transform:scale(1.05)}
.photo-cell.adder{display:grid;place-items:center;border:1px dashed var(--rule-strong);background:var(--card);color:var(--rose)}
.photo-cell.adder svg{width:22px;height:22px}

.back-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--rose);font-size:14px;font-weight:600;padding:0;align-self:flex-start}
.back-btn svg{width:16px;height:16px}

/* visor de fotos */
.lightbox{
  position:fixed;inset:0;z-index:90;background:rgba(12,7,10,.94);
  display:flex;flex-direction:column;animation:fade .25s;
}
.lightbox img{flex:1;min-height:0;width:100%;object-fit:contain;padding:calc(env(safe-area-inset-top) + 8px) 8px 8px}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px calc(env(safe-area-inset-bottom) + 16px);color:#F6E8EC}
.lb-bar button{background:rgba(255,255,255,.12);border:none;color:#F6E8EC;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.lb-bar svg{width:16px;height:16px}
.lb-count{font-family:var(--font-num);font-size:12px;opacity:.7;font-variant-numeric:tabular-nums}

/* ───────────────────────────── NOTAS ───────────────────────────── */
.compose{display:flex;gap:9px;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:var(--shadow)}
.compose input{flex:1;border:none;background:none;outline:none;font-size:14.5px;color:var(--ink);min-width:0}
.compose input::placeholder{color:var(--ink-faint)}
.compose button{width:34px;height:34px;flex:none;border-radius:50%;border:none;background:var(--rose);color:var(--on-rose);display:grid;place-items:center;transition:transform .18s var(--ease)}
.compose button:hover{transform:scale(1.08)}
.compose button:active{transform:scale(.92)}
.compose button svg{width:16px;height:16px}

.notes-col{columns:2;column-gap:12px}
@media (min-width:700px){.notes-col{columns:3}}
.note{
  break-inside:avoid;margin-bottom:12px;width:100%;text-align:left;
  border-radius:17px;padding:14px;
  border:1px solid var(--rule);
  font-size:13.5px;line-height:1.5;
  box-shadow:var(--shadow);
  animation:rise .4s backwards var(--ease);
  position:relative;display:block;
  color:var(--ink);
}
.note-t{font-weight:650;margin-bottom:5px;font-size:14px}
.note-b{white-space:pre-wrap;overflow-wrap:anywhere}
.note-d{font-size:10.5px;color:var(--ink-soft);margin-top:9px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.pin{position:absolute;top:11px;right:12px;width:13px;height:13px;color:var(--rose)}

/* ─────────────────────── ESTADOS VACÍOS ─────────────────────── */
.empty{
  text-align:center;padding:30px 20px;color:var(--ink-faint);
  font-size:14px;font-family:var(--font-display);font-style:italic;
  line-height:1.5;
}
.empty-card{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:34px 22px;border:1px dashed var(--rule-strong);border-radius:22px;
  background:var(--card);text-align:center;
}
.empty-card svg{width:30px;height:30px;color:var(--rose);opacity:.8}
.empty-card p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.55;max-width:34ch;text-wrap:pretty}
.empty-card .ttl{font-family:var(--font-display);font-size:19px;color:var(--ink);font-style:italic}

/* ─────────────────────── BOTONES ─────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:999px;padding:12px 20px;border:1px solid transparent;
  font-size:15px;font-weight:600;
  transition:transform .16s var(--ease), background .18s, opacity .18s;
}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--rose);color:var(--on-rose)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:var(--card-2)}
.btn.quiet{background:transparent;color:var(--ink-soft)}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--rule)}
.btn.block{width:100%}
.btn:disabled{opacity:.45}

/* ─────────────────────── HOJAS / FORMULARIOS ─────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:60;background:var(--scrim);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fade .22s;
}
.sheet{
  width:100%;max-width:520px;max-height:92dvh;
  background:var(--paper);
  border-radius:28px 28px 0 0;
  box-shadow:var(--shadow-sheet);
  display:flex;flex-direction:column;
  animation:sheet-up .34s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:700px){
  .scrim{align-items:center}
  .sheet{border-radius:26px;max-height:86dvh;animation:pop .28s var(--ease)}
  /* En pantalla grande la hoja es una ventana centrada: el tirador de
     arrastrar no significa nada ahí. */
  .sheet-grab{display:none}
}
.sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--rule-strong);margin:10px auto 0;flex:none}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px 12px;border-bottom:1px solid var(--rule);flex:none;
}
.sheet-title{font-family:var(--font-display);font-size:20px;font-weight:500;margin:0;letter-spacing:-.01em}
.sheet-body{overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:16px;scrollbar-width:none}
.sheet-body::-webkit-scrollbar{display:none}
.sheet-foot{display:flex;gap:10px;padding:12px 18px 18px;border-top:1px solid var(--rule);flex:none}
.sheet-foot .btn{flex:1}
.sheet-link{background:none;border:none;color:var(--rose);font-size:15px;font-weight:600;padding:4px}
.sheet-link.danger{color:var(--danger)}

.field{display:flex;flex-direction:column;gap:7px}
.field > label,.field-label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:650;color:var(--ink-faint)}
.field input[type=text],.field input[type=date],.field input[type=time],.field textarea,.field select{
  width:100%;background:var(--card);border:1px solid var(--rule);border-radius:15px;
  padding:13px 15px;font-size:16px;color:var(--ink);outline:none;
  transition:border-color .18s, background .18s;
  -webkit-appearance:none;appearance:none;
}
.field input:focus,.field textarea:focus{border-color:var(--rose);background:var(--card)}
.field textarea{min-height:110px;resize:vertical;line-height:1.5;font-size:15px}
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A98D98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  padding-right:40px;
}
.field .hint{font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.swatch-row{display:flex;flex-wrap:wrap;gap:9px}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;padding:2px;background:none;display:grid;place-items:center;transition:transform .16s var(--ease)}
.swatch i{width:100%;height:100%;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.swatch[aria-pressed="true"]{border-color:currentColor;transform:scale(1.06)}

.icon-pick{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media (max-width:400px){.icon-pick{grid-template-columns:repeat(5,1fr)}}
.icon-opt{aspect-ratio:1;border-radius:13px;border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);display:grid;place-items:center}
.icon-opt svg{width:19px;height:19px}
.icon-opt[aria-pressed="true"]{border-color:var(--rose);color:var(--rose);background:var(--rose-tint)}

.dias-fila{display:flex;gap:6px}
.dia{
  flex:1;aspect-ratio:1;max-width:46px;border-radius:50%;
  border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);
  font-size:13px;font-weight:650;
  transition:background .18s, color .18s, border-color .18s, transform .16s var(--ease);
}
.dia:active{transform:scale(.92)}
.dia[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:var(--on-rose)}

.seg{display:flex;background:var(--card-2);border:1px solid var(--rule);border-radius:999px;padding:3px;gap:3px}
.seg button{flex:1;border:none;background:none;border-radius:999px;padding:9px 10px;font-size:13.5px;font-weight:600;color:var(--ink-soft);transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}

.switch-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:2px 0}
.switch-row .lbl{font-size:15px;font-weight:550}
.switch-row .sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4}
.switch{width:50px;height:30px;border-radius:999px;border:none;background:var(--rule-strong);position:relative;flex:none;transition:background .22s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s var(--ease)}
.switch[aria-pressed="true"]{background:var(--rose)}
.switch[aria-pressed="true"]::after{transform:translateX(20px)}

/* listas de ajustes */
.list{background:var(--card);border:1px solid var(--rule);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.list-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--rule);padding:14px 16px;color:var(--ink)}
.list-row:first-child{border-top:none}
.list-row:hover{background:var(--card-2)}
.list-row .lbl{flex:1;font-size:15px;font-weight:550;min-width:0}
.list-row .lbl .sub{display:block;font-size:12.5px;font-weight:500;color:var(--ink-soft);margin-top:2px}
.list-row .val{font-size:13.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.list-row .ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--rose-tint);color:var(--rose)}
.list-row .ico svg{width:17px;height:17px}
.list-row .chev{width:15px;height:15px;color:var(--ink-faint);flex:none}
.section-label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:650;color:var(--ink-faint);padding:0 4px 8px}

/* Recuadro para el código de emparejamiento: largo, feo y necesario. */
.codigo{
  background:var(--card-2);border:1px solid var(--rule);border-radius:14px;
  padding:12px 14px;font-family:var(--font-num);font-size:11.5px;line-height:1.5;
  color:var(--ink-soft);overflow-wrap:anywhere;max-height:120px;overflow-y:auto;
}

/* ─────────────────────── TOAST ─────────────────────── */
.toast-host{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 92px);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:80;pointer-events:none}
@media (min-width:900px){.toast-host{bottom:calc(env(safe-area-inset-bottom) + 28px)}}
.toast{
  background:var(--ink);color:var(--paper);
  border-radius:999px;padding:10px 12px 10px 20px;font-size:14px;font-weight:550;
  box-shadow:var(--shadow-lift);animation:rise .28s var(--ease);
  max-width:min(92vw,460px);text-align:left;
  display:inline-flex;align-items:center;gap:14px;
  pointer-events:auto;
}
.toast:not(:has(.toast-accion)){padding:11px 20px;text-align:center}
/* El botón invierte los colores del aviso, así se lee en los dos temas. */
.toast-accion{
  flex:none;border:none;border-radius:999px;
  background:var(--paper);color:var(--ink);
  padding:7px 14px;font-size:13.5px;font-weight:700;
  transition:transform .16s var(--ease), opacity .18s;
}
.toast-accion:active{transform:scale(.94)}

/* ─────────────────────── VARIOS ─────────────────────── */
.hidden{display:none !important}
.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--rule-strong);border-top-color:var(--rose);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center-col{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px}

/* pantalla de bienvenida (un solo uso) */
.welcome{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px 28px calc(env(safe-area-inset-bottom) + 40px);text-align:center;animation:fade .5s}
.welcome .mark{width:74px;height:74px;border-radius:22px;background:var(--rose);display:grid;place-items:center;box-shadow:var(--shadow-lift)}
.welcome .mark span{font-family:var(--font-display);font-style:italic;font-size:40px;color:var(--on-rose);line-height:1;margin-top:-2px}
.welcome h1{font-family:var(--font-display);font-size:34px;font-weight:500;margin:0;letter-spacing:-.02em}
.welcome p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.65;max-width:34ch;text-wrap:pretty}

/* ─────────────── ESCRITORIO: AFINADO FINAL ───────────────
   Va al final a propósito: así gana a las reglas de arriba. */
@media (min-width:900px){
  /* Tres columnas de widgets, y los anchos ocupan dos. */
  .widget-grid{grid-template-columns:repeat(3,1fr)}
  .w.span{grid-column:span 2}

  /* El calendario convive con la agenda del día, en dos columnas. */
  #v-calendario.active{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
  #v-calendario > .view-head,
  #v-calendario > .cal-chips{grid-column:1 / -1}
  .cal-chips{margin:0;padding-left:0;padding-right:0}
  .cell{aspect-ratio:1/.8}
}