.priceSelected {
  background-color: #cd0e0e !important;
  color: white !important;
}

#loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}


@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.pointer {
  cursor: pointer;
}


.estilo-mensaje {
  font-size: 12px !important;
  font-family: "Open Sans" !important;
}


table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
  background-color: #cd0e0e !important;
}

.form-check-input:checked[type="checkbox"] {
  background-color: #cd0e0e !important;
  /* Example color override */
  border-color: #cd0e0e !important;
  background-image: unset !important;
}

.shadowBox {
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.08),
    0 1px 3px rgba(15, 23, 42, 0.08),
    0 10px 24px rgba(15, 23, 42, 0.10),
    0 -1px 3px rgba(15, 23, 42, 0.04) !important;
}

svg {
  display: inline-block;
  position: absolute;
  top: 1rem;
  left: 0;
}

.wavecontainer {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
}

.wave {
  stroke: none;
  fill: #cd0e0e;
}

.navbar {
  box-shadow: none;
}

.main-logo {
  max-width: 4rem;
  border: none;
}

.datepicker {
  border-left: 1px solid #d2d6da !important;
  border-right: 1px solid #d2d6da !important;
  padding: 0.25rem 0.75rem !important;
}

.selectize-input {
  width: 100% !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.4rem !important;
  color: #495057 !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid #d2d6da !important;
  appearance: none !important;
  border-radius: 0.5rem !important;
}

.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.navbar>.container,
.navbar>.container-fluid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
  color: white;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
  color: white;

}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

@media (max-width: 575.98px) {

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-sm .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-sm .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767.98px) {

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-md .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-md .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

@media (max-width: 991.98px) {

  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1199.98px) {

  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
  
}

@media (min-width: 1200px) {
  .navbar-vertical.navbar-expand-xs {
    z-index: 1000!important;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3)!important;
  }

  .navbar-expand-xl {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-xl .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-xl .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

.navbar-expand {
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.navbar-expand>.container,
.navbar-expand>.container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.navbar-expand .navbar-nav {
  -ms-flex-direction: row;
  flex-direction: row;
}

.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.navbar-expand>.container,
.navbar-expand>.container-fluid {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.navbar-expand .navbar-collapse {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}

.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

#empresa.active {
  color: white
}

#particular.active {
  color: white
}

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}

/* volver a poner cuando pasemos a v2
.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: #fff;
}
*/
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

/* volver a poner cuando pasemos a v2
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}
*/
.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}


/* volver a poner cuando pasemos a v2
.navbar-dark .navbar-text a {
  color: #fff;
}

.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
  color: #fff;
}

.dropdown-toggle{
  color: #fff;
}
*/
.card {
  background: #FFFFFF;
  box-shadow: 0px 1px 15px -1px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 0px !important;
}

.card-header {
  border-bottom: 1px solid #BDBDBD !important;
  margin-bottom: 2rem;
  color: black;
  font-weight: bold;
  padding: 1rem !important;
}

.no-padding {
  padding: 0px !important;
}

.no-paddingBottom {
  padding-bottom: 0px !important;
}

.no-margin {
  margin: 0px !important;
}

.export {
  display: initial;
}

.input-group>.custom-select:not(:first-child),
.input-group>.form-control:not(:first-child) {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important
}

/**css for messages*/



.chat-online {
  color: #34ce57
}

.chat-offline {
  color: #e4606d
}

.chat-messages {
  display: flex;
  flex-direction: column;
  max-height: 800px;
  overflow-y: scroll
}

.chat-message-left,
.chat-message-right {
  display: flex;
  flex-shrink: 0
}

.chat-message-left {
  margin-right: auto
}

.chat-message-right {
  flex-direction: row-reverse;
  margin-left: auto
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}


/* end css for messages*/

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: transparent !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.dropdown-menu {
  background-color: white !important;
}

.statusCount_box {
  padding: 0px !important;
}

.statusCount_row {
  padding: 0px !important;
}

.statusCount_colLeft {
  padding: 0.5rem 3rem !important;
}

.statusCount_colRight {
  box-shadow: 0px 1px 15px -1px rgba(0, 0, 0, 0.25);
  border-radius: 8px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  padding: 0px !important;
}

.text-black {
  color: black !important;
}

.table {
  color: black !important;
  width: 100% !important;
}

.exportBtn {
  background-color: white !important;
  border: solid 0.5px #cd0e0e !important;
  border-radius: 5px #cd0e0e !important;
  color: #cd0e0e !important;
}

.exportBtn:hover {
  background-color: white !important;
  border: solid 0.5px #cd0e0e !important;
  border-radius: 5px #cd0e0e !important;
  color: #cd0e0e !important;
}

.dataTables_info {
  margin-bottom: 0.5rem;
}

.btn-border {
  border: solid 1px #cd0e0e !important;
  border-radius: 8px;
}

.store-selected {
  border: solid 1px #cd0e0e !important;
  border-radius: 8px;
}

.daterangepicker {
  z-index: 10000 !important;
}

.navbar-height {
  min-height: 5rem !important;
}

label {
  font-size: 15px !important;
}

.selectize {
  box-shadow: none !important;
}

.border-bottom-black {
  border-bottom: black !important;
}

.alert {
  z-index: 199 !important;
}

.col-price {
  padding-right: calc(var(--bs-gutter-x) * 0.2) !important;
  padding-left: calc(var(--bs-gutter-x) * 0.2) !important;
}

.table-comparison td,
.table-comparison th {
  white-space: inherit !important;
}

.clickable-row {
  cursor: pointer;
}


/*del selector con imagen*/
.ms-dd-option-image {
  width: 4rem;
  height: 4rem;
  margin-right: 2rem;
}

.ms-dd {
  border-radius: 1rem;
  background-color: white;
  border: 1px solid #d2d6da
}

.ms-dd.ms-pr {
  width: -webkit-fill-available !important;
  background-color: white;
  border: transparent;
}

.ms-dd .ms-dd-header {
  border: 1px solid #d2d6da;
  border-radius: 1rem;
  background-color: white;
}

.ms-dd .ms-list-option,
.ms-dd .ms-optgroup ul .ms-list-option {
  border: transparent;
}

.ms-dd .ms-list-option.option-selected,
.ms-dd .ms-optgroup ul .ms-list-option.option-selected {
  background-color: transparent;
  border: none;
}

ms-header-middle-content {
  margin-right: 1rem;
}


.ms-dd-desc {
  color: black !important;
}

/** selector imagen chico **/

.small .ms-dd-option-image {
  width: 1rem;
  height: 1rem;
  margin-right: 2rem;
}

.small .ms-dd {
  border-radius: 1rem;
  background-color: white;
  border: 1px solid #d2d6da;
}

.small .ms-dd.ms-pr {
  width: -webkit-fill-available !important;
  background-color: white;
  border: transparent;
}

.small .ms-dd .ms-dd-header {
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  background-color: white;
}

.small .ms-dd .ms-list-option,
.small .ms-dd .ms-optgroup ul .ms-list-option {
  border: transparent;
}

.small .ms-dd .ms-list-option.option-selected,
.small .ms-dd .ms-optgroup ul .ms-list-option.option-selected {
  background-color: transparent;
  border: none;
}

.small ms-header-middle-content {
  margin-right: 1rem;
}

.small .ms-dd-desc {
  color: black !important;
}


/** fin selector imagen **/
div.dataTables_processing>div:last-child>div {
  background: #cd0e0e !important;
}


[id^="dataTable"][id$="_processing"] {
  position: absolute;
  top: 0;
}

.grecaptcha-badge {
  visibility: hidden;
}

.form-switch .form-check-input:checked {
  border-color: #cd0e0e !important;
  background-color: #cd0e0e !important;
  background-position: 100% !important;
  position: relative !important;
}





@media (max-width: 300px) {
  .mb-mobile {
    text-align: center !important;
    margin-bottom: 1rem;
    /* Define el margen inferior solo en dispositivos móviles */
  }
}

@media (max-width: 767.98px) {
  .text-center-mobile {
    text-align: center;
    /* Define el centrado solo en dispositivos móviles */
  }
}

/* Tamaño predeterminado para los botones */
.btn-md,
.btn-lg-md {
  font-size: 1rem;
  /* Tamaño de fuente para el tamaño medio */
}

/* Tamaño grande de botones en pantallas grandes */
@media (min-width: 992px) {
  .btn-lg-md {
    font-size: 1.25rem;
    /* Tamaño de fuente para el tamaño grande */
  }
}

label,
.form-label {
  color: black !important;
}

label
/** css para datatabla con row seleccionado*/

table.dataTable>tbody>tr.selected>* {
  box-shadow: inset 0 0 0 9999px #cd0e0e !important;
}

/*fin **/

.form-control {
  color: black !important;
}

input[type="radio"] {
  accent-color: var(--bs-primary);
  /* Usar la variable de color primary de Bootstrap */
}

.mediumDelayBorder {
  border: 3px solid #f7bd02;
  /* Borde negro */
}

.longDelayBorder {
  border: 3px solid #cd0e0e;
  /* Borde negro */
}


.number-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 2px solid #cd0e0e;
  /* This adds the circle border */
  background-color: transparent;
  /* No background */
  color: #cd0e0e;
  /* Text color matches the border */
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}

.border-primary {
  border: 1px solid #cd0e0e !important;
}

.content-blurred {
  filter: blur(5px);
  color: gray;
  cursor: not-allowed;
}

.content-visible {
  filter: none;
  color: black;
  cursor: default;
}

.accordion-button::after {
  display: none;
}

.accordion-button .arrow {
  transition: transform 0.3s ease;
}

.accordion-button.collapsed .arrow {
  transform: rotate(0deg);
}

.accordion-button:not(.collapsed) .arrow {
  transform: rotate(90deg);
}

.daterangepicker td.in-range {
  background-color: rgba(205, 14, 14, 0.6) !important;
  /* rojo suavecito */
  color: #fff !important;
}

.daterangepicker td.active,
.ranges li.active,
.daterangepicker td.active:hover {
  background-color: #cd0e0e !important;
  color: #fff !important;
}

.status-card-active {
  box-shadow: 0 0 0 3px #2dceac66;
  border: 1px solid #2dceac;
  transition: all 0.2s ease;
}

.responsive-chart {
  width: 100%;
  aspect-ratio: 1;
  max-height: 400px;
}

@media (min-width: 768px) {
  .responsive-chart {
    aspect-ratio: 2;
    max-height: 500px;
  }
}

.recargarModalOpen .table tbody tr:last-child td {
  border-style: unset !important;
  border-width: 0px !important;
}

.recargarModalOpen .table td,
.recargarModalOpen .table th {
  border-width: 0px !important;
}

.recargarModalOpen .table tbody tr:last-child td {
  border-width: 0px !important;
}

.recargarModalOpen thead,
.recargarModalOpen tbody,
.recargarModalOpen tfoot,
.recargarModalOpen tr,
.recargarModalOpen td,
.recargarModalOpen th {
  border-style: unset !important;
  border-width: 0px !important;
}


#dataTablePayments thead input,
#dataTablePayments thead select {
  width: 100% !important;
  min-width: 100px;
  padding: 0.25rem 0.5rem;
  box-sizing: border-box;
  font-size: 0.875rem;
}

#tdTotal {
  border-style: unset !important;
  border-width: 0px !important;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .5rem;
}

.img-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .5rem;
  border: 1px solid rgba(0, 0, 0, .08);
}

.dropzone {
  border: 2px dashed rgba(0, 0, 0, .15);
  border-radius: .75rem;
  padding: 1rem;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  transition: .12s border-color ease;
}

.dropzone:hover {
  border-color: rgba(0, 0, 0, .3);
}

.dz-icon {
  font-size: 1.25rem;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .5rem;
}

.preview-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .5rem;
  border: 1px solid rgba(0, 0, 0, .08);
}

/* definición alineada bonita en desktop, fluida en mobile */
@media (min-width: 576px) {
  dl.row dt {
    font-weight: 600;
  }
}

/* deja que la col pueda encogerse dentro de la .row (flex item) */
dd[class*="col-"] {
  min-width: 0;
}

/* obliga al badge a hacer salto de línea y no salirse */
.wrap-badge {
  display: inline-block;
  max-width: 100%;
  white-space: normal !important;
  /* vence el nowrap del theme */
  word-break: break-word;
  /* corta palabras largas */
  overflow-wrap: anywhere;
  /* fuerza wrap aunque no haya espacios */
}

.table-responsive.no-x-scroll {
  overflow-x: visible !important;
  -webkit-overflow-scrolling: auto !important;
}

/* opcional: por si alguna celda empuja el ancho */
.table-responsive.no-x-scroll table {
  width: 100%;
  table-layout: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
}


.table-responsive {
  -webkit-overflow-scrolling: touch !important;
}

.badge-xs {
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  line-height: 1.1 !important;
}

.tg-dialog {
  border: solid 1px #cd0e0e;
}

#Layer_1 {
  margin-left: 1rem;
}

.tg-dialog-title {
  margin-top: 1rem;

}

.tg-backdrop {
  pointer-events: none !important;
}

.link {
  text-decoration: underline;
  color: violet;
}

.tg-backdrop,
.tg-highlight,
.tg-dialog,
.tourguide-popup,
.tourguide-step {
  z-index: 1200 !important;
  /* por encima de dropdown (1000) y popovers */
}

/* Opcional: si ves alguna otra capa del tour por debajo, la subimos también */
.tourguide-overlay,
.tourguide-tooltip {
  z-index: 1200 !important;
}

.dropdown-menu {
  z-index: 1005;
  /* el tour lo dejamos en 1200, así siempre gana */
}

.tg-dialog .tg-dialog-dots>span.tg-dot.tg-dot-active {
  background: #cd0e0e !important;
}

canvas.confetti-canvas {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
  /* arriba de Bootstrap modal (1055) y backdrop (1050) */
  pointer-events: none !important;
}

/* --- ENHANCED PREMIUM UI --- */
:root {
  --primary: #cd0e0e;
  --primary-soft: rgba(205, 14, 14, 0.1);
  --glass: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card:
    0 0 0 1px rgba(15, 23, 42, 0.08),
    0 1px 3px rgba(15, 23, 42, 0.08),
    0 10px 24px rgba(15, 23, 42, 0.10),
    0 -1px 3px rgba(15, 23, 42, 0.04);
  --shadow-card-hover:
    0 0 0 1px rgba(15, 23, 42, 0.10),
    0 3px 8px rgba(15, 23, 42, 0.10),
    0 18px 36px rgba(15, 23, 42, 0.14),
    0 -2px 6px rgba(15, 23, 42, 0.06);
  --bs-box-shadowBox: var(--shadow-card);
}

.shadowBox {
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shadowBox:hover {
  box-shadow: var(--shadow-card-hover) !important;
}

.mde-glass-card {
  background: var(--glass) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Typography refinement */
h1,
h2,
h3,
.h1,
.h2,
.h3 {
  letter-spacing: -0.02em;
}

/* Status Badges */
.badge-xs {
  font-size: 0.65rem !important;
  padding: 0.35em 0.65em !important;
  border-radius: 6px !important;
}

.bg-primary-soft {
  background-color: var(--primary-soft) !important;
}

/* Utilities */
.mde-line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mde-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mde-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile refinements for small cards */
@media (max-width: 576px) {
  .text-xxs {
    font-size: 0.65rem !important;
  }

  .h5.fw-bold {
    font-size: 0.9rem !important;
  }

  .h6.fw-bold {
    font-size: 0.8rem !important;
  }

  .mde-address-box {
    padding: 6px !important;
  }

  .card-body {
    padding: 10px !important;
  }
}

/* Mobile shortcuts scrollbar hide */
.mde-mobile-shortcuts::-webkit-scrollbar {
  display: none;
}

.mde-mobile-shortcut-item {
  width: 90px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 16px !important;
  background: #ffffff !important;
}

/* Icono circular del header */
.mde-head-icon{
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 38px; /* evita que se estire */
}

.mde-head-icon i{
  line-height: 1;
}


    /* borde dashed bonito */
.border-dashed{ border-style: dashed !important; }

/* Dropzone con input superpuesto */
.dropzone-ghost{
  background-color: #fff;
}
.file-overlay{
  position: absolute;
  inset: 0;
  opacity: 0;           /* invisible pero clickeable/focusable */
  cursor: pointer;
}
.preview-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px,1fr));
  gap: .5rem;
}
.preview-grid img{
  width: 100%; height: 72px; object-fit: cover; border-radius: .5rem;
  border: 1px solid var(--bs-border-color,#e9ecef);
}

.chat-wrap{
  max-height: min(65vh, 720px);
  overflow-y: auto;
  position: relative;
}

/* reemplaza estas reglas de alineación */
.msg-row{ display:grid; grid-template-columns: 80% 20%; margin-bottom:.75rem; }
.msg-row.is-admin{ grid-template-columns: 20% 80%; }

/* coloca la burbuja en la columna correcta */
.msg-bubble{ grid-column: 1; justify-self: start; }
.msg-row.is-admin .msg-bubble{ grid-column: 2; justify-self: end; }

/* la burbuja puede usar hasta el 100% de su columna (o sea, 80% del ancho total) */
.msg-bubble{
  max-width: 100%;            /* antes tenías max-width: min(680px,85%) */
  border-radius: 1rem;
  padding: .75rem 1rem;
  box-shadow: var(--bs-box-shadowBox);
  word-break: break-word;
  background: var(--bs-light);
  color: var(--bs-body-color);
}

/* estilos alternos para admin (si ya los tenías, se mantienen) */
.msg-row.is-admin .msg-bubble{
  background: #fff;
  color: #000;
}

/* (opcional) en móviles, usa 100% de ancho (sin el 20% vacío) */
@media (max-width: 575.98px){
  .msg-row, .msg-row.is-admin{ grid-template-columns: 100%; }
  .msg-bubble, .msg-row.is-admin .msg-bubble{
    grid-column: 1;
    justify-self: stretch;    /* ocupa todo */
  }
}

.msg-text{ font-size: .95rem; }

/* Galería de adjuntos */
.attach-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:.5rem;
  margin-top:.5rem;
}
@media (min-width: 576px){ .attach-grid{ grid-template-columns: repeat(3, 1fr); } }

.attach{
  position:relative;
  overflow:hidden;
  border-radius:.5rem;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  text-decoration:none;
}
.msg-row.is-admin .attach{ border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); }

.attach img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}
@media (min-width: 576px){ .attach img{ height:160px; } }

/* PDF tile */
.attach.pdf{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem;
}
.attach.pdf i{ font-size:1.25rem; }
.attach.pdf span{ font-size:.9rem; color: inherit; }

/* Hint final */
.older-hint{
  text-align:center;
  margin: .75rem 0 0;
}

label.error {
  font-size: .8rem;
  color: #dc3545; /* rojo bootstrap */
  margin-top: .25rem;
}

  .table-compact{ font-size:.85rem; }
  .table-compact th,.table-compact td{ padding:.25rem .4rem; vertical-align:middle; }
  .col-index{ width:1%; white-space:nowrap; }

  .badge.bg-secondary-subtle{ background:rgba(108,117,125,.15); color:#343a40; }

  .mini.stat .stat-label{ font-size:.75rem; color:black); line-height:1; }
  .mini.stat .stat-value{ font-weight:600; }

  /* bordes finos solo en filas de paquetes */
  table tr.parcelRow td, table tr.parcelRow th{ border-color:#e9ecef; }

  /* lista xs compacta */
  .compact-list .list-group-item{ font-size:.9rem; }
  .table-responsive.no-x-scroll{
  overflow-x: visible !important;
  -webkit-overflow-scrolling: auto !important;
}
#parcels-block .table-responsive{
  overflow-x: visible !important;
  -webkit-overflow-scrolling: auto !important;
}
.table-responsive.no-x-scroll{ overflow-x: none !important; } /* o hidden */

.tableBultos.table th,
.tableBultos.table td {
  border-width: 1px !important;
  border-color: #e9ecef !important;
}

label:has(input[type="radio"]:checked) {
  border-color: var(--bs-primary) !important;
}

  .flag-item{display:flex;align-items:flex-start;gap:.5rem;padding:.55rem .7rem;border:1px solid rgba(0,0,0,.08);border-radius:.75rem;background:#fff}
  .flag-item:hover{border-color:rgba(0,0,0,.18);box-shadow:0 0 0 .12rem rgba(13,110,253,.06)}
  .flag-check{margin-top:.15rem;width:1rem;height:1rem}
  .flag-title{font-weight:600;font-size:.9rem;line-height:1.2}
  .flag-desc{font-size:.78rem;opacity:.8;margin-top:.15rem}
  .badge-mini{font-size:.65rem;border-radius:.5rem;padding:.12rem .4rem}
  .flag-col{display:flex;flex-direction:column;gap:.5rem}

 /* Checkbox siempre visible */
  .flag-check {
    width: 1rem;
    height: 1rem;
    margin-top: .15rem;
    border: 2px solid rgba(0,0,0,.35) !important; /* borde visible sin check */
    border-radius: .25rem;
    background-color: #fff;
    box-shadow: none !important;
    accent-color: #cd0e0e; /* color Argon al marcar (fallback moderno) */
  }
  /* Hover: un pelín más visible */
  .flag-item:hover .flag-check {
    border-color: rgba(0,0,0,.6) !important;
  }
  /* Enfocado: aro suave Argon */
  .flag-check:focus {
    outline: 0;
    box-shadow: 0 0 0 .15rem rgba(94,114,228,.25) !important; /* #5e72e4 */
  }
  /* Marcado: bordes y fondo del primario Argon */
  .flag-check:checked {
    background-color: #cd0e0e !important;
    border-color: #cd0e0e !important;
  }

  /* Ajuste de los adjuntos en el chat */
.attach-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.attach img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
}

.attach.pdf {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #dc3545;
    border-radius: 8px;
    color: #dc3545;
    font-size: 1.2rem;
}

/* Efecto focus en el contenedor blanco */
.message-input-container:focus-within {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1) !important;
}

.message-input-container {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Alineación de la barra de herramientas inferior del input */
.input-toolbar {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f1f1;
}