/* Variables CSS para el modo oscuro (por defecto) */
:root {
    --background: linear-gradient(135deg, #1e1f26, #323447);
    --text-color: #fff;
    --header-color: #ffd310;
    --footer-color: #bbb;
    --btne-bg: #ff6f00; /* Fondo botón educativa */
    --btne-hover-bg: #ffd310; /* Hover botón educativa */
    --btnp-bg: #3b82f6; /* Fondo botón pronunciación */
    --btnp-hover-bg: #60a5fa; /* Hover botón pronunciación */
}

/* Variables CSS para el modo claro */
.light-theme {
    --background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    --text-color: #000;
    --header-color: #ff6f00;
    --footer-color: #666;
    --btne-bg: #ffe082; /* Fondo botón educativa claro */
    --btne-hover-bg: #ffb74d; /* Hover botón educativa claro */
    --btnp-bg: #bbdefb; /* Fondo botón pronunciación claro */
    --btnp-hover-bg: #64b5f6; /* Hover botón pronunciación claro */
}

/* Configuración general */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: var(--background);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    transition: background 0.3s, color 0.3s;
}

/* Header fijo en la parte superior */
.header {
    position: relative; /* Cambiado de fixed a relative */
    text-align: center; /* Centra el contenido */
    width: 100%; /* Ocupa todo el ancho */
    margin-bottom: 20px; /* Espaciado entre el encabezado y las tarjetas */
    padding: 20px 0; /* Espaciado interno arriba y abajo */
    color: var(--header-color); /* Usa el color definido */
}
.header h1 {
    font-size: 3.5em; /* Tamaño grande para destacar */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 5px; /* Espaciado elegante entre letras */
    animation: glow 2s infinite; /* Animación opcional */
}
.header p {
    margin-bottom: 10px; /* Espaciado inferior del texto */
}
/* Contenedor de tarjetas */
.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px;
    flex-wrap: wrap;
}

/* Tarjetas */
.card {
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    width: 300px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.card.educativa {
    background: var(--btne-bg);
    color: var(--text-color);
    border: 2px solid #ff9f00;
}

.card.pronunciacion {
    background: var(--btnp-bg);
    color: var(--text-color);
    border: 2px solid #2563eb;
}

/* Botones */
.btne {
    display: inline-block;
    background: var(--btne-bg);
    color: var(--text-color);
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    transition: background 0.3s, color 0.3s;
}

.btne:hover {
    background: var(--btne-hover-bg);
}

.btnp {
    display: inline-block;
    background: var(--btnp-bg);
    color: var(--text-color);
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    transition: background 0.3s, color 0.3s;
}



/* Responsivo */
@media (max-width: 768px) {
    .cards {
        flex-direction: column;
        gap: 20px;
    }
}
/* Botón del tema */
.theme-toggle {
    position: relative;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #444; /* Fondo más oscuro para mejor contraste */
    color: #fff;
    padding: 8px 12px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 25px; /* Bordes más redondeados */
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, color 0.3s, transform 0.2s;
}
.container {
    display: flex;
    flex-direction: column; /* Elementos en columna */
    align-items: center; /* Centra el contenido horizontalmente */
    justify-content: flex-start; /* Inicia el contenido desde arriba */
    padding: 20px; /* Espaciado general */
    width: 100%; /* Ocupa todo el ancho */
}
.theme-toggle {
    margin-top: 20px; /* Espaciado con el texto superior */
    display: inline-flex; /* Flex para alinear ícono y texto */
    align-items: center;
    justify-content: center;
    background: #444; /* Fondo oscuro para contraste */
    color: #fff;
    padding: 10px 15px; /* Espaciado interno */
    font-size: 1em;
    font-weight: bold;
    border-radius: 20px; /* Bordes redondeados */
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, transform 0.2s;
}

.theme-toggle img {
    width: 18px; /* Tamaño del ícono */
    height: 18px;
    margin-right: 8px; /* Espacio entre ícono y texto */
}

.theme-toggle:hover {
    background: #ffd310; /* Color en hover */
    color: #333;
    transform: translateY(-2px); /* Animación flotante */
}
.btnp:hover {
    background: var(--btnp-hover-bg);
}
footer {
    width: 100%; /* Ocupa todo el ancho */
    text-align: center; /* Centra el texto */
    position: absolute; /* Coloca el footer en la parte inferior */
    bottom: 0; /* Alinea al borde inferior */
    left: 0; /* Alinea al borde izquierdo */
    padding: 10px 0; /* Espaciado interno */
    background: #222; /* Fondo oscuro */
    color: #bbb; /* Color de texto */
    font-size: 0.9em;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Sombra ligera para efecto */
}

body {
    position: relative; /* Asegura que el footer se posicione dentro del body */
    min-height: 100vh; /* El body ocupa toda la ventana */
    padding-bottom: 50px; /* Espacio para que el contenido no se superponga con el footer */
}
/* Animación de brillo */
@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 10px #ffd310, 0 0 20px #ff9f00, 0 0 30px #ff6f00;
    }
    50% {
        text-shadow: 0 0 20px #ffd310, 0 0 30px #ff9f00, 0 0 40px #ff6f00;
    }
}