:root{--atreus:#434961}*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial;background:#fff;color:#111}
.top-bar{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:var(--atreus);color:#fff}
.top-bar .left{display:flex;align-items:center;gap:10px}.logo{height:48px}.title{font-weight:600}.theme-toggle{background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer}
.admin-badge{margin-right:10px;background:#22c55e;color:#fff;padding:2px 8px;border-radius:999px;font-size:12px}
.tabs{display:flex;border-bottom:2px solid #e5e7eb}.tab-btn{background:#e5e7eb;border:none;padding:10px 14px;cursor:pointer}.tab-btn.active{background:#fff;font-weight:700}.tab-section{padding:12px}
.toolbar{display:flex;gap:10px;margin-bottom:10px}.btn-primary{background:#0d6efd;border:none;color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer}.btn-primary:hover{filter:brightness(.95)}
.btn-secondary{background:#e5e7eb;border:1px solid #d1d5db;color:#111;padding:8px 12px;border-radius:6px;cursor:pointer}.btn-secondary:hover{filter:brightness(0.98)}
.add-btn{display:none}.admin-mode .add-btn{display:inline-block}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;align-items:center}.search-input,.filter-select{padding:6px;border:1px solid #d1d5db;border-radius:6px}
.clear-btn{margin-left:auto}
.table-container{width:100%;overflow:auto}table{width:100%;border-collapse:collapse}th,td{border:1px solid #e5e7eb;padding:8px;text-align:left}thead th{background:#f3f4f6}.actions{white-space:nowrap;text-align:center}.actions i{cursor:pointer;margin:0 6px}
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;overflow:auto}.modal-content{background:#fff;color:#111;max-width:680px;width:92%;margin:6% auto;padding:18px;border-radius:10px}
.modal-content label{display:block;margin:8px 0}.modal-content input,.modal-content select{width:100%;padding:7px;border:1px solid #d1d5db;border-radius:6px}.modal-actions{display:flex;gap:8px;margin-top:12px}
.btn-close{background:#6c757d;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer}.error-msg{color:#dc2626;margin-top:8px}
body.dark-mode{background:#111827;color:#e5e7eb}body.dark-mode thead th{background:#1f2937}body.dark-mode th,body.dark-mode td{border-color:#374151}body.dark-mode .tab-btn{background:#374151;color:#e5e7eb}body.dark-mode .tab-btn.active{background:#1f2937}body.dark-mode .modal-content{background:#111827;color:#e5e7eb}

/* === Indicadores y contador === */
.count-badge{display:inline-block;margin-right:8px;padding:4px 8px;border-radius:999px;border:1px solid #d1d5db;background:#f3f4f6;color:#111;font-size:12px;font-weight:600}
body.dark-mode .count-badge{border-color:#374151;background:#1f2937;color:#e5e7eb}

td.indicadores{white-space:normal}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid transparent}
.pill-muted{background:#e5e7eb;border-color:#d1d5db;color:#111}
.pill-green{background:#22c55e20;border-color:#16a34a;color:#166534}
.pill-red{background:#ef444420;border-color:#dc2626;color:#7f1d1d}
.pill-maroon{background:#7f1d1d20;border-color:#7f1d1d;color:#7f1d1d}
.pill-blue{background:#3b82f620;border-color:#2563eb;color:#1e40af}
.pill-amber{background:#f59e0b20;border-color:#d97706;color:#92400e}
body.dark-mode .pill-muted{background:#374151;border-color:#4b5563;color:#e5e7eb}
body.dark-mode .pill-green{background:#052e1520;border-color:#22c55e;color:#22c55e}
body.dark-mode .pill-red{background:#2f0b0b;border-color:#ef4444;color:#ef4444}
body.dark-mode .pill-maroon{background:#2f0b0b;border-color:#b91c1c;color:#fca5a5}
body.dark-mode .pill-blue{background:#0b1f3a;border-color:#60a5fa;color:#93c5fd}
body.dark-mode .pill-amber{background:#2a1a07;border-color:#f59e0b;color:#fbbf24}

/* === Toggle columnas avanzadas === */
.switch-adv{display:inline-flex;align-items:center;gap:6px;margin:0 10px;font-size:14px}

#hostSection.hidden-adv .advanced-col{display:none!important}

#comSection.hidden-adv .advanced-col{display:none!important}

/* v12 sorting indicators */
th.sortable::after{content:' \25B4\25BE'; font-size:0.8em; opacity:0.5}
th.sorted-asc::after{content:' \25B4';}
th.sorted-desc::after{content:' \25BE';}