:root { --azul: #11008f; --azul-escuro: #09004f; --verde: #4bbf83; --texto: #1b2541; --texto-suave: #66708a; --borda: #dce2ee; font-family: "Segoe UI", Arial, sans-serif; color: var(--texto); background: #f2f4fa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 36px 24px; background: radial-gradient(circle at 6% 5%, #e4e1ff 0, transparent 26rem), radial-gradient(circle at 95% 95%, #d9f4e6 0, transparent 25rem), #f5f6fa; }
.cartao { background: #fff; width: min(100%, 820px); padding: 40px; border: 1px solid #e6e9f1; border-radius: 20px; box-shadow: 0 24px 60px #0d075c1c; }.cartao-amplo { width: min(100%, 1060px); }
.cabecalho { display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--borda); margin-bottom: 28px; }
.logo-caoa { display: block; width: 123px; height: 34px; object-fit: contain; margin-bottom: 22px; }
.identificador { margin: 0 0 7px; color: var(--azul); font-size: .71rem; font-weight: 800; letter-spacing: .13em; }
h1 { margin: 0 0 8px; color: var(--azul-escuro); font-size: clamp(1.6rem, 4vw, 2rem); letter-spacing: -.03em; }
.subtitulo { color: var(--texto-suave); font-size: .9rem; margin: 0 0 24px; }
.sair { color: var(--azul); text-decoration: none; font-size: .88rem; font-weight: 700; padding: 8px 0; }.sair:hover { color: var(--verde); }
.acoes-cabecalho { display: flex; align-items: flex-start; gap: 18px; }.voltar { color: var(--azul); text-decoration: none; font-size: .86rem; font-weight: 800; padding: 7px 12px; border: 1px solid #c7c2ec; border-radius: 8px; }.voltar:hover { color: #fff; background: var(--azul); border-color: var(--azul); }
.secao-formulario { padding: 0 0 25px; margin-bottom: 25px; border-bottom: 1px solid var(--borda); }.secao-formulario:last-of-type { margin-bottom: 0; }
h2 { margin: 0 0 4px; color: var(--azul-escuro); font-size: 1rem; }
label { display: block; margin: 18px 0 7px; color: #303b57; font-size: .88rem; font-weight: 700; }
input, select, button { width: 100%; min-height: 48px; border-radius: 9px; font: inherit; }
input, select { border: 1px solid #cbd3e1; color: var(--texto); padding: 11px 12px; background: #fff; transition: border .15s, box-shadow .15s; }
input:focus, select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px #10008d1a; }
select:disabled { background: #f5f6f9; color: #8992a5; }
button { border: 0; margin-top: 10px; background: var(--azul); color: #fff; font-weight: 800; letter-spacing: .01em; cursor: pointer; transition: background .15s, transform .15s; }button:hover { background: var(--azul-escuro); transform: translateY(-1px); }button span { margin-left: 7px; font-size: 1.2em; }button:disabled { background: #9299aa; cursor: wait; transform: none; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.linha-tres { grid-template-columns: repeat(3, 1fr); }
.campo-curto { max-width: 300px; }.titulo-com-acao { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.texto-auxiliar { margin: 5px 0 0; color: var(--texto-suave); font-size: .86rem; }.botao-secundario { width: auto; min-height: 42px; margin: 0; padding: 0 16px; background: #f0effb; color: var(--azul); border: 1px solid #cbc6ed; }.botao-secundario:hover { color: #fff; background: var(--azul); }.lista-veiculos { display: grid; gap: 12px; margin-top: 20px; }.linha-veiculo { display: grid; grid-template-columns: 1fr 1.6fr .7fr 42px; align-items: end; gap: 12px; padding: 16px; border: 1px solid var(--borda); border-radius: 12px; background: #fafaff; }.linha-veiculo label { margin-top: 0; }.coluna-remover { display: flex; align-items: end; }.botao-remover-veiculo { width: 42px; min-height: 42px; margin: 0; padding: 0; background: #fff; color: #b00020; border: 1px solid #edb9c2; font-size: 1.4rem; }.botao-remover-veiculo:hover { background: #fff3f5; color: #b00020; }
#mensagem { min-height: 24px; margin: 20px 0 0; font-size: .92rem; font-weight: 700; }.erro { color: #b00020; }.sucesso { color: #087a37; }
.portal { width: min(100%, 980px); }.portal-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 4px 30px; }.portal-cabecalho .logo-caoa { margin: 0; }.portal-introducao { padding: 4px; margin-bottom: 26px; }.portal-introducao h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 10px; }.portal-introducao h1 span { color: var(--azul); }.portal-introducao > p:last-child { margin: 0; color: var(--texto-suave); font-size: 1.05rem; }.grade-formularios { display: flex; gap: 14px; flex-wrap: wrap; }.botao-fluxo, .botao-regionais { width: min(100%, 300px); min-height: 92px; display: flex; align-items: center; gap: 13px; padding: 18px 20px; text-decoration: none; border-radius: 14px; transition: transform .18s, box-shadow .18s; }.botao-fluxo { color: #fff; background: linear-gradient(135deg, #1600a4, #08004f); box-shadow: 0 12px 25px #0d075c25; }.botao-fluxo:hover, .botao-regionais:hover { transform: translateY(-3px); }.botao-fluxo:hover { box-shadow: 0 18px 32px #0d075c38; }.icone-fluxo { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid #ffffff52; border-radius: 10px; background: #ffffff16; font-size: 1.25rem; }.botao-fluxo > span:nth-child(2), .botao-regionais > span:nth-child(2) { font-size: 1rem; font-weight: 800; }.botao-fluxo b { margin-left: auto; color: var(--verde); font-size: 1.35rem; }.botao-regionais { color: var(--azul-escuro); border: 1px solid #cfcaf1; background: #fff; box-shadow: 0 12px 25px #0d075c10; }.botao-regionais:hover { box-shadow: 0 18px 32px #0d075c1c; }.botao-regionais .icone-fluxo { border-color: #d4d0f4; background: #efeeff; color: var(--azul); }.botao-regionais b { margin-left: auto; color: var(--azul); font-size: 1.35rem; }.atalho-acessos { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; color: #087a46; background: #e8f8ef; border: 1px solid #bce4cd; text-decoration: none; font-size: .82rem; font-weight: 800; }.atalho-acessos:hover { color: #fff; background: #087a46; border-color: #087a46; }
.painel-regionais { width: min(100%, 1480px); }.cabecalho-regionais { margin-bottom: 26px; }.cabecalho-regionais h1 { margin: 0 0 8px; }.cabecalho-regionais > p:last-child { color: var(--texto-suave); margin: 0; }.filtros-regionais { padding: 22px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; }.filtros-regionais label { margin-top: 0; }.filtros-regionais > div { display: flex; gap: 12px; }.filtros-regionais button { width: 130px; margin: 0; }.quantidade { color: var(--texto-suave); font-size: .9rem; }.tabela-regionais-wrap { overflow: auto; border: 1px solid var(--borda); border-radius: 14px; background: #fff; }.tabela-regionais { min-width: 1450px; width: 100%; border-collapse: collapse; font-size: .84rem; }.tabela-regionais th { position: sticky; top: 0; background: #f0effb; color: var(--azul-escuro); text-align: left; white-space: nowrap; }.tabela-regionais th, .tabela-regionais td { padding: 12px; border-bottom: 1px solid #e7eaf1; vertical-align: top; }.tabela-regionais tr:hover { background: #fafaff; }.input-regional { min-width: 130px; min-height: 38px; padding: 7px; }.botao-salvar-regional { width: auto; min-height: 38px; margin: 0; padding: 0 14px; font-size: .82rem; }
.painel-acessos { width: min(100%, 900px); }.form-acessos { display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: end; gap: 14px; padding: 22px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; margin-bottom: 10px; }.form-acessos label { margin-top: 0; }.form-acessos button { width: 180px; margin: 0; }.tabela-acessos { width: 100%; border-collapse: collapse; font-size: .9rem; }.tabela-acessos th { background: #f0effb; color: var(--azul-escuro); text-align: left; }.tabela-acessos th, .tabela-acessos td { padding: 14px; border-bottom: 1px solid #e7eaf1; }.botao-remover { width: auto; min-height: 36px; margin: 0; padding: 0 12px; background: #fff; color: #b00020; border: 1px solid #edb9c2; }.botao-remover:hover { background: #fff3f5; color: #b00020; }
@media (max-width: 620px) { body { padding: 16px; }.cartao { padding: 26px 22px; border-radius: 14px; }.linha, .linha-tres, .linha-veiculo { grid-template-columns: 1fr; gap: 0; }.cabecalho { display: block; }.sair { display: inline-block; padding: 0 0 18px; }.acoes-cabecalho { gap: 14px; }.portal-cabecalho { padding-bottom: 20px; }.botao-fluxo, .botao-regionais, .botao-acessos { width: 100%; min-height: 120px; }.grade-formularios { flex-direction: column; }.filtros-regionais > div { display: block; }.filtros-regionais button { width: 100%; margin-top: 10px; }.form-acessos { grid-template-columns: 1fr; }.form-acessos button { width: 100%; }.titulo-com-acao { display: block; }.botao-secundario { width: 100%; margin-top: 15px; }.campo-curto { max-width: none; }.coluna-remover { margin-top: 10px; }.botao-remover-veiculo { width: 100%; } }