/* ==========================================================================
   Fisio — Liquid Glass sobre fundo neutro

   O vidro refrata o CONTEÚDO que passa por baixo dele, não uma decoração de
   fundo. Por isso o desfoque pesado fica na moldura flutuante (barra superior,
   tab bar e folhas modais) e os cartões de conteúdo são superfícies
   quietas, com fio de contorno em vez de brilho.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  color-scheme: light dark;

  --ground:   #eceef1;
  --ground-2: #e3e6ea;

  --ink:      #14181d;
  --ink-2:    #4a535e;
  --ink-3:    #7b8593;

  --line:     rgba(20 24 29 / .11);
  --line-2:   rgba(20 24 29 / .06);

  --glass:        rgba(255 255 255 / .60);
  --glass-soft:   rgba(255 255 255 / .38);
  --glass-strong: rgba(255 255 255 / .86);
  --rim-hi:       rgba(255 255 255 / .80);
  --rim-lo:       rgba(255 255 255 / .16);

  --shadow-sm: 0 1px 1px rgba(16 20 26 / .05), 0 2px 6px rgba(16 20 26 / .05);
  --shadow-md: 0 1px 2px rgba(16 20 26 / .06), 0 8px 24px rgba(16 20 26 / .08);
  --shadow-lg: 0 4px 12px rgba(16 20 26 / .09), 0 24px 60px rgba(16 20 26 / .16);

  --accent:     #14675c;
  --accent-ink: #ffffff;
  --accent-bg:  rgba(20 103 92 / .10);

  --green: #2f7d5f;
  --amber: #a2741a;
  --red:   #a63b30;

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-pill: 999px;

  --blur: 24px;
  --sat: 150%;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
          "Segoe UI", Inter, system-ui, sans-serif;

  --ease: cubic-bezier(.32, .72, 0, 1);
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:   #101216;
    --ground-2: #0a0c0f;

    --ink:    #e7eaee;
    --ink-2:  #9fa8b4;
    --ink-3:  #6f7884;

    --line:   rgba(255 255 255 / .12);
    --line-2: rgba(255 255 255 / .07);

    --glass:        rgba(255 255 255 / .055);
    --glass-soft:   rgba(255 255 255 / .035);
    --glass-strong: rgba(255 255 255 / .11);
    --rim-hi:       rgba(255 255 255 / .26);
    --rim-lo:       rgba(255 255 255 / .05);

    --shadow-sm: 0 1px 2px rgba(0 0 0 / .35);
    --shadow-md: 0 2px 6px rgba(0 0 0 / .40), 0 12px 32px rgba(0 0 0 / .35);
    --shadow-lg: 0 6px 16px rgba(0 0 0 / .45), 0 30px 70px rgba(0 0 0 / .50);

    --accent:     #4fb3a4;
    --accent-ink: #08211e;
    --accent-bg:  rgba(79 179 164 / .14);

    --green: #52b489;
    --amber: #cf9b34;
    --red:   #e0776a;

    --sat: 130%;
  }
}

/* ---------- base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--ground);
  /* três lavagens quase imperceptíveis: dão ao vidro o que refratar sem
     virar decoração. Nada aqui passa de 16% de opacidade. */
  background-image:
    radial-gradient(78% 52% at 6% 0%, rgba(116 146 178 / .16), transparent 62%),
    radial-gradient(72% 50% at 100% 100%, rgba(186 168 143 / .16), transparent 64%),
    radial-gradient(130% 80% at 50% -25%, rgba(255 255 255 / .80), transparent 62%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark){
  body{
    background-image:
      radial-gradient(78% 52% at 6% 0%, rgba(86 124 166 / .14), transparent 62%),
      radial-gradient(72% 50% at 100% 100%, rgba(150 122 92 / .10), transparent 64%),
      radial-gradient(130% 80% at 50% -25%, rgba(255 255 255 / .05), transparent 62%),
      linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 100%);
  }
}

h1,h2,h3,h4{ margin: 0; font-weight: 620; letter-spacing: -.018em; }
p{ margin: 0; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ cursor: pointer; border: 0; background: none; }
a{ color: var(--accent); text-decoration: none; }
::selection{ background: var(--accent-bg); }

svg.i{ display: block; flex: none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   O material
   ========================================================================== */
.glass{
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
/* fio de contorno que refrata: mais claro na aresta que pega luz */
.glass::before{
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(165deg, var(--rim-hi) 0%, var(--rim-lo) 34%, transparent 62%, var(--rim-lo) 88%, var(--rim-hi) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* brilho especular, contido */
.glass::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background: linear-gradient(178deg, rgba(255 255 255 / .34), transparent 42%);
  pointer-events: none;
}
@media (prefers-color-scheme: dark){
  .glass::after{ background: linear-gradient(178deg, rgba(255 255 255 / .07), transparent 42%); }
}
.glass > *{ position: relative; z-index: 3; }

/* sem backdrop-filter o vidro vira superfície opaca, não some */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass{ background: rgba(255 255 255 / .92); }
  @media (prefers-color-scheme: dark){ .glass{ background: rgba(26 29 35 / .96); } }
}

/* ==========================================================================
   Layout
   ========================================================================== */
.app{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr;
  min-height: 100dvh;
}
.stage{ display: flex; flex-direction: column; min-width: 0; }

.topbar{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: calc(var(--safe-t) + 12px) 16px 12px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.topbar .titles{ flex: 1; min-width: 0; }
.topbar h1{ font-size: 20px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar p{ font-size: 12.5px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions{ display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.icon-btn{
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover{ background: var(--glass-soft); color: var(--ink); }
.icon-btn:active{ transform: scale(.92); }
.icon-btn.plain{ box-shadow: none; }

main#view{
  flex: 1;
  padding: 14px 16px calc(112px + var(--safe-b));
  max-width: 1000px; width: 100%; margin: 0 auto;
  animation: viewIn .26s var(--ease);
}
@keyframes viewIn{ from{ opacity: 0; } to{ opacity: 1; } }

/* barra inferior flutuante (celular) */
.tabbar{
  position: fixed; z-index: 50;
  left: 50%; transform: translateX(-50%);
  bottom: calc(14px + var(--safe-b));
  display: flex; gap: 2px; padding: 5px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 24px);
}
.tab{
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 64px; padding: 8px 10px 7px;
  border-radius: var(--r-pill);
  color: var(--ink-3);
  transition: color .22s var(--ease), transform .22s var(--ease);
}
.tab .lbl{ font-size: 10px; font-weight: 540; }
.tab:active{ transform: scale(.94); }
.tab[aria-current="page"]{ color: var(--ink); }
.tab[aria-current="page"] .lbl{ font-weight: 620; }
.tab[aria-current="page"]::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* trilho lateral (desktop) */
.rail{ display: none; }

@media (min-width: 900px){
  .app{ grid-template-columns: 236px 1fr; padding: 14px; }
  .rail{
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 10px;
    border-radius: var(--r-xl);
    position: sticky; top: 14px; height: calc(100dvh - 28px);
  }
  .tabbar{ display: none; }
  .topbar{ border-radius: var(--r-xl); margin: 0 0 12px 14px; padding: 14px 18px; }
  main#view{ padding: 0 14px 40px; margin: 0; }
}

.rail-brand{ display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; }
.mark{
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
.rail-brand-txt strong{ display: block; font-size: 14.5px; letter-spacing: -.015em; }
.rail-brand-txt small{ color: var(--ink-3); font-size: 11.5px; }

.rail-item{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 14px; font-weight: 500; text-align: left;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.rail-item:hover{ background: var(--glass-soft); color: var(--ink); }
.rail-item[aria-current="page"]{
  background: var(--glass-strong); color: var(--ink); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
#railNav{ display: flex; flex-direction: column; gap: 2px; flex: 1; }

/* ==========================================================================
   Blocos
   ========================================================================== */
.card{ border-radius: var(--r-lg); padding: 15px 16px; margin-bottom: 12px; }
.card.tight{ padding: 10px 12px; }

.sec-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 20px 3px 8px;
}
.sec-head:first-child{ margin-top: 4px; }
.sec-head h2{ font-size: 13px; color: var(--ink-3); font-weight: 560; letter-spacing: 0; }
.sec-head a, .sec-head button{ font-size: 13px; color: var(--accent); font-weight: 540; }

.grid{ display: grid; gap: 10px; }
.grid.g2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.g3{ grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
@media (max-width: 560px){
  .grid.g3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.g3 > *:nth-child(3):last-child{ grid-column: 1 / -1; }
}
.row{ display: flex; align-items: center; gap: 10px; }
.row.between{ justify-content: space-between; }
.row.wrap{ flex-wrap: wrap; }
.spacer{ flex: 1; }

.stat{ border-radius: var(--r-md); padding: 13px 14px; }
.stat .k{ font-size: 11.5px; color: var(--ink-3); font-weight: 540; }
.stat .v{ font-size: 24px; font-weight: 640; letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat .d{ font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.stat.pos .v{ color: var(--green); }
.stat.warn .v{ color: var(--amber); }
.stat.neg .v{ color: var(--red); }

/* ---------- botões ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 560; letter-spacing: -.005em;
  background: var(--glass-strong);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
  transition: transform .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }
.btn.primary{
  color: var(--accent-ink); background: var(--accent);
  box-shadow: var(--shadow-sm);
}
.btn.ghost{ background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.btn.danger{ color: var(--red); }
.btn.sm{ padding: 7px 12px; font-size: 13px; border-radius: var(--r-xs); }
.btn.block{ width: 100%; }
.btn[disabled]{ opacity: .45; pointer-events: none; }

/* ---------- etiquetas ---------- */
.chip{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 560;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2); white-space: nowrap;
}
.chip .dot{ width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip.agendada{ color: var(--ink-2); }
.chip.realizada{ color: var(--green); }
.chip.falta{ color: var(--red); }
.chip.remarcada{ color: var(--amber); }
.chip.cancelada{ color: var(--ink-3); }
.chip.ok{ color: var(--green); }
.chip.due{ color: var(--amber); }

.segmented{
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--r-sm); background: var(--glass-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.segmented button{
  padding: 6px 14px; border-radius: var(--r-xs);
  font-size: 13px; font-weight: 520; color: var(--ink-3);
  transition: all .2s var(--ease);
}
.segmented button[aria-pressed="true"]{
  color: var(--ink); background: var(--glass-strong); font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ---------- listas ---------- */
.list{ border-radius: var(--r-lg); overflow: hidden; }
.item{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; width: 100%; text-align: left;
  transition: background .16s var(--ease);
}
.list .item{ border-bottom: 1px solid var(--line-2); }
.list .item:last-child{ border-bottom: 0; }
.list .item:hover{ background: var(--glass-soft); }
.item .body{ flex: 1; min-width: 0; }
.item .t{ font-size: 14.5px; font-weight: 560; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .s{ font-size: 12.5px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .s .i{ display: inline-block; vertical-align: -2px; margin-right: 3px; }
.item .chev{ color: var(--ink-3); opacity: .6; }
.item .when{ font-size: 13px; font-weight: 620; font-variant-numeric: tabular-nums; }

.avatar{
  width: 36px; height: 36px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 620; letter-spacing: -.01em;
  color: var(--ink-2);
  background: var(--glass-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.avatar.sm{ width: 32px; height: 32px; font-size: 11.5px; }

.empty{ text-align: center; padding: 34px 24px; border-radius: var(--r-lg); }
.empty h3{ font-size: 15px; margin: 0 0 5px; color: var(--ink-2); font-weight: 560; }
.empty p{ font-size: 13px; color: var(--ink-3); max-width: 30ch; margin: 0 auto 14px; }

/* ---------- formulários ---------- */
.field{ margin-bottom: 12px; }
.field > label{
  display: block; font-size: 12px; font-weight: 560; color: var(--ink-2);
  margin: 0 0 5px 2px;
}
.input, .select, .textarea{
  width: 100%; padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255 255 255 / .55);
  border: 1px solid var(--line);
  font-size: 15px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-appearance: none; appearance: none;
}
@media (prefers-color-scheme: dark){
  .input, .select, .textarea{ background: rgba(255 255 255 / .05); }
}
.textarea{ min-height: 84px; resize: vertical; line-height: 1.5; }
.select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237b8593' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.7 6 7.7l3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 12px;
  padding-right: 32px;
}
.input:focus, .select:focus, .textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.hint{ font-size: 11.5px; color: var(--ink-3); margin: 5px 2px 0; }
.hint code{ font-size: 11px; background: var(--glass-soft); padding: 1px 4px; border-radius: 4px; }

.search{ position: relative; margin-bottom: 12px; }
.search .input{ padding-left: 36px; }
.search .i{ position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); z-index: 1; }

.checkline{ display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 14px; }
.checkline input[type=checkbox]{ -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 5px;
  background: rgba(255 255 255 / .5); box-shadow: inset 0 0 0 1.4px var(--line); flex: none; transition: all .18s var(--ease); }
.checkline input[type=checkbox]:checked{ background: var(--accent); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.8'/%3E%3C/svg%3E");
  background-size: 14px; background-position: center; background-repeat: no-repeat; }

/* escala de dor */
.pain{ display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.pain button{
  aspect-ratio: 1; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 580;
  background: var(--glass-soft); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.pain button:active{ transform: scale(.9); }
.pain button[aria-pressed="true"]{ color: #fff; box-shadow: none; }

/* ---------- folha modal ---------- */
.scrim{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10 13 18 / .34);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: fade .26s var(--ease);
  display: flex; align-items: flex-end; justify-content: center;
}
@keyframes fade{ from{ opacity: 0; } to{ opacity: 1; } }
.scrim.closing{ animation: fade .22s var(--ease) reverse forwards; }

.sheet{
  width: 100%; max-width: 540px;
  max-height: min(92dvh, 880px);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: sheetUp .38s var(--ease);
  padding-bottom: var(--safe-b);
}
@keyframes sheetUp{ from{ transform: translateY(100%); } to{ transform: none; } }
.scrim.closing .sheet{ animation: sheetUp .24s var(--ease) reverse forwards; }
@media (min-width: 720px){
  .scrim{ align-items: center; padding: 24px; }
  .sheet{ border-radius: var(--r-xl); animation: sheetIn .34s var(--ease); }
  @keyframes sheetIn{ from{ transform: scale(.97) translateY(10px); opacity: 0; } to{ transform: none; opacity: 1; } }
  .scrim.closing .sheet{ animation: sheetIn .22s var(--ease) reverse forwards; }
}
.sheet-grip{ width: 34px; height: 4px; border-radius: 2px; background: var(--ink-3); opacity: .28; margin: 8px auto 0; flex: none; }
@media (min-width: 720px){ .sheet-grip{ display: none; } }
.sheet-head{ display: flex; align-items: center; gap: 12px; padding: 13px 18px 8px; flex: none; }
.sheet-head h2{ font-size: 17px; flex: 1; }
.sheet-body{ overflow-y: auto; padding: 4px 18px 14px; -webkit-overflow-scrolling: touch; }
.sheet-foot{ display: flex; gap: 8px; padding: 11px 18px 14px; flex: none; border-top: 1px solid var(--line-2); }
.sheet-foot .btn{ flex: 1; }

.toast{
  position: fixed; z-index: 200; left: 50%; transform: translateX(-50%) translateY(16px);
  bottom: calc(94px + var(--safe-b));
  padding: 10px 18px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 520;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .26s var(--ease), transform .26s var(--ease);
  max-width: calc(100vw - 40px);
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 900px){ .toast{ bottom: 26px; } }

/* ---------- progresso do pacote ---------- */
.bar{ height: 6px; border-radius: 3px; background: rgba(120 130 145 / .22); overflow: hidden; }
.bar > i{ display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .5s var(--ease); }
.bar.low > i{ background: var(--amber); }
.bar.was > i{ background: var(--ink-3); opacity: .55; }

/* ---------- abas do paciente ---------- */
.tabs{ display: flex; gap: 2px; overflow-x: auto; padding: 3px; border-radius: var(--r-sm); margin-bottom: 14px;
  background: var(--glass-soft); box-shadow: inset 0 0 0 1px var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar{ display: none; }
.tabs button{ padding: 7px 13px; border-radius: var(--r-xs); font-size: 13px; font-weight: 520; color: var(--ink-3); white-space: nowrap; transition: all .2s var(--ease); }
.tabs button[aria-selected="true"]{ color: var(--ink); font-weight: 600; background: var(--glass-strong); box-shadow: var(--shadow-sm); }

/* ---------- gráfico ---------- */
.chart{ width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis{ stroke: var(--line); stroke-width: 1; }
.chart .lbl{ font-size: 10px; fill: var(--ink-3); font-family: var(--font); }
.legend{ display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.legend i{ width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: 0; }

.kv{ display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt{ color: var(--ink-3); }
.kv dd{ margin: 0; text-align: right; font-weight: 520; }

.muted{ color: var(--ink-3); }
.tiny{ font-size: 12px; }
.mono{ font-variant-numeric: tabular-nums; }
.center{ text-align: center; }
.mt{ margin-top: 12px; }
.up{ color: var(--green); font-weight: 600; }
.down{ color: var(--red); font-weight: 600; }
.flat{ color: var(--ink-3); font-weight: 600; }

/* ==========================================================================
   Impressão — recibos e relatórios em papel branco
   ========================================================================== */
.print-only{ display: none; }
@media print{
  @page{ margin: 18mm 16mm; }
  body{ background: #fff !important; background-image: none !important; }
  .app, .tabbar, .toast, .scrim{ display: none !important; }
  .print-only{ display: block !important; color: #000; font-size: 12pt; }
  .print-only h1{ font-size: 19pt; margin-bottom: 2mm; }
  .print-only h2{ font-size: 13pt; margin: 7mm 0 2mm; border-bottom: 1px solid #ccc; padding-bottom: 1.5mm; }
  .print-only .head{ display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1.5px solid #000; padding-bottom: 3mm; margin-bottom: 5mm; }
  .print-only table{ width: 100%; border-collapse: collapse; font-size: 10.5pt; }
  .print-only th, .print-only td{ text-align: left; padding: 2mm; border-bottom: 1px solid #ddd; vertical-align: top; }
  .print-only th{ background: #f2f2f2; font-size: 9.5pt; }
  .print-only .sign{ margin-top: 22mm; border-top: 1px solid #000; width: 70mm; padding-top: 2mm; font-size: 10pt; }
  .print-only .foot{ margin-top: 8mm; font-size: 9pt; color: #555; }
}

/* variação discreta do cartão, usada em resumos e blocos auxiliares */
.card.flat{ background: var(--glass-soft); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ==========================================================================
   Entrada — login, redefinição de senha e o aviso de backend não configurado
   ========================================================================== */
#login{
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px 20px calc(24px + var(--safe-b));
}
.entrada{
  width: 100%; max-width: 360px;
  border-radius: var(--r-xl);
  padding: 28px 24px 24px;
  text-align: left;
}
.entrada h1{ font-size: 22px; margin-bottom: 4px; }
.entrada > p{ font-size: 13.5px; line-height: 1.5; }
.entrada code{
  font-size: 12px; background: var(--glass-soft);
  padding: 1px 5px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.marca-grande{
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 14px;
  background: var(--accent); color: var(--accent-ink);
}
.erro{
  font-size: 13px; color: var(--red); font-weight: 520;
  margin: 0 0 12px; padding: 9px 12px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 28%, transparent);
}

/* ==========================================================================
   Aviso de versão nova

   Não é um toast: toast some sozinho e serve para confirmar o que a pessoa
   acabou de fazer. Este espera decisão, tem duas ações e precisa caber numa
   linha em tela de celular.
   ========================================================================== */
.aviso{
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  /* bem acima da tab bar: encostado nela, parece parte dela */
  bottom: calc(96px + var(--safe-b));
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 15px;
  border-radius: var(--r-pill);
  /* mais sólido que o vidro comum: pede decisão, não pode se perder no fundo */
  background: var(--glass-strong);
  box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 20px);
  animation: avisoEntra .42s var(--ease);
}
.aviso-txt{
  font-size: 13.5px; font-weight: 540; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.aviso .btn.sm{ flex: none; }
.aviso .icon-btn{ width: 30px; height: 30px; flex: 0 0 30px; color: var(--ink-3); }
@keyframes avisoEntra{
  from{ opacity: 0; transform: translateX(-50%) translateY(14px); }
  to{ opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (min-width: 900px){ .aviso{ bottom: 26px; } }

/* com o aviso na tela, o toast sobe para não cobrir um o outro */
body:has(.aviso:not([hidden])) .toast{ bottom: calc(152px + var(--safe-b)); }
@media (min-width: 900px){
  body:has(.aviso:not([hidden])) .toast{ bottom: 82px; }
}

/* telas bem estreitas: encurta o texto em vez de quebrar o layout */
@media (max-width: 380px){
  .aviso-txt::after{ content: ""; }
  .aviso{ padding-left: 13px; gap: 6px; }
}