/* assets/css/styles.css - tema modernizado y correcciones solicitadas
   Fondo global gris claro elegante y header plateado.
*/

/* --------- Variables (tema) --------- */
:root{
  --primary-black: #0b0b0d;
  --primary-white: #ffffff;
  --muted-600: #6c757d;
  --card-border: #e6e6e6;
  --text: #222;
  --soft-gray: #f3f5f7;
  --bg: #f4f6f8; /* gris claro elegante para fondo global */
  --surface: #ffffff;
  --header-bg: linear-gradient(180deg, #dfe3e6 0%, #cfcfcf 100%); /* plateado sutil para el header */
  --elev-1: 0 4px 18px rgba(16,24,40,0.06);
  --elev-2: 0 10px 30px rgba(16,24,40,0.08);
  --max-width: 1200px;
  --swatch-size: 36px;
  --swatch-radius: 8px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition-fast: 150ms;
  --focus-ring: 3px solid rgba(52,131,250,0.18);
  --text-muted: #6b7280;
  --badge-border: rgba(0,0,0,0.06);
  --badge-text: var(--text-muted);
  --selected-swatch-border: #c7c7c7;
}

/* --------- Global --------- */
* { box-sizing: border-box; }
html,body { height: 100%; }
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin: 0;
  padding: 0;
  line-height: 1.35;
  font-size: 15px;
}

/* Contenedor centrado */
.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Links */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* Headings */
h1,h2,h3,h4 { margin: 0; font-weight: 600; color: #111; }

/* --------- Header (estilo plateado) --------- */
header {
  background: var(--header-bg);
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  color: #111;
}
header h1, header h2, header h3, header a, header .btn {
  color: #111;
}

/* Carrito: botón negro y elegante (más visible) */
.btn-cart {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: transparent;
  color: var(--primary-white);
  padding: 0;
  border-radius: .6rem;
  border: none;
  font-weight: 600;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
.btn-cart .cart-icon {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-cart:hover .cart-icon {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 30px rgba(11,11,13,0.14);
}

/* badge contador del carrito (ahora estilo secondary) */
.cart-count-badge {
  min-width: 26px;
  height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.78rem;
  line-height:1;
  border-radius:999px;
  box-shadow: 0 4px 10px rgba(11,11,13,0.04);
  background: var(--primary-white);
  color: var(--badge-text);
  border: 1px solid var(--badge-border);
  padding: .18rem .42rem;
  font-weight:700;
}

/* --------- Utilities --------- */
.text-muted { color: var(--text-muted); }
.small { font-size: .85rem; }

/* --------- Product grid and cards (mobile-first) --------- */
.product-grid {
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  margin-top: 1rem;
}

/* Card base */
.product-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--surface));
  transition: box-shadow var(--transition-fast) ease, transform var(--transition-fast) ease;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.product-card:focus-within,
.product-card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-6px);
}

/* Card image: maintain aspect ratio and smart cropping */
.card-media {
  position: relative;
  width:100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.card-media img {
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Card body */
.card-body {
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  flex:1 1 auto;
}

/* Product title: fuente elegante */
.card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #111;
  line-height:1.15;
  margin-bottom: 0;
}
.card-desc {
  font-size: .86rem;
  color: var(--text-muted);
  margin-top: -2px;
  min-height: 36px;
}

/* Price block: menos negrita, un poco más grande */
.product-price {
  display:flex;
  align-items:baseline;
  gap: .5rem;
}
.unit-price {
  color: #111;
  font-weight: 600;
  font-size: 1.06rem;
}
.price-badge {
  background: linear-gradient(180deg, #ffd94a, #f5d900);
  color:#111;
  padding: .18rem .45rem;
  border-radius: .5rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(255,230,0,0.12);
  font-size: .9rem;
}

/* Total small text */
.total-price { font-weight:700; color:#222; }

/* Controls container (talles, colores, tipo) */
.controls {
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

/* Button groups (talle, tipo, version) */
.btn-toggle {
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.btn-toggle .btn {
  border-radius: .5rem;
  padding: .45rem .6rem;
  min-width: 44px;
  height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-toggle .btn[aria-pressed="true"],
.btn-toggle .btn.active {
  background: var(--soft-gray);
  border-color: rgba(0,0,0,0.06);
  color: #111;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

/* SIZE GROUP */
.size-group {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
  -webkit-overflow-scrolling: touch;
  overflow-x: visible;
}
.size-group .size-btn {
  white-space: nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .28rem .5rem;
  font-size: .88rem;
  min-width: 44px;
  height: 36px;
  border-radius: .45rem;
}

/* Quantity control */
.quantity-group {
  display:flex;
  align-items:center;
  gap:0.25rem;
  border-radius: .5rem;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}
.quantity-group .btn {
  padding:.28rem .45rem;
  border: none;
  background: transparent;
  min-width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 1rem;
  appearance: none;
}
.quantity-group input[type="number"] {
  width:42px;
  min-width:42px;
  border: none;
  text-align:center;
  padding:.35rem;
  font-size: .95rem;
  background: transparent;
  -moz-appearance: textfield;
}
.quantity-group input[type="number"]::-webkit-outer-spin-button,
.quantity-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add to cart button: ahora negro, moderno y elegante */
.add-to-cart-btn, .btn-primary.add-to-cart-ajax {
  background: var(--primary-black);
  color: var(--primary-white);
  border: none;
  box-shadow: 0 8px 24px rgba(11,11,13,0.10);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  padding: .5rem .7rem;
  border-radius: .6rem;
  font-weight: 700;
}
.add-to-cart-btn:hover, .btn-primary.add-to-cart-ajax:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,11,13,0.12); }
.add-to-cart-btn:disabled, .btn-primary.add-to-cart-ajax:disabled {
  opacity: .6;
  transform: none;
  box-shadow: none;
}

/* Secondary / outline buttons */
.btn-outline {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.06);
  color: #111;
  padding: .5rem .7rem;
  border-radius: .5rem;
}

/* Color swatches (radios estilizados) */
.color-container { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.color-swatch {
  --size: var(--swatch-size);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid rgba(0,0,0,0.06);
  position: relative;
  box-sizing: border-box;
  background-clip: padding-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0.04);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  z-index: 1;
}
.color-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

/* SELECCIÓN: NO mover el swatch. Solo cambiar el borde a 1px gris. */
.color-input:checked + .color-swatch,
.color-swatch.selected,
.color-swatch[aria-checked="true"] {
  transform: none !important;
  border-color: var(--selected-swatch-border);
  box-shadow: none;
}

/* Mantener foco accesible pero sin mover el swatch */
.color-swatch:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Stock & small messages */
.add-msg { min-height: 1.2rem; transition: opacity .16s ease; color: #0b5; }
.stock-info { color: var(--muted-600); font-size:.9rem; }

/* Footer */
footer { background: transparent; padding: 1.2rem 0; }

/* Accessibility: focus states for keyboard */
:focus { outline: none; }
button:focus, .color-swatch:focus, .size-btn:focus, input:focus, select:focus, textarea:focus {
  box-shadow: var(--focus-ring);
  border-radius: .3rem;
  outline: none;
}

/* Form controls: modern inputs */
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  display:block;
  width:100%;
  padding: .5rem .65rem;
  border-radius: .5rem;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  font-size: .95rem;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
  border-color: rgba(52,131,250,0.28);
  box-shadow: var(--focus-ring);
}

/* Checkbox / radio (custom) */
.input-check {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
  user-select:none;
}
.input-check input[type="checkbox"],
.input-check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width:18px;
  height:18px;
  border-radius:4px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  display:inline-block;
  position:relative;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.input-check input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #ffd94a, #f5d900);
  border-color: #f5d900;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.input-check input[type="radio"] {
  border-radius: 50%;
}
.input-check input[type="radio"]:checked {
  background: linear-gradient(180deg, #ffd94a, #f5d900);
  border-color: #f5d900;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

/* Helper small text */
.helper { font-size:.82rem; color: var(--text-muted); }

/* Tiny placeholder image styling */
.card-img-top {
  background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02));
}

/* --------- Modal specific styles --------- */
.modal-product-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 75vh;
  display: block;
}
.modal-product-title {
  font-size: 1.375rem;
  font-weight: 800;
  margin: 0;
}

/* Grid responsive adjustments */
@media (min-width: 577px) {
  :root { --swatch-size: 40px; }
  .container { padding-left: 1.4rem; padding-right: 1.4rem; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .card-body { padding: 14px; }
  .card-desc { min-height: 44px; }
}

@media (min-width: 992px) {
  :root { --swatch-size: 48px; --max-width: 1400px; --radius-md: 14px; }
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .card-media { aspect-ratio: 3 / 2; }
}

/* Helpers visuales/ajustes finos */
.d-grid .add-to-cart-btn { width:100%; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.mb-1 { margin-bottom:.25rem; }
.mt-auto { margin-top:auto; }

/* Prevent font-size jump in card titles on small devices */
.card-title { word-break: break-word; }

/* Slight polish on small form messages */
.add-msg[aria-live] { font-weight:600; color: #0b5; }

/* ---------- Badges estilo "secondary" (override de Bootstrap bg-secondary) ---------- */
.badge.bg-secondary,
.badge.bg-secondary:hover,
.badge.bg-secondary:focus {
  background: var(--primary-white) !important;
  color: var(--badge-text) !important;
  border: 1px solid var(--badge-border) !important;
  box-shadow: none !important;
}

/* Variante para badges no-interactivos en option-badges */
.option-badges .badge {
  font-size:.88rem;
  padding:.35rem .55rem;
  background: var(--primary-white);
  color: var(--badge-text);
  border: 1px solid var(--badge-border);
  box-shadow: none;
  border-radius: .5rem;
}

/* Small badge style for counts (ej: cantidad de colores) */
.count-badge {
  font-size: .78rem;
  vertical-align: middle;
  background: var(--primary-white);
  color: var(--badge-text);
  border-radius: 999px;
  padding: .18rem .45rem;
  border: 1px solid var(--badge-border);
  box-shadow: 0 4px 10px rgba(11,11,13,0.03);
}

/* Asegurar que badges dentro de grupos se vean consistentes */
.btn-group .badge {
  margin-left: .25rem;
}

/* End of file */

/* ===== Correcciones específicas solicitadas ===== */

/* Evitar que el contenedor principal de cantidad/total haga wrap en móviles */
.product-form .d-flex.align-items-center {
  gap: 0.5rem;
  flex-wrap: nowrap;
  align-items: center;
}

/* Permitir que el lado izquierdo (flex-grow-1) se encoja apropiadamente en contenedores flex */
.product-form .flex-grow-1 {
  min-width: 0;
}

/* Asegurar que la columna de precio no se reduzca y provoque salto de línea */
.product-form .text-end.ms-2 {
  flex: 0 0 auto;
  min-width: 92px;
  text-align: right;
}

/* Disminuir aún más el input de cantidad en pantallas muy pequeñas */
@media (max-width: 420px) {
  .quantity-group input[type="number"] { width:38px; min-width:38px; }
  .product-form .text-end.ms-2 { min-width: 84px; }
}

/* A11y: hacer labels focusables si no lo son (esto ayuda a móviles con navegadores que requieren focus para activar) */
label[for] {
  -webkit-touch-callout: none;
}

/* Forzar que color-swatch sea focusable y tenga pointer-events en móviles */
.color-swatch {
  -webkit-tap-highlight-color: rgba(0,0,0,0.04);
  touch-action: manipulation;
}

/* Search filters responsive */
.search-filters {
  display:flex;
  gap: 0.5rem;
  align-items: center;
}
.search-filters .form-select {
  min-width: 0;
  flex: 1 1 auto;
}
.search-filters > .ms-md-auto {
  margin-left: auto;
}

/* En pantallas pequeñas, apilar filtros verticalmente para mejor usabilidad */
@media (max-width: 767px) {
  .search-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .search-filters .form-select {
    width: 100%;
  }
  .search-filters .ms-md-auto {
    margin-left: 0;
    display:flex;
    justify-content:flex-end;
  }
}

/* End corrections */

/* ---------- Mostrar solo el swatch seleccionado (cuando se selecciona uno) ---------- */
/* Cuando .color-group tiene la clase single-selected, ocultar los swatches que no estén seleccionados. */
.color-group.single-selected .color-swatch:not(.selected) {
  display: none;
}
/* Centrar el swatch seleccionado para mejor presentación cuando los demás están ocultos */
.color-group.single-selected {
  justify-content: center;
  gap: 0;
}

/* También aseguramos que el swatch seleccionado mantenga su tamaño y visibilidad */
.color-group.single-selected .color-swatch.selected {
  display: inline-flex;
}

/* End of file */