:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #0ea5e9;
  --primary-2: #2563eb;
  --border: #e2e8f0;
  --danger: #dc2626;
  --success: #16a34a;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);

  --ardaby-navy: #06172f;
  --ardaby-navy-2: #0b2545;
  --ardaby-blue: #0077d9;
  --ardaby-cyan: #22b8ff;
  --ardaby-sky: #8fe4ff;
  --ardaby-white: #f8fbff;
  --ardaby-muted: #6b7a90;
  --ardaby-border: rgba(34, 184, 255, 0.22);
  --ardaby-shadow: 0 28px 80px rgba(6, 23, 47, 0.28);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(34, 184, 255, 0.18), transparent 34%),
    linear-gradient(135deg, #f8fbff 0%, #edf6ff 100%);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* Login */

.ardaby-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  background:
    radial-gradient(circle at 16% 20%, rgba(34, 184, 255, 0.26), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(0, 119, 217, 0.14), transparent 25%),
    linear-gradient(135deg, #f7fbff 0%, #eef7ff 48%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.ardaby-login::before {
  content: "";
  position: absolute;
  inset: -20% auto -20% -18%;
  width: 54vw;
  min-width: 420px;
  background:
    linear-gradient(90deg, rgba(34, 184, 255, 0.22) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(0deg, rgba(34, 184, 255, 0.12) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(circle, #06172f 0%, #082447 58%, #0b3361 100%);
  border-radius: 0 50% 50% 0;
  box-shadow: inset -18px 0 0 rgba(34, 184, 255, 0.18);
}

.login-layout {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(22px, 4vw, 56px);
  position: relative;
  z-index: 1;
}

.login-hero {
  min-height: 620px;
  display: grid;
  place-items: center;
  position: relative;
}

.circuit-orbit {
  position: absolute;
  border: 2px solid rgba(34, 184, 255, 0.46);
  border-radius: 50%;
  filter: drop-shadow(0 0 16px rgba(34, 184, 255, 0.42));
}

.orbit-one {
  width: min(510px, 86vw);
  height: min(510px, 86vw);
}

.orbit-two {
  width: min(390px, 68vw);
  height: min(390px, 68vw);
  border-style: dashed;
  opacity: 0.76;
}

.mascot-card {
  width: min(410px, 78vw);
  aspect-ratio: 0.78;
  display: grid;
  justify-items: center;
  align-content: end;
  padding-bottom: 24px;
  border-radius: 42% 42% 34px 34px;
  background:
    radial-gradient(circle at 50% 23%, rgba(143, 228, 255, 0.26), transparent 14%),
    linear-gradient(180deg, rgba(8, 36, 71, 0.96), #06172f 72%);
  box-shadow: var(--ardaby-shadow), inset 0 0 0 2px rgba(34, 184, 255, 0.16);
  position: relative;
  overflow: visible;
}

.mascot-face {
  width: 74%;
  aspect-ratio: 1;
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 36% 46%, #ffffff 0 4%, transparent 5%),
    radial-gradient(circle at 64% 46%, #ffffff 0 4%, transparent 5%),
    radial-gradient(circle at 35% 58%, #f8fbff 0 15%, transparent 16%),
    radial-gradient(circle at 65% 58%, #f8fbff 0 15%, transparent 16%),
    linear-gradient(135deg, #0a315c, #006dc7 45%, #082447 100%);
  position: absolute;
  top: 12%;
  box-shadow: inset 0 -18px 28px rgba(0, 0, 0, 0.22), 0 16px 36px rgba(0, 119, 217, 0.28);
}

.ear {
  position: absolute;
  width: 32%;
  height: 44%;
  top: -20%;
  background: linear-gradient(135deg, #062346 0%, #0b4d8c 55%, #ffffff 56%, #dcefff 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 30% 30% 12% 12%;
  box-shadow: 0 0 18px rgba(34, 184, 255, 0.42);
}

.ear-left {
  left: 3%;
  rotate: -18deg;
}

.ear-right {
  right: 3%;
  rotate: 18deg;
}

.eye {
  position: absolute;
  width: 16%;
  height: 20%;
  top: 41%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #ffffff 0 12%, #8fe4ff 13% 26%, #0077d9 27% 58%, #06172f 59% 100%);
  box-shadow: 0 0 18px rgba(34, 184, 255, 0.54);
}

.eye-left {
  left: 28%;
}

.eye-right {
  right: 28%;
}

.snout {
  position: absolute;
  width: 30%;
  height: 20%;
  left: 35%;
  bottom: 18%;
  border-radius: 50% 50% 48% 48%;
  background: #f8fbff;
  box-shadow: inset 0 -8px 14px rgba(11, 37, 69, 0.14);
}

.snout::before {
  content: "";
  position: absolute;
  left: 38%;
  top: 12%;
  width: 24%;
  height: 32%;
  border-radius: 50%;
  background: #071429;
}

.mascot-body {
  width: 62%;
  height: 38%;
  border-radius: 38px 38px 28px 28px;
  background: linear-gradient(135deg, #071429, #0b2545 58%, #005eaa 100%);
  box-shadow: inset 0 0 0 3px rgba(34, 184, 255, 0.18);
  position: relative;
}

.hoodie-line {
  position: absolute;
  inset: 18px auto auto 50%;
  width: 3px;
  height: 70%;
  background: linear-gradient(#22b8ff, transparent);
}

.brand-chip {
  position: absolute;
  right: 22%;
  top: 28%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #ffffff;
  font-weight: 900;
  background: linear-gradient(135deg, #22b8ff, #0077d9);
  box-shadow: 0 0 20px rgba(34, 184, 255, 0.48);
}

.hero-caption {
  position: absolute;
  right: 0;
  bottom: 34px;
  display: grid;
  gap: 6px;
  max-width: 340px;
  padding: 22px 24px;
  color: #ffffff;
  background: rgba(6, 23, 47, 0.92);
  border: 1px solid var(--ardaby-border);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(6, 23, 47, 0.28);
}

.hero-caption strong {
  color: var(--ardaby-cyan);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: 0.08em;
}

.hero-caption span {
  color: #d9efff;
}

.login-card {
  display: grid;
  gap: 18px;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(34, 184, 255, 0.22);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--ardaby-shadow);
  backdrop-filter: blur(18px);
}

.login-copy {
  padding: 18px 18px 16px;
  border: 1px solid rgba(34, 184, 255, 0.18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(6, 23, 47, 0.96), rgba(11, 37, 69, 0.96));
  color: #ffffff;
}

.login-copy h2 {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.login-copy p {
  margin: 0;
  color: #d9efff;
  line-height: 1.55;
}

.login-card label {
  display: grid;
  gap: 8px;
  font-weight: 800;
  color: var(--ardaby-navy-2);
}

.login-card input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(11, 37, 69, 0.18);
  border-radius: 16px;
  font: inherit;
  color: var(--ardaby-navy);
  background: #f8fbff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.login-card input:focus {
  border-color: var(--ardaby-cyan);
  box-shadow: 0 0 0 4px rgba(34, 184, 255, 0.18);
  transform: translateY(-1px);
}

.login-error {
  min-height: 20px;
  margin: 0;
  color: var(--danger);
  font-weight: 800;
}

.login-help {
  margin: 0;
  color: var(--ardaby-muted);
  font-size: 0.92rem;
}

/* Layout */

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  background:
    radial-gradient(circle at top right, rgba(34, 184, 255, 0.16), transparent 26%),
    linear-gradient(135deg, #f8fbff 0%, #eef7ff 100%);
}

.sidebar {
  padding: 28px 20px;
  background:
    linear-gradient(180deg, rgba(6, 23, 47, 0.98), rgba(11, 37, 69, 0.98)),
    linear-gradient(90deg, rgba(34, 184, 255, 0.18) 1px, transparent 1px) 0 0 / 34px 34px;
  border-right: 1px solid rgba(34, 184, 255, 0.2);
  color: #ffffff;
}

.brand,
.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--ardaby-cyan), var(--ardaby-blue));
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(34, 184, 255, 0.36);
}

.brand h1 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.brand p {
  margin: 4px 0 0;
  color: #bae6fd;
  font-size: 0.85rem;
}

.tabs {
  display: grid;
  gap: 10px;
  margin-top: 34px;
}

.tab {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  font-weight: 700;
}

.tab.active {
  background: linear-gradient(135deg, rgba(34, 184, 255, 0.22), rgba(0, 119, 217, 0.16));
  color: #ffffff;
  border-color: rgba(34, 184, 255, 0.28);
}

.workspace {
  min-width: 0;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(34, 184, 255, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--primary-2);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topbar h2 {
  margin: 0;
}

.topbar-actions,
.button-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.primary-button,
.ghost-button {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 800;
}

.primary-button {
  border: 0;
  color: #ffffff;
  background: linear-gradient(135deg, var(--ardaby-cyan), var(--ardaby-blue));
  box-shadow: 0 16px 32px rgba(0, 119, 217, 0.24);
}

.ghost-button {
  color: var(--ardaby-navy);
  background: #ffffff;
  border: 1px solid rgba(34, 184, 255, 0.28);
}

.compact-button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.danger-lite {
  color: #b4233a;
  border-color: rgba(244, 63, 94, 0.24);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 228, 230, 0.84));
}

/* Panels */

.view {
  display: none;
}

.view.active {
  display: block;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.metric-card,
.panel,
.form-card,
.table-card {
  border: 1px solid rgba(34, 184, 255, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 50px rgba(6, 23, 47, 0.08);
}

.metric-card {
  padding: 22px;
}

.metric-card span {
  color: var(--muted);
  font-weight: 800;
}

.metric-card strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.metric-card p {
  margin: 8px 0 0;
  color: var(--muted);
  word-break: break-word;
}

.success-card {
  border-color: rgba(22, 163, 74, 0.22);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.94), rgba(255, 255, 255, 0.9));
}

.accent-card {
  border-color: rgba(245, 158, 11, 0.26);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.94), rgba(255, 255, 255, 0.9));
}

.panel {
  padding: 22px;
  margin-bottom: 20px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-heading h3 {
  margin: 0;
}

.dashboard-controls {
  display: grid;
  gap: 16px;
}

.dashboard-filter-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.dashboard-filter-grid label,
.sync-panel label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 800;
}

.filter-actions {
  display: flex;
  gap: 10px;
  align-items: end;
}

.sync-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 170px 170px minmax(140px, auto) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(34, 184, 255, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.8), rgba(240, 253, 250, 0.72));
}

.sync-check {
  min-height: 42px;
  align-content: center;
}

.sync-panel strong {
  display: block;
  margin-bottom: 4px;
}

.sync-panel p {
  margin: 0;
  color: var(--muted);
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(34, 184, 255, 0.28);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--primary-2);
  font-size: 0.82rem;
  font-weight: 800;
}

.status-chip.muted {
  color: var(--muted);
  background: #f8fafc;
}

.status-chip.success {
  color: #166534;
  border-color: rgba(22, 163, 74, 0.24);
  background: #ecfdf5;
}

.status-chip.warning {
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.28);
  background: #fffbeb;
}

.status-chip.danger {
  color: #991b1b;
  border-color: rgba(220, 38, 38, 0.26);
  background: #fef2f2;
}

.danger-button {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(220, 38, 38, 0.24);
  color: #ffffff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  font-weight: 900;
  box-shadow: 0 16px 32px rgba(220, 38, 38, 0.18);
}

.primary-button:disabled,
.ghost-button:disabled,
.danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.split-panel {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 20px;
}

.form-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.form-card label,
.import-grid label,
.extract-grid label,
.import-actions label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 800;
}

input,
select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #ffffff;
  color: var(--text);
}

.checkbox-line {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px !important;
}

.checkbox-line input {
  width: auto;
  min-height: auto;
}

.table-card {
  padding: 18px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.table-wrap table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

td {
  color: var(--text);
}

.compact table {
  min-width: 520px;
}

.import-grid,
.extract-grid {
  display: grid;
  grid-template-columns: 1fr 190px auto;
  gap: 14px;
  align-items: end;
}

.import-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  margin-top: 18px;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.chip {
  padding: 8px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--primary-2);
  font-weight: 800;
  font-size: 0.84rem;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.segmented label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #ffffff;
  font-weight: 800;
}

.segmented input {
  width: auto;
  min-height: auto;
}

.results table {
  min-width: 760px;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 16px;
  color: #ffffff;
  background: var(--ardaby-navy);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.small-button {
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  background: var(--primary-2);
  font-weight: 800;
}

/* Responsive */

@media (max-width: 1100px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .split-panel {
    grid-template-columns: 1fr;
  }

  .import-grid,
  .extract-grid,
  .dashboard-filter-grid,
  .sync-panel,
  .import-actions {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    width: 100%;
  }

  .filter-actions button {
    flex: 1;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .login-layout {
    grid-template-columns: 1fr;
  }

  .login-hero {
    min-height: 360px;
  }

  .mascot-card {
    width: min(300px, 74vw);
  }

  .hero-caption {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 20px;
    width: min(420px, 100%);
  }

  .ardaby-login::before {
    width: 100vw;
    min-width: 0;
    inset: -24% -20% auto -20%;
    height: 460px;
    border-radius: 0 0 50% 50%;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 16px;
  }

  .tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 16px;
  }

  .tab {
    text-align: center;
    padding: 10px;
  }
}

@media (max-width: 720px) {
  .ardaby-login {
    padding: 16px;
  }

  .login-hero {
    min-height: 300px;
  }

  .orbit-one {
    width: 300px;
    height: 300px;
  }

  .orbit-two {
    width: 230px;
    height: 230px;
  }

  .mascot-card {
    width: 230px;
  }

  .hero-caption {
    padding: 16px;
    border-radius: 18px;
    text-align: center;
  }

  .login-card {
    border-radius: 24px;
  }

  .workspace {
    padding: 16px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .topbar-actions {
    width: 100%;
  }

  .topbar-actions .ghost-button {
    flex: 1;
  }

  .tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .panel,
  .metric-card {
    padding: 16px;
    border-radius: 18px;
  }
}

@media (max-width: 480px) {
  .login-brand {
    align-items: flex-start;
  }

  .login-copy h2 {
    font-size: 1.8rem;
  }

  .login-hero {
    min-height: 260px;
  }

  .mascot-card {
    width: 198px;
  }

  .hero-caption {
    display: none;
  }
}


/* Vanguard dashboard refresh */
.app-shell {
  background:
    radial-gradient(circle at 20% 0%, rgba(34, 184, 255, .22), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(0, 119, 217, .18), transparent 24%),
    linear-gradient(135deg, #eef7ff 0%, #f8fbff 42%, #eef6ff 100%);
}
.workspace {
  min-width: 0;
}
.panel,
.metric-card {
  border: 1px solid rgba(34, 184, 255, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.78));
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(6, 23, 47, .10);
}
.metric-card {
  position: relative;
  overflow: hidden;
}
.metric-card::after {
  content: "";
  position: absolute;
  inset: auto -28px -42px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 184, 255, .24), transparent 68%);
}
.success-card {
  background: linear-gradient(135deg, rgba(6, 23, 47, .96), rgba(0, 119, 217, .88));
  color: #fff;
}
.success-card p,
.success-card span { color: rgba(255, 255, 255, .78); }
.accent-card {
  background: linear-gradient(135deg, rgba(34,184,255,.18), rgba(255,255,255,.86));
}
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}
.chart-panel {
  min-height: 330px;
}
.chart-wide {
  grid-column: 1 / -1;
}
.chart-panel canvas {
  width: 100%;
  height: 250px;
  display: block;
}
.chart-wide canvas {
  height: 280px;
}
.status-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #05233f;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(34,184,255,.24), rgba(143,228,255,.34));
  border: 1px solid rgba(34,184,255,.28);
}
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 23, 47, .38);
  backdrop-filter: blur(8px);
}
.loading-card {
  width: min(460px, 94vw);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 30px;
  border-radius: 28px;
  color: #f8fbff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(34,184,255,.32), transparent 35%),
    linear-gradient(145deg, rgba(6,23,47,.98), rgba(9,44,84,.94));
  border: 1px solid rgba(143,228,255,.28);
  box-shadow: 0 30px 90px rgba(6,23,47,.42);
}
.loading-card strong {
  font-size: 1.08rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.loading-card p {
  margin: 0;
  color: rgba(248,251,255,.72);
}

.loading-progress-wrap {
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.42);
  border: 1px solid rgba(125, 211, 252, 0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.loading-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #e0f2fe;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.loading-progress-head b {
  color: #67e8f9;
  font-size: 1rem;
}
.loading-progress-track {
  position: relative;
  overflow: hidden;
  height: 16px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.loading-progress-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: translateX(-100%);
  animation: progressShine 1.25s linear infinite;
}
.loading-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #38bdf8, #6366f1);
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.62);
  transition: width .35s ease;
}
.loading-progress-wrap small {
  display: block;
  margin-top: 10px;
  color: rgba(226, 246, 255, 0.82);
  font-weight: 700;
  line-height: 1.35;
}

.loading-rings {
  position: relative;
  width: 92px;
  height: 92px;
}
.loading-rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #22b8ff;
  animation: spin 1.05s linear infinite;
  filter: drop-shadow(0 0 10px rgba(34,184,255,.75));
}
.loading-rings span:nth-child(2) {
  inset: 12px;
  border-top-color: #8fe4ff;
  animation-duration: .78s;
  animation-direction: reverse;
}
.loading-rings span:nth-child(3) {
  inset: 25px;
  border-top-color: #ffffff;
  animation-duration: 1.25s;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .charts-grid,
  .analytics-grid,
  .metrics-grid,
  .dashboard-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .app-shell {
    display: block;
  }
  .sidebar {
    position: static;
    width: 100%;
  }
  .workspace {
    padding: 14px;
  }
  .topbar,
  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .charts-grid,
  .analytics-grid,
  .metrics-grid,
  .dashboard-filter-grid,
  .import-grid,
  .split-panel {
    grid-template-columns: 1fr;
  }
  .chart-panel,
  .chart-wide {
    grid-column: auto;
  }
  .table-wrap {
    overflow-x: auto;
  }
}

/* Ordenamiento universal de tablas */
th.sortable-header {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-right: 34px;
  transition: color .18s ease, background .18s ease;
}

th.sortable-header:hover,
th.sortable-header:focus-visible {
  color: var(--primary-2);
  background: rgba(0, 119, 217, .06);
  outline: none;
}

th.sortable-header::after {
  content: "⇅";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .78rem;
  color: rgba(100, 116, 139, .65);
}

th.sortable-header.sort-asc::after {
  content: "↑";
  color: var(--primary-2);
}

th.sortable-header.sort-desc::after {
  content: "↓";
  color: var(--primary-2);
}

.ai-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, 0.22);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 32%),
    radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.14), transparent 34%),
    var(--panel-bg, rgba(255, 255, 255, 0.92));
}

.ai-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.15) 48%, transparent 100%);
  transform: translateX(-100%);
  animation: aiSweep 8s ease-in-out infinite;
}

@keyframes aiSweep {
  0%, 62% { transform: translateX(-100%); }
  78%, 100% { transform: translateX(100%); }
}

.panel-subtitle {
  margin: 4px 0 0;
  color: var(--muted-text, #64748b);
  font-size: 0.92rem;
}

.ai-chip {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(168, 85, 247, 0.18));
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.26);
}

.ai-question-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin-top: 14px;
}

.ai-question-box textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border-radius: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(99, 102, 241, 0.22);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ai-question-box textarea:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.65);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.ai-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ai-answer {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.ai-answer-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #93c5fd;
  margin-bottom: 8px;
  font-weight: 800;
}

.ai-answer p {
  margin: 0 0 12px;
  line-height: 1.55;
}

.ai-answer ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.ai-suggestions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ai-suggestion {
  border: 1px solid rgba(147, 197, 253, 0.28);
  color: #bfdbfe;
  background: rgba(30, 41, 59, 0.72);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.ai-suggestion:hover {
  transform: translateY(-1px);
  background: rgba(30, 64, 175, 0.42);
}

@media (max-width: 820px) {
  .ai-question-form {
    grid-template-columns: 1fr;
  }

  .ai-actions {
    justify-content: stretch;
  }

  .ai-actions button {
    flex: 1 1 160px;
  }
}

/* Futuristic collapsible sidebar */
.app-shell {
  position: relative;
  transition: grid-template-columns .34s cubic-bezier(.2,.8,.2,1);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  transition: width .34s cubic-bezier(.2,.8,.2,1), padding .34s cubic-bezier(.2,.8,.2,1), transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s ease, filter .34s ease;
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 10%, rgba(34,184,255,.34), transparent 28%),
    radial-gradient(circle at 100% 45%, rgba(0,119,217,.26), transparent 34%),
    linear-gradient(180deg, rgba(6,23,47,.92), rgba(11,37,69,.96));
  backdrop-filter: blur(18px) saturate(145%);
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(34,184,255,.7), transparent);
  box-shadow: 0 0 28px rgba(34,184,255,.75);
}

.sidebar-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  color: #e0f2fe;
  background: rgba(255,255,255,.08);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform .2s ease, background .2s ease;
}

.sidebar-close:hover,
.sidebar-toggle:hover,
.sidebar-peek:hover {
  transform: translateY(-1px);
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sidebar-peek {
  position: fixed;
  left: 14px;
  top: 18px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(34,184,255,.36);
  border-radius: 17px;
  color: #e0f2fe;
  background: rgba(6,23,47,.78);
  box-shadow: 0 18px 55px rgba(6,23,47,.22), 0 0 28px rgba(34,184,255,.22);
  backdrop-filter: blur(16px) saturate(150%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity .24s ease, transform .24s ease;
}

.sidebar-collapsed .sidebar-peek {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.sidebar-collapsed {
  grid-template-columns: 78px 1fr;
}

.sidebar-collapsed .sidebar {
  width: 78px;
  padding: 24px 14px;
  filter: saturate(1.18);
}

.sidebar-collapsed .brand {
  justify-content: center;
}

.sidebar-collapsed .brand-copy,
.sidebar-collapsed .sidebar-close,
.sidebar-collapsed .tab {
  opacity: 0;
  transform: translateX(-14px);
  pointer-events: none;
}

.sidebar-collapsed .tabs {
  opacity: 0;
}

.brand-copy,
.sidebar-close,
.tabs,
.tab {
  transition: opacity .22s ease, transform .26s ease;
}

.sidebar-auto:not(.sidebar-pinned):not(.sidebar-collapsed) .sidebar {
  box-shadow: 20px 0 80px rgba(6,23,47,.22), 0 0 42px rgba(34,184,255,.18);
}

.sidebar-scrim {
  display: none;
}

@media (max-width: 980px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    display: block;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(320px, 86vw) !important;
    height: 100vh;
    padding: 24px 18px !important;
    transform: translateX(-110%);
    border-right: 1px solid rgba(34,184,255,.34);
    box-shadow: 28px 0 90px rgba(6,23,47,.32);
  }

  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .app-shell.sidebar-open .brand-copy,
  .app-shell.sidebar-open .sidebar-close,
  .app-shell.sidebar-open .tabs,
  .app-shell.sidebar-open .tab {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .app-shell.sidebar-open .tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sidebar-peek {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 65;
    display: block;
    opacity: 0;
    pointer-events: none;
    background: rgba(2, 8, 23, .28);
    backdrop-filter: blur(9px) saturate(130%);
    transition: opacity .24s ease;
  }

  .app-shell.sidebar-open .sidebar-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .workspace {
    padding-top: 74px;
  }
}

/* Rentabilidad Call Center */
.profit-hero {
  position: relative;
  overflow: hidden;
}

.profit-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -45% 35%;
  height: 220px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.24), transparent 68%);
  pointer-events: none;
  filter: blur(12px);
}

.profit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.profit-tab {
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(15, 23, 42, 0.58);
  color: var(--muted-text, #94a3b8);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.profit-tab:hover,
.profit-tab.active {
  color: #fff;
  border-color: rgba(34, 211, 238, 0.55);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(99, 102, 241, 0.18));
  transform: translateY(-1px);
}

.profit-pane {
  display: none;
}

.profit-pane.active {
  display: block;
}

.inline-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#profit-config-table input,
#profit-config-table select {
  width: 100%;
  min-width: 110px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  padding: 8px 10px;
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.78);
}

#profit-config-table input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  accent-color: #22d3ee;
}

.small-button {
  padding: 7px 10px;
  min-height: auto;
  font-size: 0.82rem;
  margin: 2px;
}

.profit-metrics .metric-card strong {
  letter-spacing: -0.04em;
}

@media (max-width: 760px) {
  .profit-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }

  .profit-tab {
    white-space: nowrap;
  }

  .inline-actions {
    justify-content: flex-start;
  }
}

/* Semaforizacion y tablas compactas */
.table-wrap {
  max-height: 360px;
  overflow: auto;
  border-radius: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, 0.45) rgba(15, 23, 42, 0.35);
}

.table-wrap.compact {
  max-height: 290px;
}

.table-wrap.results,
.table-wrap-lg {
  max-height: 430px;
}

.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(8, 13, 28, 0.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.18);
}

.table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.table-wrap::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.35);
  border-radius: 999px;
}

.table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.62), rgba(99, 102, 241, 0.62));
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.55);
}

.performance-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 118px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.62);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

.performance-badge strong,
.performance-badge small {
  display: block;
  line-height: 1.05;
}

.performance-badge strong {
  font-size: 0.78rem;
  color: #f8fafc;
}

.performance-badge small {
  margin-top: 3px;
  font-size: 0.68rem;
  color: rgba(226, 232, 240, 0.76);
}

.performance-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05), 0 0 18px currentColor;
}

.performance-green {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.36);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(15, 23, 42, 0.72));
}

.performance-yellow {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.38);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(15, 23, 42, 0.72));
}

.performance-red {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.42);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(15, 23, 42, 0.72));
}

.performance-green .performance-dot { background: #22c55e; }
.performance-yellow .performance-dot { background: #f59e0b; }
.performance-red .performance-dot { background: #ef4444; }

#profit-agent-table tr:has(.performance-green) {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), transparent 38%);
}

#profit-agent-table tr:has(.performance-yellow) {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent 38%);
}

#profit-agent-table tr:has(.performance-red) {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), transparent 38%);
}

@media (max-width: 760px) {
  .table-wrap,
  .table-wrap.compact,
  .table-wrap.results,
  .table-wrap-lg {
    max-height: 340px;
  }

  .performance-badge {
    min-width: 104px;
    padding: 7px 9px;
  }
}

/* Filtros instantaneos por tabla */
.panel-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.table-filter-input {
  width: min(260px, 42vw);
  min-height: 36px;
  padding: 9px 14px 9px 36px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.96);
  background:
    radial-gradient(circle at 15% 50%, rgba(34, 211, 238, 0.18), transparent 18px),
    linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(30, 41, 59, 0.66));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 32px rgba(2, 6, 23, 0.18);
  outline: none;
  font-size: 0.86rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.table-filter-input::placeholder {
  color: rgba(148, 163, 184, 0.86);
}

.table-filter-input:focus {
  border-color: rgba(34, 211, 238, 0.72);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12), 0 18px 42px rgba(8, 145, 178, 0.16);
  transform: translateY(-1px);
}

tr.hidden-by-table-filter {
  display: none !important;
}

.table-filter-empty-row td {
  padding: 18px !important;
  text-align: center;
  color: rgba(148, 163, 184, 0.9);
  font-weight: 700;
  background: rgba(15, 23, 42, 0.48);
}

@media (max-width: 760px) {
  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-tools {
    width: 100%;
    justify-content: stretch;
  }

  .table-filter-input {
    width: 100%;
  }
}


/* Filtros con sugerencias y multiseleccion */
.table-filter-combo {
  position: relative;
  width: min(360px, 46vw);
  display: grid;
  gap: 7px;
}

.table-filter-search-wrap {
  position: relative;
}

.table-filter-combo .table-filter-input {
  width: 100%;
}

.table-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.table-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 180px;
  padding: 6px 9px;
  border: 1px solid rgba(34, 211, 238, 0.32);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.98);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(15, 23, 42, 0.82));
  box-shadow: 0 12px 26px rgba(8, 145, 178, 0.13);
  font-size: 0.75rem;
}

.table-filter-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-filter-chip strong {
  color: #67e8f9;
  font-size: 1rem;
  line-height: 1;
}

.table-filter-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(380px, 86vw);
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(34, 211, 238, 0.26);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.92));
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  display: none;
}

.table-filter-suggestions.open {
  display: grid;
  gap: 6px;
}

.table-filter-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: rgba(226, 232, 240, 0.96);
  background: rgba(15, 23, 42, 0.58);
  text-align: left;
}

.table-filter-suggestion:hover,
.table-filter-suggestion:focus {
  border-color: rgba(34, 211, 238, 0.44);
  background: rgba(8, 145, 178, 0.28);
}

.table-filter-suggestion span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-filter-suggestion small {
  color: rgba(125, 211, 252, 0.86);
  white-space: nowrap;
}

.table-filter-no-suggestions {
  padding: 12px;
  color: rgba(148, 163, 184, 0.92);
  text-align: center;
  font-weight: 700;
}

#agent-kpis-table tr:has(.performance-green),
#lot-kpis-table tr:has(.performance-green) {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15), transparent 58%);
}

#agent-kpis-table tr:has(.performance-yellow),
#lot-kpis-table tr:has(.performance-yellow) {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.14), transparent 58%);
}

#agent-kpis-table tr:has(.performance-red),
#lot-kpis-table tr:has(.performance-red) {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), transparent 58%);
}

@media (max-width: 760px) {
  .table-filter-combo {
    width: 100%;
  }
  .table-filter-chips {
    justify-content: flex-start;
  }
  .table-filter-suggestions {
    left: 0;
    right: auto;
    width: 100%;
  }
}

/* Correccion modulo Usuarios + Ardabyto loader */
.users-panel {
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  align-items: start;
  overflow: hidden;
}

.user-form-card,
.users-table-card {
  min-width: 0;
}

.users-table-card {
  overflow: hidden;
}

.users-heading {
  flex-wrap: wrap;
}

#users .table-wrap {
  max-height: 520px;
  min-height: 260px;
  overflow: auto;
  border: 1px solid rgba(34, 184, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}

#users .table-wrap table {
  min-width: 720px;
}

#users th,
#users td {
  white-space: nowrap;
}

#users td:first-child,
#users td:nth-child(2) {
  white-space: normal;
  min-width: 170px;
}

#users .small-button {
  margin-right: 6px;
}

.ardabyto-user-loader {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(34, 211, 238, 0.32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 20%, rgba(34, 211, 238, 0.22), transparent 32%),
    linear-gradient(135deg, rgba(7, 20, 41, 0.94), rgba(10, 49, 92, 0.92));
  color: #eff6ff;
  box-shadow: 0 20px 60px rgba(0, 119, 217, 0.22), inset 0 0 0 1px rgba(255,255,255,0.08);
  overflow: hidden;
}

.ardabyto-user-loader[hidden] {
  display: none !important;
}

.ardabyto-user-loader strong {
  display: block;
  font-size: 0.94rem;
}

.ardabyto-user-loader p {
  margin: 4px 0 0;
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.82rem;
}

.ardabyto-dance-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 26px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.22), rgba(15, 23, 42, 0.18));
  isolation: isolate;
}

.ardabyto-dance-stage::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, transparent, rgba(34, 211, 238, 0.42), transparent, rgba(59, 130, 246, 0.32), transparent);
  filter: blur(12px);
  animation: ardabytoGlowSpin 2.2s linear infinite;
  z-index: -1;
}

.ardabyto-dance-stage img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 24px;
  border: 2px solid rgba(147, 197, 253, 0.8);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 0 22px rgba(34, 211, 238, 0.48);
  transform-origin: 50% 88%;
  animation: ardabytoDance 0.82s ease-in-out infinite;
}

.dance-shadow {
  position: absolute;
  width: 58px;
  height: 12px;
  bottom: 7px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.42);
  filter: blur(5px);
  animation: ardabytoShadow 0.82s ease-in-out infinite;
}

.user-form-card.is-saving-user label,
.user-form-card.is-saving-user .checkbox-line,
.user-form-card.is-saving-user .ghost-button {
  opacity: 0.62;
}

.user-form-card.is-saving-user input,
.user-form-card.is-saving-user select,
.user-form-card.is-saving-user .ghost-button {
  pointer-events: none;
}

@keyframes ardabytoDance {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
  25% { transform: translateY(-9px) rotate(6deg) scale(1.04); }
  50% { transform: translateY(0) rotate(4deg) scale(0.99); }
  75% { transform: translateY(-6px) rotate(-7deg) scale(1.03); }
}

@keyframes ardabytoShadow {
  0%, 100% { transform: scaleX(1); opacity: 0.44; }
  25%, 75% { transform: scaleX(0.72); opacity: 0.22; }
  50% { transform: scaleX(1.08); opacity: 0.38; }
}

@keyframes ardabytoGlowSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
  .users-panel {
    grid-template-columns: 1fr;
  }

  #users .table-wrap {
    max-height: 420px;
  }
}

@media (max-width: 560px) {
  .ardabyto-user-loader {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
}

/* Fix final Usuarios: buscador en tabla, layout limpio y Ardabyto visible */
#users .users-panel {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  overflow: visible;
}

#users .user-form-card,
#users .users-table-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#users .user-form-card {
  position: sticky;
  top: 18px;
  z-index: 2;
  padding: 18px;
  overflow: hidden;
}

#users .user-form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

#users .user-form-subtitle {
  margin: 4px 0 0;
  color: rgba(71, 85, 105, 0.82);
  font-size: 0.82rem;
  font-weight: 700;
}

#users .ardabyto-mini {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 20%, rgba(34, 211, 238, 0.25), transparent 45%),
    linear-gradient(145deg, rgba(14, 165, 233, 0.16), rgba(15, 23, 42, 0.08));
  border: 1px solid rgba(14, 165, 233, 0.24);
  box-shadow: 0 14px 34px rgba(14, 165, 233, 0.18);
}

#users .ardabyto-mini img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 16px;
  animation: ardabytoDance 1.05s ease-in-out infinite;
}

#users .users-table-card {
  padding: 18px;
  overflow: hidden;
}

#users .users-heading {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(240px, 420px);
  align-items: start;
  gap: 14px;
  margin-bottom: 14px;
}

#users .users-heading .panel-tools {
  width: 100%;
  justify-content: end;
}

#users .users-heading .table-filter-combo {
  width: 100%;
  max-width: 420px;
}

#users .users-heading .table-filter-input {
  height: 42px;
  border-radius: 15px;
}

#users .table-wrap {
  max-height: clamp(280px, 52vh, 560px);
  min-height: 280px;
  overflow: auto;
}

#users .table-wrap table {
  min-width: 760px;
}

#users .ardabyto-user-loader {
  margin-top: 16px;
  position: relative;
  z-index: 3;
}

#users .user-form-card.is-saving-user .ardabyto-mini img {
  animation-duration: 0.62s;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.55));
}

@media (max-width: 1100px) {
  #users .users-panel {
    grid-template-columns: 1fr;
  }

  #users .user-form-card {
    position: relative;
    top: auto;
  }
}

@media (max-width: 720px) {
  #users .users-heading {
    grid-template-columns: 1fr;
  }

  #users .users-heading .panel-tools,
  #users .users-heading .table-filter-combo {
    max-width: none;
    width: 100%;
  }
}

/* Usuarios: cambio de contraseña y acciones */
#users .users-table-card td:last-child {
  min-width: 250px;
  white-space: nowrap;
}

#users .small-button.ghost-mini {
  background: rgba(12, 21, 38, 0.06);
  color: #0f3767;
  border: 1px solid rgba(45, 141, 255, 0.22);
}

#users .small-button.ghost-mini:hover {
  background: rgba(45, 141, 255, 0.12);
  box-shadow: 0 10px 24px rgba(45, 141, 255, 0.18);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 12, 28, 0.45);
  backdrop-filter: blur(16px) saturate(140%);
}

.modal-backdrop.hidden {
  display: none;
}

.password-modal-card {
  position: relative;
  width: min(480px, 100%);
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: 30px;
  border: 1px solid rgba(80, 170, 255, 0.26);
  background:
    radial-gradient(circle at 18% 0%, rgba(59, 177, 255, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 248, 255, 0.9));
  box-shadow: 0 34px 90px rgba(0, 26, 64, 0.34);
  animation: modalPop 0.22s ease both;
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 14px;
  background: rgba(13, 30, 54, 0.08);
  color: #10213c;
  font-size: 24px;
  cursor: pointer;
}

.modal-ardabyto {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  padding: 8px;
  background: linear-gradient(145deg, rgba(20, 92, 192, 0.12), rgba(50, 204, 255, 0.16));
  box-shadow: 0 18px 34px rgba(18, 94, 194, 0.22);
}

.modal-ardabyto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  animation: ardabytoDance 1.2s ease-in-out infinite;
}

.password-modal-card .eyebrow {
  margin: 0 0 4px;
  color: #2c7df0;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.password-modal-card h3 {
  margin: 0;
  font-size: 1.45rem;
}

.password-modal-card .muted-text {
  margin: 4px 0 0;
  color: #61708a;
}

.password-modal-card label {
  display: grid;
  gap: 8px;
  color: #10213c;
  font-weight: 800;
}

.password-modal-card input {
  min-height: 46px;
  border: 1px solid rgba(28, 71, 118, 0.18);
  border-radius: 16px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.9);
  outline: none;
}

.password-modal-card input:focus {
  border-color: rgba(45, 141, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(45, 141, 255, 0.12);
}

.modal-actions {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  #users .users-table-card td:last-child {
    min-width: 220px;
  }

  .password-modal-card {
    padding: 22px;
    border-radius: 24px;
  }
}

.session-user-pill {
  display: inline-flex;
  align-items: center;
  max-width: 280px;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.10);
  backdrop-filter: blur(14px);
}

.agent-empty-panel {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.22), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(239,246,255,0.84));
}

.ardabyto-mini.large {
  width: 98px;
  height: 98px;
  border-radius: 28px;
  padding: 0.35rem;
  background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(14,165,233,0.10));
  box-shadow: 0 20px 50px rgba(37,99,235,0.22);
}

.ardabyto-mini.large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.agent-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.agent-placeholder-grid article {
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 22px;
  padding: 1rem;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

.agent-placeholder-grid strong {
  display: block;
  color: #0f172a;
  margin-bottom: 0.35rem;
}

.agent-placeholder-grid span {
  color: #64748b;
  font-weight: 700;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .agent-placeholder-grid {
    grid-template-columns: 1fr;
  }
  .session-user-pill {
    max-width: 160px;
  }
}

/* Modulo agente */
.agent-console {
  display: grid;
  gap: 14px;
}

.agent-status-band {
  display: grid;
  gap: 14px;
  border-color: rgba(15, 23, 42, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

.agent-session-head,
.agent-toolbar,
.agent-live-badges,
.agent-dial-row,
.agent-call-actions,
.agent-state-controls,
.agent-dispo-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.agent-session-head {
  justify-content: space-between;
}

.agent-live-badges {
  justify-content: flex-end;
}

.agent-toolbar label,
.agent-state-controls label,
.agent-dispo-box label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 800;
}

.agent-toolbar select,
.agent-state-controls select,
.agent-dispo-box select,
.agent-dial-row input {
  min-height: 44px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 0 12px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
}

.agent-toolbar select {
  width: min(380px, 76vw);
}

.agent-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.agent-kpi-strip div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 8px;
  background: #ffffff;
}

.agent-kpi-strip span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-kpi-strip strong {
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-grid {
  display: grid;
  grid-template-columns: minmax(360px, 420px) minmax(440px, 1fr);
  gap: 18px;
  align-items: start;
}

.agent-webphone-panel,
.agent-vicidial-panel,
.agent-history-panel {
  min-width: 0;
}

.agent-webphone-panel {
  position: sticky;
  top: 14px;
}

.agent-call-timer {
  display: inline-grid;
  place-items: center;
  min-width: 78px;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #f8fafc;
  color: #0f172a;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ios-phone {
  width: min(380px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,245,249,0.92)),
    linear-gradient(135deg, rgba(15,23,42,0.12), rgba(14,165,233,0.08));
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.18),
    inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.ios-phone-top {
  min-height: 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-size: 0.76rem;
  font-weight: 900;
}

.ios-signal {
  justify-self: start;
}

.ios-dynamic-island {
  width: 92px;
  height: 26px;
  border-radius: 999px;
  background: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.ios-phone-top .agent-call-timer {
  justify-self: end;
  min-width: 58px;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.agent-phone-screen {
  display: grid;
  gap: 8px;
  min-height: 132px;
  align-content: center;
  padding: 20px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 8px;
  background:
    linear-gradient(135deg, #0f172a, #164e63 54%, #14532d);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 38px rgba(15, 23, 42, 0.12);
}

.ios-phone-screen {
  min-height: 118px;
  border-radius: 26px;
  border: 0;
  padding: 22px 18px;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(180deg, #111827, #020617);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 18px 36px rgba(15, 23, 42, 0.18);
}

.agent-phone-screen strong {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.1;
}

.agent-phone-screen span {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  overflow-wrap: anywhere;
}

#agent-remote-audio {
  display: none;
}

.ios-dial-display {
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 10px;
  align-items: center;
}

.ios-dial-display input {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 18px;
  padding: 0 14px;
  background: #e5e7eb;
  color: #0f172a;
  font-size: 1.16rem;
  font-weight: 800;
  text-align: center;
  outline: none;
}

.ios-icon-button {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  color: #334155;
  background: #e5e7eb;
  font-size: 1.18rem;
  font-weight: 900;
}

.ios-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ios-keypad button {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 0;
  border-radius: 999px;
  background: #e5e7eb;
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 8px 18px rgba(15,23,42,0.08);
  transition: transform .12s ease, background .12s ease;
}

.ios-keypad button:active {
  transform: scale(0.96);
  background: #cbd5e1;
}

.ios-keypad strong {
  font-size: 1.55rem;
  line-height: 1;
}

.ios-keypad span {
  min-height: 13px;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.agent-volume-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 20px;
  background: #eef2f7;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 900;
}

.agent-volume-control input {
  width: 100%;
  accent-color: #22c55e;
}

.agent-volume-control output {
  min-width: 42px;
  text-align: right;
}

.ios-call-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}

.ios-call-button,
.ios-main-call {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.ios-call-button.secondary {
  color: #0f172a;
  background: #e5e7eb;
}

.ios-call-button.answer,
.ios-main-call {
  background: linear-gradient(180deg, #34d399, #16a34a);
}

.ios-call-button.danger {
  background: linear-gradient(180deg, #fb7185, #dc2626);
}

.ios-main-call {
  width: 76px;
  height: 76px;
  min-height: 76px;
  justify-self: center;
  font-size: 0.86rem;
}

.ios-call-button:disabled,
.ios-main-call:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.agent-dial-row {
  margin-top: 16px;
  align-items: stretch;
}

.agent-dial-row input {
  flex: 1 1 220px;
  min-width: 0;
}

.agent-call-actions,
.agent-state-controls,
.agent-dispo-actions {
  margin-top: 14px;
}

.agent-call-actions button,
.agent-state-controls button,
.agent-dispo-actions button {
  flex: 1 1 130px;
}

.agent-state-controls label {
  flex: 1 1 180px;
}

.agent-state-controls {
  align-items: end;
}

.agent-live-card {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 8px;
  background: #f8fafc;
}

.agent-live-card > span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-live-card > strong {
  color: #0f172a;
  font-size: 1.18rem;
}

.agent-live-card > p {
  margin: 0;
  color: #475569;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.agent-live-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 0;
}

.agent-live-card dl div {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.agent-live-card dt {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-live-card dd {
  margin: 4px 0 0;
  color: #0f172a;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.agent-dispo-box {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 8px;
  background: #f8fafc;
}

.agent-checkbox {
  display: inline-flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px !important;
}

.agent-checkbox input {
  width: 18px;
  height: 18px;
}

.agent-ve-capture-box {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 8px;
  background: #ecfdf5;
}

.agent-ve-capture-box.hidden {
  display: none;
}

.agent-ve-capture-box .ghost-button {
  min-height: 38px;
  padding: 0 12px;
}

#agent-recent-calls td {
  white-space: nowrap;
}

@media (max-width: 1040px) {
  .agent-grid {
    grid-template-columns: 1fr;
  }

  .agent-webphone-panel {
    position: static;
  }
}

@media (max-width: 680px) {
  .agent-session-head,
  .agent-toolbar,
  .agent-live-badges,
  .agent-dial-row,
  .agent-call-actions,
  .agent-state-controls,
  .agent-dispo-actions {
    align-items: stretch;
  }

  .agent-live-badges,
  .agent-toolbar label,
  .agent-state-controls label,
  .agent-dispo-box label,
  .agent-call-actions button,
  .agent-state-controls button,
  .agent-dispo-actions button {
    width: 100%;
  }

  .agent-toolbar select {
    width: 100%;
  }

  .agent-kpi-strip,
  .agent-ve-capture-box {
    grid-template-columns: 1fr;
  }

  .agent-live-card dl {
    grid-template-columns: 1fr;
  }
}

/* Vista compacta de agente: prioriza llamada, estado, lead y tipificacion. */
#agent-home .panel {
  margin-bottom: 0;
}

#agent-home .panel-heading {
  margin-bottom: 10px;
}

.agent-console {
  gap: 10px;
  position: relative;
}

.agent-support-console-toggle {
  position: fixed;
  right: 6px;
  bottom: 6px;
  z-index: 1300;
  width: 13px;
  height: 13px;
  min-height: 13px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(6, 23, 47, 0.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.42), 0 8px 18px rgba(6, 23, 47, 0.18);
  opacity: 0.18;
  cursor: pointer;
}

.agent-support-console-toggle:hover,
.agent-support-console-toggle.is-open {
  opacity: 0.85;
  background: #06172f;
}

.agent-status-band {
  gap: 10px;
  padding: 14px 16px;
}

.agent-session-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
}

.agent-session-head h3 {
  font-size: 1.18rem;
}

.agent-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
}

.agent-kpi-strip {
  gap: 8px;
}

.agent-kpi-strip div {
  padding: 8px 10px;
}

.agent-grid {
  grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
  gap: 12px;
}

.agent-webphone-panel,
.agent-vicidial-panel,
.agent-ops-grid .panel,
.agent-history-panel {
  padding: 14px;
}

.agent-webphone-panel {
  top: 8px;
}

.ios-phone {
  width: min(315px, 100%);
  gap: 8px;
  padding: 12px;
  border-radius: 24px;
}

.ios-phone-top {
  min-height: 24px;
}

.ios-dynamic-island {
  width: 72px;
  height: 20px;
}

.ios-phone-top .agent-call-timer {
  min-width: 52px;
  min-height: 24px;
}

.ios-phone-screen {
  min-height: 72px;
  padding: 14px 12px;
  border-radius: 20px;
}

.agent-phone-screen strong {
  font-size: 1.15rem;
}

.agent-phone-screen span {
  font-size: 0.82rem;
}

.ios-dial-display {
  grid-template-columns: 1fr 40px;
  gap: 8px;
}

.ios-dial-display input {
  min-height: 40px;
  border-radius: 14px;
  font-size: 1rem;
}

.ios-icon-button {
  width: 40px;
  height: 40px;
}

.ios-keypad {
  width: min(230px, 100%);
  justify-self: center;
  gap: 7px;
}

.ios-phone.keypad-hidden .ios-keypad {
  display: none;
}

.ios-keypad strong {
  font-size: 1.08rem;
}

.ios-keypad span {
  min-height: 10px;
  font-size: 0.52rem;
}

.agent-volume-control {
  padding: 8px 10px;
  border-radius: 14px;
}

.ios-call-actions {
  gap: 8px;
}

.ios-call-button,
.ios-main-call {
  min-height: 40px;
}

.ios-main-call {
  width: 58px;
  height: 58px;
  min-height: 58px;
}

.agent-vicidial-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
  gap: 10px 12px;
  align-content: start;
}

.agent-vicidial-panel .panel-heading,
.agent-vicidial-panel .agent-state-controls {
  grid-column: 1 / -1;
}

.agent-state-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
  align-items: end;
}

.agent-state-controls button,
.agent-state-controls label,
.agent-dispo-actions button {
  min-width: 0;
  width: 100%;
}

.agent-state-controls button {
  min-height: 40px;
  padding: 0 10px;
}

.agent-state-controls select,
.agent-dispo-box select {
  min-height: 40px;
}

#agent-home .primary-button,
#agent-home .ghost-button,
#agent-home .danger-button,
#agent-home .ios-call-button {
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 900;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

#agent-home .primary-button:hover:not(:disabled),
#agent-home .ghost-button:hover:not(:disabled),
#agent-home .danger-button:hover:not(:disabled),
#agent-home .ios-call-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 44, 88, 0.14), inset 0 1px 0 rgba(255,255,255,0.44);
}

#agent-home .ghost-button {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(235,248,255,0.9));
  border-color: rgba(14, 165, 233, 0.22);
}

#agent-home .danger-lite {
  color: #be123c;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,228,230,0.9));
  border-color: rgba(244, 63, 94, 0.24);
}

#agent-home .agent-dispo-actions button,
#agent-home .agent-call-actions button,
#agent-home .agent-ops-grid button {
  min-height: 34px;
  padding: 7px 10px;
}

.agent-live-card,
.agent-dispo-box {
  margin-top: 0;
  padding: 12px;
}

.agent-live-card {
  align-self: stretch;
}

.agent-live-card > strong {
  font-size: 1.02rem;
}

.agent-live-card dl {
  gap: 6px;
}

.agent-live-card dl div {
  padding: 8px;
}

.agent-dispo-box {
  align-self: stretch;
}

.agent-dispo-box.is-dispo {
  border-color: rgba(245, 158, 11, 0.5);
  background: #fffbeb;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22), 0 12px 30px rgba(245, 158, 11, 0.12);
}

.agent-dispo-actions {
  gap: 8px;
  margin-top: 0;
}

.agent-ve-capture-box {
  padding: 8px;
}

.agent-ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.agent-lead-edit-panel {
  grid-column: span 2;
}

.agent-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agent-form-grid label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 850;
}

.agent-form-grid input,
.agent-form-grid select,
.agent-form-grid textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
}

.agent-form-grid textarea {
  min-height: 76px;
  resize: vertical;
}

.agent-form-wide {
  grid-column: 1 / -1;
}

.agent-search-results,
.agent-script-box {
  max-height: 118px;
  overflow: auto;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.agent-webform-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.agent-history-panel .table-wrap.compact {
  max-height: 180px;
  overflow: auto;
}

@media (max-width: 1280px) {
  .agent-state-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agent-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  .agent-grid,
  .agent-vicidial-panel,
  .agent-ops-grid {
    grid-template-columns: 1fr;
  }

  .agent-lead-edit-panel {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .agent-session-head,
  .agent-toolbar,
  .agent-state-controls,
  .agent-form-grid {
    grid-template-columns: 1fr;
  }

  .agent-webphone-panel,
  .agent-vicidial-panel,
  .agent-ops-grid .panel,
  .agent-history-panel {
    padding: 12px;
  }

  .ios-phone {
    width: 100%;
  }
}

/* Login Ardabyto futurista */
.orbit-three {
  width: min(300px, 52vw);
  height: min(300px, 52vw);
  border-color: rgba(255, 255, 255, 0.72);
  border-style: dotted;
  opacity: 0.72;
}

.ardabyto-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(470px, 82vw);
  min-height: min(570px, 96vw);
  isolation: isolate;
  animation: stageFloat 4.8s ease-in-out infinite;
}

.ardabyto-glow {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(34, 184, 255, 0.42), rgba(0, 119, 217, 0.18) 42%, transparent 68%),
    conic-gradient(from 90deg, rgba(34, 184, 255, 0), rgba(34, 184, 255, 0.42), rgba(129, 92, 255, 0.25), rgba(34, 184, 255, 0));
  filter: blur(6px) saturate(1.25);
  animation: neonSpin 6s linear infinite, pulseGlow 2.6s ease-in-out infinite;
  z-index: -1;
}

.login-ardabyto {
  width: min(420px, 76vw);
  max-height: 540px;
  object-fit: contain;
  border-radius: 36px;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 28px 42px rgba(6, 23, 47, 0.34)) drop-shadow(0 0 22px rgba(34, 184, 255, 0.38));
  animation: ardabytoDance 1.35s ease-in-out infinite;
  transform-origin: 50% 88%;
}

.neon-spark {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--ardaby-cyan);
  box-shadow: 0 0 16px rgba(34, 184, 255, 0.9), 0 0 34px rgba(34, 184, 255, 0.55);
  animation: sparkOrbit 3.2s ease-in-out infinite;
}

.spark-one { left: 13%; top: 22%; animation-delay: -0.35s; }
.spark-two { right: 10%; top: 36%; width: 10px; height: 10px; animation-delay: -1.15s; }
.spark-three { left: 20%; bottom: 20%; width: 12px; height: 12px; animation-delay: -2s; }

.login-card {
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 34%, rgba(34, 184, 255, 0.16) 45%, transparent 58% 100%);
  transform: translateX(-120%);
  animation: loginSweep 4.5s ease-in-out infinite;
}

.login-button {
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 119, 217, 0.28), 0 0 18px rgba(34, 184, 255, 0.28);
}

.login-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: translateX(-120%);
  animation: loginButtonShine 2.4s ease-in-out infinite;
}

.agent-campaign-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  background:
    radial-gradient(circle at 20% 18%, rgba(34, 184, 255, 0.22), transparent 30%),
    radial-gradient(circle at 80% 78%, rgba(22, 163, 74, 0.16), transparent 26%),
    linear-gradient(135deg, #f8fbff, #eef7ff 50%, #ffffff);
}

.agent-campaign-card {
  width: min(520px, 100%);
}

.agent-campaign-card .ghost-button {
  width: 100%;
  justify-content: center;
}

.agent-campaign-card select {
  min-height: 50px;
  border: 1px solid rgba(28, 71, 118, 0.18);
  border-radius: 16px;
  padding: 0 14px;
  background: rgba(255,255,255,0.92);
  color: #0f172a;
  font-weight: 800;
  outline: none;
}

.farewell-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  background:
    radial-gradient(circle at 22% 24%, rgba(34, 184, 255, 0.24), transparent 28%),
    radial-gradient(circle at 78% 74%, rgba(34, 197, 94, 0.18), transparent 28%),
    linear-gradient(135deg, #f8fbff 0%, #eef7ff 52%, #ffffff 100%);
}

.farewell-card {
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(34, 184, 255, 0.24);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 70px rgba(15, 44, 88, 0.16), inset 0 1px 0 rgba(255,255,255,0.86);
  text-align: center;
}

.farewell-orbit {
  position: relative;
  width: min(220px, 58vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}

.farewell-orbit span {
  position: absolute;
  inset: 9%;
  border: 2px solid rgba(34, 184, 255, 0.32);
  border-radius: 50%;
  animation: farewellSpin 3.4s linear infinite;
}

.farewell-orbit span:nth-child(2) {
  inset: 18%;
  border-color: rgba(34, 197, 94, 0.34);
  animation-duration: 4.6s;
  animation-direction: reverse;
}

.farewell-orbit span:nth-child(3) {
  inset: 1%;
  border-style: dashed;
  border-color: rgba(6, 23, 47, 0.16);
  animation-duration: 5.2s;
}

.farewell-orbit img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(15, 44, 88, 0.22));
  animation: farewellWave 1.7s ease-in-out infinite;
}

.farewell-card h2 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
  color: #06172f;
}

.farewell-card p {
  margin: 0;
  color: #64748b;
  font-weight: 800;
}

.farewell-progress {
  width: min(360px, 100%);
  height: 10px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.farewell-progress span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #0ea5e9);
  transform-origin: left;
  animation: farewellProgress 5s linear forwards;
}

@keyframes ardabytoDance {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
  18% { transform: translateY(-12px) rotate(4deg) scale(1.025); }
  38% { transform: translateY(3px) rotate(-5deg) scale(0.995); }
  58% { transform: translateY(-10px) rotate(5deg) scale(1.02); }
  78% { transform: translateY(2px) rotate(-3deg) scale(1.005); }
}

@keyframes stageFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes neonSpin {
  to { transform: rotate(360deg); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.74; scale: 0.95; }
  50% { opacity: 1; scale: 1.06; }
}

@keyframes sparkOrbit {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.65; }
  35% { transform: translate3d(24px, -22px, 0) scale(1.35); opacity: 1; }
  70% { transform: translate3d(-20px, 18px, 0) scale(0.8); opacity: 0.78; }
}

@keyframes loginSweep {
  0%, 42% { transform: translateX(-120%); }
  72%, 100% { transform: translateX(120%); }
}

@keyframes loginButtonShine {
  0%, 35% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}

@keyframes farewellSpin {
  to { transform: rotate(360deg); }
}

@keyframes farewellWave {
  0%, 100% { transform: translateY(0) rotate(-3deg) scale(1); }
  50% { transform: translateY(-8px) rotate(4deg) scale(1.03); }
}

@keyframes farewellProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 980px) {
  .ardabyto-stage {
    width: min(360px, 78vw);
    min-height: 360px;
  }

  .login-ardabyto {
    width: min(320px, 72vw);
    max-height: 380px;
  }
}

#users .user-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

#users .status-active,
#users .status-inactive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#users .status-active {
  color: #5fffc6;
  background: rgba(30, 255, 180, 0.12);
  box-shadow: inset 0 0 0 1px rgba(95, 255, 198, 0.24), 0 0 18px rgba(95, 255, 198, 0.12);
}

#users .status-inactive {
  color: #ff7b9c;
  background: rgba(255, 70, 120, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 123, 156, 0.24), 0 0 18px rgba(255, 70, 120, 0.10);
}

#users .small-button.danger-mini {
  border-color: rgba(255, 99, 132, 0.35);
  color: #ff9db2;
  background: rgba(255, 99, 132, 0.08);
}

#users .small-button.ok-mini {
  border-color: rgba(70, 255, 190, 0.35);
  color: #70ffd0;
  background: rgba(70, 255, 190, 0.08);
}

#users input[readonly] {
  opacity: 0.86;
  cursor: default;
  border-style: dashed;
}

/* Bulk user selection */
#users .users-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 760px;
}

#users .select-visible-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(120, 228, 255, 0.24);
  border-radius: 999px;
  background: rgba(8, 16, 32, 0.54);
  color: rgba(236, 249, 255, 0.84);
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}

#users .select-visible-line input,
#users .user-row-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #67e8f9;
}

#users .selected-count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #e0f7ff;
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.12), rgba(167, 139, 250, 0.12));
  border: 1px solid rgba(103, 232, 249, 0.22);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

#users .select-col,
#users .select-cell {
  width: 52px;
  min-width: 52px;
  text-align: center;
}

#users .users-bulk-toolbar .small-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

#users tr:has(.user-row-checkbox:checked) td {
  background: rgba(103, 232, 249, 0.08);
}

@media (max-width: 980px) {
  #users .users-bulk-toolbar {
    justify-content: flex-start;
    width: 100%;
  }
}

/* Usuarios: diseño ejecutivo, sombreado y filtro de estatus */
#users .users-table-card,
#users .user-form-card {
  border: 1px solid rgba(18, 62, 109, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 247, 255, 0.86)),
    radial-gradient(circle at top right, rgba(45, 141, 255, 0.16), transparent 36%);
  box-shadow: 0 28px 70px rgba(15, 38, 75, 0.14), inset 0 1px 0 rgba(255,255,255,0.74);
}

#users .users-heading {
  gap: 18px;
  align-items: start;
}

#users .users-bulk-toolbar {
  padding: 10px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(248, 251, 255, 0.92), rgba(226, 240, 255, 0.66));
  box-shadow: 0 18px 44px rgba(15, 44, 88, 0.12);
}

#users .users-status-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 7px 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 24px rgba(37, 99, 235, 0.08);
  color: #183253;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

#users .users-status-filter select {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 28px 0 10px;
  background: linear-gradient(135deg, #ffffff, #eef6ff);
  color: #0f3767;
  font-weight: 900;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.10);
}

#users .small-button,
#users .ghost-button,
#users .primary-button {
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 26px rgba(15, 44, 88, 0.16), inset 0 1px 0 rgba(255,255,255,0.42);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

#users .small-button:hover,
#users .ghost-button:hover,
#users .primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(15, 44, 88, 0.22), 0 0 0 4px rgba(45, 141, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.54);
}

#users .small-button.ghost-mini {
  color: #123a66;
  border-color: rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(230,242,255,0.86));
}

#users .small-button.ok-mini {
  color: #065f46;
  border-color: rgba(16, 185, 129, 0.28);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(167, 243, 208, 0.62));
  box-shadow: 0 12px 26px rgba(16, 185, 129, 0.18), inset 0 1px 0 rgba(255,255,255,0.64);
}

#users .small-button.danger-mini {
  color: #9f1239;
  border-color: rgba(244, 63, 94, 0.26);
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.96), rgba(254, 205, 211, 0.62));
  box-shadow: 0 12px 26px rgba(244, 63, 94, 0.16), inset 0 1px 0 rgba(255,255,255,0.64);
}

#users .select-visible-line {
  background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(230,242,255,0.72));
  border-color: rgba(37, 99, 235, 0.16);
  color: #163052;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.09), inset 0 1px 0 rgba(255,255,255,0.72);
}

#users .selected-count-pill {
  color: #11345a;
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(219,234,254,0.72));
  border-color: rgba(37, 99, 235, 0.16);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.09);
}

#users .status-active {
  color: #047857;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(167, 243, 208, 0.58));
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.22), 0 10px 22px rgba(16, 185, 129, 0.12);
}

#users .status-inactive {
  color: #be123c;
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.95), rgba(254, 205, 211, 0.58));
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.22), 0 10px 22px rgba(244, 63, 94, 0.10);
}

#users tr.hidden-by-user-status {
  display: none !important;
}

@media (max-width: 980px) {
  #users .users-bulk-toolbar {
    border-radius: 18px;
  }
  #users .users-status-filter {
    width: 100%;
    justify-content: space-between;
  }
}


/* Ajuste UX filtro estatus usuarios: arriba, centrado y auto-aplicable */
#users .users-heading {
  flex-direction: column;
  align-items: stretch;
}

#users .users-heading > div:first-child {
  text-align: center;
}

#users .users-table-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 2px 0 4px;
}

#users .users-table-controls .users-status-filter {
  min-width: min(340px, 100%);
  justify-content: center;
  padding: 8px 10px 8px 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(229,242,255,0.78)),
    radial-gradient(circle at top left, rgba(45,141,255,0.16), transparent 42%);
  border-color: rgba(37, 99, 235, 0.20);
  box-shadow: 0 16px 36px rgba(15, 44, 88, 0.14), inset 0 1px 0 rgba(255,255,255,0.82);
}

#users .users-table-controls .users-status-filter span::after {
  content: " · aplica automático";
  color: #64748b;
  font-weight: 800;
  font-size: 0.72rem;
}

#users .users-table-controls .users-status-filter select {
  min-width: 128px;
}

#users .users-bulk-toolbar {
  justify-content: center;
  max-width: none;
  width: 100%;
}

@media (max-width: 980px) {
  #users .users-heading > div:first-child {
    text-align: left;
  }
  #users .users-table-controls {
    justify-content: stretch;
  }
  #users .users-table-controls .users-status-filter {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }
  #users .users-table-controls .users-status-filter span::after {
    content: "";
  }
}

/* Usuarios: alta/modificación ejecutiva conectada a Marcador de voz */
.user-mode-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(45, 120, 220, 0.22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(29, 161, 242, 0.14), rgba(255,255,255,0.82));
  color: #0b2350;
  font-weight: 900;
  letter-spacing: 0.03em;
  box-shadow: 0 16px 36px rgba(38, 94, 167, 0.16);
  margin-bottom: 0.65rem;
}

.user-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.user-admin-grid label {
  min-width: 0;
}

.user-admin-grid input,
.user-admin-grid select {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 1px solid rgba(110, 146, 190, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(12, 31, 61, 0.06);
}

.user-admin-grid input[readonly] {
  background: rgba(235, 243, 252, 0.78);
  color: #516171;
  cursor: not-allowed;
}

.user-form-actions {
  margin-top: 0.75rem;
}

.users-panel .user-form-card {
  align-self: flex-start;
}

@media (max-width: 1100px) {
  .user-admin-grid {
    grid-template-columns: 1fr;
  }
}

/* Status clave del desempeno: VE, EVE, PEN, RS */
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}
.status-ve,
.status-code-ve {
  color: #1e3a8a;
  background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(34, 184, 255, .28));
  border: 1px solid rgba(37, 99, 235, .36);
}
.status-eve,
.status-code-eve {
  color: #064e3b;
  background: linear-gradient(135deg, rgba(16, 185, 129, .18), rgba(20, 184, 166, .28));
  border: 1px solid rgba(16, 185, 129, .36);
}
.status-pen,
.status-code-pen {
  color: #78350f;
  background: linear-gradient(135deg, rgba(245, 158, 11, .18), rgba(251, 191, 36, .32));
  border: 1px solid rgba(245, 158, 11, .36);
}
.status-rs,
.status-code-rs {
  color: #7f1d1d;
  background: linear-gradient(135deg, rgba(239, 68, 68, .16), rgba(244, 63, 94, .28));
  border: 1px solid rgba(239, 68, 68, .36);
}
.chart-panel canvas {
  filter: drop-shadow(0 18px 32px rgba(15, 23, 42, .10));
}

/* Executive analytics charts refresh */
.chart-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, .34);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255,255,255,.78);
}
.chart-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 8%, rgba(34, 184, 255, .12), transparent 26%),
    radial-gradient(circle at 92% 18%, rgba(124, 58, 237, .10), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(241,248,255,.58));
}
.chart-panel > * {
  position: relative;
  z-index: 1;
}
.chart-panel canvas {
  height: 310px;
  margin-top: 4px;
}
.chart-wide canvas {
  height: 360px;
}
.chart-panel .panel-heading h3 {
  letter-spacing: -.03em;
}
.chart-panel .status-chip.muted {
  color: #334155;
  background: rgba(255,255,255,.72);
  border-color: rgba(14, 165, 233, .24);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .07);
}

/* Trámites por lote más amplia y ejecutiva */
.chart-lot-tramites-panel {
  grid-column: 1 / -1;
  min-height: 520px;
}
.chart-lot-tramites-panel canvas {
  height: 430px;
  min-height: 430px;
}
@media (max-width: 900px) {
  .chart-lot-tramites-panel {
    min-height: 560px;
  }
  .chart-lot-tramites-panel canvas {
    height: 470px;
    min-height: 470px;
  }
}

/* Excel validator */
.excel-validator-panel {
  overflow: visible;
}

.excel-flow-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.1fr) minmax(320px, 1.4fr);
  gap: 18px;
  align-items: start;
}

.excel-upload-box {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 14px;
  align-items: end;
}

.excel-upload-box .primary-button {
  grid-column: 1 / -1;
}

.excel-flow-grid select[multiple] {
  min-height: 164px;
  padding: 12px;
  border-radius: 20px;
}

.excel-flow-grid small,
.muted-copy {
  display: block;
  margin-top: 6px;
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}

.excel-validation-actions {
  display: flex;
  gap: 14px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.excel-validation-actions label {
  min-width: 260px;
  flex: 1;
}

.excel-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 14px;
  margin: 8px 0 18px;
}

.excel-summary-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(241,245,249,0.72));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.excel-summary-card span {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.excel-summary-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.7rem;
  color: #0f172a;
}

.excel-summary-card.green { border-color: rgba(34, 197, 94, 0.35); box-shadow: 0 18px 42px rgba(34, 197, 94, 0.13); }
.excel-summary-card.amber { border-color: rgba(245, 158, 11, 0.35); box-shadow: 0 18px 42px rgba(245, 158, 11, 0.13); }
.excel-summary-card.red { border-color: rgba(239, 68, 68, 0.35); box-shadow: 0 18px 42px rgba(239, 68, 68, 0.13); }
.excel-summary-card.gray { border-color: rgba(100, 116, 139, 0.30); }

.excel-export-row {
  justify-content: flex-end;
  margin-bottom: 14px;
}

.validation-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.validation-pill.green { color: #047857; background: rgba(16, 185, 129, 0.13); border-color: rgba(16, 185, 129, 0.35); }
.validation-pill.amber { color: #92400e; background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.35); }
.validation-pill.red { color: #b91c1c; background: rgba(239, 68, 68, 0.13); border-color: rgba(239, 68, 68, 0.35); }
.validation-pill.gray { color: #475569; background: rgba(100, 116, 139, 0.12); }

tr.validation-green td:first-child { border-left: 4px solid #10b981; }
tr.validation-amber td:first-child { border-left: 4px solid #f59e0b; }
tr.validation-red td:first-child { border-left: 4px solid #ef4444; }
tr.validation-gray td:first-child { border-left: 4px solid #94a3b8; }

@media (max-width: 1100px) {
  .excel-flow-grid,
  .excel-upload-box,
  .excel-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Importador de lotes */
.excel-lots-field {
  gap: 10px;
}
.field-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #23608f;
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.12), rgba(76, 201, 240, 0.14));
  border: 1px solid rgba(33, 150, 243, 0.25);
  box-shadow: 0 10px 22px rgba(33, 150, 243, 0.12);
  white-space: nowrap;
}
.excel-lots-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.small-button {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
}
#excel-lots {
  min-height: 160px;
}

/* Importador de lotes - progreso de validacion */
.excel-progress-box {
  margin: 14px 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(66, 153, 225, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 15%, rgba(56, 189, 248, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.72));
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}

.excel-progress-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: #e5f3ff;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.excel-progress-topline strong {
  color: #67e8f9;
  font-size: 1.05rem;
}

.excel-progress-track {
  position: relative;
  overflow: hidden;
  height: 14px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.excel-progress-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%);
  animation: progressShine 1.4s linear infinite;
}

.excel-progress-bar {
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  transition: width 0.35s ease;
  background: linear-gradient(90deg, #22c55e, #06b6d4, #6366f1);
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.46);
}

.excel-progress-detail {
  margin: 10px 0 0;
  color: #b6c6d8;
  font-size: 0.92rem;
}

@keyframes progressShine {
  to { transform: translateX(100%); }
}


/* Cancelación segura del importador de lotes */
.excel-validation-actions .danger-button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(153, 27, 27, 0.92));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 16px 32px rgba(239, 68, 68, 0.22), inset 0 1px 0 rgba(255,255,255,0.25);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.excel-validation-actions .danger-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 20px 42px rgba(239, 68, 68, 0.32), inset 0 1px 0 rgba(255,255,255,0.28);
}

.excel-validation-actions .danger-button:disabled {
  opacity: .65;
  cursor: wait;
}

/* Ardabyto IA flotante tipo burbuja WhatsApp */
.ai-floating-assistant {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  width: 78px;
  height: 78px;
  display: block;
  pointer-events: none;
}

.ai-float-toggle,
.ai-float-panel {
  pointer-events: auto;
}

.ai-float-toggle {
  position: relative;
  width: 78px;
  height: 78px;
  border: 0;
  border-radius: 999px;
  cursor: grab;
  touch-action: none;
  background: linear-gradient(135deg, #16a34a, #22c55e 48%, #0ea5e9);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.24), 0 0 0 8px rgba(34, 197, 94, 0.12);
  display: grid;
  place-items: center;
  animation: ardabytoFloat 3.4s ease-in-out infinite;
}

.ai-float-toggle:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.28), 0 0 0 10px rgba(34, 197, 94, 0.16);
}

.ai-floating-assistant.is-dragging .ai-float-toggle {
  cursor: grabbing;
  animation: none;
}

.ai-floating-assistant.is-left-side .ai-float-panel {
  left: 0;
  right: auto;
  border-radius: 28px 28px 28px 8px;
  transform-origin: bottom left;
}

.ai-float-pulse {
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 2px solid rgba(34, 197, 94, 0.32);
  animation: ardabytoPulse 2.2s ease-out infinite;
}

.ai-float-robot {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 28%, rgba(255,255,255,0.92), rgba(224, 242, 254, 0.74) 46%, rgba(8, 47, 73, 0.18));
  display: grid;
  place-items: center;
  overflow: visible;
  border: 2px solid rgba(255,255,255,0.78);
}

.ai-float-robot img,
.ai-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(15, 23, 42, 0.22));
}

.ai-robot-antenna {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 3px;
  height: 14px;
  background: #e0f2fe;
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: 0 -6px 0 2px #22c55e;
}

.ai-float-badge {
  position: absolute;
  right: -4px;
  bottom: 2px;
  background: #0f172a;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.ai-float-panel {
  position: absolute;
  right: 0;
  bottom: 92px;
  width: min(420px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 130px));
  overflow: auto;
  border-radius: 28px 28px 8px 28px;
  border: 1px solid rgba(34, 197, 94, 0.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 197, 94, 0.16), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(14, 165, 233, 0.16), transparent 32%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.30);
  backdrop-filter: blur(14px);
  transform-origin: bottom right;
  animation: ardabytoPanelIn .24s ease-out;
}

.ai-float-header {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.ai-mini-avatar {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(14,165,233,0.18));
  border: 1px solid rgba(255,255,255,0.86);
}

.ai-mini-avatar::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 3px;
  height: 10px;
  background: #0ea5e9;
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: 0 -5px 0 2px #22c55e;
}

.ai-float-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #0f172a;
}

.ai-float-header p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: .82rem;
  line-height: 1.35;
}

.ai-float-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  font-size: 1.25rem;
  cursor: pointer;
}

.ai-float-close:hover {
  background: rgba(15, 23, 42, 0.12);
}

.ai-float-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px 16px 0;
  margin-top: 0;
}

.ai-float-form .ai-actions {
  justify-content: stretch;
}

.ai-float-form .ai-actions button {
  flex: 1 1 0;
}

.ai-float-panel .ai-answer {
  margin: 14px 16px 16px;
  border-radius: 22px 22px 6px 22px;
}

.ai-float-panel .ai-question-box textarea {
  min-height: 92px;
  background: rgba(255,255,255,0.84);
}

@keyframes ardabytoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes ardabytoPulse {
  0% { opacity: .8; transform: scale(.92); }
  100% { opacity: 0; transform: scale(1.22); }
}

@keyframes ardabytoPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  .ai-floating-assistant {
    right: 16px;
    bottom: 16px;
    width: 68px;
    height: 68px;
  }

  .ai-float-toggle {
    width: 68px;
    height: 68px;
  }

  .ai-float-robot {
    width: 56px;
    height: 56px;
  }
}

canvas.chart-clickable {
  cursor: pointer;
}

.panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.agent-clear-filter {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, .28);
  background: rgba(255,255,255,.84);
  color: #334155;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}
.agent-clear-filter:hover {
  transform: translateY(-1px);
  color: #0f172a;
  border-color: rgba(37, 99, 235, .36);
  background: #fff;
}

/* Enfoque de tablas tipo Power BI */
.dashboard-focus-table tbody tr.dashboard-focus-row {
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.dashboard-focus-table tbody tr.dashboard-focus-row:hover td {
  background: rgba(37, 99, 235, 0.08);
}
.table-focused {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  border-radius: 16px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), 0 18px 45px rgba(15, 23, 42, 0.12);
}
.table-row-selected td {
  background: rgba(37, 99, 235, 0.16) !important;
  font-weight: 800;
}
.table-focus-clear {
  margin-right: 0.35rem;
}

/* Navegacion fija por comportamiento del dashboard */
.dashboard-section-nav {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid rgba(34, 184, 255, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(12px);
}

.dashboard-section-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  color: #0f172a;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255,255,255,0.92));
  text-decoration: none;
  font-weight: 900;
  font-size: 0.9rem;
}

.dashboard-section-nav a:hover,
.dashboard-section-nav a:focus-visible {
  color: #ffffff;
  border-color: rgba(0, 119, 217, 0.36);
  background: linear-gradient(135deg, var(--ardaby-cyan), var(--ardaby-blue));
  outline: none;
  transform: translateY(-1px);
}

.dashboard-behavior-section {
  scroll-margin-top: 92px;
  margin: 22px 0 30px;
}

.behavior-section-heading {
  margin: 0 0 14px;
  padding: 18px 20px;
  border: 1px solid rgba(34, 184, 255, 0.18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(239,246,255,0.82));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.behavior-section-heading h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

@media (max-width: 760px) {
  .dashboard-section-nav {
    top: 8px;
    gap: 8px;
  }

  .dashboard-section-nav a {
    flex: 1 1 100%;
  }
}

/* Layout dinamico 100% responsivo: acomoda tarjetas sin huecos visibles */
.dashboard-behavior-section {
  --dashboard-card-min: clamp(280px, 32vw, 520px);
}

.dashboard-behavior-section .charts-grid,
.dashboard-behavior-section .analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--dashboard-card-min)), 1fr));
  grid-auto-flow: row dense;
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
  width: 100%;
}

.dashboard-behavior-section .charts-grid > *,
.dashboard-behavior-section .analytics-grid > * {
  min-width: 0;
}

.dashboard-behavior-section .panel {
  height: 100%;
  margin-bottom: 0;
  min-width: 0;
}

.dashboard-behavior-section .chart-panel {
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 34vw, 440px);
}

.dashboard-behavior-section .chart-panel canvas {
  flex: 1 1 auto;
  min-height: 240px;
  max-height: 440px;
}

.dashboard-behavior-section .chart-wide {
  grid-column: span 2;
}

.dashboard-behavior-section .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.dashboard-section-nav {
  top: max(8px, env(safe-area-inset-top));
}

@media (max-width: 1280px) {
  .dashboard-behavior-section {
    --dashboard-card-min: clamp(280px, 46vw, 560px);
  }
}

@media (max-width: 980px) {
  .dashboard-behavior-section {
    --dashboard-card-min: 100%;
  }

  .dashboard-behavior-section .chart-wide {
    grid-column: 1 / -1;
  }

  .dashboard-behavior-section .chart-panel {
    min-height: 320px;
  }
}

@media (max-width: 620px) {
  .dashboard-behavior-section .charts-grid,
  .dashboard-behavior-section .analytics-grid {
    gap: 12px;
  }

  .dashboard-behavior-section .panel {
    padding: 16px;
    border-radius: 20px;
  }

  .dashboard-behavior-section .panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .dashboard-behavior-section .chart-panel {
    min-height: 300px;
  }

  .dashboard-behavior-section .chart-panel canvas,
  .dashboard-behavior-section .chart-wide canvas {
    min-height: 220px;
    max-height: 340px;
  }
}

/* Fix responsive analytics filters: allow the filter row to wrap naturally and avoid overlaps */
.dashboard-controls .panel-heading {
  flex-wrap: wrap;
  align-items: flex-start;
}

.dashboard-controls .panel-heading .status-chip {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.dashboard-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 16px;
  align-items: end;
}

.dashboard-filter-grid label {
  min-width: 0;
}

.dashboard-filter-grid input,
.dashboard-filter-grid select {
  min-width: 0;
  width: 100%;
}

.dashboard-filter-grid .filter-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
  min-width: min(100%, 260px);
  align-self: end;
}

.dashboard-filter-grid .filter-actions button {
  width: 100%;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dashboard-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 560px) {
  .dashboard-filter-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-filter-grid .filter-actions {
    grid-template-columns: 1fr;
  }
}


/* Ajustes branding solicitado */
.brand-logo {
  width: 118px;
  max-height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.18));
}
.brand .brand-copy h1 {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.topbar-logo {
  width: clamp(120px, 18vw, 190px);
  max-height: 58px;
  object-fit: contain;
}
.topbar-brand h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  text-transform: lowercase;
}
.metric-card.hidden {
  display: none !important;
}
@media (max-width: 720px) {
  .topbar { align-items: flex-start; }
  .topbar-brand { width: 100%; }
  .topbar-logo { width: min(58vw, 170px); }
}


/* Branding fresco: logo ARDABY TEC + Ardabyto animado */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-mascot-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  border: 1px solid rgba(186, 230, 253, 0.72);
  background:
    radial-gradient(circle at 34% 24%, rgba(34, 211, 238, 0.30), transparent 42%),
    radial-gradient(circle at 78% 78%, rgba(37, 99, 235, 0.14), transparent 44%),
    rgba(255, 255, 255, 0.58);
  box-shadow: 0 16px 42px rgba(14, 165, 233, 0.18), inset 0 1px 0 rgba(255,255,255,0.80);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  overflow: hidden;
}

.brand-mascot-glass::before {
  content: "";
  position: absolute;
  inset: -42%;
  z-index: -1;
  background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.72) 45%, transparent 72%);
  filter: blur(12px);
  animation: ardabytoShine 4.6s ease-in-out infinite;
}

.brand-mascot-glass::after {
  content: "";
  position: absolute;
  inset: auto 14% 8% 14%;
  height: 16px;
  z-index: -1;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.18);
  filter: blur(10px);
}

.topbar-mascot-brand {
  min-width: 96px;
  height: 62px;
  padding: 4px 14px;
  border-radius: 22px;
}

.sidebar-mascot-brand {
  width: 74px;
  height: 56px;
  padding: 3px 8px;
  border-radius: 18px;
}

.ardabyto-gif {
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 10px 18px rgba(8, 47, 73, 0.18));
}

.topbar-ardabyto-gif {
  width: 76px;
  height: 56px;
}

.sidebar-ardabyto-gif {
  width: 54px;
  height: 46px;
}

@keyframes ardabytoShine {
  0%, 100% { transform: translateX(-32%) rotate(12deg); opacity: .35; }
  45% { transform: translateX(38%) rotate(12deg); opacity: .78; }
}

@media (max-width: 720px) {
  .topbar-brand {
    flex-wrap: wrap;
  }
  .topbar-mascot-brand {
    height: 54px;
    min-width: 82px;
    padding-inline: 10px;
  }
  .topbar-ardabyto-gif {
    width: 66px;
    height: 48px;
  }
}

.topbar-brand > div:not(.brand-mascot-glass) { min-width: 0; }


/* Escalabilidad de tablas tipo Power BI */
.table-scale-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8990;
  display: none;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.table-scale-open {
  overflow: hidden;
}

body.table-scale-open .table-scale-backdrop {
  display: block;
}

.table-scale-container {
  transition: transform .22s ease, box-shadow .22s ease, width .22s ease, height .22s ease;
}

.table-scale-toggle {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font-size: 1.05rem;
  line-height: 1;
}

.table-scale-container.table-scaled {
  position: fixed !important;
  z-index: 9000;
  inset: clamp(12px, 2vw, 28px) !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.32) !important;
  overflow: hidden !important;
}

.table-scale-container.table-scaled > .panel-heading,
.table-scale-container.table-scaled > .table-heading {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  padding-right: clamp(14px, 2vw, 24px);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(224,242,254,.88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.table-scale-container.table-scaled .table-wrap {
  flex: 1 1 auto;
  max-height: none !important;
  height: 100% !important;
  overflow: auto !important;
  border-radius: 0 0 24px 24px;
}

.table-scale-container.table-scaled table {
  min-width: 100%;
  font-size: clamp(.9rem, .78rem + .35vw, 1.06rem);
}

.table-scale-container.table-scaled th,
.table-scale-container.table-scaled td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.table-scale-container.table-scaled thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(248, 250, 252, .98);
}

@media (max-width: 720px) {
  .table-scale-container.table-scaled {
    inset: 8px !important;
    border-radius: 20px !important;
  }
  .table-scale-container.table-scaled .table-wrap {
    border-radius: 0 0 18px 18px;
  }
}

/* Header limpio sin Ardabyto reciente */
.clean-brand-accent {
  min-width: 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  opacity: .68;
}
.clean-brand-accent::after {
  inset: 22% 18%;
  height: auto;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,211,238,.38), rgba(37,99,235,.14) 62%, transparent 72%);
  filter: blur(8px);
}
.clean-brand-accent .ardabyto-gif {
  display: none !important;
}

/* Refresh individual por gráfica + auto-refresh silencioso */
.chart-refresh-button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, .28);
  background: rgba(255, 255, 255, .86);
  color: #334155;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.chart-refresh-button:hover {
  transform: translateY(-1px) rotate(12deg);
  color: #0f172a;
  border-color: rgba(37, 99, 235, .36);
  background: #fff;
}
.chart-refresh-button.is-refreshing {
  animation: chartRefreshSpin .7s linear infinite;
}
@keyframes chartRefreshSpin {
  to { transform: rotate(360deg); }
}

/* Drill-down por día en cada gráfica/tabla */
.day-drill-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border: 1px solid rgba(14, 165, 233, .22);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.day-drill-control.active {
  border-color: rgba(37, 99, 235, .42);
  background: rgba(219, 234, 254, .86);
  color: #1d4ed8;
}
.day-drill-control select {
  max-width: 138px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  cursor: pointer;
}
.day-drill-clear {
  width: 24px;
  height: 24px;
  font-size: 13px;
  box-shadow: none;
}
@media (max-width: 760px) {
  .panel-heading {
    align-items: flex-start;
  }
  .day-drill-control {
    width: 100%;
    justify-content: space-between;
    border-radius: 14px;
  }
  .day-drill-control select {
    flex: 1;
    max-width: none;
  }
}


/* Header sin logo + orbe animado solicitado */
.brand-orb-only,
.topbar-orb-only {
  gap: 0;
}
.brand-orb-only {
  justify-content: center;
}
.animated-brand-orb {
  opacity: .42;
  transform-origin: center;
  animation: brandOrbFade 2.8s ease-in-out infinite;
}
.animated-brand-orb::before {
  animation: ardabytoShine 4.6s ease-in-out infinite, brandOrbHalo 2.8s ease-in-out infinite;
}
.animated-brand-orb::after {
  animation: brandOrbSoftGlow 2.8s ease-in-out infinite;
}
@keyframes brandOrbFade {
  0%, 100% {
    opacity: .30;
    transform: scale(.88);
    filter: blur(.2px) saturate(.95);
  }
  48% {
    opacity: .92;
    transform: scale(1.05);
    filter: blur(0) saturate(1.22);
  }
}
@keyframes brandOrbHalo {
  0%, 100% { opacity: .22; }
  50% { opacity: .76; }
}
@keyframes brandOrbSoftGlow {
  0%, 100% {
    opacity: .38;
    transform: scale(.8);
  }
  50% {
    opacity: .92;
    transform: scale(1.12);
  }
}

/* Marca de agua de ultima actualizacion del tablero */
.dashboard-last-update-watermark {
  position: fixed;
  right: clamp(14px, 2.2vw, 34px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 40;
  pointer-events: none;
  user-select: none;
  max-width: min(88vw, 520px);
  padding: 10px 16px;
  border: 1px solid rgba(14, 165, 233, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .46);
  color: rgba(15, 23, 42, .36);
  font-size: clamp(11px, .76rem, 13px);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
  backdrop-filter: blur(12px) saturate(1.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.18);
}
body:not(.role-admin) .dashboard-last-update-watermark,
#app-shell.hidden .dashboard-last-update-watermark {
  display: none;
}
body.role-supervisor .dashboard-last-update-watermark {
  display: block;
}
@media (max-width: 720px) {
  .dashboard-last-update-watermark {
    right: 10px;
    bottom: 10px;
    max-width: calc(100vw - 20px);
    padding: 8px 12px;
    font-size: 10px;
  }
}

/* Correccion: mantener logo en encabezado, quitar solo del menu lateral y centrar orbe */
.topbar-brand-with-logo {
  position: relative;
  flex: 1 1 auto;
  min-height: 68px;
  justify-content: flex-start;
  padding-right: clamp(80px, 14vw, 180px);
}
.topbar-brand-with-logo .topbar-logo {
  display: block !important;
  width: clamp(138px, 18vw, 220px);
  max-height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.20));
}
.topbar-centered-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}
.animated-brand-orb.topbar-centered-orb {
  animation: brandOrbFadeCentered 2.8s ease-in-out infinite;
}
@keyframes brandOrbFadeCentered {
  0%, 100% {
    opacity: .30;
    transform: translate(-50%, -50%) scale(.88);
    filter: blur(.2px) saturate(.95);
  }
  48% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(1.05);
    filter: blur(0) saturate(1.22);
  }
}
.sidebar-orb-centered {
  position: relative;
  justify-content: center !important;
  min-height: 82px;
  padding-inline: 54px;
}
.sidebar-orb-centered .sidebar-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar-orb-centered .sidebar-mascot-brand {
  margin-inline: auto;
}
@media (max-width: 720px) {
  .topbar-brand-with-logo {
    width: 100%;
    min-height: 62px;
    padding-right: 0;
  }
  .topbar-brand-with-logo .topbar-logo {
    width: min(48vw, 180px);
  }
  .topbar-centered-orb {
    left: auto;
    right: 8px;
  }
  .animated-brand-orb.topbar-centered-orb {
    animation: brandOrbFadeCenteredMobile 2.8s ease-in-out infinite;
  }
  @keyframes brandOrbFadeCenteredMobile {
    0%, 100% { opacity: .30; transform: translateY(-50%) scale(.88); filter: blur(.2px) saturate(.95); }
    48% { opacity: .92; transform: translateY(-50%) scale(1.05); filter: blur(0) saturate(1.22); }
  }
}

/* Ajustes finales: header limpio, orbe centrado y tablas sin romper layout */
.topbar {
  overflow: hidden;
}
.topbar-brand-with-logo {
  display: grid;
  grid-template-columns: minmax(140px, 240px) 1fr minmax(70px, 120px);
  align-items: center;
  width: 100%;
  padding-right: 0 !important;
}
.topbar-brand-with-logo .topbar-logo {
  grid-column: 1;
  justify-self: start;
}
.topbar-centered-orb {
  grid-column: 2;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  justify-self: center;
  transform: none !important;
}
.animated-brand-orb.topbar-centered-orb {
  animation: brandOrbFadeClean 2.8s ease-in-out infinite !important;
}
@keyframes brandOrbFadeClean {
  0%, 100% { opacity: .30; transform: scale(.88); filter: blur(.2px) saturate(.95); }
  48% { opacity: .92; transform: scale(1.05); filter: blur(0) saturate(1.22); }
}

.panel:has(table) {
  overflow: hidden;
}
.table-wrap,
.panel table {
  max-width: 100%;
}
.panel table {
  table-layout: auto;
}
.panel:has(table) .table-scroll,
.panel:has(table) .table-container,
.panel:has(table) .panel-body {
  overflow-x: auto;
}
#agent-kpis-table td,
#agent-kpis-table th {
  white-space: nowrap;
}
#agent-kpis-table td:nth-child(2),
#agent-kpis-table th:nth-child(2) {
  min-width: 320px;
}
.performance-badge {
  min-width: 190px;
  max-width: 240px;
}
.dashboard-last-update-watermark {
  right: clamp(18px, 2vw, 32px);
  bottom: clamp(18px, 2vw, 32px);
  z-index: 12;
  opacity: .78;
  transform: translateZ(0);
}
body.sidebar-open .dashboard-last-update-watermark {
  opacity: .32;
}
@media (max-width: 720px) {
  .topbar-brand-with-logo {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .topbar-centered-orb {
    grid-column: 2;
  }
  #agent-kpis-table td:nth-child(2),
  #agent-kpis-table th:nth-child(2) {
    min-width: 240px;
  }
}


/* Fix tendencia: evita empalmes dentro de la grafica diaria */
#chart-daily {
  height: clamp(400px, 42vw, 500px) !important;
  min-height: 400px !important;
}
#chart-daily.closest-fix {}
article.chart-panel:has(#chart-daily) {
  min-height: clamp(500px, 48vw, 620px) !important;
  overflow: hidden;
}
article.chart-panel:has(#chart-daily) .panel-heading {
  align-items: flex-start;
  gap: 14px;
}
.dashboard-last-update-watermark {
  z-index: 6 !important;
  opacity: .46 !important;
  transform: scale(.92);
  transform-origin: right bottom;
}
.dashboard-last-update-watermark:hover {
  opacity: .72 !important;
}
@media (max-width: 900px) {
  #chart-daily {
    height: 440px !important;
    min-height: 440px !important;
  }
  article.chart-panel:has(#chart-daily) {
    min-height: 560px !important;
  }
}

.status-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 180px;
}

.link-button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--primary-2);
  background: transparent;
  font-weight: 900;
  text-align: left;
}

.link-button:hover {
  text-decoration: underline;
}

.supervisor-hero {
  display: grid;
  gap: 18px;
}

.supervisor-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.supervisor-kpis > div {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.supervisor-kpis span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.supervisor-kpis strong {
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
}

.supervisor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.supervisor-list-panel small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
}

.selected-row {
  background: rgba(14, 165, 233, 0.08);
  box-shadow: inset 3px 0 0 var(--primary);
}

.supervisor-screen-stage {
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: #0f172a;
}

.supervisor-screen-stage img {
  width: 100%;
  height: 100%;
  max-height: 68vh;
  object-fit: contain;
  display: block;
}

.supervisor-screen-empty {
  color: #cbd5e1;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .supervisor-layout,
  .supervisor-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .supervisor-layout,
  .supervisor-kpis {
    grid-template-columns: 1fr;
  }

  .supervisor-screen-stage {
    min-height: 280px;
  }
}


/* UI refresh dashboard/lotes */
.topbar {
  padding: 12px 16px;
  min-height: 68px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.topbar-logo {
  width: clamp(104px, 14vw, 156px);
  max-height: 42px;
}
.topbar-mascot-brand {
  transform: scale(.82);
  transform-origin: left center;
}
.dashboard-controls {
  padding: 14px 16px;
}
.dashboard-controls .panel-heading {
  margin-bottom: 10px;
}
.metrics-grid {
  gap: 12px;
}
.metric-card {
  padding: 14px 16px;
  border-radius: 20px;
}
.welcome-user-pill {
  gap: 9px;
  max-width: 340px;
  padding: 6px 12px 6px 7px;
  border-color: rgba(14, 165, 233, .24);
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(239,246,255,.74));
}
.welcome-user-gif {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(37,99,235,.18);
}
.welcome-user-copy {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}
.welcome-user-label {
  color: #0284c7;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.welcome-user-copy strong,
.welcome-user-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.welcome-user-copy strong {
  color: #0f172a;
  font-size: .84rem;
}
.welcome-user-copy small {
  color: #64748b;
  font-size: .68rem;
  font-weight: 800;
}
.sidebar {
  padding: 22px 16px;
  background:
    radial-gradient(circle at 20% 8%, rgba(56,189,248,.34), transparent 30%),
    radial-gradient(circle at 92% 72%, rgba(99,102,241,.24), transparent 32%),
    linear-gradient(180deg, rgba(2,6,23,.98), rgba(15,23,42,.96));
}
.sidebar::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(15,23,42,.46), rgba(2,6,23,.72));
}
.tabs {
  gap: 8px;
  margin-top: 24px;
}
.tab {
  position: relative;
  padding: 12px 14px 12px 42px;
  border-radius: 18px;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.065);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tab::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(125,211,252,.55);
  box-shadow: 0 0 0 6px rgba(14,165,233,.10);
  transform: translateY(-50%);
}
.tab:hover {
  transform: translateX(3px);
  background: rgba(255,255,255,.12);
  border-color: rgba(125,211,252,.24);
}
.tab.active {
  background: linear-gradient(135deg, rgba(14,165,233,.34), rgba(37,99,235,.20));
  border-color: rgba(125,211,252,.44);
  box-shadow: 0 16px 34px rgba(14,165,233,.16), inset 0 1px 0 rgba(255,255,255,.16);
}
.tab.active::before {
  background: #ffffff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.16), 0 0 18px rgba(125,211,252,.8);
}
.lot-analysis-heading {
  align-items: flex-start;
  gap: 16px;
}
.lot-heading-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}
.lot-status-filter {
  display: grid;
  gap: 6px;
  min-width: 230px;
  font-weight: 900;
  color: #0f172a;
}
.lot-status-filter span {
  font-size: .72rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #2563eb;
}
.lot-status-filter select {
  min-height: 94px;
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 16px;
  padding: 8px 10px;
  background: rgba(255,255,255,.88);
  color: #0f172a;
  font-weight: 800;
  outline: none;
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
}
.lot-status-filter select:focus {
  border-color: rgba(37,99,235,.48);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}
.lot-status-filter small {
  color: #64748b;
  font-weight: 700;
}
.lot-status-clear {
  margin-top: 22px;
}
.chart-lot-records-panel canvas,
.chart-lot-tramites-panel canvas {
  min-height: 340px;
}
@media (max-width: 900px) {
  .topbar {
    align-items: flex-start;
  }
  .lot-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .lot-status-filter {
    min-width: min(100%, 320px);
  }
}
@media (max-width: 620px) {
  .welcome-user-pill {
    max-width: 210px;
  }
  .welcome-user-gif {
    width: 30px;
    height: 30px;
  }
  .lot-heading-actions,
  .lot-status-filter,
  .lot-status-clear {
    width: 100%;
  }
}

/* Ajuste solicitado: botones del encabezado justificados y consistentes */
.topbar-actions {
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: stretch;
}
.topbar-actions .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  text-align: center;
  white-space: nowrap;
}
.topbar-actions .sidebar-toggle {
  min-width: 122px;
}
@media (max-width: 900px) {
  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }
  .topbar-actions .ghost-button {
    flex: 1 1 130px;
  }
}

/* V3: encabezado tipo Facebook + detalle de lotes */
.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) !important;
}
.app-shell.sidebar-collapsed .workspace {
  grid-column: 1 / -1;
}
.topbar {
  display: grid !important;
  grid-template-columns: minmax(190px, 260px) minmax(360px, 1fr) minmax(330px, auto) !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 86px !important;
  padding: 12px 18px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(203, 213, 225, .78) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .12) !important;
  backdrop-filter: blur(18px);
}
.topbar-brand-with-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0;
  padding-right: 14px !important;
  border-right: 1px solid rgba(226, 232, 240, .95);
}
.topbar-brand-with-logo .topbar-logo {
  width: clamp(150px, 16vw, 220px) !important;
  max-height: 58px !important;
  object-fit: contain;
}
.topbar-fb-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(6px, 1.1vw, 14px);
  min-width: 0;
  height: 66px;
}
.topbar-fb-nav .topbar-nav-item {
  appearance: none;
  flex: 1 1 0;
  min-width: 76px;
  max-width: 124px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 7px 8px;
  border: 0 !important;
  border-bottom: 4px solid transparent !important;
  border-radius: 16px 16px 4px 4px !important;
  background: transparent !important;
  color: #0f172a !important;
  font-weight: 900;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.topbar-fb-nav .topbar-nav-item::before,
.topbar-fb-nav .topbar-nav-item::after {
  content: none !important;
}
.topbar-fb-nav .topbar-nav-item:hover {
  transform: translateY(-1px);
  background: rgba(239, 246, 255, .9) !important;
  color: #0b5ce0 !important;
}
.topbar-fb-nav .topbar-nav-item.active {
  background: linear-gradient(180deg, rgba(219, 234, 254, .95), rgba(239, 246, 255, .55)) !important;
  border-bottom-color: #0b72ff !important;
  color: #075ad6 !important;
}
.topbar-nav-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 1.35rem;
  line-height: 1;
}
.topbar-fb-nav .active .topbar-nav-icon {
  background: rgba(37, 99, 235, .12);
  box-shadow: 0 12px 22px rgba(37, 99, 235, .16);
}
.topbar-actions {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) minmax(118px, auto) minmax(104px, auto) !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 12px !important;
  flex: unset !important;
}
.topbar-actions .sidebar-toggle {
  display: none !important;
}
.welcome-user-pill {
  max-width: none !important;
  min-height: 58px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.welcome-user-gif {
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(191, 219, 254, .9);
}
.welcome-user-label {
  color: #0b72ff !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  font-size: .82rem !important;
}
.welcome-user-copy strong {
  font-size: 1.02rem !important;
}
.topbar-actions .ghost-button {
  min-width: 104px !important;
  height: 48px;
  border-radius: 12px !important;
  font-weight: 900 !important;
}
#refresh-all {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #0b72ff, #075ad6) !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, .22) !important;
}
#logout-button {
  background: rgba(255,255,255,.9) !important;
}
.lot-detail-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 18px;
  background: rgba(248, 250, 252, .86);
  border: 1px solid rgba(226, 232, 240, .9);
}
.lot-detail-toolbar label,
.lot-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lot-detail-toolbar span {
  font-size: .78rem;
  font-weight: 900;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#lot-detail-select,
#lot-detail-status {
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.94);
  color: #0f172a;
  font-weight: 800;
  outline: none;
}
#lot-detail-select { min-width: 260px; }
.lot-detail-panel {
  margin-top: 14px;
  border-radius: 24px !important;
}
.lot-detail-heading {
  align-items: flex-start !important;
  gap: 16px;
}
.lot-detail-actions {
  margin-left: auto;
  align-items: flex-start;
}
#lot-detail-status {
  min-width: 220px;
  min-height: 120px;
}
.lot-detail-status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}
.lot-status-card {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.lot-status-card span {
  display: block;
  color: #64748b;
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}
.lot-status-card strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 1.45rem;
}
.lot-kpi-select {
  width: 100%;
  justify-content: flex-start !important;
  padding: 0 !important;
  font-weight: 950 !important;
}
.lot-detail-table-wrap tbody td {
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: 1fr !important;
  }
  .topbar-brand-with-logo { border-right: 0; justify-content: center !important; }
  .topbar-fb-nav { order: 2; overflow-x: auto; justify-content: flex-start; }
  .topbar-actions { order: 3; grid-template-columns: 1fr 1fr !important; }
  .welcome-user-pill { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .topbar-actions { grid-template-columns: 1fr !important; }
  .topbar-fb-nav .topbar-nav-item { min-width: 82px; }
  .lot-detail-actions, .lot-detail-toolbar label, #lot-detail-select, #lot-detail-status { width: 100%; }
}

/* V4: sidebar control manual + responsive polish */
:root {
  --sidebar-width-v4: 250px;
  --topbar-radius-v4: 22px;
}

.app-shell {
  grid-template-columns: var(--sidebar-width-v4) minmax(0, 1fr) !important;
  transition: grid-template-columns .24s ease !important;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) !important;
}

.app-shell.sidebar-collapsed .workspace,
.app-shell.sidebar-visible .workspace {
  grid-column: 2 / -1;
}

.app-shell.sidebar-collapsed .workspace {
  grid-column: 1 / -1;
}

.sidebar {
  width: var(--sidebar-width-v4) !important;
  min-width: var(--sidebar-width-v4) !important;
  max-width: var(--sidebar-width-v4) !important;
  transform: none !important;
  opacity: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-right: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-16px) !important;
}

.app-shell.sidebar-collapsed .brand,
.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .sidebar-close,
.app-shell.sidebar-collapsed .tabs,
.app-shell.sidebar-collapsed .tab {
  opacity: 0 !important;
  pointer-events: none !important;
}

.sidebar-peek {
  display: none !important;
}

.sidebar-scrim {
  display: none !important;
}

.sidebar-close {
  display: inline-grid !important;
  place-items: center;
}

.topbar {
  grid-template-columns: minmax(180px, 240px) minmax(320px, 1fr) minmax(480px, auto) !important;
  position: sticky;
  top: 14px;
  z-index: 30;
  width: 100%;
}

.topbar-fb-nav {
  min-width: 0 !important;
  overflow-x: auto;
  scrollbar-width: thin;
}

.topbar-fb-nav .topbar-nav-item {
  flex: 0 0 clamp(74px, 9vw, 116px) !important;
}

.topbar-actions {
  grid-template-columns: minmax(130px, auto) minmax(156px, auto) minmax(112px, auto) minmax(104px, auto) !important;
  min-width: 0 !important;
}

.topbar-actions .sidebar-toggle {
  display: inline-flex !important;
  min-width: 156px !important;
  height: 48px !important;
  color: #0f172a !important;
  border: 1px solid rgba(203, 213, 225, .95) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08) !important;
}

.topbar-actions .sidebar-toggle:hover {
  color: #075ad6 !important;
  border-color: rgba(37, 99, 235, .28) !important;
  background: rgba(239, 246, 255, .96) !important;
}

.dashboard-filter-grid,
.filter-grid,
.supervisor-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.kpi-grid,
.dashboard-kpis,
.lot-status-summary,
.lot-detail-status-cards {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

.panel,
.metric-card,
.kpi-card,
.dashboard-controls,
.lot-detail-panel {
  min-width: 0 !important;
}

.chart-card,
.chart-panel,
.lot-chart-panel,
.lot-detail-table-wrap,
.table-wrapper,
.data-table-wrap {
  min-width: 0 !important;
  overflow-x: auto !important;
}

canvas,
.chart-card canvas,
.chart-panel canvas {
  max-width: 100% !important;
}

@media (max-width: 1320px) {
  :root { --sidebar-width-v4: 232px; }
  .workspace { padding: 20px !important; }
  .topbar {
    grid-template-columns: minmax(170px, 220px) minmax(300px, 1fr) minmax(430px, auto) !important;
    gap: 12px !important;
  }
  .topbar-brand-with-logo .topbar-logo {
    width: clamp(138px, 15vw, 190px) !important;
  }
  .topbar-actions {
    grid-template-columns: minmax(116px, auto) minmax(146px, auto) minmax(108px, auto) minmax(96px, auto) !important;
    gap: 8px !important;
  }
}

@media (max-width: 1120px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    display: grid !important;
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }
  .app-shell.sidebar-visible {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }
  .workspace,
  .app-shell.sidebar-visible .workspace,
  .app-shell.sidebar-collapsed .workspace {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
    padding-top: 18px !important;
  }
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 75 !important;
    width: min(292px, 86vw) !important;
    min-width: min(292px, 86vw) !important;
    max-width: min(292px, 86vw) !important;
    height: 100vh !important;
    padding: 22px 16px !important;
    transform: translateX(-110%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: 28px 0 90px rgba(6,23,47,.32) !important;
  }
  .app-shell.sidebar-open .sidebar,
  .app-shell.sidebar-visible:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0) !important;
  }
  .app-shell.sidebar-collapsed .sidebar {
    transform: translateX(-110%) !important;
    opacity: 1 !important;
    width: min(292px, 86vw) !important;
    min-width: min(292px, 86vw) !important;
    max-width: min(292px, 86vw) !important;
    padding: 22px 16px !important;
  }
  .app-shell.sidebar-collapsed .brand,
  .app-shell.sidebar-collapsed .brand-copy,
  .app-shell.sidebar-collapsed .sidebar-close,
  .app-shell.sidebar-collapsed .tabs,
  .app-shell.sidebar-collapsed .tab,
  .app-shell.sidebar-open .brand,
  .app-shell.sidebar-open .brand-copy,
  .app-shell.sidebar-open .sidebar-close,
  .app-shell.sidebar-open .tabs,
  .app-shell.sidebar-open .tab {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .sidebar-scrim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 70 !important;
    display: block !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(2, 8, 23, .28) !important;
    backdrop-filter: blur(8px) saturate(130%) !important;
  }
  .app-shell.sidebar-open .sidebar-scrim,
  .app-shell.sidebar-visible:not(.sidebar-collapsed) .sidebar-scrim {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .topbar {
    position: relative !important;
    top: auto !important;
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
  .topbar-brand-with-logo {
    justify-content: center !important;
    border-right: 0 !important;
  }
  .topbar-fb-nav {
    order: 2;
    justify-content: flex-start !important;
    height: auto !important;
    padding-bottom: 4px;
  }
  .topbar-actions {
    order: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  .welcome-user-pill {
    grid-column: 1 / -1;
    justify-content: center !important;
  }
}

@media (max-width: 720px) {
  .workspace { padding: 12px !important; }
  .topbar { border-radius: 18px !important; }
  .topbar-actions {
    grid-template-columns: 1fr !important;
  }
  .topbar-actions .ghost-button,
  .topbar-actions .sidebar-toggle {
    width: 100% !important;
    min-width: 0 !important;
  }
  .topbar-brand-with-logo .topbar-logo {
    width: min(190px, 78vw) !important;
  }
  .topbar-fb-nav .topbar-nav-item {
    flex-basis: 86px !important;
    min-width: 86px !important;
  }
  .dashboard-section-nav,
  .section-switcher,
  .lot-detail-toolbar,
  .lot-detail-heading,
  .panel-heading {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .lot-detail-actions,
  .lot-detail-toolbar label,
  #lot-detail-select,
  #lot-detail-status {
    width: 100% !important;
  }
  .table-wrapper table,
  .data-table-wrap table,
  .lot-detail-table-wrap table {
    min-width: 760px;
  }
}

@media (max-width: 420px) {
  .topbar-fb-nav .topbar-nav-item {
    flex-basis: 78px !important;
    min-width: 78px !important;
    font-size: .78rem !important;
  }
  .welcome-user-gif {
    width: 44px !important;
    height: 44px !important;
  }
  .welcome-user-copy strong {
    font-size: .92rem !important;
  }
}

/* V5 dashboard principal: vista ejecutiva tipo FB, responsiva */
.workspace {
  min-width: 0;
}
#dashboard {
  display: grid;
  gap: 16px;
}
.dashboard-main-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 6% 0%, rgba(37, 99, 235, .14), transparent 34%),
    radial-gradient(circle at 98% 10%, rgba(14, 165, 233, .15), transparent 32%),
    rgba(255,255,255,.92) !important;
  border: 1px solid rgba(203, 213, 225, .76) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
}
.dashboard-main-hero h1 {
  margin: 2px 0 6px;
  font-size: clamp(1.42rem, 2.1vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  color: #0f172a;
}
.dashboard-main-hero p:not(.eyebrow) {
  margin: 0;
  max-width: 850px;
  color: #64748b;
  font-weight: 750;
}
.hero-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}
.dashboard-live-dot {
  color: #065f46 !important;
  background: rgba(16,185,129,.12) !important;
  border-color: rgba(16,185,129,.24) !important;
}
.status-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
}
.status-overview-card {
  position: relative;
  overflow: hidden;
  min-height: 120px;
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(203, 213, 225, .78);
  box-shadow: 0 18px 40px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.75);
}
.status-overview-card::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 18px;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: currentColor;
  opacity: .10;
}
.status-overview-card span {
  display: block;
  color: currentColor;
  font-size: .93rem;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.status-overview-card strong {
  display: block;
  margin-top: 10px;
  color: #0f172a;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: .96;
  letter-spacing: -.04em;
}
.status-overview-card small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-weight: 850;
}
.status-card-new { color: #0b72ff; }
.status-card-aa { color: #16a34a; }
.status-card-cc { color: #7c3aed; }
.status-card-dncl { color: #f97316; }
.status-card-blank { color: #64748b; }
.executive-kpi-grid {
  grid-template-columns: repeat(5, minmax(160px, 1fr)) !important;
}
.executive-kpi-grid .metric-card {
  min-height: 112px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,246,255,.74));
}
.dashboard-controls {
  border-radius: 24px !important;
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(16px);
}
.dashboard-filter-grid {
  grid-template-columns: repeat(7, minmax(130px, 1fr)) !important;
  align-items: end;
}
.dashboard-filter-grid .filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dashboard-section-nav {
  position: sticky;
  top: 8px;
  z-index: 5;
  padding: 10px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(203, 213, 225, .68) !important;
  box-shadow: 0 16px 32px rgba(15,23,42,.08) !important;
  backdrop-filter: blur(16px);
}
.dashboard-section-nav a {
  border-radius: 999px !important;
  background: rgba(248,250,252,.94) !important;
  border: 1px solid rgba(203,213,225,.8) !important;
  color: #0f172a !important;
  font-weight: 950 !important;
}
.dashboard-section-nav a:hover {
  transform: translateY(-1px);
  color: #0b72ff !important;
  background: rgba(219,234,254,.95) !important;
}
.behavior-section-heading {
  padding: 20px 22px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(203,213,225,.72) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.06) !important;
}
.behavior-section-heading h3 {
  font-size: clamp(1.45rem, 2vw, 2.05rem) !important;
  letter-spacing: -.04em;
}
.chart-panel,
.analytics-grid .panel,
.lot-analysis-panel,
.lot-detail-panel {
  border-radius: 24px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(203,213,225,.76) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.075) !important;
  overflow: hidden;
}
.charts-grid {
  align-items: stretch;
}
.chart-panel canvas {
  width: 100% !important;
  max-width: 100%;
}
.lot-detail-status-cards {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}
.table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table {
  min-width: 820px;
}
.lot-detail-table-wrap table,
.lot-analysis-panel table {
  min-width: 980px;
}
@media (max-width: 1280px) {
  .topbar {
    grid-template-columns: minmax(170px, 220px) minmax(300px, 1fr) minmax(260px, auto) !important;
    gap: 10px !important;
  }
  .topbar-fb-nav .topbar-nav-item {
    min-width: 66px;
    font-size: .82rem;
  }
  .topbar-actions {
    grid-template-columns: minmax(126px, 1fr) 104px 92px !important;
    gap: 8px !important;
  }
  .status-overview-grid,
  .executive-kpi-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  }
  .dashboard-filter-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  }
}
@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .topbar-brand-with-logo {
    justify-content: center !important;
    border-right: 0 !important;
    padding-right: 0 !important;
  }
  .topbar-fb-nav {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }
  .topbar-fb-nav .topbar-nav-item {
    flex: 0 0 96px;
  }
  .topbar-actions {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .dashboard-main-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-badges {
    justify-content: flex-start;
  }
  .dashboard-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  .workspace {
    padding: 10px !important;
  }
  .status-overview-grid,
  .executive-kpi-grid,
  .metrics-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-filter-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-filter-grid .filter-actions,
  .topbar-actions {
    grid-template-columns: 1fr !important;
  }
  .topbar-actions .ghost-button,
  .topbar-actions .welcome-user-pill {
    width: 100%;
  }
  .dashboard-section-nav {
    overflow-x: auto;
    justify-content: flex-start !important;
  }
  .dashboard-section-nav a {
    flex: 0 0 auto;
  }
}

/* V6 responsive hardening + functional module navigation */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.workspace,
.view,
.panel,
.dashboard-main-hero,
.dashboard-chart-card,
.dashboard-split-grid,
.dashboard-detail-grid,
.dashboard-filter-card,
.dashboard-master-chart,
.lot-detail-layout,
.lot-detail-panel,
.table-wrap,
.table-wrapper,
.data-table-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
}

.view {
  width: 100% !important;
}

.topbar {
  display: grid !important;
  grid-template-columns: minmax(190px, 260px) minmax(360px, 1fr) minmax(420px, auto) !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
  align-items: center !important;
}

.topbar-fb-nav {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: space-evenly !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.topbar-fb-nav .topbar-nav-item {
  pointer-events: auto !important;
  user-select: none;
  touch-action: manipulation;
}

.topbar-actions {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(138px, 1fr) auto auto auto !important;
  align-items: center !important;
}

.topbar-actions > * {
  min-width: 0 !important;
}

.topbar-actions .ghost-button,
.topbar-actions .sidebar-toggle,
#refresh-all,
#logout-button {
  white-space: nowrap !important;
  min-height: 46px !important;
  border-radius: 14px !important;
}

#refresh-all {
  background: linear-gradient(135deg, #0b72ff, #075ad6) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .22) !important;
}

#logout-button {
  background: rgba(255,255,255,.94) !important;
  color: #0f172a !important;
}

.sidebar .tab,
.topbar-fb-nav .topbar-nav-item {
  position: relative;
  z-index: 2;
}

.dashboard-filter-grid,
.filter-grid,
.supervisor-filter-grid,
.profit-filter-form,
.user-form-grid,
.import-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
}

.status-overview-grid,
.dashboard-kpis,
.kpi-grid,
.metric-grid,
.lot-status-summary,
.lot-detail-status-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
}

.dashboard-chart-grid,
.dashboard-split-grid,
.dashboard-detail-grid,
.lot-detail-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
}

.chart-card canvas,
.chart-panel canvas,
.dashboard-chart-card canvas,
.panel canvas {
  width: 100% !important;
  max-width: 100% !important;
}

.table-wrap,
.table-wrapper,
.data-table-wrap,
.lot-detail-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table,
.table-wrapper table,
.data-table-wrap table,
.lot-detail-table-wrap table {
  width: 100%;
}

@media (max-width: 1380px) {
  :root { --sidebar-width-v4: 232px; }
  .workspace { padding: 18px !important; }
  .topbar {
    grid-template-columns: minmax(160px, 220px) minmax(300px, 1fr) minmax(390px, auto) !important;
  }
  .topbar-actions {
    grid-template-columns: minmax(120px, 1fr) auto auto auto !important;
    gap: 8px !important;
  }
  .topbar-actions .sidebar-toggle {
    min-width: 132px !important;
  }
}

@media (max-width: 1180px) {
  .app-shell,
  .app-shell.sidebar-visible,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }
  .workspace,
  .app-shell.sidebar-visible .workspace,
  .app-shell.sidebar-collapsed .workspace {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
  }
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 100 !important;
    height: 100dvh !important;
    width: min(300px, 88vw) !important;
    min-width: min(300px, 88vw) !important;
    max-width: min(300px, 88vw) !important;
    transform: translateX(-110%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .app-shell.sidebar-open .sidebar,
  .app-shell.sidebar-visible:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0) !important;
  }
  .sidebar-scrim {
    display: block !important;
    z-index: 90 !important;
  }
  .topbar {
    position: relative !important;
    top: auto !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .topbar-brand-with-logo {
    border-right: 0 !important;
    justify-content: center !important;
  }
  .topbar-fb-nav {
    order: 2 !important;
    justify-content: flex-start !important;
    padding-bottom: 4px !important;
  }
  .topbar-fb-nav .topbar-nav-item {
    flex: 0 0 92px !important;
    min-width: 92px !important;
  }
  .topbar-actions {
    order: 3 !important;
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .welcome-user-pill {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }
  .topbar-actions .sidebar-toggle,
  #refresh-all,
  #logout-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 760px) {
  body { background-size: auto !important; }
  .workspace { padding: 10px !important; gap: 12px !important; }
  .topbar { border-radius: 18px !important; }
  .topbar-logo { width: min(190px, 78vw) !important; }
  .topbar-actions {
    grid-template-columns: 1fr !important;
  }
  .welcome-user-pill,
  .topbar-actions .sidebar-toggle,
  #refresh-all,
  #logout-button {
    grid-column: auto !important;
  }
  .dashboard-main-hero,
  .panel-heading,
  .lot-detail-heading,
  .lot-detail-toolbar,
  .dashboard-section-nav {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-badges,
  .panel-actions,
  .lot-detail-actions {
    justify-content: flex-start !important;
    width: 100% !important;
  }
  .dashboard-chart-grid,
  .dashboard-split-grid,
  .dashboard-detail-grid,
  .lot-detail-layout {
    grid-template-columns: 1fr !important;
  }
  .table-wrap table,
  .table-wrapper table,
  .data-table-wrap table,
  .lot-detail-table-wrap table {
    min-width: 760px !important;
  }
}

@media (max-width: 460px) {
  .topbar-fb-nav .topbar-nav-item {
    flex-basis: 78px !important;
    min-width: 78px !important;
    font-size: .78rem !important;
    padding-inline: 6px !important;
  }
  .topbar-nav-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 1.05rem !important;
  }
  .status-overview-grid,
  .dashboard-kpis,
  .kpi-grid,
  .metric-grid,
  .lot-status-summary,
  .lot-detail-status-cards {
    grid-template-columns: 1fr !important;
  }
  .panel,
  .dashboard-main-hero,
  .dashboard-chart-card {
    border-radius: 18px !important;
    padding: 14px !important;
  }
}

/* V7 fixes: navegacion real por modulos + responsive sin desbordes */
.view:not(.active) {
  display: none !important;
}
.view.active {
  display: block !important;
}
#dashboard.view:not(.active) {
  display: none !important;
}
#dashboard.view.active {
  display: grid !important;
}

.app-shell {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
.workspace {
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}
.workspace > .view,
.workspace > section.view,
.view.active {
  min-width: 0;
  max-width: 100%;
}

.topbar {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.topbar-brand-with-logo,
.topbar-fb-nav,
.topbar-actions,
.welcome-user-pill {
  min-width: 0;
}
.topbar-fb-nav {
  scrollbar-width: thin;
}
.topbar-fb-nav .topbar-nav-item {
  white-space: nowrap;
}

.dashboard-main-hero,
.dashboard-controls,
.status-overview-grid,
.executive-kpi-grid,
.dashboard-section-nav,
.dashboard-behavior-section,
.charts-grid,
.analytics-grid,
.lot-detail-layout,
.lot-detail-grid,
.lot-records-panel,
.panel,
.chart-panel {
  max-width: 100%;
  min-width: 0;
}

.dashboard-filter-grid,
.profit-filter-grid,
.filters-grid,
.form-grid,
.metrics-grid,
.status-overview-grid,
.executive-kpi-grid,
.charts-grid,
.analytics-grid,
.supervisor-layout,
.agent-grid,
.agent-ops-grid {
  min-width: 0 !important;
}

.dashboard-filter-grid > *,
.profit-filter-grid > *,
.filters-grid > *,
.form-grid > *,
.metrics-grid > *,
.status-overview-grid > *,
.executive-kpi-grid > *,
.charts-grid > *,
.analytics-grid > *,
.supervisor-layout > *,
.agent-grid > *,
.agent-ops-grid > * {
  min-width: 0 !important;
}

canvas {
  max-width: 100% !important;
}
.table-wrap,
.table-wrapper,
.data-table-wrap,
.lot-detail-table-wrap,
.agent-table-wrap,
.supervisor-table-wrap,
.profit-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1440px) {
  .topbar {
    grid-template-columns: minmax(180px, 240px) minmax(360px, 1fr) minmax(420px, auto) !important;
  }
  .topbar-actions {
    grid-template-columns: minmax(150px, 1fr) auto auto auto !important;
  }
  .dashboard-filter-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  }
  .status-overview-grid,
  .executive-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: 1fr !important;
    overflow: visible;
  }
  .topbar-brand-with-logo {
    justify-content: center !important;
    border-right: 0 !important;
  }
  .topbar-fb-nav {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start !important;
    padding-bottom: 6px;
  }
  .topbar-fb-nav .topbar-nav-item {
    flex: 0 0 104px;
  }
  .topbar-actions {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .welcome-user-pill {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .dashboard-filter-grid,
  .profit-filter-grid,
  .filters-grid,
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .charts-grid,
  .analytics-grid,
  .supervisor-layout,
  .agent-grid,
  .agent-ops-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .workspace {
    padding-inline: 10px !important;
  }
  .topbar,
  .dashboard-main-hero,
  .dashboard-controls,
  .panel,
  .chart-panel,
  .behavior-section-heading {
    border-radius: 18px !important;
  }
  .dashboard-main-hero {
    padding: 16px !important;
  }
  .dashboard-main-hero h1 {
    font-size: 1.55rem !important;
  }
  .status-overview-grid,
  .executive-kpi-grid,
  .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .dashboard-filter-grid,
  .profit-filter-grid,
  .filters-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-filter-grid .filter-actions,
  .topbar-actions {
    grid-template-columns: 1fr !important;
  }
  .topbar-fb-nav .topbar-nav-item {
    flex: 0 0 88px;
  }
  .dashboard-section-nav {
    overflow-x: auto;
    justify-content: flex-start !important;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .status-overview-grid,
  .executive-kpi-grid,
  .metrics-grid {
    grid-template-columns: 1fr !important;
  }
  .topbar-fb-nav .topbar-nav-item {
    flex-basis: 78px !important;
    min-width: 78px !important;
  }
  .welcome-user-pill {
    justify-content: flex-start;
  }
}


/* v8: sidebar estable de alto completo, sin cortes al hacer scroll */
html,
body {
  min-height: 100%;
}

.app-shell {
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 211, 252, 0.45) rgba(255, 255, 255, 0.06);
}

.sidebar::-webkit-scrollbar {
  width: 7px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(125, 211, 252, 0.48);
  border-radius: 999px;
}

.sidebar .tabs {
  padding-bottom: 28px;
}

.sidebar-promo,
.sidebar-boost,
.sidebar-card {
  flex-shrink: 0;
}

@media (min-width: 981px) {
  .app-shell:not(.sidebar-collapsed) .sidebar {
    width: 280px;
  }

  .app-shell.sidebar-collapsed .sidebar {
    overflow: hidden;
    height: 100dvh;
    max-height: 100dvh;
  }
}

@media (max-width: 980px) {
  .sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
  }
}


/* V10: correccion visual sin romper layout: la columna lateral mantiene el fondo en todo el alto de pagina */
:root {
  --sidebar-visual-bg: linear-gradient(180deg, #071326 0%, #071225 44%, #060b1b 100%);
}

body:not(.login-page)::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width-v4, 250px);
  background: var(--sidebar-visual-bg);
  box-shadow: 18px 0 50px rgba(15, 23, 42, 0.18);
  z-index: 0;
  pointer-events: none;
}

.app-shell {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

.workspace {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.sidebar {
  background: transparent !important;
  position: sticky !important;
  top: 0 !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.app-shell.sidebar-collapsed .sidebar {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

body:has(.app-shell.sidebar-collapsed)::before {
  width: 0;
}

.sidebar .tabs {
  padding-bottom: 120px !important;
}

.sidebar-mascot-brand,
.sidebar-orb-centered {
  position: sticky !important;
  bottom: 18px !important;
}

@media (max-width: 1180px) {
  body:not(.login-page)::before {
    width: 0;
  }
  .sidebar {
    background: var(--sidebar-visual-bg) !important;
  }
}


/* V11: estabiliza el dashboard despues de graficas largas sin cambiar el diseno superior */
html,
body {
  min-height: 100%;
}

body:not(.login-page) {
  background-attachment: fixed !important;
  overflow-y: auto !important;
}

/* La barra lateral conserva el mismo estilo en todo el scroll, sin afectar el ancho del layout */
@media (min-width: 1181px) {
  body:not(.login-page)::before {
    width: var(--sidebar-width-v4, 250px) !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    background: var(--sidebar-visual-bg, linear-gradient(180deg, #071326 0%, #071225 44%, #060b1b 100%)) !important;
  }

  .sidebar {
    background: var(--sidebar-visual-bg, linear-gradient(180deg, #071326 0%, #071225 44%, #060b1b 100%)) !important;
    background-attachment: local !important;
    box-shadow: inset -1px 0 0 rgba(148, 163, 184, .16) !important;
  }
}

/* Evita que una grafica o tabla larga saque las secciones siguientes del contenedor visual */
#dashboard.view.active,
.dashboard-main-content,
.dashboard-behavior-section,
.charts-grid,
.dashboard-detail-grid,
.analytics-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#dashboard.view.active {
  display: grid !important;
  gap: clamp(16px, 2vw, 24px) !important;
  align-content: start !important;
}

.dashboard-behavior-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(16px, 2vw, 22px) !important;
  align-items: start !important;
  overflow: visible !important;
  clear: both !important;
}

.dashboard-behavior-section > .panel,
.dashboard-behavior-section > .charts-grid,
.dashboard-behavior-section > .lot-analysis-panel,
.dashboard-behavior-section > .lot-detail-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.charts-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 22px) !important;
  align-items: stretch !important;
}

.charts-grid > .chart-wide,
.charts-grid > .panel.chart-wide {
  grid-column: 1 / -1 !important;
}

.panel,
.chart-panel,
.chart-card,
.dashboard-chart-card {
  position: relative !important;
  float: none !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.panel canvas,
.chart-panel canvas,
.dashboard-chart-card canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

.table-wrap,
.table-wrapper,
.data-table-wrap,
.agent-table-wrap,
.supervisor-table-wrap,
.profit-table-wrap,
.lot-detail-table-wrap {
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}

/* La tabla que aparece despues de "Ventas por hora por agente" mantiene tarjeta y separacion */
#comportamiento-agentes > .panel {
  margin-top: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.86)) !important;
  border: 1px solid rgba(203, 213, 225, .75) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .08) !important;
}

@media (max-width: 1180px) {
  .charts-grid {
    grid-template-columns: 1fr !important;
  }

  body:not(.login-page)::before {
    width: 0 !important;
  }
}

@media (max-width: 760px) {
  #dashboard.view.active,
  .dashboard-behavior-section {
    gap: 14px !important;
  }

  .panel,
  .chart-panel,
  .dashboard-chart-card {
    border-radius: 18px !important;
  }
}

/* v12 - Dashboard sin barra lateral y navegación superior/rápida fija */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 156px;
}

body {
  overflow-x: hidden;
}

.app-shell.no-sidebar-layout,
.app-shell.no-sidebar-layout.sidebar-collapsed,
.app-shell.no-sidebar-layout.sidebar-visible,
.app-shell.no-sidebar-layout.sidebar-open {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100%;
  min-height: 100vh;
  padding: clamp(10px, 1.4vw, 18px) !important;
}

.no-sidebar-layout .sidebar,
.no-sidebar-layout .sidebar-scrim,
.no-sidebar-layout .sidebar-peek,
.no-sidebar-layout .sidebar-toggle {
  display: none !important;
}

.no-sidebar-layout .workspace {
  width: min(100%, 1680px);
  max-width: 1680px;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
}

.no-sidebar-layout .topbar {
  position: sticky;
  top: clamp(8px, 1vw, 16px);
  z-index: 80;
  width: 100%;
  margin: 0 auto clamp(14px, 1.8vw, 24px);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.no-sidebar-layout .topbar-fb-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.no-sidebar-layout .topbar-actions {
  flex: 0 0 auto;
}

.dashboard-main-nav {
  position: sticky;
  top: calc(clamp(8px, 1vw, 16px) + 92px);
  z-index: 70;
  margin: 0 0 clamp(16px, 2vw, 28px) !important;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(239,248,255,0.92));
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

.dashboard-main-nav a {
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 16px;
  color: #0f172a;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(148,163,184,0.28);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.dashboard-main-nav a:hover,
.dashboard-main-nav a:focus-visible,
.dashboard-main-nav .dashboard-nav-home {
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  border-color: rgba(37,99,235,0.45);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.24);
}

.dashboard-nav-period {
  margin-left: auto;
  white-space: nowrap;
  align-self: center;
}

#dashboard .dashboard-controls,
#dashboard .status-overview-grid,
#dashboard .metrics-grid,
#dashboard .dashboard-behavior-section,
#dashboard .dashboard-lot-detail-panel {
  max-width: 100%;
}

@media (max-width: 1280px) {
  .no-sidebar-layout .topbar {
    flex-wrap: wrap;
  }
  .no-sidebar-layout .topbar-brand-with-logo {
    flex: 0 1 260px;
  }
  .no-sidebar-layout .topbar-fb-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }
  .dashboard-main-nav {
    top: 152px;
  }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 170px; }
  .app-shell.no-sidebar-layout,
  .app-shell.no-sidebar-layout.sidebar-collapsed,
  .app-shell.no-sidebar-layout.sidebar-visible,
  .app-shell.no-sidebar-layout.sidebar-open {
    padding: 8px !important;
  }
  .no-sidebar-layout .topbar {
    top: 8px;
    border-radius: 20px;
    gap: 10px;
    padding: 10px;
  }
  .no-sidebar-layout .topbar-brand-with-logo {
    width: 100%;
    justify-content: center !important;
    border-right: 0 !important;
  }
  .no-sidebar-layout .topbar-actions {
    width: 100%;
    justify-content: center;
  }
  .no-sidebar-layout .topbar-actions .ghost-button {
    flex: 1 1 120px;
  }
  .dashboard-main-nav {
    top: 158px;
    border-radius: 20px;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px;
  }
  .dashboard-main-nav a {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 14px;
  }
  .dashboard-nav-period {
    display: none !important;
  }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 202px; }
  .no-sidebar-layout .topbar-fb-nav .topbar-nav-item {
    min-width: 86px;
    padding: 8px 10px;
  }
  .no-sidebar-layout .welcome-user-pill {
    width: 100%;
    justify-content: center;
  }
  .dashboard-main-nav {
    top: 196px;
    margin-bottom: 14px !important;
  }
}

/* ===== v13 UX fixes: menu fijo, VE legible y tablas redimensionables ===== */
html {
  scroll-behavior: smooth;
}

/* Menu interno del dashboard siempre disponible al navegar */
#dashboard .dashboard-main-nav,
#dashboard .dashboard-section-nav.dashboard-main-nav {
  position: sticky !important;
  top: clamp(86px, 10vw, 118px) !important;
  z-index: 125 !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .12) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  scrollbar-width: thin;
}

#dashboard .dashboard-main-nav a {
  flex: 0 0 auto !important;
  min-width: clamp(78px, 16vw, 220px) !important;
  min-height: 42px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  color: #0f172a !important;
  background: linear-gradient(135deg, rgba(248, 250, 252, .98), rgba(241, 245, 249, .92)) !important;
  border: 1px solid rgba(203, 213, 225, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 22px rgba(15, 23, 42, .06) !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#dashboard .dashboard-main-nav a:hover,
#dashboard .dashboard-main-nav a:focus-visible {
  color: #ffffff !important;
  background: linear-gradient(135deg, #22b8ff, #0b63f6) !important;
  border-color: rgba(37, 99, 235, .36) !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .20) !important;
}

#dashboard .dashboard-main-nav .dashboard-nav-period {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  color: #475569 !important;
  background: rgba(248, 250, 252, .86) !important;
  border-color: rgba(203, 213, 225, .70) !important;
  white-space: nowrap !important;
}

/* Al usar el menu fijo, que las secciones no queden escondidas debajo */
#dashboard,
.dashboard-behavior-section {
  scroll-margin-top: clamp(150px, 16vw, 190px) !important;
}

/* La card VE/EVE debe conservar fondo destacado pero texto siempre legible */
.metric-card.success-card,
.success-card {
  color: #0f172a !important;
  background: linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(255,255,255,.94)) !important;
  border: 1px solid rgba(16, 185, 129, .30) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.metric-card.success-card span,
.metric-card.success-card strong,
.metric-card.success-card p,
.success-card span,
.success-card strong,
.success-card p {
  color: #0f172a !important;
  text-shadow: none !important;
}

.metric-card.success-card span,
.success-card span {
  color: #047857 !important;
}

.metric-card.success-card p,
.success-card p {
  color: #475569 !important;
}

/* Tablas redimensionables en vivo con mouse */
.table-wrap {
  position: relative !important;
  resize: both !important;
  overflow: auto !important;
  min-width: min(100%, 320px) !important;
  min-height: 180px !important;
  max-width: 100% !important;
  max-height: min(78vh, 760px) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(203, 213, 225, .58) !important;
  background: rgba(255,255,255,.84) !important;
}

.table-wrap.compact {
  min-height: 150px !important;
}

.table-wrap.tall-table,
.table-wrap.table-wrap-lg,
.table-wrap.results,
.lot-detail-table-wrap {
  min-height: 240px !important;
  max-height: min(82vh, 820px) !important;
}

.table-wrap::after {
  content: "↘";
  position: sticky;
  right: 6px;
  bottom: 4px;
  float: right;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -26px;
  border-radius: 9px;
  color: #2563eb;
  background: rgba(239, 246, 255, .92);
  border: 1px solid rgba(37, 99, 235, .18);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
  pointer-events: none;
  font-weight: 900;
  font-size: 12px;
}

.table-wrap table {
  min-width: max-content !important;
}

@media (max-width: 900px) {
  #dashboard .dashboard-main-nav,
  #dashboard .dashboard-section-nav.dashboard-main-nav {
    top: 8px !important;
    border-radius: 18px !important;
    padding: 8px !important;
  }

  #dashboard .dashboard-main-nav a {
    min-width: 150px !important;
    min-height: 40px !important;
    padding: 9px 14px !important;
  }

  #dashboard .dashboard-main-nav .dashboard-nav-period {
    min-width: max-content !important;
    margin-left: 0 !important;
  }

  #dashboard,
  .dashboard-behavior-section {
    scroll-margin-top: 90px !important;
  }

  .table-wrap {
    resize: vertical !important;
    min-height: 170px !important;
    max-height: 70vh !important;
  }
}

@media (max-width: 560px) {
  #dashboard .dashboard-main-nav a {
    min-width: 136px !important;
    font-size: .82rem !important;
  }

  #dashboard .dashboard-main-nav .dashboard-nav-period {
    display: none !important;
  }
}


/* ===== v14: menu fijo real tipo Excel para dashboard ===== */
body.dashboard-nav-fixed-active {
  scroll-padding-top: clamp(168px, 13vw, 210px);
}

#dashboard.view.active {
  padding-top: clamp(72px, 6.5vw, 92px) !important;
}

#dashboard.view.active .dashboard-main-nav,
#dashboard.view.active .dashboard-section-nav.dashboard-main-nav {
  position: fixed !important;
  top: clamp(100px, 7.8vw, 126px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - clamp(20px, 3vw, 48px)), 1680px) !important;
  max-width: 1680px !important;
  margin: 0 !important;
  z-index: 180 !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(8px, 1vw, 12px) !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  padding: clamp(8px, 1vw, 12px) !important;
  border: 1px solid rgba(148, 163, 184, .30) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,248,255,.92)) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  scrollbar-width: thin;
}

#dashboard.view.active .dashboard-main-nav a {
  flex: 0 0 auto !important;
  min-width: clamp(90px, 15vw, 236px) !important;
  min-height: 44px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

#dashboard.view.active .dashboard-main-nav a.is-active,
#dashboard.view.active .dashboard-main-nav a.dashboard-nav-home.is-active {
  color: #fff !important;
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  border-color: rgba(37,99,235,.50) !important;
  box-shadow: 0 16px 32px rgba(37, 99, 235, .24) !important;
}

#dashboard.view.active .dashboard-main-nav .dashboard-nav-period {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

.dashboard-behavior-section,
#dashboard,
#comportamiento-campania,
#comportamiento-agentes,
#comportamiento-lotes {
  scroll-margin-top: clamp(174px, 13vw, 220px) !important;
}

@media (max-width: 1280px) {
  #dashboard.view.active { padding-top: 86px !important; }
  #dashboard.view.active .dashboard-main-nav,
  #dashboard.view.active .dashboard-section-nav.dashboard-main-nav {
    top: 148px !important;
    width: calc(100vw - 24px) !important;
  }
  body.dashboard-nav-fixed-active { scroll-padding-top: 232px; }
  .dashboard-behavior-section,
  #dashboard,
  #comportamiento-campania,
  #comportamiento-agentes,
  #comportamiento-lotes { scroll-margin-top: 238px !important; }
}

@media (max-width: 900px) {
  #dashboard.view.active { padding-top: 96px !important; }
  #dashboard.view.active .dashboard-main-nav,
  #dashboard.view.active .dashboard-section-nav.dashboard-main-nav {
    top: 158px !important;
    border-radius: 20px !important;
    padding: 8px !important;
  }
  #dashboard.view.active .dashboard-main-nav a {
    min-width: max-content !important;
    padding: 10px 14px !important;
  }
  #dashboard.view.active .dashboard-main-nav .dashboard-nav-period {
    display: none !important;
  }
  body.dashboard-nav-fixed-active { scroll-padding-top: 250px; }
}

@media (max-width: 560px) {
  #dashboard.view.active { padding-top: 108px !important; }
  #dashboard.view.active .dashboard-main-nav,
  #dashboard.view.active .dashboard-section-nav.dashboard-main-nav {
    top: 192px !important;
    width: calc(100vw - 16px) !important;
    gap: 6px !important;
  }
  #dashboard.view.active .dashboard-main-nav a {
    min-height: 40px !important;
    font-size: .82rem !important;
  }
  body.dashboard-nav-fixed-active { scroll-padding-top: 300px; }
}


/* ===== v15: separaciones mas compactas y tablas con tamano persistente ===== */
:root {
  --dashboard-blue-gap: clamp(8px, 1.05vw, 16px);
  --dashboard-section-gap: clamp(10px, 1.2vw, 18px);
}

#dashboard,
#dashboard.tab-content,
#dashboard .dashboard-shell,
#dashboard .dashboard-content,
#dashboard .dashboard-page,
.dashboard-page,
.dashboard-shell {
  gap: var(--dashboard-blue-gap) !important;
}

#dashboard .dashboard-section-nav,
#dashboard .dashboard-main-nav {
  margin-bottom: var(--dashboard-blue-gap) !important;
}

#dashboard .dashboard-controls,
#dashboard .metric-grid,
#dashboard .kpi-grid,
#dashboard .charts-grid,
#dashboard .analytics-grid,
#dashboard .dashboard-grid,
#dashboard .dashboard-summary-grid,
.dashboard-behavior-section .charts-grid,
.dashboard-behavior-section .analytics-grid {
  gap: var(--dashboard-section-gap) !important;
}

.dashboard-behavior-section {
  margin: var(--dashboard-blue-gap) 0 var(--dashboard-section-gap) !important;
  scroll-margin-top: 92px !important;
}

.behavior-section-heading {
  margin-bottom: var(--dashboard-blue-gap) !important;
  padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.5vw, 20px) !important;
}

#dashboard .panel,
#dashboard .dashboard-card,
#dashboard .metric-card,
#dashboard .chart-panel,
#dashboard .data-card {
  margin-bottom: 0 !important;
}

#dashboard .panel + .panel,
#dashboard .dashboard-card + .dashboard-card,
#dashboard .chart-panel + .chart-panel {
  margin-top: var(--dashboard-blue-gap) !important;
}

#dashboard .panel-heading {
  margin-bottom: clamp(8px, .9vw, 12px) !important;
}

/* Persistencia visual para tablas ajustables por usuario */
.table-wrap.table-resize-persist {
  resize: both !important;
  overflow: auto !important;
  min-width: min(100%, 300px) !important;
  min-height: 160px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  transition: box-shadow .16s ease, border-color .16s ease;
}

.table-wrap.table-resize-persist:hover,
.table-wrap.table-resize-persist:focus-within {
  border-color: rgba(37, 99, 235, .34) !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, .10) !important;
}

.table-wrap.table-size-restored::before {
  content: "tamano guardado";
  position: sticky;
  top: 6px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(239, 246, 255, .92);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, .18);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  opacity: .76;
  pointer-events: none;
}

@media (max-width: 900px) {
  :root {
    --dashboard-blue-gap: 8px;
    --dashboard-section-gap: 10px;
  }

  .table-wrap.table-resize-persist {
    resize: vertical !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 560px) {
  #dashboard .dashboard-section-nav,
  #dashboard .dashboard-main-nav {
    margin-bottom: 8px !important;
  }

  .behavior-section-heading {
    padding: 12px !important;
  }
}


/* ===== v16: menu contextual tipo Excel solo dentro de marcadores del dashboard ===== */
#dashboard.view.active .dashboard-main-nav.is-context-hidden,
#dashboard.view.active .dashboard-section-nav.dashboard-main-nav.is-context-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(-16px) scale(.985) !important;
}

#dashboard.view.active .dashboard-main-nav,
#dashboard.view.active .dashboard-section-nav.dashboard-main-nav {
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease, box-shadow .22s ease !important;
}

body:not(.dashboard-nav-context-visible) #dashboard.view.active {
  padding-top: clamp(10px, 1.2vw, 18px) !important;
}

body.dashboard-nav-context-visible #dashboard.view.active {
  padding-top: clamp(72px, 6.5vw, 92px) !important;
}

@media (max-width: 1280px) {
  body:not(.dashboard-nav-context-visible) #dashboard.view.active { padding-top: 12px !important; }
  body.dashboard-nav-context-visible #dashboard.view.active { padding-top: 86px !important; }
}

@media (max-width: 900px) {
  body:not(.dashboard-nav-context-visible) #dashboard.view.active { padding-top: 10px !important; }
  body.dashboard-nav-context-visible #dashboard.view.active { padding-top: 96px !important; }
}

@media (max-width: 560px) {
  body:not(.dashboard-nav-context-visible) #dashboard.view.active { padding-top: 8px !important; }
  body.dashboard-nav-context-visible #dashboard.view.active { padding-top: 108px !important; }
}


/* ===== v17: menu contextual solo al inicio de cada seccion ===== */
#dashboard.view.active .dashboard-main-nav.is-context-hidden,
#dashboard.view.active .dashboard-section-nav.dashboard-main-nav.is-context-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(-22px) scale(.98) !important;
}

body:not(.dashboard-nav-context-visible) #dashboard.view.active {
  padding-top: clamp(8px, 1vw, 14px) !important;
}

body.dashboard-nav-context-visible #dashboard.view.active {
  padding-top: clamp(68px, 6vw, 88px) !important;
}

#dashboard .dashboard-behavior-section,
#dashboard .dashboard-controls,
#dashboard .status-overview-grid,
#dashboard .executive-kpi-grid {
  scroll-margin-top: clamp(178px, 14vw, 220px) !important;
}


/* v18: KPI status cards as actionable filters */
.status-overview-card.dashboard-status-filter-card {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.22);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.status-overview-card.dashboard-status-filter-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
}
.status-overview-card.dashboard-status-filter-card:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.30);
  outline-offset: 3px;
}
.status-overview-card.dashboard-status-filter-card.is-filter-active {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.18);
}
.status-overview-card.dashboard-status-filter-card.is-filter-active::after {
  content: "Filtro activo";
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 0.72rem;
  font-weight: 900;
  color: #0f5fe8;
  background: rgba(219, 234, 254, 0.92);
  border: 1px solid rgba(37, 99, 235, 0.20);
  border-radius: 999px;
  padding: 4px 9px;
}
.status-overview-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}
@media (max-width: 1100px) {
  .status-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .status-overview-grid { grid-template-columns: 1fr; }
}


/* ===== v21: ocultar menu contextual al salir/login ===== */
#app-shell.hidden #dashboard .dashboard-section-nav.dashboard-main-nav,
#app-shell.hidden #dashboard .dashboard-main-nav,
body:not(.dashboard-nav-fixed-active) #dashboard .dashboard-section-nav.dashboard-main-nav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#login-screen:not(.hidden) ~ #app-shell #dashboard .dashboard-section-nav.dashboard-main-nav,
#agent-campaign-screen:not(.hidden) ~ #app-shell #dashboard .dashboard-section-nav.dashboard-main-nav,
#farewell-screen:not(.hidden) ~ #app-shell #dashboard .dashboard-section-nav.dashboard-main-nav {
  display: none !important;
}

/* ===== v22: seguridad visual y respuesta operativa ===== */
:root {
  --focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.22);
  --control-radius: 10px;
  --card-radius: 8px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring) !important;
}

button[aria-busy="true"] {
  position: relative;
  color: transparent !important;
}

button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

.ghost-button[aria-busy="true"]::after,
.ios-call-button[aria-busy="true"]::after {
  border-color: rgba(14, 116, 144, 0.25);
  border-top-color: #0e7490;
}

@keyframes spin { to { transform: rotate(360deg); } }

.login-card {
  border-radius: var(--card-radius) !important;
  box-shadow: 0 24px 70px rgba(6, 23, 47, 0.20);
}

.login-copy,
.login-card input,
.agent-campaign-card select,
.primary-button,
.ghost-button,
.danger-button {
  border-radius: var(--control-radius) !important;
}

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  padding-right: 54px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(6, 23, 47, 0.08);
  color: #0b2545;
  font-weight: 950;
}

.password-toggle:hover {
  background: rgba(14, 165, 233, 0.16);
}

.topbar {
  position: sticky !important;
  top: 10px;
  z-index: 1100;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.30) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(18px);
}

.topbar-fb-nav .topbar-nav-item {
  min-height: 56px;
  border-radius: 10px !important;
}

.topbar-actions .ghost-button,
#refresh-all,
#logout-button {
  min-height: 44px;
}

.status-chip {
  border-radius: 999px;
  white-space: nowrap;
}

.agent-state-controls {
  grid-template-columns: minmax(136px, 0.8fr) minmax(210px, 1fr) minmax(136px, 0.8fr) !important;
  align-items: end !important;
}

.agent-state-controls label {
  width: 100%;
}

.agent-state-controls select,
.agent-dispo-box select,
.agent-form-grid input,
.agent-form-grid select,
.agent-form-grid textarea {
  border-radius: var(--control-radius);
}

.agent-live-card,
.agent-dispo-box,
.agent-kpi-strip div,
.supervisor-kpis > div,
.supervisor-screen-stage,
.panel,
.metric-card,
.chart-panel,
.table-card {
  border-radius: var(--card-radius) !important;
}

.agent-live-card > strong,
.agent-phone-screen strong,
.supervisor-list-panel td,
.topbar-actions strong {
  overflow-wrap: anywhere;
}

.agent-call-actions button,
.agent-state-controls button,
.agent-dispo-actions button,
.ios-call-button,
.ios-main-call {
  min-height: 42px;
}

.agent-dispo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.supervisor-layout {
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.85fr);
}

.supervisor-screen-stage {
  min-height: clamp(300px, 48vh, 560px);
}

.selected-row {
  background: rgba(34, 197, 94, 0.08) !important;
  box-shadow: inset 4px 0 0 #16a34a !important;
}

@media (max-width: 760px) {
  .agent-state-controls {
    grid-template-columns: 1fr !important;
  }

  .topbar {
    top: 0;
    border-radius: 0 0 18px 18px !important;
  }

  .supervisor-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .ardaby-login {
    align-items: start;
    padding: 10px;
    overflow-y: auto;
  }

  .login-layout {
    gap: 10px;
  }

  .login-hero {
    min-height: 235px !important;
  }

  .ardabyto-stage {
    width: min(250px, 72vw) !important;
    min-height: 240px !important;
  }

  .login-ardabyto {
    width: min(240px, 70vw) !important;
    max-height: 250px !important;
  }

  .orbit-one {
    width: 250px;
    height: 250px;
  }

  .orbit-two {
    width: 195px;
    height: 195px;
  }

  .orbit-three {
    width: 150px;
    height: 150px;
  }

  .hero-caption {
    display: none;
  }

  .login-card {
    gap: 12px;
    padding: 18px;
  }

  .login-copy {
    padding: 14px;
  }

  .login-copy h2 {
    font-size: 1.45rem;
  }

  .login-copy p {
    line-height: 1.38;
  }

  .login-card input {
    min-height: 48px;
  }
}