/* ========================================================================== Espaço NM — tema Material 3 Expressive · v1 Drop-in para o Painel de Compensações V2.3.15. Carregue DEPOIS de styles.css, m3-design-system.css e v2.css: Nenhuma classe nova é obrigatória: o tema redefine os tokens que o sistema já usa e ajusta os componentes existentes. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS — modo claro -------------------------------------------------------------------------- */ :root{ /* marca */ --nm-azul:#002060; --nm-azul-claro:#00B0F0; --nm-cinza:#D9D9D9; --nm-branco:#FFFFFF; --nm-preto:#262626; /* gradiente dos botões primários (esquerda → direita) */ --nm-grad:linear-gradient(90deg,#002162,#0037a6); /* papéis M3 */ --nm-primary:#002060; --nm-on-primary:#FFFFFF; --nm-primary-container:#DCE6FF; --nm-on-primary-container:#001640; --nm-secondary:#00B0F0; --nm-secondary-container:#CFEDFB; --nm-on-secondary-container:#00374B; --nm-secondary-text:#005A7C; /* superfícies */ --nm-bg:#F5F7FA; --nm-surface:#FFFFFF; --nm-surface-1:#F1F3F7; --nm-surface-2:#E9ECF2; --nm-surface-3:#E0E4EC; --nm-on-surface:#1A1C1E; --nm-on-surface-var:#4A4E54; --nm-outline:#C7CBD2; --nm-outline-var:#D9D9D9; --nm-focus-halo:rgba(0,32,96,.22); /* Glifos de recolher/expandir painel (V2.3.32). Usados como máscara, por isso o traço é preto: a cor vem do tema, via currentColor. */ --nm-icon-recolher:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 15h4.8M15 15v4.8M15 15l6 6'/%3E%3Cpath d='M9 15H4.2M9 15v4.8M9 15l-6 6'/%3E%3Cpath d='M15 9h4.8M15 9V4.2M15 9l6-6'/%3E%3Cpath d='M9 9H4.2M9 9V4.2M9 9 3 3'/%3E%3C/svg%3E"); --nm-icon-expandir:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4.8h-4.8M21 19.8 15 14'/%3E%3Cpath d='M3 15v4.8h4.8M3 19.8 9 14'/%3E%3Cpath d='M21 9V4.2h-4.8M21 4.2 15 10'/%3E%3Cpath d='M3 9V4.2h4.8M3 4.2 9 10'/%3E%3C/svg%3E"); /* estados */ --nm-ok:#0C6B41; --nm-ok-c:#D5F1E1; --nm-warn:#87500A; --nm-warn-c:#FCEACA; --nm-err:#A8231C; --nm-err-c:#FADAD7; /* forma, movimento, elevação */ /* Raios conforme DESIGN_SYSTEM_V1: campo/item pequeno 10, card compacto 14, tabela/painel/lista 20, modal/folha 28, botão/chip/nav ativa em cápsula. */ --nm-r-s:10px; --nm-r-m:14px; --nm-r-l:20px; --nm-r-xl:28px; --nm-r-full:999px; --nm-fast:120ms; --nm-mid:200ms; --nm-slow:260ms; --nm-ease:cubic-bezier(.2,0,0,1); --nm-shadow:0 1px 2px rgba(0,32,96,.10), 0 6px 18px -10px rgba(0,32,96,.22); --nm-shadow-lg:0 24px 60px -18px rgba(0,16,48,.5); /* --- remapeamento dos tokens já usados pelo sistema --- */ --bg:var(--nm-bg); --surface:var(--nm-surface); --text:var(--nm-on-surface); --text-muted:var(--nm-on-surface-var); --border:var(--nm-outline-var); --accent:var(--nm-primary); --accent-soft:var(--nm-primary-container); --sidebar:var(--nm-primary); --sidebar-muted:#9BB4E0; --sidebar-active:#123A86; --dashboard-head:var(--nm-primary); --dashboard-head-text:var(--nm-on-primary); --dashboard-total:var(--nm-surface-1); --dashboard-blue-row:var(--nm-secondary-container); --dashboard-green-row:var(--nm-ok-c); /* prioridades 1–5 */ --p1:#A8231C; --p1-bg:#FADAD7; --p2:#87500A; --p2-bg:#FCEACA; --p3:#00688F; --p3-bg:#CFEDFB; --p4:#3B3F45; --p4-bg:#E9ECF2; --p5:#5A5F66; --p5-bg:#F1F3F7; /* status */ --sub:#001640; --sub-bg:#DCE6FF; --dev:#8C1D17; --dev-bg:#FADAD7; --ate:#0A5334; --ate-bg:#D5F1E1; } /* densidade das tabelas — troque o atributo em ou */ [data-density="compacta"] { --nm-row-py:8px; } :root, [data-density="confortavel"] { --nm-row-py:14px; } [data-density="ampla"] { --nm-row-py:20px; } /* -------------------------------------------------------------------------- 2. TOKENS — modo noturno ( ) -------------------------------------------------------------------------- */ [data-theme="dark"]{ --nm-grad:#00B0F0; --nm-primary:#00B0F0; --nm-on-primary:#002060; --nm-primary-container:#0B3A57; --nm-on-primary-container:#C6EBFB; --nm-secondary-container:#0B3A57; --nm-on-secondary-container:#C6EBFB; --nm-secondary-text:#5FD0FF; --nm-bg:#1B1B1B; --nm-surface:#262626; --nm-surface-1:#2E2F31; --nm-surface-2:#37383B; --nm-surface-3:#404246; --nm-on-surface:#ECEDEF; --nm-on-surface-var:#C2C5CB; --nm-outline:#5C6067; --nm-outline-var:#3D3F43; --nm-ok:#7FE0A8; --nm-ok-c:#143D28; --nm-warn:#F2C169; --nm-warn-c:#41300E; --nm-err:#FFB4AB; --nm-err-c:#4A1512; --nm-shadow:0 1px 2px rgba(0,0,0,.40), 0 8px 22px -12px rgba(0,0,0,.65); --sidebar:#141414; --sidebar-muted:#9DA1A8; --sidebar-active:#2E2F31; --dashboard-head:#0B3A57; --dashboard-head-text:#C6EBFB; --dashboard-total:#2E2F31; --dashboard-blue-row:#123246; --dashboard-green-row:#143D28; --p1:#FFB4AB; --p1-bg:#4A1512; --p2:#F2C169; --p2-bg:#41300E; --p3:#9BDDF7; --p3-bg:#0B3A57; --p4:#C2C5CB; --p4-bg:#37383B; --p5:#A5A8AE; --p5-bg:#2E2F31; --sub:#7FD4F5; --sub-bg:#0B3A57; --dev:#FFB4AB; --dev-bg:#4A1512; --ate:#7FE0A8; --ate-bg:#143D28; --nm-focus-halo:rgba(0,176,240,.30); color-scheme:dark; } /* -------------------------------------------------------------------------- 3. BASE -------------------------------------------------------------------------- */ body{ background:var(--nm-bg); color:var(--nm-on-surface); font-family:var(--app-font); } h1,h2,h3,.brand-name,.modulo-card h3{ font-family:var(--app-display-font); letter-spacing:-.01em; } /* Escala de peso Material 3 (V2.3.32): headline emphasized 700, title 600, label/botão 500, corpo 400. O tamanho e a hierarquia não mudam. */ h1{ font-weight:700; } h2{ font-weight:600; } h3{ font-weight:600; } .subtitle,.brand-sub{ color:var(--nm-on-surface-var); text-wrap:pretty; } a{ color:var(--nm-primary); text-decoration:none; } a:hover{ text-decoration:underline; } /* V2.3.32 — o anel de foco precisa ser visível sobre qualquer superfície do sistema, inclusive sobre a própria cor secundária (abas e itens ativos). O halo externo garante o contraste de 3:1 exigido em ambos os temas. */ *:focus-visible{ outline:3px solid var(--nm-secondary); outline-offset:2px; border-radius:6px; box-shadow:0 0 0 5px var(--nm-focus-halo); } ::selection{ background:var(--nm-secondary-container); color:var(--nm-on-secondary-container); } /* -------------------------------------------------------------------------- 4. BOTÕES -------------------------------------------------------------------------- */ .btn-primary,.btn-save,.class-btn-primary{ background:var(--nm-grad) !important; color:var(--nm-on-primary) !important; border:none; border-radius:var(--nm-r-full); padding:12px 22px; font-family:var(--app-display-font); font-size:13.5px; font-weight:500; box-shadow:var(--nm-shadow); cursor:pointer; transition:filter var(--nm-fast) var(--nm-ease), transform var(--nm-fast) var(--nm-ease); } .btn-primary:hover,.btn-save:hover{ filter:brightness(1.12); } .btn-primary:active,.btn-save:active{ transform:scale(.98); } .btn-cancel,.g-btn-acao,.cards-topbar-btn{ background:transparent; color:var(--nm-on-surface); border:1.5px solid var(--nm-outline); border-radius:var(--nm-r-full); padding:10px 18px; font-size:13px; font-weight:500; cursor:pointer; transition:background var(--nm-fast) var(--nm-ease); } .btn-cancel:hover,.g-btn-acao:hover,.cards-topbar-btn:hover{ background:var(--nm-surface-2); } .g-btn-acao.perigo{ color:var(--nm-err); border-color:var(--nm-err); } button:disabled{ opacity:.45; cursor:not-allowed; } /* -------------------------------------------------------------------------- 5. NAVEGAÇÃO — painel lateral e barra superior -------------------------------------------------------------------------- */ .sidebar,.gestores-sidebar{ background:var(--sidebar); color:var(--nm-branco); border-right:1px solid var(--nm-outline-var); transition:width var(--nm-slow) var(--nm-ease); } .nav-item,.g-nav-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--nm-r-full); color:#DCE6FF; font-size:13.5px; cursor:pointer; transition:background var(--nm-fast) var(--nm-ease), color var(--nm-fast) var(--nm-ease); } .nav-item:hover,.g-nav-item:hover{ background:rgba(255,255,255,.10); } .nav-item.active,.g-nav-item.active{ background:var(--nm-secondary); color:#002060; font-weight:600; } .nav-label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sidebar-muted); } .brand-mark{ background:var(--nm-secondary); color:#002060; border-radius:var(--nm-r-m); font-family:var(--app-display-font); font-weight:700; } /* -------------------------------------------------------------------------- 6. CARTÕES E BLOCOS -------------------------------------------------------------------------- */ .table-card,.legend-card,.summary-card,.status-block,.roadmap,.card,.class-card{ background:var(--nm-surface); border:1px solid var(--nm-outline-var); border-radius:var(--nm-r-l); box-shadow:none; } .modulo-card{ background:var(--nm-surface); border:1px solid var(--nm-outline-var); border-radius:var(--nm-r-l); padding:20px; transition:transform var(--nm-fast) var(--nm-ease), box-shadow var(--nm-mid) var(--nm-ease), border-color var(--nm-fast) var(--nm-ease); } .modulo-card:hover{ transform:translateY(-2px); box-shadow:var(--nm-shadow); border-color:var(--nm-primary); } .modulo-card:active{ transform:translateY(0) scale(.99); } .modulo-icon{ width:44px; height:44px; border-radius:var(--nm-r-m); background:var(--nm-primary-container) !important; color:var(--nm-on-primary-container) !important; display:grid; place-items:center; } .modulo-tag{ font-size:12.5px; color:var(--nm-on-surface-var); } .scope-pill,.summary-footnote{ background:var(--nm-surface-2); color:var(--nm-on-surface-var); border-radius:var(--nm-r-full); padding:6px 14px; font-size:12px; } /* -------------------------------------------------------------------------- 7. TABELAS -------------------------------------------------------------------------- */ .table-scroll{ overflow-x:auto; } table th{ background:var(--nm-surface-1); color:var(--nm-on-surface-var); font-size:11.5px; /* M3: cabeçalho de tabela é rótulo, não ênfase. */ font-weight:500; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:12px 16px; white-space:nowrap; border-bottom:1px solid var(--nm-outline-var); } table td{ padding:var(--nm-row-py,14px) 16px; border-bottom:1px solid var(--nm-outline-var); font-size:13.5px; } table tbody tr{ transition:background var(--nm-fast) var(--nm-ease); } table tbody tr:hover{ background:var(--nm-surface-1); } td .row-label,.status-table .row-label{ font-weight:500; } .th-filter-btn{ border:none; background:transparent; color:var(--nm-on-surface-var); cursor:pointer; padding:0 4px; border-radius:6px; /* Piso de microtexto do DESIGN_SYSTEM_V1 (10,5px) e alvo mínimo possível dentro do cabeçalho fixo de 44px das planilhas. */ font-size:10.5px; min-width:26px; min-height:26px; transition:background var(--nm-fast) var(--nm-ease); } .th-filter-btn:hover{ background:var(--nm-surface-2); } .th-filter-btn.active{ color:var(--nm-primary); font-weight:600; } /* pílulas de status e prioridade */ .badge,.pill,.sol-status-badge,.sol-tipo-badge, [class*="pv-status-"],[class*="status-badge"]{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--nm-r-full); font-size:12px; font-weight:500; white-space:nowrap; } /* -------------------------------------------------------------------------- 8. FORMULÁRIOS E FILTROS -------------------------------------------------------------------------- */ input[type="text"],input[type="email"],input[type="password"], input[type="search"],input[type="date"],select,textarea,.input{ width:100%; padding:13px 16px; border:1.5px solid var(--nm-outline); border-radius:var(--nm-r-m); background:var(--nm-surface); color:var(--nm-on-surface); font:inherit; font-size:13.5px; transition:border-color var(--nm-fast) var(--nm-ease); } input:focus,select:focus,textarea:focus{ border-color:var(--nm-primary); } ::placeholder{ color:var(--nm-on-surface-var); opacity:.8; } .toolbar .search,input[type="search"]{ border-radius:var(--nm-r-full); background:var(--nm-surface-2); border-color:transparent; } .toolbar .search:focus{ background:var(--nm-surface); border-color:var(--nm-primary); } .toolbar-check{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--nm-on-surface-var); } input[type="checkbox"],input[type="radio"]{ accent-color:var(--nm-primary); width:18px; height:18px; } .chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1.5px solid var(--nm-outline); border-radius:var(--nm-r-full); background:transparent; color:var(--nm-on-surface); font-size:13px; font-weight:500; white-space:nowrap; cursor:pointer; transition:background var(--nm-fast) var(--nm-ease), border-color var(--nm-fast) var(--nm-ease); } .chip:hover{ background:var(--nm-surface-2); } .chip.active{ background:var(--nm-primary-container); border-color:var(--nm-primary-container); color:var(--nm-on-primary-container); } /* -------------------------------------------------------------------------- 9. MODAIS -------------------------------------------------------------------------- */ .modal-backdrop{ background:rgba(0,16,48,.42); backdrop-filter:blur(3px); animation:nmFade var(--nm-fast) var(--nm-ease); } .modal-card{ background:var(--nm-surface); color:var(--nm-on-surface); border:none; border-radius:var(--nm-r-xl); padding:28px; box-shadow:var(--nm-shadow-lg); animation:nmPop var(--nm-slow) var(--nm-ease); } .modal-card h3{ font-size:21px; font-weight:600; margin:0 0 18px; } .modal-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:20px; } .modal-charcount{ font-size:11.5px; color:var(--nm-on-surface-var); text-align:right; } /* -------------------------------------------------------------------------- 10. SOLICITAÇÕES, CARDS, CHAT -------------------------------------------------------------------------- */ .sol-card{ display:flex; gap:0; background:var(--nm-surface); border:1px solid var(--nm-outline-var); border-radius:var(--nm-r-l); overflow:hidden; transition:box-shadow var(--nm-mid) var(--nm-ease); } .sol-card:hover{ box-shadow:var(--nm-shadow); } .sol-prioridade-dot{ width:5px; border-radius:0; } .sol-prioridade-urgente{ background:var(--nm-err); } .sol-prioridade-normal{ background:var(--nm-secondary); } .sol-prioridade-baixa{ background:var(--nm-outline); } .sol-status-pendente{ background:var(--nm-warn-c); color:var(--nm-warn); } .sol-status-em_andamento{ background:var(--sub-bg); color:var(--sub); } .sol-status-concluida{ background:var(--nm-ok-c); color:var(--nm-ok); } .sol-status-cancelada{ background:var(--nm-surface-2); color:var(--nm-on-surface-var); } .sol-tipo-badge{ background:var(--nm-surface-2); color:var(--nm-on-surface-var); font-weight:500; } .sol-card-resposta{ background:var(--nm-surface-1); border-radius:var(--nm-r-m); padding:12px 14px; } .cards-card,.card-item{ background:var(--nm-surface); border:1px solid var(--nm-outline-var); border-radius:var(--nm-r-m); transition:transform var(--nm-fast) var(--nm-ease), box-shadow var(--nm-mid) var(--nm-ease); } .cards-card:hover,.card-item:hover{ transform:translateY(-2px); box-shadow:var(--nm-shadow); } .cards-column,.card-list{ background:var(--nm-surface-1); border:1px solid var(--nm-outline-var); border-radius:var(--nm-r-l); } .notif-badge{ background:var(--nm-secondary); color:#002060; border-radius:var(--nm-r-full); font-size:10.5px; font-weight:600; min-width:17px; height:17px; display:grid; place-items:center; } /* -------------------------------------------------------------------------- 11. LOGIN (markup em exemplos/login.html) -------------------------------------------------------------------------- */ .login-screen{ min-height:100vh; display:flex; flex-wrap:wrap; align-items:stretch; background:var(--nm-surface); } .nm-login-ilustracao{ flex:7 1 70%; min-width:min(100%,620px); position:relative; overflow:hidden; background:#EFEAE2; min-height:min(56vh,520px); } .nm-login-ilustracao img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .login-card{ flex:3 1 380px; min-width:min(100%,380px); display:flex; align-items:center; justify-content:center; padding:clamp(28px,4vw,56px); background:var(--nm-surface); border:none; box-shadow:none; } .nm-login-form{ width:100%; max-width:376px; display:flex; flex-direction:column; gap:24px; } .nm-login-logo{ align-self:center; height:96px; width:auto; max-width:100%; object-fit:contain; margin-bottom:20px; } .nm-login-form label{ display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:500; color:var(--nm-on-surface-var); } .nm-login-form .btn-primary{ width:100%; padding:16px 24px; font-size:15px; } .nm-login-rodape{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--nm-on-surface-var); } [data-theme="dark"] .nm-logo-claro{ display:none; } :root:not([data-theme="dark"]) .nm-logo-escuro{ display:none; } /* -------------------------------------------------------------------------- 12. MOVIMENTO -------------------------------------------------------------------------- */ @keyframes nmFade{ from{opacity:0} to{opacity:1} } @keyframes nmPop{ from{opacity:0; transform:translateY(12px) scale(.97)} to{opacity:1; transform:none} } @keyframes nmRise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} } .g-view,main > div[id^="view-"]{ animation:nmRise var(--nm-mid) var(--nm-ease); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* -------------------------------------------------------------------------- 13. COMPATIBILIDADE COM A ESTRUTURA OPERACIONAL DO PAINEL Mantém a linha aprovada do Espaço NM sobre os componentes V2 existentes. -------------------------------------------------------------------------- */ :root{ --md-primary:var(--nm-primary); --md-on-primary:var(--nm-on-primary); --md-primary-container:var(--nm-primary-container); --md-on-primary-container:var(--nm-on-primary-container); --md-secondary:var(--nm-secondary); --md-on-secondary:#002060; --md-secondary-container:var(--nm-secondary-container); --md-on-secondary-container:var(--nm-on-secondary-container); --md-tertiary:#554170; --md-tertiary-container:#EEE4F7; --md-surface:var(--nm-bg); --md-surface-dim:#D9D9D9; --md-surface-bright:#FFFFFF; --md-surface-container-lowest:var(--nm-surface); --md-surface-container-low:var(--nm-surface-1); --md-surface-container:var(--nm-surface-2); --md-surface-container-high:var(--nm-surface-2); --md-surface-container-highest:var(--nm-surface-3); --md-on-surface:var(--nm-on-surface); --md-on-surface-variant:var(--nm-on-surface-var); --md-outline:var(--nm-outline); --md-outline-variant:var(--nm-outline-var); --md-success:var(--nm-ok); --md-success-container:var(--nm-ok-c); --md-warning:var(--nm-warn); --md-warning-container:var(--nm-warn-c); --md-error:var(--nm-err); --md-error-container:var(--nm-err-c); --md-radius-sm:var(--nm-r-s); --md-radius-md:var(--nm-r-m); --md-radius-lg:var(--nm-r-l); --md-radius-xl:var(--nm-r-xl); --md-radius-full:var(--nm-r-full); --md-motion-fast:var(--nm-fast); --md-motion-standard:var(--nm-mid); --md-motion-emphasized:var(--nm-slow); --md-ease-standard:var(--nm-ease); --md-elevation-1:var(--nm-shadow); --md-elevation-2:var(--nm-shadow); --md-elevation-3:var(--nm-shadow-lg); } html[data-theme="dark"]{ --md-primary:var(--nm-primary); --md-on-primary:var(--nm-on-primary); --md-primary-container:var(--nm-primary-container); --md-on-primary-container:var(--nm-on-primary-container); --md-secondary:var(--nm-secondary); --md-on-secondary:#002060; --md-secondary-container:var(--nm-secondary-container); --md-on-secondary-container:var(--nm-on-secondary-container); --md-tertiary:#D5BCE8; --md-tertiary-container:#4D3B5D; --md-surface:var(--nm-bg); --md-surface-dim:var(--nm-bg); --md-surface-bright:var(--nm-surface-3); --md-surface-container-lowest:var(--nm-surface); --md-surface-container-low:var(--nm-surface-1); --md-surface-container:var(--nm-surface-2); --md-surface-container-high:var(--nm-surface-2); --md-surface-container-highest:var(--nm-surface-3); --md-on-surface:var(--nm-on-surface); --md-on-surface-variant:var(--nm-on-surface-var); --md-outline:var(--nm-outline); --md-outline-variant:var(--nm-outline-var); --md-success:var(--nm-ok); --md-success-container:var(--nm-ok-c); --md-warning:var(--nm-warn); --md-warning-container:var(--nm-warn-c); --md-error:var(--nm-err); --md-error-container:var(--nm-err-c); } #nav-rail{ background:var(--sidebar); color:var(--nm-branco); border-right:1px solid var(--nm-outline-var); } #nav-rail .rail-logo{ background:transparent; color:var(--nm-branco); border-radius:var(--nm-r-m); } #nav-rail .rail-logo img{ width:42px; height:32px; object-fit:contain; } .rail-item{ color:#DCE6FF; border-radius:var(--nm-r-full); } .rail-item:hover{ background:rgba(255,255,255,.10); color:#FFFFFF; } .rail-item.ativo{ background:var(--nm-secondary); color:#002060; } #nav-rail .rail-sep{ background:rgba(255,255,255,.18); } .sidebar .brand-name,.gestores-sidebar .brand-name{ color:#FFFFFF !important; } .sidebar .brand-sub,.gestores-sidebar .brand-sub, .sidebar .nav-label,.sidebar .profile-label,.sidebar .profile-note, .gestores-sidebar .g-nav-label{ color:#9BB4E0 !important; } .sidebar .brand-mark,.gestores-sidebar .brand-mark{ background:var(--nm-secondary); color:#002060; } .nm-brand-logo{ background:transparent !important; width:48px; overflow:visible; } .nm-brand-logo img{ display:block; width:46px; height:30px; object-fit:contain; } .login-screen{ padding:0 !important; } .login-card{ width:auto !important; max-width:none !important; border-radius:0 !important; color:var(--nm-on-surface); } .nm-login-form .field{ margin:0; } .nm-login-form .field-error{ margin-top:3px; } .nm-login-form .login-forgot{ border:0; background:transparent; padding:0; color:var(--nm-primary) !important; font:inherit; text-align:left; cursor:pointer; } .nm-login-form .login-note{ margin:0; color:var(--nm-on-surface-var); font-size:11.5px; line-height:1.45; text-align:center; } .nm-login-heading h1{ margin:0 0 8px; font-size:24px; } .nm-login-heading .subtitle{ margin:0; font-size:12.5px; line-height:1.5; } @media (max-width:760px){ .nm-login-ilustracao{ min-width:100%; min-height:34vh; max-height:320px; flex-basis:100%; } .login-card{ min-width:100%; flex-basis:100%; padding:32px 24px 42px !important; } .nm-login-form{ max-width:420px; margin:0 auto; gap:18px; } .nm-login-logo{ height:78px; margin-bottom:4px; } }