/* Rastreo 2.0 ====================================== */

	.rastreo-progress {
		overflow: visible !important;
	}

	.rastreo-progress-circle {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		position: absolute;
		top: -4px;
		border: 2px solid white;
		box-shadow: 0 1px 3px rgba(0,0,0,0.2);
		transition: left 0.3s ease;
	}

	.rastreo-circle-success {
		background-color: #4CAF50;
	}

	.rastreo-circle-info {
		background-color: #2196F3;
	}

	.rastreo-circle-warning{
		background-color: #f0ad4e;
	}

	.rastreo-circle-danger {
		background-color: #fb483a;
	}

	.rastreo-circle-disp {
  	    background-color: #4dffcb;	
	}

	.tracking-header-container {
		padding: 0px 20px;
		max-width: 1200px;
		margin: 0 auto;
	}

	.tracking-status-card {
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
		margin-bottom: 20px;
		overflow: visible;
		transition: box-shadow 0.8s ease-in-out;
		transition: border 0.2s ease-in-out;
	}

	.tracking-status-card:hover {
		box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 20px 6px;
	}

	.tracking-main-section {
		padding: 15px;
		display: flex;
		align-items: center;
		gap: 15px;
		border-bottom: 1px solid #eee;
		position: relative;
		z-index: 2;
	}

	.status-icon {
		flex-shrink: 0;
	}

	.status-icon i {
		font-size: 28px;
	}

	.success-icon {
		color: #4CAF50;
	}

	.pending-icon {
		color: #2196F3;
	}

	.tracking-info-container {
		flex: 1;
		min-width: 0;
	}

	.tracking-content-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
	}

	.tracking-main-info {
		flex: 1;
		min-width: 0;
	}

	.tracking-status-info {
		text-align: right;
		flex-shrink: 0;
	}

	.tracking-number {
		font-size: 18px;
		font-weight: 400;
		color: #606060;
		margin-bottom: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tracking-number a {
		color: #606060;
		text-decoration: none;
		transition: color 0.5s ease, font-weight 0.5s ease;
	}

	.tracking-number a:hover {
		font-weight: bold;
	}


	.carrier-info-tracking {
		display: flex;
		flex-direction: row;
		gap: 10px;
		align-items: center;
		color: teal;
	}

	.carrier-type {
		font-weight: 400;
	}
	
	.carrier-service {
		font-weight: 300;
	}

	.delivery-status {
		text-align: right;
	}

	.status-text {
		font-size: 16px;
		font-weight: bold;
		color: teal;
		display: block;
	}

	.delivery-date {
		color: #666;
		font-size: 14px;
	}

	.receiver-info {
		margin-top: 5px;
	}

	.receiver-text {
		color: #333;
		font-weight: 300;
		font-size: 14px;
	}

	.tracking-history-section {
		background: #f8f9fa;
		position: relative;
		z-index: 1;
	}

	.tracking-history-toggle {
		padding: 10px 15px;
	}

	.tracking-button {
		background: none;
		border: none;
		cursor: pointer;
		padding: 8px;
		transition: transform 0.3s ease;
	}

	.tracking-button:hover {
		transform: scale(1.1);
	}

	.tracking-icon {
		transition: transform 0.3s ease;
	}

	.tracking-icon.rotate {
		transform: rotate(90deg);
	}

	.tracking-history-content {
		padding: 15px;
	}

	.tracking-header {
		margin-bottom: 20px;
		padding-left: 20px;
	}

	.tracking-timeline {
		position: relative;
		padding: 20px 0;
		margin-left: 20px;
	}

	.tracking-timeline::before {
		content: '';
		position: absolute;
		left: 19px;
		top: 0;
		bottom: 0;
		width: 2px;
		background: #e0e0e0;
	}

	.tracking-item {
		display: flex;
		margin-bottom: 30px;
		position: relative;
		padding-right: 20px;
	}

	.tracking-icon {
		flex: 0 0 40px;
		position: relative;
	}

	.tracking-status {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: white;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		z-index: 1;
	}

	.tracking-status.delivered {
		background: #0096882e;
		color: #009688;
	}

	.tracking-status.in-transit {
		background: #d1d1d1;
		color: #717171;
	}

	.tracking-status.cancelled {
		background: #fe000048;
		color: #ff0000;
	}

	.tracking-title {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 10px;
	}

	.tracking-title h4 {
		margin: 0;
		color: #333;
		font-size: 16px;
		font-weight: 600;
	}

	.tracking-date {
		color: #757575;
		font-size: 14px;
	}

	.tracking-info {
		color: #616161;
		font-size: 14px;
	}

	.tracking-info p {
		display: flex;
		align-items: center;
		margin: 5px 0;
	}

	.tracking-info i {
		margin-right: 8px;
		font-size: 16px;
		color: #fb6c62;
	}

	@media (max-width: 768px) {
		.tracking-content-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		}

		.tracking-status-info {
		text-align: left;
		width: 100%;
		}

		.delivery-status {
		text-align: left;
		}

		.tracking-number {
		font-size: 18px;
		}

		.tracking-content {
		margin-left: 5px;
		}
	}

	.rastreo-status-container {
		background: #fff;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 15px;
		position: relative;
		overflow: hidden;
	}

	.rastreo-status-bar {
		position: absolute;
		left: 0;
		top: 0;
		height: 4px;
		width: 100%;
		background: #E0E0E0;
	}

	.rastreo-status-text {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		padding: 0 10px;
	}

	.rastreo-status-text.entregado::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: #4CAF50;
		transition: width 0.3s ease;
	}

	.rastreo-status-text.en-transito::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 70%;
		background: #2196F3;
		transition: width 0.3s ease;
	}

	.rastreo-status-left {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.rastreo-status-icon {
		font-size: 20px;
	}

	.rastreo-status-bar.entregado ~ .rastreo-status-text .rastreo-status-icon,
	.rastreo-status-bar.entregado ~ .rastreo-status-text .rastreo-status-left span {
		color: #4CAF50;
	}

	.rastreo-status-bar.en-transito ~ .rastreo-status-text .rastreo-status-icon,
	.rastreo-status-bar.en-transito ~ .rastreo-status-text .rastreo-status-left span {
		color: #2196F3;
	}

	.rastreo-status-right {
		color: #757575;
		font-size: 14px;
	}

	.rastreo-status-left span {
		font-weight: 600;
		font-size: 16px;
	}

	.tracking-container {
		width: 100%;
		padding: 0px;
		margin-left: 0;
   }

	.tracking-header {
		margin-bottom: 20px;
		padding-left: 20px;
	}

	.tracking-button {
		background: none;
		border: none;
		cursor: pointer;
		padding: 8px;
		transition: transform 0.3s ease;
	}

	.tracking-button:hover {
		transform: scale(1.1);
	}

	.tracking-timeline {
		position: relative;
		padding: 20px 0;
		margin-left: 20px;
	}

	.tracking-timeline::before {
		content: '';
		position: absolute;
		left: 19px;
		top: 0;
		bottom: 0;
		width: 2px;
		background: #e0e0e0;
	}

	.tracking-item {
		display: flex;
		margin-bottom: 30px;
		position: relative;
		padding-right: 20px;
	}

	.tracking-icon {
		flex: 0 0 40px;
		position: relative;
	}

	.tracking-status {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: white;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		z-index: 1;
	}

	.tracking-content {
		flex: 1;
		padding-left: 20px;
		background: #fff;
	/*      border-radius: 4px;*/
	/*      box-shadow: 0 1px 3px rgba(0,0,0,0.1);*/
		padding: 3px;
		margin-left: 10px;
	}

	.tracking-title {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 10px;
	}

	.tracking-title h4 {
		margin: 0;
		color: #333;
		font-size: 16px;
		font-weight: 600;
	}

	.tracking-date {
		color: #757575;
		font-size: 14px;
	}

	.tracking-info {
		color: #616161;
		font-size: 14px;
	}

	.tracking-info p {
		display: flex;
		align-items: center;
		margin: 5px 0;
	}

	@media (max-width: 768px) {
		.tracking-container {
			padding: 10px;
		}
		
		.tracking-content {
			margin-left: 5px;
		}
	}


		/* Añade esto a tu stylesheet */
	.tracking-status-card[data-status="entregado"] {
		border-left: 3px solid #10b981;
	}
        
	.tracking-status-card[data-status="en_transito"] {
		border-left: 3px solid #31b5ff;
	}
	
	.tracking-status-card[data-status="sin_información"] {
		border-left: 3px solid #ffc82e;
	}
	
	.tracking-status-card[data-status="excepcion"] {
		border-left: 3px solid #ff527e;
	}
	
	.tracking-status-card[data-status="listo_para_entregar"] {
		border-left: 3px solid #b37dff;
	}

	.tracking-status-card[data-status="disponible_envio"] {
		border-left: 3px solid #4dffcb;
	}

	.tracking-status-card[data-status="intento_fallido"] {
		border-left: 3px solid #ffb03c;
	}

	.tracking-status-card[data-status="no_reconocido"] {
		border-left: 3px solid #9caab1;
	}

	.tracking-status-card[data-status="sin_movimiento"] {
		border-left: 3px solid #c5a066;
	}

	.tracking-status-card[data-status="solicitud_recoleccion"] {
		border-left: 3px solid #52b1a8;
	}

	.tracking-status-card-error {
		border-left: 3px solid #dc3545;
	}

	/* Hover con color por estado */
	.tracking-status-card[data-status="entregado"]:hover {
		border-left: 7px solid #10b981;
	}
	
	.tracking-status-card[data-status="en_transito"]:hover {
		border-left: 7px solid #31b5ff;
	}
	
	.tracking-status-card[data-status="sin_información"]:hover {
		border-left: 7px solid #ffc82e;
	}
	
	.tracking-status-card[data-status="excepcion"]:hover {
		border-left: 7px solid #ff527e;
	}
	
	.tracking-status-card[data-status="listo_para_entregar"]:hover {
		border-left: 7px solid #b37dff;
	}
	
	.tracking-status-card[data-status="disponible_envio"]:hover {
		border-left: 7px solid #4dffcb;
	}
	
	.tracking-status-card[data-status="intento_fallido"]:hover {
		border-left: 7px solid #ffb03c;
	}
	
	.tracking-status-card[data-status="no_reconocido"]:hover {
		border-left: 7px solid #9caab1;
	}
	
	.tracking-status-card[data-status="sin_movimiento"]:hover {
		border-left: 7px solid #c5a066;
	}
	
	.tracking-status-card[data-status="solicitud_recoleccion"]:hover {
		border-left: 7px solid #52b1a8;
	}

	.tracking-status-card-error:hover  {
		border-left: 7px solid #dc3545;
	}


	/* Efecto al filtrar */
	
	.tracking-status-card:not([style*="display: block"]) {
		transform: scale(0.98);
	}
	
	
	.status-dashboard {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(53px, 1fr));
		gap: 5px;
		padding: 16px;
	}
	
	.status-card {
		--hover-bg: rgba(var(--status-rgb), 0.1);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px 0px;
		border-radius: 8px;
		background: white;
		box-shadow: 0 5px 5px rgba(0,0,0,0.05);
		transition: all 0.3s ease;
		cursor: pointer;
		border: 1px solid #e5e7eb;
		overflow: hidden;
		width: 50px;
	}
	
	.status-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background-color: var(--status-color);
	}
	
	.status-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 5px 15px rgba(0,0,0,0.1);
		background: var(--hover-bg);
	}
	
	.status-card.active {
		background: rgba(var(--status-rgb), 0.15);
		border-color: var(--status-color);
		box-shadow: 0 7px 15px rgba(0,0,0,0.1);
		transform: translateY(-3px);
	}
	
	
	.status-icon {
		width: 24px;
		height: 24px;
		margin-top: 3px;
		color: #797979;
	}
	
	.status-icon i {
		width: 100%;
		height: 100%;
		color: var(--status-color);
		font-size: 22px;
	}
	
	.status-count {
		font-weight:bold;
		font-size: 15px;
		color: var(--status-color);
	}
	
	.status-label {
		font-size: 11px;
		text-align: center;
		color: #4b5563;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}
	
	.status-card.active .status-label,
	.status-card:hover .status-label {
		color: #111827;
		font-weight: 500;
	}
	
	/* Efecto de onda al hacer clic */
	.status-card:active::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: radial-gradient(circle, rgba(var(--status-rgb),0.2) 1%, transparent 1%) center/15000%;
		animation: ripple 0.6s linear;
		border-radius: inherit;
	}
	
	@keyframes ripple {
		0% { transform: scale(0); opacity: 1; }
		100% { transform: scale(10); opacity: 0; }
	}

	.modal-rastreo {
		max-height: 600px; /* valor por defecto para pantallas grandes */
		overflow-y: scroll;
	}
	
	/* Si la altura de la pantalla es menor a 1800px, usar 600px */
	@media (min-width: 1799px) {
		.modal-rastreo {
			max-height: 750px;
			overflow-y: scroll;
		}
	} 

	.container-tablaResumen {
		padding: 0 70px;
	}