/* Painel · instagram (usa os tokens de admin.css; classes com prefixo ig-) */

/* período 7/30 dias */
.ig-periodo{display:inline-flex; flex-wrap:wrap; gap:6px}

/* faixa de estado da conexão */
.ig-estado{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:-8px 0 18px; color:var(--ink-soft); font-size:13.5px}
.ig-aviso{margin:-6px 0 18px}

/* números sem dado nos cartões de indicador */
.indicador .valor.ig-sem-numero{margin-top:12px; font:500 16px/1.3 var(--sans); color:var(--ink-soft)}

/* gráficos lado a lado (um embaixo do outro no celular) */
.ig-graficos{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-bottom:22px}
.ig-graficos > .cartao{min-width:0}
.ig-graficos .vazio{padding:36px 12px}
.ig-nota-grafico{margin-top:8px}

.ig-bloco{margin-bottom:22px; min-width:0}
.ig-explica{margin:-6px 0 14px; max-width:72ch; color:var(--ink-soft)}
.ig-modal-texto{margin-bottom:4px; color:var(--ink-soft)}

/* visitas vindas do Instagram, por página */
.ig-origens{display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:10px; margin-bottom:16px}
.ig-origem{min-width:0; padding:12px 14px; border-radius:var(--raio-sm); background:var(--elev); border:1px solid var(--border)}
.ig-origem--total{border-color:var(--gold-line)}
.ig-origem-valor{font:600 22px/1.15 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums}
.ig-origem-rotulo{margin-top:2px; font-size:12.5px; color:var(--ink-soft)}

/* tabela por dia: rola só dentro da caixa */
/* position:relative prende os .sr-only das células (absolutos) dentro da caixa que rola */
.ig-tabela-caixa{position:relative; max-width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:var(--raio-sm)}
.ig-tabela{width:100%; min-width:600px; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums}
.ig-tabela th, .ig-tabela td{padding:8px 12px; text-align:right; white-space:nowrap; border-top:1px solid var(--border); vertical-align:middle}
.ig-tabela th:first-child, .ig-tabela td:first-child{text-align:left}
.ig-tabela thead th{border-top:0; background:var(--bg-2); color:var(--ink-soft); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.ig-tabela tbody th{color:var(--ink); font-weight:600}
.ig-tabela td{color:var(--ink-2)}
.ig-tabela td:last-child{width:1%}
.ig-acoes{display:flex; justify-content:flex-end; gap:4px}

/* conexão e lançamento à mão (só administradora) */
.ig-admin{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:start}
.ig-admin > .ig-bloco{margin-bottom:0}
.ig-dados{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px 16px; margin:0 0 14px}
.ig-dados dt{font-size:12.5px; color:var(--ink-soft)}
.ig-dados dd{margin:2px 0 0; color:var(--ink); font-weight:500; overflow-wrap:anywhere}
.ig-botoes{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
/* botão ocupado: usa aria-disabled (não disabled) para o foco do teclado não se perder */
.ig-botoes .botao[aria-disabled="true"]{opacity:.55; cursor:progress}
.ig-botoes .botao[aria-disabled="true"]:active{transform:none}
.ig-form{display:flex; flex-direction:column; gap:14px}
.ig-form .ig-botoes{margin-top:0}
.ig-form-grade{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px}
.ig-campo-dia{max-width:220px}

/* guias "Como conectar" e "Onde achar" */
.ig-guia{margin-top:16px; padding-top:10px; border-top:1px solid var(--border)}
.ig-guia summary{display:flex; align-items:center; gap:10px; min-height:40px; cursor:pointer; list-style:none; color:var(--acento); font-weight:600; border-radius:var(--raio-sm)}
.ig-guia summary::-webkit-details-marker{display:none}
.ig-guia summary::before{content:""; flex:none; width:7px; height:7px; margin-left:3px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s ease}
.ig-guia[open] summary::before{transform:rotate(45deg)}
.ig-passos{display:flex; flex-direction:column; gap:8px; margin:8px 0 0; padding-left:22px; color:var(--ink-2)}
.ig-passos strong{color:var(--ink)}
.ig-passos code{padding:1px 5px; border-radius:5px; background:var(--elev); color:var(--ink-2); font-size:12.5px; overflow-wrap:anywhere}
.ig-guia-nota{margin-top:10px}

@media (max-width:1100px){
  .ig-admin{grid-template-columns:1fr}
}
@media (max-width:860px){
  .ig-graficos{grid-template-columns:1fr}
  .ig-estado{margin-top:-6px}
}
/* toque: alvos com pelo menos 44px */
@media (pointer:coarse){
  .ig-guia summary{min-height:44px}
}