/* tienda-theme.css */

/* --- DARK MODE (Default) overrides --- */
body:not(.light-mode) .form-control,
body:not(.light-mode) .form-select {
  background-color: #2b2d42 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.1) !important;
}

body:not(.light-mode) .form-control::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

body:not(.light-mode) .category-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
body:not(.light-mode) .category-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
body:not(.light-mode) .category-btn.active {
  background: rgba(99, 169, 179, 0.15);
  border-color: #63a9b3;
  color: #fff;
  box-shadow: 0 0 20px rgba(99, 169, 179, 0.3);
}

body:not(.light-mode) .size-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
body:not(.light-mode) .size-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
body:not(.light-mode) .size-btn.active {
  background: #63a9b3;
  border-color: #63a9b3;
  color: #1c1d2b;
}


/* --- LIGHT MODE Overrides --- */
body.light-mode {
  background: linear-gradient(135deg, #f0f2f5 0%, #e0e5ec 100%) !important;
  color: #333 !important;
}

body.light-mode .glass-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05) !important;
  color: #333 !important;
}

body.light-mode .page-title, 
body.light-mode h4, 
body.light-mode h5,
body.light-mode h6 {
  color: #2B2D42 !important;
}

/* Category & Public buttons in Light Mode */
body.light-mode .category-btn {
  background: rgba(0, 0, 0, 0.03);
  border: 2px solid rgba(0, 0, 0, 0.05);
  color: #555;
}
body.light-mode .category-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .category-btn.active {
  background: rgba(99, 169, 179, 0.1);
  border-color: #63a9b3;
  color: #2B2D42;
  box-shadow: 0 4px 15px rgba(99, 169, 179, 0.2);
}

/* Size buttons in Light Mode */
body.light-mode .size-btn {
  background: #fff;
  border: 1px solid #ced4da;
  color: #495057;
}
body.light-mode .size-btn:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}
body.light-mode .size-btn.active {
  background: #63a9b3;
  border-color: #63a9b3;
  color: #fff;
}

body.light-mode #dynamic-sizes {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Form elements in Light Mode */
body.light-mode .form-label {
  color: #495057 !important;
}

body.light-mode .form-control,
body.light-mode .form-select {
  background-color: #fff !important;
  color: #333 !important;
  border-color: #ced4da !important;
}

body.light-mode .form-control::placeholder {
  color: #999 !important;
}

body.light-mode .form-control:focus,
body.light-mode .form-select:focus {
  border-color: #63a9b3 !important;
  box-shadow: 0 0 0 0.2rem rgba(99,169,179,.25) !important;
}

/* Tablas en Light Mode */
body.light-mode .tabla-datos,
body.light-mode .dataTables_wrapper {
  color: #333 !important;
}

body.light-mode table.dataTable tbody tr {
  background-color: transparent !important;
}

body.light-mode table.dataTable tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .dataTables_info,
body.light-mode .dataTables_length,
body.light-mode .dataTables_filter {
  color: #333 !important;
}

body.light-mode .paginate_button {
  color: #333 !important;
}

body.light-mode .btn-clean {
  color: #333 !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .btn-clean:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* Toggle button styling */
.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

body.light-mode .theme-toggle-btn {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #333;
}

body.light-mode .theme-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}