:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1c2430;
  --muted: #667085;
  --border: #d9dee5;
  --primary: #3d6fa8;
  --primary-hover: #335f91;
  --primary-text: #ffffff;
  --blue-soft: #eaf1f9;
  --yellow: #e6c35c;
  --yellow-soft: #f6e7b4;
  --danger: #c4321f;
  --ok: #16803c;
  --warn: #b25e09;
  --row-hover: #f0f4fa;
  --code-bg: #f1f3f6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c;
    --surface: #1b2129;
    --text: #e5e9ef;
    --muted: #98a2b3;
    --border: #2e3744;
    --primary: #7ea6d4;
    --primary-hover: #94b6dd;
    --primary-text: #0f1722;
    --blue-soft: #1e2b3b;
    --yellow: #cfae55;
    --yellow-soft: #4a4129;
    --danger: #f06a55;
    --ok: #4cc777;
    --warn: #f0a24c;
    --row-hover: #222a35;
    --code-bg: #141a21;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; margin-bottom: 12px; }
.muted { color: var(--muted); }
.error { color: var(--danger); margin: 6px 0; min-height: 0; }
.error:empty { display: none; }

button, input, select {
  font: inherit;
  color: inherit;
}
input, select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
input:focus, select:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
button {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  white-space: nowrap;
}
button:hover { border-color: var(--primary); background: var(--blue-soft); }
a.button {
  display: inline-block;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
a.button:hover { border-color: var(--primary); background: var(--blue-soft); }
button:disabled { opacity: .55; cursor: progress; }
button.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button.danger { color: var(--danger); border-color: var(--danger); }
button.small { padding: 4px 9px; font-size: 13px; }
button.link { border: 0; background: none; padding: 2px 6px; color: var(--primary); border-radius: 4px; }
button.link:hover { background: var(--blue-soft); }
button.danger:hover, button.link.danger:hover { background: none; border-color: var(--danger); text-decoration: underline; }
button.link.danger { color: var(--danger); }

/* Íconos */
.icon {
  width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
button > .icon:first-child:not(:last-child), a.button > .icon:first-child { margin-right: 6px; }
button.icon-btn { padding: 5px; line-height: 0; }
button.icon-btn .icon { width: 17px; height: 17px; vertical-align: 0; }
button.link.icon-btn.danger:hover { background: none; text-decoration: none; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.badge { white-space: nowrap; }
.pre-wrap { white-space: pre-wrap; }
.badge .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
h2.with-icon { display: inline-flex; align-items: center; gap: 8px; }
h3.with-icon { display: flex; align-items: center; gap: 8px; }
h2.with-icon .icon, h3.with-icon .icon { color: var(--primary); }

label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
label.check input { width: auto; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { border-top: 3px solid var(--yellow); width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.login-card p { margin: 0; }
.small-link { color: var(--primary); font-size: 13px; text-align: center; text-decoration: none; }
.small-link:hover { text-decoration: underline; }

/* Topbar & layout */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; background: var(--surface); border-bottom: 3px solid var(--yellow);
  flex-wrap: wrap;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.layout { --sidebar-w: 260px; display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: calc(100vh - 54px); }
.sidebar { position: relative; min-width: 0; border-right: 1px solid var(--border); padding: 16px; background: var(--surface); }
.sidebar-resizer {
  position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; z-index: 5;
  cursor: col-resize; touch-action: none;
}
.sidebar-resizer:hover, .sidebar-resizer.dragging { background: var(--yellow); opacity: .6; }
body.resizing { cursor: col-resize; user-select: none; }
.sidebar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mk-filter { margin-bottom: 8px; }
.mk-all { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
#all-nodes { margin-bottom: 12px; }
#all-nodes ul { margin: 4px 0 0; padding-left: 18px; }
.mk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mk-list button {
  width: 100%; text-align: left; border-color: transparent; background: none;
  display: flex; align-items: flex-start; gap: 9px;
}
.mk-list button > .icon { margin: 2px 0 0; color: var(--muted); }
.mk-list button.active > .icon { color: var(--primary); }
.mk-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; white-space: normal; }
.mk-item .badge { margin-left: 6px; font-size: 11px; padding: 0 6px; }
.mk-item .mk-range-hit { color: var(--primary); font-weight: 600; }
.mk-item .mk-range-hit .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
#mk-range-warning { margin: 0 0 12px; }
.range-alert {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 8px;
  border: 1px solid var(--danger); border-left-width: 5px;
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
}
.range-alert[hidden] { display: none; }
.range-alert > .icon { width: 26px; height: 26px; flex: none; color: var(--danger); }
.range-alert strong { display: block; color: var(--danger); font-size: 16px; margin-bottom: 4px; }
.range-alert p { margin: 0; font-weight: 500; }
.mk-list button:hover { background: var(--row-hover); }
.mk-list button.active { background: var(--blue-soft); border-color: transparent; box-shadow: inset 3px 0 0 var(--yellow); }
.mk-list small { color: var(--muted); }
.content { padding: 20px; min-width: 0; }
.empty-state { color: var(--muted); }
.mk-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.section-head h3 { margin: 0; }
.section-head input { width: 240px; }

/* Forms */
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline-form label { flex: 0 1 220px; }
.name-search { position: relative; max-width: 420px; margin-top: 10px; }
.name-search label { display: block; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px; list-style: none;
  max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.suggest li { padding: 6px 8px; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.suggest li.active, .suggest li:hover { background: var(--row-hover); }
.suggest li.empty { cursor: default; color: var(--muted); }
.suggest li.empty:hover { background: none; }
.suggest .sg-name { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.suggest .sg-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }
.preview {
  margin: 0; padding: 10px; background: var(--code-bg); border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; white-space: pre-wrap; word-break: break-all;
}
.preview:empty { display: none; }

.client-info {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px;
  margin: 16px 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px;
}
.client-info dt { font-size: 12px; color: var(--muted); }
.client-info dd { margin: 0; font-weight: 500; }

.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dialog-head h3 { margin: 0; }

.notice {
  border: 1px solid var(--warn); border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.notice p { margin: 0; }
.plan-compare { border-collapse: collapse; width: auto; }
.plan-compare th, .plan-compare td { padding: 4px 14px 4px 0; text-align: left; }
.plan-compare thead th { font-size: 12px; color: var(--muted); font-weight: 600; }
.plan-compare td.diff { color: var(--danger); font-weight: 600; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; }
.badge.ok { color: var(--ok); }
.badge.bad { color: var(--danger); }
.badge.off { color: var(--muted); }
.badge.warn { color: var(--warn); }
.neg { color: var(--danger); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; overflow-x: auto; }
.tab {
  border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
  background: none; padding: 8px 14px; margin-bottom: -1px; color: var(--muted); font-weight: 500;
}
.tab:hover { color: var(--primary); border-color: transparent; background: none; }
.tab.active { background: var(--surface); border-color: var(--border); border-top: 3px solid var(--yellow); color: var(--text); }
.tab-panel { border-top-left-radius: 0; }
a.ip-link { color: var(--primary); font-weight: 500; text-decoration: none; }
a.ip-link:hover { text-decoration: underline; }
.ip-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.copy-btn {
  padding: 0 6px; font-size: 13px; line-height: 20px; min-width: 24px;
  color: var(--muted); border-color: var(--border); background: none;
}
.copy-btn:hover { color: var(--primary); border-color: var(--primary); }
.copy-btn.copied { color: var(--ok); border-color: var(--ok); }
.copy-btn .icon { width: 13px; height: 13px; vertical-align: -2px; }
.input-copy { display: flex; gap: 6px; }
.input-copy input { flex: 1; min-width: 0; }
.input-copy .copy-btn { padding: 0 10px; }

/* Table */
.table-wrap { overflow-x: auto; }
table.clients { width: 100%; border-collapse: collapse; }
.clients th, .clients td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.clients th { font-size: 12px; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--yellow-soft); }
.clients tbody tr:hover { background: var(--row-hover); }
.clients td.actions { text-align: right; white-space: nowrap; }
.clients td small { color: var(--muted); }

dialog {
  border: 1px solid var(--border); border-radius: 12px; padding: 20px;
  background: var(--surface); color: var(--text); width: min(560px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); max-width: calc(100vw - 32px); z-index: 10;
}
.toast.err { background: var(--danger); color: #fff; }

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar-resizer { display: none; }
  .content { padding: 16px; }
  .grid-form { grid-template-columns: 1fr; }
  .section-head input { width: 100%; }
}

/* Encabezado e inicio */
.brand { color: inherit; text-decoration: none; }
/* Logo (texto azul marino): en modo oscuro va sobre un recuadro blanco para que se lea. */
.logo { display: block; height: auto; max-width: 100%; }
.brand { display: block; line-height: 0; }
.brand-logo { height: 38px; width: auto; }
.home-logo { width: 420px; margin: 0 auto 8px; }
.login-logo .logo { width: 100%; max-width: 300px; margin: 0 auto 4px; }
@media (prefers-color-scheme: dark) {
  .logo { background: #fff; border-radius: 6px; padding: 3px 6px; }
}
.topbar-main { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.main-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 8px; color: var(--muted); font-weight: 500; text-decoration: none;
}
.nav-item .icon { width: 17px; height: 17px; }
.nav-item:hover { color: var(--text); background: var(--row-hover); }
.nav-item.active { color: var(--primary); background: var(--blue-soft); }
button.nav-item { border: none; background: none; font-size: inherit; cursor: pointer; }
.main-nav button.nav-item > .icon:first-child:not(:last-child) { margin-right: 0; }
button.nav-item.active { background: var(--blue-soft); }
.main-nav .dropdown-menu { left: 0; right: auto; min-width: 230px; }
.main-nav .dropdown-menu a {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.main-nav .dropdown-menu button.menu-action {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font-size: inherit; font-weight: inherit; text-align: left; white-space: nowrap; cursor: pointer;
}
.main-nav .dropdown-menu a .icon, .main-nav .dropdown-menu button.menu-action .icon { width: 16px; height: 16px; color: var(--muted); margin-right: 0; }
.main-nav .dropdown-menu a:hover, .main-nav .dropdown-menu button.menu-action:hover { background: var(--row-hover); }
.main-nav .dropdown-menu a[aria-current="page"] { color: var(--primary); background: var(--blue-soft); }
.main-nav .dropdown-menu a[aria-current="page"] .icon { color: var(--primary); }
/* Submenú dentro del desplegable (Contabilidad → Conciliación de egresos): se abre al costado con el mouse o con clic. */
.main-nav .submenu { position: relative; display: flex; flex-direction: column; }
.main-nav button.submenu-toggle {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font-size: inherit; text-align: left; white-space: nowrap; cursor: pointer;
}
.main-nav button.submenu-toggle > .icon:first-child:not(:last-child) { margin-right: 0; width: 16px; height: 16px; color: var(--muted); }
.main-nav .submenu-arrow { margin-left: auto; padding-left: 12px; color: var(--muted); }
.main-nav .submenu:hover > .submenu-toggle, .main-nav .submenu.open > .submenu-toggle { background: var(--row-hover); }
.main-nav .submenu:has(a[aria-current="page"]) > .submenu-toggle { color: var(--primary); }
.main-nav .submenu-menu {
  display: none; position: absolute; left: 100%; top: -4px; margin-left: 4px; min-width: 220px; flex-direction: column;
  padding: 4px; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
/* Puente invisible entre el ítem y el submenú, para que no se cierre al mover el mouse. */
.main-nav .submenu-menu::before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 8px; }
.main-nav .submenu:hover > .submenu-menu, .main-nav .submenu:focus-within > .submenu-menu,
.main-nav .submenu.open > .submenu-menu { display: flex; }
@media (max-width: 700px) {
  /* En pantallas angostas el submenú se abre debajo, con sangría, en lugar de al costado. */
  .main-nav .submenu-menu { position: static; margin: 0 0 0 16px; box-shadow: none; border: 0; border-left: 2px solid var(--border); border-radius: 0; }
  .main-nav .submenu:hover > .submenu-menu, .main-nav .submenu:focus-within > .submenu-menu { display: none; }
  .main-nav .submenu.open > .submenu-menu { display: flex; }
}
.home { max-width: 760px; margin: 0 auto; padding: 56px 16px; text-align: center; }
.home-title { font-size: 26px; margin-bottom: 4px; }
.home-user { margin-top: 4px; font-size: 18px; font-weight: 600; }

/* Monitoreo */
.monitor { max-width: 1200px; margin: 0 auto; }
.monitor .section-head { margin-bottom: 12px; }
#mon-notices .notice { margin-bottom: 12px; }
.mon-time { margin-left: 8px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mon-sub { display: block; font-size: 12px; color: var(--muted); }
.mon-type { font-weight: 600; }
.mon-type .icon { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }
tr.is-down td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
tr.is-disabled td:not(.actions) { opacity: .55; }
dialog.wide { width: min(820px, calc(100vw - 32px)); }
.banks-table input[type="text"] { width: 100%; min-width: 140px; }
.banks-table input.accounts { min-width: 110px; }
.banks-table input.balance { width: 130px; text-align: right; }
.banks-table input[type="date"] { width: 150px; }
.bank-balances { margin-top: 18px; }
.bank-balances h4 { margin: 0 0 6px; }
.bank-balances table { width: auto; }
.bank-balances .num { text-align: right; font-variant-numeric: tabular-nums; }
.banks-table input[type="number"] { width: 90px; text-align: right; }
.mon-events { max-height: 60vh; overflow-y: auto; margin-bottom: 12px; }
.mon-events td.nowrap { white-space: nowrap; }

/* Usuarios */
fieldset.perms { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px 12px; margin: 0;
  display: flex; flex-direction: column; gap: 8px; }
fieldset.perms legend { font-weight: 600; padding: 0 4px; }
#user-perms { display: flex; flex-direction: column; gap: 6px; }
#user-perms p { margin: 4px 0 0; }
#user-perms.is-disabled { opacity: .55; }
label.check.exec { align-items: flex-start; }
label.check.exec input { margin-top: 3px; }
label.check small { display: block; }

/* Copia de desarrollo (APP_ENV=dev) */
.dev-banner {
  background: var(--yellow); color: #3a2f0b; text-align: center;
  font-size: 12px; font-weight: 600; padding: 3px 16px; letter-spacing: .02em;
}
.env-dev .layout { min-height: calc(100vh - 76px); }

/* Contabilidad: resumen */
.sum-opening { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.sum-opening .notice { margin: 0; }
/* Teóricos más angosta, bancos más ancha; en pantallas medianas una debajo de la otra. Sin min-width: 0 la tabla de
   bancos no se achica y empuja la página hacia la derecha. */
.sum-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .sum-grid { grid-template-columns: minmax(0, 1fr); } }
.sum-block { min-width: 0; }
.sum-block h4 { margin: 0 0 6px; }
.sum-table th { white-space: normal; vertical-align: bottom; }
.sum-table .badge { white-space: normal; }
.sum-table { width: 100%; }
.sum-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-table tr.sum-strong td { font-weight: 700; border-top: 2px solid var(--yellow); background: var(--blue-soft); }
.sum-adj-title { margin-top: 18px !important; }
.sum-adj-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sum-adj-form input[name="concept"] { flex: 2 1 180px; min-width: 0; }
.sum-adj-form input[name="amount"] { flex: 1 1 110px; min-width: 0; }
.sum-diff { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border);
  border-left: 4px solid var(--yellow); border-radius: 8px; background: var(--surface); }
.sum-diff span { font-weight: 600; }
.sum-diff strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.sum-diff strong.neg { color: var(--danger); }
.sum-diff strong.ok-text { color: var(--ok); }

/* Contabilidad: importar gastos */
#acct-import .form-actions { margin: 8px 0; }
.sqlsrv-accounts { max-height: 40vh; overflow-y: auto; }
.sqlsrv-accounts .num { text-align: right; font-variant-numeric: tabular-nums; }
.exp-sql { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.exp-sql h4 { margin: 0 0 4px; }
#exp-nobank { margin-bottom: 12px; }
.exl-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.exl-summary:empty { display: none; }

/* Reportes */
.small-note { font-size: 12px; margin: 0 0 8px; }
table.report-table { table-layout: fixed; min-width: 100%; }
.report-table td { overflow-wrap: anywhere; vertical-align: top; }
.report-table td.nowrap, .report-table .nowrap { white-space: nowrap; }
.report-table th { position: relative; cursor: pointer; user-select: none; padding-right: 18px; }
.report-table th:hover { color: var(--text); }
.report-table th.sorted { color: var(--text); }
.report-table th.sorted::after { content: "▲"; font-size: 9px; margin-left: 5px; color: var(--primary); }
.report-table th.sorted[data-dir="desc"]::after { content: "▼"; }
.col-resizer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none;
  border-right: 1px solid var(--border);
}
.col-resizer:hover, .col-resizer.dragging { background: var(--yellow); opacity: .6; }
.tag-cell { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); white-space: nowrap;
}
.tags-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin: 8px 0 12px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pager select { width: auto; padding: 4px 8px; }
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 150px;
  display: flex; flex-direction: column; padding: 4px; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.dropdown-menu button { border-color: transparent; background: none; text-align: left; }
.dropdown-menu button:hover { background: var(--row-hover); border-color: transparent; }
.report-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 4px 0 10px; }
.report-filters label { flex: 0 0 auto; }
.report-filters input, .report-filters select { width: auto; }
.dropdown-menu.checks { left: 0; right: auto; min-width: 220px; max-height: 50vh; overflow-y: auto; padding: 6px 10px; }
.dropdown-menu.checks label { padding: 3px 0; white-space: nowrap; }
.report-table td.num, .report-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.choice-filter { display: inline-flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.report-summary td { border-bottom: 1px solid var(--border); background: var(--code-bg); }
#pay-dups.active { background: var(--blue-soft); border-color: var(--primary); color: var(--primary); }
.report-table tr.dup-row td { background: var(--yellow-soft); }
.report-summary tr.sum-total td { font-weight: 700; border-top: 2px solid var(--yellow-soft); }
.report-table td.neg, .bank-preview td.neg, .report-summary td.neg { color: var(--danger); }
fieldset.bank-mapping { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px 12px; margin: 12px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
fieldset.bank-mapping legend { font-weight: 600; padding: 0 4px; }
fieldset.bank-mapping .span2 { grid-column: 1 / -1; }
.bank-preview { max-height: 40vh; overflow-y: auto; margin-bottom: 8px; }
.bank-preview .num { text-align: right; font-variant-numeric: tabular-nums; }
.bank-preview tr.is-existing td { opacity: .55; }
#bank-skipped { margin-bottom: 8px; font-size: 13px; }
#bank-skipped ul { max-height: 160px; overflow-y: auto; }
@media (max-width: 760px) { fieldset.bank-mapping { grid-template-columns: 1fr; } }
.rec-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 14px; }
.rec-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; background: var(--surface); }
.rec-stat strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.rec-stat small, .rec-stat-label { color: var(--muted); font-size: 12px; }
.rec-stat-label { font-weight: 600; }
.rec-stat .rec-stat-note { font-size: 11px; margin-top: 2px; }
.rec-stat.ok { border-left-color: var(--ok); }
.rec-stat.warn { border-left-color: var(--warn); }
.rec-stat.bad { border-left-color: var(--danger); }
.rec-stat.active { background: var(--blue-soft); border-color: var(--primary); }
.rec-view h4 { margin: 0; }
.rec-view td .badge { margin-left: 2px; }
#rec-pair-filter, #exr-pair-filter, #exr-transfer-filter { width: 100%; margin-bottom: 8px; }
.rec-pair-list { max-height: 45vh; overflow-y: auto; margin-bottom: 8px; }
.rec-pair-list .num { text-align: right; font-variant-numeric: tabular-nums; }
.rec-pair-list tbody tr { cursor: pointer; }
.rec-pair-list tr.rec-pair-best td { background: var(--yellow-soft); }
.report-table tr.crit-row td { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.rec-stat.crit { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.rec-stat.crit strong { color: var(--danger); }
.rec-totals { margin-bottom: 12px; }
.rec-totals table { width: auto; }
.rec-totals .num { text-align: right; font-variant-numeric: tabular-nums; }
.rec-tolerance { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--warn); border-left-width: 4px; border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface)); font-size: 13px; }
.rec-tolerance strong { color: var(--warn); }
/* Etiqueta en hasta dos líneas (corta con … si no entra). */
.badge.wrap2 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; max-width: 100%; border-radius: 8px; line-height: 1.35; padding: 2px 8px; }

/* El menú superior queda fijo arriba al desplazar cualquier página. */
#app-view > .topbar { position: sticky; top: 0; z-index: 30; }

/* MikroTiks en escritorio: la página no scrollea; la lista de nodos y el panel de clientes tienen cada uno su scroll. */
@media (min-width: 761px) {
  body:has(> #app-view:not([hidden]) > #mikrotiks-view:not([hidden])) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body > #app-view:not([hidden]):has(> #mikrotiks-view:not([hidden])) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #mikrotiks-view:not([hidden]) { flex: 1; min-height: 0; }
  #mikrotiks-view.layout { min-height: 0; }
  #mikrotiks-view > .sidebar, #mikrotiks-view > .content { overflow-y: auto; overscroll-behavior: contain; }
  /* El tirador de ancho se posiciona contra el layout (no contra la lista) para que no se desplace ni quede recortado. */
  #mikrotiks-view { position: relative; }
  #mikrotiks-view > .sidebar { position: static; overflow-x: hidden; }
  #mikrotiks-view .sidebar-resizer { left: calc(var(--sidebar-w) - 4px); right: auto; }
}

/* Tráfico en vivo de la cola de un cliente */
.traffic-now { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.traffic-now > div { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px; border-left: 4px solid var(--primary); }
.traffic-now > div.up { border-left-color: var(--ok); }
.traffic-now strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.traffic-now small { color: var(--muted); }
.traffic-chart { display: block; width: 100%; height: 240px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.traffic-chart .grid { stroke: var(--border); stroke-width: 1; }
.traffic-chart .axis { fill: var(--muted); font-size: 11px; }
.traffic-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.traffic-chart .line.down { stroke: var(--primary); }
.traffic-chart .line.up { stroke: var(--ok); }
.traffic-chart .limit { stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.traffic-chart .limit.down { stroke: var(--primary); }
.traffic-chart .limit.up { stroke: var(--ok); }
.traffic-legend { font-size: 12px; margin: 6px 0 0; }
.traffic-legend .sw, .graph-stat .sw { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin: 0 2px 0 8px; background: var(--primary); }
.traffic-legend .sw:first-child { margin-left: 0; }
.traffic-legend .sw.up { background: var(--ok); }
.traffic-legend .sw.limit { background: none; border-top: 2px dashed var(--muted); height: 0; }

/* Gráficas históricas del MikroTik (los colores de las muestras son los de las imágenes del router) */
.graphs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.graph { margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.graph figcaption { margin-bottom: 6px; }
.graph img { display: block; width: 100%; height: auto; background: #fff; border-radius: 4px; }
.graph-stat { font-size: 12px; color: var(--muted); margin-top: 4px; }
.graph-stat strong { color: var(--text); }
.graph-stat .sw { margin-left: 0; margin-right: 6px; }
.graph-stat.down .sw { background: #00cc00; }
.graph-stat.up .sw { background: #0000cc; }

/* Webhook de UISP, debajo de la conexión en el mismo diálogo */
.uisp-webhook { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border, #ddd); }
.uisp-webhook td.nowrap { white-space: nowrap; }
.uisp-webhook #uisp-webhook-events { max-height: 260px; overflow-y: auto; }
dialog.xwide { width: min(1180px, calc(100vw - 32px)); }
.webhook-log-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.webhook-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 120px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; text-align: left; }
.webhook-card strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.webhook-card span { font-size: 12px; color: var(--muted); }
.webhook-card.bad strong { color: var(--danger); }
.webhook-card.ok strong { color: var(--ok); }
.webhook-card.warn strong { color: var(--warn); }
.webhook-card.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--blue-soft); }
.webhook-log-filters { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.webhook-log-filters input { flex: 1; min-width: 220px; }
.webhook-table td.nowrap { white-space: nowrap; }
.webhook-row { cursor: pointer; }
.webhook-row.open td { background: var(--row-hover); }
.webhook-row .caret { display: inline-block; width: 1em; color: var(--muted); }
.webhook-detail { min-width: 260px; }
.webhook-expanded > td { background: var(--bg); padding: 10px 14px 14px; }
.webhook-detail-box h4 { margin: 12px 0 6px; font-size: 13px; }
.webhook-nodes { width: 100%; }
.webhook-nodes td { vertical-align: top; }
.wl { margin: 2px 0; }
.wl .icon { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.wl.ok { color: var(--ok); }
.wl.bad, .wl.error { color: var(--danger); }
.wl.warn { color: var(--warn); }
.wl.muted { color: var(--muted); }
.webhook-steps { margin: 0; padding-left: 20px; font-size: 13px; }
.webhook-steps li.info { color: var(--text); }
.wl-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.webhook-payload pre { max-height: 240px; overflow: auto; background: var(--code-bg); padding: 8px; border-radius: 6px; font-size: 12px; }