:root{
  --acento:#7c3aed; --acento-esc:#6d28d9; --acento-claro:#a78bfa; --acento-suave:#7c3aed12;
  --texto:#1c1930; --cinza:#615d75; --sub:#9995ac;
  --fundo:#f5f4fa; --cartao:#fff; --linha:#e9e7f2;
  --lado-1:#171331; --lado-2:#241d4e; --lado-txt:#b6b1d4; --lado-sub:#6f689c;
  --bom:#15803d; --bom-fundo:#ddf4e4; --aviso:#b45309; --aviso-fundo:#fdf0d6;
  --erro:#b91c1c; --erro-fundo:#fbe2e2; --info:#2f56d4; --info-fundo:#e2eafd;
  --sombra:0 1px 2px #1c193007,0 6px 24px -10px #1c193014;
  --sombra-forte:0 2px 6px #1c19300d,0 12px 32px -8px #1c19301f;
  --raio:13px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font:14.5px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;margin:0;
     background:var(--fundo);color:var(--texto);display:flex;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#7c3aed2e}

/* ---------- barra lateral (escura) ---------- */
.barra{width:238px;flex-shrink:0;display:flex;flex-direction:column;
       background:linear-gradient(180deg,var(--lado-1) 0%,var(--lado-2) 100%);
       position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden}
.barra::-webkit-scrollbar{width:5px}
.barra::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}
.marca{display:flex;align-items:center;gap:.65em;font-weight:800;font-size:1.3em;
       color:#fff;text-decoration:none;padding:1.05em 1em .9em;letter-spacing:-.02em}
.marca .logo{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:.45em;
             background:linear-gradient(135deg,#8b5cf6,#c026d3);color:#fff;
             font-size:.72em;font-weight:800;box-shadow:0 4px 14px #a855f766}
.barra nav{display:flex;flex-direction:column;padding:0 .65em .8em;gap:2px}
.barra nav a{display:flex;align-items:center;gap:.7em;padding:.5em .8em;border-radius:.6em;
             color:var(--lado-txt);text-decoration:none;font-weight:500;cursor:pointer;
             font-size:.9em;transition:background .12s,color .12s;white-space:nowrap}
.barra nav a:hover{background:#ffffff10;color:#fff}
.barra nav a.on{background:linear-gradient(90deg,#7c3aed,#9333ea);color:#fff;
                box-shadow:0 4px 14px #7c3aed66}
.barra nav a.breve{opacity:.45;cursor:default}
.barra nav a.breve:hover{background:none;color:var(--lado-txt)}
.barra nav a em{font-style:normal;font-size:.68em;margin-left:auto;color:var(--lado-sub)}
.barra .ico{display:grid;place-items:center;width:1.2em;flex-shrink:0;opacity:.85}
.barra .ico svg{width:1.15em;height:1.15em}
.barra nav a.on .ico{opacity:1}
.barra .sep{font-size:.62em;text-transform:uppercase;letter-spacing:.11em;color:var(--lado-sub);
            padding:1.35em .9em .4em;font-weight:700}
.eu{margin-top:auto;padding:1em 1.1em;border-top:1px solid #ffffff14;
    display:flex;justify-content:space-between;align-items:center;font-size:.88em}
.eu b{color:#fff;font-weight:600}
.eu a{color:var(--lado-txt);text-decoration:none}
.eu a:hover{color:#fda4af}

/* ---------- corpo ---------- */
.corpo{flex:1;min-width:0}
.corpo.inteiro{width:100%}
main{max-width:1240px;margin:0 auto;padding:1.8em 2.2em 3.5em}
header.pag{display:flex;align-items:baseline;gap:.8em;margin-bottom:1.4em;flex-wrap:wrap}
header.pag .fim{margin-left:auto;display:flex;gap:.5em}
h1{font-size:1.6em;margin:0;font-weight:800;letter-spacing:-.025em}
h2{font-size:.98em;margin:0 0 .9em;font-weight:700;letter-spacing:-.01em}
.sub{color:var(--sub);font-size:.85em;font-weight:400}
.mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:.88em}
.nota{color:var(--sub);font-size:.84em;margin-top:1.6em}
.vazio{color:var(--sub);padding:1.4em 0;text-align:center}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.9em;margin-bottom:1.4em}
.kpi{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
     padding:1em 1.2em;box-shadow:var(--sombra);position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acento);opacity:.55}
.kpi span{color:var(--cinza);font-size:.78em;font-weight:500}
.kpi b{display:block;font-size:1.95em;font-weight:800;line-height:1.25;letter-spacing:-.03em}
.kpi b.aviso{color:var(--aviso)}
.kpi b.bom{color:var(--bom)}

/* ---------- cartoes ---------- */
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
        padding:1.2em 1.35em;margin-bottom:1.1em;box-shadow:var(--sombra)}
.obrig{display:grid;grid-template-columns:52px 1fr 140px 56px;align-items:center;gap:1em;
       padding:.65em 0;border-top:1px solid var(--linha)}
.obrig:first-of-type{border-top:0}
.obrig .dia{text-align:center;font-weight:800;font-size:1.15em;line-height:1}
.obrig .dia small{display:block;font-size:.56em;color:var(--sub);font-weight:600;text-transform:uppercase;margin-top:.3em}
.obrig .nome{font-weight:600}
.obrig .prog{height:6px;background:var(--fundo);border-radius:3px;overflow:hidden}
.obrig .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--acento),#c026d3);border-radius:3px}
.obrig .frac{text-align:right;font-size:.88em;color:var(--cinza);font-variant-numeric:tabular-nums}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;padding:.2em .7em;border-radius:2em;
      font-size:.74em;font-weight:600;background:#efedf5;color:var(--cinza)}
.pill.feito,.pill.pago{background:var(--bom-fundo);color:var(--bom)}
.pill.novo,.pill.pendente{background:var(--aviso-fundo);color:var(--aviso)}
.pill.em_curso{background:var(--info-fundo);color:var(--info)}
.pill.erro,.pill.cancelado{background:var(--erro-fundo);color:var(--erro)}
.pill.anulado{background:#efedf5;color:var(--sub)}

/* ---------- tabela classica ---------- */
table.crud{width:100%;border-collapse:collapse;background:var(--cartao);
           border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
table.crud th,table.crud td{padding:.6em .9em;text-align:left;border-bottom:1px solid var(--linha);vertical-align:top}
table.crud th{font-size:.66em;text-transform:uppercase;letter-spacing:.07em;color:var(--sub);font-weight:700;background:#faf9fd}
table.crud tr:last-child td{border-bottom:0}
td a{color:var(--acento-esc);text-decoration:none;font-weight:550}
.matriz td{text-align:center;font-size:.8em;padding:.35em .5em;white-space:nowrap}
.matriz td:first-child{text-align:left}
.matriz th{padding:.4em .5em;min-width:44px;font-size:.68em}
td.mc.v{background:#ddf4e4}
td.mc.a{background:#fdf0d6}
td.mc.r{background:#fbe2e2;color:#9c1f1f}
td.mc.x{background:#ede2fb}
td.mc.z{background:#e2eafd}
td.mc.c{color:var(--sub)}
td.mc a{color:inherit;display:block}

/* ---------- Tabulator skin ---------- */
.tabulator{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
           overflow:hidden;box-shadow:var(--sombra);font:inherit;font-size:.92em}
.tabulator .tabulator-header{background:#faf9fd;border-bottom:1px solid var(--linha)}
.tabulator .tabulator-header .tabulator-col{font-size:.68em;text-transform:uppercase;
  letter-spacing:.06em;color:var(--sub);background:transparent;border-right:0}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:.6em .75em}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover{background:#f3f1f9}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background:#f3f1f9}
.tabulator .tabulator-header-filter input{width:100%;border:1px solid var(--linha);
  border-radius:.4em;padding:.3em .5em;margin-top:.35em;background:#fff}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row{border-bottom:1px solid #f2f1f8;
  transition:background .08s}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:.55em .75em;border-right:0}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-even{background:#fcfbfe}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover{background:#f7f5fd}
.tabulator .tabulator-footer{background:#faf9fd;border-top:1px solid var(--linha);
  color:var(--sub);font-size:.8em;padding:.55em .8em}
.tabulator .tabulator-footer .tabulator-page{border:1px solid var(--linha);border-radius:.45em;
  color:var(--cinza);background:#fff;padding:.2em .6em}
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover{color:var(--acento-esc);border-color:var(--acento)}
.tabulator .tabulator-footer .tabulator-page.active{background:var(--acento);color:#fff;border-color:var(--acento)}
.tabulator .tabulator-footer .tabulator-page-size{vertical-align:middle}
.tabulator input[type=search],.tabulator .tabulator-header-filter input{font:inherit;font-size:.85em}
.tabulator .tabulator-editing{border:2px solid var(--acento);background:#fff}

/* ---------- formularios ---------- */
input,select,textarea{padding:.55em .75em;border:1px solid var(--linha);border-radius:.55em;
                      font:inherit;background:#fbfbfe;color:var(--texto);width:100%;
                      transition:border .12s,box-shadow .12s,background .12s}
input:hover,select:hover,textarea:hover{border-color:#d5d2e4}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-suave);background:#fff}
input[type=checkbox]{width:auto;accent-color:var(--acento)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;
            padding:.55em 1.1em;border:0;border-radius:.55em;background:var(--acento);color:#fff;
            font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;
            box-shadow:0 1px 2px #7c3aed30,0 4px 12px -4px #7c3aed50;
            transition:background .12s,transform .06s,box-shadow .12s}
button:hover,.btn:hover{background:var(--acento-esc);box-shadow:0 2px 4px #7c3aed35,0 6px 16px -4px #7c3aed55}
button:active{transform:scale(.97)}
.btn.sec{background:var(--cartao);color:var(--cinza);border:1px solid var(--linha);box-shadow:none}
.btn.sec:hover{color:var(--texto);border-color:#c9c5dc;background:var(--cartao)}
.btn.peq{padding:.3em .75em;font-size:.8em;border-radius:.45em}
.pesquisa{display:flex;gap:.5em;margin-bottom:1em;flex-wrap:wrap}
.pesquisa input{flex:1;max-width:380px}
form.grelha{display:grid;grid-template-columns:repeat(2,1fr);gap:.95em 1.3em}
form.grelha label{display:grid;gap:.3em;font-size:.83em;color:var(--cinza);font-weight:550}
form.grelha .larga{grid-column:1/-1}
form.grelha .acoes{grid-column:1/-1;display:flex;gap:.6em;margin-top:.4em}
.check{display:flex!important;flex-direction:row;align-items:center;gap:.5em}

/* ---------- login ---------- */
body:has(.cartao-login){background:linear-gradient(135deg,#f5f4fa 0%,#ece7fb 60%,#e6dcfa 100%)}
.cartao-login{max-width:410px;margin:11vh auto;background:var(--cartao);border:1px solid var(--linha);
              border-radius:1.2em;padding:2.6em;box-shadow:0 8px 50px #7c3aed1f,0 2px 8px #1c19300a}
.cartao-login h1{color:var(--acento-esc);margin:0;font-size:1.75em;letter-spacing:-.02em}
.cartao-login form{display:grid;gap:1em;margin-top:1.6em}
.cartao-login label{display:grid;gap:.3em;font-size:.86em;color:var(--cinza)}

/* ---------- ficha ---------- */
.ficha dl{display:grid;grid-template-columns:190px 1fr;gap:.45em 1em;margin:0}
.ficha dt{color:var(--cinza);font-size:.82em}
.ficha dd{margin:0}
.grelha-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.85em}
.mini-cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
             padding:.95em 1.15em;text-decoration:none;color:inherit;box-shadow:var(--sombra);
             transition:border-color .12s,transform .08s}
.mini-cartao:hover{border-color:var(--acento);transform:translateY(-1px)}
.mini-cartao b{font-size:.95em}
.mini-cartao .sub{display:block;margin-top:.2em}

.flash{padding:.8em 1.05em;border-radius:.65em;margin-bottom:1em;background:var(--bom-fundo);
       color:var(--bom);font-weight:500;border:1px solid #15803d20}
.flash.erro{background:var(--erro-fundo);color:var(--erro);border-color:#b91c1c20}

/* ---------- picar o ponto ---------- */
.ponto{display:flex;justify-content:center}
.cartao-ponto{width:100%;max-width:470px;padding:1.6em 1.8em;box-shadow:var(--sombra-forte)}
.campo-ponto{margin-bottom:1.15em}
.campo-ponto .etq{display:block;font-size:.8em;color:var(--cinza);font-weight:500;margin-bottom:.35em}
.campo-ponto input,.campo-ponto select{padding:.6em .8em;font-size:1.02em}
.campo-ponto input[readonly]{background:var(--fundo);color:var(--cinza)}
.tipo-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.tipo-toggle input{position:absolute;opacity:0;pointer-events:none}
.tipo-toggle label{display:grid;place-items:center;padding:.75em 0;border:1.5px solid var(--linha);
                   border-radius:.6em;background:var(--fundo);color:var(--cinza);font-weight:600;
                   font-size:1.02em;cursor:pointer;transition:all .12s}
.tipo-toggle input:checked+label{border-color:var(--acento);background:var(--acento-suave);color:var(--acento-esc)}
#t-ent:checked+label{border-color:var(--bom);background:var(--bom-fundo);color:var(--bom)}
#t-sai:checked+label{border-color:var(--erro);background:var(--erro-fundo);color:var(--erro)}
.ultima{padding:.6em .85em;border-radius:.6em;background:#e5484d;color:#fff;
        font-weight:600;font-size:1.02em;text-align:center;font-variant-numeric:tabular-nums;
        box-shadow:0 4px 14px #e5484d44}
.ultima.dentro{background:var(--bom);box-shadow:0 4px 14px #15803d44}
button.grande{width:100%;padding:.8em;font-size:1.05em}

/* ---------- minhas tarefas ---------- */
.mlinha{display:flex;align-items:center;gap:.9em;padding:.6em 0;border-top:1px solid var(--linha)}
.mlinha:first-of-type{border-top:0}
.mlinha.atr{background:#fbe2e21f}
.mlinha .mtit{flex:1;min-width:0}
.mlinha .mtit .sub{display:block;margin-top:.1em}
.mlinha .mprazo{text-align:right;min-width:52px}
.mlinha .mprazo.atr b{color:var(--erro)}
.orig{display:inline-flex;padding:.16em .6em;border-radius:2em;font-size:.66em;font-weight:700;
      text-transform:uppercase;letter-spacing:.05em}
.orig.tarefa{background:var(--acento-suave);color:var(--acento-esc)}
.orig.obrigacao{background:var(--info-fundo);color:var(--info)}

/* ---------- clientes: cartoes ---------- */
.chip{display:inline-flex;padding:.35em .95em;border-radius:2em;border:1px solid var(--linha);
      color:var(--cinza);text-decoration:none;font-size:.82em;font-weight:550;white-space:nowrap;
      transition:all .12s}
.chip:hover{border-color:var(--acento);color:var(--acento-esc)}
.chip.on{background:var(--acento);border-color:var(--acento);color:#fff;
         box-shadow:0 2px 8px #7c3aed44}
.grelha-clientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(295px,1fr));gap:.9em}
.cartao-cli{display:flex;flex-direction:column;background:var(--cartao);border:1px solid var(--linha);
            border-radius:var(--raio);padding:1.05em 1.15em;text-decoration:none;color:inherit;
            box-shadow:var(--sombra);transition:border-color .12s,transform .08s,box-shadow .12s}
.cartao-cli:hover{border-color:var(--acento);transform:translateY(-2px);box-shadow:var(--sombra-forte)}
.cartao-cli.off{opacity:.55}
.cli-top{display:flex;gap:.75em;align-items:flex-start;margin-bottom:.8em}
.avatar{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:12px;
        color:#fff;font-weight:700;font-size:.95em;letter-spacing:.01em;
        box-shadow:0 3px 10px #1c193025}
.cli-nome{display:block;font-size:.98em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli-stats{display:flex;flex-wrap:wrap;gap:.4em .8em;padding-top:.7em;border-top:1px solid var(--linha)}
.mini{font-size:.76em;color:var(--cinza)}
.mini b{color:var(--texto);font-weight:650}
.mini.atr{color:var(--erro)}
.mini.atr b{color:var(--erro)}
.mini.prox{margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------- cofre: uma linha por dono ---------- */
details.cofre>summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:.1em}
details.cofre>summary::-webkit-details-marker{display:none}
details.cofre>summary::before{content:'▸ ';color:var(--sub)}
details.cofre[open]>summary::before{content:'▾ '}
details.cofre>summary a{pointer-events:auto}
table.cofre-sub{margin:.6em 0 .3em;font-size:.92em;min-width:420px}
td.cc{text-align:center;color:var(--sub)}

/* ---------- cofre: linhas de codigos ---------- */
.cod-row{display:grid;grid-template-columns:220px 1fr 200px 60px;gap:.5em;margin-bottom:.5em}
.cod-row input{margin:0}
@media (max-width:760px){.cod-row{grid-template-columns:1fr 1fr}}

/* ---------- ferias: calendario + grafico ---------- */
.grelha-ferias{display:grid;grid-template-columns:1.5fr 1.1fr .8fr;gap:1em;align-items:start}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8em}
.cal-nav b{font-size:1em}
table.cal{width:100%;border-collapse:collapse;table-layout:fixed}
table.cal th{font-size:.66em;text-transform:uppercase;color:var(--sub);padding:.35em .3em;
             font-weight:700;text-align:left}
table.cal th.fds{opacity:.6}
table.cal td{border:1px solid var(--linha);height:66px;vertical-align:top;padding:.3em;position:relative}
table.cal td.fora{background:var(--fundo)}
table.cal td.fora .dnum{color:var(--sub);opacity:.5}
table.cal td.fds .dnum{color:var(--sub)}
table.cal td.feriado{background:#fdf3f3}
table.cal td.feriado .dnum{color:#cc8888}
table.cal .dnum{font-size:.8em;font-weight:600;display:inline-block;min-width:1.5em;
               text-align:center;line-height:1.5em}
table.cal .dnum.hoje{background:#e5484d;color:#fff;border-radius:50%;
                     box-shadow:0 2px 8px #e5484d55}
.cal-bars{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.cal-bar{font-size:.62em;color:#fff;font-weight:600;padding:1px 5px;white-space:nowrap;
         overflow:hidden;text-overflow:ellipsis;min-height:14px;line-height:14px}
.cal-bar.solo{border-radius:4px}
.cal-bar.ini{border-radius:4px 0 0 4px;margin-right:-4px}
.cal-bar.fim{border-radius:0 4px 4px 0;margin-left:-4px}
.cal-bar.meio{margin:0 -4px}
.graf{display:flex;align-items:flex-end;gap:.9em;height:200px;padding-top:1.4em}
.graf-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.graf-val{font-size:.75em;font-weight:700;margin-bottom:.3em}
.graf-bar{width:100%;max-width:52px;background:linear-gradient(180deg,#f87171,#e5484d);
          border-radius:5px 5px 0 0;margin-top:auto;align-self:center}
.graf-nome{font-size:.66em;color:var(--cinza);margin-top:.4em;transform:rotate(-35deg);
           transform-origin:top right;white-space:nowrap;max-width:70px;overflow:hidden;
           text-overflow:ellipsis}
@media (max-width:1100px){.grelha-ferias{grid-template-columns:1fr}}

/* ---------- telemovel ---------- */
@media (max-width:760px){
  .barra{width:64px}
  .barra nav a .rot,.marca,.eu b,.barra .sep,.barra nav a em{display:none}
  .marca .logo{display:grid}
  .barra nav a{justify-content:center}
  .eu{justify-content:center}
  form.grelha{grid-template-columns:1fr}
  main{padding:1em}
}