/* ===== Tour guiado (coach-marks) — destaque com brilho + popover explicativo ===== */

/* Chip circular opaco do botão ⓘ do guia (GuiaButton): sinaliza "isto é clicável" em
   qualquer header — sem o chip, um ícone outlined solto se perde visualmente no fundo.
   Modo claro: chip na cor primária translúcida. Modo Hero: chip branco translúcido
   sobre header teal/gradiente (a classe --hero troca só a cor, mesma silhueta). */
.guia-btn-chip {
    background: rgba(var(--mud-palette-primary-rgb), 0.12) !important;
}

.guia-btn-chip--hero {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

/* Beacon do combo de guia: pulso no botão ⓘ até o 1º uso (chama atenção sem ser intrusivo).
   Reutilizável em qualquer tela — some quando a flag localStorage "<modulo>_guia_visto" fica true. */
.guia-beacon {
    animation: guia-beacon-pulse 1.6s ease-out infinite;
}

@keyframes guia-beacon-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Botão "Guia passo a passo" dentro de drawers/forms (GuiaLinkButton): espaçamento único. */
.guia-link-btn {
    margin-bottom: -8px;
}

/* Overlay transparente: apenas "trava" o tour e captura clique fora (avança).
   Não escurece a tela — o destaque é o brilho no próprio elemento. */
/* Modo interativo: o overlay não bloqueia o clique — o usuário preenche o campo em destaque
   e o tour avança apenas pelo botão "Próximo" do card. */
.tour-overlay--interativo {
    pointer-events: none;
}

.tour-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 4000;
    cursor: pointer;
}

/* Brilho colorido em volta do elemento-alvo (aplicado via JS). */
.tour-target-glow {
    position: relative;
    border-radius: 12px;
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent),
                0 0 26px 8px color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
    animation: tourPulse 1.6s ease-in-out infinite;
    transition: box-shadow .2s;
}

@keyframes tourPulse {
    0%, 100% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--mud-palette-primary) 26%, transparent),
                    0 0 18px 6px color-mix(in srgb, var(--mud-palette-primary) 42%, transparent);
    }
    50% {
        box-shadow: 0 0 0 9px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent),
                    0 0 34px 12px color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
    }
}

/* Card do popover (posicionado via style inline pelo componente). */
.tour-card {
    position: fixed;
    z-index: 4002;
    background: var(--mud-palette-surface);
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(0,0,0,0.28);
    padding: 16px 16px 10px;
    max-width: calc(100vw - 24px);
    animation: tourCardIn .18s ease-out;
}

@keyframes tourCardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tour-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 20px; }
.tour-card__icon { color: var(--mud-palette-primary); flex-shrink: 0; }
.tour-card__title { font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--mud-palette-text-primary); }
.tour-card__body { font-size: .9rem; line-height: 1.5; color: var(--mud-palette-text-secondary); margin-bottom: 12px; }
.tour-card__foot { display: flex; align-items: center; gap: 6px; }
.tour-card__count { font-size: .72rem; color: var(--mud-palette-text-disabled); }

.tour-card__close {
    position: absolute;
    top: 8px; right: 10px;
    background: none; border: none;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}
.tour-card__close:hover { color: var(--mud-palette-text-primary); }

/* ===== Popover de ajuda pontual (HelpHint) =====
   Mesma casca do card do tour, mas ancorado por MudPopover (sem overlay escuro nem navegação).
   O conteúdo reutiliza as classes tour-card__* acima. */
.mud-popover.help-card {
    width: 300px;
    max-width: calc(100vw - 24px);
    padding: 16px 16px 12px;
    background: var(--mud-palette-surface);
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(0,0,0,0.28);
    animation: tourCardIn .18s ease-out;
}

/* Sem cabeçalho (Label vazio) o corpo encosta no "×" — abre espaço à direita. */
.help-card > .tour-card__close + .tour-card__body { padding-right: 20px; }

/* HelpHint e HelpChip: centrado sob um gatilho perto da borda direita, o card vaza da tela — o
   MudPopover só corrige o vazamento pela esquerda. No celular ele ocupa a largura toda logo abaixo
   do gatilho (o top continua vindo do MudPopover, inclusive a virada para cima perto do rodapé). */
@media (max-width: 600px) {
    .mud-popover.help-card.mud-popover-open {
        left: 12px !important;
        right: 12px !important;
        width: auto;
    }
}

/* Gatilho: sem caixa de botão, só o "?" que acende no hover. */
.help-hint__btn {
    padding: 2px !important;
    min-width: 0 !important;
    opacity: 0.55;
    transition: opacity .15s ease;
}
.help-hint__btn:hover { opacity: 1; }
.help-hint__btn .mud-icon-root { font-size: 1rem !important; }
/* No toque o "?" de 20px é difícil de acertar: a margem negativa cresce a área sem mexer no layout. */
@media (pointer: coarse) {
    .help-hint__btn { padding: 12px !important; margin: -10px !important; }
}

/* ===== Passos dos wizards de onboarding (classes "*-onb-passo") =====
   BUG corrigido: cada passo era um container flex (`display:flex`) contendo o ícone + texto
   solto com <b>. Num flex container, CADA <b> e cada trecho de texto vira um flex-item
   independente — com o `gap`, o parágrafo quebrava em pedaços que sobem/descem e pareciam ter
   tabulações. Aqui restauramos o fluxo normal de texto: o passo vira bloco (texto corre e
   quebra como parágrafo) e o ícone é posicionado à esquerda com recuo pendente (hanging indent).

   O seletor usa `div[class$="-onb-passo"]` (tipo + atributo) de propósito: especificidade maior
   que a regra `.x-onb-passo` de cada componente, então sobrepõe sem !important e corrige todos os
   wizards de uma vez (Documentos, Prontuário, Financeiro, Hub, etc.) — inclusive os futuros. */
div[class$="-onb-passo"] {
    display: block;
    position: relative;
    padding-left: 26px;
}

div[class$="-onb-passo"] > .mud-icon-root {
    position: absolute;
    left: 0;
    top: 2px;
}

/* ===== Acoes do cabecalho de painel (AcaoPainel / AcaoPainelIcone) =====
   Mesma motivacao do .guia-btn-chip: antes cada pagina desenhava a sua, e a auditoria em 33
   paineis achou CINCO aparencias para TRES intencoes — e nenhuma delas separava a acao que a
   tela existe para oferecer das acoes de apoio e da navegacao. Ver AcaoPainelTipo.

   A SUPERFICIE repinta a acao, nao um parametro. O GuiaButton pede Hero="true" a mao e as
   paginas esquecem — aqui .base-panel__hero e um ancestral real, entao o CSS resolve sozinho:
   a mesma marcacao funciona sobre o gradiente teal e sobre fundo claro (corpo da pagina,
   HeaderContent do CrudListBase). Sem isso, metade dos botoes "Voltar" — que vivem em fundo
   claro — ficariam branco sobre branco. */
.acao-painel {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

/* ── Superficie CLARA (padrao) ──────────────────────────────────────────── */
.acao-painel--principal {
    background: var(--mud-palette-primary) !important;
    color: #fff !important;
}

.acao-painel--secundaria,
.acao-painel--voltar {
    background: transparent !important;
    color: var(--mud-palette-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
}

.acao-painel--secundaria:hover,
.acao-painel--voltar:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ── Sobre o gradiente teal do BasePanel ────────────────────────────────── */
/* Principal: o UNICO elemento opaco do hero — e por isso que ele vira o ponto focal.
   A tinta do texto vem de --painel-tinta, herdada de .base-panel__hero, que e onde a cor base
   do gradiente e definida. Cravar o hex aqui seria criar uma segunda fonte da verdade e deixar
   o botao para tras na proxima troca de marca. */
.base-panel__hero .acao-painel--principal {
    background: #fff !important;
    color: var(--painel-tinta, #11414B) !important;
}

.base-panel__hero .acao-painel--principal:hover {
    background: rgba(255, 255, 255, 0.88) !important;
}

/* Apoio e navegacao: vidro translucido — legivel sobre o gradiente sem disputar com a principal. */
.base-panel__hero .acao-painel--secundaria,
.base-panel__hero .acao-painel--voltar {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.base-panel__hero .acao-painel--secundaria:hover,
.base-panel__hero .acao-painel--voltar:hover {
    background: rgba(255, 255, 255, 0.26) !important;
}

.base-panel__hero .acao-painel--principal.mud-button-disabled {
    background: rgba(255, 255, 255, 0.55) !important;
    color: rgba(17, 65, 75, 0.55) !important;
}

.base-panel__hero .acao-painel--secundaria.mud-button-disabled,
.base-panel__hero .acao-painel--voltar.mud-button-disabled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Voltar: sempre a PRIMEIRA da fileira, venha na ordem que vier no markup. A consistencia de
   posicao e o que permite navegar entre modulos sem reprocurar o botao a cada tela — e ela nao
   pode depender de cada pagina lembrar de escrever o Voltar antes das outras acoes. */
.acao-painel--voltar {
    order: -1;
}

/* Sem rotulo (AcaoPainelIcone): quadrado, para o alvo nao virar um retangulo fino no toque. */
.acao-painel--icone {
    padding: 6px !important;
}

/* Mobile. A media query e LISTA OR de proposito: so largura deixaria o tablet (largo, mas de
   toque) com alvo de mouse. Regra do projeto — mobile e TOQUE, nao largura. O breakpoint
   acompanha o de .base-panel__actions (600px), que e quem manda os botoes quebrarem linha:
   se divergissem, existiria uma faixa de largura com botao pequeno ja quebrado em duas linhas. */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
    .acao-painel {
        /* 44px e o minimo de alvo de toque. Abaixo disso o dedo erra e acerta o vizinho — e no
           header do internamento o vizinho e "Encerrar". */
        min-height: 44px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* O ⓘ do guia divide a fileira com os .acao-painel mas nao e um deles: sem isto ficava um
       chip de 30px entre vizinhos de 44px — abaixo do alvo de toque e visivelmente desalinhado. */
    .guia-btn-chip {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* O rotulo nao pode quebrar em duas linhas: com .base-panel__actions em flex-wrap, uma
       quebra interna desalinha a altura de toda a fileira. Use LabelCurto para encurtar. */
    .acao-painel .mud-button-label {
        white-space: nowrap;
        font-size: 0.8125rem;
    }

    /* Icone sozinho: sem rotulo para dar largura, o alvo precisa dos 44px nos DOIS eixos. */
    .acao-painel--icone {
        min-width: 44px !important;
    }

    /* ── Dentro do hero do BasePanel: acao vira TILE QUADRADO ────────────────────────────
       Mesma linguagem (e as mesmas medidas) do AcaoQuadrada --compact, aplicada pela SUPERFICIE
       como todo o resto deste arquivo. No celular a pilha icone-sobre-rotulo e o que cabe: o
       botao deitado (icone AO LADO do rotulo) gasta ~80-125px cada e come a fileira em duas ou
       tres linhas. Quadradinho de 62px entra 4 por linha e nao precisa esticar para preencher —
       esticar era o que deformava o ⓘ redondo em oval. */
    .base-panel__hero .acao-painel {
        width: 58px;
        min-width: 58px !important;
        min-height: 58px !important;
        padding: 6px 4px !important;
        border-radius: 12px !important;
    }

    .base-panel__hero .acao-painel .mud-button-label {
        flex-direction: column;
        gap: 2px;
        /* Aqui a quebra em duas linhas e BEM-VINDA (rotulo embaixo do icone) — o
           `align-items: stretch` da fileira iguala a altura dos tiles da mesma linha. */
        white-space: normal;
        word-break: break-word;
        font-size: 0.62rem;
        line-height: 1.1;
    }

    .base-panel__hero .acao-painel .mud-button-icon-start {
        margin: 0;
    }

    /* Sem rotulo: o MESMO quadrado, so que vazio embaixo do icone. Deixa-lo menor que os
       vizinhos devolvia a fileira desalinhada que este bloco veio consertar. */
    .base-panel__hero .acao-painel--icone {
        width: 58px;
        min-width: 58px !important;
        min-height: 58px !important;
        padding: 6px !important;
    }

    /* O ⓘ do guia continua REDONDO — e o unico da fileira que nao e uma acao da tela, e a
       silhueta diferente e o que o separa das acoes. Tamanho fixo: nunca esticar (vira oval). */
    .base-panel__hero .guia-btn-chip {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        flex: 0 0 auto !important;
        align-self: center;
    }
}