/* The Manifest Game — club.monicaalba.mx
 * Paleta unificada con monicaalba.mx (Polo, 2026-09-09): beige · tinta · dorado,
 * Playfair Display para títulos y Montserrat para la interfaz. La barra superior
 * es beige siempre (regla de marca: navbar beige, logos sin alterar).
 * Claro por defecto; html.dark conmuta al negro del sitio. */
:root {
  --beige: #F4EFE7; --beige-d: #EDE5D8; --beige-dd: #E3D9C9; --blanco: #FDFAF6;
  --tinta: #2E1A17; --dorado: #B8943F; --dorado-cl: #D4AF55; --dorado-os: #8A6E2A; --negro: #050505; --rojo: #8B0000;
  --c-fondo: var(--beige);   --c-card: var(--blanco);   --c-card2: var(--beige-d);
  --c-texto: var(--tinta);   --c-texto2: #6F5F52;       --c-off: #A0927F;
  --c-borde: var(--beige-dd); --c-borde2: #CDBFA9;      --c-resalte: #F8F1E1;
  --c-boton: var(--dorado);  --c-boton-txt: #FFFFFF;    --c-enlace: var(--dorado-os);
  --c-menu-activo: var(--tinta); --c-menu-activo-txt: #F7E7B0; --c-menu-hover: var(--beige-d);
  --c-espacio-activo: var(--dorado); --c-espacio-activo-txt: #FFFFFF;
  --c-topbar: var(--beige);  --c-sidebar: var(--blanco);
  --sidebar-w: 280px; --derecha-w: 300px; --topbar-h: 64px;
  --fuente: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-titulo: "Playfair Display", Georgia, serif;
}
html.dark {
  --c-fondo: var(--negro);   --c-card: #0D0D0D;         --c-card2: #1C1813;
  --c-texto: #F4EFE6;        --c-texto2: #B3A797;       --c-off: #7D7264;
  --c-borde: #2A2217;        --c-borde2: #4A3D28;       --c-resalte: #1A150E;
  --c-boton: var(--dorado);  --c-boton-txt: var(--negro); --c-enlace: var(--dorado-cl);
  --c-menu-activo: var(--tinta); --c-menu-activo-txt: #F7E7B0; --c-menu-hover: var(--beige-dd);
  --c-espacio-activo: var(--dorado); --c-espacio-activo-txt: var(--negro);
  --c-topbar: var(--beige);  --c-sidebar: #0D0D0D;
}
html, body.club { background: var(--c-fondo); color: var(--c-texto); font-family: var(--fuente); font-size: 15px; }
body.club a { color: inherit; }
.club-post-cuerpo a, .club-descripcion a, .club-comentario a, .club-post-meta a:hover, .club-actividad small { color: var(--c-enlace); }
.club-h2, .club-post-titulo, .club-leccion-titulo, .auth-titulo, .club-discusion h3, .auth-banner h1 { font-family: var(--fuente-titulo); }

/* Topbar */
.club-topbar { position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); background: var(--c-topbar); border-bottom: 1px solid var(--c-borde); display: flex; align-items: center; padding: 0 20px; gap: 12px; z-index: 50; }
.club-brand img { height: 48px; width: auto; }
.club-burger { display: none; background: none; border: 0; font-size: 26px; color: var(--tinta); }
.club-menu { display: flex; gap: 6px; margin: 0 auto; }
.club-menu a { display: flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.club-menu a:hover { background: var(--c-menu-hover); }
.club-menu a.activo { background: var(--c-menu-activo); color: var(--c-menu-activo-txt); }
.club-acciones { display: flex; align-items: center; gap: 4px; }
.club-icono { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--tinta); background: none; border: 0; font-size: 19px; text-decoration: none; }
.club-icono:hover { background: var(--beige-dd); color: var(--tinta); }
.club-avatar-btn { background: none; border: 0; padding: 0; margin-left: 6px; }
.club-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-card2); color: var(--c-texto2); font-weight: 600; object-fit: cover; flex: 0 0 auto; }
.dropdown-menu { background: var(--c-card); border-color: var(--c-borde); }
.dropdown-item, .dropdown-header { color: var(--c-texto); } .dropdown-item:hover { background: var(--c-menu-hover); color: var(--c-texto); }

/* Cuerpo: sidebar + main */
.club-cuerpo { display: flex; padding-top: var(--topbar-h); min-height: 100vh; }
.club-sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--c-sidebar); border-right: 1px solid var(--c-borde); padding: 18px 16px; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; }
.club-grupo { margin-bottom: 18px; }
.club-grupo-titulo { font-weight: 600; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dorado-os); padding: 6px 8px 8px; }
html.dark .club-grupo-titulo { color: var(--dorado-cl); }
.club-espacio { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--c-texto2); text-decoration: none; font-size: 14px; }
.club-espacio img { width: 24px; height: 24px; object-fit: contain; }
.club-espacio span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-espacio:hover { background: var(--c-menu-hover); color: var(--c-texto); }
.club-espacio.activo { background: var(--c-espacio-activo); color: var(--c-espacio-activo-txt); }
.club-candado { margin-left: auto; font-size: 12px; opacity: .6; }
.club-sidebar-velo { display: none; }
.club-main { flex: 1; min-width: 0; padding: 22px 24px; }
.club-cols { display: flex; gap: 22px; max-width: 1040px; margin: 0 auto; }
.club-centro { flex: 1; min-width: 0; max-width: 680px; }
.club-centro.ancho { max-width: none; }
.club-derecha { width: var(--derecha-w); flex: 0 0 var(--derecha-w); }
.club-alerta { max-width: 1040px; margin: 0 auto 16px; }

/* Tarjetas */
.club-card { background: var(--c-card); border: 1px solid var(--c-borde); border-radius: 10px; margin-bottom: 16px; padding: 16px; display: block; color: var(--c-texto); }
a.club-card { text-decoration: none; }
.club-card-titulo { font-weight: 700; font-size: 15px; margin-bottom: 12px; color: var(--c-texto); }
.club-h2 { font-size: 22px; font-weight: 700; color: var(--c-texto); }
.club-portada { border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.club-portada img { width: 100%; display: block; }   /* íntegra: sin velo ni degradado */
.club-nuevo-post { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.club-nuevo-post-caja { flex: 1; background: var(--c-card2); border-radius: 10px; padding: 12px 16px; color: var(--c-off); text-decoration: none; }
.club-feed-barra { display: flex; justify-content: flex-end; font-size: 14px; font-weight: 600; padding: 4px 4px 12px; border-bottom: 1px solid var(--c-borde); margin-bottom: 16px; }

/* Post */
.club-post { padding: 0; }
.club-post-cab { display: flex; gap: 10px; align-items: center; padding: 16px 20px 0; }
.club-post-autor { font-weight: 600; font-size: 15px; }
.club-post-meta { font-size: 12px; color: var(--c-texto2); } .club-post-meta a { color: inherit; text-decoration: none; }
.club-post-acciones { color: var(--c-texto2); display: flex; gap: 12px; }
.club-verificado { color: var(--dorado); font-size: 13px; }
.club-post-titulo { font-size: 22px; font-weight: 700; padding: 14px 20px 0; margin: 0; }
.club-post-cuerpo { padding: 10px 20px 14px; font-size: 16px; line-height: 1.55; }
.club-post-cuerpo p:last-child { margin-bottom: 0; }
.club-post-img { width: 100%; display: block; }
.club-post-pie { display: flex; align-items: center; gap: 14px; padding: 10px 20px; border-top: 1px solid var(--c-borde); }
.club-reaccion { background: none; border: 0; color: var(--c-texto2); font-size: 19px; text-decoration: none; padding: 0; }
.club-reaccion.activa { color: var(--rojo); }
.club-post-likes { font-size: 13px; color: var(--c-texto2); }
.club-actividad { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: var(--c-texto); font-size: 14px; margin-bottom: 14px; }
.club-descripcion { font-size: 14px; color: var(--c-texto2); line-height: 1.5; }
.club-miembros { display: flex; flex-wrap: wrap; gap: 6px; }
.club-espacio-cab { display: flex; align-items: center; gap: 12px; }
.club-espacio-card { padding: 0; overflow: hidden; height: 100%; }
.club-espacio-portada { width: 100%; aspect-ratio: 16/6; object-fit: cover; display: block; }

/* Botón */
.btn-club { background: var(--c-boton); color: var(--c-boton-txt); border: 0; border-radius: 4px; font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; padding: 12px 22px; }
.btn-club:hover { filter: brightness(.93); color: var(--c-boton-txt); }
.btn-club.btn-sm { padding: 8px 14px; font-size: .66rem; }

/* Curso */
.club-seccion { border-top: 1px solid var(--c-borde); }
.club-seccion summary { list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 14px 4px; cursor: pointer; font-weight: 700; font-size: 16px; }
.club-seccion summary::-webkit-details-marker { display: none; }
.club-seccion summary small { color: var(--c-texto2); font-weight: 400; }
.club-seccion summary::after { content: "\F282"; font-family: bootstrap-icons; margin-left: auto; color: var(--c-texto2); }
.club-seccion[open] summary::after { content: "\F286"; }
.club-leccion-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; color: var(--c-texto); text-decoration: none; border-top: 1px solid var(--c-borde); font-size: 14px; }
.club-leccion-item i { color: var(--c-off); font-size: 14px; } .club-leccion-item.hecha i { color: var(--dorado); }
.club-leccion-item:hover { background: var(--c-menu-hover); color: var(--c-texto); }
.club-leccion-item.actual { background: var(--c-resalte); font-weight: 600; }
.club-leccion-item small { margin-left: auto; color: var(--c-texto2); }
.club-progreso { height: 8px; margin-top: 8px; background: var(--c-card2); } .club-progreso .progress-bar { background: var(--c-boton); }

/* Lección */
.club-main.sin-derecha { padding: 0; }
.club-leccion-wrap { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.club-leccion-centro { flex: 1; min-width: 0; padding: 0 0 32px; }
.club-leccion-barra { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--c-card); border-bottom: 1px solid var(--c-borde); position: sticky; top: var(--topbar-h); z-index: 5; }
.club-leccion-barra a { color: var(--c-texto); text-decoration: none; font-weight: 600; }
.club-leccion-centro .club-card { margin: 24px 24px 0; }
.club-leccion-nav a, .club-leccion-nav span { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--c-borde2); border-radius: 8px; color: var(--c-texto); text-decoration: none; margin-left: 6px; }
.club-leccion-nav .off { opacity: .35; }
.club-leccion-titulo { font-size: 26px; font-weight: 700; margin: 10px 0 20px; }
.club-video { width: 100%; max-height: 70vh; background: #000; border-radius: 6px; display: block; }
.club-capitulos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.club-capitulo { background: var(--c-card2); border: 0; border-radius: 20px; padding: 6px 12px; font-size: 13px; color: var(--c-texto); }
.club-capitulo span { color: var(--c-texto2); margin-right: 4px; font-variant-numeric: tabular-nums; }
.club-leccion-resumen { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--c-texto2); }
.club-discusion { background: var(--c-resalte); margin-top: 28px; padding: 28px 24px; }
.club-discusion h3 { font-size: 24px; font-weight: 700; margin-bottom: 16px; }
.club-discusion .form-control { background: var(--c-card); color: var(--c-texto); border-color: var(--c-borde2); }
.club-comentario { display: flex; gap: 10px; margin-top: 18px; font-size: 14px; }
.club-leccion-indice { width: 320px; flex: 0 0 320px; background: var(--c-card); border-left: 1px solid var(--c-borde); padding: 18px 12px; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; }
.club-leccion-indice h6 { color: var(--c-texto2); padding: 0 8px 10px; }
.club-leccion-indice details summary { list-style: none; font-weight: 700; padding: 10px 8px; cursor: pointer; }
.club-leccion-indice details summary::-webkit-details-marker { display: none; }
.club-leccion-indice .club-leccion-item { border: 0; padding: 8px 8px 8px 22px; }

/* Acceso */
body.club-auth { background: var(--blanco); }
.auth-wrap { display: flex; min-height: 100vh; }
.auth-banner { flex: 1; background: var(--beige); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; color: var(--tinta); }
.auth-logo { width: 240px; margin-bottom: 24px; }
.auth-banner h1 { font-size: 30px; font-weight: 600; } .auth-banner h1 em { color: var(--dorado-os); font-style: italic; } .auth-banner p { color: #6F5F52; max-width: 420px; font-weight: 300; }
.auth-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 560px; color: var(--tinta); }
.auth-titulo { font-size: 26px; font-weight: 600; text-align: center; }
.auth-sub { text-align: center; font-size: 16px; color: #6F5F52; font-weight: 300; margin-bottom: 28px; }
.auth-card .form-label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #6F5F52; } .auth-card .form-control { border-color: var(--beige-dd); background: #fff; border-radius: 3px; }
.auth-card .form-control:focus { border-color: var(--dorado); box-shadow: 0 0 0 2px rgba(184,148,63,.15); }
.auth-card .btn-club { padding: 12px; font-size: 16px; }
.auth-links { font-size: 15px; } .auth-links a { color: var(--dorado-os); } .auth-links small { font-size: 13px; color: #6F5F52; }
.auth-quien { background: var(--beige); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }

/* Móvil */
@media (max-width: 991px) {
  .club-burger { display: block; }
  .club-menu span { display: none; } .club-menu a { padding: 7px 10px; font-size: 20px; }
  .club-sidebar { position: fixed; left: 0; top: var(--topbar-h); transform: translateX(-100%); transition: transform .2s; z-index: 40; }
  .club-sidebar.abierto { transform: none; }
  .club-sidebar-velo.abierto { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(0,0,0,.4); z-index: 30; }
  .club-main { padding: 16px 12px; }
  .club-cols { flex-direction: column; } .club-derecha { width: auto; flex: none; } .club-centro { max-width: none; }
  .club-leccion-wrap { flex-direction: column; }
  .club-leccion-indice { width: auto; flex: none; position: static; height: auto; border-left: 0; border-top: 1px solid var(--c-borde); }
  .club-leccion-centro .club-card { margin: 12px 12px 0; }
  .auth-wrap { flex-direction: column; } .auth-banner { padding: 32px 24px; } .auth-logo { width: 150px; }
}

/* Buscador */
.club-buscar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.club-buscar i { font-size: 20px; color: var(--c-texto2); }
.club-buscar .form-control { background: var(--c-card2); border: 0; color: var(--c-texto); }
.club-resultado { padding: 14px 18px; margin-bottom: 10px; }
.club-resultado:hover { background: var(--c-menu-hover); }

/* La barra es beige en ambos modos: su texto e íconos siempre en tinta */
.club-topbar, .club-topbar .club-menu a, .club-topbar .club-icono, .club-topbar .club-burger { color: var(--tinta); }
.club-topbar .club-menu a.activo { color: var(--c-menu-activo-txt); }
.club-topbar .club-icono:hover, .club-topbar .club-menu a:hover:not(.activo) { background: var(--beige-dd); color: var(--tinta); }
.club-topbar .club-avatar { background: var(--beige-dd); color: var(--tinta); }

/* Bootstrap .text-muted sobre fondo oscuro se perdía */
body.club .text-muted { color: var(--c-texto2) !important; }

/* Hover de botones: Bootstrap pone --bs-btn-hover-bg transparente y el texto blanco se perdía sobre la tarjeta.
 * Se fijan las variables del propio botón: reposo dorado → hover dorado oscuro (claro) / dorado claro con texto negro (oscuro). */
.btn-club {
  --bs-btn-bg: var(--c-boton); --bs-btn-color: var(--c-boton-txt); --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--dorado-os); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--tinta); --bs-btn-active-color: #F7E7B0; --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 184, 148, 63; --bs-btn-disabled-bg: var(--c-borde2); --bs-btn-disabled-color: #fff;
  filter: none;
}
.btn-club:hover { filter: none; box-shadow: 0 4px 14px rgba(138, 110, 42, .35); }
html.dark .btn-club { --bs-btn-hover-bg: var(--dorado-cl); --bs-btn-hover-color: var(--negro); --bs-btn-active-bg: #F7E7B0; --bs-btn-active-color: var(--negro); }
.btn-outline-secondary { --bs-btn-color: var(--c-texto2); --bs-btn-border-color: var(--c-borde2); --bs-btn-hover-bg: var(--c-card2); --bs-btn-hover-color: var(--c-texto); --bs-btn-hover-border-color: var(--c-borde2); }
.btn-link { --bs-btn-color: var(--c-enlace); --bs-btn-hover-color: var(--tinta); }

/* Logos de espacio: nunca deformados — caja fija, imagen contenida (proporción intacta) */
.club-logo-espacio { object-fit: contain; object-position: center; flex: 0 0 auto; }
.club-logo-espacio.grande { width: 56px; height: 56px; }
.club-logo-espacio.chico { width: 32px; height: 32px; }

/* Admin */
.club-filtros { display: flex; gap: 6px; }
.club-filtros a { padding: 6px 12px; border-radius: 20px; font-size: 13px; text-decoration: none; color: var(--c-texto2); border: 1px solid var(--c-borde); }
.club-filtros a.activo { background: var(--tinta); color: #F7E7B0; border-color: var(--tinta); }
.club-tabla { --bs-table-bg: transparent; --bs-table-color: var(--c-texto); --bs-table-border-color: var(--c-borde); font-size: 14px; }
.club-tabla th { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-texto2); font-weight: 600; padding: 12px 14px; }
.club-tabla td { padding: 12px 14px; vertical-align: top; }
.club-tabla a { color: var(--c-texto); text-decoration: none; }
.club-card .form-control, .club-card .form-select { background: var(--c-card2); color: var(--c-texto); border-color: var(--c-borde2); }
.club-card .form-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-texto2); font-weight: 600; }
.club-leccion-cuerpo h3 { font-family: var(--fuente-titulo); font-size: 20px; margin: 22px 0 8px; }
.club-leccion-cuerpo ul { padding-left: 20px; } .club-leccion-cuerpo li { margin-bottom: 6px; }

/* Título generado + fecha de la sesión */
.club-fecha-leccion { font-style: normal; color: var(--c-off); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.club-leccion-sub { display: flex; gap: 16px; align-items: center; margin: -12px 0 18px; font-size: 13px; color: var(--c-texto2); }
.club-editar { color: var(--dorado-os); text-decoration: none; } .club-editar:hover { text-decoration: underline; }
html.dark .club-editar { color: var(--dorado-cl); }

/* Feed: composer, conversación, perfil, campana */
.club-composer { padding: 16px 20px; }
.club-composer .form-control { background: var(--c-card2); color: var(--c-texto); border-color: var(--c-borde); }
.club-composer-titulo { font-weight: 600; }
.club-composer-img { cursor: pointer; color: var(--c-texto2); font-size: 14px; } .club-composer-img:hover { color: var(--c-texto); }
.club-post-autor a, .club-post-titulo a { color: inherit; text-decoration: none; }
.club-icono-sm { background: none; border: 0; color: var(--c-texto2); font-size: 16px; padding: 4px; } .club-icono-sm:hover { color: var(--c-texto); }
.club-mencion { color: var(--dorado-os); font-weight: 600; text-decoration: none; } html.dark .club-mencion { color: var(--dorado-cl); }
.club-volver { display: inline-block; margin-bottom: 12px; color: var(--c-texto2); text-decoration: none; font-size: 14px; }
.club-quienes { display: flex; align-items: center; gap: 4px; margin: -8px 4px 16px; }
.club-conversacion { padding: 20px; } .club-conversacion h3 { font-family: var(--fuente-titulo); font-size: 22px; margin-bottom: 14px; }
.club-conversacion .form-control { background: var(--c-card2); color: var(--c-texto); border-color: var(--c-borde); }
.club-comentario-cuerpo { margin-top: 2px; line-height: 1.5; }
.club-link-sm { background: none; border: 0; color: var(--c-off); font-size: 12px; padding: 0 0 0 8px; } .club-link-sm:hover { color: var(--rojo); }
.club-perfil-cab { display: flex; gap: 20px; align-items: flex-start; padding: 24px; }
.club-campana { position: relative; }
.club-campana-n { position: absolute; top: 2px; right: 0; background: var(--rojo); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.club-notif { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; margin-bottom: 8px; text-decoration: none; }
.club-notif i { font-size: 20px; color: var(--dorado-os); } html.dark .club-notif i { color: var(--dorado-cl); }
.club-notif.nueva { border-left: 3px solid var(--dorado); }

/* Cambiar foto: la propia foto es el botón */
.club-avatar-cambiar { position: relative; display: inline-block; cursor: pointer; flex: 0 0 auto; }
.club-avatar-cambiar .club-avatar { display: inline-flex; }
.club-avatar-cambiar-ico { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--dorado); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; border: 2px solid var(--c-card); }
.club-avatar-cambiar:hover .club-avatar-cambiar-ico { background: var(--dorado-os); }

.club-buscar .form-select { background: var(--c-card2); color: var(--c-texto); border: 0; }
.form-check-input:checked { background-color: var(--dorado); border-color: var(--dorado); }

.club-leccion-admin { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.club-leccion-admin input[name=titulo] { flex: 1; min-width: 160px; }
.club-leccion-admin input[name=fecha] { width: 150px; }
.club-leccion-admin select[name=seccion_id] { width: 150px; }
.club-leccion-admin select[name=estado] { width: 110px; }

/* Lecciones de audio, video externo, documentos, texto */
.club-embed { position: relative; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #000; }
.club-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.club-audio { display: flex; gap: 20px; align-items: flex-start; }
.club-audio-img { width: 220px; border-radius: 8px; flex: 0 0 auto; }
.club-audio-cuerpo { flex: 1; min-width: 0; } .club-audio audio { width: 100%; }
.club-pistas { list-style: none; padding: 0; margin: 14px 0 0; }
.club-pista { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-top: 1px solid var(--c-borde); padding: 10px 6px; color: var(--c-texto); text-align: left; font-size: 14px; }
.club-pista span { flex: 1; } .club-pista small { color: var(--c-texto2); } .club-pista i { color: var(--dorado); font-size: 18px; }
.club-pista.activa { background: var(--c-resalte); font-weight: 600; }
.club-docs { list-style: none; padding: 0; } .club-docs a { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--c-borde); border-radius: 8px; margin-bottom: 8px; text-decoration: none; color: var(--c-texto); }
.club-leccion-img { width: 100%; border-radius: 8px; }
.club-tipo-ico { color: var(--c-off) !important; font-size: 13px !important; }
@media (max-width: 767px) { .club-audio { flex-direction: column; } .club-audio-img { width: 100%; } }

/* Onda de audio y visor de PDF */
#club-onda { width: 100%; margin: 6px 0 10px; }
.club-onda-titulo { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.club-onda-tiempo { font-size: 13px; color: var(--c-texto2); font-variant-numeric: tabular-nums; font-weight: 400; }
.club-onda-controles { display: flex; align-items: center; gap: 10px; }
.club-onda-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-borde2); background: var(--c-card); color: var(--c-texto); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.club-onda-btn.grande { width: 54px; height: 54px; background: var(--dorado); color: #fff; border: 0; font-size: 28px; }
.club-onda-btn.grande:hover { background: var(--dorado-os); }
#club-onda-vol { width: 110px; margin-left: auto; accent-color: var(--dorado); }
.club-pista i { color: var(--dorado); }
.club-docs { margin-top: 20px; }
.club-doc { border: 1px solid var(--c-borde); border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.club-doc-cab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--c-card2); }
.club-doc-cab i { color: var(--dorado); font-size: 18px; } .club-doc-pags { color: var(--c-texto2); font-size: 13px; margin-left: 4px; }
.club-doc-cab .club-onda-btn { margin-left: auto; width: 32px; height: 32px; font-size: 14px; }
.club-doc-paginas { max-height: 520px; overflow: auto; background: #6f6357; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.club-doc.expandido .club-doc-paginas { max-height: none; }
/* pantalla completa del PDF: Fullscreen API o capa fija de respaldo */
.club-doc:fullscreen, .club-doc:-webkit-full-screen, .club-doc.pantalla { position: fixed; inset: 0; z-index: 1100; border: 0; border-radius: 0; margin: 0; background: #6f6357; display: flex; flex-direction: column; }
.club-doc:fullscreen .club-doc-paginas, .club-doc:-webkit-full-screen .club-doc-paginas, .club-doc.pantalla .club-doc-paginas { max-height: none; flex: 1; height: auto; min-height: 0; scroll-snap-type: y proximity; outline: none; }
.club-doc:fullscreen .club-doc-pag, .club-doc.pantalla .club-doc-pag { scroll-snap-align: start; }
.club-doc:fullscreen .club-doc-cab, .club-doc.pantalla .club-doc-cab { flex: none; }
body.club-doc-abierto { overflow: hidden; }
.club-doc-zoom { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.club-doc-zoom .club-onda-btn { margin-left: 0; }
.club-doc-cab .club-doc-zoom + .club-doc-abrir { margin-left: 6px; }
.club-doc-zoom-v { background: transparent; border: 1px solid var(--c-borde2); color: var(--c-texto); border-radius: 4px; font-size: .72rem; font-weight: 600; padding: 4px 8px; min-width: 3.6em; }
.club-doc-paginas.con-zoom { align-items: flex-start; }
.club-doc-paginas.con-zoom .club-doc-pag { max-width: none; margin: 0 auto; }
.club-doc-pag { box-shadow: 0 2px 10px rgba(0,0,0,.3); background: #fff; max-width: 100%; height: auto; }

/* pestañas del admin de membresías */
.club-pills .nav-link { color: var(--c-texto2); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; border-radius: 4px; }
.club-pills .nav-link.active { background: var(--c-boton); color: var(--c-boton-txt); }