/* v4-vdc.css · Identidade v4 da EcomSmart pintada com as cores do Viver de Comprinha, e a casca do app do VdC.
   Carregar DEPOIS de v4.css (cópia fiel de prototipo.ecomsmart.com.br/identidades/v4-previa/assets/css/v4.css de
   18/10/2026, em /static/v4.css; não editar aquele arquivo: tudo que o VdC muda fica aqui). Especificação em
   docs/23-identidade-v4.md. Sem @import.
   Ordem: fonte, tokens, ícones de linha, ajustes de leitura, componentes que a v4 não tem (lima, Beta, peça
   "Demonstração", bloco lilás), casca do app (trilho, topo da área, descrição, sino, cartão, formulários de linha,
   filtros da tabela, mensagens, vazio, esqueleto, avisos, login), tabela em cartões, celular e toque. */

/* ---------------------------------------------------------------- fonte
   A v4 declara "Figtree" em ../fontes/figtree.woff2 (não existe aqui). A família ganha nome próprio e a pilha de
   fontes deixa de citar "Figtree": assim o navegador nunca pede a URL da v4 (sem 404 no console). */
@font-face {
  font-family: "Figtree VdC";
  src: url("fontes/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens: azul da EcomSmart -> Violeta; Navy -> Ameixa */
:root, [data-marca="viverdecomprinha"] {
  --fonte: "Figtree VdC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* marca */
  --marca: #5B21B6;            /* Violeta: botão primário, link, ícone ativo, sublinhado da aba, foco */
  --marca-hover: #4C1D95;      /* Violeta escuro: hover do primário */
  --marca-forte: #4C1D95;      /* texto violeta sobre Lavanda (lozenge marca, avatar, número de case) */
  --marca-suave: #F3EEFF;      /* Lavanda: pastel principal (item ativo do trilho, lozenge marca, bloco de entrada, login) */
  --marca-suave-2: #DCCEFF;    /* Lavanda média: seleção de texto, hover do quadro do logo */
  --marca-contraste: #FFFFFF;
  --link: #5B21B6; --foco: #5B21B6;
  /* a única seção na cor da marca em cada página */
  --faixa: #5B21B6; --faixa-texto: #FFFFFF; --faixa-texto-2: #F3EEFF; --faixa-destaque: #C8F03C;
  /* tinta e textos (a família de cinzas da v4 continua; só a tinta e os textos ganham o tom da Ameixa) */
  --tinta: #1F1535;            /* Ameixa */
  --texto: #5A4E78;            /* texto corrido: 7,5:1 no branco */
  --texto-2: #6E6390;          /* apoio, rótulos do trilho, cabeçalho da tabela: 5,4:1 no branco, 4,8:1 na Lavanda */
  --texto-3: #8A80A6;          /* placeholder e setas de ordenação (não é texto de leitura) */
  --borda-campo: #8A80A6;      /* contorno de campo: 3,7:1 */
  /* só do VdC */
  --lilas-acento: #A78BFA;     /* Lilás: acento e detalhe (bloco decorativo, linhas do painel de login, Desfazer do aviso). Nunca texto sobre fundo claro */
  --lima: #C8F03C;             /* Lima: um acento por bloco (selo de dias, botão que faz a comprinha andar). Texto por cima é Ameixa */
  --info-fundo: #F3EEFF;       /* mensagem "info" na Lavanda, não no azul */
  /* sombras com a tinta da marca */
  --sombra-1: 0 1px 2px rgb(31 21 53 / 0.06), 0 0 0 1px rgb(31 21 53 / 0.06);
  --sombra-2: 0 16px 36px -18px rgb(31 21 53 / 0.28), 0 0 0 1px rgb(31 21 53 / 0.07);
  --sombra-3: 0 24px 48px -20px rgb(31 21 53 / 0.35), 0 0 0 1px rgb(31 21 53 / 0.08);
}

/* ---------------------------------------------------------------- ícones de linha (brandbook: traço 2, pontas redondas)
   O VdC não usa o sprite da v4; os ícones são <svg class="ico" viewBox="0 0 24 24"> com <path> em linha (ou <use> de um
   <symbol> inline), ou data-g do casca.js (que vira <svg class="g">). As duas classes têm o mesmo traço. */
.ico, .g { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.g { width: 20px; height: 20px; }
.g.p { width: 16px; height: 16px; }
.btn .ico, .btn .g { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- ajustes de leitura e marca */
.topo-logo img { height: 32px; }                 /* assinatura horizontal: o símbolo tem no mínimo 32 px (brandbook, pág. 43) */
@media (min-width: 768px) { .topo-logo img { height: 36px; } }
.rodape-marca img { height: 32px; }
.toast button { color: var(--lilas-acento); }    /* Lilás sobre Ameixa: 6,3:1 */
.cartao .link-seta:hover { color: var(--marca-forte); }
.achado.alta { --g: #B42318; }
.aceite input { accent-color: var(--marca); }
.modal, .folha-fundo { background: rgb(31 21 53 / 0.72); }
.previa { background: rgb(31 21 53 / .6); }

/* ---------------------------------------------------------------- componentes que a v4 não tem */
/* selo lima: "7 dias grátis", "faltam N dias". Um por bloco. */
.lozenge.lima { background: var(--lima); color: var(--tinta); }
a.lozenge.lima:hover { background: #B9E42A; text-decoration: none; }
/* chip Beta do Catálogo Viral (igual ao lozenge marca, com nome próprio) */
.lozenge.beta { background: var(--marca-suave); color: var(--marca-forte); }
/* botão lima: a única ação que faz a comprinha andar na tela (Gerar texto, Enviar pro grupo). Fora dele, o primário é violeta. */
.btn-lima { background: var(--lima); color: var(--tinta); }
.btn-lima:hover { background: #B9E42A; box-shadow: 0 10px 24px -12px rgb(31 21 53 / 0.4); }
.btn-lima:focus-visible { outline-color: var(--tinta); }
/* bloco decorativo lilás atrás de uma tela real (elementos gráficos do brandbook: bloco de canto redondo) */
.palco-vdc { position: relative; isolation: isolate; }
.palco-vdc::before { content: ""; position: absolute; z-index: -1; left: 10%; top: 12%; right: -5%; bottom: -6%; border-radius: var(--r-2xl); background: var(--lilas-acento); opacity: .55; }
/* peça "Demonstração": a mensagem como vai para o grupo, sem verde nem ícone do WhatsApp (não somos a API oficial) */
.peca-demo { margin: 0; border: 1px solid var(--borda); border-radius: var(--r-l); background: var(--fundo-2); overflow: hidden; max-width: 440px; }
.peca-demo-barra { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--linha); font-size: 13px; color: var(--texto-2); }
.peca-demo-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--borda-forte); flex: none; }
.peca-demo-barra b { margin-left: 6px; color: var(--tinta); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peca-demo-barra .lozenge { height: 20px; font-size: 11.5px; }
.peca-demo-corpo { display: grid; gap: 6px; padding: 14px; }
.peca-demo .balao { max-width: 92%; }
.balao.nosso { background: var(--marca-suave); }
.peca-demo .balao small { display: block; margin-top: 6px; font-size: 12px; color: var(--texto-2); }
.peca-demo figcaption { padding: 8px 12px 10px; font-size: 12.5px; color: var(--texto-2); }

/* ---------------------------------------------------------------- casca do app: o sistema inteiro, não o quadro do protótipo
   Fundo #F0F2F4, painéis brancos de raio 12, 12 px de margem e 8 px de vão; menu em trilho de 80 px (v4, aprovado em
   17/10/2026 para todos os produtos) que abaixo de 768 px vira a barra de baixo. Painéis sempre claros: sem tema
   escuro e sem seletor de tema (decisão do dono para todos os sistemas do grupo, 15 e 16/10/2026). */
html.app-html, body.app-body { background: var(--fundo-3); }
.app { border-radius: 0; min-height: 100dvh; align-items: start; }
.app-painel { min-height: calc(100dvh - 24px); }
/* a v4 deixa a coluna do conteúdo em "auto" (largura máxima do texto): em 390 px a descrição e os KPIs vazavam para fora
   do painel. Uma coluna que nunca passa da largura do painel. */
.app-conteudo { grid-template-columns: minmax(0, 1fr); }
.app-conteudo > * { min-width: 0; }
/* trilho: quadro do logo na Lavanda com o símbolo violeta; item ativo na Lavanda com ícone e rótulo violeta */
.trilho-logo { background: var(--marca-suave); color: var(--marca); }
.trilho-logo:hover { background: var(--marca-suave-2); }
.trilho-logo img, .trilho-logo svg { width: auto; height: 24px; }   /* o símbolo tem no mínimo 24 px (brandbook, pág. 43) */
.trilho-item { color: var(--texto-2); }
.trilho-item:hover { color: var(--tinta); }
.trilho-item.ativo, .trilho-item[aria-current="page"] { background: var(--marca-suave); color: var(--marca); }
.trilho-item.ativo .contador, .trilho-item[aria-current="page"] .contador { box-shadow: 0 0 0 2px var(--marca-suave); }
.trilho-item .contador.neutro { background: var(--superficie-3); color: var(--texto); }
.trilho-item:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
/* grupos do VdC (Ofertas, Catálogo Viral, Grupos): um fio entre os blocos do trilho */
.trilho-grupo + .trilho-grupo:not(.trilho-pe) { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); }
/* item "Início" só na barra de baixo (no computador, o quadro do logo leva ao Início) */
.trilho-item.so-barra { display: none; }
/* topo da área: título (h1), chip Beta ao lado do título, selo de dias, "Conta: nome", sino com ponto, avatar com iniciais, Sair */
.app-cab { position: relative; z-index: 2; }
.app-cab h1 { font-size: 26px; font-weight: 700; margin: 0; }
.app-cab h1 .lozenge, .app-cab h2 .lozenge { vertical-align: middle; margin-left: 8px; }
.app-cab .conta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-m); background: var(--fundo-2); border: 1px solid var(--linha); font-size: 14px; color: var(--tinta); white-space: nowrap; }
.app-cab .conta b { font-weight: 600; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.app-cab .ico-botao { width: 40px; height: 40px; border: 0; background: none; border-radius: var(--r-m); color: var(--texto); display: grid; place-items: center; position: relative; cursor: pointer; }
.app-cab .ico-botao:hover { background: var(--fundo-2); }
.app-cab .ico-botao .ponto { position: absolute; right: 10px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--contador); box-shadow: 0 0 0 2px #fff; }
.app-cab .sep { width: 1px; height: 20px; background: var(--linha); }
.app-cab .usuario { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta); }
.app-cab .lozenge.lima { height: 24px; font-size: 12.5px; }
/* descrição curta da tela e "Saiba mais" no celular */
.desc, .desc-caixa .desc { color: var(--texto-2); font-size: 15px; max-width: 80ch; }
.desc-caixa { display: grid; justify-items: start; }
.desc-mais { display: none; align-items: center; min-height: 44px; margin-block: -10px -12px; padding: 0; border: 0; background: none; color: var(--link); font-size: 15px; font-weight: 600; cursor: pointer; }
/* sino: painel de notificações (avisos do teste, ofertas para aprovar) */
.notif { position: relative; }
.suspenso.notif-painel { left: auto; right: 0; min-width: 0; width: min(360px, calc(100vw - 24px)); padding: 8px; }
.notif-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 10px; }
.notif-cab strong { font-size: 15px; color: var(--tinta); }
.notif-lidas { min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-m); background: none; color: var(--link); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.notif-lidas:hover { background: var(--fundo-2); }
.notif-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.notif-lista a { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 10px; align-items: start; min-height: 44px; padding: 10px; border-radius: var(--r-m); color: var(--tinta); text-decoration: none; }
.notif-lista a:hover { background: var(--fundo-2); }
.notif-lista a > i { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--contador); }
.notif-lista .lida > i { background: transparent; }
.notif-lista b { font-size: 14px; font-weight: 600; line-height: 1.4; }
.notif-lista small { grid-column: 2; font-size: 13px; color: var(--texto-2); }
/* cartão denso do app, linhas de configuração, campo de linha, segmentado, interruptor */
.card { padding: 20px; border-radius: 12px; background: var(--fundo-2); border: 1px solid var(--linha); display: grid; gap: 12px; }
.card.branco { background: #fff; }
.card .lin { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.card .lin:last-child { border-bottom: 0; }
.card .lin b { color: var(--tinta); font-weight: 600; }
.card-tit, .card h3.rotulo { font-size: 15px; font-weight: 600; color: var(--tinta); }
.campo-linha { min-height: 44px; width: 220px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--borda-campo); border-radius: var(--r-m); background: #fff; color: var(--tinta); font: inherit; font-size: 16px; }
.campo-linha:focus { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.segm { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--superficie-3); gap: 2px; }
.segm button { height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--tinta); font-size: 14px; font-weight: 500; cursor: pointer; }
.segm button[aria-pressed="true"] { background: var(--marca-suave); color: var(--marca-forte); }
.toggle { flex: none; width: 42px; height: 24px; border-radius: 12px; background: var(--borda); border: 0; position: relative; cursor: pointer; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s var(--curva); }
.toggle[aria-pressed="true"] { background: var(--marca); } .toggle[aria-pressed="true"]::after { transform: translateX(18px); }
.lin-toggle { position: relative; min-height: 56px; cursor: pointer; }
.lin-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lin-toggle input:checked + .toggle { background: var(--marca); }
.lin-toggle input:checked + .toggle::after { transform: translateX(18px); }
.lin-toggle input:focus-visible + .toggle { outline: 2px solid var(--foco); outline-offset: 2px; }
/* KPI que leva a uma lista */
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--borda-forte); background: #fff; text-decoration: none; }
.kpi-ir { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--link); }
/* filtros acima da tabela, resumo que fecha a conta e selo removível do filtro */
.filtros-tabela { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.filtro { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-2); }
.filtro > span, .filtro > label { white-space: nowrap; }
.filtro .campo-linha { width: auto; }
.filtro.ordenar-m { display: none; }
.tabela-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 15px; color: var(--tinta); }
.filtro-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--marca); border-radius: var(--r-pilula); background: var(--marca-suave); color: var(--marca-forte); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
/* mensagens de seção (info na Lavanda), com botão de texto quando pedem ação */
.msg-secao { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px; align-items: flex-start; }
.msg-secao .ico { width: 18px; height: 18px; margin-top: 1px; }
.msg-secao.info { background: var(--info-fundo); color: var(--tinta); }
.msg-secao.erro { background: var(--erro-fundo); color: var(--erro); }
.msg-secao.ok { background: var(--ok-fundo); color: var(--ok); }
.msg-secao.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.msg-corpo { display: grid; justify-items: start; min-width: 0; }
.msg-acao { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* vazio, carregando */
.vazio { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 20px; border: 1px dashed var(--borda); border-radius: 12px; color: var(--texto-2); }
.vazio .ico { width: 36px; height: 36px; color: var(--texto-3); }
.vazio strong { color: var(--tinta); font-size: 16px; }
.esqueleto { display: grid; gap: 10px; }
.esqueleto i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--superficie-3) 25%, var(--fundo-2) 50%, var(--superficie-3) 75%); background-size: 200% 100%; animation: esqueleto-passa 1.4s linear infinite; }
@keyframes esqueleto-passa { to { background-position: -200% 0; } }
/* avisos embaixo (à esquerda no computador), com Desfazer */
.avisos { position: fixed; left: 24px; bottom: 24px; z-index: 100; width: min(440px, calc(100vw - 48px)); display: grid; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 4px 4px 16px; border-radius: var(--r-m); background: var(--tinta); color: #fff; font-size: 14px; line-height: 1.4; box-shadow: var(--sombra-3); animation: toast-entra .2s var(--curva); }
.toast span { flex: 1; min-width: 0; padding-block: 10px; }
.toast.erro { background: #B42318; }
.toast button { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-m); background: none; font-size: 14px; font-weight: 700; cursor: pointer; }
.toast button:hover { background: rgb(255 255 255 / .1); }
.toast button:focus-visible { outline-color: #fff; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } }
/* login: painel branco com o formulário (no VdC: e-mail + aceite, link por e-mail, sem senha) e painel Lavanda com linhas lilás */
.login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 640px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--sombra-2); max-width: 1200px; margin-inline: auto; }
.login-form { padding: 48px 56px; display: grid; gap: 18px; align-content: center; max-width: 520px; margin-inline: auto; width: 100%; }
.login-form h1, .login-form h2 { font-size: 26px; }
.login-form .btn-pri { --btn-alt: 52px; }
.login-form a { text-decoration: underline; text-underline-offset: 2px; }
.app-logo .logo-quadro { width: 44px; height: 44px; border-radius: 12px; background: var(--marca-suave); display: grid; place-items: center; flex: none; }
.app-logo .logo-quadro img, .app-logo .logo-quadro svg { width: auto; height: 24px; }
.app-logo strong { font-size: 19px; color: var(--tinta); letter-spacing: -0.01em; }
.login-lado { background: var(--marca-suave); background-image: repeating-linear-gradient(0deg, rgb(167 139 250 / 0.35) 0 1px, transparent 1px 48px); display: grid; place-items: center; padding: 40px; }
.login-lado .lado-card { background: #fff; border-radius: 12px; padding: 24px; width: min(100%, 380px); box-shadow: var(--sombra-2); display: grid; gap: 12px; }
.lembrar { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.lembrar label { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.lembrar a { display: inline-flex; align-items: center; min-height: 44px; }
/* seletor de tema do v2: não existe mais na casca */
.menu-tema { display: none !important; }
/* telas que só entram numa largura */
@media (max-width: 719px) { .so-computador { display: none !important; } }
@media (min-width: 720px) { .so-celular { display: none !important; } }

/* ---------------------------------------------------------------- tablet e celular (o trilho vira a barra de baixo: regras na v4) */
@media (max-width: 1023px) {
  .login { grid-template-columns: minmax(0, 1fr); } .login-lado { display: none; }
}
@media (max-width: 767px) {
  .trilho-item.so-barra { display: flex; }
  .trilho-grupo + .trilho-grupo:not(.trilho-pe) { margin: 0 0 0 6px; padding: 0 0 0 6px; border-top: 0; border-left: 1px solid var(--linha); }
  .trilho-item.fixo.ativo, .trilho-item.fixo[aria-current="page"] { background: var(--marca-suave); }
  .app.app-trilho::after { box-shadow: 0 -6px 20px rgb(31 21 53 / .06); }
  .app.app-trilho:not(.app-demo) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } /* sem a Clara: só a barra de 64 px e 12 px de folga */
  .app-cab { position: relative; }
  .app-cab .notif { position: static; }
  .suspenso.notif-painel { left: 8px; right: 8px; width: auto; top: calc(100% + 4px); }
  .app-cab .cab-sair { display: none; }   /* no celular, Sair fica em Configurações */
  .filtro.ordenar-m { display: flex; }
  .filtros-tabela { gap: 8px; }
  .app-painel, .app-conteudo, .tabela-caixa, .filtros-tabela, .filtro { min-width: 0; }
  .filtro { flex: 1 1 100%; }
  .filtro > span, .filtro > label { min-width: 84px; }
  .filtro .campo-linha { flex: 1; min-width: 0; max-width: none; }
  .avisos { left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); width: auto; }
}

/* ---------------------------------------------------------------- celular */
@media (max-width: 719px) {
  .app { padding: 12px; gap: 8px; }
  .app-cab { gap: 4px; padding: 0 8px; min-height: 52px; }
  .app-cab h1, .app-cab h2 { font-size: 20px; }
  .app-cab .conta, .app-cab .sep, .app-cab .usuario { display: none; }
  .app-conteudo { padding: 12px 12px 24px; gap: 12px; }
  .desc-caixa:not(.aberta) .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .desc-mais { display: inline-flex; }
  .app-conteudo .abas { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .app-conteudo .abas.no-fim { -webkit-mask-image: none; mask-image: none; }
  .aba { padding: 0 10px; gap: 6px; font-size: 14px; }
  .card { padding: 16px; }
  .card .lin { flex-wrap: wrap; }
  .card .lin:has(> .toggle) { flex-wrap: nowrap; }
  .card .lin .campo-linha { width: 100%; }
  .kpi .kpi-rotulo { font-size: 14px; }
  .login-form { padding: 32px 20px; }
  .peca-demo { max-width: none; }
  /* tabela vira lista de cartões (.tabela-cartoes): 1ª coluna = título (largura toda, 2 linhas), td.situacao na 2ª linha,
     as demais numa linha com espaço entre si, td.acoes à direita; ordenar pelo .filtro.ordenar-m acima */
  .tabela-caixa.tabela-cartoes { border: 0; border-radius: 0; overflow: visible; }
  .tabela-cartoes .tabela, .tabela-cartoes .tabela tbody { display: block; }
  .tabela-cartoes .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-cartoes .tabela tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 84px 12px 12px; margin-bottom: 8px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
  .tabela-cartoes .tabela td { display: block; padding: 0; border: 0; text-align: left !important; }
  .tabela-cartoes .tabela tbody tr:hover td { background: none; }
  .tabela-cartoes .tabela td:first-child { flex: 0 0 100%; order: 0; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .tabela-cartoes .tabela td.situacao { flex: 0 0 100%; order: 1; }
  .tabela-cartoes .tabela td:not(:first-child):not(.situacao):not(.acoes) { order: 2; font-size: 14px; color: var(--texto-2); white-space: nowrap; }
  .tabela-cartoes .tabela td.acoes { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
}

/* ---------------------------------------------------------------- toque: alvos de 44 px */
@media (pointer: coarse), (max-width: 719px) {
  .app-cab .ico-botao { width: 44px; height: 44px; }
  .app-cab .conta { height: 44px; }
  .app .btn-p { --btn-alt: 44px; }
  .segm button { height: 44px; }
  .toggle::before { content: ""; position: absolute; inset: -10px -2px; }
}

/* ---------------------------------------------------------------- movimento: a v4 já respeita "reduzir movimento"; aqui só o que é novo */
@media (prefers-reduced-motion: reduce) {
  .toggle::after, .toast, .trilho-item { transition: none; animation: none; }
}