/* ============================================================
   GVenue — Componentes canónicos (botones, avisos, tarjetas, vacíos)
   Fuente única de verdad para .btn / .flash / .card / .gv-empty.
   Se monta encima de tokens.css + theme.css (+ gv-ui.css opcional).
   Class-based y opt-in: linkealo y usá las clases; no pisa selectores
   de elemento (input/select) para no chocar con estilos por-página.
   Reemplaza las copias inline de .btn que derivaban entre pantallas.
   ============================================================ */

/* — Botón primario (acento del club) con set completo de estados — */
.btn {
  all: unset;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px;
  background: var(--accent, var(--signal));
  color: #001813; font-weight: 600; font-size: 13px; line-height: 1;
  border-radius: var(--r-md); cursor: pointer;
  transition: filter .15s, transform .05s, box-shadow .15s;
  box-shadow: 0 1px 10px -4px var(--accent, var(--signal));
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 2px 16px -4px var(--accent, var(--signal)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent, var(--signal)); outline-offset: 2px; }
.btn[disabled], .btn.is-loading { opacity: .5; cursor: default; box-shadow: none; filter: none; pointer-events: none; }
.btn .gv-ic { width: 16px; height: 16px; }

/* — Variantes — */
.btn.sm { padding: 7px 13px; font-size: 12px; box-shadow: none; }
.btn.lg { padding: 14px 26px; font-size: 14px; }
.btn.block { display: flex; width: 100%; }
.btn.ghost { background: transparent; color: var(--ink-mute); border: 1px solid var(--line-strong); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-fade); filter: none; }
.btn.danger { background: var(--danger); color: #fff; box-shadow: 0 1px 10px -4px var(--danger); }
.btn.danger:hover { box-shadow: 0 2px 16px -4px var(--danger); }

/* — Avisos / flash (con ícono) — */
.flash {
  padding: 12px 15px; border-radius: var(--r-md); margin-bottom: 16px; font-size: 13px;
  display: flex; align-items: center; gap: 9px;
}
.flash::before { font-size: 14px; line-height: 1; }
.flash.ok  { background: rgba(52,211,153,.10); color: var(--ok); border: 1px solid rgba(52,211,153,.30); }
.flash.ok::before { content: '✓'; }
.flash.err { background: rgba(244,63,94,.10); color: var(--danger); border: 1px solid rgba(244,63,94,.30); }
.flash.err::before { content: '!'; font-weight: 700; }
.flash.warn { background: rgba(250,204,21,.10); color: var(--warn); border: 1px solid rgba(250,204,21,.30); }
.flash.warn::before { content: '!'; font-weight: 700; }
.flash.info { background: rgba(96,165,250,.10); color: var(--info); border: 1px solid rgba(96,165,250,.30); }
.flash.info::before { content: 'i'; font-style: italic; font-weight: 700; }

/* — Tarjeta base — */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* — Ícono dentro del badge de las tarjetas-hub (gv-ui.css .gv-badge) — */
.gv-badge > .gv-ic, .gv-badge > svg { width: 24px; height: 24px; color: var(--signal); }
.qa-tile .qa-ic > .gv-ic, .qa-tile .qa-ic > svg { width: 18px; height: 18px; color: var(--signal); }

/* — Empty state que vende (ícono tenue + título + sub + CTA) — */
.gv-empty {
  text-align: center; color: var(--ink-mute); padding: 48px 20px; max-width: 420px; margin: 0 auto;
}
.gv-empty .gv-ic, .gv-empty svg { width: 40px; height: 40px; color: var(--ink-fade); margin: 0 auto 14px; }
.gv-empty h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--ink-soft); letter-spacing: -.01em; }
.gv-empty p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; }

/* — Ícono inline genérico (hereda color del texto) — */
.gv-ic { display: inline-block; vertical-align: -.125em; flex: none; }