/* ============================================================
   TuClick.app · Design Tokens (fuente única de verdad de marca)
   Inclúyelo en login, logout, panel de cliente y panel master:
   <link rel="stylesheet" href="/assets/tokens.css">
   Luego usa var(--tc-*) en lugar de colores/medidas hardcodeadas.
   ============================================================ */
:root {
  /* Marca */
  --tc-primary: #635BFF;        /* índigo TuClick (principal) */
  --tc-primary-600: #4f46e5;
  --tc-primary-700: #4338ca;
  --tc-primary-soft: #eeedff;

  /* Secundario / acento */
  --tc-secondary: #02C0A9;      /* teal TuClick */
  --tc-secondary-600: #019e8c;
  --tc-secondary-soft: #e2fbf6;

  /* Neutrales / superficie */
  --tc-ink: #0f172a;          /* texto principal / fondos oscuros */
  --tc-ink-soft: #1e293b;
  --tc-muted: #64748b;
  --tc-line: #e2e8f0;
  --tc-surface: #ffffff;
  --tc-surface-2: #f8fafc;

  /* Estados */
  --tc-success: #16a34a;
  --tc-success-soft: #dcfce7;
  --tc-warning: #f59e0b;
  --tc-warning-soft: #fef3c7;
  --tc-danger: #dc2626;
  --tc-danger-soft: #fee2e2;
  --tc-info: #2563eb;

  /* Planes (badges) */
  --tc-plan-base: #64748b;
  --tc-plan-advanced: #02C0A9;
  --tc-plan-premium: #635BFF;

  /* Radios */
  --tc-radius-sm: 8px;
  --tc-radius: 12px;
  --tc-radius-lg: 16px;
  --tc-radius-xl: 24px;

  /* Sombras */
  --tc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --tc-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  --tc-shadow-lg: 0 20px 40px rgba(15, 23, 42, .12);

  /* Tipografía */
  --tc-font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --tc-sidebar-w: 238px;
  --tc-sidebar-collapsed-w: 67px;

  /* Acento por-tenant: por defecto usa la marca; el panel puede
     sobrescribir --tc-tenant-accent con el color del cliente. */
  --tc-tenant-accent: var(--tc-primary);
}

/* Utilidades compartidas ----------------------------------- */
.tc-badge-plan {
  display: inline-flex; align-items: center; gap: .35em;
  font: 600 11px/1 var(--tc-font-sans);
  padding: .35em .7em; border-radius: 999px;
  color: #fff; text-transform: uppercase; letter-spacing: .03em;
}
.tc-badge-plan[data-plan="Base"]     { background: var(--tc-plan-base); }
.tc-badge-plan[data-plan="Advanced"]{ background: var(--tc-plan-advanced); }
.tc-badge-plan[data-plan="Premium"] { background: var(--tc-plan-premium); }

.tc-btn {
  font: 600 14px/1 var(--tc-font-sans);
  padding: .75rem 1.4rem; border: none; border-radius: var(--tc-radius);
  background: var(--tc-primary); color: #fff; cursor: pointer;
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.tc-btn:hover { background: var(--tc-primary-600); transform: translateY(-1px); }
.tc-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.tc-btn--ghost { background: transparent; color: var(--tc-ink); border: 1px solid var(--tc-line); }