/* =============================================================
   Análise de Exposição por IA — estilos
   =============================================================
   Segue a identidade já existente do site (variáveis do style.css) e é
   pensado primeiro para o celular, que é onde o promotor usa.
   ============================================================= */

/* --- avisos e mensagens ------------------------------------- */
.ia-aviso {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 12px 14px; margin: 12px 0;
    border-radius: 8px;
    background: #eff6ff; border-left: 4px solid #3b82f6; color: #1e3a8a;
    font-size: var(--fs-14); line-height: 1.45;
}
.ia-aviso ul { margin: 6px 0 0 18px; }
.ia-aviso-atencao { background: #fffbeb; border-left-color: #f59e0b; color: #78350f; }
.ia-aviso-erro { background: #fef2f2; border-left-color: #ef4444; color: #7f1d1d; }
.ia-ressalva {
    margin-top: 16px; padding: 10px 12px; border-radius: 8px;
    background: #f8fafc; border: 1px dashed #cbd5e1;
    color: #475569; font-size: var(--fs-125); line-height: 1.5;
}
.ia-nota { color: #64748b; font-size: var(--fs-125); line-height: 1.5; margin: 4px 0 12px; }
.ia-vazio { color: #64748b; font-size: var(--fs-14); padding: 14px 0; }
.ia-carregando { color: #64748b; font-size: var(--fs-14); padding: 20px 0; text-align: center; }
.ia-motivo { color: #b45309; font-size: var(--fs-125); }

/* --- situação do trabalho ------------------------------------ */
.ia-status {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: var(--fs-12); font-weight: 600; white-space: nowrap;
    background: #e2e8f0; color: #334155;
}
.ia-status-aguardando, .ia-status-processando { background: #dbeafe; color: #1d4ed8; }
.ia-status-concluida, .ia-status-corrigida { background: #dcfce7; color: #166534; }
.ia-status-parcial { background: #fef3c7; color: #92400e; }
.ia-status-aguardando_revisao { background: #ede9fe; color: #5b21b6; }
.ia-status-foto_reprovada { background: #ffedd5; color: #9a3412; }
.ia-status-falha, .ia-status-cancelada { background: #fee2e2; color: #991b1b; }
.ia-status-nao_iniciada { background: #f1f5f9; color: #64748b; }

/* --- painel dentro da visita --------------------------------- */
.ia-painel {
    border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 14px; background: #fff; margin-top: 12px;
}
.ia-painel-topo {
    display: flex; flex-wrap: wrap; gap: 10px;
    align-items: center; justify-content: space-between;
    padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; margin-bottom: 12px;
}
.ia-painel-topo strong { display: block; font-size: var(--fs-15); margin-bottom: 4px; }
.ia-painel-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ia-versoes { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: var(--fs-13); }
.ia-versao-btn {
    border: 1px solid #cbd5e1; background: #fff; border-radius: 999px;
    padding: 3px 12px; font-size: var(--fs-12); cursor: pointer;
}
.ia-versao-btn:hover { background: #f1f5f9; }

/* --- os três números do topo (§12) --------------------------- */
.ia-scores { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.ia-score-box {
    border-radius: 12px; padding: 14px 10px; text-align: center;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.ia-score-num { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; }
.ia-score-cap { display: block; font-size: var(--fs-115); color: #64748b; margin-top: 4px; text-transform: uppercase; letter-spacing: .3px; }
.ia-score-cls { display: block; font-size: var(--fs-13); font-weight: 600; margin-top: 4px; }
.ia-score-box.ia-secundario .ia-score-num { font-size: 22px; color: #475569; }
.ia-excelente { background: #dcfce7; border-color: #86efac; color: #14532d; }
.ia-boa { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.ia-regular { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.ia-ruim { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
.ia-sem-score { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }

/* --- contagens ------------------------------------------------ */
.ia-metricas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px; margin: 14px 0;
}
.ia-metrica {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 10px 8px; text-align: center;
}
.ia-metrica span { display: block; font-size: 20px; font-weight: 700; color: #0f172a; }
.ia-metrica small { display: block; font-size: var(--fs-11); color: #64748b; margin-top: 2px; line-height: 1.3; }
.ia-nao-verificavel, .ia-base-score { font-size: var(--fs-125); color: #475569; margin: 6px 0; line-height: 1.5; }
.ia-titulo { margin: 18px 0 8px; font-size: var(--fs-14); font-weight: 700; color: #0f172a; }

/* --- fotos analisadas ----------------------------------------- */
.ia-fotos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ia-foto-card { border: 1px solid #e2e8f0; border-left-width: 4px; border-radius: 10px; padding: 10px 12px; background: #fff; }
.ia-foto-card.ia-boa { border-left-color: #22c55e; }
.ia-foto-card.ia-regular { border-left-color: #f59e0b; }
.ia-foto-card.ia-ruim { border-left-color: #ef4444; }
.ia-foto-card-topo { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; font-size: var(--fs-13); }
.ia-foto-nota { font-weight: 700; }
.ia-problemas { list-style: none; margin: 8px 0 0; padding: 0; }
.ia-problemas li { font-size: var(--fs-125); padding: 6px 0; border-top: 1px solid #f1f5f9; line-height: 1.45; }
.ia-problemas li strong { display: block; }
.ia-problemas li span { color: #64748b; }
.ia-problemas .ia-sev-high strong { color: #b91c1c; }
.ia-problemas .ia-sev-medium strong { color: #b45309; }
.ia-sem-problema { font-size: var(--fs-125); color: #64748b; margin: 6px 0 0; }

/* --- tabelas internas ----------------------------------------- */
.ia-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ia-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.ia-tabela th, .ia-tabela td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #f1f5f9; }
.ia-tabela th { background: #f8fafc; font-size: var(--fs-12); text-transform: uppercase; color: #64748b; letter-spacing: .3px; }
.ia-tabela-revisao input[type="text"] { width: 100%; }
.ia-tabela-revisao input[type="number"] { width: 80px; }
.ia-possivel { color: #b45309; font-size: var(--fs-12); }
.ia-divergencia { color: #b45309; font-size: var(--fs-115); margin-top: 2px; }

/* --- share de gôndola ----------------------------------------- */
.ia-share-linhas { display: grid; gap: 10px; margin: 12px 0 4px; }
.ia-share-destaque {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 14px 14px 16px;
}
.ia-share-linha {
    display: grid; grid-template-columns: minmax(140px, 190px) 1fr auto auto;
    gap: 10px; align-items: center;
}
.ia-share-rotulo { font-size: var(--fs-13); font-weight: 600; color: #334155; }
.ia-share-linha small { font-size: var(--fs-115); color: #64748b; white-space: nowrap; }
.ia-share-barra {
    position: relative; display: block; height: 14px; min-width: 80px;
    background: #e2e8f0; border-radius: 7px; overflow: hidden;
}
.ia-share-fill { display: block; height: 100%; border-radius: 7px; background: #94a3b8; transition: width .25s ease; }
.ia-share-fill.ia-boa { background: #22c55e; }
.ia-share-fill.ia-regular { background: #f59e0b; }
.ia-share-fill.ia-ruim { background: #ef4444; }
.ia-share-fill.ia-neutro { background: #cbd5e1; }
/* A meta é um traço sobre a barra: dá para ver de longe se passou ou não. */
.ia-share-meta {
    position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px;
    background: #0f172a; opacity: .75; overflow: visible;
}
.ia-share-valor { font-size: var(--fs-15); font-weight: 800; white-space: nowrap; padding: 2px 8px; border-radius: 999px; }
.ia-share-valor.ia-neutro, .ia-neutro { color: #64748b; }
.ia-share-cel { display: flex; gap: 8px; align-items: center; min-width: 150px; }
.ia-share-cel .ia-share-barra { flex: 1; }
.ia-share-cel span { font-size: var(--fs-125); font-weight: 700; }
.ia-share-bloco { margin-top: 18px; }
.ia-share-gap {
    font-size: var(--fs-13); line-height: 1.55; color: #334155; margin: 8px 0 0;
    padding: 9px 12px; border-left: 3px solid #38bdf8; background: #f0f9ff; border-radius: 0 8px 8px 0;
}
.ia-share-gap i { color: #0284c7; margin-right: 6px; }

@media (max-width: 640px) {
    .ia-share-linha { grid-template-columns: 1fr auto; }
    .ia-share-linha .ia-share-barra { grid-column: 1 / -1; order: 3; }
    .ia-share-linha small { order: 4; grid-column: 1 / -1; }
}

/* --- blocos de texto ------------------------------------------ */
.ia-bloco { margin-top: 14px; }
.ia-bloco h5 { font-size: var(--fs-135); margin-bottom: 6px; color: #0f172a; }
.ia-bloco ul { margin: 0 0 0 18px; font-size: var(--fs-135); line-height: 1.6; }
.ia-resumo { margin-top: 12px; font-size: var(--fs-135); line-height: 1.6; color: #334155; }
.ia-custos { margin-top: 14px; font-size: var(--fs-12); color: #64748b; }
.ia-revisoes { list-style: none; padding: 0; margin: 0; font-size: var(--fs-13); }
.ia-revisoes li { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.ia-revisoes li span { display: block; color: #475569; }
.ia-revisoes li em { color: #94a3b8; font-size: var(--fs-115); }
.ia-acoes-revisao { margin-top: 14px; }

/* --- guia de fotografia (§4) ---------------------------------- */
.ia-guia-secao { margin-bottom: 18px; }
.ia-guia-secao h4 { font-size: var(--fs-145); margin-bottom: 8px; color: #0f172a; }
.ia-guia-secao ul { margin: 0 0 0 18px; font-size: var(--fs-14); line-height: 1.65; }
.ia-check {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; margin-bottom: 6px;
    border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: var(--fs-14); line-height: 1.45; cursor: pointer;
}
.ia-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.ia-check:has(input:checked) { background: #f0fdf4; border-color: #86efac; }
.ia-guia-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 18px; }
.ia-guia-acoes .btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- tipos de foto na Nova Visita (§5) ------------------------ */
.ia-tipos { margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; background: #fbfdff; }
.ia-tipos-topo { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.ia-tipos-topo p { font-size: var(--fs-125); color: #64748b; margin: 4px 0 0; line-height: 1.5; max-width: 60ch; }
.ia-tipos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.ia-tipo-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; }
.ia-tipo-item img { width: 100%; height: 88px; object-fit: cover; border-radius: 6px; display: block; }
.ia-tipo-item select { width: 100%; margin-top: 6px; font-size: var(--fs-12); padding: 5px; }
.ia-tipo-medida { display: block; font-size: var(--fs-11); margin-top: 5px; line-height: 1.35; }
.ia-tipo-medida.ia-ok { color: #16a34a; background: none; border: 0; }
.ia-tipo-medida.ia-ruim { color: #b45309; background: none; border: 0; }
.ia-tipos-obrig { font-size: var(--fs-12); color: #475569; margin: 10px 0 0; }

/* --- galeria de imagens de referência (§3) -------------------- */
.ia-ref-envio { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ia-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ia-galeria-item { margin: 0; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; background: #fff; }
.ia-galeria-item.ia-principal { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset; }
.ia-galeria-img {
    height: 120px; display: flex; align-items: center; justify-content: center;
    background: #f8fafc; border-radius: 6px; color: #cbd5e1; font-size: 26px; overflow: hidden;
}
.ia-galeria-img img { width: 100%; height: 100%; object-fit: contain; }
.ia-galeria-item figcaption { font-size: var(--fs-12); margin-top: 6px; line-height: 1.4; }
.ia-galeria-item figcaption span { display: block; color: #64748b; font-size: var(--fs-11); }
.ia-galeria-acoes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ia-tag {
    display: inline-block; background: #eff6ff; color: #1d4ed8;
    border-radius: 999px; padding: 2px 8px; font-size: var(--fs-105); font-weight: 600;
}
/* O semáforo do share vence o azul padrão da tag (ambos vêm de uma classe só). */
.ia-tag.ia-boa { background: #dcfce7; color: #14532d; }
.ia-tag.ia-regular { background: #fef3c7; color: #78350f; }
.ia-tag.ia-ruim { background: #fee2e2; color: #7f1d1d; }
.ia-tag.ia-neutro { background: #f1f5f9; color: #64748b; }

/* --- coluna Score IA nas listas ------------------------------- */
.ia-badge-score {
    display: inline-block; min-width: 40px; text-align: center;
    padding: 3px 8px; border-radius: 6px; font-weight: 700; font-size: var(--fs-13);
    border: 1px solid transparent;
}
td .fa-camera-rotate { color: #ea580c; }
td .fa-user-check { color: #7c3aed; }
td .fa-circle-half-stroke { color: #d97706; }

/* --- abas da página Análise por IA ---------------------------- */
.ia-abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #e2e8f0; margin-bottom: 16px; }
.ia-aba {
    border: 0; background: none; padding: 10px 14px; cursor: pointer;
    font-size: var(--fs-135); color: #64748b; border-bottom: 2px solid transparent;
}
.ia-aba.ativa { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.ia-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.ia-filtros .form-group { margin: 0; }

/* --- configurações e histórico -------------------------------- */
.ia-config-estado {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    padding: 12px 14px; border-radius: 10px; background: #f8fafc;
    border: 1px solid #e2e8f0; margin-bottom: 16px; font-size: var(--fs-135);
}
.ia-config-estado p { flex-basis: 100%; margin: 0; }
.ia-form-bool { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.ia-form-bool label { display: flex; gap: 6px; align-items: center; font-size: var(--fs-135); }
.ia-historico { list-style: none; padding: 0; margin: 0; font-size: var(--fs-13); }
.ia-historico li { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.ia-historico li em { color: #94a3b8; font-size: var(--fs-115); margin-left: 8px; }
.ia-historico li span { display: block; color: #475569; margin-top: 2px; }

/* --- envios avulsos: fotos enviadas na própria aba ------------- */
.ia-envio-novo {
    border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px;
    background: #fbfdff; margin-bottom: 16px;
}
.ia-envio-novo-topo { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.ia-envio-novo-topo p { font-size: var(--fs-125); color: #64748b; margin: 4px 0 0; line-height: 1.5; max-width: 70ch; }
.ia-envio-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 12px 0; }
.ia-envio-form .form-group { margin: 0; }
.ia-envio-detalhe {
    border: 1px solid #cbd5e1; border-radius: 12px; padding: 14px;
    background: #fff; margin-bottom: 16px;
}
.ia-envio-topo { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.ia-envio-topo p { font-size: var(--fs-125); color: #64748b; margin: 4px 0 0; }
.ia-envio-upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.ia-envio-upload small { flex-basis: 100%; font-size: var(--fs-115); color: #64748b; }
.ia-envio-thumb {
    height: 88px; display: flex; align-items: center; justify-content: center;
    background: #f8fafc; border-radius: 6px; color: #cbd5e1; font-size: 22px; overflow: hidden;
}
.ia-envio-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ia-envio-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ia-versoes { margin-top: 12px; font-size: var(--fs-125); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ia-versao-btn {
    border: 1px solid #e2e8f0; background: #fff; border-radius: 999px;
    padding: 3px 10px; font-size: var(--fs-115); cursor: pointer; color: #475569;
}
.ia-versao-btn:hover { border-color: #2563eb; color: #2563eb; }
.ia-resultado-host { margin-top: 14px; }
.ia-acoes-celula { display: flex; gap: 6px; }

/* --- banco de fotos dos produtos por marca --------------------- */
.ia-marcas-topo p { font-size: var(--fs-125); color: #64748b; margin: 4px 0 0; line-height: 1.5; max-width: 80ch; }
.ia-marcas-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 8px; }
.ia-marca-chip {
    border: 1px solid #e2e8f0; background: #fff; border-radius: 999px;
    padding: 6px 14px; font-size: var(--fs-13); cursor: pointer; color: #475569;
}
.ia-marca-chip:hover { border-color: #93c5fd; }
.ia-marca-chip.ativa { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }
.ia-nota { font-size: var(--fs-12); color: #64748b; margin: 0 0 14px; }
.ia-marca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ia-marca-item { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; background: #fff; }
.ia-marca-item.ia-sem-foto { border-style: dashed; background: #fcfdff; }
.ia-marca-thumb {
    height: 110px; display: flex; align-items: center; justify-content: center;
    background: #f8fafc; border-radius: 6px; color: #cbd5e1; font-size: 24px; overflow: hidden;
}
.ia-marca-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ia-marca-info { margin-top: 8px; font-size: var(--fs-13); line-height: 1.4; }
.ia-marca-info span { display: block; color: #64748b; font-size: var(--fs-115); }
.ia-marca-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ia-marca-item .ia-galeria { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ia-tag-alerta { background: #fef3c7; color: #92400e; }
.ia-oculto { display: none; }

/* --- painel de acompanhamento (aba "Painel") -------------------- */
.ia-barras { display: grid; gap: 8px; margin-bottom: 6px; }
.ia-barra-linha { display: grid; grid-template-columns: 110px 1fr 90px; gap: 10px; align-items: center; font-size: var(--fs-13); }
.ia-barra-rotulo { color: #334155; font-weight: 600; }
.ia-barra { display: block; height: 12px; background: #f1f5f9; border-radius: 100px; overflow: hidden; }
.ia-barra-fill { display: block; height: 100%; border-radius: 100px; background: #94a3b8; }
.ia-fill-excelente { background: #22c55e; }
.ia-fill-boa { background: #38bdf8; }
.ia-fill-regular { background: #f59e0b; }
.ia-fill-ruim { background: #ef4444; }
.ia-fill-nao_analisavel { background: #cbd5e1; }
.ia-barra-valor { font-size: var(--fs-125); color: #475569; text-align: right; }
.ia-barra-valor small { color: #94a3b8; }

.ia-painel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 18px; }
.ia-rank { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; background: #fff; }
.ia-rank h4 { font-size: var(--fs-135); color: #0f172a; margin: 0 0 8px; }
.ia-rank h4 i { color: #2563eb; margin-right: 6px; }
.ia-rank ul { list-style: none; margin: 0; padding: 0; }
.ia-rank li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 7px 0; border-top: 1px solid #f1f5f9; font-size: var(--fs-13); }
.ia-rank li:first-child { border-top: 0; }
.ia-rank-nome { font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.ia-rank li small { grid-column: 1 / -1; color: #64748b; font-size: var(--fs-115); }

/* --- celular --------------------------------------------------- */
@media (max-width: 640px) {
    .ia-barra-linha { grid-template-columns: 88px 1fr 70px; font-size: var(--fs-12); }
    .ia-painel-grid { grid-template-columns: 1fr; }
    .ia-filtros .form-group { flex: 1 1 100%; }
    .ia-scores { grid-template-columns: 1fr; }
    .ia-score-box { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
    .ia-score-num { font-size: 26px; }
    .ia-score-cap { margin-top: 0; }
    .ia-painel-topo, .ia-tipos-topo { flex-direction: column; align-items: stretch; }
    .ia-painel-acoes .btn, .ia-guia-acoes .btn { flex: 1 1 auto; }
    .ia-guia-acoes { flex-direction: column-reverse; }
    .ia-tipos-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .ia-envio-form { grid-template-columns: 1fr; }
    .ia-envio-topo, .ia-envio-novo-topo { flex-direction: column; align-items: stretch; }
    .ia-marca-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .ia-check { padding: 12px; font-size: var(--fs-15); }
}