/* ── Tokens de movimento (do design system RTS GO) ───────────────── */
:root {
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --orange: #B4180C;
  --gold:   #E13D30;
  --red:    #5A0600;
}

html, body { margin:0; padding:0; background:#070707; color:#fff; }
  * { box-sizing:border-box; }
  ::-webkit-scrollbar { width:9px; height:9px; }
  ::-webkit-scrollbar-track { background:#0b0b0b; }
  ::-webkit-scrollbar-thumb { background:#262626; border-radius:5px; }
  input[type=range].rng { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; background:#2a2222; outline:none; }
  input[type=range].rng::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#E13D30; border:3px solid #1a1010; box-shadow:0 0 0 2px rgba(225,61,48,0.4), 0 0 18px rgba(225,61,48,0.6); cursor:pointer; }
  input[type=range].rng::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#E13D30; border:3px solid #1a1010; cursor:pointer; }
  .ph::placeholder { color:rgba(255,255,255,0.25); }

/* ── Keyframes ───────────────────────────────────────────────────── */
/* riseIn/popIn agora seguem o reveal cinematográfico do design system
   (translateY + scale + blur, ease-apple). */
@keyframes riseIn { from { opacity:0; transform:translateY(2.4rem) scale(0.985); filter:blur(12px); } to { opacity:1; transform:none; filter:none; } }
@keyframes popIn  { from { opacity:0; transform:translateY(1.3rem) scale(0.94); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes spin   { to { transform:rotate(360deg); } }
@keyframes floatBg { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-52%) scale(1.08); } }

/* Acentos da marca (verbatim do design system) */
@keyframes fire-pulse   { 0%,100% { opacity:0.5; transform:scale(1); } 50% { opacity:1; transform:scale(1.1); } }
@keyframes shimmer-fire { 0% { background-position:-200% center; } 100% { background-position:200% center; } }
@keyframes fade-up      { from { opacity:0; transform:translateY(1rem); } to { opacity:1; transform:translateY(0); } }
@keyframes float        { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes pulse-ring   { 0% { transform:scale(0.6); opacity:0.7; } 100% { transform:scale(2.2); opacity:0; } }
@keyframes scan-line    { 0% { transform:translateY(-100%); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform:translateY(800%); opacity:0; } }
@keyframes slide-in-right { from { opacity:0; transform:translateX(2rem); } to { opacity:1; transform:translateX(0); } }
@keyframes border-glow-fire { 0%,100% { box-shadow:0 0 0 0 rgba(180,24,12,0); } 50% { box-shadow:0 0 0 4px rgba(180,24,12,0.18), 0 0 28px rgba(180,24,12,0.12); } }

/* ── Utilidades de motion ────────────────────────────────────────── */
/* Texto com shimmer de fogo (mesma paleta do site). */
.shimmer-text {
  background:linear-gradient(90deg, #B4180C 0%, #5A0600 30%, #E13D30 55%, #B4180C 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer-fire 4s linear infinite;
}
/* Glow pulsante na borda (CTA, card em destaque). */
.glow-fire { animation:border-glow-fire 3s ease-in-out infinite; }
/* Ponto pulsante. */
.fire-dot { animation:fire-pulse 3s ease-in-out infinite; }
/* Anel de pulso (radar) — usar em elemento absoluto. */
.pulse-ring { position:absolute; border-radius:50%; border:1px solid rgba(225,61,48,0.4); animation:pulse-ring 3.2s var(--ease-expo) infinite; pointer-events:none; }

/* Reveal escalonado: cada filho direto entra em sequência (ease-apple). */
.stagger > * { opacity:0; animation:riseIn 1s var(--ease-apple) both; }
.stagger > *:nth-child(1)  { animation-delay:0.10s; }
.stagger > *:nth-child(2)  { animation-delay:0.17s; }
.stagger > *:nth-child(3)  { animation-delay:0.24s; }
.stagger > *:nth-child(4)  { animation-delay:0.31s; }
.stagger > *:nth-child(5)  { animation-delay:0.38s; }
.stagger > *:nth-child(6)  { animation-delay:0.45s; }
.stagger > *:nth-child(7)  { animation-delay:0.52s; }
.stagger > *:nth-child(8)  { animation-delay:0.59s; }
.stagger > *:nth-child(9)  { animation-delay:0.66s; }
.stagger > *:nth-child(10) { animation-delay:0.73s; }
.stagger > *:nth-child(11) { animation-delay:0.80s; }
.stagger > *:nth-child(12) { animation-delay:0.87s; }

/* ── Apresentação (full-screen, alinhada à esquerda) ─────────────── */
.pres-stage { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:0; padding:74px clamp(44px,7vw,120px) 104px; overflow:hidden; animation:fadeIn 0.45s var(--ease-apple) both; }
.pres-kicker { display:flex; align-items:center; gap:11px; font-size:clamp(11px,1vw,13px); letter-spacing:0.3em; text-transform:uppercase; color:#E13D30; font-weight:700; margin-bottom:16px; }
.pres-kicker::before { content:''; width:8px; height:8px; border-radius:50%; background:#E13D30; box-shadow:0 0 12px rgba(225,61,48,0.7); animation:fire-pulse 3s ease-in-out infinite; }
.pres-h { font-family:'Saira',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; line-height:0.98; margin:0; }
.pres-rule { width:64px; height:4px; background:linear-gradient(90deg,#E8B23A,#E13D30); border-radius:4px; }
.pres-stat { font-family:'Saira',sans-serif; font-weight:800; line-height:1; }
.pres-lab { font-size:clamp(10px,0.85vw,12px); letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.42); margin-top:9px; font-weight:600; }

/* ── Portão de login (split fire) ────────────────────────────────── */
.auth-split { display:flex; min-height:100vh; width:100%; }
.auth-hero {
  position:relative; flex:1.05; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,6vw,92px);
  background:
    radial-gradient(120% 120% at 12% 18%, rgba(180,24,12,0.30), transparent 55%),
    radial-gradient(90% 100% at 88% 92%, rgba(90,6,0,0.60), transparent 62%),
    linear-gradient(155deg,#140404 0%,#070707 62%);
  border-right:1px solid rgba(255,255,255,0.06);
}
.auth-hero::before {
  content:''; position:absolute; width:540px; height:540px; left:-140px; top:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle, rgba(225,61,48,0.22), transparent 68%);
  filter:blur(24px); pointer-events:none; animation:fire-pulse 6s ease-in-out infinite;
}
.auth-hero > * { position:relative; z-index:1; }
.auth-outline { color:transparent; -webkit-text-stroke:1.6px #E13D30; text-stroke:1.6px #E13D30; }
.auth-form-wrap {
  flex:0.95; display:flex; align-items:center; justify-content:center;
  padding:clamp(30px,4vw,60px); background:#080808;
}
.auth-card { width:100%; max-width:376px; animation:riseIn 0.7s var(--ease-apple) both; }
.auth-input {
  width:100%; background:#141414; border:1px solid rgba(255,255,255,0.1); color:#fff;
  font-family:'Rajdhani',sans-serif; font-size:15px; padding:13px 15px; border-radius:10px; outline:none;
  transition:border-color 0.18s, box-shadow 0.18s;
}
.auth-input:focus { border-color:#E13D30; box-shadow:0 0 0 3px rgba(225,61,48,0.16); }
.auth-label { display:block; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.4); font-weight:700; margin-bottom:7px; }
.auth-btn {
  width:100%; background:linear-gradient(180deg,#E13D30,#B4180C); border:none; color:#fff;
  font-family:'Saira',sans-serif; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:0.06em;
  padding:14px; border-radius:10px; cursor:pointer; box-shadow:0 12px 30px -10px rgba(225,61,48,0.7);
  transition:transform 0.15s, box-shadow 0.2s;
}
.auth-btn:hover { transform:translateY(-1px); box-shadow:0 16px 38px -10px rgba(225,61,48,0.9); }
.auth-btn:active { transform:translateY(0); }
.auth-btn:disabled { opacity:0.55; cursor:default; box-shadow:none; }

@media (max-width:880px) {
  .auth-split { flex-direction:column; }
  .auth-hero { flex:none; min-height:40vh; justify-content:flex-end; padding:clamp(30px,7vw,48px); border-right:none; border-bottom:1px solid rgba(255,255,255,0.07); }
  .auth-hero::before { width:360px; height:360px; left:-120px; top:40%; }
  .auth-form-wrap { flex:1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ── Atividades: 3 colunas (Fila / Parados / Rotina), 4/12 cada ─────── */
.ativ-cols { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:start; }
.ativ-col-list { display:flex; flex-direction:column; gap:8px; max-height:62vh; overflow-y:auto; padding-right:4px; }
@media (max-width:1000px) { .ativ-cols { grid-template-columns:1fr; } .ativ-col-list { max-height:none; } }

/* ── Lead: painel (40%) | bancada de gatilhos (60%), com checklist+roteiro dentro ─ */
.lead-cols { display:grid; grid-template-columns:3fr 7fr; gap:16px; align-items:start; }
.lead-gat-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
/* min-width:auto (padrão do item de grid) faz a faixa 1fr crescer até o min-content
   do conteúdo e vazar da tela no celular. Zerar é o que mantém a coluna dentro. */
.lead-cols > *, .lead-gat-cols > * { min-width:0; }
@media (max-width:1400px) { .lead-gat-cols { grid-template-columns:1fr; } }
@media (max-width:1150px) { .lead-cols { grid-template-columns:1fr; } .lead-gat-cols { grid-template-columns:1fr 1fr; } }
@media (max-width:820px) { .lead-gat-cols { grid-template-columns:1fr; } }

/* Escada de etapas: barra de 7px (height inline) com área de clique maior via padding.
   box-sizing:content-box é obrigatório aqui — o global é border-box, que faria o padding
   comer a altura e sumir com a barra. background-clip:content-box pinta só a faixa de 7px. */
.lead-step { box-sizing:content-box !important; padding:7px 0; background-clip:content-box !important; }
/* Abas da ficha: rolam na horizontal quando não cabem (celular) em vez de quebrar linha. */
.lead-tabs { scrollbar-width:none; }
.lead-tabs::-webkit-scrollbar { display:none; }

/* ══ Camada mobile / iPhone 15 (Safari iOS) ═══════════════════════════
   Os estilos das páginas são inline; uma regra de stylesheet com !important
   vence o style="" inline (que não usa !important). Opt-out: classe .m-keep. */
@media (max-width:760px) {
  /* a página nunca rola lateralmente */
  html, body { overflow-x:clip; }

  /* Grids inline de N colunas fixas → 1 coluna.
     Exceções: .m-keep (opt-out) e os auto-fit/auto-fill, que JÁ se adaptam sozinhos
     (minmax(140px,1fr) rende 2 colunas em 393px — forçar 1fr deixaria os cards enormes). */
  #root main [style*="grid-template-columns"]:not(.m-keep):not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns:1fr !important;
  }

  /* larguras fixas nunca estouram o container (min-width de tabela/kanban continua vencendo → scroll) */
  #root main [style*="width:"] { max-width:100% !important; }

  /* iOS: fonte ≥16px em campos evita o auto-zoom ao focar */
  #root input, #root select, #root textarea { font-size:16px !important; }

  /* alvos de toque confortáveis (≥44px) */
  #root button, #root select,
  #root input:not([type=range]):not([type=checkbox]):not([type=radio]) { min-height:44px; }

  /* barras de filtro/controles marcadas com .m-wrap quebram em várias linhas */
  #root .m-wrap { flex-wrap:wrap !important; }
  #root .m-wrap > select, #root .m-wrap > input, #root .m-wrap > button { flex:1 1 140px; min-width:0; }

  /* linhas que devem virar card empilhado no celular */
  #root .m-card { flex-direction:column !important; align-items:stretch !important; }

  /* colunas sticky que atrapalham quando empilhadas no celular */
  #root .m-nostick { position:static !important; top:auto !important; }

  /* abas da ficha do lead: rolam na horizontal em vez de quebrar em 3 linhas */
  #root .lead-tabs { flex-wrap:nowrap !important; overflow-x:auto; }
  /* alvo de toque maior na escada de etapas no celular (a barra continua com 7px) */
  #root .lead-step { padding:12px 0 !important; }

  /* cabeçalhos de tabela que perdem sentido quando a linha vira card empilhado */
  #root .m-hide { display:none !important; }

  /* legibilidade dos micro-labels */
  #root main [style*="font-size:10px"],
  #root main [style*="font-size:10.5px"],
  #root main [style*="font-size:11px"] { font-size:12px !important; }

  /* grids densos que mantêm colunas e rolam na horizontal (12/8 meses, gantt) */
  #root main .m-scrollx { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* timeline de 12 meses: mantém as colunas e rola lateralmente (empilhar 12 seria pior) */
  #root main .m-cols-12 {
    grid-template-columns:repeat(12, 78px) !important;
    overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px;
  }
  /* cards de KPI: 2 por linha lê melhor do que 1 (evita rolagem infinita) */
  #root main .m-cols-2 { grid-template-columns:repeat(2, 1fr) !important; }

  /* safe-area do notch/Dynamic Island (standalone usa viewport-fit=cover) */
  #root .m-burger { top: calc(14px + env(safe-area-inset-top)) !important; }
  #root aside { padding-top: env(safe-area-inset-top); }
  #root main {
    padding-top: calc(64px + env(safe-area-inset-top)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-bottom: max(90px, calc(env(safe-area-inset-bottom) + 28px)) !important;
  }

  /* ── Apresentação: cada slide rola na vertical em vez de ser cortado ── */
  /* (o overlay fica fora do <main>, então precisa das próprias regras) */
  #root .pres-stage {
    justify-content:flex-start !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch;
    padding:64px 20px calc(124px + env(safe-area-inset-bottom)) !important;
  }
  #root .pres-stage [style*="grid-template-columns"]:not(.m-keep):not([style*="auto-fit"]):not([style*="auto-fill"]) { grid-template-columns:1fr !important; }
  #root .pres-stage [style*="width:"] { max-width:100% !important; }

  /* navegação: sem marca/contador (falta espaço), dots maiores para o dedo */
  #root .pres-nav { padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important; justify-content:center !important; }
  #root .pres-nav > div:first-child, #root .pres-nav > div:last-child { display:none !important; }
  #root .pres-nav span[style*="height:7px"] { height:12px !important; }
}