/* RESTITUA · design system compartilhado Tudo o que é visual e se repete entre as telas mora aqui: tokens de cor, topo com navegação, cartões, números em destaque, botões, campos, tabelas, janelas e ícones. As páginas montam a estrutura; a aparência vem daqui. */ /* ====================================================================== TEMA — claro e escuro Nenhuma cor mora solta nas telas: todas passam por um destes tokens. Um token por PAPEL, e não por cor, porque a mesma cor faz papéis opostos — o grafite é texto no corpo e fundo do aviso flutuante; o branco é fundo do cartão e texto do botão verde. Invertendo por cor, o aviso viraria fundo claro com letra branca. O tema escuro liga com data-tema="escuro" no , posto pelo restitua-tema.js antes de a página pintar. ====================================================================== */ :root { /* neutros — levemente puxados para o verde do logo, para o cinza não brigar com a marca */ --fundo: #F5F4F0; --superficie: #FFFFFF; --superficie-alt: #FAFBFB; --superficie-cab: #F6F8F7; --superficie-mudo: #EBEFEE; --borda: #E1E6E4; --borda-suave: #ECF0EE; --borda-forte: #C9D2CF; --borda-canto: #C9D6D3; --texto: #0F1716; --texto-2: #1E2A28; --texto-3: #394744; --texto-suave: #5A6966; --texto-mudo: #8B9794; --grade: rgba(15, 23, 22, .035); /* marca */ --marca: #0F766E; --marca-hover: #0B5F58; --marca-texto: #0F766E; --marca-texto-forte: #0B4F49; --marca-claro: #EDF8F6; --marca-claro-2: #D2EEE9; --marca-borda: #7CCFC3; --marca-foco: #0D9488; --marca-anel: rgba(13, 148, 136, .18); --marca-grad: linear-gradient(135deg, #0B5F58 0%, #0F766E 45%, #14A396 100%); --marca-sombra: 0 12px 28px -14px rgba(15, 118, 110, .65); /* estados */ --verm-bg: #FEF2F2; --verm-bg-2: #FEE2E2; --verm-borda: #FCA5A5; --verm-borda-2: #FECACA; --verm-borda-3: #F87171; --verm-borda-forte: #B91C1C; --verm-texto: #B91C1C; --verm-texto-2: #DC2626; --verm-solido: #C62828; --verm-solido-hover: #A51F1F; --ambar-bg: #FEF3C7; --ambar-bg-2: #FFFBEB; --ambar-borda: #FDE68A; --ambar-texto: #B45309; --ambar-texto-2: #92400E; --verde-bg: #DCFCE7; --verde-bg-2: #F0FDF4; --verde-borda: #86EFAC; --verde-texto: #15803D; --roxo-bg: #EDE9FE; --roxo-texto: #7C3AED; --roxo-texto-2: #6D28D9; --azul-bg: #EFF4FF; --azul-borda: #C7D7FE; --azul-texto: #1D4ED8; --azul-solido: #1D4ED8; /* superfícies sólidas escuras: aviso flutuante e botão preto */ --aviso-bg: #0F1716; --btn-escuro-bg: #14201E; --btn-escuro-hover: #24322F; --btn-escuro-texto: #FFFFFF; /* profundidade */ --sombra-1: 0 1px 2px rgba(15, 23, 22, .05); --sombra-2: 0 1px 2px rgba(15, 23, 22, .04), 0 10px 28px -14px rgba(15, 23, 22, .16); --sombra-3: 0 30px 70px -24px rgba(15, 23, 22, .38), 0 2px 6px rgba(15, 23, 22, .06); --topo-bg: rgba(255, 255, 255, .84); --overlay: rgba(9, 14, 13, .42); /* paleta do Tailwind, que as páginas mapeiam para estes tokens */ --tw-graphite-50: #F6F8F7; --tw-graphite-100: #EBEFEE; --tw-graphite-200: #E1E6E4; --tw-graphite-400: #8B9794; --tw-graphite-600: #5A6966; --tw-graphite-800: #1E2A28; --tw-graphite-900: #0F1716; --tw-brand-50: #EDF8F6; --tw-brand-100: #D2EEE9; --tw-brand-300: #7CCFC3; --tw-brand-600: #0D9488; --tw-brand-700: #0F766E; --tw-brand-900: #0B4F49; } html[data-tema="escuro"] { /* Diz ao navegador para desenhar seletor de data, lista de opções e barra de rolagem no escuro — sem isso eles continuam brancos. */ color-scheme: dark; --fundo: #0A0E0D; --superficie: #121817; --superficie-alt: #151C1B; --superficie-cab: #172020; --superficie-mudo: #1D2726; --borda: #253030; --borda-suave: #1C2625; --borda-forte: #34413F; --borda-canto: #3A4A47; --texto: #E8EEEC; --texto-2: #D2DAD8; --texto-3: #B9C3C0; --texto-suave: #97A3A0; --texto-mudo: #6F7C79; --grade: rgba(255, 255, 255, .03); --marca: #0E8278; --marca-hover: #10998D; --marca-texto: #2DD4BF; --marca-texto-forte: #5EEAD4; --marca-claro: #0C2522; --marca-claro-2: #113A35; --marca-borda: #1F7D72; --marca-foco: #14B8A6; --marca-anel: rgba(45, 212, 191, .22); --marca-grad: linear-gradient(135deg, #0A4F49 0%, #0E7068 50%, #129488 100%); --marca-sombra: 0 14px 30px -16px rgba(0, 0, 0, .8); --verm-bg: #2B1416; --verm-bg-2: #3A1A1D; --verm-borda: #7A2E2E; --verm-borda-2: #5E2426; --verm-borda-3: #B84A4A; --verm-borda-forte: #EF4444; --verm-texto: #F87171; --verm-texto-2: #FCA5A5; --verm-solido: #B91C1C; --verm-solido-hover: #DC2626; --ambar-bg: #2E2410; --ambar-bg-2: #29210F; --ambar-borda: #6B5418; --ambar-texto: #FBBF24; --ambar-texto-2: #FCD34D; --verde-bg: #0F2A1B; --verde-bg-2: #0D2317; --verde-borda: #1F6B40; --verde-texto: #4ADE80; --roxo-bg: #231B3B; --roxo-texto: #A78BFA; --roxo-texto-2: #C4B5FD; --azul-bg: #111C33; --azul-borda: #25396B; --azul-texto: #93B4FF; --azul-solido: #2563EB; /* O aviso continua escuro, só se destaca do fundo. O botão preto inverte: no escuro, um botão preto sumiria na página. */ --aviso-bg: #25302E; --btn-escuro-bg: #E8EEEC; --btn-escuro-hover: #FFFFFF; --btn-escuro-texto: #0A0E0D; --sombra-1: 0 1px 2px rgba(0, 0, 0, .35); --sombra-2: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -16px rgba(0, 0, 0, .7); --sombra-3: 0 30px 80px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .04); --topo-bg: rgba(14, 19, 18, .82); --overlay: rgba(0, 0, 0, .6); --tw-graphite-50: #172020; --tw-graphite-100: #1D2726; --tw-graphite-200: #253030; --tw-graphite-400: #6F7C79; --tw-graphite-600: #97A3A0; --tw-graphite-800: #D2DAD8; --tw-graphite-900: #E8EEEC; --tw-brand-50: #0C2522; --tw-brand-100: #113A35; --tw-brand-300: #1F7D72; --tw-brand-600: #14B8A6; --tw-brand-700: #2DD4BF; --tw-brand-900: #5EEAD4; } /* `bg-white` é do Tailwind e não passa pela paleta: sem isto, algo marcado com ela ficaria branco no meio da tela escura. */ html[data-tema="escuro"] .bg-white { background-color: var(--superficie); } /* Reset mínimo: as páginas que não carregam o Tailwind não têm o preflight dele, e sem isso os campos com padding estouram a largura do container. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-feature-settings: 'cv11', 'ss01'; background: var(--fundo); color: var(--texto); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } ::selection { background: var(--marca-claro-2); color: var(--texto); } /* Barra de rolagem discreta, no tom do tema. */ * { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* ====================================================================== ÍCONES — traço fino, cor do texto ao redor ====================================================================== */ .ico { display: inline-block; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .ico-sm { width: 14px; height: 14px; } .ico-lg { width: 20px; height: 20px; } /* Os cliques das telas leem o atributo do próprio botão (e.target). Sem isto, clicar bem em cima do ícone entregaria o e o botão não faria nada. */ .ico, .btn > *, .btn-icone > * { pointer-events: none; } .i-grade { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1.5'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1.5'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1.5'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1.5'/%3E%3C/svg%3E"); } .i-carteira { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); } .i-grafico { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); } .i-escudo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .i-sino { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); } .i-usuario { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } .i-sair { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); } .i-filtro { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7'/%3E%3Cpath d='M10 4H3'/%3E%3Cpath d='M21 12h-9'/%3E%3Cpath d='M8 12H3'/%3E%3Cpath d='M21 20h-5'/%3E%3Cpath d='M12 20H3'/%3E%3Cpath d='M14 2v4'/%3E%3Cpath d='M8 10v4'/%3E%3Cpath d='M16 18v4'/%3E%3C/svg%3E"); } .i-busca { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); } .i-mais { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); } .i-baixar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); } .i-subir { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E"); } .i-desfazer { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); } .i-esq { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); } .i-dir { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); } .i-baixo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .i-voltar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"); } .i-clipe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); } .i-arquivo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E"); } .i-alerta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .i-calendario { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); } .i-lixeira { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E"); } .i-lapis { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); } .i-balanca { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); } .i-moedas { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18'/%3E%3Cpath d='M7 6h1v4'/%3E%3Cpath d='m16.71 13.88.7.71-2.82 2.82'/%3E%3C/svg%3E"); } .i-mensagem { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); } .i-copiar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); } .i-sol { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); } .i-lua { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E"); } .i-fechar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); } .i-tendencia { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E"); } .i-maleta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E"); } .i-local { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .i-casa { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .71-1.53l7-6a2 2 0 0 1 2.58 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .i-predio { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E"); } .i-relogio { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); } .i-cadeado { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); } .i-email { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); } .i-calculadora { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M16 14v4'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E"); } .i-enviar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.54 21.69a.5.5 0 0 0 .94-.03l6.5-19a.5.5 0 0 0-.64-.64l-19 6.5a.5.5 0 0 0-.03.94l7.93 3.18a2 2 0 0 1 1.11 1.11z'/%3E%3Cpath d='m21.85 2.15-10.94 10.94'/%3E%3C/svg%3E"); } .i-externo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); } .i-chave { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3C/svg%3E"); } .i-salvar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E"); } .i-pessoas { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } .i-add-pessoa { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E"); } .i-sortear { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22'/%3E%3Cpath d='m18 2 4 4-4 4'/%3E%3Cpath d='M2 6h1.9c1.5 0 2.9.9 3.6 2.2'/%3E%3Cpath d='M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8'/%3E%3Cpath d='m18 14 4 4-4 4'/%3E%3C/svg%3E"); } .i-olho { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .i-lista { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 5h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 19h8'/%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3C/svg%3E"); } .i-etiqueta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.59 2.59A2 2 0 0 0 11.17 2H4a2 2 0 0 0-2 2v7.17a2 2 0 0 0 .59 1.42l8.7 8.7a2.43 2.43 0 0 0 3.42 0l6.58-6.58a2.43 2.43 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E"); } .i-extrato { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E"); } .i-brilho { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.14-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.14 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0z'/%3E%3C/svg%3E"); } :root { --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6966' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } html[data-tema="escuro"] { --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A3A0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* ====================================================================== TOPO — marca, navegação e conta ====================================================================== */ .topo { position: sticky; top: 0; z-index: 40; background: var(--topo-bg); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--borda); } .topo-in { margin: 0 auto; max-width: 1360px; height: 64px; padding: 0 16px; display: flex; align-items: center; gap: 14px; } @media (min-width: 640px) { .topo-in { padding: 0 24px; } } .topo-marca { display: flex; align-items: center; gap: 10px; flex: none; } .topo-marca img { width: 34px; height: 34px; } .topo-marca span { font-size: 15px; font-weight: 750; letter-spacing: .08em; } @media (max-width: 520px) { .topo-marca span { display: none; } } .topo-nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .topo-nav::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .topo-nav { margin-left: 28px; } } .nav-item { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--texto-3); text-decoration: none; transition: color .15s, background .15s; } .nav-item:hover { color: var(--texto); background: var(--superficie-cab); } .nav-item.on { background: var(--marca-claro); color: var(--marca-texto-forte); } /* No computador as abas são só texto; os ícones aparecem na barra de baixo do celular, onde a palavra sozinha não cabe. */ @media (min-width: 641px) { .nav-item .ico { display: none; } } .topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; } .topo-divisor { width: 1px; height: 24px; background: var(--borda); margin: 0 2px; } .btn-icone { position: relative; display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; cursor: pointer; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-2); box-shadow: var(--sombra-1); text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .btn-icone:hover { background: var(--superficie-cab); border-color: var(--borda-forte); color: var(--texto); } .btn-icone:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--marca-anel); } .btn-icone[aria-expanded="true"] { background: var(--superficie-mudo); } .btn-icone.perigo { color: var(--verm-texto); border-color: var(--verm-borda-2); background: var(--verm-bg); } .btn-icone.perigo:hover { background: var(--verm-bg-2); } .contador { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--verm-solido); color: #fff; font-size: 10.5px; font-weight: 700; border: 2px solid var(--superficie); font-variant-numeric: tabular-nums; } .contador.marca { background: var(--marca); } /* Conta: separada das ações por uma linha fina, sem caixa em volta. */ .usuario { display: flex; align-items: center; gap: 10px; margin-left: 6px; padding: 2px 4px 2px 16px; border: 0; border-left: 1px solid var(--borda); border-radius: 0; background: none; color: inherit; text-decoration: none; cursor: pointer; font: inherit; text-align: left; transition: opacity .15s; } .usuario:hover { opacity: .8; } .usuario:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--marca-anel); } .avatar { width: 34px; height: 34px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--marca-grad); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; } .usuario-txt { display: none; flex-direction: column; line-height: 1.2; min-width: 0; } @media (min-width: 1100px) { .usuario-txt { display: flex; } } .usuario-txt b { font-size: 13px; font-weight: 600; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usuario-txt small { font-size: 11px; color: var(--texto-mudo); font-weight: 500; } @media (max-width: 1099px) { .usuario { padding-left: 12px; } } /* A marca no topo leva ao painel. O cursor e o leve esmaecer no hover são o sinal de que é clicável. */ a.marca { color: inherit; text-decoration: none; cursor: pointer; transition: opacity .14s; } a.marca:hover { opacity: .75; } a.marca:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 6px; } /* Menu suspenso (notificações). */ .suspenso { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(94vw, 420px); overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra-3); animation: surgir .16s ease-out; } /* ====================================================================== PÁGINA ====================================================================== */ .pagina { margin: 0 auto; max-width: 1360px; padding: 28px 16px 48px; } @media (min-width: 640px) { .pagina { padding: 32px 24px 56px; } } .pagina.estreita { max-width: 1180px; } .pagina.media { max-width: 1360px; } .pagina > * + * { margin-top: 20px; } .cab-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; } .sobretitulo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--marca-texto); } .titulo-pagina { font-size: 24px; font-weight: 600; letter-spacing: -.022em; line-height: 1.2; margin-top: 4px; } @media (min-width: 640px) { .titulo-pagina { font-size: 28px; } } /* Título de uma parte da página ("Produção do mês"): menor que o da página, em letra normal — nada de caixa alta. */ .secao-titulo { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--texto); } .subtitulo-pagina { font-size: 14px; line-height: 1.55; color: var(--texto-suave); margin-top: 8px; max-width: 76ch; } .subtitulo-pagina b { color: var(--texto-2); font-weight: 600; } .link-voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-suave); text-decoration: none; } .link-voltar:hover { color: var(--texto); } /* ====================================================================== SUPERFÍCIES ====================================================================== */ .card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra-1); } .card-cab { display: flex; align-items: center; gap: 12px; } .card-titulo { font-size: 15px; font-weight: 650; letter-spacing: -.012em; line-height: 1.3; } .card-desc { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; } .selo { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--marca-claro); color: var(--marca-texto); box-shadow: inset 0 0 0 1px var(--marca-claro-2); } .selo .ico { width: 18px; height: 18px; } .selo.ambar { background: var(--ambar-bg-2); color: var(--ambar-texto); box-shadow: inset 0 0 0 1px var(--ambar-borda); } .selo.roxo { background: var(--roxo-bg); color: var(--roxo-texto); box-shadow: none; } .selo.verm { background: var(--verm-bg); color: var(--verm-texto); box-shadow: inset 0 0 0 1px var(--verm-borda-2); } .selo.neutro { background: var(--superficie-mudo); color: var(--texto-suave); box-shadow: none; } .passo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--marca); color: #fff; font-size: 11.5px; font-weight: 700; flex: none; } .sect { font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--texto); } .divisor-rot { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-mudo); } .divisor-rot::before, .divisor-rot::after { content: ''; flex: 1; height: 1px; background: var(--borda); } /* Quadro de aviso dentro do conteúdo. */ .aviso { border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; border: 1px solid; } .aviso.erro { background: var(--verm-bg); border-color: var(--verm-borda-2); color: var(--verm-texto); } .aviso.marca { background: var(--marca-claro); border-color: var(--marca-claro-2); color: var(--marca-texto-forte); } .aviso.ambar { background: var(--ambar-bg-2); border-color: var(--ambar-borda); color: var(--ambar-texto-2); } /* ====================================================================== NÚMEROS EM DESTAQUE ====================================================================== */ .stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); } .stat { position: relative; min-width: 0; padding: 14px 16px 15px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; } .stats.embutidos .stat { background: var(--superficie-alt); border-color: var(--borda-suave); } .stat-rot { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; font-weight: 550; line-height: 1.35; color: var(--texto-suave); } .stat-rot::before { content: ''; width: 7px; height: 7px; margin-top: 4px; border-radius: 99px; flex: none; background: var(--cor, var(--borda-forte)); } .stat-val { display: block; margin-top: 8px; font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--cor-val, var(--texto)); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-sub { display: block; margin-top: 4px; font-size: 11.5px; color: var(--texto-mudo); } .stat.grande .stat-val { font-size: 22px; } /* No celular, um número por linha vira uma rolagem sem fim: dois lado a lado. */ @media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .stat { padding: 12px 13px; } .stat-val, .stat.grande .stat-val { font-size: 16px; } } .tom-marca { --cor: var(--marca-texto); --cor-val: var(--marca-texto); } .tom-ambar { --cor: var(--ambar-texto); --cor-val: var(--ambar-texto); } .tom-roxo { --cor: var(--roxo-texto); --cor-val: var(--roxo-texto); } .tom-verm { --cor: var(--verm-texto); --cor-val: var(--verm-texto); } .tom-verde { --cor: var(--verde-texto); --cor-val: var(--verde-texto); } .tom-neutro { --cor: var(--texto-mudo); } /* O número que interessa a quem olha: gradiente da marca, letra branca, nos dois temas. */ .stat.destaque, .stats.embutidos .stat.destaque, .destaque-valor { background: var(--marca-grad); border-color: transparent; color: #fff; box-shadow: var(--marca-sombra); --cor: #fff; --cor-val: #fff; } .stat.destaque .stat-rot { color: rgba(255, 255, 255, .86); } .stat.destaque .stat-sub { color: rgba(255, 255, 255, .75); } .destaque-valor { border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden; } .destaque-valor::after { content: ''; position: absolute; right: -40px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; } .destaque-valor .rot { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .88); display: flex; align-items: center; gap: 7px; } .destaque-valor .val { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; } .destaque-valor .nota { font-size: 11.5px; color: rgba(255, 255, 255, .75); margin-top: 4px; } /* ---- Faixa de métricas ---- Números lado a lado numa faixa só, separados por linhas finas — sem caixa dentro de caixa, que era o que deixava o bloco pesado. Seis por linha no computador, três no tablet, duas no celular. As linhas são o fundo da faixa aparecendo entre as células (gap de 1px), então continuam certas quando a faixa quebra em mais de uma linha. */ .metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--borda-suave); border: 1px solid var(--borda-suave); border-radius: 12px; overflow: hidden; } @media (min-width: 768px) { .metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { .metricas { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .metricas.plana { border: 0; border-radius: 0; border-bottom: 1px solid var(--borda); } .metrica { min-width: 0; padding: 14px 18px; background: var(--superficie); } .metrica-rot { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .metrica-rot::before { content: ''; width: 6px; height: 6px; border-radius: 99px; flex: none; background: var(--cor, var(--borda-forte)); } .metrica-val { display: block; margin-top: 6px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--cor-val, var(--texto)); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .metrica-val small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--texto-suave); } .metrica-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--texto-mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* O número de quem olha: fundo da marca, suave, em vez de um bloco escuro. */ .metrica.destaque { background: var(--marca-claro); --cor: var(--marca-texto); --cor-val: var(--marca-texto-forte); } .metrica.destaque .metrica-rot, .metrica.destaque .metrica-sub { color: var(--marca-texto-forte); } .metrica.destaque .metrica-sub { opacity: .8; } @media (max-width: 640px) { .metrica { padding: 12px 14px; } .metrica-val { font-size: 16px; } /* Em meia tela o texto quebra linha em vez de sair cortado; a grade mantém as duas células de cada linha com a mesma altura. */ .metrica-rot, .metrica-sub { white-space: normal; } .metrica-rot { align-items: flex-start; } .metrica-rot::before { margin-top: 5px; } } /* ---- Cartões de resumo (produção do mês) ---- Poucos números, cada um no seu cartão, grandes e com uma linha que explica de onde vêm. Quatro por linha no computador, dois no tablet e no celular. */ .resumos { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1100px) { .resumos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } } .resumo { min-width: 0; padding: 18px 20px 17px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; } .resumo-rot { display: block; font-size: 13px; color: var(--texto-3); } .resumo-val { display: block; margin-top: 8px; font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--cor-val, var(--texto)); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .resumo-sub { display: block; margin-top: 8px; font-size: 12.5px; color: var(--texto-mudo); } .resumo.destaque { background: var(--marca-claro); border-color: var(--marca-claro-2); --cor-val: var(--marca-texto-forte); } .resumo.destaque .resumo-rot, .resumo.destaque .resumo-sub { color: var(--marca-texto-forte); } .resumo.destaque .resumo-sub { opacity: .85; } @media (max-width: 640px) { .resumo { padding: 14px 14px 13px; } .resumo-val { font-size: 19px; } .resumo-rot, .resumo-sub { font-size: 12px; } } /* Compatível com o formato antigo (rótulo + ), ainda gerado em alguns pontos. */ .kpi { font-size: 12px; color: var(--texto-suave); } .kpi b { display: block; font-size: 15px; color: var(--texto); font-variant-numeric: tabular-nums; margin-top: 3px; font-weight: 600; } /* ====================================================================== FORMULÁRIOS ====================================================================== */ .lbl { display: block; font-size: 12.5px; font-weight: 550; color: var(--texto-3); margin-bottom: 6px; } .req::after { content: ' *'; color: var(--verm-texto); } .dica { font-size: 11.5px; line-height: 1.45; color: var(--texto-mudo); margin-top: 6px; } .inp { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 10px; font: inherit; font-size: 14px; color: var(--texto); background-color: var(--superficie); box-shadow: 0 1px 1px rgba(15, 23, 22, .03); transition: border-color .15s, box-shadow .15s, background-color .15s; } .inp::placeholder { color: var(--texto-mudo); } .inp:hover { border-color: var(--borda-forte); } .inp:focus { outline: none; border-color: var(--marca-foco); box-shadow: 0 0 0 4px var(--marca-anel); } textarea.inp { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; } select.inp { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; background-image: var(--seta-select); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } select.inp:disabled { cursor: default; } .inp[type="date"] { padding-right: 8px; } .inp-sm { height: 32px; padding: 0 9px; font-size: 12.5px; border-radius: 8px; } select.inp.inp-sm { padding-right: 26px; background-position: right 6px center; background-size: 14px; } .inp[readonly] { background-color: var(--superficie-mudo); color: var(--texto-suave); } .inp.err { border-color: var(--verm-borda-forte); background-color: var(--verm-bg); } /* Obrigatório ainda em branco. Aparece desde que a tela abre, não só ao salvar: quem preenche vê de cara o que falta, em vez de descobrir no fim. */ .inp.falta { border-color: var(--verm-borda-3); background-color: var(--verm-bg); } .inp.falta:focus { background-color: var(--superficie); } /* Campo calculado que aponta um problema (diferença, excesso). */ .inp.neg, .inp.neg[readonly] { color: var(--verm-texto-2); font-weight: 600; } .lbl.neg { color: var(--verm-texto-2); } /* Campo preenchido pela leitura do PDF: destacado até a pessoa conferir. */ .inp.pdf { border-color: var(--marca-borda); background-color: var(--marca-claro); } .inp.pdf:focus { background-color: var(--superficie); } /* Campo em modo consulta: continua legível e selecionável, mas o fundo diz que ali não se escreve. Diferente de `:disabled`, que apaga o texto. */ .inp-lendo, .inp-lendo[readonly] { background-color: var(--superficie-cab); color: var(--texto-3); cursor: default; } .inp-lendo:focus { border-color: var(--borda); box-shadow: none; } input[type="checkbox"] { accent-color: var(--marca); width: 16px; height: 16px; cursor: pointer; vertical-align: middle; } /* Busca com lupa dentro do campo. */ .campo-ico { position: relative; flex: 1; min-width: 0; } .campo-ico > .ico { position: absolute; left: 13px; top: 50%; margin-top: -8px; color: var(--texto-mudo); } .campo-ico > .inp { padding-left: 38px; height: 42px; } /* Grade de formulário de quatro colunas. */ .grid4 { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 700px) { .grid4 { grid-template-columns: repeat(2, 1fr); } .span2 { grid-column: span 2; } } @media (min-width: 1180px) { .grid4 { grid-template-columns: repeat(4, 1fr); } .full { grid-column: span 4; } } /* Seção recolhível do formulário. */ details.secao { border-top: 1px solid var(--borda-suave); padding-top: 20px; } details.secao > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; margin-bottom: 16px; user-select: none; } details.secao > summary::-webkit-details-marker { display: none; } details.secao > summary::after { content: ''; margin-left: auto; width: 18px; height: 18px; background-color: var(--texto-mudo); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; transition: transform .18s; } details.secao:not([open]) > summary { margin-bottom: 0; } details.secao:not([open]) > summary::after { transform: rotate(-90deg); } details.secao > summary .selo { width: 32px; height: 32px; border-radius: 10px; } details.secao > summary .selo .ico { width: 16px; height: 16px; } /* Área para soltar o PDF. */ .soltar { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; padding: 24px 16px; text-align: center; border-radius: 14px; border: 1.5px dashed var(--marca-borda); background: var(--marca-claro); transition: background .15s, border-color .15s; } .soltar:hover { background: var(--marca-claro-2); border-color: var(--marca-foco); } .soltar .selo { background: var(--superficie); margin-bottom: 4px; } /* Cartão de escolha (comarca). */ .opcao { display: block; width: 100%; text-align: left; border-radius: 14px; border: 2px solid var(--borda); padding: 16px; background: var(--superficie); cursor: pointer; transition: border-color .15s, background .15s; } .opcao:hover { border-color: var(--borda-forte); } /* Controle segmentado: duas ou três opções lado a lado. */ .seg { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: var(--superficie-mudo); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .seg.cheio { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; } .seg button, .seg .seg-item { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--texto-suave); background: transparent; transition: color .15s, background .15s, box-shadow .15s; } .seg button:hover { color: var(--texto); } .seg button.on, .seg button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1), 0 0 0 1px var(--borda); } .seg button.on .ico, .seg button[aria-pressed="true"] .ico { color: var(--marca-texto); } .seg button > * { pointer-events: none; } /* ====================================================================== BOTÕES ====================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; cursor: pointer; text-decoration: none; user-select: none; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s, transform .06s; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--marca-anel); } .btn-p { background: var(--marca); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(15, 23, 22, .14), 0 8px 18px -10px rgba(15, 118, 110, .7); } .btn-p:hover { background: var(--marca-hover); } .btn-d { background: var(--btn-escuro-bg); color: var(--btn-escuro-texto); box-shadow: 0 1px 2px rgba(15, 23, 22, .18); } .btn-d:hover { background: var(--btn-escuro-hover); } .btn-g { background: var(--superficie); color: var(--texto-2); border-color: var(--borda); box-shadow: var(--sombra-1); } .btn-g:hover { background: var(--superficie-cab); border-color: var(--borda-forte); color: var(--texto); } .btn-r { background: var(--verm-solido); color: #fff; } .btn-r:hover { background: var(--verm-solido-hover); } .btn-suave { background: var(--marca-claro); color: var(--marca-texto-forte); border-color: var(--marca-claro-2); } .btn-suave:hover { background: var(--marca-claro-2); } .btn-perigo { background: var(--verm-bg); color: var(--verm-texto); border-color: var(--verm-borda-2); } .btn-perigo:hover { background: var(--verm-bg-2); } .btn-azul { background: var(--azul-bg); color: var(--azul-texto); border-color: var(--azul-borda); } .btn-azul:hover { border-color: var(--azul-texto); } .btn-fantasma { background: transparent; color: var(--texto-suave); } .btn-fantasma:hover { background: var(--superficie-mudo); color: var(--texto); } .btn-sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; gap: 6px; } .btn-sm .ico { width: 14px; height: 14px; } .btn-lg { height: 44px; padding: 0 20px; font-size: 14px; border-radius: 12px; } .btn:disabled { background: var(--superficie-mudo) !important; color: var(--texto-mudo) !important; border-color: var(--borda) !important; box-shadow: none !important; cursor: not-allowed; } /* ====================================================================== PÍLULAS E LINHAS ====================================================================== */ .pill { display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 9px; font-size: 11.5px; font-weight: 600; border-radius: 999px; white-space: nowrap; text-decoration: none; letter-spacing: .005em; } .pill.ponto::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: .9; } a.pill:hover { filter: brightness(.97); } .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; padding: 8px 0; } .row b { font-variant-numeric: tabular-nums; font-weight: 600; } /* ====================================================================== TABELAS ====================================================================== */ table.p { width: 100%; border-collapse: collapse; } table.p td, table.p th { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--borda-suave); text-align: right; font-variant-numeric: tabular-nums; } table.p th { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-mudo); background: var(--superficie-cab); border-bottom-color: var(--borda); white-space: nowrap; } table.p td:first-child, table.p th:first-child { text-align: left; } table.p tbody tr { transition: background .12s; } table.p tbody tr:hover { background: var(--superficie-alt); } table.p tbody tr:last-child td { border-bottom-color: var(--borda); } table.p tfoot td { background: var(--superficie-cab); font-weight: 650; border-bottom: none; } /* ---- Tabela larga do painel ---- A classe NÃO pode se chamar `grid`: o Tailwind tem um utilitário com esse nome que aplica `display: grid`, e isso desmonta a tabela — thead, tbody e tfoot viram blocos independentes e cada um calcula suas próprias larguras de coluna. `width: max-content` é o ponto crítico: com `width: 100%` a tabela ficava presa à largura do container enquanto o conteúdo pedia mais, as células transbordavam e cabeçalho, corpo e rodapé deixavam de concordar sobre onde cada coluna começa. `min-width: 100%` mantém a tabela cheia quando sobra espaço. */ table.tabelao { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; white-space: nowrap; } table.tabelao th, table.tabelao td { padding: 12px 16px; font-size: 12.5px; border-bottom: 1px solid var(--borda-suave); text-align: left; vertical-align: middle; } table.tabelao th { position: sticky; top: 0; z-index: 2; background: var(--superficie-cab); color: var(--texto-mudo); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; user-select: none; border-bottom: 1px solid var(--borda); } table.tabelao th[data-ord] { cursor: pointer; } table.tabelao th[data-ord]:hover { color: var(--texto); } table.tabelao th.sorted { color: var(--marca-texto); } table.tabelao th.sorted::after { content: ' ↓'; } table.tabelao th.sorted.asc::after { content: ' ↑'; } /* Dinheiro e contagens à direita, com algarismos de mesma largura: assim as casas decimais ficam alinhadas de uma linha para a outra. */ table.tabelao td.n, table.tabelao th.n { text-align: right; font-variant-numeric: tabular-nums; } table.tabelao tbody tr:hover td { background: var(--superficie-alt); } /* Primeira coluna congelada: sem isso, ao rolar para o lado some a referência de qual processo é cada linha. */ table.tabelao th:first-child, table.tabelao td:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); box-shadow: 1px 0 0 var(--borda-suave); } table.tabelao thead th:first-child { z-index: 4; background: var(--superficie-cab); } table.tabelao tbody tr:hover td:first-child { background: var(--superficie-alt); } table.tabelao tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--superficie-cab); font-weight: 650; border-top: 1px solid var(--borda); border-bottom: none; } table.tabelao tfoot td:first-child { z-index: 4; background: var(--superficie-cab); } .sub { display: block; font-size: 11px; color: var(--texto-mudo); font-weight: 400; margin-top: 3px; } /* Barra horizontal (relatório). */ .barra { height: 8px; border-radius: 999px; background: var(--superficie-mudo); overflow: hidden; } .barra span { display: block; height: 100%; border-radius: 999px; background: var(--marca-grad); } /* ====================================================================== JANELAS, AVISO FLUTUANTE E BARRA DE AÇÕES ====================================================================== */ .modal { position: fixed; inset: 0; z-index: 50; padding: 16px; overflow: auto; background: var(--overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: esmaecer .16s ease-out; } .modal > .card { border-radius: 20px; box-shadow: var(--sombra-3); animation: surgir .2s ease-out; } .modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .toast { position: fixed; left: 50%; bottom: 28px; z-index: 70; transform: translateX(-50%); max-width: min(92vw, 560px); padding: 12px 18px; border-radius: 12px; background: var(--aviso-bg); color: #fff; box-shadow: var(--sombra-3); font-size: 13px; font-weight: 500; line-height: 1.45; text-align: center; animation: subir .2s ease-out; } .toast.alto { bottom: 100px; } .barra-acoes { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--topo-bg); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid var(--borda); } @keyframes surgir { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes esmaecer { from { opacity: 0; } to { opacity: 1; } } @keyframes subir { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ====================================================================== UTILIDADES ====================================================================== */ .hid { display: none !important; } .num { font-variant-numeric: tabular-nums; } .vazio { padding: 40px 20px; text-align: center; color: var(--texto-suave); font-size: 13.5px; } .vazio .selo { margin: 0 auto 12px; width: 44px; height: 44px; border-radius: 14px; } .vazio .selo .ico { width: 20px; height: 20px; } .vazio > b { display: block; color: var(--texto); font-size: 15px; font-weight: 650; margin-bottom: 4px; } .vazio > p { max-width: 62ch; margin: 0 auto; } /* "setembro de 2026" -> "Setembro de 2026", sem mexer no "de". */ .maiuscula-inicial { display: inline-block; } .maiuscula-inicial::first-letter { text-transform: uppercase; } /* ====================================================================== CELULAR E TOQUE Tudo o que muda em tela pequena mora aqui, num lugar só: - Até 640px a navegação principal (.topo-nav) desce para uma barra fixa no rodapé, como num aplicativo, e o topo fica só com marca e conta. - Tabela com a classe `empilha` vira uma pilha de cartões: cada célula mostra o nome da coluna ao lado do valor. O nome vem do cabeçalho da própria tabela (o restitua-core.js preenche `data-rot` sozinho), então adaptar uma tabela nova é só pôr a classe. - Até 767px o painel troca a tabela larga (.tabela-larga) pela lista de cartões (.lista-casos), montada pelo script do painel. ====================================================================== */ html { -webkit-tap-highlight-color: transparent; } /* ---- Lista de processos em cartões (painel) ---- */ .lista-casos { display: none; } .caso { padding: 16px; border-bottom: 1px solid var(--borda); } .caso:last-child { border-bottom: 0; } .caso-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .caso-nome { font-size: 15px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; } .caso-sub { font-size: 12px; color: var(--texto-mudo); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .caso-valor { flex: none; text-align: right; } .caso-valor span, .caso-nums span, .caso-rot { display: block; font-size: 11px; font-weight: 500; color: var(--texto-mudo); } .caso-valor b { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .caso-pilulas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .caso-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--superficie-alt); border: 1px solid var(--borda-suave); } .caso-nums b { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .caso-fase { margin-top: 12px; } .caso-fase select { width: 100%; min-width: 0 !important; margin-top: 4px; } .caso-acoes { display: flex; gap: 8px; margin-top: 14px; } .caso-acoes .btn { flex: 1; } .caso-acoes .btn[data-rm] { flex: none; width: 44px; padding: 0; } @media (max-width: 767px) { .lista-casos { display: block; } .tabela-larga { display: none; } } /* ---- Toque: dedo não é cursor, os alvos crescem ---- */ @media (pointer: coarse) { .btn-sm { height: 36px; padding: 0 12px; } .inp-sm { height: 38px; } input[type="checkbox"] { width: 20px; height: 20px; } } /* ---- Tela de celular ---- */ @media (max-width: 640px) { /* O iPhone amplia a página sozinho ao tocar num campo com letra menor que 16px, e não desfaz. A tela de entrada fica de fora: não tem o topo. */ html:has(.topo) .inp { font-size: 16px !important; } /* Sem o desfoque: um elemento com backdrop-filter prende os filhos com position: fixed dentro dele, e a barra de baixo sairia do lugar. */ .topo { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--superficie); } .topo-in { height: 58px; padding: 0 14px; gap: 10px; } .topo-marca img { width: 32px; height: 32px; } .topo-marca span { display: inline; font-size: 14px; } .topo-acoes { gap: 6px; } .topo-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; justify-content: space-around; gap: 4px; overflow: visible; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-radius: 0; background: var(--superficie); border-top: 1px solid var(--borda); box-shadow: 0 -10px 30px -22px rgba(15, 23, 22, .45); } .nav-item { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; height: 52px; padding: 0 2px; border-radius: 12px; font-size: 10.5px; } .nav-item .ico { width: 21px; height: 21px; } .nav-item span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .nav-item.on { background: var(--marca-claro); color: var(--marca-texto-forte); box-shadow: none; } body:has(.topo-nav) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } /* O que flutua sobe acima da barra de baixo. */ .barra-acoes { bottom: calc(65px + env(safe-area-inset-bottom)); } .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } .toast.alto { bottom: calc(150px + env(safe-area-inset-bottom)); } .suspenso { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; } .pagina { padding: 20px 14px 32px; } .pagina > * + * { margin-top: 16px; } .titulo-pagina { font-size: 24px; } .subtitulo-pagina { font-size: 13.5px; } /* As ações do cabeçalho da página ocupam a largura toda, em partes iguais. */ .cab-pagina > div:last-child:not(:first-child) { width: 100%; } .cab-pagina > div:last-child:not(:first-child) > .btn, .cab-pagina > .seg button { flex: 1; } .modal { padding: 10px; } .modal > .card { margin-top: 12px; margin-bottom: 12px; } /* ---- Tabela que vira cartões ---- */ table.empilha, table.empilha tbody, table.empilha tfoot, table.empilha tr, table.empilha td { display: block; width: 100%; } table.empilha thead { display: none; } table.empilha tr { padding: 10px 16px; border-bottom: 1px solid var(--borda-suave); } table.empilha tbody tr:hover { background: transparent; } table.empilha td { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; padding: 5px 0; border: 0; text-align: right !important; white-space: normal; } table.empilha td::before { content: attr(data-rot); margin-right: auto; text-align: left; font-size: 12px; font-weight: 500; color: var(--texto-mudo); } table.empilha td[data-rot=""] { justify-content: flex-start; text-align: left !important; } table.empilha td[data-rot=""]::before { display: none; } table.empilha td .sub { flex-basis: 100%; } /* Campos dentro da célula (papel, OAB, telefone) usam a largura que sobra, em vez da largura fixa pensada para a tabela do computador. */ table.empilha td > div { flex-basis: 100%; } table.empilha td .inp { flex: 1 1 auto; } table.empilha tfoot tr { background: var(--superficie-cab); } table.empilha tfoot td { background: transparent; } }