/* Fisio App · camada de interface (usa os tokens de tokens.css). Carregada por último. */

/* ---------- menu: uma cor e um ícone por tópico ---------- */
.navbtn[data-nav]{--nav-bg:var(--cyan);--nav-fg:var(--accent-strong)}
.navbtn[data-nav="inicio"],.navbtn[data-nav="visao"]{--nav-bg:#c8edf0;--nav-fg:#1d6b75}
.navbtn[data-nav="agenda"],.navbtn[data-nav="contas"]{--nav-bg:#deddf6;--nav-fg:#4a4fa3}
.navbtn[data-nav="pacientes"]{--nav-bg:#e2edc8;--nav-fg:#4b6f1d}
.navbtn[data-nav="consultas"]{--nav-bg:#f8e1ce;--nav-fg:#a14f1b}
.navbtn[data-nav="revisoes"],.navbtn[data-nav="auditoria"]{--nav-bg:#fbf0cf;--nav-fg:#7a5a0d}
.navbtn[data-nav="seguranca"]{--nav-bg:#dbe8fb;--nav-fg:#2b5ba8}
.navbtn[data-nav="exportar"]{--nav-bg:#d5f1e3;--nav-fg:#176443}
.navbtn[data-nav="privacidade"]{--nav-bg:#efdcf5;--nav-fg:#7a3a8f}
.navbtn[data-nav="convites"]{--nav-bg:#fbdce8;--nav-fg:#a0345f}
.navbtn[data-nav="sair"]{--nav-bg:#fbe1d8;--nav-fg:#983520}

.navbtn[data-nav]{position:relative;transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.navbtn[data-nav]>svg{color:var(--nav-fg);transition:transform var(--t-base) var(--ease)}
.navbtn[data-nav]:not(.active):hover{background:var(--nav-bg)}
.navbtn[data-nav]:not(.active):hover>svg{transform:scale(1.12) rotate(-4deg)}
body .navbtn.active[data-nav],body .bottomnav button.active[data-nav]{background:var(--nav-bg);color:var(--nav-fg);box-shadow:inset 4px 0 0 var(--nav-fg)}
body .bottomnav button.active[data-nav]{box-shadow:inset 0 -3px 0 var(--nav-fg)}
.navbtn.active[data-nav]>svg,.bottomnav button.active[data-nav]>svg{animation:nav-pop .4s var(--ease)}
.navbtn[data-nav="sair"]:not(.active){color:#983520}
@keyframes nav-pop{0%{transform:scale(.7)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

.sidebar{overflow-y:auto}
.sidebar nav{margin-top:var(--space-4)}
.sidebar .navbtn{padding:11px 14px}

/* ---------- perfil: cartão e avatar ---------- */
.pfavatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:var(--av-bg,var(--peach));color:var(--av-fg,#a14f1b);font-weight:700;background-size:cover;background-position:center;
  box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line);overflow:hidden}
.pfavatar.has-photo{font-size:0}
#user-avatar.pfavatar{cursor:pointer;border:0;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-base) var(--ease)}
#user-avatar.pfavatar:hover{transform:scale(1.06);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
#user-avatar.pfavatar:focus-visible{outline:var(--focus-ring);outline-offset:3px}

.profilecard{display:flex;align-items:center;gap:var(--space-3);width:100%;margin-top:var(--space-5);text-align:left;
  padding:var(--space-3);border-radius:var(--radius-md);background:linear-gradient(135deg,var(--cyan),var(--lav));
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-base) var(--ease)}
.profilecard:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.profilecard .pftext{display:grid;min-width:0;flex:1}
.profilecard strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profilecard small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profilecard .pfrole{color:var(--ink);font-weight:600}
.pfedit{width:30px;height:30px;border-radius:50%;background:#ffffffb3;display:grid;place-items:center;flex-shrink:0}
.pfedit svg{width:16px;height:16px}
#appmenu .profilecard{margin:var(--space-3) 0 var(--space-5)}
#drawer-role{display:none}

/* ---------- janela do perfil ---------- */
.profiledialog{width:min(480px,94vw);max-height:92dvh;border:0;border-radius:var(--radius);padding:var(--space-5);color:var(--ink);background:var(--surface);box-shadow:0 20px 70px #192c2e33}
.profiledialog::backdrop{background:#192c2e66;backdrop-filter:blur(2px)}
.profiledialog[open]{animation:dialog-in .25s var(--ease)}
.pfhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}
.pfphoto{display:flex;gap:var(--space-5);align-items:center;margin-bottom:var(--space-5);flex-wrap:wrap}
#pf-canvas{width:168px;height:168px;border-radius:50%;background:var(--field-bg);touch-action:none;cursor:grab;box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--cyan);flex-shrink:0}
#pf-canvas.empty{cursor:default}
#pf-canvas:active{cursor:grabbing}
.pfphotoctl{display:grid;gap:var(--space-2);flex:1;min-width:180px}
.pfphotoctl .btn{width:100%}
.pfphotoctl small{color:var(--muted)}
.pfzoom{margin:0}
.pfzoom label{margin-bottom:4px}
.pfzoom input{width:100%;accent-color:var(--accent)}
.pfswatches{display:flex;gap:var(--space-3);flex-wrap:wrap}
.pfsw{margin:0!important;cursor:pointer}
.pfsw input{position:absolute;opacity:0;width:1px;height:1px}
.pfsw span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sw-bg);color:var(--sw-fg);border:2px solid transparent;transition:transform var(--t-fast) var(--ease),border-color var(--t-base) var(--ease)}
.pfsw span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--sw-fg);opacity:0;transform:scale(.4);transition:opacity var(--t-base),transform var(--t-base) var(--ease)}
.pfsw:hover span{transform:scale(1.08)}
.pfsw input:checked+span{border-color:var(--sw-fg)}
.pfsw input:checked+span::after{opacity:1;transform:scale(1)}
.pfsw input:focus-visible+span{outline:var(--focus-ring);outline-offset:3px}
.pfactions{display:flex;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-5)}
@media(max-width:700px){.profiledialog{padding:var(--space-4)}.pfactions .btn{flex:1}.pfphoto{justify-content:center}}

/* ---------- vida na interface: entrada de telas e interações ---------- */
.view-enter{animation:view-in .32s var(--ease)}
.view-enter>*>.panel,.view-enter>*>.carepanel,.view-enter .patientcard,.view-enter .stat,.view-enter .tile,.view-enter .hero,.view-enter .carestat{animation:card-in .42s var(--ease) both}
.view-enter .patientcard:nth-child(2),.view-enter .stat:nth-child(2){animation-delay:.04s}
.view-enter .patientcard:nth-child(3),.view-enter .stat:nth-child(3){animation-delay:.08s}
.view-enter .patientcard:nth-child(4),.view-enter .stat:nth-child(4){animation-delay:.12s}
.view-enter .patientcard:nth-child(n+5){animation-delay:.16s}
@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes drawer-in{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}

.toast{animation:toast-in .3s var(--ease)}
#appmenu[open]{animation:drawer-in .28s var(--ease)}
.btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn.light:not(:disabled):hover{background:var(--cyan)}
.patientrow:hover{background:#f3fafa}
.patientcard,.tile,.stat{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.patientcard:hover,.tile:hover{transform:translateY(-3px)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.pill{transition:transform var(--t-fast) var(--ease)}
button:not(:disabled):active{transition-duration:.05s}

@media print{.profilecard,.profiledialog{display:none!important}}

fieldset.pfcolors{border:0;padding:0;margin:0 0 var(--space-3);min-width:0}
fieldset.pfcolors legend{padding:0;margin-bottom:var(--space-2);font-weight:600}

/* menu fixo do computador: cartão mais enxuto */
.sidebar .profilecard{margin-top:var(--space-4);padding:var(--space-2) var(--space-3)}
.sidebar .profilecard .pfedit,.sidebar .profilecard .pfmail{display:none}
.sidebar .profilecard .pfavatar{width:40px;height:40px}
@media(max-height:900px){.sidebar .sidefoot{display:none}}

/* ---------- logo da marca ---------- */
.logo{background:transparent;width:46px;height:46px;border-radius:0}
.logoimg{display:block;width:100%;height:100%;object-fit:contain;transition:transform var(--t-base) var(--ease)}
.brand:hover .logoimg{transform:rotate(-6deg) scale(1.06)}
.authcard .logo{width:56px;height:56px}
.drawerbrand{display:flex;align-items:center;gap:10px;font-size:23px;letter-spacing:-1px}
.drawerbrand .logoimg{width:40px;height:40px}
@media(prefers-reduced-motion:reduce){.brand:hover .logoimg{transform:none}}