/* Fisio App · base visual compartilhada (usa só os tokens de tokens.css).
   Carregada depois dos estilos de cada tela, só acrescenta: transições, foco, estados e acessibilidade. */

/* transições curtas e consistentes */
.btn,.tab,.navbtn,.choice,.patientcard,.patientrow,.menubutton,.signout,.textbtn,.bottomnav button{
  transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),transform var(--t-fast) var(--ease),opacity var(--t-base) var(--ease)}
.btn:not(:disabled):active,.tab:active,.navbtn:active,.bottomnav button:active{transform:scale(.98)}
.btn.light:not(:disabled):hover,.menubutton:hover{border-color:var(--accent)}
.patientcard:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.navbtn:not(.active):hover,.tab:not(.active):hover{background:var(--cyan)}

/* foco visível em tudo que é interativo, não só botões e links */
input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:var(--focus-ring);outline-offset:2px}

/* alvos de toque confortáveis no celular */
@media(max-width:700px){
  .btn,.tab,.menubutton,.choice,.field input:not([type=radio]):not([type=checkbox]),.field select{min-height:var(--tap)}
  .bottomnav button{min-height:var(--tap)}
}

/* carregamento: esqueleto no lugar de tela vazia */
.skeleton{position:relative;overflow:hidden;background:#eaf0f0;border-radius:var(--radius-sm);min-height:1em;color:transparent}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,#ffffffb3,transparent);animation:skeleton-shimmer 1.4s infinite}
@keyframes skeleton-shimmer{to{transform:translateX(100%)}}

/* estado vazio com ação */
.empty{display:grid;justify-items:center;gap:var(--space-3)}
.empty .btn{margin-top:var(--space-2)}

/* quem prefere menos movimento */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* contraste forçado (Windows) mantém bordas visíveis */
@media(forced-colors:active){.btn,.tab,.patientcard,.panel{border:1px solid CanvasText}}

@media print{.skeleton{display:none!important}}

/* ---- Formulários no celular: ações sempre à mão ---- */
@media(max-width:700px){
  .formwrap .formactions,.cadastro .formactions{position:sticky;bottom:92px;z-index:5;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
    box-shadow:var(--shadow-md);flex-wrap:wrap;align-items:center}
  .formwrap .formactions .btn,.cadastro .formactions .btn{flex:1}
  .formwrap .formactions .small,.cadastro .formactions .small{flex-basis:100%}
}

/* ---- Avaliação física: seções e progresso ---- */
.secnav{position:sticky;top:0;z-index:14;background:var(--bg);margin:0 calc(var(--space-4) * -1);padding:var(--space-2) var(--space-4) var(--space-3)}
.secnav.stuck{box-shadow:var(--shadow-md)}
.secbar{height:5px;border-radius:6px;background:#e1e9e9;overflow:hidden;margin-bottom:var(--space-2)}
.secbar span{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width var(--t-base) var(--ease)}
.secchips{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;padding:2px}
.secchips::-webkit-scrollbar{display:none}
.secchip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 14px;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;min-height:40px;
  transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.secchip b{width:22px;height:22px;border-radius:50%;background:var(--cyan);display:grid;place-items:center;font-size:12px}
.secchip.done b{background:var(--accent);color:#fff}
.secchip.on{border-color:var(--accent);background:var(--cyan)}
.asec{scroll-margin-top:96px}
@media print{.secnav{display:none!important}}

/* o assistente Elo sobe quando há barra de salvar fixa, para não cobrir o botão */
@media(max-width:700px){
  body:has(.formwrap .formactions) .elo-launcher,body:has(.cadastro .formactions) .elo-launcher{bottom:176px}
  body:has(.stickysave) .elo-launcher{bottom:250px}
}

/* ---- Estados vazios com ação ---- */
.empty.rich{padding:var(--space-6) var(--space-4);gap:var(--space-2)}
.empty.rich strong{color:var(--ink);font-size:17px}
.empty.rich>span:not(.emptyicon){max-width:38ch}
.emptyicon{width:56px;height:56px;border-radius:50%;background:var(--cyan);color:var(--accent-strong);display:grid;place-items:center;margin-bottom:var(--space-1)}
.emptyicon svg{width:26px;height:26px}

/* ---- Carregando: esqueletos ---- */
.skgroup{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.sk-input{height:48px;border-radius:15px}
.sk-btn{height:48px;border-radius:var(--radius-pill);width:60%}
.sk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}
.sk-tile{height:96px;border-radius:var(--radius-md)}
.sk-chart{height:180px;border-radius:var(--radius-md)}
.authloading .skgroup{margin-top:var(--space-3)}
.admstate .skgroup{margin-top:var(--space-5)}