/* ═══════════════════════════════════════════════════════════
   NFC ARGENTINA — DESIGN SYSTEM v2
   DM Sans · Liquid Glass · Dynamic BG · Dark/Light auto
   Todas las páginas heredan de este archivo
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ══ TOKENS BASE — OSCURO ══ */
:root {
  /* Fondos */
  --bg:        #07070e;
  --bg-2:      #0c0c18;
  --bg-3:      #111120;

  /* Glass */
  --g-bg:      rgba(255,255,255,0.042);
  --g-bg-md:   rgba(255,255,255,0.068);
  --g-bg-hv:   rgba(255,255,255,0.09);
  --g-border:  rgba(255,255,255,0.08);
  --g-border-md: rgba(255,255,255,0.14);
  --g-blur:    blur(28px) saturate(1.5);
  --g-blur-sm: blur(16px) saturate(1.3);

  /* Sidebar */
  --sb-bg:     rgba(5,4,14,0.84);
  --sb-border: rgba(255,255,255,0.065);

  /* Violeta */
  --v:         #8B20E8;
  --v-h:       #7510cc;
  --v-glow:    rgba(139,32,232,0.28);
  --v-glow-lg: rgba(139,32,232,0.18);
  --v-soft:    rgba(139,32,232,0.10);
  --v-border:  rgba(139,32,232,0.28);

  /* Texto */
  --t1:        rgba(255,255,255,0.93);
  --t2:        rgba(255,255,255,0.50);
  --t3:        rgba(255,255,255,0.26);

  /* Inputs */
  --in-bg:     rgba(255,255,255,0.05);
  --in-border: rgba(255,255,255,0.08);

  /* Sistema */
  --verde:   #30d158;
  --rojo:    #ff453a;
  --azul:    #0a84ff;
  --naranja: #ff9f0a;

  /* Radios */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   26px;
  --r-2xl:  34px;
  --r-full: 9999px;

  /* Layout */
  --sidebar-w: 216px;
  --preview-w: 336px;

  /* Transición */
  --tr:  0.16s ease;
  --tr-s: 0.24s cubic-bezier(0.34,1.56,0.64,1);

  /* Tipografía */
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Orbs — oscuro (por defecto) */
  --orb1-color: rgba(100,0,200,0.42);
  --orb2-color: rgba(75,0,160,0.28);
  --orb3-color: rgba(120,20,220,0.18);
}

/* ══ MODO CLARO ══ */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f0ecfa;
    --bg-2:      #e8e3f5;
    --bg-3:      #dfd9ee;
    --g-bg:      rgba(255,255,255,0.55);
    --g-bg-md:   rgba(255,255,255,0.72);
    --g-bg-hv:   rgba(255,255,255,0.86);
    --g-border:  rgba(139,32,232,0.10);
    --g-border-md: rgba(139,32,232,0.18);
    --sb-bg:     rgba(240,236,250,0.88);
    --sb-border: rgba(139,32,232,0.08);
    --t1:        rgba(10,4,28,0.90);
    --t2:        rgba(10,4,28,0.46);
    --t3:        rgba(10,4,28,0.26);
    --in-bg:     rgba(255,255,255,0.75);
    --in-border: rgba(10,4,28,0.10);
    --orb1-color: rgba(139,32,232,0.14);
    --orb2-color: rgba(100,0,200,0.10);
    --orb3-color: rgba(160,60,255,0.08);
  }
}

/* ══ RESET ══ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { -webkit-tap-highlight-color:transparent; scroll-behavior:smooth }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  background: var(--bg);
  color: var(--t1);
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none }
button { cursor:pointer; border:none; background:none; font-family:var(--font) }
input,textarea,select { font-family:var(--font) }
img { display:block; max-width:100% }
.oculto { display:none!important }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

/* ══ FONDO DINÁMICO ANIMADO ══ */
/* Los orbs se mueven, el gradiente rota suavemente según hora */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-orbs .orb {
  position: absolute;
  border-radius: 50%;
}
.bg-orbs .orb-1 {
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, var(--orb1-color), transparent 70%);
  filter: blur(80px);
  top: -15%; left: -10%;
  animation: orbDrift1 20s ease-in-out infinite alternate;
}
.bg-orbs .orb-2 {
  width: 48vw; height: 48vw;
  background: radial-gradient(circle, var(--orb2-color), transparent 70%);
  filter: blur(70px);
  bottom: -12%; right: -8%;
  animation: orbDrift2 26s ease-in-out infinite alternate;
}
.bg-orbs .orb-3 {
  width: 36vw; height: 36vw;
  background: radial-gradient(circle, var(--orb3-color), transparent 70%);
  filter: blur(60px);
  top: 38%; left: 32%;
  animation: orbDrift3 32s ease-in-out infinite alternate;
}

@keyframes orbDrift1 {
  0%   { transform: translate(0,0) scale(1) }
  33%  { transform: translate(3%,5%) scale(1.06) }
  66%  { transform: translate(-2%,3%) scale(0.97) }
  100% { transform: translate(5%,-3%) scale(1.04) }
}
@keyframes orbDrift2 {
  0%   { transform: translate(0,0) scale(1) }
  33%  { transform: translate(-4%,-3%) scale(1.04) }
  66%  { transform: translate(3%,-5%) scale(0.96) }
  100% { transform: translate(-5%,4%) scale(1.07) }
}
@keyframes orbDrift3 {
  0%   { transform: translate(0,0) scale(1) }
  50%  { transform: translate(4%,-6%) scale(1.08) }
  100% { transform: translate(-3%,5%) scale(0.94) }
}

/* ══ SPINNER ══ */
.estado-cargando {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.spinner {
  width: 34px; height: 34px;
  border: 2px solid var(--g-border);
  border-top-color: var(--v);
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ══ GLASS CLASSES ══ */
.glass {
  background: var(--g-bg);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
}
.glass-md {
  background: var(--g-bg-md);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border-md);
}
/* El borde luminoso superior — el detalle iOS */
.glass-card {
  background: var(--g-bg);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  transition: border-color var(--tr), background var(--tr), transform var(--tr-s), box-shadow var(--tr);
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
  border-radius: 9999px;
  pointer-events: none;
}
.glass-card:hover {
  border-color: var(--g-border-md);
  background: var(--g-bg-hv);
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 0 0 1px rgba(139,32,232,0.08);
}
.glass-card--violet {
  background: rgba(139,32,232,0.08);
  border-color: rgba(139,32,232,0.20);
}
.glass-card--violet::before {
  background: linear-gradient(90deg, transparent, rgba(176,96,255,0.4), transparent);
}
.glass-card--violet:hover {
  background: rgba(139,32,232,0.12);
  border-color: rgba(139,32,232,0.32);
  box-shadow: 0 16px 48px rgba(139,32,232,0.14);
}

/* ══ BOTONES ══ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--v);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--tr);
  box-shadow: 0 4px 16px var(--v-glow);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: -0.1px;
}
.btn-primary:hover {
  background: var(--v-h);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--v-glow);
}
.btn-primary:active { transform:translateY(0); box-shadow:0 2px 8px var(--v-glow) }
.btn-primary:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none }
.btn-primary--sm { padding:8px 18px; font-size:13px }
.btn-primary--lg { padding:14px 32px; font-size:15px }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--t2);
  background: var(--g-bg);
  border: 1px solid var(--g-border);
  padding: 10px 20px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: var(--g-blur-sm);
  -webkit-backdrop-filter: var(--g-blur-sm);
  transition: all var(--tr);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: -0.1px;
}
.btn-ghost:hover { color:var(--t1); background:var(--g-bg-hv); border-color:var(--g-border-md) }
.btn-ghost--danger:hover { color:var(--rojo); border-color:rgba(255,69,58,.3); background:rgba(255,69,58,.07) }
.btn-ghost--sm { padding:7px 14px; font-size:12px }
.btn-ghost--xs { padding:5px 12px; font-size:11px; font-weight:600 }

.btn-violet-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c080ff;
  background: var(--v-soft);
  border: 1px solid var(--v-border);
  padding: 9px 18px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--tr);
  white-space: nowrap;
  text-decoration: none;
}
.btn-violet-soft:hover { background:rgba(139,32,232,0.18); border-color:rgba(139,32,232,0.4) }

/* ══ CAMPOS ══ */
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--t3);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.field-input {
  width: 100%;
  background: var(--in-bg);
  border: 1px solid var(--in-border);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--t1);
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
  backdrop-filter: var(--g-blur-sm);
  -webkit-backdrop-filter: var(--g-blur-sm);
}
.field-input:hover { border-color: var(--g-border-md) }
.field-input:focus {
  outline: none;
  border-color: rgba(139,32,232,0.5);
  box-shadow: 0 0 0 3px rgba(139,32,232,0.10);
  background: rgba(139,32,232,0.04);
}
.field-input::placeholder { color:var(--t3) }
.field-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Toggle */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--g-border);
}
.toggle-row:last-child { border-bottom:none }
.toggle-info { flex:1; min-width:0 }
.toggle-title { font-size:13px; font-weight:500; color:var(--t1) }
.toggle-desc  { font-size:11px; color:var(--t3); margin-top:1px }
.toggle-switch {
  position: relative;
  width: 44px; height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { opacity:0; width:0; height:0; position:absolute }
.ts-track {
  position: absolute;
  inset: 0;
  background: var(--g-bg-md);
  border: 1px solid var(--g-border);
  border-radius: var(--r-full);
  transition: all var(--tr);
}
.ts-thumb {
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 50%;
  transform: translateY(-50%);
  background: var(--t3);
  border-radius: 50%;
  transition: all var(--tr);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.toggle-switch input:checked + .ts-track { background:var(--v); border-color:var(--v) }
.toggle-switch input:checked + .ts-track .ts-thumb {
  background: #fff;
  transform: translateY(-50%) translateX(18px);
  box-shadow: 0 2px 8px var(--v-glow);
}

/* Slug */
.slug-wrap {
  display: flex;
  align-items: center;
  background: var(--in-bg);
  border: 1px solid var(--in-border);
  border-radius: var(--r-md);
  overflow: hidden;
  backdrop-filter: var(--g-blur-sm);
  -webkit-backdrop-filter: var(--g-blur-sm);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.slug-wrap:focus-within { border-color:rgba(139,32,232,0.5); box-shadow:0 0 0 3px rgba(139,32,232,0.10) }
.slug-prefix { font-size:14px; color:var(--t3); padding:11px 0 11px 14px; white-space:nowrap; flex-shrink:0 }
.slug-input { flex:1; background:transparent; border:none!important; box-shadow:none!important; padding-left:3px }
.slug-estado { font-size:12px; font-weight:600; min-height:16px; margin-top:5px }
.slug-ok { color:var(--verde) }
.slug-no { color:var(--rojo) }

/* Color picker */
.color-row { display:flex; align-items:center; gap:10px }
.color-input {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--g-border);
  padding: 3px;
  background: var(--g-bg);
  cursor: pointer;
  flex-shrink: 0;
}
.color-preview-box { width:44px; height:44px; border-radius:var(--r-md); border:1px solid var(--g-border); flex-shrink:0 }

/* Foto upload */
.foto-upload {
  background: var(--g-bg);
  border: 1.5px dashed var(--g-border-md);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--tr);
  backdrop-filter: var(--g-blur-sm);
  -webkit-backdrop-filter: var(--g-blur-sm);
}
.foto-upload:hover { border-color:var(--v); background:var(--v-soft) }
.foto-upload img { width:100%; height:100%; object-fit:cover }
.foto-upload--sq    { width:96px; height:96px; border-radius:var(--r-lg) }
.foto-upload--round { width:96px; height:96px; border-radius:50% }
.foto-upload--banner { width:100%; height:80px }
.foto-ph { opacity:.3 }

/* Section card */
.s-card {
  background: var(--g-bg);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--r-xl);
  padding: 20px;
  margin-bottom: 12px;
  transition: border-color var(--tr);
  position: relative;
  overflow: hidden;
}
.s-card::before {
  content:'';
  position:absolute;
  top:0; left:10%; right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
  pointer-events:none;
}
.s-card:hover { border-color:var(--g-border-md) }
.s-card--violet { border-color:var(--v-border); background:rgba(139,32,232,0.06) }
.s-card--violet::before { background:linear-gradient(90deg,transparent,rgba(176,96,255,0.35),transparent) }
.s-card--danger { border-color:rgba(255,69,58,.18) }
.s-card-header { margin-bottom:16px }
.s-card-titulo { font-size:14px; font-weight:700; color:var(--t1); margin-bottom:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; letter-spacing:-0.1px }
.s-card-desc   { font-size:12px; color:var(--t2); line-height:1.5 }

/* Grid */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px }
.f-gap  { display:flex; gap:14px; flex-wrap:wrap }
.mb-12  { margin-bottom:12px }
.mb-16  { margin-bottom:16px }
.mb-20  { margin-bottom:20px }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.badge-pro     { background:var(--v); color:#fff }
.badge-ok      { background:rgba(48,209,88,.12); color:var(--verde); border:1px solid rgba(48,209,88,.2) }
.badge-danger  { background:rgba(255,69,58,.12); color:var(--rojo); border:1px solid rgba(255,69,58,.2) }
.badge-warn    { background:rgba(255,159,10,.12); color:var(--naranja); border:1px solid rgba(255,159,10,.2) }
.badge-neutral { background:var(--g-bg-md); color:var(--t2); border:1px solid var(--g-border) }
.badge-violet  { background:var(--v-soft); color:#c080ff; border:1px solid var(--v-border) }

/* ══ TOASTS ══ */
/* Sistema de notificaciones glass — reemplaza alert() y mensajes inline */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: rgba(20,16,36,0.92);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04) inset;
  min-width: 260px;
  max-width: 380px;
  pointer-events: all;
  animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
  position: relative;
  overflow: hidden;
}
.toast::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
}
.toast--ok    { border-color:rgba(48,209,88,0.2) }
.toast--ok::after    { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--verde); border-radius:var(--r-full) 0 0 var(--r-full) }
.toast--error { border-color:rgba(255,69,58,0.2) }
.toast--error::after { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--rojo); border-radius:var(--r-full) 0 0 var(--r-full) }
.toast--info  { border-color:rgba(139,32,232,0.25) }
.toast--info::after  { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--v); border-radius:var(--r-full) 0 0 var(--r-full) }
.toast-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 6px;
}
.toast--ok    .toast-icon { background:rgba(48,209,88,0.12); color:var(--verde) }
.toast--error .toast-icon { background:rgba(255,69,58,0.12); color:var(--rojo) }
.toast--info  .toast-icon { background:rgba(139,32,232,0.12); color:#c080ff }
.toast-icon svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }
.toast-body { flex:1; min-width:0 }
.toast-titulo { font-size:13px; font-weight:600; color:var(--t1); margin-bottom:1px }
.toast-msg    { font-size:12px; color:var(--t2); line-height:1.4 }
.toast-close {
  background:none; border:none; color:var(--t3); cursor:pointer;
  padding:4px; border-radius:var(--r-sm); flex-shrink:0;
  transition:color var(--tr); display:flex;
}
.toast-close:hover { color:var(--t1) }
.toast-close svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round }
.toast-saliendo { animation:toastOut 0.22s ease both }

@keyframes toastIn {
  from { opacity:0; transform:translateX(24px) scale(0.95) }
  to   { opacity:1; transform:translateX(0)   scale(1) }
}
@keyframes toastOut {
  from { opacity:1; transform:translateX(0) scale(1) }
  to   { opacity:0; transform:translateX(24px) scale(0.95) }
}

/* ══ AUTH PAGES ══ */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  position: relative;
  z-index: 1;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--g-bg-md);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border-md);
  border-radius: var(--r-2xl);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content:'';
  position:absolute;
  top:0; left:8%; right:8%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
}
.auth-logo-wrap { text-align:center; margin-bottom:28px }
.auth-logo-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--v);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px var(--v-glow);
  margin-bottom: 10px;
}
.auth-logo-nombre { font-size:15px; font-weight:700; color:var(--t1); letter-spacing:-0.2px }
.auth-logo-sub    { font-size:12px; color:var(--t3) }
.auth-titulo      { font-size:22px; font-weight:700; color:var(--t1); margin-bottom:4px; letter-spacing:-0.4px }
.auth-subtitulo   { font-size:14px; color:var(--t2); margin-bottom:24px }
.auth-sep { display:flex; align-items:center; gap:12px; margin:20px 0 }
.auth-sep::before,.auth-sep::after { content:''; flex:1; height:1px; background:var(--g-border) }
.auth-sep span { font-size:12px; color:var(--t3) }
.auth-footer { text-align:center; font-size:13px; color:var(--t2); margin-top:20px }
.auth-footer a { color:var(--v); font-weight:600 }
.auth-privacidad { text-align:center; font-size:12px; color:var(--t3); margin-top:10px }
.auth-privacidad a { color:var(--t3); text-decoration:underline }
.auth-msg-error {
  background: rgba(255,69,58,.08);
  border: 1px solid rgba(255,69,58,.18);
  color: #ff6b63;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  margin-bottom: 14px;
}
.auth-msg-ok {
  background: rgba(48,209,88,.08);
  border: 1px solid rgba(48,209,88,.18);
  color: #4ade80;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  margin-bottom: 14px;
}
.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: var(--g-bg);
  border: 1px solid var(--g-border);
  border-radius: var(--r-md);
  color: var(--t1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  backdrop-filter: var(--g-blur-sm);
  -webkit-backdrop-filter: var(--g-blur-sm);
  transition: all var(--tr);
}
.btn-google:hover { background:var(--g-bg-hv); border-color:var(--g-border-md) }
.btn-forgot { font-size:12px; color:var(--t3); cursor:pointer; margin-top:6px; transition:color var(--tr); background:none; border:none; font-family:var(--font) }
.btn-forgot:hover { color:var(--t2) }

/* ══ ACTIVAR PAGE ══ */
.activar-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}
.activar-logo-fixed {
  position: fixed;
  top: 20px; left: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.2px;
}
.activar-card {
  width: 100%;
  max-width: 380px;
  text-align: center;
  background: var(--g-bg-md);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border-md);
  border-radius: var(--r-2xl);
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
}
.activar-card::before {
  content:'';
  position:absolute;
  top:0; left:8%; right:8%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);
}
.activar-icono-wrap {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  background: var(--v-soft);
  border: 1px solid var(--v-border);
}
.activar-icono-wrap svg { width:24px; height:24px; stroke:var(--v); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.activar-titulo { font-size:21px; font-weight:700; color:var(--t1); margin-bottom:10px; letter-spacing:-0.3px }
.activar-desc   { font-size:14px; color:var(--t2); line-height:1.6; margin-bottom:28px }
.btn-activar {
  display: block;
  width: 100%;
  background: var(--v);
  color: #fff;
  padding: 14px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 4px 16px var(--v-glow);
  transition: all var(--tr);
  margin-bottom: 10px;
  text-align: center;
  letter-spacing: -0.1px;
}
.btn-activar:hover { background:var(--v-h); transform:translateY(-1px) }
.btn-activar:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none }
.btn-activar-sec {
  display: block;
  width: 100%;
  color: var(--t3);
  padding: 11px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--g-border);
  text-align: center;
  transition: all var(--tr);
  background: var(--g-bg);
  backdrop-filter: var(--g-blur-sm);
}
.btn-activar-sec:hover { color:var(--t2); border-color:var(--g-border-md) }
.producto-badge { display:inline-block; background:var(--g-bg); border:1px solid var(--g-border); border-radius:var(--r-full); padding:5px 14px; font-size:13px; color:var(--t2); margin-bottom:6px }
.producto-id    { font-size:12px; color:var(--t3); font-family:monospace; margin-bottom:20px }

/* ══ PRIVACIDAD ══ */
.priv-body { min-height:100vh; position:relative; z-index:1 }
.priv-container { max-width:680px; margin:0 auto; padding:48px 24px 80px }
.priv-titulo { font-size:30px; font-weight:700; color:var(--t1); margin-bottom:6px; letter-spacing:-0.5px }
.priv-fecha  { font-size:13px; color:var(--t3); margin-bottom:48px }
.priv-body-content h2 { font-size:16px; font-weight:700; color:var(--t1); margin:32px 0 10px; letter-spacing:-0.2px }
.priv-body-content p  { font-size:14px; color:var(--t2); line-height:1.7; margin-bottom:12px }
.priv-body-content ul { list-style:none; margin-bottom:12px }
.priv-body-content ul li { font-size:14px; color:var(--t2); padding:4px 0 4px 14px; position:relative }
.priv-body-content ul li::before { content:'·'; position:absolute; left:0; color:var(--v) }
.priv-body-content a  { color:var(--v) }
.priv-volver { display:inline-block; margin-top:48px; font-size:14px; color:var(--t3); transition:color var(--tr) }
.priv-volver:hover { color:var(--t2) }

/* ══ RESPONSIVE ══ */
@media (max-width:480px) {
  .auth-card    { padding:28px 20px }
  .activar-card { padding:32px 20px }
  .grid-2       { grid-template-columns:1fr }
  .grid-3       { grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}