/* === COMPONENTES REUTILIZÁVEIS === */

/* Reduzindo ainda mais o layout para cada item da grid */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Mais compacto */
    gap: 10px; /* Menor espaçamento entre as caixas */
}
/* Ajustando o conteúdo dos itens na grid */
.grid-auto .box-destaque {
    padding: 8px;   /* Menor padding para os itens */
}

/* BOX DESTACADO */
.box-destaque {
    background-color: #f9f9f9;
    border: 2px solid #697FEC;
    border-radius: 8px;  /* Menor borda */
    padding: 5px;        /* Diminui o padding para tornar as caixas bem menores */
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Sombra bem mais suave */
    transition: all 0.2s ease;
}

.box-destaque:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* LABEL PEQUENA */
.label-pequena {
    font-size: 0.65rem;    /* Fontes bem menores */
    color: #697FEC;
    font-weight: 600;
    margin-bottom: 3px;    /* Menor espaçamento inferior */
    text-transform: uppercase;
}
/* VALOR EM DESTAQUE */
/* VALOR EM DESTAQUE */
.valor-grande {
    font-size: 1.2rem;     /* Fontes mais compactas */
    font-weight: bold;
    color: #333;
}

/* TABELA ESTILIZADA */
.tabela-simples {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabela-simples thead {
    background-color: #697FEC;
    color: white;
}

.tabela-simples th,
.tabela-simples td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

/* BOTÃO PADRÃO */
.btn-padrao {
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Inter', sans-serif;
}

.btn-padrao:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4);
}

/* ALERTA SUCESSO */
.alerta-sucesso {
    background-color: #e6ffed;
    color: #2e7d32;
    padding: 12px 20px;
    border-left: 5px solid #4caf50;
    border-radius: 5px;
    margin: 10px 0;
}

/* ALERTA ERRO */
.alerta-erro {
    background-color: #ffebee;
    color: #c62828;
    padding: 12px 20px;
    border-left: 5px solid #f44336;
    border-radius: 5px;
    margin: 10px 0;
}
/* ITEM SIMPLES - Estilo para os elementos dentro da grid */
.item {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 15px;
}

.item .label-pequena {
    font-size: 0.85rem;
    color: #697FEC;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.item .valor-grande {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
}