/*!
 * Seletor de idioma — telas públicas.
 *
 * =============================================================================
 * DECISÕES QUE NÃO SÃO SÓ VISUAIS
 * =============================================================================
 * 1. **Canto superior direito.** É onde o usuário procura troca de idioma na
 *    web. Qualquer outro lugar custa uma busca.
 *
 * 2. **Sem bandeiras.** Bandeira representa PAÍS, não idioma. A bandeira da
 *    Espanha num usuário do México comunica "aqui é para espanhóis" — e a da
 *    Colômbia num usuário do México, o mesmo problema ao contrário. O rótulo é
 *    escrito no próprio idioma ("Português", "English", "Español"), que é
 *    reconhecível por quem fala.
 *
 * 3. **44px de altura mínima.** É o alvo de toque recomendado. Um seletor de
 *    32px numa tela de celular é um seletor que ninguém acerta.
 *
 * 4. **Contraste nos dois temas.** As telas de autenticação usam o tema padrão
 *    do sistema, que pode ser claro ou escuro. Por isso as cores vêm de
 *    variáveis do tema, com fallback explícito.
 */

.locale-selector {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 5000;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 12px;

    background: var(--card-bg, rgba(255, 255, 255, 0.94));
    color: var(--text-color, #1c1c1e);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    font-size: 13px;
    line-height: 1;
}

.locale-selector-icon {
    font-size: 14px;
    opacity: 0.75;
    pointer-events: none;
}

/* O rótulo textual existe para leitores de tela e para telas muito largas.
   Em telas estreitas ele some, mas o ícone e o próprio `<select>` continuam
   comunicando a função. */
.locale-selector-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.locale-selector-select {
    appearance: none;
    -webkit-appearance: none;

    min-height: 32px;
    padding: 0 22px 0 0;

    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;

    /* Seta desenhada em SVG para não depender de fonte de ícone. */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px 7px;
}

.locale-selector-select:focus-visible {
    outline: 2px solid var(--primary-color, #0a84ff);
    outline-offset: 2px;
    border-radius: 6px;
}

.locale-selector-submit {
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: var(--primary-color, #0a84ff);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Em telas estreitas o seletor encolhe e o texto do rótulo desaparece,
   mas o alvo de toque continua com 44px de altura. */
@media (max-width: 480px) {
    .locale-selector {
        top: 12px;
        right: 12px;
        padding: 0 10px;
        font-size: 12px;
    }
}

/* Telas internas não usam este seletor (o idioma é trocado no menu do usuário).
   A regra existe para o partial poder ser reutilizado sem quebrar a navegação
   fixa das telas autenticadas. */
body.has-fixed-header .locale-selector {
    position: absolute;
}

/* ---------------------------------------------------------------------------
 * TELAS JURÍDICAS (termos, privacidade, execução de ordens)
 *
 * O seletor é `position: fixed` no canto superior direito. Nessas telas o
 * documento ocupa quase toda a largura em celular, então o título passaria por
 * baixo dele. Em vez de mover o seletor (ele fica onde o usuário procura),
 * empurra-se o conteúdo para baixo o suficiente para os 44px de altura mais a
 * margem.
 *
 * A regra vem DEPOIS do `@media` acima de propósito: no celular a margem do
 * documento é reduzida para 16px, e a sobrescrita precisa vencer essa ordem.
 * ------------------------------------------------------------------------ */
.legal-page-body .legal-page {
    margin-top: 84px;
}

@media (max-width: 768px) {
    .legal-page-body .legal-page {
        margin-top: 76px;
    }
}