/* ==========================================================================
   SIGAD — sistema de design
   Alinhado com o Balcão Virtual do INACOM: indigo #636396 / #3840E6,
   navy #0b0b31 e cores de estado Material.
   ========================================================================== */

:root {
    --cor-primaria: #3840E6;
    --cor-primaria-escura: #2a30b8;
    --cor-indigo: #636396;
    --cor-navy: #0b0b31;
    --cor-realce: #FF9800;

    --cor-fundo: #f5f6fa;
    --cor-superficie: #ffffff;
    --cor-texto: #263238;
    --cor-texto-suave: #748892;
    --cor-borda: #e3e7ef;

    --cor-sucesso: #2e9e57;
    --cor-perigo: #e0463b;
    --cor-aviso: #b57709;
    --cor-info: #2196f3;

    --raio: 12px;
    --raio-s: 8px;
    --sombra: 0 1px 2px rgba(11, 11, 49, .06), 0 4px 14px rgba(11, 11, 49, .05);
    --sombra-alta: 0 6px 28px rgba(11, 11, 49, .14);
    --transicao: .18s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-size: 15px;
    line-height: 1.5;
}

h1:focus { outline: none; }
h1 { font-size: 1.55rem; margin: 0 0 .3rem; letter-spacing: -.015em; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; letter-spacing: -.01em; }
h3 { font-size: .95rem; margin: 1.1rem 0 .5rem; color: var(--cor-texto); }
a { color: var(--cor-primaria); }

.portal { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- topo ---------- */
.topo {
    background: linear-gradient(100deg, var(--cor-navy) 0%, #232355 55%, var(--cor-indigo) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(11, 11, 49, .22);
}

.marca { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.marca-logo {
    background: #fff;
    color: var(--cor-navy);
    font-weight: 800;
    border-radius: var(--raio-s);
    padding: .35rem .55rem;
    letter-spacing: .5px;
    font-size: .95rem;
    line-height: 1;
}
/* Siglas com mais de duas letras (ex.: SIGAD) — mantém o badge equilibrado. */
.marca-logo.longo { font-size: .78rem; letter-spacing: .8px; padding: .4rem .5rem; }
.marca strong { display: block; line-height: 1.15; font-size: 1rem; }
.marca small { display: block; font-size: .67rem; opacity: .8; }

.topo-nav { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.topo-nav a {
    color: #fff; text-decoration: none; font-weight: 500; font-size: .9rem;
    padding: .4rem .7rem; border-radius: var(--raio-s); opacity: .88;
    transition: background var(--transicao), opacity var(--transicao);
}
.topo-nav a:hover { background: rgba(255, 255, 255, .14); opacity: 1; }
.topo-user {
    font-size: .82rem; opacity: .85; margin-left: .4rem;
    padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .28);
}
.form-sair { display: inline; }
.form-sair button {
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35);
    color: #fff; border-radius: var(--raio-s); padding: .3rem .8rem;
    cursor: pointer; font: inherit; font-size: .85rem; transition: background var(--transicao);
}
.form-sair button:hover { background: rgba(255, 255, 255, .26); }

.conteudo { flex: 1; padding: 1.6rem 1.5rem 3rem; max-width: 1240px; width: 100%; margin: 0 auto; }
.rodape { text-align: center; font-size: .74rem; color: var(--cor-texto-suave); padding: 1.2rem; }

/* ---------- cartões ---------- */
.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.15rem 1.3rem;
    margin-bottom: 1.1rem;
}
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }

/* ---------- hub de aplicações ---------- */
.hub-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}
.hub-app {
    display: flex; gap: .95rem; align-items: flex-start;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.15rem;
    text-decoration: none;
    color: var(--cor-texto);
    position: relative;
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.hub-app::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: linear-gradient(180deg, var(--cor-primaria), var(--cor-indigo));
    transform: scaleY(0); transform-origin: top; transition: transform var(--transicao);
}
.hub-app:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: #cdd3e6; }
.hub-app:hover::before { transform: scaleY(1); }
.hub-app-icone { font-size: 1.9rem; line-height: 1; }
.hub-app strong { display: block; margin-bottom: .25rem; color: var(--cor-navy); }
.hub-app small { color: var(--cor-texto-suave); line-height: 1.4; display: block; font-size: .82rem; }
.hub-app .externa { font-size: .68rem; color: var(--cor-indigo); font-weight: 700; margin-top: .3rem; }

/* ---------- barra de filtros ---------- */
.filtros-barra {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: .7rem .9rem;
    margin-bottom: 1rem;
}
.campo-pesquisa { position: relative; flex: 1 1 240px; min-width: 200px; }
.campo-pesquisa input { padding-left: 2.1rem; margin: 0; }
.campo-pesquisa::before {
    content: "🔍"; position: absolute; left: .65rem; top: 50%;
    transform: translateY(-50%); font-size: .85rem; opacity: .5; pointer-events: none;
}
.filtros-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.filtro {
    background: #eef0f7; color: var(--cor-texto-suave);
    border: 1px solid transparent; border-radius: 999px;
    padding: .3rem .8rem; font-size: .8rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all var(--transicao);
}
.filtro:hover { background: #e2e6f3; color: var(--cor-navy); }
.filtro-activo { background: var(--cor-primaria); color: #fff; box-shadow: 0 2px 8px rgba(56, 64, 230, .3); }
.filtro .conta {
    display: inline-block; margin-left: .35rem; padding: 0 .35rem;
    border-radius: 999px; background: rgba(0, 0, 0, .1); font-size: .72rem;
}
.filtro-activo .conta { background: rgba(255, 255, 255, .25); }
.filtros-resumo { font-size: .78rem; color: var(--cor-texto-suave); margin-left: auto; white-space: nowrap; }

/* ---------- tabelas ---------- */
.tabela-scroll { overflow-x: auto; }
table.grelha { width: 100%; border-collapse: collapse; background: var(--cor-superficie); font-size: .88rem; }
.grelha th, .grelha td { border-bottom: 1px solid var(--cor-borda); padding: .55rem .7rem; text-align: left; vertical-align: middle; }
.grelha th {
    background: #f7f8fc; font-weight: 700; font-size: .74rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave);
    border-bottom: 2px solid var(--cor-borda);
    position: sticky; top: 0; z-index: 1;
}
.grelha tbody tr { transition: background var(--transicao); }
.grelha tbody tr:hover { background: #f8f9fe; }
.grelha td input, .grelha td select { margin: 0; }

/* ---------- formulários ---------- */
label { display: block; font-size: .78rem; font-weight: 600; margin: .7rem 0 .25rem; color: var(--cor-texto-suave); }
input, select, textarea {
    width: 100%; padding: .5rem .7rem;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-s);
    font: inherit; font-size: .9rem; background: #fff; color: var(--cor-texto);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(56, 64, 230, .13);
}
input[type=checkbox] { width: auto; }
.linha-form { display: flex; gap: .8rem; flex-wrap: wrap; }
.linha-form > * { flex: 1 1 180px; }

.botao {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--cor-primaria); color: #fff; border: 1px solid transparent;
    border-radius: var(--raio-s); padding: .5rem 1rem;
    font: inherit; font-size: .88rem; font-weight: 600;
    cursor: pointer; text-decoration: none; margin-top: .6rem; margin-right: .4rem;
    transition: all var(--transicao);
}
.botao:hover { background: var(--cor-primaria-escura); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(56, 64, 230, .28); }
.botao:active { transform: translateY(0); }
.botao.secundario { background: #fff; color: var(--cor-primaria); border-color: #ccd2ea; box-shadow: none; }
.botao.secundario:hover { background: #f2f4fd; border-color: var(--cor-primaria); }
.botao.perigo { background: var(--cor-perigo); }
.botao.perigo:hover { background: #c23a30; box-shadow: 0 4px 12px rgba(224, 70, 59, .28); }
.botao:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- badges e alertas ---------- */
.badge {
    display: inline-block; border-radius: 999px; padding: .18rem .65rem;
    font-size: .72rem; font-weight: 700; background: #eef0f7; color: var(--cor-indigo);
    white-space: nowrap;
}
.badge.sucesso { background: #e3f5e9; color: var(--cor-sucesso); }
.badge.aviso { background: #fdf0dc; color: var(--cor-aviso); }
.badge.perigo { background: #fce8e6; color: var(--cor-perigo); }
.badge.info { background: #e3f0fd; color: #1769aa; }

.alerta {
    border-radius: var(--raio-s); padding: .7rem 1rem; margin: .7rem 0;
    background: #fce8e6; color: var(--cor-perigo); border: 1px solid #f6cdc8;
    font-size: .88rem;
}
.alerta.sucesso { background: #e3f5e9; color: var(--cor-sucesso); border-color: #bfe6cd; }
.alerta.aviso { background: #fdf0dc; color: var(--cor-aviso); border-color: #f3ddb4; }

/* ---------- toasts ---------- */
.toast-zona {
    position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 900;
    display: flex; flex-direction: column; gap: .55rem; max-width: 380px;
}
.toast {
    display: flex; align-items: flex-start; gap: .6rem;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-primaria);
    border-radius: var(--raio-s); box-shadow: var(--sombra-alta);
    padding: .7rem .9rem; font-size: .87rem;
    animation: toast-entra .25s cubic-bezier(.2, .8, .3, 1);
}
.toast.sucesso { border-left-color: var(--cor-sucesso); }
.toast.erro { border-left-color: var(--cor-perigo); }
.toast .fechar { margin-left: auto; cursor: pointer; opacity: .45; background: none; border: none; font-size: 1rem; padding: 0; width: auto; }
.toast .fechar:hover { opacity: 1; }
@keyframes toast-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ---------- NAF ---------- */
.naf-destaque {
    display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--cor-navy), #2b2b6b 60%, var(--cor-indigo));
    color: #fff; border-radius: var(--raio); padding: 1.1rem 1.4rem; margin: 1rem 0;
    box-shadow: var(--sombra);
}
.naf-destaque .valor { font-size: 2.3rem; font-weight: 800; line-height: 1; }
.naf-destaque .mencao {
    font-size: 1rem; font-weight: 700; color: var(--cor-navy);
    background: var(--cor-realce); padding: .25rem .8rem; border-radius: 999px;
}

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; margin: 1rem 0; }
.kpi {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); padding: .9rem 1.05rem; box-shadow: var(--sombra);
    position: relative; overflow: hidden;
}
.kpi .num { font-size: 1.75rem; font-weight: 800; color: var(--cor-navy); line-height: 1.1; }
.kpi .rotulo { font-size: .74rem; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem; }
.kpi.destaque { border-color: var(--cor-realce); }
.kpi.destaque .num { color: var(--cor-realce); }
a.kpi { display: block; text-decoration: none; color: inherit; }
.kpi.accao { cursor: pointer; transition: transform var(--transicao), box-shadow var(--transicao); }
.kpi.accao:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
html { scroll-behavior: smooth; }

/* ---------- passos do processo ---------- */
.passos { display: flex; flex-wrap: wrap; gap: .3rem; margin: .9rem 0 1.1rem; }
.passo {
    font-size: .71rem; font-weight: 600; padding: .32rem .75rem; border-radius: 999px;
    background: #eef0f7; color: var(--cor-texto-suave); white-space: nowrap;
    transition: all var(--transicao);
}
.passo.feito { background: #e3f5e9; color: var(--cor-sucesso); }
.passo.actual { background: var(--cor-primaria); color: #fff; box-shadow: 0 2px 10px rgba(56, 64, 230, .34); }

/* ---------- progresso das metas ---------- */
.progresso-linha { margin-bottom: 1rem; }
.progresso-topo {
    display: flex; justify-content: space-between; gap: 1rem;
    align-items: baseline; margin-bottom: .3rem; font-size: .87rem;
}
.barra { background: #e8ebf5; border-radius: 999px; height: 10px; overflow: hidden; }
.barra-fill {
    background: linear-gradient(90deg, var(--cor-primaria), var(--cor-indigo));
    height: 100%; border-radius: 999px; transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.barra-fill.completo { background: linear-gradient(90deg, var(--cor-sucesso), #4ec27a); }

/* ---------- estado vazio ---------- */
.vazio {
    text-align: center; padding: 2.2rem 1rem; color: var(--cor-texto-suave);
}
.vazio .icone { font-size: 2.2rem; display: block; margin-bottom: .5rem; opacity: .55; }
.vazio p { margin: .2rem 0; font-size: .88rem; }

/* ---------- navegação entre fichas ---------- */
.nav-fichas {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio); padding: .6rem .9rem; margin-bottom: 1rem;
    box-shadow: var(--sombra);
}
.nav-fichas select { max-width: 420px; }
.nav-fichas .botao { margin-top: 0; padding: .35rem .8rem; }

/* ---------- sino de notificações ---------- */
.sino { position: relative; text-decoration: none; font-size: 1.1rem; padding: .35rem .5rem; border-radius: var(--raio-s); }
.sino:hover { background: rgba(255, 255, 255, .14); }
.sino-badge {
    position: absolute; top: -1px; right: -2px;
    background: var(--cor-realce); color: var(--cor-navy);
    border-radius: 999px; font-size: .6rem; font-weight: 800;
    padding: .05rem .32rem; line-height: 1.25;
}

/* ---------- selector de agentes com pesquisa ---------- */
.selector { position: relative; }
.selector-escolhidos { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .35rem; }
.selector-vazio { font-size: .8rem; color: var(--cor-texto-suave); font-style: italic; }
.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: #eef0f7; color: var(--cor-navy);
    border-radius: 999px; padding: .22rem .35rem .22rem .7rem;
    font-size: .82rem; font-weight: 600;
}
.chip button {
    background: none; border: none; cursor: pointer; padding: 0 .2rem;
    color: var(--cor-texto-suave); font-size: .78rem; width: auto; line-height: 1;
}
.chip button:hover { color: var(--cor-perigo); }

.selector-resultados {
    position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio-s); box-shadow: var(--sombra-alta);
    max-height: 260px; overflow-y: auto; margin-top: .25rem;
}
.selector-opcao {
    display: block; width: 100%; text-align: left; background: none;
    border: none; border-bottom: 1px solid var(--cor-borda);
    padding: .5rem .7rem; cursor: pointer; font: inherit;
}
.selector-opcao:last-child { border-bottom: none; }
.selector-opcao:hover { background: #f2f4fd; }
.selector-opcao strong { display: block; font-size: .88rem; }
.selector-opcao small { color: var(--cor-texto-suave); font-size: .76rem; }
.selector-nada { padding: .55rem .7rem; font-size: .82rem; color: var(--cor-texto-suave); }

/* ---------- gestão (separadores) ---------- */
.gestao-nav { display: flex; gap: .2rem; flex-wrap: wrap; border-bottom: 2px solid var(--cor-borda); margin-bottom: 1.3rem; }
.gestao-nav a {
    padding: .55rem .95rem; text-decoration: none; color: var(--cor-texto-suave);
    font-weight: 600; font-size: .88rem; border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all var(--transicao);
}
.gestao-nav a.activa { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.gestao-nav a:hover { color: var(--cor-primaria); }

/* ---------- login ---------- */
.login-caixa { max-width: 420px; margin: 3rem auto; }
.login-caixa .dica { font-size: .78rem; color: var(--cor-texto-suave); margin-top: 1.1rem; line-height: 1.55; }

/* ---------- responsivo ---------- */
@media (max-width: 820px) {
    .topo { flex-direction: column; align-items: stretch; gap: .6rem; padding: .7rem 1rem; }
    .topo-nav { justify-content: flex-start; }
    .topo-user { margin-left: 0; padding-left: 0; border-left: none; }
    .conteudo { padding: 1.1rem .9rem 2.5rem; }
    .filtros-resumo { margin-left: 0; width: 100%; }
    .naf-destaque { gap: .9rem; }
}

/* ---------- validação Blazor ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--cor-sucesso); }
.invalid { outline: 1px solid var(--cor-perigo); }
.validation-message { color: var(--cor-perigo); font-size: .82rem; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; display: none; left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary { background: var(--cor-perigo); padding: 1rem; color: white; border-radius: var(--raio-s); }
.blazor-error-boundary::after { content: "Ocorreu um erro." }