/* ============================================================================
   Glicose capilar no app do paciente (27/09/2026). Folha própria, carregada por
   js/glicose-app.js SÓ quando a glicose está ativa para o paciente: quem não
   acompanha glicose não paga um byte a mais no boot.

   Mesmo desenho da tela de Treinos (cartão escuro no topo, formulário em cartão,
   lista embaixo) e as mesmas cores do produto por variável (--brand-*, --card,
   --text, --border). Alvo de toque mínimo de 44px em tudo que recebe o dedo;
   nada com largura fixa, para a rolagem lateral ficar em zero de 320 a 1920.
   08/10/2026 (achado do dono: Glicose maior que o Diario): a pagina usa a ESCALA e o
   cartao do app (numero de indicador 28 px, titulo de cartao 1.05rem, valor 15.2 px,
   cartao com 20 px de recheio e raio 14), sem tamanho proprio.
   ============================================================================ */

.gla-wrap { display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; min-width: 0; }
.gla-wrap *, .gla-home * { box-sizing: border-box; }

/* Cartão do topo: a última medição é o número que importa. Os textos dele são
   <div>, não <p>: a folha do app pinta todo `.main-content p` de #1e293b no tema
   claro, o que deixava a frase escura sobre o fundo escuro (medido em 27/09). */
.gla-hero {
    position: relative; overflow: hidden;
    border-radius: 14px; padding: 20px;
    background: linear-gradient(150deg, var(--brand-primary-darker, #0c2a21) 0%, var(--brand-primary-dark, #123c30) 60%, var(--brand-primary-dark, #123c30) 100%);
    color: #fff;
}
.gla-hero::after {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 170px; height: 170px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.gla-hero-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gla-hero-rotulo {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700;
    background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 4px 10px;
}
.gla-hero-meta {
    margin-left: auto; font-size: 11.5px; font-weight: 700; white-space: nowrap;
    background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 4px 10px;
}
.gla-hero-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 10px 0 0; }
.gla-hero-num strong { font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gla-hero-num span { font-size: 14px; font-weight: 700; opacity: .92; }
.gla-hero-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.45; opacity: .92; overflow-wrap: anywhere; }
.gla-hero-sub b { font-weight: 800; }
.gla-hero-vazio { margin: 10px 0 0; font-size: 14px; line-height: 1.5; opacity: .95; }

/* Selo de classificação: cor pela severidade derivada no servidor. */
.gla-selo {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 800; line-height: 1.2;
    border-radius: 999px; padding: 4px 10px; white-space: nowrap;
    border: 1px solid transparent;
}
.gla-hero .gla-selo { background: rgba(255, 255, 255, .92); }
.gla-selo--normal  { color: var(--brand-primary-dark, #123c30); background: var(--brand-tint, #f1f5f9); border-color: var(--brand-pastel, #87C9B7); }
.gla-selo--atencao { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.gla-selo--alerta  { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
.gla-selo--critico { color: #fff; background: #991b1b; border-color: #991b1b; }
.gla-hero .gla-selo--critico { background: #991b1b; color: #fff; }

/* Formulário. */
.gla-form {
    display: flex; flex-direction: column; gap: 8px;
    padding: 20px; border-radius: 14px;
    background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0);
}
.gla-h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text, #0f172a); }
.gla-lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-muted, #475569); margin-top: 6px; }
.gla-input {
    width: 100%; min-width: 0; min-height: 46px;
    font-size: 16px; font-family: inherit;       /* 16px: abaixo disso o iOS dá zoom ao focar */
    padding: 10px 12px; border-radius: 11px;
    border: 1px solid var(--border, #cbd5e1); background: var(--card, #fff); color: var(--text, #0f172a);
}
.gla-input:focus { outline: 2px solid var(--brand-primary, #1d5c47); outline-offset: 1px; border-color: var(--brand-primary, #1d5c47); }
textarea.gla-input { resize: vertical; min-height: 64px; }
/* 27/09/2026 (responsividade, item 12): de 1024 em diante a regra geral do app
   (body .app-section input[type=...], peso 0,2,2) derrubava data, hora e
   observação para 14,5 px, e o iPad deitado dá zoom ao focar. */
body .app-section .gla-form .gla-input { font-size: 16px; }
.gla-input[aria-invalid="true"] { border-color: #b91c1c; }

.gla-valor { display: flex; align-items: center; gap: 10px; }
/* Seletor longo de propósito: a folha do app trava todo input em max-width:100%
   com input:not(...):not(...):not(...), que pesa (0,3,1). */
.gla-form .gla-valor input.gla-input[type="number"] { font-size: 18px; font-weight: 800; letter-spacing: -.01em; max-width: 170px; text-align: center; font-variant-numeric: tabular-nums; }
.gla-valor-un { font-size: 15px; font-weight: 700; color: var(--text-muted, #475569); }

/* Chips de momento: rádio escondido, rótulo inteiro é o alvo de toque. */
.gla-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.gla-chips--tempo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gla-chip { position: relative; display: block; min-width: 0; }
.gla-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gla-chip span {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 44px; padding: 8px 10px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--border, #cbd5e1); background: var(--card, #fff);
    color: var(--text-secondary, #475569); font-size: 13.5px; font-weight: 700; line-height: 1.25;
}
.gla-chip input:checked + span { background: var(--brand-primary, #1d5c47); border-color: var(--brand-primary, #1d5c47); color: #fff; }
.gla-chip input:focus-visible + span { outline: 2px solid var(--brand-primary, #1d5c47); outline-offset: 2px; }
.gla-tempo[hidden] { display: none !important; }

.gla-quando { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 8px; }

.gla-erro { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: #b91c1c; }
.gla-erro:empty { display: none; }

.gla-enviar {
    margin-top: 8px; min-height: 50px; width: 100%;
    border: none; border-radius: 13px; cursor: pointer;
    background: linear-gradient(135deg, var(--brand-primary, #1d5c47), var(--brand-primary-dark, #123c30)); color: #fff;
    font-size: 15px; font-weight: 800; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.gla-enviar:disabled { opacity: .7; cursor: wait; }
.gla-enviar:active { transform: scale(.985); }

/* Resultado depois de gravar. */
.gla-resultado {
    display: flex; flex-direction: column; gap: 4px;
    padding: 11px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45;
    background: var(--brand-tint, #f1f5f9); color: var(--text, #0f172a); border: 1px solid var(--border, #e2e8f0);
}
.gla-resultado[hidden] { display: none !important; }
.gla-resultado strong { font-size: 14.5px; }
.gla-resultado--alerta, .gla-resultado--critico { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.gla-resultado--atencao { background: #fffbeb; border-color: #fcd34d; color: #78350f; }

/* Histórico. */
.gla-secao { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gla-secao-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gla-secao-info { font-size: 12px; color: var(--text-muted, #64748b); white-space: nowrap; }
.gla-nota { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-muted, #64748b); }
.gla-vazio {
    padding: 16px 12px; text-align: center; border-radius: 12px;
    background: var(--bg, #f8fafc); color: var(--text-muted, #64748b); font-size: 13px; line-height: 1.5;
}

.gla-grafico {
    padding: 10px 12px 8px; border-radius: 14px;
    background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0);
}
.gla-grafico svg { display: block; width: 100%; height: 96px; overflow: visible; }
.gla-grafico-leg { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--text-muted, #64748b); }
.gla-g-linha { stroke: var(--brand-primary, #1d5c47); }
.gla-g-ref { stroke: #b91c1c; stroke-dasharray: 4 4; opacity: .55; }
.gla-g-pt--normal { stroke: var(--brand-primary, #1d5c47); }
.gla-g-pt--atencao { stroke: #d97706; }
.gla-g-pt--alerta { stroke: #dc2626; }
.gla-g-pt--critico { stroke: #7f1d1d; }

.gla-lista { display: flex; flex-direction: column; gap: 7px; }
/* Grade: valor | texto | selo. Em tela estreita o selo desce para baixo do texto,
   senão "Hipoglicemia crítica" espreme a data em duas linhas (medido em 320). */
.gla-item {
    display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 4px 11px; min-width: 0;
    padding: 9px 11px; border-radius: 12px;
    background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0);
}
.gla-item-val {
    flex: none; width: 58px; min-height: 46px; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--bg, #f8fafc); color: var(--text, #0f172a);
}
.gla-item-val b { font-size: 15.2px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.gla-item-val i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--text-muted, #64748b); margin-top: 2px; }
.gla-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 420px) {
    .gla-item { grid-template-columns: 58px minmax(0, 1fr); }
    .gla-item-val { grid-row: span 2; }
    .gla-item .gla-selo { grid-column: 2; justify-self: start; }
}
.gla-item-txt strong { font-size: 13.5px; color: var(--text, #0f172a); overflow-wrap: anywhere; }
.gla-item-txt span { font-size: 12px; color: var(--text-muted, #64748b); overflow-wrap: anywhere; }
.gla-item .gla-selo { flex: none; }
.gla-oculto { display: flex; flex-direction: column; gap: 7px; }
.gla-oculto[hidden] { display: none !important; }
.gla-mais {
    width: 100%; min-height: 44px; margin-top: 2px;
    border: 1px solid var(--border, #e2e8f0); border-radius: 11px; cursor: pointer;
    background: var(--card, #fff); color: var(--text-secondary, #475569);
    font-family: inherit; font-size: 13px; font-weight: 700;
}

/* Cartão da tela inicial: um toque leva ao formulário. */
.gla-home {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
    padding: 6px 10px 6px 14px; border-radius: 14px;
    background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0);
}
.gla-home[hidden] { display: none !important; }
.gla-home-ico {
    flex: none; width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-tint, #f1f5f9); color: var(--brand-primary, #1d5c47); font-size: 18px;
}
.gla-home-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gla-home-txt strong { font-size: 14px; color: var(--text, #0f172a); }
.gla-home-txt span { font-size: 12.5px; color: var(--text-muted, #64748b); overflow-wrap: anywhere; }
.gla-home-btn {
    flex: none; min-height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer;
    border: 0; background: var(--brand-primary, #1d5c47); color: #fff;
    font-family: inherit; font-size: 13.5px; font-weight: 800;
}

/* Telas estreitas: data e hora empilham; o atalho da inicial permanece compacto. */
@media (max-width: 360px) {
    .gla-quando { grid-template-columns: 1fr; }
    .gla-chips { grid-template-columns: 1fr 1fr; }
    .gla-hero-num strong { font-size: 34px; }
}

/* Duas colunas no tablet e no computador: formulário à esquerda, histórico à direita. */
@media (min-width: 900px) {
    .gla-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 16px 20px; }
    .gla-hero { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .gla-enviar:active { transform: none; }
}

/* Tema escuro: película translúcida no lugar das tintas claras. */
html.theme-dark .gla-selo--normal { background: rgba(135, 201, 183, .16); color: var(--brand-pastel, #87C9B7); border-color: rgba(135, 201, 183, .4); }
html.theme-dark .gla-selo--atencao { background: rgba(252, 211, 77, .14); color: #fcd34d; border-color: rgba(252, 211, 77, .4); }
html.theme-dark .gla-selo--alerta { background: rgba(248, 113, 113, .14); color: #fca5a5; border-color: rgba(248, 113, 113, .4); }
html.theme-dark .gla-hero .gla-selo--normal { background: rgba(255, 255, 255, .92); color: #123c30; }
html.theme-dark .gla-hero .gla-selo--atencao { background: #fffbeb; color: #92400e; }
html.theme-dark .gla-hero .gla-selo--alerta { background: #fef2f2; color: #991b1b; }
html.theme-dark .gla-chip input:checked + span { background: var(--brand-pastel, #87C9B7); border-color: var(--brand-pastel, #87C9B7); color: #162823; }
html.theme-dark .gla-resultado { background: rgba(135, 201, 183, .1); }
html.theme-dark .gla-resultado--alerta, html.theme-dark .gla-resultado--critico { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .4); color: #fecaca; }
html.theme-dark .gla-resultado--atencao { background: rgba(252, 211, 77, .1); border-color: rgba(252, 211, 77, .4); color: #fde68a; }
html.theme-dark .gla-home-ico { background: rgba(135, 201, 183, .14); color: var(--brand-pastel, #87C9B7); }
html.theme-dark .gla-home-btn { background: var(--brand-pastel, #87C9B7); color: #162823; }
html.theme-dark .gla-g-linha { stroke: var(--brand-pastel, #87C9B7); }
html.theme-dark .gla-g-pt--normal { stroke: var(--brand-pastel, #87C9B7); }
html.theme-dark .gla-erro { color: #fca5a5; }

/* A cor sinaliza ausência de registro por sete dias; não classifica a medição. */
.gla-home--atrasada { border-color: #dc2626; background: #fff1f2; }
.gla-home--atrasada .gla-home-txt strong { color: #991b1b; }
.gla-home--atrasada .gla-home-btn { background: #b91c1c; color: #fff; }
html.theme-dark .gla-home--atrasada { background: #321c25; border-color: #f87171; }
html.theme-dark .gla-home--atrasada .gla-home-txt strong { color: #fecaca; }
html.theme-dark .gla-home--atrasada .gla-home-btn { background: #fca5a5; color: #450a0a; }