/* ============================================================================
 * Aviso de abertura: notificação não lida em destaque na tela do aplicativo
 *
 * Prefixo `avab-` para não colidir com as classes `notif-*` do sininho, que
 * seguem em uso. Herda os tokens do aplicativo (--brand-primary, --card,
 * --text, --border) para acompanhar tema claro e escuro sem duplicar paleta.
 *
 * Regras que existem por motivo, não por estética:
 *   - `min-width: 0` em toda coluna de flex que recebe texto. Sem isso o
 *     conteúdo respeita o min-content e a linha estoura no celular de 390px.
 *   - `overflow-wrap: anywhere` no corpo: título de aviso vem do ERP e pode
 *     trazer palavra longa ou URL sem espaço.
 *   - `env(safe-area-inset-bottom)` no rodapé: em iPhone com barra de gestos
 *     o botão principal ficava debaixo dela.
 *   - Área de toque: 48px de altura mínima nos botões de ação.
 * ==========================================================================*/

/* O token `--z-modal` vale 900 neste aplicativo, mas NENHUM modal real usa esse
   valor: `.modal-overlay` do app.css fixa 1000, e o botão flutuante do
   SeuCenoura (`.sc-fab`, criado para todo paciente logado) fica em 998. Com 900
   o cartão nascia ABAIXO do botão flutuante, que cobria "Ver e marcar como
   visto" e "Ver depois" e ainda roubava o toque (medido em 390px: o
   elementFromPoint no centro do botão flutuante devolvia o mascote). Repete-se
   aqui o 1000 do resto do aplicativo. */
.avab-modal {
    z-index: 1000;
}

.avab-modal .avab-content {
    width: 100%;
    max-width: 460px;
    max-height: 88dvh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ------------------------------------------------------------------- topo */

.avab-topo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px 16px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    min-width: 0;
}

.avab-etiqueta {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand-primary-dark, #123c30);
    overflow-wrap: anywhere;
}

.avab-etiqueta i,
.avab-etiqueta [data-lucide]{
    font-size: 12px;
}

.avab-contador {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    background: var(--bg-alt, #f1f5f9);
    border-radius: 999px;
    padding: 3px 9px;
}

.avab-contador:empty {
    display: none;
}

.avab-fechar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.avab-fechar:hover {
    background: var(--bg-alt, #f1f5f9);
}

/* ------------------------------------------------------------------ corpo */

.avab-corpo {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

.avab-corpo:focus {
    outline: none;
}

.avab-cabeca {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.avab-icone {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    /* `--brand-tint` do aplicativo resolve para slate (#f1f5f9), não para verde:
       medido em tela, o chip do ícone saía cinza. A primeira declaração é o tint
       verde da marca; a segunda deriva o tom do primário do tenant onde há
       suporte a color-mix, e é ignorada nos navegadores antigos. */
    background: #e8f7f3;
    background: color-mix(in srgb, var(--brand-primary, #1d5c47) 14%, #ffffff);
    color: var(--brand-primary-dark, #123c30);
    font-size: 17px;
}

.avab-cabeca-txt {
    flex: 1 1 auto;
    min-width: 0;
}

.avab-titulo {
    margin: 0 0 3px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text, #1e293b);
    overflow-wrap: anywhere;
}

.avab-quando {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #64748b);
}

.avab-texto {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary, #475569);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- rodapé */

.avab-rodape {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border, #e2e8f0);
    background: var(--card, #fff);
    min-width: 0;
}

.avab-btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background .18s ease, opacity .18s ease, border-color .18s ease;
}

.avab-btn span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.avab-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.avab-btn--visto {
    background: var(--brand-primary, #1d5c47);
    color: #fff;
}

.avab-btn--visto:hover:not(:disabled) {
    background: var(--brand-primary-dark, #123c30);
}

.avab-btn--abrir {
    background: #e8f7f3;
    background: color-mix(in srgb, var(--brand-primary, #1d5c47) 14%, #ffffff);
    color: var(--brand-primary-darker, #0c2a21);
    border-color: var(--brand-pastel, #87C9B7);
}

.avab-btn--abrir[hidden] {
    display: none;
}

.avab-btn--depois {
    flex: 0 0 auto;
    background: transparent;
    color: var(--text-muted, #64748b);
    border-color: var(--border, #e2e8f0);
    font-weight: 600;
}

.avab-todos {
    flex: 1 1 100%;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--brand-primary-dark, #123c30);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.avab-todos[hidden] {
    display: none;
}

.avab-btn:focus-visible,
.avab-todos:focus-visible,
.avab-fechar:focus-visible {
    outline: 2px solid var(--brand-primary-dark, #123c30);
    outline-offset: 2px;
}

body.avab-modal-aberto {
    overflow: hidden;
}

/* ----------------------------------------------------------------- desktop */

@media (min-width: 561px) {
    .avab-modal {
        align-items: center;
    }

    .avab-modal .avab-content {
        border-radius: 18px;
    }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 560px) {
    .avab-modal .avab-content {
        max-width: 100%;
        max-height: 90dvh;
    }

    .avab-titulo {
        font-size: 16px;
    }

    .avab-texto {
        font-size: 14px;
    }

    .avab-rodape {
        flex-direction: column;
        align-items: stretch;
    }

    .avab-btn {
        width: 100%;
    }

    .avab-btn--depois {
        flex: 1 1 auto;
    }
}

/* -------------------------------------------------------------- tema escuro */

.theme-dark .avab-content,
.theme-dark .avab-rodape {
    background: var(--card, #1e293b);
}

.theme-dark .avab-icone {
    background: rgba(29, 92, 71, .18);
    color: var(--brand-pastel, #87C9B7);
}

.theme-dark .avab-contador {
    background: rgba(148, 163, 184, .16);
}

.theme-dark .avab-etiqueta,
.theme-dark .avab-todos {
    color: var(--brand-pastel, #87C9B7);
}

.theme-dark .avab-btn--abrir {
    background: rgba(29, 92, 71, .18);
    color: var(--brand-pastel, #87C9B7);
    border-color: rgba(135, 201, 183, .45);
}

.theme-dark .avab-fechar:hover {
    background: rgba(148, 163, 184, .16);
}

/* ------------------------------------------------------- movimento reduzido */

@media (prefers-reduced-motion: reduce) {
    .avab-modal .avab-content {
        animation: none;
    }
}