/*custom*/

    /* ============================================================
   CSS PERSONALIZADO - AQUILOTIENE.COM (PrestaShop 1.7)
   Correcciones: Tarjetas Mi Cuenta unidas, Responsive, Menú vendedor visible
   Guardar en: themes/tu-tema/assets/css/custom.css
   ============================================================ */

/* ============================================================
   1. PÁGINA "MI CUENTA" - TARJETAS DE NAVEGACIÓN (CORREGIDO)
   ============================================================ */

#my-account,
.page-my-account,
body#my-account #wrapper {
  background-color: #f5f7fa !important;
}

/* Contenedor principal de las tarjetas - CENTRADO y COMPACTO */
#my-account .links,
.page-my-account .links,
.account-link-container,
.my-account-links {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  padding: 10px !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Desktop: 3 columnas, gap reducido, más compacto */
@media (min-width: 769px) {
  #my-account .links,
  .page-my-account .links {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 20px 0 !important;
    max-width: 800px !important;
  }
}

/* Tablet: 3 columnas también pero más estrecho */
@media (min-width: 769px) and (max-width: 1200px) {
  #my-account .links,
  .page-my-account .links {
    max-width: 720px !important;
    gap: 14px !important;
  }
}

/* Cada tarjeta individual */
#my-account .links a,
.page-my-account .links a,
.account-link-item,
.link-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 28px 16px !important;
  text-align: center !important;
  text-decoration: none !important;
  border: 2px solid transparent !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-height: 140px !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* Efecto hover / active en tarjetas */
#my-account .links a:hover,
#my-account .links a:active,
.page-my-account .links a:hover,
.page-my-account .links a:active,
.account-link-item:hover,
.link-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
  border-color: #e74c3c !important;
}

/* Sutil indicador de color en la parte superior */
#my-account .links a::before,
.page-my-account .links a::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #e74c3c, #c0392b) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

#my-account .links a:hover::before,
.page-my-account .links a:hover::before {
  opacity: 1 !important;
}

/* Iconos dentro de las tarjetas */
#my-account .links a i,
#my-account .links a span.material-icons,
.page-my-account .links a i,
.page-my-account .links a span.material-icons,
.account-link-item i,
.link-item i {
  font-size: 36px !important;
  color: #e74c3c !important;
  margin-bottom: 12px !important;
  transition: transform 0.3s ease !important;
}

#my-account .links a:hover i,
.page-my-account .links a:hover i {
  transform: scale(1.15) !important;
}

/* Texto de las tarjetas */
#my-account .links a span:not(.material-icons):not(i),
.page-my-account .links a span:not(.material-icons):not(i),
.account-link-item span,
.link-item span {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  line-height: 1.3 !important;
}

/* ============================================================
   2. BOTONES DEL MÓDULO JA MARKETPLACE - RESPONSIVE
   ============================================================ */

.jamarketplace,
.ja-marketplace,
#jamarketplace,
.marketplace-seller,
.seller-profile,
.seller-store,
.seller-dashboard,
#seller-dashboard {
  font-family: inherit;
}

/* Botones del marketplace - TAMAÑO NORMAL en desktop */
.jamarketplace .btn,
.ja-marketplace .btn,
.marketplace-seller .btn,
.seller-profile .btn,
.seller-dashboard .btn,
#seller-dashboard .btn,
.jamarketplace button,
.ja-marketplace button,
.marketplace-seller button,
.seller-profile button,
.seller-dashboard button,
#seller-dashboard button,
a.seller-btn,
a.marketplace-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  min-height: 44px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  width: auto !important;
}

/* Botón primario marketplace */
.jamarketplace .btn-primary,
.ja-marketplace .btn-primary,
.marketplace-seller .btn-primary,
.seller-profile .btn-primary,
.seller-dashboard .btn-primary,
#seller-dashboard .btn-primary,
a.seller-btn.btn-primary {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
  color: #ffffff !important;
}

.jamarketplace .btn-primary:hover,
.ja-marketplace .btn-primary:hover,
.marketplace-seller .btn-primary:hover,
.seller-profile .btn-primary:hover,
.seller-dashboard .btn-primary:hover,
#seller-dashboard .btn-primary:hover,
a.seller-btn.btn-primary:hover {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(231, 76, 60, 0.35) !important;
}

/* Botón secundario marketplace */
.jamarketplace .btn-secondary,
.ja-marketplace .btn-secondary,
.marketplace-seller .btn-secondary,
.seller-profile .btn-secondary,
.seller-dashboard .btn-secondary,
#seller-dashboard .btn-secondary,
a.seller-btn.btn-secondary {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
  color: #ffffff !important;
}

.jamarketplace .btn-secondary:hover,
.ja-marketplace .btn-secondary:hover,
.marketplace-seller .btn-secondary:hover,
.seller-profile .btn-secondary:hover,
.seller-dashboard .btn-secondary:hover,
#seller-dashboard .btn-secondary:hover,
a.seller-btn.btn-secondary:hover {
  background: linear-gradient(135deg, #2980b9 0%, #2471a3 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(52, 152, 219, 0.35) !important;
}

/* Botón outline */
.jamarketplace .btn-outline,
.ja-marketplace .btn-outline,
.marketplace-seller .btn-outline,
.seller-profile .btn-outline,
.seller-dashboard .btn-outline,
#seller-dashboard .btn-outline {
  background: transparent !important;
  border: 2px solid #e74c3c !important;
  color: #c0392b !important;
}

.jamarketplace .btn-outline:hover,
.ja-marketplace .btn-outline:hover,
.marketplace-seller .btn-outline:hover,
.seller-profile .btn-outline:hover,
.seller-dashboard .btn-outline:hover,
#seller-dashboard .btn-outline:hover {
  background: #e74c3c !important;
  color: #ffffff !important;
}

/* Iconos en botones marketplace */
.jamarketplace .btn i,
.ja-marketplace .btn i,
.marketplace-seller .btn i,
.seller-profile .btn i,
.seller-dashboard .btn i,
#seller-dashboard .btn i {
  margin-right: 8px !important;
  font-size: 18px !important;
}

/* Grupo de botones del vendedor - desktop: horizontal */
.seller-actions,
.marketplace-actions,
.jamarketplace .seller-buttons,
.ja-marketplace .seller-buttons,
.seller-dashboard .seller-buttons,
#seller-dashboard .seller-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 16px 0 !important;
}

/* ============================================================
   3. MENÚ DEL VENDEDOR (DASHBOARD / AÑADIR PRODUCTO) - MÁS VISIBLE
   ============================================================ */

/* Contenedor del menú del vendedor */
.seller-dashboard .nav-tabs,
#seller-dashboard .nav-tabs,
.jamarketplace .nav-tabs,
.ja-marketplace .nav-tabs,
.marketplace-seller .nav-tabs,
.seller-profile .nav-tabs,
.seller-menu,
.marketplace-menu,
.seller-dashboard-menu,
#seller-dashboard .seller-menu,
.jamarketplace .seller-menu,
.ja-marketplace .seller-menu {
  border-bottom: 3px solid #e9ecef !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

/* Cada pestaña del menú del vendedor */
.seller-dashboard .nav-tabs .nav-item,
#seller-dashboard .nav-tabs .nav-item,
.jamarketplace .nav-tabs .nav-item,
.ja-marketplace .nav-tabs .nav-item,
.marketplace-seller .nav-tabs .nav-item,
.seller-profile .nav-tabs .nav-item,
.seller-menu .nav-item,
.marketplace-menu .nav-item,
.seller-dashboard .nav-tabs li,
#seller-dashboard .nav-tabs li,
.jamarketplace .nav-tabs li,
.ja-marketplace .nav-tabs li,
.marketplace-seller .nav-tabs li,
.seller-menu li,
.marketplace-menu li {
  margin-bottom: 0 !important;
}

.seller-dashboard .nav-tabs .nav-link,
#seller-dashboard .nav-tabs .nav-link,
.jamarketplace .nav-tabs .nav-link,
.ja-marketplace .nav-tabs .nav-link,
.marketplace-seller .nav-tabs .nav-link,
.seller-profile .nav-tabs .nav-link,
.seller-menu a,
.marketplace-menu a,
.seller-menu .nav-link,
.marketplace-menu .nav-link,
.seller-dashboard .nav-tabs a,
#seller-dashboard .nav-tabs a,
.jamarketplace .nav-tabs a,
.ja-marketplace .nav-tabs a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #7f8c8d !important;
  border: 2px solid transparent !important;
  border-radius: 10px 10px 0 0 !important;
  background: #f8f9fa !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  min-height: 48px !important;
  white-space: nowrap !important;
}

.seller-dashboard .nav-tabs .nav-link i,
#seller-dashboard .nav-tabs .nav-link i,
.jamarketplace .nav-tabs .nav-link i,
.ja-marketplace .nav-tabs .nav-link i,
.seller-menu a i,
.marketplace-menu a i {
  margin-right: 8px !important;
  font-size: 18px !important;
}

/* Pestaña activa */
.seller-dashboard .nav-tabs .nav-link.active,
#seller-dashboard .nav-tabs .nav-link.active,
.jamarketplace .nav-tabs .nav-link.active,
.ja-marketplace .nav-tabs .nav-link.active,
.marketplace-seller .nav-tabs .nav-link.active,
.seller-profile .nav-tabs .nav-link.active,
.seller-menu a.active,
.marketplace-menu a.active,
.seller-menu .active,
.marketplace-menu .active {
  background: #ffffff !important;
  color: #e74c3c !important;
  border-color: #e74c3c #e74c3c transparent #e74c3b !important;
  border-bottom: 3px solid #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 -2px 8px rgba(231, 76, 60, 0.1) !important;
}

/* Hover en pestañas */
.seller-dashboard .nav-tabs .nav-link:hover,
#seller-dashboard .nav-tabs .nav-link:hover,
.jamarketplace .nav-tabs .nav-link:hover,
.ja-marketplace .nav-tabs .nav-link:hover,
.marketplace-seller .nav-tabs .nav-link:hover,
.seller-menu a:hover,
.marketplace-menu a:hover {
  background: #ffffff !important;
  color: #c0392b !important;
  border-color: #e74c3c !important;
}

/* Menú lateral del vendedor (si aplica) */
.seller-sidebar,
.marketplace-sidebar,
.seller-dashboard .sidebar,
#seller-dashboard .sidebar,
.jamarketplace .sidebar,
.ja-marketplace .sidebar {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  padding: 16px !important;
}

.seller-sidebar .nav-link,
.marketplace-sidebar .nav-link,
.seller-dashboard .sidebar a,
#seller-dashboard .sidebar a,
.jamarketplace .sidebar a,
.ja-marketplace .sidebar a {
  display: flex !important;
  align-items: center !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #2c3e50 !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.seller-sidebar .nav-link:hover,
.marketplace-sidebar .nav-link:hover,
.seller-dashboard .sidebar a:hover,
#seller-dashboard .sidebar a:hover {
  background: #fdecea !important;
  color: #e74c3c !important;
}

.seller-sidebar .nav-link.active,
.marketplace-sidebar .nav-link.active,
.seller-dashboard .sidebar a.active,
#seller-dashboard .sidebar a.active {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
}

/* ============================================================
   4. TARJETAS Y PERFILES DE VENDEDORES
   ============================================================ */

.seller-card,
.marketplace-seller-card,
.jamarketplace .seller-item,
.ja-marketplace .seller-item {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  transition: all 0.3s ease !important;
  border: 1px solid #f0f0f0 !important;
}

.seller-card:hover,
.marketplace-seller-card:hover,
.jamarketplace .seller-item:hover,
.ja-marketplace .seller-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12) !important;
}

.seller-avatar,
.marketplace-seller-avatar,
.jamarketplace .seller-image img,
.ja-marketplace .seller-image img {
  border-radius: 50% !important;
  border: 3px solid #f8f9fa !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  transition: transform 0.3s ease !important;
}

.seller-avatar:hover,
.marketplace-seller-avatar:hover {
  transform: scale(1.05) !important;
}

.seller-name,
.marketplace-seller-name,
.jamarketplace .seller-name,
.ja-marketplace .seller-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
  margin: 12px 0 4px 0 !important;
}

.seller-rating,
.marketplace-rating,
.jamarketplace .seller-rating,
.ja-marketplace .seller-rating {
  color: #f39c12 !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}

/* ============================================================
   5. BOTONES GENERALES DE PRESTASHOP 1.7 - RESPONSIVE
   ============================================================ */

/* Desktop: botones normales */
.btn-primary,
#add-to-cart-or-refresh .btn-primary,
.product-add-to-cart .btn-primary {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
  border: none !important;
  color: #fff !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 14px rgba(231, 76, 60, 0.3) !important;
  transition: all 0.3s ease !important;
  min-height: 48px !important;
  width: auto !important;
  display: inline-flex !important;
}

.btn-primary:hover,
#add-to-cart-or-refresh .btn-primary:hover,
.product-add-to-cart .btn-primary:hover {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(231, 76, 60, 0.4) !important;
}

.product-add-to-cart .btn-primary i,
.product-add-to-cart .btn-primary .material-icons {
  margin-right: 10px !important;
  font-size: 20px !important;
}

.btn-secondary,
.btn-default,
.btn-outline-primary {
  border: 2px solid #3498db !important;
  color: #2980b9 !important;
  background: transparent !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  width: auto !important;
  display: inline-flex !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-outline-primary:hover {
  background: #3498db !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(52, 152, 219, 0.3) !important;
}

.cart-detailed-actions .btn-primary,
#checkout .btn-primary,
.checkout-button {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
  box-shadow: 0 4px 14px rgba(243, 156, 18, 0.3) !important;
  font-size: 17px !important;
  padding: 16px 40px !important;
  width: auto !important;
  display: inline-flex !important;
}

.cart-detailed-actions .btn-primary:hover,
#checkout .btn-primary:hover,
.checkout-button:hover {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
  box-shadow: 0 8px 22px rgba(243, 156, 18, 0.4) !important;
}

/* ============================================================
   6. NAVEGACIÓN Y HEADER
   ============================================================ */

#header {
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}

#header .logo img {
  max-height: 50px !important;
}

#header .menu {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

#header .menu .top-menu a {
  font-weight: 600 !important;
  padding: 14px 18px !important;
  color: #2c3e50 !important;
  transition: color 0.3s ease !important;
  position: relative !important;
}

#header .menu .top-menu a:hover {
  color: #e74c3c !important;
}

#header .menu .top-menu a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 18px !important;
  right: 18px !important;
  height: 2px !important;
  background: #e74c3c !important;
  transform: scaleX(0) !important;
  transition: transform 0.3s ease !important;
}

#header .menu .top-menu a:hover::after {
  transform: scaleX(1) !important;
}

#search_widget input[type="text"],
.search-widget input[type="text"] {
  border: 2px solid #e9ecef !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  background: #ffffff !important;
}

#search_widget input[type="text"]:focus,
.search-widget input[type="text"]:focus {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.12) !important;
  outline: none !important;
}

#search_widget button,
.search-widget button {
  background: #e74c3c !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

#search_widget button:hover,
.search-widget button:hover {
  background: #c0392b !important;
}

#header .user-info a,
#header .blockcart a {
  color: #2c3e50 !important;
  transition: color 0.3s ease !important;
}

#header .user-info a:hover,
#header .blockcart a:hover {
  color: #e74c3c !important;
}

.breadcrumb {
  background: #f8f9fa !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  margin-bottom: 24px !important;
  font-size: 14px !important;
}

.breadcrumb-item a {
  color: #3498db !important;
  font-weight: 500 !important;
}

.breadcrumb-item a:hover {
  color: #2980b9 !important;
  text-decoration: underline !important;
}

.breadcrumb-item.active {
  color: #7f8c8d !important;
}

/* ============================================================
   7. FORMULARIOS MÁS AMIGABLES
   ============================================================ */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border: 2px solid #e9ecef !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important;
  background: #ffffff !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.12) !important;
  outline: none !important;
}

.form-group label,
.form-control-label,
label {
  font-weight: 600 !important;
  color: #2c3e50 !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
}

.custom-radio input[type="radio"],
.custom-checkbox input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
}

.help-block,
.form-error {
  color: #e74c3c !important;
  font-size: 13px !important;
  margin-top: 6px !important;
  font-weight: 500 !important;
}

/* ============================================================
   8. PÁGINA DE PRODUCTO
   ============================================================ */

.product-price,
.current-price {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #e74c3c !important;
}

.product-price .discount,
.current-price .discount-percentage {
  background: #27ae60 !important;
  color: #fff !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  margin-left: 10px !important;
}

.product-images .js-qv-product-images img {
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  transition: all 0.3s ease !important;
}

.product-images .js-qv-product-images img:hover {
  border-color: #e74c3c !important;
  transform: scale(1.05) !important;
}

.product-tabs .nav-tabs .nav-link {
  font-weight: 600 !important;
  color: #7f8c8d !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  padding: 14px 24px !important;
}

.product-tabs .nav-tabs .nav-link.active {
  color: #e74c3c !important;
  border-bottom-color: #e74c3c !important;
  background: transparent !important;
}

/* ============================================================
   9. CARRITO Y CHECKOUT
   ============================================================ */

.cart-overview .table {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

.cart-overview .table thead th {
  background: #f8f9fa !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
  padding: 16px !important;
  border: none !important;
}

.cart-overview .table tbody td {
  padding: 16px !important;
  vertical-align: middle !important;
}

.cart-overview .js-cart-line-product-quantity {
  width: 70px !important;
  text-align: center !important;
  border-radius: 8px !important;
  border: 2px solid #e9ecef !important;
  font-weight: 600 !important;
}

.cart-overview .remove-from-cart {
  color: #e74c3c !important;
  font-size: 20px !important;
  transition: transform 0.2s ease !important;
}

.cart-overview .remove-from-cart:hover {
  transform: scale(1.2) !important;
}

.cart-summary {
  background: #f8f9fa !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

.cart-summary .cart-total {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
}

/* ============================================================
   10. RESPONSIVE - MÓVIL (SOLO AQUÍ los cambios de móvil)
   ============================================================ */

@media (max-width: 768px) {
  /* Tarjetas de cuenta en móvil */
  #my-account .links,
  .page-my-account .links {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 10px !important;
    max-width: 100% !important;
  }

  #my-account .links a,
  .page-my-account .links a,
  .account-link-item,
  .link-item {
    min-height: 160px !important;
    padding: 32px 12px !important;
    border-radius: 18px !important;
  }

  #my-account .links a i,
  .page-my-account .links a i {
    font-size: 42px !important;
    margin-bottom: 14px !important;
  }

  #my-account .links a span,
  .page-my-account .links a span {
    font-size: 12px !important;
  }

  /* Botones MÁS GRANDES solo en móvil */
  .btn,
  .jamarketplace .btn,
  .ja-marketplace .btn,
  .marketplace-seller .btn,
  .seller-profile .btn,
  .seller-dashboard .btn,
  #seller-dashboard .btn {
    padding: 16px 20px !important;
    font-size: 16px !important;
    min-height: 52px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  /* Grupos de botones en columna solo en móvil */
  .seller-actions,
  .marketplace-actions,
  .jamarketplace .seller-buttons,
  .ja-marketplace .seller-buttons,
  .seller-dashboard .seller-buttons,
  #seller-dashboard .seller-buttons {
    flex-direction: column !important;
  }

  /* Header móvil */
  #header .header-top {
    padding: 12px 0 !important;
  }

  /* Inputs anti-zoom iOS */
  .form-control,
  input,
  select,
  textarea {
    font-size: 16px !important;
    padding: 14px !important;
  }

  /* Tarjetas vendedor */
  .seller-card,
  .marketplace-seller-card,
  .jamarketplace .seller-item,
  .ja-marketplace .seller-item {
    margin-bottom: 16px !important;
  }

  .product-price,
  .current-price {
    font-size: 24px !important;
  }

  #footer {
    text-align: center !important;
  }

  /* Menú del vendedor en móvil: scroll horizontal */
  .seller-dashboard .nav-tabs,
  #seller-dashboard .nav-tabs,
  .jamarketplace .nav-tabs,
  .ja-marketplace .nav-tabs,
  .marketplace-seller .nav-tabs,
  .seller-menu,
  .marketplace-menu {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }

  .seller-dashboard .nav-tabs .nav-link,
  #seller-dashboard .nav-tabs .nav-link,
  .jamarketplace .nav-tabs .nav-link,
  .ja-marketplace .nav-tabs .nav-link,
  .seller-menu a,
  .marketplace-menu a {
    padding: 12px 18px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================================
   11. ACCESIBILIDAD Y CONTRASTE
   ============================================================ */

*:focus-visible {
  outline: 3px solid #e74c3c !important;
  outline-offset: 2px !important;
}

a {
  color: #2980b9 !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: #1a5276 !important;
  text-decoration: underline !important;
}

.form-text,
.text-muted {
  color: #6c757d !important;
  font-size: 13px !important;
}

.alert {
  border-radius: 10px !important;
  padding: 16px 20px !important;
  border: none !important;
  font-weight: 500 !important;
}

.alert-success {
  background: #d4edda !important;
  color: #155724 !important;
  border-left: 4px solid #28a745 !important;
}

.alert-danger {
  background: #f8d7da !important;
  color: #721c24 !important;
  border-left: 4px solid #dc3545 !important;
}

.alert-warning {
  background: #fff3cd !important;
  color: #856404 !important;
  border-left: 4px solid #ffc107 !important;
}

.alert-info {
  background: #d1ecf1 !important;
  color: #0c5460 !important;
  border-left: 4px solid #17a2b8 !important;
}

/* ============================================================
   12. ANIMACIONES Y PRODUCTOS
   ============================================================ */

a, button, .btn, input, select, textarea,
.seller-card, .marketplace-seller-card,
#my-account .links a {
  transition: all 0.3s ease !important;
}

.product-miniature {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.product-miniature:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important;
}

.product-flag.new {
  background: #e74c3c !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3) !important;
}

.product-flag.on-sale {
  background: #f39c12 !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3) !important;
}

/* ============================================================
   13. INFO DEL VENDEDOR EN PRODUCTO (JA Marketplace)
   ============================================================ */

.product-seller-info,
.seller-info-block,
.jamarketplace-product-seller,
.ja-marketplace-product-seller {
  background: #f8f9fa !important;
  border-radius: 12px !important;
  padding: 18px !important;
  margin: 16px 0 !important;
  border-left: 4px solid #e74c3c !important;
}

.product-seller-info a,
.seller-info-block a {
  font-weight: 600 !important;
  color: #c0392b !important;
}

a[href*="seller"],
a[href*="marketplace"] {
  font-weight: 600 !important;
}

.pagination .page-item.active .page-link {
  background: #e74c3c !important;
  border-color: #e74c3c !important;
  color: #fff !important;
}

.pagination .page-link {
  color: #2c3e50 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  margin: 0 3px !important;
  border: 2px solid #e9ecef !important;
}

.pagination .page-link:hover {
  background: #f8f9fa !important;
  border-color: #e74c3c !important;
  color: #c0392b !important;
}