/* Native modal focus does not prevent scroll chaining to the page behind it. */
html:has(dialog:modal),body:has(dialog:modal){overflow:hidden!important;overscroll-behavior:none;}
dialog:modal{overscroll-behavior:contain;}

:root{
  --bg:#f8fafc;
  --panel:#ffffff;
  --panel-2:#f1f5f9;
  --border:#dfe5ef;
  --text:#1f2937;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --accent:#1a73e8;
  --accent-2:#34a853;
  --accent-3:#fbbc04;
  --danger:#d93025;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --radius:18px;
  --radius-sm:12px;
  --ring:0 0 0 4px rgba(26,115,232,.14);
  --font:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

html.theme-dark{
  --bg:#0f172a;
  --panel:#111827;
  --panel-2:#1f2937;
  --border:#263244;
  --text:#e5e7eb;
  --muted:#a8b3c4;
  --muted-2:#7f8da3;
  --accent:#8ab4f8;
  --accent-2:#81c995;
  --accent-3:#fdd663;
  --danger:#f28b82;
  --shadow:0 14px 34px rgba(0,0,0,.26);
  --ring:0 0 0 4px rgba(138,180,248,.18);
  color-scheme:dark;
}

html.theme-light{
  color-scheme:light;
}

*{
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

body{
  min-height:100%;
  background:
    radial-gradient(900px 420px at 15% -15%, rgba(26,115,232,.10), transparent 60%),
    radial-gradient(760px 360px at 95% -10%, rgba(52,168,83,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  letter-spacing:0;
}

html.theme-dark body{
  background:
    radial-gradient(900px 420px at 15% -15%, rgba(138,180,248,.12), transparent 60%),
    radial-gradient(760px 360px at 95% -10%, rgba(129,201,149,.08), transparent 55%),
    var(--bg);
}

.topbar{
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(203,213,225,.9);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

html.theme-dark .topbar{
  background:rgba(17,24,39,.88);
  border-bottom-color:rgba(71,85,105,.72);
  box-shadow:0 1px 2px rgba(0,0,0,.20);
}

.brand{
  color:var(--text);
  font-size:18px;
  letter-spacing:0;
}

.brand__text{
  font-weight:760;
}

.workspace-home .topbar,
.productivity-page .topbar{
  justify-content:flex-start;
  gap:14px;
  padding-block:10px;
  border-bottom-color:color-mix(in srgb,var(--border) 38%,transparent);
  box-shadow:none;
}

.workspace-home .brand__mark,
.productivity-page .brand__mark{
  border-color:transparent;
  background:color-mix(in srgb,var(--accent) 11%,var(--panel-2));
  box-shadow:0 7px 20px rgba(3,9,22,.13);
}

.workspace-home .topbar__nav,
.productivity-page .topbar__nav{
  margin-left:auto;
  gap:4px;
}

.workspace-home .topbar-icon-btn,
.productivity-page .topbar-icon-btn{
  width:36px;
  height:36px;
  border-color:transparent;
  background:transparent;
  color:var(--muted);
}

.workspace-home .topbar-icon-btn:hover,
.productivity-page .topbar-icon-btn:hover{
  border-color:transparent;
  background:color-mix(in srgb,var(--accent) 8%,var(--panel-2));
  color:var(--text);
}

.workspace-home .tray-panel{
  border-right-color:color-mix(in srgb,var(--border) 42%,transparent);
  box-shadow:14px 0 42px rgba(3,9,22,.18);
}

html.has-window-controls-overlay .topbar{
  padding-right:max(16px,calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 12px));
}

.workspace-home .tray-head,
.workspace-home .tray-footer{
  border-color:color-mix(in srgb,var(--border) 34%,transparent);
}

.workspace-home .pomodoro-top-btn,
.productivity-page .pomodoro-top-btn{order:1}
.workspace-home .agenda-top-btn,
.productivity-page .agenda-top-btn{order:2}
.workspace-home .quick-note-top-btn,
.productivity-page .quick-note-top-btn{order:3}
.workspace-home .general-ai-top-btn,
.productivity-page .general-ai-top-btn{order:4}
.workspace-home .suggestion-top-btn,
.productivity-page .suggestion-top-btn{order:5}
.workspace-home .about-top-btn,
.productivity-page .about-top-btn{order:6}
.workspace-home .theme-top-btn,
.productivity-page .theme-top-btn{order:7}
.workspace-home .account-top-btn,
.productivity-page .account-top-btn{order:10}
.workspace-home .app-install-btn,
.productivity-page .app-install-btn{display:inline-grid!important;order:9}

/* Orden estable de herramientas en todas las paginas. */
.topbar .pomodoro-top-btn{order:1}
.topbar .agenda-top-btn{order:2}
.topbar .quick-note-top-btn{order:3}
.topbar .general-ai-top-btn{order:4}
.topbar .streak-top-btn{order:5}
.topbar .notification-alert-top-btn{order:6}
.topbar .theme-top-btn{order:7}
.topbar .suggestion-top-btn{order:8}
.topbar .about-top-btn{order:9}
.topbar .app-install-btn{display:inline-grid!important;order:10}
html.app-installed .app-install-btn,
html.app-installed .tray-install-action{display:none!important}
.topbar .account-top-btn{order:11}
.workspace-home .workspace-more-btn{display:none!important}

.workspace-home .suggestion-top-btn svg,
.workspace-home .about-top-btn svg,
.workspace-home .theme-top-btn svg,
.productivity-page .suggestion-top-btn svg,
.productivity-page .about-top-btn svg,
.productivity-page .theme-top-btn svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.theme-top-btn svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .24s cubic-bezier(.2,.75,.25,1),opacity .16s ease;
}

.suggestion-top-btn svg,
.about-top-btn svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.theme-top-btn.is-switching svg{
  transform:rotate(78deg) scale(.76);
  opacity:.32;
}

.workspace-home .quick-note-top-btn svg,
.productivity-page .quick-note-top-btn svg,
.topbar .quick-note-top-btn svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.workspace-home .general-ai-top-btn svg,
.productivity-page .general-ai-top-btn svg,
.topbar .general-ai-top-btn svg{
  fill:currentColor;
  stroke:none;
}

.topbar__link,
.tray-trigger,
.btn,
.bandeja-action-btn,
.subject-toggle,
.tray-close{
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}

.topbar__link:hover,
.tray-trigger:hover,
.btn:hover,
.subject-toggle:hover{
  color:var(--accent);
  background:rgba(26,115,232,.10);
  border-color:rgba(26,115,232,.18);
}

html.theme-dark .topbar__link:hover,
html.theme-dark .tray-trigger:hover,
html.theme-dark .btn:hover,
html.theme-dark .subject-toggle:hover{
  background:rgba(138,180,248,.12);
  border-color:rgba(138,180,248,.20);
}

.tray-trigger{
  width:40px;
  height:40px;
  margin-right:10px;
}

.tray-trigger__bar{
  background:currentColor;
}

.container{
  padding-top:22px;
}

.cards-grid,
.topic-grid{
  gap:12px;
}

.section{
  margin-top:16px;
}

.section__head{
  margin-bottom:12px;
}

.hero,
.panel,
.card,
.topic-card,
.resource-card,
.video-card,
.pdf-card,
.tool-card,
.empty-section,
.global-search__results{
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.hero{
  padding:18px 22px;
}

.hero h1,
.panel h1,
.section__head h2,
.topic-page-head h1,
.card__title,
.topic-card__title,
.video-card__title,
.resource-card h3,
.pdf-card__content h3,
.tool-card__content h3{
  color:var(--text);
  letter-spacing:0;
}

.hero p,
.section__hint,
.muted,
.card__desc,
.topic-card__meta,
.global-search__meta,
.tray-help,
.tray-empty,
.resource-card p,
.video-card__content p,
.pdf-card__content p,
.tool-card__content p{
  color:var(--muted);
}

.card,
.topic-card,
.resource-card,
.video-card,
.pdf-card,
.tool-card{
  border-radius:16px;
  background:var(--panel);
  transform:none;
}

.card{
  min-height:96px;
  padding:14px;
  gap:8px;
}

.card__title{
  margin-bottom:4px;
  font-size:15.5px;
}

.card__desc{
  font-size:13px;
  line-height:1.35;
}

.topic-card{
  min-height:68px;
  padding:12px 14px;
}

.topic-card__title{
  font-size:15px;
}

.topic-card__meta{
  font-size:12.5px;
  line-height:1.35;
}

.card:hover,
.topic-card:hover,
.resource-card:hover,
.video-card:hover,
.pdf-card:hover,
.tool-card:hover{
  transform:translateY(-2px);
  border-color:rgba(26,115,232,.34);
  background:var(--panel);
  box-shadow:0 14px 34px rgba(26,115,232,.12);
}

html.theme-dark .card:hover,
html.theme-dark .topic-card:hover,
html.theme-dark .resource-card:hover,
html.theme-dark .video-card:hover,
html.theme-dark .pdf-card:hover,
html.theme-dark .tool-card:hover{
  border-color:rgba(138,180,248,.36);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}

.global-search__input{
  background:var(--panel-2);
  border-color:transparent;
  color:var(--text);
}

.global-search__input:focus{
  background:var(--panel);
  border-color:var(--accent);
  box-shadow:var(--ring);
}

.global-search__input::placeholder{
  color:var(--muted-2);
}

.global-search__tag,
.badge{
  border-color:rgba(26,115,232,.18);
  background:rgba(26,115,232,.10);
  color:var(--accent);
}

html.theme-dark .global-search__tag,
html.theme-dark .badge{
  border-color:rgba(138,180,248,.22);
  background:rgba(138,180,248,.12);
}

.global-search mark{
  background:rgba(251,188,4,.24);
  color:var(--text);
}

.tray-panel{
  background:var(--panel);
  border-right:1px solid var(--border);
  box-shadow:8px 0 24px rgba(15,23,42,.08);
}

html.theme-dark .tray-panel{
  box-shadow:8px 0 24px rgba(0,0,0,.32);
}

.tray-head{
  border-bottom:1px solid var(--border);
}

.tray-kicker{
  color:var(--muted-2);
}

.tray-head h2{
  color:var(--text);
}

.tray-close{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--muted);
  background:var(--panel-2);
  border-color:var(--border);
}

.tray-close:hover{
  color:var(--danger);
  background:rgba(217,48,37,.10);
  border-color:rgba(217,48,37,.20);
}

.tray-accordion{
  border-bottom:1px solid var(--border);
}

.tray-accordion__trigger{
  color:var(--text);
  border-radius:12px;
  margin:2px 0;
}

.tray-accordion__trigger:hover{
  color:var(--accent);
  background:rgba(26,115,232,.06);
}

html.theme-dark .tray-accordion__trigger:hover{
  background:rgba(138,180,248,.10);
}

.tray-chevron{
  color:var(--muted-2);
}

.tray-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-top:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 94%, var(--panel-2));
}

.tray-install-action{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 8px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.tray-install-action:hover{
  background:var(--panel-2);
  color:var(--text);
}

.tray-install-action svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tray-install-action + .tray-footer__label{
  margin-left:auto;
}

.tray-footer__label{
  margin:0;
  color:var(--muted-2);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.bandeja-mini-actions{
  top:10px;
  right:10px;
  gap:6px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  border:1px solid var(--border);
  box-shadow:0 8px 20px rgba(15,23,42,.10);
}

html.theme-dark .bandeja-mini-actions{
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}

.bandeja-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--muted);
  background:var(--panel);
  border-color:var(--border);
  font-weight:700;
}

.bandeja-action-btn svg,
.bandeja-remove-btn svg,
.theme-switcher svg{
  width:17px;
  height:17px;
  fill:currentColor;
}

.bandeja-action-btn--icon{
  width:34px;
  height:34px;
  padding:0;
}

.bandeja-action-btn--text{
  min-height:38px;
  padding:9px 14px;
}

.bandeja-action-btn:hover{
  color:var(--accent);
  background:rgba(26,115,232,.10);
  border-color:rgba(26,115,232,.20);
}

.bandeja-action-btn.is-active{
  color:var(--accent);
  background:rgba(26,115,232,.12);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(26,115,232,.10);
}

html.theme-dark .bandeja-action-btn:hover,
html.theme-dark .bandeja-action-btn.is-active{
  background:rgba(138,180,248,.12);
  box-shadow:0 0 0 3px rgba(138,180,248,.10);
}

.bandeja-list-card{
  position:relative;
  align-items:flex-start;
  padding-right:48px;
  min-height:auto;
  box-shadow:none;
}

.bandeja-list-card:hover{
  box-shadow:0 8px 22px rgba(26,115,232,.10);
}

.bandeja-remove-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--muted);
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}

.bandeja-remove-btn:hover{
  color:var(--danger);
  background:rgba(217,48,37,.10);
  border-color:rgba(217,48,37,.20);
  box-shadow:0 6px 16px rgba(179,38,30,.12);
}

.subject-toggle{
  background:var(--panel);
  border-color:var(--border);
  color:var(--accent);
  box-shadow:0 6px 16px rgba(15,23,42,.08);
}

.loading-placeholder{
  background:var(--panel);
  border-color:var(--border);
  color:var(--muted);
}

.pdf-preview,
.tool-preview{
  background:linear-gradient(135deg,var(--panel),var(--panel-2));
  color:var(--accent);
}

.theme-switcher{
  display:flex;
  gap:8px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel-2);
}

.theme-switcher__btn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--panel);
  color:var(--muted);
  cursor:pointer;
  box-shadow:0 4px 12px rgba(15,23,42,.08);
}

.theme-switcher__btn svg{
  width:19px;
  height:19px;
}

.theme-switcher__btn:hover{
  color:var(--accent);
  background:rgba(26,115,232,.10);
}

.theme-switcher__btn.is-active{
  color:var(--accent);
  background:rgba(26,115,232,.14);
  border-color:rgba(26,115,232,.24);
}

html.theme-dark .theme-switcher__btn{
  box-shadow:0 4px 12px rgba(0,0,0,.26);
}

html.theme-dark .theme-switcher__btn:hover,
html.theme-dark .theme-switcher__btn.is-active{
  background:rgba(138,180,248,.14);
  border-color:rgba(138,180,248,.24);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media(max-width:760px){
  .container{
    padding-top:18px;
  }

  .card{
    min-height:88px;
  }

  .tray-panel{
    box-shadow:10px 0 28px rgba(15,23,42,.14);
  }

  html.theme-dark .tray-panel{
    box-shadow:10px 0 28px rgba(0,0,0,.38);
  }

  .global-search__results{
    box-shadow:0 12px 30px rgba(15,23,42,.12);
  }

  .tray-footer{
    padding:12px 14px;
  }
}

.agenda-form--quick{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:9px;
}

.agenda-form--quick .agenda-save-btn{
  width:auto;
  min-width:92px;
  margin:0;
  padding-inline:14px;
}

.agenda-manual .agenda-form--quick{
  padding-top:8px;
}

.agenda-manual .agenda-selected-day{
  padding-top:10px;
}

@media(max-width:380px){
  .agenda-form--quick{
    grid-template-columns:1fr;
  }

  .agenda-form--quick .agenda-save-btn{
    width:100%;
  }
}

@media(max-width:900px){
  .workspace-home .topbar__nav > a.topbar__link,
  .productivity-page .topbar__nav > a.topbar__link,
  .topbar .topbar__nav > a.topbar__link{
    display:inline-grid!important;
  }
}

@media(max-width:520px){
  .workspace-home .topbar,
  .productivity-page .topbar,
  .topbar{
    gap:6px;
    padding-inline:10px;
  }

  .workspace-home .topbar__nav,
  .productivity-page .topbar__nav,
  .topbar .topbar__nav{
    gap:1px;
    max-width:100%;
    flex-shrink:1;
    flex-wrap:wrap;
  }

  .workspace-home .topbar-icon-btn,
  .productivity-page .topbar-icon-btn,
  .topbar .topbar-icon-btn{
    width:31px;
    height:31px;
    padding:6px;
  }
}

/* En ventanas PWA angostas, las herramientas bajan debajo de los controles de Windows. */
@media(max-width:620px){
  html.has-window-controls-overlay .topbar{
    padding-top:calc(env(titlebar-area-height, 32px) + 8px);
    padding-right:10px;
  }

  html.has-window-controls-overlay .topbar .brand__text{
    display:none;
  }

  html.has-window-controls-overlay .topbar .topbar-icon-btn{
    width:30px;
    height:30px;
    padding:6px;
  }
}

@media(max-width:360px){
  .workspace-home .topbar,
  .productivity-page .topbar,
  .topbar{
    gap:2px;
    padding-inline:7px;
  }

  .workspace-home .topbar__nav,
  .productivity-page .topbar__nav,
  .topbar .topbar__nav{
    gap:0;
  }

  .workspace-home .topbar-icon-btn,
  .productivity-page .topbar-icon-btn,
  .topbar .topbar-icon-btn{
    width:26px;
    height:26px;
    padding:5px;
  }

  .topbar .brand__mark{
    width:32px;
    height:32px;
  }
}
.account-app-actions [data-account-update-manual]{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  margin-top:8px;
  text-align:center;
  text-decoration:none;
}
.account-app-actions [data-account-update-manual][hidden]{display:none}
.account-app-actions [data-account-update-manual] svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7}
.account-resume-notice { position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:45;max-width:calc(100% - 32px);padding:10px 14px;box-sizing:border-box;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);box-shadow:0 4px 16px #0002;font-size:13px;line-height:1.5;pointer-events:none;animation:resume-notice-in 180ms ease-out; }
@keyframes resume-notice-in { from { opacity:0;transform:translateY(4px); } to { opacity:1;transform:none; } }
@media(max-width:700px) { .account-resume-notice { bottom:calc(86px + env(safe-area-inset-bottom,0px)); } }
@media(prefers-reduced-motion:reduce) { .account-resume-notice { animation:none; } }
/* Feedback stays outside the layout and never delays a saved task. */
.task-completion-pulse{position:fixed;z-index:2147483000;width:24px;height:24px;margin:-12px;border:2px solid var(--accent,#8ab4f8);border-radius:50%;pointer-events:none;animation:task-completion-pulse .28s ease-out both;}
@keyframes task-completion-pulse{from{opacity:.7;transform:scale(.75);}to{opacity:0;transform:scale(1.8);}}
@media(prefers-reduced-motion:no-preference){button:not(:disabled):active,[role="button"]:active{transform:translateY(1px);}}
@media(prefers-reduced-motion:reduce){.task-completion-pulse{display:none;}}