/* ============================================================
   SUEÑO POWER — Design tokens
   Paleta: azul medianoche, azul profundo, azul celeste, dorado suave, blanco
   Tipografía: Fraunces (display) + Manrope (texto/UI)
   ============================================================ */
:root{
  --midnight-950:#070C18;
  --midnight-900:#0B1526;
  --midnight-800:#121F3A;
  --midnight-700:#1A2C4E;
  --blue-deep:#1B2E52;
  --sky:#7EC4E8;
  --sky-soft:#A9DCF5;
  --sky-dim:#3E6D93;
  --gold:#E3B873;
  --gold-soft:#F0D9A8;
  --gold-strong:#C99A4B;
  --white:#F8FAFD;
  --ink:#0E1524;
  --mist:#8B9AB3;
  --danger:#E38080;
  --success:#8FCB9B;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-soft:0 12px 32px rgba(7,12,24,.28);
  --transition:200ms cubic-bezier(.4,0,.2,1);

  --sidebar-w:260px;
}

/* Theme: dark (default) */
body.theme-dark{
  --bg:var(--midnight-900);
  --bg-elevated:var(--midnight-800);
  --bg-sunken:var(--midnight-950);
  --border:rgba(126,196,232,.14);
  --text:var(--white);
  --text-dim:var(--mist);
  --accent:var(--gold);
  --accent-contrast:var(--midnight-950);
}
/* Theme: light */
body.theme-light{
  --bg:#EFF4FA;
  --bg-elevated:#FFFFFF;
  --bg-sunken:#E3EBF4;
  --border:rgba(27,46,82,.12);
  --text:var(--ink);
  --text-dim:#5A6B85;
  --accent:var(--gold-strong);
  --accent-contrast:#FFFFFF;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  transition:background var(--transition), color var(--transition);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 .3em; font-weight:600; letter-spacing:.01em;}
p{margin:0 0 .8em; line-height:1.6;}
.hidden{display:none !important;}
.muted{color:var(--text-dim); font-size:.92rem;}
code{background:var(--bg-sunken); padding:.15em .45em; border-radius:6px; font-size:.85em;}
:focus-visible{outline:2px solid var(--sky); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* ============ Buttons ============ */
.btn{
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  padding:.75rem 1.4rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
}
.btn:active{transform:scale(.97);}
.btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold-strong)); color:var(--midnight-950); box-shadow:0 6px 18px rgba(227,184,115,.35);}
.btn-gold:hover{box-shadow:0 10px 24px rgba(227,184,115,.45); transform:translateY(-1px);}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--sky); color:var(--sky);}
.btn-danger{background:transparent; border-color:var(--danger); color:var(--danger);}
.btn-danger:hover{background:var(--danger); color:#fff;}
.btn-lg{padding:1rem 2rem; font-size:1.05rem;}
.btn-sm{padding:.5rem .9rem; font-size:.85rem;}
.btn-text{background:none; border:none; color:var(--sky); font-weight:700; cursor:pointer; font-family:var(--font-body); font-size:.9rem;}
.btn-text:hover{text-decoration:underline;}

/* ============ WELCOME SCREEN ============ */
.welcome{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(126,196,232,.18), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(227,184,115,.14), transparent 50%),
    linear-gradient(180deg, var(--midnight-950), var(--midnight-900) 60%, var(--midnight-800));
  padding:1.5rem;
}
.welcome-stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 15%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 85%, #fff, transparent),
    radial-gradient(1px 1px at 90% 60%, #fff, transparent),
    radial-gradient(1px 1px at 45% 35%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 15% 55%, #fff, transparent);
  opacity:.55; pointer-events:none;
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.35;} to{opacity:.7;}}
.welcome-card{position:relative; text-align:center; max-width:460px;}
.welcome-logo{width:150px; height:150px; margin-bottom:1rem; animation:float 5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
.eyebrow{text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--sky-soft); font-weight:700; margin-bottom:.4rem;}
.welcome-title{font-size:2.6rem; color:#fff; letter-spacing:.03em; margin-bottom:.3rem;}
.welcome-tagline{font-family:var(--font-display); font-style:italic; font-size:1.2rem; color:var(--gold-soft); margin-bottom:.4rem;}
.welcome-author{color:var(--mist); font-size:.9rem; margin-bottom:1.8rem;}
.welcome .btn-text{display:block; margin:1rem auto 0; color:var(--mist);}
.welcome .btn-text:hover{color:var(--sky-soft);}

/* ============ APP SHELL ============ */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--midnight-950);
  color:#fff; display:flex; flex-direction:column; padding:1.4rem 1rem;
  position:fixed; top:0; bottom:0; left:0; z-index:40;
  transition:transform var(--transition);
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar-brand{display:flex; align-items:center; gap:.7rem; padding:.4rem .5rem 1.2rem;}
.brand-logo{width:38px; height:38px;}
.sidebar-brand strong{display:block; font-family:var(--font-display); font-size:1.05rem;}
.sidebar-brand span{display:block; font-size:.72rem; color:var(--mist);}
.nav{display:flex; flex-direction:column; gap:.15rem; overflow-y:auto; flex:1;}
.nav-item{
  display:flex; align-items:center; gap:.7rem; background:none; border:none; color:var(--mist);
  padding:.65rem .7rem; border-radius:12px; font-family:var(--font-body); font-size:.9rem; font-weight:600;
  cursor:pointer; text-align:left; transition:background var(--transition), color var(--transition);
}
.nav-ico{font-size:1.05rem; width:1.4em; text-align:center;}
.nav-item:hover{background:rgba(126,196,232,.08); color:#fff;}
.nav-item.active{background:linear-gradient(135deg, rgba(227,184,115,.22), rgba(126,196,232,.14)); color:var(--gold-soft);}
.sidebar-close{margin-top:1rem; background:none; border:1px solid rgba(255,255,255,.12); color:var(--mist); border-radius:12px; padding:.6rem; font-family:var(--font-body); cursor:pointer;}
.sidebar-close:hover{border-color:var(--danger); color:var(--danger);}

.nav-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:35; display:none;}
.nav-overlay.show{display:block;}

.main{flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-width:0;}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:1rem;
  padding:1rem 1.6rem; background:var(--bg); border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px);
}
.topbar-title h2{font-size:1.3rem; margin:0;}
.topbar-title p{margin:0; color:var(--text-dim); font-size:.85rem;}
.topbar-actions{margin-left:auto; display:flex; gap:.5rem;}
.icon-btn{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--bg-elevated);
  color:var(--text); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color var(--transition);
}
.icon-btn:hover{border-color:var(--sky);}
.only-mobile{display:none;}

.views{padding:1.6rem; max-width:1240px; width:100%; margin:0 auto;}
.view{display:none; animation:fadein .35s ease;}
.view.active{display:block;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ============ Panels & cards ============ */
.panel{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.4rem; margin-bottom:1.2rem; box-shadow:var(--shadow-soft);
}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap;}
.panel-head h3{margin:0;}

.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:1.2rem;}
.stat-card{background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.1rem; box-shadow:var(--shadow-soft);}
.stat-card .stat-label{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); font-weight:700;}
.stat-card .stat-value{font-family:var(--font-display); font-size:1.9rem; margin:.2rem 0; color:var(--accent);}
.stat-card .stat-sub{font-size:.78rem; color:var(--text-dim);}

/* ============ Hero (Inicio) ============ */
.hero-panel{
  background:linear-gradient(135deg, var(--midnight-900), var(--midnight-800));
  color:#fff; border-radius:var(--radius-lg); padding:2rem; margin-bottom:1.2rem;
  display:flex; align-items:center; gap:2rem; flex-wrap:wrap; box-shadow:var(--shadow-soft);
  position:relative; overflow:hidden;
}
.hero-panel::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, rgba(227,184,115,.18), transparent 55%);
  pointer-events:none;
}
.hero-copy{flex:1 1 320px; position:relative;}
.hero-copy .eyebrow{color:var(--sky-soft);}
.hero-copy h3{font-size:1.5rem; color:#fff; max-width:26ch;}
.hero-copy p{color:var(--mist); max-width:46ch;}
.hero-actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem;}
.hero-score{position:relative; flex:0 0 auto; width:160px; height:160px;}
.score-ring{width:160px; height:160px; transform:rotate(-90deg);}
.ring-track{fill:none; stroke:rgba(255,255,255,.12); stroke-width:12;}
.ring-fill{fill:none; stroke:url(#none); stroke:var(--gold); stroke-width:12; stroke-linecap:round; stroke-dasharray:427; stroke-dashoffset:427; transition:stroke-dashoffset .6s ease;}
.score-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.score-label strong{font-family:var(--font-display); font-size:2.1rem; color:#fff;}
.score-label span{font-size:.72rem; color:var(--mist); text-align:center; max-width:8ch;}

.chips-row{display:flex; flex-wrap:wrap; gap:.6rem;}
.chip{
  display:flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border-radius:999px;
  background:var(--bg-sunken); border:1px solid var(--border); font-size:.85rem; font-weight:600;
}
.chip.done{background:linear-gradient(135deg, rgba(227,184,115,.25), rgba(126,196,232,.15)); border-color:var(--gold); color:var(--accent);}

/* ============ Forms ============ */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem;}
.form-grid label{display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; font-weight:700; color:var(--text-dim);}
.form-grid label.full{grid-column:1/-1;}
input,select,textarea{
  font-family:var(--font-body); font-size:.95rem; padding:.65rem .8rem; border-radius:10px;
  border:1px solid var(--border); background:var(--bg-sunken); color:var(--text);
}
input:focus,select:focus,textarea:focus{border-color:var(--sky);}
input[type="range"]{padding:0; accent-color:var(--gold);}
textarea{resize:vertical; font-family:var(--font-body);}
.form-actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.4rem;}

/* ============ Tables ============ */
.table-wrap{overflow-x:auto;}
.data-table{width:100%; border-collapse:collapse; font-size:.88rem; min-width:640px;}
.data-table th{text-align:left; padding:.6rem .7rem; color:var(--text-dim); border-bottom:1px solid var(--border); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em;}
.data-table td{padding:.6rem .7rem; border-bottom:1px solid var(--border);}
.data-table tr:hover td{background:var(--bg-sunken);}
.row-actions{display:flex; gap:.4rem;}
.row-actions button{background:none; border:1px solid var(--border); border-radius:8px; padding:.3rem .5rem; cursor:pointer; color:var(--text);}
.row-actions button:hover{border-color:var(--sky);}

/* ============ Filters ============ */
.filters-bar{display:flex; flex-wrap:wrap; gap:.8rem; align-items:end; margin-bottom:1.2rem; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem;}
.filters-bar label{display:flex; flex-direction:column; gap:.3rem; font-size:.75rem; font-weight:700; color:var(--text-dim);}

/* ============ Charts ============ */
.charts-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.2rem;}

/* ============ Habits ============ */
.habit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem;}
.habit-tile{
  border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; text-align:center; cursor:pointer;
  background:var(--bg-sunken); transition:all var(--transition); user-select:none;
}
.habit-tile .h-ico{font-size:1.6rem; display:block; margin-bottom:.3rem;}
.habit-tile.done{background:linear-gradient(135deg, rgba(227,184,115,.22), rgba(126,196,232,.12)); border-color:var(--gold);}
.habit-list{display:flex; flex-direction:column; gap:.5rem;}
.habit-row{display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem; border:1px solid var(--border); border-radius:10px;}
.habit-row .row-actions button{font-size:.8rem;}

/* ============ Diagnóstico ============ */
.diag-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem;}
.diag-card{border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; background:var(--bg-sunken); cursor:pointer; transition:transform var(--transition), border-color var(--transition);}
.diag-card:hover{border-color:var(--sky); transform:translateY(-2px);}
.diag-card h4{margin:0 0 .3rem; font-size:1.02rem;}
.q-block{border-bottom:1px solid var(--border); padding:1rem 0;}
.q-block p{font-weight:700; margin-bottom:.6rem;}
.q-options{display:flex; flex-wrap:wrap; gap:.5rem;}
.q-option{padding:.5rem .9rem; border-radius:999px; border:1px solid var(--border); cursor:pointer; font-size:.85rem; background:var(--bg-elevated);}
.q-option.selected{background:var(--gold); border-color:var(--gold); color:var(--midnight-950); font-weight:700;}
.result-score{font-family:var(--font-display); font-size:3rem; color:var(--accent);}
.result-tag{display:inline-block; padding:.3rem .8rem; border-radius:999px; font-weight:700; font-size:.8rem; margin-bottom:.6rem;}
.result-tag.bajo{background:rgba(143,203,155,.2); color:var(--success);}
.result-tag.moderado{background:rgba(227,184,115,.22); color:var(--gold);}
.result-tag.alto{background:rgba(227,128,128,.2); color:var(--danger);}

/* ============ 7D ============ */
.sieteD-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; margin-bottom:1rem;}
.d-tile{border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; text-align:center; cursor:pointer; background:var(--bg-sunken);}
.d-tile .d-letter{font-family:var(--font-display); font-size:1.6rem; color:var(--sky);}
.d-tile.done{background:linear-gradient(135deg, rgba(227,184,115,.25), rgba(126,196,232,.15)); border-color:var(--gold);}
.d-tile.done .d-letter{color:var(--gold);}
.d-tile small{display:block; font-size:.72rem; color:var(--text-dim); margin-top:.2rem;}
.progress-bar-lg{height:14px; border-radius:999px; background:var(--bg-sunken); overflow:hidden; border:1px solid var(--border);}
.progress-fill-lg{height:100%; background:linear-gradient(90deg,var(--sky),var(--gold)); width:0%; transition:width .5s ease;}
.pill{background:var(--bg-sunken); border:1px solid var(--border); padding:.3rem .8rem; border-radius:999px; font-size:.78rem; color:var(--text-dim);}

/* ============ Meditación ============ */
.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem;}
.media-card{border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; background:var(--bg-sunken); cursor:pointer; transition:border-color var(--transition), transform var(--transition);}
.media-card:hover{border-color:var(--sky); transform:translateY(-2px);}
.media-card .m-ico{font-size:1.6rem;}
.media-card h4{margin:.4rem 0 .2rem; font-size:1rem;}
.player{display:flex; flex-direction:column; gap:.8rem;}
.player-info strong{display:block;}
.player-info span{font-size:.8rem; color:var(--text-dim);}
.player-controls{display:flex; align-items:center; gap:.8rem;}
.player-controls input[type="range"]{flex:1;}
.ambient-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem;}
.ambient-card{border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; background:var(--bg-sunken);}
.ambient-card .row{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem;}

/* ============ Biblioteca (accordion) ============ */
.accordion-part{margin-bottom:1rem;}
.accordion-part > h3{margin-bottom:.6rem;}
.accordion-item{border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:.6rem; overflow:hidden; background:var(--bg-elevated);}
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem;
  background:none; border:none; color:var(--text); font-family:var(--font-body); font-weight:700; cursor:pointer; font-size:.95rem; text-align:left;
}
.accordion-trigger:hover{color:var(--sky);}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.accordion-panel-inner{padding:0 1.2rem 1.2rem;}
.accordion-item.open .accordion-panel{max-height:2000px;}
.accordion-item.open .accordion-trigger .chev{transform:rotate(180deg);}
.chev{transition:transform var(--transition);}
.lib-tags{display:flex; gap:.4rem; flex-wrap:wrap; margin:.6rem 0;}
.lib-tag{font-size:.72rem; background:var(--bg-sunken); border:1px solid var(--border); padding:.25rem .6rem; border-radius:999px; color:var(--text-dim);}
.lib-video{aspect-ratio:16/9; background:var(--bg-sunken); border:1px dashed var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:.85rem; margin:.8rem 0;}

/* ============ Informes ============ */
.report-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1rem;}
.pdf-preview{background:var(--bg-sunken); border:1px solid var(--border); border-radius:12px; padding:1.5rem; min-height:200px; font-size:.88rem; white-space:pre-wrap; font-family:var(--font-body);}

/* ============ Pausa y Reflexiona ============ */
.quote-block{
  font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--accent);
  border-left:3px solid var(--gold); padding:.4rem 0 .4rem 1rem; margin:0 0 1.2rem;
}

/* ============ Checklist ============ */
.checklist{display:flex; flex-direction:column; gap:.5rem;}
.checklist label{flex-direction:row; align-items:center; gap:.6rem; font-weight:500; color:var(--text);}
.routine-blocks{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem;}
.routine-block{border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; background:var(--bg-sunken);}
.routine-block h4{margin-top:0;}

.theme-choice{display:flex; gap:.7rem;}

/* ============ Toast ============ */
.toast{
  position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--midnight-950); color:#fff; padding:.8rem 1.4rem; border-radius:999px; font-size:.88rem;
  box-shadow:var(--shadow-soft); opacity:0; pointer-events:none; transition:all var(--transition); z-index:80;
  border:1px solid rgba(227,184,115,.3);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .only-mobile{display:flex;}
  .hero-panel{flex-direction:column; text-align:center;}
  .hero-actions{justify-content:center;}
}
@media (max-width: 600px){
  .views{padding:1rem;}
  .welcome-title{font-size:2rem;}
  .topbar{padding:.8rem 1rem;}
  .panel{padding:1.1rem;}
  .form-grid{grid-template-columns:1fr;}
}


/* ==========================
   INSTALADOR PWA
========================== */

#install-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:20px;
}

#install-overlay.open{
  display:flex;
}

.install-box{
  background:var(--bg-elevated);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:16px;
  max-width:420px;
  width:100%;
  padding:25px;
  text-align:center;
  box-shadow:var(--shadow-soft);
}

.install-box h3{
  margin-bottom:15px;
}

.install-box p{
  margin-bottom:20px;
}

#install-close{
  float:right;
  border:none;
  background:none;
  font-size:22px;
  cursor:pointer;
  color:var(--text);
}