/* Muro de la comunidad (Descubrir). Lienzo con scroll nativo; las notas van "pegadas" con una leve inclinacion. */
#muro-section { margin: 2.2rem 0 1.6rem; scroll-margin-top: 90px; font-family: 'Geist', 'Inter', system-ui, sans-serif; }
.muro-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.muro-title { display: flex; align-items: center; gap: 8px; }
.muro-title h2 { margin: 0; font-size: 1.15rem; font-weight: 650; color: #fff; letter-spacing: -0.02em; }
.muro-count { margin-top: 3px; font-family: 'Geist Mono', 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-muted, #a1a1aa); min-height: 1em; }
.muro-sub { margin: 6px 0 12px; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted, #a1a1aa); }
.muro-btn { 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; white-space: nowrap; }
.muro-btn:hover { background: rgba(139,92,246,0.28); }
.muro-btn:focus-visible, .muro-link:focus-visible, .muro-nombre:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
.muro-btn:disabled { opacity: 0.6; cursor: default; }
.muro-btn--sec { background: transparent; border-color: rgba(255,255,255,0.18); color: var(--text-muted, #a1a1aa); }
.muro-btn--chico { padding: 5px 10px; font-size: 0.66rem; }

.muro-viewport { position: relative; height: 440px; overflow: auto; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
  background-color: #0c0c10; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 22px 22px;
  cursor: grab; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: auto; }
.muro-viewport::-webkit-scrollbar { display: none; }
.muro-viewport--arrastrando { cursor: grabbing; user-select: none; }
.muro-viewport--vacio { cursor: default; height: 160px; }
.muro-viewport:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
.muro-canvas { position: relative; }

.muro-nota { position: absolute; width: 230px; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; background: #18181b; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35); font-family: 'Geist', 'Inter', sans-serif; transition: border-color 0.15s, box-shadow 0.15s; }
.muro-nota:hover { border-color: rgba(139,92,246,0.5); box-shadow: 0 10px 26px rgba(0,0,0,0.5); z-index: 2; }
.muro-nota--mia { border-color: rgba(34,211,238,0.55); box-shadow: 0 6px 20px rgba(34,211,238,0.12); }
.muro-nota--nueva { animation: muro-nueva 1.1s ease-out 2; }
@keyframes muro-nueva { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); } 50% { box-shadow: 0 0 0 6px rgba(34,211,238,0.35); } }
.muro-nota-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; min-width: 0; }
.muro-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #27272a; }
.muro-nombre { font-size: 0.82rem; font-weight: 650; letter-spacing: -0.01em; color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.muro-nombre:hover { color: #c4b5fd; }
.muro-texto { margin: 0; font-size: 0.84rem; line-height: 1.45; color: #d4d4d8; word-break: break-word; overflow-wrap: anywhere; max-height: 7.2em; overflow: hidden; }
.muro-nota-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 0.62rem; color: #a1a1aa; font-family: 'Geist Mono', 'JetBrains Mono', monospace; }
.muro-link { background: none; border: none; padding: 0; color: #a1a1aa; font: inherit; cursor: pointer; text-decoration: underline; }
.muro-link:hover { color: #f87171; }
.muro-estado { margin-top: 10px; font-size: 0.74rem; color: var(--text-muted, #a1a1aa); text-align: center; min-height: 1em; }

.muro-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.muro-form { width: 100%; max-width: 440px; background: #18181b; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.muro-form-titulo { margin: 0; font-family: 'Geist', 'Inter', sans-serif; font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; color: #fff; }
.muro-textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.16); background: #0c0c10; color: #fff; font-family: 'Geist', 'Inter', sans-serif; font-size: 16px; line-height: 1.45; }
.muro-textarea:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.2); }
.muro-form-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 0.66rem; color: #a1a1aa; }
.muro-form-msg { font-size: 0.74rem; color: #fca5a5; min-height: 1em; }
.muro-form-msg a { color: #67e8f9; }
.muro-form-acciones { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 600px) { .muro-viewport { height: 380px; } .muro-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .muro-nota, .muro-nota--nueva { transition: none; animation: none; } }