/* =============================================================================
   NOBERA — Tema de marca
   Paleta: blanco cálido #F7F5EF · negro #0B0B0B · verde oscuro #0F5132 · oro #D7BB8B (sobre fondos oscuros)
   ============================================================================= */

/* --- Variables CSS (tokens de Medusa UI) --- */
[data-mode="brand"] {
  --bg-base: #F7F5EF;
  --bg-subtle: #ECEAE1;
  --bg-component: #FFFFFF;
  --bg-field: #F7F5EF;
  --bg-field-hover: #ECEAE1;
  --bg-highlight: #ECEAE1;
  --bg-interactive: #DADED7;
  --fg-base: #0B0B0B;
  --fg-subtle: #3F4A43;
  --fg-muted: #6B7A71;
  --fg-on-color: #F7F5EF;
  --fg-disabled: #B9C2BB;
  --border-base: #DADED7;
  --border-strong: #B9C2BB;
  --border-focus: #0F5132;
  color-scheme: light;
}

/* --- Base: html, body, main --- */
[data-mode="brand"],
[data-mode="brand"] body,
[data-mode="brand"] main {
  background-color: #F7F5EF !important;
  color: #0B0B0B !important;
}

/* --- Estructura: nav, header, footer --- */
[data-mode="brand"] nav,
[data-mode="brand"] header {
  background-color: #0B0B0B !important;
  border-color: #141714 !important;
  color: #F7F5EF !important;
}
[data-mode="brand"] footer {
  background-color: #0B0B0B !important;
  border-color: #141714 !important;
  color: #8E9A92 !important;
}

/* --- Texto en nav y footer --- */
[data-mode="brand"] nav *,
[data-mode="brand"] header * {
  color: #F7F5EF !important;
}
[data-mode="brand"] footer * {
  color: #8E9A92 !important;
}
[data-mode="brand"] nav a:hover *,
[data-mode="brand"] header a:hover *,
[data-mode="brand"] footer a:hover * {
  color: #0F5132 !important;
}

/* --- Divs con fondo blanco/gris claro (fuera de nav/footer) --- */
[data-mode="brand"] .bg-white {
  background-color: #F7F5EF !important;
}
[data-mode="brand"] .bg-ui-bg-base,
[data-mode="brand"] .bg-grey-0 {
  background-color: transparent !important;
}
[data-mode="brand"] .bg-neutral-50,
[data-mode="brand"] .bg-ui-bg-subtle,
[data-mode="brand"] .bg-grey-5,
[data-mode="brand"] .bg-grey-10 {
  background-color: #F7F5EF !important;
}
[data-mode="brand"] .bg-neutral-100,
[data-mode="brand"] .bg-grey-20 {
  background-color: #ECEAE1 !important;
}
[data-mode="brand"] .bg-neutral-200,
[data-mode="brand"] .bg-grey-30 {
  background-color: #DADED7 !important;
}
[data-mode="brand"] .bg-gray-50  { background-color: #F7F5EF !important; }
[data-mode="brand"] .bg-gray-100 { background-color: #ECEAE1 !important; }
[data-mode="brand"] .bg-gray-200 { background-color: #DADED7 !important; }

/* --- Colores de texto --- */
[data-mode="brand"] .text-black,
[data-mode="brand"] .text-ui-fg-base,
[data-mode="brand"] .text-neutral-950,
[data-mode="brand"] .text-neutral-900,
[data-mode="brand"] .text-neutral-800,
[data-mode="brand"] .text-gray-900,
[data-mode="brand"] .text-gray-800 {
  color: #0B0B0B !important;
}
[data-mode="brand"] .text-neutral-700,
[data-mode="brand"] .text-neutral-600,
[data-mode="brand"] .text-gray-700,
[data-mode="brand"] .text-gray-600,
[data-mode="brand"] .text-ui-fg-subtle {
  color: #3F4A43 !important;
}
[data-mode="brand"] .text-neutral-500,
[data-mode="brand"] .text-neutral-400,
[data-mode="brand"] .text-gray-500,
[data-mode="brand"] .text-gray-400,
[data-mode="brand"] .text-ui-fg-muted {
  color: #6B7A71 !important;
}

/* --- Bordes --- */
[data-mode="brand"] .border,
[data-mode="brand"] .border-t,
[data-mode="brand"] .border-b,
[data-mode="brand"] .border-l,
[data-mode="brand"] .border-r,
[data-mode="brand"] .border-neutral-200,
[data-mode="brand"] .border-neutral-100,
[data-mode="brand"] .border-gray-200,
[data-mode="brand"] .border-gray-100,
[data-mode="brand"] .border-ui-border-base {
  border-color: #DADED7 !important;
}

/* --- Inputs, textarea, select --- */
[data-mode="brand"] input,
[data-mode="brand"] select,
[data-mode="brand"] textarea {
  background-color: #FFFFFF !important;
  color: #0B0B0B !important;
  border-color: #B9C2BB !important;
}
[data-mode="brand"] input:focus,
[data-mode="brand"] select:focus,
[data-mode="brand"] textarea:focus {
  border-color: #0F5132 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.2) !important;
}
[data-mode="brand"] input::placeholder,
[data-mode="brand"] textarea::placeholder {
  color: #B9C2BB !important;
}

/* --- Botón primario/inverted: fondo negro, texto crema --- */
[data-mode="brand"] [class*="bg-ui-button-inverted"] {
  --fg-on-inverted: 245 240 232;
  --fg-on-color: #F7F5EF;
  background-color: #0B0B0B !important;
  color: #F7F5EF !important;
  border-color: #0B0B0B !important;
}
[data-mode="brand"] [class*="bg-ui-button-inverted"]::after {
  display: none !important;
}
[data-mode="brand"] [class*="bg-ui-button-inverted"] > *,
[data-mode="brand"] [class*="bg-ui-button-inverted"] svg {
  color: #F7F5EF !important;
}
[data-mode="brand"] [class*="bg-ui-button-inverted"]:not(:disabled):hover {
  background-color: #1E2722 !important;
}
[data-mode="brand"] [class*="bg-ui-button-inverted"]:disabled,
[data-mode="brand"] [class*="bg-ui-button-inverted"][aria-disabled="true"] {
  background-color: #B9C2BB !important;
  color: #6B7A71 !important;
  cursor: not-allowed !important;
}

/* --- Botón neutral --- */
[data-mode="brand"] [class*="bg-ui-button-neutral"] {
  background-color: #ECEAE1 !important;
  color: #0B0B0B !important;
  border-color: #DADED7 !important;
}
[data-mode="brand"] [class*="bg-ui-button-neutral"]::after {
  display: none !important;
}
[data-mode="brand"] button[class*="bg-white"] {
  background-color: #FFFFFF !important;
  color: #0B0B0B !important;
  border-color: #DADED7 !important;
}

/* --- Cards, paneles y contenedores elevados --- */
[data-mode="brand"] .shadow,
[data-mode="brand"] .shadow-md,
[data-mode="brand"] .shadow-lg,
[data-mode="brand"] [class*="rounded"][class*="bg-white"] {
  background-color: #FFFFFF !important;
  box-shadow: 0 1px 6px rgba(26,20,16,0.08) !important;
}

/* --- Divisores --- */
[data-mode="brand"] hr,
[data-mode="brand"] .divide-y > * + *,
[data-mode="brand"] .divide-neutral-200 > * + * {
  border-color: #DADED7 !important;
}

/* --- Hover states --- */
[data-mode="brand"] .hover\:bg-neutral-50:hover,
[data-mode="brand"] .hover\:bg-gray-50:hover {
  background-color: #ECEAE1 !important;
}
[data-mode="brand"] .hover\:bg-neutral-100:hover,
[data-mode="brand"] .hover\:bg-gray-100:hover {
  background-color: #DADED7 !important;
}

/* --- Links --- */
[data-mode="brand"] a.text-black,
[data-mode="brand"] a.text-neutral-900 {
  color: #0B0B0B !important;
}
[data-mode="brand"] a.text-neutral-600,
[data-mode="brand"] a.text-neutral-500 {
  color: #3F4A43 !important;
}

/* --- Hover text colors --- */
[data-mode="brand"] .hover\:text-black:hover {
  color: #0B0B0B !important;
}
[data-mode="brand"] .hover\:text-ui-fg-base:hover {
  color: #0F5132 !important;
}

/* --- Neutral text colors --- */
[data-mode="brand"] .text-neutral-600 { color: #3F4A43 !important; }
[data-mode="brand"] .text-neutral-500 { color: #6B7A71 !important; }

/* --- Componentes Medusa UI txt-* --- */
[data-mode="brand"] [class*="txt-compact"],
[data-mode="brand"] [class*="txt-medium"],
[data-mode="brand"] [class*="txt-small"],
[data-mode="brand"] [class*="txt-xsmall"] {
  color: #0B0B0B !important;
}
[data-mode="brand"] nav [class*="txt-compact"],
[data-mode="brand"] nav [class*="txt-medium"],
[data-mode="brand"] header [class*="txt-compact"],
[data-mode="brand"] header [class*="txt-medium"] {
  color: #F7F5EF !important;
}
[data-mode="brand"] footer [class*="txt-compact"],
[data-mode="brand"] footer [class*="txt-medium"],
[data-mode="brand"] footer [class*="txt-small"],
[data-mode="brand"] footer [class*="txt-xsmall"] {
  color: #8E9A92 !important;
}
[data-mode="brand"] [class*="text-ui-fg-on-color"] {
  color: #F7F5EF !important;
}

/* --- Botón inverted: prioridad sobre txt-* --- */
[data-mode="brand"] [class*="bg-ui-button-inverted"][class*="txt-"] {
  color: #F7F5EF !important;
}
[data-mode="brand"] [class*="bg-ui-button-inverted"]:disabled[class*="txt-"],
[data-mode="brand"] [class*="bg-ui-button-inverted"][aria-disabled="true"][class*="txt-"] {
  color: #6B7A71 !important;
}

/* --- Acento dorado: precio, badge activo --- */
[data-mode="brand"] .text-gold,
[data-mode="brand"] .text-brand-gold {
  color: #0F5132 !important;
}

/* --- Product card hover elegante --- */
[data-mode="brand"] .product-card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 4px;
  overflow: hidden;
}
[data-mode="brand"] .product-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26,20,16,0.12) !important;
}

/* --- Refinement list: opción activa con acento dorado --- */
[data-mode="brand"] [data-active="true"] {
  color: #0F5132 !important;
  font-weight: 600 !important;
}

/* --- Hero CTAs --- */
[data-mode="brand"] .hero-cta-primary {
  display: inline-block;
  background-color: #0B0B0B;
  color: #F7F5EF;
  border: 1px solid #0B0B0B;
  border-radius: 6px;
  font-family: var(--font-inter, sans-serif);
  letter-spacing: 0.15em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
[data-mode="brand"] .hero-cta-primary:hover {
  background-color: #0F5132 !important;
  border-color: #0F5132 !important;
  color: #F7F5EF !important;
}

[data-mode="brand"] .hero-cta-outline {
  display: inline-block;
  background-color: transparent;
  color: #0B0B0B;
  border: 1px solid #0F5132;
  border-radius: 6px;
  font-family: var(--font-inter, sans-serif);
  letter-spacing: 0.15em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
[data-mode="brand"] .hero-cta-outline:hover {
  background-color: #0F5132 !important;
  color: #F7F5EF !important;
}

/* --- Product card gold border --- */
[data-mode="brand"] .product-card-gold-border {
  border: 1px solid transparent;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 4px;
  padding: 4px;
}
[data-mode="brand"] .product-card-gold-border:hover {
  border-color: #0F5132 !important;
}

/* --- Scroll-driven fade-in para product grid (CSS nativo, sin JS) --- */
@keyframes product-fade-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-mode="brand"] .product-scroll-reveal {
  animation: product-fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;
}

/* --- Footer: títulos de sección visibles (más específico que footer *) --- */
[data-mode="brand"] footer .footer-section-title {
  color: #F7F5EF !important;
  font-weight: 500 !important;
}

/* --- Radio button: estado seleccionado (pago) --- */
/* Borde del contenedor de opción seleccionada */
[data-mode="brand"] .border-ui-border-interactive {
  border-color: #0F5132 !important;
}
/* Círculo exterior del radio cuando está checked */
[data-mode="brand"] [role="radio"][data-state="checked"] > div {
  background-color: #0B0B0B !important;
  box-shadow: 0 0 0 2px #0B0B0B !important;
}
/* Punto interior del radio cuando está checked */
[data-mode="brand"] [role="radio"][data-state="checked"] > div > span > div {
  background-color: #F7F5EF !important;
  width: 6px !important;
  height: 6px !important;
}

/* --- Checkbox: estado seleccionado (dirección de facturación) --- */
[data-mode="brand"] [role="checkbox"][aria-checked="true"] {
  background-color: #0B0B0B !important;
  border-color: #0B0B0B !important;
  color: #F7F5EF !important;
}
[data-mode="brand"] [role="checkbox"][aria-checked="true"] svg {
  color: #F7F5EF !important;
  stroke: #F7F5EF !important;
}
[data-mode="brand"] [role="checkbox"][aria-checked="false"],
[data-mode="brand"] [role="checkbox"]:not([aria-checked="true"]) {
  background-color: #FFFFFF !important;
  border-color: #B9C2BB !important;
}

/* --- Autofill --- */
[data-mode="brand"] input:-webkit-autofill,
[data-mode="brand"] input:-webkit-autofill:hover,
[data-mode="brand"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
  -webkit-text-fill-color: #0B0B0B !important;
  border-color: #B9C2BB !important;
}

/* Superficies oscuras (header, menu lateral): acento dorado de la marca en vez del verde */
[data-mode="brand"] header .hover\:text-ui-fg-base:hover,
[data-mode="brand"] header [data-active="true"] {
  color: #D7BB8B !important;
}