/**
 * ==========================================================================
 * Block: Button - Sistema de Estilos
 * ==========================================================================
 * Gestiona todas las variantes, estados y estilos del bloque core/button.
 * Las variaciones (ej. .is-style-secondary) se registran en functions.php.
 * Este archivo es cargado automáticamente por el sistema modular del tema.
 */

/*
 * --------------------------------------------------------------------------
 * 1. Estilos Base del Botón (.wp-block-button__link)
 * --------------------------------------------------------------------------
 * Se aplican a TODAS las variantes para consistencia y efectos suaves.
 */
.wp-block-button .wp-block-button__link {
  /* Propiedad clave para animaciones suaves en los cambios de estado (hover, focus). */
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
  
  /* Asegura que no haya subrayados indeseados que a veces heredan los enlaces. */
  text-decoration: none !important; 
}

/*
 * --------------------------------------------------------------------------
 * 2. Estilo PRIMARY (Relleno - Por defecto)
 * --------------------------------------------------------------------------
 * Este es nuestro estilo principal. Se aplica a los botones que no tienen
 * una clase .is-style-* específica. Este selector es robusto y escalable.
 */
.wp-block-button:not(.is-style-secondary):not(.is-style-tertiary-dark-mode) .wp-block-button__link {
  background-color: var(--wp--preset--color--action-blue);
  color: var(--wp--preset--color--white);
  border-color: transparent; /* El primario no necesita un borde visible. */
}

/* Estado Hover */
.wp-block-button:not(.is-style-secondary):not(.is-style-tertiary-dark-mode) .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--action-blue-dark);
}

/*
 * --------------------------------------------------------------------------
 * 3. Estilo SECONDARY (Contorno) - Clase: .is-style-secondary
 * --------------------------------------------------------------------------
 */
.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--graphite);
  border-style: solid; /* Aseguramos que el estilo del borde sea visible. */
  border-color: var(--wp--preset--color--ink); /* 'ink' es más fiel al diseño de contorno que 'graphite'. */
}

/* Estado Hover */
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--graphite);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--graphite);
}

/*
 * --------------------------------------------------------------------------
 * 4. Estilo TERTIARY (Para Fondos Oscuros) - Clase: .is-style-tertiary-dark-mode
 * --------------------------------------------------------------------------
 */
.wp-block-button.is-style-tertiary-dark-mode .wp-block-button__link {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--action-blue);
  border-color: transparent;
}

/* Estado Hover */
.wp-block-button.is-style-tertiary-dark-mode .wp-block-button__link:hover {
  /* El color del hover en tu diseño es un amarillo pálido, que corresponde a 'sand'. */
  background-color: var(--wp--preset--color--sand);
}

/*
 * --------------------------------------------------------------------------
 * 5. Estado DISABLED (Global)
 * --------------------------------------------------------------------------
 * Se aplica a cualquier botón deshabilitado. Usamos !important con propósito,
 * para anular de forma definitiva los estilos base y de las variantes.
 */

/* Estado Disabled para Primary y Tertiary (el diseño es similar) */
.wp-block-button:not(.is-style-secondary) .wp-block-button__link[aria-disabled="true"],
.wp-block-button:not(.is-style-secondary) .wp-block-button__link:disabled {
  background-color: #A9BFFF !important; /* He elegido un azul claro desaturado basado en tu diseño. Ajústalo si tienes el HEX exacto. */
  opacity: 0.8; /* El diseño "Disabled" del primario no es solo un color, es una apariencia "apagada". */
  color: var(--wp--preset--color--white) !important;
  border-color: transparent !important;
  cursor: not-allowed;
}

/* Estado Disabled para Secondary (contorno) */
.wp-block-button.is-style-secondary .wp-block-button__link[aria-disabled="true"],
.wp-block-button.is-style-secondary .wp-block-button__link:disabled {
  background-color: transparent !important;
  color: var(--wp--preset--color--ink) !important;
  border-color: var(--wp--preset--color--ink) !important;
  opacity: 0.4 !important; /* La opacidad es una forma muy efectiva de mostrar el estado "disabled" en botones de contorno. */
  cursor: not-allowed;
}

/**
 * ==========================================================================
 * 6. CUSTOM FIX: Outline Hover -> Fondo Sólido Vital Orange
 * ==========================================================================
 * Al hacer hover, el botón se rellena de naranja y el texto se pone blanco.
 */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    /* Fondo: Vital Orange */
    background-color: var(--wp--preset--color--vital-orange, #FF551D) !important;
    
    /* Borde: También naranja (para que se funda con el fondo) */
    border-color: var(--wp--preset--color--vital-orange, #FF551D) !important;
    
    /* Texto: Blanco */
    color: var(--wp--preset--color--white, #ffffff) !important;
    
    /* Aseguramos visibilidad completa */
    opacity: 1 !important;
}