:root {
    --chart-height: 400px;
    --line-thickness: 2px;
    --trigger-thickness: 1px;
    --event-radius: 4px;
    --c1-color: #e91700; /* Vermelho */
    --c2-color: #ff9d00; /* Laranja */
    --c3-color: #b0b305ff; /* Amarelo */
    --c4-color: #04c755; /* Verde */
    --c5-color: #0210d6; /* Azul */
    --c6-color: #8601bb; /* Violeta */
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: #f4f4f9; color: #333; }
.main-container { max-width: 900px; margin: 0 auto; background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1, h2 { color: #2c3e50; text-align: center; margin-top: 0; }
h3 { text-align: center; margin-top: 0; color: #555; font-weight: normal; }


.top-nav { display: flex; margin-bottom: 20px; }
.nav-btn { flex: 1; padding: 12px; font-size: 1.2rem; font-weight: bold; border: none; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.nav-btn.active { background-color: #34495e; color: white; }
.nav-btn.inactive { background-color: #ecf0f1; color: #2c3e50; }

.page-div { display: none; }
.page-div.visible { display: block; }

#div-conexao {
    flex-direction: column;
    min-height: 60vh;
}
#div-conexao.page-div.visible {
    display: flex;
}

button { background-color: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 16px; margin: 5px; transition: background-color 0.3s; }
button:hover { background-color: #2980b9; }
button:disabled { background-color: #bdc3c7; cursor: not-allowed; }

.status { 
    text-align: center; 
    font-weight: bold; 
    margin: 20px 0; 
    padding: 10px; 
    border-radius: 0px; /* Cantos retos */
}
.status.disconnected { background-color: #e74c3c; color: white; }
.status.connected { background-color: #2ecc71; color: white; }

.control-group { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }

/* Novo estilo para o container dos botões de conexão */
.connection-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espaço entre os botões */
}
.connection-buttons button {
    flex: 1; /* Faz os botões ocuparem o mesmo espaço */
    max-width: 200px; /* Define uma largura máxima para não ficarem muito grandes */
}

.connection-footer {
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
}
.connection-footer-text {
    margin: 0 auto;
    padding: 0 clamp(12px, 8vw, 120px);
    text-align: justify;
    text-align-last: center;
    line-height: 1.5;
}
.connection-footer-text a {
    color: inherit;
    font-weight: 600;
}
.connection-footer-logo {
    display: block;
    width: clamp(140px, 40vw, 260px);
    height: auto;
    margin: 12px auto 0;
}

label { display: block; margin-bottom: 8px; font-weight: bold; }
input[type="range"], input[type="number"], input[type="text"], select { width: 100%; box-sizing: border-box; padding: 8px; }

#btn-trigger-reading { 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espaço entre spinner e texto */
    width: 100%;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    margin: 0 auto 15px auto; /* <-- Centralização exata */
    padding: 12px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}
#btn-trigger-reading:hover {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
}
#btn-trigger-reading.reading { 
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}
#btn-trigger-reading.reading:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
}

#chart-container { position: relative; height: var(--chart-height); width: 100%; }

.toggle-grid, .time-table { width: 100%; border-collapse: collapse; text-align: center; margin-top: 20px; }
.toggle-grid th, .toggle-grid td, .time-table th, .time-table td { border: 1px solid #ddd; padding: 2px; }
.toggle-grid th { background-color: #f2f2f2; }
.toggle-grid .toggle-btn {
    width: 100%;
    padding: 4px 2px;
    border: 2px solid transparent;
    opacity: 0.5;
    line-height: 1.1;
    min-height: 32px;
    display: block;
    margin: 0 auto;
}
.toggle-grid .toggle-btn.enabled { opacity: 1; border-color: #34495e; }
.toggle-grid td { vertical-align: middle; height: 30px; }

#toggle-c1 { background-color: var(--c1-color); }
#toggle-c2 { background-color: var(--c2-color); }
#toggle-c3 { background-color: var(--c3-color); }
#toggle-c4 { background-color: var(--c4-color); }
#toggle-c5 { background-color: var(--c5-color); }
#toggle-c6 { background-color: var(--c6-color); }

.config-item { display: flex; align-items: center; gap: 15px; }
.config-item span { min-width: 50px; text-align: right; }

.collapsible-section { margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.collapsible-header { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff; 
    padding: 12px; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.collapsible-header h2 { color: #ffffff; font-size: 18px; font-weight: 500; }
.collapsible-header:hover { 
    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
}
.collapsible-content { padding: 15px; background-color: #fff; }
.collapsible-content.collapsed { display: none; }
.arrow { transition: transform 0.3s; font-size: 18px; color: #ffffff; }
.arrow.collapsed { transform: rotate(-90deg); }

.triangle-btn { 
    width: 0; 
    height: 0; 
    border-style: solid; 
    margin: 0 auto; 
    cursor: pointer; 
    opacity: 0.5;
    transition: opacity 0.3s;
    position: relative;
    display: inline-block;
}
.triangle-up { 
    border-width: 0 16px 28px 16px; 
    border-color: transparent transparent currentColor transparent;
    filter: drop-shadow(0 0 0 black) drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(0 -1px 0 black);
}
.triangle-down { 
    border-width: 28px 16px 0 16px; 
    border-color: currentColor transparent transparent transparent;
    filter: drop-shadow(0 0 0 black) drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(0 -1px 0 black);
}
.triangle-btn.enabled { 
    opacity: 1; 
    filter: brightness(1.1) drop-shadow(0 0 0 black) drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
}

/* --- Botões de Análise (Tabela de Tempos) --- */
.analysis-buttons { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    width: 100%;
}
#btn-zero-origin  { background-color: #226491; }  /* Azul suave */
#btn-zero-origin.enabled { background-color: #3498DB; }
#btn-show-events  { background-color: #1c8046; }  /* Verde */
#btn-show-events.enabled { background-color: #28B463; }
#btn-group-events { background-color: #8f5d0c; }  /* Amarelo-alaranjado */
#btn-group-events.enabled { background-color: #D68910; }

/* --- Botões de Salvamento --- */
.save-buttons { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    width: 100%;
}
#btn-copy-times { background-color: #3498DB; }   /* Azul suave */
#btn-save-times { background-color: #28B463; }   /* Verde */
#btn-save-graph { background-color: #D68910; }   /* Amarelo */
button:hover:not(:disabled) { filter: brightness(0.9); }

.analysis-buttons button,
.save-buttons button {
    font-weight: bold;
}

@media (max-width: 600px) {
    .analysis-buttons { grid-template-columns: 1fr; }
    .analysis-buttons button { width: 100%; }
    .save-buttons  { grid-template-columns: 1fr; }
    .save-buttons button { width: 100%; }
}

/* --- Estilos do Botão de Aquisição com Spinner --- */

/* Alinha o spinner e o texto no centro do botão */
#btn-trigger-reading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espaço entre o spinner e o texto */
}

/* Define a aparência do spinner: um círculo com borda */
.spinner {
    display: none; /* Oculto por padrão */
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3); /* Borda de fundo transparente */
    border-top-color: #ffffff; /* A parte que "gira" */
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite; /* Aplica a animação */
}

/* Mostra o spinner apenas quando a classe .reading está ativa no botão */
#btn-trigger-reading.reading .spinner {
    display: block;
}

/* Define a animação de rotação */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.chart-info-text {
    text-align: center;
    font-size: 0.9em; /* Ligeiramente menor que o texto normal */
    color: #555;       /* Cinza escuro, não preto */
    margin-top: 5px;
    margin-bottom: 0px;
}