/* Pagina publica del organizador /o/{slug} (lienzo F9Xpb7ps6Jfe9JqW1WYxz2, "A centrada", 2026-11-07). Portada en el ancho del
   encabezado (--page-max) con esquinas redondeadas, todo centrado, y sus eventos con la tarjeta y las pestañas de /events. */
.op-page { max-width: var(--page-max); margin: 0 auto; padding: 28px var(--page-gutter) 72px; box-sizing: border-box; }
.op-cover { height: 280px; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-dark); }
.op-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin portada: franja lavanda, como la opcion B del lienzo. */
.op-cover--plain { height: 150px; background: var(--surface); }

.op-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-top: -64px; padding: 0 28px; }
.op-avatar {
    position: relative; width: 128px; height: 128px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    border: 5px solid var(--bg-page); background: var(--bg-dark); color: var(--text-on-dark);
    display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 800;
}
.op-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-name { margin: 6px 0 0; font-family: var(--font-serif); font-size: 36px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); overflow-wrap: anywhere; }
.op-meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 14px; color: var(--text-secondary); }
.op-desc {
    max-width: 620px; margin-top: 6px; font-size: 16px; line-height: 1.65; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.op-desc.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.op-desc p { margin: 0 0 12px; }
.op-desc p:last-child { margin-bottom: 0; }
.op-desc ul, .op-desc ol { margin: 0 0 12px; padding-left: 22px; text-align: left; }
.op-desc a { color: var(--accent-text); }
.op-desc strong { color: var(--text-primary); }
.op-more { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: underline; cursor: pointer; }
.op-more[hidden] { display: none; }
.op-actions { display: flex; gap: 10px; margin-top: 6px; }
.op-btn { font-size: 15px; }
.op-btn--light { background: var(--bg-card); }

.op-events { display: flex; flex-direction: column; gap: 20px; margin-top: 44px; }
.op-pane[hidden] { display: none; }
.op-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.op-empty {
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 16px;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); text-align: center; color: var(--text-secondary);
}
.op-empty i { font-size: 28px; }
.op-empty__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.op-empty__text { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.55; }

@media (max-width: 640px) {
    .op-page { padding: 0 0 48px; }
    .op-cover { height: 170px; border-radius: 0; }
    .op-cover--plain { height: 110px; }
    .op-head { margin-top: -48px; padding: 0 16px; gap: 10px; }
    .op-avatar { width: 96px; height: 96px; border-width: 4px; font-size: 36px; }
    .op-name { font-size: 28px; }
    .op-desc { font-size: 15px; }
    .op-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .op-events { margin-top: 32px; padding: 0 16px; }
}