/*
 * SPDX-License-Identifier: MIT
 * Copyright (c) 2026 Allan Barcelos. OpenTube: https://github.com/allanbarcelos/opentube
 */

/* Ajustes pontuais sobre o Bootstrap; o restante usa as classes e as cores padrão. */

.video-thumb {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--bs-secondary-bg);
}

.video-thumb-placeholder {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.video-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Miniatura da coleção: não há imagem própria, o título é a capa. */
.collection-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    text-align: center;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 46%),
        linear-gradient(145deg, #1f4b99, #0b1f3a);
    color: #fff;
}

.collection-favorite {
    position: absolute;
    z-index: 2;
    top: 0.55rem;
    right: 0.55rem;
}

.collection-favorite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(11, 31, 58, 0.55);
    color: #fff;
    line-height: 1;
    flex: 0 0 auto;
}

.collection-favorite-btn.marcada,
.collection-favorite-btn:hover,
.collection-favorite-btn:focus-visible {
    color: #ffc107;
}

.collection-favorite-btn-clara {
    background: transparent;
    color: var(--bs-secondary-color);
}

.collection-favorite-btn-clara.marcada,
.collection-favorite-btn-clara:hover,
.collection-favorite-btn-clara:focus-visible {
    background: transparent;
    color: #d39e00;
}

.collection-cover span {
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.playlist-thumb {
    width: 120px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--bs-secondary-bg);
    flex: 0 0 auto;
}

.playlist-lista {
    max-height: 28rem;
    overflow-y: auto;
}

.player-shell {
    aspect-ratio: 16 / 9;
    background-color: #000;
}

.player-shell video {
    width: 100%;
    height: 100%;
    /* Sem o menu de "salvar vídeo" ao segurar o dedo no iOS, nem seleção ou arrasto. */
    -webkit-touch-callout: none;
    user-select: none;
}

/* A tela cheia é do contêiner, não do <video>: na do <video> o navegador esconde tudo o que
   estiver por cima, marca d'água incluída. */
/* Regras separadas: um seletor desconhecido invalida a lista inteira em que está. */
.player-shell:fullscreen {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
}

.player-shell:-webkit-full-screen {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
}

.player-shell:fullscreen .marca-dagua {
    font-size: 16px;
}

.player-shell:-webkit-full-screen .marca-dagua {
    font-size: 16px;
}

.player-tela-cheia {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    padding: 2px 8px;
    border: 0;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 18px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.player-shell:hover .player-tela-cheia,
.player-tela-cheia:focus-visible {
    opacity: 1;
}

/* Com a marca do acervo no canto superior direito, o botão vai para o outro lado. */
.player-shell[data-logo-canto="1"] .player-tela-cheia {
    right: auto;
    left: 8px;
}

.codigo-acesso {
    letter-spacing: 0.5rem;
    font-size: 1.5rem;
    text-align: center;
}

/* Gráficos --------------------------------------------------------------- */

/* Um tom só em todos os gráficos: nenhum deles compara séries, então a cor mede
   grandeza e não identidade. O azul padrão do Bootstrap atende ao contraste
   mínimo tanto sobre fundo claro quanto sobre fundo escuro. */
:root {
    --grafico-serie: #0d6efd;
    --grafico-grade: rgba(33, 37, 41, 0.12);
    --grafico-tinta: rgba(33, 37, 41, 0.62);
}

[data-bs-theme="dark"] {
    --grafico-grade: rgba(222, 226, 230, 0.16);
    --grafico-tinta: rgba(222, 226, 230, 0.68);
}

.grafico {
    width: 100%;
    height: auto;
    overflow: visible;
}

.grafico-grade {
    stroke: var(--grafico-grade);
    stroke-width: 1;
}

.grafico-linha {
    fill: none;
    stroke: var(--grafico-serie);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.grafico-barra {
    fill: var(--grafico-serie);
}

.grafico-rotulo {
    fill: var(--grafico-tinta);
    font-size: 11px;
}

.grafico-cursor {
    stroke: var(--grafico-tinta);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.grafico-ponto {
    fill: var(--grafico-serie);
    stroke: var(--bs-body-bg);
    stroke-width: 2;
}

.barra {
    height: 8px;
    border-radius: 4px;
    background-color: var(--bs-secondary-bg);
    overflow: hidden;
}

.barra-preenchimento {
    height: 100%;
    border-radius: 4px;
    background-color: var(--grafico-serie);
}

/* Marca d'água -------------------------------------------------------------- */

.marca-dagua {
    position: absolute;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    /* Não pode atrapalhar o clique nos controles do player. */
    pointer-events: none;
    user-select: none;
    transition: top 0.6s ease, left 0.6s ease, right 0.6s ease, bottom 0.6s ease;
}

/* Texto repetido e inclinado sobre o quadro todo, desenhado pelo marca-dagua.js. Fraco o
   bastante para não atrapalhar, presente o bastante para não sumir num recorte. */
.marca-dagua-mosaico {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    background-repeat: repeat;
}

/* Marca d'água do acervo ---------------------------------------------------- */

/* Área do logotipo sobre o vídeo. Tamanho, margem e opacidade vêm do componente
   MarcaDoAcervo (PosicaoDaMarca.cs), num lugar só; aqui fica só o encaixe da imagem. */
.marca-logo {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

/* A imagem ocupa a área sem distorcer, encostada no canto escolhido. */
.marca-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
}

.marca-logo-top-left img { object-position: left top; }
.marca-logo-top-right img { object-position: right top; }
.marca-logo-bottom-left img { object-position: left bottom; }
.marca-logo-bottom-right img { object-position: right bottom; }
.marca-logo-center img { object-position: center; }

.marca-previa {
    background: linear-gradient(135deg, #2b3035 0%, #495057 100%);
}

.marca-previa-vazia {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
}

/* As opções de posição ficam na grade no lugar que representam. */
.marca-posicoes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "tl . tr"
        ". c ."
        "bl . br";
    gap: 0.25rem 0.5rem;
    padding: 0.5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.marca-opcao-top-left { grid-area: tl; }
.marca-opcao-top-right { grid-area: tr; justify-self: end; }
.marca-opcao-center { grid-area: c; justify-self: center; }
.marca-opcao-bottom-left { grid-area: bl; }
.marca-opcao-bottom-right { grid-area: br; justify-self: end; }

/* Editor de legendas ------------------------------------------------------ */

/* Estilo de editor de código: medianiz numerada, tempos em fonte monoespaçada e o texto ao
   lado. Cores escuras de editor, independentes do tema da página. */
.editor-legendas {
    --ed-fundo: #1e1f22;
    --ed-medianiz: #2b2d30;
    --ed-borda: #393b40;
    --ed-texto: #dfe1e5;
    --ed-apagado: #868a91;
    --ed-tempo: #6fb7ff;
    --ed-ativa: #2e3036;
    --ed-tocando: #ffc66d;
    --ed-erro: #f75464;
    --ed-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

    border: 1px solid var(--ed-borda);
    border-radius: var(--bs-border-radius-lg);
    background: var(--ed-fundo);
    color: var(--ed-texto);
    overflow: hidden;
}

.editor-barra {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--ed-medianiz);
    border-bottom: 1px solid var(--ed-borda);
}

.editor-barra kbd {
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.7em;
}

.editor-situacao {
    font-size: 0.8rem;
    color: var(--ed-apagado);
}

.editor-situacao.salvo {
    color: #6fcf97;
}

.editor-contagem {
    font-family: var(--ed-mono);
    font-size: 0.75rem;
    color: var(--ed-apagado);
}

.editor-grade {
    max-height: 70vh;
    overflow-y: auto;
    font-family: var(--ed-mono);
    font-size: 0.875rem;
}

.editor-cabecalho,
.editor-linha {
    display: grid;
    grid-template-columns: 3.25rem 8.5rem minmax(0, 1fr) auto;
    align-items: stretch;
}

.editor-cabecalho {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ed-medianiz);
    border-bottom: 1px solid var(--ed-borda);
    color: var(--ed-apagado);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.editor-cabecalho span {
    padding: 0.35rem 0.6rem;
}

.editor-cabecalho span:first-child {
    text-align: right;
}

.editor-linha {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.editor-linha.ativa {
    background: var(--ed-ativa);
}

/* A linha em exibição no vídeo ganha uma marca na medianiz. */
.editor-linha.tocando .editor-numero {
    color: var(--ed-tocando);
    box-shadow: inset 3px 0 0 var(--ed-tocando);
}

.editor-numero {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    border: 0;
    background: var(--ed-medianiz);
    color: var(--ed-apagado);
    padding: 0.35rem 0.6rem 0 0;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
}

.editor-numero:hover {
    color: var(--ed-texto);
}

.editor-tempo {
    display: flex;
    flex-direction: column;
    padding: 0.2rem 0.25rem;
    border-right: 1px solid var(--ed-borda);
}

.editor-tempo input,
.editor-texto {
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
}

.editor-tempo input {
    width: 100%;
    padding: 0.1rem 0.35rem;
    color: var(--ed-tempo);
    font-variant-numeric: tabular-nums;
}

/* O tempo de saída fica abaixo, mais discreto: o de entrada é o que se lê primeiro. */
.editor-tempo .editor-fim {
    color: var(--ed-apagado);
    font-size: 0.78rem;
}

.editor-texto {
    width: 100%;
    min-height: 2.2rem;
    padding: 0.4rem 0.6rem;
    resize: none;
    overflow: hidden;
    line-height: 1.45;
}

.editor-tempo input:focus,
.editor-texto:focus {
    border-color: #3574f0;
    background: rgba(53, 116, 240, 0.08);
}

.editor-legendas .invalido {
    border-color: var(--ed-erro) !important;
    background: rgba(247, 84, 100, 0.1) !important;
}

.editor-acoes {
    display: flex;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.3rem 0.4rem;
    opacity: 0.25;
    transition: opacity 0.15s ease;
}

.editor-linha:hover .editor-acoes,
.editor-linha.ativa .editor-acoes {
    opacity: 1;
}

.editor-acoes button {
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--ed-apagado);
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1;
}

.editor-acoes button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ed-texto);
}

.editor-acoes button[data-acao="remover"]:hover {
    color: var(--ed-erro);
}

.editor-erros {
    margin: 0;
    padding: 0.6rem 0.75rem 0.6rem 2rem;
    border-top: 1px solid var(--ed-borda);
    background: var(--ed-medianiz);
    font-size: 0.8rem;
    max-height: 9rem;
    overflow-y: auto;
}

.editor-erros .erro {
    color: var(--ed-erro);
}

.editor-erros .aviso {
    color: var(--ed-tocando);
}

.editor-previa {
    position: sticky;
    top: 1rem;
}

/* Texto da legenda em exibição, sobre o vídeo, atualizado enquanto se digita. */
.editor-legenda-atual {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform: translateX(-50%);
    max-width: 90%;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: clamp(0.8rem, 2.2vw, 1.15rem);
    text-align: center;
    white-space: pre-line;
    pointer-events: none;
}

.editor-legenda-atual:empty {
    display: none;
}

.editor-atalhos li {
    margin-bottom: 0.25rem;
}

/* Indicadores do painel: cada card leva à lista do que conta. */
.card-indicador {
    color: inherit;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.card-indicador:hover,
.card-indicador:focus-visible {
    border-color: var(--bs-primary);
    box-shadow: 0 0.125rem 0.5rem rgba(var(--bs-primary-rgb), 0.15);
}

/* Barra de capítulos sob o player: um segmento por capítulo, com o trecho já visto preenchido. */
/* Controles próprios do player (controles.js). A barra de progresso é dividida nos
   capítulos, como no YouTube: pedaços separados por um vão, o apontado engrossa. */
.player-shell.com-controles {
    --ctl-cor: #f03;
    user-select: none;
}

.player-shell.com-controles:not(.ctl-visivel) {
    cursor: none;
}

.player-shell .ctl {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 4;
    padding: 24px 12px 4px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.player-shell.ctl-visivel .ctl {
    opacity: 1;
    pointer-events: auto;
}

.ctl-progresso {
    position: relative;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
    outline: none;
}

.ctl-trilhos {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.ctl-pedaco {
    position: relative;
    flex-basis: 0;
    min-width: 2px;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
    transition: height 0.1s ease;
}

.ctl-progresso:hover .ctl-pedaco,
.ctl-progresso:focus-visible .ctl-pedaco,
.ctl-progresso.arrastando .ctl-pedaco {
    height: 5px;
}

/* O capítulo sob o ponteiro engrossa mais que os outros. */
.ctl-progresso .ctl-pedaco.apontado {
    height: 8px;
}

.ctl-carregado,
.ctl-apontado,
.ctl-tocado {
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left center;
}

.ctl-carregado {
    background: rgba(255, 255, 255, 0.4);
}

.ctl-apontado {
    background: rgba(255, 255, 255, 0.5);
}

.ctl-tocado {
    background: var(--ctl-cor);
}

.ctl-bolinha {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    background: var(--ctl-cor);
    transform: scale(0);
    transition: transform 0.1s ease;
    pointer-events: none;
}

.ctl-progresso:hover .ctl-bolinha,
.ctl-progresso:focus-visible .ctl-bolinha,
.ctl-progresso.arrastando .ctl-bolinha {
    transform: scale(1);
}

.ctl-progresso:focus-visible .ctl-trilhos {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.ctl-dica {
    position: absolute;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 60%;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(28, 28, 28, 0.9);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.ctl-dica-titulo {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.ctl-dica-tempo {
    font-variant-numeric: tabular-nums;
}

.ctl-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    height: 40px;
}

.ctl-grupo {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.ctl-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.ctl-botao:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ctl-botao:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.ctl-botao .bi {
    font-size: 20px;
    line-height: 1;
}

.ctl-volume {
    display: flex;
    align-items: center;
}

.ctl-volume-faixa {
    width: 0;
    height: 4px;
    opacity: 0;
    accent-color: #fff;
    transition: width 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}

.ctl-volume:hover .ctl-volume-faixa,
.ctl-volume:focus-within .ctl-volume-faixa {
    width: 64px;
    margin: 0 8px 0 2px;
    opacity: 1;
}

.ctl-tempo {
    padding: 0 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Capítulo atual ao lado do tempo, como no YouTube: "• Título ›". */
.ctl-capitulo {
    width: auto;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    gap: 2px;
    padding: 0 8px;
    font-weight: 400;
    font-size: 13px;
}

.ctl-capitulo-titulo {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ctl-capitulo .bi {
    flex-shrink: 0;
    font-size: 12px;
}

.ctl-legendas.ligado {
    box-shadow: inset 0 -3px 0 -1px var(--ctl-cor);
}

.ctl-menu {
    position: absolute;
    right: 12px;
    bottom: 64px;
    z-index: 5;
    min-width: 180px;
    max-height: calc(100% - 80px);
    overflow-y: auto;
    padding: 6px 0;
    border-radius: 8px;
    background: rgba(28, 28, 28, 0.92);
    color: #fff;
    font-size: 14px;
}

.ctl-menu-titulo {
    padding: 6px 16px 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.ctl-opcao {
    display: block;
    width: 100%;
    padding: 6px 16px 6px 36px;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    position: relative;
}

.ctl-opcao:hover,
.ctl-opcao:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.ctl-opcao-marca {
    position: absolute;
    left: 12px;
    visibility: hidden;
}

.ctl-opcao[aria-checked="true"] .ctl-opcao-marca {
    visibility: visible;
}

/* Botão grande no meio enquanto o vídeo está parado. */
.ctl-grande {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 68px;
    height: 48px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%);
}

.ctl-grande:hover {
    background: var(--ctl-cor);
}

.ctl-grande .bi {
    font-size: 30px;
}

.ctl-carregando {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ctl-girar 0.8s linear infinite;
    pointer-events: none;
}

.player-shell.ctl-esperando:not(.ctl-pausado) .ctl-carregando {
    display: block;
}

@keyframes ctl-girar {
    to { transform: rotate(360deg); }
}

/* Celular: sem a faixa de volume (o aparelho tem os botões) e com menos folga. */
@media (max-width: 575.98px) {
    .player-shell .ctl {
        padding: 16px 4px 0;
    }

    /* O capítulo atual não cabe ao lado do tempo; a lista de capítulos fica logo abaixo. */
    .ctl-volume-faixa,
    .ctl-pip,
    .ctl-capitulo {
        display: none;
    }

    .ctl-botao {
        width: 34px;
    }

    .ctl-tempo {
        padding: 0 4px;
        font-size: 12px;
    }
}

.sumario-item.active .text-body-secondary {
    color: inherit !important;
}

/* Avaliação de utilidade: estrelas até a escolhida; ao passar o mouse, até a apontada. */
.estrelas .estrela {
    padding: 0 0.15rem;
    border: 0;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bs-secondary-bg);
    cursor: pointer;
    transition: color 0.1s ease-in-out;
}

.estrelas .estrela.marcada {
    color: var(--bs-warning);
}

.estrelas:hover .estrela {
    color: var(--bs-warning);
}

.estrelas .estrela:hover ~ .estrela {
    color: var(--bs-secondary-bg);
}

.estrelas .estrela:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Barra superior: a busca ocupa todo o espaço entre a marca e os botões, com a lupa dentro. */
.barra-superior .busca {
    position: relative;
    flex: 1 1 auto;
    min-width: 12rem;
}

.barra-superior .busca .form-control {
    padding-right: 2.75rem;
}

.barra-superior .busca-botao {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--bs-secondary-color);
    transform: translateY(-50%);
}

.barra-superior .busca-botao:hover,
.barra-superior .busca-botao:focus-visible {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* O campo de busca do navegador põe um "x" próprio que colidiria com a lupa. */
.barra-superior .busca input::-webkit-search-cancel-button {
    display: none;
}

.barra-superior .barra-usuario {
    max-width: 14rem;
}

@media (max-width: 767.98px) {
    .barra-superior .barra-usuario {
        max-width: none;
        padding: 0.25rem 0;
    }
}

/* Área de envio: clicar escolhe vídeos, arrastar aceita vídeos e pastas. */
.area-de-envio {
    border: 2px dashed var(--bs-border-color);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.area-de-envio:hover,
.area-de-envio:focus-visible {
    border-color: var(--bs-primary);
    outline: none;
}

.area-de-envio.soltando {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

.area-de-envio .area-de-envio-soltando,
.area-de-envio.soltando .area-de-envio-normal {
    display: none;
}

.area-de-envio.soltando .area-de-envio-soltando {
    display: block;
}

/* Rodapé: crédito à esquerda, aviso no centro, GitHub à direita. As laterais têm a mesma
   largura para o aviso ficar no centro da página, e não só entre os dois. */
.rodape {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "credito aviso github";
    align-items: center;
    gap: 0.5rem 1rem;
}

.rodape-credito {
    grid-area: credito;
}

.rodape-aviso {
    grid-area: aviso;
    text-align: center;
}

.rodape-github {
    grid-area: github;
    justify-self: end;
}

/* Celular: crédito e GitHub na primeira linha, o aviso centralizado embaixo. */
@media (max-width: 575.98px) {
    .rodape {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "credito github"
            "aviso aviso";
    }
}

/* Campo de etiquetas (etiquetas.js): os badges e a digitação dividem a mesma caixa. */
.caixa-etiquetas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: calc(1.5em + 0.75rem + 2px);
    cursor: text;
}

.caixa-etiquetas:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.caixa-etiquetas-lista {
    display: contents;
}

.caixa-etiquetas-digitacao {
    flex: 1 1 8rem;
    min-width: 8rem;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
}

.caixa-etiquetas.cheia .caixa-etiquetas-digitacao {
    display: none;
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.3rem 0.35rem 0.3rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.etiqueta-remover {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.etiqueta-remover:hover,
.etiqueta-remover:focus-visible {
    background: var(--bs-secondary-bg);
    color: var(--bs-danger);
    outline: none;
}