/* ============================================================
   CSS PERSONALIZADO - AQUILOTIENE.COM (PrestaShop 1.7)
   Mejoras: Mi Cuenta, JA Marketplace, Móvil, Accesibilidad
   Guardar en: themes/tu-tema/assets/css/custom.css
   ============================================================ */

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

/* Fondo general de la página de cuenta */
#my-account,
.page-my-account,
body#my-account #wrapper {
  background-color: #f5f7fa !important;
}

/* Contenedor de las tarjetas de cuenta */
#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;
}

@media (min-width: 769px) {
  #my-account .links,
  .page-my-account .links {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !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;
}

/* 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
   ============================================================ */

/* Contenedores del marketplace */
.jamarketplace,
.ja-marketplace,
#jamarketplace,
.marketplace-seller,
.seller-profile,
.seller-store {
  font-family: inherit;
}

/* Botones del marketplace */
.jamarketplace .btn,
.ja-marketplace .btn,
.marketplace-seller .btn,
.seller-profile .btn,
.jamarketplace button,
.ja-marketplace button,
.marketplace-seller button,
.seller-profile 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: 48px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Botón primario marketplace (Ver tienda, Contactar) */
.jamarketplace .btn-primary,
.ja-marketplace .btn-primary,
.marketplace-seller .btn-primary,
.seller-profile .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,
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,
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,
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 {
  background: transparent !important;
  border: 2px solid #e74c3c !important;
  color: #c0392b !important;
}

.jamarketplace .btn-outline:hover,
.ja-marketplace .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 {
  margin-right: 8px !important;
  font-size: 18px !important;
}

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

/* ============================================================
   3. 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;
}

/* Avatar del vendedor */
.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;
}

/* Nombre del vendedor */
.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;
}

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

/* ============================================================
   4. BOTONES GENERALES DE PRESTASHOP 1.7
   ============================================================ */

/* Botón primario general */
.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;
}

.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;
}

/* Icono en botón de carrito */
.product-add-to-cart .btn-primary i,
.product-add-to-cart .btn-primary .material-icons {
  margin-right: 10px !important;
  font-size: 20px !important;
}

/* Botón secundario */
.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;
}

.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;
}

/* Botón checkout */
.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;
}

.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;
}

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

/* Header más limpio */
#header {
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}

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

/* Menú principal */
#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;
}

/* Barra de búsqueda */
#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;
}

/* Botón de búsqueda */
#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;
}

/* Iconos de cuenta y carrito en header */
#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;
}

/* Breadcrumbs */
.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;
}

/* ============================================================
   6. 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;
}

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

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

/* ============================================================
   7. 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;
}

/* ============================================================
   8. 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;
}

/* ============================================================
   9. RESPONSIVE - MÓVIL (prioridad alta)
   ============================================================ */

@media (max-width: 768px) {
  /* Tarjetas de cuenta en móvil: más grandes y táctiles */
  #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 para dedo */
  .btn,
  .jamarketplace .btn,
  .ja-marketplace .btn,
  .marketplace-seller .btn,
  .seller-profile .btn {
    padding: 16px 20px !important;
    font-size: 16px !important;
    min-height: 52px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  .seller-actions,
  .marketplace-actions,
  .jamarketplace .seller-buttons,
  .ja-marketplace .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;
  }
}

/* ============================================================
   10. 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;
}

/* Alertas */
.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;
}

/* ============================================================
   11. 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;
}

/* ============================================================
   12. 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;
}

/* Paginación marketplace */
.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;
}