/* ARQUIVO: style.css */
/* Paleta de Cores do Mundo dos Abrasivos */
:root {
    --cor-fundo: #060617;
    --cor-container: #1b1e2e; /* Derivado do preto e cinza-azulado */
    --cor-texto: #ffffff;
    --cor-cinza-azulado: #608693;
    --cor-azul-destaque: #3230bf;
    --cor-laranja-acao: #ff821c;
    --cor-preto-texto: #060617;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
}

.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: var(--cor-container);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* --- Header e Logo --- */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: var(--cor-preto-texto);
    border-bottom: 3px solid var(--cor-laranja-acao);
}

.header img {
    height: 60px;
    width: 60px;
    margin-right: 20px;
    border-radius: 50%;
    border: 2px solid var(--cor-cinza-azulado);
}

.header h1 {
    color: var(--cor-texto);
    font-size: 1.8em;
    margin: 0;
}

.header h2 {
    color: var(--cor-cinza-azulado);
    font-size: 1.2em;
    margin: 0;
    font-weight: normal;
}

/* --- Navegação Principal (index.html) --- */
.nav-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

.nav-link {
    display: block;
    padding: 30px 20px;
    background-color: var(--cor-cinza-azulado);
    color: var(--cor-preto-texto);
    text-decoration: none;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    transition: background-color 0.2s, transform 0.2s;
    border: 2px solid var(--cor-cinza-azulado);
}

.nav-link:hover {
    background-color: #7a9faa;
    transform: translateY(-5px);
    border-color: var(--cor-laranja-acao);
}

/* --- Estrutura das Calculadoras --- */
.calculadora {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 768px) {
    .calculadora {
        grid-template-columns: 1fr 1fr;
    }
    .grid-span-2 {
        grid-column: 1 / -1;
    }
}

.bloco {
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-cinza-azulado);
    border-radius: 8px;
    padding: 20px;
}

.bloco h2, .bloco h3 {
    margin-top: 0;
    color: var(--cor-laranja-acao);
    border-bottom: 1px solid var(--cor-cinza-azulado);
    padding-bottom: 5px;
}

.form-grupo {
    margin-bottom: 20px;
}

.form-grupo label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--cor-cinza-azulado);
}

.form-grupo input[type="number"],
.form-grupo select {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid var(--cor-cinza-azulado);
    border-radius: 4px;
    font-size: 1.1em;
    background-color: var(--cor-texto);
    color: var(--cor-preto-texto);
}

button.acao {
    background-color: var(--cor-laranja-acao);
    color: var(--cor-preto-texto);
    border: none;
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
    width: 100%;
    text-transform: uppercase;
}

button.acao:hover {
    background-color: #ff9d47;
}

/* --- Resultados TCO --- */
.bloco-resultado {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-cinza-azulado);
    border-radius: 4px;
}
.bloco-resultado h3 { color: var(--cor-laranja-acao); border: none; }
.bloco-resultado p { margin: 8px 0; font-size: 1.1em; font-weight: 600; }
.bloco-resultado span { float: right; }
.bloco-resultado .tco-total { font-size: 1.4em; color: var(--cor-laranja-acao); }

.veredicto { text-align: center; padding: 20px; border-radius: 8px; }
.vencedor { background-color: #0d6d0d2a; border: 2px solid #0d6d0d; }
.perdedor { background-color: #b02a2a2a; border: 2px solid #b02a2a; }
#tco-a.vencedor, #tco-b.vencedor { border-color: #0d6d0d; }
#tco-a.perdedor, #tco-b.perdedor { border-color: #b02a2a; }

/* --- Calculadora de Velocidade --- */
.radio-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.radio-grupo label {
    flex-grow: 1;
    text-align: center;
    padding: 10px;
    background: var(--cor-cinza-azulado);
    color: var(--cor-preto-texto);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.radio-grupo input[type="radio"] { display: none; }
.radio-grupo input[type="radio"]:checked + label {
    background-color: var(--cor-laranja-acao);
    font-weight: bold;
}
input[disabled] {
    background-color: var(--cor-cinza-azulado) !important;
    opacity: 0.7;
}

/* --- Conversor de Unidades --- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}
.tab-btn {
    padding: 10px 15px;
    background-color: var(--cor-cinza-azulado);
    color: var(--cor-preto-texto);
    border: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-weight: bold;
}
.tab-btn.active {
    background-color: var(--cor-laranja-acao);
}
.tab-content { display: none; }
.tab-content.active { display: block; }
.conversor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
}

/* Estilo específico para os campos de Valor e Resultado no Conversor */
#input-valor, #output-valor {
    font-size: 2.5em !important; /* Aumenta muito a fonte (aprox. 40px) */
    height: 80px !important;      /* Aumenta a altura do campo */
    text-align: center;           /* Centraliza o número */
    font-weight: 800;             /* Negrito pesado */
    padding: 0 10px;
}

/* --- CORREÇÃO DE RESPONSIVIDADE (MOBILE VS DESKTOP) --- */
/* Cole isto no final do style.css, substituindo o bloco anterior */

#input-valor, #output-valor {
    /* Regras de segurança para não estourar a tela */
    width: 100%; 
    max-width: 100%;
    box-sizing: border-box; /* OBRIGATÓRIO: Faz o padding contar dentro da largura */
    
    text-align: center;
    font-weight: 800;
    padding: 0 5px; /* Padding lateral reduzido para mobile */
    
    /* Tamanho padrão para CELULAR (Grande, mas cabe na tela) */
    font-size: 1.6em !important; 
    height: 60px !important;
}

/* Estilos Visuais (Cores e Bordas) */
/* --- CORREÇÃO DE COR E VISUALIZAÇÃO DO RESULTADO (style.css) --- */
/* Substitua a regra anterior do #output-valor por esta */

#output-valor {
    /* Fundo Escuro Profundo (mantido, pois funciona bem com a cor clara) */
    background-color: #0b0c10 !important; 
    
    /* Cor do Texto: Laranja Ação (#ff821c) - Igual ao título da função */
    color: var(--cor-laranja-acao) !important; 
    
    /* Borda usando a mesma cor para reforçar o destaque */
    border: 2px solid var(--cor-laranja-acao) !important; 
    
    text-shadow: none !important; /* Remove o efeito de brilho (glow) */
    
    /* Mantendo as regras de responsividade já estabelecidas */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-weight: 800;
    padding: 0 5px;
    
    /* Tamanho da fonte (mantendo a responsividade) */
    font-size: 1.8em !important; 
    height: 60px !important;
}

/* Ajuste para Desktop (Media Query já existente) */
@media (min-width: 768px) {
    #output-valor {
        font-size: 2.5em !important;
        height: 80px !important;
    }
}

#input-valor {
    color: var(--cor-preto-texto);
    border: 2px solid var(--cor-cinza-azulado);
}

.conversor-grid label {
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- MÁGICA DA TELA GRANDE --- */
/* Apenas se a tela for maior que 768px (Tablet/PC), aumenta para o tamanho gigante */
@media (min-width: 768px) {
    #input-valor, #output-valor {
        font-size: 2.5em !important;
        height: 80px !important;
        padding: 0 10px;
    }
    
    .conversor-grid label {
        font-size: 1.2em;
    }
}
/* --- MELHORIA DE CONTRASTE: CALCULADORA DE VELOCIDADE --- */
/* Adicione ao final do style.css */

/* 1. Aumenta a legibilidade de todos os campos nesta ferramenta */
#velocidade, #rpm, #diametro {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--cor-preto-texto);
    text-align: center;
}

/* 2. TRANSFORMA O CAMPO "DESABILITADO" EM CAMPO DE "RESULTADO" */
/* Quando o JS desabilita o campo, ele vira o destaque Laranja */
#velocidade:disabled, 
#rpm:disabled, 
#diametro:disabled {
    background-color: #ffffff !important;   /* Fundo Branco (remove o cinza) */
    color: var(--cor-laranja-acao) !important; /* Texto Laranja Ação */
    border: 2px solid var(--cor-laranja-acao) !important; /* Borda Laranja */
    opacity: 1 !important; /* Remove a transparência padrão de campo desativado */
    font-weight: 800; /* Negrito Extra */
    box-shadow: inset 0 0 5px rgba(255, 130, 28, 0.2); /* Leve brilho */
    cursor: default; /* Cursor normal em vez de 'bloqueado' */
}

/* --- ESTILOS PARA TABELAS INDUSTRIAIS (tabelas.html) --- */

/* Container que permite rolagem lateral no celular sem quebrar o site */
.tabela-responsive {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
    border: 1px solid var(--cor-cinza-azulado);
    border-radius: 4px;
}

.tabela-industrial {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px; /* Força largura mínima para garantir leitura */
    background-color: var(--cor-container);
    color: var(--cor-texto);
    font-size: 0.95em;
}

/* Cabeçalho da Tabela */
.tabela-industrial thead th {
    background-color: var(--cor-cinza-azulado);
    color: var(--cor-preto-texto);
    text-align: left;
    padding: 12px 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}

/* Células do Corpo */
.tabela-industrial tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid #2a2e45; /* Linha sutil separadora */
}

/* Efeito Zebrado (Listrado) para facilitar leitura de linhas longas */
.tabela-industrial tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Destaque ao passar o mouse (hover) */
.tabela-industrial tbody tr:hover {
    background-color: rgba(255, 130, 28, 0.1); /* Leve toque laranja */
    color: #fff;
}

/* Destaque para colunas de referência (primeira coluna) */
.tabela-industrial td:first-child {
    font-weight: bold;
    color: var(--cor-laranja-acao);
}

/* Notas de rodapé de tabela */
.nota-tabela {
    font-size: 0.8em;
    color: #889;
    margin-top: 5px;
    font-style: italic;
}