/* Personalizar botón primario */
.btn-custom-primary {
    color: white;
    background-color: #00554e;
    border-color: #00554e;
    /* box-shadow: 0 0.5rem 1rem rgba(0, 85, 78, 0.15); */
}

.btn-custom-primary:hover {
    color: white;
    background-color: #003e38;
}

.btn-custom-primary:focus {
    color: white;
    box-shadow: 0 0 0 0;
}

.bg-custom-primary {
    background-color: #00554e;
    border-color: #00554e;
}

.btn-custom-secondary {
  color: white;
  background-color: #ff6a00;
  border-color: #ff6a00;
}

.btn-custom-secondary:hover {
  color: white;
  background-color: #cc5500;
}

.btn-custom-secondary:focus {
  color: white;
  box-shadow: 0 0 0 0;
}

.btn-custom-jobs {
  color: black;
  background-color: lightgray;
  border-color: lightgray;
}

.btn-ordercolor {
    width: 30px;
    height: 30px;
    border: 1px solid;
    display: block;
  }
  
  /* Estilos del boton para cambiar el color de las ordenes */
  li > button.btn-ordercolor {
    margin: 7px;
  }
  
  .btn-ordercolor-green {
    background-color: #d4edda;
  }
  
  .btn-ordercolor-red {
    background-color: #f8d7da;
  }
  
  .btn-ordercolor-yellow {
    background-color: #fff3cd;
  }
  
  .btn-ordercolor-primary {
    background-color: #cce5ff;
  }
  
  .btn-ordercolor-null {
    background-color: #FFFFFF;
  }

/* estilos semaforo sincro de ordenes  */

.pub-badge-green {
    background-color: #49A078;
    color: #49A078;
}
  
.pub-badge-yellow {
    background-color: #F5D547;
    color: #F5D547;
}
  
.pub-badge-red {
    background-color: #E94F37;
    color: #E94F37;
}

/* Saco sombra al clickear en un form-control, form-select y form-check-input */

.form-control,.form-select, .form-check-input {
    box-shadow: 0 0 0 0 !important;
}

.form-check-input:checked {
  background-color: #00554e;
  border-color: #00554e;
}

.offcanvas-step {
  display: none;
}
.offcanvas-step.active {
  display: block;
}

/* Customizo el ancho de los offcanvas en la vista de ordenes */
.offcanvas-custom-width {
  width: 500px !important;
}
.offcanvas-custom-width#newShippingOffcanvas {
  width: 700px !important;
}

/* Estilos para el parpadeo */
@keyframes flicker-input-error {
  0% { border-color: red; }
  50% { border-color: transparent; }
  100% { border-color: red; }
}

.flicker-input-error {
  animation: flicker-input-error 1s ease;
}

/* Estilo para que cada item impar tenga un color diferente al par */
.list-group li:nth-of-type(odd) {
  background-color: RGBA(var(--bs-light-rgb),var(--bs-bg-opacity,1));
}
 

.custom-select {
    background-color: rgb(245, 245, 245) !important; /* Cambia el color de fondo */
    max-width: 200px !important;
}

.right-input-search-rounded {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

input::placeholder {
    color: rgb(170, 170, 170) !important; /* Color del texto del placeholder */
    opacity: 1; /* Asegura que el color tenga el nivel de opacidad deseado */
}

.custom-btn {
    background-color: #f8f9fa; /* Fondo gris clarito */
    border: 1px solid rgb(170, 170, 170); /* Borde gris */
    font-weight: bold !important; /* Tipografía fuerte */
}

.custom-btn:hover {
    background-color: #f8f9fa; /* Fondo un poco más oscuro al pasar el cursor */
    border-color: rgb(170, 170, 170); /* Borde más oscuro al pasar el cursor */
}


h3.pageTitle {
    font-size: 12px;
    margin: 0px !important;
    padding: 8px 10px;
    color: white;
    width: auto;
    line-height: 5px !important;
    border-radius: 100px;
    text-align: center;
    position: absolute;
    z-index: -1000;
    background-color: #2c2460 !important;
}

.img-oms{width:25px!important;}

.img-oms-detail{width:25px!important;margin-left: 0.3em;}

.tr-data{vertical-align:middle!important;font-size:11px!important;}

.green-badge {
  border: 1px solid rgb(125, 200, 125); /* Borde verde */
  background-color: rgb(185, 255, 185); /* Fondo verde claro */
  color: black; /* Texto negro */
}

.grey-badge {
  border: 1px solid rgb(180, 180, 180); /* Borde verde */
  background-color: rgb(240, 240, 240); /* Fondo verde claro */
  color: black; /* Texto negro */
}

.yellow-badge {
  border: 1px solid rgb(255, 204, 0); /* Borde amarillo */
  background-color: rgb(255, 255, 185); /* Fondo amarillo claro */
  color: black; /* Texto negro */
}

.red-badge {
  border: 1px solid rgb(255, 99, 71); /* Borde rojo */
  background-color: rgb(255, 200, 200); /* Fondo rojo claro */
  color: black; /* Texto negro */
}

.page-link {
  color: black;
}

#goldenRulesTable thead th:first-child {
  border-top-left-radius: 5px;
}

#goldenRulesTable thead th:last-child {
  border-top-right-radius: 5px;
}

#goldenRulesTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}

#goldenRulesTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

.dropdown-toggle::after {
  display: none;
}

.comment-balloon {
  max-width: 100%;
  background-color: #edf0f4;
  margin-bottom: 10px;
  border-radius: 7px;
}

.comment-balloon > .comment-balloon-info, 
.comment-balloon > .comment-balloon-message, 
.comment-balloon > .comment-balloon-bottom {
  padding: 0 5px;
}

.comment-balloon > .comment-balloon-info {
  padding-top: 5px;
}

.comment-balloon > .comment-balloon-bottom {
  padding-bottom: 5px;
}

.comment-balloon-bottom {
  text-align: right;
}

.comment-balloon-bottom > a {
  font-size: .8rem;
}

.withoutCommentsBox{
  color: #6a6a6a;
  background-color: #fafafa;
  border-color: #666;
  text-align: center;
  padding: 15px;
  margin-bottom: 20px;
}

.loadingCommentsBox{
  color: #6a6a6a;
  background-color: #fafafa;
  border-color: #666;
  text-align: center;
  padding: 15px;
  margin-bottom: 20px;
}

.range-input {
  margin-top: 10px;
}

.list-group-item input[type="checkbox"] {
  margin-right: 1rem;
  accent-color: #003e38;
}

.custom-row {
  background-color: inherit !important; /* Asegura que uses el valor inline */
}

.custom-row td {
  background-color: inherit !important; /* Asegura que también se aplique a las celdas */
}

.card {
  transition: border-color 0.3s ease;
}

.card-active {
  border: 2px solid var(--active-color) !important;
}

.sync-btn {
  font-size: 0.8rem !important;
  text-align: center;
  padding: 0.25rem 0.5rem !important;
  vertical-align: middle !important;
}

tr:has(td > .collapse:not(.show)) {
  border-top: hidden !important;
}

/* Muevo las flechas del slick para que sean visibles */
.slick-prev,.slick-prev::before {
  left: -12px !important;
  color: #003e38 !important;
}

.slick-next,.slick-next::before {
  right: -12px !important;
  color: #003e38 !important;
}

#selectAllHref {
  margin-left: 7px;
}

/* Estilos para las burbujas de filtros */
#appliedFilters .badge {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: normal;
}

#appliedFilters .badge .btn-close {
    cursor: pointer;
}

.loading-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,0.7); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 1000;
} 
.loading-overlay i {
    font-size: 2rem; 
    color: #007bff;
}
.bg-custom-primary {
    background-color: #00554e !important;
    color: white !important;
}
.btn-close-filter:hover {
    opacity: 0.7;
}

#goldenRulesTable tbody td {
    vertical-align: middle;
}

.marketplace-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}

.marketplace-card.active {
    border-color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, 0.05);
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.3);
}

.marketplace-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card-selected-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    color: var(--bs-primary, #0d6efd);
    font-size: 1.2rem;
}

.marketplace-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.marketplace-cards-wrapper {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;    /* Espacio superior para el borde/sombra */
    padding-bottom: 8px; /* Espacio entre el contenido y la barra de scroll */
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar personalizada - solo visible cuando hay scroll */
.marketplace-cards-wrapper::-webkit-scrollbar {
    height: 8px;
}

.marketplace-cards-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.marketplace-cards-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.marketplace-cards-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Contenedor flex para las cards */
.marketplace-cards-container {
    display: inline-flex;
    gap: 1rem;
    min-width: min-content;
    padding-left: 0;
    padding-right: 0;
    padding-top: 4px;    /* Pequeño espacio extra arriba */
    padding-bottom: 4px; /* Pequeño espacio extra abajo */
    margin-left: 0;
    margin-right: 0;
}

/* Wrapper de cada card */
.marketplace-card-wrapper {
    flex: 0 0 auto;
}

/* Card con tamaño fijo */
.marketplace-card {
    width: 150px;
    height: 140px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    display: flex;
    flex-direction: column;
}
    

.marketplace-card .card-body {
    padding: 0.75rem;
}

/* Estado activo */
.marketplace-card.active {
    border-color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, 0.05);
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.3);
}

.marketplace-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Contenedor del logo */
.marketplace-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;
    width: 100%;
}

.marketplace-logo {
    width: 55px;
    height: 55px;
    object-fit: contain;
}



/* Indicador de selección */
.card-selected-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--bs-primary, #0d6efd);
    font-size: 1.3rem;
    display: none;
    z-index: 10;
}

.marketplace-card.active .card-selected-indicator {
    display: block;
}

/* Badge container */
.badge-container {
    display: none;
}

/* Responsive: en pantallas pequeñas las cards son un poco más angostas */
@media (max-width: 768px) {
    .marketplace-card {
        width: 140px;
        height: 120px;
    }
    
    .marketplace-logo {
        width: 50px;
        height: 50px;
    }
    
    .marketplace-logo-container {
        height: 50px;
        margin-bottom: 0.5rem;
    }
}

/* Header del accordion: menos alto */
#mainAccordion .accordion-button {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

#mainAccordion .accordion-item {
    border-radius: 0.5rem; /* Ajustá el valor a gusto */
}

/* Body del accordion: achicar padding */
#mainAccordion .accordion-body {
    padding: 0.5rem;
}

/* Tabla dentro del accordion: filas más compactas */
#mainAccordion .table td, 
#mainAccordion .table th {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
}

#mainAccordion .accordion-button.collapsed {
    border-radius: 0.5rem;
}

#check-all-message {
    background-color: #E8F4F8;
    border: 1px solid #B8D4E0;
    border-radius: 4px;
    padding: 12px 20px;
    margin-left: 15px;
    margin-right: 15px;
}

.check-all-message-text {
    color: #2C5F7C;
    font-size: 14px;
}

.check-all-goldens {
    color: #0066CC;
    font-size: 14px;
    text-decoration: none;
    margin-left: 8px;
}

.check-all-goldens:hover {
    text-decoration: underline;
}

.date-detail {
    font-size: 0.75rem;
    color: #6c757d;
}

.marketplace-names {
    text-align: center;
    line-height: 1.2;
}

.marketplace-title {
    font-size: 0.875rem; /* tamaño principal */
    font-weight: 600;
    color: #333;
}

.connection-name {
    font-size: 0.75rem; /* más chico */
    color: #666;
}

.check-all-message-box {
    margin-top: 3px !important;
    margin-bottom: 8px !important;
}

.badge-multiline {
    display: inline-block;
    white-space: normal;     /* permite varias líneas */
    line-height: 1.3;        /* corrige el aplastamiento */
    padding: 4px 8px;        /* mismo estilo del badge */
    border-radius: 4px;      /* igual que label/badge */
}