/* ══════════════════════════════════════════════════════════════════════════
   PORTAL GRUPO UVEL — redesign 2026-07-21 v2
   Conceito novo: não existe mais uma "janela" central própria do portal. `.login-visual` (o
   mesmo painel de arte que existe em pedidoweb/login.html e intranet/login.html) é agora o
   fundo FIXO de tela cheia da página inteira, sempre visível — mostra por padrão o herói da
   INTRANET (mais tenants são intranet) e troca pro herói do PedidoWeb só quando ele é
   escolhido (mesmo mecanismo de sempre: `data-tema` no ancestral comum troca os tokens de cor
   E qual `.hero-tema` fica visível). O painel de formulário (`.login-form-panel`) virou uma
   gaveta fixa à direita que desliza de fora da tela (direita) pra dentro quando um sistema é
   escolhido, e volta pra fora ao trocar de sistema. Os tokens de cada tema abaixo são os
   valores reais de cada `assets/css/variables.css`/`assets/css/pages/login.css` de pedidoweb e
   intranet (copiados de propósito, não referenciados por link cross-projeto: o portal precisa
   funcionar 100% independente dos outros 2 — ver claude.md > Independência). Se o design de
   origem mudar, ressincronizar aqui é manual — documentado como processo, não é automático.
══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Tokens compartilhados (idênticos nos 2 projetos de origem) */
    --space-xs: 4px;   --space-sm: 8px;   --space-md: 16px;
    --space-lg: 24px;  --space-xl: 32px;  --space-2xl: 48px;
    --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.12);
    --transition: 180ms ease;

    /* Identidade PRÓPRIA do portal — união das 2 famílias de cor, nunca uma cópia de nenhuma
       das duas isoladas. Usada só no dock de ícones (que não pertence a nenhum tema). */
    --portal-blue: #1877F2;
    --portal-teal: #0F6E5C;
    --portal-ink: #16213A;
    --portal-ink-soft: #4A5568;
}

/* ── Tema PEDIDOWEB — valores reais de pedidoweb/assets/css/variables.css + login.css ── */
[data-tema="pedidoweb"] {
    --login-ink: #14284A;
    --login-secondary: #4C6B8A;
    --c-accent: #1877F2;
    --c-accent-light: #E7F0FE;
    --c-accent-dark: #166FE5;
    --c-surface: #FFFFFF;
    --c-surface-alt: #F8F9FA;
    --c-text-primary: #1C1E21;
    --c-text-secondary: #495057;
    --c-text-muted: #9AA3B5;
    --c-border: #DDDFE2;
    --c-border-strong: #CCD0D5;
    --c-danger: #DC3545;  --c-danger-light: #F8D7DA;
    --c-success: #198754; --c-success-light: #E8F5E9;
    --hero-bg-a: #EAF2FF; --hero-bg-b: #F7FAFF;
    --hero-glow-1: rgba(24, 119, 242, .16);
    --hero-glow-2: rgba(76, 107, 138, .14);
}

/* ── Tema INTRANET — valores reais de intranet/assets/css/variables.css + login.css.
     Uvel/Trentino/Unisul... são o MESMO app (multi-tenant), mesmo visual — só o texto da marca
     no login-card muda ("INTRANET · Trentino" etc.), nunca a paleta. ── */
[data-tema="intranet"] {
    --login-ink: #16332B;
    --login-secondary: #3E6FA8;
    --c-accent: #0F6E5C;
    --c-accent-light: #DEEEE8;
    --c-accent-dark: #0B5245;
    --c-surface: #FFFFFF;
    --c-surface-alt: #F8F9F7;
    --c-text-primary: #202B27;
    --c-text-secondary: #52605A;
    --c-text-muted: #8B9791;
    --c-border: #DEE3DD;
    --c-border-strong: #C7CFC6;
    --c-danger: #B23B30;  --c-danger-light: #F6E4E1;
    --c-success: #2F8F5B; --c-success-light: #E3F3E9;
    --hero-bg-a: #E7F1EC; --hero-bg-b: #F6F8F6;
    --hero-glow-1: rgba(15, 110, 92, .14);
    --hero-glow-2: rgba(62, 111, 168, .12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.portal-app { position: relative; height: 100vh; }

/* ══════════════════════════════════════════
   FUNDO/HERÓI — tela cheia, fixo, sempre montado (os 2 `.hero-tema` trocam por baixo via
   `data-tema` + `hidden`, nunca o `.login-visual` em si).
══════════════════════════════════════════ */
.login-visual {
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 0;
    background: linear-gradient(155deg, var(--hero-bg-a) 0%, var(--hero-bg-b) 55%, #FFFFFF 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
    overflow: hidden;
    padding: var(--space-2xl);
    transition: background 240ms ease, right .5s cubic-bezier(.65, 0, .35, 1);
}

/* Quando o formulário está aberto, o fundo encolhe (não fica coberto) -- o conteúdo flexível
   (texto + diagrama/cartões) se reorganiza sozinho dentro da caixa mais estreita, igual ao
   split-screen original de cada sistema (pedido do usuário: "o fundo precisa ser empurrado
   para a esquerda para o formulario nao tampar a arte"). */
.portal-app[data-vista="sistema"] .login-visual {
    right: min(460px, 92vw);
}

@media (prefers-reduced-motion: reduce) {
    .login-visual { transition: background 240ms ease; }
}

.login-visual::before {
    content: "";
    position: absolute;
    top: -140px; right: -120px;
    width: 440px; height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hero-glow-1), rgba(0,0,0,0) 70%);
    pointer-events: none;
}

.login-visual::after {
    content: "";
    position: absolute;
    bottom: -180px; left: -110px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hero-glow-2), rgba(0,0,0,0) 70%);
    pointer-events: none;
}

.login-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .05;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Os 2 heróis (#hero-pedidoweb/#hero-intranet) são wrappers só pra poder esconder um dos dois
   inteiro com `hidden` -- sem `display:contents` aqui, o wrapper viraria uma caixa de bloco
   real e quebraria o `justify-content:space-between` de `.login-visual` (achado 2026-07-21: as
   artes flutuantes vinham empilhando à esquerda em vez de ficar à direita, exatamente como no
   sistema de origem). `display:contents` remove a caixa do wrapper da árvore de layout, os
   filhos (texto/arte) voltam a ser filhos diretos do flex container, igual ao original. */
.hero-tema { display: contents; }
.hero-tema[hidden] { display: none; }

/* Levemente acima do centro vertical (2026-07-21, pedido do usuário) -- centralizado exato
   ficava competindo demais com o dock de sistemas logo abaixo. */
.login-visual-content { position: relative; z-index: 1; flex: 1 1 320px; max-width: 480px; transform: translateY(-100px); }

.login-eyebrow {
    display: inline-block;
    font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    /* 2026-07-22 (pedido do usuário): var(--login-secondary) em vez de var(--c-accent) -- vale
       nos 2 temas (não só intranet). No tema pedidoweb esse token é o mesmo #4C6B8A que já
       existia como --login-steel lá (usado no gradiente do .login-rule), replicado também na
       página independente do pedidoweb pro mesmo detalhe bater nos dois lugares. */
    color: var(--login-secondary);
    margin-bottom: var(--space-md);
}

.login-headline {
    margin: 0 0 var(--space-md);
    font-size: clamp(2.1rem, 3.8vw, 3.1rem);
    line-height: 1.1; font-weight: 800; letter-spacing: -.01em;
    color: var(--login-ink);
    text-wrap: balance;
}

.login-headline-accent { color: var(--login-secondary); }

/* "Marcas" (2026-07-21, pedido do usuário) -- só no herói intranet do portal, entre o eyebrow
   e o headline. Reaproveita o mesmo par label+conteúdo do resto do design (rótulo pequeno
   maiúsculo + linha de texto), não é uma lista de chips clicável, só informativa. */
.login-marcas { margin: 0 0 var(--space-md); }
.login-marcas-label {
    display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-text-muted); margin-bottom: 3px;
}
.login-marcas-lista { font-size: .88rem; font-weight: 600; color: var(--login-ink); }

.login-rule {
    display: block; width: 56px; height: 3px; margin-bottom: var(--space-md);
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-accent), var(--login-secondary));
}

.login-tagline { margin: 0; max-width: 380px; font-size: 1rem; line-height: 1.6; color: var(--c-text-secondary); }

/* ── Dock de sistemas (2026-07-21) — FORA dos 2 .hero-tema de propósito: fica visível o tempo
     todo, os heróis trocam por baixo dele sem afetar sua posição. Mesmo slot/disposição das
     antigas chips "Grupos atendidos"/"Departamentos" (canto inferior-esquerdo, pedido do
     usuário) -- removidas dos heróis só neste projeto pra abrir espaço aqui. ── */
.portal-sistemas-dock {
    position: absolute; z-index: 2;
    left: var(--space-2xl); right: var(--space-2xl); bottom: var(--space-2xl);
}

/* Logo InfoTec (2026-07-21) -- fica isolada no canto inferior direito. */
.login-visual-logo {
    position: absolute; z-index: 1;
    right: var(--space-sm); bottom: var(--space-sm);
    height: 105px; width: auto; opacity: .85;
}

/* Créditos (2026-07-21, pedido do usuário: "os creditos devem ir para o centro da tela") --
   saíram do rodapé do card de login e viraram uma faixa centralizada no rodapé do painel
   esquerdo inteiro, independente da logo (que continua isolada no canto). */
.login-visual-creditos {
    position: absolute; z-index: 1;
    left: 0; right: 0; bottom: var(--space-sm);
    margin: 0; font-size: .68rem; color: var(--c-text-muted); text-align: center;
}
.login-visual-creditos a { color: var(--c-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.login-visual-creditos a:hover { color: var(--c-accent); }

.portal-sistemas-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.portal-sistemas-vazio { color: var(--c-text-secondary); font-size: .9rem; }

.portal-sistema-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 108px;
    padding: var(--space-md) var(--space-sm);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: 0 12px 28px rgba(22, 33, 58, .1);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), opacity var(--transition);
}

.portal-sistema-card:hover,
.portal-sistema-card:focus-visible {
    transform: translateY(-3px);
    background: #fff;
    box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--sistema-cor) 45%, transparent);
    outline: none;
}

.portal-sistema-icone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sistema-cor) 14%, white);
    color: var(--sistema-cor);
    flex-shrink: 0;
}

/* Card com logo do GRUPO como imagem principal -- fundo branco neutro em vez do tingido de cor
   (a logo já traz a própria identidade visual, não precisa de fundo colorido competindo).
   2026-07-22: padding removido (pedido do usuário) -- as logos novas já vêm com a própria
   moldura/gradiente arredondado embutido na imagem, então a logo ocupa 100% do espaço interno
   do ícone em vez de sobrar uma margem branca em volta. */
.portal-sistema-icone.com-logo-grupo {
    background: #fff;
    border: 1px solid rgba(22, 33, 58, .08);
}

.portal-sistema-icone svg { width: 24px; height: 24px; }

.portal-sistema-logo-principal { width: 100%; height: 100%; object-fit: contain; }

/* Selo do sistema (ícone da intranet) sobre a logo do grupo, "vazando" pro canto inferior
   direito -- identifica QUE sistema é aquele grupo. */
.portal-sistema-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 20px; height: 20px;
    border-radius: 7px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(22, 33, 58, .25);
}

.portal-sistema-badge img { width: 100%; height: 100%; object-fit: contain; }

.portal-sistema-texto { display: flex; flex-direction: column; align-items: center; gap: 3px; }

.portal-sistema-nome {
    font-size: .78rem;
    font-weight: 700;
    color: #1C1E21;
    text-align: center;
    line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
    .portal-sistema-card { transition: none; }
}

/* ── Herói PedidoWeb: pilha de cartões de pedido flutuando ── */
.pedidos-stack { position: relative; z-index: 1; flex: 0 0 320px; height: 300px; }

.pedido-glow {
    position: absolute; top: 108px; left: 4px; width: 240px; height: 190px;
    background: radial-gradient(circle, rgba(82, 190, 128, .32), rgba(82, 190, 128, 0) 70%);
    filter: blur(6px); pointer-events: none;
}

.pedido-card {
    position: absolute; width: 220px;
    background: var(--c-surface); border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px -16px rgba(22, 33, 58, .25), 0 6px 16px rgba(22, 33, 58, .08);
    padding: var(--space-md);
    display: flex; flex-direction: column; gap: 9px;
}
.card-back { top: 6px; left: 0; transform: rotate(-10deg); z-index: 1; opacity: .92; animation: flutuar-a 6.5s ease-in-out infinite; }
.card-mid  { top: 62px; left: 70px; transform: rotate(6deg); z-index: 2; animation: flutuar-b 5.5s ease-in-out infinite; }
.card-front{ top: 114px; left: 20px; transform: rotate(-3deg); z-index: 3; animation: flutuar-c 7s ease-in-out infinite; }

@keyframes flutuar-a { 0%,100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-10deg) translateY(-6px); } }
@keyframes flutuar-b { 0%,100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(5px); } }
@keyframes flutuar-c { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .card-back, .card-mid, .card-front { animation: none; } }

.pedido-card-head { display: flex; align-items: center; gap: 8px; }
.pedido-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
}
.pedido-card-icon svg { width: 13px; height: 13px; fill: currentColor; }
.pedido-card-id { font-size: .85rem; font-weight: 700; letter-spacing: .02em; color: var(--c-text-primary); }
.pedido-card-status {
    margin-left: auto; font-size: .6rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: #fff; padding: 3px 9px; border-radius: 999px;
}
.pedido-card-line { display: block; height: 7px; border-radius: 4px; background: var(--c-border); }
.pedido-card-check {
    position: absolute; top: -11px; right: -11px; width: 30px; height: 30px; border-radius: 50%;
    background: #52BE80; color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700; box-shadow: 0 8px 16px rgba(82, 190, 128, .4);
}

/* ── Herói Intranet: diagrama de rede (Processos → Subprocessos → Rotinas + 9 satélites) ── */
.processo-flow-parallax { flex: 0 0 auto; width: clamp(420px, 42vw, 640px); aspect-ratio: 560/480; transition: transform .25s ease-out; will-change: transform; }
.processo-flow { position: relative; z-index: 1; width: 100%; height: 100%; opacity: 0; animation: flow-enter .7s .15s ease-out forwards; }
.processo-flow svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.processo-flow-glow {
    position: absolute; top: 50%; left: 41%; width: 62%; height: 62%; transform: translate(-50%, -50%);
    /* 2026-07-22 (pedido do usuário: "um pouco mais de tom azul... naquele blur do satélite de
       Processos") -- 2ª camada radial azul (mesmo tom de --login-secondary) sobreposta à
       original teal, mais sutil (opacidade menor), pra dar um toque de azul sem substituir a
       cor principal do glow. */
    background:
        radial-gradient(circle, rgba(15, 110, 92, .38), rgba(15, 110, 92, 0) 70%),
        radial-gradient(circle, rgba(62, 111, 168, .22), rgba(62, 111, 168, 0) 65%);
    filter: blur(22px); pointer-events: none; z-index: 0;
}
@keyframes flow-enter { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.flow-pipeline { stroke-dasharray: 5 5; animation: flow-dash 1.6s linear infinite; }
@keyframes flow-dash { to { stroke-dashoffset: -20; } }
.flow-node { opacity: 0; animation: flow-node-enter .45s ease-out both, flow-float 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flow-node-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes flow-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.flow-icon-rotinas { animation: flow-spin 7s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flow-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .processo-flow { opacity: 1; animation: none; }
    .flow-pipeline, .flow-node, .flow-icon-rotinas { animation: none; }
    .flow-node { opacity: 1; }
    .flow-packet { display: none; }
    .processo-flow-parallax { transition: none; }
    .flow-node-visual { transition: none; }
    .flow-satellite-line.is-emph { animation: none; }
}
.flow-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12.5px; font-weight: 700; fill: var(--login-ink);
}
.flow-satellite circle:first-child { cursor: pointer; }
.flow-node-visual { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); transform-box: fill-box; transform-origin: center; }
.flow-satellite:hover .flow-node-visual { transform: scale(1.16); }
.flow-satellite:hover .flow-node { animation-play-state: paused; }
.flow-label-sat { font-size: 10.5px; opacity: 0; transition: opacity .2s ease; }
.flow-satellite:hover .flow-label-sat { opacity: 1; }
.flow-satellite-line { transition: stroke .25s ease, stroke-width .25s ease; }
.flow-satellite-line.is-emph { stroke: var(--sat-color); stroke-width: 2.2; stroke-dasharray: 5 5; animation: flow-dash-reverse 1s linear infinite; }
@keyframes flow-dash-reverse { to { stroke-dashoffset: 20; } }

/* ══════════════════════════════════════════
   PAINEL DO FORMULÁRIO — gaveta fixa à direita, some fora da tela até um sistema ser escolhido
   (2026-07-21, pedido do usuário: "o formulario abre deslizando de fora da tela da direita
   para a esquerda, ficando em sua posição original").
══════════════════════════════════════════ */
.login-form-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 3;
    width: min(460px, 92vw);
    background: var(--c-surface);
    overflow-x: hidden; overflow-y: auto;
    box-shadow: -24px 0 48px rgba(22, 33, 58, .18);
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.portal-app[data-vista="sistema"] .login-form-panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .login-form-panel { transition: none; }
}

.login-form-panel::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .035; mix-blend-mode: multiply; pointer-events: none;
}

/* "Seam" colorida (2026-07-21, pedido do usuário) -- igual à borda de `.login-visual` nos
   subdomínios individuais (`.login-seam`), só que aqui fica na borda ESQUERDA do painel (que
   virou uma gaveta fixa própria, não mais adjacente a `.login-visual` num grid). */
.login-form-panel::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    z-index: 2;
    background: linear-gradient(180deg, var(--login-secondary), var(--c-accent));
}

.login-slider {
    position: relative; z-index: 1;
    display: flex; width: 200%; min-height: 100%;
    transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.login-slider[data-active="esqueci"] { transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .login-slider { transition: none; } }

.login-slide { width: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-xl); }

.login-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; animation: login-rise .5s ease both; }
@keyframes login-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .login-card { animation: none; } }

.login-brand { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto var(--space-xl); }
.login-brand-glow {
    position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, var(--c-accent-light), rgba(0,0,0,0) 70%);
    filter: blur(4px); pointer-events: none;
}
.login-brand img.logo { position: relative; width: 152px; height: 152px; object-fit: contain; margin-bottom: var(--space-md); }
.login-word { font-size: 1.3rem; font-weight: 800; letter-spacing: .04em; color: var(--c-text-primary); }
.login-version {
    margin-top: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--c-accent); background: var(--c-accent-light); padding: 3px 10px; border-radius: 999px;
}

.login-title { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; color: var(--c-text-primary); }
.login-subtitle { margin: 0 0 var(--space-xl); font-size: .88rem; color: var(--c-text-secondary); }

#form-login { display: flex; flex-direction: column; gap: var(--space-md); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-secondary); }
.input-with-icon { position: relative; display: flex; align-items: center; }
.field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: var(--c-text-muted); pointer-events: none; }

.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] {
    width: 100%; padding: 13px 16px 13px 40px; font-size: .95rem;
    border: 1px solid var(--c-border-strong); border-radius: var(--radius-md);
    box-sizing: border-box; font-family: inherit; background: var(--c-surface-alt); color: var(--c-text-primary);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.login-card input:focus {
    outline: none; border-color: var(--c-accent); background: var(--c-surface);
    box-shadow: 0 0 0 3px var(--c-accent-light);
}

.login-card input[type="password"] { padding-right: 44px; }

.password-toggle-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 5px;
}
.password-toggle-icon .eye-icon { width: 18px; height: 18px; opacity: .6; }

.login-card button[type="submit"] {
    margin-top: var(--space-xs);
    background-color: var(--c-accent); color: #fff; border: none; border-radius: var(--radius-md);
    padding: 13px 16px; font-size: 1rem; font-weight: 700; cursor: pointer;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow: var(--shadow-sm);
}
.login-card button[type="submit"]:hover { background-color: var(--c-accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.login-card button[type="submit"]:active { transform: translateY(0); }
.login-card button[type="submit"]:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }

.portal-msg {
    display: flex; align-items: center; gap: 8px;
    border-radius: var(--radius-sm); padding: 10px 14px; font-size: .85rem; font-weight: 500;
    margin-bottom: var(--space-md);
}
.portal-msg[hidden] { display: none; }
.portal-msg.erro { background-color: var(--c-danger-light); color: var(--c-danger); border: 1px solid var(--c-danger); }
.portal-msg.sucesso { background-color: var(--c-success-light); color: var(--c-success); border: 1px solid var(--c-success); }

.login-link-row { text-align: right; margin: -8px 0 4px; }
.login-link-row button {
    background: none; border: none; padding: 0; font: inherit; cursor: pointer;
    font-size: .82rem; color: var(--c-text-muted); text-decoration: none;
}
.login-link-row button:hover { color: var(--c-accent); text-decoration: underline; }

.login-back-link {
    display: inline-block; margin-top: var(--space-lg);
    background: none; border: none; padding: 0; font: inherit; cursor: pointer;
    font-size: .82rem; color: var(--c-text-muted);
}
.login-back-link-trocar {
    position: absolute; top: var(--space-lg); left: var(--space-lg); margin: 0; z-index: 2;
}
.login-back-link:hover { color: var(--c-accent); text-decoration: underline; }

/* ══════════════════════════════════════════
   RESPONSIVO
══════════════════════════════════════════ */
@media (max-width: 900px) {
    .login-visual-content { display: none; }
    .pedidos-stack, .processo-flow-parallax { display: none; }
    .login-form-panel { box-shadow: none; width: 100vw; }
    .login-slide { padding: var(--space-lg); }
}

@media (max-width: 640px) {
    .portal-sistemas-dock { left: var(--space-md); right: var(--space-md); bottom: var(--space-md); }
    .portal-sistemas-lista { gap: var(--space-sm); }
    .portal-sistema-card { width: 84px; padding: var(--space-sm); }
    .portal-sistema-icone { width: 44px; height: 44px; }
}

@media (max-height: 800px) {
    .login-back-link-trocar { top: 8px; left: 8px; }
    .login-slide { padding: 8px var(--space-md); }
    .login-brand { margin-bottom: 8px; }
    .login-brand-glow { width: 88px; height: 88px; top: -14px; }
    .login-brand img.logo { width: 86px; height: 86px; margin-bottom: 4px; }
    .login-title { font-size: 1.1rem; margin-bottom: 2px; }
    .login-subtitle { margin-bottom: 10px; font-size: .82rem; }
    .field { gap: 4px; }
    #form-login { gap: 8px; }
    .login-card input[type="text"], .login-card input[type="email"], .login-card input[type="password"] { padding-top: 8px; padding-bottom: 8px; }
    .login-card button[type="submit"] { padding-top: 8px; padding-bottom: 8px; }
    .login-visual { padding: var(--space-md); gap: var(--space-md); }
    .login-headline { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 6px; }
    .login-tagline { font-size: .8rem; }
    .login-visual-content { transform: none; }
    .portal-sistemas-dock { left: var(--space-md); right: var(--space-md); bottom: var(--space-md); }
    .portal-sistema-card { width: 88px; padding: var(--space-sm); }
    .portal-sistema-icone { width: 44px; height: 44px; }
    .login-visual-logo { right: var(--space-xs); bottom: var(--space-xs); height: 80px; }
    .login-visual-creditos { bottom: var(--space-xs); font-size: .6rem; }
    .processo-flow-parallax { width: clamp(230px, 28vw, 340px); }
}