/* ================================================================
   assets/css/style.css — Design System (Light default, Dark option)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- LIGHT THEME (padrão) ---- */
:root {
  --bg-base:        #f0f4f8;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f8fafc;
  --bg-sidebar:     #1e293b;
  --border:         #e2e8f0;
  --border-light:   #cbd5e1;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;

  --accent:         #2563eb;
  --accent-hover:   #1d4ed8;
  --accent-glow:    rgba(37,99,235,0.10);

  --green:          #059669;
  --green-bg:       rgba(5,150,105,0.08);
  --green-glow:     rgba(5,150,105,0.15);
  --red:            #dc2626;
  --red-bg:         rgba(220,38,38,0.08);
  --gold:           #d97706;
  --gold-bg:        rgba(217,119,6,0.08);
  --purple:         #7c3aed;
  --blue:           #2563eb;

  --sidebar-w:      240px;
  --header-h:       64px;
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;

  --shadow-card:    0 1px 8px rgba(0,0,0,0.08), 0 0 0 1px var(--border);
  --shadow-glow:    0 0 20px rgba(37,99,235,0.06);
  --transition:     all 0.2s ease;
}

/* ---- DARK THEME ---- */
[data-theme="dark"] {
  --bg-base:        #0a0e1a;
  --bg-surface:     #111827;
  --bg-card:        #1a2236;
  --bg-card-hover:  #1f2a42;
  --bg-sidebar:     #0d1526;
  --border:         #1e2d45;
  --border-light:   #253652;

  --text-primary:   #e8eef8;
  --text-secondary: #7b93b8;
  --text-muted:     #4a6080;

  --accent:         #3b82f6;
  --accent-hover:   #2563eb;
  --accent-glow:    rgba(59,130,246,0.15);

  --green:          #10b981;
  --green-bg:       rgba(16,185,129,0.10);
  --red:            #ef4444;
  --red-bg:         rgba(239,68,68,0.10);
  --gold:           #f59e0b;
  --gold-bg:        rgba(245,158,11,0.10);
  --purple:         #8b5cf6;

  --shadow-card:    0 4px 24px rgba(0,0,0,0.4);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:14px;scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg-base);color:var(--text-primary);min-height:100vh;display:flex;transition:background .3s,color .3s;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-hover);}

/* ================================================================ SIDEBAR */
.sidebar{width:var(--sidebar-w);min-height:100vh;background:var(--bg-sidebar);border-right:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .3s;}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,0.07);}
.sidebar-logo svg{color:#3b82f6;flex-shrink:0;}
.logo-text{font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.3px;}
.logo-sub{font-size:.71rem;color:rgba(255,255,255,.4);font-weight:400;}
.sidebar-user{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;gap:10px;}
.user-avatar{width:36px;height:36px;background:linear-gradient(135deg,#3b82f6,#7c3aed);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;flex-shrink:0;}
.user-info .user-name{font-size:.82rem;font-weight:600;color:#fff;}
.user-info .user-role{font-size:.68rem;color:#fbbf24;text-transform:uppercase;letter-spacing:.5px;background:rgba(255,193,7,.15);border-radius:20px;padding:2px 9px;display:inline-block;margin-top:3px;font-weight:600;border:1px solid rgba(251,191,36,.25);}
.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto; -ms-overflow-style: none; scrollbar-width: none;}
.sidebar-nav::-webkit-scrollbar { display: none; }
.nav-section-label{font-size:.65rem;font-weight:700;color:#60a5fa;text-transform:uppercase;letter-spacing:1px;padding:14px 20px 6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;color:rgba(255,255,255,.55);font-size:.85rem;font-weight:500;transition:all 0.3s ease;cursor:pointer;border-left:3px solid transparent;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;border-left-color:var(--accent);transform:translateX(4px);}
.nav-item.active{background:rgba(59,130,246,.15);color:#3b82f6;border-left-color:#3b82f6;}
.nav-item svg{width:18px;height:18px;flex-shrink:0;transition:transform 0.3s ease;}
.nav-item:hover svg{transform:scale(1.15); color:var(--accent);}
.nav-item-row{display:flex;align-items:stretch;}
.nav-item-row .nav-item{flex:1;}
.nav-sub-action{display:flex;align-items:center;justify-content:center;padding:0 13px;color:rgba(255,255,255,.25);border-left:1px solid rgba(255,255,255,.06);transition:var(--transition);flex-shrink:0;cursor:pointer;}
.nav-sub-action:hover{color:#3b82f6;background:rgba(59,130,246,.08);}
.nav-sub-action.active{color:#3b82f6;background:rgba(59,130,246,.1);}
.nav-sub-action svg{width:14px;height:14px;}
.sidebar-footer{padding:14px 16px;border-top:1px solid rgba(255,255,255,.07);}
.sidebar-footer a{display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.4);padding:8px 4px;border-radius:var(--radius-sm);transition:var(--transition);}
.sidebar-footer a:hover{color:#ef4444;}

/* ================================================================ MAIN */
.main-wrapper{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;overflow-x:auto;min-width:0;}
.topbar{height:var(--header-h);background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50;gap:16px;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.topbar-left{display:flex;align-items:center;gap:14px;}
.page-title{font-size:1.1rem;font-weight:700;}
.page-subtitle{font-size:.78rem;color:var(--text-muted);}
.topbar-right{display:flex;align-items:center;gap:12px;}
.topbar-center{display:flex;align-items:center;justify-content:center;flex:1;}
.topbar-tab-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;font-size:0.8rem;font-weight:600;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:var(--transition);white-space:nowrap;}
.topbar-tab-btn:hover{background:var(--bg-card-hover);border-color:var(--border-light);color:var(--text-primary);}
.topbar-tab-btn.active{background:var(--accent);border-color:var(--accent);color:#ffffff;}
.topbar-tab-btn.active svg{color:#ffffff;}
.market-badge{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:.78rem;font-weight:600;font-family:'JetBrains Mono',monospace;border:1px solid var(--border);}
.market-badge.aberto{background:var(--green-bg);border-color:var(--green);color:var(--green);}
.market-badge.fechado{background:var(--red-bg);border-color:var(--red);color:var(--red);}
.market-badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.btn-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:var(--transition);}
.btn-icon:hover{background:var(--bg-card-hover);color:var(--text-primary);}
.content{flex:1;padding:24px 28px;min-width:0;}

/* ── Theme toggle button ── */
.theme-toggle{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border);cursor:pointer;font-size:1.1rem;transition:var(--transition);}
.theme-toggle:hover{background:var(--bg-card-hover);}

/* ================================================================ CARDS */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-card);transition:var(--transition);}
.card:hover{border-color:var(--border-light);}
/* Card com filtros SmartSelect precisa permitir overflow dos dropdowns */
.card-filters, #filtros-proventos, #filtros-negociacoes { overflow:visible !important; }
#filtros-proventos > div, #filtros-negociacoes > div { overflow:visible !important; }
#filtros-proventos .form-group, #filtros-negociacoes .form-group { overflow:visible; position:relative; }
.card-title{font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.card-value{font-size:1.6rem;font-weight:700;color:var(--text-primary);font-family:'JetBrains Mono',monospace;line-height:1;margin-bottom:6px;}
.card-value.sm{font-size:1.2rem;}
.card-change{font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:4px;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:24px;}

/* ================================================================ GRID */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-1-2{display:grid;grid-template-columns:1fr 2fr;gap:20px;}

/* ================================================================ TABLES
   Premium design — alinha com o padrão de referência financeiro          */

/* Container */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  /* scrollbar discreta */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.table-wrap::-webkit-scrollbar { height: 5px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Tabela base */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── CABEÇALHO ── */
thead th {
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: .70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  user-select: none;
  /* sutil separador vertical entre colunas */
}
thead th + th {
  border-left: 1px solid var(--border);
}
thead th.sortable { cursor: pointer; }
thead th.sortable:hover {
  color: var(--accent);
  background: var(--accent-glow);
}
thead th.sort-asc::after  { content: ' ▲'; font-size: .55rem; color: var(--accent); vertical-align: middle; }
thead th.sort-desc::after { content: ' ▼'; font-size: .55rem; color: var(--accent); vertical-align: middle; }

/* ── LINHAS DO CORPO ── */
tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .12s ease;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--accent-glow); }

/* ── CÉLULAS ── */
tbody td {
  padding: 9px 14px;
  color: var(--text-primary);
  white-space: nowrap;
  vertical-align: middle;
}
tbody td + td {
  border-left: 1px solid var(--border);
}

/* ── TIPOS ESPECIAIS ── */
td.mono, th.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: .80rem;
}
/* Ticker / ativo */
td.ticker {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .3px;
}
/* Valores numéricos alinhados à direita */
td.num, th.num {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: .81rem;
  color: var(--accent);
}
/* Coluna de ano/label principal (bold, cor primária) */
td.tbl-year {
  font-weight: 700;
  color: var(--text-primary);
  font-size: .83rem;
}
/* Linha de total/resumo */
tbody tr.tbl-total {
  background: var(--accent-glow) !important;
  font-weight: 700;
  border-top: 2px solid var(--accent);
}
tbody tr.tbl-total td {
  color: var(--text-primary);
  font-weight: 700;
}
/* Valor zerado / sem dados */
td.tbl-dimmed {
  color: var(--text-muted) !important;
  font-weight: 400;
}
/* Alinhamento à direita em header */
th.num { text-align: right; }
/* Coluna de média / destaque suave */
td.tbl-avg {
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── CORES DE RESULTADO ── */
.positivo { color: var(--green) !important; }
.negativo { color: var(--red)   !important; }
.neutro   { color: var(--text-muted) !important; }
.bg-positivo { background: var(--green-bg) !important; }
.bg-negativo { background: var(--red-bg)   !important; }

/* ── SCORE BAR ── */
.score-bar-wrap { display: flex; align-items: center; gap: 8px; }
.score-bar      { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 3px; transition: width .6s ease; }
.score-bar-fill.alto   { background: var(--green); }
.score-bar-fill.medio  { background: var(--gold); }
.score-bar-fill.baixo  { background: var(--red); }
.score-val { font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 600; min-width: 38px; text-align: right; }

/* ================================================================ BADGES */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.badge-compra  {background:var(--green-bg);color:var(--green);border:1px solid var(--green);}
.badge-observar{background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold);}
.badge-evitar  {background:var(--red-bg);color:var(--red);border:1px solid var(--red);}
.badge-ig      {background:rgba(37,99,235,.1);color:var(--accent);border:1px solid var(--accent);}
.badge-iv      {background:rgba(124,58,237,.1);color:var(--purple);border:1px solid var(--purple);}
.badge-ev      {background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold);}
.badge-fii     {background:var(--green-bg);color:var(--green);border:1px solid var(--green);}
.badge-success {background:var(--green-bg);color:var(--green);border:1px solid var(--green);}
.badge-warning {background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold);}
.badge-danger  {background:var(--red-bg);color:var(--red);border:1px solid var(--red);}

/* ================================================================ SCORE BAR */
.score-bar-wrap{display:flex;align-items:center;gap:8px;}
.score-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.score-bar-fill{height:100%;border-radius:3px;transition:width .6s ease;}
.score-bar-fill.alto{background:var(--green);}
.score-bar-fill.medio{background:var(--gold);}
.score-bar-fill.baixo{background:var(--red);}
.score-val{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:600;min-width:38px;text-align:right;}

/* ================================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);font-size:.84rem;font-weight:600;cursor:pointer;border:none;transition:var(--transition);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-hover);}
.btn-outline{background:transparent;border:1px solid var(--border-light);color:var(--text-secondary);}
.btn-outline:hover{background:var(--bg-card-hover);color:var(--text-primary);}
.btn-danger{background:var(--red-bg);border:1px solid var(--red);color:var(--red);}
.btn-danger:hover{background:var(--red);color:#fff;}
.btn-sm{padding:5px 12px;font-size:.78rem;}

/* ================================================================ FORMS */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px;}
.form-control{width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);padding:9px 12px;font-size:.84rem;font-family:'Inter',sans-serif;transition:var(--transition);outline:none;}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.form-control::placeholder{color:var(--text-muted);}
select.form-control{cursor:pointer;}

/* ================================================================ MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);width:100%;max-width:520px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.25);transform:translateY(20px);transition:transform .25s;max-height:90vh;display:flex;flex-direction:column;}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-body{overflow-y:auto;padding-right:4px;}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.modal-title{font-size:1rem;font-weight:700;}
.modal-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.3rem;line-height:1;transition:var(--transition);}
.modal-close:hover{color:var(--red);}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border);}

/* Modal Progress Bar Standard */
.modal-progress {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 40px 32px;
}
.modal-progress-glow {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.modal-progress-content {
    position: relative;
    z-index: 1;
}
.modal-progress-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-glow);
    border: 2px solid rgba(37,99,235,0.2);
    margin-bottom: 24px;
    box-shadow: 0 0 24px var(--accent-glow);
    animation: pulseGlow 2s infinite ease-in-out;
}
.modal-progress-spinner svg {
    width: 36px;
    height: 36px;
    stroke: var(--accent);
    stroke-width: 2.5;
    animation: spin 1.2s linear infinite;
}
.modal-progress-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.modal-progress-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.modal-progress-bar-container {
    width: 100%;
    height: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.modal-progress-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--purple) 100%);
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px var(--accent-glow);
}
.modal-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.modal-progress-message {
    text-align: left;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80%;
}
.modal-progress-percent {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}


/* ================================================================ ALERTS */
.alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:.84rem;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.alert-danger {background:var(--red-bg);border:1px solid var(--red);color:var(--red);}
.alert-success{background:var(--green-bg);border:1px solid var(--green);color:var(--green);}
.alert-warn   {background:var(--gold-bg);border:1px solid var(--gold);color:var(--gold);}
.alert-info   {background:var(--accent-glow);border:1px solid var(--accent);color:var(--accent);}

/* ================================================================ 52W BAR */
.range-52w{display:flex;align-items:center;gap:6px;}
.range-bar{flex:1;height:4px;background:var(--border);border-radius:2px;position:relative;}
.range-bar-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:2px;}
.range-tick{position:absolute;top:-3px;width:2px;height:10px;background:var(--text-primary);border-radius:1px;transform:translateX(-50%);}
.range-label{font-size:.7rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace;}

/* ================================================================ CHART */
.chart-wrap{position:relative;width:100%;height:260px;}

/* ================================================================ TABS */
.tabs{display:flex;gap:4px;margin-bottom:0 !important;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn{padding:10px 20px;border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;font-size:.85rem;font-weight:600;color:var(--text-secondary);background:var(--bg-surface);cursor:pointer;transition:var(--transition);margin-bottom:-1px;white-space:nowrap;position:relative;z-index:1;}
.tab-btn:hover{color:var(--text-primary);background:var(--bg-card-hover);}
.tab-btn.active{color:#ffffff;background:var(--accent);border-bottom:2px solid var(--accent);z-index:2;}
.tab-content{display:none;}
.tab-content.active{display:block;}
.tab-content.active > .card:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}

/* ================================================================ SUB TABS */
.sub-tabs-container {
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-top-right-radius: 12px;
}
.sub-tabs{display:flex;gap:4px;margin-bottom:0 !important;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;padding:16px 16px 0 16px;background:var(--bg-card);border-left:1px solid var(--border);border-right:1px solid var(--border);}
.sub-tabs::-webkit-scrollbar{display:none;}
.sub-tab-btn{padding:8px 16px;border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;font-size:.80rem;font-weight:600;color:var(--text-secondary);background:var(--bg-surface);cursor:pointer;transition:var(--transition);margin-bottom:-1px;white-space:nowrap;position:relative;z-index:1;}
.sub-tab-btn:hover{color:var(--text-primary);background:var(--bg-card-hover);}
.sub-tab-btn.active{color:#ffffff;background:var(--accent);border-bottom:2px solid var(--accent);z-index:2;}
.sub-tab-content{display:none;background:var(--bg-card);border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0 0 12px 12px;padding:16px;margin-bottom:24px;}
.sub-tab-content.active{display:block;}
.sub-tab-content.active > .card:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
    margin-bottom: 0;
}

/* ================================================================ FILTER BAR */
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;}
.filter-bar .form-control{flex:1;min-width:180px;max-width:300px;}
.filter-bar select{flex:0 0 auto;width:auto;}

/* ================================================================ LOADING */
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ================================================================ SCROLLBAR */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg-base);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--border-light);}

/* ================================================================ TOOLTIPS */
[data-tooltip]{position:relative;cursor:help;}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg-card);color:var(--text-primary);padding:5px 10px;border-radius:var(--radius-sm);font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;z-index:999;border:1px solid var(--border);box-shadow:var(--shadow-card);}
[data-tooltip]:hover::after{opacity:1;}

/* Tooltip info — renderizado via JS floating (ver carteira.php) */
[data-tooltip-info]{ cursor:help; }

/* ================================================================ LOGIN */
.login-page{min-height:100vh;background:var(--bg-base);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.login-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(37,99,235,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(124,58,237,.06) 0%,transparent 60%);}
.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:44px 40px;width:100%;max-width:420px;position:relative;z-index:1;box-shadow:0 8px 40px rgba(0,0,0,.12);}
.login-logo{text-align:center;margin-bottom:32px;}
.login-logo .icon{width:60px;height:60px;background:linear-gradient(135deg,var(--accent),var(--purple));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.8rem;box-shadow:0 8px 24px rgba(37,99,235,.25);}
.login-logo h1{font-size:1.5rem;font-weight:800;color:var(--text-primary);}
.login-logo p{font-size:.84rem;color:var(--text-muted);margin-top:4px;}

/* ================================================================ RF TIPO HEADER */
.rf-tipo-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--bg-surface);cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s;}
.rf-tipo-header:hover{background:var(--bg-card-hover);}

/* ================================================================ IMPORT B3 */
.upload-zone{border:2px dashed var(--border-light);border-radius:var(--radius-md);padding:32px 20px;text-align:center;cursor:pointer;transition:var(--transition);background:var(--bg-surface);color:var(--text-muted);font-size:.86rem;}
.upload-zone:hover{border-color:var(--accent);color:var(--text-primary);background:var(--accent-glow);}
.upload-zone.has-file{border-color:var(--green);background:var(--green-bg);}
.radio-card{flex:1;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);background:var(--bg-surface);user-select:none;}
.radio-card:hover{border-color:var(--border-light);background:var(--bg-card-hover);}
.radio-card.selected{border-color:var(--accent);background:var(--accent-glow);}
.radio-card-icon{font-size:1.4rem;flex-shrink:0;}

/* ================================================================ SMART SELECT
   Dropdown pesquisável com multi-seleção — padrão global para
   todos os campos de Ticker, Ano, Mês e Tipo de Evento           */

.ss-wrap {
  position: relative;
  outline: none;
}

/* Botão disparador */
.ss-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .83rem;
  color: var(--text-secondary);
  transition: border-color .15s, box-shadow .15s, color .15s;
  white-space: nowrap;
  min-width: 120px;
}
.ss-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.ss-btn.ss-btn-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  color: var(--text-primary);
}
.ss-icon-search { font-size: .8rem; flex-shrink: 0; opacity: .6; }
.ss-lbl { flex: 1; font-weight: 500; }
.ss-cnt {
  background: var(--accent);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.6;
  min-width: 18px;
  text-align: center;
}
.ss-arrow {
  font-size: .6rem;
  color: var(--text-muted);
  transition: transform .2s;
}

/* Animação Home Broker (Live Update) */
@keyframes pricePulse {
  0% { background-color: transparent; }
  30% { background-color: rgba(16, 185, 129, 0.2); }
  100% { background-color: transparent; }
}
.price-update-glow {
  animation: pricePulse 1.5s ease-out;
}
.ss-btn-open .ss-arrow { transform: rotate(180deg); }

/* Painel dropdown */
.ss-panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 220px;
  width: max-content;
  max-width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  z-index: 9999;
  overflow: visible;
  animation: ssSlideIn .12s ease;
}
@keyframes ssSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Campo de busca dentro do painel */
.ss-search-row {
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.ss-search {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 6px 10px 6px 28px;
  font-size: .82rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
}
.ss-search:focus { border-color: var(--accent); }

/* Lista de opções */
.ss-list {
  max-height: 210px;
  overflow-y: auto;
  padding: 4px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Item */
.ss-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .82rem;
  color: var(--text-secondary);
  transition: background .1s, color .1s;
  user-select: none;
}
.ss-item:hover {
  background: var(--accent-glow);
  color: var(--text-primary);
}
.ss-item-all { font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border); margin-bottom: 2px; }

/* Checkmark — borda sempre visível, preenche quando selecionado */
.ss-checkmark {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-light);
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 900;
  color: transparent;
  background: transparent;
  transition: border-color .12s, background .12s, color .12s;
}
.ss-checkmark::after { content: '✓'; }
.ss-checkmark.ck-checked {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.ss-item:hover .ss-checkmark:not(.ck-checked) {
  border-color: var(--border-light);
  background: rgba(59,130,246,.1);
}

/* Item selecionado — fundo suave */
.ss-item-selected {
  background: rgba(16,185,129,.08) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .ss-item-selected {
  background: rgba(16,185,129,.12) !important;
}

.ss-item-lbl { flex: 1; }

/* Logo XS (dentro de dropdowns) */
.ticker-logo-xs {
  flex-shrink: 0;
}

/* ================================================================ TICKER LOGO
   Badge colorido com logo real ou iniciais como fallback           */

.ticker-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  vertical-align: middle;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ticker-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  border-color: var(--accent);
}

.ticker-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
  z-index: 2;
  background: white;
  transition: transform 0.25s ease;
}

.ticker-logo:hover img {
  transform: scale(1.08);
}

.logo-initials {
  position: relative;
  z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.8px;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Estilo específico para Investidor 10 (mais proeminente) */
.ticker-logo.i10-style {
  border-width: 1.5px;
}

[data-theme="dark"] .ticker-logo img {
  background: #fff; /* Mantém fundo branco para logos que dependem disso */
  filter: contrast(1.05);
}

/* Quando img não carrega: iniciais ficam visíveis */
.ticker-logo.logo-fallback img { display: none !important; }
.ticker-logo.logo-fallback .logo-initials { 
  z-index: 2;
  visibility: visible;
}

/* Se não houver fallback class, escondemos as iniciais se a imagem estiver lá */
.ticker-logo:not(.logo-fallback) .logo-initials {
  visibility: hidden;
}

/* Célula ticker com logo */
td.ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .3px;
}

/* ================================================================ SORT COLUMN HIGHLIGHT
   Coluna ordenada recebe fundo levemente destacado                 */

/* Header da coluna ativa */
thead th.sort-col-active {
  background: rgba(37, 99, 235, 0.07) !important;
  color: var(--accent) !important;
}
[data-theme="dark"] thead th.sort-col-active {
  background: rgba(59, 130, 246, 0.10) !important;
}

/* Células da coluna ativa */
tbody td.sort-col-active {
  background: rgba(37, 99, 235, 0.03);
}
[data-theme="dark"] tbody td.sort-col-active {
  background: rgba(59, 130, 246, 0.05);
}

/* Setas de sort no header */
thead th.sort-asc::after  { content: ' ▲'; font-size: .5rem; color: var(--accent); vertical-align: middle; }
thead th.sort-desc::after { content: ' ▼'; font-size: .5rem; color: var(--accent); vertical-align: middle; }

/* ================================================================ RESPONSIVE */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-wrapper{margin-left:0;}
  .grid-2,.grid-3,.grid-1-2{grid-template-columns:1fr;}
  #menuToggle{display:flex!important;}
}
@media(max-width:600px){
  .content{padding:16px;}
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .card-value{font-size:1.2rem;}
}


/* ================================================================ PRICE UPDATE ANIMATIONS
   Home Broker style — flash em todos os 5 campos RTD              */

/* ── Flash ALTA (verde) ── */
@keyframes rtdFlashUp {
    0%   { background-color: rgba(16, 185, 129, 0.35);
           box-shadow: inset 3px 0 0 #10b981;
           color: #10b981; }
    60%  { background-color: rgba(16, 185, 129, 0.12);
           box-shadow: inset 3px 0 0 rgba(16,185,129,.4); }
    100% { background-color: transparent;
           box-shadow: none; }
}

/* ── Flash BAIXA (vermelho) ── */
@keyframes rtdFlashDown {
    0%   { background-color: rgba(239, 68, 68, 0.35);
           box-shadow: inset 3px 0 0 #ef4444;
           color: #ef4444; }
    60%  { background-color: rgba(239, 68, 68, 0.12);
           box-shadow: inset 3px 0 0 rgba(239,68,68,.4); }
    100% { background-color: transparent;
           box-shadow: none; }
}

@keyframes rtdFlashNeutral {
    0%   { background-color: rgba(156, 163, 175, 0.35); /* gray-400 */
           box-shadow: inset 3px 0 0 #9ca3af;
           color: #9ca3af; }
    60%  { background-color: rgba(156, 163, 175, 0.12);
           box-shadow: inset 3px 0 0 rgba(156,163,175,.4); }
    100% { background-color: transparent;
           box-shadow: none; }
}

/* Classes aplicadas via JS */
.rtd-flash-up   { animation: rtdFlashUp   1.4s ease-out forwards; }
.rtd-flash-down { animation: rtdFlashDown 1.4s ease-out forwards; }
.rtd-flash-neutral { animation: rtdFlashNeutral 1.4s ease-out forwards; }

/* Compat: mantém as classes antigas usadas em outros lugares */
@keyframes flashGreen {
    0%   { background-color: rgba(16, 185, 129, 0.25); }
    100% { background-color: transparent; }
}
@keyframes flashRed {
    0%   { background-color: rgba(239, 68, 68, 0.25); }
    100% { background-color: transparent; }
}
.price-up   { animation: flashGreen 1.5s ease-out; }
.price-down { animation: flashRed   1.5s ease-out; }

/* Ensure cell has relative positioning for the background effect */
.preco-cell {
  position: relative;
  transition: color 0.3s ease;
}

/* ================================================================ PRIVACY MODE (ESCUDO)
   Hides sensitive values when active                              */
.privacy-active .mono, 
.privacy-active .card-value, 
.privacy-active .card-change,
.privacy-active .pl-cell,
.privacy-active .valor-cell,
.privacy-active .preco-cell,
.privacy-active .num,
.privacy-active .score-val {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  transition: filter 0.3s ease;
}

/* Bloco genérico para escudo (ex: gráficos) */
.privacy-active .privacy-blur {
  filter: blur(15px) !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: filter 0.4s ease;
}

.privacy-active .mono:hover, 
.privacy-active .card-value:hover {
  filter: blur(0);
}

.btn-shield {
  font-size: 1.1rem;
  transition: var(--transition);
}
.btn-shield.active {
  color: var(--accent);
  background: var(--accent-glow);
}

/* ================================================================ CARTEIRA ACCORDION
   Collapsible asset class sections — "Meus Ativos" hub             */

.asset-class-card { padding: 0 !important; overflow: hidden; }

.asset-class-header {
  user-select: none;
  transition: background .15s;
}
.asset-class-header:hover {
  background: var(--bg-card-hover);
}

.asset-class-body {
  transition: max-height .35s ease;
  overflow: hidden;
}

/* Tabela dentro do accordion */
.table-portfolio { width: 100%; border-collapse: collapse; font-size: .82rem; }
.table-portfolio thead th {
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 4px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table-portfolio thead th + th { border-left: 1px solid var(--border); }
.table-portfolio tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
.table-portfolio tbody tr:hover { background: var(--accent-glow); }
.table-portfolio tbody tr:last-child { border-bottom: none; }
.table-portfolio tbody td {
  padding: 4px 10px;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--text-primary);
}
.table-portfolio tbody td + td { border-left: 1px solid var(--border); }

/* Dropdown de opções por linha */
.dropdown-opcoes { position: relative; display: inline-block; }
.btn-opcoes {
  all: unset;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1.2rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  letter-spacing: 2px;
}
.btn-opcoes:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.dropdown-menu-opcoes {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  z-index: 500;
  padding: 6px 0;
}
.dropdown-menu-opcoes.show { display: block; }
.dropdown-menu-opcoes a {
  display: block;
  padding: 7px 14px;
  font-size: .82rem;
  color: var(--text-secondary);
  transition: background .12s;
  text-decoration: none;
}
.dropdown-menu-opcoes a:hover {
  background: var(--accent-glow);
  color: var(--text-primary);
}

/* Nota badge (circular) */
.nota-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

/* Variação badge inline (pill) */
.var-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: .76rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.var-badge.positivo { background: var(--green-bg); color: var(--green); }
.var-badge.negativo { background: var(--red-bg); color: var(--red); }
.var-badge.neutro { background: var(--bg-surface); color: var(--text-muted); }

/* Comprar tag */
.comprar-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 600;
}
.comprar-tag.sim { background: var(--green-bg); color: var(--green); }
.comprar-tag.nao { background: var(--red-bg); color: var(--red); }

/* Chevron collapse animation */
.collapse-chevron { flex-shrink: 0; }

/* ================================================================ PRICE RANGE CELLS
   Colunas de mín/máx do dia e 52 semanas na tabela de carteira     */

/* Mínima do dia — tom frio/baixo */
.preco-min-cell {
  color: var(--red) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .79rem;
  opacity: .85;
}

/* Máxima do dia — tom quente/alto */
.preco-max-cell {
  color: var(--green) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .79rem;
  opacity: .85;
}

/* Mínima 52 semanas — fundo muito suave vermelho */
.min52-cell {
  color: var(--red) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .79rem;
  background: rgba(239, 68, 68, 0.04);
}

/* Máxima 52 semanas — fundo muito suave verde */
.max52-cell {
  color: var(--green) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .79rem;
  background: rgba(16, 185, 129, 0.04);
}

/* Dash placeholder (—) em todas as range cells */
.preco-min-cell:empty::before,
.preco-max-cell:empty::before,
.min52-cell:empty::before,
.max52-cell:empty::before {
  content: '—';
  color: var(--text-muted);
  opacity: .5;
}

/* Quando ainda não há dados, cor neutra */
.preco-min-cell:not(:empty),
.preco-max-cell:not(:empty),
.min52-cell:not(:empty),
.max52-cell:not(:empty) {
  opacity: 1;
}

/* ================================================================ FLASH ENTRADA
   Animação suave quando campo sai de '—' para valor real pela 1ª vez */

@keyframes rtdFlashEntrada {
  0%   { background-color: rgba(59, 130, 246, 0.30); color: #3b82f6; transform: scale(1.02); }
  60%  { background-color: rgba(59, 130, 246, 0.10); transform: scale(1); }
  100% { background-color: transparent; color: inherit; }
}
.rtd-flash-entrada { animation: rtdFlashEntrada 0.8s ease-out forwards; }

/* ================================================================ PAINEL DE STATUS DO PROVEDOR
   Substitui o badge simples por um indicador rico estilo home broker */

/* Estrutura base */
.painel-provedor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid;
  transition: background .3s, border-color .3s, color .3s;
  user-select: none;
  white-space: nowrap;
  position: relative;
}

/* ── Estado: Carregando ── */
.painel-provedor--carregando {
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  color: var(--text-muted);
  border-color: color-mix(in srgb, var(--text-muted) 25%, transparent);
}

/* ── Estado: Ao Vivo (dados frescos) ── */
.painel-provedor--ao_vivo {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
}

/* ── Estado: Atrasado (dados com mais de 1min) ── */
.painel-provedor--atrasado {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
}

/* ── Estado: Desconectado (BTG offline / sem dados há muito tempo) ── */
.painel-provedor--desconectado {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
}

/* ── Estado: Erro de fetch ── */
.painel-provedor--erro {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
}

/* ── Dot pulsante de status ── */
.provedor-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Dot animado apenas quando ao_vivo */
.painel-provedor--ao_vivo .provedor-dot {
  animation: provedorPulse 1.6s ease-in-out infinite;
}

@keyframes provedorPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0 currentColor; }
  50%       { opacity: .7; transform: scale(1.15);  box-shadow: 0 0 0 4px transparent; }
}

/* ── Separador · ── */
.provedor-sep {
  opacity: .45;
  font-weight: 400;
  font-size: .85em;
}

/* ── Timer "atualizado há Xs" ── */
.provedor-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  opacity: .75;
  font-weight: 500;
}

/* ── Contagem de tickers (só BTG) ── */
.provedor-tickers {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
  font-weight: 700;
  margin-left: 3px;
  opacity: .9;
}

/* ── Painel de detalhe expansível ── */
.provedor-detalhe {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 999;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  padding: 12px 16px;
  min-width: 260px;
  flex-direction: column;
  gap: 8px;
  animation: ssSlideIn .12s ease;
  font-size: .76rem;
}
.provedor-detalhe-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--text-secondary);
}
.provedor-detalhe-row span { opacity: .75; }
.provedor-detalhe-row strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: .73rem;
  color: var(--text-primary);
  text-align: right;
}

/* ==========================================================================
   PAGINAÇÃO GLOBAL (DataTables e Bootstrap)
   ========================================================================== */

/* Container geral da paginação */
.dataTables_wrapper .dataTables_paginate,
.pagination {
    display: inline-flex !important;
    flex-wrap: nowrap;
    border-radius: 8px;
    border: 1px solid var(--border-light, #dee2e6);
    overflow: hidden; /* Arredonda os cantos dos itens filhos */
    background: var(--bg-card, #ffffff);
    margin: 0;
    padding: 0 !important;
    float: right; /* DataTables float right por padrão */
}

/* Remove a margem extra inserida pelo DataTables no span interno */
.dataTables_wrapper .dataTables_paginate span {
    display: flex;
}

/* Estilo base de cada botão / link */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination .page-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 16px !important;
    margin: 0 !important; /* Remove margem do DataTables */
    border: none !important; /* Remove bordas originais */
    border-right: 1px solid var(--border-light, #dee2e6) !important;
    background: transparent !important;
    color: var(--primary-color, #0d6efd) !important; /* Cor azul do texto */
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 0 !important; /* Borda é controlada pelo container */
    box-sizing: border-box;
}

/* O último item não deve ter borda direita para não duplicar com o container */
.dataTables_wrapper .dataTables_paginate .paginate_button:last-child,
.pagination .page-item:last-child .page-link {
    border-right: none !important;
}

/* Estado Ativo (Página atual) - Fundo escuro como na imagem */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pagination .page-item.active .page-link {
    background-color: #000000 !important; /* Fundo preto */
    color: #ffffff !important;
    border-color: #000000 !important;
    font-weight: 600;
}

/* Estado Hover - Pedido anterior: fundo preto e letras brancas */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
.pagination .page-link:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Estado Desabilitado */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.pagination .page-item.disabled .page-link {
    color: var(--text-muted, #6c757d) !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
}

/* Reset de margem de item do bootstrap */
.pagination .page-item {
    margin: 0;
}

/* Log Viewer System */
.log-viewer-container {
    background-color: #1e1e1e;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    height: 400px;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    color: #cccccc;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    border: 1px solid #333;
}

.log-line {
    margin: 0;
    padding: 2px 0;
    line-height: 1.4;
    word-break: break-all;
}

.log-error {
    color: #ff5555;
    font-weight: bold;
    background-color: rgba(255, 0, 0, 0.1);
}

.log-warning {
    color: #ffb86c;
}

.log-info {
    color: #8be9fd;
}

.log-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.log-viewer-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Fix do icone de ordenação sumindo e background do thead */
table.dataTable thead .sorting:hover::before,
table.dataTable thead .sorting:hover::after,
table.dataTable thead .sorting_asc:hover::before,
table.dataTable thead .sorting_asc:hover::after,
table.dataTable thead .sorting_desc:hover::before,
table.dataTable thead .sorting_desc:hover::after {
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important; /* Força o ícone a ficar branco */
}

/* ================================================================ TOAST NOTIFICATIONS */
#ci-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.ci-toast {
    min-width: 300px;
    max-width: 400px;
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border-left: 4px solid var(--accent);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    pointer-events: all;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.ci-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.ci-toast-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ci-toast-content {
    flex-grow: 1;
}

.ci-toast-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.ci-toast-message {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.ci-toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    padding: 0;
}

.ci-toast-close:hover {
    color: var(--red);
}

/* Toast Variants */
.ci-toast.success { border-left-color: var(--green); }
.ci-toast.success .ci-toast-icon { color: var(--green); }

.ci-toast.error { border-left-color: var(--red); }
.ci-toast.error .ci-toast-icon { color: var(--red); }

.ci-toast.warning { border-left-color: var(--gold); }
.ci-toast.warning .ci-toast-icon { color: var(--gold); }

.ci-toast.info { border-left-color: var(--blue); }
.ci-toast.info .ci-toast-icon { color: var(--blue); }

/* ================================================================
   Custom Scrollbar
   ================================================================ */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 8px;
  border: 3px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}