:root{--planner-primary:#ed87b6;--planner-accent:#d970a3;--planner-ink:#b95987;--planner-border:#edb4cf;--planner-soft:#fce7f1;--planner-active:#d86298;--writing-font:system-ui,sans-serif}
/* Hide scrollbars without disabling touch, wheel, or keyboard scrolling. */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
.home-page .masthead{position:relative;justify-content:center;height:108px;padding:12px}
.home-page .masthead .logo{width:116px}
.home-page .header-actions{position:absolute;right:14px;top:25px}
.home-page #saved,.home-page #install{display:none}
.home-page main{background:transparent;box-shadow:none;border:0;border-radius:0}
.home-banner{justify-content:center;padding:18px 12px;min-height:62px}
.home-banner h1{font:24px system-ui;font-weight:500;text-align:center}
.home-content{padding:32px 24px}
.home-modules{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;min-height:650px;align-items:center;justify-items:center}
.home-modules .module{border:0;background:transparent;padding:0;min-height:0;width:100%;height:auto;display:grid;place-items:center}
.home-modules .module:hover{background:transparent;transform:scale(1.04)}
.home-modules .module img{width:clamp(90px,14vw,145px);height:auto;max-width:100%;border-radius:50%;display:block}
.home-banner h1.panel-original-title{width:90px;height:30px;background:currentColor;mask:url('assets/titles/panel.svg') center/contain no-repeat;-webkit-mask:url('assets/titles/panel.svg') center/contain no-repeat}
.panel-original-title>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.home-icon{position:relative;display:block;width:clamp(90px,14vw,145px);aspect-ratio:1;border:4px solid var(--planner-primary);border-radius:50%;background:#fff;overflow:hidden}
.home-modules .home-icon img{position:absolute;width:100%;height:100%;max-width:none;inset:0;clip-path:inset(16% 24% 50% 24%);border-radius:0}
.home-icon-label{position:absolute;bottom:13%;left:8%;right:8%;color:var(--planner-ink);font:500 clamp(8px,1vw,12px)/1.15 system-ui,sans-serif!important;text-transform:uppercase;text-align:center;letter-spacing:0}
.home-symbol{position:absolute;top:9%;left:25%;width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;color:var(--planner-primary)}
.home-icon{width:clamp(105px,16vw,165px);border-width:5px}
.home-modules .home-icon img.original-home-symbol{inset:auto;top:10%;left:20%;width:60%;height:49%;clip-path:none;border-radius:0;object-fit:contain}
.home-modules .home-icon img.tracker-symbol{clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,0 88%,0 12%)}
.home-icon-label{bottom:9%;height:27%;display:flex;align-items:center;justify-content:center;font-size:clamp(10px,1.1vw,14px)!important;font-weight:650!important;line-height:1.1!important}
.home-modules .module .home-icon-label{transform:translateY(-5px)}
@media(max-width:700px){.home-icon{width:clamp(88px,25vw,135px);border-width:4px}.home-icon-label{font-size:clamp(9px,2.2vw,12px)!important}.home-modules .home-icon img.original-home-symbol{top:10%;left:20%;width:60%;height:49%}}
.extra-sections{border-top:1px solid var(--planner-border);margin-top:18px;padding-top:12px}
.extra-sections h3{font:18px Georgia;color:var(--planner-ink);margin:0 0 10px}
.extra-sections button{margin:0 8px 6px 0;font-size:13px}
@media(max-width:700px){.home-page .masthead{height:95px}.home-page .masthead .logo{width:105px}.home-page .header-actions{top:22px;right:12px}.home-banner{min-height:57px;padding:14px}.home-banner h1{font-size:22px}.home-content{padding:22px 10px}.home-modules{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:clamp(450px,69vh,640px)}.home-modules .module img{width:clamp(78px,22vw,120px)}}
.banner>div{min-width:0;flex:1}
.banner h1.original-title{width:min(100%,330px);height:55px;background:currentColor;mask:var(--title-art) left center/contain no-repeat;-webkit-mask:var(--title-art) left center/contain no-repeat}
.original-title>span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#settings-button{padding:8px;width:39px;height:39px;display:grid;place-items:center;color:var(--planner-ink)}
#settings-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
#tabs button[data-route="home"]{font-size:30px;line-height:1;padding:8px 4px;min-height:40px;font-weight:700}
#tabs{width:64px;flex:0 0 64px}
#tabs button[data-month]{display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;text-orientation:mixed;min-height:76px;height:76px;padding:10px 7px;font-size:17px;line-height:1;letter-spacing:1px}
@media(max-width:700px){#tabs{width:48px;flex-basis:48px}#tabs button[data-month]{min-height:68px;height:68px;font-size:16px;padding:9px 5px}}
@font-face{font-family:"Planner Caveat";src:url('assets/caveat.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap;size-adjust:125%}
main input[type="text"],main textarea,.field input,.field textarea,.appearance-preview{font-family:var(--writing-font)!important;font-weight:576!important;font-size:14px!important;line-height:1.3!important}
main input[type="text"]::placeholder,main textarea::placeholder{font-size:inherit!important;font-weight:inherit}
.appearance-preview{font-size:22px!important}
.appearance-preview{border:1px solid var(--planner-border);border-radius:10px;padding:18px;background:var(--planner-soft);color:var(--planner-ink);font-size:19px}
.appearance-note{font-size:12px;line-height:1.5;color:#896578}
.account-settings{border:1px solid var(--planner-border);border-radius:12px;background:var(--planner-soft);padding:14px;margin-bottom:20px}
.account-settings h3{margin:0 0 12px;color:var(--planner-ink);font:19px Georgia,serif}
.account-settings dl{margin:0}
.account-settings dl>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--planner-border);font-size:12px}
.account-settings dt{color:var(--planner-ink)}
.account-settings dd{margin:0;overflow-wrap:anywhere}
.account-settings p{font-size:11px;line-height:1.5;margin:12px 0 0;color:#896578}
body{background-color:var(--planner-soft)}
.banner,.primary,#tabs button,.finance-summary span,.meal-head,.fitness-table-head,.budget-head{background-color:var(--planner-primary)}
#tabs button.active,.cycle-day.selected{background-color:var(--planner-active)}
.annual-month>span{background-color:var(--planner-soft);color:var(--planner-ink)}
.finance-box>span{background-color:var(--planner-primary);color:#fff}
.vision-view .banner{background:transparent;color:var(--planner-accent)}
.cycle-month h2,.budget-week-title{background:var(--planner-soft);color:var(--planner-ink)}
.line-date,.cycle-day,.annual-month,.fitness-week,.meal-week,.budget-week{border-color:var(--planner-border)}
@media(max-width:700px){.banner h1.original-title{height:48px;width:min(100%,280px)}.header-actions{gap:8px}}
.masthead,.home-page .masthead{position:relative;display:flex;justify-content:center;align-items:center;height:110px;padding:10px 64px;overflow:visible}
.masthead .logo,.home-page .masthead .logo{display:block;width:130px;height:88px;object-fit:contain;flex:none}
.masthead .header-actions,.home-page .header-actions{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.masthead #saved{position:fixed;left:16px;top:20px;max-width:220px;font-size:11px}

/* Reserva el lateral: solo el contenido del planner se desplaza con la página. */
.book{padding-right:72px}
#tabs{position:fixed;z-index:5;top:110px;bottom:max(8px,env(safe-area-inset-bottom));right:max(env(safe-area-inset-right),calc((100vw - 1040px)/2));width:64px;gap:4px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}
#tabs button{flex-shrink:0}
#tabs button[data-route="home"]{height:44px;min-height:44px}
#tabs button[data-month]{height:clamp(44px,calc((100dvh - 218px - env(safe-area-inset-bottom))/12),76px);min-height:44px;padding:4px;font-size:15px;letter-spacing:0}
@media(max-width:700px){.book{padding-right:52px}#tabs{top:102px;right:max(8px,env(safe-area-inset-right));width:48px}#tabs button[data-month]{height:clamp(44px,calc((100dvh - 210px - env(safe-area-inset-bottom))/12),68px);font-size:14px}}
@media(max-height:450px){#tabs{top:max(8px,env(safe-area-inset-top))}}
@media(max-width:700px){.masthead,.home-page .masthead{height:102px;padding:8px 55px}.masthead .logo,.home-page .masthead .logo{width:125px;height:84px}.masthead .header-actions,.home-page .header-actions{right:12px;top:50%}}

/* Encabezado y título inmóviles; el área central tiene su propio scroll. */
html,body{height:100%;overflow:hidden}
.date-page-arrow,[data-budget-page]{-webkit-tap-highlight-color:transparent}
.masthead,.home-page .masthead{z-index:6;background:transparent}
.book{height:calc(100dvh - 110px);min-height:0;padding-bottom:max(8px,env(safe-area-inset-bottom))}
#app{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;scroll-padding-top:130px}
#app>.banner{position:sticky;top:0;z-index:4;flex-shrink:0}
#app>.banner{padding:8px 12px;height:57px;min-height:57px;flex-wrap:nowrap;background-color:var(--planner-primary);color:#fff;gap:8px}
#app>.banner>div{min-width:0}
#app>.banner p{display:none}
#app>.banner h1{margin:0;font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app>.banner h1.original-title{height:34px;width:min(100%,330px)}
#app>.banner select{flex:none;padding:6px 8px;font-size:13px;max-width:80px}
#app{scroll-padding-top:65px}
@media(max-width:700px){#app>.banner{padding:7px 10px}#app>.banner h1.original-title{height:32px}}
.vision-view #app>.banner{background-color:var(--planner-primary);color:#fff}
body>footer{display:none}
@media(max-width:700px){.book{height:calc(100dvh - 102px);min-height:0}}
@media(max-height:450px){.masthead,.home-page .masthead{height:64px;padding:4px 55px}.masthead .logo,.home-page .masthead .logo{height:56px;width:90px}.book{height:calc(100dvh - 64px)}#tabs{top:64px}}