:root {
    --primary-blue: #2F80ED;
    --primary-blue-hover: #1e6fc7;
    --text-primary: #000000;
    --background-light: #FAFAFA;
    --background-gray: #DADADA;
    --disabled-gray: #94a3b8;
    --spacing-xs: 8px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-body: 14px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;
    --border-radius-sm: 8px;
    --border-radius-md: 10px;
    --border-radius-lg: 20px;
    --font-size-small: 12px;
    --font-size-body: 14px;
    --font-size-button: 16px;
    --font-size-title: 28px;
    --font-size-logo: 48px;
    --transition-fast: .2s ease-in-out;
    --transition-smooth: .3s ease-in-out;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0f172a;
    color: #e2e8f0;
}

.btn-menu {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-menu:hover {
    color: #e2e8f0;
    background-color: #1e293b;
}

.logo {
    display: flex;
    align-items: center;
    margin: 0 auto var(--spacing-md) 0;
    cursor: pointer;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.8;
}

.app_logo {
    font-size: 28px;
    /* Adjusted to fit sidebar better than 48px */
    color: var(--primary-blue);
    font-weight: 700;
    margin-left: 10px;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.5px;
}

.app_icon {
    height: 32px;
    width: auto;
}

.card {
    background-color: #1e293b;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid #334155;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background 0.2s;
}

.btn-primary:hover {
    background-color: #2563eb;
}

.select-dark {
    background-color: #334155;
    color: white;
    border: 1px solid #475569;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.hidden {
    display: none;
}

.variation-up {
    color: #ef4444;
}

.variation-down {
    color: #22c55e;
}

.variation-neutral {
    color: #94a3b8;
}

.kpi-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.kpi-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 0 0 0 80px;
    opacity: 0.05;
}

.donut-legend-item {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Heatmap styles */
.heatmap-card {
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
}

.heatmap-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.heatmap-none {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: #475569;
}

.heatmap-low {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%);
    border-color: #3b82f6;
}

.heatmap-medium {
    background: linear-gradient(135deg, #713f12 0%, #1e293b 100%);
    border-color: #f59e0b;
}

.heatmap-high {
    background: linear-gradient(135deg, #7f1d1d 0%, #1e293b 100%);
    border-color: #ef4444;
}

.heatmap-critical {
    background: linear-gradient(135deg, #581c87 0%, #1e293b 100%);
    border-color: #a855f7;
}

.intensity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.intensity-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Toggle buttons */
.toggle-group {
    display: inline-flex;
    background: #1e293b;
    border-radius: 0.5rem;
    padding: 0.25rem;
    border: 1px solid #334155;
}

.toggle-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-btn:hover {
    color: #e2e8f0;
}

.toggle-btn.active {
    background: #3b82f6;
    color: white;
}

/* Issues bar chart */
.issue-bar-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.issue-bar-label {
    width: 160px;
    font-size: 0.75rem;
    text-align: right;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-bar-track {
    flex: 1;
    height: 24px;
    background: #1e293b;
    border-radius: 0.25rem;
    overflow: hidden;
}

.issue-bar-fill {
    height: 100%;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    transition: width 0.3s ease;
}

/* Skeleton Loading Animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.skeleton {
    background: #334155;
    background-image: linear-gradient(to right, #334155 0%, #475569 20%, #334155 40%, #334155 100%);
    background-repeat: no-repeat;
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 0.25rem;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.skeleton-text-lg {
    height: 1.5rem;
    margin-bottom: 0.5rem;
    width: 70%;
}

.skeleton-block {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* Section Navigation */
.section-nav {
    display: flex;
    gap: 0.25rem;
    background: #0f172a;
    border-radius: 0.5rem;
    padding: 0.25rem;
    border: 1px solid #334155;
}

.section-nav-btn {
    flex: 1;
    padding: 0.5rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: none;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-nav-btn:hover {
    color: #e2e8f0;
    background: #1e293b;
}

.section-nav-btn.active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Reports Data Table */
.report-table-container {
    overflow-x: auto;
    border-radius: 0.75rem;
    border: 1px solid #334155;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.report-table thead th {
    background: #1e293b;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid #334155;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
    position: sticky;
    top: 0;
    z-index: 1;
}

.report-table thead th:hover {
    color: #e2e8f0;
}

.report-table thead th.sorted {
    color: #3b82f6;
}

.report-table thead th .sort-arrow {
    margin-left: 0.375rem;
    font-size: 0.625rem;
}

.report-table tbody tr {
    border-bottom: 1px solid #1e293b;
    transition: background 0.15s;
}

.report-table tbody tr:hover {
    background: #1e293b;
}

.report-table tbody tr:nth-child(even) {
    background: #0f172a33;
}

.report-table tbody tr:nth-child(even):hover {
    background: #1e293b;
}

.report-table tbody td {
    padding: 0.625rem 1rem;
    color: #e2e8f0;
    white-space: nowrap;
}

.report-table tbody td.text-right {
    text-align: right;
}

.report-table tbody td.text-center {
    text-align: center;
}

.report-table thead th.text-right {
    text-align: right;
}

.report-table thead th.text-center {
    text-align: center;
}

/* Total row */
.report-table tfoot tr {
    background: #1e293b;
    border-top: 2px solid #3b82f6;
}

.report-table tfoot td {
    padding: 0.75rem 1rem;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
}

/* CPI Color Bar */
.cpi-bar-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
}

.cpi-bar-track {
    flex: 1;
    height: 8px;
    background: #334155;
    border-radius: 4px;
    overflow: hidden;
}

.cpi-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.cpi-value {
    font-weight: 700;
    font-size: 0.875rem;
    min-width: 50px;
    text-align: right;
}

/* Export Button */
.btn-export {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.btn-export:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

/* Report KPI Summary Cards */
.report-kpi {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
}

.report-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.report-kpi-label {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

/* Plant comparison bar chart */
.plant-cpi-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.plant-cpi-label {
    width: 200px;
    font-size: 0.8125rem;
    text-align: right;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.plant-cpi-track {
    flex: 1;
    height: 28px;
    background: #1e293b;
    border-radius: 0.25rem;
    overflow: hidden;
    position: relative;
}

.plant-cpi-fill {
    height: 100%;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    padding-left: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    transition: width 0.5s ease;
    min-width: 32px;
}

.plant-cpi-pct {
    min-width: 50px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
}
/* ============================================================
   Shell refatorado (Claude Design → código, ADR 0002 Fase 1)
   sidebar · plant switcher · treeview · topbar · estados vazios
   ============================================================ */

.ms {
    font-family: 'Material Symbols Outlined';
    line-height: 1;
    display: inline-block;
    flex: none;
}

/* ===== Sidebar ===== */
.pv-sidebar {
    position: relative;
    width: 250px;
    flex: none;
    background: #0B0F1A;
    border-right: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
}

/* O MENU RETRATIL.
   Um estado so, `.pv-side-aberta`, e o CSS decide o que "fechado" significa em cada
   largura. O padrao de cada faixa e escolhido no JS (`menuPadrao`), porque a resposta
   muda: no desktop o normal e aberto, no telefone e fechado. */
.pv-sidebar:not(.pv-side-aberta) { display: none; }

/* O ponto de virada e MEDIDO, nao convencional. A sidebar come 251 px do fluxo, e a
   tabela de sensores desta tela nao comprime abaixo de 856 px -- somando, 1107. Abaixo
   disso a sidebar em fluxo tira largura de quem precisa dela. Aqui ela sai do fluxo e
   passa a cobrir, com fundo atras, entao a tela inteira continua disponivel pro
   conteudo. 900 e o ponto onde isso passa a valer mais que a lista sempre visivel;
   entre 900 e 1107 a tabela ainda rola um pouco, o que e o mal menor. */
@media (max-width: 900px) {
    .pv-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 60;
        width: min(280px, 82vw);
        box-shadow: 0 0 40px rgba(0, 0, 0, .55);
    }
    /* O backdrop e irmao da sidebar e so existe aberto. Ele nao e enfeite: sem uma area
       de clique fora, fechar exige acertar o mesmo botao de 38 px que abriu. */
    .pv-side-backdrop {
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(4, 7, 14, .6);
        backdrop-filter: blur(2px);
    }
}

/* Acima do ponto de virada o backdrop nunca aparece, mesmo se a classe ficar la. */
@media (min-width: 901px) {
    .pv-side-backdrop { display: none; }
}

/* A marca da sidebar segue a da tela de login: logo branca + `Insights` alinhado pela
   DIREITA dela. Deixou de ser linha (icone | texto) e virou coluna.
   `align-self:flex-start` e o que faz o bloco encolher pra largura da IMAGEM em vez dos
   226 px uteis da sidebar. Sem isso, "a direita" era a direita da sidebar e a marca
   inteira flutuava longe do menu, que e todo alinhado a esquerda. Com ele, os filhos
   esticam pra largura da logo e o `text-align:right` do sub cai onde deve. */
.pv-brand {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    padding: 6px 8px 14px;
}

.pv-brand-img {
    display: block;
    width: 132px;
    height: auto;
}

/* `letter-spacing` sobra depois da ultima letra e empurraria o "S" pra dentro; o
   margin-right negativo de mesmo valor devolve o alinhamento com a borda da logo. */
.pv-brand-sub {
    margin-top: 7px;
    text-align: right;
    margin-right: -2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #7D89A4;
}

.pv-navlabel {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    color: #7D89A4;
    text-transform: uppercase;
    padding: 14px 10px 6px;
}

.pv-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pv-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    color: #94A0B8;
    background: transparent;
    transition: background .15s, color .15s;
}

.pv-nav-item:hover {
    background: rgba(255, 255, 255, .04);
    color: #EAEEF8;
}

/* O item ativo pinta um fundo azulado atras de si, e e ele que come a diferenca: o
   #3B82F6 dava 4,4:1 contra esse fundo, 0,1 abaixo do minimo. #60A5FA leva a ~7. */
.pv-nav-item.active {
    background: rgba(59, 130, 246, .15);
    color: #60A5FA;
}

.pv-nav-item .ms {
    font-size: 20px;
}

.pv-plantlist {
    flex: 1;
    overflow-y: auto;
    padding: 4px 2px;
    min-height: 60px;
}

.pv-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-top: auto;
    background: #141A2A;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
}

/* ===== Topbar ===== */
.pv-topbar {
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    background: #0B0F1A;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.pv-topbar-l {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pv-topbar-r {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.pv-h1 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #EAEEF8;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-sub {
    font-size: 12px;
    color: #7D89A4;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-menu {
    background: transparent;
    border: none;
    color: #94A0B8;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pv-menu:hover {
    background: rgba(255, 255, 255, .05);
    color: #EAEEF8;
}

.pv-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #141A2A;
    border: 1px solid rgba(255, 255, 255, .1);
    color: #EAEEF8;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 30px 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237D89A4' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}

.pv-select:hover {
    border-color: rgba(255, 255, 255, .2);
}

/* ===== Estados vazios ===== */
.pv-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    color: #7D89A4;
    padding: 40px;
}

.pv-empty-ico {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    background: #141A2A;
    border: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Seletor de plantas (switcher + painel) ===== */
.pv-plant-switcher {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #141A2A;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-align: left;
    transition: background .15s, border-color .15s;
}

.pv-plant-switcher:hover {
    background: #1B2236;
    border-color: rgba(255, 255, 255, .14);
}

.pv-plant-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(59, 130, 246, .16);
    color: #3B82F6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: none;
}

.pv-plant-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.pv-plant-name {
    font-size: 13px;
    font-weight: 700;
    color: #EAEEF8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-plant-company {
    font-size: 11px;
    color: #7D89A4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-plant-chev {
    color: #7D89A4;
    font-size: 20px;
    flex: none;
}

.pv-plant-panel {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #0B0F1A;
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.pv-plant-panel.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.pv-plant-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px 12px;
}

.pv-plant-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #141A2A;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 8px 11px;
    margin-bottom: 10px;
}

.pv-plant-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #EAEEF8;
    font-family: inherit;
    font-size: 13px;
}

.pv-plant-search input::placeholder {
    color: #7D89A4;
}

/* ===== Treeview de plantas ===== */
.pv-tree-group {
    margin-bottom: 4px;
}

.pv-tree-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-align: left;
    border-radius: 8px;
}

.pv-tree-head:hover {
    background: rgba(255, 255, 255, .04);
}

.pv-tree-chev {
    font-size: 20px;
    color: #7D89A4;
    transition: transform .15s ease;
    flex: none;
}

.pv-tree-group.collapsed .pv-tree-chev {
    transform: rotate(-90deg);
}

.pv-tree-group.collapsed .pv-tree-items {
    display: none;
}

.pv-tree-co {
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #94A0B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-tree-count {
    font-size: 10.5px;
    font-weight: 700;
    color: #8A94A8;
    background: rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 1px 8px;
    flex: none;
}

.pv-tree-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px 0 5px 14px;
    margin-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.pv-tree-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-align: left;
    border-radius: 9px;
    color: #94A0B8;
    transition: background .15s, color .15s;
}

.pv-tree-item:hover {
    background: rgba(255, 255, 255, .05);
    color: #EAEEF8;
}

.pv-tree-pin {
    font-size: 17px;
    color: #7D89A4;
    flex: none;
}

.pv-tree-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-tree-check {
    font-size: 18px;
    color: #3B82F6;
    opacity: 0;
    flex: none;
}

.pv-tree-item.selected {
    background: rgba(59, 130, 246, .14);
    color: #EAEEF8;
}

.pv-tree-item.selected .pv-tree-name {
    font-weight: 700;
}

.pv-tree-item.selected .pv-tree-pin {
    color: #3B82F6;
}

.pv-tree-item.selected .pv-tree-check {
    opacity: 1;
}

/* ===== Busca de equipamento (header da seção Equipamentos) ===== */
.eq-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #141A2A;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 8px 11px;
    width: 230px;
}

.eq-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #EAEEF8;
    font-family: inherit;
    font-size: 13px;
}

.eq-search input::placeholder {
    color: #7D89A4;
}

@keyframes loginShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}


/* ============================================================
   Dashboard de Frota (Spec 0003) — portado do protótipo MVP.
   Todas as classes usam o prefixo `fl-` para não colidir com o
   resto do app (card, btn-primary e hidden colidiam).
   ============================================================ */

:root{
  --bg:#0E1320; --panel:#141B2D; --panel-2:#182135; --line:rgba(255,255,255,.08);
  /* `--txt-3` era o antigo 5C68-84 e entregava 3,18–3,43:1 contra os fundos reais desta
     tela, onde texto normal precisa de 4,5. Sozinha, ela reprovava 160 dos 165 textos da
     auditoria de 24/08: os 14 cabecalhos de tabela, os rodapes dos cards, o subtitulo do
     anel, o "Toque para escolher", o INSIGHTS da sidebar, o aviso apagado de gateway.

     #7D89A4 passa em todos os fundos MEDIDOS na tela (4,58–5,45). A primeira tentativa
     foi #74819E, calculada contra fundos ESTIMADOS, e reprovou -- o fundo real da busca e
     do cabecalho de tabela e mais claro do que eu supus. Fundo se mede, nao se estima.

     E trocar so a variavel consertou 4 de 165: o mesmo valor estava escrito A MAO em 57
     lugares nos tres arquivos. O literal foi trocado em todos.

     Custo assumido: a distancia pro --txt-2 cai de 2,12 pra 1,33, entao os dois niveis
     de texto secundario ficam mais parecidos. Subir o --txt-2 junto devolveria o degrau
     (#AFB8CA daria 1,76) ao custo de comprimir o topo da escala. */
  --txt:#EAEEF8; --txt-2:#94A0B8; --txt-3:#7D89A4;
  --blue:#3B82F6; --green:#22C55E; --amber:#F59E0B; --red:#EF4444;
}

.fl-shell{display:flex;min-height:100vh}
.fl-side{width:246px;flex:none;background:#0B0F1A;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px}
.fl-brand{display:flex;align-items:center;gap:11px;padding:4px 6px 22px}
.fl-brand-ico{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#3B82F6,#1D4ED8);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(59,130,246,.45)}
.fl-brand-ico .ms{font-size:22px;color:#fff}
.fl-brand-t{font-weight:800;font-size:17px;letter-spacing:-.3px}
.fl-brand-s{font-size:9.5px;color:#9DB2E8;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.fl-plant{width:100%;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;color:inherit;font:inherit;cursor:pointer;margin-bottom:22px}
.fl-plant .ms{font-size:20px;color:var(--txt-3)}
.fl-plant-n{font-size:13px;font-weight:700}
.fl-plant-c{font-size:11px;color:var(--txt-3)}
.fl-nav{display:flex;flex-direction:column;gap:3px}
.fl-side-foot{margin-top:auto;font-size:11px;color:var(--txt-3);border-top:1px solid var(--line);padding-top:14px;line-height:1.5}
.fl-main{flex:1;min-width:0;display:flex;flex-direction:column}

.fl-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 26px;border-bottom:1px solid var(--line);background:rgba(20,27,45,.5);flex-wrap:wrap}
.fl-h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.4px}
.fl-sub{margin:3px 0 0;font-size:12.5px;color:var(--txt-2)}
.fl-stamp{display:inline-flex;align-items:center;gap:7px;background:rgba(34,197,94,.11);border:1px solid rgba(34,197,94,.28);color:#6EE7A6;border-radius:9px;padding:7px 12px;font-size:11.5px;font-weight:700}
.fl-stamp .ms{font-size:15px}

/* O carimbo responsivo.
   `.pv-topbar-r` nasceu `flex:none` -- ele NUNCA encolhia. Numa topbar de altura fixa
   com cinco frases do lado direito, estreitar a janela nao encurtava o carimbo: comia o
   lado esquerdo ate o `h1` "Frota de Gateways e Sensores" desaparecer debaixo dele
   (achado do Davi, 24/08). Aqui ele passa a encolher, e so na aba de Frota -- as outras
   topbars tem busca e select do lado direito, que encolher estraga.
   Fora daqui nada muda. */
#frota-header .pv-topbar-r{flex:0 1 auto;min-width:0}
#frota-header .pv-topbar-l{flex:1 1 auto}
/* O `min-width:0` do `.pv-topbar-l` nao alcanca o bloco que embrulha o h1 e o subtitulo:
   sem ele o bloco tem piso de conteudo, o h1 nunca chega a usar o proprio ellipsis, e
   abaixo de ~780 px sobra encostao. Medido: 4 px de sobreposicao em 760. */
#frota-header .pv-topbar-l > div{min-width:0}
#frota-header .fl-stamp{min-width:0;max-width:100%}
#frota-header .fl-stamp .ms{flex:none}
/* Reticencias como ULTIMO recurso, depois que os pedacos ja sairam por prioridade. */
#fl-stamp-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Quem escolhe os pedacos e o `pedacosDaFrota()` no app.js, com `matchMedia` nos MESMOS
   dois limiares. Aqui ficou so o encolhimento da barra.
   Foi tentado por CSS primeiro, com `display:none` e o separador dentro de cada span, e
   quebra: com a ordem que o Davi pediu, o pedaco que some em 1360 e o PRIMEIRO da faixa,
   e some levando o texto mas deixando o " · " pendurado na frente. Separador tem que ser
   consequencia de quantos pedacos sobraram, e so quem monta a lista sabe disso. */
.fl-btn{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);color:var(--txt);font:inherit;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:10px;cursor:pointer}
.fl-btn:hover{background:var(--panel-2)}
.fl-btn .ms{font-size:17px}
/* Fundo proprio, mais escuro que o `--blue` da marca: branco sobre #3B82F6 da 3,68:1 e
   este e texto de botao, nao acento. #2563EB leva a 5,17 sem sair da familia. O `--blue`
   continua intacto nos outros tres usos, que sao barra de acento e borda -- ali o minimo
   e 3:1 e ele passa. */
.fl-btn-primary{background:#2563EB;border-color:#2563EB;color:#fff}
.fl-btn-primary:hover{background:#2f6fd8}

.fl-wrap{padding:22px 26px 60px;display:flex;flex-direction:column;gap:20px}
.fl-card{background:var(--panel);border:1px solid var(--line);border-radius:16px}
.fl-card-h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fl-card-t{font-size:14px;font-weight:800;letter-spacing:-.2px;display:flex;align-items:center;gap:9px}
.fl-card-t .ms{font-size:19px;color:var(--txt-3)}
.fl-card-sub{font-size:11.5px;color:var(--txt-3);font-weight:500}
.fl-grid{display:grid;gap:14px}
.fl-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fl-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fl-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1400px){.fl-g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1180px){.fl-g4{grid-template-columns:repeat(2,minmax(0,1fr))}.fl-g3,.fl-g2{grid-template-columns:1fr}}

.fl-kpi{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;position:relative;overflow:hidden}
.fl-kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--blue))}
.fl-kpi-l{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--txt-2);text-transform:uppercase;letter-spacing:.4px}
.fl-kpi-l .ms{font-size:17px;color:var(--c,var(--blue))}
.fl-kpi-v{font-size:32px;font-weight:800;letter-spacing:-1.2px;margin-top:9px;line-height:1}
.fl-kpi-v small{font-size:14px;font-weight:700;color:var(--txt-3);letter-spacing:0}
.fl-kpi-f{margin-top:7px;font-size:11.5px;color:var(--txt-3)}
.fl-kpi-f b{color:var(--c,var(--blue))}

.fl-hero{display:flex;gap:30px;align-items:center;padding:22px 24px;flex-wrap:wrap}
.fl-ring{position:relative;width:150px;height:150px;flex:none}
.fl-ring svg{width:150px;height:150px;transform:rotate(-90deg)}
.fl-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fl-ring-v{font-size:36px;font-weight:800;letter-spacing:-1.6px}
.fl-ring-l{font-size:9.5px;font-weight:700;color:var(--txt-3);letter-spacing:.6px;text-transform:uppercase;margin-top:3px}
.fl-hero-b{flex:1;min-width:290px;display:flex;flex-direction:column;gap:16px}
.fl-bar-row{display:flex;flex-direction:column;gap:6px}
.fl-bar-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}
.fl-bar-h b{font-size:15px;font-weight:800}
.fl-bar{height:10px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.fl-bar i{display:block;height:100%;border-radius:6px}

/* A rolagem lateral fica: e a rede de seguranca pra tela muito estreita. O que mudou e
   que a tabela parou de PRECISAR dela.
   Medido em 24/08: `white-space:nowrap` valia pra TODA celula, entao a tabela tinha piso
   de 1390 px e nao comprimia um pixel abaixo disso. Numa janela de 1500 (caixa de 1199)
   ja sobravam 191 px pra fora, e a rolagem aparecia com a tela cheia (achado do Davi).
   Duas colunas carregavam caminho longo -- "BOMBA 1 DA TORRE > Bomba > BB 03" e
   "LINHA 01 > LINHA 01 - GESSO" -- e nowrap nelas e o que travava tudo. */
.fl-tbl-scroll{overflow-x:auto}
/* Colunas de texto: quebram. Nao truncam.
   Truncar aqui repetiria o erro das barras por area -- o que sobrava era o prefixo que
   todas dividem, e a reticencia comia justamente a palavra que distinguia. Quebrar em
   duas linhas custa altura e nao custa informacao. `max-width` porque sem teto uma
   coluna sozinha ainda pode empurrar a tabela inteira. */
#frota-content td.fl-w{white-space:normal;max-width:280px;word-break:break-word}
/* Nome de gateway e uma palavra so, sem espaco pra quebrar ("BLG_Rpi4_4G_0BAFC650").
   `anywhere` quebra dentro dela; sem isso a coluna reserva a palavra inteira e o teto
   acima nao vale nada. */
#frota-content td.fl-mono-nome{overflow-wrap:anywhere;max-width:190px}
/* "há 9 min (ciclo de 2 h)" numa linha so pedia 163 px de coluna. O ciclo ja e um span
   proprio, entao ele cai pra linha de baixo quando falta espaco -- e ali fica ate melhor,
   porque os dois nunca foram a mesma grandeza: em cima o que o mundo mandou, embaixo o
   que o cadastro promete. Teto menor que o das colunas de caminho, que a frase e curta. */
#frota-content td.fl-w-coleta{max-width:130px}
/* O parentese cai INTEIRO ou nao cai. Sem isto ele quebrava no meio -- "(ciclo de 2" numa
   linha e "h)" na outra -- e um numero partido de duas linhas nao se le como numero. */
#frota-content td.fl-w-coleta .fl-muted{white-space:nowrap}
#frota-content table{width:100%;border-collapse:collapse;font-size:12.8px}
#frota-content th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--txt-3);padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:rgba(255,255,255,.02)}
#frota-content td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.045);white-space:nowrap;color:var(--txt-2);vertical-align:middle}
#frota-content tbody tr:hover td{background:rgba(255,255,255,.025)}
#frota-content td b{color:var(--txt);font-weight:700}
.fl-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--txt-3)}
.fl-muted{color:var(--txt-3)}
.fl-sub2{font-size:11px;color:var(--txt-3);margin-top:2px}

.fl-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.fl-dot{width:7px;height:7px;border-radius:50%;flex:none}
.fl-p-green{background:rgba(34,197,94,.14);color:#6EE7A6}
.fl-p-amber{background:rgba(245,158,11,.15);color:#FCD34D}
.fl-p-red{background:rgba(239,68,68,.15);color:#FCA5A5}
.fl-p-grey{background:rgba(148,163,184,.13);color:#B6C0D0}
/* Violeta so pra "erro no vinculo". Antes ele dividia o vermelho com "sem dado +24h",
   e numa tela que se le de longe a cor E a leitura: parou de mandar e com defeito
   pedem visitas diferentes. */
.fl-p-violet{background:rgba(167,139,250,.16);color:#C4B5FD}
/* Desativado no cadastro: fundo nenhum e borda tracejada. Nao e mais uma cor palida
   entre outras -- e outra FORMA, porque de longe a cor sozinha ja falhou. */
.fl-p-slate{background:transparent;color:#64748B;border:1px dashed rgba(148,163,184,.45)}
/* O contrato da tela: presente sempre, discreto, nunca dispensavel. */
/* O contrato virou `<details>` recolhido: uma linha em vez de ~15 antes do primeiro
   numero da tela. O `summary` e o alvo de clique, entao ele carrega o padding e o
   cursor; o corpo so aparece aberto. */
.fl-contrato{margin:0 0 18px;padding:0;background:rgba(59,130,246,.07);
  border:1px solid rgba(59,130,246,.22);border-left:3px solid #3B82F6;border-radius:10px;
  font-size:13px;line-height:1.55;color:var(--txt-2)}
.fl-contrato > summary{display:flex;gap:9px;align-items:center;padding:11px 16px;
  cursor:pointer;font-weight:700;color:var(--txt-1);list-style:none;user-select:none}
/* O triangulo padrao do Safari/Chrome briga com o icone; a seta e o `::after`. */
.fl-contrato > summary::-webkit-details-marker{display:none}
.fl-contrato > summary::after{content:'expand_more';font-family:'Material Symbols Outlined';
  font-size:19px;color:#60A5FA;margin-left:auto;transition:transform .18s ease}
.fl-contrato[open] > summary::after{transform:rotate(180deg)}
.fl-contrato > summary:hover{background:rgba(59,130,246,.06)}
.fl-contrato .ms{font-size:19px;color:#60A5FA;flex:none}
.fl-contrato-c{padding:0 16px 14px 16px}
.fl-contrato-r{margin-top:7px;font-size:11.5px;color:var(--txt-3)}

.fl-sig{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.fl-sig i{width:3px;border-radius:1px;background:rgba(255,255,255,.14)}
.fl-sig i:nth-child(1){height:4px}.fl-sig i:nth-child(2){height:7px}.fl-sig i:nth-child(3){height:10px}.fl-sig i:nth-child(4){height:13px}
.fl-sig.fl-s1 i:nth-child(-n+1),.fl-sig.fl-s2 i:nth-child(-n+2),.fl-sig.fl-s3 i:nth-child(-n+3),.fl-sig.fl-s4 i:nth-child(-n+4){background:currentColor}
.fl-sigwrap{display:inline-flex;align-items:center;gap:7px}
.fl-sigwrap .fl-db{font-size:11px;font-weight:600}

.fl-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fl-search{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:230px}
.fl-search input{background:transparent;border:none;outline:none;color:var(--txt);font:inherit;font-size:13px;width:100%}
select.fl-sel{background:var(--panel-2);border:1px solid var(--line);color:var(--txt);font:inherit;font-size:12.5px;font-weight:600;padding:9px 12px;border-radius:10px;outline:none;cursor:pointer}

.fl-plist{display:flex;flex-direction:column;max-height:340px;overflow-y:auto}
.fl-pitem{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.045)}
.fl-pitem:last-child{border-bottom:none}
.fl-pitem-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.fl-pitem-ico .ms{font-size:17px}
.fl-pitem-t{font-size:13px;font-weight:700;color:var(--txt)}
.fl-pitem-s{font-size:11.5px;color:var(--txt-3);margin-top:2px}
.fl-pitem-r{margin-left:auto;font-size:11.5px;color:var(--txt-3);text-align:right;flex:none}
.fl-empty{padding:26px 18px;text-align:center;color:var(--txt-3);font-size:12.5px}

.fl-arow{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid rgba(255,255,255,.045)}
.fl-arow:last-child{border-bottom:none}
/* Sem o prefixo comum o nome cabe com folga, entao a coluna encolheu de 190 pra 150 e
   virou piso em vez de largura fixa: area de nome curto para de reservar espaco que nao
   usa, e o que sobra vai pra barra. A reticencia continua ai como ultimo recurso. */
.fl-aname{flex:0 1 230px;min-width:150px;overflow:hidden}
/* Duas linhas: a folha do caminho em cima (o que muda), o ramo em baixo (onde e).
   Reticencia continua como ultimo recurso, mas agora ela cai sobre o contexto e nao
   sobre a unica palavra que distingue a area. */
.fl-aname-m{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-aname-c{font-size:11px;font-weight:600;color:var(--txt-3);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.fl-aname-c:empty{display:none}
/* O prefixo que saiu das linhas, no cabecalho: presente pra localizar, apagado pra nao
   competir com o titulo do card. */
.fl-areas-pref{margin-left:9px;padding-left:9px;border-left:1px solid rgba(255,255,255,.14);
  font-size:12px;font-weight:600;color:var(--txt-3);letter-spacing:0}
.fl-areas-pref:empty{display:none}
.fl-abar{flex:1;height:9px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden;display:flex}
.fl-abar i{display:block;height:100%}
.fl-acount{width:215px;flex:none;text-align:right;font-size:12px;color:var(--txt-2)}
.fl-acount .fl-g{color:#6EE7A6;font-weight:800}
.fl-acount .fl-r{color:#FCA5A5;font-weight:800}

.fl-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--txt-2)}
.fl-legend span{display:inline-flex;align-items:center;gap:6px}
.fl-hidden{display:none !important}
.fl-note{font-size:11.5px;color:var(--txt-3);line-height:1.5}
/* O container dos avisos. Ele nao tinha espacamento nenhum: enquanto era UM aviso por
   vez isso nao aparecia, e assim que o bloco virou dois -- offline com sensor e offline
   sem sensor -- as duas caixas sairam coladas, encostando borda com borda (achado do
   Davi, 24/08). Gap aqui, e nao margem no `.fl-alert`, pra nao sobrar espaco morto
   embaixo do ultimo quando so existe um. */
#fl-alert-gw{display:grid;gap:10px}
#fl-alert-gw:empty{display:none}

.fl-alert{display:flex;align-items:center;gap:10px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#FCD34D;border-radius:12px;padding:10px 15px;font-size:12.5px;font-weight:600}
.fl-alert .ms{font-size:18px}
/* O aviso de offline deixou de ser uma frase e virou manchete + lista, entao o icone
   nao pode mais centralizar: num bloco de varias linhas ele descia pro meio do texto.
   `flex:none` porque o icone e ligadura de fonte -- sem isso ele encolhe e a ligadura
   volta a aparecer como a palavra "warning". */
.fl-alert:has(.fl-alert-lista){align-items:flex-start}
.fl-alert:has(.fl-alert-lista) .ms{margin-top:1px;flex:none}
.fl-alert-lista{margin-top:7px;display:grid;gap:4px;font-weight:500;line-height:1.5;
  max-height:190px;overflow-y:auto}
.fl-alert-lista b{font-weight:800}

.fl-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.fl-pager-b{display:flex;align-items:center;gap:6px}
.fl-pager button{background:var(--panel-2);border:1px solid var(--line);color:var(--txt);font:inherit;font-size:12px;font-weight:700;padding:7px 12px;border-radius:9px;cursor:pointer}
.fl-pager button:disabled{opacity:.35;cursor:default}

/* ======================================================================
   EQUIPAMENTOS (Spec 0004) — portado do protótipo v0.
   Prefixos eq- / ic- / rd- / ld- / vib- / pm-, todos exclusivos desta seção.
   O chrome (.pv-*, .eq-search, .ms, .hidden) já existe acima e não é repetido.
   ====================================================================== */

/* ---- resumo + filtros ---- */
.eq-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; max-width: 1320px; }
.eq-sumcounts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.eq-sumdiv { width: 1px; height: 22px; background: rgba(255,255,255,.12); margin: 0 4px; }
.eq-sumcount { display: inline-flex; align-items: center; gap: 6px; background: #141A2A; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 7px 11px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 12px; color: #94A0B8; font-weight: 600; white-space: nowrap; }
.eq-sumcount b { color: #EAEEF8; font-size: 14px; font-weight: 800; }
.eq-sumcount .dot { width: 9px; height: 9px; border-radius: 50%; }
.eq-sumcount:hover { border-color: rgba(255,255,255,.18); }
.eq-sumcount.active { border-color: rgba(59,130,246,.55); background: #161D2E; }
.eq-sumcount-attn { color: #F0A100 !important; }
.eq-sumcount-attn.active { border-color: rgba(255,181,2,.55); background: rgba(255,181,2,.1); }
.eq-sumctrls { display: flex; align-items: center; gap: 10px; }
.eq-toggle { display: flex; background: #141A2A; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 3px; }
.eq-toggle button { border: none; background: transparent; color: #94A0B8; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.eq-toggle button.active { background: #3B82F6; color: #fff; }
.eq-toggle-view button { display: inline-flex; align-items: center; gap: 5px; }

/* ---- tabela ---- */
.eq-table { background: #141A2A; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; max-width: 1320px; }
.eq-thead, .eq-row { display: grid; grid-template-columns: 1.9fr 1.1fr .8fr 1fr 1.1fr 1.3fr 36px; gap: 14px; align-items: center; padding: 13px 18px; }
.eq-thead { position: sticky; top: 0; z-index: 3; background: #141A2A; border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 16px 16px 0 0; font-size: 11px; font-weight: 700; color: #7D89A4; text-transform: uppercase; letter-spacing: .5px; }
.eq-row { border-bottom: 1px solid rgba(255,255,255,.05); transition: background .12s; cursor: pointer; }
.eq-row:last-child { border-bottom: none; }
.eq-row:hover { background: rgba(255,255,255,.03); }
.eq-equip { display: flex; align-items: center; gap: 11px; min-width: 0; }
.eq-ico { width: 34px; height: 34px; border-radius: 9px; background: #1B2236; display: flex; align-items: center; justify-content: center; flex: none; }
.eq-name { font-size: 13px; font-weight: 700; color: #EAEEF8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-tag { font-size: 11px; color: #7D89A4; }
.eq-area { font-size: 12.5px; color: #94A0B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.eq-score { display: flex; align-items: center; gap: 9px; }
.eq-score-num { font-size: 15px; font-weight: 800; width: 26px; }
.eq-bar { flex: 1; height: 6px; border-radius: 3px; background: #1B2236; overflow: hidden; max-width: 70px; }
.eq-empty { padding: 50px; text-align: center; color: #7D89A4; font-size: 14px; }




/* ---- cards por tipo de inspeção ---- */
.eq-inspcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
.ic-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-width: 0; }
.ic-ico { font-size: 19px; color: #3B82F6; }
.ic-name { font-size: 12.5px; font-weight: 700; color: #94A0B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ic-score { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.ic-worst { font-size: 11.5px; color: #7D89A4; margin-top: 8px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ic-penalty { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: #F0A100; }
/* ---- últimas leituras (todos os tipos de parâmetro) ---- */
.rd-title { font-size: 14px; font-weight: 700; color: #EAEEF8; margin-bottom: 12px; }
.rd-table { border: 1px solid rgba(255,255,255,.07); border-radius: 11px; overflow: hidden; }
.rd-head, .rd-row { display: grid; grid-template-columns: 1.5fr 1.4fr 1fr .8fr .9fr; gap: 14px; align-items: center; padding: 11px 14px; }
.rd-head { background: #1B2236; font-size: 11px; font-weight: 700; color: #7D89A4; text-transform: uppercase; letter-spacing: .5px; }
.rd-row { border-top: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.rd-name { font-weight: 600; color: #EAEEF8; }
.rd-type { font-size: 11px; color: #7D89A4; margin-top: 2px; }
.rd-when { font-size: 12px; color: #94A0B8; }
.rd-img { display: inline-flex; align-items: center; gap: 6px; color: #3B82F6; font-weight: 600; font-size: 12.5px; }
.rd-link { display: inline-flex; align-items: center; gap: 2px; background: none; border: none; color: #3B82F6; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; }
.rd-link:hover { text-decoration: underline; }
/* ---- criticidade (EnumCriticalities do V4) ---- */
.eq-crit { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #94A0B8; white-space: nowrap; }
.eq-crit .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* ---- [v0] célula de tendência: sparkline de escala fixa + delta ---- */
.eq-trendcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eq-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---- agrupamento por área ---- */
.eq-thead-grouped { border: 1px solid rgba(255,255,255,.07); border-radius: 12px 12px 0 0; background: #11172499; max-width: 1320px; padding-left: 42px; }
.eq-groups { max-width: 1320px; border: 1px solid rgba(255,255,255,.07); border-top: none; border-radius: 0 0 12px 12px; overflow: hidden; background: #141A2A; }
.eq-group { border-bottom: 1px solid rgba(255,255,255,.06); }
.eq-group:last-child { border-bottom: none; }
.eq-ghead { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 16px; border: none; background: #11172466; cursor: pointer; font-family: 'Inter', sans-serif; text-align: left; transition: background .12s; }
.eq-ghead:hover { background: rgba(255,255,255,.03); }
.eq-gchev { font-size: 20px; color: #7D89A4; transition: transform .15s ease; flex: none; }
.eq-gname { font-size: 13.5px; font-weight: 700; color: #EAEEF8; }
.eq-gcount { font-size: 11px; font-weight: 700; color: #94A0B8; background: rgba(255,255,255,.07); border-radius: 20px; padding: 1px 9px; }
.eq-gpills { margin-left: auto; display: flex; gap: 10px; }
.eq-gpill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.eq-grows .eq-row { padding-left: 42px; border-bottom: 1px solid rgba(255,255,255,.04); }

/* ---- detalhe ---- */
.eq-back { display: flex; align-items: center; gap: 6px; background: none; border: none; color: #94A0B8; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 18px; }
.eq-back:hover { color: #EAEEF8; }
.eq-detail { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
.eq-card { background: #141A2A; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 18px; }
.eq-dhead { display: flex; align-items: center; gap: 20px; background: #141A2A; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 20px; }
.eq-dico { width: 58px; height: 58px; border-radius: 14px; background: #1B2236; display: flex; align-items: center; justify-content: center; flex: none; }
.eq-ring { position: relative; width: 96px; height: 96px; flex: none; }
.eq-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.eq-sensors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.eq-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.eq-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; }
.eq-card-click { cursor: pointer; transition: border-color .15s, background .15s; }
.eq-card-click:hover { border-color: rgba(59,130,246,.5); background: #161D2E; }
.eq-card-cta { display: flex; align-items: center; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); font-size: 12px; font-weight: 700; color: #3B82F6; }

/* ---- laudos ---- */
.ld-table { border: 1px solid rgba(255,255,255,.07); border-radius: 11px; overflow: hidden; }
.ld-head, .ld-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.6fr .9fr; gap: 14px; align-items: center; padding: 11px 14px; }
.ld-head { background: #1B2236; font-size: 11px; font-weight: 700; color: #7D89A4; text-transform: uppercase; letter-spacing: .5px; }
.ld-row { border-top: 1px solid rgba(255,255,255,.05); }
.ld-id { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ld-prob { font-size: 13px; font-weight: 600; color: #EAEEF8; }
.ld-rec { font-size: 12.5px; color: #94A0B8; line-height: 1.35; }

/* ---- tendência de vibração e de parâmetro (o espectro/FFT saiu: vive no Angular) ---- */
.vib-hint { display: flex; align-items: flex-start; gap: 10px; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.2); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: #94A0B8; line-height: 1.45; }
.vib-hint b { color: #EAEEF8; font-weight: 700; }
.vib-point { background: #141A2A; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; overflow: hidden; }
.vib-phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.vib-dirs { display: flex; gap: 6px; padding: 12px 16px 0; flex-wrap: wrap; }
.vib-dir { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.1); background: #1B2236; color: #94A0B8; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.vib-dir:not([disabled]):hover { color: #EAEEF8; }
.vib-dir.active { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.5); color: #EAEEF8; }
.vib-rows { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.vib-rowwrap { border-radius: 10px; overflow: hidden; }
.vib-row { display: grid; grid-template-columns: 1.5fr 1.4fr auto 28px; gap: 16px; align-items: center; width: 100%; padding: 12px; border: none; background: transparent; cursor: pointer; font-family: 'Inter', sans-serif; text-align: left; border-radius: 10px; transition: background .12s; }
.vib-row:hover { background: rgba(255,255,255,.03); }
.vib-name { font-size: 13.5px; font-weight: 700; color: #EAEEF8; }
.vib-leg { font-size: 11px; color: #7D89A4; font-family: 'Roboto Mono', ui-monospace, monospace; margin-top: 3px; }
.vib-exp { padding: 6px 14px 16px; }
.vib-bands-leg { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.vib-bands-leg span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #94A0B8; font-weight: 600; }
.vib-bands-leg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.pm-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pm-chip { background: #141A2A; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.pm-chip-l { font-size: 11px; font-weight: 700; color: #7D89A4; text-transform: uppercase; letter-spacing: .4px; }
.pm-chip-v { font-size: 18px; font-weight: 800; color: #EAEEF8; }

/* Malha muda: o alarme que precisa ganhar de todos os outros na mesma faixa. */
.fl-alert-grave{border-left:3px solid #EF4444;background:rgba(239,68,68,.10);font-weight:600}
.fl-alert-grave .ms{color:#FCA5A5}
/* "Não dá pra dizer" tem cara própria, não cara de alarme nem de tudo certo. */
/* A variante apagada trocava fundo e borda ESQUERDA e deixava a borda de fora ambar, do
   `.fl-alert`. Ficava com moldura de alarme e miolo de nota -- e agora que ela carrega os
   gateways offline SEM sensor, a moldura desmentia a frase inteira ("nenhuma coleta esta
   sendo perdida" dentro de uma caixa de alerta). Apagada e apagada inteira. */
.fl-alert-mudo{border:1px solid rgba(148,163,184,.22);border-left:3px solid rgba(148,163,184,.5);
  background:rgba(148,163,184,.07);color:var(--txt-3);font-weight:500}
.fl-alert-mudo .ms{color:var(--txt-3)}

/* As regras eram as linhas menores e mais apagadas da caixa, e sao o que o tecnico
   precisa. Agora sao a parte legivel; a explicacao dos relogios e que ficou secundaria. */
.fl-regras{margin:11px 0 3px;display:grid;gap:5px;font-size:13px;line-height:1.5;color:var(--txt-2)}
.fl-regras b{color:var(--txt-1)}