@font-face {
    font-family: 'borna';
    src: url('../fonts/borna/borna-bold-webfont.woff2') format('woff2'), url('../fonts/borna/borna-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal !important;
    font-display: swap;
}

@font-face {
    font-family: 'borna';
    src: url('../fonts/borna/borna-medium-webfont.woff2') format('woff2'), url('../fonts/borna/borna-medium-webfont.woff') format('woff');
    font-weight: 500; /* medium é geralmente 500 */
    font-style: normal !important;
    font-display: swap;
}

@font-face {
    font-family: 'borna';
    src: url('../fonts/borna/borna-regular-webfont.woff2') format('woff2'), url('../fonts/borna/borna-regular-webfont.woff') format('woff');
    font-weight: 400; /* regular é peso 400 */
    font-style: normal !important;
    font-display: swap;
}

@font-face {
    font-family: 'borna';
    src: url('../fonts/borna/borna-regularitalic-webfont.woff2') format('woff2'), url('../fonts/borna/borna-regularitalic-webfont.woff') format('woff');
    font-weight: 400; /* regular é peso 400 */
    font-style: italic !important;
    font-display: swap;
}

.borna-bold {
    font-family: 'borna', sans-serif;
    font-weight: 700;
    font-style: normal !important;
    font-display: swap;
}

.borna-regular {
    font-family: 'borna', sans-serif;
    font-weight: 401;
    font-style: normal!important;
    font-display: swap;
}

.borna-medium {
    font-family: 'borna', sans-serif;
    font-weight: 500;
    font-style: normal !important;
    font-display: swap;
}

.borna-regular-italic {
    font-family: 'borna', sans-serif;
    color: #3B82F6;
    font-weight: 300;
    font-style: italic !important;
    font-display: swap;
    font-size:14px;
}





body {
    font-family: 'borna', sans-serif;
    background: #fff;
}

.container {
    max-width: 1400px;
    margin: auto;
}

.header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.drop {
    width: 120px;
    height: 160px;
    background: #3B82F6;
    border-radius: 50% 50% 50% 50%;
}

.card {
    margin-bottom: 40px;
}

h1 {
    font-size: 56px;
    margin: 0;
}

h2 {
    color: #3B82F6;
    margin: 0;
}

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 40px 0;
}

.big {
    font-size: 64px;
    color: #3B82F6;
    font-weight: 700;
}

.bottle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

    .bottle-grid span {
        font-size: 48px;
        color: #3B82F6;
    }

.chart-canvas {
    width: 100%;
    height: 400px;
}

.dashboard-container {
    max-width: 1500px;
    margin: 20px auto;
    background: #fff;
    padding-top: 40px;
    /*padding-bottom: 10px;*/
    padding-left: 40px;
    padding-right: 40px;
    /*box-shadow: 0 0 20px rgba(0,0,0,0.05);*/
}

/* Header */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinha os elementos no topo */
    margin-bottom: 40px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.titles {
    flex-direction: column;
    gap: 0; /* Títulos juntos */
}

.logo {
    height: 90px;
    margin-bottom: 20px;
    width: auto; /* Mantém proporção */
}


.main-title {
    font-family: 'borna', sans-serif;
    font-weight: 700;
    font-size: 120px;
    margin-top: 40px;
    color: #3777ff;
    line-height: 1;
}

.sub-title {
    font-size: 32px;
    font-weight: 700;
    color: #3777ff;
    margin: 0;
}

.update-text {
    color: #000;
    font-size: 20px;
    margin-top: 25px;
    font-family: 'borna', sans-serif;
}


    .update-text span {
        color: #3777ff;
        font-family: 'borna', sans-serif;
    }

.drop-icon img {
    width: 180px; /* Ajusta para tamanho da gota na imagem */
    height: auto;
}


/* Gráficos */
.chart-section {
    display: flex;
    justify-content: center; /* centraliza horizontalmente o conteúdo */
}

.chart-box {
    position: relative;
    height: 290px; /* altura fixa para o gráfico */
    width: 100%; /* largura menor */
    max-width:1000px; /* limita o tamanho máximo para não ficar muito grande */
    margin-bottom: 20px;
}

#sensorChart {
    width: 100% !important; /* canvas ocupa toda a largura do container */
    height: 100% !important; /* canvas ocupa toda a altura do container */
}

h3 {
    font-size: 30px;
    font-weight: 700;
    border-bottom: none;
    margin-bottom: 25px;
    /*text-align: center;*/ /* centraliza o título */
}

.chart-box small {
    font-weight: 401;
    color: #666;
    font-size: 15px;
}


/* Divisórias */
.divider {
    border: 0;
    /*border-top: 2.5px solid #111;*/
    margin: 45px 0;
    opacity: 1;
}

.border-left {
    border-left: 2.5px solid #111 !important;
    padding-left: 20px;
}

.bottle-card.border-left {
    border-left: 2px solid #333 !important;
}

/* Estatísticas */
.section-title {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
}

.stats-grid, .bottles-grid {
    display: flex;
    /*text-align: center;*/
}

.stat-card, .bottle-card {
    flex: 1;
    padding: 10px;
}


.big-number {
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
    display: block;
}

.mid-number86 {
    font-size: 86px;
    font-weight: 800;
    line-height: 1;
    display: block;
}

.mid-number70 {
    font-size: 70px;
    font-weight: 800;
    line-height: 1;
    display: block;
}

.blue {
    color: #3B82F6;
}

.blue-text {
    color: #3B82F6;
    font-size: 50px;
}

.stat-card p, .bottle-card p {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #444;
}

.black-bar {
    background-color: #111;
    color: #fff;
    padding: 25px 40px;
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    margin: 30px 0;
}

.bar-label {
    font-size: 30px;
    font-weight: 600;
    /*text-transform: uppercase;*/
    /*opacity: 0.8;*/
}

.bar-value {
    font-size: 100px;
    font-weight: 800;
    color: #3B82F6;
}

.bar-left, .bar-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* alinha conteúdo à esquerda */
    text-align: left; /* texto alinhado à esquerda */
}

.big-number {
    font-size: 1.5rem; /* deixa o número maior */
    margin-top: 5px;
    color: #00bfff; /* opcional: cor diferenciada */
    font-weight: bold;
}

.section-main-title {
    color: #3B82F6;
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
}

.left-align {
    text-align: left;
}

.stats-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 0; /* O alinhamento será controlado pelo padding interno */
}

.stat-item {
    flex: 1;
    padding: 0 20px; /* Margens internas iguais para todos */
    text-align: left;
}

    /* Garante que o primeiro item de cada linha não tenha padding à esquerda */
    .stat-item:first-child {
        padding-left: 0;
    }

.section-wrapper {
    margin: 45px 0;
}

.value-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}


.equivalent-box {
    display: flex;
    flex-direction: column; /* texto em cima, ícone + número abaixo */
    /*align-items: center;*/ /* centraliza horizontalmente */
    gap: 10px; /* espaço entre texto e ícone+numero */
}

.row-align {
    display: flex;
    /*align-items: center;*/ /* alinha verticalmente o texto com o ícone */
    gap: 10px; /* espaçamento entre texto e ícone */
}

    .row-align .stat-label {
        margin: 0;
    }

.stat-label {
    font-size: 25px;
    margin-bottom: 10px;
    min-height: 40px; /* Mantém ícones alinhados mesmo com textos diferentes */
    text-align: left;
}


.divider-thin {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 30px 0;
}

.border-left-thin {
    border-left: 1px solid #ccc;
    padding-left: 20px;
}


.circle-total {
    background: #3B82F6;
    color: white;
    border-radius: 50%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px; /* reduzido para não inflar */
    min-width: 80px; /* mantém tamanho mínimo */
    min-height: 80px; /* mantém tamanho mínimo */
    text-align: center;
    font-size: 20px; /* tamanho da fonte dentro da bola */
}



.circle-label {
    font-size: 14px;
}

.circle-number {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.circle-value {
    font-size: 28px;
    font-weight: 700;
}

.circle-unit {
    font-size: 16px;
}


.dual-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

small {
    color: #666;
    font-weight: normal;
}


/* --- Waste Volume Ajustes --- */
.section-wrapper.waste-volume .stats-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* alinha todos os stat-items na base */
    gap: 20px; /* espaço uniforme entre os blocos */
}

    .section-wrapper.waste-volume .stats-grid .stat-item:first-child .circle-total {
        /*min-width: 90px;*/ /* mesmo tamanho dos círculos CO2/energy */
        /*height: 90px;*/
        font-size: 16px; /* tamanho do texto dentro do círculo */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #3B82F6;
        color: #fff;
    }


.section-wrapper.waste-volume .stat-item .value-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.section-wrapper.waste-volume .stat-item p.stat-label {
    margin-bottom: 5px;
    font-size: 14px;
    min-height: 40px; /* mantém alinhamento vertical */
}



/* --- Círculo Waste Volume responsivo --- */
.section-wrapper.waste-volume .stats-grid .stat-item:first-child .circle-total {
    display: inline-flex; /* inline para não ocupar 100% da coluna */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    padding: 10px; /* espaço interno */
    /*min-width: 90px;*/ /* mínimo igual ao CO2 */
    /*min-height: 90px;*/ /* mínimo igual ao CO2 */
    /*width: auto;*/ /* largura ajusta ao conteúdo */
    /*height: auto;*/ /* altura ajusta ao conteúdo */
    border-radius: 50%; /* sempre redondo */
    background: #3B82F6;
    color: #fff;
    flex-shrink: 0;
    /*box-sizing: border-box;*/ /* padding não aumenta o círculo além do limite */
    text-align: center;
}

/* Todos os ícones pequenos do dashboard */
.icon-small {
    width: 80px; /* aumenta a largura (antes era 45px) */
    height: auto; /* mantém proporção */
}