/* =========================================================
   CONFIGURAÇÕES — sub-abas de Minhas Informações,
   seletor de tamanho da letra e interruptor de som.
   Usa os tokens do app (com fallback) e adapta ao tema.
========================================================= */

/* ---------- Tamanho da letra: "zoom" no corpo ----------
   Escala texto + interface juntos; layouts fluidos não quebram
   e não aparece rolagem horizontal. Normal = sem alteração. */
:root[data-font="medio"]  body{ zoom: 0.92; }
:root[data-font="grande"] body{ zoom: 1.12; }

/* ---------- Sub-abas (Informações | Configurações) ---------- */
.myinfo-subtabs{
  display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px;
  background: var(--paper, #eef2f8); border: 1px solid var(--line, #e3e9f2);
  border-radius: 13px;
}
.myinfo-subtab{
  border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink-soft, #51607a); padding: 9px 20px; min-height: 42px; border-radius: 9px;
  cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.myinfo-subtab:hover{ color: var(--ink, #0f1b33); }
.myinfo-subtab.on{
  background: var(--card, #fff); color: var(--brand, #0b2a63);
  box-shadow: 0 2px 8px -2px rgba(15, 27, 51, .22);
}
.myinfo-subtab:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(23, 134, 252, .3); }
@media (max-width: 560px){
  .myinfo-subtabs{ display: flex; width: 100%; }
  .myinfo-subtab{ flex: 1 1 0; padding: 9px 10px; }
}

/* ---------- Grupos / linhas ---------- */
.set-group{ margin-bottom: 20px; }
.set-title{
  margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft, #51607a);
}
.set-help{ margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft, #51607a); }

.set-row{
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 14px 16px; background: var(--card, #fff);
  border: 1px solid var(--line, #e3e9f2); border-radius: 14px;
}
.set-row-tx{ flex: 1 1 auto; min-width: 0; }
.set-row-tx b{ display: block; font-size: 15px; color: var(--ink, #0f1b33); }
.set-row-tx small{ display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft, #51607a); }

/* ---------- Seletor segmentado de tamanho da letra ---------- */
.seg{
  display: flex; gap: 4px; padding: 4px;
  background: var(--paper, #eef2f8); border: 1px solid var(--line, #e3e9f2); border-radius: 15px;
}
.seg-btn{
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 62px; padding: 10px 8px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink-soft, #51607a); font: inherit; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .1s ease;
}
.seg-btn:active{ transform: scale(.97); }
.seg-btn .seg-A{ font-weight: 800; line-height: 1; }
.seg-medio  .seg-A{ font-size: 15px; }
.seg-normal .seg-A{ font-size: 19px; }
.seg-grande .seg-A{ font-size: 25px; }
.seg-lb{ font-size: 12.5px; font-weight: 700; }
.seg-btn.on{
  background: var(--card, #fff); color: var(--brand, #0b2a63);
  box-shadow: 0 2px 10px -3px rgba(15, 27, 51, .28);
}
.seg-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(23, 134, 252, .3); }

.set-preview{
  margin: 12px 0 0; padding: 13px 15px; border-radius: 12px;
  background: var(--paper, #f4f7fb); border: 1px dashed var(--line, #dbe3ee);
  color: var(--ink, #0f1b33); font-size: 15px; line-height: 1.5;
}

/* ---------- Interruptor (on/off) ---------- */
.set-switch{
  position: relative; width: 52px; height: 30px; flex: 0 0 auto;
  border: 0; border-radius: 999px; background: #c9d2e0; cursor: pointer;
  transition: background-color .2s ease;
}
.set-switch.on{ background: #16a34a; }
.set-knob{
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease;
}
.set-switch.on .set-knob{ transform: translateX(22px); }
.set-switch:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, .35); }

@media (prefers-reduced-motion: reduce){
  .myinfo-subtab, .seg-btn, .set-switch, .set-knob{ transition: none !important; }
}