html, body {
  margin: 0;
  padding: 0;
  height: 100%;
   font-family:arial;
}
.main-content{
  height: 100%;
}

.page-wrapper {
  flex-direction: column;
 
}

main {
  flex: 1;
}



.mcp-breadcrumb {
  font-size: 13px;
  color: #777;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
  font-family: sans-serif;
}

.mcp-breadcrumb a {
  color: #555;
  text-decoration: none;
  text-transform: lowercase;
}

.mcp-breadcrumb a:hover {
  text-decoration: none;
  color:#ff6600;
}
.mcp-breadcrumb a:active {
	color: green;
}

.mcp-breadcrumb span {
  color: #222;
  text-transform: lowercase;
}

.mcp-breadcrumb .separator {
  color: #aaa;
  font-size: 12px;
  margin: 0 4px;
}





.mcp-song-versions-page{
    max-width:960;
}



.site-title {
  font-weight: bold;
  font-size: 18px;
}

/*pagina mi cuenta/ contribuciones*/

.mcp-user-contributions a{text-decoration: none;}


/*pagina mi cuenta/ contribuciones*/

/* Mobile layout */
@media screen and (max-width: 615px) {
   .custom-logo-link{
    margin-top:4px;
}
   
}


@media screen and (max-width: 615px) {

.login-bt{
    display:inline;
}
.mcp-user-dropdown {
    position: absolute;
    display: flex
;
    right: 0;
    top: 15px;
}
.logo-menu {
    display: flex;
    justify-content: space-between;
    width: 165px;
    
}
}



/*no login page*/
/* ===== Bloque: usuario no logueado ===== */
.mcp-not-logged {
  text-align: center;
  padding: 20px 20px;
  max-width: 520px;
  margin: 20px auto;
  background: #fff;

}

.mcp-login-required-img {
  max-width: 300px;
  margin: 0 auto 24px;
  display: block;
  height: auto;
}

.mcp-login-message {
  font-size: 40px;
  font-weight: 600;
  color: #333;
  margin-bottom: 18px;
}

.mcp-login-button {
  display: inline-block;
  padding: 12px 28px;
  background: #ff6600;
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background .25s ease, transform .15s ease;
}

.mcp-login-button:hover {
  background: #e05500;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 600px) {
  .mcp-not-logged { padding: 40px 16px; margin: 40px 16px; }
  .mcp-login-required-img { max-width: 140px; margin-bottom: 18px; }
  .mcp-login-message { font-size: 16px; }
  .mcp-login-button { padding: 10px 22px; font-size: 15px; }
}





/* ===== Bottom Navigation (mobile) ===== */
.mcp-bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100000; /* sobre el contenido */
  display: none;   /* oculto por defecto (solo móvil) */
  height: 62px;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -4px 12px rgba(0,0,0,.06);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 680px){
  .mcp-bottom-nav{ display: grid; }
  /* Reservar espacio para que no tape el contenido */
  body{ padding-bottom: calc(62px + max(env(safe-area-inset-bottom, 0px), 0px)); }
}

.mcp-bnav-item{
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: #333;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  position: relative;
  background: transparent;
  border: 0; margin: 0; padding: 0;
}

.mcp-bnav-icon{
  width: 24px; height: 24px;
  display: grid; place-items: center;
}
.mcp-bnav-icon svg{ width: 22px; height: 22px; fill: currentColor; }

.mcp-bnav-item:focus-visible{
  outline: 2px solid #ff7a00;
  outline-offset: 2px;
  border-radius: 10px;
}

.mcp-bnav-item.is-active{ color: #ff5a00; }
.mcp-bnav-item.is-active::after{
  content:"";
  position:absolute; bottom: 0;
  width: 28px; height: 3px;
  border-radius: 999px;
  background: currentColor;
}

/* Botón central "Buscar" un poco destacado */
.mcp-bnav-search .mcp-bnav-icon{
  width: 40px; height: 40px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}


/* ===== Bottom Navigation (oculto por defecto) ===== */
.mcp-bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100000;
  display: none;   /* 🔒 oculto en desktop */
  height: 62px;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -4px 12px rgba(0,0,0,.06);
  grid-template-columns: repeat(5, 1fr);
}

/* ===== Mostrar solo en móviles (≤980px) ===== */
@media (max-width: 680px){
  .mcp-bottom-nav{ 
    display: grid;   /* 🔓 se muestra */
  }

  /* Reservar espacio para que no tape contenido */
  body{ 
    padding-bottom: calc(62px + max(env(safe-area-inset-bottom, 0px), 0px)); 
  }
}