/* Paleta de Colores - Comparativo Mensual 2025 */
/* Basada en los colores del gráfico circular */

:root {
    /* Colores del gráfico por mes */
    --color-enero: #D4A574;
    /* Marrón claro */
    --color-febrero: #8B9467;
    /* Verde oliva */
    --color-marzo: #F4A460;
    /* Amarillo-naranja */
    --color-abril: #DAA520;
    /* Amarillo más oscuro */
    --color-mayo: #CD853F;
    /* Naranja-marrón */
    --color-junio: #8B7355;
    /* Verde-marrón */
    --color-julio: #D4AF37;
    /* Dorado-marrón */
    --color-agosto: #696969;
    /* Gris oscuro-marrón */

    /* Colores Específicos Tarjetas Estadísticas (Lista Documentos) */
    --color-stats-card-bg-start: #efebe9;
    --color-stats-card-bg-end: #d7ccc8;
    --color-stats-card-border: #d7ccc8;
    --color-stats-text: #4e342e;
    --color-stats-title: #5D4037;

    /* Color Piedra (Bronce/Café) */
    --color-piedra: #8D6E63;
    --color-piedra-hover: #6D4C41;

    /* Colores principales del sistema (basados en la paleta) */
    --color-primary: var(--color-julio);
    /* Dorado-marrón como color principal */
    --color-secondary: var(--color-marzo);
    /* Amarillo-naranja como secundario */
    --color-success: var(--color-febrero);
    /* Verde oliva para éxito */
    --color-warning: var(--color-abril);
    /* Amarillo oscuro para advertencias */
    --color-danger: var(--color-mayo);
    /* Naranja-marrón para peligro */
    --color-info: var(--color-junio);
    /* Verde-marrón para información */

    /* Colores de fondo y texto */
    --color-bg-light: #F5F5F0;
    --color-bg-dark: #2C2C2C;
    --color-text-primary: #2C3E50;
    --color-text-secondary: #7F8C8D;

    /* Nuevas variables Tierra / Premium */
    --color-tierra-claro: #efebe9;
    --color-tierra-medio: #d7ccc8;
    --color-cafe-oscuro: #5D4037;
    --color-cafe-muy-oscuro: #4e342e;
}

/* Clases utilitarias para usar los colores */
.color-enero {
    color: var(--color-enero);
}

.bg-enero {
    background-color: var(--color-enero);
}

.border-enero {
    border-color: var(--color-enero);
}

.color-febrero {
    color: var(--color-febrero);
}

.bg-febrero {
    background-color: var(--color-febrero);
}

.border-febrero {
    border-color: var(--color-febrero);
}

.color-marzo {
    color: var(--color-marzo);
}

.bg-marzo {
    background-color: var(--color-marzo);
}

.border-marzo {
    border-color: var(--color-marzo);
}

.color-abril {
    color: var(--color-abril);
}

.bg-abril {
    background-color: var(--color-abril);
}

.border-abril {
    border-color: var(--color-abril);
}

.color-mayo {
    color: var(--color-mayo);
}

.bg-mayo {
    background-color: var(--color-mayo);
}

.border-mayo {
    border-color: var(--color-mayo);
}

.color-junio {
    color: var(--color-junio);
}

.bg-junio {
    background-color: var(--color-junio);
}

.border-junio {
    border-color: var(--color-junio);
}

.color-julio {
    color: var(--color-julio);
}

.bg-julio {
    background-color: var(--color-julio);
}

.border-julio {
    border-color: var(--color-julio);
}

.color-agosto {
    color: var(--color-agosto);
}

.bg-agosto {
    background-color: var(--color-agosto);
}

.border-agosto {
    border-color: var(--color-agosto);
}

/* Botones con colores de la paleta */
.btn-enero {
    background-color: var(--color-enero);
    border-color: var(--color-enero);
    color: white;
}

.btn-enero:hover {
    background-color: #C49564;
    border-color: #C49564;
    color: white;
}

.btn-febrero {
    background-color: var(--color-febrero);
    border-color: var(--color-febrero);
    color: white;
}

.btn-febrero:hover {
    background-color: #7A8457;
    border-color: #7A8457;
    color: white;
}

.btn-marzo {
    background-color: var(--color-marzo);
    border-color: var(--color-marzo);
    color: white;
}

.btn-marzo:hover {
    background-color: #E29450;
    border-color: #E29450;
    color: white;
}

.btn-abril {
    background-color: var(--color-abril);
    border-color: var(--color-abril);
    color: white;
}

.btn-abril:hover {
    background-color: #C99510;
    border-color: #C99510;
    color: white;
}

.btn-mayo {
    background-color: var(--color-mayo);
    border-color: var(--color-mayo);
    color: white;
}

.btn-mayo:hover {
    background-color: #BD752F;
    border-color: #BD752F;
    color: white;
}

.btn-junio {
    background-color: var(--color-junio);
    border-color: var(--color-junio);
    color: white;
}

.btn-junio:hover {
    background-color: #7A6345;
    border-color: #7A6345;
    color: white;
}

.btn-julio {
    background-color: var(--color-julio);
    border-color: var(--color-julio);
    color: white;
}

.btn-julio:hover {
    background-color: #C49F27;
    border-color: #C49F27;
    color: white;
}

.btn-agosto {
    background-color: var(--color-agosto);
    border-color: var(--color-agosto);
    color: white;
}

.btn-agosto:hover {
    background-color: #595959;
    border-color: #595959;
    color: white;
}

/* Badges con colores de la paleta */
.badge-enero {
    background-color: var(--color-enero);
    color: white;
}

.badge-febrero {
    background-color: var(--color-febrero);
    color: white;
}

.badge-marzo {
    background-color: var(--color-marzo);
    color: white;
}

.badge-abril {
    background-color: var(--color-abril);
    color: white;
}

.badge-mayo {
    background-color: var(--color-mayo);
    color: white;
}

.badge-junio {
    background-color: var(--color-junio);
    color: white;
}

.badge-julio {
    background-color: var(--color-julio);
    color: white;
}

.badge-agosto {
    background-color: var(--color-agosto);
    color: white;
}

/* Gradientes con colores de la paleta */
.gradient-enero {
    background: linear-gradient(135deg, var(--color-enero) 0%, #C49564 100%);
}

.gradient-febrero {
    background: linear-gradient(135deg, var(--color-febrero) 0%, #7A8457 100%);
}

.gradient-marzo {
    background: linear-gradient(135deg, var(--color-marzo) 0%, #E29450 100%);
}

.gradient-abril {
    background: linear-gradient(135deg, var(--color-abril) 0%, #C99510 100%);
}

.gradient-mayo {
    background: linear-gradient(135deg, var(--color-mayo) 0%, #BD752F 100%);
}

.gradient-junio {
    background: linear-gradient(135deg, var(--color-junio) 0%, #7A6345 100%);
}

.gradient-julio {
    background: linear-gradient(135deg, var(--color-julio) 0%, #C49F27 100%);
}

.gradient-agosto {
    background: linear-gradient(135deg, var(--color-agosto) 0%, #595959 100%);
}

/* Utilidades de la Paleta Tierra */
.text-cafe-oscuro {
    color: var(--color-cafe-oscuro) !important;
}

.bg-tierra-gradiente {
    background: linear-gradient(135deg, var(--color-tierra-claro) 0%, var(--color-tierra-medio) 100%) !important;
}

.card-tierra {
    background: linear-gradient(135deg, var(--color-tierra-claro) 0%, var(--color-tierra-medio) 100%);
    border: 1px solid var(--color-tierra-medio);
    color: var(--color-cafe-muy-oscuro);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}


.btn-piedra {
    background-color: var(--color-piedra);
    border-color: var(--color-piedra);
    color: white;
}

.btn-piedra:hover {
    background-color: var(--color-piedra-hover);
    border-color: var(--color-piedra-hover);
    color: white;
}

/* Utilidades para Visualización de Estadísticas (Paleta) */
.bg-stats-start {
    background-color: var(--color-stats-card-bg-start) !important;
    color: var(--color-stats-title);
}

.bg-stats-end {
    background-color: var(--color-stats-card-bg-end) !important;
    color: var(--color-stats-title);
}

.text-stats-title {
    color: var(--color-stats-title) !important;
}

.card-stats-example {
    background: linear-gradient(135deg, var(--color-stats-card-bg-start) 0%, var(--color-stats-card-bg-end) 100%);
    border: 1px solid var(--color-stats-card-border);
    color: var(--color-stats-text);
}

.btn-stats-example {
    background-color: var(--color-piedra);
    border-color: var(--color-piedra);
    color: white;
}