/* ════════════════════════════════════════════════════════════════════════ Painel Baluarte Administradora de Bens — design system ZX Control, com o acento trocado para verde (cor da empresa). Estrutura idêntica ao produto base (docs/DESIGN-TOKENS.md do Jurídico ZX Control); só os tokens de cor de destaque mudam aqui. ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tema ESCURO (padrão — identidade da Baluarte) ── */ /* faz o Chrome/Edge desenhar os controles nativos (ícone do date picker, scrollbar) em cor clara — sem isso o ícone do calendário fica preto sobre fundo escuro e quase some. */ color-scheme: dark; --primary: #15803D; --primary-light: #22C55E; --primary-bright: #4ADE80; --primary-dark: #0B5C38; --bg: #0D0D0D; --bg-alt: #0A0A0A; --surface: #1A1A1A; --surface2: #222222; --border: #2A2A2A; --border-light: #333333; --text: #E2E8F0; --text-secondary: #9CA3AF; --muted: #6B7280; --green: #4ADE80; --red: #EF4444; --indigo: #818CF8; --amber: #F59E0B; --cyan: #00C2CB; --hover: rgba(255, 255, 255, .03); --hover-strong: rgba(255, 255, 255, .06); --stripe: rgba(255, 255, 255, .012); --topbar-bg: rgba(13, 13, 13, .82); --shadow: rgba(0, 0, 0, .5); --shadow-lg: rgba(0, 0, 0, .55); --on-primary: #0D0D0D; --radius: 10px; --radius-card: 14px; --mono: "JetBrains Mono", ui-monospace, monospace; --sans: "Inter", system-ui, sans-serif; } /* ── Tema CLARO (opt-in — ) ── */ :root[data-theme="light"] { color-scheme: light; --primary: #15803D; --primary-light: #16A34A; --primary-bright: #15803D; --primary-dark: #22C55E; --bg: #F3F4F6; --bg-alt: #F9FAFB; --surface: #FFFFFF; --surface2: #EEF0F3; --border: #E4E7EB; --border-light: #D5D9DF; --text: #17202A; --text-secondary: #46505C; --muted: #8A93A0; --green: #15803D; --red: #DC2626; --indigo: #4F46E5; --amber: #B45309; --cyan: #0E7490; --hover: rgba(15, 23, 42, .04); --hover-strong: rgba(21, 128, 61, .08); --stripe: rgba(15, 23, 42, .018); --topbar-bg: rgba(255, 255, 255, .85); --shadow: rgba(15, 23, 42, .1); --shadow-lg: rgba(15, 23, 42, .16); --on-primary: #FFFFFF; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } /* ── Barra de rolagem discreta (segue o tema) ────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 38%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 62%, transparent); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } :root[data-theme="light"] .backdrop { background: rgba(15, 23, 42, .32); } a { color: var(--primary-light); text-decoration: none; } .hidden { display: none !important; } .assoc-link { color: var(--primary-bright); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .assoc-link:hover { filter: brightness(1.15); } .tbl-meta { padding: 8px 2px; font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tbl-meta select { width: auto; min-width: 0; padding: 3px 6px; font-size: 12.5px; } .pg-nav { display: inline-flex; align-items: center; gap: 4px; } .pg-nav button[disabled] { opacity: .4; cursor: default; } /* ── Aviso da equipe (banner logo abaixo do topbar) ──────────────────── */ .aviso-banner { display: flex; align-items: center; gap: 14px; padding: 10px 20px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--amber) 14%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--amber) 35%, var(--border)); color: var(--text); } .aviso-banner span:first-child { flex: 1; white-space: pre-wrap; } .aviso-banner button { flex: none; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px; } .aviso-banner button:hover { color: var(--text); background: var(--hover-strong); } /* ── Header sticky ───────────────────────────────────────────────────── */ header.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 61px; background: var(--topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } @media (max-width: 720px) { header.topbar .user-chip { display: none; } .global-search { flex: 1 1 auto; } } .topbar h1 { font-family: var(--mono); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0; color: var(--text); } .topbar h1 .cursor { color: var(--primary); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .topbar .spacer { flex: 1; } .statusdot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); display: inline-block; } .user-chip { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; max-width: 200px; flex: none; } .user-chip #user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Layout ──────────────────────────────────────────────────────────── */ .shell { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 61px); transition: grid-template-columns .16s ease; } nav.side { border-right: 1px solid var(--border); padding: 14px 12px 24px; overflow: visible; min-width: 0; position: sticky; top: 61px; align-self: start; height: calc(100vh - 61px); overflow-y: auto; } body.side-collapsed .shell { grid-template-columns: 64px 1fr; } body.side-collapsed nav.side { padding-left: 8px; padding-right: 8px; overflow: visible; } /* marca da empresa na barra de cima */ .topbar-brand { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text); white-space: nowrap; flex: none; margin-right: 4px; } .topbar-brand .cursor { color: var(--primary-light); animation: blink 1.1s steps(1) infinite; } @media (max-width: 640px) { .topbar-brand { display: none; } } /* alternador de tema (sol / lua) */ #btn-tema { display: inline-flex; align-items: center; justify-content: center; } #btn-tema svg { width: 17px; height: 17px; } #btn-tema .ico-lua { display: none; } :root[data-theme="light"] #btn-tema .ico-sol { display: none; } :root[data-theme="light"] #btn-tema .ico-lua { display: block; } /* ícone dentro do navpill */ .np-ico { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .np-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .navpill.sub { padding-left: 30px; font-size: 12.5px; color: var(--muted); } .navpill.sub .np-ico { width: 15px; height: 15px; } .navpill.sub .np-ico svg { width: 15px; height: 15px; } /* sidebar recolhida: só ícones + tooltip no hover */ body.side-collapsed nav.side .eyebrow { height: 1px; padding: 0; margin: 12px 6px; overflow: hidden; color: transparent; background: var(--border); } body.side-collapsed .navpill { justify-content: center; padding: 10px 0; position: relative; } body.side-collapsed .navpill.sub { padding-left: 0; } body.side-collapsed .np-txt { display: none; } body.side-collapsed .navpill:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--surface2); border: 1px solid var(--border-light); color: var(--text); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 7px; white-space: nowrap; z-index: 60; box-shadow: 0 8px 24px var(--shadow); } /* ── Busca global (topbar) ───────────────────────────────────────────── */ .global-search { position: relative; flex: 0 1 460px; display: flex; align-items: center; } .global-search .gs-ico { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; } #q-global { width: 100%; background: var(--surface); border: 1px solid var(--border-light); border-radius: 999px; padding: 8px 60px 8px 34px; font-size: 13px; color: var(--text); } #q-global::placeholder { color: var(--muted); } #q-global:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,128,61,.18); outline: none; } .gs-kbd { position: absolute; right: 8px; font-family: var(--mono); font-size: 10px; color: var(--muted); border: 1px solid var(--border-light); border-radius: 6px; padding: 2px 6px; pointer-events: none; } .q-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 45; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-card); box-shadow: 0 20px 48px var(--shadow-lg); max-height: 62vh; overflow-y: auto; padding: 6px; } .q-results .q-grp { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 8px 10px 4px; } .q-results .q-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; font-size: 13px; color: var(--text-secondary); } .q-results .q-item:hover, .q-results .q-item.sel { background: rgba(21,128,61,.14); color: var(--text); } .q-results .q-item b { color: var(--text); font-weight: 600; } .q-results .q-item .q-meta { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--mono); } .q-results .q-vazio { padding: 18px; text-align: center; color: var(--muted); font-size: 12.5px; } /* ── Sino de alertas ─────────────────────────────────────────────────── */ .icon-btn.bell { position: relative; } .bell-count { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; font-family: var(--mono); border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--topbar-bg); box-sizing: content-box; } .bell-count[hidden] { display: none; } /* botões de ícone da topbar (menu, tema, sino) */ .icon-btn { background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); border-radius: var(--radius); padding: 6px 9px; font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; } .icon-btn:hover { color: var(--text); border-color: var(--muted); } .icon-btn svg { width: 18px; height: 18px; display: block; } nav.side .eyebrow { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--primary); padding: 0 10px; margin: 14px 0 6px; } .navpill { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; margin: 2px 0; border-radius: var(--radius); background: transparent; border: 1px solid transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; } .navpill:hover { background: var(--hover); color: var(--text); } .navpill.active { background: rgba(21, 128, 61, .16); border-color: rgba(21, 128, 61, .4); color: var(--primary-bright); } :root[data-theme="light"] .navpill.active { background: rgba(21, 128, 61, .1); } main.content { padding: 26px 30px; overflow: auto; } .page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .page-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0; } .page-head .spacer { flex: 1; } /* ── Stat cards (dashboard) ─────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 26px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; } .stat .stat-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .stat .stat-value { font-size: 26px; font-weight: 800; margin-top: 6px; } .stat.alerta .stat-value { color: var(--red); } .stat.destaque .stat-value { color: var(--primary-bright); } /* Caixinha compacta rótulo/valor (ficha do Controle de Contratos, protocolos) */ .kv { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 8px 12px; min-width: 130px; background: var(--surface); } .kv span { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .kv b { display: block; margin-top: 2px; } /* ── Cards genéricos ─────────────────────────────────────────────────── */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px; transition: border-color .15s, transform .15s; } .card:hover { border-color: var(--primary-dark); } .card h3 { font-size: 15px; margin: 0 0 10px; } .card .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--text-secondary); } .card .row b { color: var(--text); font-weight: 700; } /* ── Tabelas ─────────────────────────────────────────────────────────── */ .tbl-wrap { border: 1px solid var(--border); border-radius: var(--radius-card); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; } /* tabelas largas — rolagem lateral em vez de esmagar as colunas */ section.page[data-page="contratos"] table { min-width: 1120px; } section.page[data-page="dashboard"] table:has(#tb-dash-loteamentos) { min-width: 720px; } section.page[data-page="despesas"] table { min-width: 680px; } section.page[data-page="entradas"] table, #ent-detalhe table, #fin-boletos table { min-width: 900px; } thead th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); background: var(--bg-alt); text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); } tbody td { font-size: 13px; color: var(--text-secondary); padding: 11px 14px; border-bottom: 1px solid var(--border); } tbody tr:nth-child(odd) { background: var(--stripe); } tbody tr:hover { background: var(--hover-strong); } tbody td:first-child { color: var(--text); font-weight: 500; } /* atrasado: só um traço vermelho fino à esquerda, sem tingir a linha toda */ tbody tr.atrasado td:first-child { box-shadow: inset 3px 0 0 0 var(--red); } /* cor de identificação do loteamento (badge suave) */ .lote-badge { --lc: var(--muted); display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--lc) 15%, transparent); color: var(--lc); border: 1px solid color-mix(in srgb, var(--lc) 35%, transparent); } .lote-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--muted); } .asaas-dot { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 5px; font-size: 9px; font-weight: 800; font-family: var(--mono); background: rgba(0, 194, 203, .16); color: var(--cyan); border: 1px solid rgba(0, 194, 203, .4); vertical-align: middle; margin-left: 4px; cursor: help; } .cobr-dot { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 5px; font-size: 9px; font-weight: 800; font-family: var(--mono); vertical-align: middle; margin-left: 4px; cursor: help; border: 1px solid transparent; } .cobr-dot.b { background: rgba(74, 222, 128, .16); color: var(--green); border-color: rgba(74, 222, 128, .40); } .cobr-dot.d { background: rgba(190, 110, 120, .18); color: #d98c99; border-color: rgba(190, 110, 120, .45); } .conta-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 16px; white-space: nowrap; border: 1px solid transparent; } .conta-tag.b { background: rgba(74, 222, 128, .16); color: var(--green); border-color: rgba(74, 222, 128, .40); } .conta-tag.d { background: rgba(190, 110, 120, .18); color: #d98c99; border-color: rgba(190, 110, 120, .45); } .conta-tag.x { background: rgba(251, 191, 36, .14); color: var(--amber, #b45309); border-color: rgba(251, 191, 36, .45); cursor: help; } .row-actions { display: flex; gap: 8px; } td.mono, .mono { font-family: var(--mono); } /* ── Filtros ─────────────────────────────────────────────────────────── */ .filtros { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; } .filtros select, .filtros input { width: auto; min-width: 160px; } /* grupo de botões-filtro (loteamento) */ .btn-grupo { display: inline-flex; gap: 0; border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; } .btn-grupo button { background: var(--surface2); border: none; border-left: 1px solid var(--border-light); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; font-family: var(--sans); padding: 7px 13px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; } .btn-grupo button:first-child { border-left: none; } .btn-grupo button:hover { color: var(--text); } .btn-grupo button.active { background: var(--primary); color: var(--on-primary); } /* filtro de checkboxes (status) */ .chk-filtro { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; } .chk-filtro-rot { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); } .chk-filtro label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; } .chk-filtro input { width: 15px; height: 15px; min-width: 0; margin: 0; cursor: pointer; } /* filtro de tipo de contrato: input + lista suspensa de checkboxes */ #filtro-tipo-box { position: relative; } #filtro-tipo-lista { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: 340px; max-height: 320px; overflow-y: auto; overflow-x: hidden; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; box-shadow: 0 12px 32px var(--shadow); } #filtro-tipo-lista[hidden] { display: none !important; } #filtro-tipo-lista label { padding: 2px 0; white-space: nowrap; } #filtro-tipo-lista label[hidden] { display: none !important; } /* dashboard: últimos contratos (3 blocos lado a lado) */ .dash-ultimos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dash-ultimos .tbl-wrap table { min-width: 0; font-size: 12px; } .dash-ultimos th, .dash-ultimos td { padding: 5px 8px; } @media (max-width: 1100px) { .dash-ultimos { grid-template-columns: 1fr; } } /* cabeçalho de coluna clicável (ordenar) */ th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; } th.th-sort:hover { color: var(--text-secondary); } th.th-sort::after { content: " " attr(data-arrow); color: var(--primary); font-size: 9px; } /* ── Badges ──────────────────────────────────────────────────────────── */ .badge { padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; border: 1px solid transparent; display: inline-block; } .badge.em_dia, .badge.paga, .badge.quitado { background: rgba(74, 222, 128, .10); color: var(--green); border-color: rgba(74, 222, 128, .30); } .badge.pendente { background: rgba(245, 158, 11, .12); color: var(--amber); border-color: rgba(245, 158, 11, .30); } .badge.atrasado, .badge.atrasada { background: rgba(239, 68, 68, .10); color: var(--red); border-color: rgba(239, 68, 68, .30); } .badge.em_analise { background: rgba(56, 189, 248, .12); color: var(--cyan); border-color: rgba(56, 189, 248, .32); } .badge.fiscal, .badge.associacao, .badge.parceiro { background: rgba(129, 140, 248, .10); color: var(--indigo); border-color: rgba(129, 140, 248, .30); } /* tipo de contrato — uma cor por forma de pagamento (texto livre, casa por trecho do slug) */ .badge[class*="tipo-"] { background: rgba(107, 114, 128, .12); color: var(--muted); border-color: rgba(107, 114, 128, .30); } .badge[class*="tipo-black"] { background: rgba(226, 232, 240, .10); color: var(--text); border-color: rgba(226, 232, 240, .22); } .badge[class*="tipo-entrada"] { background: rgba(245, 158, 11, .12); color: var(--amber); border-color: rgba(245, 158, 11, .32); } .badge[class*="tipo-dinheiro"], .badge[class*="tipo-especie"] { background: rgba(0, 194, 203, .12); color: var(--cyan); border-color: rgba(0, 194, 203, .32); } .badge[class*="tipo-pix"] { background: rgba(0, 194, 203, .12); color: var(--cyan); border-color: rgba(0, 194, 203, .32); } .badge[class*="tipo-cartao"] { background: rgba(129, 140, 248, .12); color: var(--indigo); border-color: rgba(129, 140, 248, .32); } .badge[class*="tipo-a-vista"], .badge[class*="tipo-avista"] { background: rgba(74, 222, 128, .12); color: var(--green); border-color: rgba(74, 222, 128, .32); } .badge[class*="tipo-cancelado"] { background: rgba(239, 68, 68, .10); color: var(--red); border-color: rgba(239, 68, 68, .30); } /* situação do contrato */ .badge.situacao-cancelado { background: rgba(239, 68, 68, .10); color: var(--red); border-color: rgba(239, 68, 68, .30); } .badge.situacao-reintegrado { background: rgba(245, 158, 11, .12); color: var(--amber); border-color: rgba(245, 158, 11, .30); } .badge.situacao-processo_reintegracao { background: rgba(168, 85, 247, .12); color: #c084fc; border-color: rgba(168, 85, 247, .34); } .badge.situacao-inexistente { background: rgba(148, 163, 184, .14); color: var(--muted); border-color: rgba(148, 163, 184, .32); } /* ── Botões ──────────────────────────────────────────────────────────── */ .btn { padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--border-light); background: var(--surface2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--sans); } .btn:hover { border-color: var(--muted); } .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700; } .btn-primary:hover { background: var(--primary-light); border-color: var(--primary-light); } .btn-danger { background: transparent; border-color: rgba(239, 68, 68, .45); color: var(--red); } .btn-danger:hover { background: rgba(239, 68, 68, .10); } .btn-sm { padding: 5px 10px; font-size: 12px; } /* ícone + texto no mesmo botão (ex.: "Importar do Asaas") — sem isso o svg sem width/height explícito renderiza gigante. */ .btn svg { width: 14px; height: 14px; vertical-align: -2.5px; flex: none; } /* Nº da parcela clicável → abre os detalhes da parcela */ .lnk-parc { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-family: var(--mono); font-weight: 700; color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; } .lnk-parc:hover { color: var(--primary-light); } /* Lista rótulo → valor (detalhe da parcela) */ .det-list { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; font-size: 13px; margin: 4px 0 6px; } .det-list dt { color: var(--muted); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; align-self: center; } .det-list dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; } .det-sec { margin: 14px 0 4px; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; } .det-sec:first-child { margin-top: 0; } /* ── Botões só-ícone (ações da tabela de contratos) ───────────────────── Mantêm fundo/borda/hover do .btn; só troca texto por ícone #00C2CB. */ .btn.btn-icon { padding: 6px 8px; line-height: 0; color: var(--cyan); } .btn.btn-icon:hover { color: var(--cyan); } .btn.btn-icon.btn-danger, .btn.btn-icon.btn-danger:hover { color: var(--red); } .btn.btn-icon svg { width: 16px; height: 16px; display: block; pointer-events: none; } /* ── Tooltip discreto ─────────────────────────────────────────────────── */ .tip { position: relative; } .tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: var(--surface2); color: var(--text-secondary); border: 1px solid var(--border-light); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 40; } .tip:hover::after, .tip:focus-visible::after { opacity: 1; } /* ── Cards de número clicáveis (dashboard) ────────────────────────────── */ .stat.stat-clic { cursor: pointer; transition: border-color .12s ease, transform .12s ease; } .stat.stat-clic:hover { border-color: var(--primary); transform: translateY(-1px); } .stat.stat-clic:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ── Grade de permissões (modal de usuário) ───────────────────────────── */ .perm-grid { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 6px 0 16px; } .perm-head, .perm-row { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); align-items: center; } .perm-head { background: var(--bg-alt); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .perm-head > span, .perm-row > span { padding: 9px 10px; } .perm-row { border-top: 1px solid var(--border); font-size: 13px; } .perm-row > span:first-child { color: var(--text); font-weight: 600; } .perm-chk { display: flex; justify-content: center; padding: 8px 0; } .perm-chk input { width: 16px; height: 16px; } .perm-na { text-align: center; color: var(--border-light); } /* ── Inputs ──────────────────────────────────────────────────────────── */ label.field { display: block; margin-bottom: 14px; } label.field > span { display: block; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: 5px; } input, select, textarea { width: 100%; background: var(--bg-alt); border: 1px solid var(--border-light); border-radius: var(--radius); color: var(--text); padding: 9px 12px; font-size: 13px; font-family: var(--sans); } input[type="date"], input[type="tel"], input[inputmode="numeric"] { font-family: var(--mono); } textarea { min-height: 90px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21, 128, 61, .2); } /* ── Modal ───────────────────────────────────────────────────────────── */ .backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 50; } .modal { position: relative; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-card); max-width: 540px; width: 92%; padding: 22px; animation: modalIn .18s ease-out; max-height: 86vh; overflow: auto; } .modal-x { position: sticky; float: right; top: 0; margin: -6px -6px 4px 14px; z-index: 3; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; background: var(--surface2); border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .modal-x:hover { color: var(--text); border-color: var(--muted); background: var(--hover-strong); } .modal > h3 { padding-right: 8px; } .modal.wide { max-width: 720px; } @keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } } .modal h3 { margin: 0 0 16px; font-size: 17px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; flex-wrap: wrap; } /* ── Drawer: painel lateral em vez de modal central ────────────────────── Usado nas ações abertas a partir de uma linha (Financeiro do contrato, Histórico, Editar, etc.). "+ Novo contrato" continua como modal central. */ .backdrop.as-drawer { justify-content: flex-end; align-items: stretch; background: rgba(0, 0, 0, .38); backdrop-filter: blur(2px); } .backdrop.as-drawer .modal { max-width: none; width: min(680px, 96vw); max-height: 100vh; height: 100vh; border-radius: 0; border-width: 0 0 0 1px; animation: drawerIn .18s ease-out; padding: 22px 24px 28px; } .backdrop.as-drawer .modal.wide { width: min(780px, 96vw); } .backdrop.as-drawer .modal.xwide { width: min(940px, 96vw); } @keyframes drawerIn { from { transform: translateX(30px); opacity: .4; } } @media (max-width: 620px) { .backdrop.as-drawer .modal, .backdrop.as-drawer .modal.wide, .backdrop.as-drawer .modal.xwide { width: 100vw; } } /* ── Toast ───────────────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 22px; right: 22px; z-index: 60; background: var(--surface2); border: 1px solid rgba(21, 128, 61, .5); color: var(--text); padding: 12px 16px; border-radius: var(--radius); font-size: 13px; box-shadow: 0 8px 30px var(--shadow); } /* ── Sub-abas (Painel / Lista dentro de uma tela) ─────────────────────── */ .subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .subtabs button { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; font-family: var(--sans); padding: 9px 14px; cursor: pointer; } .subtabs button:hover { color: var(--text); } .subtabs button.active { color: var(--primary-bright); border-bottom-color: var(--primary); } /* ── Filtros de dashboard (empreendimento + período) ──────────────────── */ .dash-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; } .dash-filtros #dc-custom input { min-width: 0; width: auto; font-family: var(--mono); } .dash-ativos { font-size: 12px; color: var(--primary-bright); font-weight: 600; } /* ── Gráficos ────────────────────────────────────────────────────────── */ .chart-box { position: relative; height: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px; } .chart-box.tall { height: 300px; } .dc-cmp { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .dc-cmp { grid-template-columns: 1fr; } } /* cascata do resultado (Financeiro · Geral) */ .fg-cascata { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; max-width: 460px; } .fg-lin { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 13px; color: var(--text-secondary); border-top: 1px solid var(--border); } .fg-lin:first-child { border-top: none; } .fg-lin b { color: var(--text); font-family: var(--mono); } .fg-lin b.pos { color: var(--green); } .fg-lin b.neg { color: var(--red); } .fg-lin:last-child { background: rgba(21,128,61,.08); font-weight: 700; } /* ── Dashboard Geral (Início) ─────────────────────────────────────────── */ .stat .stat-sub { font-size: 11px; color: var(--muted); margin-top: 4px; } #inicio-stats, #fg-cards1, #fg-cards2, #fi-cards, #dc-operacao, #dc-carteira, #rat-cards { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); } #inicio-stats .stat-value, #fg-cards1 .stat-value, #fg-cards2 .stat-value, #fi-cards .stat-value { font-size: 18px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bloco { margin: 22px 0; } .bloco-tit { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--primary); margin-bottom: 12px; } .saude-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface2); } .saude-bar span { display: block; } .saude-leg { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-secondary); } .saude-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: middle; } .saude-callout { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.22); border-radius: var(--radius); padding: 10px 14px; } .saude-callout b { font-size: 20px; color: var(--red); } .saude-callout .saude-pct { font-size: 12px; color: var(--text-secondary); } .alert-list { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; } .alert-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); } .alert-row:first-child { border-top: none; } .alert-row:hover { background: var(--hover); } .alert-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .alert-txt { flex: 1; color: var(--text); } .alert-txt b { color: var(--text); } .alert-go { font-size: 11px; color: var(--muted); font-family: var(--mono); } .alert-x { flex: none; background: transparent; border: 1px solid var(--border-light); color: var(--muted); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 11px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .alert-x:hover { color: var(--text); border-color: var(--muted); background: var(--hover); } .mov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1000px) { .mov-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .mov-grid { grid-template-columns: 1fr; } } .mov-item { font-size: 12px; color: var(--text-secondary); padding: 6px 0; border-top: 1px solid var(--border); } .mov-item:first-of-type { border-top: none; } .mov-item b { color: var(--text); font-family: var(--mono); margin-right: 6px; } .mov-item .mov-meta { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; } .mov-vazio { color: var(--muted); font-size: 12px; padding: 6px 0; } /* ── Novo contrato (modal em seções + prévia de parcelas) ─────────────── */ .cc-sec { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; background: var(--bg-alt); } .cc-sec-tit { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--primary-bright); margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; } .cc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 560px) { .cc-grid2 { grid-template-columns: 1fr; } } .cc-sec .field { margin-bottom: 12px; } .cc-cpf-row { display: flex; gap: 8px; } .cc-cpf-row input { flex: 1; } .cc-assoc-status { font-size: 12.5px; color: var(--text-secondary); min-height: 18px; margin-bottom: 10px; } .cc-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .cc-prev-resumo { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); } .cc-prev-wrap { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); } table.cc-prev { width: 100%; border-collapse: collapse; } table.cc-prev th { position: sticky; top: 0; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: var(--surface2); text-align: left; padding: 7px 12px; } table.cc-prev td { font-size: 12.5px; padding: 6px 12px; border-top: 1px solid var(--border); color: var(--text-secondary); } table.cc-prev td:last-child, table.cc-prev th:last-child { text-align: right; font-family: var(--mono); } table.cc-prev tr.cc-prev-entrada td { color: var(--text); font-weight: 600; } .cc-prev-aviso { font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 16px; } button.btn:disabled { opacity: .5; cursor: not-allowed; } /* ── Login ───────────────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 50% -10%, rgba(21, 128, 61, .16), transparent), var(--bg-alt); } .login-card { width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 30px; } .login-card .eyebrow { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--primary); } .login-card h1 { font-size: 22px; margin: 6px 0 22px; letter-spacing: -.01em; } .login-err { color: var(--red); font-size: 12.5px; margin-top: 10px; min-height: 16px; } .empty { color: var(--muted); font-size: 13px; padding: 28px; text-align: center; } /* ════════════════════════════════════════════════════════════════════════ CELULAR / TABLET PEQUENO (≤ 820px) Menu lateral vira gaveta (☰), topbar em 2 linhas, conteúdo em coluna única, lista de contratos em cartões e campos ≥16px (o iOS dá zoom em menos que isso). ════════════════════════════════════════════════════════════════════════ */ .nav-backdrop { display: none; } @media (max-width: 820px) { html { -webkit-text-size-adjust: 100%; } body { overflow-x: hidden; } /* topbar: linha 1 = ☰ + ações, linha 2 = busca */ header.topbar { height: auto; flex-wrap: wrap; gap: 8px; padding: 8px 12px; } header.topbar .spacer { flex: 1; } .global-search { order: 10; flex: 1 1 100%; } .gs-kbd { display: none; } #q-global { padding-right: 12px; } .icon-btn { padding: 8px 10px; } /* menu lateral → gaveta por cima da tela */ .shell, body.side-collapsed .shell { grid-template-columns: 1fr; min-height: 0; } nav.side, body.side-collapsed nav.side { position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: 270px; max-width: 84vw; z-index: 41; background: var(--surface); border-right: 1px solid var(--border-light); padding: 16px 12px 28px; transform: translateX(-104%); transition: transform .2s ease; } body.nav-open nav.side { transform: none; box-shadow: 0 0 40px var(--shadow-lg); } body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .5); } body.nav-open { overflow: hidden; } /* "recolhido" é coisa de desktop — na gaveta o menu sempre aparece por extenso */ body.side-collapsed .np-txt { display: inline; } body.side-collapsed .navpill { justify-content: flex-start; padding: 12px; } body.side-collapsed .navpill.sub { padding-left: 30px; } body.side-collapsed .navpill:hover::after { content: none; } body.side-collapsed nav.side .eyebrow { height: auto; padding: 0 10px; margin: 14px 0 6px; overflow: visible; color: var(--primary); background: none; } .navpill { padding: 12px; font-size: 14px; } /* conteúdo */ main.content { padding: 14px 12px 28px; } .page-head { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .page-head h2 { font-size: 18px; } .subtabs { overflow-x: auto; white-space: nowrap; } .subtabs button { flex: none; } .stats { gap: 10px; } .stat { padding: 12px 14px; } .card { padding: 14px; } /* filtros e grupos de botões ocupam a linha toda e rolam de lado se precisar */ .filtros > *, .filtros input, .filtros select { flex: 1 1 100%; width: 100% !important; min-width: 0 !important; } .btn-grupo { max-width: 100%; overflow-x: auto; } .filtros > .btn-grupo { flex: 0 1 auto; width: auto !important; } .dash-filtros { gap: 8px; } #filtro-tipo-box { flex: 1 1 100%; } #filtro-tipo-box input { width: 100% !important; min-width: 0 !important; } /* campos legíveis e sem zoom automático do iOS */ input, select, textarea { font-size: 16px; } .btn { padding-top: 9px; padding-bottom: 9px; } .btn-sm { padding-top: 7px; padding-bottom: 7px; } .btn.btn-icon { padding: 9px 11px; } /* modais e login */ .modal { width: 96%; padding: 16px; max-height: 92vh; } .backdrop.as-drawer .modal { padding: 16px 14px 24px; } .modal-actions { justify-content: stretch; } .modal-actions .btn { flex: 1 1 auto; } .login-card { width: min(380px, 92vw); padding: 24px; } .toast { left: 12px; right: 12px; bottom: 14px; } .aviso-banner { padding: 10px 12px; } /* Lista de contratos: cada contrato vira um cartão (sem rolagem lateral) */ section.page[data-page="contratos"] table { min-width: 0; } section.page[data-page="contratos"] thead { display: none; } #tb-contratos tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); } #tb-contratos td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 4px 0; border: 0; text-align: right; font-size: 13.5px; } #tb-contratos td[data-label]::before { content: attr(data-label); flex: none; text-align: left; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } #tb-contratos td:first-child { font-size: 15px; font-weight: 700; padding-bottom: 6px; } #tb-contratos td.td-acoes { justify-content: flex-end; padding-top: 10px; } #tb-contratos td.td-acoes .row-actions { flex-wrap: wrap; justify-content: flex-end; } #tb-contratos tr.atrasado td:first-child { box-shadow: none; } #tb-contratos tr.atrasado { box-shadow: inset 3px 0 0 0 var(--red); } }