:root{ --bg:#0b0f14; --card:#121821; --muted:#94a3b8; --text:#e2e8f0; --accent:#3b82f6; --accent-700:#2563eb; --danger:#ef4444; --ring:0 0 0 3px rgba(59,130,246,.25); } *{ box-sizing:border-box; } html,body{ height:100%; } /* 🔵 Antes era body { ... } — agora é body.page-login { ... } */ body.page-login{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background: radial-gradient(1200px 600px at 50% -10%, #1e293b40, transparent), radial-gradient(800px 400px at 10% 80%, #0ea5e980, transparent), radial-gradient(600px 600px at 90% 70%, #3b82f640, transparent), var(--bg); display:flex; /* centraliza só a tela de login */ align-items:center; justify-content:center; padding:24px; } /* Para as outras páginas (sem page-login), mantemos visual base sem centralizar */ body{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background: radial-gradient(1200px 600px at 50% -10%, #1e293b40, transparent), radial-gradient(800px 400px at 10% 80%, #0ea5e980, transparent), radial-gradient(600px 600px at 90% 70%, #3b82f640, transparent), var(--bg); /* sem display:flex; sem padding forçado */ } /* componentes da tela de login */ .container{ width:100%; max-width:420px; } .card{ background:color-mix(in oklab, var(--card) 92%, black); border:1px solid #1f2937; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.35); overflow:hidden; backdrop-filter:blur(6px); } .header{ padding:24px 24px 8px; text-align:center; } .logo{ font-weight:700; letter-spacing:.08em; color:var(--muted); font-size:12px; } .title{ margin:8px 0 4px; font-size:24px; } .subtitle{ margin:0; color:var(--muted); font-size:14px; } .form{ padding:16px 24px 24px; } .field{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; } label{ font-size:13px; color:var(--muted); } input[type="text"], input[type="password"]{ width:100%; padding:12px 14px; font-size:16px; color:var(--text); background:#0b1220; border:1px solid #1f2a38; border-radius:10px; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; } input::placeholder{ color:#6b7280; } input:focus{ border-color:var(--accent); box-shadow:var(--ring); background:#0a1426; } .password-wrapper{ position:relative; } .password-wrapper .toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:transparent; cursor:pointer; font-size:16px; opacity:.8; color:var(--muted); } .password-wrapper .toggle:focus{ outline:none; box-shadow:var(--ring); border-radius:8px; } .error{ color:var(--danger); min-height:18px; font-size:12px; } .extras{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 14px; gap:8px; } .remember{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); } .help{ font-size:13px; color:var(--accent); text-decoration:none; } .help[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; } .btn{ width:100%; padding:12px 16px; border:none; border-radius:10px; font-weight:600; background:linear-gradient(180deg, var(--accent), var(--accent-700)); color:white; cursor:pointer; transition:transform .05s ease, filter .15s ease; } .btn:active{ transform:translateY(1px); } .btn:disabled{ opacity:.6; cursor:not-allowed; } .hint{ margin:12px 0 0; color:var(--muted); font-size:12px; text-align:center; } .footer{ text-align:center; margin-top:10px; color:var(--muted); font-size:12px; } /* ========================================================= [APPENDED ONLY] Painel — layout 5 cards por linha (escopado) Só aplica quando ========================================================= */ .page-painel #wrap{ max-width: 1366px; margin: 0 auto; padding: 8px 10px; } .page-painel #grid{ display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 10px; align-content: start; } .page-painel .card{ padding: 12px; font-size: 12.5px; line-height: 1.25; } .page-painel .card .title-row{ margin-bottom: 6px; } .page-painel .card .title-row strong{ font-size: 14px; } .page-painel .card .badge{ font-size: 11px; padding: 2px 8px; } .page-painel .card .k{ padding: 2px 0; } .page-painel .m1-progress-track{ height: 8px; } .page-painel .m1-meta{ font-size: 11px; } @media (max-width: 1280px){ .page-painel #grid{ grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 8px; } .page-painel .card{ font-size: 12px; } } /* ========================================================= [APPENDED ONLY] Ficha de Apontamento — compacta 1366×768 (escopada) Só aplica quando ========================================================= */ .page-apontamento #wrap{ max-width: 1366px; margin: 0 auto; padding: 12px 14px; } .page-apontamento h1{ font-size: 28px; margin: 0 0 6px; } .page-apontamento .clock, .page-apontamento .relogio{ font-size: 40px !important; } .page-apontamento .clock-wrap{ transform: scale(0.92); transform-origin: top right; } .page-apontamento .card{ padding: 12px; border-radius: 12px; } .page-apontamento .card h2, .page-apontamento .card .section-title{ font-size: 18px; margin: 8px 0 6px; } .page-apontamento .muted, .page-apontamento label{ font-size: 13px; } .page-apontamento input[type="text"], .page-apontamento input[type="number"], .page-apontamento input[type="password"], .page-apontamento select, .page-apontamento .input, .page-apontamento .select{ height: 36px; font-size: 14px; padding: 6px 10px; } .page-apontamento .k, .page-apontamento .row, .page-apontamento .form-row{ padding: 4px 0; } .page-apontamento .group{ margin-bottom: 10px; } .page-apontamento .card + .card{ margin-top: 12px; } /* Métricas em grid (3 colunas) */ .page-apontamento .metrics-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } .page-apontamento .metric-card{ padding: 10px 12px; } /* Ações sticky e botões compactos */ .page-apontamento .sticky-actions{ position: sticky; top: 10px; } .page-apontamento .actions-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } .page-apontamento .actions-grid .wide{ grid-column: 1 / -1; } .page-apontamento .btn{ padding: 8px 10px; font-size: 14px; border-radius: 10px; } .page-apontamento .btn-warn{ background: #b45309; } .page-apontamento .btn-danger{ background: #b91c1c; } @media (max-width: 1280px){ .page-apontamento #wrap{ max-width: 1280px; padding: 10px 12px; } .page-apontamento .metrics-grid{ gap: 8px; } .page-apontamento .btn{ font-size: 13.5px; padding: 7px 9px; } }