/* ==========================================================================
   Juá · gestão: o visual dos painéis do grupo (vidro, fio de luz, brilho suave) no café e dourado do Juá.
   Fundo café quase preto com grade fina, cartões de vidro quente, títulos em Fraunces itálico e números em Manrope.
   Cores dos dados em Componentes/Graficos/Cores.cs. Situação nunca é só cor: vai sempre a palavra junto.
   ========================================================================== */
:root {
    --fundo: #130d09;
    --cartao: #1e150f;
    --cartao-2: #281c13;
    --borda: rgba(222, 184, 140, .14);
    --borda-forte: rgba(222, 184, 140, .32);
    --tinta: #f3e7d6;
    --tinta-2: #cbb9a3;
    --tinta-3: #927f6c;
    --grade: rgba(222, 188, 150, .08);
    --ouro: #c98f56;
    --ouro-claro: #ecc9a0;
    --link: #ddb084;
    --bom: #3fd16b;
    --ruim: #ff7a6e;
    --ok: #3fd16b;
    --atencao: #d98e3f;
    --critico: #ff6b5e;
    --info: #ddb084;
    --cor-empresa: var(--ouro);
    --barra: 48px;
    --raio: 16px;
    color-scheme: dark;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    color: var(--tinta);
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(1100px 500px at 10% -10%, rgba(201, 143, 86, .20), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(224, 123, 57, .12), transparent 60%),
        linear-gradient(var(--grade) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--grade) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--fundo) !important;
    background-attachment: fixed !important;
}
a { color: var(--link); }
::selection { background: rgba(201, 143, 86, .35); }
h1, h2, h3, .ic-valor, .md-texto b, .gr-centro b, .mm-valor b, .ec-principal b, .un-numero b, .marca-nome, .painel-titulo {
    font-family: Manrope, system-ui, sans-serif; letter-spacing: -.01em;
}
.primeira-maiuscula { display: inline-block; }
.primeira-maiuscula::first-letter { text-transform: uppercase; }

/* ---------- Barra do topo, menu e conteúdo ---------- */
/* iPhone com o painel instalado: a barra começa abaixo do relógio/entalhe */
.barra-topo {
    padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
    background: rgba(19, 13, 9, .78) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borda);
}
.marca { display: flex; flex-direction: column; margin-left: 8px; text-decoration: none; line-height: 1; }
.marca-nome {
    font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .95rem;
    background: linear-gradient(90deg, #ffffff, #ecc9a0 60%, #9c6638); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 10px rgba(201, 143, 86, .45));
}
.marca-grupo { color: var(--tinta-3); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; margin-top: 4px; }
.marca.grande { margin: 0 0 6px; }
.marca.grande .marca-nome { font-size: 1.6rem; }
.marca.grande .marca-grupo { font-size: .7rem; margin-top: 8px; }
.usuario { color: var(--tinta-2); font-size: .82rem; margin-right: 6px; }
.menu-lateral { border-right: 1px solid var(--borda) !important; background: rgba(18, 12, 8, .96) !important; }
.menu-lateral .mud-nav-link { border-radius: 10px; margin: 2px 8px; width: auto; }
.menu-lateral .mud-nav-link.active { color: #fff !important; background: linear-gradient(135deg, rgba(168, 116, 66, .55), rgba(110, 69, 40, .35)) !important; box-shadow: 0 0 18px rgba(201, 143, 86, .25); }
.menu-lateral .mud-nav-link.active .mud-nav-link-icon { color: #fff !important; }

.conteudo { padding: 18px 16px calc(32px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .conteudo { padding: 24px 24px 48px; } }

/* ---------- Central (Home, empresa, unidade) ---------- */
.central { overflow-x: clip; }
.central:fullscreen { overflow-y: auto; padding: 24px 28px 48px; background: inherit; }
.central:fullscreen { background:
        radial-gradient(1100px 500px at 10% -10%, rgba(201, 143, 86, .20), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(224, 123, 57, .12), transparent 60%),
        linear-gradient(var(--grade) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--grade) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--fundo); }
.central:fullscreen .lux-nav { top: 0; }

.lux-topo { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.lux-titulo-voltar { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.lux-voltar { margin-top: 18px; flex: none; }
.lux-sobretitulo { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ouro); font-weight: 700; }
.lux-topo h1, .painel-titulo {
    margin: 2px 0 4px; font-size: clamp(1.6rem, 4.2vw, 2.4rem); font-weight: 800; line-height: 1.1;
    background: linear-gradient(90deg, #ffffff, #ecc9a0 60%, #9c6638); -webkit-background-clip: text; background-clip: text; color: transparent;
    overflow-wrap: anywhere;
}
.lux-periodo { color: var(--tinta-3); font-size: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.lux-periodo .situacao { margin-right: 2px; }
.lux-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lux-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lux-chips.rolagem { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lux-chips.rolagem::-webkit-scrollbar { display: none; }
.lux-chip, .lux-botao {
    border: 1px solid var(--borda); background: rgba(36, 25, 17, .8); color: var(--tinta-2); text-decoration: none;
    border-radius: 999px; padding: 6px 12px; font: 500 .8rem Manrope, sans-serif; cursor: pointer; transition: all .15s;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none;
}
.lux-botao { padding: 7px; }
.lux-chip:hover, .lux-botao:hover:not(:disabled) { border-color: var(--borda-forte); color: var(--tinta); }
.lux-botao:disabled { opacity: .55; cursor: default; }
.lux-chip.ativo { background: linear-gradient(135deg, #a87442, #6e4528); color: #fff; border-color: transparent; box-shadow: 0 0 18px rgba(201, 143, 86, .45); }
.lux-chip.ativo.critico { background: linear-gradient(135deg, #c8473d, #8f2a22); box-shadow: 0 0 18px rgba(255, 107, 94, .4); }
.lux-chip.ativo.atencao { background: linear-gradient(135deg, #a8692e, #6f4524); box-shadow: 0 0 18px rgba(217, 142, 63, .35); }
.lux-chip small { opacity: .75; margin-left: 2px; font-variant-numeric: tabular-nums; }
.girando { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Menu de seções: fixo no topo ao rolar, de lado no celular */
.lux-nav {
    position: sticky; top: calc(var(--barra) + env(safe-area-inset-top)); z-index: 5; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -4px 18px; padding: 8px 4px; background: rgba(19, 13, 9, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borda);
}
.lux-nav::-webkit-scrollbar { display: none; }
.lux-nav a { flex: none; display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2); text-decoration: none; font-size: .82rem; padding: 6px 12px; border-radius: 8px; }
.lux-nav a:hover { color: #fff; background: rgba(201, 143, 86, .16); }
.lux-nav-cor { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
@media (max-width: 959px) { .lux-so-pc { display: none !important; } }

/* ---------- Estrutura ---------- */
.lux-secao { margin-bottom: 34px; scroll-margin-top: calc(var(--barra) + 64px); }
.lux-secao-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lux-secao h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.25rem; font-weight: 700; }
.lux-secao h2 > .mud-icon-root { color: var(--ouro); filter: drop-shadow(0 0 6px rgba(201, 143, 86, .7)); }
.lux-secao h2 small { display: block; font: 600 .66rem Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin-top: 2px; }
.lux-ajuda { font-size: .76rem; color: var(--tinta-3); }

.lux-cartao, .cartao, .login-cartao {
    position: relative; background: linear-gradient(180deg, var(--cartao-2), var(--cartao));
    border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; min-width: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.lux-cartao::before, .cartao::before, .login-cartao::before {
    content: ""; position: absolute; inset: 0 20% auto; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(236, 201, 160, .55), transparent);
}
.lux-cartao-titulo { font-weight: 600; font-size: .95rem; margin-bottom: 12px; color: var(--tinta); }
.lux-cartao-titulo small { display: block; font-weight: 400; color: var(--tinta-3); font-size: .75rem; margin-top: 2px; }
.lux-rodape-cartao { margin-top: 10px; font-size: .74rem; color: var(--tinta-3); text-align: right; }
.lux-vazio { text-align: center; color: var(--tinta-2); padding: 26px 16px; }
.lux-vazio-motivo { margin-top: 6px; font-size: .8rem; color: var(--tinta-3); }
.lux-link { display: inline-flex; align-items: center; gap: 4px; color: var(--link); text-decoration: none; font-size: .82rem; font-weight: 600; }
.lux-link:hover { color: #fff; }

.lux-grade { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
    .lux-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lux-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .lux-2 > .lux-largo { grid-column: 1 / -1; }
}

/* ---------- Visão geral ---------- */
.lux-hero { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .lux-hero { grid-template-columns: 320px minmax(0, 1fr); } }
.lux-saude { display: flex; flex-direction: column; }
.lux-notas { display: grid; gap: 4px; margin-top: 10px; }
.lux-nota { display: grid; grid-template-columns: 82px 1fr 30px; gap: 10px; align-items: center; font-size: .8rem; color: var(--tinta-2); text-decoration: none; padding: 4px 6px; margin: 0 -6px; border-radius: 8px; }
.lux-nota:hover { background: rgba(201, 143, 86, .10); color: var(--tinta); }
.lux-nota span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lux-nota b { text-align: right; color: var(--tinta); font-variant-numeric: tabular-nums; }
.lux-nota.sem-dados { opacity: .55; }
.lux-nota.sem-dados b { color: var(--tinta-3); }
.lux-nota-cor { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lux-legenda-nota { margin-top: 12px; font-size: .72rem; line-height: 1.45; color: var(--tinta-3); }

.lux-empresas { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .lux-empresas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Cartão da empresa na visão geral */
.ec {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 16px;
    color: inherit; text-decoration: none; border-radius: var(--raio); border: 1px solid var(--borda);
    background:
        radial-gradient(420px 160px at 0% 0%, color-mix(in srgb, var(--cor-empresa) 22%, transparent), transparent 70%),
        linear-gradient(180deg, var(--cartao-2), var(--cartao));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ec::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cor-empresa); box-shadow: 0 0 14px var(--cor-empresa); }
.ec:hover { transform: translateY(-2px); border-color: var(--borda-forte); box-shadow: 0 0 26px color-mix(in srgb, var(--cor-empresa) 28%, transparent); }
.ec-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ec-icone, .empresa-icone { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; }
.ec-nome { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-nome small { display: block; font-weight: 500; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin-top: 2px; }
.ec-principal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; position: relative; z-index: 1; }
.ec-principal small { flex-basis: 100%; font-size: .74rem; color: var(--tinta-2); }
.ec-principal b { font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px color-mix(in srgb, var(--cor-empresa) 45%, transparent); }
.ec-principal span { font-size: .76rem; color: var(--tinta-3); }
.ec-outros { display: grid; gap: 5px; position: relative; z-index: 1; }
.ec-outros div { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--tinta-2); }
.ec-outros span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-outros b { color: var(--tinta); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ec-vazio { font-size: .84rem; color: var(--tinta-3); padding: 10px 0; }
.ec-rodape { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; position: relative; z-index: 1; }
.ec-spark { height: 46px; opacity: .35; }

/* Pílulas de quantidade de alertas */
.pilula { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pilula.critico { color: var(--ruim); background: rgba(255, 122, 110, .14); }
.pilula.atencao { color: var(--atencao); background: rgba(217, 142, 63, .13); }
.pilula.ok { color: var(--bom); background: rgba(63, 209, 107, .11); font-weight: 600; }

/* Situação das fontes */
.situacao { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--tinta-2); white-space: nowrap; }
.situacao i { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); flex: none; }
.situacao.ok i { background: var(--bom); box-shadow: 0 0 0 3px rgba(63, 209, 107, .15), 0 0 10px rgba(63, 209, 107, .6); }
.situacao.atencao { color: var(--atencao); } .situacao.atencao i { background: var(--atencao); }
.situacao.critico { color: var(--ruim); } .situacao.critico i { background: var(--ruim); }

/* Números (KPIs) */
.lux-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .lux-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lux-numeros { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .lux-numeros { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

.ic {
    position: relative; overflow: hidden; min-width: 0; display: block; color: inherit; text-decoration: none;
    background: linear-gradient(160deg, color-mix(in srgb, var(--ic-cor, var(--ouro)) 13%, transparent), rgba(36, 25, 17, .95) 48%);
    border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px 16px;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ic-link { cursor: pointer; }
.ic-link:hover { transform: translateY(-2px); border-color: var(--borda-forte); box-shadow: 0 0 24px color-mix(in srgb, var(--ic-cor, var(--ouro)) 25%, transparent); }
.ic.ic-atencao { border-color: rgba(217, 142, 63, .35); }
.ic.ic-critico { border-color: rgba(255, 122, 110, .45); box-shadow: 0 0 20px rgba(255, 107, 94, .12); }
.ic-topo { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.ic-icone { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ic-icone .mud-icon-root { font-size: 1.05rem; }
.ic-titulo { flex: 1; min-width: 0; font-size: .76rem; color: var(--tinta-2); line-height: 1.25; }
.ic-titulo small { display: block; font-size: .66rem; color: var(--tinta-3); }
.ic-selo { flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.ic-selo.atencao { color: var(--atencao); background: rgba(217, 142, 63, .13); }
.ic-selo.critico { color: var(--ruim); background: rgba(255, 122, 110, .14); }
.ic-valor { font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 700; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.ic-rodape { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; position: relative; z-index: 1; }
.ic-detalhe { font-size: .72rem; color: var(--tinta-3); min-width: 0; overflow-wrap: anywhere; }
.ic-delta { font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.ic-delta.bom { color: var(--bom); background: rgba(63, 209, 107, .12); }
.ic-delta.ruim { color: var(--ruim); background: rgba(255, 122, 110, .12); }
.ic-delta.neutro { color: var(--tinta-2); background: rgba(255, 255, 255, .06); }
.ic-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34px; opacity: .5; pointer-events: none; }
.ic-compacto .ic-valor { font-size: clamp(1.1rem, 2vw, 1.4rem); }

/* Medidor de saúde */
.md { position: relative; max-width: 260px; margin: 0 auto; width: 100%; }
.md svg { width: 100%; display: block; overflow: visible; }
.md-arco { filter: drop-shadow(0 0 8px var(--md-cor)); transition: stroke-dasharray .8s ease; }
.md-texto { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
.md-texto b { display: block; font-size: 2.8rem; line-height: 1; font-weight: 800; }
.md-texto span { font-size: .8rem; color: var(--md-cor); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.md-titulo { text-align: center; font-size: .8rem; color: var(--tinta-2); }

/* Medidores de meta */
.lux-medidores { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .lux-medidores { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.mm {
    position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 10px; color: inherit; text-decoration: none;
    border-radius: 14px; border: 1px solid var(--borda);
    background: radial-gradient(260px 120px at 50% 100%, color-mix(in srgb, var(--md-cor) 14%, transparent), transparent 70%), linear-gradient(180deg, var(--cartao-2), var(--cartao));
    transition: transform .15s, border-color .15s;
}
.mm-link:hover { transform: translateY(-2px); border-color: var(--borda-forte); }
.mm-titulo { font-size: .76rem; color: var(--tinta-2); line-height: 1.25; min-height: 2.5em; }
.mm-arco { position: relative; margin: 4px auto 0; width: 100%; max-width: 190px; }
.mm-arco svg { width: 100%; display: block; overflow: visible; }
.mm-meta { stroke: #f3e7d6; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .7)); }
.mm-valor { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.mm-valor b { display: block; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 700; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm-valor span { font-size: .64rem; color: var(--md-cor); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.mm-rodape { display: flex; flex-direction: column; align-items: center; margin-top: 6px; font-size: .72rem; color: var(--tinta-3); text-align: center; }
.mm-rodape small { font-size: .66rem; opacity: .85; }

/* ---------- Alertas ---------- */
.alertas { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .alertas.em-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .alertas.em-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.alerta {
    --tom: var(--info);
    position: relative; padding: 12px 14px 12px 16px; border-radius: 14px; min-width: 0;
    background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); border: 1px solid var(--borda);
    box-shadow: inset 3px 0 0 var(--tom);
}
.alerta.critico { --tom: #ff6b5e; background: linear-gradient(180deg, rgba(255, 107, 94, .10), var(--cartao) 70%); border-color: rgba(255, 107, 94, .28); }
.alerta.atencao { --tom: #d98e3f; }
.alerta-topo { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; }
.alerta-selo { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tom); }
.alerta-selo .mud-icon-root { font-size: 1rem; }
.alerta.critico .alerta-selo .mud-icon-root { animation: pulso 2s ease-out infinite; border-radius: 50%; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 94, .55); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.alerta-origem { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--tinta-2); min-width: 0; }
.alerta-origem::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--origem, var(--tinta-3)); flex: none; }
.alerta-texto { margin-top: 6px; font-size: .92rem; line-height: 1.45; color: var(--tinta); overflow-wrap: anywhere; }
.alerta .lux-link { margin-top: 8px; }
.lux-ok { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; color: var(--tinta-2); background: rgba(63, 209, 107, .06); border: 1px solid rgba(63, 209, 107, .2); }
.lux-ok-icone { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--bom); border: 1px solid rgba(63, 209, 107, .45); box-shadow: 0 0 12px rgba(63, 209, 107, .25); }
.lux-mais { margin: 12px auto 0; display: flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--link); font: 600 .84rem Manrope, sans-serif; cursor: pointer; }
.lux-mais:hover { color: #fff; }
.lux-falhas { margin-bottom: 18px; }

/* ---------- Empresa e unidades ---------- */
.empresa-h2 { min-width: 0; }
.empresa-h2 > span:last-child { min-width: 0; }
.lux-unidades { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-content: start; }
@media (min-width: 640px) { .lux-unidades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.un { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.un:hover { transform: translateY(-2px); border-color: var(--borda-forte); }
.un-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.un-nome { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-seta { color: var(--tinta-3); }
.un-motivo { font-size: .8rem; color: var(--tinta-3); }
.un-numeros { display: grid; gap: 10px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.un-numero { display: flex; flex-direction: column; min-width: 0; }
.un-numero small { font-size: .7rem; color: var(--tinta-3); line-height: 1.25; }
.un-numero b { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.un-numero span { font-size: .68rem; color: var(--tinta-3); }

/* Carregando */
.lux-carregando { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lux-esqueleto { height: 120px; border-radius: 14px; background: linear-gradient(90deg, #1e150f, #30221a, #1e150f); background-size: 200% 100%; animation: lux-brilho 1.4s infinite; }
@keyframes lux-brilho { to { background-position: -200% 0; } }
.lux-rodape { text-align: center; color: var(--tinta-3); font-size: .75rem; margin-top: 10px; }

/* ==========================================================================
   Gráficos (Componentes/Graficos)
   ========================================================================== */
.gl-vazio { display: flex; align-items: center; justify-content: center; min-height: 80px; height: 100%; color: var(--tinta-3); font-size: .85rem; text-align: center; }

/* Linha */
.gl { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 22px auto; position: relative; }
.gl > .gl-vazio { grid-column: 1 / -1; grid-row: 1 / -1; }
.gl-eixo-y { position: relative; grid-row: 1; }
.gl-eixo-y span, .cn-eixo-y span { position: absolute; right: 8px; transform: translateY(50%); font-size: .68rem; color: var(--tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl-area { position: relative; grid-row: 1; grid-column: 2; }
.gl-grade { position: absolute; left: 0; right: 0; height: 1px; background: var(--grade); }
.gl-grade.zero { background: rgba(222, 188, 150, .28); }
.gl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gl-linha { filter: drop-shadow(0 0 6px var(--gl-brilho, rgba(201, 143, 86, .8))); }
.gl-alvos { position: absolute; inset: 0; display: flex; }
.gl-alvos > div { flex: 1; cursor: crosshair; }
.gl-cruz { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(236, 201, 160, .5); pointer-events: none; }
.gl-ponto { position: absolute; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; border: 2px solid var(--cartao); pointer-events: none; box-shadow: 0 0 10px var(--gl-brilho, rgba(201, 143, 86, .9)); }
.gl-ponto-final { animation: respira 2.4s ease-in-out infinite; }
@keyframes respira { 50% { box-shadow: 0 0 2px var(--gl-brilho), 0 0 0 6px transparent; } }
.gl-ponto-ant { background: #927f6c; box-shadow: none; }
.gl-dica, .cn-dica {
    position: absolute; top: 4px; z-index: 3; pointer-events: none; min-width: 150px; max-width: 260px;
    background: rgba(19, 13, 9, .95); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 8px 10px; font-size: .76rem; line-height: 1.5;
    color: var(--tinta-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.gl-dica b, .cn-dica b { color: var(--tinta); }
.gl-detalhe { color: var(--tinta-3); font-size: .7rem; margin-top: 2px; }
.gl-marca, .gr-marca { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; flex: none; }
.gl-marca-ant { background: repeating-linear-gradient(90deg, #927f6c 0 4px, transparent 4px 6px); height: 3px; border-radius: 0; }
.cn-marca-ant { background: rgba(146, 127, 108, .45); border: 1px solid rgba(146, 127, 108, .8); }
.gl-eixo-x { position: relative; grid-row: 2; grid-column: 2; }
.gl-eixo-x span { position: absolute; top: 6px; transform: translateX(-50%); font-size: .68rem; color: var(--tinta-3); white-space: nowrap; }
.gl-eixo-x span:first-child { transform: none; }
.gl-eixo-x span:last-child:not(:first-child) { transform: translateX(-100%); }
@media (max-width: 599px) { .gl-eixo-x .gl-x-alt { display: none; } }
.gl-legenda { grid-row: 3; grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-end; font-size: .72rem; color: var(--tinta-2); padding-top: 6px; }
.cn .gl-legenda { padding-top: 8px; }

/* Rosca */
.gr { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 600px) and (max-width: 959px) { .gr { grid-template-columns: 200px minmax(0, 1fr); } }
.gr-rosca { position: relative; width: min(210px, 70%); margin: 0 auto; }
.gr-rosca svg { width: 100%; display: block; filter: drop-shadow(0 0 10px rgba(201, 143, 86, .18)); }
.gr-fatia { transition: stroke-width .15s, opacity .15s; cursor: pointer; }
.gr-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 22%; }
.gr-centro small { font-size: .7rem; color: var(--tinta-3); line-height: 1.2; }
.gr-centro b { font-size: 1.1rem; line-height: 1.25; }
.gr-legenda { display: grid; gap: 2px; }
.gr-item { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 8px; font-size: .82rem; cursor: default; }
.gr-item.ativo, .gr-item:hover { background: rgba(201, 143, 86, .12); }
.gr-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gr-nome small, .gr-valor small { display: block; color: var(--tinta-3); font-size: .7rem; }
.gr-valor { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Barras */
.bl { display: grid; gap: 12px; }
.bl-linha { display: block; color: inherit; text-decoration: none; border-radius: 8px; }
.bl-link:hover .bl-nome { color: #fff; }
.bl-link:hover .bl-barra { filter: brightness(1.2); }
.bl-topo { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; margin-bottom: 5px; }
.bl-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.bl-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-valor.negativo { color: var(--ruim); }
.bl-trilho { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bl-barra { height: 100%; border-radius: 4px; transition: width .6s ease; box-shadow: 0 0 12px var(--bl-brilho, rgba(201, 143, 86, .35)); }
.bl-detalhe { font-size: .7rem; color: var(--tinta-3); margin-top: 4px; }

/* Colunas */
.cn { display: flex; flex-direction: column; }
.cn > .gl-vazio { flex: 1; }
.cn-corpo { flex: 1; display: grid; grid-template-columns: 52px minmax(0, 1fr); min-height: 0; }
.cn-eixo-y { position: relative; }
.cn-barras { position: relative; display: flex; gap: 3px; }
.cn-col { flex: 1; position: relative; cursor: pointer; min-width: 0; }
.cn-barra { position: absolute; left: 0; right: 0; border-radius: 4px 4px 0 0; transition: height .6s ease, bottom .6s ease, filter .15s; opacity: .92; }
.cn-barra.estreita { left: 18%; right: 18%; }
.cn-barra.negativa { border-radius: 0 0 4px 4px; }
.cn-anterior { background: rgba(146, 127, 108, .22); border: 1px solid rgba(146, 127, 108, .45); border-bottom: 0; opacity: 1; }
.cn-col.ativo .cn-barra:not(.cn-anterior), .cn-col:hover .cn-barra:not(.cn-anterior) { opacity: 1; filter: brightness(1.25) drop-shadow(0 0 6px var(--cn-brilho)); }
.cn-dica { top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.cn-dica.esq { left: 0; transform: none; }
.cn-dica.dir { left: auto; right: 0; transform: none; }
.cn-rotulos { display: flex; gap: 3px; margin: 6px 0 0 52px; }
.cn-rotulos span { flex: 1; text-align: center; font-size: .64rem; color: var(--tinta-3); white-space: nowrap; min-width: 0; overflow: visible; }

/* ==========================================================================
   Telas de sempre (login, personalizar, cadastros) no mesmo tema
   ========================================================================== */
.painel-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sobretitulo { color: var(--ouro); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.texto-apoio { color: var(--tinta-2); font-size: .92rem; max-width: 640px; margin: 0 0 20px; line-height: 1.55; }
.cartao { padding: 18px; }
.cartao.vazio { color: var(--tinta-2); }

.botao-discreto, .botao-principal { font: inherit; cursor: pointer; border-radius: 999px; transition: all .15s; }
.botao-discreto {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: .84rem; font-weight: 500;
    color: var(--tinta); text-decoration: none; border: 1px solid var(--borda-forte); background: rgba(36, 25, 17, .8); white-space: nowrap;
}
.botao-discreto:hover { border-color: var(--ouro); color: #fff; }
.botao-principal {
    border: 0; padding: 10px 26px; font-weight: 700; font-size: .9rem; letter-spacing: .03em; color: #fff;
    background: linear-gradient(135deg, #dfb07e, #a87442 50%, #6e4528); box-shadow: 0 0 22px rgba(201, 143, 86, .4);
}
.botao-principal:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 0 28px rgba(201, 143, 86, .6); }
.botao-principal:disabled { opacity: .4; cursor: default; box-shadow: none; }
.botao-principal.largo { width: 100%; padding: 13px; }

/* Personalizar */
.empresa-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .7rem; color: var(--tinta-3); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
.empresa-icone.pequeno { width: 34px; height: 34px; color: var(--ouro); background: rgba(201, 143, 86, .14); }
.grade-preferencias { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
.preferencia-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.preferencia-nome { font-weight: 600; }
.preferencia-unidade { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--borda); cursor: pointer; }
.preferencia-unidade input { position: absolute; opacity: 0; pointer-events: none; }
.preferencia-unidade .caixa { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--borda-forte); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.preferencia-unidade input:checked + .caixa { background: var(--ouro); border-color: var(--ouro); box-shadow: 0 0 12px rgba(201, 143, 86, .5); }
.preferencia-unidade input:checked + .caixa::after { content: "✓"; color: #fff; font-size: .8rem; font-weight: 800; }
.preferencia-unidade input:focus-visible + .caixa { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
.preferencia-unidade.desligada { cursor: default; opacity: .55; }
.preferencia-texto { display: flex; flex-direction: column; font-size: .92rem; }
.preferencia-texto small { color: var(--tinta-3); font-size: .74rem; }
.barra-salvar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--fundo) 40%); }

/* Login */
.tela-login {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: radial-gradient(700px 420px at 50% 0%, rgba(201, 143, 86, .22), transparent 70%);
}
.login-cartao { width: 100%; max-width: 390px; padding: 36px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(201, 143, 86, .12); }

/* Cadastros (MudBlazor) */
.cartao-topo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: inherit; text-decoration: none; }
.cartao-topo:hover .cartao-nome { color: #fff; }
.cartao-nome { font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.cartao-sistema { font-size: .78rem; color: var(--tinta-3); }
.mud-paper { border: 1px solid var(--borda); }
.mud-appbar.mud-paper, .mud-drawer.mud-paper, .mud-snackbar.mud-paper { border: 0; }
.mud-table.mud-paper { background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); }
.num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mud-table-row.linha-clicavel { cursor: pointer; }
.bolinha { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

#blazor-error-ui {
    background: #3a1e24; color: var(--tinta); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); box-sizing: border-box;
    display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 2000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: #281c13; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child {
    stroke: #c98f56; filter: drop-shadow(0 0 6px rgba(201, 143, 86, .8));
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out;
}
.loading-progress-text { position: absolute; text-align: center; font-weight: 600; color: #cbb9a3; font-family: Manrope, system-ui, sans-serif; inset: calc(20vh + 3.25rem) 0 auto .2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Carregando"); }

/* ---------- Celular ---------- */
@media (max-width: 599px) {
    .lux-topo { align-items: flex-start; }
    .lux-voltar { margin-top: 16px; }
    .lux-secao { margin-bottom: 28px; }
    .lux-cartao, .cartao { padding: 14px; }
    .lux-secao h2 { font-size: 1.12rem; }
    .lux-kpis, .lux-numeros { gap: 10px; }
    .ic { padding: 10px 11px 14px; }
    .ic-titulo { font-size: .72rem; }
    .gl, .cn-corpo { grid-template-columns: 44px minmax(0, 1fr); }
    .cn-rotulos { margin-left: 44px; }
    .gl-eixo-y span, .cn-eixo-y span { right: 6px; font-size: .62rem; }
    .md-texto b { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .alerta.critico .alerta-selo .mud-icon-root, .girando, .gl-ponto-final, .lux-esqueleto { animation: none; }
    .ec, .ic, .un, .mm { transition: none; }
}

/* ==========================================================================
   Juá: marca, selo do grupo e as telas da gestão
   ========================================================================== */
:root { --ouro-2: #ecc9a0; --ouro-3: #9c6638; --creme: #f3e7d6; --serifa: "Fraunces", Georgia, serif; --grade: rgba(222, 188, 150, .045); }
body {
    background:
        radial-gradient(1100px 520px at 8% -12%, rgba(201, 143, 86, .16), transparent 60%),
        radial-gradient(900px 520px at 105% 0%, rgba(207, 90, 116, .10), transparent 60%),
        linear-gradient(var(--grade) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, var(--grade) 1px, transparent 1px) 0 0 / 44px 44px,
        var(--fundo) !important;
    background-attachment: fixed !important;
}
.marca-nome, .marca.grande .marca-nome {
    font: 600 italic 1.45rem/1 var(--serifa); letter-spacing: -.01em; text-transform: none;
    background: linear-gradient(115deg, #f8ead8, var(--ouro-2) 35%, var(--ouro) 65%, #7f5230); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 12px rgba(201, 143, 86, .35));
}
.marca.grande .marca-nome { font-size: 3rem; }
.marca-grupo { letter-spacing: .38em; margin-top: 2px; }
.marca.grande { align-items: center; text-align: center; margin-bottom: 10px; }
.lux-topo h1, .painel-titulo {
    font-family: var(--serifa); font-style: italic; font-weight: 600; letter-spacing: -.02em;
    background: linear-gradient(100deg, #fff6e2, var(--ouro-2) 45%, var(--ouro) 80%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lux-secao h2 { font-family: var(--serifa); font-style: italic; font-weight: 600; font-size: 1.45rem; letter-spacing: -.01em; }
.lux-secao h2 small { font-style: normal; }
.botao-principal, .lux-chip.ativo { color: #1c120a !important; }
.botao-principal { background: linear-gradient(135deg, #efcfa8, var(--ouro) 50%, #8c5c32); }
.menu-lateral .mud-nav-link.active { color: #1c120a !important; background: linear-gradient(135deg, #dfb07e, #a87442) !important; }
.menu-lateral .mud-nav-link.active .mud-nav-link-icon { color: #1c120a !important; }
.jua-progresso::after { content: var(--blazor-load-percentage-text, "Abrindo a gestão…"); }

/* Selo discreto do Grupo Sintesys */
.menu-coluna { display: flex; flex-direction: column; min-height: 100%; }
.menu-selo { margin: auto 16px 18px; padding-top: 14px; border-top: 1px solid var(--borda); display: flex; align-items: center; gap: 8px; text-decoration: none;
    color: var(--tinta-3); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; transition: opacity .2s; }
.menu-selo:hover { opacity: 1; }
.menu-selo img { height: 20px; width: auto; }
.login-selo { margin: 26px 0 0; justify-content: center; border-top: 0; }

/* Login */
.tela-login { background: radial-gradient(700px 420px at 50% 0%, rgba(201, 143, 86, .20), transparent 70%); }
.login-cartao .texto-apoio { text-align: center; }

/* Painel: abertura */
.jua-hero { position: relative; overflow: hidden; padding: 20px 20px 14px; border-radius: 22px; border: 1px solid var(--borda); margin-bottom: 14px;
    background: radial-gradient(600px 260px at 0% 0%, rgba(201, 143, 86, .20), transparent 70%), radial-gradient(500px 260px at 100% 100%, rgba(207, 90, 116, .10), transparent 70%), linear-gradient(180deg, var(--cartao-2), var(--cartao));
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05); }
.jua-hero::before { content: ""; position: absolute; inset: 0 15% auto; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro-2), transparent); }
.jua-hero-topo { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.jua-hero-valor small { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; }
.jua-hero-valor b { display: block; font: 800 clamp(2.2rem, 6vw, 3.6rem)/1.05 Manrope, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #fff, var(--ouro-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(201, 143, 86, .35)); }
.jua-hero-valor .ic-delta { display: inline-block; margin-top: 6px; }
.jua-hero-lado { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.jua-hero-lado div { display: flex; flex-direction: column; }
.jua-hero-lado small { font-size: .7rem; color: var(--tinta-3); }
.jua-hero-lado b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Mapa de calor das horas */
.horas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 700px) { .horas { grid-template-columns: repeat(24, minmax(0, 1fr)); } }
.hora { aspect-ratio: 1 / 1.25; border-radius: 6px; position: relative; background: rgba(255, 255, 255, .04); display: grid; place-items: end center; padding-bottom: 3px;
    font-size: .58rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; cursor: default; transition: transform .15s; }
.hora:hover { transform: translateY(-2px); }
.hora i { position: absolute; inset: 0; border-radius: inherit; background: var(--ruim); opacity: var(--h, 0); box-shadow: 0 0 calc(var(--h, 0) * 16px) rgba(255, 122, 110, .6); }
.hora span { position: relative; }
.hora.forte span { color: #fff; font-weight: 700; }

/* Avisos numéricos */
.avisos-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.aviso-num { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--borda); background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); text-decoration: none; color: inherit; display: block; }
.aviso-num b { display: block; font: 800 2rem/1.1 Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.aviso-num span { font-size: .8rem; color: var(--tinta-2); }
.aviso-num small { display: block; margin-top: 4px; font-size: .72rem; color: var(--tinta-3); }
.aviso-num.atencao { border-color: rgba(217, 142, 63, .35); } .aviso-num.atencao b { color: var(--atencao); }
.aviso-num.critico { border-color: rgba(255, 122, 110, .4); } .aviso-num.critico b { color: var(--ruim); }
.aviso-num.ok b { color: var(--bom); }
.nota-fonte { margin-top: 26px; text-align: center; color: var(--tinta-3); font-size: .74rem; }

/* Cardápio e pizzas na gestão */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.busca-lux { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--borda); background: rgba(36, 25, 17, .8); }
.busca-lux input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--tinta); font: 500 .9rem Manrope, sans-serif; }
.busca-lux .mud-icon-root { color: var(--tinta-3); font-size: 1.1rem; }
.select-lux { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--borda); background: #281c13; color: var(--tinta); font: 500 .85rem Manrope, sans-serif; }
.produtos-grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.pc { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid var(--borda);
    background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); transition: transform .2s, border-color .2s, box-shadow .2s; }
.pc:hover { transform: translateY(-3px); border-color: var(--borda-forte); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 24px rgba(201, 143, 86, .12); }
.pc-foto { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(circle at 30% 20%, #30221a, #160f0a); overflow: hidden; }
.pc-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.pc:hover .pc-foto img { transform: scale(1.06); }
.pc-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(19, 13, 9, .85)); pointer-events: none; }
.pc-sem-foto { position: absolute; inset: 0; display: grid; place-items: center; font: 600 italic 2.6rem/1 var(--serifa); color: rgba(201, 143, 86, .35); }
.pc-selos { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.pc-preco { position: absolute; right: 12px; bottom: 10px; z-index: 1; font: 800 1.15rem Manrope, sans-serif; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); font-variant-numeric: tabular-nums; }
.pc-corpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pc-nome { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.pc-nome small { display: block; font-weight: 600; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-top: 3px; }
.pc-linhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: .74rem; color: var(--tinta-3); }
.pc-linhas b { display: block; color: var(--tinta); font-size: .92rem; font-variant-numeric: tabular-nums; }
.margem { margin-top: auto; }
.margem-topo { display: flex; justify-content: space-between; font-size: .74rem; color: var(--tinta-3); margin-bottom: 5px; }
.margem-topo b { font-variant-numeric: tabular-nums; }
.margem-trilho { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.margem-barra { height: 100%; border-radius: 4px; transition: width .6s; }
.selo-mini { padding: 3px 8px; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.selo-mini.ouro { background: rgba(201, 143, 86, .92); color: #1c120a; }
.selo-mini.escuro { background: rgba(19, 13, 9, .72); color: var(--tinta-2); border: 1px solid var(--borda); }
.selo-mini.ruim { background: rgba(214, 69, 69, .88); color: #fff; }
.selo-mini.bom { background: rgba(47, 179, 107, .88); color: #fff; }

/* Pizzas */
.pz-disco { position: absolute; inset: 0; display: grid; place-items: center; }
.pz-disco span { width: 54%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 7px #ad7746, 0 0 0 9px #704828, 0 18px 40px rgba(0, 0, 0, .6); }
.tamanhos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tamanho { padding: 16px; border-radius: 18px; border: 1px solid var(--borda); background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); position: relative; }
.tamanho.inativo { opacity: .7; border-style: dashed; }
.tamanho h3 { margin: 0 0 4px; font: 600 italic 1.5rem var(--serifa); color: var(--ouro-2); }
.tamanho ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .82rem; color: var(--tinta-2); }
.tamanho .selo-mini { position: absolute; top: 14px; right: 14px; }
.dispersao { position: relative; height: 320px; margin: 8px 8px 30px 44px; border-left: 1px solid var(--borda-forte); border-bottom: 1px solid var(--borda-forte); }
.dispersao-quad { position: absolute; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); padding: 6px 8px; }
.dispersao-meio-x { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(222, 184, 140, .2); }
.dispersao-meio-y { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(222, 184, 140, .2); }
.ponto-pz { position: absolute; width: 14px; height: 14px; margin: 0 0 -7px -7px; border-radius: 50%; border: 2px solid var(--cartao); cursor: pointer; transition: transform .15s; }
.ponto-pz:hover, .ponto-pz.ativo { transform: scale(1.6); z-index: 2; }
.ponto-dica { position: absolute; z-index: 3; transform: translate(-50%, calc(100% + 12px)); white-space: nowrap; pointer-events: none;
    background: rgba(19, 13, 9, .95); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 7px 10px; font-size: .75rem; color: var(--tinta-2); line-height: 1.5; }
.ponto-dica b { color: var(--tinta); }
.eixo-rot { position: absolute; font-size: .64rem; color: var(--tinta-3); white-space: nowrap; }
.legenda-grupos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .76rem; color: var(--tinta-2); }
.legenda-grupos span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-grupos i { width: 10px; height: 10px; border-radius: 50%; }
.massa { display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); font-size: .84rem; color: var(--tinta-2); }
.massa b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.fid-linhas { display: grid; gap: 2px; margin-top: 12px; }
.fid-linhas div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 4px; border-top: 1px solid var(--borda); font-size: .84rem; color: var(--tinta-2); }
.fid-linhas b { color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Pedidos online (quadro do caixa) */
.kanban { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kb-coluna { display: grid; gap: 10px; padding: 12px; border-radius: 18px; border: 1px solid var(--borda); background: rgba(36, 25, 17, .45); }
.kb-topo { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: .9rem; padding: 2px 4px 4px; }
.kb-topo span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kb-cor); box-shadow: 0 0 10px var(--kb-cor); margin-right: 8px; vertical-align: middle; }
.kb-topo b { font-variant-numeric: tabular-nums; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.kb-vazio { color: var(--tinta-3); font-size: .82rem; text-align: center; padding: 18px 0; }
.pd { position: relative; display: grid; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--borda); background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); }
.pd.novo { border-color: rgba(224, 123, 57, .6); box-shadow: 0 0 0 1px rgba(224, 123, 57, .25), 0 0 26px rgba(224, 123, 57, .22); animation: pd-chega 2.2s ease-in-out infinite; }
@keyframes pd-chega { 50% { box-shadow: 0 0 0 1px rgba(224, 123, 57, .45), 0 0 34px rgba(224, 123, 57, .38); } }
.pd.encerrado { opacity: .62; }
.pd-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-num { font: 800 1.25rem Manrope, sans-serif; color: var(--ouro-2); }
.pd-modo { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(63, 167, 181, .18); color: #7fd3de; }
.pd-modo.entrega { background: rgba(224, 123, 57, .18); color: #f0a26e; }
.pd-hora { margin-left: auto; font-size: .74rem; color: var(--tinta-3); }
.pd-cliente { font-size: .9rem; } .pd-cliente a { color: var(--link); text-decoration: none; margin-left: 6px; font-size: .82rem; }
.pd-end { display: flex; gap: 4px; align-items: flex-start; font-size: .82rem; color: var(--tinta-2); }
.pd-end .mud-icon-root { color: var(--ouro); margin-top: 1px; }
.pd-itens { list-style: none; margin: 0; padding: 8px 0; display: grid; gap: 6px; border-block: 1px dashed var(--borda); }
.pd-itens li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; font-size: .86rem; }
.pd-itens small { display: block; color: var(--tinta-3); font-size: .74rem; }
.pd-itens small.obs { color: var(--atencao); }
.pd-itens em { font-style: normal; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-obs { font-size: .8rem; color: var(--atencao); }
.pd-total { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: .82rem; color: var(--tinta-2); }
.pd-total b { font-size: 1.05rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pd-form { display: grid; gap: 10px; margin-top: 4px; }
.pd-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.pd-campos label { display: grid; gap: 4px; font-size: .7rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .08em; }
.pd-input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--borda-forte); background: #160f0a; color: var(--tinta); font: 600 .9rem Manrope, sans-serif; outline: 0; }
.pd-input:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(201, 143, 86, .18); }
.pd-botoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.pd-botoes .botao-principal { padding: 9px 18px; }
.pd-perigo { border: 0; border-radius: 999px; padding: 9px 18px; font: 700 .85rem Manrope, sans-serif; color: #fff; background: linear-gradient(135deg, #e2685c, #a83a30); cursor: pointer; }
.pd-perigo:disabled { opacity: .45; cursor: default; }
.pd-link { font-size: .72rem; color: var(--tinta-3); text-decoration: none; justify-self: start; }
.pd-link:hover { color: var(--ouro-2); }

/* ---------- Logo do Juá (desenho da marca, tons de madeira) ---------- */
img.marca-logo, .marca.grande img.marca-logo { display: block; height: 30px; width: auto; background: none; filter: drop-shadow(0 0 12px rgba(201, 143, 86, .3)); }
.marca.grande img.marca-logo { height: 86px; margin: 0 auto 6px; }
.marca:has(img.marca-logo) { flex-direction: row; align-items: center; gap: 10px; }
.marca.grande:has(img.marca-logo) { flex-direction: column; gap: 0; }