/* ==========================================================================
   ATRIUM UI — folha de estilo do redesign
   Extraída do mockup "Admin Atrium Desktop.dc.html". Valores idênticos.

   COMO USAR
   1. Copie este arquivo para a raiz do hub, ao lado de styles.css
   2. No index.html, carregue DEPOIS de styles.css:
        <link rel="stylesheet" href="atrium-ui.css">
   3. Adicione as classes .at-* ao HTML existente. NÃO remova as classes
      antigas — elas continuam ligadas ao app.js. As duas convivem.
   4. Para o tema escuro: <body data-tema="escuro">

   Nada aqui depende de JavaScript. Nenhum seletor sobrescreve regra do
   styles.css por !important: quando houver conflito, a classe .at-* vence
   por ordem de carregamento apenas.
   ========================================================================== */

/* ── FONTES ─────────────────────────────────────────────────────────────── */
@font-face{font-family:"Thicker";src:url("assets/fonts/Thicker-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Kicker";src:url("assets/fonts/Kicker-Black.ttf") format("truetype");font-weight:900;font-display:swap}
/* Montserrat vem do Google Fonts — mantenha o <link> que já existe no hub.
   ATENÇÃO: a Kicker instalada é versão trial e renderiza dígitos como
   "TRIAL ONLY". Use-a só em títulos sem números, ou licencie a fonte. */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root{
  /* marca */
  --at-floresta:#2B3E21;   --at-oliva:#97B451;    --at-lima:#C6DE8F;
  --at-salvia:#B7C9A8;     --at-ocre:#C89B3C;     --at-areia:#E4D5B7;
  --at-preto:#030304;      --at-off-white:#F0F0F0;

  /* superfícies (tema claro) */
  --pg:#EDEEE8;            /* fundo da página */
  --cd:#FFFFFF;            /* card */
  --card:#FFFFFF;          /* alias usado em blocos internos */
  --tn:#F4F7EE;            /* tinta de apoio, chip neutro */
  --tint:#F4F7EE;
  --nav:#22301A;           /* trilho e faixas escuras */

  /* texto */
  --ink:#0B0F07;           /* principal */
  --ink2:#585D52;          /* secundário */
  --ink3:#676D60;          /* terciário, rótulos */
  --br:#2B3E21;            /* ícone de marca */
  --brand:#2B3E21;
  --lk:#2B3E21;            /* link e sobrelinha */

  /* trilho */
  --nvi:#F2F4EC;                       /* texto no trilho */
  --nvi2:rgba(242,244,236,.55);        /* texto secundário no trilho */
  --nvl:rgba(242,244,236,.11);         /* item ativo */
  --nvh:rgba(242,244,236,.07);         /* hover / bloco no trilho */

  /* linhas e sombras */
  --ln:rgba(43,62,33,.1);
  --ln2:rgba(43,62,33,.2);
  --rh:rgba(43,62,33,.04);             /* hover de linha de tabela */
  --sh:0 1px 2px rgba(11,15,7,.04),0 6px 20px rgba(11,15,7,.05);

  /* tons pastéis — SEMPRE em par com seu -ink correspondente */
  --t-oliva:#E7F0D8;       --t-verde-ink:#3E5A26;
  --t-verde:#E7F0D8;
  --t-lima:#E9F2DC;
  --t-ocre:#F6EBD6;        --t-ocre-ink:#7A5716;
  --t-areia:#F3EBDA;       --t-areia-ink:#6B5620;
  --t-salvia:#E6EDE1;
  --t-vermelho:#F6E2DE;    --t-vermelho-ink:#2A1512;

  /* erro — entrou na identidade neste projeto */
  --at-erro:#B4372A;       --at-erro-forte:#9A2A1C;
}

[data-tema="escuro"]{
  --pg:#0F1109;  --cd:#191C14;  --card:#191C14;  --tn:#232719;  --tint:#232719;
  --nav:#080A05;
  --ink:#EDEFE6; --ink2:#A3A899; --ink3:#7C8175;
  --br:#A9CC7A;  --brand:#A9CC7A; --lk:#A9CC7A;
  --nvi:#EDEFE6; --nvi2:rgba(237,239,230,.5);
  --nvl:rgba(237,239,230,.09); --nvh:rgba(237,239,230,.06);
  --ln:rgba(237,239,230,.09); --ln2:rgba(237,239,230,.18);
  --rh:rgba(237,239,230,.04);
  --sh:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28);
  --t-oliva:#28331E;    --t-verde-ink:#B4D488;
  --t-verde:#28331E;
  --t-lima:#2A3620;
  --t-ocre:#392D19;     --t-ocre-ink:#E0B36A;
  --t-areia:#362F1E;    --t-areia-ink:#D9C288;
  --t-salvia:#262E1D;
  --t-vermelho:#3A211C; --t-vermelho-ink:#F0BDB4;
  --at-erro:#E2705F;    --at-erro-forte:#F0BDB4;
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
.at-app{
  background:var(--pg);
  color:var(--ink);
  font-family:"Montserrat",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.at-app a{color:var(--lk);text-decoration-thickness:2px;text-underline-offset:3px}
.at-app a:hover{color:var(--at-oliva)}
.at-display{font-family:"Thicker","Montserrat",sans-serif;text-transform:uppercase;letter-spacing:-.01em;line-height:1.06}

/* ── LAYOUT: trilho + painel (opção escolhida) ──────────────────────────── */
.at-shell{display:flex;gap:12px;padding:12px;min-height:100vh;box-sizing:border-box;background:var(--pg)}

.at-rail{                       /* trilho de ícones, 66px */
  width:66px;flex:none;background:var(--nav);border-radius:24px;
  display:flex;flex-direction:column;overflow:hidden;
}
.at-rail__brand{padding:16px 0 12px;display:flex;justify-content:center}
.at-rail__item{
  width:46px;height:46px;margin:0 auto 4px;border:0;border-radius:16px;
  background:transparent;color:var(--nvi2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
.at-rail__item:hover{background:var(--nvh);color:var(--nvi)}
.at-rail__item.is-active{background:var(--nvl);color:var(--nvi)}
.at-rail__foot{margin-top:auto}

.at-panel{                      /* painel do grupo, 212px */
  width:212px;flex:none;background:var(--cd);border-radius:24px;
  display:flex;flex-direction:column;overflow:hidden;
}
.at-panel__head{padding:20px 16px 12px;flex:none}
.at-panel__eyebrow{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.at-panel__title{font-family:"Thicker",sans-serif;font-size:17px;line-height:1.1;text-transform:uppercase;color:var(--ink);margin-top:5px}
.at-panel__list{flex:none;overflow-y:auto;padding:0 10px 10px}
.at-panel__item{
  width:100%;text-align:left;border:0;background:transparent;border-radius:12px;
  padding:9px 11px;margin-bottom:2px;min-height:38px;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--ink2);
}
.at-panel__item:hover{background:var(--rh);color:var(--ink)}
.at-panel__item.is-active{background:var(--t-oliva);color:var(--t-verde-ink);font-weight:700}
.at-panel__badge{
  margin-left:auto;font-size:9.5px;font-weight:700;border-radius:999px;padding:3px 7px;
  background:var(--t-oliva);color:var(--t-verde-ink);
}
.at-panel__badge--erro{background:var(--t-vermelho);color:var(--at-erro)}

.at-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.at-topbar{
  flex:none;background:var(--cd);border-radius:20px;padding:12px 16px;
  display:flex;align-items:center;gap:12px;
}
.at-topbar__trail{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.at-topbar__title{font-family:"Thicker",sans-serif;font-size:19px;line-height:1.1;text-transform:uppercase;color:var(--ink);margin-top:2px;white-space:nowrap}
.at-iconbtn{
  width:40px;height:40px;flex:none;border:1px solid var(--ln);border-radius:14px;
  background:var(--cd);color:var(--ink2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.at-iconbtn:hover{background:var(--tn);color:var(--ink)}
.at-content{flex:1;overflow-y:auto;border-radius:24px}

/* ── ABERTURA DE TELA (herói) ───────────────────────────────────────────── */
.at-hero{
  background:var(--t-salvia);border-radius:26px;padding:24px 26px;
  display:flex;align-items:flex-end;gap:20px;position:relative;overflow:hidden;
  margin-bottom:14px;
}
.at-hero__pattern{position:absolute;inset:0;opacity:.06;object-fit:cover;width:100%;height:100%;pointer-events:none}
.at-hero__eyebrow{position:relative;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lk)}
.at-hero__title{position:relative;font-family:"Thicker",sans-serif;font-size:34px;line-height:1.06;letter-spacing:-.015em;text-transform:uppercase;color:var(--ink);margin-top:6px}
.at-hero__text{position:relative;margin:0 0 5px;font-size:12.5px;line-height:1.5;color:var(--ink2);max-width:30ch}
.at-hero__mascote{position:relative;flex:none;height:auto;pointer-events:none}
.at-hero__cta{                  /* cápsula escura com seta */
  position:relative;border:0;border-radius:999px;padding:12px 20px;
  background:var(--nav);color:var(--at-off-white);
  font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
}

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.at-card{background:var(--cd);border:1px solid var(--ln);border-radius:22px;padding:18px}
.at-card--flat{border:0;box-shadow:var(--sh)}
.at-card__title{font-family:"Thicker",sans-serif;font-size:15px;text-transform:uppercase;color:var(--ink)}
.at-card__sub{font-size:11px;color:var(--ink3);margin-top:3px}

.at-kpi{                        /* card de número */
  border-radius:20px;padding:16px 17px;display:flex;flex-direction:column;
  background:var(--t-oliva);color:var(--t-verde-ink);
}
.at-kpi__tile{width:30px;height:30px;border-radius:10px;background:rgba(43,62,33,.09);display:flex;align-items:center;justify-content:center}
.at-kpi__v{font-family:"Thicker",sans-serif;font-size:25px;line-height:1;margin-top:14px}
.at-kpi__l{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.66;margin-top:6px}
.at-kpi--areia{background:var(--t-areia);color:var(--t-areia-ink)}
.at-kpi--ocre{background:var(--t-ocre);color:var(--t-ocre-ink)}
.at-kpi--erro{background:var(--t-vermelho);color:var(--at-erro)}
.at-kpi--escuro{background:var(--nav);color:var(--at-off-white)}

/* ── CHIPS E FILTROS ────────────────────────────────────────────────────── */
.at-chips{display:flex;gap:7px;flex-wrap:wrap}
.at-chip{
  border:1px solid var(--ln);background:var(--cd);color:var(--ink2);
  border-radius:999px;padding:8px 13px;min-height:34px;
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;
}
.at-chip:hover{background:var(--tn)}
.at-chip.is-active{background:var(--nav);border-color:var(--nav);color:var(--at-off-white)}
.at-chip__n{font-size:9.5px;opacity:.7}

.at-search{
  background:var(--cd);border:1px solid var(--ln);border-radius:999px;
  padding:11px 16px;display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--ink3);
}
.at-search input{border:0;background:transparent;outline:0;flex:1;font:inherit;color:var(--ink)}

/* ── TABELA ─────────────────────────────────────────────────────────────── */
.at-table{background:var(--cd);border:1px solid var(--ln);border-radius:22px;overflow:hidden}
.at-table__head{
  display:flex;padding:0 18px;border-bottom:1px solid var(--ln);
  font-size:8.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);
}
.at-table__head span{padding:11px 0}
.at-table__row{display:flex;align-items:center;padding:0 18px;border-bottom:1px solid var(--ln);min-height:52px}
.at-table__row:last-child{border-bottom:0}
.at-table__row:hover{background:var(--rh)}
.at-table__row td,.at-table__row span{padding:11px 0;font-size:12px;color:var(--ink)}
.at-table--compacta .at-table__row{min-height:40px}
.at-table--compacta .at-table__row span{padding:7px 0;font-size:11.5px}

.at-tag{                        /* etiqueta de status */
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:5px 10px;white-space:nowrap;
  background:var(--t-oliva);color:var(--t-verde-ink);
}
.at-tag--areia{background:var(--t-areia);color:var(--t-areia-ink)}
.at-tag--ocre{background:var(--t-ocre);color:var(--t-ocre-ink)}
.at-tag--erro{background:var(--t-vermelho);color:var(--at-erro)}
.at-tag--neutra{background:var(--tn);color:var(--ink2)}

/* ── BARRAS E PROGRESSO ─────────────────────────────────────────────────── */
.at-bar{height:7px;border-radius:99px;background:var(--pg);overflow:hidden;display:block}
.at-bar>span{display:block;height:100%;border-radius:99px;background:var(--at-oliva)}
.at-bar--ok>span{background:var(--at-oliva)}
.at-bar--atencao>span{background:var(--at-areia)}
.at-bar--erro>span{background:var(--at-erro)}

/* ── BOTÕES ─────────────────────────────────────────────────────────────── */
.at-btn{
  border:0;border-radius:999px;padding:13px 22px;min-height:44px;
  background:var(--nav);color:var(--at-off-white);
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
}
.at-btn:hover{background:var(--at-floresta)}
.at-btn--secundario{background:transparent;border:2px solid var(--ln2);color:var(--ink)}
.at-btn--secundario:hover{background:var(--tn)}
.at-btn--marca{background:var(--at-oliva);color:var(--at-floresta)}
.at-btn--erro{background:var(--at-erro);color:#F6E2DE}
.at-btn:disabled{background:var(--ln);color:var(--ink3);cursor:default}

/* ── VAZIO ──────────────────────────────────────────────────────────────── */
.at-vazio{
  background:var(--cd);border:1px dashed var(--ln2);border-radius:22px;
  padding:34px 24px;display:flex;flex-direction:column;align-items:center;
  gap:12px;text-align:center;
}
.at-vazio__mascote{width:120px;height:auto;opacity:.9}
.at-vazio__titulo{font-family:"Thicker",sans-serif;font-size:16px;text-transform:uppercase;color:var(--ink)}
.at-vazio__texto{font-size:12px;color:var(--ink3);line-height:1.5;max-width:34ch}

/* ── ANIMAÇÕES ──────────────────────────────────────────────────────────── */
@keyframes atRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes atSlide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes atPop{0%{opacity:0;transform:scale(.82)}62%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes atBob{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-10px) rotate(1.6deg)}}
@keyframes atSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes atHop{0%,72%,100%{transform:translateY(0)}80%{transform:translateY(-13px)}90%{transform:translateY(-4px)}}
@keyframes atCheer{0%,64%,100%{transform:translateY(0) rotate(0)}72%{transform:translateY(-16px) rotate(-6deg)}82%{transform:translateY(-5px) rotate(5deg)}92%{transform:translateY(-2px) rotate(-2deg)}}
@keyframes atGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.at-rise{animation:atRise .42s cubic-bezier(.22,1,.36,1) both}
.at-bob{animation:atBob 4.6s cubic-bezier(.42,0,.58,1) infinite}
.at-hop{animation:atHop 4.2s cubic-bezier(.34,1.32,.64,1) infinite}
.at-cheer{animation:atCheer 5s cubic-bezier(.34,1.32,.64,1) infinite}
@media (prefers-reduced-motion:reduce){
  .at-rise,.at-bob,.at-hop,.at-cheer{animation:none}
}