/* ══════════════════════════════════════════════
   Connection BJ — Dashboard Interno
   Design System Premium SaaS
   ══════════════════════════════════════════════ */

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand colors */
  --brand-900: #0F2B46;
  --brand-800: #163A5C;
  --brand-700: #1E4E79;
  --brand-600: #2563EB;
  --brand-500: #3B82F6;
  --brand-100: #DBEAFE;
  --brand-50:  #EFF6FF;

  /* Semantic */
  --success-700: #059669;
  --success-500: #10B981;
  --success-100: #D1FAE5;
  --warning-700: #C2410C;
  --warning-500: #F59E0B;
  --warning-100: #FEF3C7;
  --danger-700:  #B91C1C;
  --danger-500:  #EF4444;
  --danger-100:  #FEE2E2;
  --info-600:    #2563EB;
  --info-100:    #DBEAFE;

  /* Purples / Extras */
  --purple-500: #8B5CF6;
  --purple-100: #EDE9FE;
  --teal-500:   #14B8A6;
  --teal-100:   #CCFBF1;
  --orange-500: #F97316;
  --orange-100: #FFEDD5;
  --indigo-500: #6366F1;
  --indigo-100: #E0E7FF;
  --yellow-500: #EAB308;
  --yellow-100: #FEF9C3;

  /* Neutrals */
  --gray-950: #0F172A;
  --gray-900: #1E293B;
  --gray-800: #334155;
  --gray-700: #475569;
  --gray-600: #64748B;
  --gray-500: #94A3B8;
  --gray-400: #CBD5E1;
  --gray-300: #E2E8F0;
  --gray-200: #F1F5F9;
  --gray-100: #F8FAFC;
  --white:    #FFFFFF;

  /* Layout */
  --sidebar-w: 240px;
  --header-h:  64px;
  --filter-h:  52px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 4px 20px rgba(15,23,42,.06);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.10);
}

html { font-size: 14px; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--gray-100);
  color: var(--gray-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ─── UTILITIES ─── */
.hidden { display: none !important; }
.text-right { text-align: right; }
.col-span-2 { grid-column: span 2; }

/* ══════════════════════════════════════════════
   LOGIN SCREEN
   ══════════════════════════════════════════════ */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-800) 50%, #1a3a5c 100%);
  position: relative;
  overflow: hidden;
}

/* Padrão decorativo de fundo */
.login-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(37,99,235,.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(59,130,246,.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(30,78,121,.25) 0%, transparent 60%);
  pointer-events: none;
}

.login-container {
  width: 100%;
  max-width: 440px;
  padding: 24px 20px;
  position: relative;
  z-index: 1;
}

/* Brand */
.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  justify-content: center;
}

.login-logo {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--white);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.login-brand-text {
  display: flex;
  flex-direction: column;
}

.login-brand-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.3px;
}

.login-brand-tagline {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Card de login */
.login-card {
  background: var(--white);
  border-radius: 20px;
  padding: 36px 32px 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
}

.login-card-header {
  margin-bottom: 24px;
}

.login-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-950);
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 13px;
  color: var(--gray-600);
}

/* ── Instrução de acesso (mensagem solicitada) ── */
.login-instruction-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, var(--brand-50) 0%, #e8f0fe 100%);
  border: 1.5px solid var(--brand-100);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 22px;
}

.login-instruction-icon {
  width: 36px;
  height: 36px;
  background: var(--brand-600);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}

.login-instruction-text {
  font-size: 13px;
  color: var(--brand-800);
  line-height: 1.55;
  padding-top: 1px;
}

.login-instruction-text strong {
  font-weight: 700;
  color: var(--brand-700);
}

/* Form */
.login-form { display: flex; flex-direction: column; gap: 18px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  color: var(--gray-500);
  font-size: 14px;
  pointer-events: none;
}

.form-input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 42px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--gray-900);
  background: var(--gray-100);
  transition: border-color .15s, box-shadow .15s, background .15s;
  outline: none;
}

.form-input:focus {
  border-color: var(--brand-500);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

.form-input::placeholder { color: var(--gray-400); }

.toggle-password {
  position: absolute;
  right: 12px;
  color: var(--gray-500);
  font-size: 14px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .15s;
}

.toggle-password:hover { color: var(--gray-700); }

/* Erro de login */
.login-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--danger-100);
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--danger-700);
  font-weight: 500;
}

/* Botão de login */
.btn-login {
  height: 48px;
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 4px 16px rgba(37,99,235,.35);
  margin-top: 4px;
  letter-spacing: 0.2px;
}

.btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,99,235,.45);
}

.btn-login:active { transform: translateY(0); }

.btn-login:disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}

/* Divisor */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--gray-400);
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

/* Aviso restrito */
.login-restricted-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
  margin-bottom: 16px;
}

.login-restricted-notice .fa-shield-alt { color: var(--warning-500); margin-top: 1px; flex-shrink: 0; }

/* Suporte */
.login-support {
  text-align: center;
  font-size: 13px;
  color: var(--gray-500);
}

.login-support-link {
  color: var(--brand-600);
  font-weight: 600;
  margin-left: 4px;
  transition: color .15s;
}

.login-support-link:hover { color: var(--brand-700); }

/* Footer */
.login-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════
   APP LAYOUT
   ══════════════════════════════════════════════ */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ─── SIDEBAR ─── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--brand-900);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  z-index: 100;
  transition: width .25s ease;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-logo {
  width: 38px;
  height: 38px;
  background: var(--brand-600);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  flex-shrink: 0;
}

.sidebar-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  display: block;
}

.sidebar-sub {
  font-size: 10px;
  color: rgba(255,255,255,.5);
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 8px 4px;
}

.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  transition: background .15s, color .15s;
  text-align: left;
  margin-bottom: 1px;
  position: relative;
}

.nav-item:hover {
  background: rgba(255,255,255,.08);
  color: var(--white);
}

.nav-item.active {
  background: var(--brand-700);
  color: var(--white);
  font-weight: 600;
}

.nav-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  font-size: 14px;
}

.nav-item span:not(.nav-badge):not(.nav-icon) { flex: 1; }

.nav-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}

.nav-badge-blue { background: rgba(59,130,246,.25); color: #93c5fd; }
.nav-badge-orange { background: rgba(249,115,22,.25); color: #fdba74; }
.nav-badge-green { background: rgba(16,185,129,.25); color: #6ee7b7; }

/* Sidebar footer */
.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

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

.sidebar-avatar {
  width: 34px;
  height: 34px;
  background: var(--brand-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-user-info { flex: 1; min-width: 0; }

.sidebar-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 11px;
  color: rgba(255,255,255,.45);
}

.sidebar-logout {
  color: rgba(255,255,255,.4);
  font-size: 14px;
  padding: 6px;
  border-radius: 8px;
  transition: color .15s, background .15s;
}

.sidebar-logout:hover {
  color: var(--danger-500);
  background: rgba(239,68,68,.1);
}

/* ─── MAIN CONTENT ─── */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.top-header {
  height: var(--header-h);
  background: var(--white);
  border-bottom: 1px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 16px;
  flex-shrink: 0;
  gap: 12px;
}

.header-left { display: flex; align-items: center; gap: 12px; }

.btn-sidebar-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

.btn-sidebar-toggle:hover { background: var(--gray-200); color: var(--gray-900); }

.header-title { font-size: 17px; font-weight: 700; color: var(--gray-950); }
.header-breadcrumb { font-size: 11.5px; color: var(--gray-500); }

.header-right { display: flex; align-items: center; gap: 8px; }

.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  width: 220px;
  transition: border-color .15s;
}

.header-search:focus-within { border-color: var(--brand-500); background: var(--white); }

.header-search i { color: var(--gray-400); font-size: 13px; }

.header-search input {
  border: none;
  background: none;
  font-size: 13px;
  color: var(--gray-900);
  outline: none;
  width: 100%;
}

.header-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .15s, color .15s;
}

.header-btn:hover { background: var(--gray-200); color: var(--gray-900); }

.header-notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  background: var(--danger-500);
  border-radius: 50%;
  border: 1.5px solid var(--white);
}

.header-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s;
}

.header-profile:hover { background: var(--gray-100); }

.header-avatar {
  width: 32px;
  height: 32px;
  background: var(--brand-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

.header-profile-info { display: flex; flex-direction: column; }
.header-profile-info span:first-child { font-size: 13px; font-weight: 600; color: var(--gray-900); }

.header-role-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-600);
  background: var(--brand-50);
  padding: 1px 6px;
  border-radius: 99px;
  border: 1px solid var(--brand-100);
}

/* ─── FILTER BAR ─── */
.filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-300);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--filter-h);
  flex-shrink: 0;
  overflow-x: auto;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  height: 34px;
  flex-shrink: 0;
  transition: border-color .15s;
}

.filter-group:focus-within { border-color: var(--brand-500); }

.filter-icon { color: var(--gray-400); font-size: 12px; }

.filter-select {
  border: none;
  background: none;
  font-size: 12.5px;
  color: var(--gray-700);
  outline: none;
  cursor: pointer;
  max-width: 140px;
}

.btn-filter-clear {
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gray-600);
  background: none;
  border: 1px solid var(--gray-300);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}

.btn-filter-clear:hover { background: var(--gray-200); color: var(--gray-900); }

.btn-filter-export {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: background .15s;
}

.btn-filter-export:hover { background: var(--brand-100); }

/* ─── DASHBOARD SECTIONS ─── */
.dashboard-section {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: sectionFadeIn .22s ease;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-950);
  margin-bottom: 4px;
}

.section-desc {
  font-size: 13px;
  color: var(--gray-500);
}

.section-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ─── KPI GRID ─── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1280px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-300);
  transition: transform .15s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.kpi-blue::before  { background: var(--brand-500); }
.kpi-green::before { background: var(--success-500); }
.kpi-purple::before { background: var(--purple-500); }
.kpi-red::before   { background: var(--danger-500); }
.kpi-teal::before  { background: var(--teal-500); }
.kpi-orange::before { background: var(--orange-500); }
.kpi-indigo::before { background: var(--indigo-500); }
.kpi-yellow::before { background: var(--yellow-500); }

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.kpi-icon-blue   { background: var(--brand-50);   color: var(--brand-600); }
.kpi-icon-green  { background: var(--success-100); color: var(--success-700); }
.kpi-icon-purple { background: var(--purple-100);  color: var(--purple-500); }
.kpi-icon-red    { background: var(--danger-100);  color: var(--danger-700); }
.kpi-icon-teal   { background: var(--teal-100);    color: var(--teal-500); }
.kpi-icon-orange { background: var(--orange-100);  color: var(--orange-500); }
.kpi-icon-indigo { background: var(--indigo-100);  color: var(--indigo-500); }
.kpi-icon-yellow { background: var(--yellow-100);  color: var(--yellow-500); }

.kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--gray-950);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
  line-height: 1;
}

.kpi-footer { display: flex; align-items: center; gap: 6px; }

.kpi-trend {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}

.kpi-up   { color: var(--success-700); }
.kpi-down { color: var(--danger-700); }

.kpi-period { font-size: 11px; color: var(--gray-500); }

/* ─── ALERTS ─── */
.alert-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.alert-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-300);
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-800);
}

.alert-panel-header i { color: var(--warning-500); }

.alert-count {
  background: var(--danger-500);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: auto;
}

.alerts-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; }

.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  border: 1px solid transparent;
}

.alert-item > i { font-size: 16px; flex-shrink: 0; }

.alert-danger  { background: var(--danger-100);  border-color: #fca5a5; }
.alert-danger > i { color: var(--danger-700); }
.alert-warning { background: var(--warning-100); border-color: #fcd34d; }
.alert-warning > i { color: var(--warning-700); }
.alert-info    { background: var(--info-100);    border-color: #93c5fd; }
.alert-info > i { color: var(--info-600); }
.alert-success { background: var(--success-100); border-color: #6ee7b7; }
.alert-success > i { color: var(--success-700); }

.alert-content { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.alert-title { font-weight: 600; color: var(--gray-900); }
.alert-desc  { font-size: 12px; color: var(--gray-600); }

.alert-action {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.7);
  color: var(--gray-800);
  flex-shrink: 0;
  transition: background .15s;
}

.alert-action:hover { background: var(--white); }

/* ─── CHARTS ─── */
.charts-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.charts-grid-3 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px;
}

@media (max-width: 900px) {
  .charts-grid-2, .charts-grid-3 { grid-template-columns: 1fr; }
  .col-span-2 { grid-column: span 1; }
}

.chart-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}

.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.chart-card-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--gray-600);
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.legend-blue  { background: var(--brand-500); }
.legend-green { background: var(--success-500); }
.legend-red   { background: var(--danger-500); }

.chart-wrapper { height: 200px; position: relative; }

/* ─── TABLES ─── */
.table-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-300);
  background: var(--gray-100);
}

.table-card-header h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
}

.table-header-actions { display: flex; align-items: center; gap: 8px; }

.table-search {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  background: var(--white);
  outline: none;
  transition: border-color .15s;
  width: 180px;
}

.table-search:focus { border-color: var(--brand-500); }

.table-wrapper { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  padding: 10px 14px;
  background: var(--gray-100);
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--gray-300);
  white-space: nowrap;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--gray-200);
  transition: background .1s;
  cursor: pointer;
}

.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--brand-50); }

.data-table tbody td {
  padding: 11px 14px;
  color: var(--gray-800);
  vertical-align: middle;
  white-space: nowrap;
}

/* Coluna Alerta na tabela de clientes — permite quebra de linha para a data */
.data-table tbody td.td-alert {
  white-space: normal;
  min-width: 130px;
}

/* ── Radio buttons customizados — Aviso de Instalação ── */
.radio-option {
  cursor: pointer;
  user-select: none;
}
.radio-option input[type="radio"] {
  display: none;
}
.radio-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid var(--gray-300);
  background: var(--gray-50);
  color: var(--gray-500);
  transition: all .15s;
}
.radio-option input[type="radio"]:checked + .radio-box {
  background: #dcfce7;
  border-color: #16a34a;
  color: #15803d;
}
.radio-box-no {
  border-color: var(--gray-300);
}
.radio-option input[type="radio"]:checked + .radio-box-no {
  background: #fee2e2;
  border-color: #dc2626;
  color: #b91c1c;
}

/* ── Radio laranja — Instalação fibra ── */
.radio-box-orange {
  border-color: var(--gray-300);
}
.radio-option input[type="radio"]:checked + .radio-box-orange {
  background: #fff7ed;
  border-color: #ea580c;
  color: #c2410c;
}

/* ══════════════════════════════════════════
   FATURAS MENSAIS
   ══════════════════════════════════════════ */
.invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.invoice-table thead th {
  background: #fef9c3;
  color: #92400e;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 7px 10px;
  border-bottom: 2px solid #fde68a;
  text-align: left;
  white-space: nowrap;
}
.invoice-table thead th:last-child { text-align: center; }
.invoice-table tbody tr {
  border-bottom: 1px solid #fef3c7;
  transition: background .12s;
}
.invoice-table tbody tr:hover { background: #fefce8; }
.invoice-table tbody td {
  padding: 7px 10px;
  vertical-align: middle;
  color: var(--gray-800);
}
.invoice-table tbody td:last-child { text-align: center; }

/* Select e input dentro da tabela de faturas */
.inv-select, .inv-input {
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  background: #fff;
  color: var(--gray-800);
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.inv-select:focus, .inv-input:focus {
  border-color: #ca8a04;
  box-shadow: 0 0 0 2px #fef08a50;
}
.inv-input { max-width: 110px; }

/* ── Botão de data (abre picker) ── */
.inv-date-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #92400e;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  min-width: 150px;
  text-align: left;
}
.inv-date-btn:hover {
  background: #fef9c3;
  border-color: #ca8a04;
  box-shadow: 0 0 0 2px #fef08a50;
}
.inv-date-btn:focus {
  outline: none;
  border-color: #ca8a04;
  box-shadow: 0 0 0 3px #fef08a60;
}

/* ══════════════════════════════════════════════
   MINI-CALENDÁRIO PICKER (popup flutuante)
   ══════════════════════════════════════════════ */
.inv-picker-popup {
  position: absolute;
  z-index: 9999;
  background: #fff;
  border: 1.5px solid #fde68a;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.10);
  width: 340px;
  padding: 0;
  overflow: hidden;
  animation: invPickerIn .15s ease;
}
@keyframes invPickerIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header do picker */
.inv-picker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #fef9c3, #fef3c7);
  border-bottom: 1.5px solid #fde68a;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
}
.inv-picker-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #92400e;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 13px;
  opacity: .7;
  transition: opacity .15s, background .12s;
}
.inv-picker-close:hover { opacity: 1; background: #fde68a80; }

/* Seção interna */
.inv-picker-section {
  padding: 10px 14px;
  border-bottom: 1px solid #fef3c7;
}
.inv-picker-section:last-child { border-bottom: none; }

.inv-picker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #a16207;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 8px;
}

/* Grade de anos — scroll horizontal */
.inv-picker-years {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: #fde68a #fff;
}
.inv-picker-years::-webkit-scrollbar { height: 4px; }
.inv-picker-years::-webkit-scrollbar-track { background: #fffbeb; border-radius: 4px; }
.inv-picker-years::-webkit-scrollbar-thumb { background: #fde68a; border-radius: 4px; }

.inv-picker-year-btn {
  flex-shrink: 0;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.inv-picker-year-btn:hover { background: #fef9c3; border-color: #ca8a04; }
.inv-picker-year-btn.active {
  background: #ca8a04;
  border-color: #92400e;
  color: #fff;
  box-shadow: 0 2px 6px #ca8a0440;
}

/* Grade de meses — 4 colunas */
.inv-picker-months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.inv-picker-month-btn {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 7px;
  padding: 5px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #92400e;
  cursor: pointer;
  transition: all .12s;
  text-align: center;
}
.inv-picker-month-btn:hover { background: #fef9c3; border-color: #ca8a04; }
.inv-picker-month-btn.active {
  background: #ca8a04;
  border-color: #92400e;
  color: #fff;
  box-shadow: 0 2px 6px #ca8a0440;
}

/* Grade de dias — 7 colunas */
.inv-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.inv-picker-day-btn {
  background: #fffbeb;
  border: 1.5px solid transparent;
  border-radius: 6px;
  padding: 4px 2px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  cursor: pointer;
  transition: all .10s;
  text-align: center;
}
.inv-picker-day-btn:hover { background: #fef9c3; border-color: #fde68a; }
.inv-picker-day-btn.active {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
  box-shadow: 0 1px 4px #15803d40;
}

/* Botão limpar dia */
.inv-picker-clear-day {
  background: none;
  border: 1px solid #fca5a5;
  border-radius: 5px;
  color: #b91c1c;
  font-size: 10px;
  padding: 2px 7px;
  cursor: pointer;
  font-weight: 600;
  transition: background .12s;
}
.inv-picker-clear-day:hover { background: #fee2e2; }

/* Preview inferior */
.inv-picker-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #fef9c3, #fef3c7);
  border-top: 1.5px solid #fde68a;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
}

/* Status chip de fatura */
.chip-inv-paga    { background:#dcfce7; border:1px solid #86efac; color:#15803d; }
.chip-inv-pendente{ background:#fef3c7; border:1px solid #fcd34d; color:#92400e; }
.chip-inv-vencida { background:#fee2e2; border:1px solid #fca5a5; color:#b91c1c; }

/* Botão remover linha da fatura */
.btn-inv-remove {
  background: none;
  border: none;
  color: var(--danger-500);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 13px;
  opacity: .7;
  transition: opacity .15s, background .15s;
}
.btn-inv-remove:hover { opacity: 1; background: #fee2e2; }

/* Barra resumo de faturas */
.invoice-summary-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.inv-sum-item { display: flex; flex-direction: column; gap: 1px; }
.inv-sum-label { font-size: 10px; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.inv-sum-value { font-size: 14px; font-weight: 700; color: #92400e; }
.inv-sum-value.green { color: #15803d; }
.inv-sum-value.red   { color: #b91c1c; }

/* ── Sub-bloco Detalhes Instalação Fibra ── */
.fibra-install-subblock {
  margin-top: 16px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1.5px solid #fed7aa;
  border-radius: 10px;
  padding: 14px 16px;
}
.fibra-install-subblock-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #c2410c;
  margin-bottom: 2px;
}
.fibra-install-subblock-title i {
  color: #ea580c;
}

/* ══════════════════════════════════════════════
   PAINEL DE ALERTAS — INTERNET NÃO INSTALADA
   ══════════════════════════════════════════════ */
.ni-alert-panel {
  background: #fff;
  border: 2px solid #fca5a5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(220,38,38,.10);
}

/* Cabeçalho vermelho */
.ni-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #dc2626, #ef4444);
  padding: 12px 18px;
  flex-wrap: wrap;
}

.ni-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.2);
  border-radius: 8px;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
  animation: ni-pulse 2s infinite;
}
@keyframes ni-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.4); }
  50%      { box-shadow: 0 0 0 7px rgba(255,255,255,.0); }
}

.ni-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
}

.ni-total-badge {
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 99px;
}

.ni-panel-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.ni-sum-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.ni-sum-danger  { background:#7f1d1d; color:#fecaca; border:1px solid #b91c1c; }
.ni-sum-warning { background:#78350f; color:#fde68a; border:1px solid #d97706; }
.ni-sum-info    { background:#1e3a5f; color:#bfdbfe; border:1px solid #2563eb; }

.ni-toggle-btn {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 13px;
  transition: background .15s;
  flex-shrink: 0;
}
.ni-toggle-btn:hover { background: rgba(255,255,255,.3); }

/* Corpo do painel */
.ni-panel-body {
  padding: 0;
}

.ni-panel-desc {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  border-bottom: 1px solid #dbeafe;
  padding: 10px 18px;
  font-size: 12.5px;
  color: #1e40af;
}

/* Título de grupo (crítico / atenção / novo) */
.ni-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ni-group-danger  { background:#fef2f2; color:#b91c1c; border-top:1px solid #fecaca; }
.ni-group-warning { background:#fffbeb; color:#92400e; border-top:1px solid #fde68a; }
.ni-group-info    { background:#eff6ff; color:#1e40af; border-top:1px solid #dbeafe; }

/* Lista de clientes dentro do grupo */
.ni-group-list {
  padding: 0 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Linha de cada cliente */
.ni-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .12s;
  flex-wrap: wrap;
}
.ni-client-row:hover {
  border-color: #ef4444;
  box-shadow: 0 2px 12px rgba(239,68,68,.12);
  background: #fff5f5;
}

.ni-client-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}

.ni-client-info {
  flex: 1;
  min-width: 180px;
}
.ni-client-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ni-client-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--gray-600);
  flex-wrap: wrap;
}
.ni-client-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ni-client-status { flex-shrink: 0; }
.ni-client-urgency { flex-shrink: 0; }

/* Badge de urgência */
.ni-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.ni-badge-danger  { background:#fee2e2; border:1.5px solid #fca5a5; color:#b91c1c; }
.ni-badge-warning { background:#fef3c7; border:1.5px solid #fcd34d; color:#92400e; }
.ni-badge-info    { background:#dbeafe; border:1.5px solid #93c5fd; color:#1e40af; }

/* Botão editar na linha */
.ni-btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  color: var(--gray-700);
  cursor: pointer;
  transition: all .13s;
  flex-shrink: 0;
}
.ni-btn-edit:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}

/* Rodapé com ações */
.ni-panel-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════
   SUB-BLOCO IDENTIFICAÇÃO DA FIBRA ÓPTICA
   CAF · お客様番号 · 申込番号
   ══════════════════════════════════════════════ */
.fibra-ids-subblock {
  margin-top: 16px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border: 1.5px solid #a5b4fc;
  border-radius: 12px;
  overflow: hidden;
}

.fibra-ids-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  padding: 10px 16px;
}

.fibra-ids-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.fibra-ids-title i {
  font-size: 14px;
  color: #c7d2fe;
}

.fibra-ids-badge {
  font-size: 9.5px;
  font-weight: 700;
  background: rgba(255,255,255,.2);
  color: #e0e7ff;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: .4px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.25);
}

.fibra-ids-toggle-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  padding: 4px 9px;
  font-size: 12px;
  transition: background .15s;
  line-height: 1;
}
.fibra-ids-toggle-btn:hover { background: rgba(255,255,255,.28); }

.fibra-ids-fields {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Linha de cada campo de identificação */
.fibra-id-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #c7d2fe;
  border-radius: 9px;
  padding: 8px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.fibra-id-row:hover {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px #6366f120;
}

.fibra-id-label-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 150px;
  flex-shrink: 0;
}

.fibra-id-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 99px;
  letter-spacing: .3px;
  white-space: nowrap;
}
.fibra-id-badge-blue   { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
.fibra-id-badge-indigo { background:#e0e7ff; color:#3730a3; border:1px solid #a5b4fc; }
.fibra-id-badge-teal   { background:#ccfbf1; color:#0f766e; border:1px solid #5eead4; }

.fibra-id-desc {
  font-size: 10px;
  color: var(--gray-500);
  font-weight: 500;
  padding-left: 2px;
}

.fibra-id-input-col {
  flex: 1;
}

.fibra-id-remove-btn {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 16px;
  padding: 3px 4px;
  opacity: .55;
  transition: opacity .15s, color .15s;
  flex-shrink: 0;
}
.fibra-id-remove-btn:hover { opacity: 1; color: #b91c1c; }

/* Linha de botões "Adicionar campo" */
.fibra-ids-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1.5px dashed #c7d2fe;
  margin-top: 4px;
}

.fibra-id-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1.5px solid;
  cursor: pointer;
  transition: all .14s;
}
.fibra-id-add-blue   { background:#eff6ff; border-color:#93c5fd; color:#1e40af; }
.fibra-id-add-blue:hover   { background:#dbeafe; border-color:#2563eb; }
.fibra-id-add-indigo { background:#eef2ff; border-color:#a5b4fc; color:#3730a3; }
.fibra-id-add-indigo:hover { background:#e0e7ff; border-color:#6366f1; }
.fibra-id-add-teal   { background:#f0fdfa; border-color:#5eead4; color:#0f766e; }
.fibra-id-add-teal:hover   { background:#ccfbf1; border-color:#14b8a6; }

/* Chips para detalhe do cliente */
.chip-fibra-caf        { background:#dbeafe; border:1px solid #93c5fd; color:#1e40af; }
.chip-fibra-okyakusama { background:#e0e7ff; border:1px solid #a5b4fc; color:#3730a3; }
.chip-fibra-moushikomi { background:#ccfbf1; border:1px solid #5eead4; color:#0f766e; }

/* Chips de instalação na tabela */
.chip-presence-sim {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
}
.chip-presence-nao {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0369a1;
}
.chip-ntt-sim {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #15803d;
}
.chip-ntt-nao {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

/* ══════════════════════════════════════════════
   SUB-BLOCO: MUDANÇA DA FIBRA ÓPTICA
   ══════════════════════════════════════════════ */

.fibra-change-subblock {
  background: linear-gradient(135deg, #faf5ff, #ede9fe);
  border: 1.5px solid #c4b5fd;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 0;
}

.fibra-change-fields {
  padding: 14px 16px;
}

.fibra-change-desc {
  font-size: 12px;
  color: #6d28d9;
  background: rgba(109,40,217,.06);
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.fibra-change-desc i { margin-top: 1px; flex-shrink: 0; }

/* Chips para tabela */
.chip-fibra-change-ok {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #15803d;
}
.chip-fibra-change-pend {
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  color: #6d28d9;
}

/* ── Radio roxo — Comissão paga ── */
.radio-box-purple {
  border-color: var(--gray-300);
}
.radio-option input[type="radio"]:checked + .radio-box-purple {
  background: #ede9fe;
  border-color: #7c3aed;
  color: #5b21b6;
}

/* ── Seção Admin — Comissão ── */
.cf-section-admin {
  background: linear-gradient(135deg, #faf5ff, #ede9fe);
  border: 1px solid #c4b5fd;
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 4px;
  color: #5b21b6;
}
.cf-section-admin i { color: #7c3aed; }

.admin-only-badge {
  margin-left: auto;
  background: #7c3aed;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: .3px;
}

/* Preview bar da comissão */
.cf-comm-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ede9fe;
  border: 1.5px solid #c4b5fd;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #5b21b6;
  margin-top: 2px;
  margin-bottom: 4px;
}

/* Chip comissão paga na tabela */
.chip-comm-paga {
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  color: #5b21b6;
}
.chip-comm-pend {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
}

/* Coluna Comissão — ocultar para não-Admin */
.col-commission { display: none; }
.role-admin .col-commission { display: table-cell; }

/* Chip de aviso de instalação na tabela */
.chip-notif-sim {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #15803d;
}
.chip-notif-nao {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

/* Status chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.chip-blue    { background: var(--brand-50);   color: var(--brand-700);    border: 1px solid var(--brand-100); }
.chip-blue::before { background: var(--brand-500); }
.chip-green   { background: var(--success-100); color: var(--success-700); border: 1px solid #a7f3d0; }
.chip-green::before { background: var(--success-500); }
.chip-orange  { background: var(--orange-100); color: #c2410c;             border: 1px solid #fed7aa; }
.chip-orange::before { background: var(--orange-500); }
.chip-red     { background: var(--danger-100); color: var(--danger-700);   border: 1px solid #fca5a5; }
.chip-red::before { background: var(--danger-500); }
.chip-gray    { background: var(--gray-200);   color: var(--gray-700);     border: 1px solid var(--gray-300); }
.chip-gray::before { background: var(--gray-500); }
.chip-purple  { background: var(--purple-100); color: #6d28d9;             border: 1px solid #ddd6fe; }
.chip-purple::before { background: var(--purple-500); }
.chip-yellow  { background: var(--yellow-100); color: #92400e;             border: 1px solid #fef08a; }
.chip-yellow::before { background: var(--yellow-500); }
.chip-teal    { background: var(--teal-100);   color: #0f766e;             border: 1px solid #99f6e4; }
.chip-teal::before { background: var(--teal-500); }
.chip-indigo  { background: var(--indigo-100); color: #4338ca;             border: 1px solid #c7d2fe; }
.chip-indigo::before { background: var(--indigo-500); }

/* Profit cells */
.profit-positive { color: var(--success-700); font-weight: 700; }
.profit-negative { color: var(--danger-700);  font-weight: 700; }
.profit-neutral  { color: var(--gray-700);    font-weight: 600; }

/* Fin status badge */
.fin-healthy  { color: var(--success-700); background: var(--success-100); border: 1px solid #a7f3d0; }
.fin-warning  { color: #92400e;            background: var(--warning-100); border: 1px solid #fde68a; }
.fin-negative { color: var(--danger-700);  background: var(--danger-100);  border: 1px solid #fca5a5; }

/* ─── BUTTONS ─── */
.btn-primary {
  height: 34px;
  padding: 0 16px;
  background: var(--brand-600);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  transition: background .15s, transform .1s;
  cursor: pointer;
}

.btn-primary:hover { background: var(--brand-700); }
.btn-primary:active { transform: scale(.98); }

.btn-secondary {
  height: 34px;
  padding: 0 14px;
  background: var(--white);
  color: var(--gray-700);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--gray-300);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.btn-secondary:hover { background: var(--gray-100); border-color: var(--gray-400); }

.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }

/* ─── COMING SOON ─── */
.coming-soon-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--gray-300);
  padding: 60px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.coming-soon-icon {
  font-size: 48px;
  color: var(--gray-300);
  margin-bottom: 4px;
}

.coming-soon-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-700);
}

.coming-soon-card p {
  font-size: 14px;
  color: var(--gray-500);
  max-width: 400px;
  line-height: 1.6;
}

/* ─── MODAL ─── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Modal cliente centralizado (wide) */
#client-modal {
  justify-content: center;
  align-items: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.4);
  backdrop-filter: blur(2px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: 480px;
  height: 100%;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: slideIn .25s ease;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-300);
  flex-shrink: 0;
}

.modal-title { font-size: 16px; font-weight: 700; color: var(--gray-950); }

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

.modal-close:hover { background: var(--gray-200); color: var(--gray-900); }

.modal-body { flex: 1; overflow-y: auto; padding: 20px; }

.detail-section { margin-bottom: 20px; }

.detail-section h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.detail-item { display: flex; flex-direction: column; gap: 3px; }
.detail-label { font-size: 11px; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.detail-value { font-size: 13.5px; font-weight: 600; color: var(--gray-900); }

/* ─── TOAST ─── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-950);
  color: var(--white);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease;
  max-width: 340px;
  border-left: 3px solid var(--brand-500);
}

.toast-success { border-left-color: var(--success-500); }
.toast-warning { border-left-color: var(--warning-500); }
.toast-danger  { border-left-color: var(--danger-500);  }

@keyframes toastIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── SCROLLBAR ─── */
.dashboard-section::-webkit-scrollbar { width: 6px; }
.dashboard-section::-webkit-scrollbar-track { background: transparent; }
.dashboard-section::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

/* Table action button */
.btn-detail {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  cursor: pointer;
  transition: background .15s;
}

.btn-detail:hover { background: var(--brand-100); }

/* ══════════════════════════════════════════════
   GESTÃO DE USUÁRIOS
   ══════════════════════════════════════════════ */

/* ─── Stats row ─── */
.user-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 900px) { .user-stats-row { grid-template-columns: repeat(2,1fr); } }

/* ─── Barra de busca ─── */
.users-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}

/* ─── Avatar na tabela ─── */
.user-avatar-cell {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.avatar-admin      { background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); }
.avatar-supervisor { background: linear-gradient(135deg, var(--purple-500), #6d28d9); }
.avatar-agent      { background: linear-gradient(135deg, var(--teal-500), #0f766e); }

/* ─── Botões de ação na tabela ─── */
.user-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-edit {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}

.btn-edit:hover { background: var(--brand-100); transform: scale(1.08); }

.btn-remove {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--danger-700);
  background: var(--danger-100);
  border: 1px solid #fca5a5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}

.btn-remove:hover { background: #fecaca; transform: scale(1.08); }

.btn-toggle-status {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--warning-700);
  background: var(--warning-100);
  border: 1px solid #fcd34d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}

.btn-toggle-status:hover { background: #fde68a; transform: scale(1.08); }

/* ─── Permissões info ─── */
.permissions-info-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.perm-info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-300);
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
}

.perm-info-header i { color: var(--success-500); font-size: 16px; }

.perm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}

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

.perm-card {
  padding: 16px 20px;
  border-right: 1px solid var(--gray-200);
}

.perm-card:last-child { border-right: none; }

.perm-title {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid;
}

.perm-admin .perm-title    { color: var(--brand-700);  border-color: var(--brand-500); }
.perm-admin .perm-title i  { color: var(--brand-500); }
.perm-supervisor .perm-title { color: #6d28d9; border-color: var(--purple-500); }
.perm-supervisor .perm-title i { color: var(--purple-500); }
.perm-agent .perm-title    { color: #0f766e; border-color: var(--teal-500); }
.perm-agent .perm-title i  { color: var(--teal-500); }

.perm-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.perm-list li {
  font-size: 12.5px;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 8px;
}

.perm-list li .fa-check { color: var(--success-500); font-size: 11px; }
.perm-list li .fa-times  { color: var(--danger-500);  font-size: 11px; }

/* ─── Modal de usuário ─── */
.modal-panel-user {
  width: 520px;
  max-width: 100vw;
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-header-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--brand-600);
  flex-shrink: 0;
}

.modal-header-icon.icon-edit   { background: var(--warning-100); border-color: #fcd34d; color: var(--warning-700); }
.modal-header-icon.icon-delete { background: var(--danger-100);  border-color: #fca5a5; color: var(--danger-700); }

.modal-subtitle {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

.required-star { color: var(--danger-500); }

.form-hint {
  font-size: 11.5px;
  color: var(--gray-500);
  margin-top: 4px;
  display: block;
}

.user-modal-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--warning-100);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  color: #92400e;
  font-weight: 500;
  margin-bottom: 16px;
}

.user-modal-warning i { color: var(--warning-500); flex-shrink: 0; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}

/* ─── Confirm modal (deletar) ─── */
.confirm-panel {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: 20px;
  padding: 36px 32px;
  width: 420px;
  max-width: 95vw;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  animation: popIn .2s ease;
}

@keyframes popIn {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.confirm-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 4px;
}

.confirm-danger { background: var(--danger-100); color: var(--danger-700); }

.confirm-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-950);
}

.confirm-desc {
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.55;
  max-width: 320px;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.btn-danger {
  height: 40px;
  padding: 0 20px;
  background: var(--danger-500);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: background .15s;
}

.btn-danger:hover { background: var(--danger-700); }

/* ─── Modal centralizado (confirm) ─── */
.modal-centered {
  align-items: center;
  justify-content: center;
}
.modal-centered .modal-backdrop { position: absolute; }

/* ═══════════════════════════════════════════════════════════
   MODAL GERENCIAR LISTAS — overlay independente, z-index alto
   Funciona fora do #app e acima de qualquer outro modal
   ═══════════════════════════════════════════════════════════ */
.lists-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.lists-modal-overlay.hidden { display: none !important; }

.lists-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(3px);
  cursor: pointer;
  z-index: 0;
}

.lists-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: 20px;
  width: 780px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 80px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
  animation: popIn .2s ease;
}

.lists-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
  border-radius: 20px 20px 0 0;
  flex-shrink: 0;
}

.lists-modal-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lists-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  border: 2px solid var(--brand-100);
}

.lists-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0;
  line-height: 1.2;
}

.lists-modal-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin: 4px 0 0;
  line-height: 1.3;
}

.lists-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--gray-500);
  border: 2px solid var(--gray-200);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.lists-modal-close:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* ─── Sidebar item admin only ─── */
.nav-admin-only { display: none; }

/* ─── Empty state tabela ─── */
.empty-state-row td {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-400);
  font-size: 13px;
}

.empty-state-row .empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
}

/* ─── Chip ativo/inativo ─── */
.chip-active   { background: var(--success-100); color: var(--success-700); border: 1px solid #a7f3d0; }
.chip-inactive { background: var(--gray-200);    color: var(--gray-600);    border: 1px solid var(--gray-300); }
.chip-blocked  { background: var(--danger-100);  color: var(--danger-700);  border: 1px solid #fca5a5; }

.btn-detail:hover { background: var(--brand-100); }

/* ══════════════════════════════════════════════
   GESTÃO DE CLIENTES — Modal e Tabela
   ══════════════════════════════════════════════ */

/* Modal mais largo para formulário de cliente */
/* ── Modal Cliente — layout wide 2 colunas ── */
.client-modal-panel {
  width: 1280px;
  max-width: 99vw;
  max-height: 96vh;
  height: 96vh !important;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15,23,42,.22);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  position: relative;
  z-index: 1;
  animation: slideInCenter .25s ease;
}

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

/* Corpo do modal cliente dividido em 3 colunas */
.client-modal-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Cada coluna rola independentemente */
.client-modal-col {
  overflow-y: auto;
  padding: 20px 22px;
  border-right: 1px solid var(--gray-200);
  /* a altura do grid pai controla — coluna não precisa de max-height fixo */
  min-height: 0;
}
.client-modal-col:last-child { border-right: none; }

/* Scrollbar fina nas colunas */
.client-modal-col::-webkit-scrollbar { width: 5px; }
.client-modal-col::-webkit-scrollbar-track { background: transparent; }
.client-modal-col::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

/* Separador visual entre colunas */
.client-modal-col-divider {
  width: 1px;
  background: var(--gray-200);
  flex-shrink: 0;
}

/* Footer de ações do modal cliente */
.client-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: var(--gray-50);
  border-radius: 0 0 16px 16px;
  flex-shrink: 0;
}
.client-modal-footer .btn-primary,
.client-modal-footer .btn-secondary {
  height: 42px;
  padding: 0 22px;
  font-size: 13.5px;
  border-radius: var(--radius-md);
}

/* Label de coluna no topo */
.client-col-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-bottom: 2px solid var(--gray-200);
  margin: -20px -22px 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--gray-50);
  position: sticky;
  top: -20px;
  z-index: 2;
}

/* Avatar na tabela de clientes */
.client-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Seções internas do formulário */
.cf-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: .6px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200);
}

.cf-section-title:first-of-type { margin-top: 0; }
.cf-section-title i { color: var(--brand-500); }

/* Grid 2 colunas dentro do modal */
.cf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 520px) { .cf-grid-2 { grid-template-columns: 1fr; } }

/* Inputs do form de cliente */
.cf-input {
  background: var(--white) !important;
  font-size: 13.5px;
}

/* Preview do lucro calculado */
.cf-profit-bar {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
  min-height: 40px;
  transition: background .2s;
}

/* ══════════════════════════════════════════════
   MELHORIAS VISUAIS GERAIS — Update
   ══════════════════════════════════════════════ */

/* Entrada suave nas seções — adicionar animation à regra principal via override */
@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Highlight na linha ao hover */

/* Form group margin padrão */
.form-group { margin-bottom: 0; }

/* Garantir que select dentro do form-input tenha altura certa */
select.form-input { cursor: pointer; }
textarea.form-input { height: auto; padding-top: 10px; padding-bottom: 10px; resize: vertical; }

/* Scrollbar do modal body */
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

/* Badge do nav — animação ao atualizar */
.nav-badge {
  transition: transform .2s;
}

/* Linha da tabela de clientes com avatar */
.data-table tbody td { vertical-align: middle; }

/* Highlight na linha selecionada */
.data-table tbody tr:hover td { background: var(--brand-50); }

/* Botão primário maior no modal */
.modal-actions .btn-primary,
.modal-actions .btn-secondary {
  height: 42px;
  padding: 0 20px;
  font-size: 13.5px;
  border-radius: var(--radius-md);
}

/* Tooltip nos botões de ação */
[title] { position: relative; }

/* Separador entre seções do modal cliente */
.cf-section-title + .cf-grid-2,
.cf-section-title + .form-group {
  margin-top: 0;
}

/* Responsivo — modal cliente em telas médias: 3 → 2 colunas */
@media (max-width: 1100px) {
  .client-modal-panel { width: 99vw; max-width: 99vw; }
  .client-modal-body-grid { grid-template-columns: 1fr 1fr; }
  /* Col 3 (Fibra) ocupa largura inteira embaixo */
  .client-modal-col:nth-child(3) {
    grid-column: 1 / -1;
    max-height: 55vh;
    border-right: none;
    border-top: 1px solid var(--gray-200);
  }
}

/* Responsivo — modal cliente em telas pequenas: 1 coluna */
@media (max-width: 720px) {
  .client-modal-panel {
    width: 100vw; max-width: 100vw;
    max-height: 100vh; height: 100vh !important;
    border-radius: 0;
  }
  .client-modal-body-grid { grid-template-columns: 1fr; }
  .client-modal-col {
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
  }
  .client-modal-col:nth-child(3) { grid-column: auto; max-height: 50vh; border-top: none; }
  .client-modal-col:last-child { border-bottom: none; max-height: none; }
  .client-modal-footer { border-radius: 0; }
  .client-col-label { position: static; margin: -20px -22px 14px; }
}
@media (max-width: 640px) {
  .modal-panel-user { width: 100vw; }
  .modal-panel-user { border-radius: 20px 20px 0 0; max-height: 92vh; }
}

/* Chip dentro da tabela — sem margin extra */
.data-table .chip { vertical-align: middle; }

/* Ação botões — gap uniforme */
.user-actions { gap: 5px; }

/* Section header responsivo */
@media (max-width: 600px) {
  .section-header { flex-direction: column; align-items: flex-start; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .charts-grid-2, .charts-grid-3 { grid-template-columns: 1fr; }
  .filter-bar { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 6px; }
}

/* ══════════════════════════════════════════════
   GERENCIAMENTO DE LISTAS DINÂMICAS
   ══════════════════════════════════════════════ */

/* Botão "Gerenciar listas" dentro do cf-section-title */
.btn-manage-lists {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 7px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background .15s;
  text-transform: none;
  letter-spacing: 0;
}
.btn-manage-lists:hover { background: var(--brand-100); }

/* Modal de listas — coluna única, bem espaçoso */
/* .lists-modal-panel agora definida acima no bloco do overlay */

.lists-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

@media (max-width: 700px) { .lists-panel-body { padding: 14px; gap: 14px; } }

.lists-panel-body::-webkit-scrollbar { width: 5px; }
.lists-panel-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

/* Card de cada grupo de lista */
.list-group-card {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  transition: border-color .15s;
}
.list-group-card:hover { border-color: var(--brand-300); }

.list-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
}

.list-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--gray-900);
}

.list-group-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.list-group-count {
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
}

/* Botão Adicionar no header do grupo */
.btn-list-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--brand-600);
  border: none;
  border-radius: 9px;
  padding: 9px 18px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(59,130,246,.3);
}
.btn-list-add:hover {
  background: var(--brand-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,.4);
}

/* Formulário inline de adição */
.list-add-form {
  padding: 14px 20px;
  background: var(--brand-50);
  border-bottom: 1px solid var(--brand-100);
}

.list-add-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.list-input {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border: 2px solid var(--gray-300);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--white);
  outline: none;
  transition: border-color .15s;
}
.list-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }

.list-input-inline {
  flex: 1;
  height: 38px;
  font-size: 13.5px;
  padding: 0 12px;
}

.btn-list-save {
  height: 42px;
  padding: 0 18px;
  background: var(--brand-600);
  color: var(--white);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  transition: background .15s;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(59,130,246,.3);
}
.btn-list-save:hover { background: var(--brand-700); }

.btn-list-cancel {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: var(--gray-500);
  background: var(--white);
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s;
}
.btn-list-cancel:hover { background: var(--gray-200); color: var(--gray-700); }

/* Lista de itens */
.list-items {
  list-style: none;
  padding: 6px 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

.list-items::-webkit-scrollbar { width: 5px; }
.list-items::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-800);
  border-bottom: 1px solid var(--gray-100);
  transition: background .1s;
  flex-wrap: nowrap;
  min-height: 54px;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: #f8faff; }

.list-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-400);
  flex-shrink: 0;
}

.list-item-num {
  min-width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.list-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botões SEMPRE visíveis */
.list-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.btn-li-edit {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1.5px solid var(--brand-200);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.btn-li-edit:hover {
  background: var(--brand-600);
  color: #fff;
  border-color: var(--brand-600);
  transform: translateY(-1px);
}

.btn-li-remove {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.btn-li-remove:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
  transform: translateY(-1px);
}

/* Botão confirmar edição (verde) */
.btn-li-confirm {
  color: #15803d !important;
  background: #f0fdf4 !important;
  border-color: #86efac !important;
}
.btn-li-confirm:hover {
  background: #15803d !important;
  color: #fff !important;
  border-color: #15803d !important;
  transform: translateY(-1px);
}

.list-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--gray-400);
  font-style: italic;
  text-align: center;
}

/* ══════════════════════════════════════════════
   CAMPO KATAKANA — Input especial
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   CAMPO ご契約者様 — Titular do Contrato
   ══════════════════════════════════════════════ */
.gokeiyaku-label {
  color: #a21caf;
  font-weight: 800;
  font-family: 'Hiragino Sans', 'Meiryo', 'Yu Gothic', sans-serif;
  font-size: 14px;
  letter-spacing: .5px;
}
.gokeiyaku-icon { color: #a21caf !important; }
.gokeiyaku-input {
  font-family: 'Hiragino Sans', 'Meiryo', 'Yu Gothic', 'MS PGothic', sans-serif;
  font-size: 14px;
  letter-spacing: .5px;
  color: #a21caf;
  font-weight: 600;
}
.gokeiyaku-input::placeholder {
  font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
  font-size: 12.5px;
  color: #e879f9;
  font-weight: 400;
  opacity: .7;
}
.gokeiyaku-input:focus {
  border-color: #c026d3 !important;
  box-shadow: 0 0 0 3px rgba(192,38,211,.13) !important;
}

/* ══════════════════════════════════════════════
   SUB-BLOCO IDENTIFICAÇÃO COMERCIAL
   ══════════════════════════════════════════════ */
.cf-comercial-subblock {
  background: linear-gradient(135deg, #ecfeff, #e0f7fa);
  border: 1.5px solid #a5f3fc;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cf-comercial-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0e7490;
}
.cf-comercial-badge {
  font-size: 10px;
  background: #0891b2;
  color: #fff;
  padding: 1px 8px;
  border-radius: 99px;
  font-weight: 700;
  margin-left: auto;
}

/* Select de Provedora da Fibra */
.fiber-provider-select {
  color: #6d28d9;
  font-weight: 600;
  border-color: #ddd6fe;
  background: #f5f3ff;
}
.fiber-provider-select:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important;
  background: #fff;
}
.fiber-provider-select option { color: var(--gray-800); font-weight: 400; background: #fff; }

/* Campo Katakana */
.katakana-input {
  font-family: 'Hiragino Sans', 'Meiryo', 'Yu Gothic', 'MS PGothic', sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #4f46e5;
  font-weight: 600;
}
.katakana-input::placeholder {
  font-family: 'Hiragino Sans', 'Meiryo', 'Yu Gothic', 'MS PGothic', sans-serif;
  font-size: 13px;
  letter-spacing: .5px;
  color: #a5b4fc;
  font-weight: 400;
}
.katakana-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}

/* ══════════════════════════════════════════════
   MODAL DE EXPORTAÇÃO — Seleção de Campos
   ══════════════════════════════════════════════ */

.export-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: 20px;
  width: 680px;
  max-width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: popIn .2s ease;
}

.export-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 16px;
  background: linear-gradient(135deg, #163A5C 0%, #1E4E79 100%);
  color: var(--white);
  flex-shrink: 0;
}

.export-modal-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.export-modal-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.2px;
}

.export-modal-subtitle {
  font-size: 12px;
  opacity: .75;
  margin-top: 2px;
}

.export-close-btn {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  border: none;
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.export-close-btn:hover { background: rgba(255,255,255,.25); }

.export-modal-body {
  overflow-y: auto;
  padding: 20px 22px;
  flex: 1;
}
.export-modal-body::-webkit-scrollbar { width: 5px; }
.export-modal-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

/* Barra rápida de presets */
.export-quick-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-200);
}

.export-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all .15s;
}
.export-quick-btn:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
  color: var(--brand-700);
}

/* Grade de grupos */
.export-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

/* Card de grupo */
.export-group {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
}

.export-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-800);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  letter-spacing: -.1px;
}

.export-fields {
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Checkbox customizado */
.export-field-chk {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--gray-700);
  padding: 4px 6px;
  border-radius: 7px;
  transition: background .1s;
  user-select: none;
}
.export-field-chk:hover { background: var(--gray-200); }

.export-field-chk input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-600);
  cursor: pointer;
  flex-shrink: 0;
}

.export-field-chk span {
  flex: 1;
  line-height: 1.3;
}

/* Barra de preview */
.export-preview-bar {
  margin-top: 18px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  font-size: 13px;
  color: var(--gray-600);
  text-align: center;
}

/* Footer */
.export-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
  gap: 10px;
}

.export-btn-csv {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.export-btn-csv:hover { opacity: .88; }

.export-btn-excel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.export-btn-excel:hover { opacity: .88; }

/* ══════════════════════════════════════════════
   MÓDULO DISTRIBUIDORAS — Cruzamento de Comissões
   ══════════════════════════════════════════════ */

/* Painel principal */
.dist-panel { border: 2px solid #bfdbfe; overflow: visible; }

.dist-panel-header {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-bottom: 2px solid #bfdbfe;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
}

.dist-panel-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e40af, #2563eb);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37,99,235,.3);
}

/* Select distribuidora */
.dist-select {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e40af;
  border-color: #93c5fd;
  background: #fff;
  min-width: 200px;
  height: 36px;
  padding: 0 10px;
}
.dist-select:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important; }

/* Input data de pagamento */
.dist-date-input {
  font-size: 12.5px;
  font-weight: 600;
  color: #15803d;
  border-color: #86efac;
  height: 36px;
  padding: 0 10px;
  width: 150px;
}
.dist-date-input:focus { border-color: #16a34a !important; box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important; }

/* Botão importar */
.dist-import-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #1e40af, #2563eb);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(37,99,235,.3);
}
.dist-import-btn:hover { opacity: .88; transform: translateY(-1px); }
.dist-import-btn:active { transform: translateY(0); }
.dist-import-disabled {
  background: var(--gray-300) !important;
  color: var(--gray-500) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Instruções */
.dist-instructions {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-bottom: 1px solid #bae6fd;
  flex-wrap: wrap;
}
.dist-instr-icon { font-size: 22px; color: #0284c7; flex-shrink: 0; margin-top: 2px; }
.dist-instr-text { font-size: 12.5px; color: #0369a1; line-height: 1.7; flex: 1; min-width: 200px; }
.dist-instr-cols { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dist-instr-col-badge {
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
  white-space: nowrap;
}
.dist-col-blue   { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.dist-col-teal   { background: #ccfbf1; color: #0f766e; border: 1px solid #5eead4; }
.dist-col-green  { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.dist-col-purple { background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd; }

/* KPIs do cruzamento */
.dist-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
}
.dist-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  gap: 4px;
  border-right: 1px solid #e2e8f0;
  font-size: 22px;
}
.dist-kpi:last-child { border-right: none; }
.dist-kpi-val { font-size: 26px; font-weight: 800; line-height: 1; }
.dist-kpi-lbl { font-size: 11px; color: var(--gray-500); font-weight: 500; text-align: center; }
.dist-kpi-total { background: #f8fafc; }
.dist-kpi-total .dist-kpi-val { color: var(--gray-700); }
.dist-kpi-total i { color: var(--gray-400); }
.dist-kpi-ok    { background: #f0fdf4; }
.dist-kpi-ok    .dist-kpi-val { color: #15803d; }
.dist-kpi-ok    i { color: #16a34a; }
.dist-kpi-warn  { background: #fffbeb; }
.dist-kpi-warn  .dist-kpi-val { color: #b45309; }
.dist-kpi-warn  i { color: #d97706; }
.dist-kpi-money { background: #eff6ff; }
.dist-kpi-money .dist-kpi-val { color: #1e40af; font-size: 20px; }
.dist-kpi-money i { color: #2563eb; }

/* Filtros de resultado */
.dist-result-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.dist-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.dist-filter-btn span {
  background: var(--gray-200);
  color: var(--gray-700);
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 99px;
}
.dist-filter-btn:hover { border-color: var(--brand-400); background: var(--brand-50); }
.dist-filter-btn.active {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
.dist-filter-btn.active span { background: rgba(255,255,255,.25); color: #fff; }

/* Tabela */
.dist-table th, .dist-table td { font-size: 12.5px; }

/* Linha selecionada */
.dist-row-selected td { background: #eff6ff !important; }
.dist-row-warn td     { background: #fffbeb !important; opacity: .85; }

/* Código do cruzamento */
.dist-code {
  font-family: 'Courier New', monospace;
  font-size: 11.5px;
  background: #f1f5f9;
  color: #1e40af;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
}
.dist-code-teal { background: #f0fdfa; color: #0f766e; border-color: #ccfbf1; }

/* Chips de status do cruzamento */
.dist-status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
  white-space: nowrap;
}
.dist-status-chip small { font-weight: 500; opacity: .8; }
.dist-chip-ok   { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.dist-chip-warn { background: #fef9c3; color: #92400e; border: 1px solid #fde68a; }

/* Chips de comissão */
.dist-comm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 99px;
}
.dist-comm-paid { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.dist-comm-pend { background: #fef9c3; color: #92400e; border: 1px solid #fde68a; }

/* Barra de ação inferior */
.dist-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
  gap: 10px;
  opacity: .5;
  transition: opacity .2s;
}
.dist-action-bar-active { opacity: 1 !important; }
.dist-action-info {
  font-size: 13px;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Botão aplicar baixas */
.dist-apply-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #15803d, #16a34a);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 3px 10px rgba(22,163,74,.3);
}
.dist-apply-btn:hover { opacity: .88; transform: translateY(-1px); }

/* Histórico */
.dist-history-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  user-select: none;
  transition: background .15s;
}
.dist-history-header:hover { background: var(--gray-100); }

.dist-history-badge {
  background: #6366f1;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 99px;
}

@media (max-width: 640px) {
  .dist-panel-header { flex-direction: column; align-items: flex-start; }
  .dist-kpis { grid-template-columns: 1fr 1fr; }
  .dist-kpi { border-right: none; border-bottom: 1px solid #e2e8f0; }
}

/* ══════════════════════════════════════════════
   BANNER ALERTA ENVIO — dentro do modal do cliente
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   PAINEL INLINE — Gerenciar Listas dentro de Produto e Comercial
   ══════════════════════════════════════════════════════════════ */

.cf-lists-inline-panel {
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}

/* Barra de abas */
.cf-lists-tabs {
  display: flex;
  gap: 0;
  background: var(--white);
  border-bottom: 2px solid var(--gray-200);
  overflow-x: auto;
  scrollbar-width: none;
}
.cf-lists-tabs::-webkit-scrollbar { display: none; }

.cf-lists-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-500);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  margin-bottom: -2px;
}
.cf-lists-tab:hover {
  color: var(--brand-600);
  background: var(--brand-50);
}
.cf-lists-tab.active {
  color: var(--brand-700);
  font-weight: 700;
  border-bottom-color: var(--brand-500);
  background: var(--brand-50);
}

/* Corpo da aba ativa */
.cf-lists-inline-content {
  padding: 0;
}

/* Formulário de adição */
.cf-il-add-form {
  padding: 10px 14px;
  background: var(--brand-50);
  border-bottom: 1px solid var(--brand-100);
}
.cf-il-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Lista de itens */
.cf-il-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
.cf-il-list::-webkit-scrollbar { width: 4px; }
.cf-il-list::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

/* Item da lista */
.cf-il-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--gray-100);
  transition: background .1s;
  min-height: 44px;
}
.cf-il-item:last-child { border-bottom: none; }
.cf-il-item:hover { background: #f0f7ff; }

.cf-il-num {
  min-width: 22px;
  height: 22px;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cf-il-text {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-800);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botões Editar / Remover */
.cf-il-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}

.cf-il-btn-edit {
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1.5px solid var(--brand-200);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .13s;
  white-space: nowrap;
}
.cf-il-btn-edit:hover {
  background: var(--brand-600);
  color: #fff;
  border-color: var(--brand-600);
}
.cf-il-btn-confirm {
  color: #15803d !important;
  background: #f0fdf4 !important;
  border-color: #86efac !important;
}
.cf-il-btn-confirm:hover {
  background: #15803d !important;
  color: #fff !important;
  border-color: #15803d !important;
}

.cf-il-btn-remove {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 12px;
  color: #dc2626;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .13s;
  flex-shrink: 0;
}
.cf-il-btn-remove:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* Estado vazio */
.cf-il-empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-400);
  font-style: italic;
}
.cf-il-empty i { margin-right: 6px; }

/* Rodapé com botão Adicionar e contador */
.cf-il-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}

.cf-il-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  background: var(--brand-600);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.cf-il-add-btn:hover { background: var(--brand-700); }

.cf-il-count {
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 500;
}

/* ─────────────────────────────── */

.cf-envio-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid #fca5a5;
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f1 100%);
  overflow: hidden;
  animation: bannerSlideIn .25s ease;
}

@keyframes bannerSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Variante laranja — produto físico */
.cf-envio-banner-produto {
  border-color: #fb923c;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

/* Variante azul — fibra óptica */
.cf-envio-banner-fibra {
  border-color: #93c5fd;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

/* Ícone do banner */
.cf-envio-banner-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c2410c, #ea580c);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(194,65,12,.35);
}

/* Corpo do banner */
.cf-envio-banner-body {
  flex: 1;
  min-width: 0;
}

.cf-envio-banner-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #b91c1c;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.2;
}

.cf-envio-banner-produto .cf-envio-banner-title { color: #c2410c; }
.cf-envio-banner-fibra   .cf-envio-banner-title { color: #1e40af; }

.cf-envio-banner-desc {
  font-size: 11.5px;
  color: #7f1d1d;
  margin-top: 4px;
  line-height: 1.4;
}

.cf-envio-banner-produto .cf-envio-banner-desc { color: #92400e; }
.cf-envio-banner-fibra   .cf-envio-banner-desc { color: #1e3a8a; }

/* Pulso animado no canto — chama atenção */
.cf-envio-banner-pulse {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  animation: bannerPulse 1.6s ease-in-out infinite;
}

.cf-envio-banner-produto .cf-envio-banner-pulse { background: #f97316; }
.cf-envio-banner-fibra   .cf-envio-banner-pulse { background: #3b82f6; }

@keyframes bannerPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
  50%       { transform: scale(1.2); opacity: .85; box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ══════════════════════════════════════════════
   BANNER — MUDANÇA DE FIBRA ÓPTICA (roxo pulsante)
   ══════════════════════════════════════════════ */

.cf-fibra-change-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #faf5ff, #ede9fe);
  border: 1.5px solid #c4b5fd;
  box-shadow: 0 4px 16px rgba(109,40,217,.15);
  overflow: hidden;
  animation: fibraChangeBannerIn .3s ease;
}

@keyframes fibraChangeBannerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Faixa pulsante no topo */
.cf-fibra-change-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa, #7c3aed);
  background-size: 200% 100%;
  animation: fibraChangePulseBar 2s linear infinite;
}

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

/* Ícone do banner */
.cf-fibra-change-banner-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(109,40,217,.35);
  animation: fibraChangeIconSpin 3s ease-in-out infinite;
}

@keyframes fibraChangeIconSpin {
  0%,  80%, 100% { transform: rotate(0deg); }
  40%            { transform: rotate(180deg); }
}

/* Texto do banner */
.cf-fibra-change-banner-body { flex: 1; min-width: 0; }

.cf-fibra-change-banner-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #5b21b6;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cf-fibra-change-banner-desc {
  font-size: 11.5px;
  color: #6d28d9;
  margin-top: 4px;
  line-height: 1.4;
}

/* Ponto pulsante no canto */
.cf-fibra-change-banner-pulse {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7c3aed;
  animation: fibraChangeDot 1.6s ease-in-out infinite;
}

@keyframes fibraChangeDot {
  0%, 100% { transform: scale(1);   opacity: 1;   box-shadow: 0 0 0 0 rgba(124,58,237,.5); }
  50%       { transform: scale(1.3); opacity: .8; box-shadow: 0 0 0 7px rgba(124,58,237,0); }
}

/* ══════════════════════════════════════════════
   PEDIDO DE MUDANÇA DE ENDEREÇO — Sub-bloco Fibra
   ══════════════════════════════════════════════ */

/* Sub-bloco container */
.addr-change-subblock {
  margin-top: 10px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1.5px solid #fed7aa;
  border-radius: 12px;
  overflow: hidden;
}

.addr-change-fields {
  padding: 14px 16px;
}

/* Banner laranja pulsante — aparece quando "Mudança solicitada" */
.cf-addr-change-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1.5px solid #fed7aa;
  box-shadow: 0 4px 16px rgba(234,88,12,.18);
  overflow: hidden;
  animation: addrChangeBannerIn .3s ease;
}

@keyframes addrChangeBannerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Faixa pulsante laranja no topo */
.cf-addr-change-banner-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ea580c, #fb923c, #ea580c);
  background-size: 200% 100%;
  animation: addrChangePulseBar 2s linear infinite;
}

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

/* Ícone do banner */
.cf-addr-change-banner-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c2410c, #ea580c);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(234,88,12,.35);
}

/* Ícone com animação de pulso */
.cf-addr-change-icon-spin {
  animation: addrChangeIconPulse 2s ease-in-out infinite;
}

@keyframes addrChangeIconPulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.25); }
}

/* Texto do banner */
.cf-addr-change-banner-body { flex: 1; min-width: 0; }

.cf-addr-change-banner-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #9a3412;
  line-height: 1.2;
}

.cf-addr-change-banner-desc {
  font-size: 11.5px;
  color: #c2410c;
  margin-top: 4px;
  line-height: 1.4;
}

/* Ponto pulsante no canto */
.cf-addr-change-banner-pulse {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ea580c;
  animation: addrChangeDot 1.6s ease-in-out infinite;
}

@keyframes addrChangeDot {
  0%, 100% { transform: scale(1);   opacity: 1;   box-shadow: 0 0 0 0 rgba(234,88,12,.5); }
  50%       { transform: scale(1.3); opacity: .8; box-shadow: 0 0 0 7px rgba(234,88,12,0); }
}

/* Chips para tabela */
.chip-addr-change-ok {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #15803d;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
}
.chip-addr-change-pend {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════
   BLOCO ENVIO / INSCRIÇÃO — Formulário
   ══════════════════════════════════════════════ */

.cf-envio-block {
  margin-top: 4px;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #fed7aa;
}

.cf-envio-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-bottom: 1.5px solid #fed7aa;
}

.cf-envio-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #c2410c, #ea580c);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}

.cf-envio-header-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #92400e;
  line-height: 1.2;
}

.cf-envio-header-desc {
  font-size: 11px;
  color: #b45309;
  margin-top: 2px;
}

.cf-envio-alert-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #dc2626;
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  animation: pulse-red 1.8s infinite;
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.3); }
  50%       { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* Chips na tabela */
.chip-envio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}

.chip-envio-produto {
  background: #fff7ed;
  border: 1.5px solid #fed7aa;
  color: #c2410c;
}

.chip-envio-fibra {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  color: #1e40af;
}

.chip-envio-ok {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #15803d;
}

/* ══════════════════════════════════════════════
   MODAL BACKUP & RESTAURAÇÃO
   ══════════════════════════════════════════════ */

/* Botão no header */
.header-btn-backup { color: #6366f1 !important; }
.header-btn-backup:hover { background: #ddd6fe !important; border-color: #a5b4fc !important; }
@media (max-width: 480px) { .backup-btn-label { display: none; } }

/* Botão Backup na sidebar */
.sidebar-backup-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 0 12px 10px;
  padding: 9px 14px;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border: 1.5px solid #c4b5fd;
  border-radius: 10px;
  color: #5b21b6;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.sidebar-backup-btn i {
  font-size: 14px;
  color: #7c3aed;
  flex-shrink: 0;
}
.sidebar-backup-btn:hover {
  background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
  border-color: #a78bfa;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(124,58,237,.2);
}

/* Painel */
.backup-modal-panel {
  position: relative; z-index: 1;
  background: var(--white);
  border-radius: 20px;
  width: 640px; max-width: 96vw; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: popIn .2s ease;
}

/* Header */
.backup-modal-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px 16px;
  background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 100%);
  color: var(--white); flex-shrink: 0;
}
.backup-modal-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.backup-modal-title  { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.backup-modal-subtitle { font-size: 12px; opacity: .75; margin-top: 2px; }
.backup-close-btn {
  margin-left: auto; width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.12); border: none; color: var(--white);
  font-size: 14px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s;
}
.backup-close-btn:hover { background: rgba(255,255,255,.25); }

/* Body */
.backup-modal-body {
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 0;
}
.backup-modal-body::-webkit-scrollbar { width: 5px; }
.backup-modal-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

/* Barra de info */
.backup-info-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--gray-200);
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}
.backup-info-item {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 14px 8px;
  border-right: 1px solid #ddd6fe; font-size: 22px; font-weight: 800;
  color: var(--gray-800);
}
.backup-info-item:last-child { border-right: none; }
.backup-info-item span { font-size: 22px; font-weight: 800; line-height: 1; }
.backup-info-item small { font-size: 10.5px; color: var(--gray-500); font-weight: 500; text-align: center; }

/* Blocos */
.backup-block { border-bottom: 1px solid var(--gray-200); }
.backup-block:last-child { border-bottom: none; }
.backup-block-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
}
.backup-block-save    { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-bottom: 1px solid #bbf7d0; }
.backup-block-restore { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-bottom: 1px solid #fde68a; }
.backup-block-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #15803d, #16a34a);
  color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
}
.backup-block-title { font-size: 14px; font-weight: 700; color: var(--gray-800); }
.backup-block-desc  { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.backup-block-body  { padding: 16px 20px; }

/* Lista de itens incluídos */
.backup-what-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.backup-what-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--gray-700);
}

/* Botão baixar backup */
.backup-btn-save {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #15803d, #16a34a);
  color: #fff; border: none; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 3px 10px rgba(22,163,74,.25);
}
.backup-btn-save:hover { opacity: .88; transform: translateY(-1px); }

/* Alerta de aviso */
.backup-warn-box {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  background: #fffbeb; border: 1.5px solid #fde68a;
  font-size: 12.5px; color: var(--gray-700);
  margin-bottom: 16px; line-height: 1.6;
}

/* Drop zone */
.backup-dropzone {
  border: 2.5px dashed var(--gray-300);
  border-radius: 14px; padding: 28px 20px;
  text-align: center; cursor: pointer;
  transition: all .2s; background: var(--gray-50);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.backup-dropzone:hover, .backup-dropzone-active {
  border-color: #6366f1 !important;
  background: #f5f3ff !important;
}
.backup-dropzone-icon { font-size: 36px; color: var(--gray-300); transition: color .2s; }
.backup-dropzone:hover .backup-dropzone-icon,
.backup-dropzone-active .backup-dropzone-icon { color: #6366f1; }
.backup-dropzone-text { font-size: 14px; font-weight: 600; color: var(--gray-600); }
.backup-dropzone-sub  { font-size: 11.5px; color: var(--gray-400); }
.backup-file-name {
  font-size: 12.5px; font-weight: 600; color: #4f46e5;
  background: #ede9fe; padding: 4px 12px; border-radius: 99px;
}

/* Botão escolher */
.backup-btn-choose {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff; border-radius: 9px; font-size: 13px;
  font-weight: 600; cursor: pointer;
  transition: opacity .15s; user-select: none;
}
.backup-btn-choose:hover { opacity: .88; }

/* Preview do backup */
.backup-preview {
  margin-top: 16px;
  border: 2px solid #c7d2fe; border-radius: 12px; overflow: hidden;
  background: #f5f3ff;
}
.backup-preview-title {
  padding: 10px 16px;
  font-size: 12.5px; font-weight: 700; color: #4338ca;
  background: #e0e7ff; border-bottom: 1px solid #c7d2fe;
  display: flex; align-items: center; gap: 7px;
}
.backup-preview-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 16px; gap: 12px;
}
.backup-preview-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center;
}
.backup-preview-val { font-size: 18px; font-weight: 800; color: var(--gray-800); }
.backup-preview-lbl { font-size: 10.5px; color: var(--gray-500); font-weight: 500; }
.backup-preview-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 16px; border-top: 1px solid #c7d2fe;
  background: #eef2ff;
}

/* Botão restaurar */
.backup-btn-restore {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  background: linear-gradient(135deg, #b45309, #d97706);
  color: #fff; border: none; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity .15s;
  box-shadow: 0 3px 10px rgba(180,83,9,.25);
}
.backup-btn-restore:hover { opacity: .88; }

/* Lista de histórico */
.backup-history-list { display: flex; flex-direction: column; }
.backup-history-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--gray-100);
  transition: background .1s;
}
.backup-history-item:last-child { border-bottom: none; }
.backup-history-item:hover { background: var(--gray-50); }
.backup-history-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 14px; flex-shrink: 0;
}
.backup-history-info { flex: 1; min-width: 0; }
.backup-history-fname {
  font-size: 12.5px; font-weight: 600; color: var(--gray-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.backup-history-meta { font-size: 11px; color: var(--gray-400); margin-top: 1px; }
.backup-history-stats { display: flex; gap: 6px; flex-shrink: 0; }
.backup-history-empty {
  padding: 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--gray-400); font-size: 13px;
}

.bk-stat-badge {
  font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 99px;
}
.bk-blue { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.bk-latest-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 99px; background: #dcfce7; color: #15803d;
  border: 1px solid #86efac; flex-shrink: 0;
}

/* Footer */
.backup-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-top: 1px solid var(--gray-200);
  background: var(--gray-50); flex-shrink: 0; gap: 10px;
}

@media (max-width: 560px) {
  .backup-info-bar { grid-template-columns: 1fr 1fr; }
  .backup-preview-grid { grid-template-columns: 1fr 1fr; }
}