.circulo-iniciales {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #834f7d;
    color: white;
    text-align: center;
    line-height: 25px;
    font-weight: bold;
    font-size: 12px;
}

/* whatsapp */
.sidebar-wapp {
	background-color: #f0f0f0;
 }

 .sidebar-wapp .contact {
	padding: 15px;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
	
 }

 .chat-window {
	background-color: #e5ddd5; /* Color de fondo base */
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
 }

 .messages {
	padding: 20px;
	overflow-y: scroll;
	height: calc(80vh - 130px);
 }

 .message {
	margin-bottom: 15px;
	padding: 10px;
	border-radius: 15px;
	max-width: 80%;
 }

 .message.sent {
	background-color: #dcf8c6;
	align-self: flex-end;
 }

 .message.received {
	background-color: #ffffff;
 }

 .input-group{
	padding: 5px;
 }

 .whatsapp-message {
	max-width: max-content;
	border-radius: 10px 10px 10px 10px;
	padding: 10px;
	background-color: #DCF8C6;
	margin: 10px 0;
	position: relative;
	word-wrap: break-word;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
 }

 .whatsapp-message:after {
	content: "";
	position: absolute;
	bottom: 75%;
	right: 10px;
	width: 0;
	height: 0;
	border-left: 10px solid #DCF8C6;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-right: -18px;
 }

 .message-content {
	font-size: 14px;
	color: #000;
 }

 .message-time {
	font-size: 12px;
	color: #888;
 }

 #btnEnviarWapp, #btnPlantillaWappInsertar, #btnPlantillaWappActualizar{
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	font-size: 18px;
}

.input-group-append {
	margin-left: 10px;
}

#mensaje_wapp {
	padding: 12px;
	border-radius: 25px;
	height: 17px;
	max-height: 500px; /* Altura máxima */
	min-height: 50px; /* Altura mínima */
	overflow-y: auto; /* Activa el scroll vertical si el contenido supera la altura máxima */
	scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
}

#mensaje_wapp::-webkit-scrollbar {
	display: none; /* Oculta la barra de desplazamiento en WebKit (Chrome, Safari) */
}

.pre_wapp{
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	white-space: break-spaces;
    font-size: 14px; /* Tamaño de la fuente */
    font-weight: 400; /* Peso de la letra, 400 es regular */
    line-height: 1.5; /* Interlineado */
    color: #262626; /* Color de texto similar al de WhatsApp */
    letter-spacing: 0.5px; /* Espaciado entre letras */
    padding: 10px; /* Añadido algo de padding para darle espacio */
}
/*  */



/* Checkbox personalizado */
/* input[type="checkbox"] { */
    /* display: none; Ocultar el checkbox original */
/* } */

input[type="checkbox"] + label {
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: 0.4s;
}

input[type="checkbox"] + label::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: 0.4s;
}

/* Checkbox marcado */
input[type="checkbox"]:checked + label {
    background-color: #21f360;
}

input[type="checkbox"]:checked + label::after {
    transform: translateX(20px);
}
/*  */



/* CARD PROFLE  */
.profile-card {
	background-color: white;
	border-radius: 50px;
	padding: 10px 10px;
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
}
.profile-card__avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 15px;
}
.profile-card__info {
	display: flex;
	flex-direction: column;
}
.profile-card__name {
	font-weight: bold;
	margin: 0;
}
.profile-card__title {
	color: #666;
	font-size: 0.9em;
	margin: 0;
}
.profile-card__follow-btn {
	background-color: #8a2be2;
	color: white;
	border: none;
	border-radius: 20px;
	padding: 8px 20px;
	margin-left: 20px;
	cursor: pointer;
	font-weight: bold;
}



/* cambio dark /light */
/* Transiciones para el cambio de modo */
body {
    transition: background-color 0.3s, color 0.3s;
}

/* Estilos para el modo claro */
.light-mode {
    background-color: #ffffff;
    color: #858796;
}

/* Estilos generales para el modo claro */
.light-mode .profile-card,
.light-mode .btn-light,
.light-mode .card,
.light-mode .modal-content,
.light-mode .card-header,
.light-mode .list-group-item,
.light-mode .dropdown-menu,
.light-mode .dropdown-item,
.light-mode .alert,
.light-mode .input-group-text,
.light-mode .page-link,
.light-mode .badge,
.light-mode .table,
.light-mode .bg-light {
    background-color: #fff;
    color: #858796;
    border-color: #ddd; /* Restaurar el color de borde de Bootstrap */
}

/* Asegurando que los bordes sean visibles en light mode */
.light-mode .card,
.light-mode .modal-content,
.light-mode .list-group-item,
.light-mode .dropdown-menu,
.light-mode .dropdown-item,
.light-mode .input-group-text,
.light-mode .page-link {
    /* border: 1px solid #ddd; Definir el borde de forma explícita */
	border:none
}

/* Ajustes adicionales para variantes de Bootstrap en modo claro */
.light-mode .alert-primary,
.light-mode .table-primary,
.light-mode .bg-primary {
    background-color: #cce5ff;
    border-color: #b8daff;
    color: #004085;
}

.light-mode .alert-secondary,
.light-mode .table-secondary,
.light-mode .bg-secondary {
    background-color: #e2e3e5;
    border-color: #d6d8db;
    color: #383d41;
}

.light-mode .alert-success,
.light-mode .table-success,
.light-mode .bg-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.light-mode .alert-danger,
.light-mode .table-danger,
.light-mode .bg-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.light-mode .alert-warning,
.light-mode .table-warning,
.light-mode .bg-warning {
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.light-mode .alert-info,
.light-mode .table-info,
.light-mode .bg-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.light-mode .alert-light,
.light-mode .table-light,
.light-mode .bg-light {
    background-color: #fefefe;
    border-color: #fdfdfe;
    color: #818182;
}

.light-mode .alert-dark,
.light-mode .table-dark,
.light-mode .bg-dark {
    background-color: #d6d8d9;
    border-color: #c6c8ca;
    color: #1b1e21;
}


/* Estilos adicionales para badges en modo claro */
.light-mode .badge-primary {
    background-color: #007bff;
    color: #fff;
}

.light-mode .badge-secondary {
    background-color: #6c757d;
    color: #fff;
}

.light-mode .badge-success {
    background-color: #28a745;
    color: #fff;
}

.light-mode .badge-danger {
    background-color: #dc3545;
    color: #fff;
}

.light-mode .badge-warning {
    background-color: #ffc107;
    color: #212529;
}

.light-mode .badge-info {
    background-color: #17a2b8;
    color: #fff;
}

.light-mode .badge-light {
    background-color: #f8f9fa;
    color: #212529;
}

.light-mode .badge-dark {
    background-color: #343a40;
    color: #fff;
}

/* Estilos para el modo oscuro */
.dark-mode {
    background-color: #333333;
    color: #ffffff;
}

.dark-mode .btn-light {
    background-color: #555;
    color: #fff;
}

.dark-mode .profile-card,
.dark-mode .card,
.dark-mode .modal-content,
.dark-mode .card-header,
.dark-mode .list-group-item,
.dark-mode .dropdown-menu,
.dark-mode .dropdown-item,
.dark-mode .alert,
.dark-mode .input-group-text,
.dark-mode .page-link,
.dark-mode .badge,
.dark-mode .table,
.dark-mode .sidebar-wapp,
.dark-mode .bg-light {
    background-color: #444;
    color: #c4c4c4;
    border-color: #666;
}

/* Otros estilos para tablas */
.dark-mode .table-primary {
    background-color: #004085;
    border-color: #004085;
    color: #cce5ff;
}

.dark-mode .table-secondary {
    background-color: #383d41;
    border-color: #383d41;
    color: #e2e3e5;
}

.dark-mode .table-success {
    background-color: #155724;
    border-color: #155724;
    color: #d4edda;
}

.dark-mode .table-danger {
    background-color: #721c24;
    border-color: #721c24;
    color: #f8d7da;
}

.dark-mode .table-warning {
    background-color: #856404;
    border-color: #856404;
    color: #fff3cd;
}

.dark-mode .table-info {
    background-color: #0c5460;
    border-color: #0c5460;
    color: #d1ecf1;
}

.dark-mode .table-light {
    background-color: #444;
    border-color: #666;
    color: #fff;
}

.dark-mode .table-dark {
    background-color: #222;
    border-color: #222;
    color: #fff;
}

/* Otros estilos para badges */
.dark-mode .badge-primary {
    background-color: #004085;
    color: #cce5ff;
}

.dark-mode .badge-secondary {
    background-color: #383d41;
    color: #e2e3e5;
}

.dark-mode .badge-success {
    background-color: #155724;
    color: #d4edda;
}

.dark-mode .badge-danger {
    background-color: #721c24;
    color: #f8d7da;
}

.dark-mode .badge-warning {
    background-color: #856404;
    color: #fff3cd;
}

.dark-mode .badge-info {
    background-color: #0c5460;
    color: #d1ecf1;
}

.dark-mode .badge-light {
    background-color: #fefefe;
    color: #333;
}

.dark-mode .badge-dark {
    background-color: #222;
    color: #fff;
}

/* Otros estilos en modo oscuro */
.dark-mode .page-item.disabled .page-link {
    background-color: #333;
    color: #888;
}

.dark-mode .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
}

.dark-mode .navbar {
    background-color: #222 !important;
}

.dark-mode .navbar-brand,
.dark-mode .nav-link {
    color: #fff !important;
}

.dark-mode .form-control {
    background-color: #444;
    border-color: #666666;
    color: #fff;
}

.dark-mode .text-primary {
    color: #021f77 !important;
}

.dark-mode .sidebar-wapp .contact{
	padding: 15px;
    border-bottom: 1px solid #66666661;
    cursor: pointer;
}

/* Botón de cambio de modo */
#mode-toggle {
	border-color: #fff;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1030;
}

/*  */



/* HTML: <div class="loader"></div> */
.loader {
	transform: rotateZ(45deg);
	perspective: 1000px;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	color: #e99f00;
	display: inline-block;
  }
	.loader:before,
	.loader:after {
	  content: '';
	  display: block;
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: inherit;
	  height: inherit;
	  border-radius: 50%;
	  transform: rotateX(70deg);
	  animation: 1s spin linear infinite;
	}
	.loader:after {
	  color: #FF3D00;
	  transform: rotateY(70deg);
	  animation-delay: .4s;
	}

  @keyframes rotate {
	0% {
	  transform: translate(-50%, -50%) rotateZ(0deg);
	}
	100% {
	  transform: translate(-50%, -50%) rotateZ(360deg);
	}
  }

  @keyframes rotateccw {
	0% {
	  transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
	  transform: translate(-50%, -50%) rotate(-360deg);
	}
  }

  @keyframes spin {
	0%,
	100% {
	  box-shadow: .2em 0px 0 0px currentcolor;
	}
	12% {
	  box-shadow: .2em .2em 0 0 currentcolor;
	}
	25% {
	  box-shadow: 0 .2em 0 0px currentcolor;
	}
	37% {
	  box-shadow: -.2em .2em 0 0 currentcolor;
	}
	50% {
	  box-shadow: -.2em 0 0 0 currentcolor;
	}
	62% {
	  box-shadow: -.2em -.2em 0 0 currentcolor;
	}
	75% {
	  box-shadow: 0px -.2em 0 0 currentcolor;
	}
	87% {
	  box-shadow: .2em -.2em 0 0 currentcolor;
	}
  }

/*  */







/* GRUPOS */
.custom-select {
    border: 2px solid #e3e6f0;
    color: #858796;
    background-color: #e3e6f0;
	font-weight: bold
}

.custom-select:focus {
	border-color: #858796;
	box-shadow: 0 0 0 0.2rem rgba(114, 114, 114, 0.25);
}

.hover-shadow:hover {
	cursor: move;
	box-shadow: 0 0.5rem 1rem rgba(0, 70, 245, 0.15) !important;
	transition: box-shadow 0.3s ease-in-out;
  }
  .hover-expand {
	cursor: move;
	transition: all 0.3s ease;
  }
  .hover-expand:hover {
	background-color:#4e4f5a;
	cursor: move;
	transform: scale(1.05);
  }





  .contenedor-destino {
    height: 600px;
	overflow: hidden;
}




.highlight {
	border: 4px dashed #f6c23e;
	background-color: unset;

}
/* GRUPOS */


input:placeholder-shown {
    background-color: #f8f9fa; /* Color de fondo cuando el input está vacío */
}

input:not(:placeholder-shown) {
    background-color: #ffffff; /* Color de fondo cuando el input tiene datos */
}

.char-cont{
	position: relative;
	margin: auto;
	height: 280px;
	max-height: 280px;
	width:100%;
};


select optgroup label {
	color: rgb(49, 87, 194);
	font-weight: bold;
  }

.campanita {
	animation: shake 0.5s infinite;
	color: rgb(231, 145, 145);
}
@keyframes shake {
	0%, 100% {
	transform: translateX(0); /* Inicial y final: sin desplazamiento horizontal */
	}
	50% {
	transform: translateX(-3px); /* Mitad de la animación: desplazamiento hacia la izquierda */
	}
}



.overflow_s{
	height:600px; 
	overflow-y:scroll;
}


.asidebar_desktop{
	height: 100vh;
}

.bg-danger-a{
background-color:#fbd6d9;
}


.bg-primary-a{
background-color:#9ec5fe;
}       

.bg-info-a{
background-color: #cfe2ff;
}  

.bg-success-a{
background-color: #a3cfbb;
} 

.bg-warning-a{
background-color:#fecba1
}   

.bg-secondary-a{
background-color:#e9ecef;
}  

.bg-black-a{
background-color: #343a40;
}

.bg-yellow-a{
background-color:#ffe69c;
}      

.bg-purple-a{
	background-color:#c29ffa;
}  

/*  */

/*  */

/* form de index */
@media (min-width: 768px) {
	.gradient-form {
		height: 90vh !important;
	}
}

/* tabla movil */
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

	table,
	thead,
	tbody,
	th,
	td,
	tr {
		display: block;
	}

	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr {
		/* margin: 0 0 1rem 0;  */
		/* background-color: rgb(255, 255, 255); */
		font-size: medium;
		border-bottom: #f3f4f7 solid 20px;
	}

	/* vista movil de tabla de intalaciones */
	#tabla_instalaciones tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: #f3f4f7 solid 20px;
	}

	#tabla_instalaciones td {
		border: none;
		border-bottom: 1px solid #dee2e6;
		position: relative;
		padding-left: 30%;
	}

	#tabla_instalaciones td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_instalaciones td:nth-of-type(1):before {
		content: "No.";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(2):before {
		content: "Servicio :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(3):before {
		content: "Nombre :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(4):before {
		content: "Ciudad :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(5):before {
		content: "Telefono :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(6):before {
		content: "Pago :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(7):before {
		content: "Prioridad :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(8):before {
		content: "Estado :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(9):before {
		content: "Tecnicos :";
		font-weight: bold;
	}

	#tabla_instalaciones td:nth-of-type(10):before {
		content: "Acciones :";
		font-weight: bold;
	}
	#tabla_instalaciones td:nth-of-type(11):before {
		content: " ";
	}


	/* vista movil de tabla de empleados */
	#tabla_empleados tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: #f3f4f7 solid 20px;
	}

	#tabla_empleados td {
		border: none;
		border-bottom: 1px solid #dee2e6;
		position: relative;
		padding-left: 30%;
	}

	#tabla_empleados td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}

	#tabla_empleados td:nth-of-type(1):before {
		content: "Clave";
		font-weight: bold;

	}

	#tabla_empleados td:nth-of-type(2):before {
		content: "Nombre :";
		font-weight: bold;

	}

	#tabla_empleados td:nth-of-type(3):before {
		content: "Cargo :";
		font-weight: bold;
	}


	#tabla_empleados td:nth-of-type(4):before {
		content: "Estado :";
		font-weight: bold;
	}

	#tabla_empleados td:nth-of-type(5):before {
		content: "Instalaciones :";
		font-weight: bold;
	}

	#tabla_empleados td:nth-of-type(6):before {
		content: "Ventas :";
		font-weight: bold;
	}

	#tabla_empleados td:nth-of-type(7):before {
		content: "Tickets :";
		font-weight: bold;
	}

	
	#tabla_empleados td:nth-of-type(8):before {
		content: "Validaciones :";
		font-weight: bold;
	}


	#tabla_empleados td:nth-of-type(9):before {
		content: "Foto :";
		font-weight: bold;
	}

	#tabla_empleados td:nth-of-type(10):before {
		content: "Acciones :";
		font-weight: bold;
	}

	
	/* vista movil de tabla de tickets */
	#tabla_tickets tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: #f3f4f7 solid 20px;

	}

	#tabla_tickets td {
		border: none;
		border-bottom: 1px solid #dee2e6;
		position: relative;
		padding-left: 30%;
	}

	#tabla_tickets td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_tickets td:nth-of-type(1):before {
		content: "Tickets :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(2):before {
		content: "Servicios :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(3):before {
		content: "Instalacion :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(4):before {
		content: "Referencia :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(5):before {
		content: "Telefono :";
		font-weight: bold;
	}

	/* #tabla_tickets td:nth-of-type(5):before {
		content: "Asunto :";
		font-weight: bold;
	} */

	#tabla_tickets td:nth-of-type(6):before {
		content: "Solicitante :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(7):before {
		content: "Prioridad :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(8):before {
		content: "Estado :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(9):before {
		content: "Tecnico :";
		font-weight: bold;
	}

	#tabla_tickets td:nth-of-type(10):before {
		content: "Acciones :";
		font-weight: bold;
	}
	#tabla_tickets td:nth-of-type(11):before {
		content: " ";
	}
    /* vista movil de tabla de tickets */


	

	/* vista movil de tabla de clientes */
	#tabla_clientes tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: #f3f4f7 solid 20px;

	}

	#tabla_clientes td {
		border: none;
		border-bottom: 1px solid #dee2e6;
		position: relative;
		padding-left: 30%;
	}

	#tabla_clientes td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_clientes td:nth-of-type(1):before {
		content: "Status :";
		font-weight: bold;
	}

	

	#tabla_clientes td:nth-of-type(2):before {
		content: "Servicio :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(3):before {
		content: "Nombre :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(4):before {
		content: "Telefono :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(5):before {
		content: "Zona :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(6):before {
		content: "SN :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(7):before {
		content: "Plan :";
		font-weight: bold;
	}


	#tabla_clientes td:nth-of-type(8):before {
		content: "Autorizado:";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(9):before {
		content: "IP :";
		font-weight: bold;
	} 

	#tabla_clientes td:nth-of-type(10):before {
		content: "TV :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(11):before {
		content: "Senal :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(12):before {
		content: "Niveles :";
		font-weight: bold;
	}

	#tabla_clientes td:nth-of-type(13):before {
		content: "Acciones";
		font-weight: bold;
	}
    /* vista movil de tabla de clientes */



	/* vista movil de tabla de vista de cliente */
	#tabla_vista_clientes tr:nth-child(odd) {
		font-size: medium;
		border-bottom: #f3f4f7 solid 20px;

	}

	#tabla_vista_clientes td {
		border: none;
		border-bottom: 1px solid #dee2e6;
		position: relative;
		padding-left: 30%;
	}

	#tabla_vista_clientes td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_vista_clientes td:nth-of-type(1):before {
		content: "Status :";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(2):before {
		content: "IPv4 :";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(3):before {
		content: "TV :";
		font-weight: bold;
	}
	

	#tabla_vista_clientes td:nth-of-type(4):before {
		content: "Autorizacion :";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(5):before {
		content: "Senal :";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(6):before {
		content: "Niveles :";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(7):before {
		content: "Megas:";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(8):before {
		content: "Dias Pagados:";
		font-weight: bold;
	}

	#tabla_vista_clientes td:nth-of-type(10):before {
		content: "Total:";
		font-weight: bold;
	}


	/* vista movil de tabla de vista cliente */



	
	/* vista movil de tabla de Autorizar sn */
	#Tablas_Autorizar_SN tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: #f3f4f7 solid 20px;

	}

	#Tablas_Autorizar_SN td {
		border: none;
		border-bottom: 1px solid #dee2e6;
		position: relative;
		padding-left: 30%;
	}

	#Tablas_Autorizar_SN td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	/* #Tablas_Autorizar_SN td:nth-of-type(1):before {
		content: "Descripcion:";
		font-weight: bold;
	} */

	#Tablas_Autorizar_SN td:nth-of-type(1):before {
		content: "Placa :";
		font-weight: bold;
	}

	#Tablas_Autorizar_SN td:nth-of-type(2):before {
		content: "Puerto :";
		font-weight: bold;
	}

	#Tablas_Autorizar_SN td:nth-of-type(3):before {
		content: "SN :";
		font-weight: bold;
	}

	#Tablas_Autorizar_SN td:nth-of-type(4):before {
		content: "Tipo :";
		font-weight: bold;
	}

	#Tablas_Autorizar_SN td:nth-of-type(5):before {
		content: "Accion :";
		font-weight: bold;
	}
	/* vista movil de tabla de Autorizar sn */



	/* vista movil de tabla de comentarios */
	#tabla_comentarios tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: #f3f4f7 solid 20px;

	}

	#tabla_comentarios td {
		border: none;
		border-bottom: 1px solid #dee2e6;
		position: relative;
		padding-left: 30%;
	}

	#tabla_comentarios td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_comentarios td:nth-of-type(1):before {
		content: "No. :";
		font-weight: bold;
	}

	#tabla_comentarios td:nth-of-type(2):before {
		content: "Tecnico :";
		font-weight: bold;
	}

	#tabla_comentarios td:nth-of-type(3):before {
		content: "Cliente :";
		font-weight: bold;
	}

	#tabla_comentarios td:nth-of-type(4):before {
		content: "Area :";
		font-weight: bold;
	}
	#tabla_comentarios td:nth-of-type(5):before {
		content: "Mensaje :";
		font-weight: bold;
	}

	#tabla_comentarios td:nth-of-type(6):before {
		content: "Fecha :";
		font-weight: bold;
	}
	/* vista movil de tabla de comentarios*/



	/* vista movil de tabla de facturas*/
	#tabla_facturas tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: #f3f4f7 solid 20px;

	}

	#tabla_facturas td {
		border: none;
		border-bottom: 1px solid #dee2e6;
		position: relative;
		padding-left: 30%;
	}

	#tabla_facturas td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	#tabla_facturas td:nth-of-type(1):before {
		content: "No. :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(2):before {
		content: "Servicio :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(3):before {
		content: "NIT :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(4):before {
		content: "Cliente :";
		font-weight: bold;
	}


	#tabla_facturas td:nth-of-type(5):before {
		content: "F.Ultimo Pago :";
		font-weight: bold;
		font-size: 12px;
	}


	#tabla_facturas td:nth-of-type(6):before {
		content: "Dias :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(7):before {
		content: "Total :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(8):before {
		content: "Forma de Pago :";
		font-weight: bold;
		font-size: 12px;
	}


	#tabla_facturas td:nth-of-type(9):before {
		content: "No.Factura :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(10):before {
		content: "F.Emitida :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(11):before {
		content: "Operador :";
		font-weight: bold;
	}

	#tabla_facturas td:nth-of-type(12):before {
		content: "Acciones :";
		font-weight: bold;
	}
	/* vista movil de tabla de facturas*/




	
	/* vista movil de tabla de facturas cliente*/
	#tabla_facturas_cliente tr:nth-child(odd) {
		/* background: #ffffff; */
		font-size: medium;
		border-bottom: #f3f4f7 solid 20px;

	}

	#tabla_facturas_cliente td {
		border: none;
		border-bottom: 1px solid #dee2e6;
		position: relative;
		padding-left: 30%;
	}

	#tabla_facturas_cliente td:before {
		position: absolute;
		top: 0;
		left: 6px;
		width: 30%;
		padding-right: 10px;
		white-space: nowrap;
	}


	/* #tabla_facturas_cliente td:nth-of-type(1):before {
		content: "No. :";
		font-weight: bold;
	} */

	#tabla_facturas_cliente td:nth-of-type(1):before {
		content: "F.Ultimo Pago :";
		font-weight: bold;
		font-size: 12px;
	}


	#tabla_facturas_cliente td:nth-of-type(2):before {
		content: "Dias :";
		font-weight: bold;
	}

	#tabla_facturas_cliente td:nth-of-type(3):before {
		content: "Total :";
		font-weight: bold;
	}

	#tabla_facturas_cliente td:nth-of-type(4):before {
		content: "Forma de Pago :";
		font-weight: bold;
		font-size: 12px;
	}


	#tabla_facturas_cliente td:nth-of-type(5):before {
		content: "No.Factura :";
		font-weight: bold;
	}

	/* #tabla_facturas_cliente td:nth-of-type(7):before {
		content: "F.Emitida :";
		font-weight: bold;
	} */

	#tabla_facturas_cliente td:nth-of-type(6):before {
		content: "Operador :";
		font-weight: bold;
	}

	#tabla_facturas_cliente td:nth-of-type(7):before {
		content: "Acciones :";
		font-weight: bold;
	}
	/* vista movil de tabla de facturas cliente*/

}
/*fin..*/




/* estilos input file */
.custom-file {
	display: none;
}

.custom-file-upload {
	border: 1px solid #d1d3e2; 
	display: inline-block;
	cursor: pointer;
	font-weight: bold;
	border-radius: 5px;
	padding: 5px
}

.custom-file-upload:hover {
	border: 1px solid #d1d3e2; 
	display: inline-block;
	cursor: pointer;
	color: rgb(46, 46, 45);
	font-weight: bold;
	background-color: #d1d3e2;
}

/*fin..*/



    /* Estilo para escritorio */
    @media (min-width: 768px) {
		.col-limited {
		  width: 400px; /* Ancho fijo */
		  max-width: 400px; /* Máximo espacio */
		  white-space: normal; /* Permite el salto de línea */
		  overflow-wrap: break-word; /* Ajusta texto largo */
		}

		.col-limited-2 {
			width: 180px; /* Ancho fijo */
			max-width: 180px; /* Máximo espacio */
			white-space: normal; /* Permite el salto de línea */
			overflow-wrap: break-word; /* Ajusta texto largo */
		  }
	  }
  
	  /* Estilo para móvil */
	  @media (max-width: 767px) {
		.col-limited_2 .col-limited {
		  max-width: none; /* Sin limitaciones */
		  width: auto; /* Usa el ancho natural del texto */
		  white-space: normal; /* Ajuste automático del texto */
		}
	  }