:root{
  --bg:#f3f1e6; --canvas:#f7f6f0; --card:#fffefa; --text:#20352e; --muted:#69746e;
  --border:#e7e7dd; --sage:#dfe8da; --green:#31745d; --green-light:#e8f1e9;
  --rose:#fbe9e4; --peach:#fff0df; --lavender:#eeebf9; --shadow:0 8px 30px rgba(47,64,52,.035);
  --serif:Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #84a88b;outline-offset:2px}
a{color:var(--green)}
.app-shell{max-width:1540px;min-height:100vh;margin:auto;display:grid;grid-template-columns:232px minmax(0,1fr);background:var(--canvas)}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:30px 16px;background:#f0f1e9;border-right:1px solid var(--border)}
.sidebar-brand{display:flex;align-items:center;gap:9px;padding:10px 18px 32px;font:30px var(--serif);letter-spacing:-.6px}
.brand-sun{font-size:26px;color:#c9a75a}
.sidebar-nav,.sidebar-footer{display:grid;gap:7px}
.sidebar-footer{margin-top:auto;padding-bottom:12px}
.nav-item{border:0;background:transparent;color:#344a40;display:flex;align-items:center;gap:14px;text-align:left;border-radius:13px;padding:12px 14px;font-size:15px}
.nav-item svg{width:20px;height:20px;stroke-width:1.85}
.nav-item.active,.nav-item:hover{background:var(--sage);color:#164832}
.nav-item.active{font-weight:650}
.main-content{min-width:0;max-width:1250px;width:100%;margin:0 auto;padding:34px clamp(22px,4vw,56px) 80px}
.loading{margin:25vh auto;text-align:center;color:var(--muted)}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:25px}
.page-head h1{font:clamp(28px,3.5vw,42px)/1.1 var(--serif);font-weight:normal;letter-spacing:-.7px;margin:0 0 5px}
.page-head .subhead{color:var(--muted);margin:0;font-size:14px}
.page-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.icon-btn,.chip-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:0 12px;color:var(--text);gap:7px}
.icon-btn{width:42px;padding:0}
.icon-btn svg,.chip-btn svg{width:18px;height:18px}
.primary-btn{background:var(--green);border:1px solid var(--green);color:white;border-radius:12px;padding:10px 16px;font-weight:650;min-height:44px;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.primary-btn:hover{background:#245c48}
.primary-btn svg{width:17px;height:17px}
.ghost-btn{border:0;background:transparent;color:var(--green);font-weight:650;padding:9px 5px}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.card{background:var(--card);border:1px solid #efede4;border-radius:21px;padding:22px;box-shadow:var(--shadow);min-width:0}
.card-wide{grid-column:1/-1}
.card-title{display:flex;align-items:flex-start;gap:13px;min-width:0}
.card-title h2{font-size:19px;line-height:1.3;margin:0 0 2px;letter-spacing:-.3px;font-weight:650}
.card-title small{color:var(--muted);font-size:13px}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:13px}
.small-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:var(--sage);color:var(--green)}
.small-icon svg{width:22px;height:22px}
.small-icon.calendar{background:var(--rose);color:#bf695c}
.small-icon.routine{background:var(--green-light);color:var(--green)}
.small-icon.todo{background:var(--peach);color:#b47d43}
.small-icon.upcoming{background:var(--lavender);color:#7563b4}
.card-link{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border:0;border-radius:50%;background:transparent;color:#60756a}
.card-link svg{width:19px;height:19px}
.card-link:hover{background:#f1f2eb}
.weather-card{background:linear-gradient(135deg,#fffefa,#edf2e8);border:1px solid #ecede3}
.weather-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.weather-heading{font-size:15px;font-weight:700;margin-bottom:5px;display:flex;gap:8px;align-items:center}
.weather-status{font:26px/1.2 var(--serif);margin-bottom:7px}
.weather-help{font-size:13px;color:var(--muted);max-width:430px}
.weather-symbol{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;font-size:40px;color:#cfa852;background:#fff8e8}
.weather-note{margin:18px 0 0;padding:12px 15px;border-radius:13px;background:#e8eee4;color:#536a59;font-size:13px}
.weather-note a{font-weight:700}
.agenda-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #f0efe9}
.agenda-row:last-child{border-bottom:0}
.agenda-time{flex:0 0 51px;color:#5b6b61;font-size:13px;font-weight:650;padding-top:1px}
.agenda-dot{width:8px;height:8px;border-radius:50%;background:#7d9c92;flex:none;margin-top:7px}
.agenda-dot.birthday{background:#e8a4a8}
.agenda-text{min-width:0;flex:1}
.agenda-text strong{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.agenda-text span{display:block;font-size:12px;color:var(--muted)}
.progress-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);margin-bottom:8px}
.progress-track{height:8px;border-radius:99px;background:#e9eae5;overflow:hidden;margin-bottom:14px}
.progress-fill{height:100%;background:#65a783;border-radius:99px;transition:width .2s ease}
.checklist{display:grid;gap:8px}
.checkrow{display:flex;align-items:center;gap:10px;min-width:0;font-size:14px}
.checkrow label{flex:1;min-width:0;overflow-wrap:anywhere;cursor:pointer}
.checkrow.checked label{text-decoration:line-through;color:var(--muted)}
.checkrow input{appearance:none;flex:0 0 19px;width:19px;height:19px;border-radius:50%;border:1.8px solid #b4c1b8;background:#fff;position:relative;margin:0;cursor:pointer}
.checkrow input:checked{background:#63a783;border-color:#63a783}
.checkrow input:checked:after{content:'✓';position:absolute;color:#fff;font-weight:800;font-size:12px;top:-1px;left:4px}
.card-foot{margin-top:15px;padding-top:9px;border-top:1px solid #f0efe9}
.card-foot .ghost-btn{padding:2px}
.muted{color:var(--muted)}
.empty-mini{color:var(--muted);font-size:13px;padding:5px 0 2px}
.pill{font-size:11px;line-height:1.6;display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;background:#edf1e9;color:#52705d;font-weight:650}
.next-date{color:#68776b;flex:0 0 83px;font-size:13px;font-weight:650}
.next-label{font-size:14px;flex:1;min-width:0;overflow-wrap:anywhere}
.next-time{font-size:12px;color:var(--muted)}
.calendar-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr);gap:16px}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.cal-head h2{font:27px var(--serif);margin:0;text-transform:capitalize}
.cal-nav{display:flex;align-items:center;gap:6px}
.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.weekday{font-size:11px;color:var(--muted);text-align:center;font-weight:650;padding:7px 0}
.day-btn{min-width:0;min-height:70px;border:1px solid transparent;background:#fafaf6;border-radius:12px;padding:9px 4px;display:flex;flex-direction:column;align-items:center;gap:5px}
.day-btn:not(.outside):hover{background:#eaf0e7}
.day-btn.outside{opacity:.27}
.day-btn.selected{border-color:#8fb49b;background:#e8f0e6}
.day-num{display:grid;place-items:center;font-size:13px;width:28px;height:28px;border-radius:50%}
.day-btn.today .day-num{background:var(--green);color:white;font-weight:700}
.day-btn.selected:not(.today) .day-num{font-weight:750}
.day-dots{display:flex;gap:3px}
.day-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#88a6a4}
.day-dots i.birthday{background:#e8a4a8}.day-dots i.task{background:#d2ab6a}
.side-title{font-size:18px;font-weight:680;margin:0 0 5px}
.date-head{font:22px var(--serif);margin-bottom:16px;text-transform:capitalize}
.empty-message{font-size:14px;color:var(--muted);padding:10px 0}
.tabs{display:flex;gap:6px;background:#eaece3;width:max-content;max-width:100%;padding:5px;border-radius:13px;margin-bottom:20px}
.tab{padding:9px 18px;border:0;border-radius:10px;background:transparent;color:#53635b;font-weight:600}
.tab.active{background:var(--card);color:var(--text);box-shadow:0 2px 6px #a9b6a624}
.item-list{display:grid;gap:9px}
.item-row{display:flex;gap:12px;align-items:center;background:#fffefa;border:1px solid #efede4;border-radius:14px;padding:13px 14px;min-width:0}
.item-row .checkrow{flex:1}
.item-copy{flex:1;min-width:0}
.item-copy strong{display:block;font-size:15px;overflow-wrap:anywhere}
.item-copy small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.item-actions{display:flex;align-items:center;gap:3px}
.tiny-btn{width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;border-radius:10px;color:#62766a}
.tiny-btn:hover{background:#f0f2e9}
.tiny-btn svg{width:16px;height:16px}
.tiny-btn:disabled{opacity:.24;cursor:default}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 14px}
.section-header h2{font:22px var(--serif);margin:0}
.section-text{font-size:14px;color:var(--muted);margin-top:-10px;margin-bottom:20px}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px}
.note-tile{text-align:left;border:1px solid #edeae2;border-radius:18px;background:#fffefa;padding:20px;min-height:156px;color:var(--text);display:flex;flex-direction:column;align-items:stretch}
.note-tile:hover{border-color:#bdd3c1}
.note-tile h3{font:21px var(--serif);margin:0 0 8px;overflow-wrap:anywhere}
.note-tile p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;overflow-wrap:anywhere;flex:1;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.note-tile small{color:#929990;font-size:12px;margin-top:15px}
.search-box{width:100%;border:1px solid #dee4db;background:#fffefa;border-radius:14px;padding:14px 17px;font-size:16px;color:var(--text)}
.result-group{margin:25px 0}.result-group h3{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.result-button{display:block;width:100%;background:var(--card);border:1px solid var(--border);border-radius:12px;text-align:left;padding:12px 14px;margin:7px 0;color:var(--text)}
.result-button strong{display:block;font-weight:650}.result-button small{color:var(--muted)}
.notice{background:#edf1e8;border:1px solid #e0e9df;border-radius:13px;padding:12px 15px;color:#45604f;font-size:13px;margin:14px 0}
.note-body{white-space:pre-wrap;line-height:1.7;color:#425349;overflow-wrap:anywhere}
.form-field{display:grid;gap:7px;margin:0 0 16px}
.form-field label{font-size:13px;color:#516459;font-weight:650}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:12px 13px;border:1px solid #dce3d9;border-radius:11px;background:white;color:var(--text);font-size:16px;min-height:46px}
.form-field textarea{resize:vertical;min-height:155px;line-height:1.5}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.field-help{font-size:12px;color:var(--muted);margin:-9px 0 15px}
.modal-overlay{position:fixed;inset:0;z-index:40;background:rgba(24,35,29,.4);display:grid;place-items:center;padding:18px;overflow-y:auto}
.modal{width:min(560px,100%);max-height:calc(100dvh - 35px);overflow-y:auto;overscroll-behavior:contain;border-radius:23px;padding:25px;background:var(--canvas);box-shadow:0 28px 90px #23382a48}
.modal h2{font:29px var(--serif);margin:0 0 20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.danger-btn{color:#b04545;border:0;background:transparent;padding:10px 0;font-weight:650}
.modal hr{border:0;border-top:1px solid #e3e5dc;margin:22px 0}
#toast-root{position:fixed;z-index:70;bottom:90px;right:22px;pointer-events:none}
.toast{border-radius:12px;background:#264936;color:white;padding:12px 17px;margin-top:8px;box-shadow:0 8px 25px #0002}
.bottom-nav{display:none}
@media(max-width:1000px){.app-shell{grid-template-columns:190px 1fr}.sidebar{padding:25px 11px}.sidebar-brand{font-size:27px;padding:12px 13px 27px}.main-content{padding:30px 22px 80px}.calendar-layout{grid-template-columns:1fr}.day-btn{min-height:64px}}
@media(max-width:700px){
  body{background:#f4f2e9}.app-shell{display:block;min-height:100dvh;background:linear-gradient(180deg,#eef0e7 0,#f7f6f0 260px,#f7f6f0 100%)}
  .sidebar{display:none}
  .main-content{padding:25px 15px calc(104px + env(safe-area-inset-bottom));max-width:580px}
  .page-head{margin:9px 1px 20px;align-items:center}.page-head h1{font-size:34px}.page-head .subhead{font-size:13px}.page-actions{gap:6px}
  .page-actions .primary-btn{font-size:13px;padding:9px 12px}
  .home-grid{grid-template-columns:1fr;gap:11px}.card-wide{grid-column:auto}
  .card{padding:16px;border-radius:17px}.card-top{margin-bottom:10px}
  .card-title h2{font-size:17px}.card-title small{font-size:12px}
  .small-icon{width:36px;height:36px;border-radius:11px}.small-icon svg{width:18px;height:18px}
  .weather-card{padding:17px}.weather-status{font-size:24px}
  .weather-symbol{width:52px;height:52px;font-size:33px}
  .bottom-nav{z-index:25;position:fixed;display:grid;grid-template-columns:repeat(4,1fr);bottom:0;left:0;right:0;padding:9px 7px calc(8px + env(safe-area-inset-bottom));background:#fffefaf2;backdrop-filter:blur(16px);border-top:1px solid #e4e8df;box-shadow:0 -2px 20px #263a2c0b}
  .mobile-nav-item{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;min-height:48px;color:#6b776f;background:transparent;border:0;font-size:11px}
  .mobile-nav-item svg{width:22px;height:22px;stroke-width:1.8}
  .mobile-nav-item.active{color:var(--green);font-weight:700}
  .calendar-layout{grid-template-columns:1fr}.day-btn{min-height:55px;padding:6px 1px}.day-num{width:26px;height:26px}
  .notes-grid{grid-template-columns:1fr 1fr;gap:9px}.note-tile{padding:15px;min-height:152px}.note-tile h3{font-size:18px}
  .modal{padding:20px;max-height:calc(100dvh - 22px)}
  .form-grid{grid-template-columns:1fr}.modal-overlay{padding:11px}.tabs{width:100%}.tab{flex:1}
  #toast-root{bottom:90px;right:15px;left:15px;text-align:center}
}
@media(max-width:375px){.main-content{padding-left:10px;padding-right:10px}.notes-grid{grid-template-columns:1fr}.card-title h2{font-size:16px}.card{padding:14px}.item-row{padding:11px 8px}.item-actions{gap:0}.tiny-btn{width:30px}.page-head h1{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
[hidden]{display:none!important}
.sr-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Mantiene la tarjeta meteorológica compacta hasta conectar el proveedor. */
.weather-heading svg{width:20px;height:20px;flex:none}
.weather-top>div:first-child{min-width:0;flex:1}
.weather-card .weather-status{margin-top:7px}