/* =================================================================
   MISTATS · Liquid Glass
   Material translúcido sobre un degradado violeta "aurora".
   ================================================================= */

:root{
  /* Paleta */
  --violet-900:#3A1FA6;
  --violet-700:#5B3FD6;
  --violet-500:#6C4BE6;
  --violet-300:#9B7BFF;
  --ink:#0e0a2a;

  /* Vidrio */
  --glass-bg:linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.07));
  --glass-bd:rgba(255,255,255,.35);
  --glass-sh:0 18px 50px -12px rgba(20,8,70,.55);
  --blur:22px;

  /* Texto sobre vidrio oscuro */
  --tx:#ffffff;
  --tx-dim:rgba(255,255,255,.72);
  --tx-faint:rgba(255,255,255,.5);

  --radius:26px;
  --tabbar-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--tx);
  background:#41259e;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Fondo aurora animado ─────────────────────────────────────── */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #7a5cff 0%, #5b3fd6 38%, #3a1fa6 78%, #2a1580 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
  mix-blend-mode:screen;animation:float 18s var(--ease) infinite alternate}
.b1{width:48vmax;height:48vmax;background:#9b7bff;top:-12%;left:-10%}
.b2{width:42vmax;height:42vmax;background:#ff8ad1;bottom:-18%;right:-12%;animation-delay:-6s}
.b3{width:36vmax;height:36vmax;background:#56e0c8;top:30%;right:-8%;animation-delay:-11s;opacity:.4}
@keyframes float{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4vw,5vh,0) scale(1.15)}
}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}

/* ── Material vidrio ──────────────────────────────────────────── */
.glass{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--blur)) saturate(170%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(170%);
  border:1px solid var(--glass-bd);
  box-shadow:var(--glass-sh), inset 0 1px 0 rgba(255,255,255,.45);
  border-radius:var(--radius);
}
.glass::before{ /* brillo especular */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.35), transparent 55%);
  opacity:.7;
}

/* ── Wordmark deportivo ───────────────────────────────────────── */
.wordmark{
  margin:0;font-size:30px;font-weight:900;font-style:italic;
  letter-spacing:1px;transform:skewX(-7deg);
  text-shadow:0 2px 14px rgba(0,0,0,.25);
  font-family:"Arial Black","Segoe UI",system-ui,sans-serif;
}

/* ── Header ───────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:calc(env(safe-area-inset-top) + 12px) 18px 14px;
  border-radius:0 0 var(--radius) var(--radius);
  border-top:none;
}
.icon-btn{
  display:grid;place-items:center;width:42px;height:42px;border:none;
  border-radius:14px;color:var(--tx);background:rgba(255,255,255,.12);
  cursor:pointer;transition:transform .15s var(--ease),background .2s}
.icon-btn:active{transform:scale(.9);background:rgba(255,255,255,.22)}

/* ── Layout contenido ─────────────────────────────────────────── */
.content{
  padding:18px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 34px);
  max-width:560px;margin:0 auto;
}
.view{animation:rise .4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.view-title{margin:6px 4px 16px;font-size:24px;font-weight:800;letter-spacing:.3px}

/* ── Tarjetas de stat (cuadrícula) ───────────────────────────── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.stat-grid.wide{grid-template-columns:1fr 1fr}
.stat-card{padding:18px 18px 16px;border-radius:24px;min-height:118px;
  display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;
  transition:transform .18s var(--ease)}
.stat-card:active{transform:scale(.97)}
.stat-card .sc-top{display:flex;justify-content:space-between;align-items:flex-start}
.stat-card .sc-icon{font-size:24px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.stat-card .sc-val{font-size:28px;font-weight:850;line-height:1.05;margin-top:6px}
.stat-card .sc-unit{font-size:15px;font-weight:600;opacity:.7;margin-left:2px}
.stat-card .sc-name{font-size:15px;color:var(--tx-dim);font-weight:600;margin-top:8px}

/* ── Panel genérico ───────────────────────────────────────────── */
.panel{padding:20px 18px;margin-bottom:18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.panel-head h2,.panel-head h3{margin:0;font-size:19px;font-weight:800}
.month-nav{display:flex;align-items:center;gap:6px}
.month-label{font-size:13px;font-weight:700;min-width:96px;text-align:center;color:var(--tx-dim)}
.chip{border:none;background:rgba(255,255,255,.16);color:var(--tx);
  width:30px;height:30px;border-radius:10px;font-size:18px;cursor:pointer;line-height:1}
.chip.add{width:auto;padding:0 12px;height:32px;font-size:13px;font-weight:700}
.chip:active{transform:scale(.9)}

/* ── Rueda de hábitos ─────────────────────────────────────────── */
.tracker-wrap{position:relative;width:100%;aspect-ratio:1;margin:4px 0 6px}
#habitWheel{width:100%;height:100%;display:block;overflow:visible}
.tracker-hint{margin:2px 4px 14px;font-size:12.5px;color:var(--tx-faint);text-align:center}
.seg{cursor:pointer;transition:opacity .15s}
.seg:active{opacity:.6}
.day-num{font-size:13px;fill:var(--tx-faint);font-weight:600}

/* Leyenda */
.legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.legend .lg{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  background:rgba(255,255,255,.12);padding:6px 12px;border-radius:999px}
.legend .dot{width:12px;height:12px;border-radius:50%}

/* ── Listas (Favoritos / Estadísticas) ───────────────────────── */
.stat-list{display:flex;flex-direction:column;gap:12px}
.list-card{display:flex;align-items:center;gap:14px;padding:16px 18px}
.list-card .lc-icon{width:46px;height:46px;border-radius:15px;display:grid;
  place-items:center;font-size:22px;flex:0 0 auto}
.list-card .lc-body{flex:1;min-width:0}
.list-card .lc-name{font-weight:750;font-size:16px}
.list-card .lc-sub{font-size:13px;color:var(--tx-dim)}
.list-card .lc-val{font-size:22px;font-weight:850;text-align:right}
.list-card .lc-val small{font-size:13px;font-weight:600;opacity:.7}

/* ── Gestión (Menú) ──────────────────────────────────────────── */
.manage-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.manage-row{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-radius:16px;background:rgba(255,255,255,.08)}
.manage-row .mr-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto}
.manage-row .mr-name{flex:1;font-weight:650;font-size:15px}
.manage-row .mr-sub{font-size:12px;color:var(--tx-faint)}
.manage-row button{border:none;background:rgba(255,255,255,.14);color:var(--tx);
  width:34px;height:34px;border-radius:11px;cursor:pointer;font-size:15px}
.manage-row button:active{transform:scale(.9)}
.account-row{display:flex;flex-direction:column;gap:10px;margin-top:6px}

/* ── Tab bar flotante + FAB ──────────────────────────────────── */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 12px);
  width:calc(100% - 28px);max-width:540px;height:var(--tabbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;z-index:40;border-radius:30px;overflow:visible;
}
.tab{flex:1;border:none;background:none;color:var(--tx-faint);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;
  font-weight:650;padding:8px 0;transition:color .2s}
.tab svg{width:24px;height:24px}
.tab.is-active{color:#fff}
.tab.is-active svg{filter:drop-shadow(0 3px 8px rgba(255,255,255,.45))}
.tab:nth-child(2){margin-right:34px}
.tab:nth-child(4){margin-left:34px}

.fab{
  position:absolute;left:50%;top:-22px;transform:translateX(-50%);
  width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;color:#fff;
  background:linear-gradient(160deg,#8a6bff,#5b3fd6);
  box-shadow:0 12px 28px -6px rgba(91,63,214,.8),inset 0 1px 0 rgba(255,255,255,.6);
  display:grid;place-items:center;transition:transform .18s var(--ease)}
.fab:active{transform:translateX(-50%) scale(.9)}
.fab::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(70% 50% at 30% 20%,rgba(255,255,255,.6),transparent 60%);
  pointer-events:none}

/* ── Hojas / modales ─────────────────────────────────────────── */
.sheet-backdrop{position:fixed;inset:0;z-index:60;background:rgba(20,8,60,.45);
  backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;
  animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-width:540px;margin:0 10px calc(env(safe-area-inset-bottom) + 10px);
  padding:14px 22px 26px;border-radius:30px 30px 26px 26px;
  animation:slideup .32s var(--ease)}
@keyframes slideup{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.sheet-handle{width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.4);
  margin:2px auto 14px}
.sheet-title{margin:0 0 16px;font-size:21px;font-weight:800}
.sheet-actions{display:flex;gap:10px;margin-top:8px}
.sheet-actions .btn-primary,.sheet-actions .btn-ghost{flex:1}

/* ── Formularios ─────────────────────────────────────────────── */
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:13px;font-weight:650;color:var(--tx-dim);margin:0 0 7px 4px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.6);
  border-radius:16px;outline:none;appearance:none;font-family:inherit}
.field input:focus,.field select:focus{box-shadow:0 0 0 3px rgba(155,123,255,.5)}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236C4BE6' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.field-inline{display:flex;gap:10px}
.field-inline>.field{flex:1}
input[type=color]{padding:6px;height:50px}

/* Botones */
.btn-primary{display:block;width:100%;text-align:center;padding:15px;border:none;
  border-radius:16px;font-size:16px;font-weight:750;cursor:pointer;color:#fff;
  background:linear-gradient(160deg,#7a5cff,#5b3fd6);text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(91,63,214,.8),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s var(--ease)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{display:block;width:100%;text-align:center;padding:14px;border-radius:16px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;
  font-size:15px;font-weight:700;cursor:pointer;text-decoration:none}
.btn-ghost.danger{color:#ffd2d8;border-color:rgba(255,120,140,.4)}
.btn-ghost:active{transform:scale(.97)}

/* ── Toast ───────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 40px);
  transform:translateX(-50%) translateY(20px);z-index:80;
  background:rgba(20,10,50,.85);backdrop-filter:blur(10px);color:#fff;
  padding:13px 22px;border-radius:16px;font-size:14px;font-weight:650;
  border:1px solid rgba(255,255,255,.2);opacity:0;transition:all .3s var(--ease);
  pointer-events:none;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:rgba(120,18,40,.9)}

.empty{padding:22px;text-align:center;color:var(--tx-faint);font-size:14px}

/* ── Pantallas de autenticación ──────────────────────────────── */
.auth-body{display:grid;place-items:center;min-height:100dvh;padding:24px}
.auth-card{width:100%;max-width:380px;padding:34px 28px}
.auth-card .wordmark{font-size:34px;text-align:center;margin-bottom:6px}
.auth-title{margin:14px 0 4px;font-size:22px;font-weight:800;text-align:center}
.auth-text{margin:0 0 22px;color:var(--tx-dim);font-size:14px;text-align:center;line-height:1.5}
.auth-text code{background:rgba(255,255,255,.15);padding:1px 6px;border-radius:6px}
.auth-error{background:rgba(220,40,70,.25);border:1px solid rgba(255,120,140,.4);
  color:#ffd9df;padding:11px 14px;border-radius:14px;font-size:13.5px;margin-bottom:16px}
.auth-card .btn-primary{margin-top:4px}