/* ==========================================================================
   Gestor Berçário — tema sobre o Bootstrap 5.3
   Paleta de giz: pastéis dessaturados, contraste no texto e não na cor.
   ========================================================================== */

:root {
  --gb-sage:     #7BA391;
  --gb-ceu:      #8CB2CD;
  --gb-lilas:    #A79EC2;
  --gb-damasco:  #DFAF81;
  --gb-rosa:     #D59E9E;
  --gb-areia:    #C7BB9F;

  --gb-tinta:    #35443F;
  --gb-tinta-2:  #74837D;
  --gb-papel:    #F3F6F1;
  --gb-cartao:   #FFFFFF;
  --gb-linha:    #E1E7DF;

  --bs-primary:            var(--gb-sage);
  --bs-primary-rgb:        123, 163, 145;
  --bs-body-bg:            var(--gb-papel);
  --bs-body-color:         var(--gb-tinta);
  --bs-secondary-color:    var(--gb-tinta-2);
  --bs-border-color:       var(--gb-linha);
  --bs-border-radius:      .8rem;
  --bs-border-radius-sm:   .55rem;
  --bs-border-radius-lg:   1.1rem;
  --bs-body-font-family:   "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size:     .96rem;
  --bs-link-color:         #55806D;
  --bs-link-hover-color:   #3F6354;
}

[data-bs-theme="dark"] {
  --gb-sage:    #8FBCA8;
  --gb-tinta:   #E6ECE8;
  --gb-tinta-2: #9DACA6;
  --gb-papel:   #171F1C;
  --gb-cartao:  #1F2926;
  --gb-linha:   #2E3A36;

  --bs-primary:         var(--gb-sage);
  --bs-primary-rgb:     143, 188, 168;
  --bs-body-bg:         var(--gb-papel);
  --bs-body-color:      var(--gb-tinta);
  --bs-secondary-color: var(--gb-tinta-2);
  --bs-border-color:    var(--gb-linha);
  --bs-link-color:      #A5CFBB;
  --bs-link-hover-color:#C0DFD1;
}

body { font-family: var(--bs-body-font-family); }

h1, h2, h3, h4, .titulo {
  font-family: "Baloo 2", var(--bs-body-font-family);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
}
h1 { font-size: 1.62rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.05rem; }

.num { font-variant-numeric: tabular-nums; }
.texto-suave { color: var(--gb-tinta-2); }
.medida { max-width: 62ch; }

/* --- barra superior ------------------------------------------------------ */
.gb-topo {
  background: var(--gb-cartao);
  border-bottom: 1px solid var(--gb-linha);
}
.gb-marca {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--gb-tinta);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.gb-marca svg { width: 30px; height: 30px; }

/* --- navegação lateral --------------------------------------------------- */
.gb-nav .nav-link {
  color: var(--gb-tinta);
  border-radius: var(--bs-border-radius);
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.gb-nav .nav-link:hover { background: rgba(var(--bs-primary-rgb), .12); }
.gb-nav .nav-link.active {
  background: rgba(var(--bs-primary-rgb), .18);
  color: var(--bs-link-color);
  font-weight: 600;
}

/* --- cartões ------------------------------------------------------------- */
.card { background: var(--gb-cartao); border-color: var(--gb-linha); }

/* Ficha da criança: a lombada colorida identifica a turma de relance. */
.gb-ficha {
  display: flex;
  align-items: stretch;
  width: 100%;
  text-align: left;
  border: 1px solid var(--gb-linha);
  border-radius: var(--bs-border-radius);
  background: var(--gb-cartao);
  overflow: hidden;
  padding: 0;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
button.gb-ficha:hover {
  box-shadow: 0 6px 18px rgba(53, 68, 63, .09);
  transform: translateY(-1px);
}
.gb-lombada { width: 8px; flex: none; }
.gb-ficha-corpo { padding: .85rem 1rem; flex: 1; min-width: 0; }
.gb-nome { font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 1.16rem; }

.gb-avatar { width: 46px; height: 46px; flex: none; }
.gb-avatar-sm { width: 34px; height: 34px; }

/* Linha de dados da criança. `gap` em flex só existe a partir do Safari 14.1
   e falta em WebView Android antigo, onde os campos colariam. A margem é o
   piso; o gap assume onde houver suporte. */
.gb-meta { display: flex; flex-wrap: wrap; }
.gb-meta > * + * { margin-left: 1rem; }
@supports (gap: 1rem) {
  .gb-meta { gap: .25rem 1rem; }
  .gb-meta > * + * { margin-left: 0; }
}

/* --- cores de turma ------------------------------------------------------ */
.cor-sage    { background: var(--gb-sage); }
.cor-ceu     { background: var(--gb-ceu); }
.cor-lilas   { background: var(--gb-lilas); }
.cor-damasco { background: var(--gb-damasco); }
.cor-rosa    { background: var(--gb-rosa); }
.cor-areia   { background: var(--gb-areia); }

/* --- selos de situação --------------------------------------------------- */
.gb-selo {
  font-size: .74rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 2rem;
  display: inline-block;
  white-space: nowrap;
}
.gb-selo-pendente { background: #F6EBD6; color: #8A5E12; }
.gb-selo-ativo    { background: #DEEDE3; color: #3C6B50; }
.gb-selo-recusado { background: #F3DEDC; color: #8E403A; }
.gb-selo-neutro   { background: var(--gb-papel); color: var(--gb-tinta-2); border: 1px solid var(--gb-linha); }
[data-bs-theme="dark"] .gb-selo-pendente { background: #3A2F17; color: #E3BC72; }
[data-bs-theme="dark"] .gb-selo-ativo    { background: #1E3327; color: #9ACFAE; }
[data-bs-theme="dark"] .gb-selo-recusado { background: #38211F; color: #E0A09A; }

/* --- vazios e avisos ----------------------------------------------------- */
.gb-vazio {
  border: 1.5px dashed var(--gb-linha);
  border-radius: var(--bs-border-radius-lg);
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--gb-tinta-2);
}
.gb-vazio svg { width: 110px; height: 90px; margin-bottom: .6rem; }
.gb-vazio strong {
  display: block;
  font-family: "Baloo 2", sans-serif;
  color: var(--gb-tinta);
  font-size: 1.06rem;
  margin-bottom: .2rem;
}

.gb-atencao {
  background: #F6EBD6;
  color: #7C5510;
  border-left: 4px solid var(--gb-damasco);
  border-radius: 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0;
  padding: .6rem .85rem;
  font-size: .88rem;
}
[data-bs-theme="dark"] .gb-atencao { background: #332A15; color: #DFBE7F; }

/* --- linha do tempo da ficha --------------------------------------------- */
.gb-linha-tempo { border-left: 2px solid var(--gb-linha); padding-left: 1.1rem; }
.gb-registro { position: relative; padding-bottom: 1.2rem; }
.gb-registro::before {
  content: "";
  position: absolute;
  left: -1.47rem;
  top: .42rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gb-cartao);
  border: 2px solid var(--bs-primary);
}

/* --- formulários --------------------------------------------------------- */
.form-control, .form-select {
  background: var(--gb-cartao);
  border-color: var(--gb-linha);
  color: var(--gb-tinta);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .22);
}
/* O Bootstrap compila as variantes de botão com cores literais, não com
   var(--bs-primary). Redefinir o token não basta: é preciso reescrever as
   variáveis de cada variante. */
.btn-primary {
  --bs-btn-bg: var(--gb-sage);            --bs-btn-border-color: var(--gb-sage);
  --bs-btn-hover-bg: #6B9382;             --bs-btn-hover-border-color: #6B9382;
  --bs-btn-active-bg: #5C8271;            --bs-btn-active-border-color: #5C8271;
  --bs-btn-disabled-bg: var(--gb-sage);   --bs-btn-disabled-border-color: var(--gb-sage);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: #55806D;                --bs-btn-border-color: var(--gb-sage);
  --bs-btn-hover-bg: var(--gb-sage);      --bs-btn-hover-border-color: var(--gb-sage);
  --bs-btn-active-bg: var(--gb-sage);     --bs-btn-active-border-color: var(--gb-sage);
  --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-danger {
  --bs-btn-color: #8E403A;                --bs-btn-border-color: #D8ADA8;
  --bs-btn-hover-bg: #8E403A;             --bs-btn-hover-border-color: #8E403A;
  --bs-btn-active-bg: #7A342E;            --bs-btn-active-border-color: #7A342E;
}
.btn-outline-secondary {
  --bs-btn-color: var(--gb-tinta-2);      --bs-btn-border-color: var(--gb-linha);
  --bs-btn-hover-bg: var(--gb-papel);     --bs-btn-hover-border-color: var(--gb-tinta-2);
  --bs-btn-hover-color: var(--gb-tinta);
}
.text-primary, .spinner-border.text-primary { color: var(--gb-sage) !important; }
.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--gb-tinta);
  --bs-nav-tabs-link-active-bg: var(--gb-cartao);
  --bs-nav-tabs-link-active-border-color: var(--gb-linha) var(--gb-linha) var(--gb-cartao);
  --bs-nav-link-color: var(--gb-tinta-2);
  --bs-nav-link-hover-color: var(--gb-tinta);
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #16221D; --bs-btn-hover-color: #16221D; --bs-btn-active-color: #16221D;
  --bs-btn-hover-bg: #A2C9B6; --bs-btn-active-bg: #B0D2C1;
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--gb-sage); --bs-btn-hover-color: #16221D; }
[data-bs-theme="dark"] .btn-outline-danger  { --bs-btn-color: #E0A09A; --bs-btn-border-color: #6A3A35; }

/* --- decoração da tela de entrada ---------------------------------------- */
.gb-capa {
  background: linear-gradient(170deg, rgba(140,178,205,.16), rgba(123,163,145,.16));
  border-radius: var(--bs-border-radius-lg);
  padding: 1.6rem 1.4rem 0;
  text-align: center;
  overflow: hidden;
}
.gb-capa svg { width: 100%; max-width: 280px; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Blocos do início — comunicação, saúde, entretenimento
   Cada grupo tem um tom próprio, usado só na borda e no ícone. A cor
   identifica a área; não é decoração.
   ========================================================================== */

.gb-bloco-comunicacao    { --tom: var(--gb-ceu); }
.gb-bloco-saude          { --tom: var(--gb-sage); }
.gb-bloco-entretenimento { --tom: var(--gb-damasco); }
.gb-bloco-escola         { --tom: var(--gb-lilas); }

.gb-bloco h2 { font-size: 1.1rem; }
.gb-bloco > div:first-child { border-left: 4px solid var(--tom); padding-left: .7rem; margin-bottom: .8rem; }

.gb-cartao {
  display: flex; align-items: center; gap: .9rem;
  width: 100%; height: 100%; text-align: left;
  background: var(--gb-cartao);
  border: 1px solid var(--gb-linha);
  border-radius: var(--bs-border-radius-lg);
  padding: 1rem;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.gb-cartao:hover {
  border-color: var(--tom);
  box-shadow: 0 6px 18px rgba(53, 68, 63, .09);
  transform: translateY(-1px);
}
.gb-cartao-icone {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tom) 18%, transparent);
  color: var(--tom);
}
.gb-cartao-icone svg { width: 23px; height: 23px; }
.gb-cartao-texto { display: flex; flex-direction: column; min-width: 0; }
.gb-cartao-titulo { font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 1.02rem; }
.gb-cartao-contagem {
  margin-left: auto; flex: none;
  background: var(--gb-sage); color: #fff;
  border-radius: 2rem; font-size: .75rem; font-weight: 700;
  padding: .1rem .5rem; min-width: 1.5rem; text-align: center;
}

/* fundo do ícone sem color-mix (WebView antigo) */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .gb-cartao-icone { background: var(--gb-papel); }
}

/* --- títulos de grupo no menu lateral --- */
.gb-nav-titulo {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gb-tinta-2);
  padding: 1rem .75rem .25rem;
}

/* ==========================================================================
   Conversa
   ========================================================================== */

.gb-conversa {
  display: flex; flex-direction: column; gap: .6rem;
  padding: .3rem .1rem;   /* sem altura fixa: rolagem aninhada atrapalha no celular */
}
.gb-msg { display: flex; }
.gb-msg-minha { justify-content: flex-end; }
.gb-msg-balao {
  max-width: min(78%, 40rem);
  background: var(--gb-cartao);
  border: 1px solid var(--gb-linha);
  border-radius: 1rem 1rem 1rem .25rem;
  padding: .55rem .8rem;
}
.gb-msg-minha .gb-msg-balao {
  background: color-mix(in srgb, var(--gb-sage) 16%, var(--gb-cartao));
  border-color: color-mix(in srgb, var(--gb-sage) 34%, var(--gb-linha));
  border-radius: 1rem 1rem .25rem 1rem;
}
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .gb-msg-minha .gb-msg-balao { background: var(--gb-papel); }
}
.gb-msg-hora { font-size: .72rem; color: var(--gb-tinta-2); margin-top: .15rem; }

/* ==========================================================================
   Galeria
   ========================================================================== */

.gb-foto {
  margin: 0; height: 100%;
  background: var(--gb-cartao);
  border: 1px solid var(--gb-linha);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.gb-foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--gb-papel); display: block;
}
.gb-foto figcaption { padding: .75rem .9rem; }

/* Marcação de quem aparece na foto */
.gb-marcador {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--gb-linha); border-radius: 2rem;
  padding: .28rem .75rem; cursor: pointer; font-size: .88rem;
  background: var(--gb-cartao); margin: 0;
}
.gb-marcador:has(input:checked) {
  border-color: var(--gb-sage);
  background: rgba(var(--bs-primary-rgb), .14);
  font-weight: 600;
}
.gb-marcador input { margin: 0; accent-color: var(--gb-sage); }
.gb-marcador-bloqueado { opacity: .55; cursor: not-allowed; }
.gb-marcador-bloqueado span:last-child { color: #8A5E12; }

/* Mesma precaução do .gb-meta: onde o layout depende de `gap`, a margem é o
   piso para WebView antigo e o gap assume onde houver suporte. */
.gb-cartao-icone { margin-right: .9rem; }
.gb-bloco h2 { margin-right: .5rem; }
.gb-cartao-contagem { align-self: center; line-height: 1.5; height: fit-content; }
@supports (gap: 1rem) {
  .gb-cartao-icone { margin-right: 0; }
  .gb-bloco h2 { margin-right: 0; }
}

/* ==========================================================================
   Agenda do dia — preenchimento por toque
   Alvos grandes: quem usa isso está de pé, com uma criança no colo.
   ========================================================================== */

.gb-seg { display: inline-flex; border: 1px solid var(--gb-linha); border-radius: 2rem; overflow: hidden; }
.gb-seg button {
  font: inherit; font-size: .85rem; line-height: 1.2;
  border: 0; background: var(--gb-cartao); color: var(--gb-tinta-2);
  padding: .42rem .72rem; min-height: 38px; cursor: pointer;
  border-right: 1px solid var(--gb-linha);
}
.gb-seg button:last-child { border-right: 0; }
.gb-seg button[aria-pressed="true"] {
  background: var(--gb-sage); color: #fff; font-weight: 600;
}
[data-bs-theme="dark"] .gb-seg button[aria-pressed="true"] { color: #16221D; }

.gb-contador { display: inline-flex; align-items: center; border: 1px solid var(--gb-linha); border-radius: 2rem; }
.gb-contador button {
  font: inherit; font-size: 1.15rem; line-height: 1;
  border: 0; background: none; color: var(--gb-tinta);
  width: 38px; height: 38px; cursor: pointer;
}
.gb-contador button:hover { background: var(--gb-papel); }
.gb-contador output {
  min-width: 56px; text-align: center; font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: .9rem;
}

.gb-campo { display: inline-flex; flex-direction: column; margin: 0 .6rem .6rem 0; }
.gb-campo-rotulo {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gb-tinta-2); margin-bottom: .2rem;
}

.gb-todos {
  border: 1.5px dashed var(--gb-sage); border-radius: var(--bs-border-radius-lg);
  padding: .9rem 1rem .3rem; margin-bottom: 1rem;
  background: rgba(var(--bs-primary-rgb), .07);
}
.gb-todos-titulo {
  font-family: "Baloo 2", sans-serif; font-weight: 600; margin-bottom: .5rem;
}

.gb-diario { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 5.5rem; }
.gb-linha-diario {
  background: var(--gb-cartao); border: 1px solid var(--gb-linha);
  border-radius: var(--bs-border-radius-lg); padding: .9rem 1rem .5rem;
}
.gb-linha-diario > header { display: flex; align-items: center; margin-bottom: .7rem; }
.gb-linha-diario > header > * + * { margin-left: .6rem; }
.gb-linha-nome { font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 1.05rem; }
.gb-linha-campos { display: flex; flex-wrap: wrap; }
.gb-linha-diario details > summary {
  cursor: pointer; font-size: .85rem; color: var(--gb-tinta-2); padding: .3rem 0;
}

/* Salvar sempre alcançável: a professora preenche em levas ao longo do dia. */
.gb-barra-salvar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--gb-cartao); border-top: 1px solid var(--gb-linha);
}

.gb-obs {
  border-left: 3px solid var(--gb-damasco); padding-left: .6rem;
  margin-top: .35rem; font-size: .92rem;
}

.gb-faixa-push {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.4rem;
  border: 1px solid var(--gb-linha); border-left: 4px solid var(--gb-ceu);
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
  padding: .8rem 1rem; background: var(--gb-cartao);
}

/* Professora atribuída a uma turma: remover é um toque, sem abrir menu. */
.gb-chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--gb-linha); border-radius: 2rem;
  padding: .22rem .35rem .22rem .75rem; font-size: .88rem;
  background: var(--gb-cartao);
}
.gb-chip button {
  border: 0; background: none; color: var(--gb-tinta-2); cursor: pointer;
  font-size: 1.1rem; line-height: 1; width: 26px; height: 26px; border-radius: 50%;
  margin-left: .3rem;
}
.gb-chip button:hover { background: var(--gb-papel); color: #8E403A; }

/* Aviso discreto de novidade chegada pelo sino, sem interromper o que a
   pessoa está fazendo. */
.gb-sino-aviso {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 5.2rem;
  z-index: 1055; display: flex; align-items: center; gap: .6rem;
  background: var(--gb-cartao); border: 1px solid var(--gb-sage);
  border-radius: 2rem; padding: .45rem .5rem .45rem 1rem;
  box-shadow: 0 8px 24px rgba(53,68,63,.16); font-size: .88rem;
}

/* ==========================================================================
   Medicação — horários como alvos de toque
   ========================================================================== */

.gb-med {
  background: var(--gb-cartao); border: 1px solid var(--gb-linha);
  border-left: 4px solid var(--gb-rosa);
  border-radius: var(--bs-border-radius-lg); padding: .9rem 1rem;
}
.gb-med-encerrado { border-left-color: var(--gb-linha); opacity: .72; }

.gb-doses { display: flex; flex-wrap: wrap; gap: .4rem; }
.gb-dose {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--gb-linha); border-radius: 2rem;
  padding: .3rem .75rem; font-size: .9rem; font-variant-numeric: tabular-nums;
  background: var(--gb-cartao); color: var(--gb-tinta);
}
.gb-dose small { font-size: .74rem; color: var(--gb-tinta-2); }
.gb-dose button {
  border: 0; background: none; color: var(--gb-tinta-2); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 .1rem;
}
button.gb-dose-pendente { cursor: pointer; border-style: dashed; min-height: 38px; }
button.gb-dose-pendente:hover { border-color: var(--gb-sage); background: rgba(var(--bs-primary-rgb), .1); }
.gb-dose-dada {
  background: #DEEDE3; border-color: #9CC7AC; color: #2F5C40; font-weight: 600;
}
.gb-dose-dada small { color: #4A7358; }
[data-bs-theme="dark"] .gb-dose-dada { background: #1E3327; border-color: #37604A; color: #A8D4B8; }
[data-bs-theme="dark"] .gb-dose-dada small { color: #85B698; }

/* Paleta da turma: seis quadrados, um clique */
.gb-cor {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; padding: 0;
}
.gb-cor.ativa { border-color: var(--gb-tinta); }

/* ==========================================================================
   Resumo do dia
   Agrupado por assunto, rótulo à esquerda. Quem lê procura um assunto
   ("como ele comeu") e vai direto à linha, sem varrer caixa por caixa.
   ========================================================================== */

.gb-resumo {
  display: grid; grid-template-columns: 5.6rem 1fr;
  gap: .3rem .9rem; margin: .5rem 0 0;
  align-items: baseline;
}
.gb-resumo dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gb-tinta-2);
  padding-top: .1rem;
}
.gb-resumo dd {
  margin: 0; display: flex; flex-wrap: wrap;
  column-gap: 1.1rem; row-gap: .15rem;
}
/* Fallback de gap, como no resto: WebView antigo não tem column-gap em flex */
.gb-resumo dd > span + span { margin-left: 1.1rem; }
@supports (gap: 1rem) { .gb-resumo dd > span + span { margin-left: 0; } }

.gb-resumo dd i {
  font-style: normal; color: var(--gb-tinta-2); font-size: .85rem;
  margin-right: .25rem;
}
.gb-resumo dd span { font-weight: 600; font-size: .92rem; white-space: nowrap; }

@media (max-width: 480px) {
  /* Coluna de rótulo some: vira título acima do grupo, senão o valor
     fica espremido em três palavras por linha. */
  .gb-resumo { grid-template-columns: 1fr; gap: .1rem; }
  .gb-resumo dt { margin-top: .45rem; }
}

/* ==========================================================================
   Restrição alimentar
   ========================================================================== */

.gb-alergia {
  border: 1px solid #E0B183; border-left: 5px solid var(--gb-damasco);
  background: #FBF1E3; color: #7C5510;
  border-radius: var(--bs-border-radius); padding: .75rem 1rem; margin-bottom: 1.2rem;
}
.gb-alergia-grave {
  border-color: #D59E9E; border-left-color: #B3574E;
  background: #FAEAE8; color: #8E403A;
}
[data-bs-theme="dark"] .gb-alergia { background: #332A15; color: #DFBE7F; border-color: #5C4A24; }
[data-bs-theme="dark"] .gb-alergia-grave { background: #3A211E; color: #E5A49C; border-color: #6A3A35; }

.gb-restricao {
  background: var(--gb-cartao); border: 1px solid var(--gb-linha);
  border-left: 4px solid var(--gb-areia);
  border-radius: var(--bs-border-radius-lg); padding: .9rem 1rem;
}
.gb-restricao-grave    { border-left-color: #B3574E; }
.gb-restricao-moderada { border-left-color: var(--gb-damasco); }
.gb-restricao-leve     { border-left-color: var(--gb-ceu); }

.gb-med-aguardando { border-left-color: var(--gb-damasco); border-style: dashed; }

/* ==========================================================================
   Medicação dentro da Agenda do dia
   O cartão fica ao lado da linha da criança: é neste momento que a
   professora está com ela na frente.
   ========================================================================== */

.gb-linha-diario { display: block; }
.gb-tem-med { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.gb-tem-med > .gb-linha-corpo { flex: 1 1 26rem; min-width: 0; }

.gb-linha-med {
  flex: 0 1 19rem; min-width: 15rem;
  border: 1px solid var(--gb-rosa); border-left: 4px solid var(--gb-rosa);
  border-radius: var(--bs-border-radius); padding: .7rem .85rem;
  background: color-mix(in srgb, var(--gb-rosa) 8%, var(--gb-cartao));
}
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .gb-linha-med { background: var(--gb-papel); }
}
.gb-med-cab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; margin-bottom: .5rem;
}
.gb-med-cab > span:first-child {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gb-tinta-2);
}
.gb-med-contagem { font-size: .78rem; font-weight: 700; color: #8E403A; }
.gb-med-ok { font-size: .78rem; font-weight: 700; color: #2C6631; }
[data-bs-theme="dark"] .gb-med-contagem { color: #E5A49C; }
[data-bs-theme="dark"] .gb-med-ok { color: #84C285; }

.gb-med-item + .gb-med-item {
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--gb-linha);
}
.gb-med-nome { font-weight: 600; font-size: .95rem; }
.gb-med-nome span { font-weight: 400; color: var(--gb-tinta-2); }

/* Alergia na linha da criança: onde a professora está na hora de servir. */
.gb-marca-alergia {
  font-size: .74rem; font-weight: 700; padding: .15rem .55rem; border-radius: 2rem;
  background: #FBF1E3; color: #7C5510; border: 1px solid #E0B183;
}
.gb-marca-alergia.grave { background: #FAEAE8; color: #8E403A; border-color: #D59E9E; }
[data-bs-theme="dark"] .gb-marca-alergia { background: #332A15; color: #DFBE7F; border-color: #5C4A24; }
[data-bs-theme="dark"] .gb-marca-alergia.grave { background: #3A211E; color: #E5A49C; border-color: #6A3A35; }

@media (max-width: 720px) {
  /* Coluna estreita: o cartão vai para baixo da linha, não ao lado. */
  .gb-tem-med > .gb-linha-corpo, .gb-linha-med { flex: 1 1 100%; }
}

/* Dose marcada mas ainda não salva: dá para desfazer com outro toque.
   Só vira verde depois do Salvar agenda, quando passa a ser registro. */
.gb-dose-marcada {
  background: #F6EBD6; border-color: var(--gb-damasco); color: #7C5510;
  font-weight: 600; border-style: solid; cursor: pointer; min-height: 38px;
}
.gb-dose-marcada:hover { background: #F0E0C2; }
.gb-dose-marcada small { color: #96691C; }
[data-bs-theme="dark"] .gb-dose-marcada {
  background: #3A2E16; border-color: #6B5526; color: #E3BC72;
}
[data-bs-theme="dark"] .gb-dose-marcada small { color: #C4A163; }