*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:#f4f1ea;color:#1d2a2a}
.demo{position:fixed;bottom:8px;left:8px;background:#0008;color:#fff;font-size:11px;padding:3px 8px;border-radius:10px;z-index:9}
header{background:#0f3d3e;color:#fff;padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
header h1{font-size:18px;margin:0;flex:1}header select,header button{padding:6px 8px;border-radius:8px;border:0}
.role{background:#e8b04a;color:#1d2a2a;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700}
main{max-width:1100px;margin:auto;padding:14px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 1px 4px #0001;margin-bottom:12px}
h2{font-size:16px;margin:4px 0 10px;color:#0f3d3e}
.btn{background:#0f3d3e;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-size:14px;cursor:pointer;transition:.2s}
.btn.gold{background:#e8b04a;color:#1d2a2a}.btn.red{background:#b23b3b}.btn.sm{padding:5px 9px;font-size:12px}.btn.wa{background:#25d366}
.btn.ok{background:#2e9e5b;transform:scale(1.05)}.btn:disabled{opacity:.4}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.on{background:#2e9e5b}.off{background:#b23b3b}
.bat{height:6px;background:#ddd;border-radius:3px;margin:6px 0}.bat i{display:block;height:100%;border-radius:3px}
small,.mut{color:#667}table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:6px;border-bottom:1px solid #eee;text-align:left}
.tag{padding:2px 7px;border-radius:8px;font-size:11px}.activa{background:#d5f2df}.futura{background:#dde8fa}.vencida,.revocada{background:#f6d8d8}
input,select{padding:8px;border:1px solid #ccd;border-radius:8px;font-size:14px;width:100%}form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:8px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.tabs button{background:#fff;border:1px solid #ccd;border-radius:20px;padding:6px 12px;cursor:pointer}.tabs .act{background:#0f3d3e;color:#fff}
.toast{position:fixed;top:14px;right:14px;background:#2e9e5b;color:#fff;padding:10px 16px;border-radius:10px;animation:f 2.5s forwards;z-index:10}@keyframes f{0%{opacity:0;transform:translateY(-10px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}
.login{max-width:420px;margin:60px auto;text-align:center}.login .u{display:block;width:100%;margin:8px 0;text-align:left}
.pinbox{font-size:40px;letter-spacing:8px;font-weight:800;text-align:center;color:#0f3d3e;margin:8px 0}
.scroll{overflow-x:auto}
header select{width:auto;flex:0 0 auto}