/* Definimos los colores principales inspirados en Candy Crush */
:root {
    --bs-primary: #ff6f61; /* Rosa vibrante */
    --bs-secondary: #ffcc00; /* Amarillo brillante */
    --bs-success: #4caf50; /* Verde dulce */
    --bs-danger: #e91e63; /* Rojo intenso */
    --bs-info: #2196f3; /* Azul brillante */
    --bs-light: #fff8dc; /* Crema claro */
    --bs-dark: #3b3b3b; /* Gris oscuro */
}

/* Personalización de botones */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.btn-primary:hover {
    background-color: #e85c55; /* Ajuste al hover */
    border-color: #e85c55;
}

.btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.btn-outline-primary:hover {
    background-color: var(--bs-primary);
    color: #fff;
}

.btn-outline-secondary {
    border-color: var(--bs-secondary);
    color: var(--bs-secondary);
}

.btn-outline-secondary:hover {
    background-color: var(--bs-secondary);
    color: #fff;
}

/* Personalización de tablas */
.table-primary {
    background-color: var(--bs-primary);
    color: #fff;
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 111, 97, 0.1); /* Sombra de rosa */
}

/* Encabezados estilizados */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Comic Sans MS', sans-serif; /* Estilo lúdico */
    color: var(--bs-primary);
}

/* Fondo general y ajuste del footer */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* Asegura que el contenido ocupe el espacio disponible */
}

body {
    background: linear-gradient(180deg, #ffcccb, #ffe4b5);
    font-family: 'Arial', sans-serif;
    margin: 0;
}

/* Tarjetas */
.card {
    border: 2px solid var(--bs-primary);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-title {
    font-weight: bold;
    color: var(--bs-primary);
}

/* Enlaces */
a {
    color: var(--bs-primary);
    text-decoration: none;
}

a:hover {
    color: #e85c55; /* Ajuste al hover */
    text-decoration: underline;
}

/* Footer */
footer {
    background-color: #fff;
    border-top: 1px solid #ddd;
    text-align: center;
    padding: 10px;
}

/* Encabezado con nuevo color */
header {
    background-color: #ffcccb; /* Combina con el fondo */
    padding: 20px 0;
}

header h1 {
    color: #3b3b3b; /* Contraste suave con el fondo */
}

header p {
    color: #555; /* Tonos neutros */
}
/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    header {
        height: 200px; /* Reducimos la altura del banner */
        background-size: cover; /* Aseguramos que cubra todo el ancho */
    }

    section h1 {
        font-size: 1.75rem; /* Reducimos el tamaño del título */
    }

    section p {
        font-size: 1rem; /* Reducimos el tamaño del párrafo */
    }

    main p {
        font-size: 0.9rem; /* Texto más compacto */
    }

    .btn-lg {
        padding: 0.5rem 1rem; /* Botones más pequeños */
        font-size: 1rem;
    }
}