/* ============================================================
   SOS Truck Service — identidade visual
   Vermelho principal, grafite nos cabeçalhos, fundos claros.
   Construído para uso com uma mão em celular e tablet.
   ============================================================ */

:root {
  /* Marca */
  --vermelho:        #C81E1E;
  --vermelho-escuro: #9E1414;
  --vermelho-claro:  #FDECEC;
  --vermelho-borda:  #F3C3C3;

  /* Neutros */
  --preto:    #14161A;
  --grafite:  #23262B;
  --grafite-2:#2E3238;
  --grafite-3:#3C4149;
  --cinza-texto:   #5B616B;
  --cinza-suave:   #8B919B;
  --cinza-borda:   #DFE2E7;
  --cinza-linha:   #EDEFF2;
  --fundo:         #F4F5F7;
  --superficie:    #FFFFFF;
  --superficie-2:  #FAFBFC;

  /* Situações */
  --verde:    #1B8A4B;  --verde-bg:    #E7F5ED;
  --azul:     #1F62C4;  --azul-bg:     #E8F0FC;
  --laranja:  #C2680B;  --laranja-bg:  #FDF1E3;
  --amarelo:  #A67C00;  --amarelo-bg:  #FCF5DF;
  --roxo:     #6B3FBF;  --roxo-bg:     #F0EAFB;
  --ciano:    #0E7490;  --ciano-bg:    #E3F4F8;
  --cinza:    #5B616B;  --cinza-bg:    #EEF0F3;

  --raio:    12px;
  --raio-sm: 9px;
  --raio-lg: 16px;
  --sombra:    0 1px 2px rgba(20,22,26,.06), 0 2px 8px rgba(20,22,26,.05);
  --sombra-md: 0 4px 14px rgba(20,22,26,.10);
  --sombra-lg: 0 12px 34px rgba(20,22,26,.18);

  --topo: 58px;
  --rodape: 62px;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-topo: env(safe-area-inset-top, 0px);

  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fonte);
  background: var(--fundo);
  color: var(--grafite);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--vermelho); text-decoration: none; }
:focus-visible { outline: 3px solid rgba(200,30,30,.35); outline-offset: 2px; border-radius: 6px; }

/* ---------------------------------------------------------- Abertura */
.carregando-inicial { min-height: 100dvh; display: grid; place-items: center; background: var(--grafite); }
.splash { text-align: center; }
.splash-marca { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 22px; }
.splash-logo { width: 88px; height: 88px; border-radius: 50%; box-shadow: var(--sombra-lg); }
.splash-barra { width: 160px; height: 3px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; margin: 0 auto; }
.splash-barra span { display: block; height: 100%; width: 40%; background: var(--vermelho); border-radius: 3px; animation: desliza 1.1s ease-in-out infinite; }
@keyframes desliza { 0% { transform: translateX(-110%);} 100% { transform: translateX(310%);} }

/* ---------------------------------------------------------- Login */
.tela-acesso {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding: 28px 20px calc(28px + var(--seguro-baixo));
  background: linear-gradient(165deg, var(--grafite) 0%, var(--preto) 62%, #1B1D21 100%);
}
.acesso-caixa { width: 100%; max-width: 400px; margin: 0 auto; }
.acesso-marca { text-align: center; margin-bottom: 26px; display: flex; flex-direction: column; align-items: center; }
.acesso-marca-logo { width: 84px; height: 84px; border-radius: 50%; box-shadow: var(--sombra-lg); }
.acesso-marca .sub { font-size: 12.5px; color: #9AA0A8; margin-top: 14px; }
.acesso-cartao { background: var(--superficie); border-radius: var(--raio-lg); padding: 24px 20px; box-shadow: var(--sombra-lg); }
.acesso-cartao h1 { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.acesso-cartao .apoio { font-size: 13.5px; color: var(--cinza-texto); margin-bottom: 20px; }
.acesso-rodape { text-align: center; margin-top: 18px; font-size: 12px; color: #8B919B; }

/* ---------------------------------------------------------- Estrutura */
.aplicativo { min-height: 100dvh; display: flex; flex-direction: column; }

.topo {
  position: sticky; top: 0; z-index: 60;
  background: var(--grafite); color: #fff;
  padding-top: var(--seguro-topo);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(0,0,0,.16);
}
.topo-linha { height: var(--topo); display: flex; align-items: center; gap: 10px; padding: 0 12px; max-width: 1360px; margin: 0 auto; width: 100%; }
.topo-marca { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 1px; }
.topo-marca img { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.topo-marca .sos { color: var(--vermelho); font-size: 19px; }
.topo-marca .truck { font-size: 10.5px; color: #C9CCD2; letter-spacing: 2px; font-weight: 600; }
.topo-titulo { font-size: 15.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-acoes { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topo-botao {
  width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: #E8EAED;
  display: grid; place-items: center; cursor: pointer; position: relative; flex: none;
}
.topo-botao:hover { background: rgba(255,255,255,.10); }
.topo-botao .selo {
  position: absolute; top: 5px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--vermelho); color: #fff; border-radius: 9px; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--grafite);
}
.topo-voltar { display: flex; align-items: center; gap: 4px; }

.corpo { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 14px 12px calc(var(--rodape) + 26px + var(--seguro-baixo)); }

/* Menu inferior (celular) */
.rodape-menu {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  background: var(--superficie); border-top: 1px solid var(--cinza-borda);
  display: flex; padding-bottom: var(--seguro-baixo);
  box-shadow: 0 -2px 16px rgba(20,22,26,.07);
}
.rodape-menu a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--rodape); color: var(--cinza-suave); font-size: 10.5px; font-weight: 600; position: relative;
}
.rodape-menu a.ativo { color: var(--vermelho); }
.rodape-menu a.ativo::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; background: var(--vermelho); border-radius: 0 0 3px 3px; }
.rodape-menu svg { width: 22px; height: 22px; }

/* Menu lateral (desktop) */
.lateral { display: none; }

/* ---------------------------------------------------------- Tipografia */
.pagina-cabecalho { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pagina-cabecalho .texto { flex: 1; min-width: 200px; }
h1.titulo { font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
h2.secao { font-size: 15px; font-weight: 700; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
h2.secao::before { content: ''; width: 3px; height: 15px; background: var(--vermelho); border-radius: 2px; }
h3.sub { font-size: 13.5px; font-weight: 700; color: var(--grafite); }
.apoio { font-size: 13px; color: var(--cinza-texto); }
.mini { font-size: 11.5px; color: var(--cinza-suave); }
.rotulo-campo { font-size: 10.5px; font-weight: 700; color: var(--cinza-suave); text-transform: uppercase; letter-spacing: .6px; }

/* ---------------------------------------------------------- Cartões */
.cartao { background: var(--superficie); border: 1px solid var(--cinza-borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao + .cartao { margin-top: 10px; }
.cartao-corpo { padding: 14px; }
.cartao-topo { padding: 13px 14px; border-bottom: 1px solid var(--cinza-linha); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cartao-topo h3 { font-size: 14.5px; font-weight: 700; flex: 1; min-width: 120px; }
.cartao-rodape { padding: 11px 14px; border-top: 1px solid var(--cinza-linha); background: var(--superficie-2); border-radius: 0 0 var(--raio) var(--raio); display: flex; gap: 8px; flex-wrap: wrap; }
.cartao-clicavel { cursor: pointer; transition: box-shadow .14s, transform .14s, border-color .14s; }
.cartao-clicavel:active { transform: scale(.994); }
.cartao-clicavel:hover { box-shadow: var(--sombra-md); border-color: #CDD2D9; }

/* Indicadores do painel */
.indicadores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.indicador {
  background: var(--superficie); border: 1px solid var(--cinza-borda); border-radius: var(--raio);
  padding: 12px; box-shadow: var(--sombra); display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  text-align: left; width: 100%;
}
.indicador:active { transform: scale(.985); }
.indicador .icone { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.indicador .icone svg { width: 18px; height: 18px; }
.indicador .valor { font-size: 23px; font-weight: 800; line-height: 1.05; letter-spacing: -.6px; }
.indicador .nome { font-size: 11.5px; color: var(--cinza-texto); font-weight: 500; margin-top: 2px; line-height: 1.3; }
.indicador.destaque { border-color: var(--vermelho-borda); background: linear-gradient(180deg, #fff 0%, var(--vermelho-claro) 190%); }
.indicador.destaque .valor { color: var(--vermelho); }

.faixa-financeira {
  background: linear-gradient(135deg, var(--grafite) 0%, var(--preto) 100%);
  color: #fff; border-radius: var(--raio); padding: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.faixa-financeira .item .rot { font-size: 10px; color: #9AA0A8; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.faixa-financeira .item .val { font-size: 16.5px; font-weight: 700; margin-top: 3px; letter-spacing: -.3px; }
.faixa-financeira .item .val.destaque { color: #FF6B6B; }

/* ---------------------------------------------------------- Selos */
.selo {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.5;
}
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.selo.sem-ponto::before { display: none; }
.selo-verde   { background: var(--verde-bg);   color: var(--verde); }
.selo-azul    { background: var(--azul-bg);    color: var(--azul); }
.selo-laranja { background: var(--laranja-bg); color: var(--laranja); }
.selo-amarelo { background: var(--amarelo-bg); color: var(--amarelo); }
.selo-roxo    { background: var(--roxo-bg);    color: var(--roxo); }
.selo-ciano   { background: var(--ciano-bg);   color: var(--ciano); }
.selo-cinza   { background: var(--cinza-bg);   color: var(--cinza); }
.selo-vermelho{ background: var(--vermelho-claro); color: var(--vermelho); }
.selo-forte   { background: var(--vermelho); color: #fff; }
.selo-grande  { font-size: 12.5px; padding: 5px 12px; }

.etiqueta-placa {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px;
  background: var(--grafite); color: #fff; padding: 3px 9px; border-radius: 6px; letter-spacing: .8px;
  font-variant-numeric: tabular-nums;
}
.etiqueta-frota { font-size: 11.5px; font-weight: 700; color: var(--cinza-texto); background: var(--cinza-bg); padding: 3px 8px; border-radius: 6px; }
.numero-doc { font-weight: 700; font-size: 13.5px; letter-spacing: .3px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: var(--raio-sm); border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .13s, box-shadow .13s, transform .1s;
  background: var(--cinza-bg); color: var(--grafite); white-space: nowrap;
}
.botao:active:not(:disabled) { transform: scale(.978); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao svg { width: 18px; height: 18px; flex: none; }
.botao-principal { background: var(--vermelho); color: #fff; box-shadow: 0 2px 8px rgba(200,30,30,.28); }
.botao-principal:hover:not(:disabled) { background: var(--vermelho-escuro); }
.botao-escuro { background: var(--grafite); color: #fff; }
.botao-escuro:hover:not(:disabled) { background: var(--grafite-2); }
.botao-contorno { background: var(--superficie); border-color: var(--cinza-borda); color: var(--grafite); }
.botao-contorno:hover:not(:disabled) { background: var(--superficie-2); border-color: #CDD2D9; }
.botao-vermelho-claro { background: var(--vermelho-claro); color: var(--vermelho); border-color: var(--vermelho-borda); }
.botao-verde { background: var(--verde); color: #fff; }
.botao-perigo { background: var(--superficie); color: var(--vermelho); border-color: var(--vermelho-borda); }
.botao-texto { background: transparent; min-height: 38px; padding: 0 10px; color: var(--cinza-texto); font-size: 13.5px; }
.botao-texto:hover:not(:disabled) { background: var(--cinza-bg); }
.botao-pequeno { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.botao-bloco { width: 100%; }
.botao-grande { min-height: 54px; font-size: 15.5px; font-weight: 700; }
.botoes-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.botoes-empilhados { display: grid; gap: 8px; }

.acao-flutuante {
  position: fixed; right: 14px; bottom: calc(var(--rodape) + 14px + var(--seguro-baixo)); z-index: 65;
  min-height: 54px; padding: 0 20px; border-radius: 28px; border: 0; background: var(--vermelho); color: #fff;
  font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 20px rgba(200,30,30,.42); cursor: pointer;
}
.acao-flutuante:active { transform: scale(.96); }

/* ---------------------------------------------------------- Formulários */
.formulario { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo > label { font-size: 12.5px; font-weight: 600; color: var(--grafite-3); display: flex; align-items: center; gap: 5px; }
.campo > label .obrigatorio { color: var(--vermelho); font-weight: 700; }
.campo .dica { font-size: 11.5px; color: var(--cinza-suave); }
.campo .erro-campo { font-size: 12px; color: var(--vermelho); font-weight: 500; }
.entrada, .selecao, .area-texto {
  width: 100%; min-height: 48px; padding: 11px 13px; border: 1.5px solid var(--cinza-borda);
  border-radius: var(--raio-sm); background: var(--superficie); font-size: 16px; transition: border-color .13s, box-shadow .13s;
}
.entrada:focus, .selecao:focus, .area-texto:focus {
  outline: none; border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(200,30,30,.12);
}
.entrada[aria-invalid="true"], .selecao[aria-invalid="true"], .area-texto[aria-invalid="true"] { border-color: var(--vermelho); background: #FFFAFA; }
.area-texto { min-height: 96px; resize: vertical; line-height: 1.55; }
.selecao {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B616B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 17px; padding-right: 38px;
}
.entrada-placa { text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 18px; text-align: center; }
.entrada-moeda { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grade-3 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.grupo-campos { border: 1px solid var(--cinza-borda); border-radius: var(--raio); padding: 14px; background: var(--superficie); }
.grupo-campos > legend { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--vermelho); padding: 0 6px; }

.opcoes-toque { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 7px; }
.opcoes-toque input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes-toque label {
  display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 6px 8px;
  border: 1.5px solid var(--cinza-borda); border-radius: var(--raio-sm); background: var(--superficie);
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; transition: all .13s; color: var(--cinza-texto);
}
.opcoes-toque input:checked + label { border-color: var(--vermelho); background: var(--vermelho-claro); color: var(--vermelho); }
.opcoes-toque input:focus-visible + label { outline: 3px solid rgba(200,30,30,.35); }
.opcoes-toque.gravidade input[value="baixa"]:checked + label   { border-color: var(--cinza);   background: var(--cinza-bg);   color: var(--cinza); }
.opcoes-toque.gravidade input[value="media"]:checked + label,
.opcoes-toque.gravidade input[value="normal"]:checked + label  { border-color: var(--azul);    background: var(--azul-bg);    color: var(--azul); }
.opcoes-toque.gravidade input[value="alta"]:checked + label    { border-color: var(--laranja); background: var(--laranja-bg); color: var(--laranja); }
.opcoes-toque.gravidade input[value="critica"]:checked + label { border-color: var(--vermelho);background: var(--vermelho-claro); color: var(--vermelho); }

.interruptor { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1.5px solid var(--cinza-borda); border-radius: var(--raio-sm); background: var(--superficie); cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor .trilho { width: 46px; height: 27px; border-radius: 14px; background: var(--cinza-borda); position: relative; transition: background .16s; flex: none; }
.interruptor .trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.24); transition: transform .16s; }
.interruptor input:checked + .trilho { background: var(--vermelho); }
.interruptor input:checked + .trilho::after { transform: translateX(19px); }
.interruptor .conteudo { flex: 1; }
.interruptor .conteudo b { font-size: 13.5px; font-weight: 600; display: block; }
.interruptor.alerta { border-color: var(--vermelho-borda); background: var(--vermelho-claro); }

/* Fotos */
.envio-fotos { display: grid; gap: 9px; }
.botoes-camera { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.botao-camera {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 76px; border: 2px dashed var(--cinza-borda); border-radius: var(--raio); background: var(--superficie-2);
  color: var(--cinza-texto); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.botao-camera:hover { border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-claro); }
.botao-camera svg { width: 24px; height: 24px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.galeria-item { position: relative; aspect-ratio: 1; border-radius: var(--raio-sm); overflow: hidden; background: var(--cinza-bg); border: 1px solid var(--cinza-borda); }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.galeria-item .remover {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: rgba(20,22,26,.72); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.galeria-item .remover svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------- Busca e filtros */
.barra-busca { display: flex; gap: 8px; margin-bottom: 12px; }
.campo-busca { position: relative; flex: 1; }
.campo-busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--cinza-suave); pointer-events: none; }
.campo-busca input { padding-left: 39px; }
.botao-filtro { min-width: 48px; position: relative; }
.botao-filtro .marca { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); }
.fichas-rapidas { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; scrollbar-width: none; }
.fichas-rapidas::-webkit-scrollbar { display: none; }
.ficha-rapida {
  flex: none; padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--cinza-borda);
  background: var(--superficie); font-size: 13px; font-weight: 600; color: var(--cinza-texto); cursor: pointer; white-space: nowrap;
}
.ficha-rapida.ativa { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.ficha-rapida .contagem { margin-left: 5px; opacity: .72; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- Listas */
.lista { display: grid; gap: 9px; }
.linha-info { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cinza-linha); font-size: 13.5px; }
.linha-info:last-child { border-bottom: 0; }
.linha-info .rot { color: var(--cinza-texto); flex: none; }
.linha-info .val { font-weight: 600; text-align: right; word-break: break-word; }
.dados-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 13px; }
.dado .rot { font-size: 10.5px; font-weight: 700; color: var(--cinza-suave); text-transform: uppercase; letter-spacing: .5px; }
.dado .val { font-size: 14px; font-weight: 600; margin-top: 2px; word-break: break-word; }
.texto-bloco { font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

.vazio { text-align: center; padding: 42px 20px; color: var(--cinza-suave); }
.vazio svg { width: 46px; height: 46px; margin: 0 auto 12px; opacity: .34; }
.vazio h3 { font-size: 15px; font-weight: 600; color: var(--cinza-texto); margin-bottom: 5px; }
.vazio p { font-size: 13px; max-width: 300px; margin: 0 auto 16px; }

.carregando { display: grid; gap: 9px; }
.esqueleto { background: linear-gradient(90deg, #EDEFF2 25%, #F6F7F9 50%, #EDEFF2 75%); background-size: 200% 100%; animation: brilho 1.3s infinite; border-radius: var(--raio); height: 76px; }
@keyframes brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Tabelas roláveis */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raio); border: 1px solid var(--cinza-borda); background: var(--superficie); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
table.tabela th {
  background: var(--grafite); color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 10px 12px; text-align: left; white-space: nowrap; position: sticky; top: 0;
}
table.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--cinza-linha); vertical-align: middle; }
table.tabela tbody tr:last-child td { border-bottom: 0; }
table.tabela tbody tr:hover { background: var(--superficie-2); }
table.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabela .destaque-linha { background: var(--verde-bg) !important; }

/* ---------------------------------------------------------- Cotação */
.peca-cotacao { border: 1px solid var(--cinza-borda); border-radius: var(--raio); background: var(--superficie); overflow: hidden; box-shadow: var(--sombra); }
.peca-cotacao + .peca-cotacao { margin-top: 12px; }
.peca-cotacao-topo { padding: 13px 14px; background: var(--superficie-2); border-bottom: 1px solid var(--cinza-linha); }
.proposta {
  border: 1.5px solid var(--cinza-borda); border-radius: var(--raio-sm); padding: 12px; background: var(--superficie); position: relative;
}
.proposta + .proposta { margin-top: 8px; }
.proposta.menor { border-color: var(--verde); background: linear-gradient(180deg, var(--verde-bg) 0%, #fff 120%); }
.proposta.escolhida { border-color: var(--vermelho); border-width: 2px; background: linear-gradient(180deg, var(--vermelho-claro) 0%, #fff 130%); }
.proposta .faixa-menor {
  position: absolute; top: -1px; right: 12px; background: var(--verde); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 9px; border-radius: 0 0 6px 6px; letter-spacing: .5px;
}
.proposta .faixa-escolhida { position: absolute; top: -1px; right: 12px; background: var(--vermelho); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 0 0 6px 6px; letter-spacing: .5px; }
.proposta-cabecalho { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
.proposta-total { font-size: 19px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.proposta-detalhes { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 9px; padding-top: 9px; border-top: 1px solid var(--cinza-linha); }
.resumo-totais { background: var(--grafite); color: #fff; border-radius: var(--raio); padding: 15px; }
.resumo-totais .linha { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; color: #C9CCD2; }
.resumo-totais .linha.total { border-top: 1px solid rgba(255,255,255,.15); margin-top: 6px; padding-top: 11px; font-size: 18px; font-weight: 800; color: #fff; }
.resumo-totais .linha .valor { font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; }
.resumo-totais .economia { color: #6EE7A8; }

/* ---------------------------------------------------------- Linha do tempo */
.linha-tempo { position: relative; padding-left: 22px; }
.linha-tempo::before { content: ''; position: absolute; left: 6px; top: 5px; bottom: 5px; width: 2px; background: var(--cinza-linha); }
.evento { position: relative; padding-bottom: 15px; }
.evento:last-child { padding-bottom: 0; }
.evento::before { content: ''; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie); border: 2.5px solid var(--cinza-borda); }
.evento.marco::before { border-color: var(--vermelho); background: var(--vermelho); }
.evento .quando { font-size: 11.5px; color: var(--cinza-suave); }
.evento .oque { font-size: 13.5px; font-weight: 500; margin-top: 1px; }
.evento .quem { font-size: 11.5px; color: var(--cinza-texto); }

/* Conversa */
.conversa { display: grid; gap: 10px; }
.mensagem { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.mensagem .autor { font-size: 11px; font-weight: 700; margin-bottom: 3px; opacity: .82; }
.mensagem .quando { font-size: 10.5px; opacity: .66; margin-top: 4px; }
.mensagem.deles { background: var(--cinza-bg); border-bottom-left-radius: 4px; }
.mensagem.minha { background: var(--vermelho); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.mensagem.interna { background: var(--amarelo-bg); border: 1px dashed #E0C878; color: #6B5200; max-width: 100%; }

/* ---------------------------------------------------------- Modais */
.fundo-modal {
  position: fixed; inset: 0; background: rgba(20,22,26,.55); z-index: 200; display: flex;
  align-items: flex-end; justify-content: center; padding: 0; animation: aparece .16s ease;
  backdrop-filter: blur(2px);
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--superficie); width: 100%; max-width: 620px; max-height: 93dvh; display: flex; flex-direction: column;
  border-radius: var(--raio-lg) var(--raio-lg) 0 0; box-shadow: var(--sombra-lg); animation: sobe .22s cubic-bezier(.22,.8,.3,1);
}
@keyframes sobe { from { transform: translateY(26px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.modal-topo { padding: 15px 16px 13px; border-bottom: 1px solid var(--cinza-linha); display: flex; align-items: center; gap: 10px; }
.modal-topo h2 { font-size: 16.5px; font-weight: 700; flex: 1; }
.modal-corpo { padding: 16px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.modal-rodape { padding: 13px 16px calc(13px + var(--seguro-baixo)); border-top: 1px solid var(--cinza-linha); display: flex; gap: 9px; background: var(--superficie-2); }
.modal-rodape .botao { flex: 1; }
.puxador { width: 38px; height: 4px; background: var(--cinza-borda); border-radius: 3px; margin: 8px auto 0; }

.visor-foto { position: fixed; inset: 0; background: rgba(10,11,13,.95); z-index: 300; display: grid; place-items: center; padding: 16px; }
.visor-foto img { max-width: 100%; max-height: 84dvh; object-fit: contain; border-radius: 8px; }
.visor-foto .fechar { position: absolute; top: calc(14px + var(--seguro-topo)); right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.visor-foto .legenda { position: absolute; bottom: calc(20px + var(--seguro-baixo)); left: 16px; right: 16px; text-align: center; color: #C9CCD2; font-size: 12.5px; }

/* ---------------------------------------------------------- Avisos */
.avisos { position: fixed; left: 12px; right: 12px; bottom: calc(var(--rodape) + 12px + var(--seguro-baixo)); z-index: 400; display: grid; gap: 8px; pointer-events: none; }
.aviso {
  background: var(--grafite); color: #fff; padding: 13px 15px; border-radius: var(--raio); box-shadow: var(--sombra-lg);
  font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; animation: sobe .2s ease; pointer-events: auto;
  max-width: 560px; margin: 0 auto; width: 100%;
}
.aviso svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.aviso.sucesso { background: var(--verde); }
.aviso.erro { background: var(--vermelho); }
.aviso.alerta { background: var(--laranja); }
.aviso .fechar-aviso { margin-left: auto; background: transparent; border: 0; color: inherit; opacity: .7; cursor: pointer; padding: 0 2px; }

.faixa-alerta {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; border-radius: var(--raio);
  background: var(--vermelho-claro); border: 1px solid var(--vermelho-borda); color: var(--vermelho-escuro); font-size: 13.5px;
}
.faixa-alerta svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.faixa-alerta.info { background: var(--azul-bg); border-color: #BBD4F5; color: #14498F; }
.faixa-alerta.aviso { background: var(--amarelo-bg); border-color: #E8D89A; color: #7A5C00; }
.faixa-alerta.sucesso { background: var(--verde-bg); border-color: #A9DDBF; color: #14663A; }
.faixa-alerta b { display: block; margin-bottom: 2px; }

.notificacao-item { display: flex; gap: 11px; padding: 13px 14px; border-bottom: 1px solid var(--cinza-linha); cursor: pointer; }
.notificacao-item:hover { background: var(--superficie-2); }
.notificacao-item.nao-lida { background: var(--vermelho-claro); }
.notificacao-item .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); flex: none; margin-top: 6px; }

/* ---------------------------------------------------------- Utilidades */
.flex { display: flex; }
.entre { justify-content: space-between; }
.centro { align-items: center; }
.col { flex-direction: column; }
.quebra { flex-wrap: wrap; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; }
.crescer { flex: 1; min-width: 0; }
.mt6 { margin-top: 6px; } .mt10 { margin-top: 10px; } .mt14 { margin-top: 14px; } .mt20 { margin-top: 20px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.direita { text-align: right; }
.negrito { font-weight: 700; }
.cor-vermelho { color: var(--vermelho); }
.cor-verde { color: var(--verde); }
.cor-suave { color: var(--cinza-suave); }
.tabular { font-variant-numeric: tabular-nums; }
.esconder { display: none !important; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-desktop { display: none; }

/* ---------------------------------------------------------- Tablet */
@media (min-width: 640px) {
  body { font-size: 15px; }
  .corpo { padding: 18px 20px calc(var(--rodape) + 30px + var(--seguro-baixo)); }
  .indicadores { grid-template-columns: repeat(3, 1fr); }
  .grade-3 { grid-template-columns: repeat(3, 1fr); }
  .modal { border-radius: var(--raio-lg); max-height: 88dvh; }
  .fundo-modal { align-items: center; padding: 20px; }
  .puxador { display: none; }
  .botoes-camera { grid-template-columns: repeat(3, 1fr); }
  .entrada, .selecao, .area-texto { font-size: 15px; }
}

/* ---------------------------------------------------------- Desktop */
@media (min-width: 1024px) {
  .aplicativo { flex-direction: row; }
  .rodape-menu { display: none; }
  .so-desktop { display: initial; }
  .lateral {
    display: flex; flex-direction: column; width: 244px; flex: none; background: var(--grafite);
    height: 100dvh; position: sticky; top: 0; overflow-y: auto; padding-top: var(--seguro-topo);
  }
  .lateral-marca { padding: 18px; border-bottom: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; gap: 11px; }
  .lateral-marca-logo { width: 40px; height: 40px; border-radius: 50%; flex: none; }
  .lateral-marca .sos { font-size: 21px; font-weight: 800; color: var(--vermelho); letter-spacing: 2px; line-height: 1; }
  .lateral-marca .truck { font-size: 9.5px; color: #9AA0A8; letter-spacing: 2.5px; font-weight: 600; margin-top: 3px; }
  .lateral-menu { padding: 12px 10px; display: grid; gap: 2px; flex: 1; }
  .lateral-menu .grupo { font-size: 10px; font-weight: 700; color: #6E747D; text-transform: uppercase; letter-spacing: 1px; padding: 15px 10px 6px; }
  .lateral-menu a {
    display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px;
    color: #C9CCD2; font-size: 13.5px; font-weight: 500;
  }
  .lateral-menu a:hover { background: rgba(255,255,255,.07); color: #fff; }
  .lateral-menu a.ativo { background: var(--vermelho); color: #fff; font-weight: 600; }
  .lateral-menu a svg { width: 18px; height: 18px; flex: none; }
  .lateral-menu a .contagem { margin-left: auto; background: rgba(255,255,255,.14); padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; }
  .lateral-menu a.ativo .contagem { background: rgba(0,0,0,.22); }
  .lateral-usuario { padding: 13px 14px; border-top: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; gap: 10px; }
  .lateral-usuario .inicial { width: 36px; height: 36px; border-radius: 50%; background: var(--vermelho); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
  .lateral-usuario .nome { font-size: 13px; font-weight: 600; color: #fff; }
  .lateral-usuario .papel { font-size: 11px; color: #9AA0A8; }

  .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .topo-marca { display: none; }
  .corpo { padding: 22px 26px 40px; }
  .acao-flutuante { display: none; }
  .indicadores { grid-template-columns: repeat(5, 1fr); }
  .grade-2 { gap: 14px; }
  .colunas-detalhe { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 18px; align-items: start; }
  .avisos { left: auto; right: 20px; bottom: 20px; width: 380px; }
  table.tabela { min-width: 0; }
}

@media (min-width: 1400px) {
  .indicadores.amplo { grid-template-columns: repeat(5, 1fr); }
}

/* ---------------------------------------------------------- Impressão */
@media print {
  .topo, .rodape-menu, .lateral, .acao-flutuante, .avisos, .botoes-linha, .barra-busca { display: none !important; }
  body { background: #fff; }
  .corpo { padding: 0; max-width: none; }
  .cartao { box-shadow: none; break-inside: avoid; }
}

/* Preferência por menos animação */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}