/* ============================================================
   QRAtleta — tema sobre o style.css (layout v3)
   Vermelho de socorro, asfalto e papel de número de peito.
   ============================================================ */
:root{
  --cal:#F1F2F0;
  --papel:#FFFFFF;
  --tinta:#1E2126;
  --tinta-2:#50565E;
  --linha:#D9DCDF;
  --sol:#E3262D;          /* ação principal = vermelho de socorro */
  --sol-claro:#FCE3E4;
  --morro:#1F8A4C;
  --morro-esc:#166B3A;
  --morro-claro:#DDF0E4;
  --laterita:#A8221F;
  --laterita-claro:#F8DCDB;
  --alta:#D9F31C;         /* faixa refletiva (só em detalhes) */
}
a{color:var(--tinta)}
:focus-visible{outline-color:#1E6FD9}

/* botões: vermelho com texto branco */
.botao-sol{background:var(--sol);color:#fff;border-color:var(--sol)}
.botao-sol:hover{background:#C51C23;border-color:#C51C23;color:#fff}
.menu .botao,.menu .botao:hover{color:#fff}
.menu .botao:hover{background:#C51C23}
.botao-verde{background:var(--morro-esc);border-color:var(--morro-esc)}

/* topo com a logo */
.marca{gap:10px}
.qra-logo{height:34px;width:auto;display:block}
.menu a.ativo{box-shadow:inset 0 -3px 0 var(--sol)}
.subnav a[aria-current],.sn-btn.sn-ativo{border-bottom-color:var(--sol)!important}

/* campos usados no cadastro e no perfil */
.campo-rot{font-weight:700;font-size:15px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 16px;margin-top:6px}
.checks .marcar{font-size:15px}
.contato2-rot{margin-top:6px;padding-top:14px;border-top:1px dashed var(--linha)}
.fieldset-urgencia legend,.fieldset-saude legend{color:var(--laterita)}

/* ============ HOME ============ */
.qh{padding:clamp(34px,6vw,76px) 0 clamp(40px,6vw,70px);overflow:hidden}
.qh-grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.qh h1{font-size:clamp(50px,7.4vw,104px);font-weight:900;line-height:.88;letter-spacing:-.005em;max-width:11ch;text-wrap:balance}
.qh-sub{font-size:clamp(18px,2vw,21px);max-width:42ch;margin-top:22px;color:var(--tinta-2)}
.qh .acoes{margin-top:28px}
.qh-mods{margin-top:26px;font-size:15px;color:var(--tinta-2);max-width:48ch}
.qh-mods strong{color:var(--tinta)}

/* número de peito com o QR (o elemento-assinatura da página) */
.peito{position:relative;width:min(100%,400px);margin-inline:auto;background:#fff;border:2px solid var(--tinta);border-radius:10px;
  transform:rotate(-2.6deg);box-shadow:14px 16px 0 rgba(30,33,38,.12);overflow:hidden}
.peito-faixa{background:var(--sol);color:#fff;text-align:center;padding:14px 10px 12px;font:900 44px/0.9 var(--f-titulo);letter-spacing:.02em}
.peito-faixa small{display:block;font:700 13px var(--f-texto);letter-spacing:.04em;margin-top:6px}
.peito-meio{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:18px 22px 14px}
.peito-meio .qr{width:170px;height:170px;display:block}
.peito-dados{font-size:14px;line-height:1.3;color:var(--tinta-2)}
.peito-dados b{display:block;font:900 52px/0.9 var(--f-titulo);color:var(--laterita);margin-bottom:6px}
.peito-dados span{display:block;margin-top:4px}
.peito-refl{height:12px;background:repeating-linear-gradient(90deg,var(--alta) 0 26px,#C9E10F 26px 30px)}
.peito-pe{display:flex;justify-content:space-between;align-items:center;padding:10px 40px 12px;font-size:12px;color:var(--tinta-2)}
.peito-pe .qra-logo{height:20px}
.alfinete{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--cal);border:2px solid var(--tinta);z-index:2}
.alfinete.a1{left:12px;top:12px}.alfinete.a2{right:12px;top:12px}.alfinete.a3{left:12px;bottom:12px}.alfinete.a4{right:12px;bottom:12px}
.peito-nota{text-align:center;font-size:14px;color:var(--tinta-2);margin-top:26px}

/* onde usar */
.usos{background:var(--tinta);color:#fff}
.usos-lista{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px 18px;padding-block:26px}
.usos-lista li{display:flex;flex-direction:column;gap:6px;padding:6px 0}
.usos-lista .ic{width:30px;height:30px;color:var(--alta)}
.usos-lista strong{font:800 22px/1 var(--f-titulo)}
.usos-lista span{font-size:14px;color:#C5CAD0;line-height:1.35}

/* passos */
.qpassos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:26px}
.qpassos li{border-top:4px solid var(--tinta);padding-top:14px}
.qpassos .n{font:900 46px/1 var(--f-titulo);color:var(--sol)}
.qpassos h3{margin:6px 0 8px}
.qpassos p{color:var(--tinta-2);font-size:16px}

/* na hora do acidente: celular */
.qsocorro{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center}
.cel{width:100%;max-width:300px;margin-inline:auto;border:10px solid var(--tinta);border-radius:34px;background:#EEF1EC;overflow:hidden;box-shadow:0 18px 40px rgba(30,33,38,.18)}
.cel-topo{background:#A63A1E;color:#fff;padding:14px 14px 12px}
.cel-topo b{display:block;font:900 22px/1 var(--f-titulo)}
.cel-topo small{display:block;font-size:11px;opacity:.9;margin-top:3px}
.cel-bt{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.cel-bt span{background:#fff;color:#A63A1E;border-radius:7px;text-align:center;font-weight:800;font-size:15px;padding:7px 0 6px;line-height:1}
.cel-bt span small{display:block;font-size:9px;font-weight:700;margin-top:2px}
.cel-corpo{padding:10px;display:grid;gap:8px}
.cel-pessoa{background:#fff;border-radius:8px;padding:9px;display:flex;align-items:center;gap:9px}
.cel-pessoa i{width:40px;height:50px;border-radius:5px;background:#DCE2D8;flex-shrink:0}
.cel-pessoa strong{font-size:14px;line-height:1.1;display:block}
.cel-pessoa small{font-size:11px;color:#4A5046}
.cel-sangue{margin-left:auto;border:2px solid #A63A1E;background:#F6DDD5;border-radius:6px;text-align:center;padding:2px 7px;color:#A63A1E;font:900 22px/1 var(--f-titulo)}
.cel-sangue small{display:block;font:800 8px var(--f-texto);color:#5a1d0e}
.cel-cx{background:#fff;border-radius:8px;padding:8px 9px;font-size:13px;font-weight:700}
.cel-cx small{display:block;font-size:9px;letter-spacing:.06em;color:#4A5046;font-weight:700}
.cel-cx.al{background:#F6DDD5;border:2px solid #A63A1E}
.cel-zap{background:#1D6B35;color:#fff;border-radius:7px;text-align:center;font-size:12px;font-weight:800;padding:8px 0}
.qsocorro ul{display:grid;gap:14px;margin-top:20px}
.qsocorro li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.qsocorro li .ic{color:var(--sol);width:24px;height:24px;margin-top:2px}
.qsocorro li strong{display:block}
.qsocorro li span{color:var(--tinta-2);font-size:16px}

/* privacidade em destaque */
.qprivado{background:var(--papel);border:2px solid var(--tinta);border-radius:var(--r-med);padding:clamp(22px,4vw,40px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,50px)}
.qprivado ul{display:grid;gap:12px}
.qprivado li{display:flex;gap:10px;align-items:flex-start}
.qprivado li .ic{color:var(--morro-esc);margin-top:3px}
.qfim{text-align:center;padding-block:clamp(40px,7vw,90px)}
.qfim h2{font-size:clamp(40px,6vw,72px);font-weight:900;max-width:16ch;margin-inline:auto}
.qfim p{color:var(--tinta-2);margin:14px auto 24px;max-width:46ch}

@media (max-width:980px){
  .usos-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .qh-grade,.qsocorro,.qprivado{grid-template-columns:1fr}
  .peito{max-width:360px}
  .qpassos{grid-template-columns:1fr}
}
@media (max-width:520px){
  .usos-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .peito{width:92%}
  .peito-faixa{font-size:36px}
  .peito-meio{grid-template-columns:1fr;justify-items:center;text-align:center}
  .peito-meio .qr{width:190px;height:190px}
}
@media (prefers-reduced-motion:no-preference){
  .peito{animation:peito-entra .7s cubic-bezier(.2,.8,.2,1) both}
  @keyframes peito-entra{from{transform:rotate(-9deg) translateY(24px);opacity:0}to{transform:rotate(-2.6deg);opacity:1}}
}

/* ============ PAINEL QRAtleta ============ */
.qp-topo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;background:var(--papel);border:2px solid var(--tinta);border-radius:var(--r-med);padding:clamp(18px,3vw,28px);margin-bottom:28px}
.qp-topo h2{font-size:clamp(30px,4vw,42px)}
.qp-topo p{color:var(--tinta-2);margin-top:8px;max-width:56ch}
.qp-topo .acoes{margin-top:18px}
.qp-qr{width:150px;text-align:center;font-size:12px;color:var(--tinta-2)}
.qp-qr span{display:block;word-break:break-all;margin-top:4px}
.qp-qr .qr{width:150px;height:150px;display:block;border:2px solid var(--tinta);border-radius:6px}
.qp-qr-off{width:150px;height:150px;border:2px dashed var(--linha);border-radius:6px;display:grid;place-items:center;color:var(--tinta-2);padding:12px;font-size:14px;text-align:center}
.qp-lista{display:grid;gap:0;border-top:1px solid var(--linha)}
.qp-lista li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:11px 0;border-bottom:1px solid var(--linha)}
.qp-lista .ic{width:22px;height:22px;margin-top:2px}
.qp-lista .ok .ic{color:var(--morro-esc)}
.qp-lista .falta .ic{color:var(--laterita)}
.qp-lista small{display:block;color:var(--tinta-2)}
.qp-pct{font:900 54px/1 var(--f-titulo)}
.qp-pct small{font:700 15px var(--f-texto);color:var(--tinta-2);margin-left:6px}
@media (max-width:640px){.qp-topo{grid-template-columns:1fr}.qp-qr,.qp-qr .qr,.qp-qr-off{width:130px}.qp-qr .qr,.qp-qr-off{height:130px}}

/* tabelas de resumo do admin */
.tabela-resumo td.num,.tabela-resumo th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabela-resumo td.num strong{font:800 22px var(--f-titulo)}
.busca-atletas{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:6px 0 18px}
.busca-atletas input,.busca-atletas select{padding:9px 12px;border:2px solid var(--tinta);border-radius:var(--r-med);font:inherit;font-size:15px;background:#fff}
.busca-atletas input{min-width:240px}
.busca-atletas input{width:auto;flex:1 1 260px;max-width:420px}
.busca-atletas select{width:auto;flex:0 0 auto}
.busca-atletas .botao{flex:0 0 auto}