:root{--bg: #eef3f2;--surface: #ffffff;--ink: #14231f;--muted: #65746f;--line: #d7e1de;--primary: #146c63;--primary-dark: #0f514a;--accent: #c45d36;--ok: #1f7a4d;--warn: #946200;--bad: #b42318;--shadow: 0 16px 42px rgba(20, 35, 31, .12)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(100%,520px);min-height:100vh;margin:0 auto;background:linear-gradient(180deg,#f9fbfb,#eef3f2)}.screen{min-height:100vh;padding:max(18px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom))}.hidden{display:none!important}.auth-screen{display:grid;gap:18px;align-content:center}.brand-card{padding:10px 2px 4px}.app-icon{width:62px;height:62px;border-radius:14px;background:#fff;box-shadow:var(--shadow);object-fit:cover}.eyebrow{display:block;margin-top:18px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:0;text-transform:uppercase}h1,h2,p{margin:0}.brand-card h1{margin-top:8px;font-size:36px;line-height:1.04}.brand-card p{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.55}.panel,.status-card,.clock-panel{border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow)}.form-grid{display:grid;gap:14px;padding:16px}label{display:grid;gap:6px;color:#314640;font-size:13px;font-weight:800}input{width:100%;min-height:46px;border:1px solid #c9d7d3;border-radius:8px;background:#fff;color:var(--ink);padding:10px 12px}input:focus{border-color:var(--primary);outline:3px solid rgba(20,108,99,.16)}.primary-button,.secondary-button,.text-button,.icon-button,.punch-button{min-height:46px;border-radius:8px;border:1px solid transparent;padding:0 14px;font-weight:800}.primary-button{background:var(--primary);color:#fff}.secondary-button{border-color:var(--primary);background:#ecf7f5;color:var(--primary-dark)}.text-button,.icon-button{border-color:var(--line);background:#fff;color:var(--primary-dark)}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.topbar .eyebrow{margin-top:0}.topbar h1{margin-top:4px;font-size:30px;line-height:1.1}.icon-button{min-width:76px}.message-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:#0d181594}.message-dialog{display:grid;width:min(100%,360px);gap:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:18px;box-shadow:var(--shadow);text-align:center}.message-icon{display:grid;width:48px;height:48px;place-items:center;justify-self:center;border-radius:999px;background:#ecf7f5;color:var(--ok);font-size:24px;font-weight:800}.message-icon:before{content:"OK"}.message-dialog.error .message-icon{background:#fdecea;color:var(--bad)}.message-dialog.error .message-icon:before{content:"!"}.message-dialog h2{font-size:20px}.message-dialog p{color:var(--muted);font-size:15px;line-height:1.45;overflow-wrap:anywhere}.clock-panel{display:grid;justify-items:center;gap:2px;padding:20px 14px}.clock-panel span{font-size:54px;font-weight:800;line-height:1}.clock-panel small{color:var(--muted)}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.status-card{min-height:108px;padding:12px}.status-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.status-card span,.status-card small{color:var(--muted)}.status-card strong{display:block;margin:8px 0 6px;font-size:18px}.status-icon-button{display:grid;width:40px;min-width:40px;height:40px;min-height:40px;place-items:center;border:1px solid rgba(20,108,99,.24);border-radius:999px;background:linear-gradient(180deg,#f6fffd,#dff2ef);color:var(--primary-dark);padding:0;box-shadow:0 8px 18px #146c631f}.status-icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.status-icon-button:hover{border-color:#146c636b;background:#ecf7f5}.status-icon-button:active{transform:scale(.97)}.capture-panel{overflow:hidden}.liveness-challenge{display:grid;gap:4px;border-bottom:1px solid var(--line);background:#fff8e5;padding:12px}.liveness-challenge span,.liveness-challenge small{color:var(--muted);font-size:12px}.liveness-challenge strong{font-size:18px}.camera-frame{position:relative;display:grid;aspect-ratio:4 / 3;overflow:hidden;background:#101c19}video,.photo-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.camera-frame.has-photo video{display:none}.camera-frame:not(.has-stream):not(.has-photo):after{content:"Toque no icone da camera para iniciar";display:grid;height:100%;place-items:center;padding:20px;color:#d9e7e3;font-weight:800;text-align:center}.photo-preview{background-position:center;background-size:cover}.live-status{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;border:1px solid rgba(255,255,255,.24);border-radius:8px;background:#08120fb8;color:#fff;padding:10px 12px;font-size:13px;font-weight:800;text-align:center}.live-status.ok{border-color:#ffffff5c;background:#146c63e0}.panel-header{display:flex;min-height:56px;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:12px}.panel-header h2{font-size:18px}.panel-header span{color:var(--muted);font-size:12px}.panel-tools{display:flex;align-items:center;gap:8px}.month-filter{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:800}.month-filter input{width:132px;min-height:38px;padding:7px 8px}.punch-panel{margin-top:12px}.punch-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.punch-button{min-height:70px;background:var(--primary);color:#fff}.punch-button:nth-child(2),.punch-button:nth-child(3){background:#2f647d}.punch-button:nth-child(4){background:#783f36}.history-list{display:grid}.history-item{display:grid;grid-template-columns:1fr auto;gap:8px;border-bottom:1px solid var(--line);padding:12px}.history-item:last-child{border-bottom:0}.history-item strong{display:block}.history-item small{color:var(--muted)}.badge{align-self:center;border-radius:999px;padding:6px 10px;background:#fff5d6;color:var(--warn);font-size:12px;font-weight:800}.badge.ok{background:#e9f7ef;color:var(--ok)}@media(max-width:390px){.brand-card h1{font-size:31px}.punch-grid,.status-grid{grid-template-columns:1fr}.clock-panel span{font-size:46px}.panel-header{align-items:flex-start;flex-direction:column}.panel-tools{width:100%}.month-filter{flex:1}.month-filter input{width:100%}}
