/* =============================================================================
   Componentes compartilhados pelas três telas.
   ========================================================================== */

/* ---- Botões ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio);
    background: var(--cor-superficie-alta);
    color: var(--cor-texto);
    font-size: var(--fs-pequeno);
    font-weight: 500;
    transition: background var(--transicao), border-color var(--transicao),
        color var(--transicao), opacity var(--transicao);
}

.btn:hover:not(:disabled) {
    background: var(--cor-borda);
    border-color: var(--cor-texto-fraco);
    text-decoration: none;
}

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

.btn--principal {
    background: var(--cor-acento-forte);
    border-color: var(--cor-acento-forte);
    color: #fff;
}

.btn--principal:hover:not(:disabled) {
    background: var(--cor-acento);
    border-color: var(--cor-acento);
}

.btn--perigo {
    background: transparent;
    border-color: var(--cor-ao-vivo);
    color: var(--cor-ao-vivo);
}

.btn--perigo:hover:not(:disabled) {
    background: var(--cor-ao-vivo-fraco);
    border-color: var(--cor-ao-vivo);
    color: var(--cor-ao-vivo);
}

.btn--discreto {
    padding: 6px 10px;
    background: transparent;
    border-color: transparent;
    color: var(--cor-texto-suave);
    font-size: var(--fs-micro);
}

.btn--discreto:hover:not(:disabled) {
    background: var(--cor-superficie-alta);
    border-color: var(--cor-borda);
    color: var(--cor-texto);
}

.btn--bloco {
    width: 100%;
}

/* ---- Campos ------------------------------------------------------------- */

.campo {
    display: block;
    margin-bottom: 16px;
}

.campo__rotulo {
    display: block;
    margin-bottom: 6px;
    color: var(--cor-texto-suave);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
}

.campo__controle {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie-alta);
    color: var(--cor-texto);
    font-size: var(--fs-corpo);
    transition: border-color var(--transicao);
}

.campo__controle::placeholder {
    color: var(--cor-texto-fraco);
}

.campo__controle:focus {
    border-color: var(--cor-acento);
    outline: none;
}

.campo__controle--mono {
    font-family: var(--fonte-mono);
    font-size: var(--fs-codigo);
    line-height: var(--lh-codigo);
    resize: vertical;
}

/* "(opcional)" dentro do rótulo: sem caixa alta, sem peso. */
.campo__opcional {
    font-weight: 400;
    text-transform: none;
}

.campo__ajuda {
    margin-top: 6px;
    color: var(--cor-texto-fraco);
    font-size: var(--fs-micro);
}

/* Mensagem de erro do campo. Some quando vazia: sem isso o formulário pularia
   de altura a cada validação. */
.campo__erro {
    display: none;
    margin-top: 6px;
    color: var(--cor-erro);
    font-size: var(--fs-micro);
}

.campo__erro:not(:empty) {
    display: block;
}

.campo--invalido .campo__controle {
    border-color: var(--cor-erro);
}

.campo-inline {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.campo-inline .campo {
    flex: 1;
    margin-bottom: 0;
}

/* ---- Cartões ------------------------------------------------------------ */

.cartao {
    padding: 24px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-superficie);
    box-shadow: var(--sombra);
}

.cartao__titulo {
    margin-bottom: 6px;
    font-size: var(--fs-titulo);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Cartões empilhados sempre respiram entre si. */
.cartao + .cartao {
    margin-top: 16px;
}

.cartao__titulo--secao {
    font-size: var(--fs-subtitulo);
}

/*
   O texto do cartão quase sempre precede um formulário, então o espaço embaixo é
   o padrão. Quando ele é a última coisa do cartão, o espaço sobraria — daí o
   :last-child. Assim nenhuma tela precisa de style inline para ajustar.
*/
.cartao__texto {
    margin-bottom: 18px;
    color: var(--cor-texto-suave);
    font-size: var(--fs-pequeno);
}

.cartao__texto:last-child {
    margin-bottom: 0;
}

/* ---- Etiquetas ---------------------------------------------------------- */

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid var(--cor-borda-forte);
    border-radius: 999px;
    color: var(--cor-texto-suave);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    white-space: nowrap;
}

.etiqueta--ao-vivo {
    border-color: var(--cor-ao-vivo);
    background: var(--cor-ao-vivo-fraco);
    color: var(--cor-ao-vivo);
}

.etiqueta--parada {
    border-color: var(--cor-borda-forte);
    color: var(--cor-texto-fraco);
}

/* O ponto pisca só no estado ao vivo, e devagar: é o único movimento da tela
   fora do vídeo. */
.etiqueta__ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.etiqueta--ao-vivo .etiqueta__ponto {
    animation: pulsar 2s ease-in-out infinite;
}

@keyframes pulsar {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .etiqueta--ao-vivo .etiqueta__ponto {
        animation: none;
    }
}

/* ---- Avisos ------------------------------------------------------------- */

.aviso {
    padding: 12px 14px;
    border: 1px solid var(--cor-borda);
    border-left-width: 3px;
    border-radius: var(--raio-sm);
    background: var(--cor-superficie-alta);
    color: var(--cor-texto-suave);
    font-size: var(--fs-pequeno);
}

.aviso--erro {
    border-left-color: var(--cor-erro);
    background: var(--cor-erro-fraco);
    color: var(--cor-texto);
}

.aviso--dica {
    border-left-color: var(--cor-acento);
    background: var(--cor-acento-fraco);
}

.aviso__titulo {
    margin-bottom: 4px;
    color: var(--cor-texto);
    font-weight: 600;
}

/* ---- Barra superior ----------------------------------------------------- */

.barra {
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--altura-barra);
    padding: 0 18px;
    border-bottom: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
    flex-shrink: 0;
}

.barra__marca {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--cor-texto);
    font-weight: 600;
    letter-spacing: -.01em;
    flex-shrink: 0;
}

.barra__marca:hover {
    text-decoration: none;
}

.barra__identidade {
    min-width: 0;
    flex: 1;
}

.barra__titulo {
    overflow: hidden;
    font-size: var(--fs-subtitulo);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra__legenda {
    color: var(--cor-texto-fraco);
    font-size: var(--fs-micro);
}

.barra__acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .barra {
        padding: 0 12px;
        gap: 10px;
    }

    /* Numa tela de celular o nome do produto cede lugar ao título da aula. */
    .barra__marca span {
        display: none;
    }
}

/* ---- Utilitários -------------------------------------------------------- */

.mono {
    font-family: var(--fonte-mono);
}

.somente-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}