/* ========================================================== HELPDESK PROTURBO — style.css Sistema de botões global + layout mobile-first + SLA ========================================================== */ /* ===== Fontes do site (arquivos em assets/fonts; licença SIL Open Font License) ===== */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-latin.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); } :root { --bg: #f3f6fa; /* cinza levemente azulado */ --surface: #ffffff; --border: #e2e8f0; --text: #132033; --texto: var(--text); /* apelido usado em estilos das páginas */ --muted: #5b6a80; --primary: #2163a8; /* azul escuro do logo Proturbo */ --primary-2: #2a9bd1; /* azul-ciano do logo (gradientes e destaques) */ --primary-soft: #e7f0fa; --fonte: 'Figtree', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif; --fonte-titulo: 'Manrope', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --radius: 10px; --radius-btn: 8px; --shadow: 0 1px 2px rgba(16, 32, 51, .05), 0 4px 14px rgba(16, 32, 51, .05); --shadow-lg: 0 12px 36px rgba(16, 32, 51, .12); --focus: 3px solid rgba(33, 99, 168, .4); --logo-height: 40px; --auth-logo-height: 56px; --toque-min: 44px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--fonte); background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; font-size: 16px; } a { color: var(--primary); text-decoration: none; } img { max-width: 100%; height: auto; } /* ========================================================== RESET DE CONTROLES ========================================================== */ button, input, select, textarea { font-family: inherit; font-size: inherit; } button { appearance: none; -webkit-appearance: none; border: none; background: none; color: inherit; } input, select, textarea { color: var(--text); } /* ========================================================== CONTAINER ========================================================== */ .container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 24px clamp(14px, 3vw, 20px); } /* ========================================================== BARRA SUPERIOR ========================================================== */ .topbar { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(12px, 2vw, 20px); } .brand { display: flex; align-items: center; flex-shrink: 0; } .brand-logo { height: var(--logo-height); width: auto; display: block; max-width: min(220px, 45vw); object-fit: contain; } .nav { display: flex; gap: 4px; align-items: center; } .nav a { color: var(--muted); padding: 10px 14px; border-radius: 9px; font-weight: 500; font-size: 15px; transition: .15s; white-space: nowrap; min-height: var(--toque-min); display: inline-flex; align-items: center; } .nav a:hover { color: var(--primary); background: var(--primary-soft); } .nav a.nav-cta { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; } .nav a.nav-cta:hover { color: #fff; opacity: .92; } .nav-user { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--primary-2)); } .nav-user-info { line-height: 1.15; } .nav-user-info strong { font-size: 13px; display: block; } .nav-user-info small { color: var(--muted); font-size: 11px; text-transform: capitalize; } .nav .btn { white-space: nowrap; } .nav .btn-outline { background: #fff; } .nav-user .btn { margin-left: 10px; } .nav-user .btn:first-of-type { margin-left: 16px; } /* ===== Botão hambúrguer (oculto no desktop) ===== */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; flex-shrink: 0; } .nav-toggle span { display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--primary); transition: transform .2s ease, opacity .2s ease; } .nav-toggle.ativo span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle.ativo span:nth-child(2) { opacity: 0; } .nav-toggle.ativo span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ========================================================== SISTEMA DE BOTÕES ========================================================== */ .btn, button[type="submit"], .formulario button, form button, .pesquisa-box button, .auth-box button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; border-radius: var(--radius-btn); font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap; transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .12s; border: 1px solid transparent; } .btn:focus-visible, button[type="submit"]:focus-visible, form button:focus-visible, a.btn:focus-visible, .filtro button:focus-visible { outline: none; box-shadow: var(--focus); } .btn, button[type="submit"], .formulario button:not(.btn-ghost), form button:not(.btn-ghost), .auth-box button { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; box-shadow: 0 2px 6px rgba(33, 99, 168, .25); } .btn:hover, button[type="submit"]:hover, .formulario button:not(.btn-ghost):hover, .auth-box button:hover { background: linear-gradient(135deg, #1b5590, #1f86b8); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .btn:active, button[type="submit"]:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(33, 99, 168,.3); } .btn:disabled, button[type="submit"]:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn-outline { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); } .btn-outline:hover { background: var(--primary-soft); border-color: var(--primary-2); color: var(--primary-2); } .btn-ghost { background: transparent; color: var(--muted); border: 1.5px solid var(--border); } .btn-ghost:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); } /* Vermelho vence a regra geral de botão em formulário (.formulario button / form button), que tem mais peso que .btn-danger */ .btn-danger, .formulario button.btn-danger, form button.btn-danger { background: linear-gradient(135deg, var(--danger), #dc2626); color: #fff; box-shadow: 0 2px 6px rgba(239,68,68,.25); } .btn-danger:hover, .formulario button.btn-danger:hover, form button.btn-danger:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); box-shadow: 0 8px 20px rgba(239,68,68,.3); } .btn-success { background: linear-gradient(135deg, var(--success), #059669); color: #fff; } .btn-sm { min-height: 34px; padding: 5px 12px; font-size: 13px; border-radius: 8px; } .btn-lg { min-height: 52px; padding: 14px 28px; font-size: 16px; } .btn-block { width: 100%; } .inline-form { display: inline; margin: 0; } td .inline-form .btn { margin: 0; } .page-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .form-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } /* .formulario button (mais abaixo) põe margin-top; dentro da barra de ações o botão e o link Cancelar ficam na mesma linha */ .form-acoes > button, .formulario .form-acoes > button, .form-acoes > .btn { margin-top: 0; } /* ========================================================== ALERTAS ========================================================== */ .alert { padding: 13px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 14px; line-height: 1.5; } .alert-sucesso { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .alert-erro { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .alert-aviso { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; } /* ========================================================== TÍTULOS E CABEÇALHOS DE PÁGINA ========================================================== */ h2 { margin: 8px 0 18px; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.3; } h3 { margin: 22px 0 12px; font-size: clamp(16px, 1.8vw, 18px); } .page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; } .page-head h2 { margin: 0; } /* ========================================================== CARDS DO PAINEL ========================================================== */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .card .card-label { color: var(--muted); font-size: 13px; } .card .card-value { font-size: clamp(26px, 3vw, 32px); font-weight: 800; margin-top: 4px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: break-word; } /* ========================================================== TABELAS ========================================================== */ .tabela { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .tabela th, .tabela td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; } .tabela th { background: #fafbfe; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .tabela tr:last-child td { border-bottom: none; } .tabela tbody tr:hover { background: #fafbff; } .tabela td .btn { vertical-align: middle; } .tabela td:last-child { white-space: nowrap; } /* Coluna do envelope: ocupa o menor espaço possível */ .tabela:has(.msg-icone) th:first-child, .tabela:has(.msg-icone) td:first-child { width: 1px; white-space: nowrap; padding: 8px 4px; text-align: center; } /* ========================================================== BADGES ========================================================== */ .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge-prio-baixa { background: #f3f4f6; color: #4b5563; } .badge-prio-media { background: #fef3c7; color: #92400e; } .badge-prio-alta { background: #ffedd5; color: #c2410c; } .badge-prio-urgente { background: #fee2e2; color: #b91c1c; } .badge-prio-critico { background: #1f2937; color: #f9fafb; } .badge-cor-azul { background: #dbeafe; color: #1e40af; } .badge-cor-verde { background: #d1fae5; color: #065f46; } .badge-cor-amarelo { background: #fef3c7; color: #92400e; } .badge-cor-laranja { background: #ffedd5; color: #c2410c; } .badge-cor-vermelho { background: #fee2e2; color: #b91c1c; } .badge-cor-roxo { background: #ede9fe; color: #5b21b6; } .badge-cor-rosa { background: #fce7f3; color: #9d174d; } .badge-cor-cinza { background: #e5e7eb; color: #374151; } .badge-cor-ciano { background: #cffafe; color: #155e75; } .badge-cor-escuro { background: #1f2937; color: #f9fafb; } /* ========================================================== INDICADOR DE ÚLTIMA MENSAGEM (ENVELOPE) ========================================================== */ .msg-icone { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; background: #f1f5f9; color: var(--muted); } .msg-icone.verde { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; } .msg-icone.vermelho { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; } .msg-icone.vazio { background: transparent; font-size: 14px; } .icone-legenda { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 12px; } .icone-legenda .item { display: inline-flex; align-items: center; gap: 8px; } .icone-legenda .msg-icone { width: 26px; height: 26px; border-radius: 8px; } /* ========================================================== FORMULÁRIOS ========================================================== */ .formulario { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; display: block; } main.container > .formulario { margin-left: auto; margin-right: auto; } .formulario label { display: block; margin-bottom: 16px; font-weight: 600; font-size: 14px; } .formulario input, .formulario select, .formulario textarea { width: 100%; min-height: 44px; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 16px; background: #fbfcfe; transition: .15s; } .formulario input:focus, .formulario select:focus, .formulario textarea:focus, .formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background: #fff; } .formulario button, .form-emails button, .auth-box button { margin-top: 8px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-hint { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 6px; line-height: 1.5; } .checks-inline { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; } .checks-inline label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; min-height: 36px; } .checks-inline input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); } .cor-opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .cor-opcoes label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; min-height: 36px; } .cor-opcoes input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); } /* ========================================================== INTERRUPTOR ========================================================== */ .campo-email .campo-email-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .campo-email .campo-email-topo > label:first-child { display: block; margin: 0; font-size: 15px; font-weight: 600; } .rotulo-campo { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 0 4px; } .campo-email .switch { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; position: relative; margin: 0; cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap; user-select: none; } .campo-email .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; } .campo-email .switch .trilho { position: relative; display: block; width: 46px; height: 26px; flex: 0 0 auto; border-radius: 999px; background: #cbd5e1; transition: background .18s; } .campo-email .switch .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .3); transition: transform .18s; } .campo-email .switch input:checked + .trilho { background: var(--success); } .campo-email .switch input:checked + .trilho::after { transform: translateX(20px); } .campo-email .switch input:focus-visible + .trilho { box-shadow: var(--focus); } .campo-email .switch .texto { display: inline-flex; align-items: center; line-height: 1.2; } .campo-email .switch .texto .on { display: none; color: #047857; } .campo-email .switch .texto .off { display: inline; color: var(--muted); } .campo-email .switch input:checked ~ .texto .on { display: inline; } .campo-email .switch input:checked ~ .texto .off { display: none; } /* ========================================================== CAMPO ATIVO/INATIVO — padrão das telas de configuração (gerado por campo_ativo() em includes/functions.php). !important só onde as telas têm regras locais para label/input. ========================================================== */ label.campo-ativo { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; width: 100%; box-sizing: border-box; margin: 16px 0 !important; padding: 14px 18px !important; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff); cursor: pointer; font-size: 15px !important; font-weight: 600; line-height: 1.3; transition: border-color .15s; } label.campo-ativo:hover { border-color: var(--primary); } .campo-ativo-titulo { color: var(--text); } .switch-ativo { display: inline-flex; align-items: center; gap: 10px; position: relative; flex: 0 0 auto; font-size: 14px; font-weight: 700; white-space: nowrap; user-select: none; } .campo-ativo .switch-ativo input[type="checkbox"] { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; } .switch-ativo .trilho { position: relative; display: block; width: 46px; height: 26px; flex: 0 0 auto; border-radius: 999px; background: #cbd5e1; transition: background .18s; } .switch-ativo .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .3); transition: transform .18s; } .switch-ativo input:checked + .trilho { background: var(--success); } .switch-ativo input:checked + .trilho::after { transform: translateX(20px); } .switch-ativo input:focus-visible + .trilho { box-shadow: 0 0 0 3px rgba(33, 99, 168, .35); } .switch-ativo .texto { min-width: 58px; } .switch-ativo .texto .on { display: none; color: #047857; } .switch-ativo .texto .off { display: inline; color: var(--muted); } .switch-ativo input:checked ~ .texto .on { display: inline; } .switch-ativo input:checked ~ .texto .off { display: none; } [data-theme="escuro"] label.campo-ativo { background: #0f1620; border-color: var(--border); } [data-theme="escuro"] label.campo-ativo:hover { border-color: #4f9de8; } [data-theme="escuro"] .campo-ativo-titulo { color: var(--text) !important; } [data-theme="escuro"] .switch-ativo .trilho { background: #374151; } [data-theme="escuro"] .switch-ativo input:checked + .trilho { background: #10b981; } [data-theme="escuro"] .switch-ativo .texto .on { color: #6ee7b7; } [data-theme="escuro"] .switch-ativo .texto .off { color: #9aa3b2; } /* ========================================================== NOME CLICÁVEL + CARTÃO DE PERFIL (nome_perfil() / footer.php) ========================================================== */ .nome-perfil { all: unset; display: inline; font: inherit; color: inherit; cursor: pointer; border-radius: 4px; text-underline-offset: 3px; } .nome-perfil:hover { text-decoration: underline; color: var(--primary); } .nome-perfil:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .perfil-cartao-camada { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .45); } .perfil-cartao { position: relative; width: 100%; max-width: 300px; box-sizing: border-box; padding: 32px 24px 26px; border-radius: 18px; background: var(--surface, #fff); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(16, 24, 40, .28); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; animation: perfil-cartao-in .18s ease-out; } @keyframes perfil-cartao-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } .perfil-cartao-foto, .perfil-cartao-inicial { width: 140px; height: 140px; border-radius: 50%; margin-bottom: 10px; box-shadow: 0 0 0 4px var(--surface, #fff), 0 0 0 6px var(--primary-soft, #e7f0fa); } .perfil-cartao-foto { object-fit: cover; display: block; } .perfil-cartao-inicial { display: grid; place-items: center; font-size: 56px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); } .perfil-cartao-nome { font-size: 18px; color: var(--text); } .perfil-cartao-rotulo { font-size: 14px; color: var(--muted); } .perfil-cartao-fechar { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; } .perfil-cartao-fechar:hover { background: var(--primary-soft, #e7f0fa); color: var(--text); } @media (prefers-reduced-motion: reduce) { .perfil-cartao { animation: none; } } /* O atributo hidden precisa vencer os display:flex/grid/block acima */ .perfil-cartao-camada[hidden], .perfil-cartao [hidden] { display: none !important; } [data-theme="escuro"] .perfil-cartao { background: #141c27; border-color: #233041; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); } [data-theme="escuro"] .perfil-cartao-foto, [data-theme="escuro"] .perfil-cartao-inicial { box-shadow: 0 0 0 4px #141c27, 0 0 0 6px #15253a; } [data-theme="escuro"] .perfil-cartao-fechar:hover { background: #15253a; } /* ========================================================== DETALHES DO CHAMADO ========================================================== */ .detalhes { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 20px; } .detalhes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; } .detalhes-grid .campo label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .detalhes-grid .campo strong { font-size: 14px; overflow-wrap: break-word; } .descricao { padding-top: 14px; border-top: 1px solid var(--border); overflow-wrap: break-word; } .descricao strong { display: block; margin-bottom: 6px; } /* ========================================================== HISTÓRICO ========================================================== */ .historico { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .msg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); overflow-wrap: break-word; } .msg .msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .msg .msg-head strong { font-size: 14px; } .msg .msg-head .data { color: var(--muted); font-size: 12px; } .msg p { font-size: 14px; } /* Texto com formatação (texto_formatado() no PHP): mensagens do chamado e pré-visualização */ .texto-fmt { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; } .texto-fmt p { margin: 0 0 6px; } .texto-fmt > :last-child { margin-bottom: 0; } .texto-fmt ul, .texto-fmt ol { margin: 4px 0 8px; padding-left: 22px; } .texto-fmt li { margin: 1px 0; } .texto-fmt code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; padding: 1px 5px; border-radius: 4px; background: var(--bg); color: var(--primary); border: 1px solid var(--border); } .texto-fmt pre { margin: 6px 0 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; line-height: 1.45; white-space: pre; overflow-x: auto; } .texto-fmt a { color: var(--primary); text-decoration: underline; } /* Barra de formatação (assets/js/editor_texto.js) */ /* Lista do @ para citar pessoas (assets/js/mencao.js) */ .mencao-lista { position: absolute; z-index: 1000; min-width: 240px; max-width: calc(100vw - 16px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } .mencao-lista li { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--text); } .mencao-lista li small { color: var(--muted); font-size: 12px; } .mencao-lista li.ativo, .mencao-lista li:hover { background: var(--primary-soft); } .ed-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 6px 0 6px; font-weight: 400; } .ed-barra button.ed-btn { display: inline-grid; place-items: center; min-width: 34px; min-height: 34px; height: 34px; margin: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: none !important; box-shadow: none !important; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transform: none !important; } .ed-barra button.ed-btn:hover { background: var(--primary-soft) !important; color: var(--primary); } .ed-barra button.ed-btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft) !important; } .ed-barra svg { width: 18px; height: 18px; } .ed-italico { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; } .ed-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border); } .ed-barra button.ed-btn[aria-pressed="true"] { background: var(--primary-soft) !important; color: var(--primary); border-color: var(--primary); } textarea[hidden] { display: none !important; } /* Área editável: mostra a formatação enquanto digita (o texto vai para o textarea escondido) */ .ed-area { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 400; line-height: 1.55; text-align: left; cursor: text; max-height: 60vh; overflow-y: auto; outline: none; } .ed-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .ed-area.ed-erro { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); } .ed-area.ed-vazia::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; float: left; height: 0; } .ed-area p, .ed-area div { margin: 0; } .ed-area p + p { margin-top: 6px; } .msg-edicao .ed-area { margin-bottom: 8px; } @media (max-width: 720px) { .ed-barra button.ed-btn { width: auto !important; min-height: 38px; height: 38px; min-width: 38px; } .ed-area { font-size: 16px; } /* evita o zoom automático do iPhone ao tocar */ } .msg.minha { border-left: 4px solid var(--primary); background: #fafbff; } /* ========================================================== ANEXOS ========================================================== */ .anexos { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .anexo { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; flex-wrap: wrap; } .anexo .anexo-icone { font-size: 20px; } .anexo .anexo-info { flex: 1; min-width: 140px; } .anexo .anexo-info strong { font-size: 13px; display: block; word-break: break-all; } .anexo .anexo-info small { color: var(--muted); font-size: 12px; } .anexo-img { max-width: 100%; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); } .anexo-acoes { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; } /* Prévia de imagem só ao passar o mouse (flutua; não empurra o histórico) */ .anexo.anexo-imagem { position: relative; } .anexo-hover { display: none; position: absolute; left: 44px; top: calc(100% + 6px); z-index: 60; padding: 5px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(16, 24, 40, .2); pointer-events: none; } .anexo-hover img { display: block; max-width: 180px; max-height: 180px; width: auto; height: auto; border-radius: 7px; object-fit: contain; } @media (hover: hover) { .anexo.anexo-imagem:hover .anexo-hover { display: block; } } [data-theme="escuro"] .anexo-hover { background: #141c27; border-color: #233041; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); } /* ===== Campo de anexos: área de arrastar/clicar (campo_anexos() + footer.php) ===== */ .campo-anexos { margin: 14px 0; } .campo-anexos-rotulo { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--text); } label.anexos-zona { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0 !important; padding: 22px 16px !important; border: 2px dashed var(--border); border-radius: 12px; background: var(--surface, #fafbfe); text-align: center; cursor: pointer; font-size: 14px !important; font-weight: 500; transition: border-color .15s, background .15s; } label.anexos-zona:hover, label.anexos-zona.arrastando { border-color: var(--primary); background: var(--primary-soft, #e7f0fa); } label.anexos-zona:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(33, 99, 168, .2); } .campo-anexos .anexos-zona input.anexos-input { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; } .anexos-zona-icone { font-size: 24px; line-height: 1; } .anexos-zona-texto { color: var(--text); } .anexos-zona-link { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .anexos-zona-dica { font-size: 12px; color: var(--muted); } .anexos-aviso { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #b91c1c; } .anexos-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .anexos-lista li { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); font-size: 13px; } .anexos-lista .anexos-thumb { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 7px; object-fit: cover; display: grid; place-items: center; background: var(--primary-soft, #e7f0fa); font-size: 18px; } .anexos-lista .anexos-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .anexos-lista .anexos-tam { color: var(--muted); white-space: nowrap; } .anexos-lista .anexos-remover { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; } .anexos-lista .anexos-remover:hover { background: #fee2e2; color: #b91c1c; } .anexos-lista .anexos-ver { flex: 0 0 auto; min-height: 30px; padding: 3px 10px; font-size: 12px; } .anexos-lista .anexos-thumb-clicavel { cursor: zoom-in; } @media (max-width: 480px) { .anexos-lista .anexos-tam { display: none; } } [data-theme="escuro"] label.anexos-zona { background: #0f1620; border-color: #233041; } [data-theme="escuro"] label.anexos-zona:hover, [data-theme="escuro"] label.anexos-zona.arrastando { background: #1a2433; border-color: #4f9de8; } [data-theme="escuro"] .anexos-lista li { background: #141c27; border-color: #233041; } [data-theme="escuro"] .anexos-lista .anexos-thumb { background: #15253a; } [data-theme="escuro"] .anexos-lista .anexos-remover:hover { background: #3b1d1d; color: #f87171; } [data-theme="escuro"] .anexos-aviso { color: #f87171; } .campo-anexos [hidden] { display: none !important; } /* ========================================================== FILTRO ========================================================== */ .filtro { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; } .filtro select, .filtro input { padding: 10px 12px; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 15px; min-width: 180px; flex: 1 1 auto; max-width: 320px; } .filtro select:focus, .filtro input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .vazio { color: var(--muted); padding: 40px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); } /* ========================================================== CONFIGURAÇÕES (cards de atalho) ========================================================== */ .config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .config-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: .15s; } .config-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .config-card:focus-visible { outline: none; box-shadow: var(--focus); } .config-card .icone { font-size: 26px; margin-bottom: 10px; } .config-card strong { display: block; font-size: 16px; margin-bottom: 6px; color: var(--primary); } .config-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; } /* ========================================================== PERSONALIZAR E-MAILS ========================================================== */ .secao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-bottom: 24px; box-shadow: var(--shadow); max-width: 100%; margin-left: auto; margin-right: auto; } .secao-head { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .secao-head h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); } .secao-head p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; } .vars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 14px; } .var-card { background: #fafbfe; border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 130px; } .var-rotulo { font-size: 13px; font-weight: 600; color: var(--text); } .var-card code { font-family: 'Consolas', 'Menlo', monospace; font-size: 14px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 5px 10px; border-radius: 7px; display: inline-block; align-self: flex-start; overflow-wrap: anywhere; } .var-exemplo { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: auto; overflow-wrap: break-word; } .form-emails { max-width: 100%; margin: 0 auto; padding: 0; border: none; box-shadow: none; background: transparent; } .campo-email { background: #fafbfe; border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 14px; } .campo-email label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text); } .campo-email input, .campo-email textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 15px; background: #fff; transition: .15s; } .campo-email input:focus, .campo-email textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .campo-email textarea { resize: vertical; line-height: 1.55; min-height: 120px; } .campo-email small { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); } /* ========================================================== SLA POR EMPRESA ========================================================== */ .linha-sla-expirado { background: #fee2e2 !important; } .linha-sla-expirado:hover { background: #fecaca !important; } .tabela .linha-sla-expirado td { color: #7f1d1d; } .badge.sla-expirado { background: #fecaca; color: #991b1b; } .badge.sla-dentro { background: #d1fae5; color: #065f46; } .badge.sla-ok { background: #dbeafa; color: #174a80; } .sla-prazo { font-size: 11px; color: var(--muted); } .sla-tabela { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 12px 0 18px; } .sla-linha { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 10px; padding: 10px 14px; } .sla-linha + .sla-linha { border-top: 1px solid var(--border); } .sla-linha.sla-head { background: #fafbfe; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; } .sla-linha input[type="number"] { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; background: #fff; } .sla-linha input[type="number"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .sla-prio { display: flex; align-items: center; gap: 8px; } .sla-campo { display: flex; gap: 8px; align-items: center; width: 100%; } .sla-campo input[type="number"] { flex: 1; } .sla-campo select { flex: 0 0 92px; min-height: 40px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #fff; } /* ========================================================== TELAS DE AUTH (LOGIN / CADASTRO) ========================================================== */ /* Faixa com o degradê da marca no topo e o cartão por cima (mesmo visual do login) */ .auth-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(150deg, #173f73 0%, #2163a8 55%, #2a9bd1 100%) top / 100% 42vh no-repeat, var(--bg); padding: 20px; } .auth-box { background: var(--surface); padding: clamp(24px, 4vw, 34px); border-radius: 12px; width: 100%; max-width: 420px; box-shadow: 0 18px 50px rgba(15, 40, 75, .18); border: 1px solid var(--border); } .auth-logo { display: block; height: var(--auth-logo-height); width: auto; max-width: 100%; object-fit: contain; margin: 0 auto 18px; } .auth-box h1 { text-align: center; margin-bottom: 22px; font: 800 21px/1.25 var(--fonte-titulo); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .auth-box label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 13.5px; } .auth-box input { width: 100%; min-height: 46px; padding: 11px 12px; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; background: var(--bg); color: var(--text); } .auth-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .auth-box button { width: 100%; min-height: 46px; padding: 12px; margin-top: 12px; border-radius: 8px; font-size: 15px; font-weight: 700; } .auth-link { text-align: center; margin-top: 16px; font-size: 14px; overflow-wrap: break-word; } .auth-link a { font-weight: 600; } /* ========================================================== PESQUISA DE SATISFAÇÃO (página pública) ========================================================== */ .pesquisa-body { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; background: linear-gradient(135deg, #e7f0fa 0%, #f3f6fa 50%, #e6f5fb 100%); padding: 24px 16px; } .pesquisa-box { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); padding: clamp(24px, 4vw, 34px); width: 100%; max-width: 560px; } .pesquisa-box .auth-logo { margin: 0 auto 16px; } .pesquisa-box h1 { text-align: center; font-size: 20px; margin-bottom: 6px; } .pesquisa-box .pesquisa-intro { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 20px; line-height: 1.6; } .pesquisa-box textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 16px; margin-top: 6px; } .pesquisa-box textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .pergunta { margin-bottom: 26px; } .pergunta h3 { font-size: 15px; margin-bottom: 12px; line-height: 1.4; } .faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .face-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfe; cursor: pointer; text-align: center; transition: .15s; min-height: 84px; } .face-opt:hover { border-color: var(--primary); background: var(--primary-soft); } .face-opt input { display: none; } .face-emoji { font-size: 34px; line-height: 1; } .face-rotulo { font-size: 11px; color: var(--muted); } .face-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px rgba(33, 99, 168, .12); } .face-opt:has(input:checked) .face-rotulo { color: var(--primary); font-weight: 700; } .pesquisa-sucesso { text-align: center; padding: 20px 0; } .pesquisa-sucesso .emoji-grande { font-size: 64px; display: block; margin-bottom: 14px; } /* ========================================================== PRIORIDADES DINÂMICAS (selos por cor) ========================================================== */ .badge[class*="badge-prio-"] { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge-prio-critico { background: #1f2937; color: #f9fafb; } /* ========================================================== OBRIGATÓRIO (asterisco dos campos) ========================================================== */ .obrigatorio { color: #dc2626; font-weight: 700; } /* ========================================================== RESPONSIVIDADE (MOBILE-FIRST REFORÇADO) ========================================================== */ @media (max-width: 900px) { .topbar-inner { flex-wrap: wrap; gap: 10px; } .nav-user-info { display: none; } .nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .config-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { body { font-size: 15px; } .container { padding: 16px clamp(12px, 3vw, 16px); } .topbar-inner { padding: 10px 12px; } .brand-logo { height: 32px; } .nav a { font-size: 14px; padding: 10px 12px; min-height: 42px; } .nav-user { gap: 6px; } .avatar { width: 30px; height: 30px; } .nav-user-info { display: none; } .nav-user .btn { margin-left: 6px; } .nav-user .btn-sm { padding: 6px 10px; font-size: 12px; } h2 { font-size: 20px; } h3 { font-size: 16px; } /* Título à esquerda e botão (ex.: "← Voltar") à direita na mesma linha; subtítulo e blocos de ações vão para a linha de baixo */ .page-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px 12px; } .page-head h2 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .page-head > .btn { flex: 0 0 auto; margin-left: auto; } .page-head > p, .page-head > .page-acoes, .page-head > .rel-acoes-topo { flex: 1 1 100%; margin: 0; } .page-acoes { width: 100%; } .page-acoes .btn { flex: 1 1 auto; } .btn, button[type="submit"], form button { min-height: 46px; font-size: 15px; padding: 12px 18px; } .btn-sm { min-height: 40px; padding: 8px 14px; font-size: 13px; } .formulario button, .form-emails > button, .auth-box button { width: 100%; } .anexo-acoes .btn { flex: 1 1 45%; min-height: 42px; } td .btn { min-height: 38px; } .form-acoes { width: 100%; } .form-acoes > button, .form-acoes > .btn { flex: 1 1 auto; width: 100%; } .form-row { grid-template-columns: 1fr; gap: 0; } .formulario { padding: 18px; } .formulario input, .formulario select, .formulario textarea { font-size: 16px; min-height: 46px; } .campo-email { padding: 14px; } .campo-email input, .campo-email textarea { font-size: 16px; } .campo-email .campo-email-topo { flex-direction: column; align-items: flex-start; gap: 10px; } .filtro input, .filtro select { max-width: 100%; flex: 1 1 100%; min-height: 46px; font-size: 16px; } .checks-inline { gap: 12px; } .checks-inline label { min-height: 44px; } .cards { grid-template-columns: repeat(2, 1fr); gap: 12px; } .card { padding: 16px; } .card .card-value { font-size: 26px; } .config-grid { grid-template-columns: 1fr; } .config-card { padding: 20px; } .sla-linha { grid-template-columns: 1fr; gap: 6px; } .tabela { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .tabela th, .tabela td { font-size: 13px; padding: 12px; } .detalhes { padding: 18px; } .detalhes-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .secao { padding: 20px; } .vars-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .var-card { min-height: 115px; padding: 14px; } .faces { gap: 5px; } .face-emoji { font-size: 28px; } .face-rotulo { font-size: 9px; } .face-opt { min-height: 72px; padding: 10px 2px; } .pesquisa-box { padding: 20px 14px; } .pesquisa-box h1 { font-size: 18px; } } /* ========================================================== CELULAR — FASE 1: lista de chamados em cartões, margens e topo enxuto (tudo restrito a telas até 720px; o computador não muda) ========================================================== */ .chamados-cards { display: none; } .nav-extra { display: none; } /* ===== FASE 3 (celular): item "Instalar app" e passo a passo do iPhone ===== */ #btnInstalarApp[hidden] { display: none !important; } .app-instrucoes-camada { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(15, 23, 42, .45); } .app-instrucoes { position: relative; width: 100%; max-width: 380px; box-sizing: border-box; padding: 22px 20px 18px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px rgba(16, 24, 40, .28); font-size: 15px; color: var(--text); } .app-instrucoes strong { display: block; font-size: 17px; margin-bottom: 10px; } .app-instrucoes ol { margin: 0 0 12px; padding-left: 20px; line-height: 1.9; } .app-instrucoes small { color: var(--muted); } .app-instrucoes .app-ico { font-size: 16px; } .app-instrucoes ol li { margin-bottom: 6px; line-height: 1.6; } .app-instrucoes .app-svg { width: 20px; height: 20px; vertical-align: -4px; color: #007aff; } .app-instrucoes .app-tres-pontos { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--primary-soft, #e7f0fa); color: #007aff; font-weight: 800; letter-spacing: 1px; line-height: 1.4; } .app-instrucoes .app-dica { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 2px; } .app-instrucoes .app-texto { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--muted); } .app-instrucoes .app-copiar { width: 100%; justify-content: center; margin-top: 4px; } [data-theme="escuro"] .app-instrucoes .app-svg, [data-theme="escuro"] .app-instrucoes .app-tres-pontos { color: #4da3ff; } [data-theme="escuro"] .app-instrucoes .app-tres-pontos { background: #15253a; } .app-instrucoes-fechar { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; } [data-theme="escuro"] .app-instrucoes { background: #141c27; border-color: #233041; } /* ===== FASE 2 (celular): barra inferior, detalhes recolhíveis e botão Responder ===== */ .barra-inferior, .btn-responder-flutuante, .detalhes-mais { display: none; } @media (max-width: 720px) { body.tem-barra-inferior { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } .barra-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1600; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--surface, #fff); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(16, 24, 40, .08); } .barra-item { all: unset; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 12px; cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 600; -webkit-tap-highlight-color: transparent; text-decoration: none; } .barra-item .barra-icone { position: relative; font-size: 21px; line-height: 1; } .barra-item.ativo { color: var(--primary); background: var(--primary-soft, #e7f0fa); } .barra-item:active { background: var(--primary-soft, #e7f0fa); } .barra-badge { position: absolute; top: -6px; right: -12px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; } .barra-badge[hidden] { display: none; } [data-theme="escuro"] .barra-inferior { background: #141c27; border-color: #233041; box-shadow: 0 -6px 20px rgba(0, 0, 0, .4); } [data-theme="escuro"] .barra-item.ativo, [data-theme="escuro"] .barra-item:active { background: #15253a; color: #8ec5f5; } /* Sino do topo sai (fica o "Avisos" da barra); a lista de avisos abre acima da barra. O backdrop-filter do topo faria o position:fixed da lista ficar preso ao topo (abria fora da tela). */ .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface, #fff); } [data-theme="escuro"] .topbar { background: #141c27 !important; } #btnSino { display: none !important; } .sino-popup { position: fixed !important; top: auto !important; left: 10px !important; right: 10px !important; width: auto !important; bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; z-index: 1700 !important; } /* Avisos flutuantes da página sobem para não ficar atrás da barra */ .refresh-contador { display: none !important; } /* a atualização automática continua; só o contador some */ .pesquisa-popup { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } /* Tela do chamado: detalhes principais à vista, o resto ao tocar em "Ver todos os detalhes" */ .detalhes:not(.expandido) .campo-sec { display: none; } .detalhes:not(.expandido) .descricao .texto-fmt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .detalhes-mais { all: unset; display: block; margin-top: 12px; padding: 10px 0 2px; width: 100%; text-align: center; color: var(--primary); font-size: 14px; font-weight: 700; cursor: pointer; border-top: 1px solid var(--border); } /* Resposta: o formulário fica escondido até tocar em "Responder" */ .area-resposta:not(.aberta) { display: none; } .btn-responder-flutuante { display: inline-flex; align-items: center; gap: 6px; position: fixed; right: 16px; z-index: 1550; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); padding: 14px 20px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 10px 24px rgba(33, 99, 168, .35); cursor: pointer; } .btn-responder-flutuante[hidden], body.resposta-aberta .btn-responder-flutuante { display: none; } } @media (max-width: 720px) { /* Lista de chamados: cartões no lugar da tabela */ .lista-desktop, #btn_colunas { display: none !important; } .chamados-cards { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; } .chamado-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; background: var(--surface, #fff); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s; } .chamado-card:active { background: var(--primary-soft, #e7f0fa); } .chamado-card.linha-sla-cor { border-left-color: var(--sla-cor, #ef4444); } .chamado-card .cc-topo { display: flex; align-items: flex-start; gap: 8px; } .chamado-card .cc-icone { flex: 0 0 auto; line-height: 1.35; } .chamado-card .cc-id { flex: 0 0 auto; font-weight: 700; color: var(--muted); font-size: 14px; line-height: 1.35; } .chamado-card .cc-titulo { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .chamado-card .cc-badges { display: flex; flex-wrap: wrap; gap: 6px; } .chamado-card .cc-linha { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chamado-card .cc-rodape { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); } .chamado-card .cc-sla { flex: 0 0 auto; } .chamado-card .cc-data { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; } .chamado-card .cc-seta { flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--muted); } [data-theme="escuro"] .chamado-card { background: #141c27; border-color: #233041; } [data-theme="escuro"] .chamado-card.linha-sla-cor { border-left-color: var(--sla-cor, #ef4444); } [data-theme="escuro"] .chamado-card:active { background: #1a2433; } [data-theme="escuro"] .chamado-card .cc-rodape { border-color: #233041; } /* Margens: as telas definem .moldura com 40px 48px no próprio arquivo */ .moldura { padding: 18px 16px !important; border-radius: 12px; } /* Topo enxuto: logo, sino e menu; perfil, tema e Sair vão para dentro do menu */ .nav-user-id, .nav-user-sep, .btn-tema, .nav-user-sair { display: none !important; } .nav-extra { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); } .nav .nav-extra a, .nav .nav-extra button { width: 100%; justify-content: flex-start; min-height: 48px; font-size: 15px; padding: 12px 14px; border-radius: 9px; } } @media (max-width: 420px) { .cards { grid-template-columns: 1fr; } .vars-grid { grid-template-columns: 1fr; } .detalhes-grid { grid-template-columns: 1fr; } .config-grid { grid-template-columns: 1fr; } .auth-box h1 { font-size: 15px; } .msg .msg-head { flex-direction: column; align-items: flex-start; gap: 2px; } .anexo-acoes .btn { flex: 1 1 100%; } .brand-logo { max-width: 160px; } .icone-legenda { gap: 12px; } } @media (min-width: 1440px) { .container { max-width: 1280px; } } @media (hover: hover) { .btn:hover, button:hover { transform: translateY(-1px); } } /* ========================================================== MENU HAMBÚRGUER — MOBILE (adicional) ========================================================== */ @media (max-width: 720px) { .nav-toggle { display: flex; } .nav-user-link { display: none; } .nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; box-shadow: var(--shadow); } .nav.aberto { display: flex; } .nav a { width: 100%; justify-content: flex-start; min-height: 48px; font-size: 15px; padding: 12px 14px; border-radius: 9px; } .nav a.nav-cta { justify-content: center; } .nav-user-link { display: flex; } .nav-user-link.btn { width: 100%; justify-content: center; margin: 4px 0 0; min-height: 46px; } } /* ========================================================== TEMA ESCURO — Proturbo Ativado por ========================================================== */ [data-theme="escuro"] { --bg: #0d131b; --surface: #141c27; --border: #233041; --text: #e5ecf4; --muted: #93a2b7; --primary: #4f9de8; --primary-2: #45c3ea; --primary-soft: #15253a; --success: #10b981; --warning: #f59e0b; --danger: #f87171; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --focus: 3px solid rgba(79,157,232,.5); } [data-theme="escuro"] body { background: var(--bg); color: var(--text); } [data-theme="escuro"] .topbar { background: rgba(23,26,35,.92); } [data-theme="escuro"] .btn-outline, [data-theme="escuro"] .nav .btn-outline { background: #141c27; } [data-theme="escuro"] .tabela th { background: #1a2433; color: var(--muted); } [data-theme="escuro"] .tabela tbody tr:hover { background: #1d2230; } [data-theme="escuro"] .msg.minha { background: #13233a; } [data-theme="escuro"] .formulario input, [data-theme="escuro"] .formulario select, [data-theme="escuro"] .formulario textarea, [data-theme="escuro"] .auth-box input, [data-theme="escuro"] .campo-email input, [data-theme="escuro"] .campo-email textarea, [data-theme="escuro"] .filtro select, [data-theme="escuro"] .filtro input, [data-theme="escuro"] .sla-linha input, [data-theme="escuro"] .sla-campo select, [data-theme="escuro"] .pesquisa-box textarea, [data-theme="escuro"] .face-opt { background: #0f1620; color: var(--text); } [data-theme="escuro"] .formulario input:focus, [data-theme="escuro"] .formulario select:focus, [data-theme="escuro"] .formulario textarea:focus, [data-theme="escuro"] .auth-box input:focus, [data-theme="escuro"] .campo-email input:focus, [data-theme="escuro"] .campo-email textarea:focus, [data-theme="escuro"] .filtro select:focus, [data-theme="escuro"] .filtro input:focus, [data-theme="escuro"] .sla-linha input:focus, [data-theme="escuro"] .sla-campo select:focus, [data-theme="escuro"] .pesquisa-box textarea:focus { background: #141c27; } [data-theme="escuro"] input::placeholder, [data-theme="escuro"] textarea::placeholder { color: #6b7280; } [data-theme="escuro"] .var-card, [data-theme="escuro"] .campo-email, [data-theme="escuro"] .sla-linha.sla-head { background: #1a2433; } [data-theme="escuro"] .auth-body { background: linear-gradient(150deg, #0f2a4d 0%, #174a80 60%, #1d6f98 100%) top / 100% 42vh no-repeat, var(--bg); } [data-theme="escuro"] .pesquisa-body { background: linear-gradient(135deg, #0d131b 0%, #111a26 50%, #13233a 100%); } [data-theme="escuro"] .alert-sucesso { background: #0b2e22; color: #a7f3d0; border-color: #14532d; } [data-theme="escuro"] .alert-erro { background: #33111a; color: #fecaca; border-color: #7f1d1d; } [data-theme="escuro"] .alert-aviso { background: #33270d; color: #fde68a; border-color: #78350f; } [data-theme="escuro"] .obrigatorio { color: #f87171; } /* Badges no tema escuro */ [data-theme="escuro"] .badge-prio-baixa { background: #233041; color: #d1d5db; } [data-theme="escuro"] .badge-prio-media { background: #3a2f0d; color: #fde68a; } [data-theme="escuro"] .badge-prio-alta { background: #3a2210; color: #fdba74; } [data-theme="escuro"] .badge-prio-urgente { background: #3a1010; color: #fecaca; } [data-theme="escuro"] .badge-prio-critico { background: #e5e7eb; color: #111827; } [data-theme="escuro"] .badge-cor-azul { background: #0d2b52; color: #93c5fd; } [data-theme="escuro"] .badge-cor-verde { background: #0b2e22; color: #6ee7b7; } [data-theme="escuro"] .badge-cor-amarelo { background: #3a2f0d; color: #fde68a; } [data-theme="escuro"] .badge-cor-laranja { background: #3a2210; color: #fdba74; } [data-theme="escuro"] .badge-cor-vermelho { background: #3a1010; color: #fecaca; } [data-theme="escuro"] .badge-cor-roxo { background: #241640; color: #c4b5fd; } [data-theme="escuro"] .badge-cor-rosa { background: #3a1027; color: #f9a8d4; } [data-theme="escuro"] .badge-cor-cinza { background: #233041; color: #d1d5db; } [data-theme="escuro"] .badge-cor-ciano { background: #0b3340; color: #67e8f9; } [data-theme="escuro"] .badge-cor-escuro { background: #e5e7eb; color: #111827; } /* Ícones de última mensagem no tema escuro */ [data-theme="escuro"] .msg-icone { background: #1a2433; } [data-theme="escuro"] .msg-icone.verde { background: #0b2e22; color: #6ee7b7; border-color: #14532d; } [data-theme="escuro"] .msg-icone.vermelho { background: #3a1010; color: #fecaca; border-color: #7f1d1d; } /* SLA no tema escuro */ [data-theme="escuro"] .badge.sla-expirado { background: #3a1010; color: #fecaca; } [data-theme="escuro"] .badge.sla-dentro { background: #0b2e22; color: #6ee7b7; } [data-theme="escuro"] .badge.sla-ok { background: #13233a; color: #8ec5f5; } [data-theme="escuro"] .linha-sla-expirado { background: #3a1010 !important; } [data-theme="escuro"] .linha-sla-expirado:hover { background: #4a1414 !important; } [data-theme="escuro"] .tabela .linha-sla-expirado td { color: #fecaca; } /* ========================================================== TEMA ESCURO — correção de telas com cor branca fixa (moldura, configurações, modais, auditoria, edição inline) !important garante vitória sobre os