/* ==========================================================================
   WhatsApp do Link de Agendamento
   --------------------------------------------------------------------------
   A aba que conecta o número do próprio usuário e escreve os avisos que saem
   sozinhos para quem agenda pelo link.

   Namespace `slw-` (schedule link · whatsapp). Nada aqui se chama `crm-`: as
   telas do módulo têm folha própria e continuam intocadas — duas telas que
   dividem classe acabam brigando no dia em que uma delas muda.

   Tudo em tokens `--w-*`, com fallback: a tela precisa sobreviver ao tema
   escuro sem nenhuma regra a mais.
   ========================================================================== */

/* --- Trilha de abas (aparece nas duas telas do link) --------------------- */

.slw-abas {
    display: flex;
    gap: .35rem;
    padding: .3rem;
    border-radius: var(--w-radius-full, 999px);
    background: var(--w-surface-sunken, #f1f2f6);
    border: 1px solid var(--w-border-subtle, #e5e7eb);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.slw-abas::-webkit-scrollbar { display: none; }

.slw-abas a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    border-radius: var(--w-radius-full, 999px);
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--w-text-secondary, #5b6172);
    text-decoration: none;
    transition: background var(--w-duration-fast, .15s) var(--w-ease-out, ease),
                color var(--w-duration-fast, .15s) var(--w-ease-out, ease);
}

.slw-abas a:hover { color: var(--w-text-primary, #171a21); background: var(--w-surface-hover, #e9ebf1); }

.slw-abas a.is-ativa {
    background: var(--w-surface, #fff);
    color: var(--w-text-primary, #171a21);
    box-shadow: var(--w-shadow-sm, 0 1px 2px rgba(16, 18, 27, .08));
}

/* O ponto vivo na aba: quem passa por aqui quer saber se está conectado antes
   mesmo de abrir a aba. */
.slw-abas__ponto {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--w-gray-300, #d3d6df);
}

.slw-abas__ponto--ok { background: var(--w-success, #16a34a); box-shadow: 0 0 0 3px var(--w-success-bg, #dcfce7); }
.slw-abas__ponto--atencao { background: var(--w-warning, #d97706); box-shadow: 0 0 0 3px var(--w-warning-bg, #fef3c7); }
.slw-abas__ponto--erro { background: var(--w-danger, #dc2626); box-shadow: 0 0 0 3px var(--w-danger-bg, #fee2e2); }

/* --- Painel de conexão (o elemento dominante da tela) -------------------- */

/* Claro, e não escuro.
 *
 * A primeira versão era um painel quase preto com verde forte: chamava
 * atenção e brigava com o resto do sistema, que é branco com um roxo discreto.
 * Aqui o destaque vem do tamanho e de um fundo levemente tingido da cor da
 * marca — a tela continua sendo a mais importante da página sem parecer de
 * outro produto. */
.slw-heroi {
    position: relative;
    overflow: hidden;
    border-radius: var(--w-radius-xl, 20px);
    padding: 1.6rem;
    color: var(--w-text-primary, #171a21);
    background:
        radial-gradient(90% 120% at 100% 0%, var(--w-accent-subtle, #eceafb) 0%, transparent 62%),
        var(--w-surface, #fff);
    border: 1px solid var(--w-border-subtle, #e5e7eb);
    box-shadow: var(--w-shadow-md, 0 6px 18px rgba(16, 18, 27, .08));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
}

/* Uma faixa fina no topo dá o estado sem tingir a tela inteira. */
.slw-heroi::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--w-accent, #130a78);
}

.slw-heroi.is-ok::before { background: var(--w-success, #16a34a); }
.slw-heroi.is-atencao::before { background: var(--w-warning, #d97706); }
.slw-heroi.is-erro::before { background: var(--w-danger, #dc2626); }

.slw-heroi.is-ok {
    background:
        radial-gradient(90% 120% at 100% 0%, var(--w-success-bg, #dcfce7) 0%, transparent 62%),
        var(--w-surface, #fff);
    border-color: color-mix(in srgb, var(--w-success, #16a34a) 32%, transparent);
}

.slw-heroi.is-atencao {
    background:
        radial-gradient(90% 120% at 100% 0%, var(--w-warning-bg, #fef3c7) 0%, transparent 62%),
        var(--w-surface, #fff);
    border-color: color-mix(in srgb, var(--w-warning, #d97706) 32%, transparent);
}

.slw-heroi.is-erro {
    background:
        radial-gradient(90% 120% at 100% 0%, var(--w-danger-bg, #fee2e2) 0%, transparent 62%),
        var(--w-surface, #fff);
    border-color: color-mix(in srgb, var(--w-danger, #dc2626) 32%, transparent);
}

.slw-heroi__selo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--w-accent, #130a78);
}

/* O seletor carrega o pai para vencer o `h2` genérico das folhas antigas do
   template — sem isso o título herda um cinza escuro que ninguém escolheu. */
.slw-heroi .slw-heroi__titulo {
    margin: .5rem 0 .15rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--w-text-primary, #171a21);
}

.slw-heroi__tel {
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    color: var(--w-text-secondary, #5b6172);
}

.slw-heroi__estado {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
    padding: .4rem .85rem;
    border-radius: var(--w-radius-full, 999px);
    background: var(--w-surface-sunken, #f4f5f9);
    border: 1px solid var(--w-border-subtle, #e5e7eb);
    font-size: .82rem;
    font-weight: 600;
    color: var(--w-text-secondary, #5b6172);
}

.slw-ponto {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--w-gray-300, #d3d6df);
    flex: none;
}

.slw-ponto--ok { background: var(--w-success, #16a34a); box-shadow: 0 0 0 4px var(--w-success-bg, #dcfce7); }
.slw-ponto--atencao { background: var(--w-warning, #d97706); box-shadow: 0 0 0 4px var(--w-warning-bg, #fef3c7); }
.slw-ponto--erro { background: var(--w-danger, #dc2626); box-shadow: 0 0 0 4px var(--w-danger-bg, #fee2e2); }

/* Pulsa só enquanto espera a leitura: movimento constante em tela de trabalho
   cansa; movimento em algo que está acontecendo agora informa. */
.slw-ponto--atencao { animation: slw-pulsa 1.6s ease-in-out infinite; }

@keyframes slw-pulsa {
    0%, 100% { box-shadow: 0 0 0 4px var(--w-warning-bg, #fef3c7); }
    50% { box-shadow: 0 0 0 9px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .slw-ponto--atencao { animation: none; }
}

.slw-heroi__acoes {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 12.5rem;
}

.slw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    border-radius: var(--w-radius-md, 12px);
    border: 1px solid transparent;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--w-duration-fast, .15s) var(--w-ease-out, ease),
                background var(--w-duration-fast, .15s) var(--w-ease-out, ease);
}

.slw-btn:active { transform: translateY(1px); }
.slw-btn[disabled] { opacity: .6; cursor: progress; }

/* A ação principal usa o roxo do sistema, e não o verde do WhatsApp: verde
   aqui é a cor do estado "conectado", e usá-la também no botão faria a tela
   dizer duas coisas com a mesma cor. */
.slw-btn--wa { background: var(--w-accent, #130a78); color: var(--w-accent-contrast, #fff); }
.slw-btn--wa:hover { background: var(--w-accent-hover, #1b0fa0); color: var(--w-accent-contrast, #fff); }

.slw-btn--fantasma {
    background: var(--w-surface, #fff);
    border-color: var(--w-border, #d8dbe4);
    color: var(--w-text-primary, #171a21);
}

.slw-btn--fantasma:hover { background: var(--w-surface-hover, #f1f2f6); color: var(--w-text-primary, #171a21); }

/* Excluir é destrutivo e vem por último: a ação comum fica no topo da pilha. */
.slw-btn--perigo {
    width: 100%;
    background: var(--w-surface, #fff);
    border-color: color-mix(in srgb, var(--w-danger, #dc2626) 40%, transparent);
    color: var(--w-danger, #dc2626);
}

.slw-btn--perigo:hover { background: var(--w-danger, #dc2626); border-color: var(--w-danger, #dc2626); color: #fff; }

/* O formulário do botão de excluir não pode alterar a pilha de ações — e
   `display: contents` venceria o `[hidden]`, deixando visível um botão que a
   tela mandou esconder. */
.slw-heroi__acoes form { display: contents; }
.slw-heroi__acoes form[hidden] { display: none; }

.slw-heroi__nota {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--w-border-subtle, #e5e7eb);
    font-size: .82rem;
    color: var(--w-text-secondary, #5b6172);
}

.slw-heroi__nota a { color: var(--w-text-link, #130a78); font-weight: 600; }

/* --- Cartões de apoio ---------------------------------------------------- */

.slw-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.slw-cartao {
    background: var(--w-surface, #fff);
    border: 1px solid var(--w-border-subtle, #e5e7eb);
    border-radius: var(--w-radius-lg, 16px);
    padding: 1.15rem;
    box-shadow: var(--w-shadow-xs, 0 1px 2px rgba(16, 18, 27, .05));
}

.slw-cartao h3 {
    margin: 0 0 .6rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--w-text-primary, #171a21);
}

.slw-cartao p {
    margin: 0 0 .5rem;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--w-text-secondary, #5b6172);
}

.slw-passos {
    counter-reset: slw;
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.slw-passos li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--w-text-secondary, #5b6172);
}

.slw-passos li::before {
    counter-increment: slw;
    content: counter(slw);
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 800;
    color: var(--w-accent, #130a78);
    background: var(--w-accent-subtle, #eceafb);
}

/* --- Chave geral dos disparos -------------------------------------------- */

.slw-chave {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.25rem;
    border-radius: var(--w-radius-lg, 16px);
    border: 1px solid var(--w-border-subtle, #e5e7eb);
    background: var(--w-surface, #fff);
    box-shadow: var(--w-shadow-xs, 0 1px 2px rgba(16, 18, 27, .05));
}

.slw-chave.is-ligada {
    border-color: color-mix(in srgb, var(--w-success, #16a34a) 40%, transparent);
    background: linear-gradient(180deg, var(--w-success-bg, #dcfce7) 0%, var(--w-surface, #fff) 70%);
}

.slw-chave__icone {
    flex: none;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: var(--w-radius-md, 12px);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: var(--w-accent, #130a78);
    background: var(--w-accent-subtle, #eceafb);
}

.slw-chave.is-ligada .slw-chave__icone {
    color: var(--w-success-fg, #166534);
    background: color-mix(in srgb, var(--w-success, #16a34a) 18%, transparent);
}

.slw-chave__texto { flex: 1 1 16rem; }

.slw-chave__texto strong {
    display: block;
    font-size: .98rem;
    color: var(--w-text-primary, #171a21);
}

.slw-chave__texto span {
    display: block;
    margin-top: .15rem;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--w-text-secondary, #5b6172);
}

/* O interruptor. Um botão de verdade, e não uma caixa de seleção enfeitada:
   ele envia o formulário no clique, sem depender de JavaScript. */
.slw-interruptor {
    position: relative;
    width: 3.4rem;
    height: 1.9rem;
    flex: none;
    border: none;
    padding: 0;
    border-radius: var(--w-radius-full, 999px);
    background: var(--w-gray-300, #d3d6df);
    cursor: pointer;
    transition: background var(--w-duration-normal, .2s) var(--w-ease-out, ease);
}

.slw-interruptor::after {
    content: '';
    position: absolute;
    top: .22rem;
    left: .22rem;
    width: 1.46rem;
    height: 1.46rem;
    border-radius: 50%;
    /* Token, e não `#fff` cru: no tema escuro o botão do interruptor acompanha
       a superfície em vez de virar um ponto branco brilhante. */
    background: var(--w-gray-0, #fff);
    box-shadow: 0 1px 3px rgba(16, 18, 27, .3);
    transition: transform var(--w-duration-normal, .2s) var(--w-ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}

.slw-interruptor.is-ligado { background: var(--w-success, #16a34a); }
.slw-interruptor.is-ligado::after { transform: translateX(1.5rem); }
.slw-interruptor:focus-visible { outline: 2px solid var(--w-border-focus, #4f46e5); outline-offset: 2px; }

/* --- Faixa de alerta ----------------------------------------------------- */

.slw-alerta {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .9rem 1.1rem;
    border-radius: var(--w-radius-md, 12px);
    border: 1px solid color-mix(in srgb, var(--w-warning, #d97706) 35%, transparent);
    background: var(--w-warning-bg, #fef3c7);
    color: var(--w-warning-fg, #92400e);
    font-size: .86rem;
    line-height: 1.55;
}

.slw-alerta--ok {
    border-color: color-mix(in srgb, var(--w-success, #16a34a) 35%, transparent);
    background: var(--w-success-bg, #dcfce7);
    color: var(--w-success-fg, #166534);
}

.slw-alerta a { color: inherit; font-weight: 700; }

/* --- Variáveis (sanfona) ------------------------------------------------- */

/* Fundo tingido do roxo do sistema, bem diluído: a área se separa dos cartões
   brancos sem virar outro bloco de destaque disputando atenção com o painel de
   conexão. `color-mix` mantém o tom certo nos dois temas — é a mesma cor da
   marca, só que com pouca presença. */
.slw-vars {
    border: 1px solid color-mix(in srgb, var(--w-accent, #130a78) 18%, transparent);
    border-radius: var(--w-radius-lg, 16px);
    background: color-mix(in srgb, var(--w-accent, #130a78) 5%, var(--w-surface, #fff));
    overflow: hidden;
    transition: background var(--w-duration-fast, .15s) var(--w-ease-out, ease);
}

.slw-vars[open] { background: color-mix(in srgb, var(--w-accent, #130a78) 7%, var(--w-surface, #fff)); }

.slw-vars summary {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1.1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* O triângulo nativo é feio e aparece em posição diferente em cada navegador —
   a seta da direita faz o mesmo trabalho e igual em todos. */
.slw-vars summary::-webkit-details-marker { display: none; }
.slw-vars summary::marker { content: ''; }

.slw-vars summary:hover { background: color-mix(in srgb, var(--w-accent, #130a78) 8%, transparent); }
.slw-vars summary:focus-visible { outline: 2px solid var(--w-border-focus, #4f46e5); outline-offset: -2px; }

.slw-vars__icone {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--w-radius-md, 12px);
    display: grid;
    place-items: center;
    font-size: .85rem;
    color: var(--w-accent, #130a78);
    background: color-mix(in srgb, var(--w-accent, #130a78) 14%, transparent);
}

.slw-vars__titulo { flex: 1 1 auto; min-width: 0; }

.slw-vars__titulo strong {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--w-text-primary, #171a21);
}

.slw-vars__titulo small {
    display: block;
    margin-top: .1rem;
    font-size: .79rem;
    line-height: 1.45;
    color: var(--w-text-secondary, #5b6172);
}

.slw-vars__conta {
    flex: none;
    padding: .1rem .5rem;
    border-radius: var(--w-radius-full, 999px);
    font-size: .72rem;
    font-weight: 800;
    color: var(--w-accent, #130a78);
    background: color-mix(in srgb, var(--w-accent, #130a78) 14%, transparent);
}

.slw-vars__seta {
    flex: none;
    font-size: .75rem;
    color: var(--w-text-tertiary, #7a8194);
    transition: transform var(--w-duration-normal, .2s) var(--w-ease-out, ease);
}

.slw-vars[open] .slw-vars__seta { transform: rotate(180deg); }

.slw-vars ul {
    margin: 0;
    padding: 0 1.1rem 1.1rem;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .5rem;
}

.slw-vars li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: var(--w-radius-sm, 8px);
    background: color-mix(in srgb, var(--w-surface, #fff) 70%, transparent);
    font-size: .82rem;
    color: var(--w-text-secondary, #5b6172);
}

.slw-var {
    border: 1px solid color-mix(in srgb, var(--w-accent, #130a78) 25%, transparent);
    background: var(--w-surface, #fff);
    color: var(--w-accent, #130a78);
    border-radius: var(--w-radius-sm, 8px);
    padding: .15rem .45rem;
    font-family: var(--w-font-mono, ui-monospace, monospace);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--w-duration-fast, .15s) var(--w-ease-out, ease);
}

.slw-var:hover { background: color-mix(in srgb, var(--w-accent, #130a78) 12%, transparent); }
.slw-var:active { transform: translateY(1px); }

/* --- Cartões de mensagem ------------------------------------------------- */

/* Colunas mais largas que antes.
   Com 20rem os títulos de duas palavras quebravam no meio — "Quando ainda não
   confirmou" virava três linhas —, e o campo de texto ficava estreito demais
   para ler a mensagem que se está escrevendo. */
.slw-avisos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
    gap: 1rem;
    align-items: start;
}

.slw-aviso {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: var(--w-surface, #fff);
    border: 1px solid var(--w-border-subtle, #e5e7eb);
    border-radius: var(--w-radius-lg, 16px);
    padding: 1.25rem;
    box-shadow: var(--w-shadow-xs, 0 1px 2px rgba(16, 18, 27, .05));
    transition: border-color var(--w-duration-fast, .15s) var(--w-ease-out, ease),
                box-shadow var(--w-duration-fast, .15s) var(--w-ease-out, ease);
}

.slw-aviso:focus-within {
    border-color: var(--w-border-focus, #4f46e5);
    box-shadow: var(--w-shadow-md, 0 6px 18px rgba(16, 18, 27, .1));
}

/* Cartão desligado fica visivelmente apagado: numa grade de quatro, saber quais
   estão no ar precisa ser questão de relance. */
.slw-aviso:not(.is-ligado) .slw-aviso__icone { filter: grayscale(1); opacity: .55; }
.slw-aviso.is-ligado { border-color: color-mix(in srgb, var(--w-success, #16a34a) 35%, transparent); }

.slw-aviso__topo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .8rem;
}

.slw-aviso__icone {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--w-radius-md, 12px);
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.slw-aviso__icone--criado { color: var(--w-token-emerald, #059669); background: var(--w-token-emerald-bg, #d1fae5); }
.slw-aviso__icone--nao_confirmado { color: var(--w-token-amber, #b45309); background: var(--w-token-amber-bg, #fef3c7); }
.slw-aviso__icone--falta { color: var(--w-token-rose, #be123c); background: var(--w-token-rose-bg, #ffe4e6); }
.slw-aviso__icone--cancelado { color: var(--w-token-slate, #475569); background: var(--w-token-slate-bg, #e2e8f0); }

.slw-aviso__titulo { min-width: 0; }

/* `text-wrap: balance` reparte as linhas do título em vez de deixar uma palavra
   sozinha embaixo; `nowrap` seria pior, cortaria. */
.slw-aviso__titulo h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--w-text-primary, #171a21);
    text-wrap: balance;
}

.slw-aviso__titulo p {
    margin: .25rem 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--w-text-secondary, #5b6172);
}

/* O interruptor do cartão. */
.slw-aviso__chave {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.slw-aviso__chave input { position: absolute; opacity: 0; width: 0; height: 0; }

.slw-aviso__trilho {
    position: relative;
    width: 2.4rem;
    height: 1.35rem;
    flex: none;
    border-radius: var(--w-radius-full, 999px);
    background: var(--w-gray-300, #d3d6df);
    transition: background var(--w-duration-normal, .2s) var(--w-ease-out, ease);
}

.slw-aviso__trilho::after {
    content: '';
    position: absolute;
    top: .17rem;
    left: .17rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--w-gray-0, #fff);
    box-shadow: 0 1px 2px rgba(16, 18, 27, .3);
    transition: transform var(--w-duration-normal, .2s) var(--w-ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}

.slw-aviso__chave input:checked + .slw-aviso__trilho { background: var(--w-success, #16a34a); }
.slw-aviso__chave input:checked + .slw-aviso__trilho::after { transform: translateX(1.05rem); }
.slw-aviso__chave input:focus-visible + .slw-aviso__trilho { outline: 2px solid var(--w-border-focus, #4f46e5); outline-offset: 2px; }

.slw-aviso__estado {
    font-size: .78rem;
    font-weight: 700;
    color: var(--w-text-secondary, #5b6172);
}

.slw-aviso__chave input:checked ~ .slw-aviso__estado { color: var(--w-success-fg, #166534); }

.slw-aviso__rotulo {
    display: block;
    margin: 0;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--w-text-tertiary, #7a8194);
}

.slw-aviso textarea {
    width: 100%;
    resize: vertical;
    min-height: 7rem;
    font-size: .88rem;
    line-height: 1.55;
}

/* --- Anexo do aviso ------------------------------------------------------ */

.slw-anexo {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .85rem;
    border-radius: var(--w-radius-md, 12px);
    border: 1px dashed var(--w-border, #d8dbe4);
    background: var(--w-surface-sunken, #f4f5f9);
}

.slw-anexo__topo {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--w-text-tertiary, #7a8194);
}

.slw-anexo small {
    font-size: .74rem;
    line-height: 1.45;
    color: var(--w-text-tertiary, #7a8194);
}

.slw-anexo__atual {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem;
    border-radius: var(--w-radius-sm, 8px);
    background: var(--w-surface, #fff);
    border: 1px solid var(--w-border-subtle, #e5e7eb);
}

.slw-anexo__atual img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--w-radius-sm, 8px);
    flex: none;
}

.slw-anexo__icone {
    width: 3rem;
    height: 3rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--w-radius-sm, 8px);
    background: var(--w-accent-subtle, #eceafb);
    color: var(--w-accent, #130a78);
}

.slw-anexo__nome {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8rem;
    color: var(--w-text-secondary, #5b6172);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slw-anexo__remover {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-size: .74rem;
    font-weight: 600;
    color: var(--w-danger, #dc2626);
    cursor: pointer;
    white-space: nowrap;
}

.slw-anexo__erro {
    font-size: .78rem;
    color: var(--w-danger-fg, #991b1b);
}

.slw-aviso__acoes { display: flex; justify-content: flex-end; margin-top: auto; }

.slw-salvar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: none;
    border-radius: var(--w-radius-md, 12px);
    padding: .6rem 1.2rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--w-accent-contrast, #fff);
    background: var(--w-accent, #130a78);
    cursor: pointer;
}

.slw-salvar:hover { background: var(--w-accent-hover, #1b0fa0); }

/* --- Janela do código QR ------------------------------------------------- */

.slw-qr-corpo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
}

.slw-qr {
    width: 15rem;
    height: 15rem;
    display: grid;
    place-items: center;
    border-radius: var(--w-radius-lg, 16px);
    /* A imagem do QR já vem com fundo branco do serviço; a moldura acompanha a
       superfície do tema. */
    background: var(--w-surface, #fff);
    border: 1px solid var(--w-border, #d8dbe4);
    padding: .6rem;
}

.slw-qr img { width: 100%; height: 100%; object-fit: contain; }

.slw-qr__espera { font-size: .84rem; color: var(--w-text-tertiary, #7a8194); text-align: center; }

@media (max-width: 720px) {
    .slw-heroi { grid-template-columns: minmax(0, 1fr); }
    .slw-heroi__acoes { min-width: 0; }
    .slw-qr-corpo { grid-template-columns: minmax(0, 1fr); }
    .slw-qr { width: 100%; height: auto; aspect-ratio: 1; }
}

/* --- Moldura da página --------------------------------------------------- */

.slw-wrap {
    /* Largura inteira: o teto fixo deixava faixa vazia dos dois lados num
       monitor largo. A calha lateral é da página, e somá-la aqui dobrava a
       margem. */
    max-width: none;
    padding: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.slw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.slw-eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--w-accent, #130a78);
}

.slw-titulo {
    margin: .2rem 0 .35rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--w-text-primary, #171a21);
}

.slw-sub {
    margin: 0;
    max-width: 46rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--w-text-secondary, #5b6172);
}

.slw-avisos-secao { display: flex; flex-direction: column; gap: 1.1rem; }

/* --- Recibo dos disparos ------------------------------------------------- */

.slw-recibo {
    border: 1px solid var(--w-border-subtle, #e5e7eb);
    border-radius: var(--w-radius-lg, 16px);
    background: var(--w-surface, #fff);
    padding: 1.25rem;
    box-shadow: var(--w-shadow-xs, 0 1px 2px rgba(16, 18, 27, .05));
}

.slw-recibo__topo h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--w-text-primary, #171a21);
}

.slw-recibo__topo p {
    margin: .2rem 0 1rem;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--w-text-secondary, #5b6172);
}

/* As abas do recibo: o mesmo desenho da trilha do topo, em tamanho menor —
   são abas dentro de um cartão, não navegação de página. */
.slw-recibo__abas {
    display: flex;
    gap: .3rem;
    padding: .25rem;
    margin-bottom: .9rem;
    border-radius: var(--w-radius-full, 999px);
    background: var(--w-surface-sunken, #f4f5f9);
    width: fit-content;
    max-width: 100%;
}

.slw-recibo__abas a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    border-radius: var(--w-radius-full, 999px);
    font-size: .84rem;
    font-weight: 600;
    color: var(--w-text-secondary, #5b6172);
    text-decoration: none;
    white-space: nowrap;
}

.slw-recibo__abas a.is-ativa {
    background: var(--w-surface, #fff);
    color: var(--w-text-primary, #171a21);
    box-shadow: var(--w-shadow-sm, 0 1px 2px rgba(16, 18, 27, .08));
}

.slw-recibo__conta {
    padding: 0 .45rem;
    border-radius: var(--w-radius-full, 999px);
    font-size: .72rem;
    font-weight: 800;
    color: var(--w-text-secondary, #5b6172);
    background: var(--w-surface-hover, #e9ebf1);
}

/* Contagem de falha em vermelho: é o número que pede ação. */
.slw-recibo__conta.is-alerta {
    color: var(--w-danger-fg, #991b1b);
    background: var(--w-danger-bg, #fee2e2);
}

.slw-recibo__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .9rem;
}

.slw-btn--enxuto { padding: .5rem .9rem; font-size: .82rem; }

.slw-recibo__vazio {
    margin: 0;
    padding: 1.4rem;
    text-align: center;
    border-radius: var(--w-radius-md, 12px);
    background: var(--w-surface-sunken, #f4f5f9);
    font-size: .85rem;
    color: var(--w-text-tertiary, #7a8194);
}

.slw-recibo__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }

/* Uma linha por envio: selo, quem, quando — e o motivo ocupando a largura toda
   quando existe. Grade, e não flex, para as colunas se alinharem entre linhas
   mesmo com nomes de tamanhos diferentes. */
.slw-recibo__linha {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .65rem .8rem;
    border-radius: var(--w-radius-md, 12px);
    border: 1px solid var(--w-border-subtle, #e5e7eb);
    background: var(--w-surface, #fff);
}

.slw-recibo__selo {
    justify-self: start;
    padding: .18rem .55rem;
    border-radius: var(--w-radius-full, 999px);
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.slw-recibo__selo--ok { color: var(--w-success-fg, #166534); background: var(--w-success-bg, #dcfce7); }
.slw-recibo__selo--erro { color: var(--w-danger-fg, #991b1b); background: var(--w-danger-bg, #fee2e2); }
.slw-recibo__selo--espera { color: var(--w-warning-fg, #92400e); background: var(--w-warning-bg, #fef3c7); }
.slw-recibo__selo--info { color: var(--w-info-fg, #1e40af); background: var(--w-info-bg, #dbeafe); }
.slw-recibo__selo--neutro { color: var(--w-text-secondary, #5b6172); background: var(--w-surface-hover, #e9ebf1); }

.slw-recibo__quem { min-width: 0; }

.slw-recibo__quem strong {
    display: block;
    font-size: .86rem;
    color: var(--w-text-primary, #171a21);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slw-recibo__quem small {
    font-size: .76rem;
    color: var(--w-text-tertiary, #7a8194);
    font-variant-numeric: tabular-nums;
}

.slw-recibo__quando {
    font-size: .78rem;
    color: var(--w-text-tertiary, #7a8194);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* O motivo ocupa a linha inteira: é texto de erro, e cortado não serve. */
.slw-recibo__motivo {
    grid-column: 1 / -1;
    padding-top: .45rem;
    border-top: 1px dashed color-mix(in srgb, var(--w-danger, #dc2626) 25%, transparent);
    font-size: .78rem;
    line-height: 1.45;
    color: var(--w-danger-fg, #991b1b);
}

/* Paginação do Laravel, centralizada e sem estourar no celular. */
.slw-recibo__paginacao {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.slw-recibo__paginacao nav { display: flex; justify-content: center; }
.slw-recibo__paginacao .pagination { margin: 0; flex-wrap: wrap; justify-content: center; }

@media (max-width: 560px) {
    .slw-recibo__linha { grid-template-columns: minmax(0, 1fr) auto; }
    .slw-recibo__selo { grid-column: 1 / -1; }
}