/* ESTILSO GENERALES*/
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.card {
	background-color: #ffffff;
	border-radius: 15px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	transition: box-shadow 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
}

.card:hover {
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.12);
	filter: brightness(0.98);
}

.card-header {
	height: 60px;
	background-color: #4a90e2;
	color: white;
	border-radius: 10px 10px 0 0;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #085684 !important;
}

.card-title {
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Puedes añadir más estilos aquí si lo necesitas */

.card-body {
	color: #333333;
	line-height: 1.6;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.card-body a {
	color: #007bff;
	text-decoration: none;
	border-bottom: 2px solid rgba(0, 123, 255, 0.2);
}

.card-body a:hover {
	color: #0056b3;
	border-bottom-color: rgba(0, 123, 255, 0.6);
}

/* ESTILOS PARA LOS Z INDEX Y MODALS DE LAS TABLAS DE DASHBOARD IMPORT Y EXPORT*/
#seguimientoPendientesImpModal .modal-dialog,
#seguimientoConcluidosImpModal .modal-dialog,
#seguimientoPendientesExpModal .modal-dialog,
#seguimientoConcluidosExpModal .modal-dialog {
	max-width: 600px !important;
	width: 90%;
}

/*Estilos para el modal de documentos en la vista documentos y aquellos modals que usen esas clases*/

#descripcionModal .modal-dialog {
	display: flex;
	align-items: center;
	max-height: calc(100% - 1rem);
	min-width: 80% !important;
}

#descripcionModal .modal-content {
	margin-top: 20px;
	margin-bottom: 20px;
}

.modal-footer {
	justify-content: center;
}

/*Para posicionar verticalmente la tabla del modal seguimiento del dashboard*/

.seguimiento-modal-content {
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden !important;
}

.vertical-table th,
.vertical-table td {
	padding: 10px;
	border: 1px solid #ddd;
}

.vertical-table th {
	background-color: #f2f2f2;
	text-align: left;
	font-weight: bold;
}

.vertical-table td {
	text-align: center;
}

.vertical-table {
	width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
}

#seguimientoModal .modal-dialog {
	max-width: 600px !important;
	width: 90%;
}

/* PARA CENTRAR LOS MODALS DE  SEGUIMIENTO EN EL DASHBOARD */
#seguimientoPendientesImpModal .modal-dialog,
#seguimientoConcluidosImpModal .modal-dialog,
#seguimientoPendientesExpModal .modal-dialog,
#seguimientoConcluidosExpModal .modal-dialog {
	display: flex;
	align-items: center;
	min-height: calc(100% - 100px);
}

#seguimientoPendientesImpModal .modal-content,
#seguimientoConcluidosImpModal .modal-content,
#seguimientoPendientesExpModal .modal-content,
#seguimientoConcluidosExpModal .modal-content {
	margin: auto;
}

/******************************** Estilo del footer *************************************/

.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	align-items: center;
	color: gray;
	text-align: center;
	padding: 0 1.5rem;
	width: 100%;
	height: 7vh;
	background: linear-gradient(to right, #dce3ea, #f4f6f8);
	box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.05);
	border-top: 1px solid #dee2e6;
	font-family: "Segoe UI", sans-serif;
	font-size: 13px;
	color: #495057;
	margin-top: 0;
	position: relative;
}

.footer .img-sil {
	height: 20px;
	margin-right: 10px;
	opacity: 0.8;
	transition: transform 0.3s ease;
}

.footer .img-sil:hover {
	transform: scale(1.08);
	opacity: 1;
}

.footer .footer-left {
	display: flex;
	align-items: center;
}

.footer .footer-right {
	font-style: italic;
	color: #495057;
	opacity: 0.85;
}

/*HEAD*/
.custom-main-panel {
	background-color: rgb(245, 245, 245);
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin-left: 220px;
	transition: margin-left 0.3s ease-in-out;
}

.custom-main-panel.collapsed {
	margin-left: 70px;
}

.custom-navbar {
	background: linear-gradient(to right, #e2e6ea, #f6f8fa);
	color: #333;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
	border-bottom: 1px solid #dee2e6;
	padding: 0.75rem 1.5rem;
	border-radius: 0 0 8px 8px;
}

.custom-navbar-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	flex-wrap: nowrap;
}

.custom-navbar-toggler {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 32px;
	height: 28px;
	padding: 0;
}

.toggler-bar {
	background-color: #666;
	height: 3px;
	margin: 4px 0;
	border-radius: 2px;
	transition: background 0.3s ease;
}

.custom-navbar-toggler:hover .toggler-bar {
	background-color: #3399ff;
}

.navbar-brand {
	font-size: 1.4rem;
	font-weight: 700;
	color: #2c3e50 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.logout-link {
	color: #4b4b4b;
	display: flex;
	align-items: center;
	font-size: 14px;
	text-decoration: none;
	border: 1px solid #ccc;
	padding: 6px 12px;
	border-radius: 8px;
	background: #e9ecef;
	transition: all 0.3s ease;
}

.logout-link:hover {
	background-color: #e7e7e7;
	color: #fff;
	border-color: #8f8d8d;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.logout-link i {
	margin-right: 6px;
	font-size: 1rem;
}

@media (max-width: 768px) {
	.custom-sidebar {
		display: none;
	}

	.custom-sidebar.active {
		display: block;
		left: 0;
		width: 220px;
		z-index: 2000;
		box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
	}

	.custom-main-panel {
		margin-left: 0;
	}

	.custom-main-panel.collapsed {
		margin-left: 0;
	}
}

#container-fluid h5 {
	font-weight: 700;
	color: #2c3e50;
}

.content {
	flex: 1;
	padding-bottom: 30px;
	overflow: hidden;
}

/* Estilos relacionados al login*/
/* Contenedor Principal */

#login-container {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 7vh);
	justify-content: center;
}

#login-container .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #4e9edd !important;
}

#login-container .container-img-login {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	margin-top: 40px;
}

#login-container .img-logolr {
	height: 100px;
	width: 190px !important;

	transition: transform 0.3s ease;
}

#login-container .img-logolr:hover {
	transform: scale(1.1);
}

#login-container .card {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#login-container .card-body {
	padding: 15px !important;
}

#login-container .card-header {
	background-color: #037dc0;
	color: white;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 20px;
	font-size: 24px;
}

#login-container .card-body {
	padding: 30px;
}

#login-container .form-group label {
	font-weight: bold;
	color: gray;
}

#login-container .form-control {
	border-radius: 5px;
	padding: 10px;
	border: 1px solid #ddd;
}

#login-container .custom-checkbox .cuadro {
	margin-right: 10px;
}

#login-container .text-center a {
	color: gray !important;
	text-decoration: none;
}

#login-container .text-center a:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	#login-container .card {
		margin: 20px;
	}

	#login-container .img-logolr {
		height: 80px;
		width: 100px;
	}

	#login-container .card-header {
		font-size: 20px;
		padding: 15px;
	}

	#login-container .card-body {
		padding: 25px;
	}
}

@media (max-width: 576px) {
	#login-container .container-img-login {
		margin-bottom: 10px;
		margin-top: 30px;
	}

	#login-container .img-logolr {
		height: 60px;
		width: 80px;
	}

	#login-container .card-header {
		font-size: 18px;
		padding: 10px;
	}

	#login-container .card-body {
		padding: 20px;
	}
}

/* estilos de la vista recuperar contrasena */
#recovery-container {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 7vh);
	justify-content: center;
}

#recovery-container .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #f4f3ef;
}

#recovery-container .container-img-recovery {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	margin-top: 70px;
}

#recovery-container .img-recuperar {
	height: 100px;
	width: 120px;

	transition: transform 0.3s ease;
}

#recovery-container .img-recuperar:hover {
	transform: scale(1.1);
}

#recovery-container .card {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#recovery-container .card-header {
	background-color: #037dc0;
	color: white;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 20px;
	font-size: 24px;
}

#recovery-container .card-body {
	padding: 30px;
}

#recovery-container .form-group label {
	font-weight: bold;
	color: gray;
}

#recovery-container .form-control {
	border-radius: 5px;
	padding: 10px;
	border: 1px solid #ddd;
}

#recovery-container .text-center a {
	color: gray !important;
	text-decoration: none;
}

#recovery-container .text-center a:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	#recovery-container .card {
		margin: 20px;
	}

	#recovery-container .img-recuperar {
		height: 100px;
		width: 100px;
	}

	#recovery-container .card-header {
		font-size: 20px;
		padding: 15px;
	}

	#recovery-container .card-body {
		padding: 25px;
	}
}

@media (max-width: 576px) {
	#recovery-container .container-img-recovery {
		margin-bottom: 10px;
		margin-top: 30px;
	}

	#recovery-container .img-recuperar {
		height: 80px;
		width: 80px;
	}

	#recovery-container .card-header {
		font-size: 18px;
		padding: 10px;
	}

	#recovery-container .card-body {
		padding: 20px;
	}
}

/* TARJETAS Y BOTONES */
/* Estilo Base para Todos los Botones */
.btn {
	font-weight: 700 !important;
	color: white !important;
	border: none;
	border-radius: 5px;
	padding: 7px 14px !important;
	transition: background-color 0.3s ease, transform 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 10px;
}

.btn-general {
	background-color: #037dc0 !important;
}

input,
option,
select {
	font-size: 11px !important;
}

.btn-general:hover {
	background-color: #4e9edd !important;
	border-color: #4e9edd !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
	background-color: #6c757d !important;
}

.btn-secondary:hover {
	background-color: #a4a8aa !important;
	border-color: #a4a8aa !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-info {
	background-color: #037dc0 !important;
}

.btn-info:hover {
	background-color: #4e9edd !important;
	border-color: #4e9edd !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-primary {
	background-color: #037dc0 !important;
}

.btn-primary:hover {
	background-color: #4e9edd !important;
	border-color: #4e9edd !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-success {
	background-color: #28a745 !important;
}

.btn-success:hover {
	background-color: #5dc77b !important;
	border-color: #5dc77b !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger {
	background-color: #dc3545 !important;
}

.btn-danger:hover {
	background-color: #e57373 !important;
	border-color: #e57373 !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-warning {
	background-color: #ffc107 !important;
}

.btn-warning:hover {
	background-color: #ffca2c !important;
	border-color: #ffca2c !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-outline-general {
	background-color: transparent !important;
	color: #037dc0 !important;
	border: 2px solid #037dc0 !important;
	border-radius: 5px;
	padding: 10px 10px;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 10px;
}

.btn-outline-general:hover {
	background-color: #037dc0 !important;
	color: white !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-outline-secondary {
	background-color: transparent !important;
	color: #6c757d !important;
	border: 2px solid #6c757d !important;
	border-radius: 5px;
	padding: 10px 10px;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 10px;
}

.btn-outline-secondary:hover {
	background-color: #6c757d !important;
	color: white !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-outline-info {
	background-color: transparent !important;
	color: #037dc0 !important;
	border: 2px solid #037dc0 !important;
	border-radius: 5px;
	padding: 10px 10px;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 10px;
}

.btn-outline-info:hover {
	background-color: #037dc0 !important;
	color: white !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-outline-primary {
	background-color: transparent !important;
	color: #037dc0 !important;
	border: 2px solid #037dc0 !important;
	border-radius: 5px;
	padding: 10px 10px;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 10px;
}

.btn-outline-primary:hover {
	background-color: #037dc0 !important;
	color: white !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-outline-success {
	background-color: transparent !important;
	color: #28a745 !important;
	border: 2px solid #28a745 !important;
	border-radius: 5px;
	padding: 10px 10px;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 10px;
}

.btn-outline-success:hover {
	background-color: #28a745 !important;
	color: white !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-outline-danger {
	background-color: transparent !important;
	color: #dc3545 !important;
	border: 2px solid #dc3545 !important;
	border-radius: 5px;
	padding: 10px 10px;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 10px;
}

.btn-outline-danger:hover {
	background-color: #dc3545 !important;
	color: white !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.btn-outline-warning {
	background-color: transparent !important;
	color: #ffc107 !important;
	border: 2px solid #ffc107 !important;
	border-radius: 5px;
	padding: 10px 10px;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-size: 10px;
}

.btn-outline-warning:hover {
	background-color: #ffc107 !important;
	color: black !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.main-card {
	width: 100% !important;
	height: 700px !important;
}

.custom-checkbox {
	display: flex;
	align-items: center;
	margin-bottom: 10px !important;
}

.cuadro input[type="checkbox"] {
	display: none;
}

.cuadro input[type="checkbox"] + label {
	position: relative;
	padding-left: 25px;
	cursor: pointer;
	font-size: 16px;
	color: #555;
}

.cuadro input[type="checkbox"] + label:before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border: 1px solid #ccc;
	background-color: #fff;
	border-radius: 3px;
}

.cuadro input[type="checkbox"]:checked + label:before {
	content: "\2714";
	font-size: 14px;
	color: #fff;
	background-color: #1f6281;
	border-color: #1f6281;
}

.recordar-label {
	margin-top: 6px;
	margin-left: 9px;
}

/*Estilos del icono de carga*/
#global-loading-icon {
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
}

.spinner-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
}

.spinner {
	animation: rotate 1s linear infinite;
	width: 80px;
	height: 80px;
}

.spinner .path {
	stroke: #00c6ff;
	stroke-linecap: round;
	animation: dash 1.5s ease-in-out infinite;
}

.loading-text {
	margin-top: 15px;
	font-size: 16px;
	font-family: "Segoe UI", sans-serif;
	letter-spacing: 1px;
	color: #ffffff;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}

	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

/*Estilos del modal de import y export del dashboard*/
#myModalExport {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

#myModalImport {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
	background-color: #fefefe;
	margin: 1% auto;
	padding: 15px;
	border: 1px solid #888;
	border-radius: 5px;
	max-width: 90%;
	max-height: 80vh;
	min-height: 75%;
	overflow-y: auto;
}

.btn-group {
	margin-bottom: 20px;
}

/* Estilos del dinamic-table*/
.dinamic-table-solicitudes,
.dinamic-table-solicitudes th,
.dinamic-table-solicitudes td,
.table-bordered,
.table-bordered th,
.table-bordered td {
	font-size: 10px !important;
	text-align: center;
	vertical-align: middle;
}

/****************continua abajo*************/
.dinamic-table,
.table-facturas-pendientes,
.table-facturas-docs,
.table-self-audit,
.table-dash-almacen-salida,
.table-dash-almacen-recepcion,
.table-documentos,
.table-control-derechos,
.table-layout-outbound,
.table-layout-outbound-LR,
.table-sbs-oc,
.table-aduanas-import,
.table-aduanas-eecc,
.table-aduanas-fc,
.table-aduanas-rgc,
.dinamic-table-mantenimiento {
	width: 100%;
	font-size: 10px !important;
}

.dinamic-table th,
.dinamic-table td,
.table-facturas-pendientes th,
.table-facturas-pendientes td,
.table-facturas-docs th,
.table-facturas-docs td,
.table-self-audit th,
.table-self-audit td,
.table-dash-almacen-salida th,
.table-dash-almacen-salida td,
.table-dash-almacen-recepcion th,
.table-dash-almacen-recepcion td,
.table-documentos th,
.table-documentos td,
.table-control-derechos th,
.table-control-derechos td,
.table-layout-outbound th,
.table-layout-outbound td,
.table-layout-outbound-LR th,
.table-layout-outbound-LR td,
.table-sbs-oc th,
.table-sbs-oc td,
.table-aduanas-import th,
.table-aduanas-import td,
.table-aduanas-eecc th,
.table-aduanas-eecc td,
.table-aduanas-fc th,
.table-aduanas-fc td,
.table-aduanas-rgc th,
.table-aduanas-rgc td,
.dinamic-table-mantenimiento th,
.dinamic-table-mantenimiento td {
	width: max-content;
	border: 1px solid #ddd;
	padding: 8px;
	text-align: center;
	vertical-align: middle;
	font-size: 10px !important;
	text-wrap: nowrap;
}

.table-facturas-pendientes td:nth-child(7) {
	max-width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Estilos generales de la tabla transporte - ad, para la colu,na numero factura 
	  .table-layout-outbound {
		  width: 100%;
		  font-size: 10px !important;
	  }
	  
	  .table-layout-outbound th,
	  .table-layout-outbound td {
		  width: max-content;
		  border: 1px solid #ddd;
		  padding: 8px;
		  text-align: center;
		  vertical-align: middle;
		  font-size: 10px !important;
		  white-space: nowrap;
	  }
	  
	  .table-layout-outbound th:nth-child(4),
	  .table-layout-outbound td:nth-child(4) {
		  white-space: normal;
		  word-wrap: break-word;
		  max-width: 350px;
	  }
	  */
/* dash */

.dinamic-table-dash {
	width: 100%;
	border-collapse: collapse;
}

.dinamic-table-dash th,
.dinamic-table-dash td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
	white-space: nowrap;
}

.dinamic-table-dash th {
	background-color: #f2f2f2;
}

.dinamic-table-apertura {
	width: 100%;
	border-collapse: collapse;
}

.dinamic-table-apertura th,
.dinamic-table-apertura td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
}

.dinamic-table-apertura th {
	background-color: #f2f2f2;
}

/* Estilo para la tabla de perfiles con el tema "perfiles" */
#content-modulo .btn,
#content-perfiles .btn,
#content-usuarios .btn {
	font-size: 10px !important;
}

.table-dinamic {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 10px !important;
}

.table-dinamic th,
.table-dinamic td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: center;
	vertical-align: middle;
	font-size: 10px !important;
	text-wrap: nowrap;
}

/* Estilos de los items de mantenimiento */
#content-modulo {
	padding: 15px;
}

#content-modulo #caja-modulo {
	margin: auto;
}

#content-perfiles,
#content-usuarios {
	padding: 15px;
}

/* TABLAS DEL DASHBOARD ESTILOS */
#importPendientesModal .btn,
#importConcluidosModal .btn,
#exportPendientesModal .btn,
#exportConcluidosModal .btn,
#TabledashImpModal .btn,
#TabledashExpModal .btn,
#almacenRecepcionesModal .btn,
#almacenSalidasModal .btn {
	font-size: 10px !important;
}

.table-dash-imp,
.table-dash-imp-pendientes,
.table-dash-imp-concluidos,
.table-dash-exp,
.table-dash-exp-pendientes,
.table-dash-exp-concluidos {
	width: 100% !important;
	border-collapse: collapse;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	font-size: 10px !important;
	table-layout: auto !important;
}

/* Botones internos */
.table-dash-imp .btn,
.table-dash-imp-pendientes .btn,
.table-dash-imp-concluidos .btn,
.table-dash-exp .btn,
.table-dash-exp-pendientes .btn,
.table-dash-exp-concluidos .btn {
	font-size: 10px !important;
	padding: 2px 4px !important;
}

/* Cabecera */
.table-dash-imp thead th,
.table-dash-imp-pendientes thead th,
.table-dash-imp-concluidos thead th,
.table-dash-exp thead th,
.table-dash-exp-pendientes thead th,
.table-dash-exp-concluidos thead th {
	background-color: #085684 !important;
	color: white;
	text-align: center !important;
	vertical-align: middle !important;
	border: 1px solid #ddd;
	font-size: 10px !important;
	white-space: nowrap;
}

/* Celdas */
.table-dash-imp tbody td,
.table-dash-imp-pendientes tbody td,
.table-dash-imp-concluidos tbody td,
.table-dash-exp tbody td,
.table-dash-exp-pendientes tbody td,
.table-dash-exp-concluidos tbody td {
	text-align: center !important;
	vertical-align: middle !important;
	border: 1px solid #ddd;
	transition: background-color 0.3s;
	color: rgb(108, 117, 125);
	font-size: 10px !important;
	padding: 2px !important;
	white-space: nowrap;
}

/* Zebra */
.table-dash-imp tbody tr:nth-child(even),
.table-dash-imp-pendientes tbody tr:nth-child(even),
.table-dash-imp-concluidos tbody tr:nth-child(even),
.table-dash-exp tbody tr:nth-child(even),
.table-dash-exp-pendientes tbody tr:nth-child(even),
.table-dash-exp-concluidos tbody tr:nth-child(even) {
	background-color: #f2f2f2;
}

.table-dash-imp tbody tr,
.table-dash-imp-pendientes tbody tr,
.table-dash-imp-concluidos tbody tr,
.table-dash-exp tbody tr,
.table-dash-exp-pendientes tbody tr,
.table-dash-exp-concluidos tbody tr {
	text-wrap: nowrap;
}

/* Hover */
.table-dash-imp tbody tr:hover,
.table-dash-imp-pendientes tbody tr:hover,
.table-dash-imp-concluidos tbody tr:hover,
.table-dash-exp tbody tr:hover,
.table-dash-exp-pendientes tbody tr:hover,
.table-dash-exp-concluidos tbody tr:hover {
	background-color: #e9e9e9;
}

/* Scroll estructurado para tablas DataTables */
.dataTables_scrollHeadInner table,
.dataTables_scrollBody table {
	width: auto !important;
	min-width: 100% !important;
	table-layout: auto !important;
}

.dataTables_scrollBody {
	overflow-x: auto !important;
	overflow-y: auto !important;
}

/* Estilos para el modal documentos en la vista aperturarorden */

#TabledashExpModal .modal-dialog,
#TabledashImpModal .modal-dialog,
#documentosModal .modal-dialog,
#documentosOrden .modal-dialog,
#importPendientesModal .modal-dialog,
#importConcluidosModal .modal-dialog,
#exportPendientesModal .modal-dialog,
#exportConcluidosModal .modal-dialog,
#seguimientoModal .modal-dialog,
#almacenRecepcionesModal .modal-dialog,
#almacenSalidasModal .modal-dialog {
	max-width: 99%;
	margin: 1.75rem auto;
}

#TabledashExpModal .modal-content,
#TabledashImpModal .modal-content,
#documentosModal .modal-content,
#documentosOrden .modal-content,
#importPendientesModal .modal-content,
#importConcluidosModal .modal-content,
#exportPendientesModal .modal-content,
#exportConcluidosModal .modal-content,
#seguimientoModal .modal-content,
#almacenRecepcionesModal .modal-content,
#almacenSalidasModal .modal-content {
	overflow: auto;
}

#importPendientesModal .modal-content-1erModal,
#importConcluidosModal .modal-content-1erModal,
#exportPendientesModal .modal-content-1erModal,
#exportConcluidosModal .modal-content-1erModal,
#almacenRecepcionesModal .modal-content-1erModal,
#almacenSalidasModal .modal-content-1erModal {
	height: max-content;
}

#TabledashExpModal .modal-body,
#TabledashImpModal .modal-body,
#documentosModal .modal-body,
#documentosOrden .modal-body,
#importPendientesModal .modal-body,
#importConcluidosModal .modal-body,
#exportPendientesModal .modal-body,
#exportConcluidosModal .modal-body,
#seguimientoModal .modal-body,
#almacenRecepcionesModal .modal-body,
#almacenSalidasModal .modal-body {
	padding: 1.5rem;
}

#TabledashExpModal .modal-header,
#TabledashImpModal .modal-header,
#documentosModal .modal-header,
#documentosOrden .modal-header,
#importPendientesModal .modal-header,
#importConcluidosModal .modal-header,
#exportPendientesModal .modal-header,
#exportConcluidosModal .modal-header,
#seguimientoModal .modal-header,
#almacenRecepcionesModal .modal-header,
#almacenSalidasModal .modal-header {
	padding: 1rem 1.5rem;
}

#TabledashExpModal .modal-footer,
#TabledashImpModal .modal-footer,
#documentosModal .modal-footer,
#documentosOrden .modal-footer,
#importPendientesModal .modal-footer,
#importConcluidosModal .modal-footer,
#exportPendientesModal .modal-footer,
#exportConcluidosModal .modal-footer,
#seguimientoModal .modal-footer,
#almacenRecepcionesModal .modal-footer,
#almacenSalidasModal .modal-footer {
	padding: 1rem 1.5rem;
}

/* Del nav mantenimiento*/
.collapse.show {
	display: block;
}

.selected {
	background-color: #c5c4c4 !important;
}

.select-disabled {
	background-color: #f5f5f5;
	cursor: not-allowed;
}

.bg-white {
	background-color: rgb(244, 243, 239) !important;
}

/* Estilos del contenedor principal */
#content-dash {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	padding: 10px;
}

/* Columna izquierda */
#columna-izquierda {
	flex: 1;
	max-width: 185px;
	/* Ajustar el ancho de la primera columna */
}

/* Columna derecha */
#columna-derecha {
	flex: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	align-items: baseline;
	gap: 3px;
	/* Reducir el espacio entre los gráficos */
	/* Ajustar el ancho de la segunda columna */
}

/* Estilos de las pestañas */
#dashboardTabs {
	border-bottom: none;
	margin-bottom: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: 3px;
}

#dashboardTabs .nav-item {
	padding: 5px !important;
}

#dashboardTabs .nav-link {
	border-radius: 8px;
	background-color: #95bee4;
	color: #085684;
	padding: 6px 10px;
	transition: background-color 0.3s ease, color 0.3s ease;
	font-weight: 600;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#dashboardTabs .nav-link:hover {
	background-color: #085684 !important;
	color: white !important;
}

#dashboardTabs .nav-link.active {
	background-color: #085684 !important;
	color: white !important;
}

/* tarjetas pendientes, concluidos y cif del dashboard*/

.import-card-link,
.export-card-link {
	text-decoration: none !important;
	min-width: 100px;
	max-width: 150px;
}

.import-card-header,
.export-card-header {
	padding: 0 !important;
	height: 50px !important;
}

#import-card-container .card,
#export-card-container .card {
	margin-bottom: 0px;
	padding: 5px;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	font-size: 0.8em;
	height: 70px;
	width: 100%;
	max-width: 200px;
}

#import-card-container,
#export-card-container {
	background-color: #eeeeee;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	padding: 5px;
	margin-bottom: 10px;
	/* Añade un margen inferior para separar las cajas */
	margin-top: 20px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: center;
}

/*
	  #import-card-container::before,
	  #export-card-container::before {
		  content: "";
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 1px;
		  background-color: #d3d3d3;
	  }
	  */
.import-card-body,
.export-card-body {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.import-icon-container,
.export-icon-container {
	flex: 0 0 auto;
	margin-right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.import-text-container,
.export-text-container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.import-card-category,
.export-card-category {
	font-weight: bold;
	margin: 0;
	font-size: 0.9em;
}

.import-card-title,
.export-card-title {
	font-size: 0.9em;
	color: gray;
	margin: 0;
}

#cifimportModal .card-title,
#cifexportModal .card-title {
	color: rgb(105, 102, 102);
}

.card-stats-import,
.card-stats-export {
	background-color: #f8f9fa;
	transition: transform 0.2s;
}

.card-stats-import:hover,
.card-stats-export:hover {
	transform: translateY(-3px);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* estilos de los graficos */

.chart-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 3px;
	/* Reducir el espacio entre los gráficos */
}

.chart-item {
	flex: 1 1 100%;
	max-width: 100%;
}

.chart-item .card {
	height: 300px;
	margin: 0;
	/* Ajustar la altura de los gráficos */
}

.chart-item .card .card-title {
	font-size: 1em;
	text-align: center;
	margin: 10px 0;
	font-weight: 700;
}

@media (max-width: 768px) {
	.content-dash {
		flex-direction: column;
		gap: 3px;
		/* Reducir el espacio entre los elementos en vista móvil */
	}

	#columna-izquierda,
	#columna-derecha {
		max-width: 100%;
	}

	.chart-container {
		grid-template-columns: 1fr;
	}

	.chart-item .card {
		height: auto;
		min-height: 350px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.chart-container {
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	}

	.chart-item .card {
		height: auto;
		min-height: 350px;
	}
}

/* Estilos de los filtros de cuartil y mes del dashboard */
.filtro-general-import,
.filtro-general-export {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 10px 0;
}

.cliente-filter,
.year-fiscal,
.year-filter-import,
.quartile-filter-import,
.month-filter-import,
.tipo-despa-filter-import,
.tipo-despa-filter-export,
.year-filter-export,
.quartile-filter-export,
.month-filter-export {
	width: 100%;
	margin: 0;
}

.cliente-filter label,
.year-fiscal label,
.year-filter-import label,
.quartile-filter-import label,
.month-filter-import label,
.tipo-despa-filter-import label,
.tipo-despa-filter-export label,
.year-filter-export label,
.quartile-filter-export label,
.month-filter-export label {
	display: block;
	margin-bottom: 3px;
	font-weight: bold;
	font-size: 10px;
	color: rgb(8, 86, 132);
}

.cliente-filter select,
.year-fiscal select,
.year-filter-import select,
.quartile-filter-import select,
.month-filter-import select,
.tipo-despa-filter-import select,
.tipo-despa-filter-export select,
.year-filter-export select,
.quartile-filter-export select,
.month-filter-export select {
	width: 100%;
	padding: 5px;
	font-size: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #f9f9f9;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: border-color 0.3s, box-shadow 0.3s;
}

.cliente-filter selecT:focus,
.year-fiscal select:focus,
.year-filter-import select:focus,
.quartile-filter-import select:focus,
.month-filter-import select:focus,
.tipo-despa-filter-import select:focus,
.tipo-despa-filter-export select:focus,
.year-filter-export select:focus,
.quartile-filter-export select:focus,
.month-filter-export select:focus {
	border-color: #007bff;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
	outline: none;
}

/**/
.filtro-general {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 10px 0;
}

.cliente-filter,
.year-fiscal,
.year-filter,
.quartile-filter,
.month-filter,
.tipo-despa-filter {
	width: 100%;
	margin: 0;
}

.cliente-filter label,
.year-fiscal label,
.year-filter label,
.quartile-filter label,
.month-filter label,
.tipo-despa-filter label {
	display: block;
	margin-bottom: 3px;
	font-weight: bold;
	font-size: 10px;
	color: rgb(8, 86, 132);
}

.cliente-filter select,
.year-fiscal select,
.year-filter select,
.quartile-filter select,
.month-filter select,
.tipo-despa-filter select {
	width: 100%;
	padding: 5px;
	font-size: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #f9f9f9;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: border-color 0.3s, box-shadow 0.3s;
}

.cliente-filter selecT:focus,
.year-fiscal select:focus,
.year-filter select:focus,
.quartile-filter select:focus,
.month-filter select:focus,
.tipo-despa-filter select:focus {
	border-color: #007bff;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
	outline: none;
}

/* ESTILO DEL TEXTO CARGANDO DEL DASHBOARD */

.loading-text {
	text-align: center;
	font-size: 18px;
	color: #888;
	padding: 20px;
}

/* VISTA APERTURARORDEN */

#content-aperturar .card {
	width: 100%;
	margin: auto;
}

#content-aperturar .card-body {
	padding: 20px;
}

#content-aperturar .row {
	display: flex;
	flex-wrap: wrap;
}

#content-aperturar .col-sm-6,
#content-aperturar .col-md-2,
#content-aperturar .col-md-4,
#content-aperturar .col-md-6 {
	flex: 1 1 auto;
	padding: 10px;
	box-sizing: border-box;
}

@media (min-width: 576px) {
	#content-aperturar .col-sm-6 {
		flex: 0 0 50%;
	}
}

@media (min-width: 768px) {
	#content-aperturar .col-md-2 {
		flex: 0 0 16.6667%;
	}

	#content-aperturar .col-md-4 {
		flex: 0 0 33.3333%;
	}

	#content-aperturar .col-md-6 {
		flex: 0 0 50%;
	}
}

@media (min-width: 992px) {
	#content-aperturar .col-md-2 {
		flex: 0 0 16.6667%;
	}

	#content-aperturar .col-md-4 {
		flex: 0 0 33.3333%;
	}

	#content-aperturar .col-md-6 {
		flex: 0 0 50%;
	}
}

#content-aperturar button,
#content-aperturar a {
	width: 100%;
	margin-top: 20px;
}

/* TABLA GENERAL DASHBOARD */
.dash-general-tabla {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
	text-decoration: none;
}

#tabla-btn-imp {
	height: 31px;
	width: 100px;
	font-size: 11px;
	padding: 0;
}

#tabla-btn-exp {
	height: 31px;
	width: 100px;
	font-size: 11px;
	padding: 0;
}

/* CSS DEL SEGUNDO DASHBOARD */
/* CSS DEL SEGUNDO DASHBOARD */

#dashboard2-content {
	padding: 5px;
}

.dashboard2-card-container {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 0 !important;
}

.dashboard2-card {
	border: none;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s;
	margin-bottom: 0px;
	padding: 10px;
	width: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 205px;
	/* Asignar un tamaño fijo */
}

.dashboard2-card:hover {
	transform: scale(1.05);
}

.dashboard2-card-header {
	background-color: rgb(8, 86, 132);
	color: white;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	padding: 5px;
	text-align: center;
	font-size: 0.8rem;
	width: 100%;
}

.dashboard2-card-body {
	padding: 5px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	max-width: 100% !important;
}

.dashboard2-info {
	text-align: center;
	padding: 3px;
	border-radius: 10px;
	background-color: #f8f9fa;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	flex: 1 0 48%;
	margin: 3px;
	font-size: 0.5rem;
	box-sizing: border-box;
	/* Añadido para evitar desbordamiento */
	min-width: 80px;
	/* Añadido para evitar que las tarjetas se solapen */
}

.dashboard2-info p {
	font-size: 0.7rem;
	font-weight: bold;
	margin-bottom: 2px;
}

.dashboard2-info h5 {
	font-size: 10px;
	font-weight: bold;
	color: gray;
}

.nav-tabs .nav-link {
	color: #007bff;
	font-weight: bold;
}

.nav-tabs {
	display: flex;
	justify-content: center;
	width: 100%;
}

.nav-tabs .nav-link.active {
	color: white;
	background-color: #007bff;
}

.dashboard2-card-header i {
	font-size: 1rem;
	margin: 0;
}

.fa-coins,
.fa-clock {
	font-size: 1rem;
	color: #007bff;
}

@media (max-width: 1024px) {
	.dashboard2-card-container {
		justify-content: center;
	}

	.dashboard2-card {
		width: 45%;
		height: auto;
	}
}

@media (max-width: 768px) {
	.dashboard2-card {
		width: 100%;
		height: auto;
	}

	.dashboard2-info {
		font-size: 0.7rem;
	}

	.dashboard2-info p,
	.dashboard2-info h5 {
		font-size: 0.8rem;
	}

	.seguimiento-card {
		width: 100%;
		height: auto;
	}

	.seguimiento-info {
		grid-template-columns: 1fr;
	}

	.seguimiento-info-imp {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 576px) {
	.dashboard2-card {
		width: 100%;
		height: auto;
	}

	.dashboard2-card-header {
		font-size: 0.7rem;
	}

	.dashboard2-info {
		font-size: 0.6rem;
	}

	.dashboard2-info p,
	.dashboard2-info h5 {
		font-size: 0.7rem;
	}

	.seguimiento-child {
		font-size: 0.6rem;
	}

	.seguimiento-label,
	.seguimiento-value,
	.seguimiento-time {
		font-size: 0.7rem;
	}
}

.card-children {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 100%;
	/* Asegurar que las tarjetas hijas no se salgan del contenedor */
}

.seguimiento-info {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	width: 100%;
}

.seguimiento-card {
	border: none;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s;
	margin-bottom: 0px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: auto;
}

.seguimiento-info-imp {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 40px;
	width: max-content;
}

.seguimiento-child {
	background-color: #f8f9fa;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.seguimiento-label {
	color: black;
	font-size: 0.8rem;
	font-weight: bold;
}

.seguimiento-value {
	font-size: 1.2rem;
	font-weight: bold;
	margin-top: 5px;
	color: gray;
}

.seguimiento-time {
	font-size: 0.8rem;
	color: gray;
	margin-top: 5px;
}

.img-dash {
	width: 40px;
	height: 25px;
}

@media (max-width: 1024px) {
	.seguimiento-info-imp {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 20px;
	}

	.seguimiento-label {
		font-size: 0.7rem;
	}

	.seguimiento-value {
		font-size: 1rem;
	}

	.seguimiento-time {
		font-size: 0.7rem;
	}

	.img-dash {
		width: 35px;
		height: 20px;
	}
}

@media (max-width: 768px) {
	.seguimiento-info-imp {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 15px;
	}

	.seguimiento-label {
		font-size: 0.6rem;
	}

	.seguimiento-value {
		font-size: 0.9rem;
	}

	.seguimiento-time {
		font-size: 0.6rem;
	}

	.img-dash {
		width: 30px;
		height: 18px;
	}
}

@media (max-width: 576px) {
	.seguimiento-info-imp {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 10px;
	}

	.seguimiento-child {
		padding: 5px;
	}

	.seguimiento-label {
		font-size: 0.5rem;
	}

	.seguimiento-value {
		font-size: 0.8rem;
	}

	.seguimiento-time {
		font-size: 0.5rem;
	}

	.img-dash {
		width: 25px;
		height: 15px;
	}
}

/*tablas*/
.table-dash2-imp,
.table-dash2-exp {
	font-size: 10px !important;
}

.table-dash2-imp th,
.table-dash2-exp th {
	font-size: 10px !important;
}

.table-dash2-imp td,
.table-dash2-exp td {
	font-size: 10px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

.table-dash2-imp .btn,
.table-dash2-exp .btn {
	font-size: 8px !important;
	padding: 4px 4px !important;
}

.table-dash2-imp thead th,
.table-dash2-exp thead th {
	text-align: center !important;
}

.table-dash2-imp tbody td,
.table-dash2-exp tbody td {
	text-align: center !important;
}

.table-dash2-imp tbody tr,
.table-dash2-exp tbody tr {
	text-wrap: nowrap;
}

/* Agregar estilos para los textos de paginación, búsqueda y otros detalles, del DATATABLES */

/* CSS PARA LA NUEVA FUNCIONALIDAD DE DETALLES DEL DASHBOARD */
#content-dash .card-body {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#content-dash .chart-details {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.4;
	word-wrap: break-word;
	overflow-y: auto;
	max-height: 180px;
	color: #444;
}

#content-dash .chart-details p {
	margin: 4px;
	font-weight: 500;
	color: #0056b3;
	background-color: #e9f0fb;
	padding: 8px;
	border-radius: 5px;
	min-width: 90px;
	text-align: center;
}

.referencia-filter {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0;
}

.referencia-filter label {
	display: block;
	margin-bottom: 3px;
	font-weight: bold;
	font-size: 10px;
	color: rgb(8, 86, 132);
}

.referencia-input-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.referencia-input-group input {
	flex-grow: 1;
	padding: 5px;
	font-size: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #f9f9f9;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: border-color 0.3s, box-shadow 0.3s;
}

.referencia-input-group input:focus {
	border-color: #007bff;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
	outline: none;
}

.referencia-input-group button {
	padding: 8px 15px;
	margin: 4px;
	font-size: 10px;
	font-weight: bold;
}

#toggle-view-imp,
#toggle-view-exp {
	padding: 8px 15px;
	margin: 4px;
	font-size: 10px;
	font-weight: bold;
}

/*ESTILSO DE FILTRO POR FECHAS DE REPORTES - FACTURAS DOCUMENTOS*/

.filtros-fechas-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.filtro-label {
	font-weight: bold;
	margin-right: 5px;
}

.filtro-fecha {
	width: 150px;
	padding: 5px 10px;
	border-radius: 5px;
	border: 1px solid #ced4da;
	font-size: 14px;
	transition: all 0.3s ease;
}

.filtro-fecha:focus {
	border-color: #80bdff;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.filtros-fechas-container .btn-primary {
	padding: 8px 15px;
}

@media (max-width: 768px) {
	.filtros-fechas-container {
		flex-direction: column;
		gap: 15px;
	}

	.filtro-fecha {
		width: 100%;
	}

	.filtros-fechas-container .btn-primary {
		width: 100%;
	}
}

/*Estlos de la vista error*/
#container-error {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	width: 100%;
	background: linear-gradient(145deg, #f0f3f5, #dfe6ec);
	text-align: center;
	padding: 20px;
}

.error-page {
	width: 100%;
	max-width: 700px;
}

.error-title {
	font-size: 8rem;
	font-weight: 900;
	color: #e74c3c;
	margin: 0;
	letter-spacing: -5px;
}

.error-subtitle {
	font-size: 2.5rem;
	color: #34495e;
	font-weight: 700;
	margin-top: -10px;
}

.error-message {
	margin-top: 20px;
	font-size: 1.25rem;
	color: #7f8c8d;
	line-height: 1.6;
}

.error-link {
	display: inline-block;
	margin-top: 35px;
	padding: 14px 30px;
	font-size: 1rem;
	color: white;
	background-color: #3498db;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.3s ease;
}

@media (max-width: 600px) {
	.error-title {
		font-size: 5rem;
	}
	.error-subtitle {
		font-size: 1.8rem;
	}
	.error-message {
		font-size: 1rem;
	}
	.error-link {
		width: 100%;
		padding: 12px 0;
	}
}

/* STATUS DE LA TABLA SOLICTAR ORDEN */
/* Estilos generales para las celdas de estado */
.status-column {
	padding: 5px;
	font-weight: bold;
	text-align: center;
	border-radius: 15px;
	color: white;
	display: inline-block;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.status-aprobado {
	background-color: #28a745;
	color: #212529;
}

.status-solicitado {
	background-color: #17a2b8;
	color: #212529;
}

.status-rechazado {
	background-color: #f95767;
	color: #212529;
}

.status-observacion {
	background-color: #ffc107;
	color: #212529;
}

.status-creado {
	background-color: #b5b9bd;
	color: #212529;
}

.status-modificado {
	background-color: #e4b68b;
	color: #212529;
}

.btn-modificar,
.btn-docs {
	color: #333333 !important;
	background-color: #f3f3f3 !important;
}

.btn-modificar:hover,
.btn-docs:hover {
	background-color: #c9c9c9 !important;
	color: #333333 !important;
}

/* ESTILOS PARA EL DASHBOARD DE ALMACEN */
.content-almacen {
	padding: 15px;
}

.content-almacen #filtro-fecha {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}

.content-almacen #filtro-fecha label {
	font-size: 12px;
	margin-bottom: 5px;
	margin-right: 5px;
}

.content-almacen #filtro-fecha .form-control {
	width: auto;
	margin-bottom: 5px;
	min-width: 100px;
	padding: 3px 5px;
}

.content-almacen #filtro-fecha button {
	padding: 5px 10px;
	font-size: 12px;
	margin-bottom: 5px;
}

#contenedor-graficos {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 5px;
	margin-bottom: 20px;
}

#contenedor-graficos .chart-item {
	flex: 1 1 28%;
	min-width: 28%;
	max-width: 100%;
}

#contenedor-graficos h5 {
	font-weight: 700;
}

#contenedor-graficos .chart-item .card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 250px;
}

#contenedor-graficos .chart-item .card-header {
	font-size: 12px;
	padding: 5px;
	text-align: center;
}

#contenedor-graficos .chart-item .card-body {
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 769px) and (max-width: 1024px) {
	#contenedor-graficos {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5px;
	}

	#contenedor-graficos .chart-item .card {
		height: 180px;
		width: 100%;
	}
}

@media (max-width: 768px) {
	#contenedor-graficos {
		display: grid;
		grid-template-columns: 1fr;
	}

	#contenedor-graficos .chart-item {
		flex: 1 1 100%;
	}

	#contenedor-graficos .chart-item .card {
		height: 160px;
		width: 100%;
	}

	.content-almacen #filtro-fecha {
		flex-direction: column;
		gap: 5px;
	}
}

/* ESTILOS DE LA VISTA SELECCIONAR CLIENTE */

.select-client-card {
	background-color: #ffffff;
	padding: 40px 30px;
	border-radius: 20px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	text-align: center;
	transition: box-shadow 0.3s ease;
}

.select-client-card:hover {
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.select-title {
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 30px;
	color: #003366;
}

.select-label {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 10px;
	text-align: left;
	color: #555;
}

.select-dropdown {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #ccc;
	border-radius: 12px;
	font-size: 1rem;
	background-color: #f9f9f9;
	transition: all 0.3s ease;
}

.select-dropdown:focus {
	border-color: #007bff;
	outline: none;
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

@media (max-width: 768px) {
	.select-client-card {
		padding: 30px 20px;
	}

	.select-title {
		font-size: 1.5rem;
	}

	.select-dropdown {
		font-size: 0.95rem;
	}
}

/* ESTILOS DEL SELECT */

.select2-container--default .select2-selection--single {
	height: 38px !important;
	border: 1px solid #ccc !important;
	border-radius: 5px !important;
	font-size: 10px !important;
	padding: 5px 12px !important;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	font-weight: 600 !important;
}

.select2-container--default
	.select2-selection--single
	.select2-selection__rendered {
	color: #495057;
	line-height: 24px;
	padding-left: 0;
}

.select2-container--default
	.select2-selection--single
	.select2-selection__arrow {
	height: 36px;
	right: 6px;
}

.select2-dropdown {
	border: 1px solid #ced4da !important;
	border-radius: 5px !important;
	font-size: 13px;
}

.select2-results__option--highlighted {
	background-color: #009efb;
	color: #fff;
}

.select2-container--default.select2-container--focus
	.select2-selection--single {
	border-color: #80bdff;
	outline: 0;
}