/* ══════════════════════════════════════════════════════════════ SUPER PET — CONTROLE DE ACESSO Estilos para: blur de dados sensíveis + modal de senha do gerente Inserir no do index.html APÓS main.css ══════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────── 1. BLUR — Valores financeiros/sensíveis sem permissão ──────────────────────────────────────────────────────────── */ .ac-blurred { filter: blur(6px); user-select: none; pointer-events: none; transition: filter 0.3s ease; position: relative; } .ac-blurred::after { content: ''; position: absolute; inset: 0; cursor: not-allowed; } /* Wrapper relativo para o badge de cadeado */ .ac-blur-wrap { position: relative; display: inline-flex; align-items: center; } .ac-blur-wrap .ac-lock-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--txt2); cursor: default; z-index: 2; gap: 4px; pointer-events: none; } /* Células de tabela/cards com valor bloqueado */ .ac-cell-blurred { position: relative; } .ac-cell-blurred .ac-val { filter: blur(5px); user-select: none; } .ac-cell-blurred .ac-lock-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; color: var(--txt3); pointer-events: none; z-index: 2; } /* ──────────────────────────────────────────────────────────── 2. BOTÕES BLOQUEADOS — Tom visual diferenciado ──────────────────────────────────────────────────────────── */ .ac-btn-locked { opacity: 0.65; cursor: pointer !important; /* Mantém cursor normal — só trava com senha */ position: relative; } .ac-btn-locked::after { content: '🔒'; font-size: 9px; position: absolute; top: -4px; right: -4px; line-height: 1; } /* ──────────────────────────────────────────────────────────── 3. MODAL DE SENHA DO GERENTE ──────────────────────────────────────────────────────────── */ #ac-manager-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 99999; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: fadeIn 0.18s ease; } #ac-manager-overlay.active { display: flex; } #ac-manager-modal { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; width: 100%; max-width: 380px; position: relative; animation: fadeUp 0.22s ease; box-shadow: 0 24px 60px rgba(0,0,0,0.5); } #ac-manager-modal .ac-modal-icon { font-size: 36px; text-align: center; display: block; margin-bottom: 12px; } #ac-manager-modal h3 { font-size: 16px; font-weight: 700; color: var(--txt); text-align: center; margin: 0 0 4px; } #ac-manager-modal .ac-modal-sub { font-size: 12px; color: var(--txt2); text-align: center; margin: 0 0 22px; } #ac-manager-modal .ac-action-label { display: inline-block; background: rgba(245, 166, 35, 0.12); border: 1px solid rgba(245, 166, 35, 0.3); color: var(--amber); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; margin-bottom: 18px; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ac-manager-modal label { display: block; font-size: 11px; font-weight: 600; color: var(--txt2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } #ac-manager-pwd { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 14px; color: var(--txt); font-family: var(--mono, monospace); letter-spacing: 3px; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; } #ac-manager-pwd:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15); } #ac-manager-pwd.ac-pwd-error { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(255, 69, 69, 0.15) !important; animation: ac-shake 0.35s ease; } @keyframes ac-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } #ac-manager-error { font-size: 12px; color: var(--red); margin-top: 6px; min-height: 16px; display: none; } #ac-manager-error.show { display: block; } .ac-modal-btns { display: flex; gap: 10px; margin-top: 22px; } .ac-modal-btns .ac-btn-cancel { flex: 1; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--txt2); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.2s; } .ac-modal-btns .ac-btn-cancel:hover { background: var(--border); } .ac-modal-btns .ac-btn-confirm { flex: 2; padding: 10px; background: linear-gradient(135deg, #f5a623, #f97316); border: none; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .ac-modal-btns .ac-btn-confirm:hover { opacity: 0.9; } .ac-modal-btns .ac-btn-confirm:active { transform: scale(0.98); } .ac-modal-btns .ac-btn-confirm:disabled { opacity: 0.6; cursor: not-allowed; } /* ──────────────────────────────────────────────────────────── 4. AVISO DE RESTRIÇÃO DE ACESSO (páginas/seções) ──────────────────────────────────────────────────────────── */ .ac-restricted-banner { display: flex; align-items: center; gap: 10px; background: rgba(245, 166, 35, 0.08); border: 1px solid rgba(245, 166, 35, 0.25); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 12px; color: var(--txt2); } .ac-restricted-banner .ac-banner-icon { font-size: 16px; } .ac-restricted-banner strong { color: var(--amber); }