/* ─────────────────────────────────────────────────────────────────────────
   Marca Klasse — se carga después de tailwind.css y styles.css.

   assets/img/klasse-logo.png es el logo oficial (blanco, con transparencia,
   recortado al bounding box del wordmark: 800x197). Al estar recortado justo,
   la altura en CSS es la altura visual real de las letras — por eso los
   valores de acá están calibrados contra la altura del logo smart de al lado.
   ───────────────────────────────────────────────────────────────────────── */

.klasse-logo {
  width: auto;
  display: block;
  /* Los contenedores del tema son flex. En navbar y menú lateral son filas,
     así que centrado vertical; el footer es columna y se corrige abajo. */
  align-self: center;
  flex: 0 0 auto;
}

/* Navbar: el logo smart va a h-4 (16px) en mobile y h-8 (32px) en desktop.
   Como el wordmark smart tiene aire arriba y abajo dentro de su SVG y este
   no, las alturas no son las mismas — están igualadas ópticamente. */
.klasse-logo--nav { height: 13px; }

@media (min-width: 768px) {
  .klasse-logo--nav { height: 19px; }
}

/* Menú lateral: el tema ya lo pasa a negro con
   #nav-drawer img { filter: brightness(0) } en styles.css. */
.klasse-logo--drawer { height: 15px; }

/* Columna: sin esto, align-items:stretch estira el logo a todo el ancho. */
.klasse-logo--footer {
  height: 22px;
  align-self: flex-start;
}

/* Se apoya en que todas las navbars del tema son flex: margin-left:auto lo
   manda al borde derecho, sirva la nav justify-between o no. */
.klasse-nav-slot {
  margin-left: auto;
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.klasse-divider {
  width: 1px;
  height: 18px;
  background: #d4d4d4;
  display: inline-block;
}