/* ========================================
   COMPONENTES u- COMPARTILHADOS (admin, área do cliente e site público)
   Modelo: docs/design/umbrella-admin-referencia.html; catálogo em docs/design/DESIGN-SYSTEM.md, seção 3.
   Carregado pelo Pages/Admin/_AdminLayout.cshtml (<html data-area="admin">) e pelo
   Pages/Shared/_UserDashboardLayout.cshtml (<html data-area="cliente">) e pelo Pages/Shared/_Layout.cshtml
   (<html data-area="publico">). Regra só do admin vai no admin-ui.css; regra só do cliente vai no CSS da página
   (prefixo uc-); regra só do site público vai em wwwroot/css/publico (prefixo up-).
   Classes com prefixo u-; os resets valem só dentro da sidebar, do topo e dos componentes u-*,
   para não alterar as telas antigas que rodam dentro de .u-content.
   ======================================== */

/* ---------- troca de tema suave ---------- */
html.theming *,
html.theming *::before,
html.theming *::after {
    transition: background-color .35s ease, border-color .35s ease, color .35s ease !important;
}

/* link sem classe herda a cor do texto (como antes); qualquer classe (.u-link, .btn...) ganha */
:where(:root:is([data-area="admin"], [data-area="cliente"], [data-area="publico"])) a,
:where(:root:is([data-area="admin"], [data-area="cliente"], [data-area="publico"])) a:hover { color: inherit; }

/* títulos e parágrafos soltos das telas redesenhadas: mesma cor e fonte de antes, sem !important; qualquer classe ganha */
:where(:root:is([data-area="admin"], [data-area="cliente"], [data-area="publico"])) :is(h1, h2, h3, h4, h5, h6) { color: var(--text-1); font-family: var(--font); }
:where(:root:is([data-area="admin"], [data-area="cliente"], [data-area="publico"])) p { color: var(--text-2); }

/* ---------- barras de rolagem finas na cor do tema ---------- */
html:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]),
html:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]) * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
html:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]) ::-webkit-scrollbar { width: 8px; height: 8px; }
html:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]) ::-webkit-scrollbar-track { background: transparent; }
html:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]) ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]) ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
html:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]) ::-webkit-scrollbar-corner { background: transparent; }

body.u-lock { overflow: hidden; }

/* ---------- utilitários de número/código ---------- */
.u-num { font-variant-numeric: tabular-nums; }
.u-code { font-family: var(--mono); font-size: .92em; }
/* texto só para leitor de tela (avisos aria-live sem aparecer na tela) */
.u-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* bloco de código com botão de copiar (o botão leva data-u-copy; admin-shell.js copia o <pre>) */
.u-pre { position: relative; min-width: 0; }
.u-pre > pre {
    margin: 0;
    padding: 12px 44px 12px 14px;
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--border-1);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-1);
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.55;
    white-space: pre;
}
.u-pre > pre > code { font: inherit; color: inherit; background: none; padding: 0; }
.u-pre > .u-pre-copy { position: absolute; top: 6px; right: 6px; }

/* ======================================================
   SHELL
   ====================================================== */
.u-app {
    flex: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns .32s cubic-bezier(.6, 0, .2, 1);
}

.u-side,
.u-top {
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}
:where(.u-side, .u-top) button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
:where(.u-side, .u-top) a { text-decoration: none; }
.u-svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* ---------- sidebar ---------- */
.u-side {
    background: var(--surface-side);
    border-right: 1px solid var(--border-2);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    min-width: 0;
    z-index: 20;
}

.u-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0 12px 10px;
    position: relative;
    min-height: 40px;
}
.u-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--logo-bg);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    flex: none;
    box-shadow: 0 0 0 1px var(--border-3);
    transition: opacity .2s;
}
.u-logo > span { color: var(--logo-white); }
.u-brand-nm {
    white-space: nowrap;
    line-height: 1.15;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    transition: opacity .2s;
}
.u-brand-nm b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-1);
}
.u-brand-nm span {
    display: block;
    font-size: 11px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
}
.u-side .u-tog {
    margin-left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--text-3);
    flex: none;
    transition: background .2s, color .2s, opacity .2s;
}
.u-side .u-tog:hover { background: var(--accent-dim); color: var(--text-1); }

/* pesquisa rápida (aberta pela lupa do topo ou Ctrl K) */
.u-search {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0 4px 6px;
    padding: 0 10px;
    height: 32px;
    border: 1px solid var(--border-3);
    border-radius: 8px;
    background: var(--surface-1);
    color: var(--text-3);
}
.u-app.searching .u-search { display: flex; }
.u-search .fa-search { font-size: 12px; }
.u-search .u-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-1);
    font: inherit;
    font-size: 12.5px;
    padding: 0;
}
.u-search .u-search-input:focus { background: transparent; }
/* tecla de atalho: o mesmo desenho do kbd da pesquisa rápida, avulso (mapa: dica do painel, Modo CAD, busca de ferramentas) */
.u-search kbd,
.u-kbd {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    background: var(--surface-3);
    border-radius: 4px;
    padding: 1px 5px;
    box-shadow: none;
}
.u-search-empty { padding: 10px 14px; font-size: 12px; color: var(--text-3); }

.u-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -4px;
    padding: 0 4px 12px;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--text-1) 10px, var(--text-1) calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, var(--text-1) 10px, var(--text-1) calc(100% - 18px), transparent 100%);
}
html:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]) .u-scroll::-webkit-scrollbar { display: none; }

.u-sec {
    font-size: 10.5px;
    color: var(--text-3);
    padding: 14px 14px 6px;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
}
.u-sec::after {
    content: "";
    position: absolute;
    left: 12px;
    width: 20px;
    top: 55%;
    height: 1px;
    background: var(--border-3);
    opacity: 0;
    transition: opacity .25s;
}

.u-nav { display: flex; flex-direction: column; gap: 1px; }
.u-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.u-nav-link > .u-ico,
.u-nav-link > .u-tx { color: var(--text-2); }
.u-nav-link:hover { background: var(--accent-dim); }
.u-nav-link.on { background: var(--surface-3); font-weight: 500; }
.u-nav-link:hover > .u-ico,
.u-nav-link:hover > .u-tx,
.u-nav-link.on > .u-ico,
.u-nav-link.on > .u-tx { color: var(--text-1); }
.u-ico {
    width: 15px;
    font-size: 13px;
    text-align: center;
    flex: none;
}
.u-tx { transition: opacity .18s ease; overflow: hidden; text-overflow: ellipsis; }
.u-caret {
    margin-left: auto;
    font-size: 9px;
    color: var(--text-3);
    transition: transform .25s, opacity .18s;
}
.u-grp.open .u-caret { transform: rotate(90deg); }

.u-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}
.u-grp.open + .u-sub { grid-template-rows: 1fr; }
.u-sub > div {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 14px;
}
.u-sub .u-nav-link {
    font-size: 12.5px;
    border-left: 1px solid var(--border-2);
    border-radius: 0 8px 8px 0;
    padding-left: 18px;
}
.u-logout { margin: 0; }

.u-bottom {
    border-top: 1px solid var(--border-2);
    padding-top: 8px;
    margin-top: 6px;
}
.u-user {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    padding: 7px 9px;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    background: var(--surface-2);
    white-space: nowrap;
    overflow: hidden;
}
html[data-theme="dark"] .u-user { background: transparent; }
.u-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-1);
    font-size: 10.5px;
    font-weight: 600;
    display: grid;
    place-items: center;
    flex: none;
    object-fit: cover;
}
.u-user-nm {
    color: var(--text-1);
    flex: 1;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .18s;
}
/* segunda linha opcional (plano), como o e-mail sob o nome da marca */
.u-user-nm > small {
    display: block;
    font-size: 11px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- sidebar recolhida ---------- */
.u-app.mini { grid-template-columns: 64px minmax(0, 1fr); }
.u-app.mini .u-tx,
.u-app.mini .u-brand-nm,
.u-app.mini .u-user-nm,
.u-app.mini .u-caret { opacity: 0; pointer-events: none; }
.u-app.mini .u-sec { color: transparent; padding: 10px 14px 4px; }
.u-app.mini .u-sec::after { opacity: 1; }
.u-app.mini .u-sub { grid-template-rows: 0fr; }
.u-app.mini .u-nav-link { width: 40px; height: 36px; padding: 0 0 0 12.5px; margin: 0 2px; }
.u-app.mini .u-sub > div { padding-left: 0; }
.u-app.mini .u-sub .u-nav-link { border-left: 0; border-radius: 8px; }
.u-app.mini .u-user { background: transparent; border-color: transparent; padding: 6px 9px; }
.u-app.mini .u-bottom { border-top-color: transparent; }
.u-app.mini .u-tog {
    position: absolute;
    left: 9px;
    top: 1px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    opacity: 0;
}
.u-app.mini .u-brand:hover .u-tog,
.u-app.mini .u-tog:focus-visible { opacity: 1; }
.u-app.mini .u-brand:hover .u-logo { opacity: 0; }

/* tooltip da sidebar recolhida */
.u-navtip {
    position: fixed;
    z-index: 60;
    background: var(--c-pill);
    color: var(--c-pillfg);
    font-size: 11.5px;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: 7px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s, transform .15s;
}
.u-navtip.on { opacity: 1; transform: none; }

/* ---------- área principal e topo ---------- */
.u-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: 0;
}
.u-top {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    border-bottom: 1px solid var(--border-2);
    background: var(--surface-top);
    position: sticky;
    top: 0;
    z-index: 15;
}
.u-top .u-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.u-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* barra no pé da tela (barra de ferramentas do mapa): a borda fica em cima */
.u-top.u-top-inf { border-bottom: 0; border-top: 1px solid var(--border-2); }
/* menu suspenso preso a um botão (role="menu"); a posição fica com a tela; item marcado por aria-checked="true" */
.u-menu { padding: 4px; background: var(--modal-bg); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: var(--shadow-md); font-size: 12.5px; }
.u-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--text-1); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; user-select: none; position: relative; transition: background-color .15s; }
.u-menu-item:hover,
.u-menu-item:focus-visible { background: var(--accent-dim); outline: none; }
.u-menu-item[aria-checked="true"] { background: var(--accent-data-soft); color: var(--accent-data-ink); }
.u-menu-item > .u-tx { flex: 1 1 auto; min-width: 0; }
.u-menu-item > .u-ico { color: var(--text-2); }
/* ponto de marcação: indicador (.on) ou botão de alternância com aria-pressed (ex.: fixar ferramenta); área de toque maior que o ponto */
.u-ponto { position: relative; display: inline-block; width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 1px solid var(--border-3); background: transparent; vertical-align: middle; flex: none; }
button.u-ponto { cursor: pointer; transition: border-color .2s, background-color .2s; }
button.u-ponto::after { content: ""; position: absolute; inset: -6px; }
button.u-ponto:hover { border-color: var(--accent-data); }
.u-ponto.on,
.u-ponto[aria-pressed="true"] { background: var(--accent-data); border-color: var(--accent-data); }
button.u-ponto:focus-visible { outline: 2px solid var(--accent-data); outline-offset: 2px; }
/* separador vertical entre grupos de uma barra */
.u-vsep { width: 1px; height: 24px; margin: 0 6px 0 4px; background: var(--border-2); flex: none; }
/* faixa que recebe um item arrastado (reordenar os botões fixados de uma barra) */
.u-arrasta-alvo { outline: 1px dashed var(--border-3); outline-offset: -2px; border-radius: var(--r-md); }

.u-ib,
.u-top .u-ib {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-2);
    display: grid;
    place-items: center;
    background: var(--surface-2);
    position: relative;
    flex: none;
    transition: border-color .2s, color .2s, background-color .2s;
}
.u-ib > .u-svg { color: var(--text-2); transition: color .2s; }
.u-ib:hover { border-color: var(--border-3); }
.u-ib:hover > .u-svg { color: var(--text-1); }
html[data-theme="dark"] .u-ib { background: transparent; border-color: var(--border-3); }
html[data-theme="dark"] .u-ib:hover { background: var(--accent-dim); }
.u-top .u-burger { display: none; }

/* botão de ferramenta (barras do mapa): ícone, rótulo opcional (.lbl), nome em aria-label e dica em data-u-dica */
.u-tb {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: none;
    min-width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.u-tb > i,
.u-tb > .u-svg { color: inherit; }
.u-tb .lbl { font-size: 11px; font-weight: 400; letter-spacing: -.01em; line-height: 1; white-space: nowrap; color: var(--text-2); }
.u-tb:hover,
.u-tb[aria-expanded="true"] { background: var(--accent-dim); border-color: var(--border-2); color: var(--text-1); }
.u-tb:hover .lbl { color: var(--text-1); }
.u-tb:active { transform: translateY(.5px); }
.u-tb[aria-pressed="true"],
.u-tb.active { background: var(--accent-data-soft); border-color: transparent; color: var(--accent-data-ink); }
.u-tb[aria-pressed="true"] .lbl,
.u-tb.active .lbl { color: var(--accent-data-ink); }
.u-tb:disabled,
.u-tb[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: transparent; border-color: transparent; color: var(--text-2); transform: none; }
.u-tb.u-tb-lbl { min-width: 56px; height: 48px; padding: 0 6px; }
/* botão de ferramenta que expande: em repouso, quadrado só com o ícone; com ponteiro em cima, foco do teclado ou ferramenta
   ativa (.active, aria-pressed, aria-expanded), o rótulo abre à direita e empurra os vizinhos. Sem mouse, só o ícone.
   O nome acessível continua no aria-label. .u-tb-aberto força o estado aberto (medida do transbordo). */
.u-tb.u-tb-expande { flex-direction: row; gap: 0; min-width: 40px; height: 40px; padding: 0; transition: background-color .15s, border-color .15s, color .15s, padding .18s ease; }
.u-tb-expande .lbl { display: inline-block; max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; font-size: 12px; line-height: 1.25; transition: max-width .18s ease, margin-left .18s ease, opacity .18s ease; }
.u-tb.u-tb-expande.u-tb-aberto { padding: 0 12px; }
.u-tb-expande.u-tb-aberto .lbl { max-width: 16em; margin-left: 6px; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .u-tb.u-tb-expande:is(:hover, :focus-visible, .active, [aria-pressed="true"], [aria-expanded="true"]) { padding: 0 12px; }
    .u-tb-expande:is(:hover, :focus-visible, .active, [aria-pressed="true"], [aria-expanded="true"]) .lbl { max-width: 16em; margin-left: 6px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .u-tb.u-tb-expande,
    .u-tb-expande .lbl { transition: none; }
}
.u-tb.u-tb-caixa:not(.active, [aria-pressed="true"]) { background: var(--surface-1); border-color: var(--border-2); }
.u-tb.u-tb-caixa:not(.active, [aria-pressed="true"]):hover { background: var(--surface-2); }
.u-tb.u-tb-perigo { color: var(--red); }
.u-tb.u-tb-perigo:hover { background: var(--red-dim); border-color: var(--red-mid); color: var(--red); }

/* dica flutuante (role="tooltip"): abre com o ponteiro e com o foco, fica aberta com o ponteiro em cima e fecha com Esc */
.u-dica {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-tooltip);
    max-width: 280px;
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--c-pill);
    color: var(--c-pillfg);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s, transform .12s;
}
.u-dica[hidden] { display: none; }
.u-dica.on { opacity: 1; transform: none; }
.u-btn[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent-data); color: var(--text-1); }

.u-themes {
    position: relative;
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-pill);
    background: var(--surface-1);
}
.u-themes button {
    width: 28px;
    height: 24px;
    border-radius: var(--r-pill);
    display: grid;
    place-items: center;
    color: var(--text-3);
    position: relative;
    z-index: 1;
    transition: color .25s;
}
.u-themes button:hover,
.u-themes button.on { color: var(--text-1); }
.u-themes .u-svg { width: 14px; height: 14px; }
.u-pill {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 24px;
    border-radius: var(--r-pill);
    background: var(--surface-pill);
    box-shadow: 0 0 0 1px var(--border-2);
    transition: transform .35s cubic-bezier(.6, 0, .2, 1), background .3s;
}
html[data-theme="dark"] .u-pill { box-shadow: none; }

.u-content {
    padding: 16px 22px 32px;
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    color: var(--text-1);
}

.u-scrim { display: none; }

:where(.u-side, .u-top) :where(button, a):focus-visible,
:where(.u-btn, .u-chip, .u-ib, .u-tb, .u-x):focus-visible {
    outline: 2px solid var(--accent-data);
    outline-offset: 2px;
}

/* ======================================================
   COMPONENTES COMPARTILHADOS
   ====================================================== */

/* card */
.u-card {
    background: var(--surface-1);
    border: 1px solid var(--border-2);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    min-width: 0;
    position: relative;
}
html[data-theme="dark"] .u-card { border-color: var(--border-1); }
.u-ch {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 14px 18px 0;
}
.u-ch h3 { margin: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.u-ch h3 > .u-ico { display: inline-flex; width: auto; color: var(--text-2); }
.u-ch .u-hint {
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.u-ch .u-end { margin-left: auto; }
.u-ch.u-ch-wrap { flex-wrap: wrap; row-gap: 8px; }
.u-ch.u-ch-wrap h3 { white-space: normal; min-width: 0; }
.u-cf {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 18px;
    border-top: 1px solid var(--border-1);
    font-size: 11.5px;
    color: var(--text-3);
}

/* botão */
.u-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-2);
    font: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .2s, color .2s, background-color .2s;
}
.u-btn:hover { border-color: var(--border-3); color: var(--text-1); }
.u-btn:active,
.u-chip:active,
.u-ib:active { transform: translateY(.5px); }
html[data-theme="dark"] .u-btn { background: transparent; border-color: var(--border-3); }
html[data-theme="dark"] .u-btn:hover { background: var(--accent-dim); }
.u-btn:disabled,
.u-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* badge fosco: fundo neutro, texto discreto, cor só no ponto de status */
.u-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    background: var(--surface-3);
    color: var(--text-2);
    box-shadow: inset 0 0 0 1px var(--border-2);
}
.u-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-3);
    flex: none;
}
.u-badge.u-b-ok::before { background: var(--green); }
.u-badge.u-b-warn::before { background: var(--amber); }
.u-badge.u-b-bad::before { background: var(--red); }
.u-badge.u-b-data::before { background: var(--accent-data); }

/* chips de filtro */
.u-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.u-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text-2);
    font: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .2s, color .2s, background-color .2s;
}
.u-chip:hover { border-color: var(--border-3); color: var(--text-1); }
.u-chip.on {
    background: var(--accent-data-soft);
    border-color: transparent;
    color: var(--accent-data-ink);
    font-weight: 500;
}

/* modal (distinto do .modal do Bootstrap, que continua funcionando) */
.u-ov {
    position: fixed;
    inset: 0;
    z-index: 1050;
    padding: 16px;
    display: grid;
    place-items: center;
    background: var(--modal-backdrop);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.u-ov.open { opacity: 1; pointer-events: auto; }
.u-modal {
    width: min(400px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 6px;
    background: var(--modal-bg);
    border: 1px solid var(--border-2);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    transform: translateY(14px) scale(.97);
    transition: transform .4s cubic-bezier(.2, .9, .2, 1);
}
.u-modal.u-modal-md { width: min(520px, 100%); }
.u-modal.u-modal-lg { width: min(640px, 100%); }
.u-modal.u-modal-xl { width: min(1200px, 100%); }
.u-ov.open .u-modal { transform: none; }
.u-mh {
    flex: none;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 8px 10px;
}
.u-mh .u-mi {
    flex: none;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: var(--text-2);
}
.u-mh .u-mi > img { width: 18px; height: 18px; object-fit: contain; }
.u-mh h4 { margin: 0; font-size: 13px; font-weight: 600; }
.u-mh .u-msub { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.u-mh .u-x {
    margin-left: auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    flex: none;
    border: 0;
    background: none;
    color: var(--text-3);
    cursor: pointer;
}
.u-mh .u-x:hover { background: var(--accent-dim); color: var(--text-1); }
.u-mbody {
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -2px;
    padding: 0 2px 1px;
}
.u-mc {
    margin-top: 5px;
    padding: 14px;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: 11px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s, transform .45s;
}
.u-mbody .u-mc:first-child { margin-top: 0; }
html[data-theme="dark"] .u-mc { background: var(--surface-hover); border-color: var(--border-2); }
.u-ov.open .u-mc { opacity: 1; transform: none; }

/* toast */
.u-toast {
    position: fixed;
    bottom: 18px;
    left: 50%;
    z-index: 1100;
    max-width: calc(100vw - 32px);
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--c-pill);
    color: var(--c-pillfg);
    font-size: 12.5px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 20px);
    transition: opacity .3s, transform .3s;
}
.u-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* aviso de cookies (partial _UCookies): cartão discreto no pé da tela, três botões de mesmo peso.
   .u-cookies-topo quando cobriria o botão principal da página; .u-cookies-solto entra no fluxo (último recurso) */
.u-cookies {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1040;
    width: min(460px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--modal-bg);
    border: 1px solid var(--border-2);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    color: var(--text-1);
    font-size: 12.5px;
    line-height: 1.45;
}
.u-cookies[hidden] { display: none; }
.u-cookies.u-cookies-topo { top: 16px; bottom: auto; }
.u-cookies.u-cookies-solto { position: relative; left: auto; bottom: auto; width: auto; margin: 12px; box-shadow: none; }
.u-cookies-tx { margin: 0; color: var(--text-2); }
.u-cookies-tx a { color: var(--accent-data-ink); text-decoration: underline; text-underline-offset: 2px; }
.u-cookies-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.u-cookies-acts .u-btn { justify-content: center; text-align: center; white-space: normal; line-height: 1.25; }
.u-cookies-cat { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-1); }
.u-cookies-cat:first-child { padding-top: 0; border-top: 0; }
.u-cookies-cat-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.u-cookies-cat-tx strong { font-size: 12.5px; font-weight: 600; color: var(--text-1); }
.u-cookies-cat-tx span { font-size: 12px; color: var(--text-3); }
.u-mc > .u-cookies-tx { margin: 10px 0 12px; }
@media (max-width: 640px) {
    .u-cookies { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 12px; }
    .u-cookies.u-cookies-topo { top: 8px; }
}

/* Verificação de segurança (Cloudflare Turnstile). O quadro reserva a altura do desafio para o formulário não pular;
   no ensaio (.u-turnstile-sim) um aviso tracejado fica no lugar do desafio. */
.u-turnstile { min-height: 65px; max-width: 100%; margin-bottom: 10px; white-space: normal; }
:where(.u-form, .u-mform) > .u-turnstile { margin-bottom: 0; }
.u-form > .u-turnstile { grid-column: 1 / -1; }
.u-turnstile.u-turnstile-sim {
    min-height: 0;
    padding: 10px 12px;
    border: 1px dashed var(--border-2);
    border-radius: var(--r-md);
    font-size: 12.5px;
    color: var(--text-2);
}

/* ======================================================
   CONTEÚDO DAS PÁGINAS REDESENHADAS (.u-page)
   Dashboard e NFS-e usam estes blocos.
   ====================================================== */
.u-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-1);
    -webkit-font-smoothing: antialiased;
}
.u-page :where(h2, h3, p),
.u-ov :where(h2, h3, p) { margin: 0; color: inherit; }
.u-page a { text-decoration: none; }
.u-muted { color: var(--text-3); }
.u-strong { color: var(--text-1); }
.u-bad { color: var(--red); }
.u-ok { color: var(--green); }
.u-pad { padding-bottom: 16px; }

/* card principal: lista de números à esquerda + gráfico */
.u-perf { overflow: hidden; }
.u-pgrid { display: grid; grid-template-columns: 272px minmax(0, 1fr); }
.u-pgrid > * { min-width: 0; }
.u-plist {
    border-right: 1px solid var(--border-1);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.u-kpi {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    color: var(--text-1);
    cursor: pointer;
    transition: background-color .2s;
}
.u-kpi:hover { background: var(--surface-hover); }
.u-kpi.on { background: var(--surface-active); }
.u-kpi:focus-visible { outline: 2px solid var(--accent-data); outline-offset: 2px; }
.u-kpi-h {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-3);
    font-size: 12.5px;
    transition: color .2s;
}
.u-kpi-h::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-3);
    flex: none;
    transition: background-color .2s;
}
.u-kpi.on .u-kpi-h { color: var(--text-1); }
.u-kpi.on .u-kpi-h::before { background: var(--accent-data); }
.u-kpi-v {
    display: block;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-top: 5px;
    color: var(--text-1);
}
.u-kpi-d {
    display: block;
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.u-kpi-d b { font-weight: 500; color: var(--text-2); }
.u-kpi-d b.u-dn { color: var(--red-ink); }
.u-kpi-d b.u-up { color: var(--green-ink); }

.u-pmain { display: flex; flex-direction: column; padding: 0 6px 8px; }
.u-pmain .u-ch { padding: 16px 12px 0; }
.u-chart { height: 290px; margin: 4px 6px 0; transition: opacity .25s; }
.u-pmain .u-chart { flex: 1; min-height: 320px; }

.u-legend2 { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-2); flex-wrap: wrap; }
.u-legend2 span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.u-legend2 span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.u-legend2 span.u-ln::before { height: 0; width: 12px; border-top: 2px dashed var(--c); border-radius: 0; background: none; }

/* tooltip do ECharts */
.u-tt { font-family: var(--font); }
.u-tt .u-tt-dt { font-size: 11px; color: var(--text-3); }
.u-tt .u-tt-v { font-size: 17px; font-weight: 500; color: var(--text-1); margin-top: 2px; letter-spacing: -.01em; }
.u-tt .u-tt-v small { font-size: 11px; color: var(--text-3); font-weight: 400; }
.u-tt .u-tt-rw { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
.u-tt .u-tt-rw i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* linhas de cards */
.u-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.u-row2.u-row1 { grid-template-columns: minmax(0, 1fr); }
.u-row2 > .u-card { display: flex; flex-direction: column; }

/* número grande do card */
.u-big {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 18px 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.u-big.u-bad { color: var(--red); }
.u-big .u-arr { font-size: 12px; margin-top: 4px; }
.u-sub2 { padding: 4px 18px 0; font-size: 12px; line-height: 1.45; color: var(--text-3); }
.u-sub2 b { color: var(--text-1); font-weight: 600; }

/* barra segmentada + legenda + lista */
.u-seg { display: flex; gap: 3px; margin: 16px 18px 0; height: 8px; }
.u-seg i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 1s cubic-bezier(.3, .8, .2, 1); }
.u-legend {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 18px 0;
    font-size: 11px;
    color: var(--text-2);
}
.u-legend span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.u-legend span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.u-list { padding: 10px 18px 14px; }
.u-li {
    display: grid;
    grid-template-columns: 18px 1fr 56px 104px;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    font-size: 12.5px;
    color: var(--text-2);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .5s, transform .5s;
}
.u-li:not(:last-child) { border-bottom: 1px dashed var(--border-1); }
.u-li.in { opacity: 1; transform: none; }
.u-li-ic { font-size: 12px; color: var(--text-3); text-align: center; }
.u-li-p, .u-li-v { text-align: right; }
.u-li-v { color: var(--text-1); }
/* lista de linhas com texto e ações (camadas e resultados do mapa); .on marca a linha escolhida */
.u-rows { display: flex; flex-direction: column; gap: 6px; }
.u-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-1); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-1); transition: border-color .15s; }
.u-row:hover { border-color: var(--border-3); }
.u-row.on { border-color: var(--accent-data); background: var(--accent-data-soft); }
.u-row-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
button.u-row-tx { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.u-row-nm { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-row-ds { margin: 0; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-row-acts { flex: none; display: flex; align-items: center; gap: 4px; }
.u-row-tx > .u-tag { align-self: flex-start; }
/* dentro do painel encaixado a linha não é cartão: só a divisória embaixo */
.u-doca .u-rows { gap: 0; }
.u-doca .u-row { border: 0; border-bottom: 1px solid var(--border-1); border-radius: 0; background: none; }
.u-doca .u-row:last-child { border-bottom: 0; }
.u-doca .u-row.on { background: var(--accent-data-soft); box-shadow: inset 2px 0 0 var(--accent-data); }
/* painel encaixado (mapa): superfície única presa à borda, borda só do lado do conteúdo; .u-doca-dir do lado direito.
   Abaixo de 768 px vira gaveta de baixo para cima */
.u-doca { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-1); color: var(--text-1); border-right: 1px solid var(--border-2); }
.u-doca.u-doca-dir { border-right: 0; border-left: 1px solid var(--border-2); }
html[data-theme="dark"] .u-doca { border-color: var(--border-1); }
@media (max-width: 767px) {
    .u-doca, .u-doca.u-doca-dir { border: 0; border-top: 1px solid var(--border-2); border-radius: var(--r-xl) var(--r-xl) 0 0; }
}
/* texto normal: dentro de .u-normal, seções, etiquetas, rótulos de .u-kv e sobretítulos ficam sem caixa alta (o peso e a cor diferenciam) */
.u-normal .u-sec { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.u-normal .u-tag { font-size: 11px; letter-spacing: 0; text-transform: none; }
.u-normal .u-kv > div > span { font-size: 12px; letter-spacing: 0; text-transform: none; }
.u-normal .u-eyebrow { font-size: 12px; letter-spacing: 0; text-transform: none; }
.u-normal .u-table th { font-size: 12px; letter-spacing: 0; text-transform: none; }

/* cards pequenos de número */
.u-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.u-mk { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.u-mk-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.u-mk-ic {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--surface-3);
    display: grid;
    place-items: center;
    font-size: 10.5px;
    color: var(--text-3);
}
.u-mk-v { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-top: 12px; font-variant-numeric: tabular-nums; }
.u-mk-s { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.u-mk-s b { color: var(--text-1); font-weight: 600; }
.u-meter { height: 4px; border-radius: 4px; background: var(--c-tick); margin-top: 10px; overflow: hidden; }
.u-meter i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent-data);
    border-radius: 4px;
    transition: width 1.1s cubic-bezier(.3, .8, .2, 1);
}

/* tabela */
.u-tw { padding: 4px 18px 10px; overflow-x: auto; overscroll-behavior-x: contain; }
.u-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: auto; }
.u-table th {
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 500;
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-1);
    white-space: nowrap;
    background: transparent;
}
.u-table td {
    padding: 10px 8px;
    border: 0;
    border-bottom: 1px solid var(--border-1);
    color: var(--text-2);
    white-space: nowrap;
    background: transparent;
}
/* corpo da célula com a especificidade de um "td": classes como .u-code e .u-strong continuam mandando */
:where(.u-table) td { font-size: 12px; font-weight: 300; }
.u-table tr:last-child td { border-bottom: 0; }
.u-table th:first-child, .u-table td:first-child { padding-left: 0; }
.u-table th:last-child, .u-table td:last-child { padding-right: 0; }
.u-table .u-r { text-align: right; }
.u-em, .u-path {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    max-width: clamp(120px, 16vw, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}
.u-path { max-width: clamp(100px, 10vw, 170px); }

/* tabela de lista: hover na linha, topo alinhado, texto longo, linha auxiliar, ações e vazio */
.u-table.u-hover tbody tr:hover td { background: var(--surface-hover); }
.u-table.u-vtop td { vertical-align: top; }
.u-table td.u-wrap { white-space: normal; line-height: 1.4; }
.u-tsub { margin-top: 3px; font-size: 11px; color: var(--text-3); }
.u-tacts-col { width: 1%; }
.u-tacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.u-tacts.u-nowrap { flex-wrap: nowrap; }
.u-tacts form { display: inline; margin: 0; }
.u-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    font-size: 12.5px;
    color: var(--text-3);
}
.u-empty > i { font-size: 26px; }
.u-empty > .u-svg { width: 22px; height: 22px; }
.u-empty.u-empty-erro > .u-svg { color: var(--red); }
/* faixa de status sobre o mapa: uma linha da altura do .u-tb (30 px), sem cartão nem caixa interna; texto 12 px em --text-2,
   valores em .u-strong/.u-code; ações .u-tb de 26 px no fim. Quebra para uma segunda linha só se um item pedir (flex-basis). */
.u-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    box-sizing: border-box;
    min-height: 30px;
    padding: 0 2px 0 10px;
    background: var(--surface-1);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    color: var(--text-2);
    font-size: 12px;
    line-height: 28px;
    white-space: nowrap;
}
.u-status .u-tb { min-width: 26px; height: 26px; }

/* faixa de aviso dentro do card (abaixo da barra de filtros) */
.u-band {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-1);
    background: var(--surface-2);
    font-size: 12px;
    color: var(--text-2);
}
.u-band > i { color: var(--text-3); }

/* chave · valor */
.u-kv { padding: 6px 18px 14px; }
.u-kv > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-1);
    font-size: 12.5px;
}
.u-kv > div:last-child { border-bottom: 0; }
.u-kv > div > span { color: var(--text-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; flex: none; }
.u-kv > div > b { font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.u-kv .u-badge { vertical-align: middle; margin-left: 4px; }
.u-link { display: inline-flex; align-items: center; gap: 4px; }
.u-link > span,
.u-link > i { color: var(--accent-data-ink); }
.u-link > i { font-size: 9px; }
button.u-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* links do rodapé dos cards */
.u-cf > * { white-space: nowrap; }
.u-cf a { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.u-cf a > span,
.u-cf a > i { color: var(--text-2); transition: color .2s; }
.u-cf a:hover > span,
.u-cf a:hover > i { color: var(--text-1); }
.u-cf a > i { font-size: 9px; }

/* blocos dentro do modal */
.u-mc-t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 500;
}
.u-mc-t .u-n { font-size: 12px; }
.u-mc .u-big-flush { padding: 8px 0 0; }
.u-mc .u-flush { padding: 2px 0 0; }
.u-mc .u-kv-flush { padding: 0; }
.u-mc .u-tw-flush { padding: 8px 0 0; }
.u-mc .u-path { max-width: 220px; }
.u-note { font-size: 11.5px; color: var(--text-2); font-style: italic; margin-top: 8px; }

/* indicador "ao vivo" */
.u-live { display: inline-flex; align-items: center; gap: 6px; }
.u-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: u-pulse 2s infinite;
}
@keyframes u-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 0%, transparent); }
}
.u-warn { color: var(--amber-ink); }

/* cabeçalho da página (o título fica no topo) */
.u-ph { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.u-ph .u-end { margin-left: auto; }
.u-ph > .u-acts { flex-wrap: wrap; }
.u-eyebrow { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.u-ph-p { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 4px; }
.u-ph-p.u-ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* ícone dos cards pequenos com cor de estado */
.u-mk-ic.u-ic-bad { color: var(--red); }
.u-mk-ic.u-ic-warn { color: var(--amber); }

/* etiqueta */
.u-tag {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid var(--border-2);
    border-radius: 5px;
    padding: 2px 6px;
    color: var(--text-3);
    white-space: nowrap;
}

/* tracinhos (proporção em 40 blocos; data-tail pinta o fim com outra cor) */
.u-ticks { display: flex; gap: 2px; margin-top: 10px; height: 20px; }
.u-ticks i { flex: 1; border-radius: 2px; background: var(--c-tick); transition: background-color .15s; }
.u-meters { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 16px; }
.u-mt-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; font-weight: 500; }
.u-mt-n { font-size: 12px; }
.u-mt-n > span { color: var(--text-3); font-weight: 400; }
.u-mc .u-mc-a { margin-top: 8px; font-size: 11.5px; }

/* rodapé de tabela */
.u-table tfoot td { border-top: 1px solid var(--border-2); border-bottom: 0; color: var(--text-1); font-weight: 500; }

/* botão de texto no rodapé do card (mesmo visual dos links) */
.u-cf-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}
.u-cf-btn > span,
.u-cf-btn > i { color: var(--text-2); transition: color .2s; }
.u-cf-btn:hover > span,
.u-cf-btn:hover > i { color: var(--text-1); }
.u-cf-btn > i { font-size: 9px; }

/* botões: pequeno e principal */
.u-btn.u-btn-sm { height: 26px; padding: 0 8px; font-size: 12px; gap: 5px; }
.u-btn.u-btn-pri,
html[data-theme="dark"] .u-btn.u-btn-pri { background: var(--text-1); border-color: var(--text-1); color: var(--surface-1); font-weight: 500; }
.u-btn.u-btn-pri:hover,
html[data-theme="dark"] .u-btn.u-btn-pri:hover { background: var(--text-2); border-color: var(--text-2); color: var(--surface-1); }

/* aviso no topo da página (retorno de ação) */
.u-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border-2);
    border-radius: 11px;
    background: var(--surface-1);
    font-size: 12.5px;
    color: var(--text-2);
}
.u-alert > i { color: var(--accent-data); margin-top: 2px; }
.u-alert > i.u-ok { color: var(--green); }
.u-alert > i.u-warn { color: var(--amber-ink); }
.u-alert > i.u-bad { color: var(--red); }

/* abas de status com contagem */
.u-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-1); padding: 0 10px; }
html:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]) .u-tabs::-webkit-scrollbar { display: none; }
.u-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 10px 11px;
    border-bottom: 2px solid transparent;
    font-size: 12.5px;
    white-space: nowrap;
    transition: border-color .2s;
}
.u-tab > span { color: var(--text-2); transition: color .2s; }
.u-tab:hover > span,
.u-tab.on > span { color: var(--text-1); }
.u-tab.on { border-bottom-color: var(--accent-data); font-weight: 500; }
.u-tab-n {
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 500;
}
.u-tab.on .u-tab-n { background: var(--accent-data-soft); color: var(--accent-data-ink); }
/* aba que troca conteúdo na própria tela (botão em vez de link) */
button.u-tab { margin: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font: inherit; font-size: 12.5px; cursor: pointer; }

/* barra de filtros (formulário GET) */
.u-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border-1); }
.u-in {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-1);
    font: inherit;
    font-size: 12.5px;
    min-width: 0;
    transition: border-color .2s;
}
.u-in:hover { border-color: var(--border-3); }
.u-in:focus { outline: 2px solid var(--accent-data); outline-offset: 1px; border-color: transparent; }
.u-in::placeholder { color: var(--text-3); }
/* campo de coordenada ou comando (Modo CAD): fonte mono, menor */
.u-in.u-in-mono { font-family: var(--mono); font-size: 11px; }
html[data-theme="dark"] .u-in { background-color: transparent; border-color: var(--border-3); }
/* campos de texto, data, número, lista e área de texto: corpo e peso do campo do sistema */
.u-in:is([type=text], [type=email], [type=password], [type=number], [type=search], [type=url], [type=tel], [type=date]),
textarea.u-in,
select.u-in { appearance: none; border-radius: var(--r-md); font-size: 12px; font-weight: 300; }
/* largura cheia por padrão, sem especificidade: qualquer regra de largura (.u-fbar, .u-goto, .u-datas) vence */
:where(.u-in:is([type=text], [type=email], [type=password], [type=number], [type=search], [type=url], [type=tel], [type=date]), textarea.u-in, select.u-in) { width: 100%; }
/* seta da lista (chevron de traço) desenhada com o token: cada metade é uma diagonal de 1,2px numa caixa de 4px */
select.u-in {
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent calc(50% - .6px), var(--text-3) calc(50% - .6px), var(--text-3) calc(50% + .6px), transparent calc(50% + .6px)),
        linear-gradient(135deg, transparent calc(50% - .6px), var(--text-3) calc(50% - .6px), var(--text-3) calc(50% + .6px), transparent calc(50% + .6px));
    background-position: right 16px center, right 12px center;
    background-size: 4px 4px;
    background-repeat: no-repeat;
}
html[data-theme="dark"] select.u-in {
    background-image:
        linear-gradient(45deg, transparent calc(50% - .6px), var(--text-1) calc(50% - .6px), var(--text-1) calc(50% + .6px), transparent calc(50% + .6px)),
        linear-gradient(135deg, transparent calc(50% - .6px), var(--text-1) calc(50% - .6px), var(--text-1) calc(50% + .6px), transparent calc(50% + .6px));
}
.u-search-in { position: relative; flex: 1 1 280px; margin: 0; display: flex; }
.u-search-in > i,
.u-search-in > .u-svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--text-3); pointer-events: none; }
.u-search-in > .u-svg { width: 13px; height: 13px; }
.u-search-in > .u-in { width: 100%; padding-left: 30px; }
select.u-in { padding-right: 30px; }
input.u-in { padding: 0 10px; }
.u-fbar > select.u-in { width: auto; flex: 0 0 auto; min-width: 140px; }
.u-fbar > input.u-in { width: auto; flex: 0 0 auto; }
/* início e fim do período personalizado ao lado dos .u-chips (partial _UPeriodo) */
.u-datas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.u-datas .u-in { width: 150px; }
.u-check { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; cursor: pointer; }
.u-check > span { color: var(--text-2); }
.u-check > input { accent-color: var(--accent-data); }
/* interruptor liga/desliga: button[role="switch"] com aria-checked; o conteúdo interno some (font-size 0 vence o display dos ícones) e o nome vem do aria-label */
.u-switch { position: relative; flex: 0 0 auto; width: 32px; height: 18px; padding: 0; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface-3); font-size: 0; line-height: 0; cursor: pointer; transition: background .15s, border-color .15s; }
.u-switch > * { display: none; }
.u-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); transition: transform .15s, background .15s; }
.u-switch[aria-checked="true"] { background: var(--accent-data); border-color: var(--accent-data); }
.u-switch[aria-checked="true"]::after { transform: translateX(14px); background: var(--text-inv); }
.u-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.u-switch:disabled { opacity: .5; cursor: not-allowed; }

/* formulários: em modal (.u-mform), grade de edição no card (.u-form) e campo com rótulo (.u-field) */
.u-mform { display: flex; flex-direction: column; gap: 10px; }
/* a base 280px da busca vale na barra em linha; na coluna do modal ela viraria altura */
.u-mform > .u-search-in { flex: 0 0 auto; }
.u-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding: 14px 18px 18px; }
.u-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 12.5px; min-width: 0; }
.u-field > span,
.u-field > label { color: var(--text-2); margin: 0; }
.u-field.u-span { grid-column: 1 / -1; }
.u-fhint { color: var(--text-3); font-size: 11.5px; }
.u-ferr,
.u-field > .u-ferr { color: var(--red-ink); font-size: 11.5px; }
.u-ferr:empty { display: none; }
.u-field[hidden] { display: none; }
/* senha com botão de mostrar/ocultar dentro do campo, à direita (js/ui/u-senha.js troca o type e o aria-pressed) */
.u-senha { position: relative; display: flex; min-width: 0; }
.u-senha > .u-in { flex: 1 1 auto; padding-right: 40px; }
.u-senha-ver { position: absolute; top: 0; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; margin: 0; padding: 0; border: 0; border-radius: 0 var(--r-md) var(--r-md) 0; background: none; color: var(--text-3); font: inherit; cursor: pointer; }
.u-senha-ver:hover { color: var(--text-1); }
.u-senha-ver:focus-visible { outline: 2px solid var(--accent-data); outline-offset: -2px; }
/* fieldset que desliga o formulário inteiro (disabled) sem mudar a grade */
.u-fs { display: contents; }
/* campo de arquivo com o visual do .u-in */
.u-in.u-file { height: auto; padding: 6px 10px; }
/* área de soltar arquivos; .on enquanto o arquivo é arrastado por cima */
.u-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 16px;
    border: 1px dashed var(--border-2);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12.5px;
    text-align: center;
}
.u-drop > i { font-size: 22px; color: var(--text-3); }
.u-drop.on { border-color: var(--accent-data); background: var(--accent-data-soft); }
.u-drop:focus-visible { outline: 2px solid var(--accent-data); outline-offset: 2px; }
/* miniatura quadrada de ícone enviado (software, app); a imagem não é cortada */
.u-thumb {
    width: 28px;
    height: 28px;
    flex: none;
    object-fit: contain;
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
textarea.u-in { height: auto; min-height: 90px; padding: 8px 10px; line-height: 1.6; resize: vertical; }
/* resumo de validação (asp-validation-summary) dentro de um .u-alert: some quando não há erro */
.u-vsum.validation-summary-valid { display: none; }
.u-vsum ul { margin: 0; padding-left: 16px; }

/* paginação */
.u-pagbar { margin-top: 0; }
.u-pag { display: flex; gap: 4px; flex-wrap: wrap; }
.u-pag a {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-2);
    border-radius: 7px;
    font-size: 11.5px;
    transition: border-color .2s;
}
.u-pag a > span,
.u-pag a > i { color: var(--text-2); }
.u-pag a > i { font-size: 10px; }
.u-pag a:hover { border-color: var(--border-3); }
.u-pag a:hover > span,
.u-pag a:hover > i { color: var(--text-1); }
.u-pag a.on { background: var(--accent-data-soft); border-color: transparent; pointer-events: none; }
.u-pag a.on > span { color: var(--accent-data-ink); font-weight: 600; }
.u-goto { display: flex; align-items: center; gap: 6px; margin: 0; }
.u-goto label { margin: 0; color: var(--text-3); white-space: nowrap; }
.u-goto .u-in { width: 60px; height: 26px; text-align: center; }

/* galeria de arquivos: grade de miniaturas, área de soltar e rodapé (modal de Produtos e Galeria de Mídia) */
.u-pr-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.u-pr-gal:empty { display: none; }
.u-pr-gal-cel { position: relative; }
.u-pr-gal-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-2);
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s;
}
.u-pr-gal-item:hover { border-color: var(--border-3); }
.u-pr-gal-item.on { border-color: var(--accent-data); box-shadow: 0 0 0 1px var(--accent-data); }
.u-pr-gal-item > img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-3); }
.u-pr-gal-nome { padding: 6px 8px; font-size: 11.5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-pr-gal-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; background: var(--surface-1); }
.u-pr-gal-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1px dashed var(--border-3);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-2);
    text-align: center;
}
.u-pr-gal-drop > i { font-size: 26px; color: var(--text-3); }
.u-pr-gal-drop.on { border-color: var(--accent-data); background: var(--accent-data-soft); }
.u-pr-gal-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

/* entrada suave de blocos */
.rv {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.rv.in { opacity: 1; transform: none; }

/* ?animacao=0 (admin-shell.js põe o atributo): o mesmo que prefers-reduced-motion, para capturas e comparação */
html[data-u-sem-animacao] .rv { opacity: 1; transform: none; transition: none; }
html[data-u-sem-animacao] .u-li { opacity: 1; transform: none; transition: none; }
html[data-u-sem-animacao] .u-meter i,
html[data-u-sem-animacao] .u-seg i { transition: none; }
html[data-u-sem-animacao] .u-switch,
html[data-u-sem-animacao] .u-switch::after { transition: none; }
html[data-u-sem-animacao] .u-tb,
html[data-u-sem-animacao] .u-dica { transition: none; }
html[data-u-sem-animacao] :is(.u-ov, .u-modal, .u-mc) { transition: none; }

/* balão do Google (InfoWindow): o CSS do Google, injetado depois desta folha, pinta caixa, ponta e o X de preto sobre branco;
   o html na frente ganha dele sem !important e o balão segue o tema (o mapa principal e o MicroCAD pintam o seu por cima) */
html .gm-style .gm-style-iw-c,
html .gm-style .gm-style-iw-tc::after { background: var(--surface-1); }
html .gm-style .gm-style-iw-c { color: var(--text-1); }
html .gm-style .gm-ui-hover-effect > span { background-color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
    .u-switch, .u-switch::after { transition: none; }
    .u-tb, .u-dica { transition: none; }
    .u-ov, .u-modal, .u-mc { transition: none; }
    .u-app, .u-sub, .u-pill, .u-side { transition: none; }
    .u-li { opacity: 1; transform: none; transition: none; }
    .u-live::before { animation: none; }
}

/* ======================================================
   RESPONSIVO
   ====================================================== */
@media (max-width: 1320px) {
    .u-cp { display: none; }
}

@media (max-width: 980px) {
    .u-pgrid { grid-template-columns: minmax(0, 1fr); }
    .u-plist {
        border-right: 0;
        border-bottom: 1px solid var(--border-1);
        display: grid;
        /* minmax(0, ...): a descrição da aba corta com reticências em vez de alargar a coluna */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .u-pmain .u-chart { min-height: 270px; }
    .u-row2 { grid-template-columns: minmax(0, 1fr); }
    .u-grid4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .u-app,
    .u-app.mini { grid-template-columns: minmax(0, 1fr); }
    .u-side {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1040;
        width: 260px;
        transform: translateX(-102%);
        transition: transform .35s cubic-bezier(.6, 0, .2, 1);
    }
    .u-app.drawer .u-side { transform: none; box-shadow: var(--shadow-drawer); }
    .u-top .u-burger { display: grid; }
    .u-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1030;
        background: var(--scrim);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
    }
    .u-app.drawer .u-scrim { opacity: 1; pointer-events: auto; }
    .u-top { padding: 0 16px; }
}

@media (max-width: 640px) {
    .u-content { padding: 12px 16px 24px; }
    .u-page, .u-row2, .u-grid4 { gap: 12px; }
    .u-chart { height: 240px; }
    .u-mk { padding: 14px; }
    .u-mk-v, .u-kpi-v { font-size: 18px; }
    .u-kpi { padding: 12px; }
    .u-li { grid-template-columns: 16px 1fr 44px 92px; font-size: 12px; }
    .u-li-v { font-size: 11.5px; }
    .u-ch .u-end.u-legend2 { display: none; }
    .u-big { font-size: 23px; }
    .u-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -16px;
        padding: 0 16px 2px;
    }
    html:is([data-area="admin"], [data-area="cliente"], [data-area="publico"]) .u-chips::-webkit-scrollbar { display: none; }
    .u-fbar { padding: 12px 14px; }
    .u-fbar > select.u-in { flex: 1 1 140px; }
    .u-form { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 16px; }
    .u-pr-gal { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .u-pagbar { justify-content: center; }
}

@media (max-width: 420px) {
    .u-acts { gap: 6px; }
}