/* Glicolente: estilos (app/css/app.css).
   Camadas: glc-tokens (cores e medidas), glc-base (elementos), glc-components (peças da
   interface), glc-print (papel). Prefixo glc- para não se misturar com camadas de outro CSS. */
@layer glc-tokens, glc-base, glc-components, glc-print;

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../fonts/figtree-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../fonts/figtree-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer glc-tokens {
    :root {
        color-scheme: dark;
        --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --bg: #0d1218;
        --surface: #141b23;
        --surface-2: #1b2430;
        --border: #263241;
        --border-strong: #34445a;
        --text: #e7edf3;
        --text-muted: #a3b1bf;
        --text-faint: #8695a5;
        --accent: #5b9cf5;
        --accent-text: #0d1218;
        --accent-soft: rgba(91, 156, 245, .14);
        --ok: #4cc38a;
        --warn: #e8b339;
        --bad: #f2706b;
        --ok-soft: rgba(76, 195, 138, .14);
        --warn-soft: rgba(232, 179, 57, .14);
        --bad-soft: rgba(242, 112, 107, .14);
        --range-veryLow: #c0392b;
        --range-low: #e5534b;
        --range-target: #3fa66b;
        --range-high: #e8b339;
        --range-veryHigh: #ee8a3a;
        --series-2: #c39bd3;
        --radius: 10px;
        --radius-sm: 6px;
        --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    }
    [data-theme="light"] {
        color-scheme: light;
        --bg: #f4f6f8;
        --surface: #ffffff;
        --surface-2: #eef2f6;
        --border: #d5dde6;
        --border-strong: #b8c4d1;
        --text: #14202b;
        --text-muted: #46566a;
        --text-faint: #5b6b7d;
        --accent: #1f63d1;
        --accent-text: #ffffff;
        --accent-soft: rgba(31, 99, 209, .10);
        --ok: #1d7a4c;
        --warn: #8a5a00;
        --bad: #b42318;
        --ok-soft: rgba(29, 122, 76, .10);
        --warn-soft: rgba(138, 90, 0, .10);
        --bad-soft: rgba(180, 35, 24, .08);
        --range-veryLow: #8f1d14;
        --range-low: #c8322a;
        --range-target: #2a8a55;
        --range-high: #a87b00;
        --range-veryHigh: #d9731f;
        --series-2: #7d4e93;
        --shadow: 0 1px 2px rgba(15, 23, 42, .08);
    }
}

@layer glc-base {
    *, *::before, *::after { box-sizing: border-box; }
    html { font-size: 100%; -webkit-text-size-adjust: 100%; }
    body {
        margin: 0; min-height: 100vh; display: flex; flex-direction: column;
        background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3, h4, h5, p, ul, figure { margin: 0; }
    ul { padding: 0; list-style: none; }
    a { color: var(--accent); }
    button, input, select, textarea { font: inherit; color: inherit; }
    /* campos têm largura mínima própria: sem isto, texto grande ou opção longa estouram o celular */
    input, select, textarea { min-width: 0; max-width: 100%; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    code { font-size: .9em; background: var(--surface-2); padding: 0 .3em; border-radius: 4px; }
    table { border-collapse: collapse; }
    .hidden { display: none !important; }
    .num { font-variant-numeric: tabular-nums; }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation: none !important; transition: none !important; }
    }
}

@layer glc-components {
    /* ---------- Estrutura ---------- */
    .app-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--border); }
    .app-header__inner, .tabs__inner, .page { max-width: 80rem; margin: 0 auto; padding-inline: 1rem; }
    .app-header__inner { height: 3.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .brand { display: flex; align-items: center; gap: .65rem; min-width: 0; }
    .brand__logo { width: 2rem; height: 2rem; flex: none; }
    .brand > div { min-width: 0; }
    .brand__name { font-size: 1.05rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .brand__tagline { font-size: .75rem; color: var(--text-muted); }
    .header-actions { display: flex; align-items: center; gap: .5rem; }
    .tabs { position: sticky; top: 3.75rem; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--border); }
    .tabs__inner { display: flex; gap: .25rem; overflow-x: auto; }
    /* Celular: as quatro abas cabem sem rolar (sem ícone e com menos folga) */
    @media (max-width: 30rem) {
        .tabs__inner { gap: 0; padding-inline: .5rem; justify-content: space-between; }
        .tab { padding: .7rem .45rem; font-size: .85rem; }
        .tab .icon { display: none; }
    }
    .tab {
        display: inline-flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border: 0;
        border-bottom: 2px solid transparent; background: none; color: var(--text-muted);
        font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    .tab:hover { color: var(--text); }
    .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
    .icon { width: 1rem; height: 1rem; flex: none; }
    .page { flex: 1; width: 100%; padding-block: 1.5rem 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
    .stack { display: flex; flex-direction: column; gap: 1.25rem; }
    /* itens flex não encolhem abaixo do conteúdo por padrão: tabelas largas estourariam a tela */
    .page > *, .stack > * { min-width: 0; }
    .row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
    .row--end { align-items: flex-end; }
    .row--between { justify-content: space-between; }
    .fill { flex: 1 1 16rem; min-width: 0; }
    .cols { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 640px) { .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 768px) { .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) {
        .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .span-2 { grid-column: span 2; }
    }
    .app-footer { border-top: 1px solid var(--border); padding: 1.5rem 1rem; text-align: center; font-size: .75rem; color: var(--text-faint); }

    /* ---------- Cartão ---------- */
    .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); min-width: 0; }
    .card--accent { border-left: 3px solid var(--accent); }
    .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
    .card__title { font-size: 1.05rem; font-weight: 700; }
    .card__subtitle { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
    .card__foot { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: .75rem; }
    .section-title, .custom-section-title { font-size: .8rem; font-weight: 700; color: var(--text-muted); margin: 1.25rem 0 .6rem; }
    .eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }

    /* ---------- Métrica ---------- */
    .metric__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
    .metric__value { margin-top: .75rem; display: flex; align-items: baseline; gap: .3rem; }
    .metric__number { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .metric__unit { font-size: .8rem; color: var(--text-muted); }
    .metric__note { margin-top: .5rem; font-size: .78rem; color: var(--text-muted); }

    /* ---------- Selo e tons ---------- */
    .badge {
        display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px;
        font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
        border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--surface-2);
    }
    .badge.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
    .badge.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
    .badge.bad { color: var(--bad); background: var(--bad-soft); border-color: transparent; }
    .muted { color: var(--text-muted); }
    .hint { font-size: .75rem; color: var(--text-faint); line-height: 1.55; }
    .strong { font-weight: 700; }

    /* ---------- Botões ---------- */
    .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem;
        padding: .5rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
        background: var(--surface-2); color: var(--text); font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: none;
    }
    .btn:hover { border-color: var(--accent); }
    .btn:disabled { opacity: .55; cursor: not-allowed; }
    .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
    .btn--primary:hover { filter: brightness(1.08); }
    .btn--danger { background: transparent; border-color: var(--bad); color: var(--bad); }
    .btn--danger:hover { background: var(--bad-soft); }
    .btn--ghost { background: transparent; border-color: transparent; color: var(--accent); min-height: auto; padding: .2rem .3rem; }
    .btn--ghost.tone-bad { color: var(--bad); }
    .btn--sm { min-height: 2rem; padding: .3rem .7rem; font-size: .78rem; }
    .btn--block { width: 100%; }
    .btn--icon { width: 2.5rem; padding: 0; }
    .spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: glc-spin .8s linear infinite; }
    @keyframes glc-spin { to { transform: rotate(360deg); } }

    /* ---------- Campos ---------- */
    .field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
    .field__label { font-size: .72rem; font-weight: 700; color: var(--text-muted); }
    .input, .select {
        width: 100%; min-height: 2.5rem; padding: .45rem .7rem; border-radius: var(--radius-sm);
        border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font-size: .9rem;
    }
    .input:disabled { opacity: .55; }
    .input--center { text-align: center; }
    .check { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; user-select: none; }
    .check input { width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--accent); }

    /* ---------- Período e perfil ---------- */
    .segmented {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .25rem;
        border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); width: 100%; max-width: 36rem;
    }
    @media (min-width: 640px) { .segmented { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
    .segmented.segmented--inline { grid-template-columns: repeat(3, auto); width: auto; }
    .segmented__btn { padding: .45rem .3rem; border: 0; border-radius: 4px; background: transparent; color: var(--text-muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
    .segmented__btn:hover { color: var(--text); }
    .segmented__btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
    .segmented--inline .segmented__btn { padding: .3rem .7rem; }
    .profile-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
    .profile-source { flex-basis: 100%; font-size: .72rem; color: var(--text-faint); }
    .date-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }

    /* ---------- Lista chave-valor ---------- */
    .kv { display: flex; flex-direction: column; }
    .kv__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
    .kv__row:last-child { border-bottom: 0; }
    .kv__key { color: var(--text-muted); }
    .kv__val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
    .kv__val--keep { white-space: nowrap; }
    .kv__sub { display: block; margin-top: .15rem; font-size: .75rem; color: var(--text-faint); }
    .btn-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
    .btn-link:hover { color: var(--text); }
    .iob-curve { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
    .iob-curve legend { padding: 0 .25rem; }
    .iob-curve .check { align-items: flex-start; }
    .iob-curve .check input { margin-top: .1rem; }

    /* ---------- Legendas e faixas ---------- */
    .legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; font-size: .75rem; color: var(--text-muted); }
    .legend__item { display: inline-flex; align-items: center; gap: .35rem; }
    .swatch { width: .75rem; height: .75rem; border-radius: 3px; flex: none; background: var(--swatch, var(--text-faint)); }
    .swatch--line { width: 1rem; height: 3px; border-radius: 2px; }
    .swatch--band { opacity: .45; }
    .swatch--faint { opacity: .2; }
    .swatch--area { background: color-mix(in srgb, var(--swatch) 30%, transparent); border-top: 2px solid var(--swatch); border-radius: 2px; }
    .swatch--dashed { background: none; border-top: 2px dashed var(--swatch); height: 0; width: 1rem; }
    .swatch--bolus { background: var(--accent); border-radius: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
    .swatch--dot { border-radius: 50%; }
    .swatch--carbs { background: var(--surface); border: 2px solid var(--text); border-radius: 50%; }
    .r-veryLow { --swatch: var(--range-veryLow); }
    .r-low { --swatch: var(--range-low); }
    .r-target { --swatch: var(--range-target); }
    .r-high { --swatch: var(--range-high); }
    .r-veryHigh { --swatch: var(--range-veryHigh); }
    .r-accent { --swatch: var(--accent); }
    .range-list { display: flex; flex-direction: column; gap: .45rem; font-size: .85rem; border-top: 1px solid var(--border); padding-top: .9rem; margin-top: .75rem; }
    .range-list__row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
    .range-list__val { font-weight: 700; font-variant-numeric: tabular-nums; }

    /* ---------- Gráficos ---------- */
    .chart { position: relative; width: 100%; height: 16rem; }
    .chart--sm { height: 7.5rem; }
    .chart--agp { height: 19rem; }
    /* Diário */
    .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
    .daily-ranges { display: flex; height: .75rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
    .daily-ranges span { height: 100%; }
    .daily-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
    .daily-grid__head { font-size: .7rem; font-weight: 700; color: var(--text-muted); text-align: center; text-transform: uppercase; }
    .daily-cell { display: flex; flex-direction: column; gap: .15rem; padding: .3rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
    .daily-cell:hover { border-color: var(--accent); }
    .daily-cell[aria-current="date"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
    .daily-cell--empty { cursor: default; opacity: .5; }
    .daily-cell__date { font-size: .7rem; font-weight: 700; }
    .daily-cell__tir { font-size: .65rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .daily-cell canvas { width: 100%; height: 2.5rem; display: block; }
    .daily-cell--hypo { border-color: var(--range-veryLow); }
    .daily-cell__hypo { color: var(--range-veryLow); }
    /* Anexo da impressão: desenhado fora da tela com a largura do papel (os gráficos já saem com tamanho) */
    .paper-offscreen { position: absolute; left: -10000px; top: 0; width: 190mm; }
    /* Diário: os dias do período, um embaixo do outro */
    .daily-layers { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; border: 0; padding: 0; margin: .75rem 0 0; }
    .daily-layers legend { float: left; margin-right: .25rem; }
    .daily-layers .check { gap: .35rem; }
    .day-row { scroll-margin-top: 4.5rem; }
    /* Carregando (Relatório e Diário): o cartão de progresso fica no alto, e o resto da aba, apagado
       por baixo; o cabeçalho e a barra de período continuam normais */
    .loading-card { display: flex; align-items: center; gap: 1rem; position: sticky; top: 4.5rem; z-index: 5; box-shadow: 0 6px 24px rgb(0 0 0 / .18); }
    .loading-card.hidden { display: none; }
    .loading-card__text { flex: 1; min-width: 0; }
    .loading-card .progress { width: 100%; margin-top: .4rem; }
    [aria-busy="true"] > :not(.report-head):not(.period-card):not(.loading-card) { opacity: .35; pointer-events: none; }
    .day-row__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
    .day-row__body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem; margin-top: .5rem; }
    .chart--dayfull { height: 17rem; }
    .day-row__stats .kv__row { padding: .2rem 0; font-size: .82rem; }
    .day-row__stats h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: .6rem 0 .1rem; }
    .day-row__events { margin-top: .5rem; }
    .day-row__events summary { cursor: pointer; font-size: .85rem; color: var(--text-muted); }
    .split-bar { display: flex; height: .55rem; border-radius: 999px; overflow: hidden; background: var(--border); }
    .split-bar span { display: block; height: 100%; }
    @media (max-width: 760px) {
        .day-row__body { grid-template-columns: minmax(0, 1fr); }
        .chart--dayfull { height: 15rem; }
    }
    .print-dialog-reason { color: var(--text-muted); font-size: .78rem; }
    .chart--day { height: 17rem; }
    .chart--donut { height: 12rem; display: flex; align-items: center; justify-content: center; }
    .chart--donut canvas { max-width: 11rem; max-height: 11rem; }

    /* ---------- Mapa de calor ---------- */
    .heatmap-wrap { overflow-x: auto; margin-top: 1rem; }
    .heatmap { min-width: 46rem; display: flex; flex-direction: column; gap: 3px; }
    .heatmap__row { display: grid; grid-template-columns: 3rem repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
    .heatmap__day, .heatmap__hour { font-size: .68rem; font-weight: 700; color: var(--text-muted); text-align: center; }
    .heatmap__day { text-align: left; text-transform: uppercase; }
    .heat {
        height: 1.9rem; border-radius: 4px; display: flex; align-items: center; justify-content: center;
        font-size: .62rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); overflow: hidden;
        background: color-mix(in srgb, var(--heat, var(--text-faint)) 30%, transparent);
        border: 1px solid color-mix(in srgb, var(--heat, var(--text-faint)) 60%, transparent);
    }
    .heat--none { --heat: var(--border); color: var(--text-faint); background: transparent; }
    .heat--veryLow { --heat: var(--range-veryLow); }
    .heat--low { --heat: var(--range-low); }
    .heat--target { --heat: var(--range-target); }
    .heat--high { --heat: var(--range-high); }
    .heat--veryHigh { --heat: var(--range-veryHigh); }
    .heat--small { font-size: .55rem; letter-spacing: -.02em; }

    /* ---------- Análises ---------- */
    .insights { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
    @media (min-width: 768px) { .insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .insights__col { background: var(--surface-2); border-radius: var(--radius-sm); padding: 1rem; }
    .insights__list { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; font-size: .85rem; }
    .insight { position: relative; padding-left: 1.1rem; }
    .insight__mark { position: absolute; left: 0; top: 0; font-weight: 700; }

    /* ---------- Tabelas (as classes custom-* também são a API dos relatórios extras) ---------- */
    .custom-table-wrap { overflow-x: auto; }
    .table, .custom-table { width: 100%; font-size: .82rem; text-align: left; }
    .table th, .custom-table th { padding: .55rem .7rem; font-size: .7rem; font-weight: 700; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
    .table td, .custom-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--border); }
    .table .num, .custom-table .num { text-align: right; font-variant-numeric: tabular-nums; }
    .empty-cell { text-align: center; color: var(--text-faint); font-style: italic; padding: 1.25rem .5rem; }
    .custom-empty { color: var(--text-faint); font-style: italic; padding: 1rem 0; font-size: .85rem; }
    .insulin-muted td, .dist-partial td { color: var(--text-faint); font-style: italic; }
    .insulin-average td, .dist-all td { font-weight: 700; border-top: 1px solid var(--border-strong); }

    /* ---------- Relatórios extras e blocos de estatística ---------- */
    .custom-report-header { position: relative; }
    .custom-report-error { color: var(--bad); font-size: .8rem; }
    .custom-chart { position: relative; width: 100%; height: 16rem; }
    .custom-chart.tall { height: 20rem; }
    .custom-stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
    .custom-stat { padding: .75rem .9rem; border-radius: var(--radius-sm); background: var(--surface-2); }
    .custom-stat-label { font-size: .7rem; font-weight: 700; color: var(--text-muted); }
    .custom-stat-value { font-size: 1.35rem; font-weight: 800; margin-top: .2rem; font-variant-numeric: tabular-nums; }
    .custom-stat-hint { font-size: .72rem; color: var(--text-faint); margin-top: .1rem; }
    .custom-stat.tone-good .custom-stat-value { color: var(--ok); }
    .custom-stat.tone-warn .custom-stat-value { color: var(--warn); }
    .custom-stat.tone-bad .custom-stat-value { color: var(--bad); }
    .custom-good { color: var(--ok); font-weight: 700; }
    .custom-warn { color: var(--warn); font-weight: 700; }
    .custom-bad, .custom-level2 { color: var(--bad); font-weight: 700; }
    .events-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 1024px) { .events-grid { grid-template-columns: 3fr 2fr; } }
    .events-grid > * { min-width: 0; }
    .events-crit { font-size: .72rem; color: var(--text-muted); }
    .data-insufficient { color: var(--warn) !important; }

    /* ---------- Avisos e estados ---------- */
    .notice { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--bad); background: var(--bad-soft); color: var(--text); font-size: .85rem; }
    .notice.info { border-color: var(--accent); background: var(--accent-soft); }
    .notice.ok { border-color: var(--ok); background: var(--ok-soft); }
    .notice.warn { border-color: var(--warn); background: var(--warn-soft); }
    .notice p { flex: 1; }
    .notice__close { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 .25rem; opacity: .75; }
    .notice__close:hover { opacity: 1; }
    .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .6rem; min-height: 18rem; }
    .empty-state .icon { width: 3rem; height: 3rem; color: var(--accent); }
    .empty-state--compact { min-height: 0; }
    .led { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--text-faint); flex: none; }
    .led.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
    .led.wait { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
    .led.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
    .led.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }

    /* ---------- Menus do cabeçalho (conexão e status; alarmes) ---------- */
    .menu { position: relative; }
    .menu__panel {
        position: absolute; right: 0; top: calc(100% + .5rem); width: min(24rem, calc(100vw - 2rem)); z-index: 50;
        background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 1.1rem;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: .85rem;
        max-height: calc(100vh - 5rem); overflow-y: auto;
    }
    #conn-label { white-space: nowrap; }
    .stack--tight { gap: .75rem; }
    .health { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
    #check-summary:empty { display: none; }
    #check-summary .diag-line { margin: 0 0 .4rem; }
    .menu__panel--wide { width: min(28rem, calc(100vw - 2rem)); }
    .disclosure > summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--text-muted); }
    .disclosure > summary:hover { color: var(--text); }
    /* Sem conexão o formulário é o painel inteiro: sem o "Trocar de Nightscout" para abrir */
    .conn-form:not(.conn-form--collapsible) > summary { display: none; }
    .conn-form:not(.conn-form--collapsible) > .stack { margin-top: 0; }
    .conn-form--collapsible .conn-form__title { display: none; }
    .plain-list { display: flex; flex-direction: column; gap: .45rem; padding-left: 1.1rem; list-style: disc; font-size: .8rem; color: var(--text-muted); }
    /* Sino: apagado (desligados), aceso, cortado (sem som), vermelho pulsando (alarme agora) */
    .alarm { color: var(--text-faint); }
    .alarm .alarm__slash { display: none; }
    .alarm--on { color: var(--accent); }
    .alarm--muted .alarm__slash { display: inline; }
    .alarm--alert { color: var(--bad); border-color: var(--bad); animation: glc-pulse 1.2s ease-in-out infinite; }

    /* ---------- Interruptor ---------- */
    .switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; position: relative; }
    .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .switch__track { width: 2.6rem; height: 1.45rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); position: relative; flex: none; }
    .switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--text-faint); transition: transform .15s; }
    .switch input:checked + .switch__track { background: var(--accent); border-color: var(--accent); }
    .switch input:checked + .switch__track::after { transform: translateX(1.15rem); background: var(--accent-text); }
    .switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
    .switch__label { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--text-muted); }
    .switch__label.on { color: var(--ok); }

    /* ---------- Status ---------- */
    .sgv-ring {
        width: 7rem; height: 7rem; flex: none; border-radius: 50%; border: 5px solid var(--ring, var(--border-strong));
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: color-mix(in srgb, var(--ring, transparent) 10%, transparent);
    }
    .sgv-ring__value { font-size: 2.3rem; font-weight: 800; line-height: 1; color: var(--ring, var(--text-muted)); font-variant-numeric: tabular-nums; }
    .sgv-ring.range-veryLow { --ring: var(--range-veryLow); }
    .sgv-ring.range-low { --ring: var(--range-low); }
    .sgv-ring.range-target { --ring: var(--range-target); }
    .sgv-ring.range-high { --ring: var(--range-high); }
    .sgv-ring.range-veryHigh { --ring: var(--range-veryHigh); }
    /* Tela larga: glicose e lista à esquerda, gráfico à direita, na mesma altura */
    .live-top { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
    /* A lista é de nomes curtos e números: largura fixa e o gráfico fica com o resto */
    @media (min-width: 768px) { .live-top { grid-template-columns: 20rem minmax(0, 1fr); } }
    @media (min-width: 1024px) { .live-top { grid-template-columns: 23rem minmax(0, 1fr); } }
    .live-chart { display: flex; flex-direction: column; }
    .live-chart .chart { flex: 1; min-height: 14.5rem; }
    /* o canvas acompanha a caixa sem ditar a altura dela: senão, depois que o card ao lado cresce e
       volta, o gráfico fica com a altura maior e segura a linha toda */
    .live-chart .chart > canvas { position: absolute; inset: 0; }
    .chart-head { align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
    /* Insulina dos bolus: faixa baixa embaixo da glicose, só para ver o formato das curvas */
    .insulin-panel { margin-top: .5rem; }
    .insulin-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
    .insulin-legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .75rem; color: var(--text-muted); }
    .live-chart .chart--insulin { flex: none; min-height: 0; height: 4rem; }
    .now-head { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin: .75rem 0 .25rem; }
    .now-trend { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
    #bg-advice { text-align: center; }
    #bg-advice:empty { display: none; }
    /* Tendência: o que o paciente mais olha depois do valor. Selo grande na cor da velocidade */
    .trend { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
    .trend__arrow {
        width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.9rem; line-height: 1; background: color-mix(in srgb, currentColor 15%, transparent);
    }
    .trend__arrow:empty { display: none; }
    .trend__label { font-size: 1.05rem; }
    .diag-overview { font-size: .82rem; max-height: 11rem; overflow-y: auto; }
    .diag-line { border-left: 3px solid var(--accent); padding: .25rem .6rem; margin: .4rem 0; }
    .diag-line.ok { border-color: var(--ok); }
    .diag-line.warn { border-color: var(--warn); }
    .diag-line.bad { border-color: var(--bad); }
    .tiles { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    /* Os quatro números do "Hoje" numa linha só quando o card comporta "108 mg/dL" sem quebrar */
    .today-card { container-type: inline-size; }
    .tiles.tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @container (min-width: 34rem) { .tiles.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .tile { background: var(--surface-2); border-radius: var(--radius-sm); padding: .75rem; text-align: center; display: flex; flex-direction: column; gap: .2rem; }
    .tile__label { font-size: .7rem; font-weight: 700; color: var(--text-muted); }
    .tile__value { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
    .list { display: flex; flex-direction: column; }
    .list__sub { font-size: .72rem; color: var(--text-faint); }

    /* ---------- Contador de carboidratos ---------- */
    .carb-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
    @media (min-width: 1024px) { .carb-layout { grid-template-columns: 5fr 7fr; } }
    .panel { background: var(--surface-2); border-radius: var(--radius-sm); padding: .9rem; display: flex; flex-direction: column; gap: .75rem; }
    .totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    @media (min-width: 520px) { .totals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .meal-list { max-height: 10rem; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .meal-item { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--border); font-size: .82rem; }
    .meal-item:last-child { border-bottom: 0; }
    .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); font-size: .75rem; cursor: pointer; color: var(--text); }
    .chip__remove { border: 0; background: none; color: var(--bad); cursor: pointer; padding: 0 .1rem; }

    /* ---------- Janela de impressão ---------- */
    .print-dialog { margin: auto; width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: 0 24px 48px rgba(0, 0, 0, .45); }
    .print-dialog::backdrop { background: rgba(0, 0, 0, .55); }
    .print-dialog form { display: flex; flex-direction: column; gap: .9rem; }
    .print-dialog-hint { font-size: .72rem; color: var(--text-faint); margin-top: -.5rem; }
    .print-dialog-sections { border: 0; padding: 0; margin: 0; }
    .print-dialog-sections legend { font-size: .72rem; font-weight: 700; color: var(--text-muted); margin-bottom: .4rem; }
    .print-dialog-bulk { display: flex; gap: 1rem; margin-bottom: .5rem; }
    .print-dialog-check { display: flex; align-items: center; gap: .6rem; font-size: .85rem; padding: .25rem 0; cursor: pointer; }
    .print-dialog-check input { width: 1rem; height: 1rem; accent-color: var(--accent); flex: none; }
    .print-dialog-error { font-size: .8rem; color: var(--bad); min-height: 1em; }
    .print-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; }

    /* ---------- Carregamento ---------- */
    .progress { width: 14rem; max-width: 100%; height: .5rem; appearance: none; border: 0; border-radius: 999px; background: var(--border); overflow: hidden; }
    .progress::-webkit-progress-bar { background: var(--border); border-radius: 999px; }
    .progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width .2s; }
    .progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

    /* ---------- Conexão lembrada: esqueleto do Tempo real (aba inicial) até reconectar. O Relatório e o
       Diário mostram o cartão de carregamento (js/ui/loading.js), sem pulsar ---------- */
    body.conn-remembered:not(.app-ready) #welcome { display: none !important; }
    body.conn-remembered:not(.app-ready) #page-live { display: flex !important; }
    body.conn-remembered:not(.app-ready) #page-live .card { animation: glc-pulse 1.4s ease-in-out infinite; }
    @keyframes glc-pulse { 50% { opacity: .55; } }
    /* sem relatório (ainda não carregou, sem leituras): só o cabeçalho, o período e o cartão de carregamento */
    #page-report.no-data > :not(#period-bar):not(.report-head):not(.loading-card) { display: none !important; }

    /* ---------- Só no papel ---------- */
    .print-only { display: none; }
    .notes-lines { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.25rem; }
    .notes-lines span { display: block; height: 1.6rem; border-bottom: 1px dashed var(--border-strong); }
    .signature { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; font-size: .75rem; color: var(--text-muted); }

    /* ---------- Utilitários ---------- */
    .mt { margin-top: .75rem; }
    .select--auto { width: auto; }
    .span-all { grid-column: 1 / -1; }
    .row--right { justify-content: flex-end; }
    .heatmap__body { display: flex; flex-direction: column; gap: 3px; }
    .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
    .flash { outline: 2px solid var(--ok); outline-offset: 4px; border-radius: var(--radius-sm); }

    /* ---------- Página de limpeza (limpeza.html) ---------- */
    .cleanup-main { max-width: 64rem; }
    .cleanup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
    .cleanup-back { white-space: nowrap; }
    .cleanup-threshold { width: 6rem; }
    .cleanup-day { flex-wrap: nowrap; }
    .cleanup-day .input { width: auto; }
    .cleanup-status { font-size: .85rem; margin-top: .75rem; min-height: 1em; }
    .cleanup-status.ok { color: var(--ok); }
    .cleanup-status.error { color: var(--bad); }
    .cleanup-status.warn { color: var(--warn); }
    .cleanup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
    .cleanup-actions .cleanup-status { margin-top: 0; }
    .cleanup-table input[type=checkbox] { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--bad); }
    .cleanup-table .cleanup-episode td { font-weight: 700; }
    .cleanup-table .cleanup-reading td { font-size: .78rem; color: var(--text-muted); }
    .cleanup-table .cleanup-neighbor td { font-style: italic; color: var(--text-faint); }
    .cleanup-tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: 4px; background: var(--warn-soft); color: var(--warn); }
    .cleanup-toggle { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: .78rem; font-weight: 700; padding: 0; }
    @media (max-width: 520px) { .cleanup-head { flex-direction: column; } }

    /* ---------- Tons (por último: vencem as cores de .hint, .empty-cell, .muted...) ---------- */
    .tone-ok { color: var(--ok); }
    .tone-warn { color: var(--warn); }
    .tone-bad { color: var(--bad); }
    .tone-muted { color: var(--text-muted); }
    .tone-accent { color: var(--accent); }

    /* ---------- Ícones do tema ---------- */
    [data-theme="light"] .icon-moon, body:not([data-theme="light"]) .icon-sun { display: none; }

    @media (max-width: 520px) {
        .conn-label__detail { display: none; }
        .brand__tagline { display: none; }
        .brand__name { font-size: .95rem; }
        /* no celular o painel ocupa a largura da tela (o botão não fica na borda direita) */
        .menu__panel { position: fixed; top: 4.25rem; left: 1rem; right: 1rem; width: auto; max-height: calc(100vh - 5rem); overflow-y: auto; }
    }
}

@layer glc-print {
    @media print {
        @page { size: A4 portrait; margin: 12mm 8mm 8mm; }
        * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        html { font-size: 12px; }
        body { background: #fff !important; }
        .screen-only, .app-header, .tabs, .app-footer, #page-live, #page-careportal, #welcome { display: none !important; }
        .print-only { display: block; }
        .page { padding: 0; max-width: none; gap: 3mm; }
        #page-report { gap: 3mm; }
        .card { box-shadow: none; padding: 8px; break-inside: avoid; }
        .cols { gap: 3mm; }
        .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .span-2 { grid-column: span 2; }
        .metric__number { font-size: 1.6rem; }
        .chart { height: 125px; }
        .chart--agp { height: 230px; }
        .daily-cell { break-inside: avoid; padding: 2px; }
        .daily-cell canvas { height: 45px; }
        .daily-grid--report { gap: 2px; }
        .daily-grid--report .daily-cell canvas { height: 34px; }
        .daily-grid--report .daily-cell__tir { font-size: 7px; }
        .paper-offscreen { position: static; width: auto; }
        #print-days { break-before: page; }
        /* um dia por cartão, dois a três por página (Diário e anexo do relatório) */
        .day-row { break-inside: avoid; margin-bottom: 3mm; padding: 6px; }
        .day-row__body { grid-template-columns: minmax(0, 1fr) 150px; gap: 6px; margin-top: 2px; }
        .chart--dayfull { height: 190px; }
        .day-row__events { display: none; }
        .day-row .hint { font-size: 8px; margin: 0; }
        .day-row__stats .daily-ranges { height: 6px; }
        .day-row__stats .split-bar { height: 5px; margin-top: 2px; }
        .day-row__stats h4 { font-size: 7px; margin: 3px 0 0; }
        .day-row__stats .kv { margin-top: 2px; }
        .day-row__stats .kv__row { padding: 0; font-size: 7.5px; gap: 4px; }
        #daily-layers { display: none; }
        .chart--day { height: 150px; }
        .chart--donut { height: 130px; }
        .chart--donut canvas { max-width: 120px; max-height: 120px; }
        /* O gráfico ocupa a caixa (a altura vem de .chart/.custom-chart). !important: o Chart.js põe
           largura e altura fixas no estilo do próprio canvas. */
        .chart canvas, .custom-chart canvas { width: 100% !important; height: 100% !important; max-height: 100% !important; }
        .chart--donut canvas { width: 120px !important; height: 120px !important; }
        .heatmap-wrap { overflow: visible; }
        .heatmap { min-width: 0; gap: 2px; }
        .heatmap__row { gap: 2px; grid-template-columns: 2rem repeat(24, minmax(0, 1fr)); }
        .heat { height: 18px; font-size: 7px; }
        .heatmap__day, .heatmap__hour { font-size: 7px; }
        .heatmap__body { gap: 2px; }
        .table td, .table th, .custom-table td, .custom-table th { padding: 3px 6px; }
        .custom-table tr, .custom-stat, .custom-chart { break-inside: avoid; }
        .custom-report-header { break-after: avoid; }
        .print-excluded { display: none !important; }
        .print-solo { grid-column: 1 / -1 !important; }
        #paper-notes { margin-top: 12mm; }
        #insulin .custom-chart { height: 200px; }
        #hourly .custom-chart { height: 240px; }
        #events .custom-chart { height: 150px; }
        .profile-row, .date-range { display: none; }
        .report-print-head { border-bottom: 2px solid var(--border-strong); padding-bottom: 2mm; margin-bottom: 2mm; }
    }
}