/* Acervo Effect Sport — design system (sem build) */
:root {
  --fundo:#f3f5f8; --superficie:#ffffff; --superficie-2:#f8fafc; --texto:#0f172a; --texto-2:#475569; --suave:#64748b; --borda:#e2e8f0; --borda-2:#cbd5e1;
  --primaria:#2563eb; --primaria-escura:#1d4ed8; --primaria-suave:#dbeafe; --acento:#a3e635; --acento-escuro:#4d7c0f;
  --perigo:#dc2626; --perigo-suave:#fee2e2; --ok:#16a34a; --ok-suave:#dcfce7; --aviso:#d97706; --aviso-suave:#fef3c7;
  --lateral:#0f172a; --lateral-texto:#cbd5e1; --lateral-ativo:#1e293b;
  --raio:12px; --raio-s:8px; --sombra:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08); --sombra-2:0 12px 32px rgba(15,23,42,.18);
  --fonte:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fundo:#0b1220; --superficie:#111827; --superficie-2:#0f172a; --texto:#e5e7eb; --texto-2:#cbd5e1; --suave:#94a3b8; --borda:#1f2937; --borda-2:#334155;
  --primaria:#60a5fa; --primaria-escura:#3b82f6; --primaria-suave:#1e3a8a; --perigo:#f87171; --perigo-suave:#450a0a; --ok:#4ade80; --ok-suave:#052e16; --aviso:#fbbf24; --aviso-suave:#451a03;
  --lateral:#060b16; --lateral-ativo:#111827; --sombra:0 1px 2px rgba(0,0,0,.4); --sombra-2:0 12px 32px rgba(0,0,0,.6);
} }
:root[data-theme="dark"] {
  --fundo:#0b1220; --superficie:#111827; --superficie-2:#0f172a; --texto:#e5e7eb; --texto-2:#cbd5e1; --suave:#94a3b8; --borda:#1f2937; --borda-2:#334155;
  --primaria:#60a5fa; --primaria-escura:#3b82f6; --primaria-suave:#1e3a8a; --perigo:#f87171; --perigo-suave:#450a0a; --ok:#4ade80; --ok-suave:#052e16; --aviso:#fbbf24; --aviso-suave:#451a03;
  --lateral:#060b16; --lateral-ativo:#111827; --sombra:0 1px 2px rgba(0,0,0,.4); --sombra-2:0 12px 32px rgba(0,0,0,.6);
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--fundo); color:var(--texto); font:14px/1.5 var(--fonte); -webkit-font-smoothing:antialiased }
a { color:var(--primaria); text-decoration:none } a:hover { text-decoration:underline }
h1,h2,h3 { font-weight:650; letter-spacing:-.01em; margin:0 0 12px } h1 { font-size:22px } h2 { font-size:16px } h3 { font-size:14px }
code { font:12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--superficie-2); border:1px solid var(--borda); border-radius:6px; padding:1px 6px; word-break:break-all }
svg.i { width:18px; height:18px; vertical-align:-4px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none }
.i.g { width:22px; height:22px }

/* ---- Layout: barra lateral + conteúdo ------------------------------------------- */
.app { display:grid; grid-template-columns:248px 1fr; min-height:100vh }
.lateral { background:var(--lateral); color:var(--lateral-texto); display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh; overflow:auto }
.marca { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:16px; padding:4px 8px 18px; letter-spacing:-.01em }
.marca .logo { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, var(--acento), #22c55e); color:#052e16; display:grid; place-items:center; font-weight:800; font-size:15px }
.marca small { display:block; font-weight:400; font-size:11px; color:#94a3b8; letter-spacing:.06em; text-transform:uppercase }
.nav a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--raio-s); color:var(--lateral-texto); font-weight:500; margin-bottom:2px }
.nav a:hover { background:var(--lateral-ativo); color:#fff; text-decoration:none } .nav a.ativo { background:var(--lateral-ativo); color:#fff; box-shadow:inset 3px 0 0 var(--acento) }
.nav .secao { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#64748b; padding:16px 10px 6px }
.lateral .rodape { margin-top:auto; padding:10px 8px 0; border-top:1px solid #1e293b; font-size:12px; color:#94a3b8 }
.lateral .rodape .nome { color:#fff; font-weight:600; font-size:13px } .lateral .rodape form { margin-top:8px }
.lateral .rodape button, .lateral .rodape a { color:#94a3b8 } .lateral .rodape button:hover, .lateral .rodape a:hover { color:#fff }
.principal { min-width:0; display:flex; flex-direction:column }
.topo { display:flex; align-items:center; gap:14px; padding:12px 28px; background:var(--superficie); border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:5 }
.busca-topo { flex:1; max-width:640px; position:relative } .busca-topo svg { position:absolute; left:12px; top:10px; color:var(--suave) }
.busca-topo input[type=search] { width:100%; padding:9px 12px 9px 38px; border:1px solid var(--borda); border-radius:10px; background:var(--superficie-2); color:var(--texto); font:inherit }
.busca-topo input[type=search]:focus { outline:2px solid var(--primaria-suave); border-color:var(--primaria) }
.topo .direita { margin-left:auto; display:flex; gap:8px; align-items:center }
.conteudo { padding:24px 28px 60px; max-width:100%; width:100% }
.topo .menu-m { display:none }

/* ---- Componentes ------------------------------------------------------------------ */
.cartao { background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); padding:20px; box-shadow:var(--sombra) }
.botao { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--raio-s); border:1px solid var(--borda-2); background:var(--superficie); color:var(--texto); cursor:pointer; font:inherit; font-weight:500; line-height:1.2; white-space:nowrap; transition:background .12s, border-color .12s }
.botao:hover { background:var(--superficie-2); text-decoration:none } .botao:disabled { opacity:.5; cursor:default }
.botao.primario { background:var(--primaria); border-color:var(--primaria); color:#fff } .botao.primario:hover { background:var(--primaria-escura) }
.botao.perigo { color:var(--perigo); border-color:var(--perigo) } .botao.perigo:hover { background:var(--perigo-suave) }
.botao.pequeno { padding:5px 10px; font-size:13px } .botao.icone { padding:7px; border-color:transparent; background:transparent } .botao.icone:hover { background:var(--superficie-2) }
.botao.ativo { background:var(--primaria-suave); border-color:var(--primaria); color:var(--primaria) }
button.link { background:none; border:0; color:var(--primaria); cursor:pointer; font:inherit; padding:0 } button.link:hover { text-decoration:underline }
input[type=text], input[type=search], input[type=password], input[type=date], input[type=file], select, textarea { padding:8px 10px; border:1px solid var(--borda-2); border-radius:var(--raio-s); background:var(--superficie); color:var(--texto); font:inherit }
input:focus, select:focus, textarea:focus { outline:2px solid var(--primaria-suave); border-color:var(--primaria) }
.selo { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; padding:2px 9px; border-radius:999px; background:var(--superficie-2); border:1px solid var(--borda); color:var(--texto-2) }
.selo.ok { background:var(--ok-suave); color:var(--ok); border-color:transparent } .selo.aviso { background:var(--aviso-suave); color:var(--aviso); border-color:transparent } .selo.perigo { background:var(--perigo-suave); color:var(--perigo); border-color:transparent } .selo.info { background:var(--primaria-suave); color:var(--primaria); border-color:transparent }
.mensagens { position:fixed; right:20px; top:70px; z-index:50; display:flex; flex-direction:column; gap:8px; max-width:440px }
.msg { padding:12px 16px; border-radius:var(--raio-s); background:var(--superficie); border:1px solid var(--borda); box-shadow:var(--sombra-2); font-weight:500; animation:entra .25s ease }
.msg.success { border-left:4px solid var(--ok) } .msg.error { border-left:4px solid var(--perigo) } .msg.info, .msg.warning { border-left:4px solid var(--primaria) }
@keyframes entra { from { transform:translateY(-6px); opacity:0 } to { transform:none; opacity:1 } }
.trilha { display:flex; flex-wrap:wrap; gap:4px; align-items:center; color:var(--suave); margin:0 0 10px; font-size:13px } .trilha a { color:var(--suave); padding:2px 4px; border-radius:4px } .trilha a:hover { background:var(--superficie-2); text-decoration:none; color:var(--texto) } .trilha strong { color:var(--texto); font-weight:600 }
.barra { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px } .barra h1 { margin:0; display:flex; align-items:center; gap:10px } .barra .direita { margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.filtros { display:flex; flex-wrap:wrap; gap:8px; align-items:center } .filtros label { display:flex; gap:6px; align-items:center; font-size:13px; color:var(--texto-2) }
.vazio { color:var(--suave); padding:40px 20px; text-align:center } .vazio svg { width:40px; height:40px; stroke-width:1.3; color:var(--borda-2); display:block; margin:0 auto 10px }
.paginacao { display:flex; gap:12px; justify-content:center; align-items:center; margin:16px 0; color:var(--suave); font-size:13px }

/* ---- Tabelas e listas ------------------------------------------------------------ */
table.lista { width:100%; border-collapse:separate; border-spacing:0; background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra) }
.lista th, .lista td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--borda); vertical-align:middle }
.lista th { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--suave); font-weight:600; background:var(--superficie-2) } .lista th a { color:var(--suave) }
.lista tbody tr:last-child td { border-bottom:0 } .lista tbody tr:hover td { background:var(--superficie-2) } .lista tr.sel td { background:var(--primaria-suave) }
.lista td.num { text-align:right; white-space:nowrap; color:var(--texto-2); font-variant-numeric:tabular-nums } .lista .acoes { white-space:nowrap; text-align:right; width:1% }
.lista td.nome { font-weight:500 } .lista td.nome a { color:var(--texto); display:inline-flex; align-items:center; gap:10px } .lista td.nome a:hover { color:var(--primaria); text-decoration:none }
.lista td.chk, .lista th.chk { width:1%; padding-right:0 } input[type=checkbox] { width:16px; height:16px; accent-color:var(--primaria); cursor:pointer }
.tipo { width:34px; height:34px; border-radius:9px; display:inline-grid; place-items:center; flex:none; font-size:10px; font-weight:700; letter-spacing:.02em; color:#fff; background:var(--suave) }
.tipo svg { width:18px; height:18px; stroke:#fff }
.tipo.pasta { background:#f59e0b } .tipo.pdf { background:#ef4444 } .tipo.doc { background:#2b579a } .tipo.xls { background:#217346 } .tipo.ppt { background:#d24726 } .tipo.img { background:#8b5cf6 } .tipo.vid { background:#0ea5e9 } .tipo.aud { background:#ec4899 } .tipo.zip { background:#64748b } .tipo.txt { background:#475569 } .tipo.art { background:#f97316 }
.grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:14px }
.grade .item { background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); padding:10px; color:var(--texto); box-shadow:var(--sombra); position:relative; transition:transform .12s, box-shadow .12s }
.grade .item:hover { transform:translateY(-2px); box-shadow:var(--sombra-2); text-decoration:none } .grade .item.sel { outline:2px solid var(--primaria) }
.grade .item .mini { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; background:var(--superficie-2); display:grid; place-items:center }
.grade .item .mini .tipo { width:48px; height:48px; border-radius:12px; font-size:13px } .grade .item .mini .tipo svg { width:26px; height:26px }
.grade .item .n { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:8px } .grade .item .m { font-size:12px; color:var(--suave) }
.grade .item .chk { position:absolute; left:16px; top:16px; opacity:0 } .grade .item:hover .chk, .grade .item.sel .chk { opacity:1 }
.sites { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px }
.sites a { display:flex; gap:12px; align-items:center; background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); padding:14px; color:var(--texto); box-shadow:var(--sombra); transition:transform .12s, box-shadow .12s }
.sites a:hover { transform:translateY(-2px); box-shadow:var(--sombra-2); text-decoration:none } .sites a strong { display:block; font-weight:600 } .sites small { display:block; color:var(--suave); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sites .grupo { grid-column:1/-1; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--suave); margin:10px 0 -6px; font-weight:600 }
.kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; margin-bottom:20px } .kpi { background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); padding:16px; box-shadow:var(--sombra) } .kpi small { color:var(--suave); font-size:12px } .kpi .v { font-size:24px; font-weight:700; letter-spacing:-.02em; margin:4px 0 2px }
.acao-lote { position:sticky; bottom:16px; margin-top:16px; display:none; align-items:center; gap:8px; background:var(--lateral); color:#fff; padding:10px 14px; border-radius:var(--raio); box-shadow:var(--sombra-2); z-index:4 } .acao-lote.on { display:flex } .acao-lote .botao { background:#1e293b; border-color:#334155; color:#fff } .acao-lote .botao:hover { background:#334155 }
details.menu { position:relative; display:inline-block } details.menu summary { list-style:none; cursor:pointer; padding:5px 8px; border-radius:6px; color:var(--suave) } details.menu summary::-webkit-details-marker { display:none } details.menu summary:hover { background:var(--superficie-2); color:var(--texto) }
details.menu > div { position:absolute; right:0; top:100%; margin-top:4px; background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio-s); padding:6px; min-width:180px; box-shadow:var(--sombra-2); z-index:6; text-align:left }
details.menu > div button, details.menu > div a { display:flex; width:100%; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; color:var(--texto); background:none; border:0; font:inherit; cursor:pointer; text-align:left } details.menu > div button:hover, details.menu > div a:hover { background:var(--superficie-2); text-decoration:none } details.menu > div .perigo { color:var(--perigo) }
dialog.dialogo { border:0; border-radius:var(--raio); padding:24px; max-width:560px; width:calc(100% - 32px); background:var(--superficie); color:var(--texto); box-shadow:var(--sombra-2) } dialog.dialogo::backdrop { background:rgba(2,6,23,.55); backdrop-filter:blur(2px) }
.dialogo h2 { margin-top:0 } .dialogo .rodape { display:flex; gap:8px; justify-content:flex-end; margin-top:18px } .dialogo input[type=text], .dialogo input[type=password] { width:100% }
.visualizador { background:#0b1220; border-radius:var(--raio); min-height:60vh; display:flex; align-items:center; justify-content:center; overflow:hidden } .visualizador img, .visualizador video { max-width:100%; max-height:80vh } .visualizador iframe { width:100%; height:80vh; border:0; background:#fff }
pre.texto { background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); padding:16px; overflow:auto; max-height:75vh; white-space:pre-wrap; font-size:13px }
.detalhes { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px 20px } .detalhes div small { display:block; color:var(--suave); font-size:11px; text-transform:uppercase; letter-spacing:.06em } .detalhes div span { font-weight:500 }
.arquivo-cab { display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start } .arquivo-cab aside { display:flex; flex-direction:column; gap:14px }
.lightbox { position:fixed; inset:0; background:rgba(2,6,23,.92); display:none; align-items:center; justify-content:center; z-index:60 } .lightbox.on { display:flex } .lightbox img { max-width:94vw; max-height:90vh; border-radius:6px } .lightbox button { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:0; color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:22px } .lightbox .ant { left:16px } .lightbox .prox { right:16px } .lightbox .fechar { top:16px; right:16px; transform:none; width:40px; height:40px; font-size:18px } .lightbox .nome { position:absolute; bottom:16px; color:#cbd5e1; font-size:13px }
.limitado { opacity:.65 } .drop { outline:2px dashed var(--primaria); outline-offset:-4px; background:var(--primaria-suave) }
.entrar-pagina { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr } .entrar-arte { background:var(--lateral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%231e293b' stroke-width='1'%3E%3Ccircle cx='200' cy='200' r='60'/%3E%3Ccircle cx='200' cy='200' r='120'/%3E%3Ccircle cx='200' cy='200' r='180'/%3E%3C/g%3E%3C/svg%3E") center/600px no-repeat; color:#fff; padding:60px; display:flex; flex-direction:column; justify-content:space-between }
.entrar-arte h2 { font-size:34px; line-height:1.15; max-width:420px; margin:0 } .entrar-arte p { color:#94a3b8; max-width:420px } .entrar-arte .marca { padding:0 }
.entrar-form { display:grid; place-items:center; padding:40px } .entrar-form .cartao { width:100%; max-width:400px; padding:32px } .entrar-form .botao { width:100%; justify-content:center; padding:12px }
.uppy-Root { margin:12px 0 } .uppy-Dashboard-inner { border-radius:var(--raio) !important }
mark { background:var(--acento); color:#052e16; border-radius:3px; padding:0 2px }
@media (max-width: 900px) {
  .app { grid-template-columns:1fr } .lateral { position:fixed; inset:0 auto 0 0; width:260px; transform:translateX(-100%); transition:transform .2s; z-index:40; height:100vh } .lateral.on { transform:none }
  .topo .menu-m { display:inline-flex } .topo { padding:10px 16px } .conteudo { padding:16px 16px 80px } .lista .oculta-m { display:none } .arquivo-cab { grid-template-columns:1fr }
  .entrar-pagina { grid-template-columns:1fr } .entrar-arte { display:none }
}

.barra-prog { height:10px; background:var(--borda); border-radius:999px; overflow:hidden; min-width:140px } .barra-prog span { display:block; height:100%; background:var(--primaria); border-radius:999px } .barra-prog.ok span { background:var(--ok) } .barra-prog.copiando span { background:var(--acento-escuro); animation:pulsa 1.4s ease-in-out infinite }
@keyframes pulsa { 0%,100% { opacity:1 } 50% { opacity:.55 } }
.prog-grande { height:18px; border-radius:999px; background:var(--borda); overflow:hidden } .prog-grande span { display:block; height:100%; background:linear-gradient(90deg, var(--primaria), var(--acento)); border-radius:999px }