/* ==========================================================================
   LÉGUAS FRANZINAS — Sistema de design
   Fonte da verdade única para a interface web E para os relatórios PDF.
   Derivado do Manual de Marca v1.0 (§9) + Instruções do Projeto.

   Consumido por:
     - templates/base.html                (interface web)
     - templates/reports/base_pdf.html    (WeasyPrint → PDF)

   REGRA: nenhuma cor literal fora deste ficheiro. Se precisa de um hex
   num template, falta aqui um token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TIPOGRAFIA — fallback local até serem fornecidos os ficheiros Poppins
   Sem Google Fonts: resiliência em campo (rede móvel fraca) e RGPD
   (não transfere o IP do motorista para fora da UE).
   Ficheiros: static/fonts/poppins-{300,400,500,600,700}.woff2
   Origem: github.com/google/fonts → ofl/poppins  (subset latin)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root{

  /* --- Rampa roxa documentada (Manual v1.0 §9.2) --- */
  --p900:#260C3A;
  --p800:#34114F;
  --p700:#4A1A6B;
  --p600:#5C2A7E;
  --p400:#8A63A8;
  --p100:#EFE7F6;
  --p50 :#F7F3FB;
  --p-deep:#2E0A3E;        /* roxo dos documentos de ago/set 2026 */

  /* --- Laranja --- */
  --orange    :#F59000;     /* Manual v1.0 */
  --orange-alt:#F7941D;     /* documentos recentes */
  --orange600 :#E07E00;     /* sobre fundo claro — contraste ~3.4:1 */

  /* --- Neutros --- */
  --ink   :#241433;
  --muted :#6E5A82;
  --line  :#E6DCF0;
  --hilite:#FFF1DD;
  --yellow:#FFF7D6;
  --white :#FFFFFF;

  /* --- Semânticas --- */
  --teal      :#0E8A8A;
  --green     :#28A05A;
  --green-dark:#1E7C45;
  --red       :#D6453F;
  --red-dark  :#C0392B;
  /* Âmbar escuro, para blocos de aviso com texto branco por cima. O `--accent` e o `--orange600` são de marcação,
     não de fundo: branco sobre eles fica abaixo de 3:1 e o aviso de armazém lê-se de longe ou não serve. */
  --amber-dark:#A85E00;

  /* --- Zonas operacionais (mapas e gráficos) --- */
  --z-sul     :#F59000;    /* Aveiro / Válega        */
  --z-litoral :#4A1A6B;    /* Litoral Norte / Fão    */
  --z-interior:#0E8A8A;    /* Interior / P. da Barca */

  /* --- Estados de incidência (proposta Cainiao, TARIFA 21/08) --- */
  --st-driver :#E2493B;    /* com o motorista        */
  --st-hub    :#E8B30E;    /* parado no hub          */
  --st-retorno:#F7941D;    /* em retorno             */
  --st-rota   :#3D7BFA;    /* em rota                */
  --st-perdido:#8E44AD;    /* potencial perdido      */

  /* --- Barra da rota: como acabou cada paragem (apps/core/metricas.py, 14/09/2026) --- */
  --rota-entregue :var(--green-dark);
  --rota-ausente  :#E8B30E;    /* cliente ausente (5524)          */
  --rota-tempo    :#9A949F;    /* falta de tempo (5530)           */
  --rota-morada   :var(--red); /* morada incorreta (5525, 5548)   */
  --rota-outras   :var(--p400);/* outras incidências              */
  --rota-cancelado:#3D7BFA;    /* tarefa cancelada                */

  /* --- Pin do mapa: a morada que contradiz o CP7 (D18, 16/09/2026) --- */
  --pin-suspeito  :var(--st-retorno); /* laranja de estado: marcador, nunca texto de corpo */

  /* --- Pacote prioritário: 4 dias ou mais de armazém (DO23, apps/core/metricas.py, 16/09/2026) --- */
  --pacote-prioritario:var(--st-hub);  /* é literalmente o estado «parado no hub» */

  /* --- Mascote (medidos nos ficheiros oficiais, 3/09/2026) --- */
  --mascote-roxo   :#2E0A3E;   /* silhueta: 100% dos píxeis opacos */
  --mascote-roxo-md:#6C3F80;   /* corpo, tom claro   */
  --mascote-roxo-sm:#451D59;   /* corpo, tom escuro  */
  --mascote-laranja:#FF8E01;   /* ⚠ SÓ ILUSTRAÇÃO — 2,2:1 sobre branco */

  /* ======================================================================
     PALETA OFICIAL — decisão fechada em 3/09/2026
     O roxo foi confirmado por medição: mascote-roxa.png é 100% #2E0A3E.
     O laranja da mascote (#FF8E01) é cor de ilustração e não serve para
     interface; o acento de UI mantém-se #F7941D, com #E07E00 sobre claro.
     ====================================================================== */
  --brand           :var(--mascote-roxo);
  --accent          :var(--orange-alt);
  --accent-on-light :var(--orange600);   /* laranja legível sobre branco */

  /* --- Superfícies --- */
  --bg        :var(--p50);
  --surface   :var(--white);
  --surface-2 :var(--p50);
  --chrome    :var(--brand);             /* navegação, cabeçalhos de tabela */
  --on-chrome :#EDE4F4;

  /* --- Escala tipográfica (Manual §9.3) --- */
  --f-kicker :0.72rem;   /* 11-12px UPPERCASE .24em */
  --f-micro  :0.78rem;
  --f-small  :0.86rem;
  --f-body   :0.95rem;
  --f-card   :1.05rem;
  --f-h2     :1.35rem;
  --f-h1     :1.75rem;
  --f-cover  :2.6rem;

  --lh-tight :1.15;
  --lh-body  :1.55;

  /* --- Espaço, raio, sombra --- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow-card:0 8px 22px rgba(46,15,69,.07);
  --shadow-lift:0 12px 30px rgba(46,15,69,.12);

  /* --- Alvos de toque (o motorista usa com luvas, em movimento) --- */
  --tap-min:48px;

  color-scheme:light;
}

/* --------------------------------------------------------------------------
   3. BASE
   Compromisso deliberado com um único aspeto: conteúdo claro + chrome roxo.
   O uso real é ao sol, na rua — inverter para escuro reduz a legibilidade.
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--f-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{font-weight:700;color:var(--brand);line-height:var(--lh-tight);
  margin:0 0 var(--sp-3);text-wrap:balance}
h1{font-size:var(--f-h1)}
h2{font-size:var(--f-h2)}
h3{font-size:var(--f-card);font-weight:600}
p{margin:0 0 var(--sp-4)}

a{color:var(--brand);text-decoration-color:var(--accent);text-underline-offset:3px}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* --------------------------------------------------------------------------
   4. COMPONENTES
   -------------------------------------------------------------------------- */

/* Kicker de secção — Manual §9.3 */
.lf-kicker{
  font-size:var(--f-kicker);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--accent-on-light);
  margin:0 0 var(--sp-2);
}
.lf-on-dark .lf-kicker{color:var(--accent)}

/* Barra de navegação */
.lf-nav{
  background:var(--chrome);
  color:var(--on-chrome);
  padding:var(--sp-3) var(--sp-5);
}
.lf-nav a{color:var(--on-chrome);text-decoration:none;
  padding:var(--sp-2) var(--sp-1);display:inline-block}
.lf-nav a:hover,.lf-nav a[aria-current="page"]{color:var(--accent)}

/* Cartão */
.lf-card{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  box-shadow:var(--shadow-card);
}
.lf-card__icon{
  width:32px;height:32px;border-radius:9px;
  background:var(--brand);color:var(--white);
  display:flex;align-items:center;justify-content:center;flex:none;
}

/* Tabela — thead na cor da marca, zebra p50, destaque HILITE */
.lf-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.lf-table{width:100%;border-collapse:collapse;background:var(--surface);font-size:var(--f-small)}
.lf-table thead th{
  background:var(--chrome);color:var(--white);
  font-weight:600;text-align:left;
  padding:var(--sp-3);white-space:nowrap;
}
.lf-table td{padding:var(--sp-3);border-bottom:1px solid var(--line);vertical-align:top}
.lf-table tbody tr:nth-child(even){background:var(--surface-2)}
.lf-table tr.is-highlight{background:var(--hilite)}
.lf-table .num{font-variant-numeric:tabular-nums;text-align:right}

/* Callout escuro — Manual §9.5. Gradiente linear: seguro no WeasyPrint. */
.lf-callout{
  background:linear-gradient(155deg,var(--p700) 0%,var(--p900) 100%);
  color:#EFE7F6;
  border-radius:var(--r-lg);
  padding:var(--sp-5);
}
.lf-callout h2,.lf-callout h3{color:var(--white)}

/* Alertas */
.lf-alert{border:1px solid;border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-3);font-size:var(--f-small)}
.lf-alert--info{background:#EEF3FB;border-color:#CFDDF1;color:#1B3A6B}
.lf-alert--ok  {background:#EAF7EF;border-color:#BFE6CD;color:var(--green-dark)}
.lf-alert--warn{background:var(--hilite);border-color:#F0D9AE;color:#7A5210}
.lf-alert--err {background:#FBE9E7;border-color:#F2C2BD;color:var(--red-dark)}

/* Faixa de indicadores */
.lf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--sp-3)}
.lf-stat{background:linear-gradient(155deg,var(--p700),var(--p800));
  color:var(--white);border-radius:var(--r-md);padding:var(--sp-4)}
.lf-stat--accent{background:linear-gradient(155deg,var(--accent),var(--orange600))}
.lf-stat__n{font-size:1.9rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  display:block;margin-bottom:var(--sp-1)}
.lf-stat__l{font-size:var(--f-kicker);text-transform:uppercase;letter-spacing:.14em;opacity:.85}

/* Botões — altura mínima de toque garantida */
.lf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap-min);padding:var(--sp-3) var(--sp-5);
  border:0;border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--f-body);font-weight:600;
  cursor:pointer;text-decoration:none;
}
.lf-btn--primary  {background:var(--brand);color:var(--white)}
.lf-btn--accent   {background:var(--accent);color:var(--p900)}
.lf-btn--ok       {background:var(--green-dark);color:var(--white)}
.lf-btn--danger   {background:var(--red-dark);color:var(--white)}
.lf-btn--ghost    {background:transparent;color:var(--brand);border:1px solid var(--line)}
.lf-btn[disabled],.lf-btn[aria-busy="true"]{opacity:.55;pointer-events:none}

/* Chips de estado — cor + texto, nunca só cor (WCAG 1.4.1) */
.lf-chip{display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:var(--f-micro);font-weight:600;
  padding:var(--sp-1) var(--sp-2);border-radius:999px;
  border:1px solid currentColor;background:var(--surface)}
.lf-chip--driver {color:var(--st-driver)}
.lf-chip--hub    {color:#8A6A00}
.lf-chip--retorno{color:var(--orange600)}
.lf-chip--rota   {color:#2B57B8}
.lf-chip--perdido{color:var(--st-perdido)}
.lf-chip--ok     {color:var(--green-dark)}

/* Pontos de mapa — legenda partilhada com o Leaflet (ver §9.6 do padrão) */
.lf-legend{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  font-size:var(--f-micro);color:var(--muted)}
.lf-legend span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.lf-legend i{width:12px;height:12px;border-radius:50%;
  box-shadow:0 0 0 3px var(--white),0 0 0 4px var(--line)}

/* --------------------------------------------------------------------------
   5. RELATÓRIOS A4 (WeasyPrint)
   Restrições confirmadas no Manual §11 e respeitadas aqui:
     · sem CSS Grid            → flexbox
     · sem radial-gradient     → PNG pré-renderizado em background-image
     · sem RGBA sobre RGB      → cores sólidas
     · emojis não renderizam   → glifos seguros: → ✓ € ▪ ● ▸ ► ✔ ✖ ⚑ ⚠ ± !
     · ✕ e ▸ não existem na Poppins → desenhar programaticamente
   -------------------------------------------------------------------------- */
@page{size:A4;margin:0}

.lf-page{
  width:210mm;min-height:297mm;
  padding:18mm 16mm 16mm;
  background:var(--white);
  page-break-after:always;
  display:flex;flex-direction:column;
}
.lf-page:last-child{page-break-after:auto}

.lf-page__head{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid var(--line);
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-5);
}
.lf-page__brand{display:flex;align-items:center;gap:var(--sp-3)}
.lf-page__brand img{width:34px;height:34px}
.lf-wordmark{font-weight:700;font-size:.8rem;line-height:1.05;letter-spacing:.04em}
.lf-wordmark b{display:block;color:var(--brand)}
.lf-wordmark i{display:block;font-style:normal;color:var(--accent-on-light)}
.lf-page__section{font-size:var(--f-kicker);text-transform:uppercase;
  letter-spacing:.26em;color:var(--muted)}

.lf-page__body{flex:1}

.lf-page__foot{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);
  padding-top:var(--sp-2);margin-top:var(--sp-5);
  font-size:.56rem;color:var(--muted);
}

/* Capa — gradiente linear (seguro no WeasyPrint) + mascote como marca de água.
   Os glows radiais do Manual §9.2 não são suportados pelo WeasyPrint. Se forem
   mesmo necessários, pré-renderizar em PNG e trocar por background-image. */
.lf-cover{
  background:linear-gradient(160deg,var(--p800) 0%,var(--p900) 100%);
  color:var(--white);
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
}
.lf-cover::before{                      /* mascote espelhada, 6% — Manual §9.4 */
  content:"";
  position:absolute; right:-18mm; top:24mm;
  width:150mm; height:105mm;
  background:url("../img/mascote-branca.d939dcd940ce.png") no-repeat center/contain;
  opacity:.06;
  transform:scaleX(-1);
}
.lf-cover h1,.lf-cover .lf-ident{position:relative}
.lf-cover h1{color:var(--white);font-size:var(--f-cover)}
.lf-cover .lf-ident{font-size:var(--f-small);color:#C9B6D8;margin-top:var(--sp-6)}

/* Mascote — regras de uso (Manual §9.4)
   .lf-mascote        cabeçalhos e assinaturas, versão a cor
   .lf-mascote--dark  sobre fundo escuro, versão branca
   .lf-mascote--flat  monocromática, sobre fundo claro
   Nunca distorcer nem recolorir fora da paleta. */
.lf-mascote{width:34px;height:auto;flex:none}
.lf-mascote--dark{filter:none}
.lf-badge{                              /* círculo branco + mascote a 72% */
  width:128px;height:128px;border-radius:50%;
  background:var(--white) url("../img/mascote-cor.e2b7cbba429e.png") no-repeat center/72%;
}

/* Colunas "Faz / Não faças" — inline-flex evita o bug dos pontos duplicados */
.lf-do,.lf-dont{list-style:none;padding:0;margin:0}
.lf-do li,.lf-dont li{display:flex;gap:var(--sp-2);padding:var(--sp-2) 0;
  border-bottom:1px solid var(--line);font-size:var(--f-small)}
.lf-do li::before {content:"✔";color:var(--green-dark);font-weight:700;display:inline-flex}
.lf-dont li::before{content:"✖";color:var(--red-dark);font-weight:700;display:inline-flex}

@media print{
  body{background:var(--white)}
  .lf-no-print{display:none!important}
}

/* --------------------------------------------------------------------------
   6. UTILITÁRIOS MÍNIMOS
   Substituem o Tailwind CDN. Deliberadamente poucos: se precisar de mais,
   provavelmente falta um componente, não uma classe utilitária.
   -------------------------------------------------------------------------- */
.lf-wrap{max-width:74rem;margin:0 auto;padding:0 var(--sp-4)}
.lf-measure{max-width:38rem}
.lf-stack   >*+*{margin-top:var(--sp-4)}
.lf-stack-sm>*+*{margin-top:var(--sp-2)}
.lf-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.lf-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.lf-between{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
.lf-muted{color:var(--muted)}
.lf-num{font-variant-numeric:tabular-nums}
.lf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

:root{--dialog-backdrop:rgba(38,12,58,.48)}