/* Extras v11: marca de agua, cápsula, cerradura, modo oficina (Excel) y efectos agitar/soplar */

/* --- Marca de agua viral --- */
.wm{display:inline-flex;align-items:center;gap:5px;margin-top:14px;padding:5px 12px;border-radius:999px;font:600 11px 'Outfit',sans-serif;letter-spacing:.02em;color:#374151;background:rgba(255,255,255,.72);border:1px dashed color-mix(in srgb,var(--card-accent) 55%,transparent);text-decoration:none;position:relative;z-index:10;transition:transform .2s,background .2s}
.wm b{color:var(--card-accent);font-weight:700}.wm:hover{transform:translateY(-1px);background:#fff}

/* --- Cápsula del tiempo y cerradura --- */
.sello-container.cand::after{content:'🔒';position:absolute;right:-8px;top:-8px;font-size:18px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.cap-box{background:#f1f5f9;border-radius:14px;padding:10px 4px}
.cap-box b{display:block;font:600 24px 'Outfit',sans-serif;color:#0f172a;font-variant-numeric:tabular-nums}
.cap-box span{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.06em}
.modal .btn:disabled{opacity:.5;cursor:not-allowed}
.pill.on{background:var(--gold-primary);color:#111;border-color:transparent}

/* --- Modo oficina: hoja de Excel de pantalla completa --- */
#xl{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;background:#fff;color:#201f1e;font:13px/1.2 'Segoe UI',Calibri,Arial,sans-serif}
#xl.on{display:flex}
.xl-title{background:#1d6f42;color:#fff;display:flex;align-items:center;gap:10px;padding:6px 12px}
.xl-logo{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:3px;background:#fff;color:#1d6f42;font-weight:800}
.xl-tabs{background:#1d6f42;color:#fff;display:flex;gap:2px;padding:0 8px;overflow-x:auto;white-space:nowrap}
.xl-tabs span{padding:7px 12px;opacity:.9}.xl-tabs .on{background:#f3f2f1;color:#1d6f42;border-radius:4px 4px 0 0;opacity:1}
.xl-ribbon{background:#f3f2f1;border-bottom:1px solid #d2d0ce;display:flex;gap:14px;align-items:center;padding:8px 12px;overflow-x:auto;white-space:nowrap}
.xl-ribbon b{font-weight:500}.xl-ribbon i{width:1px;height:20px;background:#c8c6c4}
.xl-fx{display:flex;align-items:center;border-bottom:1px solid #d2d0ce;background:#fff}
.xl-nb{width:70px;padding:5px 8px;border-right:1px solid #d2d0ce;font-weight:500}
.xl-f{padding:5px 10px;color:#1d6f42;font:italic 14px serif;border-right:1px solid #d2d0ce}
.xl-fv{padding:5px 10px}
.xl-grid{flex:1;overflow:auto;background:#fff}
.xl-grid table{border-collapse:collapse;min-width:100%}
.xl-grid th{background:#f3f2f1;color:#605e5c;font-weight:500;border:1px solid #d2d0ce;padding:3px 8px;position:sticky;top:0;z-index:1}
.xl-grid tbody th{position:sticky;left:0;top:auto;min-width:36px;text-align:center}
.xl-grid td{border:1px solid #e1dfdd;padding:3px 8px;min-width:96px;height:22px;white-space:nowrap}
.xl-grid td.n{text-align:right}.xl-grid td.h{font-weight:700;background:#e8f0e8}.xl-grid td.t{font-weight:700}.xl-grid td.w{color:#b45309}
.xl-sheets{background:#f3f2f1;border-top:1px solid #d2d0ce;display:flex;align-items:center;gap:4px;padding:4px 10px calc(4px + env(safe-area-inset-bottom,0px))}
.xl-sheets>*{padding:4px 14px;font-size:13px;border:0;background:transparent;color:#444;cursor:pointer}
.xl-sheets .on{background:#fff;color:#1d6f42;font-weight:600;border-bottom:2px solid #1d6f42}
.xl-sheets .xl-st{margin-left:auto;color:#605e5c;cursor:default;font-size:12px}

/* --- Agitar y soplar --- */
.fx-wobble{animation:fxw .7s ease-in-out}
@keyframes fxw{0%,100%{transform:rotate(0)}15%{transform:rotate(-4deg)}30%{transform:rotate(4deg)}45%{transform:rotate(-3deg)}60%{transform:rotate(3deg)}80%{transform:rotate(-1deg)}}
.fx-wind{animation:fxwind 1.6s ease-in-out}
@keyframes fxwind{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(10px) rotate(1.5deg)}50%{transform:translateX(-8px) rotate(-1.2deg)}75%{transform:translateX(5px) rotate(.8deg)}}
#vela{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,5,12,.66);pointer-events:none;transition:background .6s}
#vela.off{background:rgba(5,5,12,0)}
#vela p{margin-top:14px;text-align:center;padding:0 24px;font:600 12px 'Outfit',sans-serif;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.vela-fw{position:relative;width:26px;height:44px;transform-origin:bottom center;transform:rotate(calc(var(--lean,0) * -24deg));transition:transform .12s,opacity .35s,scale .35s;pointer-events:auto;cursor:pointer}
.vela-flame{width:100%;height:100%;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 50% 70%,#fff7c2 0,#ffd04a 40%,#ff8a1f 75%,transparent 100%);box-shadow:0 0 24px 8px rgba(255,170,40,.55);transform-origin:bottom center;animation:flame .18s ease-in-out infinite alternate}
@keyframes flame{from{transform:scale(1,1) skewX(-3deg)}to{transform:scale(.94,1.08) skewX(3deg)}}
.vela-wick{width:3px;height:9px;background:#2b2118;border-radius:2px;margin-top:-2px}
.vela-body{width:30px;height:64px;border-radius:6px 6px 8px 8px;background:linear-gradient(90deg,#f6e6c8,#fff7e6 45%,#e8d1a6);box-shadow:0 8px 20px rgba(0,0,0,.45)}
.vela-smoke{position:absolute;top:34px;width:14px;height:14px;border-radius:50%;background:rgba(220,220,230,.6);filter:blur(5px);opacity:0}
#vela.off .vela-fw{opacity:0;scale:.4;pointer-events:none}
#vela.off .vela-smoke{animation:smoke 1.8s ease-out forwards}
@keyframes smoke{0%{opacity:.8;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-70px) translateX(14px) scale(2.4)}}
@media (prefers-reduced-motion:reduce){.fx-wobble,.fx-wind,.vela-flame,#vela.off .vela-smoke{animation:none}}
.toast{z-index:320}


/* ===== v22 · CANDADO METÁLICO ===== */
.candado-zona{display:grid;place-items:center;width:100%}
.candado-zona>*{grid-area:1/1}              /* candado y mensaje comparten celda: sin saltos de layout */

.candado{
  position:relative;display:flex;flex-direction:column;align-items:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));
  transition:opacity .5s ease .6s,transform .5s ease .6s,visibility 0s linear 1.1s;
}
.candado:not(.candado-abierto):hover{transform:translateY(-2px)}
.candado:not(.candado-abierto):hover .candado-grillete{transform:translateY(-3px)}

/* grillete: arco de acero con degradado (borde con máscara) */
.candado-grillete{
  position:relative;width:66px;height:60px;margin-bottom:-14px;
  border:11px solid transparent;border-bottom:0;border-radius:36px 36px 0 0;
  background:linear-gradient(100deg,#6b7280 0%,#e5e7eb 28%,#f9fafb 40%,#9ca3af 62%,#4b5563 100%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transform-origin:11px 100%;
  transition:transform .25s ease;
}

/* cuerpo de bronce */
.candado-cuerpo{
  position:relative;z-index:1;width:112px;height:88px;overflow:hidden;
  border-radius:14px 14px 18px 18px;border:1px solid rgba(70,40,5,.6);
  background:linear-gradient(145deg,#f1d58a 0%,#cf9f3d 24%,#8f5f16 52%,#d8aa4a 76%,#7b5012 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -3px 6px rgba(60,35,5,.55),
    inset 2px 0 3px rgba(255,255,255,.25),
    inset -2px 0 3px rgba(0,0,0,.3);
}
/* variante acero: <div class="candado-cuerpo candado-acero"> */
.candado-acero{
  border-color:rgba(30,41,59,.6);
  background:linear-gradient(145deg,#f1f5f9 0%,#b6bec9 26%,#6b7480 54%,#c9d0d9 78%,#515a66 100%);
}
/* destello que cruza al pasar el dedo/cursor */
.candado-cuerpo::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .8s ease;pointer-events:none;
}
.candado:hover .candado-cuerpo::before{left:130%}

/* ojo de la cerradura */
.candado-ojo{
  position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-14px 0 0 -8px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#3a2a12,#0b0703);
  box-shadow:0 1px 0 rgba(255,255,255,.35),inset 0 1px 2px #000;
}
.candado-ojo::after{
  content:"";position:absolute;left:50%;top:9px;width:6px;height:18px;margin-left:-3px;
  background:#0b0703;border-radius:0 0 3px 3px;
}

/* clave incorrecta (opcional): agregar y quitar .candado-error */
.candado-error{animation:candado-sacudir .45s ease}
@keyframes candado-sacudir{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* mensaje oculto: aparece con fade-up cuando el candado está abierto */
.candado-msg{
  visibility:hidden;opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),visibility 0s linear .7s;
}

/* ===== ESTADO ABIERTO ===== */
.candado-abierto{pointer-events:none;opacity:0;transform:translateY(6px) scale(.94);visibility:hidden}
.candado-abierto .candado-grillete{animation:candado-abrir .8s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes candado-abrir{
  0%{transform:translateY(0) rotate(0)}
  45%{transform:translateY(-26px) rotate(0)}      /* se despega hacia arriba */
  100%{transform:translateY(-26px) rotate(-38deg)} /* y gira sobre su pata izquierda */
}
.candado-abierto~.candado-msg{
  visibility:visible;opacity:1;transform:none;pointer-events:auto;
  transition:opacity .7s ease .85s,transform .7s cubic-bezier(.2,.8,.2,1) .85s,visibility 0s linear .85s;
}

@media (prefers-reduced-motion:reduce){
  .candado,.candado-msg{transition-duration:.01s!important;transition-delay:0s!important}
  .candado-abierto .candado-grillete{animation-duration:.01s}
  .candado-error{animation:none}
}