:root {
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 18px 45px rgba(30, 41, 59, 0.16);
  --glass-text: #0f172a;
  --glass-muted: #536179;
  --glass-accent: #7c5cff;
  --glass-accent-soft: rgba(124, 92, 255, 0.15);
}

html.theme-dark {
  --glass-bg: rgba(16, 20, 31, 0.66);
  --glass-bg-strong: rgba(12, 16, 26, 0.82);
  --glass-border: rgba(170, 190, 255, 0.18);
  --glass-shadow: 0 24px 50px rgba(0, 0, 0, 0.52);
  --glass-text: #eef2ff;
  --glass-muted: #9aa8c4;
  --glass-accent: #b79cff;
  --glass-accent-soft: rgba(183, 156, 255, 0.22);
}

body.app-shell {
  background:
    radial-gradient(950px 500px at 8% -20%, rgba(109, 87, 255, 0.28), transparent 55%),
    radial-gradient(720px 420px at 92% 0%, rgba(51, 197, 255, 0.18), transparent 50%),
    #e9eefc !important;
}

html.theme-dark body.app-shell {
  background:
    radial-gradient(950px 500px at 8% -20%, rgba(139, 92, 246, 0.33), transparent 55%),
    radial-gradient(720px 420px at 92% 0%, rgba(56, 189, 248, 0.18), transparent 50%),
    #060913 !important;
}

.panel-shell {
  gap: 16px !important;
  padding: 12px !important;
}

.panel-sidebar,
.panel-topbar,
.glass-panel,
.bg-white,
.dark\:bg-gray-800,
.modal-content {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.panel-sidebar {
  border-radius: 26px !important;
  overflow: hidden;
}

.panel-brand {
  padding: 18px 16px 8px;
}

.panel-brand-link {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--glass-text);
}

.panel-brand-link img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.panel-brand-link strong {
  display: block;
  font-size: 15px;
  line-height: 1.2;
}

.panel-brand-link span {
  display: block;
  font-size: 11px;
  color: var(--glass-muted);
}

.panel-nav {
  display: grid;
  gap: 6px;
  padding: 8px 12px 12px;
  overflow: auto;
}

.panel-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--glass-text) !important;
  border: 1px solid transparent;
  transition: .2s ease;
}

.panel-link:hover {
  background: var(--glass-accent-soft);
  border-color: rgba(124, 92, 255, 0.2);
  transform: translateY(-1px);
}

.panel-link.is-active {
  background: linear-gradient(130deg, rgba(124, 92, 255, 0.92), rgba(69, 109, 255, 0.92));
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(124, 92, 255, 0.35);
}

.panel-link i[data-lucide] {
  width: 16px;
  height: 16px;
}

.panel-sidebar-footer {
  margin-top: auto;
  padding: 12px;
}

.panel-logout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
}

.btn-danger-soft {
  background: linear-gradient(130deg, rgba(239, 68, 68, 0.88), rgba(190, 24, 93, 0.88)) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
}

.panel-mobile-drawer {
  position: fixed;
  top: 12px;
  left: 10px;
  bottom: 12px;
  width: min(82vw, 290px);
  z-index: 40;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 12px;
  backdrop-filter: blur(16px);
}

.panel-mobile-nav {
  display: grid;
  gap: 6px;
}

.panel-topbar {
  border-radius: 22px !important;
  padding: 8px !important;
}

.panel-topbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}

.panel-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  background: var(--glass-bg-strong);
}

.panel-search {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  color: var(--glass-text) !important;
}

.panel-select {
  border: 0;
  background: rgba(124, 92, 255, 0.14);
  color: var(--glass-text);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
}

.panel-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-icon-btn,
.panel-profile-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--glass-text);
}

.panel-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

.panel-clock {
  font-size: 12px;
  font-weight: 700;
  color: var(--glass-muted);
}

.panel-profile-menu {
  position: absolute;
  right: 4px;
  top: 52px;
  min-width: 220px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 8px;
  display: grid;
  gap: 6px;
  box-shadow: var(--glass-shadow);
}

.panel-profile-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--glass-text);
}

.panel-profile-menu a:hover {
  background: var(--glass-accent-soft);
}

.container > h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--glass-text) !important;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important;
  margin-top: 18px !important;
  margin-bottom: 14px !important;
}

/* Enlaces tipo CTA: no aplicar a .module-hero (section.module-hero.my-6) — rompe enlaces secundarios sin padding */
.container > h2 a,
.container > .my-6:not(.module-hero) a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(124, 92, 255, 0.28) !important;
  background: linear-gradient(130deg, rgba(124, 92, 255, 0.86), rgba(95, 70, 230, 0.86)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(124, 92, 255, 0.35);
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  line-height: 1.2 !important;
}

.container form .form-input,
.container form .form-select,
.container input.form-input,
.container select.form-select,
.container input[type="text"],
.container input[type="email"],
.container input[type="password"],
.container input[type="search"],
.container select {
  border-radius: 12px !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg-strong) !important;
  color: var(--glass-text) !important;
}

.container label {
  color: var(--glass-muted) !important;
}

.container table thead tr {
  background: rgba(12, 18, 34, 0.62) !important;
}

.container table thead th {
  color: #c6d0ea !important;
  letter-spacing: .08em;
}

.container table tbody,
.container table tbody tr {
  background: transparent !important;
}

.container table tbody td {
  color: var(--glass-text) !important;
}

.container .rounded-lg.shadow-xs,
.container .rounded-lg.shadow-md,
.container .w-full.overflow-hidden.rounded-lg.shadow-xs,
.container .grid.gap-6.mb-6 > div,
.container .grid.gap-6.mb-8 > div {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 18px !important;
}

.container .text-gray-100,
.container .text-gray-200,
.container .text-gray-300,
.container .text-gray-700,
.container .dark\:text-gray-200,
.container .dark\:text-gray-300,
.container .dark\:text-gray-400 {
  color: var(--glass-text) !important;
}

.container .text-amber-300,
.container .text-emerald-300,
.container .text-red-300 {
  filter: saturate(1.15);
}

.container .bg-gray-50,
.container .dark\:bg-gray-800,
.container .dark\:bg-gray-700 {
  background: var(--glass-bg) !important;
}

.container .border-t,
.container .border-b,
.container .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--glass-border) !important;
}

.modal {
  z-index: 90;
  background: rgba(5, 8, 18, 0.55);
  backdrop-filter: blur(5px);
}

.modal .modal-content,
.modal > div[id],
.modal > .w-full {
  border-radius: 20px !important;
}

.container nav[aria-label="Table navigation"] a {
  color: var(--glass-text) !important;
  border-radius: 8px;
}

.mobile-bottom-nav {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
}

.mobile-bottom-nav a {
  color: var(--glass-muted) !important;
}

.mobile-bottom-nav a.is-active {
  background: linear-gradient(130deg, rgba(124, 92, 255, 0.92), rgba(69, 109, 255, 0.92)) !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .panel-shell {
    padding: 6px !important;
  }

  .panel-topbar {
    border-radius: 16px !important;
  }

  .container > h2 {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .container > h2 a {
    width: 100%;
    text-align: center;
  }

  .container table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--glass-muted);
    margin-bottom: 4px;
  }

  .panel-search-static span {
    font-size: 12px;
  }
}

/* Hard alignment fix: sidebar/topbar same baseline */
.panel-shell {
  align-items: stretch !important;
  padding: 10px !important;
  gap: 10px !important;
}

.panel-shell > .panel-sidebar.panel-sidebar--rail {
  align-self: stretch !important;
  margin-top: 0 !important;
  height: calc(100vh - 20px) !important;
}

.panel-shell > .flex.flex-col.flex-1.w-full {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.panel-shell > .flex.flex-col.flex-1.w-full > .panel-topbar {
  margin-top: 0 !important;
  min-height: 58px !important;
}

/* Search bar exact alignment */
@media (min-width: 769px) {
  .panel-topbar-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  #searchForm.panel-search-wrap--global,
  .panel-search-wrap--global.panel-search-static {
    align-self: center !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 860px !important;
  }
}

.panel-search-wrap--global {
  align-items: center !important;
}

.panel-search-wrap--global .panel-search,
.panel-search-wrap--global .panel-select {
  margin: 0 !important;
  align-self: center !important;
}

/* ===== Mobile optimization pack (entire panel) ===== */
@media (max-width: 430px) {
  :root {
    --ss-space-1: 6px;
    --ss-space-2: 10px;
    --ss-space-3: 12px;
    --ss-space-4: 14px;
    --ss-space-5: 18px;
  }

  .panel-shell {
    padding: 6px !important;
    gap: 6px !important;
  }

  .panel-topbar {
    border-radius: 10px !important;
    padding: 6px !important;
  }

  .panel-topbar-inner {
    grid-template-columns: 32px 1fr auto !important;
    gap: 6px !important;
    min-height: auto !important;
  }

  .panel-icon-btn,
  .panel-profile-btn,
  .panel-topbar-notify {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .panel-topbar-actions {
    gap: 6px !important;
  }

  .panel-topbar-actions #mikrotik-status-chip {
    display: none !important;
  }

  .panel-search-wrap--global {
    min-height: 34px !important;
    padding: 3px 6px !important;
    border-radius: 9px !important;
  }

  .panel-search-wrap--global .panel-search {
    font-size: 12px !important;
  }

  .panel-search-wrap--global .panel-select {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
    padding: 0 6px !important;
  }

  main > .container.panel-stack {
    padding-top: 10px !important;
    row-gap: 10px !important;
  }

  .module-hero {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .module-hero__title,
  .dashboard-v3__title {
    font-size: 34px !important;
    line-height: 1.06 !important;
  }

  .module-hero__eyebrow,
  .dashboard-v3__eyebrow {
    font-size: 11px !important;
  }

  .glass-panel {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .dashboard-orix__hero-actions--labeled {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .dashboard-orix__action--labeled {
    height: 32px !important;
    font-size: 10px !important;
    padding: 0 4px !important;
  }

  .dashboard-v3__kpi {
    min-height: 72px;
  }

  .dashboard-v3__kpi p,
  .client-main-metric__value,
  .mikrotik-live__value {
    font-size: 28px !important;
  }

  .support-admin-layout,
  .settings-layout,
  .client-reports-grid {
    grid-template-columns: 1fr !important;
  }

  .smart-table-toolbar {
    gap: 8px !important;
  }

  .smart-table-toolbar__left {
    display: grid !important;
    gap: 2px !important;
  }

  .smart-table-toolbar__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
    width: 100% !important;
  }

  .smart-table-toolbar__actions .btn-glass,
  .smart-table-toolbar__actions .tab-btn {
    width: 100% !important;
    min-height: 30px !important;
    font-size: 10px !important;
    padding: 0 6px !important;
  }

  #smart-tabulator .tabulator {
    font-size: 11px !important;
  }

  .global-search-results {
    max-height: 52vh !important;
    border-radius: 10px !important;
    padding: 8px !important;
  }

  .global-search-tab,
  .gs-btn,
  .support-chip,
  .tab-btn {
    min-height: 26px !important;
    font-size: 10px !important;
    padding: 0 8px !important;
  }

  .panel-mobile-drawer {
    top: 8px !important;
    left: 6px !important;
    bottom: 8px !important;
    width: min(88vw, 308px) !important;
    border-radius: 12px !important;
    padding: 8px !important;
  }
}

@media (max-width: 412px) {
  .dashboard-v3__title,
  .module-hero__title {
    font-size: 30px !important;
  }
  .dashboard-orix__hero-actions--labeled {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .quick-actions-fab {
    right: 8px !important;
    bottom: 8px !important;
  }
}

@media (max-width: 390px) {
  .panel-topbar-inner {
    grid-template-columns: 30px 1fr auto !important;
  }
  .panel-icon-btn,
  .panel-profile-btn,
  .panel-topbar-notify {
    width: 30px !important;
    height: 30px !important;
  }
  .panel-search-wrap--global .panel-search {
    font-size: 11px !important;
  }
  .dashboard-v3__title,
  .module-hero__title {
    font-size: 27px !important;
  }
  .auth2026-wrap {
    width: calc(100vw - 14px) !important;
    margin: 10px auto !important;
  }
  .auth2026-card,
  .auth2026-aside {
    padding: 12px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 360px) {
  .panel-shell {
    padding: 4px !important;
    gap: 4px !important;
  }
  .panel-topbar {
    padding: 5px !important;
  }
  .panel-search-wrap--global {
    min-height: 32px !important;
    padding: 2px 5px !important;
  }
  .panel-search-wrap--global .panel-select {
    min-width: 36px !important;
    font-size: 9px !important;
    padding: 0 4px !important;
  }
  .dashboard-v3__title,
  .module-hero__title {
    font-size: 24px !important;
  }
  .dashboard-orix__action--labeled {
    font-size: 9px !important;
  }
  .glass-panel {
    padding: 8px !important;
  }
}

/* Dashboard positioning fix */
#dashboard-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px !important;
  align-items: stretch !important;
}

#dashboard-kpis > .dashboard-v3__kpi {
  min-height: 120px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 14px 16px !important;
}

.dashboard-focus--next-actions {
  overflow: hidden !important;
}

.dashboard-focus--next-actions .dashboard-focus__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.dashboard-focus--next-actions .dashboard-focus__all-cta {
  margin-left: auto !important;
  white-space: nowrap !important;
  position: relative !important;
  right: 0 !important;
}

@media (max-width: 1100px) {
  #dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #dashboard-kpis {
    grid-template-columns: 1fr !important;
  }
  .dashboard-focus--next-actions .dashboard-focus__all-cta {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* —— Command palette —— */
body.cmd-palette-open {
  overflow: hidden;
}

.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 24px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.cmd-palette.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.cmd-palette__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 20, 0.72);
  backdrop-filter: blur(8px);
}

.cmd-palette__panel {
  position: relative;
  width: min(680px, 100%);
  border-radius: 18px;
  border: 1px solid #263659;
  background: #0a1120;
  box-shadow: 0 24px 64px rgba(2, 6, 23, 0.7);
  overflow: hidden;
  animation: cmd-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cmd-pop {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cmd-palette__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #1b2946;
  background: #0b1326;
}

.cmd-palette__head svg {
  width: 18px;
  height: 18px;
  color: var(--glass-accent);
  flex-shrink: 0;
}

.cmd-palette__input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  color: #e8eeff !important;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  outline: none;
}

.cmd-palette__list {
  list-style: none;
  margin: 0;
  padding: 10px;
  max-height: min(56vh, 480px);
  overflow-y: auto;
}

.cmd-palette__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  color: #dce6ff;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cmd-palette__item:hover,
.cmd-palette__item.is-active {
  background: #131f3c;
  border-color: #2f4f90;
}

.cmd-palette__item-main {
  display: grid;
  gap: 4px;
}

.cmd-palette__item-label {
  font-size: 31px;
  line-height: 1.1;
  font-weight: 800;
}

.cmd-palette__item-group {
  display: inline-flex;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: #1a2a51;
  border: 1px solid #33559c;
  color: #a9c3ff;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .cmd-palette__panel {
    width: min(96vw, 96vw);
  }

  .cmd-palette__input {
    font-size: 18px;
  }

  .cmd-palette__item-label {
    font-size: 22px;
  }
}

.cmd-palette__item-go {
  font-size: 12px;
  opacity: 0.65;
  color: #9bb5ea;
}

.cmd-palette__empty {
  padding: 20px;
  text-align: center;
  color: var(--glass-muted);
  font-size: 13px;
}

.cmd-palette__hint {
  margin: 0;
  padding: 10px 16px 12px;
  font-size: 11px;
  color: #8398c3;
  border-top: 1px solid #1b2946;
  background: #091124;
}

.cmd-palette__hint kbd {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  font-size: 10px;
  margin: 0 2px;
}

/* —— Skeletons —— */
.ui-skeleton-line {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(124, 92, 255, 0.12) 0%,
    rgba(124, 92, 255, 0.22) 50%,
    rgba(124, 92, 255, 0.12) 100%
  );
  background-size: 200% 100%;
  animation: ui-shimmer 1.1s ease-in-out infinite;
}

.ui-skeleton-line--md {
  width: 70%;
}

.ui-skeleton-line--lg {
  width: 92%;
}

@keyframes ui-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ui-skeleton-row td {
  vertical-align: middle;
}

/* —— Empty states —— */
.premium-empty-wrap {
  padding: 0 !important;
  border: none !important;
}

.premium-empty {
  text-align: center;
  padding: 36px 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(124, 92, 255, 0.12), transparent 55%);
}

.premium-empty__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--glass-text);
}

.premium-empty__hint {
  margin: 0;
  font-size: 13px;
  color: var(--glass-muted);
}

/* —— Payment status badges —— */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.status-badge--paid {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.35);
}

.status-badge--pending {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
}

.status-badge--suspended {
  background: rgba(100, 116, 139, 0.25);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.3);
}

.status-badge--network {
  background: rgba(99, 73, 163, 0.28);
  color: #d4c4f7;
  border-color: rgba(147, 112, 219, 0.45);
}

/* —— Admin: aviso de red a clientes —— */
.admin-service-red-modes {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.admin-service-red-mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--bank-border, rgba(148, 163, 184, 0.25));
  background: var(--bank-surface-soft, rgba(15, 23, 42, 0.45));
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-service-red-mode:has(input:checked) {
  border-color: rgba(147, 112, 219, 0.55);
  background: rgba(99, 73, 163, 0.15);
}

.admin-service-red-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-service-red-mode span {
  font-size: 13px;
  font-weight: 700;
  color: var(--bank-text, #e2e8f0);
}

.admin-service-red-mode small {
  font-size: 11px;
  color: var(--bank-muted, #94a3b8);
}

/* —— Client edit modal (Internet / TV) —— */
.client-edit-modal {
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow-y: auto;
}

.client-edit-modal.modal,
.modal.client-edit-modal {
  background: rgba(5, 8, 18, 0.65) !important;
  backdrop-filter: blur(10px);
}

.client-edit-modal__dialog {
  width: 100%;
  max-width: min(440px, 100%);
  margin: 0 auto;
  border-radius: 22px !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg-strong) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(18px);
  padding: 0;
  overflow: hidden;
}

.client-edit-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
}

.client-edit-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--glass-text);
}

.client-edit-modal__close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--glass-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.client-edit-modal__close:hover {
  color: var(--glass-text);
  background: var(--glass-accent-soft);
}

.client-edit-modal__body {
  padding: 16px 18px 8px;
  max-height: min(65vh, 520px);
  overflow-y: auto;
}

.client-edit-modal__body .form-input,
.client-edit-modal__body .form-select {
  border-radius: 12px !important;
}

.client-edit-modal__footer {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  justify-content: stretch;
}

.client-edit-modal__footer input[type="submit"],
.client-edit-modal__footer .btn-glass {
  width: 100%;
  justify-content: center;
}

.btn-edit-client {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--glass-text);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-edit-client:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.25);
}

.client-actions-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* —— Client portal UX app-like —— */
.client-home-hero {
  position: relative;
  overflow: hidden;
}

.client-home-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.client-main-metrics {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px;
}

.client-main-metric {
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.38);
}

.client-main-metric__label {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--glass-muted);
}

.client-main-metric__value {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--glass-text);
}

.client-main-metric__value--sm {
  font-size: 17px;
}

.client-critical-alert {
  margin-top: 12px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.13);
  color: #fbbf24;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}

.client-history-card {
  border: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.32);
  border-radius: 12px;
  padding: 10px 12px;
}

.client-history-card--summary {
  border-color: rgba(129, 140, 248, 0.38);
  background: rgba(99, 102, 241, 0.1);
  margin-bottom: 12px;
}

.client-history-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--glass-text);
}

.client-history-card__row strong {
  color: #a78bfa;
}

.client-history-card__note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--glass-muted);
}

.client-pay-sticky {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 246, 0.5);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(59, 130, 246, 0.88));
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 30px rgba(76, 29, 149, 0.35);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.client-pay-sticky:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* —— Dashboard focus actions —— */
.dashboard-focus__item {
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.34);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

a.dashboard-focus__item {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.dashboard-focus__user {
  margin: 0;
  color: var(--glass-text);
  font-weight: 700;
  font-size: 14px;
}

.dashboard-focus__debt {
  margin: 0;
  color: #fbbf24;
  font-size: 20px;
  font-weight: 800;
}

.dashboard-focus__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}

.dashboard-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.13);
  color: #fbbf24;
  border-radius: 12px;
  padding: 10px 12px;
}

.dashboard-alert__text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-alert__cta {
  margin-left: auto;
  color: #fde68a;
  font-size: 12px;
  text-decoration: none;
  font-weight: 700;
}

.quick-actions-fab {
  position: fixed;
  right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 56;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-actions-fab__btn {
  min-width: 102px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.45);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(59, 130, 246, 0.86));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 26px rgba(30, 41, 59, 0.35);
  transition: all 0.2s ease;
  gap: 6px;
}

.quick-actions-fab__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.quick-actions-fab__btn i {
  width: 14px;
  height: 14px;
}

/* Vivas y consistentes: tablas, botones y cards */
.glass-panel,
.btn-glass,
.btn-edit-client,
.status-badge,
table tbody tr {
  transition: all 0.2s ease;
}

table tbody tr:hover {
  background: rgba(124, 92, 255, 0.08);
}

table tbody tr td:first-child {
  cursor: pointer;
}

/* —— Dashboard v3 (modelo visual principal) —— */
.dashboard-v3__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-v3__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  color: var(--glass-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dashboard-v3__title {
  margin: 0;
  color: var(--glass-text);
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 800;
}

.dashboard-v3__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-v3__icon-btn {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--glass-text);
  text-decoration: none;
  transition: all 0.2s ease;
}

.dashboard-v3__icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.25);
}

.dashboard-v3__icon-btn i {
  width: 16px;
  height: 16px;
}

.dashboard-v3__kpi {
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 92px;
}

.dashboard-v3__trafico {
  border-radius: 16px;
}

/* —— Module hero for clients pages —— */
.module-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.module-hero__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  color: var(--glass-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.module-hero__title {
  margin: 0;
  color: var(--glass-text);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
}

.module-hero__actions {
  display: inline-flex;
  gap: 8px;
}

.module-hero__icon-btn {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--glass-text);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.module-hero__icon-btn i {
  width: 16px;
  height: 16px;
}

.module-hero__icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.25);
}

.legacy-clients-title {
  display: none !important;
}

/* Barra de filtros Clientes (Internet / TV): modo oscuro por defecto en theme-dark */
html.theme-dark #form-filtros-internet > div.clientes-smart-filters,
html.theme-dark .clientes-page .clientes-smart-filters {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

html.theme-dark .clientes-smart-filters label {
  color: #cbd5e1 !important;
}

/* Mismo componente en modo claro */
html:not(.theme-dark) #form-filtros-internet > div.clientes-smart-filters,
html:not(.theme-dark) .clientes-page .clientes-smart-filters {
  border: 1px solid #e2e8f0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 20px rgba(15, 23, 42, 0.06) !important;
}

html:not(.theme-dark) #form-filtros-internet label,
html:not(.theme-dark) #form-filtros-tv label,
html:not(.theme-dark) .clientes-smart-filters label {
  color: #475569 !important;
}

html:not(.theme-dark) #form-filtros-internet .clientes-smart-filters .form-input,
html:not(.theme-dark) .clientes-smart-filters .form-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.theme-dark) #form-filtros-internet .clientes-smart-filters .form-input:focus,
html:not(.theme-dark) .clientes-smart-filters .form-input:focus {
  border-color: rgba(21, 140, 105, 0.45) !important;
  box-shadow: 0 0 0 2px rgba(21, 140, 105, 0.12) !important;
}

#form-filtros-internet button[type="submit"],
#form-filtros-tv button[type="submit"] {
  display: none !important;
}

/* —— Tabulator unified admin tables —— */
.smart-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.smart-table-toolbar__left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--glass-text);
}

.smart-table-toolbar__actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.smart-table-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.28);
}

/* Sin flex-grow: el input no debe comerse toda la fila; deja aire a plan/estado/servidor */
.smart-table-toolbar__filters .smart-filter-q {
  flex: 0 1 15rem;
  min-width: 9rem;
  max-width: min(18rem, 46vw);
  width: auto;
  box-sizing: border-box;
}

.smart-table-toolbar__filters .smart-filter-select {
  flex: 1 1 8rem;
  min-width: 7.5rem;
  max-width: 13rem;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .smart-table-toolbar__filters .smart-filter-q {
    flex: 1 1 100%;
    max-width: none;
  }
}

html:not(.theme-dark) .smart-table-toolbar__filters {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.tab-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tab-btn {
  border: 1px solid var(--glass-border);
  background: rgba(30, 41, 59, 0.5);
  color: var(--glass-text);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: rgba(124, 92, 255, 0.2);
}

.tab-btn--danger {
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.tabulator {
  background: transparent !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px;
}

.tabulator .tabulator-header {
  background: rgba(15, 23, 42, 0.72) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

.tabulator .tabulator-col,
.tabulator .tabulator-cell {
  border-right: 1px solid rgba(148, 163, 184, 0.14) !important;
}

.tabulator .tabulator-row {
  background: rgba(15, 23, 42, 0.28) !important;
  cursor: pointer;
}

.tabulator-responsive-collapse table {
  width: 100%;
}

.tabulator-responsive-collapse tr td {
  font-size: 12px;
  color: var(--glass-muted);
}

.tabulator-responsive-collapse tr td:first-child {
  color: var(--glass-text);
  font-weight: 700;
}

@media (max-width: 768px) {
  .module-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .module-hero__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .smart-table-toolbar {
    position: sticky;
    top: 62px;
    z-index: 5;
    padding: 8px;
    background: rgba(2, 6, 23, 0.86);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
  }

  .smart-table-toolbar__actions {
    width: 100%;
  }

  .smart-table-toolbar__actions .btn-glass {
    flex: 1;
    justify-content: center;
    min-height: 38px;
  }

  .tab-actions {
    width: 100%;
  }

  .tab-btn {
    flex: 1;
    text-align: center;
  }

  /* Título + filtros pegados al hacer scroll (toda la tarjeta, no solo la primera fila) */
  #smart-admin-table .smart-table-toolbar-wrap {
    position: sticky;
    top: 58px;
    z-index: 8;
  }

  #smart-admin-table .smart-table-toolbar-wrap .smart-table-toolbar {
    position: relative !important;
    top: auto !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

/* === Global Theme System v2 === */
:root {
  --ui-bg: #f4f7ff;
  --ui-bg-grad-a: rgba(71, 85, 255, 0.12);
  --ui-bg-grad-b: rgba(6, 182, 212, 0.08);
  --ui-surface: rgba(255, 255, 255, 0.9);
  --ui-surface-strong: rgba(255, 255, 255, 0.98);
  --ui-border: rgba(15, 23, 42, 0.1);
  --ui-text: #0f172a;
  --ui-muted: #5b6679;
  --ui-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
}

html.theme-dark {
  --ui-bg: #070b14;
  --ui-bg-grad-a: rgba(139, 92, 246, 0.22);
  --ui-bg-grad-b: rgba(56, 189, 248, 0.14);
  --ui-surface: rgba(13, 18, 30, 0.74);
  --ui-surface-strong: rgba(9, 14, 24, 0.9);
  --ui-border: rgba(148, 163, 184, 0.18);
  --ui-text: #e7ecff;
  --ui-muted: #9ca9c6;
  --ui-shadow: 0 20px 42px rgba(0, 0, 0, 0.42);
}

body.app-shell {
  background:
    radial-gradient(980px 520px at 8% -20%, var(--ui-bg-grad-a), transparent 56%),
    radial-gradient(720px 420px at 94% 0, var(--ui-bg-grad-b), transparent 48%),
    var(--ui-bg) !important;
  color: var(--ui-text);
}

.panel-sidebar,
.panel-topbar,
.glass-panel,
.bg-white,
.dark\:bg-gray-800 {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
}

.panel-search-wrap,
.panel-icon-btn,
.panel-profile-btn,
.panel-select {
  background: var(--ui-surface-strong) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.panel-search,
.form-input,
.form-select {
  color: var(--ui-text) !important;
}

.text-gray-700,
.text-gray-800,
.dark\:text-gray-200,
.dark\:text-gray-300 {
  color: var(--ui-text) !important;
}

.text-gray-400,
.text-gray-500,
.dark\:text-gray-400 {
  color: var(--ui-muted) !important;
}

table tbody tr:hover {
  background: rgba(124, 92, 255, 0.14) !important;
}

.panel-link {
  border-color: transparent !important;
}

.panel-link:hover {
  background: rgba(124, 92, 255, 0.18) !important;
}

.panel-link.is-active {
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.34) !important;
}

/* === Neo-Premium Visual Layer (inspired by reference) === */
:root {
  --neo-bg-0: #06070e;
  --neo-bg-1: #0b0d17;
  --neo-panel: rgba(16, 18, 30, 0.82);
  --neo-panel-strong: rgba(14, 16, 28, 0.96);
  --neo-border: rgba(166, 177, 255, 0.16);
  --neo-border-strong: rgba(166, 177, 255, 0.24);
  --neo-text: #edf1ff;
  --neo-muted: #97a1bf;
  --neo-accent: #7c5cff;
  --neo-accent-2: #4fc3ff;
  --neo-shadow: 0 20px 44px rgba(0, 0, 0, 0.46);
}

html:not(.theme-dark) {
  --neo-bg-0: #eef2ff;
  --neo-bg-1: #f7f9ff;
  --neo-panel: rgba(255, 255, 255, 0.84);
  --neo-panel-strong: rgba(255, 255, 255, 0.96);
  --neo-border: rgba(30, 41, 59, 0.11);
  --neo-border-strong: rgba(30, 41, 59, 0.2);
  --neo-text: #0f172a;
  --neo-muted: #596581;
  --neo-accent: #6b5cff;
  --neo-accent-2: #0ea5e9;
  --neo-shadow: 0 16px 32px rgba(30, 41, 59, 0.14);
}

body.app-shell {
  position: relative;
  background:
    radial-gradient(900px 480px at -10% -18%, rgba(124, 92, 255, 0.24), transparent 54%),
    radial-gradient(760px 420px at 108% -4%, rgba(79, 195, 255, 0.15), transparent 52%),
    linear-gradient(165deg, var(--neo-bg-0), var(--neo-bg-1)) !important;
}

body.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 260px at 12% 86%, rgba(124, 92, 255, 0.08), transparent 58%),
    radial-gradient(640px 290px at 88% 26%, rgba(79, 195, 255, 0.07), transparent 60%);
  z-index: 0;
}

.panel-shell,
.panel-topbar,
.panel-sidebar,
main,
.glass-panel {
  position: relative;
  z-index: 1;
}

.panel-shell {
  padding: 14px !important;
  gap: 14px !important;
}

.panel-sidebar,
.panel-topbar,
.glass-panel,
.bg-white,
.dark\:bg-gray-800 {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.03), transparent 38%), var(--neo-panel) !important;
  border: 1px solid var(--neo-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--neo-shadow) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.panel-topbar {
  padding: 8px !important;
}

.container {
  max-width: 1320px;
}

.panel-search-wrap {
  background: var(--neo-panel-strong) !important;
  border: 1px solid var(--neo-border) !important;
  border-radius: 14px !important;
  min-height: 42px;
}

.panel-search {
  font-size: 13px !important;
}

.panel-icon-btn,
.panel-profile-btn,
.module-hero__icon-btn {
  border-color: var(--neo-border) !important;
  background: var(--neo-panel-strong) !important;
  color: var(--neo-text) !important;
}

.panel-link {
  border-radius: 12px !important;
  color: var(--neo-text) !important;
}

.panel-link:hover {
  background: rgba(124, 92, 255, 0.16) !important;
  border: 1px solid var(--neo-border-strong) !important;
}

.panel-link.is-active {
  background: linear-gradient(132deg, rgba(124, 92, 255, 0.88), rgba(79, 195, 255, 0.76)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.btn-glass,
.tab-btn,
.quick-actions-fab__btn {
  border-radius: 12px !important;
}

.btn-glass {
  background: linear-gradient(130deg, rgba(124, 92, 255, 0.28), rgba(79, 195, 255, 0.2)) !important;
  border: 1px solid var(--neo-border-strong) !important;
  color: var(--neo-text) !important;
}

.btn-glass:hover {
  background: linear-gradient(130deg, rgba(124, 92, 255, 0.4), rgba(79, 195, 255, 0.25)) !important;
}

.module-hero__title,
.dashboard-v3__title,
h2,
h3,
h4 {
  color: var(--neo-text) !important;
  letter-spacing: -0.02em;
}

.module-hero__eyebrow,
.dashboard-v3__eyebrow,
.text-gray-400,
.text-gray-500,
.dark\:text-gray-400 {
  color: var(--neo-muted) !important;
}

.status-badge {
  border-width: 1px !important;
}

.status-badge--paid {
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.18);
}

.status-badge--pending {
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.2);
}

.status-badge--suspended {
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.18);
}

.status-badge--network {
  box-shadow: inset 0 0 0 1px rgba(147, 112, 219, 0.35);
}

.smart-table-toolbar {
  background: var(--neo-panel-strong);
  border: 1px solid var(--neo-border);
  border-radius: 12px;
  padding: 10px;
}

.tabulator {
  border-color: var(--neo-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

.tabulator .tabulator-header,
.tabulator .tabulator-footer {
  background: rgba(10, 12, 20, 0.86) !important;
  border-color: var(--neo-border) !important;
}

.tabulator .tabulator-row {
  background: rgba(255, 255, 255, 0.01) !important;
}

.tabulator .tabulator-row:hover {
  background: rgba(124, 92, 255, 0.16) !important;
}

.modal-content {
  background: var(--neo-panel) !important;
  border: 1px solid var(--neo-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--neo-shadow) !important;
  color: var(--neo-text) !important;
}

.form-input,
.form-select {
  border: 1px solid var(--neo-border) !important;
  background: var(--neo-panel-strong) !important;
  color: var(--neo-text) !important;
  border-radius: 12px !important;
}

.form-input::placeholder {
  color: var(--neo-muted) !important;
}

.premium-toast {
  border-radius: 14px !important;
  border: 1px solid var(--neo-border) !important;
}

@media (max-width: 768px) {
  .panel-shell {
    padding: 10px !important;
    gap: 10px !important;
  }

  .panel-topbar {
    border-radius: 16px !important;
    top: 6px !important;
  }

  .glass-panel,
  .bg-white,
  .dark\:bg-gray-800 {
    border-radius: 16px !important;
  }
}

.tabulator .tabulator-row.tabulator-selected {
  background: rgba(124, 92, 255, 0.22) !important;
}

.tabulator .tabulator-footer {
  background: rgba(15, 23, 42, 0.74) !important;
  border-top: 1px solid var(--glass-border) !important;
}

@media (max-width: 768px) {
  .cmd-palette__panel {
    border-radius: 16px;
  }
}

@media (min-width: 720px) {
  .client-main-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .client-pay-sticky {
    left: auto;
    right: 18px;
    width: min(380px, calc(100vw - 36px));
  }
}

/* Global premium polish */
.container {
  width: 100% !important;
  max-width: min(1560px, calc(100vw - 24px)) !important;
}

main.h-full.overflow-y-auto > .container {
  padding-bottom: 94px;
}

.panel-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}

.panel-link {
  min-height: 42px;
  font-weight: 600;
}

.panel-icon-btn,
.panel-profile-btn,
.btn-glass {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.panel-icon-btn:hover,
.panel-profile-btn:hover,
.btn-glass:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.2);
  border-color: rgba(125, 211, 252, 0.45);
}

.btn-glass,
.module-hero__icon-btn,
.dashboard-v3__icon-btn,
.tab-btn,
button[type="submit"],
button[type="button"] {
  min-height: 40px;
  border-radius: 12px !important;
  font-weight: 600;
}

.tabulator .tabulator-row {
  min-height: 46px;
}

.form-input,
.form-select,
textarea {
  min-height: 40px;
}

.form-select[multiple] {
  min-height: 180px;
  padding: 8px;
}

.traffic-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.traffic-subtitle {
  margin-top: 4px;
  color: var(--glass-muted);
  font-size: 12px;
}

.traffic-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.traffic-kpi {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  border-radius: 12px;
  padding: 10px 12px;
}

.traffic-kpi span {
  color: var(--glass-muted);
  display: block;
  font-size: 12px;
}

.traffic-kpi strong {
  color: var(--glass-text);
  font-size: 16px;
}

.traffic-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
}

.traffic-years label {
  display: block;
  margin-bottom: 6px;
  color: var(--glass-muted);
  font-size: 12px;
}

.traffic-years-select {
  width: 100%;
  min-height: 152px;
  border-radius: 12px !important;
  border: 1px solid var(--ss-border) !important;
  background: var(--ss-surface-2) !important;
  color: var(--ss-text) !important;
  padding: 8px !important;
}

.traffic-years-select option {
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  color: var(--ss-text);
}

.traffic-years-select option:checked {
  background: linear-gradient(135deg, var(--ss-accent), var(--ss-accent-strong)) !important;
  color: #ecfff8 !important;
}

.traffic-chart-wrap {
  height: 330px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.25);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.9), rgba(59, 130, 246, 0.9));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.95), rgba(56, 189, 248, 0.95));
  background-clip: content-box;
}

@media (max-width: 768px) {
  .container {
    max-width: calc(100vw - 12px) !important;
  }

  .traffic-layout {
    grid-template-columns: 1fr;
  }

  .traffic-chart-wrap {
    height: 260px;
  }

  .traffic-kpis {
    grid-template-columns: 1fr;
  }
}

/* Bank-like premium layout (light/dark parity) */
:root {
  --bank-bg: #eef1f7;
  --bank-surface: #ffffff;
  --bank-surface-soft: #f6f8fc;
  --bank-border: #e6eaf2;
  --bank-text: #0f172a;
  --bank-muted: #64748b;
  --bank-accent: #2563eb;
  --bank-accent-2: #111827;
  --bank-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

html.theme-dark {
  --bank-bg: #070b14;
  --bank-surface: #0f1728;
  --bank-surface-soft: #141d31;
  --bank-border: #22314b;
  --bank-text: #ecf2ff;
  --bank-muted: #9aaac5;
  --bank-accent: #5b8cff;
  --bank-accent-2: #dbeafe;
  --bank-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

body.app-shell {
  background: linear-gradient(180deg, var(--bank-bg), color-mix(in srgb, var(--bank-bg) 82%, #9fb4d6 18%)) !important;
  color: var(--bank-text);
}

.panel-shell {
  padding: 14px !important;
  gap: 14px !important;
}

.panel-sidebar {
  background: var(--bank-surface) !important;
  border: 1px solid var(--bank-border) !important;
  border-radius: 28px !important;
  box-shadow: var(--bank-shadow) !important;
}

.panel-brand {
  padding: 18px 14px 10px;
}

.panel-brand-link strong {
  color: var(--bank-text);
  font-size: 16px;
}

.panel-brand-link span {
  color: var(--bank-muted);
}

.panel-nav {
  padding: 10px;
  gap: 8px;
}

.panel-link {
  border-radius: 14px;
  padding: 11px 12px;
  color: var(--bank-muted) !important;
  border: 1px solid transparent;
  background: transparent;
}

.panel-link i {
  color: currentColor;
}

.panel-link:hover {
  background: var(--bank-surface-soft);
  color: var(--bank-text) !important;
  border-color: var(--bank-border);
  transform: none;
}

.panel-link.is-active {
  background: var(--bank-accent-2);
  color: #fff !important;
  box-shadow: none;
}

html.theme-dark .panel-link.is-active {
  background: #101b31;
  color: #f8fbff !important;
  border-color: #2a3b5b;
}

.panel-topbar {
  background: var(--bank-surface) !important;
  border: 1px solid var(--bank-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--bank-shadow) !important;
}

.panel-search-wrap {
  background: var(--bank-surface-soft);
  border: 1px solid var(--bank-border);
  border-radius: 14px;
}

.panel-search,
.panel-select {
  color: var(--bank-text) !important;
}

.panel-icon-btn,
.panel-profile-btn,
.btn-glass {
  background: var(--bank-surface-soft);
  border: 1px solid var(--bank-border) !important;
  color: var(--bank-text);
}

.dashboard-v3__hero,
.module-hero {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 14px !important;
  margin-bottom: 12px !important;
}

.dashboard-v3__eyebrow,
.module-hero__eyebrow {
  color: var(--bank-muted) !important;
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 600;
}

.dashboard-v3__title,
.module-hero__title {
  color: var(--bank-text) !important;
  font-size: clamp(1.6rem, 1.35rem + 0.8vw, 2.15rem);
  font-weight: 800;
}

.dashboard-v3__icon-btn,
.module-hero__icon-btn {
  background: var(--bank-surface) !important;
  border: 1px solid var(--bank-border) !important;
  color: var(--bank-text) !important;
  border-radius: 12px !important;
}

.dashboard-alert {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bank-accent) 16%, var(--bank-surface) 84%), var(--bank-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--bank-accent) 24%, var(--bank-border) 76%) !important;
  box-shadow: none;
}

.dashboard-alert__text {
  color: var(--bank-text) !important;
}

.dashboard-alert__cta {
  background: var(--bank-accent-2) !important;
  color: #fff !important;
  border-radius: 10px;
  padding: 8px 12px;
}

.glass-panel,
.dashboard-v3__kpi,
.dashboard-v3__trafico,
.dashboard-focus {
  background: var(--bank-surface) !important;
  border: 1px solid var(--bank-border) !important;
  box-shadow: var(--bank-shadow) !important;
  border-radius: 18px !important;
  backdrop-filter: none !important;
}

.dashboard-v3__kpi p,
.dashboard-focus__user,
.traffic-kpi strong,
.traffic-kpi span {
  color: var(--bank-text) !important;
}

.dashboard-focus__item {
  background: var(--bank-surface-soft);
  border: 1px solid var(--bank-border);
  border-radius: 14px;
  padding: 12px;
}

.dashboard-focus__cta {
  background: var(--bank-accent-2);
  color: #fff;
  border-radius: 10px;
  padding: 7px 11px;
}

.traffic-kpi {
  background: var(--bank-surface-soft);
  border: 1px solid var(--bank-border);
}

.traffic-chart-wrap {
  background: var(--bank-surface-soft);
  border: 1px solid var(--bank-border);
}

.tabulator,
.tabulator .tabulator-header,
.tabulator .tabulator-tableholder,
.tabulator .tabulator-footer {
  background: var(--bank-surface) !important;
  border-color: var(--bank-border) !important;
}

.tabulator .tabulator-header .tabulator-col {
  background: var(--bank-surface-soft) !important;
  color: var(--bank-muted) !important;
}

.tabulator .tabulator-row {
  border-bottom: 1px solid var(--bank-border) !important;
}

.tabulator .tabulator-row .tabulator-cell {
  color: var(--bank-text) !important;
}

.tabulator .tabulator-row:hover {
  background: color-mix(in srgb, var(--bank-accent) 10%, var(--bank-surface) 90%) !important;
}

.form-input,
.form-select,
textarea {
  background: var(--bank-surface-soft) !important;
  border: 1px solid var(--bank-border) !important;
  color: var(--bank-text) !important;
}

.quick-actions-fab__btn {
  background: var(--bank-accent-2) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 24px rgba(17, 24, 39, 0.25);
}

.mobile-bottom-nav {
  background: var(--bank-surface) !important;
  border: 1px solid var(--bank-border) !important;
}

.mobile-bottom-nav a {
  color: var(--bank-muted) !important;
}

.mobile-bottom-nav a.is-active {
  background: var(--bank-accent-2) !important;
  color: #fff !important;
}

@media (max-width: 1024px) {
  .panel-sidebar {
    border-radius: 22px !important;
  }
}

/* Orix-inspired refinement */
.dashboard-orix {
  row-gap: 14px;
}

.dashboard-orix__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.dashboard-orix__hero-actions {
  display: flex;
  gap: 10px;
}

.dashboard-orix__action {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
}

.dashboard-orix__banner {
  border-radius: 16px !important;
  padding: 14px 16px !important;
}

.dashboard-orix__cta {
  border-radius: 12px !important;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.dashboard-v3__kpi {
  border-radius: 20px !important;
  padding: 18px !important;
  min-height: 120px;
}

.dashboard-v3__kpi > div p:first-child {
  color: var(--bank-muted) !important;
  font-size: 12px;
  letter-spacing: .01em;
  margin-bottom: 6px !important;
}

.dashboard-v3__kpi > div p:last-child {
  color: var(--bank-text) !important;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
}

.dashboard-focus {
  border-radius: 20px !important;
  padding: 16px !important;
}

.dashboard-focus__item {
  border-radius: 14px;
  padding: 13px;
}

.dashboard-focus__debt {
  font-size: 22px;
  font-weight: 800;
}

.dashboard-v3__trafico {
  border-radius: 20px !important;
}

.traffic-toolbar h4 {
  color: var(--bank-text) !important;
  font-size: 18px;
  font-weight: 800;
}

.panel-search-wrap {
  min-height: 46px;
}

.panel-search::placeholder {
  color: color-mix(in srgb, var(--bank-muted) 78%, transparent 22%);
}

.panel-profile-menu {
  background: var(--bank-surface) !important;
  border: 1px solid var(--bank-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--bank-shadow) !important;
}

.panel-profile-menu a {
  border-radius: 10px;
  color: var(--bank-text) !important;
}

.panel-profile-menu a:hover {
  background: var(--bank-surface-soft) !important;
}

.panel-mobile-drawer {
  background: var(--bank-surface) !important;
  border: 1px solid var(--bank-border) !important;
}

.quick-actions-fab {
  right: 18px;
  bottom: 18px;
  gap: 10px;
}

.quick-actions-fab__btn {
  border-radius: 12px !important;
  min-height: 42px;
  padding: 0 14px;
}

html.theme-dark .quick-actions-fab__btn {
  background: #17243d !important;
  color: #e7efff !important;
}

@media (max-width: 768px) {
  .dashboard-orix__hero {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .dashboard-v3__kpi > div p:last-child {
    font-size: 28px;
  }
}

/* Soft enterprise layer inspired by reference */
:root {
  --soft-glow-a: rgba(125, 211, 252, 0.28);
  --soft-glow-b: rgba(196, 181, 253, 0.28);
  --soft-glow-c: rgba(244, 114, 182, 0.14);
}

html.theme-dark {
  --soft-glow-a: rgba(56, 189, 248, 0.18);
  --soft-glow-b: rgba(129, 140, 248, 0.2);
  --soft-glow-c: rgba(217, 70, 239, 0.14);
}

.glass-panel,
.dashboard-v3__kpi,
.dashboard-v3__trafico,
.dashboard-focus,
#form-filtros-internet,
#form-filtros-tv,
.smart-table-toolbar {
  position: relative;
  overflow: hidden;
}

.glass-panel::before,
.dashboard-v3__kpi::before,
.dashboard-v3__trafico::before,
.dashboard-focus::before,
#form-filtros-internet::before,
#form-filtros-tv::before,
.smart-table-toolbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(220px 90px at 92% 0%, var(--soft-glow-a), transparent 70%),
    radial-gradient(180px 70px at 78% 0%, var(--soft-glow-b), transparent 72%),
    radial-gradient(150px 60px at 12% 100%, var(--soft-glow-c), transparent 76%);
  opacity: .85;
}

.dashboard-v3__kpi > *,
.dashboard-v3__trafico > *,
.dashboard-focus > *,
#form-filtros-internet > *,
#form-filtros-tv > *,
.smart-table-toolbar > * {
  position: relative;
  z-index: 1;
}

.panel-link {
  border-radius: 12px;
  padding: 10px 11px;
}

.panel-link.is-active {
  position: relative;
}

.panel-link.is-active::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  opacity: .92;
}

.panel-topbar,
.panel-sidebar,
.panel-mobile-drawer,
.panel-profile-menu {
  backdrop-filter: saturate(120%);
  -webkit-backdrop-filter: saturate(120%);
}

.dashboard-focus__item,
.traffic-kpi,
.traffic-chart-wrap,
.tabulator .tabulator-header .tabulator-col {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html.theme-dark .dashboard-focus__item,
html.theme-dark .traffic-kpi,
html.theme-dark .traffic-chart-wrap,
html.theme-dark .tabulator .tabulator-header .tabulator-col {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dashboard-alert {
  border-radius: 14px !important;
}

.dashboard-alert__cta,
.dashboard-focus__cta,
.quick-actions-fab__btn {
  letter-spacing: .01em;
}

.tabulator .tabulator-row {
  border-bottom-style: dashed !important;
  border-bottom-width: 1px !important;
}

.tabulator .tabulator-footer {
  border-top-style: dashed !important;
}

/* Pixel-feel pass: index + clientes + clientes-t */
.clientes-page .module-hero {
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

.clientes-page .module-hero__title {
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
}

.legacy-clients-title {
  display: none !important;
}

#form-filtros-internet,
#form-filtros-tv {
  background: var(--bank-surface) !important;
  border: 1px solid var(--bank-border) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--bank-shadow) !important;
}

/* El formulario ya no envuelve la barra con el mismo fondo: en claro solo la tarjeta .clientes-smart-filters lleva el estilo */
html:not(.theme-dark) #form-filtros-internet {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html:not(.theme-dark) #form-filtros-internet::before {
  opacity: 0.2 !important;
}

#form-filtros-internet .grid,
#form-filtros-tv .grid {
  gap: 10px !important;
}

#form-filtros-internet label,
#form-filtros-tv label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bank-muted) !important;
}

.clientes-page .w-full.overflow-hidden.rounded-lg.shadow-xs {
  border-radius: 20px !important;
  border: 1px solid var(--bank-border) !important;
  background: var(--bank-surface) !important;
  box-shadow: var(--bank-shadow) !important;
}

.clientes-page table thead th {
  height: 46px;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bank-muted) !important;
  background: var(--bank-surface-soft) !important;
}

.clientes-page table tbody td {
  height: 58px;
  font-size: 13px !important;
  color: var(--bank-text) !important;
}

.clientes-page table tbody tr {
  transition: background-color .18s ease;
}

.clientes-page table tbody tr:hover {
  background: color-mix(in srgb, var(--bank-accent) 9%, var(--bank-surface) 91%) !important;
}

.smart-table-toolbar {
  background: var(--bank-surface) !important;
  border: 1px solid var(--bank-border) !important;
  border-radius: 16px !important;
  padding: 10px 12px !important;
}

.tabulator .tabulator-cell {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.tabulator .tabulator-col-title {
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .06em;
}

.panel-sidebar {
  width: 280px !important;
}

.panel-topbar-inner {
  min-height: 62px;
}

.panel-search-wrap {
  max-width: 760px;
}

.dashboard-v3 .grid.gap-6.mb-6.md\:grid-cols-2.xl\:grid-cols-4 {
  gap: 12px !important;
}

.dashboard-v3__kpi {
  min-height: 132px;
}

.dashboard-v3__kpi > div p:last-child {
  font-size: 30px;
}

@media (max-width: 1366px) {
  .panel-sidebar {
    width: 254px !important;
  }

  .dashboard-v3__kpi > div p:last-child {
    font-size: 27px;
  }
}

@media (max-width: 1024px) {
  .panel-shell {
    gap: 10px !important;
    padding: 10px !important;
  }

  .clientes-page .w-full.overflow-hidden.rounded-lg.shadow-xs {
    border-radius: 16px !important;
  }

  .dashboard-v3__kpi {
    min-height: 120px;
  }
}

@media (max-width: 768px) {
  .panel-topbar-inner {
    min-height: 54px;
  }

  #form-filtros-internet,
  #form-filtros-tv {
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .clientes-page table tbody td {
    height: 50px;
    font-size: 12px !important;
  }

  .smart-table-toolbar {
    padding: 8px !important;
  }

  .dashboard-v3__kpi > div p:last-child {
    font-size: 24px;
  }
}

/* CRM board-like table composition */
#smart-admin-table.glass-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  /* Los desplegables de filtros no deben quedar recortados por el ::before / bordes */
  overflow: visible !important;
}

/* Barra de título + acciones + filtros en una sola tarjeta (antes los filtros parecían una franja vacía) */
#smart-admin-table .smart-table-toolbar-wrap {
  position: relative;
  z-index: 2;
  margin-bottom: 14px;
  padding: 12px 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(100, 116, 139, 0.35);
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.72) 0%, rgba(15, 23, 42, 0.88) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.22);
}

html:not(.theme-dark) #smart-admin-table .smart-table-toolbar-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

#smart-admin-table .smart-table-toolbar-wrap .smart-table-toolbar {
  margin-bottom: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#smart-admin-table .smart-table-toolbar-wrap .smart-table-toolbar__filters {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border: none;
  border-radius: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  background: transparent;
}

#smart-admin-table .smart-table-toolbar__filters-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 10px;
}

html:not(.theme-dark) #smart-admin-table .smart-table-toolbar__filters-title {
  color: #64748b;
}

#smart-admin-table .smart-table-toolbar__filters-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#smart-admin-table .smart-table-toolbar__filters-fields .smart-filter-q {
  flex: 1 1 14rem;
  min-width: 10rem;
  max-width: min(22rem, 100%);
}

#smart-admin-table .smart-table-toolbar__filters-fields .smart-filter-select {
  flex: 1 1 9rem;
  min-width: 8rem;
  max-width: 14rem;
}

@media (max-width: 640px) {
  #smart-admin-table .smart-table-toolbar__filters-fields .smart-filter-q {
    flex: 1 1 100%;
    max-width: none;
  }
}

body.clients-modern-page .container > .w-full.overflow-hidden.rounded-lg.shadow-xs > .w-full.overflow-x-auto {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.smart-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Clientes en vivo: solo tabla (sin panel de tarjetas ni vista previa lateral). */
.smart-admin-layout--table-only {
  grid-template-columns: minmax(0, 1fr);
}

.smart-admin-layout__table {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* El card de la tabla no debe desbordar el contenedor de la página */
body.clients-modern-page #smart-admin-table.smart-admin-table-host,
body.clients-modern-page #smart-admin-table.glass-panel {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#smart-tabulator {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  /* Nada se dibuja fuera del panel redondeado */
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#smart-tabulator .tabulator {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Scroll horizontal solo aquí: la tabla no “rompe” el marco del card */
#smart-tabulator .tabulator .tabulator-tableholder {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.55) rgba(15, 23, 42, 0.35);
}

#smart-tabulator .tabulator .tabulator-tableholder::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

#smart-tabulator .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.55);
  border-radius: 999px;
}

#smart-tabulator .tabulator .tabulator-tableholder::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.25);
  border-radius: 999px;
}

/* Cabecera al 100% del card: misma anchura útil que el cuerpo (fitColumns + widthGrow) */
#smart-tabulator .tabulator .tabulator-header {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* El CSS del tema Tabulator usa .tabulator-headers { display: inline-block }: aunque pongas width 100%,
   las columnas sólo suman su ancho y el resto de la fila se ve como “franja” (fondo del holder). */
#smart-tabulator .tabulator .tabulator-header .tabulator-headers {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-header-contents {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col {
  box-sizing: border-box !important;
}

/*
 * Cabecera + celdas: flex-grow 17+13+10+22+8+8+4+18 = 100 (Pago más estrecha, Acciones más ancha).
 * width:auto !important anula los width en px que Tabulator pone en línea (evita franja vacía a la derecha).
 */
#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="usuario"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-row .tabulator-cell[tabulator-field="usuario"] {
  flex: 17 1 0% !important;
  width: auto !important;
  min-width: 120px !important;
  max-width: none !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="plan"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-row .tabulator-cell[tabulator-field="plan"] {
  flex: 13 1 0% !important;
  width: auto !important;
  min-width: 160px !important;
  max-width: none !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="servicio_ui"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-row .tabulator-cell[tabulator-field="servicio_ui"] {
  flex: 10 1 0% !important;
  width: auto !important;
  min-width: 120px !important;
  max-width: none !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="pagado"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-row .tabulator-cell[tabulator-field="pagado"] {
  flex: 22 1 0% !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: none !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="monto"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-row .tabulator-cell[tabulator-field="monto"] {
  flex: 8 1 0% !important;
  width: auto !important;
  min-width: 72px !important;
  max-width: none !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="ultimo_pago"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-row .tabulator-cell[tabulator-field="ultimo_pago"] {
  flex: 8 1 0% !important;
  width: auto !important;
  min-width: 72px !important;
  max-width: none !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="dias_atraso"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-row .tabulator-cell[tabulator-field="dias_atraso"] {
  flex: 4 1 0% !important;
  width: auto !important;
  min-width: 44px !important;
  max-width: none !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="id"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-row .tabulator-cell[tabulator-field="id"] {
  flex: 18 1 0% !important;
  width: auto !important;
  min-width: 168px !important;
  max-width: none !important;
}

/* Cuerpo: mismas reglas flex que la cabecera para alinear anchos. */
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-table {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#smart-tabulator .tabulator .tabulator-tableholder .tabulator-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* Pago: tres botones pueden envolver en dos líneas si el ancho es justo */
#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="pagado"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-cell.tabulator-cell--pay-state {
  min-width: 200px !important;
  text-align: left !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="pagado"] .tabulator-col-content {
  justify-content: flex-start !important;
}

/* Monto: reparto flex; sin max-width fijo para no cortar el reparto al 100% */
#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="monto"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-cell[tabulator-field="monto"],
#smart-tabulator .tabulator .tabulator-tableholder .tabulator-cell.tabulator-cell--monto-compact {
  min-width: 72px !important;
  max-width: none !important;
  text-align: left !important;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="monto"] .tabulator-col-content {
  justify-content: flex-start !important;
}

#smart-admin-table.glass-panel > .smart-admin-layout {
  position: relative;
  z-index: 1;
}

#smart-tabulator .tabulator-header .tabulator-col .tabulator-col-content,
#smart-tabulator .tabulator-tableholder .tabulator-cell {
  vertical-align: middle !important;
}

/* —— Clientes en vivo: filas limpias, Pago sin truncar, menos ruido visual —— */
#smart-tabulator .tabulator-row {
  border-bottom: 1px solid rgba(71, 85, 105, 0.35) !important;
  border-bottom-style: solid !important;
  min-height: 50px;
}

#smart-tabulator .tabulator-row:hover {
  background: rgba(30, 41, 59, 0.55) !important;
  box-shadow: none !important;
}

#smart-tabulator .tabulator-row.tabulator-selected {
  background: rgba(99, 102, 241, 0.16) !important;
  box-shadow: inset 3px 0 0 rgba(165, 180, 252, 0.9) !important;
}

#smart-tabulator .tabulator-cell.tabulator-cell--pay-state {
  overflow: visible !important;
  max-width: none;
}

#smart-tabulator .tabulator-cell.tabulator-cell--pay-state .pay-state-switch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 10px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.55);
  max-width: 100%;
  box-sizing: border-box;
}

#smart-tabulator .tabulator-cell.tabulator-cell--pay-state .pay-state-btn {
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 0 10px;
  min-height: 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#smart-tabulator .tabulator-cell.tabulator-cell--pay-state .pay-state-btn:focus-visible {
  outline: 2px solid rgba(165, 180, 252, 0.85);
  outline-offset: 1px;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col.tabulator-cell--plan-inline,
#smart-tabulator .tabulator-cell.tabulator-cell--plan-inline {
  overflow: visible !important;
  max-width: none;
  text-align: center;
  vertical-align: middle !important;
  min-width: 160px;
}

#smart-tabulator .tabulator .tabulator-header .tabulator-col[tabulator-field="servicio_ui"],
#smart-tabulator .tabulator-tableholder .tabulator-cell[tabulator-field="servicio_ui"] {
  overflow: visible !important;
  min-width: 120px;
  max-width: none;
}

/* Ocupa el ancho de la celda; fitColumns reparte espacio y el texto del plan no se corta */
#smart-tabulator .plan-inline-select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
  min-height: 32px;
  padding: 5px 24px 5px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #f1f5f9 !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  border-radius: 8px !important;
  cursor: pointer;
  appearance: auto;
}

#smart-tabulator .plan-inline-select:disabled {
  opacity: 0.55;
  cursor: wait;
}

#smart-tabulator .plan-inline-select option {
  color: #0f172a;
  background: #f8fafc;
}

/* Nombre puede crecer con el ancho de la tabla; el texto sigue en una línea con puntos suspensivos */
#smart-tabulator .tabulator-cell.tabulator-cell--nombre-smart {
  overflow: hidden !important;
  max-width: none !important;
}

#smart-tabulator .tabulator-header .tabulator-col[tabulator-field="usuario"] {
  max-width: none !important;
}

#smart-tabulator .smart-cell-nombre {
  min-width: 0;
  max-width: 100%;
}

#smart-tabulator .smart-cell-nombre__main,
#smart-tabulator .smart-cell-nombre__sub,
#smart-tabulator .smart-cell-nombre__tel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#smart-tabulator .smart-cell-nombre__tel {
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

#smart-tabulator .tabulator-row {
  min-height: 40px;
}

#smart-tabulator .tabulator-cell {
  padding: 4px 6px !important;
  font-size: 11px !important;
}

#smart-tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#smart-tabulator .service-badge {
  gap: 6px;
  padding: 5px 8px;
  font-size: 10px;
  line-height: 1.2;
  max-width: 100%;
  flex-wrap: wrap;
  white-space: normal;
  align-items: flex-start;
}

#smart-tabulator .service-badge .service-badge__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

#smart-tabulator .service-badge .service-badge-sub {
  display: block;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.9;
  line-height: 1.2;
}

#smart-tabulator .service-badge b {
  font-weight: 700;
  letter-spacing: 0.01em;
}

#smart-tabulator .service-badge-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.07);
}

#smart-tabulator .service-badge small {
  font-size: 9px;
}

#smart-tabulator .tab-actions--compact {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#smart-tabulator .tab-actions--compact .tab-btn--compact {
  padding: 4px 7px !important;
  font-size: 9px !important;
  font-weight: 600;
  line-height: 1.15;
  border-radius: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#smart-tabulator .tabulator-cell.tabulator-cell--actions-smart {
  /* visible: los botones no se cortan; el scroll horizontal va en tableholder */
  overflow: visible !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  max-width: 100%;
  min-width: 0;
}

.smart-admin-layout__table .smart-columns-panel {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

#smart-tabulator .tabulator-footer {
  border-top-style: solid !important;
  border-top-color: rgba(71, 85, 105, 0.4) !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

#smart-tabulator .tabulator-footer .tabulator-footer-contents {
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}

#smart-tabulator .tabulator-footer .tabulator-paginator {
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  max-width: 100%;
}

/* —— Clientes en vivo (Tabulator): modo oscuro unificado (html.theme-dark + toggle del panel) —— */
html.theme-dark #smart-tabulator .tabulator {
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(100, 116, 139, 0.28) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 44px rgba(0, 0, 0, 0.4) !important;
}

html.theme-dark #smart-tabulator .tabulator .tabulator-header {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  border-bottom: 1px solid rgba(71, 85, 105, 0.55) !important;
  color: #f1f5f9 !important;
}

html.theme-dark #smart-tabulator .tabulator .tabulator-header .tabulator-col {
  background: transparent !important;
  color: #e2e8f0 !important;
  border-right-color: rgba(51, 65, 85, 0.5) !important;
}

html.theme-dark #smart-tabulator .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  color: inherit !important;
}

html.theme-dark #smart-tabulator .tabulator-row {
  background: rgba(15, 23, 42, 0.42) !important;
  border-bottom-color: rgba(51, 65, 85, 0.5) !important;
}

html.theme-dark #smart-tabulator .tabulator-row:hover {
  background: rgba(51, 65, 85, 0.55) !important;
  box-shadow: none !important;
}

html.theme-dark #smart-tabulator .tabulator-row.tabulator-selected {
  background: rgba(79, 70, 229, 0.16) !important;
  box-shadow: inset 3px 0 0 rgba(167, 139, 250, 0.92) !important;
}

html.theme-dark #smart-tabulator .tabulator-cell {
  color: #e2e8f0 !important;
  border-right-color: rgba(51, 65, 85, 0.4) !important;
}

html.theme-dark #smart-tabulator .smart-cell-nombre__main {
  color: #f8fafc !important;
}

html.theme-dark #smart-tabulator .smart-cell-nombre__sub {
  color: #94a3b8 !important;
}

html.theme-dark #smart-tabulator .tabulator-cell.tabulator-cell--pay-state .pay-state-switch {
  background: rgba(2, 6, 23, 0.55) !important;
  border: 1px solid rgba(100, 116, 139, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.theme-dark #smart-tabulator .tabulator-cell.tabulator-cell--pay-state .pay-state-btn {
  color: #cbd5e1 !important;
  background: rgba(30, 41, 59, 0.75) !important;
  border: 1px solid rgba(71, 85, 105, 0.45) !important;
}

html.theme-dark #smart-tabulator .tabulator-cell.tabulator-cell--pay-state .pay-state-btn:hover {
  background: rgba(51, 65, 85, 0.9) !important;
  color: #f8fafc !important;
}

html.theme-dark #smart-tabulator .tabulator-cell.tabulator-cell--pay-state .pay-state-btn.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.92), rgba(79, 70, 229, 0.9)) !important;
  border-color: rgba(165, 180, 252, 0.5) !important;
  box-shadow: 0 2px 14px rgba(79, 70, 229, 0.35);
}

html.theme-dark #smart-tabulator .plan-inline-select {
  color: #f1f5f9 !important;
  background: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(100, 116, 139, 0.48) !important;
}

html.theme-dark #smart-tabulator .tab-actions--compact .tab-btn--compact {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(100, 116, 139, 0.35) !important;
  color: #e2e8f0 !important;
}

html.theme-dark #smart-tabulator .tab-actions--compact .tab-btn--compact:hover {
  background: rgba(99, 102, 241, 0.22) !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
  color: #ffffff !important;
}

html.theme-dark #smart-tabulator .tab-actions--compact .tab-btn--compact.tab-btn--danger {
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, 0.38) !important;
  background: rgba(127, 29, 29, 0.32) !important;
}

html.theme-dark #smart-tabulator .tab-actions--compact .tab-btn--compact.tab-btn--danger:hover {
  background: rgba(185, 28, 28, 0.45) !important;
  color: #ffffff !important;
}

html.theme-dark #smart-tabulator .tabulator-footer {
  background: rgba(2, 6, 23, 0.72) !important;
  border-top-color: rgba(71, 85, 105, 0.55) !important;
}

html.theme-dark #smart-admin-table.smart-admin-table-host.glass-panel {
  background: rgba(15, 23, 42, 0.38) !important;
  border: 1px solid rgba(100, 116, 139, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 40px rgba(0, 0, 0, 0.35) !important;
}

html.theme-dark #smart-admin-table .smart-table-toolbar__left {
  color: #e2e8f0 !important;
}

html.theme-dark #smart-admin-table .smart-table-toolbar__left strong {
  color: #f8fafc !important;
}

html.theme-dark #smart-admin-table .smart-table-toolbar__left .text-gray-400 {
  color: #94a3b8 !important;
}

html.theme-dark #smart-admin-table .smart-table-toolbar__filters {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
}

html.theme-dark #smart-admin-table .smart-table-toolbar__filters-title {
  color: #a8b8d8 !important;
}

html.theme-dark #smart-admin-table .smart-table-toolbar__filters .form-input,
html.theme-dark #smart-admin-table .smart-table-toolbar__filters .form-select {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(129, 140, 248, 0.35) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

html.theme-dark #smart-admin-table .smart-table-toolbar__filters .form-input::placeholder {
  color: #64748b !important;
}

html.theme-dark body.clients-modern-page .smart-table-toolbar__actions .tab-btn,
html.theme-dark body.clients-modern-page .smart-table-toolbar__actions .btn-glass {
  background: linear-gradient(130deg, rgba(124, 92, 255, 0.82), rgba(79, 70, 229, 0.88)) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #ffffff !important;
}

html.theme-dark body.clients-modern-page .smart-table-toolbar__actions .tab-btn:hover,
html.theme-dark body.clients-modern-page .smart-table-toolbar__actions .btn-glass:hover {
  filter: brightness(1.08);
}

html.theme-dark body.clients-modern-page .smart-table-toolbar__actions #bulk-suspend {
  background: linear-gradient(130deg, rgba(185, 28, 28, 0.88), rgba(127, 29, 29, 0.92)) !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
  color: #ffffff !important;
}

html.theme-dark body.clients-modern-page #smart-density.form-select {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(100, 116, 139, 0.45) !important;
  color: #e2e8f0 !important;
}

/* —— Tabulator: paginación (solo tema oscuro; en claro ver bloque html:not(.theme-dark) más abajo) —— */
html.theme-dark .tabulator .tabulator-footer,
html.theme-dark .tabulator .tabulator-footer .tabulator-footer-contents {
  color: #e2e8f0 !important;
}

html.theme-dark .tabulator .tabulator-footer .tabulator-paginator {
  color: #cbd5e1 !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

html.theme-dark .tabulator .tabulator-footer .tabulator-paginator label,
html.theme-dark .tabulator .tabulator-footer .tabulator-page-counter {
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html.theme-dark .tabulator .tabulator-footer select.tabulator-page-size,
html.theme-dark .tabulator .tabulator-footer .tabulator-page-size {
  color: #f8fafc !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  border-radius: 10px !important;
  padding: 6px 28px 6px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  min-height: 34px !important;
}

html.theme-dark .tabulator .tabulator-footer .tabulator-page {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  margin: 0 2px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

html.theme-dark .tabulator .tabulator-footer .tabulator-page:hover:not(:disabled) {
  color: #ffffff !important;
  background: rgba(99, 73, 163, 0.35) !important;
  border-color: rgba(167, 139, 250, 0.55) !important;
}

html.theme-dark .tabulator .tabulator-footer .tabulator-page.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.85), rgba(99, 73, 163, 0.9)) !important;
  border-color: rgba(196, 181, 253, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25);
}

html.theme-dark .tabulator .tabulator-footer .tabulator-page:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  color: #94a3b8 !important;
}

html.theme-dark .tabulator .tabulator-footer .tabulator-paginator button.tabulator-page {
  color: #f1f5f9 !important;
}

/* Paginación Tabulator: modo claro (botones y texto legibles) */
html:not(.theme-dark) .tabulator .tabulator-footer .tabulator-page {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  margin: 0 2px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer !important;
}

html:not(.theme-dark) .tabulator .tabulator-footer .tabulator-page:hover:not(:disabled):not(.active) {
  color: #0f172a !important;
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

html:not(.theme-dark) .tabulator .tabulator-footer .tabulator-page.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.92), rgba(99, 73, 163, 0.95)) !important;
  border-color: rgba(124, 92, 255, 0.45) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

html:not(.theme-dark) .tabulator .tabulator-footer .tabulator-page:disabled {
  opacity: 0.5 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

html:not(.theme-dark) .tabulator .tabulator-footer .tabulator-paginator button.tabulator-page {
  color: #1e293b !important;
}

.smart-preview {
  background: var(--bank-surface) !important;
  border: 1px solid var(--bank-border) !important;
  border-radius: 16px;
  box-shadow: var(--bank-shadow);
  padding: 12px;
  position: sticky;
  top: 84px;
}

.smart-preview__empty {
  font-size: 12px;
  color: var(--bank-muted);
}

.smart-preview__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.smart-preview__avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #93c5fd, #c4b5fd);
  color: #0b1020;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.smart-preview__head strong {
  display: block;
  color: var(--bank-text);
  font-size: 14px;
}

.smart-preview__head span {
  color: var(--bank-muted);
  font-size: 12px;
}

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

.smart-preview__grid div {
  background: var(--bank-surface-soft);
  border: 1px solid var(--bank-border);
  border-radius: 10px;
  padding: 8px;
}

.smart-preview__grid label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bank-muted);
}

.smart-preview__grid p {
  margin-top: 4px;
  color: var(--bank-text);
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 1200px) {
  .smart-admin-layout {
    grid-template-columns: 1fr;
  }

  .smart-preview {
    position: static;
  }
}

/* —— Funcional: sidebar visible en desktop, menú móvil encima —— */
@media (min-width: 768px) {
  .panel-shell > aside.panel-sidebar {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
  }
}

.panel-topbar {
  position: relative;
  z-index: 45;
}

.panel-mobile-drawer {
  z-index: 60 !important;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

.panel-profile-menu {
  z-index: 80 !important;
}

.panel-profile-menu__user {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--bank-border, rgba(255, 255, 255, 0.08));
  margin-bottom: 4px;
}

.panel-profile-menu__user strong {
  display: block;
  font-size: 14px;
  color: var(--bank-text, #fff);
}

.panel-profile-menu__user span {
  font-size: 11px;
  color: var(--bank-muted, #94a3b8);
}

/* —— Configuración cuenta (layout tipo app) —— */
.settings-hero__sub {
  margin-top: 6px;
  color: var(--bank-muted, #94a3b8);
  font-size: 13px;
  max-width: 42rem;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.settings-card {
  border-radius: 20px !important;
  padding: 20px !important;
}

.settings-card--profile {
  text-align: center;
}

.settings-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  color: #0b1020;
  background: linear-gradient(135deg, #93c5fd, #c4b5fd);
}

.settings-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--bank-text, #fff);
}

.settings-username {
  font-size: 13px;
  color: var(--bank-muted, #94a3b8);
  margin-bottom: 10px;
}

.settings-role-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bank-surface-soft, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--bank-border, rgba(255, 255, 255, 0.1));
  color: var(--bank-text, #e2e8f0);
}

.settings-meta {
  list-style: none;
  padding: 16px 0 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--bank-border, rgba(255, 255, 255, 0.08));
  text-align: left;
  font-size: 12px;
  color: var(--bank-muted, #94a3b8);
}

.settings-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.settings-meta i[data-lucide] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.settings-shortcuts {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.settings-shortcut {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
}

.settings-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--bank-text, #fff);
}

.settings-section-title i[data-lucide] {
  width: 18px;
  height: 18px;
}

.settings-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--bank-muted, #94a3b8);
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-btn-primary {
  background: linear-gradient(130deg, rgba(99, 102, 241, 0.95), rgba(59, 130, 246, 0.92)) !important;
  color: #fff !important;
  border: none !important;
}

.settings-btn-ghost {
  opacity: 0.95;
}

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

/* Support center */
.support-admin-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 12px;
}

.support-ticket-item {
  background: var(--bank-surface-soft, rgba(255, 255, 255, 0.03));
}

.support-ticket-item:hover {
  border-color: var(--bank-border, rgba(255, 255, 255, 0.2)) !important;
  background: color-mix(in srgb, var(--bank-accent, #6366f1) 10%, var(--bank-surface, #0f172a) 90%);
}

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

/* Apple 2026 auth + menu refresh */
.auth2026-body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(900px 500px at 5% -10%, rgba(96, 165, 250, 0.25), transparent 56%),
              radial-gradient(700px 420px at 95% 8%, rgba(167, 139, 250, 0.2), transparent 52%),
              linear-gradient(165deg, #0a0f1d, #0d1528);
  color: #eaf2ff;
  font-family: Inter, system-ui, sans-serif;
}
.auth2026-wrap {
  width: min(980px, calc(100vw - 24px));
  margin: 40px auto;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 14px;
}
.auth2026-wrap--single { grid-template-columns: 1fr; max-width: 560px; }
.auth2026-aside, .auth2026-card {
  background: rgba(14, 20, 36, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(16px);
}
.auth2026-aside { padding: 24px; }
.auth2026-logo { width: 44px; height: 44px; object-fit: contain; }
.auth2026-aside h1 { font-size: 30px; font-weight: 800; margin-top: 16px; }
.auth2026-aside p { color: #9fb0d4; margin-top: 6px; }
.auth2026-aside ul { margin-top: 14px; color: #d5e3ff; font-size: 14px; display: grid; gap: 8px; }
.auth2026-card { padding: 24px; }
.auth2026-card h2 { font-size: 28px; font-weight: 800; color: #f5f8ff; }
.auth2026-sub { color: #98a8c8; margin-top: 4px; margin-bottom: 16px; }
.auth2026-btn {
  width: 100%; border: 0; border-radius: 14px; min-height: 44px; font-weight: 700;
  background: linear-gradient(130deg, #3b82f6, #6366f1); color: #fff;
}
.auth2026-error, .auth2026-success {
  border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px;
}
.auth2026-error { background: rgba(220, 38, 38, 0.18); border: 1px solid rgba(248, 113, 113, 0.4); }
.auth2026-success { background: rgba(5, 150, 105, 0.18); border: 1px solid rgba(52, 211, 153, 0.45); }
.auth2026-links { margin-top: 14px; font-size: 13px; }
.auth2026-links a { color: #93c5fd; text-decoration: underline; }

.panel-sidebar {
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.9), rgba(12, 20, 38, 0.82)) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}
.panel-link.is-active {
  background: linear-gradient(130deg, rgba(59, 130, 246, 0.95), rgba(99, 102, 241, 0.92)) !important;
}
.panel-search-wrap {
  border-radius: 12px !important;
}

/* Layout breathing room (anti-clutter pass) */
:root {
  --ui-space-1: 8px;
  --ui-space-2: 12px;
  --ui-space-3: 16px;
  --ui-space-4: 20px;
  --ui-space-5: 24px;
}

.panel-stack {
  row-gap: var(--ui-space-4) !important;
}

.panel-stack.panel-stack--lg {
  row-gap: var(--ui-space-5) !important;
}

main.h-full.overflow-y-auto > .container.grid {
  row-gap: var(--ui-space-4);
}

.module-hero {
  margin-top: var(--ui-space-3) !important;
  margin-bottom: var(--ui-space-3) !important;
  padding: var(--ui-space-4) !important;
}

.glass-panel {
  padding: var(--ui-space-4);
}

.glass-panel > .grid {
  gap: var(--ui-space-3) !important;
}

.form-input,
.form-select {
  min-height: 42px;
}

.tabulator .tabulator-cell,
.tabulator .tabulator-col {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

@media (max-width: 768px) {
  main.h-full.overflow-y-auto > .container.grid {
    row-gap: var(--ui-space-3);
  }

  .module-hero {
    padding: var(--ui-space-3) !important;
  }

  .glass-panel {
    padding: var(--ui-space-3);
  }
}

/* Full width workspace + new nav rail */
.container,
main.h-full.overflow-y-auto > .container,
.panel-topbar-inner {
  width: 100% !important;
  max-width: none !important;
}

.panel-shell {
  gap: 16px !important;
}

.panel-sidebar.panel-sidebar--rail {
  width: 300px !important;
  min-width: 300px;
  padding: 18px 14px !important;
}

.panel-workspace-switcher {
  margin: 2px 6px 14px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.42);
}

.panel-workspace-switcher label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neo-muted);
}

.panel-workspace-select {
  width: 100%;
  min-height: 38px;
  border-radius: 11px;
  border: 1px solid var(--neo-border);
  background: var(--neo-panel-strong);
  color: var(--neo-text);
  padding: 8px 10px;
}

.panel-nav-group-title {
  margin: 14px 10px 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neo-muted);
}

.panel-link {
  min-height: 44px;
  margin: 2px 4px;
}

.smart-table-toolbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.service-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid transparent;
}

.service-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}

.service-badge b {
  font-weight: 700;
}

.service-badge small {
  font-size: 10px;
  opacity: .8;
}

.service-badge--ok {
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(52, 211, 153, 0.35);
}

.service-badge--warn {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(251, 191, 36, 0.35);
}

.service-badge--cut {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(248, 113, 113, 0.35);
}

/* Insignias de servicio (Por vencer / Activo / Cortado): contraste en modo claro */
html:not(.theme-dark) .service-badge--warn {
  color: #92400e !important;
  background: rgba(251, 191, 36, 0.28) !important;
  border-color: rgba(217, 119, 6, 0.5) !important;
}

html:not(.theme-dark) .service-badge--warn .service-badge-dot {
  background: #d97706 !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.45) !important;
}

html:not(.theme-dark) .service-badge--warn small {
  color: #78350f !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

html:not(.theme-dark) .service-badge--ok {
  color: #065f46 !important;
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(5, 150, 105, 0.42) !important;
}

html:not(.theme-dark) .service-badge--ok .service-badge-dot {
  background: #059669 !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35) !important;
}

html:not(.theme-dark) .service-badge--ok small {
  color: #064e3b !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

html:not(.theme-dark) .service-badge--cut {
  color: #991b1b !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(220, 38, 38, 0.42) !important;
}

html:not(.theme-dark) .service-badge--cut .service-badge-dot {
  background: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(252, 165, 165, 0.45) !important;
}

html:not(.theme-dark) .service-badge--cut small {
  color: #7f1d1d !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

.pay-state-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--neo-border);
  background: rgba(2, 6, 23, 0.35);
}

.pay-state-btn {
  border: 0;
  border-radius: 8px;
  min-height: 26px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--neo-muted);
  background: transparent;
}

.pay-state-btn.is-active {
  color: #eef2ff;
  background: linear-gradient(130deg, rgba(59, 130, 246, 0.65), rgba(99, 102, 241, 0.58));
}

.traffic-chart-wrap,
.chart-card {
  position: relative;
}

#chart-ingresos-dia,
#chart-crecimiento-dia,
#traficoChart {
  min-height: 210px;
  height: 210px !important;
  width: 100% !important;
}

#apex-traffic-widget {
  min-height: 280px;
}

.traffic-live-readout {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: #e2e8f0;
  letter-spacing: 0.02em;
}

html.theme-dark .traffic-live-readout {
  color: #f1f5f9;
}

.chart-empty-state {
  position: absolute;
  inset: auto 12px 12px 12px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--neo-muted);
  background: rgba(2, 6, 23, 0.28);
}

/* ===== VISUAL RESET: clean enterprise ISP UI (solo modo oscuro) ===== */
html.theme-dark body.app-shell {
  background: #070b16 !important;
}

body.app-shell::before {
  display: none !important;
}

.panel-shell {
  padding: 10px !important;
  gap: 10px !important;
}

.panel-sidebar,
.panel-topbar,
.glass-panel,
.dashboard-v3__kpi,
.dashboard-v3__trafico,
.dashboard-focus,
.support-ticket-item,
.smart-preview {
  background: #0d1324 !important;
  border: 1px solid #1a2440 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.panel-sidebar {
  width: 276px !important;
  min-width: 276px !important;
  padding: 12px 10px !important;
}

.panel-brand {
  padding: 8px 8px 10px !important;
}

.panel-brand-link strong {
  font-size: 14px !important;
}

.panel-brand-link span {
  font-size: 11px !important;
}

.panel-workspace-switcher {
  margin: 6px 6px 10px !important;
  background: #0a1020 !important;
  border: 1px solid #1f2b4c !important;
}

.panel-nav-group-title {
  color: #7f90b6 !important;
  margin: 10px 10px 6px !important;
}

.panel-nav {
  gap: 4px !important;
  padding: 2px !important;
}

.panel-link {
  min-height: 40px !important;
  border-radius: 10px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  color: #d6def3 !important;
  border: 1px solid transparent !important;
}

.panel-link:hover {
  transform: none !important;
  background: #121b33 !important;
  border-color: #233257 !important;
}

.panel-link.is-active {
  background: #1a2750 !important;
  border-color: #3151a0 !important;
  box-shadow: none !important;
  color: #f4f7ff !important;
}

.panel-topbar {
  padding: 8px 10px !important;
}

.panel-search-wrap {
  border-radius: 10px !important;
  background: #0a1122 !important;
  border: 1px solid #1b2745 !important;
}

.panel-icon-btn,
.panel-profile-btn,
.module-hero__icon-btn,
.dashboard-v3__icon-btn {
  border-radius: 10px !important;
  border: 1px solid #26365e !important;
  background: #121c36 !important;
  color: #d8e3ff !important;
  box-shadow: none !important;
}

.panel-icon-btn:hover,
.panel-profile-btn:hover,
.module-hero__icon-btn:hover,
.dashboard-v3__icon-btn:hover {
  transform: none !important;
  background: #1a2a4f !important;
}

.btn-glass,
.tab-btn,
.quick-actions-fab__btn {
  border-radius: 10px !important;
  border: 1px solid #2a3d6b !important;
  background: #16264b !important;
  color: #e7eeff !important;
  box-shadow: none !important;
}

.btn-glass:hover,
.tab-btn:hover,
.quick-actions-fab__btn:hover {
  transform: none !important;
  background: #203563 !important;
}

.dashboard-v3,
.dashboard-orix,
.container.grid {
  row-gap: 14px !important;
}

.dashboard-v3__hero,
.module-hero {
  padding: 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid #1a2542;
}

.dashboard-v3__title,
.module-hero__title {
  font-size: 30px !important;
  line-height: 1.1 !important;
  color: #f2f6ff !important;
}

.dashboard-v3__eyebrow,
.module-hero__eyebrow {
  color: #7e92bf !important;
  letter-spacing: 0.08em !important;
}

#dashboard-kpis {
  gap: 10px !important;
  margin-bottom: 2px !important;
}

.dashboard-v3__kpi {
  min-height: 96px;
}

.dashboard-v3__kpi p:first-child {
  color: #88a0d0 !important;
}

.dashboard-v3__kpi p:last-child {
  color: #f6f8ff !important;
}

.dashboard-focus__item {
  border-radius: 12px !important;
  background: #0b1224 !important;
  border: 1px solid #1c2a4a !important;
}

.dashboard-focus__debt {
  color: #ffd382 !important;
}

.dashboard-focus__cta {
  border-radius: 9px !important;
  min-height: 32px !important;
  background: #1a2b53 !important;
  border: 1px solid #304f95 !important;
}

.traffic-kpi,
.traffic-chart-wrap {
  background: #0b1224 !important;
  border: 1px solid #1b2a49 !important;
  border-radius: 12px !important;
}

.traffic-toolbar h4,
.traffic-kpi strong {
  color: #f2f6ff !important;
}

.traffic-subtitle,
.traffic-kpi span {
  color: #879cc8 !important;
}

.form-input,
.form-select {
  min-height: 40px !important;
  border-radius: 10px !important;
  background: #0b1326 !important;
  border: 1px solid #22325a !important;
  color: #edf2ff !important;
}

.quick-actions-fab {
  position: fixed;
  right: 16px !important;
  bottom: 16px !important;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #2a3d6b;
  background: rgba(10, 18, 36, 0.94);
  z-index: 42;
}

.quick-actions-fab::before {
  content: "Acciones rapidas";
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #90a5cf;
  margin-bottom: 2px;
}

.quick-actions-fab__btn {
  width: 148px;
  min-height: 40px;
  justify-content: flex-start !important;
  padding: 0 12px !important;
  gap: 8px !important;
  font-weight: 700;
}

.quick-actions-fab__btn span {
  display: inline-block !important;
}

@media (max-width: 768px) {
  .quick-actions-fab {
    left: 10px;
    right: 10px !important;
    bottom: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .quick-actions-fab::before {
    grid-column: 1 / -1;
  }

  .quick-actions-fab__btn {
    width: 100%;
    justify-content: center !important;
  }
}

/* Scrollbar: según tema */
html:not(.theme-dark) * {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.5) #e2e8f0;
}

html.theme-dark * {
  scrollbar-width: thin;
  scrollbar-color: #5f7fca #0a1020;
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: #0b1224;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5b7fd1, #4a67b1);
  border: 2px solid #0b1224;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7a98df, #5a7aca);
}

.panel-nav::-webkit-scrollbar-track,
#support-chat::-webkit-scrollbar-track,
#client-ticket-chat::-webkit-scrollbar-track,
.tabulator-tableholder::-webkit-scrollbar-track {
  background: #0a1020;
}

/* Settings page premium redesign */
body.settings-page .settings-layout--premium {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 18px;
}

body.settings-page .settings-card--profile {
  position: sticky;
  top: 14px;
}

body.settings-page .settings-mini-kpis {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.settings-page .settings-mini-kpis > div {
  border: 1px solid #25365f;
  background: #0a1224;
  border-radius: 10px;
  padding: 8px 10px;
}

body.settings-page .settings-mini-kpis span {
  display: block;
  font-size: 11px;
  color: #8aa0cb;
}

body.settings-page .settings-mini-kpis strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #f0f5ff;
}

body.settings-page .settings-form {
  display: grid;
  gap: 14px;
}

body.settings-page .settings-block {
  border: 1px solid #1d2b4c;
  background: #0a1122;
  border-radius: 14px;
  padding: 14px;
}

body.settings-page .settings-section-title {
  margin: 0;
}

body.settings-page .settings-section-sub {
  margin: 6px 0 12px;
  color: #90a4cd;
  font-size: 13px;
}

body.settings-page .settings-security-note {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9cb1db;
  border: 1px dashed #2e477d;
  border-radius: 10px;
  padding: 8px 10px;
}

body.settings-page .settings-security-note i[data-lucide] {
  width: 14px;
  height: 14px;
}

@media (max-width: 980px) {
  body.settings-page .settings-layout--premium {
    grid-template-columns: 1fr;
  }
  body.settings-page .settings-card--profile {
    position: static;
  }
}

/* Client portal simplification (non-technical users) */
body.client-simple-page .client-simple-hero {
  border-bottom: 1px solid #1b2746;
}

body.client-simple-page .client-step-title {
  font-size: 16px;
  font-weight: 800;
  color: #f3f7ff;
}

body.client-simple-page .client-home-hero__top {
  margin-top: 8px;
}

body.client-simple-page .client-main-metric {
  border-radius: 12px;
  padding: 12px;
  background: #0a1224;
  border: 1px solid #1f2d4f;
}

body.client-simple-page .client-main-metric--help {
  display: grid;
  gap: 8px;
}

body.client-simple-page .client-main-metric__label {
  font-size: 12px;
  color: #8ca0c8;
}

body.client-simple-page .client-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.client-simple-page .client-primary-btn {
  min-height: 48px;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(83, 147, 126, 0.45) !important;
  background: linear-gradient(145deg, #148965, #106c51) !important;
  transition: transform .15s ease, filter .15s ease;
}

body.client-simple-page .client-primary-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

body.client-simple-page .client-primary-btn i[data-lucide] {
  width: 17px;
  height: 17px;
  opacity: .98;
}

body.client-simple-page .client-primary-btn--issue {
  background: linear-gradient(145deg, #197a98, #145f78) !important;
  border-color: rgba(68, 135, 155, 0.5) !important;
}

body.client-simple-page .client-primary-btn--plan {
  background: linear-gradient(145deg, #7d5c2a, #6c4f24) !important;
  border-color: rgba(160, 124, 69, 0.5) !important;
}

body.client-simple-page .client-reports-list-wrap,
body.client-simple-page .client-reports-detail-wrap {
  border: 1px solid #1f2d4f;
  border-radius: 12px;
  background: #0a1224;
  padding: 10px;
}

body.client-simple-page .client-reports-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 12px;
}

@media (max-width: 980px) {
  body.client-simple-page .client-reports-grid {
    grid-template-columns: 1fr;
  }
}

body.client-simple-page .client-ticket-item {
  width: 100%;
  text-align: left;
  border: 1px solid #25365e;
  background: #0e1830;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}

body.client-simple-page .client-ticket-item__meta {
  font-size: 11px;
  color: #8aa0cb;
}

body.client-simple-page .client-ticket-item__title {
  margin-top: 4px;
  font-size: 13px;
  color: #ecf2ff;
  font-weight: 700;
}

body.client-simple-page .client-ticket-item__status {
  margin-top: 6px;
  display: inline-block;
  font-size: 11px;
  color: #b7c8ee;
  border: 1px solid #314f92;
  border-radius: 999px;
  padding: 2px 8px;
}

body.client-simple-page .client-chat-msg {
  margin-bottom: 10px;
}

body.client-simple-page .client-chat-msg__meta {
  font-size: 11px;
  color: #90a4cf;
  margin-bottom: 4px;
}

body.client-simple-page .client-chat-msg__bubble {
  border: 1px solid #26395f;
  background: #101b35;
  color: #edf3ff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}

body.client-simple-page .client-chat-msg.is-agent .client-chat-msg__bubble {
  border-color: #2d4d89;
  background: #132347;
}

body.client-simple-page .client-reports-empty {
  padding: 18px !important;
}

body.client-simple-page .client-plan-card {
  border: 1px solid #274648;
  background: #0d1d29;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

body.client-simple-page .client-plan-card.is-current {
  border-color: #5e7f64;
  background: #142533;
}

body.client-simple-page .client-plan-card__media {
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #2f4952;
  background: linear-gradient(165deg, #112638, #0c1b2a);
  position: relative;
  padding: 6px;
}

body.client-simple-page .client-plan-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

body.client-simple-page .client-plan-card__media-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  color: #d7efe8;
}

body.client-simple-page .client-plan-card__media-fallback b {
  font-size: 22px;
  letter-spacing: .06em;
}

body.client-simple-page .client-plan-card__media-fallback span {
  font-size: 12px;
  opacity: .9;
}

body.client-simple-page .client-plan-card__media.is-fallback .client-plan-card__media-fallback {
  display: flex;
}

body.client-simple-page .client-profile-quick {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: center;
}

body.client-simple-page .client-profile-quick img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid #3a5a66;
}

body.client-simple-page .client-profile-quick__meta {
  display: grid;
  gap: 4px;
}

body.client-simple-page .client-profile-quick__meta strong {
  color: #eaf7f3;
  font-size: 16px;
}

body.client-simple-page .client-profile-quick__meta span {
  color: #9cb6af;
  font-size: 12px;
}

body.client-simple-page .client-plan-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.client-simple-page .client-plan-card__head h4 {
  font-size: 16px;
  font-weight: 800;
  color: #f2f8f5;
}

body.client-simple-page .client-plan-card__pill {
  border-radius: 999px;
  border: 1px solid #5f815f;
  color: #d9efdc;
  font-size: 10px;
  padding: 2px 8px;
}

body.client-simple-page .client-plan-card__pill.is-alt {
  border-color: #456e72;
  color: #c2e4e7;
}

body.client-simple-page .client-plan-card__price {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 800;
  color: #f5faf7;
}

body.client-simple-page .client-plan-card__speed {
  margin-top: 4px;
  font-size: 12px;
  color: #9eb3ad;
}

body.client-simple-page .client-plan-card__features {
  margin-top: 8px;
  padding-left: 16px;
  color: #b9cbc5;
  font-size: 12px;
  display: grid;
  gap: 4px;
}

/* Planes disponibles: 3 columnas en desktop */
body.client-simple-page #client-plans-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch;
}

body.client-simple-page #client-plans-grid .client-plan-card {
  height: 100%;
}

@media (max-width: 1200px) {
  body.client-simple-page #client-plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.client-simple-page #client-plans-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Portal cliente (mi-servicio): modo claro — tarjetas resumen y planes */
html:not(.theme-dark) body.client-simple-page .client-simple-hero {
  border-bottom-color: #e2e8f0 !important;
}

html:not(.theme-dark) body.client-simple-page .client-step-title {
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .client-main-metric {
  background: #ffffff !important;
  border: 1px solid #dbe2ef !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07) !important;
}

html:not(.theme-dark) body.client-simple-page .client-main-metric__label {
  color: #64748b !important;
}

html:not(.theme-dark) body.client-simple-page .client-main-metric__value,
html:not(.theme-dark) body.client-simple-page .client-main-metric__value--sm,
html:not(.theme-dark) body.client-simple-page #client-next-payment {
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .client-main-metric .status-badge--paid {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #047857 !important;
  border-color: rgba(5, 150, 105, 0.45) !important;
}

html:not(.theme-dark) body.client-simple-page .client-main-metric .status-badge--pending {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #92400e !important;
  border-color: rgba(217, 119, 6, 0.4) !important;
}

html:not(.theme-dark) body.client-simple-page .client-main-metric .status-badge--suspended {
  background: rgba(148, 163, 184, 0.2) !important;
  color: #475569 !important;
  border-color: rgba(100, 116, 139, 0.4) !important;
}

/* Avería técnica / estado red: texto oscuro sobre fondo violeta suave (legible en modo claro) */
html:not(.theme-dark) body.client-simple-page .client-main-metric .status-badge--network {
  background: rgba(91, 33, 182, 0.12) !important;
  color: #5b21b6 !important;
  border-color: rgba(91, 33, 182, 0.35) !important;
  font-weight: 700 !important;
}

/* Consumo de internet — títulos y valores en modo claro */
html:not(.theme-dark) body.client-simple-page #client-consumption-total,
html:not(.theme-dark) body.client-simple-page .glass-panel #client-consumption-total {
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .glass-panel.rounded-xl.p-4 .text-gray-100.font-semibold {
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .glass-panel.rounded-xl.p-4 .text-xs.text-gray-400 {
  color: #64748b !important;
}

html:not(.theme-dark) body.client-simple-page .client-consumption-track {
  background: rgba(15, 23, 42, 0.08) !important;
}

html:not(.theme-dark) body.client-simple-page #client-consumption-bar {
  background: linear-gradient(90deg, #6366f1, #4f46e5) !important;
}

html:not(.theme-dark) body.client-simple-page #client-consumption-hint {
  color: #64748b !important;
}

html:not(.theme-dark) body.client-simple-page .client-plan-card {
  background: #ffffff !important;
  border: 1px solid #dbe2ef !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
}

html:not(.theme-dark) body.client-simple-page .client-plan-card.is-current {
  border-color: rgba(21, 140, 105, 0.55) !important;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 55%) !important;
  box-shadow: 0 0 0 1px rgba(21, 140, 105, 0.2), 0 6px 20px rgba(15, 23, 42, 0.08) !important;
}

html:not(.theme-dark) body.client-simple-page .client-plan-card__media {
  border-color: #cbd5e1 !important;
  background: linear-gradient(165deg, #f1f5f9, #e2e8f0) !important;
}

html:not(.theme-dark) body.client-simple-page .client-plan-card__media-fallback {
  color: #334155 !important;
}

html:not(.theme-dark) body.client-simple-page .client-plan-card__head h4 {
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .client-plan-card__pill {
  border-color: #15803d !important;
  color: #14532d !important;
  background: rgba(22, 163, 74, 0.1) !important;
}

html:not(.theme-dark) body.client-simple-page .client-plan-card__pill.is-alt {
  border-color: #2563eb !important;
  color: #1e40af !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

html:not(.theme-dark) body.client-simple-page .client-plan-card__price {
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .client-plan-card__speed {
  color: #475569 !important;
}

html:not(.theme-dark) body.client-simple-page .client-plan-card__features {
  color: #334155 !important;
}

html:not(.theme-dark) body.client-simple-page .text-gray-100 {
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .text-gray-200 {
  color: #334155 !important;
}

html:not(.theme-dark) body.client-simple-page .text-gray-300 {
  color: #475569 !important;
}

html:not(.theme-dark) body.client-simple-page .text-gray-400 {
  color: #64748b !important;
}

html:not(.theme-dark) body.client-simple-page .client-profile-quick__meta strong {
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .client-profile-quick__meta span {
  color: #475569 !important;
}

html:not(.theme-dark) body.client-simple-page .client-profile-quick img {
  border-color: #cbd5e1 !important;
}

html:not(.theme-dark) body.client-simple-page .client-consumption-track {
  background-color: rgba(15, 23, 42, 0.1) !important;
}

html.theme-dark body.client-simple-page .client-consumption-track {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Users page polish */
.users-page .users-toolbar {
  border: 1px solid #214043 !important;
  background: #0b1b27 !important;
}

.users-page .users-toolbar__bulk {
  margin-top: 12px !important;
  gap: 10px !important;
}

.users-page .users-toolbar__bulk .users-bulk-btn {
  min-height: 36px;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid #2d5f58 !important;
  background: linear-gradient(180deg, #1b8f6b, #157c5c) !important;
  color: #ecfff8 !important;
  box-shadow: none !important;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

.users-page .users-toolbar__bulk .users-bulk-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.users-page .users-toolbar__bulk .users-bulk-btn:active {
  transform: translateY(0);
  filter: brightness(.98);
}

.users-page .users-toolbar__bulk .users-bulk-btn--remind {
  background: linear-gradient(180deg, #1c7f9b, #176a83) !important;
  border-color: #2d6f82 !important;
}

.users-page .users-toolbar__bulk .users-bulk-btn--suspend {
  background: linear-gradient(180deg, #9b4d4d, #823f3f) !important;
  border-color: #8c5454 !important;
}

@media (max-width: 700px) {
  .users-page .users-toolbar__bulk .users-bulk-btn {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }
}

.users-page .users-table-wrap table thead tr {
  background: #0f1f2f !important;
}

.users-page .users-table-wrap tbody tr:hover {
  background: #122639;
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #3f6b66;
}

.user-source-badge,
.user-status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.user-source-badge {
  background: #173640;
  border: 1px solid #2f626f;
  color: #c6e5de;
}

.user-status-badge.is-on {
  background: #1e3f2f;
  border: 1px solid #3e7b58;
  color: #ccf5df;
}

.user-status-badge.is-off {
  background: #402326;
  border: 1px solid #824048;
  color: #ffd4d9;
}

.users-page .module-hero {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--ss-border);
  background: linear-gradient(160deg, rgba(15, 24, 36, 0.96), rgba(10, 19, 30, 0.96));
}

.users-page .users-toolbar {
  padding: 14px !important;
  border-radius: 14px !important;
}

.users-page .users-toolbar__main {
  display: grid;
  grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px !important;
}

.users-page .users-toolbar .form-select,
.users-page .users-toolbar .form-input {
  min-height: 40px;
}

.users-page .users-table-wrap {
  border: 1px solid var(--ss-border);
  border-radius: 14px;
  background: #0b1825;
}

.users-page #users-tabulator {
  padding: 6px;
}

.users-page .tabulator {
  border-radius: 12px !important;
}

.users-page .tabulator .tabulator-header .tabulator-col {
  background: #102034 !important;
}

.users-page .tabulator .tabulator-row {
  min-height: 56px;
}

.users-page .tabulator .tabulator-row:hover {
  background: rgba(21, 140, 105, 0.12) !important;
}

.users-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--ss-border);
  background: #0d1a29;
}

.users-pager #users-page-info {
  min-width: 116px;
  text-align: center;
  font-size: 12px;
  color: var(--ss-muted);
}

.users-pager .tab-btn {
  min-height: 32px;
  padding: 0 10px;
}

.users-pager .tab-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.users-pager .form-select {
  min-height: 32px;
  min-width: 76px;
  padding: 0 8px;
}

@media (max-width: 700px) {
  .users-page .users-toolbar__main {
    grid-template-columns: 1fr;
    gap: 10px !important;
  }

  .users-pager {
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* Modules page hierarchy */
.modules-page .module-card {
  border: 1px solid #224043 !important;
  background: #0b1a26 !important;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  padding: 18px !important;
}

.modules-page .module-card:hover {
  transform: translateY(-2px);
  border-color: rgba(21, 140, 105, 0.45) !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
}

.modules-page .module-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 110% at 100% 0%, rgba(21, 140, 105, 0.12), transparent 56%);
}

.modules-page .module-card.is-loading {
  opacity: .84;
}

.module-card__tag {
  font-size: 11px;
  color: #8fa6a1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.module-card__title {
  font-size: 24px;
  font-weight: 800;
  color: #eff6f3;
  margin-bottom: 12px;
}

.module-card__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 14px;
}

.module-card__kpis > div {
  border: 1px solid #2b4a46;
  background: #112833;
  border-radius: 10px;
  padding: 10px 12px;
}

.module-card__kpis span {
  display: block;
  font-size: 11px;
  color: #9db1aa;
}

.module-card__kpis strong {
  display: block;
  margin-top: 2px;
  font-size: 20px;
  color: #f3f9f7;
}

.module-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  border-top: 1px solid rgba(137, 178, 168, 0.16);
  padding-top: 8px;
  color: #a5bbb5;
  font-size: 12px;
}

.module-card__footer i[data-lucide] {
  width: 16px;
  height: 16px;
}

.modules-page .module-hero__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modules-page #modules-grid {
  gap: 16px !important;
}

@media (min-width: 900px) {
  .modules-page #modules-grid {
    row-gap: 18px !important;
  }
}

@media (max-width: 780px) {
  .module-card__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Notifications page cleanup */
/* KPIs en fila: asegura 3 columnas aunque Tailwind/md falle o el viewport sea < md */
.notifications-page .notif-kpis {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px !important;
  column-gap: 14px !important;
  row-gap: 14px !important;
}

@media (max-width: 519px) {
  .notifications-page .notif-kpis {
    grid-template-columns: 1fr;
    row-gap: 12px !important;
  }
}

.notif-kpi {
  border: 1px solid #224043 !important;
  background: #0b1b27 !important;
}

.notif-feed {
  display: grid;
  gap: 10px;
}

.notif-feed-item {
  border: 1px solid #274648;
  background: #0d1d29;
  border-radius: 10px;
  padding: 10px 12px;
}

.notif-feed-item.is-new {
  border-color: #4f7f5a;
  background: #132833;
}

.notif-feed-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.notif-feed-item__head strong {
  font-size: 13px;
  color: #f1f8f4;
}

.notif-feed-item__head span {
  font-size: 11px;
  color: #9db1aa;
}

.notif-feed-item p {
  font-size: 12px;
  color: #c9d9d4;
}

.notif-feed-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.notifications-page .notif-kpi {
  padding: 16px !important;
  border-radius: 12px !important;
}

.notifications-page #notif-table {
  min-height: 320px;
}

/* Social-like profile card */
.settings-card--profile-social {
  align-items: center;
  text-align: center;
}

.settings-avatar-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 4px auto 10px;
}

.settings-avatar-photo {
  width: 112px;
  height: 112px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #2f496f;
  background: #0a1528;
}

.settings-avatar-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid #4f7ad9;
  background: #1a2f59;
  color: #dbe7ff;
}

/* Forest palette (user-provided) + no blur */
:root {
  --forest-bg: #dbe1e8;
  --forest-bg-dark: #07131d;
  --forest-surface: #0b1823;
  --forest-surface-2: #102233;
  --forest-border: #2b4a46;
  --forest-text: #e9f0ed;
  --forest-muted: #9eb2aa;
  --forest-accent: #4f7f5a;
  --forest-accent-2: #7d8f67;
}

body.app-shell,
html.theme-dark body.app-shell {
  background: linear-gradient(180deg, #06121b, #07131d) !important;
}

.panel-sidebar,
.panel-topbar,
.glass-panel,
.dashboard-v3__kpi,
.dashboard-v3__trafico,
.dashboard-focus,
.support-ticket-item,
.smart-preview,
.modal-content {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background: var(--forest-surface) !important;
  border-color: #1b3638 !important;
}

.panel-workspace-switcher,
.panel-search-wrap,
.traffic-kpi,
.traffic-chart-wrap,
.client-main-metric,
body.client-simple-page .client-reports-list-wrap,
body.client-simple-page .client-reports-detail-wrap {
  background: var(--forest-surface-2) !important;
  border-color: #294447 !important;
}

.panel-link,
.panel-submenu-link {
  color: var(--forest-text) !important;
}

.panel-link:hover,
.panel-submenu-link:hover {
  background: #132b31 !important;
  border-color: #376162 !important;
}

.panel-link.is-active,
.panel-submenu-link.is-active {
  background: linear-gradient(135deg, var(--forest-accent), var(--forest-accent-2)) !important;
  border-color: #88a080 !important;
  color: #f5fbf8 !important;
}

.panel-submenu {
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid #1d373c;
  border-radius: 10px;
  background: #0c1d2a;
}

.panel-submenu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border-radius: 8px;
  padding: 6px 8px;
  border: 1px solid transparent;
  font-size: 13px;
}

.panel-submenu-group {
  display: grid;
  gap: 4px;
}

.panel-submenu-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
}

.panel-submenu-toggle {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9fb0c6 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.panel-submenu-toggle i[data-lucide] {
  width: 11px;
  height: 11px;
  transition: transform .15s ease;
}

.panel-submenu-children {
  display: grid;
  gap: 4px;
  margin-left: 12px;
  padding-left: 8px;
  border-left: 1px dashed rgba(120, 167, 155, 0.35);
}

.panel-submenu-group.is-collapsed .panel-submenu-children {
  display: none;
}

.panel-submenu-group.is-collapsed .panel-submenu-toggle i[data-lucide] {
  transform: rotate(-90deg);
}

.panel-submenu-link--child {
  min-height: 32px;
  font-size: 12px;
  opacity: 0.95;
}

.btn-glass,
.tab-btn,
.quick-actions-fab__btn {
  background: linear-gradient(135deg, #3f6950, #5a7654) !important;
  border-color: #759073 !important;
  color: #f5faf7 !important;
}

.btn-glass:hover,
.tab-btn:hover,
.quick-actions-fab__btn:hover {
  background: linear-gradient(135deg, #4a7659, #678561) !important;
}

/* Recovery baseline: keep UI consistent and readable */
html, body {
  font-size: 14px;
}

.panel-shell {
  gap: 8px !important;
  padding: 8px !important;
}

.panel-sidebar {
  width: 250px !important;
  min-width: 250px !important;
}

.panel-nav {
  gap: 3px !important;
}

.panel-link,
.panel-submenu-link {
  min-height: 34px !important;
  padding: 6px 8px !important;
  font-size: 13px !important;
}

.module-hero__title,
.dashboard-v3__title {
  font-size: 34px !important;
}

.glass-panel,
.dashboard-v3__kpi,
.dashboard-focus,
.dashboard-v3__trafico {
  border-radius: 12px !important;
}

/* Command palette sane sizing */
.cmd-palette__panel {
  width: min(560px, 100%) !important;
}

.cmd-palette__input {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.cmd-palette__item-label {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.cmd-palette__item-group {
  font-size: 10px !important;
}

/* Tables readable again */
.tabulator .tabulator-col,
.tabulator .tabulator-cell {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 13px !important;
}

/* Keep quick actions unobtrusive */
.quick-actions-fab {
  right: 12px !important;
  bottom: 12px !important;
  padding: 8px !important;
  gap: 6px !important;
}

.quick-actions-fab__btn {
  width: 128px !important;
  min-height: 34px !important;
  font-size: 12px !important;
}

/* Smart tables: alive interactions */
.tabulator .tabulator-row,
.users-page .users-table-wrap table tbody tr,
.clientes-page table tbody tr {
  transition: background-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.tabulator .tabulator-row:hover,
.users-page .users-table-wrap table tbody tr:hover,
.clientes-page table tbody tr:hover {
  background: #152b33 !important;
  box-shadow: inset 2px 0 0 #5e8a72;
}

.tabulator .tabulator-row.smart-row,
.users-page .users-table-wrap table tbody tr,
.clientes-page table tbody tr {
  cursor: pointer;
}

.tab-actions {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  opacity: 1 !important;
  visibility: visible !important;
}

.tab-actions .tab-btn {
  min-height: 28px;
  min-width: 86px;
  padding: 0 10px !important;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 860px) {
  body.client-simple-page .client-primary-actions {
    grid-template-columns: 1fr;
  }
}

/* Homogeneous cards + timeline surfaces */
.dashboard-v3__kpi,
.dashboard-focus__item,
.client-main-metric,
#client-history-cards > *,
#client-ticket-list > *,
#client-ticket-timeline > *,
.settings-card,
.smart-preview,
.support-ticket-item {
  border: 1px solid var(--neo-border);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)) , var(--neo-panel-strong);
}

#client-ticket-chat,
#support-chat {
  border-radius: 14px !important;
  border: 1px solid var(--neo-border) !important;
  background: rgba(2, 6, 23, 0.35);
}

/* Traffic analytics page */
.traffic-page #traf-body tr {
  border-bottom: 1px solid rgba(126, 139, 167, 0.18);
}

.traffic-page #traf-body tr:hover {
  background: rgba(114, 199, 255, 0.08);
}

.traffic-page #traf-empty-note {
  min-height: 1.5rem;
}

/* KPIs tráfico por cliente: siempre separados (gap forzado; en columna en móvil) */
.traffic-page .traffic-client-kpis {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px !important;
  row-gap: 16px !important;
  margin-bottom: 1.25rem !important;
}

@media (min-width: 768px) {
  .traffic-page .traffic-client-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px !important;
    column-gap: 20px !important;
    row-gap: 20px !important;
  }
}

.traffic-page .traffic-client-kpis__card {
  margin: 0 !important;
  min-width: 0;
}

html:not(.theme-dark) .traffic-page .traffic-client-kpis__card {
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}

/* Legacy pages normalized to premium shell */
.legacy-page-shell {
  width: 100%;
}

.legacy-admin-page h2 {
  letter-spacing: -0.01em;
}

.legacy-form-card .bg-white.rounded-lg.shadow-md,
.legacy-form-card .dark\:bg-gray-800 {
  border: 1px solid var(--neo-border) !important;
  border-radius: 14px !important;
  background: var(--neo-panel-strong) !important;
  box-shadow: none !important;
  padding: 16px !important;
}

.legacy-form-card .text-gray-700,
.legacy-form-card .dark\:text-gray-400,
.legacy-form-card .dark\:text-gray-300 {
  color: var(--neo-text-1) !important;
}

.legacy-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.legacy-admin-page .w-full.overflow-hidden.rounded-lg.shadow-xs {
  border: 1px solid var(--neo-border);
  border-radius: 14px !important;
  background: var(--neo-panel-strong);
}

/* Clients pages: remove duplicated legacy heading/actions */
.clientes-page .legacy-clients-title {
  display: none !important;
}

/* Menu cleanup: cleaner, simpler and readable */
.panel-sidebar.panel-sidebar--rail {
  width: 272px !important;
  min-width: 272px !important;
  padding: 10px 10px 12px !important;
}

.panel-brand {
  padding: 6px 8px 10px !important;
}

.panel-brand-link img {
  width: 32px !important;
  height: 32px !important;
}

.panel-nav {
  gap: 2px !important;
  padding: 4px 4px 8px !important;
}

.panel-nav-group-title {
  margin: 12px 8px 6px !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  opacity: 0.9;
  color: #8ea4be !important;
}

.panel-submenu {
  margin: 0 0 6px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.panel-link,
.panel-submenu-link {
  min-height: 40px !important;
  padding: 9px 11px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #dbe7ff !important;
}

.panel-link i[data-lucide],
.panel-submenu-link i[data-lucide] {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.95;
}

.panel-link:hover,
.panel-submenu-link:hover {
  background: rgba(30, 51, 90, 0.42) !important;
  border-color: #2a4270 !important;
  transform: none !important;
}

.panel-link.is-active,
.panel-submenu-link.is-active {
  background: #5e835f !important;
  border-color: #8db08e !important;
  color: #f7fff7 !important;
  box-shadow: none !important;
}

.panel-link.is-active i[data-lucide],
.panel-submenu-link.is-active i[data-lucide] {
  color: #f7fff7 !important;
}

.panel-topbar {
  padding: 8px 10px !important;
}

.panel-topbar-inner {
  min-height: 54px !important;
  gap: 10px !important;
  align-items: center !important;
}

.panel-search-wrap {
  border-radius: 10px !important;
  min-height: 38px !important;
  padding: 4px 8px !important;
  border: 1px solid #24375f !important;
  background: #0a1428 !important;
}

.panel-search {
  font-size: 13px !important;
}

.panel-select {
  min-height: 30px !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
}

.panel-topbar-actions {
  gap: 8px !important;
  align-items: center !important;
}

.panel-icon-btn,
.panel-profile-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #151b21 !important;
  border: 1px solid #2b3642 !important;
}

.panel-profile-menu {
  top: 40px !important;
}

.panel-sidebar-footer {
  padding: 10px 8px 6px !important;
}

.panel-logout {
  min-height: 40px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
}

.mikrotik-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #31414f;
  background: #1a232d;
  color: #dbe7ff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mikrotik-status-chip.is-ok {
  border-color: #427254;
  background: #1d3326;
  color: #d2f7dc;
}

.mikrotik-status-chip.is-off {
  border-color: #7e4a4a;
  background: #372326;
  color: #ffd7d7;
}

.mikrotik-status-chip.is-loading {
  opacity: 0.9;
}

.mikrotik-live {
  border: 1px solid #1a2a4a !important;
  background: #0a1428 !important;
}

.mikrotik-live__kpi {
  border: 1px solid #1f335f;
  border-radius: 12px;
  background: #0d1a33;
  padding: 12px;
}

.mikrotik-live__value {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  color: #dbe7ff;
  margin-top: 4px;
}

/* Profile dropdown polish */
.panel-topbar-actions {
  position: relative;
}

.panel-profile-menu {
  right: 0 !important;
  top: calc(100% + 8px) !important;
  min-width: 268px !important;
  padding: 10px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid #324252 !important;
  background: linear-gradient(180deg, #17202a 0%, #111820 100%) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45) !important;
  list-style: none !important;
}

.panel-profile-menu li {
  list-style: none;
}

.panel-profile-menu__user {
  margin: 0 0 6px 0 !important;
  padding: 10px 10px 12px !important;
  border-bottom: 1px solid rgba(111, 132, 154, 0.26) !important;
}

.panel-profile-menu__user strong {
  font-size: 17px;
  line-height: 1.1;
  font-weight: 800;
  color: #eff4f9 !important;
}

.panel-profile-menu__user span {
  font-size: 12px;
  color: #95a6b8 !important;
}

.panel-profile-menu a {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 11px !important;
  color: #d6e1eb !important;
  font-weight: 700;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.panel-profile-menu a i[data-lucide] {
  width: 18px;
  height: 18px;
  opacity: 0.95;
}

.panel-profile-menu a:hover {
  background: #1f2b37 !important;
  border-color: #3e5063 !important;
  transform: translateX(1px);
}

.panel-profile-menu a.panel-profile-menu__danger {
  color: #ffd1d8 !important;
}

.panel-profile-menu a.panel-profile-menu__danger:hover {
  background: #3a1b2c !important;
  border-color: #8a4564 !important;
  color: #ffe1e6 !important;
}

/* Dashboard top quick actions: explicit labels */
.dashboard-orix__hero-actions--labeled {
  gap: 8px !important;
}

.dashboard-orix__action--labeled {
  width: auto !important;
  min-width: 118px;
  height: 38px !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-orix__action--labeled span {
  display: inline-block;
  line-height: 1;
}

.dashboard-focus__all-cta {
  background: #3f7f58 !important;
  border: 1px solid #74b48a !important;
  color: #f6fff8 !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(18, 84, 48, 0.28);
}

.dashboard-focus__all-cta:hover {
  background: #4f9566 !important;
  border-color: #8ec3a0 !important;
}

/* Dashboard: "Que hacer ahora" clean redesign */
.dashboard-focus--next-actions .grid {
  gap: 14px !important;
  padding: 6px 4px 4px !important;
}

.dashboard-focus--next-actions {
  padding: 18px 16px 16px !important;
}

.dashboard-focus--next-actions .dashboard-focus__item {
  background: #0a1326 !important;
  border: 1px solid #1f335f !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  display: grid !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dashboard-focus--next-actions a.dashboard-focus__item:hover {
  border-color: #3d63b8 !important;
  background: #0d1830 !important;
}

.dashboard-focus--next-actions .dashboard-focus__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-focus--next-actions .dashboard-focus__user {
  margin: 0 !important;
  color: #e6eeff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

.dashboard-focus--next-actions .dashboard-focus__module {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #bcd2ff;
  background: rgba(48, 79, 149, 0.25);
  border: 1px solid rgba(80, 122, 212, 0.45);
}

.dashboard-focus--next-actions .dashboard-focus__debt {
  margin: 0 !important;
  color: #ffd382 !important;
  font-size: 38px !important;
  line-height: 1;
  font-weight: 800 !important;
}

.dashboard-focus--next-actions .dashboard-focus__hint {
  margin: 0 !important;
  color: #9fb1d8;
  font-size: 12px;
  padding-bottom: 2px;
}

.dashboard-focus--next-actions .dashboard-focus__cta {
  display: inline-flex !important;
  width: auto !important;
  min-width: 130px;
  max-width: 160px;
  align-self: start !important;
  align-items: center;
  justify-content: center;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  background: #1a2b53 !important;
  border: 1px solid #3d63b8 !important;
  color: #dbe7ff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .dashboard-focus--next-actions {
    padding: 14px 12px !important;
  }

  .dashboard-focus--next-actions .dashboard-focus__item {
    padding: 12px 12px !important;
    gap: 8px !important;
  }

  .dashboard-focus--next-actions .dashboard-focus__debt {
    font-size: 32px !important;
  }
}

.dashboard-focus--next-actions .dashboard-focus__cta:hover {
  background: #213667 !important;
  border-color: #4f7ad9 !important;
}

/* ===== Unified palette (premium dark glass) ===== */
:root {
  --ss-bg: #eaedf1;
  --ss-surface: #f7f9fc;
  --ss-surface-2: #eef2f7;
  --ss-border: #cfd6e2;
  --ss-text: #171d26;
  --ss-muted: #667085;
  --ss-accent: #158c69;
  --ss-accent-strong: #127a5c;
  --ss-accent-soft: rgba(21, 140, 105, 0.18);
}

html.theme-dark {
  --ss-bg: #0b0d12;
  --ss-surface: #141923;
  --ss-surface-2: #1b2230;
  --ss-border: #2b3548;
  --ss-text: #e9edf5;
  --ss-muted: #9aa6bc;
  --ss-accent: #158c69;
  --ss-accent-strong: #19a278;
  --ss-accent-soft: rgba(21, 140, 105, 0.22);
}

body.app-shell {
  background:
    radial-gradient(760px 380px at 76% 88%, rgba(21, 140, 105, 0.18), transparent 62%),
    radial-gradient(700px 340px at 10% -8%, rgba(21, 140, 105, 0.12), transparent 58%),
    var(--ss-bg) !important;
}

.panel-sidebar,
.panel-topbar,
.glass-panel,
.modal-content,
.bg-white,
.dark\:bg-gray-800 {
  background: var(--ss-surface) !important;
  border-color: var(--ss-border) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.panel-search-wrap,
.panel-select,
input,
select,
textarea {
  background: var(--ss-surface-2) !important;
  border-color: var(--ss-border) !important;
  color: var(--ss-text) !important;
}

.panel-link,
.panel-submenu-link,
.panel-profile-menu a {
  color: var(--ss-text) !important;
}

.panel-link:hover,
.panel-submenu-link:hover,
.panel-profile-menu a:hover {
  background: var(--ss-accent-soft) !important;
  border-color: rgba(21, 140, 105, 0.46) !important;
}

.panel-link.is-active,
.panel-submenu-link.is-active {
  background: linear-gradient(135deg, var(--ss-accent), var(--ss-accent-strong)) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f8fffc !important;
  box-shadow: 0 8px 22px rgba(21, 140, 105, 0.28) !important;
}

.panel-link.is-active i[data-lucide],
.panel-submenu-link.is-active i[data-lucide] {
  color: #f8fffc !important;
  stroke: #f8fffc !important;
  opacity: 1 !important;
}

.btn-glass {
  background: linear-gradient(135deg, var(--ss-accent), var(--ss-accent-strong)) !important;
  border: 1px solid rgba(21, 140, 105, 0.5) !important;
  color: #ecfff8 !important;
}

.btn-glass:hover {
  filter: brightness(1.03);
}

.panel-profile-menu {
  background: var(--ss-surface) !important;
  border-color: var(--ss-border) !important;
}

.panel-profile-menu__user strong,
h1, h2, h3, h4, h5, h6 {
  color: var(--ss-text) !important;
}

.panel-profile-menu__user span,
.text-gray-400,
.text-gray-500,
.text-slate-400 {
  color: var(--ss-muted) !important;
}

.mikrotik-status-chip {
  background: var(--ss-surface-2) !important;
  border-color: var(--ss-border) !important;
  color: var(--ss-text) !important;
}

.mikrotik-status-chip.is-ok {
  background: rgba(21, 140, 105, 0.24) !important;
  border-color: rgba(21, 140, 105, 0.52) !important;
  color: #d9f7ef !important;
}

/* ===== Global spacing system (enforced) ===== */
:root {
  --ss-space-1: 8px;
  --ss-space-2: 12px;
  --ss-space-3: 16px;
  --ss-space-4: 20px;
  --ss-space-5: 24px;
}

main > .container.panel-stack {
  padding-top: var(--ss-space-3) !important;
  padding-bottom: calc(var(--ss-space-5) + var(--ss-space-2)) !important;
  row-gap: var(--ss-space-4) !important;
}

main > .container.panel-stack > section.glass-panel,
main > .container.panel-stack > .glass-panel,
main > .container.panel-stack > section.module-hero {
  margin: 0 !important;
  padding: var(--ss-space-4) !important;
}

.glass-panel .grid,
.glass-panel .flex,
.glass-panel .space-y-2,
.glass-panel .space-y-3,
.glass-panel .space-y-4 {
  gap: var(--ss-space-3) !important;
}

.glass-panel h1,
.glass-panel h2,
.glass-panel h3,
.glass-panel h4,
.glass-panel h5 {
  margin-top: 0 !important;
  margin-bottom: var(--ss-space-2) !important;
}

.glass-panel p + p,
.glass-panel .btn-glass + .btn-glass,
.glass-panel button + button,
.glass-panel a + a {
  margin-left: var(--ss-space-2);
}

.glass-panel .form-input,
.glass-panel input,
.glass-panel select,
.glass-panel textarea {
  min-height: 40px;
}

@media (max-width: 768px) {
  main > .container.panel-stack {
    row-gap: var(--ss-space-3) !important;
    padding-bottom: var(--ss-space-5) !important;
  }
  main > .container.panel-stack > section.glass-panel,
  main > .container.panel-stack > .glass-panel,
  main > .container.panel-stack > section.module-hero {
    padding: var(--ss-space-3) !important;
  }
}

/* Support page redesign */
body.support-page .module-hero {
  margin-bottom: 0 !important;
}

.support-filters {
  padding: var(--ss-space-4) !important;
  display: grid;
  gap: var(--ss-space-3);
}

.support-filters__head h3 {
  margin: 0;
  font-size: 15px;
}

.support-filters__head p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ss-muted);
}

.support-filters__refresh {
  min-height: 40px !important;
}

.support-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-chip {
  border: 1px solid var(--ss-border);
  background: var(--ss-surface-2);
  color: var(--ss-text);
  border-radius: 999px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
}

.support-chip:hover {
  border-color: rgba(21, 140, 105, 0.48);
  background: rgba(21, 140, 105, 0.14);
}

.support-chip.is-active {
  border-color: rgba(21, 140, 105, 0.56);
  background: rgba(21, 140, 105, 0.2);
}

.support-admin-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: var(--ss-space-3) !important;
}

.support-list-panel,
.support-detail-panel {
  padding: var(--ss-space-3) !important;
  display: grid;
  gap: var(--ss-space-3);
  min-height: 520px;
}

.support-list-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.support-list-panel__head h4 {
  margin: 0;
  font-size: 14px;
  color: var(--ss-text);
}

.support-list-panel__head span {
  font-size: 11px;
  color: var(--ss-muted);
}

.support-ticket-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--ss-border);
  background: var(--ss-surface-2);
  border-radius: 11px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.support-ticket-item:hover {
  border-color: rgba(21, 140, 105, 0.5) !important;
  background: var(--ss-accent-soft) !important;
}

.support-ticket-item.is-active {
  border-color: rgba(21, 140, 105, 0.56);
  background: rgba(21, 140, 105, 0.18);
}

.support-ticket-item__meta,
.support-ticket-item__status {
  font-size: 11px;
  color: var(--ss-muted);
}

.support-ticket-item__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-ticket-item__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--ss-border);
}

.support-ticket-item__identity {
  min-width: 0;
}

.support-ticket-item__client {
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-text);
}

.support-ticket-item__title {
  font-size: 12px;
  color: var(--ss-text);
  opacity: 0.92;
}

.support-ticket-head {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ss-border);
  background: var(--ss-surface-2);
}

.support-ticket-head strong {
  font-size: 13px;
  color: var(--ss-text);
}

.support-ticket-head span {
  font-size: 12px;
  color: var(--ss-muted);
}

.support-chat {
  border: 1px solid var(--ss-border);
  background: var(--ss-surface-2);
}

.support-msg {
  margin-bottom: 10px;
}

.support-msg__meta {
  font-size: 11px;
  color: var(--ss-muted);
  margin-bottom: 3px;
}

.support-msg__bubble {
  border: 1px solid var(--ss-border);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ss-text);
  background: var(--ss-surface);
}

.support-msg.is-agent .support-msg__bubble {
  border-color: rgba(21, 140, 105, 0.5);
  background: rgba(21, 140, 105, 0.16);
}

.support-chat-send {
  align-items: center;
}

@media (max-width: 1100px) {
  .support-admin-layout {
    grid-template-columns: 1fr;
  }
  .support-list-panel,
  .support-detail-panel {
    min-height: auto;
  }
}

/* Client offline path (Switch -> MikroTik -> Casa) */
.client-network-path {
  margin-top: 12px;
  border: 1px solid var(--ss-border);
  background: linear-gradient(180deg, rgba(21, 140, 105, 0.1), rgba(0, 0, 0, 0));
  border-radius: 12px;
  padding: 12px;
}

.client-network-path__head {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.client-network-path__head strong {
  color: #d7e6ff;
  font-size: 13px;
}

.client-network-path__head span {
  color: var(--ss-muted);
  font-size: 11px;
}

.client-network-flow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-network-node {
  min-width: 108px;
  flex: 1 1 0;
  border: 1px solid var(--ss-border);
  background: var(--ss-surface-2);
  border-radius: 10px;
  padding: 8px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 2px;
}

.client-network-node i[data-lucide] {
  width: 16px;
  height: 16px;
}

.client-network-node b {
  font-size: 12px;
  color: var(--ss-text);
}

.client-network-node small {
  font-size: 10px;
  color: var(--ss-muted);
}

.client-network-node.is-ok {
  border-color: rgba(21, 140, 105, 0.5);
}

.client-network-node.is-warn {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.08);
}

.client-network-node.is-off {
  border-color: rgba(239, 68, 68, 0.52);
  background: rgba(239, 68, 68, 0.1);
}

.client-network-path.severity-ok .client-network-path__head strong {
  color: #bde8ff;
}

.client-network-path.severity-warn .client-network-path__head strong {
  color: #ffe2a3;
}

.client-network-path.severity-danger .client-network-path__head strong {
  color: #ffc6c6;
}

.client-network-edge {
  width: 36px;
  height: 2px;
  border-radius: 999px;
  background: var(--ss-border);
}

.client-network-edge.is-ok {
  background: linear-gradient(90deg, rgba(21, 140, 105, 0.9), rgba(25, 162, 120, 0.5));
}

.client-network-edge.is-off {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.9), rgba(239, 68, 68, 0.35));
}

.client-network-path__hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--ss-muted);
}

@media (max-width: 760px) {
  .client-network-flow {
    flex-direction: column;
    align-items: stretch;
  }
  .client-network-edge {
    width: 2px;
    height: 14px;
    margin: 0 auto;
  }
}

/* Dashboard CTA consistency */
.dashboard-focus__all-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--ss-accent), var(--ss-accent-strong)) !important;
  border: 1px solid rgba(21, 140, 105, 0.56) !important;
  color: #ecfff8 !important;
  box-shadow: none !important;
}

/* SweetAlert dark mode polish */
.theme-dark .swal2-popup,
html.theme-dark .swal2-popup,
body.theme-dark .swal2-popup {
  background: linear-gradient(160deg, rgba(11, 20, 34, 0.98), rgba(8, 15, 26, 0.98)) !important;
  color: #e6edf8 !important;
  border: 1px solid rgba(120, 151, 189, 0.28) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .swal2-title,
html.theme-dark .swal2-title,
body.theme-dark .swal2-title {
  color: #f1f5ff !important;
}

.theme-dark .swal2-html-container,
html.theme-dark .swal2-html-container,
body.theme-dark .swal2-html-container {
  color: #b8c9df !important;
}

.theme-dark .swal2-input,
.theme-dark .swal2-textarea,
.theme-dark .swal2-select,
html.theme-dark .swal2-input,
html.theme-dark .swal2-textarea,
html.theme-dark .swal2-select,
body.theme-dark .swal2-input,
body.theme-dark .swal2-textarea,
body.theme-dark .swal2-select {
  background: rgba(8, 19, 34, 0.88) !important;
  color: #eaf2ff !important;
  border: 1px solid rgba(121, 154, 193, 0.42) !important;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.12) !important;
}

.theme-dark .swal2-input::placeholder,
.theme-dark .swal2-textarea::placeholder,
html.theme-dark .swal2-input::placeholder,
html.theme-dark .swal2-textarea::placeholder,
body.theme-dark .swal2-input::placeholder,
body.theme-dark .swal2-textarea::placeholder {
  color: #8ea3bd !important;
}

.theme-dark .swal2-confirm {
  background: linear-gradient(145deg, #6e61df, #5b4fcd) !important;
  color: #ffffff !important;
}

.theme-dark .swal2-cancel {
  background: linear-gradient(145deg, #5f7387, #4e6173) !important;
  color: #f1f5f9 !important;
}

/* —— Modal “Opciones de pago” (portal cliente) —— */
.swal2-popup.client-pay-swal-popup {
  padding: 0 !important;
  border-radius: 22px !important;
  overflow: hidden;
  max-width: min(480px, 96vw) !important;
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.swal2-title.client-pay-swal-title {
  margin: 0 !important;
  padding: 1.15rem 3rem 0.5rem 1.35rem !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25 !important;
  color: var(--glass-text) !important;
  text-align: left !important;
}

.swal2-html-container.client-pay-swal-html {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  color: var(--glass-text) !important;
  overflow: visible !important;
}

button.swal2-close.client-pay-swal-close {
  top: 10px !important;
  right: 10px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  color: var(--glass-muted) !important;
  background: rgba(124, 92, 255, 0.08) !important;
  border: 1px solid rgba(124, 92, 255, 0.15) !important;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

button.swal2-close.client-pay-swal-close:hover {
  color: var(--glass-text) !important;
  background: var(--glass-accent-soft) !important;
  transform: scale(1.05);
}

html.theme-dark button.swal2-close.client-pay-swal-close {
  color: #a8b8d6 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.client-pay-modal__hero {
  padding: 1.25rem 1.35rem 1.35rem;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.2) 0%, rgba(56, 189, 248, 0.12) 100%);
  border-bottom: 1px solid var(--glass-border);
}

html.theme-dark .client-pay-modal__hero {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.28) 0%, rgba(56, 189, 248, 0.14) 100%);
}

.client-pay-modal__hero-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--glass-muted);
  margin-bottom: 0.35rem;
}

.client-pay-modal__hero-amount {
  display: block;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--glass-text);
  line-height: 1.1;
}

.client-pay-modal__hero-hint {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--glass-muted);
}

.client-pay-modal__content {
  padding: 1.1rem 1.35rem 1.35rem;
}

.client-pay-modal__block {
  margin-bottom: 1rem;
}

.client-pay-modal__block-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--glass-muted);
  margin-bottom: 0.45rem;
}

.client-pay-modal__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem 0 0.85rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--glass-muted);
}

.client-pay-modal__divider::before,
.client-pay-modal__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

.client-pay-modal__lead {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--glass-muted);
}

.client-pay-modal__lead strong {
  color: var(--glass-text);
  font-weight: 600;
}

.client-pay-bank-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.client-pay-bank-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 14px rgba(30, 41, 59, 0.06);
}

html.theme-dark .client-pay-bank-card {
  background: rgba(0, 0, 0, 0.22);
  box-shadow: none;
}

.client-pay-bank-card__badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: 12px;
  background: var(--glass-accent-soft);
  border: 1px solid rgba(124, 92, 255, 0.2);
}

.client-pay-bank-card__body {
  flex: 1;
  min-width: 0;
}

.client-pay-bank-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--glass-text);
  margin-bottom: 0.35rem;
}

.client-pay-bank-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: 0.78rem;
  margin-bottom: 0.45rem;
}

.client-pay-bank-card__k {
  color: var(--glass-muted);
  font-weight: 500;
}

.client-pay-bank-card__v {
  color: var(--glass-text);
  font-weight: 600;
}

.client-pay-bank-card__acct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.client-pay-bank-card__number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.55rem;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

html.theme-dark .client-pay-bank-card__number {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
}

.client-pay-copy {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, 0.35);
  background: rgba(124, 92, 255, 0.1);
  color: var(--glass-accent);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.client-pay-copy:hover {
  background: var(--glass-accent-soft);
  transform: translateY(-1px);
}

.client-pay-modal__note {
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--glass-muted);
  border-radius: 12px;
  background: rgba(124, 92, 255, 0.06);
  border: 1px dashed rgba(124, 92, 255, 0.22);
}

.client-pay-modal__form-card {
  padding: 1rem 1rem 0.85rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid var(--glass-border);
  margin-bottom: 1rem;
}

html.theme-dark .client-pay-modal__form-card {
  background: rgba(0, 0, 0, 0.18);
}

.client-pay-modal__form-head {
  margin-bottom: 0.85rem;
}

.client-pay-modal__form-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--glass-text);
}

.client-pay-modal__form-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--glass-muted);
  margin-top: 0.2rem;
  line-height: 1.4;
}

.client-pay-field {
  display: block;
  margin-bottom: 0.75rem;
}

.client-pay-field__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--glass-muted);
  margin-bottom: 0.35rem;
}

.client-pay-field__opt {
  font-weight: 500;
  opacity: 0.85;
}

.client-pay-select,
.client-pay-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.875rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.75);
  color: var(--glass-text);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html.theme-dark .client-pay-select,
html.theme-dark .client-pay-input {
  background: rgba(8, 15, 26, 0.75);
  color: #e8eef9;
  border-color: rgba(120, 151, 189, 0.35);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.06);
}

.client-pay-select:focus,
.client-pay-input:focus {
  outline: none;
  border-color: rgba(124, 92, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18);
}

.client-pay-input::placeholder {
  color: var(--glass-muted);
  opacity: 0.85;
}

.client-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.client-pay-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.client-pay-btn--paypal {
  background: linear-gradient(135deg, #0070ba 0%, #003087 100%);
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0, 112, 186, 0.35);
}

.client-pay-btn--paypal:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 112, 186, 0.42);
}

.client-pay-btn__icon {
  font-size: 1.35rem;
  line-height: 1;
}

.client-pay-btn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.client-pay-btn__text b {
  font-size: 0.95rem;
}

.client-pay-btn__text small {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.9;
}

.client-pay-btn--primary {
  margin-top: 0.15rem;
  background: linear-gradient(135deg, #7c5cff 0%, #456dff 100%);
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(124, 92, 255, 0.38);
}

.client-pay-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 11px 28px rgba(124, 92, 255, 0.45);
}

.client-pay-modal__fineprint {
  margin: 0.65rem 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--glass-muted);
  text-align: center;
}

.client-pay-modal__footer-actions {
  padding-top: 0.15rem;
  border-top: 1px solid var(--glass-border);
  margin-top: 0.25rem;
}

.client-pay-btn--ghost {
  background: transparent !important;
  color: var(--glass-muted) !important;
  border: 1px dashed rgba(124, 92, 255, 0.35);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.6rem 0.75rem;
  flex-direction: column;
  gap: 0.15rem;
}

.client-pay-btn--ghost:hover:not(:disabled) {
  background: var(--glass-accent-soft) !important;
  color: var(--glass-text) !important;
  border-style: solid;
}

.client-pay-btn__sub {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.85;
}

.dashboard-focus__all-cta:hover {
  background: linear-gradient(135deg, #1fa67d, var(--ss-accent-strong)) !important;
  border-color: rgba(21, 140, 105, 0.7) !important;
}

.dashboard-focus--next-actions .dashboard-focus__module {
  color: #d2f2e8 !important;
  background: rgba(21, 140, 105, 0.18) !important;
  border-color: rgba(21, 140, 105, 0.45) !important;
}

/* Topbar/menu alignment pass */
.panel-topbar-inner {
  align-items: center !important;
}

.panel-search-wrap {
  min-height: 40px !important;
}

.panel-topbar-actions {
  display: flex;
  align-items: center !important;
  gap: 8px !important;
}

.panel-icon-btn,
.panel-profile-btn,
.panel-topbar-notify {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.mikrotik-status-chip {
  min-height: 36px !important;
  border-radius: 11px !important;
  padding: 0 12px !important;
  display: inline-flex;
  align-items: center;
}

.panel-profile-menu {
  width: min(460px, calc(100vw - 28px)) !important;
  max-width: min(460px, calc(100vw - 28px)) !important;
  right: 0 !important;
  left: auto !important;
}

.panel-profile-menu__label {
  font-size: 11px;
  color: var(--ss-muted);
  padding: 2px 6px 0;
}

.panel-profile-menu__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 6px;
}

.panel-profile-menu__grid a {
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  border: 1px solid var(--ss-border) !important;
  background: var(--ss-surface-2) !important;
  justify-content: flex-start;
  font-size: 12px !important;
}

/* Global AJAX search */
.panel-search-wrap {
  position: relative;
}

.global-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  z-index: 90;
  max-height: min(68vh, 520px);
  overflow: auto;
  border: 1px solid var(--ss-border);
  background: var(--ss-surface);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 8px;
}

.global-search-results.hidden {
  display: none !important;
}

.global-search-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.global-search-tab {
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid var(--ss-border);
  background: var(--ss-surface-2);
  color: var(--ss-text);
  font-size: 11px;
  font-weight: 700;
  padding: 0 9px;
}

.global-search-tab span {
  color: var(--ss-muted);
}

.global-search-tab.is-active {
  background: rgba(21, 140, 105, 0.2);
  border-color: rgba(21, 140, 105, 0.5);
}

.global-search-results__list {
  display: grid;
  gap: 8px;
}

.global-search-result {
  border: 1px solid var(--ss-border);
  background: var(--ss-surface-2);
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  gap: 8px;
}

.global-search-result__main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.global-search-result__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result__sub {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--ss-muted);
  min-width: 0;
}

.global-search-result__sub span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result__avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(21, 140, 105, 0.45);
  background: linear-gradient(155deg, rgba(21, 140, 105, 0.28), rgba(15, 24, 38, 0.35));
  color: #d9fff2;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.global-search-result__body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.global-search-service {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(21, 140, 105, 0.45);
  background: rgba(21, 140, 105, 0.14);
  color: #d7f6ec;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.global-search-result__go {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #9fb0c6;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.global-search-result:hover .global-search-result__go {
  transform: translateX(2px);
  color: #dff9ee;
  background: rgba(21, 140, 105, 0.2);
}

.global-search-results__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gs-btn {
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(21, 140, 105, 0.45);
  background: rgba(21, 140, 105, 0.15);
  color: #d7f6ec;
  font-size: 11px;
  padding: 0 10px;
  font-weight: 700;
}

.global-search-results__empty {
  font-size: 12px;
  color: var(--ss-muted);
  padding: 8px;
}

/* Auth screens match main palette */
.auth2026-body {
  background:
    radial-gradient(760px 380px at 78% 88%, rgba(21, 140, 105, 0.18), transparent 62%),
    radial-gradient(700px 340px at 10% -8%, rgba(21, 140, 105, 0.12), transparent 58%),
    var(--ss-bg) !important;
  color: var(--ss-text) !important;
}

.auth2026-aside,
.auth2026-card {
  background: color-mix(in srgb, var(--ss-surface) 88%, transparent) !important;
  border: 1px solid var(--ss-border) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32) !important;
}

.auth2026-aside h1,
.auth2026-card h2 {
  color: var(--ss-text) !important;
}

.auth2026-aside p,
.auth2026-aside ul,
.auth2026-sub {
  color: var(--ss-muted) !important;
}

.auth2026-card .form-input {
  background: var(--ss-surface-2) !important;
  border: 1px solid var(--ss-border) !important;
  color: var(--ss-text) !important;
}

.auth2026-btn {
  background: linear-gradient(135deg, var(--ss-accent), var(--ss-accent-strong)) !important;
  border: 1px solid rgba(21, 140, 105, 0.56) !important;
  color: #eafff8 !important;
}

.auth2026-links a {
  color: #8edbc4 !important;
}

.auth-theme-toggle {
  margin-left: auto;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--ss-border);
  background: var(--ss-surface-2);
  color: var(--ss-text);
  font-size: 12px;
  font-weight: 600;
}

/* Clients modules redesign baseline */
body.clients-modern-page .legacy-clients-title {
  display: none !important;
}

body.clients-modern-page .container > .w-full.overflow-hidden.rounded-lg.shadow-xs {
  border-radius: 14px !important;
  border: 1px solid var(--ss-border) !important;
  background: var(--ss-surface) !important;
  padding: 10px !important;
}

body.clients-modern-page .grid.gap-6.mb-6,
body.clients-modern-page .grid.gap-6.mb-8 {
  gap: 12px !important;
}

body.clients-modern-page .module-hero__icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

body.clients-modern-page .tab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.clients-modern-page .tab-btn {
  min-height: 28px;
  border-radius: 999px;
  font-size: 11px;
}

/* ===== Layout fix: sidebar/topbar/mobile ===== */
.panel-shell {
  align-items: stretch !important;
  gap: 10px !important;
  padding: 10px !important;
}

.panel-sidebar.panel-sidebar--rail {
  margin-top: 0 !important;
  height: calc(100vh - 20px) !important;
}

.panel-topbar {
  margin-top: 0 !important;
  min-height: 58px !important;
}

.panel-topbar-inner {
  min-height: 58px !important;
  align-items: center !important;
}

.panel-search-wrap {
  min-height: 40px !important;
}

.panel-select {
  min-height: 32px !important;
}

.mikrotik-status-chip {
  min-height: 36px !important;
}

/* Profile menu as full panel, not tiny corner */
.panel-profile-menu {
  position: fixed !important;
  top: 72px !important;
  right: 16px !important;
  width: clamp(420px, 45vw, 640px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 92px) !important;
  overflow: auto !important;
  padding: 12px !important;
}

/* Keep actions aligned with same size controls */
.panel-icon-btn,
.panel-profile-btn,
.panel-topbar-notify {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}

@media (max-width: 980px) {
  .panel-shell {
    padding: 8px !important;
  }
  .panel-topbar {
    border-radius: 14px !important;
  }
  .panel-topbar-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    min-height: auto !important;
    padding: 6px 0 !important;
  }
  .panel-search-wrap {
    grid-column: 1 / -1 !important;
    order: 3;
    width: 100% !important;
  }
  .panel-topbar-actions {
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }
  .mikrotik-status-chip {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .panel-shell {
    padding: 6px !important;
    gap: 8px !important;
  }
  .panel-topbar {
    padding: 8px !important;
    border-radius: 12px !important;
  }
  .panel-topbar-inner {
    grid-template-columns: auto auto 1fr auto !important;
    align-items: center !important;
  }
  .panel-search-wrap {
    grid-column: 1 / -1 !important;
    order: 10;
    min-height: 38px !important;
  }
  .panel-profile-menu {
    top: 64px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 78px) !important;
  }
  .panel-profile-menu__grid {
    grid-template-columns: 1fr !important;
  }
  .global-search-results {
    left: 0 !important;
    right: 0 !important;
    max-height: 56vh !important;
  }
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* ===== Tokens UI: claro por defecto, oscuro con .theme-dark ===== */
html {
  --ui-bg-main: #e8edf5;
  --ui-surface-main: #ffffff;
  --ui-surface-soft: #f1f5f9;
  --ui-border-main: #d2dce8;
  --ui-text-main: #0f172a;
  --ui-text-muted: #5c6b7e;
  --ui-primary: #158c69;
  --ui-primary-strong: #12785a;
  --ui-primary-soft: rgba(21, 140, 105, 0.14);
}

html.theme-dark {
  --ui-bg-main: #0b1114;
  --ui-surface-main: #121a20;
  --ui-surface-soft: #162029;
  --ui-border-main: #24313a;
  --ui-text-main: #e7eef2;
  --ui-text-muted: #97a7b3;
  --ui-primary: #158c69;
  --ui-primary-strong: #12785a;
  --ui-primary-soft: rgba(21, 140, 105, 0.18);
}

body.app-shell {
  background: var(--ui-bg-main) !important;
  color: var(--ui-text-main) !important;
}

.panel-sidebar,
.panel-topbar,
.glass-panel,
.modal-content,
.bg-white,
.dark\:bg-gray-800 {
  background: var(--ui-surface-main) !important;
  border: 1px solid var(--ui-border-main) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.panel-search-wrap,
.form-input,
.form-select,
input,
select,
textarea,
.tabulator .tabulator-header,
.tabulator-row {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border-main) !important;
  color: var(--ui-text-main) !important;
}

.panel-link,
.panel-submenu-link,
.panel-profile-menu a,
.text-gray-100,
.text-gray-200,
.text-gray-300,
.text-gray-400,
.text-gray-500 {
  color: var(--ui-text-main) !important;
}

.panel-nav-group-title,
.panel-profile-menu__user span,
.global-search-result__sub,
.auth2026-sub,
.module-hero__eyebrow {
  color: var(--ui-text-muted) !important;
}

.panel-link:hover,
.panel-submenu-link:hover,
.panel-profile-menu a:hover,
.tabulator .tabulator-row:hover {
  background: var(--ui-primary-soft) !important;
  border-color: rgba(21, 140, 105, 0.46) !important;
}

.panel-link.is-active,
.panel-submenu-link.is-active {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-strong)) !important;
  border-color: transparent !important;
  color: #ecfff8 !important;
}

.btn-glass {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-strong)) !important;
  border: 1px solid rgba(21, 140, 105, 0.56) !important;
  color: #ecfff8 !important;
}

.btn-glass:hover {
  filter: brightness(1.06);
}

.dashboard-alert__cta {
  position: relative !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(21, 140, 105, 0.56) !important;
  background: linear-gradient(135deg, var(--ss-accent), var(--ss-accent-strong)) !important;
  color: #ecfff8 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.dashboard-alert__cta:hover {
  filter: brightness(1.05);
}

.tab-btn,
.gs-btn,
.support-chip {
  background: var(--ui-surface-soft) !important;
  border: 1px solid var(--ui-border-main) !important;
  color: var(--ui-text-main) !important;
}

.tab-btn.is-active {
  background: rgba(21, 140, 105, 0.22) !important;
  border-color: rgba(21, 140, 105, 0.56) !important;
}

.smart-columns-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
  padding: 10px;
  border: 1px solid var(--ui-border-main);
  border-radius: 10px;
  background: var(--ui-surface-soft);
}

.smart-col-toggle {
  font-size: 12px;
  color: var(--ui-text-main);
  display: flex;
  gap: 6px;
  align-items: center;
}

.smart-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.smart-card {
  border: 1px solid var(--ui-border-main);
  background: var(--ui-surface-soft);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.smart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.smart-card__head strong {
  font-size: 13px;
}

.smart-card__head span {
  font-size: 11px;
  color: var(--ui-text-muted);
}

#smart-tabulator.smart-density-compact .tabulator-row .tabulator-cell {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-size: 12px !important;
}

#smart-tabulator.smart-density-compact .tabulator-cell.tabulator-cell--pay-state .pay-state-switch {
  gap: 7px 9px !important;
  padding: 5px 7px !important;
}

#smart-tabulator.smart-density-compact .tabulator-cell.tabulator-cell--pay-state .pay-state-btn {
  padding: 0 9px !important;
  min-height: 30px !important;
  font-size: 10px !important;
}

#smart-tabulator.smart-density-compact .tabulator-row {
  min-height: 44px !important;
}

#smart-tabulator.smart-density-compact .plan-inline-select {
  min-height: 28px !important;
  max-width: 100% !important;
  padding: 3px 22px 3px 7px !important;
  font-size: 10px !important;
  border-radius: 7px !important;
}

.tab-btn--danger,
.panel-profile-menu__danger {
  border-color: #6a3a44 !important;
  color: #ffccd4 !important;
}

.mikrotik-status-chip {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border-main) !important;
  color: var(--ui-text-main) !important;
}

.mikrotik-status-chip.is-ok {
  background: rgba(21, 140, 105, 0.2) !important;
  border-color: rgba(21, 140, 105, 0.5) !important;
  color: #d8f7ec !important;
}

.mikrotik-status-chip.is-off {
  background: rgba(170, 52, 72, 0.18) !important;
  border-color: rgba(170, 52, 72, 0.45) !important;
  color: #ffd5de !important;
}

/* Mobile hotfix (412px baseline) */
@media (max-width: 768px) {
  .panel-topbar {
    padding: 6px !important;
  }

  .panel-topbar-inner {
    display: grid !important;
    grid-template-columns: 34px 1fr auto !important;
    gap: 6px !important;
    align-items: center !important;
    min-height: auto !important;
  }

  .panel-topbar-actions {
    gap: 6px !important;
  }

  .panel-topbar-actions #mikrotik-status-chip {
    display: none !important;
  }

  .panel-search-wrap--global {
    min-height: 36px !important;
    padding: 4px 6px !important;
    border-radius: 10px !important;
  }

  .panel-search-wrap--global .panel-search {
    font-size: 12px !important;
  }

  .panel-search-wrap--global .panel-select {
    min-width: 42px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
  }

  .dashboard-orix__hero {
    padding: 10px !important;
  }

  .dashboard-orix__hero-actions--labeled {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px !important;
  }

  .dashboard-orix__action--labeled {
    min-width: 0 !important;
    width: 100% !important;
    height: 34px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    border-radius: 9px !important;
  }

  .dashboard-v3__title {
    font-size: 42px !important;
    line-height: 1.05 !important;
  }

  .glass-panel {
    padding: 12px !important;
  }
}

/* Topbar search redesign + alignment */
.panel-topbar-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.panel-search-wrap--global {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 900px;
  min-height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--ss-border) 70%, transparent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ss-surface-2) 92%, transparent), color-mix(in srgb, var(--ss-surface) 86%, transparent)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
  padding: 6px 10px 6px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.panel-search-submit {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 1px solid color-mix(in srgb, var(--ss-border) 70%, transparent) !important;
  background: color-mix(in srgb, var(--ss-surface) 82%, transparent) !important;
  box-shadow: none !important;
  color: var(--ss-muted) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
}

.panel-search-submit:hover {
  filter: brightness(1.08);
}

.panel-search-wrap--global > i[data-lucide] {
  width: 18px;
  height: 18px;
  opacity: 0.85;
  color: var(--ss-muted);
}

.panel-search-wrap--global .panel-search {
  height: 34px !important;
  font-size: 15px !important;
  line-height: 34px !important;
}

.panel-search-wrap--global .panel-select {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--ss-border) 72%, transparent) !important;
  background: color-mix(in srgb, var(--ss-surface) 84%, transparent) !important;
  box-shadow: none !important;
  padding: 0 10px !important;
  font-weight: 700;
  color: var(--ss-text) !important;
}

.panel-search-wrap--global .panel-search {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.panel-search-wrap--global:focus-within {
  border-color: color-mix(in srgb, var(--ss-accent) 62%, var(--ss-border)) !important;
  box-shadow: 0 0 0 2px rgba(21, 140, 105, 0.14) !important;
}

/* Morosidad spacing polish */
body.morosidad-page main > .container {
  row-gap: var(--ss-space-3) !important;
  padding-top: var(--ss-space-2) !important;
  padding-bottom: var(--ss-space-4) !important;
}

body.morosidad-page #mor-smart {
  margin-top: var(--ss-space-2) !important;
  padding: var(--ss-space-3) !important;
}

body.morosidad-page .mor-kpis {
  margin-top: var(--ss-space-2) !important;
}

body.morosidad-page #mor-smart .tabulator {
  border-radius: 12px !important;
}

/* Facturas spacing polish */
body.facturas-page main > .container {
  row-gap: var(--ss-space-3) !important;
  padding-top: var(--ss-space-2) !important;
  padding-bottom: var(--ss-space-4) !important;
}

body.facturas-page .module-hero {
  margin-bottom: 0 !important;
}

body.facturas-page .glass-panel form {
  gap: var(--ss-space-3) !important;
}

body.facturas-page .facturas-kpis > .glass-panel {
  min-height: 96px;
  padding: 14px 16px !important;
}

/* Dashboard KPI: icon + legible breakdown (high contrast) */
#dashboard-kpis .dashboard-v3__kpi {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  min-height: 148px;
}

#dashboard-kpis .dashboard-v3__kpi > div:first-child {
  margin-right: 0 !important;
  flex-shrink: 0;
}

#dashboard-kpis .kpi-card__body {
  flex: 1;
  min-width: 0;
}

#dashboard-kpis .kpi-card__title {
  margin: 0 0 4px 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #b8c9dc !important;
}

#dashboard-kpis .kpi-card__value {
  margin: 0 0 10px 0 !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #f4f8ff !important;
}

#dashboard-kpis .kpi-card__value--sm {
  font-size: 1.2rem !important;
}

#dashboard-kpis .kpi-card__sub,
#dashboard-kpis .kpi-card__hint {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #8ea3bd !important;
}

#dashboard-kpis .kpi-card__hint {
  margin: 4px 0 0 0 !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  color: #7d92ad !important;
}

#dashboard-kpis .kpi-card__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
  align-items: start;
}

#dashboard-kpis .kpi-card__split-col {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#dashboard-kpis .kpi-card__split-col--accent {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.22);
}

#dashboard-kpis .kpi-card__split-col--accent .kpi-card__title {
  color: #f1a8a8 !important;
}

#dashboard-kpis .kpi-card__split-col--accent .kpi-card__value {
  color: #ffe4e4 !important;
}

#dashboard-kpis .kpi-breakdown {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#dashboard-kpis .kpi-breakdown--tight {
  gap: 5px;
}

#dashboard-kpis .kpi-breakdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
  background: rgba(15, 28, 45, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left-width: 3px;
  border-left-style: solid;
}

#dashboard-kpis .kpi-breakdown__row--internet {
  border-left-color: rgba(59, 130, 246, 0.95);
}

#dashboard-kpis .kpi-breakdown__row--luz {
  border-left-color: rgba(234, 179, 8, 0.95);
}

#dashboard-kpis .kpi-breakdown__row--tv {
  border-left-color: rgba(168, 85, 247, 0.95);
}

#dashboard-kpis .kpi-breakdown__mod {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #e8f0fa;
}

#dashboard-kpis .kpi-breakdown__row--internet .kpi-breakdown__mod {
  background: rgba(59, 130, 246, 0.2);
  color: #bfdbfe;
}

#dashboard-kpis .kpi-breakdown__row--luz .kpi-breakdown__mod {
  background: rgba(234, 179, 8, 0.18);
  color: #fde68a;
}

#dashboard-kpis .kpi-breakdown__row--tv .kpi-breakdown__mod {
  background: rgba(168, 85, 247, 0.2);
  color: #e9d5ff;
}

#dashboard-kpis .kpi-breakdown__val {
  text-align: right;
  font-weight: 700;
  color: #f8fafc !important;
  font-variant-numeric: tabular-nums;
}

#dashboard-kpis .kpi-breakdown__money {
  display: inline-block;
  margin-left: 4px;
  font-weight: 600;
  font-size: 11px;
  color: #a5f3d0 !important;
}

#dashboard-kpis .kpi-breakdown__sep {
  margin: 0 4px;
  font-weight: 500;
  color: #64748b;
}

#dashboard-kpis .kpi-breakdown__paid {
  color: #bae6fd !important;
  font-weight: 800;
}

#dashboard-kpis .kpi-breakdown__susp {
  color: #fecaca !important;
  font-weight: 800;
}

/* —— KPI cards: diseño refinado (iconos, chips I/T/L, jerarquía) —— */
#dashboard-kpis.dashboard-kpis-grid {
  gap: 16px !important;
}

#dashboard-kpis .kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  min-height: 148px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#dashboard-kpis .kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%, transparent 100%);
  opacity: 0.9;
}

html.theme-dark #dashboard-kpis .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
}

#dashboard-kpis .kpi-card__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: #fff;
}

#dashboard-kpis .kpi-card__icon-svg {
  width: 22px;
  height: 22px;
  opacity: 0.98;
}

#dashboard-kpis .kpi-card__icon--clients {
  background: linear-gradient(145deg, #fb923c 0%, #c2410c 100%);
}

#dashboard-kpis .kpi-card__icon--balance {
  background: linear-gradient(145deg, #34d399 0%, #047857 100%);
}

#dashboard-kpis .kpi-card__icon--status {
  background: linear-gradient(145deg, #60a5fa 0%, #1d4ed8 100%);
}

#dashboard-kpis .kpi-card__icon--pending {
  background: linear-gradient(145deg, #2dd4bf 0%, #0f766e 100%);
}

#dashboard-kpis .kpi-card__section-label {
  margin: 0 0 6px 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7d92ad !important;
  opacity: 0.95;
}

#dashboard-kpis .kpi-breakdown__val--money {
  font-variant-numeric: tabular-nums;
  font-size: 12px !important;
}

#dashboard-kpis .kpi-breakdown__row--compact {
  padding: 5px 8px 5px 8px !important;
  font-size: 11px !important;
}

#dashboard-kpis .kpi-breakdown__row--compact .kpi-breakdown__mod {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

#dashboard-kpis .kpi-chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 8px;
}

#dashboard-kpis .kpi-chip-group:last-child {
  margin-bottom: 0;
}

#dashboard-kpis .kpi-chip-group__label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8ea3bd !important;
  min-width: 2.5rem;
}

#dashboard-kpis .kpi-chip-group--danger .kpi-chip-group__label {
  color: #c4a5a5 !important;
}

#dashboard-kpis .kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.07);
  color: #f1f5f9 !important;
}

#dashboard-kpis .kpi-chip__letter {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
}

#dashboard-kpis .kpi-chip--internet {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.16);
  color: #dbeafe !important;
}

#dashboard-kpis .kpi-chip--tv {
  border-color: rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.16);
  color: #f3e8ff !important;
}

#dashboard-kpis .kpi-chip--luz {
  border-color: rgba(234, 179, 8, 0.4);
  background: rgba(234, 179, 8, 0.14);
  color: #fef9c3 !important;
}

#dashboard-kpis .kpi-chip--outline {
  background: rgba(255, 255, 255, 0.03) !important;
  font-weight: 700 !important;
}

#dashboard-kpis .kpi-card--split .kpi-card__split {
  margin-bottom: 8px !important;
}

/* Ingresos rápidos (Ganado hoy / mes / deuda pendiente) */
.dashboard-income-kpis .text-gray-400 {
  color: #a8bdd4 !important;
}

/* Regla general: separacion vertical consistente en paneles */
.glass-panel > * + * {
  margin-top: var(--ss-space-3);
}

.panel-topbar-actions {
  margin-left: auto;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

@media (max-width: 980px) {
  .panel-topbar-inner {
    flex-wrap: wrap !important;
  }
  .panel-search-wrap--global {
    order: 10;
    width: 100% !important;
    max-width: none !important;
  }
  .panel-topbar-inner > .panel-icon-btn {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
  }
}

/* Clients page: action colors + scrollbar accent */
body.clients-modern-page .smart-table-toolbar__actions .tab-btn,
body.clients-modern-page .smart-table-toolbar__actions .btn-glass {
  border-color: rgba(21, 140, 105, 0.52) !important;
  background: linear-gradient(145deg, rgba(21, 140, 105, 0.22), rgba(15, 34, 45, 0.72)) !important;
  color: #e7fff6 !important;
}

body.clients-modern-page .smart-table-toolbar__actions .tab-btn:hover,
body.clients-modern-page .smart-table-toolbar__actions .btn-glass:hover {
  background: linear-gradient(145deg, rgba(21, 140, 105, 0.34), rgba(18, 43, 57, 0.85)) !important;
  border-color: rgba(21, 140, 105, 0.72) !important;
}

body.clients-modern-page .smart-table-toolbar__actions #bulk-suspend {
  background: linear-gradient(145deg, rgba(180, 70, 70, 0.28), rgba(52, 24, 24, 0.84)) !important;
  border-color: rgba(239, 68, 68, 0.56) !important;
  color: #ffe6e6 !important;
}

html.theme-dark html,
html.theme-dark body {
  scrollbar-color: rgba(21, 140, 105, 0.75) rgba(7, 17, 29, 0.95) !important;
}

html.theme-dark *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(21, 140, 105, 0.85), rgba(21, 140, 105, 0.45)) !important;
  border: 1px solid rgba(21, 140, 105, 0.42) !important;
}

html.theme-dark *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(28, 167, 126, 0.95), rgba(21, 140, 105, 0.62)) !important;
}

html.theme-dark *::-webkit-scrollbar-track {
  background: rgba(7, 17, 29, 0.95) !important;
}

html:not(.theme-dark) *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.45), rgba(99, 102, 241, 0.35)) !important;
  border: 2px solid #e2e8f0 !important;
}

html:not(.theme-dark) *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.65), rgba(99, 102, 241, 0.5)) !important;
}

html:not(.theme-dark) *::-webkit-scrollbar-track {
  background: #e8ecf4 !important;
}

/* ========== Modo claro: anula “visual reset” oscuro del panel ========== */
html:not(.theme-dark) body.app-shell {
  background:
    radial-gradient(950px 500px at 8% -20%, rgba(109, 87, 255, 0.2), transparent 55%),
    radial-gradient(720px 420px at 92% 0%, rgba(51, 197, 255, 0.14), transparent 50%),
    #e9eefc !important;
  color: var(--glass-text) !important;
}

html:not(.theme-dark) .panel-sidebar,
html:not(.theme-dark) .panel-topbar,
html:not(.theme-dark) .glass-panel,
html:not(.theme-dark) .dashboard-v3__kpi,
html:not(.theme-dark) .dashboard-v3__trafico,
html:not(.theme-dark) .dashboard-focus,
html:not(.theme-dark) .support-ticket-item,
html:not(.theme-dark) .smart-preview {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html:not(.theme-dark) .panel-link {
  color: var(--glass-text) !important;
}

html:not(.theme-dark) .panel-link:hover {
  background: var(--glass-accent-soft) !important;
  border-color: rgba(124, 92, 255, 0.22) !important;
}

html:not(.theme-dark) .panel-nav-group-title {
  color: var(--glass-muted) !important;
}

html:not(.theme-dark) .panel-search-wrap {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Enlace activo sidebar: forzar texto/icono claros (evita que .panel-link { color: glass-text } pise el activo) */
html:not(.theme-dark) .panel-link.is-active,
html:not(.theme-dark) .panel-submenu-link.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #158c69, #127a5c) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

html:not(.theme-dark) .panel-link.is-active i[data-lucide],
html:not(.theme-dark) .panel-submenu-link.is-active i[data-lucide] {
  color: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
}

/* Buscador global topbar: placeholder e iconos legibles sobre fondo claro */
html:not(.theme-dark) .panel-search-wrap--global {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

html:not(.theme-dark) .panel-search-wrap--global > i[data-lucide] {
  color: #475569 !important;
  opacity: 1 !important;
}

html:not(.theme-dark) .panel-search-wrap--global .panel-search {
  color: #0f172a !important;
}

html:not(.theme-dark) .panel-search-wrap--global .panel-search::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

html:not(.theme-dark) .panel-search-wrap--global .panel-select {
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html:not(.theme-dark) .panel-search-wrap--global .panel-search-submit {
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

html:not(.theme-dark) .panel-search-wrap--global:focus-within {
  border-color: rgba(21, 140, 105, 0.45) !important;
  box-shadow: 0 0 0 2px rgba(21, 140, 105, 0.12) !important;
}

html:not(.theme-dark) .panel-icon-btn,
html:not(.theme-dark) .panel-profile-btn,
html:not(.theme-dark) .module-hero__icon-btn,
html:not(.theme-dark) .dashboard-v3__icon-btn {
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg) !important;
  color: var(--glass-text) !important;
}

html:not(.theme-dark) .dashboard-v3__title,
html:not(.theme-dark) .module-hero__title {
  color: var(--glass-text) !important;
}

html:not(.theme-dark) .dashboard-v3__eyebrow,
html:not(.theme-dark) .module-hero__eyebrow {
  color: var(--glass-muted) !important;
}

/* Dashboard hero (Orix): borde y CTAs legibles en modo claro */
html:not(.theme-dark) .dashboard-v3__hero,
html:not(.theme-dark) .module-hero {
  border-bottom: 1px solid rgba(148, 163, 184, 0.4) !important;
}

html:not(.theme-dark) .dashboard-v3__icon-btn.dashboard-orix__action--labeled {
  background: linear-gradient(130deg, #158c69, #0f6d52) !important;
  border: 1px solid rgba(15, 109, 82, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(21, 140, 105, 0.2) !important;
}

html:not(.theme-dark) .dashboard-v3__icon-btn.dashboard-orix__action--labeled:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 22px rgba(21, 140, 105, 0.26) !important;
}

html:not(.theme-dark) .dashboard-v3__icon-btn.dashboard-orix__action--labeled i[data-lucide] {
  color: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
}

/* index.php usa clases Tailwind fijas (p. ej. text-gray-100) sin variante dark: */
html:not(.theme-dark) .dashboard-v3 .text-gray-100 {
  color: #0f172a !important;
}

html:not(.theme-dark) .dashboard-v3 .text-gray-200 {
  color: #334155 !important;
}

html:not(.theme-dark) .dashboard-v3 .text-gray-400,
html:not(.theme-dark) .dashboard-v3 .text-gray-500 {
  color: #64748b !important;
}

html:not(.theme-dark) .dashboard-v3__kpi p:first-child {
  color: var(--glass-muted) !important;
}

html:not(.theme-dark) .dashboard-v3__kpi p:last-child {
  color: var(--glass-text) !important;
}

html:not(.theme-dark) .form-input,
html:not(.theme-dark) .form-select,
html:not(.theme-dark) textarea {
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.theme-dark) .quick-actions-fab {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

html:not(.theme-dark) .quick-actions-fab::before {
  color: var(--glass-muted) !important;
}

html:not(.theme-dark) .btn-glass,
html:not(.theme-dark) .tab-btn {
  background: linear-gradient(130deg, rgba(124, 92, 255, 0.88), rgba(69, 109, 255, 0.9)) !important;
  border-color: rgba(124, 92, 255, 0.35) !important;
  color: #fff !important;
}

/* Tabulator smart table: modo claro */
html:not(.theme-dark) #smart-tabulator .tabulator-row {
  border-bottom-color: rgba(148, 163, 184, 0.45) !important;
}

html:not(.theme-dark) #smart-tabulator .tabulator-cell.tabulator-cell--plan-inline .plan-inline-select {
  color: #0f172a !important;
  background: #fff !important;
  border-color: #cbd5e1 !important;
}

html:not(.theme-dark) #smart-tabulator .tabulator-footer {
  border-top-color: #e2e8f0 !important;
}

/* ========== Modo claro: KPIs, tablas, MikroTik, módulos y ajustes (contraste real) ========== */
html:not(.theme-dark) .traffic-kpi,
html:not(.theme-dark) .traffic-chart-wrap {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

html:not(.theme-dark) .traffic-toolbar h4,
html:not(.theme-dark) .traffic-kpi strong {
  color: var(--glass-text) !important;
}

html:not(.theme-dark) .traffic-subtitle,
html:not(.theme-dark) .traffic-kpi span {
  color: var(--glass-muted) !important;
}

html:not(.theme-dark) .traffic-live-readout,
html:not(.theme-dark) #apex-traffic-readout {
  color: var(--glass-muted) !important;
}

html:not(.theme-dark) .mikrotik-live {
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border) !important;
}

html:not(.theme-dark) .mikrotik-live__kpi {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.theme-dark) .mikrotik-live__value,
html:not(.theme-dark) .dashboard-income-kpis .mikrotik-live__value {
  color: #0f172a !important;
}

html:not(.theme-dark) .mikrotik-live h3.text-gray-100,
html:not(.theme-dark) .mikrotik-live .text-gray-100 {
  color: var(--glass-text) !important;
}

html:not(.theme-dark) .mikrotik-live .text-gray-400 {
  color: var(--glass-muted) !important;
}

html:not(.theme-dark) .mikrotik-status-chip {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html:not(.theme-dark) .mikrotik-status-chip.is-ok {
  background: rgba(21, 140, 105, 0.16) !important;
  border-color: rgba(21, 140, 105, 0.42) !important;
  color: #064e3b !important;
}

html:not(.theme-dark) .mikrotik-status-chip.is-off {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #7f1d1d !important;
}

html:not(.theme-dark) #smart-tabulator .tabulator-cell.tabulator-cell--pay-state .pay-state-switch {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.theme-dark) #smart-tabulator .tabulator-cell.tabulator-cell--pay-state .pay-state-btn {
  color: #334155 !important;
}

html:not(.theme-dark) #smart-tabulator .tabulator-cell.tabulator-cell--pay-state .pay-state-btn.is-active {
  color: #ffffff !important;
}

html:not(.theme-dark) .tabulator .tabulator-footer,
html:not(.theme-dark) .tabulator .tabulator-footer .tabulator-footer-contents,
html:not(.theme-dark) .tabulator .tabulator-footer .tabulator-paginator,
html:not(.theme-dark) .tabulator .tabulator-footer .tabulator-paginator label,
html:not(.theme-dark) .tabulator .tabulator-footer .tabulator-page-counter {
  color: #475569 !important;
}

html:not(.theme-dark) .tabulator .tabulator-footer select.tabulator-page-size,
html:not(.theme-dark) .tabulator .tabulator-footer .tabulator-page-size {
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.theme-dark) #smart-tabulator .tabulator-row:hover {
  background: rgba(99, 102, 241, 0.07) !important;
}

html:not(.theme-dark) #smart-tabulator .tabulator .tabulator-header {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html:not(.theme-dark) #smart-tabulator .tabulator .tabulator-header .tabulator-col {
  background: transparent !important;
  color: #0f172a !important;
}

html:not(.theme-dark) body.clients-modern-page .smart-table-toolbar__actions .tab-btn,
html:not(.theme-dark) body.clients-modern-page .smart-table-toolbar__actions .btn-glass {
  background: linear-gradient(130deg, #158c69, #0d6b4f) !important;
  border-color: rgba(13, 107, 79, 0.55) !important;
  color: #ffffff !important;
}

html:not(.theme-dark) body.clients-modern-page .smart-table-toolbar__actions .tab-btn:hover,
html:not(.theme-dark) body.clients-modern-page .smart-table-toolbar__actions .btn-glass:hover {
  filter: brightness(1.05);
}

html:not(.theme-dark) body.clients-modern-page .smart-table-toolbar__actions #bulk-suspend {
  background: linear-gradient(130deg, #b91c1c, #7f1d1d) !important;
  border-color: rgba(127, 29, 29, 0.55) !important;
  color: #ffffff !important;
}

html:not(.theme-dark) .dashboard-focus--next-actions .dashboard-focus__item {
  background: #ffffff !important;
  border: 1px solid #dbe2ef !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
}

html:not(.theme-dark) .dashboard-focus--next-actions .dashboard-focus__user {
  color: #0f172a !important;
}

html:not(.theme-dark) .dashboard-focus--next-actions .dashboard-focus__debt {
  color: #b45309 !important;
}

html:not(.theme-dark) .dashboard-focus--next-actions .dashboard-focus__hint {
  color: #64748b !important;
}

html:not(.theme-dark) .dashboard-focus--next-actions .dashboard-focus__module {
  color: #14532d !important;
  background: rgba(21, 140, 105, 0.12) !important;
  border: 1px solid rgba(21, 140, 105, 0.35) !important;
}

html:not(.theme-dark) .dashboard-focus--next-actions .dashboard-focus__cta {
  background: linear-gradient(130deg, rgba(124, 92, 255, 0.92), rgba(69, 109, 255, 0.9)) !important;
  border: 1px solid rgba(124, 92, 255, 0.35) !important;
  color: #ffffff !important;
}

html:not(.theme-dark) .dashboard-focus--next-actions .grid {
  gap: 22px !important;
  padding-bottom: 8px !important;
}

html:not(.theme-dark) .modules-page .module-card {
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

html:not(.theme-dark) .modules-page .module-card__title {
  color: var(--glass-text) !important;
}

html:not(.theme-dark) .modules-page .module-card__tag {
  color: var(--glass-muted) !important;
}

html:not(.theme-dark) .modules-page .module-card__kpis {
  gap: 14px !important;
}

html:not(.theme-dark) .modules-page .module-card__kpis > div {
  background: #ffffff !important;
  border: 1px solid #dbe2ef !important;
}

html:not(.theme-dark) .modules-page .module-card__kpis span {
  color: #64748b !important;
}

html:not(.theme-dark) .modules-page .module-card__kpis strong {
  color: #0f172a !important;
}

html:not(.theme-dark) .modules-page .module-card__footer {
  color: #64748b !important;
  border-top-color: #e2e8f0 !important;
}

html:not(.theme-dark) .modules-page #modules-grid {
  gap: 22px !important;
  row-gap: 24px !important;
}

html:not(.theme-dark) .users-page .module-hero {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98)) !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.theme-dark) .users-page .module-hero__title {
  color: var(--glass-text) !important;
}

html:not(.theme-dark) .users-page .module-hero__eyebrow {
  color: var(--glass-muted) !important;
}

html:not(.theme-dark) .users-page .users-table-wrap {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html:not(.theme-dark) .users-page .tabulator .tabulator-header .tabulator-col {
  background: #f8fafc !important;
  color: #0f172a !important;
}

html:not(.theme-dark) body.settings-page .settings-block {
  background: #ffffff !important;
  border: 1px solid #dbe2ef !important;
}

html:not(.theme-dark) body.settings-page .settings-mini-kpis > div {
  background: #f8fafc !important;
  border: 1px solid #dbe2ef !important;
}

html:not(.theme-dark) body.settings-page .settings-mini-kpis span {
  color: #64748b !important;
}

html:not(.theme-dark) body.settings-page .settings-mini-kpis strong {
  color: #0f172a !important;
}

html:not(.theme-dark) body.settings-page .settings-section-sub {
  color: #64748b !important;
}

html:not(.theme-dark) body.settings-page .settings-security-note {
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

html:not(.theme-dark) body.settings-page .settings-shortcuts {
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid #e2e8f0 !important;
}

html:not(.theme-dark) .admin-kpi-stack .admin-kpi-stack__label {
  color: #475569 !important;
}

html:not(.theme-dark) .admin-kpi-stack .admin-kpi-stack__value {
  color: #0f172a !important;
}

/* Administración: separar KPIs (URLs / errores / SMTP) — columna única o 3 cols */
.admin-kpi-stack {
  gap: 1.5rem !important;
  row-gap: 1.5rem !important;
  column-gap: 1.5rem !important;
}

@media (min-width: 768px) {
  .admin-kpi-stack {
    gap: 2rem !important;
    row-gap: 2rem !important;
    column-gap: 2rem !important;
  }
}

html:not(.theme-dark) .traffic-page .traffic-kpi-label {
  color: #475569 !important;
}

html:not(.theme-dark) .traffic-page .traffic-kpi-value {
  color: #0f172a !important;
}

html:not(.theme-dark) .traffic-page .traffic-kpi-value--accent {
  color: #b45309 !important;
}

html:not(.theme-dark) .chart-empty-state {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

/* Tema oscuro: KPIs tráfico por cliente (tras clases slate en HTML) */
html.theme-dark .traffic-page .traffic-kpi-label {
  color: #94a3b8 !important;
}

html.theme-dark .traffic-page .traffic-kpi-value {
  color: #f1f5f9 !important;
}

html.theme-dark .traffic-page .traffic-kpi-value--accent {
  color: #fcd34d !important;
}

html.theme-dark .admin-kpi-stack__label {
  color: #94a3b8 !important;
}

html.theme-dark .admin-kpi-stack__value {
  color: #f1f5f9 !important;
}

/* Administración — hero: sublínea + CTA planes (no usar regla global .container > .my-6 a) */
.admin-hero__subline {
  margin: 12px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

html:not(.theme-dark) .admin-hero__subline {
  color: #64748b !important;
}

html.theme-dark .admin-hero__subline {
  color: #94a3b8 !important;
}

.admin-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.25;
  border: 1px solid rgba(124, 92, 255, 0.32);
  background: linear-gradient(130deg, rgba(124, 92, 255, 0.92), rgba(95, 70, 230, 0.92));
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(124, 92, 255, 0.28);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.admin-hero__cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(124, 92, 255, 0.36);
}

html.theme-dark .admin-hero__cta {
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Administración — Errores recientes (legible en light / dark) */
.admin-errors-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-errors-card__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

html:not(.theme-dark) .admin-errors-card__title {
  color: #0f172a !important;
}

html.theme-dark .admin-errors-card__title {
  color: #f1f5f9 !important;
}

.admin-errors-card__sub {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

html:not(.theme-dark) .admin-errors-card__sub {
  color: #64748b !important;
}

html.theme-dark .admin-errors-card__sub {
  color: #94a3b8 !important;
}

.admin-errors-card__code {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 6px;
}

html:not(.theme-dark) .admin-errors-card__code {
  color: #4338ca !important;
  background: rgba(124, 92, 255, 0.12);
  border: 1px solid rgba(124, 92, 255, 0.22);
}

html.theme-dark .admin-errors-card__code {
  color: #c4b5fd !important;
  background: rgba(124, 92, 255, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.25);
}

.admin-errors-card__link {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}

html:not(.theme-dark) .admin-errors-card__link {
  color: #5b4fcf !important;
  background: rgba(124, 92, 255, 0.1);
  border: 1px solid rgba(124, 92, 255, 0.22);
}

html:not(.theme-dark) .admin-errors-card__link:hover {
  color: #4338ca !important;
  background: rgba(124, 92, 255, 0.16);
}

html.theme-dark .admin-errors-card__link {
  color: #c4b5fd !important;
  background: rgba(124, 92, 255, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.28);
}

html.theme-dark .admin-errors-card__link:hover {
  background: rgba(124, 92, 255, 0.2);
}

.admin-errors-table-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

html.theme-dark .admin-errors-table-wrap {
  border-color: rgba(255, 255, 255, 0.1);
}

.admin-errors-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.admin-errors-table__head th {
  text-align: left;
  padding: 11px 14px;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

html:not(.theme-dark) .admin-errors-table__head th {
  color: #475569 !important;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-bottom: 1px solid #e2e8f0;
}

html.theme-dark .admin-errors-table__head th {
  color: #cbd5e1 !important;
  background: rgba(15, 23, 42, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-errors-table tbody td {
  padding: 11px 14px;
  vertical-align: top;
  line-height: 1.45;
}

html:not(.theme-dark) .admin-errors-table__row td {
  color: #334155 !important;
  border-bottom: 1px solid #f1f5f9;
}

html:not(.theme-dark) .admin-errors-table tbody tr:last-child td {
  border-bottom: none;
}

html.theme-dark .admin-errors-table__row td {
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html.theme-dark .admin-errors-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-errors-table__date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}

html:not(.theme-dark) .admin-errors-table__date {
  color: #475569 !important;
}

html.theme-dark .admin-errors-table__date {
  color: #94a3b8 !important;
}

.admin-errors-table__action {
  font-weight: 600;
  max-width: 200px;
  word-break: break-word;
}

html:not(.theme-dark) .admin-errors-table__action {
  color: #0f172a !important;
}

html.theme-dark .admin-errors-table__action {
  color: #f8fafc !important;
}

.admin-errors-table__detail {
  max-width: 420px;
  word-break: break-word;
  font-size: 0.78rem;
}

html:not(.theme-dark) .admin-errors-table__detail {
  color: #64748b !important;
}

html.theme-dark .admin-errors-table__detail {
  color: #94a3b8 !important;
}

.admin-errors-empty {
  text-align: center;
  padding: 32px 18px !important;
  font-size: 0.875rem;
}

html:not(.theme-dark) .admin-errors-empty {
  color: #64748b !important;
  background: linear-gradient(165deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.75) 100%);
  border-bottom: none !important;
}

html.theme-dark .admin-errors-empty {
  color: #94a3b8 !important;
  background: rgba(0, 0, 0, 0.18);
  border-bottom: none !important;
}

html:not(.theme-dark) .traffic-page .traffic-table-head {
  color: #64748b !important;
  background: #f1f5f9 !important;
}

html.theme-dark .traffic-page .traffic-table-head {
  color: #94a3b8 !important;
  background: rgba(0, 0, 0, 0.22) !important;
}

/* ========== Responsive: móvil / tablet / escritorio ========== */
@media (max-width: 767px) {
  body.app-shell main.h-full.overflow-y-auto {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-overflow-scrolling: touch;
  }

  .panel-shell {
    min-height: 100dvh;
  }

  .container {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .mobile-bottom-nav {
    padding-left: max(4px, env(safe-area-inset-left, 0));
    padding-right: max(4px, env(safe-area-inset-right, 0));
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .panel-sidebar.panel-sidebar--rail {
    width: min(260px, 24vw) !important;
    min-width: 220px !important;
  }

  .container {
    max-width: min(1200px, 100%) !important;
  }

  #smart-tabulator .tabulator {
    font-size: 12px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: min(1600px, 100%) !important;
  }

  .panel-shell > .flex.flex-col.flex-1.w-full > main {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  body.app-shell main.h-full.overflow-y-auto {
    padding-bottom: 1rem;
  }
}

/* --- Paginación tablas simples (logs / historiales) + refuerzos modo claro (mar 2025) --- */
.simple-table-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.simple-table-pager__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.simple-table-pager__btn {
  font-size: 12px !important;
  padding: 6px 10px !important;
}

html:not(.theme-dark) .simple-table-pager__info {
  color: #334155 !important;
}

html.theme-dark .simple-table-pager__info {
  color: #cbd5e1 !important;
}

.log-action-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

html.theme-dark .log-action-pill {
  background: rgba(6, 78, 59, 0.55);
  color: #a7f3d0;
  border-color: rgba(52, 211, 153, 0.35);
}

/* Perfil panel: "Cerrar sesión" legible en modo claro */
html:not(.theme-dark) .panel-profile-menu a.panel-profile-menu__danger {
  color: #b91c1c !important;
  border-color: #fecaca !important;
  background: rgba(254, 226, 226, 0.45) !important;
}

html:not(.theme-dark) .panel-profile-menu a.panel-profile-menu__danger:hover {
  color: #991b1b !important;
  border-color: #f87171 !important;
  background: rgba(254, 202, 202, 0.65) !important;
}

html:not(.theme-dark) .panel-profile-menu a.panel-profile-menu__danger i[data-lucide] {
  color: #b91c1c !important;
  opacity: 1 !important;
}

html:not(.theme-dark) .tab-btn--danger:not(.simple-table-pager__btn) {
  border-color: #fecaca !important;
  color: #b91c1c !important;
  background: rgba(254, 226, 226, 0.45) !important;
}

/* Portal cliente — Mi soporte: lista + barra de envío en modo claro */
html:not(.theme-dark) body.client-simple-page .client-reports-list-wrap,
html:not(.theme-dark) body.client-simple-page .client-reports-detail-wrap {
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
}

html:not(.theme-dark) body.client-simple-page .client-ticket-item {
  border-color: #cbd5e1 !important;
  background: #fff !important;
}

html:not(.theme-dark) body.client-simple-page .client-ticket-item__meta {
  color: #64748b !important;
}

html:not(.theme-dark) body.client-simple-page .client-ticket-item__title {
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .client-ticket-item__status {
  color: #475569 !important;
  border-color: #94a3b8 !important;
}

html:not(.theme-dark) body.client-simple-page .client-chat-msg__meta {
  color: #64748b !important;
}

html:not(.theme-dark) body.client-simple-page .client-chat-msg__bubble {
  border-color: #e2e8f0 !important;
  background: #fff !important;
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .client-chat-msg.is-agent .client-chat-msg__bubble {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
}

html:not(.theme-dark) body.client-simple-page .client-report-send-row {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 8px !important;
  align-items: center !important;
}

html:not(.theme-dark) body.client-simple-page #client-ticket-chat {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Diagnóstico de red (mi-servicio) — contraste en modo claro */
html:not(.theme-dark) body.client-simple-page .client-network-path {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.08), rgba(248, 250, 252, 0.98)) !important;
  border-color: #cbd5e1 !important;
}

html:not(.theme-dark) body.client-simple-page .client-network-path__head strong {
  color: #c2410c !important;
}

html:not(.theme-dark) body.client-simple-page .client-network-path.severity-danger .client-network-path__head strong {
  color: #b91c1c !important;
}

html:not(.theme-dark) body.client-simple-page .client-network-path.severity-warn .client-network-path__head strong {
  color: #b45309 !important;
}

html:not(.theme-dark) body.client-simple-page .client-network-path.severity-ok .client-network-path__head strong {
  color: #0f172a !important;
}

html:not(.theme-dark) body.client-simple-page .client-network-path__head span {
  color: #475569 !important;
}

html:not(.theme-dark) body.client-simple-page #client-profile-phone-text {
  color: #334155 !important;
}

/* Notificaciones — tarjetas KPI en modo claro */
html:not(.theme-dark) .notifications-page .notif-kpi {
  border-color: var(--glass-border) !important;
  background: var(--glass-bg-strong) !important;
}

html:not(.theme-dark) .notifications-page #notif-unread {
  color: #b45309 !important;
}

html:not(.theme-dark) .notifications-page #notif-due-soon {
  color: #b91c1c !important;
}

html:not(.theme-dark) .notifications-page #notif-pending {
  color: #4338ca !important;
}

html:not(.theme-dark) .global-history-pager-host {
  background: rgba(248, 250, 252, 0.92) !important;
  border-top-color: #e2e8f0 !important;
}

/* KPIs dashboard (#dashboard-kpis): modo claro — los valores usaban #f4f8ff y no se veían */
html:not(.theme-dark) #dashboard-kpis .kpi-card__title {
  color: #475569 !important;
  font-weight: 700 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card__value,
html:not(.theme-dark) #dashboard-kpis .kpi-card__value--sm {
  color: #0f172a !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card__sub {
  color: #475569 !important;
  font-weight: 600 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card__hint {
  color: #64748b !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card__split-col {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card__split-col--accent {
  background: rgba(254, 226, 226, 0.75) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card__split-col--accent .kpi-card__title {
  color: #991b1b !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card__split-col--accent .kpi-card__value {
  color: #7f1d1d !important;
}

/* Desglose Internet / TV / Luz bajo los KPIs */
html:not(.theme-dark) #dashboard-kpis .kpi-breakdown__row {
  background: rgba(248, 250, 252, 0.95) !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-breakdown__mod {
  color: #334155 !important;
  background: rgba(148, 163, 184, 0.22) !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-breakdown__row--internet .kpi-breakdown__mod {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #1d4ed8 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-breakdown__row--luz .kpi-breakdown__mod {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #a16207 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-breakdown__row--tv .kpi-breakdown__mod {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #6b21a8 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-breakdown__val {
  color: #0f172a !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-breakdown__money {
  color: #047857 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-breakdown__paid {
  color: #0369a1 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-breakdown__susp {
  color: #b91c1c !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 14px 36px rgba(15, 23, 42, 0.07) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, transparent 48%);
  opacity: 1;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 44px rgba(15, 23, 42, 0.1) !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card__section-label {
  color: #64748b !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-chip-group__label {
  color: #64748b !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-chip-group--danger .kpi-chip-group__label {
  color: #94a3b8 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-chip {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-chip__letter {
  background: rgba(15, 23, 42, 0.08) !important;
  color: #334155 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-chip--internet {
  background: rgba(219, 234, 254, 0.95) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: #1e40af !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-chip--tv {
  background: rgba(243, 232, 255, 0.95) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  color: #6b21a8 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-chip--luz {
  background: rgba(254, 252, 232, 0.98) !important;
  border-color: rgba(234, 179, 8, 0.4) !important;
  color: #854d0e !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-chip--outline {
  background: #fff !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
  color: #475569 !important;
}

html:not(.theme-dark) #dashboard-kpis .kpi-card__icon {
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Bloque “Ganado hoy / mes” encima de los KPI: etiquetas grises legibles */
html:not(.theme-dark) .dashboard-income-kpis .text-gray-400 {
  color: #64748b !important;
}

/* Catálogo de planes: una tarjeta por módulo (Internet / TV / Luz) */
#planes-catalog-root.planes-catalog-grid {
  display: grid !important;
  gap: 1.75rem !important;
  align-content: start;
}

@media (min-width: 1024px) {
  #planes-catalog-root.planes-catalog-grid {
    gap: 2.25rem !important;
  }
}

.planes-catalog-card {
  position: relative;
  isolation: isolate;
  margin: 0 !important;
}

html.theme-dark .planes-catalog-card {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

html:not(.theme-dark) .planes-catalog-card {
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 40px rgba(15, 23, 42, 0.08) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.planes-catalog-card__head {
  margin: 0 0 1rem 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

html.theme-dark .planes-catalog-card__head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.planes-catalog-card__badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 8px;
}

.planes-catalog-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.planes-catalog-card__badge--internet {
  background: rgba(59, 130, 246, 0.22);
  color: #bfdbfe;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.planes-catalog-card__badge--tv {
  background: rgba(168, 85, 247, 0.2);
  color: #e9d5ff;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.planes-catalog-card__badge--luz {
  background: rgba(234, 179, 8, 0.18);
  color: #fde68a;
  border: 1px solid rgba(234, 179, 8, 0.4);
}

html:not(.theme-dark) .planes-catalog-card__badge--internet {
  background: rgba(219, 234, 254, 0.95);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.35);
}

html:not(.theme-dark) .planes-catalog-card__badge--tv {
  background: rgba(243, 232, 255, 0.95);
  color: #6b21a8;
  border-color: rgba(168, 85, 247, 0.3);
}

html:not(.theme-dark) .planes-catalog-card__badge--luz {
  background: rgba(254, 252, 232, 0.98);
  color: #a16207;
  border-color: rgba(234, 179, 8, 0.45);
}

.planes-catalog-card__table-name {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html:not(.theme-dark) .planes-catalog-card__table-name {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.planes-catalog-card__heading {
  margin: 0 0 6px 0 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #f1f5f9 !important;
}

html:not(.theme-dark) .planes-catalog-card__heading {
  color: #0f172a !important;
}

.planes-catalog-card__hint {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #94a3b8 !important;
}

html:not(.theme-dark) .planes-catalog-card__hint {
  color: #64748b !important;
}

.planes-catalog-card__table-wrap {
  margin-top: 6px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  overflow: hidden;
}

html.theme-dark .planes-catalog-card__table-wrap {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Anula .container table thead oscuro (glass-rebuild ~L299) en catálogo planes */
html:not(.theme-dark) .planes-catalog-card .pc-table thead tr,
html:not(.theme-dark) .planes-catalog-card .pc-table .pc-table__head-row {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html.theme-dark .planes-catalog-card .pc-table thead tr,
html.theme-dark .planes-catalog-card .pc-table .pc-table__head-row {
  background: rgba(15, 23, 42, 0.55) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.planes-catalog-card .pc-table .pc-table__th {
  text-align: left;
  vertical-align: middle;
  padding: 11px 12px 11px 0;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.planes-catalog-card .pc-table .pc-table__th:first-child {
  padding-left: 14px;
}

.planes-catalog-card .pc-table .pc-table__th:last-child {
  padding-right: 14px;
}

.planes-catalog-card .pc-table .pc-table__th--actions {
  width: 9.5rem;
  white-space: nowrap;
}

.planes-catalog-card .pc-table thead th,
.planes-catalog-card .pc-table .pc-table__th {
  color: #94a3b8 !important;
  letter-spacing: 0.06em;
}

html:not(.theme-dark) .planes-catalog-card .pc-table thead th,
html:not(.theme-dark) .planes-catalog-card .pc-table .pc-table__th {
  color: #475569 !important;
  letter-spacing: 0.07em;
}

html.theme-dark .planes-catalog-card .pc-table thead th,
html.theme-dark .planes-catalog-card .pc-table .pc-table__th {
  color: #cbd5e1 !important;
}

.planes-catalog-card .pc-table tbody td {
  vertical-align: middle;
}

html:not(.theme-dark) .planes-catalog-card .pc-table__data-row td {
  border-bottom: 1px solid #f1f5f9 !important;
}

html.theme-dark .planes-catalog-card .pc-table__data-row td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.planes-catalog-card .pc-table__id {
  padding: 10px 12px 10px 14px !important;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

html:not(.theme-dark) .planes-catalog-card .pc-table__id {
  color: #64748b !important;
}

html.theme-dark .planes-catalog-card .pc-table__id {
  color: #94a3b8 !important;
}

.planes-catalog-card .pc-table__cell {
  padding: 10px 12px 10px 0 !important;
}

.planes-catalog-card .pc-table__actions {
  padding: 10px 14px 10px 0 !important;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}

/* Anula .glass-panel button + button / .btn-glass + .btn-glass (margin-left) que corría “Eliminar” a la derecha al hacer wrap */
.planes-catalog-card .pc-table__actions .btn-glass + .btn-glass,
.planes-catalog-card .pc-table__actions button + button {
  margin-left: 0 !important;
}

.planes-catalog-card .pc-table__actions .pc-table__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  max-width: 11rem;
  box-sizing: border-box;
}

.planes-catalog-card .pc-table__empty {
  text-align: center;
  padding: 28px 16px !important;
  font-size: 0.875rem;
}

html:not(.theme-dark) .planes-catalog-card .pc-table__empty {
  color: #64748b !important;
  background: linear-gradient(165deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.75) 100%);
  border-bottom: none !important;
}

html.theme-dark .planes-catalog-card .pc-table__empty {
  color: #94a3b8 !important;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: none !important;
}

html:not(.theme-dark) .planes-catalog-card .pc-table__new-row {
  background: rgba(124, 92, 255, 0.06) !important;
}

html:not(.theme-dark) .planes-catalog-card .pc-table__new-row td {
  border-bottom: 1px solid rgba(124, 92, 255, 0.18) !important;
}

html.theme-dark .planes-catalog-card .pc-table__new-row {
  background: rgba(255, 255, 255, 0.04) !important;
}

html:not(.theme-dark) .planes-catalog-card .pc-table__id--placeholder {
  color: #94a3b8 !important;
}

html.theme-dark .planes-catalog-card .pc-table__id--placeholder {
  color: #64748b !important;
}

.planes-catalog-card .pc-table__btn {
  padding: 7px 12px !important;
  border-radius: 10px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html:not(.theme-dark) .planes-catalog-card .pc-table__btn--save {
  background: linear-gradient(130deg, rgba(124, 92, 255, 0.92), rgba(95, 70, 230, 0.92)) !important;
  color: #fff !important;
  border: 1px solid rgba(95, 70, 230, 0.4) !important;
  box-shadow: 0 4px 14px rgba(124, 92, 255, 0.22);
}

html:not(.theme-dark) .planes-catalog-card .pc-table__btn--save:hover {
  filter: brightness(1.05);
}

html:not(.theme-dark) .planes-catalog-card .pc-table__btn--add {
  background: rgba(124, 92, 255, 0.14) !important;
  color: #5b4fcf !important;
  border: 1px solid rgba(124, 92, 255, 0.28) !important;
}

html:not(.theme-dark) .planes-catalog-card .pc-table__btn--add:hover {
  background: rgba(124, 92, 255, 0.2) !important;
}

html:not(.theme-dark) .planes-catalog-card .pc-table__btn--del {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
}

html:not(.theme-dark) .planes-catalog-card .pc-table__btn--del:hover {
  background: rgba(239, 68, 68, 0.16) !important;
}

html.theme-dark .planes-catalog-card .pc-table__btn--del {
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

.planes-catalog-hero__lead {
  margin-top: 0.5rem;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

html:not(.theme-dark) .planes-catalog-hero__lead {
  color: #64748b !important;
}

html.theme-dark .planes-catalog-hero__lead {
  color: #94a3b8 !important;
}

.planes-catalog-hero__code {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 6px;
}

html:not(.theme-dark) .planes-catalog-hero__code {
  color: #4338ca !important;
  background: rgba(124, 92, 255, 0.12);
  border: 1px solid rgba(124, 92, 255, 0.22);
}

html.theme-dark .planes-catalog-hero__code {
  color: #c4b5fd !important;
  background: rgba(124, 92, 255, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.25);
}

.planes-catalog-root__loading {
  font-size: 0.875rem;
}

html:not(.theme-dark) .planes-catalog-root__loading {
  color: #64748b !important;
}

html.theme-dark .planes-catalog-root__loading {
  color: #94a3b8 !important;
}

.planes-catalog-msg {
  font-size: 0.875rem;
}

html:not(.theme-dark) .planes-catalog-msg.planes-catalog-msg--warn {
  color: #b45309 !important;
}

html:not(.theme-dark) .planes-catalog-msg.planes-catalog-msg--error {
  color: #b91c1c !important;
}

html.theme-dark .planes-catalog-msg.planes-catalog-msg--warn {
  color: #fcd34d !important;
}

html.theme-dark .planes-catalog-msg.planes-catalog-msg--error {
  color: #fca5a5 !important;
}