/*
|--------------------------------------------------------------------------
| QUIMIKA - LOGOTIPO ADAPTABLE
|--------------------------------------------------------------------------
|
| Logotipo compartido entre todas las interfaces.
|
| Temas compatibles:
| - Claro
| - Oscuro
| - Automático (según el dispositivo)
|
| Tema predeterminado: Claro.
|
*/


/*
|--------------------------------------------------------------------------
| CONTENEDOR DEL LOGOTIPO
|--------------------------------------------------------------------------
*/

.quimika-logo-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: fit-content;
    max-width: 100%;

    margin: 0 0 15px;
    padding: 0;
}


/*
|--------------------------------------------------------------------------
| ENLACE DEL LOGOTIPO
|--------------------------------------------------------------------------
*/

.quimika-logo-enlace {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    width: fit-content;
    max-width: 100%;

    line-height: 0;

    text-decoration: none;

    border-radius: 6px;

    -webkit-tap-highlight-color: transparent;
}


/*
|--------------------------------------------------------------------------
| CONFIGURACIÓN GENERAL DE LAS IMÁGENES
|--------------------------------------------------------------------------
*/

.quimika-logo {
    width: auto;
    height: 42px;

    max-width: min(180px, 100%);

    object-fit: contain;
    object-position: left center;

    vertical-align: middle;

    border: 0;
}


/*
|--------------------------------------------------------------------------
| TEMA PREDETERMINADO - CLARO
|--------------------------------------------------------------------------
|
| El logo claro se muestra por defecto.
| El logo oscuro permanece oculto.
|
*/

.quimika-logo-claro {
    display: block;
}

.quimika-logo-oscuro {
    display: none;
}


/*
|--------------------------------------------------------------------------
| TEMA CLARO SELECCIONADO
|--------------------------------------------------------------------------
*/

:root[data-theme="light"] .quimika-logo-claro {
    display: block;
}

:root[data-theme="light"] .quimika-logo-oscuro {
    display: none;
}


/*
|--------------------------------------------------------------------------
| TEMA OSCURO SELECCIONADO
|--------------------------------------------------------------------------
*/

:root[data-theme="dark"] .quimika-logo-claro {
    display: none;
}

:root[data-theme="dark"] .quimika-logo-oscuro {
    display: block;
}


/*
|--------------------------------------------------------------------------
| TEMA AUTOMÁTICO
|--------------------------------------------------------------------------
|
| Cuando no existe data-theme o se utiliza
| data-theme="auto", seguimos el sistema.
|
| Si JavaScript establece light/dark,
| respetamos siempre esa selección.
|
*/

@media (prefers-color-scheme: dark) {

    :root:not([data-theme]) .quimika-logo-claro,
    :root[data-theme="auto"] .quimika-logo-claro,
    :root[data-theme="automatico"] .quimika-logo-claro {
        display: none;
    }

    :root:not([data-theme]) .quimika-logo-oscuro,
    :root[data-theme="auto"] .quimika-logo-oscuro,
    :root[data-theme="automatico"] .quimika-logo-oscuro {
        display: block;
    }

}


/*
|--------------------------------------------------------------------------
| TABLETAS Y CELULARES
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .quimika-logo-header {
        margin-bottom: 12px;
    }

    .quimika-logo {
        height: 36px;
        max-width: min(145px, 100%);
    }

}


/*
|--------------------------------------------------------------------------
| CELULARES PEQUEÑOS
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {

    .quimika-logo {
        height: 32px;
        max-width: min(125px, 100%);
    }

}


/*
|--------------------------------------------------------------------------
| ACCESIBILIDAD
|--------------------------------------------------------------------------
*/

.quimika-logo-enlace:focus-visible {
    outline: 2px solid #ff785f;
    outline-offset: 5px;
}


/*
|--------------------------------------------------------------------------
| PREFERENCIA DE MOVIMIENTO REDUCIDO
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .quimika-logo,
    .quimika-logo-enlace {
        transition: none;
    }

}