/*
 * Sena UI · base y barra superior
 */

html.sena-ui body {
    font-family: var(--sena-font);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}

html.sena-ui :focus-visible {
    outline: 2px solid var(--sena-primary);
    outline-offset: 2px;
}

html.sena-ui ::selection {
    background: rgba(var(--sena-brand-rgb), .2);
}

/* ---------- barra superior ---------- */

/* la barra nativa es .navbar.navbar-dark.bg-primary: se convierte en una barra clara
   redefiniendo variables locales, sin !important */
html.sena-ui nav.navbar.bg-primary {
    --bs-primary-rgb: var(--sena-surface-rgb);
    --bs-navbar-color: var(--sena-muted);
    --bs-navbar-hover-color: var(--sena-primary);
    --bs-navbar-active-color: var(--sena-primary);
    --bs-navbar-brand-color: var(--sena-text);
    --bs-navbar-brand-hover-color: var(--sena-text);
    min-height: var(--sena-header-height);
    border-bottom: 1px solid var(--sena-border);
    box-shadow: var(--sena-shadow-sm);
    padding-top: .35rem;
    padding-bottom: .35rem;
}

/* logotipo de la empresa en lugar del logotipo fijo de FacturaScripts */
/* la imagen nativa lleva .d-inline-block, que en Bootstrap es !important */
html.sena-ui .navbar-brand > img {
    display: none !important;
}

html.sena-ui .navbar-brand {
    font-weight: 600;
    font-size: 1rem;
    margin-right: 1.25rem;
}

html.sena-ui .navbar-brand::before {
    content: var(--sena-brand-content, "");
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: var(--sena-brand-w, 34px);
    height: 34px;
    margin-right: .6rem;
    border-radius: var(--sena-radius-sm);
    /* con logotipo, --sena-brand-bg es transparente y manda la imagen */
    background: var(--sena-brand-bg, var(--sena-primary)) var(--sena-brand-image) left center / contain no-repeat;
    background-origin: content-box;
    padding: var(--sena-brand-pad, 0);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
}

html.sena-ui .navbar-brand > span {
    vertical-align: middle;
}

html.sena-ui .navbar .navbar-nav .nav-link {
    border-radius: var(--sena-radius-sm);
    padding: .45rem .75rem;
    font-weight: 500;
    font-size: .925rem;
    transition: background-color var(--sena-transition), color var(--sena-transition);
}

html.sena-ui .navbar .navbar-nav .nav-link:hover,
html.sena-ui .navbar .navbar-nav .nav-link.show {
    background-color: var(--sena-primary-subtle);
}

html.sena-ui .navbar .navbar-nav .nav-link.active {
    background-color: var(--sena-primary-subtle);
    color: var(--sena-primary);
}

html.sena-ui .navbar .navbar-nav.ms-auto .nav-link {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* menús desplegables */
html.sena-ui .dropdown-menu {
    --bs-dropdown-border-color: var(--sena-border);
    --bs-dropdown-border-radius: var(--sena-radius-md);
    --bs-dropdown-box-shadow: var(--sena-shadow-lg);
    --bs-dropdown-link-active-bg: var(--sena-primary-subtle);
    --bs-dropdown-link-active-color: var(--sena-primary);
    --bs-dropdown-link-hover-bg: var(--sena-surface-2);
    --bs-dropdown-item-padding-y: .45rem;
    --bs-dropdown-padding-x: .35rem;
    box-shadow: var(--bs-dropdown-box-shadow);
    font-size: .925rem;
}

html.sena-ui .dropdown-item {
    border-radius: var(--sena-radius-sm);
}

html.sena-ui .dropdown-item .svg-inline--fa,
html.sena-ui .dropdown-item > i {
    color: var(--sena-muted);
}

html.sena-ui .dropdown-item.active .svg-inline--fa,
html.sena-ui .dropdown-item:hover .svg-inline--fa {
    color: var(--sena-primary);
}

/* botón de tema claro/oscuro */
html.sena-ui .sena-theme-toggle {
    background: transparent;
    border: 0;
}

html.sena-ui[data-bs-theme="dark"] .sena-icon-to-dark,
html.sena-ui:not([data-bs-theme="dark"]) .sena-icon-to-light {
    display: none;
}

/* logotipo o iniciales reutilizable (dashboard y login) */
html.sena-ui .sena-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--sena-radius-md);
    background: var(--sena-primary);
    color: #fff;
    font-weight: 700;
    overflow: hidden;
}

html.sena-ui .sena-brand-mark.has-logo {
    width: auto;
    min-width: 44px;
    max-width: 180px;
    padding: .35rem .6rem;
    background: #fff;
    border: 1px solid var(--sena-border);
}

html.sena-ui .sena-brand-mark img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

html.sena-ui .sena-brand-mark-lg {
    width: 64px;
    height: 64px;
    font-size: 1.4rem;
}

html.sena-ui .sena-brand-mark-lg.has-logo {
    max-width: 220px;
}

html.sena-ui .sena-brand-mark-xl {
    width: 96px;
    height: 96px;
    font-size: 2rem;
    border-radius: var(--sena-radius-lg);
}

html.sena-ui .sena-brand-mark-xl.has-logo {
    width: auto;
    max-width: 320px;
    height: 120px;
    padding: 1rem 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    html.sena-ui *,
    html.sena-ui *::before,
    html.sena-ui *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}