/* Vello · Controle de Frota — identidade visual do Manual de Marca Vello */

:root {
    --vermelho: #BE1E2D;
    --vermelho-escuro: #9A1824;
    --laranja: #F7941E;
    --degrade: linear-gradient(90deg, #F7941E, #BE1E2D);
    --fundo: radial-gradient(circle at 40% 40%, #FBFBF8, #E8E9EA 55%, #CDCED0);
    --superficie: #FFFFFF;
    --linha-alternada: #F2F2F2;
    --borda: #DDDEE0;
    --texto: #3A3A3A;
    --texto-suave: #6B6B6B;
    --ok-fundo: #E8F4EA;
    --ok-texto: #1F6B33;
    --alerta-fundo: #FDF0E1;
    --alerta-texto: #8A4B00;
    --erro-fundo: #FBE9EA;
    --erro-texto: var(--vermelho);
    --raio: 10px;
    --sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .06);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
    font-weight: 400;
    color: var(--texto);
    background: #E8E9EA var(--fundo) fixed;
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--vermelho); }

/* ---------- topo ---------- */

.topo {
    background: var(--superficie);
    border-bottom: 4px solid transparent;
    border-image: var(--degrade) 1;
}
.topo-interno {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
}
.topo-logo img { display: block; width: 128px; height: 72px; }
.topo-sistema {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-suave);
    border-left: 1px solid var(--borda);
    padding-left: 24px;
}
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a {
    color: var(--texto);
    text-decoration: none;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
}
.menu a:hover { background: var(--linha-alternada); }
.menu a.ativo { background: var(--vermelho); color: #fff; }
.usuario { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--texto-suave); }
.usuario form { margin: 0; }

/* ---------- conteudo ---------- */

.conteudo { max-width: 1280px; margin: 0 auto; padding: 40px 32px 64px; }

.eyebrow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 0 0 8px;
}
h1 {
    font-weight: 900;
    font-size: 32px;
    line-height: 1.2;
    color: var(--vermelho);
    margin: 0 0 24px;
    max-width: 900px;
}
h2 {
    font-weight: 700;
    font-size: 18px;
    color: var(--texto);
    margin: 0 0 16px;
}

.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cabecalho h1 { margin-bottom: 24px; }

.cartao {
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px;
}
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* ---------- indicadores ---------- */

.indicadores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
.indicador {
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    border: 2px solid transparent;
}
a.indicador:hover { border-color: var(--borda); }
.indicador.selecionado { border-color: var(--vermelho); }
.indicador-valor { font-weight: 900; font-size: 32px; line-height: 1.1; color: var(--vermelho); }
.indicador-rotulo { font-size: 13px; color: var(--texto-suave); font-weight: 500; }
.indicador.atencao .indicador-valor { color: var(--alerta-texto); }

/* ---------- tabela ---------- */

.tabela-caixa { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
    background: var(--vermelho);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-align: left;
    padding: 12px 16px;
    white-space: nowrap;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--linha-alternada); vertical-align: middle; }
tbody tr:nth-child(even) { background: var(--linha-alternada); }
tbody tr.inativo { color: #9A9A9A; }
td.placa { font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.direita { text-align: right; }
.suave { color: var(--texto-suave); font-size: 13px; }

/* ---------- etiquetas ---------- */

.etiqueta {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--linha-alternada);
    color: var(--texto);
    white-space: nowrap;
}
.etiqueta.localiza { background: #E7F3EC; color: #136B3A; }
.etiqueta.movida { background: #FDEBDD; color: #A04A00; }
.etiqueta.propria { background: #ECEEF5; color: #34406B; }
.etiqueta.indefinida, .etiqueta.atencao { background: var(--alerta-fundo); color: var(--alerta-texto); }
.etiqueta.inativo { background: #EDEDED; color: #7A7A7A; }

/* ---------- formularios ---------- */

.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.campo .ajuda { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }
.campo .erro { font-size: 13px; color: var(--erro-texto); margin-top: 4px; font-weight: 500; }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], select, textarea {
    width: 100%;
    font: inherit;
    color: inherit;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--laranja); outline-offset: 1px; border-color: transparent; }
input[readonly] { background: var(--linha-alternada); color: var(--texto-suave); }
.com-erro input, .com-erro select { border-color: var(--vermelho); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }

.botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-weight: 700;
    border: 0;
    border-radius: 999px;
    padding: 10px 24px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    background: var(--degrade);
}
.botao:hover { filter: brightness(.95); }
.botao.secundario { background: #fff; color: var(--vermelho); box-shadow: inset 0 0 0 2px var(--vermelho); }
.botao.discreto { background: transparent; color: var(--texto-suave); padding: 6px 10px; font-weight: 500; }
.botao.discreto:hover { color: var(--vermelho); }
.acoes { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

.aviso { padding: 12px 16px; border-radius: 8px; margin-bottom: 24px; font-weight: 500; }
.aviso.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.aviso.erro { background: var(--erro-fundo); color: var(--erro-texto); }
.aviso.atencao { background: var(--alerta-fundo); color: var(--alerta-texto); }

.indicadores.indicadores-3 { grid-template-columns: repeat(3, 1fr); max-width: 720px; }
.indicadores.indicadores-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- jornada, turnos e horas extras ---------- */

.saldo-mais { color: var(--ok-texto); font-weight: 700; }
.saldo-menos { color: var(--vermelho); font-weight: 700; }
.etiqueta.extra-pendente { background: var(--alerta-fundo); color: var(--alerta-texto); }
.etiqueta.extra-aprovada { background: var(--ok-fundo); color: var(--ok-texto); }
.etiqueta.extra-recusada { background: var(--erro-fundo); color: var(--erro-texto); }
.grade-turno td { vertical-align: middle; }
.grade-turno input[type=time] { width: 110px; }
.grade-turno .folga-dia { color: var(--texto-suave); font-size: 13px; }
input[type=time], input[type=month] { font: inherit; color: inherit; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }

/* ---------- vistoria e ocorrencia ---------- */

.ficha { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0 0 16px; }
.ficha dt { font-size: 13px; color: var(--texto-suave); font-weight: 500; }
.ficha dd { margin: 0; font-weight: 500; }
.rotulo { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px; cursor: pointer; font-weight: 500; }
.opcao:has(input:checked) { border-color: var(--vermelho); background: var(--erro-fundo); color: var(--vermelho); }
.itens-vistoria { display: grid; gap: 8px; }
.item-vistoria { display: grid; grid-template-columns: minmax(260px, 1fr) 1fr; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linha-alternada); }
.item-vistoria input[type=text] { padding: 6px 10px; }
.pendencias-vistoria { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pendencias-vistoria .botao { padding: 6px 16px; }

.diagrama-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ferramenta { cursor: pointer; }
.ferramenta input { position: absolute; opacity: 0; }
.ferramenta span { display: inline-block; padding: 6px 14px; border: 1px solid var(--borda); border-radius: 999px; font-weight: 500; }
.ferramenta input:checked + span { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.ferramenta input:focus-visible + span { outline: 2px solid var(--laranja); outline-offset: 2px; }
.diagrama-area { position: relative; max-width: 900px; margin: 0 auto; user-select: none; }
.diagrama.editavel .diagrama-area { cursor: crosshair; }
.diagrama-area img { width: 100%; display: block; }
.diagrama .marca {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--vermelho);
    color: #fff;
    font: 900 13px/22px Montserrat, sans-serif;
    text-align: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.diagrama .marca.anterior { background: #9E9E9E; cursor: default; }
.legenda { text-align: center; font-size: 13px; color: var(--texto-suave); margin: 8px 0 0; }

.navegacao-data { display: flex; align-items: center; gap: 4px; margin-bottom: 24px; }
.navegacao-data input[type=date] { width: auto; }
.navegacao-data .botao.discreto { font-size: 15px; }

.linha-tempo { list-style: none; margin: 0 0 16px; padding: 0 0 0 20px; border-left: 3px solid var(--laranja); }
.linha-tempo li { position: relative; padding: 6px 0; }
.linha-tempo li::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 13px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--vermelho);
    border: 2px solid #fff;
}

.grade-usuarios { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.linha-acao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.linha-acao select { width: auto; min-width: 180px; padding: 6px 10px; }
.linha-acao .botao { padding: 6px 16px; }

.condutor-atual { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
details.troca { margin-top: 20px; border-top: 1px solid var(--borda); padding-top: 16px; }
details.troca summary { cursor: pointer; font-weight: 700; color: var(--vermelho); margin-bottom: 16px; }

/* ---------- login ---------- */

.login { display: grid; grid-template-columns: 5fr 7fr; min-height: 100vh; }
.login-marca {
    background: var(--degrade);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px;
    gap: 24px;
}
.login-marca img { width: 320px; height: 180px; }
.login-marca p { font-weight: 300; font-size: 28px; line-height: 1.3; margin: 0; max-width: 420px; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.login-form .cartao { width: 100%; max-width: 420px; padding: 40px; }
.login-form h1 { font-size: 28px; margin-bottom: 8px; }
.login-form .botao { width: 100%; justify-content: center; padding: 12px; margin-top: 8px; }

/* ---------- responsivo ---------- */

@media (max-width: 960px) {
    .indicadores { grid-template-columns: repeat(2, 1fr); }
    .grade-2, .grade-usuarios { grid-template-columns: 1fr; }
    .topo-sistema { display: none; }
}
@media (max-width: 720px) {
    .conteudo { padding: 24px 16px 48px; }
    .topo-interno { padding: 8px 16px; flex-wrap: wrap; gap: 8px 16px; }
    .menu { margin-left: 0; order: 3; width: 100%; }
    .usuario { margin-left: auto; }
    h1 { font-size: 24px; }
    .linha-campos { grid-template-columns: 1fr; }
    .item-vistoria { grid-template-columns: 1fr; gap: 4px; }
    .ficha { grid-template-columns: 1fr; gap: 0; }
    .ficha dd { margin-bottom: 8px; }
    .indicadores.indicadores-3 { gap: 8px; }
    .indicadores-3 .indicador { padding: 12px; }
    .indicadores-3 .indicador .suave { display: none; }
    .login { grid-template-columns: 1fr; min-height: auto; }
    .login-marca { padding: 32px 24px; align-items: center; text-align: center; }
    .login-marca img { width: 192px; height: 108px; }
    .login-marca p { font-size: 20px; }
}

/* Tabela menor dentro de cartao (ex.: viagens do carro no dia) */
table.compacta { margin-top: 12px; font-size: 14px; }
table.compacta th, table.compacta td { padding: 6px 8px; }

/* Manutencao */
.opcoes-linha { display: flex; flex-wrap: wrap; gap: 8px 24px; }
dl.dados-lista { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0; }
dl.dados-lista dt { font-weight: 700; font-size: 13px; color: #6B6B6B; }
dl.dados-lista dd { margin: 0; }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.etiqueta.vencida { background: var(--erro-fundo); color: var(--erro-texto); }
.etiqueta.proxima, .etiqueta.em_manutencao { background: var(--alerta-fundo); color: var(--alerta-texto); }
.etiqueta.sem_km { background: #EDEDED; color: #7A7A7A; }

/* Tipos de manutencao */
.etiqueta.tipo-preditiva { background: #E8EEF9; color: #2A4B8D; }
.etiqueta.tipo-preventiva { background: #E7F3EC; color: #136B3A; }
.etiqueta.tipo-corretiva { background: var(--erro-fundo); color: var(--erro-texto); }

/* Submenu do modulo ativo (Pessoal, Frota, QSMA) */
.submenu { border-top: 1px solid var(--borda); background: var(--superficie); }
.submenu-interno { max-width: 1280px; margin: 0 auto; padding: 6px 32px; display: flex; gap: 4px; flex-wrap: wrap; }
.submenu a { color: var(--texto-suave); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 14px; border-radius: 999px; }
.submenu a:hover { background: var(--linha-alternada); }
.submenu a.ativo { color: var(--vermelho); font-weight: 700; background: var(--linha-alternada); }
@media (max-width: 720px) { .submenu-interno { padding: 6px 16px; } }

/* Ferias */
.etiqueta.ferias-prevista { background: #ECEEF5; color: #34406B; }
.etiqueta.ferias-solicitada, .etiqueta.ferias-vencendo, .etiqueta.ferias-a_programar { background: var(--alerta-fundo); color: var(--alerta-texto); }
.etiqueta.ferias-aprovada, .etiqueta.ferias-programada { background: var(--ok-fundo); color: var(--ok-texto); }
.etiqueta.ferias-cancelada, .etiqueta.ferias-em_aquisicao { background: #EDEDED; color: #7A7A7A; }
.etiqueta.ferias-vencida { background: var(--erro-fundo); color: var(--erro-texto); }
tr.inativo td { color: #9E9E9E; }

/* Anexar copia assinada (listas do veiculo e painel de documentos) */
details.anexar { margin-top: 4px; }
details.anexar summary { cursor: pointer; color: var(--vermelho); font-size: 13px; font-weight: 500; }
details.anexar form { display: grid; gap: 6px; margin-top: 6px; font-size: 13px; min-width: 220px; }
details.anexar label { display: grid; gap: 2px; font-weight: 500; }

/* Cabecalho fixo: so a area abaixo da faixa rola */
body.com-topo { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.com-topo .topo { flex: 0 0 auto; position: relative; z-index: 10; }
body.com-topo .rolagem { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* Biblioteca QSMA */
.grade-biblioteca { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
textarea.texto-ins { font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.5; }
.acoes-documento { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-bottom: 24px; padding: 16px 24px; }
.acoes-documento form { margin: 0; }
.etiqueta.doc-vigente { background: var(--ok-fundo); color: var(--ok-texto); }
.etiqueta.doc-rascunho { background: var(--alerta-fundo); color: var(--alerta-texto); }
.etiqueta.doc-obsoleto { background: #EDEDED; color: #7A7A7A; }
.ins-texto h2 { font-size: 18px; font-weight: 900; color: var(--vermelho); margin: 28px 0 10px; }
.ins-texto h2:first-child { margin-top: 0; }
.ins-texto h2 span, .ins-texto h3 span { margin-right: 8px; }
.ins-texto h3 { font-size: 15px; font-weight: 700; margin: 18px 0 8px; }
.ins-texto p { margin: 0 0 10px; }
.ins-texto ul { margin: 0 0 12px; padding-left: 22px; }
.ins-texto li { margin-bottom: 4px; }
.ins-texto .ins-destaque { border-left: 4px solid var(--vermelho); background: var(--erro-fundo); padding: 10px 14px; margin: 8px 0 14px; font-weight: 500; border-radius: 0 8px 8px 0; }
.ins-texto .ins-tabela { margin: 6px 0 16px; font-size: 14px; }
.ins-texto .ins-tabela th, .ins-texto .ins-tabela td { padding: 8px 12px; border: 1px solid var(--borda); }
@media (max-width: 960px) { .grade-biblioteca { grid-template-columns: 1fr; } }