/* ==========================================================
   palette.css — Mascotas Ayacucho (paleta oficial, final)
   Colores base: #FF0000 #000000 #9E1F78 #0AC5CA #FFB600
   Uniforma botones, badges y utilidades sin tocar plantillas.
   ========================================================== */

/* 1) Tokens base + alias semánticos seguros */
:root{
  /* Tokens del sistema (desde variables.css) */
  --ma-red-500:    #FF0000;
  --ma-black:      #000000;
  --ma-purple-600: #9E1F78;
  --ma-teal-500:   #0AC5CA;
  --ma-amber-500:  #FFB600;
  --ma-white:      #FFFFFF;

  /* Alias semánticos (sin auto-referencia) */
  --brand:            var(--ma-red-500);     /* principal (rojo) */
  --brand-contrast:   var(--ma-white);
  --accent:           var(--ma-amber-500);   /* acento (ámbar)  */
  --accent-contrast:  var(--ma-black);
  --support:          var(--ma-teal-500);    /* soporte (turquesa) */
  --support-contrast: var(--ma-black);
  --text:             #111827;
  --bg:               #ffffff;

  /* Derivados para hover/estados (+ fallbacks por compat) */
  --brand-600:    color-mix(in srgb, var(--brand) 78%, #000);
  --brand-600-fallback:  #CC0000;
  --accent-600:   color-mix(in srgb, var(--accent) 72%, #000);
  --accent-600-fallback: #CC9200;
  --support-600:  color-mix(in srgb, var(--support) 68%, #000);
  --support-600-fallback:#089EA2;

  /* Superficies y utilidades */
  --surface:       #ffffff;
  --surface-muted: #f8fafc;
  --border:        #e5e7eb;

  /* Accesibilidad */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, #fff);
  --focus-ring-fallback: 0 0 0 3px rgba(255,0,0,.35);
}

/* 2) Utilidades rápidas (baja especificidad) */
.bg-brand   { background: var(--brand) !important;   color:#fff !important; }
.bg-accent  { background: var(--accent) !important;  color:#111 !important; }
.bg-support { background: var(--support) !important; color:#00333a !important; }
.text-brand   { color: var(--brand) !important; }
.text-accent  { color: var(--accent) !important; }
.text-support { color: var(--support) !important; }
.border-brand { border-color: var(--brand) !important; }

/* Botón de marca uniforme (uso libre) */
.btn-brand{
  --_bg: var(--brand);
  --_fg: #fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.6rem 1rem; border-radius:8px;
  background: var(--_bg); color: var(--_fg); border:none; cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
@supports (color: color-mix(in srgb, black 10%, white)){
  .btn-brand:hover{ background: var(--brand-600); }
}
@supports not (color: color-mix(in srgb, black 10%, white)){
  .btn-brand:hover{ background: var(--brand-600-fallback); }
}
.btn-brand:focus-visible{ outline:none; box-shadow: var(--focus-ring); }
@supports not (color: color-mix(in srgb, black 10%, white)){
  .btn-brand:focus-visible{ box-shadow: var(--focus-ring-fallback); }
}
.btn-brand:disabled,
.btn-brand[disabled]{ opacity:.6; cursor:not-allowed; }

/* Secundario (turquesa) y de aviso (ámbar), por si los necesitas */
.btn-support{ background: var(--support); color: var(--support-contrast); }
.btn-accent { background: var(--accent);  color: var(--accent-contrast); }
@supports (color: color-mix(in srgb, black 10%, white)){
  .btn-support:hover{ background: var(--support-600); }
  .btn-accent:hover { background: var(--accent-600); }
}
@supports not (color: color-mix(in srgb, black 10%, white)){
  .btn-support:hover{ background: var(--support-600-fallback); }
  .btn-accent:hover { background: var(--accent-600-fallback); }
}

/* 3) WooCommerce: botones/badges con la paleta
   (Incluye alt, checkout y enlaces dentro de avisos) */
:where(.woocommerce) a.button,
:where(.woocommerce) button.button,
:where(.woocommerce) input.button,
:where(.woocommerce) .button,
:where(.woocommerce) .button.alt,
:where(.woocommerce) a.button.alt,
:where(.woocommerce) .checkout-button,
:where(.woocommerce) .single_add_to_cart_button{
  background: var(--brand); color:#fff; border:none; border-radius:8px;
  transition: background .15s ease;
}
@supports (color: color-mix(in srgb, black 10%, white)){
  :where(.woocommerce) a.button:hover,
  :where(.woocommerce) button.button:hover,
  :where(.woocommerce) input.button:hover,
  :where(.woocommerce) .button:hover,
  :where(.woocommerce) .button.alt:hover,
  :where(.woocommerce) a.button.alt:hover,
  :where(.woocommerce) .checkout-button:hover,
  :where(.woocommerce) .single_add_to_cart_button:hover{
    background: var(--brand-600);
  }
}
@supports not (color: color-mix(in srgb, black 10%, white)){
  :where(.woocommerce) a.button:hover,
  :where(.woocommerce) button.button:hover,
  :where(.woocommerce) input.button:hover,
  :where(.woocommerce) .button:hover,
  :where(.woocommerce) .button.alt:hover,
  :where(.woocommerce) a.button.alt:hover,
  :where(.woocommerce) .checkout-button:hover,
  :where(.woocommerce) .single_add_to_cart_button:hover{
    background: var(--brand-600-fallback);
  }
}
:where(.woocommerce) .button:disabled,
:where(.woocommerce) .button.disabled,
:where(.woocommerce) .button:disabled[disabled]{
  opacity:.6; cursor:not-allowed;
}

/* Badges / precios */
.woocommerce span.onsale{
  background: var(--accent);
  color:#111; border-radius:999px; padding:.35rem .6rem;
}
.woocommerce .price{ color: var(--brand); }

/* Mensajes Woo (links con botón visual) */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button{
  background: var(--support); color: var(--support-contrast);
}
@supports (color: color-mix(in srgb, black 10%, white)){
  .woocommerce-message a.button:hover,
  .woocommerce-info a.button:hover,
  .woocommerce-error a.button:hover{
    background: var(--support-600);
  }
}
@supports not (color: color-mix(in srgb, black 10%, white)){
  .woocommerce-message a.button:hover,
  .woocommerce-info a.button:hover,
  .woocommerce-error a.button:hover{
    background: var(--support-600-fallback);
  }
}

/* Paginación activa */
.woocommerce nav.woocommerce-pagination ul li .page-numbers.current{
  background: var(--brand); color:#fff; border-color: var(--brand);
}

/* 4) Vista previa opcional de paleta (para páginas de estilo) */
.palette-preview{ display:flex; flex-wrap:wrap; gap:10px; }
.palette-color{
  width:80px; height:80px; border-radius:6px; display:flex;
  align-items:center; justify-content:center; color:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.palette-color.principal{ background: var(--brand); }
.palette-color.morado   { background: var(--ma-purple-600); }
.palette-color.soporte  { background: var(--support); }
.palette-color.acento   { background: var(--accent); }
.palette-color.negro    { background: var(--ma-black); }
.palette-color.blanco   { background: #fff; color:#000; border:1px solid var(--border); }

/* 5) Accesibilidad global */
:where(a, button, [role="button"], input, select, textarea):focus-visible{
  outline:none; box-shadow: var(--focus-ring);
}
@supports not (color: color-mix(in srgb, black 10%, white)){
  :where(a, button, [role="button"], input, select, textarea):focus-visible{
    box-shadow: var(--focus-ring-fallback);
  }
}

/* 6) Preferencias de movimiento (mejor UX/perf) */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

/* =========================================================
   MA_BRAND_PALETTE_HARDLOCK_V1 (2026-01-07)
   Objetivo: Pisar paleta Blocksy (inline) con colores de marca.
   Alcance: GLOBAL (no checkout logic, solo CSS variables).
   Nota: usamos !important para ganar al inline ct-main-styles-inline-css.
   ========================================================= */

:root{
  /* Marca (principal) */
  --theme-palette-color-1: var(--ma-teal-500, #0AC5CA) !important;

  /* Marca (hover/activo) - puedes ajustar luego al HEX oficial */
  --theme-palette-color-2: #079FA3 !important;

  /* Texto / headings (neutros modernos) */
  --theme-palette-color-3: #111827 !important;
  --theme-palette-color-4: #0B0F14 !important;

  /* Links (por si Blocksy los setea aparte) */
  --theme-link-initial-color: var(--theme-palette-color-1) !important;
  --theme-link-hover-color:   var(--theme-palette-color-2) !important;

  /* Selección */
  --theme-selection-background-color: var(--theme-palette-color-1) !important;
}

/* Colores secundarios de marca (por ahora NO se usan globalmente)
   Ajusta a tus hex oficiales cuando quieras. */
:root{
  --ma-red-500:    #E11D48;
  --ma-yellow-500: #F59E0B;
  --ma-purple-500: #7C3AED;
  --ma-black-900:  #0B0F14;
}