/**
 * Utilidades de slot de logo — capa de componente, NO de tokens.
 *
 * Vive aparte de dp-tokens.css a propósito: ese archivo lo importan 5 hojas
 * públicas del plugin `dp` de WordPress, que no necesitan estas clases y no
 * deben cargarlas. Solo lo importan los shells administrativos
 * (formularios-empresas y clientes).
 *
 * Depende de las variables de dp-tokens.css (§12), que el consumidor ya carga.
 *
 * Uso: <span class="dp-logo-slot dp-logo-slot--sidebar"><img ...></span>
 * El <span> reserva el alto aunque el <img> falte o falle al cargar, para que
 * el layout no salte mientras no haya archivo de logo configurado.
 */

.dp-logo-slot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-width: 0;
    height: var(--dp-logo-sidebar-h);
}

/* Alto definido y sin encoger: un SVG exportado sin atributos width/height no tiene tamaño
   intrínseco, y como elemento flex con width:auto colapsaba a 0 px (el menú lateral salía sin
   logo aunque el archivo cargara). Con alto definido, el ancho sale de su proporción. */
.dp-logo-slot > img,
.dp-logo-slot > svg {
    display: block;
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: var(--dp-logo-sidebar-max-h);
    object-fit: contain;
}

.dp-logo-slot--sidebar {
    height: var(--dp-logo-sidebar-h);
    padding-inline: var(--dp-space-4);
}

.dp-logo-slot--sidebar > img,
.dp-logo-slot--sidebar > svg {
    max-height: var(--dp-logo-sidebar-max-h);
    max-width: var(--dp-logo-sidebar-max-w);
}

.dp-logo-slot--rail {
    height: var(--dp-logo-rail-h);
    width: var(--dp-sidebar-rail);
    padding-inline: 0;
    justify-content: center;
}

.dp-logo-slot--rail > img,
.dp-logo-slot--rail > svg {
    max-height: var(--dp-logo-rail-max);
    max-width: var(--dp-logo-rail-max);
}

.dp-logo-slot--public {
    height: var(--dp-logo-public-h);
}

.dp-logo-slot--public > img,
.dp-logo-slot--public > svg {
    max-height: var(--dp-logo-public-max-h);
}

.dp-logo-slot--login {
    height: var(--dp-logo-login-h);
    justify-content: center;
}

.dp-logo-slot--login > img,
.dp-logo-slot--login > svg {
    max-height: var(--dp-logo-login-max-h);
    max-width: var(--dp-logo-login-max-w);
}

/* Lockup tipográfico de respaldo cuando no hay archivo de logo configurado. */
.dp-logo-fallback {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-space-3);
    min-width: 0;
    color: var(--dp-ink-on-dark);
    font-family: var(--dp-font-display);
    text-decoration: none;
}

.dp-logo-fallback-mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--dp-radius-control);
    background: var(--dp-color-orange);
    color: #fff;
    font-size: 15px;
    font-weight: var(--dp-fw-bold);
    letter-spacing: var(--dp-tracking-snug);
}

.dp-logo-fallback-text {
    overflow: hidden;
    font-size: var(--dp-fs-body-sm);
    font-weight: var(--dp-fw-bold);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-logo-fallback-text small {
    display: block;
    color: var(--dp-ink-on-dark-muted);
    font-size: 10px;
    font-weight: var(--dp-fw-semibold);
    letter-spacing: var(--dp-tracking-wide);
    text-transform: uppercase;
}

/* Sobre fondo claro (emails no, pero sí cabeceras de documento en pantalla). */
.dp-logo-fallback.is-on-light {
    color: var(--dp-ink);
}

.dp-logo-fallback.is-on-light .dp-logo-fallback-text small {
    color: var(--dp-ink-muted);
}