/* Application-level styles are supplied by the shared UI shell. */

.sm-header {
    display: none !important;
}

/* The shared shell currently renders menu entries with its fallback icon. */
.sm-nav-link[href="/comercial/quotations"] .sm-nav-icon::before {
    content: "\f38b";
}

.sm-nav-link[href="/comercial/propuestas"] .sm-nav-icon::before {
    content: "\f3b9";
}

.sm-nav-link[href="/comercial/renting/calculators"] .sm-nav-icon::before {
    content: "\f1e0";
}

.sm-nav-link[href="/comercial/charges/freight"] .sm-nav-icon::before {
    content: "\f5ea";
}

.sm-nav-link[href="/comercial/charges/calendar"] .sm-nav-icon::before {
    content: "\f214";
}

.sm-nav-link[href="/comercial/products"] .sm-nav-icon::before {
    content: "\f1c7";
}

.sm-nav-link[href="/comercial/products/families"] .sm-nav-icon::before {
    content: "\f5b2";
}

.sm-nav-link[href="/comercial/products/charges"] .sm-nav-icon::before {
    content: "\f249";
}

.sm-nav-link[href="/comercial/product-picker/configuration"] .sm-nav-icon::before {
    content: "\f5f8";
}

.sm-nav-link[href="/comercial/suppliers"] .sm-nav-icon::before {
    content: "\f1dd";
}

.sm-nav-link[href="/comercial/tariff-import"] .sm-nav-icon::before {
    content: "\f603";
}

.sm-nav-link[href="/admin/notificaciones"] .sm-nav-icon::before {
    content: "\f18a";
}

.sm-nav-section-host:has(a[href^="/comercial/"]) .sm-nav-section-toggle .sm-nav-icon::before {
    content: "\f1cc";
}

/* The shared shell does not expose a collapse control, so the host adds one
   while keeping the navigation usable with icons when it is folded. */
.sm-shell {
    transition: grid-template-columns .18s ease;
}

.sm-sidebar {
    position: relative;
    transition: padding .18s ease;
}

.soas-sidebar-toggle {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.2rem;
    height: 1.7rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: -.85rem;
    top: 1.05rem;
    width: 1.7rem;
    z-index: 2;
}

.soas-sidebar-toggle:hover,
.soas-sidebar-toggle:focus-visible {
    background: #fff1f1;
    border-color: #f0b4b4;
    color: var(--soas-brand-red-dark);
    outline: 0;
}

.soas-sidebar-toggle span {
    display: block;
    transform: translateY(-1px);
    transition: transform .18s ease;
}

.soas-sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr) !important;
}

.soas-sidebar-collapsed .sm-sidebar {
    padding-left: .55rem;
    padding-right: .55rem;
}

.soas-sidebar-collapsed .soas-sidebar-toggle span {
    transform: rotate(180deg) translateY(1px);
}

.soas-sidebar-collapsed .sm-brand-default {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.soas-sidebar-collapsed .sm-brand h2,
.soas-sidebar-collapsed .sm-profile-copy,
.soas-sidebar-collapsed .sm-profile > .bi {
    display: none;
}

.soas-sidebar-collapsed .sm-nav-link,
.soas-sidebar-collapsed .sm-nav-section-toggle {
    font-size: 0;
    justify-content: center;
    padding-left: .55rem;
    padding-right: .55rem;
}

.soas-sidebar-collapsed .sm-nav-link .sm-nav-icon,
.soas-sidebar-collapsed .sm-nav-section-toggle .sm-nav-icon {
    flex-basis: 1.05rem;
    font-size: 1rem;
}

.soas-sidebar-collapsed .sm-nav-section-toggle .sm-nav-chevron {
    display: none;
}

.soas-sidebar-collapsed .sm-nav-sublist {
    padding-left: 0 !important;
}

.soas-sidebar-collapsed .sm-profile {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 900px) {
    .sm-shell.soas-sidebar-collapsed {
        grid-template-columns: 1fr !important;
    }

    .soas-sidebar-collapsed .sm-sidebar {
        min-height: 4.5rem;
    }
}

/* SOAS visual identity overrides for the shared shell and security UI. */
:root {
    --soas-brand-red: #e10000;
    --soas-brand-red-dark: #b80000;
    --soas-brand-black: #1d1d1b;
    --soas-brand-mist: #f6f6f4;
}

.sm-nav-link:hover,
.sm-nav-section-toggle:hover {
    color: var(--soas-brand-red-dark) !important;
}

.sm-nav-link.active {
    background: #fff1f1 !important;
    color: var(--soas-brand-red-dark) !important;
}

.sm-nav-link.active .sm-nav-icon,
.sm-nav-link:hover .sm-nav-icon,
.sm-nav-section-toggle:hover .sm-nav-icon {
    color: var(--soas-brand-red) !important;
}

.sm-profile--signed-out .sm-profile-avatar {
    background: #fff1f1 !important;
    color: var(--soas-brand-red) !important;
}

.sm-brand h2 {
    font-size: 0 !important;
}

.sm-brand h2::after {
    color: #111827;
    content: "SOAS";
    font-size: 1rem;
}

.login-page {
    --sm-accent: var(--soas-brand-red);
    --sm-accent-hover: var(--soas-brand-red-dark);
    background:
        radial-gradient(circle at 8% 12%, rgba(225, 0, 0, .09), transparent 30%),
        radial-gradient(circle at 90% 88%, rgba(29, 29, 27, .08), transparent 32%),
        var(--soas-brand-mist) !important;
}

.login-page::before {
    border-color: rgba(225, 0, 0, .11) !important;
}

.login-page__glow--one {
    background: #f7b3b3 !important;
}

.login-page__glow--two {
    background: #d8d8d4 !important;
}

.login-page .login-brand__logo,
.login-page .login-brand__mark {
    background: #fff !important;
    box-shadow: 0 9px 20px rgba(225, 0, 0, .12) !important;
}

.login-page .login-welcome {
    background: linear-gradient(145deg, #1d1d1b, #4c1111) !important;
}

.login-page .login-eyebrow {
    color: #ffb3b3 !important;
}

.login-page .login-welcome__copy {
    color: #f7dada !important;
}

.login-page .login-benefits li {
    color: #fff4f4 !important;
}

.login-page .login-benefits__icon {
    background: rgba(225, 0, 0, .2) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #ffb3b3 !important;
}

.login-page .login-input-wrap:focus-within {
    border-color: var(--soas-brand-red) !important;
    box-shadow: 0 0 0 3px rgba(225, 0, 0, .12) !important;
}

.login-page .login-field__hint,
.login-page .login-provider:hover {
    color: var(--soas-brand-red-dark) !important;
}

.login-page .login-checkbox input {
    accent-color: var(--soas-brand-red) !important;
}

.login-page .login-submit {
    background: var(--soas-brand-red) !important;
    border-color: var(--soas-brand-red) !important;
    box-shadow: 0 8px 16px rgba(225, 0, 0, .18) !important;
}

.login-page .login-submit:hover {
    background: var(--soas-brand-red-dark) !important;
    border-color: var(--soas-brand-red-dark) !important;
}

.login-page .login-provider__icon {
    background: #fff1f1 !important;
    color: var(--soas-brand-red) !important;
}

.soas-home-page {
    display: grid;
    gap: 1.25rem;
    max-width: 960px;
}

.soas-home-hero {
    background: linear-gradient(135deg, #fff, #fff6f6);
    border: 1px solid #f0d5d5;
    border-left: 4px solid var(--soas-brand-red);
    border-radius: .875rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.soas-home-hero h1 {
    color: var(--soas-brand-black);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    letter-spacing: -.04em;
    margin: 0;
}

.soas-home-hero p:last-child {
    color: #5f6368;
    line-height: 1.6;
    margin: .7rem 0 0;
    max-width: 68ch;
}

.soas-home-loading__mark {
    align-items: center;
    background: #fff1f1;
    border-radius: .65rem;
    color: var(--soas-brand-red);
    display: inline-flex;
    flex: 0 0 2.6rem;
    font-size: .65rem;
    font-weight: 800;
    height: 2.6rem;
    justify-content: center;
    letter-spacing: -.03em;
    width: 2.6rem;
}

.soas-home-loading {
    align-items: center;
    color: #5f6368;
    display: flex;
    gap: .75rem;
    min-height: 16rem;
    justify-content: center;
}

.soas-home-links {
    display: grid;
    gap: 1rem;
}

.soas-home-tile-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.soas-home-tile {
    align-items: center;
    background: #fff;
    border: 1px solid #e4e4e0;
    border-radius: .8rem;
    color: var(--soas-brand-black);
    display: flex;
    gap: .75rem;
    min-height: 5.5rem;
    padding: .9rem 1rem;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.soas-home-tile:hover {
    border-color: #e10000;
    box-shadow: 0 8px 18px rgba(29, 29, 27, .08);
    color: var(--soas-brand-black);
    transform: translateY(-2px);
}

.soas-home-tile__icon {
    align-items: center;
    background: #fff1f1;
    border-radius: .65rem;
    color: var(--soas-brand-red);
    display: inline-flex;
    flex: 0 0 2.55rem;
    font-size: 1.05rem;
    height: 2.55rem;
    justify-content: center;
    width: 2.55rem;
}

.soas-home-tile__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.soas-home-tile__copy strong {
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soas-home-tile__copy small {
    color: #777772;
    font-size: .72rem;
}

.soas-home-tile__arrow {
    color: #aaa9a4;
    font-size: .85rem;
}