@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
html{font-size:clamp(16px,14px + 0.156vw,18px);}
/* ══════════════════════════════════════════════════════════════════════
   DON — Design System
   Identidade visual única do ecossistema: preto + cobre, tipografia
   Michroma/Montserrat + wordmark chanfrada (Turret Road, esticada),
   atmosfera de luz diagonal + textura + arcos em cobre (disco de vinil).
   Extraído da tela de login (login.html) — fonte da verdade visual.
   Todas as fontes são auto-hospedadas (./fonts/) — não depende de rede.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"DonWordmark";
  src:url("./fonts/turret-road-800.woff2") format("woff2");
  font-weight:800;
  font-display:swap;
}
@font-face{
  font-family:"Michroma";
  src:url("./fonts/michroma-400.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("./fonts/montserrat-300.woff2") format("woff2");
  font-weight:300;
  font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("./fonts/montserrat-400.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("./fonts/montserrat-500.woff2") format("woff2");
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("./fonts/montserrat-600.woff2") format("woff2");
  font-weight:600;
  font-display:swap;
}

:root{
  /* Interface sempre escura por design (não segue tema claro/escuro do SO nem
     do navegador) -- declarar isso explicitamente evita que o Chrome (recurso
     "Adaptar automaticamente a aparência dos sites ao tema do navegador",
     em Configurações › Aparência) tente "reclarear" a página sozinho achando
     que ela não foi pensada pra tema escuro, o que deixa o fundo cinza-claro
     mas os cards continuam escuros -- texto quase ilegível. */
  color-scheme: dark;
  /* ── paleta base ── */
  --don-black:#030303;
  --don-surface:#0B0A09;      /* painéis/cards */
  --don-surface-2:#151516;    /* elementos elevados sobre o painel */
  --don-ivory:#F1EAE3;
  --don-copper:#B9784E;
  --don-copper-2:#D8A47A;
  --don-border:rgba(227,217,207,.20);
  --don-border-soft:rgba(227,217,207,.12);
  --don-panel:rgba(9,9,10,.89);
  --don-text:#F1EAE3;
  --don-text-muted:#AAA29A;
  --don-text-faint:#756C66;
  /* ── acentos semânticos (mantém a paleta, não usa cor fora dela) ── */
  --don-success:#8fae6a;
  --don-danger:#d68162;
  --don-warning:var(--don-copper-2);
  --don-info:#8fa3ae;
  /* ── tipografia ──
     Manrope é a fonte principal de toda a interface (atualização 2026-09-07:
     revertido de Inter pra Manrope a pedido do Flávio, como parte do refino
     tipográfico geral do Hub -- pesos 400/500/600 majoritariamente, 700 só
     pra alertas/números prioritários; Inter segue como fallback).
     Michroma/Fraunces seguem reservadas só pro lockup da wordmark "DON Flow"
     (ver .don-wordmark abaixo) — não usar em mais nada. */
  --don-font-wordmark:"DonWordmark","Michroma",sans-serif;
  --don-font-display:"Michroma","Manrope","Inter",sans-serif;
  --don-font-body:"Manrope","Inter",sans-serif;
  --don-font-mono:ui-monospace,"SF Mono","Consolas","Liberation Mono",monospace;
}

/* Refino tipográfico 2026-09-07: força Manrope em toda a interface (o resto
   do app ainda tem 'Montserrat'/'Michroma' espalhados em regras antigas,
   algumas até com !important) -- especificidade (0,2,1) bate qualquer regra
   de peso igual declarada antes. Único ponto de fuga: o lockup da wordmark
   "DON Flow" (.don-wordmark-don / .don-wordmark-flow), que preserva a
   identidade visual de marca. */
body *:not(.don-wordmark-don):not(.don-wordmark-flow){
  font-family:"Manrope","Inter",sans-serif !important;
}

/* ══════════════════════ base / reset leve ══════════════════════ */
.don-root{
  background:var(--don-black);
  color:var(--don-text);
  font-family:var(--don-font-body);
}
.don-root *{ box-sizing:border-box; }
input[type=checkbox],input[type=radio]{ accent-color:var(--don-copper); }

/* ══════════════════════ wordmark "DON Flow" chanfrada ══════════════════════
   Uso: <span class="don-wordmark"><span class="don-wordmark-don">DON</span>
   <span class="don-wordmark-flow">Flow</span></span> dentro de um elemento
   com font-size definido (a wordmark herda font-size do pai/inline). Para o
   tamanho grande de destaque, use o modificador .don-wordmark--hero.
   "DON" mantém a fonte/tratamento originais; "Flow" é a assinatura em
   Fraunces itálica, cobre suave, levemente rotacionada -- ver briefing de
   marca "DON Flow". */
.don-wordmark{
  display:inline-flex;
  align-items:flex-start;
  line-height:1;
  margin-right:.18em;
}
.don-wordmark-don{
  display:inline-block;
  font-family:var(--don-font-wordmark);
  font-weight:800;
  font-size:1em;
  letter-spacing:.02em;
  line-height:1;
  transform:scaleX(1.85);
  transform-origin:center;
  color:var(--don-ivory);
}
.don-wordmark-flow{
  display:inline-block;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-weight:500;
  font-size:.46em;
  line-height:1;
  color:var(--don-copper-2);
  letter-spacing:.005em;
  white-space:nowrap;
  margin:.02em .32em 0 2.3em;
  transform:rotate(-9deg);
  transform-origin:left bottom;
  user-select:none;
}
.don-wordmark--hero{
  font-size:clamp(38px,4.85vw,81px);
}
.don-wordmark--hero .don-wordmark-don{
  text-shadow:0 2px 20px rgba(255,255,255,.10);
}
.don-wordmark--panel{ font-size:1.625rem; }
.don-wordmark--sm{ font-size:1.125rem; }

/* régua de cobre com ponto luminoso, usada abaixo de títulos/wordmarks */
.don-rule{
  width:187px; max-width:90%; height:1px;
  background:var(--don-copper);
  margin:23px auto 18px;
  position:relative;
}
.don-rule--sm{ width:70px; margin:0 auto 40px; }
.don-rule:after{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--don-copper-2);
  position:absolute; right:-3px; top:-3px;
  box-shadow:0 0 8px rgba(230,161,109,.7);
}

/* ══════════════════════ atmosfera: textura + luz diagonal ══════════════
   Aplique .don-atmosphere num container position:relative + overflow:hidden
   (ex: a própria tela cheia). Os pseudo-elementos ficam atrás do conteúdo
   (z-index negativo) — o container precisa de isolation:isolate. */
.don-atmosphere{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--don-black);
}
.don-atmosphere:before{
  content:"";
  position:absolute; inset:0; z-index:-3;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,248,240,.11) 0%, rgba(185,174,164,.06) 24%, rgba(30,28,27,.02) 46%, transparent 64%),
    radial-gradient(ellipse 48% 52% at 12% 4%, rgba(210,202,193,.20) 0%, rgba(90,83,77,.10) 34%, transparent 68%),
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.40) 100%);
}
.don-atmosphere:after{
  content:"";
  position:absolute; inset:0; z-index:-2;
  pointer-events:none;
  opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise2)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  mix-blend-mode:overlay;
  -webkit-mask-image:radial-gradient(ellipse 48% 52% at 12% 4%, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 34%, rgba(0,0,0,0) 72%);
  mask-image:radial-gradient(ellipse 48% 52% at 12% 4%, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 34%, rgba(0,0,0,0) 72%);
}

/* arcos em cobre — disco de vinil no canto inferior-esquerdo.
   É um SVG (não dá pra fazer só em CSS): copie o bloco abaixo dentro do
   container .don-atmosphere, como primeiro filho. Ele já vem com as 30
   circunferências medidas a partir da referência oficial (login.html). */
.don-rings{
  position:absolute; z-index:-1;
  left:-1044px; top:46px;
  width:1300px; height:1300px;
  opacity:.9;
  pointer-events:none;
}
/* Marcação de referência (cole como <svg class="don-rings" ...>...</svg>):
<svg class="don-rings" viewBox="0 0 1300 1300" aria-hidden="true">
  <g fill="none">
    <circle cx="650" cy="650" r="620" stroke="#e0a06a" stroke-opacity="0.55" stroke-width="1"/>
    <circle cx="650" cy="650" r="599" stroke="#c87645" stroke-opacity="0.28" stroke-width="1"/>
    <circle cx="650" cy="650" r="578" stroke="#8a7d72" stroke-opacity="0.154" stroke-width="1"/>
    <circle cx="650" cy="650" r="557" stroke="#8a7d72" stroke-opacity="0.151" stroke-width="1"/>
    <circle cx="650" cy="650" r="536" stroke="#8a7d72" stroke-opacity="0.148" stroke-width="1"/>
    <circle cx="650" cy="650" r="515" stroke="#8a7d72" stroke-opacity="0.145" stroke-width="1"/>
    <circle cx="650" cy="650" r="494" stroke="#8a7d72" stroke-opacity="0.142" stroke-width="1"/>
    <circle cx="650" cy="650" r="473" stroke="#8a7d72" stroke-opacity="0.139" stroke-width="1"/>
    <circle cx="650" cy="650" r="452" stroke="#8a7d72" stroke-opacity="0.136" stroke-width="1"/>
    <circle cx="650" cy="650" r="431" stroke="#8a7d72" stroke-opacity="0.133" stroke-width="1"/>
    <circle cx="650" cy="650" r="410" stroke="#8a7d72" stroke-opacity="0.13" stroke-width="1"/>
    <circle cx="650" cy="650" r="389" stroke="#8a7d72" stroke-opacity="0.127" stroke-width="1"/>
    <circle cx="650" cy="650" r="368" stroke="#8a7d72" stroke-opacity="0.124" stroke-width="1"/>
    <circle cx="650" cy="650" r="347" stroke="#8a7d72" stroke-opacity="0.121" stroke-width="1"/>
    <circle cx="650" cy="650" r="326" stroke="#8a7d72" stroke-opacity="0.118" stroke-width="1"/>
    <circle cx="650" cy="650" r="305" stroke="#8a7d72" stroke-opacity="0.115" stroke-width="1"/>
    <circle cx="650" cy="650" r="284" stroke="#8a7d72" stroke-opacity="0.112" stroke-width="1"/>
    <circle cx="650" cy="650" r="263" stroke="#8a7d72" stroke-opacity="0.109" stroke-width="1"/>
    <circle cx="650" cy="650" r="242" stroke="#8a7d72" stroke-opacity="0.106" stroke-width="1"/>
    <circle cx="650" cy="650" r="221" stroke="#8a7d72" stroke-opacity="0.103" stroke-width="1"/>
    <circle cx="650" cy="650" r="200" stroke="#8a7d72" stroke-opacity="0.1" stroke-width="1"/>
    <circle cx="650" cy="650" r="179" stroke="#8a7d72" stroke-opacity="0.097" stroke-width="1"/>
    <circle cx="650" cy="650" r="158" stroke="#8a7d72" stroke-opacity="0.094" stroke-width="1"/>
    <circle cx="650" cy="650" r="137" stroke="#8a7d72" stroke-opacity="0.091" stroke-width="1"/>
    <circle cx="650" cy="650" r="116" stroke="#8a7d72" stroke-opacity="0.088" stroke-width="1"/>
    <circle cx="650" cy="650" r="95" stroke="#8a7d72" stroke-opacity="0.085" stroke-width="1"/>
    <circle cx="650" cy="650" r="74" stroke="#8a7d72" stroke-opacity="0.082" stroke-width="1"/>
    <circle cx="650" cy="650" r="53" stroke="#8a7d72" stroke-opacity="0.079" stroke-width="1"/>
    <circle cx="650" cy="650" r="32" stroke="#8a7d72" stroke-opacity="0.076" stroke-width="1"/>
    <circle cx="650" cy="650" r="11" stroke="#8a7d72" stroke-opacity="0.073" stroke-width="1"/>
  </g>
</svg>
*/

/* ══════════════════════ painéis / cards ══════════════════════ */
.don-panel{
  border:1px solid var(--don-border);
  border-radius:26px;
  background:linear-gradient(160deg,rgba(15,15,16,.96),rgba(4,4,5,.90));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 28px 80px rgba(0,0,0,.6);
}
.don-card{
  border:1px solid var(--don-border);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(17,17,18,.96),rgba(6,6,7,.92));
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.don-card:hover{
  transform:translateY(-4px);
  border-color:var(--don-copper);
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px var(--don-copper) inset;
}

/* ══════════════════════ inputs ══════════════════════ */
.don-field label{
  display:block;
  font-size:0.8125rem;
  font-weight:500;
  color:var(--don-text-muted);
  letter-spacing:.04em;
  margin-bottom:8px;
}
.don-field input,.don-field select{
  width:100%;
  height:52px;
  border-radius:8px;
  border:1px solid rgba(230,224,217,.25);
  background:rgba(4,4,5,.65);
  padding:0 16px;
  color:var(--don-ivory);
  font:400 0.9375rem "Inter","Manrope",sans-serif;
  transition:border-color .2s,box-shadow .2s;
}
.don-field input:focus,.don-field select:focus{
  outline:none;
  border-color:var(--don-copper-2);
  box-shadow:0 0 0 3px rgba(200,118,69,.14);
}
.don-field input::placeholder{ color:var(--don-text-faint); }

/* ══════════════════════ botões ══════════════════════ */
.don-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:50px; padding:0 26px;
  border-radius:8px;
  border:1px solid var(--don-copper-2);
  background:transparent;
  color:var(--don-copper-2);
  font:600 0.875rem "Manrope","Inter",sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .2s,color .2s,box-shadow .2s;
}
.don-btn:hover{
  background:var(--don-copper);
  color:#110c09;
  box-shadow:0 0 24px rgba(200,118,69,.18);
}
.don-btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; padding:0 16px;
  border-radius:6px;
  border:1px solid var(--don-border);
  background:transparent;
  color:var(--don-text-muted);
  font:500 0.8125rem "Manrope","Inter",sans-serif;
  cursor:pointer;
  transition:.2s;
}
.don-btn-ghost:hover{ border-color:var(--don-copper); color:var(--don-copper-2); }

/* ══════════════════════ badges / status ══════════════════════ */
.don-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.6875rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 12px; border-radius:6px;
  color:var(--don-copper-2);
  background:rgba(200,118,69,.14);
}
.don-status-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--don-success);
  box-shadow:0 0 0 0 rgba(143,174,106,.5);
  animation:donPulseDot 2s infinite;
  flex-shrink:0;
}
@keyframes donPulseDot{
  0%{box-shadow:0 0 0 0 rgba(143,174,106,.45);}
  70%{box-shadow:0 0 0 8px rgba(143,174,106,0);}
  100%{box-shadow:0 0 0 0 rgba(143,174,106,0);}
}

/* ══════════════════════ modais ══════════════════════ */
.don-modal-overlay{
  position:fixed; inset:0; z-index:100000;
  background:rgba(0,0,0,.65);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.don-modal-overlay.visible{ display:flex; }
.don-modal{
  width:100%; max-width:420px; max-height:86vh; overflow:auto;
  padding:28px 30px;
  border:1px solid var(--don-border);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(17,17,18,.98),rgba(6,6,7,.96));
  box-shadow:0 28px 80px rgba(0,0,0,.7);
  color:var(--don-text);
}
.don-modal h3{
  font-family:var(--don-font-display);
  font-size:1.1875rem; font-weight:600; letter-spacing:-.02em;
  margin-bottom:6px;
  color:var(--don-ivory);
}
.don-modal h4{
  font-family:var(--don-font-display);
  font-size:0.8125rem; font-weight:500; letter-spacing:.03em;
  color:var(--don-text-muted);
  margin:16px 0 8px;
}

@media (prefers-reduced-motion: reduce){
  .don-status-dot{ animation:none!important; }
}