/* Cabecera: marca (badge azul + «Offside Clo»), menú de perfil (desplegable en escritorio, hoja abajo en móvil)
   y pastillas de ligas/países en la hoja del menú. Se carga desde inc/secciones.php. */

/* Marca */
.brand { gap: 10px; }
.brand img.brand-mark { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 2px 8px rgba(10, 132, 255, .22); transition: transform .35s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.04); }
.brand-word { font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
.brand-word span { color: var(--brand); }
.brand .team-crest[hidden] { display: none; }
/* Móvil: logo + «Offside Clo» a la izquierda; buscar, cuenta, carrito y hamburguesa al final (sin hueco en el centro). */
@media (max-width: 1039px) {
	.header-row { display: flex; gap: 0; }
	.brand { order: 0; margin-right: auto; justify-self: auto; gap: 8px; min-height: 44px; min-width: 0; }
	.brand-word { display: block; font-size: 1rem; white-space: nowrap; }
	.header-actions { order: 1; }
	.menu-btn { order: 2; }
}

/* Perfil (el menú vive fuera de .site-header: su backdrop-filter haría de contenedor del position:fixed) */
.profile-btn { position: relative; }
.profile-btn.is-in::after { content: ""; position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px #fff; }
.profile-btn[aria-expanded="true"] { background: var(--bg-2); }

.profile-menu { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; background: rgba(11, 13, 18, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--ease); }
.profile-menu[hidden] { display: none; } /* sin esto el display:flex ganaba al atributo hidden y una capa invisible a pantalla completa se comía los clics (logo → «Dónde está mi pedido») */
.profile-menu.is-open { opacity: 1; }
.profile-panel { width: 100%; max-height: min(86vh, 640px); overflow: auto; background: #fff; border-radius: 24px 24px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(24px); transition: transform .3s var(--ease); outline: none; }
.profile-menu.is-open .profile-panel { transform: none; }
.profile-panel::before { content: ""; display: block; width: 40px; height: 4px; margin: 4px auto 12px; border-radius: 2px; background: var(--line); }

.profile-head { display: grid; grid-template-columns: 44px 1fr 44px; gap: 12px; align-items: center; padding: 4px 0 12px; }
.profile-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 1.15rem; }
.profile-head b { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
.profile-head small { color: var(--ink-3); font-size: .85rem; }

.profile-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.profile-list a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px; border-radius: var(--r-m, 14px); color: var(--ink); text-decoration: none; font-weight: 600; transition: background .2s var(--ease); }
.profile-list a:hover, .profile-list a:focus-visible { background: var(--bg-2); }
.profile-list svg { width: 22px; height: 22px; flex: none; color: var(--brand); }
.profile-list span { flex: 1; }
.profile-list .is-creator { background: var(--dark, #0b0d12); color: #fff; margin-top: 6px; }
.profile-list .is-creator svg { color: #fff; }
.profile-list .is-creator:hover, .profile-list .is-creator:focus-visible { background: #1a1f2b; }
.profile-n { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--brand); background: rgba(10, 132, 255, .1); border-radius: 999px; padding: 2px 9px; }
.profile-n[data-n="0"] { display: none; }
.profile-foot { display: flex; gap: 16px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .85rem; }
.profile-foot a { color: var(--ink-3); text-decoration: none; }
.profile-foot a:hover { color: var(--ink); }

@media (min-width: 1040px) {
	.profile-menu { inset: auto; display: block; /* top/right los pone header.js junto al botón */ background: none; backdrop-filter: none; -webkit-backdrop-filter: none; width: 320px; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .2s var(--ease), transform .2s var(--ease); }
	.profile-menu.is-open { transform: none; }
	.profile-panel { max-height: none; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(11, 13, 18, .35), 0 2px 8px rgba(11, 13, 18, .06); padding: 14px 10px 10px; transform: none; }
	.profile-panel::before, .profile-close { display: none; }
	.profile-head { grid-template-columns: 40px 1fr; padding: 2px 6px 10px; }
	.profile-avatar { width: 40px; height: 40px; font-size: 1rem; }
	.profile-list a { min-height: 42px; }
	.profile-foot { padding: 10px 6px 0; }
}

/* Pastillas de ligas y países en la hoja del menú móvil */
.menu-pills-title { margin: 18px 0 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.menu-pills { margin: 0 calc(-1 * var(--gutter, 16px)); }
.menu-pills .rail-track { display: flex; gap: 8px; padding: 2px var(--gutter, 16px); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.menu-pills .rail-track::-webkit-scrollbar { display: none; }
.menu-pill { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; scroll-snap-align: start; }
.menu-pill:active { background: var(--bg-2); }
.menu-pill-ico, .menu-pill .crest { width: 26px; height: 26px; }
.menu-pill .crest-fallback { font-size: .6rem; }

@media (prefers-reduced-motion: reduce) {
	.brand-mark, .profile-menu, .profile-panel, .profile-list a { transition: none; }
	.brand:hover .brand-mark { transform: none; }
}