/* estilos_sikker.css */

/* ---------------------------------------------------------------------- */
/* 1. ESTILOS GLOBALES Y FONDO (Aplicable a todas las páginas de acceso)  */
/* ---------------------------------------------------------------------- */

/* Fondo Alerta Dinámica: Azul, Verde, Rojo, Amarillo */
body { 
    background: linear-gradient(135deg, #1E90FF, #3CB371, #5014DC, #FFD700);
    background-size: 500% 500%; 
    animation: alerta-dinamica 30s ease infinite; 
    
    /* Centrado del contenido principal de la página */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh;
    margin: 0;
}

/* Definición de la animación de movimiento de color */
@keyframes alerta-dinamica {
    0% {
        background-position: 0% 0%; 
    }
    25% {
        background-position: 50% 100%; 
    }
    50% {
        background-position: 100% 0%; 
    }
    75% {
        background-position: 50% 50%; 
    }
    100% {
        background-position: 0% 0%; 
    }
}

/* Estilos para los logos en la página de login */
.logo-login {
    width: 100px;  /* Ancho fijo para todos los logos */
    height: auto;  /* Altura automática para mantener la proporción de la imagen */
    max-height: 100px; /* Asegura que no sea más alta que este valor */
    object-fit: contain; /* Ajusta la imagen dentro de su caja sin recortarla */
    margin-bottom: 20px; /* Espacio debajo del logo */
    padding: 5px; /* Pequeño padding para que no se pegue a los bordes si la imagen es grande */
    background-color: transparent; /* Fondo transparente por si la imagen tiene un fondo blanco */
    border-radius: 5px; /* Ligeras esquinas redondeadas si es necesario */
}

/* Estilo para el logo principal de Sikker en el index */
.sikker-main-logo {
    width: 150px; /* Tamaño más grande para el logo principal */
    height: auto;
    object-fit: contain;
    /* mb-5 de Bootstrap ya le da un margin-bottom grande, pero se puede ajustar aquí: */
    /* margin-bottom: 2rem; */
}

/* Estilos para el contraste del texto sobre el fondo dinámico */
.container h1, .container h2, .container p a {
    color: #fff; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* ---------------------------------------------------------------------- */
/* 2. ESTILOS DE COMPONENTES (Usados en index.html y login.php)           */
/* ---------------------------------------------------------------------- */

/* Estilo para las tarjetas de selección de perfil (index.html) */
.card-perfil { 
    transition: transform 0.2s; 
    cursor: pointer; 
    border: 1px solid #ddd; 
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
}
.card-perfil:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); 
}
.card-img { 
    width: 80px; 
    height: 80px; 
    object-fit: contain; 
    margin-bottom: 10px; 
}

/* Estilo para el contenedor de login (login.php) */
.login-card { 
    max-width: 400px; 
    padding: 25px; 
    background-color: rgba(255, 255, 255, 0.95); 
    box-shadow: 0 0 15px rgba(0,0,0,0.2); 
    border-radius: 10px;
}