:root{--bg: #0b0d12;--bg-panel: #12151c;--bg-panel-2: #171b24;--border: #232733;--text: #e6e8ec;--text-muted: #8b93a3;--accent: #4f7cff;--rojo: #ef4444;--amarillo: #f5a524;--verde: #22c55e;--radius: 10px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px}.app-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}.app-shell.con-panel{grid-template-columns:220px 1fr 320px}.sidebar{background:var(--bg-panel);border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column}.sidebar .logo{font-weight:700;font-size:16px;letter-spacing:.5px;padding:6px 8px 2px}.sidebar .agencia-nombre{font-size:12px;color:var(--text-muted);padding:0 8px 16px}.sidebar nav{display:flex;flex-direction:column;gap:2px}.sidebar .nav-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--radius);color:var(--text-muted);text-decoration:none;cursor:pointer;font-size:13.5px}.sidebar .nav-item:hover{background:var(--bg-panel-2);color:var(--text)}.sidebar .nav-item.activo{background:var(--accent);color:#fff}.badge{background:var(--rojo);color:#fff;font-size:11px;font-weight:600;border-radius:999px;padding:1px 7px}.sidebar .seccion-titulo{font-size:11px;text-transform:uppercase;color:var(--text-muted);margin:16px 8px 6px;letter-spacing:.5px}.sidebar .usuario-actual{margin-top:auto;padding:10px 8px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted)}.sidebar .usuario-actual button{margin-top:6px;width:100%}.contenido{padding:20px 24px;overflow-x:auto}.topbar-stats{display:flex;gap:12px;margin-bottom:16px}.stat-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;min-width:110px}.stat-card .valor{font-size:22px;font-weight:700}.stat-card .etiqueta{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}.stat-card.rojo .valor{color:var(--rojo)}.stat-card.amarillo .valor{color:var(--amarillo)}.stat-card.verde .valor{color:var(--verde)}.filtros-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}.filtros-bar select,.filtros-bar button.tab{background:var(--bg-panel);border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius);padding:7px 12px;font-size:13px;cursor:pointer}.filtros-bar button.tab.activo{background:var(--accent);color:#fff;border-color:var(--accent)}table.tabla-index{width:100%;border-collapse:collapse;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}table.tabla-index th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--text-muted);padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}table.tabla-index td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;white-space:nowrap}table.tabla-index tbody tr{cursor:pointer}table.tabla-index tbody tr:hover{background:var(--bg-panel-2)}table.tabla-index tbody tr.seleccionada{background:#4f7cff2e}.punto{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.punto.rojo{background:var(--rojo)}.punto.amarillo{background:var(--amarillo)}.punto.verde{background:var(--verde)}.punto.apagado{background:#3a3f4b}.pill{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}.pill.rojo{background:#ef444426;color:var(--rojo)}.pill.amarillo{background:#f5a52426;color:var(--amarillo)}.pill.verde{background:#22c55e26;color:var(--verde)}.pill.gris{background:#8b93a326;color:var(--text-muted)}.panel-detalle{background:var(--bg-panel);border-left:1px solid var(--border);padding:18px;overflow-y:auto}.panel-detalle h2{font-size:15px;margin:0 0 2px}.panel-detalle .subtitulo{color:var(--text-muted);font-size:12px;margin-bottom:14px}.panel-detalle .aviso-urgente{background:#ef444426;color:var(--rojo);padding:8px 10px;border-radius:var(--radius);font-size:12.5px;font-weight:600;margin-bottom:16px}.panel-detalle .grupo{margin-bottom:18px}.panel-detalle .grupo-titulo{font-size:11px;text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;margin-bottom:8px}.campo-fila{display:flex;justify-content:space-between;padding:4px 0;font-size:13px}.campo-fila .etiqueta{color:var(--text-muted)}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}.login-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:32px;width:340px}.login-card h1{font-size:20px;margin-bottom:4px}.login-card .subtitulo{color:var(--text-muted);font-size:13px;margin-bottom:24px}input,select{width:100%;background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text);padding:9px 10px;border-radius:var(--radius);font-size:13.5px;margin-bottom:12px}button{background:var(--accent);color:#fff;border:none;padding:9px 14px;border-radius:var(--radius);font-size:13.5px;cursor:pointer}button.secundario{background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text)}button:disabled{opacity:.6;cursor:not-allowed}.error-msg{color:var(--rojo);font-size:12.5px;margin-bottom:12px}.vacio{color:var(--text-muted);padding:24px;text-align:center}