/* ==========================================================================
   Sistema de Diseño Global - IMCAC
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables de Raíz (Tokens de Diseño)
   -------------------------------------------------------------------------- */
:root {
	/* Paleta de Colores Principal */
	--imcac-primary: #2F6FED;
	--imcac-primary-hover: #235ac8;
	--imcac-primary-focus-shadow: rgba(47, 111, 237, 0.35);
	--imcac-secondary: #6c757d;
	--imcac-secondary-hover: #5a6268;
	--imcac-success: #198754;
	--imcac-danger: #dc3545;
	--imcac-danger-hover: #f8f9fa;
	--imcac-light: #f8f9fa;
	--imcac-dark: #212529;
	--imcac-white: #ffffff;

	/* Tipografía */
	--imcac-font-sans-serif: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;

	/* Bordes y Sombras */
	--imcac-border-radius: 0.375rem; /* 6px */
	--imcac-border-radius-lg: 0.5rem; /* 8px */
	--imcac-border-width: 1px;
	--imcac-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* --------------------------------------------------------------------------
   2. Estilos Base para Botones y Enlaces
   -------------------------------------------------------------------------- */

.btn {
	display: inline-block;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	border: var(--imcac-border-width) solid transparent;
	padding: 0.5rem 1.25rem;
	font-size: 1rem;
	border-radius: var(--imcac-border-radius);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	min-height: 44px; /* Accesibilidad WCAG - Área táctil */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn:focus-visible {
	outline: 3px solid var(--imcac-primary-focus-shadow);
	outline-offset: 2px;
}

.btn:disabled,
.btn.disabled {
	opacity: 0.65;
	pointer-events: none;
}

/* --- Botón Primario --- */
.btn-primary {
	color: var(--imcac-white);
	background-color: var(--imcac-primary);
	border-color: var(--imcac-primary);
	box-shadow: var(--imcac-box-shadow);
}

.btn-primary:hover {
	color: var(--imcac-white);
	background-color: var(--imcac-primary-hover);
	border-color: var(--imcac-primary-hover);
}

/* --- Botón Secundario (Bordeado) --- */
.btn-secondary {
	color: var(--imcac-black);
	background-color: transparent;
	border-color: var(--imcac-black);
}

.btn-secondary:hover {
	color: var(--imcac-white);
	background-color: var(--imcac-secondary);
	border-color: var(--imcac-secondary);
}

/* --- Tamaños --- */
.btn-lg {
	padding: 0.75rem 1.5rem;
	font-size: 1.25rem;
	border-radius: var(--imcac-border-radius-lg);
}

.btn-sm {
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
	min-height: 38px;
}

/* --------------------------------------------------------------------------
   3. Componentes Específicos
   -------------------------------------------------------------------------- */

/* --- Dropdown Item de Peligro --- */
.dropdown-item.text-danger {
	font-weight: 600;
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
	color: var(--imcac-danger) !important;
	background-color: var(--imcac-danger-hover);

}

/* Si el elemento rojo es un <a> que no está dentro de un dropdown 
   y  que aplique un efecto hover similar: */
a.text-danger:hover,
a.text-danger:focus {
    /* Un ejemplo es un enlace de 'Eliminar Cuenta' */
    background-color: #fff0f0; /* Un rojo muy, muy claro */
    text-decoration: none; /* Quitamos el subrayado */
}

/* --------------------------------------------------------------------------
   4. Estructura de Layout y Utilidades
   -------------------------------------------------------------------------- */

/* --- Estructura del Layout Principal --- */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: row;
}

main {
	flex-grow: 1;
}

/* --- Barra Lateral (Sidebar) --- */
.sidebar {
	background-color: var(--imcac-dark);
}

/* Estilos para la barra lateral en pantallas grandes */
@media (min-width: 992px) {
	.sidebar {
		min-width: 250px;
		max-width: 250px;
	}
}

/* --- Clases de Utilidad --- */
.text-xs {
	font-size: .8rem;
}

/* --------------------------------------------------------------------------
   5. Estilos de Componentes de Bootstrap Sobreescritos
   (Anteriormente en custom-styles.css)
   -------------------------------------------------------------------------- */

/* --- Modales --- */
.modal-header {
	border-bottom: 1px solid var(--imcac-light);
	padding: 1rem 1.25rem;
}

.modal-title {
	font-weight: 650;
	color: var(--imcac-dark);
}

.modal-body {
	padding: 1.25rem;
}

.modal-footer {
	border-top: 1px solid var(--imcac-light);
	padding: 1rem 1.25rem;
}

/* --- Formularios --- */
.form-label {
	font-weight: 600;
	color: var(--imcac-dark);
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

.form-control,
.form-select {
	border: var(--imcac-border-width) solid #adb5bd !important; /* Borde más definido */
	border-radius: var(--imcac-border-radius) !important;
	padding: 0.6rem 0.8rem !important;
	font-size: 0.95rem !important;
	box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--imcac-primary) !important;
	box-shadow: 0 0 0 4px var(--imcac-primary-focus-shadow) !important;
}

/* --- Editor de Formularios (Collapsible) --- */
.collapsible-header::after {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-left: auto;
	content: "";
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: 1.25rem;
	transition: transform .2s ease-in-out;
}

.collapsible-header[aria-expanded="false"]::after {
	transform: rotate(-90deg);
}