:root { --cor-primaria: #1a2035; --cor-fundo: #f8fafc; --cor-texto: #1a1a1a; --cor-erro: #dc2626; --cor-sucesso: #16a34a; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--cor-fundo); color: var(--cor-texto); } .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; } .login-form { background: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); width: 100%; max-width: 380px; } .login-form h1 { font-size: 1.25rem; margin-bottom: 1.5rem; color: var(--cor-primaria); } .login-form label { display: block; font-size: 0.875rem; margin: 0.75rem 0 0.25rem; } .login-form input { width: 100%; padding: 0.75rem; font-size: 1rem; border: 1px solid #ddd; border-radius: 8px; min-height: 44px; /* touch target */ } .login-form button { width: 100%; margin-top: 1.5rem; padding: 0.75rem; font-size: 1rem; background: var(--cor-primaria); color: #fff; border: none; border-radius: 8px; min-height: 44px; cursor: pointer; } /* ───────────────────────────────────────────────────────────── AVISOS DO SISTEMA (flash) Fora do fluxo do documento, de propósito. Antes era um bloco comum no topo do , com 380px centralizados (estilo da tela de login). No layout do admin, a sidebar é position:fixed com z-index:300 e passava POR CIMA do aviso — parte da mensagem ficava escondida atrás do menu. z-index 400 fica acima da sidebar (300) e do convite de instalação. ───────────────────────────────────────────────────────────── */ .avisos { position: fixed; z-index: 400; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; /* a coluna não bloqueia cliques na página */ /* MOBILE-FIRST: no celular o aviso entra por baixo, perto do polegar e longe do notch. Largura total menos as margens. */ left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); } @media (min-width: 768px) { /* No desktop, canto superior direito: é onde o olho procura confirmação depois de uma ação (padrão consolidado). */ .avisos { left: auto; top: 1rem; right: 1rem; bottom: auto; max-width: 420px; } } .aviso-toast { pointer-events: auto; /* mas o aviso em si é clicável */ display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 12px; border-left: 4px solid; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.14); font-size: 0.9375rem; line-height: 1.45; animation: aviso-entra 250ms cubic-bezier(0.34,1.56,0.64,1); } @keyframes aviso-entra { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .aviso-toast.saindo { animation: aviso-sai 200ms ease forwards; } @keyframes aviso-sai { to { opacity: 0; transform: translateY(-8px); } } .aviso-icone { flex-shrink: 0; margin-top: 1px; } .aviso-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; } .aviso-fechar { flex-shrink: 0; width: 28px; height: 28px; margin: -2px -4px 0 0; display: grid; place-items: center; background: none; border: none; border-radius: 6px; color: currentColor; opacity: 0.5; cursor: pointer; } .aviso-fechar:hover { opacity: 1; background: rgba(0,0,0,0.06); } /* Cores de texto com contraste AA sobre fundo branco — o mesmo par usado no resto do sistema. */ .aviso-success { border-left-color: #16a34a; color: #14532D; } .aviso-success .aviso-icone { color: #16a34a; } .aviso-error { border-left-color: #dc2626; color: #991B1B; } .aviso-error .aviso-icone { color: #dc2626; } .aviso-warning { border-left-color: #F59E0B; color: #92400E; } .aviso-warning .aviso-icone { color: #B45309; } .aviso-info { border-left-color: #003C8C; color: #003C8C; } .aviso-info .aviso-icone { color: #003C8C; } @media (prefers-reduced-motion: reduce) { .aviso-toast, .aviso-toast.saindo { animation: none; } } .erro-container { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; } /* --- Área admin --- */ .admin-layout { display: flex; min-height: 100vh; } .admin-sidebar { width: 220px; background: var(--cor-primaria); color: #fff; display: flex; flex-direction: column; padding: 1.5rem 1rem; flex-shrink: 0; } .admin-sidebar-titulo { font-weight: 700; margin-bottom: 1.5rem; font-size: 0.95rem; } .admin-sidebar a { color: #cbd5e1; text-decoration: none; padding: 0.6rem 0.5rem; border-radius: 6px; margin-bottom: 0.25rem; min-height: 44px; display: flex; align-items: center; } .admin-sidebar a:hover { background: rgba(255,255,255,0.08); color: #fff; } .admin-logout-form { margin-top: auto; } .admin-logout-form button { width: 100%; background: transparent; border: 1px solid #475569; color: #cbd5e1; padding: 0.6rem; border-radius: 6px; cursor: pointer; min-height: 44px; } .admin-conteudo { flex: 1; padding: 2rem; max-width: 1100px; } .admin-conteudo h1 { margin-top: 0; } /* Sidebar vira topo em telas pequenas */ @media (max-width: 768px) { .admin-layout { flex-direction: column; } .admin-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 0.75rem; } .admin-sidebar-titulo { display: none; } .admin-logout-form { margin-top: 0; margin-left: auto; } .admin-conteudo { padding: 1rem; } } .cards-resumo { display: flex; gap: 1rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; } .card { background: #fff; border-radius: 10px; padding: 1rem 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); min-width: 120px; } .card-numero { display: block; font-size: 1.75rem; font-weight: 700; color: var(--cor-primaria); } .card-label { font-size: 0.8rem; color: #64748b; } .btn-primario { display: inline-block; background: var(--cor-primaria); color: #fff; padding: 0.6rem 1.2rem; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; font-size: 0.9rem; min-height: 44px; line-height: 1.7; } .tabela-dados { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .tabela-dados th, .tabela-dados td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid #eef1f5; font-size: 0.9rem; } .tabela-dados th { background: #f1f5f9; font-weight: 600; } .acoes { display: flex; gap: 0.75rem; flex-wrap: wrap; } .acoes form { display: inline; } .link-perigo { background: none; border: none; color: var(--cor-erro); cursor: pointer; padding: 0; font-size: 0.9rem; } .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .badge-rascunho { background: #fef3c7; color: #92400e; } .badge-publicada { background: #dcfce7; color: #16a34a; } .badge-revogada { background: #fee2e2; color: #dc2626; } .form-padrao, .form-inline { background: #fff; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); max-width: 640px; margin-bottom: 1.5rem; } .form-padrao label { display: block; font-size: 0.875rem; margin: 0.75rem 0 0.25rem; font-weight: 600; } .form-padrao input, .form-padrao select, .form-padrao textarea { width: 100%; padding: 0.65rem; font-size: 1rem; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; min-height: 44px; } .form-padrao textarea { min-height: 240px; resize: vertical; } .form-padrao small { color: #64748b; font-size: 0.78rem; } .form-padrao button { margin-top: 1.25rem; } .form-inline { display: flex; gap: 0.75rem; align-items: center; max-width: none; } .form-inline input { flex: 1; min-width: 200px; } .filtros { display: flex; gap: 0.75rem; margin-bottom: 1rem; } .filtros select { padding: 0.5rem; border-radius: 8px; border: 1px solid #ddd; min-height: 44px; } .aviso-info { background: #fef3c7; color: #92400e; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.875rem; } .card-versao { background: #fff; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .card-versao-header { margin-bottom: 0.5rem; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; } .card-versao-meta { color: #64748b; font-size: 0.8rem; } .card-versao-conteudo { font-size: 0.9rem; line-height: 1.6; } /* --- Área técnico (mobile-first: aqui é onde o PWA é mais usado) --- */ .tecnico-layout { min-height: 100vh; background: var(--cor-fundo); } .tecnico-topbar { background: var(--cor-primaria); color: #fff; padding: 0.85rem 1rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; } .tecnico-topbar-titulo { font-weight: 700; font-size: 0.95rem; } .tecnico-topbar-nav { display: flex; gap: 1rem; align-items: center; } .tecnico-topbar-nav a { color: #cbd5e1; text-decoration: none; font-size: 0.875rem; } .tecnico-topbar-nav form button { background: none; border: 1px solid #475569; color: #cbd5e1; padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.8rem; cursor: pointer; min-height: 36px; } .tecnico-conteudo { padding: 1.25rem; max-width: 640px; margin: 0 auto; } .lista-its-tecnico { display: flex; flex-direction: column; gap: 0.75rem; } .card-it-tecnico { display: block; background: #fff; border-radius: 10px; padding: 1rem 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-decoration: none; color: var(--cor-texto); border-left: 4px solid transparent; min-height: 44px; } .card-it-tecnico.pendente { border-left-color: #f59e0b; } .card-it-tecnico-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; } .card-it-tecnico-titulo { font-size: 0.9rem; color: #475569; } .badge-pendente { background: #fef3c7; color: #92400e; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; } .badge-ok { background: #dcfce7; color: #16a34a; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; } .it-meta { color: #64748b; font-size: 0.85rem; margin-bottom: 1rem; } .it-conteudo { background: #fff; border-radius: 10px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 1.25rem; line-height: 1.7; } .btn-confirmar { width: 100%; background: var(--cor-sucesso); color: #fff; border: none; padding: 0.9rem; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; min-height: 48px; } .aviso-sucesso { background: #dcfce7; color: var(--cor-sucesso); padding: 0.85rem 1rem; border-radius: 8px; text-align: center; font-weight: 600; } /* --- Conformidade --- */ .barra-progresso { display: inline-flex; align-items: center; gap: 0.5rem; width: 120px; height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; vertical-align: middle; } .barra-progresso-preenchida { height: 100%; background: var(--cor-sucesso); border-radius: 999px; } .barra-progresso-label { font-size: 0.8rem; color: #64748b; margin-left: 0.5rem; } .barra-progresso-grande { width: 100%; height: 14px; margin: 0.75rem 0 1.25rem; } .acoes-exportar { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; } .btn-secundario { display: inline-block; background: #fff; color: var(--cor-primaria); border: 1px solid var(--cor-primaria); padding: 0.55rem 1.1rem; border-radius: 8px; text-decoration: none; font-size: 0.875rem; min-height: 44px; line-height: 1.85; } .form-lembrete { margin-bottom: 1rem; } .form-lembrete button { cursor: pointer; } .reset-senha-details { display: inline-block; vertical-align: top; } .reset-senha-details summary { cursor: pointer; color: var(--cor-primaria); font-size: 0.9rem; } .form-inline-compacto { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center; } .form-inline-compacto input { padding: 0.4rem 0.6rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.85rem; min-height: 36px; } .form-inline-compacto button { min-height: 36px; padding: 0.4rem 0.9rem; font-size: 0.8rem; } /* --- Documento da IT estruturado em seções --- */ .it-documento { background: #fff; border-radius: 10px; padding: 1.25rem 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 1.25rem; } .it-secao { margin-bottom: 1.4rem; } .it-secao:last-child { margin-bottom: 0; } .it-secao h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cor-primaria); border-bottom: 1px solid #e2e8f0; padding-bottom: 0.35rem; margin: 0 0 0.6rem; } .it-secao-corpo { font-size: 0.95rem; line-height: 1.7; } .it-secao-corpo ul, .it-secao-corpo ol { margin: 0.4rem 0; padding-left: 1.4rem; } .it-secao-corpo li { margin-bottom: 0.3rem; } .it-secao-corpo p { margin: 0 0 0.6rem; } .it-secao-corpo table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; } .it-secao-corpo th, .it-secao-corpo td { border: 1px solid #e2e8f0; padding: 0.4rem 0.6rem; font-size: 0.85rem; text-align: left; } /* --- Card de IT do técnico + botão PDF ao lado --- */ .card-it-wrapper { display: flex; align-items: stretch; gap: 0; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid transparent; overflow: hidden; } .card-it-wrapper.pendente { border-left-color: #f59e0b; } .card-it-wrapper .card-it-tecnico { flex: 1; box-shadow: none; border-left: none; border-radius: 0; background: transparent; } .card-it-tecnico-cat { font-size: 0.75rem; color: #94a3b8; margin-top: 0.2rem; } .btn-pdf { display: flex; align-items: center; justify-content: center; min-width: 64px; padding: 0 1rem; background: #f1f5f9; color: var(--cor-primaria); text-decoration: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; border-left: 1px solid #e2e8f0; } .btn-pdf:hover { background: #e2e8f0; } /* --- Navegação e ações de formulário --- */ .link-voltar { display: inline-block; color: var(--cor-primaria); text-decoration: none; font-size: 0.9rem; padding: 0.4rem 0; min-height: 36px; } .acoes-form { display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; } .acoes-form .btn-primario, .acoes-form .btn-secundario { margin-top: 0; } .obrigatorio { color: var(--cor-erro); } .form-padrao code { background: #f1f5f9; padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.78rem; } /* ========================================================================== PWA / Mobile ========================================================================== */ /* Respeita a área segura do iPhone (notch e barra inferior) no modo standalone, onde não há barra do navegador para proteger o conteúdo. */ body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* Evita zoom automático do iOS ao focar campos (acontece com fonte < 16px) */ input, select, textarea, button { font-size: 16px; } /* Reserva espaço para a faixa não cobrir botões no fim da página (o formulário de IT tem os botões de salvar exatamente ali) */ body.com-faixa-pwa { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } /* --- Faixa de convite para instalar o app --- */ /* Esta regra é obrigatória e precisa vir junto com .pwa-instalar: o [hidden] { display: none } é folha de estilo do NAVEGADOR (user agent), e qualquer regra de autor que declare display (aqui, flex) vence, independente de especificidade. Sem isso o atributo hidden do HTML não esconde nada: a faixa ficava visível desde o primeiro carregamento, o botão "Agora não" parecia não funcionar e ela aparecia até dentro do app já instalado. */ .pwa-instalar[hidden] { display: none !important; } /* Rodando como app instalado: não faz sentido convidar a instalar o que já está instalado. */ @media all and (display-mode: standalone), all and (display-mode: minimal-ui), all and (display-mode: fullscreen) { .pwa-instalar { display: none !important; } } .pwa-instalar { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); background: var(--cor-primaria); color: #fff; padding: 0.85rem 1rem; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.875rem; z-index: 100; flex-wrap: wrap; } .pwa-instalar-acoes { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; } .pwa-btn-instalar { background: #fff; color: var(--cor-primaria); border: none; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; min-height: 40px; } .pwa-btn-texto { background: none; border: none; color: #cbd5e1; font-size: 0.85rem; cursor: pointer; padding: 0.5rem; min-height: 40px; } /* --- Aviso de sem conexão --- */ .aviso-offline { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; background: var(--cor-erro); color: #fff; text-align: center; padding: 0.5rem 1rem; font-size: 0.8rem; z-index: 200; } /* --- Tabelas do admin em tela pequena --- Tabela larga em celular estourava o layout e cortava a última coluna (justamente a de ações). Rolagem horizontal com toque resolve. */ @media (max-width: 768px) { .tabela-dados { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .tabela-dados th, .tabela-dados td { padding: 0.6rem 0.75rem; } .acoes { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .cards-resumo { gap: 0.6rem; } .card { flex: 1; min-width: 90px; padding: 0.85rem 1rem; } .card-numero { font-size: 1.4rem; } .filtros { flex-direction: column; } .filtros select { width: 100%; } .form-inline { flex-direction: column; align-items: stretch; } .form-inline input, .form-inline button { width: 100%; } .acoes-form { flex-direction: column-reverse; align-items: stretch; } .acoes-form .btn-primario, .acoes-form .btn-secundario { text-align: center; width: 100%; } .acoes-exportar { flex-direction: column; } .acoes-exportar .btn-secundario { text-align: center; } .it-documento { padding: 1rem; } .it-secao-corpo { font-size: 0.9rem; } /* Documento da IT pode ter tabela larga (ex: lista de materiais) */ .it-secao-corpo table { display: block; overflow-x: auto; } h1 { font-size: 1.35rem; } } /* Alvos de toque confortáveis no celular */ @media (max-width: 768px) and (pointer: coarse) { .acoes a, .link-voltar { padding: 0.5rem 0; display: inline-block; min-height: 44px; } .btn-pdf { min-width: 72px; } } /* ========================================================================== Editor rico (Quill) no formulário de IT ========================================================================== */ /* O textarea original continua no DOM (é ele que envia os dados), mas fica oculto quando o editor carrega. Se o JS falhar, o textarea permanece visível e utilizável — degradação graciosa. */ .editor-rico-origem { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .editor-rico-campo { margin-bottom: 0.25rem; } .editor-rico { background: #fff; } /* Alinha a moldura do Quill com os outros campos do formulário */ .ql-toolbar.ql-snow { border: 1px solid #ddd; border-radius: 8px 8px 0 0; background: #f8fafc; } .ql-container.ql-snow { border: 1px solid #ddd; border-top: none; border-radius: 0 0 8px 8px; font-family: inherit; font-size: 0.95rem; } .ql-editor { min-height: 120px; line-height: 1.7; } /* Campo de procedimento é o mais usado — mais espaço por padrão. Seletor via data-campo no wrapper: o Quill insere a toolbar antes do container, então seletores de irmão adjacente não funcionam aqui. */ .editor-rico-campo[data-campo="procedimento"] .ql-editor { min-height: 260px; } .ql-editor.ql-blank::before { font-style: normal; color: #94a3b8; } /* Destaque de campo obrigatório não preenchido */ .editor-rico-erro .ql-toolbar.ql-snow, .editor-rico-erro .ql-container.ql-snow { border-color: var(--cor-erro); } /* Indentação do Quill precisa aparecer também fora do editor (visualização da IT, histórico) */ .it-secao-corpo .ql-indent-1 { padding-left: 2rem; } .it-secao-corpo .ql-indent-2 { padding-left: 4rem; } .it-secao-corpo .ql-indent-3 { padding-left: 6rem; } .it-secao-corpo .ql-indent-4 { padding-left: 8rem; } .it-secao-corpo blockquote { border-left: 3px solid #cbd5e1; margin: 0.6rem 0; padding-left: 0.9rem; color: #475569; } /* Editor em celular: barra de ferramentas quebra em várias linhas */ @media (max-width: 768px) { .ql-toolbar.ql-snow { padding: 0.4rem; } .ql-editor { min-height: 160px; } .editor-rico-campo[data-campo="procedimento"] .ql-editor { min-height: 200px; } } /* ───────────────────────────────────────────────────────────── CONFIRMAÇÃO DO SISTEMA Substitui o confirm() do navegador — que tem a aparência do sistema operacional, mostra o endereço do site no celular, e em alguns navegadores oferece "impedir novos diálogos", fazendo a ação seguinte acontecer SEM confirmação. ───────────────────────────────────────────────────────────── */ .confirmacao-fundo { position: fixed; inset: 0; z-index: 500; /* acima dos avisos (400) e da sidebar (300) */ background: rgba(15, 20, 12, 0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: confirmacao-fundo-entra 150ms ease; } .confirmacao-fundo[hidden] { display: none; } @keyframes confirmacao-fundo-entra { from { opacity: 0; } to { opacity: 1; } } .confirmacao-caixa { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 1.5rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); animation: confirmacao-entra 200ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes confirmacao-entra { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .confirmacao-caixa h2 { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 0.5rem; color: #1A1A1A; } .confirmacao-caixa p { font-size: 0.9375rem; line-height: 1.55; color: #4B5563; margin-bottom: 1.25rem; white-space: pre-line; /* respeita as quebras do texto original */ overflow-wrap: anywhere; } .confirmacao-acoes { display: flex; flex-direction: column-reverse; /* no celular a ação fica embaixo, */ gap: 0.5rem; /* perto do polegar */ } @media (min-width: 480px) { .confirmacao-acoes { flex-direction: row; justify-content: flex-end; } } .confirmacao-btn { min-height: 48px; padding: 0.75rem 1.25rem; border-radius: 10px; border: 1.5px solid #E0E5DB; background: #fff; color: #1A1A1A; font-family: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; } .confirmacao-btn:hover { border-color: #6B7280; } .confirmacao-ok { background: linear-gradient(135deg, #7ED321, #5BAF18); border-color: transparent; color: #1A1A1A; } .confirmacao-ok.e-perigo { background: #DC2626; color: #fff; } @media (prefers-reduced-motion: reduce) { .confirmacao-fundo, .confirmacao-caixa { animation: none; } } /* ───────────────────────────────────────────────────────────── ALERTAS (popup de notificação) ───────────────────────────────────────────────────────────── */ .alertas-popup { position: fixed; z-index: 450; /* acima dos avisos (400), abaixo da confirmação (500) */ display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; /* MOBILE: por baixo, perto do polegar e longe do notch */ left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); } @media (min-width: 768px) { .alertas-popup { left: auto; right: 1rem; top: 1rem; bottom: auto; max-width: 380px; } } .alerta-popup { pointer-events: auto; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 14px; border-left: 4px solid; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.16); font-size: 0.9375rem; animation: alerta-entra 260ms cubic-bezier(0.34,1.56,0.64,1); } @keyframes alerta-entra { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .alerta-popup.saindo { animation: alerta-sai 200ms ease forwards; } @keyframes alerta-sai { to { opacity: 0; transform: translateY(-8px); } } .alerta-urgente { border-left-color: #DC2626; } .alerta-atencao { border-left-color: #F59E0B; } .alerta-icone { font-size: 1.25rem; flex-shrink: 0; line-height: 1.2; } .alerta-corpo { flex: 1; min-width: 0; } .alerta-titulo { display: block; font-weight: 800; color: #1A1A1A; line-height: 1.3; } .alerta-texto { display: block; font-size: 0.875rem; color: #4B5563; margin-top: 2px; overflow-wrap: anywhere; } .alerta-acao { display: inline-block; margin-top: 0.5rem; min-height: 36px; line-height: 36px; padding: 0 0.875rem; border-radius: 8px; background: #1A1F16; color: #fff; font-size: 0.8125rem; font-weight: 700; text-decoration: none; } .alerta-acao:hover { background: #3F6212; } .alerta-fechar { flex-shrink: 0; width: 28px; height: 28px; margin: -2px -4px 0 0; display: grid; place-items: center; background: none; border: none; border-radius: 6px; color: #6B7280; font-size: 1.25rem; line-height: 1; cursor: pointer; } .alerta-fechar:hover { background: rgba(0,0,0,0.06); color: #1A1A1A; } @media (prefers-reduced-motion: reduce) { .alerta-popup, .alerta-popup.saindo { animation: none; } } /* Contador ao lado de item de menu */ .badge-menu { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto; border-radius: 9999px; background: #DC2626; color: #fff; font-size: 11px; font-weight: 800; } .badge-menu[hidden] { display: none; }