:root, [data-theme="light"] { --text-xs: clamp(0.7rem, 0.67rem + 0.15vw, 0.8rem); --text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem); --text-base: clamp(0.9rem, 0.87rem + 0.15vw, 1rem); --text-lg: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); --text-xl: clamp(1.3rem, 1.15rem + 0.75vw, 1.75rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --color-bg: #f3f6f2; --color-surface: #ffffff; --color-surface-2: #f7f9f5; --color-surface-offset: #eef2ea; --color-surface-hover: color-mix(in srgb, var(--color-text) 5%, var(--color-surface)); --color-divider: #dfe6da; --color-border: #d2ddca; --color-text: #16241a; --color-text-muted: #5c6b58; --color-text-faint: #93a08d; --color-primary: #1f7a2e; --color-primary-hover: #0b3b16; --color-primary-highlight: #dcefdc; --color-warning: #93460f; --color-success: #2f8a3d; --color-error: #a4283d; --color-blue: #1d5f8a; --color-accent: #b9790a; --color-accent-hover: #8f5d08; --color-accent-highlight: #f5e6c8; --radius-sm: 0.3rem; --radius-md: 0.4rem; --radius-lg: 0.55rem; --radius-xl: 0.7rem; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(16,32,20,.06), 0 1px 1px rgba(16,32,20,.04); --shadow-md: 0 4px 16px -4px rgba(16,32,20,.12), 0 2px 6px -2px rgba(16,32,20,.07); --font-body: 'Inter', 'Satoshi', system-ui, sans-serif;
      /* 02/09/2026 (reforçado 03/09 — Lucas: "o fundo não está funcionando como deveria"):
         fundo com profundidade. Luz do canto sup-esq + tom verde da marca (sup-dir) +
         azul (inf-dir). Alpha subiu e as âncoras entraram um pouco na tela pra o volume
         REALMENTE aparecer (antes ficava quase tudo fora do viewport, imperceptível).
         .app/.main são transparentes de propósito — quem pinta isto é o body. */
      --bg-layers: radial-gradient(1150px 640px at 1% -5%, rgba(255,255,255,.8), transparent 55%), radial-gradient(880px 520px at 104% -3%, rgba(31,122,46,.13), transparent 48%), radial-gradient(840px 840px at 99% 113%, rgba(29,95,138,.10), transparent 52%); }
    /* Grafite neutro (sem tom esverdeado) — o verde (--color-primary/-highlight)
       fica reservado a SINAL: aba ativa, botão primário, sucesso, badge de
       sync ao vivo, seta de tendência positiva. Hover genérico de elementos
       neutros (nav, linhas de tabela, itens de lista) usa --color-surface-hover,
       um neutro sutil derivado do próprio texto/superfície, não mais o verde. */
    [data-theme="dark"] { --color-bg: #0e0f12; --color-surface: #17191e; --color-surface-2: #1b1e24; --color-surface-offset: #21242b; --color-surface-hover: color-mix(in srgb, var(--color-text) 6%, var(--color-surface)); --color-divider: #262930; --color-border: #2a2d33; --color-text: #e8e9ec; --color-text-muted: #9aa0ab; --color-text-faint: #7a7f8a; --color-primary: #4caf6b; --color-primary-hover: #6fc98a; --color-primary-highlight: #1f3324; --color-warning: #d9a441; --color-success: #4caf6b; --color-error: #c8607a; --color-blue: #5b93c2; --color-accent: #d9a441; --color-accent-hover: #eab85c; --color-accent-highlight: #3a3220; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 6px 18px rgba(0,0,0,.35); --bg-layers: radial-gradient(1150px 640px at 1% -5%, rgba(120,150,135,.10), transparent 55%), radial-gradient(880px 520px at 104% -3%, rgba(76,175,107,.14), transparent 48%), radial-gradient(840px 840px at 99% 113%, rgba(91,147,194,.12), transparent 52%); }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.45; background: var(--bg-layers, none), var(--color-bg); background-attachment: fixed; color: var(--color-text); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; } input, select, textarea { width: 100%; border: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: var(--radius-md); padding: .65rem .85rem; font-size: var(--text-sm); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

    /* Barra de rolagem escura em tudo (26/08/2026, achado visual do
       usuário — a barra branca padrão do navegador quebrava o tema escuro
       em várias telas, não só no card do cliente). .sidebar mantém sua
       própria regra acima (scrollbar-width:none), mais específica, então
       continua escondida ali — aqui é só o padrão pro resto do app. */
    * { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
    ::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); }
    
    /* Largura do menu vive numa variável: o grid é declarado a partir dela e
       NUNCA é animado. Animar grid-template-columns é frágil (no Safari/iPad
       a coluna podia ficar presa em 0 e o menu sumia de vez). Recolhido, o
       menu vira um trilho de ícones de 76px — nunca desaparece por completo. */
    :root { --header-h: 58px; }
    .app { --sidebar-w: 264px; display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--header-h) 1fr; height: 100dvh; }
    .app.collapsed { --sidebar-w: 76px; }
    .sidebar { grid-row: 1 / -1; background: var(--color-surface); border-right: 1px solid var(--color-divider); padding: var(--space-5) var(--space-4); overflow-y: auto; overflow-x: hidden; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
    .sidebar::-webkit-scrollbar { display: none; }

    /* --- Modo trilho: só no desktop. Em tela pequena o menu vira gaveta
       (ver media query lá embaixo), então estas regras ficam escopadas
       aqui pra não brigar com ela. --- */
    @media (min-width: 1025px) {
      .app.collapsed .sidebar { padding-left: var(--space-2); padding-right: var(--space-2); }
      .app.collapsed .nav button > span,
      .app.collapsed .nav-parent-chevron,
      .app.collapsed .nav-section,
      .app.collapsed .submenu,
      .app.collapsed .brand-text { display: none; }
      .app.collapsed .nav button { justify-content: center; padding-left: 0; padding-right: 0; position: relative; }
      .app.collapsed .brand { justify-content: center; }
      /* Rótulo flutuante ao passar o mouse, já que o texto está escondido */
      .app.collapsed .nav button:hover::after {
        content: attr(data-label);
        position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
        background: var(--color-text); color: var(--color-surface);
        padding: .35rem .6rem; border-radius: var(--radius-md);
        font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
        z-index: 60; pointer-events: none; box-shadow: var(--shadow-md);
      }
    }

    /* Fundo escurecido atrás da gaveta (só aparece em tela pequena). Começa
       abaixo do cabeçalho pelo mesmo motivo da gaveta: o botão de menu
       precisa continuar clicável com o menu aberto. */
    .sidebar-backdrop {
      position: fixed; inset: var(--header-h) 0 0 0; background: rgba(9,20,12,.45);
      backdrop-filter: blur(2px); z-index: 40;
      opacity: 0; pointer-events: none; transition: opacity .22s ease;
    }
    .sidebar-backdrop.active { opacity: 1; pointer-events: auto; }
    .header { grid-column: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-6); border-bottom: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; } 
    .header-left { display: flex; align-items: center; gap: 1rem; }
    .main { grid-column: 2; overflow-y: auto; padding: var(--space-6); scrollbar-width: none; -ms-overflow-style: none; }
    .main::-webkit-scrollbar { display: none; }
    .brand { display: flex; gap: .75rem; align-items: center; margin-bottom: var(--space-6); }
    .brand svg { width: 30px; height: 30px; color: var(--color-primary); flex-shrink: 0; }
    .brand h1 { font-size: var(--text-base); font-weight: 700; line-height: 1.1; }
    .brand p { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: .1rem; }
    .brand-badge { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: var(--radius-full); background: var(--color-surface-offset); color: var(--color-text-faint); font-size: 0.65rem; font-weight: 600; letter-spacing: .02em; }
    .nav { display: grid; gap: .35rem; } 
    .nav-parent { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; font-size: var(--text-sm); padding: .85rem .9rem; border-radius: var(--radius-md); color: var(--color-text-muted); font-weight: 500;} 
    .nav-parent:hover { background: var(--color-surface-hover); color: var(--color-text); }
    .submenu { display:none; margin:.15rem 0 .6rem 1.55rem; padding-left:.75rem; border-left:1px solid var(--color-divider); gap:.3rem; }
    .submenu.open { display:grid; }
    .submenu-item { padding:.65rem .85rem; border-radius:var(--radius-md); background:transparent; border:0; text-align:left; color:var(--color-text-muted); font-size: var(--text-sm); }
    /* Hover é neutro; só a aba ativa (.active) carrega o verde de sinal. */
    .submenu-item:hover { background: var(--color-surface-hover); color: var(--color-text); }
    .submenu-item.active { background:var(--color-primary-highlight); color:var(--color-text); }
    .nav button:not(.nav-parent):not(.submenu-item) { display: flex; align-items: center; gap: .7rem; text-align: left; font-size: var(--text-sm); padding: .7rem .9rem; border-radius: var(--radius-md); color: var(--color-text-muted); transition: background .15s ease, color .15s ease; }
    .nav-parent { gap: .7rem; }
    .nav-parent > span:first-of-type, .nav button > span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
    .nav button:not(.nav-parent):not(.submenu-item):hover { background: var(--color-surface-hover); color: var(--color-text); }
    .nav button.active { background: var(--color-primary-highlight); color: var(--color-text); }
    /* Barra fina à esquerda marcando a aba ativa — dispensa negrito/cor forte */
    .nav button.active { position: relative; font-weight: 600; }
    .nav button.active::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-primary); }
    .nav-parent-chevron { transition: transform .2s ease; }
    .nav-parent.open .nav-parent-chevron { transform: rotate(180deg); }
    .nav-section { margin: var(--space-5) 0 .3rem .6rem; font-size: 0.7rem; color: var(--color-text-faint); text-transform: uppercase; font-weight: 700; letter-spacing: .07em; }
    .nav-section:first-child { margin-top: var(--space-2); }
    /* Botões só-ícone do cabeçalho */
    .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-surface-offset); border: 1px solid var(--color-border); color: var(--color-text-muted); transition: background .15s ease, color .15s ease; }
    .icon-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
    .icon-btn-danger:hover { background: color-mix(in srgb, var(--color-error) 14%, var(--color-surface)); color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 25%, var(--color-border)); }
    .sidebar-card { margin-top: var(--space-8); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); white-space: normal; } 
    .sidebar-card h3 { font-size: var(--text-sm); margin-bottom: .45rem; } 
    .sidebar-card p { font-size: var(--text-xs); color: var(--color-text-muted); } 
    .header h2 { font-size: var(--text-xl); font-weight: 700; } 
    .header-meta { display: flex; gap: .8rem; align-items: center; } 
    .pill { font-size: var(--text-xs); padding: .3rem .6rem; border-radius: var(--radius-full); background: var(--color-surface-offset); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
    .theme-toggle, .primary-btn, .secondary-btn, .danger-btn { border-radius: var(--radius-md); padding: .62rem .95rem; font-size: var(--text-sm); font-weight: 500; }
    .theme-toggle, .secondary-btn { background: var(--color-surface-offset); border: 1px solid var(--color-border); } 
    .primary-btn { background: var(--color-primary); color: #fff; } 
    .primary-btn:hover { background: var(--color-primary-hover); } 
    .danger-btn { background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface)); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 22%, var(--color-border)); } 
    .view { display: none; gap: var(--space-6); }
    /* grid-template-columns: minmax(0,1fr) é o que trava a única coluna
       implícita na largura real disponível — sem isso, um filho "largo"
       (ex.: .dashboard-kpi-grid com repeat(auto-fit, minmax(190px,1fr)))
       fazia a coluna "auto" da .view crescer até o max-content do filho
       (ficava maior que a tela em mobile) em vez de encolher, e o
       overflow-x:auto do .main escondia isso como uma rolagem horizontal
       do painel inteiro em vez do conteúdo simplesmente empilhar. */
    .view.active { display: grid; grid-template-columns: minmax(0, 1fr); animation: view-fade-in .2s ease; }
    @keyframes view-fade-in { from { opacity: 0; } to { opacity: 1; } }
    .hero-grid, .kpi-grid, .panel-grid { display: grid; gap: var(--space-5); }
    .hero-grid { grid-template-columns: 1.35fr .95fr; } 
    .kpi-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } 
    .panel-grid { grid-template-columns: 1.1fr .9fr; }
    /* Dashboard: os dois .panel-grid da tela usavam proporções diferentes
       sem motivo (1fr/2fr no primeiro, 1.15fr/.85fr no segundo) — unificado
       aqui numa única razão (1fr/1.6fr) reaproveitada nas duas linhas. Em
       cada linha o conteúdo "denso" (gráfico de série temporal com seletor,
       tabela de fornecedores) fica na coluna maior; o conteúdo "compacto"
       (gauge de resumo, lista de atenção) fica na menor — ver comentário
       junto ao HTML da seção #view-dashboard pra mais contexto. Continua
       herdando o breakpoint de 1100px de .panel-grid (1fr 1fr) porque a
       classe abaixo tem a mesma especificidade e vem ANTES da media query
       no arquivo — a media query, mais abaixo, sempre vence em telas
       estreitas. Não mover esta regra pra depois das media queries. */
    .dashboard-panel-grid { grid-template-columns: 1fr 1.6fr; }
    /* Dashboard: dois grupos de KPI com pesos visuais diferentes (ver HTML).
       "Primário" (visão geral) fica sempre em 3 colunas fixas no desktop —
       são só 3 métricas, não faz sentido auto-fit variar a contagem de
       colunas dependendo da largura exata da tela. "Compacto" (alertas
       operacionais) é mais denso, com mais itens, então usa auto-fit numa
       faixa menor pra caber mais colunas antes de quebrar. Por especificidade
       igual + ordem no arquivo (estas regras vêm ANTES das media queries
       abaixo), as media queries sempre vencem em telas estreitas — não mover
       estas duas regras pra depois delas. */
    /* 02/09/2026: faltava `display: grid` aqui (só o -compact tinha) — por
       isso os KPIs de "Visão geral" empilhavam full-width em vez de ficar
       lado a lado. Agora 4 colunas, como no artboard Main.dc.html. */
    .dashboard-kpi-grid-primary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; }
    .dashboard-kpi-grid-compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: var(--space-3); min-width: 0; }
    .dashboard-kpi-group-label { font-size: 0.7rem; color: var(--color-text-faint); text-transform: uppercase; font-weight: 700; letter-spacing: .07em; margin: 0 0 .55rem .1rem; }
    .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); }
    .card h3 { font-size: var(--text-lg); font-weight: 600; margin-bottom: .3rem; }
    .card p.subtle, .muted { color: var(--color-text-muted); font-size: var(--text-sm); }
    .kpi-value { font-size: var(--text-xl); font-weight: 600; margin: .4rem 0 .15rem; font-variant-numeric: tabular-nums; }
    .kpi-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
    .status-ok, .status-attn, .status-risk, .status-trial, .status-flag { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-xs); border-radius: var(--radius-full); padding: .38rem .62rem; } 
    .status-ok { background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)); color: var(--color-success); } 
    .status-attn { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); color: var(--color-warning); } 
    .status-risk { background: color-mix(in srgb, var(--color-error) 14%, var(--color-surface)); color: var(--color-error); } 
    .status-trial { background: color-mix(in srgb, var(--color-blue) 14%, var(--color-surface)); color: var(--color-blue); } 
    .status-flag { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); color: var(--color-warning); } 
    .table-wrap { overflow: auto; } table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } th, td { padding: .6rem .55rem; border-bottom: 1px solid var(--color-divider); text-align: left; vertical-align: middle; } th { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); } tbody tr { transition: background .15s ease; } tbody tr:hover { background: var(--color-surface-2); }
    /* Nome clicável de cliente/usina (linhas de tabela). O cursor/cor viviam
       inline em 6 lugares — centralizados aqui, junto do :hover que já
       existia. */
    .client-name-link { cursor: pointer; color: var(--color-primary); }
    .section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: var(--space-4); }
    .section-head h3 { margin: 0; }
    /* Bloco colapsado (botão de olho no cabeçalho): sem isso, um card com
       conteúdo escondido ainda esticava pra altura do vizinho no grid (o
       align-items:stretch padrão) e sobrava um vão vazio enorme. */
    .bloco-colapsado { align-self: start; }
    .bloco-colapsado > .section-head { margin-bottom: 0; }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); } 
    .form-grid .full { grid-column: 1 / -1; } 
    label { display: grid; gap: .4rem; font-size: var(--text-sm); } 
    .field-note { font-size: var(--text-xs); color: var(--color-text-muted); }
    .select-with-add { display: flex; gap: .4rem; align-items: center; }
    .select-with-add select { flex: 1 1 auto; min-width: 0; }
    .select-with-add button { flex: 0 0 auto; padding: .5rem .8rem !important; line-height: 1; }
    .chart-bars { display: grid; gap: .75rem; margin-top: 1rem; } 
    .bar-row { display: grid; grid-template-columns: 120px 1fr 56px; gap: .7rem; align-items: center; font-size: var(--text-sm); } 
    .bar-track { height: 12px; border-radius: 999px; background: var(--color-surface-offset); overflow: hidden; } 
    .bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-blue)); } 
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } 
    .empty-note { border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); color: var(--color-text-muted); background: var(--color-surface-2); text-align: center;} 
    .small { font-size: var(--text-xs); color: var(--color-text-muted); } 
    .block-title { font-size: var(--text-sm); font-weight: 700; margin-bottom: .85rem; } 
    .form-block { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--color-surface-2); } 
    .toggle-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); } 
    .toggle-line select { max-width: 180px; } 
    .hidden { display: none !important; } 
    .required::after { content: ' *'; color: var(--color-error); } 
    .summary-list { display: grid; gap: .85rem; } 
    .summary-item { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface-2); } 
    /* Barra de progresso do carregamento inicial (02/09/2026) — faixa fina
       no topo do viewport + rótulo com a % real. app.js controla. */
    #cargaProgresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
    #cargaProgresso .carga-fill { height: 100%; width: 0; background: var(--color-primary); box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 60%, transparent); transition: width .35s cubic-bezier(.3,.8,.3,1); }
    #cargaProgresso .carga-rotulo { position: absolute; top: 8px; right: 12px; font-size: .68rem; font-weight: 600; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: .18rem .55rem; box-shadow: var(--shadow-sm); font-variant-numeric: tabular-nums; }
    @media (prefers-reduced-motion: reduce) { #cargaProgresso .carga-fill { transition: none; } }
    /* V1 (artboard Central.dc.html) — eyebrow acima do título + chips de
       contagem no canto da Central de Alarmes. */
    .section-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: .15rem; }
    .alerts-header-chips { display: flex; gap: .4rem; flex-wrap: wrap; flex-shrink: 0; }
    .alerts-header-chips .achip { font-size: .72rem; font-weight: 600; padding: .3rem .6rem; border-radius: var(--radius-md); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .alerts-header-chips .achip-off { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 13%, var(--color-surface)); }
    .alerts-header-chips .achip-str { color: var(--color-accent); background: var(--color-accent-highlight); }
    .alerts-header-chips .achip-pr { color: var(--color-blue); background: color-mix(in srgb, var(--color-blue) 13%, var(--color-surface)); }
    /* V1 (artboard BaseGeral.dc.html) — chips de filtro por status. */
    .ug-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
    .ug-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 500; padding: .4rem .75rem; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); transition: background .15s ease, border-color .15s ease, color .15s ease; }
    .ug-chip:hover { color: var(--color-text); border-color: var(--color-text-faint); }
    .ug-chip.is-ativo { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-text); font-weight: 600; }
    .ug-chip [data-ug-count] { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
    .ug-chip .live-dot { width: 7px; height: 7px; animation: none; box-shadow: none; }
    .alerts-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-4)}
    .alerts-list{display:grid;gap:.75rem} 
    .alert-item{padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2);display:grid;gap:.45rem;cursor:pointer;transition:background .18s,border-color .18s,transform .18s} 
    .alert-item:hover{background:var(--color-surface-hover);border-color:var(--color-primary)}
    .alert-item.active{background:var(--color-primary-highlight);border-color:var(--color-primary)}
    .alert-top{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start} 
    .filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem} 
    .detail-card{display:grid;gap:1rem} 
    .detail-block{padding:.95rem 1rem;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-2)} 
    .status-select{max-width:220px} 
    .inline-alert { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius-lg); font-size: var(--text-sm); } 
    .inline-alert.warn { background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface)); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 22%, var(--color-border)); } 
    .inline-alert.error { background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface)); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 22%, var(--color-border)); } 
    .inline-alert.info { background: color-mix(in srgb, var(--color-blue) 12%, var(--color-surface)); color: var(--color-blue); border: 1px solid color-mix(in srgb, var(--color-blue) 22%, var(--color-border)); }
    
    @media (max-width: 1100px) { .kpi-grid, .hero-grid, .panel-grid, .dashboard-panel-grid, .split, .form-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 900px) { .filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .alerts-layout { grid-template-columns: 1fr; } .dashboard-kpi-grid, .dashboard-kpi-grid-primary, .dashboard-kpi-grid-compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
    /* Gaveta: vale até 1024px pra cobrir o iPad (768px em pé, 1024px deitado),
       que antes caía no layout de desktop e ficava com o menu comendo um
       terço da tela. Anima transform (confiável em qualquer navegador). */
    @media (max-width: 1024px) {
      html, body { overflow: auto; }
      .app { display: block; height: auto; }
      /* A gaveta começa ABAIXO do cabeçalho, e o cabeçalho fica acima dela na
         pilha. Assim o botão de menu continua clicável com o menu aberto —
         antes a gaveta cobria o cabeçalho inteiro e o único jeito de fechar
         era tocar no fundo escurecido, o que travava quem não sabia disso. */
      .sidebar {
        position: fixed; top: var(--header-h); left: 0; height: calc(100% - var(--header-h)); z-index: 50;
        width: 284px; padding: var(--space-5) var(--space-4);
        transform: translateX(0); transition: transform .25s ease;
        box-shadow: var(--shadow-md); border-right: 1px solid var(--color-divider);
      }
      .app.collapsed .sidebar { transform: translateX(-100%); }
      .main { padding: var(--space-4); }
      .header {
        position: sticky; top: 0; z-index: 60;
        height: var(--header-h); padding: 0 var(--space-4);
      }
    }
    @media (max-width: 760px) { .kpi-grid, .hero-grid, .panel-grid, .dashboard-panel-grid, .split, .form-grid, .alerts-layout, .filter-grid { grid-template-columns: 1fr; } .dashboard-kpi-grid, .dashboard-kpi-grid-primary, .dashboard-kpi-grid-compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .header-meta { flex-wrap: wrap; justify-content: flex-end; } .bar-row { grid-template-columns: 88px 1fr 46px; } .toggle-line { align-items: flex-start; flex-direction: column; } .toggle-line select { max-width: none; }
      /* Modais não devem estourar a tela em celular — largura relativa e
         padding menor, mesmo pros que fixam max-width maior via style inline
         (ex.: modalGarantiaHistorico usa 680px, uiConfirmModal usa 420px). */
      .modal-content { width: 92vw; max-width: 92vw !important; max-height: 88vh; padding: var(--space-4); }
      .toast-container { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: none; }
    }
  
    /* ========================================== */
/* MODAL DO RELATÓRIO IA                      */
/* ========================================== */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.modal-overlay.active {
  opacity: 1; pointer-events: auto;
}
.modal-content {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
  width: 100%; max-width: 600px; max-height: 85vh; overflow-y: auto;
  box-shadow: var(--shadow-md); transform: translateY(20px); transition: transform 0.3s ease;
}
.modal-overlay.active .modal-content {
  transform: translateY(0);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider);
  padding-bottom: var(--space-3);
}
.modal-body textarea {
  width: 100%; height: 250px; font-family: inherit; font-size: var(--text-sm);
  padding: 1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--color-surface-2); color: var(--color-text); resize: vertical;
}
.modal-footer {
  display: flex; justify-content: flex-end; gap: 1rem; margin-top: var(--space-4);
}
/* ========================================== */
/* DASHBOARD AVANÇADO E MATRIZ DE SAÚDE       */
/* ========================================== */
.heatmap-container {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 1rem;
}
.heatmap-day {
  width: 14px; height: 14px; border-radius: 3px;
  background-color: var(--color-surface-offset);
  border: 1px solid rgba(0,0,0,0.05);
  position: relative; cursor: pointer;
}
.heatmap-day:hover::after {
  content: attr(title);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--color-text); color: var(--color-surface);
  padding: 4px 8px; border-radius: 4px; font-size: 10px;
  white-space: nowrap; z-index: 10; margin-bottom: 4px;
}
.heat-0 { background-color: #ebedf0; } /* Geração Zero ou Sem dado */
.heat-1 { background-color: #f7e6a1; } /* Abaixo da meta (Amarelo) */
.heat-2 { background-color: #9be9a8; } /* Na meta (Verde claro) */
.heat-3 { background-color: #30c463; } /* Acima da meta (Verde escuro) */
.heat-error { background-color: #e04444; } /* Falha/Desligado (Vermelho) */
.heatmap-legend {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem;
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.heatmap-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.client-name-link:hover { text-decoration: underline; }
.heatmap-legend i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(0,0,0,0.05);
}
/* Bloco opcional para o relatório técnico de strings */
.eng-tech-report {
  background: var(--color-surface-2);
  border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.eng-report-card {
  display: grid;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.eng-report-card h3 {
  font-size: var(--text-lg);
  margin: 0;
}

.eng-report-card ul {
  padding-left: var(--space-5);
  margin: 0;
}

.eng-report-card li + li {
  margin-top: var(--space-2);
}

/* ========================================== */
/* CARDS DE KPI INTERATIVOS DO DASHBOARD      */
/* ========================================== */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  /* Sem min-width:0 o grid usa o min-content dos filhos (soma das colunas
     na largura mínima) pra calcular seu próprio tamanho — em telas
     estreitas isso estourava a largura do .view/.main e forçava scroll
     horizontal no painel inteiro em vez de simplesmente empilhar 1 coluna. */
  min-width: 0;
}
.kpi-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.kpi-card:active { transform: translateY(0); }
.kpi-card-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: var(--color-surface-offset);
}
.kpi-card-body { min-width: 0; }
.kpi-card-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: .2rem; }
.kpi-card-primary .kpi-card-icon { background: var(--color-primary-highlight); }
.kpi-card-error .kpi-card-icon { background: color-mix(in srgb, var(--color-error) 16%, var(--color-surface)); }
.kpi-card-error .kpi-value { color: var(--color-error); }
.kpi-card-warning .kpi-card-icon { background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); }
.kpi-card-warning .kpi-value { color: var(--color-warning); }
.kpi-card-accent .kpi-card-icon { background: var(--color-accent-highlight); }
.kpi-card-accent .kpi-value { color: var(--color-accent); }

/* .dashboard-kpi-grid-primary/-compact herdam min-width:0 do mesmo motivo
   documentado acima em .dashboard-kpi-grid (evita estourar a largura do
   .view em telas estreitas antes do breakpoint reduzir as colunas). */
.dashboard-kpi-grid-primary { min-width: 0; }

/* Variante compacta dos .kpi-card, usada só no grupo "alertas operacionais"
   do Dashboard — reaproveita as mesmas classes de cor por severidade
   (kpi-card-error/-warning/-accent) só com menos respiro e ícone menor, pra
   ficar visualmente mais denso/discreto que os 3 KPIs primários (visão
   geral) logo acima. */
.kpi-card-compact {
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
  border-radius: var(--radius-lg);
}
.kpi-card-compact .kpi-card-icon {
  width: 32px; height: 32px;
  font-size: 1rem;
  border-radius: var(--radius-md);
}
.kpi-card-compact .kpi-label { font-size: .68rem; }
.kpi-card-compact .kpi-value { font-size: 1.05rem; margin: .15rem 0 0; }
.kpi-card-compact .kpi-card-hint {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Indicador de tendência (seta + variação %) nos KPIs onde dá pra comparar
   com um valor real anterior (ex.: geração de hoje vs. ontem). A cor não é
   fixa por direção — é semântica: "up" é bom (verde) só quando subir é bom
   (geração), mas pra métricas onde subir é ruim (offline) quem decide a
   classe é a view, não a seta em si. Ver calcularVariacaoPercentual em
   src/modules/engine-core.js. */
.kpi-trend { display: inline-flex; align-items: center; gap: .2rem; font-size: var(--text-xs); font-weight: 600; margin-left: .45rem; vertical-align: middle; }
.kpi-trend .icon { width: 13px; height: 13px; }
.kpi-trend-good { color: var(--color-success); }
.kpi-trend-bad { color: var(--color-error); }

/* ==========================================
   FILA DE ATENÇÃO DO DASHBOARD
   ========================================== */
.attention-list { display: grid; gap: .5rem; }
/* Ícone com fundo tintado por severidade, mesmo princípio do .kpi-card-icon
   — reaproveitado nos itens de atenção do Dashboard e nos cards da Central
   de Alarmes (.alert-card-icon usa a mesma variante). */
.attention-item-icon, .alert-card-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-text-faint) 16%, var(--color-surface));
  color: var(--color-text-muted);
}
.attention-item-icon.sev-risk, .alert-card-icon.sev-risk { background: color-mix(in srgb, var(--color-error) 16%, var(--color-surface)); color: var(--color-error); }
.attention-item-icon.sev-attn, .alert-card-icon.sev-attn { background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); color: var(--color-warning); }
.attention-item-icon.sev-flag, .alert-card-icon.sev-flag { background: color-mix(in srgb, var(--color-blue) 16%, var(--color-surface)); color: var(--color-blue); }
.attention-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; text-align: left;
  padding: .7rem .85rem;
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  transition: border-color .15s ease, background .15s ease;
}
.attention-item:hover { border-color: var(--color-primary); background: var(--color-surface-hover); }
.attention-main { display: grid; gap: .1rem; min-width: 0; }
.attention-main strong { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========================================== */
/* SISTEMA DE ÍCONES (outline, sem emoji)      */
/* ========================================== */
.icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }

/* Campo de busca acoplado a um <select> de cliente/usina — filtra as
   opções visíveis conforme digita, sem mudar como o select é lido. */
.select-search-input {
  font-size: var(--text-xs);
  padding: .45rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.select-search-input::placeholder { color: var(--color-text-faint); }

/* ========================================== */
/* FEEDBACK DE UI: TOASTS, LOADER, CONFIRMAÇÃO */
/* (ver src/modules/ui-feedback.js)            */
/* ========================================== */
.toast-container {
  position: fixed; bottom: var(--space-5); right: var(--space-5);
  z-index: 100000; display: flex; flex-direction: column; gap: .6rem;
  max-width: min(360px, calc(100vw - var(--space-6)));
}
.toast {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-text-faint);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: .75rem .9rem; font-size: var(--text-sm); color: var(--color-text);
  opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease;
}
.toast-visivel { opacity: 1; transform: translateY(0); }
.toast-msg { min-width: 0; word-break: break-word; }
.toast-sucesso { border-left-color: var(--color-success); }
.toast-erro { border-left-color: var(--color-error); }
.toast-info { border-left-color: var(--color-blue); }
.toast-aviso { border-left-color: var(--color-warning); }
.toast-fechar {
  flex-shrink: 0; background: none; border: 0; color: var(--color-text-faint);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 0 0 .3rem;
  transition: color .15s ease;
}
.toast-fechar:hover { color: var(--color-text); }

.ui-loader-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100001; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ui-loader-overlay.active { opacity: 1; pointer-events: auto; }
.ui-loader-box {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  box-shadow: var(--shadow-md); text-align: center;
}
.ui-loader-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--color-surface-offset); border-top-color: var(--color-primary);
  animation: ui-spin .8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ========================================== */
/* BADGE DE SINCRONIZAÇÃO AO VIVO              */
/* Ponto verde pulsante ao lado de "Sincronizando..." — só existe dentro do  */
/* #loadingDbIndicator, que só fica visível (sem .hidden) enquanto há sync   */
/* de fato em andamento, então o pulso nunca fica ligado à toa.             */
/* ========================================== */
.sync-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-success); margin-right: .4rem;
  animation: sync-pulse 2s ease-in-out infinite;
}
@keyframes sync-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(1.35); }
}

/* ========================================== */
/* FRESCOR DE SINCRONIZAÇÃO (usinas ao vivo)    */
/* Bolinha de cor ao lado de "última atualização" nas telas por marca —      */
/* mesmo <7min = saudável (intervalo de poll é 25s), >20min chama atenção    */
/* (pode ser aba em 2º plano ou falha silenciosa), >2h é claramente stale.   */
/* Reaproveita o padrão visual do .sync-dot acima, só sem o pulso (frescor   */
/* não muda a cada segundo, pulsar constante seria ruído).                  */
/* ========================================== */
.freshness-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: .4rem; vertical-align: middle;
}
.freshness-dot.fresh { background: var(--color-success); }
.freshness-dot.stale { background: var(--color-warning); }
.freshness-dot.old { background: var(--color-error); }

/* ========================================== */
/* SKELETON DE KPI (Dashboard)                  */
/* Enquanto o 1º round de poll das 6 marcas ainda não voltou, os números do  */
/* topo do Dashboard mostravam "0" por um instante (lia como bug, não como   */
/* "carregando") — troca por um bloco pulsante até o 1º dado real chegar.   */
/* ========================================== */
.kpi-value.is-loading {
  color: transparent; position: relative; border-radius: var(--radius-sm);
  background: var(--color-surface-offset);
  animation: kpi-skeleton-pulse 1.3s ease-in-out infinite;
}
@keyframes kpi-skeleton-pulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

/* ========================================== */
/* INDICADOR DE CONECTIVIDADE (Fase 5, offline-first) */
/* #connectivityIndicator no header — 3 estados, controlados via classe pelo */
/* JS de src/modules/offline-cache.js. "Discreto" foi pedido explícito: no   */
/* estado normal (online) o ponto fica neutro e parado, sem pulso, pra não   */
/* competir visualmente com o resto do header. Só chama atenção (cor de      */
/* risco) quando offline; "sincronizando" reaproveita o mesmo pulso já       */
/* usado em #loadingDbIndicator.                                            */
/* ========================================== */
/* V1 (artboard Main.dc.html) — estado normal "ao vivo": verde, ponto pulsa. */
.conectividade-online { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); }
.conectividade-online .sync-dot { background: var(--color-success); animation: aoVivoPulso 1.8s ease-in-out infinite; }
@keyframes aoVivoPulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .conectividade-online .sync-dot { animation: none; } }
.conectividade-offline {
  background: color-mix(in srgb, var(--color-error) 14%, var(--color-surface));
  color: var(--color-error);
}
.conectividade-offline .sync-dot { background: var(--color-error); animation: none; }
.conectividade-sync {
  background: color-mix(in srgb, var(--color-blue) 14%, var(--color-surface));
  color: var(--color-blue);
}
.conectividade-sync .sync-dot { background: var(--color-blue); }

/* ========================================== */
/* RING GAUGE — anel de progresso em SVG puro, sem Chart.js. Reutilizado no  */
/* diagnóstico de dimensionamento (Engenharia/Perfil do Cliente) — mesma     */
/* linguagem visual do doughnut "Desempenho Global" do Dashboard, só mais    */
/* leve pra um indicador pontual dentro de um card.                         */
/* ========================================== */
.ring-gauge-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ring-gauge-track { stroke: var(--color-surface-offset); }
.ring-gauge-fill { transition: stroke-dasharray .4s ease; }
.ring-gauge-value {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 700; color: var(--color-text);
}

/* ========================================== */
/* LAUDO DA IA (Fase 6 — diagnóstico técnico    */
/* por IA + oportunidade comercial em destaque) */
/* ========================================== */
.laudo-ia-card {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.laudo-ia-header { display: flex; align-items: center; gap: var(--space-4); }
.laudo-ia-corpo { min-width: 0; }
.laudo-ia-corpo > span { margin-bottom: .4rem; }
.laudo-ia-diagnostico { margin-top: .4rem; font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; }
.oportunidade-comercial-tag {
  display: flex; align-items: center; gap: .5rem; margin-top: var(--space-3);
  padding: .6rem .85rem; border-radius: var(--radius-md);
  background: var(--color-accent-highlight); color: var(--color-accent-hover);
  font-size: var(--text-sm);
}
.oportunidade-comercial-tag strong { color: var(--color-accent-hover); }

/* ========================================== */
/* ACESSIBILIDADE: FOCO VISÍVEL PARA TECLADO   */
/* input/select/textarea já tinham outline;    */
/* faltava em botões e links.                  */
/* ========================================== */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Estado desabilitado de botão, centralizado aqui em vez de repetir
   "disabled style='opacity:.5; cursor:not-allowed;'" a cada botão de
   paginação renderizado via template string (8 ocorrências antes). */
button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.theme-toggle, .primary-btn, .secondary-btn, .danger-btn {
  transition: background .15s ease, opacity .15s ease, border-color .15s ease;
}

/* ========================================== */
/* PADRÕES REUTILIZÁVEIS (antes repetidos como */
/* style="..." inline em dezenas de lugares)   */
/* ========================================== */

/* Card "estatística compacta" — mesma casca do .card, só com padding menor.
   Substitui `class="card" style="padding:.7rem;"` (13 ocorrências). */
.stat-tile { padding: var(--space-3); }
.stat-tile.clickable { cursor: pointer; transition: border-color .15s ease; }
/* Variações de tamanho do valor dentro de um stat-tile (1rem / 1.1rem, o
   .kpi-value padrão é maior — pensado pra KPI de destaque, não pra grade
   compacta de detalhe). */
.kpi-value-sm { font-size: 1rem; }
.kpi-value-md { font-size: 1.1rem; }

/* Barra de filtro/busca acima de tabela (search + select), repetida em
   7 telas (Base Cadastrada, Base Geral de Usinas, Garantia, Growatt,
   Solplanet, Solis, SAJ). */
.toolbar-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; align-items: center; }

/* Input/select compacto de busca/filtro de toolbar — mesma casca visual em
   10+ campos, só variando min-width por campo (mantido inline, é o único
   valor que realmente muda de um campo pro outro). */
.input-sm { padding: .4rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: .85rem; }
/* Select de "itens por página" — só encolhe o select padrão (que é
   width:100% por padrão) pro tamanho do conteúdo. */
.select-sm { width: auto; padding: .3rem .5rem; }

/* Checkbox com rótulo em linha (ex.: "Mostrar só com alerta de string") —
   o <label> padrão do app é display:grid (empilhado), esse é o inline. */
.checkbox-inline { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--color-text-muted); }

/* Barra de paginação (rodapé de tabela): tamanho de página + contagem +
   botões anterior/próxima. Idêntica em Alertas, Base Cadastrada, Garantia
   e nas 5 listas de usinas (Growatt/Solplanet/Solis/SAJ/Geral). */
.pagination-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.pagination-size-label { display: flex; align-items: center; gap: .4rem; color: var(--color-text-muted); }
.pagination-controls { display: flex; gap: .5rem; align-items: center; }

/* Resultado de busca global (Ctrl+K) — antes o hover era feito via
   onmouseover/onmouseout no JS trocando this.style.background; agora é
   :hover puro em CSS, com transição. */
.global-search-item { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .5rem; border-radius: var(--radius-md); border: 0; background: transparent; cursor: pointer; color: var(--color-text); transition: background .15s ease; }
.global-search-item:hover, .global-search-item:focus-visible { background: var(--color-surface-2); }
/* V3 — ícone/ponto do resultado da busca global (ver executarBuscaGlobal) */
.global-search-item .gsi-ico { flex-shrink: 0; }
.global-search-item svg.gsi-ico { width: 15px; height: 15px; color: var(--color-text-muted); }

/* ========================================== */
/* PALETA DE IMPRESSÃO (templates de PDF)      */
/* Os relatórios (#relatorio-a4, #relatorio-   */
/* cliente-a4) são DOM real renderizado        */
/* offscreen e fotografado via html2canvas/    */
/* html2pdf — por isso PODEM usar var(). Mas   */
/* um PDF deve sair sempre no mesmo visual     */
/* claro/imprimível, então não usamos os       */
/* tokens --color-* (que trocam no tema        */
/* escuro): esta paleta fica travada, fora do  */
/* bloco [data-theme="dark"], e é a mesma usada */
/* pelo relatório de Garantia (jsPDF/autoTable, */
/* ver PDF_COLORS em src/modules/reporter.js). */
/* ========================================== */
:root {
  --pdf-primary: #1f7a2e;
  --pdf-primary-dark: #0b3b16;
  --pdf-primary-bright: #2e9e3f;
  --pdf-primary-light: #7bdc8a;
  --pdf-accent: #b9790a;
  --pdf-error: #c0392b;
  --pdf-text: #16241a;
  --pdf-text-muted: #666666;
  --pdf-text-faint: #888888;
  --pdf-border: #eeeeee;
  --pdf-border-green: #cfe0cf;
  --pdf-surface: #ffffff;
  --pdf-surface-tint: #f5f6f5;
  --pdf-surface-tint-green: #eef6ee;
  --pdf-track: #e6e8e5;
  --pdf-footer-bg: #0d0d0d;
  --pdf-divider: #e0e0e0;
  --pdf-text-soft: #444444;
  --pdf-primary-diagonal: #145c22;
  /* Cores extras pro relatório pro cliente (Indicadores > Relatório pro
     Cliente) — antes só "Economia" fugia do verde; cada métrica principal
     agora tem uma cor própria, pra ficar mais fácil de escanear visualmente
     e menos "tudo igual". Fixas (não têm variante escura) porque é sempre
     um documento impresso/PDF em fundo claro, nunca o tema escuro do app. */
  --pdf-blue: #1d5f8a;
  --pdf-blue-tint: #e7f1f8;
  --pdf-purple: #6b4fa0;
  --pdf-purple-tint: #f1ecf7;
  --pdf-accent-tint: #faf1e2;
}

/* "Tile" de estatística dentro do relatório pro cliente (Desempenho,
   Economia, Potência instalada, Período monitorado, Árvores, CO2, Energia
   limpa) — mesmo bloco visual repetido 7x com padding levemente diferente
   na seção de impacto. Variantes de cor (.pdf-stat-tile-accent/-blue/-purple)
   tingem fundo + valor juntos, pra cada métrica principal ter identidade
   visual própria em vez de tudo sair verde por padrão. */
.pdf-stat-tile { flex: 1; background: var(--pdf-surface-tint); border-radius: 9px; padding: 11px 13px; }
.pdf-stat-tile.pdf-stat-tile-sm { padding: 9px 12px; }
.pdf-stat-tile-accent { background: var(--pdf-accent-tint); }
.pdf-stat-tile-accent .pdf-stat-value { color: var(--pdf-accent); }
.pdf-stat-tile-blue { background: var(--pdf-blue-tint); }
.pdf-stat-tile-blue .pdf-stat-value { color: var(--pdf-blue); }
.pdf-stat-tile-purple { background: var(--pdf-purple-tint); }
.pdf-stat-tile-purple .pdf-stat-value { color: var(--pdf-purple); }
.pdf-stat-label { font-size: 11px; color: var(--pdf-text-muted); text-transform: uppercase; font-weight: 600; }
.pdf-stat-label.pdf-stat-label-sm { font-size: 10.5px; }
.pdf-stat-value { font-size: 19px; font-weight: 700; color: var(--pdf-primary); margin-top: 4px; }
.pdf-stat-value.pdf-stat-value-sm { font-size: 18px; margin-top: 3px; }

/* Banner de destaque pra "Economia total acumulada" — o número mais
   persuasivo do relatório (quanto o cliente já economizou desde a
   instalação, não só nos últimos 30 dias), então ganha um bloco full-width
   com mais peso visual em vez de dividir espaço com os outros 4 stats. */
.pdf-economia-total-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, var(--pdf-primary-dark), var(--pdf-primary));
  border-radius: 10px; padding: 14px 20px;
}
.pdf-economia-total-banner .pdf-economia-total-label { font-size: 11.5px; color: rgba(255,255,255,0.82); text-transform: uppercase; font-weight: 600; letter-spacing: .03em; }
.pdf-economia-total-banner .pdf-economia-total-valor { font-size: 26px; font-weight: 700; color: #ffffff; margin-top: 3px; }
.pdf-economia-total-banner .pdf-economia-total-hint { font-size: 10.5px; color: rgba(255,255,255,0.75); max-width: 190px; text-align: right; line-height: 1.4; }
.pdf-stat-hint { font-size: 10.5px; color: var(--pdf-text-faint); }

/* Sub-painel com cabeçalho (usado nas tabelas "MPPTs x PVs lado a lado" da
   Engenharia e do Perfil do Cliente — 4 ocorrências, 2 arquivos). */
.subpanel-box { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.subpanel-header { padding: .5rem 1rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface-offset); font-weight: 600; color: var(--color-primary); }
.subpanel-header.uppercase { font-size: .85rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .5px; }

/* ========================================== */
/* ASSISTENTE BETA IA — widget flutuante (v1: genérico/stateless)  */
/* Ver src/modules/assistente-beta.js. z-index abaixo do #loginOverlay */
/* (9999) de propósito — sem lógica extra de auth, o botão/painel já fica */
/* atrás do overlay de login enquanto ninguém autenticou. Acima do resto  */
/* do app pra nunca ficar encoberto por view nenhuma; abaixo de modal     */
/* (99999), toast (100000) e loader (100001) pra esses continuarem no topo. */
/* ========================================== */
.assistente-beta-fab {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 8000;
  width: 54px; height: 54px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md);
  transition: transform .15s ease, background .15s ease;
}
.assistente-beta-fab:hover { background: var(--color-primary-hover); transform: translateY(-2px); }
.assistente-beta-fab .icon { width: 24px; height: 24px; }
.assistente-beta-fab.aberto { display: none; }

.assistente-beta-painel {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 8000;
  width: min(380px, calc(100vw - var(--space-6))); height: min(560px, calc(100vh - var(--space-8)));
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden;
}
.assistente-beta-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface-2); flex-shrink: 0;
}
.assistente-beta-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--color-text); }
.assistente-beta-titulo .icon { color: var(--color-primary); }
.assistente-beta-badge { background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 600; }
.assistente-beta-fechar {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--color-text-muted);
  transition: background .15s ease, color .15s ease;
}
.assistente-beta-fechar:hover { background: var(--color-surface-hover); color: var(--color-text); }

.assistente-beta-mensagens {
  flex: 1; overflow-y: auto; padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.assistente-beta-msg {
  max-width: 85%; padding: .6rem .85rem; border-radius: var(--radius-lg);
  font-size: var(--text-sm); line-height: 1.5; word-break: break-word; white-space: pre-wrap;
}
.assistente-beta-msg-ia {
  align-self: flex-start; background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-divider);
}
.assistente-beta-msg-usuario {
  align-self: flex-end; background: var(--color-primary); color: #fff;
}
.assistente-beta-msg-erro {
  align-self: flex-start; background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
  color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
}
.assistente-beta-msg-badge { margin-top: .35rem; }
/* V5 — cursor "máquina de escrever" no fim da resposta da IA enquanto ela
   é revelada (ver adicionarMensagemIaTypewriter em assistente-beta.js). */
.assistente-beta-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 1px;
  vertical-align: -0.18em; background: var(--color-primary);
  animation: assistente-beta-caret 1s step-end infinite;
}
@keyframes assistente-beta-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .assistente-beta-caret { animation: none; opacity: 1; } }
/* Três pontinhos animados enquanto espera a resposta — mesma linguagem
   visual do .sync-dot (ponto + animação), sem inventar um spinner novo. */
.assistente-beta-digitando { display: inline-flex; gap: .25rem; align-self: flex-start; padding: .6rem .85rem; }
.assistente-beta-digitando span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-faint);
  animation: assistente-beta-piscar 1.1s ease-in-out infinite;
}
.assistente-beta-digitando span:nth-child(2) { animation-delay: .15s; }
.assistente-beta-digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes assistente-beta-piscar {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

.assistente-beta-form {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: var(--space-3); border-top: 1px solid var(--color-divider); flex-shrink: 0;
}
.assistente-beta-input {
  flex: 1; resize: none; max-height: 110px; min-height: 40px;
  padding: .55rem .75rem; font-size: var(--text-sm);
}
.assistente-beta-enviar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff; transition: background .15s ease, opacity .15s ease;
}
.assistente-beta-enviar:hover { background: var(--color-primary-hover); }
.assistente-beta-enviar:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 480px) {
  .assistente-beta-painel { right: var(--space-3); bottom: var(--space-3); left: var(--space-3); width: auto; }
  .assistente-beta-fab { right: var(--space-3); bottom: var(--space-3); }
}

/* ========================================== */
/* ORQUESTRADOR DE SINCRONIZAÇÃO GLOBAL        */
/* Ver src/modules/global-sync-service.js e o modal #modalSyncGlobal */
/* ========================================== */
.sync-global-barra-wrap {
  width: 100%; height: 8px; border-radius: var(--radius-full);
  background: var(--color-surface-offset); overflow: hidden;
}
.sync-global-barra {
  height: 100%; background: var(--color-primary);
  transition: width .3s ease;
}
.sync-global-resultados {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .4rem;
  max-height: 260px; overflow-y: auto;
}
.sync-global-resultados li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: var(--text-sm); padding: .4rem .6rem;
  border-radius: var(--radius-md); background: var(--color-surface-2);
}
.sync-global-resultados .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: .1rem; }
.sync-global-resultados li.ok .icon { color: var(--color-success); }
.sync-global-resultados li.erro .icon { color: var(--color-error); }
.sync-global-resultados li.pendente .icon { color: var(--color-text-faint); animation: ui-spin 1s linear infinite; }

/* ========================================== */
/* MODAL DE CONFIGURAÇÕES                      */
/* Ver src/modules/views/configuracoes.js e #modalConfiguracoes.          */
/* Conceito 4 (modal central) — nav de categorias + conteúdo, reaproveita */
/* .modal-overlay/.modal-content já existentes.                          */
/* ========================================== */
.config-modal-content { max-width: 760px; width: 100%; max-height: 82vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.config-modal-content .modal-header { padding: var(--space-5) var(--space-6); margin-bottom: 0; }
.config-modal-body { display: flex; flex: 1; min-height: 0; }
.config-nav {
  width: 220px; flex-shrink: 0; background: var(--color-surface-2);
  border-right: 1px solid var(--color-divider); padding: var(--space-3);
  display: flex; flex-direction: column; gap: .15rem; overflow-y: auto;
}
.config-nav-item {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .6rem .7rem; border-radius: var(--radius-md); font-size: var(--text-sm);
  color: var(--color-text-muted); transition: background .15s ease, color .15s ease;
}
.config-nav-item:hover { background: var(--color-surface-hover); color: var(--color-text); }
.config-nav-item.active { background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 600; }
.config-content { flex: 1; padding: var(--space-5) var(--space-6); overflow-y: auto; }
.config-painel { display: none; flex-direction: column; gap: var(--space-4); }
.config-painel.active { display: flex; }

.config-sync-lista { display: flex; flex-direction: column; gap: .6rem; }
.config-sync-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.config-sync-info { display: flex; flex-direction: column; gap: .15rem; }
.config-sync-row .small.subtle.erro { color: var(--color-error); }
.config-sync-row .small.subtle.ok { color: var(--color-success); }

.config-subsection { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.config-subsection:first-child { border-top: none; padding-top: 0; }
.config-subsection h4 { font-size: var(--text-base); margin: 0 0 .3rem; }
.config-subsection label.small { display: block; margin-top: .5rem; }

.config-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.config-toggle-switch {
  width: 40px; height: 22px; border-radius: 999px; background: var(--color-surface-offset);
  border: 1px solid var(--color-border); position: relative; flex-shrink: 0; transition: background .15s ease;
}
.config-toggle-switch::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
}
.config-toggle-switch[aria-checked="true"] { background: var(--color-primary); border-color: var(--color-primary); }
.config-toggle-switch[aria-checked="true"]::after { transform: translateX(18px); background: #fff; }

.config-info-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--color-divider);
}
.config-info-row:last-child { border-bottom: none; }

/* Cartão de perfil (26/08/2026) — Configurações > Conta & Acesso. Nome,
   avatar e setor juntos num bloco só (ver index.html); antes eram 3
   campos soltos, sensação de formulário técnico em vez de "seu perfil". */
.perfil-conta-card { display: flex; gap: 1rem; align-items: flex-start; padding-bottom: var(--space-3); }
.perfil-conta-avatar {
  width: 56px; height: 56px; border-radius: var(--radius-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; color: #fff;
  background: var(--color-primary); /* trocado por JS (cor derivada do nome/e-mail, ver corAvatar em configuracoes.js) */
}
.perfil-conta-info { flex: 1; min-width: 0; }
.perfil-conta-nome-row { display: flex; align-items: center; gap: .4rem; }
.perfil-conta-nome-input {
  font-size: 1.05rem; font-weight: 700; color: var(--color-text);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
  padding: .3rem .5rem; margin-left: -.5rem; width: 100%; max-width: 280px;
  transition: background .15s ease, border-color .15s ease;
}
.perfil-conta-nome-input:hover { background: var(--color-surface-2); }
.perfil-conta-nome-input:focus { background: var(--color-surface-2); border-color: var(--color-border); outline: none; }
.perfil-conta-setor-select { padding: .4rem .6rem; font-size: var(--text-sm); max-width: 260px; }
.config-paginacao-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-top: .75rem; }
.config-paginacao-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.config-paginacao-item span { font-size: var(--text-sm); color: var(--color-text-muted); }
.config-paginacao-item select, .config-paginacao-item input[type="number"] { width: 80px; padding: .35rem .5rem; font-size: var(--text-sm); }

@media (max-width: 640px) {
  .config-modal-body { flex-direction: column; }
  .config-nav { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--color-divider); }
}

/* .small é um utilitário de TEXTO (font-size + color: var(--color-text-muted),
   ver linha ~168) — usado em botões (.primary-btn/.danger-btn small) só pra
   pegar o tamanho compacto, mas sua cor cinza sobrescrevia o branco do
   primary-btn (ilegível em cima do verde) e o vermelho do danger-btn.
   Restaura a cor certa de cada botão, mantendo o tamanho de .small. */
.primary-btn.small { color: #fff; }
.danger-btn.small { color: var(--color-error); }
.secondary-btn.small { color: var(--color-text); }

/* ========================================== */
/* CARDS DA GARANTIA (Fase 6, substitui a tabela) */
/* Ver renderGarantiaTable em src/modules/views/garantia.js — geração     */
/* mensal e os 2 lançamentos (limite FIFO) ficam visíveis direto no card, */
/* clique abre o modal de histórico enriquecido (renderizarCorpoHistoricoGarantia). */
/* ========================================== */
.garantia-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.garantia-card {
  text-align: left; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.garantia-card:hover, .garantia-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.garantia-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.garantia-card-head h4 { font-size: var(--text-base); margin: 0; }
.garantia-card-mensal {
  background: var(--color-surface-2); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); padding: .65rem .8rem;
}
.garantia-card-mensal-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-faint); }
.garantia-card-mensal-valor { font-size: 1.3rem; font-weight: 800; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.garantia-card-mensal-bar { width: 100%; height: 6px; border-radius: var(--radius-full); background: var(--color-surface-offset); margin-top: .5rem; overflow: hidden; }
.garantia-card-mensal-bar span { display: block; height: 100%; background: var(--color-success); }
.garantia-card-mensal-bar.ruim span { background: var(--color-error); }
.garantia-card-lancs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.garantia-card-lanc-item { background: var(--color-surface-2); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); padding: .5rem .6rem; }
.garantia-card-lanc-kwh { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.garantia-card-empty { grid-column: 1/-1; font-size: var(--text-xs); color: var(--color-text-faint); text-align: center; padding: .6rem; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); }
.garantia-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .3rem; }
.garantia-card-acoes { display: flex; gap: .4rem; }

/* Resumo "informações maiores" no topo do modal de histórico */
.garantia-historico-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm);
}
/* Bloco "Impacto ambiental & energia" (CO2/árvores/clima/autoconsumo) —
   dado novo (19/08/2026), só aparece pra clientes Solis/SAJ com leitura
   recente. Título ocupa a largura toda do grid (grid-column: 1/-1). */
.garantia-historico-extras { position: relative; }
.garantia-extras-titulo {
  grid-column: 1 / -1; font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted);
  margin-bottom: calc(var(--space-2) * -1);
}

/* 24/08/2026: painel de Observações antigo (Pós-venda + Garantia) retirado
   — virou o Card do Cliente (cliente-modal.js), ver Anexos+Comentários. */
button.secondary-btn.active { background: var(--color-primary-highlight); color: var(--color-primary); border-color: var(--color-primary); }

/* ========================================== */
/* PERFIL DO CLIENTE — BARRA DE USINAS (22/08/2026, Modelo 5C) — cliente   */
/* com 2ª usina (marca2) ganha uma usina lateral em vez do antigo card    */
/* "2ª Usina" duplicado por inteiro; o painel de KPIs/gráfico/strings/     */
/* mensal/lançamentos é UM só, reaproveitado pra qualquer usina           */
/* selecionada (ver renderPainelUsinaAtiva em perfil-cliente.js).         */
/* ========================================== */
/* U1 (02/09/2026) — a troca de usina do cliente multi-usina saiu da COLUNA
   LATERAL de 216px (que espremia o conteúdo e cortava as colunas das
   tabelas) e virou um SELETOR SEGMENTADO no TOPO, largura inteira. O
   conteúdo agora usa toda a largura disponível. */
.perfil-usinas-layout { display: block; }
.perfil-usinas-layout.sem-2a-usina .perfil-usinas-sidebar { display: none; }
.perfil-usinas-sidebar {
  display: flex; flex-direction: row; gap: var(--space-2);
  margin-bottom: var(--space-4); position: static;
}
.usina-side-item {
  flex: 1; display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem;
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  background: var(--color-surface-2); cursor: pointer; min-width: 0;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.usina-side-item:hover { background: var(--color-surface-hover); }
.usina-side-item-active {
  background: var(--color-primary-highlight); border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.usina-side-item-active strong { color: var(--color-text); }
.usina-side-icon {
  width: 32px; height: 32px; border-radius: var(--radius-md); display: flex;
  align-items: center; justify-content: center; font-weight: 700;
  font-size: .75rem; color: #fff; flex-shrink: 0;
}
/* Resumo dos MPPTs + Entradas Físicas lado a lado (ver
   renderProfileStringsTable em perfil-cliente.js) — tinha grid inline no
   JS, virou classe pra poder ser overridada dentro do Card do Cliente
   (ver .ccard-main .profile-strings-grid acima). */
.profile-strings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; }
@media (max-width: 900px) {
  .perfil-usinas-layout { grid-template-columns: 1fr; }
  .perfil-usinas-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .usina-side-item { flex: 1; min-width: 160px; }
}

/* ========================================== */
/* CARD DO CLIENTE (24/08/2026) — ponto de entrada único do Pós-venda      */
/* ("Ver Perfil") e da Garantia (clique no card): mostra o Perfil/         */
/* Histórico real (DOM movido, não duplicado — ver cliente-modal.js) mais  */
/* Anexos e Comentários, tudo numa coluna só de largura cheia (24/08/2026: */
/* a coluna lateral de comentários foi removida — não fazia sentido com o  */
/* Perfil inteiro dentro do modal, denso demais pra dividir em 2 colunas). */
/* Reaproveita .modal-overlay já existente (overlay+animação), só troca o  */
/* conteúdo do .modal-content por essa estrutura própria, mais larga.      */
/* ========================================== */
.ccard-content { max-width: 1240px; width: 96vw; max-height: 90vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.ccard-header { padding: var(--space-4) var(--space-6) var(--space-3); border-bottom: 1px solid var(--color-divider); flex-shrink: 0; }
.ccard-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.ccard-title { font-size: var(--text-xl); font-weight: 700; line-height: 1.15; }
.ccard-sub { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 2px; }
.ccard-chip-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.ccard-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-xs); font-weight: 600; padding: .3rem .65rem; border-radius: var(--radius-full); }
.ccard-chip-marca { background: var(--color-accent-highlight); color: var(--color-accent-hover); }
.ccard-chip-slot2 { background: var(--color-surface-offset); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.ccard-chip-ok { background: var(--color-primary-highlight); color: var(--color-primary-hover); }
.ccard-chip-alertas { background: color-mix(in srgb, var(--color-error) 14%, var(--color-surface)); color: var(--color-error); }

.ccard-body { flex: 1; display: flex; min-height: 0; position: relative; }
.ccard-main { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
/* .kpi-grid/.panel-grid/.profile-strings-grid (Perfil do Cliente movido pra
   dentro do modal, ver cliente-modal.js) colapsam por media query de
   VIEWPORT, que não reflete a largura real do .ccard-main. Layout A
   (26/08/2026) tirou as duas colunas permanentes de 320px — .ccard-main
   ganhou bem mais espaço — mas manteve .perfil-usinas-layout com sua
   coluna fixa de 216px (usina-switcher sticky, ver .perfil-usinas-sidebar
   acima; pedido explícito do usuário — não virar linha horizontal de
   novo). Isso deixa o CONTEÚDO ao lado do switcher ainda relativamente
   estreito (~890px, não os ~1140px do .ccard-main inteiro) — larga o
   bastante pra 1 tabela, apertada pra 2 lado a lado. Por isso ainda força
   1-2 colunas aqui dentro (26/08/2026, 2ª rodada, depois do teste local
   ter pego "Entradas Físicas"/"Resumo dos MPPTs" com scroll horizontal). */
.ccard-main .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ccard-main .panel-grid { grid-template-columns: 1fr; }
.ccard-main .profile-strings-grid { grid-template-columns: 1fr; }
.ccard-section-title { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-3); }

/* Trilho de ícones (IA / Comentários) + gavetas flutuantes, 26/08/2026
   (Layout A — "Painel Amplo"). Antes eram 2 colunas permanentes de 320px
   (uma de cada lado) que espremiam o conteúdo principal; agora só o
   trilho de 52px é permanente, e cada gaveta abre por cima do conteúdo
   (position:absolute dentro de .ccard-body, que ganhou position:relative
   acima) em vez de dividir a largura disponível. Só uma gaveta aberta por
   vez — ver alternarGavetaCard em cliente-modal.js. */
.ccard-rail { width: 52px; flex-shrink: 0; border-left: 1px solid var(--color-divider); display: flex; flex-direction: column; align-items: center; padding-top: var(--space-4); gap: var(--space-2); }
.ccard-rail-btn { position: relative; width: 38px; height: 38px; border-radius: var(--radius-md); border: none; background: transparent; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease; }
.ccard-rail-btn:hover { background: var(--color-surface-offset); color: var(--color-text); }
.ccard-rail-btn.active { background: var(--color-primary-highlight); color: var(--color-primary-hover); }
.ccard-rail-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: var(--radius-full); background: var(--color-error); color: #fff; font-size: 9px; font-weight: 700; align-items: center; justify-content: center; }

.ccard-drawer { position: absolute; top: 0; right: 52px; bottom: 0; width: 420px; max-width: 88vw; background: var(--color-surface-2); border-left: 1px solid var(--color-divider); box-shadow: -16px 0 32px rgba(0,0,0,.28); display: flex; flex-direction: column; min-height: 0; transform: translateX(12px); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.ccard-drawer.active { transform: translateX(0); opacity: 1; pointer-events: auto; }
.ccard-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--color-divider); flex-shrink: 0; }
.ccard-drawer-title { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.ccard-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.ccard-drawer-body .ccard-analise-completa { background: transparent; border: none; padding: 0; margin-bottom: 0; }
.ccard-drawer-body #profileAdvisorCard { margin-top: 0 !important; }

.ccard-drawer .ccard-comments-list { flex: 1; overflow-y: auto; border: 0; border-radius: 0; background: transparent; padding: var(--space-4) var(--space-5); }
.ccard-drawer .ccard-comment-input { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-divider); flex-shrink: 0; }

/* Gaveta "Alertas da usina" (02/09/2026) — ver renderAlertasDaUsinaAtiva. */
.ccard-alertas-grupo { display: flex; flex-direction: column; gap: var(--space-2); }
.ccard-alertas-grupo + .ccard-alertas-grupo { margin-top: var(--space-4); }
.ccard-alertas-grupo-titulo { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--color-text-faint); }
.ccard-alerta-item { display: flex; gap: .6rem; padding: .6rem .7rem; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.ccard-alerta-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: .35rem; }
.ccard-alerta-msg { font-weight: 600; font-size: var(--text-sm); line-height: 1.35; }

.ccard-analise-completa { background: var(--color-surface-2); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.ccard-anexos-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.ccard-upload-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--color-primary); color: #fff; border-radius: var(--radius-md); padding: .5rem .85rem; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.ccard-anexo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); }
.ccard-anexo-tile { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); position: relative; }
.ccard-anexo-thumb { height: 76px; display: flex; align-items: center; justify-content: center; background: var(--color-surface-offset); }
.ccard-anexo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ccard-anexo-meta { padding: .3rem .5rem; }
.ccard-anexo-name { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard-anexo-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: var(--radius-full); background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s ease; }
.ccard-anexo-tile:hover .ccard-anexo-del { opacity: 1; }

.ccard-comments-list { display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.ccard-comment { display: flex; gap: .6rem; }
.ccard-avatar { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-primary-highlight); color: var(--color-primary-hover); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ccard-comment-name { font-size: var(--text-xs); font-weight: 700; }
.ccard-comment-time { font-size: 10px; color: var(--color-text-faint); margin-left: .4rem; font-weight: 400; }
.ccard-comment-text { font-size: var(--text-xs); color: var(--color-text); margin-top: .15rem; line-height: 1.4; white-space: pre-wrap; }
.ccard-comment-actions { display: flex; gap: .7rem; margin-top: .3rem; }
.ccard-comment-action { font-size: 10px; font-weight: 600; color: var(--color-text-faint); }
.ccard-comment-action:hover { color: var(--color-primary); }
.ccard-comment-edit textarea { width: 100%; font-size: var(--text-xs); font-family: inherit; resize: vertical; }
.ccard-comment-input textarea { width: 100%; height: 52px; font-size: var(--text-xs); font-family: inherit; resize: none; }

/* Estrela de usina favorita (26/08/2026) — cabeçalho do Card do Cliente. */
.ccard-favorita-ativa { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
.ccard-favorita-ativa:hover { color: var(--color-accent-hover); }

/* Menção (@Nome) em comentário, 26/08/2026 — ver cliente-modal.js
   (ligarAutocompleteMencao/renderizarTextoComentario) e src/notificacoes.js
   no Worker. */
.ccard-mention { background: var(--color-primary-highlight); color: var(--color-primary-hover); border-radius: var(--radius-sm); padding: .05rem .3rem; font-weight: 600; }
.ccard-mention-eu { background: var(--color-accent-highlight); color: var(--color-accent-hover); }
.mencao-sugestao:hover { background: var(--color-surface-hover); }

/* Sino de notificações (26/08/2026) — ver src/modules/notificacoes.js. */
.notif-item:hover { background: var(--color-surface-hover); }
.notif-item-unread { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.notif-item-unread::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-primary); flex-shrink: 0; margin-top: .4rem; }

@media (max-width: 900px) {
  .ccard-content { max-height: 94vh; }
  /* .ccard-body continua flex-row: .ccard-main + o trilho de 52px lado a
     lado (o trilho é fino, não compete por espaço). As gavetas já são
     position:absolute (fora do fluxo) — aqui só viram folha cheia em vez
     de flutuar a 420px, cobrindo a tela toda quando abertas. */
  .ccard-rail { width: 44px; padding-top: var(--space-3); }
  .ccard-drawer { right: 0; width: 100%; max-width: 100%; }
}

/* ==========================================
   ACESSIBILIDADE — respeitar "reduzir movimento" (01/09/2026)
   ==========================================
   Se o usuário marcou no sistema "reduzir animações" (acessibilidade,
   comum pra quem tem sensibilidade a movimento), o app corta transição/
   animação em vez de ignorar a escolha. Não some com nada: só troca o
   "desliza/aparece suave" por "muda na hora". Mesma filosofia de "motion
   com moderação" — movimento é opcional, nunca requisito pra a tela
   funcionar. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Selinho "ao vivo" (01/09/2026) — status consultado direto no fornecedor
   agora, sem passar pelo snapshot 2×/dia. Pisca devagar; a regra de
   prefers-reduced-motion acima zera a animação. */
.pill-aovivo {
  background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));
  color: var(--color-success);
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  animation: pulsoAoVivo 1.8s ease-in-out infinite;
}
@keyframes pulsoAoVivo {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* ===== Atualização visual "Refinado v2" (02/09/2026) ===== */

/* V6 — ícone da sidebar (estilo Unlumen Sidebar Toggle): o glifo é um painel
   com a divisória; ao recolher, a divisória "vira" pro outro lado (350 ms,
   cubic-bezier .4 0 .2 1). O collapse em si (largura da sidebar) já anima
   pela variável --sidebar-w. */
#toggleSidebar .icon { transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.app.collapsed #toggleSidebar .icon { transform: scaleX(-1); }

/* V11 — Dock: os ícones do canto direito do header aumentam no hover, num
   arco curto. Aditivo, não muda layout. */
.header-meta .icon-btn,
.header-meta #btnSino > .icon,
.header-meta button[data-theme-toggle] {
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), background .15s ease, color .15s ease;
}
.header-meta .icon-btn:hover { transform: translateY(-3px) scale(1.14); z-index: 2; }
.header-meta #btnSino:hover > .icon { transform: scale(1.06); }

/* V1 (02/09/2026, artboard Main.dc.html) — o cluster de ícones do header
   (sino · mensagens · meu perfil · configurações) num "dock" com fundo e
   borda, ícones sem moldura individual, magnify + tooltip no hover. */
.header-dock {
  display: flex; align-items: center; gap: 2px;
  padding: 3px 4px; border-radius: 10px;
  background: var(--color-surface-offset); border: 1px solid var(--color-border);
}
.header-dock > div, .header-dock > .icon-btn { position: relative; }
.header-dock .icon-btn { background: transparent; border: 0; width: 34px; height: 34px; }
.header-dock .icon-btn:hover { background: var(--color-surface-hover); transform: translateY(-4px) scale(1.16); }
/* tooltip a partir do aria-label — só no dock, não polui o resto */
.header-dock .icon-btn[aria-label]::after {
  content: attr(aria-label);
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: var(--color-text); color: var(--color-surface);
  font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 5px;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .14s ease; z-index: 70;
}
.header-dock .icon-btn:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .header-dock .icon-btn:hover { transform: none; }
}

/* Selinho / ponto "ao vivo" tri-estado (verde online · âmbar alerta ·
   vermelho offline) — pisca devagar. Reutilizável em qualquer tela. */
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 0 currentColor;
  animation: liveRing 1.7s ease-out infinite; flex-shrink: 0;
}
.live-dot.is-online  { color: var(--color-success); }
.live-dot.is-alerta  { color: var(--color-accent); }
.live-dot.is-offline { color: var(--color-error); }
@keyframes liveRing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%  { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* V7 — count-up dos KPIs: a classe .kpi-countup começa levemente esmaecida
   e sobe; o número em si é animado por JS (renderDashboardKpiCards). */
@keyframes kpiRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kpi-countup { animation: kpiRise .4s cubic-bezier(.22,.7,.3,1) both; }

/* V7 — skeleton de carregamento */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-offset) 25%,
    color-mix(in srgb, var(--color-text) 8%, var(--color-surface-offset)) 37%,
    var(--color-surface-offset) 63%);
  background-size: 400% 100%;
  animation: skeletonSlide 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes skeletonSlide { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* V7 — spinner no botão enquanto sincroniza */
.primary-btn.is-syncing .icon { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* V7 — chevron do submenu: o app já gira em .open (linhas ~93). Só suaviza a curva. */
.nav-parent-chevron { transition: transform .2s cubic-bezier(.22,.7,.3,1); }

/* V2 — sublinhado deslizante em barras de aba (.tab-underline no container,
   .is-active no item ativo). */
.tab-underline { position: relative; }
.tab-underline > .tab-ind {
  position: absolute; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--color-primary);
  transition: left .24s cubic-bezier(.2,.8,.3,1), width .24s cubic-bezier(.2,.8,.3,1);
}

/* V2 — entrada escalonada de listas */
@keyframes listaEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lista-stagger > * { animation: listaEntra .38s cubic-bezier(.22,.7,.3,1) both; }
.lista-stagger > *:nth-child(1) { animation-delay: .02s; }
.lista-stagger > *:nth-child(2) { animation-delay: .06s; }
.lista-stagger > *:nth-child(3) { animation-delay: .10s; }
.lista-stagger > *:nth-child(4) { animation-delay: .14s; }
.lista-stagger > *:nth-child(5) { animation-delay: .18s; }
.lista-stagger > *:nth-child(6) { animation-delay: .22s; }

/* V2 — marcador de aba ativa nos botões de sub-aba (.secondary-btn.active),
   com transição quando a classe troca. Aplica em Fornecedores, Central,
   Config etc. sem tocar no HTML de cada um. */
.secondary-btn { position: relative; transition: color .16s ease, background .16s ease; }
.secondary-btn::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--color-primary);
  transform: scaleX(0); transform-origin: center;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.secondary-btn.active::after { transform: scaleX(1); }

/* V11 — Motion Tabs na barra de Fornecedores: uma única barrinha que
   DESLIZA fisicamente até a aba ativa (posicionada por JS em
   setFornecedorSubTab), rola na horizontal quando não cabe. O ::after
   per-botão do V2 é desligado aqui pra não duplicar o sublinhado. */
.motion-tabs {
  position: relative; display: flex; gap: .5rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-divider);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  scroll-behavior: smooth;
}
.motion-tabs::-webkit-scrollbar { height: 4px; }
.motion-tabs::-webkit-scrollbar-thumb { background: var(--color-divider); border-radius: 2px; }
.motion-tabs > .secondary-btn { flex: 0 0 auto; white-space: nowrap; }
.motion-tabs > .secondary-btn::after { display: none; }
.motion-tabs > .secondary-btn:not(.active) { color: var(--color-text-muted); }
.motion-tabs-ind {
  position: absolute; bottom: -1px; left: 0; height: 2px; width: 0;
  background: var(--color-primary); border-radius: 2px 2px 0 0;
  transform: translateX(0); pointer-events: none;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .motion-tabs { scroll-behavior: auto; }
  .motion-tabs-ind { transition: none; }
}

/* V4 — caixa de comentário do Card do Cliente: o textarea cresce ao focar
   e o botão "Enviar" só aparece com foco na caixa (menos ruído quando
   não está escrevendo). */
.ccard-comment-input textarea {
  transition: min-height .2s cubic-bezier(.2, .8, .3, 1), border-color .15s ease;
  min-height: 42px;
}
.ccard-comment-input textarea:focus { min-height: 88px; }
.ccard-comment-input > div:last-child {
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0 !important;
  transition: max-height .22s cubic-bezier(.2, .8, .3, 1), opacity .18s ease, margin-top .2s ease;
}
.ccard-comment-input:focus-within > div:last-child,
.ccard-comment-input > div:last-child:hover {
  max-height: 44px; opacity: 1; margin-top: .4rem !important;
}