/* Variables CSS para reutilización de colores */
:root {
    /* Modo día (tema oscuro como solicitado) */
    --day-bg-main: rgba(17, 24, 39, 0.85);
    --day-bg-card: #1F2937;
    --day-text-title: #FFFFFF;
    --day-text-patent: #DC2626;
    --day-text-numbers:rgb(216, 219, 222);
    --day-border: #374151;

    /* Modo noche (tema claro como solicitado) */
    --night-bg-main: #FFFFFF;
    --night-bg-card: #F3F4F6;
    --night-text-title:rgba(17, 24, 39, 0.85);
    --night-text-patent: #4B5563;
    --night-text-numbers: #DC2626;
    --night-border: #E5E7EB;

    --blue-bg-dark: #0e193c;
    --blue-bg-light: #345d98;
    --blue-line-dark: #1e3464;
    --blue-line-light: #1277e5;
    --blue-cyan: #21e7f5;
    --gray-light: #c9deec;
    --gray-dark: #514f63;
    --red-alert: #be4c6c;
}

/*Estilos azul*/
.theme-day {
    /* Fondo principal */
    background-color: var(--blue-bg-dark) !important;
}
/* Estilos base para body */
body.theme-day {
    background-color: var(--blue-bg-dark) !important;
    color: var(--gray-light);
}
/* Header y textos principales */
.theme-day .content-wrapper {
    background-color: var(--blue-bg-dark) !important;
}

.theme-day h1.display-4,
.theme-day .text-dark,
.theme-day #patio,
.theme-day #equipos,
.theme-day #ultima-actualizacion {
    color: var(--gray-light) !important;
}

.theme-night .box,
.theme-day .box
{
    border: none !important;
}

/* Cards de equipos */
.theme-day .card,
.theme-day .info-box {
    background-color: var(--blue-line-dark);
    border: 1px solid var(--day-border);
}

.theme-day .bg-head-table
{
    background-color: var(--blue-cyan);
    color: var(--blue-line-dark)
}

.theme-day .info-box-text {
    color: var(--blue-cyan) !important;
}

.theme-day .info-box-number {
    color: var(--blue-cyan) !important;
}

.theme-day #countdown {
    color: var(--day-text-title) !important;
}

.theme-day .columna-par
{
    background-color: var(--blue-line-dark) !important;
}

.theme-day .columna-impar
{
    background-color: var(--blue-line-light) !important;
}
.theme-day .columna-impar
.info-box-number
{
    color: var(--gray-light) !important;
}


/* Estilos para modo noche */
.theme-night {
    background-color: var(--night-bg-main);
}

body.theme-night {
    background-color: var(--night-bg-main);
    color: var(--night-text-title);
}

/* Header y textos principales */
.theme-night .content-wrapper {
    background-color: var(--night-bg-main);
}

.theme-night h1.display-4,
.theme-night .text-dark,
.theme-night #patio,
.theme-night #equipos,
.theme-night #ultima-actualizacion {
    color: var(--night-text-title) !important;
}

/* Cards de equipos */
.theme-night .card,
.theme-night .info-box {
    background-color: var(--night-bg-card);
    border: 1px solid var(--night-border);
}

.theme-night .info-box-text {
    color: var(--night-text-patent) !important;
}

.theme-night .info-box-number {
    color: var(--night-text-numbers) !important;
}

.theme-night #countdown {
    color: var(--night-text-title);
}

/* Utilidades compartidas */
.info-box {
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.info-box-content {
    padding: 1rem;
}

.info-box-number {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 0.5rem;
}