/* =====================================================================
   Gráfico Histórico — chart.css  v8
   Mobile: scroll horizontal com eixo Y fixo
   Desktop: layout normal responsivo
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&family=DM+Mono:wght@400;500;700&display=swap');

/* =====================================================================
   OUTER — clipping e scroll
   ===================================================================== */
.fdwg-outer {
    width    : 100%;
    position : relative;
}

/* ---- wrapper de scroll (visível no mobile) ---- */
.fdwg-scroll-hint {
    display        : none;
    align-items    : center;
    gap            : 6px;
    margin-bottom  : 8px;
    font-family    : 'DM Sans', sans-serif;
    font-size      : 11px;
    color          : rgba(255,255,255,.35);
    letter-spacing : .04em;
}
.fdwg-scroll-hint svg { flex-shrink: 0; opacity: .6; }

@media (max-width: 600px) {
    .fdwg-scroll-hint { display: flex; }
}

/* ---- container de scroll ---- */
.fdwg-scroll-wrap {
    width      : 100%;
    overflow-x : auto;
    overflow-y : visible;
    -webkit-overflow-scrolling: touch;
    /* scroll snap suave */
    scroll-snap-type: x proximity;
    /* esconde scrollbar mas mantém funcional */
    scrollbar-width : thin;
    scrollbar-color : rgba(238,238,34,.3) transparent;
    position   : relative;
}
.fdwg-scroll-wrap::-webkit-scrollbar {
    height : 3px;
}
.fdwg-scroll-wrap::-webkit-scrollbar-track {
    background: transparent;
}
.fdwg-scroll-wrap::-webkit-scrollbar-thumb {
    background    : rgba(238,238,34,.3);
    border-radius : 2px;
}

/* =====================================================================
   WRAP DO CANVAS
   =====================================================================
   - No desktop: 100% da largura, aspect-ratio
   - No mobile: largura mínima para caber bem as barras (calculada via JS),
     altura fixa confortável
   ===================================================================== */
.fdwg-wrap {
    position     : relative;
    /* desktop */
    width        : 100%;
    aspect-ratio : 16 / 6;
    min-height   : 220px;
    max-height   : 500px;
    flex-shrink  : 0;
}

/* tablet */
@media (max-width: 900px) {
    .fdwg-wrap {
        aspect-ratio : 16 / 7;
        max-height   : 420px;
    }
}

/* mobile — altura fixa, largura mínima via atributo inline */
@media (max-width: 600px) {
    .fdwg-wrap {
        aspect-ratio : unset !important;
        height       : 300px;
        min-height   : 280px;
        max-height   : 300px;
    }
}

@media (max-width: 380px) {
    .fdwg-wrap {
        height    : 270px;
        min-height: 270px;
        max-height: 270px;
    }
}

.fdwg-canvas {
    display      : block;
    width        : 100% !important;
    height       : 100% !important;
    cursor       : crosshair;
    touch-action : pan-y;
}

/* =====================================================================
   EIXO Y FIXO — fica sobre o canvas quando há scroll
   Renderizado em canvas separado, posição sticky
   ===================================================================== */
.fdwg-axis-y-canvas {
    display    : none;    /* visível apenas no modo scroll (JS ativa) */
    position   : absolute;
    top        : 0;
    left       : 0;
    z-index    : 5;
    pointer-events: none;
}

/* =====================================================================
   TOOLTIP
   ===================================================================== */
.fdwg-tooltip {
    position    : absolute;
    pointer-events: none;
    background  : #ffffff;
    color       : #0a0a0a;
    border-radius: 10px;
    padding     : 11px 16px 12px;
    font-family : 'DM Sans', sans-serif;
    font-size   : 13px;
    font-weight : 500;
    line-height : 1.45;
    box-shadow  : 0 8px 32px rgba(0,0,0,.24), 0 1px 4px rgba(0,0,0,.1);
    white-space : nowrap;
    z-index     : 30;
    opacity     : 0;
    visibility  : hidden;
    transform   : translate(-50%, -115%) scale(.94);
    transition  : opacity .15s ease, transform .15s ease, visibility .15s;
    max-width   : min(260px, 80vw);
}
.fdwg-tooltip::after {
    content      : '';
    position     : absolute;
    bottom       : -7px;
    left         : 50%;
    transform    : translateX(-50%);
    border-left  : 7px solid transparent;
    border-right : 7px solid transparent;
    border-top   : 8px solid #ffffff;
}
.fdwg-tooltip.fdwg-tip-visible {
    opacity    : 1;
    visibility : visible;
    transform  : translate(-50%, -115%) scale(1);
}
.fdwg-tooltip strong {
    display        : block;
    font-size      : clamp(16px, 4vw, 21px);
    font-weight    : 700;
    font-family    : 'DM Mono', monospace;
    letter-spacing : -.02em;
    line-height    : 1.2;
    margin-bottom  : 1px;
}
.fdwg-tooltip em {
    font-style     : normal;
    font-size      : 10px;
    color          : #888;
    text-transform : uppercase;
    letter-spacing : .09em;
    display        : block;
    margin-bottom  : 3px;
}
.fdwg-tooltip .fdwg-yoy {
    display    : block;
    font-size  : 11px;
    font-weight: 600;
    margin-top : 3px;
}

/* =====================================================================
   PAINEL DE ESTATÍSTICAS
   ===================================================================== */
.fdwg-stats {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 10px;
    margin-top            : 16px;
    font-family           : 'DM Sans', sans-serif;
}

@media (max-width: 600px) {
    .fdwg-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.fdwg-stat {
    background  : rgba(255,255,255,.04);
    border      : 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding     : 11px 14px;
    transition  : background .2s;
}
.fdwg-stat:hover { background: rgba(255,255,255,.07); }

.fdwg-stat-label {
    font-size      : clamp(8px, 1.8vw, 9px);
    font-weight    : 500;
    letter-spacing : .12em;
    text-transform : uppercase;
    color          : rgba(255,255,255,.38);
    margin-bottom  : 5px;
    line-height    : 1.3;
}
.fdwg-stat-value {
    font-family : 'DM Mono', monospace;
    font-size   : clamp(13px, 2.8vw, 19px);
    font-weight : 700;
    color       : #EEEE22;
    line-height : 1.1;
}
.fdwg-stat-value.green { color: #4ade80; }
.fdwg-stat-value.red   { color: #f87171; }

/* =====================================================================
   MOBILE HORIZONTAL BAR CHART  (≤ 600px)
   Canvas é ocultado; HTML puro substitui com barras horizontais
   ===================================================================== */
.fdwg-mobile-chart {
    display        : none;   /* oculto no desktop */
    flex-direction : column;
    gap            : 0;
    width          : 100%;
    font-family    : 'DM Sans', sans-serif;
    padding        : 0 0 4px;
}

.fdwg-mobile-badge {
    display        : inline-flex;
    align-items    : center;
    gap            : 5px;
    align-self     : flex-end;
    background     : rgba(238,238,34,.1);
    border         : 1px solid rgba(238,238,34,.3);
    border-radius  : 6px;
    padding        : 4px 10px;
    font-size      : 11px;
    font-weight    : 600;
    color          : #EEEE22;
    margin-bottom  : 10px;
    letter-spacing : .02em;
}

.fdwg-mobile-row {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    padding        : 5px 0;
    border-bottom  : 1px solid rgba(255,255,255,.04);
    cursor         : default;
    transition     : background .15s;
    border-radius  : 4px;
    padding-left   : 2px;
    padding-right  : 4px;
}
.fdwg-mobile-row:last-child { border-bottom: none; }
.fdwg-mobile-row:hover { background: rgba(255,255,255,.03); }

/* ano — coluna fixa */
.fdwg-mobile-year {
    flex-shrink    : 0;
    width          : 36px;
    font-size      : 11px;
    font-weight    : 600;
    color          : rgba(255,255,255,.38);
    text-align     : right;
    font-family    : 'DM Mono', monospace;
    letter-spacing : -.01em;
}

/* barra — cresce conforme o valor */
.fdwg-mobile-bar-wrap {
    flex           : 1;
    height         : 22px;
    position       : relative;
    background     : rgba(255,255,255,.04);
    border-radius  : 4px;
    overflow       : hidden;
}
.fdwg-mobile-bar {
    position       : absolute;
    left           : 0; top: 0; bottom: 0;
    border-radius  : 4px;
    background     : #EEEE22;
    transition     : width .6s cubic-bezier(.23,1,.32,1);
    /* brilho no topo */
}
.fdwg-mobile-bar::after {
    content    : '';
    position   : absolute;
    top: 0; left: 0; right: 0;
    height     : 40%;
    background : rgba(255,255,255,.14);
    border-radius: 4px 4px 0 0;
}
/* destaque para o último ano (maior valor) */
.fdwg-mobile-row.is-last .fdwg-mobile-bar {
    background : #EEEE22;
    box-shadow : 0 0 8px rgba(238,238,34,.35);
}
.fdwg-mobile-row.is-last .fdwg-mobile-year {
    color      : rgba(255,255,255,.75);
    font-weight: 700;
}

/* valor — coluna fixa à direita */
.fdwg-mobile-value {
    flex-shrink    : 0;
    width          : 58px;
    font-size      : 11px;
    font-weight    : 700;
    color          : #EEEE22;
    text-align     : right;
    font-family    : 'DM Mono', monospace;
    letter-spacing : -.02em;
    white-space    : nowrap;
}
.fdwg-mobile-row:not(.is-last) .fdwg-mobile-value {
    color : rgba(238,238,34,.55);
}

/* variação YoY — linha secundária dentro da barra */
.fdwg-mobile-yoy {
    position       : absolute;
    right          : 5px;
    top            : 50%;
    transform      : translateY(-50%);
    font-size      : 9px;
    font-weight    : 600;
    color          : rgba(0,0,0,.55);
    font-family    : 'DM Sans', sans-serif;
    pointer-events : none;
    white-space    : nowrap;
}

@media (max-width: 600px) {
    /* mostra HTML chart, oculta canvas e tudo relacionado */
    .fdwg-mobile-chart     { display: flex; }
    .fdwg-scroll-wrap      { display: none !important; }
    .fdwg-scroll-hint      { display: none !important; }
    .fdwg-wrap             { display: none !important; }
    .fdwg-stats            { margin-top: 12px; }
}