*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --laranja: #ff7a00; --laranja-esc: #e96a00; --laranja-claro: #fff3e8; --preto: #17181c; --preto-2: #23252b; /* Texto "forte" (títulos, nomes, valores em destaque) - separado de --preto porque --preto também é o fundo escuro fixo da sidebar/login/toast (que continua escuro nos dois temas); --texto-forte é o que precisa virar claro no tema escuro pra não ficar preto-no-preto. */ --texto-forte: #17181c; --bg: #f3f4f6; --surface: #ffffff; --border: #e5e7eb; --border-forte: #d1d5db; --text: #1b1d22; --muted: #6b7280; --danger: #d23a3a; --danger-bg: #fdecec; --success: #16a34a; --success-bg: #dcfce7; --warning: #b45309; --warning-bg: #fef9c3; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,.08); --sidebar-w: 236px; --sidebar-w-colapsada: 68px; } /* ===================== Tema escuro ===================== Ativado via data-tema="escuro" no (js/ui.js define isso ao carregar e quando a pessoa troca no perfil). O site inteiro usa estas variáveis, então isso já cobre a maior parte da tela - o bloco abaixo ajusta só o punhado de cores fixas (pills de status, avisos) que não usam variável. */ :root[data-tema="escuro"] { --laranja-claro: #3a2b1a; --preto: #101114; --preto-2: #1a1c21; --bg: #16171b; --surface: #1e2025; --border: #33363d; --border-forte: #454952; --text: #e7e8ec; --muted: #9aa0ab; --danger: #f0605c; --danger-bg: #402323; --success: #34d399; --success-bg: #16332a; --warning: #f2a93c; --warning-bg: #3a2f14; --shadow: 0 1px 3px rgba(0,0,0,.4); --texto-forte: #f5f6f8; } :root[data-tema="escuro"] .s-agendado { background: #123249; color: #7dd3fc; } :root[data-tema="escuro"] .s-visita { background: #2c1f4a; color: #c4b5fd; } :root[data-tema="escuro"] .s-concluido { background: #163a26; color: #6ee7a8; } :root[data-tema="escuro"] .s-pendencia { background: #402323; color: #fca5a5; } :root[data-tema="escuro"] .aviso { background: #3a2b17; border-color: #6b4a1e; color: #f2c98a; } :root[data-tema="escuro"] .aviso-pendencia-existente { background: #3a3117; border-color: #6b5c1e; } :root[data-tema="escuro"] .aviso-pendencia-existente, :root[data-tema="escuro"] .link-pendencia { color: #ecd48f; } :root[data-tema="escuro"] .cel.cel-ferias { background: repeating-linear-gradient(135deg, var(--bg) 0 8px, #3a2323 8px 16px); } :root[data-tema="escuro"] .cel.cel-ferias:hover { background: repeating-linear-gradient(135deg, var(--laranja-claro) 0 8px, #522b2b 8px 16px); } /* No claro, o dia de hoje ganha um fundo creme (#fffaf5); no escuro isso vira uma mancha branca fora do lugar - mantém o fundo normal e reforça só com uma borda laranja por dentro da célula. */ :root[data-tema="escuro"] .cel.dia-hoje { background: var(--surface); box-shadow: inset 0 0 0 1px var(--laranja); } /* A página nunca deve rolar/arrastar de lado (só o conteúdo que precisa, como a grade semanal, que já tem seu próprio scroll horizontal interno - ver ".grade-wrap"/".dia-colunas" mais abaixo, que reabrem o gesto horizontal só ali dentro). overflow-x cobre mouse/scrollbar; touch-action + overscroll-behavior cobrem o arrastar com o dedo no celular (é isso que "overflow-x" sozinho não pega). */ html { overflow-x: hidden; overscroll-behavior-x: none; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; min-height: 100vh; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; } /* ===================== Sidebar + navegação ===================== Fixa na lateral esquerda, altura cheia. Body ganha margin-left do tamanho dela (var(--sidebar-w) ou --sidebar-w-colapsada) pra empurrar o conteúdo - ver body.tem-sidebar logo abaixo. */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--preto); display: flex; flex-direction: column; z-index: 30; transition: width .18s ease; overflow: hidden; } body.sidebar-colapsada .sidebar { width: var(--sidebar-w-colapsada); } .sidebar-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 14px 14px; flex: none; min-height: 24px; border-bottom: 1px solid rgba(255,255,255,.08); } .sidebar-marca { min-width: 0; } .sidebar-titulo { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-sub { font-size: 12px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Minimalista de propósito: sem borda/fundo, só o ícone - a seta gira pra indicar a direção (recolher/expandir) em vez de trocar de glifo. */ .sidebar-toggle { flex: none; width: 24px; height: 24px; border-radius: 6px; background: none; border: none; color: #9ca3af; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; } .sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,.08); } .sidebar-toggle svg { width: 15px; height: 15px; transition: transform .18s ease; } .sidebar-toggle.girado svg { transform: rotate(180deg); } .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px; display: flex; flex-direction: column; gap: 2px; } .sidebar-nav a { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: #9ca3af; text-decoration: none; padding: 9px 11px; border-radius: var(--radius); transition: .15s; white-space: nowrap; overflow: hidden; } .sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,.08); } .sidebar-nav a.ativo { color: #fff; background: var(--laranja); } .sidebar-icone { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .sidebar-icone svg { width: 18px; height: 18px; } .sidebar-texto { overflow: hidden; text-overflow: ellipsis; } .sidebar-rodape { flex: none; padding: 10px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 2px; } .sidebar-usuario { display: flex; align-items: center; gap: 12px; width: 100%; font-size: 12px; color: #9ca3af; padding: 8px 11px; white-space: nowrap; overflow: hidden; text-align: left; background: none; border: none; border-radius: var(--radius); cursor: pointer; transition: .15s; } .sidebar-usuario:hover { color: #fff; background: rgba(255,255,255,.08); } .btn-sair { display: flex; align-items: center; gap: 12px; width: 100%; font-size: 13px; font-weight: 600; color: #9ca3af; text-align: left; background: none; border: none; border-radius: var(--radius); padding: 9px 11px; cursor: pointer; transition: .15s; white-space: nowrap; overflow: hidden; } .btn-sair:hover { color: #fff; background: rgba(255,255,255,.08); } /* Colapsada: só ícone, centralizado - o nome de cada link vira tooltip nativo (title). */ body.sidebar-colapsada .sidebar-texto, body.sidebar-colapsada .sidebar-marca { display: none; } body.sidebar-colapsada .sidebar-topo { justify-content: center; padding: 14px 8px 12px; } body.sidebar-colapsada .sidebar-nav a, body.sidebar-colapsada .sidebar-usuario, body.sidebar-colapsada .btn-sair { justify-content: center; gap: 0; } /* ===================== Layout ===================== */ body.tem-sidebar { margin-left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); transition: margin-left .18s ease, width .18s ease; } body.tem-sidebar.sidebar-colapsada { margin-left: var(--sidebar-w-colapsada); width: calc(100% - var(--sidebar-w-colapsada)); } .container { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1rem 3rem; } .container-estreito { max-width: 560px; } .barra-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 1rem; } .periodo-nav { display: flex; align-items: center; gap: 8px; } .periodo-titulo { font-size: 18px; font-weight: 700; color: var(--texto-forte); min-width: 230px; text-transform: capitalize; white-space: nowrap; } .btn-nav { font-size: 15px; line-height: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; cursor: pointer; color: var(--text); transition: .15s; } .btn-nav:hover { border-color: var(--laranja); color: var(--laranja-esc); } .btn-acoes { font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; cursor: pointer; color: var(--text); font-weight: 500; transition: .15s; } .btn-acoes:hover { border-color: var(--laranja); color: var(--laranja); } .btn-ajuda { width: 24px; height: 24px; border-radius: 50%; flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; justify-content: center; } .btn-ajuda:hover { border-color: var(--laranja); color: var(--laranja); } .ajuda-status-item { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .ajuda-status-item:last-child { border-bottom: none; } .ajuda-status-item .etiqueta { flex: none; } .input-nav-data { width: auto; height: 33px; font-size: 13px; line-height: 1; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); padding: 0 10px; background: var(--surface); color: var(--text); cursor: pointer; } /* ===================== Barra de filtros ===================== */ .filtros { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 1rem; box-shadow: var(--shadow); } .filtro-grupo { display: flex; flex-direction: column; gap: 4px; } .filtro-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } /* Campos do filtro têm largura própria - não herdam o width:100% dos formulários */ .filtros input[type="text"], .filtros select { width: auto; min-width: 170px; font-size: 14px; padding: 9px 11px; } .filtros .filtro-grupo > .chips { padding-top: 2px; } /* Combobox: input + painel de sugestões estilizado (substitui o ) */ .combo { position: relative; } .combo input { width: 100%; padding-right: 30px !important; } /* Seta desenhada por nós - some quando o painel está aberto (vira "X" mental) */ .combo::after { content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; pointer-events: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .15s; } .combo.aberto::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--laranja); } .combo-painel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,18,22,.16); padding: 4px; max-height: 260px; overflow-y: auto; } .combo-item { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; font-size: 14px; color: var(--text); padding: 9px 10px; border-radius: 7px; cursor: pointer; } .combo-item:hover { background: var(--laranja-claro); color: var(--laranja-esc); } .combo-todos { color: var(--muted); border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 2px; } .combo-vazio { padding: 10px; font-size: 13px; color: var(--muted); text-align: center; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 1.25rem; } .card-metrica { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; box-shadow: var(--shadow); border-top: 3px solid var(--laranja); } .card-metrica .label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .card-metrica .valor { font-size: 26px; font-weight: 700; color: var(--texto-forte); } .card-metrica.clicavel { cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; } .card-metrica.clicavel:hover { border-color: var(--danger); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); } .atualizando { opacity: .45; pointer-events: none; transition: opacity .15s ease; } .painel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; } .secao-titulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .aviso { background: var(--laranja-claro); border: 1px solid #ffd4a3; border-left: 4px solid var(--laranja); border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 13px; color: #7a4a12; margin-bottom: 1rem; } .vazio { padding: 2rem; text-align: center; color: var(--muted); font-size: 14px; } /* Aviso no "Novo serviço": esse cliente já tem pendência(s) esperando data. */ .aviso-pendencia-existente { background: var(--warning-bg); border: 1px solid #fde68a; border-left: 4px solid var(--warning); border-radius: var(--radius); padding: 0.65rem 0.85rem; font-size: 13px; color: #92620a; margin-top: 8px; line-height: 1.5; } .link-pendencia { background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: #92620a; text-decoration: underline; cursor: pointer; } .link-pendencia:hover { color: var(--laranja-esc); } /* ===================== Status ===================== */ .status-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; line-height: 1.4; white-space: nowrap; } .s-agendado { background: #e0f2fe; color: #0369a1; } .s-visita { background: #ede9fe; color: #6d28d9; } .s-concluido { background: #dcfce7; color: #15803d; } .s-pendencia { background: #fee2e2; color: #b91c1c; } .s-cancelado { background: var(--bg); color: var(--muted); } .s-terceirizado { background: var(--warning-bg); color: var(--warning); } .select-status { font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; background: var(--surface); color: var(--text); cursor: pointer; } /* ===================== Grade semanal ===================== */ .grade-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); overflow-x: auto; touch-action: pan-x pan-y; /* reabre o arrastar de lado só aqui dentro (body bloqueia o resto) */ } table.grade { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 900px; table-layout: fixed; } table.grade th, table.grade td { border-bottom: 1px solid var(--border); vertical-align: top; } table.grade th { text-align: left; padding: 10px 12px; background: var(--bg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; position: sticky; top: 0; z-index: 3; width: 130px; } table.grade th.col-instalador { width: 180px; } table.grade th.dia-hoje { color: var(--laranja-esc); background: var(--laranja-claro); } table.grade th .dia-num { display: block; font-size: 15px; color: var(--text); margin-top: 2px; } table.grade th.dia-hoje .dia-num { color: var(--laranja-esc); } .col-instalador { width: 180px; min-width: 180px; position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--border); padding: 10px 12px; } th.col-instalador { z-index: 4; background: var(--bg); } .inst-nome { font-size: 14px; font-weight: 700; color: var(--texto-forte); } .inst-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } .linha-grupo td { background: var(--bg); padding: 5px 12px !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); position: sticky; left: 0; } .linha-sem-dono .col-instalador { background: var(--laranja-claro); } .linha-sem-dono .inst-nome { color: var(--laranja-esc); } .cel { padding: 6px; width: 130px; height: 84px; transition: background .12s; border-left: 1px solid var(--border); } .cel:hover { background: var(--laranja-claro); cursor: copy; } .cel.drop-alvo { background: #ffe8cc; box-shadow: inset 0 0 0 2px var(--laranja); } .cel.dia-hoje { background: #fffaf5; } .cel.cel-ferias { background: repeating-linear-gradient(135deg, var(--bg) 0 8px, #fdecec 8px 16px); } .cel.cel-ferias:hover { background: repeating-linear-gradient(135deg, var(--laranja-claro) 0 8px, #ffd9d9 8px 16px); } .cartao { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--laranja); border-radius: 6px; padding: 6px 8px; margin-bottom: 5px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: box-shadow .12s, transform .12s; height: 92px; overflow: hidden; display: flex; flex-direction: column; } .cartao:hover { box-shadow: 0 3px 8px rgba(0,0,0,.14); transform: translateY(-1px); } .cartao.arrastando { opacity: .45; cursor: grabbing; } .cartao-cliente { font-size: 13px; font-weight: 700; color: var(--texto-forte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cartao-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: normal; overflow-wrap: break-word; } .cartao-rodape { display: flex; align-items: center; gap: 5px; margin-top: auto; flex-wrap: wrap; overflow: hidden; } .cartao.b-visita { border-left-color: #7c3aed; } .cartao.b-concluido { border-left-color: var(--success); opacity: .78; } .cartao.b-pendencia { border-left-color: var(--danger); background: var(--danger-bg); } .cartao.b-cancelado { border-left-color: var(--muted); opacity: .55; } .cartao.b-cancelado .cartao-cliente { text-decoration: line-through; } .mini-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--bg); color: var(--muted); white-space: nowrap; } .mini-tag.dupla { background: var(--laranja-claro); color: var(--laranja-esc); } .mini-tag.ferias { background: var(--danger-bg); color: var(--danger); } /* ===================== Visão diária: quadro por instalador ===================== */ .dia-colunas { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; touch-action: pan-x pan-y; } .dia-coluna { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; flex: 0 0 260px; box-shadow: var(--shadow); overflow: hidden; } .dia-coluna-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--texto-forte); background: var(--bg); } .dia-coluna.sem-dono .dia-coluna-cabecalho { color: var(--laranja-esc); } .dia-coluna-contagem { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; flex: none; } .dia-coluna-corpo { padding: 10px; display: flex; flex-direction: column; gap: 8px; } .dia-card { background: var(--bg); border-left: 3px solid var(--laranja); border-radius: 6px; padding: 8px 10px; cursor: pointer; transition: background .12s; } .dia-card:hover { background: var(--laranja-claro); } .dia-card.b-visita { border-left-color: #7c3aed; } .dia-card.b-concluido { border-left-color: var(--success); } .dia-card.b-pendencia { border-left-color: var(--danger); } .dia-card.b-cancelado { border-left-color: var(--muted); opacity: .65; } .dia-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 4px; } .dia-card-topo .status-pill { flex: none; } .dia-card-cliente { font-size: 13px; font-weight: 700; color: var(--texto-forte); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dia-card-meta { font-size: 11px; color: var(--muted); } .dia-card-endereco { font-size: 11px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===================== Agenda do instalador ===================== */ .servico-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--laranja); border-radius: 10px; padding: 1rem; margin-bottom: 0.9rem; box-shadow: var(--shadow); } .servico-card.b-visita { border-left-color: #7c3aed; } .servico-card.b-concluido { border-left-color: var(--success); opacity: .72; } .servico-card.b-pendencia { border-left-color: var(--danger); } .servico-card.b-cancelado { border-left-color: var(--muted); opacity: .6; } .servico-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .servico-cliente { font-size: 17px; font-weight: 700; color: var(--texto-forte); } .servico-tipo { font-size: 12px; color: var(--muted); } .servico-linha { display: flex; gap: 8px; font-size: 14px; padding: 5px 0; border-top: 1px solid var(--border); } .servico-linha b { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; min-width: 74px; padding-top: 2px; } .servico-linha a { color: var(--laranja-esc); font-weight: 600; text-decoration: none; } .servico-linha a:hover { text-decoration: underline; } .servico-acoes { display: flex; gap: 8px; margin-top: 0.9rem; } .btn-grande { flex: 1; min-height: 52px; font-size: 15px; font-weight: 700; border: none; border-radius: var(--radius); cursor: pointer; background: var(--laranja); color: #fff; transition: .15s; } .btn-grande:hover { background: var(--laranja-esc); } .btn-grande:disabled { opacity: .6; cursor: not-allowed; } .btn-grande.secundario { background: var(--surface); color: var(--text); border: 1px solid var(--border-forte); } .btn-grande.secundario:hover { background: var(--bg); border-color: var(--laranja); } .btn-grande.ok { background: var(--success); } .btn-grande.ok:hover { background: #15803d; } .dia-cabecalho { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1.5rem 0 0.6rem; display: flex; align-items: center; gap: 8px; } .dia-cabecalho::after { content: ""; flex: 1; height: 1px; background: var(--border); } .dia-cabecalho.hoje { color: var(--laranja-esc); } /* ===================== Formulários ===================== */ .form-group { margin-bottom: 0.9rem; } .form-group-centro { text-align: center; } .btn-pendencia-rapida { font-size: 14px; font-weight: 700; background: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius); padding: 10px 20px; cursor: pointer; color: #fff; transition: .15s; } .btn-pendencia-rapida:hover:not(:disabled) { background: #b52d2d; border-color: #b52d2d; } .btn-pendencia-rapida:disabled { background: var(--bg); border-color: var(--border); color: var(--muted); cursor: not-allowed; } label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="tel"], input[type="number"], select, textarea { width: 100%; font-size: 15px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); color: var(--text); transition: border-color .15s; -webkit-appearance: none; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(255,122,0,.14); } textarea { min-height: 72px; resize: vertical; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.9rem; } .btn-primary { width: 100%; padding: 13px; font-size: 15px; font-weight: 700; background: var(--laranja); color: white; border: none; border-radius: var(--radius); cursor: pointer; transition: background .15s, transform .1s; min-height: 48px; } .btn-primary:hover { background: var(--laranja-esc); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; } .erro { font-size: 13px; color: var(--danger); margin-top: 8px; min-height: 18px; } .campo-invalido { border-color: var(--danger) !important; background: var(--danger-bg); border-radius: var(--radius); } .ajuda { font-size: 12px; color: var(--muted); margin-top: 4px; } /* Chips de seleção (instaladores, períodos, tipos) */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-size: 13px; font-weight: 600; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; transition: .12s; } .chip:hover { border-color: var(--laranja); color: var(--laranja-esc); } .chip.selecionado { background: var(--laranja); border-color: var(--laranja); color: #fff; } .chip.chip-ferias:disabled { cursor: not-allowed; color: var(--muted); border-style: dashed; background: var(--bg); opacity: .7; } .chip.chip-ferias:disabled:hover { border-color: var(--border); color: var(--muted); } .pill-gerenciavel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 6px 4px 12px; background: var(--laranja-claro); color: var(--laranja-esc); border: 1px solid #ffd4a3; border-radius: 999px; } .pill-gerenciavel button { border: none; background: rgba(0,0,0,.08); color: var(--laranja-esc); width: 18px; height: 18px; border-radius: 50%; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .pill-gerenciavel button:hover { background: var(--danger); color: white; } .lista-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.75rem; } .linha-add { display: flex; gap: 8px; } .linha-add input { flex: 1; } /* ===================== Etiquetas do cliente ===================== A cor vem inline (escolhida no seletor de cor); o texto preto/branco é calculado por luminância em ui.js. */ .etiqueta { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 5px; white-space: nowrap; letter-spacing: .3px; background: #5d6570; color: #fff; } .etiquetas-linha { display: inline-flex; gap: 4px; flex-wrap: wrap; } /* Linha de gerenciamento: etiqueta + seletor de cor + remover */ .etiqueta-editor { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px 4px 4px; } .etiqueta-editor input[type="color"] { width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: none; cursor: pointer; flex: none; -webkit-appearance: none; appearance: none; } .etiqueta-editor input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } .etiqueta-editor input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; } .etiqueta-editor button { border: none; background: rgba(0,0,0,.08); color: var(--muted); width: 18px; height: 18px; border-radius: 50%; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .etiqueta-editor button:hover { background: var(--danger); color: #fff; } /* Chip de etiqueta em modo seleção (formulário e filtros) */ .chip-etiqueta { border: 2px solid transparent; opacity: .45; cursor: pointer; transition: .12s; font-family: inherit; } .chip-etiqueta:hover { opacity: .8; } .chip-etiqueta.selecionado { opacity: 1; border-color: var(--texto-forte); } /* Etiqueta que não levaria a nenhum resultado com os filtros atuais */ .chip-etiqueta.sem-resultado { opacity: .16; } /* ===================== Seletor de cliente (pop-up) ===================== */ .lista-seletor { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); } .item-cliente { display: block; width: 100%; text-align: left; background: var(--surface); border: none; border-bottom: 1px solid var(--border); padding: 10px 12px; cursor: pointer; font: inherit; transition: background .1s; } .item-cliente:last-child { border-bottom: none; } .item-cliente:hover { background: var(--laranja-claro); } .item-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .item-nome { font-size: 15px; font-weight: 700; color: var(--texto-forte); } .item-local { font-size: 13px; font-weight: 600; color: var(--laranja-esc); margin-top: 2px; } .item-endereco { font-size: 13px; color: var(--muted); } /* Cartão do cliente escolhido, dentro do serviço (somente leitura) */ .cliente-cartao { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--laranja); border-radius: var(--radius); padding: 10px 12px; } .cliente-cartao .linha { font-size: 14px; color: var(--text); margin-top: 2px; } .cliente-cartao .linha b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 6px; } .cliente-cartao a { color: var(--laranja-esc); font-weight: 600; text-decoration: none; } .cliente-vazio { border: 1px dashed var(--border-forte); border-radius: var(--radius); padding: 14px; text-align: center; } /* ===================== Linha do tempo do cliente ===================== */ .timeline { position: relative; padding-left: 22px; } .timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border); } .tl-item { position: relative; padding: 0 0 1.1rem 0; } .tl-item::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 3px var(--surface); } .tl-item.tl-agendado::before { background: #0369a1; } .tl-item.tl-pendencia::before { background: var(--danger); } .tl-item.tl-manual::before { background: var(--muted); } .tl-item.tl-marco::before { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); } .mini-tag.marco { background: var(--success-bg); color: #15803d; font-weight: 700; } .tl-cabecalho { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; } .tl-data { font-size: 13px; font-weight: 700; color: var(--texto-forte); } .tl-tecnicos { font-size: 13px; font-weight: 600; color: var(--laranja-esc); } .tl-texto { font-size: 14px; color: var(--text); white-space: pre-wrap; } .tl-meta { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tl-edicao { width: 100%; font-size: 14px; min-height: 70px; border: 1px solid var(--laranja); border-radius: var(--radius); padding: 8px 10px; background: var(--surface); resize: vertical; } /* ===================== Tabela simples (equipe) ===================== */ .tabela-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; box-shadow: var(--shadow); touch-action: pan-x pan-y; } table.simples { width: 100%; border-collapse: collapse; font-size: 14px; } table.simples thead th { text-align: left; padding: 10px 12px; background: var(--bg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; } /* Listas longas (ex.: Assistência Técnica com muitos registros em aberto): cabeçalho fixo ao rolar, pra não perder a referência das colunas. */ .tabela-wrap-alta { max-height: 72vh; overflow-y: auto; } .tabela-wrap-alta table.simples thead th { position: sticky; top: 0; z-index: 2; } table.simples tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); } table.simples tbody tr:last-child td { border-bottom: none; } table.simples .input-ajuste { width: 100px; padding: 6px 8px; font-size: 13px; } table.simples tfoot .linha-total-acerto td { padding: 12px; border-top: 2px solid var(--border-forte); border-bottom: none; font-size: 15px; background: var(--bg); } .ajuste-item { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; margin-bottom: 6px; } .ajuste-item:last-child { margin-bottom: 0; } tr.inativo { opacity: .55; } .btn-icone { background: none; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 4px 9px; font-size: 13px; cursor: pointer; transition: .15s; margin-right: 4px; } .btn-icone:hover { border-color: var(--laranja); background: var(--laranja-claro); } .acoes-linha { display: inline-flex; align-items: center; gap: 8px; } .selo-concluido { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; cursor: default; } .selo-concluido-icone { width: 20px; height: 20px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1; } .selo-concluido-data { font-size: 10px; color: var(--muted); white-space: nowrap; } .btn-deletar { font-size: 12px; background: none; border: 1px solid #f0cccc; border-radius: var(--radius); padding: 4px 9px; cursor: pointer; color: var(--danger); transition: .15s; white-space: nowrap; } .btn-deletar:hover { background: var(--danger-bg); border-color: var(--danger); } /* ===================== Login ===================== */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--preto); } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 2rem; width: 100%; max-width: 380px; box-shadow: 0 8px 32px rgba(0,0,0,.18); } .login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; } .login-logo .dot { width: 36px; height: 36px; background: var(--laranja); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: white; } .login-logo span { font-size: 17px; font-weight: 700; color: var(--texto-forte); } .login-card h1 { font-size: 20px; margin-bottom: 0.25rem; } .login-card p { font-size: 14px; color: var(--muted); margin-bottom: 1.5rem; } /* ===================== Modal ===================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; z-index: 50; padding: 1rem; overflow-y: auto; } .modal-box { background: var(--surface); border-radius: 12px; padding: 1.5rem; max-width: 360px; width: 100%; margin: auto; box-shadow: 0 8px 32px rgba(0,0,0,.18); } .modal-box.grande { max-width: 620px; } /* ===================== Modal de serviço, repaginado ===================== */ .modal-servico-box { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 92vh; } .modal-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--preto); color: #fff; flex: none; } .modal-cabecalho h3 { font-size: 17px; color: #fff; } .modal-cabecalho .modal-sub { font-size: 13px; color: #b6bcc6; margin: 2px 0 0; } .modal-x { background: rgba(255,255,255,.1); border: none; color: #fff; width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; flex: none; transition: .15s; } .modal-x:hover { background: var(--laranja); } .modal-corpo { padding: 1.3rem 1.4rem; overflow-y: auto; } .modal-corpo .form-group:last-child { margin-bottom: 0; } .modal-servico-box .modal-acoes { margin: 0; padding: 0.9rem 1.4rem; border-top: 1px solid var(--border); background: var(--bg); flex: none; } /* Botões de status - um clique, sem dropdown nativo */ .status-pills { display: flex; flex-wrap: wrap; gap: 6px; } .status-pill-btn { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: .12s; display: inline-flex; align-items: center; gap: 6px; } .status-pill-btn::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .5; } .status-pill-btn:hover { border-color: var(--border-forte); color: var(--text); } .status-pill-btn.ativo { color: #fff; border-color: transparent; } .status-pill-btn.ativo::before { background: #fff; opacity: .9; } .status-pill-btn.ativo.st-agendado { background: #0369a1; } .status-pill-btn.ativo.st-concluido { background: var(--success); } .status-pill-btn.ativo.st-cancelado { background: var(--muted); } .status-pill-btn.ativo.st-visita { background: #7c3aed; } .status-pill-btn.ativo.st-pendencia { background: var(--danger); } /* Cor de referência da bolinha no estado neutro (:not(.ativo) para o texto branco do estado ativo não perder) */ .status-pill-btn.st-agendado:not(.ativo) { color: #0369a1; } .status-pill-btn.st-concluido:not(.ativo) { color: #15803d; } .status-pill-btn.st-cancelado:not(.ativo) { color: var(--muted); } .status-pill-btn.st-visita:not(.ativo) { color: #6d28d9; } .status-pill-btn.st-pendencia:not(.ativo) { color: var(--danger); } /* Relatório da semana */ .rel-dia { margin-bottom: 1.4rem; } .rel-dia-titulo { font-size: 15px; font-weight: 700; color: var(--texto-forte); padding: 6px 0; border-bottom: 2px solid var(--laranja); margin-bottom: 6px; } .rel-tabela { font-size: 13px; } .rel-tabela th { background: var(--bg); } .rel-tabela td { vertical-align: top; } @media print { @page { size: A4 portrait; margin: 12mm; } body.print-rel { margin-left: 0 !important; } body.print-rel > *:not(#modal-relatorio) { display: none !important; } body.print-rel #modal-relatorio { position: static; display: block !important; background: none; padding: 0; overflow: visible; } body.print-rel #rel-box { box-shadow: none; max-width: none; max-height: none; border: none; display: block; } body.print-rel .modal-cabecalho { background: #fff !important; color: #000; border-bottom: 2px solid #000; } body.print-rel .modal-cabecalho h3, body.print-rel .modal-sub { color: #000; } body.print-rel .modal-x, body.print-rel .modal-acoes { display: none !important; } body.print-rel .modal-corpo { overflow: visible; padding: 1rem 0; } body.print-rel .rel-dia { break-inside: avoid; page-break-inside: avoid; } .status-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* Visita técnica - cortesia (dentro da garantia) */ .visita-cortesia { background: var(--success-bg); border: 1px solid #bbf7d0; border-radius: var(--radius); padding: 10px 12px; font-size: 14px; color: #15803d; } /* Bloco de obra finalizada / garantia no cadastro do cliente */ .bloco-garantia { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 0.9rem; } .check-linha { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0; cursor: pointer; } .check-linha input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--laranja); cursor: pointer; flex: none; } /* Visita técnica fora da garantia - caixa de cobrança */ .visita-cobranca { background: var(--warning-bg); border: 1px solid #fde68a; border-radius: var(--radius); padding: 12px 14px; } .visita-cobranca-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .visita-cobranca-aviso { font-size: 13px; color: var(--warning); } .visita-valor { font-size: 20px; font-weight: 700; color: var(--texto-forte); background: var(--surface); border: 1px solid var(--border-forte); border-radius: var(--radius); padding: 4px 12px; } .check-pago { background: var(--surface); border: 1px solid var(--border-forte); border-radius: var(--radius); padding: 9px 12px; transition: background .15s, border-color .15s, color .15s; } .check-pago:has(input:checked) { background: var(--success-bg); border-color: var(--success); color: #15803d; } .garantia-status { display: flex; align-items: center; min-height: 42px; } .pill-garantia { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; } .pill-garantia.ok { background: var(--success-bg); color: #15803d; } .pill-garantia.fim { background: var(--warning-bg); color: var(--warning); } /* Painel "Status da obra" na ficha do cliente */ .obra-linha { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .obra-titulo { font-size: 15px; font-weight: 700; color: var(--texto-forte); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .obra-data { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .obra-data input { width: auto; padding: 5px 8px; font-size: 13px; } /* Destaque do relatório quando o serviço está concluído ou cancelado */ #grupo-relatorio.ativo textarea { border-color: var(--success); background: #f7fdf9; box-shadow: 0 0 0 3px rgba(22,163,74,.12); } #grupo-relatorio.ativo.cancelado textarea { border-color: var(--danger); background: #fdf5f5; box-shadow: 0 0 0 3px rgba(210,58,58,.12); } #grupo-relatorio textarea:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; } .modal-box h3 { font-size: 17px; margin-bottom: 0.25rem; } .modal-box > p { font-size: 14px; color: var(--muted); margin-bottom: 1.25rem; } .modal-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; } .modal-acoes .esquerda { margin-right: auto; } .indicador-salvo { font-size: 12px; font-weight: 600; color: var(--muted); align-self: center; margin-right: auto; min-height: 16px; transition: color .15s; } .indicador-salvo.ok { color: var(--success); } .indicador-salvo.erro { color: var(--danger); } /* Quando há auto-save, o botão de fechar não precisa gritar */ .btn-fechar-modal { font-size: 14px; font-weight: 700; background: var(--preto); color: #fff; border: none; border-radius: var(--radius); padding: 9px 18px; cursor: pointer; } .btn-fechar-modal:hover { background: var(--preto-2); } .btn-cancelar { font-size: 14px; background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; color: var(--text); font-weight: 500; } .btn-cancelar:hover { background: var(--bg); } .btn-salvar { font-size: 14px; font-weight: 700; background: var(--laranja); color: white; border: none; border-radius: var(--radius); padding: 9px 18px; cursor: pointer; transition: background .15s; } .btn-salvar:hover { background: var(--laranja-esc); } .btn-salvar:disabled { opacity: .6; cursor: not-allowed; } .btn-confirmar-del { font-size: 14px; font-weight: 700; background: var(--danger); color: white; border: none; border-radius: var(--radius); padding: 9px 16px; cursor: pointer; transition: background .15s; } .btn-confirmar-del:hover { background: #b91c1c; } /* ===================== Toast ===================== */ .toast { position: fixed; bottom: 1.5rem; left: calc(50% + var(--sidebar-w) / 2); transform: translateX(-50%) translateY(90px); background: var(--preto); color: white; padding: 11px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform .25s ease; z-index: 100; max-width: 92vw; } .toast.visivel { transform: translateX(-50%) translateY(0); } .toast.toast-erro { background: var(--danger); } .toast.toast-ok { background: var(--success); } body.sidebar-colapsada .toast { left: calc(50% + var(--sidebar-w-colapsada) / 2); } /* ===================== Aviso de dados desatualizados ===================== */ .aviso-desatualizado { position: fixed; top: 20px; left: calc(50% + var(--sidebar-w) / 2); transform: translateX(-50%) translateY(-140%); background: var(--laranja); color: white; padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 12px; transition: transform .25s ease; z-index: 20; max-width: 92vw; } .aviso-desatualizado.visivel { transform: translateX(-50%) translateY(0); } .aviso-desatualizado button { background: white; color: var(--laranja); border: none; border-radius: 6px; padding: 5px 12px; font-weight: 700; cursor: pointer; font-size: 13px; } body.sidebar-colapsada .aviso-desatualizado { left: calc(50% + var(--sidebar-w-colapsada) / 2); } /* ===================== Responsivo ===================== Tela estreita: começa no modo ícone (mais espaço pro conteúdo), mas o botão de expandir/recolher continua ativo - a pessoa pode abrir a sidebar cheia se quiser. */ @media (max-width: 860px) { .periodo-titulo { min-width: 0; font-size: 16px; } .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .container { padding: 1rem 0.75rem 3rem; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .cards-grid { grid-template-columns: repeat(2, 1fr); } .barra-topo { gap: 8px; } .periodo-nav { width: 100%; justify-content: space-between; } .modal-overlay { padding: 0; } .modal-box { border-radius: 0; min-height: 100vh; max-width: 100%; } .modal-acoes { position: sticky; bottom: 0; background: var(--surface); padding-top: 12px; } .servico-acoes { flex-direction: column; } /* Navegação de data (‹ Hoje › + período) continua fixa no topo ao rolar a tela, só que compacta - mesma ideia da coluna de instalador na grade, só que menor. */ .barra-topo-datas { position: sticky; top: 0; z-index: 6; background: var(--bg); padding: 8px 0; margin-bottom: .5rem; gap: 6px; } /* Linha 1: Hoje + data pra ir direto num dia. Linha 2: as setas coladas dos dois lados do período (‹ 17 a 22 de agosto de 2026 ›), sem esticar a largura toda. :first-of-type/:last-of-type pegam o botão certo mesmo com IDs diferentes entre semana.html (btn-anterior/btn-proxima) e dia.html (btn-anterior/btn-proximo). */ .barra-topo-datas .periodo-nav { flex-wrap: wrap; justify-content: center; } .barra-topo-datas .btn-nav { padding: 6px 10px; font-size: 13px; } .barra-topo-datas .btn-nav:first-of-type { order: 4; } .barra-topo-datas .btn-nav:last-of-type { order: 6; } .barra-topo-datas .btn-acoes { padding: 6px 10px; font-size: 12px; order: 1; } .barra-topo-datas .periodo-titulo { font-size: 14px; min-width: 0; white-space: normal; text-align: center; flex: 0 1 auto; order: 5; margin-top: 6px; } .barra-topo-datas .input-nav-data { width: auto; height: 28px; font-size: 12px; padding: 0 6px; order: 2; } /* Quebra forçada entre "Hoje + data" e "‹ período ›", sem depender de sobrar espaço por acaso - um item vazio ocupando a linha toda empurra o resto pra baixo. */ .barra-topo-datas .periodo-nav::after { content: ''; flex-basis: 100%; order: 3; height: 0; } /* Coluna do instalador: continua fixa (sticky) ao rolar a grade pro lado, só que bem mais estreita - 180px tomava quase a tela toda num celular. */ table.grade th.col-instalador, .col-instalador { width: 92px; min-width: 92px; padding: 8px 6px; } .inst-nome { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inst-meta { font-size: 10px; } }