/* ===========================================================
   CONCEPT OS — identidade "Racing": carbono real, verde-limão,
   vermelho de destaque, Poppins. Tema "Clean" (claro) selecionável
   por unidade fica pra depois — aqui é o tema padrão Racing.
   =========================================================== */

:root{
  --bg-carbono: url('assets/carbono-fundo.avif');
  --overlay: linear-gradient(rgba(0,0,0,0.18),rgba(0,0,0,0.38));
  --lime:#C6FF1A;
  --lime-ink:#0A1400;
  --red:#FF3B5C;
  --cyan:#2FE0E0;
  --amarelo:#FFD400;
  --ink:#FFFFFF;
  --muted:#B9C2B4;
  --line:var(--red);
  --line-lime:var(--lime);
  --surface: rgba(0,0,0,0.35);
  --surface-2: rgba(0,0,0,0.45);
  --danger:#FF3B5C;
  --shadow: rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Poppins', Arial, sans-serif;
  background: var(--overlay), var(--bg-carbono);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  min-height:100vh;
}
.hidden{display:none !important;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--lime); outline-offset:2px;}

/* ---------- TOPBAR ---------- */
.topbar{
  background: rgba(0,0,0,0.55);
  border-bottom:1.5px solid var(--lime);
  padding:12px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(4px);
}
.brand{display:flex;align-items:center;gap:10px;}
.brand img.logo-marca{height:18px; width:auto; display:block; opacity:0.7;}
.brand img.logo-unidade{height:38px; width:auto; border-radius:6px; background:#fff; padding:2px;}
.tabs{display:flex;flex-wrap:wrap;gap:6px;}
.tab-btn{
  background:rgba(255,255,255,0.08);
  border:1.5px solid var(--lime);
  color:var(--lime);
  padding:9px 14px;
  border-radius:999px;
  cursor:pointer;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:0.78rem;
  white-space:nowrap;
}
.tab-btn:hover{background:rgba(198,255,26,0.12);}
.tab-btn.active{background:var(--lime); color:var(--lime-ink); border-color:var(--lime);}
.tab-badge{
  display:inline-block; min-width:18px; padding:1px 6px; margin-left:4px;
  border-radius:999px; background:var(--red); color:#fff;
  font-size:0.68rem; font-weight:800; line-height:1.4;
}
#logoutBtn{border-color:var(--red); color:var(--red);}
#logoutBtn:hover{background:rgba(255,59,92,0.15);}

/* ---------- LAYOUT ---------- */
.content{padding:20px 16px 90px; max-width:1100px; margin:0 auto;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

h1{font-family:'Poppins', Arial, sans-serif; font-weight:800; font-size:1.3rem; margin:0 0 14px; color:var(--red);}
h2{font-family:'Poppins', Arial, sans-serif; font-weight:700; font-size:1rem; margin-top:22px; margin-bottom:10px; color:var(--red);}

/* ---------- CARDS / BOXES ---------- */
.box{
  border:1.5px solid var(--line); border-radius:14px; padding:14px 16px;
  margin-bottom:14px; background:var(--surface);
}
.box.lime{ border-color:var(--lime); }
.field-label{font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--red); margin-bottom:2px;}
.field-value{font-size:0.9rem; color:var(--ink); margin-bottom:10px;}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:22px;}
.card{background:var(--surface); border:1.5px solid var(--lime); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:6px;}
.card-label{color:var(--muted); font-size:0.68rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;}
.card-value{font-family:'Poppins', Arial, sans-serif; font-weight:800; font-size:1.5rem; color:var(--lime);}

/* ---------- FORMS ---------- */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; background:var(--surface); border:1.5px solid var(--line); padding:16px; border-radius:14px;}
.form-grid label{display:flex; flex-direction:column; gap:6px; font-size:0.75rem; font-weight:700; letter-spacing:0.02em; color:var(--muted);}
.form-grid input, .form-grid select, .form-grid textarea{
  padding:11px 12px; border:1.5px solid var(--lime); border-radius:10px; font-size:0.95rem;
  font-family:'Poppins',sans-serif; background:rgba(255,255,255,0.92); color:#101010; min-height:44px;
}
.form-grid textarea{min-height:70px; resize:vertical;}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{border-color:var(--cyan); outline:none;}
.form-grid button{grid-column:1 / -1;}
.form-grid label.checkbox-label{flex-direction:row; align-items:center; gap:8px;}
.form-grid label.checkbox-label input[type="checkbox"]{min-height:auto; width:18px; height:18px; accent-color:var(--lime);}
.checkbox-label{display:flex; flex-direction:row; align-items:center; gap:8px; font-size:0.88rem; cursor:pointer;}
.checkbox-label input[type="checkbox"]{width:18px; height:18px; accent-color:var(--lime); cursor:pointer;}

.horarios-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.horario-btn.active{background:var(--lime); color:var(--lime-ink);}

/* ---------- BUTTONS ---------- */
.btn-primary{
  background:var(--lime); color:var(--lime-ink); border:none;
  padding:13px 22px; border-radius:999px; cursor:pointer; min-height:46px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:0.9rem;
  box-shadow:0 6px 16px rgba(198,255,26,0.25);
}
.btn-primary:hover{filter:brightness(0.95);}
.btn-primary:disabled{opacity:0.5; cursor:not-allowed;}
.btn-secondary{
  background:transparent; color:var(--lime); border:1.5px solid var(--lime);
  padding:9px 16px; border-radius:999px; cursor:pointer; font-size:0.8rem; font-weight:600;
  font-family:'Poppins',sans-serif;
}
.btn-secondary:hover{background:rgba(198,255,26,0.1);}
.btn-danger{
  background:transparent; color:var(--red); border:1.5px solid var(--red);
  padding:9px 16px; border-radius:999px; cursor:pointer; font-size:0.8rem; font-weight:600;
  font-family:'Poppins',sans-serif;
}
.btn-danger:hover{background:rgba(255,59,92,0.1);}
.btn-whats{
  background:#25D366; color:#0A2E1B; border:none;
  padding:9px 16px; border-radius:999px; cursor:pointer; font-size:0.8rem; font-weight:700;
  text-decoration:none; display:inline-block; font-family:'Poppins',sans-serif;
}

/* ---------- STEPPER DE STATUS ---------- */
.stepper{display:flex; justify-content:space-between; align-items:center; padding:8px 2px; flex-wrap:wrap; gap:8px;}
.step{display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; min-width:60px;}
.step .dot{width:14px; height:14px; border-radius:50%; border:2px solid #3a3a3a; background:#111;}
.step.active .dot{background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 8px var(--cyan);}
.step.concluido .dot{background:var(--lime); border-color:var(--lime);}
.step .step-label{font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--muted); text-align:center;}
.step.active .step-label{color:var(--cyan);}
.step.concluido .step-label{color:var(--lime);}

/* ---------- FOTOS ---------- */
.photos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px;}
.photo-slot{
  aspect-ratio:4/3; background:rgba(0,0,0,0.5); border:1.5px solid var(--red); border-radius:10px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; cursor:pointer;
}
.photo-slot img{width:100%; height:100%; object-fit:cover;}
.photo-slot .add-ico{color:var(--red); font-size:1.6rem;}
.photo-slot .tag{position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.7); color:#fff; font-size:0.62rem; text-align:center; padding:3px 0; font-weight:700;}

/* ---------- COMBUSTÍVEL ---------- */
.fuel-row{display:flex; align-items:center; gap:8px; margin-top:12px;}
.fuel-bar{display:flex; gap:3px; flex:1;}
.fuel-seg{height:14px; flex:1; border-radius:2px; background:rgba(255,255,255,0.15);}
.fuel-pct{font-size:0.9rem; font-weight:800; color:#fff; min-width:38px; text-align:right;}

/* ---------- ASSINATURA ---------- */
.sig-canvas-wrap{ border:1.5px solid var(--red); border-radius:10px; overflow:hidden; background:#fff; touch-action:none; }
.sig-canvas-wrap canvas{ display:block; width:100%; height:160px; }

/* ---------- STATUS BADGES ---------- */
.status-badge{
  display:inline-block; padding:4px 12px; border-radius:999px; font-size:0.65rem; font-weight:800;
  letter-spacing:0.03em; text-transform:uppercase; font-family:'Poppins',sans-serif; white-space:nowrap;
}
.status-pendente{background:rgba(255,255,255,0.1); color:var(--muted); border:1px solid var(--muted);}
.status-pago, .status-concluido{background:var(--lime); color:var(--lime-ink);}
.status-cancelado{background:rgba(255,59,92,0.15); color:var(--red); border:1px solid var(--red);}
.status-aguardando{background:rgba(255,176,32,0.15); color:var(--amarelo); border:1px solid var(--amarelo);}

/* ---------- ITEM DO ORÇAMENTO: semáforo (verde/amarelo/vermelho) ---------- */
.item-orcamento{border-left-width:5px !important;}
.item-orcamento.item-aprovado{border-left-color:var(--lime) !important;}
.item-orcamento.item-aguardando{border-left-color:var(--amarelo) !important;}
.item-orcamento.item-recusado{border-left-color:var(--red) !important;}
.item-acoes{display:flex; gap:8px; flex-wrap:wrap;}
.item-edicao{margin-top:6px;}
.resumo-orcamento{margin-top:12px; border:1.5px solid var(--lime); border-radius:14px; padding:10px 14px; background:var(--surface);}
.resumo-linha{display:flex; justify-content:space-between; gap:10px; padding:4px 0;}
.resumo-orcado b{font-size:1.1rem;}
.resumo-aprovado b{color:var(--lime);}
.resumo-aguardando b{color:var(--amarelo);}
.resumo-recusado b{color:var(--red);}
.andamento{margin-top:12px; border-top:1px dashed var(--lime); padding-top:12px;}
.andamento-texto{margin:0 0 10px; font-weight:700;}
.andamento .btn-primary{width:100%;}

/* ---------- LISTAS ---------- */
.list{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.list-item{background:var(--surface); border:1.5px solid var(--lime); border-radius:14px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.list-item code{word-break:break-all; font-size:0.8rem; background:rgba(255,255,255,0.9); color:#101010; padding:4px 8px; border-radius:8px;}
.row-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* ---------- CONTAS A PAGAR: semáforo por vencimento ---------- */
.list-item.conta-atrasada{border-left-width:5px !important; border-left-color:var(--red) !important;}
.list-item.conta-vencendo{border-left-width:5px !important; border-left-color:var(--amarelo) !important;}
.list-item.conta-paga{opacity:0.55;}
.list-item.conta-paga .conta-desc{text-decoration:line-through;}

.order-row{background:var(--surface); border:1.5px solid var(--lime); border-radius:14px; padding:12px 14px; display:flex; gap:14px; align-items:flex-start;}
.order-thumb{width:96px; height:72px; object-fit:cover; border-radius:10px; border:1.5px solid var(--lime); background:#0d1400; flex-shrink:0;}
.order-info{flex:1; min-width:0;}
.order-info-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:2px 14px; margin-bottom:10px;}
.order-info-grid .field-label{margin-bottom:0;}
.order-info-grid .field-value{margin-bottom:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:520px){
  .order-row{flex-wrap:wrap;}
  .order-thumb{width:72px; height:54px;}
}

.moto-galeria{display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; margin-top:10px;}
.moto-opcao{background:var(--surface); border:1.5px solid #444; border-radius:12px; padding:6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px;}
.moto-opcao img{width:100%; height:70px; object-fit:cover; border-radius:8px;}
.moto-opcao span{font-size:0.7rem; font-weight:700; text-align:center; color:var(--ink);}
.moto-opcao:hover{border-color:var(--lime);}
.moto-opcao.selecionada{border-color:var(--lime); background:rgba(198,255,26,0.12); box-shadow:0 0 0 2px var(--lime);}

.hint{color:var(--muted); font-size:0.82rem; margin-top:12px;}

/* ---------- LOGIN ---------- */
.auth-body{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; gap:22px; }
.auth-hero{ width:100%; max-width:400px; text-align:center; }
.auth-hero h1{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.3rem; line-height:1.25; color:var(--ink); margin:0; text-wrap:balance; }
.auth-destaques{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.auth-destaques span{ background:rgba(198,255,26,0.08); border:1.5px solid var(--lime); color:var(--lime); font-size:0.7rem; font-weight:700; padding:6px 12px; border-radius:999px; }
.auth-card{
  background:rgba(0,0,0,0.55); border:1.5px solid var(--lime); border-radius:18px; padding:30px;
  width:100%; max-width:400px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
}
.auth-card img.logo-marca{height:38px; width:auto; margin-bottom:14px;}
.auth-form{display:flex; flex-direction:column; gap:12px; margin-top:14px;}
.auth-form label{display:flex; flex-direction:column; gap:5px; font-size:0.72rem; font-weight:700; letter-spacing:0.02em; color:var(--muted);}
.auth-form input, .auth-form select{padding:12px; border:1.5px solid var(--lime); border-radius:10px; font-size:0.95rem; min-height:44px; font-family:'Poppins',sans-serif; background:rgba(255,255,255,0.92); color:#101010;}
.auth-card hr{border:none; border-top:1px solid rgba(255,255,255,0.15); margin:20px 0;}

/* ---------- TEMA CLEAN (claro/simples, alternativa ao Racing) ---------- */
:root[data-tema="clean"]{
  --ink:#20221A;
  --muted:#6B6F63;
  --surface: rgba(255,255,255,0.92);
  --surface-2: rgba(246,247,240,0.95);
}
:root[data-tema="clean"] body{
  background: #A6A99D;
  color: var(--ink);
}
:root[data-tema="clean"] .topbar{ background:#9B9E90; border-bottom:1.5px solid var(--line); }
:root[data-tema="clean"] .tab-btn{ background:rgba(0,0,0,0.03); color:var(--red); }
:root[data-tema="clean"] .tab-btn.active{ background:var(--lime); color:var(--lime-ink); }
:root[data-tema="clean"] .box{ background:var(--surface); border-color:var(--line); }
:root[data-tema="clean"] .card{ background:var(--surface); }
:root[data-tema="clean"] .list-item{ background:var(--surface); }
:root[data-tema="clean"] .photo-slot{ background:var(--surface-2); }
:root[data-tema="clean"] h1, :root[data-tema="clean"] h2{ color:var(--red); }
:root[data-tema="clean"] .step .step-label{ color:#8a8f7f; }
:root[data-tema="clean"] .tabs{ background:#9B9E90; border-top-color:var(--line); }

/* ---------- MOBILE ---------- */
@media (max-width:760px){
  .topbar{padding:10px 12px;}
  /* Antes isso era uma barra fixa embaixo que rolava pro lado — em muitos
     celulares o gesto de arrastar horizontal não é reconhecido de forma
     confiável (o navegador confunde com o scroll vertical da página), o
     que deixava abas como "Configurações" praticamente inacessíveis.
     Agora as abas simplesmente quebram em várias linhas no topo — sempre
     todas visíveis, sem depender de nenhum gesto especial. */
  .tabs{ flex-wrap:wrap; gap:8px; }
  .tab-btn{flex:none;}
  .content{padding:16px 12px 24px;}
  .cards{grid-template-columns:repeat(2,1fr);}
}