/* ─── CARDS DE ATRASO ──────────────────────────────────────────────── */
.atraso-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:16px;}
.atraso-card{background:var(--card);border:2px solid var(--border);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:10px;
  transition:transform .15s,box-shadow .15s;}
.atraso-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3);}
.atraso-card-top{display:flex;align-items:center;gap:10px;}
.atraso-bicho-img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.atraso-info{display:flex;flex-direction:column;gap:3px;}
.atraso-grupo{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);font-weight:700;}
.atraso-bicho-nome{font-size:15px;font-weight:800;color:var(--text);}
.termico-badge{font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;width:fit-content;}
.termico-badge.quente{background:rgba(245,166,35,.15);color:#f5a623;border:1px solid rgba(245,166,35,.3);}
.termico-badge.gelido{background:rgba(61,214,245,.15);color:#3dd6f5;border:1px solid rgba(61,214,245,.3);}
.termico-badge.neutro{background:rgba(100,116,139,.1);color:var(--muted);border:1px solid var(--border);}
.atraso-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.stat-ultima{grid-column:1/-1;}
.stat-item{background:var(--surface);border-radius:8px;padding:8px;text-align:center;}
.stat-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:3px;}
.stat-valor{font-family:'DM Mono',monospace;font-size:20px;font-weight:800;display:block;}
.stat-valor-ultima{font-family:'DM Mono',monospace;font-size:11px;color:var(--text);display:block;}
.atraso-critico{color:#ef4444;}
.atraso-alto{color:#f5a623;}
.atraso-med{color:#eab308;}
.atraso-ok{color:#22c55e;}
.btn-compartilhar{width:100%;padding:8px;background:rgba(245,166,35,.1);
  border:1px solid rgba(245,166,35,.3);border-radius:8px;color:#f5a623;
  font-size:11px;font-weight:700;cursor:pointer;transition:background .15s;}
.btn-compartilhar:hover{background:rgba(245,166,35,.2);}

/* ─── LEGENDA TÉRMICA ────────────────────────────────────────────────── */
.legenda-termico{display:flex;flex-wrap:wrap;gap:10px;padding:10px 14px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  margin-bottom:16px;font-size:11px;color:var(--muted);}

/* ─── MODAL DE COMPARTILHAMENTO ─────────────────────────────────────── */
.share-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;}
.share-modal-inner{background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:20px;max-width:480px;width:100%;}

/* ─── TOAST FREEMIUM ─────────────────────────────────────────────────── */
.freemium-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#2d1f4a,#1a1030);
  border:1px solid rgba(168,85,247,.4);border-radius:12px;
  padding:12px 20px;display:flex;align-items:center;gap:12px;
  font-size:12px;color:#ede9fe;z-index:500;max-width:90vw;
  box-shadow:0 8px 32px rgba(0,0,0,.4);}
.freemium-toast button{background:none;border:none;color:#a78bfa;cursor:pointer;font-size:16px;flex-shrink:0;}

/* ─── DOSSIÊ ─────────────────────────────────────────────────────────── */
.dossie-section{margin-bottom:24px;}
.dossie-section h2{font-size:16px;font-weight:800;color:var(--accent);margin-bottom:4px;}
.dossie-sub{font-size:11px;color:var(--muted);margin-bottom:12px;}
.freq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(max-width:480px){.freq-grid{grid-template-columns:repeat(2,1fr);}.atraso-grid{grid-template-columns:1fr 1fr;}}
.freq-item{background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:12px;text-align:center;}
.freq-label{font-size:10px;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:4px;}
.freq-valor{font-family:'DM Mono',monospace;font-size:24px;font-weight:800;color:var(--accent);display:block;}
.rank-mono{font-family:'DM Mono',monospace!important;letter-spacing:1px;}
.saiu-hoje{background:rgba(245,166,35,.2);color:#f5a623;font-size:9px;
  padding:1px 6px;border-radius:4px;font-weight:800;letter-spacing:.5px;}

/* ─── GRID 5x5 ──────────────────────────────────────────────────────── */
.g5x5-wrapper{background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:14px;margin-bottom:16px;
  width:100%;box-sizing:border-box;overflow:visible;}
.g5x5-header{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.g5x5-title{font-size:11px;font-weight:700;color:var(--muted);}
.btn-compartilhar-tudo{display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;background:var(--accent);color:#000;border:none;
  border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;
  transition:opacity .15s;}
.btn-compartilhar-tudo:hover{opacity:.85;}
/* ── Grid HTML escondido — visualização é feita via canvas ──────────── */
.g5x5-grid{display:none !important;}
/* ── Canvas ocupa toda a largura disponível ─────────────────────────── */
#painelCanvas{width:100% !important;height:auto !important;
  border-radius:14px;display:block;cursor:pointer;}
#painelVisual{width:100%;box-sizing:border-box;}
.g5x5-cel{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:1px;padding:6px 2px 5px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--surface);cursor:pointer;transition:transform .15s,border-color .15s;
  position:relative;min-width:0;overflow:hidden;aspect-ratio:3/4;}
.g5x5-cel:hover{transform:scale(1.04);border-color:var(--accent);}
.g5x5-cel.quente{border-color:#f5a62388;}
.g5x5-cel.gelido{border-color:#3dd6f588;}
/* ── G e termômetro ficam absolutos nos cantos — não empurram o layout ── */
.g5x5-num{font-size:7px;font-weight:700;color:var(--muted);
  font-family:'DM Mono',monospace;
  position:absolute;top:3px;left:4px;line-height:1;}
.g5x5-term{font-size:9px;position:absolute;top:2px;right:3px;line-height:1;}
/* ── Imagem ocupa o espaço disponível proporcionalmente ─────────────── */
.g5x5-img{width:70%;max-width:42px;aspect-ratio:1;
  object-fit:contain;margin-top:12px;flex-shrink:0;}
/* ── Nome e dias na base do card ────────────────────────────────────── */
.g5x5-bicho{font-size:8px;font-weight:700;color:var(--text);
  text-align:center;line-height:1.1;width:100%;
  padding:0 2px;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;}
.g5x5-dias{font-size:13px;font-weight:900;
  font-family:'DM Mono',monospace;line-height:1;}
/* ── Mobile compacto ────────────────────────────────────────────────── */
@media(max-width:480px){
  .g5x5-cel{padding:5px 1px 4px;}
  .g5x5-img{width:65%;max-width:34px;margin-top:10px;}
  .g5x5-bicho{font-size:7px;}
  .g5x5-dias{font-size:12px;}
  .g5x5-num{font-size:6px;}
}

/* ─── MODAL DE DETALHE ───────────────────────────────────────────────── */
.detalhe-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;z-index:9000;}
.detalhe-box{background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:24px;max-width:320px;width:90%;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;}
.detalhe-fechar{position:absolute;top:10px;right:12px;background:none;
  border:none;color:var(--muted);font-size:18px;cursor:pointer;}
.detalhe-img{width:80px;height:80px;object-fit:contain;}
.detalhe-grupo{font-size:11px;font-weight:700;color:var(--muted);
  font-family:'DM Mono',monospace;}
.detalhe-bicho{font-size:22px;font-weight:900;color:var(--text);}
.detalhe-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
.detalhe-stat{background:var(--surface);border-radius:8px;padding:8px;text-align:center;}
.btn-dossie-link{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;
  background:var(--accent);color:#000;border-radius:10px;font-size:12px;
  font-weight:800;text-decoration:none;margin-top:4px;}

/* ─── SELETOR DE MODO (Normal / Maluca / Ambos) ─────────────────────── */
.modo-seletor{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.modo-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:10px;font-size:12px;font-weight:700;
  text-decoration:none;border:1px solid var(--border);
  background:var(--card);color:var(--muted);transition:all .15s;
}
.modo-btn:hover{border-color:var(--accent);color:var(--text);}
.modo-btn.ativo{background:rgba(245,166,35,.15);border-color:var(--accent);color:var(--accent);}
.modo-btn.ambos.ativo{background:rgba(61,214,245,.1);border-color:var(--accent2);color:var(--accent2);}

/* ─── SELETOR DE BICHOS ──────────────────────────────────────────────── */
.bicho-seletor{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;
  padding:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;}
.bicho-chip{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 8px;border-radius:8px;text-decoration:none;
  border:1px solid var(--border);background:var(--surface);transition:all .15s;}
.bicho-chip:hover,.bicho-chip.ativo{background:rgba(245,166,35,.1);border-color:var(--accent);}
.bicho-chip img{width:28px;height:28px;object-fit:contain;}
.bicho-chip span{font-size:8px;font-weight:700;color:var(--muted);font-family:'DM Mono',monospace;}
.bicho-chip.ativo span{color:var(--accent);}