/* Identidad 3DHome: maestros originales y Montserrat local. */
@font-face{font-family:Montserrat;src:url('brand/fonts/Montserrat-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('brand/fonts/Montserrat-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url('brand/fonts/Montserrat-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url('brand/fonts/Montserrat-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Montserrat;src:url('brand/fonts/Montserrat-ExtraBold.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}

:root{
    --brand-orange:#F06512;
    --brand-raspberry:#C74481;
    --brand-violet:#7C43AB;
    --brand-blue:#01479B;
    --brand-editorial:#BC4708;
    --brand-blue-soft:#eaf0f7;
    --brand-violet-soft:#f2ecf7;
    --brand-orange-soft:#fff0e6;
    --brand-raspberry-soft:#faedf3;
    --bg:#F7F7F8;
    --surface:#FFFFFF;
    --surface-2:#F7F7F8;
    --surface-3:#eef1f5;
    --text:#111820;
    --muted:#596574;
    --line:#dce1e7;
    --line-strong:#c4ccd6;
    --primary:var(--brand-blue);
    --primary-2:#003b82;
    --info:var(--brand-blue);
    --sidebar:var(--brand-blue);
    --brand-heading:var(--brand-blue);
    --brand-icon:var(--brand-blue);
    --brand-icon-accent:var(--brand-orange);
    font-family:Montserrat,"Segoe UI",Arial,sans-serif;
}
html[data-theme="dark"]{
    --bg:#10151c;
    --surface:#18212d;
    --surface-2:#1e2a39;
    --surface-3:#26364a;
    --text:#f5f7fa;
    --muted:#b6c2d2;
    --line:#35465c;
    --line-strong:#4a5f7b;
    --primary:var(--brand-orange);
    --primary-2:#ff853c;
    --info:#a8caef;
    --brand-blue-soft:#1b3452;
    --brand-violet-soft:#352645;
    --brand-orange-soft:#3d281c;
    --brand-raspberry-soft:#432b3b;
    --brand-heading:#ffffff;
    --brand-icon:#ffffff;
    color-scheme:dark;
}
body,button,input,select,textarea{font-family:Montserrat,"Segoe UI",Arial,sans-serif}
body{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
h1,h2,h3{color:var(--brand-heading);font-weight:800;letter-spacing:-.025em}
button,input,select,textarea{font-synthesis:none}
::selection{background:color-mix(in srgb,var(--brand-orange) 25%,transparent)}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}

/* La identidad se coloca con sus márgenes y contornos originales. */
.brand{gap:0;min-height:72px}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;background:transparent;border-radius:0;box-shadow:none}
.brand-mark img{display:block;width:48px;height:auto;max-width:none}
.brand-name{display:block;width:136px;height:auto;max-width:100%}
.brand .nav-label small{margin-top:.1rem;margin-left:.6rem;color:#fff;font-size:.64rem;font-weight:500}
.brand-signature{display:flex;align-items:center;gap:0;width:210px;max-width:100%;background:transparent;border-radius:0;box-shadow:none}
.brand-signature .brand-symbol{display:block;width:54px;height:auto;flex:0 0 54px}
.brand-signature .brand-name{width:156px}
.brand-logo-light{display:block}
.brand-logo-dark{display:none}
html[data-theme="dark"] .brand-logo-light{display:none}
html[data-theme="dark"] .brand-logo-dark{display:block}
.sidebar{background:var(--brand-blue)}
.sidebar nav{scrollbar-color:rgba(255,255,255,.35) transparent}
.nav-group-label{color:#c6dcf5;font-weight:700}
.sidebar nav a{color:#fff;gap:.7rem;font-size:.78rem;min-height:44px}
.sidebar nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar nav a.active,.sidebar nav a[aria-current="page"]{background:#003b82;border-color:rgba(255,255,255,.25);color:#fff}
.sidebar nav a.active::before,.sidebar nav a[aria-current="page"]::before{background:var(--brand-orange)}
.sidebar nav a>span:first-child{width:32px;height:32px;flex:0 0 32px;color:#fff}
.sidebar-collapsed .brand{justify-content:center;padding-inline:0}
.sidebar-collapsed .brand-mark{flex-basis:48px}
.sidebar .ui-icon{--brand-icon:#fff;--brand-icon-accent:var(--brand-orange)}
.brand-icon-image{display:block;width:32px;height:32px;object-fit:contain;flex:0 0 32px}
.brand-icon-white{display:none}
.sidebar .brand-icon-color{display:none}
.sidebar .brand-icon-white{display:block}
html[data-theme="dark"] .brand-icon-color{display:none}
html[data-theme="dark"] .brand-icon-white{display:block}
.ui-icon{display:block;width:28px;height:28px;flex:0 0 28px;color:var(--brand-icon)}
.top-action .ui-icon{width:22px;height:22px;flex-basis:22px}
.metric-icon .ui-icon,.scanner-icon .ui-icon{width:32px;height:32px;flex-basis:32px}
.metric-icon .brand-icon-image{width:40px;height:40px;flex-basis:40px}
.metric-icon.red .ui-icon,.metric-icon.green .ui-icon,.metric-icon.amber .ui-icon{--brand-icon:currentColor;--brand-icon-accent:currentColor}
.mobile-menu .ui-icon{width:24px;height:24px}
.recommendation-tabs .ui-icon,.recommendation-tabs .brand-icon-image{width:24px;height:24px;flex-basis:24px}
.recommendation-tabs a.active .ui-icon{--brand-icon:#fff;--brand-icon-accent:var(--brand-orange)}
.recommendation-tabs a.active .brand-icon-color{display:none}
.recommendation-tabs a.active .brand-icon-white{display:block}

.topbar{background:var(--surface)}
html[data-theme="dark"] .topbar{background:var(--surface)}
.topbar .eyebrow>span:first-child{color:var(--primary);font-weight:700}
.topbar h1{color:var(--brand-heading)}
.top-action{background:var(--surface);color:var(--text)}
.top-action:hover,.top-action:focus-visible{background:var(--brand-blue-soft)}
.user-chip>span{background:var(--brand-orange-soft);color:var(--brand-editorial)}
html[data-theme="dark"] .user-chip>span{color:var(--brand-orange)}
.button.primary,.pagination a.active{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}
.button.primary:hover,.pagination a.active:hover{background:#003b82;border-color:#003b82}
.recommendation-tabs a.active,.currency-segment input:checked+span,.pricing-section-index,.order-archive-tabs a.active,.reseller-load-modes .button.is-active{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.button.secondary{background:var(--brand-blue-soft);border-color:var(--line-strong);color:var(--primary)}
.button.ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .button.secondary{background:var(--brand-blue-soft);color:#d7e8fc;border-color:var(--line-strong)}
html[data-theme="dark"] .button.ghost{background:var(--surface);color:var(--text)}
.pill,.badge{background:var(--brand-blue-soft);color:var(--primary);border-color:var(--line)}
html[data-theme="dark"] .pill,html[data-theme="dark"] .badge{background:var(--brand-blue-soft);color:#d7e8fc}
.metric-icon.blue{background:var(--brand-blue-soft);color:var(--primary)}
.metric-icon.violet{background:var(--brand-violet-soft);color:var(--brand-violet)}
html[data-theme="dark"] .metric-icon.violet{color:#dbc4ed}
.date-range-icon,.date-range-quick button.active,.range-day.selected::before{background:var(--brand-blue)}
.range-day.in-range::after,.range-day:hover::before,.range-day.today::before{background:var(--brand-blue-soft)}
.range-day.selected::before{background:var(--brand-blue)}
.range-day.selected{color:#fff}
.date-range-caption,label{color:var(--text)}
.filter-toggle-status{background:var(--brand-blue-soft)!important;color:var(--primary)!important}
html[data-theme="dark"] .filter-toggle-status{background:var(--brand-blue-soft)!important;color:#d7e8fc!important}
.hero-graphic{background:var(--brand-blue);box-shadow:none}
.login-art{background:var(--brand-blue);color:#fff}
.login-art h1,.login-art h2,.login-art p,.login-capabilities small{color:#fff}
.login-capabilities article>b{border-color:var(--brand-orange);background:transparent;color:#fff}
.login-art .pill{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.login-provider strong,.login-provider-mobile strong{font-weight:700}
.login-provider-mobile{color:var(--muted)}
.login-card .brand-signature{margin-bottom:.35rem}
.install-card>.brand-signature{margin-bottom:1rem}
.install-card{border:1px solid var(--line)}

@media(max-width:760px){
    .sidebar-collapsed .brand{justify-content:flex-start}
    .sidebar-collapsed .brand .nav-label{display:block}
    .brand{min-height:64px}
    .login-card .brand-signature{width:210px}
}
@media(prefers-reduced-motion:reduce){
    .brand,.brand-signature{transition:none}
}
