/* ==============================================================================
 * PROJETO GÊNESIS - REPROGRAMAÇÃO COM DECRETOS (INTERNACIONAL)
 * FOLHA DE ESTILOS v3.2 (Final com Player Customizado)
 *
 * CHANGELOG v3.2:
 * - [FEATURE] Adicionados estilos para customizar o player de áudio,
 * removendo controles desnecessários e melhorando a responsividade.
 * ============================================================================== */

/* --- Importação de Fontes --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* --- Estilos Globais e Corpo --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
    padding: 2rem 1rem;
    line-height: 1.6;
}

.container {
    max-width: 700px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
}

/* --- Seletor de Idiomas (Dropdown) --- */
.language-selector {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10;
}

#language-switcher {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 5px 10px;
    border: 2px solid #C0A45A;
    border-radius: 6px;
    background-color: #ffffff;
    color: #00285E;
    cursor: pointer;
}

#language-switcher:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(192, 164, 90, 0.5);
}


/* --- Cabeçalho --- */
.logo-header { background-color: #ffffff; text-align: center; padding-top: 20px; }
.logo-header .logo { width: 150px; height: auto; }
.title-header { background-color: #C0A45A; padding: 20px; text-align: center; }
.title-header .main-title { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #00285E; font-size: 25px; margin: 0; }

/* --- Conteúdo Principal --- */
.main-content { padding: 2rem 3rem; }
.main-content header { text-align: center; border-bottom: 1px solid #e0e0e0; padding-bottom: 1rem; margin-bottom: 1.5rem; }
#welcome-message { font-size: 1.2rem; font-weight: 600; color: #34495e; margin-bottom: 0.25rem; }
#instructions-text a { color: #3498db; text-decoration: underline; font-weight: 600; }
#instructions-text a:hover { color: #2980b9; }

#global-status { font-size: 1rem; color: #7f8c8d; min-height: 1.2em; }

/* --- Notificações --- */
#notification {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    position: relative;
    z-index: 1000;
}

#notification p { margin: 0; font-weight: 500; }
#notification button { background: none; border: none; color: #721c24; opacity: 0.7; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: opacity 0.2s; }
#notification button:hover { opacity: 1; }

/* --- Controles de Gravação Individuais --- */
.recording-controls-container {
    margin-top: 1.5rem;
}

.note-control { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap;
    gap: 15px;
    padding: 1.25rem 0; 
    border-bottom: 1px solid #f0f0f0;
}

.note-control:has(.note-status.recorded) {
    border-bottom-color: #27ae60;
}

.note-name { 
    flex-grow: 1;
    min-width: 100px;
    font-weight: 600; 
    font-size: 1.1rem; 
    color: #34495e;
}
.note-actions { 
    display: flex; 
    align-items: center; 
    gap: 10px;
    flex-wrap: wrap;
}
.note-status {
    width: 100px; 
    text-align: right; 
    font-size: 0.9rem; 
    color: #7f8c8d; 
    font-weight: 600;
}

.note-status.recorded { color: #27ae60; }
.record-btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: all 0.2s ease-in-out; background-color: #3498db; color: white; }
.record-btn:hover { background-color: #2980b9; }
.record-btn.is-recording { background-color: #e74c3c; color: white; cursor: wait; }
.record-btn.is-recorded { background-color: #f1c40f; color: #333; }
.record-btn.is-recorded:hover { background-color: #f39c12; }
.playback-player { width: 220px; height: 35px; }

/* --- Controles de Envio Final --- */
.submit-container { text-align: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid #e0e0e0; }
.submit-message { font-weight: 600; color: #34495e; margin-bottom: 1rem; }
.terms-checkbox-container { display: flex; justify-content: center; align-items: center; margin: 1.5rem 0; font-size: 0.9rem; color: #555; text-align: left; }
.terms-checkbox-container input { margin-right: 10px; cursor: pointer; transform: scale(1.2); }
.terms-checkbox-container label a { color: #3498db; text-decoration: underline; font-weight: 600; }
.terms-checkbox-container label a:hover { color: #2980b9; }
.submit-btn { background-color: #2ecc71; color: white; font-size: 1.2rem; font-weight: 600; padding: 0.8rem 2rem; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s ease-in-out; width: 100%; max-width: 400px; }
.submit-btn:hover { background-color: #27ae60; }
.submit-btn:disabled { background-color: #95a5a6; cursor: not-allowed; opacity: 0.7; }
.submit-btn.is-processing { background-color: #3498db; cursor: wait; }
.submit-btn.is-success { background-color: #27ae60; cursor: default; }

/* --- Responsividade --- */
@media (max-width: 768px) {
    .main-content {
        padding: 1.5rem;
    }
    .title-header .main-title {
        font-size: 20px;
    }
    .note-control {
        justify-content: flex-start;
    }
    .note-status {
        width: auto;
        text-align: left;
        margin-top: 5px;
    }
    /* Ajuste do dropdown de idiomas para telas menores */
    .language-selector {
        top: 10px;
        right: 10px;
    }
    #language-switcher {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}

/* ================================================================== */
/* ||          CUSTOMIZAÇÃO DO PLAYER DE ÁUDIO (Minimalista)         || */
/* ================================================================== */

/* Define um tamanho máximo para o player, consertando a diagramação no celular */
.playback-player {
    max-width: 160px;
    height: 40px;
    vertical-align: middle;
}

/* --- Oculta os elementos desnecessários dos controles de áudio --- */

/* Oculta a linha do tempo (scrubber) */
.playback-player::-webkit-media-controls-timeline {
    display: none;
}

/* Oculta os contadores de tempo (duração e tempo atual) */
.playback-player::-webkit-media-controls-current-time-display,
.playback-player::-webkit-media-controls-time-remaining-display {
    display: none;
}

/* Oculta o menu "três pontinhos" (overflow/mais opções) que atrapalha o clique */
.playback-player::-webkit-media-controls-overflow-button {
    display: none;
}

/* Garante que o painel principal de controles ocupe todo o espaço disponível */
.playback-player::-webkit-media-controls-panel {
    justify-content: space-between;
}