/* tiers.css — Sistema de variables CSS para paleta por tier de suscripción.
 *
 * Aplicación global vía: body[data-tier="..."]
 * Asignado dinámicamente por js/tier_loader.js leyendo el JWT del usuario.
 *
 * Tiers soportados:
 *   free / pay_per_use    → azul corporativo (default)
 *   profesional_solo      → dorado premium
 *   estudio_pequeno       → bronce
 *   estudio_mediano       → azul rey premium
 *   empresarial           → negro/dorado luxury
 */

/* ═══════════════════════════════════════════════════════════════
   Paleta default (free / pay_per_use / sin tier)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --tier-color-primary: #002B55;
  --tier-color-accent: #003c7a;
  --tier-color-badge-bg: transparent;
  --tier-color-badge-text: #002B55;
  --tier-color-badge-border: #002B55;
  --tier-gradient: linear-gradient(135deg, #002B55, #003c7a);
  --tier-label: "Free";
}

/* ═══════════════════════════════════════════════════════════════
   Profesional Solo — dorado premium (UF 1.5)
   ═══════════════════════════════════════════════════════════════ */
body[data-tier="profesional_solo"] {
  --tier-color-primary: #B8860B;
  --tier-color-accent: #D4AF37;
  --tier-color-badge-bg: linear-gradient(135deg, #D4AF37, #B8860B);
  --tier-color-badge-text: #FFFFFF;
  --tier-color-badge-border: #B8860B;
  --tier-gradient: linear-gradient(135deg, #D4AF37, #8B6914);
  --tier-label: "Pro";
}

/* ═══════════════════════════════════════════════════════════════
   Estudio Pequeño — bronce (UF 4.9)
   ═══════════════════════════════════════════════════════════════ */
body[data-tier="estudio_pequeno"] {
  --tier-color-primary: #6B4423;
  --tier-color-accent: #8B7355;
  --tier-color-badge-bg: linear-gradient(135deg, #8B7355, #6B4423);
  --tier-color-badge-text: #FFFFFF;
  --tier-color-badge-border: #6B4423;
  --tier-gradient: linear-gradient(135deg, #8B7355, #5A3A1F);
  --tier-label: "Estudio";
}

/* ═══════════════════════════════════════════════════════════════
   Estudio Mediano — azul rey premium (UF 12.9)
   ═══════════════════════════════════════════════════════════════ */
body[data-tier="estudio_mediano"] {
  --tier-color-primary: #0F1535;
  --tier-color-accent: #1F2A5E;
  --tier-color-badge-bg: linear-gradient(135deg, #1F2A5E, #0F1535);
  --tier-color-badge-text: #D4AF37;
  --tier-color-badge-border: #1F2A5E;
  --tier-gradient: linear-gradient(135deg, #1F2A5E, #0A0F25);
  --tier-label: "Estudio+";
}

/* ═══════════════════════════════════════════════════════════════
   Empresarial — negro/dorado luxury (UF 25+)
   ═══════════════════════════════════════════════════════════════ */
body[data-tier="empresarial"] {
  --tier-color-primary: #000000;
  --tier-color-accent: #0F0F0F;
  --tier-color-badge-bg: linear-gradient(135deg, #0F0F0F, #D4AF37);
  --tier-color-badge-text: #D4AF37;
  --tier-color-badge-border: #D4AF37;
  --tier-gradient: linear-gradient(135deg, #0F0F0F, #D4AF37, #0F0F0F);
  --tier-label: "Enterprise";
}

/* ═══════════════════════════════════════════════════════════════
   Componentes reutilizables global con var()
   ═══════════════════════════════════════════════════════════════ */

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.7em;
  border-radius: 9999px;
  background: var(--tier-color-badge-bg);
  color: var(--tier-color-badge-text);
  border: 1px solid var(--tier-color-badge-border);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tier-badge::before { content: var(--tier-label); }

.btn-tier-primary {
  background: var(--tier-gradient);
  color: white;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 0.5em;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
}
.btn-tier-primary:hover { transform: translateY(-1px); }

.accent-tier { color: var(--tier-color-accent); }
.bg-tier { background: var(--tier-gradient); color: white; }
.border-tier { border-color: var(--tier-color-primary); }