/* Variáveis de cores */
:root {
    --cor-fundo: #F8F4E3;
    /* Bege muito claro */
    --cor-card: #E8E2D7;
    /* Bege um pouco mais escuro para cards */
    --cor-texto: #333333;
    /* Cinza escuro (para texto normal) */
    --cor-texto-claro: #FFFFFF;
    /* Branco (para botões) */
    --cor-principal: #FF8C61;
    /* Laranja coral suave */
    --cor-distancia: #D9534F;
    /* Vermelho */
    --cor-botao-cinza: #555555;
    /* Cinza escuro do botão limpar */
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: Arial, sans-serif;
    padding: 20px;
}

/* Container principal */
.container-ferramenta {
    max-width: 800px;
    margin: 0 auto;
}

/* Títulos */
.main-title {
    text-align: center;
    color: var(--cor-principal);
}

.main-subtitle {
    text-align: center;
    font-size: 1.1em;
    color: #222222;
    /* Ajustado para tema claro */
    margin-top: -15px;
    margin-bottom: 30px;
}

/* Input */
.document-box {
    background-color: var(--cor-card);
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 20px;
    border: 1px solid #BDB7AC;
    /* Ajustado para tema claro */
}

.document-box h4 {
    margin-top: 0;
    font-size: 1.2em;
}

/* Abas Internas ("Colar Texto" / "Upload") */
.input-tab-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.input-tab-button {
    padding: 8px 15px;
    cursor: pointer;
    background-color: var(--cor-botao-cinza);
    /* Cinza escuro */
    border: none;
    color: var(--cor-texto-claro);
    /* MUDANÇA: Texto branco */
    border-radius: 5px;
    font-weight: bold;
}

.input-tab-button.active {
    background-color: var(--cor-principal);
    color: var(--cor-texto);
    /* MUDANÇA: Texto escuro */
}

/* Oculta/Mostra conteúdo da aba interna */
.input-tab-content {
    display: none;
}

.input-tab-content.active {
    display: block;
}

textarea {
    width: 100%;
    min-height: 150px;
    padding: 10px;
    background-color: #F0EDE1;
    /* MUDANÇA: Cor do textarea */
    color: var(--cor-texto);
    /* Texto escuro */
    border: 1px solid var(--cor-principal);
    border-radius: 4px;
    resize: vertical;
    box-sizing: border-box;
}

/* Estilos de Resultados */
#result-display {
    background-color: var(--cor-card);
    border-radius: 8px;
    border: 1px solid #BDB7AC;
    /* Ajustado para tema claro */
    padding: 25px;
    margin-top: 20px;
}

.result-title {
    text-align: center;
    margin-top: 0;
}

.metric-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.metric-box {
    flex: 1;
    text-align: center;
}

.metric-label {
    font-size: 0.8em;
    color: #222222;
    /* Ajustado para tema claro */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    font-size: 2.8em;
    font-weight: bold;
    margin-top: 5px;
}

#jaccard-similarity {
    color: var(--cor-principal);
}

#jaccard-distance {
    color: var(--cor-distancia);
}

.metric-divider {
    width: 1px;
    background-color: #BDB7AC;
    /* Ajustado para tema claro */
    height: 60px;
}

#status-message {
    font-size: 0.9em;
    color: #222222;
    /* Ajustado para tema claro */
    text-align: center;
    margin-top: 10px;
}

.separator {
    border: 0;
    border-top: 1px solid #BDB7AC;
    /* Ajustado para tema claro */
    margin: 20px 0;
}

#result-display p {
    background-color: #222222;
    /* MUDANÇA: Fundo escuro para a tira */
    color: var(--cor-texto-claro);
    /* MUDANÇA: Texto branco */
    padding: 10px;
    border-radius: 4px;
    margin: 5px 0;
    font-family: 'Courier New', Courier, monospace;
}

/* "Sobre" e "Limitações" */
.info-box {
    background-color: var(--cor-card);
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
    font-size: 0.9em;
    line-height: 1.5;
    color: #222222;
    border: 1px solid #BDB7AC;
    /* Ajustado para tema claro */
}

.info-box h3 {
    color: var(--cor-principal);
    margin-top: 0;
}

.info-box ul {
    padding-left: 20px;
}

/* Modifica o placeholder existente para ser clicável */
.upload-placeholder {
    display: block;
    border: 2px dashed #999;
    /* Ajustado para tema claro */
    border-radius: 5px;
    padding: 40px;
    text-align: center;
    color: #888;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.upload-placeholder:hover {
    background-color: #E0DBCE;
    /* Ajustado para tema claro */
    border-color: var(--cor-principal);
}

/* nome do arquivo */
.file-name-display {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #222222;
    /* Ajustado para tema claro */
    font-style: italic;
}

/* btn principais */
.button-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* btn "analizar" */
#btnAnalisar {
    width: calc(70% - 5px);
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    background-color: var(--cor-principal);
    color: var(--cor-texto);
    /* MUDANÇA: Texto escuro */
    border: none;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    margin-bottom: 0;
}

#btnAnalisar:hover {
    background-color: #E87A50;
    /* Laranja mais escuro */
}

/* btn "limpar" */
#btnClear {
    width: calc(30% - 5px);
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    background-color: var(--cor-botao-cinza);
    color: var(--cor-texto-claro);
    /* MUDANÇA: Texto branco */
    border: 1px solid #777;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    margin-bottom: 0;
}

#btnClear:hover {
    background-color: #666;
}

/* --- NOVO: Card de Opções (Stopwords) --- */
.options-box {
            /* Remove 'display: flex' e 'gap' */
            background-color: var(--cor-card);
            padding: 15px 25px;
            margin-bottom: 10px;
            border-radius: 8px;
            border: 1px solid #BDB7AC;
        }

        /* (NOVO) Para cada linha de opção */
        .option-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 5px 0; /* Espaçamento entre as linhas */
        }
        
        /* (Seu .options-box input[...] e label[...] existentes não precisam mudar) */
        .options-box input[type="checkbox"] {
            transform: scale(1.2); 
            cursor: pointer;
            accent-color: var(--cor-principal); 
        }

        .options-box label {
            color: var(--cor-texto);
            font-size: 0.9em;
            font-weight: bold;
            cursor: pointer;
        }