:root{
  --bg: #0B0F1A;
  --bg-panel: #12172A;
  --bg-panel-2: #171D33;
  --line: #262E4A;
  --text: #F1EFE9;
  --muted: #9AA0B4;
  --gold: #E3A857;
  --gold-2: #F4C468;
  --plum: #8A5A7C;
  --danger: #C9605C;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 12px 32px rgba(0,0,0,.35);
  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;
}
body.theme-light{
  --bg: #F6F3EC;
  --bg-panel: #FFFFFF;
  --bg-panel-2: #F0ECE2;
  --line: #E1DBCB;
  --text: #201B14;
  --muted: #6B6455;
  --gold: #C98A3A;
  --gold-2: #E3A857;
  --plum: #8A5A7C;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0 0 6px; }
p{ margin:0 0 10px; line-height:1.55; }
.muted{ color:var(--muted); }
.hidden{ display:none !important; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

/* ===================== BOTONES ===================== */
.btn{ border:1px solid var(--line); background:var(--bg-panel-2); color:var(--text); padding:11px 18px; border-radius:999px; font-weight:700; font-size:.95rem; transition:.15s; }
.btn:hover{ transform:translateY(-1px); }
.btn-gold{ background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#20140A; border:none; }
.btn-ghost{ background:transparent; }
.btn-danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
.btn-lg{ padding:14px 28px; font-size:1.05rem; }
.btn-sm{ padding:7px 12px; font-size:.85rem; }
.btn-text{ background:none; border:none; color:var(--muted); text-decoration:underline; font-size:.9rem; }
.icon-btn{ background:var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; width:38px; height:38px; font-size:1.1rem; color:var(--text); }
.icon-btn.sm{ width:30px; height:30px; font-size:.9rem; }

/* ===================== BIENVENIDA ===================== */
.welcome{ min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:radial-gradient(120% 120% at 50% 0%, #14192E 0%, #0B0F1A 60%); padding:24px; }
.welcome-stars{ position:absolute; inset:0; }
.welcome-stars span{ position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:.5; animation:twinkle 3s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:.15;} 50%{opacity:.9;} }
.welcome-card{ position:relative; z-index:1; max-width:440px; text-align:center; background:rgba(18,23,42,.7); border:1px solid var(--line); border-radius:24px; padding:38px 30px; backdrop-filter:blur(6px); }
.welcome-logo{ width:88px; height:88px; margin-bottom:14px; }
.eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--gold-2); font-weight:700; }
.welcome-title{ font-size:2.1rem; letter-spacing:.06em; margin:8px 0 12px; }
.welcome-tagline{ font-style:italic; color:var(--muted); }
.welcome-author{ font-size:.85rem; color:var(--muted); margin-bottom:20px; }
.install-box{ background:var(--bg-panel-2); border:1px solid var(--line); border-radius:14px; padding:14px; margin:18px 0; font-size:.85rem; }
.install-box h3{ font-size:.95rem; }

/* ===================== APP SHELL ===================== */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{ width:270px; background:var(--bg-panel); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh; overflow-y:auto; flex-shrink:0; }
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 20px; }
.brand-logo{ width:36px; height:36px; }
.sidebar-brand strong{ display:block; font-family:var(--font-display); }
.sidebar-brand span{ font-size:.72rem; color:var(--muted); }
.nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.nav-item{ display:flex; align-items:center; gap:10px; background:none; border:none; color:var(--text); text-align:left; padding:11px 12px; border-radius:12px; font-size:.92rem; font-weight:600; }
.nav-item:hover{ background:var(--bg-panel-2); }
.nav-item.active{ background:linear-gradient(135deg, rgba(227,168,87,.18), rgba(138,90,124,.18)); color:var(--gold-2); }
.nav-ico{ font-size:1.05rem; width:22px; text-align:center; }
.sidebar-close{ display:none; }

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

.main{ flex:1; min-width:0; }
.topbar{ display:flex; align-items:center; gap:14px; padding:18px 26px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5; }
.topbar-title h2{ font-size:1.3rem; }
.topbar-title p{ margin:0; color:var(--muted); font-size:.85rem; }
.topbar-actions{ margin-left:auto; }
.only-mobile{ display:none; }

.views{ padding:24px 26px 60px; max-width:1180px; margin:0 auto; }
.view{ display:none; animation:fadein .25s ease; }
.view.active{ display:block; }
@keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ===================== PANELES / TARJETAS ===================== */
.panel{ background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:20px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }

.hero-panel{ display:flex; gap:24px; align-items:center; justify-content:space-between; background:linear-gradient(135deg, rgba(138,90,124,.18), rgba(227,168,87,.12)); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-bottom:20px; flex-wrap:wrap; }
.hero-copy{ flex:1; min-width:260px; }
.hero-copy h3{ font-size:1.5rem; max-width:520px; }
.hero-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.hero-score{ text-align:center; position:relative; width:160px; }
.score-ring{ width:160px; height:160px; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--line); stroke-width:12; }
.ring-fill{ fill:none; stroke:url(#none); stroke:var(--gold); stroke-width:12; stroke-linecap:round; 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-size:1.8rem; font-family:var(--font-display); }
.score-label span{ font-size:.72rem; color:var(--muted); max-width:100px; }

.cards-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.stat-card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; display:flex; flex-direction:column; gap:4px; }
.stat-value{ font-family:var(--font-display); font-size:1.5rem; color:var(--gold-2); }
.stat-label{ font-size:.78rem; color:var(--muted); }

.chips-row{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{ background:var(--bg-panel-2); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:.82rem; cursor:pointer; }
.chip-on{ background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#20140A; border-color:transparent; font-weight:700; }

/* ===================== FORMULARIOS ===================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--muted); }
.form-grid label.full{ grid-column:1/-1; }
.form-grid input, .form-grid select, .form-grid textarea{ background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px 12px; font-size:.95rem; }
.form-grid input[type=range]{ padding:0; }
.form-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.form-actions.full{ grid-column:1/-1; }
.chips-select{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-check{ background:var(--bg-panel-2); border:1px solid var(--line); border-radius:999px; padding:7px 12px; font-size:.8rem; display:flex; align-items:center; gap:6px; cursor:pointer; }
.chip-check input{ accent-color:var(--gold); }

.filters-bar{ display:flex; gap:14px; flex-wrap:wrap; align-items:end; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin-bottom:18px; }
.filters-bar label{ display:flex; flex-direction:column; gap:5px; font-size:.78rem; color:var(--muted); }
.filters-bar input, .filters-bar select{ background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:7px 10px; }

/* ===================== TABLAS ===================== */
.table-wrap{ overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.data-table th, .data-table td{ padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.data-table th{ color:var(--muted); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }

/* ===================== MÉTODO 5 PARTES ===================== */
.metodo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:14px 0; }
.metodo-card{ display:flex; flex-direction:column; gap:6px; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; cursor:pointer; position:relative; }
.metodo-card input{ position:absolute; top:14px; right:14px; width:18px; height:18px; accent-color:var(--gold); }
.metodo-card.on{ border-color:var(--gold); background:linear-gradient(135deg, rgba(227,168,87,.14), transparent); }
.metodo-ico{ font-size:1.5rem; }
.metodo-letra{ font-size:.7rem; color:var(--gold-2); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.progress-bar-lg{ height:10px; background:var(--bg-panel-2); border-radius:999px; overflow:hidden; margin-top:10px; }
.progress-fill-lg{ height:100%; background:linear-gradient(90deg,var(--gold-2),var(--plum)); width:0%; transition:width .4s; }

/* ===================== RITUALES ===================== */
.routine-blocks{ display:flex; flex-direction:column; gap:8px; }
.check-row{ display:flex; align-items:center; gap:10px; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:.9rem; }
.check-row input{ width:18px; height:18px; accent-color:var(--gold); }
.checklist{ display:grid; gap:8px; }
.ritual-timer{ text-align:center; }
.timer-display{ font-family:var(--font-display); font-size:3rem; margin:10px 0; color:var(--gold-2); }
.timer-controls{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.timer-controls select{ background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:8px 12px; }

/* ===================== HÁBITOS ===================== */
.habit-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.habit-chip{ display:flex; align-items:center; gap:8px; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:999px; padding:10px 16px; cursor:pointer; font-size:.88rem; }
.habit-chip input{ accent-color:var(--gold); }
.habit-chip.on{ border-color:var(--gold); background:linear-gradient(135deg, rgba(227,168,87,.16), transparent); }
.habit-list{ display:flex; flex-direction:column; gap:8px; }
.habit-row{ display:flex; align-items:center; justify-content:space-between; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; }

/* ===================== DIAGNÓSTICO ===================== */
.diag-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.diag-card{ background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; display:flex; flex-direction:column; gap:8px; }
.diag-pregunta{ margin-bottom:16px; }
.diag-opciones{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.diag-opciones label{ display:flex; align-items:center; gap:6px; font-size:.85rem; }

/* ===================== AUDIOS / AMBIENTE ===================== */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.media-card{ display:flex; flex-direction:column; gap:8px; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; }
.player{ display:flex; flex-direction:column; gap:12px; }
.player-controls{ display:flex; align-items:center; gap:10px; }
.player-controls input[type=range]{ flex:1; }
.ambient-grid{ display:flex; gap:12px; flex-wrap:wrap; }
.ambient-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 20px; font-size:1.4rem; color:var(--text); }
.ambient-btn.on{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(227,168,87,.25) inset; }
.ambient-btn span{ font-size:.72rem; color:var(--muted); }

/* ===================== BIBLIOTECA ===================== */
.accordion{ display:flex; flex-direction:column; gap:10px; }
.acc-item{ background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.acc-item summary{ padding:14px 18px; cursor:pointer; font-family:var(--font-display); font-weight:600; color:var(--gold-2); }
.acc-body{ padding:0 18px 16px; display:flex; flex-direction:column; gap:16px; }
.cap-card{ border-top:1px solid var(--line); padding-top:14px; }
.cap-card .practica{ color:var(--gold-2); font-size:.88rem; }
.nota-cap{ width:100%; min-height:70px; background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px; font-family:inherit; margin-top:6px; }

/* ===================== INFORMES ===================== */
.report-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:14px; }
.report-grid label{ display:flex; flex-direction:column; gap:5px; font-size:.8rem; color:var(--muted); }
.report-grid input, .report-grid select{ background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 10px; }
.pdf-preview{ font-size:.85rem; }

/* ===================== CONFIG ===================== */
.theme-choice{ display:flex; gap:10px; }

/* ===================== TOAST ===================== */
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:#20140A; color:#F4C468; border:1px solid var(--gold); padding:12px 20px; border-radius:999px; font-size:.88rem; font-weight:700; opacity:0; pointer-events:none; transition:.25s; z-index:50; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

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

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px){
  .sidebar{ position:fixed; left:0; top:0; z-index:30; transform:translateX(-100%); transition:.25s; }
  .sidebar.open{ transform:translateX(0); }
  .only-mobile{ display:inline-flex; }
  .form-grid{ grid-template-columns:1fr; }
  .hero-panel{ flex-direction:column; align-items:stretch; }
}