/* =====================================================================
   FATURAMENTO SUS

   Duas famílias:
     .fat-*   componentes das telas (KPI, dropzone, painel de crítica)
     .fatg-*  a planilha (FatGrid)

   Tudo em variáveis do Phoenix (--phoenix-*), para acompanhar claro/escuro
   sem um segundo conjunto de regras.
===================================================================== */


/* ---------------------------------------------------------------------
   KPIs
--------------------------------------------------------------------- */
.fat-kpi {
    border: 0;
    border-radius: .75rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.fat-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}
.fat-kpi-icone {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.fat-kpi-valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.fat-kpi-sub {
    font-size: .75rem;
    color: var(--phoenix-secondary-color);
}

/* Faixa fina que dá a "temperatura" do arquivo sem ocupar espaço. */
.fat-barra-saude {
    height: .375rem;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    background: var(--phoenix-secondary-bg);
}
.fat-barra-saude > span { display: block; height: 100%; }


/* ---------------------------------------------------------------------
   DROPZONE
--------------------------------------------------------------------- */
.fat-dropzone {
    border: 2px dashed var(--phoenix-border-color);
    border-radius: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
    cursor: pointer;
    background: var(--phoenix-body-bg);
}
.fat-dropzone:hover,
.fat-dropzone.ativo {
    border-color: var(--phoenix-primary);
    background: var(--phoenix-primary-bg-subtle);
}
.fat-dropzone-icone {
    font-size: 2.75rem;
    color: var(--phoenix-primary);
    margin-bottom: .75rem;
}
.fat-dropzone.ativo .fat-dropzone-icone { transform: scale(1.08); }

.fat-progresso { height: .5rem; border-radius: 1rem; }

/* Etapas do processamento — o usuário vê o que está acontecendo, em vez
   de uma barra genérica que não diz nada. */
.fat-etapa {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .25rem;
    font-size: .8125rem;
    color: var(--phoenix-secondary-color);
}
.fat-etapa .fat-etapa-marca {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--phoenix-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .625rem;
    flex-shrink: 0;
}
.fat-etapa.ativa { color: var(--phoenix-emphasis-color); font-weight: 600; }
.fat-etapa.ativa .fat-etapa-marca { border-color: var(--phoenix-primary); color: var(--phoenix-primary); }
.fat-etapa.concluida .fat-etapa-marca {
    background: var(--phoenix-success);
    border-color: var(--phoenix-success);
    color: #fff;
}


/* ---------------------------------------------------------------------
   ESTADO VAZIO
--------------------------------------------------------------------- */
.fat-vazio {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--phoenix-secondary-color);
}
.fat-vazio i {
    font-size: 2.5rem;
    opacity: .35;
    margin-bottom: .75rem;
    display: block;
}


/* ---------------------------------------------------------------------
   PAINEL DE CRÍTICAS / CORREÇÃO INTELIGENTE
--------------------------------------------------------------------- */
.fat-critica {
    border: 1px solid var(--phoenix-border-color);
    border-left-width: .25rem;
    border-radius: .625rem;
    padding: .875rem 1rem;
    margin-bottom: .75rem;
    background: var(--phoenix-body-bg);
    transition: box-shadow .15s ease;
}
.fat-critica:hover { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06); }
.fat-critica.critico { border-left-color: var(--phoenix-danger); }
.fat-critica.erro    { border-left-color: var(--phoenix-warning); }
.fat-critica.aviso   { border-left-color: var(--phoenix-info); }
.fat-critica.info    { border-left-color: var(--phoenix-secondary); }

.fat-critica-codigo {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .75rem;
    font-weight: 700;
    padding: .125rem .375rem;
    border-radius: .25rem;
    background: var(--phoenix-secondary-bg);
}
.fat-critica-qtd {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

/* "Como corrigir" — o texto que separa este módulo de um validador que
   só aponta o erro. Tem destaque próprio de propósito. */
.fat-como-corrigir {
    background: var(--phoenix-info-bg-subtle);
    border-radius: .5rem;
    padding: .625rem .75rem;
    font-size: .8125rem;
    color: var(--phoenix-emphasis-color);
    margin-top: .625rem;
}
.fat-como-corrigir i { color: var(--phoenix-info); }

/* Aviso de campo recalculado pelo sistema. Aparece por alguns segundos e
   some sozinho: informa sem exigir um clique para dispensar. */
.fat-aviso-derivado {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background: var(--phoenix-emphasis-bg, #1e2126);
    color: var(--phoenix-body-bg, #fff);
    padding: .625rem 1.125rem;
    border-radius: 2rem;
    font-size: .8125rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1080;
    max-width: 90vw;
}
.fat-aviso-derivado.visivel {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.fat-aviso-derivado i { color: var(--phoenix-success); }

/* Nome por trás de um código do SUS: aparece embaixo (ou ao lado) do
   código, em tom secundário — informa sem competir com o valor. */
.fat-nome-codigo {
    display: block;
    font-size: .6875rem;
    line-height: 1.25;
    color: var(--phoenix-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fat-sugestoes { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.fat-sugestao-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border: 1px solid var(--phoenix-border-color);
    border-radius: 2rem;
    padding: .25rem .75rem;
    font-size: .8125rem;
    cursor: pointer;
    background: var(--phoenix-body-bg);
    transition: all .12s ease;
    max-width: 100%;
}
.fat-sugestao-chip:hover {
    border-color: var(--phoenix-success);
    background: var(--phoenix-success-bg-subtle);
    color: var(--phoenix-success-text-emphasis);
}
.fat-sugestao-chip strong { font-family: 'SFMono-Regular', Consolas, monospace; }
.fat-sugestao-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18rem;
    color: var(--phoenix-secondary-color);
}


/* ---------------------------------------------------------------------
   COMPARAÇÃO ENTRE COMPETÊNCIAS
--------------------------------------------------------------------- */
.fat-comp-seta { font-size: 1.25rem; color: var(--phoenix-secondary-color); }
.fat-var-positiva { color: var(--phoenix-success); font-weight: 600; }
.fat-var-negativa { color: var(--phoenix-danger); font-weight: 600; }
.fat-tag-novo     { background: var(--phoenix-success-bg-subtle); color: var(--phoenix-success-text-emphasis); }
.fat-tag-removido { background: var(--phoenix-danger-bg-subtle); color: var(--phoenix-danger-text-emphasis); }


/* =====================================================================
   FATGRID — a planilha
===================================================================== */

.fatg {
    border: 1px solid var(--phoenix-border-color);
    border-radius: .75rem;
    overflow: hidden;
    background: var(--phoenix-body-bg);
    display: flex;
    flex-direction: column;
}

.fatg-barra {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--phoenix-border-color);
    background: var(--phoenix-body-highlight-bg);
    flex-wrap: wrap;
}
.fatg-info { display: flex; align-items: center; gap: .625rem; font-size: .8125rem; }
.fatg-contador { color: var(--phoenix-secondary-color); }
.fatg-selecao {
    background: var(--phoenix-primary-bg-subtle);
    color: var(--phoenix-primary-text-emphasis);
    border-radius: 1rem;
    padding: .125rem .625rem;
    font-weight: 600;
}
.fatg-acoes { display: flex; gap: .375rem; flex-wrap: wrap; }
.fatg-barra .dropdown { margin-left: auto; }

.fatg-viewport {
    overflow: auto;
    max-height: 62vh;
    position: relative;
    outline: none;
}
.fatg-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--phoenix-primary); }

.fatg-tabela {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8125rem;
    table-layout: fixed;
}

.fatg-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--phoenix-body-highlight-bg);
    border-bottom: 1px solid var(--phoenix-border-color);
    padding: .5rem .5rem;
    text-align: left;
    font-weight: 600;
    font-size: .75rem;
    color: var(--phoenix-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fatg-th { display: inline-flex; align-items: center; gap: .25rem; }
.fatg-cadeado { font-size: .5625rem; opacity: .45; }

/* Primeiras colunas fixas: seleção e nº da linha continuam visíveis ao
   rolar para a direita, que é o que permite não se perder num layout de
   40 colunas. */
.fatg-fixa { position: sticky; z-index: 2; background: var(--phoenix-body-bg); }
.fatg-tabela thead .fatg-fixa { z-index: 4; background: var(--phoenix-body-highlight-bg); }
.fatg-check { left: 0; text-align: center !important; padding: .25rem !important; }
.fatg-num {
    left: 2.4rem;
    text-align: right !important;
    color: var(--phoenix-secondary-color);
    font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--phoenix-border-color);
    white-space: nowrap;
}
.fatg:not(:has(.fatg-check)) .fatg-num { left: 0; }

.fatg-linha { height: 32px; }
.fatg-linha:hover > td { background: var(--phoenix-secondary-bg); }
.fatg-linha:hover > td.fatg-fixa { background: var(--phoenix-secondary-bg); }

.fatg-td {
    padding: .25rem .5rem;
    border-bottom: 1px solid var(--phoenix-border-color-translucent, rgba(0, 0, 0, .05));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: cell;
    position: relative;
}
.fatg-num-col { text-align: right; font-variant-numeric: tabular-nums; }
.fatg-bloqueada { cursor: not-allowed; color: var(--phoenix-secondary-color); background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(128,128,128,.045) 6px, rgba(128,128,128,.045) 12px); }
.fatg-valor { display: block; overflow: hidden; text-overflow: ellipsis; }

/* A CÉLULA errada é que fica marcada — não a linha inteira. A linha ganha
   só uma barra lateral, para não virar um bloco colorido ilegível. */
.fatg-g-critico > .fatg-num { box-shadow: inset .1875rem 0 0 var(--phoenix-danger); }
.fatg-g-erro    > .fatg-num { box-shadow: inset .1875rem 0 0 var(--phoenix-warning); }
.fatg-g-aviso   > .fatg-num { box-shadow: inset .1875rem 0 0 var(--phoenix-info); }
.fatg-g-info    > .fatg-num { box-shadow: inset .1875rem 0 0 var(--phoenix-secondary); }

.fatg-erro { background: var(--phoenix-warning-bg-subtle); }
.fatg-erro-critico { background: var(--phoenix-danger-bg-subtle); }
.fatg-erro-aviso   { background: var(--phoenix-info-bg-subtle); }
.fatg-erro-info    { background: var(--phoenix-secondary-bg); }
.fatg-erro::after {
    content: '';
    position: absolute;
    right: 2px; bottom: 2px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-bottom: 5px solid currentColor;
    opacity: .55;
}

.fatg-alterada > .fatg-num { font-weight: 700; }
.fatg-excluida > td { opacity: .45; text-decoration: line-through; }
.fatg-selecionada > td { background: var(--phoenix-primary-bg-subtle) !important; }

.fatg-foco {
    outline: 2px solid var(--phoenix-primary);
    outline-offset: -2px;
    z-index: 1;
}
.fatg-salvando { opacity: .55; }

.fatg-mark { margin-left: .25rem; font-size: .625rem; color: var(--phoenix-danger); }
.fatg-mark-edit { margin-left: .25rem; font-size: .5625rem; color: var(--phoenix-primary); opacity: .7; }
.fatg-sugestao { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: .625rem; color: var(--phoenix-success); }

.fatg-espaco td { padding: 0; border: 0; }
.fatg-vazio { padding: 3rem; text-align: center; color: var(--phoenix-secondary-color); }
.fatg-vazio i { font-size: 2rem; opacity: .3; display: block; margin-bottom: .5rem; }


/* ---- edição no lugar ---- */
.fatg-editando { padding: 0 !important; overflow: visible !important; z-index: 20; }
.fatg-input {
    width: 100%;
    border: 0;
    outline: 2px solid var(--phoenix-primary);
    outline-offset: -2px;
    padding: .25rem .5rem;
    font-size: .8125rem;
    font-family: inherit;
    background: var(--phoenix-body-bg);
    color: var(--phoenix-emphasis-color);
    height: 32px;
}

.fatg-seletor { position: relative; }
.fatg-opcoes {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 26rem;
    max-width: 34rem;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--phoenix-body-bg);
    border: 1px solid var(--phoenix-border-color);
    border-radius: .5rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
    z-index: 50;
}
.fatg-criterio {
    padding: .5rem .75rem;
    font-size: .6875rem;
    color: var(--phoenix-info-text-emphasis);
    background: var(--phoenix-info-bg-subtle);
    border-bottom: 1px solid var(--phoenix-border-color);
    position: sticky;
    top: 0;
}
.fatg-opcao {
    padding: .4375rem .75rem;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    border-bottom: 1px solid var(--phoenix-border-color-translucent, rgba(0,0,0,.04));
}
.fatg-opcao:hover, .fatg-opcao.ativa { background: var(--phoenix-primary-bg-subtle); }
.fatg-opcao-codigo { font-family: 'SFMono-Regular', Consolas, monospace; font-weight: 600; flex-shrink: 0; }
.fatg-opcao-desc { color: var(--phoenix-secondary-color); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fatg-opcao-detalhe { margin-left: auto; font-size: .6875rem; color: var(--phoenix-tertiary-color); flex-shrink: 0; }
.fatg-aviso { padding: .75rem; font-size: .75rem; color: var(--phoenix-secondary-color); }
.fatg-carregando { padding: .75rem; font-size: .75rem; color: var(--phoenix-secondary-color); }


/* ---- seletor de colunas ---- */
.fatg-colunas { max-height: 22rem; overflow-y: auto; min-width: 15rem; padding: .5rem; }
.fatg-colunas-topo { display: flex; gap: .75rem; padding: .25rem .5rem .5rem; border-bottom: 1px solid var(--phoenix-border-color); }
.fatg-colunas-lista { padding-top: .375rem; }
.fatg-col-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
    border-radius: .375rem;
    font-size: .8125rem;
    cursor: pointer;
}
.fatg-col-item:hover { background: var(--phoenix-secondary-bg); }


/* ---- legenda ---- */
.fat-legenda { display: flex; flex-wrap: wrap; gap: .875rem; font-size: .75rem; color: var(--phoenix-secondary-color); }
.fat-legenda-item { display: inline-flex; align-items: center; gap: .375rem; }
.fat-legenda-cor { width: .875rem; height: .875rem; border-radius: .25rem; display: inline-block; }


@media (max-width: 992px) {
    .fatg-viewport { max-height: 55vh; }
    .fatg-opcoes { min-width: 18rem; }
}