/* ===============================================
   MOBILE PANEL STYLES
   Estilos específicos para el panel móvil
================================================= */

/* ===== PANEL MÓVIL - COLORES DE MARCA ===== */
/* ===== PANEL MÓVIL - COLORES DE MARCA ===== */

/* Fondo principal del panel */
.ct-panel-content {
  background: linear-gradient(135deg, #00caca 0%, #c3dd56 100%) !important;
  padding: 25px 20px !important;
}

/* ===== JERARQUÍA DE COLORES ===== */

/* 1. COLOR PRIMARIO (00caca) - Elementos principales */
.ct-panel-content .ct-header-account,
.ct-panel-content .ct-cart-item,
.ct-panel-content .ct-button.primary {
  background-color: #00caca !important;
  color: #000000 !important;
  border: none !important;
}

/* 2. COLOR SECUNDARIO (c3dd56) - Elementos secundarios */
.ct-panel-content .menu-item a:hover,
.ct-panel-content .ct-search-form button,
.ct-panel-content .ct-button.secondary {
  background-color: #c3dd56 !important;
  color: #000000 !important;
}

/* 3. COLOR ACENTO (fbb300) - Estados activos/hover */
.ct-panel-content .menu-item.current-menu-item > a,
.ct-panel-content .ct-toggle.active {
  background-color: #fbb300 !important;
  color: #000000 !important;
}

/* 4. COLOR DESTACADO (e67306) - Llamadas a la acción */
.ct-panel-content .ct-button.ct-cta,
.ct-panel-content .menu-item.highlight > a {
  background-color: #e67306 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ===== ESPACIADO Y FORMATO ===== */

/* Items del menú */
.ct-panel-content .menu-item a {
  display: block !important;
  padding: 16px 20px !important;
  margin: 8px 0 !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border: 2px solid transparent !important;
}

/* Hover estados */
.ct-panel-content .menu-item a:hover {
  transform: translateX(8px) !important;
  border-color: #00caca !important;
}

/* Submenús */
.ct-panel-content .sub-menu {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  margin: 5px 0 !important;
  border-left: 3px solid #00caca !important;
}

.ct-panel-content .sub-menu .menu-item a {
  padding: 12px 25px !important;
  font-size: 15px !important;
  margin: 4px 0 !important;
}

/* Botones en el panel */
.ct-panel-content .ct-button {
  padding: 14px 24px !important;
  border-radius: 10px !important;
  margin: 10px 5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
}

/* Iconos */
.ct-panel-content .ct-icon {
  color: #00caca !important;
  filter: brightness(1.2) !important;
}

/* Separadores */
.ct-panel-content hr {
  border-color: #00caca !important;
  margin: 20px 0 !important;
  opacity: 0.3 !important;
}

/* Header del panel */
.ct-panel .ct-panel-actions {
  background: linear-gradient(135deg, #018080 0%, #7c9226 100%) !important;
  border-bottom: 3px solid #fbb300 !important;
}

/* Botón cerrar */
.ct-panel-actions [data-toggle="close-panel"] {
  color: #000000 !important;
  background: #fbb300 !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
}

/* ===== RESPONSIVE ADICIONAL ===== */
@media (max-width: 768px) {
  .ct-panel-content {
    padding: 20px 15px !important;
  }

  .ct-panel-content .menu-item a {
    padding: 14px 16px !important;
    font-size: 16px !important;
  }
}