/*===========================
		estilos propios
===========================*/


.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);
}