/*===========================
		estilos propios v2
===========================*/
.permisoChip{
	display:inline-block;
	padding:4px 10px;
	margin:2px;
	border-radius:20px;
	background:#e9ecef;
	cursor:pointer;
	font-size:12px;
	transition:all .2s;
}
.permisoChip:hover{
	background:#dee2e6;
}
.permisoChip.activo{
	background:#0d6efd;
	color:#fff;
}
.moduloPermisos{
	font-weight:600;
	width:160px;
}

/*===========================
		estilos propios
===========================*/
.main-wrapper {
	margin-left: 0 !important;
	width: 100% !important;
  }
  
  .text-xl {
	font-size: 20px;
  }
  
  /* =========================== Estilos para el icono de la tarjeta =========================== */
  .icon-card {
	background-color: #fff;
	border-radius: 1rem;
	box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.175); /*Sombra de la tarjeta*/
	padding: 1rem 1.25rem;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /*Efecto de transformación y sombra al pasar el ratón por encima*/
	cursor: pointer;
  }
  
  .icon-card:hover {
	transform: none !important; /*Elimina el efecto de transformación al pasar el ratón por encima*/
	box-shadow: none !important; /*Elimina la sombra al pasar el ratón por encima*/
	background-color: #faf8f8; /*Color que se pone cuando se pone el ratón encima*/
  }
  
  .icon-card .icon i.efecto-resaltar {
	font-size: 2em;
	background: linear-gradient(45deg, #8da761, #fffb00); /*Color del degradado del icono*/
	-webkit-background-clip: text;
	background-clip: text; 
	-webkit-text-fill-color: transparent;
  }
  
  
  /* =========================== Estilos AD en llamada en curso =========================== */
  
  .llamada-ad .card-body {
	  position: relative;
	  overflow: hidden;
	}
  
	.llamada-ad .card-body::before {
	  content: "AD";
	  position: absolute;
	  font-size: 7rem;
	  font-weight: 800;
	  color: rgba(0, 0, 0, 0.05); /* gris clarito translúcido */
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%) rotate(-20deg);
	  pointer-events: none;
	  z-index: 0;
	}
  
	.llamada-ad .card-body > * {
	  position: relative;
	  z-index: 1;
	}
  
	/* ======= Bug Animation ======= */
	@keyframes bug-wiggle {
	  0% { transform: rotate(0deg); }
	  25% { transform: rotate(5deg); }
	  50% { transform: rotate(-5deg); }
	  75% { transform: rotate(5deg); }
	  100% { transform: rotate(0deg); }
	}
  
	@keyframes color-cycle {
	  0%   { color: #00c3ff; }
	  25%  { color: #00ffaa; }
	  50%  { color: #ffc107; }
	  75%  { color: #ff6ec7; }
	  100% { color: #00c3ff; }
	}
  
	.bug-animation {
	  animation: bug-wiggle 1s infinite ease-in-out;
	  display: inline-block;
	}
  
	.color-shift-text {
	  animation: color-cycle 4s infinite linear;
	}
  
	#modalTelefonos table tbody tr:hover {
	  background-color: #f1f1f1;
	  cursor: default;
	}
	#modalSucursal table tbody tr:hover {
	  background-color: #f1f1f1;
	  cursor: default;
	}
  
	/* ------------  Iconos de carpetas ------------ */
  
	.icon-folder {
	  width: 140px;
	  height: 140px;
	  border-radius: 20px;
	  background: #ffffff;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 36px;
	  cursor: pointer;
	  margin: auto;
	  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	  transition: all 0.2s;
	  margin-top: 20px;
  }
  
	.icon-folder:hover {
	  transform: translateY(-3px);
	  box-shadow: 0 8px 12px rgba(0,0,0,0.15);
	}
  
	/* 📱 Tablets y móviles grandes */
	@media (max-width: 992px) {
	  .icon-folder {
		  width: 100px;
		  height: 100px;
		  font-size: 28px;
	  }
	}
  
	/* 📱 Móviles normales */
	@media (max-width: 768px) {
	  .icon-folder {
		  width: 80px;
		  height: 80px;
		  font-size: 22px;
	  }
  
	  .section p {
		  font-size: 12px !important;
	  }
	}
  
	/* 📱 Móviles pequeños (tipo iPhone SE) */
	@media (max-width: 480px) {
	  .icon-folder {
		  width: 60px;
		  height: 60px;
		  font-size: 18px;
	  }
  
	  .section p {
		  font-size: 10px !important;
	  }
	}
  
	/* Ajustar tamaño y posición de los modales */
	.modal-dialog {
		max-width: 700px; /* menos ancho que modal-lg */
	}
  
	@media (max-width: 768px) {
		.modal-dialog {
			max-width: 90%; /* en móvil ocupa el 90% de ancho */
			margin: 0 auto;
		}
	}
  
	/* Dentro de modales, que los iconos se adapten igual */
	.modal .icon-folder {
		width: 100px;
		height: 100px;
		font-size: 28px;
	}
  
	@media (max-width: 768px) {
		.modal .icon-folder {
			width: 70px;
			height: 70px;
			font-size: 20px;
		}
	}
  
	body.modal-open {
	position: fixed;
	width: 100%;
	overflow-y: scroll;
	padding-right: 0 !important;
  }
  
	#redTaller img {
	  max-width: 150px !important;
	  max-height: 150px !important;
	  object-fit: contain;
	}
  
	/* ------------  Header dashboard callcenter ------------ */
  
  /* Ajustes generales */
  .header .header-left,
  .header .header-right,
  .header .notification-box {
	flex-wrap: nowrap; /* no dejar que se apilen */
	align-items: center;
  }
  
  /* Input de búsqueda */
  .header-search input {
	width: 200px;
	font-size: 16px;
	padding: 5px 10px;
  }
  
  .menu-toggle-btn a {
	font-size: 16px;
	padding: 6px 12px;
  }
  
  /* Perfil */
  .profile-box .profile-info .info h6 {
	font-size: 16px;
  }
  
  .profile-box .profile-info .info p {
	font-size: 12px;
  }
  
  /* Dropdown “Trabajando con …” */
  .notification-box .profile-info .info h6 {
	font-size: 16px;
  }
  
  .notification-box .profile-info .info p {
	font-size: 12px;
  }
  
  /* ======== TABLETS ======== */
  @media (max-width: 992px) {
	.header-search input {
	  width: 150px;
	  font-size: 14px;
	}
  
	.menu-toggle-btn a {
	  font-size: 14px;
	  padding: 4px 10px;
	}
  
	.profile-box .profile-info .info h6,
	.notification-box .profile-info .info h6 {
	  font-size: 14px;
	}
  
	.profile-box .profile-info .info p,
	.notification-box .profile-info .info p {
	  font-size: 11px;
	}
  }
  
  /* ======== MÓVILES ======== */
  @media (max-width: 768px) {
	.header-search input {
	  width: 120px;
	  font-size: 12px;
	}
  
	.menu-toggle-btn a {
	  font-size: 12px;
	  padding: 3px 8px;
	}
  
	.profile-box .profile-info .info h6,
	.notification-box .profile-info .info h6 {
	  font-size: 12px;
	}
  
	.profile-box .profile-info .info p,
	.notification-box .profile-info .info p {
	  font-size: 10px;
	}
  
	/* Reduce el tamaño de las letras en la tabla de tareas */
	#tablaTareas th h6,
	#tablaTareas td {
	  font-size: 12px;
	}
  
	/* Reduce el padding de las celdas para que no se vea tan grande */
	#tablaTareas th,
	#tablaTareas td {
	  padding: 6px 8px;
	}
  }
  
  /* ======== MÓVILES PEQUEÑOS ======== */
  @media (max-width: 480px) {
	.header-search input {
	  width: 100px;
	  font-size: 10px;
	}
  
	.menu-toggle-btn a {
	  font-size: 10px;
	  padding: 2px 6px;
	}
  
	.profile-box .profile-info .info h6,
	.notification-box .profile-info .info h6 {
	  font-size: 10px;
	}
  
	.profile-box .profile-info .info p,
	.notification-box .profile-info .info p {
	  font-size: 8px;
	}
  }
  
  /**/
  
  .tooltip-red {
	position: absolute;
	top: 40px;
	right: 0;
	padding: 4px;
	z-index: 5;
  }
  
  .tooltip-red img {
	display: block;
	max-width: 100px;
	max-height: 70px;
	object-fit: contain;
	border: 2px solid #ccc;
	border-radius: 8px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  .tooltip-red img:hover {
	border-color: #007bff;
	box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
  }
  
  /*Boton de inicio de tarea play / pause*/
  .toggle-cont {
	width: 50px;
	height: 25px;
	border-radius: 9999px;
  }
  
  .toggle-cont .toggle-input {
	display: none;
  }
  
  .toggle-cont .toggle-label {
	cursor: pointer;
	position: relative;
	display: inline-block;
	padding: 6px;
	width: 100%;
	height: 100%;
	background: #ffffff;
	border-color: #000000;
	border-width: 1px;
	border-radius: 9999px;
	box-sizing: content-box;
	box-shadow: 0px 0px 12px -6px #7c7979;
  }
  
  .toggle-cont .toggle-label .cont-label-play {
	position: relative;
	width: 25px;
	aspect-ratio: 1 / 1;
	background: #ff0202;
	border-radius: 9999px;
	transition: all 0.5s cubic-bezier(1, 0, 0, 1);
  }
  
  .toggle-cont .toggle-input:checked + .toggle-label .cont-label-play {
	background: #66f43f;
	transform: translateX(26px);
  }
  
  .toggle-cont .toggle-label .label-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	width: 14px;
	aspect-ratio: 1 / 1;
	background: #fefefe;
	border-radius: 3px;
	clip-path: polygon(25% 0, 75% 50%, 25% 100%, 25% 51%);
	transition: all 0.5s cubic-bezier(1, 0, 0, 1);
  }
  
  .toggle-cont .toggle-input:checked + .toggle-label .label-play {
	width: 12px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  
  td.descripcion {
	max-width: 300px;
	white-space: normal;
	word-wrap: break-word;
  } 
  
  tr.subtarea td.descripcion {
	padding-left: 32px;
	color: #000000;
	border-top: none;
  }
  
  .progress {
	position: relative;
	height: 20px;
	border-radius: 10px;
	background-color: #e9ecef; /* gris clarito de fondo */
	overflow: hidden; /* recorta lo que se salga */
  }
  
  .progress-bar {
	height: 100%;
	background-color: #007bff;
	width: 0%;
	transition: width 0.3s ease;
	border-radius: 10px 0 0 10px; /* solo borde redondo a la izquierda */
  }
  .progress-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: bold;
	font-size: 0.85rem;
	color: #333;
	pointer-events: none;
  }
  
  /*CSS DE LA TABLA*/
  /* Sombreado de toda la fila */
  #tablalistadoSheduler tbody tr td {
	transition: background-color 0.2s ease;
  }
  
  #tablalistadoSheduler tbody tr:hover td {
	background-color: #f2f2f2;
  }
  
  #tablalistadoSheduler tbody tr {
	cursor: pointer;
  }
  
  /* Bloquear interacción de todos los elementos internos */
  #tablalistadoSheduler tbody tr td input,
  #tablalistadoSheduler tbody tr td select,
  #tablalistadoSheduler tbody tr td textarea,
  #tablalistadoSheduler tbody tr td .rating input,
  #tablalistadoSheduler tbody tr td button {
	pointer-events: none; /* nada se puede modificar */
  }
  
  /* Permitir solo toggle Play/Pause */
  #tablalistadoSheduler tbody tr td .toggle-input,
  #tablalistadoSheduler tbody tr td .toggle-label {
	pointer-events: auto;
	cursor: pointer;
  }
  
  /* En móvil solo se muestran la tarea y el botón play/pause */
  @media screen and (max-width: 768px) {
  
	.table-wrapper.table-responsive {
	  overflow-x: hidden !important;
	}
  
	/* Ocultar todas las columnas menos descripción y on/off */
	#tablalistadoSheduler tbody tr td,
	#tablalistadoSheduler thead th {
	  display: none;
	}
	#tablalistadoSheduler tbody tr td.descripcion,
	#tablalistadoSheduler tbody tr td.onoff,
	#tablalistadoSheduler tbody tr td.prioridad,
	#tablalistadoSheduler thead th.prioridad,
	#tablalistadoSheduler thead th.descripcion,
	#tablalistadoSheduler thead th.onoff {
	  display: table-cell;
	}
  
	/* Ajustes de ancho y saltos de línea */
	#tablalistadoSheduler,
	#tablalistadoSheduler td,
	#tablalistadoSheduler th {
	  width: auto !important;
	  min-width: 0 !important;
	  max-width: 100% !important;
	  white-space: normal !important;
	  word-break: break-word !important;
	  overflow-x: unset !important;
	}
  
	/* Separación del toggle */
	#tablalistadoSheduler td.onoff .toggle-cont {
	  margin-right: 16px;
	}
  
	#tablalistadoSheduler td.prioridad .progress {
	  width: 100%;
	  min-width: 80px;
	}
  
	/* Encabezado personalizado */
	#tablalistadoSheduler thead tr th {
	  display: none !important;
	}
	#tablalistadoSheduler thead tr::before {
	  content: "Historial de Tareas";
	  display: table-cell;
	  text-align: center;
	  font-weight: bold;
	  font-size: 1.1rem;
	  background: #f5f5f5;
	  color: #333;
	  width: 100%;
	  padding: 12px 0;
	}
  
	/* Espacio para que el texto no se pegue a la banda */
	#tablalistadoSheduler tbody tr td.descripcion {
	  padding-left: 12px;
	}
  
	/* Oculta todas las columnas excepto "Tarea" y "Fecha de Fin" */
	#tablaTareas thead th:not(:first-child):not(:nth-child(8)),
	#tablaTareas tbody td:not(:first-child):not(:nth-child(8)) {
	  display: none !important;
	}
	#tablaTareas {
	  width: 100% !important;
	  table-layout: auto !important;
	}
	#tablaTareas th,
	#tablaTareas td {
	  white-space: normal !important;
	  word-break: break-word !important;
	  min-width: 0 !important;
	  max-width: 100% !important;
	}
  }
  
  /* Estilos del botón de agregar tarea */
  .add-task-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
  }
  
  .add-task-btn svg {
	width: 100%;
	height: 100%;
	transition: fill 0.3s ease, stroke 0.3s ease;
  }
  
  .add-task-btn:hover {
	transform: rotate(90deg);
  }
  
  .add-task-btn:hover svg circle {
	fill: #fffcfc; /* relleno al pasar el ratón */
  }
  
  .add-task-btn:active svg circle {
	fill: #abaaaa;
	stroke: #aaa;
  }
  
  /*Boton filtrar tarea*/
  .filter {
	width: 50px;
	height: 50px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 0, 0, 0.192);
	cursor: pointer;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.021);
	transition: all 0.3s;
  }
  
  .filter svg {
	height: 16px;
	fill: rgb(77, 77, 77);
	transition: all 0.3s;
  }
  .filter:hover {
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.11);
	background-color: rgb(59, 59, 59);
  }
  .filter:hover svg {
	fill: white;
  }
  
  /* Estilos para la tabla con scroll ----------------------------------------------------------------------*/
  .table-wrapper {
	max-height: 70vh;
	overflow-y: auto;
  }
  
  /* Para que el encabezado se quede fijo */
  .table thead {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #f8f9fa;
  }
  
  /* Asegurar que las celdas del header tengan el mismo tamaño que las del body */
  .table thead th {
	position: sticky;
	top: 0;
	background-color: #f8f9fa;
	z-index: 101;
  }
  
  .avatar-iniciales {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #007bff;
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
	margin-right: 6px;
	position: relative;
  }
  .avatar-iniciales::before {
	content: attr(data-iniciales);
  }
  
  
  
  /* ===== Layout sin sidebar ===== */
  .no-sidebar {
	margin-left: 0 !important;
	width: 100% !important;
  }
  
  /* Evita scroll horizontal */
  body {
	overflow-x: hidden;
  }
  
  /* Imagen perfil */
  #imagenEmpleado {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
  }
  
  /* Protección textos largos */
  #nombreEmpleado,
  #emailEmpleado {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
  }
  
  /* Ocultar email en móvil */
  @media (max-width: 576px) {
	#emailEmpleado {
	  display: none;
	}
  }
  
  /* Botón Inicio */
  #menu-toggle {
	font-size: 17px;
	padding: 10px 22px;
	border-radius: 10px;
  }
  
  .adjunto-img {
	max-width: 420px;
	height: auto;
  }