[hidden]{display:none!important}
:root{
  --paper:#fffaf1;--paper2:#fff7eb;--ink:#112e46;--coral:#ff572d;--coral2:#f44d25;
  --line:#eadfd1;--muted:#6e6b67;--shadow:0 8px 24px rgba(56,42,30,.10)
}
*{box-sizing:border-box}html{background:var(--paper)}
body{margin:0;min-width:320px;color:var(--ink);font-family:Georgia,"Times New Roman",serif;background:
  radial-gradient(circle at 4% 5%,rgba(244,117,76,.06),transparent 21%),
  radial-gradient(circle at 97% 88%,rgba(53,125,160,.06),transparent 20%),
  linear-gradient(135deg,#fffaf1 0%,#fff8ee 54%,#fffaf4 100%);min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(rgba(64,75,74,.11) .55px,transparent .55px);background-size:9px 9px}
button,input,select{font:inherit}button{cursor:pointer}.app{width:min(1220px,calc(100vw - 26px));margin:0 auto;padding:4px 0 10px;position:relative;z-index:1}.sakura-corner{position:fixed;right:-20px;top:-8px;width:260px;max-width:23vw;z-index:0;pointer-events:none;opacity:.96}
.header{display:grid;grid-template-columns:270px 1fr auto;align-items:start;gap:14px;min-height:94px;padding-top:2px;position:relative;z-index:2}.brand{align-self:start}.brand-reference{display:block;width:255px;height:auto;mix-blend-mode:multiply}.month-title-wrap{text-align:center;padding-top:9px}.month-title-wrap h1{margin:0;font-size:34px;line-height:1.05;color:#102b43;font-weight:700}.month-title-wrap h1 span{color:var(--coral);font-size:31px}.flower-line{color:#e98674;font-size:14px;letter-spacing:2px;margin-top:6px}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:27px;position:relative}.view-toggle{display:flex;background:#fffdf9;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(60,40,25,.06)}.view-toggle button{border:0;background:transparent;padding:10px 15px;color:#1e2f3b}.view-toggle button.selected{border-bottom:3px solid var(--coral);background:#fff}.orange-square,.icon-square{width:45px;height:42px;border:0;border-radius:8px;display:grid;place-items:center;font-size:24px;box-shadow:0 6px 14px rgba(159,64,31,.14)}.orange-square{background:linear-gradient(#ff6a3c,#f45127);color:#fff}.icon-square{background:#fffdf9;color:#263746;font-size:19px}.sync-badge{font-size:12px;font-weight:700;padding:8px 11px;border-radius:999px;background:#edf0f2;color:#596773;white-space:nowrap}.sync-badge.ok{background:#e8f5ec;color:#2c6f43}.sync-badge.offline{background:#f0ede5;color:#756b55}.sync-badge.syncing,.sync-badge.pending{background:#fff0d6;color:#9a6518}.sync-badge.error{background:#fde6e2;color:#a43b2d}.plus-menu-wrap{position:relative}.plus-menu{position:absolute;right:-35px;top:52px;width:175px;background:#fff9f1;padding:9px;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow);z-index:20}.plus-menu button{width:100%;border:0;border-radius:7px;background:linear-gradient(#ff6a38,#f34b22);color:white;padding:9px 10px;margin:3px 0;text-align:center;font-size:13px}
.nav-row{display:flex;align-items:center;gap:8px;height:38px;margin-top:-2px;margin-bottom:7px;position:relative;z-index:2}.nav-btn,.today-btn{border:1px solid var(--line);background:#fffdf8;border-radius:8px;height:32px;min-width:38px;color:#1e3345}.today-btn{padding:0 10px}.jump-label{margin-left:auto;display:flex;align-items:center;gap:6px;color:#6e6b67;font-size:13px}.jump-label input{border:1px solid var(--line);border-radius:7px;background:#fffdf9;padding:6px 9px;color:#172e41}
.workspace{display:grid;grid-template-columns:minmax(0,3fr) 300px;gap:18px;align-items:start}.left-workspace{min-width:0}.calendar-card{background:rgba(255,250,241,.90);border:1px solid rgba(229,216,200,.82);border-radius:14px;overflow:hidden;box-shadow:0 10px 27px rgba(57,45,34,.07)}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line);background:rgba(255,252,246,.72)}.weekdays div{text-align:center;padding:10px 4px 8px;font-size:13px;font-weight:700}.weekdays .weekend{color:var(--coral)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.day-cell{position:relative;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,252,247,.48);min-height:91px;padding:8px;text-align:left;color:#101d28}.day-cell:nth-child(7n){border-right:0}.day-cell.weekend{background:rgba(255,238,229,.40)}.day-cell.outside{opacity:.42}.day-cell.selected{outline:2px solid var(--coral);outline-offset:-2px;border-radius:10px;background:#fff9f2;z-index:1}.day-num{font-weight:700;font-size:14px}.day-icons{position:absolute;inset:26px 7px 5px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:1px}.day-icons img{object-fit:contain;filter:drop-shadow(0 2px 2px rgba(40,25,18,.12))}.day-icons.count-1 img{width:47px;height:47px}.day-icons.count-2 img{width:36px;height:36px}.day-icons.count-3 img{width:30px;height:30px}.day-icons.count-4 img,.day-icons.many img{width:25px;height:25px}.more-count{font-size:10px;background:#fff5e8;border-radius:999px;padding:2px 4px;align-self:center}
.legend-section{display:grid;grid-template-columns:125px 1fr 92px;gap:9px;align-items:stretch;margin-top:12px;background:rgba(255,250,241,.86);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 7px 18px rgba(57,45,34,.05)}.legend-title{font-weight:700;font-size:13px;line-height:1.25;display:flex;align-items:flex-start;padding:10px 5px}.activity-legend{display:grid;grid-template-columns:repeat(5,minmax(88px,1fr));gap:7px}.activity-tile,.archive-tile{border:1px solid #eadfd3;background:rgba(255,252,247,.88);border-radius:9px;min-height:94px;padding:7px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 3px 8px rgba(70,48,30,.06);transition:.12s}.activity-tile img{width:54px;height:49px;object-fit:contain}.activity-tile .label{font-size:11px;text-align:center;line-height:1.15;color:#1c2c38}.activity-tile[aria-pressed="true"]{transform:translateY(4px);background:#ffe9dd;border-color:var(--coral);box-shadow:inset 0 5px 10px rgba(119,61,32,.15)}.activity-tile.archive-target{outline:2px dashed var(--coral)}.archive-tile{color:#ff3e28;border:1px dashed #efb3a5;font-size:11px}.archive-tile[aria-pressed="true"]{transform:translateY(3px);background:#fff0e9}.trash-big{font-size:22px}.archive-note{text-align:center;font-size:11px;line-height:1.4;color:#31363a;margin:6px 0 0}
.right-rail{display:grid;gap:12px}.manage-card,.how-card{background:rgba(255,250,241,.94);border:1px solid var(--line);border-radius:12px;box-shadow:0 9px 22px rgba(57,45,34,.07);padding:14px 15px;position:relative;overflow:hidden}.manage-head,.how-head{display:flex;justify-content:space-between;align-items:center}.manage-head h2,.how-head h2{margin:0;font-size:17px}.manage-card>p,.how-card>p{margin:7px 0 10px;color:#404b53;font-size:11px;line-height:1.45}.mini-gear{border:0;background:transparent;font-size:17px;color:#364450}.manage-list{border-top:1px solid var(--line)}.manage-row{display:grid;grid-template-columns:36px 1fr 26px 26px;align-items:center;gap:7px;min-height:48px;border-bottom:1px solid var(--line);font-size:11px}.manage-row img{width:34px;height:34px;object-fit:contain}.manage-row button{border:0;background:transparent;font-size:15px}.manage-edit{color:#34434d}.manage-delete{color:#ff3929}.manage-new{margin-top:11px;width:100%;border:0;border-radius:7px;background:linear-gradient(#ff642f,#f54820);color:white;padding:9px;font-size:12px}.how-card{min-height:158px;padding-bottom:58px}.how-head h2{font-size:15px}.info-circle{width:20px;height:20px;border:2px solid #2e4251;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px}.wave-art{position:absolute;right:-2px;bottom:-2px;width:122px;height:auto;mix-blend-mode:multiply}.functional-day-panel{display:none!important}
.list-layout{background:#fffaf2;border:1px solid var(--line);border-radius:12px;padding:18px}.list-row{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:10px}.list-row img{width:40px;height:40px;object-fit:contain}.empty{color:#72767a;font-style:italic;padding:14px 0}.selected-row{display:grid;grid-template-columns:40px 1fr 30px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}.selected-row img{width:38px;height:38px;object-fit:contain}.clear-day{width:100%;border:1px solid var(--coral);background:transparent;color:var(--coral);border-radius:8px;padding:8px}.next-card{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* dialogs copied from the reference mockup */
.modal{border:0;border-radius:12px;padding:0;width:min(470px,calc(100% - 28px));background:#fffaf2;box-shadow:0 16px 48px rgba(40,32,25,.25)}.modal.small{width:min(430px,calc(100% - 28px))}.modal::backdrop{background:rgba(35,31,27,.35)}.modal form{padding:18px}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal h2{margin:0;font-size:20px;text-align:center;flex:1}.close-btn{border:0;background:transparent;font-size:25px;color:#7e2d20}.field{display:block;margin:14px 0 10px;font-weight:700;font-size:12px}.field span{color:var(--coral)}.field input,.field select,select{display:block;width:100%;margin-top:6px;border:1px solid var(--line);background:#fffdf9;border-radius:7px;padding:9px}.icon-fieldset{border:0;padding:0;margin:13px 0}.icon-fieldset legend{font-weight:700;margin-bottom:7px;font-size:12px}.icon-choices{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.icon-choice{border:1px solid var(--line);background:#fffdf9;border-radius:7px;padding:4px;min-height:55px}.icon-choice img{width:100%;height:45px;object-fit:contain}.icon-choice.selected{outline:2px solid var(--coral);background:#fff1e9}.custom-icon-box{border-top:1px solid var(--line);padding-top:12px;display:grid;grid-template-columns:82px 1fr;gap:11px;align-items:center}.custom-icon-box.compact{grid-template-columns:72px 1fr}.custom-plus{border:1px dashed #f1a18a;border-radius:8px;min-height:80px;display:grid;place-items:center;color:var(--coral);font-size:30px}.custom-icon-box p{margin:.3rem 0;color:#3d4952;font-size:11px}.custom-row{display:flex;gap:6px}.custom-row input{flex:1;border:1px solid var(--line);border-radius:7px;padding:8px}.custom-row button{border:0;border-radius:7px;background:var(--coral);color:#fff;padding:8px 10px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-actions.split{justify-content:space-between;align-items:center}.modal-actions.split>div{display:flex;gap:8px}.primary,.secondary,.danger-outline{border-radius:7px;padding:9px 12px;font-size:12px}.primary{border:0;background:linear-gradient(#ff6a38,#f04b20);color:#fff}.secondary{border:1px solid var(--line);background:#fffdf9}.danger-outline{border:1px solid var(--coral);background:transparent;color:var(--coral)}
/* Login kept clean and private */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;z-index:5}.login-card{width:min(430px,100%);background:rgba(255,250,239,.97);border:1px solid rgba(28,58,82,.12);border-radius:24px;padding:28px;box-shadow:0 24px 70px rgba(41,51,61,.16);text-align:center}.login-koi{width:140px;max-height:90px;object-fit:contain}.brand-script{font-size:38px;font-style:italic}.brand-sub{color:var(--coral);letter-spacing:6px}.login-card h1{margin:16px 0 8px}.login-card p{color:#5e6c77;line-height:1.45}.login-form{display:grid;gap:13px;text-align:left}.login-form label{font-weight:700;display:grid;gap:6px}.login-form input{border:1px solid #d9d5ca;border-radius:12px;padding:12px;background:#fff}.login-submit{width:100%}.login-form small{min-height:1.2em;color:#b3432d;text-align:center}.status-grid{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:16px 0}.status-grid strong{text-align:right}.settings-note{font-size:12px;line-height:1.5}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:#17364f;color:#fff;padding:11px 15px;border-radius:12px;box-shadow:0 12px 35px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:.2s;z-index:1000}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.warn{background:#8b6421}.toast.error{background:#9d3b30}
@media(max-width:1020px){.app{width:min(980px,calc(100vw - 18px))}.header{grid-template-columns:220px 1fr auto}.brand-reference{width:210px}.workspace{grid-template-columns:1fr 260px}.legend-section{grid-template-columns:110px 1fr 80px}.activity-tile img{width:46px;height:43px}.sakura-corner{width:210px}}
@media(max-width:820px){.header{display:flex;flex-wrap:wrap}.brand{flex:1}.month-title-wrap{order:3;width:100%}.header-actions{padding-top:14px}.workspace{grid-template-columns:1fr}.right-rail{grid-template-columns:1fr 1fr}.calendar-card{order:1}.sakura-corner{opacity:.35}.jump-label{margin-left:auto}.functional-day-panel{display:none!important}}
@media(max-width:620px){.app{width:calc(100vw - 12px)}.brand-reference{width:190px}.month-title-wrap h1{font-size:28px}.month-title-wrap h1 span{font-size:25px}.view-toggle,.sync-wrap{display:none}.sakura-corner{display:none}.nav-row{flex-wrap:wrap;height:auto}.jump-label{width:100%}.jump-label input{flex:1}.day-cell{min-height:78px;padding:5px}.weekdays div{font-size:10px}.activity-legend{display:flex;overflow-x:auto}.activity-tile{min-width:92px}.legend-section{grid-template-columns:1fr}.legend-title br{display:none}.archive-tile{min-height:70px}.right-rail{grid-template-columns:1fr}.icon-choices{grid-template-columns:repeat(3,1fr)}.custom-icon-box{grid-template-columns:1fr}.custom-row{flex-direction:column}.modal-actions.split{flex-direction:column;align-items:stretch}}

/* 2026-09-02 — Ajuste visual contra la captura de referencia */
@media(min-width:1021px){
  .header{grid-template-columns:315px 1fr auto;min-height:108px}
  .brand-reference{width:305px}
  .sakura-corner{width:345px;max-width:27vw;right:-18px;top:-6px}
  .month-title-wrap .flower-line{font-size:22px;line-height:1;margin-top:8px;transform:scale(1.18)}
  .legend-section{grid-template-columns:125px 1fr 92px;padding:11px 10px}
  .activity-tile,.archive-tile{min-height:112px}
  .activity-tile img{width:72px;height:65px}
  .activity-tile .label{font-size:11.5px}
}
@media(min-width:821px) and (max-width:1020px){
  .brand-reference{width:245px}
  .sakura-corner{width:275px;max-width:28vw}
  .month-title-wrap .flower-line{font-size:19px;transform:scale(1.12)}
  .activity-tile img{width:60px;height:56px}
  .activity-tile,.archive-tile{min-height:104px}
}


/* 2026-09-02 — Match visual más fiel a la captura oficial */
@media(min-width:1021px){
  .app{width:min(1080px,calc(100vw - 18px))}
  .header{
    grid-template-columns:280px 1fr auto;
    min-height:88px;
    gap:10px;
    padding-top:0;
  }
  .brand-reference{
    width:275px;
    mix-blend-mode:normal;
  }
  .month-title-wrap{
    padding-top:11px;
  }
  .month-title-wrap h1{
    font-size:31px;
  }
  .month-title-wrap h1 span{
    font-size:29px;
  }
  .month-flower-art{
    display:block;
    width:118px;
    height:38px;
    object-fit:contain;
    margin:2px auto 0;
  }
  .header-actions{
    padding-top:34px;
    gap:8px;
  }
  .sync-wrap{
    display:none;
  }
  .view-toggle button{
    padding:9px 13px;
    font-size:13px;
  }
  .orange-square,.icon-square{
    width:39px;
    height:38px;
    border-radius:7px;
  }
  .orange-square{font-size:22px}
  .icon-square{font-size:17px}
  .sakura-corner{
    content:url("assets/sakura-reference.png");
    width:205px;
    max-width:none;
    right:0;
    top:0;
    opacity:1;
    mix-blend-mode:normal;
  }
  .nav-row{
    margin-top:0;
  }
  .activity-tile img{
    width:74px;
    height:68px;
  }
}
@media(min-width:821px) and (max-width:1020px){
  .month-flower-art{
    display:block;
    width:105px;
    height:34px;
    object-fit:contain;
    margin:2px auto 0;
  }
  .sync-wrap{display:none}
  .sakura-corner{
    content:url("assets/sakura-reference.png");
    width:185px;
    max-width:none;
    right:0;
    top:0;
    opacity:1;
  }
}


/* 2026-09-02 — limpieza visual V5 */
.sakura-corner{pointer-events:none}
.brand-reference{
  background:transparent !important;
  box-shadow:none !important;
}
.plus-menu-wrap{
  position:relative;
  display:inline-grid;
  place-items:center;
}
.plus-menu{
  position:absolute !important;
  top:48px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:170px !important;
  z-index:100 !important;
}
@media(min-width:1021px){
  .plus-menu{top:46px !important}
}