/* ==========================================================
   🏷️ LOGO DE CHESS TACTICS LAB · fuente ÚNICA (04/10/2026)
   ----------------------------------------------------------
   Lo usan el menú lateral, la landing y las páginas legales. Todo se calcula a partir de
   --h (la altura de la imagen), así el logo mantiene sus proporciones en cualquier tamaño:
     • «CHESS» y «TACTICS LAB» miden lo mismo de ancho (logo_ctl.js agranda o encoge
       TACTICS LAB, con espaciado fijo y compacto, hasta la anchura real de CHESS).
     • El hueco entre las dos líneas cae a la altura de la esquina derecha del tablero.
     • TACTICS LAB en gris pizarra (claro) / gris azulado (oscuro), nunca en cian.
   Marcado:
     <a class="marca-ctl" style="--h:140px"><img src="/static/img/LogoCTL.png">
       <span class="marca-ctl-texto"><strong>CHESS</strong><span>TACTICS LAB</span></span></a>
   Los selectores son largos a propósito: deben ganar a las reglas antiguas de componentes.css
   y dark_mode.css (que llevan !important).
========================================================== */
a.marca-ctl.marca-ctl {
    --h: 140px;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: calc(var(--h) * -0.02) !important;
    text-decoration: none !important;
}

a.marca-ctl.marca-ctl > img {
    height: var(--h) !important;
    width: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
    flex-shrink: 0;
}

a.marca-ctl.marca-ctl .marca-ctl-texto {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: calc(var(--h) * 0.45) 0 0 0 !important;   /* coloca el hueco a la altura de la esquina del tablero */
}

a.marca-ctl.marca-ctl .marca-ctl-texto strong {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: calc(var(--h) * 0.257) !important;
    line-height: 0.78 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #0369a1 0%, #06b6d4 50%, #0891b2 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #0891b2 !important;
    text-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

a.marca-ctl.marca-ctl .marca-ctl-texto span {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-size: calc(var(--h) * 0.105) !important;
    line-height: 1 !important;
    letter-spacing: 0.06em;               /* compacto; logo_ctl.js ajusta el TAMAÑO para igualar el ancho de CHESS */
    word-spacing: 0 !important;
    text-transform: uppercase !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    text-shadow: none !important;
    margin: calc(var(--h) * 0.05) 0 0 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* 🌙 Modo oscuro: TACTICS LAB en gris azulado claro */
[data-theme="dark"] a.marca-ctl.marca-ctl .marca-ctl-texto span {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

/* Menú lateral: mismos tamaños que antes (140 / 96 / 68 px), centrado en PC y móvil */
.sidebar a.marca-ctl.marca-ctl { justify-content: center !important; margin-left: 0 !important; width: 100% !important; }
@media (max-width: 1400px), (max-height: 900px) {
    .sidebar a.marca-ctl.marca-ctl { --h: 96px; justify-content: flex-start !important; }
}
@media (max-width: 1100px) {
    .sidebar a.marca-ctl.marca-ctl { --h: 68px; justify-content: center !important; }
}