:root{
  --bg:#f7f7f8; --card:#ffffff; --text:#111214; --muted:#6b7280;
  --line:#e7e7ea; --accent:#111214; --accent-2:#4f46e5;
  --bar-bg:#e9e9ee; --bar:#111214; --bar-alt:#4f46e5;
  --ring-bg:#e9e9ee; --ring:#111214;
  --radius:20px; --shadow:0 12px 32px rgba(0,0,0,.08);
}
[data-theme="dark"]{
  --bg:#0b0c0f; --card:#14161b; --text:#f5f5f6; --muted:#9aa0ad;
  --line:#23262e; --accent:#f5f5f6; --accent-2:#a5b4fc;
  --bar-bg:#23262e; --bar:#f5f5f6; --bar-alt:#818cf8;
  --ring-bg:#23262e; --ring:#f5f5f6;
  --shadow:0 12px 32px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  background:var(--bg); color:var(--text);
  transition:background .3s,color .3s;
  display:flex; justify-content:center; padding:32px 16px;
}
.app{width:100%; max-width:640px; display:flex; flex-direction:column; gap:18px}
.topbar{display:flex; justify-content:space-between; align-items:center}
.brand{display:flex; align-items:center; gap:10px}
.brand h1{font-size:22px; margin:0}
.brand p{margin:0; color:var(--muted); font-size:13px}
.dot{width:12px; height:12px; border-radius:50%; background:var(--accent-2)}
/* Agenda foco — titular con destello periódico (shimmer) */
.brand h1.agenda-foco{
  position:relative;
  display:inline-block;
  overflow:hidden;
  background:linear-gradient(100deg, var(--text) 30%, #fff 48%, #fff 52%, var(--text) 70%);
  background-size:220% 100%;
  background-position:130% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:agenda-shine 3.8s ease-in-out infinite;
}
[data-theme="dark"] .brand h1.agenda-foco{
  background:linear-gradient(100deg, #cbd5e1 30%, #fff 48%, #fff 52%, #cbd5e1 70%);
  background-size:220% 100%;
  background-position:130% 0;
  -webkit-background-clip:text;
  background-clip:text;
}
@keyframes agenda-shine{
  0%, 70%{ background-position:130% 0; }
  90%, 100%{ background-position:-30% 0; }
}
@media (prefers-reduced-motion:reduce){
  .brand h1.agenda-foco{ animation:none; background-position:0 0; }
}
.theme-btn{
  border:1px solid var(--line); background:var(--card); color:var(--text);
  border-radius:999px; padding:9px 14px; cursor:pointer; display:flex; gap:8px; align-items:center;
}
/* El botón de tema se pinta solo con CSS según data-theme: cero parpadeo al navegar */
html[data-theme="light"] .th-d{display:none}
html[data-theme="dark"] .th-l{display:none}
.modes{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.lvl-chip{
  border:1px solid var(--line); background:var(--text); color:var(--bg);
  border-radius:999px; padding:9px 14px; cursor:pointer; font-weight:700;
}
.toast{
  position:fixed; bottom:26px; left:50%; z-index:9999;
  transform:translateX(-50%) translateY(16px); opacity:0; transition:all .3s;
  background:var(--text); color:var(--bg); font-weight:700;
  padding:12px 22px; border-radius:999px; box-shadow:var(--shadow);
  pointer-events:none; white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}
.mode{
  border:1px solid var(--line); background:var(--card); color:var(--muted);
  padding:12px; border-radius:14px; cursor:pointer; font-weight:600;
}
.mode.active{background:var(--text); color:var(--bg); border-color:var(--text)}
.timer-card, .card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
}
.ring-wrap{position:relative; width:260px; margin:6px auto 18px}
.ring{width:100%; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:var(--ring-bg); stroke-width:14}
.ring-fg{
  fill:none; stroke:var(--ring); stroke-width:14; stroke-linecap:round;
  stroke-dasharray:553.2; stroke-dashoffset:0; transition:stroke-dashoffset .4s linear;
}
.time-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px}
#time{font-size:52px; font-weight:800; letter-spacing:-1px; font-variant-numeric:tabular-nums}
.phase{color:var(--muted); font-size:14px}
.cycle{font-size:12px; background:var(--bar-bg); padding:4px 10px; border-radius:999px}
.progress-block{margin:14px 0}
.progress-head{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:8px}
.bar{height:12px; background:var(--bar-bg); border-radius:999px; overflow:hidden}
.bar.slim{height:9px}
.fill{height:100%; width:0%; background:var(--bar); border-radius:999px; transition:width .4s;
  transform-origin:left; animation:growX .45s ease both}
.fill.alt{background:var(--bar-alt)}
.dots{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.dot-item{width:26px; height:8px; border-radius:999px; background:var(--bar-bg)}
.dot-item.done{background:var(--bar-alt)}
.controls{display:flex; gap:10px; margin-top:18px}
.primary{
  flex:1; background:var(--text); color:var(--bg); border:0;
  padding:14px; border-radius:14px; font-size:16px; font-weight:700; cursor:pointer;
}
.ghost{
  background:transparent; color:var(--text); border:1px solid var(--line);
  padding:14px 16px; border-radius:14px; cursor:pointer;
}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card h2{margin:0 0 12px; font-size:16px}
.card label{display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted); margin:8px 0; gap:10px}
.card input{
  width:80px; padding:8px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); text-align:center;
  appearance:textfield; -moz-appearance:textfield;
}
/* Quitar flechas arriba/abajo - solo teclado */
.card input::-webkit-outer-spin-button,
.card input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.card input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.small{margin-top:10px; width:100%; padding:10px; border-radius:12px; border:0; background:var(--text); color:var(--bg); cursor:pointer; font-weight:600}
.small.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.stats{display:flex; gap:14px; text-align:center; margin:8px 0}
.stats div{flex:1; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:12px 6px}
.stats b{display:block; font-size:20px}
.stats span{font-size:12px; color:var(--muted)}
.hint{font-size:12px; color:var(--muted)}
footer{font-size:12px; color:var(--muted); text-align:center}
code{background:var(--bar-bg); padding:2px 6px; border-radius:6px}
/* Modal mismo tema que la web */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:50; opacity:1; transition:opacity .25s;
}
.modal-overlay.hidden{opacity:0; pointer-events:none; visibility:hidden}
.modal{
  background:var(--card); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px; width:100%; max-width:400px;
  text-align:center; transform:scale(1); transition:transform .25s;
  display:flex; flex-direction:column; gap:10px; position:relative;
  max-height:85vh; overflow-y:auto;
}
.modal-x{
  position:absolute; top:10px; right:12px; background:transparent; border:0;
  color:var(--muted); font-size:24px; line-height:1; cursor:pointer; padding:4px 8px;
}
.modal-x:hover{color:var(--text)}
.modal-agenda{text-align:left}
.modal-agenda.hidden{display:none}
.modal-overlay.hidden .modal{transform:scale(.92)}
.modal-emoji{font-size:42px}
.modal h3{margin:4px 0; font-size:20px}
.modal p{margin:0 0 8px; color:var(--muted); font-size:14px}
.modal .primary{width:100%}
.modal-form input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); font-size:15px; text-align:center;
}
.modal-form.hidden{display:none}
.modal-actions{display:flex; gap:10px; margin-top:6px}
.modal-actions .ghost{flex:1; padding:12px; border-radius:14px}
/* Navegación secundaria */
.pagenav{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pagenav.three{grid-template-columns:1fr 1fr 1fr}
.pagenav a{
  text-align:center; text-decoration:none; font-weight:700; font-size:14px;
  border:1px solid var(--line); background:var(--card); color:var(--muted);
  padding:11px; border-radius:14px;
}
.pagenav a.active{background:var(--text); color:var(--bg); border-color:var(--text)}
/* Histórico: gráficas */
.row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:12px}
.range{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.card .range{margin:0; justify-content:flex-start; gap:6px}
.range select{
  padding:8px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--text);
}
.chart{display:flex; gap:6px; align-items:end; overflow-x:auto; padding:10px 2px; min-height:170px}
.chart .col{flex:1; min-width:44px; text-align:center; display:flex; flex-direction:column; gap:4px; align-items:center}
.bar-v{height:120px; width:100%; background:var(--bar-bg); border-radius:10px; display:flex; align-items:end; overflow:hidden}
.fill-v{width:100%; background:var(--bar); border-radius:10px; min-height:4px;
  transform-origin:bottom; animation:growY .45s ease both}
/* Las barras crecen al pintarse (CSS-only, sin JS). Se re-anima al cambiar
   de rango, que queda bien. Sin movimiento si el SO lo pide. */
@keyframes growY{from{transform:scaleY(0)}}
@keyframes growX{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.fill-v,.fill{animation:none}}
.fill-v.goal{background:var(--bar-alt)}
.fill-v.alt{background:var(--bar-alt); opacity:.75}
.chart.alt .fill-v{background:var(--bar-alt)}
.col.today .day{font-weight:800; color:var(--text)}
.col .val{font-size:12px; font-weight:700}
.col .day{font-size:11px; color:var(--muted)}
/* Tabla */
.table-wrap{overflow-x:auto}
.htable{width:100%; border-collapse:collapse; font-size:13px}
.htable th{text-align:left; color:var(--muted); font-weight:600; padding:8px; border-bottom:1px solid var(--line)}
.htable td{padding:8px; border-bottom:1px solid var(--line)}
.htable small{color:var(--muted)}
footer a{color:inherit}
/* Agenda */
.agenda-add{display:flex; gap:8px; margin:6px 0 12px}
.agenda-add input{
  flex:1; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--text);
}
.agenda{display:flex; flex-direction:column; gap:8px}
.agenda-item{
  display:flex; gap:10px; align-items:center;
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px;
}
.agenda-time{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:40px}
.agenda-text{flex:1; font-size:14px}
.agenda-src{font-size:14px}
.agenda-item button{background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:18px}
/* Tareas: texto tachado al completar */
.task-text.done{text-decoration:line-through; opacity:.55}
/* Big 3: estrella + resaltado */
.big3-btn{opacity:.35}
.big3-btn.on{opacity:1; color:var(--bar-alt)}
.agenda-item.big3{border-color:var(--bar-alt)}
/* Review semanal + rueda de la vida */
.rev-nav{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.rev-nav b{flex:1; text-align:center; font-size:14px}
.rev-text{width:100%; min-height:110px; resize:vertical; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:14px}
.wheel{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:12px 0}
.wheel label{display:flex; align-items:center; gap:8px; font-size:13px; background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.wheel label span{flex:1}
.wheel input{width:52px; padding:6px; border-radius:8px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font:inherit; text-align:center}
.rev-saved{font-size:12px; color:var(--muted)}
.wheel label .wbase{color:var(--muted); font-size:11px}
.alt-strip{background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; margin-bottom:12px; font-size:13px; line-height:1.6}
.vs-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px}
.vs-col h4{margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.vs-row{background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; margin-bottom:8px; font-size:13px; display:flex;
  justify-content:space-between; align-items:center; gap:6px}
.vs-front{font-size:13px; line-height:1.6; border-top:1px solid var(--line);
  margin:4px 0 12px; padding-top:10px}
.info-btn{width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg); color:var(--muted); font-size:13px; font-style:italic; font-weight:700;
  cursor:pointer; line-height:1; padding:0; vertical-align:2px}
.info-btn:hover{color:var(--text); border-color:var(--text)}
/* Hábitos: matriz alineada */
.matrix-wrap{overflow-x:auto; margin:0 -4px; padding:0 4px}
.matrix{border-collapse:collapse; font-size:13px; width:100%}
.matrix th, .matrix td{padding:6px 2px; text-align:center; border-bottom:1px solid var(--line); vertical-align:middle}
.matrix th.day, .matrix td:not(.habit-col){width:40px}
.matrix th.day{font-size:11px; color:var(--muted); font-weight:600; width:40px}
.matrix th.day.today{color:var(--text); font-weight:800}
.matrix .habit-col{text-align:left; position:sticky; left:0; z-index:2; background:var(--card); padding-right:8px; box-shadow:8px 0 8px -8px rgba(0,0,0,.35); min-width:150px}
.matrix td.habit-col{padding-top:6px; padding-bottom:6px}
.habit-inner{display:flex; align-items:center; gap:6px; min-width:0}
.row-btn{background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:16px; line-height:1; padding:2px 4px; flex:none}
.row-btn:hover{color:var(--text)}
.habit-name{background:transparent; border:0; color:var(--text); cursor:pointer; font-size:13px; font-weight:600; padding:2px; text-align:left; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.habit-name:hover{text-decoration:underline}
.streak{font-size:11px; background:var(--bar-bg); border-radius:999px; padding:2px 8px; white-space:nowrap; flex:none}
.tick{width:30px; height:30px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:transparent; cursor:pointer; font-size:15px; line-height:1; padding:0; display:inline-block}
.tick.on{background:var(--bar-alt); border-color:var(--bar-alt); color:#fff}
.mood-btn{
  width:56px; height:56px; border-radius:16px;
  border:1.5px solid transparent; background:transparent;
  font-size:30px; cursor:pointer; line-height:1;
  display:grid; place-items:center;
  transition:transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
.mood-btn:hover{background:var(--bar-bg); border-color:var(--line); transform:translateY(-1px)}
.mood-btn.on{background:var(--text); border-color:var(--text); transform:scale(1.08); box-shadow:0 6px 18px rgba(0,0,0,.18)}
.mood-btn:active{transform:scale(.96)}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:10px 0}
.cal-grid .cal-h{font-size:11px; color:var(--muted); text-align:center; font-weight:700}
.cal-day{aspect-ratio:1; border-radius:10px; border:1px solid var(--line); background:var(--bg); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center}
.cal-day.has{background:var(--bar-bg); border-color:var(--bar-bg); font-weight:700}
.cal-day.sel{background:var(--text); color:var(--bg); border-color:var(--text)}
.cal-day.muted{opacity:.35}
.hrow{display:flex; align-items:center; gap:10px; margin:10px 0 4px; font-size:13px}
.hrow b{width:130px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hrow .bar{flex:1}
.hrow span{color:var(--muted); width:44px; flex:none; text-align:right}
/* Multi-usuario: chip de sesión + login */
.topbar-actions{display:flex; gap:8px; align-items:center; position:relative}
.user-chip.clickable{cursor:pointer}
.user-chip .chev{color:var(--muted); font-size:11px; padding:2px 6px 2px 0; flex:none}
.user-popup{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:252px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; gap:10px;
}
.user-popup.hidden{display:none}
.up-head b{display:block; font-size:15px}
.up-head .hint{margin:0}
.up-lvl{display:flex; justify-content:space-between; align-items:center; font-weight:700}
#upXp{color:var(--muted); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.up-stats{display:flex; gap:8px; text-align:center}
.up-stats div{flex:1; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:8px 4px}
.up-stats b{display:block; font-size:16px}
.up-stats span{font-size:11px; color:var(--muted)}
.up-logout{width:100%}
.user-chip{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--card); color:var(--text);
  border-radius:999px; padding:5px 6px 5px 5px; max-width:200px;
}
.user-chip.hidden{display:none}
.user-chip img{width:26px; height:26px; border-radius:50%; flex:none}
.user-chip span{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.user-chip button{background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:15px; padding:2px 6px; flex:none}
.user-chip button:hover{color:var(--text)}
.login-wrap{min-height:70vh; display:flex; align-items:center; justify-content:center}
.login-card{text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center; width:100%}
.login-card h1{margin:0; font-size:26px}
.google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:13px; border-radius:14px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--text);
  font-size:15px; font-weight:700;
}
.google-btn:hover{border-color:var(--muted)}
.google-btn:disabled{opacity:.6; cursor:wait}
.login-error:empty{display:none}
.login-error{color:#b91c1c}
/* Select personalizado con el diseño de la web (sustituye al picker nativo móvil) */
.cselect{position:relative; display:inline-block}
.cselect-native{position:absolute; opacity:0; pointer-events:none; width:0; height:0; margin:0}
.cselect-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-width:112px; padding:8px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); color:var(--text);
  font-size:14px; font-weight:600; cursor:pointer;
}
.cselect-chev{color:var(--muted); font-size:12px}
.cselect-menu{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:6px; margin:0;
  display:flex; flex-direction:column; gap:2px;
}
.cselect-menu.hidden{display:none}
.cselect-opt{
  background:transparent; border:0; color:var(--text); text-align:left;
  padding:10px 12px; border-radius:10px; cursor:pointer;
  font-size:14px; font-weight:600; white-space:nowrap;
}
.cselect-opt:hover{background:var(--bar-bg)}
.cselect-opt.active{background:var(--text); color:var(--bg)}
@media(max-width:520px){
  .brand p{display:none}
  .brand h1{font-size:19px}
  .user-chip{max-width:none; padding:4px}
  .user-chip span{display:none}
  .th-txt{display:none}
  .theme-btn{padding:9px 11px}
  .mode{padding:10px 4px; font-size:13px; white-space:nowrap}
  .pagenav a{font-size:13px; padding:11px 4px; white-space:nowrap}
}