/* colores.css */

/* --- Paleta Principal del Sistema --- */
:root {
	/* Marca (Brand) */
	--color-primary-500: #2563EB;   /* Azul Principal */
	--color-primary-600: #1E54CC;   /* Azul más oscuro para hover */
	--color-primary-50:  #EEF4FF;   /* Azul muy claro para fondos suaves */

	/* Neutrales */
	--color-bg: #F9FAFB;            /* Fondo general */
	--color-surface: #FFFFFF;       /* Superficies (tarjetas, modales) */
	--color-border: #E5E7EB;        /* Bordes suaves */
	--color-text: #111827;          /* Texto principal */
	--color-text-muted: #475569;    /* Texto secundario */
	--color-icon: #64748B;          /* Iconos neutrales */

	/* Estados */
	--color-success: #10B981;       /* Verde para OK */
	--color-error:   #EF4444;       /* Rojo para errores */
}

/* --- Estilos base que usarán todos los módulos --- */
body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
}

/* Utilitarios */
.card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 1rem; /* XL */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.btn-primary {
	background: var(--color-primary-500);
	color: #fff;
	border: none;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	cursor: pointer;
	font-weight: 600;
}
.btn-primary:hover {
	background: var(--color-primary-600);
}

.tab-active {
	color: var(--color-primary-500);
	border-bottom: 2px solid var(--color-primary-500);
}

.icon-muted {
	color: var(--color-icon);
}

.badge-ok {
	background: var(--color-success);
	color: #fff;
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
	font-size: 0.75rem;
}

.badge-error {
	background: var(--color-error);
	color: #fff;
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
	font-size: 0.75rem;
}