/* Excior3D — tema visual (somente modo claro)
   Cores definidas como variáveis: altere aqui e o sistema todo acompanha. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/inter/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/inter/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/inter/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/inter/inter-latin-700-normal.woff2") format("woff2"); }

:root {
    /* Superfícies e texto */
    --ex-fundo: #f5f7fa;
    --ex-superficie: #ffffff;
    --ex-borda: #e6eaf0;
    --ex-borda-forte: #d5dbe4;
    --ex-texto: #1f2a37;
    --ex-texto-2: #5b6675;
    --ex-texto-suave: #8a94a3;

    /* Azul principal (suave) */
    --ex-primaria: #3d6fc2;
    --ex-primaria-hover: #335ea6;
    --ex-primaria-clara: #eaf1fb;
    --ex-primaria-media: #c9daf3;

    /* Status: texto + fundo claro (sempre com ícone e rótulo) */
    --ex-sucesso: #1f7a52;      --ex-sucesso-fundo: #e6f5ed;
    --ex-alerta: #8f6200;       --ex-alerta-fundo: #fdf3d8;
    --ex-perigo: #b8392d;       --ex-perigo-fundo: #fcebe9;
    --ex-info: #2f68ad;         --ex-info-fundo: #e7f0fb;
    --ex-neutro: #5b6675;       --ex-neutro-fundo: #eef1f5;
    --ex-alerta-barra: #e8b64c; /* barras de progresso: tom suave */

    /* Gráficos: paleta suave validada (até 4 séries, nesta ordem fixa) */
    --ex-serie-1: #5b8fd6;  /* azul */
    --ex-serie-2: #e0905a;  /* pêssego */
    --ex-serie-3: #8a78d0;  /* lavanda */
    --ex-serie-4: #2f9e7e;  /* verde-água */
    --ex-grade: #eef1f5;

    --ex-raio: 10px;
    --ex-sombra: 0 1px 2px rgba(31, 42, 55, .04);
    --ex-menu-largura: 250px;
    --ex-topo-altura: 60px;

    /* Bootstrap */
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-color: var(--ex-texto);
    --bs-body-bg: var(--ex-fundo);
    --bs-border-color: var(--ex-borda);
    --bs-primary: #3d6fc2;
    --bs-primary-rgb: 61, 111, 194;
    --bs-link-color: var(--ex-primaria);
    --bs-link-color-rgb: 61, 111, 194;
    --bs-link-hover-color: var(--ex-primaria-hover);
    --bs-secondary-color: var(--ex-texto-2);
    --bs-border-radius: 8px;
}

body { background: var(--ex-fundo); color: var(--ex-texto); }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { color: var(--ex-texto); font-weight: 600; }

/* ---------- Estrutura: menu lateral + topo + conteúdo ---------- */
.ex-menu {
    position: fixed; inset: 0 auto 0 0; width: var(--ex-menu-largura);
    background: var(--ex-superficie); border-right: 1px solid var(--ex-borda);
    display: flex; flex-direction: column; z-index: 1030;
}
.ex-menu-marca {
    height: var(--ex-topo-altura); display: flex; align-items: center; gap: .6rem;
    padding: 0 1.25rem; font-weight: 700; font-size: 1.15rem; color: var(--ex-texto);
    border-bottom: 1px solid var(--ex-borda); text-decoration: none;
}
.ex-logo {
    width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
    background: var(--ex-primaria-clara); color: var(--ex-primaria); font-size: 1rem;
}
.ex-menu-corpo { overflow-y: auto; padding: .75rem .75rem 1.5rem; flex: 1; }
.ex-menu-grupo {
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ex-texto-suave); padding: 1rem .75rem .4rem;
}
.ex-menu-link {
    display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 8px;
    color: var(--ex-texto-2); text-decoration: none; font-weight: 500; margin-bottom: 2px;
}
.ex-menu-link i { font-size: 1.05rem; width: 1.1rem; text-align: center; }
.ex-menu-link:hover { background: var(--ex-fundo); color: var(--ex-texto); }
.ex-menu-link.ativo { background: var(--ex-primaria-clara); color: var(--ex-primaria); }
.ex-menu-link.desabilitado { opacity: .55; cursor: default; }
.ex-menu-link.desabilitado:hover { background: transparent; color: var(--ex-texto-2); }
.ex-em-breve {
    margin-left: auto; font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ex-texto-suave); background: var(--ex-neutro-fundo); border-radius: 4px; padding: .05rem .35rem;
}
.ex-menu-rodape { padding: .9rem 1.25rem; border-top: 1px solid var(--ex-borda); font-size: .75rem; color: var(--ex-texto-suave); }

.ex-topo {
    position: fixed; top: 0; left: var(--ex-menu-largura); right: 0; height: var(--ex-topo-altura);
    background: var(--ex-superficie); border-bottom: 1px solid var(--ex-borda);
    display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; z-index: 1020;
}
.ex-trilha { font-size: .82rem; color: var(--ex-texto-suave); }
.ex-trilha a { color: var(--ex-texto-suave); text-decoration: none; }
.ex-trilha a:hover { color: var(--ex-primaria); }
.ex-trilha .atual { color: var(--ex-texto); font-weight: 500; }
.ex-topo-busca { width: 280px; }
.ex-topo-icone {
    width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center;
    color: var(--ex-texto-2); background: transparent; border: 0; position: relative;
}
.ex-topo-icone:hover { background: var(--ex-fundo); }
.ex-topo-icone .ex-ponto { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ex-perigo); }
.ex-avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ex-primaria-media); color: var(--ex-primaria-hover); font-weight: 600; font-size: .8rem;
}

.ex-conteudo { margin-left: var(--ex-menu-largura); padding: calc(var(--ex-topo-altura) + 1.5rem) 1.75rem 2rem; min-height: 100vh; }
.ex-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.ex-cabecalho h1 { font-size: 1.3rem; margin: 0; }
.ex-cabecalho p { margin: .15rem 0 0; color: var(--ex-texto-2); }

/* ---------- Cartões ---------- */
.ex-cartao {
    background: var(--ex-superficie); border: 1px solid var(--ex-borda);
    border-radius: var(--ex-raio); box-shadow: var(--ex-sombra);
}
.ex-cartao-cabecalho { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ex-borda); }
.ex-cartao-cabecalho h2 { font-size: 1rem; margin: 0; }
.ex-cartao-corpo { padding: 1.25rem; }

.ex-kpi { padding: 1.15rem 1.25rem; height: 100%; }
.ex-kpi-topo { display: flex; justify-content: space-between; align-items: flex-start; }
.ex-kpi-rotulo { color: var(--ex-texto-2); font-weight: 500; }
.ex-kpi-valor { font-size: 1.45rem; font-weight: 700; margin-top: .3rem; color: var(--ex-texto); }
.ex-kpi-icone { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; }
.ex-kpi-rodape { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--ex-borda); font-size: .8rem; color: var(--ex-texto-2); }
.ex-sobe { color: var(--ex-sucesso); font-weight: 600; }
.ex-desce { color: var(--ex-perigo); font-weight: 600; }

.ex-tom-azul    { background: var(--ex-primaria-clara); color: var(--ex-primaria); }
.ex-tom-verde   { background: var(--ex-sucesso-fundo); color: var(--ex-sucesso); }
.ex-tom-amarelo { background: var(--ex-alerta-fundo); color: var(--ex-alerta); }
.ex-tom-vermelho{ background: var(--ex-perigo-fundo); color: var(--ex-perigo); }

/* ---------- Etiquetas de status ---------- */
.ex-status {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 6px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.ex-status-sucesso { background: var(--ex-sucesso-fundo); color: var(--ex-sucesso); }
.ex-status-alerta  { background: var(--ex-alerta-fundo);  color: var(--ex-alerta); }
.ex-status-perigo  { background: var(--ex-perigo-fundo);  color: var(--ex-perigo); }
.ex-status-info    { background: var(--ex-info-fundo);    color: var(--ex-info); }
.ex-status-neutro  { background: var(--ex-neutro-fundo);  color: var(--ex-neutro); }

/* ---------- Abas por status ---------- */
.ex-abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--ex-borda); margin-bottom: 1rem; }
.ex-abas a {
    padding: .65rem .9rem; color: var(--ex-texto-2); text-decoration: none; font-weight: 500;
    border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: .4rem;
}
.ex-abas a:hover { color: var(--ex-texto); }
.ex-abas a.ativa { color: var(--ex-primaria); border-bottom-color: var(--ex-primaria); }
.ex-abas .ex-contador { background: var(--ex-neutro-fundo); color: var(--ex-neutro); border-radius: 10px; padding: 0 .45rem; font-size: .72rem; }
.ex-abas a.ativa .ex-contador { background: var(--ex-primaria-clara); color: var(--ex-primaria); }

/* ---------- Tabelas ---------- */
.ex-tabela { margin: 0; --bs-table-bg: transparent; }
.ex-tabela thead th {
    background: #f8fafc; color: var(--ex-texto-2); font-weight: 600; font-size: .78rem;
    border-bottom: 1px solid var(--ex-borda); padding: .75rem 1rem; white-space: nowrap;
}
.ex-tabela tbody td { padding: .8rem 1rem; vertical-align: middle; border-color: var(--ex-borda); color: var(--ex-texto); }
.ex-tabela tbody tr:hover td { background: #fafbfd; }
.ex-tabela tbody tr:last-child td { border-bottom: 0; }
.ex-tabela .ex-num { text-align: right; font-variant-numeric: tabular-nums; }
.ex-texto-2 { color: var(--ex-texto-2); }
.ex-texto-suave { color: var(--ex-texto-suave); }
.ex-iniciais {
    width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
    background: var(--ex-neutro-fundo); color: var(--ex-texto-2); font-weight: 600; font-size: .72rem; margin-right: .55rem; vertical-align: middle;
}
.ex-acao {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--ex-borda); background: var(--ex-superficie);
    color: var(--ex-texto-2); display: inline-grid; place-items: center;
}
.ex-acao:hover { background: var(--ex-fundo); color: var(--ex-texto); }
.ex-paginacao { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; border-top: 1px solid var(--ex-borda); color: var(--ex-texto-2); }

/* ---------- Botões e formulários ---------- */
.btn { font-weight: 500; border-radius: 8px; padding: .45rem .9rem; font-size: .875rem; }
.btn-primary {
    --bs-btn-bg: var(--ex-primaria); --bs-btn-border-color: var(--ex-primaria);
    --bs-btn-hover-bg: var(--ex-primaria-hover); --bs-btn-hover-border-color: var(--ex-primaria-hover);
    --bs-btn-active-bg: var(--ex-primaria-hover); --bs-btn-active-border-color: var(--ex-primaria-hover);
    --bs-btn-disabled-bg: var(--ex-primaria); --bs-btn-disabled-border-color: var(--ex-primaria);
}
.btn-claro { background: var(--ex-superficie); border: 1px solid var(--ex-borda-forte); color: var(--ex-texto); }
.btn-claro:hover { background: var(--ex-fundo); border-color: var(--ex-borda-forte); }
.form-control, .form-select { background-color: var(--ex-superficie); border-color: var(--ex-borda-forte); border-radius: 8px; font-size: .875rem; padding: .5rem .75rem; }
.form-select { padding-right: 2.25rem; }
.form-control:focus, .form-select:focus { border-color: var(--ex-primaria); box-shadow: 0 0 0 3px rgba(61, 111, 194, .15); }
.form-label { font-weight: 500; color: var(--ex-texto); margin-bottom: .35rem; }
.form-label .obrigatorio { color: var(--ex-perigo); }
.ex-busca { position: relative; }
.ex-busca i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ex-texto-suave); }
.ex-busca .form-control { padding-left: 2.1rem; }

/* ---------- Modal ---------- */
.modal-content { border: 0; border-radius: 12px; box-shadow: 0 12px 40px rgba(31, 42, 55, .15); }
.modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--ex-borda); }
.modal-title { font-weight: 600; font-size: 1.05rem; }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-footer { padding: .9rem 1.5rem; border-top: 1px solid var(--ex-borda); }
.modal-backdrop.show { opacity: .35; }

/* ---------- Gráficos ---------- */
.ex-grafico { position: relative; height: 280px; }
.ex-legenda { display: flex; gap: 1rem; font-size: .8rem; color: var(--ex-texto-2); }
.ex-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cor); margin-right: .4rem; vertical-align: -1px; }

.ex-barra-progresso { height: 6px; background: var(--ex-grade); border-radius: 3px; overflow: hidden; }
.ex-barra-progresso div { height: 100%; border-radius: 3px; }

.pagination {
    --bs-pagination-color: var(--ex-texto-2); --bs-pagination-border-color: var(--ex-borda);
    --bs-pagination-hover-color: var(--ex-primaria); --bs-pagination-hover-bg: var(--ex-primaria-clara);
    --bs-pagination-active-bg: var(--ex-primaria); --bs-pagination-active-border-color: var(--ex-primaria);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(61, 111, 194, .15);
}

.dropdown-menu { border-color: var(--ex-borda); border-radius: 10px; box-shadow: 0 8px 24px rgba(31, 42, 55, .08); font-size: .875rem; }
.dropdown-item { padding: .45rem 1rem; }
.dropdown-item i { width: 1.2rem; color: var(--ex-texto-2); }

/* ---------- Alertas (mensagens flash) ---------- */
.ex-alerta { display: flex; align-items: center; gap: .6rem; border: 0; border-radius: var(--ex-raio); padding: .8rem 3rem .8rem 1rem; font-weight: 500; }
.ex-alerta .btn-close { padding: 1.05rem 1rem; }
.ex-alerta-sucesso { background: var(--ex-sucesso-fundo); color: var(--ex-sucesso); }
.ex-alerta-perigo  { background: var(--ex-perigo-fundo);  color: var(--ex-perigo); }
.ex-alerta-aviso   { background: var(--ex-alerta-fundo);  color: var(--ex-alerta); }

/* ---------- Login e páginas de erro ---------- */
.ex-pagina-centralizada { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.ex-caixa-login { width: 100%; max-width: 400px; }
.ex-caixa-erro { width: 100%; max-width: 560px; }
.ex-logo-grande { width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem; margin: 0 auto; }
.ex-erro-codigo { font-size: 2.5rem; font-weight: 700; color: var(--ex-primaria); line-height: 1; }

/* ---------- Diversos ---------- */
.ex-dica { display: flex; gap: .6rem; background: var(--ex-info-fundo); color: var(--ex-info); border-radius: 8px; padding: .75rem 1rem; font-size: .82rem; }
.ex-logo-previa {
    width: 72px; height: 72px; flex-shrink: 0; border: 1px dashed var(--ex-borda-forte); border-radius: 10px;
    display: grid; place-items: center; overflow: hidden; background: var(--ex-fundo); font-size: 1.6rem;
}
.ex-logo-previa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.input-group-text { background: var(--ex-fundo); border-color: var(--ex-borda-forte); color: var(--ex-texto-2); font-size: .85rem; }
.btn-claro.active { background: var(--ex-primaria-clara); border-color: var(--ex-primaria-media); color: var(--ex-primaria); }