/* Oklaworks(R) System - OklaOS | base.css | tokens, componentes e utilitarios (branco e cinza) */
:root{
  --g900:#18181B;--g800:#27272A;--g700:#3F3F46;--g600:#52525B;--g500:#71717A;--g400:#A1A1AA;--g300:#D1D1D6;--g200:#E4E4E7;--g100:#F4F4F5;--g50:#FAFAFA;--w:#FFFFFF;
  --r:8px;--rl:12px;--s1:0 1px 3px rgba(0,0,0,.05);--s2:0 4px 16px rgba(0,0,0,.08);--s3:0 12px 40px rgba(0,0,0,.18);
  --fs:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--ft:'Syne','DM Sans',system-ui,sans-serif;--fm:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#FFFFFF;--bg2:#FAFAFA;--bg3:#F4F4F5;--bd:#E4E4E7;--bd2:#D1D1D6;--tx:#18181B;--tx2:#52525B;--tx3:#71717A;--pri:#18181B;--prih:#3F3F46;--prit:#FFFFFF;
  --glass:rgba(255,255,255,.78);--glass2:rgba(250,250,250,.9);--sel:rgba(24,24,27,.08);--sbt:rgba(24,24,27,.22);
}
html[data-theme="dark"]{
  --bg:#18181B;--bg2:#1E1E21;--bg3:#27272A;--bd:#3F3F46;--bd2:#52525B;--tx:#F4F4F5;--tx2:#A1A1AA;--tx3:#8A8A93;--pri:#F4F4F5;--prih:#D1D1D6;--prit:#18181B;
  --glass:rgba(24,24,27,.8);--glass2:rgba(24,24,27,.92);--sel:rgba(244,244,245,.1);--sbt:rgba(244,244,245,.25);
  --s1:0 1px 3px rgba(0,0,0,.3);--s2:0 4px 16px rgba(0,0,0,.4);--s3:0 12px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:13px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-scale="s"]{font-size:12px}html[data-scale="l"]{font-size:14.5px}
body{margin:0;font-family:var(--fs);color:var(--tx);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--ft);font-weight:700;margin:0;letter-spacing:-.01em}
a{color:inherit}
button,input,select,textarea{font-family:inherit;color:inherit}
::selection{background:var(--sbt)}
svg{display:block}
.ic{display:inline-flex;align-items:center;justify-content:center;flex:none}.ic svg{width:100%;height:100%}
.mono{font-family:var(--fm)}.dim{color:var(--tx3)}.t2{color:var(--tx2)}.hide{display:none!important}.grow{flex:1;min-width:0}.row{display:flex;align-items:center;gap:.6rem}.col{display:flex;flex-direction:column}.wrap{flex-wrap:wrap}.tr{text-align:right}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--bd2) transparent}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:9px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:var(--g500);background-clip:content-box;border:2px solid transparent}::-webkit-scrollbar-track{background:transparent}
/* botoes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:2.3rem;padding:0 1.05rem;border-radius:var(--r);border:1px solid var(--bd2);background:var(--bg);color:var(--tx);font-size:1rem;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s;white-space:nowrap;text-decoration:none;user-select:none;-webkit-user-select:none}
.btn:hover{background:var(--bg3)}.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--prit)}.btn.pri:hover{background:var(--prih);border-color:var(--prih)}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:var(--sel)}
.btn.sm{height:1.9rem;padding:0 .75rem;font-size:.92rem}.btn.xs{height:1.6rem;padding:0 .55rem;font-size:.85rem}
.btn.icon{width:2.3rem;padding:0}.btn.icon.sm{width:1.9rem}.btn.icon.xs{width:1.6rem}
.btn.on{background:var(--sel);border-color:var(--bd2)}
.btn:disabled,.btn.dis{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn .ic{width:1.15em;height:1.15em}
/* campos */
.inp,select.inp,textarea.inp{width:100%;height:2.3rem;padding:0 .8rem;border-radius:var(--r);border:1px solid var(--bd2);background:var(--bg);color:var(--tx);font-size:1rem;outline:none;transition:border-color .15s,box-shadow .15s}
textarea.inp{height:auto;padding:.6rem .8rem;resize:vertical;line-height:1.5}
.inp:focus{border-color:var(--g500);box-shadow:0 0 0 3px var(--sel)}
.inp.sm{height:1.9rem;font-size:.92rem;padding:0 .6rem}
select.inp{appearance:none;-webkit-appearance:none;padding-right:2rem;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right .7rem center}
input[type=checkbox],input[type=radio]{width:1.1rem;height:1.1rem;accent-color:var(--g900);margin:0;cursor:pointer}
html[data-theme="dark"] input[type=checkbox],html[data-theme="dark"] input[type=radio]{accent-color:var(--g300)}
input[type=range]{accent-color:var(--g700);width:100%}
input[type=color]{padding:0}
.fld{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.85rem}.fld>label,.lbl{font-size:.88rem;font-weight:600;color:var(--tx2)}.fld .hint{font-size:.85rem;color:var(--tx3)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
/* cartoes e selos */
.card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rl);box-shadow:var(--s1);padding:1rem}
.badge{display:inline-flex;align-items:center;gap:.3em;height:1.4rem;padding:0 .55rem;border-radius:99px;background:var(--bg3);border:1px solid var(--bd);font:500 .8rem var(--fm);color:var(--tx2);white-space:nowrap}
.badge.dk{background:var(--pri);color:var(--prit);border-color:var(--pri)}
.dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--g400);display:inline-block;flex:none}.dot.on{background:var(--g900);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--g900)}
html[data-theme="dark"] .dot.on{background:var(--g100);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--g100)}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:2.2rem 1rem;color:var(--tx3);text-align:center}.empty .ic{width:2.6rem;height:2.6rem;opacity:.5}
.bar{height:.5rem;border-radius:99px;background:var(--bg3);border:1px solid var(--bd);overflow:hidden}.bar>i{display:block;height:100%;background:var(--pri);border-radius:99px;transition:width .3s}
.seg{display:inline-flex;border:1px solid var(--bd2);border-radius:var(--r);overflow:hidden;background:var(--bg)}.seg button{height:1.9rem;padding:0 .8rem;border:0;background:transparent;color:var(--tx2);font-size:.92rem;font-weight:500;cursor:pointer;border-right:1px solid var(--bd)}.seg button:last-child{border-right:0}.seg button.on{background:var(--pri);color:var(--prit)}.seg button:hover:not(.on){background:var(--bg3)}
.sw{position:relative;width:2.5rem;height:1.45rem;flex:none;display:inline-block}.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2;width:100%;height:100%}.sw i{position:absolute;inset:0;border-radius:99px;background:var(--bd2);transition:.2s}.sw i:after{content:"";position:absolute;left:.17rem;top:.17rem;width:1.11rem;height:1.11rem;border-radius:50%;background:var(--w);box-shadow:var(--s1);transition:.2s}.sw input:checked+i{background:var(--g900)}html[data-theme="dark"] .sw input:checked+i{background:var(--g300)}.sw input:checked+i:after{transform:translateX(1.05rem)}
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--bd);padding:0 .4rem;overflow-x:auto}.tabs button{height:2.4rem;padding:0 .9rem;border:0;border-bottom:2px solid transparent;background:transparent;font-size:1rem;font-weight:500;color:var(--tx3);cursor:pointer;white-space:nowrap}.tabs button.on{color:var(--tx);border-bottom-color:var(--pri)}.tabs button:hover{color:var(--tx)}.tabs button{display:inline-flex;align-items:center;gap:.4rem}.tabs button svg{width:1.1rem;height:1.1rem;flex:none}
.tbl{width:100%;border-collapse:collapse;font-size:.97rem}.tbl th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);font-weight:600;padding:.55rem .7rem;border-bottom:1px solid var(--bd);white-space:nowrap}.tbl td{padding:.6rem .7rem;border-bottom:1px solid var(--bd);vertical-align:middle}.tbl tr:hover td{background:var(--bg2)}
.kbd{font:500 .8rem var(--fm);border:1px solid var(--bd2);border-bottom-width:2px;border-radius:5px;padding:.05rem .4rem;background:var(--bg2);color:var(--tx2)}
.spin{width:1.3rem;height:1.3rem;border:2px solid var(--bd2);border-top-color:var(--g900);border-radius:50%;animation:sp .7s linear infinite}html[data-theme="dark"] .spin{border-top-color:var(--g100)}@keyframes sp{to{transform:rotate(360deg)}}
/* menu de contexto, dialogo e toast */
.cmenu{position:fixed;z-index:9000;min-width:13rem;max-width:20rem;background:var(--glass2);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--bd);border-radius:var(--rl);box-shadow:var(--s3);padding:.35rem;animation:pop .12s ease-out}
.cmenu .mi{display:flex;align-items:center;gap:.65rem;width:100%;padding:.5rem .65rem;border:0;background:transparent;border-radius:6px;font-size:1rem;cursor:pointer;text-align:left;color:var(--tx)}.cmenu .mi:hover{background:var(--sel)}.cmenu .mi .ic{width:1.1rem;height:1.1rem;color:var(--tx2)}.cmenu .mi small{margin-left:auto;color:var(--tx3);font-family:var(--fm);font-size:.8rem}.cmenu .mi.dis{opacity:.4;pointer-events:none}.cmenu .sep{height:1px;background:var(--bd);margin:.3rem .2rem}.cmenu .mh{padding:.4rem .65rem .2rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);font-weight:600}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(-3px)}to{opacity:1;transform:none}}
.mback{position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:var(--rl);box-shadow:var(--s3);width:100%;max-width:30rem;max-height:calc(100dvh - 2rem);max-height:calc(100vh - 2rem);display:flex;flex-direction:column;animation:pop .16s ease-out}
.modal.lg{max-width:44rem}.modal.sm{max-width:23rem}
.modal header{display:flex;align-items:center;gap:.6rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--bd)}.modal header h3{font-size:1.15rem;flex:1}
.modal .mb{padding:1.1rem;overflow:auto;flex:1}.modal footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.8rem 1.1rem;border-top:1px solid var(--bd)}
.toasts{position:fixed;z-index:9500;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;pointer-events:none;max-width:calc(100vw - 2rem)}
.toast{pointer-events:auto;display:flex;gap:.7rem;align-items:flex-start;background:var(--g900);color:var(--g100);border-radius:var(--rl);padding:.75rem 1rem;box-shadow:var(--s3);min-width:15rem;max-width:24rem;animation:tin .22s ease-out;font-size:.98rem}
html[data-theme="dark"] .toast{background:var(--g100);color:var(--g900)}
.toast .ic{width:1.2rem;height:1.2rem;margin-top:.1rem}.toast b{display:block;font-weight:600}.toast span{opacity:.8;font-size:.92rem}.toast.out{opacity:0;transform:translateX(12px);transition:.25s}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:820px){
  html{font-size:15px}html[data-scale="s"]{font-size:14px}html[data-scale="l"]{font-size:16.5px}
  .inp,select.inp,textarea.inp,input,select,textarea{font-size:16px!important}
  .grid2{grid-template-columns:1fr}
  .toasts{left:1rem;right:1rem;align-items:stretch;bottom:calc(1rem + env(safe-area-inset-bottom))}.toast{max-width:none}
  .modal{max-width:none}
  .mback{align-items:flex-end;padding:0}.modal{border-radius:var(--rl) var(--rl) 0 0;max-height:92vh;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}