/* ==========================================================================
   Simulador IBS/CBS 2027-2033 - Casa do Construtor
   Camada de estilo propria. Tailwind CDN cobre o utilitario; este arquivo
   cobre o que o utilitario nao resolve: escala de tipografia legivel,
   foco visivel, numeros tabulares, impressao e componentes reaproveitados.
   Arquivo em ASCII puro (padrao dos dashboards HMTL5).
   ========================================================================== */

:root {
    /* Identidade da marca */
    --brand-blue: #004D8E;
    --brand-yellow: #FFC72C;


    /* Escala de texto. O piso e 11px: abaixo disso numero em tela fica ilegivel. */
    --fs-11: 0.6875rem;
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --lh-densa: 1.45;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Escala de tipografia
   Substitui os antigos text-[8px] / [9px] / [10px] / [11px] do markup.
   O original descia a 8px, o que reprova em qualquer criterio de leitura e
   e especialmente ruim num painel de valores financeiros.
   -------------------------------------------------------------------------- */
.fs-11 { font-size: var(--fs-11); line-height: var(--lh-densa); }
.fs-12 { font-size: var(--fs-12); line-height: var(--lh-densa); }
.fs-13 { font-size: var(--fs-13); line-height: var(--lh-densa); }

/* --------------------------------------------------------------------------
   2. Numeros tabulares
   Dinheiro em coluna precisa de digito de largura fixa, senao a virgula
   danca de linha para linha e a comparacao visual se perde.
   -------------------------------------------------------------------------- */
table,
input[data-mascara="numero"],
.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Campo de valor: numero alinhado a direita le melhor que centralizado. */
input[data-mascara="numero"] {
    text-align: right;
}

/* --------------------------------------------------------------------------
   3. Foco visivel
   O original so tinha focus:ring nos inputs. Quem navega por teclado ficava
   perdido nos botoes, abas, summary e sliders.
   -------------------------------------------------------------------------- */
:where(a, button, summary, [role="button"], input, select, textarea):focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
    border-radius: 6px;
}

header :where(a, button):focus-visible,
.bg-brandBlue :where(a, button, summary):focus-visible {
    outline-color: var(--brand-yellow);
}

summary { -webkit-tap-highlight-color: transparent; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* --------------------------------------------------------------------------
   4. Sliders do mix de clientes
   accent-color sozinho nao da area de toque suficiente no mobile.
   -------------------------------------------------------------------------- */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 22px;
    background: transparent;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--brand-blue);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .35);
}
input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-blue);
    border: 2px solid #fff;
}

/* --------------------------------------------------------------------------
   5. Navegacao entre visoes
   Em telas estreitas as tres abas estouravam a largura; agora rolam.
   -------------------------------------------------------------------------- */
.abas-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.abas-scroll::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   6. Largura do conteudo
   Substitui o "max-w-7xl mx-auto px-4" do markup. Antes a pagina travava em
   1280px e sobrava faixa branca nas laterais em monitor largo. Agora ocupa a
   tela inteira e o respiro lateral cresce junto com a viewport.
   -------------------------------------------------------------------------- */
.app-wrap {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: clamp(0.75rem, 1.6vw, 2.5rem);
}

/* Em telas muito largas a tabela ganha ar sem esticar a linha de texto. */
@media (min-width: 1920px) {
    .app-wrap {
        padding-inline: clamp(2.5rem, 3vw, 4rem);
    }
}

/* --------------------------------------------------------------------------
   7. Espelho do motor
   Bloco nao visual: o motor de calculo escreve nele e o painel executivo le.
   Fica fora do fluxo, fora da arvore de acessibilidade e fora da impressao.
   -------------------------------------------------------------------------- */
#motorEspelho {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Aviso flutuante (substitui os alert() das exportacoes)
   -------------------------------------------------------------------------- */
#avisoPilha {
    position: fixed;
    z-index: 60;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(24rem, calc(100vw - 2rem));
}
.aviso {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    padding: .75rem .875rem;
    border-radius: .75rem;
    font-size: var(--fs-12);
    line-height: var(--lh-densa);
    color: #fff;
    background: #0f172a;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, .4);
    animation: aviso-entra .18s ease-out;
}
.aviso--erro { background: #9f1239; }
.aviso--ok { background: #065f46; }
.aviso b { display: block; }

@keyframes aviso-entra {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   9. Exportacao em PDF / impressao
   -------------------------------------------------------------------------- */
.pdf-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

body.exportando-pdf #conteudoRelatorio { background: #f1f5f9; }
body.exportando-pdf .pdf-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}
/* Enquanto gera o PDF o cursor avisa que a pagina esta ocupada. */
body.exportando-pdf { cursor: progress; }

@page {
    size: A4 landscape;
    margin: 8mm;
}

@media print {
    .no-print { display: none !important; }
    #avisoPilha { display: none !important; }
    #motorEspelho { display: none !important; }
    .page-break-inside-avoid { break-inside: avoid !important; }
    body { background: #fff; padding-bottom: 0; }
    /* details fechado nao imprime conteudo: no papel tudo fica aberto */
    details > div { display: block !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; color: #64748b; }
}

/* --------------------------------------------------------------------------
   10. Preferencia por menos movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}
/* --------------------------------------------------------------------------
   11. Menu lateral (abas) e menu de exportacao
   As abas sairam da barra horizontal e vivem no drawer da direita.
   -------------------------------------------------------------------------- */
.menu-lateral {
    transform: translateX(100%);
    transition: transform .2s ease-out;
}
.menu-lateral--aberto { transform: translateX(0); }

.item-menu {
    display: flex;
    gap: .75rem;
    align-items: center;
    width: 100%;
    padding: .75rem;
    border-radius: .75rem;
    border: 1px solid transparent;
    text-align: left;
    background: transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.item-menu:hover { background: #f1f5f9; }
.item-menu--ativo { background: #eff6ff; border-color: #bfdbfe; }

.item-menu__icone {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: .625rem;
    background: #e2e8f0;
    color: #475569;
    font-weight: 900;
    font-size: var(--fs-12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-menu--ativo .item-menu__icone { background: var(--brand-blue); color: #fff; }

.item-menu__titulo {
    display: block;
    font-size: var(--fs-13);
    font-weight: 800;
    color: #1e293b;
}
.item-menu--ativo .item-menu__titulo { color: var(--brand-blue); }
.item-menu__ajuda { display: block; font-size: var(--fs-11); color: #64748b; }

/* --------------------------------------------------------------------------
   12. Barra "Aplicar"
   O resultado so muda quando o usuario confirma. Com pendencia o botao chama
   atencao com um halo, sem piscar de forma agressiva.
   -------------------------------------------------------------------------- */
@keyframes aplicar-pulsa {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 199, 44, .55); }
    50% { box-shadow: 0 0 0 7px rgba(255, 199, 44, 0); }
}
.aplicar-pulsa { animation: aplicar-pulsa 1.8s ease-out infinite; }

/* --------------------------------------------------------------------------
   13. Selos do rodape (assets/logos)
   -------------------------------------------------------------------------- */
.selo-rodape {
    width: auto;
    object-fit: contain;
    opacity: .9;
}

@media print {
    .menu-lateral,
    #menuFundo,
    #barraAplicar { display: none !important; }
}

/* O bloco de navegacao ocupa o espaco livre e rola sozinho; as acoes
   (trocar de empresa, nova simulacao, sair) ficam ancoradas no fim. */
#menuLateral nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}