/* ============================================================
   CreA Studio — Dashboard
   Dark, minimal, hairline-divided — no boxed cards, no shadows.
   Big numerals (GeistPixel) for key stats; thin progress rings
   per section; flat lists separated by hairlines.
   One committed dark world — not theme-toggled.
   ============================================================ */
:root{
  --bg:#070707;
  --panel:#111111;
  --fg:#F2F2F0;
  --fg-muted:#8C8C89;
  --fg-faint:#54534F;
  --border:rgba(255,255,255,0.09);
  --border-soft:rgba(255,255,255,0.05);
  --track:rgba(255,255,255,0.08);
  --font-body:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-pixel:"GeistPixel","Courier New",monospace;
  --green:#2ECC8F;
  --red:#FF6B5B;
  color-scheme: dark;
}

@font-face{
  font-family:'GeistPixel';
  src:url('../assets/fonts/geistpixel.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100%;
}
body{
  padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
}

a{ color:inherit; text-decoration:none; }
.hidden{ display:none !important; }
[hidden]{ display:none !important; }

button{ font-family:var(--font-body); cursor:pointer; border:none; background:none; color:inherit; }

input, select{
  font-family:var(--font-body); font-size:15px; color:var(--fg); background:transparent;
  border:1px solid var(--border); border-radius:10px; padding:11px 13px; width:100%; outline:none;
}
input:focus, select:focus{ border-color:var(--fg-faint); }
::placeholder{ color:var(--fg-faint); }

/* ---------- auth screen ---------- */
.auth-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.auth-card{
  width:100%;
  max-width:380px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:22px;
  padding:36px 30px;
}
.auth-brand{
  font-weight:700;
  font-size:13px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--fg-muted);
  margin-bottom:6px;
}
.auth-title{
  font-size:26px;
  font-weight:700;
  margin-bottom:22px;
}
.auth-field{ margin-bottom:12px; }
.auth-field label{
  display:block;
  font-size:12px;
  color:var(--fg-muted);
  margin-bottom:6px;
  letter-spacing:0.3px;
}
.auth-submit{
  width:100%;
  background:var(--fg);
  color:var(--bg);
  border-radius:10px;
  padding:12px;
  font-weight:600;
  font-size:15px;
  margin-top:10px;
}
@media (hover:hover){ .auth-submit:hover{ opacity:0.9; } }
.auth-submit:active{ opacity:0.85; }
.auth-toggle{
  margin-top:16px;
  font-size:13px;
  color:var(--fg-muted);
  text-align:center;
}
.auth-toggle button{
  text-decoration:underline;
  color:var(--fg);
  font-weight:600;
}
.auth-error{
  margin-top:12px;
  font-size:13px;
  color:var(--fg);
  background:var(--track);
  border-radius:10px;
  padding:10px 12px;
  display:none;
}
.auth-error.show{ display:block; }

/* ---------- shell ---------- */
.app-shell{ display:flex; min-height:100%; }

.side-nav{
  position:fixed; top:0; left:env(safe-area-inset-left,0px); bottom:0; width:68px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding-top:28px; padding-bottom:16px; border-right:1px solid var(--border); z-index:20;
}
.nav-brand{ width:8px; height:8px; border-radius:50%; background:var(--fg); margin-bottom:22px; }
.nav-item{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; color:var(--fg-faint); transition:color .15s ease, background .15s ease;
}
.nav-item.active{ color:var(--fg); background:var(--track); }
@media (hover:hover){ .nav-item:hover{ color:var(--fg); } }
.nav-spacer{ flex:1; }
.nav-item.nav-logout{ color:var(--fg-faint); }

.view-wrap{
  margin-left:calc(68px + env(safe-area-inset-left,0px));
  padding: 30px max(20px, env(safe-area-inset-right,0px)) 60px max(28px, 0px);
  width:100%; max-width:1600px;
}

/* ---------- paired sections (desktop) ---------- */
.blk-row{ border-bottom:1px solid var(--border); }
.blk-row:last-child{ border-bottom:none; }
.blk-row .blk{ border-bottom:none; }
@media (min-width:760px){
  .blk-row.two-col{ display:grid; grid-template-columns:1fr 1fr; column-gap:52px; }
  .blk-row.two-col .blk:first-child{ border-right:1px solid var(--border); padding-right:52px; }
}

/* ---------- inicio: narrow stat column (left) + big chart (right) ---------- */
.home-layout{ display:flex; gap:56px; align-items:flex-start; }
.home-left{ flex:1 1 380px; max-width:420px; min-width:0; }
.home-right{ flex:2 1 640px; min-width:0; display:flex; flex-direction:column; }
@media (min-width:760px){
  .home-left{ border-right:1px solid var(--border); padding-right:56px; }
}
@media (min-width:860px){
  .home-right{ min-height:calc(100vh - 170px); }
}
@media (max-width:860px){
  .home-layout{ flex-direction:column; gap:0; }
  .home-left{ max-width:100%; border-right:none; padding-right:0; }
}
.home-right .blk.chart-blk{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; border-bottom:none; }
.home-right .chart-wrap{ flex:1 1 auto; min-height:340px; }

@media (max-width:760px){
  .side-nav{
    top:auto; left:0; right:0; bottom:0; width:auto; height:auto; flex-direction:row; justify-content:space-around;
    padding: 9px max(10px, env(safe-area-inset-left,0px)) calc(9px + env(safe-area-inset-bottom,0px)) max(10px, env(safe-area-inset-right,0px));
    border-right:none; border-top:1px solid var(--border);
    gap:0;
  }
  .nav-brand{ display:none; }
  .nav-spacer{ display:none; }
  .nav-item{ flex-direction:column; gap:3px; width:auto; height:auto; padding:6px 10px; border-radius:10px; flex:1; font-size:10px; }
  .nav-item span{ display:block; }
  .view-wrap{ margin-left:0; padding: 22px max(16px, env(safe-area-inset-right,0px)) 94px max(16px, env(safe-area-inset-left,0px)); max-width:600px; }
}
.nav-item .nav-label{ display:none; font-size:10px; margin-top:2px; }
@media (max-width:760px){ .nav-item .nav-label{ display:block; } }

/* ---------- sections (no boxes — hairlines only) ---------- */
.blk{ padding-block:26px; border-bottom:1px solid var(--border); }
.blk:last-child{ border-bottom:none; }
.blk-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.blk-label{ font-size:11.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--fg-muted); }
.chart-blk-label{ display:inline-flex; align-items:center; gap:8px; }
.chart-blk-label svg{ width:15px; height:15px; flex:0 0 auto; color:var(--green); }
.blk-meta{ font-size:12px; color:var(--fg-muted); }
.blk-link{ font-size:12.5px; font-weight:600; color:var(--fg-muted); display:inline-flex; align-items:center; gap:4px; margin-top:14px; }
.blk-link svg{ width:13px; height:13px; }
@media (hover:hover){ .blk-link:hover{ color:var(--fg); } }

.view-header{ margin-bottom:24px; }
.page-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--fg-muted); margin-bottom:6px; }
.page-title{ font-size:24px; font-weight:700; }

/* ---------- rings ---------- */
.ring{ flex:0 0 auto; }

/* ---------- big stat numbers ---------- */
.stat-number{ font-family:var(--font-pixel); font-size:42px; line-height:1; font-variant-numeric:tabular-nums; }
.stat-sub{ margin-top:9px; font-size:13px; color:var(--fg-muted); }

.row-split{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.row-amount{ font-family:var(--font-pixel); font-size:22px; font-variant-numeric:tabular-nums; }
.row-target{ font-size:12.5px; color:var(--fg-muted); white-space:nowrap; }
.bar-track{ height:4px; border-radius:2px; background:var(--track); overflow:hidden; }
.bar-fill{ height:100%; background:var(--fg); border-radius:2px; transition:width .4s ease; }
.row-foot{ margin-top:10px; font-size:12px; color:var(--fg-muted); }

/* ---------- finance stat pair ---------- */
.fin-pair{ display:flex; gap:40px; flex-wrap:wrap; }
.fin-stat{ flex:1; min-width:140px; }
.fin-stat-top{ display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.fin-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.fin-dot.in{ background:var(--green); }
.fin-dot.out{ background:var(--red); }
.fin-stat-label{ font-size:11.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg-muted); }
.fin-trend{ margin-top:8px; font-size:12.5px; color:var(--fg-muted); display:flex; align-items:center; gap:5px; }
.fin-trend svg{ width:12px; height:12px; }
.fin-trend.up{ color:var(--green); }
.fin-trend.down{ color:var(--red); }

/* ---------- simple month-over-month compare bars (contenido) ---------- */
.cmp-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.cmp-row:last-of-type{ margin-bottom:0; }
.cmp-label{ width:70px; font-size:12.5px; color:var(--fg-muted); text-transform:capitalize; flex:0 0 auto; }
.cmp-track{ flex:1; height:10px; border-radius:5px; background:var(--track); overflow:hidden; }
.cmp-fill{ height:100%; border-radius:5px; transition:width .4s ease; }
.cmp-fill.now{ background:var(--fg); }
.cmp-fill.prev{ background:var(--fg-faint); }
.cmp-num{ width:28px; text-align:right; font-family:var(--font-pixel); font-size:14px; flex:0 0 auto; font-variant-numeric:tabular-nums; }

/* ---------- contenido: total por tipo ---------- */
.cont-total-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.cont-total-item{ flex:1 1 130px; min-width:130px; background:rgba(46,204,143,0.09); border-radius:14px; padding:18px 20px; }
.cont-total-num{ font-family:var(--font-pixel); font-size:36px; line-height:1; color:var(--green); font-variant-numeric:tabular-nums; }
.cont-total-label{ margin-top:8px; font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--fg-muted); }

/* ---------- chart ---------- */
.chart-wrap{ position:relative; width:100%; }
.chart-legend{ display:flex; gap:16px; font-size:12px; color:var(--fg-muted); margin-bottom:12px; }
.legend-item{ display:flex; align-items:center; gap:6px; }
.legend-swatch{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.year-select{
  padding:6px 10px; font-size:12.5px; font-weight:600; border-radius:8px;
  background:transparent; border:1px solid var(--border); color:var(--fg-muted); cursor:pointer;
}
.chart-tooltip{
  position:absolute; pointer-events:none; background:#1C1C1C; color:var(--fg);
  font-size:12px; line-height:1.5; border-radius:8px; padding:9px 11px; white-space:nowrap;
  opacity:0; transform:translate(-50%,-6px); transition:opacity .1s ease; z-index:5; border:1px solid var(--border);
}
.chart-tooltip.show{ opacity:1; }
.chart-tooltip b{ font-weight:700; }

/* ---------- transaction / content lists ---------- */
.list-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.tx-row{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--border-soft); }
.tx-row:last-child{ border-bottom:none; }
.tx-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.tx-dot.in{ background:var(--green); }
.tx-dot.out{ background:var(--red); }
.tx-main{ flex:1; min-width:0; }
.tx-concepto{ font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx-meta{ font-size:12px; color:var(--fg-muted); margin-top:2px; }
.tx-amount{ font-family:var(--font-pixel); font-size:15px; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.tx-amount.in{ color:var(--green); }
.tx-amount.out{ color:var(--red); }
.tx-empty{ font-size:13px; color:var(--fg-muted); padding:14px 0; }

/* ---------- lectura ---------- */
.lectura-top{ display:flex; align-items:center; gap:16px; }
.lectura-info{ flex:1; min-width:0; }
.lectura-title{ font-size:15px; font-weight:700; margin-bottom:4px; }
.lectura-pages{ font-family:var(--font-pixel); font-size:19px; font-variant-numeric:tabular-nums; }
.lectura-pages span{ font-size:13px; color:var(--fg-muted); font-family:var(--font-body); }
.lectura-pace{ margin-top:5px; font-size:12.5px; color:var(--fg-muted); }
.lectura-add{ display:flex; gap:8px; margin-top:16px; }
.lectura-add input{ flex:1; }
.lectura-add button{ background:var(--fg); color:var(--bg); border-radius:10px; padding:11px 18px; font-weight:600; font-size:14px; white-space:nowrap; }
@media (hover:hover){ .lectura-add button:hover{ opacity:.88; } }

/* ---------- entrenamiento (month grid, on Inicio) ---------- */
.train-legend{ display:flex; gap:14px; font-size:12px; color:var(--fg-muted); margin-bottom:12px; }
.train-legend-item{ display:flex; align-items:center; gap:6px; }
.train-swatch{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.train-swatch.padel{ background:transparent; border:1.5px solid var(--fg); }
.train-swatch.gimnasio{ background:var(--fg); }
.train-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:5px; }
.train-weekdays span{ text-align:center; font-size:10px; color:var(--fg-faint); }
.train-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.train-day{
  aspect-ratio:1; border-radius:6px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; color:var(--fg-faint); background:transparent;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.train-day.empty-cell{ visibility:hidden; border:none; }
@media (hover:hover){ .train-day:not(.empty-cell):hover{ border-color:var(--fg-muted); } }
.train-day[data-state="padel"]{ background:transparent; border-color:var(--fg); border-width:1.5px; color:var(--fg); }
.train-day[data-state="gimnasio"]{ background:var(--fg); border-color:var(--fg); color:var(--bg); }
.train-day.today{ outline:1.5px solid var(--fg); outline-offset:1.5px; }

/* ---------- entrenamiento annual grid ---------- */
.yr-scroll{ overflow-x:auto; padding-bottom:4px; }
.yr-labels{ display:grid; gap:3px; margin-bottom:5px; min-width:600px; }
.yr-labels div{ font-size:10px; color:var(--fg-faint); }
.yr-grid{ display:grid; grid-auto-flow:column; gap:3px; min-width:600px; }
.yr-cell{ width:10px; height:10px; border-radius:2.5px; background:var(--track); border:none; }
.yr-cell.yr-empty{ background:transparent; visibility:hidden; }
.yr-cell[data-state="padel"]{ background:transparent; border:1.5px solid var(--fg); }
.yr-cell[data-state="gimnasio"]{ background:var(--fg); }
@media (hover:hover){ .yr-cell:not(.yr-empty):hover{ outline:1px solid var(--fg-muted); } }

/* ---------- forms ---------- */
details.forms-blk{ border-bottom:1px solid var(--border); padding-block:18px; }
details.forms-blk summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-size:13.5px; font-weight:600; color:var(--fg-muted); }
details.forms-blk summary::-webkit-details-marker{ display:none; }
details.forms-blk summary::after{ content:'+'; font-size:17px; color:var(--fg-faint); }
details.forms-blk[open] summary::after{ content:'\2013'; }
details.forms-blk[open] summary{ color:var(--fg); }
.form-body{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.form-row{ display:flex; gap:10px; }
.form-row > *{ flex:1; min-width:0; }
.form-submit{ background:var(--fg); color:var(--bg); border-radius:10px; padding:11px; font-weight:600; font-size:14px; }
@media (hover:hover){ .form-submit:hover{ opacity:.9; } }
.form-msg{ font-size:12.5px; color:var(--fg-muted); min-height:16px; }

.footer-note{ font-size:11px; color:var(--fg-faint); margin-top:30px; letter-spacing:.4px; }