/*
 * embed.css
 */


:root {
    --ds-primary: #004F9F;
    --ds-primary-dark: #003B77;
    --ds-primary-light: #E5EFF8;
    --ds-neutral-300: #E3E8EF;
    --ds-neutral-700: #4A5568;
    --ds-font-family: "Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.painel-embed {
    --painel-primary: #004F9F;
    --painel-secondary: #007F31;
    --painel-tertiary: #FFD500;
    --painel-green: #28A44C;
    --painel-red: #DA1E28;
    --painel-ink: #1A202C;
    --painel-ink-soft: #4A5568;
    --painel-ink-muted: #718096;
    --painel-surface: #FFFFFF;
    --painel-surface-alt: #F4F6F9;
    --painel-border: #E3E8EF;
    --painel-radius-sm: 4px;
    --painel-radius-md: 12px;
    --painel-radius-lg: 16px;
    --painel-font: "Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    background: var(--painel-surface);
    color: var(--painel-ink);
    font-family: var(--painel-font);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}

.painel-embed *,
.painel-embed *::before,
.painel-embed *::after {
    box-sizing: border-box;
}

.painel-embed .painel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px 0;
}

/* ---------------------------------------------------------------- Cabeçalho */

.painel-embed .painel-header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-end;
    min-width: 0;
}

.painel-embed .painel-header > div:first-child {
    min-width: 0;
    flex: 1 1 220px;
}

.painel-embed .painel-kicker {
    color: var(--painel-primary);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

    .painel-embed .painel-titulo {
        color: #30302e;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
    }

.painel-embed .painel-subtitulo {
    color: var(--painel-ink-muted);
    font-size: 20px;    
}

.painel-embed .painel-seletor {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 1 280px;
    min-width: 0;
    max-width: 100%;
}

.painel-embed .painel-seletor label {
    color: var(--painel-ink-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.painel-embed .painel-seletor select:not(.select2-hidden-accessible) {
    background: var(--painel-surface);
    border: 1px solid var(--painel-border);
    border-radius: var(--painel-radius-sm);
    color: var(--painel-ink);
    font-family: inherit;
    font-size: 16px;
    padding: 10px 12px;
    width: 100%;
    max-width: 100%;
}

/* ------------------------------------------------------------------- Tags */

.painel-embed .painel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
}

.painel-embed .painel-tag {
    align-items: center;
    background: var(--painel-surface-alt);
    border: 1px solid var(--painel-border);
    border-radius: 999px;
    color: var(--painel-ink-soft);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    padding: 6px 14px;
}

.painel-embed .painel-tag::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 8px;
    width: 8px;
}

.painel-embed .painel-tag--regiao {
    color: var(--painel-primary);
}

.painel-embed .painel-tag--categoria {
    color: var(--painel-secondary);
}

.painel-embed .painel-tag-rotulo {
    color: var(--painel-ink-muted);
    font-weight: 600;
}

/* ------------------------------------------------------------------ Cards */

.painel-embed .painel-card {
    background: var(--painel-surface-alt);
    border: 1px solid var(--painel-border);
    border-radius: var(--painel-radius-lg);
    padding: 16px 20px 20px;
}

.painel-embed .painel-card-titulo {
    color: var(--painel-ink);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
}

.painel-embed .painel-card--grafico {
    min-width: 0;
    overflow: hidden;
}

.painel-embed .painel-grafico {
    height: 300px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

/* O ResizeSensor do amCharts cria um filho com 200% da largura e gera barra horizontal. */
.painel-embed .resize-sensor,
.painel-embed .resize-sensor-expand,
.painel-embed .resize-sensor-shrink {
    position: absolute;
    overflow: hidden !important;
    visibility: hidden;
}

/* Tooltip no mesmo padrão do gráfico de evolução (ClassificacaoEvolucao.css). */
.painel-embed .classificacao-evolucao-tooltip {
    background: transparent;
    border: 0;
    color: var(--painel-primary);
    cursor: default;
    font-family: var(--painel-font);
    font-size: 0.85rem;
    padding: 0;
    text-align: left;
}

.painel-embed .classificacao-evolucao-tooltip strong {
    font-weight: 800;
}

/* ----------------------------------------------------------- Indicadores */

.painel-embed .painel-indicadores {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.painel-embed .painel-indicador {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.painel-embed .painel-indicador-rotulo {
    color: var(--painel-ink-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.painel-embed .painel-indicador-valor {
    color: var(--painel-primary);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
}

.painel-embed .painel-indicador-valor[data-tendencia="positiva"] {
    color: var(--painel-green);
}

.painel-embed .painel-indicador-valor[data-tendencia="negativa"] {
    color: var(--painel-red);
}

.painel-embed .painel-indicador-periodo {
    color: var(--painel-ink-soft);
    font-size: 14px;
    font-weight: 600;
}

/* --------------------------------------------------------- Estado vazio */

.painel-embed .painel-vazio {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 48px 20px;
    text-align: center;
}

.painel-embed .painel-vazio h2 {
    font-size: 20px;
    margin: 0;
}

.painel-embed .painel-vazio p {
    color: var(--painel-ink-muted);
    font-size: 14px;
    margin: 0;
    max-width: 480px;
}

/* -------------------------------------------------------------- Rodapé */

.painel-embed .painel-rodape {
    border-top: 1px solid var(--painel-border);
    color: var(--painel-ink-muted);
    font-size: 12px;
    padding-top: 12px;
}

.painel-embed .painel-rodape a {
    color: var(--painel-primary);
    text-decoration: none;
}

.painel-embed .painel-rodape a:hover,
.painel-embed .painel-rodape a:focus {
    text-decoration: underline;
}

/* --------------------------------------------------------- Carregamento */

.painel-embed .painel[data-carregando="true"] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
}

/* ---------------------------------------------------------- Select2 (DS) */

.painel-embed .select2-container {
    max-width: 100%;
}

.painel-embed .select2-container--default .select2-selection--single {
    border: 1px solid var(--painel-border);
    border-radius: var(--painel-radius-sm);
    height: 44px;
}

.painel-embed .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--painel-ink);
    font-size: 16px;
    line-height: 42px;
    padding-left: 12px;
}

.painel-embed .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #004F9F;
}

/* ------------------------------------------------------------ Responsivo */

@media (max-width: 900px) {
    .painel-embed .painel-indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .painel-embed .painel {
        gap: 12px;
        padding: 12px 0;
    }

    .painel-embed .painel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .painel-embed .painel-seletor {
        min-width: 0;
    }

    .painel-embed .painel-titulo {
        font-size: 32px;
    }

    .painel-embed .painel-card {
        padding: 12px 12px 16px;
    }

    .painel-embed .painel-card-titulo {
        font-size: 16px;
    }

    .painel-embed .painel-grafico {
        height: 240px;
    }

    .painel-embed .painel-indicadores {
        grid-template-columns: 1fr;
    }

    .painel-embed .painel-indicador-valor {
        font-size: 24px;
    }
}