/* ============================================================
   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); }

/* — "← Volver / manual / panel": mismo patrón que .btn.ghost.sm, para los links
   de texto plano que quedaron sin botonera (class="back" en ~15 pantallas). — */
.back {
  all: unset;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  font-size: 12px; font-weight: 600; color: var(--ink-mute); cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: background .15s, color .15s, border-color .15s;
}
.back:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-fade); }

/* — 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; }

/* ============================================================
   BADGES — cuatro familias, una función cada una (handoff Design, 25-ago-2026).
   Se usan en /resto/, /modulos/ y /armar/: por eso viven acá y no sueltos en
   una página. Uso: <span class="gv-bd mod" style="--c:#E2724F;--cd:#A34526">.

   🔴 NINGUNA usa el color como único portador de significado. Cada estado
   trae además forma (punto lleno · anillo hueco · tilde · cruz) y texto, y
   «próximamente» suma borde punteado. Ver la regla del daltonismo parcial:
   un badge que sólo se distingue por el tono no se distingue.
   ============================================================ */
.gv-bd {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--c, var(--signal)) 38%, transparent);
  background: color-mix(in srgb, var(--c, var(--signal)) 12%, transparent);
  color: var(--c, var(--signal));
  vertical-align: middle;
}
.gv-bd svg, .gv-bd .gv-ic { width: 13px; height: 13px; flex: none; }

/* En los dos temas claros el acento baja a su variante -deep (--cd) o el
   texto no llega a contraste AA sobre el fondo blanco. */
:root[data-theme="light"] .gv-bd,
:root[data-theme="blue"]  .gv-bd { color: var(--cd, var(--c, var(--signal))); border-color: color-mix(in srgb, var(--cd, var(--c)) 45%, transparent); }

/* — Módulo: SIEMPRE ícono + nombre completo, con el «GV» en el acento.
     Nunca el ícono solo, y nunca dos módulos con el mismo ícono. — */
.gv-bd.mod { color: var(--ink); font-weight: 600; }
.gv-bd.mod .g { color: var(--c, var(--signal)); font-weight: 700; }
.gv-bd.mod svg { color: var(--c, var(--signal)); }
:root[data-theme="light"] .gv-bd.mod .g, :root[data-theme="blue"] .gv-bd.mod .g,
:root[data-theme="light"] .gv-bd.mod svg, :root[data-theme="blue"] .gv-bd.mod svg { color: var(--cd, var(--c)); }

/* — Estado: la forma dice lo mismo que el color. Un módulo muestra UNO por vez. — */
.gv-bd.st .dotm  { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.gv-bd.st .ringm { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.gv-bd.st.soon   { border-style: dashed; }

/* — Precio: monoespaciado y con cifras tabulares para que una columna alinee.
     Sin número inventado: si no es fijo, la píldora dice «A cotizar». — */
.gv-bd.px {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--ink); border-color: var(--line-strong); background: var(--surface-2);
  font-size: 12.5px; letter-spacing: -.01em;
}
.gv-bd.px .cur { font-size: 9.5px; letter-spacing: .06em; color: var(--ink-mute); margin-right: 2px; }
.gv-bd.px .per { font-size: 10.5px; color: var(--ink-mute); font-weight: 500; }
.gv-bd.px.lg { font-size: 17px; padding: 8px 14px; }
.gv-bd.px.lg .cur { font-size: 11px; }
.gv-bd.px.lg .per { font-size: 12px; }

/* — Destacado: UNA sola opción por pantalla, y va en turquesa de MARCA —
     no en el acento del módulo — para que se lea como recomendación de
     GVenue y no como color de producto. Si hay dos recomendados, no hay ninguno. — */
.gv-rec {
  position: absolute; top: -11px; left: 20px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--signal); color: #001813; box-shadow: 0 2px 12px -4px var(--signal);
}
.gv-rec svg, .gv-rec .gv-ic { width: 12px; height: 12px; }