/* Paleta legada (petróleo/dourado, Cormorant/Inter) removida nesta revisão: a tela inteira usa os tokens --lg-* da identidade Íris, declarados mais abaixo. Só --ok sobreviveu — é a cor semântica de status, usada nos badges de "Em acompanhamento", "Atual" e "Realizada". */ :root{ --ok:#4a7a4a; } *{box-sizing:border-box;margin:0;padding:0;} /* overflow-x fica só no : no body ele criaria um container de rolagem e quebraria o position:sticky da sidebar. No elemento raiz o valor propaga para a viewport, então o corte horizontal continua. */ html{overflow-x:hidden;} html,body{color-scheme:light only;-webkit-font-smoothing:antialiased;color:var(--lg-texto);font-family:var(--lg-sans);} /* Sem imagem de fundo: o .main-wrap pinta o creme por cima em toda a largura útil e a sidebar tem o próprio gradiente, então bg-painel-*.png nunca chegava a aparecer aqui — era só download desperdiçado. */ body{ margin:0; min-height:100vh; background-color:var(--lg-creme); } .shell{min-height:100vh;display:flex;position:relative;} .shell::before{content:'';position:absolute;top:0;bottom:0;left:0;width:260px;background:var(--lg-oliva-medio,#6B6047);pointer-events:none;z-index:0;} /* ── Identidade Íris (Central de Pacientes) — tokens em `--lg-*`, ver bloco de login abaixo ── */ .grad-oliva-panel{ background: radial-gradient(circle at 50% 6%, rgba(193,202,197,0.22), transparent 50%), radial-gradient(circle at 50% 96%, rgba(211,203,164,0.18), transparent 55%), radial-gradient(circle at center, #5B523C 0%, #4F4735 55%, #4A4230 100%); } .grad-oliva-btn{ background: radial-gradient(circle at 8% 50%, rgba(193,202,197,0.4), transparent 55%), radial-gradient(circle at 92% 50%, rgba(211,203,164,0.35), transparent 55%), radial-gradient(circle at center, var(--lg-oliva-medio) 0%, #5E5540 55%, var(--lg-marrom-escuro) 100%); }.main-wrap{flex:1;min-width:0;position:relative;z-index:1;background:var(--lg-creme);display:flex;flex-direction:column;} /* ── Main ── */ .main{flex:1;display:flex;flex-direction:column;padding:44px 56px;max-width:1180px;margin:0 auto;width:100%;box-sizing:border-box;} /* ── Topo ── */ .page-header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;} .page-titulo{font-family:var(--lg-serif);font-size:32px;font-weight:500;color:var(--lg-texto);margin:0;} .page-sub{display:none;} .btn-novo-paciente{ display:flex;align-items:center;gap:8px;padding:0 22px;height:46px;border:none;border-radius:10px; color:var(--lg-creme);font-family:var(--lg-sans);font-size:14.5px;font-weight:600;cursor:pointer; white-space:nowrap;flex-shrink:0;transition:filter .15s; } .btn-novo-paciente:hover{filter:brightness(1.06);} .btn-novo-paciente svg{width:16px;height:16px;stroke:currentColor;flex-shrink:0;} .txt-mobile{display:none;} /* ── Busca ── */ /* flex:0 0 auto anula o flex:1 que .busca-wrap traz do app.css: la a busca vive numa linha (.ex-topo, .page-header-row) e precisa esticar na horizontal; aqui ela e filha direta do .main, que e uma coluna flex, e o flex-grow a esticava na vertical — empurrando a lista de pacientes para o rodape e deixando o icone da lupa centralizado no vazio. */ .busca-wrap{position:relative;flex:0 0 auto;max-width:420px;margin-bottom:24px;} .busca-input{ width:100%;box-sizing:border-box;background:var(--lg-card);border:1px solid var(--lg-borda); border-radius:10px;padding:13px 16px 13px 44px;font-size:14.5px; font-family:var(--lg-sans);color:var(--lg-texto);outline:none; transition:border-color .15s,box-shadow .15s; } .busca-input::placeholder{color:var(--lg-rodape);} .busca-input:focus{border-color:var(--lg-oliva);box-shadow:0 0 0 3px rgba(119,110,69,0.16);} .busca-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--lg-terciario);} /* A lista de pacientes (.pac-*) mora no app.css: a aba Painel usa a mesma lista, com outro conjunto de ações. */ /* ── Empty / loading ── */ .estado{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:12px;} .estado svg{width:40px;height:40px;stroke:var(--lg-borda);} .estado-titulo{font-family:var(--lg-serif);font-size:19px;font-weight:500;color:var(--lg-texto);} .estado-sub{font-size:14px;color:var(--lg-marrom);max-width:320px;line-height:1.5;} .estado--vazio{min-height:340px;} .spinner{width:24px;height:24px;border:2px solid var(--lg-borda);border-top-color:var(--lg-oliva);border-radius:50%;animation:spin .7s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} /* ── Rodapé Íris / Atria ── Lockup em duas peças (símbolo + wordmark) seguido de "powered by Atria Group". */ /* ══ Modais (telas 2, 3 e 4 do handoff) ═══════════════════════════════ Um único vocabulário visual para os três modais — "Editar dados cadastrais", "Plano de acompanhamento" e "Nova consulta". Eles compartilham overlay, cartão, títulos, campos e listas de histórico; manter isso em classes (e não em estilo inline, como nos modais antigos) é o que garante que os três continuem idênticos entre si. ═════════════════════════════════════════════════════════════════ */ .md-overlay{ position:fixed;inset:0;z-index:100;padding:40px;box-sizing:border-box; background:rgba(46,42,32,0.45);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;overflow-y:auto; } .md-card{ width:520px;max-width:100%;max-height:calc(100vh - 80px);overflow-y:auto; background:var(--lg-card);border-radius:16px;padding:32px 36px;box-sizing:border-box; box-shadow:0 24px 60px rgba(46,42,32,0.35); } .md-card--largo{width:560px;} .md-card--estreito{width:480px;} .md-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px;} .md-titulo{font-family:var(--lg-serif);font-size:24px;font-weight:500;color:var(--lg-texto);line-height:1.2;} .md-titulo em{font-style:italic;color:#8A7F50;} /* Subtítulo do cabeçalho — usado quando o modal precisa explicar o que faz */ .md-ajuda{font-size:13px;color:var(--lg-marrom);margin-top:4px;line-height:1.45;} /* Nota logo abaixo de um campo (ex.: as regras do plano selecionado) */ .md-campo-nota{font-size:12px;color:var(--lg-terciario);margin-top:6px;line-height:1.45;} .md-fechar{ width:32px;height:32px;border-radius:50%;background:var(--lg-creme);border:none; display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; color:var(--lg-marrom);transition:background .15s; } .md-fechar:hover{background:#EFEADC;} .md-fechar svg{width:15px;height:15px;stroke:currentColor;} /* Identificação da paciente no topo dos modais de plano e consulta */ .md-paciente{margin-top:18px;} .md-paciente-label{font-family:var(--lg-sans);font-size:12px;color:var(--lg-terciario);margin-bottom:4px;} .md-paciente-nome{font-family:var(--lg-serif);font-size:22px;color:var(--lg-texto);} .md-campos{display:flex;flex-direction:column;gap:18px;margin-top:24px;} .md-linha{display:flex;gap:14px;} .md-linha > *{min-width:0;} .md-label{ font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase; color:var(--lg-marrom);margin-bottom:7px; } .md-label span{text-transform:none;font-weight:500;color:var(--lg-terciario);} .md-input,.md-select{ width:100%;box-sizing:border-box;padding:12px 14px;border-radius:10px; border:1px solid var(--lg-borda);background:var(--lg-creme); font-family:var(--lg-sans);font-size:14px;color:var(--lg-texto);outline:none; transition:border-color .15s,box-shadow .15s; } .md-input:focus,.md-select:focus{border-color:var(--lg-oliva);box-shadow:0 0 0 3px rgba(119,110,69,0.16);} .md-select{appearance:none;padding-right:34px;} .md-select-wrap{position:relative;} .md-select-wrap::after{ content:'';position:absolute;right:14px;top:50%;width:8px;height:8px; border-right:2px solid var(--lg-terciario);border-bottom:2px solid var(--lg-terciario); transform:translateY(-70%) rotate(45deg);pointer-events:none; } .md-nota{font-size:12.5px;color:var(--lg-terciario);margin-top:20px;line-height:1.4;} .md-erro{font-size:13px;color:var(--lg-erro);margin-top:14px;line-height:1.4;display:none;} .md-acoes{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:20px;} .md-btn-texto{ padding:12px 20px;font-family:var(--lg-sans);font-size:14px;font-weight:600; color:var(--lg-marrom);background:none;border:none;cursor:pointer;border-radius:8px; } .md-btn-texto:hover{background:var(--lg-creme);} .md-btn-primario{ padding:0 24px;height:46px;border:none;border-radius:10px;color:var(--lg-creme); font-family:var(--lg-sans);font-size:14.5px;font-weight:600;cursor:pointer; transition:filter .15s; } .md-btn-primario:hover:not(:disabled){filter:brightness(1.06);} .md-btn-primario:disabled{opacity:.65;cursor:default;} /* Bloco destacado: "Adicionar novo plano" / formulário de agendamento */ .md-bloco{margin-top:18px;padding:18px;border-radius:12px;border:1px solid var(--lg-borda);background:var(--lg-creme);} .md-bloco-titulo{ font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase; color:var(--lg-marrom);margin-bottom:14px; } .md-bloco .md-label-min{font-size:10.5px;font-weight:600;color:var(--lg-terciario);margin-bottom:6px;text-transform:none;letter-spacing:normal;} .md-bloco .md-input,.md-bloco .md-select{ padding:11px 13px;border-radius:9px;background:var(--lg-card);font-size:13.5px; } .md-bloco .md-select{padding-right:32px;} .md-btn-bloco{ width:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px; border:none;border-radius:9px;color:var(--lg-creme); font-family:var(--lg-sans);font-size:13.5px;font-weight:600;cursor:pointer;transition:filter .15s; } .md-btn-bloco:hover:not(:disabled){filter:brightness(1.06);} .md-btn-bloco:disabled{opacity:.65;cursor:default;} .md-btn-bloco svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0;} .md-bloco-nota{font-size:12px;color:var(--lg-terciario);margin-top:8px;line-height:1.4;font-style:italic;text-align:center;} /* Histórico (vigências de plano, agendamentos) */ .md-hist{margin-top:26px;} .md-hist-titulo{ font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase; color:var(--lg-marrom);margin-bottom:12px; } .md-hist-lista{display:flex;flex-direction:column;gap:10px;} .md-hist-item{ display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px; border:1px solid var(--lg-borda);background:var(--lg-card); } .md-hist-item--atual{background:var(--lg-creme);} .md-hist-item > svg{width:16px;height:16px;stroke:var(--lg-terciario);flex-shrink:0;} /* Linha de consulta: até 3 ações (reagendar/realizada/faltou) não cabem ao lado da data+selo num card de 480px — vira duas fileiras (dados em cima, ações embaixo) em vez de espremer tudo numa linha e quebrar o texto. */ .md-hist-item--col{flex-direction:column;align-items:stretch;gap:10px;} .md-hist-item--col-topo{display:flex;align-items:center;gap:14px;} .md-hist-item--col-acoes{display:flex;justify-content:flex-end;gap:8px;} .md-hist-icone{width:16px;height:16px;stroke:var(--lg-terciario);flex-shrink:0;} .md-hist-corpo{flex:1;min-width:0;} .md-hist-titulo-item{font-size:14px;color:var(--lg-texto);font-weight:600;} .md-hist-sub{font-size:12.5px;color:var(--lg-marrom);margin-top:2px;} .md-hist-vazio{font-size:13px;color:var(--lg-terciario);padding:14px 2px;line-height:1.5;} /* Link de envio de exames, mostrado dentro da linha da consulta — reaparece sempre que a linha existe (não só na hora do agendamento). */ .md-hist-link-linha{display:flex;align-items:center;gap:6px;margin-top:5px;min-width:0;} .md-hist-link-linha svg{width:12px;height:12px;stroke:#5B7A9C;flex-shrink:0;} .md-hist-link{ font-size:12px;color:#5B7A9C;text-decoration:underline;text-decoration-color:rgba(91,122,156,.4); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1; } .md-hist-link:hover{color:#4A6883;} .md-hist-link-copiar{ font-size:11px;font-weight:700;color:var(--lg-oliva);text-decoration:underline; cursor:pointer;background:none;border:none;padding:0;font-family:var(--lg-sans);flex-shrink:0; } .md-hist-link-copiar:hover{color:var(--lg-oliva-hover);} .md-tag{ flex-shrink:0;padding:4px 12px;border-radius:999px;font-size:10.5px;font-weight:700; letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap; } .md-tag--atual,.md-tag--realizada{background:rgba(74,122,74,.1);color:var(--ok);} .md-tag--futura{background:#EFEADC;color:#8A7F58;} .md-tag--faltou{background:rgba(166,69,58,0.12);color:#A6453A;} .md-tag--cancelada{background:#EFEADC;color:var(--lg-terciario);} .md-tag--reagendada{background:rgba(154,122,45,.14);color:#8A6D1F;} .md-hist-edit{display:flex;gap:8px;flex-wrap:wrap;flex:1;align-items:center;} .md-hist-edit input{ box-sizing:border-box;padding:8px 10px;border-radius:8px;border:1px solid var(--lg-borda); background:var(--lg-creme);font-family:var(--lg-sans);font-size:13px;color:var(--lg-texto);outline:none; } .md-hist-edit input.md-hist-edit-data{width:110px;} .md-hist-edit input.md-hist-edit-hora{width:70px;} .md-hist-edit-ok,.md-hist-edit-cancelar{ width:32px;height:32px;border-radius:8px;border:none;cursor:pointer;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .md-hist-edit-ok{background:var(--ok);} .md-hist-edit-ok svg{stroke:#FDFCFA;} .md-hist-edit-cancelar{background:var(--lg-borda);} .md-hist-edit-cancelar svg{stroke:var(--lg-marrom);} .md-hist-acao{ flex-shrink:0;width:30px;height:30px;border-radius:8px;border:1px solid var(--lg-borda); background:var(--lg-card);display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--lg-marrom);transition:background .15s; } .md-hist-acao:hover{background:var(--lg-creme);} .md-hist-acao svg{width:13px;height:13px;stroke:currentColor;} /* Link de exames gerado após o agendamento */ .md-link-box{ margin-top:14px;padding:14px;border-radius:9px; border:1px solid rgba(74,122,74,.3);background:rgba(74,122,74,.07); } .md-link-titulo{font-size:12px;font-weight:700;color:var(--ok);margin-bottom:8px;} .md-link-row{display:flex;gap:8px;} .md-link-row input{ flex:1;min-width:0;padding:9px 11px;border-radius:8px;border:1px solid var(--lg-borda); background:var(--lg-card);font-family:var(--lg-sans);font-size:12px;color:var(--lg-texto);outline:none; } .md-link-copiar{ flex-shrink:0;padding:0 14px;border-radius:8px;border:1px solid var(--lg-borda); background:var(--lg-card);font-family:var(--lg-sans);font-size:12px;font-weight:600; color:var(--lg-marrom);cursor:pointer; } .md-link-copiar:hover{background:var(--lg-creme);} @media(max-width:640px){ .md-overlay{padding:16px;align-items:flex-start;} .md-card,.md-card--largo,.md-card--estreito{width:100%;padding:24px 20px;max-height:none;} .md-linha{flex-direction:column;gap:18px;} .md-titulo{font-size:21px;} .md-acoes{flex-direction:column-reverse;align-items:stretch;} .md-btn-primario,.md-btn-texto{width:100%;} } @media(max-width:860px){ .shell::before{display:none;} .main{padding:20px;max-width:none;} .page-header-row{margin-bottom:16px;} .page-titulo{font-size:20px;} .btn-novo-paciente{height:38px;padding:0 14px;font-size:12.5px;border-radius:9px;gap:6px;} .btn-novo-paciente svg{width:14px;height:14px;} .txt-desktop{display:none;} .txt-mobile{display:inline;} /* Mobile: nome+status em cima, "Próx. consulta" e os ícones de ação embaixo. Plano/Consultas/Vencimento saem — a linha ficaria apertada demais em 390px, e são dados de conferência, não de triagem rápida. */ .pac-lista{gap:16px;} .pac-row{padding:16px 18px;gap:12px;align-items:flex-start;} .pac-row__id{width:100%;} .pac-nome{font-size:17px;white-space:normal;} .pac-status{font-size:10px;} .pac-row__divisor{display:none;} .pac-row__dados{width:100%;flex:none;gap:0;} .pac-col--plano,.pac-col--consultas,.pac-col--vencimento{display:none;} .pac-col--proxima{min-width:0;} .pac-acoes{margin-left:auto;} .pac-lista-footer{justify-content:center;margin-top:16px;font-size:12px;} .pac-pager{display:none;} .estado-cta{display:none;} #busca-wrap-desktop{display:none;} } /* ══════════════════════════════════════════════════════════════════ LOGIN DA EQUIPE — identidade oficial Dra. Laura Mocellin Valores conforme o guia de estilo de `Login Equipe.dc.html`. Ativado por `body.login-equipe` (aplicado só quando não há sessão). ══════════════════════════════════════════════════════════════════ */ :root{ --lg-creme:#F5F2ED; --lg-card:#FDFCFA; --lg-oliva:#776E45; --lg-oliva-hover:#5C5536; --lg-salvia:#D4CFB1; --lg-marrom:#736245; --lg-oliva-medio:#6B6047;--lg-marrom-escuro:#5A5038; --lg-texto:#2E2A20; --lg-terciario:#948C63; --lg-borda:#E3DED2; --lg-erro:#9C4A36; --lg-rodape:#AFA98F; --lg-serif:'Playfair Display',Georgia,serif; --lg-sans:'Raleway',system-ui,sans-serif; } /* O login é full-bleed: neutraliza o fundo, o shell e o padding do app */ body.login-equipe{background-image:none;background-color:var(--lg-creme);} body.login-equipe .shell{display:block;} body.login-equipe .shell::before{display:none;} body.login-equipe .sidebar, body.login-equipe .mobile-topbar, body.login-equipe .sidebar-backdrop{display:none;} body.login-equipe .main-wrap{position:static;} body.login-equipe .main{padding:0;margin:0;max-width:none;width:100%;} .lg-screen{ min-height:100vh;display:flex;flex-direction:column; background:var(--lg-creme);color:var(--lg-texto); } /* ── Header: gradiente radial oliva com halos de sálvia-azulada e areia ── */ .lg-header{ /* 34vh dava uma faixa de ~300px numa tela de 1440 de largura: fina demais para a proporção, mais um risco que um cabeçalho. O teto de 420px existe para que num monitor muito alto ela não vire meia tela antes do formulário. */ height:42vh;min-height:300px;max-height:420px;flex-shrink:0;overflow:hidden; display:flex;align-items:center;justify-content:center; background: radial-gradient(circle at 8% 50%, rgba(193,202,197,0.45), transparent 55%), radial-gradient(circle at 92% 50%, rgba(211,203,164,0.4), transparent 55%), radial-gradient(circle at center, var(--lg-oliva-medio) 0%, #5E5540 55%, var(--lg-marrom-escuro) 100%); } .lg-header-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 24px;} .lg-title{ font-family:var(--lg-serif);font-size:46px;font-weight:400;line-height:1.15; color:#FDFCFA;text-align:center; } .lg-title em{font-style:italic;color:var(--lg-salvia);} .lg-context{ font-family:var(--lg-sans);font-size:14px;font-weight:500;line-height:1.4; color:rgba(253,252,250,0.7);text-align:center; } .lg-context strong{font-weight:700;color:rgba(253,252,250,0.9);} /* ── Corpo ── */ .lg-body{ flex:1;display:flex;flex-direction:column;align-items:center; gap:24px;padding:0 40px 32px; } /* ── Card ── */ .lg-card{ width:400px;max-width:100%;background:var(--lg-card);border-radius:16px;padding:44px; box-shadow:0 20px 50px rgba(46,42,32,0.14); display:flex;flex-direction:column;gap:20px; margin-top:-36px;position:relative;z-index:1; } .lg-label{ display:block;font-family:var(--lg-sans);font-size:12px;font-weight:600; color:var(--lg-texto);margin-bottom:8px; } .lg-input{ width:100%;height:50px;border:1px solid var(--lg-borda);border-radius:10px; padding:0 16px;font-family:var(--lg-sans);font-size:14px;font-weight:400; color:var(--lg-texto);background:var(--lg-card);outline:none; transition:border-color .15s,box-shadow .15s,background-color .15s; } .lg-input::placeholder{color:var(--lg-rodape);} .lg-input:focus-visible{border-color:var(--lg-oliva);box-shadow:0 0 0 3px rgba(119,110,69,0.16);} .lg-pw{position:relative;} .lg-pw .lg-input{padding-right:46px;} .lg-pw-toggle{ position:absolute;right:14px;top:50%;transform:translateY(-50%); border:none;background:transparent;color:var(--lg-terciario);cursor:pointer; font-family:var(--lg-sans);font-size:13px;font-weight:500;padding:4px 2px; width:auto;height:auto;margin:0;border-radius:6px; } .lg-pw-toggle:hover{color:var(--lg-oliva);} .lg-pw-toggle:focus-visible{outline:2px solid var(--lg-oliva);outline-offset:2px;} /* Estado de erro: terracota derivado da paleta — nunca azul */ .lg-field.is-error .lg-input{border-color:var(--lg-erro);background:rgba(156,74,54,0.05);} .lg-msg{font-family:var(--lg-sans);font-size:12px;line-height:1.4;color:var(--lg-erro);margin-top:8px;} .lg-msg.is-ok{color:var(--ok);} /* O preenchimento vem de .grad-oliva-btn, no HTML — e NAO pode ser declarado aqui: .lg-submit aparece depois de .grad-oliva-btn na folha, com a mesma especificidade, entao qualquer `background` nesta regra apagaria o gradiente (foi o que aconteceu com .btn-trocar). Por isso o hover usa filter, e nao troca de cor. */ .lg-submit{ width:100%;height:50px;color:var(--lg-creme); border:none;border-radius:10px;font-family:var(--lg-sans);font-size:14px;font-weight:600; cursor:pointer;margin-top:4px;transition:filter .15s; } .lg-submit:hover:not(:disabled){filter:brightness(1.06);} .lg-submit:focus-visible{outline:2px solid var(--lg-oliva);outline-offset:3px;} .lg-submit:disabled{opacity:.65;cursor:default;} .lg-forgot{ text-align:center;font-family:var(--lg-sans);font-size:12px; color:var(--lg-oliva);text-decoration:none; } .lg-forgot:hover{color:var(--lg-oliva-hover);text-decoration:underline;} /* ── Aviso de acesso restrito ── */ .lg-restrito{ display:flex;align-items:center;justify-content:center;gap:6px; font-family:var(--lg-sans);font-size:12px;font-weight:600; color:var(--lg-marrom);text-align:center; } .lg-restrito svg{flex-shrink:0;width:12px;height:12px;} /* ── Rodapé Íris / Atria, ancorado na base ── */ .lg-rodape{ display:flex;align-items:center;justify-content:center;gap:10px;margin-top:auto; font-family:var(--lg-serif);font-size:11px;font-weight:400; color:var(--lg-rodape);text-align:center; } .lg-rodape-marca{display:flex;align-items:center;gap:6px;} .lg-rodape-marca img{width:auto;display:block;opacity:.85;flex-shrink:0;object-fit:contain;} .lg-rodape-simbolo{height:16px;} .lg-rodape-wordmark{height:14px;} .lg-rodape span{line-height:1.4;} .lg-rodape em{font-style:italic;font-weight:400;} /* ── Mobile (artboard de 390px) ── */ @media(max-width:480px){ .lg-header{height:32vh;min-height:200px;} .lg-header-inner{gap:6px;padding:0 20px;} .lg-title{font-size:30px;} .lg-context{font-size:11px;} .lg-body{padding:0 20px 20px;} .lg-card{width:100%;padding:28px 22px;gap:18px;margin-top:-28px;} .lg-label{margin-bottom:7px;} .lg-input{height:52px;padding:0 14px;} .lg-pw .lg-input{padding-right:44px;} .lg-pw-toggle{right:12px;font-size:12px;} .lg-msg{margin-top:7px;} .lg-submit{height:52px;margin-top:0;} .lg-restrito{font-size:11px;gap:5px;} .lg-restrito svg{width:11px;height:11px;} .lg-rodape{font-size:10.5px;gap:8px;} .lg-rodape-simbolo{height:14px;} .lg-rodape-wordmark{height:12px;} }