:root {
    --siarmo-navy: #091C50;
    --siarmo-gold: #FDA601;
    --siarmo-white: #FFFFFF;
}

/* SIARMO brand layer: loaded after existing component CSS; semantic colors remain untouched. */
body { --cmd-primary: var(--siarmo-navy); --cmd-primary-hover: #07163f; --cmd-primary-active: #05102f; --cmd-accent: var(--siarmo-gold); --cmd-accent-hover: #e69500; --cmd-accent-active: #cc8400; --cmd-accent-text: var(--siarmo-navy); }
.landing { --land-navy: var(--siarmo-navy); --land-yellow: var(--siarmo-gold); --land-ink: var(--siarmo-navy); }
.platform-body, .platform-header { --navy: var(--siarmo-navy); --yellow: var(--siarmo-gold); }
.cmd-admin { --cmd-primary: var(--siarmo-navy); --cmd-accent: var(--siarmo-gold); }
.login-brand, .dashboard-hero, .dashboard-kpi-primary { background-color: var(--siarmo-navy) !important; }
.login-submit, .platform-action { background-color: var(--siarmo-gold) !important; color: var(--siarmo-navy) !important; }
.landing-button-accent, .landing-live-dot, .landing-preview-indicator i, .dashboard-status-indicator { background-color: var(--siarmo-gold) !important; }
.landing-button-primary, .landing-screen-head, .landing-screen-metrics > div:first-child { background-color: var(--siarmo-navy) !important; }
.login-wordmark-icon, .landing-brand-mark, .cmd-brand-mark, .cmd-sidebar-brand > span:first-child, .cmd-auth-brand-mark {
    display: inline-flex !important;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    background: url('../branding/siarmo-icon.svg') center / contain no-repeat;
}
.login-wordmark-icon svg, .landing-brand-mark svg, .cmd-brand-mark svg, .cmd-sidebar-brand > span:first-child svg, .cmd-auth-brand-mark svg { display: none !important; }
.login-wordmark-name, .cmd-brand-text, .cmd-sidebar-brand strong { color: var(--siarmo-white); }
.landing-brand > span:last-child {
    color: var(--siarmo-navy);
    display: inline-block;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

@media (max-width: 540px) {
    .landing-brand > span:last-child { font-size: 1rem; }
}

/* Wordmark textual e símbolo oficial separado: preserva a proporção natural
   enquanto a logo modular final não estiver disponível para uso direto. */
.login-wordmark,
.cmd-sidebar-brand,
#adminMobileSidebarLabel,
.cmd-auth-brand {
    background: none;
    min-width: 0;
    min-height: 0;
}

.cmd-sidebar-brand { width: 100%; height: auto; }

.login-wordmark-icon,
.cmd-brand-mark,
.cmd-sidebar-brand > span:first-child,
.cmd-auth-brand-mark {
    background-color: #fff;
    background-image: url('../branding/siarmo-icon.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
}

.login-wordmark-icon svg,
.cmd-brand-mark svg,
.cmd-sidebar-brand > span:first-child svg,
.cmd-auth-brand-mark svg { display: none !important; }

.login-wordmark-name,
.cmd-brand-text,
.cmd-sidebar-brand strong,
.cmd-auth-brand { color: var(--siarmo-white); }

.cmd-sidebar-brand strong { visibility: visible; }
.cmd-auth-brand-mark { visibility: visible; }

/* Logos oficiais enquadradas pelo novo viewBox, sem distorcer o SVG. */
.siarmo-logo-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 180px;
    aspect-ratio: 1240 / 370;
    overflow: hidden;
}

.siarmo-logo-frame img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

.siarmo-logo-frame-navbar { width: 150px; }
.siarmo-logo-frame-login { width: 220px; }
.siarmo-logo-frame-auth { width: 200px; }
.siarmo-logo-frame-light { width: 180px; }
.siarmo-logo-frame-platform { width: 165px; }
.siarmo-logo-frame-topbar { width: 150px; }
.siarmo-logo-frame-sidebar { width: 190px; }
.siarmo-logo-frame-mobile { width: 155px; }

@media (max-width: 540px) {
    .siarmo-logo-frame-navbar { width: 128px; }
    .siarmo-logo-frame-login { width: min(200px, 72vw); }
    .siarmo-logo-frame-auth { width: min(185px, 72vw); }
    .siarmo-logo-frame-mobile { width: 135px; }
}