/* ===================================================================
   PÁGINA DE ESTADO — "em homologação"  ·  frontMarketplace
   (SP20-006 · SP20-007 · SP20-056)

   Porte do styleStatePages.css do mainGateway, para que o card de "em
   homologação" seja O MESMO nos dois serviços. Só os seletores de header e
   footer mudam: o gateway usa `.site-header`/`.footer`, e aqui são o
   <header class="navbar"> e o <footer>, ambos filhos diretos do <body>.

   Mantenha os dois arquivos em sincronia ao mexer no card.
   =================================================================== */

/* ---------- 1. A página cabe em uma viewport ---------- */

body.page-centered {
    display: flex;
    flex-direction: column;
    /* dvh evita o "pulo" quando a barra de endereço do iOS aparece/some */
    min-height: 100vh;
    min-height: 100dvh;
}

/* Header e footer mantêm a altura natural. Os seletores são explícitos (e
   não `:first-child`/`:last-child`) porque o <body> também tem <script> e
   <link> soltos — que não são itens flex, mas cuja posição não é estável. */
body.page-centered > header,
body.page-centered > footer {
    flex: 0 0 auto;
}

/* A faixa do meio é a única que cresce, e centraliza o card nos dois eixos.
   O GRADIENTE mora aqui, e não em .main-container-index: como o container
   deixou de ter 100vh, ele passou a medir só a altura do card — se o
   gradiente continuasse nele, sobrariam faixas brancas acima e abaixo. Na
   faixa, o gradiente cobre todo o espaço entre header e footer, e como
   termina em branco encontra o footer (que é branco) sem emenda. */
body.page-centered > #content {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    /* sem isto um item flex não encolhe abaixo do conteúdo e o scroll volta */
    min-height: 0;
    /* último recurso: a rolagem fica aqui dentro, nunca na página */
    overflow-y: auto;
    /* A última parada acompanha a cor do footer para não sobrar emenda: no
       gateway o footer é branco; aqui ele é `.bg-darkBlue`, que vale #FFFFFF
       no tema claro (o fallback) e #1e1e1e no escuro — dark.css declara a
       variável. */
    background: linear-gradient(to bottom,
        #004aad, #0b93f2, var(--mtm-state-bg-end, #ffffff));
}

/* ---------- 1.1 A drawer do marketplace ---------- */

/* Diferença estrutural em relação ao gateway: aqui o index embrulha o
   conteúdo num `.d-flex` com a drawer ao lado. Sem estas regras o wrapper
   encolhe até o tamanho do card (o `place-items: center` acima) e o card
   sai do centro, encostado na drawer. */
body.page-centered > #content > .d-flex {
    width: 100%;
    height: 100%;
    align-items: stretch;
}

/* O placeholder da drawer tem `min-height: 100vh` inline no index — o que
   sozinho já estoura a viewport (header + 100vh + footer) e devolve o scroll
   que a página de estado justamente elimina. Inline só cede a !important. */
body.page-centered #flex-drawer-sidebar {
    min-height: 0 !important;
}

/* A coluna de conteúdo é quem centraliza o card, já descontada a faixa da
   drawer — assim o card fica no meio do espaço que sobra, não da viewport. */
body.page-centered > #content > .d-flex > .flex-grow-1 {
    display: grid;
    place-items: center;
    min-width: 0;
}

/* Anula o `min-height: 100vh` de .main-container-index (declarado aqui e em
   styleResponsiveBase.css). A especificidade de `body.page-centered ...`
   (0,2,1) vence a de `.main-container-index` (0,1,0) independentemente da
   ordem de carga, então não é preciso !important.

   `background: none` porque o gradiente subiu para a faixa (acima); manter
   os dois pintaria o gradiente duas vezes, uma delas comprimido. */
body.page-centered .main-container-index {
    min-height: 0;
    width: 100%;
    background: none;
    /* respira conforme a altura disponível, sem nunca colar nas bordas */
    padding: clamp(16px, 4vh, 40px) 20px;
}

/* ---------- 2. O card ---------- */

#cardError {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* 30rem ≈ 480px: largura em que o título fecha em duas linhas e a
       mensagem fica na faixa confortável de leitura */
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    padding: clamp(28px, 4vh, 44px) clamp(20px, 5vw, 40px);
    background-color: #ffffff !important;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 40, 100, 0.18);
}

/* ---------- 2.1 Por que há `!important` daqui para baixo ----------

   Diferença em relação ao gateway: os temas do marketplace (light.css e
   dark.css) pintam SELETORES DE ELEMENTO com `!important` —
   `h1, h2, .mb-4 { color: #FFFFFF !important }` e um grupo com
   `p, a, div, span, ... { color: #1e1e1e !important }`, mais
   `a, .btn-primary, ... { background-color: #FFFFFF !important }`.

   Como `!important` vence qualquer especificidade, sem repetir o
   `!important` aqui o card saía com o título BRANCO sobre fundo branco
   (invisível), o selo âmbar cinza e os dois botões brancos e iguais — o
   primário perdia o azul sólido. Ver a homologação da SP20-056.
   ------------------------------------------------------------------ */

/* ---------- 3. Selo de estado (o elemento de destaque) ---------- */

.error-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
}

.error-badge--danger {
    color: #dc3545 !important;
    background-color: #fdecee !important;
    /* anel externo da própria cor, em opacidade baixa */
    box-shadow: 0 0 0 8px rgba(220, 53, 69, 0.10);
}

.error-badge--pending {
    color: #b06d00 !important;
    background-color: #fdf3e2 !important;
    box-shadow: 0 0 0 8px rgba(240, 160, 32, 0.14);
}

/* ---------- 4. Texto ---------- */

.error-title {
    margin: 0 0 10px 0;
    font-family: "Lato", sans-serif;
    /* acompanha a altura da tela: nunca estoura, nunca fica minúsculo */
    font-size: clamp(1.375rem, 3.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #0b2a5b !important;
    overflow-wrap: break-word;
}

.error-message {
    /* margin-bottom vem do gap com .error-actions */
    margin: 0 0 24px 0;
    /* limita a linha de leitura sem depender da largura do card */
    max-width: 34ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #5c6b82 !important;
}

/* ---------- 5. Ações ---------- */

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.error-actions a,
.error-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 44px = alvo de toque acessível */
    min-height: 44px;
    padding: 11px 22px;
    border: 2px solid #004aad !important;
    border-radius: 10px;
    background-color: #004aad !important;
    color: #ffffff !important;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    /* o rótulo não vaza mais para fora do botão */
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* O rótulo e o ícone vivem em <span> e <i> dentro do <a>, e o tema pinta
   `span` com `!important` — que vence a HERANÇA da cor do botão. Sem isto o
   "Open the tutorial" saía escuro sobre o azul sólido. */
.error-actions a span,
.error-actions a i,
.error-actions__btn span,
.error-actions__btn i {
    color: inherit !important;
}

.error-actions a:hover,
.error-actions__btn:hover {
    background-color: #003a86 !important;
    border-color: #003a86 !important;
    color: #ffffff !important;
}

/* O seletor precisa ser tão específico quanto `.error-actions a` (0,1,1), que
   define o fundo azul — com `.error-actions__btn--secondary` sozinho (0,1,0) o
   botão secundário saía azul sólido, idêntico ao primário. */
.error-actions .error-actions__btn--secondary {
    background-color: transparent !important;
    color: #004aad !important;
}

.error-actions .error-actions__btn--secondary:hover {
    background-color: #004aad !important;
    color: #ffffff !important;
}

/* Foco visível por teclado. */
.error-actions__btn:focus-visible {
    outline: 3px solid #0b93f2;
    outline-offset: 2px;
}

/* ---------- 6. Telas estreitas ---------- */

@media (max-width: 480px) {
    .error-badge {
        width: 56px;
        height: 56px;
        margin-bottom: 16px;
        font-size: 24px;
    }

    .error-message {
        margin-bottom: 20px;
    }

    /* Botões um por linha, largura cheia: em 375px dois lado a lado
       forçariam a quebra do rótulo. */
    .error-actions {
        flex-direction: column;
    }

    .error-actions__btn {
        width: 100%;
    }
}

/* Telas muito baixas (celular deitado): comprime a coluna para caber sem
   precisar rolar. */
@media (orientation: landscape) and (max-height: 520px) {
    #cardError {
        padding: 18px 24px;
    }

    .error-badge {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
        font-size: 20px;
        box-shadow: none; /* o anel come altura útil aqui */
    }

    .error-message {
        margin-bottom: 14px;
    }
}
