/* ==================================================================
   Casa do Mac · Gestão

   A régua visual: off-white de papel, preto forte na tipografia e UM
   acento — o verde-limão — gasto só onde importa. Nada de azul em
   tudo: azul em tudo é o que dá cara de sistema genérico.

   O limão nunca é texto sobre branco (não lê). Ele é FUNDO, com
   preto por cima: botão principal, item ativo do menu, a barra que
   está em foco, o número que você veio olhar.

   As cores de estado — atrasado, em dia, aviso — são outra família,
   de propósito. Se o limão fosse "ok", ele brigaria com o verde.
   ================================================================== */
:root{
  /* papel e tinta */
  /* superfícies suaves: fundo de aviso, de destaque, de bloco citado.
     São token porque no escuro precisam virar escuro — hex fixo aqui foi
     a causa de todo texto sumido no tema escuro. */
  --fundo:#f2f2ef; --papel:#fff; --papel-2:#fafaf8;
  --tinta:#101010; --tinta-2:#5c5c58; --tinta-3:#9b9b96;
  --borda:#e5e5e0; --borda-forte:#d2d2cb;
  --suave:#f4f4f1; --suave-2:#ededea; --trilho:#ececE7; --barra-vazia:#e2e2dd;

  /* ---- família de tons ----
     Cada etapa do ciclo do aparelho ganha um tom, e o tom é sempre o mesmo
     em toda a tela: o cartão do painel, a coluna do kanban e a faixa da
     agenda falam a mesma cor. Não é enfeite — é como o olho acha a coisa
     sem ler. Os tons são claros de propósito: o número por cima é preto,
     e o preto é que carrega a informação. */
  --t-lima:#eaf5c8;   --t-lima-f:#5d7307;
  --t-ceu:#dceaf6;    --t-ceu-f:#1f5578;
  --t-menta:#d9f0e2;  --t-menta-f:#166b46;
  --t-pessego:#fbe3d2; --t-pessego-f:#8a4718;
  --t-lilas:#e6e1f7;  --t-lilas-f:#4a3a8c;
  --t-areia:#f3ecdb;  --t-areia-f:#79601f;
  --t-rosa:#fadfe4;   --t-rosa-f:#8f2740;

  /* O acento, gasto com parcimônia. Trocável em Configurações — cada cor
     traz junto a tinta que se lê por cima dela: limão pede preto, azul
     pede branco. Sem esse par, o botão principal fica ilegível. */
  --acento:#d4f23d; --acento-forte:#c2e024; --acento-tenue:#f4fbd2; --acento-tinta:#101010;

  /* segunda voz, para o que é contexto e não ação */
  --brim:#8ab0d9; --brim-tenue:#eaf1f9;

  /* estados: família própria, mais sóbria que o acento */
  --verde:#2f8f63; --verde-tenue:#e8f4ee;
  --vermelho:#cf4040; --vermelho-tenue:#fceded;
  --ambar:#d18b1f; --ambar-tenue:#fdf4e3;

  /* o azul some do sistema; fica só onde o navegador exige um link */
  --azul:#2f6fd0; --azul-escuro:#1f55a8;

  --sombra:0 1px 2px rgba(16,16,16,.04), 0 8px 24px -12px rgba(16,16,16,.14);
  --sombra-alta:0 16px 48px -16px rgba(16,16,16,.28);
  --raio:12px; --raio-p:8px;

  --ui:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Outfit',var(--ui);
  --dado:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 var(--ui);letter-spacing:-.005em;
  color:var(--tinta);background:var(--fundo);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--borda-forte)}
a:hover{border-bottom-color:var(--tinta)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
.num,td.num,th.num{font-variant-numeric:tabular-nums}

/* ---- login ---- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--fundo)}
.login form{background:var(--papel);padding:36px;border-radius:18px;width:100%;max-width:390px;
  border:1px solid var(--borda);box-shadow:var(--sombra-alta)}
.login h1{margin:0 0 4px;font-size:24px;font-weight:600}
.login p{margin:0 0 26px;color:var(--tinta-3)}

/* ---- layout ----
   A barra lateral é clara, como o resto. Barra escura corta a tela em dois
   ambientes e a loja passa o dia inteiro olhando para ela. O que marca onde
   você está é o limão, não o contraste de fundo. */
.layout{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.lateral{background:var(--papel);color:var(--tinta-2);padding:20px 12px;
  display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--borda);
  height:100vh;position:sticky;top:0;overflow:hidden}
.marca{color:var(--tinta);font-family:var(--display);font-weight:600;font-size:17px;
  padding:4px 10px 18px;letter-spacing:-.02em}
.marca small{display:block;font-family:var(--ui);font-weight:600;color:var(--tinta-3);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.lateral a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--raio-p);
  color:var(--tinta-2);font-weight:500;font-size:13.5px;white-space:nowrap;border:0;
  transition:background .12s,color .12s}
.lateral a:hover{background:var(--fundo);color:var(--tinta)}
/* o item ativo é o único limão da barra — é onde você está */
.lateral a.ativo{background:var(--acento);color:var(--acento-tinta);font-weight:600}
.lateral .rodape{margin-top:auto;border-top:1px solid var(--borda);padding-top:14px;
  font-size:12px;color:var(--tinta-3)}
/* min-width:0 é o que segura a tabela larga dentro do .rolagem — sem isso
   a coluna 1fr da grade cresce com o conteúdo e a página inteira rola. */
.conteudo{padding:26px 30px 70px;max-width:1440px;min-width:0;overflow-x:hidden}

.topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.topo h1{margin:0;font-size:26px;font-weight:600;flex:1;letter-spacing:-.025em}

/* ---- componentes ---- */
.cartao{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra)}
.cartao .cab{padding:14px 18px;border-bottom:1px solid var(--borda);font-weight:600;
  display:flex;gap:10px;align-items:center;font-size:14px}
.cartao .corpo{padding:18px}
.grade{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.indicador{padding:18px 20px}
.indicador b{display:block;font-family:var(--display);font-size:34px;font-weight:500;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.indicador span{display:block;color:var(--tinta-3);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:600;margin-top:8px}
.indicador em{font-style:normal;font-size:12px;color:var(--vermelho);font-weight:600}

table{width:100%;border-collapse:collapse;background:var(--papel)}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-3);
  font-weight:700;padding:11px 14px;border-bottom:1px solid var(--borda);white-space:nowrap;background:var(--papel-2)}
td{padding:12px 14px;border-bottom:1px solid var(--borda);vertical-align:middle}
tbody tr:hover{background:var(--acento-tenue);cursor:pointer}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.vazio{padding:36px;text-align:center;color:var(--tinta-3)}

/* Etiqueta de estado: retângulo de canto suave, como as pílulas da referência.
   Redonda demais vira balãozinho e some no meio da tabela. */
.etiqueta{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:6px;
  font-size:11.5px;font-weight:600;letter-spacing:-.005em;
  background:var(--suave-2);color:var(--tinta-2);white-space:nowrap}
.ponto{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

label{display:block;font-size:11px;font-weight:700;color:var(--tinta-2);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.07em}
.campo{margin-bottom:14px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--borda-forte);
  border-radius:var(--raio-p);background:var(--papel)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:0;border-color:var(--tinta)}
input::placeholder,textarea::placeholder{color:var(--tinta-3)}
textarea{min-height:72px;resize:vertical}
.linha{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* O botão principal é limão com texto preto — é o único lugar da tela
   que grita, e por isso só pode haver um por área. */
.botao{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--raio-p);
  border:1px solid transparent;background:var(--acento);color:var(--acento-tinta);
  font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background .12s,transform .06s}
.botao:hover{background:var(--acento-forte)}
.botao:active{transform:translateY(1px)}
.botao.claro{background:var(--papel);color:var(--tinta);border-color:var(--borda-forte)}
.botao.claro:hover{background:var(--papel-2);border-color:var(--tinta-3)}
.botao.verde{background:var(--verde);color:#fff}
.botao.vermelho,.botao.perigo{background:var(--vermelho);color:#fff}
.botao:disabled{opacity:.45;cursor:not-allowed}
.botao.pequeno{padding:5px 11px;font-size:12px}

.barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.barra input,.barra select{width:auto;min-width:150px}

.modal{position:fixed;inset:0;background:rgba(16,16,16,.5);display:grid;place-items:start center;
  padding:40px 16px;overflow:auto;z-index:50;backdrop-filter:blur(2px)}
.modal .caixa{background:var(--papel);border-radius:16px;width:100%;max-width:920px;box-shadow:var(--sombra-alta)}
.modal .cab{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--borda)}
.modal .cab h2{margin:0;font-size:19px;font-weight:600;flex:1}
.modal .corpo{padding:22px}
.modal .pe{padding:15px 22px;border-top:1px solid var(--borda);display:flex;gap:8px;
  justify-content:flex-end;background:var(--papel-2);border-radius:0 0 16px 16px}
.fechar{background:none;border:none;font-size:22px;cursor:pointer;color:var(--tinta-3);line-height:1}

.aviso{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-weight:500}
.aviso.erro{background:var(--vermelho-tenue);color:#8f2626;border:1px solid #f2cfcf}
.aviso.ok{background:var(--verde-tenue);color:#1f6b49;border:1px solid #c9e6d7}

.recado{position:fixed;right:20px;bottom:20px;background:var(--tinta);color:#fff;padding:13px 18px;
  border-radius:var(--raio-p);box-shadow:var(--sombra-alta);z-index:100;max-width:420px;font-weight:500}
.recado.erro{background:var(--vermelho)}

.abas{display:flex;gap:4px;border-bottom:1px solid var(--borda);margin-bottom:16px;overflow:auto}
.abas button{background:none;border:none;padding:10px 15px;border-bottom:2px solid transparent;cursor:pointer;
  font-weight:600;font-size:13.5px;color:var(--tinta-3);white-space:nowrap}
.abas button:hover{color:var(--tinta-2)}
.abas button.ativo,.abas button.ativa{color:var(--tinta);border-color:var(--acento);border-bottom-width:3px}

.historico{list-style:none;padding:0;margin:0}
.historico li{padding:8px 0 8px 18px;border-left:2px solid var(--borda);position:relative}
.historico li::before{content:"";position:absolute;left:-5px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--tinta-3)}
.historico small{color:var(--tinta-3)}

.pdv{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
@media(max-width:900px){ .pdv{grid-template-columns:1fr} }
.rolagem{overflow-x:auto}

/* abas da tela de configurações */
.abas button.ativa{color:var(--azul);border-color:var(--azul)}

/* ações na linha da listagem */
.acoes-linha{display:flex;gap:4px;align-items:center}
.acao{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;
  color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0}
.acao:hover{filter:brightness(1.08)}
/* Os botõezinhos da linha viram cinza de repouso e só ganham cor no hover:
   trinta linhas com quatro botões coloridos cada é uma parede de confete. */
.acao{background:var(--suave);color:var(--tinta-2);border:1px solid var(--borda)}
.acao:hover{filter:none;border-color:var(--tinta-3)}
.acao.azul:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.acao.laranja:hover{background:var(--ambar);color:#fff;border-color:var(--ambar)}
.acao.vermelho:hover{background:var(--vermelho);color:#fff;border-color:var(--vermelho)}
.acao.verde:hover{background:var(--acento);color:var(--acento-tinta);border-color:var(--acento-forte)}
.botao.perigo:hover{background:#b03434}

/* menu suspenso das ações */
.menu{position:fixed;z-index:120;background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra-alta);padding:6px;max-height:80vh;overflow:auto}
.menu-item{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;text-align:left;
  padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13.5px;color:var(--tinta)}
.menu-item:hover{background:var(--acento-tenue)}
.menu-item.perigo{color:var(--vermelho)}
.menu-icone{width:16px;display:inline-flex;justify-content:center;flex:0 0 16px;font-size:13px}
.menu-seta{color:var(--tinta-3);font-size:12px}
.menu-linha{height:1px;background:var(--borda);margin:4px 6px}
.menu-sub .menu-item{padding-left:30px;font-size:13px;color:var(--tinta-2,#475569)}
.menu-sub .menu-item::before{content:"»";position:absolute;margin-left:-16px;color:var(--tinta-3)}
.menu-sub .menu-item{position:relative}

/* ---- central de alertas ---- */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:12px;align-items:start}
@media(max-width:1100px){.kanban{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kanban{grid-template-columns:1fr}}

.coluna-alertas{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra);display:flex;flex-direction:column;
  max-height:calc(100vh - 200px);min-height:150px}
.coluna-cab{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--borda);
  font-weight:600;font-size:13px}
.coluna-cab .ponto{width:9px;height:9px}
.coluna-corpo{padding:10px;display:flex;flex-direction:column;gap:9px;overflow-y:auto}

.alerta{border:1px solid var(--borda);border-left:3px solid var(--tinta-3);border-radius:10px;
  padding:12px 13px;background:var(--papel);transition:box-shadow .12s,border-color .12s}
.alerta:hover{box-shadow:var(--sombra);border-color:var(--borda-forte)}
.alerta.lido{opacity:.62}
.alerta-topo{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.alerta-tipo{font-size:11.5px;font-weight:600;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.3px}
.alerta-titulo{font-weight:600;font-size:13.5px;line-height:1.35}
.alerta-detalhe{font-size:12.5px;color:var(--tinta-2);margin-top:3px;line-height:1.45}
.alerta-mensagem{margin-top:7px;padding:7px 9px;background:var(--verde-tenue);
  color:var(--tinta);border-radius:7px;
  font-size:12.5px;white-space:pre-wrap;line-height:1.45}
.alerta-pe{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:8px}
.alerta-acoes{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px;padding-top:8px;border-top:1px solid var(--borda)}

.feed{max-height:420px;overflow-y:auto}
.feed-item{padding:11px 16px;border-bottom:1px solid var(--borda)}
.feed-item:last-child{border-bottom:0}
.feed-topo{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:13px}
.feed-msg{margin-top:4px;font-size:13px;color:var(--tinta-2);white-space:pre-wrap;line-height:1.45}

/* ---------- kanban da lista de ordens de serviço ----------
   Uma coluna por situação, com o total de cada uma no alto.
   Rola na horizontal quando há muitas situações, que é o normal
   aqui: a Casa do Mac trabalha com 23 delas.                   */
.kanban-os{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.coluna-os{flex:0 0 280px;background:var(--papel);border:1px solid var(--borda);
  border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column;max-height:72vh}
.coluna-os-cab{padding:12px 14px;background:var(--papel-2);border-bottom:2px solid var(--borda)}
.coluna-os-corpo{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
.cartao-os{background:var(--papel);border:1px solid var(--borda);border-radius:10px;padding:11px 13px;
  cursor:pointer;transition:box-shadow .12s,transform .12s,border-color .12s}
.cartao-os:hover{box-shadow:var(--sombra);transform:translateY(-1px);border-color:var(--borda-forte)}

/* fichinhas de filtro ativo */
.etiqueta button:hover{opacity:.6}

@media (max-width:760px){
  .coluna-os{flex-basis:86vw}
}

/* ---------- painel das ordens de serviço ---------- */
.grade-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:12px}
/* Cartão de número: fundo claro e uma faixa fina na cor do estado.
   Cinco blocos sólidos coloridos lado a lado viram semáforo de posto. */
.cartao-numero{border-radius:10px;padding:16px 18px;position:relative;overflow:hidden;
  background:var(--papel)!important;color:var(--tinta);border:1px solid var(--borda);
  transition:transform .12s,box-shadow .12s}
.cartao-numero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor}
.cartao-numero:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
/* O número é preto sempre. Cinco números coloridos lado a lado viram
   semáforo; a cor do estado fica só na faixa da lateral. */
.cartao-numero-valor{font-family:var(--display);font-size:36px;font-weight:500;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--tinta)}
.cartao-numero-rotulo{font-size:11px;margin-top:8px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--tinta-2)}
.cartao-numero-detalhe{font-size:11.5px;margin-top:3px;color:var(--tinta-3)}

.barra-empilhada{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--trilho)}
.legenda-situacoes{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}
.legenda-item{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;padding:2px 0}
.legenda-item:hover{text-decoration:underline}

.grafico-barras{display:flex;gap:10px;align-items:flex-end;height:190px;position:relative;padding-top:18px}
.linha-media{position:absolute;left:0;right:0;border-top:1px dashed #94a3b8;z-index:1}
.barra-mes{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
/* Barras cinza, e a maior em limão — é o mês que você veio olhar. */
.barra-corpo{width:100%;max-width:56px;background:var(--barra-vazia);border-radius:5px 5px 0 0;z-index:2;
  transition:background .12s}
.barra-mes:hover .barra-corpo,.barra-mes.maior .barra-corpo{background:var(--acento)}
.barra-valor{font-size:10px;color:var(--tinta-3);margin-bottom:4px;white-space:nowrap}
.barra-rotulo{font-size:11px;color:var(--tinta-3);margin-top:6px;white-space:nowrap}

.linha-tecnico{display:flex;align-items:center;gap:10px;padding:5px 0}
.nome-tecnico{flex:0 0 116px;font-size:12px;text-align:right;color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trilho-tecnico{flex:1;background:#ececE7;border-radius:999px;height:16px;overflow:hidden}
.barra-tecnico{height:100%;background:var(--acento);border-radius:999px}
.valor-tecnico{flex:0 0 96px;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .nome-tecnico{flex-basis:80px}
  .valor-tecnico{flex-basis:78px}
}


/* ---------- acabamento ---------- */
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
::selection{background:var(--acento);color:var(--acento-tinta)}
.feed-item,.alerta{border-radius:10px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ---------- ajustes de densidade ----------
   A barra de cima da lista tem muita coisa; apertar um pouco evita que o
   botão principal caia sozinho para a linha de baixo. */
.barra .botao{padding:8px 13px}
.barra input,.barra select{min-width:130px;padding:8px 11px}
.barra .botao.claro{font-weight:500}

/* Os ícones de ação da linha precisam de contraste para serem clicáveis. */
.acao{filter:grayscale(.35)}
.acao:hover{filter:none}

/* Colunas que não devem quebrar */
th{white-space:nowrap}


/* ==================================================================
   Temas — escolhidos em Configurações, guardados no navegador de quem
   escolheu. Cada pessoa da loja vê do jeito que prefere.

   Regra de cada acento: a cor e a tinta que se lê por cima dela andam
   juntas. Limão e âmbar são claros, então pedem preto; azul, roxo,
   verde e vinho são escuros e pedem branco.
   ================================================================== */
:root[data-cor="limao"]{--acento:#d4f23d;--acento-forte:#c2e024;--acento-tenue:#f4fbd2;--acento-tinta:#101010}
:root[data-cor="azul"]{--acento:#2f6fd0;--acento-forte:#2459ac;--acento-tenue:#e7eefb;--acento-tinta:#fff}
:root[data-cor="verde"]{--acento:#1f8a5c;--acento-forte:#176e49;--acento-tenue:#e5f3ec;--acento-tinta:#fff}
:root[data-cor="ambar"]{--acento:#f0a92b;--acento-forte:#d8941c;--acento-tenue:#fdf3e0;--acento-tinta:#101010}
:root[data-cor="roxo"]{--acento:#6d4ad9;--acento-forte:#5a3ab8;--acento-tenue:#eeeafb;--acento-tinta:#fff}
:root[data-cor="vinho"]{--acento:#a6283f;--acento-forte:#871f33;--acento-tenue:#f8e8eb;--acento-tinta:#fff}
:root[data-cor="grafite"]{--acento:#2e2e2c;--acento-forte:#151514;--acento-tenue:#ebebe7;--acento-tinta:#fff}

/* ---- modo escuro ---- */
:root[data-tema="escuro"]{
  /* O acento-tenue nasce da cor escolhida misturada com o fundo escuro.
     Sem isto ele ficava claro (vem do bloco data-cor) e o texto claro por
     cima sumia — foi o que deixou a última notícia e o balão do WhatsApp
     ilegíveis no escuro. */
  --acento-tenue:color-mix(in srgb, var(--acento) 20%, #121312);
  --fundo:#121312; --papel:#1b1c1a; --papel-2:#212220;
  --tinta:#ecece8; --tinta-2:#a9a9a2; --tinta-3:#75756e;
  --borda:#2c2d2a; --borda-forte:#3d3e3a;
  --suave:#202120; --suave-2:#262724; --trilho:#262724; --barra-vazia:#2e2f2c;
  --t-lima:#242a12;   --t-lima-f:#b9d45c;
  --t-ceu:#15222c;    --t-ceu-f:#7fb4d8;
  --t-menta:#132620;  --t-menta-f:#63c095;
  --t-pessego:#2b1c12; --t-pessego-f:#dc9a6a;
  --t-lilas:#1e1a2e;  --t-lilas-f:#a294dd;
  --t-areia:#262117;  --t-areia-f:#c9ae62;
  --t-rosa:#2a161b;   --t-rosa-f:#dd8a9d;
  --brim-tenue:#1a2028;
  --verde-tenue:#16251d; --vermelho-tenue:#2a1719; --ambar-tenue:#2a2113;
  --verde:#4caa7d; --vermelho:#e06464; --ambar:#e0a144;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --sombra-alta:0 16px 48px -16px rgba(0,0,0,.8);
}
:root[data-tema="escuro"] .lateral{background:#0e0f0e;border-right-color:#242522}
:root[data-tema="escuro"] .login{background:#0e0f0e}
/* ...mas a barra em destaque continua sendo a do acento, no claro e no escuro */
:root[data-tema="escuro"] .barra-mes.maior .barra-corpo,
:root[data-tema="escuro"] .barra-mes:hover .barra-corpo{background:var(--acento)}
:root[data-tema="escuro"] .modal{background:rgba(0,0,0,.66)}
:root[data-tema="escuro"] tbody tr:hover{background:#212220}
:root[data-tema="escuro"] .recado{background:var(--papel);border:1px solid var(--borda-forte)}
:root[data-tema="escuro"] img{opacity:.92}

/* ==================================================================
   Barra lateral: os itens agrupados pelo ciclo do aparelho.
   O título do grupo é pequeno e cinza — ele orienta, não compete.
   ================================================================== */
.lateral .links{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;min-height:0}
.grupo-menu{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.grupo-titulo{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);padding:4px 12px 4px}

/* claro/escuro: um botão só, no pé da lateral */
.lateral .tema{padding:10px 4px 4px;margin:0;display:block}
.troca-tema{background:none;border:1px solid var(--borda-forte);border-radius:var(--raio-p);
  width:100%;padding:8px 12px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--tinta-2);
  display:inline-flex;align-items:center;gap:8px;justify-content:flex-start}
.troca-tema:hover{border-color:var(--tinta-3);color:var(--tinta);background:var(--fundo)}
/* meia-lua desenhada, não glifo: ◐ não existe em toda fonte e vira quadradinho */
.meia-lua{width:13px;height:13px;border-radius:50%;flex:none;border:1.5px solid currentColor;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.meia-lua.cheia{background:linear-gradient(90deg,transparent 50%,currentColor 50%)}
.botao .meia-lua{border-color:currentColor}

/* paleta, em Configurações › Temas */
.paleta{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
.carta-cor{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;
  background:var(--papel);border:1px solid var(--borda-forte);border-radius:var(--raio-p);
  font-weight:600;font-size:13.5px;color:var(--tinta);text-align:left}
.carta-cor:hover{border-color:var(--tinta-3)}
.carta-cor.escolhida{border-color:var(--tinta);border-width:2px;padding:10px 12px}
.amostra{width:22px;height:22px;border-radius:6px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}

/* ==================================================================
   Celular. Aqui nada fica na horizontal: a barra lateral vira gaveta
   que entra pela esquerda, empilhada, com os mesmos grupos do ciclo.
   O que fica fixo no alto é só o que se usa o tempo todo — o botão do
   menu, onde você está, e a loja.
   ================================================================== */
.barra-celular{display:none}
.veu{display:none}
.seletor-loja{width:auto}
.loja-na-gaveta{display:none}

@media(max-width:900px){
  .layout{grid-template-columns:1fr;display:block}

  .barra-celular{
    display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;
    background:var(--papel);border-bottom:1px solid var(--borda);padding:9px 12px;
    box-shadow:0 1px 0 rgba(16,16,16,.03)}
  .titulo-celular{flex:1;font-family:var(--display);font-weight:600;font-size:16px;
    letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .seletor-loja.compacto{max-width:42vw;padding:7px 9px;font-size:12.5px;font-weight:600;
    border-radius:var(--raio-p)}
  .seletor-loja.no-topo{display:none}

  .hamburguer{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:none;
    width:38px;height:38px;padding:0 9px;background:var(--papel);cursor:pointer;
    border:1px solid var(--borda-forte);border-radius:var(--raio-p)}
  .hamburguer span{display:block;height:2px;background:var(--tinta);border-radius:2px}
  .hamburguer:active{background:var(--fundo)}

  /* a gaveta */
  .lateral{
    position:fixed;top:0;left:0;bottom:0;width:270px;max-width:84vw;z-index:60;
    flex-direction:column;overflow-y:auto;padding:18px 12px 20px;
    border-right:1px solid var(--borda);box-shadow:var(--sombra-alta);
    transform:translateX(-102%);transition:transform .2s ease}
  :root.gaveta-aberta .lateral{transform:translateX(0)}
  .lateral .marca,.lateral .rodape{display:block}
  /* no celular a gaveta rola inteira; nada de duas rolagens embutidas */
  .lateral .links{overflow:visible;flex:0 0 auto;min-height:auto}
  .lateral .rodape{margin-top:18px}
  .lateral a{padding:11px 12px;font-size:14.5px}
  .grupo-menu{margin-bottom:14px}

  .loja-na-gaveta{display:block;margin:0 0 16px;padding:0 2px}
  .loja-na-gaveta label{margin-bottom:5px}
  .seletor-loja.cheio{width:100%}

  .veu{display:block;position:fixed;inset:0;z-index:50;background:rgba(16,16,16,.45);
    opacity:0;pointer-events:none;transition:opacity .2s}
  :root.gaveta-aberta .veu{opacity:1;pointer-events:auto}
  :root.gaveta-aberta{overflow:hidden}

  .conteudo{padding:16px 14px 80px;max-width:none}
  /* no celular o título já está na barra de cima */
  .topo h1{display:none}
  .topo{margin-bottom:14px;gap:8px}

  /* nada de rolagem lateral de menu: tudo empilha */
  .barra{gap:7px}
  .barra input,.barra select{min-width:0;flex:1 1 140px}
  .barra .botao{flex:1 1 auto;justify-content:center}
  .grade{gap:10px}
  .g4,.g5{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .indicador{padding:14px 15px}
  .indicador b{font-size:27px}
  .modal{padding:0}
  .modal .caixa{border-radius:0;min-height:100vh}
  .modal .pe{border-radius:0;position:sticky;bottom:0}
  .cartao .corpo{padding:14px}
  .linha{grid-template-columns:1fr}
  .kanban-os{gap:10px}
  .coluna-os{flex-basis:82vw;max-height:none}
  .grade-numeros{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;padding:10px}
  .cartao-numero-valor{font-size:28px}
  table{font-size:13px}
  td,th{padding:10px 11px}
}

/* ------------------------------------------------------------------
   Tabela no celular: cada linha vira um cartão empilhado, com o nome
   da coluna ao lado do valor. Ninguém arrasta tabela de doze colunas
   para o lado num telefone — some tudo o que importa.
   ------------------------------------------------------------------ */
@media(max-width:700px){
  table.empilha thead{display:none}
  table.empilha,table.empilha tbody,table.empilha tr,table.empilha td{display:block;width:100%}
  table.empilha tr{background:var(--papel);border:1px solid var(--borda);border-radius:11px;
    margin-bottom:9px;padding:6px 2px;box-shadow:var(--sombra)}
  table.empilha tr:hover{background:var(--papel)}
  table.empilha td{border:0;padding:5px 13px;display:flex;gap:12px;align-items:baseline;
    text-align:left;white-space:normal}
  table.empilha td[data-rotulo]::before{content:attr(data-rotulo);flex:0 0 38%;
    font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--tinta-3);line-height:1.6}
  table.empilha td.num{text-align:left}
  /* o valor pode ser longo (nome de situação, equipamento): quebra em vez
     de empurrar a página para o lado */
  table.empilha td>*{min-width:0}
  table.empilha td{overflow-wrap:anywhere}
  table.empilha .etiqueta{white-space:normal;text-align:left}
  table.empilha td.acoes-td{padding-top:9px;margin-top:5px;border-top:1px solid var(--borda)}
  table.empilha .acoes-linha{flex-wrap:wrap}
  /* o cartão-mãe some: quem é cartão agora é cada linha */
  .cartao.rolagem:has(table.empilha){border:0;background:none;box-shadow:none;overflow:visible}
}

/* telas bem estreitas: o essencial continua legível */
@media(max-width:420px){
  .titulo-celular{font-size:15px}
  .seletor-loja.compacto{max-width:36vw}
  .grade-numeros{grid-template-columns:1fr 1fr}
}


/* ==================================================================
   Componentes novos — a régua veio das referências que o Gilson mandou
   (Education Hub e LearnHub), traduzida para a nossa paleta.

   O que foi aproveitado: cartão em tom suave com o número grande e preto
   por cima, distintivo redondo com o ícone, pílula de alternância, e a
   grade de horas da agenda com a linha do agora.

   O que NÃO foi aproveitado: a paleta pastel inteira como decoração. Ali
   a cor é enfeite; aqui cada tom significa uma etapa do ciclo, e é sempre
   o mesmo tom para a mesma etapa em toda a tela.
   ================================================================== */

/* ---- cartão de número, no estilo da referência ---- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tile{position:relative;border-radius:18px;padding:18px 20px 16px;background:var(--papel);
  border:1px solid var(--borda);overflow:hidden;display:flex;flex-direction:column;gap:2px;
  min-height:128px;transition:transform .14s,box-shadow .14s}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.tile.clicavel{cursor:pointer}
.tile .selo-topo{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:8px}
.tile .valor{font-family:var(--display);font-size:40px;font-weight:500;line-height:1;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--tinta)}
.tile .nome{font-weight:600;font-size:14.5px;line-height:1.25;margin-top:7px;color:var(--tinta)}
.tile .pe{margin-top:auto;padding-top:9px;font-size:12px;color:var(--tinta-2);display:flex;
  align-items:center;gap:5px}
/* o distintivo redondo do canto, como nos cartões da referência */
.tile .marca-tile{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;background:rgba(255,255,255,.55)}
:root[data-tema="escuro"] .tile .marca-tile{background:rgba(255,255,255,.08)}

.tile.lima{background:var(--t-lima);border-color:transparent}
.tile.ceu{background:var(--t-ceu);border-color:transparent}
.tile.menta{background:var(--t-menta);border-color:transparent}
.tile.pessego{background:var(--t-pessego);border-color:transparent}
.tile.lilas{background:var(--t-lilas);border-color:transparent}
.tile.areia{background:var(--t-areia);border-color:transparent}
.tile.rosa{background:var(--t-rosa);border-color:transparent}
.tile.lima .pe{color:var(--t-lima-f)}
.tile.ceu .pe{color:var(--t-ceu-f)}
.tile.menta .pe{color:var(--t-menta-f)}
.tile.pessego .pe{color:var(--t-pessego-f)}
.tile.lilas .pe{color:var(--t-lilas-f)}
.tile.areia .pe{color:var(--t-areia-f)}
.tile.rosa .pe{color:var(--t-rosa-f)}
/* o tile escuro, para o resumo do dia — um só por tela */
.tile.tinta{background:var(--tinta);border-color:transparent}
.tile.tinta .valor,.tile.tinta .nome{color:var(--papel)}
.tile.tinta .selo-topo,.tile.tinta .pe{color:color-mix(in srgb,var(--papel) 66%,transparent)}
.tile.tinta .marca-tile{background:rgba(255,255,255,.12)}

/* barra de progresso dentro do tile escuro, como o "8/12" da referência */
.progresso{height:9px;border-radius:999px;background:color-mix(in srgb,var(--papel) 22%,transparent);
  overflow:hidden;margin-top:10px}
.progresso i{display:block;height:100%;border-radius:999px;background:var(--acento)}

/* ---- pílula de alternância (Dia | Semana) ---- */
.pilulas{display:inline-flex;background:var(--suave-2);border-radius:999px;padding:3px;gap:2px}
.pilulas button{border:0;background:none;padding:7px 15px;border-radius:999px;cursor:pointer;
  font-weight:600;font-size:13px;color:var(--tinta-2);white-space:nowrap}
.pilulas button:hover{color:var(--tinta)}
.pilulas button.ativa{background:var(--tinta);color:var(--papel)}

/* ---- agenda: grade de horas ----
   Uma coluna de horas à esquerda e as OS como cartões com faixa colorida.
   A linha vermelha fina é agora. */
.agenda{display:grid;grid-template-columns:58px 1fr;background:var(--papel);
  border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden}
.agenda-horas{border-right:1px solid var(--borda);background:var(--papel-2)}
.agenda-hora{height:64px;padding:0 10px;font-size:11px;color:var(--tinta-3);text-align:right;
  font-variant-numeric:tabular-nums;position:relative;top:-7px}
.agenda-pista{position:relative}
.agenda-linha{height:64px;border-bottom:1px solid var(--borda)}
.agenda-linha:nth-child(odd){background:var(--papel-2)}
.agora{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--vermelho);z-index:3}
.agora::before{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:9px;border-radius:50%;
  background:var(--vermelho)}
.agora span{position:absolute;right:8px;top:-9px;background:var(--vermelho);color:#fff;
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px}

.evento{position:absolute;left:8px;right:10px;border-radius:10px;padding:7px 11px 7px 13px;
  background:var(--papel);border:1px solid var(--borda);cursor:pointer;overflow:hidden;
  box-shadow:var(--sombra);transition:transform .1s}
.evento:hover{transform:translateX(2px)}
.evento::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor}
.evento .quando{font-size:10.5px;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.evento .quem{font-weight:600;font-size:13.5px;color:var(--tinta);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evento .oque{font-size:12px;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evento.lima{background:var(--t-lima);border-color:transparent;color:var(--t-lima-f)}
.evento.ceu{background:var(--t-ceu);border-color:transparent;color:var(--t-ceu-f)}
.evento.menta{background:var(--t-menta);border-color:transparent;color:var(--t-menta-f)}
.evento.pessego{background:var(--t-pessego);border-color:transparent;color:var(--t-pessego-f)}
.evento.lilas{background:var(--t-lilas);border-color:transparent;color:var(--t-lilas-f)}
.evento.rosa{background:var(--t-rosa);border-color:transparent;color:var(--t-rosa-f)}

/* semana: sete colunas de dia */
.semana{display:grid;grid-template-columns:52px repeat(var(--dias,7),minmax(0,1fr));
  background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden}
.dia-cab{padding:11px 8px;text-align:center;border-bottom:1px solid var(--borda);
  border-left:1px solid var(--borda);background:var(--papel-2)}
.dia-cab b{display:block;font-family:var(--display);font-size:19px;font-weight:600;line-height:1}
.dia-cab span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.dia-cab.hoje{background:var(--acento)}
.dia-cab.hoje b,.dia-cab.hoje span{color:var(--acento-tinta)}
.dia-coluna{border-left:1px solid var(--borda);min-height:120px;padding:8px 6px;
  display:flex;flex-direction:column;gap:6px}
.dia-coluna.fds{background:var(--papel-2)}
.ficha{border-radius:9px;padding:7px 9px;cursor:pointer;font-size:12px;border-left:3px solid currentColor}
.ficha b{display:block;font-size:12.5px;color:var(--tinta);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ficha small{color:var(--tinta-2);font-size:11px}
.ficha.lima{background:var(--t-lima);color:var(--t-lima-f)}
.ficha.ceu{background:var(--t-ceu);color:var(--t-ceu-f)}
.ficha.menta{background:var(--t-menta);color:var(--t-menta-f)}
.ficha.pessego{background:var(--t-pessego);color:var(--t-pessego-f)}
.ficha.lilas{background:var(--t-lilas);color:var(--t-lilas-f)}
.ficha.rosa{background:var(--t-rosa);color:var(--t-rosa-f)}

/* ---- linha do tempo da bancada ---- */
.trilha{display:flex;flex-direction:column;gap:10px}
.parada{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start}
.parada-quando{text-align:right;padding-top:14px}
.parada-quando b{display:block;font-family:var(--display);font-size:20px;font-weight:600;
  line-height:1;letter-spacing:-.03em}
.parada-quando span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.parada-cartao{border-radius:16px;padding:15px 17px;border:1px solid var(--borda);
  background:var(--papel);border-left:4px solid currentColor;color:var(--tinta-3)}
.parada-cartao.no-prazo{color:var(--verde)}
.parada-cartao.apertado{color:var(--ambar)}
.parada-cartao.estourado{color:var(--vermelho)}

/* ---- distintivo redondo com ícone (linha de KPI da referência) ---- */
.distintivo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:16px;background:var(--suave-2)}

/* ---- anel de progresso ---- */
.anel{--pct:0;width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--acento) calc(var(--pct)*1%),var(--trilho) 0)}
.anel i{width:32px;height:32px;border-radius:50%;background:var(--papel);display:grid;
  place-items:center;font-style:normal;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}

@media(max-width:760px){
  .tile{min-height:112px;padding:15px 16px 14px}
  .tile .valor{font-size:32px}
  .agenda{grid-template-columns:46px 1fr}
  .semana{grid-template-columns:42px repeat(var(--dias,7),minmax(64px,1fr));overflow-x:auto}
  .parada{grid-template-columns:1fr;gap:4px}
  .parada-quando{text-align:left;padding-top:0;display:flex;gap:8px;align-items:baseline}
}

/* A etiqueta de situação pode ser longa ("PEÇA DISPONÍVEL, AGUARDANDO
   CLIENTE"). Dentro do cartão estreito do alerta ela precisa quebrar,
   senão vaza por cima da coluna vizinha. */
.alerta .etiqueta,.coluna-alertas .etiqueta{white-space:normal;text-align:left;line-height:1.3}
.alerta{overflow:hidden}