/* ════════════════════════════════════════════════════════════════════════════
   SISTEMA COMPARTIDO — Dashboard + Web pública
   ════════════════════════════════════════════════════════════════════════════
   Los colores de marca (--primary, --bg, --ink, --border, --font-*) ya se
   inyectan de forma idéntica en templates/base.html y templates/admin/base_admin.html
   desde config/business.json — ambos leían el mismo origen desde antes de este
   cambio. Lo que faltaba compartir eran los TOKENS DE FORMA (radios, sombras,
   easing) y el COMPONENTE DE BOTÓN, que main.css y admin.css definían cada uno
   por su cuenta, con valores ligeramente distintos. Esta hoja es ahora la única
   fuente de verdad para ambos: admin.css y main.css ya no redefinen `.btn`.

   Cárgalo ANTES de admin.css o de main.css en cada base template.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.45);
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ─── Botones — mismo componente en Dashboard y Web pública ─────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 550;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s var(--ease), color .15s, border-color .15s, transform .1s;
  text-align: center;
  font-family: var(--font-body);
  line-height: 1.2;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn--primary   { background: var(--primary); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--secondary { background: var(--surf-3, var(--primary-lt)); color: var(--text-1, var(--primary)); border-color: var(--surf-border, var(--primary)); }
.btn--secondary:hover { background: var(--surf-border, var(--primary-lt)); }
.btn--ghost     { background: transparent; color: var(--text-2, var(--ink-mid)); border-color: var(--surf-border, var(--border)); }
.btn--ghost:hover { background: var(--surf-3, var(--border)); color: var(--text-1, var(--ink)); }
.btn--danger    { background: rgba(224,113,107,.12); color: #E0716B; border-color: rgba(224,113,107,.25); }
.btn--danger:hover { background: rgba(224,113,107,.2); }
.btn--success   { background: var(--success-lt); color: var(--success); border-color: var(--success); }
.btn--full      { width: 100%; }
.btn--sm        { padding: .35rem .75rem; font-size: .78rem; }

/* ─── Badges — mismo componente en ambos contextos ───────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .65rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }