/* ==========================================================
   GDXDESK — Mídia Desk · Tema visual
   Minimalista escuro + laranja GDX, sombras em relevo e animações
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0a0c0f; --bg2:#0f1216; --surface:#14181d; --surface2:#1a1f26; --surface3:#20262e;
  --line:#252b33; --line2:#313843;
  --text:#eceef1; --muted:#8b929c; --dim:#5d646e;
  --accent:#ee6a2f; --accent2:#ff8f50; --accent-deep:#a9431a; --accent-soft:rgba(238,106,47,.14);
  --ok:#2fd27a; --warn:#f2b33d; --danger:#ef4f4f; --danger-deep:#9b2626;
  --radius:16px; --radius-sm:11px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(0,0,0,.8), 0 2px 6px -2px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45}
body{min-height:100vh;background:
  radial-gradient(900px 500px at 85% -10%,rgba(238,106,47,.10),transparent 60%),
  radial-gradient(700px 420px at -10% 110%,rgba(238,106,47,.05),transparent 60%),var(--bg)}
a{color:var(--accent2)}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em}
h1{font-size:1.7rem;font-weight:800} h2{font-size:1.25rem;font-weight:700} h3{font-size:1.02rem;font-weight:700}
.muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:.83rem} .tiny{font-size:.74rem}
.hidden{display:none!important}
.row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap} .grow{flex:1}
.stack{display:flex;flex-direction:column;gap:.85rem}
.grid{display:grid;gap:1rem}
.spacer{flex:1}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:#262c35;border-radius:10px;border:2px solid var(--bg)}

/* ---------- Logo em texto: GDX (Bebas Neue bold) + MÍDIA DESK (Bebas Neue italic) ---------- */
.logo-txt{display:inline-flex;align-items:baseline;gap:.28em;font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;line-height:.85;white-space:nowrap;font-synthesis:weight style;text-decoration:none}
.logo-txt b{font-weight:700;color:#fff;letter-spacing:.02em;font-size:1em;text-shadow:0 8px 24px rgba(238,106,47,.25)}
.logo-txt i{font-weight:400;font-style:italic;color:var(--accent);letter-spacing:.06em;font-size:.62em}
.brand .logo-txt{font-size:32px}
.logo-xl{font-size:clamp(64px,11vw,128px)}
.ev-info{display:grid;gap:.6rem;margin-top:1.2rem;max-width:520px}
.ev-item{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),#11151a);box-shadow:var(--shadow-card)}
.ev-item .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent)}
.ev-item .ico svg{width:19px;height:19px}
.ev-item small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ev-item b{display:block;font-size:.98rem;line-height:1.3}

/* ---------- Marca ---------- */
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit}
.brand img{height:34px;filter:drop-shadow(0 6px 14px rgba(238,106,47,.25))}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font-weight:800;letter-spacing:.06em;font-size:1rem}
.brand .wm b span{color:var(--accent)}
.brand .wm small{color:var(--muted);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;margin-top:.25rem}

/* ---------- Botões com sombra em relevo ---------- */
.btn{
  --ledge:#06080a; --glow:rgba(0,0,0,.6);
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.15rem;border-radius:var(--radius-sm);
  border:1px solid var(--line2);background:linear-gradient(180deg,#1f252d,#171b21);
  color:var(--text);font:600 .92rem/1 Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 0 var(--ledge),0 12px 22px -12px var(--glow);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s,background .2s,filter .2s;
  user-select:none;-webkit-tap-highlight-color:transparent;text-decoration:none
}
.btn:hover{transform:translateY(-2px);border-color:#3b434f;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 0 var(--ledge),0 22px 30px -14px var(--glow)}
.btn:active{transform:translateY(3px);transition-duration:.06s;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 var(--ledge),0 4px 8px -4px var(--glow)}
.btn:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{--ledge:var(--accent-deep);--glow:rgba(238,106,47,.75);border-color:#ff9e68;color:#fff;
  background:linear-gradient(180deg,var(--accent2) 0%,var(--accent) 55%,#e15c22 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 6px rgba(120,30,0,.25),0 3px 0 var(--ledge),0 14px 28px -12px var(--glow)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(120,30,0,.25),0 5px 0 var(--ledge),0 24px 40px -14px var(--glow);filter:saturate(1.1)}
.btn-danger{--ledge:var(--danger-deep);--glow:rgba(239,79,79,.55);border-color:#ff7a7a;color:#fff;background:linear-gradient(180deg,#ff6b6b,#e04141)}
.btn-ok{--ledge:#167244;--glow:rgba(47,210,122,.5);border-color:#5ef0a1;color:#05210f;background:linear-gradient(180deg,#5ff0a0,#2fd27a)}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
.btn-ghost:hover{background:var(--surface2);color:var(--text);box-shadow:0 10px 20px -14px rgba(0,0,0,.7)}
.btn-ghost:active{box-shadow:none}
.btn-sm{padding:.55rem .8rem;font-size:.82rem;border-radius:9px}
.btn-lg{padding:1rem 1.5rem;font-size:1rem;border-radius:14px}
.btn-block{width:100%}
.btn-icon{padding:.6rem;aspect-ratio:1}
.btn.on{--ledge:var(--accent-deep);border-color:var(--accent);color:#fff;background:linear-gradient(180deg,#3a2216,#2a170e)}
.ripple{position:absolute;z-index:-1;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.28);animation:ripple .65s var(--ease) forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(3.2);opacity:0}}
.btn.loading{color:transparent!important;pointer-events:none}
.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Superfícies ---------- */
.card{background:linear-gradient(180deg,var(--surface),#12161a);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-card)}
.card-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.card-head h3{flex:1}
.divider{height:1px;background:var(--line);margin:.5rem 0}
.empty{padding:2.2rem 1rem;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:var(--radius)}

/* ---------- Formulários ---------- */
label.field{display:flex;flex-direction:column;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--muted)}
.input,select.input,textarea.input{width:100%;padding:.85rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--line2);
  background:#0d1014;color:var(--text);font:500 .95rem Inter,system-ui,sans-serif;outline:none;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45);transition:border-color .2s,box-shadow .2s}
.input:focus{border-color:var(--accent);box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 0 0 4px var(--accent-soft)}
.input::placeholder{color:var(--dim)}
textarea.input{min-height:90px;resize:vertical}
.input-icon{position:relative}
.input-icon svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--dim);pointer-events:none}
.input-icon .input{padding-left:2.6rem}

/* Interruptor */
.switch{display:flex;align-items:center;gap:.7rem;cursor:pointer;user-select:none;font-size:.88rem;font-weight:500}
.switch input{display:none}
.switch .track{width:44px;height:26px;border-radius:30px;background:#262c35;position:relative;flex:none;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6);transition:background .25s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#d9dce1);box-shadow:0 3px 6px rgba(0,0,0,.45);transition:transform .3s var(--spring)}
.switch input:checked + .track{background:linear-gradient(180deg,var(--accent2),var(--accent))}
.switch input:checked + .track::after{transform:translateX(18px)}

/* Área de soltar arquivo */
.drop{border:1.5px dashed var(--line2);border-radius:var(--radius);padding:1.6rem;text-align:center;cursor:pointer;
  background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.012) 12px 24px);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.drop:hover,.drop.over{border-color:var(--accent);background-color:var(--accent-soft);transform:scale(1.01)}
.drop svg{width:34px;height:34px;color:var(--accent)}
.progress{height:8px;border-radius:10px;background:#0d1014;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:10px;transition:width .3s var(--ease);box-shadow:0 0 12px rgba(238,106,47,.6)}

/* ---------- Abas / chips ---------- */
.tabs{display:flex;gap:.35rem;padding:.3rem;background:#0d1014;border:1px solid var(--line);border-radius:14px;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.tab{position:relative;overflow:hidden;flex:1;padding:.7rem .9rem;border-radius:10px;border:0;background:transparent;color:var(--muted);font:600 .9rem Inter,system-ui,sans-serif;cursor:pointer;transition:color .2s,background .25s,box-shadow .25s,transform .15s}
.tab:hover{color:var(--text)}
.tab:active{transform:scale(.97)}
.tab.active{color:#fff;background:linear-gradient(180deg,#262d36,#1d232a);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 14px -6px rgba(0,0,0,.8)}
.chip{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:30px;border:1px solid var(--line2);background:var(--surface2);color:var(--muted);font:600 .8rem Inter,system-ui,sans-serif;cursor:pointer;transition:all .2s var(--ease)}
.chip:hover{color:var(--text);transform:translateY(-1px)}
.chip.active{color:#fff;border-color:var(--accent);background:var(--accent-soft);box-shadow:0 6px 16px -8px rgba(238,106,47,.7)}

/* ---------- Selos ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .55rem;border-radius:7px;font-size:.72rem;font-weight:700;letter-spacing:.02em;background:var(--surface3);color:var(--muted);border:1px solid var(--line2)}
.badge.orange{background:var(--accent-soft);color:var(--accent2);border-color:rgba(238,106,47,.35)}
.badge.green{background:rgba(47,210,122,.12);color:var(--ok);border-color:rgba(47,210,122,.3)}
.badge.red{background:rgba(239,79,79,.12);color:#ff7d7d;border-color:rgba(239,79,79,.3)}
.badge.yellow{background:rgba(242,179,61,.12);color:var(--warn);border-color:rgba(242,179,61,.3)}
.live{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .65rem;border-radius:8px;background:#e5372f;color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.12em;box-shadow:0 6px 18px -6px rgba(229,55,47,.8)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.4s ease-in-out infinite}
.dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:none}
.dot.on{background:var(--ok);box-shadow:0 0 0 0 rgba(47,210,122,.6);animation:ring 1.8s infinite}
@keyframes pulse{50%{opacity:.25}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(47,210,122,.55)}70%{box-shadow:0 0 0 8px rgba(47,210,122,0)}100%{box-shadow:0 0 0 0 rgba(47,210,122,0)}}

/* ---------- Tabelas ---------- */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.table{width:100%;border-collapse:collapse;font-size:.87rem}
.table th{position:sticky;top:0;background:#11151a;text-align:left;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:.8rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:.8rem 1rem;border-bottom:1px solid #1b2027;vertical-align:middle}
.table tbody tr{transition:background .15s}
.table tbody tr:hover{background:rgba(255,255,255,.025)}
.table tbody tr.clickable{cursor:pointer}

/* ---------- Avatar ---------- */
.avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff;flex:none;
  background:linear-gradient(135deg,#3a414c,#242a32);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 12px -6px rgba(0,0,0,.7)}
.avatar.orange{background:linear-gradient(135deg,var(--accent2),var(--accent-deep))}

/* ---------- Palco (telão / espelho) ---------- */
.stage{container-type:inline-size;position:relative;aspect-ratio:16/9;width:100%;background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px #20262e,0 30px 60px -30px rgba(0,0,0,.9),0 0 80px -40px rgba(238,106,47,.35)}
.stage .layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .45s var(--ease)}
.stage .layer.show{opacity:1}
.stage img.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.015);transition:opacity .4s var(--ease),transform .5s var(--ease);-webkit-user-drag:none;user-select:none}
.stage img.slide.show{opacity:1;transform:none}
.stage video,.stage iframe{width:100%;height:100%;border:0;background:#000;object-fit:contain}
.stage .idle{flex-direction:column;gap:1rem;background:radial-gradient(60% 60% at 50% 50%,#1a1310 0%,#000 75%)}
.stage .idle .logo-txt{font-size:clamp(26px,11cqw,190px);animation:breathe 5s ease-in-out infinite}
.stage .idle > span:not(.logo-txt){color:var(--muted);font-size:clamp(.55rem,1.5cqw,1.1rem);letter-spacing:.25em;text-transform:uppercase}
@keyframes breathe{50%{transform:scale(1.04);opacity:.85}}
.stage .wm{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background-repeat:repeat;z-index:5}
.stage.protected .wm{opacity:1}
.stage.protected{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stage .counter{position:absolute;right:.7rem;bottom:.6rem;z-index:6;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:.25rem .55rem;border-radius:7px;font-size:.72rem;font-weight:700;color:#ddd}
.stage .unmute{position:absolute;left:.7rem;bottom:.6rem;z-index:6}
@media print{.stage,.no-print{display:none!important}body::after{content:"Conteúdo protegido — impressão não permitida.";display:block;padding:2rem;color:#000}}

/* ---------- Modal / toast ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(4,5,7,.7);backdrop-filter:blur(6px);display:grid;place-items:center;padding:1rem;animation:fadeIn .2s ease}
.modal{width:min(560px,100%);max-height:90vh;overflow:auto;background:linear-gradient(180deg,#171b21,#121519);border:1px solid var(--line2);border-radius:20px;padding:1.5rem;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.03) inset;animation:pop .35s var(--spring)}
.modal.wide{width:min(820px,100%)}
.overlay.out{animation:fadeOut .2s ease forwards} .overlay.out .modal{animation:popOut .2s ease forwards}
.toasts{position:fixed;right:1rem;bottom:1rem;z-index:80;display:flex;flex-direction:column;gap:.5rem;max-width:min(380px,calc(100vw - 2rem))}
.toast{padding:.85rem 1rem;border-radius:12px;background:#1b2027;border:1px solid var(--line2);font-size:.88rem;font-weight:500;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.9);animation:slideIn .35s var(--spring);border-left:4px solid var(--accent)}
.toast-ok{border-left-color:var(--ok)} .toast-error{border-left-color:var(--danger)}
.toast.out{animation:slideOut .3s ease forwards}

/* ---------- Animações de entrada ---------- */
.enter{animation:fadeUp .5s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}} @keyframes fadeOut{to{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(10px)}}
@keyframes popOut{to{opacity:0;transform:scale(.95)}}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}}
@keyframes slideOut{to{opacity:0;transform:translateX(30px)}}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.lift{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.lift:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 24px 40px -24px rgba(0,0,0,.9),0 0 0 1px rgba(238,106,47,.12)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}