/* Max Mohr — componentes base v1.0. Requer tokens.css. */
*,*::before,*::after{box-sizing:border-box}
body.mm{margin:0;font-family:var(--mm-fonte);font-size:var(--mm-texto-md);line-height:1.5;color:var(--mm-texto);background:var(--mm-fundo);-webkit-font-smoothing:antialiased}
.mm h1,.mm h2,.mm h3{margin:0;font-weight:var(--mm-peso-forte);line-height:1.15;color:var(--mm-titulo)}
.mm h1{font-size:var(--mm-titulo-lg)} .mm h2{font-size:var(--mm-titulo-md)} .mm h3{font-size:var(--mm-titulo-sm)}
.mm-leve{font-weight:var(--mm-peso-leve)}
.mm-rotulo{font-size:var(--mm-texto-xs);font-weight:var(--mm-peso-semi);letter-spacing:.14em;text-transform:uppercase;color:var(--mm-texto-2)}
.mm-num{font-variant-numeric:tabular-nums}

/* Layout de aplicação: menu lateral + conteúdo */
.mm-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.mm-menu{background:var(--mm-superficie-marca);color:#fff;padding:var(--mm-esp-5) var(--mm-esp-4);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--mm-esp-1)}
.mm-menu .mm-menu-logo{height:40px;margin:0 var(--mm-esp-2) var(--mm-esp-6)}
.mm-menu a{display:flex;align-items:center;gap:var(--mm-esp-3);padding:10px var(--mm-esp-3);border-radius:var(--mm-raio);color:rgba(255,255,255,.78);text-decoration:none;font-size:var(--mm-texto-sm);font-weight:var(--mm-peso-semi);position:relative;z-index:1}
.mm-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.mm-menu a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff}
.mm-menu a[aria-current="page"]::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:#FFFFFF}
.mm-menu a svg{width:18px;height:18px;flex:none}
.mm-conteudo{padding:var(--mm-esp-6) var(--mm-esp-7);display:flex;flex-direction:column;gap:var(--mm-esp-5);min-width:0}
.mm-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--mm-esp-4)}

/* Botões */
.mm-btn{display:inline-flex;align-items:center;gap:var(--mm-esp-2);height:40px;padding:0 var(--mm-esp-4);border-radius:var(--mm-raio);border:1.5px solid transparent;font:inherit;font-size:var(--mm-texto-sm);font-weight:var(--mm-peso-forte);cursor:pointer;transition:background var(--mm-transicao)}
.mm-btn:focus-visible{outline:none;box-shadow:var(--mm-foco)}
.mm-btn-primario{background:var(--mm-primario);color:var(--mm-primario-texto)}
.mm-btn-primario:hover{background:var(--mm-primario-hover)}
.mm-btn-secundario{background:var(--mm-superficie);color:var(--mm-titulo);border-color:var(--mm-borda-forte)}
.mm-btn-secundario:hover{background:var(--mm-superficie-alt)}
.mm-btn-texto{background:none;color:var(--mm-link);padding:0 var(--mm-esp-2)}
.mm-btn svg{width:16px;height:16px}

/* Campos */
.mm-campo{display:flex;flex-direction:column;gap:6px}
.mm-campo label{font-size:var(--mm-texto-sm);font-weight:var(--mm-peso-semi);color:var(--mm-texto)}
.mm-input{height:40px;padding:0 var(--mm-esp-3);border:1.5px solid var(--mm-borda);border-radius:var(--mm-raio);background:var(--mm-superficie);font:inherit;font-size:var(--mm-texto-sm);color:var(--mm-texto)}
.mm-input:focus{outline:none;border-color:var(--mm-link);box-shadow:var(--mm-foco)}

/* Cards e indicadores */
.mm-card{background:var(--mm-superficie);border:1px solid var(--mm-borda);border-radius:var(--mm-raio);padding:var(--mm-esp-5);box-shadow:var(--mm-sombra-1)}
.mm-card-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--mm-esp-4)}
.mm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--mm-esp-4)}
.mm-kpi .mm-kpi-valor{font-size:var(--mm-numero-destaque);font-weight:var(--mm-peso-forte);color:var(--mm-titulo);line-height:1.1;margin:var(--mm-esp-2) 0 var(--mm-esp-1)}
.mm-kpi .mm-kpi-valor small{font-size:var(--mm-texto-lg);font-weight:var(--mm-peso-leve);color:var(--mm-texto-2);margin-left:4px}
.mm-delta{font-size:var(--mm-texto-sm);font-weight:var(--mm-peso-semi);display:inline-flex;align-items:center;gap:4px}
.mm-delta.sobe{color:var(--mm-sucesso-texto)} .mm-delta.desce{color:var(--mm-erro-texto)}

/* Badges: linha de negócio (ponto colorido + texto neutro) e status (ícone + rótulo) */
.mm-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--mm-raio-sm);font-size:var(--mm-texto-xs);font-weight:var(--mm-peso-semi);background:var(--mm-superficie-alt);color:var(--mm-texto)}
.mm-badge i{width:8px;height:8px;border-radius:2px;flex:none}
.mm-badge.concreto i{background:var(--mm-linha-concreto)} .mm-badge.argamassa i{background:var(--mm-linha-argamassa)} .mm-badge.express i{background:var(--mm-linha-express)}
.mm-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--mm-texto-xs);font-weight:var(--mm-peso-semi);height:24px;padding:0 8px;border-radius:var(--mm-raio-sm)}
.mm-status svg{width:14px;height:14px}
.mm-status.sucesso{background:var(--mm-sucesso-fundo);color:var(--mm-sucesso-texto)}
.mm-status.alerta{background:var(--mm-alerta-fundo);color:var(--mm-alerta-texto)}
.mm-status.erro{background:var(--mm-erro-fundo);color:var(--mm-erro-texto)}
.mm-status.info{background:var(--mm-info-fundo);color:var(--mm-info-texto)}

/* Tabela */
.mm-tabela{width:100%;border-collapse:collapse;font-size:var(--mm-texto-sm)}
.mm-tabela th{text-align:left;font-size:var(--mm-texto-xs);font-weight:var(--mm-peso-semi);letter-spacing:.1em;text-transform:uppercase;color:var(--mm-texto-2);padding:10px 12px;border-bottom:1.5px solid var(--mm-borda)}
.mm-tabela td{padding:12px;white-space:nowrap;border-bottom:1px solid var(--mm-grade)}
.mm-tabela tbody tr:hover{background:var(--mm-superficie-alt)}
.mm-tabela .direita{text-align:right}

/* Alerta (mensagem de sistema) */
.mm-aviso{display:flex;gap:var(--mm-esp-3);align-items:flex-start;padding:var(--mm-esp-3) var(--mm-esp-4);border-radius:var(--mm-raio);border-left:4px solid var(--mm-alerta);background:var(--mm-alerta-fundo);font-size:var(--mm-texto-sm);color:var(--mm-texto)}
.mm-aviso svg{width:18px;height:18px;flex:none;color:var(--mm-alerta-texto);margin-top:2px}
.mm-aviso b{color:var(--mm-alerta-texto)}

/* Textura de marca: contorno do símbolo (uso sutil, só em áreas sem conteúdo) */
.mm-textura{position:absolute;pointer-events:none;color:currentColor;opacity:.22}
.mm-textura path{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}

/* Legenda de gráfico */
.mm-legenda{display:flex;gap:var(--mm-esp-4);font-size:var(--mm-texto-sm);color:var(--mm-texto-2)}
.mm-legenda span{display:inline-flex;align-items:center;gap:6px}
.mm-legenda i{width:10px;height:10px;border-radius:2px}

/* ===== Degradês da marca (v1.0) =====
   Só azuis da paleta, sempre sutis. NUNCA em barras, linhas ou áreas de gráfico (distorce o dado). */
body.mm{background:var(--mm-grad-fundo),var(--mm-fundo);background-attachment:fixed}
.mm-menu{background:var(--mm-grad-marca)}
.mm-menu a[aria-current="page"]{background:linear-gradient(90deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 100%)}
.mm-btn-primario{background:var(--mm-grad-primario);box-shadow:0 2px 8px rgba(5,57,183,.22)}
.mm-btn-primario:hover{background:var(--mm-grad-primario-hover)}
.mm-card{background:var(--mm-grad-card)}
.mm-card.mm-destaque{background:var(--mm-grad-destaque),var(--mm-grad-card)}
.mm-kpi{position:relative;overflow:hidden}
.mm-kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mm-grad-assinatura)}
.mm-filete{display:block;width:72px;height:3px;border-radius:2px;background:var(--mm-grad-assinatura);margin-top:12px}
.mm-aviso{background:linear-gradient(90deg,var(--mm-alerta-fundo) 0%,var(--mm-alerta-fundo) 55%,transparent 130%)}