/* Scrapbook de Eventos. Tipografía Geist / Geist Mono (la de la referencia de Laura), solo en lo nuevo. */
#scrapbook-section { margin: 2rem 0 1.4rem; scroll-margin-top: 90px; font-family: 'Geist', 'Inter', system-ui, sans-serif; }
.sb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sb-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-title { display: flex; align-items: center; gap: 8px; }
.sb-title h2 { margin: 0; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em; color: #fff; }
.sb-count { margin-top: 3px; font-family: 'Geist Mono', 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-muted, #a1a1aa); min-height: 1em; }
.sb-sub { margin: 6px 0 12px; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted, #a1a1aa); max-width: 60ch; }
.sb-btn { display: inline-block; padding: 9px 16px; border-radius: 10px; border: 1px solid rgba(139,92,246,0.55); background: rgba(139,92,246,0.16); color: #c4b5fd; font-family: 'Geist Mono', 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.sb-btn:hover { background: rgba(139,92,246,0.28); }
.sb-btn:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
.sb-btn--sec { background: transparent; border-color: rgba(255,255,255,0.2); color: var(--text-muted, #a1a1aa); }
.sb-btn--sec:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sb-btn--chico { padding: 5px 10px; font-size: 0.66rem; }

/* La tarjeta: fondo punteado que se desvanece hacia los bordes, como en la referencia */
.sb-area { position: relative; min-height: 200px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background-color: #0c0c10; overflow: hidden; touch-action: pan-y; }
.sb-area::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 100%); }
.sb-estado { margin-top: 10px; font-size: 0.78rem; color: var(--text-muted, #a1a1aa); text-align: center; min-height: 1em; }

/* El sticker: contenedor con el tamaño de SU forma (lo pone el JS). Imagen del evento (o uno generado) con borde blanco, sombra, brillo e
   inclinación propia. */
.sb-sticker { position: absolute; transform: rotate(var(--r, 0deg)); transform-origin: 50% 60%; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55)); transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), filter 0.18s; animation: sb-entra 0.5s cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.sb-sticker:hover { transform: rotate(var(--r, 0deg)) scale(1.07); z-index: 5; }
.sb-sticker:focus-within { z-index: 5; }
.sb-sticker--arrastrando { cursor: grabbing; transform: rotate(var(--r, 0deg)) scale(1.12); transition: none; filter: drop-shadow(0 16px 22px rgba(0,0,0,0.65)); }
@keyframes sb-entra { from { opacity: 0; transform: translateY(10px) scale(0.9) rotate(var(--r, 0deg)); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }
.sb-enlace { position: absolute; inset: 0; display: block; text-decoration: none; border-radius: inherit; }
.sb-enlace:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 4px; }

/* El borde blanco es la capa de afuera (.sb-cara) y el contenido la de adentro (.sb-int), con la MISMA forma */
.sb-cara { position: absolute; inset: 0; display: block; background: #fff; box-sizing: border-box; }
.sb-int { position: absolute; inset: 5px; display: block; overflow: hidden; background: #1f1f23; }
.sb-int img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sb-int--generada { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; box-sizing: border-box;
  background: linear-gradient(145deg, hsl(var(--hue, 260) 70% 58%), hsl(calc(var(--hue, 260) + 40) 75% 38%)); color: #fff; }
.sb-emoji { font-size: 1.9rem; line-height: 1; }
.sb-nombre { font-size: 0.68rem; font-weight: 650; line-height: 1.15; letter-spacing: -0.01em; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.sb-brillo { position: absolute; inset: 5px; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 38%); mix-blend-mode: screen; border-radius: inherit; }

/* Las formas (Laura, 2026-10-05: que no sean todos cuadrados iguales). Los tamaños salen de FORMAS en lib/scrapbook.js. */
.sb-f-cuadrado .sb-cara { border-radius: 24px; }          .sb-f-cuadrado .sb-int, .sb-f-cuadrado .sb-brillo { border-radius: 19px; }
.sb-f-circulo .sb-cara, .sb-f-circulo .sb-int, .sb-f-circulo .sb-brillo { border-radius: 50%; }
.sb-f-pildora .sb-cara, .sb-f-pildora .sb-int, .sb-f-pildora .sb-brillo { border-radius: 999px; }
.sb-f-vertical .sb-cara { border-radius: 30px; }          .sb-f-vertical .sb-int, .sb-f-vertical .sb-brillo { border-radius: 25px; }
.sb-f-blob .sb-cara, .sb-f-blob .sb-int, .sb-f-blob .sb-brillo { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; }
.sb-f-hexagono .sb-cara, .sb-f-hexagono .sb-int, .sb-f-hexagono .sb-brillo { border-radius: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.sb-f-pildora .sb-int--generada, .sb-f-hexagono .sb-int--generada { padding: 6px 14px; }
.sb-f-pildora .sb-emoji { font-size: 1.4rem; }

/* Los trending a los que no fuiste: se distinguen sin esconderse (borde punteado o translúcido, un poco apagados y con una llama) */
.sb-sticker--trending:not(.sb-f-hexagono) .sb-cara { background: transparent; border: 5px dashed rgba(255,255,255,0.8); }
.sb-sticker--trending:not(.sb-f-hexagono) .sb-int { inset: 0; }
.sb-sticker--trending:not(.sb-f-hexagono) .sb-brillo { inset: 0; }
.sb-sticker--trending.sb-f-hexagono .sb-cara { background: rgba(255,255,255,0.7); }
.sb-sticker--trending .sb-int img { filter: saturate(0.55) brightness(0.9); }
.sb-sticker--trending:hover .sb-int img { filter: none; }
.sb-sticker--trending .sb-int--generada { filter: saturate(0.6); }
.sb-llama { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; border-radius: 50%; background: #18181b; border: 2px solid #fb923c; z-index: 3; box-shadow: 0 2px 8px rgba(251,146,60,0.4); pointer-events: none; }

.sb-etiqueta { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%) rotate(calc(var(--r, 0deg) * -1)); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; padding: 3px 9px; border-radius: 8px; background: rgba(15,15,20,0.95); border: 1px solid rgba(255,255,255,0.14); color: #e4e4e7; font-family: 'Geist Mono', 'JetBrains Mono', monospace; font-size: 0.62rem; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 6; }
.sb-sticker:hover .sb-etiqueta, .sb-sticker:focus-within .sb-etiqueta { opacity: 1; }

/* Quitar: la ✕ aparece al pasar el mouse o enfocar el sticker, y siempre en el "modo quitar" (para el dedo, que no tiene hover) */
.sb-x { position: absolute; top: -9px; left: -9px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(255,255,255,0.9); background: #be123c; color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; z-index: 4; opacity: 0; transform: scale(0.8); transition: opacity 0.15s, transform 0.15s; }
.sb-sticker:hover .sb-x, .sb-sticker:focus-within .sb-x, .sb-x:focus-visible, .sb-area--quitar .sb-x { opacity: 1; transform: none; }
.sb-x:hover { background: #e11d48; }
.sb-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sb-area--quitar .sb-sticker { cursor: default; animation: none; }
.sb-area--quitar .sb-enlace { pointer-events: none; }
@media (hover: none) { .sb-x { width: 32px; height: 32px; top: -11px; left: -11px; } }

@media (max-width: 600px) { .sb-btn { text-align: center; } .sb-acciones { width: 100%; } .sb-acciones .sb-btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .sb-sticker { animation: none; transition: none; } .sb-x { transition: none; } }

/* Elegir la forma (◇): mismo trato que la ✕ de quitar, del lado derecho. Solo con sesión. */
.sb-forma { position: absolute; top: -9px; right: -9px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(255,255,255,0.9);
  background: #7c3aed; color: #fff; font-size: 0.9rem; line-height: 1; padding: 0; cursor: pointer; z-index: 6; opacity: 0; transform: scale(0.8); transition: opacity 0.15s, transform 0.15s, background 0.15s; }
.sb-sticker:hover .sb-forma, .sb-sticker:focus-within .sb-forma, .sb-forma:focus-visible { opacity: 1; transform: none; }
.sb-forma:hover { background: #6d28d9; }
.sb-forma:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sb-area--quitar .sb-forma { display: none; }
@media (hover: none) { .sb-forma { opacity: 1; transform: none; width: 32px; height: 32px; top: -11px; right: -11px; } }
/* Al acomodar, los stickers no vuelven a "entrar" todos juntos: la animación de entrada es solo de la primera carga. */
.sb-area--quieta .sb-sticker { animation: none; }

/* Sticker recortado: sin marco ni fondo; el borde blanco ya viene dibujado siguiendo el contorno de la imagen (lib/contorno.js). */
.sb-f-contorno .sb-cara { background: transparent; border-radius: 0; }
.sb-f-contorno .sb-int { inset: 0; background: none; border-radius: 0; overflow: visible; }
.sb-f-contorno .sb-int img { object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45)); }
.sb-f-contorno .sb-brillo { display: none; }
.sb-sticker.sb-f-contorno .sb-cara { border: 0 !important; background: transparent !important; }