/* =========================================================
   NegoCity · Estilos de la tarjeta digital
   Todo se controla con las variables --t-* que genera PHP.
   ========================================================= */
*{box-sizing:border-box}
body{margin:0;background:var(--t-bg);color:var(--t-ink);
  font-family:var(--t-font-cue);-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:38px 20px;position:relative;overflow-x:hidden}

/* ---------- Fondos animados ---------- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}

/* Degradado: dos halos que respiran (antes no dibujaba nada) */
.fx-halo{position:absolute;width:75vmax;height:75vmax;border-radius:50%;filter:blur(60px);
  background:radial-gradient(circle,var(--t-acento) 0%,transparent 65%);opacity:.42;
  animation:respira 14s ease-in-out infinite alternate}
.fx-halo.b{background:radial-gradient(circle,#fff 0%,transparent 62%);opacity:.16;
  animation-duration:19s;animation-direction:alternate-reverse}
@keyframes respira{from{transform:translate(-12%,-10%) scale(1)}to{transform:translate(10%,8%) scale(1.3)}}

/* Burbujas */
.fx-burbuja{position:absolute;border-radius:50%;background:var(--t-acento);opacity:.34;filter:blur(2px);
  animation:flota var(--dur,18s) ease-in-out infinite alternate}
.fx-burbuja.clara{background:#fff;opacity:.20}
@keyframes flota{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(40px,-70px) scale(1.28)}
}

/* Malla de puntos */
.fx-malla{position:absolute;inset:0;opacity:.75;
  background-image:radial-gradient(currentColor 1.6px,transparent 1.6px);
  background-size:24px 24px;color:var(--t-acento);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 25%,transparent 100%);
          mask-image:radial-gradient(70% 60% at 50% 45%,#000 25%,transparent 100%);
  animation:deriva 24s linear infinite}
@keyframes deriva{from{background-position:0 0}to{background-position:24px 48px}}

/* Ondas */
.fx-onda{position:absolute;left:-30%;width:160%;height:60%;border-radius:43% 57% 48% 52%;
  background:var(--t-acento);opacity:.32;filter:blur(6px);
  animation:onda 18s linear infinite;transform-origin:50% 45%}
.fx-onda.b{opacity:.20;background:#fff;animation-duration:26s;animation-direction:reverse}
.fx-onda.c{opacity:.14;animation-duration:33s}
@keyframes onda{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Aurora */
.fx-aurora{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(85px);opacity:.62;
  background:radial-gradient(circle,var(--t-acento) 0%,transparent 60%);
  animation:aurora 20s ease-in-out infinite alternate}
.fx-aurora.b{opacity:.34;background:radial-gradient(circle,#fff 0%,transparent 58%);
  animation-duration:28s;animation-direction:alternate-reverse}
@keyframes aurora{from{transform:translate(-20%,-16%) scale(1)}to{transform:translate(20%,16%) scale(1.35)}}

/* En el tema claro los efectos necesitan menos fuerza para no ensuciar */
body.claro .fx-halo{opacity:.30}
body.claro .fx-halo.b{opacity:.55;background:radial-gradient(circle,#fff 0%,transparent 62%)}
body.claro .fx-burbuja{opacity:.24}
body.claro .fx-burbuja.clara{opacity:.55}
body.claro .fx-onda{opacity:.20}
body.claro .fx-onda.b{opacity:.55}
body.claro .fx-aurora{opacity:.38}
body.claro .fx-aurora.b{opacity:.60}
body.claro .fx-malla{opacity:.55}

/* ---------- Efectos dentro de la cabecera (siempre visibles) ---------- */
.vc-head .fx-in{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit}
.vc-head .fx-in span{position:absolute;display:block}

.fi-burbuja{border-radius:50%;background:#fff;opacity:.20;filter:blur(1px);
  animation:flotaIn var(--dur,12s) ease-in-out infinite alternate}
@keyframes flotaIn{from{transform:translate(0,0) scale(1)}to{transform:translate(26px,-24px) scale(1.25)}}

.fi-malla{inset:0;opacity:.30;background-image:radial-gradient(#fff 1.4px,transparent 1.4px);
  background-size:18px 18px;animation:derivaIn 18s linear infinite}
@keyframes derivaIn{from{background-position:0 0}to{background-position:18px 36px}}

.fi-onda{left:-30%;width:160%;height:150%;border-radius:44% 56% 48% 52%;background:#fff;opacity:.16;
  animation:ondaIn 14s linear infinite;transform-origin:50% 50%}
.fi-onda.b{opacity:.10;animation-duration:21s;animation-direction:reverse}
@keyframes ondaIn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.fi-aurora{width:130%;height:220%;border-radius:50%;filter:blur(42px);opacity:.42;
  background:radial-gradient(circle,#fff 0%,transparent 62%);
  animation:auroraIn 13s ease-in-out infinite alternate}
.fi-aurora.b{opacity:.26;animation-duration:19s;animation-direction:alternate-reverse}
@keyframes auroraIn{from{transform:translate(-16%,-12%) scale(1)}to{transform:translate(16%,10%) scale(1.3)}}

.fi-halo{width:120%;height:200%;border-radius:50%;filter:blur(38px);opacity:.30;
  background:radial-gradient(circle,#fff 0%,transparent 60%);
  animation:auroraIn 16s ease-in-out infinite alternate}

/* Que la cabecera tenga altura suficiente para lucir el efecto */
.vc-head{min-height:210px;display:flex;flex-direction:column;justify-content:center}

/* ---------- Tarjeta ---------- */
.vc{position:relative;z-index:1;background:var(--t-card);border-radius:26px;max-width:400px;width:100%;
  box-shadow:0 30px 70px rgba(0,0,0,.32);overflow:hidden}
.vc-head{background:var(--t-head);padding:2.2rem 1.7rem 1.6rem;color:var(--t-headInk);text-align:center;position:relative;overflow:hidden}
.vc-head::after{content:"";z-index:1;position:absolute;inset:0;
  background:radial-gradient(320px 150px at 78% -25%,rgba(255,255,255,.28),transparent)}
.vc-head.brilla::before{content:"";z-index:1;position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  animation:brillo 5.5s ease-in-out infinite}
@keyframes brillo{0%{left:-60%}55%{left:130%}100%{left:130%}}

.vc-logo{position:relative;z-index:2;width:92px;height:92px;border-radius:var(--t-radio-logo);background:#fff;margin:0 auto 1rem;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.22);font-family:var(--t-font-tit);font-weight:700;font-size:2.2rem;color:var(--t-acento)}
.vc-logo img{width:100%;height:100%;object-fit:contain;padding:7px;background:#fff}
.vc-head h1{font-family:var(--t-font-tit);font-size:1.42rem;line-height:1.25;margin:0 0 .25rem;position:relative;z-index:2;color:var(--t-headInk)}
.vc-head .rol{font-size:.92rem;color:var(--t-headSoft);position:relative;z-index:2;margin:0}
.vc-head .lema{font-size:.86rem;color:var(--t-headSoft);position:relative;z-index:2;margin:.5rem 0 0;opacity:.92}

.vc-body{padding:1.5rem 1.6rem 1.7rem}

/* ---------- Botones de acción ---------- */
.vc-acc{display:grid;gap:.6rem;margin-bottom:1.2rem}
.vc-acc.rejilla{grid-template-columns:1fr 1fr}
.vc-acc.lista{grid-template-columns:1fr}
.vc-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  padding:.95rem .6rem;border:1px solid var(--t-linea);border-radius:var(--t-radio-btn);
  background:var(--t-btnBg);color:var(--t-ink);text-decoration:none;font-weight:600;font-size:.9rem;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;cursor:pointer}
.vc-acc.lista .vc-btn{flex-direction:row;justify-content:flex-start;gap:.7rem;padding:.85rem 1.1rem}
.vc-btn svg{width:22px;height:22px;color:var(--t-acento);flex:0 0 auto}
.vc-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.11);border-color:var(--t-acento)}
.vc-btn:active{transform:translateY(0)}

.vc-btn.principal{grid-column:1/-1;flex-direction:row;justify-content:center;gap:.55rem;
  background:var(--t-acento);color:#fff;border-color:transparent;padding:1rem;font-size:.98rem}
.vc-btn.principal svg{color:#fff}
.vc-btn.principal:hover{filter:brightness(1.07);box-shadow:0 10px 26px rgba(0,0,0,.2)}

/* ---------- QR ---------- */
.vc-qr{text-align:center;padding:1.2rem 0 .3rem;border-top:1px dashed var(--t-linea)}
.vc-qr p{font-size:.8rem;color:var(--t-inkSoft);margin:0 0 .7rem}
.vc-qr .marco{display:inline-block;background:#fff;padding:10px;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.10)}
.vc-mini{display:inline-flex;gap:.4rem;margin-top:.85rem;flex-wrap:wrap;justify-content:center}
.vc-mini button{font:inherit;font-size:.8rem;font-weight:600;padding:.45rem .9rem;border-radius:999px;
  border:1px solid var(--t-linea);background:transparent;color:var(--t-inkSoft);cursor:pointer;transition:.18s}
.vc-mini button:hover{border-color:var(--t-acento);color:var(--t-acento)}

.vc-pie{text-align:center;margin-top:1.1rem;font-size:.8rem}
.vc-pie a{color:var(--t-inkSoft);text-decoration:none}
.vc-pie a:hover{color:var(--t-acento)}
.vc-marca{display:block;margin-top:.6rem;font-size:.75rem;color:var(--t-inkSoft);opacity:.75;text-decoration:none}
.vc-marca b{color:var(--t-acento)}

/* ---------- Animación de entrada ---------- */
.anim .vc{animation:sube .55s cubic-bezier(.22,1,.36,1) both}
.anim .vc-logo{animation:pop .5s cubic-bezier(.34,1.56,.64,1) .12s both}
.anim .vc-head h1{animation:sube .5s ease .2s both}
.anim .vc-head .rol,.anim .vc-head .lema{animation:sube .5s ease .27s both}
.anim .vc-btn{animation:sube .45s ease both;animation-delay:calc(.3s + var(--i,0)*.055s)}
.anim .vc-qr{animation:sube .5s ease .62s both}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(max-width:420px){
  .vc-head h1{font-size:1.25rem}
  .vc-logo{width:78px;height:78px;font-size:1.9rem}
}

/* ---------- Tarjeta de empleado ---------- */
.vc-foto{position:relative;z-index:2;width:112px;height:112px;margin:0 auto 1rem;border-radius:50%;
  background:rgba(255,255,255,.16);box-shadow:0 0 0 4px rgba(255,255,255,.9),0 14px 30px rgba(0,0,0,.28)}
.vc-foto>img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.vc-foto>span{display:flex;width:100%;height:100%;align-items:center;justify-content:center;border-radius:50%;
  background:#fff;color:var(--t-acento);font-family:var(--t-font-tit);font-weight:800;font-size:2.4rem;letter-spacing:-.02em}
.vc-sello{position:absolute;right:-6px;bottom:-4px;width:40px;height:40px;border-radius:12px;background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.25);overflow:hidden;display:flex;align-items:center;justify-content:center}
.vc-sello img{width:100%;height:100%;object-fit:contain;padding:4px}
.vc-head .vc-emp{position:relative;z-index:2;display:inline-block;align-self:center;margin:.55rem 0 0;padding:.22rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.16);color:var(--t-headInk);font-size:.78rem;font-weight:600;letter-spacing:.01em;backdrop-filter:blur(6px)}
.claro .vc-head .vc-emp{background:rgba(0,0,0,.06)}
.anim .vc-foto{animation:pop .5s cubic-bezier(.34,1.56,.64,1) .12s both}
@media(max-width:420px){ .vc-foto{width:96px;height:96px} }