/* ════════════════════════════════════════════════════════════════════════
   LAUTARO DECURNEX — SISTEMA DE BOTONES (Oct 2026)
   Una sola familia visual para el sitio público y el Portal de Asesorados.
   Se carga DESPUÉS de main.css (y de tool-system.css donde exista).

   Jerarquía (no todos los botones se ven iguales):
     .btn-primary    acción principal del contexto ("Gradiente sobrio")
     .btn-secondary  acción relevante pero secundaria (alias: .btn-outline)
     .btn-tertiary   navegación / profundización: texto + flecha, sin caja
     .btn-danger     acción destructiva (sólido sobrio)
     .btn-icon       solo ícono (cerrar, menú, flechas): área ≥ 40px
   Tamaños: .btn-sm (36) · base (44) · .btn-lg (48).  Ancho: auto por
   defecto; .btn-block lo estira; .btn-block-mobile solo en pantallas chicas.

   Tema: los tokens --btn-* se redefinen en contextos oscuros (hero, secciones
   navy, header, Cartera 360, Panel de Acciones, feedback oscuro) -- el mismo
   markup sirve en claro y oscuro, sin variantes por página.

   Reglas de uso: 1 primary por contexto; 0-1 secondary; el resto tertiary.
   No usar estos estilos en tabs, segmented controls, chips, toggles ni
   acordeones: tienen su propia semántica visual.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Dimensiones */
  --btn-h-sm: 36px;
  --btn-h: 44px;
  --btn-h-lg: 48px;
  --btn-radius: 10px;
  --btn-px: 22px;
  --btn-px-sm: 16px;
  --btn-gap: 8px;
  --btn-font-size: 15px;
  --btn-font-size-sm: 13.5px;
  --btn-weight: 600;
  --btn-dur: 180ms;
  --btn-ease: cubic-bezier(.23, 1, .32, 1);

  /* Primary — gradiente muy contenido: casi sólido, con profundidad */
  --btn-primary-start: #0A6CF2;
  --btn-primary-end: #0053C7;
  --btn-primary-hover-start: #0859D2;
  --btn-primary-hover-end: #00419B;
  --btn-primary-fg: #FFFFFF;
  --btn-primary-shadow: 0 1px 2px rgba(0, 19, 58, .18), 0 6px 14px -8px rgba(0, 83, 199, .55);
  --btn-primary-shadow-hover: 0 2px 4px rgba(0, 19, 58, .2), 0 10px 20px -10px rgba(0, 83, 199, .6);

  /* Secondary */
  --btn-sec-fg: #00133A;
  --btn-sec-bg: transparent;
  --btn-sec-bd: #C5D0E2;
  --btn-sec-hover-bg: rgba(0, 107, 250, .06);
  --btn-sec-hover-bd: #6FA2EA;

  /* Tertiary */
  --btn-ter-fg: #0052CC;
  --btn-ter-hover-fg: #00133A;

  /* Danger (rojo sobrio, uso excepcional) */
  --btn-danger-start: #BC3A2F;
  --btn-danger-end: #98281F;
  --btn-danger-text: #B42318;

  /* Icon-only */
  --btn-icon-fg: #4A6080;
  --btn-icon-hover-bg: rgba(0, 19, 58, .07);
  --btn-icon-hover-fg: #00133A;

  /* Estados */
  --btn-disabled-bg: #E4E9F2;
  --btn-disabled-fg: #6F7F99;
  --btn-focus: #006BFA;
}

/* ── Tema oscuro ─────────────────────────────────────────────────────────
   Hero y secciones navy de la landing, el header del sitio, Cartera 360,
   Panel de Acciones (body[data-btn-theme="dark"]) y el feedback oscuro. */
.on-ink, .hero, .cta-final, .page-hero, .login-card, header.site-nav, .btn-theme-dark,
body[data-btn-theme="dark"], .ldfb-overlay[data-variant="dark"] {
  --btn-primary-start: #1F6DEB;
  --btn-primary-end: #1650C4;
  --btn-primary-hover-start: #2A7AF5;
  --btn-primary-hover-end: #1B5AD4;
  --btn-primary-shadow: 0 1px 2px rgba(0, 6, 20, .5), 0 6px 14px -8px rgba(31, 109, 235, .55);
  --btn-primary-shadow-hover: 0 2px 4px rgba(0, 6, 20, .5), 0 10px 20px -10px rgba(31, 109, 235, .6);

  --btn-sec-fg: #E8EEFA;
  --btn-sec-bd: rgba(255, 255, 255, .2);
  --btn-sec-hover-bg: rgba(255, 255, 255, .07);
  --btn-sec-hover-bd: rgba(134, 186, 255, .6);

  --btn-ter-fg: #86BAFF;
  --btn-ter-hover-fg: #FFFFFF;

  --btn-danger-text: #F87171;

  --btn-icon-fg: #8DA0C3;
  --btn-icon-hover-bg: rgba(255, 255, 255, .09);
  --btn-icon-hover-fg: #FFFFFF;

  --btn-disabled-bg: rgba(255, 255, 255, .08);
  --btn-disabled-fg: #7F93B6;
  --btn-focus: #86BAFF;
}

/* ── Base ────────────────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-wa, .btn-secondary, .btn-outline, .btn-tertiary, .btn-danger, .btn-icon {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap);
  min-height: var(--btn-h); padding: 8px var(--btn-px);
  border: 1px solid transparent; border-radius: var(--btn-radius);
  font-family: inherit; font-size: var(--btn-font-size); font-weight: var(--btn-weight); line-height: 1.2; letter-spacing: 0;
  text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background-color var(--btn-dur) var(--btn-ease), border-color var(--btn-dur) var(--btn-ease), color var(--btn-dur) var(--btn-ease),
    box-shadow var(--btn-dur) var(--btn-ease), transform var(--btn-dur) var(--btn-ease), opacity var(--btn-dur) var(--btn-ease);
}
.btn svg, .btn-primary svg, .btn-secondary svg, .btn-outline svg, .btn-tertiary svg, .btn-danger svg {
  flex-shrink: 0; width: 16px; height: 16px; transition: transform var(--btn-dur) var(--btn-ease);
}
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-outline:focus-visible,
.btn-tertiary:focus-visible, .btn-danger:focus-visible, .btn-icon:focus-visible {
  outline: 2px solid var(--btn-focus); outline-offset: 2px;
}

/* Tamaños y anchos */
.btn-sm { min-height: var(--btn-h-sm); padding: 6px var(--btn-px-sm); font-size: var(--btn-font-size-sm); }
.btn-lg { min-height: var(--btn-h-lg); padding: 8px calc(var(--btn-px) + 4px); }
.btn-block { display: flex; width: 100%; white-space: normal; text-wrap: balance; }

/* ── PRIMARY ─────────────────────────────────────────────────────────── */
.btn-primary {
  position: relative; isolation: isolate; overflow: hidden;
  background-image: linear-gradient(135deg, var(--btn-primary-start), var(--btn-primary-end));
  color: var(--btn-primary-fg); border-color: transparent;
  box-shadow: var(--btn-primary-shadow);
}
/* El degradé de hover va en una capa que se funde (un gradiente no se anima directo) */
.btn-primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--btn-dur) var(--btn-ease);
  background-image: linear-gradient(135deg, var(--btn-primary-hover-start), var(--btn-primary-hover-end));
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--btn-primary-shadow-hover); color: var(--btn-primary-fg); }
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0); box-shadow: var(--btn-primary-shadow); filter: brightness(.95); transition-duration: 80ms; }
.btn-primary:hover svg:last-child { transform: translateX(3px); }

/* ── WHATSAPP: siempre fondo con el verde oficial de WhatsApp (#25D366), liso. Texto oscuro porque el blanco sobre ese verde no llega a AA. ── */
.btn-wa {
  background-image: none; background-color: #25D366; color: #06301F; border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 40, 18, .18), 0 6px 14px -8px rgba(37, 211, 102, .7);
}
.btn-wa:hover { transform: translateY(-1px); filter: brightness(.96); color: #06301F; box-shadow: 0 2px 4px rgba(0, 40, 18, .2), 0 10px 20px -10px rgba(37, 211, 102, .8); }
.btn-wa:active { transform: translateY(0); filter: brightness(.92); transition-duration: 80ms; }

/* ── SECONDARY ───────────────────────────────────────────────────────── */
.btn-secondary, .btn-outline {
  background-color: var(--btn-sec-bg); color: var(--btn-sec-fg); border-color: var(--btn-sec-bd);
  font-size: var(--btn-font-size);
}
.btn-secondary:hover, .btn-outline:hover { background-color: var(--btn-sec-hover-bg); border-color: var(--btn-sec-hover-bd); color: var(--btn-sec-fg); }
.btn-secondary:active, .btn-outline:active { background-color: var(--btn-sec-hover-bg); filter: brightness(.96); transition-duration: 80ms; }

/* ── TERTIARY: acción liviana, editorial (sin caja) ──────────────────── */
.btn-tertiary {
  min-height: 0; padding: 4px 2px; gap: 6px; border: none; border-radius: 6px; background: none;
  color: var(--btn-ter-fg); font-size: var(--btn-font-size);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.btn-tertiary:hover { color: var(--btn-ter-hover-fg); text-decoration: underline; }
.btn-tertiary:active { opacity: .8; }
.btn-tertiary:hover svg:last-child { transform: translateX(3px); }
.btn-tertiary.btn-sm { font-size: var(--btn-font-size-sm); padding: 3px 2px; }
/* Enlace dentro de una frase ("¿Encontraste un problema? Informarlo"): hereda tamaño y línea del texto */
.btn-tertiary.btn-inline { display: inline; min-height: 0; padding: 0 1px; font-size: inherit; line-height: inherit; text-decoration: underline; }
.btn-tertiary.is-danger, .btn-tertiary.btn-danger-text { color: var(--btn-danger-text); }
.btn-tertiary.is-danger:hover, .btn-tertiary.btn-danger-text:hover { color: var(--btn-danger-text); filter: brightness(1.12); }

/* ── DANGER (solo donde corresponde; confirmar antes de ejecutar) ───── */
.btn-danger {
  background-image: linear-gradient(135deg, var(--btn-danger-start), var(--btn-danger-end)); color: #fff;
  box-shadow: 0 1px 2px rgba(60, 10, 6, .25), 0 6px 14px -8px rgba(152, 40, 31, .55);
}
.btn-danger:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-danger:active { transform: translateY(0); filter: brightness(.94); transition-duration: 80ms; }

/* ── ICON-ONLY ───────────────────────────────────────────────────────── */
.btn-icon {
  width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: var(--btn-radius);
  background: transparent; color: var(--btn-icon-fg);
}
.btn-icon svg { width: 18px; height: 18px; }
.btn-icon:hover { background: var(--btn-icon-hover-bg); color: var(--btn-icon-hover-fg); }
.btn-icon:active { filter: brightness(.9); }

/* ── DISABLED y LOADING ──────────────────────────────────────────────── */
.btn:disabled, .btn-primary:disabled, .btn-wa:disabled, .btn-secondary:disabled, .btn-outline:disabled, .btn-danger:disabled,
.btn[aria-disabled="true"], .btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"], .btn-outline[aria-disabled="true"] {
  background: var(--btn-disabled-bg); background-image: none; color: var(--btn-disabled-fg); border-color: transparent;
  box-shadow: none; transform: none; filter: none; cursor: not-allowed; opacity: 1; pointer-events: none;
}
.btn-primary:disabled::before, .btn-primary[aria-disabled="true"]::before { display: none; }
.btn-tertiary:disabled, .btn-tertiary[aria-disabled="true"] { background: none; color: var(--btn-disabled-fg); cursor: not-allowed; text-decoration: none; pointer-events: none; }
.btn-icon:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Cargando: conserva el ancho (el texto queda, invisible) y muestra un spinner chico */
.btn.is-loading, .btn-primary.is-loading, .btn-secondary.is-loading, .btn-outline.is-loading {
  position: relative; color: transparent !important; pointer-events: none;
}
.btn.is-loading::after, .btn-primary.is-loading::after, .btn-secondary.is-loading::after, .btn-outline.is-loading::after {
  content: ''; position: absolute; width: 16px; height: 16px; left: calc(50% - 8px); top: calc(50% - 8px);
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: btn-spin .7s linear infinite;
}
.btn-secondary.is-loading::after, .btn-outline.is-loading::after { border-color: var(--btn-sec-bd); border-top-color: var(--btn-sec-fg); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --btn-h: 46px; --btn-px: 20px; }
  .btn-block-mobile { display: flex; width: 100%; }
  /* En pantallas chicas un texto largo baja de renglón (no se corta ni se sale del botón) */
  .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger, .btn-wa { white-space: normal; text-wrap: balance; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-tertiary, .btn-danger, .btn-icon, .btn svg, .btn-primary::before { transition: none; }
  .btn-primary:hover, .btn-danger:hover { transform: none; }
  .btn.is-loading::after, .btn-primary.is-loading::after { animation-duration: 1.6s; }
}