:root{--bg:#f4f6f9;--card:#fff;--tx:#1e293b;--mut:#64748b;--bd:#e2e8f0;--pri:#1d4ed8;--ok:#16a34a;--err:#dc2626;--top:#0f172a}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--tx)}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 16px}h3{margin:0 0 12px}
.top{display:flex;align-items:center;gap:24px;background:var(--top);color:#cbd5e1;padding:0 20px;height:52px}
.brand{color:#fff;font-weight:700;font-size:16px}.brand span{color:#60a5fa;font-weight:400}
.top nav{display:flex;gap:4px;flex:1}
.top nav a{color:#cbd5e1;padding:6px 12px;border-radius:6px}
.top nav a.on,.top nav a:hover{background:#1e293b;color:#fff;text-decoration:none}
.who{display:flex;align-items:center;gap:10px}.who a{color:#fff}
main{max-width:1200px;margin:24px auto;padding:0 16px}
main.center{display:flex;justify-content:center;align-items:center;min-height:80vh}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:20px;margin-bottom:16px}
.card.narrow{max-width:460px}
.login{width:100%;max-width:360px}.login h1{text-align:center}.login h1 span{color:var(--pri);font-weight:400}
label{display:block;margin-bottom:12px;font-weight:500}
label.check{display:flex;gap:8px;align-items:center}
input,select{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--bd);border-radius:6px;font:inherit;background:#fff}
input[type=checkbox]{width:auto;margin:0}input[type=color]{height:38px;padding:2px}
.btn{display:inline-block;padding:8px 14px;border:1px solid var(--bd);border-radius:6px;background:#fff;color:var(--tx);cursor:pointer;font:inherit}
.btn:hover{text-decoration:none;background:#f1f5f9}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}.btn.primary:hover{background:#1e40af}
.btn.danger{color:var(--err);border-color:#fecaca}
button.link{background:none;border:0;padding:0;color:var(--pri);cursor:pointer;font:inherit}
.who button.link{color:#94a3b8}
.danger-text{color:var(--err)!important}.ok-text{color:var(--ok)}
form.inline{display:inline}
.flash{padding:10px 14px;border-radius:6px;margin-bottom:16px;border:1px solid}
.flash.ok{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.flash.error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.flash.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.muted{color:var(--mut)}.small{font-size:12px}.nowrap{white-space:nowrap}
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.tbl th,.tbl td{padding:8px 12px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}
.tbl th{background:#f8fafc;font-weight:600;font-size:12px;text-transform:uppercase;color:var(--mut)}
.acciones{white-space:nowrap}.acciones>*{margin-left:10px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--bd);margin-bottom:16px}
.tabs a{padding:8px 14px;color:var(--mut);border-bottom:2px solid transparent}
.tabs a.on{color:var(--pri);border-color:var(--pri)}
.toolbar{margin-bottom:12px}
.row{display:flex;gap:12px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.rol{font-size:11px;padding:2px 8px;border-radius:10px;text-transform:uppercase;font-weight:600}
.rol-admin{background:#fee2e2;color:#991b1b}.rol-usuario{background:#dbeafe;color:#1e40af}.rol-lectura{background:#e2e8f0;color:#334155}
.acc{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600}
.acc-crear{background:#dcfce7;color:#166534}.acc-editar{background:#dbeafe;color:#1e40af}.acc-eliminar{background:#fee2e2;color:#991b1b}
.acc-login{background:#f1f5f9;color:#475569}.acc-seguridad{background:#fef3c7;color:#92400e}
.old{color:var(--err);text-decoration:line-through}.new{color:var(--ok)}
.swatch{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:middle;border:1px solid var(--bd)}
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.filtros input,.filtros select{width:auto;margin:0}
.pager{display:flex;gap:16px;justify-content:center;margin:16px 0}
.qr{display:block;margin:12px auto;width:200px;height:200px}
@media (max-width:800px){.grid2{grid-template-columns:1fr}.top{flex-wrap:wrap;height:auto;padding:8px 16px}}