/* main.css - Moodscope Analyser v1.2.5 */
/*                                                                       */
/* FLUXO DA APLICAÇÃO:                                                   */
/* 1. index.php → Login/Autenticação → Seleção de análise              */
/* 2. app.php → Interface principal → Header + Main + Panel             */
/* 3. Análise → Vídeo + Controles → Códigos → Visualização/Exportação  */
/*                                                                       */
/* ESTRUTURA DO CSS:                                                     */
/* 1. Globais e variáveis                                               */
/* 2. Página de login (index.php)                                       */
/* 3. Aplicação principal (app.php)                                     */
/* 4. Painel esquerdo - análise de vídeo                               */
/* 5. Painel direito - visualização e exportação                       */
/* 6. Utilitários e responsividade                                      */
/*                                                                       */

/* ===================================================================== */
/* 1. ESTILOS GLOBAIS E VARIÁVEIS                                       */
/* ===================================================================== */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    font-family: 'Cabin', sans-serif;
    background-color: #0a0a0a; 
    color: #e0e0e0;
    height: 100vh;
    overflow: hidden;
}

/* Variáveis para cores principais */
:root {
    --primary-green: #4CAF50;
    --dark-bg: #111;
    --darker-bg: #0a0a0a;
    --medium-bg: #1a1a1a;
    --light-bg: #333;
    --text-light: #e0e0e0;
    --text-muted: #bbb;
    --border-dark: #222;
}

/* Padronização global para botões */
button,
.video-controls button,
.file-button,
#codes-console button,
.export-controls button,
.logout-btn {
    height: 24px;
    font-size: 0.75rem;
    padding: 2px 2px;
    border-radius: 5px;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
    font-family: 'Cabin', sans-serif;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    background-color: var(--light-bg);
    color: var(--text-light);
}

/* Efeito de clarear/acender para todos os botões, sem definir cor */
button:hover,
.video-controls button:hover,
.file-button:hover,
#codes-console button:hover,
.export-controls button:hover,
.logout-btn:hover {
    filter: brightness(1.30); /* Clareia ao passar o mouse */
    transition: filter 0.5s;
}

button:active,
.video-controls button:active,
.file-button:active,
#codes-console button:active,
.export-controls button:active,
.logout-btn:active {
    filter: brightness(2.25); /* Clareia mais ao clicar */
    transition: filter 0.1s;
}

/* Cores específicas para botões temáticos */
.composicao-btn { background: linear-gradient(to bottom, #323371, #5b5cbf); color: #fff;} /* Violeta escuro */
.metodo-btn { background: linear-gradient(to bottom, #008C3F, #33E06C); color: #fff;} /* Verde vivo, igual à agência (mood), por decisão do professor */
.espaço-btn { background: linear-gradient(to bottom, #5E4698, #9A85D1); color: #fff;} /* Roxo claro */
.tempo-btn { background: linear-gradient(to bottom, #B8860B, #FFD54F); color: #222;} /* Mostarda */
.agência-btn { background: linear-gradient(to bottom, #008C3F, #33E06C); color: #fff;} /* Verde vivo */
.genero-btn { background: linear-gradient(to bottom, #C2185B, #F06292); color: #fff;} /* Rosa */
.origem-btn { background: linear-gradient(to bottom, #0E7C86, #26C6DA); color: #fff;} /* Teal (era do xfade, agora livre) */

.in-btn  { background: linear-gradient(to bottom, #4f9252, #66BB6A); color: #fff; }
.out-btn { background: linear-gradient(to bottom, #8B3A1A, #FF7043); color: #fff; } /* Topo mais escuro, mesma cor de base no fundo */
.marker-btn { background: linear-gradient(to bottom, #8B0000, #E53935); color: #fff; } /* Vermelho, igual ao stinger, por decisão do professor */
.stinger-btn { background: linear-gradient(to bottom, #8B0000, #E53935); color: #fff; } /* Vermelho, exige IN aberto */
.xfade-btn { background: linear-gradient(to bottom, #305C92, #5C9DE0); color: #fff; } /* Azul médio, igual ao hit, por decisão do professor */

.open-in-warning {
    background: #8B0000;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}
.hit-btn { background: linear-gradient(to bottom, #305C92, #5C9DE0); color: #fff;} /* Azul médio */

/* Estilos para botões desabilitados */
button:disabled,
button.disabled,
.code-btn:disabled,
.code-btn.disabled {
    background: #555555 !important; /* Cinza padrão */
    color: #999999 !important; /* Texto cinza claro */
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    pointer-events: none;
}

button:disabled:hover,
button.disabled:hover,
.code-btn:disabled:hover,
.code-btn.disabled:hover {
    background: #555555 !important; /* Mantém cinza no hover */
    filter: none !important;
}

/* Códigos de ESTADO (tempo/espaço/agência/metodo, ver categoriasDeEstado em
   codes-config.js e o bloco novo em setButtonsState()): 3 níveis visuais
   pedidos pelo professor em 26/09/2026 — cinza indisponível já é o
   .disabled acima; os dois abaixo só se aplicam a um botão que NÃO está
   desabilitado (dentro de uma entrada aberta). "Pronto": dentro da entrada,
   mas não é o estado vigente agora — cor PLENA de categoria, igual a um
   botão comum (ajustado em 26/09/2026: a 1ª versão apagava a cor, o
   professor achou escuro demais e pediu de volta a cor cheia; sem regra CSS
   própria aqui de propósito, .estado-pronto não muda nada por cima do botão
   normal, só existe pra JS poder tirar/pôr a classe sem checar qual das
   duas está ativa). "Ativo": É o estado vigente agora, um pouco mais vivo
   que o normal (não escurece), com contorno luminoso branco — sem trocar a
   cor de categoria de cada botão, só realçar por cima. */
.estado-ativo {
    filter: saturate(1.35) brightness(1.1);
    box-shadow: 0 0 0 2px #fff, 0 0 9px 2px rgba(255, 255, 255, 0.85);
}

/* ===================================================================== */
/* 2. PÁGINA DE LOGIN (index.php)                                       */
/* ===================================================================== */
/*                                                                       */
/* Fluxo: index.php → Autenticação → app.php                           */
/* Esta seção contém estilos para:                                      */
/* - Tela de login/senha                                                 */
/* - Formulários de nova análise e carregar análise                     */
/* - Disclaimers e avisos educacionais                                  */
/* - Sistema de autenticação                                             */
/*                                                                       */
/* === 2.1 CONTAINER PRINCIPAL DE LOGIN === */
.login-container {
    max-width: 400px;
    margin: 60px auto;
    background: #1a1a1a;
    padding: 32px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 16px #0007;
}

.login-container h2 {
    color: #4CAF50;
    margin-bottom: 18px;
    text-align: center;
}

.login-container label {
    display: block;
    margin-bottom: 6px;
    color: #e0e0e0;
}

.login-container input, .login-container select {
    width: 100%;
    padding: 7px 10px;
    margin-bottom: 14px;
    border-radius: 4px;
    border: 1px solid #222;
    background: #222;
    color: #e0e0e0;
    font-size: 1rem;
}

.login-container input[type="file"] {
    padding: 0;
    background: none;
}

.login-container .error {
    color: #ff4444;
    text-align: center;
    margin-bottom: 12px;
}

.login-container button {
    background: #4CAF50;
    color: #fff;
    padding: 10px 0;
    width: 100%;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-family: 'Cabin', sans-serif;
    font-weight: 600;
    cursor: pointer;
}

.login-container .csv-note {
    color: #bbb;
    font-size: 0.92em;
    margin-bottom: 8px;
    text-align: left;
}

/* === 2.2 SISTEMA DE AUTENTICAÇÃO E AVISOS === */
/* Disclaimer educacional sobre logs e privacidade */
.login-disclaimer {
    background: #666;
    color: #ccc;
    padding: 8px;
    border-radius: 4px;
    margin-top: 12px;
    font-size: 0.85em;
    text-align: center;
    line-height: 1.3;
}

/* Aviso de redirecionamento */
.login-redirect-notice {
    background: #2196F3;
    color: white;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 0.9em;
    text-align: center;
}

/* Instruções de login */
.login-instructions {
    text-align: center;
    margin-bottom: 18px;
}

.login-instructions p {
    color: #e0e0e0;
    margin-bottom: 12px;
}

/* Botões principais da tela de login */
.login-main-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 18px;
}

/* Link de logout discreto */
.login-logout-link {
    text-align: center;
    margin-top: 20px;
}

.login-logout-link a {
    color: #888;
    font-size: 0.8em;
    text-decoration: none;
}


/* ===================================================================== */
/* 3. APLICAÇÃO PRINCIPAL (app.php)                                     */
/* ===================================================================== */
/*                                                                       */
/* Fluxo: Após login → app.php carrega interface de análise            */
/* Esta seção contém estilos para:                                      */
/* - Layout geral da aplicação (header + main container)               */
/* - Sistema de grid responsivo                                          */
/* - Estrutura básica da interface de análise                          */
/*                                                                       */

/* === 3.1 HEADER (7% da altura vertical) === */
header {
    height: 7vh;
    background-color: var(--dark-bg); 
    padding: 8px 15px; 
    border-bottom: 1px solid var(--border-dark); 
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 100%;
}

.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 8px;
    width: 100%;
}

.header-title-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    row-gap: 8px;
}

.header-title {
    font-size: 1.2rem;
    color: var(--primary-green);
    font-weight: 600;
    letter-spacing: .5px;
    margin: 0;
    margin-right: 20px;
}

.user-info {
    display: flex;
    gap: 18px;
    font-size: 0.85rem;
}

.user-info span {
    background: var(--light-bg);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
}

.logout-form {
    margin: 0;
}

.logout-btn {
    background: var(--primary-green);
    color: #fff;
    font-weight: 400;
    transition: background 0.2s;
}

.logout-btn:hover {
    background: #388e3c;
}

/* === ALTERNADOR DE MODALIDADE (Anotação x Análise) === */
/* Cor neutra de propósito, sem herdar a cor de nenhuma categoria de code, pra
   nunca ser confundido com os botões coloridos do console (ver conversa que
   definiu isso: modo Análise esconde #codes-console inteiro, ver regra logo
   abaixo e setupModeSwitch() em app.js). */
.mode-switch {
    display: flex;
    gap: 4px;
}

/* Anotação | Análise | Tela Cheia: mesmo gap mínimo (4px) entre os três,
   nos dois níveis (dentro do mode-switch e entre o mode-switch e o botão
   de fullscreen), pra não ficar um espaço maior que o outro. */
.view-mode-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mode-btn {
    height: 24px;
    font-size: 0.75rem;
    padding: 2px 12px;
    border-radius: 4px;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    font-family: 'Cabin', sans-serif;
    background: var(--light-bg);
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
}

.mode-btn:hover {
    filter: brightness(1.3);
}

.mode-btn.active {
    background: var(--primary-green);
    color: #fff;
    font-weight: 600;
}

/* Modo Análise: o mesmo espaço do console de adicionar code passa a
   mostrar, em vez disso, um seletor de categorias já usadas na análise
   (ver renderAnaliseConsole() em app.js). Cor uniforme de propósito, sem
   herdar cor de categoria nenhuma (não é pra parecer com o console de
   codificar). "off" e "on" usam CORES diferentes (não só claro/escuro do
   mesmo tom), pra ficar aceso de verdade enquanto selecionado, sem depender
   do "flare" de hover/click que os outros botões do app já têm (esse efeito
   continua rolando por cima, mas a diferença de cor entre on/off não some
   quando o mouse sai). */
/* Prefixado com #codes-console pra ganhar da regra genérica
   "#codes-console button" lá no topo do arquivo (especificidade de ID vence
   classe, mesmo duas classes juntas). Sem isso, a cor de fundo aplicada
   aqui perdia a disputa e voltava pro cinza padrão assim que o "flare" do
   hover/clique acabava, mesmo com .selected aplicado. */
#codes-console .analise-code-btn {
    background: #3a3a3a;
    color: #cfcfcf;
    border: 1px solid #4a4a4a;
}

#codes-console .analise-code-btn:hover {
    filter: brightness(1.25);
}

#codes-console .analise-code-btn.selected {
    background: var(--primary-green);
    color: #fff;
    font-weight: 600;
    border-color: #66BB6A;
}

#codes-console .analise-code-btn.selected:hover {
    filter: brightness(1.15);
}

.analise-console-vazio {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 10px 6px;
    text-align: center;
}

/* Separador entre os temas de Anotação e as tags de leitmotif "t.Nome" em
   Análise (03/10/2026, ver renderAnaliseConsole() em app.js). grid-column:
   1/-1 ocupa a linha inteira do grid de 9 colunas, forçando o próximo botão
   a começar numa linha nova — mesma técnica de .analise-console-vazio
   acima. Borda fina só pra dar uma pista visual de divisão, sem texto
   nenhum (o rótulo "temas emergentes" não foi pedido, só a separação). */
.analise-console-quebra {
    grid-column: 1 / -1;
    border-top: 1px solid #4a4a4a;
    margin: 4px 0 2px 0;
}

/* === 3.2 CONTAINER PRINCIPAL === */
.container {
    display: flex;
    height: 93vh;
    overflow: hidden;
}


/* ===================================================================== */
/* 4. PAINEL ESQUERDO - ANÁLISE DE VÍDEO (80% da largura)              */
/* ===================================================================== */
/*                                                                       */
/* Fluxo: Vídeo carregado → Controles ativados → Análise iniciada     */
/* Esta seção contém estilos para:                                      */
/* - Player de vídeo e controles                                        */
/* - Botões de análise (IN/OUT/marker/tema/origem)                     */
/* - Console de códigos em tempo real                                   */
/* - Interface de spotting musical                                       */
/*                                                                       */
main {
    width: 80%;
    background-color: var(--darker-bg);
    padding: 0px;
    overflow-y: auto;
    border-right: 1px solid var(--border-dark);
    display: flex;
    flex-direction: column;
}

/* === 4.1 CONTAINER DE VÍDEO === */
.video-container {
    background-color: #000;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0px;
    height: 70vh;
    min-height: 300px;
    max-height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-dark);
    position: relative;
    width: 100%;
}

/* Modo Análise (03/10/2026, pedido do professor): reduz o vídeo pra 75% do
   tamanho de sempre (70vh/300px/800px * 0.75), liberando espaço vertical
   pro bloco de baixo — ver "body.modo-analise #codes-console" logo abaixo,
   que é quem recebe esse espaço liberado. Só muda em Análise; em Anotação
   o vídeo continua no tamanho de sempre. A coluna da direita (painel de
   códigos/export, ver `panel` e `#codesViewer`) não é afetada por esta
   regra, de propósito — pedido explícito do professor de deixá-la como
   está. */
body.modo-analise .video-container {
    height: 52.5vh;   /* 70vh * 0.75 */
    min-height: 225px; /* 300px * 0.75 */
    max-height: 600px; /* 800px * 0.75 */
}

/* fps/dur./offset: wrapper próprio (ver pages/main.html) pra preservar o
   espaçamento interno entre os três campos mesmo virando UM item flex
   dentro de .control-container (que antes tratava cada span/select/input
   como item separado). display/gap replicam o comportamento de antes. */
.controles-so-anotacao {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

/* Modo Análise (03/10/2026, pedido do professor): esconde fps/dur./offset
   nessa linha de controles — só fazem sentido configurar em Anotação, antes
   de começar a codificar. "atual" (#currentTime) fica de fora e continua
   visível nos dois modos. Abre espaço nesta linha pros próximos comandos
   que o professor vai inserir aqui, específicos de Análise. */
body.modo-analise .controles-so-anotacao {
    display: none;
}

#myVideo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
}

#videoPlaceholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #666;
    font-style: italic;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.video-container.has-video #videoPlaceholder {
    display: none;
}

.video-container.has-video #myVideo {
    display: block;
}

/* === OVERLAY DE TEXTO NO VÍDEO === */
.video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
    display: none;
    pointer-events: none;
}

.overlay-message {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1px 4px;
    font-size: 1.3rem;
    font-weight: normal;
    font-family: 'Cabin', sans-serif;
    transform: translate(-50%, -50%);
    animation: overlayFadeIn 0.3s ease-out;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: pre-line;
    border-radius: 1%;
    word-wrap: break-word;
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* === 4.2 CONTROLES DE VÍDEO === */
.control-container {
    display: flex;
    flex-direction: row;      /* Elementos em linha */
    flex-wrap: wrap;          /* Se não couber numa linha só, quebra a BARRA
                                  (não o texto dentro de cada botão) */
    align-items: center;
    justify-content: center;  /* Centraliza horizontalmente */
    gap: 18px;                /* Espaçamento normal restaurado */
    row-gap: 10px;
    padding: 12px 0;
    background-color: var(--dark-bg);
    border-radius: 4px;
    border: 1px solid var(--border-dark);
}

/* Botões de arquivo (Tela Cheia, Carregar Vídeo, Carregar SRT): texto mais
   longo que os outros botões da barra; sem isto, o flexbox espremia a
   largura deles antes de deixar a barra quebrar de linha, e o TEXTO
   quebrava dentro do botão (feio, ilegível). Nunca encolhe, nunca quebra
   texto; se faltar espaço, é a barra inteira que ganha uma segunda linha
   (ver flex-wrap acima). */
.file-button {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 2px 10px;
}

/* Botões de um único caractere/símbolo (#toggleOverlayTextoBtn "ø",
   #fullscreenBtn "▭"): de propósito SEM a classe .file-button (que tem
   padding largo, pensado pra texto tipo "Tela Cheia" — nome antigo do botão
   de fullscreen, trocado por um símbolo em 26/09/2026). Um único caractere
   não precisa desse padding largo; no caso do botão "ø", o padding extra
   deixava ele mais largo do que o necessário e empurrava a barra inteira
   pra quebrar de linha mais cedo, derrubando o fader de volume pra uma
   segunda linha (bug relatado pelo professor) — lição aplicada aqui também
   pro botão de fullscreen, preventivamente. Usa só o padding base de
   qualquer <button> (regra genérica no topo do arquivo), bem mais estreito;
   flex-shrink:0 evita que encolham até sumir sob pressão de espaço. */
.icon-btn {
    flex-shrink: 0;
    width: 32px; /* largura fixa, igual nos dois modos (pedido do professor,
                    03/10/2026): "▭" (tela cheia) e "ø" (overlay) ficam do
                    mesmo tamanho em Anotação e em Análise — sem isso, cada
                    ícone tinha a largura do próprio glifo/conteúdo, que
                    varia de caractere pra caractere mesmo com o mesmo
                    padding. Os botões ∩/∪ do toggle de filtro (.so-analise)
                    só existem/aparecem em Análise, mas herdam esta mesma
                    largura quando aparecem. */
}

.so-analise {
    display: none; /* escondido em Anotação */
}
body.modo-analise .so-analise {
    display: flex; /* mesmo display da regra genérica de button (linha ~62) */
}

.icon-btn.active {
    background: var(--primary-green);
    color: #fff;
    font-weight: 600;
}

.time-display { 
    font-family: 'Andale Mono','Monaco', monospace; 
    font-size: 0.8rem;
    color: var(--primary-green); 
    font-weight: 500; 
    background: var(--medium-bg); 
    padding: 6px 12px 6px 6px;
    border-radius: 4px; 
    min-width: 90px; 
    text-align: center; 
    white-space: nowrap; 
    height: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.video-controls {
    display: flex;
    gap: 6px;
}

.volume-container {
    display: flex;
    align-items: center;
    gap: 7.4px; /* -7% (era 8px) */
}

.volume-led {
    display: flex;
    gap: 1.9px; /* -7% (era 2px) */
    align-items: flex-end;
    height: 18.6px; /* -7% (era 20px); as barras (led-bar) usam % dessa
                        altura no HTML, então escalam junto automaticamente */
}

.led-bar {
    width: 3.7px; /* -7% (era 4px) */
    background-color: var(--primary-green);
    border-radius: 1px;
    transition: height 0.1s;
}

.volume-slider {
    width: 74.4px; /* -7% (era 80px) */
    height: 22.3px; /* -7% (era 24px) */
}

.file-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Controles manuais de entrada */
.manual-duration-input {
    font-family: 'Andale Mono','Monaco', monospace; 
    font-size: 0.8rem;
    color: var(--primary-green); 
    font-weight: 500; 
    background: var(--medium-bg); 
    padding: 6px 12px 6px 6px;
    border-radius: 4px; 
    border: none;
    width: 105px; 
    text-align: center; 
    white-space: nowrap; 
    height: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.manual-duration-input::placeholder {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.manual-duration-input:focus {
    outline: none;
    background: var(--light-bg);
}

.framerate-select {
    height: 24px;
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid var(--border-dark);
    background: var(--medium-bg);
    color: var(--text-light);
    font-family: 'Cabin', sans-serif;
    width: 82px;
    cursor: pointer;
}

.framerate-select:focus {
    outline: none;
    border-color: var(--primary-green);
    background: var(--light-bg);
}

.framerate-select option {
    background: var(--medium-bg);
    color: var(--text-light);
}

/* Labels para controles */
.control-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-right: -12px;  /* Reduz espaço à direita para ficar mais próximo do campo */
}

/* === 4.3 CONSOLE DE CÓDIGOS === */
#codes-console {
    display: grid;
    /* 9 colunas FIXAS de propósito (não usa auto-fit/auto-fill/minmax, que
       reflui o número de colunas conforme o espaço disponível): pedido do
       professor (26/09/2026) pra sempre ter 9 botões por linha, mesmo que o
       usuário mude o tamanho da letra do navegador/SO ou a resolução da
       tela. Cada coluna é 1fr (larguras iguais); o que muda com o tamanho
       da letra é só o conteúdo DENTRO de cada botão (ver `#codes-console
       button`, altura fixa em px), nunca a contagem de colunas. */
    grid-template-columns: repeat(9, 1fr);
    gap: 2px; /* Espaço igual entre todos os botões */
    align-items: flex-start;
    min-height: 60px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px 6px 0 6px; /* padding: top right bottom left */
}

/* Modo Análise (03/10/2026): recebe o espaço vertical que o vídeo liberou
   ao encolher pra 75% (ver "body.modo-analise .video-container" acima) —
   pedido do professor: "subindo o espaço do bloco dos botões, deixando
   mais espaço para codes". Em Análise, #codes-console é onde
   renderAnaliseConsole() desenha os chips de filtro (temas, tags "t.Nome",
   os 4 polos de harmonia etc.), que cresceram bastante de quantidade desde
   que isto foi escrito pela 1ª vez — o teto fixo de 220px (ainda usado em
   Anotação, sem mudança) ficava apertado demais pra tudo isso, forçando
   scroll interno. calc() soma o teto de sempre ao exato espaço que o vídeo
   deixou de ocupar (70vh - 52.5vh = 17.5vh), em vez de um número solto. */
body.modo-analise #codes-console {
    max-height: calc(220px + 17.5vh);
}

#codes-console button {
    width: 100%;      /* Ocupa toda a célula da grid */
}


/* ===================================================================== */
/* 5. PAINEL DIREITO - VISUALIZAÇÃO E EXPORTAÇÃO (20% da largura)      */
/* ===================================================================== */
/*                                                                       */
/* Fluxo: Códigos criados → Visualizados → Exportados                  */
/* Esta seção contém estilos para:                                      */
/* - Visualizador de códigos por categoria                              */
/* - Lista ordenada de análises                                         */
/* - Controles de exportação (JSON, SRT, XLSX, MIDI)                   */
/* - Sistema de filtros e organização                                   */
/*                                                                       */
panel {
    position: relative;
    width: 20%;
    background-color: var(--dark-bg);
    padding: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* === 5.1 VISUALIZADOR DE CÓDIGOS === */
#codesViewer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    overflow-y: auto;
    flex: 84 1 0%;
    min-height: 0;
}

.codes-block {
    background: var(--medium-bg);
    border-radius: 6px;
    padding: 6px 6px;
    box-shadow: 0 1px 4px #0002;
    display: flex;
    flex-direction: column;
    gap: 0px;
    border: 0px solid var(--border-dark);
}

.codes-top-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.codes-block-number {
    font-family: 'Andale Mono', 'Monaco', monospace;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    min-width: 20px;
    text-align: right;
    margin-right: 2px;
}

.codes-timestamp {
    font-family: 'Andale Mono', 'Monaco', monospace;
    color: var(--primary-green);
    font-weight: 600;
    font-size: 0.75rem;
    background: var(--light-bg);
    border-radius: 4px;
    padding: 2px 6px;
    margin-right: 10px;
    transition: all 0.2s ease;
}

.codes-timestamp.timestamp-highlight {
    filter: brightness(2.5) saturate(1.5);
    box-shadow: 0 0 4px var(--primary-green), 0 0 8px rgba(76, 175, 80, 0.3);
    transform: scale(1.03);
}

.codes-mini-btn {
    background: var(--light-bg);
    color: var(--text-light);
    border-radius: 3px;
    border: none;
    font-size: 0.75rem;
    padding: 2px 6px;
    cursor: pointer;
    transition: background 0.2s;
}

/* Modo Análise: botão "@" (reprogramar) congelado, code já aplicado não
   pode ser movido. Ver readOnly em renderCodesViewer() (app.js). */
.codes-mini-btn-frozen,
.codes-mini-btn-frozen:hover {
    opacity: 0.4;
    cursor: not-allowed;
    filter: none;
}

/* Modo Análise: tema já aplicado congelado, não dá pra apagar/fundir
   clicando nele (só o comentário do bloco continua editável). */
.code-item-frozen {
    opacity: 0.85;
}

.codes-row {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 2px;
}

.codes-comment-row {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--dark-bg);
    border-radius: 3px;
    padding: 0px;
    min-height: 20px;
    margin-top: 2px;
    word-break: break-word;
}

.codes-comment-input {
    width: 100%;
    background: var(--dark-bg);
    color: var(--text-light);
    border: 1px solid var(--border-dark);
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 0.75rem;
    margin-top: 2px;
    outline: none;
    /* Virou <textarea> em 03/10/2026 (pedido do professor: comentários de
       Análise podem ficar mais textuais/específicos — um <input> de uma
       linha só não ajudava nem aumentando a altura, texto nunca quebrava).
       min-height de 1 linha, igual nos dois modos: a altura MAIOR não
       precisa mais de um piso diferente em Análise porque o campo cresce
       sozinho com o conteúdo (ver ajustarAlturaDoComentario() em app.js,
       mesmo dia) — um piso de 48px só em Análise virou redundante assim
       que o auto-crescimento existiu, e foi removido. resize:vertical
       deixa o próprio professor esticar mais se precisar, nos dois modos.
       box-sizing
       garante que o padding não estoure a largura de 100% herdada do
       <input> antigo. font-family: inherit porque <textarea> tem fonte
       monoespaçada por padrão no navegador, diferente de <input> — sem
       isso, só o campo de comentário ficaria com letra diferente do resto
       da lista. */
    font-family: inherit;
    min-height: 26px;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.4;
    overflow-y: hidden; /* altura agora é controlada por JS (scrollHeight,
                            ver ajustarAlturaDoComentario em app.js) — sem
                            isso, uma barra de rolagem interna piscava antes
                            do ajuste. resize:vertical continua funcionando
                            mesmo com overflow-y:hidden. */
}

.codes-comment-input:focus {
    border-color: var(--primary-green);
    background: var(--medium-bg);
}

.codes-placeholder {
    color: #666;
    font-style: italic;
    padding: 20px;
    text-align: left;
}

/* === 5.2 CONTROLES DE EXPORTAÇÃO === */
.export-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 24px; /* igual à altura dos botões */
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 0 0 0 0;
    border-top: 1px solid var(--border-dark);
    background: var(--dark-bg);
    flex: 16 1 0%;
    min-height: 0;
    align-items: flex-start;
    box-sizing: border-box;
    position: static;
}

/* ===================================================================== */
/* ESTILOS PARA LEGENDAS SRT                                            */
/* ===================================================================== */

/* Estilos para legendas WebVTT */
video::cue {
    font-family: 'Cabin', sans-serif;
    font-size: 150%; /* 100% = 16px (tamanho padrão) */
    font-weight: 400;
    background: rgba(0, 0, 0, 0.5); /* Fundo preto com 50% transparência */
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    line-height: 1.2;
    padding: 2px 4px;
    border-radius: 2px;
}

/* Garantia para diferentes navegadores */
::cue {
    font-family: 'Cabin', sans-serif !important;
    font-size: 150% !important; /* 100% = 16px padrão */
    background: rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ===================================================================== */
/* 6. UTILITÁRIOS E COMPATIBILIDADE                                     */
/* ===================================================================== */
/*                                                                       */
/* Esta seção contém:                                                   */
/* - Ajustes de compatibilidade entre navegadores                       */
/* - Utilitários de responsividade                                      */
/* - Overrides necessários para componentes externos                    */
/* - Garantias de funcionamento em diferentes dispositivos              */
/*                                                                       */

/* === FIM DO ARQUIVO CSS === */