:root{
  --bg-top:#dfe6f3;
  --bg-bottom:#cfd9ec;
  --card:#ffffff;
  --text:#2d3a53;
  --text-muted:#8791a6;
  --green:#3fcf8e;
  --green-dark:#30b87c;
  --purple:#a68ee6;
  --coral:#ef8c78;
  --pink-bg:#fbe6e3;
  --track:#e7ecf5;
  --border:#e7ecf6;
  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:14px;
  --shadow:0 10px 30px -12px rgba(45,58,83,.15);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:'Nunito', system-ui, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom) 60%);
  min-height:100vh;
  overscroll-behavior-y:contain;
}
h1,h2,h3,.day-date,.page-title{font-family:'Baloo 2', 'Nunito', sans-serif;}

#app{
  max-width:480px;
  margin:0 auto;
  padding:20px 18px 110px;
  min-height:100vh;
}

.view{display:none;}
.view.active{display:block; animation:fadeIn .18s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---------- header día ---------- */
.day-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.day-title{text-align:center; flex:1;}
.day-name{
  display:block; font-size:13px; font-weight:800; letter-spacing:1.5px;
  color:var(--text-muted);
}
.day-date{
  margin:2px 0 0; font-size:30px; font-weight:800; color:var(--text);
}
.icon-btn{
  width:44px; height:44px; border-radius:14px; border:none;
  background:#eef2fa; color:var(--text); font-size:20px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
}
.icon-btn:active{transform:scale(.93);}
.icon-btn:disabled{opacity:.35; cursor:not-allowed;}
.icon-btn:disabled:active{transform:none;}

.day-actions{display:flex; justify-content:flex-end; margin-bottom:16px;}
.day-actions .spacer{flex:1;}
.icon-btn--subtle{
  width:36px; height:36px; background:transparent; font-size:16px; color:var(--text-muted);
}
.icon-btn--subtle.icon-btn--active{background:#eafaf2; color:var(--green-dark);}

/* ---------- botones ---------- */
.pill-btn{
  border:none; border-radius:999px; padding:13px 20px;
  font-weight:800; font-size:15px; font-family:inherit;
  background:var(--green); color:#fff; cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(63,207,142,.6);
}
.pill-btn:active{transform:scale(.97);}
.pill-btn--ghost{background:#eef2fa; color:var(--text); box-shadow:none;}
.pill-btn--danger{background:var(--pink-bg); color:#d9634f; box-shadow:none;}
.pill-btn--full{width:100%; margin-top:14px;}

/* ---------- tabs ---------- */
.tabs{
  display:flex; background:#e4e9f4; border-radius:999px; padding:5px;
  margin-bottom:14px; gap:4px;
}
.tab{
  flex:1; border:none; background:transparent; padding:11px 8px;
  border-radius:999px; font-weight:800; font-size:14.5px;
  color:var(--text-muted); cursor:pointer; font-family:inherit;
}
.tab.active{background:var(--purple); color:#fff;}
.tabs--period .tab.active{background:var(--green); color:#fff;}

/* ---------- cards ---------- */
.card{
  background:var(--card); border-radius:var(--radius-lg);
  padding:20px; box-shadow:var(--shadow); margin-bottom:16px;
}

/* ---------- progreso (anillo) ---------- */
.progress-card{display:flex; align-items:center; gap:18px;}
.progress-ring{position:relative; width:88px; height:88px; flex-shrink:0;}
.progress-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.ring-bg{fill:none; stroke:var(--track); stroke-width:11;}
.ring-fg{
  fill:none; stroke:var(--green); stroke-width:11; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset .4s ease;
}
.progress-pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:19px; color:var(--text);
}
.progress-info{display:flex; flex-direction:column; gap:4px;}
.progress-label{color:var(--text-muted); font-weight:700; font-size:14px;}
.progress-count{font-weight:800; font-size:19px;}

.section-title{font-size:19px; font-weight:800; margin:22px 0 12px;}

/* ---------- lista de hábitos ---------- */
.habit-list{display:flex; flex-direction:column; gap:12px;}
.habit-item{
  background:var(--card); border-radius:var(--radius-md);
  padding:16px; box-shadow:var(--shadow);
  display:flex; align-items:flex-start; gap:14px;
  border:1.5px solid transparent;
}
.habit-item--warm{
  background:#f3fbf6; border-color:#bfead2;
}
.habit-item--hot{
  background:linear-gradient(135deg,#fffaf0,#fff3d6);
  border-color:#eec86a;
  box-shadow:0 10px 26px -14px rgba(230,178,60,.55);
}
.habit-check{
  width:36px; height:36px; border-radius:12px; flex-shrink:0;
  border:2.5px solid var(--track); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; color:#fff; margin-top:2px;
}
.habit-check.checked{background:var(--green); border-color:var(--green);}
.habit-main{flex:1; min-width:0;}
.habit-name-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.habit-name{font-weight:800; font-size:16.5px; cursor:pointer;}
.habit-name.done{color:var(--text-muted); text-decoration:line-through;}
.habit-streak{
  background:#eafaf2; color:var(--green-dark); font-weight:800; font-size:13px;
  padding:4px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0;
}
.habit-streak--hot{
  background:#f7dfa0; color:#8a6417;
}
.habit-detail{color:var(--text-muted); font-size:13.5px; margin:2px 0 10px;}
.mini-week{display:flex; justify-content:space-between; gap:4px;}
.mini-day{display:flex; flex-direction:column; align-items:center; gap:4px; flex:1;}
.mini-dot{
  width:22px; height:22px; border-radius:8px; background:var(--track);
  display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff;
}
.mini-dot.done{background:var(--green);}
.mini-dot.today{outline:2px solid var(--purple); outline-offset:1px;}
.mini-label{font-size:10.5px; color:var(--text-muted); font-weight:700;}
.habit-edit-btn{
  background:none; border:none; font-size:16px; color:var(--text-muted);
  cursor:pointer; padding:4px;
}

.fab{
  position:fixed; right:20px; bottom:96px; z-index:20;
  width:58px; height:58px; border-radius:50%; border:none;
  background:var(--green); color:#fff; font-size:30px; font-weight:700;
  box-shadow:0 12px 24px -8px rgba(63,207,142,.7); cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:0;
}
.fab:active{transform:scale(.94);}

/* ---------- mood card: 5 botones por categoría ---------- */
.mood-row{margin-bottom:20px;}
.mood-row label{
  display:block; font-weight:700; font-size:15px; margin-bottom:10px;
}
.mood-btns{display:flex; gap:6px;}
.mood-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 2px 8px; border-radius:14px; border:1.5px solid var(--border);
  background:#f7f9fd; cursor:pointer; font-family:inherit;
}
.mood-btn:active{transform:scale(.95);}
.mood-btn-icon{font-size:22px; line-height:1;}
.mood-btn-label{font-size:10.5px; font-weight:700; color:var(--text-muted); line-height:1.2; text-align:center;}

/* gradiente coral -> verde, 5 pasos, acorde a la paleta de la app */
.mood-btn[data-value="2"]{ border-color:#f3c3b8; }
.mood-btn[data-value="2"].selected{ background:var(--coral); border-color:var(--coral); }
.mood-btn[data-value="4"]{ border-color:#f4dcb0; }
.mood-btn[data-value="4"].selected{ background:#eab35e; border-color:#eab35e; }
.mood-btn[data-value="6"]{ border-color:#d7dbea; }
.mood-btn[data-value="6"].selected{ background:#b7bfd6; border-color:#b7bfd6; }
.mood-btn[data-value="8"]{ border-color:#bfe8d3; }
.mood-btn[data-value="8"].selected{ background:#8fdfb0; border-color:#8fdfb0; }
.mood-btn[data-value="10"]{ border-color:#a9e6c8; }
.mood-btn[data-value="10"].selected{ background:var(--green); border-color:var(--green); }
.mood-btn.selected .mood-btn-label{ color:#fff; }
.mood-btn.selected{ box-shadow:0 6px 14px -6px rgba(45,58,83,.35); }

.comment-label{display:block; font-weight:700; font-size:15px; margin-bottom:8px;}
textarea, .text-input{
  width:100%; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:14px; font-family:inherit; font-size:15px; background:#f7f9fd; color:var(--text);
  resize:vertical;
}
textarea:focus, .text-input:focus{outline:2px solid var(--green); border-color:transparent;}

/* ---------- stats ---------- */
.page-title{font-size:32px; font-weight:800; margin:4px 0 2px;}
.page-subtitle{color:var(--text-muted); font-weight:700; margin:0 0 18px;}
.range-nav{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:800; font-size:18px; margin-bottom:16px;
}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
.stat-card{padding:18px; display:flex; flex-direction:column; gap:6px; margin-bottom:0;}
.stat-label{font-size:12.5px; font-weight:800; color:var(--text-muted); letter-spacing:.5px;}
.stat-value{font-size:34px; font-weight:800;}
.stat-value--green{color:var(--green-dark);}
.stat-value--purple{color:var(--purple);}
.stat-value--sm{font-size:19px; font-weight:800;}
.stat-sub{color:var(--text-muted); font-weight:700; font-size:13px;}
.stat-emoji{font-size:26px;}

.improve-card{
  background:var(--pink-bg); display:flex; align-items:center; gap:14px;
}
.improve-text{flex:1; display:flex; flex-direction:column;}
.improve-label{font-size:12px; font-weight:800; color:#c9705d; letter-spacing:.5px;}
.improve-name{font-weight:800; font-size:17px; color:#c9503b;}
.badge-coral{
  background:#fff; color:var(--coral); font-weight:800; font-size:12.5px;
  padding:7px 12px; border-radius:999px; white-space:nowrap;
}

.daily-bars{display:flex; align-items:flex-end; gap:8px; height:120px; padding-top:10px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px;}
.bar{width:100%; max-width:26px; background:var(--track); border-radius:8px 8px 4px 4px; transition:height .3s ease;}
.bar.filled{background:var(--green);}
.bar-label{font-size:11px; color:var(--text-muted); font-weight:700;}

/* ---------- settings ---------- */
.settings-row{display:flex; gap:14px; margin-bottom:16px;}
.icon-badge{
  width:44px; height:44px; border-radius:14px; background:#eafaf2;
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
}
.muted-text{color:var(--text-muted); font-size:13.5px; line-height:1.5; margin:6px 0 0;}
.field-label{display:block; font-weight:800; font-size:14.5px; margin:16px 0 8px;}
.hour-picker{
  display:flex; align-items:center; justify-content:space-between;
  background:#f2f5fb; border-radius:var(--radius-sm); padding:8px 8px;
}
.hour-picker span{font-weight:800; font-size:19px;}
.settings-actions{display:flex; gap:10px; margin-top:18px;}
.settings-actions .pill-btn{flex:1;}
.export-links{display:flex; gap:10px; margin-top:14px;}
.link-btn{
  flex:1; text-align:center; padding:11px; border-radius:999px; background:#eef2fa;
  color:var(--text); font-weight:800; font-size:13.5px; text-decoration:none;
}

/* ---------- bottom nav ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:#fff; border-top:1px solid var(--border);
  display:flex; justify-content:space-around; padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  max-width:480px; margin:0 auto;
}
.nav-btn{
  background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:12px; font-weight:800; color:var(--text-muted); cursor:pointer; padding:6px 14px; border-radius:14px;
}
.nav-btn.active{color:var(--green-dark); background:#eafaf2;}
.nav-icon{font-size:20px;}

/* ---------- modal / sheet ---------- */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(30,38,58,.45); z-index:100;
  display:none; align-items:flex-end; justify-content:center;
}
.sheet-backdrop.open{display:flex;}
.sheet{
  background:#fff; width:100%; max-width:480px; border-radius:28px 28px 0 0;
  padding:14px 22px calc(24px + env(safe-area-inset-bottom));
  animation:slideUp .22s ease;
}
@keyframes slideUp{from{transform:translateY(100%);} to{transform:translateY(0);}}
.sheet-handle{width:44px; height:5px; background:#e2e6f0; border-radius:99px; margin:0 auto 14px;}
.sheet-title{text-align:center; font-size:24px; font-weight:800; margin:0 0 18px;}
.reorder-row{display:flex; gap:10px; justify-content:center; margin-bottom:18px;}
.reorder-row .pill-btn{padding:10px 18px; font-size:14px;}
.emoji-picker{
  width:76px; height:76px; margin:0 auto 18px; border-radius:22px;
  border:2px dashed var(--green); background:#eafaf2;
  display:flex; align-items:center; justify-content:center; font-size:34px; cursor:pointer;
}
.sheet .text-input{margin-bottom:12px;}
.sheet-actions{display:flex; gap:10px; margin-top:6px;}
.sheet-actions .pill-btn{flex:1;}
.delete-link{
  display:block; width:100%; text-align:center; background:none; border:none;
  color:var(--coral); font-weight:800; font-size:14px; margin-top:16px; padding:8px; cursor:pointer;
}

/* ---------- login / registro ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 18px;
}
.auth-card{
  width:100%; max-width:400px; text-align:center; padding:32px 26px;
}
.auth-logo{font-size:44px; margin-bottom:6px;}
.auth-title{font-size:26px; font-weight:800; margin:0 0 20px;}
.auth-form{display:flex; flex-direction:column; gap:12px; text-align:left;}
.remember-row{
  display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--text-muted);
  margin:2px 0 4px;
}
.remember-row input{width:18px; height:18px; accent-color:var(--green);}
.auth-error{
  color:#d9634f; font-weight:700; font-size:13.5px; margin:14px 0 0; min-height:18px;
}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:100px; transform:translate(-50%, 20px);
  background:var(--text); color:#fff; padding:12px 20px; border-radius:999px;
  font-weight:700; font-size:14px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:200;
}
.toast.show{opacity:1; transform:translate(-50%, 0);}

@media (max-width:360px){
  .stat-grid{gap:10px;}
  .day-date{font-size:26px;}
}