/* =====================================================================
ENGECAMPO - GESTAO DE FROTA
Folha de estilo principal (mobile-first)
Paleta da empresa:
#02063d azul marinho - estrutura, cabecalhos, texto forte
#8fb0e2 azul claro - superficies, apoio, destaques suaves
#c80505 vermelho - cor de acento da marca: barras, selos,
numeros de etapa, foco, alertas
O vermelho aparece de proposito em elementos decorativos e de
destaque, nao apenas em erro. Para que erro continue reconhecivel,
toda mensagem de erro carrega icone + fundo tingido + borda.
===================================================================== */
/* ---------------------------------------------------------------------
TOKENS
--------------------------------------------------------------------- */
:root {
/* Marca */
--marinho: #02063d;
--marinho-2: #0a1150;
--marinho-3: #1b2472;
--marinho-4: #2f3a97;
--azul: #8fb0e2;
--azul-2: #a8c2ea;
--azul-claro: #d6e3f5;
--azul-nevoa: #e8eff9;
--azul-fundo: #eef2fa;
--vermelho: #c80505;
--vermelho-2: #e11414;
--vermelho-3: #a10404;
--vermelho-nevoa: #fdeaea;
--vermelho-borda: #f5c9c9;
/* Neutros */
--branco: #ffffff;
--cinza-01: #f8f9fc;
--cinza-02: #edf0f6;
--cinza-03: #d8dde8;
--cinza-04: #9aa2b8;
--cinza-05: #5a6379;
--texto: #171c33;
/* Semanticos */
--verde: #0f7b4f;
--verde-2: #14a066;
--verde-nevoa: #e6f5ee;
--verde-borda: #bfe3d3;
--ambar: #a16207;
--ambar-nevoa: #fdf4e3;
--ambar-borda: #f0dcb5;
/* Gradientes da marca */
--grad-marinho: linear-gradient(135deg, var(--marinho) 0%, var(--marinho-3) 100%);
--grad-marinho-largo:
linear-gradient(120deg, var(--marinho) 0%, var(--marinho-3) 55%, var(--marinho-4) 100%);
--grad-vermelho: linear-gradient(135deg, var(--vermelho-2) 0%, var(--vermelho) 55%, var(--vermelho-3) 100%);
--grad-azul: linear-gradient(135deg, var(--azul-2) 0%, var(--azul) 100%);
/* A faixa que assina a marca: vermelho -> azul */
--grad-marca: linear-gradient(90deg, var(--vermelho) 0%, var(--vermelho-2) 28%, var(--marinho-4) 62%, var(--azul) 100%);
/* Medidas */
--raio: 16px;
--raio-sm: 11px;
--raio-lg: 22px;
--alvo: 52px;
/* Sombras em camadas: dao profundidade sem pesar */
--sombra-1: 0 1px 2px rgba(2, 6, 61, .05), 0 2px 8px rgba(2, 6, 61, .05);
--sombra-2: 0 1px 2px rgba(2, 6, 61, .06), 0 6px 18px rgba(2, 6, 61, .08);
--sombra-3: 0 2px 4px rgba(2, 6, 61, .07), 0 14px 34px rgba(2, 6, 61, .14);
--sombra-marinho: 0 6px 18px rgba(2, 6, 61, .28);
--sombra-vermelho: 0 6px 18px rgba(200, 5, 5, .3);
/* Curvas de animacao */
--mola: cubic-bezier(.34, 1.56, .64, 1);
--suave: cubic-bezier(.4, 0, .2, 1);
}
*,
*::before,
*::after { box-sizing: border-box; }
/* IMPORTANTE: sem isto, o atributo hidden nao funciona em elementos que
recebem display: flex/grid no CSS -- author style vence o UA style.
Era o motivo de a caixa de erro das fotos aparecer vazia. */
[hidden] { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--texto);
/* Leve brilho azulado no topo: quebra o fundo chapado */
background:
radial-gradient(1100px 420px at 50% -140px, #dfe8f7 0%, transparent 70%),
var(--azul-fundo);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
}
/* Evita o zoom automatico do iOS ao focar um campo */
input, select, textarea, button { font-family: inherit; font-size: 16px; }
::selection { background: var(--azul); color: var(--marinho); }
/* ---------------------------------------------------------------------
ANIMACOES
--------------------------------------------------------------------- */
@keyframes entrar-cima {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@keyframes surgir {
from { opacity: 0; transform: translateY(-8px) scale(.98); }
to { opacity: 1; transform: none; }
}
@keyframes aparecer {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulsar-entrada {
0% { transform: scale(.5); opacity: 0; }
60% { transform: scale(1.12); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes desenhar-tique {
to { stroke-dashoffset: 0; }
}
@keyframes brilho-passando {
0% { transform: translateX(-120%); }
100% { transform: translateX(320%); }
}
@keyframes estourar {
0% { transform: scale(1); }
45% { transform: scale(1.07); }
100% { transform: scale(1); }
}
@keyframes girar {
to { transform: rotate(360deg); }
}
@keyframes pulso-anel {
0% { box-shadow: 0 0 0 0 rgba(200, 5, 5, .38); }
70% { box-shadow: 0 0 0 12px rgba(200, 5, 5, 0); }
100% { box-shadow: 0 0 0 0 rgba(200, 5, 5, 0); }
}
@keyframes flutuar {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* Entrada em cascata: cada cartao entra um pouco depois do anterior */
.cartao,
.escolha,
.indicador,
.tabela-caixa,
.filtros,
.chk-grupo {
animation: entrar-cima .5s var(--suave) both;
}
.cartao:nth-child(1), .escolha:nth-child(1), .indicador:nth-child(1) { animation-delay: .04s; }
.cartao:nth-child(2), .escolha:nth-child(2), .indicador:nth-child(2) { animation-delay: .10s; }
.cartao:nth-child(3), .escolha:nth-child(3), .indicador:nth-child(3) { animation-delay: .16s; }
.cartao:nth-child(4), .indicador:nth-child(4) { animation-delay: .22s; }
.cartao:nth-child(5), .indicador:nth-child(5) { animation-delay: .28s; }
/* Quem prefere menos movimento nao recebe animacao nenhuma */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------------------------------------------------------------------
LAYOUT
--------------------------------------------------------------------- */
.conteudo {
max-width: 640px;
margin: 0 auto;
padding: 22px 16px 130px;
}
.conteudo--largo { max-width: 1200px; }
/* ---------------------------------------------------------------------
CABECALHO
--------------------------------------------------------------------- */
.topo {
position: sticky;
top: 0;
z-index: 40;
padding: 15px 16px;
background: var(--grad-marinho-largo);
color: var(--branco);
box-shadow: var(--sombra-marinho);
overflow: hidden;
}
/* Brilho diagonal discreto no canto */
.topo::before {
content: "";
position: absolute;
top: -70%; right: -8%;
width: 260px; height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(143, 176, 226, .3) 0%, transparent 68%);
pointer-events: none;
}
/* Faixa da marca: vermelho -> azul, assina toda a interface */
.topo::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: var(--grad-marca);
}
.topo__linha {
position: relative;
max-width: 640px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 12px;
}
.topo--largo .topo__linha { max-width: 1200px; }
.topo__marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Marca "EC" com um ponto vermelho de acento */
.topo__logo {
position: relative;
width: 40px; height: 40px;
flex: 0 0 40px;
border-radius: 11px;
background: var(--branco);
color: var(--marinho);
display: grid; place-items: center;
font-weight: 800; font-size: 15px; letter-spacing: -.6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
.topo__logo::after {
content: "";
position: absolute;
right: -2px; bottom: -2px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--grad-vermelho);
border: 2px solid var(--marinho-2);
}
.topo__titulo { font-size: 17px; font-weight: 750; line-height: 1.2; }
.topo__sub {
font-size: 11px;
color: var(--azul);
text-transform: uppercase;
letter-spacing: 1.1px;
font-weight: 700;
}
.topo__voltar {
margin-left: auto;
color: var(--branco);
background: rgba(255, 255, 255, .13);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
padding: 9px 16px;
font-size: 14px;
font-weight: 650;
text-decoration: none;
white-space: nowrap;
transition: background .18s var(--suave), transform .18s var(--suave);
}
.topo__voltar:hover { background: rgba(255, 255, 255, .24); }
.topo__voltar:active { transform: scale(.96); }
/* ---------------------------------------------------------------------
CARTOES
--------------------------------------------------------------------- */
.cartao {
position: relative;
background: var(--branco);
border-radius: var(--raio);
box-shadow: var(--sombra-2);
padding: 21px 19px;
margin-bottom: 16px;
border: 1px solid rgba(2, 6, 61, .05);
transition: box-shadow .25s var(--suave);
}
.cartao:hover { box-shadow: var(--sombra-3); }
.cartao__titulo {
margin: 0 0 5px;
font-size: 17px;
font-weight: 750;
color: var(--marinho);
display: flex; align-items: center; gap: 9px;
}
.cartao__ajuda {
margin: 0 0 18px;
font-size: 13.5px;
color: var(--cinza-05);
line-height: 1.45;
}
/* Numero da etapa: selo vermelho, o acento da marca */
.etapa {
width: 28px; height: 28px;
flex: 0 0 28px;
border-radius: 9px;
background: var(--grad-vermelho);
color: var(--branco);
display: grid; place-items: center;
font-size: 13.5px; font-weight: 800;
box-shadow: 0 2px 7px rgba(200, 5, 5, .32);
}
/* ---------------------------------------------------------------------
TELA INICIAL
--------------------------------------------------------------------- */
.saudacao { text-align: center; padding: 12px 4px 24px; animation: aparecer .55s var(--suave) both; }
.saudacao__titulo {
margin: 0 0 7px;
font-size: 23px;
font-weight: 800;
color: var(--marinho);
letter-spacing: -.3px;
}
/* Sublinhado curto em gradiente sob o titulo */
.saudacao__titulo::after {
content: "";
display: block;
width: 58px; height: 4px;
margin: 11px auto 0;
border-radius: 999px;
background: var(--grad-marca);
}
.saudacao__texto { margin: 0; font-size: 14.5px; color: var(--cinza-05); }
.escolhas { display: grid; gap: 15px; }
.escolha {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 22px 18px;
border-radius: var(--raio-lg);
background: var(--branco);
border: 1px solid rgba(2, 6, 61, .06);
box-shadow: var(--sombra-2);
text-decoration: none;
color: var(--texto);
overflow: hidden;
transition: transform .22s var(--mola), box-shadow .22s var(--suave);
}
/* Barra colorida na lateral, revelada ao tocar */
.escolha::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 5px;
background: var(--grad-marinho);
transform: scaleY(0);
transform-origin: top;
transition: transform .3s var(--suave);
}
.escolha--checklist::before { background: var(--grad-vermelho); }
.escolha:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); }
.escolha:hover::before { transform: scaleY(1); }
.escolha:active { transform: translateY(-1px) scale(.99); }
.escolha:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; }
.escolha__icone {
width: 60px; height: 60px;
flex: 0 0 60px;
border-radius: 17px;
display: grid; place-items: center;
background: var(--grad-marinho);
color: var(--branco);
box-shadow: var(--sombra-marinho);
transition: transform .3s var(--mola);
}
.escolha__icone svg { width: 30px; height: 30px; }
/* Checklist recebe o vermelho da marca; Uso fica no azul */
.escolha--checklist .escolha__icone {
background: var(--grad-vermelho);
box-shadow: var(--sombra-vermelho);
}
.escolha:hover .escolha__icone { transform: scale(1.07) rotate(-3deg); }
.escolha__texto { min-width: 0; }
.escolha__nome {
display: block;
font-size: 17.5px;
font-weight: 750;
color: var(--marinho);
margin-bottom: 4px;
}
.escolha__desc {
display: block;
font-size: 13.5px;
color: var(--cinza-05);
line-height: 1.45;
}
.escolha__seta {
margin-left: auto;
color: var(--cinza-04);
flex: 0 0 auto;
transition: transform .28s var(--mola), color .2s var(--suave);
}
.escolha:hover .escolha__seta { transform: translateX(5px); color: var(--vermelho); }
/* ---------------------------------------------------------------------
FORMULARIOS
--------------------------------------------------------------------- */
.campo { margin-bottom: 19px; }
.campo:last-child { margin-bottom: 0; }
.campo__rotulo {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--marinho);
margin-bottom: 7px;
}
.campo__rotulo .obrigatorio { color: var(--vermelho); margin-left: 3px; font-weight: 800; }
.campo__dica {
display: block;
font-size: 12.5px;
font-weight: 400;
color: var(--cinza-04);
margin-top: 5px;
}
.entrada,
.selecao,
.area-texto {
width: 100%;
min-height: var(--alvo);
padding: 13px 15px;
border: 1.5px solid var(--cinza-03);
border-radius: var(--raio-sm);
background: var(--branco);
color: var(--texto);
transition: border-color .18s var(--suave), box-shadow .18s var(--suave),
background .18s var(--suave);
appearance: none;
}
.entrada:hover:not(:disabled),
.selecao:hover:not(:disabled),
.area-texto:hover { border-color: var(--azul); }
.entrada:focus,
.selecao:focus,
.area-texto:focus {
outline: none;
border-color: var(--marinho-3);
background: var(--branco);
box-shadow: 0 0 0 4px rgba(143, 176, 226, .42);
}
.entrada:disabled,
.selecao:disabled {
background: var(--cinza-01);
color: var(--cinza-04);
cursor: not-allowed;
}
.area-texto { min-height: 96px; resize: vertical; line-height: 1.55; }
.selecao {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302063d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
background-size: 19px;
padding-right: 46px;
cursor: pointer;
}
.selecao:disabled {
cursor: not-allowed;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa2b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* Campo com erro: borda vermelha + leve tinta de fundo */
.campo--erro .entrada,
.campo--erro .selecao,
.campo--erro .area-texto {
border-color: var(--vermelho);
background: var(--vermelho-nevoa);
}
.campo__erro {
display: none;
font-size: 13px;
font-weight: 650;
color: var(--vermelho-3);
margin-top: 7px;
}
.campo--erro .campo__erro { display: block; animation: surgir .25s var(--suave) both; }
.selecao--placa {
font-weight: 750;
letter-spacing: .6px;
font-size: 16.5px;
}
/* Enquanto as placas sao buscadas: seta some e o fundo "pulsa" de leve,
sinalizando trabalho em andamento sem precisar de um spinner extra */
.selecao--carregando {
background-image: none;
color: var(--cinza-05);
background: linear-gradient(100deg,
var(--cinza-01) 0%, var(--azul-nevoa) 40%, var(--cinza-01) 80%);
background-size: 240% 100%;
animation: varrer-fundo 1.1s var(--suave) infinite;
}
@keyframes varrer-fundo {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* =====================================================================
CONTROLES PERSONALIZADOS (select, data, hora, marcar)
Os campos nativos continuam no formulario como fonte da verdade; ficam
invisiveis apenas depois que o JavaScript monta os componentes, o que
garante que sem JS o formulario siga utilizavel.
===================================================================== */
/* --- Campo nativo escondido, mas ainda focavel -----------------------
opacity em vez de display:none: assim a validacao nativa do navegador
ainda consegue focar o campo e mostrar a mensagem no lugar certo. */
.campos-prontos .sel__nativo,
.campos-prontos .dt__nativo,
.campos-prontos .hr__nativo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
margin: 0;
border: none;
padding: 0;
z-index: -1;
}
.sel, .dt, .hr { position: relative; }
/* --- Painel compartilhado (lista de opcoes, calendario, horarios) --- */
.painel {
z-index: 3000;
background: var(--branco);
border: 1px solid var(--cinza-03);
border-radius: var(--raio-sm);
box-shadow: 0 10px 34px rgba(2, 6, 61, .26), 0 2px 6px rgba(2, 6, 61, .1);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
animation: painel-abrir .18s var(--suave) both;
}
@keyframes painel-abrir {
from { opacity: 0; transform: translateY(-6px) scale(.985); }
to { opacity: 1; transform: none; }
}
.painel__item {
padding: 12px 15px;
font-size: 15px;
color: var(--texto);
cursor: pointer;
display: flex;
align-items: center;
gap: 9px;
border-bottom: 1px solid var(--cinza-01);
transition: background .12s var(--suave), color .12s var(--suave);
}
.painel__item:last-child { border-bottom: none; }
.painel__item--vazio { color: var(--cinza-04); font-style: italic; }
.painel__item--foco { background: var(--azul-nevoa); }
.painel__item--inativo { color: var(--cinza-04); cursor: not-allowed; }
/* Opcao escolhida: faixa vermelha e um tique a direita */
.painel__item--marcado {
background: var(--azul-claro);
color: var(--marinho);
font-weight: 700;
box-shadow: inset 4px 0 0 var(--vermelho);
}
.painel__item--marcado::after {
content: "";
margin-left: auto;
width: 15px; height: 9px;
border-left: 2.5px solid var(--vermelho);
border-bottom: 2.5px solid var(--vermelho);
transform: rotate(-45deg) translateY(-2px);
flex: 0 0 15px;
}
/* --- SELECT ---------------------------------------------------------- */
.sel__botao {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: var(--alvo);
padding: 13px 15px;
border: 1.5px solid var(--cinza-03);
border-radius: var(--raio-sm);
background: var(--branco);
color: var(--texto);
font-size: 16px;
text-align: left;
cursor: pointer;
transition: border-color .18s var(--suave), box-shadow .18s var(--suave);
}
.sel__botao:hover:not(:disabled) { border-color: var(--azul); }
.sel__botao:focus-visible,
.sel--aberto .sel__botao {
outline: none;
border-color: var(--marinho-3);
box-shadow: 0 0 0 4px rgba(143, 176, 226, .42);
}
.sel__botao:disabled {
background: var(--cinza-01);
color: var(--cinza-04);
cursor: not-allowed;
}
.sel__valor {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sel__botao--vazio .sel__valor { color: var(--cinza-04); }
.sel__botao--placa .sel__valor { font-weight: 750; letter-spacing: .6px; font-size: 16.5px; }
.sel__seta {
width: 19px; height: 19px;
flex: 0 0 19px;
color: var(--marinho);
transition: transform .22s var(--mola);
}
.sel__botao:disabled .sel__seta { color: var(--cinza-04); }
.sel--aberto .sel__seta { transform: rotate(180deg); }
/* Enquanto as placas sao buscadas */
.sel__botao--carregando {
background: linear-gradient(100deg,
var(--cinza-01) 0%, var(--azul-nevoa) 40%, var(--cinza-01) 80%);
background-size: 240% 100%;
animation: varrer-fundo 1.1s var(--suave) infinite;
}
.sel__botao--carregando .sel__seta { animation: girar 1s linear infinite; }
.sel__painel { padding: 0; }
/* --- DATA E HORA: campo de texto com botao acoplado ------------------ */
.dt__campo, .hr__campo { position: relative; display: block; }
.dt__texto, .hr__texto { padding-right: 52px; }
.dt__botao, .hr__botao {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
width: 40px; height: 40px;
border: none;
border-radius: 9px;
background: var(--azul-nevoa);
color: var(--marinho);
display: grid; place-items: center;
cursor: pointer;
padding: 0;
transition: background .18s var(--suave), color .18s var(--suave);
}
.dt__botao svg, .hr__botao svg { width: 20px; height: 20px; }
.dt__botao:hover, .hr__botao:hover { background: var(--vermelho); color: var(--branco); }
.dt__botao:focus-visible, .hr__botao:focus-visible {
outline: 3px solid var(--vermelho);
outline-offset: 2px;
}
/* --- CALENDARIO ------------------------------------------------------ */
.cal { width: 306px; padding: 12px; }
.cal__topo {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.cal__mes {
flex: 1;
text-align: center;
font-size: 15px;
font-weight: 750;
color: var(--marinho);
}
.cal__mes span { color: var(--cinza-05); font-weight: 600; }
.cal__nav {
width: 36px; height: 36px;
flex: 0 0 36px;
border: 1.5px solid var(--cinza-03);
border-radius: 9px;
background: var(--branco);
color: var(--marinho);
display: grid; place-items: center;
cursor: pointer;
padding: 0;
transition: background .16s var(--suave), border-color .16s var(--suave),
color .16s var(--suave);
}
.cal__nav svg { width: 17px; height: 17px; }
.cal__nav:hover {
background: var(--vermelho);
border-color: var(--vermelho);
color: var(--branco);
}
.cal__semana, .cal__grade {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
}
.cal__semana {
margin-bottom: 5px;
padding-bottom: 6px;
border-bottom: 1px solid var(--cinza-02);
}
.cal__semana span {
text-align: center;
font-size: 11px;
font-weight: 800;
color: var(--cinza-04);
text-transform: uppercase;
}
.cal__vazio { aspect-ratio: 1; }
.cal__dia {
aspect-ratio: 1;
min-height: 38px;
border: none;
border-radius: 9px;
background: transparent;
color: var(--texto);
font-size: 14px;
font-weight: 600;
cursor: pointer;
padding: 0;
transition: background .14s var(--suave), color .14s var(--suave),
transform .14s var(--mola);
}
.cal__dia:hover:not(:disabled) { background: var(--azul-claro); transform: scale(1.08); }
.cal__dia:disabled { color: var(--cinza-03); cursor: not-allowed; }
/* Hoje: contorno vermelho discreto */
.cal__dia--hoje { box-shadow: inset 0 0 0 2px var(--vermelho); color: var(--vermelho); }
/* Dia escolhido: preenchido com o vermelho da marca */
.cal__dia--escolhido {
background: var(--grad-vermelho);
color: var(--branco);
font-weight: 800;
box-shadow: 0 3px 10px rgba(200, 5, 5, .36);
}
.cal__dia--escolhido:hover { background: var(--grad-vermelho); }
.cal__rodape {
display: flex;
gap: 7px;
margin-top: 11px;
padding-top: 11px;
border-top: 1px solid var(--cinza-02);
}
.cal__acao {
flex: 1;
min-height: 40px;
border: 1.5px solid var(--cinza-03);
border-radius: 9px;
background: var(--branco);
color: var(--marinho);
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: background .16s var(--suave), border-color .16s var(--suave);
}
.cal__acao:hover { background: var(--azul-nevoa); border-color: var(--azul); }
.cal__acao--limpar:hover {
background: var(--vermelho-nevoa);
border-color: var(--vermelho);
color: var(--vermelho);
}
/* --- LISTA DE HORARIOS ----------------------------------------------- */
.hora-lista { width: 190px; }
.hora-lista .painel__item { justify-content: center; font-variant-numeric: tabular-nums; }
.hora-lista__agora { position: sticky; top: 0; padding: 7px; background: var(--branco);
border-bottom: 1px solid var(--cinza-02); z-index: 1; }
.hora-lista__agora button {
width: 100%;
min-height: 40px;
border: none;
border-radius: 9px;
background: var(--grad-marinho);
color: var(--branco);
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.hora-lista__agora button:hover { filter: brightness(1.1); }
/* --- Estado de erro nos componentes --------------------------------- */
.campo--erro .sel__botao,
.campo--erro .dt__texto,
.campo--erro .hr__texto {
border-color: var(--vermelho);
background: var(--vermelho-nevoa);
}
/* --- CAIXA DE MARCAR PERSONALIZADA ----------------------------------
appearance: none desliga o desenho do navegador.
O tique NAO usa ::after: pseudo-elemento em nao e renderizado
de forma confiavel (o input e um elemento substituido). O tique vem
como imagem de fundo em SVG, que funciona em todos os navegadores. */
.caixa-marcar input[type="checkbox"],
.marcar {
appearance: none;
-webkit-appearance: none;
width: 24px; height: 24px;
flex: 0 0 24px;
margin: 0;
border: 2px solid var(--cinza-04);
border-radius: 7px;
background-color: var(--branco);
background-image: none;
background-repeat: no-repeat;
background-position: center;
background-size: 0 0; /* tique escondido enquanto desmarcado */
cursor: pointer;
transition: background-color .16s var(--suave), border-color .16s var(--suave),
background-size .18s var(--mola);
}
.caixa-marcar input[type="checkbox"]:hover,
.marcar:hover { border-color: var(--vermelho); }
.caixa-marcar input[type="checkbox"]:checked,
.marcar:checked {
background-color: var(--vermelho);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 15px 15px;
border-color: var(--vermelho);
}
.caixa-marcar input[type="checkbox"]:focus-visible,
.marcar:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
/* --- NUMERO: sem as setinhas do navegador --------------------------- */
.entrada[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.entrada[type="number"]::-webkit-outer-spin-button,
.entrada[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Caixa de marcar como area clicavel inteira, boa para o dedo */
.caixa-marcar {
display: flex;
align-items: center;
gap: 11px;
min-height: var(--alvo);
padding: 12px 15px;
border: 1.5px solid var(--cinza-03);
border-radius: var(--raio-sm);
background: var(--branco);
font-size: 14.5px;
color: var(--texto);
cursor: pointer;
transition: border-color .18s var(--suave), background .18s var(--suave);
}
.caixa-marcar:hover { border-color: var(--azul); background: var(--azul-nevoa); }
/* A aparencia da propria caixinha esta definida no bloco de controles
personalizados, acima. Aqui cuida-se apenas do rotulo em volta. */
.caixa-marcar:has(input:checked) {
border-color: var(--vermelho);
background: var(--vermelho-nevoa);
}
.caixa-marcar:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }
/* Contador ao lado do rotulo (fotos) */
.campo__contador {
float: right;
font-size: 12.5px;
font-weight: 750;
color: var(--marinho);
background: var(--azul-claro);
border-radius: 999px;
padding: 3px 11px;
transition: background .2s var(--suave), color .2s var(--suave);
}
/* ---------------------------------------------------------------------
CARTAO DO VEICULO SELECIONADO
--------------------------------------------------------------------- */
.veiculo-info {
display: none;
position: relative;
margin-top: 13px;
padding: 16px 17px;
border-radius: var(--raio-sm);
background: var(--grad-marinho-largo);
color: var(--branco);
overflow: hidden;
box-shadow: var(--sombra-marinho);
}
.veiculo-info.ativo { display: block; animation: surgir .35s var(--mola) both; }
/* Faixa da marca na borda esquerda */
.veiculo-info::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--grad-vermelho);
}
.veiculo-info__placa {
font-size: 22px;
font-weight: 800;
letter-spacing: 1.8px;
margin-bottom: 2px;
}
.veiculo-info__modelo {
font-size: 15px;
font-weight: 650;
color: var(--azul);
margin-bottom: 11px;
}
.veiculo-info__meta { display: flex; flex-wrap: wrap; gap: 7px; }
.veiculo-info__tag {
font-size: 12px;
font-weight: 650;
padding: 4px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(143, 176, 226, .42);
color: var(--azul-claro);
}
/* ---------------------------------------------------------------------
BOTOES
--------------------------------------------------------------------- */
.botao {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: var(--alvo);
padding: 14px 22px;
border: none;
border-radius: var(--raio-sm);
background: var(--grad-marinho);
color: var(--branco);
font-size: 16px;
font-weight: 750;
text-decoration: none;
cursor: pointer;
overflow: hidden;
box-shadow: var(--sombra-marinho);
transition: transform .18s var(--mola), box-shadow .22s var(--suave),
filter .18s var(--suave), opacity .18s var(--suave);
}
/* Reflexo que atravessa o botao ao passar o mouse */
.botao::after {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 40%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
transform: translateX(-140%);
pointer-events: none;
}
.botao:hover:not(:disabled)::after { animation: brilho-passando .75s var(--suave); }
.botao:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); }
.botao:active:not(:disabled) { transform: translateY(0) scale(.98); }
.botao:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; }
.botao:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.botao--bloco { width: 100%; }
.botao--azul {
background: var(--grad-azul);
color: var(--marinho);
box-shadow: 0 5px 15px rgba(143, 176, 226, .5);
}
.botao--vermelho {
background: var(--grad-vermelho);
box-shadow: var(--sombra-vermelho);
}
.botao--contorno {
background: var(--branco);
color: var(--marinho);
border: 1.5px solid var(--cinza-03);
box-shadow: var(--sombra-1);
}
.botao--contorno:hover:not(:disabled) { border-color: var(--marinho-3); }
.botao--fantasma {
background: var(--azul-nevoa);
color: var(--marinho);
box-shadow: none;
}
.botao--fantasma:hover:not(:disabled) { background: var(--azul-claro); }
.botao--pequeno { min-height: 40px; padding: 9px 15px; font-size: 14px; border-radius: 9px; }
/* Barra fixa de envio: sempre ao alcance do dedo */
.barra-envio {
position: fixed;
bottom: 0; left: 0; right: 0;
padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, .93);
backdrop-filter: blur(12px) saturate(1.1);
border-top: 1px solid var(--cinza-03);
box-shadow: 0 -6px 22px rgba(2, 6, 61, .09);
z-index: 50;
animation: entrar-cima .45s var(--suave) both;
}
.barra-envio__interno { max-width: 640px; margin: 0 auto; }
/* ---------------------------------------------------------------------
AVISOS
--------------------------------------------------------------------- */
.aviso {
display: flex;
gap: 12px;
padding: 14px 16px;
border-radius: var(--raio-sm);
font-size: 14px;
margin-bottom: 16px;
border: 1px solid transparent;
border-left-width: 4px;
line-height: 1.5;
animation: surgir .3s var(--suave) both;
}
.aviso svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }
.aviso ul { margin: 7px 0 0; padding-left: 19px; }
.aviso li + li { margin-top: 3px; }
.aviso--erro {
background: var(--vermelho-nevoa);
color: var(--vermelho-3);
border-color: var(--vermelho-borda);
border-left-color: var(--vermelho);
}
.aviso--ok {
background: var(--verde-nevoa);
color: #0b5c3b;
border-color: var(--verde-borda);
border-left-color: var(--verde);
}
.aviso--info {
background: var(--azul-nevoa);
color: var(--marinho);
border-color: #c3d6f0;
border-left-color: var(--marinho-4);
}
.aviso--atencao {
background: var(--ambar-nevoa);
color: #7a4a05;
border-color: var(--ambar-borda);
border-left-color: var(--ambar);
}
/* ---------------------------------------------------------------------
FOTOS DE AVARIA
--------------------------------------------------------------------- */
.fotos-botao {
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
width: 100%;
min-height: 58px;
padding: 15px 18px;
border: 2px dashed var(--azul);
border-radius: var(--raio-sm);
background: var(--azul-nevoa);
color: var(--marinho);
font-size: 15px;
font-weight: 700;
cursor: pointer;
text-align: center;
transition: background .2s var(--suave), border-color .2s var(--suave),
transform .2s var(--mola);
}
.fotos-botao:hover {
background: var(--azul-claro);
border-color: var(--marinho-4);
transform: translateY(-2px);
}
.fotos-botao:active { transform: scale(.985); }
.fotos-botao svg {
width: 25px; height: 25px; flex: 0 0 25px;
color: var(--vermelho);
transition: transform .3s var(--mola);
}
.fotos-botao:hover svg { transform: scale(1.12) rotate(-5deg); }
/* O input real fica oculto: o rotulo inteiro e a area clicavel */
.fotos-botao input[type="file"] {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.fotos-botao:focus-within { outline: 3px solid var(--vermelho); outline-offset: 2px; }
.fotos-limite { margin: 9px 0 0; font-size: 12.5px; color: var(--cinza-04); }
.fotos-grade {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 9px;
margin-bottom: 13px;
}
.foto-item {
position: relative;
aspect-ratio: 1;
border-radius: var(--raio-sm);
overflow: hidden;
background: var(--cinza-02);
border: 1.5px solid var(--cinza-03);
box-shadow: var(--sombra-1);
animation: surgir .32s var(--mola) both;
transition: transform .22s var(--mola), box-shadow .22s var(--suave);
}
.foto-item:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--sombra-3); }
.foto-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-item__remover {
position: absolute;
top: 4px; right: 4px;
width: 34px; height: 34px;
border: none;
border-radius: 50%;
background: var(--grad-vermelho);
color: var(--branco);
font-size: 21px;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
box-shadow: 0 2px 7px rgba(0, 0, 0, .38);
transition: transform .2s var(--mola), filter .2s var(--suave);
}
.foto-item__remover:hover { transform: scale(1.12) rotate(90deg); filter: brightness(1.12); }
.foto-item__remover:active { transform: scale(.9); }
.foto-item__tamanho {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 4px 6px;
font-size: 10.5px;
font-weight: 650;
color: var(--branco);
background: linear-gradient(transparent, rgba(2, 6, 61, .85));
text-align: center;
}
/* Galeria somente leitura */
.fotos-galeria {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 8px;
}
.fotos-galeria a {
display: block;
aspect-ratio: 1;
border-radius: var(--raio-sm);
overflow: hidden;
border: 1.5px solid var(--cinza-03);
background: var(--cinza-02);
transition: transform .22s var(--mola), box-shadow .22s var(--suave),
border-color .2s var(--suave);
}
.fotos-galeria a:hover {
transform: scale(1.05);
border-color: var(--vermelho);
box-shadow: var(--sombra-2);
}
.fotos-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
.etiqueta-foto {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
background: var(--azul-claro);
color: var(--marinho);
font-size: 11.5px;
font-weight: 750;
text-decoration: none;
}
.etiqueta-foto svg { width: 13px; height: 13px; }
.etiqueta-foto:hover { background: var(--azul); }
/* ---------------------------------------------------------------------
CHECKLIST
--------------------------------------------------------------------- */
.chk-progresso {
position: sticky;
top: 72px;
z-index: 30;
background: var(--branco);
border-radius: var(--raio-sm);
padding: 13px 16px;
margin-bottom: 16px;
box-shadow: var(--sombra-2);
border: 1px solid rgba(2, 6, 61, .05);
}
.chk-progresso__linha {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13.5px;
font-weight: 700;
color: var(--marinho);
margin-bottom: 9px;
}
.chk-progresso__conta { color: var(--cinza-05); font-weight: 700; }
.chk-progresso__barra {
position: relative;
height: 9px;
border-radius: 999px;
background: var(--cinza-02);
overflow: hidden;
}
.chk-progresso__preenchido {
position: relative;
height: 100%;
width: 0;
border-radius: 999px;
/* Vermelho -> azul: a mesma assinatura da marca */
background: var(--grad-marca);
background-size: 200% 100%;
transition: width .45s var(--suave);
}
/* Brilho correndo sobre a barra enquanto ha progresso */
.chk-progresso__preenchido::after {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 45px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
animation: brilho-passando 1.9s var(--suave) infinite;
}
.chk-grupo { margin-bottom: 17px; }
.chk-grupo__titulo {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 2px;
padding: 13px 16px;
background: var(--grad-marinho);
color: var(--branco);
border-radius: var(--raio-sm) var(--raio-sm) 0 0;
font-size: 14px;
font-weight: 750;
letter-spacing: .2px;
position: relative;
overflow: hidden;
}
/* Marcador vermelho antes do nome do grupo */
.chk-grupo__titulo::before {
content: "";
width: 4px;
height: 17px;
border-radius: 999px;
background: var(--grad-vermelho);
flex: 0 0 4px;
}
.chk-grupo__contador {
margin-left: auto;
font-size: 12px;
font-weight: 700;
color: var(--azul);
background: rgba(255, 255, 255, .1);
padding: 3px 9px;
border-radius: 999px;
}
.chk-grupo__itens {
background: var(--branco);
border-radius: 0 0 var(--raio-sm) var(--raio-sm);
box-shadow: var(--sombra-2);
overflow: hidden;
border: 1px solid rgba(2, 6, 61, .05);
border-top: none;
}
.chk-item {
padding: 14px 16px;
border-bottom: 1px solid var(--cinza-02);
transition: background .25s var(--suave);
}
.chk-item:last-child { border-bottom: none; }
.chk-item--pendente { background: #fffdf6; }
/* Item reprovado ganha faixa vermelha na borda: o bloco inteiro grita atencao */
.chk-item--reprovado {
background: var(--vermelho-nevoa);
box-shadow: inset 4px 0 0 var(--vermelho);
}
.chk-item__nome {
font-size: 14.5px;
font-weight: 650;
color: var(--texto);
margin-bottom: 11px;
}
.chk-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.chk-opcao { position: relative; }
.chk-opcao input {
position: absolute;
opacity: 0;
width: 100%; height: 100%;
margin: 0;
cursor: pointer;
}
.chk-opcao span {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
border: 1.5px solid var(--cinza-03);
border-radius: 10px;
font-size: 13.5px;
font-weight: 750;
color: var(--cinza-05);
background: var(--branco);
transition: all .16s var(--suave);
user-select: none;
}
.chk-opcao:hover span { border-color: var(--azul); }
.chk-opcao input:focus-visible + span { outline: 3px solid var(--vermelho); outline-offset: 2px; }
/* Opcao escolhida "estoura" levemente para confirmar o toque */
.chk-opcao input:checked + span { animation: estourar .28s var(--mola); }
.chk-opcao input:checked + span.op-ok {
background: linear-gradient(135deg, var(--verde-2), var(--verde));
border-color: var(--verde); color: var(--branco);
box-shadow: 0 3px 10px rgba(15, 123, 79, .34);
}
.chk-opcao input:checked + span.op-nao {
background: var(--grad-vermelho);
border-color: var(--vermelho); color: var(--branco);
box-shadow: 0 3px 10px rgba(200, 5, 5, .36);
}
.chk-opcao input:checked + span.op-na {
background: linear-gradient(135deg, #6b7489, var(--cinza-05));
border-color: var(--cinza-05); color: var(--branco);
box-shadow: 0 3px 10px rgba(90, 99, 121, .3);
}
.chk-item__obs { display: none; margin-top: 11px; }
.chk-item__obs.ativo { display: block; animation: surgir .26s var(--suave) both; }
/* Este campo aparece sobre fundo rosa. Borda fina em branco praticamente
desaparece na tela do celular, por isso o contorno e mais grosso, com
sombra e placeholder tingido: precisa ser obvio que falta preencher. */
.chk-item__obs input {
width: 100%;
min-height: 48px;
padding: 12px 14px;
border: 2px solid var(--vermelho);
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: var(--texto);
background: var(--branco);
box-shadow: 0 2px 9px rgba(200, 5, 5, .18);
transition: box-shadow .18s var(--suave), border-color .18s var(--suave);
}
.chk-item__obs input::placeholder {
color: var(--vermelho-3);
opacity: .6;
font-weight: 500;
}
.chk-item__obs input:focus {
outline: none;
border-color: var(--vermelho-3);
box-shadow: 0 0 0 4px rgba(200, 5, 5, .22);
}
.chk-acoes { display: flex; gap: 9px; margin-bottom: 16px; }
.chk-acoes .botao { flex: 1; }
/* ---------------------------------------------------------------------
TELA DE SUCESSO
--------------------------------------------------------------------- */
.sucesso { text-align: center; padding: 34px 20px; }
.sucesso__icone {
position: relative;
width: 88px; height: 88px;
margin: 0 auto 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--verde-2), var(--verde));
color: var(--branco);
display: grid; place-items: center;
box-shadow: 0 10px 26px rgba(15, 123, 79, .36);
animation: pulsar-entrada .55s var(--mola) both;
}
/* Anel que se expande uma vez, como confirmacao */
.sucesso__icone::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid var(--verde-2);
opacity: 0;
animation: pulsar-entrada .8s .35s var(--suave) both;
}
.sucesso__icone svg { width: 46px; height: 46px; }
/* O tique se desenha em vez de simplesmente aparecer */
.sucesso__icone svg polyline {
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: desenhar-tique .5s .4s var(--suave) forwards;
}
.sucesso__titulo {
margin: 0 0 9px;
font-size: 24px;
font-weight: 800;
color: var(--marinho);
animation: entrar-cima .5s .15s var(--suave) both;
}
.sucesso__texto {
margin: 0 0 26px;
color: var(--cinza-05);
font-size: 15px;
animation: entrar-cima .5s .22s var(--suave) both;
}
.resumo { text-align: left; margin-bottom: 24px; animation: entrar-cima .5s .3s var(--suave) both; }
.resumo__linha {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--cinza-02);
font-size: 14.5px;
}
.resumo__linha:last-child { border-bottom: none; }
.resumo__rotulo { color: var(--cinza-05); flex: 0 0 auto; }
.resumo__valor { font-weight: 700; color: var(--marinho); text-align: right; }
/* ---------------------------------------------------------------------
TABELAS
--------------------------------------------------------------------- */
.tabela-caixa {
background: var(--branco);
border-radius: var(--raio);
box-shadow: var(--sombra-2);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid rgba(2, 6, 61, .05);
}
/* O texto pode quebrar linha: com 9 colunas, forcar nowrap era o que
empurrava a tabela para alem da tela e obrigava a rolar de lado. */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
/* Colunas curtas (data, numeros, horarios) nao devem quebrar */
.tabela .nao-quebra { white-space: nowrap; }
.tabela th {
background: linear-gradient(var(--cinza-01), var(--azul-nevoa));
color: var(--marinho);
text-align: left;
font-size: 11.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .7px;
padding: 13px 14px;
border-bottom: 2px solid var(--azul);
position: sticky;
top: 0;
}
.tabela td {
padding: 13px 14px;
border-bottom: 1px solid var(--cinza-02);
vertical-align: middle;
}
.tabela tbody tr { transition: background .18s var(--suave); }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--azul-nevoa); }
.tabela__placa {
font-weight: 800;
letter-spacing: .7px;
color: var(--marinho);
}
.tabela__vazio {
text-align: center;
padding: 48px 20px;
color: var(--cinza-04);
font-size: 14.5px;
white-space: normal;
}
.tabela__acoes { display: flex; gap: 6px; }
/* Segunda linha dentro de uma celula: modelo abaixo da placa, por exemplo.
Juntar informacao relacionada numa celula reduz muito a largura total. */
.tabela__sub {
display: block;
font-size: 12.5px;
color: var(--cinza-05);
margin-top: 2px;
font-weight: 400;
letter-spacing: 0;
}
.tabela__forte { font-weight: 750; color: var(--marinho); }
/* Limites para as colunas de texto livre nao esticarem a tabela */
.tabela .col-texto { max-width: 210px; }
.tabela .col-obs { max-width: 240px; }
/* ---------------------------------------------------------------------
LINHAS EXPANSIVEIS (mestre-detalhe)
A linha mostra so o essencial; o resto abre num painel abaixo. Assim a
listagem fica folgada e ninguem precisa apertar dez colunas na tela.
--------------------------------------------------------------------- */
.tabela tr.linha { cursor: pointer; }
.tabela tr.linha td { padding-top: 15px; padding-bottom: 15px; }
.tabela tr.linha.aberta { background: var(--azul-nevoa); }
.tabela tr.linha.aberta td { border-bottom-color: transparent; }
.celula-expandir { width: 52px; text-align: right; }
.expandir {
width: 36px; height: 36px;
border: 1.5px solid var(--cinza-03);
border-radius: 9px;
background: var(--branco);
color: var(--marinho);
display: inline-grid;
place-items: center;
cursor: pointer;
padding: 0;
transition: background .16s var(--suave), border-color .16s var(--suave),
color .16s var(--suave);
}
.expandir svg {
width: 18px; height: 18px;
transition: transform .26s var(--mola);
}
.expandir:hover {
background: var(--vermelho);
border-color: var(--vermelho);
color: var(--branco);
}
.expandir:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 2px; }
.linha.aberta .expandir {
background: var(--grad-vermelho);
border-color: var(--vermelho);
color: var(--branco);
}
.linha.aberta .expandir svg { transform: rotate(180deg); }
/* Linha do detalhe */
.linha-detalhe > td {
padding: 0 !important;
background: var(--azul-nevoa);
border-bottom: 2px solid var(--azul-claro) !important;
}
.detalhe {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 2px;
padding: 4px;
animation: entrar-cima .28s var(--suave) both;
}
.detalhe__item {
background: var(--branco);
border-radius: 9px;
padding: 12px 15px;
min-width: 0;
}
.detalhe__item--largo { grid-column: 1 / -1; }
.detalhe__rotulo {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--cinza-05);
margin-bottom: 5px;
}
.detalhe__valor {
display: block;
font-size: 14.5px;
color: var(--texto);
line-height: 1.5;
word-break: break-word;
}
.detalhe__valor--forte { font-weight: 750; color: var(--marinho); font-size: 16px; }
.detalhe__valor--numero {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--marinho);
}
.detalhe__complemento {
display: block;
font-size: 12.5px;
color: var(--cinza-05);
margin-top: 3px;
}
/* Cabecalho do painel: identifica de qual registro e o detalhe */
.detalhe__titulo {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 15px 9px;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .7px;
color: var(--marinho);
}
.detalhe__titulo::before {
content: "";
width: 4px; height: 15px;
border-radius: 999px;
background: var(--grad-vermelho);
flex: 0 0 4px;
}
/* Indicador discreto de foto na linha compacta */
.mini-fotos {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 5px;
border-radius: 999px;
background: var(--azul-claro);
color: var(--marinho);
font-size: 12px;
font-weight: 750;
}
.mini-fotos img {
width: 26px; height: 26px;
border-radius: 50%;
object-fit: cover;
display: block;
border: 1.5px solid var(--branco);
}
/* ---------------------------------------------------------------------
TABELAS EM MODO CARTAO (telas estreitas)
Abaixo de 900px cada linha vira um cartao com "rotulo: valor", lidos do
atributo data-rotulo de cada celula. Assim ninguem precisa rolar de
lado para ver o resto das informacoes.
--------------------------------------------------------------------- */
@media (max-width: 899px) {
.tabela-caixa {
overflow: visible;
background: transparent;
box-shadow: none;
border: none;
border-radius: 0;
}
.tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
.tabela thead { display: none; }
.tabela .col-texto, .tabela .col-obs { max-width: none; }
.tabela tr {
background: var(--branco);
border: 1px solid rgba(2, 6, 61, .06);
border-radius: var(--raio);
box-shadow: var(--sombra-2);
margin-bottom: 13px;
overflow: hidden;
}
.tabela tbody tr:hover { background: var(--branco); }
.tabela td {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 11px 15px;
border-bottom: 1px solid var(--cinza-02);
text-align: right;
white-space: normal;
}
.tabela td:last-child { border-bottom: none; }
/* Em cartao a largura e curta: mesmo as colunas "curtas" precisam poder
quebrar, senao valores como "135.783 -> 135.867" estouram a celula. */
.tabela td.nao-quebra { white-space: normal; }
/* O nome da coluna vira o rotulo a esquerda */
.tabela td[data-rotulo]::before {
content: attr(data-rotulo);
flex: 0 0 34%;
text-align: left;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--cinza-05);
padding-top: 2px;
}
/* Primeira celula em destaque, como titulo do cartao */
.tabela td.celula-titulo {
background: var(--azul-nevoa);
border-bottom: 1px solid var(--azul-claro);
font-weight: 750;
}
/* Celula de acoes ocupa a largura toda, sem rotulo */
.tabela td.celula-acoes { justify-content: stretch; }
.tabela td.celula-acoes::before { display: none; }
.tabela td.celula-acoes .botao,
.tabela td.celula-acoes form { flex: 1; }
.tabela td.celula-acoes .botao { width: 100%; }
.tabela__acoes { width: 100%; }
.tabela td .fotos-galeria { justify-content: flex-end; }
/* Mensagem de lista vazia continua sendo um bloco unico */
.tabela td.tabela__vazio { text-align: center; display: block; }
.tabela td.tabela__vazio::before { display: none; }
/* --- Linhas expansiveis em modo cartao --- */
/* O botao de abrir ocupa a largura toda, virando o "rodape" do cartao */
.tabela td.celula-expandir { width: auto; justify-content: stretch; }
.tabela td.celula-expandir::before { display: none; }
.tabela td.celula-expandir .expandir {
width: 100%;
height: 44px;
border-radius: 9px;
gap: 8px;
grid-auto-flow: column;
font-size: 13.5px;
font-weight: 750;
}
/* Texto no botao apenas no celular, onde ha espaco de sobra */
.tabela td.celula-expandir .expandir::after {
content: "Ver tudo";
}
.linha.aberta .celula-expandir .expandir::after { content: "Fechar"; }
/* O detalhe vira a continuacao do mesmo cartao */
.linha-detalhe {
margin-top: -13px;
margin-bottom: 13px;
border-radius: 0 0 var(--raio) var(--raio);
border-top: none;
}
/* display: block e necessario: como celula flex, o painel era medido pelo
conteudo e nao ocupava a largura toda do cartao. */
.linha-detalhe > td { display: block; }
.detalhe { grid-template-columns: 1fr; }
.detalhe__item { border-radius: 8px; }
}
/* Etiquetas */
.etiqueta {
display: inline-block;
padding: 4px 11px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .5px;
}
.etiqueta--ok { background: var(--verde-nevoa); color: var(--verde); }
.etiqueta--alerta { background: var(--vermelho-nevoa); color: var(--vermelho); }
.etiqueta--neutra { background: var(--cinza-02); color: var(--cinza-05); }
.etiqueta--info { background: var(--azul-claro); color: var(--marinho); }
.etiqueta--atencao { background: var(--ambar-nevoa); color: var(--ambar); }
/* ---------------------------------------------------------------------
PAINEL: NAVEGACAO E INDICADORES
--------------------------------------------------------------------- */
.nav-admin {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 11px 16px;
background: var(--marinho-2);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.nav-admin::-webkit-scrollbar { display: none; }
.nav-admin__interno {
display: flex;
gap: 6px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.nav-admin a {
padding: 9px 16px;
border-radius: 999px;
color: var(--azul-claro);
text-decoration: none;
font-size: 14px;
font-weight: 650;
white-space: nowrap;
transition: background .18s var(--suave), color .18s var(--suave),
transform .18s var(--suave);
}
.nav-admin a:hover { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
/* Item ativo em vermelho: o acento da marca guia o olho */
.nav-admin a.ativo {
background: var(--grad-vermelho);
color: var(--branco);
font-weight: 750;
box-shadow: 0 3px 11px rgba(200, 5, 5, .38);
}
.indicadores {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
gap: 13px;
margin-bottom: 20px;
}
.indicador {
position: relative;
background: var(--branco);
border-radius: var(--raio);
box-shadow: var(--sombra-2);
padding: 17px 19px;
overflow: hidden;
border: 1px solid rgba(2, 6, 61, .05);
transition: transform .22s var(--mola), box-shadow .22s var(--suave);
}
.indicador:hover { transform: translateY(-3px); box-shadow: var(--sombra-3); }
/* Faixa lateral colorida em vez de border-left: permite gradiente */
.indicador::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 5px;
background: var(--grad-azul);
}
.indicador--alerta::before { background: var(--grad-vermelho); }
.indicador--ok::before { background: linear-gradient(var(--verde-2), var(--verde)); }
.indicador__valor {
font-size: 30px;
font-weight: 800;
color: var(--marinho);
line-height: 1.05;
letter-spacing: -.5px;
}
.indicador--alerta .indicador__valor { color: var(--vermelho); }
.indicador__rotulo {
font-size: 12px;
color: var(--cinza-05);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
margin-top: 5px;
}
.filtros {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
gap: 13px;
align-items: end;
background: var(--branco);
border-radius: var(--raio);
box-shadow: var(--sombra-2);
padding: 17px 19px;
margin-bottom: 18px;
border: 1px solid rgba(2, 6, 61, .05);
}
.filtros .campo { margin-bottom: 0; }
.filtros__botoes { display: flex; gap: 8px; }
.secao-titulo {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 15px;
font-size: 18px;
font-weight: 800;
color: var(--marinho);
}
/* Marcador vermelho antes de cada titulo de secao */
.secao-titulo::before {
content: "";
width: 5px;
height: 20px;
border-radius: 999px;
background: var(--grad-vermelho);
flex: 0 0 5px;
}
.secao-titulo__acoes { margin-left: auto; display: flex; gap: 8px; }
/* ---------------------------------------------------------------------
MODAL DE CADASTRO
Sobre