/*!
 * gestion.css
 * Improved layout background and general UI enhancements
 */

:root {
  --bg-gradient-light: radial-gradient(at 0% 0%, hsla(210, 100%, 95%, 1) 0, transparent 50%), 
                       radial-gradient(at 50% 0%, hsla(220, 100%, 97%, 1) 0, transparent 50%), 
                       radial-gradient(at 100% 0%, hsla(210, 100%, 95%, 1) 0, transparent 50%),
                       radial-gradient(at 50% 50%, hsla(220, 100%, 98%, 1) 0, transparent 50%);
  --bg-gradient-dark: radial-gradient(at 0% 0%, hsla(210, 30%, 15%, 1) 0, transparent 50%), 
                      radial-gradient(at 50% 0%, hsla(220, 30%, 12%, 1) 0, transparent 50%), 
                      radial-gradient(at 100% 0%, hsla(210, 30%, 15%, 1) 0, transparent 50%),
                      radial-gradient(at 50% 50%, hsla(220, 30%, 10%, 1) 0, transparent 50%);
}

body {
    background-color: #f4f6fa;
    background-image: var(--bg-gradient-light);
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
}

body.theme-dark {
    background-color: #0d1117;
    background-image: var(--bg-gradient-dark);
}

.page {
    background: transparent !important;
}

/* Glassmorphism for main content containers */
.card {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.theme-dark .card {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.valor-0 { background-color: #cceeff !important; }  /* Celeste */
.valor-1 { background-color: #ccffcc !important; }  /* Verde */
.valor-2 { background-color: #ffffcc !important; }  /* Amarillo */
.valor-3 { background-color: #ffcccc !important; }  /* Rojo */