:root{--bg:#0b1220;--card:#111b2e;--text:#e8eefc;--muted:#9fb0d0;--border:#243454;--btn:#3a7afe;--btn2:#22314e}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(11,18,32,.9);backdrop-filter:saturate(140%) blur(8px)}
.topbar{gap:10px;position:sticky}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-right{display:flex;align-items:center;gap:10px}
.brand{font-weight:700}
.container{max-width:920px;margin:0 auto;padding:14px}
.screen h1,.screen h2,.screen h3{margin:10px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;margin:10px 0}
label{display:flex;flex-direction:column;gap:6px;margin:8px 0}
input{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0e1730;color:var(--text)}
select{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0e1730;color:var(--text)}
textarea{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0e1730;color:var(--text);resize:vertical;min-height:120px}
hr{border:0;border-top:1px solid var(--border);margin:12px 0}
.btn{border:0;border-radius:12px;padding:10px 12px;background:var(--btn);color:white;font-weight:700}
.btn-secondary{background:var(--btn2)}
.btn:disabled{opacity:.6}
.btn, .cal-cell, button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:active, .cal-cell:active{transform:scale(.98);filter:brightness(1.08)}
.btn:focus-visible, .cal-cell:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
.muted{color:var(--muted);font-size:.92rem}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:12px;background:#0e1730}
.item .title{font-weight:700}
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:760px){.grid{grid-template-columns:1fr 1fr}}

/* Top nav (hamburger) */
.hamburger{padding:10px 12px;line-height:1}
.nav{display:none;position:absolute;left:14px;right:14px;top:calc(100% + 8px);z-index:2000;
	background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:10px}
.nav.is-open{display:flex;flex-direction:column;gap:8px}
.nav-meta{padding:4px 6px}
.nav .btn{width:100%;text-align:left}

/* Tools */
.result{padding:10px;border:1px solid var(--border);border-radius:12px;background:#0e1730}
.result .title{font-weight:700}

.link{color:var(--text);text-decoration:none}
.link:hover{text-decoration:underline}

/* Accordion (Pareja) */
.acc{padding:0}
.acc > summary{list-style:none;cursor:pointer;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary::after{content:"▾";color:var(--muted);font-weight:700}
.acc[open] > summary::after{content:"▴"}
.acc[open] > summary{border-bottom:1px solid var(--border)}
.acc .acc-body{padding:12px}

/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:10px}
.cal-dow{color:var(--muted);font-weight:700;text-align:center;padding:6px 0}
.cal-cell{background:#0e1730;border:1px solid var(--border);border-radius:12px;padding:10px 0;position:relative;color:var(--text)}
.cal-cell.out{opacity:.45}
.cal-cell.sel{outline:2px solid var(--btn)}
.cal-num{display:block;text-align:center;font-weight:700}
.cal-cell.dot::after{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:6px;height:6px;border-radius:99px;background:var(--btn)}
.cal-cell.period{border-color:#7f2b2b}
.cal-cell.period:not(.dot)::after{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:6px;height:6px;border-radius:99px;background:#7f2b2b}
.cal-cell.period-est{border-color:#7f2b2b;border-style:dashed}
.cal-cell.period-est::after{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:6px;height:6px;border-radius:99px;background:#7f2b2b}

.cal-cell.fertile{border-color:var(--btn)}
.cal-cell.fertile:not(.period):not(.period-est)::after{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:6px;height:6px;border-radius:99px;background:var(--btn)}

.cal-cell.ovulation{outline:2px solid var(--btn)}
.cal-cell.ovulation:not(.period):not(.period-est)::before{content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:6px;height:6px;border-radius:99px;background:var(--btn)}

.cal-cell.peak{outline:2px dashed var(--btn)}

.cal-cell.sex{box-shadow:inset 0 0 0 2px #2b7f2b}

/* Toast */
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(10px);opacity:0;transition:.2s ease;z-index:9999;
	background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 12px;max-width:92vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-ok{border-color:#2b4b7f}
.toast-err{border-color:#7f2b2b}

.confirmbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;
	background:#0e1730;border:1px solid var(--border);border-radius:12px;padding:10px}