/* ===================================================================== Sistema Linq — estilos gerais (baseados no protótipo aprovado) As cores e fontes vêm de Configurações › Aparência (variáveis em base.html) ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--tam, 14px); } body { margin: 0; font-family: var(--fonte); color: #0F1B2D; background: #F3F5F9; line-height: 1.5; } a { color: var(--cor-principal); } a:hover { filter: brightness(.85); } h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.2; } img { max-width: 100%; } .oculto { position: absolute !important; left: -9999px; } /* ---------- Estrutura ---------- */ .app { display: flex; min-height: 100vh; } .conteudo { flex: 1; min-width: 0; padding: 24px 32px 56px; display: flex; flex-direction: column; gap: 18px; } .conteudo.estreito { max-width: 1100px; } .cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .cabecalho h1 { margin: 0; font-size: 1.85rem; } .subtitulo { color: #475569; font-size: .95rem; margin-top: 4px; } .migalha { font-size: .93rem; color: #475569; } /* ---------- Menu lateral (opção A + C) ---------- */ .menu { width: 256px; flex-shrink: 0; background: var(--cor-menu); border-right: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; padding: 14px 10px; min-height: 100vh; position: sticky; top: 0; max-height: 100vh; transition: width .2s; color: #CBD5E1; } .menu.recolhido { width: 72px; } .menu.organizando { width: 300px; } .menu-topo { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px; min-height: 40px; } .menu-marca { width: 34px; height: 34px; border-radius: 9px; background: #2563EB; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-weight: 700; flex-shrink: 0; } .menu-logo { max-width: 100%; object-fit: contain; } .menu-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; } .menu-nome strong { color: #fff; font-size: 15px; } .menu-nome span { font-size: 11.5px; color: #94A3B8; } .menu-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid #334155; background: transparent; color: #94A3B8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font: 700 13px var(--fonte); } .menu-btn:hover { color: #fff; border-color: #64748B; } .menu-grupos { flex: 1; min-height: 0; overflow-y: auto; } .menu-grupo-cab { display: flex; align-items: center; gap: 4px; } .menu-grupo-tit { flex: 1; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; font: 700 11px var(--fonte); text-transform: uppercase; letter-spacing: .08em; padding: 14px 10px 6px; text-align: left; color: #7D8FAD; } .menu-grupo-tit:hover { color: var(--cor-menu-destaque); } .menu-grupo-tit .chev { margin-left: auto; font-size: 12px; transition: transform .15s; } .menu-grupo.fechado .chev { transform: rotate(-90deg); } .menu-grupo.fechado .menu-itens { display: none; } .menu-sep { display: none; height: 1px; background: #1E293B; margin: 10px 8px; } .menu-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .menu-itens li { display: flex; align-items: center; gap: 4px; } .menu-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 8px; border-radius: 10px; text-decoration: none; color: #CBD5E1; font-weight: 500; font-size: 14px; transition: background .15s, color .15s; } .menu-item .ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,.05); color: #94A3B8; transition: background .15s, color .15s; } .menu-item .rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-item:hover { background: rgba(255,255,255,.08); color: #fff; filter: none; } .menu-item:hover .ic { color: var(--cor-menu-destaque); background: rgba(255,255,255,.1); } .menu-item.ativo { background: #2563EB; color: #fff; } .menu-item.ativo .ic { background: rgba(255,255,255,.18); color: #fff; } .menu-item .selo { margin-left: auto; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.08); color: #94A3B8; } .menu .org { display: none; gap: 4px; } .menu .org button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #334155; background: transparent; color: #CBD5E1; cursor: pointer; } .menu-aviso-org { display: none; font-size: 12px; line-height: 1.45; color: #CBD5E1; background: #16213A; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; } .menu.organizando .org, .menu.organizando .org-acoes { display: flex; } .menu.organizando .menu-aviso-org { display: block; } .menu.organizando .menu-grupo.fechado .menu-itens { display: flex; } .menu-rodape { padding-top: 12px; margin-top: 8px; border-top: 1px solid #1E293B; display: flex; flex-direction: column; gap: 8px; } .org-acoes { display: none; gap: 6px; } .org-acoes button { flex: 1; min-height: 34px; border-radius: 8px; border: 1px solid #334155; background: transparent; color: #CBD5E1; font: 600 12.5px var(--fonte); cursor: pointer; } .org-acoes button.pri { background: #2563EB; border-color: #2563EB; color: #fff; } .menu-usuario { display: flex; align-items: center; gap: 10px; padding-left: 4px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: #1E293B; color: #7DD3FC; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; text-decoration: none; } .avatar.ativo { background: #2563EB; color: #fff; } .menu-usuario-nome { flex: 1; min-width: 0; text-decoration: none; display: flex; flex-direction: column; } .menu-usuario-nome strong { color: #fff; font-size: 13px; } .menu-usuario-nome span { color: #94A3B8; font-size: 11.5px; } .menu-sair { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: #94A3B8; font: 500 13.5px var(--fonte); cursor: pointer; } .menu-sair:hover { background: rgba(255,255,255,.06); color: #fff; } .menu-sair .ic { width: 30px; display: inline-flex; justify-content: center; } .menu.recolhido .rot, .menu.recolhido .menu-grupo-cab { display: none !important; } .menu.recolhido .menu-sep { display: block; } .menu.recolhido .menu-grupo.fechado .menu-itens { display: flex; } .menu.recolhido .menu-item, .menu.recolhido .menu-usuario, .menu.recolhido .menu-sair { justify-content: center; } .menu.recolhido .menu-topo { flex-direction: column; } /* Barras de ajuste (tamanho do logotipo, cantos, texto) */ input[type=range].inp-range { width: 100%; accent-color: var(--cor-principal); min-height: 28px; } /* ---------- Componentes ---------- */ .card { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 14px; } .card h2 { margin: 0; font-size: 1.2rem; } .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--raio); border: 1px solid var(--cor-botao2); background: #fff; color: #0F1B2D; font: 500 14px var(--fonte); cursor: pointer; text-decoration: none; white-space: nowrap; } .btn:hover { background: #F1F5F9; filter: none; } .btn.pri { background: var(--cor-botao); border-color: var(--cor-botao); color: var(--cor-botao-texto); } .btn.pri:hover { filter: brightness(.92); } .btn.perigo { color: #B91C1C; border-color: #FECACA; } .btn.perigo:hover { background: #FEF2F2; } .btn.peq { min-height: 32px; padding: 0 10px; font-size: 13px; } .btn.bloco { width: 100%; min-height: 48px; font-weight: 700; font-size: 15px; } .acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .acoes.fim { justify-content: flex-end; } .selo { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #fff; white-space: nowrap; } .selo.ok { background: #047857; } .selo.alerta { background: #B45309; } .selo.erro { background: #B91C1C; } .selo.neutro { background: #475569; } .selo.azul { background: #1D4ED8; } .aviso { border-radius: 10px; padding: 10px 14px; font-size: .95rem; border: 1px solid; } .aviso.info { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; } .aviso.sucesso { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; } .aviso.erro { background: #FEF2F2; border-color: #FECACA; color: #991B1B; } .aviso.alerta { background: #FFFBEB; border-color: #FCD34D; color: #78350F; } .mensagens { display: flex; flex-direction: column; gap: 8px; } .ajuda, .hint { font-size: 12.5px; color: #475569; font-weight: 400; } .ajuda ul { margin: 4px 0 0; padding-left: 18px; } .vazio { padding: 28px; text-align: center; color: #475569; } /* ---------- Formulários ---------- */ .campo { display: flex; flex-direction: column; gap: 5px; } .campo > label { font-size: 13px; font-weight: 600; color: #334155; } .campo .erro { color: #B91C1C; font-size: 12.5px; } .campo.com-erro .inp { border-color: #DC2626; } .inp { min-height: 42px; padding: 0 12px; border: 1px solid #CBD5E1; border-radius: 8px; font: 15px var(--fonte); background: #fff; color: #0F1B2D; width: 100%; } textarea.inp { padding: 10px 12px; min-height: 80px; resize: vertical; } .inp:focus { outline: 2px solid #93C5FD; border-color: #1D4ED8; } .inp-codigo { font-size: 22px; letter-spacing: .25em; text-align: center; } input[type=color].inp-cor { width: 48px; height: 38px; border: 1px solid #CBD5E1; border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; } .campo-cor { flex-direction: row; align-items: center; gap: 10px; } .campo-cor > label { order: 2; font-weight: 500; } .chk { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; } .chk input { width: 18px; height: 18px; margin-top: 2px; } .lista-checks { display: flex; flex-direction: column; gap: 6px; } .lista-checks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; } .lista-checks label { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 400; } /* ---------- Tabelas ---------- */ .tabela-caixa { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; } .rolagem { overflow-x: auto; } table.tabela { width: 100%; border-collapse: collapse; min-width: 760px; } .tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #475569; font-weight: 600; text-align: left; padding: 12px; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; } .tabela td { padding: 11px 12px; border-bottom: 1px solid #F1F5F9; font-size: 14px; vertical-align: middle; } .tabela tr:hover td { background: #FAFBFF; } .tabela .num { text-align: right; font-variant-numeric: tabular-nums; } .paginacao { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #E2E8F0; flex-wrap: wrap; } .matriz td, .matriz th { text-align: center; } .matriz td:first-child, .matriz th:first-child { text-align: left; } .matriz input { width: 18px; height: 18px; } /* ---------- Seções expansíveis (Configurações) ---------- */ details.acc { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; } details.acc > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; font-weight: 600; font-size: 1.08rem; min-height: 56px; } details.acc > summary::-webkit-details-marker { display: none; } details.acc > summary::after { content: "+"; margin-left: auto; font-size: 20px; color: #475569; } details.acc[open] > summary::after { content: "−"; } details.acc > summary:hover { background: #F8FAFC; } .acc-corpo { padding: 6px 20px 22px; border-top: 1px solid #F1F5F9; display: flex; flex-direction: column; gap: 16px; } .subtitulo-secao { font-weight: 700; font-size: 14px; color: #334155; margin: 8px 0 -4px; } /* ---------- Indicadores ---------- */ .kpi { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 18px; } .kpi .rotulo { font-size: 12.5px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .04em; } .kpi .valor { font-family: var(--fonte-titulo); font-size: 2.2rem; font-weight: 700; margin-top: 4px; } .kpi .det { font-size: 13px; color: #475569; } /* ---------- MFA / Minha conta ---------- */ .linha { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #F1F5F9; flex-wrap: wrap; } .linha:last-child { border-bottom: 0; } .linha .info { flex: 1 1 260px; } .linha .info strong { display: block; } .linha .info .hint { display: block; } .qr svg { width: 240px; height: 240px; max-width: 100%; display: block; background: #fff; border: 1px solid #CBD5E1; border-radius: 8px; } .codigos { background: #0F1B2D; color: #E2E8F0; border-radius: 10px; padding: 14px 16px; } .codigos ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 10px 0 0; padding-left: 22px; font: 600 15px ui-monospace, monospace; } .nivel { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 14px 18px; border: 1px solid; } .nivel.bom { background: #EFF6FF; border-color: #BFDBFE; } .nivel.otimo { background: #ECFDF5; border-color: #A7F3D0; } .nivel.fraco { background: #FFFBEB; border-color: #FCD34D; } /* ---------- Celular ---------- */ @media (max-width: 760px) { .app { flex-direction: column; } .menu, .menu.recolhido, .menu.organizando { width: 100%; min-height: 0; max-height: none; position: static; } .menu.recolhido .menu-grupos { display: none; } .conteudo { padding: 18px 16px 40px; } .login.dividido .login-lado { flex-basis: 100%; min-height: 0; padding: 28px 24px; } .login-frase h1 { font-size: 1.7rem; } .config-cartoes { grid-template-columns: 1fr !important; } } @media print { .menu, .acoes, .nao-imprimir { display: none !important; } body { background: #fff; } } /* ---------- Tela de login (mesmo formato do SGF) ---------- */ [hidden] { display: none !important; } .login { min-height: 100vh; display: flex; flex-wrap: wrap; font-family: var(--fonte); } .login-lado { flex: 1 1 50%; min-height: 100vh; padding: 56px 64px; display: flex; flex-direction: column; gap: 32px; background: var(--login-fundo); color: var(--login-texto); } .login-logo-area { height: var(--login-logo-altura); display: inline-flex; align-items: center; align-self: flex-start; max-width: 100%; } .login-logo-area img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; } .login-logo-area.quadro { background: #fff; padding: 12px 16px; border-radius: 14px; box-sizing: border-box; } .login-logo-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.4rem; } .login-frase { margin-top: auto; margin-bottom: auto; max-width: 560px; } .login-frase h1 { margin: 0 0 10px; font-size: 2.3rem; line-height: 1.2; color: inherit; } .login-frase p { margin: 0; opacity: .85; font-size: .95rem; } .login-protegido { display: flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .8; } .login-form-lado { flex: 1 1 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 24px; background: var(--login-painel); } .cartao-login { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; color: #0F1B2D; } .cartao-login h2 { margin: 0; font-size: 1.5rem; } .cartao-login .btn.bloco { background: var(--login-botao); border-color: var(--login-botao); color: var(--login-botao-texto); } /* Layout centralizado: fundo em toda a tela e o cartão no meio */ .login.centralizado { background: var(--login-fundo); align-items: center; justify-content: center; flex-direction: column; gap: 24px; padding: 40px 16px; } .login.centralizado .login-lado { flex: none; min-height: 0; padding: 0; background: none; align-items: center; gap: 0; } .login.centralizado .login-lado .login-frase, .login.centralizado .login-protegido { display: none; } .login.centralizado .login-logo-area { align-self: center; } .login.centralizado .login-form-lado { flex: none; width: 100%; max-width: 440px; border-radius: 16px; padding: 32px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); } .rodape-login { font-size: 12.5px; color: #475569; text-align: center; border-top: 1px solid #F1F5F9; padding-top: 14px; } .outros-metodos { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #F1F5F9; padding-top: 12px; } .outros-metodos a { min-height: 34px; display: flex; align-items: center; font-weight: 600; text-decoration: none; } /* ---------- Menu: logotipo (só a imagem, à esquerda) ---------- */ .menu-topo.com-logo { padding: 6px 4px 16px 6px; } .menu-topo.com-logo .menu-logo { width: auto; max-width: 170px; object-fit: contain; object-position: left center; display: block; } .menu-topo.com-logo .menu-btn { margin-left: auto; } .so-recolhido { display: none !important; } .menu.recolhido .so-recolhido { display: inline-flex !important; } /* ---------- Configurações: seções (como no SGF) ---------- */ .config-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: #334155; } .secao { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; } .secao-cab { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; } .secao-cab:hover { background: #F8FAFC; border-radius: 16px; } .secao-icone { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .secao-titulos { flex: 1; min-width: 0; } .secao-titulos strong { display: block; font-size: 1.15rem; font-family: var(--fonte-titulo); } .secao-titulos span { color: #475569; font-size: .93rem; } .secao-cab .seta { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: #334155; font-size: 16px; } .secao-cab .seta:hover { background: #E2E8F0; } .secao-cab .chev { transition: transform .15s; color: #475569; } .secao:not(.aberta) .chev { transform: rotate(180deg); } .secao:not(.aberta) .secao-corpo { display: none; } .secao-corpo { border-top: 1px solid #F1F5F9; padding: 20px; display: flex; flex-direction: column; gap: 18px; } /* Aparência: cartões Tela de login + Menu lateral */ .config-cartoes { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: start; } .cartao { border: 1px solid #E2E8F0; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; background: #fff; } .cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .cartao-cab h3 { margin: 0; font-size: 1.15rem; } .duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 22px; align-items: start; } .segmentado ul, .segmentado > div { display: inline-flex; list-style: none; margin: 0; padding: 4px; gap: 4px; border: 1px solid #CBD5E1; border-radius: 10px; flex-wrap: wrap; } .segmentado li { margin: 0; } .segmentado label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; cursor: pointer; font-weight: 600; color: #334155; } .segmentado input { position: absolute; opacity: 0; pointer-events: none; } .segmentado label:has(input:checked) { background: #EFF6FF; color: #1D4ED8; } .cores-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cores-linha .campo { gap: 0; } .cores-linha .campo > label { position: absolute; left: -9999px; } /* Prévias */ .pv-login-caixa { position: relative; overflow: hidden; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; } .pv-login-tela { width: 1280px; height: 720px; transform-origin: 0 0; pointer-events: none; } .pv-login-tela .login { min-height: 720px; height: 720px; } .pv-login-tela .login-lado { min-height: 0; } .pv-menu-fundo { background: #F1F5F9; border-radius: 12px; padding: 24px; display: flex; justify-content: center; } .pv-menu-fundo .menu { min-height: 0; max-height: none; position: static; border-radius: 14px; width: 256px; } @media (max-width: 1200px) { .config-cartoes { grid-template-columns: 1fr; } } @media (max-width: 760px) { .login-frase h1 { font-size: 1.7rem; } .login-lado { padding: 28px 24px; } } .secao-alternar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; } .rotulo-campo { font-size: 13px; font-weight: 600; color: #334155; } .campo .segmentado { margin-top: 2px; } .confirmar-inline { border: 1px solid #FCD34D; background: #FFFBEB; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } /* ---------- Pop-up de resultado ---------- */ dialog.popup { border: 0; border-radius: 18px; padding: 32px 28px 24px; width: min(440px, 92vw); text-align: center; box-shadow: 0 24px 60px rgba(15, 27, 45, .35); font-family: var(--fonte); color: #0F1B2D; } dialog.popup::backdrop { background: rgba(15, 27, 45, .45); } dialog.popup h2 { margin: 14px 0 8px; font-size: 1.45rem; } dialog.popup p { margin: 0 0 20px; color: #334155; line-height: 1.55; } dialog.popup .btn { min-width: 140px; } .popup-icone { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; animation: popup-entrar .35s ease-out; } dialog.popup.ok .popup-icone { background: #DCFCE7; color: #047857; box-shadow: 0 0 0 8px #F0FDF4; } dialog.popup.falha .popup-icone { background: #FEE2E2; color: #B91C1C; box-shadow: 0 0 0 8px #FEF2F2; } @keyframes popup-entrar { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ---------- Prévia do e-mail ---------- */ .pv-email { padding: 20px 14px; border-radius: 12px; font-family: Arial, Helvetica, sans-serif; } .pv-email-cartao { max-width: 520px; margin: 0 auto; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #E2E8F0; } .pv-email-cab { padding: 20px 24px; } .pv-email-cab img { width: auto; max-width: 100%; display: block; } .pv-email-corpo { padding: 22px 24px; font-size: 14px; line-height: 1.6; color: #0F1B2D; } .pv-email-corpo p { margin: 0 0 14px; } .pv-email-botao { display: inline-block; padding: 11px 20px; border-radius: 8px; font-weight: bold; margin-bottom: 14px; } .pv-email-rodape { padding: 16px 24px; background: #F8FAFC; border-top: 1px solid #E2E8F0; font-size: 12px; line-height: 1.6; color: #475569; } /* ---------- Envio de arquivo (formato do SGF) ---------- */ .arquivo { display: flex; flex-direction: column; gap: 8px; } .arquivo-atual { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; max-width: 100%; padding: 6px 10px; border: 1px solid #E2E8F0; border-radius: 10px; background: repeating-conic-gradient(#F1F5F9 0 25%, #fff 0 50%) 0 0 / 14px 14px; text-decoration: none; color: #334155; font-size: 13px; } .arquivo-atual img { height: 32px; width: auto; max-width: 140px; object-fit: contain; } .arquivo-atual span { background: rgba(255, 255, 255, .85); padding: 1px 4px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arquivo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .arquivo-acoes input[type=file] { font: 14px var(--fonte); max-width: 100%; } .arquivo-nova { border-color: #93C5FD; box-shadow: 0 0 0 3px #DBEAFE; } .arquivo-atual img { height: 48px; max-width: 200px; } /* ---------- Cadastros ---------- */ .abas { display: flex; gap: 6px; border-bottom: 1px solid #E2E8F0; flex-wrap: wrap; } .aba { min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #475569; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; } .aba.ativa { color: var(--cor-principal); border-bottom-color: var(--cor-principal); } .bloco-condicao { border: 1px solid #E2E8F0; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .regras { display: flex; flex-direction: column; gap: 10px; } .regra { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: #431407; line-height: 1.45; } .regra .selo { flex-shrink: 0; margin-top: 2px; } .dias-semana .lista-checks > div { display: flex; flex-wrap: wrap; gap: 8px; } .dias-semana .lista-checks label { border: 1px solid #CBD5E1; border-radius: 8px; padding: 6px 12px; cursor: pointer; } .dias-semana .lista-checks label:has(input:checked) { background: #EFF6FF; border-color: var(--cor-principal); color: #1E3A8A; font-weight: 600; } /* ---------- Campo de valor em R$ ---------- */ .campo-moeda { position: relative; display: block; } .campo-moeda .prefixo { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #475569; font-weight: 600; pointer-events: none; } .campo-moeda .inp { padding-left: 40px; text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Notificações (sininho) ---------- */ .barra-topo { display: flex; justify-content: flex-end; margin: -10px -12px -6px 0; } .sino { position: relative; } .sino-botao { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid #E2E8F0; background: #fff; color: #334155; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .sino-botao:hover, .sino-botao[aria-expanded="true"] { background: #EFF6FF; color: var(--cor-principal); border-color: #BFDBFE; } .sino-num { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #DC2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid #F3F5F9; } .sino-num.pulsar { animation: sino-pulsar .6s ease 2; } @keyframes sino-pulsar { 50% { transform: scale(1.3); } } .sino-painel { position: absolute; right: 0; top: 50px; width: 400px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 27, 45, .18); z-index: 60; display: flex; flex-direction: column; overflow: hidden; } .sino-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #E2E8F0; } .sino-lista { max-height: min(60vh, 460px); overflow-y: auto; } .sino-vazio { padding: 28px 16px; text-align: center; color: #475569; } .sino-rodape { display: block; text-align: center; padding: 12px; border-top: 1px solid #E2E8F0; font-weight: 600; text-decoration: none; } .link-botao { border: 0; background: none; color: var(--cor-principal); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px; } .link-botao:hover { text-decoration: underline; } .notif { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid #F1F5F9; position: relative; } .notif:last-child { border-bottom: 0; } .notif.nova { background: #F8FAFF; } .notif.nova::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--cor-principal); transform: translateY(-50%); } a.notif:hover, .notif-corpo:hover .notif-titulo { color: var(--cor-principal); } a.notif { text-decoration: none; color: inherit; } .notif-icone { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #EFF6FF; color: #1D4ED8; } .notif-icone.alerta { background: #FFF7ED; color: #C2410C; } .notif-icone.erro { background: #FEF2F2; color: #B91C1C; } .notif-icone.ok { background: #ECFDF5; color: #047857; } .notif-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; } .notif-titulo { font-weight: 500; color: #0F1B2D; } .notif.nova .notif-titulo { font-weight: 700; } .notif-texto { color: #475569; font-size: .93rem; } .sino-lista .notif-texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif-quando { color: #64748B; font-size: 12px; } @media (max-width: 760px) { .barra-topo { margin: 0; } .sino-painel { right: -8px; } } /* ===================================================================== Relatórios (Etapa 3) ===================================================================== */ .selo-tipo { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--cor-rt); margin-right: 6px; vertical-align: middle; } .selo-tipo.rc { background: var(--cor-rc); } .btn.btn-rc { background: var(--cor-rc); border-color: var(--cor-rc); color: #fff; } .tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 18px; background: #475569; color: #fff; white-space: nowrap; } .tag-anexo { background: #E2E8F0; color: #1E293B; } .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; } .linha-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; } /* ---- Listagem ---- */ .filtros { gap: 12px; } .filtro-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tag-opcao { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .tag-opcao input { width: 16px; height: 16px; accent-color: var(--cor-principal); } .tag-opcao:has(input:not(:checked)) .tag { opacity: .55; } .tag-opcao:has(input:checked) .tag { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(15,27,45,.25); } .segmentado.peq label { padding: 3px 10px; font-size: 13px; } .tabela-rel td { vertical-align: top; } .tabela-rel tr.selecionada td { background: #EFF6FF; } .col-rel { min-width: 280px; } .rel-codigo { font-weight: 700; color: #0F1B2D; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; } .rel-assunto { display: block; color: #334155; margin-top: 2px; } .col-acoes { width: 1%; white-space: nowrap; } .acoes-icones { display: flex; gap: 2px; justify-content: flex-end; } .acoes-icones a, .acoes-icones button, .acoes-icones .desligado { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #334155; border: 0; background: none; cursor: pointer; } .acoes-icones a:hover, .acoes-icones button:hover { background: #EFF6FF; color: var(--cor-principal); } .acoes-icones button.perigo:hover { background: #FEF2F2; color: #B91C1C; } .acoes-icones .desligado { color: #CBD5E1; cursor: not-allowed; } .barra-lote { position: sticky; top: 8px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 10px; background: #0F1B2D; color: #fff; border-radius: 12px; box-shadow: 0 10px 24px rgba(15,27,45,.2); } .barra-lote .inp { width: auto; min-width: 180px; } .barra-lote strong { margin-right: 8px; } .paginacao.solta { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; } /* + tag por linha */ .tag-menu { position: relative; display: inline-block; } .tag-menu > summary { list-style: none; } .tag-menu > summary::-webkit-details-marker { display: none; } .tag-mais { cursor: pointer; font-size: 12px; font-weight: 600; color: #475569; border: 1px dashed #94A3B8; border-radius: 999px; padding: 1px 9px; line-height: 18px; } .tag-mais:hover { color: var(--cor-principal); border-color: var(--cor-principal); } .tag-pop { position: absolute; z-index: 40; top: 26px; left: 0; width: 260px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 14px 30px rgba(15,27,45,.18); padding: 10px; display: flex; flex-direction: column; gap: 8px; } .tag-lista { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .tag-lista .tag-opcao { padding: 3px 4px; border-radius: 6px; } .tag-lista .tag-opcao:hover { background: #F1F5F9; } /* Janela de tags */ dialog.janela { border: 0; border-radius: 16px; padding: 22px; width: min(760px, calc(100vw - 32px)); max-height: 86vh; box-shadow: 0 24px 60px rgba(15,27,45,.3); } dialog.janela::backdrop { background: rgba(15,27,45,.45); } .janela-cab { display: flex; justify-content: space-between; align-items: center; } .janela-cab h2 { margin: 0; } .btn-icone { width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; color: #475569; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .btn-icone:hover { background: #F1F5F9; color: #B91C1C; } .tags-lista { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } .tag-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F1F5F9; } .tag-linha .tag { min-width: 90px; justify-content: center; } .tag-linha .inp { width: 200px; } .tag-cores { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .ed-cor { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px #CBD5E1; cursor: pointer; padding: 0; } .ed-cor:hover, .ed-cor.escolhida { box-shadow: 0 0 0 2px #0F1B2D; } .tag-cores input[type="color"] { width: 30px; height: 26px; border: 1px solid #CBD5E1; border-radius: 6px; padding: 1px; background: #fff; cursor: pointer; } /* ---- Formulário ---- */ .rel-form { display: flex; flex-direction: column; gap: 16px; } .rel-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .rel-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .rel-lateral { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; } @media (max-width: 1100px) { .rel-colunas { grid-template-columns: 1fr; } .rel-lateral { position: static; } } .tipo-rel label:has(input[value="rt"]:checked) { background: var(--cor-rt); color: #fff; } .tipo-rel label:has(input[value="rc"]:checked) { background: var(--cor-rc); color: #fff; } .chips-escolha > div { display: flex; flex-wrap: wrap; gap: 8px; } .chips-escolha label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #CBD5E1; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 14px; } .chips-escolha input { accent-color: var(--cor-principal); } .chips-escolha label:has(input:checked) { background: #EFF6FF; border-color: var(--cor-principal); color: #1E3A8A; font-weight: 600; } .tags-escolha { display: flex; flex-wrap: wrap; gap: 6px; } .totais .total-linha { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #F1F5F9; font-size: 1.05rem; font-variant-numeric: tabular-nums; } .totais .total-linha:last-child { border-bottom: 0; } .totais .total-linha.adicional strong { color: #B91C1C; } .contrato-caixa .regras { margin-top: 8px; font-size: .9rem; } .contrato-num { margin: 0; } .acoes-salvar { display: flex; flex-direction: column; gap: 8px; } .acoes-salvar .btn { width: 100%; justify-content: center; } .btn.grande { min-height: 48px; font-size: 1.05rem; } .horarios td { vertical-align: top; } .horarios .inp { min-width: 0; } .horarios select.adicional { border-color: #FCA5A5; background-color: #FEF2F2; color: #991B1B; font-weight: 600; } .horarios tr.madrugada [data-dur]::after { content: " ☾"; color: #6366F1; } .horarios .sug { font-size: 12px; color: #64748B; margin-top: 4px; line-height: 1.35; } .horarios .sug.divergente { color: #B45309; } .horarios .dividir { margin-top: 6px; } .horarios .linha-erro td { color: #B91C1C; font-size: 13px; padding-top: 0; } .horarios [data-dur] { font-weight: 600; font-variant-numeric: tabular-nums; } /* ---- Editor ---- */ .editor { position: relative; border: 1px solid #CBD5E1; border-radius: 12px; background: #fff; } .editor:focus-within { border-color: var(--cor-principal); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .editor-barra { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid #E2E8F0; background: #F8FAFC; border-radius: 12px 12px 0 0; } .ed-btn { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: #334155; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ed-btn:hover { background: #E2E8F0; } .ed-btn.ativo { background: #DBEAFE; color: #1D4ED8; } .ed-sep { width: 1px; height: 22px; background: #CBD5E1; margin: 0 4px; } .ed-espaco { flex: 1; } .ed-estilo { height: 34px; border: 1px solid #CBD5E1; border-radius: 8px; background: #fff; padding: 0 8px; font: inherit; font-size: 14px; } .editor-area { min-height: 320px; max-height: 70vh; overflow-y: auto; padding: 16px 18px; outline: none; line-height: 1.6; } .editor-area:empty::before { content: attr(data-placeholder); color: #94A3B8; } .editor.cheia { position: fixed; inset: 12px; z-index: 100; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(15,27,45,.4); } .editor.cheia .editor-area { flex: 1; max-height: none; } body.sem-rolagem { overflow: hidden; } .ed-pop { position: absolute; z-index: 30; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px; width: 280px; box-shadow: 0 14px 30px rgba(15,27,45,.18); display: flex; flex-direction: column; gap: 8px; } .ed-pop > div { display: flex; flex-direction: column; gap: 8px; } .ed-cores { display: grid; grid-template-columns: repeat(9, 22px); gap: 5px; } .ed-linha { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; flex-wrap: wrap; } .ed-linha .inp[type="number"] { width: 70px; } /* Conteúdo do editor e do relatório */ .editor-area table, .doc-texto table { border-collapse: collapse; width: 100%; margin: 10px 0; } .editor-area th, .editor-area td, .doc-texto th, .doc-texto td { border: 1px solid #CBD5E1; padding: 6px 8px; text-align: left; vertical-align: top; } .editor-area th, .doc-texto th { background: #F1F5F9; } .editor-area blockquote, .doc-texto blockquote { margin: 10px 0; padding: 8px 14px; border-left: 4px solid var(--cor-principal); background: #F8FAFC; } .editor-area pre, .doc-texto pre { background: #0F1B2D; color: #E2E8F0; padding: 10px 14px; border-radius: 8px; white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: 13px; } .editor-area h2, .doc-texto h2 { font-size: 1.3rem; margin: 16px 0 6px; } .editor-area h3, .doc-texto h3 { font-size: 1.12rem; margin: 14px 0 4px; } .editor-area h4, .doc-texto h4 { font-size: 1rem; margin: 12px 0 4px; } .editor-area p, .doc-texto p { margin: 0 0 8px; } /* ---- Visualizar (documento) ---- */ .barra-acoes-rel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; } .documento { --cor-tipo: var(--cor-rt); background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; overflow: hidden; max-width: 900px; width: 100%; margin: 0 auto; box-shadow: 0 4px 18px rgba(15,27,45,.06); } .documento.rc { --cor-tipo: var(--cor-rc); } .doc-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 28px; border-top: 6px solid var(--cor-tipo); border-bottom: 1px solid #E2E8F0; } .doc-marca img { max-height: 56px; max-width: 220px; } .doc-marca strong { font-family: var(--fonte-titulo); font-size: 1.5rem; } .doc-titulo { text-align: right; display: flex; flex-direction: column; } .doc-tipo { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cor-tipo); font-weight: 700; } .doc-numero { font-family: var(--fonte-titulo); font-size: 1.9rem; font-weight: 700; line-height: 1.1; } .doc-data { color: #475569; } .doc-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 22px; padding: 18px 28px; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; } .doc-info > div { display: flex; flex-direction: column; gap: 1px; } .doc-info span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748B; font-weight: 600; } .doc-info small { color: #475569; } .doc-bloco { padding: 16px 28px 4px; } .doc-bloco h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cor-tipo); margin: 0 0 8px; } .doc-assunto { font-size: 1.1rem; font-weight: 600; margin: 0; } .doc-texto { line-height: 1.65; } .doc-horarios { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .doc-horarios th { text-align: left; font-size: 12px; color: #64748B; font-weight: 600; border-bottom: 2px solid #E2E8F0; padding: 6px 8px; } .doc-horarios td { padding: 7px 8px; border-bottom: 1px solid #F1F5F9; } .doc-horarios tfoot td { font-weight: 700; border-top: 2px solid #E2E8F0; border-bottom: 0; } .doc-horarios .num { text-align: right; } .selo-class { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #DCFCE7; color: #166534; } .selo-class.adicional { background: #FEE2E2; color: #991B1B; } .selo-mod { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 13px; background: #E0F2FE; color: #075985; } .selo-mod.presencial { background: #EDE9FE; color: #5B21B6; } .doc-assinaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 28px 20px; } .doc-assinaturas > div { display: flex; flex-direction: column; align-items: center; text-align: center; } .linha-ass { width: 100%; border-top: 1px solid #0F1B2D; margin-bottom: 6px; } .doc-assinaturas small { color: #475569; } .doc-rodape { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 14px 28px; border-top: 1px solid #E2E8F0; font-size: 12px; color: #475569; background: #F8FAFC; } .doc-validacao { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .doc-validacao code { font-size: 13px; color: #0F1B2D; } /* Anexos */ .anexo-icone { width: 44px; height: 44px; border-radius: 10px; background: #F1F5F9; color: #475569; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .anexo-icone img { width: 100%; height: 100%; object-fit: cover; } .zona-upload { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px; margin-top: 12px; border: 2px dashed #CBD5E1; border-radius: 14px; text-align: center; cursor: pointer; background: #F8FAFC; } .zona-upload:hover, .zona-upload.sobre { border-color: var(--cor-principal); background: #EFF6FF; } .zona-upload ul { list-style: none; padding: 0; margin: 6px 0 0; font-size: 13px; } .zona-upload li.erro { color: #B91C1C; } @media (max-width: 760px) { .doc-cab, .doc-info, .doc-bloco, .doc-rodape { padding-left: 16px; padding-right: 16px; } .doc-assinaturas { grid-template-columns: 1fr; gap: 36px; } } @media print { .barra-topo, .migalha, .mensagens, dialog { display: none !important; } .conteudo { padding: 0; } .documento { border: 0; box-shadow: none; border-radius: 0; max-width: none; } .doc-info, .doc-rodape { background: #fff; } .doc-horarios tr, .doc-assinaturas { break-inside: avoid; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .validacao { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0; } .validacao dt { color: #64748B; font-size: 13px; } .validacao dd { margin: 0; } /* ---------- Barra de filtros dos relatórios ---------- */ .filtros-barra { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 12px; } .barra-principal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .busca-campo { flex: 1 1 320px; position: relative; display: flex; align-items: center; height: 42px; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff; padding: 0 10px; gap: 8px; color: #64748B; } .busca-campo:focus-within { border-color: var(--cor-principal); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .busca-campo input { flex: 1; border: 0; outline: 0; font: inherit; color: #0F1B2D; background: none; min-width: 0; height: 100%; } .busca-campo .busca-limpar { color: #64748B; text-decoration: none; padding: 4px 6px; border-radius: 6px; } .busca-campo .busca-limpar:hover { background: #F1F5F9; color: #B91C1C; } .seg-links { display: inline-flex; background: #F1F5F9; border-radius: 10px; padding: 3px; gap: 2px; } .seg-links a { padding: 0 14px; height: 36px; display: inline-flex; align-items: center; border-radius: 8px; color: #334155; text-decoration: none; font-weight: 600; font-size: 14px; } .seg-links a:hover { background: #E2E8F0; } .seg-links a.ativo { background: #fff; color: #0F1B2D; box-shadow: 0 1px 3px rgba(15,27,45,.12); } .seg-links a.rt.ativo { color: var(--cor-rt); } .seg-links a.rc.ativo { color: var(--cor-rc); } .btn-filtros { height: 42px; gap: 6px; } .btn-filtros[aria-expanded="true"] { background: #EFF6FF; border-color: #BFDBFE; color: var(--cor-principal); } .btn-filtros .contador { min-width: 20px; height: 20px; border-radius: 10px; background: var(--cor-principal); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } .painel-filtros { border-top: 1px solid #E2E8F0; padding-top: 12px; display: flex; flex-direction: column; gap: 14px; } .painel-grade { display: grid; grid-template-columns: minmax(240px, 1.3fr) minmax(180px, .8fr) minmax(300px, 1.4fr); gap: 14px; align-items: start; } @media (max-width: 1000px) { .painel-grade { grid-template-columns: 1fr; } } .periodo { display: flex; align-items: center; gap: 8px; } .periodo .inp { flex: 1; min-width: 0; } .periodo span { color: #64748B; font-size: 13px; } .atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .atalho { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid #CBD5E1; color: #334155; text-decoration: none; } .atalho:hover { border-color: var(--cor-principal); color: var(--cor-principal); } .atalho.ativo { background: var(--cor-principal); border-color: var(--cor-principal); color: #fff; } .modo-tags { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; margin-left: auto; } .inp-peq { height: 32px; padding: 0 8px; width: auto; font-size: 13px; } .painel-rodape { display: flex; justify-content: flex-end; gap: 8px; } .chips-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .chip-filtro { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 10px; border-radius: 999px; background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A8A; font-size: 13px; text-decoration: none; } .chip-filtro span { color: #475569; } .chip-filtro i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .chip-filtro b { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #1E3A8A; } .chip-filtro:hover { background: #FEF2F2; border-color: #FECACA; color: #991B1B; } .chip-filtro:hover b { background: #FECACA; } .limpar-tudo { font-size: 13px; font-weight: 600; margin-left: 4px; } .resultado-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px; color: #334155; } .destaque-erro { border-color: #F87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,.3); } /* ---------- Cliente: busca enquanto digita ---------- */ .busca-cliente { position: relative; } .busca-cliente .inp { padding-left: 34px; padding-right: 32px; } .busca-cliente .busca-icone { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #64748B; pointer-events: none; display: flex; } .busca-cliente .busca-limpar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; color: #64748B; width: 26px; height: 26px; border-radius: 6px; } .busca-cliente .busca-limpar:hover { background: #F1F5F9; color: #B91C1C; } .busca-lista { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 14px 30px rgba(15,27,45,.18); max-height: 320px; overflow-y: auto; } .busca-lista li[role=option] { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; } .busca-lista li[role=option] span { font-size: 12px; color: #64748B; } .busca-lista li.ativo, .busca-lista li[role=option]:hover { background: #EFF6FF; } .busca-lista .vazio-busca { padding: 10px; color: #64748B; font-size: 14px; } /* Classificação dos horários: etiqueta automática (clique para trocar) */ .col-class .sel-class { display: none; } .chip-class { border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 8px; background: #DCFCE7; color: #166534; } .chip-class.adicional { background: #FEE2E2; color: #991B1B; } .chip-class:hover { filter: brightness(.95); box-shadow: 0 0 0 2px rgba(15,27,45,.12); } .horarios .sug .link-botao { padding: 0; font-size: 12px; } /* Ordenação e destaque do relatório recém-criado */ a.ordenar { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; } a.ordenar:hover { color: var(--cor-principal); } a.ordenar.ativa { color: var(--cor-principal); } a.ordenar span { font-size: 12px; } tr.recem-criado td { animation: recem 3s ease-out 1; background: #F0FDF4; } @keyframes recem { 0% { background: #BBF7D0; } 100% { background: #F0FDF4; } } /* Contador de caracteres do editor */ .editor-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid #E2E8F0; font-size: 12px; color: #64748B; background: #F8FAFC; border-radius: 0 0 12px 12px; } .editor-rodape .barra-uso { width: 120px; height: 6px; border-radius: 3px; background: #E2E8F0; overflow: hidden; } .editor-rodape .barra-uso i { display: block; height: 100%; background: #22C55E; } .editor-rodape.perto .barra-uso i { background: #F59E0B; } .editor-rodape.passou { color: #B91C1C; font-weight: 600; } .editor-rodape.passou .barra-uso i { background: #DC2626; } /* Filtros por coluna (texto no cabeçalho da tabela) */ .linha-filtros th { padding-top: 0; padding-bottom: 8px; background: inherit; } .filtro-coluna { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 1px solid #CBD5E1; border-radius: 8px; background: #fff; color: #94A3B8; font-weight: 400; max-width: 240px; } .filtro-coluna:focus-within { border-color: var(--cor-principal); box-shadow: 0 0 0 3px rgba(37,99,235,.15); color: var(--cor-principal); } .filtro-coluna.ativo { border-color: var(--cor-principal); background: #EFF6FF; color: var(--cor-principal); } .filtro-coluna input { border: 0; outline: 0; background: none; font: inherit; font-size: 13px; width: 100%; min-width: 0; color: #0F1B2D; } /* Tela do relatório: barra de ações fixa no topo com “Fechar” */ .barra-acoes-rel { position: sticky; top: 0; z-index: 15; background: #F3F5F9; padding: 8px 0; } .btn-fechar { gap: 6px; } /* Filtro em tempo real */ .tabela-rel.atualizando tbody { opacity: .55; transition: opacity .15s; } .carregando { font-size: 12px; color: var(--cor-principal); } .tabela-rel mark { background: #FDE68A; color: inherit; border-radius: 3px; padding: 0 1px; } .limpar-coluna { border: 0; background: none; color: #64748B; cursor: pointer; padding: 0 2px; font-size: 12px; } .limpar-coluna:hover { color: #B91C1C; } .tabela-rel tr.selecionada td { background-color: #DBEAFE !important; } /* Janela “Colunas da lista” */ .colunas-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .coluna-linha { display: grid; grid-template-columns: 170px auto 1fr; align-items: center; gap: 14px; padding: 10px 6px; border-bottom: 1px solid #F1F5F9; } .coluna-linha.oculta .coluna-nome strong { color: #94A3B8; text-decoration: line-through; } .coluna-nome { display: flex; align-items: center; gap: 8px; cursor: pointer; } .coluna-nome input { width: 18px; height: 18px; accent-color: var(--cor-principal); } .seg-alinhar { display: inline-flex; background: #F1F5F9; border-radius: 8px; padding: 2px; } .seg-alinhar button { width: 34px; height: 30px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: #475569; display: inline-flex; align-items: center; justify-content: center; } .seg-alinhar button[aria-pressed="true"] { background: #fff; color: var(--cor-principal); box-shadow: 0 1px 3px rgba(15,27,45,.15); } .ed-cor.sem-cor { background: #fff linear-gradient(135deg, transparent 45%, #DC2626 45%, #DC2626 55%, transparent 55%); } @media (max-width: 700px) { .coluna-linha { grid-template-columns: 1fr; } } /* ===================================================================== Lista de relatórios — visual mais limpo (3.4.1) ===================================================================== */ .tabela-rel { border-collapse: separate; border-spacing: 0; } .tabela-rel thead tr:first-child th { padding-top: 12px; padding-bottom: 8px; font-size: 11.5px; letter-spacing: .06em; border-bottom: 0; } .tabela-rel thead tr:first-child th .ordenar { color: inherit; } .tabela-rel .linha-filtros th { padding: 0 12px 10px; border-bottom: 1px solid #E2E8F0; } .tabela-rel td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid #EEF2F7; } .tabela-rel tbody tr:last-child td { border-bottom: 0; } /* destaque da linha ao passar o mouse, por cima da cor da coluna */ .tabela-rel tbody tr:hover td { background-image: linear-gradient(rgba(37, 99, 235, .045), rgba(37, 99, 235, .045)); } .tabela-rel .c-sel { width: 44px; padding-right: 0; } .tabela-rel .c-sel input { width: 17px; height: 17px; accent-color: var(--cor-principal); cursor: pointer; } /* coluna Relatório: número + assunto na mesma linha; tags embaixo só quando existem */ .rel-bloco { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px; min-width: 0; } .rel-codigo { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 15px; } .rel-codigo:hover { color: var(--cor-principal); } .tabela-rel .rel-assunto { display: block; margin: 0; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; min-width: 0; } .tabela-rel .linha-tags { flex-basis: 100%; margin-top: 0; gap: 5px; } .tabela-rel .linha-tags:not(:has(.tag)) { flex-basis: auto; } .tabela-rel .linha-tags .tag { font-size: 11.5px; padding: 1px 9px; line-height: 18px; } .tabela-rel .tag-anexo { gap: 3px; background: #F1F5F9; color: #475569; } /* “+ tag” aparece ao passar o mouse na linha (ou ao navegar pelo teclado) */ .tabela-rel .tag-menu { opacity: 0; transition: opacity .12s; } .tabela-rel tr:hover .tag-menu, .tabela-rel .tag-menu:focus-within, .tabela-rel .tag-menu[open] { opacity: 1; } /* filtros dentro do cabeçalho: largura da coluna, todos iguais */ .tabela-rel .filtro-coluna { max-width: none; width: 100%; height: 34px; background: rgba(255, 255, 255, .9); } /* ações: ícones discretos, ficam fortes na linha em foco */ .tabela-rel .acoes-icones { gap: 0; } .tabela-rel .acoes-icones a, .tabela-rel .acoes-icones button { width: 32px; height: 32px; color: #64748B; opacity: .75; } .tabela-rel tr:hover .acoes-icones a, .tabela-rel tr:hover .acoes-icones button, .tabela-rel .acoes-icones a:focus-visible, .tabela-rel .acoes-icones button:focus-visible { opacity: 1; color: #334155; } /* barra de contagem / ordenar / itens por página mais compacta */ .resultado-cab .inp { height: 36px; font-size: 14px; padding: 0 30px 0 10px; } .resultado-cab #ordem { max-width: 320px; } /* ===================================================================== Lista de relatórios — títulos em cor sólida e coluna de seleção (3.4.2) ===================================================================== */ /* Títulos: fundo sólido (cor escolhida em “Colunas” ou grafite padrão), texto em negrito com contraste automático */ .tabela-rel thead tr:first-child th { background-color: #1E293B; color: #FFFFFF; font-weight: 700; font-size: 12px; letter-spacing: .06em; padding-top: 13px; padding-bottom: 13px; box-shadow: none; } .tabela-rel thead tr:first-child th:first-child { border-top-left-radius: 13px; } .tabela-rel thead tr:first-child th:last-child { border-top-right-radius: 13px; } .tabela-rel thead a.ordenar, .tabela-rel thead a.ordenar.ativa { color: inherit; font-weight: 700; } .tabela-rel thead a.ordenar:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .tabela-rel thead a.ordenar.ativa span { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .25); font-size: 11px; } .tabela-rel .linha-filtros th { background-color: #F1F5F9; padding-top: 10px; } /* Coluna de seleção: faixa própria, caixas maiores e arredondadas */ .tabela-rel .c-sel { width: 52px; text-align: center; padding-left: 0; padding-right: 0; } .tabela-rel td.c-sel { background-color: #F8FAFC; border-right: 1px solid #E2E8F0; } .tabela-rel .linha-filtros th.c-sel { border-right: 1px solid #E2E8F0; } .tabela-rel .c-sel input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; vertical-align: middle; cursor: pointer; border: 2px solid #94A3B8; border-radius: 6px; background: #FFFFFF center / 14px no-repeat; transition: background-color .12s, border-color .12s, box-shadow .12s; } .tabela-rel .c-sel input[type="checkbox"]:hover { border-color: var(--cor-principal); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); } .tabela-rel .c-sel input[type="checkbox"]:focus-visible { outline: 2px solid var(--cor-principal); outline-offset: 2px; } .tabela-rel .c-sel input[type="checkbox"]:checked, .tabela-rel .c-sel input[type="checkbox"]:indeterminate { border-color: var(--cor-principal); background-color: var(--cor-principal); } .tabela-rel .c-sel input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } .tabela-rel .c-sel input[type="checkbox"]:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); } /* no título escuro, a caixa “marcar todos” fica clara */ .tabela-rel thead tr:first-child th.c-sel input[type="checkbox"] { border-color: rgba(255, 255, 255, .75); background-color: rgba(255, 255, 255, .12); } .tabela-rel thead tr:first-child th.c-sel input[type="checkbox"]:checked, .tabela-rel thead tr:first-child th.c-sel input[type="checkbox"]:indeterminate { background-color: #FFFFFF; border-color: #FFFFFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E293B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } .tabela-rel thead tr:first-child th.c-sel input[type="checkbox"]:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%231E293B' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); } /* linha marcada: faixa na lateral e fundo azul claro */ .tabela-rel tr.selecionada td.c-sel { box-shadow: inset 4px 0 0 var(--cor-principal); } .tabela-rel tr:hover td.c-sel { background-color: #EEF2FF; } /* Configurações › escolha visual do estilo do cabeçalho do PDF */ .estilos-cabecalho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 900px) { .estilos-cabecalho { grid-template-columns: 1fr; } } .estilo-cab { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px solid #E2E8F0; border-radius: 12px; cursor: pointer; font-size: 12.5px; color: #334155; position: relative; } .estilo-cab input { position: absolute; opacity: 0; } .estilo-cab:has(input:checked) { border-color: var(--cor-principal); background: #EFF6FF; } .estilo-cab:has(input:focus-visible) { outline: 2px solid var(--cor-principal); outline-offset: 2px; } .estilo-cab .mini { position: relative; height: 54px; border-radius: 6px; background: #fff; border: 1px solid #E2E8F0; overflow: hidden; } .estilo-cab .mini i { position: absolute; display: block; border-radius: 2px; } .estilo-cab .mini .faixa { left: 0; right: 0; top: 0; height: 5px; background: var(--cor-rt); } .estilo-cab .mini .logo { left: 8px; top: 14px; width: 26px; height: 16px; background: #CBD5E1; } .estilo-cab .mini .tit { right: 8px; top: 14px; width: 60px; height: 5px; background: var(--cor-rt); } .estilo-cab .mini .num { right: 8px; top: 23px; width: 42px; height: 9px; background: #0F1B2D; } .estilo-cab.faixa .mini .faixa { height: 40px; } .estilo-cab.faixa .mini .logo { background: #fff; } .estilo-cab.faixa .mini .tit, .estilo-cab.faixa .mini .num { background: #fff; } .estilo-cab.centralizado .mini .logo { left: calc(50% - 13px); top: 9px; height: 12px; } .estilo-cab.centralizado .mini .tit { right: auto; left: calc(50% - 30px); top: 26px; } .estilo-cab.centralizado .mini .num { right: auto; left: calc(50% - 21px); top: 35px; } /* Tela do relatório no mesmo formato do PDF: quadros */ .doc-quadro { margin: 14px 28px 0; border: 1px solid color-mix(in srgb, var(--cor-tipo) 35%, white); border-radius: 10px; overflow: hidden; } .doc-quadro > h2 { margin: 0; padding: 7px 14px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-tipo); background: color-mix(in srgb, var(--cor-tipo) 10%, white); border-bottom: 1px solid color-mix(in srgb, var(--cor-tipo) 35%, white); } .doc-quadro .doc-info { background: #fff; border-bottom: 0; padding: 12px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .doc-quadro .doc-texto { padding: 12px 14px; min-height: 120px; } .doc-quadro .doc-horarios { margin: 8px 0; } .doc-quadro .doc-horarios th, .doc-quadro .doc-horarios td { padding-left: 14px; } .doc-inferior { display: grid; grid-template-columns: 62fr 38fr; gap: 0 12px; margin: 14px 28px 0; } .doc-inferior .doc-quadro { margin: 0; } .doc-quadro .doc-assinaturas { grid-template-columns: 1fr; gap: 26px; padding: 30px 18px 14px; } .documento .doc-rodape { margin-top: 16px; } @media (max-width: 760px) { .doc-quadro, .doc-inferior { margin-left: 14px; margin-right: 14px; } .doc-inferior { grid-template-columns: 1fr; gap: 14px; } .doc-quadro .doc-info { grid-template-columns: 1fr; } } /* Configurações › Aparência dos relatórios (PDF) */ .pdf-config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 1100px) { .pdf-config { grid-template-columns: 1fr; } } .pdf-controles { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .grupo-config { border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; } .grupo-config > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; color: #0F1B2D; list-style: none; display: flex; align-items: center; gap: 8px; } .grupo-config > summary::before { content: "▸"; color: #64748B; transition: transform .15s; } .grupo-config[open] > summary::before { transform: rotate(90deg); } .grupo-config > summary::-webkit-details-marker { display: none; } .grupo-config[open] { padding-bottom: 12px; } .grupo-config > :not(summary) { margin: 0 14px 10px; } .pdf-previa { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; } .pdf-previa-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pdf-previa-cab .seg-links a { height: 30px; font-size: 13px; } .previa-pdf { width: 100%; aspect-ratio: 210 / 297; max-height: 82vh; border: 1px solid #CBD5E1; border-radius: 10px; background: #F1F5F9; box-shadow: 0 8px 24px rgba(15, 27, 45, .12); } /* Cadastro do cliente › pessoas que recebem os relatórios */ .pessoas-lista { display: flex; flex-direction: column; gap: 8px; } .pessoa-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 36px; gap: 8px; align-items: center; } .pessoa-linha .erro { grid-column: 1 / -1; } @media (max-width: 640px) { .pessoa-linha { grid-template-columns: 1fr 36px; } .pessoa-linha input[type=email] { grid-column: 1; } } /* Envio por e-mail (conferência) */ .envio-form { display: flex; flex-direction: column; gap: 16px; } .envio-grupo { border-left: 4px solid var(--cor-principal); } .envio-grupo.desmarcado { border-left-color: #CBD5E1; } .envio-grupo.desmarcado .envio-corpo { opacity: .45; pointer-events: none; } .envio-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .envio-marcar span { font-size: 1.1rem; } .envio-corpo { display: flex; flex-direction: column; gap: 12px; } .envio-para { display: flex; flex-direction: column; gap: 6px; } .envio-arquivos { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .envio-arquivos .arq { background: #F1F5F9; border-radius: 8px; padding: 4px 10px; font-size: 13px; } .tag-rel { background: var(--cor-rt); color: #fff; text-decoration: none; } .tag-rel.rc { background: var(--cor-rc); } .envio-acoes { position: sticky; bottom: 0; background: #F3F5F9; padding: 12px 0; } .selo-enviado { background: #DCFCE7; color: #166534; } /* ---- Relatório Complementar ---- */ .comp-mes { display: flex; align-items: center; gap: 6px; } .comp-mes form { margin: 0; } .comp-mes input[type=month] { width: auto; } .comp-mes-titulo { font-weight: 500; color: #64748B; margin-left: 6px; } .comp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 16px 0; } .comp-kpis .kpi .valor { font-size: 1.9rem; } .comp-acoes { flex-wrap: wrap; margin: 12px 0; align-items: flex-start; } .comp-acoes form { margin: 0; } .comp-reabrir summary { list-style: none; } .comp-reabrir summary::-webkit-details-marker { display: none; } .comp-reabrir[open] form { display: grid; gap: 8px; margin-top: 8px; max-width: 460px; } .comp-hist { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; } .temas-comp { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .temas-comp .tema { font-size: 13px; padding: 5px 10px; gap: 4px; } .temas-comp .tema i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .comp-atual { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: #334155; } .comp-atual strong { font-size: 1.05rem; color: #0F172A; } .comp-atual-nome { color: #64748B; } .comp-seta-nav { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid #CBD5E1; color: #334155; text-decoration: none; font-size: 17px; line-height: 1; } .comp-seta-nav:hover { background: #F1F5F9; } .btn.btn-periodo { background: var(--cor-periodo, #4C1D95); border-color: var(--cor-periodo, #4C1D95); color: #fff; } .btn.btn-periodo:hover { filter: brightness(1.08); } .comp-escolha summary.btn:not(.ativo) { opacity: .82; } .comp-escolha summary.btn.ativo { box-shadow: 0 0 0 3px rgba(15, 23, 42, .12); } .comp-escolha { position: relative; } .comp-escolha summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .comp-escolha summary::-webkit-details-marker { display: none; } .comp-escolha .comp-seta { font-size: 11px; transition: transform .15s; } .comp-escolha[open] .comp-seta { transform: rotate(180deg); } .comp-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 280px; max-width: 90vw; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); padding: 6px; display: grid; gap: 1px; } .comp-menu-titulo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748B; padding: 10px 10px 4px; border-top: 1px solid #F1F5F9; } .comp-menu-titulo:first-child { border-top: 0; padding-top: 6px; } .comp-menu-item { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 8px; color: #0F172A; text-decoration: none; font-size: 14px; } .comp-menu-item:hover, .comp-menu-item:focus { background: #F1F5F9; } .comp-menu-item.ativo { background: #EFF6FF; color: #1D4ED8; font-weight: 600; } .comp-menu-form { display: flex; gap: 6px; align-items: flex-end; padding: 2px 10px 8px; margin: 0; } .comp-menu-form .inp { flex: 1; min-width: 0; } .comp-menu-datas { display: grid; grid-template-columns: 1fr 1fr; } .comp-menu-datas label { display: grid; gap: 2px; } .comp-menu-datas button { grid-column: 1 / -1; } .comp-estat-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .comp-estat-grade > div { display: grid; gap: 2px; padding: 10px 12px; background: #F8FAFC; border-radius: 10px; } .comp-estat-grade strong { font-size: 1.15rem; } .comp-var { font-size: 13px; font-weight: 700; color: #475569; } .comp-var.sobe { color: #047857; } .comp-var.desce { color: #B91C1C; } .comp-barra { display: block; height: 8px; border-radius: 4px; background: #EEF2F7; overflow: hidden; } .comp-barra i { display: block; height: 100%; border-radius: 4px; } /* ---- Menu lateral: ícones coloridos ---- */ .menu-item .ic svg { width: 19px; height: 19px; } .menu.ic-cores .menu-item .ic { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); } .menu.ic-cores .menu-item:hover .ic { color: var(--c); background: color-mix(in srgb, var(--c) 26%, transparent); } .menu.ic-cores .menu-item.ativo .ic { color: #fff; background: color-mix(in srgb, var(--c) 70%, #0F172A); box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 45%, transparent); } .menu-item.ativo { box-shadow: 0 4px 14px rgba(37, 99, 235, .35); } /* ---- Personalizar meu menu ---- */ dialog.janela-menu { color: #0F172A; width: min(640px, calc(100vw - 32px)); } .pm-estilo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .pm-grupos { display: grid; gap: 12px; max-height: 56vh; overflow-y: auto; padding-right: 4px; } .pm-grupo { border: 1px solid #E2E8F0; border-radius: 12px; padding: 8px; background: #F8FAFC; } .pm-grupo.arrastando, .pm-item.arrastando { opacity: .45; } .pm-grupo-cab { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; } .pm-nome-grupo { flex: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; } .pm-sem-grupo { flex: 1; font-size: 12.5px; color: #64748B; font-weight: 600; } .pm-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-height: 36px; } .pm-item { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; padding: 5px 8px; } .pm-item.oculto { opacity: .55; background: #F1F5F9; } .pm-item.oculto .pm-nome { text-decoration: line-through; } .pm-alca { cursor: grab; color: #94A3B8; font-size: 18px; line-height: 1; padding: 2px; user-select: none; touch-action: none; } .pm-alca:active { cursor: grabbing; } .pm-cor { position: relative; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; color: var(--c); background: #1E293B; } .pm-cor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; } .pm-cor::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 2px solid #fff; } .pm-nome { flex: 1; min-width: 0; } .pm-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #334155; white-space: nowrap; cursor: pointer; } .pm-setas { display: inline-flex; gap: 3px; } .pm-setas button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #CBD5E1; background: #fff; cursor: pointer; color: #334155; } .pm-setas button:hover { background: #EFF6FF; } .pm-acoes { margin-top: 14px; display: flex; gap: 8px; align-items: center; } @media (max-width: 560px) { .pm-ver span { display: none; } } .pm-item .inp, .pm-grupo-cab .inp { min-height: 0; height: 34px; padding: 4px 10px; } .pm-item { padding: 4px 8px; } /* ---- Endereços bloqueados ---- */ .segmentado a.seg { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 7px; font-size: 13px; color: #334155; text-decoration: none; } .segmentado a.seg:hover { background: #F1F5F9; } .segmentado a.seg.ativo { background: #EFF6FF; color: #1D4ED8; font-weight: 600; } .ipb-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; } .ipb-filtros .inp { width: auto; } .ipb-filtros input[name=q] { flex: 1 1 220px; } .ipb-novo summary { cursor: pointer; } .ipb-novo[open] summary { margin-bottom: 12px; } .ipb-form { display: grid; gap: 10px; } .ipb-ip { font-size: 14px; font-weight: 600; background: #F1F5F9; padding: 2px 6px; border-radius: 6px; } .ipb-encerrado td { color: #64748B; } .ipb-encerrado .ipb-ip { text-decoration: line-through; background: transparent; } .ipb-acoes { white-space: nowrap; } .ipb-acoes form { display: inline; margin: 0; } .aud-bloquear { text-decoration: none; margin-left: 4px; } /* ---- Arrastar grupos e itens no próprio menu ---- */ .menu-grupo-cab { cursor: grab; border-radius: 8px; } .menu-grupo-cab:active { cursor: grabbing; } .menu-alca { width: 0; overflow: hidden; opacity: 0; font-size: 13px; color: #64748B; transition: width .15s, opacity .15s; } .menu-grupo-cab:hover .menu-alca { width: 12px; opacity: 1; } .menu-grupo.arrastando { opacity: .45; } .menu-itens li.arrastando { opacity: .4; } .menu.arrastando-menu .menu-grupo { outline: 1px dashed rgba(148, 163, 184, .25); outline-offset: 2px; border-radius: 10px; } .menu.arrastando-menu .menu-grupo.fechado .menu-itens { display: flex; min-height: 8px; } .menu.recolhido .menu-grupo-cab, .menu.recolhido li[data-item] { cursor: default; } /* ===================================================================== Lista de relatórios — barra compacta e linhas com mais destaque (5.4.0) ===================================================================== */ .por-pagina { display: inline-flex; margin: 0; } .por-pagina .inp { height: 42px; width: auto; padding: 0 32px 0 12px; font-size: 14px; font-weight: 500; } .res-contagem { margin-left: auto; color: #475569; font-size: 14px; white-space: nowrap; } .res-contagem strong { color: #0F172A; font-size: 15px; } .res-contagem .carregando { color: var(--cor-principal); font-weight: 600; } .tabela-caixa:has(.tabela-rel) { border-color: #D8E0EA; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .05); } .tabela-rel td { padding: 13px 12px; color: #1E293B; font-size: 14.5px; border-bottom: 1px solid #E5EAF1; } /* listras suaves (por cima da cor da coluna escolhida em “Colunas”) */ .tabela-rel tbody tr:nth-child(even) td { background-image: linear-gradient(rgba(15, 23, 42, .028), rgba(15, 23, 42, .028)); } .tabela-rel tbody tr:hover td { background-image: linear-gradient(rgba(37, 99, 235, .075), rgba(37, 99, 235, .075)); } /* faixa colorida à esquerda: azul para RT, laranja para RC */ .tabela-rel tbody tr.linha-rt td.c-sel { box-shadow: inset 4px 0 0 var(--cor-rt); } .tabela-rel tbody tr.linha-rc td.c-sel { box-shadow: inset 4px 0 0 var(--cor-rc); } .tabela-rel td.c-sel { background-color: #F8FAFC; } .tabela-rel .rel-codigo { font-size: 15.5px; color: #0F172A; } .tabela-rel .rel-codigo .selo-tipo { margin-right: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .18); } .tabela-rel tr.linha-rt .rel-codigo:hover { color: var(--cor-rt); } .tabela-rel tr.linha-rc .rel-codigo:hover { color: var(--cor-rc); } .tabela-rel .rel-assunto { color: #334155; font-weight: 500; } .tabela-rel td.c-cliente { font-weight: 600; color: #0F172A; } .tabela-rel td.c-data { font-weight: 500; font-variant-numeric: tabular-nums; } .tabela-rel td.c-autor { color: #334155; } .tabela-rel td.c-horas { font-weight: 700; color: #1E3A8A; font-variant-numeric: tabular-nums; } /* ações: sempre visíveis, cada ícone ganha fundo ao passar o mouse */ .tabela-rel .acoes-icones { gap: 2px; } .tabela-rel .acoes-icones a, .tabela-rel .acoes-icones button { opacity: 1; color: #475569; border-radius: 8px; transition: background .12s, color .12s; } .tabela-rel .acoes-icones a:hover, .tabela-rel .acoes-icones button:hover { background: #E0E7FF; color: var(--cor-principal); } .tabela-rel .acoes-icones button.perigo:hover { background: #FEE2E2; color: #B91C1C; } .tabela-rel .acoes-icones .desligado { color: #B45309; } @media (max-width: 760px) { .res-contagem { margin-left: 0; width: 100%; } } /* ===================================================================== Configurações do Sistema em cards (5.5.0) ===================================================================== */ .config-colunas { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: #fff; border: 1px solid #E2E8F0; border-radius: 999px; font-size: 14px; color: #334155; font-weight: 500; } .config-colunas input[type=range] { width: 120px; accent-color: var(--cor-principal); cursor: pointer; } .config-colunas output { min-width: 22px; height: 22px; border-radius: 50%; background: var(--cor-principal); color: #fff; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .secoes-grade { display: grid; grid-template-columns: repeat(var(--por-linha, 3), minmax(0, 1fr)); gap: 16px; align-items: stretch; } .secoes-grade .secao { border-radius: 18px; border-color: #E2E8F0; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: box-shadow .15s, transform .15s, border-color .15s; } .secoes-grade .secao.aberta { grid-column: 1 / -1; box-shadow: 0 4px 18px rgba(15, 23, 42, .08); } .secoes-grade .secao-cab { position: relative; } .secoes-grade .secao-setas { display: inline-flex; gap: 2px; } /* card fechado com 2 ou mais por linha: ícone em cima, título e descrição embaixo */ .secoes-grade:not(.uma-coluna) .secao:not(.aberta) { min-height: 150px; display: flex; } .secoes-grade:not(.uma-coluna) .secao:not(.aberta):hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .09); border-color: #CBD5E1; } .secoes-grade:not(.uma-coluna) .secao:not(.aberta) .secao-cab { flex: 1; align-items: flex-start; padding: 20px; border-radius: 18px; } .secoes-grade:not(.uma-coluna) .secao:not(.aberta) .secao-alternar { flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; } .secoes-grade:not(.uma-coluna) .secao:not(.aberta) .secao-icone { width: 48px; height: 48px; border-radius: 14px; } .secoes-grade:not(.uma-coluna) .secao:not(.aberta) .secao-titulos strong { font-size: 1.05rem; margin-bottom: 4px; } .secoes-grade:not(.uma-coluna) .secao:not(.aberta) .secao-titulos span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; } .secoes-grade:not(.uma-coluna) .secao:not(.aberta) .chev { display: none; } .secoes-grade:not(.uma-coluna) .secao:not(.aberta) .secao-setas { position: absolute; top: 12px; right: 12px; opacity: 0; transition: opacity .12s; } .secoes-grade .secao:not(.aberta):hover .secao-setas, .secoes-grade .secao-setas:focus-within { opacity: 1; } .secoes-grade .secao.aberta .secao-cab { border-bottom: 1px solid #F1F5F9; border-radius: 18px 18px 0 0; } @media (max-width: 1100px) { .secoes-grade { grid-template-columns: repeat(min(var(--por-linha, 3), 2), minmax(0, 1fr)); } } @media (max-width: 680px) { .secoes-grade { grid-template-columns: 1fr; } .config-colunas { display: none; } } /* ---- Notificações no menu lateral (5.6.0) ---- */ .menu-item .menu-num { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: #EF4444; color: #fff; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--cor-menu); } .menu-item .menu-num.pulsar { animation: sino-pulsar .6s ease 2; } .menu-item .ic { position: relative; } /* menu recolhido: o número vira um pontinho vermelho sobre o sino */ .menu.recolhido .menu-item.tem-novas .ic::after { content: ""; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 2px var(--cor-menu); } .menu.recolhido .menu-item .menu-num { display: none; } /* ---- Tela de login: várias imagens de fundo (6.0.0) ---- */ .login.com-fotos .login-lado, .login.com-fotos.centralizado { position: relative; isolation: isolate; } .login.com-fotos .login-lado { background: transparent; } .login.com-fotos.centralizado .login-lado { position: static; } .login-fundos { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0F172A; } .login-fundo { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1.4s ease; } .login-fundo.ativo { opacity: 1; } .login-fundos::after { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, calc(var(--login-escurecer, 55) / 100)); } @media (prefers-reduced-motion: reduce) { .login-fundo { transition: none; } } /* ===================================================================== Laudos técnicos (6.0.0) ===================================================================== */ .selo-tipo.lt { background: var(--cor-lt, #0F766E); } .tabela-rel tbody tr.linha-lt td:first-child { box-shadow: inset 4px 0 0 var(--cor-lt, #0F766E); } .lt-filtro-cliente { flex: 0 1 300px; min-width: 220px; } .lt-filtro-cliente .busca-cliente .inp { height: 42px; } /* escolher modelo */ .lt-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .lt-modelo { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: #fff; border: 1px solid #E2E8F0; border-radius: 18px; text-decoration: none; color: #0F172A; transition: transform .15s, box-shadow .15s, border-color .15s; } .lt-modelo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .1); border-color: #99F6E4; } .lt-modelo strong { font-size: 1.05rem; } .lt-modelo-icone { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #CCFBF1; color: #0F766E; } .lt-modelo-secoes { margin: 4px 0 0; padding-left: 20px; color: #475569; font-size: 13px; display: grid; gap: 2px; } .lt-modelo .selo { align-self: flex-start; margin-top: auto; } /* formulário: seções */ .lt-secoes { display: grid; gap: 14px; counter-reset: secao; } .lt-secao { border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px; background: #FBFDFF; display: grid; gap: 8px; } .lt-secao:focus-within { border-color: #5EEAD4; box-shadow: 0 0 0 3px rgba(20, 184, 166, .12); } .lt-secao-cab { display: flex; align-items: center; gap: 8px; } .lt-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--cor-lt, #0F766E); color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; } .lt-secao-titulo { flex: 1; font-weight: 700; font-size: 15px; } .lt-secao-botoes { display: inline-flex; gap: 2px; } .lt-secao-botoes .btn-icone, .lt-equip .btn-icone { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #E2E8F0; background: #fff; cursor: pointer; color: #334155; } .lt-secao-botoes .btn-icone:hover { background: #F1F5F9; } .btn-icone.perigo:hover { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; } .lt-dica { margin: 0; font-size: 13px; color: #64748B; background: #F0FDFA; border-radius: 8px; padding: 6px 10px; } .lt-dica-campo { font-size: 13px; } .lt-secao .editor-area { min-height: 110px; } .lt-add { margin-top: 12px; border-style: dashed; width: 100%; justify-content: center; } .lt-rodape-form { margin: 18px 0 30px; display: flex; gap: 8px; flex-wrap: wrap; } /* formulário: equipamentos */ .lt-equip { width: 100%; border-collapse: separate; border-spacing: 0 6px; min-width: 820px; } .lt-equip th { text-align: left; font-size: 12px; font-weight: 600; color: #64748B; padding: 0 4px; } .lt-equip td { padding: 0 4px; } .lt-equip td:nth-child(6) { width: 26%; } .lt-equip .inp { height: 38px; } .lt-equip-vazio { margin: 4px 0 0; } /* tela do laudo (como no PDF) */ .documento.lt { --cor-tipo: var(--cor-lt, #0F766E); } .lt-doc-titulo { margin: 18px 28px 0; font-size: 1.35rem; line-height: 1.3; } .lt-doc-texto { min-height: 0 !important; } .lt-doc-equip td, .lt-doc-equip th { font-size: 13px; } .lt-doc-final { margin: 18px 28px 0; } .lt-doc-final p { margin: 0 0 10px; } .lt-assinaturas { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; padding: 30px 0 10px; } .lt-assinaturas > div { min-width: 260px; } .lt-salvar-modelo { position: relative; } .lt-salvar-modelo summary { list-style: none; } .lt-salvar-modelo summary::-webkit-details-marker { display: none; } .lt-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .16); padding: 14px; display: grid; gap: 10px; } /* ===================================================================== Agenda (6.1.0) ===================================================================== */ :root { --ag-visita: #0E7490; --ag-remoto: #475569; --ag-interno: #7C3AED; --ag-hora: 52px; } .ag-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; } .ag-nav { display: flex; align-items: center; gap: 6px; } .ag-titulo { margin: 0 0 0 8px; font-size: 1.15rem; white-space: nowrap; } .ag-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 0 auto; } .ag-filtros select.inp { width: auto; height: 38px; } .ag-filtro-cliente { width: 240px; } .ag-filtro-cliente .inp { height: 38px; } .ag-legenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; color: #334155; margin: 0 2px 10px; } .ag-legenda > span:not(.hint)::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--ag-visita); } .ag-legenda .remoto::before { background: var(--ag-remoto) !important; } .ag-legenda .interno::before { background: var(--ag-interno) !important; } /* evento */ .ag-ev { --c: var(--ag-visita); display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; border-radius: 7px; text-decoration: none; background: color-mix(in srgb, var(--c) 13%, white); border-left: 3px solid var(--c); color: #0F172A; font-size: 12px; line-height: 1.25; overflow: hidden; min-width: 0; } .ag-ev:hover { background: color-mix(in srgb, var(--c) 22%, white); } .ag-ev.remoto { --c: var(--ag-remoto); } .ag-ev.interno { --c: var(--ag-interno); } .ag-ev.sit-confirmado { background: color-mix(in srgb, var(--c) 24%, white); } .ag-ev.sit-realizado { opacity: .7; } .ag-ev.sit-cancelado { opacity: .5; text-decoration: line-through; } .ag-ev-hora { font-weight: 700; color: color-mix(in srgb, var(--c) 80%, black); font-size: 11px; white-space: nowrap; } .ag-ev-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ag-ev-pessoas { display: inline-flex; gap: 2px; flex-wrap: wrap; } .ag-ev-pessoas i { font-style: normal; font-size: 9.5px; font-weight: 800; background: #fff; color: #334155; border-radius: 4px; padding: 0 3px; border: 1px solid #E2E8F0; } /* mês */ .ag-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; } .ag-mes-cab { padding: 8px; font-size: 12px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #E2E8F0; background: #F8FAFC; } .ag-dia { min-height: 118px; padding: 6px; border-right: 1px solid #EEF2F7; border-bottom: 1px solid #EEF2F7; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ag-dia:nth-child(7n) { border-right: 0; } .ag-dia.fds, .ag-mes-cab.fds { background: #FAFBFD; } .ag-dia.fora { background: #F8FAFC; } .ag-dia.fora .ag-dia-num { color: #94A3B8; } .ag-dia.feriado { background: #FFF7ED; } .ag-dia-cab { display: flex; align-items: center; gap: 4px; min-height: 24px; } .ag-dia-num { font-weight: 700; color: #0F172A; text-decoration: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } .ag-dia.hoje .ag-dia-num { background: var(--cor-principal); color: #fff; } .ag-feriado { font-size: 10.5px; color: #C2410C; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ag-mais { margin-left: auto; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #64748B; opacity: 0; font-weight: 700; } .ag-dia:hover .ag-mais { opacity: 1; } .ag-mais:hover { background: #EFF6FF; color: var(--cor-principal); } .ag-mais-itens { font-size: 11.5px; color: #475569; text-decoration: none; padding-left: 4px; } /* semana */ .ag-semana { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; } .ag-sem-linha { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); } .ag-sem-cab { border-bottom: 1px solid #E2E8F0; background: #F8FAFC; } .ag-sem-dia { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; text-decoration: none; color: #334155; gap: 1px; min-width: 0; } .ag-sem-dia strong { font-size: 1.2rem; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #0F172A; } .ag-sem-dia.hoje strong { background: var(--cor-principal); color: #fff; } .ag-sem-nome { font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: #64748B; } .ag-sem-dia.feriado { background: #FFF7ED; } .ag-sem-cheios { border-bottom: 1px solid #E2E8F0; } .ag-sem-cheios > div { padding: 3px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid #EEF2F7; min-width: 0; } .ag-sem-canto { font-size: 11px; display: flex; align-items: center; justify-content: center; } .ag-sem-corpo { position: relative; } .ag-horas { display: flex; flex-direction: column; } .ag-hora { height: var(--ag-hora); font-size: 11px; color: #94A3B8; text-align: right; padding: 0 6px; transform: translateY(-7px); } .ag-hora:first-child { transform: none; } .ag-col { position: relative; border-left: 1px solid #EEF2F7; display: flex; flex-direction: column; } .ag-col.fds { background: #FAFBFD; } .ag-col.hoje { background: #F5F9FF; } .ag-slot { display: block; height: var(--ag-hora); border-bottom: 1px solid #F1F5F9; flex-shrink: 0; } a.ag-slot:hover { background: rgba(37, 99, 235, .06); } a.ag-slot:hover::after { content: "+"; display: block; text-align: center; color: var(--cor-principal); font-weight: 700; line-height: var(--ag-hora); } .ag-col .ag-ev { position: absolute; z-index: 2; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); } .ag-agora { position: absolute; left: 0; right: 0; height: 2px; background: #EF4444; z-index: 3; pointer-events: none; } .ag-agora::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #EF4444; } /* lista */ .ag-lista { display: grid; gap: 12px; } .ag-lista-dia { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; } .ag-lista-dia.hoje { border-color: #93C5FD; } .ag-lista-dia h3 { margin: 0 0 4px; font-size: 15px; text-transform: capitalize; } .ag-lista-item { --c: var(--ag-visita); display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: #0F172A; border-left: 4px solid var(--c); background: #F8FAFC; } .ag-lista-item:hover { background: #EFF6FF; } .ag-lista-item.remoto { --c: var(--ag-remoto); } .ag-lista-item.interno { --c: var(--ag-interno); } .ag-lista-item.sit-cancelado { opacity: .55; text-decoration: line-through; } .ag-lista-hora { font-weight: 700; min-width: 96px; font-variant-numeric: tabular-nums; } .ag-lista-corpo { flex: 1; display: grid; min-width: 0; } .ag-lista-corpo small { color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* formulário e detalhe */ .ag-quando { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .ag-quando > .campo { flex: 0 1 200px; } .ag-horas-campos { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .ag-horas-campos .campo { flex: 0 1 140px; } .ag-horas-campos .campo:last-child { flex: 1 1 320px; } .ag-duracoes { display: flex; flex-wrap: wrap; gap: 4px; } .ag-tipo-selo { --c: var(--ag-visita); font-size: 12px; font-weight: 700; color: #fff; background: var(--c); border-radius: 999px; padding: 3px 10px; vertical-align: 4px; } .ag-tipo-selo.remoto { --c: var(--ag-remoto); } .ag-tipo-selo.interno { --c: var(--ag-interno); } .ag-detalhe { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .ag-dados { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; margin: 0; } .ag-dados dt { color: #64748B; font-size: 13px; font-weight: 600; } .ag-dados dd { margin: 0; } .chip-pessoa { display: inline-block; background: #EFF6FF; color: #1E3A8A; border-radius: 999px; padding: 2px 10px; margin: 0 4px 4px 0; font-size: 13px; font-weight: 600; } .ag-situacoes { display: grid; gap: 6px; } .ag-situacoes form { margin: 0; } .ag-situacoes .btn { width: 100%; justify-content: center; } .ag-link { display: flex; gap: 6px; } .ag-link .inp { font-family: ui-monospace, monospace; font-size: 12.5px; } .ag-como ul { padding-left: 18px; display: grid; gap: 6px; font-size: 14px; } @media (max-width: 900px) { .ag-detalhe { grid-template-columns: 1fr; } .ag-filtros { margin-left: 0; } .ag-dia { min-height: 80px; } .ag-ev-pessoas { display: none; } } /* ===================================================================== Agenda 2 — várias agendas, paleta de lápis, arrastar e soltar (6.2.0) ===================================================================== */ .ag-tela { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; } .ag-lateral { position: sticky; top: 12px; display: grid; gap: 14px; } .ag-lat-bloco { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 10px; display: grid; gap: 2px; } .ag-lat-cab { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; font-size: 13px; color: #334155; } .ag-lat-mais { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 800; color: var(--cor-principal); background: #EFF6FF; } .ag-lat-mais:hover { background: #DBEAFE; } .ag-lat-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; cursor: pointer; font-size: 14px; } .ag-lat-item:hover { background: #F8FAFC; } .ag-lat-item input { accent-color: var(--c); width: 16px; height: 16px; margin: 0; } .ag-lat-cor { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--c); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); } .ag-lat-nome { flex: 1; min-width: 0; display: grid; line-height: 1.2; } .ag-lat-nome small { color: #64748B; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ag-lat-config { text-decoration: none; color: #94A3B8; padding: 0 4px; border-radius: 6px; opacity: 0; } .ag-lat-item:hover .ag-lat-config, .ag-lat-config:focus { opacity: 1; } .ag-lat-config:hover { color: #0F172A; background: #E2E8F0; } .ag-lat-dica { font-size: 12.5px; margin: 0 4px; } .ag-principal { min-width: 0; } .ag-barra { justify-content: space-between; } .ag-semana { --n-dias: 7; } .ag-sem-linha { grid-template-columns: 56px repeat(var(--n-dias), minmax(0, 1fr)); } .ag-ev { color: #0F172A; } .ag-ev.convite { border-left-style: dashed; } .ag-ev.movel { cursor: grab; touch-action: none; -webkit-user-drag: none; user-select: none; } .ag-ev.arrastando { cursor: grabbing; opacity: .85; z-index: 5 !important; box-shadow: 0 8px 20px rgba(15, 23, 42, .25) !important; } .ag-ev-alca { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; } .ag-ev-alca::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; margin-left: -9px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--c) 60%, transparent); opacity: 0; } .ag-ev:hover .ag-ev-alca::after { opacity: 1; } .ag-dia.soltar { background: #EFF6FF; box-shadow: inset 0 0 0 2px #93C5FD; } body.carregando { cursor: progress; } body.carregando .ag-principal { opacity: .6; pointer-events: none; transition: opacity .2s; } /* cor da agenda: amostra, sugeridas e caixa de lápis */ /* compartilhamento */ .ag-comp { display: grid; gap: 8px; } .ag-comp-linha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; } .ag-comp-linha .btn-icone { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #E2E8F0; background: #fff; cursor: pointer; } /* formulário do compromisso */ .ag-form-principal { display: grid; gap: 14px; } .ag-agenda-sel { display: flex; align-items: center; gap: 8px; } .ag-agenda-cor { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; } .ag-datas { display: grid; gap: 8px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px; } .ag-datas-linha { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; } .ag-datas-campos { display: flex; flex-wrap: wrap; gap: 8px; } .ag-datas-campos .inp { width: auto; } .ag-datas-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-left: 68px; } .ag-repeticao { display: grid; gap: 10px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px; } .ag-rep-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ag-rep-linha > span:first-child { min-width: 70px; color: #475569; font-size: 14px; } .ag-rep-linha .inp[type=number] { width: 80px; } .ag-rep-linha .inp[type=date] { width: auto; } .ag-dias label { min-width: 0; } .ag-mais-opcoes summary { cursor: pointer; } .ag-mais-opcoes[open] summary { margin-bottom: 12px; } .ag-mais-opcoes { display: grid; gap: 12px; } @media (max-width: 980px) { .ag-tela { grid-template-columns: 1fr; } .ag-lateral { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .ag-datas-extra { padding-left: 0; } } /* ---------- Agenda 6.2.1: painel recolhível, exibição, janela rápida e lembretes na tela ---------- */ .ag-tela { transition: grid-template-columns .2s ease; } .ag-tela.recolhida { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; } .ag-tela.recolhida .ag-lateral { display: none; } .ag-lat-faixa { display: none; } .ag-tela.recolhida .ag-lat-faixa { display: flex; flex-direction: column; align-items: center; gap: 8px; position: sticky; top: 12px; width: 34px; min-height: 220px; padding: 10px 0; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; cursor: pointer; color: #475569; font: inherit; font-weight: 700; } .ag-tela.recolhida .ag-lat-faixa:hover { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; } .ag-lat-faixa-txt { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; letter-spacing: .04em; } .ag-lat-faixa i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; } .ag-lat-botoes { display: inline-flex; gap: 6px; align-items: center; } .ag-lat-esconder { width: 26px; height: 26px; border-radius: 8px; border: 1px solid #E2E8F0; background: #fff; cursor: pointer; color: #475569; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .ag-lat-esconder:hover { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; } .ag-recolher[aria-expanded="false"] { background: #EFF6FF; color: #1D4ED8; } @media (max-width: 900px) { .ag-tela.recolhida { grid-template-columns: 1fr; } .ag-tela.recolhida .ag-lat-faixa { flex-direction: row; min-height: 0; width: auto; position: static; padding: 6px 12px; } .ag-tela.recolhida .ag-lat-faixa-txt { writing-mode: horizontal-tb; transform: none; } } /* exibição: livre (só contorno), provisório (listrado), fora do escritório (faixa roxa) */ .ag-ev.exib-livre { background: #fff; border: 1px dashed color-mix(in srgb, var(--c) 70%, white); } .ag-ev.exib-provisorio { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.65) 6px 11px); } .ag-ev.exib-ausente { box-shadow: inset 4px 0 0 #7C3AED; } .ag-ev-oculto { cursor: default; opacity: .85; } .ag-lista-item.oculto { cursor: default; } /* janelas arrastáveis */ .alca-arrastar { cursor: move; touch-action: none; user-select: none; } .arrastando-janela { transition: none !important; opacity: .96; } /* janela rápida (QuickAdd) */ dialog.ag-rapido { width: min(520px, calc(100vw - 24px)); padding: 0; overflow: visible; } dialog.ag-rapido.movida { position: fixed; } .ag-rapido-cab { padding: 14px 18px; background: #F1F5F9; border-bottom: 1px solid #E2E8F0; border-radius: 16px 16px 0 0; } .ag-rapido-cab h2 { font-size: 16px; margin: 0; } .ag-x { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #64748B; padding: 2px 6px; border-radius: 6px; } .ag-x:hover { background: #E2E8F0; color: #0F172A; } .ag-rapido-grade { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 16px 18px 6px; } .ag-rapido-grade > label { text-align: right; color: #475569; font-size: 13.5px; } .ag-rapido-grade > label b { color: #DC2626; margin-left: 2px; } .ag-rapido-grade input:not([type="checkbox"]), .ag-rapido-grade select { width: 100%; min-width: 0; } #rap-titulo { background: #FEFCE8; } .ag-rapido-par { display: flex; gap: 10px; align-items: center; } .ag-rapido-par select { flex: 1; } .ag-rapido-par label { white-space: nowrap; color: #475569; font-size: 13.5px; } .ag-rapido-quando { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ag-rapido-quando input[type="date"] { width: auto !important; flex: 1 1 140px; } .ag-rapido-quando input[type="time"] { width: auto !important; flex: 0 1 110px; } .ag-rapido-quando > span { color: #64748B; } .ag-rapido-quando .chk { margin-left: 4px; } .ag-rapido-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid #E2E8F0; margin-top: 10px; } .ag-rapido-rodape .acoes { display: flex; gap: 8px; } @media (max-width: 520px) { .ag-rapido-grade { grid-template-columns: 1fr; } .ag-rapido-grade > label { text-align: left; } } /* lembretes na tela */ .lembretes-tela { position: fixed; right: 20px; bottom: 20px; z-index: 1000; width: min(380px, calc(100vw - 24px)); background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(15, 23, 42, .28), 0 0 0 1px rgba(15, 23, 42, .08); overflow: hidden; animation: lt-entrar .25s ease-out; } .lembretes-tela[hidden] { display: none; } @keyframes lt-entrar { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } .lt-cab { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; background: linear-gradient(135deg, #1D4ED8, #2563EB); color: #fff; } .lt-cab h2 { flex: 1; font-size: 14.5px; margin: 0; color: #fff; } .lt-sino { display: inline-block; animation: lt-sino 1.2s ease-in-out 2; transform-origin: 50% 0; } @keyframes lt-sino { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } } .lt-x { border: 0; background: rgba(255,255,255,.15); color: #fff; width: 28px; height: 28px; border-radius: 8px; font-size: 18px; cursor: pointer; } .lt-x:hover { background: rgba(255,255,255,.3); } .lt-lista { list-style: none; margin: 0; padding: 6px; max-height: min(50vh, 380px); overflow: auto; } .lt-item { --c: #2563EB; display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; border-left: 4px solid var(--c); } .lt-item + .lt-item { margin-top: 4px; } .lt-item:hover { background: #F8FAFC; } .lt-corpo { flex: 1; min-width: 0; display: grid; gap: 1px; } .lt-titulo { font-weight: 700; color: #0F172A; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-titulo:hover { text-decoration: underline; } .lt-quando { font-size: 12.5px; color: #1D4ED8; font-weight: 600; } .lt-info { font-size: 12px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-acoes { display: flex; flex-direction: column; gap: 4px; } .lt-rodape { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid #E2E8F0; background: #F8FAFC; } .lt-adiar { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; margin-right: auto; } .lt-adiar select { padding: 4px 6px; font-size: 13px; } /* arrastar com Ctrl/⌘ = copiar */ .ag-ev-fantasma { opacity: .35; pointer-events: none; outline: 2px dashed color-mix(in srgb, var(--c) 60%, white); } .ag-ev-origem { opacity: .4; } .ag-ev-voando { position: fixed; z-index: 2000; pointer-events: none; margin: 0; opacity: .95; cursor: grabbing; box-shadow: 0 10px 24px rgba(15, 23, 42, .28); transform: rotate(-1.5deg); } .ag-ev.copiando { cursor: copy; } .ag-ev.copiando { outline: 2px solid #16A34A; outline-offset: 1px; } .ag-ev.copiando::after { content: "+ cópia"; position: absolute; top: 3px; right: 4px; background: #16A34A; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.2); } body.arrastando-ag, body.arrastando-ag * { cursor: grabbing !important; user-select: none; } .ag-sem-cheios [data-dia].soltar { background: #EFF6FF; box-shadow: inset 0 0 0 2px #93C5FD; } .ag-col.soltar { background: #F0F9FF; } /* ===================================================================== Listas — o mesmo padrão da lista de Relatórios em todas as telas (6.3.0) ===================================================================== */ .tabela-caixa:has(.tabela-padrao) { border-color: #D8E0EA; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .05); } .tabela-padrao { border-collapse: separate; border-spacing: 0; width: 100%; } .tabela-padrao > thead > tr:first-child > th { background-color: #1E293B; color: #FFFFFF; font-weight: 700; font-size: 12px; letter-spacing: .06em; padding: 13px 12px; border-bottom: 0; white-space: nowrap; } .tabela-padrao > thead > tr:first-child > th:first-child { border-top-left-radius: 13px; } .tabela-padrao > thead > tr:first-child > th:last-child { border-top-right-radius: 13px; } .tabela-padrao > thead a, .tabela-padrao > thead a.ordenar { color: inherit; font-weight: 700; text-decoration: none; } .tabela-padrao > thead a:hover { text-decoration: underline; text-underline-offset: 3px; } .tabela-padrao > thead a.ordenar span:not(:empty), .tabela-padrao .seta-ord:not(:empty) { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .25); font-size: 11px; margin-left: 4px; } .ordenar-local { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; } .ordenar-local:hover { text-decoration: underline; text-underline-offset: 3px; } .ordenar-local:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; border-radius: 4px; } .tabela-padrao > tbody > tr > td { padding: 10px 12px; border-bottom: 1px solid #EEF2F7; vertical-align: middle; } .tabela-padrao > tbody > tr:nth-child(even) > td { background-color: #FAFBFD; } .tabela-padrao > tbody > tr:last-child > td { border-bottom: 0; } .tabela-padrao > tbody > tr:hover > td { background-image: linear-gradient(rgba(37, 99, 235, .05), rgba(37, 99, 235, .05)); } .lista-barra-colunas { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 10px; } dialog.janela-colunas { width: min(760px, calc(100vw - 24px)); } dialog.janela-colunas .janela-cab { display: flex; justify-content: space-between; align-items: center; } dialog.janela-colunas .janela-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 14px; } /* Agenda › Lista em tabela */ .ag-tabela td { font-size: 14px; } .ag-td-data { white-space: nowrap; } .ag-td-data .selo, .ag-td-data .ag-feriado { margin-left: 6px; } .ag-td-hora { white-space: nowrap; font-variant-numeric: tabular-nums; } .ag-td-assunto { font-weight: 700; color: #0F172A; text-decoration: none; } a.ag-td-assunto:hover { text-decoration: underline; color: var(--cor-principal); } .ag-td-agenda { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .ag-td-agenda::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; } .ag-tabela tr.ag-linha-hoje > td:first-child { box-shadow: inset 4px 0 0 var(--cor-principal); } .ag-tabela tr.ag-linha-cancelada .ag-td-assunto { text-decoration: line-through; color: #94A3B8; } .ag-colunas:empty { display: none; } .ag-colunas .btn { height: 36px; } /* ===================================================================== Agenda › editar agenda (6.3.0): identificação com prévia, cor e caixa de lápis ===================================================================== */ .ag-agenda-form { max-width: 980px; } .ag-agenda-form .card + .card { margin-top: 16px; } .ag-form-ident { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; } .ag-ident-campos { display: grid; gap: 12px; } .ag-ident-campos textarea { min-height: 70px; } .ag-previa { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px; padding: 14px; display: grid; gap: 10px; } .ag-previa-rotulo { font-size: 11.5px; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: .06em; } .ag-previa-ev { --c: #0F766E; display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border-left: 5px solid var(--c); background: color-mix(in srgb, var(--c) 16%, white); color: #0F172A; transition: background .2s, border-color .2s; } .ag-previa-hora { font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--c) 70%, #0F172A); } .ag-previa-ag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #475569; margin-top: 4px; } .ag-previa-ag i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .ag-form-cor { display: grid; gap: 18px; } .ag-cor-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ag-cor-topo h2 { margin: 0; } .ag-cor-escolhida { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; border: 1px solid #E2E8F0; border-radius: 999px; background: #fff; } .ag-cor-amostra { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18); transition: background .2s; } .ag-cor-texto { display: grid; line-height: 1.15; } .ag-cor-texto strong { font-size: 14px; } .ag-cor-texto small { font-size: 11.5px; color: #64748B; } .ag-cor-bloco { display: grid; gap: 10px; } .ag-paleta-titulo { font-size: 11.5px; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: .06em; } .ag-paleta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ag-swatch { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--s); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); transition: transform .12s, box-shadow .12s; } .ag-swatch:hover { transform: scale(1.1); } .ag-swatch.ativo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0F172A; } .ag-cor-livre { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(#EF4444, #F59E0B, #EAB308, #22C55E, #06B6D4, #3B82F6, #8B5CF6, #EC4899, #EF4444); color: #fff; font-weight: 800; font-size: 18px; text-shadow: 0 1px 2px rgba(0,0,0,.45); } .ag-cor-livre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* caixa de lápis: bandeja escura com 2 fileiras de 24 lápis, ponta para cima */ .ag-lapis-caixa { background: linear-gradient(180deg, #3B4A5E, #1E293B); border-radius: 16px; padding: 22px 18px 14px; box-shadow: inset 0 3px 10px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .6); overflow-x: auto; } .ag-lapis { display: grid; grid-template-columns: repeat(24, 22px); justify-content: center; gap: 18px 6px; align-items: end; min-width: max-content; } .ag-lapis-item { --s: #888; position: relative; display: flex; flex-direction: column; align-items: center; width: 22px; height: 78px; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .15s ease; justify-content: flex-end; } .ag-lapis-item:nth-child(odd) { height: 72px; } .ag-lapis-item::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -8px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .35); } .ag-lapis-ponta { width: 16px; height: 16px; background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.35) 40%, rgba(0,0,0,.15)), var(--s); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); } .ag-lapis-corpo { position: relative; width: 18px; flex: 1; border-radius: 2px 2px 4px 4px; background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.38) 32%, rgba(255,255,255,0) 58%, rgba(0,0,0,.24)), var(--s); } .ag-lapis-corpo::before, .ag-lapis-corpo::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: rgba(0, 0, 0, .22); } .ag-lapis-corpo::before { top: 9px; } .ag-lapis-corpo::after { bottom: 12px; } .ag-lapis-item:hover { transform: translateY(-6px); } .ag-lapis-item.ativo { transform: translateY(-12px); } .ag-lapis-item.ativo .ag-lapis-corpo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #60A5FA; } .ag-lapis-item:focus-visible { outline: 2px solid #93C5FD; outline-offset: 3px; border-radius: 4px; } /* compartilhar */ .ag-comp-cab { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) 34px; gap: 8px; font-size: 11.5px; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: .06em; padding: 0 2px 6px; } .ag-comp-linha { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) 34px; } @media (max-width: 760px) { .ag-form-ident { grid-template-columns: 1fr; } } .ag-lapis-item.ativo::before { content: ""; position: absolute; bottom: -17px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(96, 165, 250, .6); } /* ===================================================================== Seletor de cores do sistema (6.3.1) — Disco, Barras, Paletas e Lápis ===================================================================== */ dialog.seletor-cor { width: min(520px, calc(100vw - 20px)); padding: 0; overflow: hidden; border-radius: 18px; } dialog.seletor-cor.movida { position: fixed; } .sc-cab { display: flex; align-items: center; justify-content: center; position: relative; padding: 12px 44px 6px; background: #F8FAFC; } .sc-cab h2 { font-size: 15px; margin: 0; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-cab .ag-x { position: absolute; right: 10px; top: 8px; } .sc-abas { display: flex; justify-content: center; gap: 6px; padding: 4px 12px 12px; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; } .sc-abas button { display: grid; justify-items: center; gap: 4px; min-width: 76px; padding: 8px 10px 6px; border: 0; border-radius: 12px; background: none; cursor: pointer; font: inherit; font-size: 12px; color: #475569; } .sc-abas button:hover { background: #EEF2F7; } .sc-abas button[aria-selected="true"] { background: #fff; color: #0F172A; font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 0 0 1px #E2E8F0; } .sc-ico { width: 30px; height: 30px; display: block; } .sc-ico-disco { border-radius: 50%; background: radial-gradient(circle, #fff 0, rgba(255,255,255,0) 62%), conic-gradient(from 90deg, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); } .sc-ico-barras { display: grid; gap: 4px; align-content: center; } .sc-ico-barras i { height: 6px; border-radius: 3px; } .sc-ico-barras i:nth-child(1) { background: linear-gradient(90deg, #FECACA, #DC2626); } .sc-ico-barras i:nth-child(2) { background: linear-gradient(90deg, #BBF7D0, #16A34A); } .sc-ico-barras i:nth-child(3) { background: linear-gradient(90deg, #BFDBFE, #2563EB); } .sc-ico-paletas { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 2px; } .sc-ico-paletas i { border-radius: 4px; } .sc-ico-paletas i:nth-child(1) { background: #EF4444; } .sc-ico-paletas i:nth-child(2) { background: #22C55E; } .sc-ico-paletas i:nth-child(3) { background: #EAB308; } .sc-ico-paletas i:nth-child(4) { background: #3B82F6; } .sc-ico-lapis { display: flex; gap: 2px; align-items: flex-end; justify-content: center; } .sc-ico-lapis i { width: 4px; height: 24px; border-radius: 2px 2px 1px 1px; clip-path: polygon(50% 0, 100% 18%, 100% 100%, 0 100%, 0 18%); } .sc-ico-lapis i:nth-child(1) { background: #EF4444; height: 22px; } .sc-ico-lapis i:nth-child(2) { background: #F59E0B; } .sc-ico-lapis i:nth-child(3) { background: #22C55E; height: 26px; } .sc-ico-lapis i:nth-child(4) { background: #3B82F6; } .sc-ico-lapis i:nth-child(5) { background: #A855F7; height: 21px; } .sc-corpo { padding: 16px 18px 6px; min-height: 330px; } .sc-disco { position: relative; width: 260px; height: 260px; margin: 0 auto; } .sc-disco canvas { width: 100%; height: 100%; border-radius: 50%; cursor: crosshair; touch-action: none; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12), 0 6px 18px rgba(15, 23, 42, .12); } .sc-mira { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid #0F172A; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); } .sc-brilho-rot { display: grid; gap: 6px; margin-top: 16px; font-size: 12.5px; color: #475569; } .sc-brilho-rot input, .sc-barra input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); cursor: pointer; } .sc-brilho-rot input { --sc-claro: #fff; background: linear-gradient(90deg, var(--sc-claro), #000); } .sc-brilho-rot input::-webkit-slider-thumb, .sc-barra input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08); } .sc-brilho-rot input::-moz-range-thumb, .sc-barra input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); } .sc-barras { display: grid; gap: 18px; padding-top: 18px; } .sc-barra { display: grid; grid-template-columns: 70px minmax(0, 1fr) 72px; gap: 12px; align-items: center; font-size: 13px; color: #475569; } .sc-barra input[type="number"] { height: 34px; text-align: center; } [data-sc-paleta] { width: 100%; margin-bottom: 14px; } .sc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 8px; } .sc-amostrinha { aspect-ratio: 1; border: 0; border-radius: 9px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); transition: transform .1s; } .sc-amostrinha:hover { transform: scale(1.08); } .sc-amostrinha.ativo, .sc-recente.ativo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0F172A; } .sc-lapis-caixa { padding: 20px 10px 14px; } .sc-lapis { grid-template-columns: repeat(16, 22px); gap: 18px 4px; } .sc-lapis-nome { text-align: center; margin: 10px 0 0; font-size: 13px; font-weight: 700; color: #334155; } .sc-rodape { display: grid; grid-template-columns: 54px 40px 108px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid #E2E8F0; background: #F8FAFC; } .sc-amostra { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: 1fr 1fr; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15), 0 1px 3px rgba(15, 23, 42, .15); } .sc-conta-gotas { width: 40px; height: 40px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; cursor: pointer; color: #334155; display: inline-flex; align-items: center; justify-content: center; } .sc-conta-gotas:hover:not(:disabled) { background: #EFF6FF; color: #1D4ED8; } .sc-conta-gotas:disabled { opacity: .4; cursor: not-allowed; } .sc-hex { display: grid; gap: 3px; } .sc-hex label { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .05em; } .sc-hex input { height: 34px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; text-transform: uppercase; } .sc-recentes { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; } .sc-recente { aspect-ratio: 1; border: 0; border-radius: 5px; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); } .sc-recente.vazio { background: #fff; box-shadow: inset 0 0 0 1px #CBD5E1; cursor: default; } .sc-acoes { display: flex; align-items: center; gap: 8px; padding: 12px 18px 16px; } .sc-nome { flex: 1; font-size: 13px; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 520px) { .sc-rodape { grid-template-columns: 54px 40px 1fr; } .sc-recentes { grid-column: 1 / -1; } .sc-lapis { grid-template-columns: repeat(12, 22px); } .sc-abas button { min-width: 0; flex: 1; } } /* Mês: "+N mais" abre o dia inteiro por cima do quadro (6.3.2) */ .ag-dia { position: relative; } .ag-mais-itens { border: 0; background: #EEF2F7; border-radius: 6px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; color: #334155; padding: 2px 8px; align-self: flex-start; margin-top: 2px; } .ag-mais-itens:hover, .ag-mais-itens[aria-expanded="true"] { background: #DBEAFE; color: #1D4ED8; } .ag-dia-pop { position: absolute; z-index: 40; top: -8px; left: -8px; width: max(calc(100% + 16px), 270px); max-height: 380px; display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px rgba(15, 23, 42, .28), 0 0 0 1px rgba(15, 23, 42, .08); animation: ag-pop .14s ease-out; } .ag-dia-pop[hidden] { display: none; } .ag-dia-pop.a-direita { left: auto; right: -8px; } .ag-dia-pop.para-cima { top: auto; bottom: -8px; } @keyframes ag-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } } .ag-dia-pop-cab { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-bottom: 1px solid #EEF2F7; background: #F8FAFC; } .ag-dia-pop-data { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .ag-dia-pop-data > strong { font-size: 26px; line-height: 1; color: #0F172A; } .ag-dia-pop-data > span { display: grid; font-weight: 700; font-size: 13px; color: #334155; } .ag-dia-pop-data small { font-weight: 500; font-size: 11.5px; color: #64748B; text-transform: none; } .ag-dia-pop-ver { font-size: 12px; font-weight: 700; color: var(--cor-principal); text-decoration: none; white-space: nowrap; } .ag-dia-pop-ver:hover { text-decoration: underline; } .ag-dia-pop-lista { padding: 8px; overflow-y: auto; display: grid; gap: 4px; } .ag-dia-pop-lista .ag-ev { margin: 0; } .ag-mes:has(.ag-dia-pop:not([hidden])) { overflow: visible; } .ag-dia-pop.saindo { opacity: 0; pointer-events: none; } /* editar agenda: cor numa linha só (6.3.2) */ .ag-form-cor { display: block; } .ag-cor-linha { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ag-cor-linha h2 { margin: 0; } .ag-cor-linha .ag-paleta { flex: 1; gap: 8px; } .ag-cor-linha .ag-swatch { width: 28px; height: 28px; } /* ===================================================================== Agenda › ver e editar compromisso em cartão compacto (estilo QuickAdd) — 6.4.0 ===================================================================== */ .ag-cartao { --c: #2563EB; max-width: 660px; margin: 8px auto 24px; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .10), 0 0 0 1px #E2E8F0; } .ag-cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 12px 18px; border-radius: 18px 18px 0 0; background: #F8FAFC; border-bottom: 1px solid #EEF2F7; } .ag-cartao-ver .ag-cartao-cab { background: color-mix(in srgb, var(--c) 12%, white); border-bottom: 0; box-shadow: inset 0 4px 0 var(--c); } .ag-cartao-cab-form h1 { font-size: 17px; margin: 0; } .ag-cartao-cab-form small { color: #64748B; font-size: 12.5px; } .ag-cartao-agenda { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #334155; } .ag-cartao-agenda i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); } .ag-cartao-agenda small { font-weight: 500; color: #64748B; } .ag-cartao .ag-x { text-decoration: none; } .ag-cartao-titulo { padding: 4px 22px 10px; background: color-mix(in srgb, var(--c) 12%, white); } .ag-cartao-titulo h1 { font-size: 21px; margin: 0 0 4px; line-height: 1.25; } .ag-cartao-quando { margin: 0; color: #334155; font-size: 14px; } .ag-cartao-aviso { margin: 12px 18px 0; } .ag-qa { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 16px 22px 8px; margin: 0; } .ag-qa > label, .ag-qa > .ag-qa-rot, .ag-qa > dt { text-align: right; color: #475569; font-size: 13.5px; font-weight: 500; } .ag-qa > label b { color: #DC2626; margin-left: 2px; } .ag-qa > dd { margin: 0; font-size: 14px; color: #0F172A; } .ag-qa-ver { align-items: baseline; gap: 9px 14px; } .ag-qa-texto { white-space: pre-line; } .ag-qa .inp, .ag-qa select, .ag-qa input:not([type="checkbox"]):not([type="radio"]), .ag-qa textarea { width: 100%; min-width: 0; height: 36px; font-size: 14px; } .ag-qa textarea { height: auto; min-height: 64px; } .ag-qa #id_titulo { background: #FEFCE8; } .ag-qa-par { display: flex; gap: 10px; align-items: center; } .ag-qa-par > select { flex: 1; } .ag-qa-par > label { white-space: nowrap; color: #475569; font-size: 13.5px; } .ag-qa-quando { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ag-qa-quando input[type="date"] { width: auto !important; flex: 1 1 150px; } .ag-qa-hora { display: inline-flex; align-items: center; gap: 8px; } .ag-qa-hora input[type="time"] { width: 112px !important; } .ag-qa-hora > span { color: #64748B; } .ag-qa-quando .chk { margin-left: 4px; white-space: nowrap; } .ag-qa .ag-duracoes .btn { height: 28px; } .ag-qa .ag-repeticao { margin-top: 8px; padding: 10px; } .ag-qa .ag-rep-linha .inp[type=number] { width: 72px; } .ag-qa .ag-rep-linha input[type=date] { width: auto; } .ag-qa .chips-escolha { gap: 6px; } .ag-qa-mais { margin: 4px 22px 0; border-top: 1px solid #EEF2F7; padding-top: 10px; } .ag-qa-mais > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: #334155; padding: 4px 0; } .ag-qa-mais .ag-qa { padding: 10px 0 4px; } .ag-cartao-autoria { margin: 4px 22px 0; color: #94A3B8; font-size: 12px; } .ag-cartao-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px 16px; margin-top: 12px; border-top: 1px solid #EEF2F7; } .ag-cartao-esq, .ag-cartao-dir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ag-cartao-esq form { margin: 0; } .ag-cartao .ag-situacoes { display: flex; gap: 6px; flex-wrap: wrap; } .ag-cartao .ag-situacoes form { margin: 0; } @media (max-width: 560px) { .ag-qa { grid-template-columns: 1fr; gap: 4px 0; } .ag-qa > label, .ag-qa > .ag-qa-rot, .ag-qa > dt { text-align: left; margin-top: 6px; } } .ag-cartao .ag-qa .inp, .ag-cartao .ag-qa select, .ag-cartao .ag-qa input[type="text"], .ag-cartao .ag-qa input[type="date"], .ag-cartao .ag-qa input[type="time"], .ag-cartao .ag-qa input[type="number"] { height: 34px; min-height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; } .ag-cartao .ag-qa textarea { height: auto; min-height: 60px; } .ag-cartao .ag-qa-hora input[type="time"] { width: 120px !important; } .ag-cartao .ag-qa { gap: 8px 14px; } /* ===================================================================== E-mail (6.4.0): pastas | lista | leitura ===================================================================== */ .em-tela { display: grid; grid-template-columns: 210px minmax(300px, 380px) minmax(0, 1fr); gap: 0; height: calc(100vh - 110px); min-height: 520px; background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .05); } .em-pastas { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px; background: #F8FAFC; border-right: 1px solid #E2E8F0; min-height: 0; } .em-escrever { justify-content: center; gap: 6px; } .em-pastas-lista { display: grid; gap: 2px; overflow-y: auto; min-height: 0; flex: 1; align-content: start; } .em-pasta { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px calc(10px + var(--nivel, 0) * 12px); border-radius: 9px; color: #334155; text-decoration: none; font-size: 14px; } .em-pasta:hover { background: #EEF2F7; } .em-pasta.ativa { background: #DBEAFE; color: #1D4ED8; font-weight: 700; } .em-pasta-nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .em-pasta b { font-size: 11.5px; background: #2563EB; color: #fff; border-radius: 999px; padding: 1px 7px; } .em-pasta-ico { width: 16px; height: 16px; flex: none; background: currentColor; opacity: .75; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; --ico: 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 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .em-pasta.tipo-entrada .em-pasta-ico { --ico: 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 12h-6l-2 3h-4l-2-3H2M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); } .em-pasta.tipo-enviados .em-pasta-ico { --ico: 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 2L11 13M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E"); } .em-pasta.tipo-rascunhos .em-pasta-ico { --ico: 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 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); } .em-pasta.tipo-lixeira .em-pasta-ico { --ico: 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 6h18M8 6V4h8v2M19 6l-1 14H6L5 6'/%3E%3C/svg%3E"); } .em-pasta.tipo-spam .em-pasta-ico { --ico: 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='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E"); } .em-conta { display: grid; gap: 2px; font-size: 12px; color: #64748B; padding: 8px 6px 0; border-top: 1px solid #E2E8F0; } .em-conta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .em-conta a { color: var(--cor-principal); font-weight: 600; text-decoration: none; } .em-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #E2E8F0; } .em-busca { padding: 12px 12px 6px; } .em-busca .inp { width: 100%; min-height: 36px; height: 36px; font-size: 14px; } .em-lista-cab { display: flex; align-items: center; gap: 8px; padding: 4px 14px 8px; border-bottom: 1px solid #EEF2F7; } .em-lista-cab strong { font-size: 15px; } .em-lista-cab .hint { flex: 1; } .em-atualizar { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; color: #475569; } .em-atualizar:hover { background: #EEF2F7; color: #1D4ED8; } .em-erro { margin: 8px 12px; } .em-itens { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; } .em-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px 14px 10px 18px; text-decoration: none; color: #334155; border-bottom: 1px solid #F1F5F9; position: relative; } .em-item:hover { background: #F8FAFC; } .em-item.ativa { background: #EFF6FF; box-shadow: inset 3px 0 0 #2563EB; } .em-item.nova::before { content: ""; position: absolute; left: 6px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: #2563EB; } .em-item-de { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0F172A; } .em-item.nova .em-item-de, .em-item.nova .em-item-assunto { font-weight: 700; } .em-item-quando { font-size: 12px; color: #64748B; text-align: right; } .em-item.nova .em-item-quando { color: #1D4ED8; font-weight: 700; } .em-item-assunto { font-size: 13px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .em-item-icones { font-size: 12px; display: flex; gap: 4px; justify-content: flex-end; } .em-bandeira { color: #DC2626; } .em-resp { color: #64748B; } .em-vazio { padding: 30px 16px; text-align: center; color: #64748B; font-size: 14px; } .em-paginas { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #EEF2F7; } .em-leitura { overflow-y: auto; min-height: 0; padding: 0 0 20px; } .em-nada { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; color: #94A3B8; } .em-nada p { margin: 0; font-size: 14px; } .em-msg-cab { position: sticky; top: 0; z-index: 2; background: #fff; padding: 16px 20px 12px; border-bottom: 1px solid #EEF2F7; display: grid; gap: 10px; } .em-msg-topo { display: flex; align-items: flex-start; gap: 10px; } .em-msg-topo h2 { font-size: 19px; margin: 0; line-height: 1.3; word-break: break-word; } .em-voltar { display: none; text-decoration: none; font-weight: 700; color: var(--cor-principal); white-space: nowrap; } .em-msg-de { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; } .em-avatar { width: 38px; height: 38px; border-radius: 50%; background: #DBEAFE; color: #1D4ED8; display: grid; place-content: center; font-weight: 800; } .em-msg-quem { min-width: 0; font-size: 14px; } .em-msg-quem small { display: block; color: #64748B; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .em-msg-data { font-size: 12.5px; color: #64748B; white-space: nowrap; } .em-msg-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .em-msg-acoes form { margin: 0; } .em-sep { width: 1px; height: 22px; background: #E2E8F0; margin: 0 4px; } .em-pop .lt-pop { min-width: 260px; } .em-pop .lt-pop form { display: grid; gap: 8px; } .em-ligar .lt-pop { min-width: 320px; } .em-pop-rot { font-size: 12px; font-weight: 700; color: #475569; } .em-anexos { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 0; } .em-anexo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #E2E8F0; border-radius: 10px; text-decoration: none; color: #0F172A; font-size: 13px; background: #F8FAFC; max-width: 100%; } .em-anexo:hover { border-color: #93C5FD; background: #EFF6FF; } .em-anexo small { color: #64748B; } .em-aviso-img { margin: 12px 20px 0; padding: 8px 12px; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .em-aviso-img[hidden] { display: none; } .em-corpo { display: block; width: calc(100% - 40px); margin: 14px 20px 0; border: 0; min-height: 160px; background: #fff; } /* escrever e conta */ .em-escrever-form { max-width: 820px; } .em-para { display: flex; gap: 8px; align-items: center; } .em-para .inp { flex: 1; } .em-cc-botao { border: 0; background: none; color: var(--cor-principal); font-weight: 700; cursor: pointer; white-space: nowrap; font: inherit; font-size: 13px; } .em-corpo-escrever { padding: 4px 22px 0; } .em-corpo-escrever textarea { width: 100%; min-height: 300px; font: 14px/1.55 var(--fonte); resize: vertical; padding: 12px; } .em-incluir { display: grid; gap: 4px; } .em-grupo { grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #64748B; border-top: 1px solid #EEF2F7; padding-top: 12px; margin-top: 4px; } .em-dica { margin: 4px 22px 0; } .ag-qa [data-em-cc-linha][hidden] { display: none; } @media (max-width: 1100px) { .em-tela { grid-template-columns: 190px minmax(0, 1fr); } .em-leitura { display: none; } .em-tela.com-aberta { grid-template-columns: 1fr; } .em-tela.com-aberta .em-pastas, .em-tela.com-aberta .em-lista { display: none; } .em-tela.com-aberta .em-leitura { display: block; } .em-voltar { display: inline; } } @media (max-width: 700px) { .em-tela { grid-template-columns: 1fr; height: auto; } .em-pastas { border-right: 0; border-bottom: 1px solid #E2E8F0; } .em-pastas-lista { display: flex; overflow-x: auto; } } /* Agenda: compromisso em pop-up (6.4.1) */ dialog.ag-janela-comp { width: min(700px, calc(100vw - 20px)); max-height: 94vh; padding: 0; border: 0; border-radius: 18px; overflow: auto; background: #fff; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); } dialog.ag-janela-comp::backdrop { background: rgba(15, 23, 42, .45); } dialog.ag-janela-comp iframe { display: block; width: 100%; height: 320px; border: 0; transition: height .15s ease; } body.embed { background: #fff; min-height: 0; } body.embed .conteudo-embed { padding: 0; } body.embed .ag-cartao { margin: 0; max-width: none; border-radius: 0; box-shadow: none; } body.embed .ag-cartao-cab { border-radius: 0; } body.embed .ag-cartao-rodape .lt-pop { top: auto; bottom: calc(100% + 6px); } /* aviso de e-mail novo (6.4.2): mesma janela dos lembretes, no alto à direita e em verde-azulado */ .emails-tela { top: 76px; bottom: auto; } .emails-tela .lt-cab { background: linear-gradient(135deg, #0F766E, #0E7490); } .emails-tela .lt-item { --c: #0E7490; } .em-aviso-de { font-size: 12.5px; font-weight: 700; color: #0E7490; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emails-tela .lt-acoes .btn { text-align: center; } .opcoes-lista { display: grid; gap: 6px; } /* Ver Relatório / Laudo: barra de botões, avisos e quadros na mesma coluna do documento (6.5.3) */ #conteudo:has(> article.documento) > :not(script) { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; } #conteudo:has(> article.documento) > .barra-acoes-rel { margin-bottom: 12px; padding: 10px 0; } #conteudo:has(> article.documento) > .barra-acoes-rel > .acoes { justify-content: flex-end; flex-wrap: wrap; } #conteudo:has(> article.documento) > .barra-acoes-rel > div:empty { display: none; } #conteudo:has(> article.documento) > .barra-acoes-rel:has(> div:empty) { justify-content: flex-end; } @media print { #conteudo:has(> article.documento) > * { max-width: none; } } /* ===================================================================== Checklists (6.6.0) ===================================================================== */ /* tela do relatório: horários sozinhos (sem assinaturas) ou com o checklist ao lado */ .doc-inferior { grid-template-columns: 60fr 40fr; } .doc-inferior:not(:has(.doc-checklist)) { grid-template-columns: 1fr; } .doc-chk + .doc-chk { margin-top: 10px; } .doc-chk strong { font-size: 13px; } .doc-chk-conta { font-size: 12px; color: #64748B; } .doc-chk ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; } .doc-chk li { display: flex; gap: 7px; align-items: flex-start; } .doc-chk li.pendente { color: #64748B; } .doc-chk-grupo { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748B; margin-top: 4px; } .doc-chk-caixa { flex: none; width: 14px; height: 14px; margin-top: 2px; border: 1.5px solid #94A3B8; border-radius: 3px; font-size: 10px; line-height: 11px; text-align: center; color: #fff; } .doc-chk li.feito .doc-chk-caixa { background: #15803D; border-color: #15803D; } /* formulário do relatório */ .rel-checklist .chk-escolher { max-width: 320px; } .chk-rel-bloco { border: 1px solid #E2E8F0; border-radius: 12px; padding: 10px 12px; margin-top: 10px; } .chk-rel-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chk-rel-cab strong { font-size: 15px; } .chk-rel-conta { font-size: 12px; font-weight: 700; background: #F1F5F9; color: #475569; border-radius: 999px; padding: 2px 9px; } .chk-rel-conta.completo { background: #DCFCE7; color: #15803D; } .chk-rel-esp { flex: 1; } .chk-rel-grupo { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748B; margin: 10px 0 2px; } .chk-rel-itens { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; } .chk-rel-itens li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px 8px; padding: 4px 6px; border-radius: 8px; } .chk-rel-itens li:hover { background: #F8FAFC; } .chk-rel-item { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; font-size: 14px; } .chk-rel-item input { width: 18px; height: 18px; margin-top: 1px; accent-color: #15803D; flex: none; cursor: pointer; } .chk-rel-itens li.feito .chk-rel-item span { color: #64748B; text-decoration: line-through; text-decoration-color: #94A3B8; } .chk-rel-ajuda { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #CBD5E1; background: #fff; color: #475569; font-weight: 800; font-size: 12px; cursor: pointer; } .chk-rel-ajuda[aria-expanded="true"] { background: #DBEAFE; border-color: #93C5FD; color: #1D4ED8; } .chk-rel-orientacao { grid-column: 1 / -1; margin: 2px 0 4px 27px; padding: 8px 10px; background: #F8FAFC; border-left: 3px solid #93C5FD; border-radius: 0 8px 8px 0; font-size: 13px; color: #334155; white-space: pre-line; } /* lista e guia */ .chk-guia { max-width: 900px; margin: 0 auto; } .chk-guia-cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; } .chk-guia-cab h1 { margin: 0 0 4px; } .chk-desc { margin: 0 0 4px; color: #334155; } .chk-dica { margin: 0 0 10px; } .chk-grupo { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; } .chk-grupo h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #475569; margin: 0 0 6px; } .chk-itens { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: chk; display: grid; gap: 2px; } .chk-linha { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 4px; border-radius: 8px; } .chk-linha:hover { background: #F8FAFC; } .chk-linha .chk-marca { width: 18px; height: 18px; margin-top: 2px; accent-color: #15803D; } .chk-linha:has(.chk-marca:checked) .chk-item summary span:first-child, .chk-linha:has(.chk-marca:checked) .chk-item-texto { text-decoration: line-through; color: #64748B; } .chk-item summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; list-style: none; font-size: 14.5px; } .chk-item summary::-webkit-details-marker { display: none; } .chk-item-texto { font-size: 14.5px; } .chk-mais { font-size: 11.5px; font-weight: 700; color: #1D4ED8; white-space: nowrap; } .chk-item[open] .chk-mais { color: #64748B; } .chk-orientacao { margin: 6px 0 4px; padding: 8px 12px; background: #F8FAFC; border-left: 3px solid #93C5FD; border-radius: 0 8px 8px 0; font-size: 13.5px; color: #334155; } @media print { .chk-orientacao { display: block !important; } .chk-item:not([open]) .chk-orientacao { display: block; } .chk-mais { display: none; } } /* editor de itens */ .chk-opcoes { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; min-height: 42px; } .chk-ed-cab, .chk-ed-linha { display: grid; grid-template-columns: 22px minmax(120px, .8fr) minmax(200px, 1.6fr) minmax(200px, 1.6fr) 96px; gap: 8px; align-items: start; } .chk-ed-cab { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748B; padding: 8px 0 4px; } .chk-ed { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; } .chk-ed-linha { padding: 6px; border-radius: 10px; background: #F8FAFC; } .chk-ed-linha.arrastando { opacity: .5; } .chk-ed-linha .inp { min-height: 38px; font-size: 14px; } .chk-ed-linha textarea.inp { resize: vertical; min-height: 38px; padding-top: 8px; } .chk-alca { cursor: grab; color: #94A3B8; font-size: 18px; line-height: 38px; text-align: center; user-select: none; } .chk-ed-botoes { display: flex; gap: 4px; padding-top: 3px; } .chk-ed-botoes .btn-icone { width: 30px; height: 32px; border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; cursor: pointer; } @media (max-width: 900px) { .chk-ed-cab { display: none; } .chk-ed-linha { grid-template-columns: 22px 1fr; } .chk-ed-linha > :not(.chk-alca) { grid-column: 2; } }