/* Modern visual layer: shared tokens and lightweight component polish. */
:root {
  --brand-primary: #2563eb;
  --brand-primary-hover: #1d4ed8;
  --brand-primary-soft: #eff6ff;
  --color-bg: #f3f6fb;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-border: #dbe3ee;
  --color-border-subtle: #e8edf4;
  --text-primary: #172033;
  --text-secondary: #475569;
  --text-muted: #718096;
  --success: #15803d;
  --success-soft: #ecfdf3;
  --warning: #b45309;
  --warning-soft: #fff7ed;
  --danger: #c62828;
  --danger-soft: #fff1f2;
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, .04), 0 7px 20px rgba(15, 23, 42, .055);
  --shadow-raised: 0 12px 32px rgba(15, 23, 42, .11);
  --radius-lg: 1rem;
  --score-low: #dc2626;
  --score-mid: #b45309;
  --score-high: #15803d;
}

body.selvik-body {
  background: var(--color-bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

::selection { background: #bfdbfe; color: #172033; }

:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}

.topbar.navbar {
  min-height: var(--topbar-height);
  background: rgba(255, 255, 255, .98);
  border-color: var(--color-border-subtle);
  box-shadow: 0 1px 8px rgba(15, 23, 42, .045);
}

/* Wordmark nativo: limpio y legible, sin descargar una fuente externa. */
.brand-wordmark {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  color: #080d16;
  font-family: Manrope, "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1.78rem;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1;
  text-rendering: geometricPrecision;
}

.brand-logo {
  width: 2.26rem;
  height: 2.26rem;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(37, 99, 235, .16));
}

.topbar-actions { gap: .65rem !important; }
.topbar-preferences { display: inline-flex; align-items: center; gap: .35rem; }
.topbar-preferences .btn-icon { width: 2.35rem; height: 2.35rem; }

.topbar-location {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 2.35rem;
  padding: .35rem .65rem;
  color: #4b5c75;
  background: #f7f9fd;
  border: 1px solid #dce5f0;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.topbar-location .country-flag {
  width: 1.25rem;
  height: .82rem;
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: .08rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
  opacity: 1;
}

.country-flag--co { background: linear-gradient(#fcd116 0 50%, #003893 50% 75%, #ce1126 75%); }
.country-flag--ec { background: linear-gradient(#fcd116 0 50%, #034ea2 50% 75%, #ed1c24 75%); }
.country-flag--pe { background: linear-gradient(90deg, #d91023 0 33.333%, #fff 33.333% 66.666%, #d91023 66.666%); }
.country-flag--bo { background: linear-gradient(#d52b1e 0 33.333%, #f9e300 33.333% 66.666%, #007a33 66.666%); }

.listing-toolbar {
  background: rgba(255, 255, 255, .96);
}

@media (min-width: 992px) {
  .dashboard-shell > .card > .listing-toolbar {
    position: sticky;
    top: calc(var(--topbar-height) + .65rem);
    z-index: 4;
    box-shadow: none;
  }
}

/* Listados: una sola superficie; la tabla ocupa el ancho útil de su tarjeta. */
.dashboard-shell > .card > .card-body:has(> .table-responsive) {
  --listing-content-gutter: 1rem;
  padding-inline: var(--listing-content-gutter);
}

.dashboard-shell > .card > .card-body > .table-responsive {
  width: calc(100% + var(--listing-content-gutter, 1rem) + var(--listing-content-gutter, 1rem));
  max-width: none;
  margin-inline: calc(0px - var(--listing-content-gutter, 1rem));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.topbar-search {
  /* El input es la única superficie visible. Evita la caja dentro de caja. */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  transition: none;
}

.topbar-search form {
  width: 100%;
}

.topbar-search .form-control {
  height: 2.55rem;
  padding: .45rem 1rem;
  background: #f8fafc;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.topbar-search:focus-within {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.topbar-search:focus-within .form-control {
  background: #fff;
  border-color: #93b4f8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .11);
}

.sidebar {
  background: #fff;
  border-right: 1px solid var(--color-border-subtle);
  box-shadow: 4px 0 18px rgba(15, 23, 42, .035);
}

.sidebar-nav { padding: .8rem .65rem; }

.sidebar .nav-link {
  min-height: 2.8rem;
  margin: .12rem 0;
  border-radius: .75rem;
  color: #526078;
  font-weight: 550;
  transition: background-color .14s ease, color .14s ease, transform .14s ease;
}

.sidebar .nav-link:hover {
  color: #1d4ed8;
  background: #f5f8fd;
  transform: translateX(2px);
}

.sidebar .nav-link.active {
  color: #1d4ed8;
  background: #eaf2ff;
  box-shadow: inset 3px 0 #3b82f6;
}

.sidebar .nav-link i { color: inherit; }
.sidebar-footer { border-color: var(--color-border-subtle); }

.card {
  background: #fff;
  border-color: var(--color-border-subtle);
  box-shadow: var(--shadow-soft);
  overflow: clip;
}

.card-header {
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-color: var(--color-border-subtle);
  font-weight: 650;
}

.btn {
  border-radius: .68rem;
  font-weight: 600;
  transition: transform .12s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.btn-outline-primary { color: #1d4ed8; border-color: #8eb0f4; }

.btn-icon {
  color: #526078;
  background: #f5f7fb;
  border-color: #e7ecf3;
}

.btn-icon:hover { color: #1d4ed8; background: #eaf2ff; }

.form-control,
.form-select {
  color: var(--text-primary);
  background-color: #fff;
  border-color: #cfd9e6;
  border-radius: .68rem;
  min-height: 2.55rem;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.form-control:focus,
.form-select:focus {
  color: var(--text-primary);
  background-color: #fff;
  border-color: #7da4f5;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .11);
}

.table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); }
.table > :not(caption) > * > * { border-bottom-color: var(--color-border-subtle); }
.table thead th {
  color: #59677c;
  background: #f8fafc;
  border-bottom-width: 1px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #f5f8fd; }

.list-group-item,
.list-group-item-dark {
  color: var(--text-primary) !important;
  background: #fff !important;
  border-color: var(--color-border-subtle) !important;
}
.list-group-item-action:hover { background: #f6f9fd !important; }

.dropdown-menu,
.modal-content,
.search-modal-content,
.quote-cart-panel {
  color: var(--text-primary);
  background: #fff;
  border-color: var(--color-border);
  box-shadow: var(--shadow-raised);
}

.quote-cart-header,
.quote-cart-footer { background: #fff; border-color: var(--color-border-subtle); }
.quote-cart-client { background: #f8fafc; border-color: var(--color-border-subtle); }
.quote-cart-badge { box-shadow: 0 0 0 2px #fff; }

.badge { border-radius: 999px; font-weight: 650; }
.text-muted { color: var(--text-muted) !important; }

.alert { border: 1px solid transparent; border-radius: .82rem; }
.pagination .page-link { color: #315ea8; border-color: var(--color-border); }
.pagination .page-item.active .page-link { background: var(--brand-primary); border-color: var(--brand-primary); }

/* Clear, compact hierarchy shared by data-heavy operational screens. */
.dashboard-shell > .card > .card-header,
.dashboard-shell > .card > .card-body.border-bottom {
  padding-inline: clamp(1rem, 2vw, 1.5rem);
}
.card-title,
.dashboard-hero__title {
  letter-spacing: -.02em;
  font-weight: 720;
}
.catalog-filter-actions {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: .85rem;
}
[data-progressive-product-filters],
[data-progressive-client-filters] {
  padding: .15rem 0 .35rem;
}
[data-load-product-filters],
[data-load-client-filters] {
  min-height: 2.55rem;
  border-style: dashed;
}
.table-responsive {
  border-radius: .78rem;
}
.table tbody tr {
  transition: background-color .12s ease;
}
.metric-card__label,
.text-muted {
  letter-spacing: .005em;
}
.empty-state,
.alert {
  padding: 1rem 1.1rem;
}

.skeleton,
[data-loading-placeholder] {
  background: linear-gradient(90deg, #edf1f6 25%, #f7f9fc 50%, #edf1f6 75%);
  background-size: 200% 100%;
  animation: selvik-skeleton 1.25s ease-in-out infinite;
}
@keyframes selvik-skeleton { to { background-position: -200% 0; } }

.client-insights-placeholder { min-height: 6rem; }
.product-insights-placeholder { min-height: 6rem; }
.client-trend-bars { display: grid; gap: .55rem; }
.client-trend-row { display: grid; grid-template-columns: 5.5rem minmax(5rem, 1fr) 7rem; gap: .75rem; align-items: center; font-size: .82rem; }
.client-trend-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.client-trend-track { height: .55rem; overflow: hidden; border-radius: 999px; background: #edf2f8; }
.client-trend-track i { display: block; min-width: 2px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #2563eb); }
.client-insights-tabs { gap: .15rem; border: 0; overflow-x: auto; flex-wrap: nowrap; }
.client-insights-tabs .nav-link { white-space: nowrap; color: var(--text-secondary); border: 0; border-radius: .6rem .6rem 0 0; }
.client-insights-tabs .nav-link.active { color: #1d4ed8; background: #eff6ff; }
.client-opportunity { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; color: var(--text-primary); background: #f8fafc; border: 1px solid var(--color-border-subtle); border-radius: .7rem; }
.client-opportunity:hover { color: #1d4ed8; background: #eff6ff; }
body .btn-add-cart-detail {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #9ab8f4;
  border-radius: .68rem;
  font-weight: 650;
}
body .btn-add-cart-detail:hover { color: #fff; background: #2563eb; border-color: #2563eb; }
body .btn-add-cart-detail.in-cart { color: #fff; background: #15803d; border-color: #15803d; }

/* The client-insights tables carry financial data.  On a narrow screen they
   remain a compact, horizontally scrollable table instead of being converted
   into disconnected header/value blocks by generic mobile table rules. */
@media (max-width: 767px) {
  .client-insights-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }
  .client-insights-tabs .nav-item { flex: 0 0 auto; }
  .client-insights-tabs .nav-link { min-height: 2.8rem; }
  .client-insights-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .client-insights-table .table { width: max-content !important; min-width: 100% !important; }
  .client-insights-table .table thead { display: table-header-group !important; }
  .client-insights-table .table tbody { display: table-row-group !important; }
  .client-insights-table .table tr { display: table-row !important; margin: 0 !important; padding: 0 !important; }
  .client-insights-table .table th,
  .client-insights-table .table td {
    display: table-cell !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: .55rem .7rem !important;
    white-space: nowrap !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    vertical-align: middle !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .client-insights-table .table th { font-size: .73rem !important; }
  .client-insights-table .table td { font-size: .84rem !important; }
}

/* Una capa de acabado consistente para pantallas operativas, sin alterar su
   estructura: más aire, lectura más clara y estados interactivos discretos. */
.app-shell > :is(.container-fluid, .container, .products-shell, .dashboard-shell) {
  animation: selvik-enter .18s ease-out both;
}

.card > .card-header :is(h1, h2, h3, h4, h5, h6):first-child {
  color: #101d32;
}

.table tbody td { vertical-align: middle; }
.table tbody tr { position: relative; }
.table tbody tr:hover { box-shadow: inset 3px 0 0 #78a8ff; }

.status-badge { border: 1px solid currentColor; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.status-badge::before { width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; content: ""; opacity: .8; }

html[data-selvik-theme="dark"] {
  --color-bg: #0d1524;
  --color-surface: #121d2d;
  --color-surface-alt: #172437;
  --color-border: #2a3a50;
  --color-border-subtle: #223249;
  --text-primary: #e7eef9;
  --text-secondary: #b8c6da;
  --text-muted: #91a3bd;
}
html[data-selvik-theme="dark"] body.selvik-body,
html[data-selvik-theme="dark"] .sidebar,
html[data-selvik-theme="dark"] .topbar.navbar,
html[data-selvik-theme="dark"] .card,
html[data-selvik-theme="dark"] .quote-cart-panel,
html[data-selvik-theme="dark"] .modal-content { background: var(--color-surface); color: var(--text-primary); }
html[data-selvik-theme="dark"] .topbar.navbar { background: rgba(18, 29, 45, .98); }
html[data-selvik-theme="dark"] .card-header,
html[data-selvik-theme="dark"] .table thead th,
html[data-selvik-theme="dark"] .topbar-location,
html[data-selvik-theme="dark"] .topbar-search,
html[data-selvik-theme="dark"] .quote-cart-client { background: var(--color-surface-alt); color: var(--text-primary); }
html[data-selvik-theme="dark"] .form-control,
html[data-selvik-theme="dark"] .form-select { background: #0e1827; border-color: #31445d; color: var(--text-primary); }
html[data-selvik-theme="dark"] .brand-wordmark { color: #f5f8fd; }
html[data-selvik-theme="dark"] .listing-toolbar { background: rgba(18, 29, 45, .97); }
html[data-selvik-theme="dark"] .btn-icon { color: #b8c6da; background: #1a2a40; border-color: #31445d; }
html[data-selvik-theme="dark"] .btn-icon:hover { color: #fff; background: #233a5a; }
html[data-selvik-theme="dark"] .btn-outline-primary { color: #a9c5ff; border-color: #527ab8; }
html[data-selvik-theme="dark"] .btn-outline-secondary { color: #c1cede; border-color: #526176; }
html[data-selvik-theme="dark"] .btn-outline-success { color: #8fe0b0; border-color: #438f65; }
html[data-selvik-theme="dark"] .btn-outline-info { color: #8edcf0; border-color: #42899e; }
html[data-selvik-theme="dark"] .btn-outline-warning { color: #ffd27b; border-color: #a87c2d; }
html[data-selvik-theme="dark"] .btn-outline-danger { color: #ffacb3; border-color: #a95662; }
html[data-selvik-theme="dark"] .btn-secondary { background: #40516a; border-color: #40516a; }
html[data-selvik-theme="dark"] .btn-light,
html[data-selvik-theme="dark"] .bg-light,
html[data-selvik-theme="dark"] .bg-white { background-color: #1a293d !important; color: var(--text-primary) !important; }
html[data-selvik-theme="dark"] .text-dark,
html[data-selvik-theme="dark"] .text-body { color: var(--text-primary) !important; }
html[data-selvik-theme="dark"] .table,
html[data-selvik-theme="dark"] .table > :not(caption) > * > * { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: #2a3a50; color: var(--text-primary); }
html[data-selvik-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(148, 163, 184, .07); }
html[data-selvik-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(96, 165, 250, .12); }
html[data-selvik-theme="dark"] .table-light,
html[data-selvik-theme="dark"] .table-warning,
html[data-selvik-theme="dark"] .table-danger { --bs-table-color: var(--text-primary); }
html[data-selvik-theme="dark"] .list-group-item,
html[data-selvik-theme="dark"] .list-group-item-dark,
html[data-selvik-theme="dark"] .dropdown-menu,
html[data-selvik-theme="dark"] .search-modal-content { color: var(--text-primary) !important; background: #121d2d !important; border-color: #2a3a50 !important; }
html[data-selvik-theme="dark"] .list-group-item-action:hover { background: #1a2b42 !important; }
html[data-selvik-theme="dark"] .nav-tabs,
html[data-selvik-theme="dark"] .nav-tabs .nav-link { border-color: #2a3a50; color: #b8c6da; }
html[data-selvik-theme="dark"] .nav-tabs .nav-link.active { background: #1a293d; color: #e7eef9; }
html[data-selvik-theme="dark"] .pagination .page-link { color: #a9c5ff; background: #172437; border-color: #31445d; }
html[data-selvik-theme="dark"] .pagination .page-item.disabled .page-link { color: #718096; background: #121d2d; }
html[data-selvik-theme="dark"] .modal-header,
html[data-selvik-theme="dark"] .modal-footer { border-color: #2a3a50; }
html[data-selvik-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
html[data-selvik-theme="dark"] .empty-state,
html[data-selvik-theme="dark"] .quote-cart-empty { background: linear-gradient(145deg, #172437, #101a2a); border-color: #31445d; }
html[data-selvik-theme="dark"] .topbar-location { border-color: #31445d; }

.empty-state,
.quote-cart-empty {
  border: 1px dashed #c8d7ec;
  border-radius: .9rem;
  background: linear-gradient(145deg, #fbfdff, #f3f7fd);
}

.topbar-search .form-control::placeholder { color: #8390a4; }
.sidebar .nav-link.active i { filter: drop-shadow(0 2px 4px rgba(37, 99, 235, .2)); }

@keyframes selvik-enter {
  from { opacity: .01; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 767.98px) {
  :root { --topbar-height: 4.15rem; --radius-lg: .85rem; }
  .app-shell { padding: .85rem !important; }
  .dashboard-shell > .card > .card-body:has(> .table-responsive) { --listing-content-gutter: .6rem; }
  .topbar .container-fluid { gap: .45rem; }
  .brand-wordmark { font-size: 1.42rem; letter-spacing: .04em; }
  .brand-logo { width: 2rem; height: 2rem; }
  .topbar-location {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .topbar-location__label { display: none; }
  .topbar-location .country-flag { width: 1.32rem; height: .86rem; }
  .card { box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
  .client-trend-row { grid-template-columns: 4.5rem minmax(3rem, 1fr) 5.6rem; gap: .45rem; font-size: .72rem; }
  .btn:hover { transform: none; }
  .table-responsive { border-radius: .7rem; }
}

/* Preferencias en el menú lateral solo para la vista web móvil normal. */
html:not([data-lucas-viewer="lucas-app-12.45"]) .sidebar-mobile-preferences { display: none; }
html[data-lucas-viewer="lucas-app-12.45"] .sidebar-mobile-preferences { display: none !important; }
@media (max-width: 767.98px) {
  html:not([data-lucas-viewer="lucas-app-12.45"]) .sidebar-mobile-preferences {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    min-height: 3.8rem;
    margin: 0 .65rem;
    padding: .55rem 1.5rem;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  html:not([data-lucas-viewer="lucas-app-12.45"]) .sidebar-mobile-preferences .country-flag {
    display: grid;
    place-items: center;
    box-sizing: content-box;
    width: 1.25rem;
    height: .82rem;
    padding: .68rem .55rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: .75rem;
    background-clip: content-box;
  }
  html:not([data-lucas-viewer="lucas-app-12.45"]) .sidebar-mobile-preferences .btn-icon {
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: .8rem;
    background: var(--color-surface-alt);
    color: var(--text-secondary);
    box-shadow: none;
    font-size: 1.05rem;
  }
  html:not([data-lucas-viewer="lucas-app-12.45"]) .topbar-location,
  html:not([data-lucas-viewer="lucas-app-12.45"]) .topbar-preferences { display: none !important; }
}

@media (max-width: 479px) {
  .dashboard-shell > .card > .card-body:has(> .table-responsive) { --listing-content-gutter: .5rem; }
}