:root{
  --bg:#f7f2ea;
  --surface:#fffdf9;
  --surface-2:#f1e9df;
  --surface-3:#e8ddd1;
  --sidebar:#251f1b;
  --ink:#2b241f;
  --muted:#7f746b;
  --line:rgba(83,67,56,.16);
  --accent:#bb5d3c;
  --accent-dark:#8f4028;
  --accent-soft:#edd1c3;
  --sage:#5f7e66;
  --sage-soft:#dbe6dc;
  --danger:#a94d4d;
  --shadow:0 18px 45px rgba(70,50,35,.08);
  --shadow-lg:0 28px 70px rgba(45,31,22,.14);
  --radius:20px;
  --sans:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"DM Serif Display",Georgia,serif;
}
html[data-theme="dark"]{
  --bg:#181511;
  --surface:#211d19;
  --surface-2:#2b2520;
  --surface-3:#352d27;
  --sidebar:#12100e;
  --ink:#f5eee7;
  --muted:#b9aca1;
  --line:rgba(255,244,234,.12);
  --accent:#d97652;
  --accent-dark:#f0a07f;
  --accent-soft:#4a3026;
  --sage:#83a48a;
  --sage-soft:#29382d;
  --danger:#e18181;
  --shadow:0 18px 50px rgba(0,0,0,.24);
  --shadow-lg:0 28px 70px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button,input,select,textarea{min-height:44px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 32%,transparent);outline-offset:2px}
h1,h2,p{margin-top:0}
h1{margin-bottom:6px;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.1rem);line-height:1}
h2{margin-bottom:0;font-size:1.05rem}
.muted{margin:0;color:var(--muted);line-height:1.55}
.overline{display:block;margin-bottom:5px;color:var(--accent);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.overline.light{color:#efb79f}
.skip-link{position:fixed;left:12px;top:-80px;z-index:100;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:12px;border:1px solid var(--line)}
.skip-link:focus{top:12px}

.app-layout{min-height:100svh;display:grid;grid-template-columns:236px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100svh;padding:28px 22px 24px;display:flex;flex-direction:column;background:var(--sidebar);color:#f8f2ec}
.sidebar-brand,.mobile-brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.sidebar-brand span:last-child{display:grid;line-height:1.05}
.sidebar-brand strong{font-size:.92rem;letter-spacing:.15em}
.sidebar-brand small{margin-top:5px;color:#b9aaa0;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:var(--accent);color:white;font-family:var(--serif);font-size:1.35rem}
.sidebar-nav{display:grid;gap:8px;margin-top:42px}
.nav-button{border:0;background:transparent;color:#b9aaa0}
.sidebar .nav-button{min-height:46px;padding:0 13px;display:flex;align-items:center;gap:12px;border-radius:13px;text-align:left;font-weight:600}
.sidebar .nav-button span{width:20px;text-align:center;font-size:1.1rem}
.sidebar .nav-button:hover{background:rgba(255,255,255,.06);color:white}
.sidebar .nav-button.active{background:rgba(187,93,60,.22);color:white}
.sidebar-spacer{flex:1}
.sync-card{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.035)}
.sync-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#82b18d;box-shadow:0 0 0 4px rgba(130,177,141,.12)}
.sync-card div{display:grid;gap:2px}
.sync-card strong{font-size:.76rem}
.sync-card small{color:#96887e;font-size:.68rem}

.workspace{min-width:0;padding:36px clamp(24px,4vw,56px) 60px}
.mobile-topbar,.bottom-nav{display:none}
.app-view{max-width:1240px;margin:0 auto}
.app-view[hidden]{display:none}
.view-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.today-heading{margin-bottom:22px}
.heading-actions{display:flex;align-items:center;gap:10px}
.icon-button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-size:1.15rem}
.primary-button,.secondary-button,.danger-button,.next-action{min-height:46px;border-radius:14px;padding:0 16px;font-weight:700}
.primary-button{border:0;background:var(--accent);color:#fff}
.primary-button:hover{background:var(--accent-dark)}
.secondary-button{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.danger-button{border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);background:color-mix(in srgb,var(--danger) 7%,var(--surface));color:var(--danger)}
.text-button{min-height:auto;padding:8px 0;border:0;background:transparent;color:var(--accent);font-weight:700}
.text-button:hover{text-decoration:underline}

.today-grid{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:24px}
.today-main{min-width:0}
.overview-grid{display:grid;grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);gap:16px;margin-bottom:18px}
.progress-card,.next-card,.tasks-card,.week-card,.chart-card,.settings-card,.profile-hero,.stat-card,.week-overview{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.progress-card{min-height:150px;padding:22px;display:flex;align-items:center;gap:18px}
.progress-ring{--progress:0;width:88px;height:88px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--accent) var(--progress),var(--surface-2) 0);position:relative}
.progress-ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}
.progress-ring span{position:relative;z-index:1;font-size:1.35rem;font-weight:700}
.progress-card strong{display:block;margin-bottom:4px;font-size:1rem}
.progress-card p{margin:0;color:var(--muted);font-size:.82rem}

.next-card{min-height:150px;padding:20px 22px;color:#fff;background:linear-gradient(135deg,#28231f,#41332b 72%,#624434);border-color:rgba(255,255,255,.08);box-shadow:var(--shadow-lg)}
.next-card-head{display:flex;justify-content:space-between;align-items:center;color:#e9d8cd;font-size:.76rem}
.next-card-body{display:flex;align-items:center;gap:13px;margin-top:18px}
.next-icon{width:45px;height:45px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;background:var(--accent);font-size:1.25rem}
.next-card h2{font-family:var(--serif);font-weight:400;font-size:1.45rem}
.next-card p{margin:5px 0 0;color:#d4c5ba}
.next-action{margin-top:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}
.next-action:hover{background:rgba(255,255,255,.14)}

.tasks-card,.week-card,.chart-card,.settings-card,.week-overview{padding:22px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.section-heading.compact{margin-bottom:14px}
.task-groups{display:grid;gap:17px}
.daypart-group{display:grid;gap:8px}
.daypart-title{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.daypart-title::after{content:"";height:1px;flex:1;background:var(--line)}
.task-list{display:grid;gap:9px}
.task-item{display:grid;grid-template-columns:auto 58px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:15px;background:var(--surface);transition:.18s ease}
.task-item:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(60,43,31,.06)}
.task-item.done{background:color-mix(in srgb,var(--sage-soft) 56%,var(--surface));opacity:.82}
.task-item.done .task-title{text-decoration:line-through;color:var(--muted)}
.task-check{display:grid;place-items:center}
.task-check input{position:absolute;opacity:0;pointer-events:none}
.task-check span{width:24px;height:24px;display:grid;place-items:center;border:1.7px solid color-mix(in srgb,var(--ink) 35%,transparent);border-radius:50%;background:var(--surface)}
.task-check input:checked+span{border-color:var(--sage);background:var(--sage)}
.task-check input:checked+span::after{content:"✓";color:white;font-size:.72rem;font-weight:800}
.task-time{color:var(--muted);font-weight:600;font-size:.78rem}
.task-copy{min-width:0;display:grid;gap:4px}
.task-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.72rem}
.task-category{padding:3px 7px;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:.68rem;font-weight:700}
.task-category[data-category="Trabajo"]{background:var(--accent-soft)}
.task-category[data-category="Estudio"]{background:var(--sage-soft)}
.task-reminder:empty{display:none}
.task-actions{display:flex;align-items:center;gap:2px}
.edit-button,.delete-button{width:38px;height:38px;min-height:38px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-size:1rem}
.edit-button:hover{background:var(--surface-2);color:var(--ink)}
.delete-button:hover{background:color-mix(in srgb,var(--danger) 8%,var(--surface));color:var(--danger)}

.empty-state{text-align:center;padding:34px 18px;color:var(--muted)}
.empty-state strong{display:block;color:var(--ink);font-size:1rem}
.empty-state p{margin:5px auto 16px;max-width:360px}
.empty-icon{width:48px;height:48px;margin:0 auto 12px;display:grid;place-items:center;border-radius:15px;background:var(--surface-2);color:var(--accent);font-weight:800}

.daily-summary{position:sticky;top:28px;align-self:start;padding:24px;border-radius:22px;background:var(--surface-2);border:1px solid var(--line)}
.daily-summary h2{margin:0 0 18px;font-size:1.05rem}
.summary-stat{display:grid;gap:3px}
.summary-stat strong{font-family:var(--serif);font-size:3rem;font-weight:400;color:var(--accent)}
.summary-stat span{color:var(--muted)}
.summary-line{height:1px;background:var(--line);margin:18px 0}
.daily-summary>p{margin:0 0 18px;color:var(--muted)}
.focus-tip{padding:17px;border-radius:17px;background:var(--sidebar);color:#fff}
.focus-tip strong{display:block;margin-bottom:7px;font-size:.96rem}
.focus-tip p{margin:0;color:#c7b8ad;font-size:.78rem;line-height:1.5}
.category-mini{margin-top:18px}
#today-category-summary{display:flex;flex-wrap:wrap;gap:7px}
.mini-chip{padding:6px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.7rem}

.agenda-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:14px 0}
.segmented{display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.segmented button{min-height:38px;padding:0 18px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:700}
.segmented button.active{background:var(--accent);color:white}
.filter-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.78rem}
.filter-control select{min-height:40px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:0 10px}
.week-tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day-tab{min-height:76px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--ink);padding:10px 6px;display:grid;place-items:center;gap:2px}
.day-tab span{color:var(--muted);font-size:.68rem;text-transform:uppercase}
.day-tab strong{font-size:1.1rem}
.day-tab small{color:var(--muted);font-size:.64rem}
.day-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.day-tab[aria-selected="true"] span,.day-tab[aria-selected="true"] small{color:currentColor;opacity:.82}
.week-overview-grid{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:10px;overflow-x:auto}
.week-column{min-width:130px;padding:13px;border-radius:15px;background:var(--surface-2)}
.week-column h3{margin:0 0 10px;font-size:.8rem}
.week-mini-task{padding:8px;margin-bottom:7px;border-left:3px solid var(--accent);border-radius:8px;background:var(--surface);font-size:.72rem}
.week-mini-task.done{border-left-color:var(--sage);opacity:.7}
.week-mini-task span{display:block;color:var(--muted);font-size:.65rem;margin-top:3px}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.stat-card{padding:20px}
.stat-card span,.stat-card small{color:var(--muted)}
.stat-card span{display:block;margin-bottom:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.stat-card strong{display:block;margin-bottom:4px;font-family:var(--serif);font-size:2.35rem;font-weight:400;color:var(--accent)}
.weekly-chart{height:220px;display:grid;grid-template-columns:repeat(7,1fr);gap:14px;align-items:end;padding-top:16px}
.chart-day{height:100%;display:grid;grid-template-rows:1fr auto;gap:8px;align-items:end;text-align:center}
.chart-bar-wrap{height:100%;display:flex;align-items:end;justify-content:center}
.chart-bar{width:min(44px,72%);min-height:4px;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,var(--accent),var(--accent-dark));position:relative}
.chart-bar.good{background:linear-gradient(180deg,var(--sage),#47634e)}
.chart-bar span{position:absolute;top:-24px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.68rem;font-weight:700}
.chart-day>small{color:var(--muted)}
.progress-lower{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.insight-card{padding:24px;border-radius:var(--radius);background:linear-gradient(135deg,#24201c,#45342a);color:#fff;box-shadow:var(--shadow-lg)}
.insight-card h2{margin:6px 0 10px;font-family:var(--serif);font-size:1.7rem;font-weight:400}
.insight-card p{margin:0;color:#cfbfb3;line-height:1.6}
.category-stats{display:grid;gap:11px;margin-top:16px}
.category-row{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:10px}
.category-row strong{font-size:.78rem}
.category-bar{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.category-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--sage))}
.category-row small{color:var(--muted)}

.profile-hero{display:flex;align-items:center;gap:14px;padding:20px;margin-bottom:16px}
.profile-avatar{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--sidebar);color:#fff;font-family:var(--serif);font-size:1.55rem}
.profile-hero>div:nth-child(2){display:grid;gap:2px;flex:1}
.profile-hero>div:nth-child(2)>strong{font-size:1rem}
.profile-hero>div:nth-child(2)>span{color:var(--muted);font-size:.78rem}
.preview-chip{padding:7px 9px;border-radius:999px;background:var(--sage-soft);font-size:.7rem;font-weight:700}
.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.settings-card h2{margin:0 0 14px}
.settings-form,.task-form{display:grid;gap:13px}
.settings-form label,.task-form label{display:grid;gap:6px;color:var(--muted);font-size:.76rem;font-weight:700}
.settings-form input,.settings-form select,.task-form input,.task-form select,.task-form textarea{width:100%;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);padding:0 12px}
.task-form textarea{min-height:84px;padding:10px 12px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-message{min-height:18px;margin:0;color:var(--muted);font-size:.75rem}
.helper-text{margin:10px 0 0;color:var(--muted);font-size:.75rem;line-height:1.5}
.action-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

.task-dialog{width:min(560px,calc(100% - 28px));padding:0;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg)}
.task-dialog::backdrop{background:rgba(22,17,13,.52);backdrop-filter:blur(4px)}
.task-dialog .task-form{padding:22px}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:2px}
.dialog-heading h2{font-family:var(--serif);font-size:1.65rem;font-weight:400}

.bottom-nav{display:none}

@media(max-width:1100px){
  .today-grid{grid-template-columns:1fr}
  .daily-summary{position:static;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;align-items:start}
  .daily-summary .focus-tip,.daily-summary .category-mini{grid-column:1/-1}
  .settings-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  body{padding-bottom:86px}
  .app-layout{display:block}
  .sidebar{display:none}
  .workspace{padding:0 14px 24px}
  .mobile-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;margin:0 -14px 14px;padding:12px 14px;background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
  .mobile-brand{font-family:var(--serif);font-size:1.05rem}
  .mobile-brand small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .mobile-brand .brand-mark{width:34px;height:34px;border-radius:11px;font-size:1.15rem}
  .app-view{max-width:680px}
  .view-heading{align-items:flex-start;margin-bottom:18px}
  .desktop-theme-toggle{display:none}
  .overview-grid{grid-template-columns:1fr}
  .progress-card,.next-card{min-height:auto}
  .daily-summary{display:none}
  .stats-grid{grid-template-columns:1fr 1fr}
  .settings-grid{grid-template-columns:1fr}
  .progress-lower{grid-template-columns:1fr}
  .bottom-nav{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:40;display:grid;grid-template-columns:repeat(4,1fr);padding:6px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 14px 38px rgba(44,31,22,.16);backdrop-filter:blur(16px)}
  .bottom-nav .nav-button{min-height:54px;display:grid;place-items:center;gap:2px;border-radius:12px;font-size:1rem}
  .bottom-nav .nav-button small{font-size:.66rem}
  .bottom-nav .nav-button.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
}
@media(max-width:560px){
  .workspace{padding-inline:10px}
  .mobile-topbar{margin-inline:-10px;padding-inline:12px}
  .today-heading .heading-actions .primary-button{display:none}
  h1{font-size:2.15rem}
  .progress-card,.next-card,.tasks-card,.week-card,.chart-card,.settings-card,.profile-hero,.stat-card,.week-overview{border-radius:17px}
  .progress-card{padding:17px}
  .progress-ring{width:72px;height:72px}
  .progress-ring::after{inset:8px}
  .next-card{padding:17px}
  .next-card h2{font-size:1.25rem}
  .tasks-card,.week-card,.chart-card,.settings-card,.week-overview{padding:16px}
  .section-heading{align-items:flex-start}
  .section-heading .text-button{font-size:.72rem}
  .task-item{grid-template-columns:auto 48px minmax(0,1fr) auto;gap:9px;padding:10px}
  .task-actions{gap:0}
  .delete-button{display:none}
  .task-meta{flex-wrap:wrap}
  .week-card{overflow:hidden}
  .week-tabs{grid-template-columns:repeat(7,minmax(56px,1fr));overflow-x:auto;scrollbar-width:none}
  .week-tabs::-webkit-scrollbar{display:none}
  .day-tab{min-width:56px;min-height:68px;padding:7px 3px}
  .day-tab small{display:none}
  .agenda-toolbar{align-items:stretch;flex-direction:column}
  .segmented{width:100%}
  .filter-control{justify-content:space-between}
  .filter-control select{flex:1}
  .stats-grid{grid-template-columns:1fr}
  .weekly-chart{gap:5px;height:180px}
  .chart-bar{width:min(28px,72%)}
  .profile-hero{padding:16px}
  .preview-chip{display:none}
  .form-row{grid-template-columns:1fr}
  .task-dialog{margin:auto 10px max(10px,env(safe-area-inset-bottom));width:calc(100% - 20px);max-height:88svh;border-radius:22px}
  .task-dialog[open]{position:fixed;inset:auto 0 0}
  .task-dialog .task-form{max-height:88svh;overflow:auto;padding:18px}
}
@media(max-width:390px){
  .task-item{grid-template-columns:auto 42px minmax(0,1fr) auto}
  .edit-button{width:34px}
  .task-time{font-size:.72rem}
  .progress-card strong{font-size:.92rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
