/* =============================================================
   INSTAGRAM — O NOME E A DESCRIÇÃO DE CADA MÓDULO
   -------------------------------------------------------------
   O QUE ESTAVA ERRADO
   -------------------
   Duas coisas, e a segunda explica a primeira.

   1. `.igx-painel` e `.igx-cabeca` não tinham UMA LINHA de CSS. Nenhum
      arquivo da pasta definia essas classes. O nome do módulo saía
      como texto corrido do corpo da página, do mesmo tamanho e da
      mesma cor de um parágrafo qualquer, e o painel era uma `div`
      transparente sem borda, sem fundo e sem respiro.

   2. Publicar, Seguir, Agenda e Perfil usavam `.igx-grade`, que é uma
      grade de DUAS colunas — `minmax(0, 360px)` e `minmax(0, 1fr)`.
      Esses quatro módulos têm um filho só. Ele caía na coluna de 360px
      e os outros 60% da tela ficavam vazios, com o texto quebrando em
      quatro linhas ao lado de meio metro de nada.

   O CONSERTO
   ----------
   O nome e a descrição viram UMA PEÇA — ícone, título e a frase que
   explica, lidos de uma vez — e o painel que está sozinho passa a
   ocupar a largura que tem, com medida de leitura controlada em vez de
   texto atravessando a tela inteira.
============================================================= */

/* -------------------------------------------------------------
   O painel
------------------------------------------------------------- */
.igx-painel {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 18px);
    background: var(--surface);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}

/* O módulo que está sozinho ocupa a largura toda em vez de se espremer
   na coluna estreita da grade de duas colunas. */
.igx-grade.igx-solo {
    grid-template-columns: minmax(0, 1fr);
}

/* Largura de leitura. Sem teto, a descrição de um módulo viraria uma
   linha de 1400px num monitor grande — e linha comprida demais é tão
   ruim de ler quanto coluna estreita demais. */
.igx-solo .igx-painel {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
}

.igx-corpo {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* -------------------------------------------------------------
   O cabeçalho: ícone, nome e a frase que explica
------------------------------------------------------------- */
.igx-cabeca {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-soft);
    /* Um degradê de cima para baixo separa o cabeçalho do corpo sem
       precisar de uma cor de fundo diferente, que criaria mais um tom
       para a tela ter de explicar. */
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .045) 0%,
        rgba(255, 255, 255, .012) 100%);
}

/* O ícone num ladrilho: solto, ele briga com a primeira letra do
   título; num ladrilho, vira uma âncora que a vista acha de longe. */
.igx-cabeca-icone {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm, 10px);
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-hi);
    font-size: 15px;
}

.igx-cabeca-txt {
    flex: 1 1 auto;
    min-width: 0;
}

/* O nome do módulo vira TÍTULO de verdade: fonte de display, peso,
   tamanho e uma cor mais forte que o corpo. Antes ele tinha exatamente
   a mesma aparência do parágrafo abaixo dele, e nada na tela dizia
   qual dos dois era o nome. */
.igx-cabeca-txt h3,
.igx-cabeca-txt strong {
    display: block;
    margin: 0 0 3px;
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--text-strong);
}

.igx-cabeca-txt p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-dim);
    max-width: 62ch;
}
.igx-cabeca-txt p b,
.igx-cabeca-txt p strong { color: var(--text); font-weight: 600; }

/* A ação do módulo fica na mesma linha do nome, alinhada ao topo — e
   não flutuando ao lado do meio do parágrafo, como acontecia. */
.igx-cabeca-acoes {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
}

@media (max-width: 620px) {
    .igx-cabeca {
        flex-wrap: wrap;
        padding: 14px;
    }
    .igx-cabeca-icone { width: 34px; height: 34px; font-size: 14px; }
    .igx-cabeca-txt { flex: 1 1 140px; }
    /* No celular a ação desce para a linha de baixo e ocupa a largura
       toda: botão apertado no canto de uma tela de 360px é botão que
       se erra. */
    .igx-cabeca-acoes {
        flex: 1 1 100%;
        padding-top: 4px;
    }
    .igx-cabeca-acoes .btn { flex: 1 1 auto; justify-content: center; }
    .igx-corpo { padding: 14px; gap: 14px; }
}

/* -------------------------------------------------------------
   Seções dentro do painel
------------------------------------------------------------- */
/* O tamanho, o peso e a cor ja vem de style.css. Aqui entra so a
   regua: a classe continua com UM dono, e esta folha acrescenta em vez
   de redeclarar. */
.igx-secao-titulo {
    display: flex;
    align-items: center;
    gap: 9px;
}
/* Uma linha que corre até a borda: diz "começa outra parte" sem gastar
   uma palavra nem uma borda inteira. */
.igx-secao-titulo::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-soft);
}

/* -------------------------------------------------------------
   A fila da Agenda usa a largura que ganhou
------------------------------------------------------------- */
.igx-solo .igp-fila {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 10px;
    align-items: start;
}
/* O vazio e o erro atravessam a grade: centralizar "nada marcado"
   dentro de uma coluna de 300px o deixaria encostado na esquerda. */
.igx-solo .igp-fila > .igp-vazio { grid-column: 1 / -1; }

/* -------------------------------------------------------------
   O saldo do dia
------------------------------------------------------------- */
.igp-saldo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.igp-saldo-titulo {
    flex: 1 1 100%;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.igp-saldo-item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-full);
    background: var(--surface-2);
    font-size: 11.5px;
    color: var(--text-dim);
}
.igp-saldo-item strong {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
    letter-spacing: -.02em;
}
/* Perto do teto, o chip muda de cor. É o único aviso que a pessoa tem
   antes de agendar mais do que cabe no dia. */
.igp-saldo-item.apertado {
    border-color: rgba(var(--warn-rgb), .34);
    background: var(--warn-soft);
    color: var(--warn);
}
.igp-saldo-item.apertado strong { color: var(--warn); }

/* -------------------------------------------------------------
   Os cartões da fila
------------------------------------------------------------- */
.igp-acao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r, 14px);
    background: var(--surface-2);
    /* A faixa da esquerda carrega o estado. Cor no cartão inteiro
       pintaria o texto de vermelho junto; numa faixa, o estado se lê de
       relance e a leitura continua limpa. */
    border-left: 3px solid var(--border-strong);
}
.igp-acao.is-aguardando { border-left-color: var(--info); }
.igp-acao.is-feito      { border-left-color: var(--success); }
.igp-acao.is-falhou     { border-left-color: var(--danger); }
.igp-acao.is-suspensa   { border-left-color: var(--text-faint); }

.igp-acao-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.igp-acao-topo strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
}
.igp-acao-det {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-faint);
}

.igp-estado {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-dim);
    white-space: nowrap;
}
.igp-acao.is-feito .igp-estado   { background: var(--success-soft); color: var(--success); }
.igp-acao.is-falhou .igp-estado  { background: var(--danger-soft);  color: var(--danger); }
.igp-acao.is-aguardando .igp-estado { background: var(--info-soft); color: var(--info); }

.igp-acao-quando {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.igp-acao-quando i { font-size: 10.5px; opacity: .7; }

.igp-acao-legenda {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-faint);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.igp-acao-erro {
    padding: 9px 11px;
    border-radius: var(--r-sm);
    background: var(--danger-soft);
    border: 1px solid rgba(var(--danger-rgb), .22);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--danger);
    /* O erro vem do Instagram e pode ser uma linha de log sem espaço
       nenhum. Sem isto ele estoura o cartão e some pela borda — que foi
       exatamente o que aconteceu com "Internal Server Error" ao lado de
       uma mensagem comprida. */
    overflow-wrap: anywhere;
}

.igp-acao .btn { align-self: flex-start; }

/* -------------------------------------------------------------
   As prévias de quem vai publicar
------------------------------------------------------------- */
.igp-previas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.igp-previa {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm, 10px);
    border: 1px solid var(--border-soft);
    background: var(--bg-deep, #05050a);
    overflow: hidden;
}
/* Enquadrada ganha um anel: é o sinal de que aquele recorte foi
   decidido por uma pessoa e não pela máquina. */
.igp-previa.e-enquadrada { border-color: var(--accent-line); }

.igp-previa-cheia { width: 100%; height: 100%; }
.igp-previa-cheia img,
.igp-previa-cheia video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* O quadro de saída dentro da miniatura quadrada: mostra a FORMA que
   vai sair, não só o conteúdo. Um story 9:16 aparece alto e estreito,
   como vai aparecer no Instagram. */
.igp-previa-quadro {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .09);
}

.igp-previa-tarja { position: absolute; inset: 0; overflow: hidden; }
.igp-previa-tarja img,
.igp-previa-tarja video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px) brightness(.72);
    transform: scale(1.2);
    display: block;
}

/* A mídia posicionada pela mesma conta do enquadrador, em porcentagem.
   É o que faz a miniatura ser o resultado e não uma aproximação. */
.igp-previa-recorte { position: absolute; }
.igp-previa-recorte img,
.igp-previa-recorte video {
    width: 100%;
    height: 100%;
    display: block;
    /* A rede global de celular (`max-width: 100% !important`) encolheria
       a mídia ampliada e desmontaria o recorte. */
    max-width: none !important;
}

.igp-previa-x,
.igp-previa-cortar {
    position: absolute;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(6, 6, 12, .74);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    opacity: .9;
    transition: var(--t-fast);
}
.igp-previa-x { top: 5px; right: 5px; }
.igp-previa-cortar { top: 5px; left: 5px; }

.igp-previa-x:hover { background: var(--danger); opacity: 1; }
.igp-previa-cortar:hover { background: var(--accent); opacity: 1; }
.igp-previa-x:active,
.igp-previa-cortar:active { transform: scale(.9); }

.igp-previa-selo {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(6, 6, 12, .72);
    color: #fff;
    font-size: 8px;
    pointer-events: none;
}

/* -------------------------------------------------------------
   O que sobrou da tela antiga, agora com casa
------------------------------------------------------------- */
.igp-fila:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
    .igp-previa-x,
    .igp-previa-cortar { transition: none; }
    .igp-previa-x:active,
    .igp-previa-cortar:active { transform: none; }
}