/* O diálogo "Criar alerta" e o seletor "Onde" (regiões e bairros): o mapa (partials/alerta-dialogo) e a página do
   alerta que o link do e-mail abre (subscribe-confirmed). Saiu de explore.css em 06/11/2026 para valer nas duas. */
    .alerta-inline__resumo { margin: 0 0 .6rem; font-size: .84rem; color: var(--muted); line-height: 1.35; }

    /* O diálogo do alerta (partials/alerta-dialogo). Acima do painel do detalhe (60) e do aviso de consentimento;
       altura máxima = tela − 96 px, topo e pé fixos, só o meio rola (c1-design). */
    .alerta-dlg { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; }
    .alerta-dlg__fundo { position: absolute; inset: 0; background: rgba(15, 23, 42, .32); }
    .alerta-dlg__caixa {
        position: relative; display: flex; flex-direction: column; width: min(440px, calc(100vw - 32px));
        max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
        background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
    }
    .alerta-dlg__topo { display: flex; align-items: flex-start; gap: .5rem; padding: 1rem 1rem .25rem; }
    .alerta-dlg__titulo { margin: 0; flex: 1; font-size: 1rem; font-weight: 750; line-height: 1.3; text-wrap: balance; }
    .alerta-dlg__x {
        flex-shrink: 0; width: 36px; height: 36px; border: 0; background: none; color: var(--muted);
        font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 8px;
    }
    .alerta-dlg__x:hover { color: var(--text); background: var(--bg); }
    .alerta-dlg__form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
    .alerta-dlg__meio { padding: .5rem 1rem 1rem; overflow-y: auto; min-height: 0; flex: 1; }
    .alerta-dlg__pe { padding: .75rem 1rem 1rem; border-top: 1px solid var(--border); }
    /* "Onde": botão de linha inteira em duas partes (rótulo pequeno em cima, o lugar embaixo, até 2 linhas). */
    .alerta-onde {
        display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: .5rem;
        width: 100%; min-height: 56px; padding: .45rem .75rem; text-align: left; cursor: pointer;
        background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font: inherit;
    }
    .alerta-onde:hover { border-color: var(--text); }
    .alerta-onde__rotulo { grid-column: 1; font-size: .75rem; color: var(--muted); }
    .alerta-onde__valor { grid-column: 1; font-size: .94rem; font-weight: 700; line-height: 1.3; }
    .alerta-onde__seta { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.4rem; color: var(--muted); }
    .alerta-onde__sugestao {
        margin-top: .5rem; min-height: 36px; padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: .84rem;
        background: none; color: var(--text); border: 1px dashed var(--border); border-radius: 999px;
    }
    .alerta-onde__pronto { width: 100%; min-height: 40px; }
    .alerta-onde-lista__busca {
        width: 100%; min-height: 40px; margin-bottom: .5rem; padding: .45rem .65rem; font: inherit; font-size: .9rem;
        background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
    }
    .alerta-onde-regiao {
        display: flex; align-items: center; gap: .5rem; min-height: 40px; border-bottom: 1px solid var(--border);
    }
    .alerta-onde-regiao__marca, label.alerta-onde-regiao { display: flex; align-items: center; gap: .55rem; flex: 1; cursor: pointer; min-height: 40px; }
    .alerta-onde-regiao input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--text); flex-shrink: 0; }
    .alerta-onde-regiao__nome { font-weight: 650; font-size: .92rem; }
    .alerta-onde-regiao__abrir {
        flex-shrink: 0; min-height: 36px; min-width: 36px; padding: 0 .4rem; cursor: pointer; font: inherit; font-size: .84rem;
        background: none; border: 0; color: var(--muted); border-radius: 8px;
    }
    .alerta-onde-regiao__abrir[aria-expanded="true"] { color: var(--text); }
    .alerta-onde-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: .55rem 0 .7rem 1.6rem; }
    .alerta-onde-lista__achados { display: flex; flex-direction: column; gap: 6px; }
    .alerta-onde-chip {
        min-height: 32px; padding: .2rem .7rem; cursor: pointer; font: inherit; font-size: .84rem;
        background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 999px;
    }
    .alerta-onde-chip[aria-pressed="true"] { border: 2px solid var(--text); font-weight: 700; padding: calc(.2rem - 1px) calc(.7rem - 1px); }
    .alerta-onde-chip[aria-pressed="true"]::before { content: "✓ "; }
    .alerta-onde-chip--linha { text-align: left; border-radius: 8px; min-height: 40px; }
    /* Celular: folha que sobe de baixo, da altura do conteúdo (rev-design: a de tela cheia deixava ~630 px em branco
       entre "Onde" e o e-mail); o seletor "Onde" ocupa a altura toda. Pé fixo; alvos de 44–48 px. */
    @media (max-width: 900px) {
        .alerta-dlg { align-items: flex-end; }
        .alerta-dlg__caixa {
            width: 100%; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
            border-radius: 16px 16px 0 0; border: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        .alerta-dlg__caixa::before {
            content: ""; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--border);
        }
        .alerta-dlg__caixa--alta { height: calc(100vh - 48px); height: calc(100dvh - 48px); }
        .alerta-dlg__titulo { padding-right: 0; }
        .alerta-onde-regiao, .alerta-onde-regiao__marca, label.alerta-onde-regiao { min-height: 48px; }
        .alerta-onde-chip { min-height: 44px; }
        .alerta-onde-lista__busca, .alerta-onde__pronto { min-height: 44px; }
        .alerta-dlg__pe .alerta-inline__linha input, .alerta-dlg__pe .alerta-inline__linha .btn { min-height: 44px; }
    }
    .alerta-inline__linha { display: flex; gap: .4rem; }
    .alerta-inline__linha input {
        flex: 1 1 auto; min-width: 0; background: var(--bg); color: var(--text);
        border: 1px solid var(--border); border-radius: 8px; padding: .45rem .55rem; font-size: .85rem;
    }
    .alerta-inline__linha .btn { white-space: nowrap; flex-shrink: 0; }
    .alerta-inline__erro { margin: .45rem 0 0; font-size: .78rem; color: #dc2626; }
    .alerta-inline__ok { margin: 0 0 .5rem; font-size: .84rem; line-height: 1.4; }
    .alerta-inline__nota { margin: .5rem 0 0; font-size: .72rem; color: var(--muted); }
    .alerta-inline__fechar {
        border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer;
        border-radius: 8px; padding: .3rem .6rem; font-size: .78rem;
    }

    /* ---- 2026-11-06 (reunião alerta-teclado-e-espera, v1 + v2) ---------------------------------------------- */
    .alerta-dlg__caixa:focus { outline: none; }
    .alerta-dlg__caixa { overscroll-behavior: contain; }
    .alerta-dlg__meio { overscroll-behavior: contain; }
    /* A página por trás não rola enquanto o alerta está aberto (window.larbhAlertaTeclado.ligar). */
    html.alerta-aberto, html.alerta-aberto body { overflow: hidden; }
    .alerta-dlg__titulo-curto { display: none; }
    .alerta-onde-curta { display: none; }

    /* "Qualquer bairro" é ESTADO, não caixa (dono, 06/11: "fico clicando para desselecionar qualquer bairro"). */
    .alerta-onde-estado { display: flex; align-items: center; gap: .5rem; min-height: 44px; border-bottom: 1px solid var(--border); }
    .alerta-onde-estado__txt { margin: 0; font-size: .875rem; line-height: 1.35; color: var(--text); }
    .alerta-onde-estado__txt .muted { font-size: .8125rem; color: var(--muted); }
    .alerta-onde-estado__rotulo { flex: 1; min-width: 0; font-size: .875rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .alerta-onde-estado__limpar {
        flex-shrink: 0; min-width: 64px; min-height: 44px; padding: 0 .5rem; cursor: pointer; font: inherit; font-size: .875rem;
        font-weight: 650; background: none; border: 0; color: var(--text); text-decoration: underline; text-underline-offset: 3px; border-radius: 8px;
    }
    .alerta-onde-fora { display: flex; flex-wrap: wrap; gap: 8px; padding: .55rem 0 .7rem; border-bottom: 1px solid var(--border); }

    /* A espera da confirmação: o e-mail numa caixa própria, "Trocar e-mail" ao lado; nenhum botão cheio (a ação
       principal está no e-mail). "Não quero este alerta" é o terceiro nível: link cinza com área de 44 px. */
    .alerta-espera { display: flex; flex-direction: column; gap: .6rem; }
    .alerta-espera__intro { margin: 0; font-size: .875rem; color: var(--muted); }
    /* Fundo branco (o cinza parecia campo de digitar) e o e-mail inteiro, em até 2 linhas; "Trocar e-mail" desce
       para a linha de baixo quando o e-mail não cabe ao lado (rev-uiux). */
    .alerta-espera__caixa {
        display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-height: 44px; padding: .4rem .4rem .4rem .75rem;
        background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    }
    .alerta-espera__email { flex: 1 1 12rem; min-width: 0; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
    .alerta-espera__email > span { overflow-wrap: anywhere; }
    /* E-mail que não cabe numa linha ao lado do botão: o botão desce, alinhado à esquerda (rev-uiux). */
    .alerta-espera__caixa--longo .alerta-espera__email { flex-basis: 100%; }
    .alerta-espera__trocar {
        flex-shrink: 0; min-height: 44px; padding: 0 .8rem; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 650;
        background: var(--panel); color: var(--text); border: 1px solid var(--text); border-radius: 10px;
    }
    .alerta-espera__trocar:disabled, .alerta-espera__desistir:disabled { opacity: .55; cursor: progress; }
    .alerta-espera__texto { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--muted); }
    .alerta-espera__desistir {
        align-self: flex-start; min-height: 44px; padding: 0; cursor: pointer; font: inherit; font-size: .8125rem;
        background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
    }
    .alerta-espera__fim { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.45; }

    @media (max-width: 900px) {
        /* 16 px nos campos: o Safari do iPhone dá zoom no foco abaixo disso. */
        .alerta-dlg__pe .alerta-inline__linha input, .alerta-onde-lista__busca { font-size: 16px; }

        /* Teclado aberto (window.larbhAlertaTeclado põe a classe e o top/height da área visível): a folha vai do topo
           visível + 8 px até o teclado; título curto em 1 linha; resumo + Onde viram UMA linha de 44 px; somem a
           sugestão e a nota. Conta do c1-design: 20 + 44 + 44 + 8 + 72 ≈ 190 px, cabe em 364 sem rolar. */
        /* Da altura do conteúdo, encostada no teclado (esticada até o topo deixava um vão vazio no meio); o teto é a
           área visível − 8 px. O passo "Onde" (lista longa) ocupa a altura toda. */
        .alerta-dlg--teclado .alerta-dlg__caixa { max-height: calc(100% - 8px); }
        .alerta-dlg--teclado .alerta-dlg__caixa--alta { height: calc(100% - 8px); }
        .alerta-dlg--teclado .alerta-dlg__caixa::before { margin-top: 8px; }
        .alerta-dlg--teclado .alerta-dlg__topo { padding: .5rem 1rem 0; align-items: center; }
        .alerta-dlg--teclado .alerta-dlg__titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .alerta-dlg--teclado .alerta-dlg__titulo-longo { display: none; }
        .alerta-dlg--teclado .alerta-dlg__titulo-curto { display: inline; }
        .alerta-dlg--teclado .alerta-inline__resumo,
        .alerta-dlg--teclado .alerta-onde,
        .alerta-dlg--teclado .alerta-onde__sugestao,
        .alerta-dlg--teclado .alerta-inline__nota { display: none; }
        .alerta-dlg--teclado .alerta-dlg__meio { padding-top: .25rem; padding-bottom: .5rem; }
        .alerta-dlg--teclado .alerta-onde-curta {
            display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 .75rem; gap: 0; cursor: pointer;
            font: inherit; font-size: .875rem; text-align: left; color: var(--text);
            background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
        }
        .alerta-onde-curta__fixo { flex-shrink: 0; white-space: pre; color: var(--muted); }
        .alerta-onde-curta__onde { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
        .alerta-onde-curta__seta { flex-shrink: 0; margin-left: .4rem; font-size: 1.2rem; color: var(--muted); }
    }