/* ========================================================= MA CRIATIVA — Sistema de Senhas Identidade Visual Centralizada Cores oficiais: #00AE9C · #4A479E · #75C042 · #ffffff Fonte: Inter (Google Fonts, importada no de cada página) ========================================================= */ :root{ /* Paleta oficial da marca */ --teal:#00AE9C; --teal-dark:#00917F; --purple:#4A479E; --purple-dark:#3A3780; --green:#75C042; --green-dark:#5F9E35; --white:#ffffff; /* Exceções semânticas (fora da paleta, de propósito) */ --danger:#e74c3c; --danger-dark:#c0392b; --danger-bg:#fadbd8; --warning:#f39c12; --warning-dark:#d68910; /* Neutros de apoio (texto e fundos, não fazem parte da identidade) */ --bg:#f5f5f5; --text:#333333; --text-light:#999999; --text-mid:#555555; --border:#e0e0e0; --border-light:#eeeeee; --surface-alt:#f9f9f9; /* Tons derivados usados em fundos claros de badges */ --teal-tint:#DFF5F2; --purple-tint:#ECEBF7; --green-tint:#EEF7E5; } /* ---------- Reset & base ---------- */ *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background:var(--bg); color:var(--text); } .hidden{ display:none !important; } /* ---------- Tela de Login (usada em index.html, operador.html, Configurador.html) ---------- */ .login-screen{ display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg, var(--teal) 0%, var(--purple) 100%); padding:20px; } .login-card{ background:var(--white); padding:50px; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.3); width:100%; max-width:400px; } .login-logo-text{ font-size:26px; font-weight:800; color:var(--teal); letter-spacing:2px; text-align:center; } .login-logo-subtext{ font-size:12px; color:var(--text-light); margin-top:8px; letter-spacing:1px; text-align:center; margin-bottom:30px; } .login-title{ font-size:24px; font-weight:700; margin-bottom:30px; text-align:center; color:var(--text); } .login-error{ background:var(--danger-bg); color:var(--danger-dark); padding:14px 15px; border-radius:8px; margin-bottom:18px; display:none; font-size:13px; border-left:4px solid var(--danger-dark); } .login-success{ background:#d5f4e6; color:var(--green-dark); padding:14px 15px; border-radius:8px; margin-bottom:18px; display:none; font-size:13px; border-left:4px solid var(--green-dark); } /* ---------- Formulários ---------- */ .form-group{ margin-bottom:18px; display:flex; flex-direction:column; } label{ font-weight:600; margin-bottom:8px; color:var(--text-mid); font-size:14px; } input, select, textarea{ padding:12px; border:1px solid #ddd; border-radius:6px; font-size:14px; font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease; } input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,174,156,0.15); } textarea{ resize:vertical; min-height:80px; } /* ---------- Botões ---------- */ .btn{ padding:12px 24px; border:none; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn-primary{ background:linear-gradient(135deg, var(--teal) 0%, var(--purple) 100%); color:var(--white); } .btn-primary:hover{ box-shadow:0 10px 25px rgba(0,174,156,0.3); } .btn-secondary{ background:var(--purple); color:var(--white); } .btn-secondary:hover{ background:var(--purple-dark); } .btn-success{ background:linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); color:var(--white); } .btn-success:hover{ box-shadow:0 10px 25px rgba(117,192,66,0.3); } .btn-danger, .btn-logout{ background:var(--danger); color:var(--white); } .btn-danger:hover, .btn-logout:hover{ background:var(--danger-dark); } .btn-cancel{ background:var(--purple); color:var(--white); } .btn-cancel:hover{ background:var(--purple-dark); } .btn-block{ width:100%; } .btn-back{ background:#f0f0f0; color:var(--text); text-decoration:none; display:inline-flex; align-items:center; padding:10px 18px; border-radius:6px; font-size:13px; font-weight:600; } .btn-back:hover{ background:#e6e6e6; } /* ---------- Cartões / painéis ---------- */ .card{ background:var(--white); padding:24px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.1); } .card h3{ font-size:16px; margin-bottom:18px; color:var(--text); border-bottom:2px solid var(--teal); padding-bottom:10px; } /* ---------- Badges ---------- */ .badge{ padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700; display:inline-block; } .badge-teal{ background:var(--teal-tint); color:var(--teal-dark); } .badge-purple{ background:var(--purple-tint); color:var(--purple); } .badge-green{ background:var(--green-tint); color:var(--green-dark); } /* ---------- Cabeçalho padrão de telas internas (index, operador, Configurador) ---------- */ .app-header{ background:var(--white); padding:22px 26px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.1); margin-bottom:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; } .app-title{ font-size:22px; font-weight:800; color:var(--text); } .app-subtitle{ font-size:13px; color:var(--text-light); margin-top:4px; } .header-right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .user-badge{ display:flex; align-items:center; gap:10px; padding:8px 18px; background:#f0f0f0; border-radius:20px; font-size:13px; } .user-avatar{ width:32px; height:32px; background:linear-gradient(135deg, var(--teal) 0%, var(--purple) 100%); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); font-weight:700; font-size:14px; flex-shrink:0; }