/* /proventos/assets/css/base.css */

/* =========================
   TOKENS
========================= */
:root{
  --color-primary:#1E88E5;
  --color-secondary:#455A64;
  --color-bg:#F7F9FC;
  --color-text:#263238;
  --color-accent:#FFB300;

  --color-success:#2e7d32;
  --color-danger:#c62828;
  --color-info:#1565c0;

  --radius:8px;
  --shadow: 0 6px 18px rgba(0,0,0,0.10);
  --border:#cfd8dc;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
}

/* =========================
   BASE
========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
  background:var(--color-bg);
  color:var(--color-text);
}

a{color:inherit}
.muted{color:#6b7785}
.hidden{display:none!important}

.container{
  max-width:1280px;
  margin:0 auto;
  padding:var(--space-5);
}

/* =========================
   CARD
========================= */
.card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid #e7edf3;
}
.card__header{
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid #e7edf3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.card__body{padding:var(--space-5)}

/* =========================
   TÍTULOS (Proventos +100%)
========================= */
.proventos-page h1,
.proventos-page h2{
  font-size:2em;
  font-weight:800;
  margin:0;
}

/* =========================
   BOTÕES
========================= */
.btn{
  appearance:none;
  border:1px solid transparent;
  border-radius:10px;
  padding:8px 12px;
  font-size:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height:1;
  user-select:none;
}
.btn--primary{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
}
.btn--secondary{
  background:#eef3f7;
  border-color:#d9e3ea;
  color:#23313a;
}
.btn:focus-visible{
  outline: 3px solid rgba(30,136,229,0.35);
  outline-offset:2px;
}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* =========================
   FORM
========================= */
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field label{font-size:13px;color:#52616b}
.form-field input,
.form-field select{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #d3dde6;
  background:#fff;
  font-size:14px;
}

/* =========================
   TABELA PROVENTOS – layout “saudável”
========================= */

/* =====================================================
   PROVENTOS – TABELA SEM SCROLL INTERNO
===================================================== */

.tabela-proventos-wrap{
  overflow: visible;
  max-height: none;
}


/* tabela */
#tabela-proventos{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border); /* borda externa */
  background:#fff;
}

/* bordas internas (tudo) */
#tabela-proventos th,
#tabela-proventos td{
  border:1px solid var(--border);
  padding:6px 8px;          /* compacto */
  white-space:nowrap;
  vertical-align:middle;
}

/* cabeçalho */
#tabela-proventos thead th{
  background:#f1f5f9;
  font-weight:800;
  font-size:.95em;
  letter-spacing:.02em;
  position:sticky;
  top:0;
  z-index:3;
}

/* links de ordenação */
#tabela-proventos thead th a{
  text-decoration:none;
}
#tabela-proventos thead th a:hover{
  text-decoration:underline;
}

/* dados */
#tabela-proventos tbody td{
  font-size:1.28em;   
  line-height:1.2;
}

/* zebra */
#tabela-proventos tbody tr:nth-child(even) td{
  background:#fbfdff;
}

/* hover: +20% (sem “quebrar” tanto) */
#tabela-proventos tbody tr{
  transition:transform 140ms ease, background-color 140ms ease;
  transform-origin:left center;
}

#tabela-proventos tbody tr:hover{
  transform:scale(1.0);
  position:relative;
  z-index:5;
  cursor:pointer;
}

#tabela-proventos tbody tr:hover td{
  background: rgba(30,136,229,0.08);
}

/* alinhamentos */
.col-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.col-center{text-align:center}

/* garante especificamente: Rendimento(2), Preço(3), Amortização(5) à direita */
#tabela-proventos td:nth-child(2),
#tabela-proventos td:nth-child(3),
#tabela-proventos td:nth-child(5){
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* =========================
   P/VP badge
========================= */
.pvp{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:.9em;
}
.pvp--discount{background:rgba(46,125,50,0.15);color:var(--color-success)}
.pvp--premium{background:rgba(198,40,40,0.15);color:var(--color-danger)}
.pvp--neutral{background:rgba(21,101,192,0.10);color:var(--color-info)}

/* =========================
   Variação (cores)
========================= */
.var-badge{font-weight:900}
.var--pos{color:var(--color-success)}
.var--neg{color:var(--color-danger)}
.var--zero{color:var(--color-info)}

/* =========================
   MODAL
========================= */
.modal[hidden]{display:none!important}
.modal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.modal__panel{
  position:relative;
  width:min(900px,92vw);
  max-height:85vh;
  overflow:auto;
  margin:6vh auto 0;
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  border:1px solid #e7edf3;
}
.modal__header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid #eef2f6;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.modal__title{
  margin:0;
  font-weight:900;
  font-size:18px;
}
.modal__body{padding:16px}

#tabela-proventos{
  width:100%;
  table-layout:auto;
}

/* =====================================================
   ALTAS & BAIXAS – VISUAL IGUAL PROVENTOS (classe)
===================================================== */

.tabela-altas-baixas{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  background:#fff;
}

/* bordas internas */
.tabela-altas-baixas th,
.tabela-altas-baixas td{
  border:1px solid var(--border);
  padding:6px 8px;
  white-space:nowrap;
  vertical-align:middle;
}

/* cabeçalho */
.tabela-altas-baixas thead th{
  background:#f1f5f9;
  font-weight:800;
  font-size:.95em;
  letter-spacing:.02em;
  text-align:center;
}

/* zebra */
.tabela-altas-baixas tbody tr:nth-child(even) td{
  background:#fbfdff;
}

/* hover */
.tabela-altas-baixas tbody tr:hover td{
  background:rgba(30,136,229,0.08);
}

/* compatibilidade com suas classes atuais */
.tabela-altas-baixas .col-right{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.tabela-altas-baixas .col-center{
  text-align:center;
}
.tabela-altas-baixas .col-ticker{
  text-align:center;
  font-weight:800;
}

/* variação colorida */
.tabela-altas-baixas .var-badge{ font-weight:900; }
.tabela-altas-baixas .var--pos{ color:var(--color-success); }
.tabela-altas-baixas .var--neg{ color:var(--color-danger); }
.tabela-altas-baixas .var--zero{ color:var(--color-info); }

.tabela-altas-baixas .col-volfin{
  min-width: 120px;
}
.legend {
  margin-top: 10px;
  font-size: 13px;
  color: #6b7785;
}