:root{--p:#7a1f5c;--p2:#a33a80;--f:#f6f4f7;--t:#1f1a22;--m:#6d6573;--b:#e3dde6;--ok:#1d7a46;--okf:#e5f5ec;--er:#b3261e;--erf:#fdecea;--av:#8a5a00;--avf:#fff4dc;--card:#fff}
@media (prefers-color-scheme:dark){:root{--f:#151217;--t:#eee8f0;--m:#a59cab;--b:#332c38;--card:#1e1a22;--okf:#12301f;--erf:#3a1715;--avf:#33270d;--p2:#d77fb8}}
*{box-sizing:border-box}body{margin:0;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--f);color:var(--t)}
a{color:var(--p2)}header{background:var(--p);color:#fff;position:sticky;top:0;z-index:5}
.barra{display:flex;align-items:center;gap:12px;padding:8px 16px;max-width:1200px;margin:auto;flex-wrap:wrap}
.marca{font-weight:700;color:#fff;text-decoration:none;font-size:18px}
nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}nav a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:8px;font-size:15px}
nav a.activo,nav a:hover{background:rgba(255,255,255,.18)}.usuario{font-size:13px;opacity:.9}.usuario button{background:none;border:1px solid #fff8;color:#fff;border-radius:6px;padding:2px 8px;cursor:pointer}
main{max-width:1200px;margin:auto;padding:16px}h1{font-size:24px;margin:4px 0 12px}h2{font-size:18px;margin:20px 0 8px}
.card{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:14px;margin-bottom:12px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:14px}th,td{padding:8px;border-bottom:1px solid var(--b);text-align:left;vertical-align:top}th{color:var(--m);font-weight:600}
.tabla{overflow-x:auto;border:1px solid var(--b);border-radius:12px}
.btn,button{display:inline-block;background:var(--p);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-size:15px;cursor:pointer;text-decoration:none}
.btn.sec,button.sec{background:transparent;color:var(--p2);border:1px solid var(--p2)}.btn.peq,button.peq{padding:4px 10px;font-size:13px}
button.peligro{background:var(--er)}
input,select,textarea{font:inherit;padding:8px;border:1px solid var(--b);border-radius:8px;background:var(--card);color:var(--t);max-width:100%}
form p,form div.campo{margin:0 0 10px}label{display:block;font-weight:600;font-size:14px;margin-bottom:3px}
.helptext,.ayuda{display:block;color:var(--m);font-size:13px}ul.errorlist{color:var(--er);margin:4px 0;padding-left:18px}
.msg{padding:10px 14px;border-radius:10px;margin-bottom:10px}.msg.success{background:var(--okf);color:var(--ok)}.msg.error{background:var(--erf);color:var(--er)}
.msg.warning,.msg.info{background:var(--avf);color:var(--av)}
.etq{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:var(--b);color:var(--t);white-space:nowrap}
.etq.ok{background:var(--okf);color:var(--ok)}.etq.er{background:var(--erf);color:var(--er)}.etq.av{background:var(--avf);color:var(--av)}
.demo{background:#ffe9a8;color:#5c4300}.muted{color:var(--m)}.num{font-size:28px;font-weight:700}
.fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.derecha{margin-left:auto}
.res{font-size:22px;padding:18px;border-radius:12px;text-align:center}.res.ok{background:var(--okf);color:var(--ok)}.res.error{background:var(--erf);color:var(--er)}
pre.mensaje{white-space:pre-wrap;background:var(--f);padding:10px;border-radius:8px;border:1px dashed var(--b)}
@media (max-width:640px){nav a{padding:6px 8px;font-size:14px}main{padding:12px}h1{font-size:21px}}