:root{
  --verde-escuro:#123f29;
  --verde:#1a5c3a;
  --verde-medio:#1f6b43;
  --verde-claro:#2b8a57;
  --amarelo:#f2c230;
  --amarelo-claro:#ffd84d;
  --texto:#2b2b2b;
  --texto-suave:#5a5a5a;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Poppins',Arial,sans-serif;
  color:var(--texto);
  background:#fff;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

a{text-decoration:none;color:inherit;}

/* Antes nao havia nenhum indicador de foco no site inteiro. Vale para todo
   link, botao e campo, no teclado. */
:focus-visible{
  outline:3px solid var(--amarelo);
  outline-offset:2px;
}

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}

/* ================= HEADER ================= */
header{
  position:absolute;
  top:16px;
  right:10px;
  z-index:50;
  background:var(--verde-escuro);
  border-radius:28px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px 28px;
  padding:22px 40px;
  max-width:1400px;
  margin:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:18px;
}

.logo{
  width:96px;
  height:96px;
  flex-shrink:0;
}

.brand-text h1{
  font-size:34px;
  font-weight:800;
  letter-spacing:.5px;
  color:#fff;
  line-height:1;
}

.brand-text p{
  color:#dcdcdc;
  font-size:15px;
  line-height:1.35;
  margin-top:8px;
  font-weight:300;
  max-width:330px;
}

nav{
  display:flex;
  align-items:center;
  gap:34px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

nav a.link{
  color:#eaeaea;
  font-size:13px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding-bottom:6px;
  position:relative;
  transition:color .25s;
  white-space:nowrap;
}

nav a.link:hover{color:var(--amarelo);}

nav a.link.ativo{
  color:#fff;
}

nav a.link.ativo::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:3px;
  background:var(--amarelo);
  border-radius:2px;
}

.btn-coop{
  border:2px solid var(--amarelo);
  color:var(--amarelo);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  padding:11px 24px;
  border-radius:40px;
  white-space:nowrap;
  transition:.25s;
}

.btn-coop:hover{
  background:var(--amarelo);
  color:var(--verde-escuro);
}

/* ================= HERO ================= */
.hero{
  position:relative;
  background:
    linear-gradient(rgba(18,63,41,.45), rgba(18,63,41,.72)),
    url("../assets/imagens/hero-caminhao.png") center/cover no-repeat;
  min-height:520px;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(0,0,0,.18) 100%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:20px;
  max-width:1400px;
  margin:0 auto;
  min-height:600px;
  padding:170px 32px 80px;
  z-index:2;
}

.hero-text{
  justify-self:end;
  text-align:right;
}

.hero-text h2{
  color:#fff;
  font-size:clamp(30px,3.6vw,50px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.5px;
  margin-bottom:22px;
}

.hero-text h2 .linea{display:block;}

.hero-text h2 .letra{
  display:inline-block;
  opacity:0;
  animation:surgirLetra .45s ease forwards;
}

@keyframes surgirLetra{
  from{opacity:0; transform:translateY(.55em);}
  to{opacity:1; transform:translateY(0);}
}

.hero-text p{
  animation:surgirDireita .8s ease 2.3s both;
}

.btn-verde{
  animation:surgirDireita .6s ease 3.15s backwards;
}

@keyframes surgirDireita{
  from{opacity:0; transform:translateX(70px);}
  to{opacity:1; transform:translateX(0);}
}

@media (prefers-reduced-motion: reduce){
  .hero-text h2 .letra{animation:none; opacity:1;}
  .hero-text p{animation:none;}
  .btn-verde{animation:none;}
}

.hero-text p{
  color:#e6ece8;
  font-size:15.5px;
  line-height:1.75;
  max-width:640px;
  font-weight:300;
  margin-bottom:32px;
}

.btn-verde{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--verde);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.9px;
  text-transform:uppercase;
  padding:16px 28px;
  border-radius:6px;
  transition:.25s;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.btn-verde:hover{
  background:var(--verde-medio);
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.3);
}

.btn-verde .arrow{
  font-size:16px;
  line-height:1;
  transition:transform .25s;
}

.btn-verde:hover .arrow{transform:translateX(4px);}

/* ================= BARRA DE DIFERENCIAIS ================= */
.features{
  background:var(--verde);
  border-top:1px solid rgba(255,255,255,.08);
}

.features-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:1400px;
  margin:0 auto;
  padding:0 32px;
}

.feature{
  display:flex;
  align-items:center;
  gap:18px;
  padding:30px 26px;
  border-right:1px solid rgba(255,255,255,.14);
}

.feature:last-child{border-right:none;}

.feature-icon{
  flex-shrink:0;
  width:62px;
  height:62px;
  border-radius:50%;
  border:2px solid var(--amarelo);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--amarelo);
}

.feature-icon svg{width:30px;height:30px;}

.feature h4{
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:7px;
}

.feature p{
  color:#cfdcd4;
  font-size:12.5px;
  line-height:1.55;
  font-weight:300;
}

/* ================= SOBRE ================= */
.sobre{
  background:#f7f7f4;
  position:relative;
  overflow:hidden;
}

.sobre::before{
  content:"";
  position:absolute;
  left:-180px;
  top:-120px;
  width:620px;
  height:620px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(43,138,87,.16) 0%, rgba(43,138,87,0) 68%);
}

.sobre-inner{
  position:relative;
  display:grid;
  grid-template-columns:0.95fr 2fr;
  gap:56px;
  max-width:1400px;
  margin:0 auto;
  padding:70px 32px 80px;
  align-items:start;
}

.sobre h3{
  font-size:16px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--verde-escuro);
  margin-bottom:22px;
}

.sobre h3::after{
  content:"";
  display:block;
  width:46px;
  height:3px;
  background:var(--amarelo);
  margin-top:12px;
  border-radius:2px;
}

.sobre p{
  font-size:14.5px;
  line-height:1.85;
  color:var(--texto-suave);
  font-weight:300;
  margin-bottom:30px;
}

.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:2px solid var(--verde-escuro);
  color:var(--verde-escuro);
  font-size:12px;
  font-weight:700;
  letter-spacing:.9px;
  text-transform:uppercase;
  padding:13px 26px;
  border-radius:6px;
  transition:.25s;
}

.btn-outline:hover{
  background:var(--verde-escuro);
  color:#fff;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  transition:transform .3s, box-shadow .3s;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(0,0,0,.14);
}

.card-img{
  position:relative;
  height:160px;
  overflow:hidden;
}

.card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
}

.card:hover .card-img img{transform:scale(1.07);}

.card-body{
  position:relative;
  padding:22px 20px 24px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  flex:1;
}

.card-icon{
  flex-shrink:0;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--verde);
  color:var(--amarelo);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:-46px;
  border:4px solid #fff;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  position:relative;
  z-index:3;
}

.card-icon svg{width:24px;height:24px;}

.card-text h4{
  font-size:13px;
  font-weight:700;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--verde-escuro);
  margin-bottom:8px;
}

.card-text p{
  font-size:12.8px;
  line-height:1.6;
  color:var(--texto-suave);
  font-weight:300;
  margin:0;
}

/* ================= NOSSA HISTÓRIA ================= */
.historia{
  background:#fff;
  position:relative;
  overflow:hidden;
}

.historia-inner{
  max-width:1400px;
  margin:0 auto;
  padding:70px 32px 80px;
}

.historia h3{
  font-size:16px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--verde-escuro);
  margin-bottom:26px;
}

.historia h3::after{
  content:"";
  display:block;
  width:46px;
  height:3px;
  background:var(--amarelo);
  margin-top:12px;
  border-radius:2px;
}

.galeria{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  justify-items:center;
}

.galeria-item{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:220px;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  background:#ecece7;
  box-shadow:0 5px 14px rgba(0,0,0,.08);
  transition:box-shadow .3s;
  cursor:zoom-in;
}

.galeria-item:hover{
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}

.galeria-item img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ================= LIGHTBOX ================= */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.9);
  align-items:center;
  justify-content:center;
}

.lightbox.aberta{
  display:flex;
}

.lightbox img{
  max-width:92vw;
  max-height:88vh;
  border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  object-fit:contain;
}

.lightbox-fechar{
  position:absolute;
  top:18px;
  right:24px;
  width:44px;
  height:44px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:background .25s;
  z-index:1;
}

.lightbox-fechar:hover{background:rgba(255,255,255,.28);}

.lightbox-seta{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  transition:background .25s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lightbox-seta:hover{background:rgba(255,255,255,.28);}

.lightbox-seta.anterior{left:18px;}
.lightbox-seta.proxima{right:18px;}

/* ================= FOOTER ================= */
footer{
  background:var(--verde-escuro);
  color:#fff;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  max-width:1400px;
  margin:0 auto;
  padding:13px 32px;
}

.footer-item{
  display:flex;
  align-items:center;
  gap:14px;
}

.footer-icon{
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:50%;
  border:2px solid var(--amarelo);
  color:var(--amarelo);
  display:flex;
  align-items:center;
  justify-content:center;
}

.footer-icon svg{width:15px;height:15px;}

.footer-item strong{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.2px;
}

.footer-item span{
  display:block;
  font-size:10.5px;
  color:#bfcfc5;
  font-weight:300;
  margin-top:2px;
}

.footer-divider{
  width:1px;
  height:32px;
  background:rgba(255,255,255,.18);
}

.social{
  display:flex;
  align-items:center;
  gap:10px;
}

.social span{
  font-size:11.5px;
  font-weight:600;
  margin-right:4px;
  white-space:nowrap;
}

.social a{
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:.25s;
}

.social a:hover{color:var(--amarelo);transform:translateY(-2px);}

.social svg{width:20px;height:20px;}

.footer-baseline{
  border-top:1px solid rgba(255,255,255,.12);
}

.footer-baseline p{
  max-width:1400px;
  margin:0 auto;
  padding:8px 32px;
  font-size:11px;
  font-weight:300;
  color:#bfcfc5;
  letter-spacing:.3px;
  text-align:center;
}

.footer-baseline a{
  color:var(--amarelo);
  font-weight:600;
  transition:color .25s;
}

.footer-baseline a:hover{color:var(--amarelo-claro);}

/* ================= MENU MOBILE ================= */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:9px;
  background:transparent;
  border:2px solid var(--amarelo);
  border-radius:8px;
  cursor:pointer;
}

.menu-toggle span{
  display:block;
  width:100%;
  height:3px;
  background:var(--amarelo);
  border-radius:2px;
  transition:transform .25s, opacity .25s;
}

.menu-toggle.ativo span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-toggle.ativo span:nth-child(2){opacity:0;}
.menu-toggle.ativo span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ================= RESPONSIVO ================= */
@media (max-width:1100px){
  header{position:absolute;top:14px;right:8px;}
  .header-inner{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end;}
  .menu-toggle{display:flex;}
  nav{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    width:100%;
    padding:18px 0 10px;
  }
  nav.menu-aberto{display:flex;}
  .hero-inner{grid-template-columns:1fr;text-align:left;}
  .features-inner{grid-template-columns:repeat(2,1fr);}
  .feature:nth-child(2){border-right:none;}
  .feature:nth-child(1),
  .feature:nth-child(2){border-bottom:1px solid rgba(255,255,255,.14);}
  .sobre-inner{grid-template-columns:1fr;gap:44px;}
  .footer-inner{justify-content:flex-start;}
  .footer-divider{display:none;}
  .galeria{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:720px){
  header{position:absolute;top:10px;right:6px;border-radius:20px;}
  .container,.header-inner,.hero-inner,.features-inner,.sobre-inner,.footer-inner{padding-left:20px;padding-right:20px;}
  .brand-text h1{font-size:26px;}
  .brand-text p{font-size:13px;}
  .logo{width:74px;height:74px;}
  nav{gap:16px;}
  nav a.link{font-size:11.5px;}
  .btn-coop{font-size:11px;padding:9px 18px;}
  .features-inner{grid-template-columns:1fr;}
  .feature{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);padding:22px 6px;}
  .feature:last-child{border-bottom:none;}
  .cards{grid-template-columns:1fr;}
  .hero-text p{font-size:14px;}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:20px;}
  .galeria{grid-template-columns:1fr;}
  .historia-inner{padding:50px 20px 60px;}
}

/* ================= ADMIN - PORTA DO WEBMAIL ================= */
/* O formulario mora dentro do <header>, na pílula flutuante. Sem esta linha a
   nav encosta na borda direita; com ela, o formulario fica a esquerda e a nav
   a direita. O header e position:absolute sem width, entao encolhe ate o
   conteudo. */
.admin-form{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}

.admin-lock{
  display:flex;
  align-items:center;
  color:var(--amarelo);
  opacity:.9;
  flex-shrink:0;
}

.admin-lock svg{width:15px;height:15px;}

/* Rotulo existe para o leitor de tela, mas nao ocupa espaco na pilula. */
.admin-oculto{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.admin-campo{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
  color:#fff;
  font-family:inherit;
  font-size:12.5px;
  letter-spacing:1.4px;
  padding:9px 12px;
  width:150px;
  transition:border-color .25s, background .25s;
}

.admin-campo::placeholder{
  color:rgba(255,255,255,.34);
  letter-spacing:.2px;
}

.admin-campo:focus{
  border-color:var(--amarelo);
  background:rgba(255,255,255,.1);
}

.admin-btn{
  background:var(--amarelo);
  color:var(--verde-escuro);
  border:none;
  border-radius:6px;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:.9px;
  text-transform:uppercase;
  padding:10px 16px;
  white-space:nowrap;
  cursor:pointer;
  transition:.25s;
}

.admin-btn:hover{background:var(--amarelo-claro);}
.admin-btn:disabled{opacity:.5;cursor:not-allowed;}

.admin-btn.ghost{
  background:transparent;
  color:#cfe0d6;
  border:1px solid rgba(255,255,255,.25);
}

.admin-btn.ghost:hover{background:rgba(255,255,255,.08);color:#fff;}

/* Variante para os botoes que vivem no painel de fundo branco. A .ghost usa
   texto claro e so funciona sobre o verde escuro do cabecalho. */
.admin-btn.leve{
  background:transparent;
  color:var(--verde-escuro);
  border:1px solid var(--verde-escuro);
}

.admin-btn.leve:hover{background:var(--verde-escuro);color:#fff;}

.admin-btn.perigo{
  background:transparent;
  color:#a8412a;
  border:1px solid rgba(168,65,42,.4);
  padding:8px 14px;
  font-size:10.5px;
}

.admin-btn.perigo:hover{background:rgba(168,65,42,.12);color:#7d2f1d;}

/* A mensagem de erro ocupa a linha inteira do formulario: a pilula cresce por
   cerca de 1,2 s enquanto o texto esta a mostra e depois o script manda o
   visitante de volta para a home. */
.admin-erro{
  flex-basis:100%;
  text-align:left;
  font-size:12px;
  font-weight:500;
  color:#ffb3a3;
  line-height:1.5;
}

.admin-erro[hidden]{display:none;}

/* Aviso de <noscript>: fica visivel para quem abriu sem JavaScript. A classe
   existe para o bloco ser exibido mesmo com a regra [hidden] acima. */
.admin-js-off{
  display:block;
  background:rgba(242,194,48,.12);
  border:1px solid rgba(242,194,48,.5);
  border-radius:8px;
  padding:12px 16px;
  color:var(--amarelo-claro);
  font-size:12.5px;
  max-width:560px;
  margin:16px auto;
}

@media (max-width:1100px){
  /* O formulario ganha a linha inteira e a nav desce para baixo dele. Sem
     isso os dois dividem a largura e a pilula estouraria a tela. */
  .admin-form{flex-basis:100%;}
}

@media (max-width:520px){
  .admin-campo{flex:1;width:auto;min-width:0;}
}

/* ================= ADMIN - PAINEL ================= */
.admin-topo{
  background:var(--verde-escuro);
  color:#fff;
  padding:20px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.admin-topo h1{
  font-size:19px;
  font-weight:800;
  letter-spacing:.4px;
}

.admin-topo span{
  display:block;
  font-size:11.5px;
  font-weight:300;
  color:#bfcfc5;
  margin-top:4px;
  letter-spacing:.3px;
}

.admin-corpo{
  max-width:940px;
  margin:0 auto;
  padding:32px 24px 80px;
}

/* Caixa "Fila Operacional". Nasceu vazia, com o texto que explica a
   finalidade. Nao tem visual proprio ainda: herda o painel. A regra existe
   para deixar um gancho onde o conteudo da fila vai entrar, e para o HTML
   poder identificar a secao sem depender do texto. */
/* A borda era tracejada enquanto a fila nao existia, para a caixa parecer de
   pendencia. Agora que a fila abre, ela volta a ser um painel normal: borda
   tracejada com lots de conteudo dentro faz a tela parecer quebrada. */
.admin-fila-operacional{
  border-style:solid;
}

/* ======================= FILA DE COOPERADOS ======================= */
/* O painel do cadastro. Fica logo depois do painel da fila, que e onde o
   operador clica em "Novo veiculo" — e o mesmo painel visual, entao a regra
   de espaco entre os dois nao e preciso. */
.admin-fila-form-painel{
  margin-top:22px;
}
/* O formulario em si, com duas colunas: os campos de um veiculo sao curtos
   demais para ocupar a largura toda sozinhos, e deitado o painel fica com
   duas colunas de verdade. */
.admin-fila-form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0 18px;
  align-items:start;
}
.admin-fila-form .admin-campo-form{
  margin-bottom:18px;
}
/* A mensagem de erro e o botao de salvar atravessam as colunas: sao o
   resultado e a confirmacao, nao mais um campo entre outros. */
.admin-fila-form .fila-form-erro,
.admin-fila-form .admin-acoes{
  grid-column:1 / -1;
}

/* Duas colunas, uma por categoria. Nao se misturam em tela porque nao se
   misturam na regra: se um dia aparecer veiculo de truck numa coluna de
   carreta, isso e bug de dado, e a coluna separada denuncia na hora. */
.fila-tela{
  margin-top:26px;
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:22px;
}
.fila-cabecalho{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:20px;
}
.fila-topo-texto{
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.78);
  margin:0 0 6px;
  max-width:62ch;
}
.fila-topo-texto strong{color:#fff;}
/* Aviso de navegador sem espaco para salvar. Escuro, discreto, nao e caixa
   amarela: essa e uma condicao de contorno, nao um erro do operador. */
.fila-topo-aviso{color:var(--amarelo-claro);}
.fila-cabecalho-acoes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.fila-quadros{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:22px;
}
.fila-quadro{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:18px 16px;
}
.fila-quadro h3{
  margin:0 0 4px;
  font-size:15px;
  font-weight:600;
  color:#fff;
  letter-spacing:.02em;
}
.fila-quadro h3 span{
  font-weight:400;
  color:rgba(255,255,255,.55);
  font-size:13px;
}
.fila-dica{
  margin:0 0 14px;
  font-size:12px;
  color:rgba(255,255,255,.55);
}

.fila-lista{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.fila-linha{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--verde-claro);
  border-radius:8px;
  padding:10px 12px;
  cursor:grab;
}
.fila-linha:hover{background:rgba(255,255,255,.1);}
/* Arraste em andamento e destino do arraste. Sao estados visuais porque
   durante o arraste o cursor larga e a lista se mexe: sem realce, o operador
   solta no lugar errado e so descobre depois. */
.fila-linha.fila-arrastando{
  opacity:.45;
  cursor:grabbing;
}
.fila-linha.fila-alvo{
  border-color:var(--amarelo);
  background:rgba(242,194,48,.16);
}

.fila-pos{
  flex:0 0 auto;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  font-size:12px;
  font-weight:600;
  color:#fff;
}
/* Posicao 1 e o proximo a pegar carga, entao ela e a unica que recebe o
   destaque. Sem isso o operador precisa contar linhas na hora de chamar. */
.fila-linha:first-child .fila-pos{
  background:var(--verde-claro);
}

.fila-info{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
/* Placa em destaque e motorista em letra menor: a placa e o identificador
   unico do veiculo, e o nome do proprietario se repete (tres veiculos sao do
   Paulinho). O que se le de relance numa fila de carga e a placa. */
.fila-placa{
  font-size:14px;
  font-weight:600;
  color:#fff;
  letter-spacing:.03em;
}
.fila-motorista{
  font-size:12.5px;
  color:rgba(255,255,255,.86);
}
.fila-cavalo,
.fila-detalhe{
  font-size:11.5px;
  color:rgba(255,255,255,.55);
}

/* O botao verde da secao 4. Precisa ser o verde mais forte da linha: e o
   atalho para mandar direto ao fim, e nao ha como adivinhar pela posicao. */
.fila-verde{
  flex:0 0 auto;
  background:var(--verde-claro);
  color:#fff;
  border:1px solid var(--verde-medio);
  border-radius:7px;
  padding:8px 12px;
  font-size:12px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
}
.fila-verde:hover{background:var(--verde);border-color:var(--verde-escuro);}
.fila-editar{
  flex:0 0 auto;
  background:transparent;
  color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.22);
  border-radius:7px;
  padding:8px 10px;
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
}
.fila-editar:hover{background:rgba(255,255,255,.1);color:#fff;}

.fila-confirmado{
  margin:18px 0 0;
  padding:11px 14px;
  background:rgba(43,138,87,.24);
  border:1px solid var(--verde-claro);
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  color:#fff;
}
.fila-form-erro{
  margin:0 0 16px;
  padding:10px 13px;
  background:rgba(168,65,42,.2);
  border:1px solid rgba(168,65,42,.6);
  border-radius:8px;
  font-size:13px;
  color:#f0c3b4;
}
@media (max-width:640px){
  .fila-cabecalho{flex-direction:column;}
  .fila-linha{flex-wrap:wrap;}
  .fila-pos{width:22px;height:22px;}
}

.admin-aviso{
  background:#fdf6e3;
  border:1px solid var(--amarelo);
  border-left-width:4px;
  border-radius:8px;
  padding:14px 18px;
  font-size:13px;
  line-height:1.7;
  color:#5c4a15;
  margin-bottom:24px;
}

.admin-acesso-webmail{
  border-color:var(--verde);
  border-left:4px solid var(--verde);
}

.admin-texto-desc{
  font-size:13.5px;
  line-height:1.7;
  color:var(--texto-suave);
  font-weight:300;
  margin-bottom:18px;
}

.admin-aviso strong{
  display:block;
  color:var(--verde-escuro);
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:6px;
}

.admin-painel{
  background:#fff;
  border:1px solid #e6e6e0;
  border-radius:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
  padding:24px;
  margin-bottom:30px;
}

.admin-painel h2{
  font-size:13px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--verde-escuro);
  margin-bottom:18px;
}

.admin-painel h2::after{
  content:"";
  display:block;
  width:40px;
  height:3px;
  background:var(--amarelo);
  margin-top:10px;
  border-radius:2px;
}

.admin-rotulo{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--texto-suave);
  margin-bottom:7px;
}

.admin-texto{
  width:100%;
  background:#fafaf7;
  border:1px solid #dcdcd4;
  border-radius:6px;
  font-family:inherit;
  font-size:14px;
  line-height:1.6;
  color:var(--texto);
  padding:12px 14px;
  transition:border-color .25s;
}

.admin-texto:focus{border-color:var(--verde);}

.admin-texto-area{
  min-height:120px;
  resize:vertical;
}

.admin-campo-form{margin-bottom:18px;}

.admin-acoes{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}

.admin-lista{
  display:grid;
  gap:12px;
}

.admin-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  border:1px solid #e6e6e0;
  border-radius:10px;
  padding:16px 18px;
  background:#fdfdfb;
}

.admin-item h3{
  font-size:14.5px;
  font-weight:600;
  color:var(--verde-escuro);
  margin-bottom:6px;
}

.admin-item p{
  font-size:13px;
  line-height:1.7;
  color:var(--texto-suave);
  font-weight:300;
  white-space:pre-wrap;
  margin:0;
}

.admin-item time{
  display:block;
  font-size:10.5px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#9a9a92;
  margin-bottom:6px;
}

.admin-item-acoes{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.admin-vazio{
  text-align:center;
  padding:38px 20px;
  border:1px dashed #d8d8d0;
  border-radius:10px;
  color:#9a9a92;
  font-size:13px;
  font-weight:300;
}
/* ===================================================================
   AJUSTES DA FILA - TEMA CLARO
   -------------------------------------------------------------------
   As regras da fila acima foram escritas para o painel verde escuro e
   usavam branco sobre fundo claro, o que deixava placa, motorista e
   posicao praticamente invisiveis. Aqui o texto vira escuro sobre fundo
   claro. E so cor e borda: o layout nao muda.

   Este bloco fica no fim de proposito. No CSS, quando a especificidade
   e a mesma, vence a regra que vem depois - entao aqui sobrescreve as
   regras escuras sem precisar edita-las uma por uma.
   =================================================================== */

:root{
  --vermelho-medio:#a8412a;
  --vermelho-texto:#8c2f1c;
  --vermelho-fundo:#fdf1ed;
  --vermelho-borda:#e8b9ac;
  --amarelo-texto:#8a6a00;
}

.fila-tela{border-top-color:#e6e6e0;}
.fila-topo-texto{color:var(--texto-suave);}
.fila-topo-texto strong{color:var(--verde-escuro);}
.fila-topo-aviso{color:var(--amarelo-texto);}

/* Fila vazia e servidor fora sao avisos, entao nao podem ficar no mesmo
   cinza do texto comum: o operador precisa ver o problema antes de
   comecar a trabalhar. */
.fila-topo-vazia{
  color:var(--amarelo-texto);
  font-size:13px;
  font-weight:600;
}
.fila-server-fora{
  margin:16px 0;
  padding:12px 14px;
  background:var(--vermelho-fundo);
  border:1px solid var(--vermelho-borda);
  border-left:4px solid var(--vermelho-medio);
  border-radius:8px;
  font-size:13px;
  color:var(--vermelho-texto);
}
.fila-server-fora-detalhe{
  margin-top:4px;
  font-size:12px;
  opacity:.85;
  color:var(--vermelho-texto);
}

.fila-quadro{background:#f7f7f4;border-color:#e6e6e0;}
.fila-quadro h3{color:var(--verde-escuro);}
.fila-quadro h3 span{color:var(--texto-suave);}
.fila-dica{color:#6b6b63;}

.fila-linha{
  background:#fafaf7;
  border-color:#dcdcd4;
  border-left-color:#dcdcd4;
}
.fila-linha:hover{background:#f0f0ec;}

.fila-pos{background:#ecece6;color:var(--texto);}
.fila-placa{color:#2b2b2b;}
.fila-motorista{color:#3a3a3a;}
.fila-cavalo,
.fila-detalhe{color:#6b6b63;}

.fila-verde{background:var(--verde);border-color:var(--verde-escuro);}
.fila-verde:hover{background:var(--verde-escuro);}
.fila-editar{color:var(--texto-suave);border-color:#dcdcd4;}
.fila-editar:hover{background:#ecece6;color:var(--texto);}

.fila-confirmado{
  background:#eaf6ee;
  border-color:var(--verde-medio);
  color:var(--verde-escuro);
}
.fila-form-erro{
  background:var(--vermelho-fundo);
  border-color:var(--vermelho-borda);
  color:var(--vermelho-texto);
}

/* A posicao 1 e a proxima a pegar carga, entao mantem o destaque verde
   de sempre por cima do novo fundo claro. */
.fila-linha:first-child{
  background:#eaf6ee;
  border-color:var(--verde-medio);
}
.fila-linha:first-child .fila-pos{background:var(--verde);color:#fff;}

/* ===================================================================
   OS 3 PRIMEIROS COM CONTORNO VERDE PULSANDO
   -------------------------------------------------------------------
   Sao os proximos a sair e o operador precisa acha-los de relance no
   meio da lista.

   nth-child conta direto nos filhos do .fila-lista, entao pega 1, 2 e 3
   sem depender de classe nem de numero guardado no JS.

   O contorno e feito com box-shadow e nao com border: mudar a espessura
   do border a cada quadro empurraria o conteudo e a fila inteira
   tremeria. A sombra desenha por fora e nao mexe em nada.
   =================================================================== */
.fila-linha:nth-child(-n+3){
  border-left:3px solid var(--verde);
  animation:fila-piscar-verde 2.4s ease-in-out infinite;
}

@keyframes fila-piscar-verde{
  0%,100%{box-shadow:0 0 0 2px rgba(26,92,58,.85);}
  50%{box-shadow:0 0 0 2px rgba(26,92,58,.12);}
}

/* Quem liga "reduzir movimento" no sistema nao ve pulso nenhum, mas
   continua vendo a marcacao - sem ela a fila perde a informacao. */
@media (prefers-reduced-motion: reduce){
  .fila-linha:nth-child(-n+3){
    animation:none;
    box-shadow:0 0 0 2px rgba(26,92,58,.85);
  }
}

/* Durante o arraste a lista inteira se mexe. Um contorno pulsando por
   cima desse movimento vira ruido e atrapalha a ver onde esta soltando.
   O destino do arraste continua marcado em amarelo pelo .fila-alvo. */
.fila-linha.fila-arrastando:nth-child(-n+3){
  animation:none;
  box-shadow:none;
}

/* ===================================================================
   DIALOGO DE CONFIRMACAO
   -------------------------------------------------------------------
   Cobre a tela toda a partir do fim do body.

   O [hidden] precisa ser display:none explicito: sem isso o display:flex
   abaixo vence o hidden padrao do navegador e o dialogo apareceria em
   toda navegacao, mesmo fechado.
   =================================================================== */
.fila-dialogo{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(18,63,41,.55);
}
.fila-dialogo[hidden]{display:none;}

.fila-dialogo-caixa{
  width:100%;
  max-width:420px;
  background:#fff;
  border:1px solid #e6e6e0;
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.24);
  padding:24px;
}
.fila-dialogo-titulo{
  margin:0 0 8px;
  font-size:17px;
  font-weight:700;
  color:var(--verde-escuro);
}
.fila-dialogo-detalhe{
  margin:0 0 20px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--texto);
}
.fila-dialogo-acoes{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.fila-dialogo-botao{
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.9px;
  text-transform:uppercase;
  padding:10px 16px;
  border-radius:6px;
  border:1px solid #dcdcd4;
  background:#fff;
  color:var(--texto);
  cursor:pointer;
  transition:.2s;
}
.fila-dialogo-botao:hover{background:#f0f0ec;}
.fila-dialogo-botao.confirmar{
  background:var(--verde);
  border-color:var(--verde-escuro);
  color:#fff;
}
.fila-dialogo-botao.confirmar:hover{background:var(--verde-escuro);}