:root {
  --fundo: #f4f5f7; --superficie: #ffffff; --superficie-2: #f7f8fa; --borda: #e3e5e9; --cabecalho: #f0f2f5;
  --texto: #1c1d21; --suave: #6b6f78; --fraco: #a3a7ae;
  --azul: #2f60d8; --azul-hover: #234cb3; --azul-claro: #eef3ff;
  --ok: #157f3b; --erro: #c62828; --pendente: #b06000; --roxo: #6d3fd1; --laranja: #c2410c;
  --atrasada-bg: #fde8e8; --atrasada-tx: #9b1c1c; --hoje-bg: #fff4d6; --hoje-tx: #7a4b00;
  --andamento-bg: #e8f0ff; --andamento-tx: #1e40af; --devolvida-bg: #eeeff1; --devolvida-tx: #6b6f78;
  --saida-bg: #efe8ff; --saida-tx: #5b21b6;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --raio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #17181b; --superficie: #1f2024; --superficie-2: #25262b; --borda: #34363c; --cabecalho: #2a2b30;
    --texto: #ececee; --suave: #a1a4ab; --fraco: #6c6f76;
    --azul: #5b8cff; --azul-hover: #7aa2ff; --azul-claro: #1f2a44;
    --ok: #4ade80; --erro: #f87171; --pendente: #fbbf24; --roxo: #a78bfa; --laranja: #fb923c;
    --atrasada-bg: #4c1d1d; --atrasada-tx: #fecaca; --hoje-bg: #4a3a12; --hoje-tx: #fde68a;
    --andamento-bg: #1e2a4a; --andamento-tx: #bfdbfe; --devolvida-bg: #2a2b30; --devolvida-tx: #a3a3a3;
    --saida-bg: #35275a; --saida-tx: #ddd6fe;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #17181b; --superficie: #1f2024; --superficie-2: #25262b; --borda: #34363c; --cabecalho: #2a2b30;
  --texto: #ececee; --suave: #a1a4ab; --fraco: #6c6f76;
  --azul: #5b8cff; --azul-hover: #7aa2ff; --azul-claro: #1f2a44;
  --ok: #4ade80; --erro: #f87171; --pendente: #fbbf24; --roxo: #a78bfa; --laranja: #fb923c;
  --atrasada-bg: #4c1d1d; --atrasada-tx: #fecaca; --hoje-bg: #4a3a12; --hoje-tx: #fde68a;
  --andamento-bg: #1e2a4a; --andamento-tx: #bfdbfe; --devolvida-bg: #2a2b30; --devolvida-tx: #a3a3a3;
  --saida-bg: #35275a; --saida-tx: #ddd6fe;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo); color: var(--texto);
  font: 14px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul); }
[hidden] { display: none !important; }

/* ---------- login */
.login {
  min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 20% 10%, var(--azul-claro), transparent 50%), var(--fundo);
}
.login form {
  width: 100%; max-width: 380px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; box-shadow: var(--sombra); padding: 28px;
}
.login img.logo { width: 220px; max-width: 75%; margin: 4px auto 18px; }
/* logo branca no tema escuro, preta no claro (fundo transparente nas duas) */
img.logo { display: block; }
img.logo-clara { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.logo-clara { display: block; }
  :root:not([data-theme="light"]) img.logo-escura { display: none; }
}
:root[data-theme="dark"] img.logo-clara { display: block; }
:root[data-theme="dark"] img.logo-escura { display: none; }
.login h1 { font-size: 18px; text-align: center; margin: 0 0 4px; }
.login p.sub { text-align: center; color: var(--suave); margin: 0 0 20px; font-size: 13px; }
.login .erro { color: var(--erro); min-height: 20px; font-size: 13px; margin: 8px 0 0; }
.login button { width: 100%; margin-top: 14px; padding: 10px; }

/* ---------- topo */
.topo {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 24px 8px; max-width: 1600px; margin: 0 auto;
}
.topo h1 { font-size: 22px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.marca img.logo { height: 22px; width: auto; }
.marca .separador { width: 1px; height: 26px; background: var(--borda); }
.topo .data { color: var(--suave); font-size: 13px; }
.topo .acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.usuario { color: var(--suave); font-size: 13px; }

.cartoes {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px;
  padding: 6px 24px 10px; max-width: 1600px; margin: 0 auto;
}
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 14px 12px; box-shadow: var(--sombra); text-align: left;
}
button.cartao { cursor: pointer; }
button.cartao:hover { border-color: var(--azul); }
.cartao b { display: block; font-size: 26px; font-weight: 650; line-height: 1.2; }
.cartao span { color: var(--suave); font-size: 12px; }

nav.abas {
  display: flex; gap: 2px; overflow-x: auto; padding: 0 24px; max-width: 1600px; margin: 0 auto;
  border-bottom: 1px solid var(--borda); scrollbar-width: thin;
}
nav.abas button {
  border: 0; background: none; padding: 10px 16px; cursor: pointer; color: var(--suave); font-weight: 600;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
nav.abas button:hover { color: var(--texto); }
nav.abas button.ativa { color: var(--azul); border-bottom-color: var(--azul); }

main { padding: 14px 24px 32px; max-width: 1600px; margin: 0 auto; }

/* ---------- controles */
.barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.barra .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn {
  border: 1px solid var(--borda); background: var(--superficie); border-radius: 8px; padding: 6px 12px;
  cursor: pointer; white-space: nowrap; box-shadow: var(--sombra);
}
.btn:hover { background: var(--superficie-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.primario:hover { background: var(--azul-hover); }
.btn.perigo { color: var(--erro); }
.btn.whats { background: #1fa855; border-color: #1fa855; color: #fff; }
.btn.whats:hover { background: #178a45; }
.btn.pequeno { padding: 3px 9px; font-size: 13px; }

input[type=text], input[type=password], input[type=date], input[type=number], input[type=tel], input:not([type]),
select, textarea {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; min-width: 0;
  border-bottom-width: 2px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); }
.busca { width: 260px; max-width: 100%; }
label.campo { display: grid; gap: 3px; font-size: 13px; color: var(--suave); }
label.campo > input, label.campo > select, label.campo > textarea, label.campo > div { color: var(--texto); }
.dica { color: var(--suave); font-size: 12px; }
.contagem { color: var(--suave); font-size: 12px; }

/* ---------- tabelas */
.tabela {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: auto; box-shadow: var(--sombra); max-height: calc(100vh - 290px); min-height: 160px;
}
.tabela.baixa { max-height: 340px; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--borda); }
th {
  position: sticky; top: 0; background: var(--cabecalho); font-weight: 600; font-size: 13px; cursor: pointer;
  user-select: none; z-index: 1;
}
th.ord::after { content: " ▲"; font-size: 10px; color: var(--suave); }
th.ord.desc::after { content: " ▼"; }
td.num, th.num { text-align: right; }
td.cen, th.cen { text-align: center; }
td.longo { white-space: normal; min-width: 260px; }
tbody tr { cursor: default; }
tbody tr:hover td { background: var(--superficie-2); }
tbody tr.sel td { background: var(--azul-claro) !important; }
tr.atrasada td { background: var(--atrasada-bg); color: var(--atrasada-tx); }
tr.hoje td { background: var(--hoje-bg); color: var(--hoje-tx); }
tr.devolvida td { color: var(--suave); }
tr.total td { font-weight: 700; background: var(--cabecalho); }
.vazio { padding: 26px; text-align: center; color: var(--suave); }
.t-ok { color: var(--ok); font-weight: 600; } .t-pendente { color: var(--pendente); font-weight: 600; }
.t-erro { color: var(--erro); font-weight: 600; }

.dividido { display: grid; gap: 14px; }
/* sem isto, uma tabela larga alarga a coluna da grade (e a página) em vez de rolar dentro da caixa */
.dividido > *, .cal-corpo > * { min-width: 0; }
h2.secao { font-size: 15px; margin: 18px 0 8px; }
.resumo { font-weight: 600; margin: 8px 0; }

/* ---------- calendário */
.cal-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.cal-topo h2 { margin: 0 10px; font-size: 18px; min-width: 210px; }
.legenda { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; font-size: 12px; }
.legenda span { padding: 2px 8px; border-radius: 6px; }
.cal-corpo { display: grid; grid-template-columns: 1fr 320px; gap: 14px; }
.cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--borda);
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
}
.cal .dsem { background: var(--cabecalho); text-align: center; font-weight: 600; padding: 7px 2px; font-size: 13px; }
.cal .dsem.hoje { background: var(--azul); color: #fff; }
.cal .dia { background: var(--superficie); min-height: 108px; padding: 4px; overflow: hidden; }
.cal.semana .dia { min-height: 380px; }
.cal .dia.fora { background: var(--superficie-2); }
.cal .dia.fora .n { color: var(--fraco); }
.cal .dia.hoje { background: var(--azul-claro); }
.cal .dia.hoje .n { color: var(--azul); font-weight: 700; }
.cal .n { text-align: right; font-size: 13px; padding: 0 4px 2px; }
.ev {
  display: block; width: 100%; border: 0; text-align: left; border-radius: 5px; padding: 2px 6px; margin-bottom: 3px;
  font-size: 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal.semana .ev { white-space: normal; padding: 5px 7px; }
.ev.andamento { background: var(--andamento-bg); color: var(--andamento-tx); }
.ev.hoje { background: var(--hoje-bg); color: var(--hoje-tx); }
.ev.atrasada { background: var(--atrasada-bg); color: var(--atrasada-tx); font-weight: 700; }
.ev.devolvida { background: var(--devolvida-bg); color: var(--devolvida-tx); }
.ev.saida { background: var(--saida-bg); color: var(--saida-tx); }
.mais { border: 0; background: none; color: var(--azul); font-size: 12px; cursor: pointer; padding: 0 6px; }

/* ---------- janelas (modal) */
dialog {
  border: 1px solid var(--borda); border-radius: 14px; padding: 0; background: var(--superficie); color: var(--texto);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3); width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
}
dialog.largo { width: min(1080px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(10, 12, 16, .45); }
dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 26px); }
dialog header { padding: 16px 20px 6px; font-size: 17px; font-weight: 650; }
dialog .corpo { padding: 8px 20px 12px; overflow: auto; }
dialog footer {
  padding: 12px 20px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--borda);
  flex-wrap: wrap;
}
dialog footer .esq { margin-right: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.grade .inteira { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px 14px; margin: 0 0 12px; }
legend { color: var(--suave); font-size: 13px; padding: 0 6px; }
.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acessorios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.acessorios label { display: flex; gap: 8px; align-items: center; }
.acessorios input[type=number] { width: 64px; }
.linha-doc { display: flex; gap: 6px; } .linha-doc select { width: 80px; } .linha-doc input { flex: 1; }
.check { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.sugestoes {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra); max-height: 240px; overflow: auto;
}
.sugestoes button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; cursor: pointer; }
.sugestoes button:hover, .sugestoes button.ativo { background: var(--azul-claro); }
.rel { position: relative; }
.rel > input { width: 100%; }
textarea.mensagem { width: 100%; min-height: 360px; resize: vertical; line-height: 1.45; }

.aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--texto); color: var(--fundo);
  padding: 10px 16px; border-radius: 10px; box-shadow: var(--sombra); z-index: 100; max-width: calc(100vw - 32px);
}
.aviso.erro { background: var(--erro); color: #fff; }
.carregando { cursor: progress; }

.interruptor { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.interruptor input { appearance: none; width: 34px; height: 18px; border-radius: 9px; background: var(--fraco);
  position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; transition: left .15s; }
.interruptor input:checked { background: var(--azul); }
.interruptor input:checked::after { left: 19px; }

@media (max-width: 1100px) {
  .cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cal-corpo { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .topo, .cartoes, main { padding-left: 16px; padding-right: 16px; }
  .topo { gap: 8px; padding-top: 12px; }
  .topo .data { width: 100%; order: 2; }
  .topo .acoes { margin-left: 0; width: 100%; order: 3; gap: 6px; }
  .topo .acoes .usuario { margin-right: auto; }
  /* no iPhone, campo com letra menor que 16px faz a página dar zoom ao tocar */
  input, select, textarea { font-size: 16px; }
  nav.abas { padding: 0 8px; }
  nav.abas button { padding: 10px 12px; }
  .topo h1 { font-size: 16px; }
  .marca { gap: 10px; } .marca img.logo { height: 16px; } .marca .separador { height: 20px; }
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cartoes .cartao:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cartao { padding: 8px 12px 10px; }
  .cartao b { font-size: 21px; }
  .grade, .colunas, .acessorios { grid-template-columns: 1fr; }
  main { padding-top: 12px; }

  /* barras de botões e filtros: grade de 2 colunas, botões do mesmo tamanho */
  .barra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .barra > * { min-width: 0; }
  .barra > .btn { width: 100%; white-space: normal; padding: 8px 6px; line-height: 1.25; }
  .barra > .btn.primario, .barra > .busca, .barra > .dica, .barra > .contagem, .barra > .resumo,
  .barra > .direita, .barra > b { grid-column: 1 / -1; }
  .barra > label { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
  .barra > label select { flex: 1; }
  .barra > select { width: 100%; }
  .barra .direita { margin-left: 0; display: grid; }
  .barra .direita .btn { width: 100%; }
  .barra > .contagem, .barra > .dica { text-align: left; }
  .resumo { white-space: normal; }
  .busca { width: 100%; }
  .tabela { max-height: 65vh; }
  .tabela.baixa { max-height: 300px; }
  th, td { padding: 7px 8px; font-size: 13px; }

  /* calendário */
  .cal-topo { display: grid; grid-template-columns: auto auto auto 1fr; gap: 6px; }
  .cal-topo h2 { grid-column: 1 / -1; order: -1; min-width: 0; margin: 0 0 4px; font-size: 17px; }
  .cal-topo select { grid-column: span 1; }
  .cal-topo .check { grid-column: 1 / -1; }
  .legenda { grid-column: 1 / -1; margin-left: 0; gap: 6px; }
  .cal .dsem { font-size: 11px; padding: 5px 0; }
  .cal .dia { min-height: 64px; padding: 2px; }
  .cal .n { font-size: 11px; padding: 0 2px 1px; }
  .cal .ev { font-size: 10px; padding: 1px 3px; margin-bottom: 2px; }
  .mais { font-size: 10px; padding: 0 2px; }
  .cal.lista { grid-template-columns: 1fr; }
  .cal.lista .dia { min-height: 0; padding: 6px 8px 4px; }
  .cal.lista .dia-titulo { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
  .cal.lista .dia.hoje .dia-titulo { color: var(--azul); }
  .cal.lista .vazio-dia { color: var(--fraco); font-size: 12px; margin-bottom: 4px; }
  .cal.lista .ev { font-size: 12px; padding: 5px 8px; white-space: normal; }

  dialog .corpo { padding: 8px 14px 12px; }
  dialog footer { padding: 10px 14px; }
  dialog footer .btn { flex: 1; }
  dialog footer .esq { margin-right: 0; width: 100%; }
  dialog footer .esq .btn { flex: 1; }
}