/* =============================================================================
   ACOT — Design System (Automatic Changeover with Telemetry)
   Tema visual compartilhado por TODOS os portais (cliente, login, admin,
   distribuidor, colaborador, dev). Baseado na apresentação ACOT:
   fundo creme, dourado, Space Grotesk + Manrope, cards com sombra suave,
   chrome de "terminal" e reveal escalonado.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* superfícies */
  --acot-bg:        #F4F1EA;
  --acot-bg-2:      #EEEAE0;
  --acot-surface:   #FFFFFF;
  --acot-surface-2: #FAF8F3;
  --acot-line:      rgba(0,0,0,.07);
  --acot-line-2:    rgba(0,0,0,.12);

  /* tinta / texto */
  --acot-ink:   #1B1B1F;
  --acot-ink-2: #76767C;
  --acot-muted: #A6A29A;

  /* marca + estados */
  --acot-gold:      #F2B705;
  --acot-gold-deep: #C8870A;
  --acot-amber:     #E0A200;
  --acot-green:     #15935A;
  --acot-green-2:   #0C7A48;
  --acot-green-soft:#EAFAF2;
  --acot-red:       #D8483C;
  --acot-red-soft:  #FDECEA;
  --acot-blue:      #2563EB;

  /* sombras */
  --acot-shadow:    0 36px 90px -34px rgba(0,0,0,.34);
  --acot-shadow-md: 0 22px 50px -26px rgba(0,0,0,.30);
  --acot-shadow-sm: 0 12px 30px -16px rgba(0,0,0,.26);

  /* tipografia */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* raios */
  --r-xl: 22px; --r-lg: 16px; --r-md: 13px; --r-sm: 10px;
}

/* ── primitivos reusáveis ───────────────────────────────────────────────── */
.acot-card {
  background: var(--acot-surface);
  border: 1px solid var(--acot-line);
  border-radius: var(--r-lg);
  box-shadow: var(--acot-shadow-sm);
}
.acot-card--float { box-shadow: var(--acot-shadow); }

/* barrinha dourada antes de títulos */
.acot-accent { display:inline-block; width:30px; height:3px; background:var(--acot-gold-deep); border-radius:2px; flex:none; }

/* sobre-título em caixa alta espaçada */
.acot-eyebrow { font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--acot-muted); }

/* pílula de status */
.acot-pill { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:13px; padding:6px 13px; border-radius:30px; line-height:1; }
.acot-pill .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.acot-pill--green { background:var(--acot-green-soft); color:var(--acot-green-2); }
.acot-pill--green .dot { background:var(--acot-green); animation:acot-pulse 2s infinite; }
.acot-pill--amber { background:#FCF3DD; color:#8A5B00; }
.acot-pill--amber .dot { background:var(--acot-amber); }
.acot-pill--red { background:var(--acot-red-soft); color:#9A2A20; }
.acot-pill--red .dot { background:var(--acot-red); animation:acot-pulse 1.4s infinite; }
.acot-pill--gray { background:#F0EDE6; color:var(--acot-ink-2); }
.acot-pill--gray .dot { background:var(--acot-muted); }

/* botões */
.acot-btn { font-family:var(--font-display); font-weight:600; border:none; cursor:pointer; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s ease, filter .15s ease, background .15s ease; }
.acot-btn:active { transform:scale(.97); }
.acot-btn--primary { background:var(--acot-gold); color:var(--acot-ink); }
.acot-btn--primary:hover { filter:brightness(1.04); }
.acot-btn--dark { background:var(--acot-ink); color:#fff; }
.acot-btn--ghost { background:transparent; color:var(--acot-ink-2); border:1px solid var(--acot-line-2); }
.acot-btn--ghost:hover { background:var(--acot-surface-2); color:var(--acot-ink); }

/* chrome de "terminal" (barrinha escura com 3 bolinhas) */
.acot-chrome { display:flex; align-items:center; gap:8px; padding:13px 18px; background:var(--acot-ink); }
.acot-chrome i { width:11px; height:11px; border-radius:50%; display:block; }
.acot-chrome .r { background:var(--acot-red); }
.acot-chrome .y { background:var(--acot-gold); }
.acot-chrome .g { background:var(--acot-green); animation:acot-pulse 2s infinite; }

/* ── animações: reveal escalonado + pulso ───────────────────────────────── */
@keyframes acot-rise  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes acot-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(1.5); } }
@keyframes acot-spin  { to { transform:rotate(360deg); } }
@keyframes acot-grow-y{ from { transform:scaleY(0); } to { transform:scaleY(1); } }

.u { animation:acot-rise .55s cubic-bezier(.2,.7,.3,1) both; }
.u.d1 { animation-delay:.06s } .u.d2 { animation-delay:.12s } .u.d3 { animation-delay:.18s }
.u.d4 { animation-delay:.24s } .u.d5 { animation-delay:.30s } .u.d6 { animation-delay:.36s }
.u.d7 { animation-delay:.42s } .u.d8 { animation-delay:.48s }