/* Comunicandoqueesgerundio — component primitives. Needs colors_and_type.css. */

/* ---- Buttons ---- */
.btn{
  --_bg:var(--orange-700); --_fg:var(--white); --_bd:transparent; /* AA: blanco sobre orange-700 = 5.2:1 (brand-orange daba 2.7:1) */
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-sans); font-weight:700; font-size:var(--text-base);
  line-height:1; padding:.85em 1.5em; border-radius:var(--radius-pill);
  background:var(--_bg); color:var(--_fg); border:1.5px solid var(--_bd);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform var(--dur) var(--ease-out),
             background var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out); box-shadow:var(--shadow-xs);
}
.btn:hover{ background:var(--orange-800); transform:translateY(-2px);
  box-shadow:var(--shadow-brand); color:var(--white); }
.btn:active{ background:var(--orange-900); transform:translateY(0);
  box-shadow:var(--shadow-xs); }
.btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

.btn--secondary{ --_bg:var(--brand-green); }
.btn--secondary:hover{ background:var(--green-600); box-shadow:var(--shadow-md); }
.btn--secondary:active{ background:var(--green-700); }

.btn--ghost{ --_bg:transparent; --_fg:var(--ink-900); --_bd:var(--border-strong); box-shadow:none; }
.btn--ghost:hover{ background:var(--gray-50); color:var(--ink-900); border-color:var(--gray-400);
  box-shadow:var(--shadow-xs); }
.btn--ghost:active{ background:var(--gray-100); }

.btn--lg{ font-size:var(--text-lg); padding:1em 1.9em; }
.btn--sm{ font-size:var(--text-sm); padding:.65em 1.1em; }

/* ---- Badges / pills ---- */
.badge{ display:inline-flex; align-items:center; gap:.4em; font-weight:700;
  font-size:var(--text-xs); letter-spacing:.04em; text-transform:uppercase;
  padding:.45em .85em; border-radius:var(--radius-pill); }
.badge--orange{ background:var(--orange-50); color:var(--orange-700); }
.badge--green{ background:var(--green-50); color:var(--green-700); }
.badge--mint{ background:var(--brand-mint); color:var(--green-800); }
.badge--gold{ background:#FFF3CC; color:var(--ink-800); } /* AA: gold-600 2.0:1 → ink-800 sobre #FFF3CC */
.badge--ink{ background:var(--ink-900); color:var(--white); }

/* ---- Inputs ---- */
.field{ display:flex; flex-direction:column; gap:.4em; }
.field label{ font-size:var(--text-sm); font-weight:500; color:var(--fg); }
.input{ font-family:var(--font-sans); font-size:var(--text-base);
  padding:.8em 1em; border:1.5px solid var(--border-strong);
  border-radius:var(--radius-sm); background:var(--white); color:var(--fg);
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.input::placeholder{ color:var(--gray-400); }
.input:focus{ outline:none; border-color:var(--brand-orange);
  box-shadow:0 0 0 3px var(--ring); }

/* ---- Card ---- */
.ui-card{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-5);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.ui-card--hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }