/* =========================================================
   SISTEMA BASE CSS
   Versao organizada e padronizada
   Objetivo:
   - centralizar o visual do sistema
   - reduzir duplicidade entre paginas PHP
   - servir como base unica para consultas, formularios,
     detalhes, menus, login e relatorios
   ========================================================= */

/* =========================================================
   1. BASE GLOBAL
   ========================================================= */

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background: #f5f7fb;
    color: #1f2937;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}

strong {
    font-weight: 700;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

input,
select,
textarea,
button {
    font: inherit;
}

input,
select,
textarea {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    box-sizing: border-box;
    font-size: 14px;
}

textarea {
    resize: vertical;
}

/* =========================================================
   2. LAYOUT GERAL
   ========================================================= */

.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

.container-compacto {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

.container-login {
    max-width: 520px;
    margin: 20px auto 40px auto;
    background: #ffffff;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Título da página de login — centralizado e menor */
.container-login h1 {
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    color: #6b7280;
    margin-bottom: 4px;
}

/* Subtítulo maior na tela de login */
.container-login .subtitulo {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.bloco {
    background: #ffffff;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bloco h3 {
    /* Cabeçalho do bloco (19/07/2026): faixa azul intermediária, sem
       sublinhado. A faixa clara anterior (#eef0f8) quase não se
       distinguia do fundo da página (#f5f7fb); a versão em marinho
       sólido (#0E2841) pesou demais na página inteira. */
    color: #0E2841;
    background: #dde2f0;
    margin: -18px -18px 16px -18px;
    padding: 12px 18px;
    border-radius: 10px 10px 0 0;
}

.bloco-central {
    background: #ffffff;
    border-radius: 12px;
    padding: 50px 30px;
    margin-top: 30px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* =========================================================
   3. TEXTOS E APOIO
   ========================================================= */

.titulo-principal {
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.versao-software {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
    text-align: center;
}

.separador-versao {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0 0 28px 0;
}

.subtitulo,
.descricao,
.observacao {
    color: #4b5563;
    font-size: 14px;
}

.subtitulo {
    text-align: center;
    margin-bottom: 24px;
}

.dados-empresa {
    font-size: 16px;
    color: #374151;
    line-height: 1.8;
}

.texto-ajuda {
    font-size: 13px;
    color: #4b5563;
    margin-top: 6px;
}

.rodape,
.rodape-sistema {
    text-align: center;
    color: #4b5563;
    line-height: 1.7;
}

.rodape {
    margin-top: 24px;
    font-size: 14px;
}

.rodape-sistema {
    margin-top: 32px;
    font-size: 13px;
    line-height: 1.6;
}

/* =========================================================
   4. MENSAGENS E ALERTAS
   ========================================================= */

.erro,
.mensagem-erro {
    background: #fee2e2;
    color: #991b1b;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    margin-bottom: 20px;
}

.sucesso,
.mensagem-sucesso {
    background: #dcfce7;
    color: #166534;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    margin-bottom: 20px;
}

.alerta {
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-weight: 700;
}

.alerta-erro {
    background: #ffe9e9;
    color: #842029;
}

.alerta-sucesso {
    background: #e8fff1;
    color: #0f5132;
}

.alerta-aviso {
    background: #fff7ed;
    color: #9a3412;
}

.caixa-informativa {
    background: #eff6ff;
    color: #1e3a8a;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 14px;
}

.aviso-uso {
    background: #f3f4f6;
    color: #374151;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 700;
    margin-top: 12px;
}

.aviso-metadado {
    background: #eff6ff;
    color: #1d4ed8;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 700;
    margin-top: 12px;
}

.aviso-importante {
    background: #fef3c7;
    color: #92400e;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 700;
    margin-top: 12px;
}

/* =========================================================
   5. ESTADOS VISUAIS
   ========================================================= */

.nao-informado,
.valor-nao-informado {
    color: #6b7280;
    font-style: italic;
}

.vazio,
.valor-vazio {
    color: #9ca3af;
    font-style: italic;
}

.valor-obrigatorio-nao-informado {
    color: #991b1b;
    background: #fee2e2;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    display: inline-block;
}

.badge-tecnico {
    display: inline-block;
    background: #e5e7eb;
    color: #374151;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.status-ok,
.status-aviso,
.status-erro {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.status-ok {
    background: #dcfce7;
    color: #166534;
}

.status-aviso {
    background: #ffedd5;
    color: #9a3412;
}

.status-erro {
    background: #fee2e2;
    color: #991b1b;
}

.status-ativo {
    color: #166534;
    font-weight: 700;
}

.status-inativo {
    color: #991b1b;
    font-weight: 700;
}

/* =========================================================
   6. BARRAS DE ACAO E FILTRO
   ========================================================= */

.barra-acoes,
.barra-filtros,
.barra-busca,
.barra-superior-acoes,
.barra-superior-detalhe,
.topo-acoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.barra-acoes {
    margin-top: 16px;
}

.barra-filtros,
.barra-busca {
    margin-top: 16px;
    margin-bottom: 16px;
}

.barra-superior-acoes {
    justify-content: space-between;
    margin-bottom: 16px;
}

.barra-superior-detalhe {
    margin-top: 12px;
}

.topo-acoes {
    justify-content: space-between;
}

.campo-busca {
    flex: 1;
    min-width: 260px;
}

.campo-ordenacao {
    min-width: 220px;
}

.campo-direcao {
    min-width: 150px;
}

.campo-tabela {
    min-width: 180px;
}

.barra-filtros input[type="text"],
.barra-filtros input[type="number"],
.barra-filtros input[type="email"],
.barra-filtros input[type="date"],
.barra-filtros select,
.barra-busca input[type="text"],
.barra-busca input[type="number"],
.barra-busca input[type="email"],
.barra-busca input[type="date"],
.barra-busca select {
    background: #ffffff;
    font-size: 14px;
}


/* =========================================================
   7. BOTOES PADRAO
   ========================================================= */

.botao,
.botao-pesquisa,
.botao-limpar,
.botao-secundario,
.botao-detalhar,
.botao-alterar,
.botao-excluir,
.botao-confirmar-exclusao,
.botao-verde,
.botao-incluir,
.botao-reservado,
.botao-menu,
.botao-topo,
.botao-modo,
.botao-cancelar,
.botao-ativar,
.botao-inativar,
.botao-em-uso,
.botao-bloqueado,
.botao-salvar,
.botao-exportar,
.botao-principal,
.botao-link {
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    /* 19/07/2026: botões padrão levemente menores (antes padding 8px 12px
       e fonte herdada da página). Não afeta os botões pequenos com estilo
       inline (ex.: [PDF]), que sobrepõe esta regra. */
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

.botao,
.botao-pesquisa,
.botao-principal,
.botao-link {
    background: #5b7bb5;
}

.botao:hover,
.botao-pesquisa:hover,
.botao-principal:hover,
.botao-link:hover {
    background: #4a6696;
}

.botao-secundario,
.botao-limpar,
.botao-cancelar {
    background: #8a8f96;
}

.botao-secundario:hover,
.botao-limpar:hover,
.botao-cancelar:hover {
    background: #73787f;
}

.botao-detalhar {
    background: #5c8f8f;
}

.botao-detalhar:hover {
    background: #4c7a7a;
}

.botao-alterar {
    background: #d08a4b;
}

.botao-alterar:hover {
    background: #b67439;
}

.botao-excluir,
.botao-confirmar-exclusao {
    background: #c46b6b;
}

.botao-excluir:hover,
.botao-confirmar-exclusao:hover {
    background: #a55656;
}

.botao-verde,
.botao-salvar,
.botao-ativar,
.botao-exportar,
.botao-incluir {
    background: #5f9f7f;
}

.botao-verde:hover,
.botao-salvar:hover,
.botao-ativar:hover,
.botao-exportar:hover,
.botao-incluir:hover {
    background: #4e866a;
}

.botao-inativar,
.botao-limpar-aviso {
    background: #c28a5a;
}

.botao-inativar:hover,
.botao-limpar-aviso:hover {
    background: #a87449;
}

.botao-reservado,
.botao-em-uso,
.botao-bloqueado {
    background: #b4b8bd;
    cursor: default;
}

.botao-menu {
    background: #d8dee6;
    color: #1f2937;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
}

.botao-menu:hover {
    background: #c5ccd6;
}

.botao-menu.ativo {
    background: #5b7bb5;
    color: #ffffff;
}

.botao-topo {
    background: #8a8f96;
    color: #ffffff;
}

.botao-topo:hover {
    background: #73787f;
}

.botao-topo-inicio {
    background: #5f9f7f;
    color: #ffffff;
}

.botao-topo-inicio:hover {
    background: #4e866a;
}

.botao-topo-sair {
    background: #c46b6b;
    color: #ffffff;
}

.botao-topo-sair:hover {
    background: #a55656;
}

.botao-modo {
    background: #8a8f96;
    color: #ffffff;
}

.botao-modo:hover {
    background: #73787f;
}

.botao-modo.ativo {
    background: #5b7bb5;
}

/* =========================================================
   8. TABELAS
   ========================================================= */

table,
.tabela {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

th,
td,
.tabela th,
.tabela td {
    border: 1px solid #d1d5db;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

th,
.tabela th {
    background: #f3f4f6;
    white-space: nowrap;
}

td,
.tabela td {
    white-space: nowrap;
}

.tabela-scroll {
    overflow-x: auto;
}

.coluna-acoes {
    white-space: nowrap;
}

.acoes {
    white-space: nowrap;
}

.acoes a {
    margin-right: 6px;
    margin-bottom: 4px;
}

.linha-em-uso td {
    color: #4b5563;
}

.lista-interna {
    margin: 0;
    padding-left: 18px;
}

/* =========================================================
   9. GRIDS DE DETALHE, FORMULARIO E RESUMO
   ========================================================= */

.grid-detalhe {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 10px 16px;
}

.grid-form {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 10px 16px;
    align-items: start;
}

.grid-resumo {
    display: grid;
    grid-template-columns: repeat(6, minmax(160px, 1fr));
    gap: 12px;
}

.card-resumo {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 14px;
}

.card-resumo strong {
    display: block;
    font-size: 24px;
    margin-top: 6px;
}

.campo-label,
.campo-nome {
    font-weight: 700;
}

.campo-label {
    color: #111827;
}

.campo-nome {
    color: #2d6a9f;
}

.botao-desabilitado {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    user-select: none;
}

.campo-label {
    padding-top: 10px;
}

.campo-obrigatorio {
    color: #b91c1c;
}

.campo-input input,
.campo-input select,
.campo-input textarea {
    width: 100%;
}

.campo-input textarea {
    min-height: 90px;
}

.campo-input input[readonly] {
    background: #f3f4f6;
    color: #374151;
}

.campo-com-reset {
    display: flex;
    align-items: center;
    gap: 8px;
}

.campo-com-reset-textarea {
    align-items: flex-end;
}

.campo-com-reset input,
.campo-com-reset textarea {
    flex: 1 1 auto;
    width: auto;
}

.botao-modo-automatico {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid #2d6a9f;
    background: #ffffff;
    color: #2d6a9f;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.botao-modo-automatico:hover {
    background: #2d6a9f;
    color: #ffffff;
}

.botao-modo-automatico.modo-manual {
    background: #fef3c7;
    border-color: #b45309;
    color: #b91c1c;
    font-weight: 800;
}

.botao-modo-automatico.modo-manual:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.campo-valor {
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px 10px;
    min-height: 20px;
    white-space: normal;
    word-break: break-word;
}

/* =========================================================
   10. PERMISSOES E CHECKBOX
   ========================================================= */

.grupo-permissoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.item-permissao {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
}

.item-permissao label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 0;
}

/* =========================================================
   11. TOPO DO SISTEMA E MENU
   ========================================================= */

.topo-sistema {
    background: #6f7e96;
    color: #ffffff;
    padding: 12px 20px;
    box-sizing: border-box;
}

.topo-sistema-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.topo-esquerda {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.topo-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.topo-logo img {
    max-height: 42px;
    width: auto;
    display: block;
}

.topo-identificacao {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.topo-sistema-titulo {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

.topo-usuario {
    font-size: 13px;
    color: #eef2f7;
    line-height: 1.2;
}

.topo-direita {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rotulo-modo {
    font-size: 13px;
    font-weight: 700;
    color: #eef2f7;
}

.botao-modo {
    background: #8a8f96;
    color: #ffffff;
}

.botao-modo:hover {
    background: #73787f;
}

.botao-modo.ativo {
    background: #5b7bb5;
    color: #ffffff;
}

.botao-topo {
    background: #8a8f96;
    color: #ffffff;
}

.botao-topo:hover {
    background: #73787f;
}

.botao-topo-inicio {
    background: #5f9f7f;
    color: #ffffff;
}

.botao-topo-inicio:hover {
    background: #4e866a;
}

.botao-topo-sair {
    background: #c46b6b;
    color: #ffffff;
}

.botao-topo-sair:hover {
    background: #a55656;
}

.faixa-menu {
    background: #ffffff;
    padding: 14px 20px 18px 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.menu-grupos {
    width: 100%;
    border-collapse: collapse;
}

.menu-grupos tr {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.menu-grupos tr:last-child {
    border-bottom: none;
}

.menu-grupo-label {
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 14px 5px 0;
    vertical-align: middle;
    width: 1px;
}

.menu-grupo-botoes {
    padding: 4px 0;
    vertical-align: middle;
}

.menu-grupo-botoes .botao-menu {
    margin-right: 4px;
    margin-bottom: 2px;
}

.bloco-menu {
    margin-bottom: 14px;
}

.titulo-bloco-menu {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}

.linha-botoes-menu {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.botao-menu {
    background: #d8dee6;
    color: #1f2937;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
}

.botao-menu:hover {
    background: #c5ccd6;
}

.botao-menu.ativo {
    background: #5b7bb5;
    color: #ffffff;
}


/* =========================================================
   12. LOGIN E RECUPERACAO
   ========================================================= */

.topo-login {
    text-align: center;
    padding: 30px 20px 10px 20px;
}

.topo-login img {
    max-width: 260px;
    width: 100%;
    height: auto;
}

/* =========================================================
   13. AJUSTES ESPECIFICOS
   ========================================================= */

.campo-data:invalid {
    box-shadow: none;
}

/* =========================================================
   14. RESPONSIVIDADE
   ========================================================= */

@media (max-width: 1200px) {
    .grid-resumo {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 900px) {
    .barra-acoes,
    .barra-filtros,
    .barra-busca,
    .topo-sistema-linha,
    .barra-superior-acoes,
    .topo-acoes {
        flex-direction: column;
        align-items: stretch;
    }

    .campo-busca,
    .campo-ordenacao,
    .campo-direcao,
    .campo-tabela {
        width: 100%;
        min-width: 100%;
    }

    .grid-detalhe,
    .grid-form,
    .grid-resumo {
        grid-template-columns: 1fr;
    }

    .topo-esquerda,
    .topo-direita {
        justify-content: flex-start;
    }

    .barra-superior-acoes .botao,
    .barra-superior-acoes .botao-pesquisa,
    .barra-superior-acoes .botao-limpar,
    .barra-superior-acoes .botao-secundario,
    .barra-superior-acoes .botao-exportar,
    .topo-acoes .botao,
    .topo-acoes .botao-secundario,
    .topo-acoes .botao-confirmar-exclusao {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 800px) {
    .tabela th,
    .tabela td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        white-space: normal;
    }

    .tabela tr {
        display: block;
        margin-bottom: 10px;
    }
}