/* =========================================================================
   Magda Platform · peau « Ferramenta » (09/09/2026).

   Un logiciel professionnel pour EXS : minimal, clair, une seule couleur
   d'action. Cette feuille est chargée APRÈS styles.css et ne fait que
   corriger sa peau : jetons, typographie, coquille en barre latérale,
   tableaux, formulaires, boutons. La structure des écrans (grilles de
   planning, agenda, funil) reste dans styles.css.

   Ce qui change, et pourquoi :
   01  plus aucune capitale interlettrée en mono sur les titres, étiquettes,
       boutons et en-têtes de colonne : c'est du texte, en Archivo, casse de
       phrase. Le mono ne reste que pour la DONNÉE (heures, nombres, codes).
   02  la navigation devient une barre latérale : cinq familles, tous les
       écrans visibles d'un coup, aucun menu à dérouler.
   03  une seule couleur d'action, le teal d'EXS ; le noir n'est plus une
       couleur de bouton. moss / ocre / rouge gardent leur sens d'état.
   ========================================================================= */

:root {
  --paper: #f6f7f6;
  --paper-2: #ffffff;
  --ink: #131a18;
  --ink-2: #3c4744;
  --muted: #6b7673;
  --line: #d9dedb;
  --line-2: #e8ecea;

  --accent: #0c6255;
  --accent-2: #0a5449;
  --accent-tint: #e3efec;

  --moss: #2e5e4c;
  --moss-tint: #dfeae4;
  --ochre: #8a6512;
  --ochre-tint: #f3ead4;
  --ochre-deep: #6f510e;
  --red: #a33a2f;
  --red-tint: #f3e0dc;

  --cobalto: var(--accent);
  --dev-amarelo: #fff3c4;

  --raio: 6px;
  --raio-2: 10px;
  --sidebar: 236px;
  --largura-max: 1180px;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9375rem;
  display: block;
}

/* --- Coquille : barre latérale + contenu ---------------------------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-header {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-bottom: 0;
  border-right: 1px solid var(--line);
  background: var(--paper-2);
}

.app-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-header__row {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

.app-header__row--top {
  padding: 18px 16px 12px;
  border-bottom: 1px solid var(--line-2);
}

.app-header__row--nav {
  border-top: 0;
  padding: 8px 8px 16px;
  flex: 1;
}

.app-header__identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-header__logo {
  height: 26px;
}

.app-header__rule {
  display: none;
}

.app-header__orglabel {
  display: block;
  font-family: var(--face-texte);
  font-size: 0.6875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.app-header__orgname,
.app-header__brand {
  font-family: var(--face-texte);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.app-header__orgbtn > summary {
  min-height: 36px;
}

.app-header__orgbtn .app-header__orgmenu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: var(--raio-2);
  background: var(--paper-2);
  box-shadow: 0 8px 24px rgba(19, 26, 24, 0.08);
  padding: 4px;
}

.app-header__caret {
  font-size: 0.7em;
  color: var(--muted);
  margin-left: 4px;
}

/* Les familles : un intitulé calme, puis la liste des écrans. `details`
   reste ouvert (attribut open posé dans base.html) : rien à dérouler. */
.app-header__screens {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.app-header__grupo {
  position: static;
}

.app-header__grupo > summary,
.app-header__screen {
  font-family: var(--face-texte);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 10px;
  min-height: 0;
  border: 0;
  background: none;
  pointer-events: none;
}

.app-header__grupo > summary .app-header__caret {
  display: none;
}

.app-header__screen--active {
  color: var(--ink);
  border-color: transparent;
  background: none;
}

.app-header__grupo .app-header__orgmenu {
  position: static;
  min-width: 0;
  border: 0;
  background: none;
  padding: 2px 0 0;
  box-shadow: none;
}

.app-header__org {
  font-family: var(--face-texte);
  font-size: 0.875rem;
  color: var(--ink-2);
  padding: 7px 10px;
  min-height: 34px;
  border-radius: var(--raio);
  margin: 0 0 1px;
}

.app-header__org:hover {
  background: var(--paper);
  color: var(--ink);
}

.app-header__org--active {
  background: var(--accent-tint);
  color: var(--accent-2);
  font-weight: 600;
}

.app-header__org--secundario {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Identité en pied de barre. */
.app-header__identidade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-2);
}

.app-header__identidade-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-header__identidade-nome {
  font-weight: 600;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header__identidade-papel {
  font-family: var(--face-texte);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.app-header__logout .btn {
  min-height: 32px;
  padding: 4px 10px;
}

/* Ligne d'ambiente : une ligne calme au-dessus du contenu, plus un titre
   en capitales. */
.ambiente {
  font-family: var(--face-texte);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--muted);
  padding: 6px 32px;
  border-bottom: 1px solid var(--line-2);
  background: var(--paper-2);
}

.ambiente--demonstracao {
  color: var(--ochre-deep);
}

.dev-actor {
  background: var(--dev-amarelo);
  border-bottom: 1px solid #e6d58f;
  font-size: 0.8125rem;
  padding: 6px 32px;
  gap: 12px;
}

.dev-actor__badge {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}

.dev-actor label {
  margin: 0;
}

.app-main {
  max-width: var(--largura-max);
  margin: 0;
  padding: 28px 32px 64px;
  width: 100%;
}

.flash-wrap {
  max-width: var(--largura-max);
  margin: 0;
  padding: 20px 32px 0;
}

.flash {
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--paper-2);
  font-size: 0.875rem;
}

/* L'erreur se dit par le fond et par l'encre, jamais par un lisere lateral. */
.flash--error {
  border-color: var(--red);
  background: var(--red-tint);
  color: var(--red);
}

.statusbar {
  font-family: var(--face-texte);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--muted);
  padding: 10px 32px;
  border-top: 1px solid var(--line-2);
  background: var(--paper-2);
}

.skip-link:focus {
  left: var(--sidebar);
}

/* --- Typographie ---------------------------------------------------------- */

h1 {
  font-family: var(--face-texte);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0 0 6px;
}

h2 {
  font-family: var(--face-texte);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 8px;
  margin-top: 28px;
}

h1 + p,
h1 + .hint {
  color: var(--ink-2);
  max-width: 64ch;
}

a {
  color: var(--accent-2);
}

/* Étiquettes, en-têtes, repères : Archivo, casse de phrase. Le mono se
   garde pour la donnée (colonnes de chiffres, codes, heures). */
label,
legend,
thead th,
.count-card__label,
.member-facts dt,
.ficha__factos dt,
.funil__titulo,
.analise__resumo,
.paginacao__estado,
.hoje__quando,
.hoje__meta,
.hoje__proxima-titulo,
.hoje__carteira label,
.forma-lead label,
.coach-move__form label,
.form-nova-sessao label,
.login-form__campo label,
.plano-criar label,
.plano-legenda,
.plano-atalhos,
.resposta__natureza,
.plano-bloco__natureza,
.plano-bloco__gestos,
.bloco__estado,
.bloco__accao-marca,
.leads__empresa,
.leads__detalhe,
.leads__tentativas,
.plano-presencas__marca,
.plano-presencas__orfa,
.salto,
.aghead > div,
.plano-cab > div,
.leads td[data-etiqueta]::before {
  font-family: var(--face-texte);
  letter-spacing: 0;
  text-transform: none;
}

label,
legend {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 4px;
}

thead th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 8px 12px 8px 0;
}

td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.875rem;
}

tbody tr:hover td {
  background: var(--paper-2);
}

.leads__empresa,
.leads__detalhe,
.leads__tentativas,
.hoje__quando,
.hoje__meta,
.paginacao__estado,
.plano-legenda {
  font-size: 0.75rem;
  color: var(--muted);
}

.badge,
.status-text {
  font-family: var(--face-texte);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Chiffres ------------------------------------------------------------- */

.count-card {
  border-left: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--raio-2);
  background: var(--paper-2);
}

.count-card__label {
  font-size: 0.8125rem;
  color: var(--muted);
}

.count-card__value {
  font-family: var(--face-wide);
  font-size: 2rem;
  letter-spacing: -0.03em;
  margin-top: 4px;
}

/* --- Boutons -------------------------------------------------------------- */

.btn {
  font-family: var(--face-texte);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--raio);
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn--primary:hover {
  background: var(--accent-2);
}

.btn--secondary {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}

.btn--secondary:hover {
  border-color: var(--ink-2);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
}

.seg {
  font-family: var(--face-texte);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  min-height: 34px;
  border-radius: var(--raio);
  color: var(--ink-2);
}

.seg[aria-current="page"],
.seg--active {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ink);
  font-weight: 600;
}

/* --- Formulaires ---------------------------------------------------------- */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea {
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  padding: 7px 10px;
  min-height: 36px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

textarea {
  min-height: 8rem;
}

.filtro {
  gap: 12px 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--raio-2);
  background: var(--paper-2);
}

/* --- Blocs d'écran --------------------------------------------------------- */

.painel-bloco {
  border: 1px solid var(--line);
  border-radius: var(--raio-2);
  background: var(--paper-2);
  padding: 18px 20px;
}

.painel-bloco h2 {
  margin-top: 0;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 10px;
}

.hint {
  font-size: 0.8125rem;
  color: var(--muted);
}

.ficha {
  border-left: 0;
  border: 1px solid var(--line);
  border-radius: var(--raio-2);
  background: var(--paper-2);
  padding: 16px 18px;
}

.estado-final,
.recusa {
  border-radius: var(--raio-2);
}

.analise {
  border: 1px solid var(--line);
  border-radius: var(--raio-2);
  background: var(--paper-2);
  padding: 12px 16px;
}

.analise__resumo {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

/* --- Tableaux de leads : la lettre de priorité et la situation ----------- */

.leads table {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--raio-2);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.leads thead th:first-child,
.leads td:first-child {
  padding-left: 14px;
}

.leads thead th {
  background: var(--paper);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* --- Écran étroit --------------------------------------------------------- */

@media (max-width: 900px) {
  .app-shell {
    display: block;
  }

  .app-header {
    position: static;
    width: auto;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .app-header__screens {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  .app-main,
  .flash-wrap,
  .ambiente,
  .dev-actor,
  .statusbar {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- Canais : caixa de entrada ------------------------------------------- */

.counts--linha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}

.canais__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 12px 0 16px;
  align-items: center;
}

.canais__separador {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 8px;
}

.canais {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--raio-2);
  background: var(--paper-2);
  overflow: hidden;
}

.canais__item + .canais__item {
  border-top: 1px solid var(--line-2);
}

.canais__ligacao {
  display: grid;
  grid-template-columns: 92px 200px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  color: var(--ink);
  text-decoration: none;
}

.canais__ligacao:hover {
  background: var(--paper);
}

/* PAS DE LISERE D'ETAT SUR LE COTE. L'etat de chaque fil est deja ecrit en
   toutes lettres dans la ligne (`status-text`, canais_lista.html), et cette
   mention porte sa couleur. Un baton colore en plus ne disait rien de neuf et
   donnait a la liste l'air d'un gabarit. */

.canais__canal {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.canais__quem strong {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canais__lead,
.canais__responsavel,
.canais__contagem {
  font-size: 0.75rem;
  color: var(--muted);
}

.canais__previa {
  font-size: 0.875rem;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canais__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.status-text--nova,
.status-text--pendente {
  color: var(--ochre-deep);
}

.status-text--precisa_humano,
.status-text--rouge {
  color: var(--red);
}

.status-text--magda_propos {
  color: var(--accent-2);
}

.status-text--respondida {
  color: var(--moss);
}

.canais__voltar {
  margin: 0 0 8px;
  font-size: 0.8125rem;
}

.canais__gestos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.fio {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}

.fio__msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--raio-2);
  border: 1px solid var(--line);
  background: var(--paper-2);
}

.fio__msg--saida {
  align-self: flex-end;
  background: var(--accent-tint);
  border-color: transparent;
}

/* Le message de Magda ne porte plus de lisere : `fio__quem` nomme deja son
   auteur au-dessus de chaque bulle. */

.fio__quem {
  margin: 0 0 4px;
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.fio__corpo {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.9375rem;
}

.canais__rascunho {
  border-color: var(--accent);
  max-width: 720px;
}

.canais__rascunho textarea,
.forma-lead textarea {
  width: 100%;
  min-height: 7rem;
}

.canais__propor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.hint--inline {
  border: 0;
  padding: 0;
  margin: 0;
}

@media (max-width: 900px) {
  .counts--linha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .canais__ligacao {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .canais__meta {
    align-items: flex-start;
    flex-direction: row;
    gap: 10px;
  }
}

/* --- Analise --------------------------------------------------------------- */

.grafico {
  display: block;
  margin: 12px 0 8px;
  overflow: visible;
}

.grafico__barra {
  fill: var(--accent);
  opacity: 0.85;
}

.grafico__valor {
  font-family: var(--face-mono);
  font-size: 11px;
  fill: var(--ink-2);
}

.grafico__rotulo {
  font-family: var(--face-texte);
  font-size: 11px;
  fill: var(--muted);
}

.tabela-compacta {
  margin-top: 8px;
  font-size: 0.8125rem;
}

.tabela-compacta th,
.tabela-compacta td {
  padding: 6px 8px 6px 0;
}

.tabela-compacta .num {
  text-align: right;
  font-family: var(--face-mono);
  font-variant-numeric: tabular-nums;
}

.tabela-compacta__total td {
  font-weight: 600;
  border-top: 1px solid var(--line);
}

.funil-barras {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funil-barras li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 90px;
  gap: 10px;
  align-items: center;
  font-size: 0.8125rem;
}

.funil-barras__pista {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--line-2);
  overflow: hidden;
}

.funil-barras__valor {
  display: block;
  height: 100%;
  background: var(--accent);
}

.funil-barras__numero {
  font-family: var(--face-mono);
  text-align: right;
}

.funil-barras__numero small {
  color: var(--muted);
}

.hoje__indice a,
.plano-atalhos a,
.plano-legenda span {
  font-family: var(--face-texte);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8125rem;
}

/* --- Fin des liseres lateraux -----------------------------------------------
   Retour de Baptiste du 09/09/2026 : les batons de couleur sur le cote font
   « genere par une machine ». Ils sont eteints ici plutot que dans styles.css,
   pour que la peau reste une couche qu'une seule ligne de base.html enleve.

   AUCUN SIGNAL N'EST PERDU, et c'est la condition pour les retirer : chacun de
   ces blocs porte deja son sens autrement, par un fond teinte ou par la
   couleur de son encre. Le lisere ne faisait que le repeter une seconde fois.

   CE QUI N'EST PAS TOUCHE, ET POURQUOI. `.plano-bloco` garde son bord gauche :
   ce n'est pas de l'ornement mais la couleur par coach demandee par le client
   le 31/08/2026 (« retrouver son coach instantanement »), et le trait tirete
   qui la double pour la nature PT existe pour ne pas confier une information a
   la seule couleur (WCAG 1.4.1). L'enlever supprimerait une fonction. */

.hint,
.readonly-banner,
.estado-final,
.recusa,
.plano-conflitos,
.duplicados,
.aprovacao,
.count-card--ocupacao {
  border-left: 0;
}

/* Le fond teinte portait deja l'etat ; on lui rend un cadre net plutot qu'un
   bord unique. `.aprovacao` en a besoin pour une autre raison : son fond est
   blanc, le lisere etait sa seule limite, et l'eteindre sans rien mettre a la
   place ferait disparaitre l'encadre. */
.readonly-banner,
.estado-final,
.recusa,
.aprovacao {
  border: 1px solid var(--line);
  border-radius: var(--raio);
}

/* Le retrait de `.count-card--ocupacao` n'a plus de baton a compenser : la
   carte porte deja le cadre pose plus haut pour toutes les cartes. */
.count-card--ocupacao {
  padding-left: 18px;
}

/* Sans son baton, ce retrait ne retenait plus rien. */
.duplicados {
  padding-left: 0;
}

/* --- Fiche membre (directive du 21/09/2026, W3) ------------------------------
   Liste dense et fiche a onglets. Un onglet actif se lit a la graisse et au trait,
   jamais a une couleur : la couleur reste semantique (l'avertissement ocre). */

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 12px 0 20px;
  border-bottom: 1px solid var(--line);
}

.abas a {
  padding: 8px 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
}

.abas a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.abas a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}

.ficha-membro__voltar {
  margin: 0 0 4px;
  font-size: 0.8125rem;
}

.ficha-membro__factos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 24px;
  margin: 0 0 20px;
}

.ficha-membro__factos dt {
  color: var(--ink-2);
}

.ficha-membro__factos dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ficha-membro__aviso {
  border-left: 3px solid var(--ochre);
  background: var(--ochre-tint);
  color: var(--ink);
  padding: 8px 12px;
  margin: 0 0 16px;
}

.ficha-membro__origem,
.lista-vazia {
  color: var(--ink-2);
  margin: 12px 0;
}

.membros-tabela {
  width: 100%;
  margin-top: 12px;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.membros-tabela th,
.membros-tabela td {
  padding: 6px 12px 6px 0;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

.membros-tabela thead th {
  /* --muted a 0.75rem donne 4,38:1, sous le seuil AA (mesure du 21/09/2026) : les
     en-tetes des ecrans neufs passent a --ink-2. */
  color: var(--ink-2);
}

#membros-q {
  width: 17rem;
  max-width: 100%;
}

.membros-paginacao .paginacao__estado {
  color: var(--ink-2);
}

.membros-tabela tbody th {
  font-weight: 500;
}

.membros-tabela .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.membros__ordenar {
  color: var(--ink);
  text-decoration: none;
}

.membros__ordenar:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .ficha-membro__factos {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ficha-membro__factos dd {
    margin-bottom: 8px;
  }
}

/* --- Finances e@sport (18/09/2026) --------------------------------------------
   Sorties des gabarits financas_membro.html et devedores.html le 21/09/2026 : la
   politique de contenu refuse desormais tout element <style> (style-src-elem 'self',
   app/webapp/seguranca.py). Regles recopiees telles quelles. */

.fin-linhas { display: grid; grid-template-columns: max-content max-content 1fr; gap: 0.25rem 1.5rem; align-items: baseline; margin: 0 0 1.25rem; }
.fin-linhas dt { font-weight: 600; }
.fin-linhas dd { margin: 0; font-variant-numeric: tabular-nums; }
.fin-data { color: var(--ink-2); }
.fin-em-divida { color: var(--red); font-weight: 600; }
.fin-aviso { border-left: 3px solid var(--ochre); background: var(--ochre-tint); padding: 0.5rem 0.75rem; margin: 0 0 1.25rem; }
.fin-tabela { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.fin-tabela caption { text-align: left; font-weight: 600; padding: 0 0 0.25rem; }
.fin-tabela th { color: var(--ink-2); }
.fin-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-multa { color: var(--red); }
.fin-vazio { color: var(--ink-2); }
.fin-janela { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: end; margin: 0 0 0.75rem; }
@media (max-width: 600px) {
  .fin-linhas { grid-template-columns: max-content 1fr; }
  .fin-linhas .fin-data { grid-column: 1 / -1; margin-bottom: 0.5rem; }
}
/* Devedores : le tableau sans marge basse, les dates sans retour a la ligne. */
.devedores .fin-tabela { margin: 0; }
.devedores .fin-data { white-space: nowrap; }


/* ---------------------------------------------------------------------------
   Ecran « Por validar » (completude de l'import, W5, 24/09/2026).
   Une ligne = un champ d'un membre, lue de gauche a droite : qui, quoi, ce que
   les sources en disent. Les candidats sont des boutons, parce qu'un clic
   decide ; la source de chaque candidat est a cote, en gris, parce qu'elle
   informe sans decider. Hierarchie par taille, graisse et espace seulement.
--------------------------------------------------------------------------- */
.validacao__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 20px;
  font-size: 0.875rem;
}

.validacao__filtros a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.validacao__filtros a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.validacao {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
}

.validacao__linha {
  border-bottom: 1px solid var(--line-2);
  padding: 16px 0;
}

.validacao__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 10px;
}

.validacao__membro {
  font-weight: 600;
}

.validacao__unidade,
.validacao__campo {
  color: var(--muted);
  font-size: 0.875rem;
}

.validacao__campo::before {
  content: "· ";
}

.validacao__estado {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.validacao__estado--aberto {
  color: var(--ochre-deep);
}

.validacao__candidatos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
}

.validacao__candidatos li form {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.validacao__escolher {
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  padding: 6px 12px;
  cursor: pointer;
}

.validacao__escolher:hover {
  border-color: var(--accent);
  color: var(--accent-2);
}

.validacao__fonte {
  color: var(--muted);
  font-size: 0.8125rem;
}

.validacao__anomalia {
  color: var(--red);
  font-size: 0.8125rem;
  margin: 0 0 8px;
}

.validacao__sem-candidato {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}

/* Telephone : l'etat passe sous le nom, les candidats s'empilent en pleine largeur
   pour rester atteignables au pouce. */
@media (max-width: 640px) {
  .validacao__estado { margin-left: 0; width: 100%; }
  .validacao__candidatos { flex-direction: column; gap: 10px; }
  .validacao__candidatos li form { flex-wrap: wrap; }
  .validacao__escolher { width: 100%; text-align: left; }
}