:root{--bg:#0b0d10;--text:#e8eef2;--card:#161a1f;--acc:#88aadd;--muted:#9aa7b0;--border:#28303a}
[data-theme="light"]{--bg:#ffffff;--text:#0b0d10;--card:#f1f3f5;--acc:#06c;--muted:#47525d;--border:#d5d9df}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--acc);text-decoration:none}
.container{max-width:1140px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border-radius:14px;padding:16px;border:1px solid var(--border);box-shadow:0 2px 14px rgba(0,0,0,.25)}
.hk-footer{padding:24px;color:var(--muted);text-align:center}

/* Topbar */
.hk-topbar{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 16px;background:var(--card);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border)}
.brand{font-weight:700}
.hk-actions{display:flex;align-items:center;gap:8px}
.hk-actions select{height:34px;padding:6px 28px 6px 10px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:10px}

/* Drawer */
.hk-drawer-toggle{appearance:none;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer}
.hk-drawer{position:fixed;inset:0 40% 0 0;max-width:320px;background:var(--card);transform:translateX(-100%);transition:.2s transform ease;box-shadow:2px 0 22px rgba(0,0,0,.35);border-right:1px solid var(--border);z-index:60}
.hk-drawer.open{transform:translateX(0)}
.hk-drawer .menu{list-style:none;margin:0;padding:12px}
.hk-drawer .menu li{margin:2px 0}
.hk-drawer .menu a{display:block;padding:10px 12px;border-radius:10px;color:var(--text)}
.hk-drawer .menu a:hover{background:#1d2330}

/* Formularios oscuros */
[data-theme="dark"]{color-scheme:dark}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select,[data-theme="dark"] button{background:var(--card);color:var(--text);border:1px solid var(--border);outline:none;border-radius:10px}
[data-theme="dark"] select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),linear-gradient(135deg, var(--muted) 50%, transparent 50%),linear-gradient(to right, transparent, transparent);background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%,0 0;background-size:6px 6px,6px 6px,100% 100%;background-repeat:no-repeat;padding-right:28px}