/* Base comum das 5 versões da Visão geral — tokens da marca, marca, arte, estados vazios */
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --sunk:#ECEEF1; --ink:#1F2023; --graphite:#2B2D31; --muted:#6B7280; --soft:#9AA0AA; --line:#E2E5E9;
  --blue:#2F80ED; --blue-ink:#1F6AD1; --blue-wash:#EAF2FD;
  --s-producao:#9AA0AA; --s-aprovacao:#D99A1E; --s-ajustes:#D2453B; --s-aprovado:#1F9D62; --s-agendado:#2F80ED; --s-publicado:#2B2D31; --s-erro:#C0362C;
  --draft:#FFFFFF; --draft-ink:#2B2D31;
  --sans:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --stencil:"Saira Stencil One","IBM Plex Sans",sans-serif;
  --r:10px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1E2024; --surface:#2B2D31; --sunk:#25272B; --ink:#F1F2F4; --graphite:#F1F2F4; --muted:#A3A9B3; --soft:#7D838D; --line:#393C42;
  --blue-ink:#7DB1F6; --blue-wash:#263447;
  --s-producao:#8E96A3; --s-aprovacao:#E8AE45; --s-ajustes:#EE6A60; --s-aprovado:#3CC287; --s-publicado:#C9CCD2; --s-erro:#FF7A70;
  --draft:#33363C; --draft-ink:#E6E8EB; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1E2024; --surface:#2B2D31; --sunk:#25272B; --ink:#F1F2F4; --graphite:#F1F2F4; --muted:#A3A9B3; --soft:#7D838D; --line:#393C42;
  --blue-ink:#7DB1F6; --blue-wash:#263447;
  --s-producao:#8E96A3; --s-aprovacao:#E8AE45; --s-ajustes:#EE6A60; --s-aprovado:#3CC287; --s-publicado:#C9CCD2; --s-erro:#FF7A70;
  --draft:#33363C; --draft-ink:#E6E8EB; color-scheme:dark}

*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
a{color:var(--blue-ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em}

/* marca: logo oficial no claro; no escuro, nome em Saira Stencil até chegar o arquivo negativo */
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.brand img{height:30px;width:auto}
.brand .neg{display:none;flex-direction:column;line-height:1}
.brand .neg b{font-family:var(--stencil);font-weight:400;font-size:21px;letter-spacing:.01em}
.brand .neg small{font-size:8.5px;letter-spacing:.32em;color:var(--muted);margin-top:4px}
:root[data-theme="dark"] .brand img{display:none}
:root[data-theme="dark"] .brand .neg{display:flex}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{display:none}:root:not([data-theme="light"]) .brand .neg{display:flex}}

/* arte: miniatura real ou rascunho desenhado */
.art{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--sunk);flex:none}
.art.st{aspect-ratio:9/16}
.art img{width:100%;height:100%;object-fit:cover}
.art .n{position:absolute;right:6px;top:6px;font-size:11px;font-weight:500;color:#fff;background:rgba(31,32,35,.62);padding:1px 7px;border-radius:99px;font-variant-numeric:tabular-nums}
.art.draft{background:var(--draft);color:var(--draft-ink);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:10% 10% 11%;container-type:inline-size}
.art.draft::before{content:"";width:16%;height:max(2px,1.6cqi);background:var(--blue);margin-bottom:6cqi}
.art.draft b{font-weight:700;font-size:max(9px,9.5cqi);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.art.draft span{font-size:max(8px,5.6cqi);color:var(--muted);margin-top:5cqi}
.art.draft.tiny b{font-size:max(7px,11cqi)}
.art.draft.tiny span{display:none}
@container (max-width:70px){ .art.draft b{display:none} .art.draft::before{width:34%;height:2px;margin:0} .art.draft{justify-content:center;align-items:center;padding:0} }

/* status */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.stt{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}

/* botões */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:10px 16px;font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s}
.btn.pri{background:var(--blue);color:#fff}
.btn.pri:hover{background:#2771D6}
.btn.sec{background:var(--sunk);color:var(--ink)}
.btn.sec:hover{background:var(--line)}
.btn.lnk{padding:10px 6px;color:var(--blue-ink)}
.btn.lg{padding:14px 22px;font-size:15.5px;border-radius:10px}

/* aviso de data vencida: um só, num lugar só */
.venc{display:flex;gap:14px;align-items:center}
.venc p{margin:0}

/* estados vazios */
.empty{color:var(--muted)}
.empty b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}

/* utilidades */
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tema{font-size:13px;color:var(--muted)}
.tema:hover{color:var(--ink)}

#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,14px);opacity:0;background:var(--graphite);color:var(--bg);padding:11px 8px 11px 18px;border-radius:12px;font-weight:500;z-index:90;transition:.2s;display:flex;gap:6px;align-items:center;pointer-events:none;max-width:calc(100% - 32px)}
#toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast button{color:var(--bg);opacity:.8;padding:4px 10px;font-weight:600;text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}