/* ===========================================================================
   redesign.css — camada de redesenho do Portal GRL
   ---------------------------------------------------------------------------
   Carregado DEPOIS de app.css e mobile_parity.css (ver layouts/base.html), por
   isso vence os dois. A paleta e a escala vem do handoff de redesenho, que por
   sua vez saiu de mobile_parity.css: nao ha cor nova aqui, so os tokens
   semanticos que faltavam (status, superficies, area de upload).

   A paleta roxa de app.css (--bg #100624 / --primary #8b5cf6) esta fora da
   marca e nao deve ser usada como referencia; app.css continua carregado
   porque ainda fornece a estrutura de muitos componentes.

   Convencao: componentes novos usam prefixo .rd-. Onde o redesenho muda um
   componente que ja existe (.sidebar, .topbar, .main-grid), sobrescrevemos a
   classe original em vez de renomear, para nao quebrar o JS e os templates.
   =========================================================================== */

/* O `hidden` do HTML volta a valer, sempre.

   `[hidden] { display: none }` e regra da UA stylesheet, entao QUALQUER
   `display: flex/grid/block` de autor a vence -- e o elemento continua na
   tela com o atributo posto. O projeto ja tinha sido mordido por isso duas
   vezes (.rd-doc, com a paginacao de notas mostrando sempre as mesmas
   linhas; e o aviso "Valores não lidos no PDF" do Parcelamento, que
   aparecia em toda competencia dizendo que o total estava incompleto
   quando nao estava), e a correcao vinha sendo por componente -- uma
   regra `.classe[hidden]` de cada vez, sempre depois de o defeito
   aparecer. Uma linha aqui fecha a familia inteira.

   `!important` porque o ponto e justamente ganhar de regra de autor. Nada
   no projeto mostra um elemento `hidden` de proposito; quem precisa animar
   a saida usa classe, nao o atributo. */
[hidden] {
  display: none !important;
}

:root {
  /* Superficies -------------------------------------------------------- */
  --rd-page: #f2ece0;
  --rd-navy: #0f1830;
  --rd-navy-surface: #10192f;
  --rd-card: #ffffff;
  --rd-soft: #faf7f0;
  --rd-upload-bg: #fbf8f1;
  --rd-upload-line: #c2b79c;

  /* Texto -------------------------------------------------------------- */
  --rd-text: #2b2318;
  --rd-text-2: #7d715c;
  --rd-text-3: #9a8f7c;
  --rd-text-support: #6b6151;
  --rd-on-navy: #f5f1e6;
  --rd-on-navy-muted: rgba(245, 241, 230, 0.72);
  --rd-on-navy-line: rgba(245, 241, 230, 0.16);

  /* Acao --------------------------------------------------------------- */
  --rd-gold: #8f6c1c; /* fundo de botao primario sobre claro */
  --rd-gold-bright: #b9902a; /* sobre navy, badges, mes atual no grafico */

  /* Linhas ------------------------------------------------------------- */
  --rd-line: rgba(43, 35, 24, 0.12);
  --rd-line-strong: rgba(43, 35, 24, 0.18);
  --rd-line-soft: rgba(43, 35, 24, 0.07);

  /* Status ------------------------------------------------------------- */
  --rd-ok-text: #3f6b4a;
  --rd-ok-bg: #eef5ef;
  --rd-ok-line: #dbe9de;
  --rd-warn-text: #8a6620;
  --rd-warn-bg: #fbf3de;
  --rd-warn-line: #f0e3c2;
  --rd-danger-text: #9a3b26;
  --rd-danger-bg: #fbeeea;
  --rd-danger-line: #f2ddd6;
  --rd-neutral-text: #7d715c;
  --rd-neutral-bg: #f5f2ea;
  --rd-neutral-line: rgba(43, 35, 24, 0.12);
  --rd-info-text: #2f4d7a;
  --rd-info-bg: #eef2f9;
  --rd-info-line: #dbe4f1;

  /* Status sobre navy */
  --rd-on-navy-ok: #7fc79a;
  --rd-on-navy-warn: #e8b34a;
  --rd-on-navy-danger: #f0b9a8;
  --rd-hero-danger-bg: #3d1a12;

  /* Bordas de estado na linha de documento */
  --rd-edge-overdue: #c0492f;
  --rd-edge-due: #b98a26;

  /* Formas ------------------------------------------------------------- */
  --rd-radius-card: 16px;
  --rd-radius-card-lg: 18px;
  --rd-radius-field: 12px;
  --rd-radius-pill: 999px;
  --rd-radius-filetag: 7px;
  --rd-shadow-sheet: 0 -18px 40px rgba(20, 17, 12, 0.28);

  /* Tipografia --------------------------------------------------------- */
  --rd-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --rd-sans: "Segoe UI", "Helvetica Neue", sans-serif;

  /* Medidas de layout -------------------------------------------------- */
  --rd-sidebar-w: 250px;
  --rd-rail-w: 78px;
  --rd-tabbar-h: 62px;
  --rd-topbar-h: 58px;
}

/* ===========================================================================
   1. Base da pagina
   =========================================================================== */

body {
  font-family: var(--rd-sans);
  background: var(--rd-page);
  color: var(--rd-text);
}

.rd h1,
.rd h2,
.rd h3,
.rd-title,
.rd-hero__value,
.rd-stat__value {
  font-family: var(--rd-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Titulo de tela: 20px no mobile, 29px no desktop. */
.rd-title {
  margin: 0;
  font-size: 20px;
  color: var(--rd-text);
}

.rd-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rd-text-2);
}

.rd-collabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-text-2);
}

.rd-support {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rd-text-support);
}

/* ===========================================================================
   2. Shell nas tres larguras
   ---------------------------------------------------------------------------
   mobile_parity.css esconde .sidebar sem media query e deixa .main-grid em
   uma coluna em qualquer largura, ou seja hoje o cliente nao tem navegacao
   permanente em nenhum tamanho de tela. Aqui devolvemos as tres:
     >= 1024px  barra lateral navy de 250px com submenu
     641-1023   trilho de 78px, so icones
     <= 640px   aba inferior de 4 destinos
   =========================================================================== */

/* --- mobile (padrao): aba inferior ---------------------------------------- */

.rd-tabbar {
  position: fixed;
  z-index: 60;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 9px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(43, 35, 24, 0.14);
  background: rgba(245, 241, 230, 0.92);
  backdrop-filter: blur(14px);
}

.rd-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #9a9385;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.rd-tabbar__item .icon-svg,
.rd-tabbar__item svg {
  width: 20px;
  height: 20px;
}

.rd-tabbar__item.is-active {
  color: var(--rd-text);
  font-weight: 700;
}

/* Ponto de pendencia: ambar = a vencer, vermelho = vencido. */
.rd-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rd-on-navy-warn);
}

.rd-dot--danger {
  background: var(--rd-edge-overdue);
}

.rd-tabbar__dot {
  position: absolute;
  margin: -14px 0 0 15px;
}

@media (max-width: 640px) {
  body {
    padding: 8px 8px 0;
  }

  /* A aba inferior e fixa: o conteudo precisa de folga para nao ficar
     escondido atras dela. */
  .app-shell .content,
  .app-shell .admin-content {
    padding-bottom: calc(var(--rd-tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  }
}

@media (min-width: 641px) {
  .rd-tabbar {
    display: none;
  }
}

/* --- tablet: trilho de 78px so com icones -------------------------------- */

@media (min-width: 641px) and (max-width: 1023px) {
  body {
    padding: 0;
  }

  .app-shell {
    display: grid;
    /* Altura presa a tela (dvh acompanha a barra do navegador no celular):
       o conteudo rola por dentro e o trilho nunca passa da viewport. Isso
       importa na tela deitada, onde sobra pouca altura. */
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    height: 100vh;
    height: 100dvh;
  }

  .app-shell .topbar {
    border-radius: 0;
    border-inline: 0;
    border-top: 0;
  }

  .app-shell .main-grid {
    grid-template-columns: var(--rd-rail-w) minmax(0, 1fr);
    gap: 0;
    /* min-height:0 aqui e no shell deixa o trilho respeitar a altura da
       tela; o conteudo rola por conta propria. */
    min-height: 0;
    overflow: hidden;
  }

  .app-shell .content {
    overflow-y: auto;
  }

  .app-shell .sidebar {
    display: flex;
    flex-direction: column;
    /* nowrap explicito: sem isto, um container mais estreito que o item
       empurraria os icones para uma segunda coluna. */
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    border: 0;
    border-right: 1px solid var(--rd-on-navy-line);
    background: var(--rd-navy);
    overflow-y: auto;
  }

  /* No trilho o rotulo desaparece e sobra o icone de 46x46. */
  .app-shell .sidebar .nav-text,
  .app-shell .sidebar .nav-caret,
  .app-shell .sidebar .nav-submenu {
    display: none;
  }

  .app-shell .sidebar .nav-link {
    position: relative;
    display: grid;
    place-items: center;
    /* flex:none impede que o item encolha ou seja reposicionado; a largura
       fixa mantem o trilho numa coluna unica. */
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--rd-on-navy-muted);
  }

  .app-shell .sidebar .nav-link.is-active {
    background: var(--rd-page);
    color: var(--rd-navy);
  }

  .app-shell .content {
    padding: 16px 18px 28px;
  }
}

/* --- desktop: barra lateral navy de 250px -------------------------------- */

@media (min-width: 1024px) {
  body {
    padding: 0;
  }

  .app-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: none;
    /* Mesma regra do tablet: shell preso a tela, conteudo rolando por
       dentro — a barra lateral acompanha telas baixas (notebook deitado). */
    height: 100vh;
    height: 100dvh;
    margin: 0;
  }

  :root.standalone-mode .app-shell {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .app-shell .topbar {
    border-radius: 0;
    border-inline: 0;
    border-top: 0;
  }

  .app-shell .main-grid {
    grid-template-columns: var(--rd-sidebar-w) minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }

  .app-shell .content {
    overflow-y: auto;
  }

  .app-shell .sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-content: start;
    padding: 16px 12px;
    border: 0;
    border-right: 1px solid var(--rd-on-navy-line);
    background: var(--rd-navy);
    overflow-y: auto;
  }

  /* Sem isto, um item flex com overflow:hidden (o .nav-submenu, que usa
     overflow:hidden para a animacao de abrir/fechar) vira "espremivel": o
     flexbox, tendo altura fixa (.app-shell height:100vh), prefere encolher
     esse item ate caber tudo na tela em vez de deixar o .sidebar rolar —
     mesmo com overflow-y:auto no .sidebar. Com Administracao aberta e o
     submenu com 8 itens (4 de gerenciar + 4 de ferramentas), isso cortava
     o submenu bem antes do fim, sem barra de rolagem nenhuma. flex-shrink:0
     forca o flexbox a manter cada item no tamanho natural e deixar o
     .sidebar (nao os itens) absorver o excesso via scroll. */
  .app-shell .sidebar > * {
    flex-shrink: 0;
  }

  .app-shell .sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--rd-on-navy-muted);
    font-size: 13.5px;
    font-weight: 700;
    transition: background 160ms ease-out, color 160ms ease-out;
  }

  .app-shell .sidebar .nav-link:hover {
    background: rgba(245, 241, 230, 0.08);
    color: var(--rd-on-navy);
  }

  .app-shell .sidebar .nav-link.is-active {
    background: rgba(185, 144, 42, 0.16);
    color: var(--rd-gold-bright);
  }

  .app-shell .sidebar .nav-icon svg,
  .app-shell .sidebar .nav-icon .icon-svg {
    width: 20px;
    height: 20px;
  }

  .app-shell .content {
    padding: 20px 24px 32px;
    min-width: 0;
  }

  /* Titulo de tela cresce no desktop. */
  .rd-title {
    font-size: 29px;
  }
}

/* Ponto de pendencia dentro do item de navegacao. */
.nav-link .rd-dot {
  margin-left: auto;
}

/* Blocos exclusivos da barra lateral de desktop (protótipo): lockup GRL,
   seletor de empresa e rodape com usuario + sino. Fora do desktop, a topbar
   segue cumprindo esses papeis. */
.rd-sidebrand,
.rd-sidecompany,
.rd-sidefoot {
  display: none;
}

@media (min-width: 1024px) {
  /* No desktop a topbar sai de cena: a barra lateral assume logo, empresa e
     usuario, como no protótipo (que nao tem topbar). */
  .app-shell > .topbar {
    display: none;
  }

  .app-shell {
    grid-template-rows: minmax(0, 1fr);
  }

  .rd-sidebrand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 8px 18px;
  }

  .rd-sidebrand__logo {
    height: 38px;
    width: auto;
  }

  .rd-sidebrand__text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
  }

  .rd-sidebrand__text small {
    display: block;
    font-size: 10.5px;
    color: rgba(245, 241, 230, 0.45);
  }

  .rd-sidecompany {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 18px;
    padding: 11px 8px 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
  }

  .rd-sidecompany-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .rd-sidecompany__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(185, 144, 42, 0.16);
    color: var(--rd-gold-bright);
  }

  .rd-sidecompany select {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
  }

  .rd-sidecompany select option {
    color: var(--rd-text);
  }

  .rd-sidecompany__caret-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(245, 241, 230, 0.55);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .rd-sidecompany__caret-btn:hover,
  .rd-sidecompany__caret-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .rd-sidecompany__caret-btn[aria-expanded="true"] .rd-sidecompany__caret {
    transform: rotate(180deg);
  }

  .rd-sidecompany__caret {
    flex: none;
    transition: transform 0.15s;
    color: rgba(245, 241, 230, 0.55);
  }

  .rd-sidefoot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 14px 2px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .rd-sidefoot__user {
    flex: 1;
    min-width: 0;
    position: relative;
  }

  .rd-sidefoot__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    cursor: pointer;
    text-align: left;
  }

  .rd-sidefoot__trigger:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .rd-sidefoot__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(185, 144, 42, 0.45);
    background: linear-gradient(150deg, #3a3f63, #22263f);
    color: #e8dfc8;
    font-size: 11.5px;
    font-weight: 700;
    overflow: hidden;
  }

  .rd-sidefoot__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .rd-sidefoot__id {
    min-width: 0;
    flex: 1;
  }

  .rd-sidefoot__id strong {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rd-sidefoot__id small {
    display: block;
    font-size: 10px;
    color: rgba(245, 241, 230, 0.45);
  }

  .rd-sidefoot__bell {
    position: relative;
  }

  /* Paineis do rodape: posicao FIXA, nao absoluta.
     Dois motivos: a barra lateral rola (overflow-y:auto) e recortaria um
     painel absoluto; e o sino fica a ~220px da borda, entao alinhar pela
     direita jogava o painel de 330px para fora da tela pela esquerda.
     Fixo na base esquerda, ele abre para dentro do conteudo e cabe sempre. */
  .rd-sidefoot .rd-sidefoot__panel {
    position: fixed;
    top: auto;
    bottom: 88px;
    left: 12px;
    right: auto;
    width: min(330px, calc(100vw - 24px));
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: min(60vh, 520px);
    overflow-y: auto;
  }
}

/* Submenu do modulo aberto na barra lateral (handoff 2.2). So existe
   visualmente no desktop: o trilho do tablet e o mobile o escondem. */
.rd-navsub {
  display: none;
}

@media (min-width: 1024px) {
  .app-shell .sidebar .rd-navsub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 4px;
    padding-left: 29px;
  }

  .app-shell .sidebar .rd-navsub__link {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    color: rgba(245, 241, 230, 0.62);
    font-size: 12.5px;
    text-decoration: none;
  }

  .app-shell .sidebar .rd-navsub__link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--rd-on-navy);
  }

  .app-shell .sidebar .rd-navsub__link.is-active {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    font-weight: 700;
  }
}

/* ===========================================================================
   3. Barra de competencia
   ---------------------------------------------------------------------------
   Regra do handoff: o periodo fica em barra fixa logo abaixo do cabecalho,
   nunca dentro do conteudo; a acao primaria do admin (Enviar/Publicar) fica na
   mesma barra, a direita.
   =========================================================================== */

.rd-periodbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(43, 35, 24, 0.14);
  background: rgba(242, 236, 224, 0.95);
  backdrop-filter: blur(10px);
}

.rd-periodbar__spacer {
  flex: 1;
}

/* Pill que mostra a competencia e abre o seletor de periodo. */
.rd-periodbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--rd-line);
  border-radius: 11px;
  background: var(--rd-card);
  color: var(--rd-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.rd-periodbar__pill svg {
  flex: none;
}

.rd-periodbar__caret {
  color: var(--rd-text-2);
}

/* Acao primaria do admin (Enviar / Publicar) e acoes de apoio da barra. */
.rd-periodbar__action {
  border: 0;
  background: transparent;
  color: var(--rd-gold);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 640px) {
  .rd-periodbar__pill {
    min-height: 44px;
  }
}

/* ===========================================================================
   4. Cartoes, heroes e numeros
   =========================================================================== */

.rd-card {
  padding: 16px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
}

.rd-card__title {
  margin: 0;
  font-family: var(--rd-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--rd-text);
}

.rd-hero {
  padding: 18px;
  border-radius: var(--rd-radius-card-lg);
  background: var(--rd-navy-surface);
  color: var(--rd-on-navy);
}

/* Cartao com estado: borda esquerda ambar (a vencer / em destaque). */
.rd-card--due {
  border-left: 3px solid var(--rd-edge-due);
}

/* Hero de erro/atraso: total consolidado, honorario vencido. */
.rd-hero--danger {
  background: var(--rd-hero-danger-bg);
}

.rd-hero__value {
  margin: 4px 0 0;
  font-size: 27px;
  line-height: 1.1;
  color: #fff;
}

.rd-hero__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-on-navy-muted);
}

.rd-hero__note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--rd-on-navy-muted);
}

/* Carga tributaria efetiva em destaque no cartao do valor das guias
   (Impostos) -- ver impostos-card-carga-wrap em list_monthly.html. */
.rd-hero__badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--rd-gold-bright);
  color: var(--rd-navy);
}

/* O display acima vence o [hidden]{display:none} do user-agent (regra de
   autor sempre ganha da UA) -- sem esta trava o selo aparecia com o "0,00%"
   placeholder pra empresa sem declaracao validada. Mesma pegadinha ja
   resolvida em .documents-selection-bar[hidden] (app.css). */
.rd-hero__badge[hidden] {
  display: none !important;
}

.rd-hero__badge-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rd-hero__badge strong {
  font-size: 15px;
  font-weight: 800;
}

/* Guias a recolher no hero da Folha (Guia Prev / FGTS): pilulas com borda
   dourada, DIFERENTES da composicao Colaboradores/Pro-labore ao lado -- e' o
   que a empresa paga, nao o custo. O [hidden] precisa da trava porque o
   display de autor vence o da UA (mesma pegadinha do .rd-hero__badge). */
.rd-folha-guias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.rd-folha-guias[hidden],
.rd-folha-guia[hidden] {
  display: none !important;
}

.rd-folha-guia {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--rd-gold-bright);
  background: rgba(232, 179, 74, 0.14);
  color: var(--rd-on-navy);
}

.rd-folha-guia__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-gold-bright);
}

.rd-folha-guia strong {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rd-hero__split {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rd-on-navy-line);
}

/* Nota + botao da memoria de calculo, fora do cartao navy (fundo branco do
   painel) -- ver impostos-card-carga-nota/impostos-memoria-calculo-btn em
   list_monthly.html. */
.impostos-carga-nota {
  margin-top: 12px;
}

.impostos-memoria-calculo-btn {
  margin-top: 8px;
}

.rd-hero__split-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--rd-on-navy-muted);
}

.rd-hero__split-row strong {
  font-weight: 700;
  color: var(--rd-on-navy);
}

@media (min-width: 1024px) {
  .rd-hero__value {
    font-size: 38px;
  }
}

/* Indicador numerico. */
.rd-stat {
  padding: 14px 16px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
}

.rd-stat__value {
  margin: 2px 0 0;
  font-size: 27px;
  line-height: 1.1;
  color: var(--rd-text);
}

.rd-stat__note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--rd-text-2);
}

@media (min-width: 1024px) {
  .rd-stat__value {
    font-size: 38px;
  }
}

/* auto-fit e nao um numero fixo de colunas: a terceira metrica ("Última
   paga") so existe depois da primeira competencia quitada, e com duas
   colunas fixas ela cairia sozinha numa segunda linha. */
.rd-statrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* Duas colunas do desktop (1.4fr 1fr) com a tabela ocupando o resto. */
.rd-split {
  display: grid;
  gap: 14px;
}

@media (min-width: 1024px) {
  .rd-split {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

/* ===========================================================================
   5. Badges de status
   =========================================================================== */

.rd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--rd-neutral-line);
  border-radius: var(--rd-radius-pill);
  background: var(--rd-neutral-bg);
  color: var(--rd-neutral-text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.rd-badge--ok {
  border-color: var(--rd-ok-line);
  background: var(--rd-ok-bg);
  color: var(--rd-ok-text);
}

.rd-badge--warn {
  border-color: var(--rd-warn-line);
  background: var(--rd-warn-bg);
  color: var(--rd-warn-text);
}

.rd-badge--danger {
  border-color: var(--rd-danger-line);
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.rd-badge--info {
  border-color: var(--rd-info-line);
  background: var(--rd-info-bg);
  color: var(--rd-info-text);
}

/* Selo de item interno: "Restrito" nos livros fiscais. */
.rd-badge--restricted {
  border-color: var(--rd-line-strong);
  background: var(--rd-soft);
  color: var(--rd-text-support);
}

/* ===========================================================================
   6. Linha de documento (handoff 2.3)
   ---------------------------------------------------------------------------
     [ selo 32x38 ] Titulo legivel              [ acao primaria ] [ menu ]
                    Estado / valor / vencimento
                    nome_cru_no_drive.pdf
   =========================================================================== */

.rd-doclist {
  display: grid;
  gap: 8px;
}

/* .rd-doc fixa "display: grid" sem guarda pra [hidden] — regra de autor
   sempre vence o [hidden] padrao do navegador (que e so da UA stylesheet),
   entao "item.hidden = true" no JS nunca escondia a linha de verdade. Isso
   ja afetava a busca/chips de notas_filter.js antes da paginacao existir;
   com paginacao ficou visivel (paginas trocavam o rotulo mas mostravam
   sempre as mesmas linhas). */
.rd-doc[hidden] {
  display: none !important;
}

/* Notas fiscais: competencia tem 30+ notas — a lista rola dentro de uma
   altura fixa em vez de esticar a pagina inteira (a paginacao acima, em
   notas_filter.js, ja limita a 15 por vez; o scroll cobre paginas com
   notas mais altas que o viewport, ex.: mobile). So aqui — nao mexe nas
   outras listas que reusam .rd-doclist (contabil, pessoal, societario). */
[data-notas-list] {
  max-height: min(70vh, 720px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.rd-notas-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}

.rd-notas-pagination[hidden] {
  display: none !important;
}

.rd-notas-pagination__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--rd-text-2);
  white-space: nowrap;
}

.rd-notas-pagination .btn-inline:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Cabecalho de grupo dentro da lista (Folha: Guias / Recibos / Relatorios). */
.rd-doclist__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 2px 2px 0;
}

.rd-doclist__heading:first-child {
  margin-top: 0;
}

.rd-doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--rd-line);
  border-left: 3px solid transparent;
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
}

.rd-doc--overdue {
  border-left-color: var(--rd-edge-overdue);
}

.rd-doc--due {
  border-left-color: var(--rd-edge-due);
}

/* Caixa de selecao (quando ligada) fica junto do selo, na mesma coluna. */
.rd-doc__lead {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Selo de tipo com a extensao. */
.rd-filetag {
  display: grid;
  place-items: center;
  width: 32px;
  height: 38px;
  border-radius: var(--rd-radius-filetag);
  background: var(--rd-neutral-bg);
  color: var(--rd-text-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rd-filetag--pdf {
  background: #fbeeea;
  color: #9a3b26;
}

.rd-filetag--sheet {
  background: #eef5ef;
  color: #3f6b4a;
}

.rd-filetag--xml {
  background: #eef5ef;
  color: #3f6b4a;
}

.rd-filetag--ofx {
  background: var(--rd-info-bg);
  color: var(--rd-info-text);
}

/* Bloco NFSE / 395 da linha de nota fiscal: o numero e o que identifica a
   nota, entao ele fica maior que a sigla. */
.rd-notatag {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 46px;
  height: 38px;
  padding: 0 6px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-filetag);
  background: var(--rd-soft);
}

.rd-notatag__kind {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rd-text-2);
}

.rd-notatag__number {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rd-text);
  font-variant-numeric: tabular-nums;
}

.rd-doc__body {
  min-width: 0;
}

/* O titulo nunca e o nome do arquivo do Drive. */
.rd-doc__title {
  margin: 0;
  font-family: var(--rd-sans);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--rd-text);
}

.rd-doc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--rd-text-2);
}

/* Terceira linha: o nome cru no Drive. */
.rd-doc__filename {
  display: block;
  margin: 4px 0 0;
  overflow: hidden;
  font-size: 11px;
  color: var(--rd-text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Edicao inline de valor/status da nota (admin only). */
.rd-nota-value-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--rd-line-strong);
  border-radius: 7px;
  background: var(--rd-card);
  color: var(--rd-text-2);
  cursor: pointer;
}

.rd-nota-value-edit:hover {
  color: var(--rd-text);
  border-color: var(--rd-text-2);
}

.rd-nota-value-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
}

.rd-nota-value-form[hidden] {
  display: none !important;
}

.rd-nota-value-form__value,
.rd-nota-value-form__status {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12.5px;
}

.rd-nota-value-form__value {
  width: 110px;
}

.rd-nota-value-form .btn-inline {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.rd-doc__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rd-doc__select {
  display: grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
}

/* --- botoes -------------------------------------------------------------- */

.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rd-line-strong);
  border-radius: var(--rd-radius-field);
  background: var(--rd-card);
  color: var(--rd-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}

.rd-btn:hover {
  background: var(--rd-soft);
}

.rd-btn--primary {
  border-color: var(--rd-gold);
  background: var(--rd-gold);
  color: #fff;
}

.rd-btn--primary:hover {
  border-color: #7d5d16;
  background: #7d5d16;
}

.rd-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--rd-gold);
}

.rd-btn--ghost:hover {
  background: var(--rd-soft);
}

@media (max-width: 640px) {
  /* Alvo de toque minimo de 44px no mobile. */
  .rd-btn {
    min-height: 44px;
  }
}

/* --- menu de acoes secundarias (⋮) -------------------------------------- */

.rd-menu {
  position: relative;
}

.rd-menu__trigger {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rd-radius-field);
  background: transparent;
  color: var(--rd-text-2);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.rd-menu__trigger:hover {
  border-color: var(--rd-line);
  background: var(--rd-soft);
}

.rd-menu__panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 13px;
  background: var(--rd-card);
  box-shadow: 0 14px 32px rgba(20, 17, 12, 0.18);
}

/* Linha perto do fim da lista: abrir pra baixo cortaria o painel no limite
   do .app-shell/.admin-shell (que usa overflow:hidden pras bordas
   arredondadas do "shell" mobile). documents_menu.js mede o espaco
   disponivel e liga esta classe pra abrir pra CIMA em vez de baixo. */
.rd-menu__panel--up {
  top: auto;
  bottom: calc(100% + 4px);
}

.rd-menu__panel[hidden] {
  display: none;
}

.rd-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--rd-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.rd-menu__item:hover {
  background: var(--rd-soft);
}

.rd-menu__item--danger {
  color: var(--rd-danger-text);
}

.rd-menu__form {
  display: contents;
}

@media (max-width: 640px) {
  .rd-menu__trigger {
    min-height: 44px;
  }

  .rd-menu__item {
    min-height: 44px;
  }
}

/* ===========================================================================
   7. Tabela (a mesma informacao da linha, no desktop)
   =========================================================================== */

.rd-tablewrap {
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
  overflow: hidden;
}

/* Quando a tabela e irma de um bloco que cresce livre, o container das linhas
   precisa de min-height:0, senao a tabela desaparece. */
.rd-tablewrap--flex {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rd-table {
  width: 100%;
  border-collapse: collapse;
}

.rd-table th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rd-line);
  background: var(--rd-soft);
  color: var(--rd-text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.rd-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--rd-line-soft);
  font-size: 13px;
  vertical-align: middle;
}

.rd-table tbody tr:last-child td {
  border-bottom: 0;
}

.rd-table tbody tr {
  transition: background 160ms ease-out;
}

.rd-table tbody tr:hover {
  background: var(--rd-soft);
}

.rd-table__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rd-text);
}

.rd-table__sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--rd-text-3);
}

.rd-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Rodape "Ver os N itens" quando renderizamos menos linhas por falta de
   espaco vertical. */
.rd-table__more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-top: 1px solid var(--rd-line);
  background: var(--rd-soft);
  color: var(--rd-gold);
  font-size: 12.5px;
  font-weight: 700;
}

/* ===========================================================================
   8. Estados: vazio, carregando, erro
   =========================================================================== */

/* Vazio: a frase diz o que fazer, nao "nenhum registro". */
.rd-empty {
  display: grid;
  gap: 6px;
  padding: 26px 18px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
  text-align: center;
}

.rd-empty__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--rd-text);
}

.rd-empty__text {
  margin: 0 auto;
  max-width: 42ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rd-text-2);
}

.rd-empty__actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

/* Carregando: esqueleto com a forma do conteudo, nunca spinner central. */
.rd-skeleton {
  display: grid;
  gap: 8px;
}

.rd-skeleton__bar {
  height: 12px;
  border-radius: 6px;
  background: rgba(43, 35, 24, 0.06);
  animation: rd-pulse 1.4s ease-in-out infinite;
}

.rd-skeleton__row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
}

.rd-skeleton__tag {
  width: 32px;
  height: 38px;
  border-radius: var(--rd-radius-filetag);
  background: rgba(43, 35, 24, 0.06);
  animation: rd-pulse 1.4s ease-in-out infinite;
}

@keyframes rd-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-skeleton__bar,
  .rd-skeleton__tag {
    animation: none;
  }
}

/* Erro: faixa com acao de repetir. */
.rd-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--rd-line);
  border-radius: 13px;
  background: var(--rd-neutral-bg);
  color: var(--rd-text);
}

.rd-alert__title {
  font-size: 12.5px;
  font-weight: 700;
}

.rd-alert__text {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--rd-text-support);
}

.rd-alert--danger {
  border-color: var(--rd-danger-line);
  background: var(--rd-danger-bg);
}

.rd-alert--danger .rd-alert__title {
  color: var(--rd-danger-text);
}

/* Leitura automatica que falhou: aviso ambar + campo para informar a mao.
   Hoje esse caso falha em silencio no Fiscal e no Societario. */
.rd-alert--warn {
  border-color: var(--rd-warn-line);
  background: var(--rd-warn-bg);
}

.rd-alert--warn .rd-alert__title {
  color: var(--rd-warn-text);
}

.rd-alert--info {
  border-color: var(--rd-info-line);
  background: var(--rd-info-bg);
}

.rd-alert--info .rd-alert__title {
  color: var(--rd-info-text);
}

.rd-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Campo de correcao manual embutido na propria linha. */
.rd-inlinefix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.rd-input {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rd-line-strong);
  border-radius: var(--rd-radius-field);
  background: var(--rd-card);
  color: var(--rd-text);
  font-family: inherit;
  font-size: 13px;
}

.rd-input::placeholder {
  color: #b8ae9c;
}

@media (max-width: 640px) {
  /* Campos de formulario no mobile: 48px. */
  .rd-input {
    min-height: 48px;
  }
}

/* ===========================================================================
   9. Abas de secao
   =========================================================================== */

.rd-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rd-line);
}

.rd-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--rd-text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.rd-tab.is-active {
  border-bottom-color: var(--rd-gold);
  color: var(--rd-text);
}

.rd-tab__count {
  padding: 1px 7px;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-neutral-bg);
  color: var(--rd-text-2);
  font-size: 11px;
}

/* Chips de filtro. */
.rd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--rd-line-strong);
  border-radius: var(--rd-radius-pill);
  background: var(--rd-card);
  color: var(--rd-text-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.rd-chip.is-active {
  border-color: var(--rd-navy);
  background: var(--rd-navy);
  color: var(--rd-on-navy);
}

@media (max-width: 640px) {
  .rd-chip {
    min-height: 40px;
  }
}

/* ===========================================================================
   10. Barra flutuante de selecao multipla
   =========================================================================== */

/* A barra de selecao ja existe em list_monthly/list_yearly com a classe
   .documents-selection-bar e o JS de documents_share.js. Aqui ela so ganha a
   forma flutuante navy do redesenho — nenhum data attribute muda. */
.rd-selectbar,
.documents-selection-bar {
  position: fixed;
  z-index: 70;
  bottom: calc(var(--rd-tabbar-h) + env(safe-area-inset-bottom, 0px) + 10px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(calc(100% - 24px), 44rem);
  padding: 10px 12px;
  border-radius: 15px;
  background: var(--rd-navy);
  color: var(--rd-on-navy);
  box-shadow: 0 14px 32px rgba(15, 24, 48, 0.28);
  transform: translateX(-50%);
}

.rd-selectbar[hidden],
.documents-selection-bar[hidden] {
  display: none;
}

.rd-selectbar__count,
.documents-selection-bar__count {
  flex: 1;
  color: var(--rd-on-navy);
  font-size: 13px;
  font-weight: 700;
}

/* Botoes herdados dentro da barra: sobre navy eles precisam de contorno claro. */
.documents-selection-bar .btn-inline {
  border-color: rgba(245, 241, 230, 0.24);
  background: rgba(245, 241, 230, 0.1);
  color: var(--rd-on-navy);
}

.documents-selection-bar .btn-inline:hover {
  background: rgba(245, 241, 230, 0.18);
}

.documents-selection-bar .btn-primary {
  border-color: var(--rd-gold-bright);
  background: var(--rd-gold-bright);
  color: var(--rd-navy);
}

@media (min-width: 641px) {
  .rd-selectbar,
  .documents-selection-bar {
    bottom: 16px;
  }
}

/* ===========================================================================
   11. Folha modal (mobile) / dialogo (desktop)
   =========================================================================== */

.rd-sheet {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.rd-sheet[hidden] {
  display: none;
}

.rd-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 12, 0.42);
}

.rd-sheet__panel {
  position: relative;
  width: 100%;
  max-height: 88vh;
  padding: 18px;
  border-radius: 20px 20px 0 0;
  background: var(--rd-card);
  box-shadow: var(--rd-shadow-sheet);
  overflow-y: auto;
  animation: rd-sheet-in 200ms ease-out;
}

@keyframes rd-sheet-in {
  from {
    transform: translateY(14px);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-sheet__panel {
    animation: none;
  }
}

.rd-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

@media (min-width: 641px) {
  .rd-sheet {
    align-items: center;
  }

  .rd-sheet__panel {
    width: min(100%, 34rem);
    max-height: 84vh;
    border-radius: 18px;
    animation: none;
  }
}

/* ===========================================================================
   12. Area de upload
   =========================================================================== */

.rd-dropzone {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px dashed var(--rd-upload-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-upload-bg);
  text-align: center;
}

/* A zona de arraste tinha VERDE de um design anterior ao redesenho
   (app.css: título #17342f, ícone e borda em rgba(11,93,79,...)). O
   redesenho trocou fundo e borda pelos tokens --rd-upload-*, mas nunca o
   texto: verde-escuro sobre creme passa despercebido, e sobre o navy do
   modo noturno ele sumia — contraste 1,23 medido, ou seja, "Arraste os
   arquivos aqui" invisível em toda ficha que aceita upload. */
.upload-zone__title {
  color: var(--rd-text);
}

.upload-zone__sub {
  color: var(--rd-text-2);
}

.upload-zone__icon {
  color: var(--rd-gold);
}

.upload-zone {
  border-color: var(--rd-upload-line);
  background: var(--rd-upload-bg);
  box-shadow: none;
}

.upload-zone:hover,
.upload-zone.is-dragover {
  border-color: var(--rd-gold);
  background: var(--rd-upload-bg);
  box-shadow: 0 8px 20px rgba(16, 25, 47, 0.08);
}

/* O input de arquivo da zona de arraste tem que ser 1x1 invisivel — quem
   abre o seletor e o proprio label (.upload-zone) ou showPicker() no JS.
   app.css ja tentava isso em .upload-zone__input, mas mobile_parity.css vem
   DEPOIS com `.upload-form input[type="file"] { width: 100% }` (0,2,1 contra
   0,1,0) e devolvia ao input a largura inteira do cartao: mesmo com
   opacity:0 e position:absolute, ele continuava contando na largura rolavel
   e criava uma BARRA DE ROLAGEM HORIZONTAL em toda ficha com upload
   (Balancete, Impostos, Folha, Notas...). Este seletor (0,3,1) vence a regra
   de largura sem !important. Parente do vazamento ja documentado no botao
   "Tudo" (CLAUDE.md, upload em lote). */
.upload-form input.upload-zone__input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  min-width: 0;
  max-width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Resultado por arquivo depois do envio. */
.rd-uploadresult {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.rd-uploadresult__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--rd-line);
  border-radius: 11px;
  background: var(--rd-card);
  font-size: 12.5px;
}

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

/* Grafico de notas (handoff 3.2): altura fixa, legenda compacta no alto.
   Chart.js com maintainAspectRatio:false usa a altura do container. */
[data-fiscal-notas-dashboard] {
  height: 150px;
}

@media (max-width: 640px) {
  [data-fiscal-notas-dashboard] {
    height: 118px;
  }
}

/* ===========================================================================
   13. Barra de vigencia (Societario)
   =========================================================================== */

.rd-validity {
  height: 6px;
  border-radius: var(--rd-radius-pill);
  background: rgba(43, 35, 24, 0.08);
  overflow: hidden;
}

.rd-validity__fill {
  height: 100%;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-ok-text);
}

.rd-validity__fill--warn {
  background: var(--rd-edge-due);
}

.rd-validity__fill--danger {
  background: var(--rd-edge-overdue);
}

/* ===========================================================================
   14. Tela de entrada (handoff 3.9)
   ---------------------------------------------------------------------------
   Fundo navy da marca com glows dourados, logo maior, cartao branco com
   campos de 48px. No desktop a metade esquerda descreve o portal.
   =========================================================================== */

.rd-login {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  margin: -12px;
  padding: 70px 18px 30px;
  background: var(--rd-navy-surface);
  overflow: hidden;
}

.rd-login__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.rd-login__glow--top {
  top: -130px;
  left: -90px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(185, 144, 42, 0.18), transparent 68%);
}

.rd-login__glow--bottom {
  right: -100px;
  bottom: -150px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(185, 144, 42, 0.1), transparent 70%);
}

/* Metade esquerda do desktop; escondida no mobile. */
.rd-login__intro {
  display: none;
}

.rd-login__main {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 26rem);
  min-height: calc(100vh - 100px);
}

.rd-login__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}

.rd-login__logo {
  display: block;
  width: auto;
  height: 64px;
}

.rd-login__title {
  margin: 16px 0 0;
  font-family: var(--rd-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
}

.rd-login__subtitle {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(245, 241, 230, 0.6);
  text-align: center;
}

.rd-login__card {
  flex: none;
  margin-top: 26px;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.28);
}

.rd-login__form {
  display: grid;
  gap: 14px;
}

.rd-login__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rd-text);
}

.rd-login__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.rd-login__label-row .rd-login__label {
  margin-bottom: 6px;
}

/* "Esqueci a senha" mora ao lado do rotulo Senha, nao no rodape. */
.rd-login__forgot {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rd-gold);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.rd-login__input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(43, 35, 24, 0.2);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
}

.rd-login__hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--rd-text-2);
}

.rd-login__submit {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font-size: 14.5px;
}

.rd-login__status {
  color: var(--rd-text-2);
  font-size: 11.5px;
}

.rd-login__divider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rd-login__divider::before,
.rd-login__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rd-line);
}

.rd-login__divider span {
  color: var(--rd-text-3);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rd-login__google {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font-size: 13.5px;
}

.rd-login__forgot-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rd-line);
}

.rd-login__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 22px;
  font-size: 12px;
  color: rgba(245, 241, 230, 0.6);
}

.rd-login__footer a {
  color: var(--rd-gold-bright);
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .rd-login {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 72px;
    padding: 40px;
  }

  .rd-login__intro {
    display: block;
    max-width: 24rem;
  }

  .rd-login__intro-logo {
    height: 56px;
    width: auto;
  }

  .rd-login__intro-title {
    margin: 20px 0 0;
    font-family: var(--rd-serif);
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
  }

  .rd-login__intro-list {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(245, 241, 230, 0.72);
    font-size: 14px;
    line-height: 1.5;
  }

  .rd-login__intro-list li {
    display: flex;
    gap: 10px;
  }

  .rd-login__intro-list li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--rd-gold-bright);
  }

  .rd-login__main {
    min-height: 0;
  }

  /* No desktop a marca ja esta na metade esquerda. */
  .rd-login__brand {
    display: none;
  }

  .rd-login__footer {
    margin-top: 22px;
  }
}

/* ===========================================================================
   15. Home do cliente (handoff 3.1)
   ---------------------------------------------------------------------------
   A home e uma visao do mes, nao um menu: vencimento + gestor lado a lado
   (desktop), atalhos em cartoes, e os modulos em cartoes brancos com icone
   navy em tile — sem barra colorida decorativa. Mobile empilha tudo;
   tablet usa 2 colunas na grade de modulos; desktop, 3.
   =========================================================================== */

.rd-home {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Cabecalho: Ola em serif com o traco dourado; data a direita no desktop. */
.rd-home__head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.rd-home__greeting {
  flex: 1;
  min-width: 0;
}

.rd-home__title {
  margin: 4px 0 0;
  font-family: var(--rd-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rd-text);
}

.rd-home__title::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-top: 9px;
  border-radius: 2px;
  background: var(--rd-gold-bright);
}

/* Data e hora em cartao proprio, para nao se perder ao lado do titulo. */
.rd-home__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
  white-space: nowrap;
}

.rd-home__date-day {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-text-2);
}

.rd-home__date-full {
  font-family: var(--rd-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rd-text);
}

.rd-home__date-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--rd-gold);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .rd-home__date {
    align-items: flex-end;
  }
}

/* Linha vencimento + gestor: empilhada; vira 1.35fr/1fr no desktop. */
.rd-home__toprow {
  display: grid;
  gap: 14px;
}

/* Cartao navy do vencimento. */
.rd-home__due {
  position: relative;
  padding: 22px;
  border-radius: 18px;
  background: var(--rd-navy);
  color: var(--rd-on-navy);
  overflow: hidden;
}

.rd-home__due::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(185, 144, 42, 0.1);
}

.rd-home__due-status {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-on-navy-warn);
}

.rd-home__due--overdue .rd-home__due-status {
  color: var(--rd-on-navy-danger);
}

.rd-home__due-status .rd-dot {
  background: currentColor;
}

.rd-home__due-body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 28px;
  margin-top: 12px;
}

.rd-home__due-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(245, 241, 230, 0.62);
}

.rd-home__due-title {
  margin: 3px 0 0;
  font-family: var(--rd-serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
}

.rd-home__due-when small {
  display: block;
  font-size: 11px;
  color: rgba(245, 241, 230, 0.5);
}

.rd-home__due-when strong {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.rd-home__due-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

/* Botoes sobre navy: primario dourado, secundario contornado claro. */
.rd-home__due .rd-btn {
  border-color: rgba(245, 241, 230, 0.24);
  background: transparent;
  color: var(--rd-page);
  min-height: 42px;
}

.rd-home__due .rd-btn:hover {
  background: rgba(245, 241, 230, 0.1);
}

.rd-home__due .rd-btn--primary {
  border-color: var(--rd-gold-bright);
  background: var(--rd-gold-bright);
  color: var(--rd-navy);
}

.rd-home__due .rd-btn--primary:hover {
  border-color: #a77f22;
  background: #a77f22;
}

/* Cartao do gestor. */
.rd-home__gestor {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--rd-line);
  border-radius: 18px;
  background: var(--rd-card);
}

.rd-home__gestor-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rd-home__gestor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--rd-navy);
  color: var(--rd-gold-bright);
}

/* Miolo do cartao do Gestor: chega por fetch depois do render (ver
   app.js:initHomeGestorResumo). Enquanto nao chega, o texto de fallback ja
   esta na tela — so fica levemente esmaecido, sem esqueleto nem salto de
   layout. */
.rd-home__gestor-body {
  /* `contents` de proposito: o wrapper nao gera caixa, entao os filhos
     continuam participando do flex do cartao exatamente como antes de o
     miolo virar um fragmento carregado a parte — zero mudanca de layout. */
  display: contents;
}

.rd-home__gestor-text {
  flex: 1;
  margin: 13px 0 0;
  font-family: var(--rd-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--rd-text);
}

/* Respostas básicas do mês (impostos/parcelamento/folha), calculadas em
   Python — sem abrir o chat nem gastar token. */
.rd-home__gestor-facts {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rd-home__gestor-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rd-line-soft);
}

.rd-home__gestor-fact:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rd-home__gestor-fact-label {
  font-size: 12.5px;
  color: var(--rd-text-2);
}

.rd-home__gestor-fact-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--rd-text);
}

.rd-home__gestor-fact-note {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--rd-text-2);
}

/* Alerta semanal: dívida de curto prazo crescendo, parcelamento com risco
   de cancelamento etc. — nível "alto" (danger) chama mais atenção que
   "médio" (warn). */
.rd-home__gestor-alert {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--rd-warn-line);
  background: var(--rd-warn-bg);
  color: var(--rd-warn-text);
}

.rd-home__gestor-alert--danger {
  border-color: var(--rd-danger-line);
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.rd-home__gestor-alert strong {
  display: block;
  font-size: 13px;
}

.rd-home__gestor-alert p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.rd-home__gestor-alert-more {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  opacity: .85;
}

/* Os demais alertas (dentro do <details> do primeiro): cada um com a cor do
   PRÓPRIO nível — sem isto herdavam a caixa do primeiro, e a lista saía com
   marcador e o recuo de 40px do navegador num cartão de ~340px. */
.rd-home__gestor-alert-more > summary {
  cursor: pointer;
}

.rd-home__gestor-alert-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.rd-home__gestor-alert-item {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--rd-warn-line);
  background: var(--rd-warn-bg);
  color: var(--rd-warn-text);
  font-weight: 400;
}

.rd-home__gestor-alert-item--danger {
  border-color: var(--rd-danger-line);
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.rd-home__gestor-alert-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
}

.rd-home__gestor-actions {
  display: flex;
  gap: 9px;
  margin-top: 17px;
}

.rd-home__gestor-actions .rd-btn {
  min-height: 42px;
}

.rd-home__gestor-actions .rd-btn--navy {
  flex: 1;
  border-color: var(--rd-navy);
  background: var(--rd-navy);
  color: #fff;
}

.rd-home__gestor-actions .rd-btn--navy:hover {
  border-color: #1a2745;
  background: #1a2745;
}

/* Atalhos: cartoes brancos com icone. Mobile = 3 colunas compactas
   (icone em cima); desktop = cartoes horizontais na mesma faixa. */
.rd-home__shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.rd-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 8px;
  border: 1px solid var(--rd-line);
  border-radius: 14px;
  background: var(--rd-card);
  color: var(--rd-text);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.rd-shortcut:hover {
  background: var(--rd-soft);
}

.rd-shortcut__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(16, 25, 47, 0.06);
  color: var(--rd-navy);
}

.rd-shortcut__icon .icon-svg,
.rd-shortcut__icon svg {
  width: 17px;
  height: 17px;
}

/* Rotulo de secao + grade de modulos. */
.rd-home__sectionrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: -6px;
}

.rd-home__modules {
  display: grid;
  gap: 10px;
}

/* Cartao de modulo do redesenho: icone navy em tile, sem barra colorida
   decorativa — cor so onde ha status (badges). */
.rd-modcard {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--rd-line);
  border-radius: 16px;
  background: var(--rd-card);
  color: var(--rd-text);
  text-decoration: none;
  transition: background 160ms ease-out;
}

.rd-modcard:hover {
  background: var(--rd-soft);
}

.rd-modcard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(16, 25, 47, 0.08);
  color: var(--rd-navy);
}

.rd-modcard__icon .icon-svg,
.rd-modcard__icon svg {
  width: 18px;
  height: 18px;
}

.rd-modcard__body {
  flex: 1;
  min-width: 0;
}

.rd-modcard__toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rd-modcard__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rd-text);
}

.rd-modcard__chevron {
  flex: none;
  color: #b9b2a3;
}

.rd-modcard__desc {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--rd-text-support);
}

.rd-modcard__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.rd-modcard__badges:empty {
  display: none;
}

.rd-home__footer {
  margin-top: 4px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--rd-text-2);
}

/* --- tablet: grade de modulos em 2 colunas --------------------------------- */

@media (min-width: 641px) {
  .rd-home__modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .rd-home__shortcuts {
    gap: 14px;
  }

  .rd-shortcut {
    flex-direction: row;
    justify-content: flex-start;
    padding: 15px;
    gap: 11px;
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
  }
}

/* --- desktop: protótipo 13a — vencimento e gestor lado a lado -------------- */

@media (min-width: 1024px) {
  .rd-home {
    gap: 18px;
  }

  .rd-home__title {
    font-size: 30px;
  }

  .rd-home__toprow {
    grid-template-columns: 1.35fr 1fr;
    gap: 18px;
  }

  .rd-home__due-title {
    font-size: 34px;
  }

  .rd-home__gestor-text {
    font-size: 19px;
  }

  .rd-home__modules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===========================================================================
   16. Balancete (Contabil) — hero navy com resultado e tiles
   =========================================================================== */

.rd-balhero {
  position: relative;
  padding: 22px;
  border-radius: 18px;
  background: var(--rd-navy);
  color: var(--rd-on-navy);
  overflow: hidden;
}

.rd-balhero::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(185, 144, 42, 0.08);
}

.rd-balhero__label {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 241, 230, 0.5);
}

.rd-balhero__value {
  position: relative;
  margin: 5px 0 0;
  font-family: var(--rd-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
}

.rd-balhero__status {
  position: relative;
  margin: 4px 0 0;
  font-size: 12.5px;
  color: rgba(245, 241, 230, 0.62);
}

.rd-balhero__tiles {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.rd-balhero__tile {
  min-width: 132px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.rd-balhero__tile small {
  display: block;
  font-size: 10.5px;
  color: rgba(245, 241, 230, 0.55);
}

.rd-balhero__tile strong {
  display: block;
  margin-top: 3px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.rd-balhero__tile span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: rgba(245, 241, 230, 0.4);
}

/* O .chart-wrap herdado vem com cartao branco (mobile_parity); dentro do
   hero navy ele fica transparente e o estado vazio, em texto claro. */
.rd-balhero__chart {
  position: relative;
  height: 180px;
  margin-top: 18px;
}

.rd-balhero .chart-wrap {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
}

.rd-balhero .chart-empty-state {
  position: static;
  padding: 24px 0 8px;
  color: rgba(245, 241, 230, 0.55);
  text-align: center;
}

@media (min-width: 1024px) {
  .rd-balhero__value {
    font-size: 38px;
  }
}

/* Balancete/Razao — hero navy + "Importar arquivos" lado a lado, mesmo grid
   de 2 colunas do Resumo da Situacao Fiscal (.rd-cca-row) e Livros Fiscais
   (.rd-restricted-row). Nome proprio porque list_monthly.html e
   compartilhado com Impostos, que continua com o cartao generico em
   largura cheia (o hero dele ocupa a largura toda com o grafico). */
.rd-bal-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .rd-bal-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  }
}

.rd-bal-row .rd-balhero {
  max-width: 100%;
  min-width: 0;
}

/* Razao: mesmo hero navy do Balancete, mas sem grafico — no lugar dele, as
   contas movimentadas da competencia lidas do proprio PDF. A tabela rola
   sozinha no mobile em vez de espremer as quatro colunas. */
.rd-razao-hero__contas {
  position: relative;
  margin-top: 18px;
  overflow-x: auto;
}

.rd-razao-hero__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: rgba(245, 241, 230, 0.9);
}

.rd-razao-hero__table th {
  padding: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(245, 241, 230, 0.5);
  white-space: nowrap;
}

.rd-razao-hero__table td {
  padding: 8px 0;
  border-top: 1px solid rgba(245, 241, 230, 0.12);
  vertical-align: top;
}

.rd-razao-hero__table th + th,
.rd-razao-hero__table td + td {
  padding-left: 16px;
  text-align: right;
  white-space: nowrap;
}

.rd-razao-hero__codigo {
  display: inline-block;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
  color: rgba(245, 241, 230, 0.55);
}

.rd-razao-hero__mais {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(245, 241, 230, 0.55);
}

/* ===========================================================================
   17. Lista de documentos como tabela no desktop (handoff 2.3)
   ---------------------------------------------------------------------------
   No desktop a mesma informacao da linha vira tabela: Documento · Tipo ·
   Competencia/Validade · Atualizado · acoes. Mesmo DOM da linha (o refresh e
   os data-attributes nao mudam): o CSS reorganiza o article em grid de
   colunas e um cabecalho proprio aparece antes da lista.
   =========================================================================== */

@media (min-width: 1024px) {
  .rd-doclist {
    gap: 0;
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-card);
    background: var(--rd-card);
    overflow: hidden;
  }

  /* As colunas eram `2fr 1.4fr auto`, o que dava METADE da linha para a
     coluna do selo -- que so tem a caixa de selecao e um rotulo de 32px.
     Media 448px de vazio entre o selo e o titulo, enquanto o titulo (na
     coluna de 1.4fr) truncava nomes longos de arquivo. O prototipo poe o
     titulo logo depois do selo. Herda `auto minmax(0,1fr) auto` da regra
     base: o selo ocupa o que precisa, o titulo fica com o resto. */
  .rd-doclist > .rd-doc {
    align-items: center;
    padding: 13px 20px;
    border: 0;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--rd-line-soft);
    border-radius: 0;
  }

  .rd-doclist > .rd-doc:last-child {
    border-bottom: 0;
  }

  .rd-doclist > .rd-doc:hover {
    background: var(--rd-soft);
  }

  .rd-doclist > .rd-doc.rd-doc--overdue {
    border-left-color: var(--rd-edge-overdue);
  }

  .rd-doclist > .rd-doc.rd-doc--due {
    border-left-color: var(--rd-edge-due);
  }

  .rd-doclist__heading {
    margin: 0;
    padding: 10px 20px;
    background: var(--rd-soft);
    border-bottom: 1px solid var(--rd-line-soft);
  }

  .rd-doclist .rd-empty {
    border: 0;
    border-radius: 0;
  }
}

/* ===========================================================================
   18. Cabecalho interno das fichas (protótipo)
   ---------------------------------------------------------------------------
   No desktop o cartao "hero" das fichas deixa de ser um painel: vira o
   cabecalho da pagina — breadcrumb pequeno, titulo serif com traco dourado e,
   na MESMA linha, o seletor de periodo compacto e a acao primaria.
   =========================================================================== */

.panel.page-hero h1 {
  font-family: var(--rd-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rd-text);
}

.panel.page-hero h1::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--rd-gold-bright);
}

@media (min-width: 1024px) {
  /* Só os cabeçalhos com a estrutura padrão (.page-hero__headline) viram uma
     linha só. Telas antigas — Solicitações, Gestão, Assinador — têm eyebrow,
     título e texto soltos; ali o flex colocaria os três lado a lado. Elas
     ficam empilhadas, apenas sem o cartão. */
  .panel.page-hero:has(.page-hero__headline) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 20px;
  }

  /* :not(.admin-command-hero) — a Administração mantém o cartão navy com
     gradiente (definido em app.css, .admin-module-page .admin-command-hero--compact);
     sem essa exclusao, esta regra (mesma especificidade, carregada depois)
     zerava o background do cartao a partir de 1024px, deixando os pills
     brancos praticamente ilegiveis sobre o fundo claro da pagina. Mesma
     exclusao ja usada em mobile_parity.css (.panel.page-hero:not(.admin-command-hero)). */
  .panel.page-hero:not(.admin-command-hero) {
    padding: 2px 0 16px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--rd-line);
    background: transparent;
    box-shadow: none;
  }

  .panel.page-hero .breadcrumb {
    flex: 1 0 100%;
    margin: 0;
  }

  .panel.page-hero .page-hero__headline {
    flex: 1;
    min-width: 260px;
  }

  .panel.page-hero h1 {
    font-size: 29px;
  }

  /* O antigo cartao "Periodo" vira o pill compacto a direita do titulo. */
  .panel.page-hero .page-hero__toolbar {
    margin: 0 0 2px;
  }

  .panel.page-hero .period-picker__label,
  .panel.page-hero .filter-inline-field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .panel.page-hero .filter-inline {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .panel.page-hero .period-picker__trigger,
  .panel.page-hero .filter-inline-field select {
    min-height: 40px;
    border: 1px solid var(--rd-line);
    border-radius: 11px;
    background: var(--rd-card);
    color: var(--rd-text);
    font-weight: 700;
  }

  .panel.page-hero .period-picker__arrow {
    border: 1px solid var(--rd-line);
    background: var(--rd-card);
    color: var(--rd-gold);
  }

  .panel.page-hero .period-picker__arrow:hover {
    border-color: var(--rd-gold-bright);
  }

  .panel.page-hero .page-hero__aside {
    margin: 0 0 2px;
  }
}

/* ===========================================================================
   19. Checklist mensal do Contabil (handoff 9.1)
   =========================================================================== */

.rd-checkprogress {
  height: 7px;
  margin-top: 12px;
  border-radius: var(--rd-radius-pill);
  background: rgba(245, 241, 230, 0.16);
  overflow: hidden;
}

.rd-checkprogress__fill {
  height: 100%;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-gold-bright);
  transition: width 240ms ease-out;
}

/* Checklist mensal: a lista rola dentro do cartao em vez de esticar a pagina
   inteira (mesmo padrao de [data-notas-list] acima).

   O teto e em px, NAO em vh: com `min(60vh, 480px)` a lista encolhia junto
   com a janela e numa janela baixa sobravam 3 dos 8 itens visiveis, dando a
   impressao de que os outros 5 nao existiam (o scrollbar fino nao denunciava
   que havia mais). 560px cabe os 8 itens do catalogo
   (accounting/checklist_catalog.py) com folga pro primeiro, que tem hint em
   duas linhas -- entao no uso normal a lista NAO rola, e o scroll so entra
   quando as linhas quebram mais alto (tela estreita) ou se o catalogo
   crescer. Quando entra, o scrollbar e visivel de proposito. */
.rd-checklist {
  display: flex;
  flex-direction: column;
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rd-line-strong) transparent;
}

.rd-checklist::-webkit-scrollbar {
  width: 10px;
}

.rd-checklist::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 6px;
  background: var(--rd-line-strong);
  background-clip: content-box;
}

.rd-checkitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--rd-line-soft);
}

.rd-checkitem:last-child {
  border-bottom: 0;
}

.rd-checkitem.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.rd-checkitem__label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rd-text);
}

.rd-checkitem__hint {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--rd-text-3);
}

.rd-checkitem__freq {
  display: none;
  font-size: 12.5px;
  color: var(--rd-text-2);
}

.rd-checkitem__files {
  font-size: 12.5px;
  color: var(--rd-text-2);
  white-space: nowrap;
}

.rd-checkitem__actions {
  display: flex;
  gap: 7px;
}

.rd-checkitem__send {
  cursor: pointer;
}

/* Mobile: item em bloco — titulo em cima, situacao + acoes embaixo. */
@media (max-width: 640px) {
  .rd-checkitem {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rd-checkitem__body {
    grid-column: 1 / -1;
  }

  .rd-checkitem__actions {
    grid-column: 1 / -1;
  }

  .rd-checkitem__actions .rd-btn {
    flex: 1;
  }
}

/* Desktop: colunas como no protótipo — Item · Frequência · Situação ·
   Arquivos · ações. */
@media (min-width: 1024px) {
  .rd-checkitem {
    grid-template-columns: minmax(0, 2fr) 0.9fr 1fr 1fr auto;
  }

  .rd-checkitem__freq {
    display: block;
  }

  .rd-checkitem:hover {
    background: var(--rd-soft);
  }
}

/* ===========================================================================
   20. Quadro de valores do balanço (Demonstrações)
   =========================================================================== */

.rd-balancetiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.rd-balancetile {
  padding: 13px 15px;
  border: 1px solid var(--rd-line);
  border-radius: 13px;
  background: var(--rd-soft);
}

.rd-balancetile strong {
  display: block;
  margin-top: 4px;
  font-size: 19px;
  font-weight: 700;
  color: var(--rd-text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 400px) {
  .rd-balancetiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===========================================================================
   21. Seletor de período: painel legível e dentro da tela
   ---------------------------------------------------------------------------
   O painel abre com left:0 (mobile_parity); quando o pill fica na borda
   direita do cabeçalho, isso jogava o painel para fora da tela. No cabeçalho
   das fichas ele passa a alinhar pela direita, e ganha contraste próprio
   para não se confundir com o cartão atrás.
   =========================================================================== */

/* Contraste proprio vale em qualquer largura. */
.page-hero__toolbar .period-picker__panel,
.rd-periodbar .period-picker__panel {
  border: 1px solid rgba(245, 241, 230, 0.14);
  background: var(--rd-navy);
  box-shadow: 0 24px 50px rgba(15, 24, 48, 0.45);
}

/* O alinhamento pela direita so vale no desktop, onde o cabecalho vira uma
   linha so e o pill encosta na borda direita. No mobile e no tablet o pill
   fica a esquerda, abaixo do titulo: ali o painel abre pela esquerda e fica
   limitado a largura da tela. */
@media (max-width: 1023px) {
  .page-hero__toolbar .period-picker__panel,
  .rd-periodbar .period-picker__panel {
    right: auto;
    left: 0;
    width: min(320px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }
}

@media (min-width: 1024px) {
  .page-hero__toolbar .period-picker__panel,
  .rd-periodbar .period-picker__panel {
    right: 0;
    left: auto;
  }
}

/* O cabeçalho não pode recortar o painel que sai dele. */
.panel.page-hero,
.panel.page-hero .page-hero__toolbar,
.panel.page-hero .page-hero__filter-form {
  overflow: visible;
}

/* Botões de mês/ano dentro do painel: legíveis sobre o navy. */
.period-picker__panel .period-picker__grid button {
  border: 1px solid rgba(245, 241, 230, 0.16);
  background: rgba(245, 241, 230, 0.06);
  color: var(--rd-on-navy);
}

.period-picker__panel .period-picker__grid button:hover {
  border-color: rgba(245, 241, 230, 0.3);
  background: rgba(245, 241, 230, 0.14);
}

.period-picker__panel .period-picker__grid button.is-selected,
.period-picker__panel .period-picker__grid button[aria-pressed="true"] {
  border-color: var(--rd-gold-bright);
  background: var(--rd-gold-bright);
  color: var(--rd-navy);
  font-weight: 700;
}

/* ===========================================================================
   22. Solicitações no padrão do redesenho
   ---------------------------------------------------------------------------
   O módulo trazia paleta própria (--gold #c9a46b) e campos com estilo antigo.
   Aqui ele passa a usar os tokens da marca e os campos do design system, sem
   mexer no HTML de cada tipo de formulário (que é gerado pelo catálogo).
   =========================================================================== */

.sol .card {
  padding: 16px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
  box-shadow: none;
}

.sol h2 {
  font-family: var(--rd-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rd-text);
}

.sol h3 {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rd-text-2);
}

.sol label {
  margin: 14px 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rd-text);
}

.sol input,
.sol textarea,
.sol select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rd-line-strong);
  border-radius: var(--rd-radius-field);
  background: var(--rd-card);
  color: var(--rd-text);
  font-family: inherit;
  font-size: 13px;
}

.sol textarea {
  min-height: 92px;
  padding: 10px 12px;
  line-height: 1.5;
}

.sol input:focus,
.sol textarea:focus,
.sol select:focus {
  border-color: var(--rd-gold);
  outline: 2px solid rgba(143, 108, 28, 0.18);
  outline-offset: 1px;
}

.sol input[type="file"] {
  padding: 9px 12px;
  background: var(--rd-upload-bg);
  border-style: dashed;
  border-color: var(--rd-upload-line);
}

.sol input[type="checkbox"] {
  min-height: 0;
}

.sol .muted {
  color: var(--rd-text-2);
  font-size: 12.5px;
}

/* Botões do módulo passam a ser os do design system. */
.sol .sbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rd-gold);
  border-radius: var(--rd-radius-field);
  background: var(--rd-gold);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.sol .sbtn:hover {
  border-color: #7d5d16;
  background: #7d5d16;
}

.sol .sbtn.sec {
  border-color: var(--rd-line-strong);
  background: var(--rd-card);
  color: var(--rd-text);
}

.sol .sbtn.danger {
  border-color: var(--rd-danger-line);
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.sol .salert {
  border-radius: 13px;
  padding: 12px 14px;
  font-size: 12.5px;
}

.sol .salert.ok {
  border: 1px solid var(--rd-ok-line);
  background: var(--rd-ok-bg);
  color: var(--rd-ok-text);
}

.sol .salert.err {
  border: 1px solid var(--rd-danger-line);
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

/* Linha de solicitação clicável (a lista usa .rd-doc como âncora). */
.rd-doc--link {
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease-out;
}

.rd-doc--link:hover {
  background: var(--rd-soft);
}

/* Ícone do tipo de solicitação é emoji: sem a caixa de extensão. */
.sol .rd-filetag,
.rd-modcard__icon {
  font-size: 17px;
}

/* Formulário do tipo escolhido: largura de leitura confortável. */
.rd-solform {
  max-width: 46rem;
}

/* Escolha do tipo de solicitação: poucos itens, então cartões largos com o
   ícone em destaque — em vez de três cartõezinhos apertados numa linha. */
.rd-typegrid {
  display: grid;
  gap: 12px;
}

.rd-typecard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}

.rd-typecard:hover {
  border-color: var(--rd-line-strong);
  background: var(--rd-soft);
}

.rd-typecard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(16, 25, 47, 0.06);
  font-size: 22px;
  line-height: 1;
}

.rd-typecard__body {
  flex: 1;
  min-width: 0;
}

.rd-typecard__title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--rd-text);
}

.rd-typecard__desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--rd-text-support);
}

.rd-typecard__chevron {
  flex: none;
  color: #b9b2a3;
}

@media (min-width: 768px) {
  .rd-typegrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===========================================================================
   23. Utilitarios
   =========================================================================== */

.rd-stack {
  display: grid;
  gap: 12px;
}

.rd-stack--tight {
  gap: 8px;
}

.rd-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rd-row--between {
  justify-content: space-between;
}

.rd-row--wrap {
  flex-wrap: wrap;
}

.rd-grow {
  flex: 1;
  min-width: 0;
}

.rd-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-num {
  font-variant-numeric: tabular-nums;
}

/* Some quando o valor e zero — "Canceladas no periodo: 0" nao deve aparecer. */
.rd-hide-empty:empty {
  display: none;
}

.rd-only-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .rd-only-desktop {
    display: revert;
  }

  .rd-no-desktop {
    display: none;
  }
}

.rd-only-mobile {
  display: revert;
}

@media (min-width: 641px) {
  .rd-only-mobile {
    display: none;
  }
}

/* ===========================================================================
   24. Financeiro — Honorarios (handoff 3.3)
   ---------------------------------------------------------------------------
   O modulo inteiro rodava em cima das classes finance-* do app.css legado
   (paleta e tipografia antigas). As regras abaixo cobrem o mesmo HTML com os
   tokens do redesenho — sem trocar nome de classe onde JS/testes dependem
   dela (finance-modal*, finance-status-badge*, finance-due-pill*,
   finance-history-*, finance-details-*).
   =========================================================================== */

.rd-badge--gold {
  border-color: var(--rd-gold-bright);
  background: var(--rd-gold-bright);
  color: var(--rd-navy-surface);
}

/* --- resumo + edicao do admin, lado a lado no desktop -------------------- */

.rd-fin-admin-grid {
  display: grid;
  gap: 14px;
}

@media (min-width: 1024px) {
  .rd-fin-admin-grid {
    grid-template-columns: 1fr 1.35fr;
    align-items: start;
  }
}

.rd-fin-summary__amountrow {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 5px;
}

.rd-fin-summary__amountrow .rd-hero__value {
  margin: 0;
}

.rd-fin-summary__overdue {
  margin: 2px -8px -8px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(154, 59, 38, 0.22);
}

.rd-fin-summary__overdue strong {
  color: #f0b9a8;
}

.rd-fin-editor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rd-fin-editor__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.rd-fin-editor__head h2 {
  margin: 0;
  font-family: var(--rd-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--rd-text);
}

.rd-fin-editor__head p {
  margin: 0;
  font-size: 11.5px;
  color: var(--rd-text-2);
}

.rd-fin-editor form {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.rd-fin-editor h3 {
  margin: 0 0 8px;
  font-family: var(--rd-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-text-2);
}

/* --- vencimentos ----------------------------------------------------------- */

.rd-fin-installments__rows {
  display: grid;
  gap: 8px;
}

.rd-fin-installment-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
}

@media (min-width: 641px) {
  .rd-fin-installment-row {
    grid-template-columns: 1.2fr 1fr 1fr 36px;
    align-items: end;
    padding: 12px;
  }
}

.rd-fin-installment-row__remove {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--rd-danger-line);
  border-radius: 10px;
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
  cursor: pointer;
}

@media (min-width: 641px) {
  .rd-fin-installment-row__remove {
    width: 36px;
    height: 38px;
  }
}

.rd-fin-dashed-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1px dashed var(--rd-line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--rd-gold);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.rd-fin-dashed-btn:hover {
  background: var(--rd-soft);
}

/* --- pagamentos -------------------------------------------------------- */

.rd-fin-payment-composer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: end;
}

@media (min-width: 641px) {
  .rd-fin-payment-composer {
    grid-template-columns: 1fr 1fr auto;
  }
}

.rd-fin-payment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--rd-text-2);
}

.rd-fin-payment-summary strong {
  color: var(--rd-text);
}

.rd-fin-payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.rd-fin-payment-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--rd-ok-line);
  border-radius: 999px;
  background: var(--rd-ok-bg);
  color: var(--rd-ok-text);
  font-size: 12px;
  font-weight: 700;
}

.rd-fin-payment-tag__remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(63, 107, 74, 0.14);
  color: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

/* --- situacao (toggle segmentado) --------------------------------------- */

.rd-fin-segmented {
  display: flex;
  gap: 5px;
  padding: 3px;
  border-radius: 11px;
  background: var(--rd-soft);
  flex-wrap: wrap;
}

.rd-fin-segmented__option {
  position: relative;
  flex: 1 1 auto;
  min-width: 84px;
}

.rd-fin-segmented__option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.rd-fin-segmented__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 8px;
  padding: 0 8px;
  color: var(--rd-text-2);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.rd-fin-segmented__option:has(input:checked) span {
  background: var(--rd-card);
  border: 1px solid var(--rd-line-strong);
  color: var(--rd-text);
  font-weight: 700;
}

.rd-fin-segmented__option:has(input:focus-visible) span {
  outline: 2px solid var(--rd-gold);
  outline-offset: 1px;
}

.rd-fin-actions {
  display: flex;
  gap: 9px;
}

.rd-fin-actions .rd-btn {
  flex: 1;
}

@media (min-width: 641px) {
  .rd-fin-actions .rd-btn {
    flex: none;
  }
}

/* --- historico (cabecalho + linhas de acao) ------------------------------ */

.rd-fin-history__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.rd-fin-history__head h2 {
  margin: 0;
  font-family: var(--rd-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--rd-text);
}

.rd-fin-history__head > div:first-child {
  flex: 1;
  min-width: 0;
}

.rd-fin-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--rd-gold);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.rd-fin-row-btn:hover {
  text-decoration: underline;
}

.rd-fin-history-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--rd-line);
  border-left: 3px solid transparent;
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.rd-fin-history-card--overdue {
  border-left-color: var(--rd-edge-overdue);
}

.rd-fin-history-card--due {
  border-left-color: var(--rd-edge-due);
}

.rd-fin-history-card__lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rd-fin-history-card__lead strong {
  font-size: 13.5px;
  color: var(--rd-text);
}

.rd-fin-history-card__meta {
  font-size: 11.5px;
  color: var(--rd-text-2);
}

/* ===========================================================================
   24b. Financeiro — reskin das classes finance-* legadas
   ---------------------------------------------------------------------------
   Nomes de classe preservados (app.js/extra_js do template dependem deles);
   só a aparência muda, do app.css legado para os tokens do redesenho.
   =========================================================================== */

.finance-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--rd-neutral-line);
  border-radius: var(--rd-radius-pill);
  background: var(--rd-neutral-bg);
  color: var(--rd-neutral-text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.finance-status-badge--open {
  border-color: var(--rd-warn-line);
  background: var(--rd-warn-bg);
  color: var(--rd-warn-text);
}

.finance-status-badge--overdue {
  border-color: var(--rd-danger-line);
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.finance-status-badge--paid {
  border-color: var(--rd-ok-line);
  background: var(--rd-ok-bg);
  color: var(--rd-ok-text);
}

.finance-status-badge--canceled {
  border-color: var(--rd-line-strong);
  background: var(--rd-soft);
  color: var(--rd-text-support);
}

.finance-due-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--rd-radius-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.finance-due-pill--warning {
  background: var(--rd-warn-bg);
  color: var(--rd-warn-text);
}

.finance-due-pill--danger {
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.finance-due-pill--success {
  background: var(--rd-ok-bg);
  color: var(--rd-ok-text);
}

.finance-due-pill--muted {
  background: var(--rd-soft);
  color: var(--rd-text-support);
}

.finance-history-table-wrap,
.finance-history-cards {
  margin-top: 0;
}

.finance-history-table-wrap {
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
  overflow: hidden;
}

.finance-history-table {
  width: 100%;
  border-collapse: collapse;
}

.finance-history-table th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rd-line);
  background: var(--rd-soft);
  color: var(--rd-text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.finance-history-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--rd-line-soft);
  font-size: 13px;
  color: var(--rd-text);
  vertical-align: middle;
}

.finance-history-table tbody tr:last-child td {
  border-bottom: 0;
}

.finance-history-table tbody tr:hover {
  background: var(--rd-soft);
}

.finance-history-table tbody tr.is-selected,
.rd-table tbody tr.is-selected {
  background: var(--rd-soft);
}

.finance-history-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.finance-empty-state {
  padding: 26px 18px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
  text-align: center;
  color: var(--rd-text-2);
}

.finance-empty-state strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--rd-text);
}

/* --- folhas (modal de detalhe + modal de filtro) ------------------------ */

.finance-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 641px) {
  .finance-modal {
    align-items: center;
  }
}

.finance-modal[hidden] {
  display: none;
}

.finance-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 12, 0.5);
}

.finance-modal__dialog {
  position: relative;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 8px 18px 24px;
  border-radius: 22px 22px 0 0;
  background: var(--rd-page);
  box-shadow: 0 -18px 40px rgba(20, 17, 12, 0.28);
}

.finance-modal__dialog::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 2px;
  background: var(--rd-line-strong);
}

@media (min-width: 641px) {
  .finance-modal__dialog {
    max-width: 520px;
    max-height: 85vh;
    padding: 20px 24px 24px;
    border-radius: var(--rd-radius-card-lg);
    box-shadow: 0 24px 60px rgba(20, 17, 12, 0.24);
  }

  .finance-modal__dialog::before {
    display: none;
  }
}

.finance-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.finance-modal__head h2 {
  margin: 0;
  font-family: var(--rd-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--rd-text);
}

.finance-modal__head p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--rd-text-2);
}

.finance-modal__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--rd-soft);
  color: var(--rd-text-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.finance-filter-form,
.finance-details-section {
  display: grid;
  gap: 10px;
}

.finance-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.finance-details-card {
  padding: 10px;
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  background: var(--rd-card);
}

.finance-details-card__label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-text-2);
}

.finance-details-card strong {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--rd-text);
}

.finance-details-card small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--rd-text-2);
}

.finance-details-section h3 {
  margin: 4px 0 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-text-2);
}

.finance-details-installments {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--rd-line);
  border-radius: 14px;
  overflow: hidden;
}

.finance-details-installment {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  background: var(--rd-card);
  border-bottom: 1px solid var(--rd-line-soft);
}

.finance-details-installment:last-child {
  border-bottom: 0;
}

.finance-details-installment strong {
  font-size: 13px;
  color: var(--rd-text);
}

.finance-details-installment span {
  font-size: 10.5px;
  color: var(--rd-text-2);
}

.finance-details-empty {
  margin: 0;
  padding: 12px;
  font-size: 12.5px;
  color: var(--rd-text-2);
}

/* Modal do extrato lido (OFX/CSV) -- botao "Abrir" de _documents_list.html,
   ver static/js/statement_viewer.js. Reusa .finance-modal e
   .finance-details-* (cards de resumo); so a largura do dialogo e a tabela
   de lancamentos sao proprias daqui. */
@media (min-width: 641px) {
  .finance-modal__dialog.rd-statement-dialog {
    max-width: 640px;
  }
}

.rd-statement-table-wrap {
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
}

.rd-statement-table-wrap .rd-table {
  min-width: 480px;
}

.rd-statement-amount--credit {
  color: var(--rd-ok-text);
}

.rd-statement-amount--debit {
  color: var(--rd-danger-text);
}

/* Checklist em modal (contabil_checklist.html): o botao "Checklist" fica no
   hero navy e a lista abre num dialogo, em vez de ocupar a ficha inteira.
   Isso tambem elimina a rolagem aninhada que existia antes -- quem rola e o
   proprio dialogo, uma barra so. */
.rd-balhero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.rd-balhero__cta-count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--rd-radius-pill);
  background: rgba(20, 17, 12, 0.22);
  font-size: 11px;
  font-weight: 700;
}

/* Some quando nao ha pendencia (o JS zera o texto): um "0" dourado ao lado
   do botao lia-se como se algo estivesse faltando. */
.rd-balhero__cta-count:empty {
  display: none;
}

@media (min-width: 641px) {
  .finance-modal__dialog.rd-checklist-dialog {
    max-width: 900px;
  }
}

/* Uma barra de rolagem so: o teto da lista vale na pagina, nao aqui dentro
   -- quem rola e o .finance-modal__dialog. */
.rd-checklist-modal .rd-checklist {
  max-height: none;
  overflow: visible;
}

/* As linhas ja tem padding lateral proprio; dentro do dialogo isso somava
   com o padding dele e apertava a linha no mobile. */
.rd-checklist-modal .rd-checkitem {
  padding-left: 0;
  padding-right: 0;
}

.rd-checklist-modal__zip {
  display: inline-flex;
  margin-bottom: 4px;
}

/* Mobile: o modal e folha de baixo e o botao ocupa a largura toda, alvo de
   toque cheio em vez de um botao curto no canto do hero. */
@media (max-width: 640px) {
  .rd-balhero__cta {
    width: 100%;
    justify-content: center;
  }

  .rd-checklist-modal .rd-checkitem__actions .rd-btn {
    min-height: 40px;
  }
}

.finance-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ===========================================================================
   25. Gestao — Indicadores e Formador de preco (handoff 3.6)
   =========================================================================== */

/* --- hero "como a empresa esta" + grafico de 12 meses -------------------- */

/* Trava de seguranca: o cartao nunca deve ficar mais largo que a propria
   coluna de conteudo. Escopado a este modificador (nao no .rd-hero
   compartilhado) porque outras paginas dependem de overflow visivel no
   .rd-hero para popovers que saem da caixa (period-picker).
   So no eixo horizontal (max-width, nao overflow): a correcao de verdade
   contra o cartao esticar e o overflow-x:auto do .rd-gestao-hero__chart,
   que ja contem a rolagem por conta propria. overflow:hidden aqui chegou
   a ser testado e foi revertido — combinado com o transform do
   data-reveal (a animacao de entrada do cartao), a altura calculada as
   vezes colapsava e sumia com o resto do conteudo.
   min-width:0 e essencial: .rd-hero e item de grid (filho de .content, que
   e display:grid) e por padrao um item de grid tem min-width:auto, ou
   seja, o navegador nunca deixa encolher abaixo do min-content dos
   descendentes — inclusive as 12 colunas nowrap do grafico, mesmo com
   overflow-x:auto nelas. Isso fazia o cartao inteiro (e o grafico dentro
   dele) vazar dezenas de px alem da viewport no mobile, mesmo parecendo
   "contido" visualmente. min-width:0 remove esse piso e deixa o item de
   grid encolher ate a largura da propria trilha; dai o overflow-x:auto do
   .rd-gestao-hero__chart finalmente rola internamente como deveria.
   Correcao irma em app.css: .content/.admin-content tambem precisou de
   grid-template-columns:minmax(0,1fr), porque sem isso a coluna implicita
   deles usa sizing "auto" (baseado no max-content dos filhos) em vez de
   esticar ate a largura disponivel — daí o cartao conseguia vazar mesmo
   com min-width:0 aqui. */
.rd-gestao-hero {
  max-width: 100%;
  min-width: 0;
}

.rd-gestao-hero__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rd-on-navy-muted);
}

.rd-gestao-hero__headline {
  margin: 6px 0 0;
  font-family: var(--rd-serif);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .rd-gestao-hero__headline {
    font-size: 30px;
  }
}

.rd-gestao-hero__narrative {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--rd-on-navy-muted);
  max-width: 56ch;
}

/* 12 colunas apertam em telas estreitas (mobile/tablet retrato): em vez de
   forcar o encolhimento (que às vezes vaza a barra pra fora do cartão —
   min-width:0 sozinho nao segura em todo navegador) o carrossel rola na
   horizontal dentro do proprio cartao, sem nunca estourar a largura dele. */
.rd-gestao-hero__chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-top: 18px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.rd-gestao-hero__chart-col {
  display: flex;
  flex: 1 1 0;
  min-width: 24px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* Altura fixa e explicita: e a partir dela que a altura em % da barra
   (height:{{ point.height_pct }}%) resolve. Sem um ancestral com altura
   definida, porcentagem em altura nao tem base de calculo e o navegador
   ignora — as barras saiam todas praticamente do mesmo tamanho, sem
   refletir os valores reais dos 12 meses. */
.rd-gestao-hero__chart-barwrap {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 70px;
}

.rd-gestao-hero__chart-bar {
  width: 100%;
  min-height: 3px;
  border-radius: 3px;
  background: rgba(245, 241, 230, 0.32);
}

.rd-gestao-hero__chart-col--current .rd-gestao-hero__chart-bar {
  background: var(--rd-gold-bright);
}

.rd-gestao-hero__chart-label {
  font-size: 9px;
  color: rgba(245, 241, 230, 0.4);
}

.rd-gestao-hero__chart-col--current .rd-gestao-hero__chart-label {
  font-weight: 700;
  color: var(--rd-on-navy);
}

.rd-gestao-hero__trend {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--rd-on-navy-line);
  font-size: 11.5px;
  color: var(--rd-on-navy-muted);
}

/* --- os cinco indicadores, em cartao com barra ---------------------------- */

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

@media (min-width: 641px) {
  .rd-indicator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rd-indicator-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rd-indicator-card {
  padding: 14px 16px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
}

.rd-indicator-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.rd-indicator-card__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--rd-text);
}

.rd-indicator-card__value {
  font-family: var(--rd-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.rd-indicator-card__value--ok {
  color: var(--rd-ok-text);
}

.rd-indicator-card__value--warn {
  color: var(--rd-warn-text);
}

.rd-indicator-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(43, 35, 24, 0.09);
  overflow: hidden;
  margin-top: 9px;
}

.rd-indicator-bar__fill {
  height: 100%;
  border-radius: 3px;
}

.rd-indicator-bar__fill--ok {
  background: var(--rd-ok-text);
}

.rd-indicator-bar__fill--warn {
  background: var(--rd-warn-text);
}

.rd-indicator-card__note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--rd-text-2);
}

/* --- formador de preco: resultado em hero navy decomposto ----------------- */

.rd-price-hero__value {
  margin: 3px 0 0;
  font-family: var(--rd-serif);
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

@media (min-width: 1024px) {
  .rd-price-hero__value {
    font-size: 38px;
  }
}

.rd-price-hero__divisor {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: var(--rd-on-navy-muted);
}

.rd-price-hero__breakdown {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
}

.rd-price-hero__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
}

.rd-price-hero__row span:first-child {
  flex: 1;
  color: rgba(245, 241, 230, 0.78);
}

.rd-price-hero__row strong {
  color: #fff;
}

.rd-price-hero__row--margin {
  background: rgba(127, 199, 154, 0.16);
}

.rd-price-hero__row--margin span:first-child,
.rd-price-hero__row--margin strong {
  color: #7fc79a;
}

.rd-price-sum-note {
  margin-top: 11px;
  padding: 10px 11px;
  border-radius: 11px;
  font-size: 11.5px;
  line-height: 1.4;
}

.rd-price-history-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rd-line-soft);
}

.rd-price-history-item:last-child {
  border-bottom: 0;
}

/* --- gestor contábil: chips de sugestao de pergunta --------------------- */

.rd-gia-suggestions {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 10px;
  /* Rola sozinho (carrossel via JS); a barra nativa some para não competir
     visualmente com o giro automático — a rolagem manual continua ativa. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.rd-gia-suggestions::-webkit-scrollbar { display: none; }

/* Destaque proprio (borda e fundo dourados) para diferenciar de botao
   generico — sinaliza "isso e clicavel e ja manda a pergunta". */
.rd-gia-suggestions__chip {
  flex: none;
  height: 33px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--rd-warn-bg);
  border: 1.5px solid var(--rd-gold-bright);
  color: var(--rd-warn-text);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  scroll-snap-align: start;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.rd-gia-suggestions__chip:hover {
  background: var(--rd-gold-bright);
  border-color: var(--rd-gold-bright);
  color: #fff;
  transform: translateY(-1px);
}

.rd-gia-suggestions__chip:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .rd-gia-suggestions__chip { transition: none; }
  .rd-gia-suggestions__chip:hover { transform: none; }
}

/* ===========================================================================
   26. Parcelamentos fiscais — cards de acordo (protótipo)
   ---------------------------------------------------------------------------
   Cada acordo (Simples Nacional, Receita Federal etc.) vira um cartao com
   selo de status, barra de progresso das guias emitidas (reaproveita
   .rd-indicator-bar, ja usado em Gestao/Indicadores) e um alerta vermelho
   quando ha guia em atraso. Antes usava .record-card generico — sem essa
   leitura visual de progresso/urgencia que o protótipo tem.
   =========================================================================== */

.rd-parcel-list {
  display: grid;
  gap: 12px;
}

.rd-parcel-card {
  padding: 16px;
  border: 1px solid var(--rd-line);
  border-left: 3px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  background: var(--rd-card);
  display: grid;
  gap: 10px;
}

.rd-parcel-card--overdue {
  border-left-color: var(--rd-edge-overdue);
}

.rd-parcel-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.rd-parcel-card__title {
  margin: 0;
  font-family: var(--rd-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--rd-text);
}

.rd-parcel-card__meta {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--rd-text-2);
}

.rd-parcel-card__progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--rd-text-2);
}

.rd-parcel-card__progress-row strong {
  color: var(--rd-text);
}

.rd-parcel-card__alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--rd-danger-line);
  border-radius: var(--rd-radius-field);
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
  font-size: 12.5px;
  line-height: 1.5;
}

.rd-parcel-card__alert svg {
  flex: none;
  margin-top: 1px;
}

.rd-parcel-card__alert strong {
  display: block;
  font-size: 13px;
}

.rd-parcel-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--rd-line);
}

.rd-parcel-card__footer-meta {
  margin: 0;
  font-size: 12px;
  color: var(--rd-text-2);
}

.rd-parcel-card__note {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--rd-radius-field);
  background: var(--rd-soft);
  font-size: 12px;
  color: var(--rd-text-2);
}

.rd-parcel-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rd-btn--danger {
  border-color: var(--rd-danger-line);
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.rd-btn--danger:hover {
  border-color: var(--rd-edge-overdue);
  background: var(--rd-danger-bg);
}

/* ===========================================================================
   27. Notas fiscais — hero navy + importar lado a lado (protótipo)
   ---------------------------------------------------------------------------
   Substitui o cabecalho simples (so titulo) por um cartao navy com o valor
   de Saidas do periodo em destaque, pills de Entradas/Saldo e um mini
   grafico dos ultimos 12 meses — mesma linguagem visual do hero de
   Indicadores (Gestao), com nome proprio porque e um cartao de outro
   modulo. Ao lado, o cartao "Importar arquivos" passa a ficar sempre
   visivel (antes vinha escondido por padrao, atras de um toggle).
   =========================================================================== */

.rd-notas-hero-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .rd-notas-hero-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  }
}

/* Mesma trava de seguranca do .rd-gestao-hero (ver comentario la): item de
   grid precisa de min-width:0 pra nao ser forcado a crescer pelo
   min-content do grafico de 12 colunas. */
.rd-notas-hero {
  max-width: 100%;
  min-width: 0;
}

.rd-notas-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.rd-notas-hero__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Saidas por modelo de documento (NFE / NFCE), logo abaixo do total: uma
   linha por modelo, rotulo a esquerda e valor colado nele, na tipografia
   das pilhas ao lado. */
.rd-notas-hero__modelos {
  margin: 8px 0 0;
  display: grid;
  gap: 3px;
}

.rd-notas-hero__modelos > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.rd-notas-hero__modelos dt {
  min-width: 108px;
  font-size: 12.5px;
  color: var(--rd-on-navy-muted);
}

.rd-notas-hero__modelos dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rd-on-navy);
}

/* O valor de cada modelo e' um BOTAO (abre a lista nota a nota, como a pilha
   Canceladas): zera o visual nativo e sinaliza o clique pelo sublinhado. */
.rd-notas-hero__modelo-button {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: var(--rd-on-navy-line);
  text-underline-offset: 3px;
}

.rd-notas-hero__modelo-button:hover,
.rd-notas-hero__modelo-button:focus-visible {
  color: var(--rd-gold);
  text-decoration-color: var(--rd-gold);
  outline: none;
}

.rd-notas-hero__pill {
  min-width: 92px;
  padding: 8px 12px;
  border-radius: var(--rd-radius-field);
  background: rgba(245, 241, 230, 0.08);
  border: 1px solid var(--rd-on-navy-line);
}

.rd-notas-hero__pill--accent {
  background: rgba(0, 0, 0, 0.18);
}

.rd-notas-hero__pill--danger strong {
  color: var(--rd-on-navy-danger);
}

/* A pilha Canceladas e um BOTAO (abre a lista nota a nota): zera o visual
   nativo do <button> e so acrescenta o affordance de clique — o resto do
   estilo continua vindo de .rd-notas-hero__pill. */
.rd-notas-hero__pill--button {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rd-notas-hero__pill--button:hover,
.rd-notas-hero__pill--button:focus-visible {
  background: rgba(245, 241, 230, 0.16);
  border-color: var(--rd-on-navy);
}

/* Corpo do modal das notas canceladas: a lista dentro dele reusa
   .rd-doclist/.rd-doc da listagem de documentos. */
.rd-canceladas {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

/* Pacote de XMLs na listagem: o titulo e um botao que abre o modal "Notas do
   arquivo" (nota a nota). Herda a tipografia do titulo e so sinaliza o clique
   pelo sublinhado pontilhado, para nao virar um segundo "botao" na linha. */
.rd-doc__title-button {
  appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: var(--rd-line-strong);
  text-underline-offset: 3px;
}

.rd-doc__title-button:hover,
.rd-doc__title-button:focus-visible {
  color: var(--rd-gold);
  text-decoration-color: var(--rd-gold);
  outline: none;
}

/* Resumo no topo do modal "Notas do arquivo": total, validas e canceladas. */
.rd-conteudo__resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.rd-nota--cancelada .rd-doc__title,
.rd-nota--cancelada .rd-notatag {
  opacity: 0.72;
}

.rd-notas-hero__pill span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-on-navy-muted);
}

.rd-notas-hero__pill strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--rd-on-navy);
}

.rd-notas-hero__chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-top: 18px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.rd-notas-hero__chart-col {
  display: flex;
  flex: 1 1 0;
  min-width: 20px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.rd-notas-hero__chart-barwrap {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 64px;
}

.rd-notas-hero__chart-bar {
  width: 100%;
  min-height: 3px;
  border-radius: 3px;
  background: rgba(245, 241, 230, 0.32);
}

.rd-notas-hero__chart-col--current .rd-notas-hero__chart-bar {
  background: var(--rd-gold-bright);
}

.rd-notas-hero__chart-label {
  font-size: 9px;
  color: rgba(245, 241, 230, 0.4);
}

.rd-notas-hero__chart-col--current .rd-notas-hero__chart-label {
  font-weight: 700;
  color: var(--rd-on-navy);
}

.rd-notas-import__hint {
  margin: 4px 0 14px;
  font-size: 12.5px;
  color: var(--rd-text-2);
}

.rd-notas-import__form {
  display: grid;
  gap: 12px;
}

/* ===========================================================================
   28. Livros fiscais — aviso de acesso restrito + importar lado a lado
   ---------------------------------------------------------------------------
   Pasta admin-only (ADMIN_ONLY_FOLDER_KEYS): em vez de so nao aparecer pro
   cliente em silencio, o cartao navy explica o porque. Mesmo grid de 2
   colunas ja usado em Notas Fiscais (.rd-notas-hero-row), com nome proprio
   porque list_monthly.html e compartilhado com outras pastas fiscais que
   nao devem ganhar esse layout.
   =========================================================================== */

.rd-restricted-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .rd-restricted-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  }
}

.rd-restricted-notice {
  display: grid;
  align-content: start;
}

.rd-restricted-notice__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rd-restricted-notice__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(245, 241, 230, 0.1);
  color: var(--rd-on-navy);
}

.rd-restricted-notice__title {
  margin: 0;
  font-family: var(--rd-serif);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.rd-restricted-notice__subtitle {
  margin: 2px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rd-on-navy-muted);
}

.rd-restricted-notice__body {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rd-on-navy-muted);
}

.rd-restricted-notice__stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 16px 0 0;
  padding: 14px;
  border-radius: 12px;
  background: rgba(245, 241, 230, 0.06);
  border: 1px solid rgba(245, 241, 230, 0.12);
}

.rd-restricted-notice__stat dt {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rd-on-navy-muted);
}

.rd-restricted-notice__stat dd {
  margin: 0;
  font-family: var(--rd-serif);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.rd-restricted-notice__stat-sub {
  display: block;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--rd-on-navy-muted);
  margin-top: 2px;
}

.rd-restricted-notice__stat-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(185, 144, 42, 0.12);
  border: 1px solid rgba(185, 144, 42, 0.35);
}

.rd-restricted-notice__breakdown-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.rd-restricted-notice__breakdown-label {
  font-family: var(--rd-sans, inherit);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-gold-bright);
  white-space: nowrap;
}

.rd-restricted-notice__breakdown-value {
  font-family: var(--rd-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.rd-restricted-import {
  display: grid;
  gap: 12px;
  align-content: start;
}

.rd-restricted-import__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.rd-restricted-import__period {
  font-size: 11.5px;
  color: var(--rd-text-2);
}

/* Impostos — hero navy + "Importar arquivos" lado a lado, sobe pro topo da
   ficha (antes ficava sozinho, largura cheia, depois do grafico). Mesma
   ideia de layout em 2 colunas de Notas Fiscais (.rd-notas-hero-row),
   Balancete/Razao (.rd-bal-row) e Situacao Fiscal (.rd-cca-row). Nome
   proprio porque list_monthly.html e compartilhado com as demais pastas
   fiscais (Parcelamento, Livros Fiscais), que nao devem ganhar esse grid. */
.rd-impostos-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .rd-impostos-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  }
}

/* Mesma trava de seguranca do .rd-notas-hero/.rd-cca-hero: item de grid
   precisa de min-width:0 pra nao ser forcado a crescer pelo split de
   guias/declaracoes/selo de carga tributaria. */
.rd-impostos-hero {
  max-width: 100%;
  min-width: 0;
}

/* Folha — mesmo tratamento de Impostos: hero navy + "Importar arquivos"
   lado a lado no topo da ficha (antes o envio ficava no accordion generico,
   largura cheia, depois da lista de documentos). Nome proprio porque
   list_monthly.html e compartilhado com as demais pastas mensais. */
.rd-folha-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .rd-folha-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  }
}

/* Mesma trava do .rd-impostos-hero: o split de colaboradores/pro-labore
   nao pode forcar a coluna a crescer. */
.rd-folha-hero {
  max-width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Grafico DENTRO do hero navy (Impostos e Folha)
   ---------------------------------------------------------------------------
   Mesmo desenho que o Balancete ja usa (.rd-balhero__chart): o hero deixa de
   ser so um cartao de numero e passa a conter a serie de 12 meses, em vez do
   painel branco "Dashboard de Impostos" / "Painel da Folha" que vinha depois
   da ficha. O .chart-wrap herdado traz cartao branco (mobile_parity) — aqui
   ele fica transparente, e o estado vazio vira texto claro sobre navy.
   --------------------------------------------------------------------------- */

.rd-impostos-hero,
.rd-folha-hero {
  overflow: hidden;
}

.rd-impostos-hero__chart,
.rd-folha-hero__chart {
  position: relative;
  height: 200px;
  margin-top: 16px;
}

.rd-impostos-hero .chart-wrap,
.rd-folha-hero .chart-wrap {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
}

.rd-impostos-hero .chart-empty-state,
.rd-folha-hero .chart-empty-state {
  position: static;
  padding: 24px 0 8px;
  color: rgba(245, 241, 230, 0.55);
  text-align: center;
}

/* Legenda do rodape do hero (o "ultimos 12 meses" / a nota do 13o). */
.rd-hero__foot {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--rd-on-navy-3, rgba(245, 241, 230, 0.45));
}

/* Topo do hero: valor a esquerda, selo + contadores a direita (protótipo). */
.rd-hero__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.rd-hero__topmain {
  min-width: 0;
}

.rd-hero__topaside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
  min-width: 210px;
}

.rd-hero__topaside .rd-hero__badge {
  margin-top: 0;
}

/* Na coluna da direita o split perde o traco separador — ele existe para
   quando o bloco vem EMBAIXO do valor, nao ao lado. */
.rd-hero__split--aside {
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Sem espaco para as duas colunas, volta a empilhar como antes. */
@media (max-width: 900px) {
  .rd-hero__topaside {
    align-items: stretch;
    width: 100%;
    margin-left: 0;
    min-width: 0;
  }

  .rd-hero__topaside .rd-hero__badge {
    align-self: flex-start;
  }

  .rd-hero__split--aside {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--rd-on-navy-line);
  }
}

/* ---------------------------------------------------------------------------
   Faixa de numeros do topo da home (protótipo)
   ---------------------------------------------------------------------------
   Quatro cartoes com o numero do mes e a serie de 12 meses em miniatura. No
   celular vira carrossel: desliza com o dedo e encaixa cartao a cartao (imã),
   em vez de espremer quatro numeros em telas de 390px.
   --------------------------------------------------------------------------- */

.rd-home__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  .rd-home__kpis {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-right: -16px;
    padding-right: 16px;
  }

  .rd-home__kpis::-webkit-scrollbar {
    display: none;
  }

  .rd-kpi {
    flex: none;
    width: 158px;
    scroll-snap-align: start;
  }
}

.rd-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  min-width: 0;
}

.rd-kpi__label {
  padding-right: 70px;
}

.rd-kpi__value {
  font-family: var(--rd-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 24px;
  line-height: 1.1;
  color: var(--rd-text);
  font-variant-numeric: tabular-nums;
}

.rd-kpi__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.rd-kpi__note {
  font-size: 11px;
  color: var(--rd-text-2);
}

.rd-kpi__spark {
  position: absolute;
  top: 13px;
  right: 14px;
  line-height: 0;
}

.rd-kpi__spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rd-kpi__spark-area {
  fill: currentColor;
  opacity: 0.14;
  stroke: none;
}

.rd-kpi__spark-dot {
  fill: currentColor;
}

.rd-kpi__spark--gold {
  color: var(--rd-gold);
}

.rd-kpi__spark--ok {
  color: var(--rd-ok-text);
}

.rd-kpi__spark--danger {
  color: var(--rd-danger-text);
}

/* Selo de tendencia (sobe/desce) ao pe do numero. */
.rd-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--rd-radius-pill);
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rd-trend--ok {
  background: var(--rd-ok-bg);
  color: var(--rd-ok-text);
}

.rd-trend--danger {
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.rd-trend--warn {
  background: var(--rd-warn-bg);
  color: var(--rd-warn-text);
}

.rd-trend--neutral {
  background: var(--rd-neutral-bg);
  color: var(--rd-neutral-text);
}

/* ---------------------------------------------------------------------------
   Indicadores: hero + rosca "Para onde foi o dinheiro" lado a lado
   --------------------------------------------------------------------------- */

/* Painel principal + um cartão de apoio ao lado (rosca de despesas, resumo
   do contrato). Empilha no celular; no desktop o apoio nunca fica mais
   estreito que 300px, senão vira uma coluna que não cabe nada. */
.rd-splitrow {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .rd-splitrow {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  }

  /* Sem o cartão de apoio (dado que ainda não existe para a empresa), o
     painel volta a ocupar a largura toda em vez de deixar meia tela vazia. */
  .rd-splitrow--solo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rd-splitrow > * {
  min-width: 0;
}

/* Acao principal dentro de um hero navy (ex.: "Baixar guia" do
   Parcelamento). align-self para o botao nao esticar na largura do cartao. */
.rd-hero__cta {
  margin-top: 12px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.rd-hero__cta[hidden] {
  display: none;
}

/* Previa do checklist dentro do hero navy dos Extratos: o que falta
   responder, sem abrir o modal. Cada linha e um botao que abre o modal. */
.rd-checkprev {
  margin-top: 12px;
  border: 1px solid var(--rd-on-navy-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 14px;
}

.rd-checkprev__row,
.rd-checkprev__more {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rd-checkprev__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rd-on-navy-line);
}

.rd-checkprev__row:last-child,
.rd-checkprev__more:last-child {
  border-bottom: 0;
}

.rd-checkprev__row:hover .rd-checkprev__body strong,
.rd-checkprev__more:hover {
  text-decoration: underline;
}

.rd-checkprev__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.rd-checkprev__body strong {
  font-size: 12.5px;
  color: var(--rd-on-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-checkprev__freq {
  font-size: 10.5px;
  color: var(--rd-on-navy-muted);
}

.rd-checkprev__files {
  font-size: 11px;
  color: var(--rd-on-navy-muted);
  white-space: nowrap;
}

.rd-checkprev__more {
  padding: 9px 0;
  font-size: 11.5px;
  color: var(--rd-on-navy-muted);
  border-top: 1px solid var(--rd-on-navy-line);
}

/* No celular a contagem de arquivos e a primeira coisa que pode sair: o
   rotulo e o selo sao o que dizem se o item precisa de acao. */
@media (max-width: 520px) {
  .rd-checkprev__files {
    display: none;
  }
}

/* Da receita bruta ao resultado, linha a linha (cartao da DRE). */
.rd-dre {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  font-size: 12.5px;
}

.rd-dre__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rd-line);
  color: var(--rd-text-2);
}

.rd-dre__row:last-child {
  border-bottom: 0;
}

.rd-dre dt {
  min-width: 0;
}

.rd-dre dd {
  margin: 0;
  font-weight: 700;
  color: var(--rd-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Hero de apoio numa coluna do .rd-splitrow: acompanha a altura do painel ao
   lado e empurra a nota de rodape para baixo, em vez de deixar o cartao
   navy flutuando com sobra embaixo. */
.rd-hero--contrato {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rd-hero--contrato .rd-hero__split {
  margin-top: 10px;
  gap: 8px;
}

.rd-hero--contrato .rd-hero__note {
  margin-top: auto;
  padding-top: 12px;
}

.rd-despesas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
}

.rd-despesas__body {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Empilhado (celular ou coluna estreita), a rosca fica sozinha na linha —
   encostada à esquerda ela parece desalinhada da legenda de baixo. */
@media (max-width: 719px) {
  .rd-despesas__body {
    justify-content: center;
  }
}

.rd-donut {
  flex: none;
  line-height: 0;
}

/* Rampa de um tom só (dourado): as fatias já vêm ordenadas da maior para a
   menor, então o degradê sozinho conta a ordem — não precisa de cores
   diferentes, que competiriam com o dourado da marca. */
.rd-despesas {
  --fatia-1: #6f5215;
  --fatia-2: #8f6c1c;
  --fatia-3: #a87c1a;
  --fatia-4: #c9a94f;
  --fatia-5: #e2cf8e;
  --fatia-6: #efe3c3;
}

.rd-donut__arc {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
}

.rd-donut__arc--1 { stroke: var(--fatia-1); }
.rd-donut__arc--2 { stroke: var(--fatia-2); }
.rd-donut__arc--3 { stroke: var(--fatia-3); }
.rd-donut__arc--4 { stroke: var(--fatia-4); }
.rd-donut__arc--5 { stroke: var(--fatia-5); }
.rd-donut__arc--6 { stroke: var(--fatia-6); }

.rd-despesas__dot--1 { background: var(--fatia-1); }
.rd-despesas__dot--2 { background: var(--fatia-2); }
.rd-despesas__dot--3 { background: var(--fatia-3); }
.rd-despesas__dot--4 { background: var(--fatia-4); }
.rd-despesas__dot--5 { background: var(--fatia-5); }
.rd-despesas__dot--6 { background: var(--fatia-6); }

.rd-donut__total {
  font-family: var(--rd-serif);
  font-size: 17px;
  font-weight: 600;
  fill: var(--rd-text);
}

.rd-donut__sub {
  font-size: 8.5px;
  fill: var(--rd-text-3);
}

.rd-despesas__legend {
  flex: 1 1 200px;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.rd-despesas__item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 11.5px;
}

.rd-despesas__dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  align-self: center;
}

.rd-despesas__rotulo {
  color: var(--rd-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-despesas__pct {
  grid-column: 3;
  color: var(--rd-text-3);
  font-variant-numeric: tabular-nums;
}

.rd-despesas__valor {
  grid-column: 2 / -1;
  font-size: 12.5px;
  color: var(--rd-text);
  font-variant-numeric: tabular-nums;
}

/* Cabecalho de cartao com titulo + legenda a direita (grafico do
   Parcelamento, que saiu de dentro do painel branco). */
.rd-cardhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.rd-cardhead .rd-support {
  margin: 0;
}

/* Conta Corrente Fiscal: o hero passou a ABRIR a ficha, entao o antigo
   painel branco vira so um empilhamento — e cada subsecao (RFB, PGFN) vira
   um cartao proprio, em vez de blocos separados por um filete dentro do
   mesmo painel. */
.fiscal-current-account-panel {
  gap: 14px;
}

.rd-card.fiscal-current-account-subsection {
  padding: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rd-line);
}

.fiscal-current-account-subsection__head {
  align-items: flex-start;
}

.fiscal-current-account-subsection__head .rd-support {
  margin: 2px 0 0;
}

/* O selo de situacao (record-status) dentro do hero navy: as variantes
   herdadas de app.css sao pilulas translucidas pensadas para cartao escuro,
   entao aqui so garantimos o alinhamento no topo direito. */
.rd-cca-hero .rd-hero__top .record-status {
  flex: none;
  margin-top: 4px;
}

/* Rodape do bloco (nota da carga, memoria de calculo, folha em detalhe):
   sai do painel branco que existia e vira uma faixa discreta. */
.rd-herofoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -4px 0 16px;
}

.rd-herofoot:empty {
  display: none;
}

.rd-herofoot .rd-support {
  margin: 0;
  flex: 1 1 260px;
  min-width: 0;
}

/* ===========================================================================
   29. Sub-navegacao do modulo no mobile (handoff)
   =========================================================================== */

/* So existe visualmente no mobile: tablet e desktop tem outra forma de
   navegar entre os itens do modulo (trilho + .rd-navsub no desktop). */
.rd-modtabs {
  display: none;
}

@media (max-width: 640px) {
  .rd-modtabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 2px 12px;
    margin: -4px 0 12px;
    /* Sem barra de rolagem visivel — a rolagem horizontal ja fica evidente
       pelo corte do ultimo chip. */
    scrollbar-width: none;
  }

  .rd-modtabs::-webkit-scrollbar {
    display: none;
  }

  .rd-modtabs__link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--rd-line-strong);
    border-radius: var(--rd-radius-pill);
    background: var(--rd-card);
    color: var(--rd-text-2);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .rd-modtabs__link.is-active {
    border-color: var(--rd-navy);
    background: var(--rd-navy);
    color: var(--rd-on-navy);
  }
}

/* ===========================================================================
   27. Assistente do Escritório — ícone flutuante (global, só admin)
   ---------------------------------------------------------------------------
   Componentes de mensagem/conversa/formulário são os MESMOS do Gestor
   Particular do cliente (app/templates/client/gestao_gestor_ia.html, que
   ainda mantém sua própria cópia no <style> da página — duplicado de
   propósito para não arriscar mexer numa tela já testada; aqui viram
   globais porque o widget aparece em qualquer tela do app, não só numa
   página dedicada). Ver app/templates/admin/_gestor_escritorio_widget.html
   e app/static/js/gestor_ia.js (initGestorIAChat, uma instância por
   [data-gia-chat-root] — o widget e a página do cliente podem coexistir).
   =========================================================================== */

.gia-toggle { border: 1px solid var(--rd-line-strong); background: var(--rd-soft); border-radius: 8px;
  width: 30px; height: 30px; line-height: 1; font-size: 1.05rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--rd-gold); flex: none; }
.gia-toggle:hover { background: var(--rd-warn-bg); }
.gia-toggle svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.gia-sidebar__search { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rd-line-strong);
  background: var(--rd-card); color: var(--rd-text); font-size: .85rem; font-family: inherit; }
.gia-convlist { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
.gia-conv { display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; text-align: left; background: transparent; width: 100%; }
.gia-conv:hover { background: var(--rd-soft); }
.gia-conv.is-active { border-color: var(--rd-line-strong); background: var(--rd-warn-bg); }
.gia-conv__title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.gia-conv__actions { display: flex; align-items: center; gap: .1rem; flex: none; }
.gia-conv__rename, .gia-conv__delete { opacity: .55; border: none; background: none; cursor: pointer; font-size: .9rem; padding: .1rem .3rem; }
.gia-conv__rename:hover, .gia-conv__delete:hover { opacity: 1; }
.gia-conv__rename-input { flex: 1; min-width: 0; font-size: .9rem; font-family: inherit; color: inherit;
  background: var(--rd-card); border: 1px solid var(--rd-line-strong); border-radius: 6px; padding: .1rem .35rem; }
.gia-conv__rename-input:focus { outline: none; border-color: var(--rd-gold); }
.gia-convlist__empty { font-size: .85rem; opacity: .65; padding: .5rem .25rem; }

.gia-msg { max-width: 85%; padding: .7rem .95rem; border-radius: 16px; line-height: 1.5; font-size: .95rem; overflow-wrap: anywhere; }
.gia-msg--user { align-self: flex-end; background: var(--rd-navy-surface); color: var(--rd-on-navy);
  border: 1px solid var(--rd-navy-surface); border-bottom-right-radius: 6px; display: flex; flex-direction: column; gap: .4rem; }
.gia-msg__image { max-width: 100%; max-height: 220px; border-radius: 10px; display: block; object-fit: contain;
  cursor: zoom-in; }
.gia-msg--assistant { align-self: flex-start; display: flex; align-items: flex-start; gap: 9px;
  max-width: 92%; padding: 0; background: transparent; border: 0; }
.gia-msg__avatar { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 9px;
  background: var(--rd-navy-surface); display: flex; align-items: center; justify-content: center; }
.gia-msg__avatar svg { width: 14px; height: 14px; fill: none; stroke: var(--rd-gold-bright);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gia-msg__body { flex: 1; min-width: 0; background: var(--rd-card); border: 1px solid var(--rd-line);
  border-radius: 14px; border-top-left-radius: 5px; padding: .7rem .95rem; }
.gia-msg--pending.gia-msg--assistant { align-items: center; }
.gia-msg--pending .gia-msg__body { display: flex; align-items: center; gap: .55rem; }
.gia-msg__body h2, .gia-msg__body h3, .gia-msg__body h4 { font-size: 1rem; margin: .55rem 0 .25rem; color: var(--rd-gold); }
.gia-msg__body ul, .gia-msg__body ol { margin: .35rem 0 .35rem 1.15rem; }
.gia-msg__body li { margin: .18rem 0; }
.gia-msg__body p { margin: .28rem 0; }
.gia-msg__body p:first-child { margin-top: 0; }
.gia-msg__body strong { color: var(--rd-gold); }
.gia-msg__body code { background: var(--rd-soft); padding: .05rem .3rem; border-radius: 4px; font-size: .88em; }
.gia-msg__body .gia-callout { margin: .6rem 0 .15rem; padding: .55rem .8rem;
  background: var(--rd-warn-bg); border-left: 3px solid var(--rd-gold); border-radius: 0 10px 10px 0; }
.gia-msg__body .gia-callout p { margin: .2rem 0; }
.gia-msg__body .gia-callout p:first-child { margin-top: 0; }
.gia-msg__body .gia-callout p:last-child { margin-bottom: 0; }
.gia-msg__body .gia-callout strong { color: var(--rd-gold); }
.gia-msg--assistant .gia-num { font-weight: 700; white-space: nowrap; }
.gia-msg--assistant .gia-num--money { color: var(--rd-gold); background: var(--rd-warn-bg); padding: .02rem .3rem; border-radius: 5px; }
.gia-msg--assistant .gia-num--pct { color: var(--rd-ok-text); background: var(--rd-ok-bg); padding: .02rem .28rem; border-radius: 5px; }
.gia-msg--assistant .gia-table-wrap { overflow-x: auto; margin: .5rem 0; -webkit-overflow-scrolling: touch; }
.gia-msg--assistant .gia-table { border-collapse: collapse; font-size: .85rem; min-width: 200px; }
.gia-msg--assistant .gia-table th, .gia-msg--assistant .gia-table td {
  border: 1px solid var(--rd-line); padding: .32rem .5rem; text-align: left; white-space: nowrap; }
.gia-msg--assistant .gia-table th { background: var(--rd-soft); color: var(--rd-gold); }

.gia-typing { display: inline-flex; gap: 4px; flex: none; }
.gia-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-gold);
  opacity: .35; animation: gia-typing-bounce 1.2s ease-in-out infinite; }
.gia-typing i:nth-child(2) { animation-delay: .15s; }
.gia-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes gia-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-4px); opacity: .95; }
}
.gia-pending-text { font-style: italic; opacity: .7; transition: opacity .25s ease; }
.gia-pending-text.is-swapping { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gia-typing i { animation: none; opacity: .7; } }

.gia-image-preview { display: flex; align-items: center; gap: .6rem; margin: .5rem 0;
  padding: .4rem .6rem; border: 1px solid var(--rd-line); border-radius: 10px; background: var(--rd-soft); flex: none; }
.gia-image-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none;
  overflow: hidden; background: var(--rd-line); color: transparent; font-size: 0; }
.gia-image-preview span { flex: 1; font-size: .8rem; opacity: .8; }
/* Navegador não conseguiu pré-visualizar (perfil de cor/encoding incomum
   de alguns prints colados) mas o anexo continua válido pra enviar — ícone
   genérico no lugar da miniatura em vez de deixar o quadrado vazio. */
.gia-image-preview--no-thumb img { position: relative; }
.gia-image-preview--no-thumb img::after {
  content: "🖼"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 18px; }
.gia-image-preview img { cursor: zoom-in; }

/* Lightbox: amplia a miniatura anexada (antes de enviar) ou já enviada no
   histórico — um único elemento reaproveitado por todas as instâncias do
   chat na página (ver gestor_ia.js). */
.gia-lightbox { position: fixed; inset: 0; z-index: 1400; background: rgba(20, 16, 8, .82);
  display: flex; align-items: center; justify-content: center; padding: 5vh 5vw; cursor: zoom-out; }
.gia-lightbox[hidden] { display: none; }
.gia-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45); cursor: default; }
.gia-lightbox__close { position: fixed; top: 18px; right: 22px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .35);
  color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gia-lightbox__close:hover { background: rgba(0, 0, 0, .55); }
.gia-image-preview button { flex: none; border: none; background: none; cursor: pointer;
  font-size: 1rem; color: var(--rd-text); opacity: .6; padding: .2rem .4rem; }
.gia-image-preview button:hover { opacity: 1; }

.gia-attach-btn { flex: none; width: 44px; height: 52px; border: 1px solid var(--rd-line-strong);
  background: var(--rd-card); border-radius: 12px; color: var(--rd-gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.gia-attach-btn:hover:not(:disabled) { background: var(--rd-soft); }
.gia-attach-btn:disabled { opacity: .5; cursor: not-allowed; }
.gia-attach-btn svg { width: 18px; height: 18px; }

.gia-chat__form { display: flex; gap: .5rem; align-items: flex-end; flex: none; }
.gia-chat__form textarea { flex: 1; resize: none; min-height: 48px; max-height: 140px; border-radius: 14px;
  font-size: 16px; padding: 12px 14px; border: 1px solid var(--rd-line-strong); background: var(--rd-card);
  color: var(--rd-text); font-family: inherit; }
.gia-chat__form textarea::placeholder { color: #b8ae9c; }
.gia-chat__send { flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 14px;
  background: var(--rd-navy-surface); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; }
.gia-chat__send:hover:not(:disabled) { background: #1a2647; }
.gia-chat__send:disabled { opacity: .5; cursor: not-allowed; }
.gia-chat__send svg { width: 18px; height: 18px; flex: none; }

/* --- ícone flutuante + painel ---------------------------------------- */

.gia-widget__fab { position: fixed; right: 20px; bottom: 20px; z-index: 1300;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--rd-navy-surface); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.25); transition: transform .15s ease, background-color .15s ease; }
.gia-widget__fab:hover { background: #1a2647; transform: translateY(-2px); }
.gia-widget__fab svg { width: 24px; height: 24px; flex: none; }
.gia-widget__fab-icon-open, .gia-widget__fab-icon-close { position: absolute; }

.gia-widget__panel { position: fixed; right: 20px; bottom: 88px; z-index: 1300;
  width: 380px; max-width: calc(100vw - 24px);
  height: 600px; max-height: calc(100dvh - 130px);
  background: var(--rd-card); border: 1px solid var(--rd-line-strong); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden;
  transition: width .15s ease, height .15s ease; }
.gia-widget__panel[hidden] { display: none; }
/* Painel "aumentado" — ainda flutuante, não tela cheia (pedido do
   usuário: só espaço pra ler a mensagem com tranquilidade). */
.gia-widget__panel.is-expanded { width: 640px; max-width: calc(100vw - 24px);
  height: 760px; max-height: calc(100dvh - 60px); }

#gestor-ia-escritorio-root { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }

.gia-widget__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .8rem .9rem; border-bottom: 1px solid var(--rd-line); flex: none; }
.gia-widget__title { font-size: .92rem; font-weight: 700; color: var(--rd-text); }
.gia-widget__head-actions { display: flex; align-items: center; gap: .3rem; }
.gia-toggle--conversas { font-size: 1.1rem; }

/* Sidebar de conversas dentro do widget: cobre o painel como uma gaveta. */
.gia-widget__sidebar { position: absolute; inset: 0; top: 53px; background: var(--rd-card); z-index: 2;
  transform: translateX(0); transition: transform .18s ease; display: flex; flex-direction: column; }
.gia-widget__sidebar.is-collapsed { transform: translateX(-102%); pointer-events: none; }
.gia-widget__sidebar .gia-sidebar__body { flex: 1; min-height: 0; display: flex; flex-direction: column;
  gap: .5rem; padding: .75rem; overflow-y: auto; }

.gia-widget__chat { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .75rem .9rem .9rem; }
.gia-widget__chat .gia-chat__messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .65rem; padding: 0 0 .5rem; }
.gia-widget__welcome-note { font-size: .78rem; opacity: .7; margin-top: .5rem; }
.gia-widget__disabled-note { font-size: .76rem; opacity: .65; margin-top: .4rem; text-align: center; }
.gia-chat__welcome p { margin: .3rem 0; font-size: .88rem; }

@media (max-width: 520px) {
  .gia-widget__fab { right: 14px; bottom: 14px; }
  .gia-widget__panel { right: 8px; left: 8px; bottom: 78px; width: auto; height: min(600px, calc(100dvh - 100px)); }
}

/* ===========================================================================
   19. Popup de vencimento do certificado digital (home do cliente)
   ---------------------------------------------------------------------------
   Dispara na entrada do app quando o certificado ativo da organizacao
   selecionada vence em ate N dias (auth.routes._CERTIFICATE_ALERT_LOOKAHEAD_
   DAYS) ou ja venceu. Visual propositalmente mais chamativo que os demais
   modais do portal — gradiente de alerta + numero de dias em destaque —
   porque e um aviso operacional (emissao de nota fiscal pode parar).
   =========================================================================== */

.cert-alert-modal {
  position: fixed;
  z-index: 150;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
}

.cert-alert-modal[hidden] {
  display: none !important;
}

.cert-alert-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 8, 0.58);
  backdrop-filter: blur(3px);
}

.cert-alert-dialog {
  position: relative;
  width: min(440px, 100%);
  max-height: min(92dvh, 640px);
  overflow-y: auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 30px 26px 26px;
  text-align: center;
  border-radius: var(--rd-radius-card-lg);
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(217, 138, 55, 0.16), transparent 60%),
    var(--rd-card);
  border: 1px solid var(--rd-warn-line);
  box-shadow: 0 30px 70px rgba(20, 12, 8, 0.38);
  animation: cert-alert-pop 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.cert-alert-modal--expired .cert-alert-dialog {
  border-color: var(--rd-danger-line);
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(192, 73, 47, 0.18), transparent 60%),
    var(--rd-card);
}

@keyframes cert-alert-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cert-alert-dialog {
    animation: none;
  }
}

.cert-alert-dialog__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--rd-radius-pill);
  background: transparent;
  color: var(--rd-text-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cert-alert-dialog__close:hover {
  background: var(--rd-soft);
  color: var(--rd-text);
}

.cert-alert-dialog__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--rd-radius-pill);
  color: var(--rd-warn-text);
  background: var(--rd-warn-bg);
  border: 1px solid var(--rd-warn-line);
  animation: cert-alert-pulse 1.8s ease-in-out infinite;
}

.cert-alert-modal--expired .cert-alert-dialog__icon {
  color: var(--rd-danger-text);
  background: var(--rd-danger-bg);
  border-color: var(--rd-danger-line);
}

@keyframes cert-alert-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(184, 138, 38, 0.28);
  }

  50% {
    box-shadow: 0 0 0 9px rgba(184, 138, 38, 0);
  }
}

.cert-alert-modal--expired .cert-alert-dialog__icon {
  animation-name: cert-alert-pulse-danger;
}

@keyframes cert-alert-pulse-danger {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(192, 73, 47, 0.3);
  }

  50% {
    box-shadow: 0 0 0 9px rgba(192, 73, 47, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cert-alert-dialog__icon {
    animation: none;
  }
}

.cert-alert-dialog__eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-warn-text);
}

.cert-alert-modal--expired .cert-alert-dialog__eyebrow {
  color: var(--rd-danger-text);
}

.cert-alert-dialog__title {
  margin: 0;
  font-family: var(--rd-serif);
  font-size: 21px;
  line-height: 1.3;
  color: var(--rd-text);
}

.cert-alert-countdown {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 4px 0;
  padding: 10px 22px;
  border-radius: var(--rd-radius-card);
  background: var(--rd-warn-bg);
  border: 1px solid var(--rd-warn-line);
}

.cert-alert-modal--expired .cert-alert-countdown {
  background: var(--rd-danger-bg);
  border-color: var(--rd-danger-line);
}

.cert-alert-countdown__number {
  font-family: var(--rd-serif);
  font-size: 44px;
  line-height: 1;
  color: var(--rd-warn-text);
}

.cert-alert-modal--expired .cert-alert-countdown__number {
  color: var(--rd-danger-text);
}

.cert-alert-countdown__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--rd-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cert-alert-dialog__meta {
  margin: 0;
  font-size: 13px;
  color: var(--rd-text-2);
}

.cert-alert-dialog__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rd-text-2);
}

.cert-alert-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
}

.cert-alert-dialog__actions .rd-btn {
  flex: 1 1 auto;
  min-width: 150px;
}

@media (max-width: 480px) {
  .cert-alert-dialog {
    padding: 26px 18px 20px;
  }

  .cert-alert-dialog__actions {
    flex-direction: column-reverse;
  }

  .cert-alert-dialog__actions .rd-btn {
    width: 100%;
  }
}

/* ===========================================================================
   30. Societario — hero da pasta + importar lado a lado
   ---------------------------------------------------------------------------
   Mesma ideia de layout em 2 colunas de Notas Fiscais (.rd-notas-hero-row) e
   Livros Fiscais (.rd-restricted-row). Nasceu no Certificado Digital (por
   isso o prefixo rd-cert-*) e hoje vale para todas as fichas do Societario
   que passam por list_yearly.html com folder_hero definido: Certidoes,
   Contratos, Documentos da empresa, Licenciamento e Certificado Digital.
   Sem importador (cliente), o cartao ocupa a linha inteira
   (.rd-cert-row--single).
   =========================================================================== */

.rd-cert-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .rd-cert-row {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  }

  .rd-cert-row--single {
    grid-template-columns: 1fr;
  }
}

.rd-cert-hero {
  display: grid;
  align-content: start;
}

.rd-cert-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Faixa do certificado A1 no rodape do hero navy de Certidoes. Chega por
   fetch (ver client/_certidoes_certificado_faixa.html), por isso o slot
   vazio nao pode deixar borda nem espaco sobrando. */
.rd-certstrip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--rd-on-navy-line);
}

.rd-certstrip__icon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(232, 179, 74, 0.16);
  color: #e8b34a;
}

.rd-certstrip--ok .rd-certstrip__icon {
  background: rgba(127, 199, 154, 0.16);
  color: #7fc79a;
}

.rd-certstrip--danger .rd-certstrip__icon {
  background: rgba(240, 185, 168, 0.16);
  color: #f0b9a8;
}

.rd-certstrip__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 220px;
  min-width: 0;
}

.rd-certstrip__body strong {
  font-size: 13px;
  color: var(--rd-on-navy);
}

.rd-certstrip__body span {
  font-size: 11.5px;
  color: var(--rd-on-navy-muted);
}

/* Botao claro sobre o navy: o .rd-btn padrao e feito para fundo creme e
   some aqui. */
.rd-btn--onnavy {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--rd-on-navy-line);
  color: var(--rd-on-navy);
}

.rd-btn--onnavy:hover {
  background: rgba(255, 255, 255, 0.16);
}

.rd-cert-hero__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rd-cert-hero__pill {
  min-width: 92px;
  padding: 8px 12px;
  border-radius: var(--rd-radius-field);
  background: rgba(245, 241, 230, 0.08);
  border: 1px solid var(--rd-on-navy-line);
}

.rd-cert-hero__pill span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-on-navy-muted);
}

.rd-cert-hero__pill strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--rd-on-navy);
}

.rd-cert-hero__pill--warn strong {
  color: var(--rd-on-navy-warn);
}

.rd-cert-hero__pill--danger strong {
  color: var(--rd-on-navy-danger);
}

.rd-cert-hero__pill--ok strong {
  color: var(--rd-on-navy-ok);
}

/* ===========================================================================
   31. Faturamento MEI — limite anual de R$ 81.000,00
   ---------------------------------------------------------------------------
   Ficha so do regime MEI: cartao navy com o consumo do teto anual (barra que
   trava em 100%, com o excedente por extenso ao lado), grafico de 12 colunas
   do ano-calendario com linha de referencia da media mensal e a tabela mes a
   mes. Mesmo grid de 2 colunas de Notas Fiscais (.rd-notas-hero-row), com
   nome proprio porque o cartao lateral aqui e um bloco de regra/alerta, nao
   um formulario de upload.
   =========================================================================== */

.rd-mei-hero-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .rd-mei-hero-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  }
}

.rd-mei-hero {
  min-width: 0;
  max-width: 100%;
}

.rd-mei-hero__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.rd-mei-gauge {
  margin-top: 18px;
}

.rd-mei-gauge__track {
  height: 10px;
  border-radius: var(--rd-radius-pill);
  background: rgba(245, 241, 230, 0.14);
  overflow: hidden;
}

.rd-mei-gauge__fill {
  height: 100%;
  min-width: 2px;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-gold-bright);
  transition: width 0.4s ease;
}

.rd-mei-gauge__fill--ok {
  background: var(--rd-on-navy-ok);
}

.rd-mei-gauge__fill--warn {
  background: var(--rd-on-navy-warn);
}

.rd-mei-gauge__fill--danger {
  background: var(--rd-on-navy-danger);
}

.rd-mei-gauge__scale {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--rd-on-navy-muted);
}

.rd-mei-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rd-mei-alert {
  padding: 12px 14px;
  border: 1px solid var(--rd-neutral-line);
  border-radius: var(--rd-radius-field);
  background: var(--rd-neutral-bg);
  color: var(--rd-text);
  font-size: 12.5px;
  line-height: 1.5;
}

.rd-mei-alert strong {
  display: block;
  margin-bottom: 4px;
}

.rd-mei-alert p {
  margin: 0;
}

.rd-mei-alert--ok {
  border-color: var(--rd-ok-line);
  background: var(--rd-ok-bg);
  color: var(--rd-ok-text);
}

.rd-mei-alert--warn {
  border-color: var(--rd-warn-line);
  background: var(--rd-warn-bg);
  color: var(--rd-warn-text);
}

.rd-mei-alert--danger {
  border-color: var(--rd-danger-line);
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.rd-mei-alert--info {
  border-color: var(--rd-info-line);
  background: var(--rd-info-bg);
  color: var(--rd-info-text);
}

.rd-mei-rules {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rd-text-2);
}

.rd-mei-rules strong {
  color: var(--rd-text);
}

/* Grafico de 12 colunas: as barras e os rotulos ficam em duas linhas flex
   iguais (.rd-mei-chart__row), para as colunas casarem sem grid explicito.
   A linha de referencia e posicionada dentro do plot, que por isso tem
   altura fixa — se ela morasse na mesma caixa dos rotulos, o "bottom: N%"
   deixaria de bater com a altura das barras. */
.rd-mei-chart {
  margin-top: 14px;
}

/* Sem padding vertical de proposito: a altura das barras (%) e o "bottom"
   da linha de referencia sao medidos na mesma caixa, entao qualquer padding
   aqui desalinharia a linha das barras. */
.rd-mei-chart__plot {
  position: relative;
  height: 180px;
  border-bottom: 1px solid var(--rd-line);
}

.rd-mei-chart__row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100%;
}

.rd-mei-chart__row--axis {
  height: auto;
  margin-top: 6px;
}

.rd-mei-chart__col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.rd-mei-chart__col--label {
  height: auto;
  justify-content: center;
  font-size: 10.5px;
  color: var(--rd-text-3);
}

.rd-mei-chart__bar {
  width: 100%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--rd-navy-surface);
}

/* Mes que sozinho ja passou da media que cabe no limite: sinaliza sem
   afirmar irregularidade — um mes forte so vira problema no acumulado. */
.rd-mei-chart__bar--over {
  background: var(--rd-edge-due);
}

.rd-mei-chart__bar--future {
  background: var(--rd-line-strong);
}

.rd-mei-chart__limit {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--rd-line-strong);
  pointer-events: none;
}

.rd-mei-chart__limit-tag {
  position: absolute;
  right: 0;
  top: -8px;
  padding: 1px 6px;
  border-radius: var(--rd-radius-pill);
  background: var(--rd-soft);
  font-size: 10px;
  font-weight: 700;
  color: var(--rd-text-2);
}

/* Tabela do detalhamento -----------------------------------------------
   Duas correcoes sobre .rd-table, ambas de especificidade: `.rd-table th`
   (0,1,1) vence `.rd-table__num` (0,1,0), entao o rotulo da coluna numerica
   ficava a esquerda enquanto o valor ia pra direita; e a celula do mes, que
   e um <th scope="row"> pro leitor de tela saber a que mes a linha se
   refere, herdava a aparencia de cabecalho (fundo bege, caixa alta, 10px). */
.rd-mei-table th.rd-table__num {
  text-align: right;
}

.rd-mei-table tbody th {
  padding: 11px 12px;
  border-bottom: 1px solid var(--rd-line-soft);
  background: transparent;
  color: var(--rd-text);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
}

.rd-mei-table tbody tr:last-child th {
  border-bottom: 0;
}

/* Linha de total: destacada como fecho da tabela, nao como cabecalho. */
.rd-mei-table tfoot th,
.rd-mei-table tfoot td {
  padding: 11px 12px;
  border-top: 1px solid var(--rd-line);
  border-bottom: 0;
  background: var(--rd-soft);
  color: var(--rd-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.rd-mei-source {
  margin-top: 12px;
}

/* ===========================================================================
   32. Conta Corrente Fiscal — hero de divida consolidada + importar lado a
       lado
   ---------------------------------------------------------------------------
   Mesma ideia de layout em 2 colunas de Notas Fiscais (.rd-notas-hero-row),
   Livros Fiscais (.rd-restricted-row) e Certificado Digital (.rd-cert-row):
   o hero "Total consolidado em aberto" ganha o cartao "Importar arquivos"
   sempre visivel ao lado, dentro do proprio painel de Resumo da Situacao
   Fiscal. Nome proprio porque list_monthly.html e compartilhado com as
   demais pastas fiscais (Impostos, Parcelamento, Livros Fiscais), que nao
   devem ganhar esse grid.
   =========================================================================== */

.rd-cca-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .rd-cca-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  }
}

/* Mesma trava de seguranca do .rd-notas-hero (ver comentario la): item de
   grid precisa de min-width:0 pra nao ser forcado a crescer pelas linhas
   do split RFB/PGFN/atraso. */
.rd-cca-hero {
  max-width: 100%;
  min-width: 0;
}

/* ===========================================================================
   Painel de Parcelamento — dois cartoes lado a lado (Guia do mes / Guias em
   atraso), no lugar do cartao unico com selo "Em dia"/"Em atraso" escondido
   numa linha pequena. O segundo cartao ganha o tom de perigo (.rd-hero--danger)
   via JS (charts.js) so quando ha guia atrasada.
   =========================================================================== */
.rd-parcelamento-cards-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 768px) {
  .rd-parcelamento-cards-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===========================================================================
   Simulação de parcelamento (Conta Corrente Fiscal, só-admin)
   =========================================================================== */

.fiscal-simulacao {
  margin-top: 16px;
}

.fiscal-simulacao__form {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.fiscal-simulacao__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.fiscal-simulacao__field {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 190px;
}

.fiscal-simulacao__field > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--rd-text-2);
}

.fiscal-simulacao__field select,
.fiscal-simulacao__field input {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--rd-line-strong);
  border-radius: var(--rd-radius-field);
  background: var(--rd-card);
  color: var(--rd-text);
  font-family: inherit;
  font-size: 13.5px;
}

.fiscal-simulacao__hint {
  margin: 0;
  font-size: 12px;
}

.fiscal-simulacao__resultado {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rd-line);
}

.fiscal-simulacao__resultado[hidden] {
  display: none;
}

.fiscal-simulacao__grid {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}

.fiscal-simulacao__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rd-line);
}

.fiscal-simulacao__linha > span {
  font-size: 13px;
  color: var(--rd-text-2);
}

.fiscal-simulacao__linha > strong {
  font-family: var(--rd-serif);
  font-size: 15px;
  white-space: nowrap;
}

/* A parcela e o numero que decide a adesao -- e o unico em destaque. */
.fiscal-simulacao__linha--destaque {
  border-bottom: 0;
}

.fiscal-simulacao__linha--destaque > strong {
  font-size: 21px;
  color: var(--rd-gold);
}

.fiscal-simulacao__acoes {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 640px) {
  .fiscal-simulacao__row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===========================================================================
   Ferramentas do escritorio: Painel do dia, Validacoes e Obrigacoes
   ---------------------------------------------------------------------------
   As tres telas nasceram com um <style> proprio dentro do template, cada uma
   redesenhando os MESMOS componentes com um prefixo diferente (hj-, val-,
   ob-): barra de cabecalho, contadores, abas em pilula, selo de situacao,
   barra de acao grudada embaixo. Duas consequencias:

   1. Modo noturno quebrado. Elas estendem o shell do CLIENTE (nao o
      .admin-module-page, que ja escurece em bloco), e usavam literais:
      borda rgba(0,0,0,.12) some no escuro, selo #e3efe6/#2f7d4f vira chip
      claro no meio da pagina escura, e `var(--rd-surface, #fff)` caia SEMPRE
      no branco -- --rd-surface nunca existiu, o token e --rd-card.
   2. Tres paletas de status para manter, divergindo a cada retoque.

   Aqui elas passam a usar os tokens que ja existem nos dois temas
   (--rd-line, --rd-card, --rd-ok-*, --rd-warn-*, --rd-danger-*, --rd-info-*).
   Os nomes de classe ficam como estao: renomear obrigaria a mexer no markup
   das tres telas sem ganho nenhum.
   =========================================================================== */

/* --- barra de cabecalho ---------------------------------------------- */
.hj-head,
.val-head,
.ob-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* --- contadores ------------------------------------------------------- */
.val-counts,
.ob-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.val-count,
.ob-count {
  border: 1px solid var(--rd-line);
  border-radius: 10px;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  background: var(--rd-card);
}

.val-count strong,
.ob-count strong {
  display: block;
  font-size: 1.1rem;
}

/* --- abas em pilula --------------------------------------------------- */
.val-tabs,
.ob-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.val-tabs a,
.ob-tabs a {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--rd-line);
  font-size: 0.82rem;
  text-decoration: none;
  color: inherit;
}

/* A aba ativa usa o mesmo ouro dos chips do cliente (.rd-chip.is-active),
   em vez do rgba(139,104,57,.12) literal que as duas telas repetiam. */
.val-tabs a.is-active,
.ob-tabs a.is-active {
  background: color-mix(in srgb, var(--rd-gold) 12%, transparent);
  border-color: var(--rd-gold);
  color: var(--rd-gold);
  font-weight: 700;
}

/* --- filtros ---------------------------------------------------------- */
.val-filters,
.ob-filters,
.val-run {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 1rem;
}

.val-run {
  margin-bottom: 0;
}

.val-filters label,
.ob-filters label,
.val-run label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
}

.val-filters select,
.val-filters input,
.ob-filters select {
  min-width: 150px;
}

/* --- selo de situacao (severidade e status) --------------------------- */
.hj-sev,
.val-sev,
.ob-st {
  display: inline-block;
  padding: 0.12em 0.55em;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Selo dentro da linha do numero grande (".hj-n"): acompanha o tamanho dela
   em vez de ficar minusculo ao lado de um numero de 1.6rem. */
.hj-sev--inline {
  font-size: 1rem;
}

.hj-sev--critico,
.hj-sev--alto,
.hj-bad,
.val-sev--critico,
.val-sev--alto,
.ob-st--atrasada {
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.hj-sev--medio,
.hj-warn,
.val-sev--medio {
  background: var(--rd-warn-bg);
  color: var(--rd-warn-text);
}

.hj-sev--baixo,
.hj-sev--info,
.hj-ok,
.val-sev--baixo,
.val-sev--info,
.ob-st--cumprida {
  background: var(--rd-ok-bg);
  color: var(--rd-ok-text);
}

.ob-st--prevista {
  background: var(--rd-info-bg);
  color: var(--rd-info-text);
}

.ob-st--dispensada {
  background: var(--rd-neutral-bg);
  color: var(--rd-text-3);
}

/* --- barra de acao grudada no rodape ---------------------------------- */
.val-actions,
.ob-actions {
  position: sticky;
  bottom: 0;
  background: var(--rd-card);
  border-top: 1px solid var(--rd-line);
  padding: 0.7rem 0;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.val-actions input[type="text"],
.val-actions select {
  min-width: 180px;
}

/* --- Painel do dia ---------------------------------------------------- */
.hj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
}

.hj-card {
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: var(--rd-card);
}

.hj-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}

.hj-card h2 a {
  font-size: 0.78rem;
  font-weight: 500;
}

.hj-n {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.hj-n__sub {
  font-size: 0.9rem;
  font-weight: 400;
}

/* Nome + barra + porcentagem. A largura fixa de 140px no nome (como estava
   no <style> da tela) somada ao minimo da barra estourava o proprio
   contêiner quando a lista do lado era longa: a barra passava por cima do
   texto. Agora o nome encolhe com reticencias e a barra tem um teto. */
.hj-progress {
  flex: 1 1 240px;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.hj-progress__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hj-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.86rem;
}

.hj-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  border-bottom: 1px solid var(--rd-line);
  padding: 0.3rem 0;
}

/* Sem isto o texto do lado direito nao encolhe (min-width auto e o padrao do
   flex) e empurra o resto da linha para fora do cartao. */
.hj-list li > * {
  min-width: 0;
}

.hj-list li:last-child {
  border-bottom: 0;
}

/* Separa o rodape "por empresa" das linhas de custo por tipo. */
.hj-list__sep {
  border-top: 1px dashed var(--rd-line);
  margin-top: 0.3rem;
}

.hj-muted {
  color: var(--rd-text-3);
  font-size: 0.8rem;
}

.hj-bar {
  height: 6px;
  background: var(--rd-neutral-bg);
  border-radius: 3px;
  overflow: hidden;
  flex: 0 1 80px;
  min-width: 40px;
}

.hj-bar i {
  display: block;
  height: 100%;
  background: var(--rd-ok-text);
}

/* --- Validacoes ------------------------------------------------------- */
.val-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.val-item {
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  padding: 0.8rem 0.95rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem 0.9rem;
  background: var(--rd-card);
}

.val-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--rd-text-2);
}

.val-item h3 {
  margin: 0.15rem 0 0.3rem;
  font-size: 1rem;
}

.val-item__contador {
  font-size: 0.9rem;
  line-height: 1.45;
}

.val-item__cliente {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.25rem;
  font-size: 0.8rem;
}

.val-item__cliente textarea {
  width: 100%;
  min-height: 64px;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rd-line-strong);
  border-radius: 8px;
  background: var(--rd-card);
  color: var(--rd-text);
}

.val-item__ev {
  font-size: 0.78rem;
  color: var(--rd-text-3);
  margin-top: 0.4rem;
}

/* --- Obrigacoes ------------------------------------------------------- */
.ob-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.ob-table th,
.ob-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--rd-line);
  text-align: left;
  vertical-align: top;
}

.ob-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rd-text-3);
}

.ob-dias {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ob-dias--hoje {
  color: var(--rd-warn-text);
  font-weight: 700;
}

.ob-dias--vencido {
  color: var(--rd-danger-text);
  font-weight: 700;
}

.ob-perfil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem 0.9rem;
  align-items: end;
}

.ob-perfil label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
}

.ob-perfil label.ob-check {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.ob-catalog details {
  margin-top: 0.6rem;
}

.ob-catalog summary {
  cursor: pointer;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Avisos flutuantes (toasts)
   ---------------------------------------------------------------------------
   Eram os ultimos herdeiros visiveis da paleta roxa do app.css: info em
   #5b21b6 (roxo) e erro em #be123c (rosa forte), fora da marca e iguais nos
   dois temas. Aparecem em TODA tela -- a cada upload, sincronizacao ou
   falha --, entao eram o elemento fora do padrao que o usuario mais via.

   Passam a usar o navy da marca (info), o verde e o vermelho dos tokens de
   status. Mantem texto claro, porque os tres fundos sao escuros nos dois
   temas: o toast e uma faixa sobreposta, nao um cartao da pagina.
   ------------------------------------------------------------------------ */
.toast {
  border: 1px solid rgba(245, 241, 230, 0.14);
  box-shadow: 0 10px 24px rgba(16, 25, 47, 0.35);
}

.toast-info {
  background: var(--rd-navy-surface);
  color: var(--rd-on-navy);
}

.toast-success {
  background: #1c6b45;
  color: #eafaf1;
}

.toast-error {
  background: #8b2131;
  color: #fdeceb;
}

/* Janela "Como compartilhar?" (documents_share.js): reusa .zip-download-option
   das Notas Fiscais, mas ali a opcao e um <label> com radio e aqui e um
   <button> que ja executa a escolha — dai o reset do visual nativo do botao. */
.zip-download-option--action {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.zip-download-option--action:focus-visible {
  outline: 2px solid var(--rd-gold, #b9902a);
  outline-offset: 2px;
}

/* ===========================================================================
   Debitos vinculados a cada inscricao da PGFN (Conta Corrente Fiscal)
   ===========================================================================
   Um <details> por inscricao, fechado por padrao — um detalhamento real do
   Regularize traz 19 competencias, e abrir todas empurraria o resto da ficha
   para fora da tela. Sem JS: o disclosure e nativo. */

.fiscal-pgfn-debitos {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rd-line);
}

.fiscal-pgfn-debitos__title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rd-text);
}

.fiscal-pgfn-debitos__item {
  margin-top: 10px;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius, 12px);
  background: var(--rd-soft);
  overflow: hidden;
}

.fiscal-pgfn-debitos__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
}

/* O triangulo nativo do Safari/iOS fica fora do fluxo flex; o indicador
   proprio abaixo (::after) vale nos dois. */
.fiscal-pgfn-debitos__summary::-webkit-details-marker {
  display: none;
}

.fiscal-pgfn-debitos__summary::after {
  content: "+";
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--rd-text-3);
}

.fiscal-pgfn-debitos__item[open] .fiscal-pgfn-debitos__summary::after {
  content: "\2212";
}

.fiscal-pgfn-debitos__inscricao {
  font-weight: 700;
  color: var(--rd-text);
  font-variant-numeric: tabular-nums;
}

.fiscal-pgfn-debitos__meta {
  color: var(--rd-text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.fiscal-pgfn-debitos__selo {
  padding: 2px 9px;
  border-radius: var(--rd-radius-pill, 999px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fiscal-pgfn-debitos__selo--ok {
  background: var(--rd-ok-bg);
  color: var(--rd-ok-text);
}

.fiscal-pgfn-debitos__selo--alerta {
  background: var(--rd-danger-bg);
  color: var(--rd-danger-text);
}

.fiscal-pgfn-debitos__aviso {
  margin: 0 14px 10px;
  font-size: 12px;
  color: var(--rd-danger-text);
}

.fiscal-pgfn-debitos__table {
  min-width: 860px;
}

/* Debito ja quitado por amortizacao continua na lista (ele explica a
   diferenca entre o valor inscrito e o principal em aberto), mas recuado
   para nao competir com o que ainda se deve. */
.fiscal-pgfn-debitos__row--quitado {
  opacity: 0.6;
}

.fiscal-pgfn-debitos__entes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.fiscal-pgfn-debitos__entes li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.fiscal-pgfn-debitos__entes li strong {
  margin-left: auto;
}

.fiscal-pgfn-debitos__ente-ente {
  color: var(--rd-text-3);
}

/* ===========================================================================
   Busca dentro de uma tabela (tabela_busca.js)
   ===========================================================================
   Nasceu nos debitos da Conta Corrente Fiscal; e generica por markup. */

.tabela-busca {
  display: block;
}

.tabela-busca__linha {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.tabela-busca__campo {
  flex: 1 1 260px;
  min-width: 0;
}

.tabela-busca__campo input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--rd-line-strong);
  border-radius: var(--rd-radius-pill, 999px);
  /* --rd-card, nao --rd-surface: esse token nunca existiu e o fallback
     caia sempre no branco, quebrando o modo noturno (ver a nota da secao
     das telas ob-/val- acima). */
  background: var(--rd-card);
  color: var(--rd-text);
  font: inherit;
  font-size: 13px;
}

.tabela-busca__campo input:focus-visible {
  outline: 2px solid var(--rd-gold, #b9902a);
  outline-offset: 1px;
}

.tabela-busca__limpar {
  flex: none;
  padding: 6px 14px;
  font-size: 12px;
}

.tabela-busca__total {
  margin: 0 0 10px;
  color: var(--rd-text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tabela-busca__vazio {
  margin: 10px 0 0;
}

@media (max-width: 640px) {
  .tabela-busca__linha {
    flex-wrap: wrap;
  }
}

/* Nota das multas isoladas (MAED) que ficam fora da listagem, e o link da
   linha da inscricao para as guias dela mais abaixo. */
.tabela-busca__nota {
  margin: 10px 0 0;
  font-size: 12px;
}

.fiscal-pgfn-table__link {
  color: var(--rd-gold);
  text-decoration: none;
  font-weight: 600;
}

.fiscal-pgfn-table__link:hover,
.fiscal-pgfn-table__link:focus-visible {
  text-decoration: underline;
}

/* O alvo do link pisca uma vez, senao abrir um <details> no meio de uma
   lista de inscricoes nao diz QUAL abriu. */
.fiscal-pgfn-debitos__item:target {
  border-color: var(--rd-gold);
}

/* "O que mudou desde a leitura anterior" (Conta Corrente Fiscal): so
   aparece quando ha um retrato anterior gravado. */
.cca-diff {
  padding: 14px 16px;
  margin-bottom: 14px;
}

.cca-diff--alerta {
  border-left: 3px solid var(--rd-danger-text);
}

.cca-diff__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 8px;
}

.cca-diff__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.cca-diff__quando {
  color: var(--rd-text-3);
  font-size: 12px;
}

.cca-diff__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.cca-diff__item {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  font-size: 12.5px;
  padding-left: 10px;
  border-left: 2px solid var(--rd-line);
}

.cca-diff__item span {
  color: var(--rd-text-3);
}

.cca-diff__item--novo {
  border-left-color: var(--rd-danger-text);
}

.cca-diff__item--ok {
  border-left-color: var(--rd-ok-text);
}

.cca-diff__item--atencao {
  border-left-color: var(--rd-gold);
}

.cca-diff__variacao,
.cca-diff__estavel {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--rd-text-3);
}


/* ==========================================================================
   Barra de progresso flutuante do robo Calima (calima_progresso.js).

   Fica ACIMA do botao flutuante do Assistente do Escritorio (bottom: 20px,
   z-index 1300) e com z-index MENOR que ele: os dois convivem na mesma
   quina, e o assistente e' permanente enquanto esta barra e' passageira --
   quem tem de continuar clicavel e' o permanente. Quem quiser trocar isso
   arrasta o cartao, que e' o ponto dele.
   ========================================================================== */
.calima-progresso {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 1290;
  width: min(340px, calc(100vw - 32px));
  background: var(--rd-card, #fff);
  border: 1px solid var(--rd-line-strong, rgba(15, 23, 42, 0.14));
  border-radius: 14px;
  box-shadow: var(--d2-sombra-lg, 0 18px 44px rgba(15, 23, 42, 0.18));
  overflow: hidden;
}

.calima-progresso[hidden] {
  display: none !important;
}

.calima-progresso__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 8px;
  background: var(--rd-soft, #f5f2ea);
  border-bottom: 1px solid var(--rd-line, rgba(15, 23, 42, 0.08));
  /* o cabecalho INTEIRO e' a pega: alvo grande e obvio para arrastar */
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.calima-progresso[data-arrastando] .calima-progresso__topo {
  cursor: grabbing;
}

.calima-progresso__pega {
  display: inline-flex;
  color: var(--rd-text-3, rgba(15, 23, 42, 0.35));
}

.calima-progresso__titulo {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--rd-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calima-progresso__acao {
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--rd-text-2, rgba(15, 23, 42, 0.6));
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.calima-progresso__acao:hover {
  background: var(--rd-neutral-bg, rgba(15, 23, 42, 0.06));
}

.calima-progresso__corpo {
  padding: 12px 14px 14px;
  display: grid;
  gap: 8px;
}

/* Encolhido: sobra a barra de titulo. Serve para tirar o cartao da frente
   sem perder o acompanhamento -- fechar seria abrir mao dele. */
.calima-progresso[data-encolhido="1"] .calima-progresso__corpo {
  display: none;
}

.calima-progresso__contexto {
  margin: 0;
  font-size: 0.78rem;
  color: var(--rd-text-2, rgba(15, 23, 42, 0.6));
}

.calima-progresso__contexto:empty {
  display: none;
}

.calima-progresso__barra {
  width: 100%;
  height: 7px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--rd-neutral-bg, rgba(15, 23, 42, 0.08));
  overflow: hidden;
}

.calima-progresso__barra::-webkit-progress-bar {
  background: var(--rd-neutral-bg, rgba(15, 23, 42, 0.08));
  border-radius: 999px;
}

.calima-progresso__barra::-webkit-progress-value {
  background: var(--rd-gold, #b08d2b);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.calima-progresso__barra::-moz-progress-bar {
  background: var(--rd-gold, #b08d2b);
  border-radius: 999px;
}

.calima-progresso[data-estado="ok"] .calima-progresso__barra::-webkit-progress-value {
  background: var(--rd-ok-text, #0b7a3b);
}

.calima-progresso[data-estado="ok"] .calima-progresso__barra::-moz-progress-bar {
  background: var(--rd-ok-text, #0b7a3b);
}

.calima-progresso[data-estado="erro"] .calima-progresso__barra::-webkit-progress-value {
  background: var(--rd-danger-text, #b42318);
}

.calima-progresso[data-estado="erro"] .calima-progresso__barra::-moz-progress-bar {
  background: var(--rd-danger-text, #b42318);
}

.calima-progresso__etapa {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--rd-text, #0f172a);
}

.calima-progresso[data-estado="erro"] .calima-progresso__etapa {
  color: var(--rd-danger-text, #b42318);
}

.calima-progresso__rodape {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--rd-text-3, rgba(15, 23, 42, 0.45));
}

.calima-progresso__link {
  color: var(--rd-gold, #b08d2b);
  font-weight: 600;
  text-decoration: none;
}

.calima-progresso__link:hover {
  text-decoration: underline;
}

.calima-progresso__link[hidden] {
  display: none;
}

/* No celular a barra de abas do Design v2 ocupa o rodape; o cartao sobe
   para nao cobri-la. */
@media (max-width: 768px) {
  .calima-progresso {
    right: 12px;
    bottom: 150px;
    width: calc(100vw - 24px);
  }
}

/* Treinamento (area de aulas em video, app/modules/treinamento). Reaproveita
   rd-balhero/rd-card/rd-badge; aqui so a grade de modulos, a lista de aulas
   e o player. */
.tr-continuar {
  margin-top: 14px;
}

.tr-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
  margin-top: 14px;
}

.tr-modulo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tr-modulo__title {
  margin: 0;
  font-size: 16px;
}

.tr-aulas {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.tr-aula__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

a.tr-aula__link:hover,
.tr-aula.is-atual .tr-aula__link {
  background: rgba(185, 144, 42, 0.12);
}

.tr-aula.is-embreve .tr-aula__link {
  opacity: 0.6;
}

.tr-aula__status {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  background: rgba(16, 25, 47, 0.08);
}

.tr-aula__status.is-ok {
  background: #2f7d4f;
  color: #fff;
}

.tr-aula__text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.tr-aula__title {
  flex: 1;
  font-weight: 600;
}

.tr-aula-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.tr-player__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #10192f;
  display: block;
}

.tr-videos {
  display: grid;
  gap: 4px;
}

.tr-videos__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(16, 25, 47, 0.08);
}

.tr-videos__info {
  display: grid;
  min-width: 0;
}

.tr-videos__file {
  display: grid;
  gap: 4px;
  font-size: 12px;
  min-width: 0;
}

@media (max-width: 900px) {
  .tr-aula-grid,
  .tr-videos__row {
    grid-template-columns: minmax(0, 1fr);
  }
}