/* Importa as fontes Poppins e Montserrat do Google Fonts */
@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');

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
    padding: 2rem 0;
}
.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;
}
.logo-header {
    background-color: #ffffff;
    text-align: center;
    padding-top: 20px;
}
.logo-header .logo {
    width: 150px;
    height: 150px;
}
.title-header {
    background-color: #C0A45A;
    padding: 20px;
    text-align: center;
}
.title-header .main-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: capitalize;
    color: #00285E;
    font-size: 25px;
    margin: 0;
}
.main-content {
    padding: 2rem 3rem;
}
.main-content header {
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.main-content header h1 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}
#welcome-message {
    font-size: 1.2rem;
    font-weight: 600;
    color: #34495e;
    margin-bottom: 0.25rem;
}
.notification {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.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; }
.note-control { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 1rem 0; 
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap; 
    gap: 10px; 
}
.note-name { font-weight: 600; font-size: 1.2rem; color: #34495e; width: 120px; }
.note-actions button { padding: 0.5rem 1rem; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: all 0.2s ease-in-out; }
.record-btn { background-color: #3498db; color: white; }
.record-btn:hover { background-color: #2980b9; }
.record-btn.is-recording { background-color: #e74c3c; cursor: wait; }
.record-btn.is-recorded { background-color: #27ae60; }
.record-btn.is-recorded:hover { background-color: #229954; }
.playback-player { width: 220px; height: 30px; }
.note-status { font-size: 0.9rem; color: #7f8c8d; width: 100px; text-align: right; }
.note-status.recorded { color: #27ae60; font-weight: 600; }
.bloco-confirmacao {
    margin: 30px 0;
    padding: 15px;
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    border-radius: 4px;
    color: #c09853;
}
.bloco-confirmacao div {
    display: flex;
    align-items: center;
}
.bloco-confirmacao input[type="checkbox"] {
    margin-right: 10px;
}
.main-controls { text-align: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e0e0e0; }
#submit-all { background-color: #2ecc71; color: white; font-size: 1.2rem; font-weight: 600; padding: 0.8rem 2rem; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.2s; }
#submit-all:hover { background-color: #27ae60; }
#submit-all:disabled { background-color: #95a5a6; cursor: not-allowed; }
#submit-all.is-processing { background-color: #c0392b; cursor: wait; }
#global-status { margin-top: 1rem; font-size: 1rem; color: #34495e; min-height: 24px; }
@media (max-width: 768px) {
    body { padding: 1rem 0; }
    .main-content { padding: 1.5rem; }
    .title-header .main-title { font-size: 17px; }
}