/* Aparência dos relatórios. As regras de impressão existentes permanecem isoladas. */
@media screen {
  #detalhamentoModal, #faturamentoModal {
    --rel-blue: #285ed1; --rel-green: #118157; --rel-orange: #be5b10;
    --rel-violet: #7950c8; --rel-teal: #087f8b;
  }
  body.dark-mode :is(#detalhamentoModal, #faturamentoModal) {
    --rel-blue: #8abaff; --rel-green: #72d6aa; --rel-orange: #ffb475;
    --rel-violet: #c7a7ff; --rel-teal: #78dce2;
  }
  :is(#detalhamentoModal, #faturamentoModal) > .modal {
    padding: 16px; border-radius: 18px; border: 1px solid var(--line);
  }
  #detalhamentoModal h2, #faturamentoModal .fat-banner {
    display: flex; align-items: center; gap: 16px; min-height: 78px;
    margin: 0 0 14px; padding: 16px 20px; border: 0; border-radius: 12px;
    background: linear-gradient(115deg, #0b2858, #214c86 62%, #0e2e64);
    color: #fff;
  }
  #detalhamentoModal h2 { font-size: 24px; line-height: 1.3; white-space: normal; }
  #detalhamentoModal h2 > .fas, #faturamentoModal .fat-banner::before {
    width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0;
    border-radius: 13px; background: linear-gradient(140deg, #4284ff, #4942e9);
    color: #fff; font-size: 23px;
  }
  #detalhamentoModal h2 > span { min-width: 0; }
  #detalhamentoModal .relatorio-titulo { display: block; font-size: inherit; }
  #detalhamentoModal h2 small { display: block; margin-top: 3px; color: #c5d9f6; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  #detalheConteudo > div { border: 1px solid var(--line); border-radius: 11px; }
  #detalheConteudo .detalhe-vazio { padding: 36px 20px; text-align: center; color: var(--muted); }
  #detalhamentoModal .detalhe-table { border-collapse: separate; border-spacing: 0; font-size: 11px; }
  #detalhamentoModal .detalhe-table thead { position: sticky; top: 0; z-index: 1; background: var(--surface); }
  #detalhamentoModal .detalhe-table thead tr { background: transparent !important; }
  #detalhamentoModal .detalhe-table :is(th, td) { padding: 12px 9px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
  #detalhamentoModal .detalhe-table th { background: transparent !important; color: var(--rel-blue); text-align: center; font-size: 10px; letter-spacing: .2px; }
  #detalhamentoModal .detalhe-table thead tr:first-child th:is(:nth-child(3), :nth-child(4)) { color: var(--rel-green) !important; border-top: 3px solid var(--rel-green); }
  #detalhamentoModal .detalhe-table thead tr:first-child th:is(:nth-child(5), :nth-child(6)) { color: var(--rel-orange) !important; border-top: 3px solid var(--rel-orange); }
  #detalhamentoModal .detalhe-table thead tr:nth-child(2) td { color: var(--rel-green); text-align: center; font-size: 9px; }
  #detalhamentoModal .detalhe-table thead tr:nth-child(2) td:nth-child(n+10) { color: var(--rel-orange); }
  #detalhamentoModal .detalhe-table tbody td { color: var(--ink); font-variant-numeric: tabular-nums; }
  #detalhamentoModal .detalhe-table tbody td:first-child { color: var(--rel-blue); }
  #detalhamentoModal .detalhe-table tbody td:nth-child(12) { color: var(--rel-green); border-inline: 1px solid color-mix(in srgb, var(--rel-green) 25%, transparent); }
  #detalhamentoModal .detalhe-table tbody td:nth-child(18) { color: var(--rel-orange); border-inline: 1px solid color-mix(in srgb, var(--rel-orange) 25%, transparent); }
  #detalhamentoModal .detalhe-table tbody td:nth-child(19) { color: var(--rel-blue); }
  #detalhamentoModal .detalhe-table tbody tr:hover { background: color-mix(in srgb, var(--rel-blue) 5%, transparent); }
  #detalhamentoModal .btn-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; background: transparent; border: 1px solid var(--line); color: var(--rel-blue); }
  #detalhamentoModal .btn-icon[title^="Excluir"] { color: var(--rel-orange); }
  #detalhamentoModal .btn-icon:hover { border-color: currentColor; }

  #faturamentoModal .fat-banner { gap: 13px; }
  #faturamentoModal .fat-banner::before { content: '\f571'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
  #faturamentoModal .fat-banner-left { flex: 1; min-width: 0; font-size: 0; }
  #faturamentoModal #fatModalTitulo { display: block; font-size: 24px; line-height: 1.25; text-transform: none; }
  #faturamentoModal #fatNomeEmpresa { display: block; color: #c5d9f6; font-size: 14px; line-height: 1.4; margin-top: 3px; overflow-wrap: anywhere; }
  #faturamentoModal .fat-banner-right { padding: 9px 12px; border: 1px solid #557cb2; border-radius: 9px; font-size: 11px; color: #d5e5ff; white-space: nowrap; }
  #faturamentoModal .fat-banner-right b { color: #fff; }
  #faturamentoModal .fat-top-cards { grid-template-columns: .9fr 1.3fr 1.25fr; gap: 10px; margin-bottom: 12px; }
  #faturamentoModal :is(.fat-crescimento-card, .fat-endereco-card, .fat-periodo-card) { background: transparent; border: 1px solid var(--line); padding: 11px 13px; border-radius: 11px; min-width: 0; }
  #faturamentoModal :is(.fat-crescimento-label, .fat-top-cards label) { color: var(--rel-blue); font-size: 10px; margin-bottom: 6px; }
  #faturamentoModal .fat-crescimento-sub { color: var(--muted); font-size: 10px; }
  #faturamentoModal .fat-top-cards input { margin-bottom: 0; padding: 7px 10px; min-height: 33px; background: transparent; color: var(--ink); }
  #faturamentoModal .fat-section-title { color: #fff; background: linear-gradient(110deg, #173964, #284f81); border-radius: 7px; padding: 7px 12px; font-size: 12px; margin-bottom: 10px; }
  #faturamentoModal .fat-summary-cards { gap: 10px; margin-bottom: 10px; }
  #faturamentoModal .fat-sum-card { color: var(--rel-blue); border-color: color-mix(in srgb, currentColor 35%, transparent); background: transparent; border-radius: 11px; padding: 10px 12px; min-width: 0; }
  #faturamentoModal .fat-sum-card:nth-child(2) { color: var(--rel-violet); }
  #faturamentoModal .fat-sum-card:nth-child(3) { color: var(--rel-green); }
  #faturamentoModal .fat-sum-card:nth-child(4) { color: var(--rel-orange); }
  #faturamentoModal :is(.fat-sum-icon, .fat-total-icon) { width: 35px; height: 35px; display: grid; place-items: center; color: inherit; background: transparent; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 10px; }
  #faturamentoModal :is(.fat-sum-label, .fat-total-label) { color: inherit; font-size: 10px; }
  #faturamentoModal :is(.fat-sum-valor, .fat-total-valor) { color: inherit; font-size: 15px; font-weight: 800; }
  #faturamentoModal .fat-total-cards { gap: 10px; margin-bottom: 6px; }
  #faturamentoModal :is(.fat-total-card, .fat-media-card) { background: transparent; color: var(--rel-teal); border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 11px; padding: 10px 12px; }
  #faturamentoModal .fat-lancamentos-title { margin: 8px 0; }
  #faturamentoModal .fat-lancamentos-title h3 { font-size: 13px; color: var(--ink); }
  #faturamentoModal .fat-ano-badge { background: transparent; border: 1px solid var(--line); color: var(--rel-blue); }
  #faturamentoModal .fat-lancamentos-table { min-width: 650px; border-collapse: separate; border-spacing: 0; }
  #faturamentoModal .fat-lancamentos-table th { background: #1c3d6a; color: #fff; font-size: 10px; padding: 9px 12px; position: sticky; top: 0; z-index: 1; }
  #faturamentoModal .fat-lancamentos-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--rel-blue) 4%, transparent); }
  #faturamentoModal .fat-lancamentos-table td { color: var(--ink); font-size: 11px; padding: 4px 10px; }
  #faturamentoModal .fat-lancamentos-table .fat-input { min-height: 29px; padding: 5px 9px; margin: 0; font-size: 12px; border-color: var(--line); color: var(--ink); background: transparent; }
  #faturamentoModal .fat-lancamentos-table .fat-input[readonly] { color: var(--muted); background: transparent; }
  :is(#detalhamentoModal, #faturamentoModal) .modal-actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

  body.modulo-janela { overflow: hidden; }
  body.modulo-janela #appContainer > .app-layout { display: none; }
  body.modulo-janela[data-modulo-janela="detalhamento"] #detalhamentoModal,
  body.modulo-janela:is([data-modulo-janela="faturamento"], [data-modulo-janela="previsao"]) #faturamentoModal {
    position: fixed; inset: 0; padding: 12px; background: var(--bg); backdrop-filter: none; align-items: stretch;
  }
  body.modulo-janela :is(#detalhamentoModal, #faturamentoModal) > .modal {
    width: 100%; max-width: none; height: 100%; min-height: 0; max-height: none;
    display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; animation: none;
  }
  body.modulo-janela :is(#detalhamentoModal, #faturamentoModal) > .modal > * { flex-shrink: 0; }
  body.modulo-janela #detalheConteudo { flex: 1; min-height: 170px; }
  body.modulo-janela #detalheConteudo > div { height: 100%; max-height: none !important; overflow: auto; }
  body.modulo-janela #faturamentoModal .fat-lancamentos-title + div { flex: 1; min-height: 160px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
  body.modulo-janela #faturamentoModal .fat-banner { min-height: 70px; padding-block: 12px; margin-bottom: 12px; }
  body.modulo-janela #faturamentoModal .fat-banner-left #fatModalTitulo { font-size: 22px; }
  body.modulo-janela #editarMesModal { background: rgba(8, 22, 47, .62); }
  @media (max-width: 800px) {
    #faturamentoModal .fat-top-cards { grid-template-columns: 1fr 1fr; }
    #faturamentoModal .fat-periodo-card { grid-column: 1 / -1; }
    #faturamentoModal .fat-summary-cards { grid-template-columns: 1fr 1fr; }
    #faturamentoModal .fat-banner { flex-wrap: wrap; }
    #faturamentoModal .fat-banner-right { margin-left: 59px; }
    #faturamentoModal #fatModalTitulo, #detalhamentoModal h2 { font-size: 19px; }
    body.modulo-janela :is(#detalhamentoModal, #faturamentoModal) { padding: 6px !important; }
    body.modulo-janela :is(#detalhamentoModal, #faturamentoModal) > .modal { padding: 12px; }
  }
  @media (max-width: 480px) {
    #faturamentoModal .fat-top-cards { grid-template-columns: 1fr; }
    #faturamentoModal .fat-periodo-card { grid-column: auto; }
    #faturamentoModal .fat-total-cards { grid-template-columns: 1fr; }
  }
}
@media screen {
  #appContainer #detalhamentoModal h2,
  #appContainer #faturamentoModal #fatModalTitulo { color:#fff; }
  body.dark-mode.modulo-janela #detalhamentoModal,
  body.dark-mode.modulo-janela #faturamentoModal { background:#0f1724; }
}