/* ==========================================================================
   css/componentes.css
   Fundação visual — O Caminho das Virtudes
   Design tokens (:root) e classes reutilizáveis.
   Carregado antes dos CSS de view para que os estilos de view possam
   sobrepor durante a migração gradual.
   ========================================================================== */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
    /* Cores — dourado */
    --cor-dourado-claro:    #ffd46a;
    --cor-dourado-medio:    #f0a01e;
    --cor-dourado-sombra:   #a8650e;
    --cor-dourado-borda:    #e8cc8a;

    /* Cores — superfície */
    --cor-creme:            rgba(255, 249, 237, 0.97);
    --cor-creme-solido:     #fff9ed;

    /* Cores — texto */
    --cor-texto:            #4d341c;
    --cor-texto-suave:      #7a6040;

    /* Cores — feedback */
    --cor-verde-ok:         #6fbf63;
    --cor-verde-escuro:     #2e7d32;
    --cor-vermelho-suave:   #c65b45;

    /* Cores — ação secundária */
    --cor-laranja:          #f5a623;
    --cor-laranja-sombra:   #b86b12;

    /* Cores — sistema */
    --cor-foco:             #6ab7ff;

    /* Tipografia */
    --fonte-titulo:         clamp(1.1rem, 5vw, 1.32rem);
    --fonte-subtitulo:      clamp(0.95rem, 4vw, 1.1rem);
    --fonte-leitura:        0.98rem;
    --fonte-botao:          1rem;
    --fonte-label:          0.8rem;
    --fonte-minima:         0.76rem;

    /* Espaçamentos */
    --padding-card:         20px 18px;
    --padding-card-desktop: 26px 24px;
    --gap-base:             10px;
    --gap-grande:           16px;

    /* Formas */
    --raio-botao:           999px;
    --raio-card:            22px;
    --raio-input:           14px;

    /* Sombras */
    --sombra-card:
        0 18px 38px rgba(35, 22, 8, 0.26);

    --sombra-botao:
        0 6px 0 var(--cor-dourado-sombra),
        0 12px 20px rgba(79, 48, 10, 0.22);

    --sombra-botao-pressionado:
        0 2px 0 var(--cor-dourado-sombra),
        0 4px 8px rgba(79, 48, 10, 0.14);

    /* Larguras máximas */
    --largura-card:         min(94vw, 440px);
    --largura-card-media:   min(94vw, 560px);
    --largura-conteudo:     min(96vw, 900px);

    /* Z-index — camadas semânticas */
    --z-modal-base:         100;
    --z-modal-media:        200;
    --z-modal-topo:         300;
}

/* ============================================================
   BOTÃO PRINCIPAL — dourado, ação primária
   ============================================================ */

.btn-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 52px;
    padding: 0 28px;

    border: none;
    border-top: 2px solid rgba(255, 248, 200, 0.60);
    border-radius: var(--raio-botao);

    background: linear-gradient(
        180deg,
        var(--cor-dourado-claro) 0%,
        var(--cor-dourado-medio) 100%
    );

    color: var(--cor-texto);
    font-family: inherit;
    font-size: var(--fonte-botao);
    font-weight: 900;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    box-shadow: var(--sombra-botao);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        filter 0.12s ease;
}

.btn-principal:hover {
    filter: brightness(1.06);
}

.btn-principal:active {
    transform: translateY(4px);
    box-shadow: var(--sombra-botao-pressionado);
}

.btn-principal:focus-visible {
    outline: 3px solid var(--cor-foco);
    outline-offset: 4px;
}

.btn-principal:disabled,
.btn-principal[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.2);
}

/* ============================================================
   BOTÃO SECUNDÁRIO — creme, navegação e voltar
   ============================================================ */

.btn-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

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

    border: 1.5px solid rgba(232, 204, 138, 0.65);
    border-radius: var(--raio-botao);

    background: rgba(255, 249, 237, 0.92);
    color: var(--cor-texto-suave);

    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    box-shadow: 0 5px 12px rgba(42, 29, 12, 0.12);

    transition:
        transform 0.12s ease,
        filter 0.12s ease,
        background 0.12s ease;
}

.btn-secundario:hover {
    filter: brightness(1.03);
}

.btn-secundario:active {
    transform: translateY(2px);
}

.btn-secundario:focus-visible {
    outline: 3px solid var(--cor-foco);
    outline-offset: 3px;
}

.btn-secundario:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ============================================================
   BOTÃO DE ÁUDIO — ouvir narração / história / pergunta
   ============================================================ */

.btn-audio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 40px;
    padding: 8px 18px;

    border: 1.5px solid rgba(232, 204, 138, 0.65);
    border-radius: var(--raio-botao);

    background: rgba(255, 249, 237, 0.92);
    color: var(--cor-texto-suave);

    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;

    cursor: pointer;

    transition:
        filter 0.12s ease,
        background 0.12s ease,
        border-color 0.12s ease;
}

.btn-audio:hover {
    filter: brightness(1.03);
}

.btn-audio:active {
    transform: translateY(1px);
}

/* Estado: áudio em reprodução */
.btn-audio--tocando,
.btn-audio.tocando,
.btn-audio[aria-pressed="true"] {
    background: rgba(232, 204, 138, 0.22);
    border-color: var(--cor-dourado-medio);
    color: var(--cor-texto);
}

/* Estado: indisponível */
.btn-audio:disabled,
.btn-audio--indisponivel {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-audio:focus-visible {
    outline: 3px solid var(--cor-foco);
    outline-offset: 3px;
}

/* ============================================================
   CARD PADRÃO
   ============================================================ */

.card-padrao {
    position: relative;
    width: var(--largura-card);
    padding: var(--padding-card);

    border-radius: var(--raio-card);
    background: var(--cor-creme);
    border: 2px solid var(--cor-dourado-borda);

    box-shadow: var(--sombra-card);
}

/* ============================================================
   OVERLAY DE MODAL PADRÃO
   ============================================================ */

.modal-overlay-padrao {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-base);

    display: none;
    align-items: center;
    justify-content: center;

    padding: 16px;

    background: rgba(20, 12, 4, 0.58);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    overflow-y: auto;
}

.modal-overlay-padrao.ativo {
    display: flex;
}

/* ============================================================
   ESTADO BLOQUEADO
   ============================================================ */

.estado-bloqueado {
    opacity: 0.38;
    filter: grayscale(0.78) brightness(0.88);
    cursor: not-allowed;
}

/* ============================================================
   BOTÃO IMAGEM — "Começar a aventura"
   Usado na tela inicial e na tela de identificação.
   ============================================================ */

.btn-comecar-aventura {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: min(82vw, 420px);
    max-width: 420px;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.btn-comecar-aventura-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.btn-comecar-aventura:hover {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.04);
}

.btn-comecar-aventura:active {
    transform: translateY(1px) scale(0.985);
    filter: brightness(0.96);
}

.btn-comecar-aventura:focus-visible {
    outline: 3px solid rgba(255, 210, 90, 0.9);
    outline-offset: 4px;
    border-radius: 999px;
}

.btn-comecar-aventura:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.1);
}

@media (max-height: 520px) and (orientation: landscape) {
    .btn-comecar-aventura {
        width: min(52vw, 340px);
    }
}

@media (max-width: 480px) {
    .btn-comecar-aventura {
        width: min(86vw, 360px);
    }
}

@media (min-width: 768px) {
    .btn-comecar-aventura {
        width: min(46vw, 430px);
    }
}

/* ============================================================
   BTN-UI — base para todos os botões em imagem
   ============================================================ */

.btn-ui {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 1;
    min-width: 0;
    transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.btn-ui-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

.btn-ui:hover {
    transform: translateY(-2px) scale(1.01);
    filter: brightness(1.03);
}

.btn-ui:active {
    transform: translateY(1px) scale(0.985);
    filter: brightness(0.97);
}

.btn-ui:focus-visible {
    outline: 3px solid rgba(255, 215, 120, 0.9);
    outline-offset: 4px;
    border-radius: 999px;
}

.btn-ui:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.08);
    pointer-events: none;
}

/* Larguras padrão por função */
.btn-proximo,
.btn-anterior {
    width: clamp(120px, 30vw, 220px);
}

.btn-perguntas {
    width: clamp(170px, 46vw, 320px);
}

.btn-voltar-mapa {
    width: min(44vw, 210px);
}

.btn-fechar {
    width: min(44vw, 260px);
}

.btn-imprimir-atividade {
    width: min(78vw, 420px);
}

.btn-ver-atividade,
.btn-ver-missao {
    width: min(48vw, 300px);
}

.btn-ver-cartas {
    width: min(62vw, 320px);
    max-width: 320px;
}

/* ── Botões de transição de pop-up (Ir para missão / Ver minha carta) ── */
.btn-ir-para-missao,
.btn-ver-minha-carta {
    display: flex;
    width: min(82vw, 380px);
    max-width: 380px;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .btn-proximo,
    .btn-anterior {
        width: 34vw;
        max-width: 150px;
    }

    .btn-perguntas {
        width: 52vw;
        max-width: 230px;
    }

    .btn-voltar-mapa {
        width: min(58vw, 210px);
    }

    .btn-fechar {
        width: 42vw;
        max-width: 170px;
    }

    .btn-ver-atividade,
    .btn-ver-missao {
        width: 42vw;
        max-width: 170px;
    }

    .btn-ver-cartas {
        width: min(60vw, 250px);
        max-width: 250px;
    }

    .btn-imprimir-atividade {
        width: 78vw;
        max-width: 310px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .btn-proximo,
    .btn-anterior {
        width: min(24vw, 160px);
    }

    .btn-perguntas {
        width: min(36vw, 250px);
    }

    .btn-voltar-mapa {
        width: min(32vw, 190px);
    }

    .btn-fechar {
        width: min(24vw, 170px);
    }

    .btn-ver-atividade,
    .btn-ver-missao {
        width: min(26vw, 190px);
    }

    .btn-ver-cartas {
        width: min(30vw, 220px);
        max-width: 220px;
    }

    .btn-imprimir-atividade {
        width: min(46vw, 340px);
    }
}

/* ============================================================
   BADGE DE VIRTUDE
   ============================================================ */

.badge-virtude {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 12px;

    border-radius: var(--raio-botao);
    border: 1.5px solid rgba(232, 204, 138, 0.65);

    background: rgba(255, 249, 237, 0.82);
    color: var(--cor-texto-suave);

    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}