/* =====================================================================
   Plataforma Cara-roxa — estilo próprio
   Cores tiradas do papagaio e do mangue; uma família tipográfica.
   ===================================================================== */
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url("fontes/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 500; font-display: swap; src: url("fontes/public-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-display: swap; src: url("fontes/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-display: swap; src: url("fontes/public-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --mangue: #17352B;      /* cabeçalho */
  --plumagem: #3F7D3A;    /* verde do corpo */
  --testa: #B8322B;       /* vermelho da testa */
  --face: #54479A;        /* roxo-azulado da face */
  --papel: #F5F6F3;
  --tinta: #1C2420;
  --tinta-2: #5A6660;
  --linha: #DCE1DA;
  --raio: 6px;
}

html, body { background: var(--papel); }
body { font-family: "Public Sans", system-ui, sans-serif; color: var(--tinta); font-size: 14.5px;
       font-feature-settings: "tnum" 1, "lnum" 1; -webkit-font-smoothing: antialiased; }
.container-fluid { padding-left: 0; padding-right: 0; }

/* ---- Cabeçalho ------------------------------------------------------- */
.navbar { background: var(--mangue) !important; margin: 0; padding-top: 0; padding-bottom: 0;
          border-bottom: 3px solid var(--plumagem); min-height: 52px; }
.navbar-brand { font-weight: 600; font-size: 1.02rem; letter-spacing: 0; padding: 0; margin-right: 1.75rem; }
.marca { display: flex; align-items: center; gap: .6rem; }
.marca-selo { width: 22px; height: 22px; border-radius: 50%; flex: none;
              background: conic-gradient(var(--testa) 0 25%, var(--face) 25% 50%, var(--plumagem) 50% 100%);
              box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.marca small { font-weight: 400; color: rgba(255,255,255,.62); font-size: .86rem; }
.navbar .nav-link { color: rgba(255,255,255,.78) !important; font-weight: 500; padding: .95rem .8rem !important;
                    border-bottom: 3px solid transparent; margin-bottom: -3px; }
.navbar .nav-link:hover { color: #fff !important; }
.navbar .nav-link.active, .navbar .show > .nav-link { color: #fff !important; border-bottom-color: #fff; }
.navbar .nav-link .fa, .navbar .nav-link svg { opacity: .75; margin-right: .2rem; }
.dropdown-menu { border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 6px 18px rgba(23,53,43,.12); padding: .3rem 0; font-size: .92rem; }
.dropdown-item { padding: .38rem 1rem; }
.dropdown-item.active, .dropdown-item:active { background: var(--plumagem); }

/* ---- Barra lateral --------------------------------------------------- */
.bslib-sidebar-layout { border: 0 !important; --_sidebar-bg: #EEF0EB; }
.bslib-sidebar-layout > .sidebar { background: #EEF0EB; border-right: 1px solid var(--linha) !important; }
.bslib-sidebar-layout > .sidebar > .sidebar-content { padding: 1.1rem 1rem; gap: .2rem; }
.sidebar-title { font-size: .95rem !important; font-weight: 600; color: var(--tinta-2); margin-bottom: .4rem; }
.sidebar .form-group { margin-bottom: .85rem; }
.sidebar .control-label { font-size: .84rem; font-weight: 600; color: var(--tinta-2); margin-bottom: .25rem; }
.sidebar .radio { margin: 0; } .sidebar .radio label { font-size: .9rem; }
.sidebar hr { margin: .6rem 0; border-color: var(--linha); opacity: 1; }
.estado-banco { font-size: .78rem; color: var(--tinta-2); line-height: 1.45; }
.bslib-sidebar-layout > .main { padding: 1rem 1.25rem 1.5rem; }

/* ---- Cartões --------------------------------------------------------- */
.card { border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: none; margin-bottom: 1rem; background: #fff; }
.card-header { background: #fff; border-bottom: 1px solid var(--linha); font-weight: 600; font-size: .93rem;
               padding: .6rem .9rem; color: var(--tinta); }
.card-body { padding: .75rem .9rem; }
.bslib-grid { gap: 1rem; margin-bottom: 0; }
.bslib-grid > .card { margin-bottom: 0; }
.bslib-grid + .card, .card + .bslib-grid, .bslib-grid + .bslib-grid, .faixa + .bslib-grid { margin-top: 1rem; }
.html-fill-container > .html-fill-item { min-height: 0; }
.card .text-muted, .nota { color: var(--tinta-2) !important; font-size: .8rem; line-height: 1.4; }

/* ---- Faixa de indicadores (o destaque da página) --------------------- */
.faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); background: #fff;
         border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 1rem; overflow: hidden; }
.indicador { padding: .85rem 1.1rem .9rem; border-left: 1px solid var(--linha); position: relative; }
.indicador:first-child { border-left: 0; }
.indicador::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--cor, var(--plumagem)); }
.indicador .rotulo { font-size: .82rem; font-weight: 600; color: var(--tinta-2); }
.indicador .valor { font-size: 2.05rem; font-weight: 700; line-height: 1.1; margin: .15rem 0 .2rem; letter-spacing: -.01em; color: var(--tinta); }
.indicador .detalhe { font-size: .8rem; color: var(--tinta-2); line-height: 1.35; }
.indicador .variacao { font-weight: 600; }
.indicador .variacao.cai { color: var(--testa); } .indicador .variacao.sobe { color: var(--plumagem); }

/* ---- Tabelas --------------------------------------------------------- */
table.dataTable { font-size: .86rem; border-collapse: collapse !important; }
table.dataTable thead th { font-weight: 600; color: var(--tinta-2); border-bottom: 1px solid #BFC7BE !important; padding: .45rem .6rem !important; }
table.dataTable tbody td { padding: .38rem .6rem !important; border-top: 1px solid #EEF0EB; }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background: #FAFBF9; }
table.dataTable.hover tbody tr:hover { background: #EEF3EC !important; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: .8rem; padding-top: .5rem !important; }
.dataTables_wrapper .dataTables_filter input { border: 1px solid var(--linha); border-radius: 4px; padding: .15rem .4rem; }
.dataTables_scrollBody { border-bottom: 0 !important; }

/* ---- Alertas, botões, formulários ------------------------------------ */
.alert { border-radius: var(--raio); border: 0; border-left: 3px solid; padding: .55rem .8rem; font-size: .88rem; }
.alert-warning { background: #FBF4E4; border-color: #C9962E; color: #5C4513; }
.alert-info { background: #EEF1F8; border-color: var(--face); color: #2E2A55; }
.alert-danger { background: #FBECEA; border-color: var(--testa); color: #6B1C17; }
.alert-success { background: #EDF4EC; border-color: var(--plumagem); color: #1F3D1C; }
.alert-secondary { background: #F0F1EE; border-color: #9AA39D; color: var(--tinta); }
.btn { border-radius: 4px; font-weight: 500; }
.btn-primary, .btn-success { background: var(--plumagem); border-color: var(--plumagem); }
.btn-primary:hover, .btn-success:hover { background: #33692F; border-color: #33692F; }
.btn-outline-primary { color: var(--plumagem); border-color: var(--plumagem); }
.btn-outline-primary:hover { background: var(--plumagem); border-color: var(--plumagem); }
.form-control, .selectize-input { border-radius: 4px; border-color: #C9D0C7; }
.form-control:focus, .selectize-input.focus { border-color: var(--plumagem); box-shadow: 0 0 0 .2rem rgba(63,125,58,.18); }
:focus-visible { outline: 2px solid var(--face); outline-offset: 2px; }
.irs--shiny .irs-bar, .irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single { background: var(--plumagem); border-color: var(--plumagem); }
.irs--shiny .irs-handle { border-color: var(--plumagem); }
.irs--shiny .irs-grid-text { font-size: 9px; }
.form-check-input:checked { background-color: var(--plumagem); border-color: var(--plumagem); }
.shiny-notification { border-radius: var(--raio); border: 1px solid var(--linha); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
details summary { cursor: pointer; padding: .2rem 0; }
.filtro-linha { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; }
.filtro-linha .form-group, .filtro-linha .shiny-input-container { margin-bottom: 0; }
.filtro-linha .shiny-options-group { display: flex; gap: 1rem; }

/* ---- Entrada ----------------------------------------------------------- */
.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 11fr) minmax(360px, 9fr); }
.entrada-lado { background: var(--mangue); color: #fff; padding: 3.5rem 3rem; display: flex; flex-direction: column; justify-content: space-between;
                border-right: 4px solid var(--plumagem); }
.entrada-lado h1 { font-size: 2.4rem; font-weight: 700; line-height: 1.12; max-width: 14ch; margin: 1.5rem 0 1rem; }
.entrada-lado p { color: rgba(255,255,255,.75); max-width: 42ch; font-size: 1rem; }
.entrada-lado .rodape { font-size: .8rem; color: rgba(255,255,255,.5); }
.entrada-form { background: #fff; padding: 3.5rem max(2.75rem, calc((100% - 380px) / 2)); display: flex; flex-direction: column; justify-content: center; }
.entrada-form h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 1.5rem; }
.entrada-form .btn { padding: .55rem; margin-top: .4rem; }
@media (max-width: 760px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada-lado { padding: 2rem 1.5rem; } .entrada-lado h1 { font-size: 1.7rem; margin: 1rem 0 .5rem; }
  .entrada-lado .rodape { display: none; }
  .entrada-form { padding: 2rem 1.5rem; }
}

/* ---- Celular --------------------------------------------------------- */
@media (max-width: 991px) {
  .navbar .nav-link { padding: .55rem .4rem !important; border-bottom: 0; margin: 0; }
  .navbar-collapse { padding-bottom: .5rem; }
  .bslib-sidebar-layout > .main { padding: .75rem .75rem 1.25rem; }
  .marca small { display: none; }
}
@media (max-width: 576px) {
  .indicador { border-left: 0; border-top: 1px solid var(--linha); }
  .indicador:first-child { border-top: 0; }
  .indicador .valor { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Ajustes finos ---------------------------------------------------- */
.navbar > .container-fluid { padding-left: 1rem; padding-right: 1rem; align-items: stretch; }
.navbar-brand { display: flex; align-items: center; }
.bslib-page-fill, .bslib-sidebar-layout, .html-fill-container > .bslib-sidebar-layout.html-fill-item { min-height: calc(100vh - 55px); }
.dataTables_wrapper { overflow-x: auto; }
table.dataTable td, table.dataTable th { white-space: nowrap; }
table.dataTable td:last-child { white-space: normal; }
.card-body > .shiny-html-output > .alert:first-child { margin-top: 0; }
#imp_resumo:empty + * { margin-top: 0; }
@media (max-width: 576px) { .modebar-container { display: none !important; } }
/* celular: o botão que abre os filtros precisa dizer o que é */
@media (max-width: 575.98px) {
  .bslib-sidebar-layout > .collapse-toggle { display: inline-flex; align-items: center; gap: .35rem; width: auto; padding: .3rem .6rem;
    border: 1px solid var(--linha); border-radius: 4px; background: #fff; color: var(--tinta); font-size: .85rem; font-weight: 600; }
  .bslib-sidebar-layout > .collapse-toggle::after { content: "Filtros"; }
}