:root{
  --letras-lime: #b7d300;
  --line: #eee;
  --shell-bg: #f2f2f2;
  --shell-border: #e6e6e6;
  --text: #222;
  --muted: #666;
  --header-h: 64px;
  --maxw: 1000px;
  --gris:#c8c8c8;
  --orange:#ff6a00;
}




.mcp-auth-pill .mcp-auth-avatar::before{
  content:""; width:20px; height:20px; display:block;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%23ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="8.5" r="3.5"/><path d="M19 19c0-3.3-3.1-6-7-6s-7 2.7-7 6"/></svg>')
    center/contain no-repeat;
    
}

.mcp-auth-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:9999px;
  border:0; background:#c6d600; cursor:pointer;
  position:relative;
  box-shadow: inset 0 0 0 2px #dfe87a;
  font-size:0; line-height:0;
}



/* ===== Header base + línea superior lima ===== */
.site-header{
  position: sticky; top: 0; z-index: 1000; background:#fff; border-bottom:1px solid var(--line);
}
.site-header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--gris);
}

/* Contenedor centrado */

.mcp-header__inner{
  max-width: var(--maxw); margin: 0 auto; padding: 0 16px;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 12px; align-items: center;
}

/* ===== Izquierda ===== */
.mcp-header__left{ display:flex; align-items:center; gap:10px;}
.mcp-burger{
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background:#fff; cursor:pointer; display:grid; place-items:center; padding:0 6px;
}
.mcp-burger__line{ width:18px; height:2px; background:#333; border-radius:2px; display:block; margin:3px 0; }

.mcp-brand{ display:flex; align-items:center; gap:8px; text-decoration:none; }
.custom-logo-link img{ max-height: 38px; width: 100%; }
.mcp-brand__text{
  font-weight: 800; font-size: 22px; color: var(--letras-lime);
  text-transform: lowercase; letter-spacing: .2px;
}
.mcp-brand__star{ color: var(--letras-lime); margin-left:2px; }

/* ===== Centro (buscador) ===== */
.mcp-header__center{ display:flex; align-items:center; justify-content:center; position:relative; }

.mcp-search-shell{
  position: relative; width: 100%; max-width: 760px; height: 38px;
  background: var(--shell-bg); border: 1px solid var(--shell-border); border-radius: 12px;
  display:flex; align-items:center; padding: 0 46px 0 14px;
}
/* el shortcode por dentro */
.mcp-search-shell .header-search,
.mcp-search-shell .header-search form{ width:100%; }
.mcp-search-shell input[type="search"],
.mcp-search-shell input[type="text"]{
  width:100%; height:38px; background:transparent; border:0; outline:0; font-size:16px; color:var(--text);
}
.mcp-search-sep{
  position:absolute; right:42px; top:8px; bottom:8px; width:1px; background:#d9d9d9;
}
.mcp-search-icon{
  position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:18px; opacity:.65;
}

/* Botón mobile (ícono suelto) */
.mcp-search-btn{
  display:none; background:transparent; border:0; font-size:22px; line-height:1; cursor:pointer; margin-left:8px;
}

/* ===== Derecha (pill verde login) ===== */
.mcp-header__right{ display:flex; justify-content:flex-end; }
.mcp-auth-pill{
  display:flex;
  align-items:center;
  gap:5px;
  position:relative;
  background: #ff6a00;
  color:#fff;
  border-radius: 999px;
  padding: 5px 10px;
}
.mcp-auth-avatar{ filter: none; }
.mcp-auth-text a,
.mcp-auth-text button{
  color:#fff !important; text-decoration:none !important; background:transparent !important;
  border:0 !important; padding:0 !important; font-weight:700; font-size:14px;
}
.mcp-auth-divider{
  width:1px; height:16px; background:rgba(255,255,255,.6);
}
.mcp-auth-kebab{
  background:transparent; border:0; color:#fff; font-size:18px; cursor:pointer; line-height:1;
}
.mcp-auth-dot{
  position:absolute; right:6px; top:-2px; width:8px; height:8px; background:#ff2a2a; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.95);
}

/* ===== Buscador móvil (deslizable debajo del header) ===== */
.mcp-mobile-search{ border-bottom:1px solid var(--line); background:#fff; }
.mcp-mobile-search .header-search{ max-width: var(--maxw); margin: 8px auto; padding: 0 16px; }

/* ===== Responsive ===== */
@media (max-width: 950px){

  
  .mcp-header__inner{ 
  gap:30px;
 }

  /* pill => redondo tipo app */
  .mcp-auth-pill{
    width:38px; height:38px; padding:0; justify-content:center; border-radius:999px;
  }
  .mcp-auth-avatar{ font-size:18px; }
  .mcp-auth-text, .mcp-auth-divider, .mcp-auth-kebab{ display:none; }








}


@media (max-width: 650px){
  .mcp-header__center{justify-content: right;}
 
  .mcp-header__inner{ grid-template-columns: auto 1fr auto; }

  /* oculta buscador ancho y muestra ícono */
  .mcp-search-shell{ display:none; }
  .mcp-search-btn{ display:inline-block; }

}



@media (max-width: 420px){
  .mcp-brand__text{ font-size:20px; }
  .custom-logo-link img {
    max-height: 30px;
    width: 100%;
}
.mcp-auth-pill{
  width:30px; height:30px;
}
}








/* ===== Overlay (encima de todo) ===== */
.mcp-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:saturate(120%) blur(2px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:11000;
}
.mcp-overlay.active{ opacity:1; pointer-events:auto; }

/* Evitar scroll del body cuando hay panel abierto */
body.no-scroll{ overflow:hidden; }

/* ===== Offcanvas de Usuario (derecha → izquierda) ===== */
.mcp-user-offcanvas{
  position:fixed; top:0; right:0; bottom:0;
  width:380px; max-width:calc(100% - 56px);
  background:#fff; border-left:1px solid #eee;
  box-shadow:-20px 0 40px rgba(0,0,0,.08);
  transform:translateX(100%); transition:transform .28s ease;
  z-index:11010; display:flex; flex-direction:column;
}
.mcp-user-offcanvas.is-open{ transform:translateX(0); }

/* Cabecera del panel */
.mcp-user-panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #eee;
}
.mcp-user-panel__head h2{ margin:0; font-size:18px; font-weight:800; }
.mcp-user-close{ background:transparent; border:0; font-size:10px; cursor:pointer; }

/* Cuerpo del panel */
.mcp-user-panel__body{ padding:12px 16px 18px; overflow:auto; }

/* Tarjeta de perfil */
.u-card{
  background:#fff; border:1px solid #eee; border-radius:14px;
  padding:12px; display:flex; align-items:center; gap:12px;
  text-decoration:none; color:#111; margin-bottom:12px;
}
.u-card--profile{ box-shadow:0 8px 20px rgba(0,0,0,.04); }
.u-avatar{
  width:48px; height:48px; border-radius:12px; background:#eee center/cover no-repeat; flex:0 0 auto;
}
.u-id{ min-width:0; }
.u-name{ display:block; font-weight:800; line-height:1.2; }
.u-mail{ color:#666; font-size:12px; }
.u-arrow{ margin-left:auto; opacity:.5; }

/* Grid de accesos rápidos */
.u-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0; }
.u-tile{
  display:flex; align-items:center; gap:10px; padding:12px;
  background:#fafafa; border:1px solid #eee; border-radius:14px;
  text-decoration:none; color:#111; font-weight:700; font-size: 12px;
}
.u-tile:hover{ background:#f5f5f5; }

/* Ajustes simples */
.u-section{ border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; padding:10px 0; margin:8px 0 14px; }
.u-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 4px; }
.u-select{ background:#fff; border:1px solid #e6e6e6; border-radius:999px; padding:6px 10px; cursor:pointer; }

/* Acciones finales */
.u-actions{ display:flex; gap:10px; margin-top:35px;}
.u-btn{
  display:inline-block; flex:1 1 auto; text-align:center;
  background:var(--orange); color:#fff; border-radius:999px; padding:10px 12px;
  text-decoration:none; font-weight:800;
}
.u-btn--light{ background:#fff; color:#111; border:1px solid #e6e6e6; }



/* Desactivar dropdown antiguo de cuenta */
.mcp-user-dropdown,
.user-menu-dropdown,
.mcp-auth-pill .dropdown,
.mcp-auth-pill [data-dropdown] {
  display: none !important;
  visibility: hidden !important;
}




/* Avatar-only cuando el usuario está logueado */
.mcp-user-avatar-btn{
  position:relative;
  width:42px; height:42px;
  border-radius:9999px;
  padding:0; border:2px solid #d4df34; /* tono verde letras */
  background:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.mcp-user-avatar-btn:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); }
.mcp-user-avatar-btn:focus{ outline:2px solid #d4df34; outline-offset:2px; }
.mcp-user-avatar-btn img{
  width:100%; height:100%; border-radius:9999px; object-fit:cover; display:block;
}

/* Opcional: puntito de notificación (oculto por defecto) */
.mcp-user-avatar-btn::after{
  content:""; position:absolute; width:10px; height:10px; border-radius:50%;
  background:#ff2d2d; border:2px solid #fff; top:-2px; right:-2px; display:none;
}
/* .mcp-user-avatar-btn.has-notif::after{ display:block; } */

/* Tamaño en móviles */




/* === Botón hamburguesa (grande) === */
.mcp-header .menu-toggle.mcp-burger{
  width:48px;                 /* antes 36px */
  height: 40px;
  border-radius: 4px;         /* esquinas suaves */
  background:#fff;            /* fondo blanco como Letras */
  border: none;   /* borde suave */
  color:#333;                 /* color del trazo del SVG */
  display:inline-flex;        /* asegúrate que se vea en desktop */
  align-items:center;
  justify-content:center;
  padding:0;
  /* box-shadow:0 1px 3px rgba(0,0,0,.06); */
}

.mcp-burger-ic{               /* tamaño del ícono interno */
  width:26px;
  height:26px;
}

.mcp-header .menu-toggle.mcp-burger:hover{
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.mcp-header .menu-toggle.mcp-burger:focus{
  outline:none;
 /* box-shadow:0 0 0 3px #d4df34; */ /* aro verde al enfocar */
}






/*icono del buscador*/
/* Posicionamiento del icono dentro del campo */
.mcp-search-shell{ position:relative; }
.mcp-search-shell .mcp-song-search-form{ position:relative; }

/* Deja espacio para el icono */
.mcp-search-shell .mcp-song-search-form .mcp_song_search{
  padding-right:10px; /* evita que el texto choque con la lupa */
}

/* Barrita divisoria */
.mcp-search-sep{
  position:absolute; right:46px; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:#d9d9d9; border-radius:1px;
}

/* Botón de la lupa (fino, elegante) */
.mcp-search-icon{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  border:0; background:transparent; color:#2b2b2b; cursor:pointer;
}
.mcp-search-icon:hover{ background:rgba(0,0,0,.04); }
.mcp-search-icon:focus{ outline:2px solid #d4df34; outline-offset:2px; }
.mcp-search-ic{ width:20px; height:20px; display:block; }






.mcp-auth-avatar{
  border:0; background:transparent; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  cursor:pointer;
}