/* Marca Celesterra sobre el admin de Django: solo variables CSS y el encabezado. */

html[data-theme="light"],
:root {
    --primary: #0053fe;
    --secondary: #003fbf;
    --accent: #0053fe;
    --primary-fg: #fff;

    /* Encabezado blanco: el logo es azul con fondo transparente. */
    --header-bg: #fff;
    --header-color: #475569;
    --header-branding-color: #0053fe;
    --header-link-color: #0047d9;

    --breadcrumbs-bg: #0053fe;
    --breadcrumbs-fg: #d6e4ff;
    --breadcrumbs-link-fg: #fff;

    --link-fg: #0047d9;
    --link-hover-color: #002f8f;
    --link-selected-fg: #003fbf;

    --selected-row: #eaf1ff;

    --button-bg: #0053fe;
    --button-hover-bg: #003fbf;
    --default-button-bg: #003fbf;
    --default-button-hover-bg: #0053fe;

    --object-tools-bg: #0053fe;
    --object-tools-hover-bg: #003fbf;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #0053fe;
        --secondary: #3b7bff;
        --accent: #7fa8ff;
        --header-bg: #0f172a;
        --header-color: #cbd5e1;
        --header-branding-color: #7fa8ff;
        --header-link-color: #a9c4ff;
        --breadcrumbs-bg: #0a3aa8;
        --link-fg: #7fa8ff;
        --link-hover-color: #a9c4ff;
        --link-selected-fg: #7fa8ff;
        --selected-row: #0b2a5c;
    }
}

html[data-theme="dark"] {
    --primary: #0053fe;
    --secondary: #3b7bff;
    --accent: #7fa8ff;
    --header-bg: #0f172a;
    --header-color: #cbd5e1;
    --header-branding-color: #7fa8ff;
    --header-link-color: #a9c4ff;
    --breadcrumbs-bg: #0a3aa8;
    --link-fg: #7fa8ff;
    --link-hover-color: #a9c4ff;
    --link-selected-fg: #7fa8ff;
    --selected-row: #0b2a5c;
}

#header {
    border-bottom: 3px solid var(--primary);
}

#site-name .marca {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

#site-name .marca-logo {
    display: block;
    width: auto;
    height: 36px;
    /* En tema oscuro el logo azul necesita su fondo blanco. */
    background: #fff;
    border-radius: 6px;
    padding: 2px 6px;
}

#site-name .marca-titulo {
    color: var(--header-branding-color);
    font-size: 1.25rem;
    font-weight: 500;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--hairline-color);
}

/* Login: logo grande y centrado arriba del formulario. */
body.login #header {
    padding: 28px 16px 20px;
}

body.login #site-name {
    margin: 0;
}

body.login #site-name .marca {
    flex-direction: column;
    gap: 10px;
}

body.login #site-name .marca-logo {
    height: 64px;
}

body.login #site-name .marca-titulo {
    border: 0;
    padding: 0;
    font-size: 1.1rem;
}

body.login .ayuda-login {
    margin: 16px 0 0;
    color: var(--body-quiet-color);
    font-size: 0.8125rem;
    line-height: 1.5;
}

@media (max-width: 767px) {
    #site-name .marca-titulo {
        display: none;
    }

    body.login #site-name .marca-titulo {
        display: block;
    }
}

body.login #header {
    position: relative;
}

body.login #header .theme-toggle {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
}