/* ============================================================ GRADE DE PROGRAMAÇÃO — styles.css ============================================================ */ :root { --bg: #f5f5f3; --surface: #ffffff; --border: #e8e8e5; --border2: #d4d4cf; --text: #1a1a18; --text2: #6b6b65; --text3: #a8a8a2; --accent: #1a56db; --red: #dc2626; --amber: #d97706; --green: #16a34a; /* ── Cores de DADO (gráficos, KPIs, badges) ────────────────── No claro são as mesmas de sempre. No escuro (bloco abaixo) elas trocam por uma paleta dessaturada: as cores vivas do tema claro, sobre fundo escuro, vibram e leem como neon. A paleta escura foi VALIDADA, não escolhida no olho — banda de luminosidade, piso de croma, separação para daltonismo e contraste >= 3:1 sobre #252526. Ao mexer, revalide. */ --c-danger: #dc2626; /* atraso, vencido, não executado */ --c-warn: #d97706; /* alerta, prazo próximo, parcial */ --c-ok: #16a34a; /* executado, no prazo, finalizado */ --c-info: #1a56db; /* programado, neutro-ativo */ --c-violet: #7c3aed; /* reprogramado, RNT */ --c-cyan: #0891b2; /* Ouvidoria */ --c-neutral: #94a3b8; /* sem classificação */ /* Fundos suaves dos badges (o par claro de cada cor acima) */ --c-danger-bg: #fef2f2; --c-warn-bg: #fffbeb; --c-ok-bg: #f0fdf4; --c-info-bg: #eff6ff; --c-violet-bg: #f5f3ff; --c-cyan-bg: #ecfeff; /* Trilhos/grades dos gráficos */ --c-grid: #e5e7eb; --c-track: #f0f0ed; } html[data-theme="dark"] { --bg: #1e1e1e; --surface: #252526; --surface2: #2d2d2d; --border: #3e3e42; --border2: #4e4e52; --text: #cccccc; --text2: #9d9d9d; --text3: #6d6d6d; --accent: #569cd6; --red: #f48771; --amber: #d7ba7d; --green: #4ec994; /* Cores de dado no escuro — validadas contra a superfície #252526: luminosidade dentro da banda, croma acima do piso (não lavam para cinza), pior par adjacente com ΔE 54 em daltonismo e todas acima de 3:1 de contraste. São as mesmas famílias do claro, com o croma baixado: é o que tira o efeito neon sem perder o significado. */ --c-danger: #d9705f; --c-warn: #b8862f; --c-ok: #3aa06e; --c-info: #4a90d9; --c-violet: #9b7fd4; --c-cyan: #2f9cbd; --c-neutral: #7e8a99; /* Fundos de badge no escuro: um véu da própria cor sobre a superfície, nunca o pastel do tema claro (que viraria um bloco branco). */ --c-danger-bg: rgba(217, 112, 95, .14); --c-warn-bg: rgba(184, 134, 47, .14); --c-ok-bg: rgba( 58, 160, 110, .14); --c-info-bg: rgba( 74, 144, 217, .14); --c-violet-bg: rgba(155, 127, 212, .14); --c-cyan-bg: rgba( 47, 156, 189, .14); --c-grid: #3a3a3d; --c-track: #2d2d2d; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; display: flex; font-size: 13px; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .logo { padding: 18px 18px 16px; border-bottom: 1px solid var(--border); } .logo-mark { font-size: 13px; font-weight: 600; } .logo-sub { font-size: 11px; color: var(--text2); margin-top: 1px; } .nav { padding: 10px 8px; flex: 1; } .nav-grp { margin-bottom: 18px; } .nav-grp-lbl { font-size: 10px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; padding: 0 10px; margin-bottom: 3px; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--text2); font-size: 12px; transition: all 0.1s; margin-bottom: 1px; } .nav-item:hover { background: var(--bg); color: var(--text); } .nav-item.active { background: var(--bg); color: var(--text); font-weight: 500; } .nav-item svg { width: 14px; height: 14px; opacity: 0.55; flex-shrink: 0; } .nav-item.active svg { opacity: 1; } .dot-red { width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin-left: auto; } .dev-tag { font-size: 9px; color: var(--text3); margin-left: auto; } .sidebar-settings { padding: 4px 8px; border-top: 1px solid var(--border); } .sidebar-foot { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; } .av { width: 26px; height: 26px; border-radius: 50%; background: var(--text); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: var(--surface); flex-shrink: 0; } .u-name { font-size: 12px; font-weight: 500; } .u-role { font-size: 10px; color: var(--text2); } .sidebar-logout { flex-shrink: 0; width: 24px; height: 24px; border: none; background: none; cursor: pointer; color: var(--text3); border-radius: 5px; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; padding: 0; } .sidebar-logout:hover { background: #fef2f2; color: var(--red); } /* ── Desktop: sidebar vira trilho e expande no hover ──────────── Recolhida ocupa 58px (só ícones); com o mouse em cima abre para 220px POR CIMA do conteúdo. O margin-right negativo compensa a largura extra, então o fluxo continua reservando 58px e nada reflui ao abrir — uma tabela que refluísse a cada passada de mouse seria pior que a sidebar fixa que isto substitui. focus-within expande também: quem navega por teclado não tem hover. z-index 120: acima do conteúdo e da topbar, ABAIXO dos modais (.ov usa 200+) — a sidebar não pode pintar por cima de um modal aberto. */ @media (min-width: 769px) { .sidebar { width: 58px; position: relative; z-index: 120; overflow: hidden; transition: width .18s ease, margin-right .18s ease, box-shadow .18s ease; } .sidebar:hover, .sidebar:focus-within { width: 220px; margin-right: -162px; /* 220 - 58: ocupa os mesmos 58px no fluxo */ box-shadow: 8px 0 28px rgba(0, 0, 0, .18); } /* Nada quebra linha: no trilho o texto some por corte, não por reflow — senão cada item mudaria de altura e o menu "pularia" ao abrir. */ .sidebar .nav-item, .sidebar .nav-grp-lbl, .sidebar .logo-mark, .sidebar .logo-sub, .sidebar .u-name, .sidebar .u-role { white-space: nowrap; } /* O texto do .nav-item é nó de texto solto (ícone + texto no mesmo div), então esconder é via font-size:0 — o svg tem tamanho em px e não sente. opacity não serviria: apagaria o ícone junto. */ .sidebar:not(:hover):not(:focus-within) .nav-item, .sidebar:not(:hover):not(:focus-within) .sidebar-settings .nav-item { font-size: 0; } /* Rótulos que são elementos inteiros somem por opacity (transição suave). */ .sidebar:not(:hover):not(:focus-within) .logo-mark, .sidebar:not(:hover):not(:focus-within) .logo-sub, .sidebar:not(:hover):not(:focus-within) .nav-grp-lbl, .sidebar:not(:hover):not(:focus-within) .dev-tag, .sidebar:not(:hover):not(:focus-within) .u-name, .sidebar:not(:hover):not(:focus-within) .u-role, .sidebar:not(:hover):not(:focus-within) .sidebar-logout { opacity: 0; } .logo-mark, .logo-sub, .nav-grp-lbl, .u-name, .u-role, .dev-tag { transition: opacity .15s ease; } /* Logo com altura fixa nos dois estados (senão o menu inteiro sobe/desce ao abrir). Recolhida, mostra o monograma no lugar do nome. */ .sidebar .logo { position: relative; height: 64px; } .sidebar:not(:hover):not(:focus-within) .logo::before { content: "GP"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text2); } } html[data-theme="dark"] .sidebar:hover, html[data-theme="dark"] .sidebar:focus-within { box-shadow: 8px 0 28px rgba(0, 0, 0, .55); } /* ── Hamburger (visível só no mobile via media query) ──────── */ .sidebar-toggle { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: none; background: none; cursor: pointer; border-radius: 6px; color: var(--text2); transition: background .15s, color .15s; margin-right: 2px; } .sidebar-toggle:hover { background: var(--bg); color: var(--text); } /* ── Overlay que fecha o menu ao clicar fora ───────────────── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 399; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); } .sidebar-overlay.active { display: block; } /* ── Mobile: sidebar vira painel deslizante ────────────────── */ @media (max-width: 768px) { .sidebar-toggle { display: flex; } .sidebar { position: fixed; top: 0; left: 0; height: 100dvh; z-index: 400; transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: 6px 0 28px rgba(0,0,0,.18); } .sidebar.open { transform: translateX(0); } body { overflow: hidden; } } /* ============================================================ MAIN / TOPBAR ============================================================ */ .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .topbar { height: 50px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 18px; gap: 12px; } .page-title { font-size: 14px; font-weight: 600; } .sep { width: 1px; height: 14px; background: var(--border); } .month-nav { display: flex; align-items: center; gap: 2px; } .month-lbl { font-size: 12px; font-weight: 500; padding: 0 10px; } .topbar-date-wrap { display: flex; align-items: center; gap: 0; } .topbar-cal-btn { color: var(--text2); padding: 4px 5px; } .topbar-cal-btn:hover { color: var(--accent); background: var(--bg); } .tr-right { margin-left: auto; display: flex; align-items: center; gap: 7px; } .notif-wrap { position: relative; } .n-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); border: 1.5px solid var(--surface); } /* ============================================================ BUTTONS / ICON BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: all 0.1s; font-family: inherit; } .btn:hover { background: var(--bg); } .btn-p { background: var(--text); border-color: var(--text); color: var(--surface); } .btn-p:hover { opacity: 0.82; } .btn-ghost { border-color: transparent; background: transparent; } .btn-ghost:hover { background: var(--bg); border-color: var(--border); } .ib { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: 14px; transition: all 0.1s; font-family: inherit; } .ib:hover { background: var(--bg); color: var(--text); } /* ============================================================ ALERT BAR ============================================================ */ .alert { background: #fef2f2; border-bottom: 1px solid #fecaca; padding: 7px 18px; display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; } .alert-txt { color: #991b1b; font-weight: 500; } .chips { display: flex; gap: 5px; } .chip { font-size: 11px; padding: 1px 7px; border-radius: 99px; } .chip-r { color: #dc2626; background: #fee2e2; border: 1px solid #fca5a5; } .chip-a { color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; } .alert-x { margin-left: auto; color: var(--text3); font-size: 16px; line-height: 1; } /* ============================================================ CONTENT / STATS ============================================================ */ .content { flex: 1; overflow: auto; padding: 16px 18px; } .stats { display: flex; gap: 8px; margin-bottom: 14px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; flex: 1; } .stat-v { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-bottom: 2px; } .stat-l { font-size: 11px; color: var(--text2); } .s-d .stat-v { color: var(--red); } .s-s .stat-v { color: var(--green); } .s-w .stat-v { color: var(--amber); } /* Filtro da legenda ativo: os cards passam a contar o recorte, então precisam dizer isso. A borda marca todos de uma vez — sete sublinhas "de N" sem um sinal comum lêem como sete avisos soltos, não como um estado da tela. */ .stats.stats-filtrando .stat { border-color: var(--accent); } .stat-sub { font-size: 10px; color: var(--text3); margin-top: 3px; line-height: 1.2; font-variant-numeric: tabular-nums; } /* Contagem no chip da legenda. tabular-nums para os números não dançarem de largura entre um mês e outro e empurrarem os chips vizinhos. */ .le-n { font-size: 10px; font-weight: 600; color: var(--text3); font-variant-numeric: tabular-nums; margin-left: 2px; } .le.le-on .le-n { color: var(--text); } /* Zero fica visível, só recuado: esconder faria "não há PLC em julho" parecer "ainda carregando". */ .le.le-zero .le-n { opacity: .45; } /* ============================================================ GRADE ============================================================ */ .grade-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .grade-head { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .grade-head-title { font-size: 12px; font-weight: 500; } .leg { margin-left: auto; display: flex; gap: 10px; } .le { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text2); cursor: pointer; user-select: none; padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; transition: background .12s, color .12s, border-color .12s; } .le:hover { background: var(--bg); color: var(--text); } /* Filtro ativo: a legenda vira controle, então precisa de um estado visível. Quando há ao menos um ativo, os inativos recuam para o fundo. */ .le.le-on { background: var(--bg); color: var(--text); border-color: var(--border); font-weight: 600; } .leg.leg-filtrando .le:not(.le-on) { opacity: .38; } .leg.leg-filtrando .le:not(.le-on):hover { opacity: .7; } .le-d { width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0; } .grade-scroll { overflow-x: auto; overflow-y: auto; } table { width: 100%; border-collapse: collapse; min-width: 880px; } th { padding: 7px 5px; font-size: 10px; font-weight: 500; color: var(--text3); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--bg); text-align: center; white-space: nowrap; position: sticky; top: 0; z-index: 2; letter-spacing: 0.03em; } th .dn { font-size: 13px; font-weight: 600; color: var(--text); display: block; line-height: 1; } th.tod { background: #eff6ff; } th.tod .dn { color: var(--accent); } th.wk { opacity: 0.4; } tr.th-r td { background: var(--bg); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 6px 8px; } .t-pl { font-size: 12px; font-weight: 600; } .t-pp { font-size: 10px; color: var(--text2); } /* Ausência e calendário (sql/105). A ausência usa --amber e não --red: a equipe não errou — teve veículo quebrado ou atestado. Vermelho ali leria como falha da equipe, que é exatamente o oposto do que o motivo registra. */ .t-aus { font-size: 9px; font-weight: 600; margin-top: 2px; color: var(--amber); letter-spacing: .2px; cursor: help; } /* O feriado esmaece a coluna inteira — o dia existe, mas não conta. */ th.cal-feriado { opacity: .55; } th.cal-aberto { box-shadow: inset 0 -2px 0 var(--accent); } .cal-mk { display: block; font-size: 8px; font-weight: 700; line-height: 1; margin-top: 1px; color: var(--text3); } th.cal-aberto .cal-mk { color: var(--accent); } .cnt { text-align: center; } .cnt-pill { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 99px; } .cp-ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .cp-w { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; } .cp-d { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; } .cp-prox { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; animation: prazo-pulse 2s ease-in-out 4; } @keyframes prazo-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(234,88,12,0); } 50% { box-shadow: 0 0 0 3px rgba(234,88,12,.18); } } tr.or td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 2px 3px; vertical-align: top; } tr.or td:first-child { padding: 2px 6px; } .cell { min-height: 26px; cursor: pointer; border-radius: 4px; padding: 2px 4px; transition: background 0.1s; display: flex; flex-direction: column; gap: 2px; } .cell:hover { background: var(--bg); } .cell.folga { cursor: default; justify-content: center; align-items: center; } .cell.folga:hover { background: none; } /* Fora do filtro da legenda: recua, não some. Some colapsaria a linha da equipe e o dia pareceria vazio — o gestor precisa ver que existe um ANEEL no dia 12 enquanto olha as Ouvidorias. grayscale mata a cor da classificação (o sinal que o filtro está usando) e a opacity funde a célula com o fundo: escurece no tema escuro, clareia no claro — nos dois lê como apagado ao lado das realçadas. Hover restaura para inspecionar sem precisar limpar o filtro. */ .cell.cell-fora-filtro { opacity: .26; filter: grayscale(.85); transition: opacity .12s, filter .12s; } .cell.cell-fora-filtro:hover { opacity: 1; filter: none; } .fl { font-size: 10px; color: var(--text3); letter-spacing: 0.04em; } /* Célula vazia clicável — área de drop para nova programação */ .cell-empty { cursor: pointer; position: relative; height: 48px; border-radius: 4px; border: 1px dashed transparent; transition: background 0.1s, border-color 0.1s; } .cell-empty:hover { background: #eff6ff; border-color: var(--accent); } .cell-empty::after { content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 300; color: var(--text3); opacity: 0.45; } .cell-empty:hover::after { color: var(--accent); opacity: 1; font-weight: 400; } .tag { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 500; padding: 1px 5px; border-radius: 3px; line-height: 1.3; white-space: nowrap; } .tag.aneel { background: #fef2f2; color: #dc2626; } .tag.ouv { background: #fffbeb; color: #92400e; } .tag.rgc { background: #f0fdfa; color: #0f766e; } .tag.plc { background: #eff6ff; color: #1d4ed8; } .tag.padrao { background: var(--bg); color: var(--text2); border: 1px solid var(--border); } .tag.rnt { background: #f5f3ff; color: #6d28d9; } .tag.exec { background: #fffbeb; color: #92400e; } .tag.atraso { background: #fef2f2; color: #dc2626; font-weight: 600; } .tag.parcial { background: #fffbeb; color: #92400e; } .tag.prog { background: #eff6ff; color: #1d4ed8; } .tag.campo { background: #eff6ff; color: #1d4ed8; font-weight: 600; } .tag.reprog { background: #f5f3ff; color: #6d28d9; } .tag.carta { background: #f0fdf4; color: #16a34a; } .tag.finalizado{ background: #dcfce7; color: #15803d; font-weight: 600; } .tag.erro { background: #fff7ed; color: #ea580c; } .tag.tap { background: #fdf2f8; color: #db2777; } /* Sigla de plano (sql/67). Neutra de propósito: o plano CLASSIFICA o processo, não diz em que estado ele está. Pintá-la com uma das cores de status faria a etiqueta competir com o badge que a equipe procura primeiro na célula. */ .tag.plano { background: #f1f5f9; color: #475569; font-weight: 600; } /* Perfil sem permissão de edição (sql/42): some com o que ele não pode usar. A trava real é a RLS no banco — isto só evita oferecer um botão que falharia. */ .sem-edicao [data-req-editor] { display: none !important; } /* Requisito de recurso, não status — borda + caixa alta separam da etiqueta de cima */ .tag.sky { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; font-size: 9px; font-weight: 700; letter-spacing: .04em; margin-top: 2px; } /* Origem do pedido, não status nem classificação (sql/87). Âmbar queimado para não colidir com nenhuma cor da legenda de classificação — ela e esta tag aparecem no MESMO cartão, e repetir a cor faria as duas se lerem como a mesma informação. */ .tag.capex { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; font-size: 9px; font-weight: 700; letter-spacing: .04em; margin-top: 2px; } /* Separa o eixo CAPEX dos chips de classificação, que são mutuamente exclusivos entre si. Sem a divisória ele se lê como o sétimo item da mesma lista — e a primeira leitura de uma legenda é "estes são do mesmo tipo". */ .le-sep { width: 1px; align-self: stretch; margin: 0 2px; background: var(--border); } .ri { font-size: 9px; font-weight: 600; opacity: 0.5; margin-right: 1px; } /* ── O trilho vermelho: PRAZO VENCIDO, e só ───────────────── Nasceu marcando prioridade em 13/08/2026 e mudou de dono no dia seguinte, por uso real: "achei que pesou muito... tendo essa coluna do lado chega doer nos olhos e a grade quase toda tá como prioridade" / "poderia ficar assim só quando tiver atrasada". Medido em 08/2026, elas estavam certas: 82 das 381 OS do mês (21,5%) carregavam o trilho, contra 7 atrasadas. Um realce em 1 de cada 5 células não realça nada. O trilho usa box-shadow inset, não border-left: a borda mudaria a caixa e deslocaria o conteúdo da célula em 3px. E o fundo já está ocupado — as classes de carta e de classificação pintam a célula com !important. NÃO escreva "cell-carta-" seguido de asterisco-barra num comentário destes: a sequência fecha o comentário no meio e o parser engole a regra seguinte. Foi o que aconteceu aqui, e o sintoma foi o trilho sumir SÓ no tema claro — a regra do tema escuro vem depois e escapou. */ .cell.cell-atrasada { box-shadow: inset 3px 0 0 #dc2626; } html[data-theme="dark"] .cell.cell-atrasada { box-shadow: inset 3px 0 0 #f48771; } /* A etiqueta escreve a palavra. A primeira versão punha só um "!" antes do I/R dentro da tag do tipo — economizava a linha e saía "!I RNT·6004", que ampliado se lê como erro de digitação, não como urgência. Marca que precisa ser explicada não marca nada. Fica CONTORNADA e não preenchida: o vermelho cheio é do prazo vencido, que é o único evento realmente urgente do cartão. Ela sobreviveu ao corte de 14/08 ("gostei do jeito que ficou a célula", "se tivesse só o nome prioridade a gente já veria") — o que saiu foi o trilho ao lado dela. */ .tag.prio { background: transparent; color: #dc2626; border: 1px solid #dc2626; font-weight: 700; font-size: 9px; letter-spacing: .04em; padding: 0 4px; } html[data-theme="dark"] .tag.prio { color: #f48771; border-color: rgba(244,135,113,.55); } /* Prazo vencido. Vermelho CHEIO, e é o único do cartão — as outras tags são pastel. São 7 células em 08/2026, então destaque forte aqui não polui; é o oposto da prioridade, que é metade da grade. */ .tag.vencido { background: #dc2626; color: #fff; font-weight: 700; letter-spacing: .02em; } html[data-theme="dark"] .tag.vencido { background: #b91c1c; color: #fff; } tr.sp td { background: var(--bg); border-right: 1px solid var(--border); padding: 2px; } /* ============================================================ MODAL OVERLAY ============================================================ */ .ov { position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.18s; backdrop-filter: blur(3px); } .ov.open { opacity: 1; pointer-events: all; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: min(900px, 94vw); max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.06); transform: translateY(10px) scale(0.985); transition: transform 0.2s cubic-bezier(.34,1.26,.64,1); } .ov.open .modal { transform: none; } .mhdr { padding: 16px 20px 14px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg,#fff 0%,#fafaf9 100%); flex-shrink: 0; } .mhdr-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2px; } .mtitle { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .mclose { background: var(--bg); border: 1px solid var(--border); cursor: pointer; color: var(--text2); font-size: 15px; line-height: 1; padding: 0; width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mclose:hover { background: var(--border); color: var(--text); } .mmeta { font-size: 11px; color: var(--text2); margin-top: 1px; } .mbody { overflow-y: auto; flex: 1; } .msec { padding: 14px 20px; border-bottom: 1px solid var(--border); } .msec:last-child { border-bottom: none; } .mslbl { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } /* ============================================================ MODAL TABS ============================================================ */ .modal-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 16px; background: var(--surface); } .mtab { padding: 10px 12px; font-size: 12px; font-weight: 500; color: var(--text2); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.1s; margin-bottom: -1px; } .mtab:hover { color: var(--text); } .mtab.active { color: var(--accent); border-bottom-color: var(--accent); } .mtab-panel { display: none; } .mtab-panel.active { display: block; } /* ============================================================ FORM (Modal de criação de OS) ============================================================ */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .form-grid.cols3 { grid-template-columns: 1fr 1fr 1fr; } .form-full { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 3px; } .field label { font-size: 10px; font-weight: 500; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; } .field input, .field select, .field textarea { padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: inherit; color: var(--text); background: var(--surface); transition: border-color 0.1s; outline: none; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26,86,219,0.1); } .field textarea { resize: vertical; min-height: 60px; } .toggle-row { display: flex; gap: 8px; flex-wrap: wrap; } .toggle-item { display: flex; align-items: center; gap: 5px; cursor: pointer; } .toggle-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; } .toggle-item span { font-size: 12px; color: var(--text2); } .tipo-selector { display: flex; gap: 6px; } .tipo-btn { flex: 1; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 500; color: var(--text2); text-align: center; transition: all 0.1s; font-family: inherit; } .tipo-btn:hover { background: var(--bg); } .tipo-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .section-divider { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 10px; grid-column: 1 / -1; } /* ============================================================ TIMELINE ============================================================ */ .tl { display: flex; flex-direction: column; } .tlr { display: flex; gap: 12px; position: relative; } .tlr:not(:last-child)::after { content: ''; position: absolute; left: 9px; top: 18px; width: 1px; height: calc(100% - 6px); background: var(--border); } .tll { width: 18px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding-top: 3px; } .tlc { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; flex-shrink: 0; } .tlr.done .tlc { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 3px #dcfce7; } .tlr.act .tlc { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px #dbeafe; } .tlr.pend .tlc { background: transparent; border-color: var(--border2); } .tlr.dang .tlc { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 3px #fee2e2; } .tlr.warn .tlc { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 3px #fef3c7; } .tlbody { padding-bottom: 14px; } .tl-step { font-size: 12px; font-weight: 600; margin-bottom: 2px; color: var(--text); } .tl-det { font-size: 11px; color: var(--text2); line-height: 1.5; } .tl-b { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 8px; border-radius: 99px; margin-top: 4px; font-weight: 500; } /* ============================================================ OS LIST (dentro do modal) ============================================================ */ .osm { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 6px; background: var(--surface); transition: border-color 0.12s, box-shadow 0.12s; } .osm:last-child { margin-bottom: 0; } .osm:hover { border-color: var(--border2); box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .osm-l { flex: 1; min-width: 0; } .osm-rnt { font-size: 12px; font-weight: 600; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .osm-desc { font-size: 11px; color: var(--text2); margin-bottom: 4px; } .osm-flags { display: flex; gap: 4px; flex-wrap: wrap; } .ft { font-size: 10px; font-weight: 500; color: var(--text2); background: var(--bg); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; } .ft.d { color: var(--red); background: #fef2f2; border-color: #fca5a5; } /* ============================================================ ACTIONS (modal) ============================================================ */ .acts { display: flex; gap: 8px; } .ac { flex: 1; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: all 0.12s; background: var(--surface); text-align: left; font-family: inherit; } .ac:hover { background: var(--bg); border-color: var(--border2); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .ac-t { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .ac-s { font-size: 11px; color: var(--text2); } .dv { font-size: 9px; color: var(--text3); background: var(--bg); border: 1px solid var(--border); padding: 1px 4px; border-radius: 3px; } /* ============================================================ MODAL FOOTER ============================================================ */ .mfooter { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: linear-gradient(0deg,#fafaf9 0%,#fff 100%); flex-shrink: 0; } /* ============================================================ NOTIFICATION PANEL ============================================================ */ .np { position: fixed; top: 50px; right: 0; width: 300px; max-height: calc(100vh - 50px); overflow-y: auto; background: var(--surface); border-left: 1px solid var(--border); z-index: 50; box-shadow: -3px 0 16px rgba(0,0,0,0.07); transform: translateX(100%); transition: transform 0.18s; } .np.open { transform: none; } .nph { padding: 11px 13px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .nph-t { font-size: 13px; font-weight: 600; } .nph-c { font-size: 11px; color: var(--accent); cursor: pointer; } .ni { padding: 10px 13px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; } .ni:hover { background: var(--bg); } .ni-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .ni-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .ni-ttl { font-size: 12px; font-weight: 500; flex: 1; } .ni-time { font-size: 10px; color: var(--text3); } .ni-body { font-size: 11px; color: var(--text2); line-height: 1.4; padding-left: 11px; } /* ============================================================ TOAST ============================================================ */ .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(50px); background: var(--text); color: var(--surface); padding: 8px 14px; border-radius: 7px; font-size: 12px; z-index: 200; opacity: 0; transition: all 0.18s; white-space: nowrap; box-shadow: 0 3px 12px rgba(0,0,0,0.15); } .toast.show { transform: translateX(-50%); opacity: 1; } /* ============================================================ AJUDA — Botão flutuante + Modal de tutorial ============================================================ */ .ajuda-fab { position: fixed; bottom: 22px; right: 22px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(26,86,219,0.35); z-index: 90; transition: transform 0.15s, box-shadow 0.15s; } .ajuda-fab:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(26,86,219,0.45); } .ajuda-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.28); z-index: 180; display: none; align-items: center; justify-content: center; } .ajuda-ov.open { display: flex; } .ajuda-modal { background: var(--surface); border-radius: 14px; width: min(440px, 92vw); box-shadow: 0 24px 64px rgba(0,0,0,0.16); display: flex; flex-direction: column; overflow: hidden; } .ajuda-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid var(--border); } .ajuda-titulo { font-size: 13px; font-weight: 600; } .ajuda-body { padding: 28px 24px 20px; text-align: center; } .ajuda-icone { font-size: 36px; margin-bottom: 14px; line-height: 1; } .ajuda-step-titulo { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; } .ajuda-step-texto { font-size: 13px; color: var(--text2); line-height: 1.6; } .ajuda-footer { padding: 14px 18px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ajuda-dots { display: flex; gap: 5px; align-items: center; } .ajuda-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); cursor: pointer; transition: background 0.15s; } .ajuda-dot.ativo { background: var(--accent); } .ajuda-nav { display: flex; gap: 6px; } .ajuda-settings-row { padding: 8px 18px 14px; display: flex; justify-content: center; } /* ============================================================ SETTINGS DRAWER ============================================================ */ .cfg-sec { padding: 14px 14px 10px; border-bottom: 1px solid var(--border); } .cfg-sec-lbl { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; } .cfg-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .cfg-row-info { flex: 1; min-width: 0; } .cfg-row-title { font-size: 12px; font-weight: 500; } .cfg-row-sub { font-size: 11px; color: var(--text3); margin-top: 2px; line-height: 1.4; } .cfg-ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; min-width: 80px; } .cfg-num { width: 56px; text-align: center; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface); outline: none; } .cfg-num:focus { border-color: var(--accent); } .cfg-range { width: 80px; accent-color: var(--accent); } /* Footer do drawer */ .cfg-footer { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--bg); } .cfg-btn-primary { padding: 5px 14px; border-radius: 7px; border: none; background: var(--accent); color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .1s; } .cfg-btn-primary:hover { background: #1648c0; } .cfg-btn-ghost { padding: 5px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); font-family: inherit; font-size: 12px; cursor: pointer; transition: background .1s; } .cfg-btn-ghost:hover { background: var(--bg); } .cfg-btn-logout { color: var(--red); border-color: #fca5a5; } .cfg-btn-logout:hover { background: #fef2f2; } .cfg-btn-sec { width: 100%; padding: 6px; border-radius: 7px; border: 1px dashed var(--border2); background: none; color: var(--accent); font-family: inherit; font-size: 12px; cursor: pointer; transition: background .1s; } .cfg-btn-sec:hover { background: var(--bg); } /* Info de conta */ .cfg-user-info { padding: 4px 0; } .cfg-user-row { display: flex; align-items: center; gap: 10px; } .cfg-av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .cfg-user-nome { font-size: 12px; font-weight: 600; } .cfg-user-email { font-size: 11px; color: var(--text3); margin-top: 1px; } .cfg-user-role { font-size: 10px; color: var(--accent); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; } /* Lista de usuários */ .cfg-user-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); } .cfg-user-item:last-child { border-bottom: none; } .cfg-role-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; letter-spacing: .04em; } .cfg-role-sel { font-family: inherit; font-size: 11px; padding: 2px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); cursor: pointer; } .cfg-toggle-btn { font-family: inherit; font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); cursor: pointer; font-weight: 500; transition: background .1s; } .cfg-toggle-btn:hover { background: var(--bg); } .cfg-loading { font-size: 11px; color: var(--text3); padding: 8px 0; } /* Modal de convite dentro do drawer */ .cfg-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 300; align-items: center; justify-content: center; } .cfg-modal { background: var(--surface); border-radius: 12px; padding: 20px; width: min(360px, 90vw); box-shadow: 0 12px 40px rgba(0,0,0,.14); } .cfg-modal-title { font-size: 14px; font-weight: 600; margin-bottom: 14px; } .cfg-err { padding: 8px 10px; background: #fef2f2; border: 1px solid #fca5a5; border-radius: 6px; font-size: 11px; color: #991b1b; margin-bottom: 10px; line-height: 1.5; } /* ============================================================ DARK MODE OVERRIDES ============================================================ */ /* ── Layout base ─────────────────────────────────────────── */ html[data-theme="dark"] .mhdr { background: linear-gradient(180deg, #2d2d2f 0%, #2d2d2d 100%); } html[data-theme="dark"] .mfooter { background: linear-gradient(0deg, #252526 0%, #2d2d2d 100%); } html[data-theme="dark"] .sidebar { background: #1e1e1e; border-right-color: #3e3e42; } html[data-theme="dark"] .nav-item:hover { background: rgba(86,156,214,.1); color: var(--text); } html[data-theme="dark"] .nav-item.active { background: rgba(86,156,214,.16); color: var(--text); border-left: 2px solid #569cd6; padding-left: 8px; } @media (max-width: 768px) { html[data-theme="dark"] .sidebar { box-shadow: 6px 0 32px rgba(0,0,0,.7); } } html[data-theme="dark"] .topbar { background: #252526; border-bottom-color: #3e3e42; } html[data-theme="dark"] .sidebar-foot { border-top-color: #3e3e42; } html[data-theme="dark"] .sidebar-logout:hover { background: rgba(244,135,113,.15); color: var(--red); } /* ── Botões ──────────────────────────────────────────────── */ html[data-theme="dark"] .btn-clear-flt:hover { background: rgba(244,135,113,.12); color: var(--red); border-color: rgba(244,135,113,.4); } html[data-theme="dark"] .mclose { background: #3e3e42; border-color: #4e4e52; color: var(--text2); } html[data-theme="dark"] .mclose:hover { background: rgba(244,135,113,.18); color: #f48771; border-color: rgba(244,135,113,.35); } /* ── Tags (rgba suaves, mais legíveis) ───────────────────── */ html[data-theme="dark"] .tag.aneel { background: rgba(244,135,113,.14); color: #f48771; border: 1px solid rgba(244,135,113,.28); } html[data-theme="dark"] .tag.ouv { background: rgba(215,186,125,.12); color: #d7ba7d; border: 1px solid rgba(215,186,125,.25); } html[data-theme="dark"] .tag.rgc { background: rgba(78,201,148,.12); color: #4ec994; border: 1px solid rgba(78,201,148,.25); } html[data-theme="dark"] .tag.plc { background: rgba(86,156,214,.14); color: #7aa2f7; border: 1px solid rgba(86,156,214,.28); } html[data-theme="dark"] .tag.padrao { background: rgba(255,255,255,.06); color: var(--text2); border-color: #4e4e52; } html[data-theme="dark"] .tag.rnt { background: rgba(195,177,225,.12); color: #c3b1e1; border: 1px solid rgba(195,177,225,.25); } html[data-theme="dark"] .tag.exec { background: rgba(215,186,125,.12); color: #d7ba7d; } html[data-theme="dark"] .tag.atraso { background: rgba(244,135,113,.14); color: #f48771; border: 1px solid rgba(244,135,113,.3); font-weight: 600; } html[data-theme="dark"] .tag.parcial { background: rgba(215,186,125,.12); color: #d7ba7d; } html[data-theme="dark"] .tag.prog { background: rgba(86,156,214,.14); color: #569cd6; border: 1px solid rgba(86,156,214,.28); } html[data-theme="dark"] .tag.campo { background: rgba(86,156,214,.14); color: #7aa2f7; font-weight: 600; } html[data-theme="dark"] .tag.reprog { background: rgba(195,177,225,.14); color: #c3b1e1; } html[data-theme="dark"] .tag.carta { background: rgba(78,201,148,.12); color: #4ec994; } html[data-theme="dark"] .tag.finalizado { background: rgba(78,201,148,.15); color: #4ec994; border: 1px solid rgba(78,201,148,.28); font-weight: 600; } html[data-theme="dark"] .tag.erro { background: rgba(215,186,125,.12); color: #ce9178; } html[data-theme="dark"] .tag.tap { background: rgba(249,168,212,.12); color: #f9a8d4; } html[data-theme="dark"] .tag.sky { background: rgba(34,211,238,.12); color: #67e8f9; border: 1px solid rgba(34,211,238,.28); } /* O âmbar claro do tema claro sai ilegível sobre a célula escura — no escuro a tag vira fundo translúcido com texto claro, como as vizinhas. */ html[data-theme="dark"] .tag.capex { background: rgba(245,158,11,.14); color: #fcd34d; border: 1px solid rgba(245,158,11,.30); } html[data-theme="dark"] .tag.plano { background: rgba(148,163,184,.16); color: #cbd5e1; font-weight: 600; } /* ── Célula com entrega de carta — fundo tintado por tipo ── */ .cell-carta-1 { background: rgba(22, 163, 74, 0.07) !important; } .cell-carta-1:hover { background: rgba(22, 163, 74, 0.13) !important; } .cell-carta-2 { background: rgba(8, 145, 178, 0.07) !important; } .cell-carta-2:hover { background: rgba(8, 145, 178, 0.13) !important; } .cell-carta-3 { background: rgba(21, 128, 61, 0.11) !important; } .cell-carta-3:hover { background: rgba(21, 128, 61, 0.17) !important; } .cell-carta-n { background: rgba(22, 163, 74, 0.05) !important; } .cell-carta-n:hover { background: rgba(22, 163, 74, 0.10) !important; } /* Cores por classificação */ .cell-classif-aneel { background: rgba(220,38,38,0.07) !important; } .cell-classif-aneel:hover { background: rgba(220,38,38,0.13) !important; } .cell-classif-ouv { background: rgba(217,119,6,0.07) !important; } .cell-classif-ouv:hover { background: rgba(217,119,6,0.13) !important; } .cell-classif-ouv-gov { background: rgba(234,88,12,0.09) !important; } .cell-classif-ouv-gov:hover { background: rgba(234,88,12,0.16) !important; } .cell-classif-rgc { background: rgba(15,118,110,0.07) !important; } .cell-classif-rgc:hover { background: rgba(15,118,110,0.13) !important; } /* ── Células classificação dark ──────────────────────────── */ html[data-theme="dark"] .cell-classif-aneel { background: rgba(244,135,113,0.09) !important; } html[data-theme="dark"] .cell-classif-aneel:hover { background: rgba(244,135,113,0.17) !important; } html[data-theme="dark"] .cell-classif-ouv { background: rgba(215,186,125,0.09) !important; } html[data-theme="dark"] .cell-classif-ouv:hover { background: rgba(215,186,125,0.17) !important; } html[data-theme="dark"] .cell-classif-ouv-gov { background: rgba(215,186,125,0.09) !important; } html[data-theme="dark"] .cell-classif-ouv-gov:hover { background: rgba(215,186,125,0.18) !important; } html[data-theme="dark"] .cell-classif-rgc { background: rgba(78,201,148,0.09) !important; } html[data-theme="dark"] .cell-classif-rgc:hover { background: rgba(78,201,148,0.17) !important; } /* ── Células com OS (fundo sutil + hover accent) ─────────── */ html[data-theme="dark"] .cell { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); } html[data-theme="dark"] .cell:hover { background: rgba(86,156,214,.09); border-color: rgba(86,156,214,.32); } /* ── Células vazias dark ─────────────────────────────────── */ html[data-theme="dark"] .cell-empty { border-color: rgba(255,255,255,.0); } html[data-theme="dark"] .cell-empty:hover { background: rgba(86,156,214,.08); border-color: rgba(86,156,214,.38) !important; } html[data-theme="dark"] .cell-empty::after { color: rgba(255,255,255,.18); } html[data-theme="dark"] .cell-empty:hover::after { color: #569cd6; } /* ── Coluna de hoje dark ─────────────────────────────────── */ html[data-theme="dark"] th.tod { background: rgba(86,156,214,.18); border-bottom: 2px solid #569cd6; } html[data-theme="dark"] th.tod .dn { color: #569cd6; } /* ── PLC exclusive stripe ──────────────────────────────────── */ .cell-tipo-plc { background: rgba(37,99,235,0.05) !important; border-top: 2px solid #2563eb !important; } .cell-tipo-plc:hover { background: rgba(37,99,235,0.10) !important; } html[data-theme="dark"] .cell-tipo-plc { background: rgba(86,156,214,0.08) !important; border-top: 2px solid #569cd6 !important; } html[data-theme="dark"] .cell-tipo-plc:hover { background: rgba(86,156,214,0.15) !important; } /* ── OS meta row (UC / Trafo / SGM) no modal de célula ─────── */ .osm-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 10px; color: var(--text3); } .osm-meta span { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; } /* ── Tooltip balão hover ───────────────────────────────────── */ #gradeTip { display:none; position:fixed; z-index:9998; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:11px; line-height:1.7; box-shadow:0 4px 16px rgba(0,0,0,.14); pointer-events:none; max-width:240px; } #gradeTip strong { font-weight:700; } #gradeTip .tip-lbl { color:var(--text3); } /* ── Indicadores de usuários online ───────────────────────── */ .online-bar { display:flex; align-items:center; gap:4px; padding:0 6px; } .online-dot { width:22px; height:22px; border-radius:50%; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:default; flex-shrink:0; } .cell-presence { position:absolute; top:2px; left:3px; display:flex; gap:2px; z-index:2; } .cell-presence .cp-u { width:12px; height:12px; border-radius:50%; color:#fff; font-size:7px; font-weight:700; display:flex; align-items:center; justify-content:center; } /* ── Células carta dark ──────────────────────────────────── */ html[data-theme="dark"] .cell-carta-1 { background: rgba(78,201,148, 0.09) !important; } html[data-theme="dark"] .cell-carta-1:hover { background: rgba(78,201,148, 0.17) !important; } html[data-theme="dark"] .cell-carta-2 { background: rgba(34,211,238, 0.07) !important; } html[data-theme="dark"] .cell-carta-2:hover { background: rgba(34,211,238, 0.14) !important; } html[data-theme="dark"] .cell-carta-3 { background: rgba(134,239,172, 0.10) !important; } html[data-theme="dark"] .cell-carta-3:hover { background: rgba(134,239,172, 0.18) !important; } html[data-theme="dark"] .cell-carta-n { background: rgba(78,201,148, 0.06) !important; } html[data-theme="dark"] .cell-carta-n:hover { background: rgba(78,201,148, 0.13) !important; } /* ── Cnt-pills dark ──────────────────────────────────────── */ html[data-theme="dark"] .cp-ok { background: rgba(78,201,148,.15); color: #4ec994; border-color: rgba(78,201,148,.28); } html[data-theme="dark"] .cp-w { background: rgba(215,186,125,.15); color: #d7ba7d; border-color: rgba(215,186,125,.28); } html[data-theme="dark"] .cp-d { background: rgba(244,135,113,.15); color: #f48771; border-color: rgba(244,135,113,.28); } html[data-theme="dark"] .cp-prox { background: rgba(215,186,125,.15); color: #d7ba7d; border-color: rgba(215,186,125,.28); } /* ── Stats dark ──────────────────────────────────────────── */ html[data-theme="dark"] .grade-head { background: #252526; border-bottom-color: #3e3e42; } html[data-theme="dark"] .stat { background: #252526; border-color: #3e3e42; } html[data-theme="dark"] .stat:hover { border-color: #4e4e52; } /* ── Modal dark ──────────────────────────────────────────── */ html[data-theme="dark"] .modal { background: #2d2d2d; border-color: rgba(255,255,255,.08); box-shadow: 0 24px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06); } html[data-theme="dark"] .grade-card { background: #252526; border-color: #3e3e42; } /* ── Forms dark ──────────────────────────────────────────── */ html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: #1e1e1e; border-color: #3e3e42; color: var(--text); } html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus { border-color: #569cd6; box-shadow: 0 0 0 2px rgba(86,156,214,.18); } html[data-theme="dark"] .cfg-err { background: rgba(244,135,113,.1); border-color: rgba(244,135,113,.35); color: #f48771; } /* ── Linha equipe (th-r) dark ────────────────────────────── */ html[data-theme="dark"] tr.th-r td { background: rgba(255,255,255,.018); } /* ── Linhas timeline dark ─────────────────────────────────── */ html[data-theme="dark"] .tlr.done .tlc { box-shadow: 0 0 0 3px rgba(78,201,148,.2); } html[data-theme="dark"] .tlr.act .tlc { box-shadow: 0 0 0 3px rgba(86,156,214,.2); } html[data-theme="dark"] .tlr.dang .tlc { box-shadow: 0 0 0 3px rgba(244,135,113,.2); } html[data-theme="dark"] .tlr.warn .tlc { box-shadow: 0 0 0 3px rgba(215,186,125,.2); } /* ── OSM meta (UC/Trafo/SGM) dark ────────────────────────── */ html[data-theme="dark"] .osm-meta span { background: #1e1e1e; border-color: #3e3e42; } /* ── Toast dark ──────────────────────────────────────────── */ html[data-theme="dark"] .toast { background: #3e3e42; color: #cccccc; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 4px 20px rgba(0,0,0,.55); } /* ── Flatpickr dark ──────────────────────────────────────── */ html[data-theme="dark"] .flatpickr-calendar { background: #2d2d2d; border-color: #4e4e52; box-shadow: 0 8px 32px rgba(0,0,0,.65); } html[data-theme="dark"] .flatpickr-months { background: #2d2d2d; } html[data-theme="dark"] .flatpickr-months .flatpickr-month { color: #cccccc; fill: #cccccc; } html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { background: #2d2d2d; color: #cccccc; } html[data-theme="dark"] .flatpickr-weekday { color: #9d9d9d; } html[data-theme="dark"] .flatpickr-day { color: #cccccc; } html[data-theme="dark"] .flatpickr-day:hover { background: #3e3e42; border-color: #4e4e52; } html[data-theme="dark"] .flatpickr-day.selected, html[data-theme="dark"] .flatpickr-day.startRange, html[data-theme="dark"] .flatpickr-day.endRange { background: #569cd6; border-color: #569cd6; color: #fff; } html[data-theme="dark"] .flatpickr-day.inRange { background: rgba(86,156,214,.18); border-color: rgba(86,156,214,.18); color: #cccccc; } html[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: #4e4e52; } html[data-theme="dark"] .numInputWrapper input { color: #cccccc; background: #2d2d2d; } html[data-theme="dark"] .flatpickr-prev-month, html[data-theme="dark"] .flatpickr-next-month { fill: #9d9d9d; } /* ── Dropdown de busca com autocomplete ──────────────────── */ .search-drop { position: absolute; top: calc(100% + 4px); left: 0; min-width: 320px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 200; overflow: hidden; } .search-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; cursor: pointer; font-size: 12px; border-bottom: 1px solid var(--border); } .search-item:last-child { border-bottom: none; } .search-item:hover { background: var(--bg2); } .search-item-empty { padding: 10px 12px; font-size: 12px; color: var(--text3); } select:disabled { opacity: .6; cursor: not-allowed; } .capex-dia-destaque { /* coluna amarela removida — apenas scroll */ } .rnt-dia-destaque { /* coluna amarela removida — apenas scroll */ } .rnt-cell-destaque { outline: 3px solid var(--accent) !important; outline-offset: -2px; z-index: 2; position: relative; animation: cellPulse 0.7s ease-in-out 3; } @keyframes cellPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(86,156,214,.5); } 40% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(86,156,214,.15); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(86,156,214,0); } } html[data-theme="dark"] .rnt-cell-destaque { outline-color: #569cd6 !important; box-shadow: 0 0 0 2px #569cd6, 0 0 14px rgba(86,156,214,.4) !important; } .rnt-equipe-destaque { background: #eff6ff !important; box-shadow: inset 0 2px 0 #3b82f6, inset 0 -2px 0 #3b82f6; } /* ── Atestado / Reprogramação em Massa ───────────────────── */ .atest-os-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; font-size: 12px; transition: background .1s; } .atest-os-row:hover { background: var(--bg); } .atest-os-row input[type="checkbox"] { flex-shrink: 0; cursor: pointer; accent-color: var(--accent); } .grade-ctx-menu { position: fixed; z-index: 300; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.14); min-width: 220px; overflow: hidden; animation: ctxFadeIn .1s ease; } @keyframes ctxFadeIn { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } } .grade-ctx-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; font-size: 12px; color: var(--text); transition: background .1s; } .grade-ctx-item:hover { background: var(--bg); } .grade-ctx-item-icon { font-size: 15px; flex-shrink: 0; } .grade-ctx-item-title { font-weight: 600; } .grade-ctx-item-sub { font-size: 10px; color: var(--text3); line-height: 1.3; } html[data-theme="dark"] .atest-os-row { background: #252526; border-color: #3e3e42; } html[data-theme="dark"] .atest-os-row:hover { background: #2d2d2d; } html[data-theme="dark"] .grade-ctx-menu { background: #2d2d2d; border-color: #4e4e52; box-shadow: 0 8px 32px rgba(0,0,0,.7); } html[data-theme="dark"] .grade-ctx-item:hover { background: rgba(86,156,214,.09); } .rnt-dia-destaque.rnt-equipe-destaque { background: #fde68a !important; box-shadow: inset 2px 0 0 #d97706, inset -2px 0 0 #d97706, inset 0 2px 0 #3b82f6, inset 0 -2px 0 #3b82f6; } /* ============================================================ DRAG & DROP — Seleção, Ghost, Drop Target e Modal ============================================================ */ /* Cursor de arrastar nas células */ .cell:not(.folga) { cursor: grab; user-select: none; } .cell:not(.folga):active { cursor: grabbing; } /* Célula selecionada (Ctrl+click / Shift+click) */ .cell.dd-selected { outline: 2px solid var(--accent); outline-offset: -1px; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; border-radius: 5px; position: relative; z-index: 1; } /* Drop target — td alvo durante o drag */ td.dd-drop-target { background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important; outline: 2px dashed var(--accent) !important; outline-offset: -2px !important; border-radius: 4px; transition: background .1s; } /* Ghost element — segue o cursor */ #dd-ghost { position: fixed; pointer-events: none; z-index: 9999; background: var(--bg); border: 1.5px solid var(--accent); border-radius: 8px; padding: 7px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.22); opacity: .92; white-space: nowrap; color: var(--text1); transition: opacity .1s; } /* Modal overlay */ #dd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.48); z-index: 9200; display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px); } /* Modal box */ #dd-modal { background: var(--bg); border-radius: 12px; padding: 24px; width: min(500px, 92vw); max-height: 82vh; overflow-y: auto; box-shadow: 0 12px 48px rgba(0,0,0,.28); border: 1px solid var(--border); animation: ddFadeIn .15s ease; } @keyframes ddFadeIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } } /* Dark mode */ html[data-theme="dark"] #dd-ghost { background: #2d2d2d; box-shadow: 0 6px 24px rgba(0,0,0,.7); } html[data-theme="dark"] #dd-modal { background: #2d2d2d; box-shadow: 0 12px 48px rgba(0,0,0,.7); } html[data-theme="dark"] .online-dot { box-shadow: 0 0 0 2px #1e1e1e; } html[data-theme="dark"] .rnt-equipe-destaque { background: rgba(86,156,214,.1) !important; box-shadow: inset 0 2px 0 #569cd6, inset 0 -2px 0 #569cd6; } /* ── th.wk dark: sem opacity (evita border preta Sáb→Dom) ─── */ html[data-theme="dark"] th.wk { opacity: 1; background: #1e1e1e; color: var(--text3); } html[data-theme="dark"] th.wk .dn { color: #4e4e52; } /* ── Alert bar dark ──────────────────────────────────────── */ html[data-theme="dark"] .alert { background: rgba(244,135,113,.1); border-bottom-color: rgba(244,135,113,.25); } html[data-theme="dark"] .alert-txt { color: #f48771; } html[data-theme="dark"] .chip-r { background: rgba(244,135,113,.15); color: #f48771; border-color: rgba(244,135,113,.3); } html[data-theme="dark"] .chip-a { background: rgba(215,186,125,.15); color: #d7ba7d; border-color: rgba(215,186,125,.3); } /* ── Painel de notificações dark ─────────────────────────── */ html[data-theme="dark"] .np { box-shadow: -4px 0 24px rgba(0,0,0,.4); } html[data-theme="dark"] .ni { border-bottom-color: #3e3e42; } html[data-theme="dark"] .ni:hover { background: #2d2d2d; } /* ── Separador de mês ────────────────────────────────────── */ th.mes-novo { border-left: 2px solid var(--accent) !important; } .mes-sep-lbl { font-size: 8px; font-weight: 700; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; line-height: 1; margin-bottom: 2px; white-space: nowrap; } td[data-ini] { border-left: 2px solid var(--accent) !important; } .cell-no-mes { opacity: 0.15; pointer-events: none; cursor: default !important; } /* ── Coluna DOMINGO — texto vertical ─────────────────────── */ .td-dom { padding: 0 !important; } .td-dom .cell.folga { height: 100%; min-height: unset; background: transparent !important; } .td-dom .fl { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: 0.14em; font-size: 9px; font-weight: 500; user-select: none; } html[data-theme="dark"] .td-dom { background: rgba(255,255,255,.012); } html[data-theme="dark"] .td-dom .fl { opacity: 0.35; } /* ── Animacao de spinner (mapa-grade) ──────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } /* ── Menu de contexto das grades (CAPEX / Linha Viva) ──────── Um estilo só para os dois: os menus nasceram como codigo morto — o JS chamava getElementById('capexCtxMenu') e o elemento nao existia em HTML nenhum (achado em 05/08/2026). Ao construi-los, duas copias de CSS seriam duas copias para divergir, que e exatamente o que ja aconteceu com as listas de status dos dois modulos. */ .ctx-menu { display: none; position: fixed; min-width: 190px; padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.16); /* Acima de tudo que a grade desenha (.ov usa 100, o maior da grade e 400) e ABAIXO do toast (9998/9999): a mensagem de erro precisa aparecer por cima do menu que a disparou. */ z-index: 4000; user-select: none; } .ctx-item { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 9px; border: 0; border-radius: 5px; background: none; font: inherit; font-size: 12px; color: var(--text); text-align: left; cursor: pointer; } .ctx-item:hover { background: var(--surface); } .ctx-item.danger { color: var(--red); } .ctx-sep { height: 1px; margin: 4px 2px; background: var(--border); } .ctx-lbl { padding: 5px 9px 3px; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); } /* O ponto colorido do status, mesma linguagem visual do .kb-dot da timeline */ .ctx-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } /* ── Paleta de evolução da programação (statusPaleta, supabase.js) ─────── Pinta a CÉLULA inteira, não só a etiqueta: a área pediu para ler a evolução de relance, e uma etiqueta de 9px não se lê de relance. Cor + borda esquerda + o texto da etiqueta — nunca só cor (daltonismo). */ .cell.sp-cinza { background:#f1f5f9; box-shadow: inset 3px 0 0 #94a3b8; } .cell.sp-cinza:hover { background:#f1f5f9; filter:brightness(.97); } .tag.sp-cinza { background:transparent; color:#475569; font-weight:600; } .le-d.sp-d-cinza { background:#94a3b8; } html[data-theme="dark"] .cell.sp-cinza { background:rgba(148,163,184,.22); box-shadow: inset 3px 0 0 #94a3b8; } html[data-theme="dark"] .cell.sp-cinza:hover { background:rgba(148,163,184,.3); filter:none; } html[data-theme="dark"] .tag.sp-cinza { background:transparent; color:#cbd5e1; } .cell.sp-azul { background:#eff6ff; box-shadow: inset 3px 0 0 #3b82f6; } .cell.sp-azul:hover { background:#eff6ff; filter:brightness(.97); } .tag.sp-azul { background:transparent; color:#1d4ed8; font-weight:600; } .le-d.sp-d-azul { background:#3b82f6; } html[data-theme="dark"] .cell.sp-azul { background:rgba(86,156,214,.22); box-shadow: inset 3px 0 0 #3b82f6; } html[data-theme="dark"] .cell.sp-azul:hover { background:rgba(86,156,214,.3); filter:none; } html[data-theme="dark"] .tag.sp-azul { background:transparent; color:#7aa2f7; } .cell.sp-vermelho { background:#fef2f2; box-shadow: inset 3px 0 0 #dc2626; } .cell.sp-vermelho:hover { background:#fef2f2; filter:brightness(.97); } .tag.sp-vermelho { background:transparent; color:#b91c1c; font-weight:600; } .le-d.sp-d-vermelho { background:#dc2626; } html[data-theme="dark"] .cell.sp-vermelho { background:rgba(244,135,113,.22); box-shadow: inset 3px 0 0 #dc2626; } html[data-theme="dark"] .cell.sp-vermelho:hover { background:rgba(244,135,113,.3); filter:none; } html[data-theme="dark"] .tag.sp-vermelho { background:transparent; color:#f48771; } .cell.sp-amarelo { background:#fffbeb; box-shadow: inset 3px 0 0 #f59e0b; } .cell.sp-amarelo:hover { background:#fffbeb; filter:brightness(.97); } .tag.sp-amarelo { background:transparent; color:#92400e; font-weight:600; } .le-d.sp-d-amarelo { background:#f59e0b; } html[data-theme="dark"] .cell.sp-amarelo { background:rgba(215,186,125,.22); box-shadow: inset 3px 0 0 #f59e0b; } html[data-theme="dark"] .cell.sp-amarelo:hover { background:rgba(215,186,125,.3); filter:none; } html[data-theme="dark"] .tag.sp-amarelo { background:transparent; color:#d7ba7d; } .cell.sp-roxo { background:#f5f3ff; box-shadow: inset 3px 0 0 #8b5cf6; } .cell.sp-roxo:hover { background:#f5f3ff; filter:brightness(.97); } .tag.sp-roxo { background:transparent; color:#6d28d9; font-weight:600; } .le-d.sp-d-roxo { background:#8b5cf6; } html[data-theme="dark"] .cell.sp-roxo { background:rgba(195,177,225,.22); box-shadow: inset 3px 0 0 #8b5cf6; } html[data-theme="dark"] .cell.sp-roxo:hover { background:rgba(195,177,225,.3); filter:none; } html[data-theme="dark"] .tag.sp-roxo { background:transparent; color:#c3b1e1; } .cell.sp-verde { background:#f0fdf4; box-shadow: inset 3px 0 0 #16a34a; } .cell.sp-verde:hover { background:#f0fdf4; filter:brightness(.97); } .tag.sp-verde { background:transparent; color:#15803d; font-weight:600; } .le-d.sp-d-verde { background:#16a34a; } html[data-theme="dark"] .cell.sp-verde { background:rgba(106,176,110,.22); box-shadow: inset 3px 0 0 #16a34a; } html[data-theme="dark"] .cell.sp-verde:hover { background:rgba(106,176,110,.3); filter:none; } html[data-theme="dark"] .tag.sp-verde { background:transparent; color:#8fd18f; } .cell.sp-rosa { background:#fdf2f8; box-shadow: inset 3px 0 0 #db2777; } .cell.sp-rosa:hover { background:#fdf2f8; filter:brightness(.97); } .tag.sp-rosa { background:transparent; color:#be185d; font-weight:600; } .le-d.sp-d-rosa { background:#db2777; } html[data-theme="dark"] .cell.sp-rosa { background:rgba(236,140,184,.22); box-shadow: inset 3px 0 0 #db2777; } html[data-theme="dark"] .cell.sp-rosa:hover { background:rgba(236,140,184,.3); filter:none; } html[data-theme="dark"] .tag.sp-rosa { background:transparent; color:#f0a6c9; } /* Copiar/colar (drag-drop.js): o cartão copiado fica tracejado até colar. */ .cell.dd-copiado { outline: 2px dashed var(--accent); outline-offset: -2px; } /* Etiqueta 2°/3° (reprogramações) — a mesma da grade RNT. */ .oc-badge { align-self: flex-end; margin-top: auto; font-size: 9px; font-weight: 700; background: #94a3b8; color: #fff; border-radius: 3px; padding: 0 3px; line-height: 16px; } /* ── Dropdown próprio dos filtros (gradeSelectMelhorar, grade-comum.js) ──── */ .gs { position: relative; display: inline-block; } .gs-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 130px; padding: 6px 10px; font: inherit; font-size: 11px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: border-color .12s, box-shadow .12s; } .gs-btn:hover { border-color: var(--border2); } .gs.open .gs-btn { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26,86,219,.12); } .gs-btn:disabled { opacity: .55; cursor: default; } .gs-car { font-size: 9px; color: var(--text3); transition: transform .12s; } .gs.open .gs-car { transform: rotate(180deg); } .gs-panel { display: none; position: absolute; top: calc(100% + 5px); left: 0; min-width: 100%; width: max-content; max-width: 320px; max-height: 340px; overflow-y: auto; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; z-index: 300; box-shadow: 0 14px 38px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06); } .gs.open .gs-panel { display: block; } .gs-grp { padding: 9px 10px 4px; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); } .gs-grp:first-child { padding-top: 5px; } .gs-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 10px; border-radius: 6px; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; } .gs-opt:hover { background: var(--bg); } .gs-opt.on { background: rgba(26,86,219,.08); color: var(--accent); font-weight: 600; } .gs-ck { font-size: 11px; } html[data-theme="dark"] .gs-btn { background: #1e1e1e; border-color: #3e3e42; } html[data-theme="dark"] .gs-panel { background: #252526; border-color: #3e3e42; box-shadow: 0 14px 38px rgba(0,0,0,.5); } html[data-theme="dark"] .gs-opt:hover { background: #2d2d2d; } html[data-theme="dark"] .gs-opt.on { background: rgba(86,156,214,.16); color: #7aa2f7; } /* ── Formulário largo e sem corte ───────────────────────────────────────── O grid era `1fr 1fr`, e `1fr` NÃO encolhe abaixo do conteúdo: um