:root {
	--primary-color: #011589;
	/* Azul Drotaca */
	--secondary-color: #003595;
	--bg-light: #f4f7f9;
	--white: #ffffff;
	--text-main: #334155;
	--text-muted: #64748b;
	--sidebar-width: 230px;
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body {
	background-color: var(--bg-light);
	color: var(--text-main);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --- SIDEBAR REFINADO --- */
#sidebar {
	background: #1e293b;
	/* Un gris azulado oscuro es más moderno que negro puro */
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
	min-width: var(--sidebar-width);
	max-width: var(--sidebar-width);
	min-height: 100vh;
	transition: var(--transition);
}

#sidebar.active {
	margin-left: calc(var(--sidebar-width) * -1);
}

.wrapper {
	display: flex;
	width: 100%;
	align-items: stretch;
}

#sidebar .nav-link {
	color: #94a3b8 !important;
	padding: 0.8rem 1rem;
	border-radius: 8px;
	margin: 0.2rem 0;
	transition: var(--transition);
}

#sidebar .nav-link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--white) !important;
	transform: translateX(5px);
}

#sidebar .nav-link.active {
	background: var(--primary-color);
	color: var(--white) !important;
}

#sidebar hr {
	background-color: rgba(255, 255, 255, 0.1);
	opacity: 0.2;
}

/* --- CONTENIDO Y CARDS --- */
.card {
	border: none !important;
	border-radius: 12px !important;
	box-shadow: var(--shadow-sm) !important;
	transition: var(--transition);
}

.card:hover {
	box-shadow: var(--shadow-md) !important;
}

/* --- TABLAS MODERNAS --- */
.table-responsive {
	border: none !important;
	background: var(--white);
	border-radius: 12px;
	padding: 1rem;
	box-shadow: var(--shadow-sm);
}

.table thead th {
	background-color: #f8fafc;
	color: var(--text-muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.025em;
	border-top: none;
	border-bottom: 2px solid #e2e8f0;
}

.table tbody tr {
	transition: var(--transition);
}

.table-hover tbody tr:hover {
	background-color: #f1f5f9 !important;
	transform: scale(1.002);
}

/* Status Badges (Ejemplo para tu columna Estatus) */
.badge-status {
	padding: 0.5em 1em;
	border-radius: 50px;
	font-weight: 500;
}

/* --- MODALES REFINADOS --- */
.modal-content {
	border: none;
	border-radius: 16px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header {
	border-bottom: 1px solid #f1f5f9;
	padding: 1.5rem;
}

.form-control,
.form-select {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 0.6rem 0.8rem;
	transition: var(--transition);
}

.form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(1, 21, 137, 0.1);
}

/* --- BOTONES --- */
.btn-primary {
	background-color: var(--primary-color) !important;
	border: none !important;
	padding: 0.6rem 1.2rem;
	border-radius: 8px;
	font-weight: 500;
}

.btn-primary:hover {
	background-color: var(--secondary-color) !important;
	box-shadow: 0 4px 12px rgba(1, 21, 137, 0.2);
}

/* --- NAVBAR --- */
.navbar {
	border-bottom: 1px solid #e2e8f0 !important;
	height: 70px;
}

#sidebarCollapse {
	font-size: 1.5rem;
	padding: 10px;
	border-radius: 8px;
	transition: var(--transition);
}

#sidebarCollapse:hover {
	background: #f1f5f9;
}


/* --- CONTENEDOR DE LA TABLA --- */
.table-responsive {
	background: transparent !important;
	/* Quitamos el fondo blanco del contenedor */
	padding: 0 !important;
	border: none !important;
}

/* --- ESTILO DE LA TABLA (CARD STYLE) --- */
.tab_ {
	border-collapse: separate !important;
	border-spacing: 0 12px !important;
	/* Espacio entre filas */
	margin-top: -12px;
	/* Compensa el espacio superior */
}

/* Cabecera limpia */
.tab_ thead th {
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 15px 20px;
}

/* Cada fila se convierte en una "Card" */
.tab_ tbody tr {
	background-color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
	transition: all 0.2s ease;
}

.tab_ tbody tr:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
	background-color: #fcfcfc !important;
}

/* Celdas individuales */
.tab_ tbody td {
	padding: 18px 20px !important;
	border: none !important;
	color: var(--text-main);
	vertical-align: middle;
}

/* Bordes redondeados en los extremos de la fila */
.tab_ tbody tr td:first-child {
	border-radius: 12px 0 0 12px !important;
	border-left: 4px solid transparent !important;
	/* Para indicadores de estado */
}

.tab_ tbody tr td:last-child {
	border-radius: 0 12px 12px 0 !important;
	text-align: right;
}

/* --- INDICADORES DE ESTATUS (BADGES) --- */
.badge-status {
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* Ejemplo de clases para estados (puedes usarlas en tu JS/Backend) */
.status-pendiente {
	background: #fff7ed;
	color: #c2410c;
	border: 1px solid #ffedd5;
}

.status-entregado {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #dcfce7;
}

.status-ruta {
	background: #eff6ff;
	color: #1d4ed8;
	border: 1px solid #dbeafe;
}

/* Estado: PRÉSTAMO */
.status-prestamo {
	background: #f5f3ff !important;
	color: #7c3aed !important;
	border: 1px solid #ddd6fe !important;
}

/* Estado: EXTRAVIADA (Rojo/Peligro) */
.status-extraviada {
	background: #fef2f2 !important;
	color: #991b1b !important;
	border: 1px solid #fee2e2 !important;
}

tr.order-extraviada td:first-child {
	border-left-color: #ef4444 !important;
}

/* Estado: EN TRANSBORDO (Ámbar/Logística de cambio) */
.status-en-transbordo {
	background: #fffbeb !important;
	/* Amarillo muy claro */
	color: #92400e !important;
	/* Marrón/Ámbar oscuro */
	border: 1px solid #fef3c7 !important;
}

tr.order-en-transbordo td:first-child {
	border-left-color: #f59e0b !important;
	/* Amarillo vibrante */
}

/* Estado: NO DISPONIBLE (Gris Oscuro/Bloqueado) */
.status-no-disponible {
	background: #f1f5f9 !important;
	color: #475569 !important;
	border: 1px solid #e2e8f0 !important;
}

tr.order-no-disponible td:first-child {
	border-left-color: #64748b !important;
}

/* Estado: DESINCORPORADO (Rosa/Baja) */
.status-desincorporado {
	background: #fff1f2 !important;
	color: #9f1239 !important;
	border: 1px solid #ffe4e6 !important;
}

tr.order-desincorporado td:first-child {
	border-left-color: #f43f5e !important;
}

/* Estado: RECOLECTADO (Cian/Logística) */
.status-recolectado {
	background: #ecfeff !important;
	color: #0e7490 !important;
	border: 1px solid #cffafe !important;
}

tr.order-recolectado td:first-child {
	border-left-color: #06b6d4 !important;
}

/* Indicador lateral para la fila de la tabla */
tr.order-prestamo td:first-child {
	border-left-color: #8b5cf6 !important;
}

/* Indicador lateral según estado */
tr.order-pendiente td:first-child {
	border-left-color: #f97316 !important;
}

tr.order-entregado td:first-child {
	border-left-color: #22c55e !important;
}

tr.order-ruta td:first-child {
	border-left-color: #3b82f6 !important;
}

/* Estilo para el número de pedido */
.order-number {
	font-weight: 700;
	color: var(--primary-color);
	background: #f0f2ff;
	padding: 4px 8px;
	border-radius: 6px;
}

/* --- CONTENEDOR GENERAL DE DATATABLES --- */
.dataTables_wrapper {
	padding: 1rem 0;
}

/* Buscador y Selector de cantidad (Length) */
.dataTables_filter input {
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
	margin-left: 10px !important;
	outline: none !important;
	transition: var(--transition);
}

.dataTables_filter input:focus {
	border-color: var(--primary-color) !important;
	box-shadow: 0 0 0 3px rgba(1, 21, 137, 0.1) !important;
}

.dataTables_length select {
	border: 1px solid #e2e8f0 !important;
	border-radius: 6px !important;
	padding: 4px 8px !important;
}

/* Info de "Mostrando X de Y" */
.dataTables_info {
	color: var(--text-muted) !important;
	font-size: 0.9rem;
	padding-top: 1.5rem !important;
}

/* --- PAGINACIÓN MODERNA --- */
.dataTables_paginate {
	padding-top: 1.5rem !important;
}

/* Botones base */
.dataTables_paginate .paginate_button {
	border: 1px solid #e2e8f0 !important;
	background: white !important;
	color: var(--text-main) !important;
	border-radius: 8px !important;
	margin: 0 3px !important;
	padding: 6px 12px !important;
	transition: var(--transition) !important;
}

/* Botón activo */
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
	/* background: var(--primary-color) !important; */
	color: white !important;
	border-color: var(--primary-color) !important;
}

/* Forzamos el color blanco atacando todas las combinaciones posibles del botón activo */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:active {
	/* background: var(--primary-color) !important; */
	border-color: var(--primary-color) !important;
	/* Usamos color blanco con !important y lo aplicamos al estado 'current' */
	color: #ffffff !important;
	text-shadow: none !important;
	/* A veces DataTables añade sombras que oscurecen el texto */
}

/* Adicionalmente, DataTables a veces usa un span interno o el estado hover cambia el color */
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	color: #ffffff !important;
}

/* Hover en botones no activos */
.dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
	background: #f1f5f9 !important;
	color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

/* Botones Anterior/Siguiente */
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
	font-weight: 600;
}

/* Deshabilitado */
.dataTables_paginate .paginate_button.disabled {
	opacity: 0.5;
	cursor: not-allowed !important;
}

/* --- LIMPIEZA DE BORDES DE LA TABLA --- */
table.dataTable.no-footer {
	border-bottom: none !important;
	/* Quita la línea negra fea de abajo */
}

table.dataTable thead th {
	border-bottom: 2px solid #f1f5f9 !important;
	/* Línea sutil bajo el header */
}

/* Contorno del buscador */
.dataTables_filter input {
	border: 1px solid #dee2e6 !important;
	border-radius: 20px !important;
	/* Estilo píldora, más moderno */
	padding: 5px 15px !important;
	background-color: #fff !important;
}

/* Contorno del selector de 'Mostrar X registros' */
.dataTables_length select {
	border: 1px solid #dee2e6 !important;
	border-radius: 8px !important;
	padding: 4px 10px !important;
	outline: none !important;
}

/* Quitar la línea horizontal negra que DataTables pone al final de la tabla */
.dataTable.no-footer {
	border-bottom: 0 !important;
}

.tab_ thead th {
	font-weight: 600;
	/* Hace que los encabezados de tabla resalten */
	font-size: 0.85rem;
}

.tab_ tbody td {
	font-weight: 400;
	/* Texto estándar limpio */
}

.order-number {
	font-family: 'Inter', monospace;
	/* Si prefieres un toque más técnico para los números */
	font-weight: 600;
}

#sidebar .nav-link {
	font-weight: 500;
	/* Ni muy delgado ni muy grueso, justo el punto de equilibrio */
	font-size: 0.95rem;
}

#modal_perf .modal-header {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	text-align: center;
	display: block;
	/* Para centrar el icono */
}

#modal_perf .modal-header h4 {
	color: white !important;
	margin-top: 10px;
}

#modal_perf .bi-person-circle {
	font-size: 3rem;
}

#modal_perf .modal-body strong {
	color: var(--text-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
}

/* --- CONTENEDOR DEL MODAL --- */
.modal-content {
	border: none !important;
	border-radius: 20px !important;
	/* Bordes más redondeados */
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
	overflow: hidden;
	background-color: #ffffff;
}

/* Cabecera estilizada */
.modal-header {
	background-color: #ffffff;
	border-bottom: 1px solid #f1f5f9 !important;
	padding: 1.5rem 2rem !important;
}

.modal-title,
.modal-body h3 {
	font-weight: 700 !important;
	color: var(--primary-color);
	letter-spacing: -0.025em;
	margin-bottom: 0;
}

/* Cuerpo del modal */
.modal-body {
	padding: 2rem !important;
	color: var(--text-main);
}

/* --- INPUTS Y FORMULARIOS DENTRO DEL MODAL --- */
.modal-body .form-control,
.modal-body .form-select {
	background-color: #f8fafc !important;
	/* Fondo sutil para los campos */
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	padding: 0.75rem 1rem !important;
	font-size: 0.95rem !important;
	transition: all 0.2s ease;
}

.modal-body .form-control:focus {
	background-color: #ffffff !important;
	border-color: var(--primary-color) !important;
	box-shadow: 0 0 0 4px rgba(1, 21, 137, 0.1) !important;
}

.modal-body p.m-0 {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 0.5rem !important;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

/* --- FOOTER Y BOTONES --- */
.modal-footer {
	background-color: #f8fafc;
	border-top: 1px solid #f1f5f9 !important;
	padding: 1.25rem 2rem !important;
}

.btn-secondary {
	background-color: #e2e8f0 !important;
	color: #475569 !important;
	border: none !important;
	font-weight: 600 !important;
}

.btn-secondary:hover {
	background-color: #cbd5e1 !important;
}

/* Estilo especial para el listado de cubetas dentro del modal */
#div_cuvettes {
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	background: #ffffff;
	max-height: 200px;
	overflow-y: auto;
	padding: 10px !important;
}

/* Scrollbar personalizado para el modal */
.modal-body::-webkit-scrollbar {
	width: 6px;
}

.modal-body::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 10px;
}


/* Colores suaves para los fondos de iconos */
.bg-blue-light {
	background-color: #e0e7ff !important;
}

.bg-green-light {
	background-color: #dcfce7 !important;
}

.bg-orange-light {
	background-color: #ffedd5 !important;
}

/* Contenedor circular del icono */
.icon-shape {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	/* Un poco redondeado pero no círculo perfecto */
}

/* Estilo de tarjeta KPI */
.card-kpi {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

.card-kpi:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Tipografía de los números */
.counter-value {
	font-family: 'Inter', sans-serif;
	font-size: 1.8rem;
	letter-spacing: -0.05em;
}

.text-uppercase {
	font-size: 0.7rem !important;
	letter-spacing: 0.05em;
}

/* --- LOGIN ESPECIAL --- */
.login-wrapper {
	background: radial-gradient(circle at top right, #f8fafc, #e2e8f0);
	/* Fondo con gradiente sutil */
	position: fixed;
	/* Opcional: asegura que no haya scroll si no es necesario */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999
}

.login-card {
	width: 100%;
	max-width: 420px;
	transition: transform 0.3s ease;
}

/* Estilo de los Inputs Flotantes */
.login-card .form-floating>.form-control {
	border: 1px solid #e2e8f0;
	background-color: #fbfcfd;
}

.login-card .form-floating>.form-control:focus {
	background-color: #ffffff;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 4px rgba(1, 21, 137, 0.1);
}

.login-card .form-floating>label {
	color: #94a3b8;
}

/* El botón de Drotaca con efecto de brillo */
.bg-drotaca {
	background: linear-gradient(135deg, #011589 0%, #010d5a 100%) !important;
	letter-spacing: 1px;
	transition: all 0.3s ease;
}

.bg-drotaca:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 15px rgba(1, 21, 137, 0.2) !important;
	filter: brightness(1.1);
}

/* Animación de entrada */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.login-card {
	animation: fadeInUp 0.5s ease-out;
}

/* Cambia el breakpoint de 768px a 992px */
@media (max-width: 992px) {
	/* #sidebar { */
		/* margin-left: calc(var(--sidebar-width) * -1); */
		/* Esconde el sidebar por defecto en tablets */
	/* } */

	#sidebar.active {
		margin-left: 0;
		/* Lo muestra cuando presionas el botón */
	}

	.tab_ thead {
		display: none;
		/* Modo card activado antes */
	}

	.tab_ tbody tr {
		display: block;
		width: 100% !important;
		margin-bottom: 1.5rem;
	}

	.tab_ tbody td {
		display: flex;
		justify-content: space-between;
		padding: 12px 15px !important;
	}

	/* Escondemos el thread (cabecera) de la tabla */
	.tab_ thead {
		display: none;
	}

	/* Cada fila se convierte en una 'Card' */
	.tab_ tbody tr,
	.tab_ tbody tr {
		display: block;
		margin-bottom: 1.5rem;
		border-radius: 15px !important;
		border: 1px solid #e2e8f0 !important;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
		background: #fff !important;
		padding: 10px;
		overflow: hidden;
	}

	/* Cada celda se comporta como una línea de datos */
	.tab_ tbody td,
	.tab_ tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: right;
		padding: 8px 12px !important;
		border-bottom: 1px solid #f1f5f9 !important;
		border-left: none !important;
		flex-wrap: wrap;
		/* Quitamos el borde lateral del diseño anterior */
	}

	/* El último elemento no lleva borde inferior */
	.tab_ tbody td:first-child {
		border-bottom: none !important;
		justify-content: center;
		/* Centramos los botones de acción */
		padding-top: 15px !important;
	}

	/* Agregamos etiquetas automáticas usando el atributo data-label */
	.tab_ tbody td::before {
		content: attr(data-label);
		/* Aquí va el nombre de la columna */
		font-weight: 700;
		text-transform: uppercase;
		font-size: 0.75rem;
		color: var(--text-muted);
		float: left;
		text-align: left;
	}
}

@media (max-width: 768px) {

	/* Escondemos el thread (cabecera) de la tabla */
	.tab_ thead {
		display: none;
	}

	/* Cada fila se convierte en una 'Card' */
	.tab_ tbody tr,
	.tab_ tbody tr {
		display: block;
		margin-bottom: 1.5rem;
		border-radius: 15px !important;
		border: 1px solid #e2e8f0 !important;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
		background: #fff !important;
		padding: 10px;
		overflow: hidden;
	}

	/* Cada celda se comporta como una línea de datos */
	.tab_ tbody td,
	.tab_ tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: right;
		padding: 8px 12px !important;
		border-bottom: 1px solid #f1f5f9 !important;
		border-left: none !important;
		flex-wrap: wrap;
		/* Quitamos el borde lateral del diseño anterior */
	}

	/* El último elemento no lleva borde inferior */
	.tab_ tbody td:first-child {
		border-bottom: none !important;
		justify-content: center;
		/* Centramos los botones de acción */
		padding-top: 15px !important;
	}

	/* Agregamos etiquetas automáticas usando el atributo data-label */
	.tab_ tbody td::before {
		content: attr(data-label);
		/* Aquí va el nombre de la columna */
		font-weight: 700;
		text-transform: uppercase;
		font-size: 0.75rem;
		color: var(--text-muted);
		float: left;
		text-align: left;
	}
}

/* --- CONTENEDORES SUPERIORES (LENGTH Y FILTER) --- */
.dataTables_wrapper .d-flex {
	gap: 1rem;
}

@media (max-width: 576px) {

	/* Forzamos que el buscador y el "Mostrar X" se apilen */
	.dataTables_wrapper .d-flex.justify-content-between {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	/* Buscador a ancho completo */
	.dataTables_filter {
		text-align: left !important;
		width: 100%;
		margin-top: 10px;
	}

	.dataTables_filter label {
		width: 100%;
		display: flex !important;
		align-items: center;
	}

	.dataTables_filter input {
		flex-grow: 1;
		/* El input ocupa todo el espacio sobrante */
		margin-left: 10px !important;
		width: auto !important;
	}

	/* Selector de registros a la izquierda o centro */
	.dataTables_length {
		text-align: left !important;
		margin-bottom: 10px;
	}

	/* Paginación y e Info (Abajo) */
	.dataTables_wrapper .d-flex.justify-content-between:last-child {
		flex-direction: column-reverse !important;
		/* Info abajo, flechas arriba */
		gap: 15px;
		text-align: center !important;
	}

	.dataTables_paginate {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {

	/* Opcional: Si el texto "Mostrar" estorba, lo hacemos pequeño */
	.dataTables_length label {
		font-size: 0.8rem;
	}

	/* Hacemos los botones de paginación más compactos */
	.dataTables_paginate .paginate_button {
		padding: 4px 8px !important;
		font-size: 0.75rem !important;
	}
}