/* Peças reutilizáveis: cartão, botão, escala, aba, item de lista,
   selo, modal, aviso, avatar, spinner. */

  .card{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:16px;margin-bottom:14px}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:0;border-color:transparent}
  button:active{transform:scale(.98)}
  /* Navegação por teclado: :focus-visible não dispara no toque nem no
     clique, então isto não polui o uso normal no celular. */
  button:focus-visible,a:focus-visible,.check:focus-within{
    outline:2px solid var(--info);outline-offset:2px}
  .btn-primary{background:var(--acento);border-color:var(--acento);color:var(--acento-txt);font-weight:700;width:100%}
  .btn-ghost{background:transparent}
  .btn-danger{background:transparent;border-color:var(--perigo);color:var(--perigo)}
  .btn-sm{padding:7px 10px;font-size:13px}

  .scale{display:flex;gap:6px;flex-wrap:wrap}
  .scale button{flex:1;min-width:38px;padding:11px 0;text-align:center}
  .scale button.on{background:var(--acento);border-color:var(--acento);color:var(--acento-txt);font-weight:700}
  .scale.s10 button{min-width:30px;font-size:14px}

  .stat{background:var(--superficie2);border:1px solid var(--linha);border-radius:12px;padding:12px}
  .stat .v{font-size:24px;font-weight:700} .stat .k{font-size:12px;color:var(--txt-fraco)}

  .tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap;padding:8px 14px;font-size:14px;border-radius:999px}
  .tabs button.on{background:var(--acento);border-color:var(--acento);color:var(--acento-txt);font-weight:600}

  .item{background:var(--superficie2);border:1px solid var(--linha);border-radius:12px;padding:12px;margin-bottom:8px}
  .item .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
  .item .acts{display:flex;gap:6px;flex-shrink:0}
  .pill{display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;background:var(--acento-fundo);color:var(--acento);border:1px solid var(--acento-borda)}
  .pill.warn{background:var(--aviso-fundo);color:var(--aviso);border-color:var(--aviso-borda)}
  .pill.danger{background:var(--perigo-fundo);color:var(--perigo);border-color:var(--perigo-borda)}

  .modal{position:fixed;inset:0;background:var(--sombra-modal);display:none;align-items:flex-end;justify-content:center;z-index:50}
  .modal.open{display:flex}
  .sheet{background:var(--superficie);width:100%;max-width:780px;max-height:92vh;overflow-y:auto;
    border-radius:18px 18px 0 0;padding:18px 16px calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--linha)}
  .sheet .handle{width:42px;height:4px;background:var(--linha);border-radius:99px;margin:0 auto 14px}

  .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:100px;background:var(--superficie2);
    border:1px solid var(--linha);padding:12px 18px;border-radius:12px;z-index:99;opacity:0;
    transition:opacity .25s;pointer-events:none;max-width:90vw;text-align:center}
  .toast.show{opacity:1}
  .toast.err{border-color:var(--perigo)}

  /* ── Fotos do atleta ── */
  .avatar{width:48px;height:48px;border-radius:50%;padding:0;overflow:hidden;flex-shrink:0;
    background:var(--superficie2);border:2px solid var(--linha);display:flex;align-items:center;justify-content:center}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .avatar .ini{font-weight:700;color:var(--txt-fraco);font-size:17px;letter-spacing:.5px}
  .avatar.grande{width:104px;height:104px;border-color:var(--acento)}
  .avatar.grande .ini{font-size:36px}
  input[type=range]::-webkit-slider-runnable-track{height:5px;background:var(--linha);border-radius:99px}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;
    border-radius:50%;background:var(--acento);border:none}
  input[type=range]::-moz-range-track{height:5px;background:var(--linha);border-radius:99px}
  input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:var(--acento)}

  .modal.centro{align-items:center;padding:14px}
  .modal.centro .sheet{border-radius:16px;max-height:88vh}
  /* Com o fundo ligado os cartões ficam um pouco translúcidos, senão a foto
     só apareceria nas frestas e o efeito passava despercebido. */
  body.com-fundo .card{background:rgba(20,27,35,.84);backdrop-filter:blur(8px)}
  body.com-fundo .stat,body.com-fundo .item{background:rgba(27,36,46,.72)}

  .check{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--linha);
    border-radius:10px;background:var(--superficie2);margin-bottom:7px;cursor:pointer;font-size:14px}
  .check input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--acento);margin:0}
  .spinner{width:22px;height:22px;border:3px solid var(--linha);border-top-color:var(--acento);
    border-radius:50%;animation:spin .8s linear infinite;margin:24px auto}
  @keyframes spin{to{transform:rotate(360deg)}}