/* Efecto de fondo para toda la página */
body {
    /* El degradado exacto que pediste */
    background: linear-gradient(135deg, #59598A, #00D6E3);
    background-size: cover;
    background-attachment: fixed; /* El fondo se queda quieto al hacer scroll */
    min-height: 100vh;
    margin: 0;
    /* Color base del texto */
    color: #000000 !important;
}

/* =========================================
   2. CAPA DE CRISTAL ESMERILADO (Overlay)
   ========================================= */
/* Esto crea una capa "falsa" encima del fondo pero debajo del texto */
body::before {
    content: "";
    position: fixed; /* Cubre toda la pantalla */
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1; /* Se asegura de quedarse DETRÁS del texto */

    /* LA MAGIA DEL CRISTAL: */
    /* 1. Color blanco semitransparente (ajusta el 0.5 para más/menos opacidad) */
    background-color: rgba(255, 255, 255, 0.45);
    /* 2. El desenfoque intenso de lo que hay detrás */
    backdrop-filter: blur(10px) saturate(60%); /* Saturate aviva un poco los colores detrás del cristal */
    -webkit-backdrop-filter: blur(10px) saturate(60%); /* Para Safari */
}

/* Ajuste para las tarjetas (Cards) de las semanas */
.card {
    background: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px);
    border-radius: 15px;
    color: #000000 !important;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Forzar que los textos de los párrafos y títulos sean negros */
p, h1, h2, h3, h4, h5, h6, li, span {
    color: #000000 !important;
}


a, 
.expand-label, 
summary,
.expand > label,
.expand-title {
    color: #A39233 !important; /* Naranja vibrante */
    text-decoration: none;
}

/* 2. COLOR AL PASAR EL MOUSE (Hover) */
a:hover, 
.expand-label:hover, 
summary:hover, 
.expand > label:hover,
.expand-title:hover {
    color: #FF8C00 !important; /* Un naranja más intenso/rojizo */
    font-weight: bold;
    cursor: pointer;
}

/* 3. ICONOS (La flechita del desplegable) */
/* A veces la flecha tiene un color distinto, aquí la igualamos */
.expand-label i, 
.expand > label i,
summary::marker {
    color: #FF8C00 !important;
}

/* 3. Color del texto cuando lo seleccionas con el mouse (Resaltado) */
::selection {
    background: rgba(255, 140, 0, 0.2); /* Fondo naranja traslúcido */
    color: #000000;
}