/* 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}