/* ═══════════════════════════════════════════════════════════════════════
   TELAS DO TÉCNICO (atendimento.html, empilhadeiras.html)

   O PADRÃO É O ESCURO ORIGINAL (verde profundo da TV) — não mudar.
   O tema claro BeFra é só uma opção no menu do usuário ("Tema claro"):
   liga a classe .tema-claro no <body>, e só as regras body.tema-claro
   abaixo valem. As regras sem prefixo de tema (ações, formulários,
   cabeçalho no celular) são correções de layout para os dois temas.
   ═══════════════════════════════════════════════════════════════════════ */

body.tema-claro{
  /* cores de sinalização, escurecidas para texto sobre branco (AA) */
  --amber:#b45309; --red:#b42318; --purple:#7e22ce; --blue:#0369a1; --green:#0f7a63;
  /* blocos de cor (trilho lateral dos cartões, faixa) seguem a marca */
  --amber-s:#e8a33d; --red-s:#e2593c; --purple-s:#9b59c9; --blue-s:#35a8d8;
  --amber-l:#fff3d6; --red-l:#fdecea; --blue-l:#e0f2fe; --green-l:#e3f4ef; --green-d:#21564a;
  --g50:#f1f5f4; --g100:rgba(23,63,54,.06); --g200:#dbe4e1; --g400:#7a8a85; --g600:#4d5d58; --g900:#1d2b27;
  --surface:#ffffff; --bg:#f3f6f5;
  --shadow:0 1px 3px rgba(23,63,54,.08),0 6px 18px rgba(23,63,54,.06);
  background:var(--bg); color:var(--g900);
}
body.tema-claro::before{display:none;}

/* Campos: base clara (o arquivo forçava branco translúcido p/ fundo escuro) */
body.tema-claro input,
body.tema-claro textarea,
body.tema-claro select{background:#fff;color:var(--g900);-webkit-text-fill-color:var(--g900);border-color:var(--g200);}
body.tema-claro input::placeholder,
body.tema-claro textarea::placeholder,
body.tema-claro .coment-input::placeholder{color:#8a9893;-webkit-text-fill-color:#8a9893;}
body.tema-claro select option{background:#fff;color:var(--g900);}
body.tema-claro input[type="date"]::-webkit-calendar-picker-indicator{filter:none;}
body.tema-claro .coment-input,
body.tema-claro textarea{background:#f8faf9;}
body.tema-claro .add-btn:active{background:var(--g100);}

/* Texto escuro sobre --green (que agora é verde fechado) vira branco */
body.tema-claro .btn-login,
body.tema-claro .ctx-bd,
body.tema-claro .maq-tab.active,
body.tema-claro .maq-tab.active .maq-tab-ct,
body.tema-claro .tipo-btn.acao .tipo-btn-label,
body.tema-claro .coment-send,
body.tema-claro .btn-concluir,
body.tema-claro .btn-salvar-tec{color:#fff;}
body.tema-claro .maq-tab.active .maq-tab-ct{background:rgba(255,255,255,.22);}
body.tema-claro .maq-tab-al{background:var(--g100);}

/* Cabeçalho: branco, faixa de 4 cores no topo, logo escuro */
body.tema-claro .hdr{background:#fff;color:var(--g900);height:58px;padding-top:4px;
  border-bottom:1px solid var(--g200);box-shadow:none;}
body.tema-claro .hdr::after{top:0;bottom:auto;}
body.tema-claro .hdr-logo-img{filter:brightness(0);opacity:.88;}
body.tema-claro .hdr-div{background:var(--g200);}
body.tema-claro .hdr-sub{color:var(--green);font-weight:800;letter-spacing:.6px;text-transform:uppercase;}
body.tema-claro .hdr-user{border:1px solid var(--g200);border-radius:12px;}
body.tema-claro .hdr-user:hover{background:var(--green-l);}
body.tema-claro .hdr-avatar{background:var(--green-d);color:#fff;}
body.tema-claro .hdr-dd{border:1px solid var(--g200);box-shadow:0 14px 34px rgba(20,45,40,.16);}

/* Avatares de técnico nos cartões */
body.tema-claro .osq-av{background:var(--green-d);color:#fff;border-color:#fff;}

/* Bloco de destaque do histórico: verde-petróleo em vez de quase preto */
body.tema-claro .h-hero{background:linear-gradient(145deg,#173f36,#21564a);}

/* Barra de status do celular acompanha o cabeçalho claro */
body.tema-claro .tema-toggle-escuro{display:flex;}
body:not(.tema-claro) .tema-toggle-claro{display:flex;}
.tema-toggle-escuro,.tema-toggle-claro{display:none;}

/* Login próprio da tela do técnico */
body.tema-claro #auth{background:linear-gradient(180deg,#DDEEE8 0%,#EDF0EF 70%);position:relative;}
body.tema-claro #auth::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#e8a33d 0 25%,#e2593c 25% 50%,#9b59c9 50% 75%,#35a8d8 75% 100%);}
body.tema-claro .auth-card{border-top:6px solid #0f7a63;box-shadow:0 10px 30px rgba(30,70,60,.10);}
body.tema-claro .auth-logo-box{background:linear-gradient(135deg,#21564a,#173f36);box-shadow:none;}
body.tema-claro .auth-logo-sub{color:#0f7a63;letter-spacing:2px;text-transform:uppercase;font-size:11px;font-weight:800;}
body.tema-claro .field input{height:52px;font-size:16px;background:#EFF5F3;border-color:#D5E1DE;}
body.tema-claro .field input:focus{border-color:#0f7a63;box-shadow:0 0 0 3px rgba(15,122,99,.18);}
body.tema-claro .btn-login{background:#0f7a63;height:54px;font-size:16px;font-weight:800;border-radius:12px;}

/* Blocos que tinham fundo escuro fixo no atendimento.html */
body.tema-claro .maq-btn.tem-os{background:#fdecea;border-color:#e2593c;}
body.tema-claro .maq-btn.tem-os .maq-nome{color:#b42318;}
body.tema-claro .maq-chamado{background:#fff8e6;border-color:#e8a33d;color:#92400e;}
body.tema-claro .maq-chamado:hover{border-color:#b45309;}
body.tema-claro .maq-avulso{background:#f0f9ff;border-color:#7cc7e8;}

/* ── Ações do atendimento (vale para os dois temas) ────────────────────
   Eram três blocos de cor saturada (azul, laranja, salmão) espremidos lado
   a lado: no celular o texto quebrava em três linhas e o emoji ficava
   sozinho em cima. Agora: secundárias contornadas, lado a lado; encerrar
   é a ação principal, sólida e em largura total. */
.action-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;}
.action-btns .btn{min-height:50px;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 12px;font-size:14px;line-height:1.2;border-radius:12px;text-align:center;}
.action-btns .btn-check{background:var(--surface);color:var(--blue);border:1.5px solid var(--blue);}
.action-btns .btn-teste{background:var(--surface);color:var(--amber);border:1.5px solid var(--amber);}
.action-btns .btn-encerrar{grid-column:1/-1;background:var(--red-s,#e2593c);color:#fff;border:none;}
body:not(.tema-claro) .action-btns .btn-check,
body:not(.tema-claro) .action-btns .btn-teste{background:transparent;}
/* No escuro --green é verde-menta: texto branco sobre ele não se lia */
body:not(.tema-claro) .btn.bp{color:#04140b;}

/* Formulário dos modais (.fg2 não tinha regra: rótulo colado no campo) */
.fg2 label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--g600);margin-bottom:6px;}
.fg2 select,.fg2 input{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid var(--g200);border-radius:12px;
  font-family:inherit;font-size:15px;}
.modal .btn.bp{min-height:52px;font-size:15px;border-radius:12px;}
body.tema-claro .modal .btn.bp{background:var(--green);color:#fff;}

/* Cabeçalho no celular: o nome some antes de estourar a largura */
@media (max-width:430px){
  .hdr{padding-left:12px;padding-right:10px;}
  .hdr-brand{gap:8px;min-width:0;}
  .hdr-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hdr-nome{display:none;}
}