/* =============================================================================
   MISQUAD · CABECERA V2 de las pantallas (includes/cabecera_version.php)
   -----------------------------------------------------------------------------
   El lenguaje de «Servicios del club» sobre el HTML de siempre de la cabecera
   (includes/cabecera_*.php + print_select_temporadas.php): cristal con un filo
   de color arriba; a la izquierda el menu y donde se esta (migas y titulo);
   Tutoriales, idioma, temporada, avisos, el tema y la ficha
   del club o la persona en una pieza. js/cabecera_v2.js pone la clase .mqc2 en
   la cabecera, añade esas piezas y quita el blanco escrito en linea.
   Sigue el tema de la pantalla: claro por defecto, oscuro con .mqc2--oscuro
   (html[data-tema="oscuro"] o la pantalla de «Servicios del club», que es oscura).
   En el telefono no se aplica: alli manda la capa movil (html.mq-movil).
   ========================================================================== */

html:not(.mq-movil) .app-header.mqc2 {
    --mqc-fondo: rgba(255, 255, 255, .86);
    --mqc-linea: #E6EAF2;
    --mqc-linea-2: #DDE4EF;
    --mqc-tinta: #1F2D4A;
    --mqc-suave: #5D6885;
    --mqc-tenue: #8A93AD;
    --mqc-caja: #FFFFFF;
    --mqc-caja-hover: #F2F9FE;
    --mqc-acento: #0F9DEA;
    --mqc-buscar: #F5F7FB;
    --mqc-sombra: 0 1px 2px rgba(16, 24, 40, .05);

    /* Por encima del contenido: el cristal (backdrop-filter) hace de la cabecera
       una capa propia y, sin z-index, lo que viene debajo tapaba sus desplegables
       (el menu de la rueda del perfil, la temporada, los tutoriales). */
    position: relative;
    z-index: 1040 !important;
    display: flex !important;
    flex-wrap: nowrap;
    container: mqc2 / inline-size;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    height: auto !important;
    padding: 0 18px 0 10px !important;
    border-bottom: 1px solid var(--mqc-linea);
    background: var(--mqc-fondo) !important;
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    color: var(--mqc-tinta);
    font-family: Manrope, "Open Sans", system-ui, sans-serif;
}
html:not(.mq-movil) .app-header.mqc2.mqc2--oscuro {
    --mqc-fondo: rgba(39, 44, 64, .82);
    --mqc-linea: rgba(255, 255, 255, .08);
    --mqc-linea-2: rgba(255, 255, 255, .14);
    --mqc-tinta: #F3F4FF;
    --mqc-suave: #9BA3C7;
    --mqc-tenue: #6A7299;
    --mqc-caja: rgba(255, 255, 255, .05);
    --mqc-caja-hover: rgba(34, 211, 238, .1);
    --mqc-acento: #22D3EE;
    --mqc-buscar: rgba(10, 12, 24, .35);
    --mqc-sombra: none;
}
/* El filo de color de arriba, como el borde de los cajones del kiosko. */
html:not(.mq-movil) .app-header.mqc2::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, #8B5CFF, #22D3EE 45%, #3B82F6 70%, transparent);
    opacity: .85;
    pointer-events: none;
}

/* Las piezas de siempre fluyen en fila (sin float ni margenes a pelo), en este orden. */
html:not(.mq-movil) .app-header.mqc2 > * { float: none !important; margin: 0 !important; }
html:not(.mq-movil) .app-header.mqc2 > .app-header-buttons:not(.pull-right) { order: 0; display: flex; align-items: center; gap: 10px; }
html:not(.mq-movil) .app-header.mqc2 > .mqc2-donde { order: 1; }
html:not(.mq-movil) .app-header.mqc2 > .mqc2-hueco { order: 3; flex: 1 1 auto; }
html:not(.mq-movil) .app-header.mqc2 > .mqc2-tutoriales { order: 4; }
html:not(.mq-movil) .app-header.mqc2 > .mq-idioma-caja { order: 5; }
html:not(.mq-movil) .app-header.mqc2 > .mq-temporada-caja { order: 6; }
html:not(.mq-movil) .app-header.mqc2 > .btn-group:not(.mq-idioma-caja):not(.mq-temporada-caja):not(.cl-bell-container):not(.mqc2-tutoriales) { order: 7; }
html:not(.mq-movil) .app-header.mqc2 > .mqc2-sep { order: 8; }
html:not(.mq-movil) .app-header.mqc2 > .cl-bell-container { order: 9; }
html:not(.mq-movil) .app-header.mqc2 > .mqc2-tema { order: 10; }
html:not(.mq-movil) .app-header.mqc2 > .app-header-buttons.pull-right { order: 11; }
html:not(.mq-movil) .app-header.mqc2 > .btn-group:empty,
html:not(.mq-movil) .app-header.mqc2 > .btn-group:has(> select.hidden:only-child) { display: none !important; }
html:not(.mq-movil) .app-header.mqc2 .app-header-buttons > li { float: none; display: flex; align-items: center; }
/* De los dos botones del menu (plegar en escritorio, abrir en el movil), el que toca. */
html:not(.mq-movil) .app-header.mqc2 .app-header-buttons > li.visible-mobile { display: none; }
@media (max-width: 992px) {
    html:not(.mq-movil) .app-header.mqc2 .app-header-buttons > li.visible-mobile { display: flex; }
    html:not(.mq-movil) .app-header.mqc2 .app-header-buttons > li.hidden-mobile { display: none; }
}

/* Botones cuadraditos, como el icono del modulo: el menu, la campana, el periodico, el sobre y el tema. */
html:not(.mq-movil) .app-header.mqc2 .app-header-buttons > li > .btn-icon,
html:not(.mq-movil) .app-header.mqc2 .isq-cab-boton,
html:not(.mq-movil) .app-header.mqc2 .mqc2-tema {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border: 1px solid var(--mqc-linea-2) !important;
    border-radius: 13px !important;
    background: var(--mqc-caja) !important;
    box-shadow: var(--mqc-sombra);
    color: var(--mqc-tinta) !important;
    font-size: 19px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, transform .12s;
}
html:not(.mq-movil) .app-header.mqc2 .app-header-buttons > li > .btn-icon:hover,
html:not(.mq-movil) .app-header.mqc2 .isq-cab-boton:hover,
html:not(.mq-movil) .app-header.mqc2 .isq-cab-boton:focus,
html:not(.mq-movil) .app-header.mqc2 .mqc2-tema:hover {
    border-color: var(--mqc-acento) !important;
    background: var(--mqc-caja-hover) !important;
    color: var(--mqc-acento) !important;
}
html:not(.mq-movil) .app-header.mqc2 .isq-cab-boton:active,
html:not(.mq-movil) .app-header.mqc2 .mqc2-tema:active { transform: scale(.94); }
html:not(.mq-movil) .app-header.mqc2 .icon-menu { font-size: 18px; color: inherit; }
/* Los contadores, en rosa en la esquina */
html:not(.mq-movil) .app-header.mqc2 .cl-bell-badge,
html:not(.mq-movil) .app-header.mqc2 .isq-cab-boton > span[style*="position: absolute"] {
    top: -6px !important;
    right: -6px !important;
    border: 2px solid var(--mqc-caja-borde, #FFFFFF);
    background: #FF4FA3 !important;
    box-shadow: none !important;
}
html:not(.mq-movil) .app-header.mqc2.mqc2--oscuro .cl-bell-badge,
html:not(.mq-movil) .app-header.mqc2.mqc2--oscuro .isq-cab-boton > span[style*="position: absolute"] { border-color: #272C40; }
html:not(.mq-movil) .app-header.mqc2 .cl-bell-container { display: inline-flex !important; align-items: center; gap: 10px; height: 40px; margin: 0 !important; }

/* Donde se esta: las migas y, debajo, el nombre de la pantalla. */
.mqc2-donde { display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; min-width: 0; max-width: 300px; }
.mqc2-migas { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--mqc-tenue); font-size: 11.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.mqc2-migas a, .mqc2-migas a:hover, .mqc2-migas a:focus { color: inherit; text-decoration: none; }
.mqc2-migas a:hover { color: var(--mqc-acento); }
.mqc2-migas .ph { font-size: 10px; }
.mqc2-titulo { overflow: hidden; color: var(--mqc-tinta); font: 700 15px/1.25 Unbounded, Manrope, sans-serif; letter-spacing: .2px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

/* El buscador del MENU LATERAL con el formato de la V2 (lo marca js/cabecera_v2.js con
   html.mqc2-html): caja redondeada, lupa cian y la etiqueta del atajo (Ctrl/⌘ K) a
   la derecha; al escribir, la etiqueta deja su sitio al aspa de limpiar. */
html.mqc2-html body .app-sidebar.app-navigation #menu_buscador { position: relative; padding: 14px 14px 8px !important; }
html.mqc2-html body .app-sidebar.app-navigation #menu_buscador .icon-magnifier { display: none; }
html.mqc2-html body .app-sidebar.app-navigation #menu_buscador_input {
    height: 42px;
    padding: 0 58px 0 40px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(10, 12, 24, .35);
    box-shadow: none;
    color: #F3F4FF;
    font: 600 13px Manrope, "Open Sans", system-ui, sans-serif;
    animation: none;
    transition: border-color .15s, box-shadow .15s;
}
html.mqc2-html body .app-sidebar.app-navigation #menu_buscador_input::placeholder { color: #9BA3C7; }
html.mqc2-html body .app-sidebar.app-navigation #menu_buscador_input:hover { border-color: rgba(34, 211, 238, .45); }
html.mqc2-html body .app-sidebar.app-navigation #menu_buscador_input:focus {
    border-color: #22D3EE;
    background: rgba(10, 12, 24, .5);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .15);
    outline: none;
    animation: none;
}
.mqc2-lupa {
    position: absolute;
    top: 35px;
    left: 27px;
    transform: translateY(-50%);
    color: #22D3EE;
    font-size: 17px;
    pointer-events: none;
}
.mqc2-atajo {
    position: absolute;
    top: 35px;
    right: 24px;
    transform: translateY(-50%);
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: #8A93B8;
    font: 700 11px Manrope, "Open Sans", sans-serif;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}
#menu_buscador.mqc2-escrito .mqc2-atajo { display: none; }
html.mqc2-html body .app-sidebar.app-navigation #menu_buscador_limpiar { top: 35px; right: 22px; margin-top: 0; transform: translateY(-50%); color: #9BA3C7; }
.app-navigation-minimized .mqc2-lupa,
.app-navigation-minimized .mqc2-atajo { display: none; }

.mqc2-sep { flex: 0 0 1px; width: 1px; height: 28px; background: var(--mqc-linea-2); }

/* Tutoriales: en ambar, con su icono, en vez del desplegable naranja. */
html:not(.mq-movil) .app-header.mqc2 .mqc2-tutoriales .bootstrap-select { width: auto !important; }
html:not(.mq-movil) .app-header.mqc2 .mqc2-tutoriales .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 30px 0 13px !important;
    border: 1px solid rgba(255, 181, 71, .55) !important;
    border-radius: 13px !important;
    background: #FFF6E8 !important;
    box-shadow: none !important;
    color: #B86E00 !important;
    font-size: 12.5px;
    font-weight: 800;
}
html:not(.mq-movil) .app-header.mqc2 .mqc2-tutoriales .dropdown-toggle::before { content: "\e3d2"; font-family: "Phosphor"; font-size: 17px; font-weight: 400; }
html:not(.mq-movil) .app-header.mqc2.mqc2--oscuro .mqc2-tutoriales .dropdown-toggle { background: rgba(255, 181, 71, .1) !important; color: #FFB547 !important; }
html:not(.mq-movil) .app-header.mqc2 .mqc2-tutoriales .filter-option { position: static; width: auto !important; }

/* La temporada: pastilla verde con «Temporada» encima del año. */
html:not(.mq-movil) .app-header.mqc2 .mq-temporada-caja .dropdown-toggle {
    height: 40px;
    padding: 0 30px 0 12px !important;
    border: 1px solid #2FB344 !important;
    border-radius: 13px !important;
    background: #2FB344 !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    text-align: left;
}
html:not(.mq-movil) .app-header.mqc2.mqc2--oscuro .mq-temporada-caja .dropdown-toggle {
    border-color: rgba(47, 179, 68, .5) !important;
    background: linear-gradient(135deg, rgba(47, 179, 68, .22), rgba(47, 179, 68, .08)) !important;
}
html:not(.mq-movil) .app-header.mqc2 .mq-temporada-caja .filter-option { position: static; display: block; }
html:not(.mq-movil) .app-header.mqc2 .mq-temporada-caja .filter-option::before {
    content: "Temporada";
    display: block;
    color: rgba(255, 255, 255, .8);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .9px;
    line-height: 1;
    text-transform: uppercase;
}
html:not(.mq-movil) .app-header.mqc2.mqc2--oscuro .mq-temporada-caja .filter-option::before { color: #8EE09C; }

/* El idioma, otro cuadradito (sus medidas ya las da print_select_temporadas.php). */
html:not(.mq-movil) .app-header.mqc2 .mq-idioma-caja { height: 40px; }
html:not(.mq-movil) .app-header.mqc2 .mq-idioma-caja .select2-container .select2-selection--single { border-radius: 13px !important; border-color: var(--mqc-linea-2) !important; background: var(--mqc-caja) !important; }

/* El tema (solo en las pantallas del KIT CSS 2026, que tienen modo oscuro). */
.mqc2-tema .ph { font-size: 18px; }

/* La ficha del club o de la persona: foto, nombre, rol y el engranaje en una pieza. */
html:not(.mq-movil) .app-header.mqc2 > .app-header-buttons.pull-right { display: flex; align-items: center; }
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    min-height: 0;
    height: 50px;
    margin: 0;
    padding: 0 7px 0 5px !important;   /* cada boton con el mismo aire alrededor: el escudo 5 px, la rueda 7 */
    border: 1px solid var(--mqc-linea-2);
    border-radius: 16px;
    background: var(--mqc-caja);
    box-shadow: var(--mqc-sombra);
}
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls:hover { border-color: var(--mqc-acento); }
/* El aro redondo que la plantilla dibuja alrededor de la foto (.contact::after, 46 px):
   con el escudo en su boton sobraba y se salia de la ficha. */
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls::before,
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls::after { display: none !important; content: none !important; }
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls > img {
    position: static !important;
    /* El escudo, en un boton como el de la rueda dentada (mismo borde y esquinas),
       algo mayor (40 px frente a 36): entero (contain) y centrado sobre blanco, con
       aire. Ficha simetrica: cada boton con el mismo aire alrededor. */
    display: block;
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid var(--mqc-linea-2) !important;
    border-radius: 13px !important;
    background: #FFFFFF;
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    box-shadow: var(--mqc-sombra);
}
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls .contact-container {
    position: static !important;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    color: var(--mqc-tinta) !important;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls .contact-container > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--mqc-suave) !important;
    font-size: 11px;
    font-weight: 700;
}
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls .contact-container > span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2FB344;
    box-shadow: 0 0 8px #2FB344;
}
/* El nombre que es enlace (el deportista lleva a su perfil): como el texto de la ficha. */
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls .contact-container > a,
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls .contact-container > .text-black {
    display: block; overflow: hidden; color: var(--mqc-tinta) !important; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
.mqc2-nombre { display: block; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls .contact-controls { position: static !important; display: flex; height: auto; margin: 0; }
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls .contact-controls .isq-cab-boton,
html:not(.mq-movil) .app-header.mqc2 .contact.contact-ps-controls .contact-controls .btn-icon { width: 36px; height: 36px; border-radius: 12px !important; font-size: 18px; }

/* Lo que ya no hace falta debajo: la franja de las migas, que ahora estan arriba. */
.mqc2-oculto { display: none !important; }

/* Segun el ancho de la propia cabecera (no de la ventana: el menu lateral se
   lleva su parte): primero se van las migas y en lo mas estrecho el titulo, el
   texto de Tutoriales y el nombre. */
@container mqc2 (max-width: 1180px) {
    .mqc2-migas { display: none; }
    .app-header.mqc2 .contact.contact-ps-controls { max-width: 210px; }
}
@container mqc2 (max-width: 980px) {
    .mqc2-donde { display: none; }
    .app-header.mqc2 .mqc2-tutoriales .dropdown-toggle { padding-right: 24px !important; font-size: 0; }
    .app-header.mqc2 .mqc2-tutoriales .dropdown-toggle::before { font-size: 18px; }
    .app-header.mqc2 .contact.contact-ps-controls .contact-container { display: none; }
}