/* ═══════════════════════════════════════════════════════════════════ Portal do Cliente — Lenitech · Design system Tema claro/escuro via [data-tema] no ═══════════════════════════════════════════════════════════════════ */ :root { --fonte: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; --fundo: #f6f7f9; --superficie: #ffffff; --superficie-2: #f0f2f5; --borda: #e4e7ec; --texto: #1a212c; --texto-2: #5b6472; --texto-3: #98a1b0; --primaria: #4f46e5; --primaria-forte: #4338ca; --primaria-suave: #eef0fe; --ok: #16a34a; --ok-suave: #e8f7ee; --alerta: #d97706; --alerta-suave: #fdf3e3; --perigo: #dc2626; --perigo-suave: #fdeaea; --info: #0284c7; --info-suave: #e6f4fb; --raio: 12px; --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --sombra-alta: 0 12px 32px rgba(16, 24, 40, .16); } html[data-tema="escuro"] { --fundo: #101319; --superficie: #181c25; --superficie-2: #1f2430; --borda: #2a303d; --texto: #eceff4; --texto-2: #a4adbd; --texto-3: #6b7484; --primaria-suave: #262a4a; --ok-suave: #10301e; --alerta-suave: #33260e; --perigo-suave: #391616; --info-suave: #0e2a3a; --sombra: 0 1px 2px rgba(0, 0, 0, .4); --sombra-alta: 0 12px 32px rgba(0, 0, 0, .55); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--fonte); background: var(--fundo); color: var(--texto); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--primaria); text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: 14px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; padding: 9px 12px; outline: none; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); } /* ── Layout ─────────────────────────────────────────────── */ .app { display: flex; min-height: 100vh; } .sidebar { width: 248px; flex-shrink: 0; background: var(--superficie); border-right: 1px solid var(--borda); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-topo { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; } .sidebar-topo strong { display: block; font-size: 15px; } .sidebar-topo small { color: var(--texto-3); font-size: 11.5px; } .logo, .login-logo { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, var(--primaria), #8b5cf6); color: #fff; font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center; } .menu { flex: 1; padding: 4px 10px 16px; } /* Grupos recolhíveis */ .menu-grupo { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 4px); margin: 14px 2px 3px; padding: 4px 6px; background: none; border: none; border-radius: 6px; text-align: left; font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); transition: background .12s, color .12s; } .menu-grupo:hover { background: var(--superficie-2); color: var(--texto-2); } .chevron { font-size: 10px; transition: transform .2s ease; opacity: .7; } .grupo-itens { overflow: hidden; max-height: 420px; transition: max-height .24s ease, opacity .18s ease; } .grupo.recolhido .grupo-itens { max-height: 0; opacity: 0; } .grupo.recolhido .chevron { transform: rotate(-90deg); } /* Aviso de pendência quando o grupo está fechado */ .grupo.recolhido .menu-grupo.tem-badge::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--perigo); margin-left: 6px; flex-shrink: 0; } .menu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--texto-2); font-weight: 500; font-size: 14px; transition: background .12s, color .12s; } .menu a:hover { background: var(--superficie-2); color: var(--texto); } .menu a.ativo { background: var(--primaria-suave); color: var(--primaria); font-weight: 600; } /* Item dependente do de cima (ex.: Folha analítica sob RH e Folha) */ .menu a.submenu { margin-left: 14px; padding-left: 8px; font-size: 13px; border-left: 2px solid var(--borda); } .menu a.submenu.ativo { border-left-color: var(--primaria); } .badge { margin-left: auto; min-width: 19px; text-align: center; background: var(--perigo); color: #fff; border-radius: 20px; font-size: 11px; font-weight: 700; padding: 1px 6px; display: none; } .badge.on { display: inline-block; } .sidebar-rodape { padding: 12px 16px; border-top: 1px solid var(--borda); } .sidebar-rodape a { color: var(--texto-2); font-size: 13.5px; } .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ── Topbar ─────────────────────────────────────────────── */ .topo { display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 40; } .busca { flex: 1; max-width: 460px; position: relative; } .busca input { width: 100%; background: var(--superficie-2); border-color: transparent; } .busca-resultados { display: none; position: absolute; top: 44px; left: 0; right: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-alta); max-height: 340px; overflow-y: auto; z-index: 60; } .busca-resultados.on { display: block; } .busca-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--borda); color: var(--texto); cursor: pointer; } .busca-item:hover { background: var(--superficie-2); } .busca-item small { color: var(--texto-3); display: block; } /* Botão seletor de empresa (abre o modal de busca) */ .sel-empresa { display: flex; align-items: center; gap: 8px; max-width: 280px; padding: 8px 12px; background: var(--superficie-2); border: 1px solid transparent; border-radius: 9px; color: var(--texto); font-family: inherit; font-size: 13.5px; font-weight: 600; transition: border-color .12s, background .12s; } .sel-empresa:hover { border-color: var(--primaria); background: var(--primaria-suave); } .sel-empresa .emp-icone { flex-shrink: 0; } .sel-empresa .emp-nome { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sel-empresa .emp-seta { color: var(--texto-3); font-size: 11px; flex-shrink: 0; } .sel-empresa.unica .emp-seta { display: none; } /* Lista dentro do modal de troca */ .emp-lista { max-height: 340px; overflow-y: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 4px; } .emp-item { display: block; width: 100%; text-align: left; background: none; border: 1px solid var(--borda); border-radius: 9px; padding: 10px 13px; color: var(--texto); font-family: inherit; transition: background .1s, border-color .1s; } .emp-item:hover, .emp-item.marcado { background: var(--primaria-suave); border-color: var(--primaria); } .emp-item.atual { border-left: 3px solid var(--ok); } .emp-item-nome { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; } .emp-item small { color: var(--texto-3); font-size: 12px; } .emp-parcial { text-align: center; color: var(--texto-3); font-size: 12px; padding: 8px 0 2px; border-top: 1px dashed var(--borda); margin-top: 4px; } .btn-icone { width: 38px; height: 38px; border-radius: 9px; background: transparent; border: 1px solid transparent; font-size: 17px; position: relative; transition: background .12s; } .btn-icone:hover { background: var(--superficie-2); } .sino-wrap { position: relative; } .ponto { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--perigo); display: none; } .ponto.on { display: block; } .sino-painel { display: none; position: absolute; right: 0; top: 46px; width: 330px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-alta); overflow: hidden; z-index: 60; } .sino-painel.on { display: block; } .notif { padding: 11px 14px; border-bottom: 1px solid var(--borda); font-size: 13.5px; } .notif small { color: var(--texto-3); } .notif.nova { background: var(--primaria-suave); } .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primaria); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; } .faixa-demo { background: linear-gradient(90deg, #fbbf24, #f59e0b); color: #451a03; font-size: 13px; font-weight: 600; text-align: center; padding: 7px 16px; } .faixa-demo code { background: rgba(255,255,255,.4); padding: 1px 5px; border-radius: 4px; } /* ── Conteúdo ───────────────────────────────────────────── */ .conteudo { padding: 24px; max-width: 1240px; width: 100%; margin: 0 auto; animation: surgir .25s ease; } @keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .titulo-secao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .titulo-secao h1 { font-size: 22px; font-weight: 700; } .titulo-secao p { color: var(--texto-2); font-size: 13.5px; } .carregando { text-align: center; color: var(--texto-3); padding: 60px 0; } /* Cards */ .cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; margin-bottom: 22px; } .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); transition: transform .12s, box-shadow .12s; } .cartao.click { cursor: pointer; } .cartao.click:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); } .cartao .rotulo { font-size: 12.5px; color: var(--texto-2); font-weight: 600; display: flex; gap: 6px; align-items: center; } .cartao .valor { font-size: 24px; font-weight: 800; margin-top: 4px; } .cartao .sub { font-size: 12px; color: var(--texto-3); margin-top: 2px; } .cartao.perigo .valor { color: var(--perigo); } .cartao.alerta .valor { color: var(--alerta); } .cartao.ok .valor { color: var(--ok); } .painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 18px; } .painel h2 { font-size: 15.5px; font-weight: 700; margin-bottom: 12px; } .grade-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; } /* Tabelas */ .tabela-wrap { overflow-x: auto; } table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tabela th { text-align: left; padding: 9px 12px; color: var(--texto-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--borda); } .tabela td { padding: 11px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; } .tabela tr:last-child td { border-bottom: none; } .tabela tr:hover td { background: var(--superficie-2); } /* Etiquetas de status */ .tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .tag-ok { background: var(--ok-suave); color: var(--ok); } .tag-alerta { background: var(--alerta-suave); color: var(--alerta); } .tag-perigo { background: var(--perigo-suave); color: var(--perigo); } .tag-info { background: var(--info-suave); color: var(--info); } .tag-neutra { background: var(--superficie-2); color: var(--texto-2); } /* Botões */ .btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; border: 1px solid transparent; font-weight: 600; font-size: 13.5px; padding: 8px 15px; transition: filter .12s, background .12s; } .btn:hover { filter: brightness(1.06); } .btn-primario { background: var(--primaria); color: #fff; } .btn-suave { background: var(--primaria-suave); color: var(--primaria); } .btn-fantasma { background: transparent; border-color: var(--borda); color: var(--texto-2); } .btn-perigo { background: var(--perigo-suave); color: var(--perigo); } .btn-mini { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; } .btn-largo { width: 100%; justify-content: center; } /* Filtros */ .filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .filtros select, .filtros input { min-width: 140px; } /* ── Calendário ─────────────────────────────────────────── */ .cal-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .cal-nav strong { font-size: 17px; min-width: 170px; text-align: center; text-transform: capitalize; } .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-dia-nome { text-align: center; font-size: 11px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; padding: 4px 0; } .cal-dia { min-height: 92px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 9px; padding: 6px; font-size: 12px; } .cal-dia.fora { opacity: .38; } .cal-dia.hoje { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--primaria-suave); } .cal-dia .num { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; } .cal-evento { display: block; width: 100%; text-align: left; border: none; border-radius: 5px; padding: 2.5px 6px; margin-bottom: 3px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-alta { background: var(--perigo); } .ev-media { background: var(--alerta); } .ev-baixa { background: var(--info); } .ev-pago { background: var(--ok); opacity: .75; } /* ── Pendências / certidões / parcelamentos ─────────────── */ .lista-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .pend-topo { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 8px; } .pend-topo strong { font-size: 14.5px; } .progresso { height: 8px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; margin: 8px 0 4px; } .progresso > div { height: 100%; background: var(--primaria); border-radius: 6px; transition: width .4s; } /* ── Tarefas ────────────────────────────────────────────── */ .tarefa-linha { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--borda); cursor: pointer; } .tarefa-linha:hover { background: var(--superficie-2); } .tarefa-linha:last-child { border-bottom: none; } .tarefa-linha .info { flex: 1; min-width: 0; } .tarefa-linha .info strong { display: block; font-size: 14px; } .tarefa-linha .info small { color: var(--texto-3); } .timeline { margin: 14px 0; } .tl-item { display: flex; gap: 12px; padding-bottom: 14px; position: relative; } .tl-item::before { content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--borda); } .tl-item:last-child::before { display: none; } .tl-ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--primaria); flex-shrink: 0; margin-top: 4px; } .tl-corpo small { color: var(--texto-3); display: block; font-size: 12px; } /* ── Documentos ─────────────────────────────────────────── */ .pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; } .pasta { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; cursor: pointer; text-align: center; transition: transform .12s, box-shadow .12s; } .pasta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); } .pasta .icone { font-size: 26px; } .pasta strong { display: block; font-size: 13px; margin-top: 5px; } .pasta small { color: var(--texto-3); font-size: 11.5px; } .pasta.ativa { border-color: var(--primaria); background: var(--primaria-suave); } .zona-upload { border: 2px dashed var(--borda); border-radius: var(--raio); padding: 26px; text-align: center; color: var(--texto-2); margin-bottom: 18px; cursor: pointer; transition: border-color .15s, background .15s; } .zona-upload.sobre, .zona-upload:hover { border-color: var(--primaria); background: var(--primaria-suave); } /* ── Abas ───────────────────────────────────────────────── */ .abas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--borda); padding-bottom: 2px; } .aba { background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 14px; border-radius: 8px 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--texto-2); transition: color .12s, background .12s, border-color .12s; } .aba:hover { background: var(--superficie-2); color: var(--texto); } .aba.ativa { color: var(--primaria); border-bottom-color: var(--primaria); } /* Cabeçalho ordenável: a seta some para não competir com o rótulo, e só aparece de verdade na coluna que está ordenando */ .tabela th.fa-ord { cursor: pointer; user-select: none; white-space: nowrap; } .tabela th.fa-ord:hover { color: var(--primaria); } .tabela th.fa-ord.ativa { color: var(--primaria); } .fa-seta { margin-left: 4px; font-size: 9px; opacity: .35; } .tabela th.fa-ord.ativa .fa-seta { opacity: 1; } .tabela th.fa-ord:hover .fa-seta { opacity: .8; } /* Competência dentro do detalhe de um funcionário */ .fa-comp { margin-bottom: 10px; } .fa-comp > summary { font-size: 14px; padding: 7px 2px; } .fa-comp > summary > span:first-of-type { margin-right: auto; } .fa-comp-liq { font-weight: 500; font-size: 13px; color: var(--texto-2); } /* "Carregar todos" no rodapé do detalhe: o aviso e o botão na mesma linha, quebrando no celular */ .fa-mais { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } /* Barra de geração em lote, no rodapé de um detalhe aberto */ .fa-lote { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda); } .fa-lote > .sub:first-child { margin-right: 2px; } /* O rótulo do multi mostra nome e cargo em duas alturas: com 40 homônimos, o cargo é o que desempata */ .multi-lista label .sub { display: block; margin-left: 22px; font-size: 11.5px; } /* Aviso em linha, dentro de uma visão — nem toast (some) nem modal (interrompe) */ .fa-aviso { padding: 11px 14px; margin-bottom: 12px; border-radius: 10px; background: var(--alerta-suave); border: 1px solid var(--borda); font-size: 13.5px; color: var(--texto); } .fa-aviso ul { margin: 6px 0 0 18px; } /* ── Líquidos: quadro de pagamento ──────────────────────── */ .fa-pag { margin-bottom: 14px; } /* O carrega o resumo: recolhido, ele já responde "falta alguém para pagar?". O título e o resumo se separam nas pontas e quebram no celular. */ .fa-pag > summary { font-size: 15px; padding: 4px 2px; flex-wrap: wrap; } .fa-pag > summary > span:first-of-type { margin-right: auto; } .fa-pag-resumo { font-weight: 500; font-size: 13px; color: var(--texto-2); } .fa-pag-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 10px 0 12px; } .fa-pag-btns { display: flex; gap: 8px; flex-wrap: wrap; } .fa-pag-alerta { color: var(--alerta); font-weight: 600; } /* Os dois botões de copiar ficam lado a lado e não quebram: quem paga alterna entre eles e o banco dezenas de vezes seguidas */ .fa-pag-copiar { white-space: nowrap; } .fa-pag-copiar .btn { margin-right: 4px; font-variant-numeric: tabular-nums; } .tabela tr.fa-pg-ok > td { background: var(--ok-suave, rgba(34,197,94,.07)); } /* Filtro de colunas da visão por dia — em linha, acima da tabela */ .pt-filtro-col { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--borda); font-size: 13px; } .pt-chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .pt-chk input { margin: 0; } /* Visão por dia: a linha inteira é clicável, e o dia sem ponto nenhum fica apagado para a vista pular direto para os que têm conteúdo */ .pt-dia-tabela tr[data-dia] { cursor: pointer; } .pt-dia-tabela tr[data-dia]:hover > td { background: var(--superficie-2); } .pt-dia-tabela tr.aberta > td { background: var(--primaria-suave); } .pt-dia-tabela tr.pt-dia-vazio > td { color: var(--texto-3); } .pt-dia-det > td { background: var(--superficie-2); padding: 12px 14px; } .pt-dia-det .tabela { font-size: 12.5px; background: var(--superficie); } .pt-dia-det .tabela th { font-size: 11px; } /* Feriados da competência — em destaque, porque é o que explica um mês com menos dias úteis do que se esperava */ .pt-feriados { margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ok-suave); border: 1px solid var(--borda); font-size: 13.5px; } .pt-feriados.vazia { background: var(--superficie-2); } .pt-feriados .sub { display: block; margin-top: 2px; } .pt-feriados-lista { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; } .pt-feriado-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; background: var(--superficie); border: 1px solid var(--borda); } /* ── Ponto: barra de fechamento e edição em lote ────────── */ .pt-fechamento { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 14px 16px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); } .pt-fechamento .sub { margin-top: 3px; max-width: 62ch; } .pt-fechamento-btns { display: flex; gap: 8px; flex-wrap: wrap; } /* A barra de lote fica GRUDADA no topo da lista rolável: com 40 funcionários, marcar lá embaixo e ter de rolar de volta para aplicar é o caminho do erro */ .pt-lote { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); } .pt-lote > b { font-size: 13px; color: var(--texto-2); padding-bottom: 7px; } .pt-lote .pt-campo { margin: 0; } /* Modal de espera: sem botão de fechar, porque fechar não cancela o trabalho */ .pt-progresso { text-align: center; padding: 22px 10px 6px; } .pt-progresso .spinner { margin: 0 auto; width: 34px; height: 34px; } .pt-progresso .modal-sub { max-width: 46ch; margin-inline: auto; } /* ── Formulários em grade (modais de cadastro) ──────────── */ .form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .form-grade label { min-width: 0; } @media (max-width: 560px) { .form-grade { grid-template-columns: 1fr; } } .check-linha { display: flex; gap: 14px; flex-wrap: wrap; } .check-linha label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; font-size: 13px; text-transform: capitalize; } .check-linha input[type="checkbox"] { width: auto; margin: 0; } .modal textarea { font-family: inherit; resize: vertical; } .modal textarea[readonly] { font-family: ui-monospace, monospace; font-size: 12px; } /* ── Subobrigações ──────────────────────────────────────── */ .ob-linha.ob-sub { padding-left: 26px; background: var(--superficie-2); border-left: 2px solid var(--borda); } .ob-linha.ob-sub .info strong { font-size: 13.5px; font-weight: 600; } .linha-sub td:first-child { padding-left: 26px; } .linha-inativa { opacity: .55; } /* ── Painel de responsáveis ─────────────────────────────── */ .rs-empresa h2 { font-size: 15px; } .rs-linhas { display: flex; flex-direction: column; gap: 4px; } .rs-linha { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(140px, 190px) 84px 84px 34px; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; transition: background .15s; } .rs-linha:hover { background: var(--superficie-2); } .rs-linha.sem-resp { background: var(--alerta-suave); } .rs-linha.salvando { opacity: .55; } .rs-linha.salvo { background: var(--ok-suave); } .rs-linha.rs-sub .rs-nome { padding-left: 14px; } .rs-nome { min-width: 0; } .rs-nome strong { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-nome small { color: var(--texto-3); font-size: 11.5px; } .rs-linha select, .rs-linha input[type="text"], .rs-linha .rs-ini, .rs-linha .rs-fim { font-size: 12.5px; padding: 5px 7px; min-width: 0; width: 100%; } .rs-linha input[type="checkbox"] { width: auto; margin: 0; } .check-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--texto-2); font-weight: 500; } .check-inline input { width: auto; margin: 0; } @media (max-width: 780px) { .rs-linha { grid-template-columns: 22px 1fr; gap: 6px; } .rs-linha select, .rs-linha .rs-ini, .rs-linha .rs-fim, .rs-linha .rs-hist { grid-column: 2; } } /* ── Panorama do escritório ─────────────────────────────── */ .pn-card.com-atraso { border-left: 3px solid var(--perigo); } .pn-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; margin-top: 4px; } .pn-numeros > div { background: var(--superficie-2); border-radius: 8px; padding: 7px 3px; } .pn-n { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; } .pn-numeros small { font-size: 10.5px; color: var(--texto-3); } .dt-lista { max-height: 52vh; overflow-y: auto; } .dt-contagem { font-size: 12.5px; color: var(--texto-3); padding: 2px 2px 8px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; } /* ── Fila de sincronização ──────────────────────────────── */ .fila-vazia { text-align: center; color: var(--texto-2); font-size: 13.5px; } .fila-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--borda); } .fila-item:last-child { border-bottom: none; } .fila-item .info { flex: 1; min-width: 0; } .fila-item .info strong { display: block; font-size: 14px; } .fila-item .info small { color: var(--texto-3); } .fila-spin { width: 22px; text-align: center; flex-shrink: 0; } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--primaria-suave); border-top-color: var(--primaria); border-radius: 50%; animation: girar .8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* ── Aviso informativo ──────────────────────────────────── */ .aviso-info { background: var(--info-suave); color: var(--texto-2); border-left: 3px solid var(--info); border-radius: 8px; padding: 11px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.6; } .aviso-info code { background: var(--superficie); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; } /* Campo "por página" dentro dos filtros */ .fe-porpag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); font-weight: 500; } .fe-porpag input { width: 64px; min-width: 0; } /* ── Seleção em lote ────────────────────────────────────── */ .barra-lote { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--primaria-suave); border: 1px solid var(--primaria); border-radius: var(--raio); padding: 11px 15px; margin-bottom: 14px; } .barra-lote strong { color: var(--primaria); font-size: 13.5px; } .lote-log { max-height: 260px; overflow-y: auto; margin: 12px 0; border: 1px solid var(--borda); border-radius: 9px; padding: 8px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; } .lote-item { padding: 4px 7px; border-radius: 5px; } .lote-item.ok { background: var(--ok-suave); color: var(--ok); } .lote-item.erro { background: var(--perigo-suave); color: var(--perigo); } /* ── Modelo de mensagem ─────────────────────────────────── */ .marcadores { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .marcador { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 6px; padding: 4px 9px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--primaria); } .marcador:hover { border-color: var(--primaria); background: var(--primaria-suave); } #ml-texto { width: 100%; font-family: inherit; font-size: 13.5px; line-height: 1.6; resize: vertical; } .previa-zap { background: #dcf8c6; color: #111b21; border-radius: 12px 12px 12px 4px; padding: 13px 15px; white-space: pre-wrap; font-size: 14px; line-height: 1.5; margin: 10px 0; max-height: 400px; overflow-y: auto; } /* ── Paginação ──────────────────────────────────────────── */ .paginacao { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 8px 4px; font-size: 13px; color: var(--texto-2); flex-wrap: wrap; } .abas-sub { margin-bottom: 12px; } /* ── De/para de colunas (módulo Dados) ──────────────────── */ .mapa-colunas { display: flex; flex-direction: column; gap: 9px; margin: 8px 0; } .mapa-linha { display: flex; flex-direction: column; gap: 5px; } .mapa-par { display: flex; align-items: center; gap: 8px; } .mapa-par select { flex: 1; min-width: 0; font-size: 13px; padding: 7px 9px; } .mapa-seta { color: var(--texto-3); font-weight: 700; flex-shrink: 0; } .mapa-par .mp-x, .mapa-par .mp-lk { flex-shrink: 0; padding: 5px 9px; } /* Painel de conversão de referência (FK lookup) */ .mapa-lookup { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 6px; padding: 8px 11px; background: var(--info-suave); border-left: 3px solid var(--info); border-radius: 8px; font-size: 12px; color: var(--texto-2); } .mapa-lookup select { font-size: 12px; padding: 5px 7px; min-width: 90px; } .modal code, .cartao code { background: var(--superficie-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; font-family: ui-monospace, monospace; } /* ── Notícias (iframe) ──────────────────────────────────── */ .iframe-wrap { padding: 0; overflow: hidden; } .iframe-wrap iframe { display: block; width: 100%; border: 0; background: #fff; height: calc(100vh - 190px); min-height: 480px; } /* ── Chat IA ────────────────────────────────────────────── */ .chat { display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 420px; } .chat-msgs { flex: 1; overflow-y: auto; padding: 8px 4px; display: flex; flex-direction: column; gap: 12px; } .msg { max-width: 78%; padding: 11px 15px; border-radius: 14px; white-space: pre-wrap; font-size: 14px; } .msg.eu { align-self: flex-end; background: var(--primaria); color: #fff; border-bottom-right-radius: 4px; } .msg.ia { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borda); border-bottom-left-radius: 4px; } .msg.digitando { color: var(--texto-3); font-style: italic; } .chat-sugestoes { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0; } .chat-sugestoes button { background: var(--superficie); border: 1px solid var(--borda); border-radius: 20px; padding: 6px 13px; font-size: 12.5px; color: var(--texto-2); } .chat-sugestoes button:hover { border-color: var(--primaria); color: var(--primaria); } .chat-entrada { display: flex; gap: 10px; padding-top: 10px; } .chat-entrada input { flex: 1; } /* ── Modal ──────────────────────────────────────────────── */ .modal-fundo { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(10, 14, 22, .55); backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 18px; } .modal-fundo.on { display: flex; } .modal { background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra-alta); position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 24px; animation: surgir .18s ease; } .modal h3 { font-size: 17px; margin-bottom: 4px; } .modal .modal-sub { color: var(--texto-2); font-size: 13px; margin-bottom: 14px; } .modal label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; } .modal input, .modal textarea, .modal select { width: 100%; } .modal.largo { max-width: 840px; } .modal-fechar { position: absolute; top: 14px; right: 14px; background: var(--superficie-2); border: none; width: 30px; height: 30px; border-radius: 8px; color: var(--texto-2); } .modal-acoes { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .detalhe-linha { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; } .detalhe-linha span:first-child { color: var(--texto-2); } .detalhe-linha:last-child { border-bottom: none; } /* ── Toasts ─────────────────────────────────────────────── */ .toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--texto); color: var(--fundo); padding: 11px 17px; border-radius: 10px; font-size: 13.5px; font-weight: 600; box-shadow: var(--sombra-alta); animation: surgir .2s ease; } .toast.ok { background: var(--ok); color: #fff; } .toast.erro { background: var(--perigo); color: #fff; } /* ── Login ──────────────────────────────────────────────── */ .tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, #eef0fe 0%, #f6f7f9 45%, #ede9fe 100%); padding: 18px; } .login-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra-alta); padding: 34px; width: 100%; max-width: 400px; text-align: center; } .login-card .login-logo { margin: 0 auto 14px; width: 52px; height: 52px; font-size: 26px; border-radius: 14px; } .login-card h1 { font-size: 21px; } .login-sub { color: var(--texto-2); font-size: 13.5px; margin: 6px 0 20px; } .login-card form { text-align: left; } .login-card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; } .login-card input { width: 100%; margin-top: 4px; } .login-card .btn { margin-top: 6px; } .login-demo { margin-top: 10px; } .login-erro { background: var(--perigo-suave); color: var(--perigo); border-radius: 9px; padding: 10px 13px; font-size: 13px; margin-bottom: 14px; } .login-rodape { margin-top: 18px; font-size: 12.5px; color: var(--texto-3); } /* ── Responsivo ─────────────────────────────────────────── */ .so-mobile { display: none; } .sidebar-fundo { display: none; } @media (max-width: 900px) { .so-mobile { display: inline-flex; } .sidebar { position: fixed; left: 0; top: 0; z-index: 90; height: 100vh; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--sombra-alta); } .sidebar.aberta { transform: none; } .sidebar-fundo.on { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(10, 14, 22, .45); } .grade-2 { grid-template-columns: 1fr; } .conteudo { padding: 16px; } .sel-empresa { max-width: 140px; } .busca { max-width: none; } .cal-dia { min-height: 64px; } .msg { max-width: 92%; } } @media (max-width: 560px) { .cartoes { grid-template-columns: repeat(2, 1fr); } .cal-grade { gap: 3px; } .cal-evento { font-size: 9px; padding: 1.5px 3px; } .topo { padding: 10px 12px; gap: 8px; } } /* ── Importação de PDF ───────────────────────────────────── */ .imp-resumo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .imp-chip { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); font-size: 13px; font-weight: 600; color: var(--texto-2); cursor: pointer; transition: border-color .12s, color .12s; } .imp-chip:hover { border-color: var(--primaria); color: var(--texto); } .imp-chip.ativo { border-color: var(--primaria); color: var(--primaria); } .imp-chip b { font-size: 15px; } .imp-conf { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .imp-barra { width: 46px; height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; } .imp-barra i { display: block; height: 100%; border-radius: 3px; } /* Conferência: prévia do PDF ao lado dos campos */ .imp-conferir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; } .imp-previa { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; padding: 8px; max-height: 62vh; overflow: auto; text-align: center; } .imp-previa img { max-width: 100%; border-radius: 6px; box-shadow: var(--sombra); } @media (max-width: 860px) { .imp-conferir { grid-template-columns: 1fr; } } /* Editor visual de modelos */ .ed-grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; } @media (max-width: 1000px) { .ed-grade { grid-template-columns: 1fr; } } .ed-palco { position: relative; display: inline-block; line-height: 0; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; cursor: crosshair; user-select: none; max-width: 100%; } .ed-palco img { display: block; width: 100%; height: auto; } .ed-caixa { position: absolute; border: 2px solid var(--primaria); background: color-mix(in srgb, var(--primaria) 14%, transparent); border-radius: 3px; pointer-events: none; } .ed-caixa span { position: absolute; top: -19px; left: -2px; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 4px; white-space: nowrap; background: var(--primaria); color: #fff; } .ed-caixa.desenhando { border-style: dashed; } .ed-campos { display: flex; flex-direction: column; gap: 10px; } .ed-campo { border: 1px solid var(--borda); border-radius: 9px; padding: 10px; background: var(--superficie); display: flex; flex-direction: column; gap: 7px; } .ed-campo.sel { border-color: var(--primaria); } .ed-campo-topo { display: flex; align-items: center; gap: 8px; } .ed-campo-topo select, .ed-campo-topo input { font-size: 12.5px; padding: 6px 8px; } .ed-lido { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--superficie-2); border-radius: 6px; padding: 6px 8px; color: var(--texto-2); word-break: break-word; min-height: 28px; white-space: pre-wrap; } .ed-lido.vazio { color: var(--perigo); } .ed-dica { font-size: 12px; color: var(--texto-3); line-height: 1.5; } /* ── RH: ficha do funcionário ────────────────────────────── */ .rh-cabeca { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; } .rh-avatar { width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--superficie-2); color: var(--texto-2); font-size: 21px; font-weight: 700; object-fit: cover; } .rh-cabeca h2 { margin: 0 0 3px; font-size: 19px; } .rh-cabeca .sub { margin: 0; } .rh-cabeca-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .rh-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; } @media (max-width: 900px) { .rh-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .rh-grade { grid-template-columns: 1fr; } } .rh-grade label { min-width: 0; } .rh-grade input:disabled, .rh-grade select:disabled, .rh-grade textarea:disabled { background: var(--superficie-2); color: var(--texto); opacity: 1; border-color: transparent; cursor: default; } .rh-secao { margin-bottom: 8px; } .rh-secao > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 10px 2px; list-style: none; display: flex; align-items: center; gap: 7px; } .rh-secao > summary::-webkit-details-marker { display: none; } .rh-secao > summary::before { content: '▸'; color: var(--texto-3); transition: transform .15s; } .rh-secao[open] > summary::before { transform: rotate(90deg); } .rh-vazio { color: var(--texto-3); font-style: italic; } .rh-linha-total { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; } .rh-linha-total.forte { font-weight: 700; border-top: 1px solid var(--borda); margin-top: 4px; } /* ── Folha analítica ─────────────────────────────────────── */ .fa-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; margin-bottom: 16px; padding: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; } .fa-filtros label { margin: 0; font-size: 12px; color: var(--texto-2); } .fa-filtros label > * { margin-top: 4px; } .fa-acoes { display: flex; gap: 8px; align-items: end; } .fa-grafico { position: relative; height: 260px; } .fa-barra-pct { height: 5px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; margin-top: 4px; min-width: 60px; } .fa-barra-pct i { display: block; height: 100%; border-radius: 3px; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .desconto { color: var(--perigo); } /* Rodapé de totais: fica preso ao rolar a tabela na horizontal e não some junto com o hover das linhas. */ .tabela tfoot td { background: var(--superficie-2); border-top: 2px solid var(--borda); border-bottom: none; font-size: 13.5px; } .tabela tfoot tr:hover td { background: var(--superficie-2); } /* Lançamento informativo (prov_desc = I): não compõe o líquido */ .tabela tr.fa-info > td:not(.desconto) { color: var(--texto-2); } /* Opções do diálogo de exportação */ .fa-op-linha { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; } label.fa-op { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; cursor: pointer; padding: 5px 9px; border: 1px solid var(--borda); border-radius: 8px; } label.fa-op:hover { border-color: var(--primaria); } label.fa-op input { width: auto; margin: 0; flex-shrink: 0; } label.fa-op:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); color: var(--primaria); } /* Linha que abre detalhe dentro da própria tabela (folha analítica) */ .tabela tr[data-det] { cursor: pointer; } .tabela tr[data-det]:hover > td { background: var(--superficie-2); } .tabela tr[data-det] > td:first-child { position: relative; padding-left: 18px; } .tabela tr[data-det] > td:first-child::before { content: '▸'; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); color: var(--texto-3); transition: transform .15s, color .15s; } .tabela tr[data-det].aberta > td { background: var(--primaria-suave); } .tabela tr[data-det].aberta > td:first-child::before { transform: translateY(-50%) rotate(90deg); color: var(--primaria); } .tabela tr.fa-det > td { background: var(--superficie-2); padding: 14px 16px; border-top: 0; box-shadow: inset 0 1px 0 var(--borda); } .tabela tr.fa-det .tabela { font-size: 12.5px; background: var(--superficie); } .tabela tr.fa-det .tabela th { font-size: 11px; } /* ── Ponto/Eventos ───────────────────────────────────────── */ .pt-barra { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; } .pt-barra label { margin: 0; font-size: 12px; color: var(--texto-2); font-weight: 600; } .pt-barra label > input { margin-top: 4px; } .pt-barra-acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pt-barra-acoes .sub { white-space: nowrap; } /* A grade do mês é densa de propósito: 31 linhas têm de caber numa tela sem rolagem infinita, e quem preenche o ponto vai de campo em campo com Enter. */ .pt-wrap { padding: 0; } table.pt-tabela { font-size: 13px; } .pt-tabela th { padding: 8px 6px; font-size: 10.5px; } .pt-tabela td { padding: 3px 6px; } .pt-tabela tr:hover > td { background: transparent; } input.pt-hora { width: 66px; padding: 5px 6px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; border-radius: 6px; margin: 0; } input.pt-obs { width: 100%; min-width: 120px; padding: 5px 8px; font-size: 12.5px; margin: 0; } /* Intervalos: cabem dois pares ("12:00-13:00, 22:53-23:08") sem quebrar; se o dia tiver mais, o campo rola — alargar a coluna custaria as 31 linhas. */ input.pt-intervalos { width: 100%; min-width: 130px; padding: 5px 6px; font-size: 12px; font-variant-numeric: tabular-nums; border-radius: 6px; margin: 0; } input.pt-intervalos:disabled { background: transparent; border-color: transparent; color: var(--texto-2); } select.pt-tipo { padding: 5px 6px; font-size: 12.5px; min-width: 110px; margin: 0; } input.pt-hora:disabled, input.pt-obs:disabled, select.pt-tipo:disabled { background: transparent; border-color: transparent; color: var(--texto-2); } /* Valor digitado por cima do cálculo — quem confere precisa ver quais são */ input.pt-hora.pt-manual { border-color: var(--primaria); background: var(--primaria-suave); font-weight: 600; } .pt-dia { white-space: nowrap; } .pt-dia .sub { margin-left: 5px; text-transform: uppercase; font-size: 10.5px; } .pt-nome-feriado { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; } .pt-sabado > td { background: var(--superficie-2); } .pt-domingo > td { background: var(--superficie-2); } .pt-domingo .pt-dia b, .pt-sabado .pt-dia b { color: var(--texto-2); } .pt-feriado > td { background: var(--primaria-suave); } .pt-feriado .pt-dia b, .pt-feriado .pt-nome-feriado { color: var(--primaria); } textarea.pt-comentario { width: 100%; resize: vertical; font-family: inherit; } /* Alertas do mês: teto de 44h e domingo compensado */ #pt-alertas:empty { display: none; } #pt-alertas { margin: 0 0 14px; } .pt-alerta, .pt-nota { padding: 9px 13px; border-radius: 10px; margin-top: 8px; font-size: 13px; background: var(--superficie); border: 1px solid var(--borda); } .pt-alerta { border-left: 3px solid var(--alerta); } .pt-nota { border-left: 3px solid var(--primaria); color: var(--texto-2); } /* Rótulo em cima do campo mesmo dentro de uma linha flex — no modal, um input de largura fixa fica ao lado do texto e a leitura se perde. */ label.pt-campo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; font-size: 12px; color: var(--texto-2); } /* Fila de importação: cada arquivo é um cartão empilhado */ .pt-fila-item { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 8px; background: var(--superficie-2); } .pt-fila-item.ruim { border-left: 3px solid var(--perigo); } .pt-fila-item:last-child { margin-bottom: 0; } .pt-fila-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .pt-fila-topo b { flex-shrink: 0; } .pt-fila-topo button { margin-left: auto; } .pt-fila-item .fa-barra-pct { margin: 6px 0 3px; } .pt-fila-nomes { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; } .pt-fila-nomes > * { margin: 0; flex: 1 1 220px; } /* A leitura em andamento pulsa de leve — sem isso a tela parece parada */ .pt-fila-and .fa-barra-pct i { animation: pt-pulsa 1.6s ease-in-out infinite; } @keyframes pt-pulsa { 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .pt-fila-and .fa-barra-pct i { animation: none; } } .pt-imp-ok, .pt-imp-erro { padding: 7px 10px; border-radius: 8px; font-size: 13px; margin-bottom: 6px; border-left: 3px solid var(--sucesso); background: var(--superficie-2); } .pt-imp-erro { border-left-color: var(--perigo); } .pt-imp-ok a { margin-left: 6px; } @media (max-width: 900px) { .pt-barra-acoes { margin-left: 0; width: 100%; } input.pt-hora { width: 58px; } input.pt-intervalos { min-width: 112px; } } /* ── Menu lateral recolhido ────────────────────────────────── Recolher esconde a barra INTEIRA e devolve a largura ao conteúdo — é o que se espera de "recolher o menu". O mesmo botão da barra superior (☰) faz os dois papéis: no desktop recolhe/expande; no celular, onde a barra já é off-canvas, abre e fecha a gaveta. */ /* Só no desktop. No celular a barra é uma gaveta off-canvas — se a regra valesse lá, recolher no desktop e diminuir a janela deixaria a gaveta impossível de abrir. */ @media (min-width: 901px) { .app.menu-recolhido .sidebar { display: none; } } /* ── Seleção múltipla (folha analítica) ──────────────────── */ .multi { position: relative; } .multi-botao { width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 6px; background: var(--fundo-campo, var(--superficie)); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; padding: 9px 10px; font-family: inherit; font-size: 13.5px; } .multi-botao:hover { border-color: var(--primaria); } .multi-botao .cnt { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--primaria-suave); color: var(--primaria); border-radius: 20px; padding: 1px 7px; } .multi-botao .seta { color: var(--texto-3); font-size: 10px; } .multi-painel { display: none; position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: 320px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra-alta); padding: 8px; } .multi.aberto .multi-painel { display: block; } .multi-painel input[type="search"], .multi-painel input[type="text"] { width: 100%; margin: 0 0 6px; font-size: 13px; padding: 7px 9px; } .multi-lista { max-height: 240px; overflow-y: auto; } .multi-lista label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 6px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; text-transform: none; } .multi-lista label:hover { background: var(--superficie-2); } .multi-lista input { width: auto; margin: 0; flex-shrink: 0; } .multi-lista .vazio { color: var(--texto-3); font-size: 12.5px; padding: 8px 6px; } .multi-acoes { display: flex; gap: 6px; padding-top: 7px; margin-top: 5px; border-top: 1px solid var(--borda); } .multi-acoes button { flex: 1; } /* ── Menu do usuário (avatar da barra superior) ──────────── */ .usuario-wrap { position: relative; } button.avatar { border: none; cursor: pointer; font-family: inherit; font-size: 15px; } button.avatar:hover { filter: brightness(1.1); } .usuario-painel { display: none; position: absolute; right: 0; top: 46px; min-width: 216px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-alta); overflow: hidden; z-index: 60; padding: 6px; } .usuario-painel.on { display: block; } .usuario-cabeca { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); } .usuario-cabeca strong { display: block; font-size: 13.5px; } .usuario-cabeca small { color: var(--texto-3); font-size: 11.5px; word-break: break-all; } .usuario-painel button, .usuario-painel a { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 8px; font-family: inherit; font-size: 13.5px; color: var(--texto-2); text-align: left; cursor: pointer; transition: background .12s, color .12s; } .usuario-painel button:hover, .usuario-painel a:hover { background: var(--superficie-2); color: var(--texto); } .usuario-painel .sair { color: var(--perigo); } /* A barra superior é sticky: sem esta margem, rolar até as abas as deixaria escondidas atrás dela (usado pelo atalho "Líquidos" do menu). */ .abas { scroll-margin-top: 78px; } /* ── Editor de contrato ──────────────────────────────────── */ .ct-barra { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 7px; border: 1px solid var(--borda); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--superficie-2); } .ct-barra button { min-width: 30px; height: 28px; padding: 0 8px; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--texto-2); font-family: inherit; font-size: 13px; line-height: 1; } .ct-barra button:hover { background: var(--superficie); border-color: var(--borda); color: var(--texto); } .ct-barra .sep { width: 1px; height: 18px; background: var(--borda); margin: 0 3px; } .ct-editor { min-height: 420px; max-height: 62vh; overflow-y: auto; padding: 22px 26px; border: 1px solid var(--borda); border-radius: 0 0 9px 9px; background: var(--superficie); color: var(--texto); font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.75; outline: none; } .ct-editor:focus { border-color: var(--primaria); } .ct-editor h1 { font-size: 19px; margin: 0 0 14px; } .ct-editor h2 { font-size: 16px; margin: 16px 0 7px; } .ct-editor p { margin: 0 0 10px; } .ct-editor table { border-collapse: collapse; width: 100%; margin: 10px 0; } .ct-editor td, .ct-editor th { border: 1px solid var(--borda); padding: 5px 8px; } /* Variável visível no editor, para não se perder no meio do texto */ .ct-editor .ct-var, .ct-var { background: var(--primaria-suave); color: var(--primaria); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; font-size: .85em; white-space: nowrap; } .ct-vazio { border-bottom: 1px solid currentColor; padding: 0 22px; opacity: .55; } .ct-vars { max-height: 320px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 9px; padding: 8px; } .ct-vars h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: 10px 0 5px; } .ct-vars h4:first-child { margin-top: 0; } .ct-vars button { display: block; width: 100%; text-align: left; margin-bottom: 2px; padding: 5px 8px; border: none; border-radius: 6px; background: none; font-family: inherit; font-size: 12.5px; color: var(--texto-2); } .ct-vars button:hover { background: var(--superficie-2); color: var(--texto); } .ct-vars button code { color: var(--texto-3); font-size: 11px; } .ct-grade { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; } @media (max-width: 1000px) { .ct-grade { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ MURAL DE TV (staff) — telas de parede do escritório Fora do tema claro/escuro de propósito: a TV fica sempre escura, que é o que se lê de longe e não ofusca a sala. As medidas são em `em` sobre um font-size em vw — assim o mesmo layout serve a um monitor de 24" e a uma TV de 65" em 1080p. ═══════════════════════════════════════════════════════════════════ */ .app.modo-tv .sidebar, .app.modo-tv .sidebar-fundo, .app.modo-tv .topo, .app.modo-tv .faixa-demo { display: none; } .app.modo-tv .principal { height: 100vh; } .app.modo-tv .conteudo { padding: 0; max-width: none; height: 100vh; overflow: hidden; animation: none; } .tv { --tv-fundo: #0a0e18; --tv-super: #141b2b; --tv-super2: #1b2334; --tv-borda: #26314a; --tv-txt: #eef2f9; --tv-txt2: #94a3bd; --tv-txt3: #64748b; --tv-ok: #22c55e; --tv-alerta: #f59e0b; --tv-perigo: #f43f5e; --tv-info: #38bdf8; --tv-primaria:#6366f1; position: relative; height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(900px 500px at 12% -10%, #1e2a4d 0%, transparent 60%), radial-gradient(900px 500px at 100% 110%, #17293f 0%, transparent 60%), var(--tv-fundo); color: var(--tv-txt); font-size: clamp(12px, .95vw, 24px); line-height: 1.35; cursor: none; overflow: hidden; } .tv.tv-mouse { cursor: default; } /* ── Cabeçalho ── */ .tv-topo { display: flex; align-items: center; gap: 1.4em; padding: .9em 1.6em; border-bottom: 1px solid var(--tv-borda); background: rgba(10, 14, 24, .55); } .tv-marca { display: flex; align-items: center; gap: .7em; min-width: 0; } .tv-logo { width: 2.6em; height: 2.6em; border-radius: .6em; flex-shrink: 0; background: linear-gradient(135deg, var(--tv-primaria), #a855f7); display: flex; align-items: center; justify-content: center; font-size: 1.2em; font-weight: 800; color: #fff; } .tv-marca strong { display: block; font-size: 1.35em; font-weight: 700; letter-spacing: -.01em; } .tv-marca small { color: var(--tv-txt2); font-size: .95em; } .tv-titulo { flex: 1; text-align: center; font-size: 1.5em; font-weight: 700; color: var(--tv-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-relogio { text-align: right; flex-shrink: 0; } .tv-relogio strong { display: block; font-size: 2.4em; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .tv-relogio small { color: var(--tv-txt2); font-size: .95em; text-transform: capitalize; } /* ── Palco ── */ .tv-palco { padding: 1.3em 1.6em; min-height: 0; overflow: hidden; } .tv-slide { height: 100%; display: flex; flex-direction: column; gap: 1em; animation: tv-entra .5s ease; } @keyframes tv-entra { from { opacity: 0; transform: translateY(1.2em) scale(.995); } to { opacity: 1; transform: none; } } .tv-cabeca { flex-shrink: 0; } .tv-cabeca h2 { font-size: 2em; font-weight: 800; letter-spacing: -.02em; } .tv-cabeca p { color: var(--tv-txt2); font-size: 1.05em; margin-top: .1em; } .tv-carregando, .tv-erro { height: 100%; display: flex; flex-direction: column; gap: .4em; align-items: center; justify-content: center; color: var(--tv-txt2); font-size: 1.6em; } .tv-erro span { font-size: 2.4em; } .tv-erro h2 { color: var(--tv-txt); font-size: 1.2em; } .tv-erro p { font-size: .85em; } .tv-erro small{ font-size: .6em; color: var(--tv-txt3); } /* ── Cartões de indicador ── */ .tv-kpis { display: grid; gap: .9em; flex-shrink: 0; grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr)); } .tv-kpi { background: linear-gradient(160deg, var(--tv-super), var(--tv-super2)); border: 1px solid var(--tv-borda); border-top: 3px solid var(--tv-primaria); border-radius: .7em; padding: .9em 1em; } .tv-kpi.ok { border-top-color: var(--tv-ok); } .tv-kpi.alerta { border-top-color: var(--tv-alerta); } .tv-kpi.perigo { border-top-color: var(--tv-perigo); background: linear-gradient(160deg, #26141d, #1d1421); } .tv-kpi-rotulo { font-size: 1em; color: var(--tv-txt2); font-weight: 600; } .tv-kpi-valor { font-size: 3.1em; font-weight: 800; line-height: 1.05; margin: .06em 0; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .tv-kpi.ok .tv-kpi-valor { color: var(--tv-ok); } .tv-kpi.alerta .tv-kpi-valor { color: var(--tv-alerta); } .tv-kpi.perigo .tv-kpi-valor { color: var(--tv-perigo); } .tv-kpi-sub { font-size: .9em; color: var(--tv-txt3); } /* ── Barras de progresso ── */ .tv-progressao { background: var(--tv-super); border: 1px solid var(--tv-borda); border-radius: .7em; padding: 1em 1.2em; margin-top: auto; } .tv-prog-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5em; } .tv-prog-topo strong { font-size: 1.2em; } .tv-prog-topo span { color: var(--tv-txt2); font-size: 1em; } .tv-prog-trilho { display: flex; height: .9em; border-radius: 1em; overflow: hidden; background: var(--tv-super2); } .tv-prog-trilho.fino { height: .5em; } .tv-prog-parte { height: 100%; transition: width .6s ease; background: var(--tv-primaria); } .tv-prog-parte.ok { background: var(--tv-ok); } .tv-prog-parte.alerta { background: var(--tv-alerta); } .tv-prog-parte.perigo { background: var(--tv-perigo); } .tv-prog-parte.info { background: var(--tv-info); } .tv-legenda { display: flex; flex-wrap: wrap; gap: 1.2em; margin-top: .6em; color: var(--tv-txt2); font-size: .95em; } .tv-legenda i { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .4em; background: var(--tv-txt3); } .tv-legenda i.ok { background: var(--tv-ok); } .tv-legenda i.alerta { background: var(--tv-alerta); } .tv-legenda i.perigo { background: var(--tv-perigo); } /* ── Grade de obrigações ── */ .tv-grade-cartoes { flex: 1; min-height: 0; display: grid; gap: .8em; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); } .tv-cartao { background: var(--tv-super); border: 1px solid var(--tv-borda); border-left: .28em solid var(--tv-primaria); border-radius: .6em; padding: .7em .85em; display: flex; flex-direction: column; gap: .35em; overflow: hidden; } .tv-cartao.perigo { border-left-color: var(--tv-perigo); background: linear-gradient(120deg, #241420, var(--tv-super)); } .tv-cartao.ok { border-left-color: var(--tv-ok); } .tv-cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: .5em; } .tv-cartao-topo strong { font-size: 1.15em; font-weight: 700; line-height: 1.2; } .tv-cartao-topo small { display: block; color: var(--tv-txt3); font-size: .75em; font-weight: 500; } .tv-cartao-sub { color: var(--tv-txt2); font-size: .88em; } .tv-cartao-numeros { display: flex; gap: .9em; margin-top: auto; } .tv-cartao-numeros div { text-align: center; } .tv-cartao-numeros b { display: block; font-size: 1.7em; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .tv-cartao-numeros span { font-size: .75em; color: var(--tv-txt3); } .tv-cartao-numeros .ok b { color: var(--tv-ok); } .tv-cartao-numeros .alerta b { color: var(--tv-alerta); } .tv-cartao-numeros .perigo b { color: var(--tv-perigo); } .tv-tag { flex-shrink: 0; padding: .18em .6em; border-radius: 1em; font-size: .82em; font-weight: 700; white-space: nowrap; background: var(--tv-super2); color: var(--tv-txt2); } .tv-tag.ok { background: rgba(34, 197, 94, .16); color: var(--tv-ok); } .tv-tag.alerta { background: rgba(245, 158, 11, .16); color: var(--tv-alerta); } .tv-tag.perigo { background: rgba(244, 63, 94, .18); color: var(--tv-perigo); } /* Só o avulso dentro do mural — `.perigo` sem escopo repintaria os cartões do portal inteiro, que já usam essa classe. */ .tv b.perigo { color: var(--tv-perigo); } /* ── Duas colunas e listas ── */ .tv-duas { flex: 1; min-height: 0; display: grid; gap: 1em; grid-template-columns: repeat(2, minmax(0, 1fr)); } .tv-bloco { background: var(--tv-super); border: 1px solid var(--tv-borda); border-radius: .7em; padding: .9em 1.1em; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .tv-bloco.cheio { flex: 1; } .tv-bloco h3 { font-size: 1.15em; font-weight: 700; color: var(--tv-txt2); margin-bottom: .6em; flex-shrink: 0; } .tv-lista { display: flex; flex-direction: column; gap: .3em; min-height: 0; overflow: hidden; } .tv-linha { display: flex; align-items: center; gap: .7em; padding: .42em .6em; border-radius: .5em; background: var(--tv-super2); } .tv-linha.coluna { flex-direction: column; align-items: stretch; gap: .3em; } .tv-linha-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; } .tv-linha-cabeca strong, .tv-linha-info strong { font-size: 1.08em; font-weight: 700; } .tv-linha-cabeca span { color: var(--tv-txt2); font-size: .92em; } .tv-linha-info { flex: 1; min-width: 0; } .tv-linha-info small { display: block; color: var(--tv-txt3); font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-pos { width: 1.8em; height: 1.8em; flex-shrink: 0; border-radius: .4em; background: var(--tv-borda); color: var(--tv-txt2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95em; } .tv-data-bloco { flex-shrink: 0; width: 2.6em; text-align: center; border-radius: .4em; background: var(--tv-borda); padding: .15em 0; } .tv-data-bloco b { display: block; font-size: 1.25em; font-weight: 800; line-height: 1.1; } .tv-data-bloco small { font-size: .72em; color: var(--tv-txt2); } .tv-vazio { flex: 1; display: flex; flex-direction: column; gap: .3em; align-items: center; justify-content: center; color: var(--tv-txt3); font-size: 1.05em; padding: 1.2em 0; } .tv-vazio span { font-size: 2.2em; } /* ── Calendário ── */ .tv-cal-area { flex: 1; min-height: 0; display: grid; gap: 1em; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); } .tv-calendario { background: var(--tv-super); border: 1px solid var(--tv-borda); border-radius: .7em; padding: .8em; display: flex; flex-direction: column; min-height: 0; } .tv-cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35em; margin-bottom: .35em; color: var(--tv-txt3); font-size: .85em; text-align: center; text-transform: uppercase; letter-spacing: .06em; } .tv-cal-grade { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(0, 1fr); gap: .35em; } .tv-dia { border: 1px solid var(--tv-borda); border-radius: .45em; padding: .3em .4em; display: flex; flex-direction: column; background: rgba(255, 255, 255, .015); overflow: hidden; } .tv-dia.fora { border: none; background: none; } .tv-dia.tem { background: var(--tv-super2); } .tv-dia.perigo { background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .4); } .tv-dia.hoje { border-color: var(--tv-primaria); box-shadow: 0 0 0 2px rgba(99, 102, 241, .35); } .tv-dia-n { font-size: 1.1em; font-weight: 700; color: var(--tv-txt2); } .tv-dia.tem .tv-dia-n { color: var(--tv-txt); } .tv-dia-tags { display: flex; gap: .3em; margin-top: auto; } .tv-dia-tags b { font-size: .95em; font-weight: 800; padding: 0 .35em; border-radius: .3em; background: var(--tv-borda); } .tv-dia-tags b.ok { color: var(--tv-ok); } .tv-dia-tags b.alerta { color: var(--tv-alerta); } .tv-dia-tags b.perigo { color: #fff; background: var(--tv-perigo); } .tv-dia small { font-size: .72em; color: var(--tv-txt3); } /* ── Carteira por regime ── */ .tv-carteira { flex: 1; min-height: 0; display: grid; gap: 1.4em; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; } .tv-rosca-area { display: flex; flex-direction: column; align-items: center; gap: 1em; min-height: 0; } .tv-rosca { width: min(24vh, 100%); aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 3em rgba(99, 102, 241, .25); } .tv-rosca::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: var(--tv-fundo); } .tv-rosca-centro { position: relative; z-index: 1; text-align: center; } .tv-rosca-centro b { display: block; font-size: 2.8em; font-weight: 800; line-height: 1; } .tv-rosca-centro span { font-size: .9em; color: var(--tv-txt2); } .tv-mini-kpis { display: flex; gap: 1.6em; } .tv-mini-kpis div { text-align: center; } .tv-mini-kpis b { display: block; font-size: 1.7em; font-weight: 800; } .tv-mini-kpis span { font-size: .85em; color: var(--tv-txt3); } .tv-barras { display: flex; flex-direction: column; gap: .75em; min-height: 0; overflow: hidden; } .tv-barras.compacto { gap: .45em; } .tv-barra-item { min-width: 0; } .tv-barra-cabeca { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .22em; } .tv-barra-cabeca strong { font-size: 1.1em; font-weight: 600; } .tv-barra-cabeca strong i { display: inline-block; width: .7em; height: .7em; border-radius: .2em; margin-right: .5em; } .tv-barra-cabeca span { color: var(--tv-txt2); font-size: .95em; } .tv-barra-cabeca span b { font-size: 1.2em; color: var(--tv-txt); font-weight: 800; } /* ── Colunas (movimentação de RH) ── */ .tv-colunas { flex: 1; min-height: 0; display: flex; gap: .8em; align-items: flex-end; } .tv-coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35em; height: 100%; } .tv-coluna-barras { flex: 1; width: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: .3em; } .tv-coluna-barras div { width: 40%; min-height: .3em; border-radius: .3em .3em 0 0; position: relative; transition: height .6s ease; } .tv-coluna-barras .ok { background: linear-gradient(180deg, var(--tv-ok), #15803d); } .tv-coluna-barras .perigo { background: linear-gradient(180deg, var(--tv-perigo), #9f1239); } .tv-coluna-barras b { position: absolute; top: -1.4em; left: 0; right: 0; text-align: center; font-size: .85em; font-weight: 800; color: var(--tv-txt2); } .tv-coluna small { color: var(--tv-txt3); font-size: .85em; text-transform: capitalize; } /* ── Tabela ── */ .tv-tabela { display: flex; flex-direction: column; gap: .25em; min-height: 0; overflow: hidden; } .tv-tr { display: grid; grid-template-columns: 2fr 2fr 1.2fr .9fr; gap: .8em; align-items: center; padding: .4em .7em; border-radius: .45em; background: var(--tv-super2); } .tv-tr.cabeca { background: none; color: var(--tv-txt3); font-size: .85em; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 0; } .tv-tr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02em; } .tv-tr strong { font-weight: 700; } .tv-tr small { display: block; color: var(--tv-txt3); font-size: .8em; } .tv-tr .tv-tag { justify-self: start; } /* ── Notícias ── */ .tv-noticias { flex: 1; min-height: 0; display: grid; gap: .9em; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); } .tv-noticia { background: var(--tv-super); border: 1px solid var(--tv-borda); border-radius: .7em; overflow: hidden; display: flex; flex-direction: column; } .tv-noticia-img { height: 38%; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--tv-super2); } .tv-noticia-txt { padding: .8em 1em; display: flex; flex-direction: column; gap: .3em; min-height: 0; overflow: hidden; } .tv-noticia-data { align-self: flex-start; font-size: .85em; font-weight: 700; color: var(--tv-info); background: rgba(56, 189, 248, .12); padding: .1em .6em; border-radius: 1em; } .tv-noticia strong { font-size: 1.2em; font-weight: 700; line-height: 1.25; } .tv-noticia p { color: var(--tv-txt2); font-size: .92em; overflow: hidden; } /* ── Notícia aberta: a matéria em corpo grande, em colunas ── */ .tv-artigo { flex: 1; min-height: 0; display: flex; gap: 1.2em; } .tv-artigo-img { width: 26%; flex-shrink: 0; border-radius: .7em; background-size: cover; background-position: center; background-color: var(--tv-super); } .tv-artigo-corpo { flex: 1; min-width: 0; min-height: 0; position: relative; columns: 2; column-gap: 2em; column-rule: 1px solid var(--tv-borda); font-size: 1.25em; line-height: 1.5; color: #dbe3ef; overflow: hidden; } .tv-artigo-corpo.cortado::after { content: 'matéria completa no blog do escritório'; position: absolute; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, var(--tv-fundo) 30%); padding: .2em 0 .2em 3em; font-size: .7em; color: var(--tv-txt3); } .tv-artigo-corpo p, .tv-artigo-corpo ul, .tv-artigo-corpo ol, .tv-artigo-corpo blockquote, .tv-artigo-corpo table { margin-bottom: .7em; } .tv-artigo-corpo h1, .tv-artigo-corpo h2, .tv-artigo-corpo h3, .tv-artigo-corpo h4 { font-size: 1.15em; font-weight: 700; color: var(--tv-txt); margin: .3em 0 .35em; break-after: avoid; } .tv-artigo-corpo strong, .tv-artigo-corpo b { color: #fff; } .tv-artigo-corpo a { color: var(--tv-info); text-decoration: none; } .tv-artigo-corpo ul, .tv-artigo-corpo ol { padding-left: 1.2em; } .tv-artigo-corpo li { margin-bottom: .2em; } .tv-artigo-corpo img { max-width: 100%; height: auto; border-radius: .4em; } .tv-artigo-corpo table { width: 100%; border-collapse: collapse; font-size: .9em; } .tv-artigo-corpo td, .tv-artigo-corpo th { border: 1px solid var(--tv-borda); padding: .25em .5em; text-align: left; } .tv-artigo-carregando { color: var(--tv-txt3); font-style: italic; } /* ── Rodapé e controles ── */ .tv-rodape { display: flex; align-items: center; gap: 1.2em; padding: .5em 1.6em .7em; border-top: 1px solid var(--tv-borda); background: rgba(10, 14, 24, .55); } .tv-pontos { display: flex; gap: .45em; flex: 1; } .tv-ponto { width: 2.2em; height: .35em; border: none; border-radius: 1em; padding: 0; background: var(--tv-borda); transition: background .3s, width .3s; } .tv-ponto.ativo { background: var(--tv-primaria); width: 3.4em; } .tv-status { color: var(--tv-txt3); font-size: .9em; white-space: nowrap; } .tv-controles { display: flex; align-items: center; gap: .35em; opacity: 0; transition: opacity .25s; } .tv.tv-mouse .tv-controles { opacity: 1; } .tv-btn { width: 2.1em; height: 2.1em; border-radius: .45em; border: 1px solid var(--tv-borda); background: var(--tv-super2); color: var(--tv-txt2); font-size: 1em; line-height: 1; display: flex; align-items: center; justify-content: center; } .tv-btn:hover { background: var(--tv-borda); color: var(--tv-txt); } .tv-btn.sair:hover{ background: var(--tv-perigo); color: #fff; border-color: var(--tv-perigo); } .tv-btn-tempo { color: var(--tv-txt2); font-size: .9em; min-width: 2.6em; text-align: center; font-variant-numeric: tabular-nums; } /* Barra de tempo do slide */ .tv-barra { position: absolute; left: 0; right: 0; bottom: 0; height: .28em; background: var(--tv-borda); } .tv-barra > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--tv-primaria), #a855f7); } .tv.pausado .tv-barra > div { background: var(--tv-txt3); } /* Telas menores (prévia no computador): menos colunas, tudo continua legível */ @media (max-width: 1100px) { .tv-grade-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tv-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tv-duas, .tv-cal-area, .tv-carteira { grid-template-columns: minmax(0, 1fr); } .tv-titulo { display: none; } } /* ── Mídias no mural: imagem, vídeo ou player ocupando o palco ── */ .tv-midia { flex: 1; min-height: 0; position: relative; border-radius: .7em; overflow: hidden; background: #000; } .tv-midia img, .tv-midia video, .tv-midia iframe { width: 100%; height: 100%; display: block; border: 0; } .tv-midia.cobrir img, .tv-midia.cobrir video { object-fit: cover; } .tv-midia.conter img, .tv-midia.conter video { object-fit: contain; } .tv-midia-legenda { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6em 1.2em .8em; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); display: flex; flex-direction: column; gap: .1em; } .tv-midia-legenda strong { font-size: 1.6em; font-weight: 700; } .tv-midia-legenda span { font-size: 1.05em; color: #cbd5e1; } .tv-ponto.midia { background: #4b5563; } .tv-ponto.midia.ativo { background: var(--tv-info); } /* ── Tela de gestão das mídias (staff) ── */ .form-grade .campo-largo { grid-column: 1 / -1; } .md-escolhas { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 6px 0; } .md-escolhas label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--texto-2); font-weight: 500; margin: 0; } .md-escolhas input { width: auto; margin: 0; } .md-zona-icone { font-size: 26px; } .md-zona strong { display: block; margin-top: 4px; } .md-zona small { display: block; color: var(--texto-3); margin-top: 3px; } .md-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .md-card { display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: hidden; } .md-card.inativa { opacity: .6; } .md-previa { position: relative; aspect-ratio: 16 / 9; background: var(--superficie-2); } .md-previa img, .md-previa video { width: 100%; height: 100%; object-fit: cover; display: block; } .md-embed { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--texto-3); } .md-tipo { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; } .md-info { padding: 0 14px; display: flex; flex-direction: column; gap: 3px; } .md-info strong { font-size: 15px; } .md-info small { color: var(--texto-3); font-size: 12.5px; } .md-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .md-acoes { display: flex; gap: 6px; padding: 0 14px 14px; margin-top: auto; border-top: 1px solid var(--borda); padding-top: 12px; } .md-acoes .btn[disabled] { opacity: .4; cursor: default; } .md-acoes [data-edita] { margin-left: auto; }