/* Login animado do painel da Yara. Só tokens: troca de tema muda a cena inteira. */
.dl {
  --dl-a: var(--marca, #2eb0c4); --dl-b: var(--marca-2, #1d7f95);
  --dl-c1: #2eb0c4; --dl-c2: #ffd466; --dl-c3: #8eb459; --dl-c4: #d16060;
  --dl-pt: rgba(29,127,149,.22);
  --dl-chip: #fff; --dl-chip-txt: #1d2a2a; --dl-chip-aro: #1d7f95;
  --dl-fio: rgba(29,127,149,.45); --dl-fio-anim: #1d7f95;
  --dl-metal: #8fa4a8; --dl-metal-esc: #5d7276; --dl-junta: #273434;
  --dl-belt: #34484a; --dl-belt-l: rgba(255,255,255,.35); --dl-rolo: #9fb4b7;
  --dl-eng: #4d6a6e; --dl-eng-2: #2eb0c4; --dl-eng-3: #8eb459;
  --dl-caixa: #ffd466; --dl-caixa-aro: #b58a1e;
  --dl-cena-bg: linear-gradient(160deg, #e6f5f8 0%, #d6ebef 55%, #cfe6ea 100%);
  --dl-erro-bg: color-mix(in srgb, var(--erro, #b91c1c) 10%, transparent);
  position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  min-height: calc(100vh - 68px); width: 100vw; margin-inline: calc(50% - 50vw);
  margin-top: -28px; margin-bottom: -72px; box-sizing: border-box; overflow: hidden;
}
html[data-tema="moderado"] .dl {
  --dl-pt: rgba(46,176,196,.22);
  --dl-chip: #1c3a52; --dl-chip-txt: #eaf6f8; --dl-chip-aro: #2eb0c4;
  --dl-fio: rgba(46,176,196,.5); --dl-fio-anim: #5fd0e0;
  --dl-metal: #8fb0bd; --dl-metal-esc: #5f7f8c; --dl-junta: #14283d;
  --dl-belt: #0f2236; --dl-belt-l: rgba(255,255,255,.28); --dl-rolo: #6f93a3;
  --dl-eng: #6f93a3;
  --dl-cena-bg: linear-gradient(160deg, #1d3a5c 0%, #193252 55%, #142a47 100%);
}
html[data-tema="escuro"] .dl {
  --dl-pt: rgba(46,176,196,.2);
  --dl-chip: #10262a; --dl-chip-txt: #e8f4f5; --dl-chip-aro: #2eb0c4;
  --dl-fio: rgba(46,176,196,.5); --dl-fio-anim: #5fd0e0;
  --dl-metal: #6f8d93; --dl-metal-esc: #3f565b; --dl-junta: #0b1618;
  --dl-belt: #1a2c2f; --dl-belt-l: rgba(255,255,255,.22); --dl-rolo: #55737a;
  --dl-eng: #55808a;
  --dl-cena-bg: linear-gradient(160deg, #0a1517 0%, #0c1a1d 55%, #091214 100%);
}

/* ---- cena ---- */
.dl-cena {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 72px clamp(16px, 3vw, 48px) 32px; min-width: 0;
  background: radial-gradient(var(--dl-pt) 1.2px, transparent 1.6px) 0 0 / 26px 26px, var(--dl-cena-bg);
  border-right: 1px solid var(--aro, rgba(0,0,0,.12));
}
.dl-palco { width: 100%; max-width: 900px; margin-inline: auto; }
.dl-svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 150px); overflow: visible; }
.dl-legenda { margin: 0 auto; max-width: 52ch; text-align: center; font-size: 1rem; color: var(--dl-chip-txt); text-wrap: balance; }
.dl-legenda strong { color: var(--dl-chip-txt); font-weight: 800; letter-spacing: .02em; }

.dl-fio { fill: none; stroke: var(--dl-fio); stroke-width: 2; stroke-linecap: round; }
.dl-fio-anim { fill: none; stroke: var(--dl-fio-anim); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 11; animation: dl-fluxo 1.6s linear infinite; opacity: .8; }
.dl-pulso { fill: var(--dl-c2); filter: drop-shadow(0 0 4px var(--dl-c2)); }
.dl-chip rect { fill: var(--dl-chip); stroke: var(--dl-chip-aro); stroke-width: 1.5; }
.dl-chip text { fill: var(--dl-chip-txt); font: 700 17px var(--fonte, system-ui, sans-serif); }
.dl-anel { fill: none; stroke: var(--dl-a); stroke-width: 2; }
.dl-hub-miolo { fill: #1f2d2e; }
.dl-hub-letra { fill: #fff; font: 800 46px var(--fonte, system-ui, sans-serif); }
.dl-hub-nome { fill: var(--dl-chip-txt); font: 800 13px var(--fonte, system-ui, sans-serif); letter-spacing: .24em; }

.dl-eng path { fill: var(--dl-eng); stroke: var(--dl-junta); stroke-width: 1.5; }
.dl-eng-2 path { fill: var(--dl-eng-2); }
.dl-eng-3 path { fill: var(--dl-eng-3); }
.dl-furo { fill: var(--dl-junta); }

.dl-mon-corpo { fill: #273434; stroke: var(--dl-chip-aro); stroke-width: 1.5; }
.dl-mon-tit { fill: #9fd9e2; font: 700 11px var(--fonte, system-ui, sans-serif); letter-spacing: .12em; }
.dl-mon-val { fill: #ffd466; font: 800 14px var(--fonte, system-ui, sans-serif); }
.dl-barra { fill: #2eb0c4; opacity: .55; transform-box: fill-box; transform-origin: bottom; animation: dl-barra 3.2s ease-in-out infinite; }
.dl-linha-graf { fill: none; stroke: #ffd466; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: dl-desenha 5s ease-in-out infinite; }
.dl-ponto-graf { fill: #fff; }

.dl-metal { fill: var(--dl-metal); stroke: var(--dl-junta); stroke-width: 1.5; }
.dl-metal-esc { fill: var(--dl-metal-esc); stroke: var(--dl-junta); stroke-width: 1.5; }
.dl-junta { fill: var(--dl-junta); stroke: var(--dl-a); stroke-width: 2; }
.dl-garra { fill: none; stroke: var(--dl-junta); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

.dl-belt { fill: var(--dl-belt); }
.dl-belt-linha { stroke: var(--dl-belt-l); stroke-width: 2; stroke-dasharray: 10 14; stroke-linecap: round; animation: dl-esteira 1.2s linear infinite; }
.dl-rolo { fill: var(--dl-rolo); }
.dl-caixa rect { fill: var(--dl-caixa); stroke: var(--dl-caixa-aro); stroke-width: 1.5; }
.dl-caixa-fita { stroke: var(--dl-caixa-aro); stroke-width: 1.5; fill: none; }

@keyframes dl-fluxo { to { stroke-dashoffset: -28; } }
@keyframes dl-esteira { to { stroke-dashoffset: -24; } }
@keyframes dl-barra { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes dl-desenha { 0% { stroke-dashoffset: 100; } 55%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }

/* ---- formulário ---- */
.dl-lado { display: flex; align-items: center; justify-content: center; padding: 72px clamp(16px, 4vw, 56px) 40px; min-width: 0; }
.dl-cartao {
  width: 100%; max-width: 440px; box-sizing: border-box; padding: clamp(22px, 3vw, 36px);
  background: var(--card); border: 1px solid var(--aro); border-radius: var(--r-xl, 28px); box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.dl-eyebrow { display: inline-block; margin-bottom: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marca-texto); }
.dl-cartao h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1.15; text-wrap: balance; }
.dl-sub { margin: 0 0 24px; color: var(--suave); font-size: 1rem; line-height: 1.5; }
.dl-form { display: grid; gap: 18px; }
.dl-grupo { display: grid; gap: 6px; min-width: 0; }
.dl-grupo label { font-size: .95rem; font-weight: 700; line-height: 1.3; color: var(--texto); }
.dl-campo {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 1rem; /* >= 16 px */
  color: var(--texto); background: color-mix(in srgb, var(--texto) 6%, transparent);
  border: 1.5px solid var(--aro); border-radius: var(--r-md, 12px);
}
.dl-campo:focus-visible { outline: 3px solid var(--marca-texto); outline-offset: 2px; border-color: var(--marca-texto); }
.dl-campo[aria-invalid="true"] { border-color: var(--erro, #b91c1c); }
.dl-linha-senha { display: flex; gap: 8px; align-items: stretch; }
.dl-linha-senha .dl-campo { flex: 1 1 auto; min-width: 0; }
.dl-olho { flex: 0 0 auto; min-width: 44px; min-height: 48px; display: inline-flex; align-items: center; gap: 6px; }
.dl-olho-ico { display: inline-flex; }
.dl-erro {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md, 12px);
  color: var(--erro, #b91c1c); background: var(--dl-erro-bg); border: 1px solid color-mix(in srgb, var(--erro, #b91c1c) 45%, transparent);
  font-size: .95rem; font-weight: 600; line-height: 1.4;
}
.dl-erro[hidden] { display: none; }
.dl-erro-ico { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.dl-entrar { min-height: 52px; }
.dl-rodape { margin: 22px 0 0; text-align: center; font-size: .9rem; color: var(--suave); }

/* ---- celular / tablet: faixa de cena no topo, formulário logo abaixo ---- */
@media (max-width: 860px) {
  .dl { grid-template-columns: minmax(0, 1fr); min-height: 0; margin-top: -28px; }
  .dl-cena { padding: 0; height: auto; border-right: 0; border-bottom: 1px solid var(--aro); justify-content: stretch; }
  .dl-palco { max-width: none; aspect-ratio: 760 / 548; }
  .dl-svg { height: 100%; max-height: none; }
  .dl-legenda { display: none; }
  .dl-lado { padding: 20px 14px 40px; align-items: flex-start; }
}

/* ---- movimento reduzido: tudo parado (SMIL é pausado pelo login.js) ---- */
@media (prefers-reduced-motion: reduce) {
  .dl *, .dl *::before, .dl *::after { animation: none !important; transition: none !important; }
  .dl-linha-graf { stroke-dashoffset: 0; }
  .dl-barra { transform: scaleY(.7); }
}