@charset "UTF-8";
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #070707; /* Color for headings, subheadings and title throughout the website */
  --footer-color: #070707; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #252223; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --button-color: #0665c3; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --default-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.main-content {
  min-height: calc(100vh - 180px);
}

/* .best-sellers .product-name {
   min-height: 5.5rem; 
} */

/* #sitename {
  color: var(--accent-color);
  font-weight:700"
} */

.best-sellers .product-name {
  cursor: pointer;
  font-size: 0.8rem;
}

.product-image,
.product-category {
  cursor: pointer;
}

.product-description {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  color: color-mix(in srgb, var(--contrast-color), transparent 30%);
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 92%;
  }
}

.main-header {
  background-color: #232f3e;
  color: var(--contrast-color);
}

.cart .cart-items .cart-item {
  padding: 0.5rem 0;
}

.cart .cart-items {
  background-color: var(--surface-color);
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  padding: 1.5rem;
  /* margin-top: 1rem;
  margin-bottom: 1rem; */
}

.product-item {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;

  align-items: center;
  gap: 0.25rem;
  transition: color 0.3s ease;
  border: 1px solid #e9e9e9;
}

.data-table-align {
  min-height: 800px;
  vertical-align: top;
}

.hero {
  align-items: unset;
  padding: 0;
  background: none;
  min-height: 0 !important;
}

.best-sellers .product-category {
  color: color-mix(in srgb, var(--accent-color), transparent 20%);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.best-sellers .buy-btn {
  padding: 6px 24px;
  background-color: var(--button-color);
  color: var(--contrast-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: 10px;
}

.best-sellers .product-image {
  border-bottom: 1px solid #f5f3f3;
}

.product-name {
  font-family: var(--default-font);
}

h3 {
  font-family: var(--default-font);
}

#header-card-body {
  z-index: 1;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

#header-card {
  margin-left: 12px;
}

.stock-indicator {
  background-color: none;
}

.order-list-select {
  --bs-form-select-bg-img: url(data:image/svg + xml, %3csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 16 16"%3e%3cpathfill="none"stroke="%23343a40"stroke-linecap="round"stroke-linejoin="round"stroke-width="2"d="m2 5 6 6 6-6"/%3e%3c/svg%3e);
  display: block;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#ordenar {
  margin: auto auto;
}

#logo {
  width: 30px;
  height: 30px;
  padding-left: 0px;
}

.btn-tienda {
  color: var(--surface-color);
  border: none;
}

#ordenar {
  width: 200px;
}

#ordenar select {
  font-size: 0.8rem;
}

#ordenar select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 85%);
}

.best-sellers {
  padding-top: 0px;
  padding-bottom: 0px;
}

@media (min-width: 998px) {
  #bar-crear-tienda {
    text-align: right;
  }

  #footer-tienda .row {
    padding-top: 12px;
  }

  #footer-tienda .legal-links {
    padding-bottom: 14px;
  }
}

.seccion-pagina-padding {
  padding-left: 62px !important ;
  padding-right: 62px !important;
  min-height: 100vh;
}

.eliminar-item {
  color: #dc3545;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  color: color-mix(in srgb, #dc3545, transparent 10%);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.3s ease;
}

.titulo-items > h5 {
  font-size: 1rem !important;
  color: var(--heading-color) !important;
}

@media (max-width: 997px) {
  #bar-crear-tienda {
    text-align: right;
  }

  .mt-md-2 {
    margin-top: 1rem !important;
  }

  .seccion-pagina-padding {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #footer-tienda .row {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #footer-tienda p {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #footer-tienda .legal-links {
    padding-bottom: 12px;
  }

  #footer-tienda .copyright {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 44px;
  }
}

.header .main-header .logo h1 {
  font-size: 20px;
  font-weight: 400;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.active > .page-link,
.page-link.active {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}
.page-link:hover {
  z-index: 2;
  color: var(--bs-pagination-active-color);
  background-color: var(--default-color);
  border-color: var(--default-color);
}

.best-sellers .product-name {
  cursor: pointer;
  font-size: 0.8rem;
}

.product-details .product-details .pricing-section .price-display .regular-price {
  font-size: 1.25rem;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  text-decoration: none;
}

#product-details {
  padding: 20px 0;
}

.product-details .product-details .product-name {
  margin-bottom: 0.5rem;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.actions .btn {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.3s ease;
}

.cart .btn-outline-heading {
  color: var(--heading-color);
  border-color: var(--heading-color);
  background-color: transparent;
  padding: 10px 20px;
}

.hero-button {
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-button {
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 20%) 100%);
  color: var(--contrast-color);
  border: none;
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.hero-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.hero .hero-content .hero-actions {
  margin-bottom: 0px;
}

.price-display {
  color: #252223;
}

.product-details .product-details .product-description {
  margin-bottom: 0.5rem;
}

.product-details .product-details .pricing-section {
  margin-bottom: 0.5rem;
}

.product-details .product-details .product-description p {
  line-height: 1.5;
  font-size: 1rem;
}

.best-sellers .product-info {
  padding: 5px 20px 25px;
  min-height: 368px;
}

.product-details s.product-gallery .thumbnail-grid .thumbnail-wrapper {
  border: 1px solid transparent;
}

.product-details .product-gallery .thumbnail-grid .thumbnail-wrapper.active {
  border-color: var(--light-grey-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.product-card-content {
  display: flex;
  flex-direction: column; /* organiza hijos en columna */
  height: 100%; /* importante para que flex ocupe todo el alto */
}

.product-info {
  display: flex;
  flex-direction: column; /* para que end-section se vaya al fondo */
  flex-grow: 1; /* ocupa todo el espacio disponible */
  min-height: 000px;
}

.end-section {
  margin-top: auto; /* empuja esta sección hacia abajo */
}

#menu-usuario {
  margin-top: -3px !important;
}

.required-input {
  /*background-color: #f5f4f3 !important;*/ /* fondo amarillo claro */
  position: relative; /* Necesario para que ::after se posicione correctamente */
  border: 1px solid #ccc;
  padding: 5px;
}

label:has(+ input[required])::after {
  content: " *";
  color: red;
  font-weight: bold;
  margin-left: 2px;
}

.btn-accent i {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-accent i::before {
  margin-bottom: -4px;
}

.btn-accent:hover i {
  transform: translateX(5px);
}

#mobile-menu-icon {
  margin-top: -5px;
  z-index: 9999;
}

.mobile-nav-toggle.bi-x {
  margin-top: -20px;
}

.swal2-close {
  color: #1b1919 !important;
  margin-top: -40px;
  margin-right: -15px;
}

.swal2-close:hover {
  font-weight: 700;
}

#remover-producto-icono {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.3s ease;
}

#remover-producto-icono:hover {
  color: rgb(247, 76, 76);
}

#card-items-section {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* separa productos sin meter saltos extra */
}

#card-items-pago-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero .hero-container {
  display: grid;
  gap: 80px;
  align-items: center;
  max-width: 1400px;
}

.input-numero {
  text-align: right;
  padding: 0.375rem 0.75rem;
  color: var(--bs-body-color);
}

/* para quietar las flechas a los inputs numericos */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* .no-spinner {
   -moz-appearance: textfield; Firefox
} */

/* En pantallas pequeñas */
@media (max-width: 768px) {
  .checkout-button-pequeno {
    text-align: center; /* centra el contenido de la columna */
  }

  .checkout-button-pequeno button {
    width: auto !important; /* quita el w-100 */
    display: inline-block; /* evita que se estire */
  }

  #mobile-menu-icon {
    margin-top: -50px;
    z-index: 9999;
  }

  .mobile-nav-toggle.bi-x {
    margin-top: -40px;
  }

  .hero .hero-content .hero-actions .btn-primary,
  .hero .hero-content .hero-actions .btn-secondary {
    padding: 14px 12px;
    font-size: 1rem;
  }
}

.input-bloqueado {
  background-color: #f0f0f0;
  pointer-events: none; /* evita que se pueda escribir */
  opacity: 0.7;
}

.form-control {
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 8px;
  /* padding: 12px 16px; */
  font-size: 0.95rem;
  height: auto;
  background-color: var(--surface-color);
  transition: all 0.25s ease;
}

.form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 85%);
  outline: none;
}

.form-select {
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 8px;
  font-size: 0.95rem;
  height: auto;
  background-color: var(--surface-color);
  transition: all 0.25s ease;
}

.form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 85%);
  outline: none;
}

.card {
  border: none;
}

/* estilos selectize */
.selectize-dropdown {
  z-index: 99999 !important; /* forzar a estar siempre arriba */
}
/* Ajustar la altura máxima del dropdown */
.selectize-dropdown {
  max-height: 300px !important; /* en lugar de ~120px por defecto */
  overflow-y: auto !important; /* scroll vertical si hay muchos productos */
  z-index: 9999; /* que quede encima de modales o tablas */
}

/* Ajustar el input */
.selectize-input {
  min-height: 40px; /* más alto y mejor alineado con Bootstrap */
  padding: 8px 12px;
}

/* Ajustar cada item de la lista */
.selectize-dropdown .option {
  padding: 8px 12px;
  font-size: 14px;
}

#btn-regresar {
  position: relative;
  float: right;
  bottom: 35px;
}

/* Item badged */

.item-badge {
  position: relative;
  top: -2px;
  right: -0px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-size: 10px;
  padding: 5px 5px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-block;
  align-items: center;
  justify-content: center;
}

/* Upload */

div.upload {
  margin-top: 15px;
  margin-left: 10px;
  width: 80px;
  height: 40px;
  background: url(/static/tienda/tiendasmall/img/upload.png) no-repeat center;
  overflow: hidden;
  border: 1px solid #e1edf7;
  cursor: pointer;
  display: inline-block;
}

div.upload:hover {
  background: url(/static/tienda/tiendasmall/img/upload_white.png) no-repeat center;
  background-color: var(--accent-color);
}

div.upload input {
  background-color: #fff !important;
  display: block !important;
  width: 100px !important;
  height: 57px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  cursor: pointer;
  display: inline-block;
}

div.upload-small {
  margin-top: 0px;
  margin-left: 0px;
  width: 42px;
  height: 40px;
  background: url(/static/tienda/tiendasmall/img/upload_small.png) no-repeat center;
  overflow: hidden;
  border: 1px solid #e1edf7;
  cursor: pointer;
  display: inline-block;
}

div.upload-small:hover {
  background: url(/static/tienda/tiendasmall/img/upload_small_white.png) no-repeat center;
  background-color: var(--accent-color);
}

div.upload-small input {
  display: block !important;
  width: 42px !important;
  height: 40px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  cursor: pointer;
}

/* Fin upload*/

.error-input {
  color: red;
  font-size: 0.9rem;
  position: relative;
  float: right;
}

.form-check .form-check-input {
  float: none;
}