/* PontoPro Digital — Sistema de Controle de Ponto
 * Estilos principais
 * Gerado em 23/03/2026
 */

:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface2: #f0f1f7;
  --border: #e4e6ef;
  --text: #1a1d2e;
  --text2: #6b7290;
  --text3: #9499b7;
  --primary: #2563eb;
  --primary-light: #eff4ff;
  --primary-dark: #1d4ed8;
  --success: #10b981;
  --success-light: #ecfdf5;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --info: #6366f1;
  --info-light: #eef2ff;
  --sidebar-w: 248px;
  --header-h: 60px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --transition: .2s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1d2e;
  --surface2: #252840;
  --border: #2e3250;
  --text: #e8eaf6;
  --text2: #9499b7;
  --text3: #5c6180;
  --primary-light: #1e2a4a;
  --success-light: #0d2d22;
  --warning-light: #2d2410;
  --danger-light: #2d1515;
  --info-light: #1e1f3a;
  --shadow: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.5;transition:background var(--transition),color var(--transition);min-height:100vh;overflow-x:hidden}
body:not(.page-leaving) .public-page{animation:publicPageEnter .28s ease}
body.page-leaving.page-to-login .public-page{animation:publicPageExitToLogin .18s ease forwards}
body.page-leaving.page-to-landing .public-page{animation:publicPageExitToLanding .18s ease forwards}
body.page-enter-login .public-page{animation:publicPageEnterFromRight .24s ease}
body.page-enter-landing .public-page{animation:publicPageEnterFromLeft .24s ease}

@keyframes publicPageEnter{
  from{opacity:0}
  to{opacity:1}
}

@keyframes publicPageExitToLogin{
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(-10px)}
}

@keyframes publicPageExitToLanding{
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(10px)}
}

@keyframes publicPageEnterFromRight{
  from{opacity:0;transform:translateX(10px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes publicPageEnterFromLeft{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:translateX(0)}
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}

/* ── LOGIN ── */
.login-wrap{display:flex;min-height:100vh;align-items:stretch;background:linear-gradient(180deg,#eff6ff 0%,#f8fafc 100%);overflow:hidden;width:100vw}
.public-page{width:100vw}
html.has-session .public-page{display:none !important}
html.has-session .login-wrap{display:none}
.login-brand{flex:1;background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 45%,#0ea5e9 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6.25rem 3rem 3rem;position:relative;overflow:hidden;transition:flex-basis .38s ease,transform .38s ease,filter .38s ease}
#landingPage .login-brand{flex:1 1 100%;width:100%}
.login-form-side{display:flex;flex:0 0 440px;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border-left:1px solid rgba(148,163,184,.18);transform:translateX(108%);opacity:0;pointer-events:none;transition:transform .38s ease,opacity .24s ease}
.login-screen .login-form-side{transform:none;opacity:1;pointer-events:auto}
.login-screen .login-brand{flex:.82;transform:none;filter:none}
.login-screen{align-items:stretch}
.login-screen .login-form-side{align-self:stretch;justify-content:flex-start;padding-top:7.5rem}
.login-route .login-screen .login-form-side{justify-content:center;padding-top:2rem}
.login-route .login-screen .login-brand{flex:.88}
.login-wrap.show-access .login-form-side{transform:translateX(0);opacity:1;pointer-events:auto}
.login-wrap.show-access .login-brand{flex:.78;transform:translateX(-14px);filter:saturate(.94)}
.login-brand::before{content:'';position:absolute;top:-30%;right:-20%;width:500px;height:500px;background:rgba(255,255,255,.04);border-radius:50%}
.login-brand::after{content:'';position:absolute;bottom:-20%;left:-10%;width:350px;height:350px;background:rgba(255,255,255,.04);border-radius:50%}
.brand-content{position:relative;z-index:1;color:#fff;width:100%;max-width:980px}
.landing-hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:2rem;align-items:center;transition:transform .38s ease,opacity .28s ease}
.login-wrap.show-access .landing-hero{transform:translateX(-10px) scale(.985)}
.brand-logo{font-size:2rem;font-weight:600;letter-spacing:-1px;margin-bottom:.5rem}
.brand-logo-large{font-size:3.1rem;margin-bottom:1rem}
.brand-logo span{color:#7dd3fc}
.brand-tagline{font-size:1.02rem;opacity:.9;margin-bottom:1.4rem;max-width:560px;line-height:1.6}
.brand-stats{display:flex;gap:2rem;margin-top:2rem}
.bstat{text-align:center;color:#fff}
.bstat-n{font-size:2rem;font-weight:600;display:block}
.bstat-l{font-size:.8rem;opacity:.7}
.landing-topbar{position:absolute;top:1.35rem;left:2rem;right:2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;width:auto;z-index:2}
.landing-toplinks{display:flex;gap:.95rem;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-left:auto}
.landing-top-btn{font-size:.9rem;font-weight:800;padding:.86rem 1.45rem;border-radius:14px;min-width:160px}
.landing-top-btn-light{background:transparent;color:#ffffff;border:1px solid rgba(255,255,255,.55)}
.landing-top-btn-light:hover{background:rgba(255,255,255,.08);border-color:#ffffff;color:#ffffff}
.landing-top-btn-primary{padding-inline:1.6rem;background:#ffffff;color:#1d4ed8;border:1px solid #ffffff}
.landing-top-btn-primary:hover{background:#eff6ff;border-color:#eff6ff;color:#1e40af}
.landing-copy{min-width:0}
.landing-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);font-size:.78rem;font-weight:600;margin-bottom:1rem}
.landing-feature-list{display:flex;flex-direction:column;gap:.65rem;margin-top:1.15rem}
.landing-feature-list div{font-size:.88rem;opacity:.94;display:flex;align-items:center;gap:.55rem}
.landing-feature-list div::before{content:'✦';color:#7dd3fc}
.landing-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.35rem}
.landing-cta{min-width:210px}
.landing-cta.alt{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.landing-cta.alt:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}
.landing-showcase{position:relative;height:520px;display:flex;align-items:center;justify-content:center}
.landing-glow{position:absolute;inset:auto 24px 20px auto;width:220px;height:220px;border-radius:50%;background:rgba(125,211,252,.18);filter:blur(18px)}
.phone-mock{position:absolute;border-radius:34px;background:#0f172a;padding:12px;box-shadow:0 20px 60px rgba(15,23,42,.35);border:1px solid rgba(255,255,255,.12)}
.phone-main{width:280px;right:22px;top:22px;transform:rotate(5deg)}
.phone-float{width:230px;left:10px;bottom:36px;transform:rotate(-8deg)}
.phone-notch{width:110px;height:18px;border-radius:0 0 14px 14px;background:#0b1120;margin:0 auto 10px}
.phone-screen{background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);border-radius:24px;padding:16px;min-height:470px;color:#0f172a}
.phone-screen-alt{min-height:330px}
.screen-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}
.screen-header.compact{margin-bottom:.75rem}
.screen-eyebrow{font-size:.72rem;color:#2563eb;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.screen-title{font-size:1.05rem;font-weight:800;color:#0f172a}
.screen-chip{background:#dcfce7;color:#166534;border-radius:999px;padding:.25rem .55rem;font-size:.72rem;font-weight:700}
.screen-kpis{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.9rem}
.screen-kpis span{padding:.25rem .55rem;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.7rem;font-weight:700}
.screen-photo-card,.screen-request-card{margin-top:1rem;background:#fff;border-radius:18px;padding:.9rem;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.screen-photo-card{display:flex;align-items:center;gap:.8rem}
.screen-photo-circle{width:48px;height:48px;border-radius:16px;background:#dbeafe;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:1rem}
.screen-timeline{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem}
.screen-line{display:flex;justify-content:space-between;align-items:center;padding:.7rem .8rem;background:rgba(255,255,255,.72);border-radius:14px;font-size:.78rem}
.screen-line strong{font-family:'DM Mono',monospace;color:#0f172a}
.screen-request-status{display:inline-flex;padding:.2rem .55rem;border-radius:999px;background:#dcfce7;color:#166534;font-size:.68rem;font-weight:700;margin-bottom:.55rem}
.screen-request-status.pending{background:#fef3c7;color:#92400e}
.screen-request-card.soft{background:#f8fafc}
.brand-dots{display:flex;gap:6px;margin-top:3rem}
.brand-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3)}
.brand-dots span.active{background:#fff;width:24px;border-radius:4px}
.login-form-wrap{width:100%;max-width:380px}
.login-form-wrap h2{font-size:1.6rem;font-weight:600;margin-bottom:.4rem;color:var(--text)}
.login-form-wrap p{color:var(--text2);margin-bottom:2rem;font-size:.9rem}
.login-access-head{display:flex;justify-content:flex-start;margin-bottom:.75rem}
.login-screen .login-form-wrap{max-width:420px}
.login-screen #loginAccess{display:flex;flex-direction:column;justify-content:flex-start;min-height:auto;width:100%}
.login-route .login-screen #loginAccess{justify-content:center;min-height:100%}
.login-wrap.show-access .login-form-wrap{animation:loginPanelIn .42s ease}
@keyframes loginPanelIn{
  from{opacity:0;transform:translateX(22px)}
  to{opacity:1;transform:translateX(0)}
}
.login-marketing-card{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid var(--border);border-radius:22px;padding:1rem 1rem 1.1rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm)}
.login-marketing-badge{display:inline-flex;padding:.3rem .65rem;border-radius:999px;background:var(--primary-light);color:var(--primary);font-size:.75rem;font-weight:700;margin-bottom:.65rem}
.login-marketing-points{display:flex;flex-direction:column;gap:.45rem;margin-top:.9rem}
.login-marketing-points span{font-size:.8rem;color:var(--text2);display:flex;align-items:center;gap:.45rem}
.login-marketing-points i{color:var(--success)}
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-size:.85rem;font-weight:500;color:var(--text2);margin-bottom:.4rem}
.form-control{width:100%;padding:.7rem 1rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:inherit;font-size:.9rem;transition:border-color var(--transition),box-shadow var(--transition);outline:none}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.input-icon-wrap{position:relative}
.input-icon-wrap .form-control{padding-left:2.4rem}
.input-icon-wrap .input-icon{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--text3);font-size:.85rem}
.input-icon-wrap .input-toggle{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);color:var(--text3);cursor:pointer;font-size:.85rem;background:none;border:none;color:var(--text3)}
.form-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.form-check{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--text2);cursor:pointer}
.form-check input{accent-color:var(--primary)}
.link{color:var(--primary);text-decoration:none;font-size:.85rem}
.link:hover{text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.2rem;border-radius:var(--radius-sm);font-family:inherit;font-size:.875rem;font-weight:500;border:none;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.35)}
.btn-primary:active{transform:translateY(0)}
.btn-full{width:100%}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-outline:hover{background:var(--surface2);border-color:var(--text3)}
.btn-sm{padding:.4rem .8rem;font-size:.8rem}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#059669}
.btn-ghost{background:transparent;color:var(--text2);border:none}
.btn-ghost:hover{background:var(--surface2);color:var(--text)}
.divider{display:flex;align-items:center;gap:1rem;margin:1.2rem 0;color:var(--text3);font-size:.8rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.social-btns{display:flex;gap:.8rem}
.onboarding-trigger{margin-top:1rem}
.btn-social{flex:1;background:var(--bg);border:1.5px solid var(--border);color:var(--text);font-size:.82rem}
.btn-social:hover{background:var(--surface2)}
.btn-social img{width:16px;height:16px}

body.login-route{background:#eef4ff;overflow-x:hidden}
.login-route-shell{display:grid;grid-template-columns:minmax(0,1fr) 460px;min-height:100vh;width:100vw;max-width:100vw;background:#eef4ff;overflow:hidden}
.login-route-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 45%,#0ea5e9 100%);padding:1.35rem 2rem 2rem;display:flex;flex-direction:column}
.login-route-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2.25rem;position:relative;z-index:2}
.login-route-copy{position:relative;z-index:1;max-width:540px;color:#fff;padding-top:4rem}
.login-route-copy h1{font-size:3rem;line-height:1.05;letter-spacing:-.04em;margin-bottom:1rem;font-weight:700}
.login-route-copy p{font-size:1rem;line-height:1.7;color:rgba(255,255,255,.84);margin-bottom:1rem}
.login-route-showcase{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:460px}
.login-route-access{display:flex;align-items:stretch;justify-content:center;background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);padding:2rem 1.75rem;border-left:1px solid rgba(148,163,184,.18)}
.login-route-card{width:100%;max-width:390px;margin:auto;background:#ffffff;border:1px solid rgba(148,163,184,.2);border-radius:28px;box-shadow:0 24px 70px rgba(37,99,235,.10);padding:1.5rem 1.35rem}
.login-route-badge{display:inline-flex;padding:.32rem .68rem;border-radius:999px;background:var(--primary-light);color:var(--primary);font-size:.76rem;font-weight:700;margin-bottom:.8rem}
.login-route-card h2{font-size:2rem;line-height:1.1;font-weight:700;color:#111827;margin-bottom:.5rem}
.login-route-card p{font-size:.94rem;line-height:1.6;color:var(--text2);margin-bottom:1.15rem}
.login-inline-points{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.3rem}
.login-inline-points span{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--text2)}
.login-inline-points i{color:var(--success)}
.login-route-note{display:flex;align-items:flex-start;gap:.7rem;padding:1rem;border-radius:16px;background:#f8fafc;border:1px solid #dbe5f1;color:#475569;font-size:.83rem;line-height:1.55;margin-top:1rem}
.login-route-note i{color:var(--primary);margin-top:.1rem}
.login-route-meta{margin-top:1.35rem;text-align:center;font-size:.75rem;color:var(--text3)}

@media (max-width: 1100px){
  .login-route-shell{grid-template-columns:1fr}
  .login-route-access{padding:1.5rem;width:100%;min-width:0}
  .login-route-card{max-width:560px}
  .login-route-copy{padding-top:2rem;max-width:none}
  .login-route-copy h1{font-size:2.4rem}
}

/* ── APP SHELL ── */
.app{display:none;height:100vh;overflow:hidden}
.app.active{display:flex}
html.has-session .app{display:flex;visibility:hidden}
html.has-session .app.active{visibility:hidden}
html.has-session.app-ready .app.active{visibility:visible}
.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width var(--transition),transform var(--transition);overflow:hidden;position:relative;z-index:100}
.sidebar.collapsed{width:64px}
.sidebar-top{height:var(--header-h);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.sidebar-logo{font-size:1.2rem;font-weight:600;color:var(--primary);white-space:nowrap;overflow:hidden;letter-spacing:-.5px}
.sidebar-logo span{color:var(--text3)}
.sidebar-toggle{background:none;border:none;color:var(--text3);cursor:pointer;padding:.3rem;border-radius:6px;transition:all var(--transition);flex-shrink:0}
.sidebar-toggle:hover{background:var(--surface2);color:var(--text)}
.sidebar-nav{flex:1;overflow-y:auto;padding:.5rem .75rem;display:flex;flex-direction:column;gap:2px}
.nav-section{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);padding:.6rem .5rem .2rem;white-space:nowrap;overflow:hidden}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.55rem .65rem;border-radius:var(--radius-sm);color:var(--text2);cursor:pointer;transition:all var(--transition);white-space:nowrap;overflow:hidden;text-decoration:none;font-size:.875rem;font-weight:400;position:relative}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:var(--primary-light);color:var(--primary);font-weight:500}
.nav-item .nav-icon{font-size:.9rem;width:18px;text-align:center;flex-shrink:0}
.nav-item .nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:.65rem;padding:.1rem .35rem;border-radius:99px;font-weight:600;flex-shrink:0}
.nav-item .nav-label{overflow:hidden;text-overflow:ellipsis}
.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-section,.sidebar.collapsed .nav-badge{display:none}
.sidebar.collapsed .sidebar-logo{display:none}
.sidebar-bottom{padding:.75rem;border-top:1px solid var(--border)}
.user-mini{display:flex;align-items:center;gap:.6rem;padding:.5rem;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}
.user-mini:hover{background:var(--surface2)}
.user-mini .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#6366f1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:600;flex-shrink:0}
.user-mini .user-info{overflow:hidden}
.user-mini .user-name{font-size:.8rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-mini .user-role{font-size:.7rem;color:var(--text3);white-space:nowrap}
.sidebar.collapsed .user-info,.sidebar.collapsed .user-mini .fa-chevron-right{display:none}

/* ── MAIN ── */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.topbar{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 1.5rem;gap:1rem;flex-shrink:0}
.topbar-left{flex:1;display:flex;align-items:center;gap:.75rem}
.page-title{font-size:1rem;font-weight:600;color:var(--text)}
.breadcrumb{font-size:.78rem;color:var(--text3)}
.topbar-right{display:flex;align-items:center;gap:.5rem}
.topbar-btn{width:34px;height:34px;border-radius:var(--radius-sm);background:none;border:none;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);position:relative;font-size:.9rem}
.topbar-btn:hover{background:var(--surface2);color:var(--text)}
.topbar-sidebar-toggle{display:none}
.topbar-btn .badge-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
.topbar-btn-bell{width:40px;height:40px;border-radius:12px}
.topbar-btn-bell.has-alert{background:linear-gradient(180deg,var(--surface),var(--primary-light));color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border))}
.topbar-btn-bell.has-alert:hover{background:var(--primary-light);color:var(--primary-dark)}
.topbar-badge-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(239,68,68,.3)}
.page-content{flex:1;overflow-y:auto;padding:1.5rem;background:var(--bg)}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;transition:box-shadow var(--transition)}
.card:hover{box-shadow:var(--shadow-md)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.card-title{font-size:.9rem;font-weight:600;color:var(--text)}
.card-subtitle{font-size:.78rem;color:var(--text3);margin-top:.15rem}

/* ── STAT CARDS ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;display:flex;align-items:flex-start;gap:.85rem;transition:all var(--transition)}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.stat-body .stat-label{font-size:.75rem;color:var(--text3);font-weight:500;margin-bottom:.2rem}
.stat-body .stat-value{font-size:1.5rem;font-weight:600;color:var(--text);line-height:1.1}
.stat-body .stat-change{font-size:.72rem;margin-top:.2rem}
.stat-body .stat-change.up{color:var(--success)}
.stat-body .stat-change.down{color:var(--danger)}
.stat-body .stat-change.neutral{color:var(--text3)}

/* ── BADGE ── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:99px;font-size:.72rem;font-weight:600}
.badge-success{background:var(--success-light);color:#059669}
.badge-warning{background:var(--warning-light);color:#b45309}
.badge-danger{background:var(--danger-light);color:#dc2626}
.badge-info{background:var(--info-light);color:var(--info)}
.badge-primary{background:var(--primary-light);color:var(--primary)}
.badge-neutral{background:var(--surface2);color:var(--text2)}

/* ── TABLE ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{text-align:left;padding:.7rem 1rem;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:.75rem 1rem;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg)}
.td-name{color:var(--text);font-weight:500}
.td-mono{font-family:'DM Mono',monospace;font-size:.78rem}

/* ── AVATAR ── */
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:#fff;flex-shrink:0}
.avatar-sm{width:26px;height:26px;font-size:.65rem}
.avatar-lg{width:44px;height:44px;font-size:.9rem}
.av-blue{background:linear-gradient(135deg,#2563eb,#6366f1)}
.av-green{background:linear-gradient(135deg,#10b981,#0ea5e9)}
.av-red{background:linear-gradient(135deg,#ef4444,#f97316)}
.av-purple{background:linear-gradient(135deg,#8b5cf6,#ec4899)}
.av-amber{background:linear-gradient(135deg,#f59e0b,#ef4444)}

/* ── SEARCH / FILTER BAR ── */
.filter-bar{display:flex;gap:.75rem;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap}
.search-input{flex:1;min-width:200px;position:relative}
.search-input input{width:100%;padding:.55rem .9rem .55rem 2.2rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:.85rem;outline:none;transition:border-color var(--transition)}
.search-input input:focus{border-color:var(--primary)}
.search-input .si-icon{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--text3);font-size:.8rem}
.select-filter{padding:.53rem .8rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:.82rem;outline:none;cursor:pointer}

/* ── PROGRESS ── */
.progress{height:6px;background:var(--surface2);border-radius:99px;overflow:hidden}
.progress-bar{height:100%;border-radius:99px;transition:width .6s ease}

/* ── PONTO BUTTONS ── */
.ponto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem;margin-bottom:1.5rem}
.ponto-btn{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:1.5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;cursor:pointer;transition:all var(--transition);font-family:inherit}
.ponto-btn:hover{border-color:var(--primary);background:var(--primary-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.ponto-btn.active{border-color:var(--primary);background:var(--primary-light)}
.ponto-btn.done{border-color:var(--success);background:var(--success-light);pointer-events:none}
.ponto-btn .ponto-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.ponto-btn .ponto-label{font-size:.82rem;font-weight:500;color:var(--text);text-align:center}
.ponto-btn .ponto-time{font-size:.78rem;color:var(--text3);font-family:'DM Mono',monospace}
.camera-box{position:relative;border:1px dashed var(--border);border-radius:var(--radius-sm);background:var(--bg);min-height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.camera-video,.camera-preview{width:100%;height:220px;object-fit:cover;background:#0f172a}
.camera-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;color:var(--text3);font-size:.8rem;padding:1rem;text-align:center}
.camera-placeholder i{font-size:1.6rem;color:var(--primary)}

/* ── TIMELINE ── */
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:1rem;padding:.8rem 0;position:relative}
.tl-item:not(:last-child)::after{content:'';position:absolute;left:15px;top:40px;bottom:-8px;width:2px;background:var(--border)}
.tl-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;position:relative;z-index:1}
.tl-content{flex:1;padding-top:.35rem}
.tl-title{font-size:.85rem;font-weight:500;color:var(--text)}
.tl-time{font-size:.75rem;color:var(--text3);font-family:'DM Mono',monospace;margin-top:.1rem}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(2px)}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:var(--radius);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}
.modal-title{font-size:1rem;font-weight:600}
.modal-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1.1rem;padding:.25rem;border-radius:6px;transition:all var(--transition)}
.modal-close:hover{background:var(--surface2);color:var(--text)}
.modal-body{padding:1.5rem}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;gap:.75rem;justify-content:flex-end}
.onboarding-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.onboarding-card{border:1px solid var(--border);background:var(--surface2);border-radius:18px;padding:1rem}
.onboarding-icon{width:44px;height:44px;border-radius:14px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.8rem}
.onboarding-title{font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:.35rem}
.onboarding-text{font-size:.8rem;line-height:1.55;color:var(--text2)}
.onboarding-highlight{margin-top:1rem;padding:1rem;border-radius:18px;background:linear-gradient(135deg,var(--primary-light),rgba(37,99,235,.06));border:1px solid rgba(37,99,235,.12)}

/* ── ALERTS / TOAST ── */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.7rem}
.toast{position:relative;overflow:hidden;background:color-mix(in srgb,var(--surface) 94%,#ffffff 6%);border:1px solid var(--border);border-radius:16px;padding:.95rem 1rem .95rem 1.05rem;display:flex;align-items:flex-start;gap:.8rem;box-shadow:0 18px 48px rgba(15,23,42,.14);animation:toastIn .3s ease;min-width:290px;max-width:360px;backdrop-filter:blur(12px)}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}}
.toast.hide{animation:toastOut .3s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(16px)}}
.toast-accent{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
.toast-icon{font-size:1.02rem;flex-shrink:0;margin-top:.15rem}
.toast-body{flex:1;min-width:0}
.toast-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.toast-body .toast-title{font-size:.88rem;font-weight:700;color:var(--text);line-height:1.2}
.toast-body .toast-msg{font-size:.79rem;color:var(--text2);margin-top:.28rem;line-height:1.45}
.toast-close{border:none;background:transparent;color:var(--text3);cursor:pointer;flex-shrink:0;padding:.1rem;font-size:.78rem;transition:color var(--transition),transform var(--transition)}
.toast-close:hover{color:var(--text);transform:scale(1.05)}
.toast.success .toast-icon,.toast.success .toast-accent{color:var(--success);background:var(--success)}
.toast.error .toast-icon,.toast.error .toast-accent{color:var(--danger);background:var(--danger)}
.toast.warning .toast-icon,.toast.warning .toast-accent{color:var(--warning);background:var(--warning)}
.toast.info .toast-icon,.toast.info .toast-accent{color:var(--primary);background:var(--primary)}
@media(max-width:640px){
  .toast-container{left:1rem;right:1rem;bottom:1rem}
  .toast{min-width:0;max-width:none;width:100%}
}

/* ── SECTIONS ── */
.section{display:none;background:var(--bg)}
.section.active{display:block}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.page-header h2{font-size:1.2rem;font-weight:600;color:var(--text)}
.page-header p{font-size:.82rem;color:var(--text3);margin-top:.15rem}

/* ── 2-COL LAYOUT ── */
.col2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.col3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.2rem}
.col4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:900px){.col2,.col3,.col4{grid-template-columns:1fr}}

/* ── CHART CONTAINERS ── */
.chart-wrap{position:relative;width:100%;height:200px}

/* ── HEAT MAP ── */
.heatmap{display:grid;gap:4px;margin-top:.75rem}
.heatmap-row{display:flex;gap:4px;align-items:center}
.heatmap-label{font-size:.7rem;color:var(--text3);width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heatmap-cells{display:flex;gap:4px;flex:1}
.hm-cell{flex:1;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:600;cursor:default;transition:transform var(--transition)}
.hm-cell:hover{transform:scale(1.1)}
.hm-ok{background:var(--success-light);color:#059669}
.hm-late{background:var(--warning-light);color:#b45309}
.hm-absent{background:var(--danger-light);color:#dc2626}
.hm-holiday{background:var(--surface2);color:var(--text3)}
.hm-future{background:var(--surface2);color:transparent}
.heatmap-head{display:flex;gap:4px;margin-left:84px;margin-bottom:2px}
.heatmap-head span{flex:1;text-align:center;font-size:.65rem;color:var(--text3);font-weight:600}

/* ── CLOCK ── */
.clock-display{font-family:'DM Mono',monospace;font-size:3rem;font-weight:500;color:var(--text);letter-spacing:-1px}
.clock-date{font-size:.85rem;color:var(--text3);margin-top:.25rem}

/* ── STEP FORM ── */
.step-header{display:flex;gap:0;margin-bottom:1.5rem;border-bottom:1px solid var(--border);padding-bottom:0}
.step-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem;cursor:pointer;opacity:.5;transition:opacity var(--transition);position:relative}
.step-item.active,.step-item.done{opacity:1}
.step-item::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:transparent;border-radius:99px}
.step-item.active::after{background:var(--primary)}
.step-item.done::after{background:var(--success)}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:var(--text2)}
.step-item.active .step-num{background:var(--primary);color:#fff}
.step-item.done .step-num{background:var(--success);color:#fff}
.step-label{font-size:.72rem;font-weight:500;color:var(--text3);text-align:center}
.step-panel{display:none}
.step-panel.active{display:block}

/* ── DARK MODE TOGGLE ── */
.theme-toggle{display:flex;align-items:center;gap:.5rem;background:var(--surface2);border-radius:99px;padding:.25rem;cursor:pointer;border:none}
.toggle-thumb{width:28px;height:28px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all var(--transition);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.theme-label{font-size:.75rem;color:var(--text3);padding:0 .3rem}

/* ── CHART COLORS ── */
.chart-legend{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.75rem}
.legend-item{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--text2)}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .login-route-shell{width:100vw;max-width:100vw}
  .login-route-access{padding:1.25rem 1rem}
  .login-route-card{max-width:none;width:100%}
  .login-brand{padding:5.3rem 1.6rem 1.6rem}
  .login-form-side{position:absolute;inset:0;z-index:3;padding:1.5rem}
  .login-screen .login-brand{display:none}
  .login-wrap.show-access .login-brand{display:none}
  .login-wrap.show-access .login-form-side{transform:none}
  .page-content{padding:1rem}
  .stat-grid{grid-template-columns:1fr 1fr}
  .topbar{padding:0 1rem}
  .onboarding-grid{grid-template-columns:1fr}
}
@media(max-width:1120px){
  .landing-hero{grid-template-columns:1fr}
  .landing-showcase{height:420px}
  .phone-main{right:auto;left:50%;transform:translateX(-10%) rotate(4deg)}
  .phone-float{left:50%;transform:translateX(-95%) rotate(-8deg)}
}
@media(min-width:1121px){
  .login-brand{padding:6.4rem 3.4rem 2.6rem}
  .landing-topbar{left:2.4rem;right:2.4rem}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr}
  .sidebar{position:absolute;transform:translateX(-100%);height:100%}
  .sidebar.mobile-open{transform:translateX(0)}
  .topbar-sidebar-toggle{display:flex}
}

/* ── MISC ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;color:var(--text3);text-align:center}
.empty-state .empty-icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.4}
.empty-state p{font-size:.85rem}
.notif-empty-state{padding:2rem 1rem;border:1px dashed var(--border);border-radius:18px;background:linear-gradient(180deg,var(--surface),var(--surface2))}
.notif-list{display:flex;flex-direction:column;gap:.8rem}
.notif-card{display:flex;align-items:flex-start;gap:.9rem;padding:1rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);cursor:pointer}
.notif-card:hover{border-color:color-mix(in srgb,var(--primary) 24%,var(--border));transform:translateY(-1px);box-shadow:var(--shadow)}
.notif-card.unread{border-color:color-mix(in srgb,var(--primary) 28%,var(--border));background:linear-gradient(180deg,var(--surface),var(--primary-light))}
.notif-card.read{opacity:.82}
.notif-icon{width:40px;height:40px;border-radius:14px;background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-main{flex:1;min-width:0}
.notif-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.notif-title{font-size:.88rem;font-weight:700;color:var(--text)}
.notif-time{font-size:.72rem;color:var(--text3);white-space:nowrap}
.notif-body{font-size:.79rem;color:var(--text2);margin-top:.3rem;line-height:1.5}
.notif-chip{display:inline-flex;align-items:center;gap:.35rem;margin-top:.55rem;padding:.28rem .55rem;border-radius:999px;background:var(--surface2);color:var(--text2);font-size:.68rem;font-weight:700}
.divider-line{height:1px;background:var(--border);margin:1rem 0}
.request-op-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.request-op-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;box-shadow:var(--shadow-sm);min-height:100%}
.request-op-card h4{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:.8rem}
.request-op-metrics{display:grid;gap:.45rem}
.request-op-metrics div,.request-op-list div{font-size:.82rem;color:var(--text2);line-height:1.5}
.request-op-list{display:grid;gap:.45rem}
@media (max-width: 1100px){
  .request-op-grid{grid-template-columns:1fr}
}
.text-muted{color:var(--text3);font-size:.8rem}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.text-warning{color:var(--warning)}
.gap-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.ml-auto{margin-left:auto}
.fw-6{font-weight:600}
.fs-sm{font-size:.78rem}
.mt-1{margin-top:.5rem}
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
textarea.form-control{resize:vertical;min-height:80px}
.priority-list,.ops-list{display:flex;flex-direction:column;gap:.75rem}
.priority-item,.ops-item{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--border)}
.priority-item:last-child,.ops-item:last-child{border-bottom:none;padding-bottom:0}
.priority-item:first-child,.ops-item:first-child{padding-top:0}
.priority-main,.ops-main{display:flex;flex-direction:column;gap:.2rem}
.priority-title,.ops-title{font-size:.85rem;font-weight:600;color:var(--text)}
.priority-desc,.ops-desc{font-size:.76rem;color:var(--text2)}
.priority-value,.ops-value{font-size:.78rem;font-weight:600;color:var(--text3);white-space:nowrap}
.profile-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.profile-meta-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem .9rem}
.profile-meta-label{font-size:.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem}
.profile-meta-value{font-size:.84rem;color:var(--text);font-weight:500;word-break:break-word}
@media(max-width:900px){.profile-meta-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.profile-meta-grid{grid-template-columns:1fr}}