/* ===========================================================
   Full Partituras — tema unificado (nav + tipografía)
   Reutilizable en TODO el sitio. Enlazado desde los layouts.
   Cada página puede ajustar --fp-cw (ancho) y --fp-pad (padding).
   =========================================================== */


/* ===== ANCHO ÚNICO REUTILIZABLE =====================================
   Usa class="fp-cont" en CUALQUIER contenedor de contenido para que
   alinee igual que el nav y el hero. NO crear .pd-wrap/.plns-wrap nuevos.
   Para full-bleed (hero/footer) usar .fp-bleed (100vw, seguro en móvil). */
.fp-cont{max-width:1500px;margin:0 auto;padding:0 clamp(16px,3vw,32px);}
.fp-bleed{width:100vw;position:relative;left:50%;margin-left:-50vw;}
@media(max-width:1100px){.fp-bleed{width:100%;left:auto;margin-left:0;}}

/* NAV blanco, compacto y consistente */
.navbar-inverse{background:#fff !important;border:none !important;box-shadow:0 1px 6px rgba(20,40,80,.06) !important;min-height:auto;}
.navbar-inverse.navbar-fixed-top{z-index:1100;}
.navbar-inverse .container{max-width:1500px !important;width:auto !important;margin:0 auto !important;padding:0 clamp(16px,3vw,32px) !important;}
.navbar-inverse .navbar-brand{font-family:'Manrope',sans-serif !important;font-weight:800 !important;color:#191c1d !important;font-size:26px;line-height:1;height:auto;padding-top:18px;padding-bottom:18px;display:inline-flex;align-items:center;gap:8px;}
.navbar-inverse .navbar-brand .title{color:#0058be;}
.navbar-inverse .navbar-brand .fa-stack{font-size:0.62em;width:1.9em;height:1.9em;line-height:1.9em;}
.navbar-inverse .navbar-brand .fa-circle{color:#0058be;}
.navbar-inverse .navbar-nav>li>a{color:#4a5663 !important;font-family:'Inter',sans-serif !important;font-weight:500 !important;font-size:15.5px !important;letter-spacing:.1px;padding-top:26px;padding-bottom:26px;}
.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li.open>a,.navbar-inverse .navbar-nav>li.active>a{color:#0058be !important;background:transparent !important;}
.navbar-inverse .dropdown-menu{border-radius:12px;border:1px solid #eaeef3;box-shadow:0 14px 34px -12px rgba(20,40,80,.25);padding:6px;}
.navbar-inverse .dropdown-menu>li>a{border-radius:8px;color:#3a4a5a;font-size:14px;padding:8px 14px;}
.navbar-inverse .dropdown-menu>li>a:hover{background:#eef4fd;color:#0058be;}
.navbar-inverse .navbar-toggle .icon-bar{background:#0058be;}
.navbar-inverse .navbar-nav>li>a img{vertical-align:middle;}

/* Menú de usuario (avatar + dropdown) */
.fp-av-nav{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:#fff;font-weight:700;font-size:15px;font-family:'Manrope',sans-serif;line-height:1;}
.navbar-inverse .fp-userdd>a.dropdown-toggle{padding-top:14px !important;padding-bottom:14px !important;}
.navbar-inverse .fp-userdd>a.dropdown-toggle:hover,.navbar-inverse .fp-userdd>a.dropdown-toggle:focus{background:transparent !important;}
.fp-userdd-menu{min-width:236px;padding:8px;}
.fp-udd-head{display:flex;align-items:center;gap:11px;padding:8px 12px 12px;}
.fp-udd-head .fp-av-nav{width:42px;height:42px;font-size:17px;}
.fp-udd-name{display:flex;flex-direction:column;line-height:1.25;}
.fp-udd-name b{color:#15233a;font-size:14px;}
.fp-udd-name small{color:#8794a2;font-size:12px;}
.fp-userdd-menu>li>a{display:flex !important;align-items:center;gap:10px;}
.fp-userdd-menu>li>a i{width:16px;text-align:center;color:#8794a2;}

/* Layout del menú: logo izquierda · menú centro · acciones derecha (desktop) */
@media(min-width:1280px){
  .navbar-inverse .container{display:flex !important;align-items:center;}
  .navbar-inverse .navbar-header{float:none;flex:0 0 auto;}
  .navbar-inverse .navbar-collapse{flex:1 1 auto;display:flex !important;align-items:center;padding:0;border:none;box-shadow:none;}
  .navbar-inverse .navbar-collapse>.fp-nav-main{flex:1 1 auto;display:flex;justify-content:flex-end;padding-right:38px;margin:0;float:none;}
  .navbar-inverse .navbar-collapse>.fp-nav-right{flex:0 0 auto;margin:0;float:none;display:flex;align-items:center;}
  .navbar-inverse .fp-nav-main>li,.navbar-inverse .fp-nav-right>li{float:none;}
}
/* botón Registrarse (CTA azul) */
.navbar-inverse .navbar-nav.fp-nav-right>li.fp-register>a{background:#0058be !important;color:#fff !important;border-radius:9999px !important;padding:9px 22px !important;font-weight:600 !important;margin:0 2px;}
.navbar-inverse .navbar-nav.fp-nav-right>li.fp-register>a:hover{background:#0049a0 !important;color:#fff !important;}

/* === Menú móvil overlay (pantalla completa) === */
@media(max-width:1279px){
  .navbar-inverse .navbar-collapse{display:none !important;}
  .navbar-inverse .navbar-header{float:none;display:flex;align-items:center;justify-content:space-between;width:100%;}
  .navbar-inverse .navbar-header .navbar-brand{float:none;order:0;}
  .navbar-inverse .navbar-toggle{display:block !important;float:none;margin:0;border:none;background:transparent;order:1;}
  .navbar-inverse .container{padding:0 18px !important;}
}
.fp-mm{position:fixed;inset:0;z-index:3000;background:linear-gradient(165deg,#0a63d6 0%,#003a7d 100%);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:scale(1.03);transition:opacity .3s ease,visibility .3s,transform .35s ease;}
.fp-mm.open{opacity:1;visibility:visible;transform:scale(1);}
.fp-mm-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.14);}
.fp-mm-brand{position:static;color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px;}
.fp-mm-brand .fa-stack{font-size:.55em;}.fp-mm-brand .fa-circle{color:rgba(255,255,255,.22);}
.fp-mm-close{position:static;background:none;border:none;color:#fff;font-size:38px;line-height:1;cursor:pointer;opacity:.9;padding:0 4px;}
.fp-mm-close:hover{opacity:1;}
.fp-mm-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 20px 40px;}
.fp-mm-nav{display:flex;flex-direction:column;}
.fp-mm-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;color:#fff !important;font-family:'Inter',sans-serif;font-size:18px;font-weight:400;letter-spacing:.2px;padding:15px 4px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.12);text-align:left;cursor:pointer;text-decoration:none !important;opacity:1;transform:none;}
.fp-mm-item:hover{color:#bcd6ff !important;}
.fp-mm-chev{width:20px;height:20px;flex:0 0 auto;opacity:.8;transition:transform .25s ease;}
.fp-mm-acc.open .fp-mm-chev{transform:rotate(180deg);}
.fp-mm-panel{max-height:0;overflow:hidden;transition:max-height .32s ease;}
.fp-mm-grp{color:rgba(255,255,255,.5);font-family:'Inter',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;padding:15px 4px 4px;}
.fp-mm-sub{display:flex;align-items:center;gap:13px;color:rgba(255,255,255,.92) !important;font-family:'Inter',sans-serif;font-size:15.5px;font-weight:400;padding:9px 4px;text-decoration:none !important;opacity:1;transform:none;}
.fp-mm-sub:hover{color:#fff !important;}
.fp-mm-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.13);color:#fff;display:inline-flex;align-items:center;justify-content:center;}
.fp-mm-ic .fp-svg{width:18px;height:18px;}
.fp-mm-app .fp-mm-tx{display:flex;flex-direction:column;line-height:1.25;}
.fp-mm-app .fp-mm-tx b{font-weight:600;font-size:15.5px;color:#fff;}
.fp-mm-app .fp-mm-tx small{color:rgba(255,255,255,.62);font-size:12.5px;}
.fp-mm-all{display:inline-block;color:#bcd6ff !important;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;padding:12px 4px 6px;text-decoration:none !important;}
.fp-mm-actions{display:flex;flex-direction:column;gap:11px;margin-top:24px;}
.fp-mm-share{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid rgba(255,255,255,.5);color:#fff !important;border-radius:9999px;padding:13px;font-family:'Inter',sans-serif;font-weight:600;font-size:16px;text-decoration:none !important;}
.fp-mm-share:hover{background:rgba(255,255,255,.1);}
.fp-mm-share .fa{font-size:13px;}
.fp-mm-login{color:#fff !important;text-align:center;font-family:'Inter',sans-serif;font-size:16px;padding:5px;text-decoration:none !important;}
.fp-mm-reg{background:#fff;color:#0058be !important;border-radius:9999px;padding:14px;text-align:center;font-family:'Inter',sans-serif;font-weight:700;font-size:16px;text-decoration:none !important;}
.fp-mm-reg:hover{background:#eaf2fd;}
.fp-mm-lang{display:flex;gap:10px;justify-content:center;margin-top:26px;}
.fp-mm-lang a{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.75);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;padding:6px 15px;border-radius:22px;border:1px solid rgba(255,255,255,.28);text-decoration:none !important;}
.fp-mm-lang a.on{background:#fff;color:#0058be;border-color:#fff;}
.fp-mm-lang a img{height:13px;width:auto;border-radius:2px;}
.fp-mm-social{display:flex;gap:14px;justify-content:center;margin-top:28px;}
.fp-mm-social a{width:46px;height:46px;border:1.5px solid rgba(255,255,255,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;transition:background .15s;text-decoration:none;}
.fp-mm-social a:hover{background:rgba(255,255,255,.15);}
body.fp-mm-open{overflow:hidden;}
@media(min-width:1280px){.fp-mm{display:none !important;}}
/* full-bleed footer: evitar 100vw en móvil/emulador (rompe el ancho) */
@media(max-width:1100px){.fp-foot{width:100% !important;left:auto !important;margin-left:0 !important;}}

/* ===================== MEGA MENÚ (Partituras / Aplicaciones) v2 2026-07-15 ===================== */
@media (min-width:993px){
  .navbar-inverse .container{position:relative;}
  .navbar-inverse .fp-nav-main .fp-mega{position:static;}
  .navbar-inverse .fp-mega > .dropdown-menu.fp-mega-menu{
    display:block; position:absolute; top:100%; left:0; right:0; margin:11px auto 0;
    width:min(980px, calc(100vw - 40px)); padding:0; border-radius:18px;
    border:1px solid #e9edf3;
    box-shadow:0 30px 70px -24px rgba(15,30,60,.38), 0 6px 18px -10px rgba(15,30,60,.12);
    overflow:hidden;
    opacity:0; visibility:hidden; transform:translateY(12px) scale(.985); transform-origin:top center;
    pointer-events:none;
    transition:opacity .2s ease, transform .27s cubic-bezier(.16,.84,.36,1), visibility 0s linear .27s;
  }
  .navbar-inverse .fp-mega.fp-mega-apps > .dropdown-menu.fp-apps-menu{ width:min(720px, calc(100vw - 40px)); }
  /* puente invisible que cubre el hueco navbar->panel para no perder el hover */
  .navbar-inverse .fp-mega > .dropdown-menu.fp-mega-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:18px;background:transparent;}
  .navbar-inverse .fp-mega:hover > .dropdown-menu.fp-mega-menu,
  .navbar-inverse .fp-mega.fp-open > .dropdown-menu.fp-mega-menu,
  .navbar-inverse .fp-mega.open > .dropdown-menu.fp-mega-menu{
    opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;
    transition:opacity .2s ease, transform .27s cubic-bezier(.16,.84,.36,1), visibility 0s;
  }
  /* la flechita gira al abrir */
  .navbar-inverse .fp-mega > a .caret{transition:transform .25s ease;}
  .navbar-inverse .fp-mega:hover > a .caret,
  .navbar-inverse .fp-mega.fp-open > a .caret{transform:rotate(180deg);}
}
@media (prefers-reduced-motion: reduce){
  .navbar-inverse .fp-mega > .dropdown-menu.fp-mega-menu{transition:opacity .12s ease, visibility 0s;transform:none;}
}
.fp-mega-menu a, .fp-mega-menu a:hover, .fp-mega-menu a:focus{text-decoration:none !important;}
.fp-mega-inner{padding:26px 28px 24px;list-style:none;}
/* auto-fit y no un numero fijo: el mismo grid lo usan el menu de partituras
   (5 grupos) y el de midis (4). Con 4 columnas fijas dos grupos caian a una
   segunda fila; con 5 fijas al de midis le sobraria una. minmax(0,...) porque
   1fr no baja de su contenido y desborda. */
.fp-mega-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:4px 18px;align-items:start;}
@media (max-width:1180px){.fp-mega-grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr));}}
.fp-mega-col h6{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:#0058be;margin:2px 0 10px;}
.fp-mega-col a{display:flex;align-items:center;gap:12px;padding:7px 9px;border-radius:11px;color:#3a4a5a !important;font-size:14px;font-family:'Inter',sans-serif;font-weight:500;background:transparent !important;line-height:1.25;transition:background .15s ease, color .15s ease;}
.fp-mega-col a:hover{background:#eef4fd !important;color:#0058be !important;}
.fp-mega-ic{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:#eef4fd;color:#0058be;display:inline-flex;align-items:center;justify-content:center;transition:background .18s ease, color .18s ease, transform .18s ease;}
.fp-mega-col a:hover .fp-mega-ic{background:#0058be;color:#fff;transform:scale(1.06);}
.fp-svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;}
.fp-mega-ic .fp-svg{width:18px;height:18px;}
.fp-app-ic .fp-svg{width:21px;height:21px;}
.navbar-inverse .fp-mega .fp-mega-cta{display:block;margin-top:22px;padding:16px 26px !important;background:#0f1b2d;color:#fff !important;text-align:center;font-weight:600;font-size:14.5px !important;font-family:'Inter',sans-serif;letter-spacing:.2px;border-radius:14px !important;box-shadow:0 10px 22px -12px rgba(15,27,45,.5);transition:background .18s ease, letter-spacing .18s ease, box-shadow .18s ease, transform .18s ease;}
.navbar-inverse .fp-mega .fp-mega-cta:hover{background:#0058be !important;color:#fff !important;letter-spacing:.5px;transform:translateY(-1px);box-shadow:0 14px 26px -12px rgba(0,88,190,.55);}
/* Aplicaciones */
.fp-apps-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;padding-bottom:2px;}
.fp-apps-grid a{display:flex;align-items:center;gap:14px;padding:11px 13px;border-radius:13px;color:#15233a !important;background:transparent !important;transition:background .15s ease;}
.fp-apps-grid a:hover{background:#eef4fd !important;}
.fp-app-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:#eef4fd;color:#0058be;display:inline-flex;align-items:center;justify-content:center;font-size:18px;transition:background .18s ease, color .18s ease, transform .18s ease;}
.fp-apps-grid a:hover .fp-app-ic{background:#0058be;color:#fff;transform:scale(1.07);}
.fp-app-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.fp-app-tx b{font-family:'Manrope',sans-serif;font-weight:700;font-size:14.5px;color:#15233a;}
.fp-app-tx small{color:#8794a2;font-size:12.5px;}
/* Botón Compartir (pill contorno) */
.navbar-inverse .fp-nav-right > li.fp-share > a{border:1.5px solid #d5dde7 !important;border-radius:9999px !important;padding:8px 18px !important;font-weight:600 !important;color:#15233a !important;margin-right:6px;transition:border-color .15s ease, color .15s ease, box-shadow .15s ease;}
.navbar-inverse .fp-nav-right > li.fp-share > a:hover{border-color:#0058be !important;color:#0058be !important;background:#fff !important;box-shadow:0 5px 16px -7px rgba(0,88,190,.55);}
.navbar-inverse .fp-nav-right > li.fp-share > a .fa{font-size:11px;margin-right:5px;}

@media(max-width:560px){.navbar-inverse .navbar-brand{font-size:18px !important;padding-top:16px !important;padding-bottom:16px !important;}}

/* ============================================================
   PÁGINA MODERNA REUTILIZABLE (.fp-clean) — 2026-07-18
   Pon class="fp-clean" en el div raíz de la página y este bloque
   oculta la barra lateral vieja (.col-lg-4), el footer viejo y
   libera el .container a ancho completo. NO copiar más este CSS
   por página. Variante .fp-clean--pad = deja 72px para el navbar
   fijo (páginas SIN hero propio).
   ============================================================ */
html:has(.fp-clean),body:has(.fp-clean){overflow-x:hidden;overflow-x:clip;max-width:100%;}
body:has(.fp-clean){padding-top:0 !important;}
body:has(.fp-clean.fp-clean--pad){padding-top:72px !important;}
body:has(.fp-clean) #featureWrap{padding-top:0 !important;}
body:has(.fp-clean) #featureWrap>div[align="center"]{display:none !important;}
.container:has(.fp-clean){max-width:none !important;width:100% !important;padding:0 !important;}
.row:has(.fp-clean)>.col-lg-4{display:none !important;}
.row:has(.fp-clean)>.col-lg-8,.row:has(.fp-clean)>.col-lg-12{width:100% !important;float:none;padding:0 !important;}
.row:has(.fp-clean){margin-left:0 !important;margin-right:0 !important;}
body:has(.fp-clean) footer:not(.fp-foot){display:none !important;}
body:has(.fp-clean) .fp-foot{width:100% !important;left:auto !important;margin-left:0 !important;}

/* ============================================================
   .fp-tool-block (2026-07-19) — bloques bajo la app de una herramienta
   (valoración, anuncios, guía/FAQ) al MISMO ancho que la columna de la
   app y alineados a la izquierda. La app = col1 de un grid (1fr / 300px
   sidebar) con gap 28 → ancho app = 100% - 328px. UNA sola definición;
   para cambiar el ancho de TODAS las herramientas se edita solo aquí.
   ============================================================ */
.fp-tool-block{width:100% !important;max-width:calc(100% - 328px) !important;margin-left:0 !important;margin-right:auto !important;}
@media(max-width:980px){.fp-tool-block{max-width:100% !important;}}


/* ------------------------------------------------------------------
   Puente de la busqueda al tablon de pedidos.

   Pedir partituras ya funcionaba solo: la categoria del foro tiene 31 de
   los 58 temas y cada hilo acumula entre 700 y 1.600 visitas. Lo que
   faltaba era el camino desde "busque y no esta".
   ------------------------------------------------------------------ */
.fp-pedir {
  max-width: 1500px; margin: 18px auto; padding: 26px 24px; text-align: center;
  background: linear-gradient(180deg, #eef3fb 0%, #f7fafd 100%);
  border: 1px solid #dbe6f5; border-radius: 14px;
}
.fp-pedir-t { font-size: 1.15rem; font-weight: 700; color: #25396f; margin-bottom: .4rem; }
.fp-pedir p { color: #5b6b82; font-size: .93rem; max-width: 560px; margin: 0 auto 1rem; }
.fp-pedir-b {
  display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.5rem;
  background: #0058be; color: #fff !important; border-radius: 999px;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: background .15s, transform .15s;
}
.fp-pedir-b:hover { background: #0049a0; transform: translateY(-1px); }

/* La version discreta, debajo de unos resultados que si aparecieron */
.fp-pedir--fino {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 14px 18px; background: none; border: 0; border-top: 1px solid #e8eef7;
  border-radius: 0; font-size: .9rem; color: #6b7a90;
}
.fp-pedir--fino a { color: #0058be; font-weight: 700; text-decoration: none; }
.fp-pedir--fino a:hover { text-decoration: underline; }


/* ------------------------------------------------------------------
   "Compartida por": la persona que aporto el archivo.

   Distinta de .pd-artist, que es el compositor. Esta es gente real de la
   comunidad y es el unico enlace que lleva a los perfiles.
   ------------------------------------------------------------------ */
.pd-subio {
  background: #fff; border: 1px solid #e6ecf5; border-radius: 14px;
  padding: 16px 16px 14px; margin-bottom: 16px;
}
.pd-subio .et {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: #90a0b5; font-weight: 700; margin-bottom: 10px;
}
.pd-subio .who { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.pd-subio .who img, .pd-subio .who .ph {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0058be, #2a7fe0); color: #fff;
  font-weight: 700; font-size: 1.15rem;
}
.pd-subio .tx { display: flex; flex-direction: column; min-width: 0; }
.pd-subio .tx b { color: #25396f; font-size: .95rem; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-subio .tx span { color: #7b8a9e; font-size: .8rem; }
.pd-subio .ins { margin-top: 10px; font-size: .8rem; color: #7b8a9e; }
.pd-subio .b {
  display: block; text-align: center; margin-top: 12px; padding: .55rem;
  border: 1px solid #d6e2f2; border-radius: 999px; color: #0058be;
  font-weight: 700; font-size: .85rem; text-decoration: none;
}
.pd-subio .b:hover { background: #f2f7fd; }


/* --- Boton de seguir ------------------------------------------------ */
.fp-seg {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.1rem; border: 1.5px solid #0058be; border-radius: 999px;
  background: #0058be; color: #fff; font-weight: 700; font-size: .88rem;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.fp-seg:hover { background: #0049a0; border-color: #0049a0; }
.fp-seg.on { background: #fff; color: #0058be; }
.fp-seg.on:hover { background: #fdeaea; border-color: #d6455d; color: #d6455d; }
.fp-seg .ic { font-weight: 900; line-height: 1; }
.fp-seg .n {
  background: rgba(255,255,255,.22); padding: 0 .45rem; border-radius: 999px;
  font-size: .78rem; min-width: 1.3rem; text-align: center;
}
.fp-seg.on .n { background: #eef3fb; }
.fp-seg.mini { padding: .3rem .75rem; font-size: .8rem; }
.fp-seg[hidden], .fp-seg .n[hidden] { display: none; }


/* ====================================================================
   MURO v4 — feed social.

   REGLA: no hay paleta nueva. Estas variables son los colores que YA
   usaba fp-theme.css, extraidos del header y los botones:
     #0058be (48 usos) / #0049a0 hover / #1b2a4e y #15233a tinta
     #e8edf5 y #f1f5fa bordes / #7b8a9e y #93a2b8 texto suave
     #eef4fd y #f3f7fd fondos suaves / sombra 0 1px 2px rgba(20,40,80,.04)
   La tipografia es Geist, global desde fp-font.css. No se carga ninguna otra.
   ==================================================================== */
:root {
  --m-pri: #0058be;
  --m-pri-h: #0049a0;
  --m-tinta: #1b2a4e;
  --m-tinta-f: #15233a;
  --m-txt: #33405a;
  --m-suave: #7b8a9e;
  --m-suave2: #93a2b8;
  --m-borde: #e8edf5;
  --m-borde2: #f1f5fa;
  --m-fondo: #f3f7fd;
  --m-fondo2: #eef4fd;
  --m-card: #fff;
  --m-r-card: 16px;
  --m-r-med: 12px;
  --m-r-min: 10px;
  --m-r-pill: 999px;
  --m-sombra: 0 1px 2px rgba(20, 40, 80, .04);
  --m-sombra-flot: 0 8px 26px rgba(20, 40, 80, .16);
}

/* ---------- rejilla de 3 columnas ---------- */
.fp-muro {
  /* El ancho NO se define aqui: lo pone .fp-cont, la misma regla que la home.
     Solo padding vertical; tocar el lateral anularia el de .fp-cont y la
     pagina saldria mas ancha que el resto del sitio. */
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 680px) minmax(210px, 1fr);
  align-items: start;
  gap: 28px;
  padding-top: 26px;
  padding-bottom: 44px;
  font-size: 15px;
  color: var(--m-txt);
}
/* Pegadas al borde EXTERIOR: asi el canto de la tarjeta de perfil cae en la
   misma vertical que el logo del header, y el de la derecha con la bandera.
   Con justify-self al reves quedaban ~50px metidas hacia dentro en pantallas
   anchas, que es justo lo que se veia desalineado. */
.fp-muro-nav { justify-self: start; width: 100%; max-width: 340px; }
.fp-muro-side { justify-self: end; width: 100%; max-width: 380px; }
.fp-muro > * { min-width: 0; }
.fp-muro-nav, .fp-muro-side {
  position: sticky; top: 88px; display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
/* Sin columna declarada, la implicita vale 'auto' = max-content, y la
   central se estiraba a 927px por encima de la barra derecha. */
.fp-muro-main { display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr); /* fp-muro-main: no quitar */ }
/* las tarjetas viven dentro de #fpFeed: el gap tiene que estar AQUI */
.fp-feed { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
/* El anuncio intercalado se viste como una tarjeta mas: si se ve como un
   pegote, la gente aprende a saltarselo (y a saltarse lo que hay al lado). */
.fp-ad-feed {
  background: var(--m-card); border: 1px solid var(--m-borde);
  border-radius: var(--m-r-card); box-shadow: var(--m-sombra);
  padding: 6px 12px; overflow: hidden; min-width: 0;
}
.fp-ad-feed:empty { display: none; }
.fp-ad-feed .fp-ad { margin: 8px auto !important; }
.fp-ad-feed::before {
  content: attr(data-et); display: block; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--m-suave2); padding: 6px 2px 0;
}

/* ---------- tarjeta base ---------- */
.fp-mcard {
  background: var(--m-card); border: 1px solid var(--m-borde);
  border-radius: var(--m-r-card); box-shadow: var(--m-sombra);
  padding: 16px; min-width: 0;
}
.fp-mcard h3 {
  margin: 0 0 12px; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--m-suave2); font-weight: 700;
}
.fp-mcard-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fp-mcard-hd a { font-size: 13px; color: var(--m-pri); text-decoration: none; font-weight: 600; }

/* ---------- avatares ---------- */
.fp-av {
  border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--m-pri); color: #fff; font-weight: 700;
  width: 42px; height: 42px; font-size: 16px;
}
.fp-av--32 { width: 32px; height: 32px; font-size: 13px; }
.fp-av--36 { width: 36px; height: 36px; font-size: 14px; }
.fp-av--38 { width: 38px; height: 38px; font-size: 15px; }

/* ---------- 1. columna izquierda ---------- */
.fp-perfil { display: grid; gap: 12px; }
.fp-perfil-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fp-perfil-top .n { min-width: 0; }
.fp-perfil-top .n b {
  display: block; color: var(--m-tinta); font-size: 15px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-perfil-top .n span { color: var(--m-suave2); font-size: 13px; }
.fp-perfil-cifras {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--m-borde2); padding-top: 12px; text-align: center;
}
.fp-perfil-cifras b { display: block; color: var(--m-tinta); font-size: 17px; font-weight: 700; }
.fp-perfil-cifras span {
  display: block; color: var(--m-suave2); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; margin-top: 2px;
}

.fp-mnav { display: grid; gap: 2px; }
.fp-mnav a {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px;
  border-radius: var(--m-r-min); color: var(--m-txt); text-decoration: none;
  font-size: 15px; font-weight: 600; transition: background .12s; min-width: 0;
}
.fp-mnav a:hover { background: var(--m-fondo); }
.fp-mnav a.on { background: var(--m-fondo2); color: var(--m-pri); }
.fp-mnav a .fa { width: 20px; text-align: center; font-size: 15px; color: var(--m-suave); }
.fp-mnav a:hover .fa, .fp-mnav a.on .fa { color: var(--m-pri); }
.fp-mnav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fp-cta {
  background: var(--m-tinta-f); border-radius: var(--m-r-card); padding: 18px; color: #fff;
}
.fp-cta h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: #fff; }
.fp-cta p { margin: 0 0 14px; font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.45; }
.fp-cta a {
  display: block; text-align: center; background: #fff; color: var(--m-tinta-f) !important;
  border-radius: var(--m-r-min); padding: .62rem; font-weight: 700; font-size: 14.5px;
  text-decoration: none;
}
.fp-cta a:hover { background: var(--m-fondo2); }

/* la pagina de una sola publicacion: misma tarjeta, una columna */
.fp-muro--solo { grid-template-columns: minmax(0, 700px); justify-content: center; }
.fp-volver { color: var(--m-pri); font-weight: 600; text-decoration: none; font-size: 15px; }
.fp-volver:hover { text-decoration: underline; }

/* ---------- 2. composer ---------- */
.fp-comp { background: var(--m-card); border: 1px solid var(--m-borde);
  border-radius: var(--m-r-card); box-shadow: var(--m-sombra); padding: 16px; }
.fp-comp-top { display: flex; gap: 12px; align-items: flex-start; }
.fp-comp textarea {
  flex: 1; border: 0; resize: none; font: inherit; font-size: 16px; color: var(--m-tinta);
  padding: 11px 0; background: none; outline: none; min-height: 44px;
  line-height: 1.45; overflow: hidden;
}
.fp-comp textarea::placeholder { color: var(--m-suave2); }
.fp-comp-extra { margin-top: 10px; display: grid; gap: 8px; }
.fp-comp-extra[hidden], .fp-comp-previa[hidden], .fp-comp-msg[hidden] { display: none !important; }
.fp-comp-extra input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--m-borde);
  border-radius: var(--m-r-med); font-size: 15px; outline: none; font-family: inherit;
}
.fp-comp-extra input:focus { border-color: var(--m-pri); }
.fp-comp-previa { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fp-comp-previa img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--m-r-med); }
.fp-comp-pie {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--m-borde2); flex-wrap: wrap;
}
.fp-comp-pie .acc {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: 0 .9rem;
  border: 1px solid var(--m-borde); background: none; border-radius: var(--m-r-pill);
  cursor: pointer; font-size: 14px; color: var(--m-txt); font-weight: 600; font-family: inherit;
}
.fp-comp-pie .acc:hover { background: var(--m-fondo); }
.fp-comp-pie .acc { position: relative; overflow: hidden; }
.fp-comp-pie .acc input[type="file"] {
  /* fuera del flujo y sin tamano: el boton bonito es el propio label */
  position: absolute; width: 1px; height: 1px; opacity: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); pointer-events: none;
}
.fp-comp-pie .acc:focus-within { outline: 2px solid var(--m-pri); outline-offset: 1px; }
.fp-comp-pie .acc.on { background: var(--m-fondo2); border-color: var(--m-pri); color: var(--m-pri); }
.fp-comp-pie .acc .fa { color: var(--m-suave); }
.fp-comp-pie .acc.on .fa { color: var(--m-pri); }
.fp-comp-pie .pub {
  margin-left: auto; min-height: 38px; padding: 0 1.5rem; border: 0;
  border-radius: var(--m-r-pill); background: var(--m-pri); color: #fff;
  font-weight: 700; font-size: 14.5px; cursor: pointer; font-family: inherit;
}
.fp-comp-pie .pub:hover { background: var(--m-pri-h); }
.fp-comp-pie .pub:disabled { opacity: .5; cursor: default; }
.fp-comp-msg { margin-top: 10px; font-size: 14px; padding: .6rem .85rem; border-radius: var(--m-r-min); }
.fp-comp-msg.malo { background: #fdecec; color: #b93232; }

/* ---------- 3. filtros ---------- */
.fp-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp-filtros button {
  min-height: 34px; padding: 0 1rem; border: 1px solid var(--m-borde);
  background: var(--m-card); border-radius: var(--m-r-pill); cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--m-txt); font-family: inherit;
}
.fp-filtros button:hover { background: var(--m-fondo); }
.fp-filtros button.on { background: var(--m-tinta-f); border-color: var(--m-tinta-f); color: #fff; }
.fp-filtros .cuenta { margin-left: auto; color: var(--m-suave2); font-size: 13.5px; }

/* ---------- 4. tarjeta de publicacion ---------- */
.fp-pub {
  background: var(--m-card); border: 1px solid var(--m-borde);
  border-radius: var(--m-r-card); box-shadow: var(--m-sombra);
  animation: fp-subir .28s ease both;
  /* sin overflow:hidden: recortaba el popover de reacciones */
}
.fp-pub > .fp-hilo:last-child { border-radius: 0 0 var(--m-r-card) var(--m-r-card); }
.fp-pub .fp-carru { overflow: hidden; }
@keyframes fp-subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fp-pub-hd { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 0; }
.fp-pub-hd .qui { min-width: 0; flex: 1; }
.fp-pub-hd .qui .l1 { font-size: 15px; color: var(--m-suave); line-height: 1.3; }
.fp-pub-hd .qui .l1 b { color: var(--m-tinta); font-weight: 700; }
.fp-pub-hd .qui .l1 a { color: var(--m-tinta); text-decoration: none; font-weight: 700; }
.fp-pub-hd .qui .l1 a:hover { text-decoration: underline; }
.fp-pub-hd .qui .l2 { font-size: 12px; color: var(--m-suave2); margin-top: 1px; }
.fp-pub-mas {
  border: 0; background: none; color: var(--m-suave2); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 4px 8px; border-radius: var(--m-r-min); letter-spacing: .1em;
}
.fp-pub-mas:hover { background: var(--m-fondo); color: var(--m-txt); }

.fp-pub-tx {
  padding: 12px 16px 0; font-size: 15.5px; line-height: 1.55; color: var(--m-txt);
  word-break: break-word; text-wrap: pretty;
}
.fp-pub-tx a { color: var(--m-pri); }

/* Carrusel de fotos. El deslizamiento es nativo (scroll-snap): con el dedo
   funciona aunque el JS no llegue a cargar. Las flechas son el extra de
   escritorio. */
.fp-carru { position: relative; margin-top: 14px; background: var(--m-tinta-f); }
.fp-carru-pista {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.fp-carru-pista::-webkit-scrollbar { display: none; }
.fp-carru-pista > a { flex: 0 0 100%; scroll-snap-align: center; display: block; min-width: 0; }
.fp-carru-pista img { width: 100%; max-height: 560px; object-fit: contain; display: block; }
.fp-carru-fl {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .93); color: var(--m-tinta);
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--m-sombra-flot);
  opacity: 0; transition: opacity .15s; z-index: 2;
}
.fp-carru:hover .fp-carru-fl, .fp-carru-fl:focus-visible { opacity: 1; }
.fp-carru-fl.ant { left: 10px; }
.fp-carru-fl.sig { right: 10px; }
.fp-carru-fl[disabled] { display: none; }
.fp-carru-n {
  position: absolute; top: 10px; right: 10px; background: rgba(21, 35, 58, .8);
  color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px;
  border-radius: var(--m-r-pill); z-index: 2;
}
.fp-carru-pt {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2;
}
.fp-carru-pt span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5);
  transition: width .18s, background .18s;
}
.fp-carru-pt span.on { background: #fff; width: 16px; border-radius: 3px; }
.fp-pub-video { margin-top: 14px; position: relative; padding-top: 56.25%; }
.fp-pub-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- tarjeta de partitura adjunta ---------- */
.fp-hoja {
  display: block; margin: 14px 16px 0; border: 1px solid var(--m-borde);
  border-radius: var(--m-r-med); overflow: hidden; text-decoration: none;
  transition: border-color .14s;
}
.fp-hoja:hover { border-color: var(--m-tinta); }
.fp-hoja-prev { position: relative; background: var(--m-fondo); overflow: hidden; }
.fp-hoja-prev img {
  display: block; width: 100%; height: 250px;
  object-fit: cover; object-position: center top;   /* se ve el encabezado */
}
/* respaldo dibujado, solo si esa partitura aun no tiene miniatura */
.fp-hoja-prev.sinprev { padding: 22px 20px; }
.fp-hoja-prev.sinprev svg { display: block; width: 100%; height: 96px; }
.fp-hoja-prev .pdf {
  position: absolute; top: 12px; right: 12px; background: var(--m-tinta-f); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; padding: 4px 9px;
  border-radius: 6px;
}
.fp-hoja-pie { padding: 14px 16px 16px; background: var(--m-card); }
.fp-hoja-gen {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--m-pri); display: block; margin-bottom: 4px;
}
.fp-hoja-tit {
  font-size: 19px; font-weight: 700; color: var(--m-tinta); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-hoja-art { font-size: 14px; color: var(--m-suave); margin-top: 2px; }
.fp-hoja-chips { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.fp-hoja-chips span {
  background: var(--m-fondo); color: var(--m-txt); border-radius: 7px;
  padding: 4px 10px; font-size: 12.5px; font-weight: 600;
}

/* ---------- barra de resumen ---------- */
.fp-pub-res {
  display: flex; align-items: center; gap: 8px; margin: 12px 16px 0;
  padding-bottom: 10px; border-bottom: 1px solid var(--m-borde2);
  font-size: 13.5px; color: var(--m-suave);
}
.fp-pub-res[hidden] { display: none !important; }
.fp-pub-res .ems { display: flex; }
.fp-pub-res .ems span {
  width: 21px; height: 21px; border-radius: 50%; background: var(--m-card);
  border: 1.5px solid var(--m-card); display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; box-shadow: var(--m-sombra);
}
.fp-pub-res .ems span + span { margin-left: -6px; }
.fp-pub-res .nc { margin-left: auto; color: var(--m-suave); background: none; border: 0;
  cursor: pointer; font-size: 13.5px; font-family: inherit; padding: 0; }
.fp-pub-res .nc:hover { text-decoration: underline; }

/* ---------- barra de acciones ---------- */
.fp-pub-acc {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 10px 10px;
}
.fp-pub-acc button, .fp-pub-acc a {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 40px; border: 0; background: none; border-radius: var(--m-r-min);
  color: var(--m-txt); font-weight: 600; font-size: 14.5px; cursor: pointer;
  font-family: inherit; text-decoration: none; transition: background .12s;
}
.fp-pub-acc button:hover, .fp-pub-acc a:hover { background: var(--m-fondo); }
.fp-pub-acc .fa { color: var(--m-suave); }
.fp-reac-b.on, .fp-reac-b.on .fa { color: var(--m-pri); }

/* ---------- popover de reacciones ---------- */
.fp-reac { position: relative; display: flex; }
.fp-reac > button { width: 100%; }
.fp-reac-menu {
  /* al borde izquierdo de la barra: centrado sobre el boton se salia de la
     tarjeta, porque el popover es mas ancho que su columna */
  position: absolute; bottom: calc(100% + 8px); left: 0;
  transform: translateY(6px) scale(.94);
  display: flex; gap: 2px; background: var(--m-card); border: 1px solid var(--m-borde);
  border-radius: var(--m-r-pill); padding: 6px 8px; box-shadow: var(--m-sombra-flot);
  opacity: 0; pointer-events: none; z-index: 30;
  transition: opacity .16s ease, transform .16s ease;
}
.fp-reac.abierto .fp-reac-menu {
  opacity: 1; pointer-events: auto; transform: translateY(0) scale(1);
}
.fp-reac-menu button {
  border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer;
  padding: 3px 5px; border-radius: 50%; transition: transform .12s;
}
.fp-reac-menu button:hover, .fp-reac-menu button:focus-visible { transform: scale(1.32) translateY(-3px); outline: none; }

/* ---------- hilo de comentarios ---------- */
.fp-hilo { background: var(--m-fondo); border-top: 1px solid var(--m-borde2); padding: 14px 16px; }
.fp-hilo[hidden] { display: none !important; }
.fp-com { display: flex; gap: 10px; margin-bottom: 12px; }
.fp-hilo-lista:empty { display: none; }
.fp-hilo-lista .fp-com:last-child { margin-bottom: 14px; }
.fp-com-b {
  background: var(--m-card); border: 1px solid var(--m-borde);
  border-radius: 4px 14px 14px 14px; padding: 9px 13px; min-width: 0;
}
.fp-com-b b { display: block; color: var(--m-tinta); font-size: 14px; font-weight: 700; margin-bottom: 1px; }
.fp-com-b p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--m-txt); word-break: break-word; }
.fp-com-acc { display: flex; gap: 12px; margin: 5px 0 0 13px; font-size: 12px; color: var(--m-suave2); }
.fp-com-acc button { border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
  font-weight: 700; color: var(--m-suave); cursor: pointer; }
.fp-com-acc button:hover { color: var(--m-pri); }
.fp-com-acc button .fa { font-size: 11px; margin-right: 1px; }
.fp-com-acc [data-borrarcom]:hover { color: #b93232; }
.fp-com-cuerpo { min-width: 0; }
/* edicion en linea: la misma caja, sin saltar a otra pantalla */
.fp-com-edit { display: flex; gap: 8px; align-items: center; }
.fp-com-edit input {
  flex: 1; min-width: 0; border: 1px solid var(--m-pri); border-radius: var(--m-r-med);
  padding: 8px 12px; font: inherit; font-size: 14.5px; outline: none; color: var(--m-tinta);
}
.fp-com-edit button {
  border: 0; background: var(--m-pri); color: #fff; border-radius: var(--m-r-pill);
  min-height: 32px; padding: 0 .9rem; font: inherit; font-size: 13.5px;
  font-weight: 700; cursor: pointer;
}
.fp-com-edit button.cancelar { background: none; color: var(--m-suave); font-weight: 600; }
.fp-hilo-aviso {
  margin: 0 0 10px; font-size: 13.5px; padding: .55rem .8rem;
  border-radius: var(--m-r-min); background: var(--m-fondo2); color: var(--m-txt);
}
.fp-hilo-aviso.malo { background: #fdecec; color: #b93232; }
.fp-com-form { display: flex; gap: 10px; align-items: center; }
.fp-com-form .caja {
  flex: 1; display: flex; align-items: center; gap: 8px; background: var(--m-card);
  border: 1px solid var(--m-borde); border-radius: var(--m-r-pill); padding: 4px 4px 4px 16px;
}
.fp-com-form input {
  flex: 1; border: 0; outline: none; font: inherit; font-size: 14.5px;
  background: none; min-height: 36px; color: var(--m-tinta);
}
.fp-com-form button {
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--m-pri);
  color: #fff; cursor: pointer; flex: 0 0 auto; font-size: 14px;
}
.fp-com-form button:hover { background: var(--m-pri-h); }

/* ---------- 5. columna derecha ---------- */
.fp-sug { display: grid; gap: 13px; }
.fp-sug-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fp-sug-item .tx { min-width: 0; flex: 1; overflow: hidden; }
.fp-sug-item .tx a {
  display: block; color: var(--m-tinta); font-weight: 700; font-size: 14px;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-sug-item .tx span { display: block; color: var(--m-suave2); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fp-tend { display: grid; gap: 12px; counter-reset: t; }
.fp-tend a { display: flex; gap: 11px; text-decoration: none; align-items: baseline; }
.fp-tend a::before {
  counter-increment: t; content: "0" counter(t);
  color: var(--m-borde); font-weight: 700; font-size: 15px; flex: 0 0 auto;
}
.fp-tend .tx { min-width: 0; }
.fp-tend .tx b { display: block; color: var(--m-tinta); font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-tend .tx span { color: var(--m-suave2); font-size: 12.5px; }
.fp-tend a:hover .tx b { color: var(--m-pri); }

.fp-evento { background: var(--m-fondo2); border: 1px solid var(--m-borde);
  border-radius: var(--m-r-card); padding: 16px; }
.fp-evento h4 { margin: 0 0 6px; font-size: 15.5px; color: var(--m-tinta); font-weight: 700; }
.fp-evento p { margin: 0 0 13px; font-size: 13.5px; color: var(--m-suave); line-height: 1.45; }
.fp-evento a {
  display: block; text-align: center; border: 1px solid var(--m-pri); color: var(--m-pri) !important;
  border-radius: var(--m-r-min); padding: .58rem; font-weight: 700; font-size: 14px;
  text-decoration: none; background: var(--m-card);
}
.fp-evento a:hover { background: var(--m-pri); color: #fff !important; }

.fp-legal { font-size: 11.5px; color: var(--m-suave2); line-height: 1.7; padding: 0 4px; }
.fp-legal a { color: var(--m-suave2); text-decoration: none; }
.fp-legal a:hover { text-decoration: underline; }

/* ---------- estados ---------- */
.fp-vacio, .fp-invitado {
  background: var(--m-card); border: 1px solid var(--m-borde); border-radius: var(--m-r-card);
  box-shadow: var(--m-sombra); padding: 30px 22px; text-align: center; color: var(--m-suave);
}
.fp-vacio p, .fp-invitado p { margin: 0 0 14px; font-size: 15px; }
.fp-invitado .bs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fp-vacio .b, .fp-invitado .b1, .fp-invitado .b2 {
  display: inline-block; min-height: 38px; padding: .55rem 1.4rem; border-radius: var(--m-r-pill);
  font-weight: 700; font-size: 14.5px; text-decoration: none;
}
.fp-vacio .b, .fp-invitado .b1 { background: var(--m-pri); color: #fff !important; }
.fp-invitado .b2 { border: 1px solid var(--m-borde); color: var(--m-txt) !important; }

/* esqueletos, no ruedas */
.fp-esq { display: grid; gap: 16px; }
.fp-esq[hidden] { display: none !important; }
.fp-esq-card {
  background: var(--m-card); border: 1px solid var(--m-borde);
  border-radius: var(--m-r-card); padding: 16px;
}
.fp-esq-l { height: 12px; border-radius: 6px; background: var(--m-borde2);
  animation: fp-lat 1.1s ease-in-out infinite; }
.fp-esq-card .fila { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.fp-esq-card .fila .av { width: 42px; height: 42px; border-radius: 50%;
  background: var(--m-borde2); animation: fp-lat 1.1s ease-in-out infinite; flex: 0 0 auto; }
@keyframes fp-lat { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
.fp-fin { text-align: center; padding: 20px 0; color: var(--m-suave2); font-size: 13.5px; }
.fp-fin[hidden] { display: none !important; }

/* ---------- barra inferior en movil ---------- */
.fp-bottom { display: none; }
@media (max-width: 1240px) {
  .fp-muro { grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); }
  .fp-muro-side { display: none; }
  .fp-muro-nav { justify-self: stretch; }
}
@media (max-width: 860px) {
  .fp-muro { grid-template-columns: minmax(0, 1fr); gap: 14px;
             padding-top: 16px; padding-bottom: 76px; }
  .fp-muro-nav { display: none; }
  .fp-bottom {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--m-card); border-top: 1px solid var(--m-borde);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .fp-bottom a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 44px; padding: 7px 0; text-decoration: none;
    color: var(--m-suave); font-size: 10.5px; font-weight: 600;
  }
  .fp-bottom a .fa { font-size: 17px; }
  .fp-bottom a.on { color: var(--m-pri); }
  .fp-pub-acc button, .fp-pub-acc a { font-size: 13.5px; }
}

/* --- Listas de seguidos / seguidores -------------------------------- */
.fp-sig { background: #fff; border: 1px solid #e6ecf5; border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.fp-sig h2 { font-size: 1rem; color: #25396f; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.fp-sig h2 span { background: #eef3fb; color: #0058be; border-radius: 999px; padding: 0 .5rem; font-size: .8rem; }
.fp-sig-item { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid #f4f7fb; }
.fp-sig-item:last-child { border-bottom: 0; }
.fp-sig-item .av img, .fp-sig-item .av .ph {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0058be, #2a7fe0); color: #fff; font-weight: 700;
}
.fp-sig-item .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fp-sig-item .tx a { color: #25396f; font-weight: 700; font-size: .9rem; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-sig-item .tx span { color: #90a0b5; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-sig-vacio { color: #90a0b5; font-size: .88rem; margin: 0; }
.fp-sig-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.fp-sig-mini { text-align: center; text-decoration: none; }
.fp-sig-mini .av img, .fp-sig-mini .av .ph {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0058be, #2a7fe0); color: #fff; font-weight: 700; font-size: 1.2rem;
}
.fp-sig-mini .n { display: block; color: #25396f; font-size: .82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ====================================================================
   PEDIDOS ABIERTOS — bloque "Partituras que están pidiendo"

   Se usa en dos sitios con el mismo marcado:
     .fp-ped            portada, ancho completo dentro de .fp-cont
     .fp-ped.fp-ped--lat  lateral de la ficha de partitura, estrecho

   OJO con el nombre: existe además .fp-pedir (el aviso de "¿no está?
   pídela" de la búsqueda). Son bloques distintos. Un chequeo por
   subcadena `.fp-ped` da falso positivo con `.fp-pedir` — fue justo lo
   que impidió que estos estilos llegaran a desplegarse.
   ==================================================================== */
.fp-ped {
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 14px;
  padding: 20px 22px;
  margin: 22px auto 0;
}

.fp-ped-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5fa;
}
.fp-ped-hd h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #25396f;
  line-height: 1.25;
}
.fp-ped-hd a {
  color: #0058be;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.fp-ped-hd a:hover { text-decoration: underline; }

/* la lista: sin viñetas y con cada pedido como fila pulsable */
.fp-ped-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.fp-ped-lista li { margin: 0; }
.fp-ped-lista li + li { border-top: 1px solid #f4f7fb; }
.fp-ped-lista a {
  display: block;
  padding: 11px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .12s;
}
.fp-ped-lista a:hover { background: #f6f9fd; }
.fp-ped-lista .t {
  display: block;
  color: #25396f;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 3px;
}
.fp-ped-lista a:hover .t { color: #0058be; }
.fp-ped-lista .m {
  display: block;
  color: #90a0b5;
  font-size: 13px;
}

.fp-ped-b {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: .7rem 1.4rem;
  background: #0058be;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  transition: background .15s;
}
.fp-ped-b:hover { background: #0049a0; }

/* --- en el lateral de la ficha: más compacto --- */
.fp-ped--lat {
  margin: 0 0 16px;
  padding: 16px;
}
.fp-ped--lat .fp-ped-hd {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-bottom: 12px;
  padding-bottom: 10px;
}
.fp-ped--lat .fp-ped-hd h3 { font-size: 15px; }
.fp-ped--lat .fp-ped-hd a { font-size: 13px; }
.fp-ped--lat .fp-ped-lista .t { font-size: 14px; }
.fp-ped--lat .fp-ped-lista .m { font-size: 12.5px; }
.fp-ped--lat .fp-ped-lista a { padding: 9px 8px; margin: 0 -8px; }
.fp-ped--lat .fp-ped-b { margin-top: 14px; font-size: 14px; padding: .6rem 1rem; }

/* --- en la portada va a ancho completo dentro del contenedor --- */
@media (min-width: 981px) {
  .fp-ped:not(.fp-ped--lat) .fp-ped-lista {
    grid-template-columns: 1fr 1fr;
    gap: 2px 26px;
  }
  .fp-ped:not(.fp-ped--lat) .fp-ped-lista li:nth-child(2) { border-top: 0; }
  .fp-ped:not(.fp-ped--lat) .fp-ped-b { width: auto; display: inline-block; }
}

/* --- iconos de la navegacion del muro (Font Awesome, no emojis) --- */
.fp-mnav a .ic.fa, .fp-mnav a i.ic {
  font-size: 16px; width: 22px; text-align: center; color: #8b9bb0;
  transition: color .12s; flex: 0 0 auto;
}
.fp-mnav a:hover .ic, .fp-mnav a.on .ic { color: #0058be; }
.fp-comp-pie .acc .fa { font-size: 16px; color: #7b8a9e; }
.fp-comp-pie .acc:hover .fa, .fp-comp-pie .acc.on .fa { color: #0058be; }
.fp-pub-pie .com .fa { font-size: 15px; }
.fp-aporte .ic.fa { font-size: 22px; color: #0058be; }


/* ====================================================================
   /limite — se acabaron las 3 descargas del dia.
   Es la pagina que mas gente ve sin querer (640 personas al mes), asi que
   tiene que explicar y ofrecer en una pantalla, sin scroll.
   ==================================================================== */
.fp-lim { padding: 40px 0 60px; }
.fp-lim-caja {
  max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid #e8edf5;
  border-radius: 18px; box-shadow: 0 18px 40px -26px rgba(20, 40, 80, .34);
  padding: 34px 32px 28px; text-align: center;
}
.fp-lim-ic {
  width: 58px; height: 58px; border-radius: 50%; background: #eef4fd; color: #0058be;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  margin: 0 auto 18px;
}
.fp-lim h1 {
  margin: 0 0 10px; font-size: 25px; line-height: 1.25; color: #1b2a4e;
  font-weight: 800; letter-spacing: -.01em;
}
.fp-lim-que { margin: 0 0 6px; font-size: 15px; color: #33405a; }
.fp-lim-que a { color: #0058be; text-decoration: none; }
.fp-lim-que a:hover { text-decoration: underline; }
.fp-lim-cuando { margin: 0 0 20px; font-size: 14.5px; color: #7b8a9e; }

.fp-lim-tuyo {
  background: #f3f7fd; border-radius: 12px; padding: 16px; margin: 0 0 8px;
}
.fp-lim-tuyo b {
  display: block; font-size: 32px; color: #0058be; font-weight: 800; line-height: 1;
}
.fp-lim-tuyo span { display: block; font-size: 13.5px; color: #7b8a9e; margin-top: 5px; }

.fp-lim-sep { position: relative; margin: 24px 0 18px; }
.fp-lim-sep::before {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: #e8edf5;
}
.fp-lim-sep span {
  position: relative; background: #fff; padding: 0 14px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em; color: #93a2b8; font-weight: 700;
}

.fp-lim-plan {
  border: 1.5px solid #0058be; border-radius: 14px; padding: 22px 20px; text-align: left;
}
.fp-lim-plan h2 {
  margin: 0 0 14px; font-size: 17px; color: #1b2a4e; font-weight: 800; text-align: center;
}
.fp-lim-plan ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.fp-lim-plan li {
  display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #33405a;
  line-height: 1.45;
}
.fp-lim-plan li .fa { color: #1a9a5b; margin-top: 3px; flex: 0 0 auto; }
.fp-lim-precio { text-align: center; margin: 0 0 16px; }
.fp-lim-precio b { font-size: 34px; color: #1b2a4e; font-weight: 800; letter-spacing: -.02em; }
.fp-lim-precio span { display: block; font-size: 13px; color: #7b8a9e; margin-top: 3px; }
.fp-lim-cta {
  display: block; text-align: center; background: #0058be; color: #fff !important;
  border-radius: 10px; padding: .85rem; font-weight: 700; font-size: 15.5px;
  text-decoration: none;
}
.fp-lim-cta:hover { background: #0049a0; }

.fp-lim-pie { margin-top: 20px; font-size: 13.5px; color: #93a2b8; }
.fp-lim-pie a { color: #7b8a9e; text-decoration: none; }
.fp-lim-pie a:hover { text-decoration: underline; color: #0058be; }

@media (max-width: 560px) {
  .fp-lim { padding: 20px 0 40px; }
  .fp-lim-caja { padding: 26px 20px 22px; border-radius: 14px; }
  .fp-lim h1 { font-size: 21px; }
}


/* Tramos del pase local: el importe grande solo, en pesos, es lo que espanta;
   el selector deja elegir un desembolso pequeno. */
/* Tres columnas iguales: nunca se parte en dos filas ni bailan los anchos,
   diga lo que diga el texto en cada idioma. */
.fppl-tramos{
  /* minmax(0,1fr) y no 1fr: una pista 1fr NUNCA baja de su min-content, asi
     que los tres botones empujaban el fondo fuera de la tarjeta. */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0 0 14px;
  background:#f1f5fa;border-radius:999px;padding:3px;max-width:100%;overflow:hidden;}
.fppl-tramos button{
  min-width:0;min-height:32px;padding:0 .15rem;border:0;background:none;
  border-radius:999px;cursor:pointer;font:inherit;font-size:clamp(11px,2.9vw,12.5px);
  font-weight:700;color:#5a6b84;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  transition:background .14s,color .14s,box-shadow .14s;}
.fppl-tramos button:hover{color:#0058be;}
.fppl-tramos button.on{background:#fff;color:#0058be;box-shadow:0 1px 3px rgba(20,40,80,.14);}
/* El importe: que quepa sea cual sea la moneda (31.306 COP, 558.695 IDR...) */
.fppl .fppl-pr{font-size:clamp(21px,5.6vw,28px);line-height:1.15;white-space:nowrap;}
.fppl .fppl-sub{font-size:12.5px;line-height:1.5;}
.fppl .fppl-sub [data-out=mes]{font-weight:800;color:#1b2a4e;}
.fppl .fppl-usd{color:#93a2b8;font-weight:600;}


/* ====================================================================
   Categoria que arranca. Merengue se abrio con 10 partituras y la
   comunidad subio las otras 379: el bloque es lo que convierte una
   categoria vacia en una que se llena.
   ==================================================================== */
.fp-aporta {
  display: flex; gap: 18px; align-items: flex-start;
  background: linear-gradient(180deg, #eef4fd 0%, #f7fafd 100%);
  border: 1px solid #dbe6f5; border-radius: 16px;
  padding: 22px 24px; margin: 0 0 22px;
}
.fp-aporta-ic {
  width: 46px; height: 46px; border-radius: 12px; background: #0058be; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  flex: 0 0 auto;
}
.fp-aporta-tx { min-width: 0; }
.fp-aporta h2 {
  margin: 0 0 7px; font-size: 19px; line-height: 1.25; color: #1b2a4e; font-weight: 800;
}
.fp-aporta p {
  margin: 0 0 15px; font-size: 14.5px; line-height: 1.55; color: #46566e;
  max-width: 62ch;
}
.fp-aporta-bs { display: flex; gap: 10px; flex-wrap: wrap; }
.fp-aporta-bs a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 40px;
  padding: 0 1.25rem; border-radius: 10px; font-weight: 700; font-size: 14.5px;
  text-decoration: none;
}
.fp-aporta-bs .b1 { background: #0058be; color: #fff !important; }
.fp-aporta-bs .b1:hover { background: #0049a0; }
.fp-aporta-bs .b2 { border: 1px solid #c9d8ec; color: #33405a !important; background: #fff; }
.fp-aporta-bs .b2:hover { background: #eef4fd; }
@media (max-width: 640px) {
  .fp-aporta { flex-direction: column; gap: 12px; padding: 18px; }
  .fp-aporta h2 { font-size: 17px; }
  .fp-aporta-bs a { flex: 1 1 auto; justify-content: center; }
}


/* Miniatura de partitura dentro de una tarjeta apaisada: se encuadra por
   arriba, que es donde esta el titulo y los primeros compases. */
.fp-card-photo .fp-card-mini {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  background: #fff;
}


/* Archivo no disponible: en vez de un callejon sin salida, dos caminos. */
.fp-falta-bs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.fp-falta-bs a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 42px;
  padding: 0 1.25rem; border-radius: 10px; font-weight: 700; font-size: 14.5px;
  text-decoration: none; transition: background .15s;
}
.fp-falta-bs .b1 { background: #0058be; color: #fff !important; }
.fp-falta-bs .b1:hover { background: #0049a0; }
.fp-falta-bs .b2 { border: 1px solid #c9d8ec; color: #33405a !important; background: #fff; }
.fp-falta-bs .b2:hover { background: #eef4fd; }
@media (max-width: 560px) { .fp-falta-bs a { flex: 1 1 auto; justify-content: center; } }


/* Probar la partitura en el piano virtual. Va en las fichas de piano. */
.fp-probar-piano {
  display: flex; align-items: center; gap: 14px; margin: 18px 0 6px;
  padding: 14px 18px; border: 1px solid #c9d8ec; border-radius: 12px;
  background: linear-gradient(180deg, #f7fbff, #eef4fd);
  text-decoration: none; color: #1b2a4e !important; transition: border-color .15s, transform .15s;
}
.fp-probar-piano:hover { border-color: #0058be; transform: translateY(-1px); text-decoration: none; }
.fp-probar-piano .ic {
  flex: 0 0 42px; height: 42px; border-radius: 10px; background: #0058be; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
}
.fp-probar-piano .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-probar-piano .tx strong { font-weight: 700; font-size: 15px; }
.fp-probar-piano .tx em { font-style: normal; font-size: 13px; color: #5b6b8a; }
.fp-probar-piano .ar { margin-left: auto; color: #0058be; font-size: 20px; }
@media (max-width: 560px) { .fp-probar-piano .ar { display: none; } }


/* Menu de la publicacion: editar o borrar la propia. */
.fp-pub-menu { position: relative; }
.fp-pub-opts {
  position: absolute; right: 0; top: 100%; z-index: 40; min-width: 148px;
  background: #fff; border: 1px solid #e6ecf3; border-radius: 12px;
  box-shadow: 0 12px 28px -12px rgba(20,40,80,.28); padding: 6px; display: grid; gap: 2px;
}
.fp-pub-opts button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; color: #33405a; cursor: pointer;
}
.fp-pub-opts button:hover { background: #eef4fd; color: #0058be; }
/* display:grid pisa el display:none que el navegador da a [hidden],
   asi que el menu se quedaba abierto para siempre. */
.fp-pub-opts[hidden] { display: none !important; }
.fp-ed-tx {
  width: 100%; min-height: 88px; border: 1px solid #c9d8ec; border-radius: 10px;
  padding: 10px 12px; font: inherit; color: #33405a; resize: vertical;
}
.fp-ed-bs { display: flex; gap: 8px; margin-top: 8px; }
.fp-ed-bs .ok, .fp-ed-bs .no {
  border: 0; border-radius: 9px; padding: 8px 18px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.fp-ed-bs .ok { background: #0058be; color: #fff; }
.fp-ed-bs .no { background: #eef2f7; color: #5b6b8a; }



/* Listas de enlaces entre partituras y MIDIs (piano, ficha de MIDI, ficha de
   partitura). Van numeradas porque estan ordenadas por descargas: sin el numero
   son doce titulos identicos y no se sabe por donde empezar. */
.fp-piano-parts, .fp-midi-parts, .fp-part-midi { margin: 30px 0 10px; }
.fp-piano-parts h2, .fp-midi-parts h2, .fp-part-midi h2 {
  font-size: 20px; font-weight: 800; color: #13203a; margin: 0 0 5px; letter-spacing: -.01em;
}
.fp-piano-parts > p, .fp-midi-parts > p, .fp-part-midi > p {
  color: #5b6b8a; font-size: 14.5px; line-height: 1.5; margin: 0 0 16px; max-width: 62ch;
}
.fp-piano-grid, .fp-midi-grid, .fp-part-midi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 9px; margin: 0 0 16px; padding: 0; list-style: none;
}
/* cada tarjeta es a su vez una rejilla: el numero a la izquierda ocupando las
   dos filas, y a la derecha el titulo encima de las descargas */
.fp-piano-grid > a, .fp-midi-grid > a {
  display: grid !important; grid-template-columns: 26px 1fr;
  column-gap: 11px; align-items: center;
  padding: 11px 14px; border: 1px solid #dde5f0; border-radius: 12px;
  background: #fff; text-decoration: none !important; color: #1b2a4e !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fp-part-midi-grid > a {
  display: flex !important; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid #dde5f0; border-radius: 12px;
  background: #fff; text-decoration: none !important; color: #1b2a4e !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fp-piano-grid > a:hover, .fp-midi-grid > a:hover, .fp-part-midi-grid > a:hover {
  border-color: #0058be; box-shadow: 0 3px 12px rgba(0,88,190,.10); transform: translateY(-1px);
}
/* el numero de orden, pegado a la izquierda y a la altura de las dos lineas */
.fp-piano-grid .n, .fp-midi-grid .n {
  grid-row: 1 / span 2; grid-column: 1;
  width: 26px; height: 26px; border-radius: 7px;
  background: #eef4fd; color: #47679c;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.fp-piano-grid .t, .fp-midi-grid .t { grid-column: 2; }
.fp-piano-grid .d, .fp-midi-grid .d { grid-column: 2; }
.fp-part-midi-grid .ic {
  flex: 0 0 30px; height: 30px; border-radius: 8px; background: #eef4fd; color: #0058be;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.fp-piano-grid .t, .fp-midi-grid .t, .fp-part-midi-grid .t {
  display: block; font-weight: 650; font-size: 14.5px; line-height: 1.35; color: #16233f;
}
.fp-piano-grid .d, .fp-midi-grid .d, .fp-part-midi-grid .d {
  display: block; font-size: 12.5px; color: #7a8aa3; margin-top: 1px;
}
.fp-part-midi-grid .tx { display: flex; flex-direction: column; min-width: 0; }
.fp-piano-todas {
  display: inline-block; font-weight: 700; font-size: 14.5px;
  color: #0058be !important; text-decoration: none !important;
}
.fp-piano-todas:hover { text-decoration: underline !important; }
@media (max-width: 600px) {
  .fp-piano-grid, .fp-midi-grid, .fp-part-midi-grid { grid-template-columns: 1fr; }
}





/* Aviso para quien no ha entrado, donde iria la caja de comentar. Mismo tono
   que .fp-invitado del feed: informa sin gritar. */
.fp-com-login {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 10px; padding: 11px 14px;
  background: #f6f9fe; border: 1px solid #e3e9f2; border-radius: 12px;
  font-size: 13.5px; color: #55627a;
}
.fp-com-login .fa { color: #8b99ae; }
.fp-com-login span { flex: 1 1 auto; }
.fp-com-login a {
  text-decoration: none; font-weight: 700; font-size: 13px;
  padding: 6px 14px; border-radius: 20px; white-space: nowrap;
}
.fp-com-login .b1 { background: #0058be; color: #fff; }
.fp-com-login .b2 { background: #fff; color: #0058be; border: 1px solid #cfdcef; }
.fp-com-login a:hover { filter: brightness(1.06); }
@media (max-width: 520px) {
  .fp-com-login span { flex: 1 1 100%; }
}

/* Barra de "completa tu perfil". El CSS estaba dentro del elemento y viajaba
   repetido en cada pagina que lo pintaba. */
/* Fija arriba del todo y por encima del menu, que es .navbar-fixed-top
   con z-index 1100. Sin esto la barra quedaba debajo y cortada. */
.fp-cperfil{position:fixed;top:0;left:0;right:0;z-index:1200;background:linear-gradient(90deg,#0058be,#2170e4);color:#fff;
  font-family:'Inter',system-ui,sans-serif;box-shadow:0 2px 10px -4px rgba(16,32,64,.35);}
.fp-cperfil-in{max-width:1500px;margin:0 auto;padding:10px 24px;display:flex;
  align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;}
.fp-cperfil-txt{font-size:14px;font-weight:500;line-height:1.4;}
.fp-cperfil-txt i{margin-right:6px;opacity:.9;}
.fp-cperfil-btn{background:#fff;color:#0058be;padding:7px 18px;border-radius:999px;
  font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;
  transition:background .15s,transform .15s;}
.fp-cperfil-btn:hover{background:#eaf1ff;color:#0058be;text-decoration:none;transform:translateY(-1px);}
@media(max-width:600px){.fp-cperfil-in{padding:9px 14px;gap:10px;}.fp-cperfil-txt{font-size:12.5px;}}

/* Visible para buscadores y lectores de pantalla, no en pantalla.
   No se usa display:none: eso lo esconderia tambien de ellos. */
.fp-solo-lectores{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ===== Barra en portatiles (2026-09-21) ==============================
   La barra pedia 1500 px y la hamburguesa solo salia a 1100: de 1101 a
   1500 se salia de la pantalla y cortaba "Registrarse" y el idioma.
   Medido lo que pide con la sesion cerrada en los 7 idiomas:
     en 1472 · it 1484 · de 1490 · fr 1500 · pt 1500 · es 1506 · ru 1568
   El ruso no cabia ni en pantallas grandes (el contenedor topa en 1500).
   Se dimensiona todo contra el ruso, que es el peor caso.
   Los selectores llevan .navbar-nav ademas de .fp-nav-* para ganar por
   especificidad a custom.css, que carga antes y fija padding 30px 15px. */

/* --- compresion comun a toda la barra de escritorio --- */
@media (min-width:1280px){
  .navbar-inverse .container{padding-left:18px !important;padding-right:18px !important;}
  .navbar-inverse .navbar-collapse>.fp-nav-main{padding-right:16px !important;}
  .navbar-inverse .navbar-nav.fp-nav-main>li>a{padding-left:9px !important;padding-right:9px !important;font-size:15px !important;}
  .navbar-inverse .navbar-nav.fp-nav-right>li.fp-login>a{padding-left:9px !important;padding-right:9px !important;font-size:15px !important;}
  .navbar-inverse .navbar-nav.fp-nav-right>li.fp-share>a{padding:8px 12px !important;font-size:15px !important;}
  .navbar-inverse .navbar-nav.fp-nav-right>li.fp-register>a{padding:9px 15px !important;font-size:15px !important;}
}

/* --- 1280-1439: ademas logo mas pequeno y sin "Compartir" --- */
@media (min-width:1280px) and (max-width:1439px){
  .navbar-inverse .navbar-brand{font-size:19px !important;}
  .navbar-inverse .navbar-nav.fp-nav-right>li.fp-share{display:none !important;}
}

/* --- 1440 en adelante: cabe todo, solo se baja un punto el logo --- */
@media (min-width:1440px){
  .navbar-inverse .navbar-brand{font-size:23px !important;}
}