/* Visual Up CRM — o que é do painel e não cabe no Design System.
   Tudo o que é cor, tipo, espaço e curva vem de tokens.css. Aqui só entra
   estrutura: a casca, o quadro do pipeline, a grelha de presenças, os gráficos.

   As três regras do sistema mandam também aqui:
     1. a linha de 2px desce e ancora
     2. o âmbar só marca ação ou risco, nunca decora
     3. nada salta: --vu-descida a entrar, --vu-saida a sair              */

/* ------------------------------------------------------------------ casca */

.vu-app {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    min-height: 100vh;
}

.vu-lado {
    background: var(--vu-basalto-900);
    border-right: var(--vu-linha-peso) solid var(--vu-basalto-800);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.vu-lado__marca {
    padding: var(--vu-e5) var(--vu-e5) var(--vu-e5);
    border-bottom: 1px solid var(--vu-basalto-800);
}

.vu-lado__logo {
    display: block;
    width: 116px;
    height: 30px;
    background: var(--vu-acao);
    -webkit-mask: var(--logo) no-repeat center / contain;
    mask: var(--logo) no-repeat center / contain;
}

.vu-lado__nav {
    padding: var(--vu-e5) 0;
    flex: 1;
}

.vu-lado__grupo {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    letter-spacing: var(--vu-tracking-etiqueta);
    text-transform: uppercase;
    color: var(--vu-basalto-400);
    padding: var(--vu-e5) var(--vu-e5) var(--vu-e1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vu-lado__grupo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--vu-basalto-700);
}

.vu-lado__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px var(--vu-e5);
    min-height: 44px;
    color: var(--vu-basalto-200);
    text-decoration: none;
    font-size: var(--vu-fs-sm);
    border-left: var(--vu-linha-peso) solid transparent;
    transition: background var(--vu-t-rapido) var(--vu-descida),
                color var(--vu-t-rapido) var(--vu-descida);
}

.vu-lado__link:hover {
    background: var(--vu-basalto-800);
    color: #fff;
}

/* A corda a marcar onde se está: filete de 2px, sempre à esquerda. */
.vu-lado__link[aria-current="page"] {
    border-left-color: var(--vu-acao);
    background: var(--vu-basalto-800);
    color: #fff;
    font-weight: 600;
}

.vu-lado__rodape {
    padding: var(--vu-e5);
    border-top: 1px solid var(--vu-basalto-800);
    font-size: var(--vu-fs-xs);
    color: var(--vu-basalto-400);
}

.vu-lado__rodape a {
    color: var(--vu-basalto-300);
}

.vu-lado__sair {
    display: block;
    margin-top: 10px;
    min-height: 44px;
    line-height: 44px;
}

.vu-palco {
    background: var(--vu-papel-2);
    min-width: 0;
}

.vu-cabeca {
    background: var(--vu-papel);
    border-bottom: 1px solid var(--vu-linha);
    padding: var(--vu-e6) var(--vu-e6) var(--vu-e5);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vu-e5);
    flex-wrap: wrap;
}

.vu-cabeca h1 {
    font-family: var(--vu-display);
    font-size: var(--vu-fs-2xl);
    line-height: var(--vu-lh-titulo);
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--vu-tinta);
}

.vu-cabeca__sub {
    margin: 6px 0 0;
    color: var(--vu-tinta-3);
    font-size: var(--vu-fs-sm);
}

.vu-corpo {
    padding: var(--vu-e6);
    display: flex;
    flex-direction: column;
    gap: var(--vu-e5);
}

/* Sem isto, uma tabela larga estica o painel e é a PÁGINA que passa a rolar de
   lado, em vez da tabela dentro do seu próprio contentor. */
.vu-corpo > *,
.vu-grid > * { min-width: 0; }

/* --------------------------------------------------------------- métricas */

.vu-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
    gap: var(--vu-e5);
}

/* Métricas dentro de um painel: o cartão é mais estreito porque a caixa também é. */
.vu-metricas--densa { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--vu-e4); }
.vu-metricas--densa .vu-metrica__valor { font-size: var(--vu-fs-md); }

.vu-metrica {
    background: var(--vu-papel);
    border: 1px solid var(--vu-linha);
    border-top: var(--vu-linha-peso) solid var(--vu-basalto-300);
    border-radius: var(--vu-raio-cartao);
    padding: var(--vu-e5);
}

.vu-metrica--acao { border-top-color: var(--vu-acao); }
.vu-metrica--bom  { border-top-color: #1f7a4d; }
.vu-metrica--mau  { border-top-color: #a8332b; }

.vu-metrica__rotulo {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    letter-spacing: var(--vu-tracking-etiqueta);
    text-transform: uppercase;
    color: var(--vu-tinta-3);
    margin: 0 0 10px;
}

.vu-metrica__valor {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-lg);
    font-weight: 600;
    color: var(--vu-tinta);
    line-height: 1.1;
    margin: 0;
    /* Dinheiro em mono a 31px não cabia no cartão e era cortado. Os algarismos
       de largura fixa também alinham a coluna de valores entre cartões. */
    font-variant-numeric: tabular-nums;
}

.vu-metrica__nota {
    margin: 8px 0 0;
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-3);
}

.vu-metrica__nota a {
    display: inline-block;
    padding: 5px 0;
    color: var(--vu-tinta-2);
}

/* Uma caixa de 13px é o alvo por omissão do sistema e falha no telemóvel. */
.vu-form input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-height: 24px;
    accent-color: var(--vu-basalto-900);
}

/* ---------------------------------------------------------------- painéis */

.vu-painel {
    background: var(--vu-papel);
    border: 1px solid var(--vu-linha);
    border-radius: var(--vu-raio-cartao);
}

.vu-painel__topo {
    padding: var(--vu-e5);
    border-bottom: 1px solid var(--vu-linha);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vu-e5);
    flex-wrap: wrap;
}

.vu-painel__titulo {
    font-family: var(--vu-display);
    font-size: var(--vu-fs-md);
    margin: 0;
    color: var(--vu-tinta);
}

.vu-painel__sub {
    margin: 4px 0 0;
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-3);
}

.vu-painel__corpo { padding: var(--vu-e5); }
.vu-painel__corpo--liso { padding: 0; }

.vu-vazio {
    padding: var(--vu-e9) var(--vu-e5);
    text-align: center;
    color: var(--vu-tinta-3);
    font-size: var(--vu-fs-sm);
}

/* ----------------------------------------------------------------- quadro */

.vu-quadro {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(272px, 1fr);
    gap: var(--vu-e5);
    overflow-x: auto;
    padding-bottom: var(--vu-e5);
}

.vu-coluna {
    background: var(--vu-papel-3);
    border: 1px solid var(--vu-linha);
    border-top: var(--vu-linha-peso) solid var(--vu-basalto-300);
    border-radius: var(--vu-raio-cartao);
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.vu-coluna--acao { border-top-color: var(--vu-acao); }
.vu-coluna--bom  { border-top-color: #1f7a4d; }
.vu-coluna--mau  { border-top-color: #a8332b; }

.vu-coluna__topo {
    padding: 12px var(--vu-e5);
    border-bottom: 1px solid var(--vu-linha);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.vu-coluna__nome {
    font-size: var(--vu-fs-sm);
    font-weight: 600;
    color: var(--vu-tinta);
}

.vu-coluna__conta {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-3);
}

.vu-coluna__soma {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-2);
    padding: 6px var(--vu-e5);
    border-bottom: 1px solid var(--vu-linha);
}

.vu-coluna__pilha {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 68vh;
}

.vu-lead {
    background: var(--vu-papel);
    border: 1px solid var(--vu-linha);
    border-left: var(--vu-linha-peso) solid var(--vu-basalto-300);
    border-radius: 6px;
    padding: 12px;
    transition: box-shadow var(--vu-t-rapido) var(--vu-descida);
}

.vu-lead:hover { box-shadow: var(--vu-sombra); }
.vu-lead--acao { border-left-color: var(--vu-acao); }
.vu-lead--bom  { border-left-color: #1f7a4d; }
.vu-lead--mau  { border-left-color: #a8332b; }

.vu-lead__origem {
    font-family: var(--vu-tecnica);
    font-size: 10px;
    letter-spacing: var(--vu-tracking-etiqueta);
    text-transform: uppercase;
    color: var(--vu-tinta-3);
    display: inline-block;
    border: 1px solid var(--vu-linha);
    border-radius: 3px;
    padding: 2px 6px;
    margin-bottom: 8px;
}

.vu-lead__nome {
    font-weight: 600;
    font-size: var(--vu-fs-sm);
    color: var(--vu-tinta);
    margin: 0 0 4px;
}

.vu-lead__servico {
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-2);
    margin: 0 0 8px;
}

.vu-lead__contacto {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-3);
    margin: 0;
    word-break: break-all;
}

.vu-lead__pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--vu-linha);
}

.vu-lead__idade {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-3);
}

/* Parado há muito tempo é risco: aí, e só aí, o âmbar. */
.vu-lead__idade--parado { color: var(--vu-ambar-texto); font-weight: 600; }

/* ----------------------------------------------------------------- tabela */

.vu-quadro-envolve { overflow-x: auto; max-width: 100%; }

.vu-lista {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--vu-fs-sm);
}

.vu-lista th {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    letter-spacing: var(--vu-tracking-etiqueta);
    text-transform: uppercase;
    color: var(--vu-tinta-3);
    text-align: left;
    padding: 10px var(--vu-e5);
    border-bottom: 1px solid var(--vu-linha-forte);
    white-space: nowrap;
}

.vu-lista td {
    padding: 12px var(--vu-e5);
    border-bottom: 1px solid var(--vu-linha);
    color: var(--vu-tinta-2);
    vertical-align: top;
}

.vu-lista tr:last-child td { border-bottom: 0; }
.vu-lista tbody tr:hover td { background: var(--vu-papel-3); }

.vu-lista .num {
    font-family: var(--vu-tecnica);
    text-align: right;
    white-space: nowrap;
    color: var(--vu-tinta);
}

.vu-lista .cod {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-3);
    white-space: nowrap;
}

.vu-lista .principal { color: var(--vu-tinta); font-weight: 600; }

/* Um link com 14px de altura numa tabela densa é um alvo que falha no telemóvel.
   O padding vertical leva-o a 24px sem mexer no ritmo da linha. */
.vu-lista a,
.vu-lead__nome a {
    display: inline-block;
    padding: 5px 0;
    color: var(--vu-tinta);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--vu-basalto-300);
}

.vu-lista a:hover,
.vu-lead__nome a:hover { text-decoration-color: var(--vu-acao); }

/* --------------------------------------------------------------- selos */

.vu-selo {
    display: inline-block;
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: var(--vu-raio-pilula);
    border: 1px solid var(--vu-linha-forte);
    color: var(--vu-tinta-2);
    background: var(--vu-papel);
    white-space: nowrap;
}

.vu-selo--acao { border-color: var(--vu-ambar-600); color: var(--vu-ambar-texto); background: var(--vu-ambar-50); }
.vu-selo--bom  { border-color: #1f7a4d; color: #145c39; background: #eef7f2; }
.vu-selo--mau  { border-color: #a8332b; color: #8c2a23; background: #fbefee; }

/* ---------------------------------------------------------------- barras */

.vu-barra {
    height: 6px;
    background: var(--vu-basalto-100);
    border-radius: 3px;
    overflow: hidden;
}

.vu-barra__cheio {
    height: 100%;
    background: var(--vu-acao);
}
/* Sem transição na largura: a barra é desenhada de uma vez pelo servidor, por
   isso a transição nunca chegava a correr, e animar `width` faz reflow. */

.vu-barra__cheio--bom { background: #1f7a4d; }
.vu-barra__cheio--mau { background: #a8332b; }

.vu-progresso {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vu-progresso .vu-barra { flex: 1; }

.vu-progresso__valor {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-3);
    min-width: 38px;
    text-align: right;
}

/* ---------------------------------------------------- gráfico de colunas */

.vu-grafico {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    align-items: end;
    height: 200px;
    padding-top: var(--vu-e5);
}

.vu-grafico__mes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
}

.vu-grafico__pilha {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
    width: 100%;
    justify-content: center;
}

.vu-grafico__col {
    width: 26%;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--vu-basalto-300);
}

.vu-grafico__col--receita { background: #1f7a4d; }
.vu-grafico__col--custo   { background: #a8332b; }
.vu-grafico__col--lucro   { background: var(--vu-acao); }

.vu-grafico__rot {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-3);
}

.vu-legenda-cores {
    display: flex;
    gap: var(--vu-e5);
    flex-wrap: wrap;
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-2);
}

.vu-legenda-cores span { display: inline-flex; align-items: center; gap: 6px; }

.vu-legenda-cores i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* -------------------------------------------------------------- presenças */

.vu-presencas { width: 100%; border-collapse: collapse; }

.vu-presencas th,
.vu-presencas td {
    padding: 8px;
    border-bottom: 1px solid var(--vu-linha);
    text-align: center;
}

.vu-presencas th:first-child,
.vu-presencas td:first-child { text-align: left; min-width: 180px; }

.vu-presencas th {
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--vu-tracking-etiqueta);
    color: var(--vu-tinta-3);
}

.vu-presencas th.hoje { color: var(--vu-ambar-texto); }

.vu-celula {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 46px;
    min-height: 44px;
    border-radius: 6px;
    border: 1px solid var(--vu-linha);
    background: var(--vu-papel);
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    color: var(--vu-tinta-3);
    cursor: pointer;
    transition: border-color var(--vu-t-rapido) var(--vu-descida);
}

.vu-celula:hover { border-color: var(--vu-basalto-400); }
.vu-celula--bom  { border-color: #1f7a4d; color: #145c39; background: #eef7f2; }
.vu-celula--acao { border-color: var(--vu-ambar-600); color: var(--vu-ambar-texto); background: var(--vu-ambar-50); }
.vu-celula--mau  { border-color: #a8332b; color: #8c2a23; background: #fbefee; }

.vu-celula small { font-size: 9px; opacity: .75; }

/* ------------------------------------------------------------------ abas */

.vu-abas {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--vu-linha);
    margin-bottom: var(--vu-e5);
    overflow-x: auto;
}

.vu-aba {
    padding: 11px 18px;
    min-height: 44px;
    font-size: var(--vu-fs-sm);
    color: var(--vu-tinta-3);
    text-decoration: none;
    border-bottom: var(--vu-linha-peso) solid transparent;
    white-space: nowrap;
}

.vu-aba[aria-current="page"] {
    color: var(--vu-tinta);
    font-weight: 600;
    border-bottom-color: var(--vu-acao);
}

/* ---------------------------------------------------------------- filtros */

.vu-filtros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.vu-filtros select,
.vu-filtros input {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--vu-linha-forte);
    border-radius: 6px;
    background: var(--vu-papel);
    color: var(--vu-tinta);
    font: inherit;
    font-size: var(--vu-fs-sm);
}

.vu-fatia {
    display: inline-flex;
    align-self: flex-start;   /* senão a pílula estica a largura toda do painel */
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--vu-linha-forte);
    border-radius: var(--vu-raio-pilula);
    overflow: hidden;
}

.vu-fatia a {
    padding: 10px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--vu-fs-sm);
    color: var(--vu-tinta-2);
    text-decoration: none;
    border-right: 1px solid var(--vu-linha);
}

.vu-fatia a:last-child { border-right: 0; }
.vu-fatia a[aria-current="page"] { background: var(--vu-basalto-900); color: #fff; }

/* ------------------------------------------------------------- formulário */

.vu-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--vu-e5);
}

.vu-form--largo { grid-template-columns: 1fr; }
.vu-form .todo { grid-column: 1 / -1; }

.vu-form label {
    display: block;
    font-family: var(--vu-tecnica);
    font-size: var(--vu-fs-xs);
    letter-spacing: var(--vu-tracking-etiqueta);
    text-transform: uppercase;
    color: var(--vu-tinta-3);
    margin-bottom: 6px;
}

.vu-form input,
.vu-form select,
.vu-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid var(--vu-linha-forte);
    border-radius: 6px;
    background: var(--vu-papel);
    color: var(--vu-tinta);
    font: inherit;
    font-size: var(--vu-fs-sm);
}

.vu-form textarea { min-height: 96px; resize: vertical; }

.vu-form input:focus-visible,
.vu-form select:focus-visible,
.vu-form textarea:focus-visible {
    outline: var(--vu-linha-peso) solid var(--vu-foco);
    outline-offset: 1px;
}

.vu-acoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.vu-acoes--fim { justify-content: flex-end; }

/* --------------------------------------------------------------- diálogo */

dialog.vu-modal {
    border: 1px solid var(--vu-linha-forte);
    border-top: var(--vu-linha-peso) solid var(--vu-acao);
    border-radius: var(--vu-raio-cartao);
    padding: 0;
    width: min(680px, calc(100vw - 32px));
    background: var(--vu-papel);
    color: var(--vu-tinta);
}

dialog.vu-modal::backdrop { background: rgb(10 17 25 / .55); }

.vu-modal__topo {
    padding: var(--vu-e5);
    border-bottom: 1px solid var(--vu-linha);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vu-modal__titulo {
    font-family: var(--vu-display);
    font-size: var(--vu-fs-md);
    margin: 0;
}

.vu-modal__corpo { padding: var(--vu-e5); max-height: 70vh; overflow-y: auto; }

.vu-modal__pe {
    padding: var(--vu-e5);
    border-top: 1px solid var(--vu-linha);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.vu-fechar {
    background: none;
    border: 0;
    font-size: var(--vu-fs-lg);
    line-height: 1;
    color: var(--vu-tinta-3);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}

/* ----------------------------------------------------------------- aviso */

.vu-aviso {
    padding: 12px var(--vu-e5);
    border-radius: 6px;
    border-left: var(--vu-linha-peso) solid var(--vu-acao);
    background: var(--vu-ambar-50);
    color: var(--vu-tinta);
    font-size: var(--vu-fs-sm);
}

.vu-aviso--mau { border-left-color: #a8332b; background: #fbefee; }
.vu-aviso--bom { border-left-color: #1f7a4d; background: #eef7f2; }

/* --------------------------------------------------------------- entrada */

.vu-entrada {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--vu-basalto-900);
    padding: var(--vu-e5);
}

.vu-entrada__caixa {
    width: min(400px, 100%);
    background: var(--vu-papel);
    border-radius: var(--vu-raio-cartao);
    border-top: var(--vu-linha-peso) solid var(--vu-acao);
    padding: var(--vu-e9);
}

.vu-entrada__logo {
    display: block;
    width: 132px;
    height: 34px;
    margin: 0 auto var(--vu-e9);
    background: var(--vu-basalto-900);
    -webkit-mask: var(--logo) no-repeat center / contain;
    mask: var(--logo) no-repeat center / contain;
}

/* ------------------------------------------------------------- telemóvel */

.vu-menu-botao { display: none; }

@media (max-width: 900px) {
    .vu-app { grid-template-columns: 1fr; }

    .vu-lado {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: var(--vu-linha-peso) solid var(--vu-acao);
    }

    .vu-lado__nav { display: none; padding: 0 0 var(--vu-e5); }
    .vu-lado[data-aberto="1"] .vu-lado__nav { display: block; }
    .vu-lado[data-aberto="1"] .vu-lado__rodape { display: block; }
    .vu-lado__rodape { display: none; }

    .vu-lado__marca { display: flex; align-items: center; justify-content: space-between; }

    .vu-menu-botao {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        background: none;
        border: 1px solid var(--vu-basalto-700);
        border-radius: 6px;
        color: var(--vu-basalto-200);
        cursor: pointer;
    }

    .vu-cabeca,
    .vu-corpo { padding: var(--vu-e5); }

    .vu-corpo { gap: var(--vu-e4); }

    .vu-quadro { grid-auto-columns: minmax(252px, 88vw); }
    .vu-form { grid-template-columns: 1fr; }
}