/*
 * Identidade visual do Retaguarda Web aplicada ao Portal do Contador.
 *
 * A paleta e a tipografia sao copiadas da fonte da verdade do Retaguarda
 * (resources/views/auth/login.blade.php + public/assets/css/retaguarda-identity.css),
 * nao recriadas de olho. Mesma estrategia de la: nenhuma tela foi reescrita,
 * o que muda sao as custom properties que o CSS existente ja consome e os
 * pontos onde a cor estava cravada direto na regra.
 *
 * Convencao herdada: --petrol e a marca (links, foco, ativo) e --amber e a
 * acao principal (botao de CTA). As cores semanticas de feedback ficam como
 * estao - sao sinal de sistema, nao identidade.
 */

/* ---------------------------------------------------------------- fontes */
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/zilla-slab-600.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/zilla-slab-700.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/public-sans.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ------------------------------------------------------ paleta (clara) */
:root {
  --ground: #edefe6;
  --surface: #ffffff;
  --ink: #16241f;
  --ink-soft: #55665c;
  --petrol: #0e5c52;
  --petrol-rgb: 14, 92, 82;
  --petrol-soft: #dceae6;
  --amber: #c86a28;
  --amber-hover: #a9571f;
  --on-amber: #ffffff;
  --paper: #f1e7ce;
  --paper-ink: #3b2e19;
  --border: #d8dbc9;
  --band-bg: #16241f;
  --band-ink: #edefe6;
  --band-ink-soft: #a9bbb0;
  --band-border: #2c4038;

  --font-display: "Zilla Slab", "Iowan Old Style", ui-serif, Georgia, serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- pontes para o CSS que o portal ja tinha --- */
  /* custom.css */
  --ux-primary: var(--petrol);
  --ux-primary-soft: var(--petrol-soft);
  --ux-text: var(--ink);
  --ux-muted: var(--ink-soft);
  --ux-border: var(--border);
  --ux-surface: var(--surface);
  --ux-bg-soft: #f4f5ed;
  --ux-focus: 0 0 0 3px rgba(var(--petrol-rgb), .18);
  /* bundle/app.css */
  --blue: var(--petrol);
  --black: var(--ink);
  --white: var(--surface);
  --dark-gray: var(--ink-soft);
  --light-gray: #f4f5ed;
  --gray: #f7f8f2;
  --bor-form: var(--border);
  --bor-card: #e4e7da;
  --bor-gray: #e8ebdf;
  --bor-blue: var(--surface);
}

/* ------------------------------------------------------ paleta (escura) */
/* Escolha explicita do usuario vence; sem escolha, acompanha o sistema.
   Os dois caminhos apontam para a MESMA lista de variaveis - duplicar aqui
   e o preco de nao ter :is() com media query, mas os valores sao identicos
   de proposito: nao existe uma versao "quase igual" do tema escuro. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #12211b;
  --surface: #1b2d25;
  --ink: #edefe6;
  --ink-soft: #a9bbb0;
  --petrol: #46c7b0;
  --petrol-rgb: 70, 199, 176;
  --petrol-soft: #17362e;
  --amber: #ef9a5c;
  --amber-hover: #f7ae77;
  --on-amber: #2b1a0c;
  --paper: #2a2115;
  --paper-ink: #ede1c4;
  --border: #2c4038;
  --band-bg: #16241f;
  --band-ink: #edefe6;
  --band-ink-soft: #a9bbb0;
  --band-border: #2c4038;

  --ux-primary: var(--petrol);
  --ux-primary-soft: var(--petrol-soft);
  --ux-text: var(--ink);
  --ux-muted: var(--ink-soft);
  --ux-border: var(--border);
  --ux-surface: var(--surface);
  --ux-bg-soft: #16261f;
  --ux-focus: 0 0 0 3px rgba(var(--petrol-rgb), .28);

  --blue: var(--petrol);
  --black: var(--band-bg);
  --white: var(--surface);
  --dark-gray: var(--ink-soft);
  --light-gray: #16261f;
  --gray: #16241f;
  --bor-form: var(--border);
  --bor-card: var(--border);
  --bor-gray: var(--border);
  --bor-blue: var(--surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #12211b;
    --surface: #1b2d25;
    --ink: #edefe6;
    --ink-soft: #a9bbb0;
    --petrol: #46c7b0;
    --petrol-rgb: 70, 199, 176;
    --petrol-soft: #17362e;
    --amber: #ef9a5c;
    --amber-hover: #f7ae77;
    --on-amber: #2b1a0c;
    --paper: #2a2115;
    --paper-ink: #ede1c4;
    --border: #2c4038;

    --ux-primary: var(--petrol);
    --ux-primary-soft: var(--petrol-soft);
    --ux-text: var(--ink);
    --ux-muted: var(--ink-soft);
    --ux-border: var(--border);
    --ux-surface: var(--surface);
    --ux-bg-soft: #16261f;
    --ux-focus: 0 0 0 3px rgba(var(--petrol-rgb), .28);

    --blue: var(--petrol);
    --black: var(--band-bg);
    --white: var(--surface);
    --dark-gray: var(--ink-soft);
    --light-gray: #16261f;
    --gray: #16241f;
    --bor-form: var(--border);
    --bor-card: var(--border);
    --bor-gray: var(--border);
    --bor-blue: var(--surface);
  }
}

/* ------------------------------------------------------- tipografia */
body,
input, select, textarea, button, .btn,
.table, .box, .card {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.box-heading h3,
.auth-branding h1,
.title strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Kicker em mono com caixa alta e tracking - a assinatura tipografica das
   telas de acesso do Retaguarda ("ACESSO AO SISTEMA"). */
.auth-kicker, .auth-form-kicker, .menu-section-label {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
}

/* ------------------------------------------------------------ fundo */
html, body {
  background-color: var(--ground);
  color: var(--ink);
}

.box-general {
  background-color: transparent;
}

/* Tela de acesso: o gradiente navy/azul do tema antigo era cravado com
   !important, entao precisa de !important para ser substituido. Vira o
   split-screen do Retaguarda: faixa ink de um lado, ground do outro. */
body.auth-modern-page,
.auth-modern-page .box-general.page-auth {
  background: var(--ground) !important;
}

.auth-orb, .auth-grid-pattern {
  display: none;
}

.auth-modern-card, .box-form-auth {
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -30px rgba(22, 36, 31, .45);
}

.auth-visual-panel {
  background: var(--band-bg);
  color: var(--band-ink);
}

.auth-visual-panel h1 {
  color: var(--band-ink);
  font-family: var(--font-display);
}

.auth-visual-panel p {
  color: var(--band-ink-soft);
}

.auth-kicker {
  color: var(--band-ink-soft);
}

.auth-form-kicker {
  color: var(--petrol);
}

/* ------------------------------------------------ topo e menu lateral */
.sidebar,
.sidebar > .header {
  background-color: var(--band-bg);
}

.sidebar .menu-wrap > ul > li > a {
  color: var(--band-ink-soft);
}

.sidebar .menu-wrap > ul > li > a:hover {
  color: var(--band-ink);
  background-color: rgba(255, 255, 255, .06);
}

.sidebar .menu-wrap > ul > li.active > a {
  background-color: var(--surface);
  color: var(--petrol);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.sidebar .menu-section-label {
  color: #7d918a;
}

/* -------------------------------------------------------- superficies */
.box, .card, .modal-main .content {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

.box-heading h3, .title strong {
  color: var(--ink);
}

.table th {
  color: var(--ink-soft);
  border-bottom-color: var(--border);
}

.table td {
  border-bottom-color: var(--border);
  color: var(--ink);
}

.table tbody tr:hover {
  background-color: var(--petrol-soft);
}

/* ------------------------------------------------------------ botoes */
/* A acao principal e amber (mesma decisao do Retaguarda: o CTA nao usa a
   cor de marca, para nao competir com links e estados ativos). O seletor
   precisa dos dois niveis porque o tema base define ".btn.btn-blue". */
.btn.btn-blue,
.btn.btn-primary,
button.btn-blue {
  background-color: var(--amber);
  border-color: var(--amber);
  color: var(--on-amber);
}

.btn.btn-blue:hover,
.btn.btn-primary:hover,
button.btn-blue:hover {
  background-color: var(--amber-hover);
  border-color: var(--amber-hover);
  color: var(--on-amber);
}

.btn.btn-blue span, .btn.btn-blue i,
.btn.btn-primary span, .btn.btn-primary i {
  color: var(--on-amber);
}

.btn.btn-dark-gray {
  background-color: var(--ground);
  border-color: var(--border);
  color: var(--ink);
}

.btn.btn-dark-gray:hover {
  background-color: var(--petrol-soft);
  border-color: var(--petrol);
  color: var(--petrol);
}

.btn.btn-dark-gray span, .btn.btn-dark-gray i {
  color: inherit;
}

/* ------------------------------------------------------ links e foco */
a, .auth-link {
  color: var(--petrol);
}

a:hover, .auth-link:hover {
  color: var(--petrol);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--petrol);
  box-shadow: var(--ux-focus);
}

/* ----------------------------------------------------------- formulario */
input, select, textarea {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

input::placeholder, textarea::placeholder {
  color: var(--ink-soft);
  opacity: .7;
}

input[readonly], input:disabled, select:disabled, textarea:disabled {
  background-color: var(--ground);
  color: var(--ink-soft);
}

label {
  color: var(--ink);
}

.field-help, small.field-help {
  color: var(--ink-soft);
}

/* --------------------------------------------------- alternador de tema */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.theme-toggle:hover {
  background: var(--petrol-soft);
  color: var(--petrol);
}

.theme-toggle .icon-dark { display: none; }
.theme-toggle .icon-light { display: inline; }

:root[data-theme="dark"] .theme-toggle .icon-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
}

/* =====================================================================
 * Pontos onde a cor azul estava cravada com !important no custom.css.
 * Precisam de !important tambem - nao da para vencer so por ordem de
 * carga quando o valor original ja e !important.
 *
 * Nota: o painel lateral do login (.auth-visual-panel) continua oculto.
 * Foi decisao da iteracao "UX v64" ("layout profissional de producao,
 * sem textos promocionais"), nao um efeito colateral desta identidade.
 * ===================================================================== */

/* CTA principal das telas de acesso (era gradiente azul). */
.auth-submit,
.btn.auth-submit,
a.btn.auth-submit {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: var(--on-amber) !important;
  box-shadow: 0 14px 30px -12px rgba(200, 106, 40, .55) !important;
  font-weight: 700 !important;
}

.auth-submit:hover,
.btn.auth-submit:hover {
  background: var(--amber-hover) !important;
  border-color: var(--amber-hover) !important;
}

.auth-submit span, .auth-submit i {
  color: var(--on-amber) !important;
}

/* Faixa do topo do cartao de login (era #1f2937 azul-ardosia). */
body.has-default-logo .auth-form-card-header,
body.has-custom-logo .auth-form-card-header {
  background: var(--band-bg) !important;
  border-bottom: 0 !important;
}

body.has-default-logo .auth-form-card-header span,
body.has-custom-logo .auth-form-card-header span {
  color: var(--band-ink-soft) !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
}

/* Cartao e casca do login. */
.box-form-auth.auth-modern-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 30px 70px -40px rgba(22, 36, 31, .55) !important;
}

.auth-title-block strong {
  color: var(--ink) !important;
}

.auth-title-block small {
  color: var(--ink-soft) !important;
}

/* Avisos: mantem a semantica (verde/amarelo/vermelho), so troca os tons
   frios do tema antigo pelos da identidade. */
.alert-green, .ux-flash.success {
  background: #e4efe4 !important;
  border-color: #b9d4bd !important;
  color: #22452c !important;
}

.alert-yellow, .ux-flash.warning {
  background: var(--paper) !important;
  border-color: #ddc9a0 !important;
  color: var(--paper-ink) !important;
}

:root[data-theme="dark"] .alert-green,
:root[data-theme="dark"] .ux-flash.success {
  background: #1b3325 !important;
  border-color: #2f5a3d !important;
  color: #c6e3cc !important;
}

:root[data-theme="dark"] .alert-yellow,
:root[data-theme="dark"] .ux-flash.warning {
  background: var(--paper) !important;
  border-color: #4a3a20 !important;
  color: var(--paper-ink) !important;
}

/* Menu lateral: o item ativo tinha branco cravado. */
html body .sidebar .menu-wrap > ul > li.active > a {
  background-color: var(--surface) !important;
  color: var(--petrol) !important;
}

/* Barra do topo do painel. */
.box-general > .header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

.box-general > .header .topbar {
  border-bottom-color: var(--border);
}

/* =====================================================================
 * Faixa escura (menu lateral + bloco do logo).
 *
 * O tema base pinta os dois com var(--blue), ou seja, com a COR DE MARCA.
 * Isso funciona no tema claro (petrol escuro), mas no escuro a marca vira
 * o teal claro #46c7b0 e o menu inteiro ficava verde-agua com o texto
 * ilegivel. No Retaguarda essa faixa e uma variavel propria (--ct-menu-bg,
 * #16241f) justamente por isso: e superficie, nao marca.
 * ===================================================================== */
.box-general > .sidebar,
.box-general > .header .logo {
  background-color: var(--band-bg);
}

.box-general > .header .logo {
  border-bottom-color: var(--band-border);
}

.sidebar .menu-wrap > ul > li > a,
.sidebar .menu-wrap > ul > li > a i {
  color: var(--band-ink-soft);
}

.sidebar .menu-wrap > ul > li > a:hover,
.sidebar .menu-wrap > ul > li > a:hover i {
  color: var(--band-ink);
}

html body .sidebar .menu-wrap > ul > li.active > a,
html body .sidebar .menu-wrap > ul > li.active > a i {
  color: var(--petrol) !important;
}

/* Os "recortes" arredondados do item ativo sao pseudo-elementos pintados
   com var(--blue): precisam acompanhar a faixa, nao a marca, senao
   aparecem dois dentes teal em volta do item selecionado. */
.sidebar .menu-wrap > ul > li.active > a::before,
.sidebar .menu-wrap > ul > li.active > a::after,
.sidebar .menu-wrap > ul > li.active::after {
  background-color: var(--band-bg) !important;
}

/* =====================================================================
 * Tema escuro: superficies e textos que o CSS antigo cravou em branco /
 * cinza-ardosia, sem passar por variavel. No tema claro esses valores
 * continuam valendo (sao os mesmos), entao as regras abaixo ficam
 * restritas ao escuro de proposito - assim o claro nao muda em nada.
 * ===================================================================== */

/* --- superficies --- */
:root[data-theme="dark"] .box .body,
:root[data-theme="dark"] .card .body,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .table-wrap tbody tr,
:root[data-theme="dark"] .xml-actions-bar,
:root[data-theme="dark"] .dropdown-menu.action-menu-floating,
:root[data-theme="dark"] .modal-main.sidebar .content .footer,
:root[data-theme="dark"] .sequence-advanced-panel,
:root[data-theme="dark"] .sequence-filter-summary > div,
:root[data-theme="dark"] .sequence-list-controls select,
:root[data-theme="dark"] .sequence-ux-steps span,
:root[data-theme="dark"] .branding-preview.has-custom-branding,
:root[data-theme="dark"] .modal-branding-dialog .branding-footer {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

/* --- textos --- */
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .sequence-empty-state,
:root[data-theme="dark"] .sequence-empty-state strong,
:root[data-theme="dark"] .sequence-ux-hero h4,
:root[data-theme="dark"] .sequence-ux-hero p,
:root[data-theme="dark"] .sequence-advanced-actions summary,
:root[data-theme="dark"] .sequence-advanced-panel > summary,
:root[data-theme="dark"] .sequence-sefaz-status-card strong,
:root[data-theme="dark"] .sequence-sefaz-status-card small,
:root[data-theme="dark"] .sequence-sefaz-status-numbers span,
:root[data-theme="dark"] .sequence-sefaz-import-copy small,
:root[data-theme="dark"] .dropdown-menu.action-menu-floating .dropdown-item,
:root[data-theme="dark"] .auth-title-block strong,
:root[data-theme="dark"] .auth-input-group label,
:root[data-theme="dark"] .title strong,
:root[data-theme="dark"] .box-heading h3,
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2,
:root[data-theme="dark"] h3, :root[data-theme="dark"] h4 {
  color: var(--ink) !important;
}

:root[data-theme="dark"] .dropdown-menu.action-menu-floating .dropdown-item:hover {
  background: var(--petrol-soft) !important;
  color: var(--petrol) !important;
}

/* Cabecalho de pagina: "Dashboard" sumia no escuro porque o titulo herda a
   cor do tema antigo, cravada em ardosia. */
:root[data-theme="dark"] .page-title,
:root[data-theme="dark"] .container > .title strong,
:root[data-theme="dark"] main .title strong {
  color: var(--ink) !important;
}

:root[data-theme="dark"] .container > .title small,
:root[data-theme="dark"] main .title small,
:root[data-theme="dark"] .box-heading small {
  color: var(--ink-soft) !important;
}

/* Botoes secundarios do topo dos cards (Relatorio / Baixar tudo / Filtrar):
   fundo claro cravado deixava o rotulo ilegivel no escuro. */
:root[data-theme="dark"] .xml-actions-bar .btn,
:root[data-theme="dark"] .btn.btn-default {
  background: var(--petrol-soft) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

:root[data-theme="dark"] .xml-actions-bar .btn i,
:root[data-theme="dark"] .btn.btn-default i {
  color: inherit !important;
}

/* =====================================================================
 * Cartoes de indicador (.dash-info-icon) e botoes secundarios (.btn-gray).
 *
 * No tema antigo os cartoes eram blocos chapados de azul/vermelho/verde/
 * amarelo saturados - o oposto da identidade do Retaguarda, onde o cartao
 * e claro e a cor aparece so no numero e no icone (ver .mini-card .icon em
 * retaguarda-identity.css). A distincao por tipo de documento continua,
 * mudou o peso: cor no dado, nao no bloco inteiro.
 * ===================================================================== */
.dash-info-icon {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--petrol) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 22px -18px rgba(22, 36, 31, .5);
}

.dash-info-icon .big-text,
.dash-info-icon .small-text,
.dash-info-icon span {
  color: var(--ink) !important;
}

.dash-info-icon .big-text {
  font-family: var(--font-display);
  font-weight: 700;
}

.dash-info-icon .small-text {
  color: var(--ink-soft) !important;
}

/* icone do cartao: selo suave, como no Retaguarda */
.dash-info-icon i,
.dash-info-icon .fas,
.dash-info-icon .far {
  color: var(--petrol) !important;
  opacity: .9;
}

/* cor por tipo, aplicada na borda e no icone */
.dash-info-icon.blue   { border-left-color: var(--petrol) !important; }
.dash-info-icon.green  { border-left-color: #2f7d5b !important; }
.dash-info-icon.red    { border-left-color: var(--danger, #b3402c) !important; }
.dash-info-icon.yellow { border-left-color: var(--amber) !important; }
.dash-info-icon.gray,
.dash-info-icon.dark   { border-left-color: var(--ink-soft) !important; }

.dash-info-icon.green i  { color: #2f7d5b !important; }
.dash-info-icon.red i    { color: var(--danger, #b3402c) !important; }
.dash-info-icon.yellow i { color: var(--amber) !important; }
.dash-info-icon.gray i,
.dash-info-icon.dark i   { color: var(--ink-soft) !important; }

:root[data-theme="dark"] .dash-info-icon.green  { border-left-color: #62b98d !important; }
:root[data-theme="dark"] .dash-info-icon.green i { color: #62b98d !important; }
:root[data-theme="dark"] .dash-info-icon.red    { border-left-color: #e08469 !important; }
:root[data-theme="dark"] .dash-info-icon.red i   { color: #e08469 !important; }

/* Botoes secundarios da barra de acoes dos cards. */
.btn.btn-gray {
  background: var(--ground) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}

.btn.btn-gray:hover {
  background: var(--petrol-soft) !important;
  border-color: var(--petrol) !important;
  color: var(--petrol) !important;
}

.btn.btn-gray span,
.btn.btn-gray i {
  color: inherit !important;
}

:root[data-theme="dark"] .btn.btn-gray {
  background: var(--petrol-soft) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

/* Texto auxiliar cravado em preto dentro dos cabecalhos dos cards. */
:root[data-theme="dark"] .text-black,
:root[data-theme="dark"] small.text-black {
  color: var(--ink-soft) !important;
}

/* =====================================================================
 * Tela de acesso em duas colunas, como no Retaguarda (faixa ink a
 * esquerda, formulario sobre o ground a direita).
 *
 * A iteracao "UX v64" tinha escondido o painel lateral com
 * display:none !important. O motivo declarado era "sem textos
 * promocionais" - e nao o layout em si; o painel volta com o conteudo
 * sobrio que ja esta na view (kicker + nome do produto + uma linha de
 * orientacao), sem nada de propaganda.
 * ===================================================================== */
@media (min-width: 921px) {
  .box-form-auth.auth-modern-card {
    width: min(980px, calc(100vw - 32px)) !important;
    max-width: min(980px, calc(100vw - 32px)) !important;
    display: grid !important;
    grid-template-columns: minmax(300px, .85fr) minmax(340px, 1.15fr) !important;
    min-height: 520px !important;
    overflow: hidden !important;
  }

  .auth-visual-panel {
    display: flex !important;
    flex-direction: column;
    /* space-between empurrava o texto para o rodape e ele estourava o card
       quando a coluna do formulario era mais baixa; com o logo no topo e o
       texto logo abaixo, o bloco cresce para dentro. */
    justify-content: flex-start;
    gap: 2.5rem;
    padding: clamp(2rem, 4vw, 3rem) !important;
    background: var(--band-bg) !important;
    color: var(--band-ink) !important;
    overflow: hidden;
  }

  .auth-visual-panel::after {
    content: none !important;
  }

  .auth-modern-logo img {
    max-width: 160px;
    /* sem filtro: o invert achatava o globo colorido do logo num borrao
       branco. O logo ja tem fundo transparente e le bem sobre o ink. */
  }

  .auth-branding h1 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.15;
    color: var(--band-ink) !important;
    margin: .6rem 0 .7rem;
  }

  .auth-branding p {
    color: var(--band-ink-soft) !important;
    max-width: 32ch;
    line-height: 1.5;
    font-size: .93rem;
  }

  .auth-kicker {
    display: inline-block;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--band-border);
    border-radius: 999px;
    padding: .3rem .7rem;
  }

  /* O cabecalho com logo dentro do formulario e a versao "empilhada" da
     tela; com o painel lateral visivel ele fica repetido. */
  .auth-form-card-header {
    display: none !important;
  }

  .auth-form-panel {
    padding: clamp(2rem, 4vw, 3rem) !important;
    display: flex !important;
    align-items: center;
  }

  .auth-form-panel > div {
    width: 100%;
  }
}