/*
 * BL Custom Branding Styles
 * Personalización corporativa para la plataforma BL
 */

:root {
	/* Colores corporativos BL */
	--bl-primary: #E74856;
	--bl-primary-dark: #C73544;
	--bl-primary-light: #FF5A6A;
	--bl-accent: #2A2A2A;
	--bl-background: #0f131d;
	--bl-background-light: #1a1e2e;
	--bl-text: #ffffff;
	--bl-text-secondary: #d9e4eb;
}

/* Logo BL styling */
#qos {
	color: var(--bl-primary) !important;
	font-weight: 700;
	text-shadow: 0 2px 4px rgba(231, 72, 86, 0.3);
}

#blLogo {
	height: 40px;
	width: 40px;
	transition: transform 0.3s ease;
	filter: drop-shadow(0 2px 4px rgba(231, 72, 86, 0.2));
}

#logoname {
	font-weight: 600 !important;
	font-size: 1.3em !important;
	letter-spacing: 0.05em !important;
	transition: all 0.3s ease;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

#logoname:hover {
	transform: scale(1.05);
	filter: brightness(1.1);
}

#logoname:hover #blLogo {
	transform: rotate(5deg) scale(1.1);
}

/* Header profesional */
#header {
	background: linear-gradient(135deg, var(--bl-background) 0%, var(--bl-background-light) 100%);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Botones estilo BL */
button, [role="button"] {
	background: linear-gradient(135deg, var(--bl-primary) 0%, var(--bl-primary-dark) 100%);
	transition: all 0.3s ease;
	border-radius: 4px;
	font-weight: 500;
}

button:hover, [role="button"]:hover {
	background: linear-gradient(135deg, var(--bl-primary-light) 0%, var(--bl-primary) 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(231, 72, 86, 0.4);
}

button:active, [role="button"]:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(231, 72, 86, 0.3);
}

/* Enlaces profesionales */
a {
	color: var(--bl-primary-light);
	transition: color 0.3s ease;
}

a:hover {
	color: var(--bl-primary);
}

/* Inputs con estilo BL */
input[type="text"],
input[type="password"],
textarea,
select {
	border: 2px solid rgba(231, 72, 86, 0.3);
	border-radius: 4px;
	transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border-color: var(--bl-primary);
	box-shadow: 0 0 10px rgba(231, 72, 86, 0.3);
	outline: none;
}

/* Contenedores de video profesionales */
.vidContainer {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
}

.vidContainer:hover {
	box-shadow: 0 6px 30px rgba(231, 72, 86, 0.3);
	transform: translateY(-2px);
}

/* Controles del director */
.controlButtons button,
.controlsGrid button {
	background: rgba(231, 72, 86, 0.9);
	backdrop-filter: blur(10px);
}

.controlButtons button:hover,
.controlsGrid button:hover {
	background: var(--bl-primary);
}

/* Notificaciones y alertas */
.popup-message,
.alert-message {
	border-left: 4px solid var(--bl-primary);
	background: rgba(231, 72, 86, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 4px;
}

/* Chat profesional */
#chatBody {
	background: rgba(15, 19, 29, 0.95);
	backdrop-filter: blur(10px);
	border-radius: 8px;
}

.chat-message {
	border-left: 3px solid var(--bl-primary);
	padding-left: 10px;
	transition: all 0.2s ease;
}

.chat-message:hover {
	background: rgba(231, 72, 86, 0.1);
}

/* Scrollbars personalizados */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: rgba(15, 19, 29, 0.5);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, var(--bl-primary) 0%, var(--bl-primary-dark) 100%);
	border-radius: 5px;
	transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--bl-primary-light);
}

/* Efectos de carga profesionales */
.loading-spinner {
	border-top-color: var(--bl-primary) !important;
	animation: bl-spin 1s linear infinite;
}

@keyframes bl-spin {
	to { transform: rotate(360deg); }
}

/* Tooltips profesionales */
[title]:hover::after {
	background: linear-gradient(135deg, var(--bl-primary) 0%, var(--bl-primary-dark) 100%);
	box-shadow: 0 4px 12px rgba(231, 72, 86, 0.4);
}

/* Responsive para logo */
@media (max-width: 768px) {
	#logoname {
		font-size: 1.1em !important;
	}
	
	#blLogo {
		height: 24px !important;
	}
}

/* Animaciones suaves para transiciones */
* {
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estados activos con color BL */
.active,
.selected,
[aria-pressed="true"] {
	background: var(--bl-primary) !important;
	border-color: var(--bl-primary) !important;
}

/* Tabs y navegación */
.tab-active {
	border-bottom: 3px solid var(--bl-primary);
	color: var(--bl-primary);
}

/* Cards y contenedores */
.card,
.panel {
	background: rgba(26, 30, 46, 0.9);
	border: 1px solid rgba(231, 72, 86, 0.2);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.card:hover,
.panel:hover {
	border-color: var(--bl-primary);
	box-shadow: 0 4px 20px rgba(231, 72, 86, 0.2);
}