/* ============================================
   VARIABLES CSS CENTRALIZADAS
   Todas las variables del sistema en un solo lugar
   ============================================ */

:root {
	/* ===== COLORES CORPORATIVOS ===== */
	--color-primary: #2e7cf6;
	--color-primary-dark: #1e5fc4;
	--color-primary-light: #4a8ff8;
	--color-primary-soft: #e3f0ff;
	
	--color-accent: #00d4a6;
	--color-accent-dark: #00b894;
	--color-accent-light: #26e6c4;
	
	--color-danger: #ff5b5b;
	--color-danger-dark: #e63939;
	--color-danger-light: #ff7a7a;
	
	--color-warning: #ffa726;
	--color-warning-dark: #f57c00;
	--color-warning-light: #ffb74d;
	
	--color-success: #66bb6a;
	--color-success-dark: #4caf50;
	--color-success-light: #81c784;
	
	--color-info: #42a5f5;
	--color-info-dark: #1e88e5;
	--color-info-light: #64b5f6;

	/* ===== FONDOS ===== */
	--color-bg: #f5f7fa;
	--color-bg-dark: #e8ebef;
	--color-panel: #ffffff;
	--color-panel-hover: #fafbfc;
	
	/* ===== TEXTOS ===== */
	--color-text-main: #192033;
	--color-text-secondary: #4a5568;
	--color-text-muted: #6b7280;
	--color-text-light: #9ca3af;
	--color-text-inverse: #ffffff;

	/* ===== BORDES ===== */
	--color-border: #e1e5ee;
	--color-border-soft: #e8ebef;
	--color-border-medium: #d1d5db;
	--color-border-dark: #9ca3af;
	--color-border-focus: var(--color-primary);

	/* ===== SIDEBAR ===== */
	--sidebar-bg: #062d4d;
	--sidebar-bg-grad: linear-gradient(180deg, #0a3a5e, #062d4d);
	--sidebar-text: #d6e4ef;
	--sidebar-text-active: #ffffff;
	--sidebar-item-hover: rgba(255, 255, 255, 0.10);
	--sidebar-item-active: rgba(255, 255, 255, 0.15);
	--sidebar-border: rgba(255, 255, 255, 0.1);

	/* ===== SOMBRAS ===== */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
	--shadow-soft: 0 3px 12px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);

	/* ===== RADIOS (BORDER-RADIUS) ===== */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 10px;
	--radius-xl: 12px;
	--radius-card: 12px;
	--radius-modal: 18px;
	--radius-full: 9999px;

	/* ===== ESPACIADO ===== */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;

	/* ===== INPUTS ===== */
	--form-ui-bg: #f3f4f6;
	--form-ui-border: #dbdbdb;
	--form-ui-border-focus: var(--color-primary);
	--form-ui-text: var(--color-text-main);
	--form-ui-placeholder: var(--color-text-muted);

	/* ===== SCROLLBAR ===== */
	--scrollbar-width: 8px;
	--scrollbar-width-hover: 12px;
	--scrollbar-track: var(--color-bg);
	--scrollbar-thumb: var(--color-border-medium);
	--scrollbar-thumb-hover: var(--color-border-dark);
}

/* ===== ESTILOS DE SCROLLBAR ===== */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-width);
	transition: width 0.2s ease, height 0.2s ease;
}

::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
	border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: var(--radius-sm);
	transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
	width: var(--scrollbar-width-hover);
	height: var(--scrollbar-width-hover);
}

/* Hacer scrollbar más ancho cuando el contenedor tiene hover */
/* Esto funciona cuando haces hover sobre cualquier elemento que tenga scroll */
*:hover::-webkit-scrollbar {
	width: var(--scrollbar-width-hover);
	height: var(--scrollbar-width-hover);
}

/* Para elementos específicos con scroll */
.scrollbar-custom:hover::-webkit-scrollbar,
.scrollbar-custom:hover::-webkit-scrollbar-thumb {
	width: var(--scrollbar-width-hover);
	height: var(--scrollbar-width-hover);
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Scrollbar para elementos específicos */
.scrollbar-custom::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-width);
}

.scrollbar-custom::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
	border-radius: var(--radius-sm);
}

.scrollbar-custom::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: var(--radius-sm);
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}