/* theRomsHost · componentes do tema novo. Tudo vale só com body.trh. */

/* ---------- Estrutura e luz ambiente ---------- */
body.trh { background: var(--trh-bg); color: var(--trh-tx-2); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; }
body.trh::before, body.trh::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
body.trh::before { width: 720px; height: 720px; left: -200px; top: -260px; background: radial-gradient(circle, var(--trh-luz-1), transparent 65%); }
body.trh::after { width: 820px; height: 820px; right: -260px; bottom: -320px; background: radial-gradient(circle, var(--trh-luz-2), var(--trh-luz-3) 40%, transparent 70%); }
body.trh .app-nav, body.trh .main-top { display: none !important; }
body.trh .app-main { margin-left: calc(var(--trh-sb-w) + 28px); margin-right: 16px; background: transparent; min-height: 100vh; transition: margin-left .2s ease; }
body.trh .trh-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.trh .trh-ic-sm { width: 12px; height: 12px; }

/* ---------- Vidro ---------- */
body.trh .trh-vidro { background: var(--trh-glass); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid var(--trh-edge); box-shadow: var(--trh-sombra); position: relative; }
body.trh .trh-vidro::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px; background: var(--trh-fio); pointer-events: none; }

/* ---------- Faixa da prévia ---------- */
.trh-previa { position: fixed; z-index: 1040; top: 0; left: 50%; transform: translateX(-50%); background: rgba(251, 191, 36, .16); color: var(--trh-warn); border: 1px solid rgba(251, 191, 36, .35); border-top: 0; border-radius: 0 0 10px 10px; padding: 3px 12px; font-size: 11px; font-weight: 600; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.trh-previa a { color: inherit; text-decoration: underline; }

/* ---------- Menu lateral ---------- */
body.trh .trh-sb { position: fixed; z-index: 1030; left: 12px; top: 12px; bottom: 12px; width: var(--trh-sb-w); border-radius: 18px; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overflow-x: hidden; transition: width .2s ease, transform .25s ease; }
.trh-sb::-webkit-scrollbar { width: 0; }
.trh-sb-topo { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 12px; min-height: 36px; gap: 8px; }
.trh-logo { display: flex; align-items: center; min-width: 0; }
.trh-logo img { max-height: 34px; width: auto; max-width: 150px; filter: var(--trh-logo-filtro, none); }
.trh-sb-colapsar { background: none; border: 0; color: var(--trh-mut); padding: 6px; border-radius: 8px; cursor: pointer; }
.trh-sb-colapsar:hover { color: var(--trh-tx); background: rgba(255, 255, 255, .05); }
.trh-cta { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 8px; padding: 10px; border-radius: 11px; background: var(--trh-ac-grad); color: #fff !important; font-weight: 600; font-size: 13px; text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--trh-ac-brilho); }
.trh-cta:hover { filter: brightness(1.08); }
.trh-sec { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--trh-mut-2); margin: 14px 10px 5px; font-weight: 600; white-space: nowrap; }
.trh-nav { display: flex; flex-direction: column; gap: 2px; }
.trh-it { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--trh-tx-2) !important; font-size: 13.5px; text-decoration: none !important; white-space: nowrap; }
.trh-it .trh-ic { color: var(--trh-mut); }
.trh-it:hover { background: rgba(255, 255, 255, .04); color: var(--trh-tx) !important; }
.trh-it.is-on { background: linear-gradient(90deg, rgba(47, 123, 255, .16), rgba(47, 123, 255, .03)); color: var(--trh-tx) !important; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(90, 150, 255, .14); }
.trh-it.is-on::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--trh-ac); box-shadow: 0 0 12px 2px rgba(47, 123, 255, .6); }
.trh-it.is-on .trh-ic { color: var(--trh-ac-2); }
.trh-bd { margin-left: auto; font-size: 10px; font-weight: 600; line-height: 17px; padding: 0 7px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--trh-edge); color: var(--trh-tx-2); }
.trh-bd-ac { background: var(--trh-ac); border-color: transparent; color: #fff; }

/* Rodapé do menu */
.trh-sb-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.trh-alerta { border: 1px solid rgba(251, 191, 36, .35); background: linear-gradient(180deg, rgba(251, 191, 36, .12), rgba(251, 191, 36, .04)); border-radius: 12px; padding: 10px; font-size: 11.5px; color: var(--trh-tx-2); }
.trh-alerta b { display: flex; align-items: center; gap: 6px; color: var(--trh-warn); font-size: 12px; margin-bottom: 4px; }
.trh-alerta p { margin: 0 0 8px; line-height: 1.45; }
.trh-alerta-btn { display: block; text-align: center; padding: 6px; border-radius: 8px; background: var(--trh-ac-grad); color: #fff !important; font-weight: 600; text-decoration: none !important; }
.trh-pill, .trh-user { width: 100%; display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .035); border: 1px solid var(--trh-edge); border-radius: 11px; padding: 7px 10px; color: var(--trh-tx-2); font-size: 12.5px; cursor: pointer; text-align: left; }
.trh-pill .trh-ic-sm, .trh-user .trh-ic-sm { margin-left: auto; color: var(--trh-mut); }
.trh-flag { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; background-size: cover; background-position: center; box-shadow: 0 0 0 1px color-mix(in srgb, var(--trh-tx) 18%, transparent); }
.trh-flag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .25)); }
.trh-linha { display: flex; align-items: center; gap: 8px; }
.trh-modos { display: flex; flex: 1; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .035); border: 1px solid var(--trh-edge); }
.trh-modo { flex: 1; display: grid; place-items: center; padding: 5px 0; border: 0; border-radius: 8px; background: none; color: var(--trh-mut); cursor: pointer; }
.trh-modo.is-on { background: rgba(255, 255, 255, .08); color: var(--trh-tx); box-shadow: inset 0 0 0 1px var(--trh-edge); }
.trh-moeda { font-size: 11px; color: var(--trh-mut); white-space: nowrap; }
.trh-moeda b { color: var(--trh-tx); }
.trh-av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--trh-ac-2); background: rgba(47, 123, 255, .14); }
.trh-user-txt { min-width: 0; display: flex; flex-direction: column; }
.trh-user-txt b { color: var(--trh-tx); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trh-user-txt small { color: var(--trh-mut); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trh-drop { position: relative; }
.trh-drop-lista { display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5; padding: 6px; border-radius: 12px; background: var(--dropdown-bg); border: 1px solid var(--trh-edge); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); max-height: 320px; overflow-y: auto; }
.trh-drop.is-aberto .trh-drop-lista { display: block; }
.trh-drop-lista a { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: var(--trh-tx-2) !important; font-size: 12.5px; text-decoration: none !important; }
.trh-drop-lista a:hover, .trh-drop-lista a.is-on { background: rgba(255, 255, 255, .05); color: var(--trh-tx) !important; }
.trh-drop-lista .trh-sair { color: var(--trh-err) !important; }

/* Menu recolhido: só ícones */
html.trh-colapsado .trh-sb .trh-logo, html.trh-colapsado .trh-sb .trh-sec, html.trh-colapsado .trh-sb .trh-it span, html.trh-colapsado .trh-sb .trh-bd,
html.trh-colapsado .trh-sb .trh-cta span, html.trh-colapsado .trh-sb .trh-alerta, html.trh-colapsado .trh-sb .trh-txt, html.trh-colapsado .trh-sb .trh-moeda,
html.trh-colapsado .trh-sb .trh-pill .trh-ic-sm, html.trh-colapsado .trh-sb .trh-user .trh-ic-sm { display: none; }
html.trh-colapsado .trh-sb-topo { justify-content: center; }
html.trh-colapsado .trh-it, html.trh-colapsado .trh-pill, html.trh-colapsado .trh-user { justify-content: center; }
html.trh-colapsado .trh-modos { flex-direction: column; }

/* ---------- Celular: barra no topo e menu em gaveta ---------- */
.trh-topo, .trh-fundo { display: none; }
@media (max-width: 991px) {
    body.trh .app-main { margin-left: 0; margin-right: 0; padding-top: 56px; }
    .trh-topo { display: flex; position: fixed; z-index: 1020; top: 0; left: 0; right: 0; height: 56px; align-items: center; justify-content: space-between; padding: 0 14px; background: rgba(6, 8, 11, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--trh-edge); }
    html[data-trh-mode="light"] .trh-topo { background: rgba(231, 237, 245, .8); }
    .trh-topo-logo img { max-height: 30px; }
    .trh-previa { top: 56px; }
    .trh-topo-menu { background: none; border: 1px solid var(--trh-edge); border-radius: 10px; padding: 7px; color: var(--trh-tx); }
    body.trh .trh-sb { --trh-sb-w: 272px; top: 8px; bottom: 8px; left: 8px; transform: translateX(-120%); }
    html.trh-gaveta body.trh .trh-sb { transform: none; }
    html.trh-gaveta .trh-fundo { display: block; position: fixed; z-index: 1025; inset: 0; background: rgba(0, 0, 0, .5); }
    html.trh-colapsado .trh-sb .trh-logo, html.trh-colapsado .trh-sb .trh-sec, html.trh-colapsado .trh-sb .trh-it span, html.trh-colapsado .trh-sb .trh-cta span, html.trh-colapsado .trh-sb .trh-txt { display: revert; }
    .trh-sb-colapsar { display: none; }
}

/* ---------- Páginas do Lagom: blocos em vidro, tipografia, tabelas, formulários ---------- */
body.trh .main-header { padding-top: 28px; padding-bottom: 12px; background: transparent; }
body.trh .main-header-title { color: var(--trh-tx); font-weight: 700; letter-spacing: -.02em; }
body.trh .breadcrumb, body.trh .breadcrumb a { color: var(--trh-mut); }
body.trh h1, body.trh h2, body.trh h3, body.trh h4, body.trh h5, body.trh h6 { color: var(--trh-tx); letter-spacing: -.01em; }
body.trh .main-body { background: transparent; }

body.trh .panel, body.trh .table-container, body.trh .list-group, body.trh .tile, body.trh .well, body.trh .section-body,
body.trh .message, body.trh .panel-sidebar, body.trh .sidebar .panel, body.trh .card, body.trh .package, body.trh .promo-slider,
body.trh .product-details, body.trh .invoice-summary, body.trh .order-summary, body.trh .summary-container, body.trh .block,
body.trh .modal-content, body.trh .dropdown-menu, body.trh .popover, body.trh .login-wrapper {
    background: var(--trh-glass) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid var(--trh-edge) !important;
    border-radius: 18px;
    box-shadow: var(--trh-sombra) !important;
    color: var(--trh-tx-2);
}
body.trh .dropdown-menu { border-radius: 12px; background: var(--dropdown-bg) !important; }
body.trh .panel-heading, body.trh .table-container .table-top, body.trh .panel-footer, body.trh .card-header, body.trh .card-footer { background: rgba(255, 255, 255, .02) !important; border-color: var(--trh-edge-2) !important; color: var(--trh-tx); }
body.trh .list-group-item { background: transparent !important; border-color: var(--trh-edge-2) !important; color: var(--trh-tx-2); }
body.trh .list-group-item.active, body.trh .list-group-item:hover { background: rgba(47, 123, 255, .10) !important; color: var(--trh-tx); }

body.trh .table, body.trh table.dataTable { color: var(--trh-tx-2); background: transparent !important; }
body.trh .table > thead > tr > th, body.trh table.dataTable thead th { color: var(--trh-mut); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; border-color: var(--trh-edge-2) !important; background: transparent !important; }
body.trh .table > tbody > tr > td { border-color: var(--trh-edge-2) !important; background: transparent !important; }
body.trh .table-hover > tbody > tr:hover > td, body.trh .table > tbody > tr:hover { background: rgba(255, 255, 255, .025) !important; }

body.trh .btn-primary { background: var(--trh-ac-grad) !important; border: 0 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--trh-ac-brilho); border-radius: 10px; }
body.trh .btn-primary:hover { filter: brightness(1.08); }
body.trh .btn-default, body.trh .btn-secondary, body.trh .btn-outline { background: rgba(255, 255, 255, .045) !important; border: 1px solid var(--trh-edge) !important; color: var(--trh-tx) !important; border-radius: 10px; }
body.trh .btn-success { background: linear-gradient(180deg, #34d399, #059669) !important; border: 0 !important; color: #04130d !important; }
body.trh .btn-danger { background: linear-gradient(180deg, #f87171, #dc2626) !important; border: 0 !important; color: #fff !important; }

body.trh .label, body.trh .badge, body.trh .status { border-radius: 8px; font-weight: 600; letter-spacing: .01em; }
body.trh .label-success, body.trh .status-active, body.trh .status-paid, body.trh .status-completed { background: rgba(52, 211, 153, .14) !important; color: var(--trh-ok) !important; border: 1px solid rgba(52, 211, 153, .25); }
body.trh .label-warning, body.trh .status-unpaid, body.trh .status-pending, body.trh .status-answered, body.trh .status-customer-reply { background: rgba(251, 191, 36, .14) !important; color: var(--trh-warn) !important; border: 1px solid rgba(251, 191, 36, .25); }
body.trh .label-danger, body.trh .status-suspended, body.trh .status-cancelled, body.trh .status-overdue, body.trh .status-terminated { background: rgba(248, 113, 113, .14) !important; color: var(--trh-err) !important; border: 1px solid rgba(248, 113, 113, .25); }
body.trh .label-info, body.trh .label-primary, body.trh .status-open { background: rgba(47, 123, 255, .14) !important; color: var(--trh-ac-2) !important; border: 1px solid rgba(90, 150, 255, .25); }
body.trh .label-default, body.trh .status-closed { background: rgba(255, 255, 255, .05) !important; color: var(--trh-mut) !important; border: 1px solid var(--trh-edge); }

body.trh .form-control, body.trh select, body.trh textarea, body.trh input[type="text"], body.trh input[type="email"], body.trh input[type="password"], body.trh input[type="tel"], body.trh input[type="number"] {
    background: var(--input-bg) !important; border: 1px solid var(--input-border-color) !important; color: var(--input-color) !important; border-radius: 10px;
}
body.trh .form-control:focus { border-color: var(--trh-ac) !important; box-shadow: 0 0 0 3px rgba(47, 123, 255, .18) !important; }
body.trh .input-group-addon, body.trh .input-group-text { background: rgba(255, 255, 255, .04) !important; border-color: var(--input-border-color) !important; color: var(--trh-mut) !important; }
body.trh label, body.trh .control-label { color: var(--trh-tx-2); }

body.trh .nav-tabs, body.trh .nav-pills { border-color: var(--trh-edge-2); }
body.trh .nav-tabs > li > a, body.trh .nav-pills > li > a, body.trh .nav-tabs .nav-link { color: var(--trh-mut); background: transparent; border-color: transparent; border-radius: 9px; }
body.trh .nav-tabs > li.active > a, body.trh .nav-pills > li.active > a, body.trh .nav-tabs .nav-link.active { color: var(--trh-tx) !important; background: rgba(255, 255, 255, .06) !important; border-color: var(--trh-edge) !important; }
body.trh .pagination > li > a, body.trh .pagination > li > span { background: rgba(255, 255, 255, .03) !important; border-color: var(--trh-edge) !important; color: var(--trh-tx-2) !important; }
body.trh .pagination > .active > a, body.trh .pagination > .active > span { background: var(--trh-ac) !important; border-color: var(--trh-ac) !important; color: #fff !important; }

body.trh .alert { border-radius: 12px; border: 1px solid var(--trh-edge); background: rgba(255, 255, 255, .03) !important; color: var(--trh-tx-2); }
body.trh .alert-success { border-color: rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .08) !important; color: var(--trh-ok); }
body.trh .alert-warning { border-color: rgba(251, 191, 36, .3); background: rgba(251, 191, 36, .08) !important; color: var(--trh-warn); }
body.trh .alert-danger { border-color: rgba(248, 113, 113, .3); background: rgba(248, 113, 113, .08) !important; color: var(--trh-err); }
body.trh .alert-info { border-color: rgba(90, 150, 255, .3); background: rgba(47, 123, 255, .08) !important; color: var(--trh-ac-2); }

body.trh .main-footer, body.trh footer.footer { background: transparent !important; border-top: 1px solid var(--trh-edge-2) !important; color: var(--trh-mut); }
body.trh .main-footer a { color: var(--trh-mut) !important; }
body.trh .modal-backdrop.in, body.trh .modal-backdrop.show { background: #000; opacity: .6; }

/* ---------- Login e páginas sem conta: card central em vidro ---------- */
body.trh.page-login { background: var(--trh-bg) !important; } /* o estilo de login do Lagom pinta um degradê azul no body */
body.trh.page-login .main-body .container, body.trh.page-login .login-wrapper { max-width: 480px; }
body.trh.page-login .main-header { display: none; }
body.trh.page-login .login-form, body.trh.page-login .panel, body.trh.page-login .login-container {
    background: var(--trh-glass) !important; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid var(--trh-edge) !important; border-radius: 22px !important; box-shadow: var(--trh-sombra) !important; padding: 32px !important;
}
body.trh.page-login .btn-primary { width: 100%; padding: 11px; font-size: 14px; }
body.trh.page-login h1, body.trh.page-login h2 { text-align: center; font-weight: 700; letter-spacing: -.02em; }

/* ---------- Ajustes finos: invólucros transparentes e botões "faded" do Lagom ---------- */
body.trh .pagination, body.trh .dataTables_length, body.trh .dataTables_filter, body.trh .dataTables_info { background: transparent !important; }
body.trh .btn-primary-faded { background: rgba(47, 123, 255, .14) !important; border: 1px solid rgba(90, 150, 255, .25) !important; color: var(--trh-ac-2) !important; }
body.trh .btn-primary-faded:hover { background: rgba(47, 123, 255, .22) !important; }
body.trh .btn-table-collapse { background: rgba(255, 255, 255, .045) !important; border: 1px solid var(--trh-edge) !important; color: var(--trh-tx) !important; }

/* Cabeçalho das páginas: o estilo "banner" do Lagom força texto branco; no tema novo o banner é transparente. */
body.trh .main-header .main-header-title { color: var(--trh-tx) !important; }
body.trh .main-header .breadcrumb, body.trh .main-header .breadcrumb a, body.trh .main-header .breadcrumb li, body.trh .main-header .breadcrumb > li + li::before { color: var(--trh-mut) !important; }
body.trh .main-header .breadcrumb li.active { color: var(--trh-tx-2) !important; }

/* ---------- Dashboard ---------- */
body.trh .trh-dash { padding: 22px 6px 30px; display: flex; flex-direction: column; gap: 14px; }
.trh-dash .trh-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.trh-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.trh-date { font-size: 11px; color: var(--trh-mut); letter-spacing: .04em; }
.trh-hello { font-size: 32px; font-weight: 300; letter-spacing: -.02em; margin: 4px 0 0; color: var(--trh-tx); }
.trh-hello b { font-weight: 700; background: linear-gradient(90deg, var(--trh-ac-2), var(--trh-ac)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trh-qa { display: flex; gap: 8px; flex-wrap: wrap; }
.trh-qa a { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 11px; font-weight: 600; font-size: 13px; color: var(--trh-tx) !important; text-decoration: none !important; background: var(--trh-glass-2); border: 1px solid var(--trh-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.trh-qa a.trh-qa-ac { border-color: rgba(90, 150, 255, .35); box-shadow: 0 0 0 1px rgba(47, 123, 255, .08), 0 8px 22px -12px rgba(47, 123, 255, .7); }
.trh-cap { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--trh-mut-2); font-weight: 600; margin-top: 6px; }
.trh-row { display: grid; gap: 14px; }
.trh-row-2 { grid-template-columns: 1.55fr 1fr; }
.trh-row-3 { grid-template-columns: repeat(3, 1fr); }
.trh-box { border-radius: 20px; padding: 18px; min-width: 0; }
.trh-inner { background: var(--trh-glass-2); border: 1px solid var(--trh-edge-2); border-radius: 14px; padding: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.trh-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trh-kpis-sm { margin-top: 14px; }
.trh-l { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--trh-mut); font-weight: 600; }
.trh-v { font-size: 36px; font-weight: 800; letter-spacing: -.03em; margin: 8px 0 4px; font-variant-numeric: tabular-nums; background: var(--trh-num-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; }
.trh-v small { font-size: 13px; font-weight: 600; -webkit-text-fill-color: var(--trh-mut); margin-left: 4px; letter-spacing: 0; }
.trh-valor { font-size: 18px; color: var(--trh-tx); margin: 6px 0 4px; }
.trh-s { font-size: 11px; color: var(--trh-mut); }
.trh-bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.trh-bh h3 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--trh-tx); display: flex; align-items: center; gap: 8px; }
.trh-link { color: var(--trh-mut) !important; font-size: 11.5px; display: inline-flex; align-items: center; gap: 4px; text-decoration: none !important; }
.trh-link:hover { color: var(--trh-tx) !important; }
.trh-titulo-ok, .trh-titulo-alerta { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 6px; -webkit-background-clip: text; background-clip: text; color: transparent; }
.trh-titulo-ok { background-image: linear-gradient(90deg, #6ee7b7, #34d399); }
.trh-titulo-alerta { background-image: linear-gradient(90deg, #fcd34d, #f59e0b); }
.trh-u { color: var(--trh-tx-2) !important; font-size: 11.5px; border-bottom: 1px dashed rgba(207, 214, 226, .35); text-decoration: none !important; }
.trh-credito { margin-top: 10px; }
.trh-btn2 { display: block; margin-top: 12px; padding: 10px; border-radius: 12px; text-align: center; font-weight: 600; font-size: 13px; color: var(--trh-tx) !important; background: rgba(255, 255, 255, .045); border: 1px solid var(--trh-edge); text-decoration: none !important; }
.trh-btn-ac { background: var(--trh-ac-grad); border: 0; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 26px -12px rgba(47, 123, 255, .8); }
.trh-vps { display: flex; align-items: center; gap: 10px; padding: 11px 8px; border-radius: 12px; color: var(--trh-tx-2) !important; text-decoration: none !important; flex-wrap: wrap; }
.trh-vps + .trh-vps { border-top: 1px solid var(--trh-edge-2); }
.trh-vps:hover { background: rgba(255, 255, 255, .025); }
.trh-vps-nome { color: var(--trh-tx); min-width: 90px; }
.trh-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--trh-ok); box-shadow: 0 0 0 3px rgba(52, 211, 153, .14), 0 0 10px rgba(52, 211, 153, .7); }
.trh-dot.is-off { background: var(--trh-warn); box-shadow: 0 0 0 3px rgba(251, 191, 36, .14), 0 0 10px rgba(251, 191, 36, .55); }
.trh-dot.is-susp { background: var(--trh-err); box-shadow: 0 0 0 3px rgba(248, 113, 113, .14), 0 0 10px rgba(248, 113, 113, .55); }
.trh-dot.is-unknown { background: var(--trh-mut-2); box-shadow: none; }
.trh-os { width: 18px; height: 18px; flex: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.trh-specs { display: flex; gap: 6px; flex-wrap: wrap; }
.trh-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 10.5px; padding: 3px 8px; border-radius: 8px; color: var(--trh-tx-2); background: rgba(255, 255, 255, .035); border: 1px solid var(--trh-edge-2); }
.trh-chip .trh-ic { color: var(--trh-mut); }
.trh-chip .trh-flag { width: 14px; height: 14px; }
.trh-ip { margin-left: auto; font-size: 11.5px; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid var(--trh-edge-2); color: var(--trh-tx-2); }
.trh-add { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px; border-radius: 14px; border: 1px dashed rgba(120, 170, 255, .22); background: linear-gradient(90deg, rgba(47, 123, 255, .06), rgba(47, 123, 255, 0)); color: var(--trh-tx) !important; text-decoration: none !important; }
.trh-add small { display: block; color: var(--trh-mut); font-size: 11px; }
.trh-add-pl { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--trh-ac-2); background: rgba(47, 123, 255, .14); box-shadow: inset 0 0 0 1px rgba(90, 150, 255, .25); }
.trh-vazio { padding: 14px 4px; color: var(--trh-mut); font-size: 12.5px; }
.trh-empty { text-align: center; padding: 10px 0; color: var(--trh-tx); }
.trh-bub { width: 44px; height: 44px; margin: 6px auto 12px; border-radius: 14px; display: grid; place-items: center; color: var(--trh-mut); background: rgba(255, 255, 255, .04); border: 1px solid var(--trh-edge); }
.trh-due { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; color: var(--trh-tx); }
.trh-due + .trh-due { border-top: 1px solid var(--trh-edge-2); }
.trh-due-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--trh-tx); }
.trh-act { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--trh-tx) !important; text-decoration: none !important; }
.trh-aic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--trh-mut); background: rgba(255, 255, 255, .04); border: 1px solid var(--trh-edge); }
.trh-aic-alerta { color: var(--trh-warn); }
.trh-act-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trh-act-t b { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trh-act-t small { color: var(--trh-mut); font-size: 11px; }
.trh-net { text-align: center; padding: 28px 10px; border-radius: 14px; color: var(--trh-tx); background: linear-gradient(180deg, rgba(52, 211, 153, .10), rgba(52, 211, 153, .02)); border: 1px solid rgba(52, 211, 153, .14); }
.trh-net-ck { width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 13px; display: grid; place-items: center; color: #6ee7b7; background: rgba(52, 211, 153, .14); box-shadow: 0 0 24px -4px rgba(52, 211, 153, .55), inset 0 0 0 1px rgba(110, 231, 183, .25); }
.trh-chart { display: grid; grid-template-columns: 1fr 210px; gap: 16px; }
.trh-leg { display: flex; justify-content: flex-end; gap: 14px; font-size: 10.5px; color: var(--trh-mut); margin-bottom: 6px; }
.trh-leg i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.trh-leg-down { background: #4d8fff; }
.trh-leg-up { background: #7dd3fc; }
.trh-leg-p95 { background: repeating-linear-gradient(90deg, #8b93a1 0 3px, transparent 3px 6px); }
.trh-grafico { display: block; width: 100%; height: auto; overflow: visible; }
.trh-g-grade { stroke: var(--trh-edge-2); }
.trh-g-down { fill: none; stroke: #4d8fff; stroke-width: 1.7; }
.trh-g-up { fill: none; stroke: #7dd3fc; stroke-width: 1.2; opacity: .9; }
.trh-g-p95 { stroke: #8b93a1; stroke-dasharray: 4 4; }
.trh-g-pico { fill: var(--trh-bg); stroke: #bcd4ff; stroke-width: 1.5; }
.trh-g-rotulo { fill: var(--trh-mut); font-size: 10px; font-family: 'Inter', sans-serif; }
.trh-atualizado { margin-top: 6px; }
.trh-atualizado.is-velho { color: var(--trh-warn); }
.trh-stat { background: var(--trh-glass-2); border: 1px solid var(--trh-edge-2); border-radius: 14px; padding: 11px 13px; margin-bottom: 9px; }
.trh-stat-top { display: flex; justify-content: space-between; align-items: center; }
.trh-badge { background: rgba(47, 123, 255, .16); color: var(--trh-ac-2); border: 1px solid rgba(90, 150, 255, .25); border-radius: 8px; padding: 1px 7px; font-weight: 700; font-size: 10.5px; }
.trh-kv { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 7px; color: var(--trh-mut); }
.trh-kv b { color: var(--trh-tx); font-weight: 600; }
.trh-big { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; background: var(--trh-num-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trh-indisp { padding: 22px; text-align: center; color: var(--trh-mut); border: 1px dashed var(--trh-edge); border-radius: 14px; }
@media (max-width: 1199px) { .trh-row-2, .trh-row-3 { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
    .trh-chart { grid-template-columns: 1fr; }
    .trh-hello { font-size: 26px; }
    .trh-v { font-size: 30px; }
    .trh-ip { margin-left: 0; }
}
@media (max-width: 480px) { .trh-kpis { grid-template-columns: 1fr; } }

/* Celular: sem o espaço que o Lagom reserva para o cabeçalho dele (74 px no body, com !important, e 40 px no
   main-body); a barra do tema (56 px, fixa) já é compensada pelo padding do .app-main. Fica no fim do arquivo
   para valer sobre as regras gerais acima. */
@media (max-width: 991px) {
    body.trh { padding-top: 0 !important; }
    body.trh .main-body { padding-top: 14px; }
    body.trh .main-body > .container, body.trh .main-header > .container { padding-left: 14px; padding-right: 14px; }
    body.trh .trh-dash { padding: 4px 0 24px; }
    body.trh .trh-box { padding: 14px; border-radius: 18px; }
    body.trh .trh-inner { padding: 13px; }
}