/* app/static/css/financeiro.css */

/* =========================================================
   FINANCEIRO — TOKENS (compatibilidade + theme-driven)
========================================================= */

:root{
  --fin-soft:      var(--c-bg);
  --fin-border:    var(--c-border);
  --fin-border-2:  var(--c-border-2);
  --fin-muted:     var(--c-muted);
  --fin-text:      var(--c-text);
  --fin-surface:   var(--c-surface);
  --fin-surface-2: var(--c-surface-2);

  --fin-blue:      var(--c-accent);

  --fin-danger:    var(--c-danger);
  --fin-success:   var(--c-success);
  --fin-warning:   var(--c-warning);

  --fin-panel-bg:       var(--panel-bg, var(--fin-surface));
  --fin-panel-head-bg:  var(--panel-head-bg, color-mix(in srgb, var(--n-150) 70%, var(--n-0)));
  --fin-panel-inner-bg: var(--panel-inner-bg, color-mix(in srgb, var(--n-150) 40%, var(--n-0)));
  --fin-panel-foot-bg:  var(--panel-foot-bg, color-mix(in srgb, var(--n-150) 62%, var(--n-0)));

  --fin-head-bg:   var(--table-head-bg, color-mix(in srgb, var(--n-150) 78%, var(--n-0)));
  --fin-head-text: var(--n-800);

  --fin-row-a: var(--table-row-a, color-mix(in srgb, var(--n-150) 28%, var(--n-0)));
  --fin-row-b: var(--table-row-b, color-mix(in srgb, var(--n-150) 14%, var(--n-0)));

  --fin-hover-bg: color-mix(in srgb, var(--fin-blue) 6%, var(--fin-surface));
  --fin-hover-bd: color-mix(in srgb, var(--fin-blue) 14%, var(--fin-border));

  --fin-pill-bg:  color-mix(in srgb, var(--fin-blue) 10%, var(--fin-surface));
  --fin-pill-bd:  color-mix(in srgb, var(--fin-blue) 18%, var(--fin-border));

   /* Depth tokens */
  --fin-elev-1: var(--elev-1, var(--shadow-soft));
  --fin-elev-2: var(--elev-2, var(--shadow-soft-2));

  /* Hairline (mais sutil que border) */
  --fin-stroke-soft: var(--stroke-soft, color-mix(in srgb, var(--fin-border) 70%, var(--n-0)));
}

*, *::before, *::after{ box-sizing:border-box; }

html, body{
  max-width:100%;
  overflow-x:visible;
}

.fin-page{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding: var(--sv-page-gutter, 20px);
  min-width:0;
  max-width:100%;
}

.fin-page, .fin-panel, .fin-card{ min-width:0; max-width:100%; }

/* .fin-head h1{
  margin:0 0 6px 0;
  font-size:22px;
  color:var(--fin-text);
} */

.fin-head p{
  margin:0;
  color:var(--fin-muted);
  font-size:13px;
  font-weight:700;
}

@media (max-width:700px){
  .fin-head h1{ font-size:20px; }
}

/* NAV INTERNA */

.fin-nav-wrap{
  /* background:var(--fin-panel-bg); */
  /* border:1px solid var(--fin-border); */
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--fin-elev-1);
  border-color: var(--fin-stroke-soft);
  transition: transform 160ms var(--ease-standard), box-shadow 180ms var(--ease-standard), border-color 160ms var(--ease-standard);
}

.fin-nav-wrap:hover{
  transform: translateY(-1px);
  box-shadow: var(--fin-elev-2);
  border-color: color-mix(in srgb, var(--fin-blue) 22%, var(--fin-stroke-soft));
}

.fin-nav-summary{
  display:none;
  padding:12px;
  font-weight:900;
  color:var(--fin-text);
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  user-select:none;
  font-size:13px;
  background: var(--surface-card, var(--fin-panel-head-bg));
  border-bottom: 1px solid var(--fin-border);
}

.fin-nav-summary i{ color:var(--fin-blue); }

.fin-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px;
  background: var(--surface-card, var(--fin-panel-bg));
  justify-content:center;
}

.fin-nav__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:color-mix(in srgb, var(--fin-text) 85%, #000);
  font-weight:900;
  font-size:13px;
  border:1px solid transparent;
}

.fin-nav__item i{
  width:18px;
  text-align:center;
  color:var(--fin-blue);
}

.fin-nav__item:hover{
  background:var(--fin-hover-bg);
  border-color:var(--fin-hover-bd);
}

.fin-nav__item.is-active{
  background:var(--fin-blue);
  border-color:var(--fin-blue);
  color:var(--n-0);
}

.fin-nav__item.is-active i{ color:var(--n-0); }

@media (max-width:700px){
  .fin-nav-summary{ display:flex; }

  .fin-nav{
    justify-content:flex-start;
    flex-direction:column;
    gap:0;
    padding:0;
  }

  .fin-nav__item{
    width:100%;
    border-radius:0;
    border-left:none;
    border-right:none;
    border-top:1px solid var(--fin-border);
    padding:14px 12px;
    justify-content:flex-start;
  }

  .fin-nav__item:first-child{ border-top:none; }
}

.fin-nav-wrap.is-collapsed .fin-nav{ display:none; }

/* PAINÉIS / CARDS */

/* ✅ Card real (folha em cima da mesa) */
.fin-card{
  background:var(--fin-panel-bg);
  border:1px solid var(--fin-border);
  border-radius:14px;
  padding:14px;
  overflow:hidden;
  box-shadow: var(--fin-elev-1);
  border-color: var(--fin-stroke-soft);
  transition: transform 160ms var(--ease-standard), box-shadow 180ms var(--ease-standard), border-color 160ms var(--ease-standard);
}

.fin-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--fin-elev-2);
  border-color: color-mix(in srgb, var(--fin-blue) 22%, var(--fin-stroke-soft));
}

/* ✅ Wrapper de seção (não deve “pintar branco” por cima da mesa) */
.fin-panel{
  background:transparent;
  border:1px solid var(--fin-border);
  border-radius:14px;
  padding:14px;
  overflow:visible;
}

.fin-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;

  background: var(--fin-panel-head-bg);
  border: 1px solid var(--fin-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.fin-panel__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:13px;
  color:var(--fin-text);
}

.fin-panel__title::before{ content:none !important; }

.fin-panel__title i{
  color: var(--fin-blue);
  width:18px;
  text-align:center;
  flex:0 0 auto;
}

.fin-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:var(--fin-blue);
  background:var(--fin-pill-bg);
  border:1px solid var(--fin-pill-bd);
  white-space:nowrap;
}

.fin-inline-sep{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--fin-muted);
  margin:0 2px;
}

.fin-category-chip{
  --fin-category-color: color-mix(in srgb, var(--fin-blue) 72%, white);
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--fin-border);
  background:var(--fin-panel-bg);
  box-shadow: inset 3px 0 0 var(--fin-category-color);
  color:var(--fin-text);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
}

.fin-category-chip__swatch{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 auto;
  background:var(--fin-category-color);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--fin-category-color) 22%, transparent);
}

.fin-category-chip__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================================================
   PREMIUM OUTLINES (substitui borders grossas por hairline)
   - Remove borda forte em wrappers grandes (nav, filtros, toolbar, tabela)
   - Mantém profundidade e melhora separação visual
========================================================= */

/* 1) Remover borders “grosseiros” desses wrappers */
.fin-nav-wrap,
.fin-toolbar-panel,
.fin-filters-wrap,
.fin-table-wrap{
  border: 0 !important; /* evita linha pesada */
  box-shadow:
    var(--fin-elev-1),
    inset 0 0 0 1px var(--fin-stroke-soft); /* hairline premium */
  transition:
    transform 160ms var(--ease-standard),
    box-shadow 180ms var(--ease-standard);
}

/* Hover: eleva e dá contorno sutil com acento */
.fin-nav-wrap:hover,
.fin-toolbar-panel:hover,
.fin-filters-wrap:hover,
.fin-table-wrap:hover{
  transform: translateY(-1px);
  box-shadow:
    var(--fin-elev-2),
    inset 0 0 0 1px color-mix(in srgb, var(--fin-blue) 22%, var(--fin-stroke-soft));
}

/* 2) Cards “papel” (fin-card) também com hairline (sem linha grossa) */
.fin-card{
  border: 0 !important;
  box-shadow:
    var(--fin-elev-1),
    inset 0 0 0 1px var(--fin-stroke-soft);
  transition:
    transform 160ms var(--ease-standard),
    box-shadow 180ms var(--ease-standard);
}

.fin-card:hover{
  transform: translateY(-1px);
  box-shadow:
    var(--fin-elev-2),
    inset 0 0 0 1px color-mix(in srgb, var(--fin-blue) 20%, var(--fin-stroke-soft));
}

/* 3) Elementos internos que ainda “pedem” border (ex: headers internos) */
/* .fin-nav-summary,
.fin-filters-summary,
.fin-panel__head{
  border-color: color-mix(in srgb, var(--fin-stroke-soft) 85%, var(--n-0));
} */

/* 4) Tabela: evita grid marcado demais */
.fin-table thead th{
  border-bottom-color: color-mix(in srgb, var(--fin-stroke-soft) 80%, var(--n-0));
}
.fin-table tbody td{
  border-bottom-color: color-mix(in srgb, var(--fin-stroke-soft) 55%, transparent);
}
.fin-table th + th,
.fin-table td + td{
  border-left-color: color-mix(in srgb, var(--fin-stroke-soft) 55%, transparent);
}

@media (max-width:700px){
  .fin-panel__head{
    flex-wrap:nowrap;
    gap:8px;
  }
  .fin-panel__title{ font-size:12px; }
  .fin-badge{ font-size:10px; padding:3px 8px; }
}

/* utilitários */
.t-left{ text-align:left !important; }
.t-center{ text-align:center !important; }
.t-right{ text-align:right !important; }

/* BOTÕES */

.fin-btn{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--fin-blue);
  background:var(--fin-blue);
  color:var(--n-0);
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:13px;
  white-space:nowrap;
  line-height:1;
}

.fin-btn i{ line-height:1; }
.fin-btn:hover{ filter:brightness(0.97); }

.fin-btn--ghost{
  background: var(--btn-ghost-bg, color-mix(in srgb, var(--n-150) 30%, var(--n-0)));
  color: var(--fin-blue);
  border-color: var(--btn-ghost-border, color-mix(in srgb, var(--fin-border) 70%, var(--n-0)));
}

.fin-btn--ghost:hover{ background: var(--fin-hover-bg); }

.fin-btn.is-icon{ padding:0 14px; }
.fin-btn.is-icon span{ display:inline; }

.fin-icon-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--fin-pill-bd);
  background:var(--fin-hover-bg);
  color:color-mix(in srgb, var(--fin-text) 80%, #000);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.fin-icon-btn:hover{ filter:brightness(0.97); }

.fin-icon-btn--sm{
  width:32px;
  height:32px;
  border-radius:10px;
}

/* Acoes compactas em listas sempre acompanham a cor configurada para o tema. */
table td .fin-icon-btn:not(.fin-icon-btn--danger){
  color:var(--c-accent);
  border-color:color-mix(in srgb, var(--c-accent) 26%, var(--fin-pill-bd));
  background:color-mix(in srgb, var(--c-accent) 8%, var(--fin-hover-bg));
}

table td .fin-icon-btn:not(.fin-icon-btn--danger):hover{
  border-color:color-mix(in srgb, var(--c-accent) 42%, var(--fin-pill-bd));
  background:color-mix(in srgb, var(--c-accent) 13%, var(--fin-hover-bg));
}

/* mês */
.fin-monthline{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:center;
  min-width:0;
  flex:0 1 auto;
}
.fin-monthline__label{
  font-weight:900;
  color:var(--fin-text);
  font-size:13px;
  white-space:nowrap;
}
@media (max-width:700px){
  .fin-monthline__label{ font-size:12px; }
  .fin-icon-btn--sm{ width:30px; height:30px; }
}

/* KPI / TOOLBAR */

.fin-toolbar-panel{
  /* background:var(--fin-panel-bg); */
  /* border:1px solid var(--fin-border); */
  border-radius:14px;
  padding:12px;
  box-shadow: var(--fin-elev-1);
  border-color: var(--fin-stroke-soft);
}

.fin-toolbar{
  display:grid;
  grid-template-columns: 0.7fr 0.7fr 0.7fr 1fr;
  gap:10px;
  align-items:stretch;
  justify-content:stretch;
  max-width:none;
  width:100%;
  margin:0;
}

.fin-toolbar--premium{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width:none;
}

.fin-toolbar__block{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--fin-border);
  border-radius:14px;
  /* background:var(--fin-panel-bg); */
  min-width:0;
}

.fin-toolbar__block--metric{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--fin-blue) 10%, transparent), transparent 46%),
    var(--surface-card, var(--fin-panel-bg));
  box-shadow: var(--fin-elev-1);
}

.fin-toolbar__block--metric::after{
  content:"";
  position:absolute;
  inset:auto 14px 0 14px;
  height:3px;
  border-radius:999px;
  background: color-mix(in srgb, var(--fin-blue) 18%, transparent);
}

.fin-toolbar__block--metric-danger::after{
  background: color-mix(in srgb, var(--fin-danger) 55%, transparent);
}

.fin-toolbar__block--metric-success::after{
  background: color-mix(in srgb, var(--fin-success) 55%, transparent);
}

.fin-toolbar__block--metric-warning::after{
  background: color-mix(in srgb, var(--fin-warning) 68%, transparent);
}

.fin-toolbar__block--metric-info::after{
  background: color-mix(in srgb, var(--fin-blue) 55%, transparent);
}

.fin-kpi-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  min-width:0;
}

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

.fin-kpi-card__eyebrow{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--fin-muted);
}

.fin-kpi-card__icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--fin-border);
  background: var(--fin-panel-head-bg);
  color: var(--fin-blue);
  font-size:16px;
  flex:0 0 auto;
}

.fin-toolbar__block--metric-danger .fin-kpi-card__icon{ color:var(--fin-danger); }
.fin-toolbar__block--metric-success .fin-kpi-card__icon{ color:var(--fin-success); }
.fin-toolbar__block--metric-warning .fin-kpi-card__icon{ color:var(--fin-warning); }
.fin-toolbar__block--metric-info .fin-kpi-card__icon{ color:var(--fin-blue); }

.fin-kpi-card__value{
  font-size: clamp(20px, 2vw, 28px);
  font-weight:900;
  line-height:1.08;
  color: var(--fin-text);
}

.fin-kpi-card__meta{
  font-size:13px;
  line-height:1.55;
  font-weight:700;
  color: var(--fin-muted);
}

.fin-toolbar__block--logo{
  border:none;
  background:transparent;
  justify-content:flex-start;
  padding:0;
}

.fin-kpi-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  height:100%;
}

.fin-kpi-logo img{
  max-height:45px;
  width:auto;
  object-fit:contain;
  opacity:0.92;
}

/* KPI 2 col */
.fin-kpi--two-col{
  display:grid;
  grid-template-columns: 52px 1fr;
  gap:12px;
  align-items:center;
  width:100%;
  min-width:0;
}

.fin-kpi__iconcol{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.fin-kpi__iconcol i{
  font-size:38px;
  line-height:1;
}

.fin-kpi__iconcol--danger,
.fin-kpi__iconinline--danger{ color:var(--fin-danger); }

.fin-kpi__iconcol--success,
.fin-kpi__iconinline--success{ color:var(--fin-success); }

.fin-kpi__text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.fin-kpi__title{
  font-size:12px;
  font-weight:900;
  color:color-mix(in srgb, var(--fin-text) 80%, #000);
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fin-kpi__iconinline{
  display:none;
  align-items:center;
  justify-content:center;
}

.fin-kpi__iconinline i{
  font-size:14px;
  line-height:1;
}

.fin-kpi__value{
  font-size:18px;
  font-weight:900;
  color:var(--fin-text);
  line-height:1.15;
}

.fin-kpi__value--danger{ color:var(--fin-danger); }
.fin-kpi__value--success{ color:var(--fin-success); }

@media (max-width:900px){
  .fin-toolbar{
    grid-template-columns: 1fr 1fr;
    max-width:100%;
    margin:0;
  }

  .fin-toolbar__block--logo{ display:none; }
  .fin-toolbar__block--cta{ grid-column: 1 / -1; }
  .fin-toolbar--premium{
    grid-template-columns: 1fr 1fr;
  }

  .fin-kpi--two-col{
    grid-template-columns: 1fr;
    gap:6px;
  }
  .fin-kpi__iconcol{ display:none; }
  .fin-kpi__iconinline{ display:inline-flex; }

  .fin-kpi__value{ font-size:16px; }
}

@media (max-width:700px){
  .fin-toolbar--premium{
    grid-template-columns: 1fr;
  }
}

/* FILTROS */

.fin-filters-wrap{
  background: var(--surface-card, var(--fin-panel-bg));
  /* border:1px solid var(--fin-border); */
  border-radius:14px;
  overflow:hidden;
  max-width:100%;
  box-shadow: var(--fin-elev-1);
  border-color: var(--fin-stroke-soft);
}

.fin-filters-summary{
  display:none;
  padding:12px;
  font-weight:900;
  color:var(--fin-text);
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  user-select:none;
  font-size:13px;
  border-bottom:1px solid var(--fin-border);
  background: var(--fin-panel-head-bg);
}

.fin-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:200px;
  padding:24px 20px;
  border:1px dashed color-mix(in srgb, var(--fin-border) 80%, transparent);
  border-radius:18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fin-panel-head-bg) 70%, transparent), transparent 42%),
    var(--surface-card, var(--fin-panel-inner-bg));
  text-align:center;
}

.fin-empty-state--compact{
  min-height:0;
  padding:16px 14px;
  gap:8px;
  border-radius:16px;
}

.fin-empty-state__icon{
  width:62px;
  height:62px;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: color-mix(in srgb, var(--fin-blue) 10%, var(--surface-card, var(--fin-panel-bg)));
  color: var(--fin-blue);
  font-size:23px;
}

.fin-empty-state strong{
  color: var(--fin-text);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height:1.2;
  font-weight: 800;
}

.fin-empty-state p{
  margin:0;
  max-width:560px;
  color: var(--fin-muted);
  font-size:12.5px;
  line-height:1.5;
  font-weight:500;
}

.fin-empty-state--compact .fin-empty-state__icon{
  width:44px;
  height:44px;
  border-radius:15px;
  font-size:17px;
}

.fin-empty-state--compact strong{
  font-size:14px;
}

.fin-empty-state--compact p{
  font-size:11.5px;
  line-height:1.4;
}

.fin-dash-widget-panel{
  margin-top:14px;
}

.fin-dash-widget-row{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap:14px;
}

@media (max-width:1100px){
  .fin-dash-widget-row{
    grid-template-columns: 1fr;
  }
}

.fin-dash-widget{
  border:1px solid var(--fin-border);
  border-radius:18px;
  overflow:hidden;
  background: var(--surface-card, var(--fin-panel-bg));
  box-shadow: var(--fin-elev-1);
}

.fin-dash-widget__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background: var(--fin-panel-head-bg);
  border-bottom:1px solid var(--fin-border);
}

.fin-dash-widget__head--calendar{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-items:stretch;
  gap:10px;
}

.fin-dash-widget__title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  font-weight:900;
  color: var(--fin-text);
}

.fin-dash-widget__title i{
  width:18px;
  text-align:center;
  color: var(--fin-blue);
}

.fin-dash-widget__calendar-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.fin-dash-widget__calendar-note{
  font-size:11px;
  font-weight:800;
  color:var(--fin-muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-left:auto;
  text-align:right;
  white-space:nowrap;
}

.fin-dash-widget__body{
  padding:16px;
  background: var(--surface-card, var(--fin-panel-inner-bg));
  min-height: 280px;
}

/* .fin-dash-widget--activity .fin-dash-widget__body{
  max-height:350px;
  overflow:auto;
} */

.fin-dash-widget__body .admin-widget-activity-list{
  max-height:350px;
  overflow-y:auto;
  padding-right:4px;
}

@media (max-width:700px){
  .fin-dash-widget__calendar-meta{
    gap:10px;
  }

  .fin-dash-widget__calendar-note{
    margin-left:0;
  }
}

.fin-dash-calendar{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.fin-dash-calendar__weekdays,
.fin-dash-calendar__grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:8px;
}

.fin-dash-calendar__weekdays span{
  text-align:center;
  font-size:12px;
  font-weight:900;
  color: var(--fin-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.fin-dash-calendar__day{
  min-height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  padding:6px 4px;
  border:1px solid var(--fin-border);
  background: var(--surface-card, var(--fin-panel-bg));
  color: var(--fin-text);
  font-weight:800;
  font-size:13px;
}

.fin-dash-calendar__day.has-events{
  border-color: color-mix(in srgb, var(--fin-blue) 28%, var(--fin-border));
  background: color-mix(in srgb, var(--fin-blue) 8%, var(--surface-card, var(--fin-panel-bg)));
}

.fin-dash-calendar__day.is-overdue{
  border-color: color-mix(in srgb, var(--fin-red) 26%, var(--fin-border));
  background: color-mix(in srgb, var(--fin-red) 9%, var(--surface-card, var(--fin-panel-bg)));
}

.fin-dash-calendar__day.is-muted{
  color: color-mix(in srgb, var(--fin-muted) 76%, transparent);
  background: color-mix(in srgb, var(--fin-panel-head-bg) 60%, transparent);
}

.fin-dash-calendar__day.is-today{
  border-color: color-mix(in srgb, var(--fin-blue) 32%, transparent);
  background: color-mix(in srgb, var(--fin-blue) 12%, var(--surface-card, var(--fin-panel-bg)));
  color: var(--fin-blue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fin-blue) 16%, transparent);
}

.fin-dash-activity-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.fin-dash-activity-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--fin-border);
  border-radius:16px;
  background: var(--surface-card, var(--fin-panel-bg));
}

.fin-dash-activity-item__dot{
  width:12px;
  height:12px;
  margin-top:6px;
  border-radius:999px;
  background: var(--fin-blue);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--fin-blue) 10%, transparent);
  flex:0 0 auto;
}

.fin-dash-activity-item.is-pay .fin-dash-activity-item__dot{
  background: var(--fin-danger);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--fin-danger) 10%, transparent);
}

.fin-dash-activity-item.is-rec .fin-dash-activity-item__dot{
  background: var(--fin-success);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--fin-success) 10%, transparent);
}

.fin-dash-activity-item__content{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding-bottom:12px;
  border-bottom:1px solid color-mix(in srgb, var(--fin-border) 82%, transparent);
}

.fin-dash-activity-item:last-child .fin-dash-activity-item__content{
  padding-bottom:0;
  border-bottom:0;
}

.fin-dash-activity-item__content strong{
  color: var(--fin-text);
  font-size:14px;
  line-height:1.45;
}

.fin-dash-activity-item__content span,
.fin-dash-activity-item__content small{
  color: var(--fin-muted);
  font-weight:700;
  font-size:12px;
  line-height:1.5;
}

.fin-filters-summary i{ color:var(--fin-blue); }

.fin-filters{
  display:grid;
  gap:10px;
  padding:12px;
  max-width:100%;
  background: var(--surface-card, var(--fin-panel-inner-bg));
}

.fin-filters__row{
  display:grid;
  gap:10px;
  min-width:0;
}

.fin-filters__row--fields{
  grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(0, 1fr));
  align-items:end;
}

.fin-filters__row--actions{
  grid-template-columns: repeat(2, max-content);
  justify-content:end;
  align-items:center;
}

.fin-mobile-action{
  display:none;
}

.fin-filter{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.fin-filter label{
  font-size:12px;
  font-weight:900;
  color:color-mix(in srgb, var(--fin-text) 80%, #000);
}

.fin-filter select,
.fin-filter input{
  height:44px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--fin-border) 75%, var(--n-300));
  padding:0 12px;
  outline:none;
  background:var(--fin-surface);
  font-size:13px;
  font-weight:800;
  max-width:100%;
  color:var(--fin-text);
}

.fin-filter--search input{
  min-height:52px;
  border-radius:16px;
  padding:0 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fin-panel-head-bg) 58%, transparent), transparent 45%),
    var(--fin-surface);
  border:1px solid color-mix(in srgb, var(--fin-border) 72%, var(--n-300));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 55%, transparent);
}

.fin-filter--search input::placeholder{
  color: color-mix(in srgb, var(--fin-muted) 86%, white);
}

.fin-filter select:focus,
.fin-filter input:focus{
  border-color:color-mix(in srgb, var(--fin-blue) 55%, var(--fin-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fin-blue) 18%, transparent);
}

.fin-filter--search input:focus{
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 55%, transparent),
    0 0 0 3px color-mix(in srgb, var(--fin-blue) 18%, transparent);
}

@media (max-width:700px){
  .fin-filters-summary{ display:flex; }
  .fin-filters{ display:none; }
  .fin-filters-wrap.is-open .fin-filters{ display:grid; }
  .fin-mobile-action{
    display:block;
  }
  .fin-mobile-action .fin-btn{
    width:100%;
  }
  .fin-btn--mobile-hide{
    display:none !important;
  }
  .fin-filters__row,
  .fin-filters__row--fields,
  .fin-filters__row--actions{
    grid-template-columns: 1fr;
    justify-content:stretch;
  }
  .fin-filters__row--actions .fin-btn{
    width:100%;
  }

  .fin-filter select,
  .fin-filter input{ font-size:12px; }
}

/* TABELAS */

.fin-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* border:1px solid var(--fin-border); */
  border-radius:12px;
  /* background:var(--fin-panel-bg); */
  box-shadow: var(--fin-elev-1);
  border-color: var(--fin-stroke-soft);
  display:block;
  position:relative;
  min-width:0;
  contain: layout paint;
}

.fin-table-wrap.is-scroll-y{ max-height:360px; }

#cpTableWrap.fin-table-wrap.is-scroll-y,
#crTableWrap.fin-table-wrap.is-scroll-y{
  max-height:586px !important;
}

.fin-table{
  width:100% !important;
  min-width:980px;
  border-collapse:separate;
  border-spacing:0;
}

.fin-table thead th{
  background:var(--fin-head-bg);
  color:var(--fin-head-text);
  font-weight:900;
  font-size:12px;
  text-align:center;
  padding:10px 12px;
  border-bottom:1px solid var(--fin-border);
  white-space:nowrap;
}

.fin-table tbody td{
  color:var(--fin-text);
  font-weight:800;
  font-size:13px;
  padding:10px 12px;
  vertical-align:middle;
  white-space:nowrap;
  border-bottom:1px solid var(--fin-border-2);
}

.fin-table tbody tr:nth-child(odd) td{ background: var(--fin-row-a); }
.fin-table tbody tr:nth-child(even) td{ background: var(--fin-row-b); }

.fin-table tbody tr:last-child td{ border-bottom:none; }

.fin-table th + th,
.fin-table td + td{ border-left:1px solid var(--fin-border-2); }

/* AÇÕES */

.fin-actions-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.fin-action-ico{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--c-accent) 26%, var(--fin-border));
  background:color-mix(in srgb, var(--c-accent) 8%, var(--fin-surface));
  color:var(--c-accent);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.fin-action-ico i{ color:inherit; }

.fin-action-ico:hover{
  background:color-mix(in srgb, var(--c-accent) 13%, var(--fin-surface));
  border-color:color-mix(in srgb, var(--c-accent) 42%, var(--fin-border));
}

.fin-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--fin-border) 75%, var(--fin-border-2));
  background:var(--fin-surface);
}

.fin-status.is-open i{ color:var(--fin-danger); }
.fin-status.is-done i{ color:var(--fin-success); }

/* MODAL */

.fin-modal{
  position:fixed;
  inset:0;
  background:color-mix(in srgb, var(--c-text) 55%, transparent);
  /* Mantém renderizado para permitir animação de saída (close). */
  display:flex;
  visibility:hidden;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:9999;
  opacity:0;
  transition: opacity 360ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}

.fin-modal.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

/* Estado explícito de fechamento para garantir saída suave visível. */
.fin-modal.is-open.is-closing{
  opacity: 0;
  pointer-events: none;
}

.fin-modal__card{
  width:100%;
  max-width:720px;
  background:var(--fin-panel-bg);
  border-radius:16px;
  /* border:1px solid var(--fin-border); */
  overflow:hidden;
  box-shadow: var(--fin-elev-2);
  border-color: var(--fin-stroke-soft);
  transform: translateY(22px);
  opacity:0;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), opacity 360ms cubic-bezier(.2,.8,.2,1);
}

.fin-modal.is-open .fin-modal__card{
  transform:translateY(0);
  opacity:1;
}

.fin-modal.is-open.is-closing .fin-modal__card{
  transform: translateY(22px);
  opacity: 0;
}

.fin-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background:var(--fin-panel-head-bg);
  border-bottom:1px solid var(--fin-border);
}

.fin-modal__title{
  font-weight:900;
  color:var(--fin-text);
  font-size:13px;
}

.fin-modal__close{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--fin-border) 75%, var(--fin-border-2));
  background:var(--fin-surface);
  cursor:pointer;
}

.fin-modal__body{
  padding:25px;
  background: var(--fin-panel-inner-bg);
}

.fin-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.fin-form__row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

@media (max-width:700px){
  .fin-form__row{ grid-template-columns:1fr; }
}

.fin-field label{
  display:block;
  font-size:12px;
  font-weight:900;
  color:color-mix(in srgb, var(--fin-text) 80%, #000);
  margin:0 0 6px 0;
}

.fin-field input,
.fin-field select{
  height:44px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--fin-border) 75%, var(--fin-border-2));
  padding:0 12px;
  outline:none;
  background:var(--fin-surface);
  font-size:13px;
  font-weight:800;
  max-width:100%;
  color:var(--fin-text);
}

.fin-field input:focus,
.fin-field select:focus{
  border-color:color-mix(in srgb, var(--fin-blue) 55%, var(--fin-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fin-blue) 18%, transparent);
}

.fin-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
}

/* =========================================================
   FIN — PREMIUM DEPTH (sem bordas feias)
   - Eleva PAINÉIS/CARDS do Dashboard e Relatórios
   - Remove borda de headers/summaries
   - Modal com profundidade real
========================================================= */

/* 1) Headers/summaries SEM borda (você já pediu isso) */
.fin-panel__head,
.fin-nav-summary,
.fin-filters-summary{
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) Dashboard/Relatórios: painéis reais (papel sobre mesa)
   OBS: não mexo no .fin-panel base pra não quebrar outras telas */
.fin-panel.fin-dash-panel,
.fin-panel.fin-rep-section,
.fin-panel.fin-dash-panel.fin-dash-chart,
.fin-panel.fin-dash-panel.fin-dash-agenda,
.fin-panel.fin-dash-panel.fin-dash-shortcuts-panel{
  background: var(--surface-card, var(--fin-panel-bg));
  border: 0 !important;
  overflow: hidden; /* garante recorte bonito */
  box-shadow: var(--fin-elev-1);
  transition: transform 160ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

.fin-panel.fin-dash-panel:hover,
.fin-panel.fin-rep-section:hover,
.fin-panel.fin-dash-panel.fin-dash-chart:hover,
.fin-panel.fin-dash-panel.fin-dash-agenda:hover,
.fin-panel.fin-dash-panel.fin-dash-shortcuts-panel:hover{
  transform: translateY(-1px);
  box-shadow: var(--fin-elev-2);
}

/* 3) Dashboard: "Listbox" (CP/CR) precisa parecer card também */
.fin-dash-listbox{
  background: var(--surface-card, var(--fin-panel-bg));
  border: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--fin-elev-1);
  transition: transform 160ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

.fin-dash-listbox:hover{
  transform: translateY(-1px);
  box-shadow: var(--fin-elev-2);
}

/* 4) Importante: se algum efeito estiver acontecendo NO CONTEÚDO,
      neutraliza pra sombra ficar no card pai (como você quer) */
.fin-dash-mini,
.fin-dash-acc,
.fin-pie-wrap,
.ui-chart{
  box-shadow: none !important;
}

/* 5) Ajuste: conteúdo interno não pode “pintar” borda pesada */
.fin-table-wrap,
.fin-filters-wrap,
.fin-nav-wrap,
.fin-toolbar-panel{
  border: 0 !important;
}

/* Se você quiser manter esses blocos com aparência de card,
   eles recebem sombra suave sem borda. (CP/CR vão ficar melhores.) */
.fin-table-wrap,
.fin-filters-wrap,
.fin-nav-wrap,
.fin-toolbar-panel{
  box-shadow: var(--fin-elev-1);
  transition: transform 160ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

.fin-table-wrap:hover,
.fin-filters-wrap:hover,
.fin-nav-wrap:hover,
.fin-toolbar-panel:hover{
  transform: translateY(-1px);
  box-shadow: var(--fin-elev-2);
}

/* 6) MODAL: profundidade real (sem borda) */
.fin-modal__card{
  border: 0 !important;
  box-shadow: var(--fin-elev-2) !important;
}

/* Head do modal também sem borda */
.fin-modal__head{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   PATCH — .fin-panel como “folha na mesa” (CP/CR e demais)
   - Antes: wrapper transparente com borda
   - Agora: card real com elevação (sem borda feia)
========================================================= */

.fin-panel{
  background: var(--surface-card, var(--fin-panel-bg));
  border: 0 !important;
  border-radius: 14px;
  overflow: hidden;

  box-shadow:
    var(--fin-elev-1),
    inset 0 0 0 1px var(--fin-stroke-soft);

  transition: transform 160ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}

.fin-panel:hover{
  transform: translateY(-1px);
  box-shadow:
    var(--fin-elev-2),
    inset 0 0 0 color-mix(in srgb, var(--fin-blue) 20%, var(--fin-stroke-soft));
}

/* head já está sem borda no seu padrão — aqui só garante recorte limpo */
.fin-panel__head{
  background: var(--fin-panel-head-bg) !important;
  border: 0 !important;
  border-radius: 12px;
}

/* =========================================================
   PATCH — MODAL premium (backdrop “mesa” + blur sutil)
========================================================= */

.fin-modal{
  background:
    radial-gradient(1200px 700px at 50% 20%,
      color-mix(in srgb, var(--c-text) 22%, transparent),
      color-mix(in srgb, var(--c-text) 62%, transparent)
    );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* card do modal já tem elev-2: reforça “peso” sem borda */
.fin-modal__card{
  border: 0 !important;
  box-shadow: var(--fin-elev-2) !important;
}

/* =========================================================
   FIX — Backdrop do modal (tela inteira) + blur
   (usa !important pra vencer sobrescritas)
========================================================= */

.fin-modal{
  background:
    radial-gradient(900px 520px at 50% 18%,
      color-mix(in srgb, var(--c-text) 18%, transparent) 0%,
      color-mix(in srgb, var(--c-text) 58%, transparent) 60%,
      color-mix(in srgb, var(--c-text) 72%, transparent) 100%
    ) !important;

  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.fin-detail-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.fin-detail-card{
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--sv-border) 70%, transparent);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--sv-accent) 10%, transparent), transparent 56%),
    color-mix(in srgb, var(--c-surface) 92%, transparent);
}

.fin-detail-card__label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sv-accent) 74%, var(--sv-text));
}

.fin-detail-card__value{
  font-size: 18px;
  font-weight: 900;
  color: var(--sv-text);
  line-height: 1.25;
}

.fin-detail-card__meta{
  font-size: 13px;
  color: var(--sv-muted);
  line-height: 1.45;
}

.fin-proof-panel{
  margin-top: 4px;
}

.fin-proof-panel__actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}