/* ────────────────────────────────────────────────────────────
   LOGO DE LA PLATAFORMA

   Marca oficial entregada por el propietario (2026-08-16), en RASTER.
   Sustituye a los SVG de dos tintas que habia antes.

   🚫 NO se puede tenir ni invertir por CSS: es un raster a todo color con
   degradados y brillos. Tampoco hay variante clara: el color mas oscuro de
   la marca es #000137 (casi negro), asi que sobre superficies oscuras el
   contraste cae a ~1.2:1 y el pelo desaparece.
   Solucion acordada: en tema oscuro el logo va sobre una PASTILLA CLARA
   (`.brand-logo--inverse`), que es la clase que las apps ya activaban con su
   flag `_isDarkMode`. Asi no hay que tocar ni un Razor: la clase existente
   cambia de significado (antes = otra tinta, ahora = fondo claro).
   ──────────────────────────────────────────────────────────── */

.brand-logo {
    display: inline-block;
    width: var(--brand-logo-size, 120px);
    /* El lienzo es 1227x797 (~1.54:1); dejar el alto en auto lo deforma
       dentro de un flex, asi que se fija por proporcion. */
    aspect-ratio: 1227 / 797;
    height: auto;
    background: url("../../img/platform-logo.png") no-repeat center / contain;
    /* Un logo no es contenido seleccionable ni arrastrable. */
    user-select: none;
    flex: 0 0 auto;
}

/* Tema oscuro: misma marca sobre una pastilla clara, para que el pelo (casi
   negro) no se funda con el fondo. El padding va por dentro con box-sizing
   para que el ancho pedido por `--brand-logo-size` siga siendo el ancho real. */
.brand-logo--inverse {
    box-sizing: border-box;
    padding: 0.5em 0.75em;
    background-color: #FFFFFF;
    background-origin: content-box;
    border-radius: 12px;
}