/* =============================================================================
   Design System do painel (módulo 5): glassmorphism sobre preto, laranja #E94E1B.
   Usa as variáveis do index.html (--primary, --card, --fg, --border...), então
   funciona nos temas escuro e claro. Todas as classes novas começam com gi-.
   ============================================================================ */

/* ---------- superfícies ---------- */
.gi-glass{
  background:hsl(var(--card)/.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid hsl(var(--fg)/.14);
  box-shadow:0 22px 56px rgb(0 0 0/.5),inset 0 1px 0 hsl(var(--fg)/.07);
}
.gi-card{
  display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:12px;
  background:rgba(0,0,0,.7);border:1px solid hsl(var(--fg)/.14);box-shadow:0 14px 34px rgb(0 0 0/.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff
}
[data-theme=light] .gi-card{background:rgba(255,255,255,.82);color:#000;box-shadow:0 10px 26px rgb(0 0 0/.12)}
.gi-card-accent{border-color:hsl(var(--primary)/.55);box-shadow:0 0 0 1px hsl(var(--primary)/.18),0 14px 34px hsl(var(--primary)/.16)}
.btn.danger{background:hsl(var(--red-bg));border-color:hsl(var(--red)/.5);color:hsl(var(--red))}
.gi-scrim{position:fixed;inset:0;z-index:58;background:rgb(0 0 0/.55);opacity:0;transition:opacity .18s}
.gi-scrim.is-on{opacity:1}

/* ---------- toasts ---------- */
.toasts{z-index:80}
.toast.gi-toast{
  position:relative;display:flex;align-items:flex-start;gap:10px;min-width:260px;max-width:380px;padding:12px 10px 12px 14px;overflow:hidden;
  background:rgba(12,12,12,.78);color:#fff;border:1px solid rgb(255 255 255/.16);border-left:3px solid hsl(var(--primary));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 16px 40px rgb(0 0 0/.5),0 0 0 1px hsl(var(--primary)/.08);animation:giIn .2s cubic-bezier(.2,.8,.2,1)
}
[data-theme=light] .toast.gi-toast{background:rgba(255,255,255,.86);color:#000;border-color:rgb(0 0 0/.14)}
.toast.gi-toast.is-out{animation:giOut .18s ease forwards}
.toast.gi-toast.ok{border-left-color:hsl(var(--green))}
.toast.gi-toast.warn,.toast.gi-toast.offline{border-left-color:hsl(var(--amber))}
.gi-t-ic{flex-shrink:0;display:inline-flex;margin-top:1px;color:hsl(var(--primary))}
.toast.ok .gi-t-ic{color:hsl(var(--green))}.toast.warn .gi-t-ic,.toast.offline .gi-t-ic{color:hsl(var(--amber))}
.gi-t-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.gi-t-main strong{font-size:14px}
.gi-t-main.is-link{cursor:pointer}
.gi-t-main.is-link:hover span,.gi-t-main.is-link:focus-visible span{text-decoration:underline}
.gi-t-act{flex-shrink:0;align-self:center;height:30px;padding:0 10px;border-radius:6px;border:1px solid hsl(var(--primary)/.6);background:hsl(var(--primary)/.14);color:inherit;font-weight:700;font-size:12.5px;cursor:pointer}
.gi-t-x{flex-shrink:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:none;color:inherit;opacity:.6;cursor:pointer;padding:0}
.gi-t-x:hover{opacity:1;background:rgb(255 255 255/.1)}
.gi-t-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:hsl(var(--primary));transform-origin:left;animation:giBar linear forwards}
.toast.is-paused .gi-t-bar{animation-play-state:paused}
@keyframes giIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes giOut{to{opacity:0;transform:translateX(16px)}}
@keyframes giBar{to{transform:scaleX(0)}}
@media(max-width:639px){
  .toasts{top:auto;bottom:calc(84px + env(safe-area-inset-bottom));left:12px;right:12px;align-items:stretch}
  .toast.gi-toast{max-width:none;animation-name:giInUp}
  .gi-t-x{width:44px;height:44px}.gi-t-act{height:44px}
}
@keyframes giInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- tooltip ---------- */
.gi-tip{position:fixed;z-index:90;max-width:260px;padding:6px 10px;border-radius:8px;font-size:12.5px;line-height:1.35;pointer-events:none;
  background:rgba(12,12,12,.92);color:#fff;border:1px solid rgb(255 255 255/.16);box-shadow:0 10px 28px rgb(0 0 0/.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .12s}
.gi-tip.is-on{opacity:1}
.gi-tip[hidden]{display:none}
[data-theme=light] .gi-tip{background:rgba(20,20,20,.94)}

/* ---------- dropdown ---------- */
.gi-menu{position:fixed;z-index:90;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:12px;max-height:min(70vh,420px);overflow:auto;opacity:0;transform:translateY(-4px) scale(.98);transition:opacity .12s,transform .12s;outline:0}
.gi-menu.is-on{opacity:1;transform:none}
.gi-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.gi-opt:hover,.gi-opt:focus-visible{background:hsl(var(--fg)/.09);outline:0}
.gi-opt[aria-current=true]{background:hsl(var(--primary)/.14)}
.gi-opt[disabled]{opacity:.45;cursor:not-allowed}
.gi-opt-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gi-menu-line{height:1px;margin:4px 6px;background:hsl(var(--fg)/.12)}
.gi-menu-title{padding:2px 10px 8px;font-weight:900;font-size:15px}
.gi-dot{width:10px;height:10px;border-radius:50%;background:var(--c,#777);flex-shrink:0;box-shadow:0 0 0 2px hsl(var(--fg)/.12)}

/* ---------- gatilho de status ---------- */
.gi-status{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;font-size:13px;color:inherit;
  background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 55%,transparent)}
.gi-status:hover{background:color-mix(in srgb,var(--c) 24%,transparent)}
.gi-status .ic{width:14px;height:14px;opacity:.7}

/* ---------- gaveta ---------- */
.gi-drawer{position:fixed;z-index:59;top:0;right:0;bottom:0;width:min(var(--gi-w,440px),100vw);display:flex;flex-direction:column;border-radius:16px 0 0 16px;border-right:0;transform:translateX(24px);opacity:0;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s}
.gi-drawer.is-on{transform:none;opacity:1}
.gi-d-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 12px;border-bottom:1px solid hsl(var(--fg)/.1)}
.gi-d-head h2{font-size:17px;font-weight:900}
.gi-d-body{flex:1;overflow:auto;padding:12px 16px 24px;-webkit-overflow-scrolling:touch}
.gi-grip{display:none}

/* ---------- loaders da marca ---------- */
.gi-loader{--s:28px;display:inline-block;width:var(--s);height:var(--s);position:relative;flex-shrink:0}
.gi-loader::before{content:"";position:absolute;inset:0;border-radius:50%;border:calc(var(--s)/9) solid hsl(var(--fg)/.12)}
.gi-loader i{position:absolute;inset:0;border-radius:50%;border:calc(var(--s)/9) solid transparent;border-top-color:#E94E1B;border-right-color:#E94E1B;animation:giSpin .8s cubic-bezier(.5,.1,.5,.9) infinite;filter:drop-shadow(0 0 6px rgb(233 78 27/.55))}
.gi-spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid hsl(var(--fg)/.2);border-top-color:#E94E1B;animation:giSpin .8s linear infinite;flex-shrink:0}
@keyframes giSpin{to{transform:rotate(360deg)}}
.gi-skel{border-radius:6px;background:linear-gradient(90deg,hsl(var(--fg)/.06) 25%,hsl(var(--fg)/.14) 50%,hsl(var(--fg)/.06) 75%);background-size:200% 100%;animation:giShim 1.2s linear infinite}
@keyframes giShim{to{background-position:-200% 0}}
.is-busy{position:relative}
.gi-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:hsl(var(--bg)/.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:inherit;z-index:2}

/* ---------- modais com vidro e animação ---------- */
.modal-bg{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:giFade .16s ease}
.modal{background:hsl(var(--card)/.86);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid hsl(var(--fg)/.14);box-shadow:0 26px 70px rgb(0 0 0/.55),inset 0 1px 0 hsl(var(--fg)/.07);animation:giPop .2s cubic-bezier(.2,.8,.2,1)}
.modal-bg.is-closing{animation:giFadeOut .15s ease forwards}
.modal-bg.is-closing .modal{animation:giPopOut .15s ease forwards}
@keyframes giFade{from{opacity:0}to{opacity:1}}
@keyframes giFadeOut{to{opacity:0}}
@keyframes giPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes giPopOut{to{opacity:0;transform:scale(.97)}}
@keyframes giSheet{from{transform:translateY(100%)}to{transform:none}}

/* ---------- celular: sheets na base e toque de 44px ---------- */
@media(max-width:639px){
  .modal-bg{align-items:flex-end;padding:0}
  .modal{max-width:none;max-height:92vh;border-radius:20px 20px 0 0;border-bottom:0;padding:12px 16px calc(20px + env(safe-area-inset-bottom));animation:giSheet .24s cubic-bezier(.2,.8,.2,1)}
  .modal-bg.is-closing .modal{animation:none;transform:translateY(100%);transition:transform .15s}
  .gi-grip{display:block;align-self:center;flex-shrink:0;width:44px;height:20px;position:relative;cursor:grab;touch-action:none}
  .gi-grip::after{content:"";position:absolute;left:2px;right:2px;top:8px;height:4px;border-radius:2px;background:hsl(var(--fg)/.28)}
  .modal>.row:last-child{flex-wrap:nowrap}.modal>.row:last-child .btn{flex:1}
  .gi-drawer{top:auto;left:0;right:0;width:100%;max-height:90vh;height:auto;min-height:40vh;border-radius:20px 20px 0 0;border:1px solid hsl(var(--fg)/.14);border-bottom:0;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom)}
  .gi-drawer.is-on{transform:none}
  .gi-d-head{padding-top:4px}
  .gi-menu.is-sheet{left:0!important;right:0;top:auto!important;bottom:0;width:100%;max-height:75vh;border-radius:20px 20px 0 0;border-bottom:0;padding:4px 8px calc(12px + env(safe-area-inset-bottom));transform:translateY(100%);z-index:91}
  .gi-menu.is-sheet.is-on{transform:none}
  .gi-scrim{z-index:89}
  .gi-menu.is-sheet .gi-opt{min-height:48px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .toast.gi-toast,.modal,.modal-bg,.gi-menu,.gi-drawer{animation:none!important;transition:none!important}
  .gi-loader i,.gi-spin,.gi-skel{animation-duration:2.4s}
}

/* Toque: área mínima de 44px. Ícones pequenos ganham uma área de clique maior sem mudar o layout */
@media(pointer:coarse),(max-width:639px){
  .btn,.btn.small,.seg button,.tabs button,.st-chip,.chip,.opt,.link-btn.tap{min-height:44px}
  .btn.small{height:auto}
  .input,select.input,textarea.input{min-height:44px;font-size:16px}
  .nav a,.nav-group{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .dt-end .icon-btn,.dt-acts .icon-btn,.tmeta .icon-btn,.media-box .icon-btn,.dt-optrow .icon-btn{width:36px;height:36px;position:relative}
  .dt-end .icon-btn::after,.dt-acts .icon-btn::after,.tmeta .icon-btn::after,.media-box .icon-btn::after,.dt-optrow .icon-btn::after{content:"";position:absolute;inset:-6px}
  .dt-field .input,.dt-in,.dt-new,.dt-btn,.dt-status,.dt-opt{min-height:44px}
  .dot-btn,.dt-check{min-width:24px;min-height:24px}
  .gi-opt{min-height:44px}
  .gi-status{height:44px}
}
@media(max-width:639px){
  .page-head>.row{width:100%}
  main{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* ---------- chip de conexão e fila ---------- */
.sync-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;margin-right:auto;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;
  background:hsl(var(--fg)/.08);border:1px solid hsl(var(--fg)/.14);color:hsl(var(--fg))}
.sync-chip[hidden]{display:none}
.sync-chip i{width:8px;height:8px;border-radius:50%;background:hsl(var(--muted-fg))}
.sync-chip.is-off i{background:hsl(var(--amber))}.sync-chip.is-err i{background:hsl(var(--red))}
.sync-chip.is-busy i{background:#E94E1B;animation:giPulse 1s ease-in-out infinite}
@keyframes giPulse{50%{opacity:.35}}
.topbar .sync-chip{margin-left:0}
@media(max-width:1023px){.topbar .sync-chip{margin-right:8px}}

/* Com a gaveta aberta, os avisos saem da frente dela (no celular a gaveta vira sheet e os avisos já ficam embaixo) */
@media(min-width:640px){body:has(.gi-drawer) .toasts{right:calc(min(var(--gi-w,460px),100vw) + 16px)}}

/* Tela de erro do modo servidor (nuvem.js): servidor fora do ar ou não publicado */
.cloud-fatal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:16px;background:hsl(var(--bg,0 0% 4%));color:hsl(var(--fg,0 0% 96%));font-family:Lato,Arial,sans-serif}
.cloud-fatal-card{max-width:460px;width:100%;padding:28px;border-radius:16px;background:hsl(var(--card,0 0% 9%));border:1px solid hsl(var(--fg,0 0% 96%)/.12);display:flex;flex-direction:column;gap:12px}
.cloud-fatal-card h1{margin:0;font-size:22px}
.cloud-fatal-card p{margin:0;line-height:1.5}
.cloud-fatal-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.cloud-fatal-row button{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid hsl(var(--fg,0 0% 96%)/.2);background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.cloud-fatal-row button:first-child{background:#E94E1B;border-color:#E94E1B;color:#fff}
.cloud-fatal-note{font-size:13px;opacity:.7}

/* Aba Storage do cliente: documentos essenciais e lista de arquivos com tipo */
.st-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.st-slot{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;border:1px dashed hsl(var(--fg)/.2);background:hsl(var(--fg)/.03)}
.st-slot.is-set{border-style:solid;border-color:hsl(var(--primary)/.45);background:linear-gradient(150deg,hsl(var(--primary)/.1),hsl(var(--fg)/.02))}
.st-slot-ic{flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:hsl(var(--fg)/.07)}
.st-slot.is-set .st-slot-ic{color:hsl(var(--primary))}
.st-slot-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.drop.drop-mini{flex-direction:row;gap:6px;min-height:40px;padding:6px 12px;width:auto;align-self:flex-start;font-size:13px;font-weight:700}
.st-list{display:flex;flex-direction:column}
.st-row{display:grid;grid-template-columns:40px minmax(0,1fr) 190px auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid hsl(var(--border)/.7)}
.st-thumb{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;overflow:hidden;background:hsl(var(--fg)/.07)}
.st-thumb img{width:100%;height:100%;object-fit:cover}
.st-name{min-width:0;display:flex;flex-direction:column}
.st-kind{min-height:40px}
@media(max-width:700px){.st-slots{grid-template-columns:minmax(0,1fr)}.st-row{grid-template-columns:40px minmax(0,1fr) auto}.st-kind{grid-column:2/-1;grid-row:2}}