/*
 * Card #64: detalhe da campanha mais compacto (~65% de espaço), sem tirar nenhum indicador.
 * Tudo preso à raiz do detalhe (.campaign-detail-compact) e só para tela: o PDF (#/campaign/print/v2)
 * usa as mesmas classes e não pode mudar. Valores principais (.n-card-label-value) mantêm o tamanho.
 */
@media screen {
    /* Espaçamentos gerais */
    .campaign-detail-compact .n-mt-24 { margin-top: 12px !important; }
    .campaign-detail-compact .n-mb-24 { margin-bottom: 12px !important; }
    .campaign-detail-compact .n-mt-12 { margin-top: 8px !important; }
    .campaign-detail-compact .n-mb-12 { margin-bottom: 8px !important; }
    .campaign-detail-compact .n-div-card { padding: 6px 14px; }
    .campaign-detail-compact .n-div-card.n-border-title { padding-top: 4px !important; padding-bottom: 4px !important; }
    .campaign-detail-compact .n-div-card-grafico { padding: 10px !important; }

    /* Títulos e rótulos menores; valores continuam com o tamanho atual */
    .campaign-detail-compact .n-div-card-title { font-size: 15px; margin-bottom: 2px !important; }
    .campaign-detail-compact .n-div-card-subtitle { font-size: 11px; }
    .campaign-detail-compact .n-card-label-title { font-size: 11px; margin-bottom: 0; }

    /* Cards de topo */
    .campaign-detail-compact .n-div-minh-94 { min-height: 58px; }
    .campaign-detail-compact .n-card-left { padding-top: 4px; }
    .campaign-detail-compact .n-card-icon { font-size: 18px; }
    .campaign-detail-compact .top-cards-row { margin-top: 8px; }

    /* Alturas fixas que estavam inline */
    .campaign-detail-compact [style*="height: 280px"],
    .campaign-detail-compact [style*="height:280px"] { height: 200px !important; }
    /* O canvas fica de fora: o Chart.js mede o contêiner e reescreve a altura dele */
    .campaign-detail-compact :not(canvas)[style*="height: 250px"],
    .campaign-detail-compact :not(canvas)[style*="height:250px"] { height: 180px !important; }
    .campaign-detail-compact .n-div-card-grafico[style*="height: 200px"] { height: 140px !important; }
    .campaign-detail-compact [style*="min-height:267px"],
    .campaign-detail-compact [style*="min-height: 267px"] { min-height: 180px !important; }

    /* Faixas horárias (6 faixas) */
    .campaign-detail-compact .time-slot-table label { margin-bottom: 0; }
    .campaign-detail-compact .grid24h-table td,
    .campaign-detail-compact .grid24h-table th { padding: 2px 3px !important; font-size: 11px; }

    /* Mídia Programática: campos menores */
    .campaign-detail-compact .midia-prog-container .mp-select,
    .campaign-detail-compact .midia-prog-container .mp-inp { height: 26px; }
    .campaign-detail-compact .midia-prog-container .mp-select { font-size: 12px; }
    .campaign-detail-compact .midia-prog-container .mp-inp input { font-size: 13px; }
    .campaign-detail-compact .midia-prog-container .n-div-card-subtitle { margin-bottom: 4px !important; }
    .campaign-detail-compact .midia-prog-container .n-font-legenda-xl { font-size: 11px; margin-bottom: 2px; }
    .campaign-detail-compact .mp-audtable th,
    .campaign-detail-compact .mp-audtable td { padding: 3px 2px !important; font-size: 11px !important; }
    .campaign-detail-compact .mp-audtable td.mp-aud-val { font-size: 12px !important; }
}

/* Mídia Programática em grade (telas largas): Parâmetros | Cálculo | Indicadores em cima e
   Metodologia + Audiência por hora na largura toda, para o bloco não passar da altura do mapa. */
@media screen and (min-width: 992px) {
    .campaign-detail-compact .midia-prog-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
        gap: 4px 18px;
        align-items: start;
    }
    .campaign-detail-compact .midia-prog-container > .mp-sec {
        margin: 0 !important;
        padding: 0 !important;
        border-top: 0 !important;
        min-width: 0;
    }
    .campaign-detail-compact .mp-sec-params { grid-column: 1; grid-row: 1; }
    .campaign-detail-compact .mp-sec-calc { grid-column: 2; grid-row: 1; }
    .campaign-detail-compact .mp-sec-ind { grid-column: 3; grid-row: 1; }
    .campaign-detail-compact .midia-prog-container > .mp-sec-im {
        grid-column: 1 / -1;
        grid-row: 2;
        border-top: 1px solid #E4E9E8 !important;
        padding-top: 4px !important; /* #806: era 6px */
    }
    .campaign-detail-compact .mp-sec .col-md-3,
    .campaign-detail-compact .mp-sec .col-md-4 { width: 50%; margin-bottom: 4px !important; }
    .campaign-detail-compact .mp-sec-im .col-md-3,
    .campaign-detail-compact .mp-sec-im .col-md-4 { width: 25%; }
    .campaign-detail-compact .mp-sec .row { margin-bottom: 2px !important; }
    .campaign-detail-compact .mp-sec-im .n-div-card-subtitle[style*="border-top"] {
        margin: 2px 0 2px !important; /* #806: era 4px 0 4px */
        padding-top: 3px !important; /* #806: era 4px */
    }

    /* Indicadores: 2 colunas por dentro (indicadores | CPM e câmbio) e números menores */
    .campaign-detail-compact .midia-prog-container > .mp-sec-ind {
        display: grid !important; /* o HTML tem display: block inline */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px 14px;
        align-items: start;
    }
    .campaign-detail-compact .mp-sec-ind > label { grid-column: 1 / -1; }
    .campaign-detail-compact .mp-sec-ind > div { margin: 0 !important; gap: 6px 12px !important; }
    .campaign-detail-compact .mp-sec-ind > .row { border-top: 0 !important; padding-top: 0 !important; }
    .campaign-detail-compact .midia-prog-container [class*="n-card-label-cpm"] { font-size: 12px !important; }
    .campaign-detail-compact .midia-prog-container .n-card-label-cpm-value,
    .campaign-detail-compact .midia-prog-container .mp-sec-calc .n-card-label-value,
    .campaign-detail-compact .midia-prog-container .mp-sec-ind .n-card-label-value,
    .campaign-detail-compact .midia-prog-container .mp-sec-im .n-card-label-value { font-size: 24px !important; line-height: 1.1; } /* tamanho original (reteste #763, R06) */
    .campaign-detail-compact .mp-sec-ind .col-md-3,
    .campaign-detail-compact .mp-sec-ind .col-md-4 { width: 50%; }

    /* Metodologia + valores do IM lado a lado, e as duas tabelas de audiência por hora lado a lado */
    .campaign-detail-compact .midia-prog-container > .mp-sec-im {
        display: grid !important; /* o HTML tem display: block inline */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2px 18px;
        align-items: start;
    }
    .campaign-detail-compact .mp-sec-im > label { grid-column: 1 / -1; }
    .campaign-detail-compact .mp-sec-im > .row { margin: 0 !important; }
    .campaign-detail-compact .mp-sec-im > table { margin: 0 !important; }

    /* Indicadores 2 por linha */
    .campaign-detail-compact .mp-sec-ind > div:first-of-type { display: flex !important; flex-wrap: wrap; }
    .campaign-detail-compact .mp-sec-ind > div:first-of-type > div { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px); margin: 0 !important; }

    /* Tabelas de audiência lado a lado: números inteiros, linhas baixas */
    .campaign-detail-compact .mp-sec-im .mp-audtable th,
    .campaign-detail-compact .mp-sec-im .mp-audtable td { padding: 1px !important; font-size: 10px !important; letter-spacing: -0.2px; } /* #806: linhas mais baixas (era 2px 1px) */
    .campaign-detail-compact .mp-sec-im .mp-audtable td.mp-aud-val { font-size: 10px !important; }
    .campaign-detail-compact .mp-sec-im .mp-audtable tbody th { white-space: nowrap; font-size: 9px !important; width: 74px; }
    .campaign-detail-compact .mp-sec-im .mp-audtable thead th:first-child { width: 74px; }
    .campaign-detail-compact .mp-sec-im .mp-audtable input { font-size: 10px !important; }
    /* #818: audiência de 6 dígitos inteira na célula (sem padding lateral, letras um pouco mais juntas) */
    .campaign-detail-compact .mp-sec-im .mp-audtable td.mp-aud-val:not(.mp-num) { padding: 1px 0 !important; }
    .campaign-detail-compact .mp-sec-im .mp-audtable input { letter-spacing: -0.3px; }
    /* #818: IM 08h / médio / máximo / mínimo — colunas com menos padding pra caber o número em 24px */
    .campaign-detail-compact .mp-sec-im > .row:nth-of-type(2) > [class*="col-"] { padding-left: 4px; padding-right: 4px; }

    /* CPM impressões em cima e os dois câmbios lado a lado */
    .campaign-detail-compact .mp-sec-ind > .row { display: flex !important; flex-wrap: wrap; }
    /* #806: a linha herda o gap de 12px de ".mp-sec-ind > div"; com 50% + 12px + 50% os câmbios empilhavam */
    .campaign-detail-compact .mp-sec-ind > .row { column-gap: 12px !important; }
    .campaign-detail-compact .mp-sec-ind > .row > div { width: calc(50% - 6px) !important; flex: 0 0 calc(50% - 6px) !important; margin-bottom: 2px !important; }
    .campaign-detail-compact .mp-sec-ind > .row > div:first-child { width: 100% !important; flex: 0 0 100% !important; }

    /* Cálculo: rótulos longos menores */
    .campaign-detail-compact .mp-sec-calc label:not([class*="value"]):not(.n-div-card-subtitle) { font-size: 11px !important; line-height: 1.25; }

    /* Metodologia: o seletor usa a largura da coluna (não corta o nome) */
    /* #806: no Outsmart / Route, "Impactos no período" fica ao lado do seletor (antes caía pra linha de baixo) */
    .campaign-detail-compact .mp-sec-im > .row:first-of-type { flex-wrap: nowrap !important; }
    .campaign-detail-compact .mp-sec-im > .row:first-of-type > div { width: auto !important; flex: 1 1 0; min-width: 0; }
    .campaign-detail-compact .mp-sec-im > .row:first-of-type .mp-select { width: 100%; max-width: 320px; }

    /* Últimos ajustes de espaço */
    .campaign-detail-compact #midia-programatica-body > .n-div-card { padding: 6px 12px !important; }
    .campaign-detail-compact .mp-sec-params .col-md-3,
    .campaign-detail-compact .mp-sec-calc .col-md-3,
    .campaign-detail-compact .mp-sec-calc .col-md-4 { margin-bottom: 2px !important; }
}

/* Revisão da compactação: faixas horárias, audiência, investimento/CPM, comparativo e segmentos */
@media screen {
    /* Cards que tinham 24px de respiro em cima e embaixo direto no HTML */
    .campaign-detail-compact .n-div-card[style*="padding-top: 24px"] { padding-top: 8px !important; }
    .campaign-detail-compact .n-div-card[style*="padding-bottom: 24px"] { padding-bottom: 8px !important; }

    /* 6 faixas: cada indicador vira rótulo + valor, com o % logo abaixo em fonte pequena */
    .campaign-detail-compact .time-slot-table { padding: 4px 8px 12px !important; margin: 3px !important; border-width: 1.5px !important; }
    .campaign-detail-compact .time-slot-table > div > div {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: baseline !important;
        column-gap: 6px;
        margin-top: 3px !important;
    }
    .campaign-detail-compact .time-slot-table > div > div > label { margin: 0 !important; line-height: 1.25; }
    .campaign-detail-compact .time-slot-table > div > div > label:first-child {
        width: 100% !important;
        font-size: 10px !important;
    }
    .campaign-detail-compact .time-slot-table .n-card-label-value { width: auto !important; font-size: 16px !important; }
    .campaign-detail-compact .time-slot-table .n-card-label-value > label { font-size: 9px !important; margin: 0; }
    .campaign-detail-compact .time-slot-table .n-card-label-value-title-2 { width: 100% !important; font-size: 9px !important; line-height: 1.1 !important; }
    .campaign-detail-compact .time-slot-table .n-span-percent-1 { font-size: 10px !important; }
    .campaign-detail-compact .time-slot-table > div > span { font-size: 13px !important; bottom: -9px !important; }

    /* 24 horas: grade recolhida mais baixa (continua com "Ver todas as faixas") */
    .campaign-detail-compact .n-div-card[style*="max-height: 445px"] { max-height: 330px !important; padding: 10px 16px !important; }
    .campaign-detail-compact .n-div-card[style*="max-height: 445px"] > div:first-child { gap: 0 !important; }
    .campaign-detail-compact .n-div-card[style*="max-height: 445px"] > div:first-child .n-card-label-value { line-height: 1.15; }

    /* Audiência e alcance */
    .campaign-detail-compact .n-card-min-height { min-height: 0; }
    .campaign-detail-compact .n-div-alcance .n-mb-24 { margin-bottom: 6px !important; }
    .campaign-detail-compact .n-card-right .n-card-label-value { line-height: 1.2; }
    .campaign-detail-compact .n-card-label-value-title-2,
    .campaign-detail-compact .n-card-label-value-title-3 { line-height: 1.3; }

    /* Investimento: os dois cards da esquerda acompanham a altura do CPM (sem vão no meio) */
    .campaign-detail-compact .row[style*="flex: 1"] { display: flex; }
    .campaign-detail-compact .n-div-cpm .n-div-card[style*="padding: 24px"] { padding: 8px 14px !important; }
    .campaign-detail-compact .n-div-cpm .n-mb20 { margin-bottom: 2px !important; }
    .campaign-detail-compact .n-div-cpm .n-card-label-cpm-1 { margin-bottom: 0; line-height: 1.2; }
    /* "CPM total" e "*Absoluto do período" na mesma linha */
    .campaign-detail-compact .n-div-cpm .n-div-card > .col-md-12 > .row:nth-child(-n+2) {
        display: inline-flex; align-items: baseline; margin: 0 8px 4px 0 !important; vertical-align: baseline;
    }
    .campaign-detail-compact .n-div-cpm .n-div-card > .col-md-12 > .row:nth-child(2) label { margin: 0 !important; }
    .campaign-detail-compact .n-div-cpm .n-div-card-title-cpm { margin: 0; }
    /* Investimento: as duas linhas dividem a altura do CPM, com o conteúdo centralizado */
    .campaign-detail-compact .row[style*="flex: 1"] + .row { flex: 1; display: flex; }
    .campaign-detail-compact .row[style*="flex: 1"] > div > .n-div-card,
    .campaign-detail-compact .row[style*="flex: 1"] + .row > div > .n-div-card {
        display: flex !important; align-items: center; padding-top: 6px !important; padding-bottom: 6px !important;
    }
    .campaign-detail-compact .n-div-cpm .row[style*="margin-bottom: 16px"] { margin-bottom: 6px !important; }
    .campaign-detail-compact .n-card-label-cpm-value { line-height: 1.2; }

    /* Comparativo: rótulos numa linha só e células mais baixas */
    .campaign-detail-compact .n-table-comparativo th,
    .campaign-detail-compact .n-table-comparativo td { padding: 3px 6px !important; }
    .campaign-detail-compact .n-table-comparativo tbody th { white-space: nowrap; font-size: 11px; }
    .campaign-detail-compact .n-table-comparativo td { font-size: 13px; }
    .campaign-detail-compact .n-table-comparativo thead th { font-size: 11px; line-height: 1.2; }

    /* Cards do topo: os 6 numa linha também em 1366 */
    .campaign-detail-compact .top-cards-row { margin-left: -6px; margin-right: -6px; }
    .campaign-detail-compact .top-cards-row > .top-card { flex-basis: 130px; min-width: 130px; padding: 0 6px; margin-bottom: 8px; }
    .campaign-detail-compact .top-cards-row > .top-card--duration { flex-basis: 300px; min-width: 300px; }
    .campaign-detail-compact .top-card--duration input { max-width: 105px; }
    .campaign-detail-compact .top-cards-row .n-card-label-title { white-space: normal; line-height: 1.2; font-size: 10px; }
    .campaign-detail-compact .top-cards-row .n-card-right { min-width: 0; }

    /* Segmentação Serasa */
    .campaign-detail-compact .n-span-seg-desc { min-height: 40px; line-height: 1.15; }
    .campaign-detail-compact .n-card-segsocial { padding: 4px 10px; margin-bottom: 4px; }
}

/* Revisão da tela toda: cards com ícone, cabeçalho, mapa e tabela de detalhes */
@media screen {
    /* Cards com ícone: sem o respiro de 40px/20px que vinha inline e rótulos com linha justa */
    .campaign-detail-compact .n-card-left { padding-bottom: 0 !important; }
    .campaign-detail-compact .n-card-right > label,
    .campaign-detail-compact .n-card-right > span { margin-bottom: 0; line-height: 1.25; }
    .campaign-detail-compact .n-card-right > .n-card-label-title { margin-top: 0 !important; }
    .campaign-detail-compact .n-card-right .n-inline > label { line-height: 1.2; margin-bottom: 0; }
    .campaign-detail-compact [style*="min-height: 97px"],
    .campaign-detail-compact [style*="min-height:97px"] { min-height: 52px !important; }

    /* Cabeçalho com o nome da campanha (fica fora da seção, por isso classe própria) */
    .campaign-header-compact .second-header__title { margin-top: 10px; font-size: 24px; }
    .campaign-header-compact .second-header__client-name { margin-bottom: 8px; font-size: 15px; }
    .campaign-header-compact .div-btn { margin-top: 12px; }
    .campaign-detail-compact .n-border-cp { margin-bottom: 8px !important; }

    /* Mapa: Locais de interesse e ferramentas na mesma linha */
    .campaign-detail-compact .n-div-card > div[style*="gap: 8px"][style*="flex-wrap"],
    .campaign-detail-compact .n-div-card > .map-tools-bar { width: auto; margin-bottom: 8px !important; margin-right: 12px; }

    /* Tabela de detalhes: busca e filtros na mesma linha, linhas mais baixas */
    .campaign-detail-compact .n-div-search { margin-bottom: 6px; padding-top: 4px; padding-bottom: 4px; }
    .campaign-detail-compact .table-filters { width: auto; margin: 4px 0 6px !important; }
    .campaign-detail-compact .n-table > tbody > tr > td,
    .campaign-detail-compact .n-table > thead > tr > th { padding: 4px 8px !important; }
}

/* Cabeçalho compacto em tela larga: metade para o nome e metade para os botões, numa linha só. */
@media screen and (min-width: 992px) {
    .campaign-header-compact .info { width: 50%; }
    .campaign-header-compact .div-btn { width: 50%; }
    .campaign-header-compact .div-btn > a { white-space: nowrap; }
}

/* Layout padrão em tela de notebook (992-1919 px): mesma divisão 50/50 do compacto, para Editar,
   Imprimir, Layout compacto e Configurações caberem numa linha (#794). Em 1920 px ou mais o
   layout padrão fica como era, 7/5 colunas. */
@media screen and (min-width: 992px) and (max-width: 1919px) {
    .second-header .no-print > .info { width: 50%; }
    .second-header .no-print > .div-btn { width: 50%; }
    .second-header .no-print > .div-btn > a { white-space: nowrap; }
}

/* Faixas horárias no compacto: 6 numa linha como no #763, agora que a largura saiu do HTML (#801).
   Margem de 3 px (acima) + 1 px de folga por faixa para o arredondamento. */
@media screen {
    .campaign-detail-compact .time-slot-table {
        flex-basis: calc(100% / 6 - 7px) !important;
        max-width: calc(100% / 6 - 7px) !important;
    }
}