/* assets/style.css */
:root{
  --bg:#0b0f16;
  --card:#0f1626;
  --text:#e8edf5;
  --mut:#9aa4b2;
  --accent:#8b5cf6;
  --radius:18px;
  --border:#1c2233;
}
:root[data-theme='light']{
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#0f1422;
  --mut:#57607a;
  --accent:#6b4de6;
  --border:#e6e8ee;
}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(139,92,246,.12), transparent),
    radial-gradient(1200px 600px at 90% 0%, rgba(6,182,212,.12), transparent),
    #070a12;
  background-attachment: fixed;
  position: relative;
}
/* Constellations (subtle SVG overlay) */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; opacity:.25;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800"><g fill="none" stroke="%23a0aec0" stroke-opacity="0.35" stroke-width="0.6"><path d="M50 40 L120 90 L180 60 L260 120 L340 80 L420 140"/><circle cx="50" cy="40" r="1.6" fill="%23ffffff"/><circle cx="120" cy="90" r="1.6" fill="%23ffffff"/><circle cx="180" cy="60" r="1.6" fill="%23ffffff"/><circle cx="260" cy="120" r="1.6" fill="%23ffffff"/><circle cx="340" cy="80" r="1.6" fill="%23ffffff"/><circle cx="420" cy="140" r="1.6" fill="%23ffffff"/></g><g fill="none" stroke="%2399f6e4" stroke-opacity="0.25" stroke-width="0.6"><path d="M860 180 L920 220 L980 180 L1040 240"/><circle cx="860" cy="180" r="1.6" fill="%23ffffff"/><circle cx="920" cy="220" r="1.6" fill="%23ffffff"/><circle cx="980" cy="180" r="1.6" fill="%23ffffff"/><circle cx="1040" cy="240" r="1.6" fill="%23ffffff"/></g></svg>');
  background-size: cover;
}
[data-theme='light'] body::before{ opacity:.1; }

.container{max-width:1100px;margin:0 auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;margin:8px 0 18px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:50%;background:conic-gradient(from 0deg,#f59e0b,#8b5cf6,#06b6d4,#22c55e,#f59e0b);box-shadow:0 6px 24px rgba(139,92,246,.35)}
.title{font-weight:800;letter-spacing:.3px}
.subtitle{color:var(--mut);font-size:13px;margin-top:2px}

.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media (max-width:900px){.grid{grid-template-columns:1fr;}}

.card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--radius);padding:18px;backdrop-filter: blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
[data-theme='light'] .card{background:#fff;box-shadow:0 24px 60px rgba(16,24,40,.06)}

.card h2{margin:0 0 8px;font-size:18px}
.mut{color:var(--mut)}
label{font-size:13px;color:var(--mut);display:block;margin:6px 0}
input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--border);background:#0c1322;color:var(--text)}
[data-theme='light'] input{background:#fff;color:#0f1422}
input:focus{outline:none;box-shadow:0 0 0 2px rgba(139,92,246,.35);border-color:#6b4de6}
.hint{font-size:12px;color:var(--mut)}
.actions{display:flex;gap:10px;align-items:center}
.btn{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-weight:700}
.btn.primary{background:linear-gradient(90deg,#8b5cf6,#06b6d4);border:none;color:#fff}

.badge{display:inline-flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.04)}
.sign-emoji{font-size:18px}

.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.kpi .item{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:12px}
.kpi .lab{font-size:12px;color:var(--mut)}
.kpi .val{font-size:18px;font-weight:800}

.daily{margin-top:10px;display:grid;gap:10px}
.toast{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:12px}
.toast h4{margin:0 0 6px}
/* Botones/enlaces tipo .pill */
.pill {
  color: #fff; /* texto blanco */
  background: linear-gradient(90deg, #8b5cf6, #06b6d4); /* violeta → celeste */
  border: none;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
}

.pill:hover {
  background: linear-gradient(90deg, #06b6d4, #8b5cf6); /* invertido al pasar mouse */
  transform: scale(1.05);
}
/* Inputs full width dentro de las cards */
.card input,
.card select,
.card textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;   /* respeta padding/border dentro del ancho */
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0c1322;
  color: var(--text);
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
}

.card input:focus,
.card select:focus,
.card textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4); /* efecto glow al focus */
}