/* ============================================================
   CRM Pro — Estilos principales
   v1.0.0
   ============================================================ */

/* ---------- Variables CSS ---------- */
:root {
  --primary:        #2563EB;
  --primary-dark:   #1D4ED8;
  --primary-light:  #EFF6FF;
  --sidebar-bg:     #1E293B;
  --sidebar-hover:  #263548;
  --sidebar-active: #2563EB;
  --sidebar-text:   #94A3B8;
  --sidebar-text-active: #FFFFFF;
  --success:        #10B981;
  --warning:        #F59E0B;
  --danger:         #EF4444;
  --info:           #06B6D4;
  --purple:         #8B5CF6;
  --bg:             #F1F5F9;
  --card-bg:        #FFFFFF;
  --text:           #1E293B;
  --text-muted:     #64748B;
  --border:         #E2E8F0;
  --border-light:   #F1F5F9;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow:         0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-md:      0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.04);
  --shadow-lg:      0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.04);
  --radius-sm:      6px;
  --radius:         8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --sidebar-w:      256px;
  --topbar-h:       64px;
  --transition:     .2s ease;
  --font:           'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
html.modal-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.modal-open {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ---------- Tipografía ---------- */
h1 { font-size: 1.625rem; font-weight: 700; }
h2 { font-size: 1.375rem; font-weight: 600; }
h3 { font-size: 1.125rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

/* ---------- SIDEBAR ---------- */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform var(--transition);
  overflow-y: auto;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 32px; height: 32px;
  color: var(--primary);
  flex-shrink: 0;
}

.logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -.3px;
}

.sidebar-close { display: none; background: none; border: none; color: var(--sidebar-text); padding: 4px; }

.sidebar-nav { flex: 1; padding: 16px 12px; }

.sidebar-nav ul { display: flex; flex-direction: column; gap: 2px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-size: .9rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-link:hover { background: var(--sidebar-hover); color: #FFFFFF; text-decoration: none; }
.nav-link.active { background: var(--sidebar-active); color: var(--sidebar-text-active); }

.nav-separator {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 8px 0;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.sidebar-version { font-size: .75rem; color: rgba(255,255,255,.3); }

/* ---------- MAIN WRAPPER + TOPBAR ---------- */
.main-wrapper {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-h);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 50;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}

.topbar-left { display: flex; align-items: center; gap: 16px; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 16px; }

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px;
  border-radius: var(--radius-sm);
}
.hamburger:hover { background: var(--bg); color: var(--text); }
.hamburger svg { width: 20px; height: 20px; }

/* Búsqueda global */
.topbar-search {
  position: relative;
  flex: 1;
  max-width: 400px;
}
.topbar-search svg {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-muted);
}
.topbar-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color var(--transition);
}
.topbar-search input:focus { outline: none; border-color: var(--primary); background: #fff; }

.password-presspeek {
  position: relative;
}

.password-presspeek .form-control {
  padding-right: 46px;
}

.password-presspeek-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.password-presspeek-btn:hover,
.password-presspeek-btn:focus-visible {
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.password-presspeek-btn svg {
  width: 16px;
  height: 16px;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
.search-dropdown.show { display: block; }
.search-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
}
.search-item:hover { background: var(--primary-light); }
.search-item:last-child { border-bottom: none; }
.search-item-name { font-weight: 500; color: var(--text); }
.search-item-sub { color: var(--text-muted); font-size: .8rem; }
.client-identity-main {
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.client-identity-sub {
  margin-top: 2px;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Selector de idioma */

/* Menú usuario */
.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius);
  position: relative;
  transition: background var(--transition);
}
.user-menu:hover { background: var(--bg); }
.user-menu svg { width: 14px; height: 14px; color: var(--text-muted); }

.user-avatar {
  width: 32px; height: 32px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .875rem;
  flex-shrink: 0;
}

.user-name { font-size: .875rem; font-weight: 500; color: var(--text); }

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 200;
  overflow: hidden;
}
.user-dropdown.hidden { display: none; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: .875rem;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
}
.dropdown-item:hover { background: var(--bg); text-decoration: none; }
.dropdown-item svg { width: 15px; height: 15px; }
.dropdown-item.text-danger { color: var(--danger); }
.dropdown-divider { height: 1px; background: var(--border); margin: .25rem 0; }

/* ---------- CONTENIDO PRINCIPAL ---------- */
.main-content {
  flex: 1;
  padding: 28px 28px;
  max-width: 1400px;
  width: 100%;
}

.loading-full {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
}

/* ---------- SPINNER ---------- */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: .875rem;
  padding: 24px;
  justify-content: center;
}
.loading-inline .spinner { width: 20px; height: 20px; border-width: 2px; }

/* ---------- CARDS ---------- */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}

.card-header h3 { font-size: 1rem; color: var(--text); }
.card-body { padding: 20px; }

/* ---------- KPI CARDS ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.kpi-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-icon.blue   { background: #EFF6FF; color: var(--primary); }
.kpi-icon.green  { background: #ECFDF5; color: var(--success); }
.kpi-icon.yellow { background: #FFFBEB; color: var(--warning); }
.kpi-icon.purple { background: #F5F3FF; color: var(--purple); }
.kpi-icon.red    { background: #FEF2F2; color: var(--danger); }
.kpi-icon.cyan   { background: #ECFEFF; color: var(--info); }

.kpi-data { flex: 1; min-width: 0; }
.kpi-value {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.kpi-label { font-size: .8125rem; color: var(--text-muted); }

/* ---------- GRIDS ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

/* ---------- VIEW HEADER ---------- */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.view-header h1 { font-size: 1.5rem; }
.view-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- BOTONES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  border: 1.5px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn:hover { text-decoration: none; opacity: .9; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--primary);   color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-success   { background: var(--success);   color: #fff; border-color: var(--success); }
.btn-danger    { background: var(--danger);    color: #fff; border-color: var(--danger); }
.btn-warning   { background: var(--warning);   color: #fff; border-color: var(--warning); }
.btn-secondary { background: var(--bg); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-outline   { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-ghost     { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-sm { padding: 6px 11px; font-size: .8125rem; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-icon { padding: 7px; }
.btn-icon svg { width: 16px; height: 16px; }

/* ---------- BADGES ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid rgba(15, 23, 42, .12);
}
.badge-success   { background: #DCFCE7; color: #166534; }
.badge-warning   { background: #FEF9C3; color: #854D0E; }
.badge-danger    { background: #FEE2E2; color: #991B1B; }
.badge-secondary { background: #F1F5F9; color: #475569; }
.badge-info      { background: #CFFAFE; color: #164E63; }
.badge-purple    { background: #F3E8FF; color: #6B21A8; }
.badge-primary   { background: var(--primary-light); color: var(--primary-dark); }

/* ---------- FORMULARIOS ---------- */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--text);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.form-control::placeholder { color: #CBD5E1; }
textarea.form-control { min-height: 90px; resize: vertical; }
select.form-control { cursor: pointer; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }

.form-hint { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: .8rem; color: var(--danger); margin-top: 4px; }
.form-control.is-invalid { border-color: var(--danger); }

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.form-check input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
.form-check-label { font-size: .875rem; color: var(--text); }

/* ---------- TABLAS ---------- */
.table-responsive { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.table th {
  text-align: left;
  padding: 11px 14px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  color: var(--text);
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: #F8FAFF; }
.table .actions { display: flex; gap: 4px; align-items: center; }

/* ---------- FILTROS ---------- */
.filters-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.filters-bar .form-control {
  min-width: 140px;
  max-width: 200px;
  padding: 7px 10px;
  font-size: .85rem;
}
.filter-search {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  position: relative;
}
.filter-search svg {
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-muted);
}
.filter-search input {
  width: 100%;
  padding: 7px 10px 7px 29px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
}
.filter-search input:focus { outline: none; border-color: var(--primary); }

/* ---------- PAGINACIÓN ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  font-size: .8125rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 8px;
}
.pagination-pages { display: flex; gap: 4px; }
.pagination-pages button {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: .8rem;
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}
.pagination-pages button:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.pagination-pages button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination-pages button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- TABS ---------- */
.tabs { border-bottom: 2px solid var(--border); display: flex; gap: 0; overflow-x: auto; }
.tab-btn {
  padding: 12px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tab-btn svg { width: 15px; height: 15px; }
.tab-btn:hover { color: var(--primary); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-content { display: none; padding: 20px 0; }
.tab-content.active { display: block; }

/* ---------- MODAL ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
  backdrop-filter: blur(2px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-overlay.hidden { display: none; }

.modal-container {
  background: #fff;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-lg);
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity:0; transform:scale(.95) translateY(-10px); } }

.modal-container.modal-lg { max-width: 820px; }
.modal-container.modal-sm { max-width: 440px; }

/* Alias used by planning modals */
.modal-content {
  background: var(--card-bg, #fff);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: modalIn .2s ease;
  position: relative;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.modal-header h3 { font-size: 1.075rem; }
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-close svg { width: 18px; height: 18px; display: block; }
.modal-body {
  padding: 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* ---------- TOAST ---------- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: .875rem;
  box-shadow: var(--shadow-lg);
  animation: toastIn .3s ease;
  pointer-events: all;
  min-width: 240px;
  max-width: 360px;
}
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
.toast.warning { background: var(--warning); }
@keyframes toastIn { from { opacity:0; transform: translateX(20px); } }
@keyframes toastOut { to   { opacity:0; transform: translateX(20px); } }
.toast.removing { animation: toastOut .3s ease forwards; }

/* ---------- SCORE / RATING ---------- */
.score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.score-label { font-size: .8rem; color: var(--text-muted); width: 160px; flex-shrink: 0; }
.score-track {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.score-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s ease;
}
.score-num { font-size: .875rem; font-weight: 600; width: 28px; text-align: right; }

.score-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.score-input-row label { font-size: .875rem; color: var(--text); width: 180px; flex-shrink: 0; }
.score-input-row input[type=range] { flex: 1; cursor: pointer; accent-color: var(--primary); }
.score-input-row .score-display {
  width: 36px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}

/* ---------- MAPA ---------- */
.map-container {
  height: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.map-full {
  height: calc(100vh - var(--topbar-h) - 120px);
  min-height: 400px;
}
.map-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  align-items: center;
}

.map-client-marker-wrap {
  position: relative;
  width: 32px;
  height: 32px;
}

.map-client-marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  border: 2px solid #fff;
}

.map-client-marker-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f59e0b;
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, .22);
}

.map-client-marker-badge.is-overdue {
  background: #ef4444;
}

.map-client-marker-badge.is-pending {
  background: #f59e0b;
}

/* ---------- TIMELINE (interacciones) ---------- */
.timeline { padding: 0; }
.timeline-item {
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-item:last-child::before { display: none; }
.timeline-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary-light);
  color: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--border);
}
.timeline-icon svg { width: 15px; height: 15px; }
.timeline-body { flex: 1; padding-top: 2px; }
.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.timeline-type { font-weight: 600; font-size: .875rem; }
.timeline-date { font-size: .8rem; color: var(--text-muted); }
.timeline-text { font-size: .875rem; color: var(--text-muted); line-height: 1.5; }
.timeline-next {
  margin-top: 6px;
  padding: 8px 10px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  color: #92400E;
  display: flex;
  align-items: center;
  gap: 6px;
}
.timeline-next svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---------- NOTAS ---------- */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.note-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px;
  border: 1px solid var(--border);
  border-left: 4px solid;
  transition: box-shadow var(--transition);
}
.note-card:hover { box-shadow: var(--shadow); }
.note-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.note-cat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.note-cat svg { width: 13px; height: 13px; }
.note-title { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.note-body { font-size: .8375rem; color: var(--text-muted); line-height: 1.5; }
.note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: .75rem;
  color: var(--text-muted);
}
.note-important { color: var(--warning); }

/* ---------- CHART CONTAINERS ---------- */
.chart-container { position: relative; padding: 8px; }
.chart-container canvas { max-height: 300px; width: 100% !important; }

/* ---------- EMPTY STATE ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  color: var(--text-muted);
  text-align: center;
  gap: 12px;
}
.empty-state svg { width: 48px; height: 48px; opacity: .3; }
.empty-state h4 { font-size: 1rem; color: var(--text); }
.empty-state p { font-size: .875rem; max-width: 300px; line-height: 1.5; }

/* ---------- SIDEBAR OVERLAY ---------- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 99;
}

/* ---------- AVATAR de cliente ---------- */
.client-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .875rem;
  flex-shrink: 0;
}
.client-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.client-avatar.lg { width: 56px; height: 56px; font-size: 1.25rem; }
.client-avatar.xl { width: 72px; height: 72px; font-size: 1.5rem; border-radius: var(--radius-lg); }
.client-type-floating {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
}

/* ---------- FICHA DE CLIENTE ---------- */
.client-hero {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.client-hero-info { flex: 1; min-width: 200px; }
.client-hero-name { font-size: 1.375rem; font-weight: 700; margin-bottom: 2px; }
.client-hero-company { color: var(--text-muted); font-size: .9rem; margin-bottom: 10px; }
.client-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .8125rem;
  color: var(--text-muted);
}
.client-hero-meta span { display: flex; align-items: center; gap: 4px; }
.client-hero-meta svg { width: 13px; height: 13px; }
.client-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }

.client-form-layout {
  display: grid;
  gap: 18px;
}
.client-form-section {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
}
.client-form-section.personal { box-shadow: inset 0 1px 0 rgba(59, 130, 246, .10); }
.client-form-section.commercial { box-shadow: inset 0 1px 0 rgba(245, 158, 11, .12); }
.client-form-section.activity { box-shadow: inset 0 1px 0 rgba(16, 185, 129, .12); }
.client-form-section.contacts { box-shadow: inset 0 1px 0 rgba(14, 116, 144, .12); }
.client-form-section.notes { box-shadow: inset 0 1px 0 rgba(99, 102, 241, .10); }
.client-form-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.client-form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: .95rem;
  font-weight: 700;
}
.client-form-section-title svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}
.client-form-section-head .client-form-section-title {
  margin-bottom: 0;
}
.client-inline-help {
  margin: 0 0 14px;
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.client-edit-contacts-list {
  display: grid;
  gap: 10px;
}
.client-edit-contacts-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--card-bg));
}
.client-edit-contacts-empty svg,
.client-edit-contacts-empty i {
  width: 16px;
  height: 16px;
}
.client-edit-contact-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 15px;
  background: color-mix(in srgb, var(--card-bg) 92%, white);
}
.client-edit-contact-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.client-edit-contact-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}
.client-edit-contact-meta {
  margin-top: 6px;
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.client-edit-contact-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.client-edit-contact-editor {
  margin-top: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  background: color-mix(in srgb, var(--primary-light) 46%, var(--card-bg));
}
.client-edit-contact-editor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.client-edit-contact-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.client-type-select .form-control {
  font-weight: 700;
}
.client-type-inline {
  min-width: 30px;
  justify-content: center;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.detail-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  padding: 18px;
}
.detail-panel-head {
  margin-bottom: 14px;
}
.detail-panel-head h4 {
  margin: 0;
  font-size: .98rem;
}
.detail-panel-head p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: .825rem;
  line-height: 1.5;
}
.detail-list {
  display: grid;
  gap: 10px;
}
.detail-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid rgba(148, 163, 184, .16);
}
.detail-item:first-child {
  border-top: 0;
  padding-top: 0;
}
.detail-label {
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 600;
}
.detail-value {
  font-size: .9rem;
  min-width: 0;
  word-break: break-word;
}
.detail-value .badge,
.detail-value code {
  vertical-align: middle;
}
.detail-code {
  font-size: .78rem;
}
.detail-zone {
  display: inline-flex;
  align-items: center;
}
.detail-note-block {
  color: var(--text);
  font-size: .9rem;
  line-height: 1.7;
}
.detail-empty {
  color: var(--text-muted);
  font-size: .85rem;
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 14px;
  background: rgba(248, 250, 252, .75);
}

/* ====================================================
   Backups — Professional Enterprise Design
   ==================================================== */

#view-backup .page-header-minimal {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

#view-backup .backup-grid-pro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 36px;
  align-items: start;
}

#view-backup .backup-side-pro {
  display: grid;
  gap: 20px;
  align-content: start;
}

/* Data Table Admin */
#view-backup .table-admin {
  width: 100%;
  border-collapse: collapse;
}
#view-backup .table-admin th {
  padding: 14px 20px;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 20%, transparent);
}
#view-backup .table-admin td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  font-size: .88rem;
  vertical-align: middle;
}
#view-backup .table-admin tr:last-child td { border-bottom: none; }
#view-backup .table-admin tr:hover td { background: color-mix(in srgb, var(--surface-soft) 40%, transparent); }

#view-backup .table-admin th:nth-child(2),
#view-backup .table-admin td:nth-child(2),
#view-backup .table-admin th:nth-child(3),
#view-backup .table-admin td:nth-child(3),
#view-backup .table-admin th:nth-child(4),
#view-backup .table-admin td:nth-child(4) {
  white-space: nowrap;
}

#view-backup .table-admin th:nth-child(1),
#view-backup .table-admin td:nth-child(1) { width: auto; }
#view-backup .table-admin th:nth-child(2),
#view-backup .table-admin td:nth-child(2) { width: 240px; }
#view-backup .table-admin th:nth-child(3),
#view-backup .table-admin td:nth-child(3) { width: 120px; }
#view-backup .table-admin th:nth-child(4),
#view-backup .table-admin td:nth-child(4) { width: 132px; }

#view-backup .table-admin th:last-child,
#view-backup .table-admin td:last-child {
  text-align: right;
}

#view-backup .cell-filename { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--text); }
#view-backup .cell-filename i { width: 16px; height: 16px; color: var(--primary); }

#view-backup .btn-group-admin { display: flex; justify-content: flex-end; gap: 6px; min-width: 120px; }
#view-backup .btn-icon-admin {
  width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
#view-backup .btn-icon-admin:hover { background: var(--surface-soft); color: var(--primary); }
#view-backup .btn-icon-admin.btn-icon-danger:hover { background: #fee2e2; color: #dc2626; }
#view-backup .btn-icon-admin i { width: 15px; height: 15px; }

/* Sidebar Tools */
#view-backup .backup-tool-card { border-top: 3px solid var(--primary); }
#view-backup .backup-info-card-pro { background: var(--surface-soft); border: 1px solid var(--border); }

#view-backup .card-header-pro {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#view-backup .card-header-pro h3 { font-size: .95rem; font-weight: 700; margin: 0; }
#view-backup .card-title-group { display: flex; align-items: center; gap: 10px; }
#view-backup .card-title-group i { width: 18px; height: 18px; color: var(--primary); }

#view-backup .card-body-pro { padding: 20px; }
#view-backup .text-muted-pro { font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; }

/* Upload Zone */
#view-backup .upload-dropzone {
  border: 2px dashed var(--border); border-radius: 12px; padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; transition: all .2s; background: var(--card-bg); margin-bottom: 16px;
}
#view-backup .upload-dropzone:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 4%, transparent); }
#view-backup .upload-dropzone i { width: 28px; height: 28px; color: var(--text-muted); }
#view-backup .upload-dropzone span { font-size: .8rem; font-weight: 600; color: var(--text-muted); text-align: center; }

#view-backup .restore-alert {
  display: flex; gap: 12px; padding: 12px 14px; background: #fff7ed; border: 1px solid #ffedd5;
  border-radius: 10px; margin-bottom: 16px; color: #9a3412; font-size: .78rem; line-height: 1.4;
}
#view-backup .restore-alert i { width: 16px; height: 16px; flex-shrink: 0; }

#view-backup .info-list-pro { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
#view-backup .info-list-pro li { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--text); }
#view-backup .info-list-pro li i { width: 14px; height: 14px; color: var(--success); }

/* States */
#view-backup .loading-state-pro,
#view-backup .empty-state-pro {
  padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#view-backup .loading-state-pro span { font-size: .85rem; color: var(--text-muted); }
#view-backup .empty-state-pro i { width: 40px; height: 40px; color: var(--border); }
#view-backup .empty-state-pro p { font-size: .88rem; color: var(--text-muted); margin: 0; }

/* Reauth Modal Pro */
.reauth-modal-form { padding: 8px 12px; text-align: center; }
.reauth-header { margin-bottom: 24px; }
.reauth-header i { width: 48px; height: 48px; color: var(--primary); margin-bottom: 16px; opacity: .8; }
.reauth-header h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.reauth-header p { color: var(--text-muted); font-size: .9rem; }
.modal-footer-pro { display: flex; gap: 12px; justify-content: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-light); }

/* Responsive Backups Pro */
@media (max-width: 1024px) {
  #view-backup .backup-grid-pro { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #view-backup .table-admin thead { display: none; }
  #view-backup .table-admin td { display: block; padding: 10px 16px; border: none; }
  #view-backup .cell-filename { margin-bottom: 4px; }
  #view-backup .btn-group-admin { justify-content: flex-start; margin-top: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  .sidebar {
    width: 260px;
    transform: translateX(-100%);
    z-index: 101;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-close { display: flex; }
  .sidebar-overlay.open { display: block; }

  .main-wrapper { margin-left: 0; }

  .hamburger { display: flex; }

  .main-content { padding: 16px; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }

  .form-grid-2 { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .backup-grid { grid-template-columns: 1fr; }

  .topbar { padding: 0 14px; }
  .topbar-search { max-width: none; }
  .user-name { display: none; }
  .topbar-right { gap: 10px; }
  .view-header { flex-direction: column; align-items: flex-start; }

  .modal-container { margin: 0; max-height: 95vh; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-container { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }

  .client-hero { flex-direction: column; }
  .client-hero-actions { width: 100%; }
  .detail-item { grid-template-columns: 1fr; gap: 4px; }
  .backup-row { flex-direction: column; align-items: flex-start; }
  .backup-panel-head { flex-direction: column; }

  .filters-bar { flex-direction: column; align-items: stretch; }
  .filters-bar .form-control { max-width: none; }
  .filter-search { max-width: none; }

  .table th, .table td { padding: 9px 10px; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .notes-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.25rem; }
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }

/* ---------- MISC ---------- */
.text-muted    { color: var(--text-muted) !important; }
.text-danger   { color: var(--danger) !important; }
.text-success  { color: var(--success) !important; }
.text-warning  { color: var(--warning) !important; }
.text-primary  { color: var(--primary) !important; }
.fw-bold       { font-weight: 700 !important; }
.fw-semibold   { font-weight: 600 !important; }
.fs-sm         { font-size: .8125rem !important; }
.d-flex        { display: flex; }
.align-center  { align-items: center; }
.gap-sm        { gap: 8px; }
.gap-md        { gap: 16px; }
.mt-sm         { margin-top: 8px; }
.mt-md         { margin-top: 16px; }
.mt-lg         { margin-top: 24px; }
.mb-md         { margin-bottom: 16px; }
.hidden        { display: none !important; }
.w-100         { width: 100%; }
.divider       { height: 1px; background: var(--border); margin: 16px 0; }

/* Leaflet popup override */
.leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.leaflet-popup-content { margin: 12px 14px; font-family: var(--font); font-size: .875rem; }
.popup-name { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.popup-subname { color: var(--text-muted); font-size: .78rem; margin-bottom: 4px; }
.popup-info { color: var(--text-muted); font-size: .8rem; }
.popup-btn { display: inline-block; margin-top: 8px; padding: 5px 10px; background: var(--primary); color: #fff; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 500; cursor: pointer; }
.popup-btn:hover { background: var(--primary-dark); text-decoration: none; }

/* ---------- SUITEREST REFRESH ---------- */
:root {
  --primary: #1f6f78;
  --primary-dark: #174f55;
  --primary-light: #e8f6f4;
  --accent: #c96f4a;
  --accent-wash: #f9ede7;
  --sidebar-bg: linear-gradient(180deg, #13363c 0%, #0e252b 100%);
  --sidebar-hover: rgba(255,255,255,.08);
  --sidebar-active: rgba(201,111,74,.18);
  --sidebar-text: rgba(235,245,244,.78);
  --bg: linear-gradient(180deg, #f5f0e8 0%, #fbf8f3 38%, #f6f7f9 100%);
  --card-bg: rgba(255,255,255,.88);
  --text: #17313a;
  --text-muted: #60757b;
  --border: rgba(23,49,58,.10);
  --border-light: rgba(23,49,58,.06);
  --shadow-sm: 0 8px 24px rgba(17, 42, 48, .06);
  --shadow: 0 14px 40px rgba(17, 42, 48, .08);
  --shadow-md: 0 18px 48px rgba(17, 42, 48, .12);
  --shadow-lg: 0 28px 70px rgba(17, 42, 48, .18);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --font: 'Manrope', 'Segoe UI', sans-serif;
}

body {
  background: var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

h1, h2, .logo-text, .hospitality-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -.03em;
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(255,255,255,.06);
}

.logo-lockup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-subtext {
  font-size: .72rem;
  color: rgba(255,255,255,.58);
}

.logo-icon {
  color: #f2c078;
}

.sidebar-nav {
  padding-top: 22px;
}

.nav-link {
  border: 1px solid transparent;
  padding: 12px 14px;
}

.nav-link.active {
  border-color: rgba(201,111,74,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-tip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font-size: .78rem;
}

.sidebar-tip strong {
  color: #fff;
  font-size: .82rem;
}

.topbar {
  margin: 16px 18px 0;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-sm);
}

.main-wrapper {
  position: relative;
}

.main-content {
  padding: 26px 28px 36px;
}

.workspace-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .82rem;
  font-weight: 700;
}

.workspace-pill svg {
  width: 14px;
  height: 14px;
}

.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.user-role {
  font-size: .72rem;
  color: var(--text-muted);
}

.card, .kpi-card, .client-hero, .note-card {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.btn {
  border-radius: 999px;
  font-weight: 700;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #2f8f97 100%);
  border-color: transparent;
}

.btn-secondary {
  background: rgba(255,255,255,.75);
}

.client-avatar {
  background: linear-gradient(135deg, #c96f4a 0%, #1f6f78 100%);
}

.kpi-card {
  padding: 22px;
}

.kpi-icon {
  border-radius: 16px;
}

.hospitality-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
  gap: 18px;
  padding: 28px;
  margin-bottom: 22px;
  background:
    radial-gradient(circle at top right, rgba(201,111,74,.18), transparent 28%),
    linear-gradient(135deg, rgba(22,79,85,.96) 0%, rgba(31,111,120,.94) 46%, rgba(201,111,74,.92) 100%);
  color: #fff;
  overflow: hidden;
}

.hospitality-hero-copy p,
.hero-aside-card span {
  color: rgba(255,255,255,.82);
}

.hospitality-hero h1 {
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.02;
  margin-bottom: 12px;
}

.section-kicker,
.hero-aside-label,
.mini-stat-label {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hospitality-hero .btn-secondary {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}

.hospitality-hero-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-aside-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.14);
}

.hero-aside-card.soft {
  background: rgba(8,24,28,.18);
}

.section-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 18px;
}

.section-banner h2 {
  margin-bottom: 8px;
  font-size: 1.8rem;
}

.section-banner p {
  color: var(--text-muted);
  max-width: 720px;
}

.section-banner-side {
  flex-shrink: 0;
}

.mini-stat {
  min-width: 220px;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--primary-light);
  color: var(--primary-dark);
}

.mini-stat strong {
  display: block;
  font-size: .95rem;
}

.filters-bar.card {
  background: rgba(255,255,255,.72);
}

.table th {
  background: #f7f3ec;
  color: #6a7b81;
}

.table tbody tr:hover {
  background: #fcfbf8;
}

.empty-state {
  padding: 68px 26px;
}

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

@media (max-width: 768px) {
  .topbar {
    margin: 10px 10px 0;
    border-radius: 18px;
  }

  .main-content {
    overflow-x: hidden;
  }

  .workspace-pill,
  .logo-subtext,
  .sidebar-tip,
  .user-role {
    display: none;
  }

  .section-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .tabs {
    padding-bottom: 4px;
  }
}

/* ---------- Modern polish override ---------- */
:root {
  --primary: #0f766e;
  --primary-dark: #115e59;
  --primary-light: #ecfeff;
  --accent: #2563eb;
  --accent-wash: rgba(37, 99, 235, 0.08);
  --sidebar-bg: #0f172a;
  --sidebar-hover: rgba(148, 163, 184, 0.12);
  --sidebar-active: linear-gradient(135deg, #0f766e 0%, #2563eb 100%);
  --bg: #f5f7fb;
  --card-bg: rgba(255, 255, 255, 0.96);
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #dbe4ee;
  --border-light: #edf2f7;
  --shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 18px 44px rgba(15, 23, 42, 0.1);
  --font: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}

html,
body {
  overflow-x: clip;
}

body {
  background:
    radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 24%),
    linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
  color: var(--text);
}

h1,
h2,
.logo-text,
.hospitality-hero h1,
.login-logo h1 {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  letter-spacing: -0.03em;
}

.sidebar {
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.16), transparent 30%),
    #0f172a;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
}

.nav-link {
  border: 1px solid transparent;
  border-radius: 16px;
}

.nav-link.active {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.24) 0%, rgba(37, 99, 235, 0.26) 100%);
  border-color: rgba(96, 165, 250, 0.18);
}

.topbar {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.topbar-search {
  max-width: 560px;
}

.topbar-search input,
.form-control,
.form-input,
textarea {
  border-radius: 16px;
  border-color: #d7e0ea;
  background: rgba(255, 255, 255, 0.92);
}

.topbar-search input:focus,
.form-control:focus,
.form-input:focus,
textarea:focus {
  border-color: rgba(15, 118, 110, 0.7);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.card,
.kpi-card,
.client-hero,
.note-card,
.section-banner {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}

.btn {
  min-height: 42px;
  padding-inline: 16px;
}

.btn-primary {
  background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%);
}

.btn-secondary,
.btn-ghost,
.btn-outline {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(148, 163, 184, 0.22);
}

.hospitality-hero {
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.18), transparent 22%),
    radial-gradient(circle at left bottom, rgba(37, 99, 235, 0.24), transparent 28%),
    linear-gradient(135deg, #0f172a 0%, #12324b 45%, #0f766e 100%);
  border: none;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18);
}

.section-kicker,
.hero-aside-label,
.mini-stat-label {
  background: rgba(255, 255, 255, 0.12);
}

.section-banner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.82) 100%);
}

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

.table {
  min-width: 760px;
}

.tabs {
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab-btn {
  flex-shrink: 0;
  border-radius: 14px 14px 0 0;
}

.chart-container {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.chart-container canvas {
  width: 100% !important;
  max-width: 100%;
}

@media (max-width: 980px) {
  .main-content {
    padding: 18px 14px 28px;
  }

  .grid-2,
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr !important;
  }

  .view-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .topbar {
    padding-inline: 14px;
  }

  .topbar-search {
    max-width: none;
  }

  .main-wrapper {
    margin-left: 0;
  }

  .card,
  .kpi-card,
  .client-hero,
  .section-banner {
    border-radius: 20px;
  }

  .workspace-pill,
  .user-meta,
  .sidebar-tip,
  .logo-subtext {
    display: none;
  }
}

/* ---------- Clean UI override ---------- */
:root {
  --primary: #0f172a;
  --primary-dark: #020617;
  --primary-light: #eef2ff;
  --accent: #0f766e;
  --accent-wash: rgba(15, 118, 110, 0.08);
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f8fafc;
  --sidebar-text: #475569;
  --sidebar-text-active: #0f172a;
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 16px 38px rgba(15, 23, 42, 0.08);
}

body {
  background: linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
}

.sidebar {
  background: rgba(255, 255, 255, 0.96);
  border-right: 1px solid var(--border);
  box-shadow: none;
}

.sidebar-header,
.sidebar-footer {
  border-color: var(--border);
}

.logo-icon {
  color: var(--accent);
}

.logo-text,
.sidebar-version,
.sidebar-tip strong {
  color: var(--text);
}

.logo-subtext,
.sidebar-tip,
.sidebar-version {
  color: var(--text-muted);
}

.nav-link {
  color: var(--sidebar-text);
}

.nav-link:hover {
  background: var(--sidebar-hover);
  color: var(--text);
}

.nav-link.active {
  background: #eff6ff;
  color: var(--text);
  border-color: #dbeafe;
  box-shadow: inset 0 0 0 1px #dbeafe;
}

.topbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: none;
}

.workspace-pill {
  background: #ecfeff;
  color: var(--accent);
}

.card,
.kpi-card,
.client-hero,
.note-card,
.section-banner {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.btn-primary {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.btn-secondary,
.btn-ghost,
.btn-outline {
  background: #ffffff;
}

.client-avatar {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

.hospitality-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.hospitality-hero-copy p,
.hero-aside-card span,
.hero-aside-card strong,
.section-kicker,
.hero-aside-label,
.mini-stat-label {
  color: var(--text-muted);
}

.section-kicker,
.hero-aside-label,
.mini-stat-label {
  background: #f1f5f9;
}

.hero-aside-card,
.hero-aside-card.soft,
.mini-stat {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
}

.table th {
  background: #f8fafc;
  color: #475569;
}

.table tbody tr:hover {
  background: #f8fafc;
}

/* ---------- SaaS layout pass ---------- */
.ranking-list {
  display: flex;
  flex-direction: column;
}

.ranking-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 130px 140px;
  gap: 12px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ranking-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 130px 140px;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  color: inherit;
}

.ranking-row:last-child {
  border-bottom: none;
}

.ranking-row:hover {
  background: #faf7ff;
  text-decoration: none;
}

.ranking-account {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ranking-copy,
.mobile-ranking-copy {
  min-width: 0;
  flex: 1;
}

.ranking-copy strong,
.mobile-ranking-copy strong {
  display: block;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranking-copy span,
.mobile-ranking-copy span {
  display: block;
  font-size: .86rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranking-zone,
.ranking-value {
  font-size: .9rem;
  color: var(--text);
}

.ranking-value {
  font-weight: 800;
  text-align: right;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

.mobile-ranking-list {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.mobile-ranking-card {
  display: block;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: inherit;
}

.mobile-ranking-card:hover {
  text-decoration: none;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: #faf7ff;
}

.mobile-ranking-head,
.mobile-ranking-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-ranking-head {
  margin-bottom: 12px;
}

.mobile-ranking-index {
  font-size: .78rem;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: .05em;
}

.mobile-ranking-score {
  font-size: .8rem;
  color: var(--text-muted);
}

.mobile-ranking-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mobile-ranking-meta {
  color: var(--text-muted);
  font-size: .82rem;
}

.mobile-ranking-value {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

:root {
  --primary: #6d2c91;
  --primary-dark: #4f1e6f;
  --primary-light: #f6efff;
  --accent: #8b5cf6;
  --accent-wash: rgba(139, 92, 246, 0.1);
}

body {
  background: #f5f7fb;
}

.sidebar {
  background: linear-gradient(180deg, #5f256f 0%, #3f164c 100%);
  border-right: none;
}

.sidebar-header,
.sidebar-footer {
  border-color: rgba(255, 255, 255, 0.08);
}

.logo-icon,
.logo-text,
.sidebar-tip strong,
.sidebar-version {
  color: #fff;
}

.logo-subtext,
.sidebar-tip,
.sidebar-version {
  color: rgba(255, 255, 255, 0.72);
}

.nav-link {
  color: rgba(255, 255, 255, 0.74);
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.topbar {
  background: #ffffff;
  border-color: #eceff5;
}

.workspace-pill {
  background: #f6efff;
  color: #6d2c91;
}

.btn-primary {
  background: linear-gradient(135deg, #6d2c91 0%, #8b5cf6 100%);
}

.client-avatar {
  background: linear-gradient(135deg, #cf7b57 0%, #53707a 100%);
}

.hospitality-hero {
  background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
}

@media (max-width: 768px) {
  #top-clients-report .desktop-only {
    display: none !important;
  }

  #top-clients-report .mobile-only {
    display: block !important;
  }

  .ranking-list-head,
  .ranking-row {
    grid-template-columns: 1fr;
  }

  .ranking-list-head {
    display: none;
  }

  .ranking-row {
    gap: 8px;
  }

  .ranking-zone,
  .ranking-value {
    padding-left: 52px;
    text-align: left;
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}

/* ---------- CRM3 design system ---------- */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #eff6ff;
  --accent: #2563eb;
  --accent-wash: rgba(37, 99, 235, 0.1);
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f8fafc;
  --sidebar-text: #475569;
  --sidebar-text-active: #0f172a;
  --bg: #f3f6fb;
  --card-bg: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-light: #eef2f7;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.04);
  --shadow: 0 4px 8px rgba(15, 23, 42, 0.04), 0 18px 40px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 20px 50px rgba(15, 23, 42, 0.08);
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --font: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}

html,
body {
  overflow-x: clip;
}

body {
  font-family: var(--font);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 18%),
    linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%);
  color: var(--text);
}

h1,
h2,
h3,
.logo-text {
  letter-spacing: -0.03em;
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  box-shadow: none;
}

.sidebar-header,
.sidebar-footer {
  border-color: var(--border);
}

.logo-icon {
  color: var(--primary);
}

.logo-text,
.sidebar-tip strong,
.sidebar-version {
  color: var(--text);
}

.logo-subtext,
.sidebar-tip,
.sidebar-version {
  color: var(--text-muted);
}

.sidebar-tip {
  background: #f8fafc;
  border: 1px solid var(--border);
}

.nav-separator {
  background: var(--border);
}

.nav-link {
  color: var(--sidebar-text);
  border: 1px solid transparent;
  border-radius: 12px;
}

.nav-link:hover {
  background: var(--sidebar-hover);
  color: var(--text);
}

.nav-link.active {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: #bfdbfe;
  box-shadow: none;
}

.main-wrapper {
  background: transparent;
}

.topbar {
  height: 72px;
  margin: 18px 20px 0;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.main-content {
  max-width: none;
  padding: 22px 20px 36px;
}

.topbar-search {
  max-width: 520px;
}

.topbar-search input,
.form-control,
.form-input,
textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.topbar-search input:focus,
.form-control:focus,
.form-input:focus,
textarea:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.workspace-pill {
  background: var(--primary-light);
  color: var(--primary);
}

.card,
.kpi-card,
.client-hero,
.note-card,
.section-banner,
.hero-aside-card,
.hero-aside-card.soft,
.mini-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.card,
.kpi-card,
.client-hero,
.section-banner {
  border-radius: 18px;
}

.card-header {
  padding: 18px 20px;
}

.card-body {
  padding: 18px 20px;
}

.btn {
  border-radius: 10px;
  font-weight: 700;
}

.btn-primary {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
}

.btn-secondary,
.btn-ghost,
.btn-outline {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover,
.btn-ghost:hover,
.btn-outline:hover {
  background: #f8fafc;
}

.kpi-grid {
  gap: 14px;
}

.kpi-card {
  padding: 18px;
  align-items: center;
}

.kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.kpi-value {
  font-size: 1.45rem;
}

.hospitality-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  gap: 18px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.9) 0%, rgba(255, 255, 255, 1) 70%);
  color: var(--text);
  border: 1px solid #dbeafe;
  box-shadow: var(--shadow-sm);
}

.section-kicker,
.hero-aside-label,
.mini-stat-label {
  background: #eff6ff;
  color: var(--primary);
  border-radius: 999px;
  font-weight: 800;
}

.hospitality-hero h1 {
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.02;
  margin-bottom: 12px;
}

.hospitality-hero-copy p,
.hero-aside-card span {
  color: var(--text-muted);
}

.hero-actions {
  margin-top: 18px;
}

.hero-aside-card strong {
  color: var(--text);
}

.section-banner {
  padding: 20px 22px;
  background: #fff;
}

.section-banner h2 {
  font-size: 1.55rem;
  margin-bottom: 8px;
}

.view-header {
  margin-bottom: 18px;
}

.view-header h1 {
  font-size: 1.4rem;
}

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

.table {
  min-width: 760px;
}

.table th {
  background: #f8fafc;
  color: #64748b;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.table tbody tr:hover,
.clickable-row:hover {
  background: #f8fbff;
}

.ranking-row:hover,
.mobile-ranking-card:hover {
  background: #f8fbff;
}

.ranking-list-head {
  padding-top: 16px;
}

.ranking-row,
.mobile-ranking-card {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.ranking-row:hover,
.mobile-ranking-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
  text-decoration: none;
}

.client-avatar {
  background: linear-gradient(135deg, #3b82f6 0%, #64748b 100%);
}

.tabs {
  gap: 6px;
}

.tab-btn {
  border-radius: 10px 10px 0 0;
  border-bottom-color: transparent;
}

.tab-btn.active {
  background: #fff;
  color: var(--primary);
  box-shadow: inset 0 2px 0 0 var(--primary);
}

.modal-container {
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.modal-header {
  border-bottom: 1px solid var(--border);
}

.search-dropdown,
.user-dropdown {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.toast {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

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

@media (max-width: 768px) {
  .topbar {
    margin: 10px 10px 0;
    padding: 0 12px;
    height: 64px;
    border-radius: 14px;
  }

  .main-content {
    padding: 16px 10px 28px;
  }

  .main-wrapper {
    margin-left: 0;
  }

  .card,
  .kpi-card,
  .client-hero,
  .section-banner {
    border-radius: 16px;
  }

  .workspace-pill,
  .sidebar-tip,
  .logo-subtext,
  .user-role {
    display: none;
  }

  .table {
    min-width: 680px;
  }
}

/* ---------- CRM3 dashboard refinements ---------- */
body {
  font-size: 14px;
}

h1 {
  font-size: 1.52rem;
}

h2 {
  font-size: 1.28rem;
}

h3 {
  font-size: 1rem;
}

.logo-text {
  font-size: 1.02rem;
}

.logo-subtext,
.kpi-label,
.text-muted,
.fs-sm {
  font-size: .82rem;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, rgba(255,255,255,0) 22%),
    #ffffff;
}

.topbar-search input {
  font-size: .86rem;
}

.chart-medium {
  min-height: 280px;
}

.chart-small {
  min-height: 220px;
}

.chart-center {
  align-items: center;
}

.dashboard-insights {
  margin-bottom: 18px;
}

.insight-card {
  padding: 18px;
}

.insight-label {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.insight-value {
  margin: 10px 0 8px;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 800;
  color: var(--text);
}

.insight-copy {
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.45;
}

.focus-card {
  min-height: 100%;
}

.focus-list {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.focus-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.focus-item:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.08);
  border-color: #bfdbfe;
}

.focus-score {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
}

.focus-main {
  min-width: 0;
}

.focus-title {
  font-size: .98rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.focus-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  color: var(--text-muted);
  font-size: .8rem;
  margin-bottom: 10px;
}

.focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.focus-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--border);
  color: #475569;
  font-size: .76rem;
  font-weight: 700;
}

.focus-recommendation {
  margin-top: 12px;
}

.focus-recommendation p {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.45;
}

.focus-action {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.focus-action.visitar {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.focus-action.llamar {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.focus-action.activar {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.focus-action.completar-ficha {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.focus-action.revisar {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

@media (max-width: 980px) {
  .dashboard-insights,
  .grid-3 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .chart-medium {
    min-height: 240px;
  }

  .chart-small {
    min-height: 200px;
  }

  .focus-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .focus-score {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1rem;
  }
}

/* ---------- CRM3 compact + dark theme override ---------- */
:root {
  --surface-soft: #f8fafc;
  --chart-grid: #e7edf5;
}

body {
  font-size: 14px;
}

body.theme-dark {
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --primary-light: rgba(96, 165, 250, 0.12);
  --accent: #60a5fa;
  --accent-wash: rgba(96, 165, 250, 0.16);
  --bg: #0b1220;
  --card-bg: #111827;
  --text: #e5eefc;
  --text-muted: #94a3b8;
  --border: #243244;
  --border-light: #1b2635;
  --surface-soft: #0f1a2a;
  --chart-grid: #243244;
  --shadow-sm: 0 10px 30px rgba(2, 6, 23, 0.28);
  --shadow: 0 18px 40px rgba(2, 6, 23, 0.34);
  --shadow-md: 0 24px 52px rgba(2, 6, 23, 0.46);
}

body.theme-dark {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.07), transparent 15%),
    linear-gradient(180deg, #07111f 0%, #0b1220 100%);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, rgba(255, 255, 255, 0) 20%),
    #ffffff;
}

body.theme-dark .sidebar {
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.08) 0%, rgba(11, 18, 32, 0) 22%),
    #0f172a;
}

.topbar {
  height: 60px;
  margin: 12px 14px 0;
  padding: 0 12px;
}

.main-content {
  padding: 14px 14px 24px;
}

h1 { font-size: 1.38rem; }
h2 { font-size: 1.16rem; }
h3 { font-size: .96rem; }

.logo-text { font-size: .98rem; }
.logo-subtext,
.kpi-label,
.text-muted,
.fs-sm { font-size: .8rem; }

.card,
.kpi-card,
.client-hero,
.section-banner,
.hero-aside-card,
.hero-aside-card.soft,
.mini-stat,
.focus-item,
.mobile-ranking-card {
  border-radius: 14px;
}

.card-header,
.card-body {
  padding: 13px 14px;
}

.btn {
  min-height: 36px;
  padding: 7px 12px;
  font-size: .82rem;
}

.kpi-grid { gap: 10px; }
.kpi-card { padding: 12px; }
.kpi-value { font-size: 1.16rem; }
.kpi-icon { width: 38px; height: 38px; }

.hospitality-hero {
  gap: 12px;
  padding: 14px;
}

.hospitality-hero h1 {
  font-size: clamp(1.45rem, 2.2vw, 2.05rem);
}

.section-banner {
  padding: 14px 16px;
}

.section-banner h2 {
  font-size: 1.16rem;
}

.view-header {
  margin-bottom: 14px;
}

.topbar-search input,
.form-control,
.form-input,
textarea {
  border-radius: 10px;
}

.table th {
  font-size: .7rem;
}

.chart-medium {
  min-height: 190px;
}

.chart-small {
  min-height: 150px;
}

.dashboard-insights {
  margin-bottom: 14px;
}

.insight-card {
  padding: 12px;
}

.insight-value {
  margin: 8px 0 6px;
  font-size: 1.34rem;
}

.insight-copy {
  font-size: .78rem;
}

.focus-list {
  gap: 8px;
  padding: 0 12px 12px;
}

.focus-item {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}

.focus-score {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: .94rem;
}

.focus-title {
  font-size: .9rem;
  margin-bottom: 4px;
}

.focus-meta {
  gap: 6px 8px;
  font-size: .75rem;
  margin-bottom: 8px;
}

.focus-tag {
  padding: 4px 8px;
  font-size: .7rem;
}

.focus-recommendation {
  margin-top: 10px;
}

.focus-recommendation p {
  margin-top: 6px;
  font-size: .74rem;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
}

.theme-toggle:hover {
  background: var(--surface-soft);
}

body.theme-dark .topbar,
body.theme-dark .theme-toggle,
body.theme-dark .btn-secondary,
body.theme-dark .btn-ghost,
body.theme-dark .btn-outline,
body.theme-dark .hero-aside-card,
body.theme-dark .hero-aside-card.soft,
body.theme-dark .mini-stat,
body.theme-dark .section-banner,
body.theme-dark .insight-card,
body.theme-dark .mobile-ranking-card,
body.theme-dark .focus-item,
body.theme-dark .focus-tag,
body.theme-dark .search-dropdown,
body.theme-dark .user-dropdown,
body.theme-dark .card,
body.theme-dark .kpi-card,
body.theme-dark .client-hero,
body.theme-dark .detail-panel,
body.theme-dark .backup-panel,
body.theme-dark .backup-row,
body.theme-dark .backup-step,
body.theme-dark .detail-empty {
  background: var(--card-bg);
  color: var(--text);
}

body.theme-dark .sidebar-header,
body.theme-dark .sidebar-footer,
body.theme-dark .card,
body.theme-dark .kpi-card,
body.theme-dark .section-banner,
body.theme-dark .focus-item,
body.theme-dark .mobile-ranking-card,
body.theme-dark .btn-secondary,
body.theme-dark .btn-ghost,
body.theme-dark .btn-outline,
body.theme-dark .theme-toggle,
body.theme-dark .search-dropdown,
body.theme-dark .user-dropdown,
body.theme-dark .detail-panel,
body.theme-dark .backup-panel,
body.theme-dark .backup-row,
body.theme-dark .backup-step,
body.theme-dark .detail-empty,
body.theme-dark .backup-warning {
  border-color: var(--border);
}

body.theme-dark .backup-warning {
  background: rgba(120, 53, 15, 0.24);
  color: #FCD34D;
}

body.theme-dark .logo-text,
body.theme-dark .sidebar-tip strong,
body.theme-dark .sidebar-version,
body.theme-dark .nav-link.active,
body.theme-dark .user-name,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark .focus-title,
body.theme-dark .ranking-copy strong {
  color: var(--text);
}

body.theme-dark .logo-subtext,
body.theme-dark .sidebar-tip,
body.theme-dark .sidebar-version,
body.theme-dark .nav-link,
body.theme-dark .text-muted,
body.theme-dark .kpi-label,
body.theme-dark .ranking-copy span,
body.theme-dark .focus-meta,
body.theme-dark .focus-recommendation p {
  color: var(--text-muted);
}

body.theme-dark .nav-link:hover,
body.theme-dark .nav-link.active,
body.theme-dark .table th,
body.theme-dark .focus-tag,
body.theme-dark .section-kicker,
body.theme-dark .hero-aside-label,
body.theme-dark .mini-stat-label,
body.theme-dark .workspace-pill {
  background: var(--surface-soft);
}

body.theme-dark .table th {
  color: var(--text-muted);
}

body.theme-dark .table tbody tr:hover,
body.theme-dark .clickable-row:hover,
body.theme-dark .ranking-row:hover,
body.theme-dark .mobile-ranking-card:hover,
body.theme-dark .focus-item:hover {
  background: #152133;
}

@media (max-width: 768px) {
  .topbar {
    margin: 8px 8px 0;
    padding: 0 10px;
    height: 56px;
  }

  .main-content {
    padding: 12px 8px 20px;
  }

  .chart-medium {
    min-height: 170px;
  }

  .chart-small {
    min-height: 140px;
  }
}

/* ══════════════════════════════════════════════════════
   REDESIGN — Dashboard moderno
══════════════════════════════════════════════════════ */

/* SIDEBAR — degradado azul oscuro */
.sidebar {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(96,165,250,.30) 0%, transparent 55%),
    linear-gradient(160deg, #1e3a8a 0%, #1a3070 45%, #101d5c 100%) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}
.sidebar .nav-link { color: rgba(148,163,184,.85) !important; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.07) !important; color: #e2e8f0 !important; text-decoration: none; }
.sidebar .nav-link.active { background: rgba(59,130,246,.22) !important; color: #93c5fd !important; border-color: rgba(59,130,246,.28) !important; box-shadow: none !important; }
.sidebar .sidebar-header,
.sidebar .sidebar-footer,
.sidebar .nav-separator { border-color: rgba(255,255,255,.08) !important; background: transparent !important; }
.sidebar .nav-separator { background: rgba(255,255,255,.08) !important; }
.sidebar .logo-icon { color: #60a5fa !important; }
.sidebar .logo-text { color: #ffffff !important; }
.sidebar .logo-subtext,
.sidebar .sidebar-version { color: rgba(148,163,184,.55) !important; }

/* SIDEBAR — bloque usuario en footer */
.sidebar-user-info {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px 14px;
}
.sidebar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .73rem; font-weight: 800; flex-shrink: 0;
}
.sidebar-user-name { font-size: .82rem; font-weight: 700; color: #ffffff; }
.sidebar-user-role { font-size: .7rem; color: rgba(148,163,184,.65); }

/* Ocultar elementos descartados */
.hospitality-hero { display: none !important; }
.workspace-pill   { display: none !important; }
.sidebar-tip      { display: none !important; }

/* PAGE HEADER */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 16px; gap: 16px; flex-wrap: wrap;
}
.page-eyebrow {
  font-size: .67rem; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px;
}
.page-header h1 { font-size: 1.38rem; margin: 0; }
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* KPI CARDS — sin iconos, estructura plana */
.kpi-card { display: block !important; padding: 16px 18px !important; }
.kpi-icon { display: none !important; }
.kpi-data { display: contents; }
.kpi-label {
  display: block !important; font-size: .67rem !important;
  font-weight: 800 !important; text-transform: uppercase !important;
  letter-spacing: .08em !important; color: var(--text-muted) !important;
  margin-bottom: 8px !important;
}
.kpi-value {
  display: block !important; font-size: 1.55rem !important;
  font-weight: 800 !important; line-height: 1 !important;
  margin-bottom: 5px !important; color: var(--text) !important;
}
.kpi-sub { font-size: .72rem !important; color: var(--text-muted) !important; }

/* INSIGHT STRIP — barra horizontal compacta */
.insight-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; background: var(--card-bg);
  box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.insight-item {
  padding: 13px 16px; display: flex; align-items: center; gap: 12px;
  border-right: 1px solid var(--border-light);
}
.insight-item:last-child { border-right: none; }
.insight-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.insight-icon svg { width: 16px; height: 16px; }
.insight-icon.amber { background: rgba(245,158,11,.12); color: #D97706; }
.insight-icon.red   { background: rgba(239,68,68,.10);  color: #DC2626; }
.insight-icon.blue  { background: rgba(37,99,235,.10);  color: #2563EB; }
.insight-num  { font-size: 1.45rem; font-weight: 800; color: var(--text); line-height: 1; }
.insight-desc { font-size: .72rem; color: var(--text-muted); margin-top: 3px; }

/* FOLLOWUP GRID — Rediseñado a lista vertical para evitar deformaciones */
.followup-grid {
  display: flex;
  flex-direction: column;
}

.followup-item {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
  color: inherit;
  text-decoration: none;
  transition: background .12s;
  border-right: none;
}

.followup-item-button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.followup-item:last-child {
  border-bottom: none;
}

.followup-item:hover {
  background: var(--surface-soft);
  text-decoration: none;
}

.followup-type-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.followup-type-icon svg {
  width: 14px;
  height: 14px;
}

.followup-main {
  flex: 1;
  min-width: 0;
}

.followup-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.followup-client {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.followup-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
}

.followup-action {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.followup-date {
  font-size: .72rem;
  color: var(--warning);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 8px;
}

.followup-date svg {
  width: 11px;
  height: 11px;
}

/* DASHBOARD LISTS SCROLLING — Para evitar que las tarjetas se deformen */
#view-dashboard #pending-list,
#view-dashboard #overdue-list,
#view-dashboard #agenda-list {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

#view-dashboard .focus-board {
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* DASHBOARD GRIDS */
.dash-main-grid   { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; margin-bottom: 16px; }
.dash-bottom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* CHART AREAS */
.chart-area         { position: relative; padding: 6px 14px 2px; }
.chart-area.tall    { height: 230px; }
.chart-area.short   { height: 168px; }
.chart-stat-bar     { display: flex; gap: 20px; padding: 10px 18px 14px; border-top: 1px solid var(--border-light); flex-wrap: wrap; }
.chart-stat-label   { font-size: .66rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px; }
.chart-stat-val     { font-size: .92rem; font-weight: 800; color: var(--text); }

/* DONUT PIPELINE */
.donut-wrap         { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.donut-chart-area   { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.donut-center       { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
.donut-center-val   { font-size: 1.2rem; font-weight: 800; line-height: 1; color: var(--text); }
.donut-center-label { font-size: .67rem; color: var(--text-muted); margin-top: 2px; }
.donut-legend       { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.donut-legend-item  { display: flex; align-items: center; gap: 8px; }
.donut-dot          { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.donut-name         { flex: 1; font-size: .77rem; color: var(--text-muted); }
.donut-val          { font-size: .8rem; font-weight: 800; color: var(--text); }

/* TOP CLIENTS lista compacta */
.top-client-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border-light);
  transition: background .12s; color: inherit; text-decoration: none;
}
.top-client-row:last-child { border-bottom: none; }
.top-client-row:hover { background: var(--surface-soft); text-decoration: none; }
.top-client-rank  { font-size: .71rem; font-weight: 800; color: var(--text-muted); width: 16px; text-align: right; flex-shrink: 0; }
.top-client-info  { flex: 1; min-width: 0; }
.top-client-name  { font-size: .83rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-client-zone  { font-size: .71rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.top-client-val   { font-size: .82rem; font-weight: 800; white-space: nowrap; color: var(--text); }

/* PIPELINE LEGEND (generada por JS en renderPipeline) */
.pipeline-legend-item {
  display: flex; align-items: center; gap: 8px;
}
.pipeline-legend-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.pipeline-legend-label { flex: 1; font-size: .77rem; color: var(--text-muted); }
.pipeline-legend-val   { font-size: .8rem; font-weight: 800; color: var(--text); }

/* CHART STAT BAR (generada por JS en renderMonthlySales) */
.chart-stat {
  display: flex; flex-direction: column; gap: 2px;
}
.stat-label {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
}
.chart-stat strong { font-size: .88rem; font-weight: 800; color: var(--text); }
.stat-up   strong { color: #10b981; }
.stat-down strong { color: #ef4444; }

/* dark mode */
body.theme-dark .insight-strip,
body.theme-dark .followup-item { background: var(--card-bg); border-color: var(--border); }
body.theme-dark .insight-item,
body.theme-dark .followup-item { border-color: var(--border); }

/* Responsive */
@media (max-width: 1100px) {
  .dash-main-grid   { grid-template-columns: 1fr; }
  .dash-bottom-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .insight-strip  { grid-template-columns: 1fr; }
  .insight-item   { border-right: none; border-bottom: 1px solid var(--border-light); }
  .followup-grid  { grid-template-columns: 1fr 1fr; }
  .dash-bottom-grid { grid-template-columns: 1fr; }
  .page-header    { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .followup-grid  { grid-template-columns: 1fr; }
  .followup-item  { border-right: none; border-bottom: 1px solid var(--border-light); }
}

/* Preview alignment: compact SaaS dashboard shell */
:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #EFF6FF;
  --sidebar-bg: #0F172A;
  --bg: #F8FAFC;
  --card-bg: #FFFFFF;
  --text: #0F172A;
  --text-muted: #64748B;
  --border: #E2E8F0;
  --border-light: #F1F5F9;
  --chart-grid: #EEF2F7;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --sidebar-w: 240px;
  --topbar-h: 60px;
  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow: 0 1px 3px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.04);
  --shadow-md: 0 10px 30px rgba(15,23,42,.07);
}

html { font-size: 15px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

.sidebar {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(96,165,250,.30) 0%, transparent 55%),
    linear-gradient(160deg, #1e3a8a 0%, #1a3070 45%, #101d5c 100%) !important;
}

.sidebar-header {
  padding: 18px 18px 14px;
}

.sidebar-nav {
  padding: 14px 12px;
}

.sidebar .nav-link {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .92rem;
}

.sidebar .nav-link svg {
  width: 16px;
  height: 16px;
}

.sidebar-footer {
  padding: 14px 18px 18px;
}

.topbar {
  height: var(--topbar-h);
  padding: 0 22px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.topbar-search {
  max-width: 420px;
}

.topbar-search input {
  height: 38px;
  border-radius: 999px;
  background: #fff;
  font-size: .88rem;
}

.theme-toggle,
.user-menu {
  transform: scale(.96);
  transform-origin: center;
}

.main-content {
  padding: 24px;
}

.page-header {
  margin-bottom: 18px;
}

.page-eyebrow {
  font-size: .7rem;
}

.page-header h1 {
  font-size: 1.55rem;
  letter-spacing: -.03em;
}

.btn {
  border-radius: 10px;
}

.btn-sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: .82rem;
}

.card {
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-light);
}

.card-header h3 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.kpi-grid {
  gap: 14px;
}

.kpi-card {
  min-height: 116px;
  border-radius: 18px;
}

.kpi-label {
  font-size: .64rem !important;
}

.kpi-value {
  font-size: 1.78rem !important;
}

.kpi-sub {
  font-size: .74rem !important;
}

.insight-strip {
  border-radius: 18px;
}

.insight-item {
  min-height: 72px;
  padding: 14px 16px;
}

.insight-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.insight-num {
  font-size: 1.35rem;
}

.insight-desc {
  font-size: .74rem;
}

.followup-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.followup-item {
  min-height: 106px;
  padding: 14px 16px;
}

.followup-client {
  font-size: .86rem;
}

.followup-action {
  font-size: .76rem;
  white-space: normal;
  line-height: 1.35;
}

.dash-main-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.dash-bottom-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chart-area {
  padding: 8px 16px 4px;
}

.chart-area.tall {
  height: 250px;
}

.chart-area.short {
  height: 186px;
}

.chart-stat-bar {
  gap: 24px;
  padding: 12px 18px 15px;
}

.chart-stat strong,
.chart-stat-val {
  letter-spacing: -.02em;
}

.donut-wrap {
  align-items: center;
  gap: 18px;
  padding: 18px;
}

.donut-chart-area {
  width: 124px;
  height: 124px;
}

.donut-center-val {
  font-size: 1.35rem;
}

.top-client-row {
  min-height: 72px;
  padding: 12px 16px;
}

.top-client-name {
  font-size: .92rem;
}

.top-client-zone,
.top-client-rank {
  font-size: .73rem;
}

.top-client-val {
  font-size: .9rem;
}

.focus-card .card-header {
  align-items: center;
}

.focus-list {
  padding: 10px;
}

.focus-item {
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
}

.focus-score {
  width: 56px;
  height: 56px;
  font-size: 1.35rem;
}

.focus-title {
  font-size: .98rem;
}

.focus-meta,
.focus-tags,
.focus-recommendation p {
  font-size: .78rem;
}

.focus-tag {
  padding: 7px 10px;
  border-radius: 999px;
}

#pending-list,
#top-clients-list,
#focus-targets {
  min-height: 120px;
}

#view-dashboard .kpi-card {
  position: relative;
  min-height: 132px;
  padding-top: 18px !important;
}

#view-dashboard .kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
}

#view-dashboard .kpi-grid .kpi-card:nth-child(2)::before {
  background: #10b981;
}

#view-dashboard .kpi-grid .kpi-card:nth-child(3)::before {
  background: #8b5cf6;
}

#view-dashboard .kpi-grid .kpi-card:nth-child(4)::before {
  background: #f59e0b;
}

#view-dashboard .kpi-card .kpi-label {
  margin-bottom: 10px !important;
}

#view-dashboard .kpi-card .kpi-value {
  font-size: 2rem !important;
  margin-bottom: 8px !important;
}

#view-dashboard .kpi-card .kpi-sub {
  font-size: .77rem !important;
  max-width: 28ch;
}

body.theme-dark {
  --bg: #020817;
  --card-bg: #0F172A;
  --text: #E5EDF8;
  --text-muted: #8FA0B9;
  --border: #1E293B;
  --border-light: #182235;
  --chart-grid: #1C2738;
}

body.theme-dark .topbar {
  background: rgba(2,6,23,.86);
}

body.theme-dark .card,
body.theme-dark .insight-strip,
body.theme-dark .search-dropdown {
  box-shadow: none;
}

body.theme-dark .topbar-search input {
  background: #071122;
}

body.theme-dark .followup-item:hover,
body.theme-dark .top-client-row:hover,
body.theme-dark .focus-item:hover {
  background: #111c2e;
}

@media (max-width: 1100px) {
  .main-content {
    padding: 18px;
  }

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

  .dash-main-grid,
  .dash-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }

  .main-content {
    padding: 14px;
  }

  .topbar {
    padding: 0 14px;
  }

  .topbar-search {
    max-width: none;
  }

  .kpi-grid,
  .insight-strip,
  .followup-grid,
  .dash-main-grid,
  .dash-bottom-grid {
    grid-template-columns: 1fr;
  }

  .followup-item {
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .donut-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Focus board redesign */
.focus-board {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.focus-row {
  display: block;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.focus-row:hover {
  text-decoration: none;
  border-color: #bfdbfe;
  box-shadow: 0 14px 26px rgba(37,99,235,.08);
  transform: translateY(-1px);
}

.focus-row-main {
  padding: 16px 16px 14px;
}

.focus-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.focus-row-title {
  font-size: .96rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

.focus-row-subtitle {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: .78rem;
}

.focus-score-badge {
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.focus-row-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.focus-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
}

.focus-metric strong {
  font-size: .9rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}

.focus-metric em {
  font-style: normal;
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.focus-row-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.focus-row-footer p {
  flex: 1;
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.42;
}

body.theme-dark .focus-row {
  background: linear-gradient(180deg, #0f172a 0%, #111c2e 100%);
}

body.theme-dark .focus-metric {
  background: #0b1323;
  border-color: var(--border);
}

@media (max-width: 768px) {
  .focus-row-top,
  .focus-row-footer {
    flex-direction: column;
  }

  .focus-score-badge {
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: .98rem;
  }

  .focus-row-metrics {
    grid-template-columns: 1fr;
  }
}

/* ---------- INFORMES ---------- */
.report-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.report-kpi-card {
  padding: 18px 18px 16px;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.report-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.report-kpi-label {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.report-kpi-trend,
.report-kpi-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,.68);
}

.report-kpi-trend.up {
  color: #166534;
  background: #DCFCE7;
  border-color: rgba(22, 101, 52, .16);
}

.report-kpi-trend.down,
.report-kpi-chip.danger {
  color: #991B1B;
  background: #FEE2E2;
  border-color: rgba(153, 27, 27, .12);
}

.report-kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text);
}

.report-kpi-meta {
  margin-top: 10px;
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.report-grid {
  display: grid;
  gap: 14px;
}

.report-grid-main {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.report-card-span-2 {
  grid-column: span 2;
}

.report-subtitle {
  margin-top: 4px;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.report-chart-medium {
  min-height: 320px;
}

.report-chart-tall {
  min-height: 380px;
}

.report-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.96));
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.report-list-item:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(37, 99, 235, .18);
}

.report-list-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.report-list-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.report-list-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text);
}

.report-list-title strong {
  font-size: .96rem;
  font-weight: 700;
}

.report-list-sub {
  font-size: .86rem;
  color: var(--text-muted);
}

.report-list-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.report-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(241, 245, 249, .95);
  color: var(--text);
  font-size: .76rem;
  font-weight: 700;
}

.report-list-side {
  min-width: 92px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.report-list-metric {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

.report-list-caption {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

body.theme-dark .report-kpi-card,
body.theme-dark .report-list-item {
  background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.78));
}

body.theme-dark .report-kpi-trend,
body.theme-dark .report-kpi-chip,
body.theme-dark .report-tag {
  background: rgba(15,23,42,.65);
}

@media (max-width: 1200px) {
  .report-kpi-grid,
  .report-grid-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .report-card-span-2 {
    grid-column: span 2;
  }
}

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

  .report-grid-main,
  .report-grid-lists,
  .report-kpi-grid {
    grid-template-columns: 1fr;
  }

  .report-card-span-2 {
    grid-column: span 1;
  }

  .report-list-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-list-side {
    width: 100%;
    text-align: left;
    min-width: 0;
  }

  .report-chart-medium,
  .report-chart-tall {
    min-height: 290px;
  }
}

/* ---------- INFORMES REDESIGN ---------- */
#view-reports.reports-screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#view-reports .reports-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

#view-reports .reports-page-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#view-reports .reports-page-eyebrow::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--primary);
  border-radius: 2px;
}

#view-reports .reports-page-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.5px;
}

#view-reports .reports-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#view-reports .reports-year-select {
  height: 34px;
  min-width: 120px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
}

#view-reports .reports-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

#view-reports .reports-kpi-card {
  padding: 18px 20px;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

#view-reports .reports-kpi-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
}

#view-reports .reports-kpi-value-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

#view-reports .reports-kpi-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.5px;
  line-height: 1;
}

#view-reports .reports-kpi-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 2px;
}

#view-reports .reports-kpi-badge.up { background: #dcfce7; color: #166534; }
#view-reports .reports-kpi-badge.neutral { background: #f1f5f9; color: var(--text-muted); }
#view-reports .reports-kpi-badge.warn { background: #fef3c7; color: #92400e; }
#view-reports .reports-kpi-badge.danger { background: #fee2e2; color: #991b1b; }

#view-reports .reports-kpi-sub {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

#view-reports .reports-section-full,
#view-reports .reports-bubble-card {
  margin-bottom: 0;
}

#view-reports .reports-card-header {
  padding: 16px 20px;
}

#view-reports .reports-card-header h3 {
  font-size: .9rem;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -.1px;
}

#view-reports .reports-card-header h3 svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

#view-reports .reports-card-tag {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--border-light);
  padding: 2px 8px;
  border-radius: 20px;
}

#view-reports .reports-chart-wrap {
  position: relative;
  padding: 12px 12px 8px;
}

#view-reports .reports-chart-wrap.reports-chart-wrap--list {
  height: auto;
  min-height: 0;
  padding-bottom: 0;
}

#view-reports .reports-chart-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 18px;
  color: var(--text-muted);
}

#view-reports .reports-chart-empty i,
#view-reports .reports-chart-empty svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

#view-reports .reports-chart-empty h4 {
  margin: 2px 0 0;
  font-size: .96rem;
  color: var(--text);
}

#view-reports .reports-chart-empty p {
  margin: 0;
  max-width: 260px;
  font-size: .82rem;
  line-height: 1.45;
}

#view-reports .reports-chart-evo {
  height: 240px;
}

#view-reports .reports-chart-compact {
  height: 220px;
}

#view-reports .reports-stat-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-light);
}

#view-reports .reports-stat-bar-item {
  padding: 14px 20px;
  border-right: 1px solid var(--border-light);
}

#view-reports .reports-stat-bar-item:last-child {
  border-right: none;
}

#view-reports .reports-stat-bar-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
}

#view-reports .reports-stat-bar-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
}

#view-reports .reports-stat-bar-sub {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: 1px;
}

#view-reports .reports-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

#view-reports .reports-pipeline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-light);
}

#view-reports .reports-pipeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
}

#view-reports .reports-pipeline-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

#view-reports .reports-gap-badges {
  display: flex;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}

#view-reports .reports-gap-intro {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 2px;
}

#view-reports .reports-gap-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

#view-reports .reports-gap-badge.zero { background: #dcfce7; color: #166534; }
#view-reports .reports-gap-badge.mild { background: #fef3c7; color: #92400e; }
#view-reports .reports-gap-badge.strong { background: #fee2e2; color: #991b1b; }

#view-reports .reports-discount-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 20px 16px;
}

#view-reports .reports-discount-row {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

#view-reports .reports-discount-row:last-child {
  border-bottom: none;
}

#view-reports .reports-discount-name {
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

#view-reports .reports-discount-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

#view-reports .reports-discount-bars {
  min-width: 0;
}

#view-reports .reports-discount-bar-track {
  position: relative;
  height: 18px;
}

#view-reports .reports-discount-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
}

#view-reports .reports-discount-bar.tariff {
  height: 14px;
  background: #d8e0eb;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
}

#view-reports .reports-discount-bar.net {
  height: 12px;
  background: linear-gradient(90deg, #34c58c, #1ea76e);
  box-shadow: 0 2px 8px rgba(16,185,129,.18);
}

#view-reports .reports-discount-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

#view-reports .reports-discount-value {
  font-size: .84rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

#view-reports .reports-discount-scheme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

#view-reports .reports-discount-scheme.active {
  background: #fb923c;
  color: #fff;
}

#view-reports .reports-discount-scheme.neutral {
  background: transparent;
  color: var(--text-muted);
}

#view-reports .reports-discount-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--text-muted);
}

#view-reports .reports-discount-legend-swatch {
  width: 16px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

#view-reports .reports-discount-legend-swatch.tariff {
  background: #d8e0eb;
}

#view-reports .reports-discount-legend-swatch.net {
  background: linear-gradient(90deg, #34c58c, #1ea76e);
}

#view-reports .reports-zone-list {
  padding: 12px 20px 16px;
}

#view-reports .reports-zone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

#view-reports .reports-zone-row:last-child {
  border-bottom: none;
}

#view-reports .reports-zone-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

#view-reports .reports-zone-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  width: 62px;
  flex-shrink: 0;
}

#view-reports .reports-zone-bar-wrap {
  flex: 1;
  height: 7px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

#view-reports .reports-zone-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}

#view-reports .reports-zone-revenue {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  width: 58px;
  text-align: right;
  flex-shrink: 0;
}

#view-reports .reports-zone-contacts {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--border-light);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

#view-reports .reports-quadrant-wrapper {
  position: relative;
  margin: 8px 16px 12px;
  border-radius: 10px;
  overflow: hidden;
  height: 320px;
}

#view-reports .reports-quadrant-bg {
  display: none;
}

#view-reports .reports-q-tl { background: rgba(16,185,129,.07); }
#view-reports .reports-q-tr { background: rgba(239,68,68,.07); }
#view-reports .reports-q-bl { background: rgba(37,99,235,.07); }
#view-reports .reports-q-br { background: rgba(100,116,139,.06); }

#view-reports .reports-quadrant-label {
  position: absolute;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 9px;
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
}

#view-reports .reports-ql-tl { top: 12px; left: 12px; }
#view-reports .reports-ql-tr { top: 12px; right: 12px; }
#view-reports .reports-ql-bl { bottom: 12px; left: 12px; }
#view-reports .reports-ql-br { bottom: 12px; right: 12px; }

#view-reports .reports-ql-tl { top: 8px; left: 8px; color: #059669; background: rgba(16,185,129,.12); }
#view-reports .reports-ql-tr { top: 8px; right: 8px; color: #dc2626; background: rgba(239,68,68,.12); }
#view-reports .reports-ql-bl { bottom: 8px; left: 8px; color: #2563eb; background: rgba(37,99,235,.1); }
#view-reports .reports-ql-br { bottom: 8px; right: 8px; color: #64748b; background: rgba(100,116,139,.1); }

#view-reports .reports-quadrant-wrapper canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 320px !important;
}

#view-reports .reports-bubble-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}

#view-reports .reports-bubble-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
}

#view-reports .reports-bubble-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

#view-reports .reports-bubble-legend-count {
  font-weight: 800;
  color: var(--text);
}

#view-reports .reports-bubble-legend-note {
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 500;
}

#view-reports .reports-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

#view-reports .reports-opp-item,
#view-reports .reports-acc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-light);
  transition: background .13s;
  color: inherit;
}

#view-reports .reports-opp-item:last-child,
#view-reports .reports-acc-item:last-child {
  border-bottom: none;
}

#view-reports .reports-opp-item:hover,
#view-reports .reports-acc-item:hover {
  background: var(--border-light);
  text-decoration: none;
}

#view-reports .reports-opp-avatar,
#view-reports .reports-acc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), #5b8cff);
}

#view-reports .reports-opp-info,
#view-reports .reports-acc-info {
  flex: 1;
  min-width: 0;
}

#view-reports .reports-opp-name,
#view-reports .reports-acc-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-reports .reports-client-person {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-reports .reports-opp-meta,
#view-reports .reports-acc-meta {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: 1px;
}

#view-reports .reports-acc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

#view-reports .reports-opp-heat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

#view-reports .reports-opp-heat-label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-muted);
}

#view-reports .reports-opp-heat-bar-wrap {
  width: 60px;
  height: 5px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

#view-reports .reports-opp-heat-bar {
  height: 100%;
  border-radius: 3px;
}

#view-reports .reports-stage-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

#view-reports .reports-acc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

#view-reports .reports-acc-revenue {
  font-size: .85rem;
  font-weight: 800;
  color: var(--text);
}

#view-reports .reports-acc-rank-bar-wrap {
  width: 64px;
  height: 5px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

#view-reports .reports-acc-rank-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  opacity: .6;
}

body.theme-dark #view-reports .reports-card-tag,
body.theme-dark #view-reports .reports-zone-contacts,
body.theme-dark #view-reports .reports-kpi-badge.neutral,
body.theme-dark #view-reports .reports-opp-item:hover,
body.theme-dark #view-reports .reports-acc-item:hover {
  background: rgba(15,23,42,.55);
}

/* ── Pulso de cartera ────────────────────────────────────────── */
#view-reports .reports-pulse-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

#view-reports .reports-pulse-body {
  padding: 0;
}

/* ── card-tag clickable variant ─────────────────────────────── */
#view-reports .reports-card-tag-link {
  color: var(--primary);
  background: var(--primary-light);
  text-decoration: none;
  transition: background .15s;
}
#view-reports .reports-card-tag-link:hover {
  background: #dbeafe;
  text-decoration: none;
}

/* ── Radiografía de cobertura ────────────────────────────────── */
#view-reports .reports-health-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px;
}

#view-reports .reports-health-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: box-shadow .15s;
}
#view-reports .reports-health-item:hover {
  box-shadow: var(--shadow-sm);
}

#view-reports .reports-health-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#view-reports .reports-health-icon svg,
#view-reports .reports-health-icon i {
  width: 16px; height: 16px;
}

#view-reports .reports-health-num {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}

#view-reports .reports-health-label {
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.4;
}
#view-reports .reports-health-label strong {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1px;
}

/* color variants */
#view-reports .reports-health-amber .reports-health-icon { background: #fef3c7; color: #b45309; }
#view-reports .reports-health-amber .reports-health-num  { color: #b45309; }
#view-reports .reports-health-red   .reports-health-icon { background: #fee2e2; color: #dc2626; }
#view-reports .reports-health-red   .reports-health-num  { color: #dc2626; }
#view-reports .reports-health-blue  .reports-health-icon { background: #dbeafe; color: #1d4ed8; }
#view-reports .reports-health-blue  .reports-health-num  { color: #1d4ed8; }
#view-reports .reports-health-green .reports-health-icon { background: #dcfce7; color: #15803d; }
#view-reports .reports-health-green .reports-health-num  { color: #15803d; }

@media (max-width: 1200px) {
  #view-reports .reports-kpi-row,
  #view-reports .reports-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  #view-reports .reports-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  #view-reports .reports-pulse-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #view-reports .reports-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  #view-reports .reports-kpi-row,
  #view-reports .reports-grid-2,
  #view-reports .reports-stat-bar {
    grid-template-columns: 1fr;
  }

  #view-reports .reports-stat-bar-item {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  #view-reports .reports-stat-bar-item:last-child {
    border-bottom: none;
  }

  #view-reports .reports-zone-row {
    flex-wrap: wrap;
  }

  #view-reports .reports-zone-bar-wrap {
    order: 3;
    width: 100%;
    flex-basis: 100%;
  }

  #view-reports .reports-opp-item,
  #view-reports .reports-acc-item {
    align-items: flex-start;
  }

  .modal-container.modal-brief-note {
    align-self: flex-start;
    width: calc(100% - 18px);
    max-width: none;
    max-height: min(74vh, 560px);
    margin: max(18px, env(safe-area-inset-top, 0px) + 14px) 9px 0;
    border-radius: 22px;
  }

  .modal-overlay.modal-overlay-brief-note {
    align-items: flex-start;
    padding: 0;
  }

  .modal-container.modal-brief-note .modal-header {
    padding: 16px 18px;
  }

  .modal-container.modal-brief-note .modal-body {
    padding: 16px 16px 14px;
  }

  .modal-container.modal-brief-note .modal-footer {
    padding: 14px 0 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-container.modal-brief-note .modal-footer .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
  }

  .modal-container.modal-brief-note .modal-footer .btn:first-child {
    order: 3;
    flex-basis: 100%;
  }

  .modal-container.modal-brief-note .modal-footer .btn:nth-child(2),
  .modal-container.modal-brief-note .modal-footer .btn:nth-child(3) {
    order: 1;
  }

  .brief-note-modal {
    gap: 12px;
  }

  .brief-note-head {
    gap: 8px;
  }

  .brief-note-kicker {
    gap: 6px;
    margin-bottom: 8px;
  }

  .brief-note-title {
    font-size: 1rem;
    margin-bottom: 4px;
  }

  .brief-note-meta {
    font-size: .78rem;
  }

  .brief-note-body {
    padding: 14px 14px;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.58;
  }

  .modal-overlay.modal-overlay-history-sheet {
    align-items: flex-start;
    padding: 0;
  }

  .modal-container.modal-history-sheet {
    align-self: flex-start;
    width: calc(100% - 18px);
    max-width: none;
    max-height: min(72vh, 540px);
    margin: max(18px, env(safe-area-inset-top, 0px) + 14px) 9px 0;
    border-radius: 22px;
  }

  .modal-container.modal-history-sheet .modal-header {
    padding: 16px 18px;
  }

  .modal-container.modal-history-sheet .modal-body {
    padding: 14px 14px 14px;
  }

  .modal-container.modal-history-sheet .revision-list {
    gap: 8px;
  }

  .modal-container.modal-history-sheet .revision-item {
    border-radius: 14px;
    padding: 12px 12px 10px;
  }

  .modal-overlay.modal-overlay-client-sheet {
    align-items: flex-start;
    padding: 0;
  }

  .modal-container.modal-client-sheet {
    align-self: flex-start;
    width: calc(100% - 18px);
    max-width: none;
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top, 0px) + 14px) - env(safe-area-inset-bottom, 0px) - 12px);
    margin: max(18px, env(safe-area-inset-top, 0px) + 14px) 9px max(12px, env(safe-area-inset-bottom, 0px) + 8px);
    border-radius: 22px;
  }

  .modal-container.modal-client-sheet .modal-header {
    padding: 16px 18px;
  }

  .modal-container.modal-client-sheet .modal-body {
    padding: 16px 16px 14px;
  }

  .modal-container.modal-client-sheet .modal-footer {
    padding: 14px 16px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-container.modal-client-sheet .modal-footer .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
  }

  .modal-container.modal-client-sheet select.form-control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px;
  }

  .modal-overlay.modal-overlay-security-sheet {
    align-items: flex-start;
    padding: 0;
  }

  .modal-container.modal-security-sheet {
    align-self: flex-start;
    width: calc(100% - 18px);
    max-width: none;
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top, 0px) + 14px) - env(safe-area-inset-bottom, 0px) - 12px);
    margin: max(18px, env(safe-area-inset-top, 0px) + 14px) 9px max(12px, env(safe-area-inset-bottom, 0px) + 8px);
    border-radius: 22px;
  }

  .modal-container.modal-security-sheet .modal-header {
    padding: 16px 18px;
  }

  .modal-container.modal-security-sheet .modal-body {
    padding: 16px 16px 14px;
  }

  .modal-container.modal-security-sheet .modal-footer {
    padding: 14px 16px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-container.modal-security-sheet .modal-footer .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
  }

  .modal-container.modal-client-sheet .modal-body,
  .modal-container.modal-security-sheet .modal-body {
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px) + 14px);
  }
}


/* ═══════════════════════════════════════════════════════════════
   CLIENT DETAIL — 2-COLUMN REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* ── Header card ─────────────────────────────────────────────── */
#view-client-detail .client-header-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
#view-client-detail .client-header-top {
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
#view-client-detail .cd-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: -.02em;
}
#view-client-detail .cd-client-info {
  flex: 1;
  min-width: 0;
}
#view-client-detail .cd-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
#view-client-detail .cd-client-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0;
}
#view-client-detail .cd-client-company {
  display: flex; align-items: center; gap: 5px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 10px;
}
#view-client-detail .cd-client-company-sep {
  font-size: 0;
  line-height: 1;
}
#view-client-detail .cd-client-company-sep::before {
  content: '·';
  font-size: 0.9rem;
}
#view-client-detail .cd-client-company i,
#view-client-detail .cd-client-company svg { width: 13px; height: 13px; }
#view-client-detail .cd-badge-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-start;
  flex-shrink: 0;
}
#view-client-detail .cd-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: flex-start;
  flex-shrink: 0;
  min-width: 0;
}
#view-client-detail .cd-header-more {
  margin-left: auto;
}

/* ── Stat bar ────────────────────────────────────────────────── */
#view-client-detail .cd-stat-bar {
  border-top: 1px solid var(--border-light);
  display: flex;
}
#view-client-detail .cd-stat-item {
  flex: 1;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--border-light);
}
#view-client-detail .cd-stat-item:last-child { border-right: none; }
#view-client-detail .cd-stat-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}
#view-client-detail .cd-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Two-column layout ───────────────────────────────────────── */
#view-client-detail .cd-two-col {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
#view-client-detail .cd-col-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#view-client-detail .cd-col-right {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Card header variant ─────────────────────────────────────── */
#view-client-detail .cd-card-header {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#view-client-detail .cd-card-header h3 {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  min-width: 0;
}
#view-client-detail .cd-history-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
#view-client-detail .cd-history-head h3 {
  min-width: 0;
}
#view-client-detail .cd-history-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#view-client-detail .cd-card-header i,
#view-client-detail .cd-card-header svg {
  width: 15px; height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}
#view-client-detail .cd-card-header .btn i,
#view-client-detail .cd-card-header .btn svg {
  color: inherit;
}
#view-client-detail .cd-rail-icon-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--card-bg) 92%, white);
  border-color: color-mix(in srgb, var(--border) 86%, white);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .05);
}
#view-client-detail .cd-rail-icon-btn:hover {
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
}
#view-client-detail .cd-rail-icon-btn i,
#view-client-detail .cd-rail-icon-btn svg {
  width: 15px;
  height: 15px;
}

/* ── Próxima acción card ─────────────────────────────────────── */
#view-client-detail .cd-action-card {
  background: linear-gradient(180deg, #fffefe 0%, #fff7f6 100%);
  border: 1px solid var(--border);
  border-left: 5px solid #ef4444;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(239, 68, 68, .08);
  overflow: hidden;
  transition: opacity .18s ease, transform .18s ease;
}
#view-client-detail .cd-action-overdue {
  border-left-color: var(--danger);
  background: linear-gradient(180deg, #fffefe 0%, #fff2f2 100%);
}
#view-client-detail .cd-action-header {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.58);
}
#view-client-detail .cd-action-header h3 {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
#view-client-detail .cd-action-header i,
#view-client-detail .cd-action-header svg {
  width: 15px; height: 15px;
  color: var(--warning);
  flex-shrink: 0;
}
#view-client-detail .cd-action-overdue .cd-action-header i,
#view-client-detail .cd-action-overdue .cd-action-header svg {
  color: var(--danger);
}
#view-client-detail .cd-action-body { padding: 18px 20px; }
#view-client-detail .cd-action-text {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 12px;
  letter-spacing: -.02em;
}
#view-client-detail .cd-action-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
#view-client-detail .cd-action-meta span {
  display: flex; align-items: center; gap: 5px;
}
#view-client-detail .cd-action-meta i,
#view-client-detail .cd-action-meta svg { width: 13px; height: 13px; }
#view-client-detail .cd-action-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Unified timeline ────────────────────────────────────────── */
#view-client-detail .cd-timeline { display: flex; flex-direction: column; }
#view-client-detail .cd-timeline-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--card-bg) 96%, var(--surface-soft));
}
#view-client-detail .cd-timeline-page-indicator {
  flex: 1;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
}
#view-client-detail .cd-tl-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  scroll-margin-top: 110px;
  transition: background .12s, border-color .16s ease, box-shadow .18s ease;
}
#view-client-detail .cd-tl-item:last-child { border-bottom: none; }
#view-client-detail .cd-tl-item:hover { background: var(--surface-soft); }
#view-client-detail .cd-tl-item--note {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 94%, var(--primary) 2%), var(--card-bg));
}
#view-client-detail .cd-tl-item--interaction {
  background: transparent;
}
#view-client-detail .cd-tl-item.cd-tl-item-focus {
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border-light));
  box-shadow: inset 3px 0 0 var(--primary);
}
#view-client-detail .cd-tl-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
  flex-shrink: 0;
}
#view-client-detail .cd-tl-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
#view-client-detail .cd-tl-line {
  width: 1px;
  flex: 1;
  background: var(--border-light);
  margin-top: 5px;
  min-height: 16px;
}
#view-client-detail .cd-tl-content { flex: 1; min-width: 0; }
#view-client-detail .cd-tl-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
#view-client-detail .cd-tl-top-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
#view-client-detail .cd-tl-top-head .cd-tl-top {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
#view-client-detail .cd-tl-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: .72;
  transition: opacity .12s ease;
}
#view-client-detail .cd-tl-item:hover .cd-tl-top-actions,
#view-client-detail .cd-tl-item:focus-within .cd-tl-top-actions {
  opacity: 1;
}
#view-client-detail .cd-tl-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#view-client-detail .cd-tl-icon-btn:hover {
  background: var(--surface-soft);
  color: var(--text);
}
#view-client-detail .cd-tl-icon-btn i,
#view-client-detail .cd-tl-icon-btn svg {
  width: 14px;
  height: 14px;
}
#view-client-detail .cd-tl-more {
  position: relative;
}
#view-client-detail .cd-tl-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  z-index: 8;
}
#view-client-detail .cd-tl-menu--up {
  top: auto;
  bottom: calc(100% + 6px);
}
#view-client-detail .cd-tl-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: left;
}
#view-client-detail .cd-tl-menu-item:hover {
  background: var(--surface-soft);
}
#view-client-detail .cd-tl-menu-item.danger {
  color: var(--danger);
}
#view-client-detail .cd-tl-menu-item i,
#view-client-detail .cd-tl-menu-item svg {
  width: 13px;
  height: 13px;
}
#view-client-detail .cd-date-chip {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-soft);
  padding: 2px 7px;
  border-radius: 4px;
}
#view-client-detail .cd-type-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.67rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#view-client-detail .cd-type-badge i,
#view-client-detail .cd-type-badge svg { width: 10px; height: 10px; }
#view-client-detail .cd-tl-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
}
#view-client-detail .cd-tl-meta i,
#view-client-detail .cd-tl-meta svg { width: 11px; height: 11px; }
#view-client-detail .cd-tl-text {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 0;
}
#view-client-detail .cd-tl-title {
  font-size: .86rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 4px;
}
#view-client-detail .cd-tl-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#view-client-detail .cd-tl-footer {
  margin-top: 2px;
}
#view-client-detail .cd-tl-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#view-client-detail .cd-tl-next-action {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--primary) 88%, #0f172a);
  font-weight: 700;
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  padding: 4px 8px;
  border-radius: 999px;
  display: inline-block;
}
.revision-list {
  display: flex;
  flex-direction: column;
}
.revision-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}
.revision-item:last-child {
  border-bottom: none;
}
.revision-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.revision-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: .72rem;
  font-weight: 800;
}
.revision-date {
  color: var(--text-muted);
  font-size: .75rem;
}
.revision-title {
  color: var(--text);
  font-size: .86rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.revision-text {
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.5;
}
#view-client-detail .cd-tl-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}
#view-client-detail .cd-tl-item:hover .cd-tl-actions { opacity: 1; }

/* ── Purchases compact table ─────────────────────────────────── */
#view-client-detail .cd-purchases-table {
  width: 100%;
  border-collapse: collapse;
}
#view-client-detail .cd-purchases-table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 16px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}
#view-client-detail .cd-purchases-table th:last-child,
#view-client-detail .cd-purchases-table th.text-right { text-align: left; }
#view-client-detail .cd-purchases-table td {
  padding: 11px 16px;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}
#view-client-detail .cd-purchases-table tr:last-child td { border-bottom: none; }
#view-client-detail .cd-purchases-table td:first-child {
  color: var(--text-muted);
  font-size: 0.75rem;
  width: 28px;
}
#view-client-detail .cd-purchases-table .cd-pt-product { font-weight: 500; }
#view-client-detail .cd-purchases-table .cd-pt-date { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
#view-client-detail .cd-purchases-table .cd-pt-units { color: var(--text-muted); font-size: 0.78rem; }
#view-client-detail .cd-purchases-table .cd-pt-units-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#view-client-detail .cd-purchases-table .cd-pt-total { text-align: left; font-weight: 700; white-space: nowrap; }
#view-client-detail .cd-purchases-table .cd-pt-actions { text-align: right; white-space: nowrap; width: 1%; }
#view-client-detail .cd-purchases-table .cd-pt-actions .cd-tl-more {
  display: inline-flex;
  justify-content: flex-end;
}
#view-client-detail .cd-purchases-table .cd-pt-actions,
#view-client-detail .cd-purchases-table .cd-pt-actions .cd-tl-more {
  position: relative;
}
#view-client-detail .cd-purchases-responsive,
#view-client-detail #purchases-compact,
#view-client-detail #purchases-list {
  overflow: visible;
}
#view-client-detail .cd-purchases-card {
  overflow: visible;
}
#view-client-detail .cd-purchases-table tr { transition: background .1s; cursor: default; }
#view-client-detail .cd-purchases-table tr:hover td { background: var(--surface-soft); }
#view-client-detail .cd-see-all-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-light);
  cursor: pointer;
  transition: background .12s;
}
#view-client-detail .cd-see-all-btn:hover { background: var(--primary-light); }

/* ── Right sidebar: data rows ────────────────────────────────── */
#view-client-detail .cd-data-rows { display: flex; flex-direction: column; }
#view-client-detail .cd-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  gap: 8px;
}
#view-client-detail .cd-data-row:last-child { border-bottom: none; }
#view-client-detail .cd-data-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
#view-client-detail .cd-data-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  display: flex; align-items: center; gap: 5px;
}
#view-client-detail .cd-data-value-wrap {
  white-space: normal;
  line-height: 1.45;
  max-width: 170px;
  justify-content: flex-end;
}
#view-client-detail .cd-mono {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
}
#view-client-detail .cd-footer-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-light);
  cursor: pointer;
  transition: background .12s;
}
#view-client-detail .cd-footer-link:hover { background: var(--primary-light); }

#view-client-detail .cd-priority-wrap {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-light);
}
#view-client-detail .cd-priority-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#view-client-detail .cd-priority-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 84px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.98));
}
#view-client-detail .cd-priority-chip-label {
  font-size: 0.67rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
#view-client-detail .cd-priority-chip strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
#view-client-detail .cd-priority-chip em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--text-muted);
}
#view-client-detail .cd-priority-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
#view-client-detail .cd-priority-alert {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 11%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  color: var(--text);
  font-size: .73rem;
  font-weight: 700;
}
#view-client-detail .cd-priority-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border-light);
  font-size: .77rem;
  color: var(--text-muted);
}
#view-client-detail .cd-priority-footer strong {
  color: var(--text);
  font-weight: 700;
}
#view-client-detail .cd-rel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
#view-client-detail .cd-rel-item {
  width: 100%;
  text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 98%, white), color-mix(in srgb, var(--surface-soft) 78%, var(--card-bg)));
  border: 1px solid color-mix(in srgb, var(--border) 88%, white);
  border-radius: 16px;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
#view-client-detail .cd-rel-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 98%, white), color-mix(in srgb, var(--primary) 8%, var(--card-bg)));
}
#view-client-detail .cd-rel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#view-client-detail .cd-rel-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--rel-color) 88%, #111827);
  background: color-mix(in srgb, var(--rel-color) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--rel-color) 25%, var(--border));
}
#view-client-detail .cd-rel-date {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
}
#view-client-detail .cd-rel-title {
  font-size: .94rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.32;
}
#view-client-detail .cd-rel-copy {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.58;
}
#view-client-detail .cd-note-summary {
  padding: 14px 16px 16px;
  font-size: .82rem;
  line-height: 1.62;
  color: var(--text);
}
#view-client-detail .cd-note-summary-empty {
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.6;
}
#view-client-detail .cd-data-row-stack {
  display: block;
}
#view-client-detail .cd-data-row-stack .cd-data-label {
  display: block;
  margin-bottom: 8px;
}
#view-client-detail .cd-data-value-block {
  font-size: .8rem;
  line-height: 1.58;
  color: var(--text);
  font-weight: 500;
}

/* ── Right sidebar: contact rows ─────────────────────────────── */
#view-client-detail .cd-contact-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background .12s;
}
#view-client-detail .cd-contact-row:last-child { border-bottom: none; }
#view-client-detail .cd-contact-row:hover { background: var(--surface-soft); }
#view-client-detail .cd-contact-card .cd-contact-row {
  padding: 12px 16px;
}
#view-client-detail .cd-contact-primary {
  margin: 14px 16px 4px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--card-bg));
  border-radius: 14px;
}
#view-client-detail .cd-contact-primary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#view-client-detail .cd-contact-primary-top strong {
  font-size: .84rem;
  color: var(--text);
}
#view-client-detail .cd-contact-primary-meta {
  margin-top: 4px;
  font-size: .76rem;
  color: var(--text-muted);
}
#view-client-detail .cd-quick-mail-copy {
  padding: 4px 16px 12px;
  font-size: .78rem;
  color: var(--text-muted);
}
#view-client-detail .cd-quick-mail-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}
.purchase-discount-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--card-bg));
}
.purchase-discount-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.purchase-discount-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.purchase-discount-controls .form-control {
  min-width: 220px;
}
.purchase-discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, white);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  color: var(--text);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
#view-client-detail .cd-contact-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#view-client-detail .cd-contact-icon i,
#view-client-detail .cd-contact-icon svg { width: 14px; height: 14px; }
#view-client-detail .cd-contact-text {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-client-detail .cd-contact-text a {
  color: inherit;
  text-decoration: none;
}
#view-client-detail .cd-contact-text a:hover {
  color: var(--primary);
}
#view-client-detail .cd-contact-action {
  color: var(--text-muted);
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
#view-client-detail .cd-contact-action i,
#view-client-detail .cd-contact-action svg { width: 13px; height: 13px; }

/* ── Right sidebar: evaluation scores ───────────────────────── */
#view-client-detail .cd-score-rows { padding: 4px 0; }
#view-client-detail .cd-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
}
#view-client-detail .cd-score-label {
  width: 70px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
#view-client-detail .cd-score-track {
  flex: 1;
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}
#view-client-detail .cd-score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
#view-client-detail .cd-score-num {
  width: 32px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
#view-client-detail .cd-score-date {
  padding: 6px 16px 10px;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
}
#view-client-detail .cd-score-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 16px;
  color: var(--text-muted);
  font-size: 0.8rem;
}
#view-client-detail .cd-score-empty i,
#view-client-detail .cd-score-empty svg { width: 24px; height: 24px; margin-bottom: 4px; }

/* ── Right sidebar: location ─────────────────────────────────── */
#view-client-detail .cd-location-address {
  padding: 12px 16px;
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 500;
  display: flex; align-items: flex-start; gap: 8px;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.5;
}
#view-client-detail .cd-location-address i,
#view-client-detail .cd-location-address svg {
  width: 14px; height: 14px;
  color: var(--text-muted);
  margin-top: 2px;
  flex-shrink: 0;
}
#view-client-detail .cd-map-container {
  height: 150px;
  border-radius: 0;
  overflow: hidden;
}
#view-client-detail .cd-map-btns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-light);
}
#view-client-detail .cd-map-btns .btn {
  width: 100%;
  justify-content: center;
  min-width: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  #view-client-detail .cd-col-right { width: 272px; }
}
@media (max-width: 1024px) {
  #view-client-detail .cd-two-col { flex-direction: column; }
  #view-client-detail .cd-col-right { width: 100%; }
}
@media (max-width: 768px) {
  #view-client-detail .cd-priority-grid { grid-template-columns: 1fr; }
  #view-client-detail .cd-quick-mail-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  #view-client-detail .cd-quick-mail-actions .btn {
    min-width: 0;
    min-height: 54px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    line-height: 1.1;
    font-size: .75rem;
  }
  #view-client-detail .cd-quick-mail-actions .btn i,
  #view-client-detail .cd-quick-mail-actions .btn svg {
    width: 15px;
    height: 15px;
  }
  #view-client-detail .cd-stat-bar { flex-wrap: wrap; }
  #view-client-detail .cd-stat-item {
    flex: 0 0 50%;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  #view-client-detail .cd-stat-item:nth-child(odd) { border-right: 1px solid var(--border-light); }
  #view-client-detail .cd-stat-item:last-child { border-bottom: none; }
  #view-client-detail .cd-actions { width: 100%; }
  #view-client-detail .cd-client-name { font-size: 1.1rem; }
}

@media (max-width: 768px) {
  #view-client-detail {
    padding-bottom: 22px;
    overflow-x: hidden;
  }
  #view-client-detail .cd-breadcrumb {
    margin: 0 2px 12px;
    font-size: .82rem;
  }
  #view-client-detail .client-header-card {
    border-radius: 20px;
    overflow: hidden;
  }
  #view-client-detail .client-header-top {
    position: relative;
    padding: 16px 16px 12px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: flex-start;
    column-gap: 12px;
    row-gap: 12px;
  }
  #view-client-detail .cd-avatar {
    grid-column: 1;
    grid-row: 1;
    width: 56px;
    height: 56px;
    font-size: 1.15rem;
    border-radius: 18px;
    flex-shrink: 0;
  }
  #view-client-detail .cd-client-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    flex: 1;
    padding-right: 48px;
  }
  #view-client-detail .cd-client-name {
    font-size: 1.12rem;
    line-height: 1.15;
    margin-bottom: 0;
  }
  #view-client-detail .cd-title-row {
    display: block;
    margin-bottom: 4px;
  }
  #view-client-detail .cd-client-company {
    font-size: .84rem;
    margin-bottom: 8px;
  }
  #view-client-detail .cd-badge-row {
    gap: 4px;
    justify-content: flex-start;
    margin-top: 6px;
  }
  #view-client-detail .cd-badge-row .badge {
    min-height: 24px;
    padding: 4px 7px;
    font-size: .68rem;
    border-radius: 999px;
  }
  #view-client-detail .cd-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 0;
    min-width: 0;
  }
  #view-client-detail .cd-actions > .btn.btn-primary {
    grid-column: 1 / -1;
  }
  #view-client-detail .cd-header-edit-btn {
    display: none;
  }
  #view-client-detail .cd-actions .btn {
    width: 100%;
    justify-content: center;
    min-width: 0;
  }
  #view-client-detail .cd-actions .btn.btn-icon,
  #view-client-detail .cd-actions .btn-ghost.btn-icon,
  #view-client-detail .cd-actions .btn-ghost {
    min-height: 40px;
  }
  #view-client-detail .cd-header-more {
    position: absolute;
    top: 16px;
    right: 16px;
    margin-left: 0;
    z-index: 3;
  }
  #view-client-detail .cd-actions .cd-header-more {
    grid-column: auto;
    justify-self: auto;
  }
  #view-client-detail .cd-header-more .btn {
    width: 40px;
    min-width: 40px;
    padding-inline: 0;
    justify-content: center;
  }
  #view-client-detail .cd-stat-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border-light);
  }
  #view-client-detail .cd-stat-item {
    min-width: 0;
    padding: 14px 14px 13px;
    gap: 4px;
  }
  #view-client-detail .cd-stat-value {
    order: 2;
    font-size: 1.02rem;
    line-height: 1.1;
  }
  #view-client-detail .cd-stat-label {
    order: 1;
    font-size: .7rem;
    letter-spacing: .05em;
  }
  #view-client-detail .cd-two-col {
    width: 100%;
    gap: 14px;
  }
  #view-client-detail .cd-col-left,
  #view-client-detail .cd-col-right {
    gap: 14px;
  }
  #view-client-detail .card,
  #view-client-detail .cd-action-card,
  #view-client-detail .cd-brief-band,
  #view-client-detail .cd-rel-item,
  #view-client-detail .cd-priority-chip,
  #view-client-detail .cd-tl-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 18px;
  }
  #view-client-detail .cd-card-header {
    padding: 13px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }
  #view-client-detail .cd-card-header h3 {
    font-size: .83rem;
    min-width: 0;
  }
  #view-client-detail .cd-card-header .btn {
    min-height: 34px;
    min-width: 0;
    flex: 0 1 auto;
  }
  #view-client-detail .cd-history-card .cd-card-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #view-client-detail .cd-history-head {
    width: 100%;
  }
  #view-client-detail .cd-history-actions {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #view-client-detail .cd-history-actions > .btn:first-child {
    grid-column: 1 / -1;
  }
  #view-client-detail .cd-history-actions > .btn {
    width: 100%;
    justify-content: center;
  }
  #view-client-detail .cd-timeline-pagination {
    padding: 12px 14px 14px;
    gap: 8px;
  }
  #view-client-detail .cd-timeline-pagination .btn {
    min-width: 0;
    padding-inline: 12px;
  }
  #view-client-detail .cd-timeline-page-indicator {
    font-size: .76rem;
  }
  #view-client-detail .cd-action-body {
    padding: 15px 16px 16px;
  }
  #view-client-detail .cd-action-text {
    font-size: 1rem;
    margin-bottom: 10px;
  }
  #view-client-detail .cd-action-meta {
    gap: 10px 14px;
    margin-bottom: 14px;
  }
  #view-client-detail .cd-action-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #view-client-detail .cd-action-btns .btn {
    width: 100%;
    justify-content: center;
  }
  #view-client-detail .cd-rel-list {
    padding: 12px;
    gap: 10px;
  }
  #view-client-detail .cd-rel-item {
    padding: 12px 13px;
    border-radius: 15px;
  }
  #view-client-detail .cd-rel-title {
    font-size: .9rem;
  }
  #view-client-detail .cd-rel-copy {
    font-size: .79rem;
    line-height: 1.52;
  }
  #view-client-detail .cd-brief-band {
    margin-bottom: 14px;
  }
  #view-client-detail .cd-brief-band-inner {
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
  }
  #view-client-detail .cd-brief-band-left {
    width: 100%;
    min-width: 0;
  }
  #view-client-detail .cd-brief-band-notes {
    width: 100%;
  }
  #view-client-detail .cd-brief-chip {
    max-width: 100%;
  }
  #view-client-detail .cd-brief-chip-text {
    max-width: 100%;
  }
  #view-client-detail .cd-priority-wrap {
    padding: 12px 13px 10px;
  }
  #view-client-detail .cd-priority-chip {
    min-height: 74px;
    padding: 11px 12px;
    border-radius: 13px;
  }
  #view-client-detail .cd-priority-footer {
    padding: 10px 13px 12px;
    gap: 8px 12px;
  }
  #view-client-detail .cd-tl-item {
    padding: 12px 14px;
    gap: 10px;
  }
  #view-client-detail .cd-tl-top-head {
    gap: 10px;
    margin-bottom: 7px;
  }
  #view-client-detail .cd-tl-title {
    font-size: .84rem;
  }
  #view-client-detail .cd-tl-text {
    font-size: .79rem;
    line-height: 1.48;
  }
  #view-client-detail .cd-purchases-table th,
  #view-client-detail .cd-purchases-table td {
    padding-left: 12px;
    padding-right: 12px;
  }
  #view-client-detail .cd-contact-card .cd-contact-row {
    padding: 11px 14px;
  }
  #view-client-detail .cd-note-summary {
    padding: 13px 14px 14px;
  }
  #view-client-detail .cd-map-container {
    height: 170px;
  }
  #view-client-detail .cd-two-col,
  #view-client-detail .cd-col-left,
  #view-client-detail .cd-col-right,
  #view-client-detail .client-header-card,
  #view-client-detail .card,
  #view-client-detail .cd-action-card,
  #view-client-detail .cd-brief-band {
    min-width: 0;
    max-width: 100%;
  }
  #view-client-detail .cd-card-header > *,
  #view-client-detail .cd-action-body > *,
  #view-client-detail .cd-priority-wrap > *,
  #view-client-detail .cd-priority-footer > *,
  #view-client-detail .cd-brief-band-inner > * {
    min-width: 0;
    max-width: 100%;
  }
  #view-client-detail .cd-col-left,
  #view-client-detail .cd-col-right {
    display: contents;
  }
  #view-client-detail .cd-history-card { order: 20; }
  #view-client-detail .cd-internal-notes-card { order: 21; }
  #view-client-detail .cd-personal-card { order: 22; }
  #view-client-detail .cd-events-card { order: 23; }
  #view-client-detail .cd-purchases-card { order: 24; }
  #view-client-detail .cd-contact-card { order: 25; }
  #view-client-detail .cd-evaluation-card { order: 30; }
  #view-client-detail .cd-location-card { order: 31; }
  #view-client-detail .cd-account-archive-card { order: 32; }
  #view-client-detail .cd-radar-card { order: 40; }
}

/* Sidebar and client detail refinement: 2026-03-29 */
.sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.18) 0%, transparent 28%),
    linear-gradient(180deg, #3158da 0%, #274cc9 52%, #2140b6 100%) !important;
}
.sidebar-header,
.sidebar-footer {
  border-color: rgba(255,255,255,.12) !important;
}
.sidebar-header {
  padding: 20px 18px 16px !important;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.sidebar-brand-icon .logo-icon {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
  color: #fff !important;
}
.sidebar .logo-lockup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar .logo-text {
  color: #fff !important;
  font-size: 1.26rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.sidebar .logo-subtext {
  color: rgba(255,255,255,.68) !important;
  font-size: .78rem;
  font-weight: 500;
}
.sidebar-nav {
  padding: 14px 12px 16px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-group-label {
  padding: 0 8px;
  color: rgba(255,255,255,.42);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sidebar-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar .nav-link {
  min-height: 40px;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.86) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.sidebar .nav-link svg {
  width: 17px !important;
  height: 17px !important;
  color: rgba(255,255,255,.94) !important;
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.sidebar .nav-link.active {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 24px rgba(14, 24, 88, .18) !important;
}
.sidebar .nav-link-text {
  flex: 1;
  font-weight: 700;
}
.sidebar .nav-count {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sidebar .nav-link.active .nav-count {
  background: rgba(255,255,255,.22);
}
.sidebar-version {
  display: none !important;
}
.sidebar-user-name {
  color: #fff !important;
}
.sidebar-user-role {
  color: rgba(255,255,255,.64) !important;
}

#view-client-detail .cd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 16px;
  color: var(--text-muted);
  font-size: .9rem;
}
#view-client-detail .cd-breadcrumb-back,
#view-client-detail .cd-breadcrumb-link {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  cursor: pointer;
}
#view-client-detail .cd-breadcrumb-back:hover,
#view-client-detail .cd-breadcrumb-link:hover {
  color: var(--primary);
}
#view-client-detail .cd-breadcrumb-back svg {
  width: 16px;
  height: 16px;
}
#view-client-detail .cd-breadcrumb-current {
  color: var(--text);
  font-weight: 600;
}
#view-client-detail .cd-breadcrumb-sep {
  color: var(--border);
}
#view-client-detail .cd-card-header {
  padding: 14px 18px;
}
#view-client-detail .cd-purchases-table th {
  background: #f2f6fd;
}
#view-client-detail .cd-purchases-table td {
  padding: 13px 16px;
}
#view-client-detail .cd-score-row {
  padding: 10px 16px;
}
#view-client-detail .cd-map-container {
  height: 170px;
  background: #edf4fb;
}
@media (min-width: 1025px) {
  #view-client-detail .cd-col-right {
    position: static;
    top: auto;
  }
}
@media (max-width: 768px) {
  .sidebar-group-label {
    padding-left: 2px;
  }
  #view-client-detail .cd-breadcrumb {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* ============================================================
   FINAL DARK MODE POLISH
   ============================================================ */
body.theme-dark {
  color-scheme: dark;
  --bg: #08111f;
  --card-bg: #0f1b2d;
  --surface-soft: #132238;
  --text: #e6eef8;
  --text-muted: #96a7bf;
  --border: #223249;
  --border-light: #172437;
  --chart-grid: #223249;
  --shadow-sm: 0 10px 26px rgba(2, 6, 23, 0.24);
  --shadow: 0 18px 40px rgba(2, 6, 23, 0.34);
  --shadow-md: 0 24px 50px rgba(2, 6, 23, 0.42);
}

body.theme-dark,
body.theme-dark .main-wrapper,
body.theme-dark .main-content {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 18%),
    linear-gradient(180deg, #07111e 0%, #08111f 100%);
}

body.theme-dark .sidebar {
  background: linear-gradient(180deg, #0d1929 0%, #0a1420 100%) !important;
  border-right: 1px solid rgba(255,255,255,.06);
}

body.theme-dark .sidebar-header,
body.theme-dark .sidebar-footer {
  border-color: rgba(255,255,255,.08);
  background: transparent;
}

body.theme-dark .topbar {
  background: rgba(8, 17, 31, .72) !important;
  border-color: rgba(255,255,255,.06);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

body.theme-dark .card,
body.theme-dark .kpi-card,
body.theme-dark .section-banner,
body.theme-dark .insight-card,
body.theme-dark .mobile-ranking-card,
body.theme-dark .focus-item,
body.theme-dark .focus-row,
body.theme-dark .client-header-card,
body.theme-dark .detail-panel,
body.theme-dark .backup-panel,
body.theme-dark .backup-row,
body.theme-dark .backup-step,
body.theme-dark .report-kpi-card,
body.theme-dark .report-list-item,
body.theme-dark .search-dropdown,
body.theme-dark .user-dropdown,
body.theme-dark .modal-container,
body.theme-dark .topbar-search input,
body.theme-dark .form-control,
body.theme-dark .form-input,
body.theme-dark textarea,
body.theme-dark select,
body.theme-dark .btn-secondary,
body.theme-dark .btn-ghost,
body.theme-dark .btn-outline,
body.theme-dark .theme-toggle {
  background: var(--card-bg) !important;
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

body.theme-dark .modal-overlay {
  background: rgba(2, 6, 23, .74);
  backdrop-filter: blur(8px);
}

body.theme-dark .modal-header {
  background: #122034;
  border-bottom-color: var(--border);
}

body.theme-dark .topbar-search input:focus,
body.theme-dark .form-control:focus,
body.theme-dark .form-input:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus {
  background: #132238 !important;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

body.theme-dark .search-item:hover,
body.theme-dark .dropdown-item:hover,
body.theme-dark .table tbody tr:hover,
body.theme-dark .clickable-row:hover,
body.theme-dark .ranking-row:hover,
body.theme-dark .mobile-ranking-card:hover,
body.theme-dark .focus-item:hover,
body.theme-dark .focus-row:hover,
body.theme-dark .cd-contact-row:hover,
body.theme-dark .cd-tl-item:hover,
body.theme-dark .cd-purchases-table tr:hover td {
  background: #132238 !important;
}

body.theme-dark .table,
body.theme-dark .table-responsive,
body.theme-dark .tabs,
body.theme-dark .tab-content,
body.theme-dark .card-header,
body.theme-dark .modal-footer,
body.theme-dark .cd-stat-bar,
body.theme-dark .cd-data-row,
body.theme-dark .cd-contact-row,
body.theme-dark .cd-purchases-table th,
body.theme-dark .cd-purchases-table td,
body.theme-dark .reports-card-head,
body.theme-dark .reports-zone-row,
body.theme-dark .reports-opp-item,
body.theme-dark .reports-acc-item {
  border-color: var(--border-light) !important;
}

body.theme-dark .table th,
body.theme-dark .tab-btn,
body.theme-dark .cd-purchases-table th,
body.theme-dark .cd-data-label,
body.theme-dark .reports-table th,
body.theme-dark .reports-zone-meta,
body.theme-dark .reports-list-meta,
body.theme-dark .reports-matrix-axis,
body.theme-dark .reports-kpi-label {
  color: var(--text-muted) !important;
}

body.theme-dark .table td,
body.theme-dark .tab-btn.active,
body.theme-dark .card-header h3,
body.theme-dark .modal-header h3,
body.theme-dark .cd-client-name,
body.theme-dark .cd-data-value,
body.theme-dark .cd-contact-text,
body.theme-dark .reports-table td,
body.theme-dark .reports-zone-name,
body.theme-dark .reports-opp-name,
body.theme-dark .reports-acc-name {
  color: var(--text) !important;
}

body.theme-dark .tabs {
  background: transparent;
}

body.theme-dark .tab-btn {
  background: transparent;
}

body.theme-dark .tab-btn.active {
  background: rgba(59, 130, 246, .10);
  border-bottom-color: #60a5fa;
}

body.theme-dark .btn-primary {
  box-shadow: 0 10px 24px rgba(37, 99, 235, .26);
}

body.theme-dark .btn-secondary:hover,
body.theme-dark .btn-ghost:hover,
body.theme-dark .btn-outline:hover,
body.theme-dark .theme-toggle:hover {
  background: #132238 !important;
}

body.theme-dark #view-client-detail .cd-map-container,
body.theme-dark .leaflet-container {
  background: #0c1728;
}

body.theme-dark #view-client-detail .cd-purchases-table th {
  background: #132238 !important;
}

body.theme-dark #view-client-detail .cd-breadcrumb-sep {
  color: #334155;
}

body.theme-dark #view-client-detail .cd-action-card {
  background: linear-gradient(180deg, #121f31 0%, #101b2b 100%) !important;
  border-color: #27415c !important;
  border-left-color: #f97316 !important;
  box-shadow: 0 12px 30px rgba(2, 6, 23, .32);
}

body.theme-dark #view-client-detail .cd-action-overdue {
  background: linear-gradient(180deg, #24161b 0%, #191219 100%) !important;
  border-left-color: #ef4444 !important;
  border-color: #4b2430 !important;
}

body.theme-dark #view-client-detail .cd-action-header,
body.theme-dark #view-client-detail .cd-map-btns,
body.theme-dark #view-client-detail .cd-purchases-table thead th {
  background: transparent;
}

body.theme-dark #view-client-detail .cd-date-chip,
body.theme-dark #view-client-detail .cd-tl-meta,
body.theme-dark #view-client-detail .cd-contact-action,
body.theme-dark #view-client-detail .cd-see-all-btn,
body.theme-dark #view-client-detail .cd-location-address,
body.theme-dark #view-client-detail #coords-display,
body.theme-dark #view-client-detail .cd-rel-date,
body.theme-dark #view-client-detail .cd-priority-footer {
  color: var(--text-muted) !important;
}

body.theme-dark #view-client-detail .cd-see-all-btn:hover,
body.theme-dark #view-client-detail .cd-contact-text a:hover {
  color: #bfdbfe !important;
}
body.theme-dark #view-client-detail .cd-rel-item {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 96%, #0b1320), color-mix(in srgb, var(--surface-soft) 72%, var(--card-bg)));
  border-color: color-mix(in srgb, var(--border) 82%, #1f2937);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}
body.theme-dark #view-client-detail .cd-rel-item:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 98%, #0b1320), color-mix(in srgb, var(--primary) 12%, var(--card-bg))) !important;
}
body.theme-dark #view-client-detail .cd-rail-icon-btn {
  background: color-mix(in srgb, var(--card-bg) 94%, #0b1320);
  border-color: color-mix(in srgb, var(--border) 86%, #1f2937);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
body.theme-dark #view-client-detail .cd-tl-icon-btn:hover,
body.theme-dark #view-client-detail .cd-tl-menu-item:hover {
  background: #132238 !important;
}
body.theme-dark #view-client-detail .cd-tl-menu {
  background: #122034 !important;
  border-color: var(--border) !important;
}
body.theme-dark #view-client-detail .cd-tl-menu-item {
  color: var(--text) !important;
}
body.theme-dark #view-client-detail .cd-tl-menu-item.danger {
  color: #fda4af !important;
}
@media (max-width: 768px) {
  #view-client-detail .cd-tl-top-head {
    gap: 8px;
  }
  #view-client-detail .cd-tl-top-actions {
    gap: 2px;
  }
  #view-client-detail .cd-tl-icon-btn {
    width: 26px;
    height: 26px;
  }
}

body.theme-dark .revision-badge {
  background: rgba(59, 130, 246, .16);
  color: #bfdbfe;
}

body.theme-dark .client-form-section {
  background: linear-gradient(180deg, rgba(15, 27, 45, .98), rgba(18, 34, 56, .98)) !important;
  border-color: var(--border) !important;
}

body.theme-dark .client-form-section.personal {
  box-shadow: inset 0 1px 0 rgba(96, 165, 250, .16);
}

body.theme-dark .client-form-section.commercial {
  box-shadow: inset 0 1px 0 rgba(245, 158, 11, .18);
}

body.theme-dark .client-form-section.activity {
  box-shadow: inset 0 1px 0 rgba(16, 185, 129, .18);
}

body.theme-dark .client-form-section.notes {
  box-shadow: inset 0 1px 0 rgba(99, 102, 241, .18);
}

body.theme-dark .client-form-section-title,
body.theme-dark .client-form-section-title svg,
body.theme-dark .form-check-label {
  color: var(--text) !important;
}

body.theme-dark #view-reports .reports-kpi-badge.neutral,
body.theme-dark #view-reports .reports-card-tag,
body.theme-dark #view-reports .reports-zone-contacts,
body.theme-dark #view-reports .reports-opp-item:hover,
body.theme-dark #view-reports .reports-acc-item:hover {
  background: #132238 !important;
  color: var(--text-muted) !important;
}

body.theme-dark .focus-row {
  background: linear-gradient(180deg, #101c2d 0%, #0e1727 100%) !important;
  border-color: var(--border) !important;
}

body.theme-dark .focus-row:hover {
  border-color: rgba(96, 165, 250, .34) !important;
  box-shadow: 0 16px 28px rgba(2, 6, 23, .34) !important;
}

/* Sidebar theme split */
body:not(.theme-dark) .sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(59,130,246,.14) 0%, transparent 28%),
    linear-gradient(180deg, #f7fbff 0%, #eff5ff 52%, #e8f0ff 100%) !important;
  border-right: 1px solid rgba(37, 99, 235, .12) !important;
}

body:not(.theme-dark) .sidebar-header,
body:not(.theme-dark) .sidebar-footer {
  border-color: rgba(37, 99, 235, .10) !important;
}

body:not(.theme-dark) .sidebar-brand-icon {
  background: rgba(37, 99, 235, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

body:not(.theme-dark) .sidebar-brand-icon .logo-icon {
  color: #1d4ed8 !important;
}

body:not(.theme-dark) .sidebar .logo-text,
body:not(.theme-dark) .sidebar-user-name {
  color: #0f172a !important;
}

body:not(.theme-dark) .sidebar .logo-subtext,
body:not(.theme-dark) .sidebar-group-label,
body:not(.theme-dark) .sidebar-user-role {
  color: #64748b !important;
}

body:not(.theme-dark) .sidebar .nav-link {
  color: #334155 !important;
}

body:not(.theme-dark) .sidebar .nav-link svg {
  color: #475569 !important;
}

body:not(.theme-dark) .sidebar .nav-link:hover {
  background: rgba(37, 99, 235, .08) !important;
  color: #0f172a !important;
}

body:not(.theme-dark) .sidebar .nav-link.active {
  background: rgba(37, 99, 235, .12) !important;
  color: #0f172a !important;
  border-color: rgba(37, 99, 235, .14) !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .08) !important;
}

body:not(.theme-dark) .sidebar .nav-count {
  background: rgba(37, 99, 235, .12) !important;
  color: #1d4ed8 !important;
}

body:not(.theme-dark) .sidebar .nav-link.active .nav-count {
  background: rgba(37, 99, 235, .18) !important;
  color: #1d4ed8 !important;
}

body.theme-dark .sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.08) 0%, transparent 22%),
    linear-gradient(180deg, #17338f 0%, #142d7d 36%, #10255f 72%, #0b1b46 100%) !important;
}

body.theme-dark .sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: -16px;
  width: 20px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 11, 24, .26) 0%, rgba(5, 11, 24, .12) 45%, rgba(5, 11, 24, 0) 100%);
}

body.theme-dark .sidebar .nav-link {
  color: rgba(255,255,255,.86) !important;
}

body.theme-dark .sidebar .nav-link svg,
body.theme-dark .sidebar .logo-text,
body.theme-dark .sidebar-user-name {
  color: #ffffff !important;
}

body.theme-dark .sidebar .logo-subtext,
body.theme-dark .sidebar-group-label,
body.theme-dark .sidebar-user-role {
  color: rgba(255,255,255,.64) !important;
}


/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — Legacy Modal Styles (used by followup modals)
   ═══════════════════════════════════════════════════════════════ */
.dash-modal-list {
  display: flex;
  flex-direction: column;
}
.dash-modal-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.dash-modal-row-button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.dash-modal-row:last-child { border-bottom: none; }
.dash-modal-row:hover { background: var(--surface-soft); }
.dash-modal-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-modal-row-title { font-size: .9rem; font-weight: 700; color: var(--text); }
.dash-modal-row-sub { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.dash-modal-row-side { flex-shrink: 0; display: flex; align-items: flex-start; }





/* ====================================================
   Dashboard — Professional Redesign
   ==================================================== */





#view-dashboard .dash-kpi-action-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
}
#view-dashboard .dash-kpi-action-card .dash-kpi-body {
  pointer-events: none;
}
#view-dashboard .dash-kpi-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 14px 14px;
  opacity: 0;
  transition: opacity .2s;
}
#view-dashboard .dash-kpi-card:hover::after { opacity: 1; }
#view-dashboard .dash-kpi-card:has(.dash-kpi-blue)::after   { background: #1d4ed8; }
#view-dashboard .dash-kpi-card:has(.dash-kpi-green)::after  { background: #15803d; }
#view-dashboard .dash-kpi-card:has(.dash-kpi-purple)::after { background: #7c3aed; }
#view-dashboard .dash-kpi-card:has(.dash-kpi-amber)::after  { background: #b45309; }
#view-dashboard .dash-kpi-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
#view-dashboard .dash-kpi-action-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 2px;
}
#view-dashboard .dash-kpi-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#view-dashboard .dash-kpi-icon i,
#view-dashboard .dash-kpi-icon svg { width: 20px; height: 20px; }
#view-dashboard .dash-kpi-blue   { background: #dbeafe; color: #1d4ed8; }
#view-dashboard .dash-kpi-green  { background: #dcfce7; color: #15803d; }
#view-dashboard .dash-kpi-purple { background: #ede9fe; color: #7c3aed; }
#view-dashboard .dash-kpi-amber  { background: #fef3c7; color: #b45309; }
#view-dashboard .dash-kpi-body { flex: 1; min-width: 0; }
#view-dashboard .dash-kpi-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-dashboard .dash-kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
#view-dashboard .dash-kpi-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ── Moments row ─────────────────────────────────────────────── */
#view-dashboard .dash-moments-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
#view-dashboard .dash-moments-card { overflow: hidden; }

/* Moment items */
#view-dashboard .dash-moment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
#view-dashboard .dash-moment-row:last-child { border-bottom: none; }
#view-dashboard .dash-moment-row:hover { background: var(--surface-soft); }
#view-dashboard .dash-moment-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#view-dashboard .dash-moment-icon i,
#view-dashboard .dash-moment-icon svg { width: 14px; height: 14px; }
#view-dashboard .dash-moment-info { flex: 1; min-width: 0; }
#view-dashboard .dash-moment-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-dashboard .dash-moment-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}
#view-dashboard .dash-moment-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
#view-dashboard .tag-pink   { background: #fce7f3; color: #9d174d; }
#view-dashboard .tag-red    { background: #fee2e2; color: #991b1b; }
#view-dashboard .tag-gray   { background: var(--surface-soft); color: var(--text-muted); }
#view-dashboard .tag-green  { background: #dcfce7; color: #166534; }
#view-dashboard .dash-empty-mini {
  padding: 18px 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
#view-dashboard .dash-empty-mini i,
#view-dashboard .dash-empty-mini svg { width: 14px; height: 14px; flex-shrink: 0; }

#view-dashboard .dash-count-button {
  border: none;
  cursor: pointer;
}

#view-dashboard .dash-count-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 2px;
}

#view-dashboard .dash-agenda-list {
  display: flex;
  flex-direction: column;
}

#view-dashboard .dash-agenda-row {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}

#view-dashboard .dash-agenda-row:last-child {
  border-bottom: none;
}

#view-dashboard .dash-agenda-row:hover {
  background: var(--surface-soft);
}

#view-dashboard .dash-agenda-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#view-dashboard .dash-agenda-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#view-dashboard .dash-agenda-name {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
}

#view-dashboard .dash-agenda-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#view-dashboard .dash-agenda-copy {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.dash-modal-list {
  display: flex;
  flex-direction: column;
}

.dash-modal-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.dash-modal-row-button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.dash-modal-row:last-child {
  border-bottom: none;
}

.dash-modal-row:hover {
  background: var(--surface-soft);
}

.dash-modal-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-modal-row-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}

.dash-modal-row-sub {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.dash-modal-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dash-modal-row-side {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

/* ── Insight mini panel ──────────────────────────────────────── */
#view-dashboard .dash-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#view-dashboard .dash-insight-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}
#view-dashboard .dash-insight-item:nth-child(even) { border-right: none; }
#view-dashboard .dash-insight-item:nth-child(3),
#view-dashboard .dash-insight-item:nth-child(4) { border-bottom: none; }
#view-dashboard .dash-insight-num {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 4px;
}
#view-dashboard .dash-insight-item.amber .dash-insight-num { color: #b45309; }
#view-dashboard .dash-insight-item.red   .dash-insight-num { color: #dc2626; }
#view-dashboard .dash-insight-item.blue  .dash-insight-num { color: #1d4ed8; }
#view-dashboard .dash-insight-item.green .dash-insight-num { color: #15803d; }
#view-dashboard .dash-insight-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Pipeline blocks (Estado de cartera) ─────────────────────── */
.pipe-total-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border-light);
}
.pipe-total-num {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text);
}
.pipe-total-lbl {
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 500;
}
.pipe-blocks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-light);
}
.pipe-block {
  padding: 14px 16px 12px;
  background: var(--card-bg);
  cursor: default;
  transition: filter .15s;
}
.pipe-block:hover { filter: brightness(.97); }
.pipe-block-num {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: 3px;
}
.pipe-block-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pipe-block-pct {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Zone bars (Facturación por zona) ────────────────────────── */
#view-dashboard .zone-bars {
  padding: 8px 4px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#view-dashboard .zone-bars-empty {
  padding: 16px;
  font-size: .8125rem;
  color: var(--text-muted);
  text-align: center;
}
#view-dashboard .zbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 6px;
  transition: background .12s;
}
#view-dashboard .zbar-row:hover { background: var(--bg); }
#view-dashboard .zbar-rank {
  width: 18px;
  flex-shrink: 0;
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
#view-dashboard .zbar-body { flex: 1; min-width: 0; }
#view-dashboard .zbar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
#view-dashboard .zbar-name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
#view-dashboard .zbar-amount {
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
}
#view-dashboard .zbar-track {
  height: 6px;
  background: var(--border-light);
  border-radius: 99px;
  overflow: hidden;
}
#view-dashboard .zbar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ====================================================
   Dashboard — Professional Redesign
   ==================================================== */

/* ── Hero ─────────────────────────────────────────── */
#view-dashboard .dash-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
#view-dashboard .dash-greeting {
  font-size: 1.55rem; font-weight: 800; color: var(--text);
  letter-spacing: -.03em; line-height: 1.2; margin: 0;
}
#view-dashboard .dash-greeting-name { color: var(--primary); }
#view-dashboard .dash-subtitle { font-size: .92rem; color: var(--text-muted); margin: 6px 0 0; }
#view-dashboard .dash-subtitle strong { font-weight: 800; color: var(--primary); }

#view-dashboard .dash-briefing-card {
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.94)),
    var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
}
#view-dashboard .dash-briefing-card.is-high {
  border-color: #f5b4b4;
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(255, 255, 255, 0.96)),
    var(--card-bg);
}
#view-dashboard .dash-briefing-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
#view-dashboard .briefing-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--primary-dark);
  flex-shrink: 0;
}
#view-dashboard .briefing-mark svg,
#view-dashboard .briefing-mark i {
  width: 20px;
  height: 20px;
}
#view-dashboard .briefing-head {
  flex: 1;
  min-width: 0;
}
#view-dashboard .briefing-kicker {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--text-muted);
}
#view-dashboard .briefing-heading {
  margin-top: 4px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}
#view-dashboard .briefing-priority {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
#view-dashboard .briefing-priority.is-high { background: #fee2e2; color: #b91c1c; }
#view-dashboard .briefing-priority.is-medium { background: #fef3c7; color: #92400e; }
#view-dashboard .briefing-priority.is-low { background: #e2e8f0; color: #475569; }
#view-dashboard .briefing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
#view-dashboard .briefing-block {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--border-light);
}
#view-dashboard .briefing-label {
  font-size: .69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}
#view-dashboard .briefing-copy {
  margin: 8px 0 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text);
}
#view-dashboard .briefing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}
#view-dashboard .briefing-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#view-dashboard .briefing-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border-light);
  font-size: .73rem;
  font-weight: 700;
  color: var(--text-muted);
}
#view-dashboard .briefing-meta svg,
#view-dashboard .briefing-meta i {
  width: 13px;
  height: 13px;
}

/* ── KPI strip ───────────────────────────────────────── */
#view-dashboard .dash-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
#view-dashboard .dash-kpi-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform .15s, box-shadow .15s;
}
#view-dashboard .dash-kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
#view-dashboard .dash-kpi-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#view-dashboard .dash-kpi-icon i,
#view-dashboard .dash-kpi-icon svg { width: 20px; height: 20px; }
#view-dashboard .kpi-blue   { background: #dbeafe; color: #1d4ed8; }
#view-dashboard .kpi-green  { background: #dcfce7; color: #15803d; }
#view-dashboard .kpi-amber  { background: #fef3c7; color: #b45309; }
#view-dashboard .kpi-purple { background: #ede9fe; color: #7c3aed; }
#view-dashboard .dash-kpi-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#view-dashboard .dash-kpi-number {
  font-size: 1.35rem; font-weight: 800; color: var(--text);
  letter-spacing: -.03em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-dashboard .dash-kpi-tag {
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── Main grid ───────────────────────────────────────── */
#view-dashboard .dash-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}

/* ── Panels ──────────────────────────────────────────── */
#view-dashboard .dash-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 20px;
}
#view-dashboard .dash-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}
#view-dashboard .dash-panel-head h3 {
  font-size: 1rem; font-weight: 800; color: var(--text);
  margin: 0; flex: 1; min-width: 0;
}
#view-dashboard .dash-panel-desc {
  font-size: .78rem; color: var(--text-muted); margin-left: auto; flex-shrink: 0;
}
#view-dashboard .dash-panel-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#view-dashboard .dash-panel-icon i,
#view-dashboard .dash-panel-icon svg { width: 16px; height: 16px; }
#view-dashboard .dash-panel-icon.primary { background: #dbeafe; color: #1d4ed8; }
#view-dashboard .dash-panel-icon.success { background: #dcfce7; color: #15803d; }
#view-dashboard .dash-panel-icon.danger  { background: #fee2e2; color: #dc2626; }
#view-dashboard .dash-panel-icon.info    { background: #e0f2fe; color: #0369a1; }

/* ── Feed & Row cards ────────────────────────────────── */
#view-dashboard .dash-feed { display: flex; flex-direction: column; }
#view-dashboard .dash-row-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer; transition: background .12s;
}
#view-dashboard .dash-row-card:last-child { border-bottom: none; }
#view-dashboard .dash-row-card:hover { background: var(--surface-soft); }

#view-dashboard .dash-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; color: #fff; flex-shrink: 0;
}
#view-dashboard .avatar-a { background: linear-gradient(135deg, #059669, #10b981); }
#view-dashboard .avatar-b { background: linear-gradient(135deg, #2563eb, #3b82f6); }
#view-dashboard .avatar-c { background: linear-gradient(135deg, #d97706, #f59e0b); }
#view-dashboard .avatar-d { background: linear-gradient(135deg, #dc2626, #ef4444); }

#view-dashboard .dash-row-body { flex: 1; min-width: 0; }
#view-dashboard .dash-row-title {
  font-size: .88rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-dashboard .dash-row-sub {
  font-size: .78rem; color: var(--text-muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
#view-dashboard .dash-row-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

#view-dashboard .dash-row-icon,
#view-dashboard .dash-row-icon-danger {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#view-dashboard .dash-row-icon { background: #dbeafe; color: #1d4ed8; }
#view-dashboard .dash-row-icon-danger { background: #fee2e2; color: #dc2626; }
#view-dashboard .dash-row-icon i,
#view-dashboard .dash-row-icon-danger i { width: 14px; height: 14px; }
#view-dashboard .dash-row-overdue {
  background: color-mix(in srgb, #fef2f2 60%, var(--card-bg));
}

/* Focus score */
#view-dashboard .dash-focus-score {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; flex-shrink: 0;
}
#view-dashboard .dash-focus-metrics {
  display: flex; gap: 12px; margin-top: 4px; font-size: .72rem; color: var(--text-muted);
}
#view-dashboard .dash-focus-metrics strong { color: var(--text); font-weight: 700; }

/* Chart */
#view-dashboard .dash-chart-wrap { padding: 14px 16px; min-height: 180px; }
#view-dashboard .dash-chart-wrap canvas { width: 100% !important; max-height: 200px; }
#view-dashboard .dash-chart-empty {
  min-height: 180px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  text-align: left;
}
#view-dashboard .dash-chart-empty i,
#view-dashboard .dash-chart-empty svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
#view-dashboard .dash-chart-empty strong {
  display: block;
  color: var(--text);
  font-size: .88rem;
  margin-bottom: 4px;
}
#view-dashboard .dash-chart-empty p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
}

/* Empty */
#view-dashboard .dash-empty {
  padding: 24px 20px; font-size: .85rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
#view-dashboard .dash-empty i { width: 16px; height: 16px; }

/* Common soft badges */
.badge-secondary-soft { background: color-mix(in srgb, var(--text-muted) 10%, transparent); color: var(--text-muted); border: none; }
.badge-success-soft { background: #dcfce7; color: #15803d; border: none; }
.tag-red-soft { background: #fee2e2; color: #dc2626; border: none; }
.tag-amber-soft { background: #fef3c7; color: #b45309; border: none; }
.tag-blue-soft { background: #dbeafe; color: #1e40af; border: none; }

/* ── KPI red accent ──────────────────────────────────── */
#view-dashboard .kpi-red { background: #fee2e2; color: #dc2626; }

/* ── Overdue pulse animation ─────────────────────── */
.dash-overdue-pulse {
  color: var(--danger);
  font-weight: 700;
  animation: overduePulse 2s ease-in-out infinite;
}
@keyframes overduePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ── Urgent panel red border ─────────────────────── */
#view-dashboard .dash-panel-urgent {
  border-color: #fca5a5;
  background: linear-gradient(to bottom, #fef2f2, var(--card-bg));
}

/* ── Skip row muted ──────────────────────────────── */
#view-dashboard .dash-row-skip {
  opacity: .7;
  transition: opacity .15s;
}
#view-dashboard .dash-row-skip:hover { opacity: 1; }

/* ═══ ZONE PLANNER ═══════════════════════════════════ */
#view-dashboard .dash-zone-planner {
  display: flex;
  flex-direction: column;
}

#view-dashboard .dash-zone-group {
  border-bottom: 1px solid var(--border-light);
}
#view-dashboard .dash-zone-group:last-child { border-bottom: none; }

#view-dashboard .dash-zone-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}

#view-dashboard .dash-zone-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

#view-dashboard .dash-zone-name {
  font-size: .82rem;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
  flex: 1;
}

#view-dashboard .dash-zone-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--border-light);
  padding: 2px 8px;
  border-radius: 10px;
}

#view-dashboard .dash-zone-items {
  display: flex;
  flex-direction: column;
}

#view-dashboard .dash-zone-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background .12s;
}
#view-dashboard .dash-zone-item:last-child { border-bottom: none; }
#view-dashboard .dash-zone-item:hover { background: var(--bg); }

#view-dashboard .dash-zone-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#view-dashboard .dash-zone-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#view-dashboard .dash-zone-item-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
}

#view-dashboard .dash-zone-item-revenue {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: auto;
}

#view-dashboard .dash-zone-item-action {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.4;
  font-style: italic;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}

#view-dashboard .dash-zone-item-action-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary);
}


/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1100px) {
  #view-dashboard .dash-grid { grid-template-columns: 1fr; }
  #view-dashboard .dash-col-side { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  #view-dashboard .dash-col-side .dash-panel { margin-bottom: 0; }
}
@media (max-width: 768px) {
  #view-dashboard .dash-kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  #view-dashboard .dash-col-side { grid-template-columns: 1fr; }
  #view-dashboard .dash-greeting { font-size: 1.2rem; }
  #view-dashboard .dash-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  #view-dashboard .dash-col-main,
  #view-dashboard .dash-col-side {
    display: contents;
  }
  #view-dashboard .dash-col-main > .dash-panel,
  #view-dashboard .dash-col-side > .dash-panel {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    align-self: stretch;
  }
  #view-dashboard .dash-panel {
    border-radius: 16px;
  }
  #view-dashboard .dash-panel-head {
    padding: 14px 16px;
    gap: 10px;
    flex-wrap: wrap;
  }
  #view-dashboard .dash-panel-head h3 {
    font-size: 0.96rem;
  }
  #view-dashboard .dash-panel-head .btn {
    margin-left: auto;
  }
  #view-dashboard .dash-panel-desc {
    width: 100%;
    margin-left: 44px;
    font-size: 0.74rem;
  }
  #view-dashboard .dash-empty {
    padding: 18px 16px;
    line-height: 1.5;
  }
  #view-dashboard .dash-row-card,
  #view-dashboard .dash-zone-item {
    padding: 12px 16px;
  }
  #view-dashboard .dash-zone-header {
    padding: 10px 16px 8px;
  }
  #view-dashboard .dash-zone-item-action {
    padding: 6px 9px;
  }
  #view-dashboard .dash-col-main > .dash-panel:nth-of-type(1) { order: 1; }
  #view-dashboard .dash-col-side > .dash-panel:nth-of-type(3) { order: 2; }
  #view-dashboard .dash-col-main > .dash-panel:nth-of-type(2) { order: 3; }
  #view-dashboard .dash-col-side > .dash-panel:nth-of-type(2) { order: 4; }
  #view-dashboard .dash-col-side > .dash-panel:nth-of-type(1) { order: 5; }
  #view-dashboard .dash-col-side > .dash-panel:nth-of-type(4) { order: 6; }
}
@media (max-width: 480px) {
  #view-dashboard .dash-kpi-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }
  #view-dashboard .dash-kpi-tile {
    min-height: 76px;
    padding: 12px 14px;
    gap: 10px;
    border-radius: 15px;
  }
  #view-dashboard .dash-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  #view-dashboard .dash-kpi-icon i,
  #view-dashboard .dash-kpi-icon svg {
    width: 18px;
    height: 18px;
  }
  #view-dashboard .dash-kpi-number {
    font-size: 1.08rem;
    line-height: 1.05;
  }
  #view-dashboard .dash-kpi-tag {
    font-size: 0.68rem;
    letter-spacing: 0.03em;
  }
  #view-dashboard .dash-row-card { padding: 12px 14px; gap: 10px; }
  #view-dashboard .dash-panel {
    border-radius: 15px;
  }
  #view-dashboard .dash-panel-head {
    padding: 13px 14px;
  }
  #view-dashboard .dash-panel-head .btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 0.74rem;
  }
  #view-dashboard .dash-panel-desc {
    margin-left: 0;
  }
  #view-dashboard .dash-empty,
  #view-dashboard .dash-chart-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
  #view-dashboard .dash-zone-header,
  #view-dashboard .dash-zone-item {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 380px) {
  #view-dashboard .dash-kpi-strip {
    gap: 8px;
  }
  #view-dashboard .dash-kpi-tile {
    min-height: 70px;
    padding: 11px 12px;
  }
  #view-dashboard .dash-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  #view-dashboard .dash-kpi-number {
    font-size: 1rem;
  }
}

@media (max-width: 520px) {
  .purchase-discount-box {
    align-items: flex-start;
    flex-direction: column;
  }
  .purchase-discount-controls {
    width: 100%;
    justify-content: stretch;
  }
  .purchase-discount-controls .form-control {
    min-width: 0;
    width: 100%;
  }
  #view-client-detail .cd-purchases-table {
    table-layout: fixed;
  }
  #view-client-detail .cd-purchases-table th,
  #view-client-detail .cd-purchases-table td {
    padding: 10px 8px;
  }
  #view-client-detail .cd-purchases-table th:first-child,
  #view-client-detail .cd-purchases-table td:first-child {
    width: 22px;
    padding-left: 10px;
  }
  #view-client-detail .cd-purchases-table .cd-pt-product {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  #view-client-detail .cd-purchases-table .cd-pt-date {
    width: 68px;
    padding-left: 12px;
    white-space: normal;
    line-height: 1.2;
  }
  #view-client-detail .cd-purchases-table .cd-pt-units {
    width: 52px;
    padding-left: 8px;
    white-space: normal;
    line-height: 1.15;
    text-align: center;
  }
  #view-client-detail .cd-purchases-table .cd-pt-total {
    width: 84px;
    font-size: 0.78rem;
    line-height: 1.15;
  }
  #view-client-detail .cd-purchases-table .cd-pt-actions {
    width: 34px;
    padding-right: 10px;
  }
}

@media (max-width: 430px) {
  #view-dashboard .dash-kpi-row { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   CLIENT DETAIL — BRIEFING BAND (neuromarketing)
   ═══════════════════════════════════════════════════════════════ */

#view-client-detail .cd-brief-band {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4c1d95 100%);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
#view-client-detail .cd-brief-band-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  flex-wrap: wrap;
}
#view-client-detail .cd-brief-band-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#view-client-detail .cd-brief-band-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#view-client-detail .cd-brief-band-icon i,
#view-client-detail .cd-brief-band-icon svg {
  width: 14px; height: 14px;
  color: #fbbf24;
}
#view-client-detail .cd-brief-band-title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}
#view-client-detail .cd-brief-bday {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
#view-client-detail .cd-brief-bday--today  { background: #dc2626; color: #fff; }
#view-client-detail .cd-brief-bday--soon   { background: #d97706; color: #fff; }
#view-client-detail .cd-brief-bday--future { background: rgba(255,255,255,.15); color: rgba(255,255,255,.85); }

#view-client-detail .cd-brief-band-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
#view-client-detail .cd-brief-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  cursor: pointer;
  max-width: 260px;
  transition: background .12s, transform .12s, border-color .12s, box-shadow .12s;
  appearance: none;
  text-align: left;
  font-family: inherit;
  min-width: 0;
}
#view-client-detail .cd-brief-chip:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
#view-client-detail .cd-brief-chip:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
#view-client-detail .cd-brief-chip--important {
  border-color: #fbbf24;
  background: rgba(251,191,36,.12);
}
#view-client-detail .cd-brief-chip-cat {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--chip-color, rgba(255,255,255,.5));
  white-space: nowrap;
  flex-shrink: 0;
}
#view-client-detail .cd-brief-chip-text {
  font-size: .76rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   BEHABI PALETTE TUNING
   ============================================================ */
:root {
  --primary: #0d6f66;
  --primary-dark: #0a5952;
  --primary-light: #e7f4f1;
}

body:not(.theme-dark),
body:not(.theme-dark) .main-wrapper,
body:not(.theme-dark) .main-content {
  background:
    radial-gradient(circle at top left, rgba(13, 111, 102, 0.06), transparent 22%),
    linear-gradient(180deg, #f7fbfa 0%, #f2f8f7 100%);
}

body:not(.theme-dark) .topbar {
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(13, 111, 102, .10) !important;
}

body:not(.theme-dark) .topbar-search input:focus,
body:not(.theme-dark) .form-control:focus,
body:not(.theme-dark) .form-input:focus,
body:not(.theme-dark) textarea:focus,
body:not(.theme-dark) select:focus {
  border-color: rgba(13, 111, 102, .45) !important;
  box-shadow: 0 0 0 3px rgba(13, 111, 102, .10) !important;
}

body:not(.theme-dark) .sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(13, 111, 102, .14) 0%, transparent 28%),
    linear-gradient(180deg, #f4faf8 0%, #ebf6f3 52%, #e4f1ee 100%) !important;
  border-right: 1px solid rgba(13, 111, 102, .12) !important;
}

body:not(.theme-dark) .sidebar-header,
body:not(.theme-dark) .sidebar-footer {
  border-color: rgba(13, 111, 102, .10) !important;
}

body:not(.theme-dark) .sidebar-brand-icon {
  background: rgba(13, 111, 102, .10) !important;
}

body:not(.theme-dark) .sidebar-brand-icon .logo-icon {
  color: #0a5952 !important;
}

body:not(.theme-dark) .sidebar .nav-link:hover {
  background: rgba(13, 111, 102, .08) !important;
}

body:not(.theme-dark) .sidebar .nav-link.active {
  background: rgba(13, 111, 102, .12) !important;
  border-color: rgba(13, 111, 102, .14) !important;
  box-shadow: 0 10px 24px rgba(13, 111, 102, .10) !important;
}

body.theme-dark {
  --bg: #071b18;
  --card-bg: #0d2320;
  --surface-soft: #12302c;
  --text: #e8f5f2;
  --text-muted: #9bb3ad;
  --border: #1d3a35;
  --border-light: #17302c;
  --chart-grid: #1d3a35;
  --shadow-sm: 0 10px 26px rgba(2, 10, 9, 0.28);
  --shadow: 0 18px 40px rgba(2, 10, 9, 0.38);
  --shadow-md: 0 24px 50px rgba(2, 10, 9, 0.46);
}

body.theme-dark,
body.theme-dark .main-wrapper,
body.theme-dark .main-content {
  background:
    radial-gradient(circle at top left, rgba(16, 128, 116, 0.12), transparent 20%),
    linear-gradient(180deg, #061614 0%, #071b18 100%);
}

body.theme-dark .sidebar {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.06) 0%, transparent 22%),
    linear-gradient(180deg, #0f5f58 0%, #0d5650 28%, #0b4a45 58%, #083a37 100%) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}

body.theme-dark .sidebar::after {
  right: -12px;
  width: 16px;
  background: linear-gradient(90deg, rgba(8, 34, 31, .34) 0%, rgba(8, 34, 31, .16) 46%, rgba(8, 34, 31, 0) 100%) !important;
}

body.theme-dark .sidebar .nav-link.active {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

body.theme-dark .topbar {
  background: rgba(7, 27, 24, .76) !important;
  border-color: rgba(255,255,255,.06) !important;
}

body.theme-dark .topbar-search input:focus,
body.theme-dark .form-control:focus,
body.theme-dark .form-input:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus {
  background: #12302c !important;
  border-color: rgba(36, 174, 157, .58) !important;
  box-shadow: 0 0 0 3px rgba(36, 174, 157, .16) !important;
}

body.theme-dark .search-item:hover,
body.theme-dark .dropdown-item:hover,
body.theme-dark .table tbody tr:hover,
body.theme-dark .clickable-row:hover,
body.theme-dark .ranking-row:hover,
body.theme-dark .mobile-ranking-card:hover,
body.theme-dark .focus-item:hover,
body.theme-dark .focus-row:hover,
body.theme-dark .cd-contact-row:hover,
body.theme-dark .cd-tl-item:hover,
body.theme-dark .cd-purchases-table tr:hover td {
  background: #12302c !important;
}

.btn-primary {
  background: linear-gradient(135deg, #0d6f66 0%, #13867b 100%);
  border-color: #0d6f66;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0a5952 0%, #0d6f66 100%);
  border-color: #0a5952;
}

/* ============================================================
   CLIENT BRIEFING - LOWER VISUAL INTENSITY
   ============================================================ */
#view-client-detail .cd-brief-band {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(232, 245, 241, .96) 100%);
  border: 1px solid rgba(13, 111, 102, .22);
  border-left: 4px solid rgba(13, 111, 102, .62);
  border-radius: 14px;
  box-shadow:
    0 12px 26px rgba(13, 111, 102, .10),
    inset 0 1px 0 rgba(255,255,255,.56);
}

#view-client-detail .cd-brief-band-inner {
  padding: 12px 16px;
  gap: 12px;
}

#view-client-detail .cd-brief-band-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(13, 111, 102, .16);
  border: 1px solid rgba(13, 111, 102, .22);
}

#view-client-detail .cd-brief-band-icon i,
#view-client-detail .cd-brief-band-icon svg {
  width: 13px;
  height: 13px;
  color: #0d6f66;
}

#view-client-detail .cd-brief-band-title {
  font-size: .70rem;
  letter-spacing: .08em;
  color: rgba(15, 23, 42, .78);
}

#view-client-detail .cd-brief-bday {
  border: 1px solid transparent;
}

#view-client-detail .cd-brief-bday--today {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

#view-client-detail .cd-brief-bday--soon {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

#view-client-detail .cd-brief-bday--future {
  background: rgba(13, 111, 102, .08);
  border-color: rgba(13, 111, 102, .14);
  color: #0a5952;
}

#view-client-detail .cd-brief-chip {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(13, 111, 102, .16);
  min-width: 0;
}

#view-client-detail .cd-brief-chip:hover {
  background: #ffffff;
}

#view-client-detail .cd-brief-chip--important {
  background: #fff7ed;
  border-color: #fdba74;
}

#view-client-detail .cd-brief-chip-text {
  color: rgba(15, 23, 42, .80);
}

body.theme-dark #view-client-detail .cd-brief-band {
  background:
    linear-gradient(180deg, rgba(20, 56, 51, .98) 0%, rgba(13, 35, 32, .99) 100%);
  border-color: rgba(70, 189, 175, .22);
  border-left-color: rgba(70, 189, 175, .56);
  box-shadow: 0 12px 26px rgba(4, 20, 18, .24);
}

body.theme-dark #view-client-detail .cd-brief-band-icon {
  background: rgba(70, 189, 175, .12);
  border-color: rgba(70, 189, 175, .20);
}

body.theme-dark #view-client-detail .cd-brief-band-icon i,
body.theme-dark #view-client-detail .cd-brief-band-icon svg {
  color: #76d6cb;
}

body.theme-dark #view-client-detail .cd-brief-band-title {
  color: rgba(231, 245, 242, .74);
}

body.theme-dark #view-client-detail .cd-brief-chip {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}

body.theme-dark #view-client-detail .cd-brief-chip:hover {
  background: rgba(255,255,255,.05);
}
body.theme-dark #view-client-detail .cd-tl-item.cd-tl-item-focus {
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border-light));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 76%, white);
}

.brief-note-modal {
  display: grid;
  gap: 14px;
}

.modal-overlay-brief-note {
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(5px);
}

.modal-container.modal-brief-note {
  max-width: 520px;
  background: color-mix(in srgb, var(--card-bg) 92%, white);
  border: 1px solid color-mix(in srgb, var(--border) 88%, white);
  box-shadow: 0 28px 56px rgba(15, 23, 42, .18);
}

.modal-container.modal-brief-note .modal-header {
  background: color-mix(in srgb, var(--card-bg) 96%, white);
}

.modal-container.modal-brief-note .modal-body {
  padding: 20px 22px 18px;
}

.modal-overlay-history-sheet {
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(5px);
}

.modal-container.modal-history-sheet {
  max-width: 560px;
  background: color-mix(in srgb, var(--card-bg) 94%, white);
  border: 1px solid color-mix(in srgb, var(--border) 88%, white);
  box-shadow: 0 28px 56px rgba(15, 23, 42, .18);
}

.modal-container.modal-history-sheet .modal-header {
  background: color-mix(in srgb, var(--card-bg) 96%, white);
}

.modal-container.modal-history-sheet .modal-body {
  padding: 18px 20px 16px;
}

.modal-container.modal-history-sheet .revision-list {
  display: grid;
  gap: 10px;
}

.modal-container.modal-history-sheet .revision-item {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--card-bg));
  padding: 14px 14px 12px;
}

.modal-overlay-client-sheet {
  background: rgba(15, 23, 42, .46);
  backdrop-filter: blur(8px);
}

.modal-container.modal-client-sheet {
  max-width: 620px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 96%, white) 0%, color-mix(in srgb, var(--card-bg) 90%, var(--surface-soft)) 100%);
  border: 1px solid color-mix(in srgb, var(--border) 86%, white);
  box-shadow: 0 30px 70px rgba(15, 23, 42, .22);
  overflow: hidden;
}

.modal-container.modal-client-sheet.modal-client-sheet-wide {
  max-width: 900px;
}

.modal-container.modal-client-sheet .modal-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 98%, white) 0%, color-mix(in srgb, var(--card-bg) 94%, var(--surface-soft)) 100%);
  border-bottom-color: color-mix(in srgb, var(--border) 88%, white);
}

.modal-container.modal-client-sheet .modal-body {
  padding: 20px 22px 18px;
  background: transparent;
}

.modal-container.modal-client-sheet .modal-footer {
  background: color-mix(in srgb, var(--card-bg) 94%, var(--surface-soft));
  border-top-color: color-mix(in srgb, var(--border) 88%, white);
}

.modal-container.modal-client-sheet .form-control,
.modal-container.modal-client-sheet .form-select,
.modal-container.modal-client-sheet textarea {
  background: color-mix(in srgb, var(--card-bg) 96%, white);
  border-color: color-mix(in srgb, var(--border) 86%, white);
}

.modal-container.modal-client-sheet .client-form-section,
.modal-container.modal-client-sheet .evaluation-editor,
.modal-container.modal-client-sheet .purchase-form-grid,
.modal-container.modal-client-sheet .purchase-form-side {
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 84%, white);
}

.modal-container.modal-client-sheet .empty-state {
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--card-bg));
  border-radius: 18px;
}

.modal-container.modal-family-manager {
  max-width: 860px;
}

.family-manager-shell {
  display: grid;
  gap: 18px;
}

.family-manager-top {
  display: grid;
  gap: 12px;
}

.family-manager-panel {
  display: grid;
  gap: 16px;
}

.family-manager-empty {
  padding: 18px;
}

.family-manager-current {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, white);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--card-bg));
}

.family-manager-current--fallback {
  border-style: dashed;
}

.family-manager-current-media {
  border-radius: 18px;
  overflow: hidden;
  min-height: 260px;
  background: color-mix(in srgb, var(--surface-soft) 80%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--border) 84%, white);
}

.family-manager-current-img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

.family-manager-current-copy {
  display: grid;
  align-content: start;
  gap: 12px;
}

.family-manager-current-kicker,
.family-manager-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.family-manager-current-copy h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.family-manager-current-copy p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 46ch;
}

.family-manager-current-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.family-manager-gallery {
  display: grid;
  gap: 12px;
}

.family-manager-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.family-manager-thumb {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 86%, white);
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--card-bg));
}

.family-manager-thumb-img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  display: block;
}

.family-manager-thumb-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: color-mix(in srgb, var(--card-bg) 92%, white);
  border-color: color-mix(in srgb, var(--border) 86%, white);
}

.family-manager-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .modal-container.modal-family-manager {
    max-width: calc(100vw - 18px);
  }

  .family-manager-current {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .family-manager-current-media,
  .family-manager-current-img {
    min-height: 180px;
  }

  .family-manager-upload-grid {
    grid-template-columns: 1fr;
  }

  .family-manager-current-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

.modal-overlay-security-sheet {
  background: rgba(15, 23, 42, .54);
  backdrop-filter: blur(10px);
}

.modal-container.modal-security-sheet {
  max-width: 540px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 97%, white) 0%, color-mix(in srgb, var(--card-bg) 90%, var(--surface-soft)) 100%);
  border: 1px solid color-mix(in srgb, var(--border) 86%, white);
  box-shadow: 0 34px 82px rgba(15, 23, 42, .26);
  overflow: hidden;
}

.modal-container.modal-security-sheet .modal-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 99%, white) 0%, color-mix(in srgb, var(--card-bg) 95%, var(--surface-soft)) 100%);
  border-bottom-color: color-mix(in srgb, var(--border) 88%, white);
}

.modal-container.modal-security-sheet .modal-body {
  padding: 20px 22px 18px;
}

.modal-container.modal-security-sheet .modal-footer {
  background: color-mix(in srgb, var(--card-bg) 95%, var(--surface-soft));
  border-top-color: color-mix(in srgb, var(--border) 88%, white);
}

.modal-container.modal-security-sheet .form-control,
.modal-container.modal-security-sheet textarea {
  background: color-mix(in srgb, var(--card-bg) 97%, white);
  border-color: color-mix(in srgb, var(--border) 86%, white);
}

.modal-container.modal-security-sheet .form-alert {
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 84%, white);
}

.brief-note-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.brief-note-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.brief-note-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}

.brief-note-meta {
  font-size: .8rem;
  color: var(--text-muted);
}

.brief-note-body {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 88%, var(--card-bg));
  color: var(--text);
  line-height: 1.65;
  font-size: .92rem;
}

body.theme-dark #view-client-detail .cd-brief-chip--important {
  background: rgba(245, 158, 11, .10);
  border-color: rgba(245, 158, 11, .24);
}

body.theme-dark #view-client-detail .cd-brief-chip-text {
  color: rgba(231, 245, 242, .82);
}

body.theme-dark #view-client-detail .cd-brief-bday--today {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .28);
  color: #fca5a5;
}

body.theme-dark #view-client-detail .cd-brief-bday--soon {
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .26);
  color: #fdba74;
}

body.theme-dark #view-client-detail .cd-brief-bday--future {
  background: rgba(70, 189, 175, .10);
  border-color: rgba(70, 189, 175, .18);
  color: #9fe5dc;
}

body.theme-dark .modal-overlay-brief-note {
  background: rgba(2, 8, 16, .68);
}

body.theme-dark .modal-container.modal-brief-note,
body.theme-dark .modal-container.modal-brief-note .modal-header {
  background: color-mix(in srgb, var(--card-bg) 92%, #0b1320);
}

body.theme-dark .modal-container.modal-brief-note {
  border-color: color-mix(in srgb, var(--border) 92%, rgba(255,255,255,.08));
  box-shadow: 0 26px 64px rgba(2, 6, 23, .46);
}

body.theme-dark .modal-container.modal-brief-note .brief-note-body {
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 90%, rgba(255,255,255,.08));
}

body.theme-dark .modal-overlay-history-sheet {
  background: rgba(2, 8, 16, .68);
}

body.theme-dark .modal-container.modal-history-sheet,
body.theme-dark .modal-container.modal-history-sheet .modal-header {
  background: color-mix(in srgb, var(--card-bg) 92%, #0b1320);
}

body.theme-dark .modal-container.modal-history-sheet {
  border-color: color-mix(in srgb, var(--border) 92%, rgba(255,255,255,.08));
  box-shadow: 0 26px 64px rgba(2, 6, 23, .46);
}

body.theme-dark .modal-container.modal-history-sheet .revision-item {
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 90%, rgba(255,255,255,.08));
}

body.theme-dark .modal-overlay-client-sheet {
  background: rgba(2, 8, 16, .72);
}

body.theme-dark .modal-container.modal-client-sheet,
body.theme-dark .modal-container.modal-client-sheet .modal-header {
  background: color-mix(in srgb, var(--card-bg) 94%, #0b1320);
}

body.theme-dark .modal-container.modal-client-sheet {
  border-color: color-mix(in srgb, var(--border) 92%, rgba(255,255,255,.08));
  box-shadow: 0 26px 64px rgba(2, 6, 23, .48);
}

body.theme-dark .modal-container.modal-client-sheet .modal-body {
  background: transparent;
}

body.theme-dark .modal-container.modal-client-sheet .modal-footer {
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--card-bg));
  border-top-color: color-mix(in srgb, var(--border) 90%, rgba(255,255,255,.08));
}

body.theme-dark .modal-container.modal-client-sheet .form-control,
body.theme-dark .modal-container.modal-client-sheet .form-select,
body.theme-dark .modal-container.modal-client-sheet textarea {
  background: color-mix(in srgb, var(--surface-soft) 60%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 88%, rgba(255,255,255,.08));
}

body.theme-dark .modal-container.modal-client-sheet .client-form-section,
body.theme-dark .modal-container.modal-client-sheet .evaluation-editor,
body.theme-dark .modal-container.modal-client-sheet .purchase-form-grid,
body.theme-dark .modal-container.modal-client-sheet .purchase-form-side,
body.theme-dark .modal-container.modal-client-sheet .empty-state {
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 88%, rgba(255,255,255,.08));
}

body.theme-dark .family-manager-current,
body.theme-dark .family-manager-thumb {
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 88%, rgba(255,255,255,.08));
}

body.theme-dark .family-manager-current-media,
body.theme-dark .family-manager-thumb-delete {
  border-color: color-mix(in srgb, var(--border) 88%, rgba(255,255,255,.08));
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--card-bg));
}

body.theme-dark .purchase-discount-box {
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 90%, rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

body.theme-dark .purchase-discount-label {
  color: color-mix(in srgb, var(--text-muted) 88%, rgba(255,255,255,.14));
}

body.theme-dark .purchase-discount-badge {
  background: color-mix(in srgb, var(--primary) 22%, rgba(255,255,255,.04));
  border-color: color-mix(in srgb, var(--primary) 34%, rgba(255,255,255,.08));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body.theme-dark .modal-overlay-security-sheet {
  background: rgba(2, 8, 16, .78);
}

body.theme-dark .modal-container.modal-security-sheet,
body.theme-dark .modal-container.modal-security-sheet .modal-header {
  background: color-mix(in srgb, var(--card-bg) 94%, #0b1320);
}

body.theme-dark .modal-container.modal-security-sheet {
  border-color: color-mix(in srgb, var(--border) 92%, rgba(255,255,255,.08));
  box-shadow: 0 28px 70px rgba(2, 6, 23, .56);
}

body.theme-dark .modal-container.modal-security-sheet .modal-footer {
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--card-bg));
  border-top-color: color-mix(in srgb, var(--border) 90%, rgba(255,255,255,.08));
}

body.theme-dark .modal-container.modal-security-sheet .form-control,
body.theme-dark .modal-container.modal-security-sheet textarea,
body.theme-dark .modal-container.modal-security-sheet .form-alert {
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 88%, rgba(255,255,255,.08));
}

/* ============================================================
   NOTIFICATIONS VIEW
   ============================================================ */
#view-notifications {
  display: grid;
  gap: 22px;
  padding-top: 6px;
}

#view-notifications .notifications-grid {
  display: block;
}

#view-notifications .notifications-main-stack {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
  align-items: start;
}

#view-notifications .notifications-side-stack {
  display: grid;
  gap: 18px;
}

#view-notifications .themes-header h1 {
  margin: 4px 0 8px;
}

#view-notifications .themes-header p {
  margin: 0;
  color: var(--text-muted);
  max-width: 760px;
}

#view-notifications .notifications-main-card,
#view-notifications .notifications-side-card {
  padding: 0;
  overflow: hidden;
}

#view-notifications .notifications-main-card > .card-header,
#view-notifications .notifications-side-card > .card-header {
  padding: 18px 20px;
}

#view-notifications .notifications-stack,
#view-notifications .notifications-form,
#view-notifications .notifications-toggle-list,
#view-notifications .notifications-info-list {
  display: grid;
  gap: 14px;
}

#view-notifications .notifications-stack,
#view-notifications .notifications-info-list {
  padding: 18px;
}

#view-notifications .notifications-form {
  gap: 18px;
}

#view-notifications .notifications-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--card-bg));
}

#view-notifications .notifications-hero-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

#view-notifications .notifications-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

#view-notifications .notifications-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 16%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  color: var(--primary-dark);
}

#view-notifications .notifications-hero-icon i,
#view-notifications .notifications-hero-icon svg {
  width: 22px;
  height: 22px;
}

#view-notifications .notifications-hero-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

#view-notifications .notifications-hero p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

#view-notifications .notifications-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#view-notifications .notifications-section {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card-bg);
}

#view-notifications .notifications-section-head h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

#view-notifications .notifications-section-head p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

#view-notifications .notifications-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card-bg);
}

#view-notifications .notifications-toggle strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}

#view-notifications .notifications-toggle span {
  display: block;
  color: var(--text-muted);
  font-size: .92rem;
}

#view-notifications .notifications-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

#view-notifications .notifications-range-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#view-notifications .notifications-destination-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#view-notifications .notifications-actions {
  padding: 0;
  border-top: 0;
  justify-content: flex-start;
}

#view-notifications .notifications-email-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

#view-notifications .notifications-telegram-state {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--card-bg));
}

#view-notifications .notifications-telegram-state p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

#view-notifications .notifications-info-item {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--card-bg));
}

#view-notifications .notifications-info-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

#view-notifications .notifications-info-item span {
  display: block;
  color: var(--text-muted);
  font-size: .92rem;
}

.notifications-help-sheet {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notifications-help-hero {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, var(--card-bg)), color-mix(in srgb, var(--surface-soft) 84%, var(--card-bg)));
}

.notifications-help-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 18%, var(--card-bg));
  color: var(--primary-dark);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
}

.notifications-help-hero-icon i,
.notifications-help-hero-icon svg {
  width: 22px;
  height: 22px;
}

.notifications-help-hero-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.notifications-help-hero-copy {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.notifications-help-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notifications-help-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--text);
  line-height: 1.5;
}

.notifications-help-step-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: .8rem;
  font-weight: 800;
}

.notifications-help-step-copy {
  color: var(--text);
  font-size: .94rem;
  line-height: 1.55;
}

.notifications-help-tip {
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--warning) 14%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--warning) 26%, var(--border));
  color: var(--text);
  line-height: 1.55;
}

.modal-container.modal-notification-help {
  max-width: 560px;
}

.modal-container.modal-notification-help .modal-body {
  padding-top: 18px;
}

@media (max-width: 920px) {
  #view-notifications .notifications-main-stack,
  #view-notifications .notifications-range-grid,
  #view-notifications .notifications-destination-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #view-notifications {
    gap: 18px;
    padding-top: 2px;
  }

  #view-notifications .notifications-main-card > .card-header,
  #view-notifications .notifications-side-card > .card-header,
  #view-notifications .notifications-stack,
  #view-notifications .notifications-info-list {
    padding: 14px;
  }

  #view-notifications .notifications-hero,
  #view-notifications .notifications-toggle {
    padding: 14px 14px;
  }

  #view-notifications .notifications-hero {
    flex-direction: column;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #view-notifications .notifications-hero-actions {
    justify-content: stretch;
  }

  #view-notifications .notifications-hero-actions .btn,
  #view-notifications .notifications-actions .btn {
    width: 100%;
  }

  #view-notifications .notifications-hero-main {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  #view-notifications .notifications-hero-side {
    align-items: stretch;
  }

  #view-notifications .notifications-email-actions .btn {
    width: 100%;
  }
}

body.theme-dark #view-notifications .notifications-hero,
body.theme-dark #view-notifications .notifications-info-item,
body.theme-dark #view-notifications .notifications-telegram-state {
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 90%, rgba(255,255,255,.08));
}

body.theme-dark #view-notifications .notifications-section,
body.theme-dark #view-notifications .notifications-toggle {
  background: color-mix(in srgb, var(--surface-soft) 66%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 90%, rgba(255,255,255,.08));
}

body.theme-dark #view-notifications .notifications-hero-icon {
  background: color-mix(in srgb, var(--primary) 28%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  color: #f8fafc;
}

body.theme-dark .notifications-help-hero {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 16%, var(--card-bg)), color-mix(in srgb, var(--surface-soft) 92%, var(--card-bg)));
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

body.theme-dark .notifications-help-hero-icon {
  background: color-mix(in srgb, var(--primary) 28%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  color: #f8fafc;
}

body.theme-dark .notifications-help-step {
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--card-bg));
  border-color: var(--border);
}

body.theme-dark .notifications-help-tip {
  background: color-mix(in srgb, var(--warning) 18%, var(--card-bg));
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}

/* ====================================================
   Notifications — full redesign (accordion layout)
   ==================================================== */

/* Layout */
#view-notifications .notif-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: 24px;
  align-items: start;
}

#view-notifications .notif-main {
  display: grid;
  gap: 24px;
}

#notifications-form {
  display: grid;
  gap: 24px;
}

#view-notifications .notif-sidebar {
  display: grid;
  gap: 24px;
}

#view-notifications .notif-card {
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

#view-notifications .notif-card > .card-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

#view-notifications .notif-save-row {
  display: flex;
  justify-content: flex-start;
  padding: 0 2px;
}

/* Accordion */
#view-notifications .notif-accord {
  display: flex;
  flex-direction: column;
}

#view-notifications .notif-accord-item {
  border-bottom: 1px solid var(--border);
}

#view-notifications .notif-accord-item--last {
  border-bottom: none;
}

#view-notifications .notif-accord-row {
  display: flex;
  align-items: center;
}

#view-notifications .notif-accord-trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 12px 18px 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  transition: background .12s;
  border-radius: 0;
  outline: none;
}

#view-notifications .notif-accord-trigger:hover {
  background: color-mix(in srgb, var(--surface-soft) 55%, transparent);
}

#view-notifications .notif-accord-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

#view-notifications .notif-accord-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

#view-notifications .notif-accord-icon svg,
#view-notifications .notif-accord-icon i {
  width: 17px;
  height: 17px;
}

#view-notifications .notif-accord-icon--browser  { background: color-mix(in srgb, var(--purple) 10%, var(--card-bg)); border-color: color-mix(in srgb, var(--purple) 20%, var(--border)); color: var(--purple); }
#view-notifications .notif-accord-icon--email    { background: color-mix(in srgb, var(--primary) 10%, var(--card-bg)); border-color: color-mix(in srgb, var(--primary) 20%, var(--border)); color: var(--primary-dark); }
#view-notifications .notif-accord-icon--telegram { background: color-mix(in srgb, var(--info) 10%, var(--card-bg)); border-color: color-mix(in srgb, var(--info) 20%, var(--border)); color: var(--info); }

#view-notifications .notif-accord-meta {
  flex: 1;
  min-width: 0;
}

#view-notifications .notif-accord-name {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

#view-notifications .notif-accord-sub {
  display: block;
  font-size: .82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-notifications .notif-accord-badge {
  font-size: .75rem;
  flex-shrink: 0;
}

#view-notifications .notif-accord-chevron {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform .2s ease;
  margin-right: 8px;
}

#view-notifications .notif-accord-item.is-open .notif-accord-chevron {
  transform: rotate(180deg);
}

/* Accordion body */
#view-notifications .notif-accord-body {
  border-top: 1px solid var(--border);
}

#view-notifications .notif-accord-content {
  display: grid;
  gap: 18px;
  padding: 24px;
  background: color-mix(in srgb, var(--surface-soft) 35%, var(--card-bg));
}

#view-notifications .notif-accord-detail {
  margin: 0;
  font-size: .87rem;
  color: var(--text-muted);
  line-height: 1.6;
}

#view-notifications .notif-accord-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Admin inside Telegram (Redesigned) */
#view-notifications .notif-setup-container {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  overflow: hidden;
}

#view-notifications .notif-setup-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  border: none;
  background: color-mix(in srgb, var(--surface-soft) 30%, transparent);
  transition: background .2s;
}

#view-notifications .notif-setup-trigger:hover {
  background: color-mix(in srgb, var(--surface-soft) 60%, transparent);
}

#view-notifications .notif-setup-trigger .setup-chevron {
  margin-left: auto;
  width: 16px;
  height: 16px;
  transition: transform .3s ease;
}

#view-notifications .notif-setup-trigger.is-active .setup-chevron {
  transform: rotate(180deg);
}

#view-notifications .notif-setup-content {
  border-top: 1px solid var(--border);
}

#view-notifications .notif-setup-inner {
  padding: 20px;
  display: grid;
  gap: 24px;
  background: color-mix(in srgb, var(--surface-soft) 15%, transparent);
}

#view-notifications .notif-setup-group {
  display: grid;
  gap: 16px;
}

#view-notifications .notif-setup-header {
  margin-bottom: 4px;
}

#view-notifications .notif-setup-header h4 {
  margin: 8px 0 4px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}

#view-notifications .notif-setup-header p {
  margin: 0;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

#view-notifications .notif-setup-divider {
  height: 1px;
  background: var(--border);
  margin: 0 -20px;
}

#view-notifications .notif-setup-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

#view-notifications .notif-admin-grid {
  display: grid;
  gap: 16px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Soft Badges */
.badge-primary-soft { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); }
.badge-secondary-soft { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text-muted); border: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent); }

/* Toggle switch (pill) */
.notif-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0 20px;
}

.notif-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.notif-switch-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 26px;
  transition: background .2s;
  cursor: pointer;
}

.notif-switch-track::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}

.notif-switch input:checked + .notif-switch-track {
  background: var(--primary);
}

.notif-switch input:checked + .notif-switch-track::before {
  transform: translateX(18px);
}

.notif-switch input:focus-visible + .notif-switch-track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Subtoggle (daily summary inside channel body) */
#view-notifications .notif-subtoggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  cursor: pointer;
}

#view-notifications .notif-subtoggle strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

#view-notifications .notif-subtoggle span {
  display: block;
  font-size: .82rem;
  color: var(--text-muted);
}

#view-notifications .notif-subtoggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

/* Input row (chat ID + help button) */
#view-notifications .notif-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

#view-notifications .notif-input-row .form-control { flex: 1; }

/* Telegram diagnostic */
#view-notifications .notif-telegram-diag {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
}

#view-notifications .notif-diag-step {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

#view-notifications .notif-diag-step b {
  font-size: .75rem;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

#view-notifications .notif-diag-ok   { color: var(--success, #16a34a); }
#view-notifications .notif-diag-warn { color: #b45309; }
#view-notifications .notif-diag-idle { color: var(--text-muted); }
#view-notifications .notif-diag-err  { color: var(--danger, #dc2626); }

/* Bot status in admin panel */
#view-notifications .notif-bot-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

/* What to notify section */
#view-notifications .notif-filter-body {
  display: grid;
  gap: 16px;
  padding: 24px;
}

#view-notifications .notif-filter-hint {
  margin: 0;
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

#view-notifications .notif-filter-grid {
  display: grid;
  gap: 12px;
}

#view-notifications .notif-filter-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 40%, var(--card-bg));
  cursor: pointer;
  transition: background .12s;
}

#view-notifications .notif-filter-toggle:hover {
  background: color-mix(in srgb, var(--surface-soft) 65%, var(--card-bg));
}

#view-notifications .notif-filter-toggle-text strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

#view-notifications .notif-filter-toggle-text span {
  display: block;
  font-size: .82rem;
  color: var(--text-muted);
}

#view-notifications .notif-filter-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

#view-notifications .notif-filter-ranges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Info list in sidebar */
#view-notifications .notif-info-list {
  display: grid;
  gap: 0;
}

#view-notifications .notif-info-item {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}

#view-notifications .notif-info-item:last-child {
  border-bottom: none;
}

#view-notifications .notif-info-item strong {
  display: block;
  font-size: .83rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

#view-notifications .notif-info-item span {
  display: block;
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Admin form */
#view-notifications .notif-admin-form .notif-filter-body {
  gap: 14px;
}

/* Responsive */
@media (max-width: 960px) {
  #view-notifications .notif-layout {
    grid-template-columns: 1fr;
  }
  #view-notifications .notif-sidebar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  #view-notifications .notif-sidebar {
    grid-template-columns: 1fr;
  }
  #view-notifications .notif-filter-ranges {
    grid-template-columns: 1fr;
  }
  #view-notifications .notif-accord-sub { display: none; }
}

/* Dark mode */
body.theme-dark #view-notifications .notif-accord-content {
  background: color-mix(in srgb, var(--surface-soft) 60%, var(--card-bg));
}

body.theme-dark #view-notifications .notif-subtoggle,
body.theme-dark #view-notifications .notif-telegram-diag {
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--card-bg));
}

body.theme-dark #view-notifications .notif-filter-toggle {
  background: color-mix(in srgb, var(--surface-soft) 55%, var(--card-bg));
}

body.theme-dark #view-notifications .notif-filter-toggle:hover {
  background: color-mix(in srgb, var(--surface-soft) 75%, var(--card-bg));
}

body.theme-dark #view-notifications .notif-diag-warn { color: #fcd34d; }

#view-mail-settings .mail-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
  align-items: start;
}

#view-mail-settings .mail-settings-main-card,
#view-mail-settings .mail-settings-side-card {
  padding: 0;
  overflow: hidden;
}

#view-mail-settings .mail-settings-main-card > .card-header,
#view-mail-settings .mail-settings-side-card > .card-header {
  padding: 18px 20px;
}

#view-mail-settings .mail-settings-form,
#view-mail-settings .mail-settings-side-card .notifications-info-list {
  display: grid;
  gap: 16px;
  padding: 18px;
}

#view-mail-settings .mail-inline-switches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#view-mail-settings .mail-radio-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card-bg);
}

#view-mail-settings .mail-radio-card input {
  margin-top: 4px;
  accent-color: var(--primary);
}

#view-mail-settings .mail-radio-card strong {
  display: block;
  margin-bottom: 4px;
}

#view-mail-settings .mail-radio-card span,
#view-mail-settings .mail-form-block-title,
#view-mail-settings .form-hint,
#view-mail-settings .mail-test-meta {
  color: var(--text-muted);
}

#view-mail-settings .mail-form-block {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--card-bg));
}

#view-mail-settings .mail-form-block-title {
  font-size: .86rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#view-mail-settings .mail-toggle-row {
  display: grid;
  gap: 12px;
}

#view-mail-settings .notifications-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card-bg);
}

#view-mail-settings .notifications-toggle strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

#view-mail-settings .notifications-toggle span {
  display: block;
  color: var(--text-muted);
  font-size: .92rem;
}

#view-mail-settings .notifications-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

#view-mail-settings .mail-test-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

#view-mail-settings .mail-block-disabled {
  opacity: .58;
}

#view-mail-settings .mail-test-result {
  margin: 0 18px 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  display: grid;
  gap: 8px;
}

#view-mail-settings .mail-test-result.is-success {
  border-color: rgba(16, 185, 129, .28);
  background: color-mix(in srgb, #ecfdf5 76%, var(--card-bg));
}

#view-mail-settings .mail-test-result.is-error {
  border-color: rgba(239, 68, 68, .28);
  background: color-mix(in srgb, #fef2f2 76%, var(--card-bg));
}

#view-mail-settings .mail-test-log {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .06);
  color: var(--text);
  font-size: .78rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

body.theme-dark #view-mail-settings .mail-form-block,
body.theme-dark #view-mail-settings .mail-test-result,
body.theme-dark #view-mail-settings .mail-radio-card,
body.theme-dark #view-mail-settings .notifications-toggle {
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--card-bg));
  border-color: color-mix(in srgb, var(--border) 90%, rgba(255,255,255,.08));
}

body.theme-dark #view-mail-settings .mail-test-log {
  background: rgba(255,255,255,.04);
}

@media (max-width: 920px) {
  #view-mail-settings .mail-settings-grid,
  #view-mail-settings .mail-inline-switches {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #view-mail-settings .mail-settings-main-card > .card-header,
  #view-mail-settings .mail-settings-side-card > .card-header,
  #view-mail-settings .mail-settings-form,
  #view-mail-settings .mail-settings-side-card .notifications-info-list {
    padding: 14px;
  }

  #view-mail-settings .mail-form-block {
    padding: 14px;
  }

  #view-mail-settings .mail-test-actions .btn {
    width: 100%;
  }
}

/* ============================================================
   THEMES VIEW
   ============================================================ */
#view-themes {
  display: grid;
  gap: 18px;
}

#view-themes .themes-header h1 {
  margin: 4px 0 8px;
}

#view-themes .themes-header p {
  margin: 0;
  color: var(--text-muted);
}

#view-themes .themes-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
  gap: 18px;
}

#view-themes .themes-panel {
  padding: 0;
  overflow: hidden;
}

#view-themes .themes-panel .card-header,
#view-themes .themes-preview-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

#view-themes .themes-panel-meta {
  color: var(--text-muted);
  font-size: .84rem;
}

#view-themes .themes-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
}

#view-themes .themes-mode-btn,
#view-themes .theme-swatch-card {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

#view-themes .themes-mode-btn:hover,
#view-themes .theme-swatch-card:hover {
  transform: translateY(-1px);
  border-color: rgba(13, 111, 102, .22);
  box-shadow: var(--shadow-sm);
}

#view-themes .themes-mode-btn.active,
#view-themes .theme-swatch-card.active {
  border-color: rgba(13, 111, 102, .42);
  box-shadow: 0 12px 24px rgba(13, 111, 102, .14);
  background: linear-gradient(180deg, rgba(13,111,102,.07) 0%, rgba(13,111,102,.03) 100%);
}

#view-themes .themes-mode-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary-dark);
  flex-shrink: 0;
}

#view-themes .themes-mode-btn strong,
#view-themes .theme-swatch-copy strong {
  display: block;
  font-size: .96rem;
  color: var(--text);
}

#view-themes .themes-mode-btn small,
#view-themes .theme-swatch-copy small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: .8rem;
}

#view-themes .themes-palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
}

#view-themes .theme-swatch-preview {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

#view-themes .theme-swatch-preview.petrol { background: linear-gradient(135deg, #0d6f66 0%, #0f5f58 100%); }
#view-themes .theme-swatch-preview.blue   { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
#view-themes .theme-swatch-preview.wine   { background: linear-gradient(135deg, #9f1239 0%, #7f1d1d 100%); }
#view-themes .theme-swatch-preview.amber  { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }

#view-themes .themes-preview-card {
  overflow: hidden;
}

#view-themes .themes-preview-shell {
  margin: 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 280px;
  background: var(--card-bg);
}

#view-themes .themes-preview-rail {
  background: linear-gradient(180deg, var(--preview-sidebar-start, #0f5f58) 0%, var(--preview-sidebar-end, #083a37) 100%);
}

#view-themes .themes-preview-main {
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%);
  padding: 18px;
}

#view-themes .themes-preview-topbar {
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  margin-bottom: 16px;
}

#view-themes .themes-preview-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

#view-themes .themes-preview-kpi,
#view-themes .themes-preview-chart,
#view-themes .themes-preview-list {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}

#view-themes .themes-preview-kpi {
  height: 88px;
}

#view-themes .themes-preview-kpi.primary {
  background: linear-gradient(135deg, rgba(var(--preview-rgb, 13,111,102), .16) 0%, rgba(var(--preview-rgb, 13,111,102), .06) 100%);
  border-color: rgba(var(--preview-rgb, 13,111,102), .22);
}

#view-themes .themes-preview-body {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 12px;
}

#view-themes .themes-preview-chart {
  min-height: 150px;
}

#view-themes .themes-preview-list {
  min-height: 150px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

#view-themes .themes-preview-list span {
  display: block;
  border-radius: 12px;
  background: rgba(var(--preview-rgb, 13,111,102), .10);
}

#view-themes .themes-preview-list span:nth-child(1) { height: 44px; }
#view-themes .themes-preview-list span:nth-child(2) { height: 44px; }
#view-themes .themes-preview-list span:nth-child(3) { height: 28px; width: 70%; }

@media (max-width: 1024px) {
  #view-themes .themes-grid,
  #view-themes .themes-preview-shell,
  #view-themes .themes-preview-body,
  #view-themes .themes-palette-grid,
  #view-themes .themes-mode-switch {
    grid-template-columns: 1fr;
  }

  #view-themes .themes-preview-rail {
    min-height: 90px;
  }
}

/* ============================================================
   ACCENT VARIANTS
   ============================================================ */
body[data-accent="petrol"] {
  --primary: #0d6f66;
  --primary-dark: #0a5952;
  --primary-light: #e7f4f1;
  --preview-rgb: 13, 111, 102;
  --preview-sidebar-start: #0f5f58;
  --preview-sidebar-end: #083a37;
}

body[data-accent="blue"] {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #eff6ff;
  --preview-rgb: 37, 99, 235;
  --preview-sidebar-start: #1d4ed8;
  --preview-sidebar-end: #1e3a8a;
}

body[data-accent="wine"] {
  --primary: #9f1239;
  --primary-dark: #881337;
  --primary-light: #fff1f2;
  --preview-rgb: 159, 18, 57;
  --preview-sidebar-start: #7f1d1d;
  --preview-sidebar-end: #4c0519;
}

body[data-accent="amber"] {
  --primary: #d97706;
  --primary-dark: #b45309;
  --primary-light: #fff7ed;
  --preview-rgb: 217, 119, 6;
  --preview-sidebar-start: #c2410c;
  --preview-sidebar-end: #7c2d12;
}

body.theme-dark[data-accent="blue"] .sidebar {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.06) 0%, transparent 22%),
    linear-gradient(180deg, #17338f 0%, #142d7d 36%, #10255f 72%, #0b1b46 100%) !important;
}

body.theme-dark[data-accent="wine"] .sidebar {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.06) 0%, transparent 22%),
    linear-gradient(180deg, #7f1d1d 0%, #6b1128 34%, #4c0519 68%, #2f0a16 100%) !important;
}

body.theme-dark[data-accent="amber"] .sidebar {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.06) 0%, transparent 22%),
    linear-gradient(180deg, #b45309 0%, #9a4d07 32%, #7c3f0f 66%, #4a2410 100%) !important;
}

body:not(.theme-dark)[data-accent="blue"] .sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .14) 0%, transparent 28%),
    linear-gradient(180deg, #f7fbff 0%, #eff5ff 52%, #e4eeff 100%) !important;
}

body:not(.theme-dark)[data-accent="wine"] .sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(159, 18, 57, .12) 0%, transparent 28%),
    linear-gradient(180deg, #fff8f9 0%, #fff1f2 52%, #ffe6ea 100%) !important;
  border-right-color: rgba(159, 18, 57, .12) !important;
}

body:not(.theme-dark)[data-accent="amber"] .sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(217, 119, 6, .12) 0%, transparent 28%),
    linear-gradient(180deg, #fffaf5 0%, #fff4e8 52%, #ffedd5 100%) !important;
  border-right-color: rgba(217, 119, 6, .12) !important;
}

/* ============================================================
   DYNAMIC ACCENT OVERRIDES
   ============================================================ */
:root {
  --accent-rgb: 13, 111, 102;
  --accent-dark-glow: rgba(13, 111, 102, .12);
  --accent-light-glow: rgba(13, 111, 102, .08);
  --accent-dark-base-a: #061614;
  --accent-dark-base-b: #071b18;
  --accent-dark-card: #0d2320;
  --accent-dark-surface: #12302c;
  --accent-dark-border: #1d3a35;
  --accent-dark-border-light: #17302c;
  --accent-light-base-a: #f7fbfa;
  --accent-light-base-b: #f2f8f7;
  --accent-light-card: #ffffff;
  --accent-light-surface: #f6faf9;
  --accent-light-border: #d9e5e2;
  --accent-light-border-soft: #e7eeec;
  --accent-sidebar-start: #0f5f58;
  --accent-sidebar-mid: #0b4a45;
  --accent-sidebar-end: #083a37;
  --accent-light-sidebar-a: #f4faf8;
  --accent-light-sidebar-b: #ebf6f3;
  --accent-light-sidebar-c: #e4f1ee;
  --accent-light-sidebar-glow: rgba(13, 111, 102, .14);
  --accent-ring: rgba(13, 111, 102, .18);
}

body:not(.theme-dark),
body:not(.theme-dark) .main-wrapper,
body:not(.theme-dark) .main-content {
  --bg: var(--accent-light-base-a);
  --card-bg: var(--accent-light-card);
  --surface-soft: var(--accent-light-surface);
  --border: var(--accent-light-border);
  --border-light: var(--accent-light-border-soft);
  background:
    radial-gradient(circle at top left, var(--accent-light-glow) 0%, transparent 22%),
    linear-gradient(180deg, var(--accent-light-base-a) 0%, var(--accent-light-base-b) 100%) !important;
}

body:not(.theme-dark) .sidebar {
  background:
    radial-gradient(circle at 18% 0%, var(--accent-light-sidebar-glow) 0%, transparent 28%),
    linear-gradient(180deg, var(--accent-light-sidebar-a) 0%, var(--accent-light-sidebar-b) 52%, var(--accent-light-sidebar-c) 100%) !important;
  border-right-color: color-mix(in srgb, var(--primary) 16%, transparent) !important;
}

body.theme-dark,
body.theme-dark .main-wrapper,
body.theme-dark .main-content {
  --bg: var(--accent-dark-base-a);
  --card-bg: var(--accent-dark-card);
  --surface-soft: var(--accent-dark-surface);
  --border: var(--accent-dark-border);
  --border-light: var(--accent-dark-border-light);
  background:
    radial-gradient(circle at top left, var(--accent-dark-glow) 0%, transparent 20%),
    linear-gradient(180deg, var(--accent-dark-base-a) 0%, var(--accent-dark-base-b) 100%) !important;
}

body.theme-dark .sidebar {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.06) 0%, transparent 22%),
    linear-gradient(180deg, var(--accent-sidebar-start) 0%, var(--accent-sidebar-mid) 42%, var(--accent-sidebar-end) 100%) !important;
}

body.theme-dark .topbar-search input:focus,
body.theme-dark .form-control:focus,
body.theme-dark .form-input:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus,
body:not(.theme-dark) .topbar-search input:focus,
body:not(.theme-dark) .form-control:focus,
body:not(.theme-dark) .form-input:focus,
body:not(.theme-dark) textarea:focus,
body:not(.theme-dark) select:focus {
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
  border-color: color-mix(in srgb, var(--primary) 62%, white) !important;
}

/* ============================================================
   CLEAN THEME STUDIO
   ============================================================ */
#view-themes {
  gap: 16px;
}

#view-themes .themes-studio-card,
#view-themes .themes-preview-card {
  overflow: hidden;
}

#view-themes .themes-studio-top {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 16px;
  padding: 18px 18px 0;
}

#view-themes .themes-block {
  padding: 18px;
}

#view-themes .themes-studio-top .themes-block {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card-bg) 92%, var(--primary) 8%);
}

#view-themes .themes-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#view-themes .themes-block-head h3 {
  margin: 0;
}

#view-themes .themes-mode-row {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

#view-themes .themes-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-weight: 700;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

#view-themes .themes-pill-btn.active {
  background: color-mix(in srgb, var(--primary) 14%, var(--card-bg));
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent);
}

#view-themes .themes-tone-card {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 88%, var(--primary) 12%);
}

#view-themes .themes-tone-scale {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

#view-themes .themes-tone-scale span {
  font-size: .82rem;
  color: var(--text-muted);
  white-space: nowrap;
}

#view-themes [data-theme-tone-slider] {
  width: 100%;
  accent-color: var(--primary);
  filter: saturate(1.05);
}

#view-themes .themes-swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#view-themes .theme-swatch-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease, background .12s ease;
}

#view-themes .theme-swatch-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: var(--shadow-sm);
}

#view-themes .theme-swatch-card.active {
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 16%, transparent);
}

#view-themes .theme-swatch-preview {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

#view-themes .themes-preview-card {
  padding: 18px;
}

#view-themes .themes-preview-compact {
  margin-top: 6px;
}

#view-themes .themes-preview-shell {
  margin: 0;
  min-height: 220px;
  grid-template-columns: 180px 1fr;
}

#view-themes .themes-preview-topbar {
  background: color-mix(in srgb, var(--primary) 8%, var(--card-bg));
}

#view-themes .themes-preview-kpi.primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent) 0%, color-mix(in srgb, var(--primary) 8%, transparent) 100%);
  border-color: color-mix(in srgb, var(--primary) 24%, transparent);
}

#view-themes .themes-preview-list span {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

@media (max-width: 1180px) {
  #view-themes .themes-studio-top,
  #view-themes .themes-swatch-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  #view-themes .themes-studio-top,
  #view-themes .themes-swatch-grid,
  #view-themes .themes-preview-shell,
  #view-themes .themes-preview-body {
    grid-template-columns: 1fr;
  }

  #view-themes .themes-tone-scale {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ============================================================
   FINAL THEME-COLOR UNIFICATION
   ============================================================ */
.btn-primary,
body.theme-dark .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
body.theme-dark .btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, color-mix(in srgb, var(--primary-dark) 86%, black) 100%) !important;
  border-color: var(--primary-dark) !important;
}

.btn-outline,
body.theme-dark .btn-outline,
.btn-ghost.text-primary,
.btn.text-primary {
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 42%, transparent) !important;
}

.btn-outline:hover,
body.theme-dark .btn-outline:hover,
.btn-ghost.text-primary:hover,
.btn.text-primary:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

.badge-primary,
.workspace-pill,
#view-client-detail .cd-tl-next-action {
  background: color-mix(in srgb, var(--primary) 12%, white) !important;
  color: var(--primary-dark) !important;
  border-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

.pagination-pages button.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.tab-btn.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

body:not(.theme-dark) .sidebar .nav-link.active {
  background: color-mix(in srgb, var(--primary) 12%, white) !important;
  border-color: color-mix(in srgb, var(--primary) 16%, transparent) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: color-mix(in srgb, var(--primary-dark) 76%, #0f172a) !important;
}

body.theme-dark .sidebar .nav-link.active {
  background: color-mix(in srgb, var(--primary) 22%, rgba(255,255,255,.04)) !important;
  border-color: color-mix(in srgb, var(--primary) 26%, transparent) !important;
  color: #fff !important;
}

#view-themes .themes-pill-btn.active,
#view-themes .theme-swatch-card.active {
  border-color: color-mix(in srgb, var(--primary) 34%, transparent) !important;
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg)) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 16%, transparent) !important;
}

.form-alert {
  padding: 0.95rem 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.06);
}

.form-alert strong {
  display: block;
  font-size: 0.95rem;
}

.form-alert-warning {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.10);
}

body.theme-dark .form-alert-warning {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.12);
}

/* =============================================
   CATALOG SYNC PANEL
   ============================================= */
#catalog-sync-panel {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  background: var(--card-bg);
  padding: 14px 18px;
  border-radius: 16px;
}
body.theme-dark #catalog-sync-panel {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

/* Shell: vertical stack */
#catalog-sync-panel .catalog-sync-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* ── Collapsed / always-visible bar ── */
#catalog-sync-panel .catalog-sync-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
#catalog-sync-panel .catalog-sync-bar:hover { opacity: .82; }
#catalog-sync-panel .catalog-sync-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}
#catalog-sync-panel .catalog-sync-bar-title {
  font-weight: 600;
  font-size: .88rem;
  color: var(--text-main);
  white-space: nowrap;
}
/* Divider dot between title and pills */
#catalog-sync-panel .catalog-sync-bar-title::after {
  content: '·';
  margin-left: 8px;
  color: var(--text-muted);
  font-weight: 400;
}
#catalog-sync-panel .catalog-sync-bar-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
#catalog-sync-panel .catalog-sync-pill {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
#catalog-sync-panel .catalog-sync-pill strong {
  color: var(--text-main);
  font-weight: 700;
}
#catalog-sync-panel .catalog-sync-pill:not(:last-child)::after {
  content: '·';
  margin-left: 4px;
  color: var(--border);
}
#catalog-sync-panel .catalog-sync-pill-danger strong { color: var(--danger, #e11d48); }
#catalog-sync-panel .catalog-sync-bar-live {
  font-size: .82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
#catalog-sync-panel .catalog-sync-bar-live svg { width: 13px; height: 13px; }
#catalog-sync-panel .catalog-sync-bar-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
#catalog-sync-panel .catalog-sync-toggle-btn svg {
  transition: transform .2s ease;
}

/* ── Expandable body ── */
#catalog-sync-panel .catalog-sync-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 14px;
}

/* Progress bar */
#catalog-sync-panel .catalog-sync-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#catalog-sync-panel .catalog-sync-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#catalog-sync-panel .catalog-sync-progress-head strong {
  font-size: .84rem;
  color: var(--text-muted);
  font-weight: 600;
}
#catalog-sync-panel .catalog-sync-progress-head span {
  font-size: .82rem;
  color: var(--text-muted);
}
#catalog-sync-panel .catalog-sync-progress-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}
#catalog-sync-panel .catalog-sync-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  transition: width .3s ease;
}

/* Stats row — compact inline */
#catalog-sync-panel .catalog-sync-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
#catalog-sync-panel .catalog-sync-stat-card {
  flex: 1 1 80px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
#catalog-sync-panel .catalog-sync-stat-card:last-child { border-right: none; }
#catalog-sync-panel .catalog-sync-stat-card span {
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
#catalog-sync-panel .catalog-sync-stat-card strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.1;
}

/* Meta row — single text line */
#catalog-sync-panel .catalog-sync-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#catalog-sync-panel .catalog-sync-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
}
#catalog-sync-panel .catalog-sync-meta-item span {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  font-weight: 600;
}
#catalog-sync-panel .catalog-sync-meta-item strong {
  color: var(--text-main);
  font-weight: 600;
}
#catalog-sync-panel .catalog-sync-meta-item-right {
  margin-left: auto;
}

/* Activity list */
#catalog-sync-panel .catalog-sync-activity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#catalog-sync-panel .catalog-sync-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#catalog-sync-panel .catalog-sync-activity-head strong {
  font-size: .83rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
#catalog-sync-panel .catalog-sync-activity-head span {
  font-size: .78rem;
  color: var(--text-muted);
}
#catalog-sync-panel .catalog-sync-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
#catalog-sync-panel .catalog-sync-activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}
#catalog-sync-panel .catalog-sync-activity-item:last-child { border-bottom: none; }
#catalog-sync-panel .catalog-sync-activity-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}
#catalog-sync-panel .catalog-sync-activity-line {
  color: var(--text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  flex-shrink: 0;
}
#catalog-sync-panel .catalog-sync-activity-copy strong {
  font-size: .88rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#catalog-sync-panel .catalog-sync-activity-price {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Footer */
#catalog-sync-panel .catalog-sync-footer {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  #catalog-sync-panel {
    padding: 12px 14px;
    border-radius: 18px;
  }
  #catalog-sync-panel .catalog-sync-bar {
    align-items: flex-start;
    gap: 12px;
  }
  #catalog-sync-panel .catalog-sync-bar-left,
  #catalog-sync-panel .catalog-sync-bar-right,
  #catalog-sync-panel .catalog-sync-bar-pills,
  #catalog-sync-panel .catalog-sync-bar-live-stats {
    min-width: 0;
  }
  #catalog-sync-panel .catalog-sync-bar-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  #catalog-sync-panel .catalog-sync-bar-title::after {
    display: none;
  }
  #catalog-sync-panel .catalog-sync-bar-title {
    font-size: .96rem;
  }
  #catalog-sync-panel .catalog-sync-bar-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  #catalog-sync-panel .catalog-sync-bar-right .btn {
    min-height: 38px;
  }
  #catalog-sync-panel .catalog-sync-body {
    gap: 14px;
    margin-top: 10px;
    padding-top: 12px;
  }
  #catalog-sync-panel .catalog-sync-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 14px;
  }
  #catalog-sync-panel .catalog-sync-stat-card {
    padding: 12px 12px 11px;
  }
  #catalog-sync-panel .catalog-sync-stat-card:nth-child(2n) { border-right: none; }
  #catalog-sync-panel .catalog-sync-stat-card:nth-child(n + 3) { border-top: 1px solid var(--border); }
  #catalog-sync-panel .catalog-sync-stat-card:last-child {
    border-top: 1px solid var(--border);
    border-right: none;
  }
  #catalog-sync-panel .catalog-sync-stat-card span {
    font-size: .68rem;
    letter-spacing: .04em;
  }
  #catalog-sync-panel .catalog-sync-stat-card strong {
    font-size: 1.06rem;
  }
  #catalog-sync-panel .catalog-sync-meta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #catalog-sync-panel .catalog-sync-meta-item,
  #catalog-sync-panel .catalog-sync-meta-item-right {
    margin-left: 0;
    display: grid;
    gap: 3px;
  }
  #catalog-sync-panel .catalog-sync-meta-item-right {
    text-align: left;
  }
  #catalog-sync-panel .catalog-sync-meta-item span,
  #catalog-sync-panel .catalog-sync-meta-item-right span {
    font-size: .68rem;
  }
  #catalog-sync-panel .catalog-sync-meta-item strong,
  #catalog-sync-panel .catalog-sync-meta-item-right strong {
    font-size: .92rem;
    line-height: 1.3;
  }
  #catalog-sync-panel .catalog-sync-activity {
    gap: 8px;
  }
  #catalog-sync-panel .catalog-sync-activity-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  #catalog-sync-panel .catalog-sync-activity-head strong {
    font-size: .8rem;
  }
  #catalog-sync-panel .catalog-sync-activity-head span {
    font-size: .74rem;
    line-height: 1.35;
  }
  #catalog-sync-panel .catalog-sync-activity-list {
    border-radius: 14px;
  }
  #catalog-sync-panel .catalog-sync-activity-item {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 12px;
  }
  #catalog-sync-panel .catalog-sync-activity-copy {
    display: grid;
    gap: 3px;
  }
  #catalog-sync-panel .catalog-sync-activity-line {
    font-size: .66rem;
  }
  #catalog-sync-panel .catalog-sync-activity-copy strong {
    font-size: .84rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #catalog-sync-panel .catalog-sync-activity-price {
    white-space: normal;
    font-size: .84rem;
    line-height: 1.25;
  }
  #catalog-sync-panel .catalog-sync-footer {
    justify-content: stretch;
  }
  #catalog-sync-panel .catalog-sync-footer .btn {
    width: 100%;
  }
}


/* =============================================
   PRODUCTS PAGE
   ============================================= */

/* Page header */
.prod-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.prod-page-header-left { display: flex; flex-direction: column; gap: 4px; }
.prod-page-header-left h1 { margin: 0; }
.prod-count-label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.prod-page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.prod-tools-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.prod-tools-group .btn {
  border-radius: 9px;
  color: var(--text-muted);
}
.prod-tools-group .btn:hover { color: var(--text-main); background: var(--card-bg); }

/* Filters bar */
.prod-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.prod-filter-search {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 11px;
  transition: border-color .15s;
}
.prod-filter-search:focus-within { border-color: var(--primary); }
.prod-filter-search svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
.prod-filter-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-size: .88rem;
  min-width: 0;
}
.prod-filter-selects {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.prod-filter-selects .form-control {
  flex: 1 1 110px;
  min-width: 105px;
  max-width: 180px;
  font-size: .86rem;
  padding: 7px 8px;
}

/* Product list */
.prod-list { display: flex; flex-direction: column; }
.prod-list-head {
  display: grid;
  grid-template-columns: 88px 1fr 1.4fr 120px 110px 90px 68px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  gap: 12px;
}
.prod-row {
  display: grid;
  grid-template-columns: 88px 1fr 1.4fr 120px 110px 90px 68px;
  align-items: center;
  padding: 14px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
  cursor: default;
}
.prod-row:last-child { border-bottom: none; }
.prod-row:hover { background: var(--surface-soft); }

/* Cover image */
.prod-img-wrap { position: relative; display: inline-block; }
.prod-img {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border: 1px solid var(--border);
  object-fit: cover;
  display: block;
}
.prod-img-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--surface-soft);
}
.prod-img-placeholder svg { width: 22px; height: 22px; }
.prod-img-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: .66rem;
  font-weight: 700;
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 6px;
  padding: 1px 5px;
  letter-spacing: .03em;
  backdrop-filter: blur(4px);
}

/* Row cells */
.prod-row-cover { display: flex; align-items: center; }
.prod-row-line { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.prod-line-name {
  font-weight: 700;
  font-size: .97rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-sku-tag {
  display: inline-block;
  font-size: .71rem;
  font-family: 'Courier New', monospace;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  letter-spacing: .02em;
  width: fit-content;
}
.prod-row-model { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prod-model-name {
  font-weight: 600;
  font-size: .93rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-model-full {
  font-size: .82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-row-measure { display: flex; align-items: center; }
.prod-row-price { display: flex; align-items: center; }
.prod-price-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
.prod-row-status { display: flex; align-items: center; }
.prod-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity .12s;
}
.prod-row:hover .prod-row-actions { opacity: 1; }

/* Menú de puntos */
.prod-row-menu { position: relative; }
.prod-row-menu-btn { color: var(--text-muted); }
.prod-row-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: auto;
  left: 0;
  z-index: 200;
  min-width: 148px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding: 4px 0;
}
.prod-row-menu.is-open .prod-row-menu-dropdown { display: block; }
.prod-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  font-size: .875rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  transition: background .1s;
}
.prod-menu-item:hover { background: var(--bg); }
.prod-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.prod-menu-item-danger { color: var(--danger); }
.prod-menu-item-danger:hover { background: #fff1f2; }
.prod-menu-divider { height: 1px; background: var(--border); margin: 3px 0; }

.prod-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}
.prod-pagination-summary {
  font-size: .88rem;
  color: var(--text-muted);
}
.prod-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.prod-page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: .86rem;
  font-weight: 600;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.prod-page-btn:hover:not(:disabled) {
  background: var(--surface-soft);
  border-color: var(--primary);
}
.prod-page-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.prod-page-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.prod-page-dots {
  color: var(--text-muted);
  font-weight: 700;
  padding: 0 2px;
}

/* Dark mode adjustments */
body.theme-dark .prod-tools-group { background: rgba(255,255,255,.04); }
body.theme-dark .prod-tools-group .btn:hover { background: rgba(255,255,255,.08); }
body.theme-dark .prod-filter-search { background: rgba(255,255,255,.04); }
body.theme-dark .prod-list-head { background: rgba(255,255,255,.03); }
body.theme-dark .prod-row:hover { background: rgba(255,255,255,.03); }
body.theme-dark .prod-sku-tag { background: rgba(255,255,255,.05); }
body.theme-dark .prod-page-btn { background: rgba(255,255,255,.03); }
body.theme-dark .prod-page-btn:hover:not(:disabled) { background: rgba(255,255,255,.08); }

/* Responsive */
@media (max-width: 900px) {
  .prod-list-head { display: none; }
  .prod-row {
    grid-template-columns: 64px 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px;
    padding: 12px 14px;
  }
  .prod-row-cover { grid-row: 1 / 3; }
  .prod-row-line { grid-column: 2; grid-row: 1; }
  .prod-row-model { grid-column: 2; grid-row: 2; }
  .prod-row-measure { display: none; }
  .prod-row-price { grid-column: 3; grid-row: 1; justify-content: flex-end; align-items: flex-start; }
  .prod-row-status { display: none; }
  .prod-row-actions {
    grid-column: 3; grid-row: 2;
    justify-content: flex-end;
    align-items: flex-end;
    opacity: 1;
  }
  .prod-row-menu-dropdown { left: auto; right: 0; }
  .prod-img, .prod-img-placeholder { width: 56px; height: 56px; border-radius: 10px; }
  .prod-pagination {
    flex-direction: column;
    align-items: stretch;
  }
  .prod-pagination-controls {
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  .prod-page-header { flex-direction: column; }
  .prod-page-header-actions { width: 100%; justify-content: flex-end; }
  .prod-tools-group { flex-wrap: wrap; }
  /* Filtros: buscador arriba, desplegables en cuadrícula 2 col */
  .prod-filters { flex-direction: column; align-items: stretch; gap: 8px; }
  .prod-filter-search { flex: none; width: 100%; max-width: 100%; }
  .prod-filter-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: none;
  }
  .prod-filter-selects .form-control {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    font-size: .82rem;
    padding: 6px 8px;
  }
}

/* dash-events-card movido al interior de dash-main-grid */

/* ═══════════════════════════════════════════════════════════════
   LISTA DE ATAQUE — Dashboard
   ═══════════════════════════════════════════════════════════════ */

.dash-attack-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dash-attack-list {
  display: flex;
  flex-direction: column;
}

.dash-attack-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  transition: background .12s;
}
.dash-attack-row:last-child { border-bottom: none; }
.dash-attack-row:hover { background: var(--bg); }

/* ── Left col: badge + icon ─── */
.dash-attack-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.dash-attack-badge {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1.5;
}
.attack-high   { background: #fff1f2; color: #b91c1c; }
.attack-medium { background: #fefce8; color: #a16207; }
.attack-low    { background: var(--bg); color: var(--text-muted); }

.dash-attack-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ev-color, #64748b) 12%, transparent);
  color: var(--ev-color, #64748b);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-attack-icon svg,
.dash-attack-icon i { width: 15px; height: 15px; }

/* ── Body ─── */
.dash-attack-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dash-attack-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dash-attack-name {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.dash-attack-name:hover { color: var(--primary); text-decoration: underline; }

.dash-attack-purchase {
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  margin-left: auto;
}

.dash-attack-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.dash-attack-type-tag {
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.dash-attack-when {
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  background: #f1f5f9;
  color: var(--text-muted);
}
.dash-attack-when.overdue { background: #fee2e2; color: #b91c1c; }
.dash-attack-when.today   { background: #dcfce7; color: #15803d; }
.dash-attack-when.soon    { background: #fef3c7; color: #b45309; }

.dash-attack-title {
  font-size: .74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.dash-attack-action {
  font-size: .74rem;
  color: var(--text);
  font-style: italic;
  line-height: 1.4;
  opacity: .8;
}

/* ── CTA buttons ─── */
.dash-attack-btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  padding-top: 2px;
}

.dash-attack-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: filter .15s, transform .1s;
  flex-shrink: 0;
}
.dash-attack-btn:hover { filter: brightness(.9); transform: scale(1.05); text-decoration: none; }
.dash-attack-btn svg,
.dash-attack-btn i { width: 14px; height: 14px; }

.dash-attack-call { background: #dcfce7; color: #15803d; }
.dash-attack-wa   { background: #d1fae5; color: #065f46; }

/* dark mode */
body.theme-dark .dash-attack-row:hover         { background: rgba(255,255,255,.03); }
body.theme-dark .dash-attack-when              { background: rgba(255,255,255,.06); }
body.theme-dark .attack-high                   { background: rgba(185,28,28,.18); color: #fca5a5; }
body.theme-dark .attack-medium                 { background: rgba(161,98,7,.18);   color: #fde68a; }
body.theme-dark .attack-low                    { background: rgba(255,255,255,.06); }
body.theme-dark .dash-attack-call              { background: rgba(21,128,61,.2);  color: #86efac; }
body.theme-dark .dash-attack-wa                { background: rgba(6,95,70,.25);   color: #6ee7b7; }

/* responsive */
@media (max-width: 640px) {
  .dash-attack-purchase { display: none; }
  .dash-attack-title    { display: none; }
  .dash-attack-btns { flex-direction: row; padding-top: 6px; align-self: flex-end; }
}

.dash-event-list {
  display: grid;
  gap: 12px;
  padding: 12px 14px 16px;
}

.dash-event-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
}

.dash-event-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--event-color) 16%, var(--surface) 84%);
  color: var(--event-color);
}

.dash-event-top,
.dash-event-meta,
.client-event-top,
.client-event-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.dash-event-client,
.dash-event-title {
  font-weight: 700;
}

.dash-event-title {
  margin-top: 4px;
}

.dash-event-sub,
.client-event-sub {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.dash-event-score {
  min-width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.client-event-list {
  display: grid;
  gap: 12px;
  padding: 12px 16px 16px;
}

.client-event-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 14px 14px 0;
  border-bottom: 1px solid var(--border);
}

.client-event-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.client-event-dot {
  width: 10px;
  border-radius: 999px;
  background: var(--event-color);
  min-height: 100%;
}

.client-event-row-overdue .client-event-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--event-color) 18%, transparent);
}

.client-event-title {
  font-weight: 700;
  font-size: .95rem;
  flex: 1;
  min-width: 0;
}

.client-event-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.client-event-main {
  min-width: 0;
}

.client-event-top {
  flex-wrap: nowrap;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .dash-event-row {
    grid-template-columns: 1fr;
  }

  .dash-event-icon {
    width: 38px;
    height: 38px;
  }
}

body.theme-dark #view-client-detail .cd-priority-chip {
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(17,28,46,.98));
  border-color: var(--border);
}

body.theme-dark #view-client-detail .cd-priority-alert {
  background: color-mix(in srgb, var(--primary) 16%, #0f172a);
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
}

/* ═══ PROFESSIONAL CALENDAR (compact + pro) ════════════════════════════════ */

/* Panel header — calendar nav inline */
.panel-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
}

.panel-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

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

.dash-panel-planning .panel-header-flex {
  padding: 14px 16px 10px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.month-picker-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg) 88%, white);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.month-picker-trigger:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.month-picker-trigger svg,
.month-picker-trigger i {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.month-label {
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 140px;
  text-align: center;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.planning-month-picker {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Container */
.calendar-container {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg, #fff);
  box-shadow: var(--shadow);
  margin-top: 10px;
}

/* Week header */
.calendar-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 2px solid var(--border);
  background: var(--card-bg);
}

.calendar-week-header > div {
  padding: 10px 6px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-right: 1px solid var(--border-light);
}
.calendar-week-header > div:last-child { border-right: none; }
.calendar-week-header > div:nth-child(6),
.calendar-week-header > div:nth-child(7) { color: var(--text-muted); }

/* Grid — pro cells */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 120px;
  background: var(--border-light, #eef2f7);
  gap: 1px;
}

/* Day cells */
.cal-day {
  height: 120px;
  padding: 7px 6px 5px;
  background: var(--card-bg, #fff);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}

.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover {
  background: color-mix(in srgb, var(--primary) 4%, white);
  box-shadow: inset 0 0 0 1.5px var(--primary, #2563eb);
  z-index: 1;
  border-radius: 10px;
}

.cal-day.other-month { background: var(--bg, #f5f7fb); cursor: default; }
.cal-day.other-month:hover { background: var(--bg, #f5f7fb); box-shadow: none; }

.cal-day.today {
  background: color-mix(in srgb, var(--primary) 6%, white);
}

/* Date number */
.cal-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
  border-radius: 999px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.cal-day:hover .cal-date {
  transform: scale(1.1);
}

.cal-day.today .cal-date {
  background: var(--primary, #2563eb);
  color: #fff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

.cal-day.other-month .cal-date { opacity: 0.35; }

/* Zone fill blocks */
.cal-plans-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 3px;
  overflow: hidden;
}

.cal-plan-block {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  padding: 3px 3px;
  line-height: 1.2;
  min-height: 0;
}

.cal-more {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: 2px 0 1px;
  line-height: 1;
  flex-shrink: 0;
}

.cal-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.cal-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.63rem;
  font-weight: 800;
  line-height: 1;
}

.cal-indicator svg,
.cal-indicator i {
  width: 10px;
  height: 10px;
}

.cal-indicator.tone-primary { background: color-mix(in srgb, var(--primary) 14%, white); color: var(--primary-dark); }
.cal-indicator.tone-warning { background: #fef3c7; color: #92400e; }
.cal-indicator.tone-secondary { background: #e2e8f0; color: #475569; }
.cal-indicator.tone-success { background: #dcfce7; color: #166534; }

/* ── Day detail modal ──────────────────────────────────────────────────── */
.day-modal {
  width: 760px;
  max-width: 96vw;
  border-radius: var(--radius-xl) !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: auto;
}

.day-modal-toolbar,
.day-modal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 0;
  background: var(--card-bg);
}

.day-modal-summary {
  padding-top: 10px;
  padding-bottom: 10px;
}

.day-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.day-summary-chip:hover {
  transform: translateY(-1px);
}

.day-summary-chip.is-active {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

.day-summary-chip strong { font-size: 0.82rem; }
.day-summary-chip svg { width: 13px; height: 13px; }
.day-summary-chip.tone-primary { background: color-mix(in srgb, var(--primary) 14%, white); color: var(--primary-dark); }
.day-summary-chip.tone-warning { background: #fef3c7; color: #92400e; }
.day-summary-chip.tone-danger { background: #fee2e2; color: #991b1b; }
.day-summary-chip.tone-secondary { background: #e2e8f0; color: #475569; }
.day-summary-chip.tone-success { background: #dcfce7; color: #166534; }

.day-content {
  padding: 16px;
  min-height: 160px;
  max-height: 470px;
  overflow-y: auto;
}

.route-sheet,
.day-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.route-card,
.day-list-item {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.route-card-task {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.route-card-top,
.day-list-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.route-card-title,
.day-list-item-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
}

.route-card-subtitle,
.day-list-item-subtitle {
  margin-top: 4px;
  font-size: .76rem;
  color: var(--text-muted);
}

.route-card-meta {
  margin-top: 6px;
  font-size: .71rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.route-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.route-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: .69rem;
  font-weight: 800;
}

.route-pill svg { width: 11px; height: 11px; }
.route-pill.is-overdue { background: #fee2e2; color: #991b1b; }
.route-pill-success { background: #dcfce7; color: #166534; }
.route-pill-plan { background: color-mix(in srgb, var(--route-pill) 20%, white); color: #0f172a; }

.route-brief-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.route-brief,
.day-list-item-copy {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.route-brief.is-overdue { color: #b91c1c; }

.route-card-copy {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 10px;
}

.route-card-actions,
.day-list-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Plan cards inside modal */
.day-plan-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card-bg);
  transition: box-shadow 0.15s;
}

.day-plan-card:hover { box-shadow: var(--shadow-sm); }

.day-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.day-plan-zone {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  color: #fff;
  letter-spacing: 0.03em;
}

.day-plan-priority {
  font-size: 0.73rem;
  color: var(--text-muted);
}

.day-plan-notes {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.45;
}

.day-plan-clients {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.day-plan-clients svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.day-plan-actions {
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
}

/* Empty state */
.day-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  color: var(--text-muted);
  text-align: center;
}

.day-empty svg {
  width: 28px;
  height: 28px;
  opacity: 0.4;
}

.day-empty p { font-size: 0.85rem; margin: 0; }

.day-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

/* Overlay backdrop */
#day-detail-modal.modal-overlay,
#modal-plan-editor.modal-overlay {
  backdrop-filter: blur(8px);
  background: rgba(15, 23, 42, 0.4);
}

/* Fix forms inside planning modals */
.modal-planning { max-width: 520px; }

.modal-planning .form-control {
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
}

.plan-form-body {
  padding: 20px 20px 0;
  overflow-y: auto;
  max-height: calc(90vh - 140px);
}

.plan-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Priority segmented control */
.priority-segmented {
  display: flex;
  gap: 6px;
}
.priority-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all var(--transition);
  user-select: none;
  text-align: center;
}
.priority-opt input[type="radio"] { display: none; }
.priority-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.priority-opt:hover { border-color: var(--primary); }

/* Client picker */
.client-picker {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.client-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.client-picker-search svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.client-picker-search input {
  flex: 1;
  border: none;
  background: none;
  font-size: 0.85rem;
  color: var(--text);
  outline: none;
}
.client-picker-search input::placeholder { color: var(--text-muted); }
.client-picker-list {
  max-height: 200px;
  overflow-y: auto;
}
.client-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}
.client-picker-item:last-child { border-bottom: none; }
.client-picker-item:hover { background: var(--primary-light); }
.client-picker-item input[type="checkbox"] { flex-shrink: 0; accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }
.client-picker-item:has(input:checked) { background: var(--primary-light); }
.cpi-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cpi-name { font-size: 0.83rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpi-company { font-size: 0.73rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Selected count badge */
.client-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  margin-left: 6px;
  padding: 0 5px;
}

/* btn-xs */
.btn-xs { padding: 4px 8px; font-size: 0.75rem; }
.btn-xs svg { width: 11px; height: 11px; }

/* Responsive */
@media (max-width: 768px) {
  .dash-panel-planning .panel-header-flex {
    display: grid;
    gap: 14px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--border-light);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.38)),
      linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(255,255,255,0.92));
  }
  .dash-panel-planning .panel-title {
    width: 100%;
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .dash-panel-planning .panel-title::before {
    content: 'Agenda comercial';
    display: block;
    margin-bottom: 6px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .dash-panel-planning .panel-header-flex {
    grid-template-columns: 1fr;
  }
  .calendar-nav,
  .panel-actions {
    width: 100%;
    justify-content: space-between;
  }
  .calendar-nav {
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    max-width: 320px;
    margin: 0 auto;
  }
  .calendar-nav .btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 12px;
    flex: 0 0 38px;
    background: rgba(255,255,255,0.82);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
  }
  .month-picker-trigger {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.88);
    border-color: var(--border-light);
  }
  .month-label {
    flex: 1;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.07em;
  }
  .panel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-items: stretch;
  }
  .dash-panel-planning .panel-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 0.79rem;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
  }
  .dash-panel-planning .panel-actions .btn svg,
  .dash-panel-planning .panel-actions .btn i {
    width: 14px;
    height: 14px;
  }
  .dash-panel-planning #btn-new-plan {
    grid-column: 1 / -1;
    width: min(100%, 240px);
    justify-self: center;
  }
  .calendar-container {
    overflow: hidden;
    padding-bottom: 0;
    margin-top: 14px;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  }
  .calendar-week-header,
  .calendar-grid {
    width: 100%;
    min-width: 0;
  }
  .calendar-week-header > div {
    padding: 8px 2px;
    font-size: 0.56rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
  .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 78px;
  }
  .cal-day {
    height: auto;
    min-height: 78px;
    padding: 4px 3px 3px;
  }
  .cal-date {
    width: 21px;
    height: 21px;
    font-size: 0.74rem;
    margin-bottom: 4px;
  }
  .cal-day.today .cal-date {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--primary-dark);
    box-shadow: none;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
  }
  .cal-indicators {
    gap: 2px;
    margin-bottom: 3px;
  }
  .cal-indicator {
    min-height: 14px;
    padding: 0 4px;
    font-size: 0.52rem;
    gap: 3px;
  }
  .cal-indicator svg,
  .cal-indicator i {
    width: 8px;
    height: 8px;
  }
  .cal-plan-block {
    justify-content: flex-start;
    text-align: left;
    font-size: 0.48rem;
    letter-spacing: 0.015em;
    padding: 3px 4px;
    line-height: 1.1;
  }
  .cal-more {
    display: none;
  }
  .day-modal {
    width: min(96vw, 680px);
  }
  .day-modal-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .day-summary-chip {
    justify-content: center;
    width: 100%;
    padding: 0 10px;
  }
  #view-dashboard .dash-briefing-card {
    padding: 18px;
  }
  #view-dashboard .dash-briefing-top,
  #view-dashboard .briefing-footer {
    flex-wrap: wrap;
  }
  #view-dashboard .briefing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .dash-panel-planning .panel-header-flex {
    padding: 16px 12px 12px;
    gap: 12px;
  }
  .month-label {
    min-width: 0;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
  }
  .calendar-nav {
    gap: 8px;
    max-width: 290px;
  }
  .calendar-nav .btn {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
  }
  .month-picker-trigger {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 12px;
  }
  .dash-panel-planning .panel-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .dash-panel-planning .panel-actions .btn {
    min-height: 40px;
    border-radius: 12px;
    font-size: 0.74rem;
    padding: 0 10px;
  }
  .dash-panel-planning #btn-new-plan {
    grid-column: 1 / -1;
  }
  .calendar-week-header > div {
    padding: 7px 1px;
    font-size: 0.48rem;
    letter-spacing: 0.01em;
  }
  .calendar-grid {
    grid-auto-rows: 66px;
  }
  .cal-day {
    min-height: 66px;
    padding: 3px 2px;
  }
  .cal-date {
    width: 19px;
    height: 19px;
    font-size: 0.68rem;
    margin-bottom: 3px;
  }
  .cal-day.today .cal-date {
    background: rgba(var(--accent-rgb), 0.14);
    border-width: 1px;
  }
  .cal-plan-block {
    font-size: 0.42rem;
    padding: 2px 3px;
  }
  .cal-indicator {
    min-height: 13px;
    padding: 0 3px;
    font-size: 0.48rem;
  }
  .cal-indicator strong {
    font-weight: 800;
  }
  #view-dashboard .briefing-heading {
    font-size: 1.08rem;
  }
  #view-dashboard .briefing-copy {
    font-size: 0.88rem;
  }
  .day-modal-summary {
    grid-template-columns: 1fr 1fr;
  }
}