:root {
    color-scheme: dark;

    --fundo: #08111f;
    --fundo-topo: rgba(8, 17, 31, 0.9);

    --cartao: #111d2d;
    --cartao-secundario: #152236;
    --campo: #17263a;

    --texto: #f2f6fb;
    --texto-suave: #aebacd;
    --texto-discreto: #7f8ea4;

    --borda: rgba(151, 170, 196, 0.18);
    --borda-forte: rgba(151, 170, 196, 0.28);

    --azul: #329bea;
    --azul-suave: rgba(50, 155, 234, 0.13);

    --verde: #48d49a;
    --verde-suave: rgba(72, 212, 154, 0.13);

    --amarelo: #efb64f;
    --amarelo-suave: rgba(239, 182, 79, 0.14);

    --vermelho: #ff7777;
    --vermelho-suave: rgba(255, 119, 119, 0.14);

    --roxo: #dd7eae;
    --roxo-suave: rgba(221, 126, 174, 0.14);

    --raio-pequeno: 13px;
    --raio-medio: 19px;
    --raio-grande: 26px;

    --largura-maxima: 1180px;

    --sombra:
        0 14px 40px rgba(0, 0, 0, 0.18);

    --sombra-modal:
        0 35px 100px rgba(0, 0, 0, 0.55);

    --transicao: 180ms ease;
}


* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
    background: var(--fundo);
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;
    margin: 0;

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--texto);

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(35, 126, 197, 0.1),
            transparent 32rem
        ),
        linear-gradient(
            180deg,
            #0b1524 0%,
            var(--fundo) 42%
        );

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}


body.modal-aberto {
    overflow: hidden;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    color: inherit;
}


input,
textarea,
select {
    width: 100%;
}


textarea {
    resize: vertical;
}


[hidden] {
    display: none !important;
}


button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(50, 155, 234, 0.32);
    outline-offset: 3px;
}


.container {
    width: min(
        calc(100% - 42px),
        var(--largura-maxima)
    );

    margin-inline: auto;
}


/* Cabeçalho */

.topo {
    position: sticky;
    top: 0;
    z-index: 20;

    border-bottom: 1px solid var(--borda);

    background: var(--fundo-topo);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.topo-conteudo {
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.marca {
    margin: 0;

    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -0.035em;
}


.subtitulo {
    margin: 4px 0 0;

    color: var(--texto-suave);

    font-size: 0.85rem;
    font-weight: 400;
}


.status-atualizacao {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-height: 38px;
    padding: 8px 13px;

    border: 1px solid var(--borda);
    border-radius: 999px;

    color: var(--texto-suave);
    background: rgba(17, 29, 45, 0.76);

    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}


.status-atualizacao::before {
    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--amarelo);

    box-shadow:
        0 0 0 5px var(--amarelo-suave);
}


.status-atualizacao.atualizado::before {
    background: var(--verde);

    box-shadow:
        0 0 0 5px var(--verde-suave);
}


.status-atualizacao.erro::before {
    background: var(--vermelho);

    box-shadow:
        0 0 0 5px var(--vermelho-suave);
}


/* Estrutura */

.conteudo {
    padding: 28px 0 52px;
}


.painel {
    display: grid;
    gap: 18px;
}


.cartao {
    position: relative;
    overflow: hidden;

    padding: 26px;

    border: 1px solid var(--borda);
    border-radius: var(--raio-medio);

    background:
        linear-gradient(
            145deg,
            rgba(18, 31, 48, 0.98),
            rgba(15, 27, 43, 0.98)
        );

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.1);

    transition:
        border-color var(--transicao),
        transform var(--transicao),
        box-shadow var(--transicao);
}


.cartao:hover {
    border-color: var(--borda-forte);

    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.17);
}


.cartao h2 {
    margin: 0;

    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}


.rotulo {
    margin: 0 0 10px;

    color: var(--texto-suave);

    font-size: 0.81rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}


.texto-suave {
    margin: 10px 0 0;

    color: var(--texto-suave);

    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
}


/* Glicose atual */

.destaque {
    min-height: 210px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-color: rgba(72, 212, 154, 0.24);

    background:
        linear-gradient(
            120deg,
            rgba(16, 31, 47, 0.98),
            rgba(12, 56, 46, 0.82)
        );
}


.destaque::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 6px;

    background: var(--verde);
}


.destaque::after {
    content: "";

    position: absolute;
    top: -120px;
    right: -80px;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(72, 212, 154, 0.08),
            transparent 68%
        );

    pointer-events: none;
}


.destaque.faixa-baixa {
    border-color: rgba(255, 119, 119, 0.28);

    background:
        linear-gradient(
            120deg,
            rgba(16, 31, 47, 0.98),
            rgba(64, 30, 38, 0.88)
        );
}


.destaque.faixa-baixa::before {
    background: var(--vermelho);
}


.destaque.faixa-alvo::before {
    background: var(--verde);
}


.destaque.faixa-alta {
    border-color: rgba(239, 182, 79, 0.28);

    background:
        linear-gradient(
            120deg,
            rgba(16, 31, 47, 0.98),
            rgba(62, 48, 22, 0.88)
        );
}


.destaque.faixa-alta::before {
    background: var(--amarelo);
}


.destaque.faixa-muito-alta {
    border-color: rgba(221, 126, 174, 0.28);

    background:
        linear-gradient(
            120deg,
            rgba(16, 31, 47, 0.98),
            rgba(58, 29, 50, 0.88)
        );
}


.destaque.faixa-muito-alta::before {
    background: var(--roxo);
}


.valor-principal {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: baseline;
    gap: 16px;
}


.valor-principal strong {
    font-size: clamp(4.4rem, 10vw, 6rem);
    line-height: 0.98;

    font-weight: 300;
    letter-spacing: -0.055em;
}


.valor-principal span {
    color: var(--texto-suave);

    font-size: 1rem;
    font-weight: 400;
}


.leitura-nova {
    animation: pulso-leitura 520ms ease;
}


@keyframes pulso-leitura {
    0% {
        opacity: 0.75;
        transform: scale(0.985);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Indicadores */

.grade-indicadores {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.indicador {
    min-height: 170px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.indicador > strong {
    display: block;

    margin-top: 4px;

    font-size: clamp(2rem, 4.5vw, 2.65rem);
    line-height: 1.08;

    font-weight: 400;
    letter-spacing: -0.035em;
}


.tendencia-boa,
.tendencia-alerta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    margin: 13px 0 0;
    padding: 6px 11px;

    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 600;
}


.tendencia-boa {
    color: var(--verde);
    background: var(--verde-suave);
}


.tendencia-alerta {
    color: var(--amarelo);
    background: var(--amarelo-suave);
}


/* Botões de registro */

.cabecalho-cartao {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}


.grade-acoes {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
    margin-top: 20px;
}


.botao-acao {
    min-height: 106px;
    padding: 16px 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;

    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);

    color: var(--texto);
    background: rgba(22, 36, 55, 0.72);

    cursor: pointer;

    font-size: 0.91rem;
    font-weight: 500;

    transition:
        transform var(--transicao),
        border-color var(--transicao),
        background var(--transicao);
}


.botao-acao:hover {
    transform: translateY(-2px);

    border-color: rgba(50, 155, 234, 0.38);

    background: var(--azul-suave);
}


.botao-acao:active {
    transform: translateY(0);
}


.botao-acao .icone {
    font-size: 1.8rem;
    line-height: 1;
}


/* Gráfico */

.botao-secundario {
    min-height: 39px;
    padding: 8px 14px;

    border: 1px solid var(--borda);
    border-radius: 999px;

    color: var(--azul);
    background: var(--azul-suave);

    cursor: pointer;

    font-size: 0.82rem;
    font-weight: 500;

    transition:
        background var(--transicao),
        transform var(--transicao);
}


.botao-secundario:hover {
    transform: translateY(-1px);

    background: rgba(50, 155, 234, 0.2);
}


.area-grafico {
    position: relative;

    width: 100%;
    height: clamp(300px, 40vw, 430px);

    margin-top: 24px;
}


.detalhe-evento {
    margin-top: 18px;
    padding: 16px 18px;

    border: 1px solid var(--borda);
    border-left: 3px solid var(--azul);
    border-radius: var(--raio-pequeno);

    background: rgba(22, 36, 55, 0.72);
}


.detalhe-evento-cabecalho {
    display: flex;
    align-items: center;
    gap: 9px;
}


.detalhe-evento-cabecalho span {
    font-size: 1.3rem;
}


.detalhe-evento-cabecalho strong {
    font-weight: 500;
}


.detalhe-evento p {
    margin: 9px 0 0;

    color: var(--texto-suave);

    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.55;
}


.status-cartao {
    min-height: 94px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}


.status-cartao strong {
    font-size: 0.95rem;
    font-weight: 500;
}


/* Modal */

.modal-evento {
    position: fixed;
    inset: 0;
    z-index: 100;

    display: grid;
    place-items: center;

    padding: 20px;
}


.modal-evento-fundo {
    position: absolute;
    inset: 0;

    background: rgba(0, 5, 14, 0.78);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.modal-evento-conteudo {
    position: relative;
    z-index: 1;

    width: min(100%, 610px);
    max-height: min(90vh, 790px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-grande);

    background: var(--cartao);
    box-shadow: var(--sombra-modal);

    animation: abrir-modal 220ms ease;
}


@keyframes abrir-modal {
    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(0.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


.modal-evento-cabecalho {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 22px 24px;

    border-bottom: 1px solid var(--borda);

    background:
        linear-gradient(
            135deg,
            rgba(20, 34, 52, 0.98),
            rgba(16, 29, 45, 0.98)
        );
}


.modal-evento-identidade {
    display: flex;
    align-items: center;
    gap: 14px;
}


.modal-evento-identidade h2 {
    margin: 0;

    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}


.modal-evento-identidade .rotulo {
    margin-bottom: 3px;
}


.modal-evento-icone {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border: 1px solid var(--borda);
    border-radius: 15px;

    background: var(--azul-suave);

    font-size: 1.45rem;
}


.botao-fechar-modal {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;
    padding: 0;

    border: 1px solid var(--borda);
    border-radius: 50%;

    color: var(--texto-suave);
    background: var(--cartao-secundario);

    cursor: pointer;

    font-size: 1.45rem;
    font-weight: 300;
}


.formulario-evento {
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow-y: auto;

    padding: 24px;
}


.grupo-campos-tipo {
    display: grid;
    gap: 18px;

    margin-top: 18px;
}


.grupo-campo {
    display: grid;
    gap: 8px;
}


.grupo-campo label {
    color: var(--texto);

    font-size: 0.88rem;
    font-weight: 500;
}


.grupo-campo input,
.grupo-campo textarea,
.grupo-campo select {
    min-height: 48px;
    padding: 12px 14px;

    border: 1px solid var(--borda);
    border-radius: 13px;

    color: var(--texto);
    background: var(--campo);

    font-weight: 400;

    transition:
        border-color var(--transicao),
        box-shadow var(--transicao),
        background var(--transicao);
}


.grupo-campo textarea {
    min-height: 96px;
    line-height: 1.5;
}


.grupo-campo input::placeholder,
.grupo-campo textarea::placeholder {
    color: var(--texto-discreto);
}


.grupo-campo input:focus,
.grupo-campo textarea:focus,
.grupo-campo select:focus {
    border-color: var(--azul);

    background: #19293e;

    box-shadow:
        0 0 0 4px var(--azul-suave);

    outline: none;
}


.grupo-campo.campo-invalido input,
.grupo-campo.campo-invalido textarea,
.grupo-campo.campo-invalido select {
    border-color: var(--vermelho);

    box-shadow:
        0 0 0 4px var(--vermelho-suave);
}


.ajuda-campo {
    margin: 0;

    color: var(--texto-discreto);

    font-size: 0.77rem;
    line-height: 1.45;
}


.grade-formulario {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


.campo-com-sufixo {
    position: relative;
}


.campo-com-sufixo input {
    padding-right: 56px;
}


.campo-com-sufixo span {
    position: absolute;
    top: 50%;
    right: 14px;

    transform: translateY(-50%);

    color: var(--texto-discreto);

    font-size: 0.8rem;
    font-weight: 500;

    pointer-events: none;
}


.mensagem-formulario {
    margin-top: 18px;
    padding: 12px 14px;

    border: 1px solid var(--vermelho);
    border-radius: 12px;

    color: var(--vermelho);
    background: var(--vermelho-suave);

    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.45;
}


.mensagem-formulario.sucesso {
    border-color: var(--verde);

    color: var(--verde);
    background: var(--verde-suave);
}


.modal-evento-acoes {
    position: sticky;
    bottom: -24px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin: 24px -24px -24px;
    padding: 18px 24px;

    border-top: 1px solid var(--borda);

    background: var(--cartao);
}


.botao-cancelar,
.botao-salvar {
    min-height: 46px;
    padding: 10px 18px;

    border-radius: 13px;

    cursor: pointer;

    font-weight: 500;

    transition:
        transform var(--transicao),
        background var(--transicao),
        border-color var(--transicao);
}


.botao-cancelar {
    border: 1px solid var(--borda);

    color: var(--texto-suave);
    background: var(--cartao-secundario);
}


.botao-salvar {
    min-width: 112px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid transparent;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #36a5ef,
            #218ad2
        );

    box-shadow:
        0 10px 26px rgba(34, 145, 216, 0.22);
}


.botao-salvar:hover {
    transform: translateY(-1px);
}


.botao-salvar:disabled,
.botao-cancelar:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


.carregando-botao {
    width: 18px;
    height: 18px;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: girar 700ms linear infinite;
}


@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}


/* Notificação */

.notificacao {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 120;

    width: min(
        calc(100% - 44px),
        390px
    );

    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding: 16px 18px;

    border: 1px solid rgba(72, 212, 154, 0.34);
    border-radius: 16px;

    color: var(--texto);
    background: var(--cartao);

    box-shadow: var(--sombra-modal);

    animation: mostrar-notificacao 240ms ease;
}


@keyframes mostrar-notificacao {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.notificacao.erro {
    border-color: rgba(255, 119, 119, 0.4);
}


.notificacao-icone {
    width: 34px;
    height: 34px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #07130f;
    background: var(--verde);

    font-weight: 700;
}


.notificacao.erro .notificacao-icone {
    color: #ffffff;
    background: var(--vermelho);
}


.notificacao strong {
    display: block;

    margin-top: 1px;

    font-size: 0.92rem;
    font-weight: 500;
}


.notificacao p {
    margin: 4px 0 0;

    color: var(--texto-suave);

    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
}


/* Responsividade */

@media (max-width: 760px) {
    .container {
        width: min(
            calc(100% - 22px),
            var(--largura-maxima)
        );
    }

    .topo-conteudo {
        min-height: 68px;
    }

    .subtitulo {
        display: none;
    }

    .status-atualizacao {
        max-width: 52vw;

        overflow: hidden;
        text-overflow: ellipsis;
    }

    .conteudo {
        padding-top: 18px;
    }

    .painel {
        gap: 14px;
    }

    .cartao {
        padding: 20px;
        border-radius: 17px;
    }

    .destaque {
        min-height: 184px;
    }

    .valor-principal {
        gap: 11px;
    }

    .valor-principal strong {
        font-size: clamp(4rem, 20vw, 5.3rem);
    }

    .grade-indicadores {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .indicador {
        min-height: auto;
    }

    .grade-acoes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .botao-acao {
        min-height: 100px;
    }

    .area-grafico {
        height: 330px;
        margin-top: 16px;
    }

    .status-cartao {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .modal-evento {
        align-items: end;
        padding: 0;
    }

    .modal-evento-conteudo {
        width: 100%;
        max-height: 94vh;

        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius:
            24px 24px 0 0;
    }

    .modal-evento-cabecalho {
        padding: 18px;
    }

    .formulario-evento {
        padding: 18px;
    }

    .modal-evento-acoes {
        bottom: -18px;

        margin: 22px -18px -18px;

        padding:
            14px 18px
            calc(14px + env(safe-area-inset-bottom));
    }

    .grade-formulario {
        grid-template-columns: 1fr;
    }

    .botao-cancelar,
    .botao-salvar {
        flex: 1;
    }

    .notificacao {
        right: 12px;

        bottom:
            calc(
                12px
                + env(safe-area-inset-bottom)
            );

        width: calc(100% - 24px);
    }
}


@media (max-width: 390px) {
    .marca {
        font-size: 1.45rem;
    }

    .valor-principal strong {
        font-size: 4.1rem;
    }

    .grade-acoes {
        gap: 9px;
    }

    .botao-acao {
        min-height: 94px;
        font-size: 0.85rem;
    }

    .area-grafico {
        height: 300px;
    }
}


@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}