/**
 * evsk-theme.css
 * EV Skylinner · Sistema de diseño compartido
 * Poppins (títulos) + Hanken Grotesk (cuerpo) + JetBrains Mono (cifras/folios)
 * Primario #004231 · Secundario #54938b · Neutro #e6e6e6 · Fondo #FFFFFF
 */

:root {
  --g: #004231; --gs: #54938b; --neutral: #e6e6e6; --am: #E8A838;
  --bg: #FFFFFF; --cb: #FFFFFF; --tx: #12201b; --mu: #5f7d75; --bd: #e6e6e6; --bdl: #eeeeee;
  --sh: 0 1px 4px rgba(0,66,49,.06), 0 4px 16px rgba(0,66,49,.06);
  --sh-active: 0 0 0 3px rgba(0,66,49,.12), 0 10px 26px rgba(0,66,49,.16);
}
[data-theme="dark"] {
  --bg: #101915; --cb: #17231d; --tx: #E8F0EE; --mu: #8FB0A8; --bd: #28362f; --bdl: #1e2b25;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--tx); font-family: 'Hanken Grotesk', sans-serif; }
h1, h2, h3, h4, .brand-font { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: -.01em; }
.mono { font-family: 'JetBrains Mono', monospace; }

.topbar { background: linear-gradient(135deg, #001f17, var(--g)); color: #fff; padding: .75rem 1.25rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 50; box-shadow: var(--sh); }
.icon-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 9px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.icon-btn:hover { background: rgba(255,255,255,.18); }

.layout { display: flex; min-height: calc(100vh - 62px); }
.sidebar { width: 260px; flex-shrink: 0; background: linear-gradient(180deg, var(--g) 0%, #00301f 100%); padding: 1.25rem .75rem; position: sticky; top: 62px; height: calc(100vh - 62px); overflow-y: auto; }
.step-link, .nav-link-evsk { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.65); text-decoration: none; font-size: .85rem; padding: .55rem .7rem; border-radius: 9px; margin-bottom: .15rem; }
.step-link:hover, .nav-link-evsk:hover { background: rgba(255,255,255,.06); color: #fff; }
.step-link.active, .nav-link-evsk.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.nav-section-label { color: rgba(255,255,255,.4); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding: 1rem .7rem .3rem; }

.main { flex: 1; padding: 1.75rem 1.75rem 3rem; max-width: 1000px; }

.card-evsk { background: var(--cb); border: 1px solid var(--bd); border-radius: 14px; padding: 1.6rem; margin-bottom: 1.5rem; box-shadow: var(--sh); }
label.form-label { font-size: .82rem; font-weight: 600; }
.form-control, .form-select { background: var(--bg); border: 1px solid var(--bd); color: var(--tx); border-radius: 9px; }
.form-control:focus, .form-select:focus { border-color: var(--gs); box-shadow: 0 0 0 3px rgba(84,147,139,.18); background: var(--cb); color: var(--tx); }

.btn-brand { background: var(--g); border-color: var(--g); color: #fff; border-radius: 9px; font-weight: 600; }
.btn-brand:hover { background: var(--gs); border-color: var(--gs); color: #fff; }
.btn-brand:disabled { opacity: .6; }
.btn-outline-brand { border: 1px solid var(--g); color: var(--g); border-radius: 9px; font-weight: 600; background: transparent; }
[data-theme="dark"] .btn-outline-brand { color: var(--am); border-color: var(--am); }
.btn-outline-brand:hover { background: var(--g); color: #fff; }

.value-pill { font-family: 'JetBrains Mono', monospace; background: var(--bdl); color: var(--g); border-radius: 50px; padding: .15rem .7rem; font-size: .78rem; font-weight: 700; }
[data-theme="dark"] .value-pill { color: var(--am); }

.toast-err { position: fixed; top: 80px; right: 20px; background: #fbeceb; border: 1px solid #e0968f; color: #8a3a32; padding: .75rem 1rem; border-radius: 9px; font-size: .85rem; max-width: 320px; z-index: 100; display: none; }
.toast-err.show { display: block; }
.toast-ok { position: fixed; top: 80px; right: 20px; background: #e9f2f0; border: 1px solid var(--gs); color: var(--g); padding: .75rem 1rem; border-radius: 9px; font-size: .85rem; max-width: 320px; z-index: 100; display: none; }
[data-theme="dark"] .toast-ok { background: #173028; color: var(--am); }
.toast-ok.show { display: block; }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: -280px; top: 62px; z-index: 60; transition: .25s; }
  .sidebar.open { left: 0; }
  .main { max-width: 100%; }
}