/* =====================================================================
   PICA JUMP · Alertas del lobby / mensajes a usuarios / récord semanal
   ===================================================================== */
@font-face {
    font-family: 'CatComic';
    src: url('../../fonts/CatComic.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

@property --pa-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- Capa y temas ---------- */
.pa-overlay {
    --pa-u: clamp(0.7px, min(100vw / 390, 100dvh / 660), 2.4px);
    --a1: #ffb02e; --a2: #f0390f;
    --bg1: #5a1a0a; --bg2: #240804;
    --glow: rgba(255, 110, 20, .6); --soft: #ffd9b3;

    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: max(env(safe-area-inset-top), 16px) 16px max(env(safe-area-inset-bottom), 16px);
    box-sizing: border-box;
    background: radial-gradient(ellipse at 50% 45%, rgba(25, 8, 3, .62), rgba(8, 3, 1, .92));
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .28s ease;
    font-family: 'Montserrat', system-ui, sans-serif;
    overflow: hidden;
}
.pa-overlay.pa-in  { opacity: 1; }
.pa-overlay.pa-out { opacity: 0; }

.pa-overlay[data-tema="hielo"]  { --a1: #7dd3fc; --a2: #2563eb; --bg1: #12386b; --bg2: #071630; --glow: rgba(56, 189, 248, .55); --soft: #d4efff; }
.pa-overlay[data-tema="bosque"] { --a1: #86efac; --a2: #16a34a; --bg1: #14532d; --bg2: #06210f; --glow: rgba(74, 222, 128, .5);  --soft: #d6f7df; }
.pa-overlay[data-tema="noche"]  { --a1: #f9a8d4; --a2: #7c3aed; --bg1: #3b1a73; --bg2: #150a30; --glow: rgba(192, 132, 252, .55); --soft: #f1defc; }

/* ---------- Brasas que suben ---------- */
.pa-brasas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pa-brasa {
    position: absolute; bottom: -24px; left: var(--x);
    width: var(--s); height: var(--s); border-radius: 50%;
    background: radial-gradient(circle, #fff7cf 0%, var(--a1) 45%, transparent 72%);
    opacity: 0;
    animation: pa-sube var(--d) linear var(--delay) infinite;
}
@keyframes pa-sube {
    0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
    12%  { opacity: .95; }
    100% { transform: translate(var(--dx), -108dvh) scale(1.1); opacity: 0; }
}

/* ---------- Contenedor y entrada ---------- */
.pa-wrap {
    position: relative; z-index: 1;
    width: min(calc(330 * var(--pa-u)), 100%);
    max-height: 100%;
    display: flex; flex-direction: column; align-items: center;
    padding-top: calc(46 * var(--pa-u));
}
.pa-in .pa-wrap { animation: pa-entra .62s cubic-bezier(.2, 1.25, .4, 1) both; }
@keyframes pa-entra {
    0%   { transform: translateY(46px) scale(.55) rotate(-5deg); opacity: 0; }
    55%  { opacity: 1; }
    100% { transform: none; opacity: 1; }
}

/* ---------- Tarjeta ---------- */
.pa-card {
    position: relative; isolation: isolate; width: 100%; box-sizing: border-box;
    padding: calc(22 * var(--pa-u)) calc(22 * var(--pa-u)) calc(20 * var(--pa-u));
    border-radius: calc(26 * var(--pa-u));
    background: radial-gradient(120% 75% at 50% 0%, var(--bg1), var(--bg2));
    color: #fff; text-align: center;
    box-shadow:
        0 0 calc(64 * var(--pa-u)) var(--glow),
        0 calc(24 * var(--pa-u)) calc(50 * var(--pa-u)) rgba(0, 0, 0, .55),
        inset 0 0 0 calc(1.5 * var(--pa-u)) rgba(255, 255, 255, .07);
}
/* Borde de fuego que gira */
.pa-card::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    inset: calc(-3.5 * var(--pa-u)); padding: calc(3.5 * var(--pa-u));
    border-radius: calc(29 * var(--pa-u));
    background: conic-gradient(from var(--pa-ang), var(--a1), transparent 22%, var(--a2) 50%, transparent 74%, var(--a1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: pa-gira 4.5s linear infinite;
}
@keyframes pa-gira { to { --pa-ang: 360deg; } }

/* Foto "sticker" que sobresale por arriba */
.pa-foto {
    position: relative; width: 86%;
    margin: calc(-68 * var(--pa-u)) auto calc(14 * var(--pa-u));
    --r: -2.5deg; transform: rotate(var(--r));
    animation: pa-flota 4s ease-in-out infinite;
}
.pa-foto img {
    display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: calc(18 * var(--pa-u));
    border: calc(4 * var(--pa-u)) solid #fff;
    box-shadow: 0 calc(10 * var(--pa-u)) calc(24 * var(--pa-u)) rgba(0, 0, 0, .5);
    background: #1b0a05;
}
/* Sin foto: medallón con la llama */
.pa-medalla {
    position: relative; width: calc(88 * var(--pa-u)); height: calc(88 * var(--pa-u));
    margin: calc(-66 * var(--pa-u)) auto calc(12 * var(--pa-u));
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--a1), var(--a2));
    border: calc(4 * var(--pa-u)) solid #fff;
    box-shadow: 0 calc(8 * var(--pa-u)) calc(22 * var(--pa-u)) rgba(0, 0, 0, .5), 0 0 calc(30 * var(--pa-u)) var(--glow);
    display: flex; align-items: center; justify-content: center;
    animation: pa-flota 3.6s ease-in-out infinite;
}
.pa-medalla svg { width: 56%; height: 56%; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
@keyframes pa-flota {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(calc(-5 * var(--pa-u))) rotate(calc(var(--r, 0deg) + 1deg)); }
}

/* Etiqueta (cinta) */
.pa-etiqueta {
    position: absolute; z-index: 3;
    padding: calc(4 * var(--pa-u)) calc(14 * var(--pa-u));
    border-radius: calc(7 * var(--pa-u));
    background: linear-gradient(180deg, #ffe45c, #ffb300);
    color: #5a1a00; font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: 800;
    font-size: calc(14 * var(--pa-u)); letter-spacing: calc(.8 * var(--pa-u)); text-transform: uppercase;
    transform: rotate(-6deg);
    box-shadow: 0 calc(3 * var(--pa-u)) 0 rgba(0, 0, 0, .35);
    white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis;
}
.pa-foto  .pa-etiqueta { bottom: calc(12 * var(--pa-u)); left: calc(-16 * var(--pa-u)); }
.pa-card > .pa-etiqueta { top: calc(16 * var(--pa-u)); left: calc(-14 * var(--pa-u)); }

/* Texto */
.pa-titulo {
    margin: 0 0 calc(8 * var(--pa-u));
    font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: 800;
    font-size: calc(30 * var(--pa-u)); line-height: 1.04; letter-spacing: calc(1 * var(--pa-u));
    text-transform: uppercase; color: #fff; overflow-wrap: anywhere;
    text-shadow: 0 calc(3 * var(--pa-u)) 0 var(--a2), 0 calc(7 * var(--pa-u)) calc(16 * var(--pa-u)) var(--glow);
}
.pa-texto {
    margin: 0 0 calc(16 * var(--pa-u));
    font-size: calc(14.5 * var(--pa-u)); line-height: 1.45; font-weight: 600; color: var(--soft);
    white-space: pre-line; overflow-wrap: anywhere;
    max-height: 30dvh; overflow-y: auto;
}
.pa-card > :last-child { margin-bottom: 0; }

/* Botones */
.pa-acciones { display: flex; flex-direction: column; align-items: center; width: 100%; }
.pa-btn {
    position: relative; overflow: hidden; width: 100%; border: 0; cursor: pointer;
    padding: calc(13 * var(--pa-u)) calc(18 * var(--pa-u));
    border-radius: calc(16 * var(--pa-u));
    font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: 800;
    font-size: calc(22 * var(--pa-u)); letter-spacing: calc(1.2 * var(--pa-u)); text-transform: uppercase;
    color: #fff; background: linear-gradient(135deg, var(--a2), var(--a1));
    box-shadow: 0 calc(5 * var(--pa-u)) 0 rgba(0, 0, 0, .38), 0 calc(8 * var(--pa-u)) calc(22 * var(--pa-u)) var(--glow);
    text-shadow: 0 calc(2 * var(--pa-u)) 0 rgba(0, 0, 0, .25);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pa-btn::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg); animation: pa-brillo 3.2s ease-in-out 1s infinite; pointer-events: none;
}
@keyframes pa-brillo { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.pa-btn:active { transform: translateY(calc(4 * var(--pa-u))); box-shadow: 0 calc(1 * var(--pa-u)) 0 rgba(0, 0, 0, .38); }
.pa-link {
    margin-top: calc(8 * var(--pa-u)); padding: calc(6 * var(--pa-u)) calc(10 * var(--pa-u));
    background: none; border: 0; cursor: pointer;
    font: 700 calc(12.5 * var(--pa-u)) 'Montserrat', sans-serif; color: var(--soft); opacity: .8;
    text-decoration: underline; text-underline-offset: 3px;
}

/* Cerrar */
.pa-x {
    position: absolute; z-index: 5; top: calc(8 * var(--pa-u)); right: calc(-6 * var(--pa-u));
    width: calc(36 * var(--pa-u)); height: calc(36 * var(--pa-u)); padding: 0;
    border-radius: 50%; border: calc(2.5 * var(--pa-u)) solid #fff; cursor: pointer;
    background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff;
    font: 800 calc(15 * var(--pa-u)) / 1 'Montserrat', sans-serif;
    box-shadow: 0 calc(4 * var(--pa-u)) calc(10 * var(--pa-u)) rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.pa-x:active { transform: scale(.9); }
.pa-x-fijo { position: absolute; top: max(env(safe-area-inset-top), 14px); right: 16px; }

/* Puntos de paginación */
.pa-puntos { display: flex; gap: calc(6 * var(--pa-u)); justify-content: center; margin-top: calc(14 * var(--pa-u)); }
.pa-punto { width: calc(7 * var(--pa-u)); height: calc(7 * var(--pa-u)); border-radius: 99px; background: rgba(255, 255, 255, .28); transition: width .25s; }
.pa-punto.on { width: calc(22 * var(--pa-u)); background: linear-gradient(90deg, var(--a2), var(--a1)); }

/* ---------- Alerta ya diseñada (PNG tal cual) ---------- */
.pa-wrap.pa-diseno { width: auto; max-width: 100%; padding-top: 0; }
.pa-diseno-img {
    display: block; width: auto; height: auto;
    max-width: min(94vw, calc(540 * var(--pa-u))); max-height: 66dvh; object-fit: contain;
    filter: drop-shadow(0 calc(14 * var(--pa-u)) calc(26 * var(--pa-u)) rgba(0, 0, 0, .55));
    animation: pa-flota 3.8s ease-in-out infinite;
}
.pa-diseno-img.pa-click { cursor: pointer; }
.pa-diseno-pie { display: flex; flex-direction: column; align-items: center; width: min(calc(270 * var(--pa-u)), 80vw); margin-top: calc(14 * var(--pa-u)); }
.pa-diseno-pie .pa-puntos { margin-top: calc(10 * var(--pa-u)); }
.pa-diseno-pie .pa-link { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .pa-overlay, .pa-overlay *, .pa-overlay *::before, .pa-overlay *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   TEMAS FESTIVOS Y ESTILO "CARTA" (mensajes personales)
   Los colores de cada tema se aplican desde alertas.js (catálogo TEMAS).
   ===================================================================== */

/* Emojis que suben o caen (temas festivos) */
.pa-emo {
    position: absolute; left: var(--x); top: 0;
    font-size: calc(var(--s) * var(--pa-u)); line-height: 1;
    opacity: 0; will-change: transform;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
    animation: pa-cae var(--d) linear var(--delay) infinite;
}
.pa-emo.sube { top: auto; bottom: -30px; animation-name: pa-sube-emo; }
@keyframes pa-cae {
    0%   { transform: translate(0, -8dvh) rotate(0deg); opacity: 0; }
    10%  { opacity: .95; }
    100% { transform: translate(var(--dx), 108dvh) rotate(var(--rot)); opacity: .85; }
}
@keyframes pa-sube-emo {
    0%   { transform: translate(0, 0) rotate(-10deg) scale(.7); opacity: 0; }
    12%  { opacity: .95; }
    100% { transform: translate(var(--dx), -108dvh) rotate(var(--rot)) scale(1.1); opacity: 0; }
}
.pa-medalla .pa-ico { font-size: calc(42 * var(--pa-u)); line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }

/* Bordes giratorios multicolor */
.pa-overlay[data-tema="cumple"] .pa-card::before   { background: conic-gradient(from var(--pa-ang), #ff5ca8, #ffd34d, #4ade80, #38bdf8, #a78bfa, #ff5ca8); }
.pa-overlay[data-tema="carnaval"] .pa-card::before { background: conic-gradient(from var(--pa-ang), #ffe45c, #ec4899, #22d3ee, #a3e635, #8b5cf6, #ffe45c); }
.pa-overlay[data-tema="patria"] .pa-card::before   { background: conic-gradient(from var(--pa-ang), #ffd93d 0 33%, #2563eb 33% 66%, #dc2626 66% 100%); }
.pa-overlay[data-tema="navidad"] .pa-card::before  { background: conic-gradient(from var(--pa-ang), #dc2626, #fde68a 20%, #16a34a 50%, #fde68a 75%, #dc2626); }
.pa-overlay[data-tema="halloween"] .pa-card::before{ background: conic-gradient(from var(--pa-ang), #ff9a1f, transparent 25%, #7c2dd6 50%, transparent 75%, #ff9a1f); }

/* Temas con fondo de tarjeta especial */
.pa-overlay[data-tema="patria"] .pa-card  { background: linear-gradient(180deg, #0f2f7a 0%, #0f2f7a 62%, #7a1010 100%); }
.pa-overlay[data-tema="navidad"] .pa-card { background: radial-gradient(120% 75% at 50% 0%, #166534, #14301c 55%, #5c1010); }
.pa-overlay[data-tema="neon"] .pa-card    { box-shadow: 0 0 calc(40 * var(--pa-u)) var(--a1), 0 0 calc(90 * var(--pa-u)) var(--a2), inset 0 0 0 calc(1.5 * var(--pa-u)) rgba(255, 255, 255, .15); }
.pa-overlay[data-tema="oro"] .pa-titulo   { color: #fff6c8; }

/* ---------- CARTA: mensaje personal (sobre con sello) ---------- */
.pa-overlay[data-estilo="carta"] .pa-card {
    background: linear-gradient(180deg, #fffdf6, #fbf1de);
    border-radius: calc(14 * var(--pa-u));
    padding-top: calc(16 * var(--pa-u));
    box-shadow: 0 calc(22 * var(--pa-u)) calc(46 * var(--pa-u)) rgba(0, 0, 0, .5), 0 0 calc(40 * var(--pa-u)) var(--glow);
}
.pa-overlay[data-estilo="carta"] .pa-card::before {
    /* marco de sello postal, sin giro de fuego */
    inset: calc(7 * var(--pa-u)); padding: 0; border-radius: calc(9 * var(--pa-u));
    background: none; -webkit-mask: none; mask: none; animation: none;
    border: calc(2 * var(--pa-u)) dashed var(--a2); opacity: .45;
}
/* solapa del sobre */
.pa-overlay[data-estilo="carta"] .pa-card.pa-sinfoto::after {
    content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: calc(82 * var(--pa-u));
    background: linear-gradient(135deg, var(--a2), var(--a1));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    border-radius: calc(14 * var(--pa-u)) calc(14 * var(--pa-u)) 0 0;
}
/* sello de lacre */
.pa-overlay[data-estilo="carta"] .pa-medalla {
    width: calc(62 * var(--pa-u)); height: calc(62 * var(--pa-u));
    margin: calc(2 * var(--pa-u)) auto calc(26 * var(--pa-u));
    border: calc(3 * var(--pa-u)) solid rgba(255, 255, 255, .85);
    background: radial-gradient(circle at 35% 30%, var(--a1), var(--a2) 70%, #000 160%);
    box-shadow: 0 calc(5 * var(--pa-u)) calc(12 * var(--pa-u)) rgba(0, 0, 0, .4), inset 0 calc(-4 * var(--pa-u)) calc(8 * var(--pa-u)) rgba(0, 0, 0, .3);
}
.pa-overlay[data-estilo="carta"] .pa-medalla .pa-ico { font-size: calc(28 * var(--pa-u)); }
.pa-overlay[data-estilo="carta"] .pa-titulo {
    color: #3b1d0e; text-shadow: 0 calc(2 * var(--pa-u)) 0 var(--a1);
    font-size: calc(26 * var(--pa-u));
}
.pa-overlay[data-estilo="carta"] .pa-texto { color: #5b4636; font-weight: 600; font-size: calc(15 * var(--pa-u)); }
.pa-overlay[data-estilo="carta"] .pa-link  { color: #7a5a3a; }
.pa-overlay[data-estilo="carta"] .pa-punto { background: rgba(60, 30, 10, .2); }
.pa-overlay[data-estilo="carta"] .pa-punto.on { background: linear-gradient(90deg, var(--a2), var(--a1)); }
.pa-overlay[data-estilo="carta"] .pa-etiqueta { top: calc(10 * var(--pa-u)); left: calc(-12 * var(--pa-u)); }

/* Selector de temas del panel admin */
.tema-sw i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; line-height: 1; flex-shrink: 0; }
.tema-sep { flex-basis: 100%; margin: 4px 0 0; font-size: 10px; font-weight: 800; color: var(--text-muted, #a8a29e); }

/* =====================================================================
   RÉCORD SEMANAL (tabla de posiciones y perfil)
   ===================================================================== */
.pos-cierre {
    margin: 4px 0 0; text-align: center; font-size: 11px; font-weight: 800; color: #c2410c;
}
.hs-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 12px; margin-bottom: 6px;
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
    font-size: 12px; font-weight: 700;
}
.hs-item small { display: block; font-size: 10px; font-weight: 600; opacity: .75; }
.hs-item b { font-family: 'CatComic', sans-serif; font-size: 18px; font-weight: normal; color: #EA5804; white-space: nowrap; }
.hs-item.actual { background: linear-gradient(135deg, #ea5804, #f97316); border-color: transparent; color: #fff; }
.hs-item.actual b { color: #fff; }
.hs-vacio { text-align: center; font-size: 12px; color: #a8a29e; font-weight: 600; padding: 8px 0; }