.modal-xl {
  max-width: 90%; /* Ajusta el ancho del modal al 90% del viewport */
  width: 90%;
}

.modal-fullscreen {
  max-width: 100%; /* Ancho completo */
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.team-store-selectable-item {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.team-store-selectable-item .card.selected-item {
  border: 1px solid black;
  box-shadow: gray 3px 3px 7px;
}

.desactivar-select {
  pointer-events: none;
  background-color: #e9ecef;
}

.activar-select {
  pointer-events: auto;
  background-color: #fff;
}

.msg-carrito-prendas-sin-configurar {
  font-size: 14px;
  position: absolute;
  top: -14px;
  display: flex;
  align-items: center;
  width: fit-content;
  right: -8px;
}

.ribbon-box {
    position: relative
}

.ribbon-box .ribbon {
    position: relative;
    clear: both;
    padding: 5px 12px;
    margin-bottom: 15px;
    -webkit-box-shadow: 2px 5px 10px rgba(50,58,70,.15);
    box-shadow: 2px 5px 10px rgba(50,58,70,.15);
    color: #fff;
    font-size: 13px;
    font-weight: 600
}

.ribbon-box .ribbon:before {
    content: " ";
    border-style: solid;
    border-width: 10px;
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0;
    margin-bottom: -10px;
    z-index: -1
}

.ribbon-box .ribbon.float-start {
    margin-left: -30px;
    border-radius: 0 3px 3px 0
}

.ribbon-box .ribbon.float-end {
    margin-right: -30px;
    border-radius: 3px 0 0 3px
}

.ribbon-box .ribbon.float-end:before {
    right: 0
}

.ribbon-box .ribbon.float-center span {
    margin: 0 auto 20px auto
}

.ribbon-box .ribbon-content {
    clear: both
}

.ribbon-box .ribbon-primary {
    background: #6658dd
}

.ribbon-box .ribbon-primary:before {
    border-color: #5343d9 transparent transparent
}

.ribbon-box .ribbon-secondary {
    background: #6c757d
}

.ribbon-box .ribbon-secondary:before {
    border-color: #60686f transparent transparent
}

.ribbon-box .ribbon-success {
    background: #1abc9c
}

.ribbon-box .ribbon-success:before {
    border-color: #17a689 transparent transparent
}

.ribbon-box .ribbon-info {
    background: #43bfe5
}

.ribbon-box .ribbon-info:before {
    border-color: #2db7e2 transparent transparent
}

.ribbon-box .ribbon-warning {
    background: #f7b84b
}

.ribbon-box .ribbon-warning:before {
    border-color: #f6ae33 transparent transparent
}

.ribbon-box .ribbon-danger {
    background: #f1556c
}

.ribbon-box .ribbon-danger:before {
    border-color: #ef3d58 transparent transparent
}

.ribbon-box .ribbon-light {
    background: #f3f7f9
}

.ribbon-box .ribbon-light:before {
    border-color: #e2ecf1 transparent transparent
}

.ribbon-box .ribbon-dark {
    background: #323a46
}

.ribbon-box .ribbon-dark:before {
    border-color: #272e37 transparent transparent
}

.ribbon-box .ribbon-pink {
    background: #f672a7
}

.ribbon-box .ribbon-pink:before {
    border-color: #f45a98 transparent transparent
}

.ribbon-box .ribbon-blue {
    background: #4a81d4
}

.ribbon-box .ribbon-blue:before {
    border-color: #3573cf transparent transparent
}

.ribbon-box .ribbon-two {
    position: absolute;
    left: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right
}

.ribbon-box .ribbon-two span {
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 20px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 100px;
    display: block;
    -webkit-box-shadow: 0 0 8px 0 rgba(50,58,70,.08),0 1px 0 0 rgba(50,58,70,.03);
    box-shadow: 0 0 8px 0 rgba(50,58,70,.08),0 1px 0 0 rgba(50,58,70,.03);
    position: absolute;
    top: 19px;
    left: -21px;
    font-weight: 600
}

.ribbon-box .ribbon-two span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    z-index: -1;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent
}

.ribbon-box .ribbon-two span:after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent
}

.ribbon-box .ribbon-two-primary span {
    background: #6658dd
}

.ribbon-box .ribbon-two-primary span:before {
    border-left: 3px solid #5343d9;
    border-top: 3px solid #5343d9
}

.ribbon-box .ribbon-two-primary span:after {
    border-right: 3px solid #5343d9;
    border-top: 3px solid #5343d9
}

.ribbon-box .ribbon-two-secondary span {
    background: #6c757d
}

.ribbon-box .ribbon-two-secondary span:before {
    border-left: 3px solid #60686f;
    border-top: 3px solid #60686f
}

.ribbon-box .ribbon-two-secondary span:after {
    border-right: 3px solid #60686f;
    border-top: 3px solid #60686f
}

.ribbon-box .ribbon-two-success span {
    background: #1abc9c
}

.ribbon-box .ribbon-two-success span:before {
    border-left: 3px solid #17a689;
    border-top: 3px solid #17a689
}

.ribbon-box .ribbon-two-success span:after {
    border-right: 3px solid #17a689;
    border-top: 3px solid #17a689
}

.ribbon-box .ribbon-two-info span {
    background: #43bfe5
}

.ribbon-box .ribbon-two-info span:before {
    border-left: 3px solid #2db7e2;
    border-top: 3px solid #2db7e2
}

.ribbon-box .ribbon-two-info span:after {
    border-right: 3px solid #2db7e2;
    border-top: 3px solid #2db7e2
}

.ribbon-box .ribbon-two-warning span {
    background: #f7b84b
}

.ribbon-box .ribbon-two-warning span:before {
    border-left: 3px solid #f6ae33;
    border-top: 3px solid #f6ae33
}

.ribbon-box .ribbon-two-warning span:after {
    border-right: 3px solid #f6ae33;
    border-top: 3px solid #f6ae33
}

.ribbon-box .ribbon-two-danger span {
    background: #f1556c
}

.ribbon-box .ribbon-two-danger span:before {
    border-left: 3px solid #ef3d58;
    border-top: 3px solid #ef3d58
}

.ribbon-box .ribbon-two-danger span:after {
    border-right: 3px solid #ef3d58;
    border-top: 3px solid #ef3d58
}

.ribbon-box .ribbon-two-light span {
    background: #f3f7f9
}

.ribbon-box .ribbon-two-light span:before {
    border-left: 3px solid #e2ecf1;
    border-top: 3px solid #e2ecf1
}

.ribbon-box .ribbon-two-light span:after {
    border-right: 3px solid #e2ecf1;
    border-top: 3px solid #e2ecf1
}

.ribbon-box .ribbon-two-dark span {
    background: #323a46
}

.ribbon-box .ribbon-two-dark span:before {
    border-left: 3px solid #272e37;
    border-top: 3px solid #272e37
}

.ribbon-box .ribbon-two-dark span:after {
    border-right: 3px solid #272e37;
    border-top: 3px solid #272e37
}

.ribbon-box .ribbon-two-pink span {
    background: #f672a7
}

.ribbon-box .ribbon-two-pink span:before {
    border-left: 3px solid #f45a98;
    border-top: 3px solid #f45a98
}

.ribbon-box .ribbon-two-pink span:after {
    border-right: 3px solid #f45a98;
    border-top: 3px solid #f45a98
}

.ribbon-box .ribbon-two-blue span {
    background: #4a81d4
}

.ribbon-box .ribbon-two-blue span:before {
    border-left: 3px solid #3573cf;
    border-top: 3px solid #3573cf
}

.ribbon-box .ribbon-two-blue span:after {
    border-right: 3px solid #3573cf;
    border-top: 3px solid #3573cf
}



.btn-arrow-right,
.btn-arrow-left {
  position: relative;
  padding-left: 18px;
  padding-right: 18px;
  border-radius: 0 !important;
  margin-right: 4px;
  
  &[disabled] {
    opacity: 1.00;
  }

  &:before, &:after{
    content:"";
    position: absolute;
    top: 4px; /* move it down because of rounded corners */
    height: 24px; /* button_inner_height / sqrt(2) */
    width: 24px; /* same as height */
    background: inherit; /* use parent background */
    border: inherit; /* use parent border */
    border-left-color: transparent; /* hide left border */
    border-bottom-color: transparent; /* hide bottom border */
    border-radius: 0 !important;
  }

  &:before{
    left: -13px;
  }

  &:after{
    right: -13px;
  }

  &.btn-arrow-left{
    padding-right: 36px;

    &:before, &:after{
      transform: rotate(225deg); /* rotate right arrow squares 45 deg to point right */
    }
  }

  &.btn-arrow-right{
    padding-left: 36px;

    &:before, &:after{
      transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */
    }
  }
}

.btn-arrow-right:after,
.btn-arrow-left:before { /* bring arrow pointers to front */
  z-index: 3;
}

.btn-arrow-right:before,
.btn-arrow-left:after { /* hide arrow tails background */
  background-color: white;
}


/* Large */
.btn-lg.btn-arrow-right,
.btn-lg.btn-arrow-left,
.btn-group-lg > .btn-arrow-left,
.btn-group-lg > .btn-arrow-right{
  padding-left: 22px;
  padding-right: 22px;
  margin-right: 0px;

  &:before, &:after{
    top: 6px; /* move it down because of rounded corners */
    height: 32px; /* button_inner_height / sqrt(2) */
    width: 32px; /* same as height */
  }

  &:before{
    left: -16px;
  }

  &:after{
    right: -16px;
  }

  &.btn-arrow-left{
    padding-right: 44px;
  }

  &.btn-arrow-right{
    padding-left: 44px;
  }
}

/* Small */
.btn-sm.btn-arrow-right,
.btn-sm.btn-arrow-left,
.btn-group-sm > .btn-arrow-left,
.btn-group-sm > .btn-arrow-right{
  padding-left: 14px;
  padding-right: 14px;
  margin-right:-1px;

  &:before, &:after{
    top: 4px; /* move it down because of rounded corners */
    height: 20px; /* button_inner_height / sqrt(2) */
    width: 20px; /* same as height */
  }

  &:before{
    left: -10px;
  }

  &:after{
    right: -10px;
  }

  &.btn-arrow-left{
    padding-right: 28px;
  }

  &.btn-arrow-right{
    padding-left: 28px;
  }
}

/* Extra Small */
.btn-xs.btn-arrow-right,
.btn-xs.btn-arrow-left,
.btn-group-xs > .btn-arrow-left,
.btn-group-xs > .btn-arrow-right{
  padding-left: 10px;
  padding-right: 10px;
  margin-right: -1px;

  &:before, &:after{
    top: 3px; /* move it down because of rounded corners */
    height: 14px; /* button_inner_height / sqrt(2) */
    width: 14px; /* same as height */
  }

  &:before{
    left: -7px;
  }

  &:after{
    right: -7px;
  }

  &.btn-arrow-left{
    padding-right: 20px;
  }

  &.btn-arrow-right{
    padding-left: 20px;
  }
}

/* Button Groups */
.btn-group > .btn-arrow-left, 
.btn-group > .btn-arrow-right{
  &:hover, &:focus{
    z-index: initial;
  }
}

.btn-group > .btn-arrow-right+.btn-arrow-right,
.btn-group > .btn-arrow-left+.btn-arrow-left{
  margin-left: 0px;
}

.btn-group > .btn:not(.btn-arrow-right):not(.btn-arrow-left){
  z-index: 1;
}


.select2-container--open {
  z-index: 9999999
}

#message-editor {
  white-space: pre-wrap; /* para respetar saltos de línea */
  overflow-y: auto;
  outline: none; /* quitar borde azul por defecto al seleccionar */
}

#message-editor:empty:before {
  content: attr(placeholder);
  color: #999;
}

.mention {
  color: #007bff;
  font-weight: bold;
}

.list-group-item.active {
  background-color: #007bff;
  color: white;
}

.designers-select .select2-results>.select2-results__options {
  max-height: 600px !important;
}

.design-datatable td.col-max-width {
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.design-datatable thead .dt-column-order {
  display: none !important;
}

.design-datatable thead th {
  padding: 10px !important;
}

.design-datatable tbody td {
  padding: 10px !important;
  padding-bottom: 5px !important;
}

.design-datatable tbody td div.dropdown {
  margin-top: 0 !important;
}

.date-fecha-fin-diseno {
  padding: 0;
  margin: 0;
  width: fit-content;
  max-width: 95px;
  display: inline-block;
  font-size: 13px;
}

.cursor-pointer {
  cursor: pointer;
}

.no-complete-tasks-tooltip {
  background-color: red;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  bottom: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.no-complete-tasks-tooltip i {
  font-size: 30px;
  margin: 0;
  padding: 0;
  color: white;
}

.badge-status-pedidos {
  position: absolute;
  left: 5px;
  bottom: 5px;
  cursor: pointer;
}

.active-pipeline-breadcrumb {
  background-color: black;
  color: white;
  border-radius: 5px;
  padding: 0 14px;
  margin-left: 14px;
}

.active-pipeline-breadcrumb.first {
  margin-left: 0px;
}

.active-pipeline-breadcrumb::before {
  color: white !important;
}

.tareas-pendientes-fase-container {
  box-shadow: 3px 3px 6px -1px lightgray;
  border-radius: 5px;
  background-color: #f9f6f6;
  margin-top: 70px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.tareas-pendientes-fase-title {
  display: block;
  position: absolute;
  top: -68px;
  left: 19px;
  background-color: #f15776;
  padding: 13px 50px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0px -2px 3px 1px lightgray;
  color: white;
}

.pipeline-task-row {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  margin-top: 5px;
  background-color: white;
}

.pipeline-task-row label {
  margin-left: 10px;
  font-weight: 400;
}

.pipeline-tasks-roles {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.pipeline-tasks-roles span {
  padding: 7px;
  width: 100px;
}

.pipeline-task-check, .pipeline-task-completed-check {
  border-radius: 50% !important;
  cursor: pointer;
}

.pipeline-task-check:checked {
  background-color: orange !important;
  border-color: orange !important;
  cursor: pointer;
}

.pipeline-task-completed-check:checked {
  background-color: green !important;
  border-color: green !important;
}

.tasks-header-info-text {
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-weight: 400;
}

.task-list-items h5 {
  font-size: 11px !important;
}

.task-list-items .card-body {
  padding: 1rem !important;
}

.task-list-items .card {
  min-height: 160px;
}

.task-list-items .task-item-header span {
  font-size: 9px;
  font-weight: 900;
  color: lightgray;
}

.task-list-items .task-item-header span.data {
  color: black;
}

.task-list-items .task-item-header .col {
  text-align: center;
}

.task-list-items .priority {
  position: absolute;
  bottom: 7px;
  right: 7px;
}

.task-list-items .avatar-date-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.task-list-items .avatar-date-group .order-period-end-date {
  width: 35%;
}

.inspiration-img {
  width: 90%;
  height: auto;
  object-fit: cover;
}

.inspiration-img-container.selected {
  border: 2px solid gray;
}

/* Botones deshabilitados de prendas - sin efectos hover */
.btn-prendas-disabled[disabled],
.btn-prendas-disabled[disabled]:hover,
.btn-prendas-disabled[disabled]:focus,
.btn-prendas-disabled[disabled]:active {
    pointer-events: none !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
}
.btn-prendas-disabled.btn-outline-primary[disabled],
.btn-prendas-disabled.btn-outline-primary[disabled]:hover,
.btn-prendas-disabled.btn-outline-primary[disabled]:focus,
.btn-prendas-disabled.btn-outline-primary[disabled]:active {
    border-color: var(--ct-primary) !important;
    color: var(--ct-primary) !important;
}
.btn-prendas-disabled.btn-outline-secondary[disabled],
.btn-prendas-disabled.btn-outline-secondary[disabled]:hover,
.btn-prendas-disabled.btn-outline-secondary[disabled]:focus,
.btn-prendas-disabled.btn-outline-secondary[disabled]:active {
    border-color: var(--ct-secondary) !important;
    color: var(--ct-secondary) !important;
}