/* The page's skeleton, in both of its states — signed out and signed in.
 *
 * `vivp-admin.html`'s `<style>` block, from the reset through PAGE SECTIONS:
 * the reset and `body`, the one animation, the LOGIN screen, `#app` and the
 * grid, the SIDEBAR, the MAIN column and its topbar, and the two rules that
 * make one `.page-section` visible at a time.
 *
 * **Copied unchanged — every declaration, every value, in the demo's own
 * order, with the demo's own section comments** (plan §8: the markup and every
 * CSS rule are copied; only the tag boundaries move). The `<style>` tag is the
 * boundary that moved. Nothing is added and nothing is reordered, and
 * `tests/css.test.js` compares this file, `components.css` and `responsive.css`
 * — concatenated in the order `index.html` links them — against the demo's
 * block rule for rule and in sequence. That sequence is the cascade: two rules
 * of equal specificity are decided by which came first, so a split that
 * reordered them could change the rendering with every rule still present.
 *
 * The login screen is here rather than in a `login.css` of its own for the
 * same reason: it sits between `body` and `#app` in the demo, and lifting it
 * out would break the run. It belongs with the skeleton anyway — it is the
 * shell's other state, and FE-02 is the ticket that owns both.
 */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* LOGIN */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:48px 40px;width:100%;max-width:420px;animation:fadeUp 0.6s ease}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:32px;letter-spacing:-1px;margin-bottom:4px}
.logo span{color:var(--accent)}
.login-sub{color:var(--text2);font-size:13px;margin-bottom:36px}
.fl{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--text2);margin-bottom:8px}
.fi{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 16px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color .2s;margin-bottom:20px}
.fi:focus{border-color:var(--accent)}
.btn-p{width:100%;background:var(--accent);color:#0a0f1a;border:none;border-radius:10px;padding:14px;font-family:'Syne',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s;margin-top:4px}
.btn-p:hover{background:#00bfa0;transform:translateY(-1px)}
.login-note{margin-top:20px;text-align:center;font-size:12px;color:var(--text3)}

/* APP */
#app{display:none}
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}

/* SIDEBAR */
.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:28px 20px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:24px;letter-spacing:-0.5px;margin-bottom:32px;padding:0 8px}
.sb-logo span{color:var(--accent)}
.nav-sec{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);font-weight:500;padding:0 8px;margin-bottom:8px;margin-top:20px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13.5px;color:var(--text2);cursor:pointer;transition:all .15s;margin-bottom:2px}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:rgba(0,212,170,0.1);color:var(--accent);font-weight:500}
.nav-icon{font-size:16px;width:20px;text-align:center}
.nav-badge{margin-left:auto;background:var(--danger);color:white;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px}
.sb-building{margin-top:auto;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.sb-blbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1px}
.sb-bname{font-size:13px;font-weight:500;color:var(--text);margin-top:2px}
.sb-bperiod{font-size:11px;color:var(--accent);margin-top:2px}

/* MAIN */
.main{background:var(--bg);overflow-y:auto}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.page-title{font-family:'Syne',sans-serif;font-weight:700;font-size:18px}
.topbar-r{display:flex;align-items:center;gap:12px}
.period-badge{background:rgba(0,212,170,0.1);border:1px solid rgba(0,212,170,0.2);color:var(--accent);padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500}
.informe-btn{background:rgba(14,165,233,0.1);border:1px solid rgba(14,165,233,0.3);color:var(--accent2);padding:6px 14px;border-radius:8px;font-size:12px;font-family:'Syne',sans-serif;font-weight:700;cursor:pointer}
.informe-btn:hover{background:rgba(14,165,233,0.2)}
.avatar{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:700;font-size:13px;color:#0a0f1a;cursor:pointer}
.content{padding:32px}

/* PAGE SECTIONS */
.page-section{display:none}
.page-section.active{display:block}