/* Qualifica IA — estilos compartilhados entre index.html, login.html e admin.html.
Mantém uma única fonte de verdade para a identidade visual (navy + âmbar). */
:root{
--navy:#0f1b2d;
--navy-light:#16273f;
--amber:#c8912a;
--amber-light:#e0ac4a;
--bg:#f4f5f7;
--card:#ffffff;
--border:#e1e4ea;
--text:#1c2430;
--text-muted:#5b6472;
--ok:#1f7a4d;
--ok-bg:#e6f4ea;
--warn:#b7791f;
--err:#b3261e;
--err-bg:#fbe9e7;
/* Fonte de marca (serifada, com mais personalidade), usada so no nome
"Qualifica IA" e nos titulos de secao (.card h2) - separa
visualmente "marca" de "interface" sem trocar a fonte de todo o
texto, que continua no system font por legibilidade/performance.
Carregada via Google Fonts (ver no de cada pagina). */
--font-marca:'Fraunces','Georgia',serif;
}
*{box-sizing:border-box;}
body{
margin:0;
font-family:'Segoe UI',Helvetica,Arial,sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh;
}
/* ---------- Cabeçalho com marca ---------- */
header{
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
color:#fff;
padding:28px 24px;
}
.header-inner{
max-width:760px;
margin:0 auto;
display:flex;
align-items:center;
gap:14px;
}
.logo-mark{
width:42px;height:42px;border-radius:50%;
background:var(--amber);
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:20px;color:var(--navy);
flex-shrink:0;
}
/* Icone do selo de qualidade (anel externo + anel pontilhado interno,
como a borda de um carimbo/selo oficial + check no centro), usado
dentro de .logo-mark (circular) em todas as telas e, com fundo
proprio, como favicon.svg. Escolhido no lugar do antigo icone de
"documento com check" (generico demais) para remeter diretamente ao
universo cartorial e ao proprio nome "Qualifica" (selo de qualidade). */
.logo-icon{width:24px;height:24px;flex-shrink:0;}
.header-text h1{
margin:0;font-size:21px;font-weight:600;letter-spacing:.2px;
font-family:var(--font-marca);
}
.header-text p{
margin:2px 0 0;font-size:13px;color:#c3ccd9;
}
/* ---------- Cartões ---------- */
.card{
background:var(--card);
border:1px solid var(--border);
border-radius:12px;
padding:24px 26px;
box-shadow:0 1px 3px rgba(15,27,45,.06);
margin-bottom:20px;
}
.card h2{
margin:0 0 4px;
font-size:17px;
font-weight:600;
font-family:var(--font-marca);
}
.card h3{
margin:16px 0 10px;
font-size:14px;
font-weight:600;
color:var(--text);
}
.card .desc,
p.sub{
margin:0 0 20px;
font-size:13.5px;
color:var(--text-muted);
line-height:1.5;
}
/* ---------- Formulários ---------- */
label{
display:block;
font-size:13px;
font-weight:600;
color:var(--text);
margin-bottom:6px;
}
.field{margin-bottom:18px;}
input[type="text"],
input[type="password"],
input[type="month"],
select,
textarea{
width:100%;
font-family:inherit;
font-size:14px;
padding:10px 12px;
border:1px solid var(--border);
border-radius:8px;
background:#fbfbfc;
color:var(--text);
margin-bottom:14px;
transition:border-color .15s,box-shadow .15s;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="month"]:focus,
select:focus,
textarea:focus{
outline:none;
border-color:var(--amber);
box-shadow:0 0 0 3px rgba(200,145,42,.15);
background:#fff;
}
textarea{
min-height:170px;
resize:vertical;
line-height:1.5;
}
/* Select: substitui a seta nativa do navegador (que, em alguns
sistemas, aparece como uma caixinha separada ao lado do texto - o
que pode parecer "dois botões" colados) por uma seta unica,
discreta, desenhada em CSS, com o mesmo visual dos campos de texto. */
select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
cursor:pointer;
padding-right:34px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 10px center;
background-size:16px 16px;
}
select::-ms-expand{display:none;}
/* ---------- Botões ---------- */
button{
background:var(--navy);
color:#fff;
border:none;
border-radius:8px;
padding:11px 24px;
font-size:14.5px;
font-weight:600;
cursor:pointer;
transition:background .15s,transform .05s,opacity .15s;
}
button:hover:not(:disabled){background:var(--navy-light);}
button:active:not(:disabled){transform:translateY(1px);}
button:disabled{
background:#a9b0bc;
cursor:not-allowed;
opacity:.8;
}
button.secundario{
background:#eef0f3;
color:var(--text);
}
button.secundario:hover:not(:disabled){background:#e2e5ea;}
/* ---------- Foco por teclado ---------- */
/* Anel de foco visivel e consistente para quem navega por teclado (Tab) -
sem isto, o navegador usa o contorno padrao (fino, inconsistente entre
navegadores) ou nenhum, em elementos com estilo proprio (botoes, links,
os itens de protocolo clicaveis que agora tambem recebem foco). Usa
:focus-visible para so aparecer na navegacao por teclado, nao ao clicar
com o mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
outline:2px solid var(--amber);
outline-offset:2px;
}
/* ---------- Mensagens de status ---------- */
#status,
.msg{
margin:16px 0 0;
font-size:13.5px;
font-weight:600;
color:var(--text-muted);
min-height:18px;
}
#status.status-ok,
.msg.ok{color:var(--ok);}
#status.status-warn,
.msg.warn{color:var(--warn);}
#status.status-err,
.msg.erro{color:var(--err);}
/* Icones (alem da cor) para quem tem dificuldade de distinguir cores
proximas (verde/ambar/vermelho) - reforcam o significado sem depender
so do tom. :not(:empty) evita que o icone apareca sozinho em
paragrafos de mensagem que ja nascem com a classe de cor no HTML mas
comecam vazios (ex.: #erro no login), antes de qualquer texto ser
escrito neles via JS. */
#status.status-ok:not(:empty)::before,
.msg.ok:not(:empty)::before{content:"✓ ";}
#status.status-warn:not(:empty)::before,
.msg.warn:not(:empty)::before{content:"⚠ ";}
#status.status-err:not(:empty)::before,
.msg.erro:not(:empty)::before{content:"✕ ";}
/* ---------- Tabelas ---------- */
.tabela-wrap{
overflow-x:auto;
border:1px solid var(--border);
border-radius:8px;
}
table{
width:100%;
border-collapse:collapse;
font-size:13.5px;
}
thead th{
text-align:left;
padding:10px 12px;
background:#f7f8fa;
color:var(--text-muted);
font-weight:600;
font-size:12px;
text-transform:uppercase;
letter-spacing:.4px;
border-bottom:1px solid var(--border);
white-space:nowrap;
}
tbody td{
text-align:left;
padding:10px 12px;
border-bottom:1px solid var(--border);
vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#fafbfc;}
/* ---------- Selos (status ativo/inativo etc.) ---------- */
.tag{
display:inline-block;
padding:2px 10px;
border-radius:10px;
font-size:12px;
font-weight:600;
}
.tag.ativo{background:var(--ok-bg);color:var(--ok);}
.tag.inativo{background:var(--err-bg);color:var(--err);}
.tag.reset{background:#fef3c7;color:#92400e;margin-top:4px;}
.tag.ativo::before{content:"✓ ";}
.tag.inativo::before{content:"✕ ";}
.tag.reset::before{content:"⚠ ";}
/* ---------- Avisos ---------- */
.aviso{
background:#fdf6e9;
border:1px solid #f0dcb0;
color:#7a5a12;
border-radius:8px;
padding:12px 14px;
font-size:12.5px;
line-height:1.5;
margin-bottom:20px;
}
/* ---------- Rodapé ---------- */
footer{
text-align:center;
font-size:12px;
color:var(--text-muted);
padding:0 24px 30px;
}
/* ---------- Utilitários de layout ---------- */
.wrap{max-width:760px;margin:0 auto;padding:28px 24px 60px;}
.divider{
display:flex;
align-items:center;
gap:12px;
margin:22px 0;
color:var(--text-muted);
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.5px;
}
.divider::before,.divider::after{
content:"";
flex:1;
height:1px;
background:var(--border);
}
/* ---------- Tela de login (centralizada) ---------- */
.login-shell{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
}
.login-card{
width:100%;
max-width:380px;
}
.login-card .logo-mark{margin:0 auto 16px;}
.login-card .header-text{text-align:center;width:100%;}
.login-card h1{color:var(--navy);}
.login-card p.sub{text-align:center;}
@media (max-width:480px){
header{padding:22px 18px;}
main,.wrap{padding:22px 16px 48px;}
.card{padding:20px 18px;}
}
/* ---------- Toast (confirmacao de sucesso) ---------- */
/* Confirmacoes rapidas ("Pendencia marcada", "Escrevente cadastrado" etc.)
que aparecem no canto da tela e somem sozinhas - complementam (nao
substituem) as mensagens .msg/.ok fixas, para acoes cujo resultado o
usuario pode nao notar imediatamente (fora do campo de visao, ou a
tela muda de estado logo em seguida). Criado dinamicamente por
mostrarToast() em cada pagina. */
.toast-container{
position:fixed; bottom:20px; right:20px; z-index:9999;
display:flex; flex-direction:column; gap:10px; max-width:320px;
pointer-events:none;
}
.toast{
background:var(--navy); color:#fff; padding:12px 16px; border-radius:8px;
font-size:13.5px; font-weight:600; box-shadow:0 4px 16px rgba(15,27,45,.25);
opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s;
}
.toast::before{margin-right:6px;}
.toast.mostrar{opacity:1; transform:translateY(0);}
.toast.toast-ok{background:var(--ok);}
.toast.toast-ok::before{content:"✓";}
.toast.toast-erro{background:var(--err);}
.toast.toast-erro::before{content:"✕";}
@media (max-width:480px){
.toast-container{left:16px; right:16px; max-width:none;}
}
/* ---------- Marca d'agua de rastreabilidade ---------- */
/* Nao impede print/gravacao de tela (nenhuma pagina web consegue) - serve
para que qualquer print ou video vazado carregue, de forma legivel, a
identificacao de quem estava logado e o momento exato. Aplicada por
ativarMarcaDagua() (index.html e admin.html) sobre um
fixo, com o padrao gerado dinamicamente em JS (ver comentario la). */
#marcaDagua{
position:fixed; inset:0; z-index:9998; pointer-events:none;
background-repeat:repeat; opacity:.16;
}