/* ==========================================================================
   iKero — tema do painel
   Direção: minimalista, neutro e claro, com o laranja da marca usado como
   ÚNICO acento. Nada de preto dominando a interface.

   Base de decisão (contrastes WCAG medidos):
     #fa5420 + texto branco ..... 3,31:1  reprova AA  -> não serve para preencher botão
     #fa5420 + texto preto ...... 6,35:1  passa, mas texto preto sobre laranja
                                          é pesado e data o visual
     #d13605 + texto branco ..... ~5:1    passa AA e mantém a matiz da marca (14,3°)
     #18181b sobre branco ....... 17,7:1  texto principal
     #71717a sobre branco ....... 4,83:1  texto secundário (limite do AA)

   Ou seja: o laranja preenchido usa a variante fechada; o #fa5420 puro fica
   reservado para acentos finos (indicador ativo, foco, ícones, destaques),
   que é onde ele brilha sem precisar carregar texto em cima.
   ========================================================================== */

:root {
    /* ---- acento da marca ---- */
    --ik-accent: #fa5420;          /* laranja oficial: acentos, indicadores, foco */
    --ik-accent-fill: #d13605;     /* preenchimento de botão (AA com branco) */
    --ik-accent-hover: #b82f04;
    --ik-accent-soft: #fff1ec;     /* fundo tênue de estado ativo */
    --ik-erro-texto: #a3143a;      /* texto de erro de campo (MASTER §3 "Erro / perigo") */
    --ik-erro-fundo: #fdecf0;
    --ik-sucesso-texto: #0a6045;   /* texto de confirmação de campo, 7,58:1 no branco (MASTER §5.44) */
    /* 10/10/2026 (decisão do proprietário, MASTER §5.71.1): botões de DECISÃO de solicitação — Aprovar verde e Negar vermelho, cheios.
       Texto branco: verde 7,58:1 / hover 9,86:1; vermelho 7,72:1 / hover 9,94:1. Só para decidir pedido, não para ação primária comum. */
    --ik-decisao-aprovar: #0a6045;
    --ik-decisao-aprovar-hover: #084d38;
    --ik-decisao-negar: #a3143a;
    --ik-decisao-negar-hover: #85102f;
    --ik-aviso-texto: #7a4a00;     /* aviso (âmbar do `pendente`), 7,48:1 sobre --ik-aviso-fundo (MASTER §5.100) */
    --ik-aviso-fundo: #fdf3e4;
    --ik-accent-soft-2: #ffe4dc;
    --ik-accent-em-soft: #c73104;  /* texto/ícone SOBRE --ik-accent-soft:
                                      o --ik-accent-fill foi calibrado contra
                                      branco (4,95:1) e cai para 4,49:1 sobre
                                      o #fff1ec — reprova por um fio. Este tom
                                      mede 4,92:1 ali. Mesmo caso do #52525b
                                      do menu, descrito na seção 2.2. */

    /* ---- neutros ---- */
    --ik-bg: #f7f7f8;              /* fundo da página */
    --ik-surface: #ffffff;         /* cartões, sidebar, cabeçalho */
    --ik-surface-2: #fafafa;       /* faixas sutis, cabeçalho de tabela */
    --ik-border: #e9e9ec;
    --ik-border-strong: #d4d4d8;
    --ik-estrela: #bf7d00;         /* estrela da nota (dourado, matiz 39° — longe da marca, 14°): 3,42:1 com branco, 3,27:1 com --ik-surface-2 */

    --ik-text: #18181b;            /* texto principal */
    --ik-text-muted: #71717a;      /* texto secundário */
    --ik-text-subtle: #a1a1aa;     /* rótulos, legendas */
    --ik-text-menu: #52525b;       /* itens do menu e texto secundário SOBRE fundo tênue (--ik-accent-soft: 7,01:1; o muted dá 4,38 ali) */
    --ik-previa-busca-titulo: #1a0dab; /* título azul da prévia no buscador (SEO do site, §5.154): 12,43:1 no branco — só ilustra o resultado da busca */
    --ik-recibo-total: #efeff1;    /* faixa do total no recibo do pedido (§5.16): um degrau abaixo do papel (--ik-surface-2); --ik-text 15,4:1 */

    /* ---- gráfico anual da Início da loja (§5.20, 23/09/2026) ----
       Lidos pelo JS da dashboard via getComputedStyle: nenhuma cor no Blade.
       Série 1 = ganhos (índigo do §5.4, 6,9:1 sobre branco); série 2 =
       comissão paga, em cinza (é dinheiro que saiu, não status); tiques em
       #52525b (7:1 — o #97a4af do template media 2,55:1). */
    --ik-grafico-serie-1: #4338ca;
    --ik-grafico-serie-2: var(--ik-text-muted);
    --ik-grafico-tique: #52525b;
    --ik-grafico-grade: var(--ik-border);

    /* ---- forma ---- */
    --ik-radius: 10px;
    --ik-radius-lg: 14px;
    --ik-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
    --ik-shadow-md: 0 4px 12px rgba(24, 24, 27, 0.06);
    /* Elevação da barra superior (marca + cabeçalho). Duas camadas: uma linha
       de contato quase imperceptível, que substitui a borda de 1px, e um halo
       largo e curto que dá a queda. Só ela é maior que --ik-shadow-md, e o
       motivo é funcional: é a única superfície por baixo da qual o conteúdo
       rola, então precisa se ler como camada, não como faixa pintada. */
    --ik-shadow-topo: 0 1px 2px rgba(24, 24, 27, 0.05),
                      0 8px 20px -10px rgba(24, 24, 27, 0.18);
    --ik-transicao: 180ms ease-out;
    /* Curva de saída forte (01/11/2026, MASTER §3): começa rápido e assenta devagar — a resposta ao mouse e ao toque aparece
       já no primeiro quadro. O `ease-out` do navegador é fraco para isso. Usada nos cartões clicáveis da Início (§5.4, §5.21). */
    --ik-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

    /* ---- reescreve os tokens do template ---- */
    --theameColor: var(--ik-accent);
    --primary-clr: var(--ik-accent);
    --bs-primary: var(--ik-accent);
    --bs-primary-rgb: 250, 84, 32;
    --bs-body-bg: var(--ik-bg);
    --bs-body-bg2: var(--ik-bg);
    --bs-body-color: var(--ik-text-muted);
    --bs-border-color: var(--ik-border);
    --bs-heading-color: var(--ik-text);
    --title-clr: var(--ik-text);
    --section-bg: var(--ik-surface-2);
    --bs-link-color: var(--ik-accent-fill);
    --bs-link-hover-color: var(--ik-accent-hover);
    --sidebar: var(--ik-surface);
    --panel-sidebar-primary: var(--ik-surface);
}

body {
    background-color: var(--ik-bg) !important;
    color: var(--ik-text-muted);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ik-text);
    letter-spacing: -0.011em;
}

/* ==========================================================================
   LOGOTIPO
   O template deixa a logo esticar até a largura do contêiner (184px). Aqui ela
   é limitada pela ALTURA e a largura acompanha — assim a proporção do arquivo
   nunca é distorcida, independente de qual logo for enviada.
   ========================================================================== */
:root {
    /* A logo em uso é a versão "ikero Admin" (proporção 2,68:1). Como o "Admin"
       consome parte da altura, o valor aqui é maior que seria para a logo só
       "ikero" (3,88:1) — assim a palavra principal lê no mesmo tamanho.
       Ao trocar a logo, recalibrar. */
    --ik-logo-altura: 48px;       /* logo horizontal na sidebar expandida */
    --ik-logo-altura-mini: 36px;  /* símbolo quando a sidebar está recolhida */

    /* Sidebar do SUPERADMIN. A logo de lá não é asset do repositório: vem de
       business_settings.logo, hoje 1254 × 468 (2,68:1), com "Admin" desenhado
       sob a palavra — por isso ela precisa de mais altura que a da loja para a
       palavra "ikero" ler no mesmo tamanho, e por isso não usa os 36px de lá.
       Chegou a 40px em 19/08/2026 e voltou a 46px no mesmo dia, quando os
       paddings da faixa foram enxugados e abriram orçamento — ver o bloco
       "ORÇAMENTO DA FAIXA DA MARCA DO ADMIN" mais abaixo antes de mexer neste
       número: a caixa tem 60px fixos e o que passa disso vira barra de
       rolagem, não altura. */
    --ik-logo-altura-admin: 46px;

    /* O painel da LOJA usa o mesmo arquivo horizontal do admin
       (ikero-logo-painel.png, 486 × 120 = 4,05:1), mas menor: aqui a marca
       divide o topo com o nome da loja logo abaixo, e a 48px ela media 194px
       de largura — quase a sidebar inteira (250px), sem respiro lateral.
       A 36px mede 146px e sobra margem dos dois lados.
       O comentário anterior descrevia a logo EMPILHADA, fora de uso desde
       18/08/2026 (MASTER.md 2.4).
       14/10/2026: 28px — a marca VISÍVEL do admin mede 28px (o logo do banco, desde 03/10, é 1200 × 400 com margem
       transparente: 46px de imagem, 28px de "ikero"); este arquivo é recortado rente, então 36px deixava a marca 28%
       maior que a do admin, encostada no topo, e o nome da loja colado na borda de baixo da faixa. */
    --ik-logo-altura-restaurante: 28px;
}

/* `display: block` não é cosmético — é metade da correção de uma barra de
   rolagem. `<img>` é inline por padrão e gera uma caixa de linha que reserva o
   espaço do descender (~5px) abaixo da imagem, altura que ninguém vê e que
   conta para o estouro da faixa da marca. A outra metade é o `padding-block`
   reduzido na sidebar, logo abaixo. */
.navbar-brand-logo,
.sidebar--logo-design,
.brand--logo-design-2 {
    max-height: var(--ik-logo-altura) !important;
    height: auto !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.navbar-brand-logo-mini,
.sidebar--logo-design-2 {
    max-height: var(--ik-logo-altura-mini) !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain;
}

/* Sidebar do superadmin. Seletor com dois níveis (0,2,0) de propósito: a regra
   agrupada acima também é !important, e empatar em (0,1,0) deixaria o resultado
   dependendo da ordem das declarações no arquivo.
   `.sidebar--logo-design` só existe no sidebar do admin — o header dele usa
   `.brand--logo-design-2` e segue em --ik-logo-altura. */
.navbar-vertical-aside .sidebar--logo-design {
    max-height: var(--ik-logo-altura-admin) !important;
}

/* Por que 40 e não 48: o template já fixa a faixa da marca em 60px
   (`.navbar-vertical-aside .navbar-brand-wrapper { height: 3.75rem }`, no
   bootstrap.min.css) e o `.navbar-brand` daqui aplica `padding-block: 0.5rem`.
   Com a logo em 48px o conteúdo pedia 64px numa caixa de 60 — transbordava 2px
   de cada lado. Com 40px pede 56px e cabe com folga.
   Isso NÃO devolve altura ao menu: a caixa era fixa antes e continua fixa. */

.navbar-brand {
    padding-block: 0.5rem !important;
}

/* ORÇAMENTO DA FAIXA DA MARCA DO ADMIN — 60px fixos, e a caixa não cresce: ela
   rola. O template dá `overflow-x: hidden` ao wrapper (bootstrap.min.css) e um
   eixo `hidden` força o outro a `auto`, então todo estouro vira barra de
   rolagem dentro da marca.

   Quem consumia os 60px, e o que sobrou depois:

     item                                    antes    agora
     padding do .navbar__brand-wrapper       10 px     4 px   (5px → 2px)
     padding-block do .navbar-brand          16 px     0 px
     descender da imagem inline               5 px     0 px   (display: block)
     logo                                    48 px    46 px
     ------------------------------------------------------
     total                                   79 px    50 px   em 60 disponíveis

   Os dois seletores abaixo usam `.navbar__brand-wrapper` — com dois
   sublinhados, a classe que SÓ o admin tem. A loja não é tocada: lá o
   `.navbar-brand` é o `.ik-marca`, que declara o próprio padding mais abaixo,
   e zerá-lo colaria a marca no nome da loja.

   Sobram 10px de folga, que a centralização divide: ~7px de respiro acima e
   abaixo da marca contando o padding (CLAUDE.md da raiz, 14.6 — área de
   proteção). O teto matemático é 56px de logo, mas aí a marca encosta na
   borda da faixa. */
.navbar-vertical-aside .navbar__brand-wrapper {
    padding-block: 0.125rem !important;
}

.navbar-vertical-aside .navbar__brand-wrapper .navbar-brand {
    padding-block: 0 !important;
}

/* Marca do painel da loja: logo horizontal + nome da loja abaixo.

   O template reserva 60px de altura para o topo da sidebar
   (.navbar-vertical-aside .navbar-brand-wrapper, no bootstrap.min.css). Aqui
   isso chegou a virar 72px por causa da logo EMPILHADA, que não cabia em 60px
   e era cortada no meio do chapéu. Ela saiu de uso, e com a logo a 36px o
   conteúdo mede 58px (4 + 36 + 2 + 12 + 4) — cabe nos 60px do template, então
   a altura volta ao valor original em vez de deixar faixa vazia sobrando. */
.navbar-vertical-aside .navbar-brand-wrapper:has(.ik-marca) {
    height: 3.75rem;
}

/* O topo da sidebar da loja vinha AZUL (#e9f3ff) — sobra do tema original do
   StackFood, em vendor.css:11-16, arquivo carregado só por
   layouts/vendor/app.blade.php (por isso o admin nunca teve o problema).
   Não é cor do iKero, não comunica status e ficou mais evidente depois que a
   logo diminuiu.

   A regra de lá é !important DENTRO de @media (min-width: 1200px) — abaixo
   disso a faixa já era branca. Media query não soma especificidade (seção 8,
   armadilha 8), então vencer exige !important e especificidade maior:
   (0,3,0) aqui contra (0,1,0) do template. Declarado no mesmo breakpoint
   porque é só lá que o template pinta. */
@media screen and (min-width: 1200px) {
    .navbar-vertical-aside .navbar-brand-wrapper:has(.ik-marca) {
        background: var(--ik-surface) !important;
    }

    /* A metade esquerda da barra superior — NOS DOIS PAINÉIS. O seletor pede
       `.navbar-vertical-aside` na frente de propósito: o cabeçalho também tem
       um `.navbar-brand-wrapper` (a marca do modo celular), e ele não entra.
       O admin marca o mesmo elemento com `.navbar__brand-wrapper`, que é
       redundante aqui — as duas classes estão no mesmo div.

       Mesma sombra do cabeçalho, para a queda ser contínua de ponta a ponta.
       z-index resolve um detalhe de pintura: o menu é irmão POSTERIOR no DOM
       e, sem contexto de empilhamento próprio, seria pintado por cima da
       sombra — que existiria e não apareceria.

       ⛔ 10, e não 3: no admin o campo de busca do menu (`.sidebar--search-form`)
       tem `z-index: 9` no theme.minc619.css e começa exatamente onde a sombra
       deveria cair. Com 3 a sombra sumia SÓ no admin — a loja não tem esse
       campo, e por isso o valor menor bastava lá e o defeito passava
       despercebido. Ao mexer neste número, conferir os DOIS painéis. */
    .navbar-vertical-aside .navbar-brand-wrapper {
        position: relative;
        z-index: 10;
        box-shadow: var(--ik-shadow-topo);

        /* box-shadow desenha nos QUATRO lados. Como o <aside> é pintado acima
           do <header>, a sombra lateral direita caía dentro do cabeçalho e
           marcava uma costura vertical de ~8px bem na emenda — o oposto do
           efeito pretendido. O clip corta tudo rente à caixa e libera só
           embaixo, onde a queda deve aparecer. */
        clip-path: inset(0 0 -24px 0);
    }

    /* A borda direita da sidebar cortava a barra ao meio, denunciando que são
       dois elementos. Ela recua para começar ABAIXO da barra: some do <aside>
       e volta como pseudo-elemento a partir dos 60px. Assim a marca e o
       cabeçalho se encostam sem costura visível, e a sidebar continua separada
       do conteúdo no resto da altura. */
    aside.navbar-vertical-aside {
        border-right-color: transparent !important;
    }

    aside.navbar-vertical-aside::after {
        content: "";
        position: absolute;
        top: 3.75rem;
        /* -1px: o offset de um absoluto parte do padding box, então com 0 a
           linha nasceria DENTRO da borda transparente que continua ocupando
           1px — deslocada para dentro, com uma fresta branca à direita. */
        inset-inline-end: -1px;
        bottom: 0;
        width: 1px;
        background: var(--ik-border);
        pointer-events: none;
    }
}

/* O painel do restaurante tem um contêiner a mais que o admin
   (.sidebar-logo-container) e ele reintroduz o space-between que a regra do
   wrapper já havia resolvido. Como o botão de recolher está fora do fluxo,
   sobra um único filho — e space-between o encosta na esquerda. */
.sidebar-logo-container {
    justify-content: center !important;
    width: 100%;
}

.ik-marca {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;   /* 14/10/2026: respiro entre a marca e o nome da loja */
    padding-block: 0.25rem !important;
    line-height: 1;
    text-decoration: none;
}

.ik-marca .navbar-brand-logo {
    max-height: var(--ik-logo-altura-restaurante) !important;
}

.ik-marca__loja {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* #52525b, não --ik-text-muted: o topo da sidebar não é branco puro e o
       muted caía para 4,31:1 ali. Mesmo motivo pelo qual o menu lateral usa
       este tom (seção 2.2). */
    color: #52525b;
    line-height: 1.2;
}

/* recolhida sobra só o símbolo: o nome não caberia em 60px de largura */
.navbar-vertical-aside-mini-mode aside .ik-marca__loja {
    display: none !important;
}

/* Logo centralizada no topo da sidebar.
   O contêiner original é flex com space-between (logo à esquerda, botão de
   recolher à direita). Centralizar só com justify-content deixaria a logo
   deslocada pela largura do botão — por isso o botão sai do fluxo e é fixado
   no canto, e a logo passa a ocupar o centro real do contêiner. */
.navbar__brand-wrapper,
.navbar-brand-wrapper {
    position: relative;
    justify-content: center !important;
}

.navbar__brand-wrapper .navbar-brand,
.navbar-brand-wrapper .navbar-brand {
    margin: 0 !important;
    display: flex !important;
    justify-content: center;
}

.navbar__brand-wrapper .navbar-nav-wrap-content-left,
.navbar-brand-wrapper .navbar-nav-wrap-content-left,
.navbar__brand-wrapper .js-navbar-vertical-aside-toggle-invoker,
.navbar-brand-wrapper .js-navbar-vertical-aside-toggle-invoker {
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   SIDEBAR RECOLHIDA
   O template esconde a marca inteira em modo mini
   (.navbar-vertical-aside-mini-mode aside .navbar-brand { display: none }),
   deixando o topo vazio. Aqui a marca volta, mostrando só o símbolo.
   -------------------------------------------------------------------------- */
/* No painel do restaurante não basta trazer o .navbar-brand de volta: o
   template esconde também o contêiner que o envolve
   (.navbar-vertical-aside-mini-mode .sidebar-logo-container { display: none },
   no vendor.css), e o topo ficava vazio mesmo com a marca "visível". */
.navbar-vertical-aside-mini-mode aside .sidebar-logo-container {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.navbar-vertical-aside-mini-mode aside .navbar-brand {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.navbar-vertical-aside-mini-mode aside .navbar-brand-logo,
.navbar-vertical-aside-mini-mode aside .sidebar--logo-design {
    display: none !important;
}

.navbar-vertical-aside-mini-mode aside .navbar-brand-logo-mini,
.navbar-vertical-aside-mini-mode aside .sidebar--logo-design-2 {
    display: block !important;
    max-height: var(--ik-logo-altura-mini) !important;
    width: auto !important;
    border-radius: 8px;   /* o ícone é um quadrado cheio: suaviza os cantos */
}

/* na sidebar recolhida o botão de expandir divide espaço com o símbolo —
   volta ao fluxo para não sobrepor */
.navbar-vertical-aside-mini-mode aside .navbar__brand-wrapper,
.navbar-vertical-aside-mini-mode aside .navbar-brand-wrapper {
    justify-content: center !important;
}

/* ==========================================================================
   NAVEGAÇÃO LATERAL — clara, com o ativo marcado pelo laranja
   ========================================================================== */
.navbar-vertical-aside,
.navbar-vertical,
.navbar-vertical .navbar-vertical-content,
.navbar-vertical-aside .navbar-vertical-footer,
.sidebar--search-form {
    background: var(--ik-surface) !important;
    border-right-color: var(--ik-border) !important;
}

.navbar-vertical-aside {
    box-shadow: none !important;
    border-right: 1px solid var(--ik-border);
}

/* Rótulos de seção. Usam --ik-text-muted, não --ik-text-subtle: o subtle mede
   2,56:1 e a própria seção 2.2 o restringe a texto ≥24px ou elemento não
   textual — estes rótulos têm 11px. O muted dá 4,83:1 sobre a sidebar branca e
   continua mais discreto que os itens do menu (#52525b, 7,73:1), preservando a
   hierarquia. */
.nav-subtitle,
.navbar-vertical .nav-subtitle {
    color: var(--ik-text-muted) !important;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding-top: 0.75rem;   /* era 1.25rem: com os 15px do template no <li>, sobrava ~35px entre o item e o rótulo (26/09/2026) */
}

/* o <li> do rótulo ganha 15px !important do template (`aside .navbar-nav > .nav-item:not(:first-child)`,
   especificidade 0,3,1): este seletor tem 0,4,1 e vence; com o padding acima, o respiro fica em ~20px */
aside .navbar-vertical-content .navbar-nav > .nav-item:has(> .nav-subtitle) {
    margin-top: 0.5rem !important;
}

/* itens — tom mais fechado que o texto secundário do corpo, porque o item
   ativo tem fundo levemente colorido e o cinza claro caía abaixo de 4,5:1 */
.navbar-vertical .nav-link,
.navbar-vertical .nav-link .nav-icon,
.navbar-vertical .nav-link .text-truncate {
    color: #52525b !important;
}

.navbar-vertical .nav-link,
.navbar-vertical li > a.nav-link {
    position: relative; /* iKero 05/10/2026: âncora da barra de 3 px do item ativo (o ::after absoluto subia até o menu) */
    border-radius: var(--ik-radius) !important;
    margin-inline: 0.5rem;
    transition: background-color var(--ik-transicao), color var(--ik-transicao);
}

/* o fundo do hover vai SÓ no link. Se for aplicado também nos filhos
   (ícone e rótulo), eles desenham um retângulo claro por dentro do item. */
.navbar-vertical .nav-link:hover {
    background-color: var(--ik-surface-2);
}

.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:hover .nav-icon,
.navbar-vertical .nav-link:hover .text-truncate {
    color: var(--ik-text) !important;
}

/* no item ativo o hover não deve clarear nada: mantém o tom da marca */
.navbar-vertical .active > .nav-link:hover,
.navbar-vertical .nav-link.active:hover {
    background-color: var(--ik-accent-soft-2) !important;
}

/* o fundo escurece no hover (soft -> soft-2), então o texto escurece junto:
   em-soft sobre o soft-2 mede 4,49:1 e o accent-fill, 4,10:1 — ambos reprovam.
   O --ik-accent-hover resolve em 5,04:1 sem criar um quarto laranja (o tom
   calculado sairia em #c63204, a um dígito do em-soft). MASTER.md 2.3. */
.navbar-vertical .active > .nav-link:hover,
.navbar-vertical .active > .nav-link:hover .nav-icon,
.navbar-vertical .active > .nav-link:hover .text-truncate {
    color: var(--ik-accent-hover) !important;
}

/* estado ativo: fundo tênue + texto e ícone no laranja + marcador */
.navbar-vertical .nav-link.active,
.navbar-vertical .active > .nav-link,
.nav-sub .nav-link.active {
    background-color: var(--ik-accent-soft) !important;
    color: var(--ik-accent-em-soft) !important;
    font-weight: 600;
    position: relative;
}

/* alcança qualquer filho (ícone, rótulo, span de truncagem) — a classe do
   rótulo varia entre os itens, então mirar em nomes específicos falha */
.navbar-vertical .nav-link.active *,
.navbar-vertical .active > .nav-link *,
.nav-sub .nav-link.active * {
    color: var(--ik-accent-em-soft) !important;
}

/* O bundle do template (vendor.css) repinta o rótulo do item ativo com o
   laranja antigo (--base-clr: #ef7822) mirando o caminho completo — (0,6,0)
   com !important. A regra genérica acima vale (0,3,0) e perde, então o rótulo
   ficava #ef7822 sobre o fundo #fff1ec: 2,58:1, reprovado.
   Espelhar o mesmo caminho para empatar em especificidade e vencer pela ordem
   de carga. É a armadilha da seção 8.5 — conferir a especificidade real em vez
   de assumir que "meu CSS vem depois, logo ganha". */
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link > span,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link > .text-truncate,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link > .nav-icon {
    color: var(--ik-accent-em-soft) !important;
}

/* iKero 05/10/2026 (homologação do menu do admin): os dois menus marcam o `li.active`, nunca o link — a barra só aparecia
   com `.nav-link.active` e não aparecia em lugar nenhum. Item-folha ativo (não o grupo: o ::after dele é a seta). */
.navbar-vertical .nav-link.active::after,
.navbar-vertical li.active > .nav-link:not(.nav-link-toggle)::after {
    content: "";
    position: absolute;
    inset-inline-start: -0.5rem;
    top: 20%;
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ik-accent);
}

/* submenu: fundo levemente diferenciado, sem virar bloco escuro.
   Sem margem lateral aqui — ela estreitava a linha e cortava os contadores. */
.nav-sub,
.navbar-vertical .nav-sub,
.js-navbar-vertical-aside-submenu {
    background: var(--ik-surface-2) !important;
    border-radius: 0;
    margin-inline: 0;
}

.nav-sub .nav-link {
    color: var(--ik-text-muted) !important;
    font-size: 0.8125rem;
    margin-inline: 0;
    border-radius: 0;
}

/* em-soft, não fill: sobre o fundo tênue o fill mede 4,49:1 (MASTER.md 2.3) */
.nav-sub .nav-link:hover {
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft) !important;
}

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
.navbar-height,
.header,
.navbar.navbar-height {
    background: var(--ik-surface) !important;
    border-bottom: 1px solid var(--ik-border);
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   BARRA SUPERIOR ELEVADA — só no painel da loja

   A barra é UMA camada que atravessa a tela inteira, mesmo sendo feita de dois
   elementos: a faixa da marca vive dentro do <aside> e o cabeçalho é um
   <header> fixo que começa onde a sidebar termina. O que os costura é terem a
   mesma altura — 60px, medido nos dois — e a MESMA sombra.

   A borda de 1px fica transparente em vez de ser removida: mantém a caixa e a
   altura, e evita o deslocamento de 1px que apagar a borda causaria. Quem
   marca o limite passa a ser a sombra — peça que flutua não tem linha de
   contato. Exceção consciente à seção 3 do MASTER.md ("a hierarquia vem da
   borda, não da sombra"), justificada por ser a única superfície sob a qual o
   conteúdo rola.

   Vale nos DOIS painéis desde 19/08/2026 — a loja primeiro, o superadmin logo
   depois, quando a medição mostrou que a geometria de lá é a mesma: faixa e
   cabeçalho de 60px. Chegou a existir um gancho `body:has(.ik-marca)` que
   prendia o efeito à loja, apoiado numa medição errada (a faixa do admin
   parecia ter 80px; o que se mediu foi a borda do campo de busca do menu).

   Abaixo de 1200px a sidebar vira off-canvas e a barra deixa de ser contínua,
   por isso o efeito é declarado no mesmo breakpoint do resto. */
@media screen and (min-width: 1200px) {
    .navbar-height,
    .navbar.navbar-height {
        border-bottom-color: transparent;
        box-shadow: var(--ik-shadow-topo) !important;
    }
}

/* ==========================================================================
   CARTÕES E SUPERFÍCIES
   ========================================================================== */
.card,
.card-body,
.custom-card,
.bg-white {
    background-color: var(--ik-surface);
    border-radius: var(--ik-radius-lg);
}

.card {
    border: 1px solid var(--ik-border) !important;
    box-shadow: var(--ik-shadow) !important;
}

/* ==========================================================================
   BOTÕES
   Primário = laranja fechado com texto branco. Secundário = branco com borda.
   ========================================================================== */
.btn {
    border-radius: var(--ik-radius);
    font-weight: 500;
    transition: background-color var(--ik-transicao), border-color var(--ik-transicao),
                color var(--ik-transicao);
}

.btn.btn--primary,
a.btn--primary,
button.btn--primary,
.btn.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
    background-color: var(--ik-accent-fill);
    border-color: var(--ik-accent-fill);
    color: #ffffff;
    box-shadow: none;
}

.btn.btn--primary:hover,
a.btn--primary:hover,
button.btn--primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
    background-color: var(--ik-accent-hover);
    border-color: var(--ik-accent-hover);
    color: #ffffff;
}

.btn.btn--primary:active,
.btn.btn-primary:active,
button.btn-primary:active {
    background-color: var(--ik-accent-hover);
    border-color: var(--ik-accent-hover);
    color: #ffffff;
}

.btn.btn--primary:disabled,
.btn.btn-primary:disabled,
.btn-primary.disabled,
.btn--primary[disabled] {
    background-color: var(--ik-accent-soft-2);
    border-color: var(--ik-accent-soft-2);
    color: var(--ik-text-subtle);
    cursor: not-allowed;
    opacity: 1;
}

/* secundário / cancelar — neutro com borda */
.btn--cancel,
.btn--reset,
.btn-secondary,
.btn-outline-secondary {
    background-color: var(--ik-surface);
    border: 1px solid var(--ik-border-strong);
    color: var(--ik-text);
}

.btn--cancel:hover,
.btn--reset:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: var(--ik-surface-2);
    border-color: var(--ik-text-subtle);
    color: var(--ik-text);
}

/* O template força `color: #fff !important` no hover do contorno secundário
   (theme.minc619.css:7151), pensado para o fundo cinza-escuro dele. Com o
   fundo claro acima, o ícone sumia (branco sobre #fafafa) — MASTER §8.20. */
.btn-outline-secondary:hover {
    color: var(--ik-text) !important;
}

/* contorno na cor da marca */
.btn-outline-primary,
.btn-oputline--primary {
    color: var(--ik-accent-fill) !important;
    border-color: var(--ik-accent-soft-2);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-oputline--primary:hover {
    background-color: var(--ik-accent-soft) !important;
    border-color: var(--ik-accent);
    /* o repouso usa fill sobre transparente (4,95:1); no hover o fundo passa a
       ser o tênue e o texto tem de acompanhar, senão cai para 4,49:1 */
    color: var(--ik-accent-em-soft) !important;
}

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */
.form-control,
.form-select,
.select2-container--default .select2-selection--single {
    border-radius: var(--ik-radius);
    border-color: var(--ik-border-strong);
    color: var(--ik-text);
    transition: border-color var(--ik-transicao), box-shadow var(--ik-transicao);
}

.form-control::placeholder {
    color: var(--ik-text-subtle);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ik-accent);
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.15);
}

.form-label,
label {
    color: var(--ik-text);
    font-weight: 500;
}

/* ==========================================================================
   FOCO VISÍVEL — navegação por teclado
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Campos de formulário precisam de regra à parte, e isto foi MEDIDO no
   painel: todo input e textarea .form-control ficava sem sinal nenhum de
   foco — sem outline, sem halo, borda cinza. Duas regras do template se
   somam para isso:
     bootstrap.min.css:2627   .form-control:focus { outline: 0 }
     bootstrap.min.css:14097  .form-control:focus { box-shadow: 0 0 0 0 transparent }
   Ambas valem (0,2,0) e vencem o input:focus-visible acima, que vale (0,1,1).
   O `html` na frente leva a regra a (0,2,1) e devolve o anel sem precisar de
   !important — que aqui seria pior, porque impediria qualquer componente de
   definir o próprio foco.
   MASTER.md 6.2: nunca remover o anel de foco. */
html .form-control:focus-visible,
html .form-select:focus-visible,
html .custom-select:focus-visible,
html .custom-file-input:focus-visible,
html textarea:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   TABELAS — leves, separadas por linha e não por caixa
   ========================================================================== */
.table > :not(caption) > * > * {
    border-bottom-color: var(--ik-border);
}

.table thead th {
    background-color: var(--ik-surface-2);
    color: var(--ik-text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ik-border);
}

.table tbody tr {
    transition: background-color var(--ik-transicao);
}

.table tbody tr:hover {
    background-color: var(--ik-surface-2);
}

/* números alinhados em colunas de dados */
.table td.text-end,
.table td .price,
.tabular {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ACENTOS PONTUAIS DA MARCA
   ========================================================================== */
.text-primary,
a.text-primary {
    color: var(--ik-accent-fill) !important;
}

/* texto sobre o fundo tênue usa --ik-accent-em-soft, não o --ik-accent-fill:
   o fill mede 4,49:1 sobre #fff1ec e reprova o AA por um fio. Mesmo raciocínio
   do item de menu ativo (MASTER.md 2.1). Corrigido em 18/08/2026. */
.badge-soft-primary,
.bg-soft-primary {
    background-color: var(--ik-accent-soft) !important;
    color: var(--ik-accent-em-soft) !important;
}

/* abas: sublinhado laranja no item ativo */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: var(--ik-accent-fill);
    color: #ffffff;
    border-radius: var(--ik-radius);
}

/* ==========================================================================
   CARTÕES DE INDICADOR (KPI)

   Cada cartão recebe um gradiente suave na cor do seu status e a marca-d'água
   do símbolo iKero ao fundo. Os ícones ilustrados do template foram removidos:
   eram desenhos genéricos, sem relação com a marca, e disputavam atenção com
   o número — que é a informação que realmente importa no cartão.

   A cor aqui comunica STATUS, não marca. Por isso o laranja não entra: ele
   continua reservado ao iKero (menu ativo, foco, ação primária).
   ========================================================================== */

/* Ícones da biblioteca Lucide (github.com/lucide-icons/lucide, ISC), embutidos
   como data URI e aplicados via mask-image — assim cada um assume a cor do seu
   status sem precisar de um arquivo por cor.
   Os traços do Lucide usam "currentColor", que não resolve dentro de máscara:
   por isso a cor foi fixada e a espessura subiu para 1.6, senão o desenho some
   quando ampliado ao tamanho de marca-d'água. */
:root {
    --ik-icone-entregues: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 22V12' /%3E %3Cpath d='m16 17 2 2 4-4' /%3E %3Cpath d='M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753' /%3E %3Cpath d='M3.29 7 12 12l8.71-5' /%3E %3Cpath d='m7.5 4.27 8.997 5.148' /%3E %3C/svg%3E");
    --ik-icone-cancelados: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 22V12' /%3E %3Cpath d='m16.5 14.5 5 5' /%3E %3Cpath d='m16.5 19.5 5-5' /%3E %3Cpath d='M21 10.5V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l.13-.074' /%3E %3Cpath d='M3.29 7 12 12l8.71-5' /%3E %3Cpath d='m7.5 4.27 8.997 5.148' /%3E %3C/svg%3E");
    --ik-icone-reembolsados: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' /%3E %3Cpath d='M3 3v5h5' /%3E %3C/svg%3E");
    --ik-icone-falha-pagamento: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='20' height='14' x='2' y='5' rx='2' /%3E %3Cline x1='2' x2='22' y1='10' y2='10' /%3E %3C/svg%3E");
    --ik-icone-sem-entregador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E %3Ccircle cx='9' cy='7' r='4' /%3E %3Cline x1='17' x2='22' y1='8' y2='13' /%3E %3Cline x1='22' x2='17' y1='8' y2='13' /%3E %3C/svg%3E");
    --ik-icone-aceito: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m16 11 2 2 4-4' /%3E %3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E %3Ccircle cx='9' cy='7' r='4' /%3E %3C/svg%3E");
    --ik-icone-preparando: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z' /%3E %3Cpath d='M6 17h12' /%3E %3C/svg%3E");
    --ik-icone-retirado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='18.5' cy='17.5' r='3.5' /%3E %3Ccircle cx='5.5' cy='17.5' r='3.5' /%3E %3Ccircle cx='15' cy='5' r='1' /%3E %3Cpath d='M12 17.5V14l-3-3 4-3 2 3h2' /%3E %3C/svg%3E");

    /* KPIs do Despacho Inteligente (Lucide timer / search-x / percent,
       conferidos contra o repositório oficial em 29/08/2026). */
    --ik-icone-tempo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cline x1='10' x2='14' y1='2' y2='2' /%3E %3Cline x1='12' x2='15' y1='14' y2='11' /%3E %3Ccircle cx='12' cy='14' r='8' /%3E %3C/svg%3E");
    --ik-icone-busca-sem-resultado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m13.5 8.5-5 5' /%3E %3Cpath d='m8.5 8.5 5 5' /%3E %3Ccircle cx='11' cy='11' r='8' /%3E %3Cpath d='m21 21-4.3-4.3' /%3E %3C/svg%3E");
    --ik-icone-percentual: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cline x1='19' x2='5' y1='5' y2='19' /%3E %3Ccircle cx='6.5' cy='6.5' r='2.5' /%3E %3Ccircle cx='17.5' cy='17.5' r='2.5' /%3E %3C/svg%3E");
    /* iKero (B12, 10/09/2026): 4 ícones dos KPIs da loja, do repo oficial do Lucide,
       tratamento da casa (stroke %23000, 1.6). Ver MASTER §5.4/§5.6. */
    --ik-icone-confirmado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='8' height='4' x='8' y='2' rx='1' ry='1' /%3E %3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' /%3E %3Cpath d='m9 14 2 2 4-4' /%3E %3C/svg%3E");
    --ik-icone-pronto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z' /%3E %3Cpath d='M12 22V12' /%3E %3Cpolyline points='3.29 7 12 12 20.71 7' /%3E %3Cpath d='m7.5 4.27 9 5.15' /%3E %3C/svg%3E");
    --ik-icone-agendado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16 14v2.2l1.6 1' /%3E %3Cpath d='M16 2v3' /%3E %3Cpath d='M21 7.338V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2.338' /%3E %3Cpath d='M3 9h5.859' /%3E %3Cpath d='M8 2v3' /%3E %3Ccircle cx='16' cy='16' r='6' /%3E %3C/svg%3E");
    --ik-icone-todos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z' /%3E %3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12' /%3E %3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17' /%3E %3C/svg%3E");
}

.dashboard--card,
.order--card {
    position: relative;
    overflow: hidden;
    border-radius: var(--ik-radius-lg);
    border: 1px solid var(--ik-kpi-borda, var(--ik-border));
    background: linear-gradient(135deg,
                var(--ik-kpi-claro, #ffffff) 0%,
                var(--ik-kpi-tenue, #ffffff) 60%,
                var(--ik-surface) 100%) !important;
    box-shadow: none;
    transition: transform 180ms var(--ik-ease-out), box-shadow 180ms var(--ik-ease-out);
}

/* 01/11/2026 (MASTER §5.4): número no TOPO do cartão — o template centralizava na vertical, e o número de um rótulo de duas
   linhas ("Aguardando aceite") ficava mais alto que o dos vizinhos; agora os números da fileira ficam na mesma linha. */
.resturant-card.dashboard--card {
    justify-content: flex-start;
    container-type: inline-size;   /* a marca-d'água abaixo mede a largura do PRÓPRIO cartão (cqi) */
}

/* marca-d'água: ícone específico do KPI, grande e recortado pela borda — 01/11/2026: estava 14px para dentro e encostava no
   rótulo de duas linhas; vazando a borda ela fica no canto, como textura */
.dashboard--card::after {
    content: "";
    position: absolute;
    inset-inline-end: -8px;
    bottom: -6px;
    width: 92px;
    height: 92px;
    /* até 92px, proporcional ao cartão: a 1280px o cartão da loja tem ~161px e os 92px fixos cobriam o rótulo (visto em tela).
       O `cqi` mede a caixa de CONTEÚDO (o template dá 28px à esquerda e 50px à direita), daí o "− 30px": 92px no cartão de
       ~200px, 56px abaixo de ~165px. Os 92px acima ficam para navegador sem unidade de contêiner. */
    width: clamp(56px, calc(100cqi - 30px), 92px);
    height: clamp(56px, calc(100cqi - 30px), 92px);
    background-color: var(--ik-kpi-forte, var(--ik-text-subtle));
    opacity: 0.16;
    -webkit-mask-image: var(--ik-kpi-icone);
    mask-image: var(--ik-kpi-icone);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
}

/* Segunda linha: cartões baixos, rótulo à esquerda e número à direita.
   Aqui o ícone não vira marca-d'água — no formato compacto ele cairia atrás
   do número. Entra como ícone sólido à esquerda, no lugar onde o template
   colocava a imagem antiga. */
.order--card::after {
    content: none;
}

.order--card {
    padding-inline-start: 48px !important;
}

.order--card::before {
    content: "";
    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--ik-kpi-forte, var(--ik-text-muted));
    -webkit-mask-image: var(--ik-kpi-icone);
    mask-image: var(--ik-kpi-icone);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
}

/* 01/11/2026 (MASTER §5.4): o levantar só com mouse — no tablet da loja o toque deixava o cartão preso no hover. O aperto
   responde em qualquer aparelho, e mais rápido que a subida (é o sistema confirmando o toque). */
/* O `style.css` do template dava `0 8px 8px rgba(0,0,0,.1) !important` no hover de todo cartão de indicador (`.resturant-card`,
   `.order--card`, nos relatórios dos dois painéis), sem condição: mais pesado que o --ik-shadow-md e preso no toque. Some aqui e
   volta, sutil, só com mouse (homologado em tela em 01/11/2026 — o tema perdia para o `!important` do template). */
.resturant-card:hover,
.order--card:hover {
    box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .dashboard--card:hover,
    .order--card:hover {
        transform: translateY(-2px);
    }

    .dashboard--card:hover,
    .resturant-card:hover,
    .order--card:hover {
        box-shadow: var(--ik-shadow-md) !important;
    }
}

.dashboard--card:active,
.order--card:active {
    transform: scale(0.98);
    transition-duration: 100ms;
}

/* fora os ícones ilustrados do template */
.dashboard--card img,
.order--card img {
    display: none !important;
}

/* número e rótulo acima da marca-d'água */
.dashboard--card > *,
.order--card > * {
    position: relative;
    z-index: 1;
}

.dashboard--card h4,
.dashboard--card .h4 {
    color: var(--ik-kpi-forte, var(--ik-text)) !important;
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

/* o número da segunda linha vive em .card-title (não em h4) e o cartão é um
   <a>, que herdava a cor de link — daí o laranja aparecer onde não devia */
.order--card,
.order--card:hover {
    color: var(--ik-text) !important;
    text-decoration: none;
}

.order--card h4,
.order--card .h4,
.order--card .fs-16,
.order--card .card-title {
    color: var(--ik-kpi-forte, var(--ik-text)) !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dashboard--card span,
.dashboard--card .card-subtitle,
.order--card .card-subtitle span,
.order--card h6 span {
    color: #52525b !important;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Cores por status. Cada cartão define três variáveis: tom forte (número e
   marca-d'água), tom claro e tom tênue (as duas pontas do gradiente).
   -------------------------------------------------------------------------- */

/* entregues — verde */
.dashboard--card.bg--2 {
    --ik-kpi-icone: var(--ik-icone-entregues);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e8f7f1;
    --ik-kpi-tenue: #f4fbf8;
    --ik-kpi-borda: #c9ebde;
}

/* cancelados — vermelho */
.dashboard--card.bg--3 {
    --ik-kpi-icone: var(--ik-icone-cancelados);
    --ik-kpi-forte: #a3143a;
    --ik-kpi-claro: #fdecf0;
    --ik-kpi-tenue: #fef6f8;
    --ik-kpi-borda: #f6d4dd;
}

/* reembolsados — âmbar */
.dashboard--card.bg--5 {
    --ik-kpi-icone: var(--ik-icone-reembolsados);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fefaf2;
    --ik-kpi-borda: #f4e2c4;
}

/* falha no pagamento — rosa (família negativa, mas distinta do cancelado) */
.dashboard--card.bg--14 {
    --ik-kpi-icone: var(--ik-icone-falha-pagamento);
    --ik-kpi-forte: #9d174d;
    --ik-kpi-claro: #fdeef5;
    --ik-kpi-tenue: #fef7fa;
    --ik-kpi-borda: #f7d5e4;
}

/* segunda linha — etapas operacionais em andamento */
.order--card__color-1 {
    --ik-kpi-icone: var(--ik-icone-sem-entregador);   /* sem entregador — azul */
    --ik-kpi-forte: #1d4ed8;
    --ik-kpi-claro: #eaf0fe;
    --ik-kpi-tenue: #f6f9ff;
    --ik-kpi-borda: #d3e0fc;
}

.order--card__color-2 {
    --ik-kpi-icone: var(--ik-icone-aceito);   /* aceito pelo entregador — violeta */
    --ik-kpi-forte: #6d28d9;
    --ik-kpi-claro: #f2ecfd;
    --ik-kpi-tenue: #faf7ff;
    --ik-kpi-borda: #e2d6fa;
}

.order--card__color-3 {
    --ik-kpi-icone: var(--ik-icone-preparando);   /* preparando — ciano */
    --ik-kpi-forte: #0e7490;
    --ik-kpi-claro: #e6f6fa;
    --ik-kpi-tenue: #f4fbfd;
    --ik-kpi-borda: #c7e9f1;
}

.order--card__color-4 {
    --ik-kpi-icone: var(--ik-icone-retirado);   /* retirado — índigo */
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f8f8fe;
    --ik-kpi-borda: #dadaf7;
}

/* --------------------------------------------------------------------------
   KPIs do painel da LOJA (dashboard) — iKero (B12, 10/09/2026).

   A dashboard da loja tem duas fileiras: 4 cartões `.dashboard--card`
   (Confirmado/Preparando/Pronto/A caminho) e 4 `.order--card`
   (Entregue/Reembolsado/Agendado/Todos). O template os deixava com PNG (já
   escondido por `img{display:none}`) e, na segunda fileira, SEM classe de
   status — então `--ik-kpi-icone` ficava vazio e o `::before` virava um
   quadrado sólido. Estas classes dão a cada cartão o ícone Lucide certo e a
   paleta de status do §2.3, sem repetir ícone (§5.4) e sem tocar nas classes
   `bg--N`/`__color-N` que o admin usa. Cores já medidas em AA no §2.3/§5.4.
   -------------------------------------------------------------------------- */

/* confirmado — violeta */
/* iKero 24/09/2026: também no cartão compacto — o relatório de pedidos (§5.32) usa
   estas etapas em `.order--card`; só no grande, o compacto virava quadrado sólido */
.dashboard--card.ikl--confirmado,
.order--card.ikl--confirmado {
    --ik-kpi-icone: var(--ik-icone-confirmado);
    --ik-kpi-forte: #6d28d9;
    --ik-kpi-claro: #f2ecfd;
    --ik-kpi-tenue: #f9f6fe;
    --ik-kpi-borda: #e2d5fb;
}

/* preparando — ciano */
/* iKero 24/09/2026: também no cartão compacto — o relatório de pedidos (§5.32) usa
   estas etapas em `.order--card`; só no grande, o compacto virava quadrado sólido */
.dashboard--card.ikl--preparando,
.order--card.ikl--preparando {
    --ik-kpi-icone: var(--ik-icone-preparando);
    --ik-kpi-forte: #0e7490;
    --ik-kpi-claro: #e6f6fa;
    --ik-kpi-tenue: #f3fbfc;
    --ik-kpi-borda: #c7e9f0;
}

/* pronto para entrega — índigo */
/* iKero 24/09/2026: também no cartão compacto — o relatório de pedidos (§5.32) usa
   estas etapas em `.order--card`; só no grande, o compacto virava quadrado sólido */
.dashboard--card.ikl--pronto,
.order--card.ikl--pronto {
    --ik-kpi-icone: var(--ik-icone-pronto);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f8f8fe;
    --ik-kpi-borda: #dadaf7;
}

/* a caminho — azul */
.dashboard--card.ikl--a-caminho {
    --ik-kpi-icone: var(--ik-icone-retirado);
    --ik-kpi-forte: #1d4ed8;
    --ik-kpi-claro: #eaf0fe;
    --ik-kpi-tenue: #f5f8fe;
    --ik-kpi-borda: #cddffb;
}

/* entregue — verde */
.order--card.ikl--entregue {
    --ik-kpi-icone: var(--ik-icone-entregues);
    --ik-kpi-forte: #0a6045;
}

/* reembolsado — âmbar */
.order--card.ikl--reembolsado {
    --ik-kpi-icone: var(--ik-icone-reembolsados);
    --ik-kpi-forte: #7a4a00;
}

/* agendado — neutro (não é status de saúde) */
.order--card.ikl--agendado {
    --ik-kpi-icone: var(--ik-icone-agendado);
    --ik-kpi-forte: #3f3f46;
}

/* todos — neutro */
.order--card.ikl--todos {
    --ik-kpi-icone: var(--ik-icone-todos);
    --ik-kpi-forte: #3f3f46;
}

/* iKero (23/09/2026, MASTER §5.20): "Aguardando aceite" abriu a primeira
   fileira — âmbar + timer, o mesmo par da etiqueta "Pendente" da lista
   (§5.15); "A caminho" desceu para a segunda fileira, que ficou com cinco
   cartões compactos e ganhou a quebra do §5.4 (número desce sob o rótulo
   quando a coluna aperta, em vez de sumir no overflow). */
/* iKero 24/09/2026: também no cartão compacto — o relatório de pedidos (§5.32) usa
   estas etapas em `.order--card`; só no grande, o compacto virava quadrado sólido */
.dashboard--card.ikl--pendente,
.order--card.ikl--pendente {
    --ik-kpi-icone: var(--ik-icone-tempo);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fefaf2;
    --ik-kpi-borda: #f4e2c4;
}

.order--card.ikl--a-caminho {
    --ik-kpi-icone: var(--ik-icone-retirado);
    --ik-kpi-forte: #1d4ed8;
}

/* Segunda fileira em grade própria (homologação de 23/09/2026): com as colunas
   do Bootstrap (`col-xl`) e o cartão de anúncios ao lado, a 1280px o quinto
   cartão caía sozinho numa linha inteira; com `min-width: 0` os cinco
   encolhiam a 125px e "Reembolsado" era CORTADO pelo overflow. A grade
   `auto-fit` dá a cada cartão no mínimo 150px: cabem 5 quando há espaço,
   senão 4 + 1 (ou 2 por linha no celular), sempre do mesmo tamanho. */
#order_stats .ik-kpis-compactos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

#order_stats .order--card > .d-flex {
    flex-wrap: nowrap;
    gap: 0.5rem;
}

#order_stats .order--card > .d-flex > .card-title {
    margin-left: auto;
}

/* 18/10/2026 (proprietário): a 1440px o cartão tem 164px e sobram ~100px para o texto — "Reembolsado" (97px) empurrava o
   número para baixo só naquele cartão. O nome quebra só entre palavras (os do admin são longos); cartão estreito (< 200px) põe o número EMBAIXO do nome em todos
   (todos têm a mesma largura, então a fileira fica igual), e com espaço volta ao nome à esquerda e número à direita. */
#order_stats .ik-kpis-compactos > .order--card {
    container-type: inline-size;
}

#order_stats .order--card > .d-flex > .card-subtitle {
    min-width: 0;
}

@container (max-width: 199px) {
    #order_stats .order--card > .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 0.125rem;
    }

    #order_stats .order--card > .d-flex > .card-title {
        margin-left: 0;
    }
}

/* 01/11/2026 (MASTER §5.21): no celular os quatro KPIs grandes ficam dois por linha (`col-6`) — um por linha empilhava ~540px
   de cartão antes de qualquer outra coisa —, mais baixos e com a marca-d'água de 56px; e o quinto
   compacto ("Todos"), que ficava sozinho na meia coluna, ocupa a linha. Depois das regras base: media query não soma
   especificidade (§8, 23). */
@media (max-width: 575.98px) {
    #order_stats .resturant-card.dashboard--card {
        min-height: 112px;
        padding: 14px 14px 14px 16px;
    }

    #order_stats .dashboard--card .title {
        font-size: 1.5rem;
    }

    #order_stats .dashboard--card .subtitle {
        font-size: 13px;
        line-height: 18px;
    }

    /* aqui o padding é menor e a conta do cqi daria ~88px sobre o rótulo */
    #order_stats .dashboard--card::after {
        width: 56px;
        height: 56px;
    }

    #order_stats .ik-kpis-compactos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #order_stats .ik-kpis-compactos > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* homologação de 23/09/2026: o template capitaliza `.card-title` (global) e
   `.order--card .card-subtitle` — "Estatísticas Anuais", "Pedido A Caminho".
   Caixa de frase na Início inteira (marca-voz §3.3). */
.ik-inicio .card-title,
.ik-inicio .order--card .card-subtitle {
    text-transform: none;
}

/* Gráfico anual da Início (§5.20): legenda com a cor da série (os tokens
   --ik-grafico-*), eixo como legenda curta em vez do rótulo girado do template. */
.ik-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-legenda__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 500;
}

.ik-legenda__cor {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.ik-legenda__cor--ganhos {
    background-color: var(--ik-grafico-serie-1);
}

.ik-legenda__cor--comissao {
    background-color: var(--ik-grafico-serie-2);
}

.ik-legenda__valor {
    color: var(--ik-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ik-grafico__eixo {
    margin: 0 0 0.5rem;
    color: var(--ik-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.ik-grafico__vazio {
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--ik-border-strong);
    border-radius: var(--ik-radius);
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

/* estado de carregamento local dos KPIs (troca de período): o cartão esmaece
   e não recebe clique, no lugar do gif global que flutuava sobre a página */
#order_stats {
    transition: opacity var(--ik-transicao);
}

#order_stats[aria-busy="true"] {
    opacity: 0.55;
    pointer-events: none;
}

/* Faixa "notificações bloqueadas" do painel da loja (24/09/2026): o mesmo componente do alerta de estoque,
   no topo de qualquer página, sem o espaço de baixo (o `.content` da página já abre o seu). */
.ik-aviso-notificacoes.content {
    padding-bottom: 0;
}

/* Alerta de estoque da Início (§5.20): aviso âmbar pelas variáveis de
   `.ik-status--pendente` (7,5:1), estático acima dos KPIs. O template usava
   `.__alert-4`: fixo no canto, borda no laranja `--base-clr`, `word-break:
   break-all` e links sem href. */
.ik-aviso-estoque {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 3.5rem 1rem 1rem;
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-status-fundo);
    color: var(--ik-status-texto);
}

.ik-aviso-estoque__icone {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background-color: var(--ik-surface);
    color: var(--ik-status-texto);
}

.ik-aviso-estoque__icone .ik-icone {
    width: 1.375rem;
    height: 1.375rem;
}

.ik-aviso-estoque__foto {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
}

.ik-aviso-estoque__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.ik-aviso-estoque__titulo {
    margin: 0;
    color: var(--ik-status-texto);
    font-weight: 600;
    line-height: 1.4;
}

.ik-aviso-estoque__ajuda {
    margin: 0.125rem 0 0;
    color: var(--ik-status-texto);
    font-size: 0.875rem;
}

.ik-aviso-estoque__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
}

.ik-aviso-estoque .btn-outline-secondary {
    background-color: var(--ik-surface);
}

.ik-aviso-estoque__depois {
    min-height: 2.75rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: var(--ik-status-texto);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ik-aviso-estoque__depois:hover {
    text-decoration: none;
}

.ik-aviso-estoque__depois:focus-visible,
.ik-aviso-estoque__fechar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-aviso-estoque__fechar {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: var(--ik-status-texto);
}

.ik-aviso-estoque__fechar:hover {
    background-color: var(--ik-surface);
}

.ik-aviso-estoque__fechar .ik-icone {
    width: 1.125rem;
    height: 1.125rem;
}

@media (max-width: 575.98px) {
    .ik-aviso-estoque {
        padding-right: 1rem;
    }

    /* 01/11/2026: sem o recuo do contêiner, o X (40px a 12px da borda) cobria o fim da 1ª linha do título — visto em 390px no
       aviso de notificações bloqueadas; só o título recua, o resto do texto usa a largura toda */
    .ik-aviso-estoque__titulo {
        padding-inline-end: 2.25rem;
    }

    .ik-aviso-estoque__acoes .btn {
        width: 100%;
    }
}

/* Cabeçalho da Início (§5.20): o mesmo topo das telas refeitas (§5.16.1),
   com disco neutro — a Início não comunica status nenhum. */
.ik-inicio__topo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ik-inicio__topo-disco {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface-2);
    border: 1px solid var(--ik-border);
    color: var(--ik-text);
    font-size: 1.5rem;
}

.ik-inicio__topo .page-header-title {
    margin: 0;
}

.ik-inicio__subtitulo {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
}

/* Rankings da Início (§5.20): "mais vendidos" e "mais bem avaliados" no
   cartão do §5.3 — o template os deixava com raio 5px, sombra própria, borda
   laranja na foto, badge preto e estrela #f06f00. */
.ik-ranking__cabecalho {
    border-bottom: 1px solid var(--ik-border);
}

.ik-ranking__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-ranking__titulo .ik-icone {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ik-text-muted);
}

.ik-ranking__lista {
    display: grid;
    /* 8rem: no celular (390px) dá 2 colunas — com 9.5rem virava 1 coluna e cada
       foto ocupava a tela inteira (visto em tela em 23/09/2026); no cartão de
       ~510px continua dando 3 */
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ik-ranking__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding: 0.625rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    text-decoration: none;
    transition: border-color var(--ik-transicao), box-shadow var(--ik-transicao), transform 160ms var(--ik-ease-out);
}

.ik-ranking__item:hover {
    color: var(--ik-text);
    text-decoration: none;
}

/* 01/11/2026: borda e sombra do hover só com mouse (no toque ficavam presas); o aperto é o mesmo dos KPIs (§5.4) */
@media (hover: hover) and (pointer: fine) {
    .ik-ranking__item:hover {
        border-color: var(--ik-border-strong);
        box-shadow: var(--ik-shadow-md);
    }
}

.ik-ranking__item:active {
    transform: scale(0.98);
    transition-duration: 100ms;
}

.ik-ranking__item:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* proporção fixa: a foto reserva o espaço antes de carregar (sem deslocar o layout) */
.ik-ranking__foto-wrap {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

.ik-ranking__foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ik-ranking__nome {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.ik-ranking__selo {
    align-self: flex-start;
    margin-top: auto;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background-color: var(--ik-surface-2);
    border: 1px solid var(--ik-border);
    color: #52525b;
    font-size: 0.75rem;
    font-weight: 600;
}

.ik-ranking__avaliacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-top: auto;
    font-size: 0.75rem;
}

.ik-ranking__nota {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ik-status-texto);
    font-size: 0.875rem;
    font-weight: 700;
}

.ik-ranking__nota .ik-icone {
    width: 0.875rem;
    height: 0.875rem;
}

.ik-ranking__contagem {
    color: #52525b;
    font-weight: 500;
}

.ik-ranking__vazio {
    padding: 2rem 1rem;
}

.ik-ranking__vazio-icone--vendas {
    -webkit-mask-image: var(--ik-icone-trending-up);
    mask-image: var(--ik-icone-trending-up);
}

.ik-ranking__vazio-icone--avaliacoes {
    -webkit-mask-image: var(--ik-icone-estrela-contorno);
    mask-image: var(--ik-icone-estrela-contorno);
}

/* Cartão de anúncios da Início (§5.21, 26/09/2026): o mesmo desenho do cartão
   do fim do menu — fundo --ik-accent-soft, borda --ik-accent-soft-2, ilustração
   da referência, texto --ik-text-menu (o muted reprova no fundo tênue) e botão
   primário com seta; sem os círculos decorativos do template. */
.restaurant-dashboard-wrapper .ik-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--ik-accent-soft-2);
    border-radius: var(--ik-radius-lg);
    background: var(--ik-accent-soft);
    box-shadow: none;
    color: var(--ik-text-menu);
    font-size: 0.875rem;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;   /* o wrapper da Início capitaliza; o cartão tem frases */
}

.restaurant-dashboard-wrapper .ik-promo::before,
.restaurant-dashboard-wrapper .ik-promo::after {
    content: none;
}

.ik-promo__ilustracao {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto 0.25rem;
}

.ik-promo .ik-promo__titulo {
    margin: 0;
    color: var(--ik-text);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.ik-promo .ik-promo__destaque { /* 14/10/2026: "Crie Reels" — a palavra da ação em laranja de texto (AA sobre o fundo tênue) */
    color: var(--ik-accent-em-soft);
}

.ik-promo__texto {
    max-width: 30ch;
    margin: 0 0 0.5rem;
    color: var(--ik-text-menu);
    line-height: 1.45;
}

.ik-promo__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    max-width: 260px;   /* na coluna estreita (225 px) ocupa a largura; em colunas largas não cresce além disso */
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    text-transform: none !important;   /* o `.btn` da Início vem capitalizado pelo template */
    /* 01/11/2026: o botão afunda no aperto (a resposta ao toque), com a curva de saída do tema */
    transition: background-color var(--ik-transicao), border-color var(--ik-transicao), transform 160ms var(--ik-ease-out);
}

.ik-promo__botao:active {
    transform: scale(0.97);
}

.ik-promo__botao .ik-icone {
    width: 16px;
    height: 16px;
    transition: transform 200ms var(--ik-ease-out);
}

/* a seta avança com o mouse ou o foco do teclado — no toque o hover ficava preso com a seta adiantada */
.ik-promo__botao:focus-visible .ik-icone {
    transform: translateX(2px);
}

@media (hover: hover) and (pointer: fine) {
    .ik-promo__botao:hover .ik-icone {
        transform: translateX(2px);
    }
}

/* --------------------------------------------------------------------------
   KPIs do Despacho Inteligente (visão geral do módulo)

   Mesmo formato compacto de `.order--card`, com nomes semânticos em vez de
   `__color-N`: são seis indicadores de um domínio próprio, e reaproveitar as
   quatro classes numeradas repetiria ícone — o que a 5.4 do MASTER proíbe,
   porque um símbolo igual em dois cartões vira textura e deixa de informar.

   ⚠️ NENHUMA cor nova entra aqui: as seis paletas são as já medidas e
   documentadas na tabela da 5.4. O que muda por cartão é qual delas se usa e
   qual ícone diz o que o número significa. As cores acompanham o mesmo
   vocabulário dos badges de `RotuloDoDespacho` — esgotado é da família do
   perigo, sem frota é da família do aviso —, para o cartão e a tabela da lista
   não contarem histórias diferentes sobre o mesmo status.
   -------------------------------------------------------------------------- */

/* despachos no período — índigo, neutro: é o total, não um desfecho */
.ik-kpi--despachos {
    --ik-kpi-icone: var(--ik-icone-route);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f8f8fe;
    --ik-kpi-borda: #dadaf7;
}

/* atribuídos — violeta, o mesmo tom que o painel já usa para "aceito pelo
   entregador", que é exatamente o que um despacho atribuído significa */
.ik-kpi--atribuidos {
    --ik-kpi-icone: var(--ik-icone-aceito);
    --ik-kpi-forte: #6d28d9;
    --ik-kpi-claro: #f2ecfd;
    --ik-kpi-tenue: #faf7ff;
    --ik-kpi-borda: #e2d6fa;
}

/* tempo médio até a atribuição — ciano, medida, não desfecho */
.ik-kpi--tempo {
    --ik-kpi-icone: var(--ik-icone-tempo);
    --ik-kpi-forte: #0e7490;
    --ik-kpi-claro: #e6f6fa;
    --ik-kpi-tenue: #f4fbfd;
    --ik-kpi-borda: #c7e9f1;
}

/* sem frota — âmbar, igual ao badge-soft-warning do mesmo status */
.ik-kpi--sem-frota {
    --ik-kpi-icone: var(--ik-icone-sem-entregador);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fefaf2;
    --ik-kpi-borda: #f4e2c4;
}

/* esgotados — vermelho, igual ao badge-soft-danger do mesmo status */
.ik-kpi--esgotados {
    --ik-kpi-icone: var(--ik-icone-busca-sem-resultado);
    --ik-kpi-forte: #a3143a;
    --ik-kpi-claro: #fdecf0;
    --ik-kpi-tenue: #fef6f8;
    --ik-kpi-borda: #f6d4dd;
}

/* taxa de sucesso — verde */
.ik-kpi--taxa {
    --ik-kpi-icone: var(--ik-icone-percentual);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e8f7f1;
    --ik-kpi-tenue: #f4fbf8;
    --ik-kpi-borda: #c9ebde;
}

/* Barra da distribuição por nível. Neutra por decisão: nível de entregador não
   é status de saúde, então não entra semáforo — e laranja é assinatura de
   marca, nunca dado (MASTER §1). Sobre o trilho claro do Bootstrap mede
   4,2:1, acima do mínimo de 3:1 exigido de componente de UI. */
.ik-nivel-barra {
    background-color: var(--ik-text-muted);
}

/* Subtexto de cartão de KPI — hoje só o da taxa de sucesso o usa (o
   denominador, sem o qual o número não é auditável). Fica abaixo da linha do
   número, não dentro dela.

   ⚠️ Escopado em `.order--card`, não em `.ik-kpi--taxa`: o subtexto é do
   COMPONENTE, não daquele cartão. Preso à classe do cartão da taxa, o próximo
   KPI com `sub` herdaria o `<small>` sem estilo nenhum — texto de 0,75rem sem
   contraste garantido, e sem erro que denuncie.

   ⛔ NÃO usar `.text-muted` nem `--ik-text-muted` aqui: sobre o fundo tingido
   do cartão o cinza claro mede 4,37:1, abaixo do mínimo de 4,5:1 para texto
   normal — e este subtexto tem 0,75rem. `#52525b` é o mesmo tom do rótulo do
   cartão e mede 7:1. */
.order--card .ik-kpi-denominador {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.2;
    color: #52525b;
}

/* ⛔ O número dos KPIs do despacho ESCAPAVA do cartão e era cortado em silêncio.
   Medido em 30/08/2026, com o painel aberto: são seis cartões em `col-xl-2`, e
   entre 1200 e 1600 px a coluna fica com ~150-200 px — não cabem rótulo e número
   lado a lado. Como `.order--card` tem `overflow: hidden`, o excedente
   simplesmente sumia: a 1366 px "50,0%" perdia 40 px (o usuário lia "50,0") e
   "1 min 20 s" perdia 28 px (lia "1 Mi 20 S"). Sem erro no console, sem barra de
   rolagem — o indicador principal da tela mentindo o valor.

   A linha passa a QUEBRAR: quando não cabe, o número desce para baixo do rótulo,
   alinhado à direita (`margin-left: auto`), em vez de ser cortado. Acima de
   ~1600 px nada muda — continua rótulo à esquerda e número à direita, como a
   5.4 do MASTER descreve.

   Escopado em `#ik-despacho-kpis`: os `.order--card` do dashboard do template
   são quatro em colunas largas, nunca apertam, e não devem mudar de
   comportamento por causa deste módulo. */
#ik-despacho-kpis .order--card > .d-flex {
    flex-wrap: wrap;
}

#ik-despacho-kpis .order--card > .d-flex > .card-title {
    margin-left: auto;
}

/* ==========================================================================
   CARTÕES DE RESUMO DOS RELATÓRIOS (gradientes)

   São os três cartões do topo dos relatórios de ganhos — fundo saturado com
   texto branco por cima. Dois problemas vinham do template:

   1. O "warning" era laranja (#FF6900, matiz 24,7°), praticamente o #fa5420 da
      marca. Isso é o invariante da seção 1 quebrado: laranja virou status e
      passou a competir com a assinatura do iKero. Foi para âmbar (matiz 35,5°),
      que fica na mesma família semântica de aviso sem encostar na marca.
   2. Verde e laranja não sustentavam texto branco — 2,47:1 e 2,89:1, longe do
      mínimo de 4,5:1. Os dois foram escurecidos mantendo o matiz.

   O azul continua como estava: já media 5,25:1 e não colide com nada.
   ========================================================================== */
:root {
    --ik-grad-sucesso-inicio: #047857;   /* 5,48:1 com branco */
    --ik-grad-sucesso-fim: #065f46;      /* 7,68:1 */
    --ik-grad-aviso-inicio: #a16207;     /* 4,92:1 */
    --ik-grad-aviso-fim: #854d0e;        /* 6,85:1 */
}

.bg-success-gradient {
    background: linear-gradient(135deg,
                var(--ik-grad-sucesso-inicio) 0%,
                var(--ik-grad-sucesso-fim) 100%);
}

.bg-warning-gradient {
    background: linear-gradient(135deg,
                var(--ik-grad-aviso-inicio) 0%,
                var(--ik-grad-aviso-fim) 100%);
}

/* ==========================================================================
   ETIQUETAS (BADGES)
   O template pintava o texto com a MESMA cor do fundo em 5–10% de opacidade,
   o que dá contraste de 1:1 — ilegível. Aqui cada etiqueta usa fundo pálido
   com texto escuro da mesma família, todos acima de 4,5:1.
   O "info" virou neutro de propósito: laranja fica exclusivo da marca.
   ========================================================================== */
.badge {
    font-weight: 600;
    border-radius: 999px;
}

.badge-soft-success,
.badge-success {
    background-color: #e7f6f0 !important;
    color: #0a6045 !important;
}

.badge-soft-warning,
.badge-warning {
    background-color: #fdf3e4 !important;
    color: #7a4a00 !important;
}

.badge-soft-danger,
.badge-danger {
    background-color: #fdecf0 !important;
    color: #a3143a !important;
}

/* o "--info" de dois hífens é uma variante solta do bootstrap customizado do
   template (única do tipo), com o mesmo defeito: texto #24bac3 sobre o próprio
   tom a 10% — 2,36:1. Entra aqui junto das irmãs. */
.badge-soft-info,
.badge-soft--info,
.badge-info,
.badge.app--version {
    background-color: #f4f4f5 !important;
    color: #3f3f46 !important;
}

.badge-soft-dark,
.badge-dark {
    background-color: #f4f4f5 !important;
    color: #27272a !important;
}

/* ver a nota da regra irmã, mais acima: o texto da etiqueta da marca é
   --ik-accent-em-soft (4,92:1), não --ik-accent-fill (4,49:1). */
.badge-soft-primary,
.badge-primary {
    background-color: var(--ik-accent-soft) !important;
    color: var(--ik-accent-em-soft) !important;
}

/* ==========================================================================
   BOTÃO CANCELAR
   Vinha em rosa/vermelho, cor de perigo — mas cancelar não é destrutivo.
   Vermelho fica reservado para excluir de verdade.
   ========================================================================== */
.btn--cancel,
.btn.btn--cancel {
    color: var(--ik-text) !important;
    background: var(--ik-surface) !important;
    border: 1px solid var(--ik-border-strong) !important;
    border-radius: var(--ik-radius) !important;
    box-shadow: none !important;
}

.btn--cancel:hover,
.btn.btn--cancel:hover {
    background: var(--ik-surface-2) !important;
    border-color: var(--ik-text-subtle) !important;
    color: var(--ik-text) !important;
}

/* ==========================================================================
   AJUSTES DE LEGIBILIDADE
   Correções pontuais de itens que o template deixava em cinza claro demais.
   ========================================================================== */

/* campo de busca do cabeçalho e atalho de teclado */
.ctrlplusk,
.text-muted {
    color: #5f5f68 !important;
}

.navbar-search,
.navbar-search .form-control,
[class*="search"] .bg--secondary {
    background-color: var(--ik-surface-2) !important;
    border: 1px solid var(--ik-border) !important;
    color: var(--ik-text) !important;
}

/* Campo de busca do menu (só o admin tem). O template o desenhou para a
   sidebar PRETA: texto #99a7ba em repouso e BRANCO no foco
   (`.form--control:focus { color: #fff !important }`), com o mesmo branco no
   autofill via -webkit-text-fill-color. Sobre a sidebar clara do iKero, o que
   se digita sumia (visto em tela em 13/09/2026). Seletor com um nível a mais
   (0,3,0) vence os (0,2,0) do template mesmo com os dois em !important.
   Tokens da §5.7 do MASTER.md: texto --ik-text (17:1 sobre --ik-surface-2),
   borda strong, foco laranja com halo; lupa em --ik-text-muted (4,6:1). */
.sidebar--search-form .form--control,
.sidebar--search-form .form--control:focus {
    color: var(--ik-text) !important;
    background: var(--ik-surface-2) !important;
    border: 1px solid var(--ik-border-strong) !important;
    border-radius: var(--ik-radius) !important;
}

.sidebar--search-form .form--control:focus {
    border-color: var(--ik-accent) !important;
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.15) !important;
}

.sidebar--search-form .form--control::placeholder {
    color: var(--ik-text-subtle) !important;
}

.sidebar--search-form .form--control:-webkit-autofill,
.sidebar--search-form .form--control:-webkit-autofill:hover,
.sidebar--search-form .form--control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ik-text) !important;
    box-shadow: 0 0 0 1000px var(--ik-surface-2) inset !important;
}

.sidebar--search-form .search--form-group .btn {
    color: var(--ik-text-muted) !important;
}

/* contorno de perigo: vermelho claro demais para texto */
.btn-outline-danger,
.text-danger {
    color: #a3143a !important;
}

.btn-outline-danger {
    border-color: #f3c4d0 !important;
}

.btn-outline-danger:hover {
    background-color: #fdecf0 !important;
    border-color: #a3143a !important;
    color: #a3143a !important;
}

/* ação de perigo secundária em tom (22/09/2026, pedido do proprietário): o
   contorno sobre branco parecia um botão vazio ao lado da primária laranja.
   Fundo e texto são os da etiqueta "Cancelado" (`.ik-status--cancelado`, que vai
   no próprio botão e só define variáveis): #a3143a sobre #fdecf0 = 6,78:1.
   O !important vence o contorno global acima, que também é !important. */
.btn.ik-botao-perigo {
    border-color: var(--ik-status-fundo) !important;
    background-color: var(--ik-status-fundo) !important;
    color: var(--ik-status-texto) !important;
    font-weight: 500;
}

.btn.ik-botao-perigo:hover,
.btn.ik-botao-perigo:focus {
    border-color: var(--ik-status-texto) !important;
    background-color: var(--ik-status-fundo) !important;
    color: var(--ik-status-texto) !important;
}

/* verde do template claro demais: o #04bb7b dá 2,50:1 sobre branco, abaixo até
   do mínimo de 3:1 exigido para componente de UI. Passa a usar o verde de
   sucesso da paleta (§2.3), medido em 7,58:1.
   Vale também para os ícones em máscara, que herdam a cor por currentColor. */
.text-success {
    color: #0a6045 !important;
}

/* B3 (10/09/2026): as duas utilitárias que faltavam. O amarelo do template
   (#ffbb38) dava 1,69:1 sobre branco — ilegível — e o azul (#3c76f1), 4,16:1,
   abaixo do 4,5:1 de texto. Passam aos tons de texto da tabela de status
   (§2.3): aviso #7a4a00 (7,48:1) e informação/neutro #3f3f46 (10,44:1). */
.text-warning {
    color: #7a4a00 !important;
}

.text-info {
    color: #3f3f46 !important;
}

/* ==========================================================================
   ÍCONES EM LINHA (Lucide)

   O template usava caracteres tipográficos e emoji como ícone — "✔" e "❌"
   nas regras de senha, por exemplo. Emoji renderiza diferente em cada sistema,
   não aceita cor de token e não escala com a tipografia; por isso o MASTER.md
   fixa o Lucide como fonte única.

   Mesmo mecanismo dos ícones de KPI: SVG embutido como data URI e aplicado por
   mask-image. A diferença é que aqui a cor vem de currentColor, então as
   classes de estado já existentes (.text-success / .text-danger) continuam
   valendo sem precisar de um token por cor.
   ========================================================================== */
:root {
    --ik-icone-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 6 9 17l-5-5' /%3E %3C/svg%3E");
    --ik-icone-shopping-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18' /%3E %3Cpath d='M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25' /%3E %3Ccircle cx='18' cy='20' r='2' /%3E %3Ccircle cx='8' cy='20' r='2' /%3E %3C/svg%3E");
    --ik-icone-localizar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cline x1='2' x2='5' y1='12' y2='12' /%3E %3Cline x1='19' x2='22' y1='12' y2='12' /%3E %3Cline x1='12' x2='12' y1='2' y2='5' /%3E %3Cline x1='12' x2='12' y1='19' y2='22' /%3E %3Ccircle cx='12' cy='12' r='7' /%3E %3Ccircle cx='12' cy='12' r='3' /%3E %3C/svg%3E");   /* Lucide locate-fixed — "Centralizar mapa" do modal de atribuição (27/09/2026) */
    --ik-icone-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M18 6 6 18' /%3E %3Cpath d='m6 6 12 12' /%3E %3C/svg%3E");
    --ik-icone-database: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cellipse cx='12' cy='5' rx='9' ry='3' /%3E %3Cpath d='M3 5V19A9 3 0 0 0 21 19V5' /%3E %3Cpath d='M3 12A9 3 0 0 0 21 12' /%3E %3C/svg%3E"); /* iKero 03/10/2026: Lucide database — Limpar banco de dados */
    --ik-icone-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z' /%3E %3Cpath d='M20 2v4' /%3E %3Cpath d='M22 4h-4' /%3E %3Ccircle cx='4' cy='20' r='2' /%3E %3C/svg%3E"); /* iKero 03/10/2026: Lucide sparkles — Configuração de IA */
    --ik-icone-trending-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16 7h6v6' /%3E %3Cpath d='m22 7-8.5 8.5-5-5L2 17' /%3E %3C/svg%3E");
    /* iKero 01/11/2026: Lucide chart-column (repositório oficial, conferido) — título do gráfico anual da Início (§5.21) */
    --ik-icone-grafico-colunas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 3v16a2 2 0 0 0 2 2h16' /%3E %3Cpath d='M18 17V9' /%3E %3Cpath d='M13 17V5' /%3E %3Cpath d='M8 17v-3' /%3E %3C/svg%3E");
    --ik-icone-trending-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16 17h6v-6' /%3E %3Cpath d='m22 17-8.5-8.5-5 5L2 7' /%3E %3C/svg%3E");
    --ik-icone-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m6 9 6 6 6-6' /%3E %3C/svg%3E");
    /* Despacho Inteligente: Lucide "route" (conferido contra o arquivo oficial
       do repositorio lucide-icons/lucide). Mesmo tratamento dos demais: o
       currentColor do SVG vira %23000 porque nao resolve dentro de mask-image. */
    --ik-icone-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='6' cy='19' r='3' /%3E %3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15' /%3E %3Ccircle cx='18' cy='5' r='3' /%3E %3C/svg%3E");
    /* Chave Pix: um icone por tipo. Todos do Lucide, baixados do repositorio
       oficial (user-round, building-2, mail, smartphone, key-round). O
       currentColor do SVG foi trocado por %23000 porque ele nao resolve dentro
       de mask-image - a cor vem do background-color do .ik-icone. */
    --ik-icone-pix-cpf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='8' r='5' /%3E %3Cpath d='M20 21a8 8 0 0 0-16 0' /%3E %3C/svg%3E");
    --ik-icone-pix-cnpj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10 12h4' /%3E %3Cpath d='M10 8h4' /%3E %3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3' /%3E %3Cpath d='M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2' /%3E %3Cpath d='M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16' /%3E %3C/svg%3E");
    --ik-icone-pix-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7' /%3E %3Crect x='2' y='4' width='20' height='16' rx='2' /%3E %3C/svg%3E");
    --ik-icone-pix-telefone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='14' height='20' x='5' y='2' rx='2' ry='2' /%3E %3Cpath d='M12 18h.01' /%3E %3C/svg%3E");
    --ik-icone-pix-aleatoria: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z' /%3E %3Ccircle cx='16.5' cy='7.5' r='.5' fill='%23000' /%3E %3C/svg%3E");
    --ik-icone-banknote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='20' height='12' x='2' y='6' rx='2' /%3E %3Ccircle cx='12' cy='12' r='2' /%3E %3Cpath d='M6 12h.01M18 12h.01' /%3E %3C/svg%3E");
    --ik-icone-calendario-dias: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M8 2v3' /%3E %3Cpath d='M16 2v3' /%3E %3Crect x='3' y='3' width='18' height='18' rx='2' /%3E %3Cpath d='M3 9h18' /%3E %3Cpath d='M8 13h.01' /%3E %3Cpath d='M12 13h.01' /%3E %3Cpath d='M16 13h.01' /%3E %3Cpath d='M8 17h.01' /%3E %3Cpath d='M12 17h.01' /%3E %3Cpath d='M16 17h.01' /%3E %3C/svg%3E");
    --ik-icone-recibo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 17V7' /%3E %3Cpath d='M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8' /%3E %3Cpath d='M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z' /%3E %3C/svg%3E");
    /* avaliações de clientes, refeitas pela referência de 23/09/2026 (Lucide 1.47.0) */
    /* filtro das avaliações (23/09/2026, Lucide 1.47.0) */
    --ik-icone-estrela-contorno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z' /%3E %3C/svg%3E"); /* star */
    --ik-icone-desfazer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' /%3E %3Cpath d='M3 3v5h5' /%3E %3C/svg%3E"); /* rotate-ccw */
    --ik-icone-citacao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14 14a2 2 0 0 0 2-2V8h-2' /%3E %3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z' /%3E %3Cpath d='M8 14a2 2 0 0 0 2-2V8H8' /%3E %3C/svg%3E");
    --ik-icone-estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z' /%3E %3C/svg%3E"); /* star (preenchida) */
    --ik-icone-cadeado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='18' height='11' x='3' y='11' rx='2' ry='2' /%3E %3Cpath d='M7 11V7a5 5 0 0 1 10 0v4' /%3E %3C/svg%3E"); /* lock */
    --ik-icone-olho-fechado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49' /%3E %3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242' /%3E %3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143' /%3E %3Cpath d='m2 2 20 20' /%3E %3C/svg%3E"); /* eye-off */
    --ik-icone-olho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' /%3E %3Ccircle cx='12' cy='12' r='3' /%3E %3C/svg%3E"); /* eye */
    --ik-icone-responder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4' /%3E %3Cpath d='m9 17-5-5 5-5' /%3E %3C/svg%3E"); /* reply */
    --ik-icone-filtros: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10 5H3' /%3E %3Cpath d='M12 19H3' /%3E %3Cpath d='M14 3v4' /%3E %3Cpath d='M16 17v4' /%3E %3Cpath d='M21 12h-9' /%3E %3Cpath d='M21 19h-5' /%3E %3Cpath d='M21 5h-7' /%3E %3Cpath d='M8 10v4' /%3E %3Cpath d='M8 12H3' /%3E %3C/svg%3E"); /* sliders-horizontal */
    /* detalhe do pedido da loja, refeito pela referência de 22/09/2026 (Lucide 1.47.0) */
    --ik-icone-loja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5' /%3E %3Cpath d='M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244' /%3E %3Cpath d='M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05' /%3E %3C/svg%3E");
    --ik-icone-sacola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16 10a4 4 0 0 1-8 0' /%3E %3Cpath d='M3.103 6.034h17.794' /%3E %3Cpath d='M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z' /%3E %3C/svg%3E"); /* shopping-bag */
    --ik-icone-caminhao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' /%3E %3Cpath d='M15 18H9' /%3E %3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14' /%3E %3Ccircle cx='17' cy='18' r='2' /%3E %3Ccircle cx='7' cy='18' r='2' /%3E %3C/svg%3E"); /* truck */
    --ik-icone-cupom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z' /%3E %3Cpath d='M9 9h.01' /%3E %3Cpath d='m15 9-6 6' /%3E %3Cpath d='M15 15h.01' /%3E %3C/svg%3E");
    --ik-icone-cartao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='20' height='14' x='2' y='5' rx='2' /%3E %3Cline x1='2' x2='22' y1='10' y2='10' /%3E %3Cpath d='M6 14h2' /%3E %3C/svg%3E"); /* credit-card */
    --ik-icone-cifrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' /%3E %3Cpath d='M12 18V6' /%3E %3C/svg%3E"); /* circle-dollar-sign */
    --ik-icone-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M8 2v3' /%3E %3Cpath d='M16 2v3' /%3E %3Crect x='3' y='3' width='18' height='18' rx='2' /%3E %3Cpath d='M3 9h18' /%3E %3C/svg%3E"); /* calendar */
    --ik-icone-seta-esquerda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m12 19-7-7 7-7' /%3E %3Cpath d='M19 12H5' /%3E %3C/svg%3E"); /* arrow-left */
    --ik-icone-seta-direita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 12h14' /%3E %3Cpath d='m12 5 7 7-7 7' /%3E %3C/svg%3E"); /* arrow-right */
    --ik-icone-talheres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2' /%3E %3Cpath d='M7 2v20' /%3E %3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7' /%3E %3C/svg%3E"); /* utensils */
    --ik-icone-raio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z' /%3E %3C/svg%3E"); /* zap */
    --ik-icone-telefone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384' /%3E %3C/svg%3E"); /* phone */
    --ik-icone-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7' /%3E %3Crect x='2' y='4' width='20' height='16' rx='2' /%3E %3C/svg%3E"); /* mail */
    --ik-icone-usuario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' /%3E %3Ccircle cx='12' cy='7' r='4' /%3E %3C/svg%3E"); /* user */
    /* Conversas do painel da loja (20/09/2026, MASTER §5.14): busca, compositor,
       recibos de leitura, estado vazio e o selo do suporte. Lucide search / send /
       paperclip / image / face-slightly-smiling (o antigo `smile`) / check-check /
       message-circle / headset, conferidos no repositório oficial em 20/09/2026.
       Traço 2 em todos, menos o balão (1,6), que também serve de ilustração grande. */
    --ik-icone-busca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m21 21-4.34-4.34' /%3E %3Ccircle cx='11' cy='11' r='8' /%3E %3C/svg%3E");
    --ik-icone-enviar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z' /%3E %3Cpath d='m21.854 2.147-10.94 10.939' /%3E %3C/svg%3E");
    --ik-icone-clipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551' /%3E %3C/svg%3E");
    --ik-icone-imagem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='18' height='18' x='3' y='3' rx='2' ry='2' /%3E %3Ccircle cx='9' cy='9' r='2' /%3E %3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21' /%3E %3C/svg%3E");
    --ik-icone-emoji: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M15 10V9' /%3E %3Cpath d='M16.472 15a6 6 0 01-8.943 0' /%3E %3Cpath d='M9 10V9' /%3E %3Ccircle cx='12' cy='12' r='10' /%3E %3C/svg%3E");
    --ik-icone-check-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M18 6 7 17l-5-5' /%3E %3Cpath d='m22 10-7.5 7.5L13 16' /%3E %3C/svg%3E");
    /* 25/09/2026 — lateral do chat (MASTER §5.57): Lucide external-link e panel-right */
    --ik-icone-link-externo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
    --ik-icone-painel-direito: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E");
    --ik-icone-conversa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719' /%3E %3C/svg%3E");
    --ik-icone-suporte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z' /%3E %3Cpath d='M21 16v2a4 4 0 0 1-4 4h-5' /%3E %3C/svg%3E");
    --ik-icone-sair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m16 17 5-5-5-5' /%3E %3Cpath d='M21 12H9' /%3E %3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' /%3E %3C/svg%3E");
    --ik-icone-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M12 16v-4' /%3E %3Cpath d='M12 8h.01' /%3E %3C/svg%3E");
    --ik-icone-escudo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E %3C/svg%3E");
    --ik-icone-relogio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M12 6v6l4 2' /%3E %3C/svg%3E");
    --ik-icone-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cline x1='12' x2='12' y1='8' y2='12' /%3E %3Cline x1='12' x2='12.01' y1='16' y2='16' /%3E %3C/svg%3E");
    --ik-icone-mais: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 12h14' /%3E %3Cpath d='M12 5v14' /%3E %3C/svg%3E");
    --ik-icone-categoria: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' /%3E %3C/svg%3E");
    --ik-icone-moto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='18.5' cy='17.5' r='3.5' /%3E %3Ccircle cx='5.5' cy='17.5' r='3.5' /%3E %3Ccircle cx='15' cy='5' r='1' /%3E %3Cpath d='M12 17.5V14l-3-3 4-3 2 3h2' /%3E %3C/svg%3E");
    --ik-icone-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5' /%3E %3Crect x='2' y='6' width='14' height='12' rx='2' /%3E %3C/svg%3E");
    --ik-icone-chevron-direita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m9 18 6-6-6-6' /%3E %3C/svg%3E");
    --ik-icone-historico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' /%3E %3Cpath d='M3 3v5h5' /%3E %3Cpath d='M12 7v5l4 2' /%3E %3C/svg%3E");
}

.ik-icone {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.ik-icone--check {
    -webkit-mask-image: var(--ik-icone-check);
    mask-image: var(--ik-icone-check);
}

.ik-icone--x {
    -webkit-mask-image: var(--ik-icone-x);
    mask-image: var(--ik-icone-x);
}

.ik-icone--info {
    -webkit-mask-image: var(--ik-icone-info);
    mask-image: var(--ik-icone-info);
}

/* 09/10/2026 (MASTER §5.17): Lucide log-out — disco do diálogo "Sair do painel?" (admin e loja) */
.ik-icone--sair {
    -webkit-mask-image: var(--ik-icone-sair);
    mask-image: var(--ik-icone-sair);
}

.ik-icone--escudo {
    -webkit-mask-image: var(--ik-icone-escudo);
    mask-image: var(--ik-icone-escudo);
}

.ik-icone--relogio {
    -webkit-mask-image: var(--ik-icone-relogio);
    mask-image: var(--ik-icone-relogio);
}

.ik-icone--alerta {
    -webkit-mask-image: var(--ik-icone-alerta);
    mask-image: var(--ik-icone-alerta);
}

.ik-icone--recibo {
    -webkit-mask-image: var(--ik-icone-recibo);
    mask-image: var(--ik-icone-recibo);
}

/* iKero 23/09/2026: o token existia sem a classe — o disco do relatório de
   transações virava um quadrado sólido (MASTER §8, máscara sem imagem) */
.ik-icone--banknote {
    -webkit-mask-image: var(--ik-icone-banknote);
    mask-image: var(--ik-icone-banknote);
}

.ik-icone--loja {
    -webkit-mask-image: var(--ik-icone-loja);
    mask-image: var(--ik-icone-loja);
}

.ik-icone--sacola {
    -webkit-mask-image: var(--ik-icone-sacola);
    mask-image: var(--ik-icone-sacola);
}

.ik-icone--cupom {
    -webkit-mask-image: var(--ik-icone-cupom);
    mask-image: var(--ik-icone-cupom);
}

.ik-icone--caminhao {
    -webkit-mask-image: var(--ik-icone-caminhao);
    mask-image: var(--ik-icone-caminhao);
}

.ik-icone--cartao {
    -webkit-mask-image: var(--ik-icone-cartao);
    mask-image: var(--ik-icone-cartao);
}

.ik-icone--cifrao {
    -webkit-mask-image: var(--ik-icone-cifrao);
    mask-image: var(--ik-icone-cifrao);
}

.ik-icone--calendario-dias {
    -webkit-mask-image: var(--ik-icone-calendario-dias);
    mask-image: var(--ik-icone-calendario-dias);
}

.ik-icone--calendario {
    -webkit-mask-image: var(--ik-icone-calendario);
    mask-image: var(--ik-icone-calendario);
}

.ik-icone--seta-esquerda {
    -webkit-mask-image: var(--ik-icone-seta-esquerda);
    mask-image: var(--ik-icone-seta-esquerda);
}

.ik-icone--seta-direita {
    -webkit-mask-image: var(--ik-icone-seta-direita);
    mask-image: var(--ik-icone-seta-direita);
}

.ik-icone--talheres {
    -webkit-mask-image: var(--ik-icone-talheres);
    mask-image: var(--ik-icone-talheres);
}

.ik-icone--raio {
    -webkit-mask-image: var(--ik-icone-raio);
    mask-image: var(--ik-icone-raio);
}

.ik-icone--telefone {
    -webkit-mask-image: var(--ik-icone-telefone);
    mask-image: var(--ik-icone-telefone);
}

.ik-icone--email {
    -webkit-mask-image: var(--ik-icone-email);
    mask-image: var(--ik-icone-email);
}

.ik-icone--usuario {
    -webkit-mask-image: var(--ik-icone-usuario);
    mask-image: var(--ik-icone-usuario);
}

.ik-icone--estrela-contorno {
    -webkit-mask-image: var(--ik-icone-estrela-contorno);
    mask-image: var(--ik-icone-estrela-contorno);
}

.ik-icone--desfazer {
    -webkit-mask-image: var(--ik-icone-desfazer);
    mask-image: var(--ik-icone-desfazer);
}

.ik-icone--estrela {
    -webkit-mask-image: var(--ik-icone-estrela);
    mask-image: var(--ik-icone-estrela);
}

.ik-icone--olho {
    -webkit-mask-image: var(--ik-icone-olho);
    mask-image: var(--ik-icone-olho);
}

.ik-icone--responder {
    -webkit-mask-image: var(--ik-icone-responder);
    mask-image: var(--ik-icone-responder);
}

.ik-icone--filtros {
    -webkit-mask-image: var(--ik-icone-filtros);
    mask-image: var(--ik-icone-filtros);
}

.ik-icone--mais {
    -webkit-mask-image: var(--ik-icone-mais);
    mask-image: var(--ik-icone-mais);
}

.ik-icone--categoria {
    -webkit-mask-image: var(--ik-icone-categoria);
    mask-image: var(--ik-icone-categoria);
}

.ik-icone--moto {
    -webkit-mask-image: var(--ik-icone-moto);
    mask-image: var(--ik-icone-moto);
}

.ik-icone--video {
    -webkit-mask-image: var(--ik-icone-video);
    mask-image: var(--ik-icone-video);
}

.ik-icone--agendado {
    -webkit-mask-image: var(--ik-icone-agendado);
    mask-image: var(--ik-icone-agendado);
}

.ik-icone--chevron-direita {
    -webkit-mask-image: var(--ik-icone-chevron-direita);
    mask-image: var(--ik-icone-chevron-direita);
}

.ik-icone--historico {
    -webkit-mask-image: var(--ik-icone-historico);
    mask-image: var(--ik-icone-historico);
}

/* iKero (23/09/2026, MASTER §5.20): Início da loja — `layout-dashboard` no disco do
   cabeçalho e `megaphone` no cartão de anúncios. Conferidos no repo oficial do
   Lucide em 23/09/2026, tratamento da casa (stroke %23000, 1.6). */
:root {
    --ik-icone-painel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='7' height='9' x='3' y='3' rx='1' /%3E %3Crect width='7' height='5' x='14' y='3' rx='1' /%3E %3Crect width='7' height='9' x='14' y='12' rx='1' /%3E %3Crect width='7' height='5' x='3' y='16' rx='1' /%3E %3C/svg%3E");
    --ik-icone-megafone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z' /%3E %3Cpath d='M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14' /%3E %3Cpath d='M8 6v8' /%3E %3C/svg%3E");
}

.ik-icone--painel {
    -webkit-mask-image: var(--ik-icone-painel);
    mask-image: var(--ik-icone-painel);
}

.ik-icone--megafone {
    -webkit-mask-image: var(--ik-icone-megafone);
    mask-image: var(--ik-icone-megafone);
}

.ik-icone--shopping-cart {
    -webkit-mask-image: var(--ik-icone-shopping-cart);
    mask-image: var(--ik-icone-shopping-cart);
}

.ik-icone--trending-up {
    -webkit-mask-image: var(--ik-icone-trending-up);
    mask-image: var(--ik-icone-trending-up);
}

.ik-icone--grafico-colunas {
    -webkit-mask-image: var(--ik-icone-grafico-colunas);
    mask-image: var(--ik-icone-grafico-colunas);
}

.ik-icone--database {
    -webkit-mask-image: var(--ik-icone-database);
    mask-image: var(--ik-icone-database);
}

.ik-icone--sparkles {
    -webkit-mask-image: var(--ik-icone-sparkles);
    mask-image: var(--ik-icone-sparkles);
}

.ik-icone--trending-down {
    -webkit-mask-image: var(--ik-icone-trending-down);
    mask-image: var(--ik-icone-trending-down);
}

/* iKero 05/10/2026 (MASTER §5.2.2): os dois só existiam como token dos KPIs — o menu do admin os usa como ícone */
.ik-icone--percentual {
    -webkit-mask-image: var(--ik-icone-percentual);
    mask-image: var(--ik-icone-percentual);
}

.ik-icone--todos {
    -webkit-mask-image: var(--ik-icone-todos);
    mask-image: var(--ik-icone-todos);
}

.ik-icone--chevron-down {
    -webkit-mask-image: var(--ik-icone-chevron-down);
    mask-image: var(--ik-icone-chevron-down);
}

.ik-icone--route {
    -webkit-mask-image: var(--ik-icone-route);
    mask-image: var(--ik-icone-route);
}

/* Icone iKero convivendo com os Tio Icons do sidebar: o .ik-icone nasce em
   1em (tamanho do texto) e ficaria menor que os vizinhos, que sao fontes de
   icone dimensionadas pelo .nav-icon. Aqui ele assume as mesmas metricas. */
.navbar-vertical .nav-link > .ik-icone.nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.ik-icone--pix-cpf {
    -webkit-mask-image: var(--ik-icone-pix-cpf);
    mask-image: var(--ik-icone-pix-cpf);
}

.ik-icone--pix-cnpj {
    -webkit-mask-image: var(--ik-icone-pix-cnpj);
    mask-image: var(--ik-icone-pix-cnpj);
}

.ik-icone--pix-email {
    -webkit-mask-image: var(--ik-icone-pix-email);
    mask-image: var(--ik-icone-pix-email);
}

.ik-icone--pix-telefone {
    -webkit-mask-image: var(--ik-icone-pix-telefone);
    mask-image: var(--ik-icone-pix-telefone);
}

.ik-icone--pix-aleatoria {
    -webkit-mask-image: var(--ik-icone-pix-aleatoria);
    mask-image: var(--ik-icone-pix-aleatoria);
}

.ik-icone--busca {
    -webkit-mask-image: var(--ik-icone-busca);
    mask-image: var(--ik-icone-busca);
}

.ik-icone--enviar {
    -webkit-mask-image: var(--ik-icone-enviar);
    mask-image: var(--ik-icone-enviar);
}

.ik-icone--clipe {
    -webkit-mask-image: var(--ik-icone-clipe);
    mask-image: var(--ik-icone-clipe);
}

.ik-icone--imagem {
    -webkit-mask-image: var(--ik-icone-imagem);
    mask-image: var(--ik-icone-imagem);
}

.ik-icone--emoji {
    -webkit-mask-image: var(--ik-icone-emoji);
    mask-image: var(--ik-icone-emoji);
}

.ik-icone--check-check {
    -webkit-mask-image: var(--ik-icone-check-check);
    mask-image: var(--ik-icone-check-check);
}

.ik-icone--conversa {
    -webkit-mask-image: var(--ik-icone-conversa);
    mask-image: var(--ik-icone-conversa);
}

.ik-icone--suporte {
    -webkit-mask-image: var(--ik-icone-suporte);
    mask-image: var(--ik-icone-suporte);
}

/* ==========================================================================
   SELETOR DE IDIOMA (cabeçalho)

   Vinha como um link solto: o mesmo ícone genérico de tradução para todos os
   idiomas, o código cru ("pt-BR") como rótulo e um menu de itens sem qualquer
   marca de qual estava ativo. Agora é um controle fechado, com a bandeira do
   idioma, o nome por extenso e o selecionado destacado.
   ========================================================================== */
/* ---- barra do topo no celular (22/09/2026) ----------------------------------
   Abaixo de 576px o conteúdo da barra quebrava em duas linhas (127px no admin,
   111px na loja), mas a barra e o respiro do conteúdo seguem com a altura de uma
   linha: a segunda linha, sem fundo, caía por cima do título da página. Aqui ela
   volta a caber em uma linha — sem quebra, a marca na largura do logo, nome e
   e-mail da conta fora (o avatar abre o mesmo menu) e o seletor de idioma só
   com a bandeira (o botão tem `aria-label`). */
@media (max-width: 575.98px) {
    #header .navbar-nav-wrap {
        flex-wrap: nowrap;
    }

    #header .navbar-brand-wrapper {
        width: auto;
        flex-shrink: 0;
    }

    #header .navbar-nav-wrap-content-right {
        flex: 1 1 auto;
        min-width: 0;
    }

    #header .navbar-nav-wrap-content-right > .navbar-nav {
        justify-content: flex-end;
    }

    #header .navbar-dropdown-account-wrapper .media-body,
    #header .ik-lang__nome {
        display: none;
    }
}

.ik-lang {
    position: relative;
}

.ik-lang__botao,
.ik-lang .ik-lang__botao {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--ik-border-strong);
    border-radius: var(--ik-radius);
    background: var(--ik-surface);
    color: var(--ik-text) !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--ik-transicao), border-color var(--ik-transicao);
}

.ik-lang__botao:hover {
    background: var(--ik-surface-2);
    border-color: var(--ik-text-subtle);
    color: var(--ik-text) !important;
}

.ik-lang__botao:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* o Bootstrap desenha a própria seta no .dropdown-toggle — sai, já temos o
   chevron do Lucide e duas setas empilhadas é ruído */
.ik-lang__botao.dropdown-toggle::after {
    display: none;
}

/* A borda interna separa bandeira clara de fundo claro: sem ela, o branco da
   bandeira japonesa (e a metade branca de tantas outras) se dissolve na
   superfície e o disco perde o contorno. */
.ik-lang__bandeira {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(24, 24, 27, 0.12);
}

.ik-lang__seta {
    width: 0.875em;
    height: 0.875em;
    color: var(--ik-text-muted);
    margin-inline-start: 0.125rem;
    transition: transform var(--ik-transicao);
}

.ik-lang.show .ik-lang__seta {
    transform: rotate(180deg);
}

.ik-lang__menu,
.ik-lang .ik-lang__menu {
    min-width: 12.5rem;
    margin-top: 0.375rem;
    padding: 0.375rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background: var(--ik-surface);
    box-shadow: var(--ik-shadow-md);
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* min-height de 44px é o alvo de toque da seção 6.5. Cabe aqui sem custo — o
   menu tem espaço livre. O botão fica em 40px de propósito: os controles
   vizinhos do cabeçalho medem 38–42px, e só ele em 44 destoaria da barra. */
.ik-lang__item,
.ik-lang .ik-lang__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--ik-radius);
    color: var(--ik-text);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color var(--ik-transicao);
}

.ik-lang__item:hover {
    background: var(--ik-surface-2);
    color: var(--ik-text);
}

.ik-lang__item:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: -2px;
}

/* selecionado: mesmo par de cor do item de menu ativo, para o painel inteiro
   comunicar "atual" da mesma forma */
.ik-lang__item[aria-current="true"] {
    background: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
    font-weight: 600;
}

.ik-lang__item[aria-current="true"]:hover {
    background: var(--ik-accent-soft-2);
    color: var(--ik-accent-em-soft);
}

.ik-lang__marca {
    width: 1em;
    height: 1em;
    margin-inline-start: auto;
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   TELAS DE AUTENTICAÇÃO — login do admin e do restaurante
   Blade: resources/views/auth/login.blade.php (a mesma view serve os dois
   papéis; a variável $role decide logo, texto e destino do CTA).

   Layout: cartão único centralizado sobre fundo de marca, dividido por uma
   CURVA — painel de convite à esquerda (laranja), formulário à direita
   (branco). Desenho pedido pelo proprietário em 18/08/2026.

   O template entregava esta tela como foto de comida em tela cheia mais um
   retângulo laranja translúcido (#ff8a00 a 80%) posicionado com
   position:fixed. Nada ali vinha dos tokens do painel — a tela de login era o
   único lugar do produto que NÃO carregava este arquivo.

   Estrutura do template, reaproveitada sem renomear nada:
     main.auth-bg  >  .d-flex  >  [ .auth-content | .auth-wrapper ]
       .auth-bg        fundo de marca + marca-d'água grande
       .d-flex         o CARTÃO (branco, raio 28px, sombra)
       .auth-content   painel de convite (laranja) + marca-d'água + CTA
       .auth-wrapper   coluna do formulário (branca)

   TRÊS EXCEÇÕES DELIBERADAS ao padrão do painel, restritas a esta tela e
   autorizadas pelo proprietário ao pedir este desenho — ver MASTER.md 5.10:
     1. laranja como REVESTIMENTO (fundo e painel), contra o princípio da
        seção 1. É a tela de marca do produto, não superfície de trabalho.
     2. raio de PÍLULA (999px) em campos e botões, contra --ik-radius (10px)
        da seção 3.
     3. o cartão inteiro apoiado em bloco de cor, não em superfície neutra.
   Todo o resto do painel continua sob a regra original.

   Contrastes medidos nesta tela (script da seção 6 do MASTER.md):
     #ffffff sobre #d13605 ....  4,95:1   texto e borda do painel de convite
     #ffffff sobre #d13605 ....  4,95:1   botão Entrar
     #18181b sobre #ffffff .... 17,72:1   título do formulário
     #52525b sobre #ffffff ....  7,73:1   rótulos e apoio do formulário
   ========================================================================== */

/* ---- fundo de marca ------------------------------------------------------ */
.auth-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ik-accent) 0%, var(--ik-accent-hover) 100%);
    background-attachment: fixed;
}

/* Marca-d'água do fundo: padrão de elementos grandes com a sacola iKero e os
   segmentos atendidos (utensílios, loja, chapéu de chef, café) — ver 5.10.

   Vai como `background-image` com **`background-attachment: fixed`**, e não como
   `mask-image`, por um motivo que não é preferência: o padrão precisa ficar
   ancorado na VIEWPORT para atravessar o cartão alinhado com o painel de
   convite (o "reflexo"). Existe `background-attachment: fixed`; **não existe
   `mask-attachment` em navegador nenhum** — verificado com `CSS.supports`.
   O preço é a cor vir gravada no arquivo (branco) em vez de sair de um token.
   Como o padrão só é usado sobre laranja, isso não custa nada na prática. */
.auth-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/ikero-padrao-segmentos.svg");
    background-repeat: repeat;
    background-size: 900px 900px;
    background-position: 0 0;
    background-attachment: fixed;
    opacity: 0.09;
    pointer-events: none;
}
/* ---- o cartão ------------------------------------------------------------ */
/* os utilitários .align-items-center e .flex-wrap do Bootstrap vêm com
   !important, daí o !important aqui — é a única forma de vencê-los */
.auth-bg > .d-flex {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    min-height: 620px;
    background: var(--ik-surface);
    border-radius: 28px;
    box-shadow: 0 30px 70px -24px rgba(24, 24, 27, 0.45);
    overflow: hidden;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
}

/* A CURVA. Elipse branca gigante sobreposta ao painel laranja: a borda esquerda
   dela é a divisa. A geometria é resolvida, não tateada — para a divisa passar
   por 48% da largura no topo e 32% na base, com centro em (cx, altura) e
   ry = 1,2 x altura:
       x(y) = cx - rx * raiz(1 - ((y-cy)/ry)^2)
       x(0) = cx - 0,781*rx = 48%       x(H) = cx - rx = 32%
       ->  rx = 73,1%   cx = 105,1%
       ->  left 32%, width 146,2%, top -60%, height 320%
   Com ry = 1,2H a curva ficava estufada; 1,6H aproxima o arco quase reto da
   referencia sem mover os dois pontos onde ela toca as bordas.
   Mexer em qualquer um desses quatro números sem refazer a conta desalinha a
   curva das bordas do cartão. */
.auth-bg > .d-flex::before {
    content: "";
    position: absolute;
    inset-inline-start: 32%;
    top: -60%;
    width: 146.2%;
    height: 320%;
    background: var(--ik-surface);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* ---- painel de convite (esquerda) --------------------------------------- */
/* deixa de ser bloco flutuante (position:fixed) e passa a ser coluna do cartão */
.auth-content {
    position: relative;
    z-index: 0;
    inset: auto;
    transform: none;
    flex: 0 0 50%;
    width: 50%;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 56px 56px 60px;
    background: var(--ik-accent-fill);
    color: #ffffff;
    font-size: 0.9375rem;
    overflow: hidden;
}

/* o conteúdo para antes de 32% do cartão, que é onde a curva chega na base */
.auth-content .content,
.ik-auth-cta {
    position: relative;
    z-index: 1;
    max-width: 300px;
}

.ik-auth-logo {
    position: absolute;
    top: 40px;
    inset-inline-start: 60px;
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    z-index: 1;
    /* a arte oficial é laranja e sobre o painel laranja precisa ser branca.
       brightness(0) leva a preto e invert(1) a branco: troca o valor, não o
       desenho — a forma continua sendo a do arquivo oficial. */
    filter: brightness(0) invert(1);
}

.auth-content .title {
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.011em;
    color: #ffffff;
    margin: 0 0 12px;
    text-wrap: balance;
}

.auth-content p {
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
    text-wrap: pretty;   /* sem opacity: ela rebaixaria o branco e o par deixaria de medir 4,95:1 */
}

/* CTA de contorno, como na referência. Sobre #d13605 o branco mede 4,95:1,
   acima do mínimo de 3:1 exigido de componente de UI. */
.ik-auth-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 28px;
    min-height: 46px;
    padding: 12px 30px;
    border: 1px solid #ffffff;
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--ik-transicao), color var(--ik-transicao);
}

.ik-auth-cta:hover,
.ik-auth-cta:focus {
    background: #ffffff;
    color: var(--ik-accent-fill);
    text-decoration: none;
}

.ik-auth-cta:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Marca-d'água do painel: é o MESMO padrão do fundo, com a MESMA âncora e o
   MESMO tamanho — o painel funciona como uma janela sobre ele. É isso que
   produz a continuidade pedida pelo proprietário em 18/08/2026: o desenho
   atravessa a borda do cartão sem quebrar, em vez de o painel ter um padrão
   próprio, desalinhado.

   Não mexer em `background-size`, `background-position` nem
   `background-attachment` aqui sem mexer igual no `.auth-bg::before` — basta
   um valor divergir para o padrão "quebrar" na borda do cartão.

   Opacidade menor que a do fundo (0,07 contra 0,09) por contraste, não por
   estética: o painel carrega texto branco, e branco sobre branco-sobre-laranja
   derruba o par. Medido: a 0,08 o texto cai para 4,46:1 e reprova; 0,07 é o
   teto que mantém 4,52:1. Como o painel é mais escuro que o fundo, o mesmo
   branco aparece com peso semelhante ali.

   A parte que avança sobre a curva branca é cortada por ela, que vem em
   z-index maior. */
.auth-content::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/ikero-padrao-segmentos.svg");
    background-repeat: repeat;
    background-size: 900px 900px;
    background-position: 0 0;
    background-attachment: fixed;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}
/* ---- coluna do formulário (direita) ------------------------------------- */
.auth-wrapper {
    /* Recuo lateral do conteudo. O corpo do formulario e o botao sao irmaos
       (ver a </div> a mais do template, MASTER.md 8.10) e precisam do MESMO
       recuo para alinhar. Repetir numeros por breakpoint ja desalinhou uma
       vez; daqui em diante, mexer so nestas duas variaveis. */
    --ik-auth-recuo-e: 40px;
    --ik-auth-recuo-d: 64px;

    position: relative;   /* âncora da nota de versão, no rodapé do cartão */
    z-index: 2;           /* acima da curva */
    flex: 0 0 50%;
    width: 50%;
    max-width: none;
    min-height: 0;
    background: transparent;   /* o branco vem do cartão e da curva */
    margin-inline-start: 0;
    justify-content: center;
}

.auth-wrapper {
    padding-block-end: 38px;   /* reserva o rodapé da nota de versão */
}

/* o template dá margin-block auto a este bloco (:nth-last-child(2)), o que
   jogava o título para o topo do cartão e o botão para o fim */
.auth-wrapper .auth-wrapper-body,
.auth-wrapper .auth-wrapper-body:nth-last-child(2),
.auth-wrapper .auth-wrapper-body.auth-form-appear {
    margin-block: 0;
    padding: 0 var(--ik-auth-recuo-d) 0 var(--ik-auth-recuo-e);
}

/* a marca da plataforma já está no painel de convite; repeti-la aqui poria duas
   logos na mesma viewport disputando atenção. O elemento continua no DOM. */
.auth-wrapper .auth-logo {
    display: none;
}

.auth-wrapper .auth-header {
    margin-bottom: 28px !important;
}

.auth-wrapper .signin-txt {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.011em;
    color: var(--ik-text);
    margin: 0;
    text-wrap: balance;
}

/* o cartão cinza que agrupava os campos sai: na referência os campos são
   pílulas soltas sobre o branco */
.auth-wrapper .__bg-F8F9FC-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 4px !important;
}

.auth-wrapper .form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #52525b;
    margin-bottom: 6px;
}

/* iKero 02/10/2026: a altura da pílula é UMA medida (--ik-auth-campo), usada também para centralizar o ícone. O style.css do
   template força `height: 35px !important` em .auth-wrapper .auth-wrapper-body .form-control entre 768 e 1280px e abaixo
   de 575px — o campo encolhia e o ícone (calculado para 52px) ficava 9px acima do centro. A regra abaixo vence com
   especificidade maior e !important. */
.auth-wrapper {
    --ik-auth-campo: 52px;
}

.auth-wrapper .auth-wrapper-body .form-group .form-control {
    height: var(--ik-auth-campo) !important;
}

.auth-wrapper .form-control {
    height: var(--ik-auth-campo);
    border-radius: 999px;
    background-color: var(--ik-surface-2);
    border: 1px solid var(--ik-border);
    padding-inline: 20px;   /* o recuo do ícone vem com o ícone, mais abaixo */
    color: var(--ik-text);
    font-size: 0.9375rem;
}

.auth-wrapper .form-control:hover {
    border-color: var(--ik-border-strong);
}

/* O preenchimento automático do Chrome pinta o campo de azul E cobre o ícone
   de background. box-shadow inset é a única forma de sobrepor esse fundo. */
.auth-wrapper .form-control:-webkit-autofill,
.auth-wrapper .form-control:-webkit-autofill:hover,
.auth-wrapper .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px var(--ik-surface-2) inset;
    -webkit-text-fill-color: var(--ik-text);
    caret-color: var(--ik-text);
}

/* Ícones dentro do campo — Lucide `mail` e `lock`, desenho oficial preservado
   (viewBox 24, stroke-width 2; o stroke="currentColor" virou token).

   Vão em pseudo-elemento do .form-group, não em background-image do input, por
   duas razões medidas nesta tela: (a) uma regra do template vence a nossa e
   zerava o background-image do input, e (b) o preenchimento automático do
   Chrome pinta o campo por cima do background, apagando o ícone. Por máscara a
   cor vem do token, como nos KPIs (MASTER.md 5.4).

   O alvo é o TIPO de campo, com :has() — não a posição dentro de um contêiner.
   Assim as três telas de autenticação (login, redefinir senha, OTP) recebem o
   ícone certo sem regra por tela. Dois cuidados:
     - a senha é reconhecida por `.input-group-merge`, NÃO por
       input[type="password"]: o botão de revelar troca o type para `text`, e o
       ícone desapareceria junto com o padding, fazendo o texto saltar;
     - o padding de 46px vem junto do ícone, na mesma regra. Onde não há ícone
       (captcha, campos do OTP) não há vão vazio, e em navegador sem :has() a
       degradação é limpa: nem ícone, nem recuo. */
.auth-wrapper .form-group {
    position: relative;
}

.auth-wrapper .form-group:has(> input[type="email"]) .form-control,
.auth-wrapper .form-group:has(.input-group-merge) .form-control {
    padding-inline-start: 46px;
}

.auth-wrapper .form-group:has(> input[type="email"])::after,
.auth-wrapper .form-group:has(.input-group-merge)::after {
    content: "";
    position: absolute;
    inset-inline-start: 17px;
    bottom: calc(var(--ik-auth-campo) / 2 - 9.5px);   /* centro do campo − metade do ícone (o campo é o último filho do grupo) */
    width: 19px;
    height: 19px;
    background-color: var(--ik-text-subtle);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    pointer-events: none;
    /* acima do campo: no foco o Bootstrap sobe o input do .input-group (z-index 3) e o fundo branco cobria o cadeado (10/10/2026) */
    z-index: 5;
}

.auth-wrapper .form-group:has(> input[type="email"])::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.auth-wrapper .form-group:has(.input-group-merge)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.auth-wrapper .form-group:has(.input-group-merge) .form-control {
    padding-inline-end: 52px;   /* espaço do botão de revelar senha */
}

/* o Bootstrap corta o raio do lado onde fica o append; sem isto o campo de
   senha sai com "999px 5px 5px 999px" */
.auth-wrapper .input-group.input-group-merge > .form-control {
    border-radius: 999px;
}

.auth-wrapper .input-group-merge {
    position: relative;
}

.auth-wrapper .input-group-merge .input-group-append {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
}

.auth-wrapper .input-group-text {
    background: transparent;
    border: 0;
    color: var(--ik-text-muted);
    padding: 10px 14px;
}

/* O Bootstrap zera o anel em .form-control:focus — (0,2,0) — e isso vence o
   input:focus-visible do tema, que vale (0,1,1). Medido nesta tela: o campo de
   e-mail escapava por acidente (tem tabindex, logo casa com
   [tabindex]:focus-visible, que empata em 0,2,0 e ganha pela ordem), mas senha
   e captcha ficavam SEM NENHUM sinal de foco. MASTER.md 6.2 não admite isso.
   Nota: o resto do painel tem o mesmo defeito e continua com ele — corrigir
   globalmente muda o foco de todas as telas e é tarefa própria. */
.auth-wrapper .form-control:focus-visible,
.auth-wrapper .form-control:focus {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
    border-color: var(--ik-accent);
    background-color: var(--ik-surface);
}

/* Turnstile: o widget da Cloudflare tem largura e altura proprias e nao aceita
   estilo por fora (roda em iframe). O que da para fazer e reservar a altura,
   para a tela nao saltar quando ele termina de carregar. */
.ik-turnstile {
    margin-top: 4px;
    min-height: 65px;
}
/* 10/10/2026: com `data-size="flexible"` o widget estica até a largura dos campos (era 300 px fixos, desalinhado deles) */
.auth-wrapper .ik-turnstile {
    width: 100%;
}

/* captcha de imagem (fallback): mesma linguagem de pílula, sem tocar nos
   ganchos de JS (#reload-captcha, .reloadCaptcha, .capcha-spin) */
/* O bloco do captcha deixa de usar o grid do Bootstrap e vira um flex simples.
   Motivo medido: a .row nasce com margem lateral negativa e as colunas com
   padding proprio, e com largura fixa na coluna o conjunto estourava 8px a
   direita — com o botao de recarregar sobrepondo a imagem. Zerando margem e
   padding, a linha ocupa exatamente a largura dos campos de cima. */
.auth-wrapper #reload-captcha {
    display: flex;
    /* a .row do Bootstrap vem com flex-wrap: wrap, e por volta de 1024px a
       imagem caia para a linha de baixo */
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    padding: 0 !important;
}

.auth-wrapper #reload-captcha > [class*="col-"] {
    padding: 0;
    margin: 0;
    max-width: none;
}

/* o campo cresce; a imagem tem largura fixa, o bastante para ler o codigo */
.auth-wrapper #reload-captcha > [class*="col-"]:first-child {
    flex: 1 1 auto;
    width: auto;
}

.auth-wrapper #reload-captcha > [class*="col-"]:last-child {
    flex: 0 0 auto;
    width: 196px;
}

.auth-wrapper #reload-captcha .bg-white,
.auth-wrapper #custome_recaptcha {
    height: 52px;
}

/* O campo do captcha e estreito (col-6) e o texto tem de caber. Duas coisas:
   - o recuo acompanha a CURVA da pilula: com raio 999px num campo de 52px,
     a curva ocupa 26px de cada lado, e um padding de 20px fazia o texto
     comecar dentro dela, parecendo colado na borda;
   - as colunas deixam de dividir 50/50: o campo cresce e a imagem fica com
     largura fixa, suficiente para ler o codigo. */
.auth-wrapper #custome_recaptcha {
    padding-inline: 24px;
    text-overflow: ellipsis;
}


.auth-wrapper #reload-captcha .bg-white {
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    overflow: hidden;
    align-items: center;
}

.auth-wrapper .capcha-spin {
    padding: 0 12px !important;
    color: var(--ik-text-muted);
    cursor: pointer;
}

.auth-wrapper .custom-control-label {
    color: #52525b;
}

/* campos de dígito do OTP: raio arredondado, não pílula — em caixa de 50x50 a
   pílula viraria círculo. Não têm .form-control, por isso regra própria. */
.auth-wrapper .otp-field {
    border-radius: var(--ik-radius-lg);
    border: 1px solid var(--ik-border-strong);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    font-weight: 600;
}

.auth-wrapper .otp-field:focus,
.auth-wrapper .otp-field:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
    border-color: var(--ik-accent);
    background-color: var(--ik-surface);
}

/* o template pinta este botão com #ff8a00 e border-color !important — daí o
   !important aqui, restrito à borda. Branco sobre #ff8a00 dá 2,5:1 e reprova;
   sobre --ik-accent-fill dá 4,95:1. */
.auth-wrapper .btn-primary,
.auth-wrapper .btn--primary,
.auth-wrapper .btn-primary:focus,
.auth-wrapper .btn--primary:focus {
    background: var(--ik-accent-fill);
    border-color: var(--ik-accent-fill) !important;
    color: #ffffff;
    box-shadow: none;
    border-radius: 999px;
    height: 52px;
    max-width: none;
    margin-top: 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.auth-wrapper .btn-primary:hover,
.auth-wrapper .btn--primary:hover,
.auth-wrapper .btn-primary:active,
.auth-wrapper .btn--primary:active {
    background: var(--ik-accent-hover);
    border-color: var(--ik-accent-hover) !important;
    color: #ffffff;
}

/* o template fecha uma <div> a mais no bloco do "Lembrar de mim", e por isso o
   botão e o parágrafo do rodapé são renderizados fora do .auth-wrapper-body —
   sem herdar o padding dele. Alinhados aqui pela margem, sem reestruturar a
   marcação do template. */
.auth-wrapper > .btn-primary,
.auth-wrapper > .btn--primary {
    width: auto;
    margin-inline: var(--ik-auth-recuo-e) var(--ik-auth-recuo-d);
}

.auth-wrapper > p {
    display: none;   /* o convite virou o CTA do painel de convite */
}

.auth-wrapper .text__primary,
.auth-wrapper .text--primary {
    color: var(--ik-accent-fill);
}

/* a versão do sistema não é status: sai do verde de sucesso e do canto superior
   e vira nota discreta no rodapé. A informação continua na tela. */
.auth-wrapper .badge.initial-1 {
    position: absolute;
    top: auto;
    bottom: 12px;
    inset-inline: 0;
    margin: 0;
    float: none !important;
    text-align: center;
    background-color: transparent !important;
    color: var(--ik-text-muted) !important;   /* subtle mede 2,56:1 em 12px e reprova (MASTER.md 2.2) */
    font-size: 0.75rem;
    font-weight: 400;
}

/* ---- respostas a tela menor -------------------------------------------- */
@media (max-width: 1199px) {
    .auth-content {
        padding: 48px 40px;
    }

    .ik-auth-logo {
        inset-inline-start: 40px;
    }

    .auth-wrapper {
        --ik-auth-recuo-e: 32px;
        --ik-auth-recuo-d: 44px;
    }
}

/* empilhado: a curva não faz sentido na vertical e sai; o painel de convite
   vira uma faixa de marca no topo do cartão */
@media (max-width: 991px) {
    .auth-bg {
        padding: 24px 16px;
        align-items: flex-start;
    }

    .auth-bg > .d-flex {
        max-width: 560px;
        min-height: 0;
        flex-wrap: wrap !important;
    }

    .auth-bg > .d-flex::before {
        display: none;
    }

    /* o template esconde este painel com display:none dentro de media query, e
       media query NÃO soma especificidade: sem repetir a declaração aqui, o
       display:flex de fora venceria pela ordem. MASTER.md 8.8 */
    .auth-content {
        display: flex;
        flex: 0 0 100%;
        width: 100%;
        padding: 36px 32px 40px;
        text-align: center;
        align-items: center;
    }

    .auth-content .content,
    .ik-auth-cta {
        max-width: 100%;
    }

    .ik-auth-cta {
        align-self: center;
        margin-top: 20px;
    }

    .ik-auth-logo {
        position: static;
        margin: 0 auto 24px;
        height: 30px;
    }

    .auth-content .title {
        font-size: 1.5rem;
    }

    /* o padrão continua sendo o mesmo do fundo; só o tile encolhe, e tem de
       encolher NOS DOIS ao mesmo tempo, senão o reflexo desalinha */
    .auth-content::after,
    .auth-bg::before {
        background-size: 620px 620px;
    }

    .auth-wrapper {
        flex: 0 0 100%;
        width: 100%;
        background: var(--ik-surface);
        border-inline-start: 0;
        /* empilhado, o botão vai até o fim da coluna: 38px deixavam a nota
           de versão a 1px dele (medido). 56px dão respiro de ~19px. */
        padding-block-end: 56px;
    }

    .auth-wrapper {
        --ik-auth-recuo-e: 32px;
        --ik-auth-recuo-d: 32px;
    }

    .auth-wrapper .auth-wrapper-body,
    .auth-wrapper .auth-wrapper-body.auth-form-appear {
        padding-block: 36px 24px;
    }

    /* a nota de versão continua absoluta aqui: em fluxo normal ela cairia
       entre o título e os campos, porque no DOM vem antes do formulário.
       O padding-block-end do .auth-wrapper reserva o rodapé. */

    /* (o tamanho do tile em tela menor está definido junto do painel, acima) */
}

@media (max-width: 575px) {
    /* lado a lado, o campo ficava com 101px e o texto do placeholder nao
       cabia (medido: faltavam 54px). Empilhado, campo e imagem ficam com a
       largura toda — a imagem do codigo inclusive fica mais legivel. */
    .auth-wrapper #reload-captcha {
        flex-wrap: wrap;
    }

    .auth-wrapper #reload-captcha > [class*="col-"]:first-child,
    .auth-wrapper #reload-captcha > [class*="col-"]:last-child {
        flex: 1 1 100%;
        width: auto;
    }

    .auth-content {
        padding: 32px 24px 36px;
    }

    .auth-wrapper {
        --ik-auth-recuo-e: 24px;
        --ik-auth-recuo-d: 24px;
    }

    .auth-wrapper .auth-wrapper-body,
    .auth-wrapper .auth-wrapper-body.auth-form-appear {
        padding-block: 32px 20px;
    }

    .auth-wrapper .signin-txt {
        font-size: 1.5rem;
    }
}

/* ---------- Campos com máscara de entrada ---------- */
/* O campo espelho é hidden e nunca ocupa espaço; o visível herda o estilo
   normal de formulário. O alinhamento à direita é o que torna a digitação
   da direita para a esquerda legível. */
input[data-ik-formato="moeda"],
input[data-ik-formato="percentual"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

input[data-ik-mascara="on"]:focus {
    border-color: var(--ik-accent);
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.15);
}

/* ---------- Caixa de upload do banner promocional ---------- */
/* ⛔ O template desenha esta caixa em 9/1 (style.css, `.ratio-9-1`, com
   !important). Esse valor foi calibrado para o site desktop, onde a caixa do
   banner mede 1170x122 = 9,59:1. No APLICATIVO a caixa tem altura FIXA de
   75 dp e largura da tela menos 30 dp — de 3,87:1 (tela de 320) a 5,31:1
   (tela de 428). Medido no `PromotionalBannerViewWidget` do app do cliente
   em 19/08/2026.

   4,8:1 é o meio dessa faixa: a pré-visualização passa a mostrar o mesmo
   enquadramento que o cliente vê no celular, e casa com o recorte que o
   editor de imagem aplica (`proporcaoPorCampo` em _ikero-editor-imagem).

   `.ratio-9-1` tem uso único no projeto — só o banner promocional —, por isso
   sobrescrever a classe inteira é seguro. Se outra tela passar a usar 9:1,
   trocar por um seletor preso ao campo. Ver docs/editor-de-imagem.md. */
.ratio-9-1 {
    aspect-ratio: 4.8 / 1 !important;
}

/* ==========================================================================
   CHAVE PIX — seletor do tipo (painel da loja)

   "Informações de pagamento" → método Pix. O tipo da chave era um campo de
   texto livre com o placeholder "CPF, CNPJ, e-mail, telefone ou chave
   aleatória" — a pessoa tinha de digitar por conta própria o que o sistema já
   sabia que eram cinco opções, e a chave ia para o banco sem formato nenhum.

   O comportamento (troca de máscara, formato canônico no POST) mora em
   assets/admin/js/ikero/pix/chave-pix.js. Aqui é só a aparência.

   ⛔ O controle é um <input type="radio"> escondido só visualmente, com o
   <label> fazendo as vezes de botão. Não é `display:none`: um radio assim
   sairia da ordem de tabulação e o grupo perderia a navegação por setas, a
   leitura do estado por leitor de tela e o `required` nativo.
   ========================================================================== */
.ik-pix-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.ik-pix-tipo__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ik-pix-tipo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 44px é o alvo mínimo de toque da seção 6. O desenho poderia ser menor;
       o alvo não. */
    min-height: 44px;
    padding: 0 16px;
    margin: 0;
    border: 1px solid var(--ik-border-strong);
    border-radius: 999px;
    background-color: var(--ik-surface);
    /* 4,83:1 sobre branco. */
    color: var(--ik-text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--ik-transicao),
                border-color var(--ik-transicao),
                color var(--ik-transicao);
}

.ik-pix-tipo .ik-icone {
    font-size: 18px;
}

.ik-pix-tipo:hover {
    border-color: var(--ik-text-subtle);
    color: var(--ik-text);
}

/* Selecionado: fundo tênue da marca + laranja escurecido no texto.
   ⛔ Não é `--ik-accent-fill` aqui: sobre `--ik-accent-soft` ele mede 4,49:1 e
   reprova por um fio — é exatamente o caso que criou o `--ik-accent-em-soft`
   (4,92:1). Ver seção 2.1. */
.ik-pix-tipo__radio:checked + .ik-pix-tipo {
    background-color: var(--ik-accent-soft);
    border-color: var(--ik-accent);
    color: var(--ik-accent-em-soft);
    /* Peso é o sinal que não depende de cor: o fundo tênue da marca mede 1,07:1
       contra o branco do inativo, então sozinho ele seria uma diferença fraca
       para quem não distingue os dois tons (seção 6.3). */
    font-weight: 600;
}

.ik-pix-tipo__radio:checked + .ik-pix-tipo:hover {
    background-color: var(--ik-accent-soft);
    border-color: var(--ik-accent-hover);
    color: var(--ik-accent-em-soft);
}

/* O foco vive no radio, que é invisível — sem esta regra o teclado navegaria
   o grupo sem nenhum sinal na tela. */
.ik-pix-tipo__radio:focus-visible + .ik-pix-tipo {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* Enquanto nenhum tipo foi escolhido, o campo da chave fica desabilitado — o
   que se pede primeiro é a escolha. O cinza do template já cobre o resto. */
.ik-pix-tipos + .form-group .form-control:disabled,
.form-control[data-ik-pix="chave"]:disabled {
    cursor: not-allowed;
}

/* ============================================================================
   5.13 Aviso de novo pedido — o modal `#popup-modal` dos dois painéis
   (12/09/2026, referência visual do proprietário). Reaproveita o `.modal` do
   Bootstrap 4, o `.close` e o `.btn.btn-primary` já temados; a lógica de
   exibição (`playAudio()` + `.modal('show')`) e o `.check-order` não mudam.
   Ver MASTER.md §5.13.
   ========================================================================== */
/* O contêiner `.modal` leva tabindex="-1" para o Esc fechar; o Bootstrap o
   foca ao abrir, e o anel genérico do tema ([tabindex]:focus-visible) pintaria
   um retângulo laranja em volta do modal inteiro. O contêiner não é
   interativo — o anel fica nos botões, que continuam com o dele. */
.modal.ik-aviso-pedido-modal:focus,
.modal.ik-aviso-pedido-modal:focus-visible {
    outline: 0;
}

.ik-aviso-pedido {
    max-width: 40rem;   /* 640px */
}

.ik-aviso-pedido .modal-content {
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    box-shadow: var(--ik-shadow-md);
    background-color: var(--ik-surface);
}

.ik-aviso-pedido__corpo {
    padding: 2.5rem 2rem 2rem;   /* 40 32 32 */
    text-align: center;
}

/* Fechar: o `.close` do Bootstrap vem com float, opacidade 0,5 e text-shadow.
   Aqui ele é um alvo de 40px no canto, com anel de foco visível. */
.ik-aviso-pedido__fechar,
.ik-aviso-pedido__fechar:not(:disabled):not(.disabled) {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: var(--ik-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    transition: color var(--ik-transicao), background-color var(--ik-transicao);
}

.ik-aviso-pedido__fechar:hover,
.ik-aviso-pedido__fechar:not(:disabled):not(.disabled):hover {
    color: var(--ik-text);
    background-color: var(--ik-surface-2);
    opacity: 1;
}

.ik-aviso-pedido__fechar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* Disco tênue da marca com o carrinho (Lucide `shopping-cart`). Ícone em
   --ik-accent-em-soft, o laranja calibrado para o fundo #fff1ec (4,92:1). */
.ik-aviso-pedido__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7.5rem;    /* 120px */
    height: 7.5rem;
    border-radius: 999px;
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
}

.ik-aviso-pedido__icone > .ik-icone {
    width: 3.25rem;   /* 52px */
    height: 3.25rem;
    vertical-align: 0;
}

.ik-aviso-pedido__titulo {
    margin: 1.5rem 0 0;
    color: var(--ik-text);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.011em;
}

.ik-aviso-pedido__texto {
    margin: 0.5rem 0 0;
    color: var(--ik-text-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.ik-aviso-pedido__divisor {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--ik-border);
}

/* A ação primária do aviso — mais alta e larga que o botão de formulário,
   como na referência; cor e raio vêm do `.btn.btn-primary` já temado. */
.ik-aviso-pedido .btn.btn-primary {
    min-width: 16.25rem;   /* 260px */
    padding: 0.75rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .ik-aviso-pedido__corpo {
        padding: 2.5rem 1.25rem 1.5rem;
    }

    .ik-aviso-pedido .btn.btn-primary {
        min-width: 0;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   KPIs de "Pagamentos ao entregador" (admin, 19/09/2026 — MASTER §5.4).
   Três cartões compactos, um ícone e uma paleta por cartão, todas da tabela
   do §5.4: total pago em verde (dinheiro que saiu, desfecho), últimos 30 dias
   em índigo (recorte de tempo, neutro) e a contagem em ciano (medida, não
   desfecho — o mesmo raciocínio do tempo médio do despacho).
   -------------------------------------------------------------------------- */
.ik-kpi--pago-total {
    --ik-kpi-icone: var(--ik-icone-banknote);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e8f7f1;
    --ik-kpi-tenue: #f4fbf8;
    --ik-kpi-borda: #c9ebde;
}

.ik-kpi--pago-30d {
    --ik-kpi-icone: var(--ik-icone-calendario-dias);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f8f8fe;
    --ik-kpi-borda: #dadaf7;
}

.ik-kpi--pagamentos {
    --ik-kpi-icone: var(--ik-icone-recibo);
    --ik-kpi-forte: #0e7490;
    --ik-kpi-claro: #e6f6fa;
    --ik-kpi-tenue: #f4fbfd;
    --ik-kpi-borda: #c7e9f1;
}

/* Dígitos de coluna que não dançam entre linhas (MASTER §4). Utilitário para
   Blade; a tabela do template não recebe a regra por herança. */
.ik-tabular {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   CONVERSAS — painel da loja (20/09/2026, MASTER §5.14)

   Lista à esquerda, conversa à direita, no padrão de chat dos painéis de
   mercado. Tudo escopado em `.ik-chat` para não vazar para o admin, que ainda
   usa a tela do template com a mesma marcação (`chat-user-info`, `conv-*`).

   O que o template fazia e foi corrigido aqui:
   - os dois balões eram cinzas quase iguais (#F7F8FA × #F9FAFC): não dava
     para saber quem falou. Recebida fica branca com borda; enviada em
     --ik-accent-soft — o único uso de laranja além da seleção e do envio;
   - o "visto" era laranja (`.text-primary`): status não usa a cor da marca.
     Agora é o duplo check em verde de sucesso, o simples em cinza;
   - os três ícones do compositor eram SVGs soltos com cor fixa (#1455AC,
     #46A046, #F9BD23): viraram .ik-icone em cinza neutro;
   - `initial-19` fixava a lista em 600px; aqui a coluna ocupa a altura útil
     da janela e só a lista rola;
   - PNGs de estado vazio (no-conversation/no-customer/no-delivery/no-admin)
     saíram — vetor onde cabe vetor (§5.6).

   Contrastes: nome/prévia não lida --ik-text 17,7:1; prévia --ik-text-muted
   4,83:1 sobre branco e 4,66:1 sobre --ik-surface-2 (por isso a linha
   selecionada usa surface-2 + barra, e não o fundo tênue da marca, onde o
   muted cai a 4,38:1); contador --ik-accent-fill + branco 4,95:1; balão
   enviado --ik-text sobre #fff1ec 16,1:1.
   ========================================================================== */
.ik-chat__lista,
.ik-chat__conversa,
.ik-chat__vazio {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

@media (min-width: 992px) {
    .ik-chat__lista,
    .ik-chat__conversa,
    .ik-chat__vazio {
        height: calc(100vh - 12.5rem);
        min-height: 480px;
    }
}

@media (max-width: 991.98px) {
    .ik-chat__rolagem {
        max-height: 50vh;
    }

    .ik-chat__conversa,
    .ik-chat__vazio {
        height: 70vh;
        min-height: 420px;
    }
}

/* ---- busca ---------------------------------------------------------------- */
.ik-chat__busca {
    position: relative;
    padding: 1rem 1rem 0.75rem;
}

/* ícone por pseudo-elemento do contêiner, não background do input (§8.11) */
.ik-chat__busca::before {
    content: "";
    position: absolute;
    left: 1.75rem;
    top: 1rem;
    width: 1rem;
    height: 44px;
    background-color: var(--ik-text-muted);
    -webkit-mask: var(--ik-icone-busca) center / 1rem 1rem no-repeat;
    mask: var(--ik-icone-busca) center / 1rem 1rem no-repeat;
    pointer-events: none;
}

.ik-chat__busca .form-control {
    height: 44px;
    padding-left: 2.5rem;
    border-radius: var(--ik-radius);
}

/* ---- abas ----------------------------------------------------------------- */
.ik-chat__abas {
    padding: 0.25rem 1rem 0.75rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-chat__abas .nav-link {
    min-height: 40px;
    padding: 0.5rem 0.875rem;
    color: #52525b;
    font-weight: 500;
    border: 0;
}

.ik-chat__abas .nav-link:hover {
    color: var(--ik-text);
    background-color: var(--ik-surface-2);
    border-radius: var(--ik-radius);
}

/* ---- lista ---------------------------------------------------------------- */
.ik-chat__rolagem {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.ik-chat__grupo {
    padding: 0.75rem 1rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ik-text-muted);
}

.ik-chat__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 64px;
    padding: 0.625rem 1rem 0.625rem calc(1rem - 3px);
    border: 0;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--ik-border);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--ik-transicao), border-color var(--ik-transicao);
}

.ik-chat__item:hover {
    background-color: var(--ik-surface-2);
}

/* o template pinta .conv-active com !important (style.css:1299) — só outro
   !important vence. Selecionada = surface-2 + barra, o mesmo par do item ativo
   do menu; o fundo tênue da marca ficou de fora porque o muted da prévia não
   sobrevive nele (4,38:1). */
.ik-chat__item.conv-active {
    background-color: var(--ik-surface-2) !important;
    border-left-color: var(--ik-accent);
}

.ik-chat__item:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: -2px;
}

.ik-chat__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
}

.ik-chat__avatar img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    background-color: var(--ik-surface-2);
    border: 1px solid var(--ik-border);
}

.ik-chat__corpo {
    flex: 1 1 auto;
    min-width: 0;
}

.ik-chat__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* no cabeçalho da conversa o nome e o selo ficam juntos à esquerda */
.ik-chat__linha--inicio {
    justify-content: flex-start;
}

.ik-chat__nome {
    font-weight: 500;
    color: var(--ik-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ik-chat__quando {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--ik-text-muted);
    font-variant-numeric: tabular-nums;
}

.ik-chat__previa {
    font-size: 0.8125rem;
    color: var(--ik-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ik-chat__previa:empty::before {
    content: "\00a0";
}

/* não lida: nome e prévia em peso 600 e cor cheia, mais o contador. Três
   sinais, não só a cor (§6.3). */
.ik-chat__item--nao-lida .ik-chat__nome,
.ik-chat__item--nao-lida .ik-chat__previa {
    font-weight: 600;
    color: var(--ik-text);
}

.ik-chat__contador {
    flex: 0 0 auto;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--ik-accent-fill);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ik-chat__selo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background-color: #f4f4f5;
    color: #3f3f46;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* ---- estados vazios ------------------------------------------------------- */
.ik-chat__vazio,
.ik-chat__lista-vazia {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
}

.ik-chat__lista-vazia {
    display: flex;
    flex-direction: column;
}

.ik-chat__vazio-icone {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    background-color: var(--ik-text-subtle);
    -webkit-mask: var(--ik-icone-conversa) center / contain no-repeat;
    mask: var(--ik-icone-conversa) center / contain no-repeat;
}

.ik-chat__lista-vazia .ik-chat__vazio-icone {
    width: 2.25rem;
    height: 2.25rem;
}

.ik-chat__vazio-titulo {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-chat__vazio-texto {
    max-width: 28rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--ik-text-muted);
}

/* ---- conversa aberta ------------------------------------------------------ */
.ik-chat__cabecalho {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-chat__cabecalho .ik-chat__avatar,
.ik-chat__cabecalho .ik-chat__avatar img {
    width: 40px;
    height: 40px;
}

.ik-chat__titulo {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ik-text);
    /* 30/09/2026: até DUAS linhas (antes uma, com reticências — no celular, ao lado do "Voltar", do selo e do
       atalho da ficha, nome comprido virava "[HOM…"); além disso, reticências e o nome completo no `title` */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
    /* no celular o selo (Cliente/Loja/Entregador) desce para baixo do nome: ao lado dele sobravam ~100 px e o nome
       quebrava no meio da palavra */
    .ik-chat__cabecalho .ik-chat__linha--inicio {
        flex-wrap: wrap;
        row-gap: 0.125rem;
    }

    /* e o nome aparece INTEIRO (sem o limite de duas linhas): o cabeçalho cresce o que for preciso */
    .ik-chat__cabecalho .ik-chat__titulo {
        flex: 1 1 100%;
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
}

.ik-chat__subtitulo {
    font-size: 0.75rem;
    color: var(--ik-text-muted);
}

.ik-chat__mensagens {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--ik-bg);
}

.ik-chat__dia {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 0.75rem;
}

.ik-chat__dia span {
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background-color: var(--ik-surface);
    border: 1px solid var(--ik-border);
    font-size: 0.6875rem;
    font-weight: 600;
    color: #52525b;
}

.ik-chat__msg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(72%, 480px);
    margin-bottom: 0.5rem;
}

.ik-chat__msg--enviada {
    align-items: flex-end;
    margin-left: auto;
}

.ik-chat__balao {
    padding: 0.5rem 0.75rem;
    border-radius: var(--ik-radius);
    border: 1px solid var(--ik-border);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ik-chat__msg--recebida .ik-chat__balao {
    border-bottom-left-radius: 4px;
}

.ik-chat__msg--enviada .ik-chat__balao {
    background-color: var(--ik-accent-soft);
    border-color: var(--ik-accent-soft-2);
    border-bottom-right-radius: 4px;
}

.ik-chat__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    color: var(--ik-text-muted);
    font-variant-numeric: tabular-nums;
}

.ik-chat__meta .ik-icone {
    font-size: 0.875rem;
}

.ik-chat__anexos {
    width: min(72vw, 240px);
}

.ik-chat__anexos .conversation-img {
    border-color: var(--ik-border);
    border-radius: var(--ik-radius);
}

.ik-chat__arquivo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ik-radius);
    border: 1px solid var(--ik-border);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: border-color var(--ik-transicao);
}

.ik-chat__arquivo:hover {
    color: var(--ik-text);
    border-color: var(--ik-border-strong);
    text-decoration: none;
}

/* ---- compositor ----------------------------------------------------------- */
.ik-chat__compositor {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ik-border);
    background-color: var(--ik-surface);
}

/* iKero 06/10/2026 (MASTER §5.178.11): a conversa da ficha da loja no admin é só leitura — a faixa do pedido sob o
   cabeçalho e, no lugar do compositor, o aviso de que quem responde é a loja (texto --ik-text-muted, 4,83:1). */
.ik-chat__pedido-faixa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--ik-border);
    background-color: var(--ik-surface-2);
}

.ik-chat__pedido-faixa .ik-chat__tipo {
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-chat__pedido-link {
    margin-left: auto;   /* o mesmo botão em contorno do "Ver cliente" do cabeçalho */
}

/* o filtro "Aguardando a loja" (chip em contorno; ligado = --ik-surface-2 + borda forte, sem laranja) e o selo da
   linha (`.ik-status--pendente`, âmbar 7,48:1 — informação de espera, não alerta de marca) */
.ik-chat__filtros {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-chat__filtro {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 0.875rem;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--ik-text);
    background-color: var(--ik-surface);
}

.ik-chat__filtro:hover {
    color: var(--ik-text);
    background-color: var(--ik-surface-2);
}

.ik-chat__filtro:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-chat__filtro--ativo {
    border-color: var(--ik-border-strong);
    background-color: var(--ik-surface-2);
    font-weight: 600;
}

.ik-chat__filtro-numero {
    min-width: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--ik-bg);
    text-align: center;
    font-weight: 600;
}

.ik-chat__aguardando {
    font-size: 0.6875rem;
}

/* "Conversa com o cliente/entregador" no cartão da loja do detalhe do pedido do admin (abre a aba Conversas da ficha) */
.ik-pedido__conversas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ik-pedido__conversas .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
}

.ik-chat__so-leitura {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--ik-border);
    background-color: var(--ik-surface);
    font-size: 0.875rem;
    color: var(--ik-text-muted);
}

.ik-chat--leitura .ik-chat__busca .form-control,
.ik-chat--leitura .ik-chat__abas .nav-link {
    min-height: 44px;
}

/* a classe `input_msg_write` fica pelo CSS das miniaturas de anexo
   (.upload_img_box) que o select-multiple-image-for-message.js gera; a borda
   e o raio que ela trazia saem, a caixa é a de baixo. */
.ik-chat .input_msg_write {
    border: 0;
    border-radius: 0;
}

.ik-chat__caixa {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.375rem 0.375rem 0.375rem 0.5rem;
    border: 1px solid var(--ik-border-strong);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    transition: border-color var(--ik-transicao), box-shadow var(--ik-transicao);
}

.ik-chat__caixa:focus-within {
    border-color: var(--ik-accent);
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.15);
}

.ik-chat__acoes {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex: 0 0 auto;
}

.ik-chat__acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: #52525b;
    font-size: 1.125rem;
    cursor: pointer;
    transition: background-color var(--ik-transicao), color var(--ik-transicao);
}

.ik-chat__acao:hover {
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
}

.ik-chat__acao:focus-within {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* o campo dentro da caixa não tem borda própria: a caixa é o campo. O anel de
   foco fica na caixa (:focus-within acima), então aqui ele sai de propósito —
   dois anéis aninhados no mesmo componente é ruído, não acessibilidade. */
.ik-chat__caixa textarea.form-control {
    flex: 1 1 auto;
    min-height: 36px;
    max-height: 160px;
    padding: 0.4375rem 0.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    resize: none;
    line-height: 1.5;
    overflow-y: auto;
}

/* (0,3,1) para vencer o `.form-control:focus` do tema (0,2,0), que desenhava
   o halo de 3px também no textarea — visto em tela em 20/09/2026 como um
   segundo retângulo rosado dentro da caixa. */
html .ik-chat__caixa textarea.form-control:focus,
html .ik-chat__caixa textarea.form-control:focus-visible {
    outline: 0;
    box-shadow: none;
    border-color: transparent;
}

.ik-chat__enviar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ik-radius);
    font-size: 1.125rem;
}

.ik-chat__enviar .ik-icone {
    margin-left: -1px;
}

/* ---- anexos escolhidos (24/09/2026) ----------------------------------------
   Uma faixa só (js/ikero/chat/conversa.js desenha): miniatura ou clipe, nome com
   o peso embaixo e o X de remover (44px de alvo). Vazia, some. */
.ik-chat__previas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0 0.5rem;
}

.ik-chat__previas:empty {
    display: none;
}

.ik-chat__anexo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 16rem;
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    font-size: 0.8125rem;
    color: var(--ik-text);
}

.ik-chat__anexo img {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: calc(var(--ik-radius) / 2);
    object-fit: cover;
}

.ik-chat__anexo > .ik-icone {
    flex: 0 0 auto;
    font-size: 1.125rem;
    color: var(--ik-text-muted);
}

.ik-chat__anexo-nome {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ik-chat__anexo-nome small {
    color: var(--ik-text-muted);
}

.ik-chat__anexo-remover {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: var(--ik-text-muted);
}

.ik-chat__anexo-remover:hover {
    background-color: var(--ik-surface);
    color: var(--ik-text);
}

.ik-chat__anexo-remover:focus-visible,
.ik-chat__voltar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* ---- mensagens anteriores, estados e celular (24/09/2026) ------------------ */
.ik-chat__anteriores {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0 0.75rem;
}

.ik-chat__anteriores .btn {
    text-transform: none;
}

.ik-chat__vazio-icone--erro {
    -webkit-mask-image: var(--ik-icone-alerta);
    mask-image: var(--ik-icone-alerta);
}

.ik-chat__vazio .spinner-border {
    width: 2rem;
    height: 2rem;
}

.ik-chat .page-header-title {
    text-transform: none;
}

/* "Voltar" só existe no celular, onde a tela é lista OU conversa */
.ik-chat__voltar {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -0.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: var(--ik-text);
    font-size: 1.25rem;
}

/* Conversa nova pelo pedido: o aviso fica no meio da área das mensagens (24/09/2026) */
.ik-chat__mensagens--nova {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* "Conversar" nos cartões de cliente e entregador do detalhe do pedido (24/09/2026) */
.ik-pedido__conversar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    text-transform: none;
}

.ik-pedido__conversar .ik-icone {
    font-size: 1rem;
}

/* "Voltar" também em "Abrindo a conversa…" e no erro (a lista fica escondida no celular) */
.ik-chat__vazio {
    position: relative;
}

.ik-chat__voltar--estado {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
}

@media (max-width: 767.98px) {
    .ik-chat__voltar {
        display: inline-flex;
    }

    .ik-chat:not(.ik-chat--aberta) .ik-chat__coluna-conversa,
    .ik-chat.ik-chat--aberta .ik-chat__coluna-lista {
        display: none;
    }

    /* a caixa de escrever cabe inteira na tela: desconta a barra do topo, o
       cabeçalho da página e a margem (visto em tela a 390 × 844 em 24/09/2026) */
    .ik-chat.ik-chat--aberta .ik-chat__conversa,
    .ik-chat.ik-chat--aberta .ik-chat__vazio {
        height: calc(100vh - 11.5rem);
        height: calc(100dvh - 11.5rem);
        min-height: 380px;
    }
}

/* ==========================================================================
   CONVERSAS — a lateral do pedido (25/09/2026, MASTER §5.57)

   Terceira área da tela de Conversas: o pedido da conversa aberta (status
   atual, itens do retrato congelado, valores, pagamento, "Ver detalhes") e
   "Sobre o contato". A partir de 1200px fica ao lado (col-xl-3); abaixo é uma
   gaveta pela direita, aberta pelo botão do cabeçalho da conversa. Reusa
   `.ik-status` (etiqueta), `.ik-pedido__totais` e `.ik-pedido__pessoa` do
   detalhe do pedido — nada de cartão decorativo, métrica ou ação sem função.
   ========================================================================== */
.ik-icone--link-externo {
    -webkit-mask-image: var(--ik-icone-link-externo);
    mask-image: var(--ik-icone-link-externo);
}

.ik-icone--painel-direito {
    -webkit-mask-image: var(--ik-icone-painel-direito);
    mask-image: var(--ik-icone-painel-direito);
}

/* ---- lista por CONTATO (25/09/2026, MASTER §5.59) ----------
   Uma entrada por contato: a linha do contato é `.ik-chat__item` (o mesmo desenho de sempre) e, com várias
   conversas, expande uma lista recuada de pedidos (`.ik-chat__item--pedido`, sem avatar). Contato ativo = o que tem a
   conversa aberta (fundo `--ik-surface-2`, sem barra — a barra fica na conversa). */
.ik-chat__contato-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--ik-bg);
}

.ik-chat__contato-lista[hidden] {
    display: none;
}

.ik-chat__contato {
    /* recuo das conversas por pedido = padding da linha (1rem - 3px de barra) + avatar 44px + gap 0.75rem da .ik-chat__item */
    --ik-chat-recuo-conversa: calc(1rem - 3px + 44px + 0.75rem);
}

.ik-chat__item--pedido {
    min-height: 56px;
    padding-left: var(--ik-chat-recuo-conversa);
    background-color: var(--ik-bg);
}

.ik-chat__item--pedido .ik-chat__tipo {
    color: var(--ik-text);
    font-weight: 500;
}

.ik-chat__item--achado .ik-chat__selo {
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
}

.ik-chat__contato--ativo > .ik-chat__contato-linha {
    background-color: var(--ik-surface-2);
}

.ik-chat__contato-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.25rem;
    color: var(--ik-text-muted);
    transition: transform var(--ik-transicao);
}

.ik-chat__contato--expandido .ik-chat__contato-chevron {
    transform: rotate(180deg);
}

.ik-chat__contato-contador[hidden] {
    display: none;
}

.ik-chat__contato-mais {
    padding: 0.375rem 1rem 0.5rem var(--ik-chat-recuo-conversa);
    border-bottom: 1px solid var(--ik-border);
}

.ik-chat__contato-mais .btn-link {
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ik-text);
    text-decoration: underline;
    text-decoration-color: var(--ik-border-strong);
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ik-chat__contato-chevron {
        transition: none;
    }
}

/* ---- indicadores persistentes de não lidas (25/09/2026, MASTER §5.58) ----------
   O mesmo contador da lista (`.ik-chat__contador`) preso ao canto do ícone do cabeçalho e dos ícones de chat do
   detalhe do pedido; o do menu é o badge do próprio menu. Todos com [hidden] em 0, atualizados por
   js/ikero/chat/nao-lidas.js. Não é laranja "de status": é o mesmo contador que a lista de conversas já usa. */
.ik-topo__chat,
.ik-pedido__icone-acao {
    position: relative;
}

.ik-topo__contador,
.ik-pedido__icone-contador {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    box-shadow: 0 0 0 2px var(--ik-surface);
}

.ik-topo__contador[hidden],
.ik-pedido__icone-contador[hidden],
.sidebar--badge-container .badge[hidden] {
    display: none;
}

/* a linha do meio de cada conversa: "Cliente · Pedido #100241" + etiqueta miúda. Na coluna estreita (col-xl-3 a
   1440px) a etiqueta desce para a linha de baixo em vez de cortar o número do pedido (visto em tela, 25/09/2026). */
.ik-chat__linha--meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.ik-chat__tipo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--ik-text-muted);
    overflow-wrap: anywhere;   /* quebra em vez de cortar o número do pedido; a etiqueta desce (1280px) */
}

.ik-chat__item--nao-lida .ik-chat__tipo {
    color: var(--ik-text);
}

.ik-chat__status .ik-status,
.ik-chat__subtitulo .ik-status {
    padding: 0.0625rem 0.5rem;
    font-size: 0.6875rem;
}

.ik-chat__subtitulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.375rem;
}

/* iKero 06/10/2026: o telefone do cabeçalho (link `tel:`) herdava a cor de link do template — 3,31:1. Fica no texto
   secundário (4,83:1), sublinhado para continuar parecendo link; vale também para Mensagens do suporte (§5.93). */
.ik-chat__subtitulo a {
    color: var(--ik-text-muted);
    text-decoration: underline;
}

.ik-chat__subtitulo a:hover {
    color: var(--ik-text);
}

/* botão da gaveta (só quando a lateral não cabe ao lado) */
.ik-chat__contexto-abrir {
    display: none;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background: var(--ik-surface);
    color: var(--ik-text-muted);
    font-size: 1.125rem;
}

.ik-chat__contexto-abrir:hover {
    background: var(--ik-surface-2);
    color: var(--ik-text);
}

.ik-chat__contexto {
    position: relative;
    overflow: hidden;
}

.ik-chat__contexto-topo {
    display: none;
    justify-content: flex-end;
    padding: 0.5rem 0.75rem 0;
}

.ik-chat__contexto-fechar {
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: var(--ik-text-muted);
    font-size: 1.125rem;
}

.ik-chat__contexto-fechar:hover {
    background: var(--ik-surface-2);
    color: var(--ik-text);
}

.ik-chat__contexto-rolagem {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.ik-chat__contexto-secao {
    padding: 1rem 1.25rem;
}

.ik-chat__contexto-secao + .ik-chat__contexto-secao {
    border-top: 1px solid var(--ik-border);
}

.ik-chat__contexto-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ik-chat__contexto-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-chat__contexto-link-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ik-radius);
    color: var(--ik-text-muted);
    font-size: 1.125rem;
}

.ik-chat__contexto-link-icone:hover {
    background: var(--ik-surface-2);
    color: var(--ik-text);
}

.ik-chat__contexto-status {
    margin: 0.5rem 0 0.875rem;
}

/* a outra parte saiu do pedido (entregador trocado): a conversa fica só para consulta — aviso neutro, não é erro */
.ik-chat__contexto-aviso {
    margin: 0 0 0.875rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background: var(--ik-surface-2);
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-chat__contexto-rotulo {
    margin: 0.875rem 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ik-text-muted);
}

.ik-chat__contexto-texto {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ik-text-muted);
}

/* itens do pedido: foto 44px, "2× Nome", variações/complementos em cinza, valor */
.ik-chat__itens,
.ik-chat__pedidos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.625rem;
}

.ik-chat__item-pedido {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}

.ik-chat__itens--compacta .ik-chat__item-pedido--escondido {
    display: none;
}

.ik-chat__itens--todos .ik-chat__item-pedido--escondido {
    display: flex;
}

.ik-chat__item-foto {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    object-fit: cover;
}

.ik-chat__item-foto--vazia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ik-surface-2);
    color: var(--ik-text-subtle);
    font-size: 1.125rem;
}

.ik-chat__item-dados {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ik-chat__item-nome {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-chat__item-detalhe {
    font-size: 0.75rem;
    color: var(--ik-text-muted);
}

.ik-chat__item-obs {
    font-style: italic;
}

.ik-chat__item-valor {
    font-size: 0.8125rem;
    color: var(--ik-text);
}

.ik-chat__contexto-mais {
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ik-text);
    text-decoration: underline;
    text-decoration-color: var(--ik-border-strong);
    text-underline-offset: 3px;
}

/* data e tipo de atendimento: ícone à esquerda, texto à direita */
.ik-chat__contexto-dados {
    display: grid;
    gap: 0.5rem;
    margin: 0.875rem 0 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--ik-border);
}

.ik-chat__contexto-dados > div {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}

.ik-chat__contexto-dados dt {
    flex: 0 0 auto;
    color: var(--ik-text-muted);
    font-size: 1rem;
    line-height: 1.4;
}

.ik-chat__contexto-dados dd {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ik-text);
}

/* `.ik-pedido__totais` (§5.16) vem DEPOIS neste arquivo: as regras abaixo precisam do escopo `.ik-chat__contexto`
   para vencer. A coluna dos valores é `auto`: sem permitir quebra, "Pagamento pelo app · Pago" a alargava e
   empurrava todos os valores para fora do cartão (visto em tela a 1440px, 25/09/2026). */
.ik-chat__contexto .ik-chat__contexto-totais {
    /* rótulo pelo conteúdo, valor no que sobra (quebrando): com `1fr auto` o valor tomava a largura máxima
       antes do fr e o rótulo virava uma coluna de 0px */
    grid-template-columns: max-content minmax(0, 1fr);
    max-width: none;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--ik-border);
    font-size: 0.875rem;
}

.ik-chat__contexto .ik-chat__contexto-totais dd {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ik-chat__contexto-acao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.ik-chat__contexto-acao:hover,
.ik-chat__pedido-link:hover {
    background: var(--ik-surface-2);
    color: var(--ik-text);
    text-decoration: none;
}

/* conversa geral: os pedidos da pessoa, cada um abre a conversa daquele pedido */
.ik-chat__pedido-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    color: var(--ik-text);
    font-size: 0.875rem;
}

.ik-chat__pedido-dados {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
    min-width: 0;
}

.ik-chat__contexto-vazio {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.25rem;
}

.ik-chat__vazio-icone--recibo {
    -webkit-mask-image: var(--ik-icone-recibo);
    mask-image: var(--ik-icone-recibo);
}

@media (min-width: 992px) {
    .ik-chat__contexto {
        height: calc(100vh - 12.5rem);
        min-height: 480px;
    }
}

/* abaixo de 1200px a lateral vira gaveta pela direita */
@media (max-width: 1199.98px) {
    .ik-chat__contexto-abrir {
        display: inline-flex;
    }

    .ik-chat__contexto-topo {
        display: flex;
    }

    .ik-chat__coluna-contexto {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1051;
        width: min(22.5rem, 92vw);
        padding: 0;
        transform: translateX(100%);
        transition: transform 0.2s ease;
        visibility: hidden;
    }

    .ik-chat--contexto-aberto .ik-chat__coluna-contexto {
        transform: none;
        visibility: visible;
    }

    .ik-chat__coluna-contexto .ik-chat__contexto {
        height: 100%;
        min-height: 0;
        border-radius: 0;
        box-shadow: -8px 0 24px rgba(24, 24, 27, 0.16);
    }

    .ik-chat__contexto-fundo {
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: rgba(24, 24, 27, 0.45);
    }

    .ik-chat__contexto-fundo[hidden] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ik-chat__coluna-contexto {
        transition: none;
    }
}

/* ==========================================================================
   LISTA DE PEDIDOS — painel da loja (22/09/2026, MASTER §5.15)

   /restaurant-panel/order/list/{status}. Escopado em `.ik-pedidos`: o admin
   tem a própria lista de pedidos e não foi tocado.

   O que o template fazia e foi corrigido aqui:
   - o título era o slug cru ("all Pedidos") com PNG ao lado; agora é a chave
     que o menu lateral já usa para o mesmo filtro, e o total fica ao lado;
   - "Pronto para entrega" (handover) caía no ramo de erro e saía em vermelho;
     pendente e confirmado dividiam o mesmo cinza. Cada etapa tem agora a cor
     e o ícone Lucide do seu cartão na dashboard (§5.4, `.ikl--*`), então a
     lista e o topo do painel falam a mesma língua;
   - as duas ações eram contornos em amarelo e laranja lado a lado — dois
     acentos disputando a linha (§1). Viram botões neutros de 44px (§6.5),
     com `aria-label`;
   - "Não pago" em vermelho acusava erro em todo pedido de pagamento na
     entrega; vira etiqueta neutra. Pago segue verde, parcial âmbar;
   - o tipo do pedido usava `opacity-7`, que tira contraste sem medir; agora
     é --ik-text-muted (4,83:1 no branco, 4,63:1 no hover da linha);
   - o PNG de lista vazia sai (vetor onde cabe vetor, §5.6).

   Contrastes das etiquetas (texto sobre o fundo da própria etiqueta):
   violeta 6,15 · ciano 4,83 · índigo 6,88 · azul 5,87 · verde 6,80 ·
   âmbar 6,81 · vermelho 6,78 · rosa 7,03 · neutro 9,50.
   ========================================================================== */
.ik-pedidos__titulo,
.ik-itens__titulo,
.ik-categorias__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.ik-pedidos__filtro {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
}

.ik-pedidos__total,
.ik-itens__total,
.ik-categorias__total {
    min-width: 2rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    background-color: var(--ik-surface);
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
}

/* ---- barra: busca e exportar --------------------------------------------- */
.ik-pedidos__barra,
.ik-itens__barra,
.ik-categorias__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-pedidos__busca,
.ik-itens__busca,
.ik-categorias__busca {
    position: relative;
    display: flex;
    flex: 1 1 320px;
    max-width: 480px;
    gap: 0.5rem;
}

/* ícone por pseudo-elemento do contêiner, não background do input (§8.11) */
.ik-pedidos__busca::before,
.ik-itens__busca::before,
.ik-categorias__busca::before {
    content: "";
    position: absolute;
    left: 0.875rem;
    top: 0;
    width: 1rem;
    height: 44px;
    background-color: var(--ik-text-muted);
    -webkit-mask: var(--ik-icone-busca) center / 1rem 1rem no-repeat;
    mask: var(--ik-icone-busca) center / 1rem 1rem no-repeat;
    pointer-events: none;
}

.ik-pedidos__busca .form-control,
.ik-itens__busca .form-control,
.ik-categorias__busca .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding-left: 2.5rem;
}

.ik-pedidos__busca .btn,
.ik-pedidos__exportar,
.ik-itens__busca .btn,
.ik-itens__ferramentas .btn,
.ik-categorias__busca .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 1rem;
}

/* ---- tabela ---------------------------------------------------------------- */
.ik-pedidos__tabela td,
.ik-itens__tabela td,
.ik-categorias__tabela td {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    vertical-align: middle;
}

.ik-pedidos__apagado,
.ik-itens__apagado,
.ik-categorias__apagado {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

/* contagem do preparo na linha (§5.15): texto e ícone nas cores do tom — os
   mesmos três do cartão do detalhe (§5.18), pelas variáveis das etiquetas */
.ik-pedidos__preparo {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    color: var(--ik-status-texto);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.ik-pedidos__preparo > .ik-icone {
    width: 14px;
    height: 14px;
    color: var(--ik-status-texto);
}

.ik-pedidos__id {
    color: var(--ik-text);
    font-weight: 600;
}

.ik-pedidos__id:hover {
    color: var(--ik-accent-fill);
    text-decoration: underline;
}

.ik-pedidos__marcas {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.ik-pedidos__nome {
    color: var(--ik-text);
    font-weight: 500;
    text-transform: capitalize;
}

.ik-pedidos__valor {
    color: var(--ik-text);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* 18/10/2026 (MASTER §5.160): o `.badge` do template capitaliza cada palavra ("Estorno Em Andamento"); na coluna Reembolso o selo
   fica como a tradução escreve — sentence case, a voz da marca */
.ik-pedidos__reembolso .badge {
    text-transform: none;
}

.ik-pedidos__acoes,
.ik-itens__acoes {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.ik-pedidos__acao,
.ik-itens__acao {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

/* ---- etiqueta de status: cor e ícone da etapa ------------------------------ */
.ik-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 999px;
    background-color: var(--ik-status-fundo, #f4f4f5);
    color: var(--ik-status-texto, #3f3f46);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.ik-status::before {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--ik-status-icone) center / contain no-repeat;
    mask: var(--ik-status-icone) center / contain no-repeat;
}

.ik-status--neutro::before {
    display: none;
}

.ik-status--pendente {
    --ik-status-fundo: #fdf3e4;
    --ik-status-texto: #7a4a00;
    --ik-status-icone: var(--ik-icone-tempo);
}

.ik-status--confirmado {
    --ik-status-fundo: #f2ecfd;
    --ik-status-texto: #6d28d9;
    --ik-status-icone: var(--ik-icone-confirmado);
}

.ik-status--aceito {
    --ik-status-fundo: #f2ecfd;
    --ik-status-texto: #6d28d9;
    --ik-status-icone: var(--ik-icone-aceito);
}

.ik-status--preparando {
    --ik-status-fundo: #e6f6fa;
    --ik-status-texto: #0e7490;
    --ik-status-icone: var(--ik-icone-preparando);
}

.ik-status--pronto {
    --ik-status-fundo: #eeeefc;
    --ik-status-texto: #4338ca;
    --ik-status-icone: var(--ik-icone-pronto);
}

.ik-status--a-caminho {
    --ik-status-fundo: #eaf0fe;
    --ik-status-texto: #1d4ed8;
    --ik-status-icone: var(--ik-icone-retirado);
}

.ik-status--entregue {
    --ik-status-fundo: #e7f6f0;
    --ik-status-texto: #0a6045;
    --ik-status-icone: var(--ik-icone-entregues);
}

.ik-status--reembolso {
    --ik-status-fundo: #fdf3e4;
    --ik-status-texto: #7a4a00;
    --ik-status-icone: var(--ik-icone-reembolsados);
}

.ik-status--cancelado {
    --ik-status-fundo: #fdecf0;
    --ik-status-texto: #a3143a;
    --ik-status-icone: var(--ik-icone-cancelados);
}

.ik-status--falha {
    --ik-status-fundo: #fdeef5;
    --ik-status-texto: #9d174d;
    --ik-status-icone: var(--ik-icone-falha-pagamento);
}

/* iKero 23/09/2026 (MASTER §5.20): estado da ASSINATURA (pedidos por assinatura
   da loja). O template pintava pausada/expirada/cancelada de laranja
   (`badge-soft-primary`) — laranja é marca, não status (§1). Pares já medidos
   em §2.3: verde 7,58:1, âmbar 7,48:1, neutro 10,4:1; cancelada reusa
   `.ik-status--cancelado`. */
.ik-status--ativa {
    --ik-status-fundo: #e7f6f0;
    --ik-status-texto: #0a6045;
    --ik-status-icone: var(--ik-icone-check);
}

.ik-status--pausada {
    --ik-status-fundo: #fdf3e4;
    --ik-status-texto: #7a4a00;
    --ik-status-icone: var(--ik-icone-tempo);
}

.ik-status--expirada {
    --ik-status-fundo: #f4f4f5;
    --ik-status-texto: #3f3f46;
    --ik-status-icone: var(--ik-icone-calendario);
}

/* ---- lista vazia ---------------------------------------------------------- */
.ik-pedidos__vazio,
.ik-itens__vazio,
.ik-categorias__vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.ik-pedidos__vazio-icone,
.ik-itens__vazio-icone,
.ik-categorias__vazio-icone {
    width: 56px;
    height: 56px;
    margin-bottom: 0.75rem;
    background-color: var(--ik-text-subtle);
    -webkit-mask: var(--ik-icone-todos) center / contain no-repeat;
    mask: var(--ik-icone-todos) center / contain no-repeat;
}

.ik-pedidos__vazio-icone--busca,
.ik-itens__vazio-icone--busca,
.ik-categorias__vazio-icone--busca {
    -webkit-mask-image: var(--ik-icone-busca-sem-resultado);
    mask-image: var(--ik-icone-busca-sem-resultado);
}

.ik-pedidos__vazio-titulo,
.ik-itens__vazio-titulo,
.ik-categorias__vazio-titulo {
    margin: 0;
    color: var(--ik-text-muted);
    font-weight: 500;
}

/* homologação em produção de 23/09/2026: o template capitaliza
   `.page-header-title` ("Todos Os Pedidos"); caixa de frase (marca-voz §3.3) */
.ik-pedidos .page-header-title,
.ik-itens .page-header-title,
.ik-categorias .page-header-title,
.ik-reels .page-header-title, /* 14/10/2026: "Lista De Reels" */
.ik-avauto .page-header-title,
.ik-avauto .card-title { /* 14/10/2026: "Avisos Automáticos", "Últimos Envios" (MASTER §5.195) */
    text-transform: none;
}

@media (max-width: 575.98px) {
    .ik-pedidos__busca,
    .ik-itens__busca,
    .ik-categorias__busca {
        max-width: none;
    }
}

/* ==========================================================================
   DETALHES DO PEDIDO — painel da loja (22/09/2026, MASTER §5.16)

   /restaurant-panel/order/details/{id}. Escopado em `.ik-pedido` (singular;
   a lista é `.ik-pedidos`). Reaproveita a etiqueta `.ik-status` e o botão de
   44px `.ik-pedidos__acao` da lista (§5.15).

   O que o template fazia e foi corrigido aqui:
   - três acentos laranja na primeira dobra (setas de navegação, "Imprimir
     fatura" preenchido e "Mostrar locais no mapa"); a primária da tela é a
     mudança de etapa, no topo da coluna direita — o resto é secundário (§1);
   - o resumo era uma pilha de "Rótulo : valor" alinhada à direita, em Title
     Case; vira grade de rótulo apagado sobre valor forte;
   - "Talheres: Não" e "Não pago" em vermelho acusavam erro onde não há;
   - na conta, rótulo em negrito e valor apagado — a hierarquia invertida;
   - todo cartão da direita usava o mesmo ícone de pessoa e o de comprovante
     ficava vazio, sem dizer por quê.
   ========================================================================== */
.ik-pedido .page-header-title,
.ik-pedido .card-title {
    text-transform: none;
}

.ik-pedido__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ik-pedido__topo .page-header-title {
    margin: 0;
}

.ik-pedido__navegacao {
    display: flex;
    gap: 0.5rem;
}

/* ---- cabeçalho do cartão principal ----------------------------------------- */
.ik-pedido__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
}

.ik-pedido__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ik-pedido__numero {
    margin: 0 0.25rem 0 0;
    color: var(--ik-text);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.011em;
}

.ik-pedido__data {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0.5rem 0 0;
    color: var(--ik-text-muted);
}

.ik-pedido__data > span {
    color: var(--ik-text);
    font-weight: 500;
}

.ik-pedido__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ik-pedido__botao {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}

.ik-pedido__link {
    color: var(--ik-accent-fill);
    font-weight: 500;
}

.ik-pedido__link:hover {
    color: var(--ik-accent-hover);
    text-decoration: underline;
}

/* ---- resumo: rótulo apagado sobre valor forte ------------------------------ */
.ik-pedido__resumo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--ik-border);
}

.ik-pedido__resumo dt {
    margin-bottom: 0.25rem;
    color: var(--ik-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.ik-pedido__resumo dd {
    margin: 0;
    color: var(--ik-text);
    font-weight: 600;
}

/* ---- recados (observação do cliente, instrução, troco) ----------------------
   Neutro por padrão; com `.ik-status--pendente` herda o âmbar de aviso da
   etiqueta (§2.3) pelas variáveis dela, sem repetir hex. */
.ik-pedido__recados {
    display: grid;
    gap: 0.5rem;
    padding: 0 1.5rem 1.25rem;
}

.ik-pedido__recado {
    padding: 0.75rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-status-fundo, var(--ik-surface-2));
    color: var(--ik-status-texto, var(--ik-text));
    line-height: 1.5;
}

.ik-pedido__recado.ik-status--pendente {
    border-color: transparent;
}

/* ---- itens ----------------------------------------------------------------- */
.ik-pedido__itens .ik-pedido__col-num {
    width: 3rem;
    color: var(--ik-text-muted);
}

.ik-pedido__item-nome {
    display: block;
    color: var(--ik-text);
    font-weight: 600;
}

.ik-pedido__variacao-nome {
    display: block;
    margin-top: 0.375rem;
    color: var(--ik-text);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ik-pedido__variacao,
.ik-pedido__quantidade {
    display: block;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    white-space: normal;
}

.ik-pedido__quantidade {
    margin-top: 0.375rem;
}

.ik-pedido__preco {
    color: var(--ik-text);
    font-weight: 600;
}

.ik-pedido__vazio {
    color: var(--ik-text-muted);
}

/* ---- conta: rótulo normal, número à direita -------------------------------- */
.ik-pedido__conta,
.ik-pedido__rodape {
    display: flex;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem 0;
}

.ik-pedido__totais,
.ik-pedido__total {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 2rem;
    width: 100%;
    max-width: 24rem;
    margin: 0;
}

.ik-pedido__totais dt,
.ik-pedido__totais dd {
    margin: 0;
    color: var(--ik-text-muted);
    font-weight: 400;
}

.ik-pedido__totais dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ik-pedido__totais .ik-pedido__totais-forte {
    color: var(--ik-text);
    font-weight: 600;
}

.ik-pedido__totais .ik-pedido__totais-pagamento {
    color: var(--ik-text);
}

.ik-pedido__dica {
    color: var(--ik-text-muted);
    font-size: 0.875rem;
    vertical-align: -0.125em;
}

.ik-pedido__rodape {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.5rem;
    background-color: var(--ik-surface);
    border-bottom-left-radius: var(--ik-radius-lg);
    border-bottom-right-radius: var(--ik-radius-lg);
}

.ik-pedido__rodape-troco {
    flex: 1 1 16rem;
    max-width: 24rem;
}

.ik-pedido__total {
    align-items: baseline;
    margin-left: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ik-border);
}

.ik-pedido__total dt,
.ik-pedido__total dd {
    margin: 0;
    color: var(--ik-text);
    font-size: 1.125rem;
    font-weight: 700;
}

.ik-pedido__total dd {
    text-align: right;
    white-space: nowrap;
}

/* ---- cartões da coluna direita --------------------------------------------- */
.ik-pedido__cartao .card-body {
    padding: 1.25rem;
}

.ik-pedido__cartao-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.011em;
}

.ik-pedido__cartao-titulo > i {
    color: var(--ik-text-muted);
    font-size: 1.125rem;
}

.ik-pedido__acoes-status {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.75rem;
}

/* `vendor.css:498` dá `width: calc(50% - 8px)` a todo `.order-btn-wraper > a`:
   dentro da grade isso deixava cada botão com metade da coluna e o rótulo
   quebrado em duas linhas. A grade decide a largura — um botão ocupa a
   linha inteira, dois dividem ao meio. O capitalize do template virava
   "Aceitar Pedido". */
.ik-pedido .ik-pedido__acoes-status > .btn {
    width: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    text-transform: none;
    white-space: nowrap;
}

/* todo botão dos cartões tem 44px (§6.5): "Mostrar locais no mapa" nascia
   com 41px e o "Adicionar" do comprovante, `btn-sm`, com 31px */
.ik-pedido__acoes-status .btn,
.ik-pedido__cartao .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
}

.ik-pedido__cartao-titulo .btn {
    display: inline-flex;
}

.ik-pedido__valor {
    color: var(--ik-text);
    font-weight: 600;
}

.ik-pedido__pessoa {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ik-pedido__avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    object-fit: cover;
}

.ik-pedido__pessoa-dados {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    color: var(--ik-text-muted);
}

.ik-pedido__pessoa-nome {
    color: var(--ik-text);
    font-weight: 600;
}

/* contato e endereço em texto sublinhado, não em laranja: o acento da
   coluna é a ação de etapa, e dez links laranja disputariam com ela */
.ik-pedido__pessoa-dados a,
.ik-pedido__campos a,
.ik-pedido__endereco {
    color: var(--ik-text);
    text-decoration: underline;
    text-decoration-color: var(--ik-border-strong);
    text-underline-offset: 3px;
}

.ik-pedido__pessoa-dados a:hover,
.ik-pedido__campos a:hover,
a.ik-pedido__endereco:hover {
    color: var(--ik-accent-fill);
    text-decoration-color: currentColor;
}

.ik-pedido__secao {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ik-border);
}

.ik-pedido__rotulo {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ik-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.ik-pedido__endereco {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.375rem;
}

span.ik-pedido__endereco {
    text-decoration: none;
}

.ik-pedido__endereco > i {
    margin-top: 0.1875rem;
    color: var(--ik-text-muted);
}

.ik-pedido__campos {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.ik-pedido__campos dt {
    color: var(--ik-text-muted);
    font-weight: 400;
}

.ik-pedido__campos dd {
    margin: 0;
    color: var(--ik-text);
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .ik-pedido__cabecalho,
    .ik-pedido__resumo,
    .ik-pedido__recados,
    .ik-pedido__conta,
    .ik-pedido__rodape {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ik-pedido__acoes,
    .ik-pedido__botao {
        width: 100%;
    }

    .ik-pedido__botao {
        justify-content: center;
    }
}

/* ==========================================================================
   DIÁLOGOS DO DETALHE DO PEDIDO — painel da loja (22/09/2026, MASTER §5.17)

   O SweetAlert2 7.33 do template com `customClass: 'ik-dialogo …'` e
   `buttonsStyling: false`. Base comum em `.ik-dialogo`; cada diálogo
   acrescenta a sua classe: `.ik-preparo` (tempo de preparo, no aceite) e
   `.ik-confirmar-status` (pronto para entrega / entregue / concluído).
   A lógica de cada botão de etapa não mudou — só a apresentação.

   ⚠️ O SweetAlert injeta o próprio CSS DEPOIS do tema, com a mesma
   especificidade, e escreve estilo inline (`display: flex` nas ações,
   margens negativas no aviso de validação). Daí o prefixo
   `.swal2-popup.ik-dialogo` e o `!important` só nesses dois pontos.

   ⚠️ As referências pediam #fa5420 com texto branco no botão e no atalho
   escolhido — 3,31:1, reprova o AA (§2.1). Os dois usam --ik-accent-fill
   (#d13605, mesmo matiz, 4,95:1). O disco do ícone segue o aviso de novo
   pedido (§5.13): --ik-accent-soft com o traço em --ik-accent-em-soft.
   ========================================================================== */
.swal2-popup.ik-dialogo {
    max-width: calc(100vw - 32px);
    padding: 2.5rem 2.5rem 2rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    box-shadow: var(--ik-shadow-md);
}

.swal2-popup.ik-dialogo .swal2-header {
    padding: 0;
}

.swal2-popup.ik-dialogo .swal2-content {
    padding: 0;
    color: var(--ik-text);
    font-size: 0.875rem;
}

/* fechar: 40×40 no canto, X do Lucide, como no aviso de novo pedido */
.swal2-popup.ik-dialogo .swal2-close {
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ik-radius);
    color: var(--ik-text-muted);
    font-family: inherit;
    font-size: 1.125rem;
    line-height: 1;
    transition: color var(--ik-transicao), background-color var(--ik-transicao);
}

.swal2-popup.ik-dialogo .swal2-close:hover {
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
}

.swal2-popup.ik-dialogo .swal2-close:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* disco: o desenho vem de `--ik-dialogo-icone`, posto no próprio span */
.ik-dialogo__disco {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background-color: var(--ik-accent-soft);
}

.ik-dialogo__icone {
    width: 36px;
    height: 36px;
    background-color: var(--ik-accent-em-soft);
    -webkit-mask: var(--ik-dialogo-icone, var(--ik-icone-tempo)) center / contain no-repeat;
    mask: var(--ik-dialogo-icone, var(--ik-icone-tempo)) center / contain no-repeat;
}

/* disco neutro (22/09/2026): confirmação genérica do admin, sem etapa de destino
   para ilustrar — o "i" em cinza; laranja aqui viraria aviso (§1.1) */
.ik-dialogo__disco--neutro {
    background-color: var(--ik-surface-2);
}

.ik-dialogo__disco--neutro .ik-dialogo__icone {
    background-color: var(--ik-text-muted);
}

.ik-dialogo__titulo {
    margin: 0 0 0.5rem;
    color: var(--ik-text);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.011em;
    text-align: center;
}

.ik-dialogo__texto {
    max-width: 26rem;
    margin: 0 auto 1.5rem;
    color: var(--ik-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: center;
}

/* bloco informativo: neutro, sem cor de status */
.ik-dialogo__info {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: left;
}

.ik-dialogo__info > .ik-icone {
    flex-shrink: 0;
    margin-top: 0.1875rem;
    color: var(--ik-text-muted);
}

/* validação: cores de erro da etiqueta `.ik-status--cancelado` (§2.3), pelas
   variáveis dela — a classe é posta no aviso pelo JS da tela.
   Margem com !important: o SweetAlert escreve margens negativas inline para o
   aviso "sangrar" até as bordas do diálogo */
.swal2-popup.ik-dialogo .swal2-validation-message {
    justify-content: flex-start;
    margin: 0.75rem 0 0 !important;
    padding: 0.625rem 0.75rem;
    border-radius: var(--ik-radius);
    background: var(--ik-status-fundo, var(--ik-surface-2));
    color: var(--ik-status-texto, var(--ik-text));
    font-size: 0.875rem;
    font-weight: 500;
}

.swal2-popup.ik-dialogo .swal2-validation-message::before {
    display: none;
}

/* ---- ações ------------------------------------------------------------------
   `display` com !important: o SweetAlert escreve `display: flex` inline */
.swal2-popup.ik-dialogo .swal2-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    margin: 1.75rem 0 0;
}

/* 09/10/2026 (MASTER §5.17): aviso de um botão só — uma coluna, centralizada */
.swal2-popup.ik-dialogo--aviso .swal2-actions {
    grid-template-columns: minmax(0, 15rem);
    justify-content: center;
}

.swal2-popup.ik-dialogo .swal2-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
}

/* cancelar: cinza claro chapado, sem borda — variante dos diálogos (§5.17) */
.swal2-popup.ik-dialogo .ik-dialogo__cancelar {
    border: 1px solid transparent;
    background-color: var(--ik-bg);
    color: var(--ik-text);
}

.swal2-popup.ik-dialogo .ik-dialogo__cancelar:hover {
    background-color: var(--ik-border);
    color: var(--ik-text);
}

/* enviando: o fechar sai do alcance, os dois botões já vêm desabilitados */
.swal2-popup.ik-dialogo.is-enviando .swal2-close {
    pointer-events: none;
    opacity: 0.4;
}

/* carregando não é desabilitado: mantém a cor da primária (o `:disabled` do
   tema clarearia o botão e pareceria que a ação foi recusada) */
.swal2-popup.ik-dialogo .ik-dialogo__confirmar[aria-busy="true"] {
    border-color: var(--ik-accent-fill);
    background-color: var(--ik-accent-fill);
    color: #ffffff;
    opacity: 1;
    cursor: progress;
}

/* ---- tempo de preparo ------------------------------------------------------- */
.swal2-popup.ik-preparo .swal2-actions {
    grid-template-columns: 1.15fr 1fr;
}

.ik-preparo__atalhos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

.ik-preparo__atalho {
    min-height: 44px;
    padding: 0 0.5rem;
    border: 1px solid var(--ik-border-strong);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--ik-transicao), background-color var(--ik-transicao), border-color var(--ik-transicao);
}

.ik-preparo__atalho:hover {
    border-color: var(--ik-text-subtle);
    background-color: var(--ik-surface-2);
}

.ik-preparo__atalho.is-ativo {
    border-color: var(--ik-accent-fill);
    background-color: var(--ik-accent-fill);
    color: #ffffff;
}

.ik-preparo__atalho:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-preparo__rotulo {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
}

.swal2-popup.ik-preparo .ik-preparo__campo {
    height: 52px;
    color: var(--ik-text);
    font-size: 1.125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* o campo leva `.ik-status--cancelado`, que só define variáveis: a borda
   vermelha de erro vem delas, sem hex repetido */
.swal2-popup.ik-preparo .ik-preparo__campo[aria-invalid="true"],
.swal2-popup.ik-preparo .ik-preparo__campo[aria-invalid="true"]:focus {
    border-color: var(--ik-status-texto);
}

@media (max-width: 575.98px) {
    .swal2-popup.ik-dialogo {
        padding: 2rem 1.25rem 1.25rem;
    }

    .ik-preparo__atalhos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .swal2-popup.ik-dialogo .swal2-actions,
    .swal2-popup.ik-preparo .swal2-actions {
        grid-template-columns: 1fr;
    }
    /* empilhado, a ação principal vem primeiro mesmo quando o HTML a põe depois */
    .swal2-popup.ik-dialogo .ik-dialogo__confirmar {
        order: -1;
    }
}

/* ---- confirmar coleta (PIN do entregador) — MASTER §5.17 ---------------------
   Mesma base `.ik-dialogo`/`.ik-confirmar-status`. O PIN são 4 caixas de 1
   dígito (2ª referência, 22/09/2026): neutras em repouso; a caixa em foco ganha
   o laranja — borda + fundo tênue + o anel de foco colado nela (offset 0), e não
   o halo largo do campo comum, que pesava. Erro: borda das cores de
   `.ik-status--cancelado` (a classe só define variáveis). */
.ik-coleta__pin {
    width: fit-content;
    margin: 0 auto;
}

.ik-coleta__digitos {
    display: grid;
    grid-template-columns: repeat(4, 64px);
    gap: 0.75rem;
}

.swal2-popup.ik-coleta .ik-coleta__digito {
    width: 64px;
    height: 72px;
    padding: 0;
    border: 1px solid var(--ik-border-strong);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    box-shadow: none;
    color: var(--ik-text);
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    caret-color: var(--ik-accent);
    transition: border-color var(--ik-transicao), background-color var(--ik-transicao);
}

.swal2-popup.ik-coleta .ik-coleta__digito:hover {
    border-color: var(--ik-text-subtle);
}

.swal2-popup.ik-coleta .ik-coleta__digito:focus,
.swal2-popup.ik-coleta .ik-coleta__digito:focus-visible {
    border-color: var(--ik-accent);
    background-color: var(--ik-accent-soft);
    box-shadow: none;
    outline: 2px solid var(--ik-accent);
    outline-offset: 0;
}

.swal2-popup.ik-coleta .ik-coleta__digito[aria-invalid="true"] {
    border-color: var(--ik-status-texto);
}

@media (max-width: 575.98px) {
    .ik-coleta__digitos {
        grid-template-columns: repeat(4, 56px);
        gap: 0.625rem;
    }

    .swal2-popup.ik-coleta .ik-coleta__digito {
        width: 56px;
        height: 64px;
        font-size: 1.5rem;
    }
}

/* bloco informativo abaixo das caixas: o `.ik-dialogo__info` de sempre, neutro */
.ik-coleta__info {
    margin-top: 1.5rem;
}

/* ---- cancelar pedido — MASTER §5.17 ------------------------------------------
   Mesma base `.ik-dialogo`. Disco e ação principal nas cores de
   `.ik-status--cancelado` (a etapa de destino), pelas variáveis: o laranja não
   pode dizer "cancelar" (§1.1). Branco sobre --ik-status-texto: 7,7:1. */
.ik-dialogo__disco.ik-status--cancelado {
    background-color: var(--ik-status-fundo);
}

.ik-dialogo__disco.ik-status--cancelado .ik-dialogo__icone {
    background-color: var(--ik-status-texto);
}

.swal2-popup.ik-dialogo .ik-dialogo__confirmar--perigo,
.swal2-popup.ik-dialogo .ik-dialogo__confirmar--perigo[aria-busy="true"] {
    border: 1px solid var(--ik-status-texto);
    background-color: var(--ik-status-texto);
    color: #ffffff;
}

.swal2-popup.ik-dialogo .ik-dialogo__confirmar--perigo:hover,
.swal2-popup.ik-dialogo .ik-dialogo__confirmar--perigo:focus {
    background-color: color-mix(in srgb, var(--ik-status-texto) 86%, #000000);
    color: #ffffff;
}

.swal2-popup.ik-dialogo .ik-dialogo__confirmar--perigo:focus-visible {
    outline: 2px solid var(--ik-status-texto);
    outline-offset: 2px;
}

.ik-cancelar__campos {
    text-align: left;
}

.swal2-popup.ik-cancelar .ik-cancelar__campo {
    margin-bottom: 1rem;
    color: var(--ik-text);
    font-size: 0.9375rem;
}

.swal2-popup.ik-cancelar select.ik-cancelar__campo {
    height: 48px;
}

.swal2-popup.ik-cancelar textarea.ik-cancelar__campo {
    margin-bottom: 0;
    resize: vertical;
}

/* o select leva `.ik-status--cancelado`, que só define variáveis: borda de erro */
.swal2-popup.ik-cancelar .ik-cancelar__campo[aria-invalid="true"] {
    border-color: var(--ik-status-texto);
}

.swal2-popup.ik-cancelar .ik-cancelar__campo[aria-invalid="true"]:focus {
    border-color: var(--ik-status-texto);
    box-shadow: 0 0 0 3px var(--ik-status-fundo);
    outline: 2px solid var(--ik-status-texto);
    outline-offset: 0;
}

/* ---- avaliações de clientes do painel da loja (22/09/2026) --------------------
   Nota com estrela nas cores de `.ik-status--pendente` (âmbar, pelas variáveis) —
   a estrela laranja do template virava revestimento de marca. Selo de "verificado"
   neutro. O nome do item cabe inteiro até o fim da coluna, com reticências. */
/* admin: busca e filtros numa linha que quebra; links em texto (laranja só na ação) */
.ik-avaliacoes__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.ik-avaliacoes__busca {
    flex: 1 1 18rem;
    max-width: 24rem;
}

.ik-avaliacoes__filtro {
    flex: 0 1 12rem;
    min-width: 9rem;
    height: 45px;
}

.ik-avaliacoes__filtros .select2-container {
    flex: 0 1 14rem;
    min-width: 10rem;
}

/* o select2 do template capitaliza o texto ("Todas As Lojas") */
.ik-avaliacoes .select2-selection__rendered,
.ik-avaliacoes .select2-selection__placeholder {
    text-transform: none;
}

/* iKero 30/09/2026: também no bônus e nos incentivos do entregador (o link saía laranja fora de .ik-avaliacoes) */
.ik-avaliacoes a.ik-avaliacoes__link,
.ik-bonus-dm a.ik-avaliacoes__link,
.ik-incentivos a.ik-avaliacoes__link {
    color: var(--ik-text);
    font-weight: 500;
}

.ik-avaliacoes a.ik-avaliacoes__link:hover,
.ik-bonus-dm a.ik-avaliacoes__link:hover,
.ik-incentivos a.ik-avaliacoes__link:hover {
    color: var(--ik-text);
    text-decoration: underline;
}

/* busca: largura para o texto de exemplo inteiro (o template cortava em "…comi") */
.ik-avaliacoes .vendor--search {
    flex: 0 1 22rem;
    min-width: 0;
}

.ik-avaliacoes .vendor--search .input--group {
    width: 100%;
}

/* o template capitaliza o título e os selos ("Avaliações De Clientes", "Sem Resposta");
   no título, pelo `.card-header-icon ~ span` do theme.minc619.css */
.ik-avaliacoes .page-header-title,
.ik-avaliacoes .page-header-title .card-header-icon ~ span,
.ik-avaliacoes .badge {
    text-transform: none;
}

/* ---- avaliações: referência do proprietário (23/09/2026) ----------------------
   Topo com disco de estrela e subtítulo; resumo + cartão de apoio lado a lado;
   busca com ícone dentro do campo; ações com ícone. Âmbar só nas estrelas (vars
   de `.ik-status--pendente`), verde só em "Respondida". O cartão de apoio é
   ilustrado em índigo (ver .ik-avaliacoes__apoio): a referência o pintava de
   verde, cor de status (MASTER §1.1). */
.ik-avaliacoes__topo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ik-avaliacoes__topo-disco {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-status-fundo);
    color: var(--ik-status-texto);
    font-size: 1.5rem;
}

.ik-avaliacoes__topo .page-header-title {
    margin: 0;
}

.ik-avaliacoes__subtitulo {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
}

.ik-avaliacoes__linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: 1rem;
    margin-bottom: 1rem;
}

.ik-avaliacoes__linha > .card {
    margin-bottom: 0;
}

.ik-avaliacoes__rotulo {
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.ik-avaliacoes__resumo .ik-avaliacoes__media {
    padding-right: 3rem;
    border-right: 1px solid var(--ik-border);
}

.ik-avaliacoes__distribuicao-bloco {
    display: grid;
    gap: 0.75rem;
}

.ik-avaliacoes__dist-nota > i.ik-status--pendente {
    color: var(--ik-status-texto);
}

.ik-avaliacoes__apoio {
    /* cartão ilustrado (23/09/2026): a anatomia dos KPIs (§5.4) — gradiente 135°,
       borda do tom e marca-d'água por máscara. Índigo: não é status nesta tela, e
       verde (Respondida) e âmbar (estrelas) já têm dono aqui */
    --ik-kpi-icone: var(--ik-icone-citacao);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f8f8fe;
    --ik-kpi-borda: #dadaf7;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ik-kpi-borda);
    border-radius: var(--ik-radius-lg);
    background: linear-gradient(135deg, var(--ik-kpi-claro) 0%, var(--ik-kpi-tenue) 100%);
}

.ik-avaliacoes__apoio::after {
    content: "";
    position: absolute;
    inset-inline-end: -18px;
    bottom: -22px;
    width: 150px;
    height: 150px;
    background-color: var(--ik-kpi-forte);
    opacity: 0.14;
    transform: rotate(-8deg);
    pointer-events: none;
    -webkit-mask-image: var(--ik-kpi-icone);
    mask-image: var(--ik-kpi-icone);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.ik-avaliacoes__apoio .card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding-inline-end: 5.5rem;
    background: transparent;
}

.ik-avaliacoes__apoio-disco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background-color: var(--ik-surface);
    box-shadow: var(--ik-shadow-md);
    color: var(--ik-kpi-forte);
    font-size: 1.25rem;
}

/* fileira decorativa de estrelas: âmbar só nas estrelas, como no resto da tela */
.ik-avaliacoes__apoio-estrelas {
    display: inline-flex;
    gap: 0.125rem;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

.ik-avaliacoes__apoio-estrelas .ik-icone {
    color: var(--ik-status-texto);
}

.ik-avaliacoes__apoio-titulo {
    margin: 0.25rem 0 0;
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.ik-avaliacoes__apoio-texto {
    margin: 0;
    color: #52525b;                 /* o rótulo dos KPIs: 6,4:1 sobre o gradiente (o muted daria 4,2) */
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ---- filtro das avaliações: folha lateral (referência de 23/09/2026) ------------
   Seções em faixa sutil; opções brancas com borda; a escolha ativa leva borda
   --ik-accent e fundo --ik-accent-soft (texto em --ik-accent-em-soft, 4,92:1).
   Marcadores próprios (o input fica visualmente oculto, mas é ele que recebe o
   foco e vai no formulário). Laranja só no ativo e no "Aplicar filtros". */
/* a folha do template (.custom-offcanvas, abre da direita): cabeçalho e rodapé fixos,
   só o meio rola */
.custom-offcanvas.ik-filtro {
    display: flex;
    flex-direction: column;
    background-color: var(--ik-surface);
    box-shadow: var(--ik-shadow-md);
}

.ik-filtro__folha {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 0;
}

.ik-filtro__topo,
.ik-filtro .ik-filtro__rodape {
    flex-shrink: 0;
}

.ik-filtro__topo {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
}

.ik-filtro__disco {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
    font-size: 1.5rem;
}

.ik-filtro__cabecalho {
    flex: 1 1 auto;
    min-width: 0;
}

.ik-filtro__titulo {
    margin: 0;
    color: var(--ik-text);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.ik-filtro__subtitulo {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.9375rem;
}

.ik-filtro__fechar,
.ik-resposta__fechar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--ik-surface-2);
    color: var(--ik-text-muted);
    font-size: 1.125rem;
    transition: color var(--ik-transicao), background-color var(--ik-transicao);
}

.ik-filtro__fechar:hover,
.ik-resposta__fechar:hover {
    background-color: var(--ik-border);
    color: var(--ik-text);
}

.ik-filtro__corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    padding: 0.5rem 1.5rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ik-filtro__secao {
    padding: 1.25rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface-2);
}

.ik-filtro__secao-topo {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.ik-filtro__secao-topo > .ik-icone {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--ik-text);
    font-size: 1.375rem;
}

.ik-filtro__secao-titulo {
    margin: 0;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-filtro__secao-ajuda {
    margin: 0.125rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-filtro__periodo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.9375rem;
    text-align: left;
    transition: border-color var(--ik-transicao);
}

.ik-filtro__periodo:hover {
    border-color: var(--ik-border-strong);
}

.ik-filtro__periodo > .ik-icone {
    flex-shrink: 0;
    color: var(--ik-text-muted);
    font-size: 1.125rem;
}

.ik-filtro__periodo-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.ik-filtro__periodo-seta {
    transition: transform var(--ik-transicao);
}

.ik-filtro__periodo[aria-expanded="true"] {
    border-color: var(--ik-accent);
}

.ik-filtro__periodo[aria-expanded="true"] .ik-filtro__periodo-seta {
    transform: rotate(180deg);
}

/* calendário do período: o flatpickr do painel, embutido na folha e redesenhado com
   os tokens (o tema do template pintava dia de hoje, intervalo e hover de laranja
   cheio). Pontas do intervalo em --ik-accent-fill com texto branco (4,9:1); o meio em
   --ik-accent-soft com --ik-text; hoje só com anel; dia futuro bloqueado. */
.ik-filtro__calendario {
    margin-top: 0.5rem;
    padding: 0.75rem 0.75rem 0.5rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
}

.ik-filtro__calendario[hidden] {
    display: none;
}

.ik-filtro__calendario-dica {
    margin: 0.5rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    text-align: center;
}

.ik-filtro__calendario .flatpickr-calendar.inline {
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.ik-filtro__calendario .flatpickr-calendar::before,
.ik-filtro__calendario .flatpickr-calendar::after {
    display: none;
}

.ik-filtro__calendario .flatpickr-innerContainer,
.ik-filtro__calendario .flatpickr-rContainer,
.ik-filtro__calendario .flatpickr-weekdays,
.ik-filtro__calendario .flatpickr-days,
.ik-filtro__calendario .dayContainer {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-months {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-months .flatpickr-month {
    flex: 1 1 auto;
    height: 40px;
    color: var(--ik-text);
    fill: currentColor;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-current-month {
    left: 0;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-current-month .cur-month,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-current-month input.cur-year {
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-current-month .cur-month {
    margin-inline-end: 0.375rem;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover {
    background: transparent;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-prev-month,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-next-month {
    display: inline-flex;
    position: static;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    color: var(--ik-text-muted);
    font-size: 1.125rem;
    line-height: 1;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-prev-month:hover,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-next-month:hover {
    color: var(--ik-text);
    background-color: var(--ik-surface-2);
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-prev-month.flatpickr-disabled,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-next-month.flatpickr-disabled {
    display: inline-flex;
    visibility: hidden;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-weekday {
    color: var(--ik-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day {
    flex-basis: 14.2857%;
    max-width: none;
    height: 36px;
    margin: 4px 0;
    border: 1px solid transparent;
    border-radius: var(--ik-radius);
    box-shadow: none;
    background-color: transparent;
    color: var(--ik-text);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    line-height: 34px;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day:hover,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day:focus {
    border-color: var(--ik-border);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: -2px;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.today {
    border-color: var(--ik-border-strong);
    background-color: transparent;
    color: var(--ik-text);
    font-weight: 600;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.prevMonthDay,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: var(--ik-text-subtle);
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
    border-color: transparent;
    background-color: transparent;
    color: var(--ik-border-strong);
    cursor: not-allowed;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.inRange,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.inRange:hover,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.inRange.prevMonthDay,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.inRange.nextMonthDay {
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--ik-accent-soft);
    color: var(--ik-text);
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.selected,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.startRange,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.endRange,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.selected:hover,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.startRange:hover,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.endRange:hover,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.selected.inRange,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.startRange.inRange,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.endRange.inRange,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.selected.prevMonthDay,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.selected.nextMonthDay {
    border-color: var(--ik-accent-fill);
    box-shadow: none;
    background-color: var(--ik-accent-fill);
    color: #fff;
    font-weight: 600;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.startRange:not(.endRange) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.endRange:not(.startRange) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* passar o mouse enquanto escolhe a data final: o intervalo provisório */
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.inRange.startRange,
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.inRange.endRange {
    border-radius: var(--ik-radius);
}

/* visto em tela em 24/09/2026 ("muito embolado"): a faixa do intervalo cobria a
   célula inteira com 2 px entre linhas e o mês virava um bloco. Cada semana é uma
   faixa própria — 36 px de altura, 8 px de respiro entre linhas (regra do dia acima)
   e pontas arredondadas no domingo e no sábado */
.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.inRange:nth-child(7n+1) {
    border-start-start-radius: var(--ik-radius);
    border-end-start-radius: var(--ik-radius);
}

.ik-filtro__calendario .flatpickr-calendar .flatpickr-day.inRange:nth-child(7n) {
    border-start-end-radius: var(--ik-radius);
    border-end-end-radius: var(--ik-radius);
}

.ik-filtro__atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ik-filtro__atalho {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 0 0.875rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: border-color var(--ik-transicao), background-color var(--ik-transicao);
}

.ik-filtro__atalho:hover {
    border-color: var(--ik-border-strong);
}

.ik-filtro__atalho[aria-pressed="true"] {
    border-color: var(--ik-accent);
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
}

.ik-filtro__lista {
    display: grid;
    gap: 0.5rem;
}

.ik-filtro__lista--dupla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ik-filtro__opcao {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 52px;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    cursor: pointer;
    transition: border-color var(--ik-transicao), background-color var(--ik-transicao);
}

.ik-filtro__opcao--topo {
    align-items: flex-start;
}

.ik-filtro__opcao:hover {
    border-color: var(--ik-border-strong);
}

.ik-filtro__opcao:has(.ik-filtro__marcador:checked) {
    border-color: var(--ik-accent);
    background-color: var(--ik-accent-soft);
}

/* o input continua no fluxo do teclado e do formulário; só não aparece */
.ik-filtro__marcador {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ik-filtro__radio,
.ik-filtro__caixa {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--ik-border-strong);
    background-color: var(--ik-surface);
    transition: border-color var(--ik-transicao), background-color var(--ik-transicao);
}

.ik-filtro__radio {
    border-radius: 999px;
}

.ik-filtro__caixa {
    margin-top: 0.125rem;
    border-radius: 6px;
}

.ik-filtro__marcador:checked + .ik-filtro__radio {
    border-color: var(--ik-accent-fill);
}

.ik-filtro__marcador:checked + .ik-filtro__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background-color: var(--ik-accent-fill);
}

.ik-filtro__marcador:checked + .ik-filtro__caixa {
    border-color: var(--ik-accent-fill);
    background-color: var(--ik-accent-fill);
}

.ik-filtro__marcador:checked + .ik-filtro__caixa::after {
    content: "";
    position: absolute;
    inset: 1px;
    background-color: #fff;
    -webkit-mask-image: var(--ik-icone-check);
    mask-image: var(--ik-icone-check);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.ik-filtro__marcador:focus-visible + .ik-filtro__radio,
.ik-filtro__marcador:focus-visible + .ik-filtro__caixa {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-filtro__estrelas {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.25rem;
    color: var(--ik-status-texto);
    font-size: 1.125rem;
}

/* estrela que não conta: decorativa, o texto ao lado leva o sentido */
.ik-filtro__estrelas .ik-filtro__estrela--apagada {
    color: var(--ik-border-strong);
}

.ik-filtro__opcao-bloco {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ik-filtro__opcao-texto {
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 500;
}

.ik-filtro__opcao-ajuda {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ik-filtro .ik-filtro__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--ik-border);
}

.ik-filtro__rodape > * {
    margin: 0;
}

.ik-filtro__limpar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--ik-text-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color var(--ik-transicao);
}

.ik-filtro__limpar:hover {
    color: var(--ik-text);
}

.ik-filtro__limpar > .ik-icone {
    font-size: 1.125rem;
}

.ik-filtro__acoes {
    display: flex;
    gap: 0.75rem;
}

.ik-filtro__acoes .btn {
    min-width: 8.5rem;
    min-height: 44px;
}

.ik-filtro__fechar:focus-visible,
.ik-resposta__fechar:focus-visible,
.ik-filtro__periodo:focus-visible,
.ik-filtro__atalho:focus-visible,
.ik-filtro__limpar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .ik-filtro__topo {
        padding: 1.25rem 1rem 0.75rem;
    }

    .ik-filtro__corpo {
        padding: 0.5rem 1rem 1rem;
    }

    .ik-filtro__secao {
        padding: 1rem;
    }

    .ik-filtro__lista--dupla {
        grid-template-columns: minmax(0, 1fr);
    }

    .ik-filtro__opcao {
        gap: 0.75rem;
    }

    /* em 390px as estrelas menores deixam o rótulo numa linha só */
    .ik-filtro__estrelas {
        gap: 0.125rem;
        font-size: 0.9375rem;
    }

    .ik-filtro__rodape {
        padding: 1rem;
    }

    .ik-filtro__acoes {
        width: 100%;
    }

    .ik-filtro__acoes .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ---- "Responder avaliação" (referência de 23/09/2026) -------------------------------
   Diálogo de 640px: título + fechar; item (foto 88px, nome, estrelas da avaliação),
   cliente e data; comentário numa faixa --ik-surface-2; divisor; "Sua resposta" com
   contador; aviso de que a resposta é pública; rodapé com Cancelar e Enviar. Laranja
   só no botão principal e no anel de foco. */
.ik-resposta__dialogo {
    max-width: 640px;
}

.ik-resposta__conteudo {
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    box-shadow: var(--ik-shadow-md);
    background-color: var(--ik-surface);
}

.ik-resposta__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 0.5rem;
}

.ik-resposta__titulo {
    margin: 0;
    color: var(--ik-text);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.ik-resposta__corpo {
    padding: 1rem 1.5rem 1.25rem;
}

.ik-resposta__avaliacao {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ik-resposta__foto {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface-2);
}

.ik-resposta__foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ik-resposta__dados {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.ik-resposta a.ik-resposta__produto {
    overflow: hidden;
    color: var(--ik-text);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ik-resposta a.ik-resposta__produto:hover {
    color: var(--ik-text);
    text-decoration: underline;
}

.ik-resposta__estrelas {
    display: inline-flex;
    gap: 0.25rem;
    color: var(--ik-status-texto);
    font-size: 1.25rem;
}

.ik-resposta__estrelas .ik-resposta__estrela--apagada {
    color: var(--ik-border-strong);
}

.ik-resposta__cliente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.9375rem;
}

.ik-resposta__nome {
    color: var(--ik-text);
    font-weight: 600;
}

.ik-resposta__ponto,
.ik-resposta__data {
    color: var(--ik-text-muted);
}

.ik-resposta__comentario {
    margin: 1rem 0 0;
    padding: 0.875rem 1rem;
    border: 0;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    font-size: 0.9375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ik-resposta__divisor {
    height: 1px;
    margin: 1.25rem 0;
    background-color: var(--ik-border);
}

.ik-resposta__rotulo {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.ik-resposta__campo {
    position: relative;
}

.ik-resposta .ik-resposta__texto {
    min-height: 128px;
    padding: 0.75rem 1rem 1.75rem;
    border: 1px solid var(--ik-border-strong);
    border-radius: var(--ik-radius);
    color: var(--ik-text);
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: vertical;
}

.ik-resposta .ik-resposta__texto::placeholder {
    color: var(--ik-text-muted);
}

.ik-resposta .ik-resposta__texto:focus {
    border-color: var(--ik-accent);
    box-shadow: none;              /* o anel de foco global do tema já basta: halo somado engrossava a borda */
}

.ik-resposta__contador {
    position: absolute;
    inset-inline-end: 0.875rem;
    bottom: 0.5rem;
    color: var(--ik-text-muted);
    font-size: 0.75rem;
    pointer-events: none;
}

.ik-resposta__aviso {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.625rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-resposta__aviso > .ik-icone {
    flex-shrink: 0;
    font-size: 1rem;
}

.ik-resposta .ik-resposta__rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--ik-border);
}

.ik-resposta .ik-resposta__rodape > * {
    margin: 0;
}

.ik-resposta__rodape .btn {
    min-width: 8.5rem;
    min-height: 44px;
}

.ik-resposta__enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .ik-resposta__topo {
        padding: 1.25rem 1rem 0.25rem;
    }

    .ik-resposta__corpo {
        padding: 0.75rem 1rem 1rem;
    }

    .ik-resposta__foto {
        width: 64px;
        height: 64px;
    }

    .ik-resposta .ik-resposta__rodape {
        flex-direction: column-reverse;
        padding: 1rem;
    }

    .ik-resposta__rodape .btn {
        width: 100%;
    }
}

/* busca com a lupa dentro do campo; Enter envia */
.ik-avaliacoes__busca-campo {
    position: relative;
    flex: 0 1 26rem;
    min-width: 0;
}

.ik-avaliacoes__busca-campo > .ik-icone {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    transform: translateY(-50%);
    color: var(--ik-text-muted);
    pointer-events: none;
}

.ik-avaliacoes__busca-campo .form-control {
    height: 44px;
    padding-left: 2.5rem;
}

/* o template força 370px na coluna do produto (`.min-w-370`) e empurrava a coluna
   "Ação" para fora do cartão em 1440px */
.ik-avaliacoes td .media.min-w-370 {
    min-width: 15rem;
}

.ik-avaliacoes__acao {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
}

@media (max-width: 991.98px) {
    .ik-avaliacoes__linha {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .ik-avaliacoes__resumo .ik-avaliacoes__media {
        padding-right: 0;
        padding-bottom: 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--ik-border);
    }
}

/* resumo do topo: média grande à esquerda, barras por nota à direita; estrelas e
   barras nas cores de `.ik-status--pendente` (âmbar), trilha em --ik-surface-2 */
.ik-avaliacoes__resumo .card-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem 3rem;
}

.ik-avaliacoes__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 9rem;
}

.ik-avaliacoes__media-numero {
    color: var(--ik-text);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.ik-avaliacoes__estrelas {
    display: inline-flex;
    gap: 0.125rem;
    color: var(--ik-status-texto);
}

.ik-avaliacoes__media-total {
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-avaliacoes__distribuicao {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ik-avaliacoes__distribuicao li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: 0.75rem;
}

.ik-avaliacoes__dist-nota {
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.ik-avaliacoes__dist-nota > i {
    color: var(--ik-text-muted);
    font-size: 0.75rem;
}

.ik-avaliacoes__barra {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--ik-surface-2);
}

.ik-avaliacoes__barra > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--ik-status-texto);
}

.ik-avaliacoes__dist-qtd {
    color: var(--ik-text-muted);
    font-size: 0.875rem;
    text-align: right;
}

@media (max-width: 575.98px) {
    .ik-avaliacoes__resumo .card-body {
        grid-template-columns: 1fr;
    }
}

.ik-avaliacoes__nota {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ik-text);
    font-weight: 600;
}

.ik-avaliacoes__nota > .tio-star {
    color: var(--ik-status-texto);
}

.ik-avaliacoes__verificado {
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-avaliacoes .important--link.line--limit-1 {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- detalhe do pedido da LOJA pela referência do proprietário (22/09/2026) ----
   MASTER §5.16. Topo com Voltar e subtítulo, faixa de 4 informações, itens com
   observações e quantidade em selo, resumo financeiro em bloco. */
.ik-pedido__topo-titulo {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.ik-pedido__subtitulo {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
}

.ik-pedido__data-icone {
    align-self: center;
    color: var(--ik-text-muted);
}

/* faixa: ícone em disco neutro, rótulo pequeno sobre o valor, separador fino */
/* colunas do tamanho do conteúdo, espalhadas: com quatro frações iguais, "Tipo de
   entrega" quebrava ao meio na largura normal do painel. O rótulo não quebra; o
   valor quebra se precisar. */
.ik-pedido__faixa {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    margin: 0;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--ik-border);
}

.ik-pedido__faixa-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    padding: 0 1rem;
}

.ik-pedido__faixa-item:first-child {
    padding-left: 0;
}

.ik-pedido__faixa-item + .ik-pedido__faixa-item {
    border-left: 1px solid var(--ik-border);
}

.ik-pedido__faixa-icone {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-color: var(--ik-status-fundo, var(--ik-surface-2));
    color: var(--ik-status-texto, var(--ik-text-muted));
    font-size: 1.25rem;
}

.ik-pedido__faixa-rotulo {
    display: block;
    white-space: nowrap;
    color: var(--ik-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.ik-pedido__faixa-valor {
    display: block;
    margin-top: 0.125rem;
    color: var(--ik-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* o resto do resumo, quando existe, segue abaixo da faixa */
.ik-pedido__faixa + .ik-pedido__resumo {
    padding-top: 0;
    border-top: 0;
}

/* itens */
.ik-pedido__secao-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 1.25rem 1.5rem 1rem;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-pedido__secao-titulo > .ik-icone {
    color: var(--ik-text-muted);
    font-size: 1.25rem;
}

.ik-pedido__itens-cartao .ik-pedido__itens td {
    vertical-align: middle;
}

.ik-pedido__col-obs {
    min-width: 10rem;
}

.ik-pedido__qtd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    font-weight: 600;
}

/* resumo financeiro: título à esquerda, conta à direita, total em fundo suave */
.ik-pedido__financeiro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: 1.5rem;
    margin: 1.25rem 1.5rem 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
}

.ik-pedido__financeiro-cabecalho {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ik-pedido__financeiro-titulo {
    margin: 0;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-pedido__financeiro-texto {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-pedido__financeiro .ik-pedido__conta,
.ik-pedido__financeiro .ik-pedido__rodape {
    padding: 0;
}

.ik-pedido__financeiro .ik-pedido__totais,
.ik-pedido__financeiro .ik-pedido__total {
    max-width: none;
}

.ik-pedido__financeiro .ik-pedido__rodape-troco {
    flex-basis: 100%;
    max-width: none;
}

/* recibo (2ª referência, 22/09/2026): papel `--ik-surface-2` com as bordas de cima
   e de baixo serrilhadas por máscara, sombra por `drop-shadow` no contêiner (a
   máscara cortaria um `box-shadow`). Texto secundário sobre o papel: 4,63:1. */
.ik-pedido__financeiro-valores {
    filter: drop-shadow(0 1px 3px rgba(24, 24, 27, 0.16));
}

.ik-pedido__recibo {
    --ik-dente: 6px;
    padding: 1.5rem 1.25rem;
    background-color: var(--ik-surface-2);
    -webkit-mask:
        radial-gradient(circle var(--ik-dente) at 50% 0, transparent 97%, #000) top / calc(var(--ik-dente) * 3) 51% repeat-x,
        radial-gradient(circle var(--ik-dente) at 50% 100%, transparent 97%, #000) bottom / calc(var(--ik-dente) * 3) 51% repeat-x;
    mask:
        radial-gradient(circle var(--ik-dente) at 50% 0, transparent 97%, #000) top / calc(var(--ik-dente) * 3) 51% repeat-x,
        radial-gradient(circle var(--ik-dente) at 50% 100%, transparent 97%, #000) bottom / calc(var(--ik-dente) * 3) 51% repeat-x;
}

/* linhas coladas (sem vão entre rótulo e valor), para os tracejados correrem inteiros */
.ik-pedido__recibo .ik-pedido__totais {
    column-gap: 0;
    row-gap: 0.625rem;
}

.ik-pedido__recibo .ik-pedido__totais dd {
    padding-left: 1rem;
}

.ik-pedido__recibo .ik-pedido__totais dt,
.ik-pedido__recibo .ik-pedido__totais dd {
    font-size: 0.9375rem;
}

/* subtotal entre duas linhas tracejadas */
.ik-pedido__recibo .ik-pedido__totais .ik-pedido__totais-forte {
    padding: 0.75rem 0;
    border-top: 1px dashed var(--ik-border-strong);
    border-bottom: 1px dashed var(--ik-border-strong);
}

.ik-pedido__recibo .ik-pedido__totais dd.ik-pedido__totais-forte {
    padding-left: 1rem;
}

/* fundo do papel, e não transparente: com troco o rodapé gruda no pé da tela e
   passaria por cima das linhas ao rolar */
.ik-pedido__financeiro .ik-pedido__rodape {
    margin-top: 1.25rem;
    background-color: var(--ik-surface-2);
}

.ik-pedido__financeiro .ik-pedido__total {
    padding: 1rem 1.25rem;
    border-top: 0;
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-recibo-total);
}

.ik-pedido__financeiro .ik-pedido__total dt,
.ik-pedido__financeiro .ik-pedido__total dd {
    font-size: 1.5rem;
    font-weight: 700;
}

/* próxima etapa e cartões */
.ik-pedido__cartao-titulo > .ik-icone {
    color: var(--ik-text-muted);
}

.ik-pedido__cartao-texto {
    margin: 0 0 1rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-pedido__vazio-caixa {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px dashed var(--ik-border-strong);
    border-radius: var(--ik-radius);
    color: var(--ik-text-muted);
}

.ik-pedido__contato {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ik-pedido__contato > .ik-icone {
    flex-shrink: 0;
    color: var(--ik-text-muted);
}

/* quatro em linha só com folga: com os textos reais ("Forma de pagamento",
   "Pagamento pelo app") a faixa pede ~800px de cartão, o que o painel só tem a
   partir de ~1600px de tela. Abaixo disso, 2 × 2. */
@media (max-width: 1599.98px) {
    .ik-pedido__faixa {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        row-gap: 1rem;
    }

    .ik-pedido__faixa-item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 991.98px) {
    .ik-pedido__financeiro {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .ik-pedido__topo {
        align-items: flex-start;
    }

    .ik-pedido__topo-titulo {
        flex-direction: column;
        gap: 0.75rem;
    }

    .ik-pedido__faixa {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .ik-pedido__faixa-item {
        padding: 0;
    }

    .ik-pedido__faixa-item + .ik-pedido__faixa-item {
        border-left: 0;
    }

    .ik-pedido__financeiro {
        margin: 1rem;
        padding: 1rem;
    }
}

/* ---- detalhe do pedido do ADMIN (22/09/2026, MASTER §5.16) ------------------
   A mesma página da loja; o admin muda para qualquer status, então a primária é
   um menu, e não o botão da próxima etapa. */
.ik-pedido .ik-pedido__status-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    text-transform: none;
}

/* "Cancelado" no fim do menu, separado, nas cores de `.ik-status--cancelado`
   (a classe vai no próprio item e só define variáveis) */
.ik-pedido .dropdown-item.ik-pedido__status-cancelar {
    color: var(--ik-status-texto);
    font-weight: 500;
}

.ik-pedido .dropdown-item.ik-pedido__status-cancelar:hover,
.ik-pedido .dropdown-item.ik-pedido__status-cancelar:focus {
    background-color: var(--ik-surface-2);
}

/* aviso de chegada do entregador no cartão de etapa: fato, não status */
.ik-pedido__chegada {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

/* ==========================================================================
   ACOMPANHAMENTO DO PREPARO — detalhe do pedido da loja (22/09/2026, MASTER §5.18)

   O card do app da loja (ikero-apps/DESIGN.md §66) no cartão de etapa. As três
   faces vêm das etiquetas de status, pelas variáveis delas:
     dentro do prazo   .ik-status--preparando   ciano (a cor de "Preparando")
     faltam ≤ 10 min   .ik-status--pendente     âmbar
     prazo passou      .ik-status--cancelado    vermelho
   ⛔ O FUNDO não muda com a face — decisão do app: card inteiro vermelho na
   primeira dobra ensina a loja a ignorar vermelho. Muda cronômetro, barra,
   ícone e título. ⛔ Nada de laranja: laranja não comunica estado (§1).
   ========================================================================== */
.ik-preparo-card {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

.ik-preparo-card__topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ik-preparo-card__icone {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ik-status-texto);
}

.ik-preparo-card__titulo {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ik-text);
    font-weight: 600;
}

.ik-preparo-card.is-excedido .ik-preparo-card__titulo {
    color: var(--ik-status-texto);
}

.ik-preparo-card__cronometro {
    flex-shrink: 0;
    color: var(--ik-status-texto);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ⛔ barra sempre com valor definido: indeterminada diria "processando" */
.ik-preparo-card__barra {
    height: 6px;
    margin: 0.75rem 0 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--ik-status-fundo);
}

.ik-preparo-card__barra > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--ik-status-texto);
    transition: width 1s linear;
}

.ik-preparo-card__legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-preparo-card__acoes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--ik-border);
}

.ik-preparo-card__atalho {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0 0.75rem;
    /* a coluna direita tem ~270px úteis: sem isto os dois rótulos quebravam */
    white-space: nowrap;
}

/* "Mais tempo": ação de texto, sem caixa — o atalho já é o botão da linha */
.ik-preparo-card__mais {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    min-height: 44px;
    padding: 0 0.5rem;
    border: 0;
    background: none;
    color: var(--ik-text);
    font-weight: 600;
    white-space: nowrap;
}

.ik-preparo-card__mais:hover {
    background-color: var(--ik-border);
    color: var(--ik-text);
}

.ik-preparo-card__atalho[aria-busy="true"] {
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .ik-preparo-card__barra > span {
        transition: none;
    }
}

/* ---- diálogo "Mais tempo" (base .ik-dialogo + atalhos do .ik-preparo) ------- */
.swal2-popup.ik-mais-tempo .swal2-actions {
    grid-template-columns: 1fr 1fr;
}

.ik-mais-tempo .ik-preparo__atalhos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.ik-mais-tempo .ik-mais-tempo__outro {
    grid-column: 1 / -1;
}

.ik-mais-tempo__campo {
    margin-bottom: 1rem;
}

.ik-mais-tempo__campo[hidden] {
    display: none;
}

.ik-mais-tempo .ik-dialogo__info s {
    color: var(--ik-text-muted);
}

@media (max-width: 575.98px) {
    .ik-mais-tempo .ik-preparo__atalhos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================================================
   HISTÓRICO DO PEDIDO — detalhe do pedido entregue da loja (22/09/2026, MASTER §5.19)

   Trilha vertical neutra, na linha da "linha do tempo da entrega" do app da
   loja (ikero-apps/DESIGN.md §97): marcas e traço em cinza de borda, texto
   normal, horário à direita em tabular-nums. Só o evento final (entregue) leva
   cor — o verde de `.ik-status--entregue`, pelas variáveis da etiqueta.
   ⛔ Nada de laranja: é registro, não ação.
   ========================================================================== */
.ik-historico {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

/* ---- recolher/expandir (collapse do Bootstrap 4) ----------------------------
   O título inteiro é o botão: 44px, a seta à direita gira como a do seletor
   de idioma (.ik-lang__seta). O anel de foco é o do tema. */
.ik-historico__alternar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    margin: -0.5rem 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ik-historico__alternar > .ik-icone--historico {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--ik-text-muted);
}

.ik-historico__seta {
    margin-left: auto;
    color: var(--ik-text-muted);
    transition: transform var(--ik-transicao);
}

.ik-historico__alternar[aria-expanded="true"] .ik-historico__seta {
    transform: rotate(180deg);
}

.ik-historico__alternar:hover .ik-historico__seta {
    color: var(--ik-text);
}

.ik-historico__evento {
    position: relative;
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: start;
    gap: 0 0.75rem;
    padding-bottom: 1rem;
}

.ik-historico__evento:last-child {
    padding-bottom: 0;
}

/* o traço liga uma marca à seguinte; o último evento não tem traço abaixo */
.ik-historico__evento:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 0;
    left: 6px;
    width: 2px;
    background-color: var(--ik-border);
}

.ik-historico__marca {
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border: 2px solid var(--ik-border-strong);
    border-radius: 999px;
    background-color: var(--ik-surface);
}

.ik-historico__evento.is-final .ik-historico__marca {
    border-color: var(--ik-status-texto);
    background-color: var(--ik-status-texto);
}

.ik-historico__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ik-historico__rotulo {
    color: var(--ik-text);
    line-height: 1.4;
}

.ik-historico__evento.is-final .ik-historico__rotulo {
    font-weight: 600;
}

.ik-historico__detalhe {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-historico__hora {
    color: var(--ik-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   PEDIDOS POR ASSINATURA — painel da loja (23/09/2026, MASTER §5.20)

   Lista em `.ik-pedidos` e detalhe em `.ik-pedido` (§5.15/§5.16); aqui só o
   que essas duas telas não tinham: abas do detalhe, ícone do estado vazio e
   os passos do "Como funciona" (ícones por máscara no lugar de PNG/GIF).
   ========================================================================== */
.ik-assinatura__abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    border: 0;
}

.ik-assinatura__abas .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-weight: 500;
    text-transform: none;
}

.ik-assinatura__abas .nav-link:hover {
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
}

/* item ativo: o mesmo par do menu lateral (§2.3, "a regra lê-se em par") */
.ik-assinatura__abas .nav-link.active,
.ik-assinatura__abas .nav-link.active:hover {
    background-color: var(--ik-accent-soft);
    border-color: var(--ik-accent-soft-2);
    color: var(--ik-accent-em-soft);
}

.ik-assinatura__vazio-icone {
    -webkit-mask-image: var(--ik-icone-calendario-dias);
    mask-image: var(--ik-icone-calendario-dias);
}

.ik-assinatura__passo {
    max-width: 349px;
    margin: 0 auto 1.25rem;
    text-align: center;
}

.ik-assinatura__passo-icone {
    display: block; /* é um <span>: inline ignora largura e altura (visto em tela, 23/09) */
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    background-color: var(--ik-text-subtle);
    -webkit-mask: var(--ik-assinatura-icone) center / contain no-repeat;
    mask: var(--ik-assinatura-icone) center / contain no-repeat;
}

.ik-assinatura__passo--receber { --ik-assinatura-icone: var(--ik-icone-sacola); }
.ik-assinatura__passo--agenda { --ik-assinatura-icone: var(--ik-icone-calendario-dias); }
.ik-assinatura__passo--preparar { --ik-assinatura-icone: var(--ik-icone-preparando); }
.ik-assinatura__passo--pausar { --ik-assinatura-icone: var(--ik-icone-tempo); }
.ik-assinatura__passo--terminar { --ik-assinatura-icone: var(--ik-icone-check-check); }

/* etapa N de 5, acima do título: pílula neutra, nunca laranja (§1) */
.ik-assinatura__passo-numero {
    display: inline-block;
    min-width: 1.75rem;
    margin-bottom: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background-color: var(--ik-surface-2);
    color: var(--ik-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

/* o template capitaliza cada palavra do badge ("Pedido De Assinatura") */
.ik-assinatura .badge {
    text-transform: none;
}

.ik-assinatura__modal-titulo {
    margin: 0;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

/* setas + contador numa linha só, abaixo do passo (funciona em 360px) */
.ik-assinatura__navegacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.ik-assinatura__contador {
    min-width: 3rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
}

.ik-assinatura__carrossel .owl-dots {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

.ik-assinatura__carrossel .owl-dots .owl-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--ik-border-strong);
    transition: background-color var(--ik-transicao), width var(--ik-transicao);
}

.ik-assinatura__carrossel .owl-dots .owl-dot.active {
    width: 20px;
    background-color: var(--ik-accent-fill);
}

.ik-assinatura__passo-titulo {
    margin: 0 0 0.5rem;
    color: var(--ik-text);
    font-size: 1.125rem;
    font-weight: 600;
}

.ik-assinatura__passo-texto {
    margin: 0;
    color: var(--ik-text-muted);
}

.ik-assinatura__fechar {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    opacity: 1;
    color: var(--ik-text-muted);
}

.ik-assinatura__agenda-dia {
    font-weight: 600;
    color: var(--ik-text);
}

.ik-assinatura__sem-registro {
    padding: 1.5rem 1.25rem;
    color: var(--ik-text-muted);
    text-align: center;
}


/* ==========================================================================
   Cadastro e edição de item do painel da loja (§5.22, 23/09/2026)
   Escopo `.ik-item`: caixa de frase (o template capitaliza `.card-title`,
   `.page-header-title`, `.input-label` e `.toggle-switch`), cabeçalho com
   disco neutro (mesmo topo do §5.21) e estado vazio dos cartões.
   ========================================================================== */
:root {
    --ik-icone-item-novo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='M16 17h6'/%3E%3Cpath d='M19 14v6'/%3E%3Cpath d='M21 10.535V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.675-.955'/%3E%3Cpath d='M3.29 7 12 12l8.71-5'/%3E%3Cpath d='m7.5 4.27 8.997 5.148'/%3E%3C/svg%3E");
    --ik-icone-item-editar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 21h8'/%3E%3Cpath d='m15 5 4 4'/%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E");
}

.ik-icone--item-novo {
    -webkit-mask-image: var(--ik-icone-item-novo);
    mask-image: var(--ik-icone-item-novo);
}

.ik-icone--item-editar {
    -webkit-mask-image: var(--ik-icone-item-editar);
    mask-image: var(--ik-icone-item-editar);
}

/* Quem capitaliza no template: `.card-title` e `.input-label` (0,1,0),
   `.card-header-icon ~ span` (0,1,1 — o texto do título de cartão vive nesse
   span, e a regra do filho vence a herança), `button[class*="btn--"]` (0,1,1),
   `.toggle-switch` (0,1,0) e o `.text-capitalize` do Bootstrap, com
   `!important` — este só cai com `!important` no escopo. */
.ik-item .page-header-title,
.ik-item .card-title,
.ik-item .card-header-icon ~ span,
.ik-item .input-label,
.ik-item .form-check-label,
.ik-item .toggle-switch,
.ik-item button[class*="btn--"],
.ik-item a[class*="btn--"] {
    text-transform: none;
}

.ik-item .text-capitalize {
    text-transform: none !important;
}

.ik-item__topo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* 18/10/2026 (auditoria do formulário de turno, B2): no celular o subtítulo quebra em várias linhas e o disco centralizado
   descia para o meio do texto — alinha com o título */
@media (max-width: 575.98px) {
    .ik-item__topo {
        align-items: flex-start;
    }
}

.ik-item__topo-disco {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface-2);
    border: 1px solid var(--ik-border);
    color: var(--ik-text);
    font-size: 1.5rem;
}

.ik-item__topo .page-header-title {
    margin: 0;
}

.ik-item__subtitulo {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
}

/* Estado vazio dos cartões (complementos, variações): o mesmo desenho da
   lista vazia do §5.15, em escala de cartão. */
.ik-item__vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    text-align: center;
}

.ik-item__vazio-icone {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    background-color: var(--ik-text-subtle);
    -webkit-mask: var(--ik-icone-todos) center / contain no-repeat;
    mask: var(--ik-icone-todos) center / contain no-repeat;
}

.ik-item__vazio-titulo {
    margin: 0;
    color: var(--ik-text-muted);
    font-weight: 500;
}

.ik-item__vazio-titulo a {
    color: var(--ik-accent-em-soft);
    font-weight: 600;
}

/* A foto ocupa o cartão em vez de flutuar numa caixa de 100px no meio do
   vazio: o `.p-10` do template saiu da Blade e o uploader cresce até 240px. */
.ik-item__foto .upload-file__wrapper {
    block-size: 240px;
    inline-size: 240px;
    max-inline-size: 100%;
}

/* ==========================================================================
   Relatório de despesas do painel da loja (23/09/2026, MASTER §5.23)
   Escopo `.ik-despesas` sobre `.ik-pedidos` (§5.15): o que a lista de
   pedidos já tem (barra, busca, tabela, vazio) é reusado; aqui só entram os
   KPIs de total por tipo (compactos do §5.4) e o formulário único de filtros.
   ========================================================================== */
.ik-despesas .card-title,
.ik-transacoes .card-title,
.ik-repasses .card-title,
.ik-relatorio-pedidos .card-title {
    text-transform: none;
}

/* ---- KPIs: total do recorte e soma por tipo ------------------------------ */
.ik-despesas__kpis,
.ik-relatorio__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ik-despesas__kpis .order--card,
.ik-relatorio__kpis .order--card {
    min-width: 0;
    margin: 0;
    height: 100%;
}

/* total: âmbar — despesa é dinheiro que saiu, família de aviso (§5.5); nunca laranja */
.order--card.ikl--despesa-total {
    --ik-kpi-icone: var(--ik-icone-cifrao);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fef8ee;
    --ik-kpi-borda: #f3dcb6;
}

/* os três tipos: neutros, um ícone por cartão (§5.4) */
.order--card.ikl--despesa-cupom {
    --ik-kpi-icone: var(--ik-icone-cupom);
    --ik-kpi-forte: #3f3f46;
}

.order--card.ikl--despesa-item {
    --ik-kpi-icone: var(--ik-icone-percentual);
    --ik-kpi-forte: #3f3f46;
}

.order--card.ikl--despesa-entrega {
    --ik-kpi-icone: var(--ik-icone-caminhao);
    --ik-kpi-forte: #3f3f46;
}

/* ---- formulário único de filtros ------------------------------------------ */
.ik-despesas__filtros,
.ik-relatorio__filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

.ik-despesas__filtros label,
.ik-relatorio__filtros label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--ik-text);
    font-weight: 500;
    font-size: 0.875rem;
}

.ik-despesas__filtros .form-control,
.ik-relatorio__filtros .form-control {
    height: 44px;
}

.ik-despesas__datas,
.ik-relatorio__datas {
    display: contents;
}

.ik-despesas__datas[hidden],
.ik-relatorio__datas[hidden] {
    display: none;
}

.ik-despesas__filtros .ik-pedidos__busca,
.ik-relatorio__filtros .ik-pedidos__busca {
    max-width: none;
    flex: 1 1 auto;
}

.ik-despesas__filtros .ik-despesas__aplicar,
.ik-relatorio__filtros .ik-relatorio__aplicar {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.25rem;
}

.ik-despesas__ajuda,
.ik-relatorio__ajuda {
    grid-column: 1 / -1;
    margin: -0.25rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

@media (max-width: 575.98px) {
    .ik-despesas__filtros,
    .ik-relatorio__filtros {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   LISTA DE ITENS — painel da loja (23/09/2026, MASTER §5.23)
   Reaproveita os blocos da lista de pedidos (§5.15) pelos seletores
   `.ik-itens__*` somados acima; aqui só o que é próprio desta tela:
   topo com botões, foto e nome, cabeçalho ordenável, seleção e ação em lote.
   ========================================================================== */
.ik-itens__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.ik-itens__botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ik-itens__botoes .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ik-itens__ferramentas,
.ik-categorias__ferramentas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* o template pinta o botão de filtro ativo de laranja cheio; aqui é o contorno
   da marca (§5.1) com o ponto que ele já desenha */
.ik-itens .ik-itens__filtrar.filter-active {
    position: relative;
    background-color: var(--ik-accent-soft);
    border-color: var(--ik-accent-soft-2);
    color: var(--ik-accent-em-soft);
}

.ik-itens__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 260px;
    color: var(--ik-text);
}

.ik-itens__item:hover .ik-itens__nome {
    color: var(--ik-accent-fill);
    text-decoration: underline;
}

.ik-itens__foto,
.ik-categorias__foto {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--ik-radius);
    object-fit: cover;
    background-color: var(--ik-surface-2);
}

.ik-itens__nome-bloco {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.ik-itens__nome {
    color: var(--ik-text);
    font-weight: 500;
    white-space: normal;
    max-width: 280px;
}

.ik-itens__etiqueta {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
}

.ik-itens__interruptor {
    margin: 0;
}

/* cabeçalho ordenável: link discreto, seta só na coluna ativa */
.ik-itens__ordenar {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
}

.ik-itens__ordenar:hover,
.ik-itens__ordenar.is-ativa {
    color: var(--ik-text);
}

.ik-itens__ordenar.is-ativa::after {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    background-color: currentColor;
    -webkit-mask: var(--ik-icone-chevron-down) center / contain no-repeat;
    mask: var(--ik-icone-chevron-down) center / contain no-repeat;
}

.ik-itens__ordenar.is-asc::after {
    transform: rotate(180deg);
}

.ik-itens__marcar input {
    width: 18px;
    height: 18px;
    accent-color: var(--ik-accent-fill);
    cursor: pointer;
}

/* barra de lote: aparece entre a barra de busca e a tabela quando há seleção */
.ik-itens__lote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--ik-border);
    background-color: var(--ik-accent-soft);
}

.ik-itens__lote[hidden] {
    display: none;
}

.ik-itens__lote-total {
    font-weight: 600;
    color: var(--ik-text);
    margin-right: 0.25rem;
}

.ik-itens__lote .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.ik-itens__lote-limpar {
    color: var(--ik-text-muted);
    text-decoration: underline;
    padding-inline: 0.5rem;
}

.ik-itens__lote-limpar:hover {
    color: var(--ik-text);
}

/* o template capitaliza os botões `btn--` (§8.22) */
.ik-itens button[class*="btn--"],
.ik-itens a[class*="btn--"] {
    text-transform: none;
}

@media (max-width: 575.98px) {
    .ik-itens__botoes,
    .ik-itens__botoes .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Relatório de transações do painel da loja (23/09/2026, MASTER §5.25)
   Escopo `.ik-transacoes` sobre `.ik-pedidos` + `.ik-relatorio__*` (o bloco
   genérico do §5.23). Só os quatro KPIs são próprios: recebido (verde),
   líquido da loja (índigo), reembolsado (âmbar) e pedidos em andamento
   (neutro) — um ícone por cartão (§5.4).
   ========================================================================== */
.order--card.ikl--trx-recebido {
    --ik-kpi-icone: var(--ik-icone-banknote);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e8f7f1;
    --ik-kpi-tenue: #f3fbf7;
    --ik-kpi-borda: #bfe6d5;
}

.order--card.ikl--trx-liquido {
    --ik-kpi-icone: var(--ik-icone-trending-up);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f6f6fe;
    --ik-kpi-borda: #cfcff5;
}

.order--card.ikl--trx-reembolsado {
    --ik-kpi-icone: var(--ik-icone-reembolsados);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fef8ee;
    --ik-kpi-borda: #f3dcb6;
}

.order--card.ikl--trx-andamento {
    --ik-kpi-icone: var(--ik-icone-tempo);
    --ik-kpi-forte: #3f3f46;
}

/* iKero (01/10/2026) — relatório de transações do super admin (MASTER §5.25.1), sobre o bloco acima e `.ik-lojas`
   (§5.98): cinco cartões (recebido · plataforma · lojas · entregas · reembolsado). Só a "Receita da plataforma" é nova —
   ciano do "convertidos em saldo" da fidelidade (#0e7490, já medido), ícone `percent`. A ajuda dos cartões é texto num
   <details>, não tooltip de mouse (o template punha a explicação num PNG sem foco). */
.order--card.ikl--trx-plataforma {
    --ik-kpi-icone: var(--ik-icone-percentual);
    --ik-kpi-forte: #0e7490;
    --ik-kpi-claro: #e6f6fa;
    --ik-kpi-tenue: #f3fbfc;
    --ik-kpi-borda: #c7e9f0;
}

.ik-trx-admin__kpis {
    margin-bottom: 0.5rem;
}

.ik-trx-admin__kpis .title,
.ik-despesas-admin__kpis .title,
.ik-rep-rel__kpis .title,
.ik-prod-admin__kpis .title,
.ik-loja-rel__kpis .title,
.ik-cli-rel__kpis .title {
    white-space: nowrap;
}

/* iKero (01/10/2026) — relatório de despesas do admin (MASTER §5.23.1): o motivo (bônus/incentivo de entregador) quebra
   linha dentro da tabela `table-nowrap`, com largura limitada. */
.ik-despesas-admin__motivo {
    white-space: normal;
    min-width: 12rem;
    max-width: 22rem;
}

.ik-trx-admin__ajuda {
    margin-bottom: 1rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-trx-admin__ajuda summary {
    color: var(--ik-text);
    font-weight: 500;
    cursor: pointer;
}

.ik-trx-admin__ajuda dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
}

.ik-trx-admin__ajuda dt {
    color: var(--ik-text);
    font-weight: 500;
}

.ik-trx-admin__ajuda dd {
    margin: 0;
}

.ik-trx-admin .select2-container--default .select2-selection--single,
.ik-despesas-admin .select2-container--default .select2-selection--single,
.ik-rep-rel .select2-container--default .select2-selection--single,
.ik-prod-admin .select2-container--default .select2-selection--single,
.ik-ped-admin .select2-container--default .select2-selection--single { height: 44px; display: flex; align-items: center; }
.ik-trx-admin .select2-container--default .select2-selection--single .select2-selection__arrow,
.ik-despesas-admin .select2-container--default .select2-selection--single .select2-selection__arrow,
.ik-rep-rel .select2-container--default .select2-selection--single .select2-selection__arrow,
.ik-prod-admin .select2-container--default .select2-selection--single .select2-selection__arrow,
.ik-ped-admin .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.ik-trx-admin .select2-selection__placeholder,
.ik-despesas-admin .select2-selection__placeholder,
.ik-rep-rel .select2-selection__placeholder,
.ik-prod-admin .select2-selection__placeholder,
.ik-ped-admin .select2-selection__placeholder { text-transform: none; }

/* iKero (01/10/2026) — relatório de pedidos do admin (MASTER §5.32.1): o valor do recorte abaixo dos cartões e o total da
   linha com a situação de pagamento num elemento que quebra linha (no celular a célula é flex). */
.ik-ped-admin__valor { margin: -0.25rem 0 1rem; color: var(--ik-text); }
.ik-ped-admin__total { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem 0.5rem; }

/* iKero (01/10/2026) — relatório de repasses do admin (MASTER §5.29.1): as abas Lojas/Entregadores reaproveitam
   `.ik-solicitacoes__abas`; o modal único de dados de pagamento lista rótulo e valor em duas colunas. */
.ik-rep-rel .ik-solicitacoes__abas { margin-bottom: 1rem; }
.ik-rep-rel__previsao { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem 0.5rem; }
.ik-rep-rel__modal dl {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.375rem 1rem;
    margin: 0 0 1rem;
}
.ik-rep-rel__modal dt { color: var(--ik-text-muted); font-weight: 400; }
.ik-rep-rel__modal dd { margin: 0; color: var(--ik-text); font-weight: 500; overflow-wrap: anywhere; }

/* iKero (02/10/2026) — relatório de clientes do admin (MASTER §5.95.1): a regra de contagem abaixo dos cartões; foto de
   cliente redonda na lista e no ranking (o `.ik-ranking__foto-wrap` 4:3 é de foto de item). */
.ik-cli-rel__nota { margin: -0.25rem 0 1rem; color: var(--ik-text-muted); font-size: 0.875rem; }
.ik-cli-rel__foto { border-radius: 50%; }
.ik-cli-rel__ranking .ik-ranking__item { align-items: center; text-align: center; }
.ik-cli-rel__ranking .ik-ranking__foto-wrap { width: 3.5rem; height: 3.5rem; aspect-ratio: 1; border-radius: 50%; }
.ik-cli-rel__ranking .ik-ranking__selo { align-self: center; }

/* Pacote de 02/10/2026: o "N pela 1ª vez" no cartão "Compraram", o funil cadastro → 1ª compra → recompra (barra com a
   largura relativa aos cadastrados, cor de dado `--ik-grafico-serie-1`) e os dois botões no cabeçalho da lista. */
.ik-cli-rel__kpi-extra { display: block; margin-top: 0.125rem; color: var(--ik-text-muted); font-size: 0.8125rem; }
/* 2ª rodada (02/10/2026): cartões que filtram — o mesmo anel do relatório de pedidos (§5.32) */
.ik-cli-rel__kpis a.order--card { color: inherit; text-decoration: none; }
.ik-cli-rel__kpis .order--card[aria-current="true"] { box-shadow: 0 0 0 2px var(--ik-kpi-forte, var(--ik-border-strong)); }
.ik-cli-rel__kpis a.order--card:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik-cli-rel__funil {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ik-cli-rel__passo { display: flex; flex-direction: column; gap: 0.375rem; }
.ik-cli-rel__passo-rotulo { color: var(--ik-text-muted); font-size: 0.875rem; }
.ik-cli-rel__passo-valor { color: var(--ik-text); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.ik-cli-rel__barra { display: block; height: 0.5rem; border-radius: 999px; background-color: var(--ik-surface-2); overflow: hidden; }
.ik-cli-rel__barra > span { display: block; width: var(--ik-funil, 0%); height: 100%; border-radius: inherit; background-color: var(--ik-grafico-serie-1); }
.ik-cli-rel__funil-acao { margin-top: 1rem; color: var(--ik-text-muted); font-size: 0.875rem; }
.ik-cli-rel__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ik-cli-rel__acoes .ik-icone { width: 1rem; height: 1rem; margin-right: 0.25rem; vertical-align: -0.125rem; }

@media (max-width: 575.98px) {
    .ik-cli-rel__funil { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .ik-trx-admin__kpis,
    .ik-despesas-admin__kpis,
    .ik-rep-rel__kpis,
    .ik-prod-admin__kpis,
    .ik-loja-rel__kpis,
    .ik-cli-rel__kpis { grid-template-columns: 1fr; }
    .ik-trx-admin__ajuda dl { grid-template-columns: 1fr; }
    .ik-trx-admin__ajuda dd { margin-bottom: 0.5rem; }
}


/* ==========================================================================
   IMPORTAÇÃO EM MASSA DE ITENS — painel da loja (23/09/2026, MASTER §5.26)
   Escopo `.ik-importacao`: topo com disco, passos como cartões, tabela das
   colunas gerada do serviço, três modelos, envio com validação, relatório por
   linha e o gerador de variações no mesmo desenho.
   ========================================================================== */
:root {
    --ik-icone-planilha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M8 13h2'/%3E%3Cpath d='M14 13h2'/%3E%3Cpath d='M8 17h2'/%3E%3Cpath d='M14 17h2'/%3E%3C/svg%3E");
}

.ik-icone--planilha {
    -webkit-mask-image: var(--ik-icone-planilha);
    mask-image: var(--ik-icone-planilha);
}

.ik-importacao .page-header-title,
.ik-importacao .card-title,
.ik-importacao .card-header-icon ~ span,
.ik-importacao .input-label,
.ik-importacao button[class*="btn--"],
.ik-importacao a[class*="btn--"],
.ik-exportacao .page-header-title,
.ik-exportacao .input-label,
.ik-exportacao .form-check-label,
.ik-exportacao button[class*="btn--"],
.ik-exportacao a[class*="btn--"] {
    text-transform: none;
}

.ik-importacao__topo,
.ik-exportacao__topo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ik-importacao__topo-disco,
.ik-exportacao__topo-disco {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface-2);
    border: 1px solid var(--ik-border);
    color: var(--ik-text);
    font-size: 1.5rem;
}

.ik-importacao__topo .page-header-title,
.ik-exportacao__topo .page-header-title {
    margin: 0;
}

.ik-importacao__subtitulo,
.ik-exportacao__subtitulo {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
}

/* passos: três cartões numerados, o número no disco neutro */
.ik-importacao__passos,
.ik-exportacao__passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.ik-importacao__passo,
.ik-exportacao__passo {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface);
}

.ik-importacao__passo-numero,
.ik-exportacao__passo-numero {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: var(--ik-surface-2);
    border: 1px solid var(--ik-border);
    color: var(--ik-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ik-importacao__passo strong,
.ik-exportacao__passo strong {
    display: block;
    color: var(--ik-text);
    font-weight: 600;
}

.ik-importacao__passo span,
.ik-exportacao__passo span {
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-importacao__secao,
.ik-exportacao__secao {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-importacao__ajuda,
.ik-exportacao__ajuda {
    color: var(--ik-text-muted);
    margin: 0 0 1rem;
}

/* tabela das colunas (§5.8): separação por linha, cabeçalho em superfície 2 */
.ik-importacao__colunas th {
    background-color: var(--ik-surface-2);
    font-weight: 600;
    white-space: nowrap;
}

.ik-importacao__colunas td,
.ik-importacao__colunas th {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--ik-border);
    vertical-align: top;
}

.ik-importacao__colunas code {
    color: var(--ik-text);
    background-color: var(--ik-surface-2);
    border-radius: 4px;
    padding: 0.0625rem 0.375rem;
    font-size: 0.8125rem;
}

.ik-importacao__obrigatoria {
    color: var(--ik-accent-em-soft);
    font-weight: 600;
}

.ik-importacao__modelos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ik-importacao__modelos .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* envio: campo de arquivo que mostra o nome escolhido (o custom-file do
   Bootstrap 4 depende de um script que o layout não carrega) */
.ik-importacao__arquivo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px dashed var(--ik-border-strong);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface-2);
}

.ik-importacao__arquivo input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.ik-importacao__arquivo input[type="file"]:focus-visible + .btn {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-importacao__arquivo-nome {
    color: var(--ik-text-muted);
    flex: 1 1 200px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ik-importacao__arquivo-nome.is-escolhido {
    color: var(--ik-text);
    font-weight: 500;
}

.ik-importacao__acoes,
.ik-exportacao__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ik-importacao__acoes .btn,
.ik-exportacao__acoes .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* relatório da validação */
.ik-importacao__relatorio {
    margin-top: 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    overflow: hidden;
}

.ik-importacao__relatorio-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.875rem 1rem;
    background-color: var(--ik-surface-2);
    border-bottom: 1px solid var(--ik-border);
    font-weight: 600;
    color: var(--ik-text);
}

.ik-importacao__relatorio-topo .ik-status {
    font-weight: 600;
}

.ik-importacao__relatorio table {
    margin: 0;
}

.ik-importacao__relatorio td,
.ik-importacao__relatorio th {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--ik-border);
    vertical-align: top;
}

.ik-importacao__relatorio th {
    font-weight: 600;
    white-space: nowrap;
}

.ik-importacao__relatorio ul {
    margin: 0;
    padding-left: 1.125rem;
}

.ik-importacao__relatorio-ok {
    padding: 1rem;
    color: var(--ik-text);
}

/* gerador de variações: ação neutra, resultado copiável */
.ik-importacao__gerador-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.ik-importacao__gerador-acoes .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ik-importacao__resultado {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}


/* ==========================================================================
   Complementos do painel da loja (§5.26, 23/09/2026)
   /restaurant-panel/addon/add-new e /addon/edit/{id}. Escopo `.ik-complementos`
   somado a `.ik-item` (formulário: caixa de frase, topo com disco) e a
   `.ik-itens` (lista: barra, tabela, ações de 44px, estado vazio). Aqui só o
   que os dois não têm: o ícone do topo (Lucide `circle-plus`), o texto de
   ajuda do tipo de estoque e a altura dos botões do formulário.
   ========================================================================== */
:root {
    --ik-icone-complemento: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
}

.ik-icone--complemento {
    -webkit-mask-image: var(--ik-icone-complemento);
    mask-image: var(--ik-icone-complemento);
}

.ik-complementos__ajuda {
    display: block;
    margin-top: 0.375rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ik-complementos__acoes .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* o título da lista mora na barra, ao lado da busca e das ferramentas */
.ik-complementos .ik-itens__barra .card-title {
    margin: 0;
    text-transform: none;
}

/* o template capitaliza o placeholder do select2 ("Selecionar Categoria") */
.ik-complementos .select2-selection__placeholder {
    text-transform: none;
}

/* ==========================================================================
   EXPORTAÇÃO EM MASSA DE ITENS — painel da loja (23/09/2026, MASTER §5.29)
   A outra metade do fluxo da importação: reaproveita os blocos
   `.ik-importacao__*` pelos seletores `.ik-exportacao__*` somados acima.
   Próprio daqui: os filtros opcionais em fieldset.
   ========================================================================== */
.ik-exportacao__filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.ik-exportacao__filtro {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface-2);
}

.ik-exportacao__filtro legend {
    float: none;
    width: auto;
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-exportacao__filtro .form-check {
    padding: 0.25rem 0;
}

.ik-exportacao__faixa[hidden] {
    display: none;
}

/* ==========================================================================
   Relatório de repasses do painel da loja (23/09/2026, MASTER §5.29)
   Escopo `.ik-repasses` sobre `.ik-pedidos` + `.ik-relatorio__*` (§5.23).
   Três KPIs por estado, na régua das etiquetas (§5.15): pendente âmbar,
   concluído verde, cancelado vermelho — o template pintava pendente de verde
   e concluído de laranja. E a faixa de ajuda com o atalho para as formas de saque.
   ========================================================================== */
.order--card.ikl--rep-pendente {
    --ik-kpi-icone: var(--ik-icone-tempo);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fef8ee;
    --ik-kpi-borda: #f3dcb6;
}

.order--card.ikl--rep-concluido {
    --ik-kpi-icone: var(--ik-icone-check-check);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e8f7f1;
    --ik-kpi-tenue: #f3fbf7;
    --ik-kpi-borda: #bfe6d5;
}

.order--card.ikl--rep-cancelado {
    --ik-kpi-icone: var(--ik-icone-cancelados);
    --ik-kpi-forte: #a3143a;
    --ik-kpi-claro: #fdecf0;
    --ik-kpi-tenue: #fef5f7;
    --ik-kpi-borda: #f5c2cf;
}

/* iKero 01/10/2026 (MASTER §5.108): repasse com previsão vencida no admin — os tons já medidos do cancelado
   (#a3143a sobre #fdecf0) com o ícone de alerta: é aviso, não cancelamento. */
.order--card.ikl--rep-atrasado {
    --ik-kpi-icone: var(--ik-icone-alerta);
    --ik-kpi-forte: #a3143a;
    --ik-kpi-claro: #fdecf0;
    --ik-kpi-tenue: #fef5f7;
    --ik-kpi-borda: #f5c2cf;
}

.ik-repasses__ajuda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface);
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-repasses__ajuda p {
    flex: 1 1 24rem;
}


/* ==========================================================================
   Campanhas básicas do painel da loja (§5.30, 23/09/2026)
   /restaurant-panel/campaign/list. Escopo `.ik-campanhas` somado a `.ik-item`
   (topo com disco, caixa de frase) e `.ik-itens` (barra, tabela, foto 48px,
   vazio). Aqui só o que os dois não têm: o ícone do topo (Lucide `megaphone`),
   a descrição em duas linhas e a altura das ações da linha.
   ========================================================================== */
:root {
    --ik-icone-campanha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3Cpath d='M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14'/%3E%3Cpath d='M8 6v8'/%3E%3C/svg%3E");
}

.ik-icone--campanha {
    -webkit-mask-image: var(--ik-icone-campanha);
    mask-image: var(--ik-icone-campanha);
}

/* a descrição fica sob o título, em até duas linhas — a tabela é `table-nowrap` */
.ik-campanhas__descricao {
    display: -webkit-box;
    max-width: 420px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.4;
}

.ik-campanhas__acao {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* o total mora dentro do h1 do topo, ao lado do título */
.ik-campanhas .page-header-title .ik-itens__total {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    font-size: 0.8125rem;
}

/* ==========================================================================
   CATEGORIAS — painel da loja (23/09/2026, MASTER §5.31)
   Consulta somente leitura das categorias da plataforma, agrupadas:
   principal com as subcategorias embaixo, contagem de itens da loja em cada
   linha. Reaproveita os blocos da lista de itens pelos seletores somados.
   ========================================================================== */
.ik-categorias__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.ik-categorias__subtitulo {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
}

.ik-categorias__principal td {
    background-color: var(--ik-surface-2);
}

.ik-categorias__nome {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ik-text);
    font-weight: 600;
}

/* subcategoria: recuada, com o ramo desenhado por borda */
.ik-categorias__filha .ik-categorias__nome {
    padding-left: 2.25rem;
    font-weight: 500;
    position: relative;
}

.ik-categorias__filha .ik-categorias__nome::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: -0.875rem;
    bottom: 50%;
    width: 0.75rem;
    border-left: 1px solid var(--ik-border-strong);
    border-bottom: 1px solid var(--ik-border-strong);
    border-bottom-left-radius: 4px;
}

.ik-categorias__foto--vazia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ik-text-subtle);
}

.ik-categorias__id {
    font-variant-numeric: tabular-nums;
}

.ik-categorias__itens {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 32px;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.ik-categorias__itens:hover {
    border-color: var(--ik-accent-soft-2);
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
    text-decoration: none;
}

.ik-categorias__itens--zero {
    color: var(--ik-text-muted);
    font-weight: 500;
    pointer-events: none;
}

/* ==========================================================================
   Relatório de pedidos do painel da loja (23/09/2026, MASTER — seção do relatório
   de pedidos). Escopo `.ik-relatorio-pedidos` sobre `.ik-pedidos` + `.ik-relatorio__*`.
   Os cartões são os `.ikl--*` da Início (§5.4); só "Cancelado" precisava de classe.
   Cada cartão é um link que filtra por etapa; o ativo ganha a borda forte.
   ========================================================================== */
.order--card.ikl--cancelado {
    --ik-kpi-icone: var(--ik-icone-cancelados);
    --ik-kpi-forte: #a3143a;
    --ik-kpi-claro: #fdecf0;
    --ik-kpi-tenue: #fef5f7;
    --ik-kpi-borda: #f5c2cf;
}

.ik-relatorio-pedidos__kpis {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ik-relatorio-pedidos__kpis .order--card {
    color: inherit;
    text-decoration: none;
}

/* iKero 24/09/2026: numa fileira só de compactos, os cinco cartões que na Início ficam
   brancos (segunda fileira, §5.4) recebem o fundo tingido do seu status — visto em
   tela pelo proprietário: metade colorida, metade branca. Só neste escopo. */
.ik-relatorio-pedidos__kpis .order--card.ikl--a-caminho {
    --ik-kpi-claro: #eaf0fe;
    --ik-kpi-tenue: #f5f8fe;
    --ik-kpi-borda: #cddcfb;
}

.ik-relatorio-pedidos__kpis .order--card.ikl--entregue {
    --ik-kpi-claro: #e8f7f1;
    --ik-kpi-tenue: #f3fbf7;
    --ik-kpi-borda: #bfe6d5;
}

.ik-relatorio-pedidos__kpis .order--card.ikl--reembolsado {
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fef8ee;
    --ik-kpi-borda: #f3dcb6;
}

.ik-relatorio-pedidos__kpis .order--card.ikl--agendado,
.ik-relatorio-pedidos__kpis .order--card.ikl--todos {
    --ik-kpi-claro: #f4f4f5;
    --ik-kpi-tenue: #fafafa;
    --ik-kpi-borda: #e4e4e7;
}

.ik-relatorio-pedidos__kpis .order--card[aria-current="true"] {
    box-shadow: 0 0 0 2px var(--ik-kpi-forte, var(--ik-border-strong));
}

.ik-relatorio-pedidos__kpis .order--card:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* select2 do cliente na altura e na caixa dos outros campos (§5.7). O template
   empilha `line-height` de 28px, `-webkit-box` no texto e `capitalize` no
   placeholder ("Todos Os Clientes"), e o texto descia dentro de uma caixa mais
   alta (visto em tela pelo proprietário, 24/09/2026). Flex centrado resolve os três. */
.ik-relatorio-pedidos .select2-container {
    width: 100% !important;
}

.ik-relatorio-pedidos .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    padding: 0 2.25rem 0 0.875rem;
    border: 1px solid var(--ik-border-strong);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
}

.ik-relatorio-pedidos .select2-container--default.select2-container--focus .select2-selection--single,
.ik-relatorio-pedidos .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ik-accent);
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.15);
}

.ik-relatorio-pedidos .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    color: var(--ik-text);
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ik-relatorio-pedidos .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ik-text-subtle);
    text-transform: none;
}

.ik-relatorio-pedidos .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0.75rem;
    height: 44px;
    width: 1rem;
}

.ik-relatorio-pedidos .select2-container--default .select2-selection--single .select2-selection__clear {
    float: none;
    margin: 0 0.5rem 0 0;
    color: var(--ik-text-muted);
    font-weight: 500;
}

/* subcategorias recolhíveis (23/09/2026): botão de 32 px na linha da principal,
   seta que gira quando aberta; um espaçador do mesmo tamanho
   (`.ik-categorias__espaco`, classe própria — 24/09) mantém o alinhamento nas
   principais sem filhas. ⛔ O espaçador NÃO herda a classe do botão: o `:hover`
   do botão (0,2,0) vencia o modificador `--vazio` (0,1,0) e a principal sem
   filhas mostrava o contorno do botão ao passar o mouse. */
.ik-categorias__alternar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    color: var(--ik-text-muted);
    cursor: pointer;
}

.ik-categorias__alternar:hover {
    border-color: var(--ik-border-strong);
    color: var(--ik-text);
}

.ik-categorias__alternar .ik-icone {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.ik-categorias__alternar[aria-expanded="true"] .ik-icone {
    transform: rotate(180deg);
}

.ik-categorias__espaco {
    display: inline-block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.ik-categorias__ferramentas .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

@media (prefers-reduced-motion: reduce) {
    .ik-categorias__alternar .ik-icone {
        transition: none;
    }
}


/* ==========================================================================
   Campanhas de item do painel da loja (§5.33, 24/09/2026)
   /restaurant-panel/campaign/item/list e /campaign/view/{id}. Somam-se aos
   escopos `.ik-item`, `.ik-itens` e `.ik-campanhas` (§5.30). Aqui só o preço
   (cheio riscado + final) e o detalhe em três cartões (`.ik-campanha-item`).
   ========================================================================== */
.ik-campanhas__preco-cheio {
    display: block;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    text-decoration: line-through;
}

.ik-campanhas__preco-final {
    color: var(--ik-text);
    font-weight: 600;
}

.ik-campanha-item__titulo {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-campanha-item__subtitulo {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-campanha-item__foto {
    display: block;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
}

.ik-campanha-item__dl {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.ik-campanha-item__dl dt {
    color: var(--ik-text-muted);
    font-weight: 500;
}

.ik-campanha-item__dl dd {
    margin: 0;
    color: var(--ik-text);
}

.ik-campanha-item__descricao {
    color: var(--ik-text);
    line-height: 1.5;
}

.ik-campanha-item__descricao > :last-child {
    margin-bottom: 0;
}

.ik-campanha-item__secao {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ik-border);
}

.ik-campanha-item__grupo + .ik-campanha-item__grupo {
    margin-top: 0.75rem;
}

.ik-campanha-item__grupo-nome {
    margin: 0 0 0.375rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-campanha-item__pedidos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.ik-campanha-item__pedidos .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 575.98px) {
    .ik-campanha-item__dl {
        grid-template-columns: 1fr;
        gap: 0.125rem 0;
    }
    .ik-campanha-item__dl dd {
        margin-bottom: 0.5rem;
    }
}

/* ==========================================================================
   Período personalizado dos relatórios da loja (24/09/2026, MASTER — seção do
   período personalizado). O partial `_periodo-personalizado` reusa o campo
   `.ik-filtro__periodo` e o calendário `.ik-filtro__calendario` das avaliações
   (§5.16.1) dentro da grade `.ik-relatorio__filtros`: o campo ocupa uma coluna,
   o calendário a largura toda. Sem `<input type="date">` nativo.
   ========================================================================== */
.ik-relatorio__filtros .ik-periodo__campo,
.ik-despesas__filtros .ik-periodo__campo {
    min-height: 44px;
    height: 44px;
    border-color: var(--ik-border-strong);
    font-size: 0.875rem;
}

/* homologação em tela de 24/09/2026: "Selecionar período" quebrava em duas linhas
   numa coluna de 170 px — o texto fica numa linha e corta com reticências */
.ik-relatorio__filtros .ik-periodo__campo .ik-filtro__periodo-texto,
.ik-despesas__filtros .ik-periodo__campo .ik-filtro__periodo-texto {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ik-relatorio__filtros .ik-periodo__campo:focus-visible,
.ik-despesas__filtros .ik-periodo__campo:focus-visible {
    outline: none;
    border-color: var(--ik-accent);
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.15);
}

/* 24/09/2026 (pedido do proprietário): o calendário é um painel flutuante que abre PARA CIMA do campo, por
   cima dos outros filtros — como linha da grade (`order: 90`) ele empurrava a página. Mesma receita do
   período do anúncio (§5.51): caixa relativa, painel absoluto, abaixo do cabeçalho fixo (1030). */
.ik-periodo__caixa {
    position: relative;
}

.ik-relatorio__filtros .ik-periodo__calendario,
.ik-despesas__filtros .ik-periodo__calendario {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    z-index: 1020;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    margin: 0;
    background-color: var(--ik-surface);
    box-shadow: 0 12px 32px rgba(24, 24, 27, 0.16);
}

/* compacto (dias de 34 px, sem margem extra) para caber acima do campo, que nos relatórios fica perto do topo */
.ik-relatorio__filtros .ik-periodo__calendario .flatpickr-calendar .flatpickr-day,
.ik-despesas__filtros .ik-periodo__calendario .flatpickr-calendar .flatpickr-day {
    height: 34px;
    line-height: 32px;
    margin: 1px 0;
}

/* sem espaço acima nem rolando a página (campo no topo da página), abre para baixo — ainda por cima do resto */
.ik-relatorio__filtros .ik-periodo__calendario--abaixo,
.ik-despesas__filtros .ik-periodo__calendario--abaixo {
    top: calc(100% + 0.5rem);
    bottom: auto;
}

/* visto em tela em 24/09/2026: numa coluna de 170 px o texto "dd/mm/aaaa – dd/mm/aaaa"
   cortava em "01/09/20…" — o campo ocupa duas colunas da grade */
.ik-relatorio__filtros .ik-periodo__bloco,
.ik-despesas__filtros .ik-periodo__bloco {
    grid-column: span 2;
}

/* numa coluna só (390 px): o campo volta a uma coluna (um `span 2` num `auto-fit`
   de uma coluna cria uma coluna implícita e a grade vira duas) e o calendário fica
   logo abaixo do campo que o abre, não depois do "Aplicar". ⚠️ Este bloco precisa
   ficar DEPOIS das regras base: um `@media` que vem antes no arquivo perde para a
   regra base de mesma especificidade — foi assim que a primeira versão (dentro do
   `@media` da grade, mil linhas acima) não fez efeito nenhum */
@media (max-width: 575.98px) {
    .ik-relatorio__filtros .ik-periodo__bloco,
    .ik-despesas__filtros .ik-periodo__bloco {
        grid-column: auto;
    }

    .ik-relatorio__filtros .ik-periodo__calendario,
    .ik-despesas__filtros .ik-periodo__calendario {
        max-width: 100%;
    }
}

/* ==========================================================================
   Cupons do painel da loja (§5.37, 24/09/2026)
   /restaurant-panel/coupon/add-new e /coupon/update/{id}. Somam-se aos escopos
   `.ik-item` (topo, caixa de frase) e `.ik-itens` (barra, tabela, ações, vazio).
   Aqui: o código em monoespaço, os textos de ajuda, o aviso de quem paga e o
   detalhe do modal (cartão neutro — o template tinha um bloco laranja cheio).
   ========================================================================== */
.ik-cupons__codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ik-cupons__codigo-lista {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
}

.ik-cupons__ajuda {
    display: block;
    margin-top: 0.375rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ik-cupons__gerar {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ik-accent-em-soft);
    text-transform: none;
}

.ik-cupons__quem-paga {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ik-cupons__acoes .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.ik-cupons .ik-itens__barra .card-title {
    margin: 0;
    text-transform: none;
}

/* modal de detalhe do cupom (refeito 24/09/2026 à tarde, referência do
   proprietário): cabeçalho com o disco neutro do topo (§5.23), benefício em
   destaque, linhas rótulo/valor com régua entre elas e a nota de quem paga como
   cartão informativo NEUTRO — informação nunca é laranja nem azul cheio (§1, §3). */
#coupon__details .modal-dialog {
    max-width: 40rem;
}

#coupon__details .modal-content {
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    box-shadow: var(--ik-shadow-md);
}

#coupon__details .modal-header {
    padding-bottom: 0;
}

.ik-cupons__detalhe {
    padding: 0 1.5rem 1.5rem;
}

.ik-cupons__detalhe-topo {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-cupons__detalhe-topo .ik-item__topo-disco {
    width: 56px;
    height: 56px;
}

.ik-cupons__detalhe-topo .ik-icone {
    width: 26px;
    height: 26px;
    background-color: var(--ik-accent);
}

.ik-cupons__detalhe-cabecalho {
    min-width: 0;
}

.ik-cupons__detalhe-titulo {
    margin: 0 0 0.125rem;
    font-size: 0.9375rem;
    color: var(--ik-text-muted);
    overflow-wrap: anywhere;
}

.ik-cupons__detalhe-desconto {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ik-text);
    font-variant-numeric: tabular-nums;
}

.ik-cupons__dl {
    display: grid;
    grid-template-columns: minmax(150px, 12rem) 1fr;
    align-items: center;
    gap: 0;
    margin: 0 0 1.25rem;
}

.ik-cupons__dl dt,
.ik-cupons__dl dd {
    padding: 0.8125rem 0;
    border-bottom: 1px solid var(--ik-border);
}

.ik-cupons__dl dt {
    color: var(--ik-text-muted);
    font-weight: 500;
}

.ik-cupons__dl dd {
    margin: 0;
    color: var(--ik-text);
    font-weight: 500;
}

.ik-cupons__dl dt:last-of-type,
.ik-cupons__dl dd:last-of-type {
    border-bottom: 0;
}

.ik-cupons__dl-forte {
    font-weight: 600 !important;
}

.ik-cupons__quem-paga--nota {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    line-height: 1.5;
}

.ik-cupons__quem-paga--nota .ik-icone {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.125rem;
    background-color: var(--ik-text-muted);
}

@media (max-width: 575.98px) {
    .ik-cupons__detalhe {
        padding: 0 1rem 1rem;
    }
    .ik-cupons__dl {
        grid-template-columns: 1fr;
    }
    .ik-cupons__dl dt {
        padding-bottom: 0.125rem;
        border-bottom: 0;
        font-size: 0.875rem;
    }
    .ik-cupons__dl dd {
        padding-top: 0;
    }
    .ik-cupons__dl dt:last-of-type {
        border-bottom: 0;
    }
}


/* Validade do cupom (24/09/2026): o campo e o calendário do painel (§5.16.1/§5.36)
   dentro do formulário em `.row`; o calendário abre sob o campo, na largura do
   próprio campo (máx. 22 rem), como nos relatórios. */
.ik-cupons .ik-periodo__campo {
    min-height: 44px;
    height: 44px;
    border-color: var(--ik-border-strong);
}

.ik-cupons .ik-periodo__campo:focus-visible {
    outline: none;
    border-color: var(--ik-accent);
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.15);
}

.ik-cupons .ik-periodo__campo.is-preenchido .ik-filtro__periodo-texto {
    color: var(--ik-text);
    font-variant-numeric: tabular-nums;
}

.ik-cupons .ik-periodo__calendario {
    max-width: 22rem;
    margin-top: 0.5rem;
}

/* ==========================================================================
   Relatório de produtos da loja (§5.38, 24/09/2026)
   /restaurant-panel/report/food-wise-report. Reaproveita `.ik-pedidos` (§5.15),
   `.ik-relatorio__*` (§5.23) e o gráfico da Início (§5.21). Aqui só o que é
   próprio: os 4 KPIs, a média ao lado do título do gráfico, o item com foto e
   categoria e a nota geral em âmbar (cores de `.ik-status--pendente`).
   ========================================================================== */
/* vendido: verde, dinheiro que entrou (o mesmo do "Recebido" das transações) */
.order--card.ikl--prod-vendido {
    --ik-kpi-icone: var(--ik-icone-banknote);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e8f7f1;
    --ik-kpi-tenue: #f3fbf7;
    --ik-kpi-borda: #bfe6d5;
}

/* unidades e pedidos: neutros, um ícone por cartão (§5.4) */
.order--card.ikl--prod-unidades {
    --ik-kpi-icone: var(--ik-icone-talheres);
    --ik-kpi-forte: #3f3f46;
}

.order--card.ikl--prod-pedidos {
    --ik-kpi-icone: var(--ik-icone-sacola);
    --ik-kpi-forte: #3f3f46;
}

/* desconto: âmbar — dinheiro que a loja abriu mão, família de aviso; nunca laranja */
.order--card.ikl--prod-desconto {
    --ik-kpi-icone: var(--ik-icone-percentual);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fef8ee;
    --ik-kpi-borda: #f3dcb6;
}

/* o template capitaliza `.card-title` (global): "Vendas Por Ano", "Itens Vendidos" —
   visto em tela em 24/09/2026; mesma saída da Início (§5.21) */
.ik-relatorio-produtos .card-title {
    text-transform: none;
}

.ik-relatorio-produtos__media {
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-relatorio-produtos__media strong {
    color: var(--ik-text);
    font-variant-numeric: tabular-nums;
}

.ik-relatorio-produtos__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: inherit;
}

.ik-relatorio-produtos__item:hover .ik-pedidos__nome {
    color: var(--ik-accent-em-soft);
}

.ik-relatorio-produtos__foto {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--ik-radius);
    object-fit: cover;
    background-color: var(--ik-surface-2);
}

/* nome inteiro em até duas linhas (o template cortava em 20 letras) */
.ik-relatorio-produtos__nome {
    min-width: 12rem;
    max-width: 22rem;
    white-space: normal;
}

.ik-relatorio-produtos__nota {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}

.ik-relatorio-produtos__estrela {
    color: var(--ik-status-texto);
}

/* ==========================================================================
   Cupons da loja — revisão 2 (24/09/2026, tarde; MASTER §5.37)
   Erro por campo, código gerado com alvo de 44 px, placeholder sem caixa alta,
   filtro por situação na barra, contexto na edição, ações do modal, calendário
   da validade logo abaixo do campo em 1–2 colunas, lista em cartões a 575 px.
   ========================================================================== */
.ik-campo__erro {
    display: block;
    margin-top: 0.375rem;
    color: var(--ik-erro-texto);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ik-cupons__erro-geral {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ik-erro-texto);
    border-radius: var(--ik-radius);
    background-color: var(--ik-erro-fundo);
    color: var(--ik-erro-texto);
    font-size: 0.875rem;
}

.ik-cupons .form-control.is-invalid,
.ik-cupons .ik-periodo__campo.is-invalid {
    border-color: var(--ik-erro-texto);
    background-image: none;
    padding-right: 0.75rem;
}

.ik-cupons .form-control.is-invalid:focus,
.ik-cupons .ik-periodo__campo.is-invalid:focus-visible {
    border-color: var(--ik-erro-texto);
    box-shadow: 0 0 0 3px rgba(163, 20, 58, 0.15);
}

.ik-cupons__codigo::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

.ik-cupons__gerar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem !important;
}

.ik-cupons__situacao,
.ik-itens__busca .ik-cupons__situacao {
    /* "Todas as situações" inteiro: `.ik-itens__busca .form-control` (0,2,0) dava
       flex 1 1 auto, min-width 0 e o recuo de 2,5 rem da lupa ao select, que ficava
       "Todas a" — o seletor composto vence por ordem */
    min-height: 44px;
    width: auto;
    min-width: 12.5rem;
    max-width: 14rem;
    flex: 0 0 auto;
    padding-left: 0.75rem;
}

.ik-cupons__contexto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.ik-cupons__contexto-usos {
    color: var(--ik-text-muted);
}

.ik-cupons__detalhe-acoes {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.ik-cupons__detalhe-acoes .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* a linha do calendário vem logo depois da validade no DOM (1 e 2 colunas);
   a 3 colunas ela vai para depois da fileira validade | compra mínima | tipo
   de desconto, e o resto do formulário depois dela */
@media (min-width: 992px) {
    .ik-cupons__form > .ik-cupons__calendario-linha {
        order: 1;
    }
    .ik-cupons__form > .ik-cupons__depois-do-calendario {
        order: 2;
    }
}

/* lista em cartões: a tabela de 7 colunas rolava dentro do quadro e escondia
   validade, situação, interruptor e ações */
@media (max-width: 575.98px) {
    .ik-cupons .ik-itens__busca {
        flex-wrap: wrap;
    }
    .ik-cupons__situacao {
        max-width: none;
        width: 100%;
    }
    .ik-cupons .ik-itens__tabela thead {
        display: none;
    }
    .ik-cupons .ik-itens__tabela tbody,
    .ik-cupons .ik-itens__tabela tr {
        display: block;
    }
    .ik-cupons .ik-itens__tabela tr {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--ik-border);
    }
    .ik-cupons .ik-itens__tabela td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.375rem 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }
    .ik-cupons .ik-itens__tabela td::before {
        content: attr(data-rotulo);
        flex-shrink: 0;
        color: var(--ik-text-muted);
        font-size: 0.8125rem;
        text-align: left;
    }
    .ik-cupons .ik-itens__tabela td .ik-itens__nome-bloco {
        align-items: flex-end;
    }
    .ik-cupons .ik-itens__tabela td .ik-itens__acoes {
        justify-content: flex-end;
    }
}

/* ==========================================================================
   Folha lateral de edição (24/09/2026, MASTER §5.39) — primeiro uso: "Editar
   cupom". Entra da direita (pedido do proprietário; a primeira versão entrou da
   esquerda e foi corrigida no mesmo dia), fundo escurecido, 640 px (tela cheia no
   celular). O conteúdo é a página de edição em
   modo embutido (`layouts.vendor.embutido`) num iframe; o botão fechar flutua no
   canto superior direito da folha.
   ========================================================================== */
.ik-folha__fundo {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background-color: rgba(24, 24, 27, 0.45);
    opacity: 0;
    transition: opacity 250ms ease-out;
}

.ik-folha__fundo.is-aberto {
    opacity: 1;
}

.ik-folha {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1061;
    display: flex;
    flex-direction: column;
    width: min(640px, 100vw);
    background-color: var(--ik-bg);
    border-left: 1px solid var(--ik-border);
    box-shadow: -8px 0 24px rgba(24, 24, 27, 0.12);
    transform: translateX(100%);
    transition: transform 250ms ease-out;
}

.ik-folha.is-aberta {
    transform: translateX(0);
}

.ik-folha__quadro {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: transparent;
    transition: opacity var(--ik-transicao);
}

.ik-folha.is-carregando .ik-folha__quadro {
    opacity: 0;
}

.ik-folha.is-carregando::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--ik-border);
    border-top-color: var(--ik-text-muted);
    border-radius: 50%;
    animation: ik-folha-gira 800ms linear infinite;
}

@keyframes ik-folha-gira {
    to { transform: rotate(360deg); }
}

.ik-folha__fechar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    background-color: var(--ik-surface);
    color: var(--ik-text-muted);
    transition: color var(--ik-transicao), background-color var(--ik-transicao);
}

.ik-folha__fechar:hover {
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
}

.ik-folha__fechar .ik-icone {
    width: 20px;
    height: 20px;
}

.ik-folha__sentinela {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body.ik-folha-aberta {
    overflow: hidden;
}

/* a página dentro da folha: sem menu nem cabeçalho; o título não passa por baixo do fechar */
.ik-embutido {
    background-color: var(--ik-bg);
}

.ik-embutido .content.container-fluid {
    padding: 1.25rem 1.25rem 2rem;
}

.ik-embutido .page-header {
    padding-right: 3.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .ik-folha,
    .ik-folha__fundo,
    .ik-folha__quadro {
        transition: none;
    }
    .ik-folha.is-carregando::after {
        animation: none;
    }
}


/* ==========================================================================
   Relatório de impostos da loja (§5.40, 24/09/2026)
   /restaurant-panel/report/vendor-tax-report. Reaproveita `.ik-pedidos` (§5.15),
   `.ik-relatorio__*` (§5.23) e a folha lateral das avaliações (`.ik-filtro`,
   §5.16.1). Aqui só: os 3 KPIs, o aviso de imposto desligado, o total por nome
   de imposto e as linhas da folha.
   ========================================================================== */
.order--card.ikl--imp-pedidos {
    --ik-kpi-icone: var(--ik-icone-recibo);
    --ik-kpi-forte: #3f3f46;
}

.order--card.ikl--imp-valor {
    --ik-kpi-icone: var(--ik-icone-sacola);
    --ik-kpi-forte: #3f3f46;
}

/* imposto: índigo informativo (o mesmo do "Líquido" das transações) — não é status */
.order--card.ikl--imp-total {
    --ik-kpi-icone: var(--ik-icone-percentual);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f6f6fe;
    --ik-kpi-borda: #cfcff5;
}

/* aviso neutro (a nota de "quem paga" dos cupons, §5.37): informação, não erro */
.ik-relatorio-impostos__aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ik-relatorio-impostos__aviso > .ik-icone {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--ik-text-muted);
    font-size: 1.125rem;
}

.ik-relatorio-impostos__aviso p {
    margin: 0;
}

.ik-relatorio-impostos__aviso-titulo {
    font-weight: 600;
}

.ik-relatorio-impostos .card-title {
    text-transform: none;
}

.ik-relatorio-impostos__resumo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 1rem 1.5rem 1.25rem;
    list-style: none;
}

.ik-relatorio-impostos__resumo li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    font-size: 0.875rem;
}

/* folha: etiquetas e linhas nome · valor */
.ik-relatorio-impostos__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ik-relatorio-impostos__etiquetas .ik-status[hidden] {
    display: none;
}

.ik-relatorio-impostos__linhas {
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
}

.ik-relatorio-impostos__linhas > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.ik-relatorio-impostos__linhas dt {
    color: var(--ik-text-muted);
    font-weight: 400;
}

.ik-relatorio-impostos__linhas dd {
    margin: 0;
    color: var(--ik-text);
    font-weight: 600;
}

.ik-relatorio-impostos__grupos {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ik-relatorio-impostos__grupos:empty {
    display: none;
}

/* título do grupo com respiro da caixa de cima (visto em tela: colava) */
.ik-relatorio-impostos__grupo {
    margin: 0.5rem 0 0;
    color: var(--ik-text);
    font-size: 0.8125rem;
    font-weight: 600;
}

.ik-relatorio-impostos__grupo:first-child {
    margin-top: 0;
}

.ik-relatorio-impostos__sem-icone::before {
    display: none;
}

.ik-relatorio-impostos__total {
    background-color: var(--ik-surface-2);
}

/* ==========================================================================
   Relatório de ganhos da loja (§5.41, 24/09/2026)
   /restaurant-panel/report/restaurant-earning-report. Reaproveita `.ik-pedidos`
   (§5.15), `.ik-relatorio__*` (§5.23), a legenda e o gráfico da Início (§5.21).
   Aqui: os 3 KPIs com a variação, a divisão de ganhos e despesas, os mais
   vendidos e as abas das transações.
   ========================================================================== */
/* ganhos: verde, dinheiro que entrou (o "Recebido" das transações) */
.order--card.ikl--gan-ganhos {
    --ik-kpi-icone: var(--ik-icone-banknote);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e8f7f1;
    --ik-kpi-tenue: #f3fbf7;
    --ik-kpi-borda: #bfe6d5;
}

/* despesas: âmbar, dinheiro que saiu (família de aviso, §5.5); nunca laranja */
.order--card.ikl--gan-despesas {
    --ik-kpi-icone: var(--ik-icone-trending-down);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fef8ee;
    --ik-kpi-borda: #f3dcb6;
}

/* lucro: índigo informativo (o "Líquido" das transações) */
.order--card.ikl--gan-lucro {
    --ik-kpi-icone: var(--ik-icone-cifrao);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f6f6fe;
    --ik-kpi-borda: #cfcff5;
}

/* variação: neutra — subir despesa não é "bom", então nada de verde/vermelho aqui */
.ik-relatorio-ganhos__variacao {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    color: var(--ik-text-muted);
    font-size: 0.75rem;
}

.ik-relatorio-ganhos__variacao .ik-icone {
    font-size: 0.875rem;
}

.ik-relatorio-ganhos .card-title {
    text-transform: none;
}

.ik-relatorio-ganhos__divisao,
.ik-relatorio-ganhos__graficos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ik-relatorio-ganhos__graficos {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

@media (max-width: 991.98px) {
    .ik-relatorio-ganhos__divisao,
    .ik-relatorio-ganhos__graficos {
        grid-template-columns: 1fr;
    }
}

.ik-relatorio-ganhos__linhas,
.ik-relatorio-ganhos__top {
    margin: 0;
    padding: 0.5rem 1.5rem 1rem;
    list-style: none;
}

.ik-relatorio-ganhos__linhas li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--ik-border);
    font-size: 0.875rem;
}

.ik-relatorio-ganhos__linhas li:last-child {
    border-bottom: 0;
}

.ik-relatorio-ganhos__linhas strong {
    margin-inline-end: 0.5rem;
    color: var(--ik-text);
}

.ik-relatorio-ganhos__top li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.ik-relatorio-ganhos__top img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ik-radius);
    object-fit: cover;
    background-color: var(--ik-surface-2);
}

.ik-relatorio-ganhos__top-nome {
    flex: 1 1 auto;
    min-width: 0;
}

.ik-relatorio-ganhos__sem-itens {
    margin: 0;
    padding: 1.5rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-relatorio-ganhos__controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.5rem 0.5rem;
}

.ik-relatorio-ganhos__abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* aba: pílula neutra; ativa = borda --ik-accent + fundo --ik-accent-soft (o ativo da folha
   de filtros, §5.16.1), texto em --ik-accent-em-soft (4,92:1) */
.ik-relatorio-ganhos__aba {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.ik-relatorio-ganhos__aba:hover {
    border-color: var(--ik-border-strong);
    color: var(--ik-text);
}

.ik-relatorio-ganhos__aba[aria-current="page"] {
    border-color: var(--ik-accent);
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
    font-weight: 600;
}

.ik-relatorio-ganhos__busca {
    flex: 0 1 20rem;
    margin: 0;
}

/* celular (visto em tela no clone, 390 px): a porcentagem quebrava no meio da linha —
   vai para baixo do valor; busca ocupa a largura */
@media (max-width: 575.98px) {
    .ik-relatorio-ganhos__linhas li > .tabular {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
    }

    .ik-relatorio-ganhos__linhas strong {
        margin-inline-end: 0;
    }

    .ik-relatorio-ganhos__busca {
        flex-basis: 100%;
    }
}

/* ==========================================================================
   Meu plano de negócio — painel da loja (§5.42, 24/09/2026)
   /restaurant-panel/subscription/subscriber-detail. Reaproveita `.ik-pedidos`
   (§5.15), `.ik-relatorio__kpis` (§5.23) e `.ik-status--ativa/expirada/cancelado`.
   ========================================================================== */
/* comissão e validade: índigo informativo — plano não é status */
.order--card.ikl--plano-comissao,
.order--card.ikl--plano-validade {
    --ik-kpi-icone: var(--ik-icone-percentual);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f6f6fe;
    --ik-kpi-borda: #cfcff5;
}

.order--card.ikl--plano-validade {
    --ik-kpi-icone: var(--ik-icone-calendario-dias);
}

.order--card.ikl--plano-pago {
    --ik-kpi-icone: var(--ik-icone-cifrao);
    --ik-kpi-forte: #3f3f46;
}

.order--card.ikl--plano-usos {
    --ik-kpi-icone: var(--ik-icone-historico);
    --ik-kpi-forte: #3f3f46;
}

.ik-plano .card-title {
    text-transform: none;
}

.ik-plano__comissao {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 575.98px) {
    .ik-plano__comissao {
        grid-template-columns: 1fr;
    }
}

.ik-plano__comissao .order--card {
    margin: 0;
}

.ik-plano__nome {
    margin: 0 0 0.375rem;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-plano__texto {
    margin: 0;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ik-plano__subtitulo {
    margin: 0 0 0.75rem;
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.ik-plano__recursos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ik-plano__recursos li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ik-text);
    font-size: 0.875rem;
}

.ik-plano__recursos .ik-icone {
    flex-shrink: 0;
    color: #0a6045;
}

/* não incluído: apagado e com o "x" neutro — ausência, não erro */
.ik-plano__recurso--fora {
    color: var(--ik-text-muted) !important;
}

.ik-plano__recurso--fora .ik-icone {
    color: var(--ik-text-subtle);
}

.ik-plano__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: transparent;
}

.ik-plano__abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* aba: a pílula do relatório de ganhos (§5.41) — ativa em --ik-accent-soft */
.ik-plano__aba {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.ik-plano__aba:hover {
    border-color: var(--ik-border-strong);
    color: var(--ik-text);
}

.ik-plano__aba[aria-current="page"] {
    border-color: var(--ik-accent);
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
    font-weight: 600;
}

.ik-plano .ik-pedidos__vazio .btn {
    margin-top: 1rem;
}

/* o template capitaliza os botões ("Trocar Ou Renovar Plano") — visto no clone */
.ik-plano .btn {
    text-transform: none;
}

@media (max-width: 575.98px) {
    .ik-plano__acoes .btn {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Cargos de funcionário — painel da loja (§5.43, 24/09/2026)
   /restaurant-panel/custom-role/create e /edit/{id}. Reaproveita `.ik-pedidos`
   (§5.15) e `.ik-campo__erro` (§5.37). Permissões em grupos, cada um com a sua
   caixa-mãe ("meio marcado" quando parte está marcada).
   ========================================================================== */
.ik-cargos .card-title,
.ik-cargos .btn {
    text-transform: none;
}

.ik-cargos__form {
    display: grid;
    gap: 1.5rem;
}

.ik-cargos__nome {
    max-width: 28rem;
}

.ik-cargos__permissoes {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ik-cargos__permissoes-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ik-cargos__legenda {
    margin: 0;
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.ik-cargos__ajuda {
    margin: 0.125rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-cargos__grupos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
}

.ik-cargos__grupo {
    padding: 0.75rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

.ik-cargos__todos,
.ik-cargos__grupo-topo,
.ik-cargos__modulo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 32px;
    margin: 0;
    color: var(--ik-text);
    font-size: 0.875rem;
    cursor: pointer;
}

.ik-cargos__grupo-topo {
    margin-bottom: 0.25rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--ik-border);
    font-weight: 600;
}

.ik-cargos__todos {
    padding: 0 0.875rem;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    background-color: var(--ik-surface);
    font-weight: 500;
}

.ik-cargos input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ik-accent-fill);
}

.ik-cargos input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-cargos__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: transparent;
}

.ik-cargos__busca {
    flex: 0 1 18rem;
    margin: 0;
}

.ik-cargos__lista-permissoes {
    min-width: 16rem;
    white-space: normal;
}

.ik-cargos .ik-pedidos__tabela th {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ik-cargos__acoes .btn,
    .ik-cargos__busca {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Funcionários — painel da loja (§5.44, 24/09/2026)
   /restaurant-panel/employee/add-new e /edit/{id}. Reaproveita `.ik-pedidos`
   (§5.15), `.ik-campo__erro` (§5.37) e o componente de foto do template.
   ========================================================================== */
.ik-funcionarios .card-title,
.ik-funcionarios .btn {
    text-transform: none;
}

.ik-funcionarios__form {
    display: grid;
    gap: 2rem;
}

.ik-funcionarios__secao + .ik-funcionarios__secao {
    padding-top: 1.5rem;
    border-top: 1px solid var(--ik-border);
}

.ik-funcionarios__titulo {
    margin: 0 0 0.25rem;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-funcionarios__dica {
    margin: 0.375rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.ik-funcionarios__dados {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 2rem;
    margin-top: 1rem;
}

.ik-funcionarios__campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-content: start;
}

.ik-funcionarios__campos .form-group {
    margin-bottom: 0;
}

.ik-funcionarios__foto {
    padding: 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    text-align: center;
}

/* a linha de formato do componente de foto vem com `text-capitalize` do template */
.ik-funcionarios__foto .text-capitalize {
    text-transform: none !important;
}

.ik-funcionarios__acesso {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    margin-top: 1rem;
}

.ik-funcionarios__senha {
    position: relative;
}

.ik-funcionarios__senha .form-control {
    padding-right: 2.75rem;
}

.ik-funcionarios__olho {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: var(--ik-text-muted);
    transform: translateY(-50%);
    cursor: pointer;
}

.ik-funcionarios__olho[aria-pressed="true"] {
    color: var(--ik-text);
}

.ik-funcionarios__olho:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-funcionarios__regras {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-funcionarios__regras li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ik-funcionarios__regras .ik-icone {
    width: 14px;
    height: 14px;
}

.ik-funcionarios__regras li.is-ok {
    color: var(--ik-sucesso-texto);
}

.ik-funcionarios__conferencia {
    min-height: 1.2em;
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
}

.ik-funcionarios__conferencia.is-ok {
    color: var(--ik-sucesso-texto);
}

.ik-funcionarios__conferencia.is-erro {
    color: var(--ik-erro-texto);
}

.ik-funcionarios__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: transparent;
}

/* Lista (§5.45): topo com a ação primária, filtros, pessoa com foto, folha de detalhes */
.ik-funcionarios__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ik-funcionarios__busca {
    grid-column: span 2;
}

.ik-funcionarios__filtrar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

.ik-funcionarios__limpar {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    text-align: center;
    text-decoration: underline;
}

.ik-funcionarios__pessoa {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 14rem;
}

.ik-funcionarios__pessoa-texto {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ik-funcionarios__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--ik-surface-2);
}

.ik-funcionarios__avatar--grande {
    width: 56px;
    height: 56px;
}

.ik-funcionarios__acoes-linha {
    justify-content: flex-start;
    align-items: center;
}

.ik-funcionarios__folha .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-transform: none;
}

.ik-funcionarios__travado {
    align-self: center;
    color: var(--ik-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.ik-funcionarios__ficha {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.625rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}

.ik-funcionarios__ficha dt {
    color: var(--ik-text-muted);
    font-weight: 400;
}

.ik-funcionarios__ficha dd {
    margin: 0;
    color: var(--ik-text);
    overflow-wrap: anywhere;
}

.ik-funcionarios__permissoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.ik-funcionarios__permissoes li {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    font-size: 0.8125rem;
}

.ik-funcionarios__permissoes.is-vazio li {
    border: 0;
    padding: 0;
    background: none;
    color: var(--ik-text-muted);
}

@media (max-width: 991.98px) {
    .ik-funcionarios__dados {
        grid-template-columns: minmax(0, 1fr);
    }

    .ik-funcionarios__acesso {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ik-funcionarios__busca {
        grid-column: auto;
    }

    .ik-funcionarios__topo .btn {
        flex: 1 1 100%;
    }

    .ik-funcionarios__campos {
        grid-template-columns: minmax(0, 1fr);
    }

    .ik-funcionarios__acoes .btn {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Minha loja — painel da loja (§5.46, 24/09/2026)
   /restaurant-panel/restaurant/view. Reaproveita `.ik-pedidos` (§5.15), `.ik-status`
   e o interruptor do template. Capa e logotipo só exibem; "Trocar" abre o modal.
   ========================================================================== */
.ik-loja .card-title,
.ik-loja .btn {
    text-transform: none;
}

.ik-loja__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ik-loja__titulo {
    margin: 0 0 0.25rem;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-loja__texto {
    margin: 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.ik-loja__controle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ik-loja__capa {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1100 / 320;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

.ik-loja__capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ik-loja__trocar {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 36px;
    border: 1px solid var(--ik-border);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.8125rem;
}

.ik-loja__trocar .ik-icone {
    width: 16px;
    height: 16px;
}

.ik-loja__identidade {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: -2.5rem;
    padding: 0 1rem;
}

.ik-loja__logo {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    padding: 4px;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
}

.ik-loja__logo img {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--ik-radius) - 2px);
    object-fit: cover;
}

.ik-loja__logo-trocar {
    position: absolute;
    right: -10px;
    bottom: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ik-border);
    border-radius: 50%;
    background-color: var(--ik-surface);
    color: var(--ik-text);
    cursor: pointer;
}

.ik-loja__logo-trocar .ik-icone {
    width: 16px;
    height: 16px;
}

.ik-loja__logo-trocar:focus-visible,
.ik-loja__trocar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-loja__nome {
    min-width: 0;
    padding-bottom: 0.25rem;
}

.ik-loja__nome h3 {
    font-size: 1.125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* links de texto: sublinhados em --ik-text, laranja só no hover (regra do detalhe do pedido) */
.ik-loja__site,
.ik-loja__ficha a {
    color: var(--ik-text);
    text-decoration: underline;
}

.ik-loja__site {
    font-size: 0.8125rem;
}

.ik-loja__site:hover,
.ik-loja__ficha a:hover {
    color: var(--ik-accent-fill);
}

.ik-loja__ficha {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ik-border);
}

.ik-loja__ficha-larga {
    grid-column: 1 / -1;
}

.ik-loja__ficha dt {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

.ik-loja__ficha dt .ik-icone {
    width: 16px;
    height: 16px;
}

.ik-loja__ficha dd {
    margin: 0;
    color: var(--ik-text);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.ik-loja__aviso-form {
    margin-top: 1.25rem;
}

.ik-loja__aviso-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
}

.ik-loja__contador {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-loja__previa {
    overflow: hidden;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

.ik-loja__previa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ik-loja__previa--capa {
    aspect-ratio: 1100 / 320;
}

.ik-loja__previa--logo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.ik-loja__modal-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 767.98px) {
    .ik-loja__ficha {
        grid-template-columns: minmax(0, 1fr);
    }

    .ik-loja__identidade {
        margin-top: -1.5rem;
        padding: 0 0.5rem;
    }

    .ik-loja__logo {
        width: 72px;
        height: 72px;
    }
}

/* ==========================================================================
   Configuração de negócios — painel da loja (§5.47, 24/09/2026)
   /restaurant-panel/business-settings/restaurant-setup. Escopo sobre a marcação do template:
   rótulos sem Title Case, opção desligada pela plataforma, barra de salvar fixa, aviso dos horários.
   ========================================================================== */
.ik-config .input-label,
.ik-config .form-label,
.ik-config .switch--label,
.ik-config .toggle-switch span,
.ik-config .btn {
    text-transform: none !important;
}

.ik-config .custom-control-input:disabled ~ .custom-control-label {
    cursor: not-allowed;
}

.ik-config__desligada {
    display: inline-flex;
    margin: 0.5rem 0 0;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background-color: var(--ik-surface-2);
    color: var(--ik-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.ik-config__link {
    color: var(--ik-text);
    font-weight: 600;
    text-decoration: underline;
}

.ik-config__link:hover {
    color: var(--ik-accent-fill);
}

.ik-config__na-hora {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

/* iKero 06/10/2026 (MASTER §5.178.6): aba Plano de negócio da ficha da loja — formulário da comissão e histórico */
.ik-bpa__comissao {
    max-width: 36rem;
}

/* o template capitaliza .input-label e .card-title ("Comissão Por Pedido") */
.ik-plano .input-label,
.ik-plano .card-title,
.ik-plano .toggle-switch span,
.ik-plano .btn {
    text-transform: none !important;
}

.ik-bpa__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1rem;
}

.ik-bpa__campo {
    flex: 1 1 12rem;
}

.ik-bpa__linha .btn {
    margin-top: 1.75rem; /* alinha com o campo, abaixo do rótulo */
}

.ik-bpa__comissao .form-control,
.ik-bpa__comissao .btn {
    min-height: 2.75rem; /* 44px: alvo de toque */
}

/* somente leitura não pode parecer editável: superfície tênue e texto secundário */
.ik-bpa__comissao .form-control[readonly] {
    background-color: var(--ik-surface-2);
    color: var(--ik-text-muted);
    cursor: not-allowed;
}

/* iKero 06/10/2026 (MASTER §5.178.8): aba Descontos da ficha da loja — resumo em grade, dicas, controles de 44px */
.ik-dsl__resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0 0 1rem;
}

.ik-dsl__resumo dt {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

.ik-dsl__resumo dd {
    margin: 0.125rem 0 0;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-dsl__dica {
    margin: 0.375rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-dsl .form-control,
.ik-dsl .btn {
    min-height: 2.75rem;
}

.ik-dsl .input-label,
.ik-dsl .card-title,
.ik-dsl .btn {
    text-transform: none !important;
}

/* formulário de compra do plano: a opção de pagamento é rádio acessível (sr-only) — o foco aparece no cartão */
.payment-item input:focus-visible ~ .payment-item-inner {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-bpa__historico {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-bpa__historico li + li {
    margin-top: 0.375rem;
}

/* iKero 06/10/2026 (MASTER §5.178.5): aba Configurações da ficha da loja — comissão cobrada e opção travada pela plataforma */
.ik-config__comissao {
    margin: 0 0 1rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-config__comissao strong {
    color: var(--ik-text);
}

.ik-config__plataforma {
    margin: 0.375rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

label.toggle-switch:has(.toggle-switch-input:disabled) {
    cursor: not-allowed;
    opacity: 0.7;
}

.ik-config__na-hora .ik-icone {
    width: 16px;
    height: 16px;
}

.ik-config__salvar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    align-items: center;
    margin: 0 -1rem -1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ik-border);
    background-color: var(--ik-surface);
}

.ik-config__salvar-dica {
    margin-right: auto;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

@media (max-width: 575.98px) {
    .ik-config__salvar-dica {
        flex: 1 1 100%;
    }

    .ik-config__salvar .btn {
        flex: 1 1 0;
    }
}

/* ==========================================================================
   Meu código QR — painel da loja (§5.48, 24/09/2026)
   /restaurant-panel/restaurant/qr-view e a impressão (página própria, que também carrega este
   tema). Um cartão só (`_cartao-qr`) na prévia e no papel; laranja só como faixa de marca.
   ========================================================================== */
.ik-qr .card-title,
.ik-qr .btn {
    text-transform: none;
}

.ik-qr__grade {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.ik-qr__previa {
    display: flex;
    justify-content: center;
    background-color: var(--ik-surface-2);
}

.ik-qr__cartao {
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    border: 1px solid var(--ik-border);
    border-top: 6px solid var(--ik-accent-fill);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    text-align: center;
}

.ik-qr__cartao-topo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem 0;
}

.ik-qr__logo {
    width: 64px;
    height: 64px;
    border: 1px solid var(--ik-border);
    border-radius: 50%;
    object-fit: cover;
}

.ik-qr__loja {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ik-text-muted);
}

.ik-qr__titulo {
    margin: 0.75rem 1rem 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.ik-qr__codigo {
    display: flex;
    justify-content: center;
    margin: 1rem auto 0;
}

.ik-qr__codigo svg {
    width: 220px;
    height: 220px;
}

.ik-qr__legenda {
    margin: 0.5rem 1rem 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-qr__descricao {
    margin: 0.75rem 1.25rem 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ik-qr__rodape {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ik-border);
    background-color: var(--ik-surface-2);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.ik-qr__vazio {
    /* flex: o ícone é um span com máscara e só ganha tamanho como item flex (armadilha §8) */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.25rem 2rem;
}

.ik-qr__vazio-titulo {
    margin: 0.75rem 0 0.25rem;
    font-weight: 600;
}

.ik-qr__vazio-texto,
.ik-qr__dica {
    margin: 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.ik-qr__dica {
    margin-top: 0.375rem;
}

.ik-qr__sugerido {
    margin-top: 0.375rem;
    color: var(--ik-text);
    font-size: 0.8125rem;
    text-decoration: underline;
}

.ik-qr__acoes {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 991.98px) {
    .ik-qr__grade {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ik-qr__acoes .btn {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Configuração de notificação — painel da loja (§5.49, 24/09/2026)
   /restaurant-panel/business-settings/notification-setup. Reaproveita `.ik-pedidos` (§5.15).
   ========================================================================== */
.ik-notif .card-title {
    text-transform: none;
}

.ik-notif__subtitulo {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-notif__busca {
    flex: 0 1 18rem;
    margin: 0;
}

.ik-notif__tabela th:not(:first-child),
.ik-notif__tabela td:not(:first-child) {
    width: 9rem;
}

.ik-notif__grupo th {
    padding-top: 1.25rem;
    color: var(--ik-text);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background-color: var(--ik-surface-2);
}

.ik-notif__nd {
    color: var(--ik-text-muted);
    font-size: 0.75rem;
}

/* o título do aviso é frase ("Saque aprovado"), não nome próprio: sem a capitalização herdada */
.ik-notif__tabela .ik-pedidos__nome {
    text-transform: none;
}

@media (max-width: 575.98px) {
    .ik-notif__busca {
        flex: 1 1 100%;
    }

    /* no celular a tabela rola dentro do cartão; o assunto guarda largura para ler em 2–3 linhas */
    .ik-notif__tabela th:first-child,
    .ik-notif__tabela td:first-child {
        min-width: 12rem;
    }

    .ik-notif__tabela th:not(:first-child),
    .ik-notif__tabela td:not(:first-child) {
        width: 6.5rem;
        min-width: 6.5rem;
    }
}

/* ==========================================================================
   Minha carteira — painel da loja (§5.50, 24/09/2026)
   /restaurant-panel/wallet e abas. Reaproveita `.ik-pedidos` (§5.15), os KPIs
   `.ik-relatorio__kpis` (§5.23) com as cores dos relatórios de transações e de
   repasses, e a faixa `.ik-repasses__ajuda` (§5.29). Próprio daqui: o cartão
   neutro do dinheiro em mãos, as ações da faixa e a lista de dados da forma.
   ========================================================================== */
.order--card.ikl--car-caixa {
    --ik-kpi-icone: var(--ik-icone-cifrao);
    --ik-kpi-forte: #3f3f46;
}

.ik-carteira__situacao {
    color: var(--ik-text);
}

.ik-carteira__textos {
    flex: 1 1 24rem;
}

.ik-carteira__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ik-carteira__abas {
    padding-bottom: 0;
    border-bottom: 1px solid var(--ik-border);
}

.ik-carteira__dados {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
}

.ik-carteira__dados dt {
    color: var(--ik-text-muted);
    font-weight: 400;
}

.ik-carteira__dados dd {
    margin: 0;
    color: var(--ik-text);
    word-break: break-all;
}

.ik-carteira__gateways {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.ik-carteira__gateway {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    cursor: pointer;
}

.ik-carteira__gateway:has(input:checked) {
    border-color: var(--ik-text);
}

.ik-carteira__ver {
    font-size: 0.8125rem;
}

/* o rótulo `sr-only` da coluna de ação é absoluto: sem este contêiner ele escapa da rolagem da
   tabela e cria rolagem lateral na página inteira no celular */
.ik-carteira .table-responsive {
    position: relative;
}

/* abas e botões são frases ("Pedir saque"), não títulos: sem a capitalização do template */
.ik-carteira .nav-link,
.ik-carteira .btn,
.ik-carteira .modal-title {
    text-transform: none;
}

@media (max-width: 575.98px) {
    .ik-carteira__acoes,
    .ik-carteira__acoes .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Novo anúncio — painel da loja (§5.51, 24/09/2026)
   /restaurant-panel/advertisement/create. Topo (§5.20), faixa `.ik-repasses__ajuda`
   (§5.29) e o campo de período das avaliações (§5.16.1). Próprio daqui: as caixas de
   arquivo (ícone + texto, sem o PNG do template), a prévia e o campo de período.
   ========================================================================== */
/* Fila de pedidos de anúncio no admin (§5.88, 29/09/2026): contador em cada aba (§5.20), loja com a logo
   redonda de 32 px, etiquetas de situação empilhadas. O resto é a lista de pedidos (§5.15) e a da loja (§5.52). */
.ik-anuncio-pedidos__contador {
    display: inline-block;
    min-width: 1.5rem;
    margin-left: 0.375rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--ik-surface-2);
    color: var(--ik-text);
    font-size: 0.75rem;
    line-height: 1.5rem;
    text-align: center;
}

.ik-anuncio-pedidos__loja {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ik-anuncio-pedidos__logo {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ik-surface-2);
}

.ik-anuncio-pedidos__link {
    color: var(--ik-text);
    text-decoration: underline;
}

.ik-anuncio-pedidos__link:hover,
.ik-anuncio-pedidos__link:focus {
    color: var(--ik-accent-fill);
}

.ik-anuncio-pedidos__situacao {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    max-width: 13rem;
}

/* Notificação push do admin (§5.90, 29/09/2026): contador, prévia do push (um cartão como o do sistema, sem cor de
   marca), miniatura na lista e barra com busca + exportação */
.ik-notif__contador {
    color: var(--ik-text-muted);
    font-size: 0.75rem;
}

/* acima do recomendado: o JS põe `.ik-status--pendente`, que traz a cor (âmbar, §5.15) */
.ik-notif__contador--acima {
    color: var(--ik-status-texto);
    font-weight: 600;
}

.ik-notif__previa-caixa {
    height: 100%;
    padding: 1rem;
    border-radius: var(--ik-radius);
    background: var(--ik-surface-2);
}

.ik-notif__previa {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background: var(--ik-surface, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    font-size: 0.875rem;
}

.ik-notif__previa-topo {
    display: flex;
    justify-content: space-between;
    color: var(--ik-text-muted);
    font-size: 0.75rem;
}

.ik-notif__previa-titulo {
    color: var(--ik-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ik-notif__previa-texto {
    color: var(--ik-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ik-notif__previa-imagem {
    display: block;
    margin-top: 0.5rem;
    aspect-ratio: 3 / 1; /* medido no Samsung (Android 16): expandida, a imagem 3:1 aparece inteira */
    border-radius: var(--ik-radius);
    background: var(--ik-surface-2) center / cover no-repeat;
}

.ik-notif__quando-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

/* o `legend` herdava 1.5rem do Bootstrap ("Quando enviar" gigante): mesmo tamanho dos outros rótulos */
.ik-notif__destino > legend,
.ik-notif__quando > legend {
    font-size: 0.875rem;
    line-height: 1.6;
}

/* destino, envio de teste e duplicar (29/09/2026, noite) */
.ik-destino {
    display: contents; /* as colunas do partial entram na .row de quem o inclui */
}

/* com o wrapper no meio, as colunas deixam de ser filhas diretas da .row e perdiam o respiro do `.g-3` do template
   (`.g-3 > *[class*="col"]`, com !important): a mesma regra, um nível abaixo */
.g-3 > .ik-destino > [class*="col"] {
    padding: 0.625rem !important;
}

/* o template capitaliza o placeholder do select2 ("Escolha A Loja Primeiro") */
.ik-destino .select2-selection__placeholder {
    text-transform: none;
}

.ik-notif__teste {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ik-border);
}

.ik-notif__teste-linha {
    display: flex;
    gap: 0.5rem;
}

.ik-notif__teste-linha .form-control {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
}

.ik-notif__teste-linha .btn {
    flex: 0 0 auto;
    min-height: 44px;
}

.ik-notif__abre {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
    color: var(--ik-text-muted);
}

.ik-notif__duplicando {
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    font-size: 0.875rem;
}

/* Reels do admin (29/09/2026, MASTER §5.91): o período é o campo do calendário da validade do cupom (§5.37) */
.ik-reels__periodo .ik-cupons__caixa {
    max-width: 24rem;
}

.ik-reels .ik-cupons__painel .ik-periodo__calendario {
    max-width: none;
    margin: 0;
    background-color: var(--ik-surface);
    box-shadow: 0 12px 32px rgba(24, 24, 27, 0.16);
}

.ik-reels .ik-periodo__campo.is-preenchido .ik-filtro__periodo-texto {
    color: var(--ik-text);
    font-variant-numeric: tabular-nums;
}

/* o tema capitaliza botão e título ("Publicar Reel", "Pedir Agora"): o texto sai como foi escrito */
.ik-reels .btn,
.ik-reels .page-header-title {
    text-transform: none;
}

.ik-reels__envio {
    max-width: 16rem;
    margin: 0.75rem auto 0;
    text-align: left;
}

.ik-reels__barra {
    height: 6px;
    border-radius: 999px;
    background-color: var(--ik-surface-2);
    overflow: hidden;
}

.ik-reels__barra > span {
    display: block;
    height: 100%;
    width: 0;
    background-color: var(--ik-text-muted);
    transition: width 0.2s ease;
}

.ik-reels__envio[data-tom="ok"] .ik-reels__barra > span { background-color: var(--ik-sucesso-texto); }
.ik-reels__envio[data-tom="erro"] .ik-reels__barra > span { background-color: var(--ik-erro-texto); }
.ik-reels__envio[data-tom="erro"] small { color: var(--ik-erro-texto); }

.ik-reels__envio small {
    display: block;
    margin-top: 0.25rem;
    color: var(--ik-text-muted);
}

/* botões da caixa de capa/vídeo (29/09/2026): trocar (lápis, neutro) em cima; excluir (lixeira, vermelho) embaixo,
   só quando há arquivo novo escolhido */
.ik-reels .reel-upload-box-wrapper .upload-again-btn {
    background-color: var(--ik-surface);
    color: var(--ik-text);
    border: 1px solid var(--ik-border);
}

.ik-reels .reel-upload-box-wrapper .ik-reels__excluir {
    top: 40px;
    display: none;
    background-color: var(--ik-erro-texto);
    color: var(--ik-surface);
}

.ik-reels .reel-upload-box.ik-reels--novo .ik-reels__excluir {
    display: flex;
}

.ik-reels__excluir .ik-icone {
    width: 14px;
    height: 14px;
    background-color: currentColor;
}

.ik-reels .reel-upload-box:focus-visible {
    outline: 2px solid var(--ik-accent); /* o anel de foco do painel (§ foco) */
    outline-offset: 2px;
}

/* Data e hora do painel (29/09/2026, partial `_data-e-hora`): dia pelo calendário do painel (flutua como o do cupom,
   §5.37) + hora num select. Agendamento da notificação push e período do banner promocional. */
.ik-data-hora__linha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
}

.ik-data-hora__dia {
    flex: 0 1 16rem;
    min-width: 13rem;
}

.ik-data-hora__hora {
    flex: 0 0 8rem;
}

.ik-data-hora .ik-data-hora__dia .ik-periodo__campo,
.ik-data-hora__hora .form-control,
.ik-data-hora__limpar {
    min-height: 48px; /* dia, hora e "Limpar" na mesma altura (em algumas telas o .ik-periodo__campo cai para 44) */
}

.ik-data-hora .ik-cupons__painel .ik-periodo__calendario {
    max-width: none;
    margin: 0;
    background-color: var(--ik-surface);
    box-shadow: 0 12px 32px rgba(24, 24, 27, 0.16);
}

.ik-data-hora .ik-periodo__campo.is-preenchido .ik-filtro__periodo-texto {
    color: var(--ik-text);
    font-variant-numeric: tabular-nums;
}

.ik-promo-periodo > legend {
    width: auto;
    margin-bottom: 0.5rem;
}

.ik-notif__publico {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ik-text);
    font-weight: 600;
    font-size: 0.875rem;
}

.ik-notif__linha {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ik-notif__miniatura {
    flex: none;
    width: 64px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--ik-surface-2);
}

.ik-notif .ik-pedidos__tabela td {
    white-space: normal;
}

.ik-notif__barra-direita {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ik-notif__barra-direita .btn {
    min-height: 44px;
}

@media (min-width: 768px) {
    .ik-notif__barra-direita {
        flex-wrap: nowrap;
    }

    .ik-notif__barra-direita .ik-pedidos__busca {
        min-width: 18rem;
    }
}

/* o input do interruptor é `position: absolute`: sem uma caixa posicionada ele escapa do recorte da tabela e a página
   rolava de lado a 390 px (479 px) */
.ik-notif .table-responsive {
    position: relative;
}

/* o template capitaliza o texto dos botões ("Enviar Notificação") e o título na lista ("Teste IKero: Canal Avisos") —
   a notificação aparece como foi escrita */
.ik-notif .btn,
.ik-notif .ik-pedidos__nome {
    text-transform: none;
}

/* Lista de anúncios do admin (§5.89): o seletor de posição no carrossel, na altura mínima de toque */
.ik-anuncio-lista__posicao {
    min-width: 11.5rem; /* "Sem posição fixa" inteiro */
    min-height: 44px;
}

/* respiro lateral menor: posição + quatro ações cabem a 1280 px sem rolar a tabela */
.ik-anuncio-lista .ik-pedidos__tabela th,
.ik-anuncio-lista .ik-pedidos__tabela td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* a tabela é `table-nowrap`: título, loja e etiquetas quebram linha para as ações caberem a 1280 px */
.ik-anuncio-pedidos .ik-pedidos__tabela td {
    white-space: normal;
}

.ik-anuncio-pedidos .ik-pedidos__nome,
.ik-anuncio-pedidos__link {
    display: inline-block;
    max-width: 13rem;
}

.ik-anuncio-pedidos .ik-status {
    white-space: normal;
}

.ik-anuncio-pedidos .ik-pedidos__acoes {
    flex-wrap: nowrap;
}

/* Detalhe do anúncio no admin (§5.87, 29/09/2026): cabeçalho com a situação e as ações, `dl` da ficha (§5.45),
   motivo da pausa/recusa nas cores da etiqueta, imagens nas proporções do app, cartão da loja. */
.ik-anuncio-detalhe__nav,
.ik-anuncio-detalhe__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ik-anuncio-detalhe__nav .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
}

.ik-anuncio-detalhe__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ik-anuncio-detalhe__situacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ik-anuncio-detalhe__acoes .btn {
    min-height: 44px;
}

.ik-anuncio-detalhe__nota {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--ik-radius);
    background: var(--ik-status-fundo);
    color: var(--ik-status-texto);
    font-size: 0.875rem;
}

.ik-anuncio-detalhe__link {
    margin-left: 0.5rem;
    color: var(--ik-text);
    text-decoration: underline;
}

.ik-anuncio-detalhe__loja .ik-anuncio-detalhe__link {
    margin-left: 0;
}

.ik-anuncio-detalhe__link:hover,
.ik-anuncio-detalhe__link:focus {
    color: var(--ik-accent-fill);
}

.ik-anuncio-detalhe__titulo {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-anuncio-detalhe__idioma {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ik-border);
}

.ik-anuncio-detalhe__imagens {
    display: grid;
    grid-template-columns: 8rem minmax(0, 20rem);
    gap: 1rem;
    align-items: start;
}

.ik-anuncio-detalhe__perfil,
.ik-anuncio-detalhe__capa,
.ik-anuncio-detalhe__video {
    display: block;
    width: 100%;
    border-radius: var(--ik-radius);
    background: var(--ik-surface-2);
    object-fit: cover;
}

.ik-anuncio-detalhe__perfil {
    aspect-ratio: 1 / 1;
}

.ik-anuncio-detalhe__capa {
    aspect-ratio: 2 / 1;
}

.ik-anuncio-detalhe__video {
    max-width: 28rem;
    aspect-ratio: 16 / 9;
}

.ik-anuncio-detalhe__loja {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ik-anuncio-detalhe__logo {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ik-surface-2);
}

/* o motivo inválido no diálogo de pausar/recusar: borda nas cores de erro (a do tempo de preparo, §5.17) */
.swal2-popup.ik-anuncio-motivo textarea[aria-invalid="true"],
.swal2-popup.ik-anuncio-motivo textarea[aria-invalid="true"]:focus {
    border-color: var(--ik-status-texto);
}

/* O que a loja mudou (§5.87, 29/09/2026, noite): rótulo | antes | agora; no celular cada linha empilha e o "Antes"/
   "Agora" de cada lado aparece (o cabeçalho some) */
.ik-anuncio-detalhe__mudanca {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 0.75rem 0;
    border-top: 1px solid var(--ik-border);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.ik-anuncio-detalhe__mudanca--cabecalho {
    padding-top: 0;
    border-top: 0;
    color: var(--ik-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ik-anuncio-detalhe__mudanca-rotulo {
    color: var(--ik-text-muted);
}

.ik-anuncio-detalhe__mudanca-lado {
    display: none;
}

.ik-anuncio-detalhe__mudanca-img.ik-anuncio-detalhe__perfil {
    max-width: 6rem;
}

.ik-anuncio-detalhe__mudanca-img.ik-anuncio-detalhe__capa {
    max-width: 14rem;
}

.ik-anuncio-pedidos__mudou {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

@media (max-width: 767.98px) {
    .ik-anuncio-detalhe__mudanca {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ik-anuncio-detalhe__mudanca--cabecalho {
        display: none;
    }

    .ik-anuncio-detalhe__mudanca-rotulo {
        grid-column: 1 / -1;
        font-weight: 600;
        color: var(--ik-text);
    }

    .ik-anuncio-detalhe__mudanca-lado {
        display: block;
        margin-bottom: 0.25rem;
        color: var(--ik-text-muted);
        font-size: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .ik-anuncio-detalhe__imagens {
        grid-template-columns: 6rem minmax(0, 1fr);
    }

    /* Anterior/Próximo dividem uma linha (a regra do topo da ficha põe cada botão numa linha inteira) */
    .ik-anuncio-detalhe__nav {
        flex: 1 1 100%;
        flex-wrap: nowrap;
    }

    .ik-funcionarios__topo .ik-anuncio-detalhe__nav .btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .ik-anuncio-detalhe__acoes .btn {
        flex: 1 1 auto;
    }
}

/* seletor de loja do admin (29/09/2026): o template capitaliza o select2 ("Busque A Loja Pelo Nome") */
.ik-anuncio .select2-selection__rendered,
.ik-anuncio .select2-selection__placeholder {
    text-transform: none;
}

.ik-anuncio .ik-periodo__campo {
    min-height: 44px;
    border-color: var(--ik-border-strong);
    font-size: 0.875rem;
}

.ik-anuncio .ik-periodo__campo:focus-visible {
    outline: none;
    border-color: var(--ik-accent);
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.15);
}

/* 24/09/2026: o calendário é um painel flutuante que abre PARA CIMA do campo, por cima dos outros campos —
   no fluxo ele empurrava o formulário e aumentava a página */
.ik-anuncio__periodo-caixa {
    position: relative;
}

.ik-anuncio .ik-periodo__calendario {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    z-index: 1020; /* abaixo do cabeçalho fixo do painel (1030) */
    width: 22rem;
    max-width: 100%;
    margin: 0;
    background-color: var(--ik-surface);
    box-shadow: 0 12px 32px rgba(24, 24, 27, 0.16);
}

.ik-anuncio__imagens {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
}

.ik-anuncio__arquivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--ik-border-strong);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    text-align: center;
    word-break: break-word;
    cursor: pointer;
}

.ik-anuncio__arquivo .ik-icone {
    font-size: 1.5rem;
}

.ik-anuncio__arquivo--quadrado {
    width: 140px;
    height: 140px;
}

.ik-anuncio__arquivo--largo {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 2 / 1;
}

/* o input é `sr-only`: o anel de foco aparece na caixa que o representa */
.sr-only:focus-visible + .ik-anuncio__arquivo,
.ik-anuncio__arquivo:has(+ .sr-only:focus-visible) {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-anuncio__previa {
    top: 80px;
}

.ik-anuncio__capa {
    aspect-ratio: 2 / 1;
    border-radius: var(--ik-radius) var(--ik-radius) 0 0;
    background: var(--ik-surface-2) center / cover no-repeat;
}

.ik-anuncio__video {
    aspect-ratio: 16 / 9;
    border-radius: var(--ik-radius) var(--ik-radius) 0 0;
    background-color: var(--ik-surface-2);
    overflow: hidden;
}

.ik-anuncio__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ik-anuncio__cartao {
    padding: 0.875rem 1rem;
    border: 1px solid var(--ik-border);
    border-top: 0;
    border-radius: 0 0 var(--ik-radius) var(--ik-radius);
    background-color: var(--ik-surface);
    font-size: 0.875rem;
}

.ik-anuncio__cartao--loja {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ik-anuncio__logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border: 1px solid var(--ik-border);
    border-radius: 50%;
    background: var(--ik-surface-2) center / cover no-repeat;
}

.ik-anuncio__nota {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    color: var(--ik-text);
    font-size: 0.8125rem;
}

.ik-anuncio .btn,
.ik-anuncio .nav-link,
.ik-anuncio .page-header-title {
    text-transform: none;
}

.ik-anuncio legend.form-label {
    width: auto;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* sem arquivo escolhido, o player some e fica a superfície neutra (nunca o preto do <video> vazio) */
.ik-anuncio__video video:not([src]) {
    display: none;
}

@media (max-width: 575.98px) {
    .ik-anuncio__imagens {
        grid-template-columns: 1fr;
    }
}

/* Lista de anúncios da loja (§5.52, 24/09/2026): topo com a ação primária à direita e filtros na barra
   do cartão. O resto é `.ik-pedidos` (§5.15). */
.ik-anuncios__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.ik-anuncios__filtros {
    display: flex;
    flex: 0 1 34rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.ik-anuncios__filtros .ik-pedidos__busca {
    flex: 1 1 14rem;
}

/* título do anúncio e do cartão são frases, não nomes próprios */
.ik-anuncios .card-title,
.ik-anuncios .ik-pedidos__nome {
    text-transform: none;
}

/* o `sr-only` da coluna de ação escapa da rolagem da tabela sem um contêiner posicionado (visto na carteira, §5.50) */
.ik-anuncios .table-responsive {
    position: relative;
}

.ik-anuncios__filtros select {
    width: auto;
    min-width: 12rem;
}

@media (max-width: 575.98px) {
    .ik-anuncios__topo .btn,
    .ik-anuncios__filtros,
    .ik-anuncios__filtros select,
    .ik-anuncios__filtros .ik-pedidos__busca {
        width: 100%;
    }
}

/* ==========================================================================
   Calendários flutuantes (24/09/2026, pedido do proprietário) — validade do cupom
   (§5.37) e período do filtro das avaliações (§5.16.1). Mesma regra do anúncio
   (§5.51) e dos relatórios (§5.36): painel por cima do conteúdo, que não empurra
   nada; abre para cima do campo e, sem espaço acima, para baixo.
   ========================================================================== */
.ik-cupons__caixa,
.ik-filtro__periodo-caixa {
    position: relative;
}

.ik-cupons__painel {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    z-index: 1020; /* abaixo do cabeçalho fixo do painel (1030) */
    width: 22rem;
    max-width: 100%;
}

.ik-cupons__painel--abaixo {
    top: calc(100% + 0.5rem);
    bottom: auto;
}

.ik-cupons .ik-cupons__painel .ik-periodo__calendario {
    max-width: none;
    margin: 0;
    background-color: var(--ik-surface);
    box-shadow: 0 12px 32px rgba(24, 24, 27, 0.16);
}

/* compacto como o dos relatórios (§5.36) para caber acima do campo */
.ik-cupons__painel .flatpickr-calendar .flatpickr-day {
    height: 34px;
    line-height: 32px;
    margin: 1px 0;
}

.ik-filtro__calendario--flutuante {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    background-color: var(--ik-surface);
    box-shadow: 0 12px 32px rgba(24, 24, 27, 0.16);
}

.ik-filtro__calendario--flutuante.ik-filtro__calendario--abaixo {
    top: calc(100% + 0.5rem);
    bottom: auto;
}

/* ==========================================================================
   Meu perfil — painel da loja (§5.54, 24/09/2026)
   /restaurant-panel/profile/view. Topo (§5.20), cartões do tema, e o bloco de
   senha do cadastro de funcionário (`.ik-funcionarios__senha|olho|regras`, §5.44).
   ========================================================================== */
.ik-perfil .page-header-title,
.ik-perfil .card-title,
.ik-perfil .btn {
    text-transform: none;
}

.ik-perfil__foto {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.ik-perfil__avatar {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border: 1px solid var(--ik-border);
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--ik-surface-2);
}

.ik-perfil__foto .sr-only:focus-visible + label.btn {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-perfil__grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.ik-perfil__dica {
    margin-top: 0.375rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-perfil__confirmar {
    max-width: calc(50% - 0.625rem);
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

@media (max-width: 575.98px) {
    .ik-perfil__grade {
        grid-template-columns: 1fr;
    }

    .ik-perfil__grade > div:empty {
        display: none;
    }

    .ik-perfil__confirmar {
        max-width: none;
    }
}

/* 07/10/2026 — Meu perfil (loja e admin, MASTER §5.54): no celular campos, botões e o "olho" têm 44 px de alvo */
@media (max-width: 767.98px) {
    .ik-perfil .form-control,
    .ik-perfil .btn {
        min-height: 44px;
    }

    .ik-perfil .ik-funcionarios__olho {
        width: 44px;
        height: 44px;
        right: 0;
    }

    .ik-perfil .ik-funcionarios__senha .form-control {
        padding-right: 48px;
    }
}

/* O editor de imagem do upload (§5.55) mora em `ikero-editor-imagem.css` desde 10/10/2026 — carregado pelo parcial
   `_ikero-editor-imagem`, para servir também ao site (que não carrega este tema). */

/* =========================================================================
   Busca global do painel da loja (MASTER §5.56, 24/09/2026)
   Modal `#staticBackdrop` do cabeçalho: campo grande, estado vazio
   centralizado, resultados agrupados por tipo com navegação por teclado.
   A busca é a do template (`vendor.search.routing`); aqui só a aparência.
   ========================================================================= */
.ik-busca-modal .ik-busca__dialogo {
    max-width: min(880px, calc(100vw - 32px));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.ik-busca-modal:focus-visible {
    outline: 0; /* o anel fica no campo, não no contêiner (§5.13) */
}

.ik-busca {
    display: flex;
    flex-direction: column;
    background: var(--ik-surface);
    border-radius: var(--ik-radius-lg);
    box-shadow: 0 24px 48px rgba(24, 24, 27, 0.18);
    padding: 24px;
    /* altura fixa: o modal não pula nem recentraliza quando os resultados chegam */
    height: min(600px, calc(100vh - 48px));
}

.ik-busca__campo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 10px 0 18px;
    border: 1px solid var(--ik-border-strong);
    border-radius: var(--ik-radius);
    background: var(--ik-surface);
    transition: border-color var(--ik-transicao), box-shadow var(--ik-transicao);
}

.ik-busca__campo:focus-within {
    border-color: var(--ik-accent);
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.15);
}

.ik-busca__lupa {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--ik-text-muted);
}

.ik-busca__entrada {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 18px;
    color: var(--ik-text);
    box-shadow: none;
}

.ik-busca__entrada:focus,
.ik-busca__entrada:focus-visible {
    outline: 0; /* o anel é o do contêiner (:focus-within) */
    box-shadow: none;
}

.ik-busca__entrada::placeholder {
    color: var(--ik-text-muted);
    opacity: 1;
}

/* o "x" nativo do type=search duplica o Esc */
.ik-busca__entrada::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.ik-busca__carregando {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ik-border-strong);
    border-top-color: var(--ik-text-muted);
    border-radius: 50%;
    animation: ik-folha-gira 0.8s linear infinite;
}

.ik-busca__carregando[hidden] {
    display: none;
}

.ik-busca__esc {
    flex-shrink: 0;
    height: 40px;
    min-width: 52px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: var(--ik-bg);
    color: var(--ik-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--ik-transicao), color var(--ik-transicao);
}

.ik-busca__esc:hover {
    background: var(--ik-recibo-total);
    color: var(--ik-text);
}

.ik-busca__esc:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-busca__corpo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---- estados vazios (inicial, sem resultado, erro) ---- */
.ik-busca__vazio {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
}

.ik-busca__vazio-disco {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: var(--ik-bg);
    color: var(--ik-text-muted);
}

.ik-busca__vazio-disco .ik-icone {
    width: 56px;
    height: 56px;
}

.ik-busca__vazio-disco .ik-icone--busca-sem-resultado {
    -webkit-mask-image: var(--ik-icone-busca-sem-resultado);
    mask-image: var(--ik-icone-busca-sem-resultado);
}

.ik-busca__vazio-titulo {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-busca__vazio-texto {
    margin: 0;
    font-size: 16px;
    color: var(--ik-text-muted);
}

/* ---- resultados ---- */
.ik-busca__grupo + .ik-busca__grupo {
    margin-top: 16px;
}

.ik-busca__grupo-titulo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ik-text-muted);
}

.ik-busca__grupo-total {
    font-weight: 400;
}

.ik-busca__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ik-busca__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 12px;
    border-radius: var(--ik-radius);
    color: var(--ik-text);
    text-decoration: none;
    transition: background-color var(--ik-transicao);
}

.ik-busca__item:hover,
.ik-busca__item.is-ativo {
    background: var(--ik-bg);
    color: var(--ik-text);
    text-decoration: none;
}

.ik-busca__item:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: -2px;
}

.ik-busca__marca {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ik-radius);
    background: var(--ik-bg);
    color: var(--ik-text-muted);
    overflow: hidden;
}

.ik-busca__marca .ik-icone {
    width: 20px;
    height: 20px;
}

.ik-busca__marca img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ik-busca__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.ik-busca__titulo,
.ik-busca__meta {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ik-busca__titulo {
    font-size: 15px;
    font-weight: 500;
    color: var(--ik-text);
}

.ik-busca__meta {
    margin-top: 2px;
    font-size: 13px;
    color: var(--ik-text-muted);
}

.ik-busca__etiqueta {
    flex-shrink: 0;
    padding: 3px 10px;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    background: var(--ik-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--ik-text-muted);
    white-space: nowrap;
}

.ik-busca__mais {
    margin: 4px 0 0;
    padding: 0 12px;
    font-size: 13px;
    color: var(--ik-text-muted);
}

/* 08/10/2026 (MASTER §5.56): o trecho do título que casou com o termo — peso, não cor (o fundo amarelo do <mark> some) */
.ik-busca__realce {
    padding: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
}

/* "Ver todos na lista" quando o grupo passa de 6 — link do tema, sublinhado, alvo de 44 px na vertical */
.ik-busca__mais-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ik-accent-fill);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ik-busca__mais-link:hover {
    color: var(--ik-accent-fill);
    text-decoration-thickness: 2px;
}

.ik-busca__mais-link:focus-visible {
    outline: 2px solid var(--ik-accent-fill);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 575.98px) {
    .ik-busca {
        padding: 16px;
        height: calc(100vh - 32px);
    }

    .ik-busca__etiqueta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ik-busca__carregando {
        animation-duration: 2.4s;
    }
}

/* ==========================================================================
   Largura do menu lateral da loja ajustável (§5.2, 24/09/2026)
   `--ik-menu-largura` (padrão 16,25rem, a do template) entre 13,75rem e 22,5rem, gravada por aparelho
   (js/ikero/menu/largura.js). Só com o menu ABERTO e a partir de 1200px — o mesmo ponto em que o template
   fixa o menu ao lado do conteúdo; recolhido (5,25rem) e celular (menu por cima) seguem o template.
   `body.ik-menu-ajustavel` liga a regra — nos dois painéis desde 05/10/2026 (o admin ganhou a divisória).
   ========================================================================== */
@media (min-width: 1200px) {
    body.ik-menu-ajustavel.navbar-vertical-aside-show-xl:not(.navbar-vertical-aside-mini-mode) .navbar-vertical-aside {
        width: var(--ik-menu-largura, 16.25rem);
    }

    body.ik-menu-ajustavel.navbar-vertical-aside-show-xl:not(.navbar-vertical-aside-mini-mode) .main {
        padding-inline-start: var(--ik-menu-largura, 16.25rem);
    }

    body.ik-menu-ajustavel.navbar-vertical-aside-show-xl:not(.navbar-vertical-aside-mini-mode) .footer,
    body.ik-menu-ajustavel.navbar-vertical-aside-show-xl:not(.navbar-vertical-aside-mini-mode) .navbar:not(.navbar-vertical) {
        margin-inline-start: var(--ik-menu-largura, 16.25rem);
    }

    body.ik-menu-ajustavel.navbar-vertical-aside-show-xl:not(.navbar-vertical-aside-mini-mode) .ik-menu-divisoria {
        display: block;
    }
}

/* A divisória: faixa de 8px por dentro da borda direita do menu (o aside pode cortar o que passa dela). Em repouso, invisível (a borda de 1px do menu
   continua sendo a linha); no hover e no arraste, uma linha de 2px; no foco, o anel do §6. */
.ik-menu-divisoria {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 8px;
    z-index: 101;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
    border: 0;
    padding: 0;
}

.ik-menu-divisoria::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 2px;
    background-color: transparent;
    transition: background-color var(--ik-transicao);
}

.ik-menu-divisoria:hover::after,
.ik-menu-arrastando .ik-menu-divisoria::after {
    background-color: var(--ik-border-strong);
}

.ik-menu-divisoria:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: -2px;
}

/* durante o arraste: nada de seleção de texto, cursor de redimensionar em toda a página e sem transição
   (a largura acompanha o ponteiro) */
body.ik-menu-arrastando,
body.ik-menu-arrastando * {
    cursor: col-resize !important;
    user-select: none !important;
}

body.ik-menu-arrastando .navbar-vertical-aside,
body.ik-menu-arrastando .main,
body.ik-menu-arrastando .footer,
body.ik-menu-arrastando .navbar:not(.navbar-vertical) {
    transition: none !important;
}

/* =========================================================================
   Status de "Pedidos comuns" no menu da loja (MASTER §5.2.1, 25/09/2026)
   Linha compacta: ponto · rótulo · contador. Cor de status (a paleta
   .ik-status--*, já medida) só quando há pedido no status; ativo em laranja
   tênue. Os contadores são as consultas de sempre, no _sidebar.
   ========================================================================= */
.navbar-vertical .nav-sub .ik-menu-pedido {
    position: relative;
}

.navbar-vertical .nav-sub .ik-menu-pedido > .ik-menu-pedido__link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    margin: 1px 8px !important;
    padding: 6px 10px 6px 14px !important;
    border-radius: var(--ik-radius) !important;
    color: #52525b !important;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
}

.navbar-vertical .nav-sub .ik-menu-pedido > .ik-menu-pedido__link:hover {
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft) !important;
}

.ik-menu-pedido__ponto {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--ik-text-subtle);
}

.navbar-vertical .nav-sub .ik-menu-pedido__rotulo {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-transform: none; /* frase capitalizada (marca-voz §3): o template capitaliza cada palavra */
}

.ik-menu-pedido__contador {
    flex-shrink: 0;
    min-width: 30px;
    padding: 3px 8px;
    border-radius: 999px;
    background-color: var(--ik-recibo-total);
    color: #3f3f46;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* com pedido no status: ponto e contador no tom da etapa (pares da §2.3) */
.ik-menu-pedido--com-pedidos .ik-menu-pedido__ponto {
    background-color: var(--ik-status-texto);
}

.navbar-vertical .nav-sub .ik-menu-pedido--com-pedidos .ik-menu-pedido__contador {
    background-color: var(--ik-status-fundo);
    color: var(--ik-status-texto) !important;
}

/* divisor entre grupos: fluxo · exceções · cancelado */
.ik-menu-pedido--novo-grupo {
    margin-top: 6px;
    padding-top: 6px;
}

.ik-menu-pedido--novo-grupo::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 16px;
    border-top: 1px solid var(--ik-border);
}

/* ativo: o fundo e o rótulo vêm da regra geral do menu (§5.2); aqui o ponto
   em --ik-accent (não é texto) e o contador em soft-2 com --ik-accent-hover
   (5,04:1; o em-soft sobre o soft-2 mede 4,49:1). O caminho espelha o do
   template para vencer o `*` da regra geral (§8.5). */
.navbar-vertical .nav-sub .ik-menu-pedido.active > .ik-menu-pedido__link {
    background-color: var(--ik-accent-soft) !important;
    color: var(--ik-accent-em-soft) !important;
    font-weight: 600;
}

.navbar-vertical .nav-sub .ik-menu-pedido.active .ik-menu-pedido__ponto {
    background-color: var(--ik-accent);
}

.navbar-vertical .navbar-nav.nav-tabs .nav-sub .ik-menu-pedido.active > .nav-link > .ik-menu-pedido__contador {
    background-color: var(--ik-accent-soft-2);
    color: var(--ik-accent-hover) !important;
}

/* =========================================================================
   Lateral do detalhe do pedido da loja (MASTER §5.16.2, 25/09/2026)
   Cabeçalho do cartão com a ação à direita (chat como ícone, "Mudar",
   "Adicionar"), pessoa com avatar de 64 px e pílula de pedidos, linhas com
   ícone (telefone, última localização), endereço em 3 linhas e o vazio do
   comprovante. Ícones Lucide map-pin, file-text, file (1,6) e map.
   ========================================================================= */
:root {
    --ik-icone-local: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0' /%3E %3Ccircle cx='12' cy='10' r='3' /%3E %3C/svg%3E");
    --ik-icone-documento: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z' /%3E %3Cpath d='M14 2v5a1 1 0 0 0 1 1h5' /%3E %3Cpath d='M10 9H8' /%3E %3Cpath d='M16 13H8' /%3E %3Cpath d='M16 17H8' /%3E %3C/svg%3E");
    --ik-icone-arquivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z' /%3E %3Cpath d='M14 2v5a1 1 0 0 0 1 1h5' /%3E %3C/svg%3E");
    --ik-icone-mapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z' /%3E %3Cpath d='M15 5.764v15' /%3E %3Cpath d='M9 3.236v15' /%3E %3C/svg%3E");
}

.ik-icone--local {
    -webkit-mask-image: var(--ik-icone-local);
    mask-image: var(--ik-icone-local);
}

.ik-icone--documento {
    -webkit-mask-image: var(--ik-icone-documento);
    mask-image: var(--ik-icone-documento);
}

.ik-icone--arquivo {
    -webkit-mask-image: var(--ik-icone-arquivo);
    mask-image: var(--ik-icone-arquivo);
}

.ik-icone--mapa {
    -webkit-mask-image: var(--ik-icone-mapa);
    mask-image: var(--ik-icone-mapa);
}

.ik-pedido__cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ik-pedido__cabeca .ik-pedido__cartao-titulo > .ik-icone {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ik-text-muted);
}

.ik-pedido__cabeca-acoes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* chat da plataforma: ícone de 40 px no canto do cartão, nunca um botão solto no meio */
.ik-pedido__icone-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ik-border-strong);
    border-radius: var(--ik-radius);
    background: var(--ik-surface);
    color: var(--ik-text);
    transition: background-color var(--ik-transicao), border-color var(--ik-transicao);
}

.ik-pedido__icone-acao:hover {
    background: var(--ik-surface-2);
    border-color: var(--ik-text-subtle);
    color: var(--ik-text);
    text-decoration: none;
}

.ik-pedido__icone-acao:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-pedido__icone-acao .ik-icone {
    width: 1.25rem;
    height: 1.25rem;
}

.ik-pedido__pessoa--grande {
    gap: 1rem;
}

.ik-pedido__pessoa--grande .ik-pedido__avatar {
    width: 64px;
    height: 64px;
}

.ik-pedido__pessoa--grande .ik-pedido__pessoa-dados {
    gap: 0.375rem;
    flex: 1 1 auto;
}

.ik-pedido__pessoa--grande .ik-pedido__pessoa-nome {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.ik-pedido__pessoa-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.ik-pedido__pessoa-meta .ik-pedido__link {
    font-size: 0.875rem;
}

.ik-pedido__pilula {
    align-self: flex-start;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--ik-recibo-total);
    color: #3f3f46;
    font-size: 0.8125rem;
    font-weight: 500;
}

.ik-pedido__linhas {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--ik-text);
    font-size: 0.875rem;
}

.ik-pedido__linhas > li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
}

.ik-pedido__linhas > li > .ik-icone,
.ik-pedido__entrega > .ik-icone {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.0625rem;
    color: var(--ik-text-muted);
}

.ik-pedido__linhas > li > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* endereço: uma informação por linha — a rua sozinha, porque pode ser longa */
.ik-pedido__entrega {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.ik-pedido__entrega-dados {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ik-text);
    font-size: 0.875rem;
}

.ik-pedido__entrega-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.ik-pedido__endereco-linha {
    overflow-wrap: anywhere;
}

.ik-pedido__endereco-quem {
    margin-top: 0.25rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

/* comprovante sem foto: vazio discreto, sem borda tracejada */
.ik-pedido__vazio-cartao {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--ik-radius);
    background: var(--ik-surface-2);
}

.ik-pedido__vazio-disco {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ik-recibo-total);
    color: var(--ik-text-muted);
}

.ik-pedido__vazio-disco .ik-icone {
    width: 1.5rem;
    height: 1.5rem;
}

.ik-pedido__vazio-titulo {
    display: block;
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.ik-pedido__vazio-texto {
    display: block;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Cartão "Criar anúncios" no fim do menu da loja (§5.2, 26/09/2026)

   CTA compacto, parte da sidebar e não um banner: fundo no laranja mais tênue
   (--ik-accent-soft) com borda um degrau acima (--ik-accent-soft-2), raio
   --ik-radius-lg, sem sombra; ilustração da referência do proprietário
   (webp com fundo transparente, 420x266 = 2x de 210 px); título --ik-text;
   texto --ik-text-menu (o muted reprova em 4,38:1 sobre o fundo tênue);
   botão primário de largura total com seta. Vive em <li> da .navbar-nav —
   os 15px de margem do template ficam. */
.navbar-vertical .ik-menu-promo {
    padding: 0.25rem 0.75rem 1rem;
}

/* a sidebar do template capitaliza tudo (`.text-capitalize`) e prende cada item numa linha (`nowrap`);
   o cartão tem frase, não rótulo */
.navbar-vertical .ik-menu-promo,
.navbar-vertical .ik-menu-promo__cartao,
.navbar-vertical .ik-menu-promo__titulo,
.navbar-vertical .ik-menu-promo__texto,
.navbar-vertical .ik-menu-promo__botao {
    white-space: normal;
    text-transform: none;
    overflow-wrap: anywhere;
}

.navbar-vertical .ik-menu-promo__cartao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.125rem 1rem 1rem;
    border: 1px solid var(--ik-accent-soft-2);
    border-radius: var(--ik-radius-lg);
    background: var(--ik-accent-soft);
    text-align: center;
}

.navbar-vertical .ik-menu-promo__ilustracao {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    margin: 0 auto 0.125rem;
}

.navbar-vertical .ik-menu-promo__titulo {
    margin: 0;
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.navbar-vertical .ik-menu-promo__texto {
    max-width: 24ch;
    margin: 0 0 0.5rem;
    color: var(--ik-text-menu);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.navbar-vertical .ik-menu-promo__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.navbar-vertical .ik-menu-promo__botao .ik-icone {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.navbar-vertical .ik-menu-promo__botao:hover .ik-icone,
.navbar-vertical .ik-menu-promo__botao:focus-visible .ik-icone {
    transform: translateX(2px);
}

/* menu recolhido (só ícones): o cartão não cabe */
.navbar-vertical-aside-mini-mode .navbar-vertical .ik-menu-promo {
    display: none;
}

/* --------------------------------------------------------------------------
   Entregador da loja — cadastro e edição (§5.61, 26/09/2026)

   A tela usa o vocabulário de classes do formulário de funcionário (§5.44):
   é o mesmo cartão de pessoa. Só a grade de documentos é própria. */
.ik-entregadores__escolher {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.ik-entregadores__contador {
    font-size: 0.8125rem;
    color: var(--ik-text-muted);
}

.ik-entregadores__docs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.ik-entregadores__docs:empty {
    display: none;
}

.ik-entregadores__doc {
    position: relative;
    width: 112px;
    height: 80px;
    overflow: hidden;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background: var(--ik-surface-2);
}

.ik-entregadores__doc img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ik-entregadores__doc a:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-entregadores__doc-remover {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--ik-border-strong);
    border-radius: 999px;
    background: var(--ik-surface);
    color: var(--ik-text);
}

.ik-entregadores__doc-remover .ik-icone {
    width: 14px;
    height: 14px;
}

.ik-entregadores__doc-remover:hover {
    background: var(--ik-surface-2);
}

.ik-entregadores__doc-remover:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Entregadores da loja — lista e ficha (§5.62, 26/09/2026)

   Situação do entregador: on-line verde (o par de `.ik-status--ativa`), suspenso vermelho (o par de
   `.ik-status--cancelado`, ícone `x`), off-line neutro, aguardando aprovação âmbar, recusado vermelho.
   O template pintava "On-line" de laranja (`.text-primary`) — laranja é marca, não status (§1). */
.ik-status--online {
    --ik-status-fundo: #e7f6f0;
    --ik-status-texto: #0a6045;
    --ik-status-icone: var(--ik-icone-check);
}

.ik-status--suspenso {
    --ik-status-fundo: #fdecf0;
    --ik-status-texto: #a3143a;
    --ik-status-icone: var(--ik-icone-x);
}

/* links de texto da lista e da ficha: sublinhado em `--ik-text`, laranja só no hover (regra do detalhe do pedido) */
.ik-entregadores__nome,
.ik-entregadores__tel {
    color: var(--ik-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ik-entregadores__nome:hover,
.ik-entregadores__tel:hover {
    color: var(--ik-accent-fill);
}

.ik-entregadores__nome:focus-visible,
.ik-entregadores__tel:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-entregadores__nota {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-entregadores__nota > i,
.ik-entregadores__estrela {
    color: #7a4a00;   /* o texto da etiqueta âmbar (§5.15), nunca laranja */
}

/* ficha: cabeçalho com a pessoa à esquerda e as ações à direita */
.ik-entregadores__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.ik-entregadores__pessoa {
    align-items: flex-start;
    min-width: 0;
}

.ik-funcionarios__avatar--ficha {
    width: 72px;
    height: 72px;
}

.ik-funcionarios__avatar--mini {
    width: 32px;
    height: 32px;
}

.ik-entregadores__nome-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.ik-entregadores__titulo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ik-text);
    text-transform: none;
}

.ik-entregadores__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ik-entregadores__acoes .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-transform: none;
}

.ik-entregadores__documento {
    display: grid;
    gap: 1rem;
}

.ik-entregadores__documento .ik-entregadores__docs {
    margin-top: 0;
}

/* 13/10/2026 (ficha do candidato, MASTER §5.101.1): o documento é a evidência da decisão — miniatura grande e inteira (`contain`: a borda do
   documento, onde costuma estar o número, não é cortada); no celular, a largura toda */
.ik-solicitacao-detalhe .ik-entregadores__doc {
    width: 260px;
    height: 170px;
}

.ik-solicitacao-detalhe .ik-entregadores__doc img {
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .ik-solicitacao-detalhe .ik-entregadores__doc {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

/* resumo das avaliações: o mesmo molde da tela de avaliações de clientes (§5.16.1) */
.ik-entregadores__resumo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem 3rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-entregadores__resumo .ik-avaliacoes__media {
    padding-right: 3rem;
    border-right: 1px solid var(--ik-border);
}

.ik-entregadores__cliente {
    min-width: 0;
    gap: 0.5rem;
}

.ik-entregadores__comentario {
    max-width: 28rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ik-entregadores__vazio-estrela {
    -webkit-mask-image: var(--ik-icone-estrela-contorno);
    mask-image: var(--ik-icone-estrela-contorno);
}

/* KPIs da ficha (§5.4: um ícone por cartão; verde só para o que foi entregue) */
.order--card.ikl--entregador-entregues {
    --ik-kpi-icone: var(--ik-icone-entregues);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e7f6f0;
    --ik-kpi-tenue: #f3fbf7;
    --ik-kpi-borda: #bfe6d5;
}

.order--card.ikl--entregador-caixa {
    --ik-kpi-icone: var(--ik-icone-banknote);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fef8ee;
    --ik-kpi-borda: #f3dcb6;
}

.order--card.ikl--entregador-ganhos {
    --ik-kpi-icone: var(--ik-icone-cifrao);
    --ik-kpi-forte: #3f3f46;
}

@media (max-width: 767.98px) {
    .ik-entregadores__resumo {
        grid-template-columns: 1fr;
    }

    .ik-entregadores__resumo .ik-avaliacoes__media {
        padding-right: 0;
        padding-bottom: 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--ik-border);
    }

    .ik-entregadores__acoes {
        width: 100%;
    }

    .ik-entregadores__acoes .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* 27/09/2026 (§5.62, revisão de fechamento): pedidos em andamento na ficha do entregador e o KPI "Em andamento" */
.ik-entregadores__andamento {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ik-entregadores__andamento li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--ik-border);
}

.order--card.ikl--entregador-andamento {
    --ik-kpi-icone: var(--ik-icone-moto);
    --ik-kpi-forte: #1d4ed8;
    --ik-kpi-claro: #e8effd;
    --ik-kpi-tenue: #f3f7fe;
    --ik-kpi-borda: #c7d7fa;
}


/* ==========================================================================
   Modal "Atribuir entregador" do detalhe do pedido da loja (27/09/2026)
   Refeito a partir de uma referência do proprietário. A lógica não mudou: o
   mesmo #myModal (Bootstrap 4), o mesmo .add-delivery-man e o mesmo
   #map_canvas. Ver MASTER.md §5.63.
   ========================================================================== */
.ik-icone--localizar {
    -webkit-mask-image: var(--ik-icone-localizar);
    mask-image: var(--ik-icone-localizar);
}

/* o contêiner leva tabindex="-1" (Esc fecha); o anel fica nos botões — §5.13 */
.modal.ik-atribuir-modal:focus,
.modal.ik-atribuir-modal:focus-visible {
    outline: 0;
}

.ik-atribuir.modal-dialog {
    max-width: 74rem;   /* 1184px */
}

.ik-atribuir .modal-content {
    position: relative;
    padding: 2rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    box-shadow: var(--ik-shadow-md);
    background-color: var(--ik-surface);
}

/* Fechar: 40×40 no canto, X Lucide, anel de foco visível (o mesmo do §5.13) */
.ik-atribuir__fechar,
.ik-atribuir__fechar:not(:disabled):not(.disabled) {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: var(--ik-text-muted);
    font-size: 1rem;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    transition: color var(--ik-transicao), background-color var(--ik-transicao);
}

.ik-atribuir__fechar .ik-icone {
    width: 1.25rem;
    height: 1.25rem;
}

.ik-atribuir__fechar:hover,
.ik-atribuir__fechar:not(:disabled):not(.disabled):hover {
    color: var(--ik-text);
    background-color: var(--ik-surface-2);
    opacity: 1;
}

.ik-atribuir__fechar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-atribuir__cabeca {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-right: 3rem;   /* o X */
}

/* disco tênue da marca com a moto: o par --ik-accent-soft / --ik-accent-em-soft (4,92:1) */
.ik-atribuir__disco {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 4.5rem;    /* 72px */
    height: 4.5rem;
    border-radius: 999px;
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
}

.ik-atribuir__disco > .ik-icone {
    width: 2rem;
    height: 2rem;
    vertical-align: 0;
}

.ik-atribuir__titulo {
    margin: 0;
    color: var(--ik-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.011em;
}

.ik-atribuir__texto {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* duas colunas: lista 5, mapa 7 — as mesmas proporções do template, agora alinhadas pelo topo dos cartões */
.ik-atribuir__corpo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.5rem;
    align-items: stretch;
}

.ik-atribuir__coluna {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface);
}

.ik-atribuir__coluna-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.ik-atribuir__coluna-cabeca > .ik-icone {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--ik-accent-em-soft);
}

.ik-atribuir__coluna-cabeca > div {
    flex: 1 1 12rem;
    min-width: 0;
}

.ik-atribuir__coluna-titulo {
    margin: 0;
    color: var(--ik-text);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.011em;
}

.ik-atribuir__coluna-texto {
    margin: 0.125rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-atribuir__cartoes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 26rem;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.ik-atribuir__cartao {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface);
    cursor: pointer;   /* clicar no cartão centra o entregador no mapa (JS do template) */
    transition: border-color var(--ik-transicao), box-shadow var(--ik-transicao);
}

.ik-atribuir__cartao:hover {
    border-color: var(--ik-border-strong);
    box-shadow: var(--ik-shadow-md);
}

.ik-atribuir__cartao--atual {
    background-color: var(--ik-surface-2);
    cursor: default;
}

.ik-atribuir__cartao > .ik-pedido__avatar {
    width: 4rem;
    height: 4rem;
}

.ik-atribuir__dados {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ik-atribuir__nome {
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ik-atribuir__linhas {
    gap: 0.375rem;
    margin-top: 0.125rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-atribuir__acao.btn {
    flex-shrink: 0;
    min-width: 7rem;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
}

.ik-atribuir__atual {
    align-self: flex-start;
    margin-top: 0.125rem;
}

/* a caixa vazia NÃO estica até o pé da coluna (em produção virou um retângulo tracejado de 300 px) */
.ik-atribuir__vazio {
    flex: 0 0 auto;
}

/* a dica fica ao pé da coluna, neutra — laranja é marca, não decoração (§1) */
.ik-atribuir__dica {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: auto 0 0;
    padding: 0.875rem 1rem;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    color: var(--ik-text-menu);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ik-atribuir__dica > .ik-icone {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.0625rem;
    color: var(--ik-text-muted);
}

/* legenda dos marcadores: as mesmas imagens que o mapa usa */
.ik-atribuir__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ik-atribuir__legenda > li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem 0.25rem 0.375rem;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    color: var(--ik-text-menu);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ik-atribuir__legenda img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}

.ik-atribuir__mapa.location-map {
    display: flex;
    flex: 1 1 auto;
    min-height: 24rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    overflow: hidden;
}

.ik-atribuir__mapa.location-map #map_canvas {
    flex: 1 1 auto;
    min-height: 24rem;
    border-radius: 0;
}

.ik-atribuir__mapa-acoes {
    display: flex;
    justify-content: flex-end;
}

.ik-atribuir__centralizar.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.ik-atribuir__centralizar .ik-icone {
    width: 1.125rem;
    height: 1.125rem;
}

@media (max-width: 991.98px) {
    .ik-atribuir__corpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .ik-atribuir__cartoes {
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    .ik-atribuir .modal-content {
        padding: 1.25rem;
    }

    .ik-atribuir__cabeca {
        align-items: flex-start;
    }

    .ik-atribuir__disco {
        width: 3.5rem;
        height: 3.5rem;
    }

    .ik-atribuir__titulo {
        font-size: 1.25rem;
    }

    .ik-atribuir__cartao {
        flex-wrap: wrap;
    }

    .ik-atribuir__acao.btn {
        flex: 1 1 100%;
    }

    .ik-atribuir__mapa.location-map,
    .ik-atribuir__mapa.location-map #map_canvas {
        min-height: 18rem;
    }
}

/* ==========================================================================
   Início do super admin — iKero (28/09/2026, MASTER §5.64)
   Revisão da página `/admin`: os blocos da Início da loja (§5.21) são
   reaproveitados (.ik-inicio__topo, .ik-kpis-compactos, .ik-ranking,
   .ik-legenda, tokens --ik-grafico-*); aqui entra só o que a loja não tem.
   ========================================================================== */
:root {
    /* Lucide `heart` (ranking "Lojas mais populares", por favoritos) e `hand-coins`
       (KPI "Reembolso solicitado"), do repositório oficial em 28/09/2026, com o
       tratamento da casa (stroke %23000, 1.6). */
    --ik-icone-favorito: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5' /%3E %3C/svg%3E");
    --ik-icone-reembolso-pedido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17' /%3E %3Cpath d='m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9' /%3E %3Cpath d='m2 16 6 6' /%3E %3Ccircle cx='16' cy='9' r='2.9' /%3E %3Ccircle cx='6' cy='5' r='3' /%3E %3C/svg%3E");
    /* terceira e quarta séries de gráfico (assinaturas; rosca de usuários) — cores do §5.4 */
    --ik-grafico-serie-3: #0e7490;
    --ik-grafico-serie-4: #6d28d9;
}

.ik-icone--favorito {
    -webkit-mask-image: var(--ik-icone-favorito);
    mask-image: var(--ik-icone-favorito);
}

.ik-icone--reembolso-pedido {
    -webkit-mask-image: var(--ik-icone-reembolso-pedido);
    mask-image: var(--ik-icone-reembolso-pedido);
}

/* KPIs grandes que só existiam como compacto (ou como `__color-N`) */
.dashboard--card.ikl--sem-entregador {
    --ik-kpi-icone: var(--ik-icone-sem-entregador);
    --ik-kpi-forte: #1d4ed8;
    --ik-kpi-claro: #eaf0fe;
    --ik-kpi-tenue: #f6f9ff;
    --ik-kpi-borda: #d3e0fc;
}

.dashboard--card.ikl--a-caminho {
    --ik-kpi-icone: var(--ik-icone-retirado);
    --ik-kpi-forte: #1d4ed8;
    --ik-kpi-claro: #eaf0fe;
    --ik-kpi-tenue: #f6f9ff;
    --ik-kpi-borda: #d3e0fc;
}

/* compactos: reembolso solicitado (âmbar, hand-coins) e falha no pagamento (rosa, credit-card) */
.order--card.ikl--reembolso-pedido {
    --ik-kpi-icone: var(--ik-icone-reembolso-pedido);
    --ik-kpi-forte: #7a4a00;
}

.order--card.ikl--falha-pagamento {
    --ik-kpi-icone: var(--ik-icone-falha-pagamento);
    --ik-kpi-forte: #9d174d;
}

/* legenda por número de série — o admin tem 3 séries no anual e 3 na rosca */
.ik-legenda__cor--serie-1 { background-color: var(--ik-grafico-serie-1); }
.ik-legenda__cor--serie-2 { background-color: var(--ik-grafico-serie-2); }
.ik-legenda__cor--serie-3 { background-color: var(--ik-grafico-serie-3); }
.ik-legenda__cor--serie-4 { background-color: var(--ik-grafico-serie-4); }

/* cabeçalho: seletor de zona à direita do título; no celular ele desce para a linha de baixo
   com a largura toda (homologação de 28/09/2026: a 390px o seletor de 224px vazava 21px) */
.ik-inicio__topo--com-acoes {
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .ik-inicio__topo--com-acoes .ik-inicio__topo-acoes {
        flex-basis: 100%;
        margin-left: 0;
    }

    .ik-inicio__topo-acoes .select2-container,
    .ik-inicio__topo-acoes select:not(.select2-hidden-accessible) {
        width: 100% !important;
        min-width: 0;
    }
}

.ik-inicio__topo-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.ik-inicio__topo-acoes .select2-container,
.ik-inicio__topo-acoes select:not(.select2-hidden-accessible) {
    min-width: 14rem;
}

/* homologação de 28/09/2026: o <select> escondido pelo select2 herdava o min-width e, absoluto
   à direita, criava rolagem horizontal a 1440px; e o template capitaliza o título ("Boas-Vindas") */
.ik-inicio .page-header-title {
    text-transform: none;
}

.ik-inicio__ajuda {
    margin: 0.25rem 0 0;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

/* rankings do admin: logo de loja inteiro (contain) e entregador em disco */
.ik-ranking__foto--logo {
    object-fit: contain;
    padding: 0.5rem;
    background-color: var(--ik-surface);
}

.ik-ranking__foto-wrap--pessoa {
    width: 72px;
    margin: 0.25rem auto 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

/* "Precisa de ação": uma fileira de links compactos acima dos KPIs. Número
   tabular + rótulo; zero fica apagado (não é alerta). */
.ik-acoes {
    margin-bottom: 1rem;
}

.ik-acoes__titulo {
    margin: 0 0 0.5rem;
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.ik-acoes__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ik-acoes__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--ik-transicao), box-shadow var(--ik-transicao);
}

.ik-acoes__item:hover {
    border-color: var(--ik-border-strong);
    box-shadow: var(--ik-shadow-md);
    color: var(--ik-text);
    text-decoration: none;
}

.ik-acoes__item:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-acoes__numero {
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ik-acoes__item--zero,
.ik-acoes__item--zero .ik-acoes__numero {
    color: var(--ik-text-muted);
}

/* 19/10/2026: com tudo zerado o bloco diz "Tudo em dia" em vez de catorze zeros (o `--zero` fica para quem ainda o usar) */
.ik-acoes__em-dia {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0.5rem 0.875rem;
    border: 1px dashed var(--ik-border);
    border-radius: var(--ik-radius-lg);
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

/* etiquetas de período/zona no título da lista de pedidos do admin (o h1 é text-capitalize) */
.page-header-title .ik-status {
    font-size: 0.8125rem;
    text-transform: none;
    vertical-align: middle;
}

/* bloco carregando: o mesmo estado local dos KPIs da loja (§5.21) */
.ik-inicio [aria-busy="true"] {
    opacity: 0.55;
    pointer-events: none;
}

/* ==========================================================================
   PDV (admin e loja) — iKero (28/09/2026, MASTER §5.65)
   Escopo `.ik-pdv` na raiz da página. Layout no padrão das telas refeitas:
   topo com disco (§5.21), filtros e busca (§5.15), itens no cartão do §5.3,
   pílulas do §5.11 para tipo de pedido e pagamento, carrinho como lista,
   resumo com linhas zeradas escondidas, modal do item com fieldset/legend.
   Os ganchos do JS do template (ids e classes) ficam — só a pele mudou.
   ========================================================================== */
:root {
    /* Lucide `trash`, `minus`, `wallet` — repositório oficial, 28/09/2026, tratamento da casa */
    --ik-icone-lixeira: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10 11v6' /%3E %3Cpath d='M14 11v6' /%3E %3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6' /%3E %3Cpath d='M3 6h18' /%3E %3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2' /%3E %3C/svg%3E");
    --ik-icone-menos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 12h14' /%3E %3C/svg%3E");
    --ik-icone-carteira: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1' /%3E %3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4' /%3E %3C/svg%3E");
    --ik-icone-pausar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect x='14' y='3' width='5' height='18' rx='1' /%3E %3Crect x='5' y='3' width='5' height='18' rx='1' /%3E %3C/svg%3E"); /* Lucide `pause` (lista de anúncios, §5.89) */
    --ik-icone-retomar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpolygon points='6 3 20 12 6 21 6 3' /%3E %3C/svg%3E"); /* Lucide `play` (lista de anúncios, §5.89) */
    --ik-icone-copiar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='14' height='14' x='8' y='8' rx='2' ry='2' /%3E %3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' /%3E %3C/svg%3E"); /* Lucide `copy` (lista de anúncios, §5.89) */
    --ik-icone-sino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10.268 21a2 2 0 0 0 3.464 0' /%3E %3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' /%3E %3C/svg%3E"); /* Lucide `bell` (notificação push, §5.90) */
}

.ik-icone--lixeira { -webkit-mask-image: var(--ik-icone-lixeira); mask-image: var(--ik-icone-lixeira); }
.ik-icone--menos { -webkit-mask-image: var(--ik-icone-menos); mask-image: var(--ik-icone-menos); }
.ik-icone--carteira { -webkit-mask-image: var(--ik-icone-carteira); mask-image: var(--ik-icone-carteira); }
.ik-icone--pausar { -webkit-mask-image: var(--ik-icone-pausar); mask-image: var(--ik-icone-pausar); }
.ik-icone--retomar { -webkit-mask-image: var(--ik-icone-retomar); mask-image: var(--ik-icone-retomar); }
.ik-icone--copiar { -webkit-mask-image: var(--ik-icone-copiar); mask-image: var(--ik-icone-copiar); }
.ik-icone--sino { -webkit-mask-image: var(--ik-icone-sino); mask-image: var(--ik-icone-sino); }

/* caixa de frase e tipografia base */
.ik-pdv .card-title,
.ik-pdv .btn,
.ik-pdv .product-title,
.ik-pdv .modal-title,
.ik-pdv .page-header-title,
.ik-pdv legend,
.ik-pdv label {
    text-transform: none;
}

.ik-pdv .page-header { margin-bottom: 1rem; }

/* ---- grade de duas colunas ---- */
.ik-pdv__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 1650px) {
    .ik-pdv__grade { grid-template-columns: minmax(0, 1fr) 480px; }
}

@media (max-width: 1199.98px) {
    .ik-pdv__grade { grid-template-columns: minmax(0, 1fr); }
}

.ik-pdv__cartao {
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface);
    box-shadow: none;
}

.ik-pdv__cartao-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-pdv__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-pdv__titulo .ik-icone { width: 1.125rem; height: 1.125rem; color: var(--ik-text-muted); }

.ik-pdv__cartao-corpo { padding: 1.25rem; }

/* ---- filtros ---- */
.ik-pdv__filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-pdv__filtro label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.ik-pdv__filtro .form-control,
.ik-pdv__filtro .custom-select,
.ik-pdv__filtro .select2-container .select2-selection--single {
    height: 44px !important;
}

.ik-pdv__filtro .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; }
.ik-pdv__filtro .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }

.ik-pdv__filtro .ik-pedidos__busca { max-width: none; flex-basis: auto; }

/* ---- itens ---- */
.ik-pdv__itens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.75rem;
    padding: 1.25rem;
}

.ik-pdv__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ik-transicao), box-shadow var(--ik-transicao);
}

.ik-pdv__item:hover { border-color: var(--ik-border-strong); box-shadow: var(--ik-shadow-md); }
.ik-pdv__item:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik-pdv__item--esgotado .ik-pdv__item-foto { opacity: 0.6; }

.ik-pdv__item-nome {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.ik-pdv__item-preco {
    margin-top: auto;
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 700;
}

.ik-pdv__item-selo { align-self: flex-start; margin-top: auto; }

.ik-pdv__paginacao { padding: 0 1.25rem 1.25rem; }
.ik-pdv__paginacao .pagination { margin: 0; justify-content: flex-end; }
.ik-pdv__paginacao .page-item.active .page-link { background-color: var(--ik-accent-soft); border-color: var(--ik-accent); color: var(--ik-accent-em-soft); }

/* ---- coluna do pedido ---- */
.ik-pdv__secao { padding: 1rem 1.25rem; border-bottom: 1px solid var(--ik-border); }
.ik-pdv__secao:last-child { border-bottom: 0; }

.ik-pdv__subtitulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.ik-pdv__subtitulo .ik-icone { width: 1rem; height: 1rem; color: var(--ik-text-muted); }

.ik-pdv__cliente-linha { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ik-pdv__cliente-linha .select2-container { flex: 1 1 200px; }
.ik-pdv__cliente-linha .select2-container .select2-selection--single { height: 44px !important; border-color: var(--ik-border-strong); border-radius: var(--ik-radius); }
.ik-pdv__cliente-linha .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; }
.ik-pdv__cliente-linha .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }

.ik-pdv__botao-compacto { min-height: 44px; display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.ik-pdv__botao-compacto .ik-icone { width: 1rem; height: 1rem; }

/* homologação de 28/09/2026: `dl` em grade virava uma fileira só (CSS do template); linhas explícitas */
.ik-pdv__cliente {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    font-size: 0.875rem;
}

.ik-pdv__cliente-dado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; color: var(--ik-text); overflow-wrap: anywhere; }
.ik-pdv__cliente-rotulo { flex: 0 0 4.5rem; color: var(--ik-text-muted); font-weight: 500; }

/* pílulas de tipo de pedido e de pagamento: o desenho do §5.11 */
.ik-pdv__pilulas { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ik-pdv__pilula-radio {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ik-pdv__pilula {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1rem;
    margin: 0;
    border: 1px solid var(--ik-border-strong);
    border-radius: 999px;
    background-color: var(--ik-surface);
    color: var(--ik-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--ik-transicao), border-color var(--ik-transicao), color var(--ik-transicao);
}

.ik-pdv__pilula .ik-icone { width: 1.125rem; height: 1.125rem; }
.ik-pdv__pilula:hover { border-color: var(--ik-text-subtle); color: var(--ik-text); }
.ik-pdv__pilula-radio:checked + .ik-pdv__pilula { background-color: var(--ik-accent-soft); border-color: var(--ik-accent); color: var(--ik-accent-em-soft); font-weight: 600; }
.ik-pdv__pilula-radio:focus-visible + .ik-pdv__pilula { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik-pdv__pilula-radio:disabled + .ik-pdv__pilula { opacity: 0.5; cursor: not-allowed; }

/* endereço do cliente */
.ik-pdv__endereco { margin-top: 0.75rem; }
.ik-pdv__endereco-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ik-pdv__endereco-cabecalho .ik-pdv__subtitulo { margin: 0; }
.ik-pdv__endereco-vazio { margin: 0.5rem 0 0; color: var(--ik-text-muted); font-size: 0.8125rem; }
.ik-pdv__enderecos { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.ik-pdv__endereco-item { display: flex; gap: 0.5rem; align-items: stretch; }

.ik-pdv__endereco-escolher {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    text-align: left;
    font-size: 0.8125rem;
    cursor: pointer;
}

.ik-pdv__endereco-escolher:hover { border-color: var(--ik-border-strong); }
.ik-pdv__endereco-escolher:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik-pdv__endereco-item--ativo .ik-pdv__endereco-escolher { border-color: var(--ik-accent); background-color: var(--ik-accent-soft); }
.ik-pdv__endereco-texto { font-weight: 500; }
.ik-pdv__endereco-detalhe, .ik-pdv__endereco-contato { color: var(--ik-text-menu); }

/* ações de 44px (lixeira, editar) */
.ik-pdv__acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
}

.ik-pdv__acao .ik-icone { width: 1.125rem; height: 1.125rem; }

/* carrinho como lista */
.ik-pdv__carrinho { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

/* homologação de 28/09/2026: linha em flex com quebra — no celular os controles descem para a segunda linha */
.ik-pdv__linha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.625rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ik-border);
}

.ik-pdv__linha > label { margin: 0; flex: 0 0 auto; }
.ik-pdv__linha-texto { flex: 1 1 9rem; }

@media (max-width: 575.98px) {
    .ik-pdv__linha-texto { flex-basis: calc(100% - 48px - 0.625rem); }
    .ik-pdv__linha > label { margin-left: calc(48px + 0.625rem); }
    .ik-pdv__linha-valor { margin-left: auto; }
}

.ik-pdv__linha:last-child { border-bottom: 0; }

.ik-pdv__linha-foto {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    overflow: hidden;
    cursor: pointer;
    border: 0;
    padding: 0;
}

.ik-pdv__linha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ik-pdv__linha-foto:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }

.ik-pdv__linha-texto { min-width: 0; }
.ik-pdv__linha-detalhe.d-inline { display: inline; }
.ik-pdv__linha-nome { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--ik-text); }
.ik-pdv__linha-nome:hover { color: var(--ik-text); text-decoration: underline; }
.ik-pdv__linha-detalhe { display: block; color: var(--ik-text-muted); font-size: 0.75rem; }
.ik-pdv__observacao { color: var(--ik-text-muted); font-size: 0.75rem; }

.ik-pdv__linha-quantidade { width: 56px; height: 44px; text-align: center; border: 1px solid var(--ik-border-strong); border-radius: var(--ik-radius); font-variant-numeric: tabular-nums; }
.ik-pdv__linha-valor { min-width: 5.5rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.ik-pdv__vazio { padding: 2rem 1rem; }

/* resumo */
.ik-pdv__resumo { display: grid; grid-template-columns: 1fr auto; gap: 0.375rem 1rem; margin: 0; font-size: 0.875rem; }
.ik-pdv__resumo dt { color: var(--ik-text-muted); font-weight: 500; }
.ik-pdv__resumo dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ik-text); }
.ik-pdv__resumo-total { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--ik-border); font-size: 1.0625rem; font-weight: 700; color: var(--ik-text); }

/* valor pago / troco */
.ik-pdv__pago { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.75rem; }
.ik-pdv__pago-valores { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; }
.ik-pdv__pago-valores strong { font-variant-numeric: tabular-nums; }

/* botões finais */
.ik-pdv__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ik-pdv__botao { min-height: 44px; }

/* ---- modal do item ---- */
.ik-pdv .modal-content { border-radius: var(--ik-radius-lg); border: 1px solid var(--ik-border); }
.ik-pdv__modal-topo { display: flex; gap: 1rem; align-items: flex-start; }
.ik-pdv__modal-foto { width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--ik-radius); object-fit: cover; background-color: var(--ik-surface-2); }
.ik-pdv__modal-nome { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 700; color: var(--ik-text); }
.ik-pdv__modal-nome:hover { color: var(--ik-text); }
.ik-pdv__modal-preco { font-size: 1rem; font-weight: 600; color: var(--ik-text); font-variant-numeric: tabular-nums; }
.ik-pdv__modal-preco s { margin-left: 0.5rem; color: var(--ik-text-muted); font-weight: 400; font-size: 0.8125rem; }
.ik-pdv__modal-descricao { margin-top: 0.75rem; color: var(--ik-text-menu); font-size: 0.875rem; }

.ik-pdv__grupo { margin: 1rem 0 0; padding: 0.875rem; border: 1px solid var(--ik-border); border-radius: var(--ik-radius-lg); min-width: 0; }
.ik-pdv__grupo legend { float: none; width: auto; margin: 0 0 0.125rem; padding: 0; font-size: 0.9375rem; font-weight: 600; color: var(--ik-text); }
.ik-pdv__grupo-dica { margin: 0 0 0.625rem; color: var(--ik-text-muted); font-size: 0.8125rem; }
.ik-pdv__grupo .ik-pdv__pilulas { gap: 0.5rem; }
.ik-pdv__opcao-preco { color: var(--ik-text-menu); font-weight: 500; }
.ik-pdv__pilula--esgotada { opacity: 0.55; text-decoration: line-through; }

/* complemento com quantidade: a pílula + o contador do template escondido/mostrado pelo JS */
.ik-pdv__complemento { display: flex; align-items: center; gap: 0.375rem; }
.ik-pdv__complemento .addon-quantity-input { display: inline-flex; align-items: center; visibility: hidden; height: 44px; border: 1px solid var(--ik-border-strong); border-radius: 999px; background-color: var(--ik-surface); padding: 0 0.25rem; margin: 0; box-shadow: none; }
.ik-pdv__complemento .addon-quantity-input .btn { width: 36px; height: 40px; padding: 0; }
.ik-pdv__complemento .addon-quantity-input .form-control { width: 2.5rem; height: 40px; padding: 0; text-align: center; border: 0; background: transparent; }

.ik-pdv__quantidade { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.ik-pdv__quantidade-controle { display: inline-flex; align-items: center; border: 1px solid var(--ik-border-strong); border-radius: 999px; }
.ik-pdv__quantidade-controle .btn-number { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ik-text); }
.ik-pdv__quantidade-controle .btn-number .ik-icone { width: 1rem; height: 1rem; }
.ik-pdv__quantidade-controle .form-control { width: 3.25rem; height: 44px; padding: 0; text-align: center; border: 0; background: transparent; font-weight: 600; }

.ik-pdv__campo-observacao { margin-top: 1rem; }
.ik-pdv__campo-observacao textarea { resize: vertical; min-height: 3.25rem; }
.ik-pdv__contador { display: block; margin-top: 0.25rem; color: var(--ik-text-subtle); font-size: 0.75rem; text-align: right; }

.ik-pdv__modal-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; }
.ik-pdv__modal-total { font-size: 0.875rem; color: var(--ik-text-muted); }
.ik-pdv__modal-total strong { color: var(--ik-text); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }

/* ---- menu inferior no celular ---- */
.ik-pdv__mobile { display: flex; flex-direction: column; gap: 0.75rem; }
.ik-pdv__mobile-resumo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ik-pdv__mobile-miniaturas { display: flex; }
.ik-pdv__mobile-miniatura { position: relative; width: 36px; height: 36px; margin-right: -8px; border: 2px solid var(--ik-surface); border-radius: 50%; overflow: hidden; background-color: var(--ik-surface-2); }
.ik-pdv__mobile-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.ik-pdv__mobile-miniatura--mais img { opacity: 0.35; }
.ik-pdv__mobile-mais { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--ik-text); }
.ik-pdv__mobile-total { text-align: right; }
.ik-pdv__mobile-rotulo { display: block; color: var(--ik-text-muted); font-size: 0.75rem; }
.ik-pdv__mobile-total strong { font-size: 1.125rem; }
.ik-pdv__mobile-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* a coluna do pedido no celular é o painel fixo do template (classes do common.js) */
.ik-pdv .pos-collapse-arrow { background: var(--ik-surface); border: 1px solid var(--ik-border); box-shadow: var(--ik-shadow-md); }
.ik-pdv .pos-cross_arrow { background-color: var(--ik-surface-2); border: 1px solid var(--ik-border); }
.ik-pdv .pos-cross_arrow i { color: var(--ik-text); }
@media (max-width: 767.98px) {
    .ik-pdv .order__pos-right__mobile { border-radius: var(--ik-radius-lg) var(--ik-radius-lg) 0 0; overflow-y: auto; max-height: 92vh; }
    .ik-pdv__itens { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); padding: 1rem; }
    .ik-pdv__filtros { padding: 1rem; }
}

/* =========================================================================
   Lista de pedidos do ADMIN (MASTER §5.15, "Lista do admin", 28/09/2026)
   O escopo .ik-pedidos da loja vale inteiro; aqui só o que o admin tem a mais:
   a faixa de "filtros salvos" e a coluna da loja.
   ========================================================================= */
.ik-pedidos__aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--ik-border);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    font-size: 0.875rem;
}

.ik-pedidos__aviso > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ik-pedidos__aviso .ik-icone {
    color: var(--ik-text-muted);
}

.ik-pedidos__aviso .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.ik-pedidos__loja {
    color: var(--ik-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ik-pedidos__loja:hover,
.ik-pedidos__loja:focus {
    color: var(--ik-accent-em-soft);
}

.ik-pedidos__filtros-botao {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-inline: 1rem;
}

.ik-pedidos__filtros-botao .badge {
    font-variant-numeric: tabular-nums;
}

/* sidebar do filtro da lista do admin: legendas no tamanho do `.text-cap` do template (o `<legend>`
   nativo vem em 1,5rem) e botões sem capitalização palavra a palavra */
#datatableFilterSidebar legend.text-cap,
#datatableFilterSidebar label.text-cap {
    width: auto;
    margin-bottom: 0.75rem;
    font-size: 0.6875rem;
    color: var(--ik-text-muted);
}

#datatableFilterSidebar .btn {
    text-transform: none;
}

/* =========================================================================
   Assinaturas do ADMIN (MASTER §5.20, "Admin", 28/09/2026): o cartão de ações
   — situação atual, pausas com "Retomar" — sobre o .ik-pedido__cartao
   ========================================================================= */
.ik-assinatura__situacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ik-border);
    margin-bottom: 1rem;
}

.ik-assinatura__pausas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ik-assinatura__pausa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    font-size: 0.875rem;
}

.ik-assinatura__pausa .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.ik-assinatura__acoes {
    display: grid;
    gap: 0.5rem;
}

/* =========================================================================
   Lista de despacho do ADMIN (MASTER §5.15, "Lista de despacho", 28/09/2026)
   Sobre o .ik-pedidos: a espera como etiqueta com relógio, o estado do motor
   como etiqueta abaixo do status e o rodapé de atualização.
   ========================================================================= */
.ik-despacho .page-header .ik-pedido__subtitulo {
    margin-top: 0.25rem;
}

.ik-despacho__espera {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.ik-despacho__espera .ik-icone {
    width: 0.875rem;
    height: 0.875rem;
}

.ik-despacho__estado {
    display: inline-flex;
    margin-top: 0.25rem;
    text-decoration: none;
}

/* o estado do motor fica SOB a etiqueta: lado a lado, a coluna Ações saía da tela em 1440px */
.ik-despacho .ik-pedidos__tabela td:nth-child(8) .ik-status {
    display: flex;
    width: max-content;
}

a.ik-despacho__estado:hover,
a.ik-despacho__estado:focus {
    text-decoration: underline;
}

.ik-despacho__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.ik-despacho__rodape .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.ik-despacho__vazio-linha td {
    padding: 0 !important;
}

/* a espera e o estado do motor usam a PALETA das etapas, não os ícones delas (a etiqueta desenha o ícone da
   etapa por ::before; aqui o ícone é o relógio, ou nenhum) */
.ik-despacho__espera::before,
.ik-despacho__estado::before {
    display: none !important;
}

/* ==========================================================================
   5.66 Configuração de zonas do super admin (28/09/2026) — escopo `.ik-zonas`,
   sobre o molde de lista `.ik-pedidos` (§5.15). Tokens do mapa: outras zonas em
   cinza, a zona editada em azul, o traçado novo em vermelho — o template desenhava
   tudo no mesmo vermelho. `--ik-interruptor-ligado`: o interruptor comunica STATUS,
   então ligado é o verde de `.ik-status--ativa`, não o laranja da marca (vale para
   o tema inteiro — CLAUDE.md, "laranja nunca comunica status").
   ========================================================================== */
:root {
    --ik-zona-outras: #6b7280;
    --ik-zona-atual: #2563eb;
    --ik-zona-nova: #dc2626;
    --ik-interruptor-ligado: #0a6045;   /* 7,58:1 no branco (o mesmo de --ik-sucesso-texto) */
}

.toggle-switch-input:checked + .toggle-switch-label {
    background-color: var(--ik-interruptor-ligado);
}

.toggle-switch-input:checked:disabled + .toggle-switch-label {
    background-color: var(--ik-interruptor-ligado);   /* o template pintava o desabilitado ligado de laranja a 50% */
}

.toggle-switch-input:disabled + .toggle-switch-label {
    opacity: 0.55;
    cursor: not-allowed;
}

.ik-zonas .card-title,
.ik-zonas .input-label,
.ik-zonas .toggle-switch,
.ik-zonas button[class*="btn--"],
.ik-zonas a[class*="btn--"] {
    text-transform: none;
}

.ik-zonas__subtitulo {
    margin: 0.375rem 0 0;
    max-width: 62rem;
    color: var(--ik-text-muted);
    font-size: 0.9375rem;
}

.ik-zonas__nova-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
}

.ik-zonas__nova-link .ik-icone {
    width: 1rem;
    height: 1rem;
}

.ik-pedidos__vazio-linha td {
    padding: 0 !important;
}

.ik-zonas__linha--nova td {
    background-color: var(--ik-accent-soft);
}

.ik-zonas__taxa {
    text-decoration: none;
}

.ik-zonas__taxa:hover,
.ik-zonas__taxa:focus {
    text-decoration: underline;
}

.ik-zonas__padrao {
    white-space: nowrap;
    min-height: 36px;
}

.ik-zonas__aviso-criada .ik-icone {
    color: var(--ik-sucesso-texto);
}

.ik-zonas__cadastro .card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.ik-zonas__ajuda {
    margin: 0;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-zonas__passos {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.ik-zonas__passos li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--ik-text);
}

.ik-zonas__passo-icone {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ik-border);
    border-radius: 0.5rem;
    font-size: 1rem;
    color: var(--ik-text-muted);
}

.ik-zonas__passo-icone .ik-icone {
    width: 1rem;
    height: 1rem;
}

.ik-zonas__mapa {
    position: relative;
    height: 440px;
    overflow: hidden;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

.ik-zonas__mapa #map-canvas {
    width: 100%;
    height: 100%;
}

@media (max-width: 575.98px) {
    .ik-zonas__mapa {
        height: 320px;
    }
}

.ik-zonas__busca-lugar {
    margin-top: 10px;
    width: min(24rem, 72vw);
}

.ik-zonas__busca-lugar gmp-place-autocomplete,
.ik-zonas__busca-lugar input {
    display: block;
    width: 100%;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ik-zonas__ferramentas {
    margin: 10px;
    display: flex;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ik-zonas__ferramenta {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background-color: #fff;
    color: var(--ik-text);
    font-size: 1.125rem;
    cursor: pointer;
}

.ik-zonas__ferramenta + .ik-zonas__ferramenta {
    border-left: 1px solid var(--ik-border);
}

.ik-zonas__ferramenta[aria-pressed="true"] {
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
}

.ik-zonas__ferramenta:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: -2px;
}

.ik-zonas__mapa-aviso {
    display: flex;
    margin-top: 0.75rem;
    white-space: normal;
}

.ik-zonas__mapa-aviso::before {
    display: none !important;
}

.ik-zonas__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.625rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-zonas__legenda span::before {
    content: "";
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.375rem;
    vertical-align: -0.125rem;
    border: 2px solid var(--ik-zona-cor);
    border-radius: 0.25rem;
    background-color: color-mix(in srgb, var(--ik-zona-cor) 15%, #fff);
}

.ik-zonas__legenda-outras { --ik-zona-cor: var(--ik-zona-outras); }
.ik-zonas__legenda-atual { --ik-zona-cor: var(--ik-zona-atual); }
.ik-zonas__legenda-nova { --ik-zona-cor: var(--ik-zona-nova); }

.ik-zonas__acoes-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ik-zonas__acoes-form .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ==========================================================================
   5.67 Configurações da zona do super admin (28/09/2026) — escopo `.ik-zona-config`,
   sobre `.ik-pedidos.ik-zonas` (§5.66). Blocos com interruptor (aumento emergencial,
   tipos de entrega), ajuda em texto sob o campo, patamares de incentivo em tabela.
   ========================================================================== */
.ik-zona-config__cabecalho {
    padding: 0;
    border: 0;
    background: transparent;
}

.ik-zona-config__cabecalho .ik-pedidos__filtro {
    text-decoration: none;
}

.ik-zona-config__titulo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

.ik-zona-config__ajuda {
    display: block;
    margin-top: 0.25rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-zona-config__bloco {
    margin: 0.5rem 0 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

.ik-zona-config__bloco + .ik-zona-config__bloco {
    margin-top: 1rem;
}

.ik-zona-config__bloco-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ik-zona-config__bloco-titulo {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ik-text);
    text-transform: none;
}

.ik-zona-config__bloco-corpo {
    margin-top: 1rem;
}

.ik-zona-config__tempo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem;
    gap: 0.5rem;
}

.ik-zona-config__tipo {
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: #fff;
}

.ik-zona-config__tipo-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-zona-config__tipo-titulo .ik-icone {
    width: 1rem;
    height: 1rem;
    color: var(--ik-text-muted);
}

.ik-zona-config .card-footer {
    margin-top: 0;
}

/* passos do "Como funciona" das zonas (o partial das assinaturas, ícones próprios) */
.ik-assinatura__passo--taxa { --ik-assinatura-icone: var(--ik-icone-cifrao); }
.ik-assinatura__passo--tipos { --ik-assinatura-icone: var(--ik-icone-raio); }
.ik-assinatura__passo--incentivo { --ik-assinatura-icone: var(--ik-icone-estrela); }

/* ==========================================================================
   5.68 Culinária do super admin (28/09/2026) — escopo `.ik-culinarias`, sobre o molde
   `.ik-pedidos.ik-zonas` (§5.66). Ícone novo: Lucide `chef-hat` (`--ik-icone-chef`),
   a página `culinarias` do IconesDoPainel e o item do menu do admin.
   ========================================================================== */
:root {
    --ik-icone-chef: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z' /%3E %3Cpath d='M6 17h12' /%3E %3C/svg%3E"); /* chef-hat */
}

.ik-icone--chef {
    -webkit-mask-image: var(--ik-icone-chef);
    mask-image: var(--ik-icone-chef);
}

.ik-culinarias__nome-celula {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* o nome da culinária é como o admin escreveu ("Açaí e sorvetes"): o `.ik-pedidos__nome` capitaliza nomes de pessoa */
.ik-culinarias .ik-pedidos__nome {
    text-transform: none;
}

/* a legenda do uploader do template duplica a ajuda da tela */
/* `~` e não `+`: o validador do painel insere a mensagem de erro entre o quadro e a legenda */
.ik-culinarias .upload-file:has(#image-input) ~ p.fs-10 {
    display: none;
}

.ik-culinarias__miniatura {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--ik-radius);
    border: 1px solid var(--ik-border);
    background-color: var(--ik-surface-2);
    object-fit: cover;
}

.ik-culinarias__seo {
    margin-top: 1.25rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

.ik-culinarias__seo-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--ik-text);
    list-style: none;
}

.ik-culinarias__seo-titulo::-webkit-details-marker {
    display: none;
}

.ik-culinarias__seo-titulo .ik-icone {
    width: 1rem;
    height: 1rem;
    color: var(--ik-text-muted);
    transition: transform 0.2s ease;
}

.ik-culinarias__seo[open] .ik-culinarias__seo-titulo .ik-icone {
    transform: rotate(180deg);
}

.ik-culinarias__seo-titulo .ik-zonas__ajuda {
    flex-basis: 100%;
    font-weight: 400;
}

.ik-culinarias__seo-corpo {
    padding: 0 1.25rem 1.25rem;
}

.ik-culinarias__seo-corpo .card {
    box-shadow: none;
    border: 1px solid var(--ik-border);
}

/* iKero 28/09/2026 (revisão do cadastro de culinária): o campo de arquivo do uploader do template é invisível
   (opacidade 0) e o quadro é um <label> sem `for` — quem navega por teclado chegava ao campo sem ver onde estava.
   Foco visível no quadro para TODO uploader do painel (§ acessibilidade: nunca remover o anel de foco). */
.upload-file__input:focus-visible + .upload-file__wrapper {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* classes próprias do cadastro de culinária (antes reaproveitava as das zonas) */
.ik-culinarias__form .card-footer,
.ik-culinarias__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.ik-culinarias__acoes .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ik-culinarias__ajuda {
    display: block;
    margin-top: 0.25rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

/* a imagem vai em destaque no app: prévia de 160px (o uploader do template tinha 100px) */
.ik-culinarias__form .upload-file__wrapper.ratio-1 {
    width: 160px;
    height: 160px;
}

/* iKero 28/09/2026 — "Adicionar loja" do admin (MASTER §5.69): botões de 44px na barra fixa e a busca de lugar
   nova no mapa compartilhado (map-functionality.js — cadastro/edição da loja pelo admin e cadastro público). */
.ik-loja-cadastro__botao {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.ik-mapa__busca-lugar {
    margin-top: 10px;
    /* sobra espaço para a tela cheia no canto superior direito, também no celular */
    width: min(22rem, calc(100% - 8rem));
}

.ik-mapa__busca-lugar gmp-place-autocomplete {
    display: block;
    width: 100%;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   LISTA DE LOJAS — super admin (29/09/2026, MASTER §5.70)
   Molde das listas do admin (.ik-pedidos, culinária/zonas) + cartões compactos
   que filtram pela situação (§5.4, segunda linha: barra de acento, sem marca-d'água).
   ========================================================================== */
.ik-lojas__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.ik-lojas__selo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    font-size: 0.875rem;
}

.ik-lojas__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ik-lojas__kpi {
    display: flex;
    align-items: center;
    min-height: 56px;
    text-decoration: none;
}

.ik-lojas__kpi .card-title {
    color: var(--ik-kpi-forte);
}

/* valor em reais não cabe ao lado do rótulo em cartão estreito (celular): desce para a linha de baixo em vez de ser
   cortado (02/10/2026, coleta de dinheiro a 390 px mostrava "R$ 251,0") */
.ik-lojas__kpi > .d-flex {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.ik-lojas__kpi-rotulo {
    color: var(--ik-text);
    font-weight: 500;
}

/* o cartão que está filtrando a lista: borda na cor forte do próprio cartão */
.ik-lojas__kpi--atual {
    border-color: var(--ik-kpi-forte);
    box-shadow: inset 0 0 0 1px var(--ik-kpi-forte);
}

.order--card.ikl--lojas-todas {
    --ik-kpi-icone: var(--ik-icone-loja);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f6f6fe;
    --ik-kpi-borda: #cfcff5;
}

.order--card.ikl--lojas-ativas {
    --ik-kpi-icone: var(--ik-icone-check);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e7f6ef;
    --ik-kpi-tenue: #f4fbf7;
    --ik-kpi-borda: #c3e8d6;
}

/* inativa não é erro: cinza, nunca vermelho */
.order--card.ikl--lojas-inativas {
    --ik-kpi-icone: var(--ik-icone-x);
    --ik-kpi-forte: #3f3f46;
    --ik-kpi-claro: #f1f1f3;
    --ik-kpi-tenue: #f8f8f9;
    --ik-kpi-borda: #dcdce0;
}

.order--card.ikl--lojas-novas {
    --ik-kpi-icone: var(--ik-icone-calendario);
    --ik-kpi-forte: #0e7490;
    --ik-kpi-claro: #e6f6fa;
    --ik-kpi-tenue: #f3fbfc;
    --ik-kpi-borda: #c7e9f0;
}

.ik-lojas .ik-relatorio__filtros .ik-lojas__busca {
    grid-column: span 2;
}

/* iKero 30/09/2026: "Limpar filtros" fica ACIMA do botão, na altura dos rótulos dos outros campos (column-reverse) —
   embaixo, ele alongava a célula e o "Filtrar" subia, desalinhado dos campos da mesma linha. */
.ik-lojas__aplicar {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.375rem;
}

.ik-lojas__limpar {
    align-self: flex-end;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    /* iKero 06/10/2026: link de texto do MASTER (sublinhado em --ik-text, laranja só no hover) — herdava o laranja do link a 3,31:1 */
    color: var(--ik-text);
    text-decoration: underline;
}

.ik-lojas__limpar:hover,
.ik-lojas__limpar:focus {
    color: var(--ik-accent-fill);
}

.ik-lojas__nome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.5rem;
}

.ik-lojas__nome > a {
    flex-basis: 100%;
}

.ik-lojas__nota {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-lojas__nota .ik-icone {
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--ik-status-texto);  /* âmbar de .ik-status--pendente, como as estrelas das avaliações */
}

.ik-lojas__dono {
    font-weight: 600;
    color: var(--ik-text);
}

/* nome da loja como foi cadastrado: `.ik-pedidos__nome` capitaliza cada palavra ("Bar Do Leo") */
.ik-lojas__loja {
    color: var(--ik-text);
    font-weight: 600;
}

.ik-lojas__culinarias {
    display: inline-block;
    max-width: 14rem;
    white-space: normal;
}

@media (max-width: 767.98px) {
    .ik-lojas .ik-relatorio__filtros .ik-lojas__busca {
        grid-column: 1 / -1;
    }
    .ik-lojas__tabela thead {
        display: none;
    }
    .ik-lojas__tabela tbody,
    .ik-lojas__tabela tr {
        display: block;
    }
    .ik-lojas__tabela tr {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--ik-border);
    }
    .ik-lojas__tabela td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.375rem 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }
    .ik-lojas__tabela td::before {
        content: attr(data-rotulo);
        flex-shrink: 0;
        color: var(--ik-text-muted);
        font-size: 0.8125rem;
        text-align: left;
    }
    .ik-lojas__tabela td:first-child {
        display: none;
    }
    /* iKero 30/09/2026: a 1ª célula só se esconde quando é o "Nº". Tabela cuja 1ª coluna é o conteúdo (a avaliação, a
       campanha, o contato, o entregador, o pedido) leva `ik-lojas__tabela--titulo`: ela vira o título do cartão, sem
       rótulo. Antes eram exceções por página, e as avaliações de itens, as campanhas e a ficha do entregador perdiam o
       conteúdo no celular. */
    .ik-lojas__tabela.ik-lojas__tabela--titulo td:first-child {
        display: block;
        text-align: left;
    }
    .ik-lojas__tabela.ik-lojas__tabela--titulo td:first-child::before {
        content: none;
    }
    /* o estado vazio é a 1ª (e única) célula da linha: a regra acima o escondia no celular em toda lista com "Nº" —
       o filtro sem resultado mostrava a tabela em branco. Aparece sempre, centralizado. */
    .ik-lojas__tabela tr.ik-pedidos__vazio-linha td:first-child {
        display: block;
        text-align: center;
    }
    .ik-lojas__tabela td .ik-culinarias__nome-celula,
    .ik-lojas__tabela td .ik-pedidos__acoes {
        justify-content: flex-end;
    }
    .ik-lojas__tabela td .ik-lojas__dono-bloco {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .ik-lojas__tabela .ik-pedidos__vazio-linha td::before {
        content: none;
    }
    .ik-lojas__tabela .ik-pedidos__vazio-linha td {
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   SOLICITAÇÕES DE ADESÃO DE LOJA — super admin (29/09/2026, MASTER §5.71)
   Mesmo molde da lista de lojas (.ik-lojas, §5.70); aqui só as abas, o motivo
   da negação e o rótulo do modal de negar.
   ========================================================================== */
.ik-solicitacoes__abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-solicitacoes__aba {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--ik-text-muted);
    font-weight: 500;
    text-decoration: none;
}

.ik-solicitacoes__aba:hover {
    color: var(--ik-text);
    text-decoration: none;
}

/* a aba atual: texto forte e sublinhado na cor de acento (marca, não status) */
.ik-solicitacoes__aba--atual {
    color: var(--ik-text);
    border-bottom-color: var(--ik-accent-fill);
}

.ik-solicitacoes__motivo {
    max-width: 18rem;
    white-space: normal;
}

.ik-solicitacoes__rotulo {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--ik-text);
    font-weight: 500;
}

/* o modal de negar (10/10/2026, MASTER §5.71.2): no desenho do diálogo de aprovar (`.ik-dialogo`) — disco, título central,
   motivo em caixa de lista + detalhes, contador e as duas ações lado a lado; sem a capitalização global do template */
.ik-solicitacoes__modal .btn {
    text-transform: none;
}

.ik-solicitacoes__modal .modal-dialog {
    max-width: 34rem;
}

.ik-solicitacoes__modal .modal-content {
    position: relative;
    padding: 2.5rem 2.5rem 2rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    box-shadow: var(--ik-shadow-md);
}

.ik-solicitacoes__modal .modal-body {
    padding: 0;
}

/* fechar: 40×40 no canto, X do Lucide — o mesmo do diálogo de aprovar */
.ik-solicitacoes__fechar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: var(--ik-text-muted);
    font-size: 1.125rem;
    transition: color var(--ik-transicao), background-color var(--ik-transicao);
}

.ik-solicitacoes__fechar:hover {
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
}

.ik-solicitacoes__fechar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* disco de negar: o vermelho de erro (§3), nunca o laranja da marca */
.ik-solicitacoes__disco {
    --ik-dialogo-icone: var(--ik-icone-x);
    background-color: var(--ik-erro-fundo);
}

.ik-solicitacoes__disco .ik-dialogo__icone {
    background-color: var(--ik-erro-texto);
}

.ik-solicitacoes__modal .ik-dialogo__texto strong {
    color: var(--ik-text);
    font-weight: 600;
}

/* as partes a corrigir (10/10/2026, CorrecaoDoCadastro): caixas em duas colunas, alvo de 40 px */
.ik-solicitacoes__partes {
    margin: 1rem 0 0;
    padding: 0;
    border: 0;
}

.ik-solicitacoes__partes legend {
    font-size: 1rem;
}

.ik-solicitacoes__partes-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 1rem;
}

.ik-solicitacoes__parte {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    margin: 0;
    color: var(--ik-text);
    font-size: 0.875rem;
    cursor: pointer;
}

.ik-solicitacoes__parte input {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    accent-color: var(--ik-accent-fill);
}

@media (max-width: 575.98px) {
    .ik-solicitacoes__partes-lista {
        grid-template-columns: 1fr;
    }
}

/* a caixa de lista do motivo: a altura dos campos do formulário */
.ik-solicitacoes__lista {
    min-height: 44px;
}

.ik-solicitacoes__modal textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.ik-solicitacoes__rodape-campo {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.375rem;
}

.ik-solicitacoes__rodape-campo small:last-child {
    flex-shrink: 0;
}

.ik-solicitacoes__acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.75rem;
}

.ik-solicitacoes__acoes .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* cancelar: cinza claro chapado, sem borda — a variante dos diálogos (§5.17) */
.ik-solicitacoes__cancelar {
    border: 1px solid transparent;
    background-color: var(--ik-bg);
    color: var(--ik-text);
}

.ik-solicitacoes__cancelar:hover,
.ik-solicitacoes__cancelar:focus {
    background-color: var(--ik-border);
    color: var(--ik-text);
}

/* Negar travado até o motivo valer: o mesmo vermelho, apagado — o cursor diz que ainda não dá */
.btn.ik-decisao:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .ik-solicitacoes__modal .modal-content {
        padding: 2rem 1.25rem 1.25rem;
    }

    .ik-solicitacoes__acoes {
        grid-template-columns: 1fr;
    }

    .ik-solicitacoes__acoes .ik-decisao {
        order: -1;
    }
}

/* ==========================================================================
   Exportações em massa do admin — período de cadastro (§5.73, 29/09/2026).
   O "Por data de cadastro" usa o calendário do painel (partial
   `_periodo-personalizado`, §5.36) no lugar dos dois `<input type="date">`:
   campo de 44 px como os outros do formulário e calendário flutuante logo
   abaixo, por cima do rodapé do cartão, sem empurrar a página.
   ========================================================================== */
.ik-exportacao .ik-periodo__campo {
    min-height: 44px;
    height: 44px;
    width: 100%;
    border-color: var(--ik-border-strong);
    font-size: 0.875rem;
}

.ik-exportacao .ik-periodo__campo:focus-visible {
    outline: none;
    border-color: var(--ik-accent);
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.15);
}

.ik-exportacao .ik-periodo__campo .ik-filtro__periodo-texto {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.ik-exportacao .ik-periodo__campo.is-invalid {
    border-color: var(--ik-erro-texto);
}

.ik-exportacao .ik-periodo__campo.is-invalid:focus-visible {
    border-color: var(--ik-erro-texto);
    box-shadow: 0 0 0 3px rgba(163, 20, 58, 0.15);
}

.ik-exportacao .ik-periodo__calendario,
.ik-exportacao .ik-periodo__calendario--abaixo {
    position: absolute;
    top: calc(100% + 0.5rem);
    bottom: auto;
    left: 0;
    z-index: 1020;
    width: 22rem;
    max-width: 100%;
    margin: 0;
    background-color: var(--ik-surface);
    box-shadow: 0 12px 32px rgba(24, 24, 27, 0.16);
}

.ik-exportacao .ik-periodo__calendario .flatpickr-calendar .flatpickr-day {
    height: 34px;
    line-height: 32px;
    margin: 1px 0;
}

/* ==========================================================================
   5.74 Categorias do super admin (29/09/2026) — `.ik-categorias` soma-se ao
   molde da culinária (§5.68: `.ik-pedidos.ik-zonas.ik-culinarias`), que dá a
   lista, a página de cadastro e o SEO recolhido. Aqui só a ORDEM NA INÍCIO:
   um campo numérico curto (0–99) na linha e no formulário.
   ========================================================================== */
.ik-categorias__ordem {
    margin: 0;
}

.ik-categorias__ordem-campo.form-control {
    width: 5.5rem;
    min-height: 44px;
    height: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ik-categorias__ordem-campo[readonly] {
    background-color: var(--ik-surface-2);
}

/* ==========================================================================
   5.75 Subcategorias do super admin (29/09/2026) — a lista usa o molde da de
   categorias (§5.74). Aqui só a barra de filtro: a busca do molde
   (`.ik-pedidos__busca`, 480 px, ícone à esquerda) ganha a principal e o status
   na mesma linha e quebra linha quando falta espaço.
   ========================================================================== */
.ik-pedidos__busca.ik-subcategorias__filtros {
    max-width: none;
    flex: 1 1 36rem;
    flex-wrap: wrap;
}

.ik-subcategorias__filtros input[type="search"] {
    flex: 1 1 14rem;
}

.ik-pedidos__busca.ik-subcategorias__filtros select.form-control {
    flex: 0 1 12rem;
    padding-left: 0.75rem;
}

/* ==========================================================================
   5.77 Categorias da loja no super admin (29/09/2026) — molde da lista de
   categorias (§5.74) e da barra de filtro das subcategorias (§5.75). Aqui só o
   aviso do recurso "Minha categoria" desligado (faixa informativa neutra, não
   laranja: laranja é marca) e o seletor de prioridade da linha.
   ========================================================================== */
.ik-categorias__aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    font-size: 0.875rem;
}

.ik-categorias__aviso .ik-icone {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ik-catloja__prioridade.form-control {
    width: auto;
    min-width: 7.5rem;
    min-height: 44px;
}

/* iKero 29/09/2026 (cupons e cashback do admin, MASTER §5.84): a busca da barra com DOIS filtros (tipo e situação) +
   botão passa dos 480 px de `.ik-itens__busca` e, sem "Exportar" ao lado, vazava do cartão. O modificador tira o teto e
   deixa quebrar linha; a busca continua ocupando o que sobrar. */
.ik-itens__busca--filtros {
    max-width: none;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ik-itens__busca--filtros .form-control:not(.ik-cupons__situacao) {
    flex: 1 1 12rem;
}


/* iKero 29/09/2026: o template limita todo chip do select2 a 150 px (style.css:13672) e cortava "Todos os clientes" no
   seletor de clientes (cupons e cashback do admin, `select[data-ik-clientes]`) */
select[data-ik-clientes] + .select2 .select2-selection__choice {
    max-width: 100%;
}

/* ==========================================================================
   LISTA DE REELS — super admin (30/09/2026, MASTER §5.92)
   Molde da lista de lojas (§5.70): cartões compactos (§5.4, segunda linha) com a nota da semana, gráfico pelo script
   compartilhado da Início (tokens --ik-grafico-*), filtros com rótulo e a tabela compartilhada `.ik-reels__tabela`
   (admin, aba Reels da loja no admin e painel da loja), que vira cartões no celular.
   ========================================================================== */
.order--card.ikl--reels-total {
    --ik-kpi-icone: var(--ik-icone-video);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f6f6fe;
    --ik-kpi-borda: #cfcff5;
}

.order--card.ikl--reels-views {
    --ik-kpi-icone: var(--ik-icone-olho);
    --ik-kpi-forte: #0e7490;
    --ik-kpi-claro: #e6f6fa;
    --ik-kpi-tenue: #f4fbfd;
    --ik-kpi-borda: #c7e9f1;
}

.order--card.ikl--reels-likes {
    --ik-kpi-icone: var(--ik-icone-favorito);
    --ik-kpi-forte: #6d28d9;
    --ik-kpi-claro: #f2ecfd;
    --ik-kpi-tenue: #faf7ff;
    --ik-kpi-borda: #e2d6fa;
}

.order--card.ikl--reels-visitas {
    --ik-kpi-icone: var(--ik-icone-loja);
    --ik-kpi-forte: #3f3f46;
    --ik-kpi-claro: #f1f1f3;
    --ik-kpi-tenue: #f8f8f9;
    --ik-kpi-borda: #dcdce0;
}

.order--card.ikl--reels-pedidos {
    --ik-kpi-icone: var(--ik-icone-shopping-cart);
    --ik-kpi-forte: #1d4ed8;
    --ik-kpi-claro: #eaf0fe;
    --ik-kpi-tenue: #f6f9ff;
    --ik-kpi-borda: #d3e0fc;
}

.order--card.ikl--reels-valor {
    --ik-kpi-icone: var(--ik-icone-cifrao);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e7f6ef;
    --ik-kpi-tenue: #f4fbf7;
    --ik-kpi-borda: #c3e8d6;
}

/* seis cartões: três por linha no desktop (em seis colunas o valor em reais quebrava palavra a palavra e cortava),
   dois no tablet, um no celular */
.ik-reels-lista__kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .ik-reels-lista__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .ik-reels-lista__kpis {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* cartão informativo: sem o levantar do hover (não é link) */
.ik-reels-lista__kpi,
.ik-reels-lista__kpi:hover {
    transform: none;
    cursor: default;
}

.ik-reels-lista__kpi .card-title {
    white-space: nowrap;
}

.ik-reels-lista__semana {
    color: var(--ik-text-muted);
    font-size: 0.75rem;
}

.ik-reels-lista__grafico {
    position: relative;
    height: 280px;
}

.ik-reels-lista__grafico-vazio {
    color: var(--ik-text-muted);
    text-align: center;
    padding: 1.5rem 0;
}

.ik-reels-lista .ik-pedidos__barra .ik-legenda {
    margin-left: auto;
}

.ik-reels__celula {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* capa 9:16, o formato do Reel; abre o detalhe */
.ik-reels__capa {
    flex: none;
    width: 40px;
    height: 71px;
    padding: 0;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    overflow: hidden;
    background: var(--ik-surface-2);
    cursor: pointer;
}

.ik-reels__capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ik-reels__texto {
    min-width: 0;
}

.ik-reels__descricao {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 16rem;
    overflow: hidden;
    color: var(--ik-text);
    white-space: normal;
}

.ik-reels__engajamento {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ik-text);
    font-size: 0.8125rem;
}

.ik-reels__engajamento li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.ik-reels__engajamento .ik-icone {
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--ik-text-muted);
}

@media (max-width: 767.98px) {
    .ik-reels__tabela thead {
        display: none;
    }
    .ik-reels__tabela tbody,
    .ik-reels__tabela tr {
        display: block;
    }
    .ik-reels__tabela tr {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--ik-border);
    }
    .ik-reels__tabela td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.375rem 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }
    .ik-reels__tabela td::before {
        content: attr(data-rotulo);
        flex-shrink: 0;
        color: var(--ik-text-muted);
        font-size: 0.8125rem;
        text-align: left;
    }
    /* a primeira célula (o Reel) ocupa a linha inteira, sem rótulo */
    .ik-reels__tabela td:first-child {
        justify-content: flex-start;
        text-align: left;
    }
    .ik-reels__tabela td:first-child::before {
        content: none;
    }
    .ik-reels__tabela .ik-pedidos__acoes,
    .ik-reels__tabela .ik-anuncio-pedidos__loja {
        justify-content: flex-end;
    }
    .ik-reels__tabela .ik-pedidos__vazio-linha td::before {
        content: none;
    }
    .ik-reels__tabela .ik-pedidos__vazio-linha td {
        justify-content: center;
        text-align: center;
    }
    .ik-reels-lista .ik-pedidos__barra .ik-legenda {
        margin-left: 0;
    }
}

/* ==========================================================================
   MENSAGENS DO SUPER ADMIN — o suporte (30/09/2026, MASTER §5.93)
   A tela usa o desenho das conversas da loja (.ik-chat, §5.14) em DUAS colunas (sem a lateral do pedido); aqui só o
   contador de não lidas em cada aba e o atalho visível para a ficha no cabeçalho da conversa.
   ========================================================================== */
.ik-chat__aba-contador {
    display: inline-block;
    margin-left: 0.375rem;
    vertical-align: 1px;
}

.ik-chat__aba-contador[hidden] {
    display: none;
}

/* dentro da aba ATIVA (fundo --ik-accent-fill) o contador inverte: branco com o número na cor da aba — o mesmo par
   de cores, 4,95:1 */
.ik-chat__abas .nav-link.active .ik-chat__aba-contador {
    background-color: #ffffff;
    color: var(--ik-accent-fill);
}

.ik-chat__ficha {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    min-height: 36px;
    white-space: nowrap;
}

.ik-chat__ficha .ik-icone {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 575.98px) {
    /* no celular o nome ganha a largura: a ficha fica só com o ícone, num alvo de 40 px */
    .ik-chat__ficha {
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
    }

    .ik-chat__ficha-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* ==========================================================================
   MENSAGENS DE CONTATO — o "Fale conosco" no admin (30/09/2026, MASTER §5.94)
   Lista no molde das listas refeitas (.ik-pedidos/.ik-lojas: abas com contador das Solicitações, tabela que vira
   cartões no celular). Aqui só a prévia, o detalhe (texto, histórico de respostas) e os botões do formulário.
   ========================================================================== */
/* o template capitaliza cada palavra de `.card-title` e `.btn` ("Responder Por E-Mail") — aqui vale a frase como escrita */
.ik-contatos .card-title,
.ik-contatos .btn {
    text-transform: none;
}

.ik-contatos__pessoa {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ik-contatos__previa {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 32rem;
    overflow: hidden;
    color: var(--ik-text);
    white-space: normal;
}

.ik-contatos__vazio-ajuda {
    max-width: 30rem;
    color: var(--ik-text-muted);
    text-align: center;
}

.ik-contatos__voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 32px;
    color: var(--ik-text-muted);
    font-weight: 500;
}

.ik-contatos__voltar:hover {
    color: var(--ik-text);
}

.ik-contatos__voltar .ik-icone {
    width: 1rem;
    height: 1rem;
}

/* o texto como a pessoa escreveu: quebras mantidas, palavra comprida não estoura o cartão */
.ik-contatos__texto {
    color: var(--ik-text);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.ik-contatos__respostas {
    padding: 0;
}

.ik-contatos__resposta {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ik-border);
}

.ik-contatos__resposta:first-child {
    border-top: 0;
}

.ik-contatos__resposta-topo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.5rem;
}

.ik-contatos__ajuda {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-contatos__botoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.ik-contatos__botoes .btn {
    min-height: 44px;
}

.ik-contatos__botoes .ik-icone {
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
}


@media (max-width: 575.98px) {
    .ik-contatos__botoes .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   LISTA DE CLIENTES — super admin (30/09/2026, MASTER §5.95)
   Molde da lista de lojas (§5.70: cartões que filtram, filtros com rótulo, cartões no celular). Aqui só os tons dos
   cinco cartões — um ícone por cartão, sem repetir (§5.4) — e a célula do cliente. "Exclusão pedida" é da família do
   vermelho (a conta vai ser apagada), "Bloqueado" é cinza (decisão do admin, não erro).
   ========================================================================== */
.order--card.ikl--clientes-todos {
    --ik-kpi-icone: var(--ik-icone-usuario);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f6f6fe;
    --ik-kpi-borda: #cfcff5;
}

.order--card.ikl--clientes-ativos {
    --ik-kpi-icone: var(--ik-icone-check);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e7f6ef;
    --ik-kpi-tenue: #f4fbf7;
    --ik-kpi-borda: #c3e8d6;
}

.order--card.ikl--clientes-bloqueados {
    --ik-kpi-icone: var(--ik-icone-x);
    --ik-kpi-forte: #3f3f46;
    --ik-kpi-claro: #f1f1f3;
    --ik-kpi-tenue: #f8f8f9;
    --ik-kpi-borda: #dcdce0;
}

.order--card.ikl--clientes-exclusao {
    --ik-kpi-icone: var(--ik-icone-lixeira);
    --ik-kpi-forte: #a3143a;
    --ik-kpi-claro: #fdecf0;
    --ik-kpi-tenue: #fef6f8;
    --ik-kpi-borda: #f6d4dd;
}

.order--card.ikl--clientes-novos {
    --ik-kpi-icone: var(--ik-icone-calendario);
    --ik-kpi-forte: #0e7490;
    --ik-kpi-claro: #e6f6fa;
    --ik-kpi-tenue: #f3fbfc;
    --ik-kpi-borda: #c7e9f0;
}

.ik-clientes__foto {
    border-radius: 50%;
    object-fit: cover;
}

.ik-clientes__dados {
    min-width: 0;
    max-width: 18rem;
    overflow-wrap: anywhere;
}

/* a célula do cliente não encolhe abaixo de um e-mail comum (visto em 1440 px: o nome ia a 3 linhas e o e-mail
   quebrava no meio, porque a situação reservava a largura do "pedida em … apaga em …" numa linha só) */
.ik-clientes__celula-cliente {
    min-width: 16rem;   /* 17rem passava 2 px em 1280 e a tabela ganhava barra de rolagem */
}

.ik-clientes__numero {
    color: var(--ik-text);
    font-weight: 600;
}

.ik-clientes__detalhe {
    max-width: 11rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    white-space: normal;
}

@media (max-width: 767.98px) {
    .ik-clientes__celula-cliente {
        min-width: 0;
    }

    .ik-clientes__detalhe {
        max-width: none;
    }
}

/* iKero 30/09/2026 — Bônus da carteira do admin (MASTER §5.96): a descrição do bônus embaixo do título, quebrando e
   limitada a duas linhas (a tabela é `table-nowrap`: sem isso uma descrição longa alargava a página). */
.ik-bonus__descricao {
    white-space: normal;
    max-width: 280px;
    font-size: 0.8125rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* iKero 30/09/2026 — Ajuste de saldo da carteira do admin (MASTER §5.97): o painel "Saldo do cliente" ao lado do
   formulário. Débito na lista em `--ik-erro-texto` (7,1:1 sobre branco) e com o sinal "−": a cor nunca é o único sinal. */
.ik-ajuste__cliente { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.ik-ajuste__nome { margin: 0; font-weight: 600; color: var(--ik-text); overflow-wrap: anywhere; }
.ik-ajuste__contato { margin: 0; font-size: 0.8125rem; color: var(--ik-text-muted); overflow-wrap: anywhere; }
.ik-ajuste__saldo {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    margin: 1rem 0; padding: 0.875rem 1rem; border-radius: var(--ik-radius); background-color: var(--ik-surface-2);
}
.ik-ajuste__saldo-rotulo { color: var(--ik-text-muted); font-size: 0.875rem; }
.ik-ajuste__saldo-valor { font-size: 1.375rem; font-weight: 600; color: var(--ik-text); }
.ik-ajuste__impedimento { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 1rem; color: var(--ik-erro-texto); font-size: 0.875rem; }
.ik-ajuste__subtitulo { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--ik-text-muted); }
.ik-ajuste__lancamentos { list-style: none; margin: 0; padding: 0; }
.ik-ajuste__lancamento {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.5rem 0; border-bottom: 1px solid var(--ik-border);
}
.ik-ajuste__lancamento:last-child { border-bottom: 0; }
.ik-ajuste__lancamento > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ik-ajuste__lancamento-tipo { color: var(--ik-text); font-size: 0.875rem; overflow-wrap: anywhere; }
.ik-ajuste__lancamento-data { color: var(--ik-text-muted); font-size: 0.75rem; }
.ik-ajuste__lancamento-valor { font-weight: 600; color: var(--ik-text); white-space: nowrap; }
.ik-ajuste__lancamento-valor--debito { color: var(--ik-erro-texto); }
.ik-ajuste__vazio { margin: 0; color: var(--ik-text-muted); }
.ik-ajuste fieldset[disabled] { opacity: 0.6; }

/* ==========================================================================
   RELATÓRIO DE PONTOS DE FIDELIDADE — super admin (30/09/2026, MASTER §5.98)
   Molde da lista de clientes (§5.95). Três cartões, um ícone cada (§5.4): ganhos (verde, `trending-up`), convertidos em
   saldo (ciano, `carteira`) e em aberto (índigo, `estrela`) — o template pintava o débito de verde com ✓ e o crédito de
   vermelho com ✗. Pontos que saem na lista em `--ik-erro-texto` com "−" (a cor nunca é o único sinal).
   ========================================================================== */
.order--card.ikl--fid-ganhos {
    --ik-kpi-icone: var(--ik-icone-trending-up);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e7f6ef;
    --ik-kpi-tenue: #f4fbf7;
    --ik-kpi-borda: #c3e8d6;
}

.order--card.ikl--fid-convertidos {
    --ik-kpi-icone: var(--ik-icone-carteira);
    --ik-kpi-forte: #0e7490;
    --ik-kpi-claro: #e6f6fa;
    --ik-kpi-tenue: #f3fbfc;
    --ik-kpi-borda: #c7e9f0;
}

.order--card.ikl--fid-aberto {
    --ik-kpi-icone: var(--ik-icone-estrela);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f6f6fe;
    --ik-kpi-borda: #cfcff5;
}

.ik-fidelidade__codigo { font-size: 0.75rem; color: var(--ik-text-muted); }
.ik-fidelidade__pontos { font-weight: 600; white-space: nowrap; }
.ik-fidelidade__pontos--saida { color: var(--ik-erro-texto); }

/* iKero 30/09/2026 — o select2 de cliente (fidelidade e ajuste de saldo) com a altura dos outros campos (44 px; tinha
   42 e descia a linha dos rótulos) e o texto de exemplo como foi escrito (o template capitalizava: "Todos Os Clie…"). */
.ik-fidelidade .select2-container--default .select2-selection--single,
.ik-ajuste .select2-container--default .select2-selection--single { height: 44px; display: flex; align-items: center; }
.ik-fidelidade .select2-container--default .select2-selection--single .select2-selection__arrow,
.ik-ajuste .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.ik-fidelidade .select2-selection__placeholder,
.ik-ajuste .select2-selection__placeholder { text-transform: none; }

/* iKero 30/09/2026 — fidelidade: no celular os três cartões um por linha (em duas colunas de 174 px o "120 pts"
   vazava do cartão e o rótulo quebrava em quatro linhas); o número nunca quebra. */
.ik-fidelidade__kpis .card-title { white-space: nowrap; }
@media (max-width: 575.98px) {
    .ik-fidelidade__kpis { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FICHA DO CLIENTE — Visão geral (05/10/2026, MASTER §5.98.2): perfil no topo (foto, nome, situação, ações e dados
   pessoais), cartões `.ik-lojas__kpis`, resumo dos pedidos, itens mais pedidos e endereços na própria página; modal de
   endereço único (`.ik-endereco`).
   ========================================================================== */
.ik-ficha__topo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.ik-ficha__foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.ik-ficha__identidade { flex: 1 1 14rem; min-width: 0; }
.ik-ficha__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ik-ficha__acoes .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 0.375rem; }
.ik-ficha__interruptor { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--ik-border); border-radius: var(--ik-radius); }
.ik-ficha__dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem 1.5rem; margin: 1.25rem 0 0; }
.ik-ficha__dados--coluna { grid-template-columns: 1fr 1fr; margin-top: 0; margin-bottom: 0.75rem; }
.ik-ficha__dados dt { font-size: 0.8125rem; font-weight: 400; color: var(--ik-text-muted); margin-bottom: 0.125rem; }
.ik-ficha__dados dd { margin: 0; color: var(--ik-text); overflow-wrap: anywhere; }
.ik-ficha__kpis .ik-lojas__kpi > .d-flex { flex-direction: column; align-items: flex-start !important; gap: 0.25rem; }
.ik-ficha__endereco { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; padding: 0.875rem 0; border-top: 1px solid var(--ik-border); }
.ik-ficha__endereco:first-child { border-top: 0; padding-top: 0; }
.ik-ficha__endereco-texto { min-width: 0; overflow-wrap: anywhere; }
.ik-ficha__endereco-texto .ik-status { margin-bottom: 0.375rem; }
.ik-endereco__canvas { height: 18rem; border-radius: var(--ik-radius); overflow: hidden; background: var(--ik-surface-2); }
.ik-endereco__erro-geral { color: var(--ik-erro-texto); }
.pac-container { z-index: 100000 !important; } /* sugestões do Google acima do modal (a regra morava na view do template) */
.ik-endereco .invalid-feedback:empty { display: none !important; }
.ik-endereco .invalid-feedback:not(:empty) { display: block; color: var(--ik-erro-texto); }
.ik-ficha__kpis .card-title { white-space: nowrap; }
.ik-ficha .badge { text-transform: none; } /* o template capitaliza os selos ("Não Pago") */
.ik-ficha .ik-pedidos__valor { white-space: nowrap; } /* "R$" não se separa do número no cartão do celular */
/* as abas da ficha (MASTER §5.98.7): o componente `.ik-solicitacoes__abas` numa linha só — com 8 abas, no celular a faixa
   rola de lado dentro dela (a página não) */
.ik-ficha__abas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
/* iKero 06/10/2026: no toque a faixa rola pelo dedo — a barra de rolagem (que aparecia embaixo da aba e confundia com o sublinhado,
   e uma vertical à direita) some; com mouse continua a barra fina, o jeito de chegar às abas que não cabem */
@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
    .ik-ficha__abas { scrollbar-width: none; -ms-overflow-style: none; }
    .ik-ficha__abas::-webkit-scrollbar { display: none; }
}
.ik-ficha__abas .ik-solicitacoes__aba { white-space: nowrap; flex: 0 0 auto; }
.ik-ficha__abas .ik-solicitacoes__aba:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: -2px; }
/* a aba Indicações da ficha (MASTER §5.98.8): os cartões com ícone Lucide — as paletas dos cartões que já existem */
.order--card.ikl--ind-codigo { --ik-kpi-icone: var(--ik-icone-cupom); --ik-kpi-forte: #4338ca; --ik-kpi-claro: #eeeefc; --ik-kpi-tenue: #f6f6fe; --ik-kpi-borda: #cfcff5; }
.order--card.ikl--ind-por { --ik-kpi-icone: var(--ik-icone-usuario); --ik-kpi-forte: #0e7490; --ik-kpi-claro: #e6f6fa; --ik-kpi-tenue: #f3fbfc; --ik-kpi-borda: #c7e9f0; }
.order--card.ikl--ind-indicados { --ik-kpi-icone: var(--ik-icone-todos); --ik-kpi-forte: #0e7490; --ik-kpi-claro: #e6f6fa; --ik-kpi-tenue: #f3fbfc; --ik-kpi-borda: #c7e9f0; }
.order--card.ikl--ind-credito { --ik-kpi-icone: var(--ik-icone-carteira); --ik-kpi-forte: #0a6045; --ik-kpi-claro: #e7f6ef; --ik-kpi-tenue: #f4fbf7; --ik-kpi-borda: #c3e8d6; }
.ik-endereco .input-label, .ik-endereco .btn { text-transform: none; }
.ik-endereco__busca { display: block; width: 100%; background-color: var(--ik-surface); border: 1px solid var(--ik-border); border-radius: var(--ik-radius); } /* busca nova do Google (gmp-place-autocomplete) */ /* o template capitaliza rótulos e botões */
@media (max-width: 575.98px) {
    .ik-ficha__dados--coluna { grid-template-columns: 1fr; }
    .ik-ficha__acoes { width: 100%; }
}

/* ==========================================================================
   FICHA DO CLIENTE — aba "Pontos de fidelidade" (05/10/2026, MASTER §5.98.1): o molde do relatório de pontos (§5.98);
   a busca mora na barra do cartão da lista, numa linha só.
   ========================================================================== */
.ik-fidelidade__celula { display: block; min-width: 0; }
.ik-ficha-pontos__busca { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ik-ficha-pontos__busca .ik-lojas__busca { min-width: 14rem; }

/* ==========================================================================
   LISTA DE CLIENTES — segunda revisão (05/10/2026, MASTER §5.95): interruptor com alvo de toque de 44 px sem mudar o
   desenho (o mesmo da Configuração de login), menu "Mais ações" ao lado do "Ver" e a lista de exportações recentes.
   ========================================================================== */
.ik-clientes__tabela .toggle-switch { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.ik-clientes .ik-pedidos__acoes .dropdown-menu { min-width: 12rem; }
.ik-clientes__exportacao { padding: 0.375rem 0; border-top: 1px solid var(--ik-border); font-size: 0.875rem; }
.ik-clientes__exportacao:first-child { border-top: 0; }

/* ==========================================================================
   MENU LATERAL DO ADMIN (05/10/2026, MASTER §5.2.2): aviso da busca sem resultado (js/ikero/menu/busca.js), no tom
   neutro do texto do menu.
   ========================================================================== */
.ik-menu-busca__vazio {
    margin: 0.5rem 0.75rem 0;
    color: #52525b;
    font-size: 0.8125rem;
}
.navbar-vertical-aside-mini-mode .ik-menu-busca__vazio { display: none; }

/* ==========================================================================
   IMPOSTOS DA PLATAFORMA — super admin (05/10/2026, MASTER §5.176)
   Molde dos relatórios do admin (§5.98/§5.175) com o aviso neutro e o KPI de imposto do relatório de impostos da loja
   (§5.40): receita neutra (`cifrao`), imposto em índigo informativo (`ikl--imp-total`) — o template pintava o imposto de
   vermelho e a receita de laranja. A nota de "estimativa" é texto neutro com o ícone `info`.
   ========================================================================== */
.order--card.ikl--impplat-receita {
    --ik-kpi-icone: var(--ik-icone-cifrao);
    --ik-kpi-forte: #3f3f46;
}
.ik-impplat__nota {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}
.ik-impplat__nota > .ik-icone { flex-shrink: 0; margin-top: 0.125rem; }
.ik-impplat__campo[hidden] { display: none !important; }
.ik-impplat__voltar {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    margin-bottom: 0.75rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}
.ik-impplat__voltar:hover, .ik-impplat__voltar:focus { color: var(--ik-text); }
/* célula de várias linhas numa caixa só: no celular a célula vira flex (rótulo | valor) */
.ik-impplat__celula { display: block; min-width: 0; }
/* o select2 múltiplo com a altura mínima dos outros campos e o texto de exemplo como foi escrito */
.ik-impplat .select2-container--default .select2-selection--multiple { min-height: 44px; }
.ik-impplat .select2-search__field::placeholder { text-transform: none; }
/* homologação: os campos de imposto ocupam a linha toda (o select2 múltiplo cresce com os escolhidos e desalinhava a
   fileira; os rótulos de uma e duas linhas também) e o nome do imposto aparece inteiro no chip ("ISS" × "PIS") */
.ik-impplat__filtros .ik-impplat__campo { grid-column: 1 / -1; }
.ik-impplat .select2-selection__choice { max-width: 100%; white-space: normal; }
.ik-impplat .select2-selection__choice__display { white-space: normal; overflow: visible; }
/* os cartões com o mesmo desenho: rótulo em cima, valor embaixo */
.ik-impplat__kpis .ik-lojas__kpi > .d-flex { flex-direction: column; align-items: flex-start !important; gap: 0.25rem; }

/* ==========================================================================
   RELATÓRIO DA CARTEIRA DOS CLIENTES — super admin (05/10/2026, MASTER §5.175)
   Molde do relatório de pontos de fidelidade (§5.98). Quatro cartões, um ícone cada (§5.4): entradas (verde,
   `trending-up`), saídas (âmbar, `trending-down` — dinheiro que saiu, a família de aviso das despesas; nunca laranja),
   movimento líquido (neutro, `cifrao`) e em carteira hoje (índigo, `carteira`). O template pintava o reembolso de
   vermelho e o débito do admin de verde; o sentido agora é o sinal "+"/"−" do valor (a cor nunca é o único sinal).
   ========================================================================== */
.order--card.ikl--cart-entradas {
    --ik-kpi-icone: var(--ik-icone-trending-up);
    --ik-kpi-forte: #0a6045;
    --ik-kpi-claro: #e7f6ef;
    --ik-kpi-tenue: #f4fbf7;
    --ik-kpi-borda: #c3e8d6;
}

.order--card.ikl--cart-saidas {
    --ik-kpi-icone: var(--ik-icone-trending-down);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fef8ee;
    --ik-kpi-borda: #f3dcb6;
}

/* neutro, o mesmo dos cartões "Todos"/"Agendado" (§5.4) — o líquido não é bom nem ruim por si */
.order--card.ikl--cart-liquido {
    --ik-kpi-icone: var(--ik-icone-cifrao);
    --ik-kpi-forte: #3f3f46;
}

.order--card.ikl--cart-hoje {
    --ik-kpi-icone: var(--ik-icone-carteira);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f6f6fe;
    --ik-kpi-borda: #cfcff5;
}

/* referência longa (o motivo do ajuste é texto livre) quebra dentro da célula */
.ik-carteira-rel__ref { max-width: 18rem; overflow-wrap: anywhere; }
/* no modo cartão do celular (< 768 px) a célula ocupa a linha toda, como as outras (com o teto ela ficava recuada) */
@media (max-width: 767.98px) {
    .ik-carteira-rel__ref { max-width: none; }
}
/* conteúdo de várias linhas numa caixa só: no celular a célula vira flex (rótulo | valor) e cada filho virava uma coluna
   (o "inclui bônus" e o "por <admin>" ao lado, espremidos) — achado da homologação */
.ik-carteira-rel__celula { display: block; min-width: 0; }
/* os quatro cartões com o mesmo desenho: rótulo em cima, valor embaixo (dois quebravam e dois não) */
.ik-carteira-rel__kpis .ik-lojas__kpi > .d-flex { flex-direction: column; align-items: flex-start !important; gap: 0.25rem; }
/* o "×" do select2 de cliente afastado do nome */
.ik-carteira-rel .select2-selection__clear { margin-left: 0.5rem; }
/* quatro cartões: duas colunas no tablet, uma no celular (a regra da fidelidade já põe uma por linha < 576 px) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .ik-carteira-rel__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* iKero 30/09/2026 — Categorias de veículo (MASTER §5.99): a ação primária do topo numa linha só e sem o Title Case do
   template (quebrava em "Nova / Categoria"); no celular ela desce para baixo do título, na largura toda. */
.ik-veiculos .ik-inicio__topo { flex-wrap: wrap; }
.ik-veiculos .ik-inicio__topo > div { flex: 1 1 0; min-width: 0; }
.ik-veiculos .ik-inicio__topo > .btn { white-space: nowrap; flex-shrink: 0; text-transform: none; }
.ik-veiculos .card-title,
.ik-veiculos .empty--data h5 { text-transform: none; }
@media (max-width: 575.98px) {
    .ik-veiculos .ik-inicio__topo > .btn { flex-basis: 100%; margin-left: 0 !important; }
}

/* iKero 30/09/2026 — formulário de turno (MASTER §5.100): o resumo ao vivo da duração (neutro; acima de 12 h nos tons do
   `.ik-status--pendente`, âmbar — nunca o laranja da marca, que não comunica status) e a lista dos turnos existentes. */
.ik-turno__resumo {
    margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2); color: var(--ik-text); font-size: 0.875rem; font-weight: 500;
}
.ik-turno__resumo--longo { background-color: var(--ik-aviso-fundo); color: var(--ik-aviso-texto); }
/* 18/10/2026 (auditoria B1): início = fim impede salvar — erro, não aviso (as cores do `.ik-turno__conflito`) */
.ik-turno__resumo--erro { background-color: var(--ik-erro-fundo); color: var(--ik-erro-texto); }
/* a sobreposição ao vivo: aviso de erro de campo e a linha do turno em conflito destacada */
.ik-turno__conflito {
    margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--ik-radius);
    background-color: var(--ik-erro-fundo); color: var(--ik-erro-texto); font-size: 0.875rem; font-weight: 500;
}
.ik-turno__lista li.is-conflito > span { color: var(--ik-erro-texto) !important; font-weight: 600; }
.ik-turno__existentes { margin-bottom: 1rem; padding: 0.875rem 1rem; border: 1px solid var(--ik-border); border-radius: var(--ik-radius); }
.ik-turno__existentes-titulo { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--ik-text-muted); }
.ik-turno__lista { list-style: none; margin: 0 0 0.5rem; padding: 0; }
/* 18/10/2026 (auditoria M1): a linha quebra — o horário noturno ("18:00 – 02:00 · termina no dia seguinte") é `nowrap` e
   esmagava o nome até uma letra por linha (13 px a 390, 62 px a 1280); agora o nome guarda 8rem e o horário desce, à direita */
.ik-turno__lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.125rem 1rem; padding: 0.375rem 0; border-bottom: 1px solid var(--ik-border); font-size: 0.875rem; }
.ik-turno__lista li:last-child { border-bottom: 0; }
.ik-turno__lista li > span:first-child { flex: 1 1 8rem; min-width: 0; color: var(--ik-text); overflow-wrap: anywhere; }
.ik-turno__lista li > span:last-child { margin-left: auto; white-space: nowrap; }  /* "18:00 – 23:59" não quebra no celular */

/* iKero 30/09/2026 — cadastros de entregador (MASTER §5.101): os pontos a conferir no detalhe, no âmbar de aviso
   (`--ik-aviso-*`, 7,48:1) — nunca o laranja da marca. Informa, não bloqueia. */
.ik-candidato__conferir {
    padding: 0.75rem 1rem; border-radius: var(--ik-radius);
    background-color: var(--ik-aviso-fundo); color: var(--ik-aviso-texto); font-size: 0.875rem;
}
.ik-candidato__conferir-titulo { margin: 0 0 0.25rem; font-weight: 600; }
.ik-candidato__conferir ul { padding-left: 1.125rem; }

/* iKero 30/09/2026 — selo de contagem no item do menu lateral: o template dá `flex: 1` a todo
   `.navbar-vertical-aside-mini-mode-hidden-elements`, e o selo crescia tanto quanto o texto, espremendo-o
   ("Cadastr…", "Nova solicit…"). O selo fica do tamanho do número; o texto ocupa o resto. */
.navbar-vertical-content .nav-link > .badge.navbar-vertical-aside-mini-mode-hidden-elements { flex: 0 0 auto; }

/* iKero 30/09/2026 — novo entregador do admin (MASTER §5.102): os turnos do autônomo em grade de caixas; a faixa
   usa `.ik-cupons__quem-paga`. */
.ik-entregador__turnos { border: 0; padding: 0; margin: 0; min-width: 0; }
.ik-entregador__turnos legend { width: auto; margin-bottom: 0.25rem; font-size: inherit; }
.ik-entregador__turnos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem 1.25rem; margin-top: 0.5rem; }
.ik-entregador__turnos-grade .custom-control-label { line-height: 1.5; }
/* a seção que vem em outro bloco (a "Trabalho" do admin) leva a mesma divisória das seções irmãs */
.ik-funcionarios__secao--separada { padding-top: 1.5rem; border-top: 1px solid var(--ik-border); }

/* iKero 30/09/2026 — lista de entregadores do admin (MASTER §5.103): nos cartões do celular a 1ª célula é o ENTREGADOR
   (foto e nome) — aparece como título do cartão, sem rótulo, como em .ik-contatos */

/* iKero 30/09/2026 — ficha do entregador do admin (MASTER §5.104): o "Recolher" no cartão de dinheiro em mãos leva à
   tela "Coletar dinheiro" com o entregador escolhido */
.ik-entregadores__recolher { display: inline-block; margin-top: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--ik-text); text-decoration: underline; }
.ik-entregadores__recolher:hover, .ik-entregadores__recolher:focus { color: var(--ik-text); }

/* ==========================================================================
   AVALIAÇÕES DOS ENTREGADORES — super admin (30/09/2026, MASTER §5.105)
   Molde das avaliações de itens (§5.16.1). Quatro cartões com paletas já medidas (§5.4): nota média das visíveis
   (âmbar, `estrela` — a da ficha), avaliações (índigo, `conversa`), notas 1–2 (vinho, `alerta`: o que pede atenção)
   e ocultas (grafite, `olho`). Cada cartão filtra a lista; nada aqui é laranja.
   ========================================================================== */
.order--card.ikl--avent-media {
    --ik-kpi-icone: var(--ik-icone-estrela);
    --ik-kpi-forte: #7a4a00;
    --ik-kpi-claro: #fdf3e4;
    --ik-kpi-tenue: #fefaf2;
    --ik-kpi-borda: #f4e2c4;
}

.order--card.ikl--avent-total {
    --ik-kpi-icone: var(--ik-icone-conversa);
    --ik-kpi-forte: #4338ca;
    --ik-kpi-claro: #eeeefc;
    --ik-kpi-tenue: #f6f6fe;
    --ik-kpi-borda: #cfcff5;
}

.order--card.ikl--avent-baixas {
    --ik-kpi-icone: var(--ik-icone-alerta);
    --ik-kpi-forte: #a3143a;
    --ik-kpi-claro: #fdecf0;
    --ik-kpi-tenue: #fef5f7;
    --ik-kpi-borda: #f5c2cf;
}

.order--card.ikl--avent-ocultas {
    --ik-kpi-icone: var(--ik-icone-olho);
    --ik-kpi-forte: #3f3f46;
    --ik-kpi-claro: #f1f1f3;
    --ik-kpi-tenue: #f8f8f9;
    --ik-kpi-borda: #dcdce0;
}

.ik-avent__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .ik-avent__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ik-avent__comentario { margin: 0.25rem 0; overflow-wrap: anywhere; }

/* iKero 30/09/2026 (tarde) — avaliações dos entregadores: destaques que o cliente marcou (selos neutros, sem cor de
   status: é o que o cliente elogiou, não uma situação), o registro de quem ocultou e o link de conversa nas notas 1–2. */
.ik-avent__destaques { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.25rem 0; padding: 0; list-style: none; }
.ik-avent__destaque {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    background: var(--ik-surface-2, var(--ik-bg));
    color: var(--ik-text);
    font-size: 0.75rem;
    line-height: 1.4;
}
.ik-avent__ocultada { margin: 0.375rem 0 0; color: var(--ik-text-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.ik-avent__ocultada .ik-status { margin-bottom: 0.25rem; }
.ik-avent__conversar { font-size: 0.8125rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.ik-avent__conversar .ik-icone { width: 1rem; height: 1rem; }

/* iKero 30/09/2026 — a nota de cada avaliação em cinco estrelas (partial `_estrelas-da-nota`, MASTER §5.16.1): as que
   contam em `--ik-estrela` (dourado; o âmbar de .ik-status--pendente é o tom de TEXTO e saía marrom), as outras em
   `--ik-border-strong`. Nota não é status: sem .ik-status. */
.ik-avaliacoes__estrelas--linha { font-size: 1rem; color: var(--ik-estrela); }
.ik-avaliacoes__estrelas .ik-avaliacoes__estrela--apagada { color: var(--ik-border-strong); }

/* iKero 30/09/2026 — bônus do entregador (MASTER §5.106): os valores dos cartões não quebram ("R$ / 1,00") e, no
   celular, um cartão por linha — o mesmo ajuste dos pontos de fidelidade. */
.ik-bonus-dm__kpis .card-title { white-space: nowrap; }
@media (max-width: 575.98px) {
    .ik-bonus-dm__kpis { grid-template-columns: 1fr; }
}

/* iKero 30/09/2026 — bônus do entregador: o dinheiro em mãos no painel, abaixo do saldo, com "Recolher" (mesmo link da
   ficha) e a nota de que o bônus não abate essa dívida (MASTER §5.106). */
.ik-bonus-dm__em-maos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-top: 0.75rem; }
.ik-bonus-dm__em-maos-valor { font-weight: 600; color: var(--ik-text); }
.ik-bonus-dm__nao-abate { margin: 0.375rem 0 0.75rem; }

/* iKero 30/09/2026 — incentivos do entregador (MASTER §5.107): barra do lote (selecionar os prontos + "Aprovar
   selecionados · N (R$ X)"), a caixa de seleção na célula do entregador (que no celular é o título do cartão) e as ações
   da linha. Cartões sem quebrar o valor; um por linha no celular. */
.ik-incentivos__lote { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.ik-incentivos__todos { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--ik-text); cursor: pointer; }
.ik-incentivos__pessoa { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ik-incentivos__pessoa input[type="checkbox"], .ik-incentivos__todos input[type="checkbox"] { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.ik-incentivos__acoes { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ik-incentivos__kpis .card-title { white-space: nowrap; }
@media (max-width: 575.98px) {
    .ik-incentivos__kpis { grid-template-columns: 1fr; }
    .ik-incentivos__lote { width: 100%; }
    .ik-incentivos__lote .btn { width: 100%; }
}

/* ---- Galeria do admin (02/10/2026, MASTER §5.118): pastas e grade de imagens ---- */
.ik-galeria__pastas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .5rem;
}
.ik-galeria__pasta {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem .75rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    color: var(--ik-text);
    background: var(--ik-surface);
    transition: border-color var(--ik-transicao);
}
.ik-galeria__pasta:hover { border-color: var(--ik-border-strong); color: var(--ik-text); text-decoration: none; }
.ik-galeria__grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .75rem;
}
.ik-galeria__item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    padding: .5rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background: var(--ik-surface);
}
.ik-galeria__miniatura {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--ik-radius);
    background: var(--ik-bg);
}
.ik-galeria__nome { font-size: .8125rem; color: var(--ik-text-muted); }
.ik-galeria__usos { font-size: .8125rem; color: var(--ik-text); line-height: 1.35; }
.ik-galeria__usos a { color: var(--ik-text); text-decoration: underline; text-underline-offset: 2px; }
.ik-galeria__usos a:hover { color: var(--ik-accent); }
.ik-galeria__item .ik-status { align-self: flex-start; }
@media (max-width: 575.98px) {
    .ik-galeria__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Menu do admin sem capitalização forçada (02/10/2026, MASTER §5.119): os 130 rótulos já estão em forma de frase em
   pt-BR; o `capitalize` do template (.nav-link e `.text-capitalize`, este com !important) fazia "Configuração De Login",
   "Modelo De E-Mail". Desde 05/10/2026 vale nos DOIS menus (`.navbar-vertical-content`): o da loja mostrava "Pedidos
   Comuns", "Lista De Anúncios". ---- */
.navbar-vertical-content .nav-link,
.navbar-vertical-content .nav-link .text-truncate,
.navbar-vertical-content .nav-link .text-capitalize { text-transform: none !important; }

/* ---- Configuração de login: o interruptor com alvo de toque de 44 px sem mudar o desenho (MASTER §5.119) ---- */
.ik-entrada .toggle-switch { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: flex-end; }

/* ---- Comprovante do pedido (admin, 02/10/2026, MASTER §5.120): formulário e prévia lado a lado; a prévia imita o papel de
   80 mm do comprovante real (logo em contain 3:1, linhas tracejadas) com texto de 12 px — o template usava 10 px. ---- */
.ik-comprovante__grade { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
.ik-comprovante__previa-cartao { position: sticky; top: 5rem; }
.ik-comprovante__papel {
    background: var(--ik-surface);
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    padding: 1rem;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--ik-text);
    overflow-wrap: anywhere;
}
.ik-comprovante__logo { display: block; width: 100%; max-width: 15rem; height: 4.375rem; object-fit: contain; margin: 0 auto .5rem; }
.ik-comprovante__linha { display: flex; justify-content: space-between; gap: .5rem; }
.ik-comprovante__linha span:last-child { text-align: right; white-space: nowrap; }
.ik-comprovante__linha--cabecalho { margin-top: .5rem; color: var(--ik-text-muted); }
.ik-comprovante__linha--total { font-weight: 700; font-size: .875rem; margin-top: .25rem; }
.ik-comprovante__caixa { border: 1px dashed var(--ik-border-strong); border-radius: var(--ik-radius); padding: .5rem; margin: .5rem 0; }
.ik-comprovante__corte { border: 0; border-top: 1px dashed var(--ik-border-strong); margin: .5rem 0; }
.ik-comprovante__loja { font-size: .9375rem; }
.ik-comprovante__titulo { font-size: .6875rem; letter-spacing: .02em; margin-bottom: .25rem; }
@media (max-width: 1199.98px) {
    .ik-comprovante__grade { grid-template-columns: minmax(0, 1fr); }
    .ik-comprovante__previa-cartao { position: static; max-width: 24rem; }
}

/* ---- Comprovante no PDV (admin e loja, 02/10/2026, MASTER §5.120): o PDF térmico dentro do modal ---- */
.ik-pdv-comprovante__pdf { display: block; width: 100%; height: 60vh; border: 1px solid var(--ik-border); border-radius: var(--ik-radius); background: var(--ik-surface); }

/* ---- Páginas de texto do admin (termos, políticas, sobre nós — 02/10/2026, MASTER §5.122): editor Quill 2 local ---- */
.ik-pagleg__editor { border-radius: 0 0 var(--ik-radius) var(--ik-radius); background: var(--ik-surface); }
.ik-pagleg .ql-toolbar.ql-snow { border-color: var(--ik-border); border-radius: var(--ik-radius) var(--ik-radius) 0 0; background: var(--ik-bg); }
.ik-pagleg .ql-container.ql-snow { border-color: var(--ik-border); font-family: inherit; font-size: .9375rem; }
.ik-pagleg .ql-editor { min-height: 22rem; line-height: 1.6; color: var(--ik-text); }
.ik-pagleg .ql-editor.ql-blank::before { color: var(--ik-text-subtle); font-style: normal; }
.ik-pagleg .ql-toolbar button:focus-visible, .ik-pagleg .ql-toolbar .ql-picker-label:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }
.ik-pagleg .ql-container:focus-within { border-color: var(--ik-border-strong); }

/* iKero 03/10/2026 — ponto de ajuda "Como exigir uma versão nova" (Configurações de app, MASTER §5.136): o <details> do
   §5.25.1 com o ícone de informação na frente do resumo. */
.ik-apps__ajuda summary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
}

.ik-apps__ajuda summary:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.ik-apps__ajuda ol li + li {
    margin-top: 0.25rem;
}

/* iKero 03/10/2026 (MASTER §5.140): Limpar banco de dados — nome técnico da tabela inteiro, em fonte de código, que
   quebra em vez de ser cortado (o template cortava em 20 caracteres). */
.ik-limpeza__tabelas {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.25rem 1rem;
}

.ik-limpeza__tabelas li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.ik-limpeza__tabelas code {
    overflow-wrap: anywhere;
    color: var(--ik-text);
}

.ik-limpeza__senha {
    max-width: 22rem;
}

/* iKero 03/10/2026 — amostra de cor da tela "Cor do site" (MASTER §5.153). Borda forte para a amostra não sumir num fundo claro. */
.ik-cor__amostra {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: var(--ik-radius);
    border: 1px solid var(--ik-border-strong);
}

/* iKero 03/10/2026 — prévia do resultado no buscador, tela "SEO do site" (MASTER §5.154). */
.ik-seo-previa {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-width: 40rem;
    padding: 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background: var(--ik-surface);
}
.ik-seo-previa__endereco {
    font-size: 0.8125rem;
    color: var(--ik-text-menu);
    overflow-wrap: anywhere;
}
.ik-seo-previa__titulo {
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--ik-previa-busca-titulo);
    overflow-wrap: anywhere;
}
.ik-seo-previa__descricao {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ik-text-menu);
    overflow-wrap: anywhere;
}

/* iKero 03/10/2026 — Configuração do negócio (MASTER §5.155): a nota da página abre também pelo teclado (style.css só abria
   no hover ou com .active), e a prévia do logo não corta a arte larga (o 3:1 do uploader recortava "ikero"). */
.blinkings:focus-within .business-notes,
.blinkings:focus .business-notes {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.blinkings:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
    border-radius: 50%;
}
.ik-negocio .upload-file-img {
    object-fit: contain;
}
.ik-negocio .ik-modelo-negocio {
    border-top: 1px solid var(--ik-border);
    padding-top: 0.75rem;
}

/* iKero 03/10/2026 — Configuração do negócio, rodada 2 (MASTER §5.155): avisos sobre os valores atuais (aviso âmbar,
   6,81:1), prévia do efeito em dinheiro e amostras do logo nos dois fundos do site. */
.ik-campo__aviso,
.ik-negocio__aviso {
    color: var(--ik-aviso-texto);
    background: var(--ik-aviso-fundo);
    border-radius: var(--ik-radius);
    font-size: 0.8125rem;
    line-height: 1.4;
}
.ik-campo__aviso { padding: 0.375rem 0.625rem; }
.ik-negocio__aviso { padding: 0.625rem 0.875rem; }
.ik-negocio__previa {
    background: var(--ik-surface-2);
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--ik-text);
}
.ik-negocio__previa-titulo { font-weight: 600; }
.ik-negocio__previa ul { padding-left: 1.1rem; }
.ik-negocio__previa strong { font-variant-numeric: tabular-nums; }
.ik-negocio__amostras {
    display: flex;
    gap: 0.5rem;
}
.ik-negocio__amostra {
    flex: 1 1 0;
    min-width: 0;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: var(--ik-radius);
    border: 1px solid var(--ik-border);
}
.ik-negocio__amostra img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ik-negocio__amostra--claro { background: var(--ik-surface); }
.ik-negocio__amostra--marca { background: var(--ik-accent-fill); } /* o rodapé do site (ikero-site.css: #d13605) */

/* iKero 03/10/2026 — Configuração do negócio, rodada 3 (MASTER §5.155): caixa de frase. Os textos pt-BR já vêm assim
   ("Nome da empresa"); quem forçava "Nome Da Empresa" era o capitalize do template em .input-label, .btn e .form-check-label.
   Escopado nesta tela e nos modais dela (no painel inteiro afetaria textos ainda em caixa baixa noutras telas). */
.ik-negocio .input-label,
.ik-negocio .btn,
.ik-negocio .form-check-label,
.ik-negocio .text-capitalize,
.ik-negocio h4,
.ik-negocio h5,
#maintenance-mode-modal .form-check-label,
#maintenance-mode-modal .btn,
#maintenance-mode-modal .text-capitalize,
#currency-warning-modal .btn {
    text-transform: none !important;
}
.ik-negocio__manutencao {
    font-size: 0.8125rem;
    color: var(--ik-text-menu);
}

/* iKero 03/10/2026 — modal do modo de manutenção (MASTER §5.155): a casca do "Atribuir entregador" (§5.63: fechar, disco,
   título) numa largura menor, uma coluna em três passos e opções em cartões clicáveis (o rótulo inteiro é a área de toque). */
:root {
    --ik-icone-ferramenta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'/%3E%3C/svg%3E");
}
.ik-icone--ferramenta {
    -webkit-mask-image: var(--ik-icone-ferramenta);
    mask-image: var(--ik-icone-ferramenta);
}
.ik-manut.modal-dialog {
    max-width: 46rem;   /* 736px */
}
.ik-manut .ik-atribuir__disco {
    width: 3.5rem;
    height: 3.5rem;
}
.ik-manut .ik-atribuir__disco > .ik-icone {
    width: 1.5rem;
    height: 1.5rem;
}
.ik-manut .ik-atribuir__titulo {
    font-size: 1.25rem;
}
.ik-manut__corpo {
    display: flex;
    flex-direction: column;
}
.ik-manut__secao {
    min-width: 0;
    margin: 0;
    padding: 1.25rem 0;
    border: 0;
    border-top: 1px solid var(--ik-border);
}
.ik-manut__secao:first-child {
    padding-top: 0;
    border-top: 0;
}
.ik-manut__secao-titulo {
    float: left;          /* fora da borda do fieldset (sem isso a linha do separador corta o título) */
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    margin: 0 0 0.25rem;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}
.ik-manut__passo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--ik-surface-2);
    color: var(--ik-text);
    font-size: 0.8125rem;
    font-weight: 700;
}
.ik-manut__opcional {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}
.ik-manut__ajuda {
    clear: both;
    margin: 0 0 0.875rem 2rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}
.ik-manut__grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 0.5rem;
}
.ik-manut__grade--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ik-manut__opcao {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;   /* 44px de toque */
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.875rem;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color var(--ik-transicao), background-color var(--ik-transicao);
}
.ik-manut__opcao:hover {
    border-color: var(--ik-border-strong);
}
.ik-manut__opcao:has(input:checked) {
    border-color: var(--ik-border-strong);
    background: var(--ik-surface-2);
    font-weight: 600;
}
.ik-manut__opcao:focus-within {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}
.ik-manut__opcao input {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--ik-accent-fill);
    cursor: pointer;
}
.ik-manut__opcao--todos {
    margin-bottom: 0.5rem;
}
.ik-manut__datas {
    margin-top: 1rem;
}
.ik-manut__secao .form-group:last-of-type {
    margin-bottom: 1rem;
}
.ik-manut__rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ik-border);
}
@media (max-width: 575.98px) {
    .ik-manut .modal-content {
        padding: 1.25rem;
    }
    .ik-manut__grade--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ik-manut__ajuda {
        margin-left: 0;
    }
    .ik-manut__rodape .btn {
        flex: 1 1 auto;
    }
}

/* iKero 03/10/2026 — Configuração de pagamento (MASTER §5.156): link de texto no laranja de texto (--ik-accent-fill, 4,95:1
   no branco; o link do template saía em #fa5420, 3,06:1) e a legenda do bloco fora da borda do fieldset (sem o float, a
   linha da borda corta o título). */
.ik-pagamento form a:not(.btn) {
    color: var(--ik-accent-fill);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ik-pagamento form a:not(.btn):hover {
    color: var(--ik-accent-hover);
}
.ik-pagamento fieldset.ik-zona-config__bloco > legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0.25rem;
}
.ik-pagamento fieldset.ik-zona-config__bloco > legend + * {
    clear: both;
}

/* iKero 03/10/2026 — Configurações de pedido, rodada 2 (MASTER §5.159): a linha-título de cada tipo na tabela de motivos de
   cancelamento, em superfície neutra para separar os grupos (sem laranja — é organização, não status). */
#ik-mcan-tabela tr.ik-mcan__grupo > th {
    background: var(--ik-surface-2);
    color: var(--ik-text);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* iKero 04/10/2026, redesenhado em 10/10/2026 (MASTER §5.169): os modais da senha no login (admin e loja) — ilustração,
   título, texto, e-mail com ícone, verificação humana na largura do campo e "Enviar link". O CSS da tela capitaliza rótulo
   e botão ("E-Mail Da Conta"); frases ficam como escritas (armadilha do capitalize, §8). */
.ik-senha .ik-senha__dialogo {
    max-width: 40rem;
}
.ik-senha .ik-senha__cartao {
    position: relative;
    border: 0;
    border-radius: 1.5rem;
    background: var(--ik-surface);
    box-shadow: 0 30px 70px -24px rgba(24, 24, 27, 0.45);
    padding: 2.75rem 4.5rem 3rem;
    text-align: center;
}
.ik-senha__fechar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ik-text-muted);
    cursor: pointer;
}
.ik-senha__fechar:hover {
    background: var(--ik-surface-2);
    color: var(--ik-text);
}
.ik-senha__fechar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}
.ik-senha__fechar-icone {
    width: 1.5rem;
    height: 1.5rem;
    background: currentColor;
    -webkit-mask: var(--ik-icone-x) center / contain no-repeat;
    mask: var(--ik-icone-x) center / contain no-repeat;
}
.ik-senha__ilustracao {
    display: block;
    width: 100%;
    max-width: 17.5rem;
    height: auto;
    margin: 0 auto 1.25rem;
}
.ik-senha__titulo {
    margin: 0 0 0.75rem;
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ik-text);
    text-transform: none;
}
.ik-senha__texto {
    margin: 0 auto 1.75rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ik-text-muted);
}
.ik-pedido-senha {
    text-align: left;
}
.ik-pedido-senha__rotulo {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ik-text);
    text-transform: none;
}
.ik-pedido-senha__campo {
    position: relative;
}
.ik-pedido-senha__icone {
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 1.375rem;
    height: 1.375rem;
    transform: translateY(-50%);
    background: var(--ik-text-muted);
    -webkit-mask: var(--ik-icone-email) center / contain no-repeat;
    mask: var(--ik-icone-email) center / contain no-repeat;
    pointer-events: none;
}
.ik-pedido-senha .form-control {
    height: 3.25rem;
    border: 1px solid var(--ik-border-strong);
    border-radius: var(--ik-radius);
    background: var(--ik-surface);
    font-size: 1rem;
    color: var(--ik-text);
    box-shadow: none;
}
.ik-pedido-senha__campo .form-control {
    padding-left: 3.25rem;
}
/* o style.css do template pinta todo placeholder de #99a7ba com !important (2,4:1); só outro !important vence */
.ik-pedido-senha input.form-control::placeholder {
    color: var(--ik-text-muted) !important;
    opacity: 1;
}
.ik-pedido-senha .form-control:focus {
    border-color: var(--ik-accent);
    outline: 2px solid var(--ik-accent);
    outline-offset: 1px;
}
/* o Turnstile roda em iframe: `data-size="flexible"` o estica na largura do campo; aqui só reservamos a altura (65 px) */
.ik-pedido-senha__verificacao {
    margin-top: 1.25rem;
    min-height: 65px;
}
.ik-pedido-senha__captcha {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}
.ik-pedido-senha__captcha img {
    width: 45%;
    border-radius: var(--ik-radius);
    object-fit: cover;
}
.ik-pedido-senha__campo + .ik-pedido-senha__rotulo {
    margin-top: 1.25rem;
}
.ik-senha .ik-senha__enviar {
    display: block;
    width: 100%;
    max-width: none;
    height: 3.25rem;
    margin-top: 1.5rem;
    border: 0;
    border-radius: var(--ik-radius);
    background: var(--ik-accent-fill);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: none;
    box-shadow: 0 8px 18px -10px rgba(209, 54, 5, 0.6);
}
.ik-senha .ik-senha__enviar:hover {
    background: var(--ik-accent-hover);
    color: #fff;
}
.ik-senha .ik-senha__enviar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}
/* a tela de redefinir a senha (10/10/2026): o mesmo cartão, agora como página sobre o fundo de marca */
.ik-senha--pagina .ik-senha__cartao {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 40rem;
}
.ik-pedido-senha__icone--cadeado {
    -webkit-mask-image: var(--ik-icone-cadeado);
    mask-image: var(--ik-icone-cadeado);
}
.ik-pedido-senha__campo--senha .form-control {
    padding-right: 3.25rem;
}
.ik-pedido-senha__mostrar {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    width: 2.5rem;
    height: 2.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ik-radius);
    background: transparent;
    color: var(--ik-text-muted);
    cursor: pointer;
}
.ik-pedido-senha__mostrar:hover {
    background: var(--ik-surface-2);
    color: var(--ik-text);
}
.ik-pedido-senha__mostrar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 1px;
}
.ik-pedido-senha__mostrar > span {
    width: 1.375rem;
    height: 1.375rem;
    background: currentColor;
    -webkit-mask: var(--ik-icone-olho) center / contain no-repeat;
    mask: var(--ik-icone-olho) center / contain no-repeat;
}
.ik-pedido-senha__mostrar[aria-pressed="true"] > span {
    -webkit-mask-image: var(--ik-icone-olho-fechado);
    mask-image: var(--ik-icone-olho-fechado);
}
.ik-pedido-senha__ajuda {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ik-text-muted);
}
.ik-pedido-senha__ajuda + .ik-pedido-senha__rotulo {
    margin-top: 1.25rem;
}
.ik-senha__voltar {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ik-radius);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ik-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ik-senha__voltar:hover {
    color: var(--ik-accent-fill);
}
.ik-senha__voltar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}
@media (max-width: 575.98px) {
    .ik-senha .ik-senha__cartao {
        padding: 2.25rem 1.25rem 1.5rem;
        border-radius: 1.25rem;
    }
    .ik-senha__ilustracao {
        max-width: 12rem;
    }
    .ik-senha__titulo {
        font-size: 1.5rem;
    }
    .ik-senha__texto {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }
}

/* iKero 04/10/2026 (MASTER §5.170): a prévia dos e-mails iKero editáveis (iframe com a view do envio) — altura de um e-mail. */
.ik-modelo__previa {
    min-height: 40rem;
}

/* ==========================================================================
   TROCA ENTRE PÁGINAS — admin e loja (05/10/2026, MASTER §8, item 26)
   O painel é multipágina (Blade): cada item do menu carrega uma página nova. O template cobria a tela com uma camada branca
   (`#pre--loader`) até o `load` + 0,6 s, o que dava o "flash"; ela saiu dos dois layouts. Aqui, a transição nativa entre
   páginas do mesmo site: um esmaecimento curto no lugar do corte seco (Chrome/Edge 126+, Safari 18.2+; nos outros nada muda).
   ========================================================================== */
@view-transition { navigation: auto; }
/* a página antiga fica PARADA e a nova surge por cima (05/10/2026): no esmaecimento cruzado padrão a antiga sumia enquanto a
   nova ainda não tinha pintado o conteúdo — sobrava ~0,1 s de branco em 1 a 4 de cada 10 cliques */
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
/* a animação PRÓPRIA da nova (só opacidade): a do navegador traz `-ua-mix-blend-mode-plus-lighter`, que vence o
   `mix-blend-mode: normal` e SOMA a nova à antiga parada — estourava para o branco (medido em 05/10/2026) */
::view-transition-new(root) { animation: ik-vt-entrar 0.15s ease both; mix-blend-mode: normal; }
@keyframes ik-vt-entrar { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* iKero 06/10/2026 — ficha da loja do admin, melhorias da Visão geral (MASTER §5.178).
   Abas: todas na mesma faixa, que rola de lado quando não cabe (o menu "Mais" saiu — decisão do proprietário). */
.ik-ficha-loja__abas { display: flex; align-items: flex-end; gap: 0.25rem; border-bottom: 1px solid var(--ik-border); margin-bottom: 1rem; }
.ik-ficha-loja__abas > .ik-solicitacoes__abas { flex: 1 1 auto; min-width: 0; border-bottom: 0; margin-bottom: 0; }
/* aberta agora: selo + horário de hoje, abaixo da situação */
.ik-ficha-loja__agora { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.375rem; }
/* números: título + período numa linha; grade 3 × 2 em tela larga, 2 colunas no celular */
.ik-ficha-loja__numeros-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.ik-ficha-loja__periodo { display: flex; gap: 0.25rem; }
.ik-ficha-loja__periodo .btn { min-height: 44px; display: inline-flex; align-items: center; }
.ik-ficha-loja__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .ik-ficha-loja__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* o mapa ocupa a altura do cartão (ficava na metade de cima, com espaço vazio embaixo) */
.ik-ficha-loja__mapa { display: flex; flex-direction: column; }
.ik-ficha-loja__mapa #map.single-page-map { flex: 1 1 auto; min-height: 220px; height: auto !important; } /* o template fixa 157px com !important */
/* o período atual: o `.active` do btn-outline-secondary do tema saía branco sobre claro (ilegível) — texto forte, fundo
   neutro e o sublinhado de acento das abas (marca, não status) */
.ik-ficha-loja__periodo .btn-outline-secondary.active,
.ik-ficha-loja__periodo .btn-outline-secondary:not(:disabled):not(.disabled).active,
.ik-ficha-loja__periodo .btn-outline-secondary:not(:disabled):not(.disabled).active:hover { background: var(--ik-surface-2); color: var(--ik-text); border-color: var(--ik-text-muted); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ik-accent-fill); }

/* iKero 06/10/2026 — o interruptor (`.toggle-switch`) sem foco visível: o input fica invisível (opacity 0, template) e o foco
   do teclado não aparecia em lugar nenhum. O anel vai no rótulo visível — no painel inteiro (MASTER §6, "nunca remover o
   anel de foco"). */
.toggle-switch-input:focus-visible + .toggle-switch-label { outline: 2px solid var(--ik-accent); outline-offset: 2px; }

/* ==========================================================================
   iKero 06/10/2026 (MASTER §5.179): relatório de ganhos da PLATAFORMA no admin — o molde do relatório de ganhos da loja
   (§5.41) com os rankings por loja e por zona ao lado do gráfico e o "Limpar filtros" junto do Aplicar.
   ========================================================================== */
.ik-ganhos-plataforma__rankings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.ik-ganhos-plataforma__acoes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.ik-ganhos-plataforma__acoes .ik-lojas__limpar {
    align-self: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.ik-ganhos-plataforma__nome {
    color: var(--ik-text);
    font-weight: 500;
}

a.ik-ganhos-plataforma__nome {
    text-decoration: underline;
    text-decoration-color: var(--ik-border-strong);
    text-underline-offset: 2px;
}

a.ik-ganhos-plataforma__nome:hover {
    color: var(--ik-text);
    text-decoration-color: currentColor;
}

/* paginação do template: números em #9ca3af (2,30:1) e ativa com 3,31:1 — o par do PDV (§5.65): texto secundário 4,83:1,
   ativa em --ik-accent-soft + borda --ik-accent + texto --ik-accent-em-soft (4,92:1) */
/* o template pinta a paginação com !important (fundo laranja na ativa) — só outro !important vence, como em .conv-active */
.ik-ganhos-plataforma .page-link {
    color: var(--ik-text-muted) !important;
}

.ik-ganhos-plataforma .page-item.active .page-link {
    background-color: var(--ik-accent-soft) !important;
    border-color: var(--ik-accent) !important;
    color: var(--ik-accent-em-soft) !important;
}

/* 06/10/2026: o atalho da divisão ("Ver detalhes") — link de texto secundário sublinhado, 4,83:1 */
.ik-ganhos-plataforma__atalho {
    display: inline-block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--ik-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ik-ganhos-plataforma__atalho:hover {
    color: var(--ik-text);
}

/* 06/10/2026: no celular cada transação vira um cartão (o molde `td[data-rotulo]` dos cupons, §5.37) — sem rolar a tabela */
@media (max-width: 767.98px) {
    .ik-ganhos-plataforma .table-responsive {
        overflow-x: visible;
    }
    .ik-ganhos-plataforma__tabela thead {
        display: none;
    }
    .ik-ganhos-plataforma__tabela,
    .ik-ganhos-plataforma__tabela tbody,
    .ik-ganhos-plataforma__tabela tr {
        display: block;
        width: 100%;
    }
    .ik-ganhos-plataforma__tabela tr {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--ik-border);
    }
    .ik-ganhos-plataforma__tabela td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.375rem 0 !important;
        border: 0;
        text-align: right !important;
        white-space: normal;
    }
    .ik-ganhos-plataforma__tabela td::before {
        content: attr(data-rotulo);
        flex-shrink: 0;
        color: var(--ik-text-muted);
        font-size: 0.8125rem;
        text-align: left;
    }
}

/* no celular as abas das transações rolam DENTRO da faixa (a página não ganha rolagem lateral) e os alvos têm 44 px */
.ik-ganhos-plataforma .ik-relatorio-ganhos__abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    scrollbar-width: thin;
}

@media (max-width: 767.98px) {
    .ik-ganhos-plataforma .ik-relatorio-ganhos__aba,
    .ik-ganhos-plataforma .ik-relatorio__aplicar,
    .ik-ganhos-plataforma .ik-pedidos__busca .form-control,
    .ik-ganhos-plataforma .page-link {
        min-height: 44px;
    }
    .ik-ganhos-plataforma .ik-relatorio-ganhos__aba {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }
}

/* iKero 06/10/2026 (MASTER §5.180): o cabeçalho que ordena a lista das lojas — o texto do cabeçalho, sublinhado ao passar;
   a coluna ordenada leva a seta e o `aria-sort` */
.ik-ganhos-lojas__ordenar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
}

.ik-ganhos-lojas__ordenar:hover {
    color: var(--ik-text);
    text-decoration: underline;
}


/* ==========================================================================
   iKero 06/10/2026 (MASTER §5.4.1) — Despacho Inteligente, escopo `.ik-di`
   As sete telas do módulo (Visão geral, detalhe, Entregadores, ficha, Monitor,
   Desempenho, Configurações). Sem Title Case do template, selos que quebram
   linha (a página nunca rola na horizontal — a tabela rola dentro do cartão),
   links de tabela em texto (laranja é da marca, nunca da tabela), paginação
   no par AA e alvos de 44 px no celular.
   ========================================================================== */
.content.ik-di * {
    text-transform: none;
}

.ik-di .badge {
    white-space: normal;
    text-align: left;
}

/* o "secondary" do template não passa no AA; o neutro das irmãs (9,50:1) */
.ik-di .badge-soft-secondary {
    background-color: #f4f4f5 !important;
    color: #3f3f46 !important;
}

/* link de tabela: texto principal sublinhado (≥ 13:1), nunca o laranja do template */
.ik-di .ik-di__link,
.ik-di .card-table td > a:not(.btn),
.ik-di dd a:not(.btn) {
    color: var(--ik-text);
    text-decoration: underline;
    text-decoration-color: var(--ik-border-strong);
    text-underline-offset: 2px;
}

.ik-di .ik-di__link:hover,
.ik-di .ik-di__link:focus,
.ik-di .card-table td > a:not(.btn):hover,
.ik-di .card-table td > a:not(.btn):focus,
.ik-di dd a:not(.btn):hover,
.ik-di dd a:not(.btn):focus {
    color: var(--ik-text);
    text-decoration-color: currentColor;
}

.ik-di .ik-di__voltar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 0.25rem;
    color: var(--ik-text-muted);
}

.ik-di .ik-di__voltar:hover,
.ik-di .ik-di__voltar:focus {
    color: var(--ik-text);
    text-decoration: underline;
}

.ik-di .ik-di__atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.ik-di .ik-di__atalhos .ik-di__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* cartão de saúde: blocos que quebram linha, rótulo em cima, dado embaixo */
.ik-di__saude-grade {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 2rem;
}

.ik-di__saude-grade > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.ik-di__saude-rotulo {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ik-di__saude-dado {
    color: var(--ik-text-muted);
}

/* rodapé "Atualizado às" — o da lista de despacho (§5.15); falha em texto de erro */
.ik-di__rodape-falha {
    color: var(--ik-erro-texto);
}

/* paginação do template com !important — o mesmo par AA de `.ik-ganhos-plataforma` */
.ik-di .page-link {
    color: var(--ik-text-muted) !important;
}

.ik-di .page-item.active .page-link {
    background-color: var(--ik-accent-soft) !important;
    border-color: var(--ik-accent) !important;
    color: var(--ik-accent-em-soft) !important;
}

@media (max-width: 767.98px) {
    .ik-di .ik-relatorio-ganhos__aba,
    .ik-di .ik-relatorio__aplicar,
    .ik-di .ik-relatorio-ganhos__aba,
    .ik-di .btn,
    .ik-di .page-link,
    .ik-di .form-control,
    .ik-di .card-table td > a:not(.btn),
    .ik-di dd a:not(.btn),
    .ik-di .ik-di__vazio a {
        min-height: 44px;
    }

    .ik-di .btn,
    .ik-di .card-table td > a:not(.btn),
    .ik-di dd a:not(.btn),
    .ik-di .ik-di__vazio a {
        display: inline-flex;
        align-items: center;
    }
}

/* ==========================================================================
   iKero 06/10/2026 (MASTER §5.4.2) — Configurações do Despacho Inteligente
   Grupos com título e frase de efeito, campo com rótulo + selo "Alterado",
   ajuda ligada por aria-describedby, "Restaurar padrão" como link de texto
   (ação secundária, nunca outro primário) e a auditoria em cartões no celular.
   ========================================================================== */

/* o campo que a validação do navegador (ou uma âncora) leva ao topo não some atrás do cabeçalho fixo */
html {
    scroll-padding-top: 5.5rem;
}

.ik-cfgdi__grupo + .ik-cfgdi__grupo {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ik-border);
}

.ik-cfgdi__grupo-titulo {
    margin: 0 0 0.25rem;
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 600;
}

.ik-cfgdi__grupo-texto {
    margin: 0 0 1rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-cfgdi__campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem 1.5rem;
}

/* 06/10/2026: a escada ocupa a linha inteira — com `span 2` ela empurrava o vizinho e deixava buraco na grade */
.ik-cfgdi__campo--largo {
    grid-column: 1 / -1;
}

/* rótulo com altura de duas linhas e alinhado embaixo: o campo de cada coluna fica na mesma altura
   mesmo quando um rótulo quebra linha e o vizinho não */
.ik-cfgdi__rotulo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.25rem 0.5rem;
    min-height: 2.75rem;
    margin-bottom: 0.375rem;
}

.ik-cfgdi__campo--largo .ik-cfgdi__rotulo {
    min-height: 0;
}

.ik-cfgdi__campo--largo .form-control {
    max-width: 32rem;
}

.ik-cfgdi__rotulo label {
    margin: 0;
    color: var(--ik-text);
    font-weight: 500;
    font-size: 0.875rem;
}

.ik-cfgdi__campo .form-control {
    height: 44px;
}

.ik-cfgdi__ajuda {
    display: block;
    margin-top: 0.375rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-cfgdi__limites {
    display: block;
    margin-top: 0.125rem;
}

.ik-cfgdi__restaurar {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ik-cfgdi__restaurar:hover,
.ik-cfgdi__restaurar:focus {
    color: var(--ik-text);
}

.ik-cfgdi__erro-geral {
    border-color: var(--ik-erro-texto);
    background-color: var(--ik-erro-fundo);
    color: var(--ik-erro-texto);
}

.ik-cfgdi__rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.ik-cfgdi__tabela td {
    white-space: normal;
}

.ik-cfgdi__auditoria:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .ik-cfgdi__rotulo {
        min-height: 0;
    }
    .ik-cfgdi__restaurar {
        min-height: 44px;
    }
    .ik-cfgdi__rodape .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    .ik-cfgdi__auditoria {
        overflow-x: visible;
    }
    .ik-cfgdi__tabela thead {
        display: none;
    }
    .ik-cfgdi__tabela,
    .ik-cfgdi__tabela tbody,
    .ik-cfgdi__tabela tr {
        display: block;
        width: 100%;
    }
    .ik-cfgdi__tabela tr {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--ik-border);
    }
    .ik-cfgdi__tabela td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.375rem 0 !important;
        border: 0;
        text-align: right !important;
    }
    .ik-cfgdi__tabela td::before {
        content: attr(data-rotulo);
        flex-shrink: 0;
        color: var(--ik-text-muted);
        font-size: 0.8125rem;
        text-align: left;
    }
    .ik-cfgdi__tabela .ik-di__vazio td::before {
        content: none;
    }
}

/* 06/10/2026 (MASTER §5.4.2): resumo do efeito, mudanças na confirmação e auditoria com motivo */
.ik-cfgdi__resumo {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

.ik-cfgdi__resumo-lista,
.ik-cfgdi__mudancas {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--ik-text);
    font-size: 0.875rem;
}

.ik-cfgdi__resumo-lista li + li,
.ik-cfgdi__mudancas li + li {
    margin-top: 0.25rem;
}

.ik-cfgdi__depois {
    display: block;
    margin-top: 0.125rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ik-cfgdi__depois:hover,
.ik-cfgdi__depois:focus {
    color: var(--ik-text);
}

.ik-cfgdi__motivo {
    min-width: 12rem;
    color: var(--ik-text-muted);
}

@media (max-width: 767.98px) {
    .ik-cfgdi__depois {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ==========================================================================
   iKero 06/10/2026 (MASTER §5.4.3) — aba Desempenho do Despacho Inteligente
   Veredito no topo, estado vazio, "*" de amostra pequena (o selo repetido 69
   vezes virou um marcador com legenda), notas técnicas recolhíveis, tabelas
   ordenáveis com a primeira coluna fixa ao rolar e a loja de amostra pequena.
   ========================================================================== */
.ik-desemp__veredito p,
.ik-desemp__estado-vazio p {
    color: var(--ik-text);
}

.ik-desemp__pouco {
    margin-left: 0.125rem;
    color: var(--ik-aviso-texto);
    font-weight: 700;
    cursor: help;
}

.ik-desemp__legenda-amostra {
    margin: 0 0 1.5rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-desemp__legenda-amostra span {
    color: var(--ik-aviso-texto);
    font-weight: 700;
}

.ik-desemp__legenda-tabela {
    caption-side: top;
    padding: 0 0 0.5rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-desemp__nota {
    margin-top: 0.5rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-desemp__nota summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--ik-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ik-desemp__nota summary:hover,
.ik-desemp__nota summary:focus {
    color: var(--ik-text);
}

.ik-desemp__nota p {
    margin: 0.25rem 0 0;
}

.ik-desemp__vazio,
.ik-desemp__resumo-grafico {
    margin: 0;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

.ik-desemp__resumo-grafico {
    margin-top: 0.5rem;
}

.ik-desemp__vazio {
    padding: 2rem 0;
    text-align: center;
}

/* cabeçalho ordenável: o texto do cabeçalho vira botão, sublinhado ao passar */
.ik-desemp__ordenar {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    white-space: normal;
}

.ik-desemp__ordenar:hover {
    text-decoration: underline;
}

th[aria-sort="descending"] .ik-desemp__ordenar::after { content: "↓"; }
th[aria-sort="ascending"] .ik-desemp__ordenar::after { content: "↑"; }

/* ⛔ a caixa rolável é a referência do que tem posição absoluta dentro dela (o `sr-only` do "*"):
   sem isto o texto oculto de uma célula escapava da rolagem e alargava a PÁGINA no celular (1070 px) */
.ik-di .table-responsive {
    position: relative;
}

/* cabeçalhos curtos quebram linha em vez de alargar a tabela; a 1ª coluna fica fixa ao rolar */
.ik-desemp__tabela thead th {
    white-space: normal;
    min-width: 6rem;
    vertical-align: bottom;
}

.ik-desemp__tabela th:first-child,
.ik-desemp__tabela td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--ik-surface);
}

.ik-desemp__tabela thead th:first-child {
    background-color: var(--ik-surface-2);
}

.ik-desemp__pequena td {
    color: var(--ik-text-muted);
}

@media (max-width: 767.98px) {
    .ik-desemp__nota summary,
    .ik-desemp__ordenar {
        min-height: 44px;
    }
    .ik-desemp__ordenar {
        min-width: 44px;
    }
}

/* "Pular para o conteúdo": fora da tela até receber o foco do teclado */
.ik-pular-para-conteudo {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.75rem 1rem;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    box-shadow: var(--ik-shadow-md);
    transform: translateY(-200%);
}

.ik-pular-para-conteudo:focus {
    transform: none;
}

/* ==========================================================================
   iKero 07/10/2026 (MASTER §5.4.4) — Monitor do Despacho Inteligente
   Resumo no topo (neutro; "tudo certo" em verde de sucesso, nunca laranja), cartão com o
   contador fora do título, período em negrito na explicação (13 px), linha com o pedido e a
   auditoria como links de texto e "parado há" à direita.
   ========================================================================== */
.ik-mon__resumo {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 500;
}

.ik-mon__resumo--ok {
    border-color: #b7e4d0;
    background-color: #e7f6f0;
    color: var(--ik-sucesso-texto);
}

.ik-mon__cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ik-mon__explica {
    margin: 0 0 0.5rem;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-mon__explica strong {
    color: var(--ik-text);
    font-weight: 600;
}

.ik-mon__linha {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--ik-border);
}

.ik-mon__lado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 0.8125rem;
}

.ik-mon__dado {
    display: block;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-mon__acao {
    display: inline-block;
    font-size: 0.8125rem;
}

.ik-mon__mais {
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ik-border);
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}

.ik-mon__subtitulo {
    margin: 0.75rem 0 0.25rem;
    color: var(--ik-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.ik-di__vazio-texto {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
}

@media (max-width: 767.98px) {
    .ik-mon__linha .ik-di__link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ===== 07/10/2026 — Despacho Inteligente: Entregadores (lista e ficha, MASTER §5.4.5) ===== */
.ik-ent__caixa {
    position: relative;
}
/* a primeira coluna (o nome) fica parada quando a tabela rola de lado na tela média */
.ik-ent__tabela th:first-child,
.ik-ent__tabela td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--ik-surface);
}
.ik-ent__tabela td:first-child .ik-di__link {
    white-space: nowrap;
}
.ik-ent__rodape {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
}
.ik-ent__filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ik-border);
    border-radius: 0.5rem;
    background: var(--ik-surface);
    color: var(--ik-text);
}
.ik-ent__nivel {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ik-text);
}
.ik-ent__porque {
    margin: 0 0 0.75rem;
    padding-left: 1.125rem;
    color: var(--ik-text);
    font-size: 0.875rem;
}
.ik-ent__porque li + li {
    margin-top: 0.25rem;
}
.ik-ent__alerta {
    color: var(--ik-erro-texto);
    font-weight: 600;
}
.ik-ent__componente {
    margin-bottom: 1rem;
}
.ik-ent__componente-topo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.25rem;
}
.ik-ent__componente-nome {
    font-weight: 600;
    color: var(--ik-text);
}

@media (max-width: 767.98px) {
    .ik-ent__caixa {
        overflow-x: visible;
    }
    .ik-ent__tabela thead {
        display: none;
    }
    .ik-ent__tabela,
    .ik-ent__tabela tbody,
    .ik-ent__tabela tr {
        display: block;
        width: 100%;
    }
    .ik-ent__tabela tr {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--ik-border);
    }
    .ik-ent__tabela td,
    .ik-ent__tabela td:first-child {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.375rem 0 !important;
        border: 0;
        text-align: right !important;
        white-space: normal;
        background: transparent;
    }
    .ik-ent__tabela td::before {
        content: attr(data-rotulo);
        flex-shrink: 0;
        color: var(--ik-text-muted);
        font-size: 0.8125rem;
        text-align: left;
    }
    .ik-ent__tabela td[colspan] {
        display: block;
        text-align: center !important;
    }
    .ik-ent__tabela td[colspan]::before {
        content: none;
    }
    .ik-ent__tabela .ik-di__link,
    .ik-ent__filtro .ik-di__link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===== 07/10/2026 — Assinantes Pro do admin (MASTER §5.182): a lista é a da lista de clientes (§5.95); aqui só a receita ===== */
.ik-pro-assinantes__totais {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
}
.ik-pro-assinantes__planos th {
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}
.ik-pro-assinantes__planos td,
.ik-pro-assinantes__planos th {
    padding-left: 0;
}
/* no celular os links da lista (limpar, nome do cliente, exportar) têm 44 px de alvo */
@media (max-width: 767.98px) {
    .ik-pro-assinantes .ik-lojas__limpar,
    .ik-pro-assinantes .ik-lojas__loja,
    .ik-pro-assinantes .ik-pedidos__exportar,
    .ik-pro-assinantes .ik-pedidos__vazio .btn,
    /* 07/10/2026 — Inscritos da newsletter (MASTER §5.186): o mesmo para o aviso, o exportar e o limpar */
    .ik-inscritos .ik-pedidos__aviso .btn,
    .ik-inscritos .ik-pedidos__exportar,
    .ik-inscritos .ik-lojas__limpar,
    .ik-inscritos .ik-pedidos__vazio .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* 07/10/2026 — Transações do Pro (MASTER §5.183): os dois totais com a nota logo abaixo */
.ik-pro-transacoes__kpis {
    margin-bottom: 0.5rem;
}

/* 07/10/2026 — Configuração adicional do Pro (MASTER §5.184): busca na barra da lista e a linha em edição */
.ik-pro-faq__busca {
    flex: 1 1 260px;
    max-width: 360px;
}
.ik-pro-faq__resposta {
    white-space: normal;
    max-width: 640px;
}
.ik-pedidos__tabela tr.ik-pro-faq__editando td {
    background: var(--ik-surface-2);
}
@media (max-width: 767.98px) {
    .ik-pro-faq__busca {
        max-width: none;
        width: 100%;
    }
}
/* o link da nota (ex.: "Cadastrar os termos"): o tom do link do painel com AA sobre a nota (#d13605/#fafafa) e alvo de 44 px no
   celular; campos e botões da Configuração adicional também com 44 px */
.ik-pro-assinantes [role=note] a {
    color: var(--ik-accent-fill);
    text-decoration: underline;
}
@media (max-width: 767.98px) {
    .ik-pro-assinantes [role=note] a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .ik-pro-assinantes #ik-faq-form .form-control,
    .ik-pro-assinantes #ik-pagleg-form > .card .form-control:not(textarea),
    .ik-pro-assinantes #ik-faq-form .btn,
    .ik-pro-assinantes #ik-pagleg-form .btn--primary {
        min-height: 44px;
    }
}

/* 07/10/2026 — Planos do Pro (MASTER §5.165): 44 px no celular nas ações dos cartões, no interruptor e na folha */
@media (max-width: 767.98px) {
    .ik-plano__acao,
    #ik-plano-painel .ik-filtro__atalho,
    #ik-plano-painel .form-control,
    #ik-plano-painel .ik-filtro__acoes .btn {
        min-height: 44px;
    }
    .ik-plano__acao {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .ik-plano__interruptor {
        padding: 10px 6px;
        margin: -10px -6px !important;
    }
}

/* iKero 07/10/2026 — rádio e caixa do Bootstrap (`custom-control`) sem foco visível: o input fica escondido e o anel caía nele
   (a mesma falha do interruptor corrigida em 06/10). O anel vai no círculo/quadrado visível — no painel inteiro (MASTER §6). */
.custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

/* 07/10/2026 — Benefício do Pro (MASTER §5.164): o cartão da opção é clicável; 44 px no celular */
.ik-pro__opcao {
    cursor: pointer;
}
.ik-pro__campos {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
@media (max-width: 767.98px) {
    .ik-pro__campos .custom-control-label {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* o círculo e o ponto do rádio acompanham o texto centralizado (no Bootstrap ficam a .25rem do topo) */
    .ik-pro__campos .custom-control-label::before,
    .ik-pro__campos .custom-control-label::after {
        top: 50%;
        transform: translateY(-50%);
    }
    .ik-pro__salvar,
    .ik-pro__campos .form-control {
        min-height: 44px;
    }
}

/* 07/10/2026 — aba "Assinatura Pro" da ficha do cliente (MASTER §5.98.9): ações e rádios com 44 px no celular */
@media (max-width: 767.98px) {
    .ik-pro-ficha__acao,
    .ik-pro-ficha .form-control {
        min-height: 44px;
    }
    .ik-pro-ficha .ik-pro__opcao .custom-control-label {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .ik-pro-ficha .ik-pro__opcao .custom-control-label::before,
    .ik-pro-ficha .ik-pro__opcao .custom-control-label::after {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* iKero 07/10/2026 (MASTER §5.185): link dentro do texto de ajuda/nota no tom de preenchimento — o laranja da marca (#fa5420) mede
   3,2:1 sobre o branco e o cinza do cartão e reprova como texto (4,5:1); `--ik-accent-fill` mede ~4,7:1 */
.ik-zonas__ajuda a:not(.btn),
.ik-zona-config__bloco a:not(.btn) {
    color: var(--ik-accent-fill);
    text-decoration: underline;
}

/* iKero 07/10/2026 (MASTER §5.185): abas dos modelos de e-mail — o componente de abas do painel sobre o fundo da página
   (#f7f7f8): o texto inativo vai no --ik-text-menu (7:1; o --ik-text-muted dá 4,4 ali) */
.ik-email-abas { margin-bottom: 1.5rem; }
.ik-email-abas .ik-solicitacoes__aba { color: var(--ik-text-menu); }
.ik-email-abas .ik-solicitacoes__aba:hover,
.ik-email-abas .ik-solicitacoes__aba--atual { color: var(--ik-text); }
.ik-email-abas .ik-solicitacoes__aba--atual { font-weight: 600; }

/* iKero 07/10/2026 (MASTER §5.185): as abas `nav--pills` do template em TODO o painel no desenho do componente de abas
   (§5.98.7) — a pílula inativa media 4,29:1 e a atual era branco sobre o laranja da marca (3,31:1, laranja como revestimento
   de controle). Texto --ik-text-menu (7:1 no fundo da página), a atual em --ik-text sublinhada no --ik-accent-fill, 44 px. */
.nav--tabs.nav--pills { border-bottom: 1px solid var(--ik-border) !important; gap: 0.25rem; }
.nav--tabs.nav--pills .nav-item .nav-link,
.tabs-slide-wrap .nav--tabs.nav--pills .nav-item .nav-link,
.tabs-slide-language .nav--tabs.nav--pills .nav-item .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
    margin-bottom: -1px;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    color: var(--ik-text-menu);
    font-weight: 500;
}
.nav--tabs.nav--pills .nav-item .nav-link:hover { color: var(--ik-text); }
.nav--tabs.nav--pills .nav-item .nav-link.active,
.tabs-slide-wrap .nav--tabs.nav--pills .nav-item .nav-link.active,
.tabs-slide-language .nav--tabs.nav--pills .nav-item .nav-link.active {
    background: transparent !important;
    color: var(--ik-text) !important;
    border-bottom-color: var(--ik-accent-fill) !important;
    font-weight: 600;
}
.nav--tabs.nav--pills .nav-item .nav-link:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: -2px; }

/* iKero 07/10/2026 (MASTER §5.185): telas de modelo de e-mail do template — o título do interruptor em laranja (3,31:1) vira
   texto; o gatilho "Leia as instruções" (laranja #ff7a00, 2,55:1) no tom de preenchimento, com foco visível */
.maintainance-mode-toggle-bar h5.text--primary { color: var(--ik-text) !important; }
.text--primary-2[data-target="#instructions"] { color: var(--ik-accent-fill); cursor: pointer; min-height: 44px; }
.text--primary-2[data-target="#instructions"] .tio-info { color: var(--ik-accent-fill) !important; }
.text--primary-2[data-target="#instructions"]:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; border-radius: 4px; }

/* iKero 07/10/2026 (MASTER §5.185): os últimos laranjas como texto achados na homologação — link dentro da nota neutra
   (Canais e Mensagens de notificação: #fa5420 a 3,17:1), o ícone "Observação" do template (#ff7a00, 2,55:1 — componente pede 3:1)
   e o título da caixa de observação */
.ik-cupons__quem-paga--nota a:not(.btn) { color: var(--ik-accent-fill); text-decoration: underline; }
.blinkings { color: var(--ik-accent-fill); }
.blinkings .business-notes h6 { color: var(--ik-text); }

/* ── 07/10/2026 (MASTER §5.185, achados do scripts/homologacao/contraste-do-painel.sh) ─────────────────────────────────────────
   1. paginação do template em todo o painel: números a 2,30:1 e a atual branca no laranja da marca (3,31:1). O par do PDV/Ganhos
      (§5.65): números em --ik-text-muted, a atual em --ik-accent-soft + borda --ik-accent + texto --ik-accent-em-soft (4,92:1).
      O template pinta com !important — só outro !important vence. */
.content .page-link {
    color: var(--ik-text-muted) !important;
}

.content .page-item.active .page-link {
    background-color: var(--ik-accent-soft) !important;
    border-color: var(--ik-accent) !important;
    color: var(--ik-accent-em-soft) !important;
}

/* 2. contador de caracteres do template (`.text-body-light`, #a7a7a7 a 2,41:1) em texto secundário (4,83:1) */
.text-body-light {
    color: var(--ik-text-muted) !important;
}

/* 3. o "×" dos painéis laterais do template: branco sobre cinza (2,41:1) → texto principal sobre a superfície, com borda */
.offcanvas-close.bg--secondary {
    background-color: var(--ik-surface) !important;
    border-color: var(--ik-border) !important;
    color: var(--ik-text) !important;
}

/* 4. link no subtítulo das telas (ex.: "Ver solicitações" das Lojas, #fa5420 a 3,09:1): o tom de texto do acento, sublinhado */
.ik-zonas__subtitulo a {
    color: var(--ik-accent-fill);
    text-decoration: underline;
}

/* ── 07/10/2026: Recargas da carteira (admin, `admin-views/customer/wallet/recargas`) — achados do medidor de contraste ─────────────
   o título do cartão em --ik-text (o cinza do template media 2,94:1) e os links da tabela no tom de texto do acento, sublinhados (o
   laranja da marca media 3,31:1); no celular os links ganham 44 px de alvo. */
.ik-recargas .card-title {
    color: var(--ik-text);
}

/* as duas telas da carteira (relatório e recargas) — o nome do cliente no relatório também estava a 3,31:1 */
.ik-carteira-rel td a {
    color: var(--ik-accent-fill);
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .ik-carteira-rel td a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

.ik-recargas .btn {
    min-height: 44px;
}

/* Entrada em duas etapas do Master (07/10/2026, refeita pela referência de 10/10/2026 — MASTER §5.187): cartão branco sobre
   o fundo de marca, título e texto alinhados à esquerda, o código em uma caixa por dígito, "Confiar" e ENTRAR em pílula (o botão
   da tela de login, §5.10) e as duas ações de texto no tom de link do painel, com 44 px de alvo. */
.ik-2fa__cartao {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 46rem;
    padding: 4.5rem 6.25rem 4rem;
    border-radius: 1.5rem;
    background: var(--ik-surface);
    box-shadow: 0 30px 70px -24px rgba(24, 24, 27, 0.45);
}
.ik-2fa__titulo {
    margin: 0 0 1rem;
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ik-text);
}
.ik-2fa__texto {
    margin: 0 0 2rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ik-text-muted);
}
.ik-2fa__texto strong {
    color: var(--ik-text-menu);
    font-weight: 700;
}
.ik-2fa__codigo {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.ik-2fa__rotulo {
    margin-bottom: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--ik-text-menu);
}
.ik-2fa__caixas {
    display: grid;
    grid-template-columns: repeat(var(--ik-2fa-digitos, 6), minmax(0, 1fr));
    gap: 0.75rem;
}
.ik-2fa__caixa {
    width: 100%;
    aspect-ratio: 1;
    max-height: 4.25rem;
    padding: 0;
    border: 1px solid var(--ik-border-strong);
    border-radius: 0.75rem;
    background: var(--ik-surface);
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--ik-text);
    caret-color: var(--ik-accent);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ik-2fa__caixa:focus {
    outline: none;
    border-color: var(--ik-accent);
    box-shadow: 0 0 0 4px var(--ik-accent-soft-2);
}
.ik-2fa__caixa:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 1px;
}
.ik-2fa__caixa[aria-invalid="true"] {
    border-color: var(--ik-erro-texto);
}
.ik-2fa__codigo .ik-campo__erro {
    margin-top: 0.5rem;
}
.ik-2fa__confiar {
    margin: 1.75rem 0 2rem;
}
.ik-2fa__confiar {
    padding-left: 2.25rem;
}
.ik-2fa__confiar .custom-control-label {
    font-size: 1.0625rem;
    line-height: 1.5rem;
    color: var(--ik-text-menu);
}
/* a caixa de marcar do tamanho da referência (24 px, raio 6), na mesma linha do texto */
.ik-2fa__confiar .custom-control-label::before,
.ik-2fa__confiar .custom-control-label::after {
    top: 0;
    left: -2.25rem;
    width: 1.5rem;
    height: 1.5rem;
}
.ik-2fa__confiar .custom-control-label::before {
    border: 1.5px solid var(--ik-border-strong);
    border-radius: 6px;
}
.ik-2fa__confiar .custom-control-label::after {
    background-size: 60% 60%;
}
.ik-2fa .ik-2fa__entrar {
    display: block;
    width: 100%;
    min-height: 3.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--ik-accent-fill);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 10px 22px -12px rgba(209, 54, 5, 0.6);
}
.ik-2fa .ik-2fa__entrar:hover {
    background: var(--ik-accent-hover);
    color: #fff;
}
.ik-2fa .ik-2fa__entrar:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}
/* 18/10/2026 (MASTER §5.187): "Não recebeu o código? Reenviar" centralizado sob o ENTRAR; rodapé com linha fina,
   "Voltar à entrada" à esquerda e "Usar um código de recuperação" à direita; links sem sublinhado (aparece no hover/foco) */
.ik-2fa__reenviar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 0.375rem;
    margin: 1.25rem 0 0;
    font-size: 1rem;
    color: var(--ik-text-muted);
}
.ik-2fa__rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0 1rem;
    margin-top: 1.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ik-border);
}
.ik-2fa__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ik-accent-fill);
    text-decoration: none;
    text-underline-offset: 3px;
    cursor: pointer;
}
.ik-2fa__link:hover,
.ik-2fa__link:focus-visible {
    color: var(--ik-accent-hover);
    text-decoration: underline;
}
.ik-2fa__link:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
/* 17/10/2026 (varredura A+B F1, MASTER §5.187): o aviso do e-mail que não saiu e "Usar um código de recuperação" */
.ik-2fa__aviso {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: var(--ik-aviso-fundo);
    color: var(--ik-aviso-texto);
    font-size: 1rem;
    line-height: 1.5;
}
.ik-2fa__recuperacao-form {
    margin-top: 1rem;
}
.ik-2fa__recuperacao-form .form-control {
    max-width: 20rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ik-2fa__dica {
    margin: 0.375rem 0 0.75rem;
    font-size: 0.875rem;
    color: var(--ik-text-muted);
}
.ik-2fa__recuperacao-form .ik-campo__erro {
    margin: 0 0 0.75rem;
}

@media (max-width: 575.98px) {
    .ik-2fa__cartao {
        padding: 2.5rem 1.25rem 1.75rem;
        border-radius: 1.25rem;
    }
    .ik-2fa__titulo {
        font-size: 1.625rem;
    }
    .ik-2fa__caixas {
        gap: 0.5rem;
    }
    .ik-2fa__caixa {
        font-size: 1.5rem;
    }
}

/* 17/10/2026 (varredura A+B F1, MASTER §5.54): os códigos de recuperação recém-gerados do Master, em duas colunas de monoespaço */
.ik-perfil__codigos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 0.5rem 2rem;
    margin: 0.75rem 0 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ik-border-strong);
    border-radius: 0.75rem;
    list-style: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--ik-text);
}
@media (max-width: 575.98px) {
    .ik-perfil__codigos {
        grid-template-columns: 1fr;
    }
}

/* o cartão "Confirme o novo e-mail" e "Outros dispositivos" do Meu perfil (§5.54) */
.ik-perfil__pendente {
    border-left: 4px solid var(--ik-accent-fill);
}

.ik-perfil__acoes-texto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.ik-perfil__acoes-texto .btn-link {
    min-height: 44px;
    padding-left: 0;
    padding-right: 0;
    color: var(--ik-accent-fill);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   CONVERSAS — o suporte do admin refinado pela referência (09/10/2026, MASTER §5.93.1)

   Tudo em `.ik-chat--quadro`: o painel da loja (§5.14) não muda. Um cartão só
   (`.ik-chat__quadro`): busca e abas segmentadas numa barra, a lista e a
   conversa lado a lado; avatar com iniciais quando não há foto; linha
   selecionada no fundo tênue da marca; mensagens sobre branco, recebida em
   balão cinza com as iniciais do contato ao lado; separador de dia com linhas;
   "Enviar" fora da caixa.

   Contrastes (medidos): prévia/telefone/hora da linha SELECIONADA em
   --ik-text-menu sobre --ik-accent-soft 7,01:1 (o muted cairia a 4,38:1 —
   por isso o par mudou só ali); iniciais --ik-text-menu sobre --ik-border
   6,38:1; texto do balão recebido --ik-text sobre --ik-balao-recebido 15,71:1;
   data do separador --ik-text-muted sobre --ik-surface-2 4,63:1. O balão
   (#f1f1f3) contra o branco mede 1,13:1 — é forma, não componente nem texto.
   ========================================================================== */
:root {
    /* balão de quem escreveu (§5.93.2, 2ª referência de 09/10/2026): branco com borda sobre a área cinza clara (--ik-bg) —
       era #f1f1f3 sobre branco na 1ª referência do mesmo dia */
    --ik-balao-recebido: #ffffff;
}

.ik-chat--quadro .ik-chat__quadro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 09/10/2026 (MASTER §5.93.2, 2ª referência): a barra e cada painel são cartões próprios, com respiro entre eles */
.ik-chat--quadro .ik-chat__quadro .card {
    overflow: hidden;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    box-shadow: var(--ik-shadow);
}

.ik-chat--quadro .ik-chat__barra {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
}

.ik-chat--quadro .ik-chat__barra .ik-chat__busca {
    flex: 1 1 auto;
    padding: 0;
}

.ik-chat--quadro .ik-chat__barra .ik-chat__busca::before {
    left: 1rem;
    top: 0;
    height: 52px;
}

.ik-chat--quadro .ik-chat__barra .ik-chat__busca .form-control {
    height: 52px;
    padding-left: 2.75rem;
    font-size: 1rem;
}

/* abas segmentadas: o trilho cinza com as três opções; a ativa é a pílula da casa (`.nav-tabs .nav-link.active`) */
.ik-chat--quadro .ik-chat__abas--segmentadas {
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid var(--ik-border);
    border-bottom: 1px solid var(--ik-border);
    border-radius: 12px;
    background-color: var(--ik-surface-2);
}

.ik-chat--quadro .ik-chat__abas--segmentadas .nav-tabs {
    flex-wrap: nowrap;
    gap: 4px;
}

.ik-chat--quadro .ik-chat__abas--segmentadas .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0 1.125rem;
    border-radius: var(--ik-radius);
    font-size: 0.9375rem;
    white-space: nowrap;
}

.ik-chat--quadro .ik-chat__abas--segmentadas .nav-link .ik-icone {
    font-size: 1.125rem;
}

.ik-chat--quadro .ik-chat__abas--segmentadas .nav-link:not(.active):hover {
    background-color: var(--ik-surface);
}

.ik-chat--quadro .ik-chat__paineis {
    display: grid;
    grid-template-columns: minmax(300px, 32%) minmax(0, 1fr);
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

.ik-chat--quadro .ik-chat__coluna-lista {
    min-width: 0;
}

.ik-chat--quadro .ik-chat__coluna-conversa {
    min-width: 0;
}

@media (min-width: 768px) {
    /* a altura útil menos o topo do painel, o título da página e o respiro entre os cartões (09/10/2026: com 11,5rem a página
       ainda rolava ~40 px e o campo de escrever começava abaixo da dobra) */
    .ik-chat--quadro .ik-chat__quadro {
        height: calc(100vh - 14.25rem);
        min-height: 520px;
    }

    .ik-chat--quadro .ik-chat__quadro .ik-chat__lista,
    .ik-chat--quadro .ik-chat__quadro .ik-chat__conversa,
    .ik-chat--quadro .ik-chat__quadro .ik-chat__vazio {
        height: 100%;
        min-height: 0;
    }

    .ik-chat--quadro .ik-chat__rolagem {
        max-height: none;
    }

    /* a linha do grid tem a altura do quadro (sem isso ela crescia com o conteúdo: com muitas mensagens a conversa e a lateral
       passavam do cartão e a página inteira rolava, com o rodapé por cima — visto em tela em 09/10/2026); cada coluna rola por dentro */
    .ik-chat--quadro .ik-chat__paineis {
        grid-template-rows: minmax(0, 1fr);
    }

    .ik-chat--quadro .ik-chat__coluna-lista,
    .ik-chat--quadro .ik-chat__coluna-conversa,
    .ik-chat--quadro .ik-chat__coluna-contexto {
        min-height: 0;
    }
}

/* ---- lista ---- */
.ik-chat--quadro .ik-chat__item {
    align-items: flex-start;
    gap: 0.875rem;
    min-height: 88px;
    padding: 0.875rem 1.25rem 0.875rem calc(1.25rem - 3px);
}

.ik-chat--quadro .ik-chat__avatar,
.ik-chat--quadro .ik-chat__avatar img {
    width: 52px;
    height: 52px;
}

/* "Conversas N" no topo da lista (suporte do admin): o total da aba, no tom tênue da marca */
.ik-chat--quadro .ik-chat__lista-topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-chat--quadro .ik-chat__lista-titulo {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ik-text);
}

.ik-chat--quadro .ik-chat__total {
    min-width: 1.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background-color: var(--ik-accent-soft);
    color: var(--ik-accent-em-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
}

.ik-chat--quadro .ik-chat__iniciais,
.ik-chat--quadro .ik-chat__msg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background-color: var(--ik-border);
    color: var(--ik-text-menu);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    user-select: none;
}

.ik-chat--quadro .ik-chat__nome {
    font-size: 1rem;
    font-weight: 600;
}

.ik-chat--quadro .ik-chat__quando,
.ik-chat--quadro .ik-chat__tipo,
.ik-chat--quadro .ik-chat__previa {
    font-size: 0.875rem;
}

.ik-chat--quadro .ik-chat__linha + .ik-chat__linha {
    margin-top: 0.25rem;
}

/* selecionada: fundo tênue da marca + a barra; o texto secundário sobe para --ik-text-menu (7,01:1) */
.ik-chat--quadro .ik-chat__item.conv-active {
    background-color: var(--ik-accent-soft) !important;
    border-left-color: var(--ik-accent);
}

.ik-chat--quadro .ik-chat__item.conv-active .ik-chat__quando,
.ik-chat--quadro .ik-chat__item.conv-active .ik-chat__tipo,
.ik-chat--quadro .ik-chat__item.conv-active .ik-chat__previa {
    color: var(--ik-text-menu);
}

/* selo de cliente Pro (`partials/_pro_customer_badge`, um <img> dentro do avatar): a regra de tamanho do avatar o pegava junto e a
   coroa cobria a foto inteira — fica um selo de 20 px no canto, com o anel do fundo para separar da foto */
.ik-chat .ik-chat__avatar > img.position-absolute,
.ik-chat--quadro .ik-chat__avatar > img.position-absolute {
    top: auto !important;
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ik-surface);
    background-color: var(--ik-surface);
}

/* ---- conversa ---- */
.ik-chat--quadro .ik-chat__cabecalho {
    gap: 1.25rem;
    padding: 1rem 1.5rem;
}

.ik-chat--quadro .ik-chat__cabecalho .ik-chat__avatar,
.ik-chat--quadro .ik-chat__cabecalho .ik-chat__avatar img {
    width: 64px;
    height: 64px;
}

.ik-chat--quadro .ik-chat__cabecalho .ik-chat__iniciais {
    font-size: 1.25rem;
}

.ik-chat--quadro .ik-chat__titulo {
    font-size: 1.25rem;
    font-weight: 600;
}

.ik-chat--quadro .ik-chat__subtitulo,
.ik-chat--quadro .ik-chat__subtitulo a {
    margin-top: 0.125rem;
    font-size: 1rem;
    color: var(--ik-text-muted);
    text-decoration: none;
}

.ik-chat--quadro .ik-chat__subtitulo a:hover {
    color: var(--ik-text);
    text-decoration: underline;
}

/* resumo sob o cabeçalho (suporte do admin): último pedido, canal e último contato numa faixa só */
.ik-chat--quadro .ik-chat__resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem 0;
    margin: 0.75rem 1.5rem;   /* o mesmo respiro em cima e embaixo (09/10/2026: colava na linha do cabeçalho) */
    padding: 0.625rem 0.25rem;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface-2);
}

.ik-chat--quadro .ik-chat__resumo-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
}

.ik-chat--quadro .ik-chat__resumo-item + .ik-chat__resumo-item {
    border-left: 1px solid var(--ik-border);
}

.ik-chat--quadro .ik-chat__resumo-item > .ik-icone {
    font-size: 1.25rem;
    color: var(--ik-text-menu);
}

.ik-chat--quadro .ik-chat__resumo dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ik-text-muted);
}

.ik-chat--quadro .ik-chat__resumo dd {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ik-text);
}

.ik-chat--quadro .ik-chat__resumo dd a {
    color: var(--ik-accent-fill);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* a área das mensagens no cinza claro da página e o balão recebido branco com borda (2ª referência, 09/10/2026) */
.ik-chat--quadro .ik-chat__mensagens {
    padding: 1.25rem 1.5rem;
    background-color: var(--ik-bg);
    border-top: 1px solid var(--ik-border);
}

/* separador de dia: a data no centro, com uma linha de cada lado */
.ik-chat--quadro .ik-chat__dia {
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0 1.25rem;
}

.ik-chat--quadro .ik-chat__dia::before,
.ik-chat--quadro .ik-chat__dia::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--ik-border);
}

.ik-chat--quadro .ik-chat__dia span {
    padding: 0.375rem 1.125rem;
    border: 1px solid var(--ik-border);
    background-color: var(--ik-surface);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ik-text-muted);
}

.ik-chat--quadro .ik-chat__msg {
    max-width: min(70%, 560px);
    margin-bottom: 0.875rem;
}

/* a seguida (mesma pessoa, até 5 min) encosta na anterior; o espaço do avatar fica para alinhar */
.ik-chat--quadro .ik-chat__msg--seguida {
    margin-top: -0.375rem;
}

.ik-chat--quadro .ik-chat__msg--seguida .ik-chat__msg-avatar {
    visibility: hidden;
}

.ik-chat--quadro .ik-chat__msg--com-avatar {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.875rem;
}

.ik-chat--quadro .ik-chat__msg-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    overflow: hidden;
    font-size: 0.875rem;
}

.ik-chat--quadro .ik-chat__msg-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ik-chat--quadro .ik-chat__msg-conteudo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.ik-chat--quadro .ik-chat__balao {
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 12px;
    font-size: 0.9375rem;
}

.ik-chat--quadro .ik-chat__msg--recebida .ik-chat__balao {
    background-color: var(--ik-balao-recebido);
    border: 1px solid var(--ik-border);
    box-shadow: var(--ik-shadow);
    border-bottom-left-radius: 12px;
}

.ik-chat--quadro .ik-chat__msg--enviada .ik-chat__balao {
    border-bottom-right-radius: 12px;
}

.ik-chat--quadro .ik-chat__meta {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
}

/* ---- compositor: a caixa (anexos, texto, emoji) e o "Enviar" ao lado ---- */
.ik-chat--quadro .ik-chat__compositor {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--ik-border);
    background-color: var(--ik-surface);
}

.ik-chat--quadro .ik-chat__linha-envio {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.ik-chat--quadro .ik-chat__linha-envio .ik-chat__caixa {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 56px;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 12px;
}

/* anexos | texto: um divisor separa as ações do campo (2ª referência) */
.ik-chat--quadro .ik-chat__linha-envio .ik-chat__acoes {
    padding-right: 0.5rem;
    margin-right: 0.25rem;
    border-right: 1px solid var(--ik-border);
}

.ik-chat--quadro .ik-chat__linha-envio .ik-chat__caixa textarea.form-control {
    font-size: 1rem;
}

.ik-chat--quadro .ik-chat__linha-envio .ik-chat__enviar {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    font-size: 1.375rem;
}

/* ---- celular: lista OU conversa (o §5.14); com a conversa aberta, a barra de busca/abas também sai ---- */
@media (max-width: 767.98px) {
    .ik-chat--quadro .ik-chat__barra {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem;
    }

    .ik-chat--quadro .ik-chat__abas--segmentadas .nav-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ik-chat--quadro .ik-chat__abas--segmentadas .nav-link {
        justify-content: center;
        padding: 0 0.5rem;
    }

    .ik-chat--quadro .ik-chat__paineis {
        grid-template-columns: minmax(0, 1fr);
    }

    .ik-chat--quadro .ik-chat__coluna-lista {
        border-right: 0;
    }

    .ik-chat--quadro.ik-chat--aberta .ik-chat__barra {
        display: none;
    }

    .ik-chat--quadro .ik-chat__item {
        min-height: 88px;
        padding: 0.875rem 1rem 0.875rem calc(1rem - 3px);
        gap: 0.75rem;
    }

    .ik-chat--quadro .ik-chat__avatar,
    .ik-chat--quadro .ik-chat__avatar img {
        width: 48px;
        height: 48px;
    }

    .ik-chat--quadro .ik-chat__cabecalho {
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .ik-chat--quadro .ik-chat__cabecalho .ik-chat__avatar,
    .ik-chat--quadro .ik-chat__cabecalho .ik-chat__avatar img {
        width: 44px;
        height: 44px;
    }

    .ik-chat--quadro .ik-chat__titulo {
        font-size: 1.0625rem;
    }

    .ik-chat--quadro .ik-chat__mensagens {
        padding: 1rem;
    }

    .ik-chat--quadro .ik-chat__msg {
        max-width: 88%;
    }

    .ik-chat--quadro .ik-chat__msg-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.8125rem;
    }

    .ik-chat--quadro .ik-chat__compositor {
        padding: 0.75rem 1rem;
    }

    /* em 390 px o placeholder cortava ("Digite uma"): menos respiro entre as peças, o texto inteiro cabe */
    .ik-chat--quadro .ik-chat__linha-envio {
        gap: 0.5rem;
    }

    .ik-chat--quadro .ik-chat__linha-envio .ik-chat__caixa {
        min-height: 52px;
        gap: 0.125rem;
        padding: 0.25rem 0.375rem;
    }

    .ik-chat--quadro .ik-chat__linha-envio .ik-chat__acao {
        width: 32px;
    }

    .ik-chat--quadro .ik-chat__linha-envio .ik-chat__caixa textarea.form-control {
        font-size: 0.9375rem;
    }

    /* vazio, o textarea quebrava o placeholder e a 2ª linha sumia ("Digite uma"); só enquanto vazio, uma linha com reticências */
    .ik-chat--quadro .ik-chat__linha-envio .ik-chat__caixa textarea.form-control:placeholder-shown {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ik-chat--quadro .ik-chat__linha-envio .ik-chat__enviar {
        width: 52px;
        height: 52px;
    }
}

/* ---- loja: a lateral do pedido (§5.57) como terceira coluna a partir de 1200px; abaixo, a gaveta de sempre ---- */
@media (min-width: 1200px) {
    .ik-chat--quadro .ik-chat__paineis--com-contexto {
        grid-template-columns: minmax(300px, 30%) minmax(0, 1fr) minmax(280px, 24%);
    }

    .ik-chat--quadro .ik-chat__coluna-contexto {
        min-width: 0;
        padding: 0;
    }

    .ik-chat--quadro .ik-chat__quadro .ik-chat__contexto {
        height: 100%;
        min-height: 0;
    }
}

/* a lateral é coluna flex: o topo fica e só o conteúdo (`.ik-chat__contexto-rolagem`) rola */
.ik-chat--quadro .ik-chat__contexto {
    display: flex;
    flex-direction: column;
}

@media (max-width: 1199.98px) {
    .ik-chat--quadro .ik-chat__coluna-contexto .ik-chat__contexto {
        box-shadow: -8px 0 24px rgba(24, 24, 27, 0.16);
    }
}

/* a conversa fixa com o suporte fica no alto da lista, separada das conversas por uma linha */
.ik-chat--quadro #admin-conversation-list {
    border-bottom: 1px solid var(--ik-border);
}

/* o avatar do suporte é o logo da plataforma (largo): inteiro dentro do círculo, não recortado ("ike") */
.ik-chat--quadro #admin-conversation-list .ik-chat__avatar img {
    object-fit: contain;
    padding: 6px;
    background-color: var(--ik-surface);
}

/* ---- a aba Conversas da ficha da loja (admin, só leitura; MASTER §5.178.11.1): faixa do pedido, filtro e aviso no ritmo do cartão ---- */
.ik-chat--quadro .ik-chat__pedido-faixa {
    padding: 0.625rem 1.5rem;
}

.ik-chat--quadro .ik-chat__filtros {
    padding: 0.75rem 1.25rem;
}

.ik-chat--quadro .ik-chat__so-leitura {
    padding: 1rem 1.5rem 1.25rem;
}

@media (max-width: 767.98px) {
    .ik-chat--quadro .ik-chat__pedido-faixa,
    .ik-chat--quadro .ik-chat__so-leitura {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* 09/10/2026: troca de aba sem recarregar a página (js/ikero/chat/conversa.js) — a lista da aba anterior esmaece até a nova chegar */
.ik-chat__rolagem--trocando {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ik-chat__rolagem--trocando {
        transition: none;
    }
}

/* 09/10/2026 (MASTER §5.14.2) — o aviso de "contato fora do pedido" (era da lateral) logo abaixo do resumo, alinhado a ele */
.ik-chat--quadro .ik-chat__resumo + .ik-chat__contexto-aviso {
    margin: -0.25rem 1.5rem 0.75rem;
}

@media (max-width: 767.98px) {
    .ik-chat--quadro .ik-chat__resumo + .ik-chat__contexto-aviso {
        margin: -0.25rem 1rem 0.75rem;
    }
}

/* 09/10/2026 (MASTER §5.93.2) — celular: o resumo da conversa empilha (um dado por linha, sem divisor lateral) */
@media (max-width: 767.98px) {
    .ik-chat--quadro .ik-chat__resumo {
        flex-direction: column;
        margin: 0.75rem 1rem;
        padding: 0.5rem 0;
    }

    .ik-chat--quadro .ik-chat__resumo-item {
        padding: 0.125rem 0.875rem;
    }

    .ik-chat--quadro .ik-chat__resumo-item + .ik-chat__resumo-item {
        border-left: 0;
    }

    .ik-chat--quadro .ik-chat__paineis {
        gap: 0.75rem;
    }

    .ik-chat--quadro .ik-chat__quadro {
        gap: 0.75rem;
    }
}

/* §5.189 (09/10/2026): o motivo opcional ao desligar a loja — a ajuda embaixo do campo, alinhada à esquerda como o rótulo */
.swal2-popup.ik-loja-motivo .ik-zonas__ajuda {
    margin-top: 0.5rem;
    text-align: left;
}

/* ---- "Ver diretriz" da Configuração do negócio (10/10/2026, MASTER §5.155) -----------------------------
   A aba fixa na borda direita abre a folha `.ik-filtro.ik-guia`. Aba: botão de verdade (foco, teclado), superfície branca
   com borda, ícone Lucide neutro — o template usava um quadrado laranja e texto preto cravado. Folha: temas em sanfona
   (cartões `--ik-surface-2` com borda, título 44 px, seta que gira), termos em `dl` e o link "Ir para a seção". */
.ik-guia__aba {
    position: fixed;
    top: 200px;
    right: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 44px;
    padding: 0.75rem 0;
    border: 1px solid var(--ik-border);
    border-right: 0;
    border-radius: var(--ik-radius) 0 0 var(--ik-radius);
    background-color: var(--ik-surface);
    box-shadow: var(--ik-shadow-md);
    color: var(--ik-text);
    transition: background-color var(--ik-transicao), border-color var(--ik-transicao);
}

.ik-guia__aba:hover {
    border-color: var(--ik-border-strong);
    background-color: var(--ik-surface-2);
}

.ik-guia__aba > .ik-icone {
    color: var(--ik-text-muted);
    font-size: 1.125rem;
}

.ik-guia__aba-texto {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.ik-guia__corpo {
    gap: 0.75rem;
}

.ik-guia__item {
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    background-color: var(--ik-surface-2);
}

.ik-guia__item-titulo {
    margin: 0;
}

.ik-guia__botao {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 52px;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: var(--ik-radius-lg);
    background: transparent;
    color: var(--ik-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
}

.ik-guia__botao > .ik-icone:first-child {
    flex-shrink: 0;
    color: var(--ik-text-muted);
    font-size: 1.25rem;
}

.ik-guia__botao-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.ik-guia__seta {
    flex-shrink: 0;
    color: var(--ik-text-muted);
    transition: transform var(--ik-transicao);
}

.ik-guia__botao[aria-expanded="true"] .ik-guia__seta {
    transform: rotate(180deg);
}

.ik-guia__conteudo {
    padding: 0 1rem 1rem 3rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
    line-height: 1.55;
}

.ik-guia__conteudo p {
    margin: 0 0 0.75rem;
}

.ik-guia__lista {
    margin: 0 0 0.75rem;
}

.ik-guia__lista dt {
    color: var(--ik-text);
    font-weight: 600;
}

.ik-guia__lista dd {
    margin: 0.125rem 0 0.75rem;
}

.ik-guia__nota {
    padding: 0.625rem 0.75rem;
    border-radius: var(--ik-radius);
    background-color: var(--ik-surface);
    border: 1px solid var(--ik-border);
}

.ik-guia__ir {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    color: var(--ik-accent-fill);
    font-weight: 600;
}

.ik-guia__ir:hover {
    color: var(--ik-accent-hover);
    text-decoration: underline;
}

/* o alvo de "Ir para a seção" não some atrás do cabeçalho fixo */
.ik-negocio [id] {
    scroll-margin-top: 5rem;
}

@media (max-width: 575.98px) {
    .ik-guia__conteudo {
        padding-left: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ik-guia__seta {
        transition: none;
    }
}

/* ==========================================================================
   Detalhe da solicitação de adesão de loja (10/10/2026, MASTER §5.71.1): o molde da ficha (§5.178) com as ações do candidato
   a entregador (§5.101). Fotos lado a lado (logo quadrado, capa na proporção do app), partes do endereço em duas colunas.
   ========================================================================== */
.ik-solicitacao-detalhe__fotos {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.ik-solicitacao-detalhe__logo img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: var(--ik-radius);
    border: 1px solid var(--ik-border);
}
.ik-solicitacao-detalhe__capa {
    flex: 1 1 auto;
    min-width: 0;
}
.ik-solicitacao-detalhe__capa img {
    display: block;
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 3.4375;
    object-fit: cover;
    border-radius: var(--ik-radius);
    border: 1px solid var(--ik-border);
}
.ik-solicitacao-detalhe__logo:focus-visible,
.ik-solicitacao-detalhe__capa:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
    border-radius: var(--ik-radius);
}
.ik-solicitacao-detalhe__partes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
}
.ik-solicitacao-detalhe__acoes .ik-icone {
    font-size: 1rem;
}
@media (max-width: 575.98px) {
    .ik-solicitacao-detalhe__acoes {
        width: 100%;
    }
    .ik-solicitacao-detalhe__acoes .btn {
        flex: 1 1 calc(50% - 0.5rem);
    }
    .ik-solicitacao-detalhe__fotos {
        flex-direction: column;
    }
    .ik-solicitacao-detalhe__partes {
        grid-template-columns: 1fr;
    }
}

/* 10/10/2026 (decisão do proprietário, MASTER §5.71.1): nos pedidos de adesão (loja e entregador — detalhe e listas), Negar vermelho e
   Aprovar verde, cheios. Só para decidir pedido; o resto do painel segue a ação primária do tema. */
.btn.ik-decisao {
    color: #fff;
    border: 1px solid transparent;
    font-weight: 600;
}
.btn.ik-decisao--aprovar { background-color: var(--ik-decisao-aprovar); border-color: var(--ik-decisao-aprovar); }
.btn.ik-decisao--aprovar:hover,
.btn.ik-decisao--aprovar:focus { background-color: var(--ik-decisao-aprovar-hover); border-color: var(--ik-decisao-aprovar-hover); color: #fff; }
.btn.ik-decisao--negar { background-color: var(--ik-decisao-negar); border-color: var(--ik-decisao-negar); }
.btn.ik-decisao--negar:hover,
.btn.ik-decisao--negar:focus { background-color: var(--ik-decisao-negar-hover); border-color: var(--ik-decisao-negar-hover); color: #fff; }
.btn.ik-decisao:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; }

/* ==========================================================================
   Sino de avisos do admin (10/10/2026, MASTER §5.192; AvisosDoAdmin)
   O número em branco sobre o vermelho de atenção (`--ik-erro-texto`, 7,72:1) — laranja não comunica status (§1.1); não lido = ponto
   escuro + título em 600, sem fundo colorido. Dropdown do Bootstrap 4 (`.dropdown-menu-right`), 22rem, rolagem própria.
   ========================================================================== */
.ik-sino__botao {
    position: relative;
}

.ik-sino__botao .ik-icone {
    font-size: 1.125rem;
}

.ik-sino__botao:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: 2px;
}

.ik-sino__numero {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--ik-surface);
    border-radius: 999px;
    background-color: var(--ik-erro-texto);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ik-sino__numero[hidden] {
    display: none;
}

.ik-sino__menu {
    width: 22rem;
    max-width: calc(100vw - 32px);
    padding: 0;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    box-shadow: var(--ik-shadow-md);
    overflow: hidden;
}

.ik-sino__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--ik-border);
}

.ik-sino__titulo {
    color: var(--ik-text);
    font-size: 1rem;
    font-weight: 700;
}

.ik-sino__topo form {
    margin: 0;
}

.ik-sino__marcar {
    min-height: 32px;
    padding: 0 0.25rem;
    border: 0;
    background: transparent;
    color: var(--ik-accent-fill);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ik-sino__marcar:focus-visible,
.ik-sino__ver-todos:focus-visible,
.ik-sino__item:focus-visible {
    outline: 2px solid var(--ik-accent);
    outline-offset: -2px;
}

.ik-sino__lista {
    max-height: min(26rem, 60vh);
    overflow-y: auto;
}

.ik-avisos__lista {
    max-height: none;
}

.ik-sino__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 2rem 0.75rem 1rem;
    border-bottom: 1px solid var(--ik-border);
    color: var(--ik-text);
    text-decoration: none;
}

/* o item sem tela própria é um botão (abre o diálogo com o texto): o mesmo desenho do link */
button.ik-sino__item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--ik-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.ik-sino__item:hover,
.ik-sino__item:focus {
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    text-decoration: none;
}

.ik-sino__disco {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background-color: var(--ik-surface-2);
    color: var(--ik-text-muted);
    font-size: 1rem;
}

.ik-sino__conteudo {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.ik-sino__item-titulo {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ik-sino__item.is-novo .ik-sino__item-titulo {
    font-weight: 600;
}

.ik-sino__item-texto {
    overflow: hidden;
    color: var(--ik-text-muted);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ik-sino__item-quando {
    color: var(--ik-text-muted);
    font-size: 0.75rem;
}

.ik-sino__ponto {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 999px;
    background-color: var(--ik-text);
}

.ik-sino__item.is-resolvido .ik-sino__item-titulo {
    color: var(--ik-text-muted);
}

/* "Resolvido": a solicitação já foi decidida — texto em verde de confirmação (7,58:1), sem fundo */
.ik-sino__resolvido {
    color: var(--ik-sucesso-texto);
    font-weight: 600;
}

.ik-sino__vazio {
    margin: 0;
    padding: 1.5rem 1rem;
    color: var(--ik-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.ik-sino__ver-todos {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--ik-accent-fill);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.ik-sino__ver-todos:hover {
    background-color: var(--ik-surface-2);
    color: var(--ik-accent-hover);
}

.ik-avisos__topo {
    display: flex;
    justify-content: space-between;
}

.ik-avisos__topo select {
    min-width: 14rem;
}

/* no celular o menu do sino ocupa a largura da tela, com o respiro de 16 px (o Popper o alinhava ao botão e ele saía pela direita);
   o !important vence o estilo inline do Popper */
@media (max-width: 575.98px) {
    .ik-sino__menu.show {
        position: fixed !important;
        top: 4.25rem !important;
        right: 16px !important;
        left: 16px !important;
        width: auto;
        max-width: none;
        transform: none !important;
    }
}

/* iKero 14/10/2026 (revisão da tela Criar Reel da loja, MASTER §5.194): na prévia VAZIA do Reel (sem vídeo, fundo cinza claro) o nome da loja
   saía em branco — ilegível. Sem vídeo, o nome na cor do texto; com vídeo (`.active`) continua branco sobre a faixa escura, como no app. */
.reel-preview-box:not(.active):not(.tem-capa) .reel-des-wrapper .reel-preview-title { color: var(--ik-text); }
/* 14/10/2026 (2ª revisão): com a capa escolhida (e sem vídeo) o nome volta ao branco, com sombra para ler sobre a foto */
.reel-preview-box.tem-capa:not(.active) .reel-des-wrapper .reel-preview-title { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
/* arquivo sendo arrastado sobre a caixa de envio do Reel (capa ou vídeo): o mesmo realce do hover do uploader */
.reel-upload-box.ik-reels--arrastando { border-color: var(--ik-accent-fill) !important; background-color: var(--ik-accent-soft) !important; }
/* o placeholder do seletor de item da tela de Reels saía "Selecione O Item" (o select2 do template capitaliza): frase, não título */
.ik-reels .select2-selection__placeholder { text-transform: none; }

/* iKero 19/10/2026 (MASTER §5.121) — Redes sociais do admin com o LOGOTIPO OFICIAL de cada rede (o partial `landing-ikero/logo-rede`,
   Simple Icons): glifo de uma cor (`--ik-text`) num disco neutro de 36 px — marca registrada não se recolore nem se redesenha. A linha
   em edição ganha o fundo tênue de estado ativo. */
.ik-redes__rede { display: inline-flex; align-items: center; gap: 0.75rem; }
.ik-redes__logo {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px;
    border: 1px solid var(--ik-border); border-radius: 50%; background-color: var(--ik-surface-2); color: var(--ik-text);
}
.ik-redes__logo svg { width: 18px; height: 18px; fill: currentColor; }
.ik-redes__titulo { display: flex; align-items: center; gap: 0.75rem; }
#ik-redes-tabela tr.ik-redes__em-edicao > td { background-color: var(--ik-accent-soft); }