/* Administración */
.edd-settings-container {
    max-width: 800px;
    margin: 0 auto;
}

.edd-section {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #f0f8ff; /* Fondo de todas las secciones igual al de la primera */
}

.edd-section h2 {
    margin-top: 0;
    font-size: 18px;
    color: #333333; /* Gris muy oscuro para los textos */
}

.edd-section input[type="text"],
.edd-section input[type="url"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.edd-section input[type="text"]:focus,
.edd-section input[type="url"]:focus {
    border-color: #0073aa;
    outline: none;
}

/* Sección de Instrucciones */
.edd-instructions-section {
    background-color: #f0f8ff; /* Fondo igual al de las demás secciones */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.edd-instructions-section h2 {
    font-size: 18px;
}

.edd-instructions-section p {
    color: #333333; /* Gris muy oscuro */
}

/* Estilos adaptados al modo claro y oscuro */
@media (prefers-color-scheme: dark) {
    .edd-section {
        background-color: #2a2a2a; /* Fondo más oscuro en modo oscuro */
        border: 1px solid #444; /* Borde más oscuro */
    }

    .edd-section h2,
    .edd-instructions-section h2,
    .edd-section p,
    .edd-instructions-section p,
    h1 {
        color: #e0e0e0; /* Texto más claro en modo oscuro */
    }

    .edd-instructions-section {
        background-color: #333; /* Fondo de la sección de instrucciones en modo oscuro */
    }

    .shortcode {
        color: #e0e0e0; /* Texto claro para el shortcode en modo oscuro */
    }

    .edd-section input[type="text"],
    .edd-section input[type="url"] {
        background-color: #444; /* Fondo más oscuro para inputs */
        border-color: #666; /* Borde de los inputs en modo oscuro */
        color: #e0e0e0; /* Texto más claro en los inputs */
    }

    .edd-section p,
    .edd-section label,
    .edd-instructions-section p {
        color: #e0e0e0; /* Texto más claro en modo oscuro */
    }
}

/* Asegurar que los textos descriptivos sean visibles en ambos modos */
.edd-section p,
.edd-section label {
    color: #FFFFFF; /* Gris muy oscuro para el texto descriptivo */
}

/* Estilo general para h2 dentro de .edd-section */
.edd-section h2 {
    margin-top: 0;
    font-size: 18px;
}

/* Estilo específico para h2 en modo oscuro */
@media (prefers-color-scheme: dark) {
    .edd-section h2 {
        color: #e0e0e0; /* Cambiar el color de h2 en modo oscuro */
    }

    .edd-instructions-section h2 {
        color: #e0e0e0; /* Cambiar color de h2 en la sección de instrucciones en modo oscuro */
    }
}

/* Ajuste general para h2 dentro de .edd-section */
.edd-section h2,
.edd-instructions-section h2 {
    color: var(--primary-color, #0073aa); /* Usa el color principal del tema o un fallback */
}

/* Para modo oscuro */
@media (prefers-color-scheme: dark) {
    .edd-section h2,
    .edd-instructions-section h2 {
        color: var(--primary-color-dark, #66c2ff); /* Color más claro en modo oscuro */
    }
}