/* Componente: Button Outline */
/* Categoría: buttons · Librería: core · Versión: 1.0.0 */
/* Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate. */
/* Importar: npx webmcpcss components import core-button-outline */

/* Estilos base (variables --wm-* = API de personalización) */
.wm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border: 1.5px solid transparent;
  border-radius: var(--wm-radius, 10px); font: 600 var(--wm-btn-size, 15px)/1 system-ui, sans-serif;
  cursor: pointer; transition: filter .15s, transform .15s, background .15s, box-shadow .15s;
}
.wm-btn:hover { transform: translateY(-1px); }
.wm-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--wm-primary, #2563eb) 40%, white); outline-offset: 2px; }
.wm-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.wm-btn--outline { background: transparent; color: var(--wm-primary, #2563eb); border-color: var(--wm-primary, #2563eb); }
.wm-btn--outline:hover { background: color-mix(in srgb, var(--wm-primary, #2563eb) 10%, transparent); }

/* Contrato WebMCP */
.wm-btn--outline {
  webmcp-tool: "learnMore";
  webmcp-description: "Abre más información o los detalles del elemento (navegación secundaria)";
  webmcp-intent: "navigate";
  webmcp-confirmation: "none";
  webmcp-permissions: "read-only";
  webmcp-accessibility: "focus-visible: ring; min-target: 44px";
}