/*
 * Estilos do CRM ADI, sem frameworks.
 * As cores estão em variáveis: substituir pelas cores oficiais da ADI quando forem fornecidas.
 */
:root {
    --cor-principal: #00557f;        /* provisória: substituir pela cor ADI */
    --cor-principal-escura: #003d5c;
    --cor-texto: #1b1f23;
    --cor-texto-suave: #4f5a63;
    --cor-fundo: #f5f7f8;
    --cor-superficie: #ffffff;
    --cor-borda: #cfd6db;
    --cor-sucesso: #1e6b3a;
    --cor-sucesso-fundo: #e6f4ea;
    --cor-erro: #a1191b;
    --cor-erro-fundo: #fdecea;
    --cor-aviso: #7a4e00;
    --cor-aviso-fundo: #fff4d6;
    --cor-foco: #ffbf47;
    --raio: 6px;
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cor-texto);
    background: var(--cor-fundo);
}

a { color: var(--cor-principal); }
a:hover { color: var(--cor-principal-escura); }

/* Foco sempre visível para quem navega com o teclado */
:focus-visible {
    outline: 3px solid var(--cor-foco);
    outline-offset: 2px;
}

.saltar {
    position: absolute;
    left: -9999px;
}
.saltar:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    background: var(--cor-superficie);
    padding: .5rem 1rem;
}

.visualmente-escondido {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Topo */
.topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    padding: .75rem 1rem;
    background: var(--cor-principal);
    color: #fff;
}
.topo a { color: #fff; }
.marca {
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}
.topo nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.topo nav a { text-decoration: none; padding: .25rem 0; }
.topo nav a[aria-current="page"] { border-bottom: 3px solid #fff; }
.sessao {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}
.sessao form { margin: 0; }
.topo .botao-ligacao { color: #fff; }

.conteudo {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; }

.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.cabecalho-pagina h1 { margin: 0; }

.caixa {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

/* Avisos */
.aviso {
    border-left: 5px solid;
    border-radius: var(--raio);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}
.aviso p { margin: .25rem 0; }
.aviso-sucesso { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso); }
.aviso-erro { background: var(--cor-erro-fundo); border-color: var(--cor-erro); }
.aviso-aviso { background: var(--cor-aviso-fundo); border-color: var(--cor-aviso); }
.lista-alertas { margin: 0; padding-left: 1.25rem; }

/* Formulários */
.formulario {
    display: flex;
    flex-direction: column;
    max-width: 32rem;
}
.formulario.largo { max-width: 44rem; }
label { font-weight: 600; margin-top: .9rem; }
.formulario > label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
    font: inherit;
    padding: .5rem .6rem;
    border: 1px solid #8a959e;
    border-radius: var(--raio);
    background: #fff;
    color: var(--cor-texto);
    width: 100%;
    margin-top: .25rem;
}
.ajuda, .nota { color: var(--cor-texto-suave); font-size: .9rem; margin: .25rem 0 0; }
.caixa-verificacao {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
}
.caixa-verificacao label { margin: 0; font-weight: 400; }
.caixa-verificacao input { width: 1.15rem; height: 1.15rem; }
fieldset { border: 0; padding: 0; margin: .9rem 0 0; }
legend { font-weight: 600; }

.botoes { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }

.botao {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: .55rem 1.1rem;
    margin-top: 1.25rem;
    border: 0;
    border-radius: var(--raio);
    background: var(--cor-principal);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    align-self: flex-start;
}
.botoes .botao, .cabecalho-pagina .botao, .filtros .botao { margin-top: 0; }
.botao:hover { background: var(--cor-principal-escura); color: #fff; }
.botao-perigo { background: var(--cor-erro); }
.botao-perigo:hover { background: #7d1214; }
.botao-ligacao {
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    color: var(--cor-principal);
    text-decoration: underline;
    cursor: pointer;
}

/* Filtros */
.filtros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .75rem 1rem;
    align-items: end;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1rem;
    margin-bottom: 1rem;
}
.filtros label { margin: 0; }

/* Tabelas */
.tabela-rolar { overflow-x: auto; margin: 1rem 0; }
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--cor-superficie);
}
th, td {
    text-align: left;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--cor-borda);
    vertical-align: top;
}
thead th { background: #e9eef1; font-weight: 600; }
tr.inativo td { color: var(--cor-texto-suave); }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.acoes form { margin: 0; }

.ficha {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1.25rem;
}
.ficha dt { font-weight: 600; }
.ficha dd { margin: 0; }

.paginacao { display: flex; gap: 1.5rem; align-items: center; }

code.destaque {
    font-size: 1.25rem;
    background: #fff;
    padding: .2rem .5rem;
    border-radius: var(--raio);
    user-select: all;
}

/* Páginas simples (login, instalação) */
.pagina-simples {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}
.cartao-central {
    width: 100%;
    max-width: 26rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.5rem;
}
.cartao-central .marca { color: var(--cor-principal); margin: 0 0 1rem; }

@media (max-width: 40rem) {
    .sessao { margin-left: 0; width: 100%; }
    .ficha { grid-template-columns: 1fr; }
    .ficha dd { margin-bottom: .5rem; }
}