@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@100;300;500&family=Prompt:wght@300;400&display=swap');

:root {
    --color-primary: #2700ff;
    --color-secondary: #ff0173;
    --color-tertiary: #f76002;
    --color-quaternary: #66c901;
    --color-dark-blue: #000050;
    --color-darkest-blue: #00001e;

    --bg-color: #f8f9fa;
    --text-color: #495057;
    --heading-color: #00001e;
    --card-bg: #ffffff;
    --card-border: #dee2e6;
}

html[data-bs-theme="dark"] {
    --bg-color: #121212;
    --text-color: #adb5bd;
    --heading-color: #ffffff;
    --card-bg: #1e1e1e;
    --card-border: #343a40;
}

html, body { height: 100%; }
body {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    background-color: var(--bg-color);
    color: var(--text-color);
}
h1, h2, h3, h4, h5, h6 { font-family: 'Prompt', sans-serif; font-weight: 600; color: var(--heading-color); }
.btn { font-family: 'Alegreya Sans SC', sans-serif; font-weight: 300; letter-spacing: 0.5px; }
.card { background-color: var(--card-bg); border-color: var(--card-border); }

#wrapper { display: flex; width: 100%; min-height: 100vh; }
#page-content-wrapper { width: 100%; }
main#page-content-wrapper { min-height: 100vh; }

#sidebar-wrapper { background-color: var(--color-darkest-blue); width: 250px; transition: margin-left 0.3s; }
#wrapper.toggled #sidebar-wrapper { margin-left: -250px; }

@media (min-width: 992px) {
    #sidebar-wrapper { margin-left: 0; }
    #wrapper.toggled #sidebar-wrapper { margin-left: -250px; }
    #page-content-wrapper { width: calc(100% - 250px); }
    #wrapper.toggled #page-content-wrapper { width: 100%; }
    #sidebarToggle { display: none; }
}
/* --- Barra lateral --- */
#sidebar-wrapper {
    background-color: var(--color-darkest-blue);
    width: 300px;
}
#sidebar-wrapper .sidebar-heading {
    color: white;
}
#sidebar-wrapper .list-group-item {
    color: rgba(255, 255, 255, 0.7);
    background-color: var(--color-darkest-blue);
    border-color: #4f5e6c !important;
}
#sidebar-wrapper .list-group-item:hover, #sidebar-wrapper .list-group-item.active {
    color: white;
    background: var(--color-dark-blue);
}

/* Botón con degradado */
.btn-gradient {
    color: #ffffff;
    border: none;
    background: linear-gradient(90deg, #2700ff, #ff0173, #f76002, #66c901);
    background-size: 300% 100%;
    transition: all 0.4s ease-in-out;
}
.btn-gradient:hover {
    background-position: 100% 0;
    color: #ffffff;
}
/* --- Fondo Animado para Páginas de Autenticación --- */
.auth-bg {
    background: linear-gradient(45deg, #2700ff, #ff0173, #f76002, #66c901);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Estilos para el contenedor del formulario en la página de login */
.login-container {
    max-width: 600px;
    width: 100%;
}

/* Contenedor y enlace del botón flotante */
.telegram-flotante {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000; 
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background-color: #24A1DE;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.2s ease-in-out;

	/* ¡CAMBIO! Elimina el subrayado del enlace */
	text-decoration: none;
}

.telegram-flotante:hover {
	transform: scale(1.1);
}

/* Estilo del ícono de Telegram */
.telegram-flotante i {
	color: #FFFFFF; /* Ícono blanco */
	
	/* ¡CAMBIO! Ícono más grande */
	font-size: 38px; 

	/* ¡CAMBIO! Asegura que no tenga un fondo propio */
	background: transparent;
}