@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* ============================================================
   DT Entregador — DT Solution
   style.css — Folha de estilos global
   Tema: Carvão Quente
   ============================================================
   ÍNDICE:
   1.  Reset & Base
   2.  Variáveis de Tema (cores, raios, fontes)
   3.  Navegação (nav)
   4.  Layout & Wrapper
   5.  Alertas & Mensagens
   6.  Cards (genérico)
   7.  Steps (numeração de passos)
   8.  Formulários & Inputs
   9.  Botões
   10. Badge & Tags
   11. Stats (grade de métricas)
   12. Barra de Progresso
   13. Preview de Rota
   14. Painel de Fases (fase-bar)
   15. Lista de Entregas (cartões de entrega)
   16. Ações das Entregas (navegar / status)
   17. Banner de Restauração
   18. Indicador de Sincronização
   19. Dashboard Financeiro
   20. Perfil (avatar, assinatura)
   21. Tabelas
   22. Abas (tabs)
   23. Renovação de Assinatura
   24. Login
   25. Diagnóstico (debug panel)
   26. Utilitários & Responsivo
   ============================================================ */


/* ── 1. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-body);
}


/* ── 2. VARIÁVEIS DE TEMA ─────────────────────────────────── */
:root {
  /* Cores principais — Carvão Quente */
  --azul-nav:        #292524;   /* nav — preto quente */
  --azul-nav-borda:  #1c1917;   /* borda inferior do nav */
  --azul-acento:     #d97706;   /* âmbar — botões, steps ativos */
  --azul-acento-dk:  #b45309;   /* hover dos botões */
  --azul-claro:      #fef3c7;   /* steps inativos, badges leves */
  --azul-muted:      #a8a29e;   /* texto sobre nav */

  /* Backgrounds */
  --bg-page:         #e8e6e3;   /* fundo da página — bege cinza */
  --bg-card:         #f5f5f4;   /* cards */
  --bg-card-inner:   #ede9e6;   /* fundo interno de sub-cards */
  --bg-input:        #fafaf9;   /* fundo dos inputs */
  --bg-nav:          var(--azul-nav);

  /* Bordas */
  --borda-card:      1px solid #d6d3d1;
  --borda-input:     1px solid #d6d3d1;
  --borda-nav:       1px solid var(--azul-nav-borda);

  /* Texto */
  --text-titulo:     #292524;   /* títulos */
  --text-body:       #44403c;   /* texto padrão */
  --text-muted:      #78716c;   /* labels, placeholders */
  --text-hint:       #a8a29e;   /* texto fraco */
  --text-nav:        #fafaf9;   /* texto no nav */
  --text-nav-link:   #a8a29e;   /* links do nav */

  /* Semânticas */
  --verde:           #16a34a;
  --verde-bg:        rgba(22,163,74,.08);
  --verde-borda:     rgba(22,163,74,.25);
  --verde-text:      #15803d;
  --vermelho:        #dc2626;
  --vermelho-bg:     rgba(220,38,38,.08);
  --vermelho-borda:  rgba(220,38,38,.25);
  --vermelho-text:   #b91c1c;
  --amarelo:         #d97706;
  --amarelo-bg:      rgba(217,119,6,.08);
  --amarelo-borda:   rgba(217,119,6,.25);

  /* Layout */
  --radius-sm:       6px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-pill:     999px;
  --shadow-card:     0 1px 3px rgba(41,37,36,.08);
}


/* ── 3. NAVEGAÇÃO ─────────────────────────────────────────── */
nav {
  background: var(--bg-nav);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 900;
  border-bottom: var(--borda-nav);
}

/* Logo — fica fixo à esquerda, fora do fluxo do centro */
.nav-logo {
  width: 36px;
  height: 36px;
  background: var(--azul-acento);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 4px;
}

.nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Brand — centralizado absolutamente na largura total do nav */
.brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Linha 1 — DT Entregador */
.nb-produto {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.2px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Linha 2 — "by" */
.nb-by {
  font-family: 'Poppins', sans-serif;
  font-size: 8px;
  font-weight: 400;
  color: #a8a29e;
  font-style: italic;
  letter-spacing: .8px;
  line-height: 1.4;
}

/* Linha 3 — DT Solution + versão */
.nb-empresa {
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #a8a29e;
  letter-spacing: .3px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Links — empurrados para a direita */
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

nav a {
  color: #e7e5e4;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 7px 13px;
  border-radius: var(--radius-md);
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

nav a:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

nav a.ativo {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* ── Logo DT Solution na navbar (com glow B2) ─────────────── */
.dts-glow {
  display: inline-block;
  padding: 4px 8px;
  pointer-events: auto;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 6px rgba(255,255,255,.80))
    drop-shadow(0 0 14px rgba(255,255,255,.50))
    drop-shadow(0 0 22px rgba(255,255,255,.25));
}

.dts-nav-logo {
  height: 22px;
  width: auto;
  display: block;
}

/* ── Logo DT Solution na tela de login ───────────────────── */
.dts-login-logo-wrap {
  margin: 6px 0 0;
  text-align: center;
  width: 100%;
}

.dts-login-logo {
  width: 110px;
  max-width: 80%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

/* ── Link no rodapé da tela de login ─────────────────────── */
.login-rodape a {
  color: #d97706;
  text-decoration: none;
  font-weight: 700;
  transition: text-decoration .15s ease;
}
.login-rodape a:hover {
  text-decoration: underline;
}

.tag {
  flex-shrink: 0;
}


/* ── 4. LAYOUT & WRAPPER ──────────────────────────────────── */
.wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 14px 12px 80px;
}


/* ── 5. ALERTAS & MENSAGENS ───────────────────────────────── */
.alerta, .al {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 10px;
}

.al-ok {
  background: var(--verde-bg);
  border: 1px solid var(--verde-borda);
  color: var(--verde-text);
}

.al-err {
  background: var(--vermelho-bg);
  border: 1px solid var(--vermelho-borda);
  color: var(--vermelho-text);
}

.al-aviso {
  background: var(--amarelo-bg);
  border: 1px solid var(--amarelo-borda);
  color: var(--amarelo);
}

#msgBar {
  background: var(--bg-card);
  border: var(--borda-card);
  border-left: 3px solid var(--azul-acento);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}


/* ── 6. CARDS ─────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: var(--borda-card);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.card-head, .ch {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid #d6d3d1;
}

.card-head h3, .ch h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-titulo);
}

.card-body, .cb {
  padding: 12px 14px;
}

.ch-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(217,119,6,.1);
  color: #92400e;
  border: 1px solid rgba(217,119,6,.2);
  margin-left: auto;
}


/* ── 7. STEPS (numeração de passos) ──────────────────────── */
.step-n {
  width: 22px;
  height: 22px;
  background: var(--azul-acento);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background .3s;
}

.step-n.done {
  background: var(--verde);
}


/* ── 8. FORMULÁRIOS & INPUTS ──────────────────────────────── */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=file],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-input);
  border: var(--borda-input);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-body);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--azul-acento);
  box-shadow: 0 0 0 3px rgba(217,119,6,.12);
}

input:disabled, select:disabled {
  opacity: .4;
  cursor: not-allowed;
}

input::placeholder {
  color: var(--text-hint);
}

select option {
  background: #fff;
}

.row {
  display: flex;
  gap: 8px;
}

.row input { flex: 1; }

/* Input com prefixo (R$) */
.input-prefix {
  position: relative;
}

.input-prefix span {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}

.input-prefix input {
  padding-left: 30px;
}

/* Labels */
.campo {
  margin-bottom: 10px;
}

.campo label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

#locInfo {
  font-size: 12px;
  color: var(--azul-acento);
  margin-top: 5px;
  font-family: monospace;
}

#statusArq {
  font-size: 11px;
  color: var(--azul-acento);
  margin-top: 5px;
  min-height: 16px;
}


/* ── 9. BOTÕES — Estilo E: ícone + texto ─────────────────── */

/* Base — todos os botões herdam isso */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  line-height: 1;
}

/* Ícone dentro do botão */
.btn .ic, .btn-ic {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.btn:active  { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn-w { width: 100%; justify-content: center; }

/* Variantes de cor */
.btn-primario {
  background: var(--azul-acento);
  color: #fff;
}
.btn-primario:hover:not(:disabled) { background: var(--azul-acento-dk); }

.btn-escuro {
  background: #292524;
  color: #fff;
}
.btn-escuro:hover:not(:disabled) { background: #44403c; }

.btn-verde, .btn-gps {
  background: var(--verde);
  color: #fff;
}
.btn-verde:hover:not(:disabled), .btn-gps:hover:not(:disabled) { background: #15803d; }

.btn-outline {
  background: #fafaf9;
  color: #292524;
  border: 1.5px solid #d6d3d1;
}
.btn-outline:hover:not(:disabled) { background: #f5f5f4; border-color: #a8a29e; }

.btn-perigo {
  background: var(--vermelho-bg);
  color: var(--vermelho-text);
  border: 1.5px solid var(--vermelho-borda);
}
.btn-perigo:hover:not(:disabled) { background: rgba(220,38,38,.15); }

/* Botão de salvar (usado nos forms do perfil) */
.btn-salvar, .bs {
  padding: 10px 20px;
  background: var(--azul-acento);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.btn-salvar:hover, .bs:hover { background: var(--azul-acento-dk); }

/* Botão Iniciar Rota — destaque máximo */
.btn-iniciar {
  background: var(--azul-acento);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 16px;
  width: 100%;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-iniciar:hover:not(:disabled) { background: var(--azul-acento-dk); }
.btn-iniciar:disabled { opacity: .4; cursor: not-allowed; }

/* Botão Nova Rota — alerta vermelho compacto */
.btn-nova {
  background: var(--vermelho-bg);
  color: var(--vermelho-text);
  border: 1.5px solid var(--vermelho-borda);
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-nova:hover { background: rgba(220,38,38,.15); }

/* Botão de navegação (link estilizado) */
.btn-nav {
  flex: 2;
  background: var(--azul-acento);
  color: #fff;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s;
}
.btn-nav:hover { background: var(--azul-acento-dk); }


/* ── 10. BADGES & TAGS ────────────────────────────────────── */
.tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.tag-ok  { background: var(--verde-bg);    color: var(--verde-text);  border: 1px solid var(--verde-borda); }
.tag-urg { background: var(--vermelho-bg); color: var(--vermelho-text);border: 1px solid var(--vermelho-borda); }

.bp { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 6px; }
.bp-a { background: rgba(217,119,6,.1); color: #92400e; border: 1px solid rgba(217,119,6,.2); }
.bp-e { background: rgba(217,119,6,.08); color: #92400e; border: 1px solid rgba(217,119,6,.2); }

.ass { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); margin-top: 6px; }
.ass-ok  { background: var(--verde-bg);    color: var(--verde-text);  border: 1px solid var(--verde-borda); }
.ass-urg { background: var(--vermelho-bg); color: var(--vermelho-text);border: 1px solid var(--vermelho-borda); }
.ass-adm { background: rgba(217,119,6,.1); color: #92400e; border: 1px solid rgba(217,119,6,.2); }

.num-par {
  display: inline-block;
  background: var(--azul-acento);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

/* Linha que agrupa "1ª parada" + badge da parada Shopee */
.num-par-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

/* Badge com o número da parada original da Shopee (impresso na caixa) */
.stop-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pkg-b {
  background: rgba(217,119,6,.1);
  border: 1px solid rgba(217,119,6,.2);
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}


/* ── 11. STATS (grade de métricas) ───────────────────────── */
.stats-grid, .sg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.stat-c, .sc {
  background: var(--bg-card);
  border: var(--borda-card);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.stat-v, .sv { font-size: 18px; font-weight: 700; color: var(--text-titulo); line-height: 1; }
.stat-l, .sl { font-size: 11px; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .3px; }

/* Cores semânticas das stats */
.sv-g, .g { color: var(--verde); }
.sv-r, .r { color: var(--vermelho); }
.sv-o, .o { color: #d97706; }
.sv-b, .b { color: var(--azul-acento); }


/* ── 12. BARRA DE PROGRESSO ───────────────────────────────── */

/* Elementos ocultados por padrão — exibidos via JS após iniciar rota */
#painel,
#statsBox,
#progBox,
#diagBox,
#bannerRestaurado,
#cardIniciar { display: none; }
.prog-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.prog-lbl { font-size: 12px; font-weight: 600; color: var(--text-titulo); }
.prog-pct { font-size: 12px; color: var(--azul-acento); font-weight: 700; }
.prog-track { height: 6px; background: var(--bg-input); border-radius: 4px; overflow: hidden; border: var(--borda-input); }
.prog-fill  { height: 100%; background: var(--azul-acento); border-radius: 4px; width: 0%; transition: width .35s ease; }
.prog-stats { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; font-weight: 600; flex-wrap: wrap; }
.ps-e { color: var(--verde); }
.ps-o { color: var(--vermelho); }
.ps-p { color: var(--text-muted); }
.ps-k { color: var(--text-hint); margin-left: auto; }


/* ── 13. PREVIEW DE ROTA ──────────────────────────────────── */
#previewRota {
  display: none;
  background: var(--bg-card-inner);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-top: 10px;
  border: var(--borda-card);
}

.preview-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.preview-stat:last-child { margin: 0; }
.preview-lbl { font-size: 12px; color: var(--text-muted); }
.preview-val { font-size: 13px; font-weight: 700; color: var(--text-titulo); }


/* ── 14. PAINEL DE FASES ──────────────────────────────────── */
.fase-bar {
  background: var(--bg-card);
  border: var(--borda-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-card);
}

.fase-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #d6d3d1;
}

.fase-top span { color: var(--text-titulo); font-size: 13px; font-weight: 600; }

.btn-fase {
  background: var(--azul-claro);
  color: #92400e;
  border: 1px solid #d6d3d1;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all .15s;
  font-family: inherit;
}

.btn-fase:hover:not(:disabled) { background: #d6d3d1; }
.btn-fase:disabled { opacity: .3; cursor: not-allowed; }

.fase-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 600;
  flex-wrap: wrap;
}

.fi-s { color: var(--azul-acento); }
.fi-p { color: #d97706; }
.fi-k { color: var(--text-muted); }


/* ── 15. LISTA DE ENTREGAS ────────────────────────────────── */
.lista {
  background: var(--bg-card);
  border: var(--borda-card);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 10px;
  max-height: 58vh;
  overflow-y: auto;
}

.lista::-webkit-scrollbar { width: 4px; }
.lista::-webkit-scrollbar-track { background: var(--bg-card-inner); }
.lista::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 2px; }

.card-e {
  background: var(--bg-card-inner);
  border: var(--borda-card);
  border-left: 3px solid var(--azul-acento);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
  transition: opacity .25s;
}

.e-addr {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-titulo);
  line-height: 1.3;
  margin-bottom: 4px;
}

.e-info {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.e-pkgs {
  margin-bottom: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}


/* ── 16. AÇÕES DE ENTREGA ─────────────────────────────────── */
.e-acoes { display: flex; gap: 7px; }

.btn-nav {
  flex: 2;
  background: var(--azul-acento);
  color: #fff;
  text-decoration: none;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s;
}

.btn-nav:hover { opacity: .85; }

.sel-st {
  flex: 1;
  padding: 8px 4px;
  background: #fff;
  border: 1px solid #d6d3d1;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  text-align: center;
  appearance: none;
  font-family: inherit;
}

.sel-st.entregue   { border-color: rgba(22,163,74,.4);  color: var(--verde-text);    background: var(--verde-bg); }
.sel-st.ocorrencia { border-color: rgba(220,38,38,.4);  color: var(--vermelho-text); background: var(--vermelho-bg); }


/* ── 17. BANNER DE RESTAURAÇÃO ────────────────────────────── */
#bannerRestaurado {
  display: none;
  background: rgba(217,119,6,.06);
  border: 1px solid rgba(217,119,6,.25);
  border-radius: var(--radius-lg);
  padding: 13px 14px;
  margin-bottom: 10px;
}

.brow { display: flex; align-items: center; gap: 10px; }
.bico { font-size: 20px; flex-shrink: 0; }
.btxt { flex: 1; }
.btxt b { display: block; color: var(--azul-acento-dk); font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.btxt small { color: var(--text-muted); font-size: 11px; }


/* ── 18. INDICADOR DE SINCRONIZAÇÃO ───────────────────────── */
#syncInfo {
  font-size: 11px;
  text-align: right;
  padding: 2px 2px 6px;
  min-height: 18px;
}

.sync-ok     { color: var(--verde-text); }
.sync-saving { color: var(--azul-acento); }
.sync-err    { color: var(--vermelho-text); }


/* ── 19. DASHBOARD FINANCEIRO ─────────────────────────────── */
.fin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 14px;
}

.fin-card {
  background: var(--bg-card-inner);
  border: var(--borda-card);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  text-align: center;
}

.fin-v { font-size: 15px; font-weight: 800; line-height: 1; margin-bottom: 3px; }
.fin-l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.fv-g  { color: var(--verde); }
.fv-r  { color: var(--vermelho); }
.fv-b  { color: var(--azul-acento); }
.fv-o  { color: #d97706; }

/* Cards "A Receber" */
.receber-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.rec-card { border-radius: var(--radius-md); padding: 14px; border: var(--borda-card); }
.rec-card.ativo   { border-color: rgba(217,119,6,.35); background: rgba(217,119,6,.04); }
.rec-card.inativo { background: var(--bg-card-inner); }
.rec-periodo { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.rec-periodo .dot     { width: 6px; height: 6px; border-radius: 50%; background: var(--azul-acento); flex-shrink: 0; }
.rec-periodo .dot.off { background: #d1d5db; }
.rec-valor { font-size: 22px; font-weight: 800; color: var(--text-titulo); line-height: 1; margin-bottom: 2px; }
.rec-sub   { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.rec-pgto  { font-size: 11px; font-weight: 600; }
.rec-pgto .data  { color: var(--azul-acento); }
.rec-pgto .prazo { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.rec-breakdown { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--azul-claro); font-size: 11px; color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; }
.rec-breakdown span { display: flex; justify-content: space-between; }

/* Configuração financeira — grid 2 colunas */
.fin-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Períodos de pagamento */
.periodo-cfg { background: var(--bg-card-inner); border: var(--borda-card); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; }
.periodo-cfg h4 { font-size: 11px; font-weight: 700; color: var(--azul-acento-dk); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .4px; }
.periodo-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.periodo-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }


/* ── 20. PERFIL ───────────────────────────────────────────── */
.pc { background: var(--bg-card); border: var(--borda-card); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
.pt { display: flex; align-items: center; gap: 14px; }
.av-wrap  { position: relative; flex-shrink: 0; cursor: pointer; }
.av-img   { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #d6d3d1; display: block; }
.av-def   { width: 64px; height: 64px; border-radius: 50%; background: var(--azul-acento); display: flex; align-items: center; justify-content: center; font-size: 26px; border: 2px solid #d6d3d1; }
.av-btn   { position: absolute; bottom: 0; right: 0; width: 22px; height: 22px; background: #fff; border: 1px solid #d6d3d1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; pointer-events: none; }
.pi h2    { color: var(--text-titulo); font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.pi .em   { font-size: 12px; color: var(--text-muted); }
.foto-hint{ font-size: 11px; color: var(--text-muted); margin-top: 8px; }


/* ── 21. TABELAS ──────────────────────────────────────────── */
.ht, .hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ht th, .hist-table th {
  padding: 8px 10px;
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom: 1px solid #d6d3d1;
}

.ht td, .hist-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #e7e5e4;
  color: var(--text-muted);
}

.ht tr:last-child td, .hist-table tr:last-child td { border: none; }


/* ── 22. ABAS (tabs) ──────────────────────────────────────── */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid #d6d3d1;
  margin-bottom: 14px;
  padding-bottom: 0;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: all .15s;
  white-space: nowrap;
  font-family: inherit;
  border-radius: 6px 6px 0 0;
}
.tab:hover { background: rgba(217,119,6,.06); }

.tab.active { color: var(--azul-acento); border-bottom-color: var(--azul-acento); }
.tp { display: none; }
.tp.active { display: block; }

/* Sub-seções dentro de uma aba */
.sub-secao { padding: 8px 0 18px; }
.sub-titulo {
  font-size: 13px;
  font-weight: 700;
  color: #44403c;
  margin: 0 0 12px;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sub-divisor {
  border: none;
  border-top: 1px dashed #e7e5e4;
  margin: 4px 0 18px;
}


/* ── 23. RENOVAÇÃO DE ASSINATURA ──────────────────────────── */
.planos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.plano  { background: var(--bg-card-inner); border: 1.5px solid #d6d3d1; border-radius: var(--radius-md); padding: 12px; cursor: pointer; transition: all .2s; text-align: center; }
.plano:hover, .plano.sel { border-color: var(--azul-acento); background: rgba(217,119,6,.06); }
.plano b     { display: block; color: var(--text-titulo); font-size: 13px; margin-bottom: 2px; }
.plano .preco{ font-size: 17px; font-weight: 700; color: var(--azul-acento); margin: 5px 0 2px; }
.plano small { font-size: 11px; color: var(--text-muted); }
.pix-aviso   { background: var(--bg-card-inner); border: 1px dashed #d6d3d1; border-radius: var(--radius-md); padding: 14px; text-align: center; margin-top: 10px; display: none; }
.pix-aviso p { font-size: 12px; color: var(--text-muted); line-height: 1.7; }


/* ── 24. LOGIN ────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #292524 0%, #44403c 100%);
  padding: 20px;
}

.login-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(41,37,36,.25);
}

.login-logo {
  text-align: center;
  margin-bottom: 24px;
}

.login-logo .logo-img {
  width: 56px;
  height: 56px;
  background: var(--azul-acento);
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 8px;
}

.login-logo .logo-img img { width: 100%; height: 100%; object-fit: contain; }
.login-logo h1 { font-size: 18px; font-weight: 700; color: var(--text-titulo); margin-bottom: 3px; }
.login-logo p  { font-size: 11px; color: var(--text-muted); }

.login-erro {
  background: var(--vermelho-bg);
  border: 1px solid var(--vermelho-borda);
  color: var(--vermelho-text);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  margin-bottom: 14px;
}

.login-rodape {
  text-align: center;
  margin-top: 20px;
  font-size: 10px;
  color: var(--text-hint);
}


/* ── 25. DIAGNÓSTICO (debug panel) ───────────────────────── */
.diag-debug {
  font-size: 9px;
  font-family: monospace;
  color: var(--text-muted);
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-card-inner);
  border: var(--borda-card);
  border-radius: var(--radius-md);
  word-break: break-all;
}


/* ── 26. UTILITÁRIOS & RESPONSIVO ─────────────────────────── */
.empty {
  text-align: center;
  padding: 22px;
  color: var(--text-hint);
  font-size: 12px;
  line-height: 1.7;
}

.chart-wrap {
  position: relative;
  height: 160px;
}

@media (max-width: 440px) {
  .stats-grid, .sg    { grid-template-columns: repeat(2, 1fr); }
  .fin-grid           { grid-template-columns: repeat(2, 1fr); }
  .receber-grid       { grid-template-columns: 1fr; }
  .fin-config-grid    { grid-template-columns: 1fr; }
  .planos             { grid-template-columns: 1fr; }
  .e-acoes            { flex-direction: column; }
  .periodo-row-3      { grid-template-columns: 1fr 1fr; }
}

/* ── 27. MODAL DE BOAS-VINDAS (assinatura) ─────────────────── */
#modalAssinatura {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(41,37,36,.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#modalAssinatura.aberto {
  display: flex;
}

.modal-box {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(41,37,36,.25);
  text-align: center;
  animation: modal-in .2s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

.modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 14px;
}

.modal-icon.ok  { background: var(--verde-bg);    }
.modal-icon.urg { background: var(--vermelho-bg);  }
.modal-icon.avs { background: var(--amarelo-bg);   }

.modal-box h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-titulo);
  margin-bottom: 8px;
}

.modal-box p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.modal-box p strong {
  color: var(--text-titulo);
}

.modal-btn-ok {
  width: 100%;
  padding: 11px;
  background: var(--azul-acento);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
  font-family: inherit;
}

.modal-btn-ok:hover { opacity: .88; }

/* ── 28. CORREÇÕES DE CONTRASTE ────────────────────────────── */
/* Garante legibilidade em todas as áreas do tema Carvão Quente */

/* Cards de entrega — endereço e info */
.card-e .e-addr { color: #1c1917; }
.card-e .e-info { color: #57534e; }

/* Fase bar — textos */
.fase-top span  { color: #1c1917; }
.fi-s { color: #1e3a8a; }
.fi-p { color: #92400e; }
.fi-k { color: #57534e; }

/* Progresso */
.prog-lbl { color: #1c1917; }
.prog-pct { color: #92400e; }

/* Preview de rota */
.preview-lbl { color: #57534e; }
.preview-val { color: #1c1917; }

/* Card heads */
.card-head h3, .ch h3 { color: #1c1917; }

/* Stats */
.stat-v, .sv { color: #1c1917; }
.stat-l, .sl { color: #78716c; }

/* Dashboard financeiro — valor sem cor definida herda body */
.fin-v { color: #1c1917; }
.fin-l { color: #78716c; }

/* Rec-breakdown — texto das linhas de breakdown */
.rec-breakdown b { color: #44403c; }

/* Histórico — células da tabela */
.ht td, .hist-table td { color: #44403c; }

/* Inputs — placeholder e texto */
input::placeholder, textarea::placeholder { color: #a8a29e; }
input[type=text], input[type=email], input[type=password],
input[type=number], select, textarea { color: #1c1917; }

/* Select de status — pendente legível */
.sel-st { color: #44403c; background: #fafaf9; }

/* Botão de fase */
.btn-fase { color: #44403c; background: #ede9e6; border-color: #d6d3d1; }

/* Banner restaurado — texto */
.btxt b     { color: #92400e; }
.btxt small { color: #57534e; }

/* Sync info */
.sync-ok     { color: #15803d; }
.sync-saving { color: #92400e; }
.sync-err    { color: #b91c1c; }

/* msgBar texto */
#msgBar { color: #44403c; }

/* Perfil — email e sub-textos */
.pi .em    { color: #57534e; }
.foto-hint { color: #78716c; }

/* Tabs */
.tab        { color: #57534e; }
.tab.active { color: #92400e; border-bottom-color: #d97706; }

/* Campo label */
.campo label { color: #57534e; }

/* Período config */
.periodo-cfg h4 { color: #92400e; }

/* Plano — texto */
.plano b     { color: #1c1917; }
.plano small { color: #78716c; }
.plano .preco{ color: #92400e; }

/* Login */
.login-logo h1 { color: #1c1917; }
.login-logo p  { color: #78716c; }
.login-rodape  { color: #a8a29e; }

/* Admin tabela */
.u-nome  { color: #1c1917; }
.u-email { color: #78716c; }

/* Texto padrão do wrap */
.wrap { color: #44403c; }


/* ═══════════════════════════════════════════════════════════════════
   28. FUNDAÇÃO MOBILE — Peça 1 (auditoria mobile, maio/2026)
   ───────────────────────────────────────────────────────────────────
   Resolve 4 dores básicas em telas touch:
   - Inputs ≥16px → impede zoom automático do Safari iOS no foco
   - Botões com altura ≥44px → Apple HIG tap target mínimo
   - Feedback :active visível → substitui hover (que não existe em touch)
   - Breakpoint 820px → cobre iPhone, Android e iPad em portrait
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  /* ── Inputs: fonte 16px é o limiar do iOS Safari para NÃO dar zoom
        automático no foco. Padding ajustado para altura ~44px. ─────── */
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=number],
  input[type=file],
  input[type=tel],
  input[type=search],
  input[type=date],
  select,
  textarea {
    padding: 12px 14px;
    font-size: 16px;
  }

  /* ── Botões `.btn` com tap target ≥44px (recomendação Apple HIG).
        font-size: 14px combina com a fonte maior dos inputs. ───────── */
  .btn {
    padding: 13px 20px;
    font-size: 14px;
  }
  .btn .ic,
  .btn-ic {
    font-size: 16px;
  }

  /* ── Filtros do admin (`.filtro-input`) também são input — corrige
        zoom no iOS, padding pra tap target adequado. ───────────────── */
  .filtro-input {
    padding: 11px 14px !important;
    font-size: 16px !important;
  }

  /* ── Inputs com prefixo "R$" (.input-prefix) — em mobile o input
        tem fonte 16px e padding 12×14, o que faria o texto digitado
        sobrepor o "R$" decorativo. Compensa com padding-left maior
        e fonte do "R$" proporcional à fonte do input. ──────────────── */
  .input-prefix input {
    padding-left: 40px !important;
  }
  .input-prefix span {
    font-size: 14px;
    left: 14px;
  }

  /* ── Hotfix 1: padding-bottom do wrap reduzido em mobile.
        Era 80px pensando em elementos flutuantes que o sistema não usa
        — reduzido para 24px elimina o vazio bege no fim da tela. ───── */
  .wrap {
    padding-bottom: 24px;
  }

  /* ── Hotfix 2: brand da navbar (texto "DT Entregador" + logo DT
        Solution) escondido em mobile estreito. Como o `.brand` tem
        position:absolute centralizado, em telas <820px ele invade o
        espaço dos links (Perfil/Admin/Sair) à direita e cria
        sobreposição visual.
        A identidade visual continua pelo ícone do caminhão à esquerda. */
  nav .brand {
    display: none;
  }

}

/* ── Feedback :active universal (fora do media query, vale também em
      desktop touch como notebooks com tela touchscreen). Em telas
      sem hover, é este estado que confirma ao usuário que o toque
      foi registrado. ──────────────────────────────────────────────── */
.btn:active {
  filter: brightness(0.92);
}

nav a:active {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* Inputs com feedback visual de toque (sutil — só uma sombra interna
   leve, mantém o foco como destaque principal). */
input:active,
select:active,
textarea:active {
  background: #f5f5f4;
}


/* ═══════════════════════════════════════════════════════════════════
   29. BANNER "INSTALAR APP" (PWA) — index.php
   ───────────────────────────────────────────────────────────────────
   Banner que substitui a antiga mensagem "Passo 1: defina seu ponto
   de partida." Captura o evento beforeinstallprompt do navegador e
   oferece instalação como PWA com botão nativo.
   ═══════════════════════════════════════════════════════════════════ */

.install-banner {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-left: 4px solid var(--azul-acento);
  border-radius: 12px;
  padding: 14px 40px 14px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(217,119,6,.08);
  position: relative;
  overflow: hidden;
}

/* Halo decorativo no canto superior direito (efeito de luz) */
.install-banner::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(217,119,6,.08), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.install-icon {
  flex-shrink: 0;
  font-size: 26px;
  width: 46px;
  height: 46px;
  background: var(--azul-acento);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(217,119,6,.3);
}

.install-text {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}

.install-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-titulo);
  margin-bottom: 2px;
  line-height: 1.3;
}

.install-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.install-btn {
  background: var(--azul-acento);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s;
  font-family: inherit;
  flex-shrink: 0;
}
.install-btn:hover { background: var(--azul-acento-dk); }
.install-btn:active { transform: scale(.97); }

.install-dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-size: 22px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  font-family: inherit;
}
.install-dismiss:hover {
  background: rgba(0,0,0,.05);
  color: var(--text-titulo);
}

/* Em mobile estreito (≤480px): botão "Instalar" full-width abaixo do texto */
@media (max-width: 480px) {
  .install-banner {
    flex-wrap: wrap;
    padding: 16px 14px 14px;
  }
  .install-icon {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .install-text {
    flex-basis: calc(100% - 56px);
    padding-right: 28px;
  }
  .install-btn {
    flex-basis: 100%;
    padding: 12px 16px;
    font-size: 14px;
    margin-top: 6px;
  }
}