/* ===================================================
   CSS DEDICADO PARA CORES DOS NÚMEROS DA ROLETA
   ===================================================
   Este arquivo garante que as cores sejam aplicadas 
   corretamente em todos os contextos
*/

/* Cores básicas dos números - PRIORIDADE MÁXIMA */
.numero-item.vermelho,
.mini-numero.vermelho,
.numero.vermelho,
.vermelho,
div.numero-item.vermelho,
span.mini-numero.vermelho {
    background-color: #e74c3c !important;
    color: white !important;
    border: 2px solid #c0392b !important; /* Borda para debug */
}

.numero-item.preto,
.mini-numero.preto,
.numero.preto,
.preto,
div.numero-item.preto,
span.mini-numero.preto {
    background-color: #2c3e50 !important;
    color: white !important;
    border: 2px solid #1a252f !important; /* Borda para debug */
}

.numero-item.zero,
.mini-numero.zero,
.numero.zero,
.zero,
div.numero-item.zero,
span.mini-numero.zero {
    background-color: #27ae60 !important;
    color: white !important;
    border: 2px solid #1e8449 !important; /* Borda para debug */
}

/* Específico para histórico */
.ultimos-numeros-container .numero-item {
    color: white !important;
    font-weight: bold !important;
}

.ultimos-numeros-container .numero-item.vermelho {
    background-color: #e74c3c !important;
}

.ultimos-numeros-container .numero-item.preto {
    background-color: #2c3e50 !important;
}

.ultimos-numeros-container .numero-item.zero {
    background-color: #27ae60 !important;
}

/* Força aplicação em todos os elementos de número */
[class*="numero-item"][class*="vermelho"] {
    background-color: #e74c3c !important;
    color: white !important;
}

[class*="numero-item"][class*="preto"] {
    background-color: #2c3e50 !important;
    color: white !important;
}

[class*="numero-item"][class*="zero"] {
    background-color: #27ae60 !important;
    color: white !important;
}

/* Para conteúdo interno dos números */
.numero-content .valor {
    color: white !important;
    font-weight: bold !important;
}

.numero-content .timestamp {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Sobrescreve qualquer estilo conflitante */
.numero-item {
    color: white !important;
}

.numero-item * {
    color: inherit !important;
}

/* =========================================
   REGRAS ESPECÍFICAS PARA HISTÓRICO - DEBUG
   ========================================= */

/* Força aplicação em div específicos do histórico */
#ultimosNumerosComponent .numero-item.vermelho,
.ultimos-numeros-container .numero-item.vermelho {
    background-color: #e74c3c !important;
    color: white !important;
    border: 3px solid #c0392b !important;
}

#ultimosNumerosComponent .numero-item.preto,
.ultimos-numeros-container .numero-item.preto {
    background-color: #2c3e50 !important;
    color: white !important;
    border: 3px solid #1a252f !important;
}

#ultimosNumerosComponent .numero-item.zero,
.ultimos-numeros-container .numero-item.zero {
    background-color: #27ae60 !important;
    color: white !important;
    border: 3px solid #1e8449 !important;
}

/* Regra universal para forçar cores - ÚLTIMO RECURSO */
[class*="numero-item"][class*="vermelho"] {
    background-color: #e74c3c !important;
    color: white !important;
}

[class*="numero-item"][class*="preto"] {
    background-color: #2c3e50 !important;
    color: white !important;
}

[class*="numero-item"][class*="zero"] {
    background-color: #27ae60 !important;
    color: white !important;
}